ropav 0.0.7 → 0.0.9

package/src/styles/_tokens.scss

@@ -8,114 +8,454 @@
     --rp-font-family: #{$font-family-base};
 
     // Colors
-    --rp-color-primary                   : #{$color-primary};
-    --rp-color-secondary                 : #{$color-secondary};
-    --rp-color-success                   : #{$color-success};
-    --rp-color-warning                   : #{$color-warning};
-    --rp-color-danger                    : #{$color-danger};
-    --rp-color-info                      : #{$color-info};
-    --rp-color-neutral                   : #{$color-neutral};
-    --rp-color-text                      : #{$color-text};
-    --rp-color-text-secondary            : #{$color-text-secondary};
-    --rp-color-text-disabled             : #{$color-text-disabled};
-    --rp-color-text-inverted             : #{$color-white};
-    --rp-color-background                : #{$color-background};
-    --rp-color-surface                   : #{$color-gray-1};
-    --rp-color-surface-raised            : #{$color-white};
-    --rp-color-surface-muted             : #{$color-gray-2};
-    --rp-color-surface-hover             : #{$color-gray-3};
-    --rp-color-button-default-bg         : var(--rp-color-surface);
-    --rp-color-button-default-bg-hover   : var(--rp-color-surface-hover);
-    --rp-color-button-default-bg-active  : #{$color-gray-4};
-    --rp-color-surface-inverted          : #{$color-gray-12};
-    --rp-color-overlay                   : rgba(17, 17, 17, 0.55);
-    --rp-color-border                    : #{$color-border};
-    --rp-color-border-hover              : #{$color-border-hover};
-    --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
-    --rp-color-control-bg                : var(--rp-color-surface);
-    --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
-    --rp-color-control-fg                : var(--rp-color-text);
-    --rp-color-control-placeholder       : var(--rp-color-text-secondary);
-    --rp-color-control-icon              : var(--rp-color-text-secondary);
-    --rp-color-control-border            : var(--rp-color-border);
-    --rp-color-control-border-hover      : var(--rp-color-border-hover);
-    --rp-color-control-border-focus      : var(--rp-color-primary);
-    --rp-color-control-track-bg          : var(--rp-color-border);
-    --rp-color-control-thumb-bg          : #{$color-white};
-    --rp-color-control-selected-bg       : var(--rp-color-primary);
-    --rp-color-control-selected-fg       : var(--rp-color-on-primary);
-    --rp-color-on-primary                : #{$color-on-primary};
-    --rp-color-on-secondary              : #{$color-on-secondary};
-    --rp-color-on-success                : #{$color-on-success};
-    --rp-color-on-warning                : #{$color-on-warning};
-    --rp-color-on-danger                 : #{$color-on-danger};
-    --rp-color-on-info                   : #{$color-on-info};
-    --rp-color-on-neutral                : #{$color-on-neutral};
-    --rp-color-primary-hover             : color-mix(in srgb, var(--rp-color-primary) 90%, #{$color-black});
-    --rp-color-primary-active            : color-mix(in srgb, var(--rp-color-primary) 80%, #{$color-black});
-    --rp-color-primary-subtle-bg         : #e6f4fe;
-    --rp-color-primary-subtle-bg-hover   : #d5efff;
-    --rp-color-primary-subtle-bg-active  : #c2e5ff;
-    --rp-color-primary-border            : #8ec8f6;
-    --rp-color-primary-border-hover      : #5eb1ef;
-    --rp-color-primary-fg                : #113264;
-    --rp-color-secondary-hover           : color-mix(in srgb, var(--rp-color-secondary) 90%, #{$color-black});
-    --rp-color-secondary-active          : color-mix(in srgb, var(--rp-color-secondary) 80%, #{$color-black});
-    --rp-color-secondary-subtle-bg       : #f4f0fe;
-    --rp-color-secondary-subtle-bg-hover : #ebe4ff;
-    --rp-color-secondary-subtle-bg-active: #e1d9ff;
-    --rp-color-secondary-border          : #c2b5f5;
-    --rp-color-secondary-border-hover    : #aa99ec;
-    --rp-color-secondary-fg              : #2f265f;
-    --rp-color-success-hover             : color-mix(in srgb, var(--rp-color-success) 90%, #{$color-black});
-    --rp-color-success-active            : color-mix(in srgb, var(--rp-color-success) 80%, #{$color-black});
-    --rp-color-success-subtle-bg         : #e6f6eb;
-    --rp-color-success-subtle-bg-hover   : #d6f1df;
-    --rp-color-success-subtle-bg-active  : #c4e8d1;
-    --rp-color-success-border            : #8eceaa;
-    --rp-color-success-border-hover      : #5bb98b;
-    --rp-color-success-fg                : #193b2d;
-    --rp-color-warning-hover             : color-mix(in srgb, var(--rp-color-warning) 90%, #{$color-black});
-    --rp-color-warning-active            : color-mix(in srgb, var(--rp-color-warning) 80%, #{$color-black});
-    --rp-color-warning-subtle-bg         : #ffefd6;
-    --rp-color-warning-subtle-bg-hover   : #ffdfb5;
-    --rp-color-warning-subtle-bg-active  : #ffd19a;
-    --rp-color-warning-border            : #f5ae73;
-    --rp-color-warning-border-hover      : #ec9455;
-    --rp-color-warning-fg                : #582d1d;
-    --rp-color-danger-hover              : color-mix(in srgb, var(--rp-color-danger) 90%, #{$color-black});
-    --rp-color-danger-active             : color-mix(in srgb, var(--rp-color-danger) 80%, #{$color-black});
-    --rp-color-danger-subtle-bg          : #feebec;
-    --rp-color-danger-subtle-bg-hover    : #ffdbdc;
-    --rp-color-danger-subtle-bg-active   : #ffcdce;
-    --rp-color-danger-border             : #f4a9aa;
-    --rp-color-danger-border-hover       : #eb8e90;
-    --rp-color-danger-fg                 : #641723;
-    --rp-color-info-hover                : color-mix(in srgb, var(--rp-color-info) 90%, #{$color-black});
-    --rp-color-info-active               : color-mix(in srgb, var(--rp-color-info) 80%, #{$color-black});
-    --rp-color-info-subtle-bg            : #def7f9;
-    --rp-color-info-subtle-bg-hover      : #caf1f6;
-    --rp-color-info-subtle-bg-active     : #b5e9f0;
-    --rp-color-info-border               : #7dcedc;
-    --rp-color-info-border-hover         : #3db9cf;
-    --rp-color-info-fg                   : #0d3c48;
-    --rp-color-neutral-hover             : color-mix(in srgb, var(--rp-color-neutral) 90%, #{$color-black});
-    --rp-color-neutral-active            : color-mix(in srgb, var(--rp-color-neutral) 80%, #{$color-black});
-    --rp-color-neutral-subtle-bg         : #f0f0f0;
-    --rp-color-neutral-subtle-bg-hover   : #e8e8e8;
-    --rp-color-neutral-subtle-bg-active  : #e0e0e0;
-    --rp-color-neutral-border            : #cecece;
-    --rp-color-neutral-border-hover      : #bbbbbb;
-    --rp-color-neutral-fg                : #202020;
+    --rp-color-white   : #{$color-white};
+    --rp-color-black   : #{$color-black};
+    --rp-color-dark-0  : #{$color-dark-0};
+    --rp-color-dark-1  : #{$color-dark-1};
+    --rp-color-dark-2  : #{$color-dark-2};
+    --rp-color-dark-3  : #{$color-dark-3};
+    --rp-color-dark-4  : #{$color-dark-4};
+    --rp-color-dark-5  : #{$color-dark-5};
+    --rp-color-dark-6  : #{$color-dark-6};
+    --rp-color-dark-7  : #{$color-dark-7};
+    --rp-color-dark-8  : #{$color-dark-8};
+    --rp-color-dark-9  : #{$color-dark-9};
+    --rp-color-gray-0  : #{$color-gray-0};
+    --rp-color-gray-1  : #{$color-gray-1};
+    --rp-color-gray-2  : #{$color-gray-2};
+    --rp-color-gray-3  : #{$color-gray-3};
+    --rp-color-gray-4  : #{$color-gray-4};
+    --rp-color-gray-5  : #{$color-gray-5};
+    --rp-color-gray-6  : #{$color-gray-6};
+    --rp-color-gray-7  : #{$color-gray-7};
+    --rp-color-gray-8  : #{$color-gray-8};
+    --rp-color-gray-9  : #{$color-gray-9};
+    --rp-color-red-0   : #{$color-red-0};
+    --rp-color-red-1   : #{$color-red-1};
+    --rp-color-red-2   : #{$color-red-2};
+    --rp-color-red-3   : #{$color-red-3};
+    --rp-color-red-4   : #{$color-red-4};
+    --rp-color-red-5   : #{$color-red-5};
+    --rp-color-red-6   : #{$color-red-6};
+    --rp-color-red-7   : #{$color-red-7};
+    --rp-color-red-8   : #{$color-red-8};
+    --rp-color-red-9   : #{$color-red-9};
+    --rp-color-pink-0  : #{$color-pink-0};
+    --rp-color-pink-1  : #{$color-pink-1};
+    --rp-color-pink-2  : #{$color-pink-2};
+    --rp-color-pink-3  : #{$color-pink-3};
+    --rp-color-pink-4  : #{$color-pink-4};
+    --rp-color-pink-5  : #{$color-pink-5};
+    --rp-color-pink-6  : #{$color-pink-6};
+    --rp-color-pink-7  : #{$color-pink-7};
+    --rp-color-pink-8  : #{$color-pink-8};
+    --rp-color-pink-9  : #{$color-pink-9};
+    --rp-color-grape-0 : #{$color-grape-0};
+    --rp-color-grape-1 : #{$color-grape-1};
+    --rp-color-grape-2 : #{$color-grape-2};
+    --rp-color-grape-3 : #{$color-grape-3};
+    --rp-color-grape-4 : #{$color-grape-4};
+    --rp-color-grape-5 : #{$color-grape-5};
+    --rp-color-grape-6 : #{$color-grape-6};
+    --rp-color-grape-7 : #{$color-grape-7};
+    --rp-color-grape-8 : #{$color-grape-8};
+    --rp-color-grape-9 : #{$color-grape-9};
+    --rp-color-violet-0: #{$color-violet-0};
+    --rp-color-violet-1: #{$color-violet-1};
+    --rp-color-violet-2: #{$color-violet-2};
+    --rp-color-violet-3: #{$color-violet-3};
+    --rp-color-violet-4: #{$color-violet-4};
+    --rp-color-violet-5: #{$color-violet-5};
+    --rp-color-violet-6: #{$color-violet-6};
+    --rp-color-violet-7: #{$color-violet-7};
+    --rp-color-violet-8: #{$color-violet-8};
+    --rp-color-violet-9: #{$color-violet-9};
+    --rp-color-indigo-0: #{$color-indigo-0};
+    --rp-color-indigo-1: #{$color-indigo-1};
+    --rp-color-indigo-2: #{$color-indigo-2};
+    --rp-color-indigo-3: #{$color-indigo-3};
+    --rp-color-indigo-4: #{$color-indigo-4};
+    --rp-color-indigo-5: #{$color-indigo-5};
+    --rp-color-indigo-6: #{$color-indigo-6};
+    --rp-color-indigo-7: #{$color-indigo-7};
+    --rp-color-indigo-8: #{$color-indigo-8};
+    --rp-color-indigo-9: #{$color-indigo-9};
+    --rp-color-blue-0  : #{$color-blue-0};
+    --rp-color-blue-1  : #{$color-blue-1};
+    --rp-color-blue-2  : #{$color-blue-2};
+    --rp-color-blue-3  : #{$color-blue-3};
+    --rp-color-blue-4  : #{$color-blue-4};
+    --rp-color-blue-5  : #{$color-blue-5};
+    --rp-color-blue-6  : #{$color-blue-6};
+    --rp-color-blue-7  : #{$color-blue-7};
+    --rp-color-blue-8  : #{$color-blue-8};
+    --rp-color-blue-9  : #{$color-blue-9};
+    --rp-color-cyan-0  : #{$color-cyan-0};
+    --rp-color-cyan-1  : #{$color-cyan-1};
+    --rp-color-cyan-2  : #{$color-cyan-2};
+    --rp-color-cyan-3  : #{$color-cyan-3};
+    --rp-color-cyan-4  : #{$color-cyan-4};
+    --rp-color-cyan-5  : #{$color-cyan-5};
+    --rp-color-cyan-6  : #{$color-cyan-6};
+    --rp-color-cyan-7  : #{$color-cyan-7};
+    --rp-color-cyan-8  : #{$color-cyan-8};
+    --rp-color-cyan-9  : #{$color-cyan-9};
+    --rp-color-teal-0  : #{$color-teal-0};
+    --rp-color-teal-1  : #{$color-teal-1};
+    --rp-color-teal-2  : #{$color-teal-2};
+    --rp-color-teal-3  : #{$color-teal-3};
+    --rp-color-teal-4  : #{$color-teal-4};
+    --rp-color-teal-5  : #{$color-teal-5};
+    --rp-color-teal-6  : #{$color-teal-6};
+    --rp-color-teal-7  : #{$color-teal-7};
+    --rp-color-teal-8  : #{$color-teal-8};
+    --rp-color-teal-9  : #{$color-teal-9};
+    --rp-color-green-0 : #{$color-green-0};
+    --rp-color-green-1 : #{$color-green-1};
+    --rp-color-green-2 : #{$color-green-2};
+    --rp-color-green-3 : #{$color-green-3};
+    --rp-color-green-4 : #{$color-green-4};
+    --rp-color-green-5 : #{$color-green-5};
+    --rp-color-green-6 : #{$color-green-6};
+    --rp-color-green-7 : #{$color-green-7};
+    --rp-color-green-8 : #{$color-green-8};
+    --rp-color-green-9 : #{$color-green-9};
+    --rp-color-lime-0  : #{$color-lime-0};
+    --rp-color-lime-1  : #{$color-lime-1};
+    --rp-color-lime-2  : #{$color-lime-2};
+    --rp-color-lime-3  : #{$color-lime-3};
+    --rp-color-lime-4  : #{$color-lime-4};
+    --rp-color-lime-5  : #{$color-lime-5};
+    --rp-color-lime-6  : #{$color-lime-6};
+    --rp-color-lime-7  : #{$color-lime-7};
+    --rp-color-lime-8  : #{$color-lime-8};
+    --rp-color-lime-9  : #{$color-lime-9};
+    --rp-color-yellow-0: #{$color-yellow-0};
+    --rp-color-yellow-1: #{$color-yellow-1};
+    --rp-color-yellow-2: #{$color-yellow-2};
+    --rp-color-yellow-3: #{$color-yellow-3};
+    --rp-color-yellow-4: #{$color-yellow-4};
+    --rp-color-yellow-5: #{$color-yellow-5};
+    --rp-color-yellow-6: #{$color-yellow-6};
+    --rp-color-yellow-7: #{$color-yellow-7};
+    --rp-color-yellow-8: #{$color-yellow-8};
+    --rp-color-yellow-9: #{$color-yellow-9};
+    --rp-color-orange-0: #{$color-orange-0};
+    --rp-color-orange-1: #{$color-orange-1};
+    --rp-color-orange-2: #{$color-orange-2};
+    --rp-color-orange-3: #{$color-orange-3};
+    --rp-color-orange-4: #{$color-orange-4};
+    --rp-color-orange-5: #{$color-orange-5};
+    --rp-color-orange-6: #{$color-orange-6};
+    --rp-color-orange-7: #{$color-orange-7};
+    --rp-color-orange-8: #{$color-orange-8};
+    --rp-color-orange-9: #{$color-orange-9};
+
+    // Derived colors
+    --rp-primary-color-0            : var(--rp-color-blue-0);
+    --rp-primary-color-1            : var(--rp-color-blue-1);
+    --rp-primary-color-2            : var(--rp-color-blue-2);
+    --rp-primary-color-3            : var(--rp-color-blue-3);
+    --rp-primary-color-4            : var(--rp-color-blue-4);
+    --rp-primary-color-5            : var(--rp-color-blue-5);
+    --rp-primary-color-6            : var(--rp-color-blue-6);
+    --rp-primary-color-7            : var(--rp-color-blue-7);
+    --rp-primary-color-8            : var(--rp-color-blue-8);
+    --rp-primary-color-9            : var(--rp-color-blue-9);
+    --rp-primary-color-filled       : var(--rp-color-blue-filled);
+    --rp-primary-color-filled-hover : var(--rp-color-blue-filled-hover);
+    --rp-primary-color-contrast     : var(--rp-color-blue-contrast);
+    --rp-primary-color-light        : var(--rp-color-blue-light);
+    --rp-primary-color-light-hover  : var(--rp-color-blue-light-hover);
+    --rp-primary-color-light-color  : var(--rp-color-blue-light-color);
+    --rp-primary-color-outline      : var(--rp-color-blue-outline);
+    --rp-primary-color-outline-hover: var(--rp-color-blue-outline-hover);
+    --rp-color-dark-0-contrast      : var(--rp-color-black);
+    --rp-color-dark-1-contrast      : var(--rp-color-black);
+    --rp-color-dark-2-contrast      : var(--rp-color-black);
+    --rp-color-dark-3-contrast      : var(--rp-color-white);
+    --rp-color-dark-4-contrast      : var(--rp-color-white);
+    --rp-color-dark-5-contrast      : var(--rp-color-white);
+    --rp-color-dark-6-contrast      : var(--rp-color-white);
+    --rp-color-dark-7-contrast      : var(--rp-color-white);
+    --rp-color-dark-8-contrast      : var(--rp-color-white);
+    --rp-color-dark-9-contrast      : var(--rp-color-white);
+    --rp-color-gray-0-contrast      : var(--rp-color-black);
+    --rp-color-gray-1-contrast      : var(--rp-color-black);
+    --rp-color-gray-2-contrast      : var(--rp-color-black);
+    --rp-color-gray-3-contrast      : var(--rp-color-black);
+    --rp-color-gray-4-contrast      : var(--rp-color-black);
+    --rp-color-gray-5-contrast      : var(--rp-color-black);
+    --rp-color-gray-6-contrast      : var(--rp-color-black);
+    --rp-color-gray-7-contrast      : var(--rp-color-white);
+    --rp-color-gray-8-contrast      : var(--rp-color-white);
+    --rp-color-gray-9-contrast      : var(--rp-color-white);
+    --rp-color-red-0-contrast       : var(--rp-color-black);
+    --rp-color-red-1-contrast       : var(--rp-color-black);
+    --rp-color-red-2-contrast       : var(--rp-color-black);
+    --rp-color-red-3-contrast       : var(--rp-color-black);
+    --rp-color-red-4-contrast       : var(--rp-color-black);
+    --rp-color-red-5-contrast       : var(--rp-color-black);
+    --rp-color-red-6-contrast       : var(--rp-color-black);
+    --rp-color-red-7-contrast       : var(--rp-color-black);
+    --rp-color-red-8-contrast       : var(--rp-color-black);
+    --rp-color-red-9-contrast       : var(--rp-color-white);
+    --rp-color-pink-0-contrast      : var(--rp-color-black);
+    --rp-color-pink-1-contrast      : var(--rp-color-black);
+    --rp-color-pink-2-contrast      : var(--rp-color-black);
+    --rp-color-pink-3-contrast      : var(--rp-color-black);
+    --rp-color-pink-4-contrast      : var(--rp-color-black);
+    --rp-color-pink-5-contrast      : var(--rp-color-black);
+    --rp-color-pink-6-contrast      : var(--rp-color-black);
+    --rp-color-pink-7-contrast      : var(--rp-color-white);
+    --rp-color-pink-8-contrast      : var(--rp-color-white);
+    --rp-color-pink-9-contrast      : var(--rp-color-white);
+    --rp-color-grape-0-contrast     : var(--rp-color-black);
+    --rp-color-grape-1-contrast     : var(--rp-color-black);
+    --rp-color-grape-2-contrast     : var(--rp-color-black);
+    --rp-color-grape-3-contrast     : var(--rp-color-black);
+    --rp-color-grape-4-contrast     : var(--rp-color-black);
+    --rp-color-grape-5-contrast     : var(--rp-color-black);
+    --rp-color-grape-6-contrast     : var(--rp-color-black);
+    --rp-color-grape-7-contrast     : var(--rp-color-white);
+    --rp-color-grape-8-contrast     : var(--rp-color-white);
+    --rp-color-grape-9-contrast     : var(--rp-color-white);
+    --rp-color-violet-0-contrast    : var(--rp-color-black);
+    --rp-color-violet-1-contrast    : var(--rp-color-black);
+    --rp-color-violet-2-contrast    : var(--rp-color-black);
+    --rp-color-violet-3-contrast    : var(--rp-color-black);
+    --rp-color-violet-4-contrast    : var(--rp-color-black);
+    --rp-color-violet-5-contrast    : var(--rp-color-black);
+    --rp-color-violet-6-contrast    : var(--rp-color-white);
+    --rp-color-violet-7-contrast    : var(--rp-color-white);
+    --rp-color-violet-8-contrast    : var(--rp-color-white);
+    --rp-color-violet-9-contrast    : var(--rp-color-white);
+    --rp-color-indigo-0-contrast    : var(--rp-color-black);
+    --rp-color-indigo-1-contrast    : var(--rp-color-black);
+    --rp-color-indigo-2-contrast    : var(--rp-color-black);
+    --rp-color-indigo-3-contrast    : var(--rp-color-black);
+    --rp-color-indigo-4-contrast    : var(--rp-color-black);
+    --rp-color-indigo-5-contrast    : var(--rp-color-black);
+    --rp-color-indigo-6-contrast    : var(--rp-color-black);
+    --rp-color-indigo-7-contrast    : var(--rp-color-white);
+    --rp-color-indigo-8-contrast    : var(--rp-color-white);
+    --rp-color-indigo-9-contrast    : var(--rp-color-white);
+    --rp-color-blue-0-contrast      : var(--rp-color-black);
+    --rp-color-blue-1-contrast      : var(--rp-color-black);
+    --rp-color-blue-2-contrast      : var(--rp-color-black);
+    --rp-color-blue-3-contrast      : var(--rp-color-black);
+    --rp-color-blue-4-contrast      : var(--rp-color-black);
+    --rp-color-blue-5-contrast      : var(--rp-color-black);
+    --rp-color-blue-6-contrast      : var(--rp-color-black);
+    --rp-color-blue-7-contrast      : var(--rp-color-black);
+    --rp-color-blue-8-contrast      : var(--rp-color-white);
+    --rp-color-blue-9-contrast      : var(--rp-color-white);
+    --rp-color-cyan-0-contrast      : var(--rp-color-black);
+    --rp-color-cyan-1-contrast      : var(--rp-color-black);
+    --rp-color-cyan-2-contrast      : var(--rp-color-black);
+    --rp-color-cyan-3-contrast      : var(--rp-color-black);
+    --rp-color-cyan-4-contrast      : var(--rp-color-black);
+    --rp-color-cyan-5-contrast      : var(--rp-color-black);
+    --rp-color-cyan-6-contrast      : var(--rp-color-black);
+    --rp-color-cyan-7-contrast      : var(--rp-color-black);
+    --rp-color-cyan-8-contrast      : var(--rp-color-black);
+    --rp-color-cyan-9-contrast      : var(--rp-color-white);
+    --rp-color-teal-0-contrast      : var(--rp-color-black);
+    --rp-color-teal-1-contrast      : var(--rp-color-black);
+    --rp-color-teal-2-contrast      : var(--rp-color-black);
+    --rp-color-teal-3-contrast      : var(--rp-color-black);
+    --rp-color-teal-4-contrast      : var(--rp-color-black);
+    --rp-color-teal-5-contrast      : var(--rp-color-black);
+    --rp-color-teal-6-contrast      : var(--rp-color-black);
+    --rp-color-teal-7-contrast      : var(--rp-color-black);
+    --rp-color-teal-8-contrast      : var(--rp-color-black);
+    --rp-color-teal-9-contrast      : var(--rp-color-white);
+    --rp-color-green-0-contrast     : var(--rp-color-black);
+    --rp-color-green-1-contrast     : var(--rp-color-black);
+    --rp-color-green-2-contrast     : var(--rp-color-black);
+    --rp-color-green-3-contrast     : var(--rp-color-black);
+    --rp-color-green-4-contrast     : var(--rp-color-black);
+    --rp-color-green-5-contrast     : var(--rp-color-black);
+    --rp-color-green-6-contrast     : var(--rp-color-black);
+    --rp-color-green-7-contrast     : var(--rp-color-black);
+    --rp-color-green-8-contrast     : var(--rp-color-black);
+    --rp-color-green-9-contrast     : var(--rp-color-black);
+    --rp-color-lime-0-contrast      : var(--rp-color-black);
+    --rp-color-lime-1-contrast      : var(--rp-color-black);
+    --rp-color-lime-2-contrast      : var(--rp-color-black);
+    --rp-color-lime-3-contrast      : var(--rp-color-black);
+    --rp-color-lime-4-contrast      : var(--rp-color-black);
+    --rp-color-lime-5-contrast      : var(--rp-color-black);
+    --rp-color-lime-6-contrast      : var(--rp-color-black);
+    --rp-color-lime-7-contrast      : var(--rp-color-black);
+    --rp-color-lime-8-contrast      : var(--rp-color-black);
+    --rp-color-lime-9-contrast      : var(--rp-color-black);
+    --rp-color-yellow-0-contrast    : var(--rp-color-black);
+    --rp-color-yellow-1-contrast    : var(--rp-color-black);
+    --rp-color-yellow-2-contrast    : var(--rp-color-black);
+    --rp-color-yellow-3-contrast    : var(--rp-color-black);
+    --rp-color-yellow-4-contrast    : var(--rp-color-black);
+    --rp-color-yellow-5-contrast    : var(--rp-color-black);
+    --rp-color-yellow-6-contrast    : var(--rp-color-black);
+    --rp-color-yellow-7-contrast    : var(--rp-color-black);
+    --rp-color-yellow-8-contrast    : var(--rp-color-black);
+    --rp-color-yellow-9-contrast    : var(--rp-color-black);
+    --rp-color-orange-0-contrast    : var(--rp-color-black);
+    --rp-color-orange-1-contrast    : var(--rp-color-black);
+    --rp-color-orange-2-contrast    : var(--rp-color-black);
+    --rp-color-orange-3-contrast    : var(--rp-color-black);
+    --rp-color-orange-4-contrast    : var(--rp-color-black);
+    --rp-color-orange-5-contrast    : var(--rp-color-black);
+    --rp-color-orange-6-contrast    : var(--rp-color-black);
+    --rp-color-orange-7-contrast    : var(--rp-color-black);
+    --rp-color-orange-8-contrast    : var(--rp-color-black);
+    --rp-color-orange-9-contrast    : var(--rp-color-black);
+    --rp-color-dark-filled          : var(--rp-color-dark-6);
+    --rp-color-dark-filled-hover    : var(--rp-color-dark-7);
+    --rp-color-dark-contrast        : var(--rp-color-white);
+    --rp-color-dark-light           : var(--rp-color-dark-1);
+    --rp-color-dark-light-hover     : var(--rp-color-dark-2);
+    --rp-color-dark-light-color     : var(--rp-color-dark-9);
+    --rp-color-dark-outline         : var(--rp-color-dark-6);
+    --rp-color-dark-outline-hover   : color-mix(in srgb, var(--rp-color-dark-6) 5%, transparent);
+    --rp-color-gray-filled          : var(--rp-color-gray-6);
+    --rp-color-gray-filled-hover    : var(--rp-color-gray-7);
+    --rp-color-gray-contrast        : var(--rp-color-black);
+    --rp-color-gray-light           : var(--rp-color-gray-1);
+    --rp-color-gray-light-hover     : var(--rp-color-gray-2);
+    --rp-color-gray-light-color     : var(--rp-color-gray-9);
+    --rp-color-gray-outline         : var(--rp-color-gray-6);
+    --rp-color-gray-outline-hover   : color-mix(in srgb, var(--rp-color-gray-6) 5%, transparent);
+    --rp-color-red-filled           : var(--rp-color-red-6);
+    --rp-color-red-filled-hover     : var(--rp-color-red-7);
+    --rp-color-red-contrast         : var(--rp-color-black);
+    --rp-color-red-light            : var(--rp-color-red-1);
+    --rp-color-red-light-hover      : var(--rp-color-red-2);
+    --rp-color-red-light-color      : var(--rp-color-red-9);
+    --rp-color-red-outline          : var(--rp-color-red-6);
+    --rp-color-red-outline-hover    : color-mix(in srgb, var(--rp-color-red-6) 5%, transparent);
+    --rp-color-pink-filled          : var(--rp-color-pink-6);
+    --rp-color-pink-filled-hover    : var(--rp-color-pink-7);
+    --rp-color-pink-contrast        : var(--rp-color-black);
+    --rp-color-pink-light           : var(--rp-color-pink-1);
+    --rp-color-pink-light-hover     : var(--rp-color-pink-2);
+    --rp-color-pink-light-color     : var(--rp-color-pink-9);
+    --rp-color-pink-outline         : var(--rp-color-pink-6);
+    --rp-color-pink-outline-hover   : color-mix(in srgb, var(--rp-color-pink-6) 5%, transparent);
+    --rp-color-grape-filled         : var(--rp-color-grape-6);
+    --rp-color-grape-filled-hover   : var(--rp-color-grape-7);
+    --rp-color-grape-contrast       : var(--rp-color-black);
+    --rp-color-grape-light          : var(--rp-color-grape-1);
+    --rp-color-grape-light-hover    : var(--rp-color-grape-2);
+    --rp-color-grape-light-color    : var(--rp-color-grape-9);
+    --rp-color-grape-outline        : var(--rp-color-grape-6);
+    --rp-color-grape-outline-hover  : color-mix(in srgb, var(--rp-color-grape-6) 5%, transparent);
+    --rp-color-violet-filled        : var(--rp-color-violet-6);
+    --rp-color-violet-filled-hover  : var(--rp-color-violet-7);
+    --rp-color-violet-contrast      : var(--rp-color-white);
+    --rp-color-violet-light         : var(--rp-color-violet-1);
+    --rp-color-violet-light-hover   : var(--rp-color-violet-2);
+    --rp-color-violet-light-color   : var(--rp-color-violet-9);
+    --rp-color-violet-outline       : var(--rp-color-violet-6);
+    --rp-color-violet-outline-hover : color-mix(in srgb, var(--rp-color-violet-6) 5%, transparent);
+    --rp-color-indigo-filled        : var(--rp-color-indigo-6);
+    --rp-color-indigo-filled-hover  : var(--rp-color-indigo-7);
+    --rp-color-indigo-contrast      : var(--rp-color-black);
+    --rp-color-indigo-light         : var(--rp-color-indigo-1);
+    --rp-color-indigo-light-hover   : var(--rp-color-indigo-2);
+    --rp-color-indigo-light-color   : var(--rp-color-indigo-9);
+    --rp-color-indigo-outline       : var(--rp-color-indigo-6);
+    --rp-color-indigo-outline-hover : color-mix(in srgb, var(--rp-color-indigo-6) 5%, transparent);
+    --rp-color-blue-filled          : var(--rp-color-blue-6);
+    --rp-color-blue-filled-hover    : var(--rp-color-blue-7);
+    --rp-color-blue-contrast        : var(--rp-color-black);
+    --rp-color-blue-light           : var(--rp-color-blue-1);
+    --rp-color-blue-light-hover     : var(--rp-color-blue-2);
+    --rp-color-blue-light-color     : var(--rp-color-blue-9);
+    --rp-color-blue-outline         : var(--rp-color-blue-6);
+    --rp-color-blue-outline-hover   : color-mix(in srgb, var(--rp-color-blue-6) 5%, transparent);
+    --rp-color-cyan-filled          : var(--rp-color-cyan-6);
+    --rp-color-cyan-filled-hover    : var(--rp-color-cyan-7);
+    --rp-color-cyan-contrast        : var(--rp-color-black);
+    --rp-color-cyan-light           : var(--rp-color-cyan-1);
+    --rp-color-cyan-light-hover     : var(--rp-color-cyan-2);
+    --rp-color-cyan-light-color     : var(--rp-color-cyan-9);
+    --rp-color-cyan-outline         : var(--rp-color-cyan-6);
+    --rp-color-cyan-outline-hover   : color-mix(in srgb, var(--rp-color-cyan-6) 5%, transparent);
+    --rp-color-teal-filled          : var(--rp-color-teal-6);
+    --rp-color-teal-filled-hover    : var(--rp-color-teal-7);
+    --rp-color-teal-contrast        : var(--rp-color-black);
+    --rp-color-teal-light           : var(--rp-color-teal-1);
+    --rp-color-teal-light-hover     : var(--rp-color-teal-2);
+    --rp-color-teal-light-color     : var(--rp-color-teal-9);
+    --rp-color-teal-outline         : var(--rp-color-teal-6);
+    --rp-color-teal-outline-hover   : color-mix(in srgb, var(--rp-color-teal-6) 5%, transparent);
+    --rp-color-green-filled         : var(--rp-color-green-6);
+    --rp-color-green-filled-hover   : var(--rp-color-green-7);
+    --rp-color-green-contrast       : var(--rp-color-black);
+    --rp-color-green-light          : var(--rp-color-green-1);
+    --rp-color-green-light-hover    : var(--rp-color-green-2);
+    --rp-color-green-light-color    : var(--rp-color-green-9);
+    --rp-color-green-outline        : var(--rp-color-green-6);
+    --rp-color-green-outline-hover  : color-mix(in srgb, var(--rp-color-green-6) 5%, transparent);
+    --rp-color-lime-filled          : var(--rp-color-lime-6);
+    --rp-color-lime-filled-hover    : var(--rp-color-lime-7);
+    --rp-color-lime-contrast        : var(--rp-color-black);
+    --rp-color-lime-light           : var(--rp-color-lime-1);
+    --rp-color-lime-light-hover     : var(--rp-color-lime-2);
+    --rp-color-lime-light-color     : var(--rp-color-lime-9);
+    --rp-color-lime-outline         : var(--rp-color-lime-6);
+    --rp-color-lime-outline-hover   : color-mix(in srgb, var(--rp-color-lime-6) 5%, transparent);
+    --rp-color-yellow-filled        : var(--rp-color-yellow-6);
+    --rp-color-yellow-filled-hover  : var(--rp-color-yellow-7);
+    --rp-color-yellow-contrast      : var(--rp-color-black);
+    --rp-color-yellow-light         : var(--rp-color-yellow-1);
+    --rp-color-yellow-light-hover   : var(--rp-color-yellow-2);
+    --rp-color-yellow-light-color   : var(--rp-color-yellow-9);
+    --rp-color-yellow-outline       : var(--rp-color-yellow-6);
+    --rp-color-yellow-outline-hover : color-mix(in srgb, var(--rp-color-yellow-6) 5%, transparent);
+    --rp-color-orange-filled        : var(--rp-color-orange-6);
+    --rp-color-orange-filled-hover  : var(--rp-color-orange-7);
+    --rp-color-orange-contrast      : var(--rp-color-black);
+    --rp-color-orange-light         : var(--rp-color-orange-1);
+    --rp-color-orange-light-hover   : var(--rp-color-orange-2);
+    --rp-color-orange-light-color   : var(--rp-color-orange-9);
+    --rp-color-orange-outline       : var(--rp-color-orange-6);
+    --rp-color-orange-outline-hover : color-mix(in srgb, var(--rp-color-orange-6) 5%, transparent);
+    --rp-color-scheme               : light;
+    --rp-color-bright               : var(--rp-color-black);
+    --rp-color-text                 : var(--rp-color-black);
+    --rp-color-body                 : var(--rp-color-white);
+    --rp-color-placeholder          : var(--rp-color-gray-5);
+    --rp-color-default              : var(--rp-color-white);
+    --rp-color-default-hover        : var(--rp-color-gray-1);
+    --rp-color-default-color        : var(--rp-color-black);
+    --rp-color-default-border       : var(--rp-color-gray-4);
+    --rp-color-default-border-hover : var(--rp-color-gray-5);
+    --rp-color-dimmed               : var(--rp-color-gray-6);
+    --rp-color-disabled             : var(--rp-color-gray-2);
+    --rp-color-disabled-color       : var(--rp-color-gray-5);
+    --rp-color-disabled-border      : var(--rp-color-gray-3);
+    --rp-color-focus-ring           : color-mix(in srgb, var(--rp-primary-color-filled) 32%, transparent);
+    --rp-color-control-bg           : var(--rp-color-default);
+    --rp-color-control-readonly-bg  : var(--rp-color-default-hover);
+    --rp-color-control-fg           : var(--rp-color-default-color);
+    --rp-color-control-placeholder  : var(--rp-color-placeholder);
+    --rp-color-control-icon         : var(--rp-color-dimmed);
+    --rp-color-control-border       : var(--rp-color-default-border);
+    --rp-color-control-border-hover : var(--rp-color-default-border-hover);
+    --rp-color-control-border-focus : var(--rp-primary-color-filled);
+    --rp-color-control-track-bg     : var(--rp-color-disabled-border);
+    --rp-color-control-thumb-bg     : var(--rp-color-white);
+    --rp-color-control-selected-bg  : var(--rp-primary-color-filled);
+    --rp-color-control-selected-fg  : var(--rp-color-white);
 
     // Font sizes
-    --rp-font-size-xs  : #{$font-size-xs};
-    --rp-font-size-sm  : #{$font-size-sm};
-    --rp-font-size-base: #{$font-size-base};
-    --rp-font-size-lg  : #{$font-size-lg};
-    --rp-font-size-xl  : #{$font-size-xl};
-    --rp-font-size-2xl : #{$font-size-2xl};
-    --rp-font-size-3xl : #{$font-size-3xl};
+    --rp-font-size-xs: #{$font-size-xs};
+    --rp-font-size-sm: #{$font-size-sm};
+    --rp-font-size-md: #{$font-size-md};
+    --rp-font-size-lg: #{$font-size-lg};
+    --rp-font-size-xl: #{$font-size-xl};
 
     // Font weights
     --rp-font-weight-normal  : #{$font-weight-normal};
@@ -123,12 +463,32 @@
     --rp-font-weight-semibold: #{$font-weight-semibold};
     --rp-font-weight-bold    : #{$font-weight-bold};
 
+    // Headings
+    --rp-h1-font-size  : #{$heading-h1-font-size};
+    --rp-h1-line-height: #{$heading-h1-line-height};
+    --rp-h1-font-weight: #{$heading-h1-font-weight};
+    --rp-h2-font-size  : #{$heading-h2-font-size};
+    --rp-h2-line-height: #{$heading-h2-line-height};
+    --rp-h2-font-weight: #{$heading-h2-font-weight};
+    --rp-h3-font-size  : #{$heading-h3-font-size};
+    --rp-h3-line-height: #{$heading-h3-line-height};
+    --rp-h3-font-weight: #{$heading-h3-font-weight};
+    --rp-h4-font-size  : #{$heading-h4-font-size};
+    --rp-h4-line-height: #{$heading-h4-line-height};
+    --rp-h4-font-weight: #{$heading-h4-font-weight};
+    --rp-h5-font-size  : #{$heading-h5-font-size};
+    --rp-h5-line-height: #{$heading-h5-line-height};
+    --rp-h5-font-weight: #{$heading-h5-font-weight};
+    --rp-h6-font-size  : #{$heading-h6-font-size};
+    --rp-h6-line-height: #{$heading-h6-line-height};
+    --rp-h6-font-weight: #{$heading-h6-font-weight};
+
     // Line heights
-    --rp-line-height-none   : #{$line-height-none};
-    --rp-line-height-tight  : #{$line-height-tight};
-    --rp-line-height-normal : #{$line-height-normal};
-    --rp-line-height-relaxed: #{$line-height-relaxed};
-    --rp-line-height-loose  : #{$line-height-loose};
+    --rp-line-height-xs: #{$line-height-xs};
+    --rp-line-height-sm: #{$line-height-sm};
+    --rp-line-height-md: #{$line-height-md};
+    --rp-line-height-lg: #{$line-height-lg};
+    --rp-line-height-xl: #{$line-height-xl};
 
     // Spacing
     --rp-spacing-0 : #{$spacing-0};
@@ -156,9 +516,11 @@
     --rp-border-width-medium: #{$border-width-medium};
 
     // Control sizes
+    --rp-size-control-xs: #{$size-control-xs};
     --rp-size-control-sm: #{$size-control-sm};
     --rp-size-control-md: #{$size-control-md};
     --rp-size-control-lg: #{$size-control-lg};
+    --rp-size-control-xl: #{$size-control-xl};
 
     // Opacity
     --rp-opacity-disabled: #{$opacity-disabled};
@@ -176,77 +538,148 @@
 
 }
 
-html.dark {
-    // Colors
-    --rp-color-text                      : #eeeeee;
-    --rp-color-text-secondary            : #b4b4b4;
-    --rp-color-text-disabled             : #6e6e6e;
-    --rp-color-text-inverted             : #{$color-gray-12};
-    --rp-color-background                : #191919;
-    --rp-color-surface                   : #222222;
-    --rp-color-surface-raised            : #2a2a2a;
-    --rp-color-surface-muted             : #222222;
-    --rp-color-surface-hover             : #2a2a2a;
-    --rp-color-button-default-bg         : var(--rp-color-surface);
-    --rp-color-button-default-bg-hover   : var(--rp-color-surface-hover);
-    --rp-color-button-default-bg-active  : #313131;
-    --rp-color-surface-inverted          : #{$color-gray-2};
-    --rp-color-overlay                   : rgba(17, 17, 17, 0.75);
-    --rp-color-border                    : #3a3a3a;
-    --rp-color-border-hover              : #606060;
-    --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
-    --rp-color-control-bg                : var(--rp-color-surface);
-    --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
-    --rp-color-control-fg                : #eeeeee;
-    --rp-color-control-placeholder       : #6e6e6e;
-    --rp-color-control-icon              : #b4b4b4;
-    --rp-color-control-border            : #3a3a3a;
-    --rp-color-control-border-hover      : #606060;
-    --rp-color-control-border-focus      : var(--rp-color-primary);
-    --rp-color-control-track-bg          : var(--rp-color-border);
-    --rp-color-control-thumb-bg          : var(--rp-color-surface-inverted);
-    --rp-color-primary-subtle-bg         : #0d2847;
-    --rp-color-primary-subtle-bg-hover   : #003362;
-    --rp-color-primary-subtle-bg-active  : #004074;
-    --rp-color-primary-border            : #205d9e;
-    --rp-color-primary-border-hover      : #2870bd;
-    --rp-color-primary-fg                : #70b8ff;
-    --rp-color-secondary-subtle-bg       : #291f43;
-    --rp-color-secondary-subtle-bg-hover : #33255b;
-    --rp-color-secondary-subtle-bg-active: #3c2e69;
-    --rp-color-secondary-border          : #56468b;
-    --rp-color-secondary-border-hover    : #6958ad;
-    --rp-color-secondary-fg              : #baa7ff;
-    --rp-color-success-subtle-bg         : #132d21;
-    --rp-color-success-subtle-bg-hover   : #113b29;
-    --rp-color-success-subtle-bg-active  : #174933;
-    --rp-color-success-border            : #28684a;
-    --rp-color-success-border-hover      : #2f7c57;
-    --rp-color-success-fg                : #3dd68c;
-    --rp-color-warning-subtle-bg         : #331e0b;
-    --rp-color-warning-subtle-bg-hover   : #462100;
-    --rp-color-warning-subtle-bg-active  : #562800;
-    --rp-color-warning-border            : #7e451d;
-    --rp-color-warning-border-hover      : #a35829;
-    --rp-color-warning-fg                : #ffa057;
-    --rp-color-danger-subtle-bg          : #3b1219;
-    --rp-color-danger-subtle-bg-hover    : #500f1c;
-    --rp-color-danger-subtle-bg-active   : #611623;
-    --rp-color-danger-border             : #8c333a;
-    --rp-color-danger-border-hover       : #b54548;
-    --rp-color-danger-fg                 : #ff9592;
-    --rp-color-info-subtle-bg            : #082c36;
-    --rp-color-info-subtle-bg-hover      : #003848;
-    --rp-color-info-subtle-bg-active     : #004558;
-    --rp-color-info-border               : #12677e;
-    --rp-color-info-border-hover         : #11809c;
-    --rp-color-info-fg                   : #4ccce6;
-    --rp-color-neutral-subtle-bg         : #222222;
-    --rp-color-neutral-subtle-bg-hover   : #2a2a2a;
-    --rp-color-neutral-subtle-bg-active  : #313131;
-    --rp-color-neutral-border            : #484848;
-    --rp-color-neutral-border-hover      : #606060;
-    --rp-color-neutral-fg                : #eeeeee;
+html.dark,
+[data-rp-color-scheme="dark"] {
+    // Derived colors
+    --rp-color-dark-filled         : var(--rp-color-dark-8);
+    --rp-color-dark-filled-hover   : var(--rp-color-dark-9);
+    --rp-color-dark-contrast       : var(--rp-color-white);
+    --rp-color-dark-light          : color-mix(in srgb, var(--rp-color-dark-9) 50%, var(--rp-color-black));
+    --rp-color-dark-light-hover    : color-mix(in srgb, var(--rp-color-dark-9) 70%, var(--rp-color-black));
+    --rp-color-dark-light-color    : var(--rp-color-dark-0);
+    --rp-color-dark-outline        : var(--rp-color-dark-4);
+    --rp-color-dark-outline-hover  : color-mix(in srgb, var(--rp-color-dark-4) 5%, transparent);
+    --rp-color-gray-filled         : var(--rp-color-gray-8);
+    --rp-color-gray-filled-hover   : var(--rp-color-gray-9);
+    --rp-color-gray-contrast       : var(--rp-color-white);
+    --rp-color-gray-light          : color-mix(in srgb, var(--rp-color-gray-9) 50%, var(--rp-color-black));
+    --rp-color-gray-light-hover    : color-mix(in srgb, var(--rp-color-gray-9) 70%, var(--rp-color-black));
+    --rp-color-gray-light-color    : var(--rp-color-gray-0);
+    --rp-color-gray-outline        : var(--rp-color-gray-4);
+    --rp-color-gray-outline-hover  : color-mix(in srgb, var(--rp-color-gray-4) 5%, transparent);
+    --rp-color-red-filled          : var(--rp-color-red-8);
+    --rp-color-red-filled-hover    : var(--rp-color-red-9);
+    --rp-color-red-contrast        : var(--rp-color-black);
+    --rp-color-red-light           : color-mix(in srgb, var(--rp-color-red-9) 50%, var(--rp-color-black));
+    --rp-color-red-light-hover     : color-mix(in srgb, var(--rp-color-red-9) 70%, var(--rp-color-black));
+    --rp-color-red-light-color     : var(--rp-color-red-0);
+    --rp-color-red-outline         : var(--rp-color-red-4);
+    --rp-color-red-outline-hover   : color-mix(in srgb, var(--rp-color-red-4) 5%, transparent);
+    --rp-color-pink-filled         : var(--rp-color-pink-8);
+    --rp-color-pink-filled-hover   : var(--rp-color-pink-9);
+    --rp-color-pink-contrast       : var(--rp-color-white);
+    --rp-color-pink-light          : color-mix(in srgb, var(--rp-color-pink-9) 50%, var(--rp-color-black));
+    --rp-color-pink-light-hover    : color-mix(in srgb, var(--rp-color-pink-9) 70%, var(--rp-color-black));
+    --rp-color-pink-light-color    : var(--rp-color-pink-0);
+    --rp-color-pink-outline        : var(--rp-color-pink-4);
+    --rp-color-pink-outline-hover  : color-mix(in srgb, var(--rp-color-pink-4) 5%, transparent);
+    --rp-color-grape-filled        : var(--rp-color-grape-8);
+    --rp-color-grape-filled-hover  : var(--rp-color-grape-9);
+    --rp-color-grape-contrast      : var(--rp-color-white);
+    --rp-color-grape-light         : color-mix(in srgb, var(--rp-color-grape-9) 50%, var(--rp-color-black));
+    --rp-color-grape-light-hover   : color-mix(in srgb, var(--rp-color-grape-9) 70%, var(--rp-color-black));
+    --rp-color-grape-light-color   : var(--rp-color-grape-0);
+    --rp-color-grape-outline       : var(--rp-color-grape-4);
+    --rp-color-grape-outline-hover : color-mix(in srgb, var(--rp-color-grape-4) 5%, transparent);
+    --rp-color-violet-filled       : var(--rp-color-violet-8);
+    --rp-color-violet-filled-hover : var(--rp-color-violet-9);
+    --rp-color-violet-contrast     : var(--rp-color-white);
+    --rp-color-violet-light        : color-mix(in srgb, var(--rp-color-violet-9) 50%, var(--rp-color-black));
+    --rp-color-violet-light-hover  : color-mix(in srgb, var(--rp-color-violet-9) 70%, var(--rp-color-black));
+    --rp-color-violet-light-color  : var(--rp-color-violet-0);
+    --rp-color-violet-outline      : var(--rp-color-violet-4);
+    --rp-color-violet-outline-hover: color-mix(in srgb, var(--rp-color-violet-4) 5%, transparent);
+    --rp-color-indigo-filled       : var(--rp-color-indigo-8);
+    --rp-color-indigo-filled-hover : var(--rp-color-indigo-9);
+    --rp-color-indigo-contrast     : var(--rp-color-white);
+    --rp-color-indigo-light        : color-mix(in srgb, var(--rp-color-indigo-9) 50%, var(--rp-color-black));
+    --rp-color-indigo-light-hover  : color-mix(in srgb, var(--rp-color-indigo-9) 70%, var(--rp-color-black));
+    --rp-color-indigo-light-color  : var(--rp-color-indigo-0);
+    --rp-color-indigo-outline      : var(--rp-color-indigo-4);
+    --rp-color-indigo-outline-hover: color-mix(in srgb, var(--rp-color-indigo-4) 5%, transparent);
+    --rp-color-blue-filled         : var(--rp-color-blue-8);
+    --rp-color-blue-filled-hover   : var(--rp-color-blue-9);
+    --rp-color-blue-contrast       : var(--rp-color-white);
+    --rp-color-blue-light          : color-mix(in srgb, var(--rp-color-blue-9) 50%, var(--rp-color-black));
+    --rp-color-blue-light-hover    : color-mix(in srgb, var(--rp-color-blue-9) 70%, var(--rp-color-black));
+    --rp-color-blue-light-color    : var(--rp-color-blue-0);
+    --rp-color-blue-outline        : var(--rp-color-blue-4);
+    --rp-color-blue-outline-hover  : color-mix(in srgb, var(--rp-color-blue-4) 5%, transparent);
+    --rp-color-cyan-filled         : var(--rp-color-cyan-8);
+    --rp-color-cyan-filled-hover   : var(--rp-color-cyan-9);
+    --rp-color-cyan-contrast       : var(--rp-color-black);
+    --rp-color-cyan-light          : color-mix(in srgb, var(--rp-color-cyan-9) 50%, var(--rp-color-black));
+    --rp-color-cyan-light-hover    : color-mix(in srgb, var(--rp-color-cyan-9) 70%, var(--rp-color-black));
+    --rp-color-cyan-light-color    : var(--rp-color-cyan-0);
+    --rp-color-cyan-outline        : var(--rp-color-cyan-4);
+    --rp-color-cyan-outline-hover  : color-mix(in srgb, var(--rp-color-cyan-4) 5%, transparent);
+    --rp-color-teal-filled         : var(--rp-color-teal-8);
+    --rp-color-teal-filled-hover   : var(--rp-color-teal-9);
+    --rp-color-teal-contrast       : var(--rp-color-black);
+    --rp-color-teal-light          : color-mix(in srgb, var(--rp-color-teal-9) 50%, var(--rp-color-black));
+    --rp-color-teal-light-hover    : color-mix(in srgb, var(--rp-color-teal-9) 70%, var(--rp-color-black));
+    --rp-color-teal-light-color    : var(--rp-color-teal-0);
+    --rp-color-teal-outline        : var(--rp-color-teal-4);
+    --rp-color-teal-outline-hover  : color-mix(in srgb, var(--rp-color-teal-4) 5%, transparent);
+    --rp-color-green-filled        : var(--rp-color-green-8);
+    --rp-color-green-filled-hover  : var(--rp-color-green-9);
+    --rp-color-green-contrast      : var(--rp-color-black);
+    --rp-color-green-light         : color-mix(in srgb, var(--rp-color-green-9) 50%, var(--rp-color-black));
+    --rp-color-green-light-hover   : color-mix(in srgb, var(--rp-color-green-9) 70%, var(--rp-color-black));
+    --rp-color-green-light-color   : var(--rp-color-green-0);
+    --rp-color-green-outline       : var(--rp-color-green-4);
+    --rp-color-green-outline-hover : color-mix(in srgb, var(--rp-color-green-4) 5%, transparent);
+    --rp-color-lime-filled         : var(--rp-color-lime-8);
+    --rp-color-lime-filled-hover   : var(--rp-color-lime-9);
+    --rp-color-lime-contrast       : var(--rp-color-black);
+    --rp-color-lime-light          : color-mix(in srgb, var(--rp-color-lime-9) 50%, var(--rp-color-black));
+    --rp-color-lime-light-hover    : color-mix(in srgb, var(--rp-color-lime-9) 70%, var(--rp-color-black));
+    --rp-color-lime-light-color    : var(--rp-color-lime-0);
+    --rp-color-lime-outline        : var(--rp-color-lime-4);
+    --rp-color-lime-outline-hover  : color-mix(in srgb, var(--rp-color-lime-4) 5%, transparent);
+    --rp-color-yellow-filled       : var(--rp-color-yellow-8);
+    --rp-color-yellow-filled-hover : var(--rp-color-yellow-9);
+    --rp-color-yellow-contrast     : var(--rp-color-black);
+    --rp-color-yellow-light        : color-mix(in srgb, var(--rp-color-yellow-9) 50%, var(--rp-color-black));
+    --rp-color-yellow-light-hover  : color-mix(in srgb, var(--rp-color-yellow-9) 70%, var(--rp-color-black));
+    --rp-color-yellow-light-color  : var(--rp-color-yellow-0);
+    --rp-color-yellow-outline      : var(--rp-color-yellow-4);
+    --rp-color-yellow-outline-hover: color-mix(in srgb, var(--rp-color-yellow-4) 5%, transparent);
+    --rp-color-orange-filled       : var(--rp-color-orange-8);
+    --rp-color-orange-filled-hover : var(--rp-color-orange-9);
+    --rp-color-orange-contrast     : var(--rp-color-black);
+    --rp-color-orange-light        : color-mix(in srgb, var(--rp-color-orange-9) 50%, var(--rp-color-black));
+    --rp-color-orange-light-hover  : color-mix(in srgb, var(--rp-color-orange-9) 70%, var(--rp-color-black));
+    --rp-color-orange-light-color  : var(--rp-color-orange-0);
+    --rp-color-orange-outline      : var(--rp-color-orange-4);
+    --rp-color-orange-outline-hover: color-mix(in srgb, var(--rp-color-orange-4) 5%, transparent);
+    --rp-color-scheme              : dark;
+    --rp-color-bright              : var(--rp-color-white);
+    --rp-color-text                : var(--rp-color-dark-0);
+    --rp-color-body                : var(--rp-color-dark-7);
+    --rp-color-placeholder         : var(--rp-color-dark-3);
+    --rp-color-default             : var(--rp-color-dark-6);
+    --rp-color-default-hover       : var(--rp-color-dark-5);
+    --rp-color-default-color       : var(--rp-color-white);
+    --rp-color-default-border      : var(--rp-color-dark-4);
+    --rp-color-default-border-hover: var(--rp-color-dark-3);
+    --rp-color-dimmed              : var(--rp-color-dark-2);
+    --rp-color-disabled            : var(--rp-color-dark-6);
+    --rp-color-disabled-color      : var(--rp-color-dark-3);
+    --rp-color-disabled-border     : var(--rp-color-dark-4);
+    --rp-color-focus-ring          : color-mix(in srgb, var(--rp-primary-color-filled) 45%, transparent);
+    --rp-color-control-bg          : var(--rp-color-default);
+    --rp-color-control-readonly-bg : var(--rp-color-default-hover);
+    --rp-color-control-fg          : var(--rp-color-default-color);
+    --rp-color-control-placeholder : var(--rp-color-placeholder);
+    --rp-color-control-icon        : var(--rp-color-dimmed);
+    --rp-color-control-border      : var(--rp-color-default-border);
+    --rp-color-control-border-hover: var(--rp-color-default-border-hover);
+    --rp-color-control-border-focus: var(--rp-primary-color-filled);
+    --rp-color-control-track-bg    : var(--rp-color-disabled-border);
+    --rp-color-control-thumb-bg    : var(--rp-color-white);
+    --rp-color-control-selected-bg : var(--rp-primary-color-filled);
+    --rp-color-control-selected-fg : var(--rp-color-white);
 
     // Shadows
     --rp-shadow-sm  : 0 1px 2px 0 rgba(0, 0, 0, 0.3);