@stackoverflow/stacks 2.6.0 → 2.7.0

package/lib/exports/color-sets.less

@@ -1,711 +1,711 @@
-/* stylelint-disable property-no-unknown */
-
-// For colors to render properly, you *cannot* have inline comments following a color value
-// The color *and comments* will be passed as the value for the given key and
-// it will fail silently in Stacks' build but might break consumer's builds
-//
-// For example, the value of this:
-//  default: hsl(0, 0%, 100%); // test comment
-// Will render as this:
-//  hsl(0, 0%, 100%); // test comment
-//
-// tl;dr: don't put inline after values in this file
-
-// White
-.set-white() {
-    default: hsl(0, 0%, 100%);
-}
-.set-white-dark() {
-    default: hsl(210, 3%, 15%);
-}
-.set-white-hc() {
-    default: hsl(0, 0%, 100%);
-}
-.set-white-hc-dark() {
-    default: hsl(0, 0%, 0%);
-}
-
-// Black
-.set-black() {
-    050: hsl(0, 0%, 100%);
-    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(210, 9%, 75%);
-    350: hsl(210, 8%, 68%);
-    400: hsl(210, 8%, 42%);
-    500: hsl(210, 8%, 25%);
-    600: hsl(210, 8%, 5%);
-    default: hsl(0, 0%, 0%);
-}
-.set-black-dark() {
-    050: hsl(210, 3%, 15%);
-    100: hsl(210, 3%, 18%);
-    150: hsl(210, 4%, 21%);
-    200: hsl(210, 4%, 27%);
-    225: hsl(210, 4%, 30%);
-    250: hsl(210, 5%, 36%);
-    300: hsl(210, 4%, 47%);
-    350: hsl(210, 8%, 70%);
-    400: hsl(210, 8%, 80%);
-    500: hsl(210, 8%, 90%);
-    600: hsl(210, 11%, 98%);
-    default: hsl(0, 0%, 100%);
-}
-.set-black-hc() {
-    050: hsl(0, 0%, 100%);
-    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(210, 9%, 75%);
-    350: hsl(210, 8%, 45%);
-    400: hsl(212, 8%, 35%);
-    500: hsl(210, 8%, 25%);
-    600: hsl(210, 8%, 5%);
-    default: hsl(0, 0%, 0%);
-}
-
-.set-black-hc-dark() {
-    050: hsl(210, 3%, 15%);
-    100: hsl(210, 3%, 18%);
-    150: hsl(210, 4%, 21%);
-    200: hsl(210, 4%, 27%);
-    225: hsl(210, 4%, 30%);
-    250: hsl(210, 5%, 36%);
-    300: hsl(210, 4%, 47%);
-    350: hsl(210, 10%, 74%);
-    400: hsl(210, 8%, 80%);
-    500: hsl(210, 8%, 90%);
-    600: hsl(210, 11%, 98%);
-    default: hsl(0, 0%, 100%);
-}
-
-// Orange
-.set-orange() {
-    100: hsl(23, 87%, 97%);
-    200: hsl(27, 87%, 87%);
-    300: hsl(27, 87%, 72%);
-    400: hsl(27, 89%, 48%);
-    500: hsl(27, 87%, 41%);
-    600: hsl(27, 87%, 27%);
-}
-.set-orange-dark() {
-    100: hsl(27, 55%, 20%);
-    200: hsl(27, 50%, 33%);
-    300: hsl(27, 50%, 43%);
-    400: hsl(27, 90%, 68%);
-    500: hsl(27, 90%, 80%);
-    600: hsl(27, 90%, 90%);
-}
-.set-orange-hc() {
-    100: hsl(23, 87%, 97%);
-    200: hsl(23, 87%, 97%);
-    300: hsl(27, 89%, 48%);
-    400: hsl(27, 87%, 29%);
-    500: hsl(27, 87%, 21%);
-    600: hsl(27, 87%, 21%);
-}
-.set-orange-hc-dark() {
-    100: hsl(27, 30%, 19%);
-    200: hsl(27, 30%, 19%);
-    300: hsl(27, 80%, 72%);
-    400: hsl(27, 80%, 72%);
-    500: hsl(28, 78%, 93%);
-    600: hsl(28, 78%, 93%);
-}
-
-// Blue
-.set-blue() {
-    100: hsl(210, 80%, 96%);
-    200: hsl(210, 80%, 91%);
-    300: hsl(210, 78%, 76%);
-    400: hsl(210, 77%, 46%);
-    500: hsl(210, 77%, 36%);
-    600: hsl(210, 80%, 23%);
-}
-.set-blue-dark() {
-    100: hsl(210, 50%, 22%);
-    200: hsl(210, 50%, 36%);
-    300: hsl(210, 50%, 48%);
-    400: hsl(210, 89%, 77%);
-    500: hsl(210, 89%, 84%);
-    600: hsl(210, 89%, 92%);
-}
-.set-blue-hc() {
-    100: hsl(210, 80%, 96%);
-    200: hsl(210, 80%, 96%);
-    300: hsl(210, 70%, 48%);
-    400: hsl(210, 77%, 34%);
-    500: hsl(210, 80%, 23%);
-    600: hsl(210, 80%, 23%);
-}
-.set-blue-hc-dark() {
-    100: hsl(209, 30%, 19%);
-    200: hsl(209, 30%, 19%);
-    300: hsl(210, 80%, 72%);
-    400: hsl(210, 80%, 75%);
-    500: hsl(210, 78%, 93%);
-    600: hsl(210, 78%, 93%);
-}
-
-// 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(149, 51%, 15%);
-    200: hsl(149, 51%, 25%);
-    300: hsl(149, 51%, 36%);
-    400: hsl(149, 50%, 62%);
-    500: hsl(149, 50%, 74%);
-    600: hsl(149, 50%, 88%);
-}
-.set-green-hc() {
-    100: hsl(147, 36%, 95%);
-    200: hsl(147, 36%, 95%);
-    300: hsl(148, 70%, 31%);
-    400: hsl(148, 75%, 22%);
-    500: hsl(146, 74%, 15%);
-    600: hsl(146, 74%, 15%);
-}
-.set-green-hc-dark() {
-    100: hsl(147, 30%, 19%);
-    200: hsl(147, 30%, 19%);
-    300: hsl(148, 40%, 62%);
-    400: hsl(148, 40%, 68%);
-    500: hsl(150, 39%, 93%);
-    600: hsl(150, 39%, 93%);
-}
-
-// Red
-.set-red() {
-    100: hsl(0, 72%, 96%);
-    200: hsl(0, 70%, 93%);
-    300: hsl(0, 66%, 80%);
-    400: hsl(0, 60%, 49%);
-    500: hsl(0, 65%, 37%);
-    600: hsl(0, 65%, 22%);
-}
-.set-red-dark() {
-    100: hsl(0, 43%, 22%);
-    200: hsl(0, 43%, 41%);
-    300: hsl(0, 43%, 56%);
-    400: hsl(0, 90%, 81%);
-    500: hsl(0, 90%, 88%);
-    600: hsl(0, 90%, 94%);
-}
-.set-red-hc() {
-    100: hsl(0, 80%, 96%);
-    200: hsl(0, 80%, 96%);
-    300: hsl(0, 60%, 49%);
-    400: hsl(0, 65%, 37%);
-    500: hsl(0, 65%, 22%);
-    600: hsl(0, 65%, 22%);
-}
-.set-red-hc-dark() {
-    100: hsl(358, 30%, 19%);
-    200: hsl(358, 30%, 19%);
-    300: hsl(0, 75%, 77%);
-    400: hsl(0, 73%, 80%);
-    500: hsl(0, 76%, 95%);
-    600: hsl(0, 76%, 95%);
-}
-
-// Yellow
-.set-yellow() {
-    100: hsl(43, 85%, 95%);
-    200: hsl(43, 85%, 88%);
-    300: hsl(43, 85%, 72%);
-    400: hsl(43, 85%, 50%);
-    500: hsl(43, 85%, 33%);
-    600: hsl(43, 85%, 18%);
-}
-.set-yellow-dark() {
-    100: hsl(43, 50%, 17%);
-    200: hsl(43, 50%, 28%);
-    300: hsl(43, 50%, 39%);
-    400: hsl(43, 90%, 75%);
-    500: hsl(43, 90%, 82%);
-    600: hsl(43, 90%, 91%);
-}
-.set-yellow-hc() {
-    100: hsl(41, 85%, 95%);
-    200: hsl(41, 85%, 95%);
-    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, 75%, 75%);
-    400: hsl(43, 75%, 75%);
-    500: hsl(48, 74%, 91%);
-    600: hsl(44, 74%, 91%);
-}
-
-// Purple
-.set-purple() {
-    100: hsl(237, 83%, 98%);
-    200: hsl(237, 78%, 93%);
-    300: hsl(237, 60%, 83%);
-    400: hsl(237, 55%, 57%);
-    500: hsl(237, 50%, 45%);
-    600: hsl(237, 50%, 32%);
-}
-.set-purple-dark() {
-    100: hsl(237, 26%, 23%);
-    200: hsl(237, 26%, 44%);
-    300: hsl(237, 26%, 56%);
-    400: hsl(237, 98%, 87%);
-    500: hsl(237, 98%, 92%);
-    600: hsl(237, 98%, 96%);
-}
-.set-purple-hc() {
-    100: hsl(237, 83%, 98%);
-    200: hsl(237, 83%, 98%);
-    300: hsl(237, 55%, 57%);
-    400: hsl(237, 55%, 57%);
-    500: hsl(237, 50%, 32%);
-    600: hsl(237, 50%, 32%);
-}
-.set-purple-hc-dark() {
-    100: hsl(237, 26%, 23%);
-    200: hsl(237, 26%, 23%);
-    300: hsl(237, 98%, 87%);
-    400: hsl(237, 98%, 87%);
-    500: hsl(237, 98%, 96%);
-    600: hsl(237, 98%, 96%);
-}
-
-// 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%, 95%);
-    300: hsl(210, 5%, 68%);
-    400: hsl(210, 2%, 40%);
-}
-.set-silver-hc-dark() {
-    100: hsl(220, 2%, 26%);
-    200: hsl(220, 2%, 26%);
-    300: hsl(220, 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(27, 13%, 27%);
-    200: hsl(27, 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-400);
-    warning: var(--yellow-500);
-}
-
-// translucent utility colors (HC set represents both light and dark HC modes)
-.set-translucent() {
-    secondary: var(--theme-secondary-custom-translucent, 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-translucent-dark() {
-    secondary: var(--theme-dark-secondary-custom-translucent, 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-translucent-hc() {
-    secondary: 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);
-}
-
-// focus colors used for accessible focus styles
-.set-focus() {
-    neutral: var(--white);
-    theme: var(--theme-secondary-400);
-}
-
-// focus ring (sets represents both light and dark mode)
-.set-focus-ring() {
-    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-ring-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-ring-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: hsl(0, 0%, 96.5%);
-    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: var(--blue-400);
-    bg: hsl(0, 2%, 11%);
-    color: var(--black);
-    comment: hsl(0, 0%, 60%);
-    deletion: var(--red-500);
-    keyword:var(--blue-400);
-    literal: hsl(27, 95%, 65%);
-    namespace: hsl(27, 95%, 65%);
-    punctuation: hsl(0, 0%, 80%);
-    symbol: hsl(306, 50%, 75%);
-    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%, 18%);
-}
-.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%);
-}
-
-.set-scrollbar() {
-    default: hsla(0, 0%, 0%, 0.2);
-}
-.set-scrollbar-dark() {
-    default: hsla(0, 0%, 100%, 0.2);
-}
-.set-scrollbar-hc() {
-    default: var(--black);
-}
-.set-scrollbar-hc-dark() {
-    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();
-    purple: .set-purple();
-    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();
-    purple: .set-purple-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();
-    purple: .set-purple-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();
-    purple: .set-purple-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();
-    translucent: .set-translucent();
-    focus: .set-focus();
-    focus-ring: .set-focus-ring();
-    highlight: .set-highlight();
-    scrollbar: .set-scrollbar();
-}
-
-.sets-utility-dark() {
-    bc: .set-bc();
-    bs: .set-bs-dark();
-    translucent: .set-translucent-dark();
-    focus: .set-focus();
-    focus-ring: .set-focus-ring-dark();
-    highlight: .set-highlight-dark();
-    scrollbar: .set-scrollbar-dark();
-}
-
-.sets-utility-hc() {
-    bc: .set-bc-hc();
-    bs: .set-bs-hc();
-    translucent: .set-translucent-hc();
-    focus: .set-focus();
-    focus-ring: .set-focus-ring-hc();
-    highlight: .set-highlight-hc();
-    scrollbar: .set-scrollbar-hc();
-}
-
-.sets-utility-dark-hc() {
-    bc: .set-bc-hc();
-    bs: .set-bs-hc-dark();
-    translucent: .set-translucent-hc();
-    focus: .set-focus();
-    focus-ring: .set-focus-ring-hc();
-    highlight: .set-highlight-hc-dark();
-    scrollbar: .set-scrollbar-hc-dark();
-}
-
-// 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];
-    secondary: .set-blue()[400];
-}
-
-.theme-dark-default() {
-    primary: .set-orange-dark()[400];
-    secondary: .set-blue-dark()[400];
-}
+/* stylelint-disable property-no-unknown */
+
+// For colors to render properly, you *cannot* have inline comments following a color value
+// The color *and comments* will be passed as the value for the given key and
+// it will fail silently in Stacks' build but might break consumer's builds
+//
+// For example, the value of this:
+//  default: hsl(0, 0%, 100%); // test comment
+// Will render as this:
+//  hsl(0, 0%, 100%); // test comment
+//
+// tl;dr: don't put inline after values in this file
+
+// White
+.set-white() {
+    default: hsl(0, 0%, 100%);
+}
+.set-white-dark() {
+    default: hsl(210, 3%, 15%);
+}
+.set-white-hc() {
+    default: hsl(0, 0%, 100%);
+}
+.set-white-hc-dark() {
+    default: hsl(0, 0%, 0%);
+}
+
+// Black
+.set-black() {
+    050: hsl(0, 0%, 100%);
+    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(210, 9%, 75%);
+    350: hsl(210, 8%, 68%);
+    400: hsl(210, 8%, 42%);
+    500: hsl(210, 8%, 25%);
+    600: hsl(210, 8%, 5%);
+    default: hsl(0, 0%, 0%);
+}
+.set-black-dark() {
+    050: hsl(210, 3%, 15%);
+    100: hsl(210, 3%, 18%);
+    150: hsl(210, 4%, 21%);
+    200: hsl(210, 4%, 27%);
+    225: hsl(210, 4%, 30%);
+    250: hsl(210, 5%, 36%);
+    300: hsl(210, 4%, 47%);
+    350: hsl(210, 8%, 70%);
+    400: hsl(210, 8%, 80%);
+    500: hsl(210, 8%, 90%);
+    600: hsl(210, 11%, 98%);
+    default: hsl(0, 0%, 100%);
+}
+.set-black-hc() {
+    050: hsl(0, 0%, 100%);
+    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(210, 9%, 75%);
+    350: hsl(210, 8%, 45%);
+    400: hsl(212, 8%, 35%);
+    500: hsl(210, 8%, 25%);
+    600: hsl(210, 8%, 5%);
+    default: hsl(0, 0%, 0%);
+}
+
+.set-black-hc-dark() {
+    050: hsl(210, 3%, 15%);
+    100: hsl(210, 3%, 18%);
+    150: hsl(210, 4%, 21%);
+    200: hsl(210, 4%, 27%);
+    225: hsl(210, 4%, 30%);
+    250: hsl(210, 5%, 36%);
+    300: hsl(210, 4%, 47%);
+    350: hsl(210, 10%, 74%);
+    400: hsl(210, 8%, 80%);
+    500: hsl(210, 8%, 90%);
+    600: hsl(210, 11%, 98%);
+    default: hsl(0, 0%, 100%);
+}
+
+// Orange
+.set-orange() {
+    100: hsl(23, 87%, 97%);
+    200: hsl(27, 87%, 87%);
+    300: hsl(27, 87%, 72%);
+    400: hsl(27, 89%, 48%);
+    500: hsl(27, 87%, 41%);
+    600: hsl(27, 87%, 27%);
+}
+.set-orange-dark() {
+    100: hsl(27, 55%, 20%);
+    200: hsl(27, 50%, 33%);
+    300: hsl(27, 50%, 43%);
+    400: hsl(27, 90%, 68%);
+    500: hsl(27, 90%, 80%);
+    600: hsl(27, 90%, 90%);
+}
+.set-orange-hc() {
+    100: hsl(23, 87%, 97%);
+    200: hsl(23, 87%, 97%);
+    300: hsl(27, 89%, 48%);
+    400: hsl(27, 87%, 29%);
+    500: hsl(27, 87%, 21%);
+    600: hsl(27, 87%, 21%);
+}
+.set-orange-hc-dark() {
+    100: hsl(27, 30%, 19%);
+    200: hsl(27, 30%, 19%);
+    300: hsl(27, 80%, 72%);
+    400: hsl(27, 80%, 72%);
+    500: hsl(28, 78%, 93%);
+    600: hsl(28, 78%, 93%);
+}
+
+// Blue
+.set-blue() {
+    100: hsl(210, 80%, 96%);
+    200: hsl(210, 80%, 91%);
+    300: hsl(210, 78%, 76%);
+    400: hsl(210, 77%, 46%);
+    500: hsl(210, 77%, 36%);
+    600: hsl(210, 80%, 23%);
+}
+.set-blue-dark() {
+    100: hsl(210, 50%, 22%);
+    200: hsl(210, 50%, 36%);
+    300: hsl(210, 50%, 48%);
+    400: hsl(210, 89%, 77%);
+    500: hsl(210, 89%, 84%);
+    600: hsl(210, 89%, 92%);
+}
+.set-blue-hc() {
+    100: hsl(210, 80%, 96%);
+    200: hsl(210, 80%, 96%);
+    300: hsl(210, 70%, 48%);
+    400: hsl(210, 77%, 34%);
+    500: hsl(210, 80%, 23%);
+    600: hsl(210, 80%, 23%);
+}
+.set-blue-hc-dark() {
+    100: hsl(209, 30%, 19%);
+    200: hsl(209, 30%, 19%);
+    300: hsl(210, 80%, 72%);
+    400: hsl(210, 80%, 75%);
+    500: hsl(210, 78%, 93%);
+    600: hsl(210, 78%, 93%);
+}
+
+// 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(149, 51%, 15%);
+    200: hsl(149, 51%, 25%);
+    300: hsl(149, 51%, 36%);
+    400: hsl(149, 50%, 62%);
+    500: hsl(149, 50%, 74%);
+    600: hsl(149, 50%, 88%);
+}
+.set-green-hc() {
+    100: hsl(147, 36%, 95%);
+    200: hsl(147, 36%, 95%);
+    300: hsl(148, 70%, 31%);
+    400: hsl(148, 75%, 22%);
+    500: hsl(146, 74%, 15%);
+    600: hsl(146, 74%, 15%);
+}
+.set-green-hc-dark() {
+    100: hsl(147, 30%, 19%);
+    200: hsl(147, 30%, 19%);
+    300: hsl(148, 40%, 62%);
+    400: hsl(148, 40%, 68%);
+    500: hsl(150, 39%, 93%);
+    600: hsl(150, 39%, 93%);
+}
+
+// Red
+.set-red() {
+    100: hsl(0, 72%, 96%);
+    200: hsl(0, 70%, 93%);
+    300: hsl(0, 66%, 80%);
+    400: hsl(0, 60%, 49%);
+    500: hsl(0, 65%, 37%);
+    600: hsl(0, 65%, 22%);
+}
+.set-red-dark() {
+    100: hsl(0, 43%, 22%);
+    200: hsl(0, 43%, 41%);
+    300: hsl(0, 43%, 56%);
+    400: hsl(0, 90%, 81%);
+    500: hsl(0, 90%, 88%);
+    600: hsl(0, 90%, 94%);
+}
+.set-red-hc() {
+    100: hsl(0, 80%, 96%);
+    200: hsl(0, 80%, 96%);
+    300: hsl(0, 60%, 49%);
+    400: hsl(0, 65%, 37%);
+    500: hsl(0, 65%, 22%);
+    600: hsl(0, 65%, 22%);
+}
+.set-red-hc-dark() {
+    100: hsl(358, 30%, 19%);
+    200: hsl(358, 30%, 19%);
+    300: hsl(0, 75%, 77%);
+    400: hsl(0, 73%, 80%);
+    500: hsl(0, 76%, 95%);
+    600: hsl(0, 76%, 95%);
+}
+
+// Yellow
+.set-yellow() {
+    100: hsl(43, 85%, 95%);
+    200: hsl(43, 85%, 88%);
+    300: hsl(43, 85%, 72%);
+    400: hsl(43, 85%, 50%);
+    500: hsl(43, 85%, 33%);
+    600: hsl(43, 85%, 18%);
+}
+.set-yellow-dark() {
+    100: hsl(43, 50%, 17%);
+    200: hsl(43, 50%, 28%);
+    300: hsl(43, 50%, 39%);
+    400: hsl(43, 90%, 75%);
+    500: hsl(43, 90%, 82%);
+    600: hsl(43, 90%, 91%);
+}
+.set-yellow-hc() {
+    100: hsl(41, 85%, 95%);
+    200: hsl(41, 85%, 95%);
+    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, 75%, 75%);
+    400: hsl(43, 75%, 75%);
+    500: hsl(48, 74%, 91%);
+    600: hsl(44, 74%, 91%);
+}
+
+// Purple
+.set-purple() {
+    100: hsl(237, 83%, 98%);
+    200: hsl(237, 78%, 93%);
+    300: hsl(237, 60%, 83%);
+    400: hsl(237, 55%, 57%);
+    500: hsl(237, 50%, 45%);
+    600: hsl(237, 50%, 32%);
+}
+.set-purple-dark() {
+    100: hsl(237, 26%, 23%);
+    200: hsl(237, 26%, 44%);
+    300: hsl(237, 26%, 56%);
+    400: hsl(237, 98%, 87%);
+    500: hsl(237, 98%, 92%);
+    600: hsl(237, 98%, 96%);
+}
+.set-purple-hc() {
+    100: hsl(237, 83%, 98%);
+    200: hsl(237, 83%, 98%);
+    300: hsl(237, 55%, 57%);
+    400: hsl(237, 52%, 48%);
+    500: hsl(237, 50%, 32%);
+    600: hsl(237, 50%, 32%);
+}
+.set-purple-hc-dark() {
+    100: hsl(237, 26%, 23%);
+    200: hsl(237, 26%, 23%);
+    300: hsl(237, 98%, 87%);
+    400: hsl(237, 98%, 87%);
+    500: hsl(237, 98%, 96%);
+    600: hsl(237, 98%, 96%);
+}
+
+// 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%, 95%);
+    300: hsl(210, 5%, 68%);
+    400: hsl(210, 2%, 40%);
+}
+.set-silver-hc-dark() {
+    100: hsl(220, 2%, 26%);
+    200: hsl(220, 2%, 26%);
+    300: hsl(220, 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(27, 13%, 27%);
+    200: hsl(27, 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-400);
+    warning: var(--yellow-500);
+}
+
+// translucent utility colors (HC set represents both light and dark HC modes)
+.set-translucent() {
+    secondary: var(--theme-secondary-custom-translucent, 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-translucent-dark() {
+    secondary: var(--theme-dark-secondary-custom-translucent, 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-translucent-hc() {
+    secondary: 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);
+}
+
+// focus colors used for accessible focus styles
+.set-focus() {
+    neutral: var(--white);
+    theme: var(--theme-secondary-400);
+}
+
+// focus ring (sets represents both light and dark mode)
+.set-focus-ring() {
+    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-ring-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-ring-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: hsl(0, 0%, 96.5%);
+    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: var(--blue-400);
+    bg: hsl(0, 2%, 11%);
+    color: var(--black);
+    comment: hsl(0, 0%, 60%);
+    deletion: var(--red-500);
+    keyword:var(--blue-400);
+    literal: hsl(27, 95%, 65%);
+    namespace: hsl(27, 95%, 65%);
+    punctuation: hsl(0, 0%, 80%);
+    symbol: hsl(306, 50%, 75%);
+    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%, 18%);
+}
+.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%);
+}
+
+.set-scrollbar() {
+    default: hsla(0, 0%, 0%, 0.2);
+}
+.set-scrollbar-dark() {
+    default: hsla(0, 0%, 100%, 0.2);
+}
+.set-scrollbar-hc() {
+    default: var(--black);
+}
+.set-scrollbar-hc-dark() {
+    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();
+    purple: .set-purple();
+    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();
+    purple: .set-purple-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();
+    purple: .set-purple-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();
+    purple: .set-purple-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();
+    translucent: .set-translucent();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring();
+    highlight: .set-highlight();
+    scrollbar: .set-scrollbar();
+}
+
+.sets-utility-dark() {
+    bc: .set-bc();
+    bs: .set-bs-dark();
+    translucent: .set-translucent-dark();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring-dark();
+    highlight: .set-highlight-dark();
+    scrollbar: .set-scrollbar-dark();
+}
+
+.sets-utility-hc() {
+    bc: .set-bc-hc();
+    bs: .set-bs-hc();
+    translucent: .set-translucent-hc();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring-hc();
+    highlight: .set-highlight-hc();
+    scrollbar: .set-scrollbar-hc();
+}
+
+.sets-utility-dark-hc() {
+    bc: .set-bc-hc();
+    bs: .set-bs-hc-dark();
+    translucent: .set-translucent-hc();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring-hc();
+    highlight: .set-highlight-hc-dark();
+    scrollbar: .set-scrollbar-hc-dark();
+}
+
+// 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];
+    secondary: .set-blue()[400];
+}
+
+.theme-dark-default() {
+    primary: .set-orange-dark()[400];
+    secondary: .set-blue-dark()[400];
+}