CSS Custom Properties
Background Colors
Each background color is a set, one color for the "light mode" and one for the "dark mode".
| Property | Default Value | Description |
|---|---|---|
| --lc_bg | #f9f9f9 | Light Background Color |
| --dc_bg | #333333 | Dark Background Color |
| --lc_bg__overscroll | white | Light Background Overscroll Color |
| --dc_bg__overscroll | black | Dark Background Overscroll Color |
| --lc_bg__alt | #eeeeee | Light Alternate Background Color |
| --dc_bg__alt | #222222 | Dark Alternate Background Color |
Read Only
Use it, but don't modify it.
| Property | Description | Light Theme Value | Dark Theme Value |
|---|---|---|---|
| --c_bg | Background Color | var(--lc_bg) | var(--dc_bg) |
| --c_bg__overscroll | Background Overscroll Color | var(--lc_bg__overscroll) | var(--dc_bg__overscroll) |
| --c_bg__alt | Alternate Background Color | var(--lc_bg__alt) | var(--dc_bg__alt) |
Border Colors
| Property | Default Value | Description |
|---|---|---|
| --lc_border | #cccccc | Light Background Color |
| --dc_border | #777777 | Light Background Color |
Read Only
Use it, but don't modify it.
| Property | Description | Light Theme Value | Dark Theme Value |
|---|---|---|---|
| --c_border | Border Color | var(--lc_border) | var(--dc_border) |
Colors
Each color has a base color and a hover color.
| Property | Default Value | Description |
|---|---|---|
| --c_primary | #3366ff | Primary Color |
| --c_primary__hover | #1144dd | Primary Color Hovered |
| --c_secondary | #9933ff | Secondary Color |
| --c_secondary__hover | #7711dd | Secondary Color Hovered |
| --c_success | #008800 | Success Color |
| --c_success__hover | #006600 | Success Color Hovered |
| --c_warning | #ff6600 | Warning Color |
| --c_warning__hover | #dd4400 | Warning Color Hovered |
| --c_danger | #ff0033 | Danger Color |
| --c_danger__hover | #dd0011 | Danger Color Hovered |
Text Colors
Each text color is a set, one color for the "light mode" and one for the "dark mode".
| Property | Default Value | Description |
|---|---|---|
| --tc_dark | rgba(0, 0, 0, 0.93) | Dark Text Color |
| --tc_light | rgba(255, 255, 255, 0.93) | Light Text Color |
| --ltc_primary | #6699ff | Light Primary Text Color |
| --dtc_primary | var(--c_primary) | Dark Primary Text Color |
| --ltc_secondary | #bb66ff | Light Secondary Text Color |
| --dtc_secondary | var(--c_secondary) | Dark Secondary Text Color |
| --ltc_success | #66bb66 | Light Success Text Color |
| --dtc_success | var(--c_success) | Dark Success Text Color |
| --ltc_warning | #ff9933 | Light Warning Text Color |
| --dtc_warning | var(--c_warning) | Dark Warning Text Color |
| --ltc_danger | #ff5577 | Light Danger Text Color |
| --dtc_danger | var(--c_danger) | Dark Danger Text Color |
| --tc_on_primary | var(--tc_light) | Text Color on Primary Backgrounds |
| --tc_on_secondary | var(--tc_light) | Text Color on Secondary Backgrounds |
| --tc_on_success | var(--tc_light) | Text Color on Success Backgrounds |
| --tc_on_warning | var(--tc_light) | Text Color on Warning Backgrounds |
| --tc_on_danger | var(--tc_light) | Text Color on Danger Backgrounds |
| --tc_link | var(--tc_primary) | Link Text Colors |
| --tc_link__hover | var(--tc_secondary) | Link Text Colors when Hovered |
| --tc_link__inv | var(--tc_primary__inv) | Link Text Colors when on Inverse Backgrounds |
| --tc_link__inv__hover | var(--tc_secondary__inv) | Link Text Colors when on Inverse Backgrounds when Hovered |
Read Only
Use it, but don't modify it.
| Property | Description | Light Theme Value | Dark Theme Value |
|---|---|---|---|
| --tc | Text Color | var(--tc_dark) | var(--tc_light) |
| --tc__inv | Text Color on Inverse Backgrounds | var(--tc_light) | var(--tc_dark) |
| --tc_primary | Primary Text Color | var(--dtc_primary) | var(--ltc_primary) |
| --tc_primary__inv | Primary Text Color | var(--ltc_primary) | var(--dtc_primary) |
| --tc_secondary | Secondary Text Color | var(--dtc_secondary) | var(--ltc_secondary) |
| --tc_secondary__inv | Secondary Text Color | var(--ltc_secondary) | var(--dtc_secondary) |
| --tc_warning | Warning Text Color | var(--dtc_warning) | var(--ltc_warning) |
| --tc_warning__inv | Warning Text Color | var(--ltc_warning) | var(--dtc_warning) |
| --tc_danger | Danger Text Color | var(--dtc_danger) | var(--ltc_danger) |
| --tc_danger__inv | Danger Text Color | var(--dtc_danger) | var(--ltc_danger) |
Fonts
| Property | Default Value | Description |
|---|---|---|
| --ff_body | "Helvetica Neue", Helvetica, Arial, sans-serif | Body Font Family |
| --ff_heading | "Helvetica Neue", Helvetica, Arial, sans-serif | Body Font Family |
| --ff_mono | Consolas, monaco, monospace | Monospace (code) Font Family |
| --fs_base | 16px | Base Font Size |
| --fs_h6 | var(--fs_base) | Heading 6 Font Size |
| --fs_h5 | calc(1.25 * var(--fs_base)) | Heading 5 Font Size |
| --fs_h4 | calc(1.5 * var(--fs_base)) | Heading 4 Font Size |
| --fs_h3 | calc(1.75 * var(--fs_base)) | Heading 3 Font Size |
| --fs_h2 | calc(2 * var(--fs_base)) | Heading 2 Font Size |
| --fs_h1 | calc(2.4 * var(--fs_base)) | Heading 1 Font Size |
| --fw_base | 400 | Base Font Weight |
| --fw_bold | 700 | Bold Font Weight |
Buttons
| Property | Default Value | Description |
|---|---|---|
| --l_btn_bg | #f0f0f0 | Light Mode Button Background Color |
| --l_btn_bg__hover | #e9e9e9 | Light Mode Button Background Color when Hovered |
| --l_btn_tc | var(--tc_dark) | Light Mode Button Text Color |
| --d_btn_bg | #aaaaaa | Dark Mode Button Background Color |
| --d_btn_bg__hover | #bbbbbb | Dark Mode Button Background Color when Hovered |
| --d_btn_tc | var(--tc_dark) | Dark Mode Button Text Color |
| --l_btn_transparent__hover | rgba(0, 0, 0, 0.05) | The background color of transparent buttons when hovered in light mode |
| --d_btn_transparent__hover | rgba(255, 255, 255, 0.05) | The background color of transparent buttons when hovered in dark mode |
Read Only
Use it, but don't modify it.
| Property | Description | Light Theme Value | Dark Theme Value |
|---|---|---|---|
| --btn_bg | Button Background Color | var(--l_btn_bg) | var(--d_btn_bg) |
| --btn_bg__hover | Button Background Color when Hovered | var(--l_btn_bg__hover) | var(--d_btn_bg__hover) |
| --btn_tc | Button Text Color | var(--l_btn_tc) | var(--d_btn_tc) |
| --btn_transparent__hover | The background color of transparent buttons when hovered | var(--l_btn_transparent__hover) | var(--d_btn_transparent__hover) |
Misc.
| Property | Default Value | Description |
|---|---|---|
| --container_width | 80rem | Container Max Width |
| --animation_ms | 256ms | Miliseconds that animations should last |
| --radius | 0.25rem | The border radius used across the site (buttons, inputs, cards, ect.) |
| --spacer | 1rem | The standard size of the space between elements (when space is needed) |
| --focus_Shadow | 0 0 2px 2px var(--c_primary) | The box-shadow give around an element when focused |
| --focus_shadow_on_primary | 0 0 2px 2px var(--tc_on_primary) | The box-shadow give around an element when focused and on a primary background |
| --line-height | 1.35em | The standard line height |
| --drop_shadow | 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25) | The box-shadow used to indicate elevation |
Read Only
Use it, but don't modify it.
| Property | Description | Calculated Value |
|---|---|---|
| --spacer_h | Half of the spacer value | calc(0.5 * var(--spacer)) |
| --spacer_q | A quarter of the spacer value | calc(0.25 * var(--spacer)) |