@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

package/lib/exports/color-sets.less

@@ -0,0 +1,620 @@
+/* stylelint-disable property-no-unknown */
+
+// White
+.set-white() {
+    default: hsl(0, 0%, 100%); // matches .set-black()[050]
+}
+.set-white-dark() {
+    default: hsl(220, 3%, 15%); // matches .set-black-dark()[050]
+}
+.set-white-hc() {
+    default: hsl(0, 0%, 100%); // matches .set-black-hc()[050]
+}
+.set-white-hc-dark() {
+    default: hsl(0, 0%, 0%); // matches .set-black-dark-hc()[050]
+}
+
+// Black
+.set-black() {
+    050: hsl(0, 0%, 100%); // renders as white
+    100: hsl(210, 8%, 98%);
+    150: hsl(210, 8%, 95%);
+    200: hsl(210, 8%, 90%);
+    225: hsl(210, 8%, 85%);
+    250: hsl(210, 8%, 80%);
+    300: hsl(213, 9%, 75%);
+    350: hsl(212, 8%, 68%);
+    400: hsl(210, 8%, 45%);
+    500: hsl(210, 8%, 25%);
+    600: hsl(210, 8%, 5%);
+    default: hsl(0, 8%, 5%); // black, no stop // TODO verify the value w/ design
+}
+.set-black-dark() {
+    050: hsl(220, 3%, 15%);
+    100: hsl(220, 3%, 18%);
+    150: hsl(230, 4%, 21%);
+    200: hsl(233, 4%, 27%);
+    225: hsl(233, 4%, 30%);
+    250: hsl(235, 5%, 36%);
+    300: hsl(233, 4%, 47%);
+    350: hsl(219, 10%, 60%);
+    400: hsl(220, 10%, 74%);
+    500: hsl(220, 10%, 83%);
+    600: hsl(180, 11%, 98%);
+    default: hsl(0, 0%, 100%); // white, no stop // TODO verify the value w/ design
+}
+.set-black-hc() {
+    050: hsl(0, 0%, 100%); // renders as white
+    100: hsl(210, 8%, 98%);
+    150: hsl(210, 8%, 95%);
+    200: hsl(210, 8%, 90%);
+    225: hsl(210, 8%, 85%);
+    250: hsl(210, 8%, 80%);
+    300: hsl(213, 9%, 75%);
+    350: hsl(210, 8%, 45%);
+    400: hsl(210, 8%, 45%);
+    500: hsl(210, 8%, 25%);
+    600: hsl(210, 8%, 5%);
+    default: hsl(0, 8%, 5%); // black, no stop // TODO verify the value w/ design
+}
+
+.set-black-hc-dark() {
+    050: hsl(220, 3%, 15%);
+    100: hsl(220, 3%, 18%);
+    150: hsl(230, 4%, 21%);
+    200: hsl(233, 4%, 27%);
+    225: hsl(233, 4%, 30%);
+    250: hsl(235, 5%, 36%);
+    300: hsl(233, 4%, 47%);
+    350: hsl(220, 10%, 74%);
+    400: hsl(220, 10%, 74%);
+    500: hsl(220, 10%, 83%);
+    600: hsl(180, 11%, 98%);
+    default: hsl(0, 0%, 100%); // white, no stop // TODO verify the value w/ design
+}
+
+// Orange
+.set-orange() {
+    100: hsl(23, 85%, 97%);
+    200: hsl(27, 85%, 87%);
+    300: hsl(27, 85%, 72%);
+    400: hsl(27, 90%, 55%);
+    500: hsl(27, 88%, 43%);
+    600: hsl(27, 80%, 29%);
+}
+.set-orange-dark() {
+    100: hsl(27, 29%, 19%);
+    200: hsl(27, 43%, 31%);
+    300: hsl(27, 43%, 47%);
+    400: hsl(27, 80%, 64%);
+    500: hsl(27, 80%, 78%);
+    600: hsl(27, 80%, 89%);
+}
+.set-orange-hc() {
+    100: hsl(22, 85%, 97%);
+    200: hsl(22, 85%, 97%);
+    300: hsl(27, 90%, 55%);
+    400: hsl(27, 90%, 55%);
+    500: hsl(27, 80%, 29%);
+    600: hsl(27, 80%, 29%);
+}
+.set-orange-hc-dark() {
+    100: hsl(27, 29%, 19%);
+    200: hsl(27, 29%, 19%);
+    300: hsl(27, 80%, 64%);
+    400: hsl(27, 80%, 64%);
+    500: hsl(27, 79%, 89%);
+    600: hsl(27, 79%, 89%);
+}
+
+// Blue
+.set-blue() {
+    100: hsl(210, 80%, 96%);
+    200: hsl(210, 80%, 91%);
+    300: hsl(210, 78%, 76%);
+    400: hsl(210, 70%, 48%);
+    500: hsl(210, 75%, 36%);
+    600: hsl(210, 80%, 23%);
+}
+.set-blue-dark() {
+    100: hsl(209, 29%, 19%);
+    200: hsl(210, 29%, 35%);
+    300: hsl(210, 29%, 50%);
+    400: hsl(210, 81%, 72%);
+    500: hsl(210, 80%, 82%);
+    600: hsl(210, 80%, 90%);
+}
+.set-blue-hc() {
+    100: hsl(210, 80%, 96%);
+    200: hsl(210, 80%, 96%);
+    300: hsl(210, 70%, 48%);
+    400: hsl(210, 70%, 48%);
+    500: hsl(210, 80%, 23%);
+    600: hsl(210, 80%, 23%);
+}
+.set-blue-hc-dark() {
+    100: hsl(209, 29%, 19%);
+    200: hsl(209, 29%, 19%);
+    300: hsl(210, 80%, 72%);
+    400: hsl(210, 80%, 72%);
+    500: hsl(209, 79%, 87%);
+    600: hsl(209, 79%, 87%);
+}
+
+// Green
+.set-green() {
+    100: hsl(148, 35%, 95%);
+    200: hsl(148, 35%, 88%);
+    300: hsl(148, 35%, 69%);
+    400: hsl(148, 70%, 31%);
+    500: hsl(148, 75%, 22%);
+    600: hsl(148, 75%, 15%);
+}
+.set-green-dark() {
+    100: hsl(148, 29%, 19%);
+    200: hsl(148, 29%, 27%);
+    300: hsl(148, 25%, 40%);
+    400: hsl(148, 40%, 62%);
+    500: hsl(148, 40%, 75%);
+    600: hsl(148, 40%, 87%);
+}
+.set-green-hc() {
+    100: hsl(147, 36%, 95%);
+    200: hsl(147, 36%, 95%);
+    300: hsl(148, 70%, 31%);
+    400: hsl(148, 70%, 31%);
+    500: hsl(147, 74%, 15%);
+    600: hsl(147, 74%, 15%);
+}
+.set-green-hc-dark() {
+    100: hsl(147, 29%, 19%);
+    200: hsl(147, 29%, 19%);
+    300: hsl(148, 40%, 62%);
+    400: hsl(148, 40%, 62%);
+    500: hsl(148, 39%, 87%);
+    600: hsl(148, 39%, 87%);
+}
+
+// Red
+.set-red() {
+    100: hsl(0, 78%, 96%);
+    200: hsl(0, 70%, 93%);
+    300: hsl(0, 65%, 76%);
+    400: hsl(0, 60%, 49%);
+    500: hsl(0, 65%, 37%);
+    600: hsl(0, 65%, 24%);
+}
+.set-red-dark() {
+    100: hsl(358, 29%, 19%);
+    200: hsl(0, 29%, 37%);
+    300: hsl(0, 34%, 54%);
+    400: hsl(0, 75%, 77%);
+    500: hsl(0, 69%, 85%);
+    600: hsl(0, 69%, 93%);
+}
+.set-red-hc() {
+    100: hsl(0, 79%, 96%);
+    200: hsl(0, 79%, 96%);
+    300: hsl(0, 60%, 49%);
+    400: hsl(0, 60%, 49%);
+    500: hsl(0, 66%, 24%);
+    600: hsl(0, 66%, 24%);
+}
+.set-red-hc-dark() {
+    100: hsl(358, 29%, 19%);
+    200: hsl(358, 29%, 19%);
+    300: hsl(0, 75%, 77%);
+    400: hsl(0, 75%, 77%);
+    500: hsl(0, 70%, 92%);
+    600: hsl(0, 70%, 92%);
+}
+
+// Yellow
+.set-yellow() {
+    100: hsl(43, 80%, 96%);
+    200: hsl(43, 80%, 88%);
+    300: hsl(43, 85%, 72%);
+    400: hsl(43, 85%, 50%);
+    500: hsl(43, 85%, 33%);
+    600: hsl(43, 84%, 18%);
+}
+.set-yellow-dark() {
+    100: hsl(43, 29%, 17%);
+    200: hsl(43, 29%, 25%);
+    300: hsl(43, 29%, 40%);
+    400: hsl(43, 59%, 64%);
+    500: hsl(43, 65%, 70%);
+    600: hsl(43, 65%, 85%);
+}
+.set-yellow-hc() {
+    100: hsl(41, 80%, 96%);
+    200: hsl(41, 80%, 96%);
+    300: hsl(43, 85%, 50%);
+    400: hsl(43, 85%, 50%);
+    500: hsl(48, 85%, 18%);
+    600: hsl(48, 85%, 18%);
+}
+.set-yellow-hc-dark() {
+    100: hsl(43, 29%, 17%);
+    200: hsl(43, 29%, 17%);
+    300: hsl(43, 59%, 64%);
+    400: hsl(43, 59%, 64%);
+    500: hsl(48, 74%, 91%);
+    600: hsl(48, 74%, 91%);
+}
+
+// gold
+.set-gold() {
+    100: hsl(46, 100%, 91%);
+    200: hsl(46, 100%, 74%);
+    300: hsl(45, 100%, 42%);
+    400: hsl(46, 92%, 26%);
+}
+.set-gold-dark() {
+    100: hsl(45, 29%, 24%);
+    200: hsl(45, 47%, 37%);
+    300: hsl(45, 92%, 62%);
+    400: hsl(46, 93%, 78%);
+}
+.set-gold-hc() {
+    100: hsl(46, 100%, 91%);
+    200: hsl(46, 100%, 91%);
+    300: hsl(45, 100%, 42%);
+    400: hsl(46, 92%, 26%);
+}
+.set-gold-hc-dark() {
+    100: hsl(45, 22%, 25%);
+    200: hsl(45, 22%, 25%);
+    300: hsl(45, 92%, 62%);
+    400: hsl(46, 93%, 78%);
+}
+
+// silver
+.set-silver() {
+    100: hsl(0, 0%, 95%);
+    200: hsl(0, 0%, 84%);
+    300: hsl(210, 5%, 68%);
+    400: hsl(210, 2%, 40%);
+}
+.set-silver-dark() {
+    100: hsl(220, 2%, 26%);
+    200: hsl(220, 1%, 46%);
+    300: hsl(216, 4%, 69%);
+    400: hsl(214, 8%, 83%);
+}
+.set-silver-hc() {
+    100: hsl(0, 0%, 95%);
+    200: hsl(0, 0%, 84%);
+    300: hsl(210, 5%, 68%);
+    400: hsl(216, 2%, 40%);
+}
+.set-silver-hc-dark() {
+    100: hsl(220, 2%, 26%);
+    200: hsl(220, 2%, 26%);
+    300: hsl(216, 4%, 69%);
+    400: hsl(214, 8%, 83%);
+}
+
+// bronze
+.set-bronze() {
+    100: hsl(28, 40%, 92%);
+    200: hsl(30, 47%, 83%);
+    300: hsl(28, 43%, 65%);
+    400: hsl(28, 43%, 39%);
+}
+.set-bronze-dark() {
+    100: hsl(28, 13%, 27%);
+    200: hsl(28, 27%, 45%);
+    300: hsl(28, 58%, 67%);
+    400: hsl(28, 59%, 83%);
+}
+.set-bronze-hc() {
+    100: hsl(28, 40%, 92%);
+    200: hsl(28, 40%, 92%);
+    300: hsl(28, 43%, 65%);
+    400: hsl(28, 43%, 39%);
+}
+.set-bronze-hc-dark() {
+    100: hsl(28, 13%, 27%);
+    200: hsl(28, 13%, 27%);
+    300: hsl(28, 58%, 67%);
+    400: hsl(28, 59%, 83%);
+}
+
+// UTILITY SETS
+// common aliases - applies to border-color and background
+.set-utility-alias() {
+    error: var(--red-400);
+    danger: var(--red-400);
+    success: var(--green-400);
+    warning: var(--yellow-500);
+}
+
+// border color
+.set-bc() {
+    lightest: var(--black-100);
+    lighter: var(--black-150);
+    light: var(--black-200);
+    medium: var(--black-225);
+    dark: var(--black-250);
+    darker: var(--black-300);
+}
+.set-bc-hc() {
+    lightest: var(--black-400);
+    lighter: var(--black-400);
+    light: var(--black-400);
+    medium: var(--black-400);
+    dark: var(--black-500);
+    darker: var(--black-600);
+}
+
+// box-shadow
+.set-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);
+    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);
+    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);
+    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);
+}
+.set-bs-dark() {
+    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);
+    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);
+    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);
+    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);
+}
+.set-bs-hc() {
+    sm: none;
+    md: none;
+    lg: none;
+    xl: none;
+}
+.set-bs-hc-dark() {
+    sm: none;
+    md: none;
+    lg: none;
+    xl: none;
+}
+
+// font color
+.set-fc() {
+    light: var(--black-400);
+    medium: var(--black-500);
+    dark: var(--black-600);
+    error: var(--red-400);
+    danger: var(--red-400);
+    success: var(--green-500);
+    warning: var(--yellow-500);
+}
+
+// focus (sets represents both light and dark mode)
+.set-focus() {
+    default: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
+    success: hsla(140, 40%, 75%, 0.4);
+    warning: hsla(47, 79%, 58%, 0.4);
+    error: hsla(358, 62%, 47%, 0.15);
+    muted: hsla(210, 8%, 15%, 0.1);
+}
+.set-focus-dark() {
+    default: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
+    success: hsla(140, 40%, 75%, 0.4);
+    warning: hsla(47, 79%, 58%, 0.4);
+    error: hsla(358, 62%, 47%, 0.15);
+    muted: hsla(210, 8%, 15%, 0.1);
+}
+.set-focus-hc() {
+    default: hsla(206, 100%, 40%, 0.9);
+    success: hsla(140, 40%, 40%, 0.9);
+    warning: hsla(47, 76%, 46%, 0.9);
+    error: hsla(358, 62%, 47%, 0.9);
+    muted: hsla(210, 8%, 55%, 0.95);
+}
+
+// highlight
+// TODO consult with design to potentially map static colors to new colors variables
+.set-highlight() {
+    addition: var(--green-500);
+    attribute: hsl(206, 98.5%, 29%);
+    bg: var(--black-100);
+    color: var(--black-600);
+    comment: hsl(210, 8%, 43.5%);
+    deletion: var(--red-500);
+    keyword: hsl(206, 98.5%, 29%);
+    literal: hsl(27, 99%, 36%);
+    namespace: hsl(27, 99%, 36%);
+    punctuation: var(--black-500);
+    symbol: hsl(306, 43%, 35%);
+    variable: hsl(80, 80.5%, 26.5%);
+}
+.set-highlight-dark() {
+    addition: var(--green-500);
+    attribute: hsl(207, 41.5%, 67%);
+    bg: hsl(0, 2%, 11%);
+    color: var(--black);
+    comment: hsl(0, 0%, 60%);
+    deletion: var(--red-500);
+    keyword: hsl(208, 41.5%, 67%);
+    literal: hsl(27, 85%, 61.5%);
+    namespace: hsl(27, 85%, 61.5%);
+    punctuation: hsl(0, 0%, 80%);
+    symbol: hsl(306, 43%, 69%);
+    variable: hsl(65.5, 39%, 57.5%);
+}
+.set-highlight-hc() {
+    addition: var(--green-500);
+    attribute: hsl(215, 100%, 35%);
+    bg: hsl(0, 0%, 96.5%);
+    color: var(--black-600);
+    comment: hsl(213, 7%, 33%);
+    deletion: var(--red-400);
+    keyword: hsl(215, 100%, 35%);
+    literal: hsl(16, 94%, 31%);
+    namespace: hsl(16, 94%, 31%);
+    punctuation: var(--black-500);
+    symbol: hsl(309, 45%, 31%);
+    variable: hsl(88, 100%, 19%);
+}
+.set-highlight-hc-dark() {
+    addition: var(--green-500);
+    attribute: hsl(200, 57%, 85%);
+    bg: hsl(0, 0%, 10%);
+    color: hsl(0, 0%, 100%);
+    comment: hsl(0, 0%, 99%);
+    deletion: var(--red-500);
+    keyword: hsl(200, 57%, 85%);
+    literal: hsl(36, 96%, 71%);
+    namespace: hsl(36, 96%, 71%);
+    punctuation: hsl(0, 0%, 99%);
+    symbol: hsl(304, 39%, 85%);
+    variable: hsl(62, 71%, 81%);
+}
+
+// Scrollbar (sets represents both light and dark mode)
+.set-scrollbar() {
+    default: hsla(0, 0%, 0%, 0.2);
+}
+.set-scrollbar-hc() {
+    default: var(--black);
+}
+
+// Color sets
+.sets-mode() {
+    light: .sets-light();
+    light-highcontrast: .sets-light-hc();
+    dark: .sets-dark();
+    dark-highcontrast: .sets-dark-hc();
+}
+
+.sets-light() {
+    white: .set-white();
+    black: .set-black();
+    orange: .set-orange();
+    blue: .set-blue();
+    green: .set-green();
+    red: .set-red();
+    yellow: .set-yellow();
+    gold: .set-gold();
+    silver: .set-silver();
+    bronze: .set-bronze();
+}
+
+.sets-dark() {
+    white: .set-white-dark();
+    black: .set-black-dark();
+    orange: .set-orange-dark();
+    blue: .set-blue-dark();
+    green: .set-green-dark();
+    red: .set-red-dark();
+    yellow: .set-yellow-dark();
+    gold: .set-gold-dark();
+    silver: .set-silver-dark();
+    bronze: .set-bronze-dark();
+}
+
+.sets-light-hc() {
+    white: .set-white-hc();
+    black: .set-black-hc();
+    orange: .set-orange-hc();
+    blue: .set-blue-hc();
+    green: .set-green-hc();
+    red: .set-red-hc();
+    yellow: .set-yellow-hc();
+    gold: .set-gold-hc();
+    silver: .set-silver-hc();
+    bronze: .set-bronze-hc();
+}
+
+.sets-dark-hc() {
+    white: .set-white-hc-dark();
+    black: .set-black-hc-dark();
+    orange: .set-orange-hc-dark();
+    blue: .set-blue-hc-dark();
+    green: .set-green-hc-dark();
+    red: .set-red-hc-dark();
+    yellow: .set-yellow-hc-dark();
+    gold: .set-gold-hc-dark();
+    silver: .set-silver-hc-dark();
+    bronze: .set-bronze-hc-dark();
+}
+
+// Utitly sets for variable generation
+.sets-aliased-utility-variables() {
+    bg: .set-utility-alias();
+    bc: .set-utility-alias();
+    fc: .set-fc();
+}
+
+// Utility sets
+.sets-utility-mode() {
+    light: .sets-utility();
+    light-highcontrast: .sets-utility-hc();
+    dark: .sets-utility-dark();
+    dark-highcontrast: .sets-utility-dark-hc();
+}
+
+.sets-utility() {
+    bc: .set-bc();
+    bs: .set-bs();
+    focus-ring: .set-focus();
+    highlight: .set-highlight();
+    scrollbar: .set-scrollbar();
+}
+
+.sets-utility-dark() {
+    bc: .set-bc();
+    bs: .set-bs-dark();
+    focus-ring: .set-focus-dark();
+    highlight: .set-highlight-dark();
+    scrollbar: .set-scrollbar();
+}
+
+.sets-utility-hc() {
+    bc: .set-bc-hc();
+    bs: .set-bs-hc();
+    focus-ring: .set-focus-hc();
+    highlight: .set-highlight-hc();
+    scrollbar: .set-scrollbar-hc();
+}
+
+.sets-utility-dark-hc() {
+    bc: .set-bc-hc();
+    bs: .set-bs-hc-dark();
+    focus-ring: .set-focus-hc();
+    highlight: .set-highlight-hc-dark();
+    scrollbar: .set-scrollbar-hc();
+}
+
+// Theme values
+// TODO update to use custom theme colors with orange/blue as fallbacks
+.set-theme-primary-default() {
+    default: var(--orange-400);
+    100: var(--orange-100);
+    200: var(--orange-200);
+    300: var(--orange-300);
+    400: var(--orange-400);
+    500: var(--orange-500);
+    600: var(--orange-600);
+}
+
+.set-theme-secondary-default() {
+    default: var(--blue-400);
+    100: var(--blue-100);
+    200: var(--blue-200);
+    300: var(--blue-300);
+    400: var(--blue-400);
+    500: var(--blue-500);
+    600: var(--blue-600);
+}
+
+.sets-theme-default() {
+    theme-primary: .set-theme-primary-default();
+    theme-secondary: .set-theme-secondary-default();
+}
+
+.theme-light-default() {
+    primary: .set-orange()[400]; // orange-400 (light)
+    secondary: .set-blue()[400]; // blue-400 (light)
+}
+
+.theme-dark-default() {
+    primary: .set-orange-dark()[400]; // orange-400 (dark)
+    secondary: .set-blue-dark()[400]; // blue-400 (dark)
+}

package/lib/exports/color.less

@@ -0,0 +1,57 @@
+@import (reference) "./color-mixins.less";
+
+body {
+    --_o-disabled: 0.5;
+    --_o-disabled-static: 0.5;
+    --_black-static: .set-black()[default];
+    --_white-static: .set-white()[default];
+    // Create aliased utility variables
+    .create-colors(.sets-aliased-utility-variables());
+    .theme-variables();
+
+    &,
+    &.themed,
+    & .themed {
+        color: var(--theme-body-font-color, var(--black-600));
+    }
+}
+
+// Light, dark mode
+body:not(.theme-highcontrast) {
+    // Light mode
+    &:not(.theme-dark),
+    &.theme-dark .theme-light__forced,
+    &.theme-system .theme-light__forced {
+        .generate-colors(light);
+    }
+    // Dark mode
+    &.theme-dark,
+    &:not(.theme-dark) .theme-dark__forced {
+        .generate-colors(dark);
+    }
+    &.theme-system {
+        @media (prefers-color-scheme: dark) {
+            .generate-colors(dark);
+        }
+    }
+}
+
+// High contrast mode
+body.theme-highcontrast {
+    // Light high contrast mode
+    &:not(.theme-dark),
+    &.theme-dark .theme-light__forced,
+    &.theme-system .theme-light__forced {
+        .generate-colors(light-highcontrast);
+    }
+    // Dark high contrast mode
+    &.theme-dark,
+    &:not(.theme-dark) .theme-dark__forced {
+        .generate-colors(dark-highcontrast);
+    }
+    &.theme-system {
+        @media (prefers-color-scheme: dark) {
+            .generate-colors(dark-highcontrast);
+        }
+    }
+}

package/lib/exports/color.less.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../test/less-test-utils";
+
+describe("colors", () => {
+    it("should output all the css generated by the v2 colors/theming generation mixins", async () => {
+        const css = await renderLess(`
+            @import "./lib/exports/color.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/exports/exports.less

@@ -11,5 +11,6 @@
 //  ============================================================================
 @import "constants-type.less";            // Type styles, sizes, and line-heights
 @import "constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
-@import "constants-colors.less";          // Colors
+@import "v1/constants-colors.less";       // Colors v1 (deprecated)
+@import "color.less";                    // Colors v2
 @import "mixins.less";