@scattered-light/loomiere-mojave 0.4.1 → 0.5.0

package/dist/exports/design-system/components/bundle.css

@@ -2249,6 +2249,1664 @@
     --sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
   }
 
+  /* Look: Classic (data-look='classic'). */
+  [data-look='classic'] {
+    --sl-radius-sm: 0.0938rem;
+    --sl-radius-base: 0.1875rem;
+    --sl-radius-md: 0.2813rem;
+    --sl-radius-lg: 0.375rem;
+    --sl-radius-xl: 0.5625rem;
+    --sl-radius-2xl: 0.75rem;
+    --sl-radius-3xl: 1.125rem;
+    --sl-font-family-display: Roboto, sans-serif;
+    --sl-font-family-body: Roboto, sans-serif;
+    --sl-color-neutral-50: #f3fcff;
+    --sl-color-neutral-100: #eefaff;
+    --sl-color-neutral-200: #def6ff;
+    --sl-color-neutral-300: #d1f3ff;
+    --sl-color-neutral-400: #b6dfee;
+    --sl-color-neutral-500: #a9d5e5;
+    --sl-color-neutral-600: #8fb6c5;
+    --sl-color-neutral-700: #7da1af;
+    --sl-color-neutral-800: #6b8d99;
+    --sl-color-neutral-900: #53737f;
+    --sl-color-neutral-1000: #3c5a66;
+    --sl-color-neutral-1100: #203d48;
+    --sl-color-neutral-1200: #03202a;
+    --sl-color-primary-50: #fffaf9;
+    --sl-color-primary-75: #fff2ef;
+    --sl-color-primary-100: #fedfd7;
+    --sl-color-primary-200: #f7c7bb;
+    --sl-color-primary-300: #e5927d;
+    --sl-color-primary-400: #c37c6a;
+    --sl-color-primary-500: #a36759;
+    --sl-color-primary-600: #875549;
+    --sl-color-primary-700: #70463c;
+    --sl-color-primary-800: #54352d;
+    --sl-color-primary-900: #3b241f;
+    --sl-color-primary-1000: #2b1a16;
+    --sl-color-secondary-50: #f9fcfd;
+    --sl-color-secondary-75: #eef6fa;
+    --sl-color-secondary-100: #deeff5;
+    --sl-color-secondary-200: #b0d8e7;
+    --sl-color-secondary-300: #8fbdce;
+    --sl-color-secondary-400: #6b9cae;
+    --sl-color-secondary-500: #487d91;
+    --sl-color-secondary-600: #32687c;
+    --sl-color-secondary-700: #285768;
+    --sl-color-secondary-800: #1d414f;
+    --sl-color-secondary-900: #122d37;
+    --sl-color-secondary-1000: #071920;
+    --sl-color-tertiary-50: #fffbed;
+    --sl-color-tertiary-75: #fef5d5;
+    --sl-color-tertiary-100: #f7ecc7;
+    --sl-color-tertiary-200: #e2d1a1;
+    --sl-color-tertiary-300: #c5b58c;
+    --sl-color-tertiary-400: #a19472;
+    --sl-color-tertiary-500: #80765a;
+    --sl-color-tertiary-600: #6a614a;
+    --sl-color-tertiary-700: #58503c;
+    --sl-color-tertiary-800: #423c2d;
+    --sl-color-tertiary-900: #2e291e;
+    --sl-color-tertiary-1000: #1a170f;
+    --sl-color-quaternary-50: #f3fef9;
+    --sl-color-quaternary-75: #defbef;
+    --sl-color-quaternary-100: #caf5e1;
+    --sl-color-quaternary-200: #93e3b6;
+    --sl-color-quaternary-300: #77c699;
+    --sl-color-quaternary-400: #5ba37a;
+    --sl-color-quaternary-500: #488261;
+    --sl-color-quaternary-600: #3a6c50;
+    --sl-color-quaternary-700: #2f5941;
+    --sl-color-quaternary-800: #224331;
+    --sl-color-quaternary-900: #162e20;
+    --sl-color-quaternary-1000: #0a1a11;
+    --sl-color-success-50: #fafcfb;
+    --sl-color-success-75: #f0f6f2;
+    --sl-color-success-100: #e3efe7;
+    --sl-color-success-200: #bcd9c7;
+    --sl-color-success-300: #92c1a4;
+    --sl-color-success-400: #5ca37a;
+    --sl-color-success-500: #488261;
+    --sl-color-success-600: #3a6c50;
+    --sl-color-success-700: #2f5941;
+    --sl-color-success-800: #224331;
+    --sl-color-success-900: #162e20;
+    --sl-color-success-1000: #0a1a11;
+    --sl-color-warning-50: #fefbf6;
+    --sl-color-warning-75: #fbf4e5;
+    --sl-color-warning-100: #f7ebcf;
+    --sl-color-warning-200: #edcf8a;
+    --sl-color-warning-300: #dfb029;
+    --sl-color-warning-400: #b78f1f;
+    --sl-color-warning-500: #937217;
+    --sl-color-warning-600: #7a5e11;
+    --sl-color-warning-700: #654e0d;
+    --sl-color-warning-800: #4d3a07;
+    --sl-color-warning-900: #352804;
+    --sl-color-warning-1000: #1f1601;
+    --sl-color-error-75: #fff2f0;
+    --sl-color-error-100: #ffe7e3;
+    --sl-color-error-200: #ffc4bb;
+    --sl-color-error-300: #fd9d8e;
+    --sl-color-error-400: #f46857;
+    --sl-color-error-500: #e72117;
+    --sl-color-error-600: #c70000;
+    --sl-color-error-700: #a70000;
+    --sl-color-error-800: #800000;
+    --sl-color-error-900: #5c0000;
+    --sl-color-error-1000: #380000;
+    --sl-color-info-75: #f0f5fe;
+    --sl-color-info-100: #e2edfd;
+    --sl-color-info-200: #bbd3fa;
+    --sl-color-info-300: #91b8f5;
+    --sl-color-info-400: #5e95ed;
+    --sl-color-info-500: #2973e3;
+    --sl-color-info-600: #145dc8;
+    --sl-color-info-700: #0f4da8;
+    --sl-color-info-800: #093a80;
+    --sl-color-info-900: #04275c;
+    --sl-color-info-1000: #021539;
+    --sl-color-data-blue: #346ea3;
+    --sl-color-data-orange: #f6844e;
+    --sl-color-data-green: #5ba37a;
+    --sl-color-data-gold: #f1c54b;
+    --sl-color-data-slate: #688d99;
+    --sl-color-data-red: #f24646;
+    --sl-color-data-taupe: #867775;
+    --sl-color-data-rose: #e15a6a;
+    --sl-color-data-magenta: #bb529e;
+    --sl-color-data-brown: #b97350;
+    --sl-color-data-sky: #70ace4;
+    --sl-color-data-peach: #feb794;
+    --sl-color-data-mint: #8be0af;
+    --sl-color-data-sand: #e8d5a1;
+    --sl-color-data-ice: #a9d5e5;
+    --sl-color-data-salmon: #ff9797;
+    --sl-color-data-stone: #bab5b4;
+    --sl-color-data-pink: #ffb9c6;
+    --sl-color-data-orchid: #f3a1dd;
+    --sl-color-data-tan: #f0c5af;
+    --sl-font-size-md: 0.875rem;
+    --sl-font-size-lg: clamp(0.875rem, 0.8167rem + 0.2917vw, 1.05rem);
+    --sl-font-size-xl: clamp(1.05rem, 0.98rem + 0.35vw, 1.26rem);
+    --sl-font-size-2xl: clamp(1.26rem, 1.176rem + 0.42vw, 1.512rem);
+    --sl-font-size-3xl: clamp(1.512rem, 1.4112rem + 0.504vw, 1.8144rem);
+    --sl-font-size-4xl: clamp(1.8144rem, 1.6934rem + 0.6048vw, 2.1773rem);
+    --sl-font-size-5xl: clamp(2.1773rem, 2.0321rem + 0.7258vw, 2.6127rem);
+    --sl-font-size-6xl: clamp(2.6127rem, 2.4386rem + 0.8709vw, 3.1353rem);
+    --sl-font-size-7xl: clamp(3.1353rem, 2.9263rem + 1.0451vw, 3.7623rem);
+    --sl-font-size-8xl: clamp(3.7623rem, 3.5115rem + 1.2541vw, 4.5148rem);
+    --sl-font-size-9xl: clamp(4.5148rem, 4.2138rem + 1.5049vw, 5.4178rem);
+    --sl-line-height-xxs: 1.4;
+    --sl-line-height-xs: 1.4;
+    --sl-line-height-sm: 1.4;
+    --sl-line-height-md: 1.352;
+    --sl-line-height-lg: 1.296;
+    --sl-line-height-xl: 1.239;
+    --sl-line-height-2xl: 1.183;
+    --sl-line-height-3xl: 1.126;
+    --sl-vision-deuteranopia-color-primary-50: #fefafd;
+    --sl-vision-deuteranopia-color-primary-75: #fdf2f9;
+    --sl-vision-deuteranopia-color-primary-100: #f8deef;
+    --sl-vision-deuteranopia-color-primary-200: #efc6e1;
+    --sl-vision-deuteranopia-color-primary-300: #d890c0;
+    --sl-vision-deuteranopia-color-primary-400: #b87aa3;
+    --sl-vision-deuteranopia-color-primary-500: #9b6689;
+    --sl-vision-deuteranopia-color-primary-600: #7f5471;
+    --sl-vision-deuteranopia-color-primary-700: #6a465e;
+    --sl-vision-deuteranopia-color-primary-800: #4f3446;
+    --sl-vision-deuteranopia-color-primary-900: #372430;
+    --sl-vision-deuteranopia-color-primary-1000: #281a23;
+    --sl-vision-deuteranopia-color-secondary-50: #f9fcfd;
+    --sl-vision-deuteranopia-color-secondary-75: #eef6fa;
+    --sl-vision-deuteranopia-color-secondary-100: #deeff5;
+    --sl-vision-deuteranopia-color-secondary-200: #b0d8e7;
+    --sl-vision-deuteranopia-color-secondary-300: #8fbdce;
+    --sl-vision-deuteranopia-color-secondary-400: #6b9cae;
+    --sl-vision-deuteranopia-color-secondary-500: #487d91;
+    --sl-vision-deuteranopia-color-secondary-600: #32687c;
+    --sl-vision-deuteranopia-color-secondary-700: #285768;
+    --sl-vision-deuteranopia-color-secondary-800: #1d414f;
+    --sl-vision-deuteranopia-color-secondary-900: #122d37;
+    --sl-vision-deuteranopia-color-secondary-1000: #071920;
+    --sl-vision-deuteranopia-color-tertiary-50: #fdfcef;
+    --sl-vision-deuteranopia-color-tertiary-75: #f8f7d5;
+    --sl-vision-deuteranopia-color-tertiary-100: #f1eec7;
+    --sl-vision-deuteranopia-color-tertiary-200: #dbd3a2;
+    --sl-vision-deuteranopia-color-tertiary-300: #beb78c;
+    --sl-vision-deuteranopia-color-tertiary-400: #9b9672;
+    --sl-vision-deuteranopia-color-tertiary-500: #7c775a;
+    --sl-vision-deuteranopia-color-tertiary-600: #66624a;
+    --sl-vision-deuteranopia-color-tertiary-700: #55513d;
+    --sl-vision-deuteranopia-color-tertiary-800: #403d2d;
+    --sl-vision-deuteranopia-color-tertiary-900: #2c2a1e;
+    --sl-vision-deuteranopia-color-quaternary-50: #f3fef9;
+    --sl-vision-deuteranopia-color-quaternary-75: #defbef;
+    --sl-vision-deuteranopia-color-quaternary-100: #caf5e1;
+    --sl-vision-deuteranopia-color-quaternary-200: #93e3b6;
+    --sl-vision-deuteranopia-color-quaternary-300: #77c699;
+    --sl-vision-deuteranopia-color-quaternary-400: #5ba37a;
+    --sl-vision-deuteranopia-color-quaternary-500: #488261;
+    --sl-vision-deuteranopia-color-quaternary-600: #3a6c50;
+    --sl-vision-deuteranopia-color-quaternary-700: #2f5941;
+    --sl-vision-deuteranopia-color-quaternary-800: #224331;
+    --sl-vision-deuteranopia-color-quaternary-900: #162e20;
+    --sl-vision-deuteranopia-color-quaternary-1000: #0a1a11;
+    --sl-vision-deuteranopia-color-success-50: #fafcfa;
+    --sl-vision-deuteranopia-color-success-75: #f1f6f2;
+    --sl-vision-deuteranopia-color-success-100: #e4efe6;
+    --sl-vision-deuteranopia-color-success-200: #bed8c4;
+    --sl-vision-deuteranopia-color-success-300: #96c0a0;
+    --sl-vision-deuteranopia-color-success-400: #62a275;
+    --sl-vision-deuteranopia-color-success-500: #4d825c;
+    --sl-vision-deuteranopia-color-success-600: #3f6b4c;
+    --sl-vision-deuteranopia-color-success-700: #33593e;
+    --sl-vision-deuteranopia-color-success-800: #25432e;
+    --sl-vision-deuteranopia-color-success-900: #182e1f;
+    --sl-vision-deuteranopia-color-success-1000: #0b1a10;
+    --sl-vision-deuteranopia-color-warning-75: #fbf4e5;
+    --sl-vision-deuteranopia-color-warning-100: #f7ebcf;
+    --sl-vision-deuteranopia-color-warning-200: #edcf8a;
+    --sl-vision-deuteranopia-color-warning-300: #dfb029;
+    --sl-vision-deuteranopia-color-warning-400: #b78f1f;
+    --sl-vision-deuteranopia-color-warning-500: #937217;
+    --sl-vision-deuteranopia-color-warning-600: #7a5e11;
+    --sl-vision-deuteranopia-color-warning-700: #654e0d;
+    --sl-vision-deuteranopia-color-warning-800: #4d3a07;
+    --sl-vision-deuteranopia-color-warning-900: #352804;
+    --sl-vision-deuteranopia-color-warning-1000: #1f1601;
+    --sl-vision-deuteranopia-color-error-75: #fff2f0;
+    --sl-vision-deuteranopia-color-error-100: #ffe7e3;
+    --sl-vision-deuteranopia-color-error-200: #ffc4bb;
+    --sl-vision-deuteranopia-color-error-300: #fd9d8e;
+    --sl-vision-deuteranopia-color-error-400: #f46857;
+    --sl-vision-deuteranopia-color-error-500: #e72117;
+    --sl-vision-deuteranopia-color-error-600: #c70000;
+    --sl-vision-deuteranopia-color-error-700: #a70000;
+    --sl-vision-deuteranopia-color-error-800: #800000;
+    --sl-vision-deuteranopia-color-error-900: #5c0000;
+    --sl-vision-deuteranopia-color-error-1000: #380000;
+    --sl-vision-deuteranopia-color-info-50: #f9fbff;
+    --sl-vision-deuteranopia-color-info-75: #f0f5fe;
+    --sl-vision-deuteranopia-color-info-100: #e2edfd;
+    --sl-vision-deuteranopia-color-info-200: #bbd3fa;
+    --sl-vision-deuteranopia-color-info-300: #91b8f5;
+    --sl-vision-deuteranopia-color-info-400: #5e95ed;
+    --sl-vision-deuteranopia-color-info-500: #2973e3;
+    --sl-vision-deuteranopia-color-info-600: #145dc8;
+    --sl-vision-deuteranopia-color-info-700: #0f4da8;
+    --sl-vision-deuteranopia-color-info-800: #093a80;
+    --sl-vision-deuteranopia-color-info-900: #04275c;
+    --sl-vision-deuteranopia-color-info-1000: #021539;
+    --sl-vision-deuteranopia-color-data-blue: #346ea3;
+    --sl-vision-deuteranopia-color-data-orange: #eb7a44;
+    --sl-vision-deuteranopia-color-data-green: #5ba37a;
+    --sl-vision-deuteranopia-color-data-gold: #f1c54b;
+    --sl-vision-deuteranopia-color-data-slate: #608b99;
+    --sl-vision-deuteranopia-color-data-red: #f51d2f;
+    --sl-vision-deuteranopia-color-data-taupe: #6e6266;
+    --sl-vision-deuteranopia-color-data-rose: #d00459;
+    --sl-vision-deuteranopia-color-data-magenta: #bb529e;
+    --sl-vision-deuteranopia-color-data-brown: #b97350;
+    --sl-vision-deuteranopia-color-data-sky: #70ace4;
+    --sl-vision-deuteranopia-color-data-peach: #ba848e;
+    --sl-vision-deuteranopia-color-data-mint: #6bb762;
+    --sl-vision-deuteranopia-color-data-sand: #7e7453;
+    --sl-vision-deuteranopia-color-data-ice: #a2d3e8;
+    --sl-vision-deuteranopia-color-data-salmon: #f5807a;
+    --sl-vision-deuteranopia-color-data-stone: #9b9798;
+    --sl-vision-deuteranopia-color-data-pink: #a878ae;
+    --sl-vision-deuteranopia-color-data-orchid: #f3a1dd;
+    --sl-vision-deuteranopia-color-data-tan: #f0c5af;
+    --sl-vision-protanopia-color-primary-50: #fffafb;
+    --sl-vision-protanopia-color-primary-75: #fff2f4;
+    --sl-vision-protanopia-color-primary-100: #fddde4;
+    --sl-vision-protanopia-color-primary-200: #f6c6d0;
+    --sl-vision-protanopia-color-primary-300: #e38ea2;
+    --sl-vision-protanopia-color-primary-400: #c17989;
+    --sl-vision-protanopia-color-primary-500: #a26573;
+    --sl-vision-protanopia-color-primary-600: #86535f;
+    --sl-vision-protanopia-color-primary-700: #70454f;
+    --sl-vision-protanopia-color-primary-800: #54343b;
+    --sl-vision-protanopia-color-primary-900: #3b2329;
+    --sl-vision-protanopia-color-primary-1000: #2b191d;
+    --sl-vision-protanopia-color-secondary-50: #f9fcfd;
+    --sl-vision-protanopia-color-secondary-75: #eef6fa;
+    --sl-vision-protanopia-color-secondary-100: #deeff5;
+    --sl-vision-protanopia-color-secondary-200: #b0d8e7;
+    --sl-vision-protanopia-color-secondary-300: #8fbdce;
+    --sl-vision-protanopia-color-secondary-400: #6b9cae;
+    --sl-vision-protanopia-color-secondary-500: #487d91;
+    --sl-vision-protanopia-color-secondary-600: #32687c;
+    --sl-vision-protanopia-color-secondary-700: #285768;
+    --sl-vision-protanopia-color-secondary-800: #1d414f;
+    --sl-vision-protanopia-color-secondary-900: #122d37;
+    --sl-vision-protanopia-color-secondary-1000: #071920;
+    --sl-vision-protanopia-color-tertiary-50: #f6fef0;
+    --sl-vision-protanopia-color-tertiary-75: #eafadc;
+    --sl-vision-protanopia-color-tertiary-100: #e0f2ce;
+    --sl-vision-protanopia-color-tertiary-200: #c6d8aa;
+    --sl-vision-protanopia-color-tertiary-300: #acbc94;
+    --sl-vision-protanopia-color-tertiary-400: #8c9978;
+    --sl-vision-protanopia-color-tertiary-500: #707a5f;
+    --sl-vision-protanopia-color-tertiary-600: #5c654e;
+    --sl-vision-protanopia-color-tertiary-700: #4c5440;
+    --sl-vision-protanopia-color-tertiary-800: #393f30;
+    --sl-vision-protanopia-color-tertiary-900: #272b20;
+    --sl-vision-protanopia-color-tertiary-1000: #151811;
+    --sl-vision-protanopia-color-quaternary-50: #f3fef9;
+    --sl-vision-protanopia-color-quaternary-75: #defbef;
+    --sl-vision-protanopia-color-quaternary-100: #caf5e1;
+    --sl-vision-protanopia-color-quaternary-200: #93e3b6;
+    --sl-vision-protanopia-color-quaternary-300: #77c699;
+    --sl-vision-protanopia-color-quaternary-400: #5ba37a;
+    --sl-vision-protanopia-color-quaternary-500: #488261;
+    --sl-vision-protanopia-color-quaternary-600: #3a6c50;
+    --sl-vision-protanopia-color-quaternary-700: #2f5941;
+    --sl-vision-protanopia-color-quaternary-800: #224331;
+    --sl-vision-protanopia-color-quaternary-900: #162e20;
+    --sl-vision-protanopia-color-quaternary-1000: #0a1a11;
+    --sl-vision-protanopia-color-success-50: #fafcfa;
+    --sl-vision-protanopia-color-success-75: #f2f6f1;
+    --sl-vision-protanopia-color-success-100: #e7eee4;
+    --sl-vision-protanopia-color-success-200: #c5d7be;
+    --sl-vision-protanopia-color-success-300: #a2be96;
+    --sl-vision-protanopia-color-success-400: #76a066;
+    --sl-vision-protanopia-color-success-500: #5d804f;
+    --sl-vision-protanopia-color-success-600: #4c6941;
+    --sl-vision-protanopia-color-success-700: #3f5735;
+    --sl-vision-protanopia-color-success-800: #2f4227;
+    --sl-vision-protanopia-color-success-900: #1f2d19;
+    --sl-vision-protanopia-color-success-1000: #10190c;
+    --sl-vision-protanopia-color-warning-50: #fafcf7;
+    --sl-vision-protanopia-color-warning-75: #f0f7e7;
+    --sl-vision-protanopia-color-warning-100: #e3f1d3;
+    --sl-vision-protanopia-color-warning-200: #bedc95;
+    --sl-vision-protanopia-color-warning-300: #99c456;
+    --sl-vision-protanopia-color-warning-400: #7da045;
+    --sl-vision-protanopia-color-warning-500: #637f35;
+    --sl-vision-protanopia-color-warning-600: #51692b;
+    --sl-vision-protanopia-color-warning-700: #435722;
+    --sl-vision-protanopia-color-warning-800: #324218;
+    --sl-vision-protanopia-color-warning-900: #212d0e;
+    --sl-vision-protanopia-color-warning-1000: #111906;
+    --sl-vision-protanopia-color-error-200: #ffc4bb;
+    --sl-vision-protanopia-color-error-300: #fd9d8e;
+    --sl-vision-protanopia-color-error-400: #f46857;
+    --sl-vision-protanopia-color-error-500: #e72117;
+    --sl-vision-protanopia-color-error-600: #c70000;
+    --sl-vision-protanopia-color-error-700: #a70000;
+    --sl-vision-protanopia-color-error-800: #800000;
+    --sl-vision-protanopia-color-error-900: #5c0000;
+    --sl-vision-protanopia-color-error-1000: #380000;
+    --sl-vision-protanopia-color-info-50: #f9fbff;
+    --sl-vision-protanopia-color-info-75: #f0f5fe;
+    --sl-vision-protanopia-color-info-100: #e2edfd;
+    --sl-vision-protanopia-color-info-200: #bbd3fa;
+    --sl-vision-protanopia-color-info-300: #91b8f5;
+    --sl-vision-protanopia-color-info-400: #5e95ed;
+    --sl-vision-protanopia-color-info-500: #2973e3;
+    --sl-vision-protanopia-color-info-600: #145dc8;
+    --sl-vision-protanopia-color-info-700: #0f4da8;
+    --sl-vision-protanopia-color-info-800: #093a80;
+    --sl-vision-protanopia-color-info-900: #04275c;
+    --sl-vision-protanopia-color-info-1000: #021539;
+    --sl-vision-protanopia-color-data-blue: #346ea3;
+    --sl-vision-protanopia-color-data-orange: #f5722e;
+    --sl-vision-protanopia-color-data-green: #5ba37a;
+    --sl-vision-protanopia-color-data-gold: #f1c54b;
+    --sl-vision-protanopia-color-data-slate: #628da3;
+    --sl-vision-protanopia-color-data-red: #fd2a36;
+    --sl-vision-protanopia-color-data-taupe: #32242c;
+    --sl-vision-protanopia-color-data-rose: #e15a6a;
+    --sl-vision-protanopia-color-data-magenta: #bb529e;
+    --sl-vision-protanopia-color-data-brown: #b97350;
+    --sl-vision-protanopia-color-data-sky: #70ace4;
+    --sl-vision-protanopia-color-data-peach: #e59c54;
+    --sl-vision-protanopia-color-data-mint: #53c4ae;
+    --sl-vision-protanopia-color-data-sand: #e8d5a1;
+    --sl-vision-protanopia-color-data-ice: #9ed3ee;
+    --sl-vision-protanopia-color-data-salmon: #fd787c;
+    --sl-vision-protanopia-color-data-stone: #686566;
+    --sl-vision-protanopia-color-data-pink: #c37c98;
+    --sl-vision-protanopia-color-data-orchid: #f3a1dd;
+    --sl-vision-protanopia-color-data-tan: #f0c5af;
+    --sl-vision-tritanopia-color-primary-50: #fffaf9;
+    --sl-vision-tritanopia-color-primary-75: #fff2ef;
+    --sl-vision-tritanopia-color-primary-100: #fedfd7;
+    --sl-vision-tritanopia-color-primary-200: #f7c7bb;
+    --sl-vision-tritanopia-color-primary-300: #e5927d;
+    --sl-vision-tritanopia-color-primary-400: #c37c6a;
+    --sl-vision-tritanopia-color-primary-500: #a36759;
+    --sl-vision-tritanopia-color-primary-600: #875549;
+    --sl-vision-tritanopia-color-primary-700: #70463c;
+    --sl-vision-tritanopia-color-primary-800: #54352d;
+    --sl-vision-tritanopia-color-primary-900: #3b241f;
+    --sl-vision-tritanopia-color-primary-1000: #2b1a16;
+    --sl-vision-tritanopia-color-secondary-50: #f9fcfd;
+    --sl-vision-tritanopia-color-secondary-75: #eef6fa;
+    --sl-vision-tritanopia-color-secondary-100: #deeef6;
+    --sl-vision-tritanopia-color-secondary-200: #b2d8e9;
+    --sl-vision-tritanopia-color-secondary-300: #91bcd0;
+    --sl-vision-tritanopia-color-secondary-400: #6d9bb1;
+    --sl-vision-tritanopia-color-secondary-500: #4c7d93;
+    --sl-vision-tritanopia-color-secondary-600: #35687f;
+    --sl-vision-tritanopia-color-secondary-700: #2b566a;
+    --sl-vision-tritanopia-color-secondary-800: #1f4150;
+    --sl-vision-tritanopia-color-secondary-900: #132d38;
+    --sl-vision-tritanopia-color-secondary-1000: #081921;
+    --sl-vision-tritanopia-color-tertiary-50: #fffbed;
+    --sl-vision-tritanopia-color-tertiary-75: #fef5d5;
+    --sl-vision-tritanopia-color-tertiary-100: #f7ecc7;
+    --sl-vision-tritanopia-color-tertiary-200: #e2d1a1;
+    --sl-vision-tritanopia-color-tertiary-300: #c5b58c;
+    --sl-vision-tritanopia-color-tertiary-400: #a19472;
+    --sl-vision-tritanopia-color-tertiary-500: #80765a;
+    --sl-vision-tritanopia-color-tertiary-600: #6a614a;
+    --sl-vision-tritanopia-color-tertiary-700: #58503c;
+    --sl-vision-tritanopia-color-tertiary-800: #423c2d;
+    --sl-vision-tritanopia-color-tertiary-900: #2e291e;
+    --sl-vision-tritanopia-color-tertiary-1000: #1a170f;
+    --sl-vision-tritanopia-color-quaternary-50: #f3fef9;
+    --sl-vision-tritanopia-color-quaternary-75: #defbef;
+    --sl-vision-tritanopia-color-quaternary-100: #caf5e1;
+    --sl-vision-tritanopia-color-quaternary-200: #93e3b6;
+    --sl-vision-tritanopia-color-quaternary-300: #77c699;
+    --sl-vision-tritanopia-color-quaternary-400: #5ba37a;
+    --sl-vision-tritanopia-color-quaternary-500: #488261;
+    --sl-vision-tritanopia-color-quaternary-600: #3a6c50;
+    --sl-vision-tritanopia-color-quaternary-700: #2f5941;
+    --sl-vision-tritanopia-color-quaternary-800: #224331;
+    --sl-vision-tritanopia-color-quaternary-900: #162e20;
+    --sl-vision-tritanopia-color-quaternary-1000: #0a1a11;
+    --sl-vision-tritanopia-color-success-50: #fbfbf9;
+    --sl-vision-tritanopia-color-success-75: #f3f6ef;
+    --sl-vision-tritanopia-color-success-100: #e9eee2;
+    --sl-vision-tritanopia-color-success-200: #ccd6ba;
+    --sl-vision-tritanopia-color-success-300: #aebc8f;
+    --sl-vision-tritanopia-color-success-400: #899c59;
+    --sl-vision-tritanopia-color-success-500: #6c7d45;
+    --sl-vision-tritanopia-color-success-600: #596738;
+    --sl-vision-tritanopia-color-success-700: #4a552d;
+    --sl-vision-tritanopia-color-success-800: #374021;
+    --sl-vision-tritanopia-color-success-900: #262c15;
+    --sl-vision-tritanopia-color-success-1000: #141909;
+    --sl-vision-tritanopia-color-warning-50: #fbfcf7;
+    --sl-vision-tritanopia-color-warning-75: #f3f7e6;
+    --sl-vision-tritanopia-color-warning-100: #e9efd1;
+    --sl-vision-tritanopia-color-warning-200: #cbd98f;
+    --sl-vision-tritanopia-color-warning-300: #adbf45;
+    --sl-vision-tritanopia-color-warning-400: #8d9c37;
+    --sl-vision-tritanopia-color-warning-500: #707d2a;
+    --sl-vision-tritanopia-color-warning-600: #5d6722;
+    --sl-vision-tritanopia-color-warning-700: #4c551a;
+    --sl-vision-tritanopia-color-warning-800: #394012;
+    --sl-vision-tritanopia-color-warning-900: #272c0a;
+    --sl-vision-tritanopia-color-warning-1000: #151904;
+    --sl-vision-tritanopia-color-error-50: #fffafa;
+    --sl-vision-tritanopia-color-error-75: #fff2f0;
+    --sl-vision-tritanopia-color-error-100: #ffe7e3;
+    --sl-vision-tritanopia-color-error-200: #ffc4bb;
+    --sl-vision-tritanopia-color-error-300: #fd9d8e;
+    --sl-vision-tritanopia-color-error-400: #f46857;
+    --sl-vision-tritanopia-color-error-500: #e72117;
+    --sl-vision-tritanopia-color-error-600: #c70000;
+    --sl-vision-tritanopia-color-error-700: #a70000;
+    --sl-vision-tritanopia-color-error-800: #800000;
+    --sl-vision-tritanopia-color-error-900: #5c0000;
+    --sl-vision-tritanopia-color-error-1000: #380000;
+    --sl-vision-tritanopia-color-info-75: #eff5fe;
+    --sl-vision-tritanopia-color-info-100: #e2edfd;
+    --sl-vision-tritanopia-color-info-200: #bad4f9;
+    --sl-vision-tritanopia-color-info-300: #8eb9f3;
+    --sl-vision-tritanopia-color-info-400: #5896eb;
+    --sl-vision-tritanopia-color-info-500: #1974e1;
+    --sl-vision-tritanopia-color-info-600: #005fc3;
+    --sl-vision-tritanopia-color-info-700: #004fa4;
+    --sl-vision-tritanopia-color-info-800: #003b7e;
+    --sl-vision-tritanopia-color-info-900: #00285a;
+    --sl-vision-tritanopia-color-info-1000: #001638;
+    --sl-vision-tritanopia-color-data-blue: #346ea3;
+    --sl-vision-tritanopia-color-data-orange: #f5722e;
+    --sl-vision-tritanopia-color-data-green: #8b996b;
+    --sl-vision-tritanopia-color-data-gold: #f1c54b;
+    --sl-vision-tritanopia-color-data-slate: #688d99;
+    --sl-vision-tritanopia-color-data-red: #b22429;
+    --sl-vision-tritanopia-color-data-taupe: #867775;
+    --sl-vision-tritanopia-color-data-rose: #f44224;
+    --sl-vision-tritanopia-color-data-magenta: #98498f;
+    --sl-vision-tritanopia-color-data-brown: #b97350;
+    --sl-vision-tritanopia-color-data-sky: #629ed5;
+    --sl-vision-tritanopia-color-data-peach: #faa684;
+    --sl-vision-tritanopia-color-data-mint: #c2d39c;
+    --sl-vision-tritanopia-color-data-sand: #e8d5a1;
+    --sl-vision-tritanopia-color-data-ice: #a9d5e5;
+    --sl-vision-tritanopia-color-data-salmon: #fd7974;
+    --sl-vision-tritanopia-color-data-stone: #bab5b4;
+    --sl-vision-tritanopia-color-data-pink: #ad8499;
+    --sl-vision-tritanopia-color-data-orchid: #f37dbb;
+    --sl-vision-tritanopia-color-data-tan: #f0c5af;
+    --sl-vision-achromatopsia-color-primary-50: #fcfbfb;
+    --sl-vision-achromatopsia-color-primary-75: #f6f4f4;
+    --sl-vision-achromatopsia-color-primary-100: #efebea;
+    --sl-vision-achromatopsia-color-primary-200: #d9d0ce;
+    --sl-vision-achromatopsia-color-primary-300: #c1b3b0;
+    --sl-vision-achromatopsia-color-primary-400: #a4908b;
+    --sl-vision-achromatopsia-color-primary-500: #8a716b;
+    --sl-vision-achromatopsia-color-primary-600: #7e645d;
+    --sl-vision-achromatopsia-color-primary-700: #744539;
+    --sl-vision-achromatopsia-color-primary-800: #631c0a;
+    --sl-vision-achromatopsia-color-primary-900: #531204;
+    --sl-vision-achromatopsia-color-primary-1000: #460900;
+    --sl-vision-achromatopsia-color-secondary-50: #f9fcfd;
+    --sl-vision-achromatopsia-color-secondary-75: #eef6fa;
+    --sl-vision-achromatopsia-color-secondary-100: #deeff5;
+    --sl-vision-achromatopsia-color-secondary-200: #b0d8e7;
+    --sl-vision-achromatopsia-color-secondary-300: #8fbdce;
+    --sl-vision-achromatopsia-color-secondary-400: #6b9cae;
+    --sl-vision-achromatopsia-color-secondary-500: #487d91;
+    --sl-vision-achromatopsia-color-secondary-600: #32687c;
+    --sl-vision-achromatopsia-color-secondary-700: #285768;
+    --sl-vision-achromatopsia-color-secondary-800: #1d414f;
+    --sl-vision-achromatopsia-color-secondary-900: #122d37;
+    --sl-vision-achromatopsia-color-secondary-1000: #071920;
+    --sl-vision-achromatopsia-color-tertiary-50: #fffbef;
+    --sl-vision-achromatopsia-color-tertiary-75: #fef5d6;
+    --sl-vision-achromatopsia-color-tertiary-100: #f7ecc7;
+    --sl-vision-achromatopsia-color-tertiary-200: #e2d1a1;
+    --sl-vision-achromatopsia-color-tertiary-300: #c5b58c;
+    --sl-vision-achromatopsia-color-tertiary-400: #a19472;
+    --sl-vision-achromatopsia-color-tertiary-500: #80765a;
+    --sl-vision-achromatopsia-color-tertiary-600: #6a614a;
+    --sl-vision-achromatopsia-color-tertiary-700: #58503c;
+    --sl-vision-achromatopsia-color-tertiary-800: #423c2d;
+    --sl-vision-achromatopsia-color-tertiary-900: #2e291e;
+    --sl-vision-achromatopsia-color-tertiary-1000: #1a170f;
+    --sl-vision-achromatopsia-color-quaternary-50: #fafcfb;
+    --sl-vision-achromatopsia-color-quaternary-75: #f2f6f4;
+    --sl-vision-achromatopsia-color-quaternary-100: #e6edea;
+    --sl-vision-achromatopsia-color-quaternary-200: #c5d6ce;
+    --sl-vision-achromatopsia-color-quaternary-300: #a2bcb1;
+    --sl-vision-achromatopsia-color-quaternary-400: #56a47a;
+    --sl-vision-achromatopsia-color-quaternary-500: #35855b;
+    --sl-vision-achromatopsia-color-quaternary-600: #226f48;
+    --sl-vision-achromatopsia-color-quaternary-700: #165c3a;
+    --sl-vision-achromatopsia-color-quaternary-800: #0f462b;
+    --sl-vision-achromatopsia-color-quaternary-900: #08301c;
+    --sl-vision-achromatopsia-color-quaternary-1000: #031b0e;
+    --sl-vision-achromatopsia-color-success-50: #fafcfb;
+    --sl-vision-achromatopsia-color-success-75: #f0f6f2;
+    --sl-vision-achromatopsia-color-success-100: #e3efe7;
+    --sl-vision-achromatopsia-color-success-200: #bdd8c7;
+    --sl-vision-achromatopsia-color-success-300: #95c0a5;
+    --sl-vision-achromatopsia-color-success-400: #5fa27b;
+    --sl-vision-achromatopsia-color-success-500: #468260;
+    --sl-vision-achromatopsia-color-success-600: #396c4f;
+    --sl-vision-achromatopsia-color-success-700: #2e5941;
+    --sl-vision-achromatopsia-color-success-800: #214330;
+    --sl-vision-achromatopsia-color-success-900: #152f20;
+    --sl-vision-achromatopsia-color-success-1000: #091a11;
+    --sl-vision-achromatopsia-color-warning-50: #fefbf6;
+    --sl-vision-achromatopsia-color-warning-75: #fbf4e5;
+    --sl-vision-achromatopsia-color-warning-100: #f7ebcf;
+    --sl-vision-achromatopsia-color-warning-200: #edcf8a;
+    --sl-vision-achromatopsia-color-warning-300: #dfb029;
+    --sl-vision-achromatopsia-color-warning-400: #b78f1f;
+    --sl-vision-achromatopsia-color-warning-500: #937217;
+    --sl-vision-achromatopsia-color-warning-600: #7a5e11;
+    --sl-vision-achromatopsia-color-warning-700: #654e0d;
+    --sl-vision-achromatopsia-color-warning-800: #4d3a07;
+    --sl-vision-achromatopsia-color-warning-900: #352804;
+    --sl-vision-achromatopsia-color-warning-1000: #1f1601;
+    --sl-vision-achromatopsia-color-error-50: #fdfbfb;
+    --sl-vision-achromatopsia-color-error-75: #f9f4f3;
+    --sl-vision-achromatopsia-color-error-100: #f3eae9;
+    --sl-vision-achromatopsia-color-error-200: #e1cdca;
+    --sl-vision-achromatopsia-color-error-300: #cfafaa;
+    --sl-vision-achromatopsia-color-error-400: #b78a83;
+    --sl-vision-achromatopsia-color-error-500: #9f6960;
+    --sl-vision-achromatopsia-color-error-600: #8f5148;
+    --sl-vision-achromatopsia-color-error-700: #803d34;
+    --sl-vision-achromatopsia-color-error-800: #6e231b;
+    --sl-vision-achromatopsia-color-error-900: #5b0301;
+    --sl-vision-achromatopsia-color-error-1000: #380000;
+    --sl-vision-achromatopsia-color-info-50: #f9fbfe;
+    --sl-vision-achromatopsia-color-info-75: #f0f5fd;
+    --sl-vision-achromatopsia-color-info-100: #e3edfc;
+    --sl-vision-achromatopsia-color-info-200: #bdd3f7;
+    --sl-vision-achromatopsia-color-info-300: #95b8f0;
+    --sl-vision-achromatopsia-color-info-400: #6295e6;
+    --sl-vision-achromatopsia-color-info-500: #3274db;
+    --sl-vision-achromatopsia-color-info-600: #035bd0;
+    --sl-vision-achromatopsia-color-info-700: #024cae;
+    --sl-vision-achromatopsia-color-info-800: #013986;
+    --sl-vision-achromatopsia-color-info-900: #012660;
+    --sl-vision-achromatopsia-color-info-1000: #00153c;
+    --sl-vision-achromatopsia-color-data-blue: #346ea3;
+    --sl-vision-achromatopsia-color-data-orange: #bf100e;
+    --sl-vision-achromatopsia-color-data-green: #5ba37a;
+    --sl-vision-achromatopsia-color-data-gold: #f1c54b;
+    --sl-vision-achromatopsia-color-data-slate: #164958;
+    --sl-vision-achromatopsia-color-data-red: #f24646;
+    --sl-vision-achromatopsia-color-data-taupe: #867775;
+    --sl-vision-achromatopsia-color-data-rose: #d60f46;
+    --sl-vision-achromatopsia-color-data-magenta: #bb529e;
+    --sl-vision-achromatopsia-color-data-brown: #b97350;
+    --sl-vision-achromatopsia-color-data-sky: #005181;
+    --sl-vision-achromatopsia-color-data-peach: #52020c;
+    --sl-vision-achromatopsia-color-data-mint: #01bd93;
+    --sl-vision-achromatopsia-color-data-sand: #766c3a;
+    --sl-vision-achromatopsia-color-data-ice: #064e5b;
+    --sl-vision-achromatopsia-color-data-salmon: #3a0101;
+    --sl-vision-achromatopsia-color-data-stone: #898584;
+    --sl-vision-achromatopsia-color-data-pink: #985057;
+    --sl-vision-achromatopsia-color-data-orchid: #8d1651;
+    --sl-vision-achromatopsia-color-data-tan: #f0c5af;
+    --sl-color-data-1: var(--sl-color-data-blue);
+    --sl-color-data-2: var(--sl-color-data-orange);
+    --sl-color-data-3: var(--sl-color-data-green);
+    --sl-color-data-4: var(--sl-color-data-gold);
+    --sl-color-data-5: var(--sl-color-data-slate);
+    --sl-color-data-6: var(--sl-color-data-red);
+    --sl-color-data-7: var(--sl-color-data-taupe);
+    --sl-color-data-8: var(--sl-color-data-rose);
+    --sl-color-data-9: var(--sl-color-data-magenta);
+    --sl-color-data-10: var(--sl-color-data-brown);
+    --sl-color-data-11: var(--sl-color-data-sky);
+    --sl-color-data-13: var(--sl-color-data-mint);
+    --sl-color-data-14: var(--sl-color-data-sand);
+    --sl-color-data-15: var(--sl-color-data-ice);
+    --sl-color-data-16: var(--sl-color-data-salmon);
+    --sl-color-data-17: var(--sl-color-data-stone);
+    --sl-color-data-18: var(--sl-color-data-pink);
+    --sl-color-data-19: var(--sl-color-data-orchid);
+    --sl-color-data-20: var(--sl-color-data-tan);
+    --sl-vision-deuteranopia-color-data-1: var(--sl-vision-deuteranopia-color-data-blue);
+    --sl-vision-deuteranopia-color-data-2: var(--sl-vision-deuteranopia-color-data-orange);
+    --sl-vision-deuteranopia-color-data-3: var(--sl-vision-deuteranopia-color-data-green);
+    --sl-vision-deuteranopia-color-data-4: var(--sl-vision-deuteranopia-color-data-gold);
+    --sl-vision-deuteranopia-color-data-5: var(--sl-vision-deuteranopia-color-data-slate);
+    --sl-vision-deuteranopia-color-data-6: var(--sl-vision-deuteranopia-color-data-red);
+    --sl-vision-deuteranopia-color-data-7: var(--sl-vision-deuteranopia-color-data-taupe);
+    --sl-vision-deuteranopia-color-data-8: var(--sl-vision-deuteranopia-color-data-rose);
+    --sl-vision-deuteranopia-color-data-9: var(--sl-vision-deuteranopia-color-data-magenta);
+    --sl-vision-deuteranopia-color-data-10: var(--sl-vision-deuteranopia-color-data-brown);
+    --sl-vision-deuteranopia-color-data-11: var(--sl-vision-deuteranopia-color-data-sky);
+    --sl-vision-deuteranopia-color-data-13: var(--sl-vision-deuteranopia-color-data-mint);
+    --sl-vision-deuteranopia-color-data-14: var(--sl-vision-deuteranopia-color-data-sand);
+    --sl-vision-deuteranopia-color-data-15: var(--sl-vision-deuteranopia-color-data-ice);
+    --sl-vision-deuteranopia-color-data-16: var(--sl-vision-deuteranopia-color-data-salmon);
+    --sl-vision-deuteranopia-color-data-17: var(--sl-vision-deuteranopia-color-data-stone);
+    --sl-vision-deuteranopia-color-data-18: var(--sl-vision-deuteranopia-color-data-pink);
+    --sl-vision-deuteranopia-color-data-19: var(--sl-vision-deuteranopia-color-data-orchid);
+    --sl-vision-deuteranopia-color-data-20: var(--sl-vision-deuteranopia-color-data-tan);
+    --sl-vision-protanopia-color-data-1: var(--sl-vision-protanopia-color-data-blue);
+    --sl-vision-protanopia-color-data-2: var(--sl-vision-protanopia-color-data-orange);
+    --sl-vision-protanopia-color-data-3: var(--sl-vision-protanopia-color-data-green);
+    --sl-vision-protanopia-color-data-4: var(--sl-vision-protanopia-color-data-gold);
+    --sl-vision-protanopia-color-data-5: var(--sl-vision-protanopia-color-data-slate);
+    --sl-vision-protanopia-color-data-6: var(--sl-vision-protanopia-color-data-red);
+    --sl-vision-protanopia-color-data-7: var(--sl-vision-protanopia-color-data-taupe);
+    --sl-vision-protanopia-color-data-8: var(--sl-vision-protanopia-color-data-rose);
+    --sl-vision-protanopia-color-data-9: var(--sl-vision-protanopia-color-data-magenta);
+    --sl-vision-protanopia-color-data-10: var(--sl-vision-protanopia-color-data-brown);
+    --sl-vision-protanopia-color-data-11: var(--sl-vision-protanopia-color-data-sky);
+    --sl-vision-protanopia-color-data-13: var(--sl-vision-protanopia-color-data-mint);
+    --sl-vision-protanopia-color-data-14: var(--sl-vision-protanopia-color-data-sand);
+    --sl-vision-protanopia-color-data-15: var(--sl-vision-protanopia-color-data-ice);
+    --sl-vision-protanopia-color-data-16: var(--sl-vision-protanopia-color-data-salmon);
+    --sl-vision-protanopia-color-data-17: var(--sl-vision-protanopia-color-data-stone);
+    --sl-vision-protanopia-color-data-18: var(--sl-vision-protanopia-color-data-pink);
+    --sl-vision-protanopia-color-data-19: var(--sl-vision-protanopia-color-data-orchid);
+    --sl-vision-protanopia-color-data-20: var(--sl-vision-protanopia-color-data-tan);
+    --sl-vision-tritanopia-color-data-1: var(--sl-vision-tritanopia-color-data-blue);
+    --sl-vision-tritanopia-color-data-2: var(--sl-vision-tritanopia-color-data-orange);
+    --sl-vision-tritanopia-color-data-3: var(--sl-vision-tritanopia-color-data-green);
+    --sl-vision-tritanopia-color-data-4: var(--sl-vision-tritanopia-color-data-gold);
+    --sl-vision-tritanopia-color-data-5: var(--sl-vision-tritanopia-color-data-slate);
+    --sl-vision-tritanopia-color-data-6: var(--sl-vision-tritanopia-color-data-red);
+    --sl-vision-tritanopia-color-data-7: var(--sl-vision-tritanopia-color-data-taupe);
+    --sl-vision-tritanopia-color-data-8: var(--sl-vision-tritanopia-color-data-rose);
+    --sl-vision-tritanopia-color-data-9: var(--sl-vision-tritanopia-color-data-magenta);
+    --sl-vision-tritanopia-color-data-10: var(--sl-vision-tritanopia-color-data-brown);
+    --sl-vision-tritanopia-color-data-11: var(--sl-vision-tritanopia-color-data-sky);
+    --sl-vision-tritanopia-color-data-13: var(--sl-vision-tritanopia-color-data-mint);
+    --sl-vision-tritanopia-color-data-14: var(--sl-vision-tritanopia-color-data-sand);
+    --sl-vision-tritanopia-color-data-15: var(--sl-vision-tritanopia-color-data-ice);
+    --sl-vision-tritanopia-color-data-16: var(--sl-vision-tritanopia-color-data-salmon);
+    --sl-vision-tritanopia-color-data-17: var(--sl-vision-tritanopia-color-data-stone);
+    --sl-vision-tritanopia-color-data-18: var(--sl-vision-tritanopia-color-data-pink);
+    --sl-vision-tritanopia-color-data-19: var(--sl-vision-tritanopia-color-data-orchid);
+    --sl-vision-tritanopia-color-data-20: var(--sl-vision-tritanopia-color-data-tan);
+    --sl-vision-achromatopsia-color-data-1: var(--sl-vision-achromatopsia-color-data-blue);
+    --sl-vision-achromatopsia-color-data-2: var(--sl-vision-achromatopsia-color-data-orange);
+    --sl-vision-achromatopsia-color-data-3: var(--sl-vision-achromatopsia-color-data-green);
+    --sl-vision-achromatopsia-color-data-4: var(--sl-vision-achromatopsia-color-data-gold);
+    --sl-vision-achromatopsia-color-data-5: var(--sl-vision-achromatopsia-color-data-slate);
+    --sl-vision-achromatopsia-color-data-6: var(--sl-vision-achromatopsia-color-data-red);
+    --sl-vision-achromatopsia-color-data-7: var(--sl-vision-achromatopsia-color-data-taupe);
+    --sl-vision-achromatopsia-color-data-8: var(--sl-vision-achromatopsia-color-data-rose);
+    --sl-vision-achromatopsia-color-data-9: var(--sl-vision-achromatopsia-color-data-magenta);
+    --sl-vision-achromatopsia-color-data-10: var(--sl-vision-achromatopsia-color-data-brown);
+    --sl-vision-achromatopsia-color-data-11: var(--sl-vision-achromatopsia-color-data-sky);
+    --sl-vision-achromatopsia-color-data-13: var(--sl-vision-achromatopsia-color-data-mint);
+    --sl-vision-achromatopsia-color-data-14: var(--sl-vision-achromatopsia-color-data-sand);
+    --sl-vision-achromatopsia-color-data-15: var(--sl-vision-achromatopsia-color-data-ice);
+    --sl-vision-achromatopsia-color-data-16: var(--sl-vision-achromatopsia-color-data-salmon);
+    --sl-vision-achromatopsia-color-data-17: var(--sl-vision-achromatopsia-color-data-stone);
+    --sl-vision-achromatopsia-color-data-18: var(--sl-vision-achromatopsia-color-data-pink);
+    --sl-vision-achromatopsia-color-data-19: var(--sl-vision-achromatopsia-color-data-orchid);
+    --sl-vision-achromatopsia-color-data-20: var(--sl-vision-achromatopsia-color-data-tan);
+    --sl-scope-accent-solid: var(--sl-color-primary-500);
+    --sl-scope-accent-solid-hover: var(--sl-color-primary-600);
+    --sl-scope-accent-solid-active: var(--sl-color-primary-700);
+    --sl-scope-accent-on-solid: var(--sl-color-white);
+    --sl-scope-accent-soft-active: var(--sl-color-primary-100);
+    --sl-scope-chrome-fg: var(--sl-color-neutral-1100);
+    --sl-button-radius: var(--sl-radius-control);
+  }
+
+  [data-theme='deuteranopia'][data-look='classic'] {
+    --sl-color-primary-50: var(--sl-vision-deuteranopia-color-primary-50);
+    --sl-color-primary-75: var(--sl-vision-deuteranopia-color-primary-75);
+    --sl-color-primary-100: var(--sl-vision-deuteranopia-color-primary-100);
+    --sl-color-primary-200: var(--sl-vision-deuteranopia-color-primary-200);
+    --sl-color-primary-300: var(--sl-vision-deuteranopia-color-primary-300);
+    --sl-color-primary-400: var(--sl-vision-deuteranopia-color-primary-400);
+    --sl-color-primary-500: var(--sl-vision-deuteranopia-color-primary-500);
+    --sl-color-primary-600: var(--sl-vision-deuteranopia-color-primary-600);
+    --sl-color-primary-700: var(--sl-vision-deuteranopia-color-primary-700);
+    --sl-color-primary-800: var(--sl-vision-deuteranopia-color-primary-800);
+    --sl-color-primary-900: var(--sl-vision-deuteranopia-color-primary-900);
+    --sl-color-primary-1000: var(--sl-vision-deuteranopia-color-primary-1000);
+    --sl-color-primary-on-50: var(--sl-vision-deuteranopia-color-primary-on-50);
+    --sl-color-primary-on-75: var(--sl-vision-deuteranopia-color-primary-on-75);
+    --sl-color-primary-on-100: var(--sl-vision-deuteranopia-color-primary-on-100);
+    --sl-color-primary-on-200: var(--sl-vision-deuteranopia-color-primary-on-200);
+    --sl-color-primary-on-300: var(--sl-vision-deuteranopia-color-primary-on-300);
+    --sl-color-primary-on-400: var(--sl-vision-deuteranopia-color-primary-on-400);
+    --sl-color-primary-on-500: var(--sl-vision-deuteranopia-color-primary-on-500);
+    --sl-color-primary-on-600: var(--sl-vision-deuteranopia-color-primary-on-600);
+    --sl-color-primary-on-700: var(--sl-vision-deuteranopia-color-primary-on-700);
+    --sl-color-primary-on-800: var(--sl-vision-deuteranopia-color-primary-on-800);
+    --sl-color-primary-on-900: var(--sl-vision-deuteranopia-color-primary-on-900);
+    --sl-color-primary-on-1000: var(--sl-vision-deuteranopia-color-primary-on-1000);
+    --sl-color-secondary-50: var(--sl-vision-deuteranopia-color-secondary-50);
+    --sl-color-secondary-75: var(--sl-vision-deuteranopia-color-secondary-75);
+    --sl-color-secondary-100: var(--sl-vision-deuteranopia-color-secondary-100);
+    --sl-color-secondary-200: var(--sl-vision-deuteranopia-color-secondary-200);
+    --sl-color-secondary-300: var(--sl-vision-deuteranopia-color-secondary-300);
+    --sl-color-secondary-400: var(--sl-vision-deuteranopia-color-secondary-400);
+    --sl-color-secondary-500: var(--sl-vision-deuteranopia-color-secondary-500);
+    --sl-color-secondary-600: var(--sl-vision-deuteranopia-color-secondary-600);
+    --sl-color-secondary-700: var(--sl-vision-deuteranopia-color-secondary-700);
+    --sl-color-secondary-800: var(--sl-vision-deuteranopia-color-secondary-800);
+    --sl-color-secondary-900: var(--sl-vision-deuteranopia-color-secondary-900);
+    --sl-color-secondary-1000: var(--sl-vision-deuteranopia-color-secondary-1000);
+    --sl-color-secondary-on-50: var(--sl-vision-deuteranopia-color-secondary-on-50);
+    --sl-color-secondary-on-75: var(--sl-vision-deuteranopia-color-secondary-on-75);
+    --sl-color-secondary-on-100: var(--sl-vision-deuteranopia-color-secondary-on-100);
+    --sl-color-secondary-on-200: var(--sl-vision-deuteranopia-color-secondary-on-200);
+    --sl-color-secondary-on-300: var(--sl-vision-deuteranopia-color-secondary-on-300);
+    --sl-color-secondary-on-400: var(--sl-vision-deuteranopia-color-secondary-on-400);
+    --sl-color-secondary-on-500: var(--sl-vision-deuteranopia-color-secondary-on-500);
+    --sl-color-secondary-on-600: var(--sl-vision-deuteranopia-color-secondary-on-600);
+    --sl-color-secondary-on-700: var(--sl-vision-deuteranopia-color-secondary-on-700);
+    --sl-color-secondary-on-800: var(--sl-vision-deuteranopia-color-secondary-on-800);
+    --sl-color-secondary-on-900: var(--sl-vision-deuteranopia-color-secondary-on-900);
+    --sl-color-secondary-on-1000: var(--sl-vision-deuteranopia-color-secondary-on-1000);
+    --sl-color-tertiary-50: var(--sl-vision-deuteranopia-color-tertiary-50);
+    --sl-color-tertiary-75: var(--sl-vision-deuteranopia-color-tertiary-75);
+    --sl-color-tertiary-100: var(--sl-vision-deuteranopia-color-tertiary-100);
+    --sl-color-tertiary-200: var(--sl-vision-deuteranopia-color-tertiary-200);
+    --sl-color-tertiary-300: var(--sl-vision-deuteranopia-color-tertiary-300);
+    --sl-color-tertiary-400: var(--sl-vision-deuteranopia-color-tertiary-400);
+    --sl-color-tertiary-500: var(--sl-vision-deuteranopia-color-tertiary-500);
+    --sl-color-tertiary-600: var(--sl-vision-deuteranopia-color-tertiary-600);
+    --sl-color-tertiary-700: var(--sl-vision-deuteranopia-color-tertiary-700);
+    --sl-color-tertiary-800: var(--sl-vision-deuteranopia-color-tertiary-800);
+    --sl-color-tertiary-900: var(--sl-vision-deuteranopia-color-tertiary-900);
+    --sl-color-tertiary-1000: var(--sl-vision-deuteranopia-color-tertiary-1000);
+    --sl-color-tertiary-on-50: var(--sl-vision-deuteranopia-color-tertiary-on-50);
+    --sl-color-tertiary-on-75: var(--sl-vision-deuteranopia-color-tertiary-on-75);
+    --sl-color-tertiary-on-100: var(--sl-vision-deuteranopia-color-tertiary-on-100);
+    --sl-color-tertiary-on-200: var(--sl-vision-deuteranopia-color-tertiary-on-200);
+    --sl-color-tertiary-on-300: var(--sl-vision-deuteranopia-color-tertiary-on-300);
+    --sl-color-tertiary-on-400: var(--sl-vision-deuteranopia-color-tertiary-on-400);
+    --sl-color-tertiary-on-500: var(--sl-vision-deuteranopia-color-tertiary-on-500);
+    --sl-color-tertiary-on-600: var(--sl-vision-deuteranopia-color-tertiary-on-600);
+    --sl-color-tertiary-on-700: var(--sl-vision-deuteranopia-color-tertiary-on-700);
+    --sl-color-tertiary-on-800: var(--sl-vision-deuteranopia-color-tertiary-on-800);
+    --sl-color-tertiary-on-900: var(--sl-vision-deuteranopia-color-tertiary-on-900);
+    --sl-color-tertiary-on-1000: var(--sl-vision-deuteranopia-color-tertiary-on-1000);
+    --sl-color-quaternary-50: var(--sl-vision-deuteranopia-color-quaternary-50);
+    --sl-color-quaternary-75: var(--sl-vision-deuteranopia-color-quaternary-75);
+    --sl-color-quaternary-100: var(--sl-vision-deuteranopia-color-quaternary-100);
+    --sl-color-quaternary-200: var(--sl-vision-deuteranopia-color-quaternary-200);
+    --sl-color-quaternary-300: var(--sl-vision-deuteranopia-color-quaternary-300);
+    --sl-color-quaternary-400: var(--sl-vision-deuteranopia-color-quaternary-400);
+    --sl-color-quaternary-500: var(--sl-vision-deuteranopia-color-quaternary-500);
+    --sl-color-quaternary-600: var(--sl-vision-deuteranopia-color-quaternary-600);
+    --sl-color-quaternary-700: var(--sl-vision-deuteranopia-color-quaternary-700);
+    --sl-color-quaternary-800: var(--sl-vision-deuteranopia-color-quaternary-800);
+    --sl-color-quaternary-900: var(--sl-vision-deuteranopia-color-quaternary-900);
+    --sl-color-quaternary-1000: var(--sl-vision-deuteranopia-color-quaternary-1000);
+    --sl-color-quaternary-on-50: var(--sl-vision-deuteranopia-color-quaternary-on-50);
+    --sl-color-quaternary-on-75: var(--sl-vision-deuteranopia-color-quaternary-on-75);
+    --sl-color-quaternary-on-100: var(--sl-vision-deuteranopia-color-quaternary-on-100);
+    --sl-color-quaternary-on-200: var(--sl-vision-deuteranopia-color-quaternary-on-200);
+    --sl-color-quaternary-on-300: var(--sl-vision-deuteranopia-color-quaternary-on-300);
+    --sl-color-quaternary-on-400: var(--sl-vision-deuteranopia-color-quaternary-on-400);
+    --sl-color-quaternary-on-500: var(--sl-vision-deuteranopia-color-quaternary-on-500);
+    --sl-color-quaternary-on-600: var(--sl-vision-deuteranopia-color-quaternary-on-600);
+    --sl-color-quaternary-on-700: var(--sl-vision-deuteranopia-color-quaternary-on-700);
+    --sl-color-quaternary-on-800: var(--sl-vision-deuteranopia-color-quaternary-on-800);
+    --sl-color-quaternary-on-900: var(--sl-vision-deuteranopia-color-quaternary-on-900);
+    --sl-color-quaternary-on-1000: var(--sl-vision-deuteranopia-color-quaternary-on-1000);
+    --sl-color-success-50: var(--sl-vision-deuteranopia-color-success-50);
+    --sl-color-success-75: var(--sl-vision-deuteranopia-color-success-75);
+    --sl-color-success-100: var(--sl-vision-deuteranopia-color-success-100);
+    --sl-color-success-200: var(--sl-vision-deuteranopia-color-success-200);
+    --sl-color-success-300: var(--sl-vision-deuteranopia-color-success-300);
+    --sl-color-success-400: var(--sl-vision-deuteranopia-color-success-400);
+    --sl-color-success-500: var(--sl-vision-deuteranopia-color-success-500);
+    --sl-color-success-600: var(--sl-vision-deuteranopia-color-success-600);
+    --sl-color-success-700: var(--sl-vision-deuteranopia-color-success-700);
+    --sl-color-success-800: var(--sl-vision-deuteranopia-color-success-800);
+    --sl-color-success-900: var(--sl-vision-deuteranopia-color-success-900);
+    --sl-color-success-1000: var(--sl-vision-deuteranopia-color-success-1000);
+    --sl-color-success-on-50: var(--sl-vision-deuteranopia-color-success-on-50);
+    --sl-color-success-on-75: var(--sl-vision-deuteranopia-color-success-on-75);
+    --sl-color-success-on-100: var(--sl-vision-deuteranopia-color-success-on-100);
+    --sl-color-success-on-200: var(--sl-vision-deuteranopia-color-success-on-200);
+    --sl-color-success-on-300: var(--sl-vision-deuteranopia-color-success-on-300);
+    --sl-color-success-on-400: var(--sl-vision-deuteranopia-color-success-on-400);
+    --sl-color-success-on-500: var(--sl-vision-deuteranopia-color-success-on-500);
+    --sl-color-success-on-600: var(--sl-vision-deuteranopia-color-success-on-600);
+    --sl-color-success-on-700: var(--sl-vision-deuteranopia-color-success-on-700);
+    --sl-color-success-on-800: var(--sl-vision-deuteranopia-color-success-on-800);
+    --sl-color-success-on-900: var(--sl-vision-deuteranopia-color-success-on-900);
+    --sl-color-success-on-1000: var(--sl-vision-deuteranopia-color-success-on-1000);
+    --sl-color-warning-50: var(--sl-vision-deuteranopia-color-warning-50);
+    --sl-color-warning-75: var(--sl-vision-deuteranopia-color-warning-75);
+    --sl-color-warning-100: var(--sl-vision-deuteranopia-color-warning-100);
+    --sl-color-warning-200: var(--sl-vision-deuteranopia-color-warning-200);
+    --sl-color-warning-300: var(--sl-vision-deuteranopia-color-warning-300);
+    --sl-color-warning-400: var(--sl-vision-deuteranopia-color-warning-400);
+    --sl-color-warning-500: var(--sl-vision-deuteranopia-color-warning-500);
+    --sl-color-warning-600: var(--sl-vision-deuteranopia-color-warning-600);
+    --sl-color-warning-700: var(--sl-vision-deuteranopia-color-warning-700);
+    --sl-color-warning-800: var(--sl-vision-deuteranopia-color-warning-800);
+    --sl-color-warning-900: var(--sl-vision-deuteranopia-color-warning-900);
+    --sl-color-warning-1000: var(--sl-vision-deuteranopia-color-warning-1000);
+    --sl-color-warning-on-50: var(--sl-vision-deuteranopia-color-warning-on-50);
+    --sl-color-warning-on-75: var(--sl-vision-deuteranopia-color-warning-on-75);
+    --sl-color-warning-on-100: var(--sl-vision-deuteranopia-color-warning-on-100);
+    --sl-color-warning-on-200: var(--sl-vision-deuteranopia-color-warning-on-200);
+    --sl-color-warning-on-300: var(--sl-vision-deuteranopia-color-warning-on-300);
+    --sl-color-warning-on-400: var(--sl-vision-deuteranopia-color-warning-on-400);
+    --sl-color-warning-on-500: var(--sl-vision-deuteranopia-color-warning-on-500);
+    --sl-color-warning-on-600: var(--sl-vision-deuteranopia-color-warning-on-600);
+    --sl-color-warning-on-700: var(--sl-vision-deuteranopia-color-warning-on-700);
+    --sl-color-warning-on-800: var(--sl-vision-deuteranopia-color-warning-on-800);
+    --sl-color-warning-on-900: var(--sl-vision-deuteranopia-color-warning-on-900);
+    --sl-color-warning-on-1000: var(--sl-vision-deuteranopia-color-warning-on-1000);
+    --sl-color-error-50: var(--sl-vision-deuteranopia-color-error-50);
+    --sl-color-error-75: var(--sl-vision-deuteranopia-color-error-75);
+    --sl-color-error-100: var(--sl-vision-deuteranopia-color-error-100);
+    --sl-color-error-200: var(--sl-vision-deuteranopia-color-error-200);
+    --sl-color-error-300: var(--sl-vision-deuteranopia-color-error-300);
+    --sl-color-error-400: var(--sl-vision-deuteranopia-color-error-400);
+    --sl-color-error-500: var(--sl-vision-deuteranopia-color-error-500);
+    --sl-color-error-600: var(--sl-vision-deuteranopia-color-error-600);
+    --sl-color-error-700: var(--sl-vision-deuteranopia-color-error-700);
+    --sl-color-error-800: var(--sl-vision-deuteranopia-color-error-800);
+    --sl-color-error-900: var(--sl-vision-deuteranopia-color-error-900);
+    --sl-color-error-1000: var(--sl-vision-deuteranopia-color-error-1000);
+    --sl-color-error-on-50: var(--sl-vision-deuteranopia-color-error-on-50);
+    --sl-color-error-on-75: var(--sl-vision-deuteranopia-color-error-on-75);
+    --sl-color-error-on-100: var(--sl-vision-deuteranopia-color-error-on-100);
+    --sl-color-error-on-200: var(--sl-vision-deuteranopia-color-error-on-200);
+    --sl-color-error-on-300: var(--sl-vision-deuteranopia-color-error-on-300);
+    --sl-color-error-on-400: var(--sl-vision-deuteranopia-color-error-on-400);
+    --sl-color-error-on-500: var(--sl-vision-deuteranopia-color-error-on-500);
+    --sl-color-error-on-600: var(--sl-vision-deuteranopia-color-error-on-600);
+    --sl-color-error-on-700: var(--sl-vision-deuteranopia-color-error-on-700);
+    --sl-color-error-on-800: var(--sl-vision-deuteranopia-color-error-on-800);
+    --sl-color-error-on-900: var(--sl-vision-deuteranopia-color-error-on-900);
+    --sl-color-error-on-1000: var(--sl-vision-deuteranopia-color-error-on-1000);
+    --sl-color-info-50: var(--sl-vision-deuteranopia-color-info-50);
+    --sl-color-info-75: var(--sl-vision-deuteranopia-color-info-75);
+    --sl-color-info-100: var(--sl-vision-deuteranopia-color-info-100);
+    --sl-color-info-200: var(--sl-vision-deuteranopia-color-info-200);
+    --sl-color-info-300: var(--sl-vision-deuteranopia-color-info-300);
+    --sl-color-info-400: var(--sl-vision-deuteranopia-color-info-400);
+    --sl-color-info-500: var(--sl-vision-deuteranopia-color-info-500);
+    --sl-color-info-600: var(--sl-vision-deuteranopia-color-info-600);
+    --sl-color-info-700: var(--sl-vision-deuteranopia-color-info-700);
+    --sl-color-info-800: var(--sl-vision-deuteranopia-color-info-800);
+    --sl-color-info-900: var(--sl-vision-deuteranopia-color-info-900);
+    --sl-color-info-1000: var(--sl-vision-deuteranopia-color-info-1000);
+    --sl-color-info-on-50: var(--sl-vision-deuteranopia-color-info-on-50);
+    --sl-color-info-on-75: var(--sl-vision-deuteranopia-color-info-on-75);
+    --sl-color-info-on-100: var(--sl-vision-deuteranopia-color-info-on-100);
+    --sl-color-info-on-200: var(--sl-vision-deuteranopia-color-info-on-200);
+    --sl-color-info-on-300: var(--sl-vision-deuteranopia-color-info-on-300);
+    --sl-color-info-on-400: var(--sl-vision-deuteranopia-color-info-on-400);
+    --sl-color-info-on-500: var(--sl-vision-deuteranopia-color-info-on-500);
+    --sl-color-info-on-600: var(--sl-vision-deuteranopia-color-info-on-600);
+    --sl-color-info-on-700: var(--sl-vision-deuteranopia-color-info-on-700);
+    --sl-color-info-on-800: var(--sl-vision-deuteranopia-color-info-on-800);
+    --sl-color-info-on-900: var(--sl-vision-deuteranopia-color-info-on-900);
+    --sl-color-info-on-1000: var(--sl-vision-deuteranopia-color-info-on-1000);
+    --sl-color-data-1: var(--sl-vision-deuteranopia-color-data-1);
+    --sl-color-data-2: var(--sl-vision-deuteranopia-color-data-2);
+    --sl-color-data-3: var(--sl-vision-deuteranopia-color-data-3);
+    --sl-color-data-4: var(--sl-vision-deuteranopia-color-data-4);
+    --sl-color-data-5: var(--sl-vision-deuteranopia-color-data-5);
+    --sl-color-data-6: var(--sl-vision-deuteranopia-color-data-6);
+    --sl-color-data-7: var(--sl-vision-deuteranopia-color-data-7);
+    --sl-color-data-8: var(--sl-vision-deuteranopia-color-data-8);
+    --sl-color-data-9: var(--sl-vision-deuteranopia-color-data-9);
+    --sl-color-data-10: var(--sl-vision-deuteranopia-color-data-10);
+    --sl-color-data-11: var(--sl-vision-deuteranopia-color-data-11);
+    --sl-color-data-12: var(--sl-vision-deuteranopia-color-data-12);
+    --sl-color-data-13: var(--sl-vision-deuteranopia-color-data-13);
+    --sl-color-data-14: var(--sl-vision-deuteranopia-color-data-14);
+    --sl-color-data-15: var(--sl-vision-deuteranopia-color-data-15);
+    --sl-color-data-16: var(--sl-vision-deuteranopia-color-data-16);
+    --sl-color-data-17: var(--sl-vision-deuteranopia-color-data-17);
+    --sl-color-data-18: var(--sl-vision-deuteranopia-color-data-18);
+    --sl-color-data-19: var(--sl-vision-deuteranopia-color-data-19);
+    --sl-color-data-20: var(--sl-vision-deuteranopia-color-data-20);
+    --sl-color-data-blue: var(--sl-vision-deuteranopia-color-data-blue);
+    --sl-color-data-orange: var(--sl-vision-deuteranopia-color-data-orange);
+    --sl-color-data-green: var(--sl-vision-deuteranopia-color-data-green);
+    --sl-color-data-gold: var(--sl-vision-deuteranopia-color-data-gold);
+    --sl-color-data-slate: var(--sl-vision-deuteranopia-color-data-slate);
+    --sl-color-data-red: var(--sl-vision-deuteranopia-color-data-red);
+    --sl-color-data-taupe: var(--sl-vision-deuteranopia-color-data-taupe);
+    --sl-color-data-rose: var(--sl-vision-deuteranopia-color-data-rose);
+    --sl-color-data-magenta: var(--sl-vision-deuteranopia-color-data-magenta);
+    --sl-color-data-brown: var(--sl-vision-deuteranopia-color-data-brown);
+    --sl-color-data-sky: var(--sl-vision-deuteranopia-color-data-sky);
+    --sl-color-data-peach: var(--sl-vision-deuteranopia-color-data-peach);
+    --sl-color-data-mint: var(--sl-vision-deuteranopia-color-data-mint);
+    --sl-color-data-sand: var(--sl-vision-deuteranopia-color-data-sand);
+    --sl-color-data-ice: var(--sl-vision-deuteranopia-color-data-ice);
+    --sl-color-data-salmon: var(--sl-vision-deuteranopia-color-data-salmon);
+    --sl-color-data-stone: var(--sl-vision-deuteranopia-color-data-stone);
+    --sl-color-data-pink: var(--sl-vision-deuteranopia-color-data-pink);
+    --sl-color-data-orchid: var(--sl-vision-deuteranopia-color-data-orchid);
+    --sl-color-data-tan: var(--sl-vision-deuteranopia-color-data-tan);
+  }
+
+  [data-theme='protanopia'][data-look='classic'] {
+    --sl-color-primary-50: var(--sl-vision-protanopia-color-primary-50);
+    --sl-color-primary-75: var(--sl-vision-protanopia-color-primary-75);
+    --sl-color-primary-100: var(--sl-vision-protanopia-color-primary-100);
+    --sl-color-primary-200: var(--sl-vision-protanopia-color-primary-200);
+    --sl-color-primary-300: var(--sl-vision-protanopia-color-primary-300);
+    --sl-color-primary-400: var(--sl-vision-protanopia-color-primary-400);
+    --sl-color-primary-500: var(--sl-vision-protanopia-color-primary-500);
+    --sl-color-primary-600: var(--sl-vision-protanopia-color-primary-600);
+    --sl-color-primary-700: var(--sl-vision-protanopia-color-primary-700);
+    --sl-color-primary-800: var(--sl-vision-protanopia-color-primary-800);
+    --sl-color-primary-900: var(--sl-vision-protanopia-color-primary-900);
+    --sl-color-primary-1000: var(--sl-vision-protanopia-color-primary-1000);
+    --sl-color-primary-on-50: var(--sl-vision-protanopia-color-primary-on-50);
+    --sl-color-primary-on-75: var(--sl-vision-protanopia-color-primary-on-75);
+    --sl-color-primary-on-100: var(--sl-vision-protanopia-color-primary-on-100);
+    --sl-color-primary-on-200: var(--sl-vision-protanopia-color-primary-on-200);
+    --sl-color-primary-on-300: var(--sl-vision-protanopia-color-primary-on-300);
+    --sl-color-primary-on-400: var(--sl-vision-protanopia-color-primary-on-400);
+    --sl-color-primary-on-500: var(--sl-vision-protanopia-color-primary-on-500);
+    --sl-color-primary-on-600: var(--sl-vision-protanopia-color-primary-on-600);
+    --sl-color-primary-on-700: var(--sl-vision-protanopia-color-primary-on-700);
+    --sl-color-primary-on-800: var(--sl-vision-protanopia-color-primary-on-800);
+    --sl-color-primary-on-900: var(--sl-vision-protanopia-color-primary-on-900);
+    --sl-color-primary-on-1000: var(--sl-vision-protanopia-color-primary-on-1000);
+    --sl-color-secondary-50: var(--sl-vision-protanopia-color-secondary-50);
+    --sl-color-secondary-75: var(--sl-vision-protanopia-color-secondary-75);
+    --sl-color-secondary-100: var(--sl-vision-protanopia-color-secondary-100);
+    --sl-color-secondary-200: var(--sl-vision-protanopia-color-secondary-200);
+    --sl-color-secondary-300: var(--sl-vision-protanopia-color-secondary-300);
+    --sl-color-secondary-400: var(--sl-vision-protanopia-color-secondary-400);
+    --sl-color-secondary-500: var(--sl-vision-protanopia-color-secondary-500);
+    --sl-color-secondary-600: var(--sl-vision-protanopia-color-secondary-600);
+    --sl-color-secondary-700: var(--sl-vision-protanopia-color-secondary-700);
+    --sl-color-secondary-800: var(--sl-vision-protanopia-color-secondary-800);
+    --sl-color-secondary-900: var(--sl-vision-protanopia-color-secondary-900);
+    --sl-color-secondary-1000: var(--sl-vision-protanopia-color-secondary-1000);
+    --sl-color-secondary-on-50: var(--sl-vision-protanopia-color-secondary-on-50);
+    --sl-color-secondary-on-75: var(--sl-vision-protanopia-color-secondary-on-75);
+    --sl-color-secondary-on-100: var(--sl-vision-protanopia-color-secondary-on-100);
+    --sl-color-secondary-on-200: var(--sl-vision-protanopia-color-secondary-on-200);
+    --sl-color-secondary-on-300: var(--sl-vision-protanopia-color-secondary-on-300);
+    --sl-color-secondary-on-400: var(--sl-vision-protanopia-color-secondary-on-400);
+    --sl-color-secondary-on-500: var(--sl-vision-protanopia-color-secondary-on-500);
+    --sl-color-secondary-on-600: var(--sl-vision-protanopia-color-secondary-on-600);
+    --sl-color-secondary-on-700: var(--sl-vision-protanopia-color-secondary-on-700);
+    --sl-color-secondary-on-800: var(--sl-vision-protanopia-color-secondary-on-800);
+    --sl-color-secondary-on-900: var(--sl-vision-protanopia-color-secondary-on-900);
+    --sl-color-secondary-on-1000: var(--sl-vision-protanopia-color-secondary-on-1000);
+    --sl-color-tertiary-50: var(--sl-vision-protanopia-color-tertiary-50);
+    --sl-color-tertiary-75: var(--sl-vision-protanopia-color-tertiary-75);
+    --sl-color-tertiary-100: var(--sl-vision-protanopia-color-tertiary-100);
+    --sl-color-tertiary-200: var(--sl-vision-protanopia-color-tertiary-200);
+    --sl-color-tertiary-300: var(--sl-vision-protanopia-color-tertiary-300);
+    --sl-color-tertiary-400: var(--sl-vision-protanopia-color-tertiary-400);
+    --sl-color-tertiary-500: var(--sl-vision-protanopia-color-tertiary-500);
+    --sl-color-tertiary-600: var(--sl-vision-protanopia-color-tertiary-600);
+    --sl-color-tertiary-700: var(--sl-vision-protanopia-color-tertiary-700);
+    --sl-color-tertiary-800: var(--sl-vision-protanopia-color-tertiary-800);
+    --sl-color-tertiary-900: var(--sl-vision-protanopia-color-tertiary-900);
+    --sl-color-tertiary-1000: var(--sl-vision-protanopia-color-tertiary-1000);
+    --sl-color-tertiary-on-50: var(--sl-vision-protanopia-color-tertiary-on-50);
+    --sl-color-tertiary-on-75: var(--sl-vision-protanopia-color-tertiary-on-75);
+    --sl-color-tertiary-on-100: var(--sl-vision-protanopia-color-tertiary-on-100);
+    --sl-color-tertiary-on-200: var(--sl-vision-protanopia-color-tertiary-on-200);
+    --sl-color-tertiary-on-300: var(--sl-vision-protanopia-color-tertiary-on-300);
+    --sl-color-tertiary-on-400: var(--sl-vision-protanopia-color-tertiary-on-400);
+    --sl-color-tertiary-on-500: var(--sl-vision-protanopia-color-tertiary-on-500);
+    --sl-color-tertiary-on-600: var(--sl-vision-protanopia-color-tertiary-on-600);
+    --sl-color-tertiary-on-700: var(--sl-vision-protanopia-color-tertiary-on-700);
+    --sl-color-tertiary-on-800: var(--sl-vision-protanopia-color-tertiary-on-800);
+    --sl-color-tertiary-on-900: var(--sl-vision-protanopia-color-tertiary-on-900);
+    --sl-color-tertiary-on-1000: var(--sl-vision-protanopia-color-tertiary-on-1000);
+    --sl-color-quaternary-50: var(--sl-vision-protanopia-color-quaternary-50);
+    --sl-color-quaternary-75: var(--sl-vision-protanopia-color-quaternary-75);
+    --sl-color-quaternary-100: var(--sl-vision-protanopia-color-quaternary-100);
+    --sl-color-quaternary-200: var(--sl-vision-protanopia-color-quaternary-200);
+    --sl-color-quaternary-300: var(--sl-vision-protanopia-color-quaternary-300);
+    --sl-color-quaternary-400: var(--sl-vision-protanopia-color-quaternary-400);
+    --sl-color-quaternary-500: var(--sl-vision-protanopia-color-quaternary-500);
+    --sl-color-quaternary-600: var(--sl-vision-protanopia-color-quaternary-600);
+    --sl-color-quaternary-700: var(--sl-vision-protanopia-color-quaternary-700);
+    --sl-color-quaternary-800: var(--sl-vision-protanopia-color-quaternary-800);
+    --sl-color-quaternary-900: var(--sl-vision-protanopia-color-quaternary-900);
+    --sl-color-quaternary-1000: var(--sl-vision-protanopia-color-quaternary-1000);
+    --sl-color-quaternary-on-50: var(--sl-vision-protanopia-color-quaternary-on-50);
+    --sl-color-quaternary-on-75: var(--sl-vision-protanopia-color-quaternary-on-75);
+    --sl-color-quaternary-on-100: var(--sl-vision-protanopia-color-quaternary-on-100);
+    --sl-color-quaternary-on-200: var(--sl-vision-protanopia-color-quaternary-on-200);
+    --sl-color-quaternary-on-300: var(--sl-vision-protanopia-color-quaternary-on-300);
+    --sl-color-quaternary-on-400: var(--sl-vision-protanopia-color-quaternary-on-400);
+    --sl-color-quaternary-on-500: var(--sl-vision-protanopia-color-quaternary-on-500);
+    --sl-color-quaternary-on-600: var(--sl-vision-protanopia-color-quaternary-on-600);
+    --sl-color-quaternary-on-700: var(--sl-vision-protanopia-color-quaternary-on-700);
+    --sl-color-quaternary-on-800: var(--sl-vision-protanopia-color-quaternary-on-800);
+    --sl-color-quaternary-on-900: var(--sl-vision-protanopia-color-quaternary-on-900);
+    --sl-color-quaternary-on-1000: var(--sl-vision-protanopia-color-quaternary-on-1000);
+    --sl-color-success-50: var(--sl-vision-protanopia-color-success-50);
+    --sl-color-success-75: var(--sl-vision-protanopia-color-success-75);
+    --sl-color-success-100: var(--sl-vision-protanopia-color-success-100);
+    --sl-color-success-200: var(--sl-vision-protanopia-color-success-200);
+    --sl-color-success-300: var(--sl-vision-protanopia-color-success-300);
+    --sl-color-success-400: var(--sl-vision-protanopia-color-success-400);
+    --sl-color-success-500: var(--sl-vision-protanopia-color-success-500);
+    --sl-color-success-600: var(--sl-vision-protanopia-color-success-600);
+    --sl-color-success-700: var(--sl-vision-protanopia-color-success-700);
+    --sl-color-success-800: var(--sl-vision-protanopia-color-success-800);
+    --sl-color-success-900: var(--sl-vision-protanopia-color-success-900);
+    --sl-color-success-1000: var(--sl-vision-protanopia-color-success-1000);
+    --sl-color-success-on-50: var(--sl-vision-protanopia-color-success-on-50);
+    --sl-color-success-on-75: var(--sl-vision-protanopia-color-success-on-75);
+    --sl-color-success-on-100: var(--sl-vision-protanopia-color-success-on-100);
+    --sl-color-success-on-200: var(--sl-vision-protanopia-color-success-on-200);
+    --sl-color-success-on-300: var(--sl-vision-protanopia-color-success-on-300);
+    --sl-color-success-on-400: var(--sl-vision-protanopia-color-success-on-400);
+    --sl-color-success-on-500: var(--sl-vision-protanopia-color-success-on-500);
+    --sl-color-success-on-600: var(--sl-vision-protanopia-color-success-on-600);
+    --sl-color-success-on-700: var(--sl-vision-protanopia-color-success-on-700);
+    --sl-color-success-on-800: var(--sl-vision-protanopia-color-success-on-800);
+    --sl-color-success-on-900: var(--sl-vision-protanopia-color-success-on-900);
+    --sl-color-success-on-1000: var(--sl-vision-protanopia-color-success-on-1000);
+    --sl-color-warning-50: var(--sl-vision-protanopia-color-warning-50);
+    --sl-color-warning-75: var(--sl-vision-protanopia-color-warning-75);
+    --sl-color-warning-100: var(--sl-vision-protanopia-color-warning-100);
+    --sl-color-warning-200: var(--sl-vision-protanopia-color-warning-200);
+    --sl-color-warning-300: var(--sl-vision-protanopia-color-warning-300);
+    --sl-color-warning-400: var(--sl-vision-protanopia-color-warning-400);
+    --sl-color-warning-500: var(--sl-vision-protanopia-color-warning-500);
+    --sl-color-warning-600: var(--sl-vision-protanopia-color-warning-600);
+    --sl-color-warning-700: var(--sl-vision-protanopia-color-warning-700);
+    --sl-color-warning-800: var(--sl-vision-protanopia-color-warning-800);
+    --sl-color-warning-900: var(--sl-vision-protanopia-color-warning-900);
+    --sl-color-warning-1000: var(--sl-vision-protanopia-color-warning-1000);
+    --sl-color-warning-on-50: var(--sl-vision-protanopia-color-warning-on-50);
+    --sl-color-warning-on-75: var(--sl-vision-protanopia-color-warning-on-75);
+    --sl-color-warning-on-100: var(--sl-vision-protanopia-color-warning-on-100);
+    --sl-color-warning-on-200: var(--sl-vision-protanopia-color-warning-on-200);
+    --sl-color-warning-on-300: var(--sl-vision-protanopia-color-warning-on-300);
+    --sl-color-warning-on-400: var(--sl-vision-protanopia-color-warning-on-400);
+    --sl-color-warning-on-500: var(--sl-vision-protanopia-color-warning-on-500);
+    --sl-color-warning-on-600: var(--sl-vision-protanopia-color-warning-on-600);
+    --sl-color-warning-on-700: var(--sl-vision-protanopia-color-warning-on-700);
+    --sl-color-warning-on-800: var(--sl-vision-protanopia-color-warning-on-800);
+    --sl-color-warning-on-900: var(--sl-vision-protanopia-color-warning-on-900);
+    --sl-color-warning-on-1000: var(--sl-vision-protanopia-color-warning-on-1000);
+    --sl-color-error-50: var(--sl-vision-protanopia-color-error-50);
+    --sl-color-error-75: var(--sl-vision-protanopia-color-error-75);
+    --sl-color-error-100: var(--sl-vision-protanopia-color-error-100);
+    --sl-color-error-200: var(--sl-vision-protanopia-color-error-200);
+    --sl-color-error-300: var(--sl-vision-protanopia-color-error-300);
+    --sl-color-error-400: var(--sl-vision-protanopia-color-error-400);
+    --sl-color-error-500: var(--sl-vision-protanopia-color-error-500);
+    --sl-color-error-600: var(--sl-vision-protanopia-color-error-600);
+    --sl-color-error-700: var(--sl-vision-protanopia-color-error-700);
+    --sl-color-error-800: var(--sl-vision-protanopia-color-error-800);
+    --sl-color-error-900: var(--sl-vision-protanopia-color-error-900);
+    --sl-color-error-1000: var(--sl-vision-protanopia-color-error-1000);
+    --sl-color-error-on-50: var(--sl-vision-protanopia-color-error-on-50);
+    --sl-color-error-on-75: var(--sl-vision-protanopia-color-error-on-75);
+    --sl-color-error-on-100: var(--sl-vision-protanopia-color-error-on-100);
+    --sl-color-error-on-200: var(--sl-vision-protanopia-color-error-on-200);
+    --sl-color-error-on-300: var(--sl-vision-protanopia-color-error-on-300);
+    --sl-color-error-on-400: var(--sl-vision-protanopia-color-error-on-400);
+    --sl-color-error-on-500: var(--sl-vision-protanopia-color-error-on-500);
+    --sl-color-error-on-600: var(--sl-vision-protanopia-color-error-on-600);
+    --sl-color-error-on-700: var(--sl-vision-protanopia-color-error-on-700);
+    --sl-color-error-on-800: var(--sl-vision-protanopia-color-error-on-800);
+    --sl-color-error-on-900: var(--sl-vision-protanopia-color-error-on-900);
+    --sl-color-error-on-1000: var(--sl-vision-protanopia-color-error-on-1000);
+    --sl-color-info-50: var(--sl-vision-protanopia-color-info-50);
+    --sl-color-info-75: var(--sl-vision-protanopia-color-info-75);
+    --sl-color-info-100: var(--sl-vision-protanopia-color-info-100);
+    --sl-color-info-200: var(--sl-vision-protanopia-color-info-200);
+    --sl-color-info-300: var(--sl-vision-protanopia-color-info-300);
+    --sl-color-info-400: var(--sl-vision-protanopia-color-info-400);
+    --sl-color-info-500: var(--sl-vision-protanopia-color-info-500);
+    --sl-color-info-600: var(--sl-vision-protanopia-color-info-600);
+    --sl-color-info-700: var(--sl-vision-protanopia-color-info-700);
+    --sl-color-info-800: var(--sl-vision-protanopia-color-info-800);
+    --sl-color-info-900: var(--sl-vision-protanopia-color-info-900);
+    --sl-color-info-1000: var(--sl-vision-protanopia-color-info-1000);
+    --sl-color-info-on-50: var(--sl-vision-protanopia-color-info-on-50);
+    --sl-color-info-on-75: var(--sl-vision-protanopia-color-info-on-75);
+    --sl-color-info-on-100: var(--sl-vision-protanopia-color-info-on-100);
+    --sl-color-info-on-200: var(--sl-vision-protanopia-color-info-on-200);
+    --sl-color-info-on-300: var(--sl-vision-protanopia-color-info-on-300);
+    --sl-color-info-on-400: var(--sl-vision-protanopia-color-info-on-400);
+    --sl-color-info-on-500: var(--sl-vision-protanopia-color-info-on-500);
+    --sl-color-info-on-600: var(--sl-vision-protanopia-color-info-on-600);
+    --sl-color-info-on-700: var(--sl-vision-protanopia-color-info-on-700);
+    --sl-color-info-on-800: var(--sl-vision-protanopia-color-info-on-800);
+    --sl-color-info-on-900: var(--sl-vision-protanopia-color-info-on-900);
+    --sl-color-info-on-1000: var(--sl-vision-protanopia-color-info-on-1000);
+    --sl-color-data-1: var(--sl-vision-protanopia-color-data-1);
+    --sl-color-data-2: var(--sl-vision-protanopia-color-data-2);
+    --sl-color-data-3: var(--sl-vision-protanopia-color-data-3);
+    --sl-color-data-4: var(--sl-vision-protanopia-color-data-4);
+    --sl-color-data-5: var(--sl-vision-protanopia-color-data-5);
+    --sl-color-data-6: var(--sl-vision-protanopia-color-data-6);
+    --sl-color-data-7: var(--sl-vision-protanopia-color-data-7);
+    --sl-color-data-8: var(--sl-vision-protanopia-color-data-8);
+    --sl-color-data-9: var(--sl-vision-protanopia-color-data-9);
+    --sl-color-data-10: var(--sl-vision-protanopia-color-data-10);
+    --sl-color-data-11: var(--sl-vision-protanopia-color-data-11);
+    --sl-color-data-12: var(--sl-vision-protanopia-color-data-12);
+    --sl-color-data-13: var(--sl-vision-protanopia-color-data-13);
+    --sl-color-data-14: var(--sl-vision-protanopia-color-data-14);
+    --sl-color-data-15: var(--sl-vision-protanopia-color-data-15);
+    --sl-color-data-16: var(--sl-vision-protanopia-color-data-16);
+    --sl-color-data-17: var(--sl-vision-protanopia-color-data-17);
+    --sl-color-data-18: var(--sl-vision-protanopia-color-data-18);
+    --sl-color-data-19: var(--sl-vision-protanopia-color-data-19);
+    --sl-color-data-20: var(--sl-vision-protanopia-color-data-20);
+    --sl-color-data-blue: var(--sl-vision-protanopia-color-data-blue);
+    --sl-color-data-orange: var(--sl-vision-protanopia-color-data-orange);
+    --sl-color-data-green: var(--sl-vision-protanopia-color-data-green);
+    --sl-color-data-gold: var(--sl-vision-protanopia-color-data-gold);
+    --sl-color-data-slate: var(--sl-vision-protanopia-color-data-slate);
+    --sl-color-data-red: var(--sl-vision-protanopia-color-data-red);
+    --sl-color-data-taupe: var(--sl-vision-protanopia-color-data-taupe);
+    --sl-color-data-rose: var(--sl-vision-protanopia-color-data-rose);
+    --sl-color-data-magenta: var(--sl-vision-protanopia-color-data-magenta);
+    --sl-color-data-brown: var(--sl-vision-protanopia-color-data-brown);
+    --sl-color-data-sky: var(--sl-vision-protanopia-color-data-sky);
+    --sl-color-data-peach: var(--sl-vision-protanopia-color-data-peach);
+    --sl-color-data-mint: var(--sl-vision-protanopia-color-data-mint);
+    --sl-color-data-sand: var(--sl-vision-protanopia-color-data-sand);
+    --sl-color-data-ice: var(--sl-vision-protanopia-color-data-ice);
+    --sl-color-data-salmon: var(--sl-vision-protanopia-color-data-salmon);
+    --sl-color-data-stone: var(--sl-vision-protanopia-color-data-stone);
+    --sl-color-data-pink: var(--sl-vision-protanopia-color-data-pink);
+    --sl-color-data-orchid: var(--sl-vision-protanopia-color-data-orchid);
+    --sl-color-data-tan: var(--sl-vision-protanopia-color-data-tan);
+  }
+
+  [data-theme='tritanopia'][data-look='classic'] {
+    --sl-color-primary-50: var(--sl-vision-tritanopia-color-primary-50);
+    --sl-color-primary-75: var(--sl-vision-tritanopia-color-primary-75);
+    --sl-color-primary-100: var(--sl-vision-tritanopia-color-primary-100);
+    --sl-color-primary-200: var(--sl-vision-tritanopia-color-primary-200);
+    --sl-color-primary-300: var(--sl-vision-tritanopia-color-primary-300);
+    --sl-color-primary-400: var(--sl-vision-tritanopia-color-primary-400);
+    --sl-color-primary-500: var(--sl-vision-tritanopia-color-primary-500);
+    --sl-color-primary-600: var(--sl-vision-tritanopia-color-primary-600);
+    --sl-color-primary-700: var(--sl-vision-tritanopia-color-primary-700);
+    --sl-color-primary-800: var(--sl-vision-tritanopia-color-primary-800);
+    --sl-color-primary-900: var(--sl-vision-tritanopia-color-primary-900);
+    --sl-color-primary-1000: var(--sl-vision-tritanopia-color-primary-1000);
+    --sl-color-primary-on-50: var(--sl-vision-tritanopia-color-primary-on-50);
+    --sl-color-primary-on-75: var(--sl-vision-tritanopia-color-primary-on-75);
+    --sl-color-primary-on-100: var(--sl-vision-tritanopia-color-primary-on-100);
+    --sl-color-primary-on-200: var(--sl-vision-tritanopia-color-primary-on-200);
+    --sl-color-primary-on-300: var(--sl-vision-tritanopia-color-primary-on-300);
+    --sl-color-primary-on-400: var(--sl-vision-tritanopia-color-primary-on-400);
+    --sl-color-primary-on-500: var(--sl-vision-tritanopia-color-primary-on-500);
+    --sl-color-primary-on-600: var(--sl-vision-tritanopia-color-primary-on-600);
+    --sl-color-primary-on-700: var(--sl-vision-tritanopia-color-primary-on-700);
+    --sl-color-primary-on-800: var(--sl-vision-tritanopia-color-primary-on-800);
+    --sl-color-primary-on-900: var(--sl-vision-tritanopia-color-primary-on-900);
+    --sl-color-primary-on-1000: var(--sl-vision-tritanopia-color-primary-on-1000);
+    --sl-color-secondary-50: var(--sl-vision-tritanopia-color-secondary-50);
+    --sl-color-secondary-75: var(--sl-vision-tritanopia-color-secondary-75);
+    --sl-color-secondary-100: var(--sl-vision-tritanopia-color-secondary-100);
+    --sl-color-secondary-200: var(--sl-vision-tritanopia-color-secondary-200);
+    --sl-color-secondary-300: var(--sl-vision-tritanopia-color-secondary-300);
+    --sl-color-secondary-400: var(--sl-vision-tritanopia-color-secondary-400);
+    --sl-color-secondary-500: var(--sl-vision-tritanopia-color-secondary-500);
+    --sl-color-secondary-600: var(--sl-vision-tritanopia-color-secondary-600);
+    --sl-color-secondary-700: var(--sl-vision-tritanopia-color-secondary-700);
+    --sl-color-secondary-800: var(--sl-vision-tritanopia-color-secondary-800);
+    --sl-color-secondary-900: var(--sl-vision-tritanopia-color-secondary-900);
+    --sl-color-secondary-1000: var(--sl-vision-tritanopia-color-secondary-1000);
+    --sl-color-secondary-on-50: var(--sl-vision-tritanopia-color-secondary-on-50);
+    --sl-color-secondary-on-75: var(--sl-vision-tritanopia-color-secondary-on-75);
+    --sl-color-secondary-on-100: var(--sl-vision-tritanopia-color-secondary-on-100);
+    --sl-color-secondary-on-200: var(--sl-vision-tritanopia-color-secondary-on-200);
+    --sl-color-secondary-on-300: var(--sl-vision-tritanopia-color-secondary-on-300);
+    --sl-color-secondary-on-400: var(--sl-vision-tritanopia-color-secondary-on-400);
+    --sl-color-secondary-on-500: var(--sl-vision-tritanopia-color-secondary-on-500);
+    --sl-color-secondary-on-600: var(--sl-vision-tritanopia-color-secondary-on-600);
+    --sl-color-secondary-on-700: var(--sl-vision-tritanopia-color-secondary-on-700);
+    --sl-color-secondary-on-800: var(--sl-vision-tritanopia-color-secondary-on-800);
+    --sl-color-secondary-on-900: var(--sl-vision-tritanopia-color-secondary-on-900);
+    --sl-color-secondary-on-1000: var(--sl-vision-tritanopia-color-secondary-on-1000);
+    --sl-color-tertiary-50: var(--sl-vision-tritanopia-color-tertiary-50);
+    --sl-color-tertiary-75: var(--sl-vision-tritanopia-color-tertiary-75);
+    --sl-color-tertiary-100: var(--sl-vision-tritanopia-color-tertiary-100);
+    --sl-color-tertiary-200: var(--sl-vision-tritanopia-color-tertiary-200);
+    --sl-color-tertiary-300: var(--sl-vision-tritanopia-color-tertiary-300);
+    --sl-color-tertiary-400: var(--sl-vision-tritanopia-color-tertiary-400);
+    --sl-color-tertiary-500: var(--sl-vision-tritanopia-color-tertiary-500);
+    --sl-color-tertiary-600: var(--sl-vision-tritanopia-color-tertiary-600);
+    --sl-color-tertiary-700: var(--sl-vision-tritanopia-color-tertiary-700);
+    --sl-color-tertiary-800: var(--sl-vision-tritanopia-color-tertiary-800);
+    --sl-color-tertiary-900: var(--sl-vision-tritanopia-color-tertiary-900);
+    --sl-color-tertiary-1000: var(--sl-vision-tritanopia-color-tertiary-1000);
+    --sl-color-tertiary-on-50: var(--sl-vision-tritanopia-color-tertiary-on-50);
+    --sl-color-tertiary-on-75: var(--sl-vision-tritanopia-color-tertiary-on-75);
+    --sl-color-tertiary-on-100: var(--sl-vision-tritanopia-color-tertiary-on-100);
+    --sl-color-tertiary-on-200: var(--sl-vision-tritanopia-color-tertiary-on-200);
+    --sl-color-tertiary-on-300: var(--sl-vision-tritanopia-color-tertiary-on-300);
+    --sl-color-tertiary-on-400: var(--sl-vision-tritanopia-color-tertiary-on-400);
+    --sl-color-tertiary-on-500: var(--sl-vision-tritanopia-color-tertiary-on-500);
+    --sl-color-tertiary-on-600: var(--sl-vision-tritanopia-color-tertiary-on-600);
+    --sl-color-tertiary-on-700: var(--sl-vision-tritanopia-color-tertiary-on-700);
+    --sl-color-tertiary-on-800: var(--sl-vision-tritanopia-color-tertiary-on-800);
+    --sl-color-tertiary-on-900: var(--sl-vision-tritanopia-color-tertiary-on-900);
+    --sl-color-tertiary-on-1000: var(--sl-vision-tritanopia-color-tertiary-on-1000);
+    --sl-color-quaternary-50: var(--sl-vision-tritanopia-color-quaternary-50);
+    --sl-color-quaternary-75: var(--sl-vision-tritanopia-color-quaternary-75);
+    --sl-color-quaternary-100: var(--sl-vision-tritanopia-color-quaternary-100);
+    --sl-color-quaternary-200: var(--sl-vision-tritanopia-color-quaternary-200);
+    --sl-color-quaternary-300: var(--sl-vision-tritanopia-color-quaternary-300);
+    --sl-color-quaternary-400: var(--sl-vision-tritanopia-color-quaternary-400);
+    --sl-color-quaternary-500: var(--sl-vision-tritanopia-color-quaternary-500);
+    --sl-color-quaternary-600: var(--sl-vision-tritanopia-color-quaternary-600);
+    --sl-color-quaternary-700: var(--sl-vision-tritanopia-color-quaternary-700);
+    --sl-color-quaternary-800: var(--sl-vision-tritanopia-color-quaternary-800);
+    --sl-color-quaternary-900: var(--sl-vision-tritanopia-color-quaternary-900);
+    --sl-color-quaternary-1000: var(--sl-vision-tritanopia-color-quaternary-1000);
+    --sl-color-quaternary-on-50: var(--sl-vision-tritanopia-color-quaternary-on-50);
+    --sl-color-quaternary-on-75: var(--sl-vision-tritanopia-color-quaternary-on-75);
+    --sl-color-quaternary-on-100: var(--sl-vision-tritanopia-color-quaternary-on-100);
+    --sl-color-quaternary-on-200: var(--sl-vision-tritanopia-color-quaternary-on-200);
+    --sl-color-quaternary-on-300: var(--sl-vision-tritanopia-color-quaternary-on-300);
+    --sl-color-quaternary-on-400: var(--sl-vision-tritanopia-color-quaternary-on-400);
+    --sl-color-quaternary-on-500: var(--sl-vision-tritanopia-color-quaternary-on-500);
+    --sl-color-quaternary-on-600: var(--sl-vision-tritanopia-color-quaternary-on-600);
+    --sl-color-quaternary-on-700: var(--sl-vision-tritanopia-color-quaternary-on-700);
+    --sl-color-quaternary-on-800: var(--sl-vision-tritanopia-color-quaternary-on-800);
+    --sl-color-quaternary-on-900: var(--sl-vision-tritanopia-color-quaternary-on-900);
+    --sl-color-quaternary-on-1000: var(--sl-vision-tritanopia-color-quaternary-on-1000);
+    --sl-color-success-50: var(--sl-vision-tritanopia-color-success-50);
+    --sl-color-success-75: var(--sl-vision-tritanopia-color-success-75);
+    --sl-color-success-100: var(--sl-vision-tritanopia-color-success-100);
+    --sl-color-success-200: var(--sl-vision-tritanopia-color-success-200);
+    --sl-color-success-300: var(--sl-vision-tritanopia-color-success-300);
+    --sl-color-success-400: var(--sl-vision-tritanopia-color-success-400);
+    --sl-color-success-500: var(--sl-vision-tritanopia-color-success-500);
+    --sl-color-success-600: var(--sl-vision-tritanopia-color-success-600);
+    --sl-color-success-700: var(--sl-vision-tritanopia-color-success-700);
+    --sl-color-success-800: var(--sl-vision-tritanopia-color-success-800);
+    --sl-color-success-900: var(--sl-vision-tritanopia-color-success-900);
+    --sl-color-success-1000: var(--sl-vision-tritanopia-color-success-1000);
+    --sl-color-success-on-50: var(--sl-vision-tritanopia-color-success-on-50);
+    --sl-color-success-on-75: var(--sl-vision-tritanopia-color-success-on-75);
+    --sl-color-success-on-100: var(--sl-vision-tritanopia-color-success-on-100);
+    --sl-color-success-on-200: var(--sl-vision-tritanopia-color-success-on-200);
+    --sl-color-success-on-300: var(--sl-vision-tritanopia-color-success-on-300);
+    --sl-color-success-on-400: var(--sl-vision-tritanopia-color-success-on-400);
+    --sl-color-success-on-500: var(--sl-vision-tritanopia-color-success-on-500);
+    --sl-color-success-on-600: var(--sl-vision-tritanopia-color-success-on-600);
+    --sl-color-success-on-700: var(--sl-vision-tritanopia-color-success-on-700);
+    --sl-color-success-on-800: var(--sl-vision-tritanopia-color-success-on-800);
+    --sl-color-success-on-900: var(--sl-vision-tritanopia-color-success-on-900);
+    --sl-color-success-on-1000: var(--sl-vision-tritanopia-color-success-on-1000);
+    --sl-color-warning-50: var(--sl-vision-tritanopia-color-warning-50);
+    --sl-color-warning-75: var(--sl-vision-tritanopia-color-warning-75);
+    --sl-color-warning-100: var(--sl-vision-tritanopia-color-warning-100);
+    --sl-color-warning-200: var(--sl-vision-tritanopia-color-warning-200);
+    --sl-color-warning-300: var(--sl-vision-tritanopia-color-warning-300);
+    --sl-color-warning-400: var(--sl-vision-tritanopia-color-warning-400);
+    --sl-color-warning-500: var(--sl-vision-tritanopia-color-warning-500);
+    --sl-color-warning-600: var(--sl-vision-tritanopia-color-warning-600);
+    --sl-color-warning-700: var(--sl-vision-tritanopia-color-warning-700);
+    --sl-color-warning-800: var(--sl-vision-tritanopia-color-warning-800);
+    --sl-color-warning-900: var(--sl-vision-tritanopia-color-warning-900);
+    --sl-color-warning-1000: var(--sl-vision-tritanopia-color-warning-1000);
+    --sl-color-warning-on-50: var(--sl-vision-tritanopia-color-warning-on-50);
+    --sl-color-warning-on-75: var(--sl-vision-tritanopia-color-warning-on-75);
+    --sl-color-warning-on-100: var(--sl-vision-tritanopia-color-warning-on-100);
+    --sl-color-warning-on-200: var(--sl-vision-tritanopia-color-warning-on-200);
+    --sl-color-warning-on-300: var(--sl-vision-tritanopia-color-warning-on-300);
+    --sl-color-warning-on-400: var(--sl-vision-tritanopia-color-warning-on-400);
+    --sl-color-warning-on-500: var(--sl-vision-tritanopia-color-warning-on-500);
+    --sl-color-warning-on-600: var(--sl-vision-tritanopia-color-warning-on-600);
+    --sl-color-warning-on-700: var(--sl-vision-tritanopia-color-warning-on-700);
+    --sl-color-warning-on-800: var(--sl-vision-tritanopia-color-warning-on-800);
+    --sl-color-warning-on-900: var(--sl-vision-tritanopia-color-warning-on-900);
+    --sl-color-warning-on-1000: var(--sl-vision-tritanopia-color-warning-on-1000);
+    --sl-color-error-50: var(--sl-vision-tritanopia-color-error-50);
+    --sl-color-error-75: var(--sl-vision-tritanopia-color-error-75);
+    --sl-color-error-100: var(--sl-vision-tritanopia-color-error-100);
+    --sl-color-error-200: var(--sl-vision-tritanopia-color-error-200);
+    --sl-color-error-300: var(--sl-vision-tritanopia-color-error-300);
+    --sl-color-error-400: var(--sl-vision-tritanopia-color-error-400);
+    --sl-color-error-500: var(--sl-vision-tritanopia-color-error-500);
+    --sl-color-error-600: var(--sl-vision-tritanopia-color-error-600);
+    --sl-color-error-700: var(--sl-vision-tritanopia-color-error-700);
+    --sl-color-error-800: var(--sl-vision-tritanopia-color-error-800);
+    --sl-color-error-900: var(--sl-vision-tritanopia-color-error-900);
+    --sl-color-error-1000: var(--sl-vision-tritanopia-color-error-1000);
+    --sl-color-error-on-50: var(--sl-vision-tritanopia-color-error-on-50);
+    --sl-color-error-on-75: var(--sl-vision-tritanopia-color-error-on-75);
+    --sl-color-error-on-100: var(--sl-vision-tritanopia-color-error-on-100);
+    --sl-color-error-on-200: var(--sl-vision-tritanopia-color-error-on-200);
+    --sl-color-error-on-300: var(--sl-vision-tritanopia-color-error-on-300);
+    --sl-color-error-on-400: var(--sl-vision-tritanopia-color-error-on-400);
+    --sl-color-error-on-500: var(--sl-vision-tritanopia-color-error-on-500);
+    --sl-color-error-on-600: var(--sl-vision-tritanopia-color-error-on-600);
+    --sl-color-error-on-700: var(--sl-vision-tritanopia-color-error-on-700);
+    --sl-color-error-on-800: var(--sl-vision-tritanopia-color-error-on-800);
+    --sl-color-error-on-900: var(--sl-vision-tritanopia-color-error-on-900);
+    --sl-color-error-on-1000: var(--sl-vision-tritanopia-color-error-on-1000);
+    --sl-color-info-50: var(--sl-vision-tritanopia-color-info-50);
+    --sl-color-info-75: var(--sl-vision-tritanopia-color-info-75);
+    --sl-color-info-100: var(--sl-vision-tritanopia-color-info-100);
+    --sl-color-info-200: var(--sl-vision-tritanopia-color-info-200);
+    --sl-color-info-300: var(--sl-vision-tritanopia-color-info-300);
+    --sl-color-info-400: var(--sl-vision-tritanopia-color-info-400);
+    --sl-color-info-500: var(--sl-vision-tritanopia-color-info-500);
+    --sl-color-info-600: var(--sl-vision-tritanopia-color-info-600);
+    --sl-color-info-700: var(--sl-vision-tritanopia-color-info-700);
+    --sl-color-info-800: var(--sl-vision-tritanopia-color-info-800);
+    --sl-color-info-900: var(--sl-vision-tritanopia-color-info-900);
+    --sl-color-info-1000: var(--sl-vision-tritanopia-color-info-1000);
+    --sl-color-info-on-50: var(--sl-vision-tritanopia-color-info-on-50);
+    --sl-color-info-on-75: var(--sl-vision-tritanopia-color-info-on-75);
+    --sl-color-info-on-100: var(--sl-vision-tritanopia-color-info-on-100);
+    --sl-color-info-on-200: var(--sl-vision-tritanopia-color-info-on-200);
+    --sl-color-info-on-300: var(--sl-vision-tritanopia-color-info-on-300);
+    --sl-color-info-on-400: var(--sl-vision-tritanopia-color-info-on-400);
+    --sl-color-info-on-500: var(--sl-vision-tritanopia-color-info-on-500);
+    --sl-color-info-on-600: var(--sl-vision-tritanopia-color-info-on-600);
+    --sl-color-info-on-700: var(--sl-vision-tritanopia-color-info-on-700);
+    --sl-color-info-on-800: var(--sl-vision-tritanopia-color-info-on-800);
+    --sl-color-info-on-900: var(--sl-vision-tritanopia-color-info-on-900);
+    --sl-color-info-on-1000: var(--sl-vision-tritanopia-color-info-on-1000);
+    --sl-color-data-1: var(--sl-vision-tritanopia-color-data-1);
+    --sl-color-data-2: var(--sl-vision-tritanopia-color-data-2);
+    --sl-color-data-3: var(--sl-vision-tritanopia-color-data-3);
+    --sl-color-data-4: var(--sl-vision-tritanopia-color-data-4);
+    --sl-color-data-5: var(--sl-vision-tritanopia-color-data-5);
+    --sl-color-data-6: var(--sl-vision-tritanopia-color-data-6);
+    --sl-color-data-7: var(--sl-vision-tritanopia-color-data-7);
+    --sl-color-data-8: var(--sl-vision-tritanopia-color-data-8);
+    --sl-color-data-9: var(--sl-vision-tritanopia-color-data-9);
+    --sl-color-data-10: var(--sl-vision-tritanopia-color-data-10);
+    --sl-color-data-11: var(--sl-vision-tritanopia-color-data-11);
+    --sl-color-data-12: var(--sl-vision-tritanopia-color-data-12);
+    --sl-color-data-13: var(--sl-vision-tritanopia-color-data-13);
+    --sl-color-data-14: var(--sl-vision-tritanopia-color-data-14);
+    --sl-color-data-15: var(--sl-vision-tritanopia-color-data-15);
+    --sl-color-data-16: var(--sl-vision-tritanopia-color-data-16);
+    --sl-color-data-17: var(--sl-vision-tritanopia-color-data-17);
+    --sl-color-data-18: var(--sl-vision-tritanopia-color-data-18);
+    --sl-color-data-19: var(--sl-vision-tritanopia-color-data-19);
+    --sl-color-data-20: var(--sl-vision-tritanopia-color-data-20);
+    --sl-color-data-blue: var(--sl-vision-tritanopia-color-data-blue);
+    --sl-color-data-orange: var(--sl-vision-tritanopia-color-data-orange);
+    --sl-color-data-green: var(--sl-vision-tritanopia-color-data-green);
+    --sl-color-data-gold: var(--sl-vision-tritanopia-color-data-gold);
+    --sl-color-data-slate: var(--sl-vision-tritanopia-color-data-slate);
+    --sl-color-data-red: var(--sl-vision-tritanopia-color-data-red);
+    --sl-color-data-taupe: var(--sl-vision-tritanopia-color-data-taupe);
+    --sl-color-data-rose: var(--sl-vision-tritanopia-color-data-rose);
+    --sl-color-data-magenta: var(--sl-vision-tritanopia-color-data-magenta);
+    --sl-color-data-brown: var(--sl-vision-tritanopia-color-data-brown);
+    --sl-color-data-sky: var(--sl-vision-tritanopia-color-data-sky);
+    --sl-color-data-peach: var(--sl-vision-tritanopia-color-data-peach);
+    --sl-color-data-mint: var(--sl-vision-tritanopia-color-data-mint);
+    --sl-color-data-sand: var(--sl-vision-tritanopia-color-data-sand);
+    --sl-color-data-ice: var(--sl-vision-tritanopia-color-data-ice);
+    --sl-color-data-salmon: var(--sl-vision-tritanopia-color-data-salmon);
+    --sl-color-data-stone: var(--sl-vision-tritanopia-color-data-stone);
+    --sl-color-data-pink: var(--sl-vision-tritanopia-color-data-pink);
+    --sl-color-data-orchid: var(--sl-vision-tritanopia-color-data-orchid);
+    --sl-color-data-tan: var(--sl-vision-tritanopia-color-data-tan);
+  }
+
+  [data-theme='achromatopsia'][data-look='classic'] {
+    --sl-color-primary-50: var(--sl-vision-achromatopsia-color-primary-50);
+    --sl-color-primary-75: var(--sl-vision-achromatopsia-color-primary-75);
+    --sl-color-primary-100: var(--sl-vision-achromatopsia-color-primary-100);
+    --sl-color-primary-200: var(--sl-vision-achromatopsia-color-primary-200);
+    --sl-color-primary-300: var(--sl-vision-achromatopsia-color-primary-300);
+    --sl-color-primary-400: var(--sl-vision-achromatopsia-color-primary-400);
+    --sl-color-primary-500: var(--sl-vision-achromatopsia-color-primary-500);
+    --sl-color-primary-600: var(--sl-vision-achromatopsia-color-primary-600);
+    --sl-color-primary-700: var(--sl-vision-achromatopsia-color-primary-700);
+    --sl-color-primary-800: var(--sl-vision-achromatopsia-color-primary-800);
+    --sl-color-primary-900: var(--sl-vision-achromatopsia-color-primary-900);
+    --sl-color-primary-1000: var(--sl-vision-achromatopsia-color-primary-1000);
+    --sl-color-primary-on-50: var(--sl-vision-achromatopsia-color-primary-on-50);
+    --sl-color-primary-on-75: var(--sl-vision-achromatopsia-color-primary-on-75);
+    --sl-color-primary-on-100: var(--sl-vision-achromatopsia-color-primary-on-100);
+    --sl-color-primary-on-200: var(--sl-vision-achromatopsia-color-primary-on-200);
+    --sl-color-primary-on-300: var(--sl-vision-achromatopsia-color-primary-on-300);
+    --sl-color-primary-on-400: var(--sl-vision-achromatopsia-color-primary-on-400);
+    --sl-color-primary-on-500: var(--sl-vision-achromatopsia-color-primary-on-500);
+    --sl-color-primary-on-600: var(--sl-vision-achromatopsia-color-primary-on-600);
+    --sl-color-primary-on-700: var(--sl-vision-achromatopsia-color-primary-on-700);
+    --sl-color-primary-on-800: var(--sl-vision-achromatopsia-color-primary-on-800);
+    --sl-color-primary-on-900: var(--sl-vision-achromatopsia-color-primary-on-900);
+    --sl-color-primary-on-1000: var(--sl-vision-achromatopsia-color-primary-on-1000);
+    --sl-color-secondary-50: var(--sl-vision-achromatopsia-color-secondary-50);
+    --sl-color-secondary-75: var(--sl-vision-achromatopsia-color-secondary-75);
+    --sl-color-secondary-100: var(--sl-vision-achromatopsia-color-secondary-100);
+    --sl-color-secondary-200: var(--sl-vision-achromatopsia-color-secondary-200);
+    --sl-color-secondary-300: var(--sl-vision-achromatopsia-color-secondary-300);
+    --sl-color-secondary-400: var(--sl-vision-achromatopsia-color-secondary-400);
+    --sl-color-secondary-500: var(--sl-vision-achromatopsia-color-secondary-500);
+    --sl-color-secondary-600: var(--sl-vision-achromatopsia-color-secondary-600);
+    --sl-color-secondary-700: var(--sl-vision-achromatopsia-color-secondary-700);
+    --sl-color-secondary-800: var(--sl-vision-achromatopsia-color-secondary-800);
+    --sl-color-secondary-900: var(--sl-vision-achromatopsia-color-secondary-900);
+    --sl-color-secondary-1000: var(--sl-vision-achromatopsia-color-secondary-1000);
+    --sl-color-secondary-on-50: var(--sl-vision-achromatopsia-color-secondary-on-50);
+    --sl-color-secondary-on-75: var(--sl-vision-achromatopsia-color-secondary-on-75);
+    --sl-color-secondary-on-100: var(--sl-vision-achromatopsia-color-secondary-on-100);
+    --sl-color-secondary-on-200: var(--sl-vision-achromatopsia-color-secondary-on-200);
+    --sl-color-secondary-on-300: var(--sl-vision-achromatopsia-color-secondary-on-300);
+    --sl-color-secondary-on-400: var(--sl-vision-achromatopsia-color-secondary-on-400);
+    --sl-color-secondary-on-500: var(--sl-vision-achromatopsia-color-secondary-on-500);
+    --sl-color-secondary-on-600: var(--sl-vision-achromatopsia-color-secondary-on-600);
+    --sl-color-secondary-on-700: var(--sl-vision-achromatopsia-color-secondary-on-700);
+    --sl-color-secondary-on-800: var(--sl-vision-achromatopsia-color-secondary-on-800);
+    --sl-color-secondary-on-900: var(--sl-vision-achromatopsia-color-secondary-on-900);
+    --sl-color-secondary-on-1000: var(--sl-vision-achromatopsia-color-secondary-on-1000);
+    --sl-color-tertiary-50: var(--sl-vision-achromatopsia-color-tertiary-50);
+    --sl-color-tertiary-75: var(--sl-vision-achromatopsia-color-tertiary-75);
+    --sl-color-tertiary-100: var(--sl-vision-achromatopsia-color-tertiary-100);
+    --sl-color-tertiary-200: var(--sl-vision-achromatopsia-color-tertiary-200);
+    --sl-color-tertiary-300: var(--sl-vision-achromatopsia-color-tertiary-300);
+    --sl-color-tertiary-400: var(--sl-vision-achromatopsia-color-tertiary-400);
+    --sl-color-tertiary-500: var(--sl-vision-achromatopsia-color-tertiary-500);
+    --sl-color-tertiary-600: var(--sl-vision-achromatopsia-color-tertiary-600);
+    --sl-color-tertiary-700: var(--sl-vision-achromatopsia-color-tertiary-700);
+    --sl-color-tertiary-800: var(--sl-vision-achromatopsia-color-tertiary-800);
+    --sl-color-tertiary-900: var(--sl-vision-achromatopsia-color-tertiary-900);
+    --sl-color-tertiary-1000: var(--sl-vision-achromatopsia-color-tertiary-1000);
+    --sl-color-tertiary-on-50: var(--sl-vision-achromatopsia-color-tertiary-on-50);
+    --sl-color-tertiary-on-75: var(--sl-vision-achromatopsia-color-tertiary-on-75);
+    --sl-color-tertiary-on-100: var(--sl-vision-achromatopsia-color-tertiary-on-100);
+    --sl-color-tertiary-on-200: var(--sl-vision-achromatopsia-color-tertiary-on-200);
+    --sl-color-tertiary-on-300: var(--sl-vision-achromatopsia-color-tertiary-on-300);
+    --sl-color-tertiary-on-400: var(--sl-vision-achromatopsia-color-tertiary-on-400);
+    --sl-color-tertiary-on-500: var(--sl-vision-achromatopsia-color-tertiary-on-500);
+    --sl-color-tertiary-on-600: var(--sl-vision-achromatopsia-color-tertiary-on-600);
+    --sl-color-tertiary-on-700: var(--sl-vision-achromatopsia-color-tertiary-on-700);
+    --sl-color-tertiary-on-800: var(--sl-vision-achromatopsia-color-tertiary-on-800);
+    --sl-color-tertiary-on-900: var(--sl-vision-achromatopsia-color-tertiary-on-900);
+    --sl-color-tertiary-on-1000: var(--sl-vision-achromatopsia-color-tertiary-on-1000);
+    --sl-color-quaternary-50: var(--sl-vision-achromatopsia-color-quaternary-50);
+    --sl-color-quaternary-75: var(--sl-vision-achromatopsia-color-quaternary-75);
+    --sl-color-quaternary-100: var(--sl-vision-achromatopsia-color-quaternary-100);
+    --sl-color-quaternary-200: var(--sl-vision-achromatopsia-color-quaternary-200);
+    --sl-color-quaternary-300: var(--sl-vision-achromatopsia-color-quaternary-300);
+    --sl-color-quaternary-400: var(--sl-vision-achromatopsia-color-quaternary-400);
+    --sl-color-quaternary-500: var(--sl-vision-achromatopsia-color-quaternary-500);
+    --sl-color-quaternary-600: var(--sl-vision-achromatopsia-color-quaternary-600);
+    --sl-color-quaternary-700: var(--sl-vision-achromatopsia-color-quaternary-700);
+    --sl-color-quaternary-800: var(--sl-vision-achromatopsia-color-quaternary-800);
+    --sl-color-quaternary-900: var(--sl-vision-achromatopsia-color-quaternary-900);
+    --sl-color-quaternary-1000: var(--sl-vision-achromatopsia-color-quaternary-1000);
+    --sl-color-quaternary-on-50: var(--sl-vision-achromatopsia-color-quaternary-on-50);
+    --sl-color-quaternary-on-75: var(--sl-vision-achromatopsia-color-quaternary-on-75);
+    --sl-color-quaternary-on-100: var(--sl-vision-achromatopsia-color-quaternary-on-100);
+    --sl-color-quaternary-on-200: var(--sl-vision-achromatopsia-color-quaternary-on-200);
+    --sl-color-quaternary-on-300: var(--sl-vision-achromatopsia-color-quaternary-on-300);
+    --sl-color-quaternary-on-400: var(--sl-vision-achromatopsia-color-quaternary-on-400);
+    --sl-color-quaternary-on-500: var(--sl-vision-achromatopsia-color-quaternary-on-500);
+    --sl-color-quaternary-on-600: var(--sl-vision-achromatopsia-color-quaternary-on-600);
+    --sl-color-quaternary-on-700: var(--sl-vision-achromatopsia-color-quaternary-on-700);
+    --sl-color-quaternary-on-800: var(--sl-vision-achromatopsia-color-quaternary-on-800);
+    --sl-color-quaternary-on-900: var(--sl-vision-achromatopsia-color-quaternary-on-900);
+    --sl-color-quaternary-on-1000: var(--sl-vision-achromatopsia-color-quaternary-on-1000);
+    --sl-color-success-50: var(--sl-vision-achromatopsia-color-success-50);
+    --sl-color-success-75: var(--sl-vision-achromatopsia-color-success-75);
+    --sl-color-success-100: var(--sl-vision-achromatopsia-color-success-100);
+    --sl-color-success-200: var(--sl-vision-achromatopsia-color-success-200);
+    --sl-color-success-300: var(--sl-vision-achromatopsia-color-success-300);
+    --sl-color-success-400: var(--sl-vision-achromatopsia-color-success-400);
+    --sl-color-success-500: var(--sl-vision-achromatopsia-color-success-500);
+    --sl-color-success-600: var(--sl-vision-achromatopsia-color-success-600);
+    --sl-color-success-700: var(--sl-vision-achromatopsia-color-success-700);
+    --sl-color-success-800: var(--sl-vision-achromatopsia-color-success-800);
+    --sl-color-success-900: var(--sl-vision-achromatopsia-color-success-900);
+    --sl-color-success-1000: var(--sl-vision-achromatopsia-color-success-1000);
+    --sl-color-success-on-50: var(--sl-vision-achromatopsia-color-success-on-50);
+    --sl-color-success-on-75: var(--sl-vision-achromatopsia-color-success-on-75);
+    --sl-color-success-on-100: var(--sl-vision-achromatopsia-color-success-on-100);
+    --sl-color-success-on-200: var(--sl-vision-achromatopsia-color-success-on-200);
+    --sl-color-success-on-300: var(--sl-vision-achromatopsia-color-success-on-300);
+    --sl-color-success-on-400: var(--sl-vision-achromatopsia-color-success-on-400);
+    --sl-color-success-on-500: var(--sl-vision-achromatopsia-color-success-on-500);
+    --sl-color-success-on-600: var(--sl-vision-achromatopsia-color-success-on-600);
+    --sl-color-success-on-700: var(--sl-vision-achromatopsia-color-success-on-700);
+    --sl-color-success-on-800: var(--sl-vision-achromatopsia-color-success-on-800);
+    --sl-color-success-on-900: var(--sl-vision-achromatopsia-color-success-on-900);
+    --sl-color-success-on-1000: var(--sl-vision-achromatopsia-color-success-on-1000);
+    --sl-color-warning-50: var(--sl-vision-achromatopsia-color-warning-50);
+    --sl-color-warning-75: var(--sl-vision-achromatopsia-color-warning-75);
+    --sl-color-warning-100: var(--sl-vision-achromatopsia-color-warning-100);
+    --sl-color-warning-200: var(--sl-vision-achromatopsia-color-warning-200);
+    --sl-color-warning-300: var(--sl-vision-achromatopsia-color-warning-300);
+    --sl-color-warning-400: var(--sl-vision-achromatopsia-color-warning-400);
+    --sl-color-warning-500: var(--sl-vision-achromatopsia-color-warning-500);
+    --sl-color-warning-600: var(--sl-vision-achromatopsia-color-warning-600);
+    --sl-color-warning-700: var(--sl-vision-achromatopsia-color-warning-700);
+    --sl-color-warning-800: var(--sl-vision-achromatopsia-color-warning-800);
+    --sl-color-warning-900: var(--sl-vision-achromatopsia-color-warning-900);
+    --sl-color-warning-1000: var(--sl-vision-achromatopsia-color-warning-1000);
+    --sl-color-warning-on-50: var(--sl-vision-achromatopsia-color-warning-on-50);
+    --sl-color-warning-on-75: var(--sl-vision-achromatopsia-color-warning-on-75);
+    --sl-color-warning-on-100: var(--sl-vision-achromatopsia-color-warning-on-100);
+    --sl-color-warning-on-200: var(--sl-vision-achromatopsia-color-warning-on-200);
+    --sl-color-warning-on-300: var(--sl-vision-achromatopsia-color-warning-on-300);
+    --sl-color-warning-on-400: var(--sl-vision-achromatopsia-color-warning-on-400);
+    --sl-color-warning-on-500: var(--sl-vision-achromatopsia-color-warning-on-500);
+    --sl-color-warning-on-600: var(--sl-vision-achromatopsia-color-warning-on-600);
+    --sl-color-warning-on-700: var(--sl-vision-achromatopsia-color-warning-on-700);
+    --sl-color-warning-on-800: var(--sl-vision-achromatopsia-color-warning-on-800);
+    --sl-color-warning-on-900: var(--sl-vision-achromatopsia-color-warning-on-900);
+    --sl-color-warning-on-1000: var(--sl-vision-achromatopsia-color-warning-on-1000);
+    --sl-color-error-50: var(--sl-vision-achromatopsia-color-error-50);
+    --sl-color-error-75: var(--sl-vision-achromatopsia-color-error-75);
+    --sl-color-error-100: var(--sl-vision-achromatopsia-color-error-100);
+    --sl-color-error-200: var(--sl-vision-achromatopsia-color-error-200);
+    --sl-color-error-300: var(--sl-vision-achromatopsia-color-error-300);
+    --sl-color-error-400: var(--sl-vision-achromatopsia-color-error-400);
+    --sl-color-error-500: var(--sl-vision-achromatopsia-color-error-500);
+    --sl-color-error-600: var(--sl-vision-achromatopsia-color-error-600);
+    --sl-color-error-700: var(--sl-vision-achromatopsia-color-error-700);
+    --sl-color-error-800: var(--sl-vision-achromatopsia-color-error-800);
+    --sl-color-error-900: var(--sl-vision-achromatopsia-color-error-900);
+    --sl-color-error-1000: var(--sl-vision-achromatopsia-color-error-1000);
+    --sl-color-error-on-50: var(--sl-vision-achromatopsia-color-error-on-50);
+    --sl-color-error-on-75: var(--sl-vision-achromatopsia-color-error-on-75);
+    --sl-color-error-on-100: var(--sl-vision-achromatopsia-color-error-on-100);
+    --sl-color-error-on-200: var(--sl-vision-achromatopsia-color-error-on-200);
+    --sl-color-error-on-300: var(--sl-vision-achromatopsia-color-error-on-300);
+    --sl-color-error-on-400: var(--sl-vision-achromatopsia-color-error-on-400);
+    --sl-color-error-on-500: var(--sl-vision-achromatopsia-color-error-on-500);
+    --sl-color-error-on-600: var(--sl-vision-achromatopsia-color-error-on-600);
+    --sl-color-error-on-700: var(--sl-vision-achromatopsia-color-error-on-700);
+    --sl-color-error-on-800: var(--sl-vision-achromatopsia-color-error-on-800);
+    --sl-color-error-on-900: var(--sl-vision-achromatopsia-color-error-on-900);
+    --sl-color-error-on-1000: var(--sl-vision-achromatopsia-color-error-on-1000);
+    --sl-color-info-50: var(--sl-vision-achromatopsia-color-info-50);
+    --sl-color-info-75: var(--sl-vision-achromatopsia-color-info-75);
+    --sl-color-info-100: var(--sl-vision-achromatopsia-color-info-100);
+    --sl-color-info-200: var(--sl-vision-achromatopsia-color-info-200);
+    --sl-color-info-300: var(--sl-vision-achromatopsia-color-info-300);
+    --sl-color-info-400: var(--sl-vision-achromatopsia-color-info-400);
+    --sl-color-info-500: var(--sl-vision-achromatopsia-color-info-500);
+    --sl-color-info-600: var(--sl-vision-achromatopsia-color-info-600);
+    --sl-color-info-700: var(--sl-vision-achromatopsia-color-info-700);
+    --sl-color-info-800: var(--sl-vision-achromatopsia-color-info-800);
+    --sl-color-info-900: var(--sl-vision-achromatopsia-color-info-900);
+    --sl-color-info-1000: var(--sl-vision-achromatopsia-color-info-1000);
+    --sl-color-info-on-50: var(--sl-vision-achromatopsia-color-info-on-50);
+    --sl-color-info-on-75: var(--sl-vision-achromatopsia-color-info-on-75);
+    --sl-color-info-on-100: var(--sl-vision-achromatopsia-color-info-on-100);
+    --sl-color-info-on-200: var(--sl-vision-achromatopsia-color-info-on-200);
+    --sl-color-info-on-300: var(--sl-vision-achromatopsia-color-info-on-300);
+    --sl-color-info-on-400: var(--sl-vision-achromatopsia-color-info-on-400);
+    --sl-color-info-on-500: var(--sl-vision-achromatopsia-color-info-on-500);
+    --sl-color-info-on-600: var(--sl-vision-achromatopsia-color-info-on-600);
+    --sl-color-info-on-700: var(--sl-vision-achromatopsia-color-info-on-700);
+    --sl-color-info-on-800: var(--sl-vision-achromatopsia-color-info-on-800);
+    --sl-color-info-on-900: var(--sl-vision-achromatopsia-color-info-on-900);
+    --sl-color-info-on-1000: var(--sl-vision-achromatopsia-color-info-on-1000);
+    --sl-color-data-1: var(--sl-vision-achromatopsia-color-data-1);
+    --sl-color-data-2: var(--sl-vision-achromatopsia-color-data-2);
+    --sl-color-data-3: var(--sl-vision-achromatopsia-color-data-3);
+    --sl-color-data-4: var(--sl-vision-achromatopsia-color-data-4);
+    --sl-color-data-5: var(--sl-vision-achromatopsia-color-data-5);
+    --sl-color-data-6: var(--sl-vision-achromatopsia-color-data-6);
+    --sl-color-data-7: var(--sl-vision-achromatopsia-color-data-7);
+    --sl-color-data-8: var(--sl-vision-achromatopsia-color-data-8);
+    --sl-color-data-9: var(--sl-vision-achromatopsia-color-data-9);
+    --sl-color-data-10: var(--sl-vision-achromatopsia-color-data-10);
+    --sl-color-data-11: var(--sl-vision-achromatopsia-color-data-11);
+    --sl-color-data-12: var(--sl-vision-achromatopsia-color-data-12);
+    --sl-color-data-13: var(--sl-vision-achromatopsia-color-data-13);
+    --sl-color-data-14: var(--sl-vision-achromatopsia-color-data-14);
+    --sl-color-data-15: var(--sl-vision-achromatopsia-color-data-15);
+    --sl-color-data-16: var(--sl-vision-achromatopsia-color-data-16);
+    --sl-color-data-17: var(--sl-vision-achromatopsia-color-data-17);
+    --sl-color-data-18: var(--sl-vision-achromatopsia-color-data-18);
+    --sl-color-data-19: var(--sl-vision-achromatopsia-color-data-19);
+    --sl-color-data-20: var(--sl-vision-achromatopsia-color-data-20);
+    --sl-color-data-blue: var(--sl-vision-achromatopsia-color-data-blue);
+    --sl-color-data-orange: var(--sl-vision-achromatopsia-color-data-orange);
+    --sl-color-data-green: var(--sl-vision-achromatopsia-color-data-green);
+    --sl-color-data-gold: var(--sl-vision-achromatopsia-color-data-gold);
+    --sl-color-data-slate: var(--sl-vision-achromatopsia-color-data-slate);
+    --sl-color-data-red: var(--sl-vision-achromatopsia-color-data-red);
+    --sl-color-data-taupe: var(--sl-vision-achromatopsia-color-data-taupe);
+    --sl-color-data-rose: var(--sl-vision-achromatopsia-color-data-rose);
+    --sl-color-data-magenta: var(--sl-vision-achromatopsia-color-data-magenta);
+    --sl-color-data-brown: var(--sl-vision-achromatopsia-color-data-brown);
+    --sl-color-data-sky: var(--sl-vision-achromatopsia-color-data-sky);
+    --sl-color-data-peach: var(--sl-vision-achromatopsia-color-data-peach);
+    --sl-color-data-mint: var(--sl-vision-achromatopsia-color-data-mint);
+    --sl-color-data-sand: var(--sl-vision-achromatopsia-color-data-sand);
+    --sl-color-data-ice: var(--sl-vision-achromatopsia-color-data-ice);
+    --sl-color-data-salmon: var(--sl-vision-achromatopsia-color-data-salmon);
+    --sl-color-data-stone: var(--sl-vision-achromatopsia-color-data-stone);
+    --sl-color-data-pink: var(--sl-vision-achromatopsia-color-data-pink);
+    --sl-color-data-orchid: var(--sl-vision-achromatopsia-color-data-orchid);
+    --sl-color-data-tan: var(--sl-vision-achromatopsia-color-data-tan);
+  }
+
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']) {
       --sl-color-scheme: dark;
@@ -3551,6 +5209,24 @@
     --sl-color-data-ivory: var(--sl-vision-achromatopsia-color-data-ivory);
   }
 
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia'])[data-look='classic'] {
+      --sl-scope-accent-solid: var(--sl-color-primary-400);
+      --sl-scope-accent-solid-hover: var(--sl-color-primary-300);
+      --sl-scope-accent-solid-active: var(--sl-color-primary-200);
+      --sl-scope-accent-on-solid: var(--sl-color-primary-on-400);
+      --sl-scope-accent-soft-active: var(--sl-color-primary-800);
+    }
+  }
+
+  [data-theme='dark'][data-look='classic'], [data-theme='dark-high-contrast'][data-look='classic'] {
+    --sl-scope-accent-solid: var(--sl-color-primary-400);
+    --sl-scope-accent-solid-hover: var(--sl-color-primary-300);
+    --sl-scope-accent-solid-active: var(--sl-color-primary-200);
+    --sl-scope-accent-on-solid: var(--sl-color-primary-on-400);
+    --sl-scope-accent-soft-active: var(--sl-color-primary-800);
+  }
+
   :root {
     --sl-scope-solid: var(--sl-scope-accent-solid);
     --sl-scope-solid-hover: var(--sl-scope-accent-solid-hover);
@@ -4630,7 +6306,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -4640,7 +6316,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -5084,7 +6760,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -5197,7 +6873,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -5265,7 +6941,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -5386,7 +7062,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -5395,7 +7071,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -5597,7 +7273,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -5705,7 +7381,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -5855,7 +7531,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -6012,7 +7688,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -6028,7 +7704,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -6144,7 +7820,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -6629,7 +8305,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -6798,7 +8474,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -6944,7 +8620,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -7071,7 +8747,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -7132,7 +8808,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -7174,7 +8850,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -7194,7 +8870,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -7331,7 +9007,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -7480,7 +9156,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -7673,7 +9349,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -7733,7 +9409,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -8153,7 +9829,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -8244,7 +9920,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -8307,7 +9983,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -8472,7 +10148,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -8589,7 +10265,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -8666,7 +10342,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -8818,7 +10494,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -8900,7 +10576,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -9174,7 +10850,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -9202,7 +10878,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -9368,7 +11044,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -9534,7 +11210,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Table - Mojave Theme
  *
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -9679,7 +11355,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -9815,7 +11491,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -10051,7 +11727,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -10163,7 +11839,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -10184,7 +11860,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -10246,7 +11922,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.4.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.5.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip