@stackoverflow/stacks 2.0.0-rc.4 → 2.0.0-rc.6

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

@@ -4,8 +4,31 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
 "body {
     --_o-disabled: 0.5;
     --_o-disabled-static: 0.5;
-    --_black-static: hsl(0, 8%, 5%);
+    --_black-static: hsl(0, 0%, 0%);
     --_white-static: hsl(0, 0%, 100%);
+}
+
+body,
+body.themed,
+body .themed {
+    color: var(--theme-body-font-color, var(--black-600));
+}
+
+body:not(.theme-dark),
+body.theme-dark .theme-light__forced,
+body.theme-system .theme-light__forced,
+body.theme-dark,
+body:not(.theme-dark) .theme-dark__forced,
+body:not(.theme-dark).themed,
+body.theme-dark .theme-light__forced.themed,
+body.theme-system .theme-light__forced.themed,
+body.theme-dark.themed,
+body:not(.theme-dark) .theme-dark__forced.themed,
+body:not(.theme-dark) .themed,
+body.theme-dark .theme-light__forced .themed,
+body.theme-system .theme-light__forced .themed,
+body.theme-dark .themed,
+body:not(.theme-dark) .theme-dark__forced .themed {
     --bg-error: var(--red-400);
     --bg-danger: var(--red-400);
     --bg-success: var(--green-400);
@@ -21,72 +44,6 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
     --fc-danger: var(--red-400);
     --fc-success: var(--green-500);
     --fc-warning: var(--yellow-500);
-    --theme-body-font-color: var(--black-600);
-    --theme-background-color: var(--white);
-    --theme-link-color: var(--theme-secondary-400);
-    --theme-link-color-hover: var(--theme-secondary-400);
-    --theme-link-color-visited: var(--theme-secondary-500);
-    --theme-button-color: var(--theme-secondary-400);
-    --theme-button-background-color: transparent;
-    --theme-button-hover-color: var(--theme-secondary-400);
-    --theme-button-hover-background-color: var(--theme-secondary-200);
-    --theme-button-active-background-color: var(--theme-secondary-300);
-    --theme-button-selected-color: var(--theme-secondary-600);
-    --theme-button-selected-background-color: var(--theme-secondary-300);
-    --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-400);
-    --theme-button-primary-active-background-color: var(--theme-secondary-500);
-    --theme-button-primary-selected-color: var(--white);
-    --theme-button-primary-selected-background-color: var(--theme-secondary-500);
-    --theme-button-primary-number-color: var(--theme-secondary-600);
-    --theme-button-filled-color: var(--theme-secondary-500);
-    --theme-button-filled-background-color: var(--theme-secondary-200);
-    --theme-button-filled-border-color: var(--theme-secondary-400);
-    --theme-button-filled-hover-color: var(--theme-secondary-600);
-    --theme-button-filled-hover-background-color: var(--theme-secondary-300);
-    --theme-button-filled-active-background-color: var(--theme-secondary-300);
-    --theme-button-filled-active-border-color: var(--theme-secondary-400);
-    --theme-button-filled-selected-color: var(--theme-secondary-600);
-    --theme-button-filled-selected-background-color: var(--theme-secondary-400);
-    --theme-button-filled-selected-border-color: var(--theme-secondary-400);
-    --theme-button-outlined-border-color: var(--theme-secondary-400);
-    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
-    --theme-tag-color: var(--theme-secondary-600);
-    --theme-tag-background-color: var(--theme-secondary-200);
-    --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-600);
-    --theme-tag-hover-background-color: var(--theme-secondary-300);
-    --theme-tag-hover-border-color: transparent;
-    --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
-    --theme-topbar-background-color: var(--white);
-    --theme-topbar-search-color: var(--black-500);
-    --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-400);
-    --theme-topbar-search-border: var(--black-300);
-    --theme-topbar-search-border-focus: var(--blue-400);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-    --theme-topbar-select-color: var(--black-500);
-    --theme-topbar-select-background: var(--black-200);
-    --theme-topbar-item-color: var(--black-500);
-    --theme-topbar-item-color-hover: var(--black-600);
-    --theme-topbar-item-background-hover: var(--black-200);
-    --theme-topbar-item-color-current: var(--black);
-    --theme-topbar-item-border-current: var(--theme-primary);
-    --theme-topbar-accent-border: 3px solid var(--theme-primary);
-    --theme-topbar-bottom-border: 1px solid var(--black-225);
-    --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);
-}
-
-body,
-body.themed,
-body .themed {
-    color: var(--theme-body-font-color, var(--black-600));
 }
 
 body:not(.theme-highcontrast):not(.theme-dark),
@@ -105,23 +62,23 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --black-200: hsl(210, 8%, 90%);
     --black-225: hsl(210, 8%, 85%);
     --black-250: hsl(210, 8%, 80%);
-    --black-300: hsl(213, 9%, 75%);
-    --black-350: hsl(212, 8%, 68%);
-    --black-400: hsl(210, 8%, 45%);
+    --black-300: hsl(210, 9%, 75%);
+    --black-350: hsl(210, 8%, 68%);
+    --black-400: hsl(210, 8%, 42%);
     --black-500: hsl(210, 8%, 25%);
     --black-600: hsl(210, 8%, 5%);
-    --black: hsl(0, 8%, 5%);
+    --black: hsl(0, 0%, 0%);
     --orange-100: hsl(23, 85%, 97%);
     --orange-200: hsl(27, 85%, 87%);
     --orange-300: hsl(27, 85%, 72%);
-    --orange-400: hsl(27, 90%, 55%);
-    --orange-500: hsl(27, 88%, 43%);
+    --orange-400: hsl(27, 80%, 52%);
+    --orange-500: hsl(27, 80%, 43%);
     --orange-600: hsl(27, 80%, 29%);
     --blue-100: hsl(210, 80%, 96%);
     --blue-200: hsl(210, 80%, 91%);
     --blue-300: hsl(210, 78%, 76%);
-    --blue-400: hsl(210, 70%, 48%);
-    --blue-500: hsl(210, 75%, 36%);
+    --blue-400: hsl(210, 77%, 46%);
+    --blue-500: hsl(210, 77%, 36%);
     --blue-600: hsl(210, 80%, 23%);
     --green-100: hsl(148, 35%, 95%);
     --green-200: hsl(148, 35%, 88%);
@@ -129,7 +86,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --green-400: hsl(148, 70%, 31%);
     --green-500: hsl(148, 75%, 22%);
     --green-600: hsl(148, 75%, 15%);
-    --red-100: hsl(0, 78%, 96%);
+    --red-100: hsl(0, 72%, 96%);
     --red-200: hsl(0, 70%, 93%);
     --red-300: hsl(0, 65%, 76%);
     --red-400: hsl(0, 60%, 49%);
@@ -141,6 +98,12 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --yellow-400: hsl(43, 85%, 50%);
     --yellow-500: hsl(43, 85%, 33%);
     --yellow-600: hsl(43, 84%, 18%);
+    --purple-100: hsl(237, 80%, 96%);
+    --purple-200: hsl(237, 77%, 92%);
+    --purple-300: hsl(237, 60%, 83%);
+    --purple-400: hsl(237, 55%, 57%);
+    --purple-500: hsl(237, 50%, 45%);
+    --purple-600: hsl(237, 50%, 32%);
     --gold-100: hsl(46, 100%, 91%);
     --gold-200: hsl(46, 100%, 74%);
     --gold-300: hsl(45, 100%, 42%);
@@ -170,7 +133,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
     --highlight-addition: var(--green-500);
     --highlight-attribute: hsl(206, 98.5%, 29%);
-    --highlight-bg: var(--black-100);
+    --highlight-bg: hsl(0, 0%, 96.5%);
     --highlight-color: var(--black-600);
     --highlight-comment: hsl(210, 8%, 43.5%);
     --highlight-deletion: var(--red-500);
@@ -218,49 +181,55 @@ body:not(.theme-highcontrast).theme-dark.themed,
 body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced.themed,
 body:not(.theme-highcontrast).theme-dark .themed,
 body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
-    --white: hsl(220, 3%, 15%);
-    --black-050: hsl(220, 3%, 15%);
-    --black-100: hsl(220, 3%, 18%);
-    --black-150: hsl(230, 4%, 21%);
-    --black-200: hsl(233, 4%, 27%);
-    --black-225: hsl(233, 4%, 30%);
-    --black-250: hsl(235, 5%, 36%);
-    --black-300: hsl(233, 4%, 47%);
-    --black-350: hsl(219, 10%, 60%);
-    --black-400: hsl(220, 10%, 74%);
-    --black-500: hsl(220, 10%, 83%);
-    --black-600: hsl(180, 11%, 98%);
+    --white: hsl(210, 3%, 15%);
+    --black-050: hsl(210, 3%, 15%);
+    --black-100: hsl(210, 3%, 18%);
+    --black-150: hsl(210, 4%, 21%);
+    --black-200: hsl(210, 4%, 27%);
+    --black-225: hsl(210, 4%, 30%);
+    --black-250: hsl(210, 5%, 36%);
+    --black-300: hsl(210, 4%, 47%);
+    --black-350: hsl(210, 8%, 70%);
+    --black-400: hsl(210, 8%, 80%);
+    --black-500: hsl(210, 8%, 90%);
+    --black-600: hsl(210, 11%, 98%);
     --black: hsl(0, 0%, 100%);
     --orange-100: hsl(27, 29%, 19%);
     --orange-200: hsl(27, 43%, 31%);
     --orange-300: hsl(27, 43%, 47%);
-    --orange-400: hsl(27, 80%, 64%);
-    --orange-500: hsl(27, 80%, 78%);
-    --orange-600: hsl(27, 80%, 89%);
+    --orange-400: hsl(27, 80%, 80%);
+    --orange-500: hsl(27, 80%, 88%);
+    --orange-600: hsl(27, 80%, 93%);
     --blue-100: hsl(209, 29%, 19%);
     --blue-200: hsl(210, 29%, 35%);
     --blue-300: hsl(210, 29%, 50%);
-    --blue-400: hsl(210, 81%, 72%);
-    --blue-500: hsl(210, 80%, 82%);
-    --blue-600: hsl(210, 80%, 90%);
+    --blue-400: hsl(210, 80%, 80%);
+    --blue-500: hsl(210, 80%, 88%);
+    --blue-600: hsl(210, 80%, 93%);
     --green-100: hsl(148, 29%, 19%);
     --green-200: hsl(148, 29%, 27%);
     --green-300: hsl(148, 25%, 40%);
-    --green-400: hsl(148, 40%, 62%);
-    --green-500: hsl(148, 40%, 75%);
-    --green-600: hsl(148, 40%, 87%);
+    --green-400: hsl(148, 40%, 75%);
+    --green-500: hsl(148, 40%, 85%);
+    --green-600: hsl(148, 40%, 93%);
     --red-100: hsl(358, 29%, 19%);
     --red-200: hsl(0, 29%, 37%);
     --red-300: hsl(0, 34%, 54%);
-    --red-400: hsl(0, 75%, 77%);
-    --red-500: hsl(0, 69%, 85%);
-    --red-600: hsl(0, 69%, 93%);
+    --red-400: hsl(0, 73%, 85%);
+    --red-500: hsl(0, 73%, 91%);
+    --red-600: hsl(0, 73%, 95%);
     --yellow-100: hsl(43, 29%, 17%);
     --yellow-200: hsl(43, 29%, 25%);
     --yellow-300: hsl(43, 29%, 40%);
-    --yellow-400: hsl(43, 59%, 64%);
-    --yellow-500: hsl(43, 65%, 70%);
-    --yellow-600: hsl(43, 65%, 85%);
+    --yellow-400: hsl(43, 75%, 75%);
+    --yellow-500: hsl(43, 75%, 85%);
+    --yellow-600: hsl(43, 75%, 91%);
+    --purple-100: hsl(237, 25%, 24%);
+    --purple-200: hsl(237, 27%, 38%);
+    --purple-300: hsl(237, 32%, 56%);
+    --purple-400: hsl(237, 58%, 86%);
+    --purple-500: hsl(237, 60%, 91%);
+    --purple-600: hsl(237, 65%, 96%);
     --gold-100: hsl(45, 29%, 24%);
     --gold-200: hsl(45, 47%, 37%);
     --gold-300: hsl(45, 92%, 62%);
@@ -289,12 +258,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --focus-ring-error: hsla(358, 62%, 47%, 0.15);
     --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
     --highlight-addition: var(--green-500);
-    --highlight-attribute: hsl(207, 41.5%, 67%);
+    --highlight-attribute: var(--blue-400);
     --highlight-bg: hsl(0, 2%, 11%);
     --highlight-color: var(--black);
     --highlight-comment: hsl(0, 0%, 60%);
     --highlight-deletion: var(--red-500);
-    --highlight-keyword: hsl(208, 41.5%, 67%);
+    --highlight-keyword: var(--blue-400);
     --highlight-literal: hsl(27, 85%, 61.5%);
     --highlight-namespace: hsl(27, 85%, 61.5%);
     --highlight-punctuation: hsl(0, 0%, 80%);
@@ -336,49 +305,55 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     body:not(.theme-highcontrast).theme-system,
   body:not(.theme-highcontrast).theme-system.themed,
   body:not(.theme-highcontrast).theme-system .themed {
-        --white: hsl(220, 3%, 15%);
-        --black-050: hsl(220, 3%, 15%);
-        --black-100: hsl(220, 3%, 18%);
-        --black-150: hsl(230, 4%, 21%);
-        --black-200: hsl(233, 4%, 27%);
-        --black-225: hsl(233, 4%, 30%);
-        --black-250: hsl(235, 5%, 36%);
-        --black-300: hsl(233, 4%, 47%);
-        --black-350: hsl(219, 10%, 60%);
-        --black-400: hsl(220, 10%, 74%);
-        --black-500: hsl(220, 10%, 83%);
-        --black-600: hsl(180, 11%, 98%);
+        --white: hsl(210, 3%, 15%);
+        --black-050: hsl(210, 3%, 15%);
+        --black-100: hsl(210, 3%, 18%);
+        --black-150: hsl(210, 4%, 21%);
+        --black-200: hsl(210, 4%, 27%);
+        --black-225: hsl(210, 4%, 30%);
+        --black-250: hsl(210, 5%, 36%);
+        --black-300: hsl(210, 4%, 47%);
+        --black-350: hsl(210, 8%, 70%);
+        --black-400: hsl(210, 8%, 80%);
+        --black-500: hsl(210, 8%, 90%);
+        --black-600: hsl(210, 11%, 98%);
         --black: hsl(0, 0%, 100%);
         --orange-100: hsl(27, 29%, 19%);
         --orange-200: hsl(27, 43%, 31%);
         --orange-300: hsl(27, 43%, 47%);
-        --orange-400: hsl(27, 80%, 64%);
-        --orange-500: hsl(27, 80%, 78%);
-        --orange-600: hsl(27, 80%, 89%);
+        --orange-400: hsl(27, 80%, 80%);
+        --orange-500: hsl(27, 80%, 88%);
+        --orange-600: hsl(27, 80%, 93%);
         --blue-100: hsl(209, 29%, 19%);
         --blue-200: hsl(210, 29%, 35%);
         --blue-300: hsl(210, 29%, 50%);
-        --blue-400: hsl(210, 81%, 72%);
-        --blue-500: hsl(210, 80%, 82%);
-        --blue-600: hsl(210, 80%, 90%);
+        --blue-400: hsl(210, 80%, 80%);
+        --blue-500: hsl(210, 80%, 88%);
+        --blue-600: hsl(210, 80%, 93%);
         --green-100: hsl(148, 29%, 19%);
         --green-200: hsl(148, 29%, 27%);
         --green-300: hsl(148, 25%, 40%);
-        --green-400: hsl(148, 40%, 62%);
-        --green-500: hsl(148, 40%, 75%);
-        --green-600: hsl(148, 40%, 87%);
+        --green-400: hsl(148, 40%, 75%);
+        --green-500: hsl(148, 40%, 85%);
+        --green-600: hsl(148, 40%, 93%);
         --red-100: hsl(358, 29%, 19%);
         --red-200: hsl(0, 29%, 37%);
         --red-300: hsl(0, 34%, 54%);
-        --red-400: hsl(0, 75%, 77%);
-        --red-500: hsl(0, 69%, 85%);
-        --red-600: hsl(0, 69%, 93%);
+        --red-400: hsl(0, 73%, 85%);
+        --red-500: hsl(0, 73%, 91%);
+        --red-600: hsl(0, 73%, 95%);
         --yellow-100: hsl(43, 29%, 17%);
         --yellow-200: hsl(43, 29%, 25%);
         --yellow-300: hsl(43, 29%, 40%);
-        --yellow-400: hsl(43, 59%, 64%);
-        --yellow-500: hsl(43, 65%, 70%);
-        --yellow-600: hsl(43, 65%, 85%);
+        --yellow-400: hsl(43, 75%, 75%);
+        --yellow-500: hsl(43, 75%, 85%);
+        --yellow-600: hsl(43, 75%, 91%);
+        --purple-100: hsl(237, 25%, 24%);
+        --purple-200: hsl(237, 27%, 38%);
+        --purple-300: hsl(237, 32%, 56%);
+        --purple-400: hsl(237, 58%, 86%);
+        --purple-500: hsl(237, 60%, 91%);
+        --purple-600: hsl(237, 65%, 96%);
         --gold-100: hsl(45, 29%, 24%);
         --gold-200: hsl(45, 47%, 37%);
         --gold-300: hsl(45, 92%, 62%);
@@ -407,12 +382,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --focus-ring-error: hsla(358, 62%, 47%, 0.15);
         --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
         --highlight-addition: var(--green-500);
-        --highlight-attribute: hsl(207, 41.5%, 67%);
+        --highlight-attribute: var(--blue-400);
         --highlight-bg: hsl(0, 2%, 11%);
         --highlight-color: var(--black);
         --highlight-comment: hsl(0, 0%, 60%);
         --highlight-deletion: var(--red-500);
-        --highlight-keyword: hsl(208, 41.5%, 67%);
+        --highlight-keyword: var(--blue-400);
         --highlight-literal: hsl(27, 85%, 61.5%);
         --highlight-namespace: hsl(27, 85%, 61.5%);
         --highlight-punctuation: hsl(0, 0%, 80%);
@@ -461,34 +436,34 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --black-200: hsl(210, 8%, 90%);
     --black-225: hsl(210, 8%, 85%);
     --black-250: hsl(210, 8%, 80%);
-    --black-300: hsl(213, 9%, 75%);
+    --black-300: hsl(210, 9%, 75%);
     --black-350: hsl(210, 8%, 45%);
-    --black-400: hsl(210, 8%, 45%);
+    --black-400: hsl(212, 8%, 35%);
     --black-500: hsl(210, 8%, 25%);
     --black-600: hsl(210, 8%, 5%);
-    --black: hsl(0, 8%, 5%);
+    --black: hsl(0, 0%, 0%);
     --orange-100: hsl(22, 85%, 97%);
     --orange-200: hsl(22, 85%, 97%);
     --orange-300: hsl(27, 90%, 55%);
     --orange-400: hsl(27, 90%, 55%);
-    --orange-500: hsl(27, 80%, 29%);
-    --orange-600: hsl(27, 80%, 29%);
+    --orange-500: hsl(27, 80%, 28%);
+    --orange-600: hsl(27, 80%, 28%);
     --blue-100: hsl(210, 80%, 96%);
     --blue-200: hsl(210, 80%, 96%);
     --blue-300: hsl(210, 70%, 48%);
-    --blue-400: hsl(210, 70%, 48%);
+    --blue-400: hsl(210, 77%, 34%);
     --blue-500: hsl(210, 80%, 23%);
     --blue-600: hsl(210, 80%, 23%);
     --green-100: hsl(147, 36%, 95%);
     --green-200: hsl(147, 36%, 95%);
     --green-300: hsl(148, 70%, 31%);
-    --green-400: hsl(148, 70%, 31%);
+    --green-400: hsl(148, 75%, 22%);
     --green-500: hsl(147, 74%, 15%);
     --green-600: hsl(147, 74%, 15%);
     --red-100: hsl(0, 79%, 96%);
     --red-200: hsl(0, 79%, 96%);
     --red-300: hsl(0, 60%, 49%);
-    --red-400: hsl(0, 60%, 49%);
+    --red-400: hsl(0, 65%, 37%);
     --red-500: hsl(0, 66%, 24%);
     --red-600: hsl(0, 66%, 24%);
     --yellow-100: hsl(41, 80%, 96%);
@@ -497,12 +472,18 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --yellow-400: hsl(43, 85%, 50%);
     --yellow-500: hsl(48, 85%, 18%);
     --yellow-600: hsl(48, 85%, 18%);
+    --purple-100: hsl(237, 80%, 96%);
+    --purple-200: hsl(237, 80%, 96%);
+    --purple-300: hsl(237, 55%, 57%);
+    --purple-400: hsl(237, 55%, 57%);
+    --purple-500: hsl(237, 50%, 32%);
+    --purple-600: hsl(237, 50%, 32%);
     --gold-100: hsl(46, 100%, 91%);
     --gold-200: hsl(46, 100%, 91%);
     --gold-300: hsl(45, 100%, 42%);
     --gold-400: hsl(46, 92%, 26%);
     --silver-100: hsl(0, 0%, 95%);
-    --silver-200: hsl(0, 0%, 84%);
+    --silver-200: hsl(0, 0%, 95%);
     --silver-300: hsl(210, 5%, 68%);
     --silver-400: hsl(216, 2%, 40%);
     --bronze-100: hsl(28, 40%, 92%);
@@ -557,48 +538,54 @@ body.theme-highcontrast.theme-system .theme-light__forced {
 body.theme-highcontrast.theme-dark,
 body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --white: hsl(0, 0%, 0%);
-    --black-050: hsl(220, 3%, 15%);
-    --black-100: hsl(220, 3%, 18%);
-    --black-150: hsl(230, 4%, 21%);
-    --black-200: hsl(233, 4%, 27%);
-    --black-225: hsl(233, 4%, 30%);
-    --black-250: hsl(235, 5%, 36%);
-    --black-300: hsl(233, 4%, 47%);
-    --black-350: hsl(220, 10%, 74%);
-    --black-400: hsl(220, 10%, 74%);
-    --black-500: hsl(220, 10%, 83%);
-    --black-600: hsl(180, 11%, 98%);
+    --black-050: hsl(210, 3%, 15%);
+    --black-100: hsl(210, 3%, 18%);
+    --black-150: hsl(210, 4%, 21%);
+    --black-200: hsl(210, 4%, 27%);
+    --black-225: hsl(210, 4%, 30%);
+    --black-250: hsl(210, 5%, 36%);
+    --black-300: hsl(210, 4%, 47%);
+    --black-350: hsl(210, 10%, 74%);
+    --black-400: hsl(210, 8%, 80%);
+    --black-500: hsl(210, 8%, 90%);
+    --black-600: hsl(210, 11%, 98%);
     --black: hsl(0, 0%, 100%);
     --orange-100: hsl(27, 29%, 19%);
     --orange-200: hsl(27, 29%, 19%);
     --orange-300: hsl(27, 80%, 64%);
-    --orange-400: hsl(27, 80%, 64%);
+    --orange-400: hsl(27, 80%, 80%);
     --orange-500: hsl(27, 79%, 89%);
-    --orange-600: hsl(27, 79%, 89%);
+    --orange-600: hsl(27, 80%, 93%);
     --blue-100: hsl(209, 29%, 19%);
     --blue-200: hsl(209, 29%, 19%);
     --blue-300: hsl(210, 80%, 72%);
-    --blue-400: hsl(210, 80%, 72%);
+    --blue-400: hsl(210, 80%, 80%);
     --blue-500: hsl(209, 79%, 87%);
-    --blue-600: hsl(209, 79%, 87%);
+    --blue-600: hsl(210, 80%, 93%);
     --green-100: hsl(147, 29%, 19%);
     --green-200: hsl(147, 29%, 19%);
     --green-300: hsl(148, 40%, 62%);
-    --green-400: hsl(148, 40%, 62%);
+    --green-400: hsl(148, 40%, 75%);
     --green-500: hsl(148, 39%, 87%);
-    --green-600: hsl(148, 39%, 87%);
+    --green-600: hsl(148, 40%, 93%);
     --red-100: hsl(358, 29%, 19%);
     --red-200: hsl(358, 29%, 19%);
     --red-300: hsl(0, 75%, 77%);
-    --red-400: hsl(0, 75%, 77%);
+    --red-400: hsl(0, 73%, 85%);
     --red-500: hsl(0, 70%, 92%);
-    --red-600: hsl(0, 70%, 92%);
+    --red-600: hsl(0, 73%, 95%);
     --yellow-100: hsl(43, 29%, 17%);
     --yellow-200: hsl(43, 29%, 17%);
     --yellow-300: hsl(43, 59%, 64%);
-    --yellow-400: hsl(43, 59%, 64%);
+    --yellow-400: hsl(43, 75%, 75%);
     --yellow-500: hsl(48, 74%, 91%);
-    --yellow-600: hsl(48, 74%, 91%);
+    --yellow-600: hsl(43, 75%, 91%);
+    --purple-100: hsl(237, 25%, 24%);
+    --purple-200: hsl(237, 25%, 24%);
+    --purple-300: hsl(237, 58%, 86%);
+    --purple-400: hsl(237, 58%, 86%);
+    --purple-500: hsl(237, 65%, 96%);
+    --purple-600: hsl(237, 65%, 96%);
     --gold-100: hsl(45, 22%, 25%);
     --gold-200: hsl(45, 22%, 25%);
     --gold-300: hsl(45, 92%, 62%);
@@ -659,48 +646,54 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
 @media (prefers-color-scheme: dark) {
     body.theme-highcontrast.theme-system {
         --white: hsl(0, 0%, 0%);
-        --black-050: hsl(220, 3%, 15%);
-        --black-100: hsl(220, 3%, 18%);
-        --black-150: hsl(230, 4%, 21%);
-        --black-200: hsl(233, 4%, 27%);
-        --black-225: hsl(233, 4%, 30%);
-        --black-250: hsl(235, 5%, 36%);
-        --black-300: hsl(233, 4%, 47%);
-        --black-350: hsl(220, 10%, 74%);
-        --black-400: hsl(220, 10%, 74%);
-        --black-500: hsl(220, 10%, 83%);
-        --black-600: hsl(180, 11%, 98%);
+        --black-050: hsl(210, 3%, 15%);
+        --black-100: hsl(210, 3%, 18%);
+        --black-150: hsl(210, 4%, 21%);
+        --black-200: hsl(210, 4%, 27%);
+        --black-225: hsl(210, 4%, 30%);
+        --black-250: hsl(210, 5%, 36%);
+        --black-300: hsl(210, 4%, 47%);
+        --black-350: hsl(210, 10%, 74%);
+        --black-400: hsl(210, 8%, 80%);
+        --black-500: hsl(210, 8%, 90%);
+        --black-600: hsl(210, 11%, 98%);
         --black: hsl(0, 0%, 100%);
         --orange-100: hsl(27, 29%, 19%);
         --orange-200: hsl(27, 29%, 19%);
         --orange-300: hsl(27, 80%, 64%);
-        --orange-400: hsl(27, 80%, 64%);
+        --orange-400: hsl(27, 80%, 80%);
         --orange-500: hsl(27, 79%, 89%);
-        --orange-600: hsl(27, 79%, 89%);
+        --orange-600: hsl(27, 80%, 93%);
         --blue-100: hsl(209, 29%, 19%);
         --blue-200: hsl(209, 29%, 19%);
         --blue-300: hsl(210, 80%, 72%);
-        --blue-400: hsl(210, 80%, 72%);
+        --blue-400: hsl(210, 80%, 80%);
         --blue-500: hsl(209, 79%, 87%);
-        --blue-600: hsl(209, 79%, 87%);
+        --blue-600: hsl(210, 80%, 93%);
         --green-100: hsl(147, 29%, 19%);
         --green-200: hsl(147, 29%, 19%);
         --green-300: hsl(148, 40%, 62%);
-        --green-400: hsl(148, 40%, 62%);
+        --green-400: hsl(148, 40%, 75%);
         --green-500: hsl(148, 39%, 87%);
-        --green-600: hsl(148, 39%, 87%);
+        --green-600: hsl(148, 40%, 93%);
         --red-100: hsl(358, 29%, 19%);
         --red-200: hsl(358, 29%, 19%);
         --red-300: hsl(0, 75%, 77%);
-        --red-400: hsl(0, 75%, 77%);
+        --red-400: hsl(0, 73%, 85%);
         --red-500: hsl(0, 70%, 92%);
-        --red-600: hsl(0, 70%, 92%);
+        --red-600: hsl(0, 73%, 95%);
         --yellow-100: hsl(43, 29%, 17%);
         --yellow-200: hsl(43, 29%, 17%);
         --yellow-300: hsl(43, 59%, 64%);
-        --yellow-400: hsl(43, 59%, 64%);
+        --yellow-400: hsl(43, 75%, 75%);
         --yellow-500: hsl(48, 74%, 91%);
-        --yellow-600: hsl(48, 74%, 91%);
+        --yellow-600: hsl(43, 75%, 91%);
+        --purple-100: hsl(237, 25%, 24%);
+        --purple-200: hsl(237, 25%, 24%);
+        --purple-300: hsl(237, 58%, 86%);
+        --purple-400: hsl(237, 58%, 86%);
+        --purple-500: hsl(237, 65%, 96%);
+        --purple-600: hsl(237, 65%, 96%);
         --gold-100: hsl(45, 22%, 25%);
         --gold-200: hsl(45, 22%, 25%);
         --gold-300: hsl(45, 92%, 62%);

package/lib/exports/color-mixins.less

@@ -1,6 +1,5 @@
 @import (reference) "./mixins.less";
 @import (reference) "./color-sets.less";
-@import (reference) "./theme.less";
 
 // Type definitions
 //

package/lib/exports/color.less

@@ -5,15 +5,24 @@ body {
     --_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));
     }
+
+    &:not(.theme-dark),
+    &.theme-dark .theme-light__forced,
+    &.theme-system .theme-light__forced,
+    &.theme-dark,
+    &:not(.theme-dark) .theme-dark__forced {
+        &,
+        &.themed,
+        & .themed {
+            .create-colors(.sets-aliased-utility-variables());
+        }
+    }
 }
 
 // Light, dark mode

package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap

@@ -134,7 +134,7 @@ body.theme-system .theme-light__forced,
 body:not(.theme-dark) .themed,
 body.theme-dark .theme-light__forced .themed,
 body.theme-system .theme-light__forced .themed {
-    color: var(--theme-body-font-color);
+    color: var(--theme-body-font-color, var(--black-600));
     --theme-primary-color-legacy-h: var(--theme-light-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
     --theme-primary-color-legacy-s: var(--theme-light-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
     --theme-primary-color-legacy-l: var(--theme-light-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -289,7 +289,7 @@ body.theme-dark,
 body:not(.theme-dark) .theme-dark__forced,
 body.theme-dark .themed,
 body:not(.theme-dark) .theme-dark__forced .themed {
-    color: var(--theme-body-font-color);
+    color: var(--theme-body-font-color, var(--black-600));
     --theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
     --theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
     --theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -442,7 +442,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
 
     body.theme-system,
   body.theme-system .themed {
-        color: var(--theme-body-font-color);
+        color: var(--theme-body-font-color, var(--black-600));
         --theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
         --theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
         --theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));

package/lib/exports/v1/constants-colors.less

@@ -528,7 +528,7 @@
 
     &,
     & .themed {
-        color: var(--theme-body-font-color);
+        color: var(--theme-body-font-color, var(--black-600));
         .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();
@@ -856,7 +856,7 @@ body.theme-system .theme-light__forced {
 
     &,
     & .themed {
-        color: var(--theme-body-font-color);
+        color: var(--theme-body-font-color, var(--black-600));
         .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();