angular-package

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.

Spectre.css

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

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.

Code scaffolding

Note: Don't forget to add --project spectre.css or else it will be added to the default project in your angular.json file.

Build

Run ng build spectre.css to build the project. The build artifacts will be stored in the dist/spectre.css directory.

Publishing

After building your library with ng build spectre.css, go to the dist folder cd dist/spectre.css and run npm publish.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Getting started

There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM or Yarn.

Install manually

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">

Install from unpkg

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">

Install with NPM

$ 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 *;

Install with Yarn

$ yarn add @angular-package/spectre.css

Compiling custom version

You can compile your custom version of Spectre.css. Read the documentation.

Demonstration

Demonstration is available here https://angular-package.dev/ui-kit

Major changes

`@use` ready

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.

CSS variables

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.

Angular components

The @angular-package has already some components that will be soon shared public under the @angular-package/spectre package.

Variables

Color scheme

The CSS color-scheme property is set to normal in both :root and :host elements.

:root, :host {
  color-scheme: normal;
}

CSS variable name

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 SCSS colors

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.

Based on settable SCSS colors

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.

CSS variable colors

CSS variable color structure

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;
}

Using CSS variable color

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.

Other variables

Border

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;
}

Control

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;
}

Font sizes and line height

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;
}

Layout spacing

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;
}

Parallax

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;
}

Responsive breakpoints

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;
}

Transition duration

SCSS variable.

// src/_variables.scss
$transition-duration: 0.2s;

Equivalent CSS variable with default prefix s.

:root, :host {
  --s-transition-duration: 0.2s;
}

Units

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;
}

z-index

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;
}

CSS Color Classes

Background colors

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-color to preserve naming consistency, but it can refer also to the $bg-color-dark with losing consistency. In the beta version, I decided to add the .bg-bg background class 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);

Demonstration | Documentation

Label colors

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.
}

Demonstration | Documentation

Text colors

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');

Demonstration | Documentation

Toast colors

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.
}

Documentation

Sass functions/mixins

`bg-color-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');
    }
  }
}

Documentation

`box-shadow-side()`

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}.";
  }
}

Documentation

`color()`

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})
  );
}

Documentation

`define-color()`

// 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');
  }
}

Documentation

`define-color-based-on()`

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');
}

Documentation

`get-var()`

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});
    }
  }
}

Documentation

`label-variant()`

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);
}

Documentation

`label-class-variant()`

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);
  }
}

Documentation

`set-var()`

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};
  }
}

Documentation

`var-negative()`

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);
}

Documentation

`toast-variant()`

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);
}

Documentation

`toast-class-variant()`

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);
  }
}

Documentation

Helper class

There is no longer a helper class inside the @angular-package/spectre.css, it moved to the ui package.

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')); // #4b48d6

Set 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')); // #a2a2a2

It'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')); // #aaaaaa

with 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%;

Documentation and examples

Elements

Layout

Components

Utilities

Utilities - colors, display, divider, loading, position, shapes and text utilities

Experimentals

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

Browser support

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.

Changelog

To read it, click on the CHANGELOG.md link.

GIT

Commit

Versioning

Semantic Versioning 2.0.0

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.

Name		Name	Last commit message	Last commit date
Latest commit History 1,394 Commits
.github		.github
dist		dist
docs		docs
src		src
.csscomb.json		.csscomb.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.hound.yml		.hound.yml
.scss-lint.yml		.scss-lint.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README-Original.md		README-Original.md
README.md		README.md
css-variables.scss		css-variables.scss
functions.scss		functions.scss
gulpfile.js		gulpfile.js
index.scss		index.scss
karma.conf.js		karma.conf.js
mixins.scss		mixins.scss
ng-package.json		ng-package.json
package.json		package.json
spectre-exp.scss		spectre-exp.scss
spectre-icons.scss		spectre-icons.scss
spectre.scss		spectre.scss
tsconfig.lib.json		tsconfig.lib.json
tsconfig.lib.prod.json		tsconfig.lib.prod.json
tsconfig.spec.json		tsconfig.spec.json
variables.scss		variables.scss

License

angular-package/spectre.css

Folders and files

Latest commit

History

Repository files navigation

angular-package

Spectre.css

Table of contents

Skeleton

Code scaffolding

Build

Publishing

Further help

Getting started

Install manually

Install from unpkg

Install with NPM

Install with Yarn

Compiling custom version

Demonstration

Major changes

@use ready

CSS variables

Angular components

Variables

Color scheme

CSS variable name

Settable SCSS colors

Based on settable SCSS colors

CSS variable colors

CSS variable color structure

Using CSS variable color

Other variables

Border

Control

Font sizes and line height

Layout spacing

Parallax

Responsive breakpoints

Transition duration

Units

z-index

CSS Color Classes

Background colors

Label colors

Text colors

Toast colors

Sass functions/mixins

bg-color-variant()

box-shadow-side()

color()

define-color()

define-color-based-on()

get-var()

label-variant()

label-class-variant()

set-var()

var-negative()

toast-variant()

toast-class-variant()

Helper class

Documentation and examples

Elements

Layout

Components

Utilities

Experimentals

Browser support

Changelog

GIT

Commit

Versioning

License

About

Topics

Resources

License

Stars

Watchers

`@use` ready

`bg-color-variant()`

`box-shadow-side()`

`color()`

`define-color()`

`define-color-based-on()`

`get-var()`

`label-variant()`

`label-class-variant()`

`set-var()`

`var-negative()`

`toast-variant()`

`toast-class-variant()`