Variables#

• Spectre.css
• Getting Started
• Variables

CSS VariablesCustomizablehsla

Spectre.css is designed with consistent design language. You can use your variables to create your new or match an existing design. All Sass variables defined in the src/variables folder include the !default flag. You can redefine the variables to override the values.

Almost all Sass variables have equivalent CSS variables defined in the same naming pattern as Sass variables to persist consistency but with an additional customizable prefix. They are used in styles instead of Sass variables if possible.

Good to know:

• ✓ Styles are using CSS variables, except in some cases.
• ✓ Sass variables are used mostly only to initialize equivalent CSS variables.
• ✓ CSS variable names are being set in the same Sass variable naming pattern for consistency.
• ✓ CSS variables are set with an additional customizable prefix.
• ✓ There are Sass variables that don't have CSS variables, but they are used in the creation of their names.
• ✓ Spectre.css has the first approach to the Dark and light theme.
• ✓ CSS color variables are created from the property values of the dark and light themes.
• ✓ Hex color has four CSS variables with an additional CSS variable for adjusting color base lightness.
• ✓ There are common Sass variable colors for both dark and light themes.
• ✓ When changing the values of the base CSS colors, the derived CSS colors change on the fly.
• ✓ Colors are being inserted by the color() function in the hsla form.
• ✓ CSS variable name suffix of the color hue, saturation, lightness, and alpha are customizable.
• ✓ Derived color variables are only used in the background classes and they exist for backward compatibility.

Variables - Hex colors#

Spectre.css colors are specified under Sass variables, some of them with hex values, the rest depends on them through the use of darken() and lighten(). The following table contains colors defined with the specific hex.

These are the common colors used in the dark and light theme except the $dark-color and $light-color. If the $primary-color is changed then it changes in both dark and light theme. To change the $primary-color only for the dark or light theme update the map value of the $theme-dark or $theme-light.

Learn how to customize hex colors.

Customize

Variables - Derived colors#

Derived colors are the hex colors with modified lightness or darkness by the lighten() or darken() function, or directly assigned hex colors. The following table contains derived colors from hex colors.

These colors are only used in the background color variants creation for checking the lightness of the specific CSS variable color, to set the color style with the light color. They are here for backward compatibility.

Learn how to customize derived colors.

Customize

Variables - Name#

The important thing is to know how the CSS variable names are being built, and what Sass variables are used to do that for further customization.

Variables - Main#

There are main Sass variables for the entire project without equivalents in CSS variables, but they are used in the creation of their names. The following table contains all of them.

Variables - Variable prefix#

The customizable prefix mentioned above is the $var-prefix variable and it's the prefix of all CSS variable names. The variable is located in the src/variables/_core.scss file and its default value is s.

// src/variables/_core.scss
// Global CSS variable names prefix.
$var-prefix: 's' !default;

General CSS variable name structure is defined as follows.

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

Learn how to customize CSS variable names with $var-prefix.

Customize

Variables - Class prefix#

The Sass variable $class-prefix is the prefix of main CSS classes replacing in a some minimal way custom prefixes for all classes with the gulp. The variable is located in the src/variables/_core.scss file and its default value is an empty string.

// src/variables/_core.scss
// Class names prefix.
$class-prefix: '';

Primary CSS class name structure is defined as follows.

.#{$class-prefix}classname {
  ...
}

For example, the name of the class from cards is defined as follows.

.#{$class-prefix}card { ... }
// Which results in 
.card { ... }

Learn how to customize CSS primary class names with $class-prefix.

Customize

Variables - Color name#

Hex colors and derived aren't used in the styles, instead, the color() function is used, which returns the hsla() function with four predefined CSS variables. It means, each hex and derived color has its representation in four CSS variables, but there is also an additional CSS lightness variable with the default suffix in the name l-l for base lightness adjustment.

Hex color has the CSS variable values obtained from itself by using Sass hue, saturation, lightness and alpha functions, and derived are being obtained by css-var function using the CSS variable color name or color code.

Both, CSS variables of the hex and derived colors are set by the set-color() mixin, with the ability to adjust the lightness or alpha, and each CSS variable name contains the customizable prefix, and variable name with the suffix h indicates hue, s saturation, l lightness, and a alpha.

Color name is just Sass variable color without the dollar $ and it's used as the parameter in the color() function to return hsla() function with a proper CSS variables. For example:

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

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

It's possible to use the color code, which is just a color name without the color word. For example.

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

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

Variables - Color name hue#

The first parameter of the hsla() function is the hue, and the Sass variable $var-hue value is the suffix of the CSS variable name that represents it. The variable is located in the src/variables/_core.scss file and its default value is h.

// src/variables/_core.scss
$var-hue: 'h' !default;

The hue CSS variable name structure is defined as follows.

--#{$var-prefix}-#{$name}-#{$var-hue}: #{$value};

For example, with defaults hue CSS variable name of the primary-color is set as follows.

--s-primary-color-h: 240.9090909091deg;

Learn how to customize CSS variable name hue with the $var-hue.

Customize

Variables - Color name saturation#

The second parameter of the hsla() function is the saturation, and the Sass variable $var-saturation value is the suffix of the CSS variable name that represents it. The variable is located in the src/variables/_core.scss file and its default value is s.

// src/variables/_core.scss
$var-saturation: 's' !default;

The saturation CSS variable name structure is defined as follows.

--#{$var-prefix}-#{$name}-#{$var-saturation}: #{$value};

For example, with defaults saturation CSS variable name of the primary-color is set as follows.

--s-primary-color-s: 63.4615384615%;

Learn how to customize CSS variable name saturation with the $var-saturation.

Customize

Variables - Color name lightness#

The third parameter of the hsla() function is the lightness, and the Sass variable $var-lightness value is the suffix of the CSS variable name that represents it. The variable is located in the src/variables/_core.scss file and its default value is l.

// src/variables/_core.scss
$var-lightness: 'l' !default;

The lightness CSS variable name structure is defined as follows.

--#{$var-prefix}-#{$name}-#{$var-lightness}: #{$value};

Learn how to customize CSS variable name lightness with the $var-lightness.

Customize

Variables - Color name alpha#

The fourth parameter of the hsla() function is the alpha, and the Sass variable $var-alpha value is the suffix of the CSS variable name that represents it. The variable is located in the src/variables/_core.scss file and its default value is a.

// src/variables/_core.scss
$var-alpha: 'a' !default;

The alpha CSS variable name structure is defined as follows.

--#{$var-prefix}-#{$name}-#{$var-alpha}: #{$value};

Learn how to customize CSS variable name alpha with the $var-alpha.

Customize

Variables - Color name summary#

In summary, the single CSS variable color is set as follows.

--#{$var-prefix}-#{$name}-#{$var-hue}: hue($color)
--#{$var-prefix}-#{$name}-#{$var-saturation}: saturation($color)
--#{$var-prefix}-#{$name}-#{$var-lightness}: calc(lightness($color) + var(--#{$var-prefix}-#{$name}-#{$var-lightness}-l'))
--#{$var-prefix}-#{$name}-#{$var-alpha}: alpha($color)

For example, primary-color with defaults is set as follows.

--s-primary-color-h: 240.9090909091deg;
--s-primary-color-s: 63.4615384615%;
--s-primary-color-l: calc(59.2156862745% + var(--s-primary-color-l-l));
--s-primary-color-l-l: 0%;
--s-primary-color-a: 1;

Variables - Theme#

Spectre.css has the first approach of the dark and light theme.

Variables - Color scheme#

The CSS color-scheme property is set to light dark in both :root and :host elements with the Sass $color-scheme variable.

"The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in." - Mozilla.org

The variable is located in the src/variables/_core.scss file.

// src/variables/_core.scss
$color-scheme: light dark !default;

Read moreCustomize

Variables - Theme color#

Both themes have the property theme-color dedicated for the meta tag with attribute name='theme-color' indicating a suggested color that the user agent should use to customize the display of the page or the surrounding user interface.

The property of the $theme-dark is located in the src/variables/_theme-dark.scss file and of the $theme-light is located in the src/variables/_theme-light.scss file and their default value is Sass variable primary-color.

Read moreCustomize

Variables - Dark theme#

This is a beta feature.

// src/variables/colors/_theme-dark.scss
@use 'control' as *;
@use 'core' as *;
@use 'other' as *;

$theme-dark: (
  // Theme color.
  'theme-color': $primary-color,

  // Core colors.
  'dark-color': #020202,
  'light-color': #e9e9e9,

  'accent-color': $accent-color,

  'primary-color': $primary-color,
  'primary-color-dark': ('primary-color', -3%),
  'primary-color-light': ('primary-color', +3%),

  'secondary-color': ('primary-color', -27.5%),
  'secondary-color-dark': ('secondary-color', -3%),
  'secondary-color-light': ('secondary-color', +3%),

  // Gray colors.
  'gray-color': ('dark-color', +75%),
  'gray-color-dark': ('gray-color', -30%),
  'gray-color-light':('gray-color', +20%),

  // Bg colors.
  'bg-color': ('dark-color', +9%),
  'bg-color-dark': ('bg-color', -3%),
  'bg-color-light': ('bg-color', +3%),

  // Border colors.
  'border-color': ('dark-color', +3%), // Original light 65%
  'border-color-dark': ('border-color', -10%),
  'border-color-light': ('border-color', +8%),

  // Link colors.
  'link-color': 'primary-color',
  'link-color-dark': ('link-color', -10%),
  'link-color-light': ('link-color', +10%),

  // Body colors.
  'body-bg-color': #121212,
  'body-font-color': 'light-color',

  // Control colors.
  'disabled-color': 'bg-color-dark',
  'error-color': $error-color,
  'info-color': $info-color,
  'success-color': $success-color,
  'warning-color': $warning-color,

  // Other colors.
  'code-color': $code-color,
  'highlight-color': $highlight-color,
) !default;

Learn how to customize CSS variables of the dark theme.

Customize

Variables - Light theme#

// src/variables/colors/_theme-light.scss
@use 'control' as *;
@use 'core' as *;
@use 'other' as *;

$theme-light: (
  // Theme color.
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
  'theme-color': $primary-color,

  // Core colors.
  'dark-color': #303742,
  'light-color': #FFFFFF,

  // - Accent color.
  'accent-color': $accent-color,

  // - Primary colors.
  'primary-color': $primary-color,
  'primary-color-dark': ('primary-color', -3%),
  'primary-color-light': ('primary-color', +3%),

  // - Secondary colors.
  'secondary-color': ('primary-color', +37.5%),
  'secondary-color-dark': ('secondary-color', -3%),
  'secondary-color-light': ('secondary-color', +3%),

  // Gray colors.
  'gray-color': ('dark-color', +55%),
  'gray-color-dark': ('gray-color', -30%),
  'gray-color-light':('gray-color', +20%),

  // Bg colors.
  'bg-color': ('dark-color', +75%),
  'bg-color-dark': ('bg-color', -3%),
  'bg-color-light': 'light-color',

  // Border colors.
  'border-color': ('dark-color', +65%),
  'border-color-dark': ('border-color', -10%),
  'border-color-light': ('border-color', +8%),

  // Link colors.
  'link-color': 'primary-color',
  'link-color-dark': ('link-color', -10%),
  'link-color-light': ('link-color', +10%),

  // Body colors.
  'body-bg-color': 'bg-color-light',
  'body-font-color': ('dark-color', +5%),

  // Control colors.
  'disabled-color': 'bg-color-dark',
  'error-color': $error-color,
  'info-color': $info-color,
  'success-color': $success-color,
  'warning-color': $warning-color,

  // Other colors.
  'code-color': $code-color,
  'highlight-color': $highlight-color,
) !default;

Learn how to customize CSS variables of the light theme.

Customize

Variables - Colors#

Variables - Theme color#

Variables - Dark color#

Variables - Light color#

Variables - Accent color#

Variables - Primary#

Variables - Primary dark#

Variables - Primary light#

Variables - Secondary#

Variables - Colors on cards#

Click on the link to see color dependency change.

Theme demonstration

Variables - Sizes#

The default REM (root em) size in Spectre.css is 20px.

Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre.css sets rem default html font size to 20px, which is relatively easy to calculate.

Spectre.css uses 4px as the unit size. Sizes of components are based on the unit size.

Variables - Border#

Variables - Control#

Variables - Control sizes#

Variables - Control padding#

Variables - Control icon sizes#

Variables - Control width#

Variables - Font sizes and line height#

Variables - Font sizes#

Variables - Line height#

Variables - Hero sizes#

// src/_variables.scss
// Hero sizes.
$hero-size: (
  'xs': 1rem, // --#{$var-prefix}-hero-size-xs.
  'sm': 2rem, // --#{$var-prefix}-hero-size-sm.
  'md': 4rem, // --#{$var-prefix}-hero-size-md.
  'lg': 8rem, // --#{$var-prefix}-hero-size-lg.
  'xl': 10rem // --#{$var-prefix}-hero-size-xl.
) !default;

Variables - Layout spacing#

Variables - Parallax#

Variables - Responsive breakpoints#

Variables - Transition duration#

Variables - Units#

Variables - z-index#

• getting-started - Previous
  Installation
• Next - getting-started
  Custom version