Design System - Global Variables

Configure the global CSS Variables of the design system to instantly change the look and feel of your application.

All of Inkline’s Global CSS Variables propagate throughout the application and are used for design elements such as spacing, border, colors, and typography.

Basic Example

As seen in the Design System Overview, our CSS Variables will live inside the src/main.scss file.

Here’s an example of how it could look like:

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

:root {
    --padding-top: 1rem;
    --padding-right: 1rem;
    --padding-bottom: 1rem;
    --padding-left: 1rem;
}

CSS Variables

The Global CSS Variables are prefixed with --, live under the :root selector, and provide inter-connected values that affect the overall design of the application.

Here are all the Global CSS Variables that you can configure:

Animation

  • Property
    --transition-duration
    Value300ms
    Description The transition duration part of the design system transition
  • Property
    --transition-easing
    Valueease
    Description The transition duration part of the design system easing

Border

  • Property
    --border-style
    Valuesolid
    Description The border-style part of the design system border
  • Property
    --border-top-width
    Value1px
    Description The border-top-width part of the design system border-width
  • Property
    --border-right-width
    Value1px
    Description The border-right-width part of the design system border-width
  • Property
    --border-bottom-width
    Value1px
    Description The border-bottom-width part of the design system border-width
  • Property
    --border-left-width
    Value1px
    Description The border-left-width part of the design system border-width
  • Property
    --border-width
    Valuevar(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width)
    Description The composed border-width of the design system
  • Property
    --border-color--light
    Valuevar(--color--gray-30)
    Description The light mode border-color of the design system border
  • Property
    --border-color--dark
    Valuevar(--color--gray-70)
    Description The dark mode border-color of the design system border
  • Property
    --border-color
    Valuevar(--border-color--light)
    Description The border-color of the design system border. Changes based on selected color mode.
  • Property
    --border-top-left-radius
    Value0.25rem
    Description The border-top-left-radius of the design system border-radius
  • Property
    --border-top-right-radius
    Value0.25rem
    Description The border-top-right-radius of the design system border-radius
  • Property
    --border-bottom-right-radius
    Value0.25rem
    Description The border-bottom-right-radius of the design system border-radius
  • Property
    --border-bottom-left-radius
    Value0.25rem
    Description The border-bottom-left-radius of the design system border-radius
  • Property
    --border-radius
    Valuevar(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius)
    Description The composed border-radius of the design system

Box Shadow

  • Property
    --box-shadow-offset-x
    Value0
    Description The box-shadow-offset-x part of the design system box-shadow
  • Property
    --box-shadow-offset-y
    Value0.5rem
    Description The box-shadow-offset-y part of the design system box-shadow
  • Property
    --box-shadow-blur-radius
    Value1rem
    Description The box-shadow-blur-radius part of the design system box-shadow
  • Property
    --box-shadow-spread-radius
    Value-0.75rem
    Description The box-shadow-spread-radius part of the design system box-shadow
  • Property
    --box-shadow-color
    Valuergba(0, 0, 0, 0.15)
    Description The box-shadow-color part of the design system box-shadow
  • Property
    --box-shadow-color
    Valuevar(--box-shadow-offset-x) var(--box-shadow-offset-y) var(--box-shadow-blur-radius) var(--box-shadow-spread-radius) var(--box-shadow-color)
    Description The composed box-shadow of the design system

Breakpoints

  • Property
    $breakpoints-xs
    Value0
    Description The starting breakpoint for the extra-small screen size
  • Property
    $breakpoints-sm
    Value576px
    Description The starting breakpoint for the small screen size
  • Property
    $breakpoints-md
    Value768px
    Description The starting breakpoint for the medium screen size
  • Property
    $breakpoints-lg
    Value992px
    Description The starting breakpoint for the large screen size
  • Property
    $breakpoints-xl
    Value1200px
    Description The starting breakpoint for the extra-large screen size
  • Property
    $breakpoints-xxl
    Value1400px
    Description The starting breakpoint for the extra-extra-large screen size
  • Property
    $breakpoints
    Value( 'xs': $breakpoints-xs, 'sm': $breakpoints-sm, 'md': $breakpoints-md, 'lg': $breakpoints-lg, 'xl': $breakpoints-xl, 'xxl': $breakpoints-xxl )
    Description The breakpoints map used for media queries
  • Property
    $breakpoint-keys
    Value('xs', 'sm', 'md', 'lg', 'xl', 'xxl')
    Description The list of breakpoint keys used for media queries
  • Property
    $breakpoint-prefix-keys
    Valuelist.append($breakpoint-keys, '_')
    Description The list of breakpoint keys used for media queries with "_" appended to it. The "_" key is used to skip wrapping the code in a media query.

Colors

  • Property
    circle--color--primary--h
    Value195.0967741935deg
    Description The hue part of the design system primary color
  • Property
    circle--color--primary--s
    Value77.1144278607%
    Description The saturation part of the design system primary color
  • Property
    circle--color--primary--l
    Value39.4117647059%
    Description The lightness part of the design system primary color
  • Property
    circle--color--primary
    Valuehsl(var(--color--primary--h), var(--color--primary--s), var(--color--primary--l))
    Description The computed primary color of the design system
  • Property
    circle--color--secondary--h
    Value262.2857142857deg
    Description The hue part of the design system secondary color
  • Property
    circle--color--secondary--s
    Value30.1724137931%
    Description The saturation part of the design system secondary color
  • Property
    circle--color--secondary--l
    Value54.5098039216%
    Description The lightness part of the design system secondary color
  • Property
    circle--color--secondary
    Valuehsl(var(--color--secondary--h), var(--color--secondary--s), var(--color--secondary--l))
    Description The computed secondary color of the design system
  • Property
    circle--color--info--h
    Value173.8888888889deg
    Description The hue part of the design system info color
  • Property
    circle--color--info--s
    Value42.8571428571%
    Description The saturation part of the design system info color
  • Property
    circle--color--info--l
    Value49.4117647059%
    Description The lightness part of the design system info color
  • Property
    circle--color--info
    Valuehsl(var(--color--info--h), var(--color--info--s), var(--color--info--l))
    Description The computed info color of the design system
  • Property
    circle--color--warning--h
    Value43.6764705882deg
    Description The hue part of the design system warning color
  • Property
    circle--color--warning--s
    Value100%
    Description The saturation part of the design system warning color
  • Property
    circle--color--warning--l
    Value73.3333333333%
    Description The lightness part of the design system warning color
  • Property
    circle--color--warning
    Valuehsl(var(--color--warning--h), var(--color--warning--s), var(--color--warning--l))
    Description The computed warning color of the design system
  • Property
    circle--color--danger--h
    Value1.3259668508deg
    Description The hue part of the design system danger color
  • Property
    circle--color--danger--s
    Value87.4396135266%
    Description The saturation part of the design system danger color
  • Property
    circle--color--danger--l
    Value59.4117647059%
    Description The lightness part of the design system danger color
  • Property
    circle--color--danger
    Valuehsl(var(--color--danger--h), var(--color--danger--s), var(--color--danger--l))
    Description The computed danger color of the design system
  • Property
    circle--color--success--h
    Value154.4186046512deg
    Description The hue part of the design system success color
  • Property
    circle--color--success--s
    Value57.8475336323%
    Description The saturation part of the design system success color
  • Property
    circle--color--success--l
    Value43.7254901961%
    Description The lightness part of the design system success color
  • Property
    circle--color--success
    Valuehsl(var(--color--success--h), var(--color--success--s), var(--color--success--l))
    Description The computed success color of the design system
  • Property
    circle--color--red--h
    Value1.3259668508deg
    Description The hue part of the design system red color
  • Property
    circle--color--red--s
    Value87.4396135266%
    Description The saturation part of the design system red color
  • Property
    circle--color--red--l
    Value59.4117647059%
    Description The lightness part of the design system red color
  • Property
    circle--color--red
    Valuehsl(var(--color--red--h), var(--color--red--s), var(--color--red--l))
    Description The computed red color of the design system
  • Property
    circle--color--orange--h
    Value19.6226415094deg
    Description The hue part of the design system orange color
  • Property
    circle--color--orange--s
    Value92.9824561404%
    Description The saturation part of the design system orange color
  • Property
    circle--color--orange--l
    Value66.4705882353%
    Description The lightness part of the design system orange color
  • Property
    circle--color--orange
    Valuehsl(var(--color--orange--h), var(--color--orange--s), var(--color--orange--l))
    Description The computed orange color of the design system
  • Property
    circle--color--yellow--h
    Value43.6764705882deg
    Description The hue part of the design system yellow color
  • Property
    circle--color--yellow--s
    Value100%
    Description The saturation part of the design system yellow color
  • Property
    circle--color--yellow--l
    Value73.3333333333%
    Description The lightness part of the design system yellow color
  • Property
    circle--color--yellow
    Valuehsl(var(--color--yellow--h), var(--color--yellow--s), var(--color--yellow--l))
    Description The computed yellow color of the design system
  • Property
    circle--color--green--h
    Value154.4186046512deg
    Description The hue part of the design system green color
  • Property
    circle--color--green--s
    Value57.8475336323%
    Description The saturation part of the design system green color
  • Property
    circle--color--green--l
    Value43.7254901961%
    Description The lightness part of the design system green color
  • Property
    circle--color--green
    Valuehsl(var(--color--green--h), var(--color--green--s), var(--color--green--l))
    Description The computed green color of the design system
  • Property
    circle--color--teal--h
    Value173.8888888889deg
    Description The hue part of the design system teal color
  • Property
    circle--color--teal--s
    Value42.8571428571%
    Description The saturation part of the design system teal color
  • Property
    circle--color--teal--l
    Value49.4117647059%
    Description The lightness part of the design system teal color
  • Property
    circle--color--teal
    Valuehsl(var(--color--teal--h), var(--color--teal--s), var(--color--teal--l))
    Description The computed teal color of the design system
  • Property
    circle--color--blue--h
    Value195.0967741935deg
    Description The hue part of the design system blue color
  • Property
    circle--color--blue--s
    Value77.1144278607%
    Description The saturation part of the design system blue color
  • Property
    circle--color--blue--l
    Value39.4117647059%
    Description The lightness part of the design system blue color
  • Property
    circle--color--blue
    Valuehsl(var(--color--blue--h), var(--color--blue--s), var(--color--blue--l))
    Description The computed blue color of the design system
  • Property
    circle--color--purple--h
    Value262.2857142857deg
    Description The hue part of the design system purple color
  • Property
    circle--color--purple--s
    Value30.1724137931%
    Description The saturation part of the design system purple color
  • Property
    circle--color--purple--l
    Value54.5098039216%
    Description The lightness part of the design system purple color
  • Property
    circle--color--purple
    Valuehsl(var(--color--purple--h), var(--color--purple--s), var(--color--purple--l))
    Description The computed purple color of the design system
  • Property
    circle--color--pink--h
    Value351.4285714286deg
    Description The hue part of the design system pink color
  • Property
    circle--color--pink--s
    Value95.6834532374%
    Description The saturation part of the design system pink color
  • Property
    circle--color--pink--l
    Value72.7450980392%
    Description The lightness part of the design system pink color
  • Property
    circle--color--pink
    Valuehsl(var(--color--pink--h), var(--color--pink--s), var(--color--pink--l))
    Description The computed pink color of the design system
  • Property
    circle--color--transparent--h
    Value0deg
    Description The hue part of the design system transparent color
  • Property
    circle--color--transparent--s
    Value0%
    Description The saturation part of the design system transparent color
  • Property
    circle--color--transparent--l
    Value0%
    Description The lightness part of the design system transparent color
  • Property
    circle--color--transparent
    Valuehsl(var(--color--transparent--h), var(--color--transparent--s), var(--color--transparent--l))
    Description The computed transparent color of the design system
  • Property
    circle--color--white--h
    Value0deg
    Description The hue part of the design system white color
  • Property
    circle--color--white--s
    Value0%
    Description The saturation part of the design system white color
  • Property
    circle--color--white--l
    Value100%
    Description The lightness part of the design system white color
  • Property
    circle--color--white
    Valuehsl(var(--color--white--h), var(--color--white--s), var(--color--white--l))
    Description The computed white color of the design system
  • Property
    circle--color--black--h
    Value0deg
    Description The hue part of the design system black color
  • Property
    circle--color--black--s
    Value0%
    Description The saturation part of the design system black color
  • Property
    circle--color--black--l
    Value0%
    Description The lightness part of the design system black color
  • Property
    circle--color--black
    Valuehsl(var(--color--black--h), var(--color--black--s), var(--color--black--l))
    Description The computed black color of the design system
  • Property
    circle--color--gray--h
    Value193.6363636364deg
    Description The hue part of the design system gray color
  • Property
    circle--color--gray--s
    Value10.7843137255%
    Description The saturation part of the design system gray color
  • Property
    circle--color--gray--l
    Value60%
    Description The lightness part of the design system gray color
  • Property
    circle--color--gray
    Valuehsl(var(--color--gray--h), var(--color--gray--s), var(--color--gray--l))
    Description The computed gray color of the design system
  • Property
    circle--color--light--h
    Value193.6363636364deg
    Description The hue part of the design system light color
  • Property
    circle--color--light--s
    Value10.7843137255%
    Description The saturation part of the design system light color
  • Property
    circle--color--light--l
    Value88%
    Description The lightness part of the design system light color
  • Property
    circle--color--light
    Valuehsl(var(--color--light--h), var(--color--light--s), var(--color--light--l))
    Description The computed light color of the design system
  • Property
    circle--color--dark--h
    Value193.6363636364deg
    Description The hue part of the design system dark color
  • Property
    circle--color--dark--s
    Value4.3137254902%
    Description The saturation part of the design system dark color
  • Property
    circle--color--dark--l
    Value24%
    Description The lightness part of the design system dark color
  • Property
    circle--color--dark
    Valuehsl(var(--color--dark--h), var(--color--dark--s), var(--color--dark--l))
    Description The computed dark color of the design system
  • Property
    circle--color--facebook--h
    Value220.6451612903deg
    Description The hue part of the design system facebook color
  • Property
    circle--color--facebook--s
    Value44.0758293839%
    Description The saturation part of the design system facebook color
  • Property
    circle--color--facebook--l
    Value41.3725490196%
    Description The lightness part of the design system facebook color
  • Property
    circle--color--facebook
    Valuehsl(var(--color--facebook--h), var(--color--facebook--s), var(--color--facebook--l))
    Description The computed facebook color of the design system
  • Property
    circle--color--twitter--h
    Value202.8169014085deg
    Description The hue part of the design system twitter color
  • Property
    circle--color--twitter--s
    Value89.1213389121%
    Description The saturation part of the design system twitter color
  • Property
    circle--color--twitter--l
    Value53.137254902%
    Description The lightness part of the design system twitter color
  • Property
    circle--color--twitter
    Valuehsl(var(--color--twitter--h), var(--color--twitter--s), var(--color--twitter--l))
    Description The computed twitter color of the design system
  • Property
    circle--color--google--h
    Value6.5853658537deg
    Description The hue part of the design system google color
  • Property
    circle--color--google--s
    Value70.6896551724%
    Description The saturation part of the design system google color
  • Property
    circle--color--google--l
    Value54.5098039216%
    Description The lightness part of the design system google color
  • Property
    circle--color--google
    Valuehsl(var(--color--google--h), var(--color--google--s), var(--color--google--l))
    Description The computed google color of the design system
  • Property
    circle--color--github--h
    Value0deg
    Description The hue part of the design system github color
  • Property
    circle--color--github--s
    Value0%
    Description The saturation part of the design system github color
  • Property
    circle--color--github--l
    Value20%
    Description The lightness part of the design system github color
  • Property
    circle--color--github
    Valuehsl(var(--color--github--h), var(--color--github--s), var(--color--github--l))
    Description The computed github color of the design system
  • Property
    circle--color--instagram--h
    Value0deg
    Description The hue part of the design system instagram color
  • Property
    circle--color--instagram--s
    Value98.2456140351%
    Description The saturation part of the design system instagram color
  • Property
    circle--color--instagram--l
    Value55.2941176471%
    Description The lightness part of the design system instagram color
  • Property
    circle--color--instagram
    Valuehsl(var(--color--instagram--h), var(--color--instagram--s), var(--color--instagram--l))
    Description The computed instagram color of the design system
  • Property
    circle--color--dribbble--h
    Value336.835443038deg
    Description The hue part of the design system dribbble color
  • Property
    circle--color--dribbble--s
    Value79%
    Description The saturation part of the design system dribbble color
  • Property
    circle--color--dribbble--l
    Value60.7843137255%
    Description The lightness part of the design system dribbble color
  • Property
    circle--color--dribbble
    Valuehsl(var(--color--dribbble--h), var(--color--dribbble--s), var(--color--dribbble--l))
    Description The computed dribbble color of the design system
  • Property
    circle--color--behance--h
    Value218.7931034483deg
    Description The hue part of the design system behance color
  • Property
    circle--color--behance--s
    Value100%
    Description The saturation part of the design system behance color
  • Property
    circle--color--behance--l
    Value54.5098039216%
    Description The lightness part of the design system behance color
  • Property
    circle--color--behance
    Valuehsl(var(--color--behance--h), var(--color--behance--s), var(--color--behance--l))
    Description The computed behance color of the design system
  • Property
    circle--color--flickr--h
    Value328.9411764706deg
    Description The hue part of the design system flickr color
  • Property
    circle--color--flickr--s
    Value100%
    Description The saturation part of the design system flickr color
  • Property
    circle--color--flickr--l
    Value50%
    Description The lightness part of the design system flickr color
  • Property
    circle--color--flickr
    Valuehsl(var(--color--flickr--h), var(--color--flickr--s), var(--color--flickr--l))
    Description The computed flickr color of the design system
  • Property
    circle--color--linkedin--h
    Value200.5524861878deg
    Description The hue part of the design system linkedin color
  • Property
    circle--color--linkedin--s
    Value100%
    Description The saturation part of the design system linkedin color
  • Property
    circle--color--linkedin--l
    Value35.4901960784%
    Description The lightness part of the design system linkedin color
  • Property
    circle--color--linkedin
    Valuehsl(var(--color--linkedin--h), var(--color--linkedin--s), var(--color--linkedin--l))
    Description The computed linkedin color of the design system
  • Property
    circle--color--youtube--h
    Value358.1366459627deg
    Description The hue part of the design system youtube color
  • Property
    circle--color--youtube--s
    Value81.7258883249%
    Description The saturation part of the design system youtube color
  • Property
    circle--color--youtube--l
    Value38.6274509804%
    Description The lightness part of the design system youtube color
  • Property
    circle--color--youtube
    Valuehsl(var(--color--youtube--h), var(--color--youtube--s), var(--color--youtube--l))
    Description The computed youtube color of the design system
  • Property
    circle--color--pinterest--h
    Value353.3701657459deg
    Description The hue part of the design system pinterest color
  • Property
    circle--color--pinterest--s
    Value91.8781725888%
    Description The saturation part of the design system pinterest color
  • Property
    circle--color--pinterest--l
    Value38.6274509804%
    Description The lightness part of the design system pinterest color
  • Property
    circle--color--pinterest
    Valuehsl(var(--color--pinterest--h), var(--color--pinterest--s), var(--color--pinterest--l))
    Description The computed pinterest color of the design system
  • Property
    circle--color--gitlab--h
    Value17.9695431472deg
    Description The hue part of the design system gitlab color
  • Property
    circle--color--gitlab--s
    Value95.1690821256%
    Description The saturation part of the design system gitlab color
  • Property
    circle--color--gitlab--l
    Value59.4117647059%
    Description The lightness part of the design system gitlab color
  • Property
    circle--color--gitlab
    Valuehsl(var(--color--gitlab--h), var(--color--gitlab--s), var(--color--gitlab--l))
    Description The computed gitlab color of the design system
  • Property
    circle--color--tumblr--h
    Value213.8461538462deg
    Description The hue part of the design system tumblr color
  • Property
    circle--color--tumblr--s
    Value26.8965517241%
    Description The saturation part of the design system tumblr color
  • Property
    circle--color--tumblr--l
    Value28.431372549%
    Description The lightness part of the design system tumblr color
  • Property
    circle--color--tumblr
    Valuehsl(var(--color--tumblr--h), var(--color--tumblr--s), var(--color--tumblr--l))
    Description The computed tumblr color of the design system
  • Property
    circle--color--twitch--h
    Value261deg
    Description The hue part of the design system twitch color
  • Property
    circle--color--twitch--s
    Value43.4782608696%
    Description The saturation part of the design system twitch color
  • Property
    circle--color--twitch--l
    Value45.0980392157%
    Description The lightness part of the design system twitch color
  • Property
    circle--color--twitch
    Valuehsl(var(--color--twitch--h), var(--color--twitch--s), var(--color--twitch--l))
    Description The computed twitch color of the design system
  • Property
    circle--color--envato--h
    Value86.3793103448deg
    Description The hue part of the design system envato color
  • Property
    circle--color--envato--s
    Value47.1544715447%
    Description The saturation part of the design system envato color
  • Property
    circle--color--envato--l
    Value48.2352941176%
    Description The lightness part of the design system envato color
  • Property
    circle--color--envato
    Valuehsl(var(--color--envato--h), var(--color--envato--s), var(--color--envato--l))
    Description The computed envato color of the design system
  • Property
    circle--color--vine--h
    Value164.9214659686deg
    Description The hue part of the design system vine color
  • Property
    circle--color--vine--s
    Value100%
    Description The saturation part of the design system vine color
  • Property
    circle--color--vine--l
    Value37.4509803922%
    Description The lightness part of the design system vine color
  • Property
    circle--color--vine
    Valuehsl(var(--color--vine--h), var(--color--vine--s), var(--color--vine--l))
    Description The computed vine color of the design system
  • Property
    circle--contrast-color-for-light-background
    Valuevar(--color--gray-90)
    Description The text color used for light backgrounds of the design system
  • Property
    circle--contrast-color-for-dark-background
    Valuevar(--color--white)
    Description The text color used for dark backgrounds of the design system

Core

  • Property
    --body--background--light
    Valuevar(--color--white)
    Description The body background color for the light color mode
  • Property
    --body--color--light
    Valuevar(--color--gray-80)
    Description The body background color for the light color mode
  • Property
    --body--background--dark
    Valuevar(--color--gray-90)
    Description The body background color for the dark color mode
  • Property
    --body--color--dark
    Valuevar(--color--gray-10)
    Description The body background color for the dark color mode
  • Property
    --body--background
    Valuevar(--body--background--light)
    Description The body background color. Changes based on selected color mode.
  • Property
    --body--color
    Valuevar(--body--color--light)
    Description The body background color. Changes based on selected color mode.

Grid

  • Property
    $columns
    Value12
    Description The number of columns to generate for the grid system

Gutter

  • Property
    --gutter
    Value28px
    Description The base gutter used for calculating the gutter variants for various screen sizes
  • Property
    --gutter--xs
    Valuecalc(var(--gutter) * 0.85)
    Description The column, row, and container gutter for the extra-small screen size
  • Property
    --gutter--sm
    Valuecalc(var(--gutter) * 0.925)
    Description The column, row, and container gutter for the small screen size
  • Property
    --gutter--md
    Valuevar(--gutter)
    Description The column, row, and container gutter for the medium screen size
  • Property
    --gutter--lg
    Valuecalc(var(--gutter) * 1.075)
    Description The column, row, and container gutter for the large screen size
  • Property
    --gutter--xl
    Valuecalc(var(--gutter) * 1.15)
    Description The column, row, and container gutter for the extra-large screen size
  • Property
    --gutter--xxl
    Valuecalc(var(--gutter) * 1.25)
    Description The column, row, and container gutter for the extra-extra-large screen size

Images

  • Property
    --thumbnail--padding
    Valuecalc(var(--spacing) / 2)
    Description The padding of the image thumbnail variant
  • Property
    --thumbnail--background
    Valuevar(--color--white)
    Description The background of the image thumbnail variant
  • Property
    --thumbnail--border-width
    Valuevar(--border-width)
    Description The border-width of the image thumbnail variant
  • Property
    --thumbnail--border-color
    Valuevar(--color--gray-40)
    Description The border-width of the image thumbnail variant
  • Property
    --thumbnail--border-radius
    Valuevar(--border-radius)
    Description The border-radius of the image thumbnail variant
  • Property
    --thumbnail--box-shadow
    Value0 1px 2px rgba(var(--color--black), 0.075)
    Description The box-shadow of the image thumbnail variant
  • Property
    --thumbnail--transition
    Valueall 0.2s ease-in-out
    Description The transition of the image thumbnail variant
  • Property
    --polaroid--padding
    Valuecalc(var(--spacing) * 3)
    Description The padding of the image polaroid variant
  • Property
    --figure--caption--font-size
    Value90%
    Description The font size of the figure caption
  • Property
    --figure--caption--font-size
    Valuevar(--color--gray-60)
    Description The text color of the figure caption
  • Property
    --figure--image--font-size
    Valuecalc(var(--spacing) / 2)
    Description The font size of the figure image

Print

  • Property
    $print
    Valuetrue
    Description Enable or disable print-specific styles

Ratios

  • Property
    --scale-ratio
    Valuevar(--scale-ratio--minor-third)
    Description The primary scale ratio used throughout the design system
  • Property
    --scale-ratio-secondary
    Valuevar(--scale-ratio--perfect-fourth)
    Description The secondary scale ratio used throughout the design system
  • Property
    --scale-ratio--minor-second
    Value1.067
    Description The number usually referred to as the minor second scale ratio
  • Property
    --scale-ratio--major-second
    Value1.125
    Description The number usually referred to as the major second scale ratio
  • Property
    --scale-ratio--minor-third
    Value1.2
    Description The number usually referred to as the minor third scale ratio
  • Property
    --scale-ratio--major-third
    Value1.25
    Description The number usually referred to as the major third scale ratio
  • Property
    --scale-ratio--perfect-fourth
    Value1.333
    Description The number usually referred to as the perfect fourth scale ratio
  • Property
    --scale-ratio--augmented-fourth
    Value1.414
    Description The number usually referred to as the augmented fourth scale ratio
  • Property
    --scale-ratio--perfect-fifth
    Value1.5
    Description The number usually referred to as the perfect fifth scale ratio
  • Property
    --scale-ratio--golden
    Value1.618
    Description The number usually referred to as the golden scale ratio
  • Property
    --scale-ratio--pow-1
    Valuevar(--scale-ratio)
    Description The primary scale ratio raised to the power of 1
  • Property
    --scale-ratio--pow-2
    Valuecalc(var(--scale-ratio--pow-1) * var(--scale-ratio))
    Description The primary scale ratio raised to the power of 2
  • Property
    --scale-ratio--pow-3
    Valuecalc(var(--scale-ratio--pow-2) * var(--scale-ratio))
    Description The primary scale ratio raised to the power of 3
  • Property
    --scale-ratio--pow-4
    Valuecalc(var(--scale-ratio--pow-3) * var(--scale-ratio))
    Description The primary scale ratio raised to the power of 4
  • Property
    --scale-ratio--pow-5
    Valuecalc(var(--scale-ratio--pow-4) * var(--scale-ratio))
    Description The primary scale ratio raised to the power of 5
  • Property
    --scale-ratio--pow-6
    Valuecalc(var(--scale-ratio--pow-5) * var(--scale-ratio))
    Description The primary scale ratio raised to the power of 6

Sizes

  • Property
    --size-percentage--0
    Value0%
    Description The 0 percent value of the size percentage scale
  • Property
    --size-percentage--25
    Value25%
    Description The 25 percent value of the size percentage scale
  • Property
    --size-percentage--50
    Value50%
    Description The 50 percent value of the size percentage scale
  • Property
    --size-percentage--75
    Value75%
    Description The 75 percent value of the size percentage scale
  • Property
    --size-percentage--100
    Value100%
    Description The 100 percent value of the size percentage scale
  • Property
    --size-multiplier
    Value1
    Description The base size multiplier value
  • Property
    --size-multiplier--xs
    Valuecalc(var(--size-multiplier) / var(--scale-ratio--pow-2))
    Description The extra-small size multiplier value
  • Property
    --size-multiplier--sm
    Valuecalc(var(--size-multiplier) / var(--scale-ratio))
    Description The small size multiplier value
  • Property
    --size-multiplier--md
    Valuevar(--size-multiplier)
    Description The medium size multiplier value
  • Property
    --size-multiplier--lg
    Valuecalc(var(--size-multiplier) * var(--scale-ratio))
    Description The large size multiplier value
  • Property
    --size-multiplier--xl
    Valuecalc(var(--size-multiplier) * var(--scale-ratio--pow-2))
    Description The extra-large size multiplier value

Spacing

  • Property
    --spacing
    Value1rem
    Description The base spacing of the design system used for margins and paddings
  • Property
    --margin-top
    Valuevar(--spacing)
    Description The margin-top part of the design system margin
  • Property
    --margin-right
    Valuevar(--spacing)
    Description The margin-right part of the design system margin
  • Property
    --margin-bottom
    Valuevar(--spacing)
    Description The margin-bottom part of the design system margin
  • Property
    --margin-right
    Valuevar(--spacing)
    Description The margin-right part of the design system margin
  • Property
    --margin
    Valuevar(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left)
    Description The composed margin of the design system
  • Property
    --padding-top
    Valuevar(--spacing)
    Description The padding-top part of the design system padding
  • Property
    --padding-right
    Valuevar(--spacing)
    Description The padding-right part of the design system padding
  • Property
    --padding-bottom
    Valuevar(--spacing)
    Description The padding-bottom part of the design system padding
  • Property
    --padding-right
    Valuevar(--spacing)
    Description The padding-right part of the design system padding
  • Property
    --padding
    Valuevar(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left)
    Description The composed padding of the design system

Typography

  • Property
    --font-family-primary--base
    Value-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
    Description The primary base font-family used for body text throughout the application
  • Property
    --font-family-primary--monospace
    Value'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
    Description The primary monospace font-family used for code throughout the application
  • Property
    --font-family-primary--print
    Value'Georgia', 'Times New Roman', 'Times', serif
    Description The primary print font-family used for printing throughout the application
  • Property
    --font-family-secondary--base
    Valuevar(--font-family-primary--base)
    Description The secondary base font-family used for body text throughout the application headings
  • Property
    --font-family-secondary--monospace
    Valuevar(--font-family-primary--monospace)
    Description The secondary monospace font-family used for code throughout the application headings
  • Property
    --font-family-secondary--print
    Valuevar(--font-family-primary--print)
    Description The secondary print font-family used for printing throughout the application headings
  • Property
    --letter-spacing
    Value0
    Description The letter spacing of the application text
  • Property
    --font-size
    Value1rem
    Description The base font size of the application text
  • Property
    --font-size--xs
    Valuecalc(var(--font-size) * var(--size-multiplier--xs))
    Description The extra-small font size variant of the application text
  • Property
    --font-size--sm
    Valuecalc(var(--font-size) * var(--size-multiplier--sm))
    Description The small font size variant of the application text
  • Property
    --font-size--md
    Valuecalc(var(--font-size) * var(--size-multiplier--md))
    Description The medium font size variant of the application text
  • Property
    --font-size--lg
    Valuecalc(var(--font-size) * var(--size-multiplier--lg))
    Description The large font size variant of the application text
  • Property
    --font-size--xl
    Valuecalc(var(--font-size) * var(--size-multiplier--xl))
    Description The extra-large font size variant of the application text
  • Property
    --line-height
    Value1.5
    Description The line-height of the application text
  • Property
    --text-muted
    Valuevar(--color--gray-60)
    Description The muted color of the application text
  • Property
    --font-weight--extralight
    Value200
    Description The extra-light font weight variant of the application text
  • Property
    --font-weight--light
    Value300
    Description The extra-light font weight variant of the application text
  • Property
    --font-weight--normal
    Valuenormal
    Description The normal font weight variant of the application text
  • Property
    --font-weight--semibold
    Value600
    Description The semibold font weight variant of the application text
  • Property
    --font-weight--bold
    Valuebold
    Description The bold font weight variant of the application text
  • Property
    --font-weight--black
    Value900
    Description The black font weight variant of the application text
  • Property
    --font-weight--lighter
    Valuelighter
    Description The lighter font weight variant of the application text
  • Property
    --font-weight--bolder
    Valuebolder
    Description The bolder font weight variant of the application text
  • Property
    --h1--font-size
    Valuecalc(var(--font-size) * var(--scale-ratio--pow-5))
    Description The font size of the application h1 heading
  • Property
    --h2--font-size
    Valuecalc(var(--font-size) * var(--scale-ratio--pow-4))
    Description The font size of the application h2 heading
  • Property
    --h3--font-size
    Valuecalc(var(--font-size) * var(--scale-ratio--pow-3))
    Description The font size of the application h3 heading
  • Property
    --h4--font-size
    Valuecalc(var(--font-size) * var(--scale-ratio--pow-2))
    Description The font size of the application h4 heading
  • Property
    --h5--font-size
    Valuecalc(var(--font-size) * var(--scale-ratio--pow-1))
    Description The font size of the application h5 heading
  • Property
    --h6--font-size
    Valuevar(--font-size)
    Description The font size of the application h6 heading
  • Property
    --heading--margin-top
    Valuecalc(var(--spacing) * 2.5)
    Description The margin-top of the application headings
  • Property
    --heading--margin-bottom
    Valuevar(--spacing)
    Description The margin-bottom of the application headings
  • Property
    --heading--font-family
    Valuevar(--font-family-secondary--base)
    Description The font-family of the application headings
  • Property
    --heading--font-weight
    Valuevar(--font-weight--semibold)
    Description The font-weight of the application headings
  • Property
    --heading--line-height
    Value1.1
    Description The line-height of the application headings
  • Property
    --heading--color
    Valueinherit
    Description The color of the application headings
  • Property
    --d1--font-size
    Valuecalc(var(--h1--font-size) * var(--scale-ratio--pow-6))
    Description The font size of the application d1 display
  • Property
    --d2--font-size
    Valuecalc(var(--h1--font-size) * var(--scale-ratio--pow-5))
    Description The font size of the application d2 display
  • Property
    --d3--font-size
    Valuecalc(var(--h1--font-size) * var(--scale-ratio--pow-4))
    Description The font size of the application d3 display
  • Property
    --d4--font-size
    Valuecalc(var(--h1--font-size) * var(--scale-ratio--pow-3))
    Description The font size of the application d4 display
  • Property
    --d5--font-size
    Valuecalc(var(--h1--font-size) * var(--scale-ratio--pow-2))
    Description The font size of the application d5 display
  • Property
    --d6--font-size
    Valuecalc(var(--h1--font-size) * var(--scale-ratio--pow-1))
    Description The font size of the application d6 display
  • Property
    --display--font-weight
    Valuevar(--font-weight--semibold)
    Description The font-weight of the application displays
  • Property
    --display--line-height
    Value1.1
    Description The line-height of the application displays
  • Property
    --link--color
    Valuevar(--color--primary)
    Description The color of application anchor tags / links
  • Property
    --link--color--hover
    Valuevar(--color--primary-40)
    Description The color of application anchor tags / links when hovered
  • Property
    --link--decoration
    Valuenone
    Description The text decoration of application anchor tags / links
  • Property
    --link--decoration--hover
    Valueunderline
    Description The text decoration of application anchor tags / links when hovered
  • Property
    --lead--font-size
    Valuevar(--font-size--lg)
    Description The font size of application lead text
  • Property
    --lead--font-weight
    Valuevar(--font-weight--light)
    Description The font weight of application lead text
  • Property
    --list--item--padding--inline
    Valuevar(--spacing)
    Description The padding of inline list items
  • Property
    --list--item--margin-bottom
    Valuevar(--spacing)
    Description The margin-bottom of list items
  • Property
    --dt--font-weight
    Valuevar(--font-weight--bold)
    Description The font-weight of description list titles
  • Property
    --small--font-size
    Valuevar(--font-size--sm)
    Description The font-size of small elements
  • Property
    --small--font-weight
    Valuevar(--font-weight--normal)
    Description The font-weight of small elements
  • Property
    --blockquote--footer--color
    Valuevar(--color--gray-60)
    Description The text color of the blockquote footer
  • Property
    --blockquote--font-size
    Valuevar(--font-size--lg)
    Description The font size of the blockquote element
  • Property
    --blockquote--border
    Value3px solid var(--color--gray-30)
    Description The border of the blockquote element
  • Property
    --blockquote--margin
    Valuevar(--spacing)
    Description The margin of the blockquote element
  • Property
    --blockquote--padding--bordered
    Valuevar(--spacing)
    Description The padding of the blockquote element bordered variant
  • Property
    --hr--border-color
    Valuehsla(var(--color--black--h), var(--color--black--s), var(--color--black--l), 0.1)
    Description The border-color of the horizontal rule element
  • Property
    --hr--border-width
    Valuevar(--border-top-width)
    Description The border-width of the horizontal rule element
  • Property
    --hr--border-style
    Valuevar(--border-style)
    Description The border-style of the horizontal rule element
  • Property
    --hr--margin
    Valuevar(--spacing)
    Description The margin of the horizontal rule element
  • Property
    --mark--padding
    Value0.2rem 0.4rem
    Description The color of the mark element
  • Property
    --mark--color
    Valuevar(--color--gray-80)
    Description The color of the mark element
  • Property
    --mark--background-color
    Valuevar(--color--yellow-10)
    Description The background color of the mark element
  • Property
    --code--font-size
    Value90%
    Description The font-size of the code element
  • Property
    --code--padding
    Value0.15rem 0.4rem
    Description The padding of the code element
  • Property
    --code--color
    Value#bd4147
    Description The color of the code element
  • Property
    --code--background
    Valuevar(--color--gray-10)
    Description The background of the code element
  • Property
    --code--color--dark
    Value#ff6d6b
    Description The color of the code element when dark color mode
  • Property
    --code--background--dark
    Valuevar(--color--gray-80)
    Description The background of the code element when dark color mode
  • Property
    --kbd--font-size
    Valuevar(--code--font-size)
    Description The font-size of the kbd element
  • Property
    --kbd--box-shadow
    Valueinset 0 -0.1rem 0 rgba(0, 0, 0, 0.25)
    Description The box-shadow of the kbd element
  • Property
    --kbd--nested-font-weight
    Valuevar(--font-weight--bold)
    Description The font-weight of the kbd element when nested
  • Property
    --kbd--padding
    Valuevar(--code--padding)
    Description The padding of the kbd element
  • Property
    --kbd--color
    Valuevar(--color--white)
    Description The color of the kbd element
  • Property
    --kbd--background
    Valuevar(--color--gray-90)
    Description The background of the kbd element
  • Property
    --pre--font-size
    Valuevar(--code--font-size)
    Description The font-size of the pre element
  • Property
    --pre--color
    Valuevar(--color--gray-90)
    Description The color of the pre element
  • Property
    --pre--background
    Valuevar(--color--white)
    Description The background of the pre element
  • Property
    --pre--scrollable-max-height
    Value340px
    Description The max height of the pre element before it becomes scrollable

Z-Index

  • Property
    --z-index--dropdown
    Value1000
    Description The z-index value for overlaid dropdown elements
  • Property
    --z-index--sticky
    Value1020
    Description The z-index value for overlaid sticky elements
  • Property
    --z-index--fixed
    Value1030
    Description The z-index value for overlaid fixed elements
  • Property
    --z-index--modal-backdrop
    Value1040
    Description The z-index value for modal backdrop elements
  • Property
    --z-index--modal
    Value1050
    Description The z-index value for modal elements
  • Property
    --z-index--popover
    Value1060
    Description The z-index value for popover elements
  • Property
    --z-index--tooltip
    Value1070
    Description The z-index value for tooltip elements