The angular-package supports the development process of angular-based applications in varied ways through the thoughtful, reusable, easy-to-use small pieces of code called packages.
Modified Spectre.css - a lightweight, responsive, and modern CSS framework originally designed by Yan Zhu.
- Lightweight (~20kB min+zipped) starting point for your projects
- Flexbox-based, responsive and mobile-friendly layout
- Elegantly designed and developed elements and components
Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.
Spectre.css is completely free to use. If you enjoy it, please consider donating via Paypal or via Patreon for the Yan Zhu,
and consider donating via fiat or cryptocurrency the @angular-package for further development. ♥
Feel free to submit a pull request. Help is always appreciated.
- Skeleton
- Code scaffolding
- Getting started
- Demonstration
- Major changes
- Variables
- CSS Color Classes
- Sass functions/mixins
- Helper class
- Documentation and examples
- Browser support
- Changelog
- Git
- License
This package was generated by the library skeleton with Angular CLI version 13.0.0.
Copy this package to the packages/spectre.css folder of the library skeleton then run the commands below.
Run ng generate component component-name --project spectre.css to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project spectre.css.
Note: Don't forget to add
--project spectre.cssor else it will be added to the default project in yourangular.jsonfile.
Run ng build spectre.css to build the project. The build artifacts will be stored in the dist/spectre.css directory.
After building your library with ng build spectre.css, go to the dist folder cd dist/spectre.css and run npm publish.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM or Yarn.
Download the compiled and minified Spectre CSS files. And include spectre.min.css located in /dist in your website or web app <head> part. Also, you can add spectre-icons.min.css and spectre-exp.min.css accordingly.
<link rel="stylesheet" href="spectre.min.css">
<link rel="stylesheet" href="spectre-exp.min.css">
<link rel="stylesheet" href="spectre-icons.min.css">Alternatively, you can use the unpkg to load compiled Spectre.css.
<link rel="stylesheet" href="https://unpkg.com/@angular-package/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/@angular-package/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/@angular-package/spectre.css/dist/spectre-icons.min.css">$ npm install @angular-package/spectre.css --save
And you can use following sass files.
// Main spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;
// Define variables.
@use 'node_modules/@angular-package/spectre.css/css-variables' as *;
// Get functions.
@use 'node_modules/@angular-package/spectre.css/functions' as *;
// Get mixins.
@use 'node_modules/@angular-package/spectre.css/mixins' as *;
// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;$ yarn add @angular-package/spectre.css
You can compile your custom version of Spectre.css. Read the documentation.
Demonstration is available here https://angular-package.dev/ui-kit
We can read here, that the Sass team is going to remove @import from the engine in the next few years, and @angular-package/spectre.css is rewritten to use @forward and @use.
Almost all SCSS variables have their equivalent CSS variables, meaning that SCSS variables are only used to define CSS variables and the CSS variables are used in styles instead of SCSS, which results in the ability to change them on the fly without pre-loading.
The @angular-package has already some components that will be soon shared public under the @angular-package/spectre package.
The CSS color-scheme property is set to normal in both :root and :host elements.
:root, :host {
color-scheme: normal;
}Spectre CSS variables are defined in the same pattern as SCSS variables to have naming consistency, but with additional customizable prefix. In general, CSS variable name's structure is defined as follows.
--#{$var-prefix}-#{$name}: #{$value}It's possible to customize the CSS variables' names with the SCSS variable $var-prefix, which by default, is set to s.
// src/_variables.scss
$var-prefix: 's';For example, default CSS variable --s-control-padding-x can be changed to --spectre-control-padding-x after change the $var-prefix: 'spectre';
// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;
// Change the $var-prefix
$var-prefix: 'spectre';
// Define CSS variables.
@use 'node_modules/@angular-package/spectre.css/css-variables' as *;Settable colors with a specific hex on which some others are based.
// src/_variables.scss
/*
Core colors
*/
// Accent.
$accent-color: #9932CC !default; // --#{$var-prefix}-accent-color.
// Dark.
$dark-color: #303742 !default; // --#{$var-prefix}-dark-color.
// Light.
$light-color: #fff !default; // --#{$var-prefix}-light-color.
// Primary.
$primary-color: #5755d9 !default; // --#{$var-prefix}-primary-color.
/*
Background colors.
*/
$bg-color-light: $light-color !default; // --#{$var-prefix}-bg-color-light.
/*
Control colors.
*/
$disabled-color: $bg-color-dark !default; // --#{$var-prefix}-disabled-color.
$error-color: #e85600 !default; // --#{$var-prefix}-error-color.
$info-color: #d9edf7 !default; // --#{$var-prefix}-info-color.
$success-color: #32b643 !default; // --#{$var-prefix}-success-color.
$warning-color: #ffb700 !default; // --#{$var-prefix}-warning-color.
/*
Link colors.
*/
$link-color: $primary-color !default; // --#{$var-prefix}-link-color.
/*
Other colors.
*/
$code-color: #d73e48 !default; // --#{$var-prefix}-code-color.
$highlight-color: #ffe9b3 !default; // --#{$var-prefix}-highlight-color.
/*
Body colors.
*/
$body-bg-color: $bg-color-light !default; // --#{$var-prefix}-body-bg-color.Colors that are based on the hex colors above.
// src/_variables.scss
/*
Core colors.
*/
// Primary.
$primary-color-dark: darken($primary-color, 3%) !default; // --#{$var-prefix}-primary-color-dark.
$primary-color-light: lighten($primary-color, 3%) !default; // --#{$var-prefix}-primary-color-light.
// Secondary.
$secondary-color: lighten($primary-color, 37.5%) !default; // --#{$var-prefix}-secondary-color.
$secondary-color-dark: darken($secondary-color, 3%) !default; // --#{$var-prefix}-secondary-color-dark.
$secondary-color-light: lighten($secondary-color, 3%) !default; // --#{$var-prefix}-secondary-color-light.
/*
Gray colors.
*/
$gray-color: lighten($dark-color, 55%) !default; // --#{$var-prefix}-gray-color.
$gray-color-dark: darken($gray-color, 30%) !default; // --#{$var-prefix}-gray-color-dark.
$gray-color-light: lighten($gray-color, 20%) !default; // --#{$var-prefix}-gray-color-light.
/*
Background colors.
*/
$bg-color: lighten($dark-color, 75%) !default; // --#{$var-prefix}-bg-color.
$bg-color-dark: darken($bg-color, 3%) !default; // --#{$var-prefix}-bg-color-dark.
/*
Border colors.
*/
$border-color: lighten($dark-color, 65%) !default; // --#{$var-prefix}-border-color.
$border-color-dark: darken($border-color, 10%) !default; // --#{$var-prefix}-border-color-dark.
$border-color-light: lighten($border-color, 8%) !default; // --#{$var-prefix}-border-color-light.
// Link colors.
$link-color-dark: darken($link-color, 10%) !default; // --#{$var-prefix}-link-color-dark.
$link-color-light: lighten($link-color, 10%) !default; // --#{$var-prefix}-link-color-light.
/*
Body colors.
*/
$body-font-color: lighten($dark-color, 5%) !default; // --#{$var-prefix}-body-font-color.Each hex color is in hsla() form defined by the define-color() mixin, split into four CSS variables, where suffix h indicates hue, s saturation, l lightness and a alpha.
The single CSS color is defined as follows.
:root, :host {
--#{$var-prefix}-#{$name}-color-h: hue($color)
--#{$var-prefix}-#{$name}-color-s: saturation($color)
--#{$var-prefix}-#{$name}-color-l: lightness($color)
--#{$var-prefix}-#{$name}-color-a: alpha($color)
}The SCSS $var-prefix variable is to make CSS variable unique, $name is the color name and $color is the hex color to obtain hue, saturation, lightness and alpha.
For example, the primary-color is built from the CSS variables based on hex #5755d9.
--s-primary-color-h: 240.9090909091deg; // Hue.
--s-primary-color-s: 63.4615384615%; // Saturation.
--s-primary-color-l: 59.2156862745%; // Lightness.
--s-primary-color-a: 1; // Alpha.CSS variables are defined in both :root and :host elements. For example, core colors.
// src/css-variables/_core-colors.scss
@use '../mixins/define-color' as *;
@use '../variables' as *;
:root, :host {
// Accent.
@include define-color('accent-color', $accent-color); // #9932CC
// Dark.
@include define-color('dark-color', $dark-color); // #303742
// Light.
@include define-color('light-color', $light-color); // #ffffff
// Primary.
@include define-color('primary-color', $primary-color); // #5755d9
}Each color that is based on settable color is defined by the mixin define-color-based-on(), and it's also split into four CSS variables, which values refer by using var() CSS function to settable colors CSS property names, where suffix h indicates hue, s saturation, l lightness and a alpha.
Color that based on primary-color for example secondary-color is built from the CSS variables as follows.
:root, :host {
--s-secondary-color-h: var(--s-primary-color-h);
--s-secondary-color-s: var(--s-primary-color-s);
--s-secondary-color-l: calc(var(--s-primary-color-l) + 37.5%);
--s-secondary-color-a: var(--s-primary-color-a);
}CSS variables that are based on others are also defined in both :root and :host elements. For example core colors.
// src/css-variables/_core-colors.scss
:root, :host {
// Primary.
@include define-color-based-on('primary-color-dark', 'primary-color', $lightness: -3%); // darken($primary-color, 3%)
@include define-color-based-on('primary-color-light', 'primary-color', $lightness: +3%); // lighten($primary-color, 3%)
// Secondary.
@include define-color-based-on('secondary-color', 'primary-color', $lightness: +37.5%); // lighten($primary-color, 37.5%) !default;
@include define-color-based-on('secondary-color-dark', 'secondary-color', $lightness: -3%); // darken($secondary-color, 3%) !default;
@include define-color-based-on('secondary-color-light', 'secondary-color', $lightness: +3%); // lighten($secondary-color, 3%) !default;
}To easily use color defined in four CSS variables with the help comes color() function, which takes six parameters: $name, $hue, $lightness, $saturation, $alpha, and $prefix, and returns color in hsla() form.
There is only $name parameter required, and the $hue, $lightness, $saturation default values are set to 0, $alpha default value is set to 1, and $prefix default value is equal to $var-prefix.
So, it's very easy to insert the color into any style and change the default value of the CSS variable color, for example primary-color or primary-color-dark can be inserted as follows.
@use 'node_modules/@angular-package/spectre.css/functions' as *;
.primary-color {
background: color('primary-color');
}
.primary-color-dark {
background: color('primary-color-dark');
}With the optional parameters, it's possible to inject primary-color lighter or darker by 30%, and it's useful, especially on mixing background with font color, and it works like darken() and lighten(), but with the ability to change the value on the fly cause of the CSS variables.
@use 'node_modules/@angular-package/spectre.css/functions' as *;
.primary-color-lighter {
background: color('primary-color', $lightness: -30%);
color: color('primary-color', $lightness: 30%);
}
.primary-color-darker {
background: color('primary-color', $lightness: -30%);
}There are other SASS variables besides colors that have equivalent CSS variables and default prefix s.
SCSS variables.
// src/_variables.scss
// Border radius.
$border-radius: $unit-h !default; // --#{$var-prefix}-border-radius.
// Border width.
$border-width: $unit-o !default; // --#{$var-prefix}-border-width.
$border-width-lg: $unit-h !default; // --#{$var-prefix}-border-width-lg.Equivalent CSS variables with default prefix s.
:root, :host {
--s-border-radius: 0.1rem;
--s-border-width: 0.05rem;
--s-border-width-lg: 0.1rem;
}SCSS variables.
// src/_variables.scss
// Control size.
$control-size: $unit-9 !default; // --#{$var-prefix}-control-size.
$control-size-sm: $unit-7 !default; // --#{$var-prefix}-control-size-sm.
$control-size-lg: $unit-10 !default; // --#{$var-prefix}-control-size-lg.
// Control padding.
$control-padding-x: $unit-2 !default; // --#{$var-prefix}-control-padding-x.
$control-padding-x-sm: $unit-2 * 0.75 !default; // --#{$var-prefix}-control-padding-x-sm.
$control-padding-x-lg: $unit-2 * 1.5 !default; // --#{$var-prefix}-control-padding-x-lg.
$control-padding-y: ($control-size - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y.
$control-padding-y-sm: ($control-size-sm - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y-sm.
$control-padding-y-lg: ($control-size-lg - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y-lg.
// Control icon.
$control-icon-size: 0.8rem !default; // --#{$var-prefix}-control-icon-size.
// Control width.
$control-width-xs: 180px !default; // --#{$var-prefix}-control-width-xs.
$control-width-sm: 320px !default; // --#{$var-prefix}-control-width-sm.
$control-width-md: 640px !default; // --#{$var-prefix}-control-width-md.
$control-width-lg: 960px !default; // --#{$var-prefix}-control-width-lg.
$control-width-xl: 1280px !default; // --#{$var-prefix}-control-width-xl.Equivalent CSS variables with default prefix s.
:root, :host {
// Control size.
--s-control-size: 1.8rem;
--s-control-size-sm: 1.4rem;
--s-control-size-lg: 2rem;
// Control padding.
--s-control-padding-x: 0.4rem;
--s-control-padding-x-sm: calc(var(--s-control-padding-x) * 0.75);
--s-control-padding-x-lg: calc(var(--s-control-padding-x) * 1.5);
--s-control-padding-y: calc((var(--s-control-size) - var(--s-line-height)) * 0.5 - var(--s-border-width));
--s-control-padding-y-sm: calc((var(--s-control-size-sm) - var(--s-line-height)) * 0.5 - var(--s-border-width));
--s-control-padding-y-lg: calc((var(--s-control-size-lg) - var(--s-line-height)) * 0.5 - var(--s-border-width));
// Control icon size.
--s-control-icon-size: 0.8rem;
// Control width.
--s-control-width-xs: 180px;
--s-control-width-sm: 320px;
--s-control-width-md: 640px;
--s-control-width-lg: 960px;
--s-control-width-xl: 1280px;
}SCSS variables.
// src/_variables.scss
// Font sizes.
$html-font-size: 20px !default; // --#{$var-prefix}-html-font-size.
$font-size: 0.8rem !default; // --#{$var-prefix}-font-size.
$font-size-sm: 0.7rem !default; // --#{$var-prefix}-font-size-sm.
$font-size-lg: 0.9rem !default; // --#{$var-prefix}-font-size-lg.
// Line height.
$html-line-height: 1.5 !default; // --#{$var-prefix}-html-line-height.
$line-height: 1.2rem !default; // --#{$var-prefix}-line-height.Equivalent CSS variables with default prefix s.
:root, :host {
// Font size.
--s-html-font-size: 20px;
--s-font-size: 0.8rem;
--s-font-size-sm: 0.7rem;
--s-font-size-lg: 0.9rem;
// Line height.
--s-html-line-height: 1.5;
--s-line-height: 1.2rem;
}SCSS variables.
// src/_variables.scss
// Layout spacing.
$layout-spacing: $unit-2 !default; // --#{$var-prefix}-layout-spacing.
$layout-spacing-sm: $unit-1 !default; // --#{$var-prefix}-layout-spacing-sm.
$layout-spacing-lg: $unit-4 !default; // --#{$var-prefix}-layout-spacing-lg.Equivalent CSS variables with default prefix s.
This property is set without a unit to calculate with a different unit (
px).
:root, :host {
--s-layout-spacing: 0.4;
--s-layout-spacing-sm: 0.2;
--s-layout-spacing-lg: 0.8;
--s-layout-spacing-unit: 1rem;
}SCSS variables.
$parallax-deg: 3deg !default; // --#{$var-prefix}-parallax-deg.
$parallax-offset: 4.5px !default; // --#{$var-prefix}-parallax-offset.
$parallax-offset-z: 50px !default; // --#{$var-prefix}-parallax-offset-z.
$parallax-perspective: 1000px !default; // --#{$var-prefix}-parallax-perspective.
$parallax-scale: 0.95 !default; // --#{$var-prefix}-parallax-scale.
// color.
$parallax-fade-color: #ffffff !default; // --#{$var-prefix}-fade-color-h/s/l/a.Equivalent CSS variables with default prefix s.
:root, :host {
--s-parallax-deg: 3deg;
--s-parallax-offset: 4.5px;
--s-parallax-offset-z: 50px;
--s-parallax-perspective: 1000px;
--s-parallax-scale: 0.95;
// color
--s-parallax-fade-color-h: 0deg;
--s-parallax-fade-color-s: 0%;
--s-parallax-fade-color-l: 100%;
--s-parallax-fade-color-a: 0.35;
}SCSS variables.
// src/_variables.scss
// Responsive breakpoints.
$size-xs: 480px !default; // --#{$var-prefix}-size-xs.
$size-sm: 600px !default; // --#{$var-prefix}-size-sm.
$size-md: 840px !default; // --#{$var-prefix}-size-md.
$size-lg: 960px !default; // --#{$var-prefix}-size-lg.
$size-xl: 1280px !default; // --#{$var-prefix}-size-xl.
$size-2x: 1440px !default; // --#{$var-prefix}-size-2x.
$responsive-breakpoint: $size-xs !default; // --#{$var-prefix}-responsive-breakpoint.:root, :host {
--s-size-xs: 480px;
--s-size-sm: 600px;
--s-size-md: 840px;
--s-size-lg: 960px;
--s-size-xl: 1280px;
--s-size-2x: 1440px;
--s-responsive-breakpoint: 480px;
}SCSS variable.
// src/_variables.scss
$transition-duration: 0.2s;Equivalent CSS variable with default prefix s.
:root, :host {
--s-transition-duration: 0.2s;
}SCSS variables.
// src/_variables.scss
// Unit sizes.
$unit-o: 0.05rem !default; // ! New CSS variable.
$unit-h: 0.1rem !default; // ! New CSS variable.
$unit-1: 0.2rem !default; // ! New CSS variable.
$unit-2: 0.4rem !default; // ! New CSS variable.
$unit-3: 0.6rem !default; // ! New CSS variable.
$unit-4: 0.8rem !default; // ! New CSS variable.
$unit-5: 1rem !default; // ! New CSS variable.
$unit-6: 1.2rem !default; // ! New CSS variable.
$unit-7: 1.4rem !default; // ! New CSS variable.
$unit-8: 1.6rem !default; // ! New CSS variable.
$unit-9: 1.8rem !default; // ! New CSS variable.
$unit-10: 2rem !default; // ! New CSS variable.
$unit-12: 2.4rem !default; // ! New CSS variable.
$unit-16: 3.2rem !default; // ! New CSS variable.Equivalent CSS variables with default prefix s. Here we have the new variable --s-unit-0.
:root, :host {
--s-unit-o: 0.05rem;
--s-unit-h: 0.1rem;
--s-unit-0: 0rem;
--s-unit-1: 0.2rem;
--s-unit-2: 0.4rem;
--s-unit-3: 0.6rem;
--s-unit-4: 0.8rem;
--s-unit-5: 1rem;
--s-unit-6: 1.2rem;
--s-unit-7: 1.4rem;
--s-unit-8: 1.6rem;
--s-unit-9: 1.8rem;
--s-unit-10: 2rem;
--s-unit-12: 2.4rem;
--s-unit-16: 3.2rem;
}SCSS variables.
// Z-index.
$zindex-0: 1 !default; // --#{$var-prefix}-z-index-0.
$zindex-1: 100 !default; // --#{$var-prefix}-z-index-1.
$zindex-2: 200 !default; // --#{$var-prefix}-z-index-2.
$zindex-3: 300 !default; // --#{$var-prefix}-z-index-3.
$zindex-4: 400 !default; // --#{$var-prefix}-z-index-4.Equivalent CSS variables with default prefix s.
:root, :host {
--s-z-index-0: 1;
--s-z-index-1: 100;
--s-z-index-2: 200;
--s-z-index-3: 300;
--s-z-index-4: 400;
}In the original Spectre.css, background color is based on SCSS variable, but in the @angular-package/spectre.css it is based on CSS variable.
It is set by the modified bg-color-variant() mixin, to use the color() function to set the background and color style, and the SCSS variable is used to add the color property light-color the same way by checking whether the lightness of the SCSS variable is below 60.
@if (lightness($hex-color) < 60) {
color: color('light-color');
}For example, to add .bg-accent CSS class background color that uses CSS variable accent-color.
// Get bg-color-variant mixin
@use 'node_modules/@angular-package/spectre.css/src/mixins/color' as *;
@use 'node_modules/@angular-package/spectre.css/variables' as *;
// Include
@include bg-color-variant('.bg-accent', 'accent-color', $accent-color);All colors have equivalent background CSS classes even with dark and light shades.
Spectre.css backgrounds are using the same SCSS variable name as the class name except one .bg-gray, which uses $bg-color.
In the @angular-package/spectre.css it's modified, now $bg-color SASS variable is used in the new background .bg and .bg-bg class, and .bg-gray uses $gray-color to have consistent naming.
The class name does not include suffix
color, but there is one exception in the.bg-color, which includes. If I want to create background CSS class color.bg-dark, it should refer to the SCSS variable$dark-colorto preserve naming consistency, but it can refer also to the$bg-color-darkwith losing consistency. In the beta version, I decided to add the.bg-bg backgroundclass name to have full naming consistency, so the non-consistent .bg-color is treated as deprecated.
Let's look at how CSS background class colors finally are defined.
// src/utilities/_colors.scss
// Background colors
// - Shades.
@include bg-color-variant('dark', 'dark-color', $dark-color);
@include bg-color-variant('light', 'light-color', $light-color);
// - Core colors.
// -- Accent
@include bg-color-variant('accent', 'accent-color', $accent-color);
// -- Primary.
@include bg-color-variant('primary', 'primary-color', $primary-color);
@include bg-color-variant('primary-dark', 'primary-color-dark', $primary-color-dark);
@include bg-color-variant('primary-light', 'primary-color-light', $primary-color-light);
// -- Secondary.
@include bg-color-variant('secondary', 'secondary-color', $secondary-color);
@include bg-color-variant('secondary-dark', 'secondary-color-dark', $secondary-color-dark);
@include bg-color-variant('secondary-light', 'secondary-color-light', $secondary-color-light);
// - Gray colors.
@include bg-color-variant('gray', 'gray-color', $gray-color);
@include bg-color-variant('gray-dark', 'gray-color-dark', $gray-color-dark);
@include bg-color-variant('gray-light', 'gray-color-light', $gray-color-light);
// - Bg colors
@include bg-color-variant('bg', 'bg-color', $bg-color);
@include bg-color-variant('bg-dark', 'bg-color-dark', $bg-color-dark);
@include bg-color-variant('bg-light', 'bg-color-light', $bg-color-light);
@include bg-color-variant('color', 'bg-color', $bg-color); // @deprecated
@include bg-color-variant('color-dark', 'bg-color-dark', $bg-color-dark); // @deprecated
@include bg-color-variant('color-light', 'bg-color-light', $bg-color-light); // @deprecated
// - Border colors.
@include bg-color-variant('border', 'border-color', $border-color);
@include bg-color-variant('border-dark', 'border-color-dark', $border-color-dark);
@include bg-color-variant('border-light', 'border-color-light', $border-color-light);
// - Control colors.
@include bg-color-variant('disabled', 'disabled-color', $disabled-color);
@include bg-color-variant('error', 'error-color', $error-color);
@include bg-color-variant('info', 'info-color', $info-color);
@include bg-color-variant('success', 'success-color', $success-color);
@include bg-color-variant('warning', 'warning-color', $warning-color);
// - Link colors.
@include bg-color-variant('link', 'link-color', $link-color);
@include bg-color-variant('link-dark', 'link-color-dark', $link-color-dark);
@include bg-color-variant('link-light', 'link-color-light', $link-color-light);
// - Other colors.
@include bg-color-variant('code', 'code-color');
@include bg-color-variant('highlight', 'highlight-color');
// - Body colors.
@include bg-color-variant('body', 'body-bg-color', $body-bg-color); // @deprecated
@include bg-color-variant('body-bg', 'body-bg-color', $body-bg-color);
@include bg-color-variant('body-font', 'body-font-color', $body-font-color);Label color variants are included by using the label-class-variant() mixin that uses color() function, in the .label class as its extension in the src/_labels.scss file.
// src/_labels.scss
.label {
// Label color variants.
// - Core colors.
// -- Accent.
@include label-class-variant('accent', 'light-color', 'accent-color');
// -- Primary.
@include label-class-variant('primary', 'light-color', 'primary-color');
@include label-class-variant('primary-dark', 'light-color', 'primary-color-dark'); // ! New label color variant.
@include label-class-variant('primary-light', 'light-color', 'primary-color-light'); // ! New label color variant.
// -- Secondary.
@include label-class-variant('secondary', 'primary-color', 'secondary-color');
@include label-class-variant('secondary-dark', 'primary-color', 'secondary-color-dark'); // ! New label color variant.
@include label-class-variant('secondary-light', 'primary-color', 'secondary-color-light'); // ! New label color variant.
// - Shades.
@include label-class-variant('dark', 'light-color', 'dark-color');
@include label-class-variant('light', 'body-font-color', 'light-color');
// - Gray colors.
@include label-class-variant('gray', 'gray-color-dark', 'gray-color'); // ! New label color variant.
@include label-class-variant('gray-dark', 'gray-color-light', 'gray-color-dark'); // ! New label color variant.
@include label-class-variant('gray-light', 'gray-color-dark', 'gray-color-light'); // ! New label color variant.
// - Link colors.
@include label-class-variant('link', 'link-color-light', 'link-color'); // ! New label color variant.
@include label-class-variant('link-dark', 'link-color-light', 'link-color-dark'); // ! New label color variant.
@include label-class-variant('link-light', 'link-color-dark', 'link-color-light'); // ! New label color variant.
// - Body colors.
@include label-class-variant('body-bg', 'body-font-color', 'body-bg-color'); // ! New label color variant.
// - Bg colors.
@include label-class-variant('bg', 'body-font-color', 'bg-color'); // ! New label color variant.
@include label-class-variant('bg-dark', 'body-font-color', 'bg-color-dark'); // ! New label color variant.
@include label-class-variant('bg-light', 'body-font-color', 'bg-color-light'); // ! New label color variant.
// - Control colors.
@include label-class-variant('disabled', ('disabled-color', -10%), 'disabled-color');
@include label-class-variant('error', 'light-color', 'error-color');
@include label-class-variant('info', ('info-color', -60%), 'info-color');
@include label-class-variant('success', 'light-color', 'success-color');
@include label-class-variant('warning', 'light-color', 'warning-color');
// - Other colors.
@include label-class-variant('code', 'light-color', 'code-color'); // ! New label color variant.
@include label-class-variant('highlight', ('highlight-color', -50%), 'highlight-color'); // ! New label color variant.
}Text color variants are included by using text-color-variant() mixin in the _colors.scss file.
// src/utilities/_colors.scss
// Text colors
// - Shades.
@include text-color-variant('dark', 'dark-color');
@include text-color-variant('light', 'light-color');
// - Core colors.
// -- Accent.
@include text-color-variant('accent', 'accent-color'); // ! New text color variant.
// -- Primary
@include text-color-variant('primary', 'primary-color');
@include text-color-variant('primary-dark', 'primary-color-dark');
@include text-color-variant('primary-light', 'primary-color-light');
// -- Secondary
@include text-color-variant('secondary', 'secondary-color-dark');
@include text-color-variant('secondary-dark', 'secondary-color-dark');
@include text-color-variant('secondary-light', 'secondary-color-light');
// - Gray colors.
@include text-color-variant('gray', 'gray-color');
@include text-color-variant('gray-dark', 'gray-color-dark');
@include text-color-variant('gray-light', 'gray-color-light');
// - Control colors.
@include text-color-variant('disabled', 'disabled-color');
@include text-color-variant('error', 'error-color');
@include text-color-variant('info', 'info-color');
@include text-color-variant('success', 'success-color');
@include text-color-variant('warning', 'warning-color');
// - Link colors.
@include text-color-variant('link', 'link-color');
@include text-color-variant('link-dark', 'link-color-dark');
@include text-color-variant('link-light', 'link-color-light');
// - Other colors.
@include text-color-variant('code', 'code-color');
@include text-color-variant('highlight', 'highlight-color');
// - Body colors.
@include text-color-variant('body-font', 'body-font-color');Toast color variants are included by using toast-class-variant() mixin in the .toast class as its extension.
// src/_toasts.scss
.toast {
// Toast color variants.
// - Core colors.
@include toast-class-variant('accent', 'accent-color');
@include toast-class-variant('light', 'light-color');
// - Primary colors.
@include toast-class-variant('primary', 'primary-color');
@include toast-class-variant('primary-dark', 'primary-color-dark'); // ! New toast variant.
@include toast-class-variant('primary-light', 'primary-color-light'); // ! New toast variant.
// - Secondary colors.
@include toast-class-variant('secondary', 'secondary-color');
@include toast-class-variant('secondary-dark', 'secondary-color-dark'); // ! New toast variant.
@include toast-class-variant('secondary-light', 'secondary-color-light'); // ! New toast variant.
// - Body & bg colors.
@include toast-class-variant('body-bg', 'body-bg-color'); // ! New toast variant.
@include toast-class-variant('bg', 'bg-color'); // ! New toast variant.
@include toast-class-variant('bg-dark', 'bg-color-dark'); // ! New toast variant.
@include toast-class-variant('bg-light', 'bg-color-light'); // ! New toast variant.
// - Link colors.
@include toast-class-variant('link', 'link-color'); // ! New toast variant.
@include toast-class-variant('link-dark', 'link-color-dark'); // ! New toast variant.
@include toast-class-variant('link-light', 'link-color-light'); // ! New toast variant.
// - Gray colors.
@include toast-class-variant('gray', 'gray-color'); // ! New toast variant.
@include toast-class-variant('gray-dark', 'gray-color-dark'); // ! New toast variant.
@include toast-class-variant('gray-light', 'gray-color-light'); // ! New toast variant.
// - Control colors.
@include toast-class-variant('disabled', 'disabled-color');
@include toast-class-variant('error', 'error-color');
@include toast-class-variant('info', 'info-color');
@include toast-class-variant('success', 'success-color');
@include toast-class-variant('warning', 'warning-color');
// - Other colors.
@include toast-class-variant('code', 'code-color'); // ! New toast variant.
@include toast-class-variant('highlight', 'highlight-color'); // ! New toast variant.
}@use '../functions/color' as *;
@use '../variables' as *;
@mixin bg-color-variant(
$name: 'primary',
$color: 'primary-color',
$hex-color: $primary-color,
$prefix: $var-prefix
) {
.bg-#{$name}, .#{$prefix}-bg-#{$name} {
background: color($color) !important;
@if (lightness($hex-color) < 60) {
color: color('light-color');
}
}
}The mixin includes the box-shadow of the specified side, size, and color. The side can be bottom, left, right, top, size default is 10px and color default is gray-color.
// src/mixins/_box-shadow-side.scss
@use '../functions/color' as *;
@mixin box-shadow-side($side, $size: 10px, $color: 'gray-color') {
@if $side == right {
// Right side.
box-shadow: $size 0 $size ($size * -1) color($color);
} @else if $side == left {
// Left side.
box-shadow: ($size * -1) 0 $size ($size * -1) color($color);
} @else if $side == bottom {
// Bottom side.
box-shadow: 0 $size $size ($size * -1) color($color);
} @else if $side == top {
// Top side.
box-shadow: 0 ($size * -1) $size ($size * -1) color($color);
} @else {
@error "Unknown side #{$side}.";
}
}The function color() returns the hsla color from the four CSS variables of the given $name.
The $name parameter can be passed as two-index list, where the second item is the $lightness, or can be passed as three-index list, where the third item is the $alpha.
// src/functions/_color.scss
@use '../variables' as *;
@use 'sass:list';
@function color(
$name,
$hue: 0deg,
$saturation: 0%,
$lightness: 0%,
$alpha: 1,
$prefix: $var-prefix
) {
@if list.length($name) > 1 {
@if list.length($name) == 3 {
$alpha: list.nth($name, 3);
}
$lightness: list.nth($name, 2);
$name: list.nth($name, 1);
}
@return hsla(
calc(var(--#{$prefix}-#{$name}-h) + #{$hue}),
calc(var(--#{$prefix}-#{$name}-s) + #{$saturation}),
calc(var(--#{$prefix}-#{$name}-l) + #{$lightness}),
calc(var(--#{$prefix}-#{$name}-a) * #{$alpha})
);
}// src/mixins/_define-color.scss
@use '../variables' as *;
@use 'set-var' as *;
@mixin define-color($name, $color, $prefix: $var-prefix, $alpha: -1) {
@include set-var($name, hue($color), $prefix, 'h');
@include set-var($name, saturation($color), $prefix, 's');
@include set-var($name, lightness($color), $prefix, 'l');
@if $alpha == -1 {
@include set-var($name, alpha($color), $prefix, 'a');
} @else {
@include set-var($name, $alpha, $prefix, 'a');
}
}Defines a color based on the specified CSS variable name and its lightness.
// src/mixins/_define-color-based-on.scss
@use '../functions/get-var' as *;
@use '../variables' as *;
@use 'set-var' as *;
@mixin define-color-based-on($name, $color, $lightness: 0%, $prefix: $var-prefix) {
@include set-var($name, get-var($color, $suffix: 'h'), $prefix, 'h');
@include set-var($name, get-var($color, $suffix: 's'), $prefix, 's');
@include set-var($name, calc(var(--#{$prefix}-#{$color}-l) + #{$lightness}), $prefix, 'l');
@include set-var($name, get-var($color, $suffix: 'a'), $prefix, 'a');
}The function returns the CSS var function or calc function with the specified name, prefix, optional suffix, or unit. Unit is used for variables with a separated unit from the value.
@function get-var(
$name,
$prefix: $var-prefix,
$suffix: '',
$unit: 0
) {
@if string.length($suffix) > 0 {
@if $unit == 1 {
@return calc(var(--#{$prefix}-#{$name}-#{$suffix}) * var(--#{$prefix}-#{$name}-unit));
} @else {
@return var(--#{$prefix}-#{$name}-#{$suffix});
}
} @else {
@if $unit == 1 {
@return calc(var(--#{$prefix}-#{$name}) * var(--#{$prefix}-#{$name}-unit));
} @else {
@return var(--#{$prefix}-#{$name});
}
}
}The mixin label-varian() contains color and background color of the given respectively $color and $bg-color CSS variable name.
Both $color and $bg-color parameters can be passed as two-index list where the second item in the list refers to the lightness.
For example $color: ('primary', -10%) when font color primary should be darker by 10%, and $bg-color: ('primary-dark', +10%) when label background color is primary-dark lighter by 10%.
// src/mixins/_label.scss
@use '../functions/color' as *;
@use '../functions/get-var' as *;
@use 'sass:list';
@mixin label-variant(
$color: 'light-color',
$bg-color: 'primary-color',
$color-lightness: 0%,
$bg-lightness: 0%
) {
$alpha: 1;
@if list.length($color) > 1 {
$color-lightness: list.nth($color, 2);
$color: list.nth($color, 1);
}
@if list.length($bg-color) > 1 {
@if list.length($bg-color) == 3 {
$alpha: list.nth($bg-color, 3);
}
$bg-lightness: list.nth($bg-color, 2);
$bg-color: list.nth($bg-color, 1);
}
background: color($bg-color, $lightness: $bg-lightness, $alpha: $alpha);
color: color($color, $lightness: $color-lightness);
}The mixin contains an extending class of the name prefixed with label- and the given color $name that includes a label variant of the given CSS variable names $color and $bg-color.
Both $color and $bg-color parameters can be passed as two-index list where the second item in the list refers to the lightness.
For example $color: ('primary', -10%) when font color primary should be darker by 10%, and $bg-color: ('primary-dark', +10%) when label background color is primary-dark lighter by 10%.
// src/mixins/_label.scss
@use '../functions/color' as *;
@use '../functions/get-var' as *;
@use 'sass:list';
@mixin label-class-variant(
$name: 'light',
$color: 'light-color',
$bg-color: 'primary-color',
$color-lightness: 0%,
$bg-lightness: 0%
) {
&.label-#{$name} {
@include label-variant($color, $bg-color, $color-lightness, $bg-lightness);
}
}The mixin set-var() defines the CSS variable with a specified name, value, prefix, and optional suffix. By default argument prefix is set to $var-prefix.
// src/mixins/set-var.scss
@use '../variables' as *;
@use 'sass:string';
@mixin set-var($name, $value: '', $prefix: $var-prefix, $suffix: '') {
@if string.length($suffix) > 0 {
--#{$prefix}-#{$name}-#{$suffix}: #{$value};
} @else {
--#{$prefix}-#{$name}: #{$value};
}
}The function var-negative() returns CSS calc function with the given $value multiplied by -1.
// src/functions/var-negative.scss
@use 'sass:string';
@function var-negative($value) {
@return calc((#{$value}) * -1);
}The mixin includes toast background and border color of a given $color CSS variable name.
The $color parameter can be passed as two-index list where the second item in the list refers to the background lightness, and third to background alpha.
For example $color: ('primary', -10%) when font color primary should be darker by 10%, and $color: ('primary-dark', +10%, 0.5) when toast background color is primary-dark lighter by 10% with transparency 0.5.
// src/mixins/_toast.scss
@use '../functions/color' as *;
@use 'sass:list';
@mixin toast-variant($color: 'dark-color', $lightness: 0%, $alpha: 0.95) {
@if list.length($color) > 1 {
@if list.length($color) == 3 {
$alpha: list.nth($color, 3);
}
$lightness: list.nth($color, 2);
$color: list.nth($color, 1);
}
background: color($color, $lightness: $lightness, $alpha: $alpha);
border-color: color($color);
}The mixin includes an extension class of name prefixed with toast- with a given color $name that includes a toast variant of the given $color.
The $color parameter can be passed as two-index list where the second item in the list refers to the background lightness, and third to background alpha.
For example $color: ('primary', -10%) when font color primary should be darker by 10%, and $bg-color: ('primary-dark', +10%) when label background color is primary-dark lighter by 10%.
// src/mixins/_toast.scss
@use '../functions/color' as *;
@use 'sass:list';
@mixin toast-class-variant(
$name: 'dark',
$color: 'dark-color',
$lightness: 0%,
$alpha: 0.95
) {
&.toast-#{$name} {
@include toast-variant($color, $lightness: $lightness, $alpha: $alpha);
}
}There is no longer a helper class inside the
@angular-package/spectre.css, it moved to theuipackage.
There is a class to help handle CSS variables CssPropertyColor and here is an example usage of it:
First, you need to initialize the color you want to handle.
import { CssPropertyColor } from '@angular-package/ui';
const primary = new CssPropertyColor(
'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
's' // Prefix s in the CSS variable --s
);Get the hex of the primary color:
import { CssPropertyColor } from '@angular-package/ui';
const primary = new CssPropertyColor(
'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
's' // Prefix s in the CSS variable --s
);
console.log(primary.getHex()); // #5755d9
// Get the shade `light` of the `primary` color.
console.log(primary.getHex('light')); // #6362dc
// Get the shade `dark` of the `primary` color.
console.log(primary.getHex('dark')); // #4b48d6Set the color dynamically in the spectre.css:
import { CssPropertyColor } from '@angular-package/spectre.css';
const primary = new CssPropertyColor(
'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
's' // Prefix s in the CSS variable --s
);
primary.setHex('#aaaaaa');
console.log(primary.getHex()); // #aaaaaa
// Get the shade `light` of the `primary` color.
console.log(primary.getHex('light')); // #b2b2b2
// Get the shade `dark` of the `primary` color.
console.log(primary.getHex('dark')); // #a2a2a2It's possible to change the shade of the color:
import { CssPropertyColor } from '@angular-package/spectre.css';
const primary = new CssPropertyColor(
'primary', // Name of the color in the CSS variable --s-primary, `color` is added automatically.
's' // Prefix s in the CSS variable --s
);
primary.setHex('#aaaaaa', 'light');
console.log(primary.getHex('light')); // #aaaaaawith the CSS variable result:
// style.attribute
--s-primary-color-light-h: 0deg;
--s-primary-color-light-l: 66.6667%;
--s-primary-color-light-s: 0%;- Accordions
- Avatars
- Badges
- Breadcrumbs
- Bars
- Cards
- Chips
- Empty states
- Menu
- Nav
- Modals
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips
- Utilities - colors, display, divider, loading, position, shapes and text utilities
- 360-Degree Viewer - CSS ONLY
- Autocomplete
- Calendars
- Carousels - CSS ONLY
- Comparison Sliders - CSS ONLY
- Filters - CSS ONLY
- Meters
- Off-canvas - CSS ONLY
- Parallax - CSS ONLY
- Progress
- Sliders
- Timelines
Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
- Chrome (LAST 4)
- Microsoft Edge (LAST 4)
- Firefox (EXTENDED SUPPORT RELEASE)
- Safari (LAST 4)
- Opera (LAST 4)
- Internet Explorer 10+
Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
Designed and built with ♥ by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.
To read it, click on the CHANGELOG.md link.
Given a version number MAJOR.MINOR.PATCH, increment the:
- MAJOR version when you make incompatible API changes,
- MINOR version when you add functionality in a backwards-compatible manner, and
- PATCH version when you make backwards-compatible bug fixes.
Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.
FAQ How should I deal with revisions in the 0.y.z initial development phase?
The simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.
How do I know when to release 1.0.0?
If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.
MIT © angular-package (license)
MIT © Spectre.css (license)
MIT © Yan Zhu (license)
