@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

package/lib/exports/constants-colors.less

@@ -1,1100 +0,0 @@
-@import (reference) "./mixins.less";
-
-//
-//  STACK OVERFLOW
-//  CONSTANTS -- COLORS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $   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: hsl(@white-h, 0%, 100%);
-@black: hsl(@black-h, @black-s, 5%);
-@orange: hsl(@orange-h, 90%, 55%);
-
-//  --  Accent Colors
-@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: 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: 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: 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: 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: 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: hsl(@powder-h, 47%, 97%);
-@powder-100: @powder;
-@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: 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: 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: hsl(@yellow-h, 87%, 94%);
-@yellow-100: @yellow;
-@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-025: hsl(@red-h, 80%, 98%);
-@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: 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: hsl(@gold-h, 100%, 50%);
-@gold-lighter: hsl(@gold-h, 100%, 91%);
-@gold-darker: hsl(@gold-h - 3, 100%, 47%);
-
-@silver: hsl(@silver-h, 6%, 72%);
-@silver-lighter: hsl(@silver-h, 0%, 91%);
-@silver-darker: hsl(@silver-h, 3%, 61%);
-
-@bronze: hsl(@bronze-h, 38%, 67%);
-@bronze-lighter: hsl(@bronze-h, 40%, 92%);
-@bronze-darker: hsl(@bronze-h, 31%, 52%);
-
-//  $  SCROLLBARS
-//  ----------------------------------------------------------------------------
-@scrollbar: hsla(0, 0%, 0%, 0.2);
-
-//  ============================================================================
-//  $   CSS Variable Colors
-//  ----------------------------------------------------------------------------
-
-.generate-calculated-themed-variables(@primary, @designation: primary, @theme: base) {
-    // Split into h/s/l/a values
-    --theme-@{theme}-@{designation}-color-h: hue(@primary);
-    --theme-@{theme}-@{designation}-color-s: saturation(@primary);
-    --theme-@{theme}-@{designation}-color-l: lightness(@primary);
-
-    // Split into r/g/b values
-    --theme-@{theme}-@{designation}-color-r: red(@primary);
-    --theme-@{theme}-@{designation}-color-g: green(@primary);
-    --theme-@{theme}-@{designation}-color-b: blue(@primary);
-}
-
-.generate-themed-variables(@theme: theme) {
-    // Primary color
-    // Split into h/s/l/a values
-    --theme-primary-color-h: var(~"--@{theme}-primary-color-h", var(--theme-base-primary-color-h));
-    --theme-primary-color-s: var(~"--@{theme}-primary-color-s", var(--theme-base-primary-color-s));
-    --theme-primary-color-l: var(~"--@{theme}-primary-color-l", var(--theme-base-primary-color-l));
-
-    // Split into r/g/b values
-    --theme-primary-color-r: var(~"--@{theme}-primary-color-r", var(--theme-base-primary-color-r));
-    --theme-primary-color-g: var(~"--@{theme}-primary-color-g", var(--theme-base-primary-color-g));
-    --theme-primary-color-b: var(~"--@{theme}-primary-color-b", var(--theme-base-primary-color-b));
-
-    // Secondary color
-    // Split into h/s/l/a values
-    --theme-secondary-color-h: var(~"--@{theme}-secondary-color-h", var(--theme-base-secondary-color-h));
-    --theme-secondary-color-s: var(~"--@{theme}-secondary-color-s", var(--theme-base-secondary-color-s));
-    --theme-secondary-color-l: var(~"--@{theme}-secondary-color-l", var(--theme-base-secondary-color-l));
-
-    // Split into r/g/b values
-    --theme-secondary-color-r: var(~"--@{theme}-secondary-color-r", var(--theme-base-secondary-color-r));
-    --theme-secondary-color-g: var(~"--@{theme}-secondary-color-g", var(--theme-base-secondary-color-g));
-    --theme-secondary-color-b: var(~"--@{theme}-secondary-color-b", var(--theme-base-secondary-color-b));
-}
-
-.component-colors {
-    --theme-body-font-color: var(--black-800);
-    --theme-background-color: var(--white);
-    // Links
-    --theme-link-color: var(--theme-secondary-400);
-    --theme-link-color-hover: var(--theme-secondary-350);
-    --theme-link-color-visited: var(--theme-secondary-700);
-
-    // Button Default (Secondary)
-    --theme-button-color: var(--theme-secondary-400);
-    --theme-button-background-color: transparent;
-    --theme-button-hover-color: var(--theme-secondary-500);
-    --theme-button-hover-background-color: var(--theme-secondary-050);
-    --theme-button-active-background-color: var(--theme-secondary-100);
-    --theme-button-selected-color: var(--theme-secondary-900);
-    --theme-button-selected-background-color: var(--theme-secondary-150);
-
-    //  Button Primary
-    --theme-button-primary-color: var(--white);
-    --theme-button-primary-background-color: var(--theme-secondary-400);
-    --theme-button-primary-hover-color: var(--white);
-    --theme-button-primary-hover-background-color: var(--theme-secondary-500);
-    --theme-button-primary-active-background-color: var(--theme-secondary-700);
-    --theme-button-primary-selected-color: var(--white);
-    --theme-button-primary-selected-background-color: var(--theme-secondary-700);
-    --theme-button-primary-number-color: var(--theme-secondary-900);
-
-    // Button Filled
-    --theme-button-filled-color: var(--theme-secondary-700);
-    --theme-button-filled-background-color: var(--theme-secondary-050);
-    --theme-button-filled-border-color: var(--theme-secondary-350);
-    --theme-button-filled-hover-color: var(--theme-secondary-800);
-    --theme-button-filled-hover-background-color: var(--theme-secondary-100);
-    --theme-button-filled-active-background-color: var(--theme-secondary-150);
-    --theme-button-filled-active-border-color: var(--theme-secondary-350);
-    --theme-button-filled-selected-color: var(--theme-secondary-900);
-    --theme-button-filled-selected-background-color: var(--theme-secondary-300);
-    --theme-button-filled-selected-border-color: var(--theme-secondary-500);
-
-    // Button Outline
-    --theme-button-outlined-border-color: var(--theme-secondary-300);
-    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
-
-    // Tags
-    --theme-tag-color: var(--theme-secondary-800);
-    --theme-tag-background-color: var(--theme-secondary-075);
-    --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-900);
-    --theme-tag-hover-background-color: var(--theme-secondary-100);
-    --theme-tag-hover-border-color: transparent;
-
-    // Topbar
-    --theme-topbar-height: calc(var(--su-static48) + var(--su-static8)); // 56px
-    --theme-topbar-background-color: var(--white);
-
-    // Topbar Search input
-    --theme-topbar-search-color: var(--black-700);
-    --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-400);
-    --theme-topbar-search-border: var(--black-200);
-    --theme-topbar-search-border-focus: var(--blue-300);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-
-    // Topbar Search switcher
-    --theme-topbar-select-color: var(--black-700);
-    --theme-topbar-select-background: var(--black-075);
-
-    // Topbar items
-    --theme-topbar-item-color: var(--black-600);
-    --theme-topbar-item-color-hover: var(--black-800);
-    --theme-topbar-item-background-hover: var(--black-075);
-    --theme-topbar-item-color-current: var(--black);
-    --theme-topbar-item-border-current: var(--theme-primary-color);
-
-    // Topbar themed border accent
-    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
-    --theme-topbar-bottom-border: 1px solid var(--black-100);
-
-    // Post summary
-    --theme-post-title-color: var(--theme-link-color);
-    --theme-post-title-color-hover: var(--theme-link-color-hover);
-    --theme-post-title-color-visited: var(--theme-link-color-visited);
-    --theme-post-title-font-family: var(--theme-body-font-family);
-    --theme-post-body-font-family: var(--theme-body-font-family);
-}
-
-//  --  Light mode
-.light-colors() {
-    --white: @white;
-    --black: @black;
-    --orange: @orange;
-    --yellow: @yellow;
-    --green: @green;
-    --blue: @blue;
-    --powder: @powder;
-    --red: @red;
-
-    // Black
-    --black-025: @black-025;
-    --black-050: @black-050;
-    --black-075: @black-075;
-    --black-100: @black-100;
-    --black-150: @black-150;
-    --black-200: @black-200;
-    --black-300: @black-300;
-    --black-350: @black-350;
-    --black-400: @black-400;
-    --black-500: @black-500;
-    --black-600: @black-600;
-    --black-700: @black-700;
-    --black-750: @black-750;
-    --black-800: @black-800;
-    --black-900: @black-900;
-
-    // Orange
-    --orange-050: @orange-050;
-    --orange-100: @orange-100;
-    --orange-200: @orange-200;
-    --orange-300: @orange-300;
-    --orange-400: @orange-400;
-    --orange-500: @orange-500;
-    --orange-600: @orange-600;
-    --orange-700: @orange-700;
-    --orange-800: @orange-800;
-    --orange-900: @orange-900;
-
-    // Blue
-    --blue-050: @blue-050;
-    --blue-100: @blue-100;
-    --blue-200: @blue-200;
-    --blue-300: @blue-300;
-    --blue-400: @blue-400;
-    --blue-500: @blue-500;
-    --blue-600: @blue-600;
-    --blue-700: @blue-700;
-    --blue-800: @blue-800;
-    --blue-900: @blue-900;
-
-    // Powder
-    --powder-050: @powder-050;
-    --powder-100: @powder-100;
-    --powder-200: @powder-200;
-    --powder-300: @powder-300;
-    --powder-400: @powder-400;
-    --powder-500: @powder-500;
-    --powder-600: @powder-600;
-    --powder-700: @powder-700;
-    --powder-800: @powder-800;
-    --powder-900: @powder-900;
-
-    // Green
-    --green-025: @green-025;
-    --green-050: @green-050;
-    --green-100: @green-100;
-    --green-200: @green-200;
-    --green-300: @green-300;
-    --green-400: @green-400;
-    --green-500: @green-500;
-    --green-600: @green-600;
-    --green-700: @green-700;
-    --green-800: @green-800;
-    --green-900: @green-900;
-
-    // Yellow
-    --yellow-050: @yellow-050;
-    --yellow-100: @yellow-100;
-    --yellow-200: @yellow-200;
-    --yellow-300: @yellow-300;
-    --yellow-400: @yellow-400;
-    --yellow-500: @yellow-500;
-    --yellow-600: @yellow-600;
-    --yellow-700: @yellow-700;
-    --yellow-800: @yellow-800;
-    --yellow-900: @yellow-900;
-
-    // Red
-    --red-025: @red-025;
-    --red-050: @red-050;
-    --red-100: @red-100;
-    --red-200: @red-200;
-    --red-300: @red-300;
-    --red-400: @red-400;
-    --red-500: @red-500;
-    --red-600: @red-600;
-    --red-700: @red-700;
-    --red-800: @red-800;
-    --red-900: @red-900;
-
-    // Gold
-    --gold: @gold;
-    --gold-lighter: @gold-lighter;
-    --gold-darker: @gold-darker;
-
-    // Silver
-    --silver: @silver;
-    --silver-lighter: @silver-lighter;
-    --silver-darker: @silver-darker;
-
-    // Bronze
-    --bronze: @bronze;
-    --bronze-lighter: @bronze-lighter;
-    --bronze-darker: @bronze-darker;
-
-    // Border colors
-    --bc-lightest: var(--black-025);
-    --bc-lighter: var(--black-050);
-    --bc-light: var(--black-075);
-    --bc-medium: var(--black-100);
-    --bc-dark: var(--black-150);
-    --bc-darker: var(--black-200);
-
-    // Font colors
-    --fc-dark: @black-900;
-    --fc-medium: @black-700;
-    --fc-light: @black-500;
-
-    // Focus rings
-    --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
-    --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
-    --focus-ring-error: hsla(@red-h, 62%, 47%, 15%);
-    --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
-
-    // Opacity
-    --_o-disabled: 0.5;
-    --_o-disabled-static: 0.5;
-
-    // Shadows
-    --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);
-    --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
-
-    // Scrollbars
-    --scrollbar: hsla(0, 0, 0, 0.2);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
-    --highlight-color: var(--black-750); // AAA 11.78
-    --highlight-comment: hsl(@black-h, 8%, 43.5%); // ~black-500 AA 4.80
-    --highlight-punctuation: var(--black-600); // AA 6.48
-    --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: var(--green-700); // AA 5.59
-    --highlight-deletion: var(--red-600); // AA 5.31
-}
-
-.light-themed-colors() {
-    // Reassemble as a single hsl value
-    --theme-primary-color: .assemble-color(theme-primary-color)[];
-
-    // Steps
-    --theme-primary-900: .native-darken(theme-primary-color, 26)[];
-    --theme-primary-800: .native-darken(theme-primary-color, 21)[];
-    --theme-primary-700: .native-darken(theme-primary-color, 16)[];
-    --theme-primary-600: .native-darken(theme-primary-color, 10)[];
-    --theme-primary-500: .native-darken(theme-primary-color, 5)[];
-    --theme-primary-400: var(--theme-primary-color);
-    --theme-primary-350: .native-tint(theme-primary-color, 20)[];
-    --theme-primary-300: .native-tint(theme-primary-color, 35)[];
-    --theme-primary-200: .native-tint(theme-primary-color, 48)[];
-    --theme-primary-150: .native-tint(theme-primary-color, 65)[];
-    --theme-primary-100: .native-tint(theme-primary-color, 78)[];
-    --theme-primary-075: .native-tint(theme-primary-color, 85)[];
-    --theme-primary-050: .native-tint(theme-primary-color, 92)[];
-    --theme-primary-025: .native-tint(theme-primary-color, 96)[];
-
-    // Reassemble as a single hsl value
-    --theme-secondary-color: .assemble-color(theme-secondary-color)[];
-
-    // Steps
-    --theme-secondary-900: .native-darken(theme-secondary-color, 26)[];
-    --theme-secondary-800: .native-darken(theme-secondary-color, 21)[];
-    --theme-secondary-700: .native-darken(theme-secondary-color, 16)[];
-    --theme-secondary-600: .native-darken(theme-secondary-color, 10)[];
-    --theme-secondary-500: .native-darken(theme-secondary-color, 5)[];
-    --theme-secondary-400: var(--theme-secondary-color);
-    --theme-secondary-350: .native-tint(theme-secondary-color, 20)[];
-    --theme-secondary-300: .native-tint(theme-secondary-color, 35)[];
-    --theme-secondary-200: .native-tint(theme-secondary-color, 48)[];
-    --theme-secondary-150: .native-tint(theme-secondary-color, 65)[];
-    --theme-secondary-100: .native-tint(theme-secondary-color, 78)[];
-    --theme-secondary-075: .native-tint(theme-secondary-color, 85)[];
-    --theme-secondary-050: .native-tint(theme-secondary-color, 92)[];
-    --theme-secondary-025: .native-tint(theme-secondary-color, 96)[];
-
-    // Fades
-    --focus-ring: .native-fade(theme-secondary-color, 15)[];
-}
-
-//  --  Dark mode
-.dark-colors() {
-    --white: hsl(@black-h, 0%, 17.5%);
-    --black: @white;
-
-    // Black
-    --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: 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: 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: 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: 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: 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-025: hsl(@red-h + 3, 10%, 24%);
-    --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: hsl(@gold-h, 22%, 30%);
-    --gold-darker: @gold-darker;
-
-    // Silver
-    --silver: @silver;
-    --silver-lighter: hsl(@silver-h, 0%, 26%);
-    --silver-darker: @silver-darker;
-
-    // Bronze
-    --bronze: @bronze;
-    --bronze-lighter: hsl(@bronze-h, 13%, 27%);
-    --bronze-darker: @bronze-darker;
-
-    // Border colors
-    --bc-lightest: var(--black-025);
-    --bc-lighter: var(--black-050);
-    --bc-light: var(--black-075);
-    --bc-medium: var(--black-100);
-    --bc-dark: var(--black-150);
-    --bc-darker: var(--black-200);
-
-    // Font colors
-    --fc-dark: var(--black-900);
-    --fc-medium: var(--black-700);
-    --fc-light: var(--black-500);
-
-    // Focus rings
-    --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
-    --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
-    --focus-ring-error: hsla(@red-h, 62%, 52%, 30%);
-    --focus-ring-muted: hsla(@black-h, @black-s, 100%, 10%);
-
-    // Opacity
-    --_o-disabled: 0.5;
-    --_o-disabled-static: 0.5;
-
-    // Shadows
-    --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);
-    --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
-    
-    // Scrollbars
-    --scrollbar: hsla(0, 0%, 100%, 0.2);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 2%, 11%);
-    --highlight-color: var(--black); // AAA 17.19
-    --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
-}
-
-.dark-themed-colors() {
-    // Reassemble as a single hsl value
-    --theme-primary-color: .assemble-color(theme-primary-color)[];
-
-    // Reassemble as a single hsl value
-    --theme-secondary-color: .assemble-color(theme-secondary-color)[];
-
-    .dark-themed-colors-generator(@variant) {
-        --theme-@{variant}-025: .native-darken-desaturate(~"theme-@{variant}-color", 31, 73.3)[];
-        --theme-@{variant}-050: .native-darken-desaturate(~"theme-@{variant}-color", 15, 47)[];
-        --theme-@{variant}-075: .native-darken-desaturate(~"theme-@{variant}-color", 13, 39)[];
-        --theme-@{variant}-100: .native-darken-desaturate(~"theme-@{variant}-color", 11, 32)[];
-        --theme-@{variant}-150: .native-darken-desaturate(~"theme-@{variant}-color", 9, 23)[];
-        --theme-@{variant}-200: .native-darken-desaturate(~"theme-@{variant}-color", 7, 15)[];
-        --theme-@{variant}-300: .native-darken-desaturate(~"theme-@{variant}-color", 5, 7)[];
-        --theme-@{variant}-350: var(~"--theme-@{variant}-color");
-        --theme-@{variant}-400: .native-tint(~"theme-@{variant}-color", 21)[];
-        --theme-@{variant}-500: .native-tint(~"theme-@{variant}-color", 36)[];
-        --theme-@{variant}-600: .native-tint(~"theme-@{variant}-color", 51)[];
-        --theme-@{variant}-700: .native-tint(~"theme-@{variant}-color", 66)[];
-        --theme-@{variant}-800: .native-tint(~"theme-@{variant}-color", 81)[];
-        --theme-@{variant}-900: .native-tint(~"theme-@{variant}-color", 96)[];
-    }
-
-    .dark-themed-colors-generator(primary);
-    .dark-themed-colors-generator(secondary);
-
-    // Fades
-    --focus-ring: .native-fade(theme-secondary-color, 25)[];
-}
-
-// rules shared between .theme-dark and .theme-system w/ prefers-color-scheme: dark
-.theme-dark-rules() {
-    .dark-colors();
-
-    &,
-    & .themed {
-        color: var(--theme-body-font-color);
-        .generate-themed-variables(theme-dark);
-        // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
-        .dark-themed-colors();
-        &:extend(.component-colors);
-    }
-}
-
-//  --  High contrast modes
-.light-highcontrast() {
-    --white: hsl(0, 0%, 100%);
-    --black: hsl(0, 0%, 0%);
-
-    // Black
-    --black-025: hsl(@black-h, @black-s, 97.5%);
-    --black-050: hsl(@black-h, @black-s, 95%);
-    --black-075: hsl(@black-h, @black-s, 92.5%);
-    --black-100: hsl(@black-h, @black-s, 90%);
-    --black-150: hsl(@black-h, @black-s, 87.5%);
-    --black-200: hsl(@black-h, @black-s, 85%);
-    --black-300: hsl(@black-h, @black-s, 35%);
-    --black-350: hsl(@black-h, @black-s, 32.5%);
-    --black-400: hsl(@black-h, @black-s, 30%);
-    --black-500: hsl(@black-h, @black-s, 25%);
-    --black-600: hsl(@black-h, @black-s, 20%);
-    --black-700: hsl(@black-h, @black-s, 15%);
-    --black-750: hsl(@black-h, @black-s, 10%);
-    --black-800: hsl(@black-h, @black-s, 5%);
-    --black-900: hsl(@black-h, @black-s, 0%);
-
-    // Orange
-    --orange-050: hsl(@orange-h, 100%, 93%);
-    --orange-100: hsl(@orange-h, 100%, 90%);
-    --orange-200: hsl(@orange-h, 100%, 86%);
-    --orange-300: hsl(@orange-h, 100%, 81%);
-    --orange-400: hsl(@orange-h, 100%, 34%);
-    --orange-500: hsl(@orange-h, 100%, 29%);
-    --orange-600: hsl(@orange-h, 100%, 24%);
-    --orange-700: hsl(@orange-h, 100%, 19%);
-    --orange-800: hsl(@orange-h, 100%, 13%);
-    --orange-900: hsl(@orange-h, 100%, 8%);
-
-    // Blue
-    --blue-050: hsl(@blue-h, 100%, 94%);
-    --blue-100: hsl(@blue-h, 100%, 92%);
-    --blue-200: hsl(@blue-h, 100%, 89%);
-    --blue-300: hsl(@blue-h, 100%, 86%);
-    --blue-400: hsl(@blue-h, 100%, 25%);
-    --blue-500: hsl(@blue-h, 100%, 20%);
-    --blue-600: hsl(@blue-h, 100%, 15%);
-    --blue-700: hsl(@blue-h, 100%, 10%);
-    --blue-800: hsl(@blue-h, 100%, 7.5%);
-    --blue-900: hsl(@blue-h, 100%, 5%);
-
-    // Powder
-    --powder-050: hsl(@powder-h, 100%, 95%);
-    --powder-100: hsl(@powder-h, 85%, 93%);
-    --powder-200: hsl(@powder-h, 75%, 89%);
-    --powder-300: hsl(@powder-h, 70%, 86%);
-    --powder-400: hsl(@powder-h, 55%, 28%);
-    --powder-500: hsl(@powder-h, 60%, 24%);
-    --powder-600: hsl(@powder-h, 70%, 20%);
-    --powder-700: hsl(@powder-h, 75%, 16%);
-    --powder-800: hsl(@powder-h, 75%, 12%);
-    --powder-900: hsl(@powder-h, 75%, 8%);
-
-    // Green
-    --green-025: hsl(@green-h, 100%, 94%);
-    --green-050: hsl(@green-h, 100%, 91%);
-    --green-100: hsl(@green-h, 100%, 87%);
-    --green-200: hsl(@green-h, 100%, 83%);
-    --green-300: hsl(@green-h, 100%, 78%);
-    --green-400: hsl(@green-h, 100%, 18%);
-    --green-500: hsl(@green-h, 100%, 15%);
-    --green-600: hsl(@green-h, 100%, 12%);
-    --green-700: hsl(@green-h, 100%, 9%);
-    --green-800: hsl(@green-h, 100%, 6%);
-    --green-900: hsl(@green-h, 100%, 3%);
-
-    // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 92%);
-    --yellow-100: hsl(@yellow-h, 100%, 88%);
-    --yellow-200: hsl(@yellow-h, 95%, 83%);
-    --yellow-300: hsl(@yellow-h, 95%, 75%);
-    --yellow-400: hsl(@yellow-h, 100%, 28%);
-    --yellow-500: hsl(@yellow-h, 100%, 26%);
-    --yellow-600: hsl(@yellow-h, 100%, 23%);
-    --yellow-700: hsl(@yellow-h, 100%, 19%);
-    --yellow-800: hsl(@yellow-h, 100%, 13%);
-    --yellow-900: hsl(@yellow-h, 100%, 7%);
-
-    // Red
-    --red-025: hsl(@red-h, 100%, 97%);
-    --red-050: hsl(@red-h, 100%, 94%);
-    --red-100: hsl(@red-h, 100%, 92%);
-    --red-200: hsl(@red-h, 100%, 89%);
-    --red-300: hsl(@red-h, 100%, 86%);
-    --red-400: hsl(@red-h, 100%, 35%);
-    --red-500: hsl(@red-h, 100%, 29%);
-    --red-600: hsl(@red-h, 100%, 23%);
-    --red-700: hsl(@red-h, 100%, 17%);
-    --red-800: hsl(@red-h, 100%, 11%);
-    --red-900: hsl(@red-h, 100%, 7%);
-
-    // Gold
-    --gold: hsl(@gold-h, 100%, 50%);
-    --gold-lighter: hsl(@gold-h, 100%, 91%);
-    --gold-darker: hsl(@gold-h - 3, 100%, 20%);
-
-    // Silver
-    --silver: hsl(@silver-h, 6%, 72%);
-    --silver-lighter: hsl(@silver-h, 6%, 91%);
-    --silver-darker: hsl(@silver-h, 6%, 30%);
-
-    // Bronze
-    --bronze: hsl(@bronze-h, 38%, 65%);
-    --bronze-lighter: hsl(@bronze-h, 40%, 92%);
-    --bronze-darker: hsl(@bronze-h, 31%, 25%);
-
-    // Border colors
-    --bc-lightest: var(--black-400);
-    --bc-lighter: var(--black-400);
-    --bc-light: var(--black-400);
-    --bc-medium: var(--black-400);
-    --bc-dark: var(--black-700);
-    --bc-darker: var(--black-900);
-
-    // Font colors
-    --fc-dark: var(--black-900);
-    --fc-medium: var(--black-700);
-    --fc-light: var(--black-500);
-
-    // Focus rings
-    --focus-ring: fade(@blue-600, 90%);
-    --focus-ring-success: fade(@green-600, 90%);
-    --focus-ring-warning: fade(@yellow-600, 90%);
-    --focus-ring-error: fade(@red-600, 90%);
-    --focus-ring-muted: fade(@black-400, 95%);
-
-    // Opacity
-    --_o-disabled: 0.8;
-
-    // Shadows
-    --bs-sm: none;
-    --bs-md: none;
-    --bs-lg: none;
-    --bs-xl: none;
-
-    // Scrollbars
-    --scrollbar: var(--black);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
-    --highlight-color: var(--black-750);
-    --highlight-comment: hsl(213, 7%, 33%); // Custom black
-    --highlight-punctuation: var(--black-600);
-    --highlight-namespace: hsl(16, 94%, 31%); // Custom orange
-    --highlight-attribute: hsl(215, 100%, 35%); // Custom blue
-    --highlight-literal: hsl(16, 94%, 31%); // Custom orange
-    --highlight-symbol: hsl(309, 45%, 31%); // Custom purple
-    --highlight-keyword: hsl(215, 100%, 35%); // Custom blue
-    --highlight-variable: hsl(88, 100%, 19%); // Custom green
-    --highlight-addition: var(--green-500);
-    --highlight-deletion: var(--red-500);
-
-    // High contrast theme override
-    &:extend(.highcontrast-themed-colors);
-}
-
-.dark-highcontrast() {
-    --white: hsl(0, 0%, 0%);
-    --black: hsl(0, 0%, 100%);
-
-    // Black
-    --black-025: hsl(@black-h, @black-s, 2.5%);
-    --black-050: hsl(@black-h, @black-s, 5%);
-    --black-075: hsl(@black-h, @black-s, 7.5%);
-    --black-100: hsl(@black-h, @black-s, 10%);
-    --black-150: hsl(@black-h, @black-s, 12.5%);
-    --black-200: hsl(@black-h, @black-s, 15%);
-    --black-300: hsl(@black-h, @black-s, 65%);
-    --black-350: hsl(@black-h, @black-s, 67.5%);
-    --black-400: hsl(@black-h, @black-s, 70%);
-    --black-500: hsl(@black-h, @black-s, 75%);
-    --black-600: hsl(@black-h, @black-s, 80%);
-    --black-700: hsl(@black-h, @black-s, 85%);
-    --black-750: hsl(@black-h, @black-s, 90%);
-    --black-800: hsl(@black-h, @black-s, 95%);
-    --black-900: hsl(@black-h, @black-s, 100%);
-
-    // Orange
-    --orange-050: hsl(@orange-h, 100%, 7%);
-    --orange-100: hsl(@orange-h, 100%, 9%);
-    --orange-200: hsl(@orange-h, 100%, 15%);
-    --orange-300: hsl(@orange-h, 100%, 22%);
-    --orange-400: hsl(@orange-h, 100%, 64%);
-    --orange-500: hsl(@orange-h, 100%, 71%);
-    --orange-600: hsl(@orange-h, 100%, 77%);
-    --orange-700: hsl(@orange-h, 100%, 82%);
-    --orange-800: hsl(@orange-h, 100%, 87%);
-    --orange-900: hsl(@orange-h, 100%, 91%);
-
-    // Blue
-    --blue-050: hsl(@blue-h, 100%, 7%);
-    --blue-100: hsl(@blue-h, 100%, 11%);
-    --blue-200: hsl(@blue-h, 100%, 17%);
-    --blue-300: hsl(@blue-h, 100%, 24%);
-    --blue-400: hsl(@blue-h, 100%, 75%);
-    --blue-500: hsl(@blue-h, 100%, 80%);
-    --blue-600: hsl(@blue-h, 100%, 85%);
-    --blue-700: hsl(@blue-h, 100%, 90%);
-    --blue-800: hsl(@blue-h, 100%, 92.5%);
-    --blue-900: hsl(@blue-h, 100%, 95%);
-
-    // Powder
-    --powder-050: hsl(@powder-h, 100%, 7%);
-    --powder-100: hsl(@powder-h, 95%, 10%);
-    --powder-200: hsl(@powder-h, 80%, 14%);
-    --powder-300: hsl(@powder-h, 76%, 19%);
-    --powder-400: hsl(@powder-h, 55%, 72%);
-    --powder-500: hsl(@powder-h, 60%, 76%);
-    --powder-600: hsl(@powder-h, 70%, 80%);
-    --powder-700: hsl(@powder-h, 75%, 84%);
-    --powder-800: hsl(@powder-h, 75%, 88%);
-    --powder-900: hsl(@powder-h, 75%, 92%);
-
-    // Green
-    --green-025: hsl(@green-h, 100%, 5%);
-    --green-050: hsl(@green-h, 100%, 6%);
-    --green-100: hsl(@green-h, 100%, 7%);
-    --green-200: hsl(@green-h, 100%, 11%);
-    --green-300: hsl(@green-h, 100%, 15%);
-    --green-400: hsl(@green-h, 100%, 65%);
-    --green-500: hsl(@green-h, 100%, 71%);
-    --green-600: hsl(@green-h, 100%, 77%);
-    --green-700: hsl(@green-h, 100%, 83%);
-    --green-800: hsl(@green-h, 100%, 89%);
-    --green-900: hsl(@green-h, 100%, 94%);
-
-    // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 6%);
-    --yellow-100: hsl(@yellow-h, 100%, 9%);
-    --yellow-200: hsl(@yellow-h, 100%, 14%);
-    --yellow-300: hsl(@yellow-h, 100%, 20%);
-    --yellow-400: hsl(@yellow-h, 100%, 55%);
-    --yellow-500: hsl(@yellow-h, 100%, 63%);
-    --yellow-600: hsl(@yellow-h, 100%, 71%);
-    --yellow-700: hsl(@yellow-h, 100%, 79%);
-    --yellow-800: hsl(@yellow-h, 100%, 87%);
-    --yellow-900: hsl(@yellow-h, 100%, 95%);
-
-    // Red
-    --red-025: hsl(@red-h, 100%, 7%);
-    --red-050: hsl(@red-h, 100%, 9%);
-    --red-100: hsl(@red-h, 100%, 12%);
-    --red-200: hsl(@red-h, 100%, 17%);
-    --red-300: hsl(@red-h, 100%, 22%);
-    --red-400: hsl(@red-h, 100%, 70%);
-    --red-500: hsl(@red-h, 100%, 75%);
-    --red-600: hsl(@red-h, 100%, 80%);
-    --red-700: hsl(@red-h, 100%, 85%);
-    --red-800: hsl(@red-h, 100%, 90%);
-    --red-900: hsl(@red-h, 100%, 95%);
-
-    // Gold
-    --gold: hsl(@gold-h, 100%, 50%);
-    --gold-lighter: hsl(@gold-h - 3, 100%, 9%);
-    --gold-darker: hsl(@gold-h - 3, 100%, 80%);
-
-    // Silver
-    --silver: hsl(@silver-h, 6%, 72%);
-    --silver-lighter: hsl(@silver-h, 5%, 9%);
-    --silver-darker: hsl(@silver-h, 5%, 70%);
-
-    // Bronze
-    --bronze: hsl(@bronze-h, 38%, 65%);
-    --bronze-lighter: hsl(@bronze-h, 40%, 8%);
-    --bronze-darker: hsl(@bronze-h, 46.7%, 75%);
-
-    // Border colors
-    --bc-lightest: var(--black-400);
-    --bc-lighter: var(--black-400);
-    --bc-light: var(--black-400);
-    --bc-medium: var(--black-400);
-    --bc-dark: var(--black-700);
-    --bc-darker: var(--black-900);
-
-    // Focus rings
-    --focus-ring: fade(@blue-600, 90%);
-    --focus-ring-success: fade(@green-600, 90%);
-    --focus-ring-warning: fade(@yellow-600, 90%);
-    --focus-ring-error: fade(@red-600, 90%);
-    --focus-ring-muted: fade(@black-400, 95%);
-
-    // Font colors
-    --fc-dark: var(--black-900);
-    --fc-medium: var(--black-700);
-    --fc-light: var(--black-500);
-
-    // Opacity
-    --_o-disabled: 0.8;
-
-    // Shadows
-    --bs-sm: none;
-    --bs-md: none;
-    --bs-lg: none;
-    --bs-xl: none;
-
-    // Scrollbars
-    --scrollbar: var(--black);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 0%, 10%);
-    --highlight-color: hsl(0, 0%, 100%);
-    --highlight-comment: hsl(0, 0%, 99%); // Custom gray
-    --highlight-punctuation: hsl(0, 0%, 99%); // Custom gray
-    --highlight-namespace: hsl(36, 96%, 71%); // Custom orange
-    --highlight-attribute: hsl(200, 57%, 85%); // Custom blue
-    --highlight-literal: hsl(36, 96%, 71%); // Custom orange
-    --highlight-symbol: hsl(304, 39%, 85%); // Custom purple
-    --highlight-keyword: hsl(200, 57%, 85%); // Custom blue
-    --highlight-variable: hsl(62, 71%, 81%); // Custom green
-    --highlight-addition: var(--green-600);
-    --highlight-deletion: var(--red-700);
-
-    // High contrast theme override
-    &:extend(.highcontrast-themed-colors);
-}
-
-.highcontrast-themed-colors {
-    // Primary Theming
-    --theme-primary-color: var(--orange-400);
-    --theme-primary-025: var(--orange-050);
-    --theme-primary-050: var(--orange-050);
-    --theme-primary-075: var(--orange-050);
-    --theme-primary-100: var(--orange-100);
-    --theme-primary-150: var(--orange-100);
-    --theme-primary-200: var(--orange-200);
-    --theme-primary-300: var(--orange-300);
-    --theme-primary-350: var(--orange-300);
-    --theme-primary-400: var(--orange-400);
-    --theme-primary-500: var(--orange-500);
-    --theme-primary-600: var(--orange-600);
-    --theme-primary-700: var(--orange-700);
-    --theme-primary-800: var(--orange-800);
-    --theme-primary-900: var(--orange-900);
-
-    // Secondary Theming
-    --theme-secondary-color: var(--blue-400);
-    --theme-secondary-025: var(--blue-050);
-    --theme-secondary-050: var(--blue-050);
-    --theme-secondary-075: var(--blue-050);
-    --theme-secondary-100: var(--blue-100);
-    --theme-secondary-150: var(--blue-100);
-    --theme-secondary-200: var(--blue-200);
-    --theme-secondary-300: var(--blue-300);
-    --theme-secondary-350: var(--blue-300);
-    --theme-secondary-400: var(--blue-400);
-    --theme-secondary-500: var(--blue-500);
-    --theme-secondary-600: var(--blue-600);
-    --theme-secondary-700: var(--blue-700);
-    --theme-secondary-800: var(--blue-800);
-    --theme-secondary-900: var(--blue-900);
-}
-
-:root {
-    // specify the default colors in less, then deconstruct them
-    // this keeps the hsl/rgb variables below in sync, but consumers will need to set each variable separately
-    @defaultPrimaryColor: @orange;
-    @defaultSecondaryColor: @blue;
-    .generate-calculated-themed-variables(@defaultPrimaryColor, primary);
-    .generate-calculated-themed-variables(@defaultSecondaryColor, secondary);
-}
-
-// place component-colors on the body directly (instead of :root) so consumers can use the --theme-* variables
-
-// Light mode
-body:not(.theme-dark),
-body.theme-dark .theme-light__forced,
-body.theme-system .theme-light__forced {
-    .light-colors();
-
-    &,
-    & .themed {
-        color: var(--theme-body-font-color);
-        .generate-themed-variables(theme-light);
-        // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
-        .light-themed-colors();
-        &:extend(.component-colors);
-    }
-}
-
-// Dark mode
-body.theme-dark,
-body:not(.theme-dark) .theme-dark__forced {
-    .theme-dark-rules();
-}
-body.theme-system {
-    @media (prefers-color-scheme: dark) {
-        .theme-dark-rules();
-    }
-}
-
-// High contrast mode (Light)
-body.theme-highcontrast:not(.theme-dark),
-body.theme-dark.theme-highcontrast .theme-light__forced,
-body.theme-system.theme-highcontrast .theme-light__forced {
-    .light-highcontrast();
-}
-
-// High contrast mode (Dark)
-body.theme-dark.theme-highcontrast,
-body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
-    .dark-highcontrast();
-}
-body.theme-system.theme-highcontrast {
-    @media (prefers-color-scheme: dark) {
-        .dark-highcontrast();
-    }
-}