From ab8cd686a755c425ec6fa069367e817e4e201081 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 26 Aug 2021 11:39:05 -0400 Subject: [PATCH] Convert hex, rgb(a) color values to hsl(a) (#716) * Convert hex, rgb(a) color values to hls(a) * Missed a couple of floats * Tweak color values to match existing colors * Tweak orange-800 * Tweak blue-600 lightness * Convert syntax highlighting colors to hsl * Apply even steps to black color scale * Convert all dark colors to hsl Co-authored-by: Aaron Shekey --- docs/assets/less/stacks-documentation.less | 4 +- lib/css/components/_stacks-buttons.less | 8 +- lib/css/components/_stacks-popovers.less | 8 +- lib/css/components/_stacks-prose.less | 4 +- lib/css/exports/_stacks-constants-colors.less | 417 +++++++++--------- 5 files changed, 229 insertions(+), 212 deletions(-) diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less index 5c0d369d2e..b4c146763b 100644 --- a/docs/assets/less/stacks-documentation.less +++ b/docs/assets/less/stacks-documentation.less @@ -54,7 +54,7 @@ #stacks-internals #screen-md({ .stacks-navigation-shadow { - box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.02), 7px 0 6px 0 rgba(0, 0, 0, 0.03), 13px 0 11px 0 rgba(0, 0, 0, 0.04), 22px 0 20px 0 rgba(0, 0, 0, 0.04), 42px 0 37px 0 rgba(0, 0, 0, 0.05); + box-shadow: 3px 0 3px 0 hsla(0, 0, 0, 0.02), 7px 0 6px 0 hsla(0, 0, 0, 0.03), 13px 0 11px 0 hsla(0, 0, 0, 0.04), 22px 0 20px 0 hsla(0, 0, 0, 0.04), 42px 0 37px 0 hsla(0, 0, 0, 0.05); } }, @force-selector: true); @@ -338,7 +338,7 @@ .algolia-docsearch-suggestion--text { .algolia-docsearch-suggestion--highlight { - box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179, 0.8); + box-shadow: inset 0 -2px 0 0 hsla(186, 45%, 48%, 0.8); } } } diff --git a/lib/css/components/_stacks-buttons.less b/lib/css/components/_stacks-buttons.less index 5a613b0ef5..f6502c4ad6 100644 --- a/lib/css/components/_stacks-buttons.less +++ b/lib/css/components/_stacks-buttons.less @@ -184,7 +184,7 @@ color: var(--theme-button-filled-color); background-color: var(--theme-button-filled-background-color); border-color: var(--theme-button-filled-border-color); - box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); + box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7); .dark-mode({ box-shadow: none; }); @@ -254,7 +254,7 @@ color: @button-muted-filled-color; background-color: @button-muted-filled-background-color; border-color: transparent; - box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4); + box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4); .dark-mode({ box-shadow: none; }); @@ -331,7 +331,7 @@ color: @button-danger-filled-color; background-color: @button-danger-filled-background-color; border-color: transparent; - box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4); + box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4); .dark-mode({ box-shadow: none; }); @@ -373,7 +373,7 @@ .s-btn__primary { color: var(--theme-button-primary-color); background-color: var(--theme-button-primary-background-color); - box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4); + box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4); .dark-mode({ box-shadow: none; }); diff --git a/lib/css/components/_stacks-popovers.less b/lib/css/components/_stacks-popovers.less index 6c5903c2f8..75d1d64991 100644 --- a/lib/css/components/_stacks-popovers.less +++ b/lib/css/components/_stacks-popovers.less @@ -53,7 +53,7 @@ &:after { bottom: 1px; - box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.07), 2px 2px 2px -1px rgba(0, 0, 0, 0.1); + box-shadow: 2px 2px 5px 0 hsla(0, 0, 0, 0.07), 2px 2px 2px -1px hsla(0, 0, 0, 0.1); } } @@ -65,7 +65,7 @@ &:after { top: 1px; - box-shadow: -1px -1px 1px 0 rgba(0, 0, 0, 0.12); + box-shadow: -1px -1px 1px 0 hsla(0, 0, 0, 0.12); } } @@ -77,7 +77,7 @@ &:after { right: 1px; - box-shadow: 2px -2px 5px 0 rgba(0, 0, 0, 0.07), 2px -2px 2px -1px rgba(0, 0, 0, 0.1); + box-shadow: 2px -2px 5px 0 hsla(0, 0, 0, 0.07), 2px -2px 2px -1px hsla(0, 0, 0, 0.1); } } @@ -89,7 +89,7 @@ &:after { left: 1px; - box-shadow: -2px 2px 5px 0 rgba(0, 0, 0, 0.07), -2px 2px 2px -1px rgba(0, 0, 0, 0.1); + box-shadow: -2px 2px 5px 0 hsla(0, 0, 0, 0.07), -2px 2px 2px -1px hsla(0, 0, 0, 0.1); } } diff --git a/lib/css/components/_stacks-prose.less b/lib/css/components/_stacks-prose.less index 2f246cf97d..bbb895c893 100644 --- a/lib/css/components/_stacks-prose.less +++ b/lib/css/components/_stacks-prose.less @@ -402,11 +402,11 @@ background-color: var(--black-075); border: 1px solid var(--black-300); border-radius: @br-sm; - box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 @white; + box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white; overflow-wrap: break-word; .dark-mode({ - box-shadow: 0 1px 1px rgba(12, 13, 14, 0.8); + box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.8); border-color: transparent; border-top-color: @black-500; }); diff --git a/lib/css/exports/_stacks-constants-colors.less b/lib/css/exports/_stacks-constants-colors.less index aa1112b856..d8a8d26194 100644 --- a/lib/css/exports/_stacks-constants-colors.less +++ b/lib/css/exports/_stacks-constants-colors.less @@ -9,122 +9,139 @@ // ============================================================================ // $ Legacy Less color variables // ---------------------------------------------------------------------------- +// -- Base Hue Values +@white-h: 0; +@black-h: 210; +@orange-h: 27; +@yellow-h: 47; +@green-h: 140; +@blue-h: 206; +@powder-h: 205; +@red-h: 358; +@fog-h: 180; +@gold-h: 48; +@silver-h: 210; +@bronze-h: 28; + +// -- Base Saturation Values +@black-s: 8%; + // -- Primary Colors -@white: #fff; -@black: #0c0d0e; -@orange: #f48024; +@white: hsl(@white-h, 0%, 100%); +@black: hsl(@black-h, @black-s, 5%); +@orange: hsl(@orange-h, 90%, 55%); // -- Accent Colors -@yellow: #fbf2d4; -@green: #5eba7d; -@blue: #0077cc; -@powder: #e1ecf4; -@red: #d1383d; -@fog: #f7f8f8; +@yellow: hsl(@yellow-h, 83%, 91%); +@green: hsl(@green-h, 40%, 55%); +@blue: hsl(@blue-h, 100%, 40%); +@powder: hsl(@powder-h, 46%, 92%); +@red: hsl(@red-h, 62%, 52%); +@fog: hsl(@fog-h, 7%, 97%); // Black -@black-025: #fafafb; -@black-050: #eff0f1; -@black-075: #e4e6e8; -@black-100: #d6d9dc; -@black-150: #c8ccd0; -@black-200: #bbc0c4; -@black-300: #9fa6ad; -@black-350: #9199a1; -@black-400: #848d95; -@black-500: #6a737c; -@black-600: #535a60; -@black-700: #3c4146; -@black-750: #2f3337; -@black-800: #242729; +@black-025: hsl(@black-h, @black-s, 97.5%); +@black-050: hsl(@black-h, @black-s, 95%); +@black-075: hsl(@black-h, @black-s, 90%); +@black-100: hsl(@black-h, @black-s, 85%); +@black-150: hsl(@black-h, @black-s, 80%); +@black-200: hsl(@black-h, @black-s, 75%); +@black-300: hsl(@black-h, @black-s, 65%); +@black-350: hsl(@black-h, @black-s, 60%); +@black-400: hsl(@black-h, @black-s, 55%); +@black-500: hsl(@black-h, @black-s, 45%); +@black-600: hsl(@black-h, @black-s, 35%); +@black-700: hsl(@black-h, @black-s, 25%); +@black-750: hsl(@black-h, @black-s, 20%); +@black-800: hsl(@black-h, @black-s, 15%); @black-900: @black; // Orange -@orange-050: #fff7f2; -@orange-100: #fee3cf; -@orange-200: #fcd0ad; -@orange-300: #f7aa6d; +@orange-050: hsl(@orange-h, 100%, 97%); +@orange-100: hsl(@orange-h, 95%, 90%); +@orange-200: hsl(@orange-h, 90%, 83%); +@orange-300: hsl(@orange-h, 90%, 70%); @orange-400: @orange; -@orange-500: #f2720c; -@orange-600: #da670b; -@orange-700: #bd5c00; -@orange-800: #a35200; -@orange-900: #874600; +@orange-500: hsl(@orange-h, 90%, 50%); +@orange-600: hsl(@orange-h, 90%, 45%); +@orange-700: hsl(@orange-h, 90%, 39%); +@orange-800: hsl(@orange-h, 87%, 35%); +@orange-900: hsl(@orange-h, 80%, 30%); // Blue -@blue-050: #f2f9ff; -@blue-100: #cfeafe; -@blue-200: #addafc; -@blue-300: #6cbbf7; -@blue-400: #379fef; -@blue-500: #0095ff; +@blue-050: hsl(@blue-h, 100%, 97%); +@blue-100: hsl(@blue-h, 96%, 90%); +@blue-200: hsl(@blue-h, 93%, 83.5%); +@blue-300: hsl(@blue-h, 90%, 69.5%); +@blue-400: hsl(@blue-h, 85%, 57.5%); +@blue-500: hsl(@blue-h, 100%, 52%); @blue-600: @blue; -@blue-700: #0064bd; -@blue-800: #0054a3; -@blue-900: #004487; +@blue-700: hsl(@blue-h + 3, 100%, 37.5%); +@blue-800: hsl(@blue-h + 3, 100%, 32%); +@blue-900: hsl(@blue-h + 3, 100%, 26%); // Powder -@powder-050: #f4f8fb; +@powder-050: hsl(@powder-h, 47%, 97%); @powder-100: @powder; -@powder-200: #d1e5f1; -@powder-300: #b3d3ea; -@powder-400: #a0c7e4; -@powder-500: #7aa7c7; -@powder-600: #5b8db1; -@powder-700: #39739d; -@powder-800: #2c5777; -@powder-900: #1e3c52; +@powder-200: hsl(@powder-h, 53%, 88%); +@powder-300: hsl(@powder-h, 57%, 81%); +@powder-400: hsl(@powder-h, 56%, 76%); +@powder-500: hsl(@powder-h, 41%, 63%); +@powder-600: hsl(@powder-h, 36%, 53%); +@powder-700: hsl(@powder-h, 47%, 42%); +@powder-800: hsl(@powder-h, 46%, 32%); +@powder-900: hsl(@powder-h, 46%, 22%); // Green -@green-025: #eef8f1; -@green-050: #dcf0e2; -@green-100: #cae8d4; -@green-200: #a6d9b7; -@green-300: #82ca9a; +@green-025: hsl(@green-h, 42%, 95%); +@green-050: hsl(@green-h, 40%, 90%); +@green-100: hsl(@green-h, 40%, 85%); +@green-200: hsl(@green-h, 40%, 75%); +@green-300: hsl(@green-h, 40%, 65%); @green-400: @green; -@green-500: #48a868; -@green-600: #3d8f58; -@green-700: #2f6f44; -@green-800: #29603b; -@green-900: #1e472c; +@green-500: hsl(@green-h, 40%, 47%); +@green-600: hsl(@green-h, 40%, 40%); +@green-700: hsl(@green-h, 41%, 31%); +@green-800: hsl(@green-h, 40%, 27%); +@green-900: hsl(@green-h, 40%, 20%); // Yellow -@yellow-050: #fdf7e3; +@yellow-050: hsl(@yellow-h, 87%, 94%); @yellow-100: @yellow; -@yellow-200: #f1e5bc; -@yellow-300: #e6d178; -@yellow-400: #e9c63f; -@yellow-500: #ddb624; -@yellow-600: #cea51b; -@yellow-700: #b89516; -@yellow-800: #9f8010; -@yellow-900: #826a0b; +@yellow-200: hsl(@yellow-h, 65%, 84%); +@yellow-300: hsl(@yellow-h, 69%, 69%); +@yellow-400: hsl(@yellow-h, 79%, 58%); +@yellow-500: hsl(@yellow-h, 73%, 50%); +@yellow-600: hsl(@yellow-h, 76%, 46%); +@yellow-700: hsl(@yellow-h, 79%, 40%); +@yellow-800: hsl(@yellow-h, 82%, 34%); +@yellow-900: hsl(@yellow-h, 84%, 28%); // Red -@red-050: #fdf3f4; -@red-100: #f9d3d7; -@red-200: #f4b4bb; -@red-300: #e87c87; -@red-400: #de535e; +@red-050: hsl(@red-h, 75%, 97%); +@red-100: hsl(@red-h, 76%, 90%); +@red-200: hsl(@red-h, 74%, 83%); +@red-300: hsl(@red-h, 70%, 70%); +@red-400: hsl(@red-h, 68%, 59%); @red-500: @red; -@red-600: #c02d2e; -@red-700: #ac2726; -@red-800: #942121; -@red-900: #7a1819; +@red-600: hsl(@red-h, 62%, 47%); +@red-700: hsl(@red-h, 64%, 41%); +@red-800: hsl(@red-h, 64%, 35%); +@red-900: hsl(@red-h, 67%, 29%); // $ BADGES // ---------------------------------------------------------------------------- -@gold: #ffcc01; -@gold-lighter: #fff4d1; -@gold-darker: #f1b600; +@gold: hsl(@gold-h, 100%, 50%); +@gold-lighter: hsl(@gold-h, 100%, 91%); +@gold-darker: hsl(@gold-h - 3, 100%, 47%); -@silver: #b4b8bc; -@silver-lighter: #e8e8e8; -@silver-darker: #9a9c9f; +@silver: hsl(@silver-h, 6%, 72%); +@silver-lighter: hsl(@silver-h, 0%, 91%); +@silver-darker: hsl(@silver-h, 3%, 61%); -@bronze: #caa789; -@bronze-lighter: #f2e9e1; -@bronze-darker: #ab825f; +@bronze: hsl(@bronze-h, 38%, 67%); +@bronze-lighter: hsl(@bronze-h, 40%, 92%); +@bronze-darker: hsl(@bronze-h, 31%, 52%); // $ RINGS // ---------------------------------------------------------------------------- @@ -136,13 +153,13 @@ // $ SHADOWS // ---------------------------------------------------------------------------- -@bs-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.05); -@bs-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.09); -@bs-lg: 0 1px 4px rgba(0, 0, 0, 0.09), 0 3px 8px rgba(0, 0, 0, 0.09), 0 4px 13px rgba(0, 0, 0, 0.13); +@bs-sm: 0 1px 2px hsla(0, 0, 0, 0.05), 0 1px 4px hsla(0, 0, 0, 0.05), 0 2px 8px hsla(0, 0, 0, 0.05); +@bs-md: 0 1px 3px hsla(0, 0, 0, 0.06), 0 2px 6px hsla(0, 0, 0, 0.06), 0 3px 8px hsla(0, 0, 0, 0.09); +@bs-lg: 0 1px 4px hsla(0, 0, 0, 0.09), 0 3px 8px hsla(0, 0, 0, 0.09), 0 4px 13px hsla(0, 0, 0, 0.13); // $ SCROLLBARS // ---------------------------------------------------------------------------- -@scrollbar: rgba(0, 0, 0, 0.2); +@scrollbar: hsla(0, 0, 0, 0.2); // ============================================================================ // $ CSS Variable Colors @@ -364,16 +381,16 @@ --scrollbar: @scrollbar; // Syntax highlighting - --highlight-bg: #f6f6f6; // Between black-025 and black-050 + --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050 --highlight-color: @black-750; // AAA 11.78 - --highlight-comment: #656e77; // ~black-500 AA 4.80 + --highlight-comment: hsl(@black-h, 8%, 43.5%); // ~black-500 AA 4.80 --highlight-punctuation: var(--black-600); // AA 6.48 - --highlight-namespace: #b75501; // Custom orange AA 4.51 - --highlight-attribute: #015692; // Custom blue AAA 7.25 - --highlight-literal: #b75501; // Custom orange AA 4.51 - --highlight-symbol: #803378; // Custom purple AAA 7.30 - --highlight-keyword: #015692; // Custom blue AAA 7.07 - --highlight-variable: #54790d; // Custom green AAA 7.25 + --highlight-namespace: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51 + --highlight-attribute: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.25 + --highlight-literal: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51 + --highlight-symbol: hsl(306, 43%, 35%); // Custom purple AAA 7.30 + --highlight-keyword: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.07 + --highlight-variable: hsl(80, 80.5%, 26.5%); // Custom green AAA 7.25 --highlight-addition: @green-700; // AA 5.59 --highlight-deletion: @red-600; // AA 5.31 } @@ -426,113 +443,113 @@ // -- Dark mode .dark-colors() { - --white: #2d2d2d; - --black: #fff; + --white: hsl(@black-h, 0%, 17.5%); + --black: @white; // Black - --black-025: #393939; - --black-050: #3d3d3d; - --black-075: #404345; - --black-100: #4a4e51; - --black-150: #555a5e; - --black-200: #697075; - --black-300: #7d848d; - --black-350: #959ca3; - --black-400: #9fa6ad; - --black-500: #acb2b8; - --black-600: #c4c8cc; - --black-700: #cfd2d6; - --black-750: #dadee0; - --black-800: #e7e8eb; - --black-900: #f2f2f3; + --black-025: hsl(@black-h, 0%, 22.5%); + --black-050: hsl(@black-h, 0%, 24%); + --black-075: hsl(@black-h, 4%, 26%); + --black-100: hsl(@black-h, 4.5%, 30.5%); + --black-150: hsl(@black-h, 5%, 35%); + --black-200: hsl(@black-h, 5.5%, 43.5%); + --black-300: hsl(@black-h, 6.5%, 52%); + --black-350: hsl(@black-h, 7%, 61%); + --black-400: hsl(@black-h, 8%, 65%); + --black-500: hsl(@black-h, 8%, 70%); + --black-600: hsl(@black-h, 7%, 78.5%); + --black-700: hsl(@black-h, 8%, 82.5%); + --black-750: hsl(@black-h, 9%, 86.5%); + --black-800: hsl(@black-h, 9%, 91.5%); + --black-900: hsl(@black-h, 4%, 95%); // Orange - --orange-050: #473c33; - --orange-100: #5e4433; - --orange-200: #8d5a2f; - --orange-300: #cc7525; - --orange-400: #f48024; - --orange-500: #ff901e; - --orange-600: #ffa95e; - --orange-700: #f8b682; - --orange-800: #fcd6b9; - --orange-900: #fee7d6; + --orange-050: hsl(@orange-h, 16.5%, 23.9%); + --orange-100: hsl(@orange-h, 30%, 28.4%); + --orange-200: hsl(@orange-h, 50%, 36.9%); + --orange-300: hsl(@orange-h, 70%, 47.3%); + --orange-400: hsl(@orange-h, 90.5%, 54.9%); + --orange-500: hsl(@orange-h, 100%, 59%); + --orange-600: hsl(@orange-h, 100%, 68.4%); + --orange-700: hsl(@orange-h, 89.5%, 74.1%); + --orange-800: hsl(@orange-h, 92%, 85.7%); + --orange-900: hsl(@orange-h, 95%, 91.8%); // Blue - --blue-050: #233e52; - --blue-100: #25445f; - --blue-200: #295070; - --blue-300: #2b5f8a; - --blue-400: #3070ab; - --blue-500: #378ad3; - --blue-600: #3ca4ff; - --blue-700: #81c4f8; - --blue-800: #b8dffd; - --blue-900: #d5ecfd; + --blue-050: hsl(@blue-h, 40%, 23%); + --blue-100: hsl(@blue-h, 44%, 26%); + --blue-200: hsl(@blue-h, 46%, 30%); + --blue-300: hsl(@blue-h, 53%, 35%); + --blue-400: hsl(@blue-h + 3, 56%, 43%); + --blue-500: hsl(@blue-h, 64%, 51%); + --blue-600: hsl(@blue-h, 100%, 60%); + --blue-700: hsl(@blue-h, 90%, 74%); + --blue-800: hsl(@blue-h, 95%, 86%); + --blue-900: hsl(@blue-h, 91%, 91.5%); // Powder - --powder-050: #414648; - --powder-100: #3e4a52; - --powder-200: #43525f; - --powder-300: #4c6071; - --powder-400: #577489; - --powder-500: #688eac; - --powder-600: #7badd3; - --powder-700: #9cc3db; - --powder-800: #cde1ee; - --powder-900: #e5f3ff; + --powder-050: hsl(@powder-h, 5%, 27%); + --powder-100: hsl(@powder-h, 14%, 28%); + --powder-200: hsl(@powder-h, 17.5%, 32%); + --powder-300: hsl(@powder-h, 19.5%, 37%); + --powder-400: hsl(@powder-h, 22.5%, 44%); + --powder-500: hsl(@powder-h, 29%, 54%); + --powder-600: hsl(@powder-h, 50%, 65.5%); + --powder-700: hsl(@powder-h, 46.5%, 73.5%); + --powder-800: hsl(@powder-h, 49.5%, 87%); + --powder-900: hsl(@powder-h, 100%, 95%); // Green - --green-025: #2e4233; - --green-050: #344b3a; - --green-100: #3d6048; - --green-200: #487455; - --green-300: #4d815c; - --green-400: #5a9e6f; - --green-500: #63b47c; - --green-600: #76c490; - --green-700: #93d0a8; - --green-800: #b3dec1; - --green-900: #d0eada; + --green-025: hsl(@green-h, 18%, 22%); + --green-050: hsl(@green-h, 18%, 25%); + --green-100: hsl(@green-h, 22.5%, 31%); + --green-200: hsl(@green-h, 23.5%, 37%); + --green-300: hsl(@green-h, 25%, 40.5%); + --green-400: hsl(@green-h, 27.5%, 48.5%); + --green-500: hsl(@green-h, 35%, 54.5%); + --green-600: hsl(@green-h, 40%, 61.5%); + --green-700: hsl(@green-h, 39.5%, 69.5%); + --green-800: hsl(@green-h, 39.5%, 78.5%); + --green-900: hsl(@green-h, 38%, 86.5%); // Yellow - --yellow-050: #464236; - --yellow-100: #524b38; - --yellow-200: #675c37; - --yellow-300: #7e6f3a; - --yellow-400: #9e883b; - --yellow-500: #bf9f37; - --yellow-600: #dab941; - --yellow-700: #f1d056; - --yellow-800: #f8df7a; - --yellow-900: #fcedaf; + --yellow-050: hsl(@yellow-h, 13%, 24.5%); + --yellow-100: hsl(@yellow-h, 19%, 27%); + --yellow-200: hsl(@yellow-h, 30.5%, 31%); + --yellow-300: hsl(@yellow-h, 37%, 36%); + --yellow-400: hsl(@yellow-h, 45.5%, 42.5%); + --yellow-500: hsl(@yellow-h, 55.5%, 48%); + --yellow-600: hsl(@yellow-h, 67.5%, 55.5%); + --yellow-700: hsl(@yellow-h, 84.5%, 64%); + --yellow-800: hsl(@yellow-h, 90%, 72.5%); + --yellow-900: hsl(@yellow-h, 93%, 83.5%); // Red - --red-050: #572f32; - --red-100: #723738; - --red-200: #873f3e; - --red-300: #9b4544; - --red-400: #b24d49; - --red-500: #c4524f; - --red-600: #d25d5d; - --red-700: #de7176; - --red-800: #e7929a; - --red-900: #f2c1c7; + --red-050: hsl(@red-h + 3, 30%, 26.5%); + --red-100: hsl(@red-h + 3, 35%, 33%); + --red-200: hsl(@red-h + 3, 37%, 38.5%); + --red-300: hsl(@red-h + 3, 39%, 43.5%); + --red-400: hsl(@red-h + 3, 42%, 49%); + --red-500: hsl(@red-h + 3, 50%, 54%); + --red-600: hsl(@red-h + 3, 56.5%, 59.5%); + --red-700: hsl(@red-h + 3, 62.5%, 65.5%); + --red-800: hsl(@red-h + 3, 64%, 74%); + --red-900: hsl(@red-h + 3, 65.5%, 85.5%); // Gold --gold: @gold; - --gold-lighter: #5e553c; - --gold-darker: #f1b600; + --gold-lighter: hsl(@gold-h, 22%, 30%); + --gold-darker: @gold-darker; // Silver --silver: @silver; - --silver-lighter: #424242; - --silver-darker: #9a9c9f; + --silver-lighter: hsl(@silver-h, 0%, 26%); + --silver-darker: @silver-darker; // Bronze --bronze: @bronze; - --bronze-lighter: #4d433b; - --bronze-darker: #ab825f; + --bronze-lighter: hsl(@bronze-h, 13%, 27%); + --bronze-darker: @bronze-darker; // Font colors --fc-dark: var(--black-900); @@ -540,30 +557,30 @@ --fc-light: var(--black-500); // Focus rings - --focus-ring-success: fade(#487455, 40%); // @green-200 - --focus-ring-warning: fade(#9e883b, 40%); // @yellow-400 - --focus-ring-error: fade(#c4524f, 30%); // @red-500 - --focus-ring-muted: fade(#e7e8eb, 10%); // @black-800 + --focus-ring-success: fade(@green-200, 40%); + --focus-ring-warning: fade(@yellow-400, 40%); + --focus-ring-error: fade(@red-500, 30%); + --focus-ring-muted: fade(@black-800, 10%); // Shadows - --bs-sm: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1); - --bs-md: 0 1px 3px rgba(0, 0, 0, 0.11), 0 2px 6px rgba(0, 0, 0, 0.11), 0 3px 8px rgba(0, 0, 0, 0.14); - --bs-lg: 0 1px 4px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.14), 0 4px 13px rgba(0, 0, 0, 0.18); + --bs-sm: 0 1px 2px hsla(0, 0, 0, 0.1), 0 1px 4px hsla(0, 0, 0, 0.1), 0 2px 8px hsla(0, 0, 0, 0.1); + --bs-md: 0 1px 3px hsla(0, 0, 0, 0.11), 0 2px 6px hsla(0, 0, 0, 0.11), 0 3px 8px hsla(0, 0, 0, 0.14); + --bs-lg: 0 1px 4px hsla(0, 0, 0, 0.14), 0 3px 8px hsla(0, 0, 0, 0.14), 0 4px 13px hsla(0, 0, 0, 0.18); // Scrollbars - --scrollbar: rgba(255, 255, 255, 0.2); + --scrollbar: hsla(0, 0%, 100%, 0.2); // Syntax highlighting - --highlight-bg: #1c1b1b; + --highlight-bg: hsl(0, 2%, 11%); --highlight-color: @white; // AAA 17.19 - --highlight-comment: #999; // AA 6.03 - --highlight-punctuation: #ccc; // AAA 10.70 - --highlight-namespace: #f08d49; // orange-700 AAA 7.05 - --highlight-attribute: #88aece; // Custom powder blue AAA 7.63 - --highlight-literal: #f08d49; // orange-700 AAA 7.05 - --highlight-symbol: #c59bc1; // Custom purple AAA 7.23 - --highlight-keyword: #88aece; // Custom powder blue AAA 7.63 - --highlight-variable: #b5bd68; + --highlight-comment: hsl(0, 0%, 60%); // AA 6.03 + --highlight-punctuation: hsl(0, 0%, 80%); // AAA 10.70 + --highlight-namespace: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05 + --highlight-attribute: hsl(@powder-h + 2, 41.5%, 67%); // Custom powder blue AAA 7.63 + --highlight-literal: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05 + --highlight-symbol: hsl(306, 43%, 69%); // Custom purple AAA 7.23 + --highlight-keyword: hsl(@powder-h + 3, 41.5%, 67%); // Custom powder blue AAA 7.63 + --highlight-variable: hsl(65.5, 39%, 57.5%); --highlight-addition: var(--green-600); // AAA 8.21 --highlight-deletion: var(--red-700); // AA 5.51 }