mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-12 16:06:10 +00:00
Merge pull request #17262 from overleaf/td-bs5-simplify-colors
Bootstrap 5: remove colour RGB triples and update greens and a blue to match Figma GitOrigin-RevId: 1e0b2a0a09ea00401ddde54d3af943ce1982e497
This commit is contained in:
Tim Down
Copybot
parent
58292f71eb
commit
63efd61011
1 changed files with 204 additions and 447 deletions
|
|
@ -1,500 +1,257 @@
|
|||
// This file provides CSS and Sass variables for colors as both RGB triples,
|
||||
// which can be combined with an alpha value, and actual color values.
|
||||
// This file provides CSS and Sass variables for colors as full color values.
|
||||
// To combine one of these colors with an alpha value, use Sass's built-in
|
||||
// rgba() function.
|
||||
|
||||
// Note that colors used by Bootstrap's Sass are used in calculations and
|
||||
// therefore cannot contain CSS variables
|
||||
|
||||
/* ====== RGB triples, for use with alpha values ====== */
|
||||
/* ====== Sass color variables ====== */
|
||||
|
||||
/* Neutral */
|
||||
$white-rgb: 255 255 255;
|
||||
$neutral-10-rgb: 244 245 246;
|
||||
$neutral-20-rgb: 231 233 238;
|
||||
$neutral-30-rgb: 208 213 221;
|
||||
$neutral-40-rgb: 175 181 192;
|
||||
$neutral-50-rgb: 141 150 165;
|
||||
$neutral-60-rgb: 103 114 131;
|
||||
$neutral-70-rgb: 73 83 101;
|
||||
$neutral-80-rgb: 47 58 76;
|
||||
$neutral-90-rgb: 27 34 44;
|
||||
$white: #ffffff;
|
||||
$neutral-10: #f4f5f6;
|
||||
$neutral-20: #e7e9ee;
|
||||
$neutral-30: #d0d5dd;
|
||||
$neutral-40: #afb5c0;
|
||||
$neutral-50: #8d96a5;
|
||||
$neutral-60: #677283;
|
||||
$neutral-70: #495365;
|
||||
$neutral-80: #2f3a4c;
|
||||
$neutral-90: #1b222c;
|
||||
|
||||
/* Green */
|
||||
$green-10-rgb: 235 246 234;
|
||||
$green-20-rgb: 187 219 184;
|
||||
$green-30-rgb: 140 202 134;
|
||||
$green-40-rgb: 91 181 83;
|
||||
$green-50-rgb: 19 138 7;
|
||||
$green-60-rgb: 36 107 30;
|
||||
$green-70-rgb: 31 89 25;
|
||||
$green-10: #eaf6ef;
|
||||
$green-20: #b8dbc8;
|
||||
$green-30: #86caa5;
|
||||
$green-40: #53b57f;
|
||||
$green-50: #138a07;
|
||||
$green-60: #1e6b41;
|
||||
$green-70: #195936;
|
||||
|
||||
/* Blue */
|
||||
$blue-10-rgb: 241 244 249;
|
||||
$blue-20-rgb: 195 208 227;
|
||||
$blue-30-rgb: 151 182 229;
|
||||
$blue-40-rgb: 101 151 224;
|
||||
$blue-50-rgb: 50 101 178;
|
||||
$blue-60-rgb: 40 81 143;
|
||||
$blue-70-rgb: 33 68 117;
|
||||
$blue-10: #f1f4f9;
|
||||
$blue-20: #c3d0e3;
|
||||
$blue-30: #97b6e5;
|
||||
$blue-40: #6597e0;
|
||||
$blue-50: #366cbf;
|
||||
$blue-60: #28518f;
|
||||
$blue-70: #214475;
|
||||
|
||||
/* Red */
|
||||
$red-10-rgb: 249 241 241;
|
||||
$red-20-rgb: 245 190 186;
|
||||
$red-30-rgb: 229 157 154;
|
||||
$red-40-rgb: 227 109 102;
|
||||
$red-50-rgb: 184 58 51;
|
||||
$red-60-rgb: 148 47 42;
|
||||
$red-70-rgb: 120 39 34;
|
||||
$red-10: #f9f1f1;
|
||||
$red-20: #f5beba;
|
||||
$red-30: #e59d9a;
|
||||
$red-40: #e36d66;
|
||||
$red-50: #b83a33;
|
||||
$red-60: #942f2a;
|
||||
$red-70: #782722;
|
||||
|
||||
/* Yellow */
|
||||
$yellow-10-rgb: 252 241 227;
|
||||
$yellow-20-rgb: 252 196 131;
|
||||
$yellow-30-rgb: 247 164 69;
|
||||
$yellow-40-rgb: 222 128 20;
|
||||
$yellow-50-rgb: 143 85 20;
|
||||
$yellow-60-rgb: 122 67 4;
|
||||
$yellow-70-rgb: 99 58 11;
|
||||
$yellow-10: #fcf1e3;
|
||||
$yellow-20: #fcc483;
|
||||
$yellow-30: #f7a445;
|
||||
$yellow-40: #de8014;
|
||||
$yellow-50: #8f5514;
|
||||
$yellow-60: #7a4304;
|
||||
$yellow-70: #633a0b;
|
||||
|
||||
/* ====== Full RGB color values ====== */
|
||||
/* ====== Semantic Sass color variables ====== */
|
||||
$bg-light-primary: $white;
|
||||
$bg-light-secondary: $neutral-10;
|
||||
$bg-light-tertiary: $neutral-20;
|
||||
$bg-light-disabled: $neutral-20;
|
||||
|
||||
/* Neutral */
|
||||
$white: rgb($white-rgb);
|
||||
$neutral-10: rgb($neutral-10-rgb);
|
||||
$neutral-20: rgb($neutral-20-rgb);
|
||||
$neutral-30: rgb($neutral-30-rgb);
|
||||
$neutral-40: rgb($neutral-40-rgb);
|
||||
$neutral-50: rgb($neutral-50-rgb);
|
||||
$neutral-60: rgb($neutral-60-rgb);
|
||||
$neutral-70: rgb($neutral-70-rgb);
|
||||
$neutral-80: rgb($neutral-80-rgb);
|
||||
$neutral-90: rgb($neutral-90-rgb);
|
||||
$bg-dark-primary: $neutral-90;
|
||||
$bg-dark-secondary: $neutral-80;
|
||||
$bg-dark-tertiary: $neutral-70;
|
||||
$bg-dark-disabled: $neutral-70;
|
||||
|
||||
/* Green */
|
||||
$green-10: rgb($green-10-rgb);
|
||||
$green-20: rgb($green-20-rgb);
|
||||
$green-30: rgb($green-30-rgb);
|
||||
$green-40: rgb($green-40-rgb);
|
||||
$green-50: rgb($green-50-rgb);
|
||||
$green-60: rgb($green-60-rgb);
|
||||
$green-70: rgb($green-70-rgb);
|
||||
$bg-accent-01: $green-50;
|
||||
$bg-accent-02: $green-60;
|
||||
$bg-accent-03: $green-10;
|
||||
|
||||
/* Blue */
|
||||
$blue-10: rgb($blue-10-rgb);
|
||||
$blue-20: rgb($blue-20-rgb);
|
||||
$blue-30: rgb($blue-30-rgb);
|
||||
$blue-40: rgb($blue-40-rgb);
|
||||
$blue-50: rgb($blue-50-rgb);
|
||||
$blue-60: rgb($blue-60-rgb);
|
||||
$blue-70: rgb($blue-70-rgb);
|
||||
$bg-danger-01: $red-50;
|
||||
$bg-danger-02: $red-60;
|
||||
$bg-danger-03: $red-10;
|
||||
|
||||
/* Red */
|
||||
$red-10: rgb($red-10-rgb);
|
||||
$red-20: rgb($red-20-rgb);
|
||||
$red-30: rgb($red-30-rgb);
|
||||
$red-40: rgb($red-40-rgb);
|
||||
$red-50: rgb($red-50-rgb);
|
||||
$red-60: rgb($red-60-rgb);
|
||||
$red-70: rgb($red-70-rgb);
|
||||
$bg-warning-01: $yellow-50;
|
||||
$bg-warning-02: $yellow-60;
|
||||
$bg-warning-03: $yellow-10;
|
||||
|
||||
/* Yellow */
|
||||
$yellow-10: rgb($yellow-10-rgb);
|
||||
$yellow-20: rgb($yellow-20-rgb);
|
||||
$yellow-30: rgb($yellow-30-rgb);
|
||||
$yellow-40: rgb($yellow-40-rgb);
|
||||
$yellow-50: rgb($yellow-50-rgb);
|
||||
$yellow-60: rgb($yellow-60-rgb);
|
||||
$yellow-70: rgb($yellow-70-rgb);
|
||||
$bg-info-01: $blue-50;
|
||||
$bg-info-02: $blue-60;
|
||||
$bg-info-03: $blue-10;
|
||||
|
||||
/* ====== RGB triples for semantic color variables, for use with alpha values ====== */
|
||||
$bg-light-primary-rgb: $white-rgb;
|
||||
$bg-light-secondary-rgb: $neutral-10-rgb;
|
||||
$bg-light-tertiary-rgb: $neutral-20-rgb;
|
||||
$bg-light-disabled-rgb: $neutral-20-rgb;
|
||||
$content-primary: $neutral-90;
|
||||
$content-secondary: $neutral-70;
|
||||
$content-disabled: $neutral-40;
|
||||
$content-placeholder: $neutral-60;
|
||||
$content-danger: $red-50;
|
||||
$content-warning: $yellow-50;
|
||||
$content-positive: $green-50;
|
||||
|
||||
$bg-dark-primary-rgb: $neutral-90-rgb;
|
||||
$bg-dark-secondary-rgb: $neutral-80-rgb;
|
||||
$bg-dark-tertiary-rgb: $neutral-70-rgb;
|
||||
$bg-dark-disabled-rgb: $neutral-70-rgb;
|
||||
$border-primary: $neutral-60;
|
||||
$border-hover: $neutral-70;
|
||||
$border-disabled: $neutral-20;
|
||||
$border-active: $blue-50;
|
||||
$border-danger: $red-50;
|
||||
$border-divider: $neutral-20;
|
||||
|
||||
$bg-accent-01-rgb: $green-50-rgb;
|
||||
$bg-accent-02-rgb: $green-60-rgb;
|
||||
$bg-accent-03-rgb: $green-10-rgb;
|
||||
$link-web: $green-60;
|
||||
$link-web-hover: $green-70;
|
||||
$link-web-visited: $green-70;
|
||||
$link-ui: $blue-50;
|
||||
$link-ui-hover: $blue-60;
|
||||
$link-ui-visited: $blue-60;
|
||||
|
||||
$bg-danger-01-rgb: $red-50-rgb;
|
||||
$bg-danger-02-rgb: $red-60-rgb;
|
||||
$bg-danger-03-rgb: $red-10-rgb;
|
||||
$content-primary-dark: $white;
|
||||
$content-secondary-dark: $neutral-20;
|
||||
$content-disabled-dark: $neutral-60;
|
||||
$content-placeholder-dark: $neutral-50;
|
||||
$content-danger-dark: $red-40;
|
||||
$content-warning-dark: $yellow-40;
|
||||
$content-positive-dark: $green-40;
|
||||
|
||||
$bg-warning-01-rgb: $yellow-50-rgb;
|
||||
$bg-warning-02-rgb: $yellow-60-rgb;
|
||||
$bg-warning-03-rgb: $yellow-10-rgb;
|
||||
$border-primary-dark: $neutral-30;
|
||||
$border-hover-dark: $neutral-20;
|
||||
$border-disabled-dark: $neutral-80;
|
||||
$border-active-dark: $blue-30;
|
||||
$border-danger-dark: $red-40;
|
||||
$border-divider-dark: $neutral-80;
|
||||
|
||||
$bg-info-01-rgb: $blue-50-rgb;
|
||||
$bg-info-02-rgb: $blue-60-rgb;
|
||||
$bg-info-03-rgb: $blue-10-rgb;
|
||||
|
||||
$content-primary-rgb: $neutral-90-rgb;
|
||||
$content-secondary-rgb: $neutral-70-rgb;
|
||||
$content-disabled-rgb: $neutral-40-rgb;
|
||||
$content-placeholder-rgb: $neutral-60-rgb;
|
||||
$content-danger-rgb: $red-50-rgb;
|
||||
$content-warning-rgb: $yellow-50-rgb;
|
||||
$content-positive-rgb: $green-50-rgb;
|
||||
|
||||
$border-primary-rgb: $neutral-60-rgb;
|
||||
$border-hover-rgb: $neutral-70-rgb;
|
||||
$border-disabled-rgb: $neutral-20-rgb;
|
||||
$border-active-rgb: $blue-50-rgb;
|
||||
$border-danger-rgb: $red-50-rgb;
|
||||
$border-divider-rgb: $neutral-20-rgb;
|
||||
|
||||
$link-web-rgb: $green-60-rgb;
|
||||
$link-web-hover-rgb: $green-70-rgb;
|
||||
$link-web-visited-rgb: $green-70-rgb;
|
||||
$link-ui-rgb: $blue-50-rgb;
|
||||
$link-ui-hover-rgb: $blue-60-rgb;
|
||||
$link-ui-visited-rgb: $blue-60-rgb;
|
||||
|
||||
$content-primary-dark-rgb: $white-rgb;
|
||||
$content-secondary-dark-rgb: $neutral-20-rgb;
|
||||
$content-disabled-dark-rgb: $neutral-60-rgb;
|
||||
$content-placeholder-dark-rgb: $neutral-50-rgb;
|
||||
$content-danger-dark-rgb: $red-40-rgb;
|
||||
$content-warning-dark-rgb: $yellow-40-rgb;
|
||||
$content-positive-dark-rgb: $green-40-rgb;
|
||||
|
||||
$border-primary-dark-rgb: $neutral-30-rgb;
|
||||
$border-hover-dark-rgb: $neutral-20-rgb;
|
||||
$border-disabled-dark-rgb: $neutral-80-rgb;
|
||||
$border-active-dark-rgb: $blue-30-rgb;
|
||||
$border-danger-dark-rgb: $red-40-rgb;
|
||||
$border-divider-dark-rgb: $neutral-80-rgb;
|
||||
|
||||
$link-web-dark-rgb: $green-30-rgb;
|
||||
$link-web-hover-dark-rgb: $green-40-rgb;
|
||||
$link-web-visited-dark-rgb: $green-40-rgb;
|
||||
$link-ui-dark-rgb: $blue-30-rgb;
|
||||
$link-ui-hover-dark-rgb: $blue-40-rgb;
|
||||
$link-ui-visited-dark-rgb: $blue-40-rgb;
|
||||
|
||||
/* ====== Full RGB color values for semantic color variables ====== */
|
||||
$bg-light-primary: rgb($bg-light-primary-rgb);
|
||||
$bg-light-secondary: rgb($bg-light-secondary-rgb);
|
||||
$bg-light-tertiary: rgb($bg-light-tertiary-rgb);
|
||||
$bg-light-disabled: rgb($bg-light-disabled-rgb);
|
||||
|
||||
$bg-dark-primary: rgb($bg-dark-primary-rgb);
|
||||
$bg-dark-secondary: rgb($bg-dark-secondary-rgb);
|
||||
$bg-dark-tertiary: rgb($bg-dark-tertiary-rgb);
|
||||
$bg-dark-disabled: rgb($bg-dark-disabled-rgb);
|
||||
|
||||
$bg-accent-01: rgb($bg-accent-01-rgb);
|
||||
$bg-accent-02: rgb($bg-accent-02-rgb);
|
||||
$bg-accent-03: rgb($bg-accent-03-rgb);
|
||||
|
||||
$bg-danger-01: rgb($bg-danger-01-rgb);
|
||||
$bg-danger-02: rgb($bg-danger-02-rgb);
|
||||
$bg-danger-03: rgb($bg-danger-03-rgb);
|
||||
|
||||
$bg-warning-01: rgb($bg-warning-01-rgb);
|
||||
$bg-warning-02: rgb($bg-warning-02-rgb);
|
||||
$bg-warning-03: rgb($bg-warning-03-rgb);
|
||||
|
||||
$bg-info-01: rgb($bg-info-01-rgb);
|
||||
$bg-info-02: rgb($bg-info-02-rgb);
|
||||
$bg-info-03: rgb($bg-info-03-rgb);
|
||||
|
||||
$content-primary: rgb($content-primary-rgb);
|
||||
$content-secondary: rgb($content-secondary-rgb);
|
||||
$content-disabled: rgb($content-disabled-rgb);
|
||||
$content-placeholder: rgb($content-placeholder-rgb);
|
||||
$content-danger: rgb($content-danger-rgb);
|
||||
$content-warning: rgb($content-warning-rgb);
|
||||
$content-positive: rgb($content-positive-rgb);
|
||||
|
||||
$border-primary: rgb($border-primary-rgb);
|
||||
$border-hover: rgb($border-hover-rgb);
|
||||
$border-disabled: rgb($border-disabled-rgb);
|
||||
$border-active: rgb($border-active-rgb);
|
||||
$border-danger: rgb($border-danger-rgb);
|
||||
$border-divider: rgb($border-divider-rgb);
|
||||
|
||||
$link-web: rgb($link-web-rgb);
|
||||
$link-web-hover: rgb($link-web-hover-rgb);
|
||||
$link-web-visited: rgb($link-web-visited-rgb);
|
||||
$link-ui: rgb($link-ui-rgb);
|
||||
$link-ui-hover: rgb($link-ui-hover-rgb);
|
||||
$link-ui-visited: rgb($link-ui-visited-rgb);
|
||||
|
||||
$content-primary-dark: rgb($content-primary-dark-rgb);
|
||||
$content-secondary-dark: rgb($content-secondary-dark-rgb);
|
||||
$content-disabled-dark: rgb($content-disabled-dark-rgb);
|
||||
$content-placeholder-dark: rgb($content-placeholder-dark-rgb);
|
||||
$content-danger-dark: rgb($content-danger-dark-rgb);
|
||||
$content-warning-dark: rgb($content-warning-dark-rgb);
|
||||
$content-positive-dark: rgb($content-positive-dark-rgb);
|
||||
|
||||
$border-primary-dark: rgb($border-primary-dark-rgb);
|
||||
$border-hover-dark: rgb($border-hover-dark-rgb);
|
||||
$border-disabled-dark: rgb($border-disabled-dark-rgb);
|
||||
$border-active-dark: rgb($border-active-dark-rgb);
|
||||
$border-danger-dark: rgb($border-danger-dark-rgb);
|
||||
$border-divider-dark: rgb($border-divider-dark-rgb);
|
||||
|
||||
$link-web-dark: rgb($link-web-dark-rgb);
|
||||
$link-web-hover-dark: rgb($link-web-hover-dark-rgb);
|
||||
$link-web-visited-dark: rgb($link-web-visited-dark-rgb);
|
||||
$link-ui-dark: rgb($link-ui-dark-rgb);
|
||||
$link-ui-hover-dark: rgb($link-ui-hover-dark-rgb);
|
||||
$link-ui-visited-dark: rgb($link-ui-visited-dark-rgb);
|
||||
$link-web-dark: $green-30;
|
||||
$link-web-hover-dark: $green-40;
|
||||
$link-web-visited-dark: $green-40;
|
||||
$link-ui-dark: $blue-30;
|
||||
$link-ui-hover-dark: $blue-40;
|
||||
$link-ui-visited-dark: $blue-40;
|
||||
|
||||
/* ====== CSS color variables ====== */
|
||||
:root {
|
||||
/* ====== RGB triples, for use with alpha values ====== */
|
||||
|
||||
/* Neutral */
|
||||
--white-rgb: #{$white-rgb};
|
||||
--neutral-10-rgb: #{$neutral-10-rgb};
|
||||
--neutral-20-rgb: #{$neutral-20-rgb};
|
||||
--neutral-30-rgb: #{$neutral-30-rgb};
|
||||
--neutral-40-rgb: #{$neutral-40-rgb};
|
||||
--neutral-50-rgb: #{$neutral-50-rgb};
|
||||
--neutral-60-rgb: #{$neutral-60-rgb};
|
||||
--neutral-70-rgb: #{$neutral-70-rgb};
|
||||
--neutral-80-rgb: #{$neutral-80-rgb};
|
||||
--neutral-90-rgb: #{$neutral-90-rgb};
|
||||
--white: #{$white};
|
||||
--neutral-10: #{$neutral-10};
|
||||
--neutral-20: #{$neutral-20};
|
||||
--neutral-30: #{$neutral-30};
|
||||
--neutral-40: #{$neutral-40};
|
||||
--neutral-50: #{$neutral-50};
|
||||
--neutral-60: #{$neutral-60};
|
||||
--neutral-70: #{$neutral-70};
|
||||
--neutral-80: #{$neutral-80};
|
||||
--neutral-90: #{$neutral-90};
|
||||
|
||||
/* Green */
|
||||
--green-10-rgb: #{$green-10-rgb};
|
||||
--green-20-rgb: #{$green-20-rgb};
|
||||
--green-30-rgb: #{$green-30-rgb};
|
||||
--green-40-rgb: #{$green-40-rgb};
|
||||
--green-50-rgb: #{$green-50-rgb};
|
||||
--green-60-rgb: #{$green-60-rgb};
|
||||
--green-70-rgb: #{$green-70-rgb};
|
||||
--green-10: #{$green-10};
|
||||
--green-20: #{$green-20};
|
||||
--green-30: #{$green-30};
|
||||
--green-40: #{$green-40};
|
||||
--green-50: #{$green-50};
|
||||
--green-60: #{$green-60};
|
||||
--green-70: #{$green-70};
|
||||
|
||||
/* Blue */
|
||||
--blue-10-rgb: #{$blue-10-rgb};
|
||||
--blue-20-rgb: #{$blue-20-rgb};
|
||||
--blue-30-rgb: #{$blue-30-rgb};
|
||||
--blue-40-rgb: #{$blue-40-rgb};
|
||||
--blue-50-rgb: #{$blue-50-rgb};
|
||||
--blue-60-rgb: #{$blue-60-rgb};
|
||||
--blue-70-rgb: #{$blue-70-rgb};
|
||||
--blue-10: #{$blue-10};
|
||||
--blue-20: #{$blue-20};
|
||||
--blue-30: #{$blue-30};
|
||||
--blue-40: #{$blue-40};
|
||||
--blue-50: #{$blue-50};
|
||||
--blue-60: #{$blue-60};
|
||||
--blue-70: #{$blue-70};
|
||||
|
||||
/* Red */
|
||||
--red-10-rgb: #{$red-10-rgb};
|
||||
--red-20-rgb: #{$red-20-rgb};
|
||||
--red-30-rgb: #{$red-30-rgb};
|
||||
--red-40-rgb: #{$red-40-rgb};
|
||||
--red-50-rgb: #{$red-50-rgb};
|
||||
--red-60-rgb: #{$red-60-rgb};
|
||||
--red-70-rgb: #{$red-70-rgb};
|
||||
--red-10: #{$red-10};
|
||||
--red-20: #{$red-20};
|
||||
--red-30: #{$red-30};
|
||||
--red-40: #{$red-40};
|
||||
--red-50: #{$red-50};
|
||||
--red-60: #{$red-60};
|
||||
--red-70: #{$red-70};
|
||||
|
||||
/* Yellow */
|
||||
--yellow-10-rgb: #{$yellow-10-rgb};
|
||||
--yellow-20-rgb: #{$yellow-20-rgb};
|
||||
--yellow-30-rgb: #{$yellow-30-rgb};
|
||||
--yellow-40-rgb: #{$yellow-40-rgb};
|
||||
--yellow-50-rgb: #{$yellow-50-rgb};
|
||||
--yellow-60-rgb: #{$yellow-60-rgb};
|
||||
--yellow-70-rgb: #{$yellow-70-rgb};
|
||||
--yellow-10: #{$yellow-10};
|
||||
--yellow-20: #{$yellow-20};
|
||||
--yellow-30: #{$yellow-30};
|
||||
--yellow-40: #{$yellow-40};
|
||||
--yellow-50: #{$yellow-50};
|
||||
--yellow-60: #{$yellow-60};
|
||||
--yellow-70: #{$yellow-70};
|
||||
|
||||
/* ====== Full RGB color values ====== */
|
||||
/* ====== Semantic CSS color variables ====== */
|
||||
--bg-light-primary: var(--white);
|
||||
--bg-light-secondary: var(--neutral-10);
|
||||
--bg-light-tertiary: var(--neutral-20);
|
||||
--bg-light-disabled: var(--neutral-20);
|
||||
|
||||
/* Neutral */
|
||||
--white: rgb(var(--white-rgb));
|
||||
--neutral-10: rgb(var(--neutral-10-rgb));
|
||||
--neutral-20: rgb(var(--neutral-20-rgb));
|
||||
--neutral-30: rgb(var(--neutral-30-rgb));
|
||||
--neutral-40: rgb(var(--neutral-40-rgb));
|
||||
--neutral-50: rgb(var(--neutral-50-rgb));
|
||||
--neutral-60: rgb(var(--neutral-60-rgb));
|
||||
--neutral-70: rgb(var(--neutral-70-rgb));
|
||||
--neutral-80: rgb(var(--neutral-80-rgb));
|
||||
--neutral-90: rgb(var(--neutral-90-rgb));
|
||||
--bg-dark-primary: var(--neutral-90);
|
||||
--bg-dark-secondary: var(--neutral-80);
|
||||
--bg-dark-tertiary: var(--neutral-70);
|
||||
--bg-dark-disabled: var(--neutral-70);
|
||||
|
||||
/* Green */
|
||||
--green-10: rgb(var(--green-10-rgb));
|
||||
--green-20: rgb(var(--green-20-rgb));
|
||||
--green-30: rgb(var(--green-30-rgb));
|
||||
--green-40: rgb(var(--green-40-rgb));
|
||||
--green-50: rgb(var(--green-50-rgb));
|
||||
--green-60: rgb(var(--green-60-rgb));
|
||||
--green-70: rgb(var(--green-70-rgb));
|
||||
--bg-accent-01: var(--green-50);
|
||||
--bg-accent-02: var(--green-60);
|
||||
--bg-accent-03: var(--green-10);
|
||||
|
||||
/* Blue */
|
||||
--blue-10: rgb(var(--blue-10-rgb));
|
||||
--blue-20: rgb(var(--blue-20-rgb));
|
||||
--blue-30: rgb(var(--blue-30-rgb));
|
||||
--blue-40: rgb(var(--blue-40-rgb));
|
||||
--blue-50: rgb(var(--blue-50-rgb));
|
||||
--blue-60: rgb(var(--blue-60-rgb));
|
||||
--blue-70: rgb(var(--blue-70-rgb));
|
||||
--bg-danger-01: var(--red-50);
|
||||
--bg-danger-02: var(--red-60);
|
||||
--bg-danger-03: var(--red-10);
|
||||
|
||||
/* Red */
|
||||
--red-10: rgb(var(--red-10-rgb));
|
||||
--red-20: rgb(var(--red-20-rgb));
|
||||
--red-30: rgb(var(--red-30-rgb));
|
||||
--red-40: rgb(var(--red-40-rgb));
|
||||
--red-50: rgb(var(--red-50-rgb));
|
||||
--red-60: rgb(var(--red-60-rgb));
|
||||
--red-70: rgb(var(--red-70-rgb));
|
||||
--bg-warning-01: var(--yellow-50);
|
||||
--bg-warning-02: var(--yellow-60);
|
||||
--bg-warning-03: var(--yellow-10);
|
||||
|
||||
/* Yellow */
|
||||
--yellow-10: rgb(var(--yellow-10-rgb));
|
||||
--yellow-20: rgb(var(--yellow-20-rgb));
|
||||
--yellow-30: rgb(var(--yellow-30-rgb));
|
||||
--yellow-40: rgb(var(--yellow-40-rgb));
|
||||
--yellow-50: rgb(var(--yellow-50-rgb));
|
||||
--yellow-60: rgb(var(--yellow-60-rgb));
|
||||
--yellow-70: rgb(var(--yellow-70-rgb));
|
||||
--bg-info-01: var(--blue-50);
|
||||
--bg-info-02: var(--blue-60);
|
||||
--bg-info-03: var(--blue-10);
|
||||
|
||||
/* ====== RGB triples for semantic color variables, for use with alpha values ====== */
|
||||
--bg-light-primary-rgb: var(--white-rgb);
|
||||
--bg-light-secondary-rgb: var(--neutral-10-rgb);
|
||||
--bg-light-tertiary-rgb: var(--neutral-20-rgb);
|
||||
--bg-light-disabled-rgb: var(--neutral-20-rgb);
|
||||
--content-primary: var(--neutral-90);
|
||||
--content-secondary: var(--neutral-70);
|
||||
--content-disabled: var(--neutral-40);
|
||||
--content-placeholder: var(--neutral-60);
|
||||
--content-danger: var(--red-50);
|
||||
--content-warning: var(--yellow-50);
|
||||
--content-positive: var(--green-50);
|
||||
|
||||
--bg-dark-primary-rgb: var(--neutral-90-rgb);
|
||||
--bg-dark-secondary-rgb: var(--neutral-80-rgb);
|
||||
--bg-dark-tertiary-rgb: var(--neutral-70-rgb);
|
||||
--bg-dark-disabled-rgb: var(--neutral-70-rgb);
|
||||
--border-primary: var(--neutral-60);
|
||||
--border-hover: var(--neutral-70);
|
||||
--border-disabled: var(--neutral-20);
|
||||
--border-active: var(--blue-50);
|
||||
--border-danger: var(--red-50);
|
||||
--border-divider: var(--neutral-20);
|
||||
|
||||
--bg-accent-01-rgb: var(--green-50-rgb);
|
||||
--bg-accent-02-rgb: var(--green-60-rgb);
|
||||
--bg-accent-03-rgb: var(--green-10-rgb);
|
||||
--link-web: var(--green-60);
|
||||
--link-web-hover: var(--green-70);
|
||||
--link-web-visited: var(--green-70);
|
||||
--link-ui: var(--blue-50);
|
||||
--link-ui-hover: var(--blue-60);
|
||||
--link-ui-visited: var(--blue-60);
|
||||
|
||||
--bg-danger-01-rgb: var(--red-50-rgb);
|
||||
--bg-danger-02-rgb: var(--red-60-rgb);
|
||||
--bg-danger-03-rgb: var(--red-10-rgb);
|
||||
--content-primary-dark: var(--white);
|
||||
--content-secondary-dark: var(--neutral-20);
|
||||
--content-disabled-dark: var(--neutral-60);
|
||||
--content-placeholder-dark: var(--neutral-50);
|
||||
--content-danger-dark: var(--red-40);
|
||||
--content-warning-dark: var(--yellow-40);
|
||||
--content-positive-dark: var(--green-40);
|
||||
|
||||
--bg-warning-01-rgb: var(--yellow-50-rgb);
|
||||
--bg-warning-02-rgb: var(--yellow-60-rgb);
|
||||
--bg-warning-03-rgb: var(--yellow-10-rgb);
|
||||
--border-primary-dark: var(--neutral-30);
|
||||
--border-hover-dark: var(--neutral-20);
|
||||
--border-disabled-dark: var(--neutral-80);
|
||||
--border-active-dark: var(--blue-30);
|
||||
--border-danger-dark: var(--red-40);
|
||||
--border-divider-dark: var(--neutral-80);
|
||||
|
||||
--bg-info-01-rgb: var(--blue-50-rgb);
|
||||
--bg-info-02-rgb: var(--blue-60-rgb);
|
||||
--bg-info-03-rgb: var(--blue-10-rgb);
|
||||
--link-web-dark: var(--green-30);
|
||||
--link-web-hover-dark: var(--green-40);
|
||||
--link-web-visited-dark: var(--green-40);
|
||||
--link-ui-dark: var(--blue-30);
|
||||
--link-ui-hover-dark: var(--blue-40);
|
||||
--link-ui-visited-dark: var(--blue-40);
|
||||
|
||||
--content-primary-rgb: var(--neutral-90-rgb);
|
||||
--content-secondary-rgb: var(--neutral-70-rgb);
|
||||
--content-disabled-rgb: var(--neutral-40-rgb);
|
||||
--content-placeholder-rgb: var(--neutral-60-rgb);
|
||||
--content-danger-rgb: var(--red-50-rgb);
|
||||
--content-warning-rgb: var(--yellow-50-rgb);
|
||||
--content-positive-rgb: var(--green-50-rgb);
|
||||
|
||||
--border-primary-rgb: var(--neutral-60-rgb);
|
||||
--border-hover-rgb: var(--neutral-70-rgb);
|
||||
--border-disabled-rgb: var(--neutral-20-rgb);
|
||||
--border-active-rgb: var(--blue-50-rgb);
|
||||
--border-danger-rgb: var(--red-50-rgb);
|
||||
--border-divider-rgb: var(--neutral-20-rgb);
|
||||
|
||||
--link-web-rgb: var(--green-60-rgb);
|
||||
--link-web-hover-rgb: var(--green-70-rgb);
|
||||
--link-web-visited-rgb: var(--green-70-rgb);
|
||||
--link-ui-rgb: var(--blue-50-rgb);
|
||||
--link-ui-hover-rgb: var(--blue-60-rgb);
|
||||
--link-ui-visited-rgb: var(--blue-60-rgb);
|
||||
|
||||
--content-primary-dark-rgb: var(--white-rgb);
|
||||
--content-secondary-dark-rgb: var(--neutral-20-rgb);
|
||||
--content-disabled-dark-rgb: var(--neutral-60-rgb);
|
||||
--content-placeholder-dark-rgb: var(--neutral-50-rgb);
|
||||
--content-danger-dark-rgb: var(--red-40-rgb);
|
||||
--content-warning-dark-rgb: var(--yellow-40-rgb);
|
||||
--content-positive-dark-rgb: var(--green-40-rgb);
|
||||
|
||||
--border-primary-dark-rgb: var(--neutral-30-rgb);
|
||||
--border-hover-dark-rgb: var(--neutral-20-rgb);
|
||||
--border-disabled-dark-rgb: var(--neutral-80-rgb);
|
||||
--border-active-dark-rgb: var(--blue-30-rgb);
|
||||
--border-danger-dark-rgb: var(--red-40-rgb);
|
||||
--border-divider-dark-rgb: var(--neutral-80-rgb);
|
||||
|
||||
--link-web-dark-rgb: var(--green-30-rgb);
|
||||
--link-web-hover-dark-rgb: var(--green-40-rgb);
|
||||
--link-web-visited-dark-rgb: var(--green-40-rgb);
|
||||
--link-ui-dark-rgb: var(--blue-30-rgb);
|
||||
--link-ui-hover-dark-rgb: var(--blue-40-rgb);
|
||||
--link-ui-visited-dark-rgb: var(--blue-40-rgb);
|
||||
|
||||
|
||||
/* ====== Full RGB color values for semantic color variables ====== */
|
||||
--bg-light-primary: rgb(var(--bg-light-primary-rgb));
|
||||
--bg-light-secondary: rgb(var(--bg-light-secondary-rgb));
|
||||
--bg-light-tertiary: rgb(var(--bg-light-tertiary-rgb));
|
||||
--bg-light-disabled: rgb(var(--bg-light-disabled-rgb));
|
||||
|
||||
--bg-dark-primary: rgb(var(--bg-dark-primary-rgb));
|
||||
--bg-dark-secondary: rgb(var(--bg-dark-secondary-rgb));
|
||||
--bg-dark-tertiary: rgb(var(--bg-dark-tertiary-rgb));
|
||||
--bg-dark-disabled: rgb(var(--bg-dark-disabled-rgb));
|
||||
|
||||
--bg-accent-01: rgb(var(--bg-accent-01-rgb));
|
||||
--bg-accent-02: rgb(var(--bg-accent-02-rgb));
|
||||
--bg-accent-03: rgb(var(--bg-accent-03-rgb));
|
||||
|
||||
--bg-danger-01: rgb(var(--bg-danger-01-rgb));
|
||||
--bg-danger-02: rgb(var(--bg-danger-02-rgb));
|
||||
--bg-danger-03: rgb(var(--bg-danger-03-rgb));
|
||||
|
||||
--bg-warning-01: rgb(var(--bg-warning-01-rgb));
|
||||
--bg-warning-02: rgb(var(--bg-warning-02-rgb));
|
||||
--bg-warning-03: rgb(var(--bg-warning-03-rgb));
|
||||
|
||||
--bg-info-01: rgb(var(--bg-info-01-rgb));
|
||||
--bg-info-02: rgb(var(--bg-info-02-rgb));
|
||||
--bg-info-03: rgb(var(--bg-info-03-rgb));
|
||||
|
||||
--content-primary: rgb(var(--content-primary-rgb));
|
||||
--content-secondary: rgb(var(--content-secondary-rgb));
|
||||
--content-disabled: rgb(var(--content-disabled-rgb));
|
||||
--content-placeholder: rgb(var(--content-placeholder-rgb));
|
||||
--content-danger: rgb(var(--content-danger-rgb));
|
||||
--content-warning: rgb(var(--content-warning-rgb));
|
||||
--content-positive: rgb(var(--content-positive-rgb));
|
||||
|
||||
--border-primary: rgb(var(--border-primary-rgb));
|
||||
--border-hover: rgb(var(--border-hover-rgb));
|
||||
--border-disabled: rgb(var(--border-disabled-rgb));
|
||||
--border-active: rgb(var(--border-active-rgb));
|
||||
--border-danger: rgb(var(--border-danger-rgb));
|
||||
--border-divider: rgb(var(--border-divider-rgb));
|
||||
|
||||
--link-web: rgb(var(--link-web-rgb));
|
||||
--link-web-hover: rgb(var(--link-web-hover-rgb));
|
||||
--link-web-visited: rgb(var(--link-web-visited-rgb));
|
||||
--link-ui: rgb(var(--link-ui-rgb));
|
||||
--link-ui-hover: rgb(var(--link-ui-hover-rgb));
|
||||
--link-ui-visited: rgb(var(--link-ui-visited-rgb));
|
||||
|
||||
--content-primary-dark: rgb(var(--content-primary-dark-rgb));
|
||||
--content-secondary-dark: rgb(var(--content-secondary-dark-rgb));
|
||||
--content-disabled-dark: rgb(var(--content-disabled-dark-rgb));
|
||||
--content-placeholder-dark: rgb(var(--content-placeholder-dark-rgb));
|
||||
--content-danger-dark: rgb(var(--content-danger-dark-rgb));
|
||||
--content-warning-dark: rgb(var(--content-warning-dark-rgb));
|
||||
--content-positive-dark: rgb(var(--content-positive-dark-rgb));
|
||||
|
||||
--border-primary-dark: rgb(var(--border-primary-dark-rgb));
|
||||
--border-hover-dark: rgb(var(--border-hover-dark-rgb));
|
||||
--border-disabled-dark: rgb(var(--border-disabled-dark-rgb));
|
||||
--border-active-dark: rgb(var(--border-active-dark-rgb));
|
||||
--border-danger-dark: rgb(var(--border-danger-dark-rgb));
|
||||
--border-divider-dark: rgb(var(--border-divider-dark-rgb));
|
||||
|
||||
--link-web-dark: rgb(var(--link-web-dark-rgb));
|
||||
--link-web-hover-dark: rgb(var(--link-web-hover-dark-rgb));
|
||||
--link-web-visited-dark: rgb(var(--link-web-visited-dark-rgb));
|
||||
--link-ui-dark: rgb(var(--link-ui-dark-rgb));
|
||||
--link-ui-hover-dark: rgb(var(--link-ui-hover-dark-rgb));
|
||||
--link-ui-visited-dark: rgb(var(--link-ui-visited-dark-rgb));
|
||||
|
||||
// Gradients
|
||||
/* ====== Gradients ====== */
|
||||
--premium-gradient: linear-gradient(
|
||||
246deg,
|
||||
var(--blue-70) 0%,
|
||||
#254c84 29%,
|
||||
var(--blue-40) 97%
|
||||
246deg,
|
||||
var(--blue-70) 0%,
|
||||
#254c84 29%,
|
||||
var(--blue-40) 97%
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue