@stackoverflow/stacks 0.70.0 → 0.73.1

package/lib/css/exports/_stacks-constants-colors.less

@@ -143,23 +143,15 @@
 @bronze-lighter: hsl(@bronze-h, 40%, 92%);
 @bronze-darker: hsl(@bronze-h, 31%, 52%);
 
-//  $  RINGS
-//  ----------------------------------------------------------------------------
-@focus-ring: fade(@blue-500, 15%);
-@focus-ring-success: fade(@green-200, 40%);
-@focus-ring-warning: fade(@yellow-400, 40%);
-@focus-ring-error: fade(@red-600, 15%);
-@focus-ring-muted: fade(@black-800, 10%);
-
 //  $  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-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: hsla(0, 0, 0, 0.2);
+@scrollbar: hsla(0, 0%, 0%, 0.2);
 
 //  ============================================================================
 //  $   CSS Variable Colors
@@ -201,7 +193,7 @@
     --theme-secondary-color-b: var(~"--@{theme}-secondary-color-b", var(--theme-base-secondary-color-b));
 }
 
-.component-colors() {
+.component-colors {
     --theme-body-font-color: var(--black-800);
 
     // Links
@@ -219,9 +211,9 @@
     --theme-button-selected-background-color: var(--theme-secondary-150);
 
     //  Button Primary
-    --theme-button-primary-color: @white;
+    --theme-button-primary-color: var(--white);
     --theme-button-primary-background-color: var(--theme-secondary-400);
-    --theme-button-primary-hover-color: @white;
+    --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);
@@ -243,6 +235,40 @@
     // 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: @su48;
+    --theme-topbar-background-color: var(--black-025);
+
+    // Topbar Search input
+    --theme-topbar-search-color: var(--black-700);
+    --theme-topbar-search-background: var(--white);
+    --theme-topbar-search-placeholder: var(--black-200);
+    --theme-topbar-search-border: var(--black-200);
+    --theme-topbar-search-border-focus: var(--blue-300);
+    --theme-topbar-search-shadow-focus: 0 0 0 @su4 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);
 }
 
 //  --  Light mode
@@ -361,16 +387,24 @@
     --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: @focus-ring-success;
-    --focus-ring-warning: @focus-ring-warning;
-    --focus-ring-error: @focus-ring-error;
-    --focus-ring-muted: @focus-ring-muted;
+    --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%);
 
     // Shadows
     --bs-sm: @bs-sm;
@@ -378,11 +412,11 @@
     --bs-lg: @bs-lg;
 
     // Scrollbars
-    --scrollbar: @scrollbar;
+    --scrollbar: hsla(0, 0, 0, 0.2);
 
     // Syntax highlighting
     --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
-    --highlight-color: @black-750; // AAA 11.78
+    --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
@@ -391,8 +425,8 @@
     --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
+    --highlight-addition: var(--green-700); // AA 5.59
+    --highlight-deletion: var(--red-600); // AA 5.31
 }
 
 .light-themed-colors() {
@@ -551,28 +585,36 @@
     --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: 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%);
+    --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%);
 
     // 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-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: hsla(0, 0%, 100%, 0.2);
 
     // Syntax highlighting
     --highlight-bg: hsl(0, 2%, 11%);
-    --highlight-color: @white; // AAA 17.19
+    --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
@@ -643,10 +685,357 @@
     }
 
     & .themed {
-        .component-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%, 97.5%);
+    --orange-100: hsl(@orange-h, 100%, 94%);
+    --orange-200: hsl(@orange-h, 100%, 88%);
+    --orange-300: hsl(@orange-h, 100%, 82%);
+    --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%, 97.5%);
+    --blue-100: hsl(@blue-h, 100%, 95%);
+    --blue-200: hsl(@blue-h, 100%, 90%);
+    --blue-300: hsl(@blue-h, 100%, 85%);
+    --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%, 97.5%);
+    --powder-100: hsl(@powder-h, 85%, 96%);
+    --powder-200: hsl(@powder-h, 75%, 92%);
+    --powder-300: hsl(@powder-h, 70%, 88%);
+    --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%, 97%);
+    --green-050: hsl(@green-h, 100%, 96%);
+    --green-100: hsl(@green-h, 100%, 94%);
+    --green-200: hsl(@green-h, 100%, 88%);
+    --green-300: hsl(@green-h, 100%, 82%);
+    --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%, 95%);
+    --yellow-100: hsl(@yellow-h, 100%, 92%);
+    --yellow-200: hsl(@yellow-h, 95%, 85%);
+    --yellow-300: hsl(@yellow-h, 95%, 78%);
+    --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-050: hsl(@red-h, 100%, 97.5%);
+    --red-100: hsl(@red-h, 100%, 95%);
+    --red-200: hsl(@red-h, 100%, 90%);
+    --red-300: hsl(@red-h, 100%, 85%);
+    --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%);
+
+    // Shadows
+    --bs-sm: none;
+    --bs-md: none;
+    --bs-lg: 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%, 4%);
+    --orange-100: hsl(@orange-h, 100%, 8%);
+    --orange-200: hsl(@orange-h, 100%, 16%);
+    --orange-300: hsl(@orange-h, 100%, 24%);
+    --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%, 4%);
+    --blue-100: hsl(@blue-h, 100%, 11%);
+    --blue-200: hsl(@blue-h, 100%, 18%);
+    --blue-300: hsl(@blue-h, 100%, 25%);
+    --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%, 6%);
+    --powder-100: hsl(@powder-h, 90%, 8%);
+    --powder-200: hsl(@powder-h, 80%, 14%);
+    --powder-300: hsl(@powder-h, 60%, 20%);
+    --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%, 3%);
+    --green-050: hsl(@green-h, 100%, 4%);
+    --green-100: hsl(@green-h, 100%, 6%);
+    --green-200: hsl(@green-h, 100%, 12%);
+    --green-300: hsl(@green-h, 100%, 18%);
+    --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%, 4%);
+    --yellow-100: hsl(@yellow-h, 100%, 8%);
+    --yellow-200: hsl(@yellow-h, 95%, 16%);
+    --yellow-300: hsl(@yellow-h, 95%, 24%);
+    --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-050: hsl(@red-h, 100%, 4%);
+    --red-100: hsl(@red-h, 100%, 8%);
+    --red-200: hsl(@red-h, 100%, 16%);
+    --red-300: hsl(@red-h, 100%, 24%);
+    --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);
+
+    // Shadows
+    --bs-sm: none;
+    --bs-md: none;
+    --bs-lg: 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
@@ -658,9 +1047,10 @@
 
 // place component-colors on the body directly (instead of :root) so consumers can use the --theme-* variables
 body {
-    .component-colors();
+    &:extend(.component-colors);
 }
 
+// Light mode
 body:not(.theme-dark),
 body.theme-dark .theme-light__forced,
 body.theme-system .theme-light__forced {
@@ -674,17 +1064,35 @@ body.theme-system .theme-light__forced {
     }
 
     & .themed {
-        .component-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();
+    }
+}

package/lib/css/exports/_stacks-constants-helpers.less

@@ -52,6 +52,7 @@
 //  ============================================================================
 //  $  SPACING UNITS (su-)
 //  ----------------------------------------------------------------------------
+@su1:                   1px;
 @su2:                   2px;
 @su4:                   4px;
 @su6:                   6px;
@@ -126,14 +127,12 @@
     // Hide focus styles if they're not needed, for example,
     // when an element receives focus via the mouse.
     &:focus:not(:focus-visible) {
-        color: inherit;
         outline: none;
         box-shadow: none;
     }
 
     // Show focus styles on keyboard focus.
     &:focus-visible {
-        color: inherit;
         outline: none;
         box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
     }

package/lib/css/exports/_stacks-mixins.less

@@ -44,6 +44,32 @@
     }
 }
 
+//  ===========================================================================
+//  --  HIGHCONTRAST
+//      .highcontrast-mode renders a high contrast mode override for .theme-highcontrast
+//
+//      Usage example:
+//
+//      .highcontrast-mode({ background-color: var(--black-100); });
+//
+//  ---------------------------------------------------------------------------
+
+.highcontrast-mode(@rules) {
+    body.theme-highcontrast & {
+        @rules();
+    }
+}
+
+.highcontrast-dark-mode(@rules) {
+    body.theme-highcontrast.theme-system & {
+        @media (prefers-color-scheme: dark) {
+            @rules();
+        }
+    }
+    body.theme-highcontrast.theme-dark & {
+        @rules();
+    }
+}
 
 //  ===========================================================================
 //  --  APPEARANCE

package/lib/css/stacks-dynamic.less

@@ -22,7 +22,6 @@
 @import "components/_stacks-buttons.less";
 @import "components/_stacks-links.less";
 @import "components/_stacks-link-previews.less";
-@import "components/_stacks-navigation.less";
 @import "components/_stacks-notices.less";
 @import "components/_stacks-tags.less";
 @import "components/_stacks-pagination.less";

package/lib/css/stacks-static.less

@@ -29,6 +29,7 @@
 @import "components/_stacks-inputs.less";
 @import "components/_stacks-menu.less";
 @import "components/_stacks-modals.less";
+@import "components/_stacks-navigation.less";
 @import "components/_stacks-page-titles.less";
 @import "components/_stacks-popovers.less";
 @import "components/_stacks-post-summary.less";
@@ -37,6 +38,7 @@
 @import "components/_stacks-spinner.less";
 @import "components/_stacks-tables.less";
 @import "components/_stacks-toggle-switches.less";
+@import "components/_stacks-topbar.less";
 @import "components/_stacks-uploader.less";
 @import "components/_stacks-user-cards.less";
 @import "components/_stacks-widget-static.less";
@@ -64,6 +66,19 @@
 #stacks-internals #screen-sm({
     #stacks-internals-collect-small();
 });
+
+// We need printing styles to be last so they can override all other styles.
+.print\:d-block {
+    @media print {
+        display: block !important;
+    }
+}
+
+.print\:d-none {
+    @media print {
+        display: none !important;
+    }
+}
 /* stylelint-enable */
 
 //  --  CONFIG