Providing that you import the SCSS files into your project in the correct order, you can override any of the default variables below in your own project's SCSS files.
| Variable | Default value | Description |
|---|---|---|
| $root-size | 16px | The base size that $sizing-system and $type-scale are calculated from. You probably don't want to change this. |
| $sizing-system | (SCSS map) | A map of key: value pairs used in the get-size() function - where key is the size reference, and value is the actual CSS size. The map is designed to scale progressively and usually doesn't need modifying. |
| $element-padding | get-size(1.5) | A global padding variable which can be used for consistent inner padding across elements. |
| $element-margin | get-size(1.5) | A global margin variable which can be used for consistent bottom margins across elements. |
| Variable | Default value | Description |
|---|---|---|
| $type-scale | (SCSS map) | A map of key: value pairs used to generate font sizes. These are output as custom CSS properties eg --font-size-2. The map is designed to scale progressively and usually doesn't need modifying. |
| $font-sizes-h1, $font-sizes-h2,$font-sizes-h3,$font-sizes-h4,$font-sizes-h5,$font-sizes-h6, | (SCSS map) | A map of key: value pairs used to size heading elements responsively. The key should be a valid breakpoint from the $breakpoints map; the value should be a font size in the $type-scale map. |
| $root-font-size | var(--font-size-0) | The root font size at the smallest device size. This is output as a custom CSS property --root-font-size; the recommended way to reference within your SCSS files is by calling v(root-font-size). The CSS property is automatically overwritten at each breakpoint defined in the $breakpoints map. |
| $root-line-height | 1.5 | The root line-height at the smallest device size. This is output as a custom CSS property --root-line-height; the recommended way to reference within your SCSS files is by calling v(root-line-height). The CSS property is automatically overwritten at each breakpoint defined in the $breakpoints map. |
| $font-primary | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Primary font stack. This is output as a custom CSS property --font-primary; the recommended way to reference within your SCSS files is by calling v(font-primary) |
| $root-secondary | var(--font-primary) | Secondary font stack. This is output as a custom CSS property --font-secondary; the recommended way to reference within your SCSS files is by calling v(font-secondary) |
| $font-monospace | "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace | Monospace font stack used for code tags. This is output as a custom CSS property --font-monospace; the recommended way to reference within your SCSS files is by calling v(font-monospace) |
| $font-body | var(--font-primary) | The font stack used for body copy. |
| $font-headings | var(--font-secondary) | The font stack used for headings. |
|
$weight-hairline, $weight-thin, $weight-light, $weight-normal, $weight-medium, $weight-semibold, $weight-bold, $weight-xbold, $weight-black |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Helper variables for font weights. You shouldn't usually need to change these. |
| $heading-line-height | 1.2 | Line height for h1-h6 tags. |
| $heading-weight | $weight-medium | Font weight for h1-h6 tags. |
| Variable | Default value | Description |
|---|---|---|
| $colors | (SCSS map) | A map of key: value pairs used to generate theme colors. These are output as custom CSS properties eg --color-primary-500; the recommended way to reference within your SCSS files is by calling the get-color() function. |
| $color-white | #ffffff | Pure white, used for various SCSS functions. Shouldn't be changed. This is output as a custom CSS property --color-white; the recommended way to reference within your SCSS files is by calling v(color-white) |
| $color-black | #000000 | Pure black, used for various SCSS functions. Shouldn't be changed. This is output as a custom CSS property --color-black; the recommended way to reference within your SCSS files is by calling v(color-black) |
| $body-background-color | var(--color-white) | The background color for the body tag. This is output as a custom CSS property --color-background; the recommended way to reference within your SCSS files is by calling v(color-background) |
| $background-colors | (SCSS map) | A map of key: value pairs used to generate background colors. These are output as a custom CSS property --color-background on the corresponding .bg-* modifier class. |
| $color-text | get-color-raw(neutral, 1000) | The default color for body copy. This needs to resolve to a valid CSS color value, hence the use of get-color-raw() This is output as a custom CSS property --color-text; the recommended way to reference within your SCSS files is by calling v(color-text) |
| $color-headings-preferred | get-color-raw(neutral, 700) | The default color for headings. This needs to resolve to a valid CSS color value, hence the use of get-color-raw() This is output as a custom CSS property --color-headings-preferred; the recommended way to reference within your SCSS files is by calling v(color-headings-preferred) |
| Variable | Default value | Description |
|---|---|---|
| $link-color | get-color(primary) | The color for all unvisited links. |
| $link-active | get-color(primary, 700) | The color for all hovered links. |
| $link-visited | get-color(primary, 300) | The color for all visited links. |
| Variable | Default value | Description |
|---|---|---|
| $breakpoints | (SCSS map) | Multi-dimensional map of breakpoint settings. |
| Variable | Default value | Description |
|---|---|---|
| $buttons | .button, a.button, button, [type=submit], [type=reset], [type=button] | List of elements to target with base button styling. Should usually not be edited. |
| $button-border-width | 1px | Button border width |
| $button-border-radius | get-size(0.5) | Button border radius |
| $button-font-family | var(--font-secondary) | Button font family |
| $button-padding-xsmall | 0.5em 0.75em | Button padding when utility class .xsmall is added |
| $button-padding-small | 0.6em 1em | Button padding when utility class xsmall is added |
| $button-padding | 0.75em 1.25em | Default button padding |
| $button-padding-large | 0.75em 1.5em | Button padding when utility class .large is added |
| $button-text-transform | none | Button text transform |
| $button-font-weight | $weight-bold | Button font weight |
| $button-font-size-xsmall | var(--font-size--2) | Button font size when utility class .xsmall is added |
| $button-font-size-small | var(--font-size--1) | Button font size when utility class .small is added |
| $button-font-size | var(--font-size-0) | Default button font size |
| $button-font-size-large | var(--font-size-1) | Button font size when utility class .large is added |
| $button-hover-value | 700 | The shade to use from makeColorPalette() for button hover states. Note: setting this variable to 500 will prevent hover states being created |
| $button-disabled-opacity | 0.65 | The opacity to use for buttons that are disabled |
| $button-list-button-margin | get-size(0.5) | The margins to use around buttons in a .button-list |
| $button-base-color | primary | The base color to use for buttons, must be a valid color from the $colors SCSS map |
| Variable | Default value | Description |
|---|---|---|
| $generate-callouts | true | Whether or not to generate the css for .callout elements. |
| $callout-border-radius | 0px | The border radius for .callout elements. |
| $callout-border-width | 1px 1px 1px get-size(0.5) | The border width for .callout elements. |
| $callout-border-style | solid | The border style for .callout elements. |
| $callout-padding | $element-padding | The padding for .callout elements. |
| Variable | Default value | Description |
|---|---|---|
| $card-border-radius | get-size(0.75) | The border radius for .card elements. |
| $callout-border-width | 1px | The border width for .card elements. |
| $callout-border-style | solid | The border style for .card elements. |
| $callout-border-color | get-color(neutral, 300) | The border color for .card elements. |
| $card-padding | $element-padding | The padding for .card-section elements. |
| Variable | Default value | Description |
|---|---|---|
| $modal-backdrop-color | #000 | The colour for the backdrop (overlay) of .modal elements. |
| $modal-backdrop-opacity | 0.9 | The opacity for the backdrop (overlay) of .modal elements. |
| $modal-max-width | 900px | The maximum width for .modal elements. |
| $modal-border | none | The border style for .modal elements. |
| $modal-border-radius | get-size(0.5) | The border-radius style for .modal elements. |
| $modal-outer-margin | get-size(4) | The outer margin around .modal elements. |
| $modal-padding | get-size(1.5) | The inner padding for .modal elements. |
| $modal-close-icon-svg | get-size(0.5) | The border-radius style for .modal elements. |
| $modal-close-icon-svg | data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10.3,10.3l19.3,19.3 M10.3,29.7l19.3-19.3' stroke='currentColor' stroke-width='6' stroke-linecap='square' /%3E%3C/svg%3E | An SVG for use as the .modal arrow icon. |
| $modal-arrow-icon-svg | data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M15.5,4.9L30.6,20 M15.5,35.1L30.6,20' stroke='currentColor' stroke-width='6' stroke-linecap='square' /%3E%3C/svg%3E | An SVG for use as the .modal prev/next arrows. |
| Variable | Default value | Description |
|---|---|---|
| $generate-chips | true | Whether or not to generate the css for .chip elements. |
| $chip-padding | 0.25em 0.3em | The padding for .chip elements. |
| $chip-border-radius | get-size(0.25) | The border radius for .chip elements. |
| $chip-border-width | 1px | The border width for .chip elements. |
| $chip-border-style | solid | The border style for .chip elements. |
| $chip-font-weight | $weight-normal | The font weight for .chip elements. |
| $chip-font-size | var(--font-size--1) | The font size for .chip elements. |
Coming Soon!
| Variable | Default value | Description |
|---|---|---|
| $cols | 12 | How many columns to use in your grid. You can change this if you want, but you probably want to keep it at 12. |
| $grid-has-order | true | Whether or not to generate .order-* modifier classes |
| $grid-has-offset | true | Whether or not to generate .offset-* modifier classes |
| $debug-mode-on | false | Enable debug mode |
| $base-col-name | xs | The base name for $breakpoint-style modifiers at the smallest screen widths. |
| $base-container-gutter | get-size(1.5) | The base gutter around the .container element, used on the smallest screen widths. |
| $base-col-gutter | get-size(1) | The base gutter around .col elements, used on the smallest screen widths. The CSS property --grid-gutter is automatically overwritten at each breakpoint defined in the $breakpoints map. |
Coming Soon!
| Variable | Default value | Description |
|---|---|---|
| $generate-progressbar | true | Whether or not to generate the css modifiers for progress elements. |
| $progressbar-height | get-size(1) | The height property for progress elements. |
| $progressbar-border-radius | get-size(0.5) | The border-radius for progress elements. |
| $progressbar-value-border-radius | 0px | The border-radius for the actual value in progress elements. |
| $progressbar-indeterminate-duration | 5s | The speed for progress element indeterminate states. |
| Variable | Default value | Description |
|---|---|---|
| $table-border-color | get-color(neutral, 300) | The color of table borders. |
| $table-stripe-color | get-color(neutral, 25) | The color to use for alternate rows when a table has a modifier class of .is-striped. |
| $table-hover-background | get-color(neutral, 50) | The color to use for hovered rows when a table has a modifier class of .is-hoverable. |
| $table-hover-color | var(--color-text) | The color to use for text in a hovered row when a table has a modifier class of .is-hoverable. |
| $table-cell-padding | 0.5em 0.8em | The padding to use within th and td elements. |
| $table-responsive-breakpoint | 900px | The screen width at which a table collapses to a responsive table, when the modifier class of .is-responsive is applied. |
| Variable | Default value | Description |
|---|---|---|
| $global-transition | 0.2s ease | The global transition used in the smooth() function |
| Variable | Default value | Description |
|---|---|---|
| $accessibility-focus-color | rgb(0, 140, 255) | The color used for the outline when an element receives keyboard-focus. |
| $accessibility-focus-outline-width | 3px | The width used for the outline when an element receives keyboard-focus. |
| $accessibility-focus-outline-offset | 2px | The offset used for the outline when an element receives keyboard-focus. |
| $force-color-contrast-ratio | true | Whether to force color to black when using choose-contrast-color() if the $color-text does not have sufficient contrast. |
| $accessibility-button-font-weight | $weight-bold | The font weight to use for font size control buttons |
| $accessibility-button-color | get-color(neutral, 500) | The color to use for font size control buttons |
| $accessibility-button-hover-color | $link-active | The color to use for font size control buttons when they are hovered |
| $accessibility-button-active-color | inherit | The color to use for font size control buttons when they are active |
| $accessibility-button-border-bottom | 2px | The border-width to use to denote the active setting when using font size control buttons |
| $accessibility-button-hover-border-color | get-color(secondary) | The border-color to use to denote the hovered setting when using font size control buttons |
| $accessibility-button-active-border-color | inherit | The border-color to use to denote the active setting when using font size control buttons |