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.

angular-package/spectre.css

Modified Spectre.css - a lightweight, responsive, and modern CSS framework originally designed by Yan Zhu.

Skeleton
Getting started
Spectre.css
Demonstration
Major changes
Usage
SCSS/CSS variables
CSS Color classes
- Background
- Label
- Text
- Toast
Sass functions/mixins
Helper class
Documentation and examples
Browser support
Changelog
Git
- Commit
- Versioning
License

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.

Spectre.css

This Spectre.css is maintained by the @angular-package.

Feel free to submit a pull request. Help is always appreciated.

Spectre.css is a lightweight, responsive and modern CSS framework.

Lightweight (~10KB gzipped) 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 further development. ♥

Getting started

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

Install with NPM

$ npm install @angular-package/spectre.css --save

Install with Yarn

$ yarn add @angular-package/spectre.css

Demonstration

Demonstration will be available soon 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.

Usage

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

SCSS/CSS variables

Scheme

The color-scheme variable is set to normal.

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

CSS variable name prefix

CSS variable name structure is defined as follows.

--#{$var-prefix}-#{$name}

It's possible to customize the CSS variables' names with the SCSS variable $var-prefix. By default, it's 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';

Settable SCSS colors

Settable colors with a specific hex on which some others are based.

// src/_variables.scss
// Core colors
$accent-color: #9932CC !default; // CSS variable.
$dark-color: #303742 !default; // CSS variable.
$light-color: #fff !default; // CSS variable.
$primary-color: #5755d9 !default; // CSS variable.

// Control colors
$disabled-color: $bg-color-dark !default; // ! CSS Variable. New control color.
$error-color: #e85600 !default; // CSS variable.
$info-color: #d9edf7 !default; // CSS variable.
$success-color: #32b643 !default; // CSS variable.
$warning-color: #ffb700 !default; // CSS variable.

// Background colors
$bg-color-light: $light-color !default; // CSS variable.

// Link colors
$link-color: $primary-color !default; // CSS variable.

// Other colors
$code-color: #d73e48 !default; // CSS variable.
$highlight-color: #ffe9b3 !default; // CSS variable.

// Body colors
// $body-bg: $bg-color-light !default; // REMOVED in favor of $body-bg-color
$body-bg-color: $bg-color-light !default; // New SCSS variable, CSS variable.

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; // CSS variable.
$primary-color-light: lighten($primary-color, 3%) !default; // CSS variable.

// Secondary.
$secondary-color: lighten($primary-color, 37.5%) !default; // CSS variable.
$secondary-color-dark: darken($secondary-color, 3%) !default; // CSS variable.
$secondary-color-light: lighten($secondary-color, 3%) !default; // CSS variable.

// Gray colors
$gray-color: lighten($dark-color, 55%) !default; // CSS variable.
$gray-color-dark: darken($gray-color, 30%) !default; // CSS variable.
$gray-color-light: lighten($gray-color, 20%) !default; // CSS variable.

// Background colors
$bg-color: lighten($dark-color, 75%) !default; // CSS variable.
$bg-color-dark: darken($bg-color, 3%) !default; // CSS variable.

// Border colors
$border-color: lighten($dark-color, 65%) !default; // CSS variable.
$border-color-dark: darken($border-color, 10%) !default; // CSS variable.
$border-color-light: lighten($border-color, 8%) !default; // CSS variable.

// Link colors
$link-color-dark: darken($link-color, 10%) !default; // CSS variable.
$link-color-light: lighten($link-color, 10%) !default; // CSS variable.

// Body colors.
$body-font-color: lighten($dark-color, 5%) !default; // CSS variable.

CSS colors

CSS variable color structure

Each hex color has four CSS variables defined by the mixin define-color($name, $color, $prefix: $var-prefix), split into hsl form, where suffix h indicates hue, s saturation, l lightness and a - alpha.

By default, argument $prefix is equal to $var-prefix.

// src/mixins/_define-color.scss
// The mixin defines CSS variable color in hsla form.
@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');
  }
}

For example primary-color is built from the CSS variables.

--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. For example core colors.

// src/css-variables/_core-colors.scss
: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 hex color has four CSS variables defined by the mixin define-color-based-on($name, $color, $lightness: 0%, $prefix), split into hsl form, where suffix h indicates hue, l lightness, s saturation and a - alpha.

By default, argument $prefix is equal to $var-prefix.

// src/mixins/_define-color-based-on.scss
// Defines a color based on the specified CSS variable and its lightness.
@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');
}

Color that based on primary-color for example secondary-color is built from the css variables:

:root, :host {
  --s-secondary-color-h: var(--s-primary-color-h);
  --s-secondary-color-l: calc(var(--s-primary-color-l) + 37.5%);
  --s-secondary-color-s: var(--s-primary-color-s);
  --s-secondary-color-a: var(--s-primary-color-a);
}

CSS variables that are based on others are also defined in both :root and :host. 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;
}

Colors are read by the function color($name, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 1, $prefix: $var-prefix).

// src/functions/_color.scss
/*
  The function `color()` returns the hsla color from a CSS variable of the given `$name`.
*/
@function color(
  $name,
  $hue: 0deg,
  $lightness: 0%,
  $saturation: 0%,
  $alpha: 1,
  $prefix: $var-prefix
) {
  @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})
  );
}

For example primary-color or primary-color-dark:

@use 'node_modules/@angular-package/spectre.css/functions' as *;

.primary-color {
  background: color('primary-color');
}

.primary-color-dark {
  background: color('primary-color-dark');
}

Other variables

Border

SCSS variables.

// src/_variables.scss
// Border radius.
$border-radius: $unit-h !default; // ! New CSS variable.

// Border width.
$border-width: $unit-o !default; // ! New CSS variable.
$border-width-lg: $unit-h !default; // ! New CSS variable.

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; // ! New CSS variable.
$control-size-lg: $unit-10 !default; // ! New CSS variable.
$control-size-sm: $unit-7 !default; // ! New CSS variable.

// Control padding.
$control-padding-x: $unit-2 !default; // ! New CSS variable.
$control-padding-x-lg: $unit-2 * 1.5 !default; // ! New CSS variable.
$control-padding-x-sm: $unit-2 * 0.75 !default; // ! New CSS variable.
$control-padding-y: ($control-size - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.
$control-padding-y-lg: ($control-size-lg - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.
$control-padding-y-sm: ($control-size-sm - $line-height) * 0.5 - $border-width !default; // ! New CSS variable.

// Control icon.
$control-icon-size: 0.8rem !default; // ! New CSS variable.

// Control width.
$control-width-lg: 960px !default; // ! New CSS variable.
$control-width-md: 640px !default; // ! New CSS variable.
$control-width-sm: 320px !default; // ! New CSS variable.
$control-width-xl: 1280px !default; // ! New CSS variable. Not used.
$control-width-xs: 180px !default; // ! New CSS variable.

Equivalent CSS variables with default prefix s.

:root, :host {
  // Control size.
  --s-control-size: 1.8rem;
  --s-control-size-lg: 2rem;
  --s-control-size-sm: 1.4rem;

  // Control padding.
  --s-control-padding-x: 0.4rem;
  --s-control-padding-x-lg: calc(var(--s-control-padding-x) * 1.5);
  --s-control-padding-x-sm: calc(var(--s-control-padding-x) * 0.75);
  --s-control-padding-y: calc((var(--s-control-size) - 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));
  --s-control-padding-y-sm: calc((var(--s-control-size-sm) - var(--s-line-height)) * 0.5 - var(--s-border-width));

  // Control icon size.
  --s-control-icon-size: 0.8rem;

  // Control width.
  --s-control-width-lg: 960px;
  --s-control-width-md: 640px;
  --s-control-width-sm: 320px;
  --s-control-width-xl: 1280px;
  --s-control-width-xs: 180px;
}

Font sizes and line-height

SCSS variables.

// src/_variables.scss
$font-size: 0.8rem !default; // ! New CSS variable.
$font-size-lg: 0.9rem !default; // ! New CSS variable.
$font-size-sm: 0.7rem !default; // ! New CSS variable.
$html-font-size: 20px !default; // ! New CSS variable.
$html-line-height: 1.5 !default; // ! New CSS variable.
$line-height: 1.2rem !default; // ! New CSS variable.

Equivalent CSS variables with default prefix s.

// src/css-variables/_font-size.scss
:root, :host {
  --s-font-size: 0.8rem;
  --s-font-size-lg: 0.9rem;
  --s-font-size-sm: 0.7rem;
  --s-html-font-size: 20px;
  --s-html-line-height: 1.5;
  --s-line-height: 1.2rem;
}

Layout spacing

SCSS variables.

// src/_variables.scss
$layout-spacing: $unit-2 !default; // ! New CSS variable.
$layout-spacing-sm: $unit-1 !default; // ! New CSS variable.
$layout-spacing-lg: $unit-4 !default; // ! New CSS variable.

Equivalent CSS variables with default prefix s.

This property is set without a unit because it's used in calculation with a different unit (px).

:root, :host {
  --s-layout-spacing: 0.4;
  --s-layout-spacing-lg: 0.8;
  --s-layout-spacing-sm: 0.2;
  --s-layout-spacing-unit: 1rem;
}

Parallax

SCSS variables.

$parallax-deg: 3deg !default;
$parallax-offset: 4.5px !default;
$parallax-offset-z: 50px !default;
$parallax-perspective: 1000px !default;
$parallax-scale: 0.95 !default;
$parallax-fade-color: #ffffff !default;

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-parallax-deg: 3deg;
  --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;
  --s-parallax-offset: 4.5px;
  --s-parallax-offset-z: 50px;
  --s-parallax-perspective: 1000px;
  --s-parallax-scale: 0.95;
}

Responsive breakpoints

// src/_variables.scss
// Responsive breakpoints.
$size-2x: 1440px !default; // ! New CSS variable.
$size-lg: 960px !default; // ! New CSS variable.
$size-md: 840px !default; // ! New CSS variable.
$size-sm: 600px !default; // ! New CSS variable.
$size-xl: 1280px !default; // ! New CSS variable.
$size-xs: 480px !default; // ! New CSS variable.

$responsive-breakpoint: $size-xs !default; // ! New CSS variable.

:root, :host {
  --s-size-2x: 1440px;
  --s-size-lg: 960px;
  --s-size-md: 840px;
  --s-size-sm: 600px;
  --s-size-xl: 1280px;
  --s-size-xs: 480px;

  --s-responsive-breakpoint: 480px;
}

Transition duration

SCSS variable.

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

// src/css-variables/_unit-sizes.scss
: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; // ! New CSS variable.
$zindex-1: 100 !default; // ! New CSS variable.
$zindex-2: 200 !default; // ! New CSS variable.
$zindex-3: 300 !default; // ! New CSS variable.
$zindex-4: 400 !default; // ! New CSS variable.

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 colors are based on SCSS variables, but in @angular-package Spectre.css they are based on CSS variables. They are set the same way, by the bg-color-variant() mixin, but using respective SCSS variables to initialize and change the lightness of the background font color.

Original Spectre.css backgrounds are using the same SCSS variable name as the class name except one .bg-gray, which uses $bg-color. This version, $bg-color SASS variable is used in the new background .bg class, and .bg-gray uses $gray-color to have consistent naming.

There are also new background .bg-accent ($accent-color), .bg-gray-dark ($gray-color-dark), .bg-gray-light ($gray-color-light), .bg-info ($info-color) classes that are consistent in Spectre.css naming convention, but they are also .bg-color-dark ($bg-color-dark), .bg-color-light ($bg-color-light) that aren't.

// src/utilities/_colors.scss
/*
  Background colors
*/
// Accent
@include bg-color-variant('.bg-accent', 'accent-color', $accent-color);

// BG core colors
@include bg-color-variant('.bg', 'bg-color', $bg-color);
@include bg-color-variant('.bg-body', 'body-bg-color', $body-bg-color); // ! New background color.
@include bg-color-variant('.bg-color', 'bg-color', $bg-color); // ! Add to have naming consistency.
@include bg-color-variant('.bg-color-light', 'bg-color-light', $bg-color-light);
@include bg-color-variant('.bg-color-dark', 'bg-color-dark', $bg-color-dark);

// Shades.
@include bg-color-variant('.bg-dark', 'dark-color', $dark-color);
@include bg-color-variant('.bg-light', 'light-color', $light-color);

// Primary.
@include bg-color-variant('.bg-primary', 'primary-color', $primary-color);
@include bg-color-variant('.bg-primary-dark', 'primary-color-dark', $primary-color-dark); // ! New background color.
@include bg-color-variant('.bg-primary-light', 'primary-color-light', $primary-color-light); // ! New background color.

// Secondary.
@include bg-color-variant('.bg-secondary', 'secondary-color', $secondary-color);
@include bg-color-variant('.bg-secondary-dark', 'secondary-color-dark', $secondary-color-dark); // ! New background color.
@include bg-color-variant('.bg-secondary-light', 'secondary-color-light', $secondary-color-light); // ! New background color.

/*
  Control colors.
*/
@include bg-color-variant('.bg-disabled', 'disabled-color', $disabled-color); // ! New background color.
@include bg-color-variant('.bg-error', 'error-color', $error-color);
@include bg-color-variant('.bg-info', 'info-color', $info-color);
@include bg-color-variant('.bg-success', 'success-color', $success-color);
@include bg-color-variant('.bg-warning', 'warning-color', $warning-color);

/*
  Gray colors.
*/
@include bg-color-variant('.bg-gray', 'gray-color', $gray-color);
@include bg-color-variant('.bg-gray-dark', 'gray-color-dark', $gray-color-dark);
@include bg-color-variant('.bg-gray-light', 'gray-color-light', $gray-color-light);

// Link colors.
@include bg-color-variant('.bg-link', 'link-color', $link-color); // ! New background color.
@include bg-color-variant('.bg-link-dark', 'link-color-dark', $link-color-dark); // ! New background color.
@include bg-color-variant('.bg-link-light', 'link-color-light', $link-color-light); // ! New background color.

// Other colors.
@include bg-color-variant('.bg-code', 'code-color'); // ! New background class.
@include bg-color-variant('.bg-highlight', 'highlight-color'); // ! New background class.

Label colors

Label color variants are included by using label-class-variant() mixin in the .label class as its extension.

// src/_labels.scss
.label {
  // Label colors
  @include label-class-variant($name: 'accent', $color: 'light-color', $bg-color: 'accent-color'); // ! New label color variant.
  @include label-class-variant($name: 'dark', $color: 'light-color', $bg-color: 'dark-color'); // ! New label color variant.
  @include label-class-variant($name: 'light', $color: 'dark-color', $bg-color: 'light-color'); // ! New label color variant.
  @include label-class-variant($name: 'primary', $color: 'light-color', $bg-color: 'primary-color');
  @include label-class-variant($name: 'secondary', $color: 'primary-color', $bg-color: 'secondary-color');

  // Label control colors
  @include label-class-variant($name: 'disabled', $color: 'disabled-color', $bg-color: 'disabled-color'); // ! New label color variant.
  @include label-class-variant($name: 'error', $color: 'light-color', $bg-color: 'error-color');
  @include label-class-variant($name: 'info', $color: 'info-color', $bg-color: 'info-color'); // ! New label color variant.
  @include label-class-variant($name: 'success', $color: 'light-color', $bg-color: 'success-color');
  @include label-class-variant($name: 'warning', $color: 'light-color', $bg-color: 'warning-color');
}

Text colors

// src/utilities/_colors.scss
/*
  Text colors
*/
@include text-color-variant('.text-body-font', 'body-font-color'); // ! New text color. It's an old .text-dark

// Shades.
@include text-color-variant('.text-dark', 'dark-color');
@include text-color-variant('.text-light', 'light-color');

// Gray colors.
@include text-color-variant('.text-gray', 'gray-color');
@include text-color-variant('.text-gray-dark', 'gray-color-dark'); // ! New text color.
@include text-color-variant('.text-gray-light', 'gray-color-light'); // ! New text color.

// Link colors.
@include text-color-variant('.text-link', 'link-color'); // ! New text color.
@include text-color-variant('.text-link-dark', 'link-color-dark'); // ! New text color.
@include text-color-variant('.text-link-light', 'link-color-light'); // ! New text color.

@include text-color-variant('.text-primary', 'primary-color');
@include text-color-variant('.text-primary-dark', 'primary-color-dark'); // ! New text color.
@include text-color-variant('.text-primary-light', 'primary-color-light'); // ! New text color.

@include text-color-variant('.text-secondary', 'secondary-color-dark');
@include text-color-variant('.text-secondary-dark', 'secondary-color-dark'); // ! New text color.
@include text-color-variant('.text-secondary-light', 'secondary-color-light'); // ! New text color.

// Control colors.
@include text-color-variant('.text-disabled', 'disabled-color'); // ! New text color.
@include text-color-variant('.text-error', 'error-color');
@include text-color-variant('.text-info', 'info-color'); // ! New text color.
@include text-color-variant('.text-success', 'success-color');
@include text-color-variant('.text-warning', 'warning-color');

// Other colors.
@include text-color-variant('.text-code', 'code-color'); // ! New text color.
@include text-color-variant('.text-highlight', 'highlight-color'); // ! New text color.

Toast colors

Toast color variants are included by using toast-class-variant() mixin in the .toast class as its extension.

// src/_toasts.scss
.toast {
  @include toast-class-variant($name: 'accent', $color: 'accent-color'); // ! New toast variant.
  @include toast-class-variant($name: 'disabled', $color: 'disabled-color'); // ! New toast variant.
  @include toast-class-variant($name: 'error', $color: 'error-color');
  @include toast-class-variant($name: 'gray', $color: 'gray-color'); // ! New toast variant.
  @include toast-class-variant($name: 'gray-dark', $color: 'gray-color-dark'); // ! New toast variant.
  @include toast-class-variant($name: 'gray-light', $color: 'gray-color-light'); // ! New toast variant.
  @include toast-class-variant($name: 'info', $color: 'info-color'); // ! New toast variant.
  @include toast-class-variant($name: 'light', $color: 'light-color'); // ! New toast variant.
  @include toast-class-variant($name: 'primary', $color: 'primary-color');
  @include toast-class-variant($name: 'secondary', $color: 'secondary-color'); // ! New toast variant.
  @include toast-class-variant($name: 'success', $color: 'success-color');
  @include toast-class-variant($name: 'warning', $color: 'warning-color');
}

Sass functions/mixins

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

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

`color()`

The function color() returns the hsla color from a CSS variable of the given $name.

@function color(
  $name,
  $hue: 0deg,
  $lightness: 0%,
  $saturation: 0%,
  $alpha: 1,
  $prefix: $var-prefix
) {
  @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})
  );
}

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

`label-class-variant()`

The mixin includes an extending class of name prefixed with label- with the given color $name that includes a label variant of the given $color and $bg-color.

@mixin label-class-variant(
  $name: 'light',
  $color: 'light-color',
  $bg-color: 'primary-color',
) {
  &.label-#{$name} {
    @include label-variant($color, $bg-color);
  }
}

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

// The mixin defines a variable with a specified prefix.
// Set Spectre CSS variable.
@mixin set-var($name, $value: '', $prefix: $var-prefix, $suffix: '') {
  @if string.length($suffix) > 0 {
    --#{$prefix}-#{$name}-#{$suffix}: #{$value};
  } @else {
    --#{$prefix}-#{$name}: #{$value};
  }
}

`var-negative()`

The function var-negative() returns CSS calc function with the given $value multiplied by -1.

@function var-negative($value) {
  @return calc((#{$value}) * -1);
}

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

@mixin toast-class-variant($name: 'dark', $color: 'dark-color') {
  &.toast-#{$name} {
    @include toast-variant($color);
  }
}

Helper class

There is a temporary 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/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
);

Get the hex of the primary 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
);

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.

@angular-package/spectre.css

angular-package

angular-package/spectre.css

Table of contents

Skeleton

Code scaffolding

Build

Publishing

Further help

Spectre.css

Getting started

Install with NPM

Install with Yarn

Demonstration

Major changes

@use ready

CSS variables

Angular components

Usage

SCSS/CSS variables

Scheme

CSS variable name prefix

Settable SCSS colors

Based on settable SCSS colors

CSS colors

CSS variable color structure

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

box-shadow-side()

color()

get-var()

label-class-variant()

set-var()

var-negative()

toast-class-variant()

Helper class

Documentation and examples

Elements

Layout

Components

Utilities

Experimentals

Browser support

Changelog

GIT

Commit

Versioning

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`@use` ready

`box-shadow-side()`

`color()`

`get-var()`

`label-class-variant()`

`set-var()`

`var-negative()`

`toast-class-variant()`

Weekly Downloads