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