@stackoverflow/stacks 1.10.2 → 2.0.0-rc.0

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

@@ -0,0 +1,539 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`color-mixins > colors > .create-aliased-utility-classes 1`] = `
+"/* .create-aliased-utility-classes() */
+/* .create-aliased-utility-classes(dark) */
+body .fc-light,
+body .h\\\\:fc-light:hover,
+body .f\\\\:fc-light:focus,
+body .f\\\\:fc-light:focus-within {
+    color: var(--fc-light) !important;
+}
+
+body .fc-medium,
+body .h\\\\:fc-medium:hover,
+body .f\\\\:fc-medium:focus,
+body .f\\\\:fc-medium:focus-within {
+    color: var(--fc-medium) !important;
+}
+
+body .fc-dark,
+body .h\\\\:fc-dark:hover,
+body .f\\\\:fc-dark:focus,
+body .f\\\\:fc-dark:focus-within {
+    color: var(--fc-dark) !important;
+}
+
+body .fc-error,
+body .h\\\\:fc-error:hover,
+body .f\\\\:fc-error:focus,
+body .f\\\\:fc-error:focus-within {
+    color: var(--fc-error) !important;
+}
+
+body .fc-danger,
+body .h\\\\:fc-danger:hover,
+body .f\\\\:fc-danger:focus,
+body .f\\\\:fc-danger:focus-within {
+    color: var(--fc-danger) !important;
+}
+
+body .fc-success,
+body .h\\\\:fc-success:hover,
+body .f\\\\:fc-success:focus,
+body .f\\\\:fc-success:focus-within {
+    color: var(--fc-success) !important;
+}
+
+body .fc-warning,
+body .h\\\\:fc-warning:hover,
+body .f\\\\:fc-warning:focus,
+body .f\\\\:fc-warning:focus-within {
+    color: var(--fc-warning) !important;
+}
+
+body .bg-error,
+body .h\\\\:bg-error:hover,
+body .f\\\\:bg-error:focus,
+body .f\\\\:bg-error:focus-within {
+    background-color: var(--bg-error) !important;
+}
+
+body .bg-danger,
+body .h\\\\:bg-danger:hover,
+body .f\\\\:bg-danger:focus,
+body .f\\\\:bg-danger:focus-within {
+    background-color: var(--bg-danger) !important;
+}
+
+body .bg-success,
+body .h\\\\:bg-success:hover,
+body .f\\\\:bg-success:focus,
+body .f\\\\:bg-success:focus-within {
+    background-color: var(--bg-success) !important;
+}
+
+body .bg-warning,
+body .h\\\\:bg-warning:hover,
+body .f\\\\:bg-warning:focus,
+body .f\\\\:bg-warning:focus-within {
+    background-color: var(--bg-warning) !important;
+}
+
+body .bc-error,
+body .h\\\\:bc-error:hover,
+body .f\\\\:bc-error:focus,
+body .f\\\\:bc-error:focus-within {
+    border-color: var(--bc-error) !important;
+}
+
+body .bc-danger,
+body .h\\\\:bc-danger:hover,
+body .f\\\\:bc-danger:focus,
+body .f\\\\:bc-danger:focus-within {
+    border-color: var(--bc-danger) !important;
+}
+
+body .bc-success,
+body .h\\\\:bc-success:hover,
+body .f\\\\:bc-success:focus,
+body .f\\\\:bc-success:focus-within {
+    border-color: var(--bc-success) !important;
+}
+
+body .bc-warning,
+body .h\\\\:bc-warning:hover,
+body .f\\\\:bc-warning:focus,
+body .f\\\\:bc-warning:focus-within {
+    border-color: var(--bc-warning) !important;
+}
+
+body.theme-dark .d\\\\:fc-light {
+    color: var(--fc-light) !important;
+}
+
+body.theme-dark .d\\\\:fc-medium {
+    color: var(--fc-medium) !important;
+}
+
+body.theme-dark .d\\\\:fc-dark {
+    color: var(--fc-dark) !important;
+}
+
+body.theme-dark .d\\\\:fc-error {
+    color: var(--fc-error) !important;
+}
+
+body.theme-dark .d\\\\:fc-danger {
+    color: var(--fc-danger) !important;
+}
+
+body.theme-dark .d\\\\:fc-success {
+    color: var(--fc-success) !important;
+}
+
+body.theme-dark .d\\\\:fc-warning {
+    color: var(--fc-warning) !important;
+}
+
+body.theme-dark .d\\\\:bg-error {
+    background-color: var(--bg-error) !important;
+}
+
+body.theme-dark .d\\\\:bg-danger {
+    background-color: var(--bg-danger) !important;
+}
+
+body.theme-dark .d\\\\:bg-success {
+    background-color: var(--bg-success) !important;
+}
+
+body.theme-dark .d\\\\:bg-warning {
+    background-color: var(--bg-warning) !important;
+}
+"
+`;
+
+exports[`color-mixins > colors > create-color-classes 1`] = `
+"/* .create-color-classes(red-500, var(--red-500)) */
+/* .create-color-classes(blue-400, var(--blue-400), dark, color) */
+/* .create-color-classes(green-300, var(--green-300), light, background-color) */
+body .bg-red-500,
+body .h\\\\:bg-red-500:hover,
+body .f\\\\:bg-red-500:focus,
+body .f\\\\:bg-red-500:focus-within {
+    background-color: var(--red-500);
+}
+
+body .bc-red-500,
+body .h\\\\:bc-red-500:hover,
+body .f\\\\:bc-red-500:focus,
+body .f\\\\:bc-red-500:focus-within {
+    border-color: var(--red-500);
+}
+
+body .fc-red-500,
+body .h\\\\:fc-red-500:hover,
+body .f\\\\:fc-red-500:focus,
+body .f\\\\:fc-red-500:focus-within {
+    color: var(--red-500);
+}
+
+body .d\\\\:fc-blue-500 {
+    color: var(--blue-500);
+}
+
+body .bg-green-300,
+body .h\\\\:bg-green-300:hover,
+body .f\\\\:bg-green-300:focus,
+body .f\\\\:bg-green-300:focus-within {
+    background-color: var(--green-300);
+}
+"
+`;
+
+exports[`color-mixins > colors > create-colors 1`] = `
+"/*
+                .set-test-emerald() {
+                    default: hsl(150, 60%, 55%);
+                }
+                .set-test-ruby() {
+                    100: hsl(350, 70%, 97%);
+                    600: hsl(350, 70%, 29%);
+                }
+                .sets-test() {
+                    emerald: .set-test-emerald();
+                    ruby: .set-test-ruby();
+                }
+                */
+/* .create-colors(.sets-test(), variables) */
+body {
+    --emerald: hsl(150, 60%, 55%);
+    --ruby-100: hsl(350, 70%, 97%);
+    --ruby-600: hsl(350, 70%, 29%);
+}
+/* .create-colors(.sets-test(), classes) */
+body .bg-emerald,
+body .h\\\\:bg-emerald:hover,
+body .f\\\\:bg-emerald:focus,
+body .f\\\\:bg-emerald:focus-within {
+    background-color: var(--emerald) !important;
+}
+
+body .bc-emerald,
+body .h\\\\:bc-emerald:hover,
+body .f\\\\:bc-emerald:focus,
+body .f\\\\:bc-emerald:focus-within {
+    border-color: var(--emerald) !important;
+}
+
+body .fc-emerald,
+body .h\\\\:fc-emerald:hover,
+body .f\\\\:fc-emerald:focus,
+body .f\\\\:fc-emerald:focus-within {
+    color: var(--emerald) !important;
+}
+
+body .bg-ruby-100,
+body .h\\\\:bg-ruby-100:hover,
+body .f\\\\:bg-ruby-100:focus,
+body .f\\\\:bg-ruby-100:focus-within {
+    background-color: var(--ruby-100) !important;
+}
+
+body .bc-ruby-100,
+body .h\\\\:bc-ruby-100:hover,
+body .f\\\\:bc-ruby-100:focus,
+body .f\\\\:bc-ruby-100:focus-within {
+    border-color: var(--ruby-100) !important;
+}
+
+body .fc-ruby-100,
+body .h\\\\:fc-ruby-100:hover,
+body .f\\\\:fc-ruby-100:focus,
+body .f\\\\:fc-ruby-100:focus-within {
+    color: var(--ruby-100) !important;
+}
+
+body .bg-ruby-600,
+body .h\\\\:bg-ruby-600:hover,
+body .f\\\\:bg-ruby-600:focus,
+body .f\\\\:bg-ruby-600:focus-within {
+    background-color: var(--ruby-600) !important;
+}
+
+body .bc-ruby-600,
+body .h\\\\:bc-ruby-600:hover,
+body .f\\\\:bc-ruby-600:focus,
+body .f\\\\:bc-ruby-600:focus-within {
+    border-color: var(--ruby-600) !important;
+}
+
+body .fc-ruby-600,
+body .h\\\\:fc-ruby-600:hover,
+body .f\\\\:fc-ruby-600:focus,
+body .f\\\\:fc-ruby-600:focus-within {
+    color: var(--ruby-600) !important;
+}
+"
+`;
+
+exports[`color-mixins > colors > generate-colors > light 1`] = `
+"/* .generate-colors(light) */
+body,
+body.themed,
+body .themed {
+    --white: hsl(0, 0%, 100%);
+    --black-050: hsl(0, 0%, 100%);
+    --black-100: hsl(210, 8%, 98%);
+    --black-150: hsl(210, 8%, 95%);
+    --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-500: hsl(210, 8%, 25%);
+    --black-600: hsl(210, 8%, 5%);
+    --black: hsl(0, 8%, 5%);
+    --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-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-600: hsl(210, 80%, 23%);
+    --green-100: hsl(148, 35%, 95%);
+    --green-200: hsl(148, 35%, 88%);
+    --green-300: hsl(148, 35%, 69%);
+    --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-200: hsl(0, 70%, 93%);
+    --red-300: hsl(0, 65%, 76%);
+    --red-400: hsl(0, 60%, 49%);
+    --red-500: hsl(0, 65%, 37%);
+    --red-600: hsl(0, 65%, 24%);
+    --yellow-100: hsl(43, 80%, 96%);
+    --yellow-200: hsl(43, 80%, 88%);
+    --yellow-300: hsl(43, 85%, 72%);
+    --yellow-400: hsl(43, 85%, 50%);
+    --yellow-500: hsl(43, 85%, 33%);
+    --yellow-600: hsl(43, 84%, 18%);
+    --gold-100: hsl(46, 100%, 91%);
+    --gold-200: hsl(46, 100%, 74%);
+    --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-300: hsl(210, 5%, 68%);
+    --silver-400: hsl(210, 2%, 40%);
+    --bronze-100: hsl(28, 40%, 92%);
+    --bronze-200: hsl(30, 47%, 83%);
+    --bronze-300: hsl(28, 43%, 65%);
+    --bronze-400: hsl(28, 43%, 39%);
+    --bc-lightest: var(--black-100);
+    --bc-lighter: var(--black-150);
+    --bc-light: var(--black-200);
+    --bc-medium: var(--black-225);
+    --bc-dark: var(--black-250);
+    --bc-darker: var(--black-300);
+    --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
+    --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
+    --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
+    --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
+    --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
+    --focus-ring-success: hsla(140, 40%, 75%, 0.4);
+    --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
+    --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(206, 98.5%, 29%);
+    --highlight-bg: var(--black-100);
+    --highlight-color: var(--black-600);
+    --highlight-comment: hsl(210, 8%, 43.5%);
+    --highlight-deletion: var(--red-500);
+    --highlight-keyword: hsl(206, 98.5%, 29%);
+    --highlight-literal: hsl(27, 99%, 36%);
+    --highlight-namespace: hsl(27, 99%, 36%);
+    --highlight-punctuation: var(--black-500);
+    --highlight-symbol: hsl(306, 43%, 35%);
+    --highlight-variable: hsl(80, 80.5%, 26.5%);
+    --scrollbar: hsla(0, 0%, 0%, 0.2);
+    --theme-primary: var(--theme-primary-custom, var(--orange-400));
+    --theme-primary-100: var(--theme-primary-custom-100, var(--orange-100));
+    --theme-primary-200: var(--theme-primary-custom-200, var(--orange-200));
+    --theme-primary-300: var(--theme-primary-custom-300, var(--orange-300));
+    --theme-primary-400: var(--theme-primary-custom-400, var(--orange-400));
+    --theme-primary-500: var(--theme-primary-custom-500, var(--orange-500));
+    --theme-primary-600: var(--theme-primary-custom-600, var(--orange-600));
+    --theme-secondary: var(--theme-secondary-custom, var(--blue-400));
+    --theme-secondary-100: var(--theme-secondary-custom-100, var(--blue-100));
+    --theme-secondary-200: var(--theme-secondary-custom-200, var(--blue-200));
+    --theme-secondary-300: var(--theme-secondary-custom-300, var(--blue-300));
+    --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
+    --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
+    --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
+    --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
+    --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
+    --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
+    --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
+    --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 50%));
+    --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 40%));
+    --theme-primary-custom: var(--theme-primary-custom-400);
+    --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
+    --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
+    --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
+    --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
+    --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
+    --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
+    --theme-secondary-custom: var(--theme-secondary-custom-400);
+    --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+}
+"
+`;
+
+exports[`color-mixins > theming > create-custom-theme-hsl-rgb-variables 1`] = `
+"create-custom-theme-hsl-rgb-variables(#ff1100, primary, base) {
+    --theme-base-primary-color-h: 4;
+    --theme-base-primary-color-s: 100%;
+    --theme-base-primary-color-l: 50%;
+    --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
+    --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
+    --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
+    --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
+    --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 50%));
+    --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 40%));
+    --theme-primary-custom: var(--theme-primary-custom-400);
+}
+
+create-custom-theme-hsl-rgb-variables(#29ff53, secondary, base) {
+    --theme-base-secondary-color-h: 131.77570093;
+    --theme-base-secondary-color-s: 100%;
+    --theme-base-secondary-color-l: 58.03921569%;
+    --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
+    --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
+    --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
+    --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
+    --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
+    --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
+    --theme-secondary-custom: var(--theme-secondary-custom-400);
+    --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+}
+
+create-custom-theme-hsl-rgb-variables(#1c091d, primary, dark) {
+    --theme-dark-primary-color-h: 297;
+    --theme-dark-primary-color-s: 52.63157895%;
+    --theme-dark-primary-color-l: 7.45098039%;
+    --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-primary-color-l) + -60 * 1%), 30%));
+    --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-primary-color-l) + -45 * 1%), 45%));
+    --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-primary-color-l) + -33 * 1%), 70%));
+    --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-primary-color-l) + 0 * 1%), 85%));
+    --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-primary-color-l) + 10 * 1%), 90%));
+    --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-primary-color-l) + 20 * 1%), 95%));
+    --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
+}
+
+create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
+    --theme-dark-secondary-color-h: 12.85714286;
+    --theme-dark-secondary-color-s: 40.38461538%;
+    --theme-dark-secondary-color-l: 20.39215686%;
+    --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-secondary-color-l) + -60 * 1%), 30%));
+    --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-secondary-color-l) + -45 * 1%), 45%));
+    --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-secondary-color-l) + -33 * 1%), 70%));
+    --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-secondary-color-l) + 0 * 1%), 85%));
+    --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-secondary-color-l) + 10 * 1%), 90%));
+    --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-secondary-color-l) + 20 * 1%), 95%));
+    --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
+    --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
+}
+"
+`;
+
+exports[`color-mixins > theming > create-custom-theme-variables 1`] = `
+"create-custom-theme-variables(primary, base) {
+    --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
+    --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
+    --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
+    --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
+    --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 50%));
+    --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 40%));
+    --theme-primary-custom: var(--theme-primary-custom-400);
+}
+
+create-custom-theme-variables(primary, dark) {
+    --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-primary-color-l) + -60 * 1%), 30%));
+    --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-primary-color-l) + -45 * 1%), 45%));
+    --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-primary-color-l) + -33 * 1%), 70%));
+    --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-primary-color-l) + 0 * 1%), 85%));
+    --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-primary-color-l) + 10 * 1%), 90%));
+    --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-primary-color-l) + 20 * 1%), 95%));
+    --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
+}
+
+create-custom-theme-variables(secondary, base) {
+    --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
+    --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
+    --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
+    --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
+    --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
+    --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
+    --theme-secondary-custom: var(--theme-secondary-custom-400);
+    --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+}
+
+create-custom-theme-variables(secondary, base) {
+    --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
+    --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
+    --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
+    --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
+    --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
+    --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
+    --theme-secondary-custom: var(--theme-secondary-custom-400);
+    --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+}
+"
+`;
+
+exports[`color-mixins > theming > create-theme-variables 1`] = `
+"body {
+    --theme-primary: var(--theme-primary-custom, var(--orange-400));
+    --theme-primary-100: var(--theme-primary-custom-100, var(--orange-100));
+    --theme-primary-200: var(--theme-primary-custom-200, var(--orange-200));
+    --theme-primary-300: var(--theme-primary-custom-300, var(--orange-300));
+    --theme-primary-400: var(--theme-primary-custom-400, var(--orange-400));
+    --theme-primary-500: var(--theme-primary-custom-500, var(--orange-500));
+    --theme-primary-600: var(--theme-primary-custom-600, var(--orange-600));
+    --theme-secondary: var(--theme-secondary-custom, var(--blue-400));
+    --theme-secondary-100: var(--theme-secondary-custom-100, var(--blue-100));
+    --theme-secondary-200: var(--theme-secondary-custom-200, var(--blue-200));
+    --theme-secondary-300: var(--theme-secondary-custom-300, var(--blue-300));
+    --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
+    --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
+    --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
+}
+
+body.theme-highcontrast {
+    --theme-primary: var(--orange-400);
+    --theme-primary-100: var(--orange-100);
+    --theme-primary-200: var(--orange-200);
+    --theme-primary-300: var(--orange-300);
+    --theme-primary-400: var(--orange-400);
+    --theme-primary-500: var(--orange-500);
+    --theme-primary-600: var(--orange-600);
+    --theme-secondary: var(--blue-400);
+    --theme-secondary-100: var(--blue-100);
+    --theme-secondary-200: var(--blue-200);
+    --theme-secondary-300: var(--blue-300);
+    --theme-secondary-400: var(--blue-400);
+    --theme-secondary-500: var(--blue-500);
+    --theme-secondary-600: var(--blue-600);
+}
+"
+`;