@acorex/styles 19.8.0-next.9 → 19.10.0-next.0

package/themes/default.scss

@@ -6,241 +6,240 @@
   --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   --ax-sys-border-radius: 0.5rem;
   --ax-sys-border-color: 233, 234, 235;
-  --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
+  --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
   --ax-sys-body-text-color: 22, 22, 22;
 
   // Surfaces
-  --ax-sys-surface-light-bg-color: 255, 255, 255;
-  --ax-sys-on-surface-light-color: 0, 0, 0;
-  --ax-sys-surface-light-border-color: 0, 0, 0;
-
-  --ax-sys-surface-lowest-bg-color: 255, 255, 255;
-  --ax-sys-on-surface-lowest-color: 40, 40, 40;
-  --ax-sys-surface-lowest-border-color: 233, 236, 239;
-
-  --ax-sys-surface-low-bg-color: 248, 249, 250;
-  --ax-sys-on-surface-low-color: 40, 40, 40;
-  --ax-sys-surface-low-border-color: 233, 236, 239;
-
-  --ax-sys-surface-bg-color: 239, 241, 243;
-  --ax-sys-on-surface-color: 30, 30, 30;
-  --ax-sys-surface-border-color: 232, 235, 238;
-
-  --ax-sys-surface-high-bg-color: 234, 237, 239;
-  --ax-sys-on-surface-high-color: 20, 20, 20;
-  --ax-sys-surface-high-border-color: 228, 231, 234;
-
-  --ax-sys-surface-highest-bg-color: 230, 233, 236;
-  --ax-sys-on-surface-highest-color: 10, 10, 10;
-  --ax-sys-surface-highest-border-color: 225, 229, 233;
-
-  --ax-sys-surface-input-bg-color: 255, 255, 255;
-  --ax-sys-surface-input-text-color: 30, 30, 30;
-  --ax-sys-surface-input-placeholder-color: 180, 180, 180;
-  --ax-sys-surface-input-border-color: 220, 220, 220;
-
-  --ax-sys-surface-dark-bg-color: 0, 0, 0;
-  --ax-sys-on-surface-dark-color: 255, 255, 255;
-  --ax-sys-surface-dark-border-color: 255, 255, 255;
-
-  // Base Colors
+  --ax-sys-color-surface-light: 255, 255, 255;
+  --ax-sys-color-on-surface-light: 0, 0, 0;
+  --ax-sys-color-border-surface-light: 0, 0, 0;
+
+  --ax-sys-color-surface-lowest: 255, 255, 255;
+  --ax-sys-color-on-surface-lowest: 40, 40, 40;
+  --ax-sys-color-border-surface-lowest: 233, 236, 239;
+
+  --ax-sys-color-surface-low: 248, 249, 250;
+  --ax-sys-color-on-surface-low: 40, 40, 40;
+  --ax-sys-color-border-surface-low: 233, 236, 239;
+
+  --ax-sys-color-surface: 239, 241, 243;
+  --ax-sys-color-on-surface: 30, 30, 30;
+  --ax-sys-color-border-surface: 232, 235, 238;
+
+  --ax-sys-color-surface-high: 234, 237, 239;
+  --ax-sys-color-on-surface-high: 20, 20, 20;
+  --ax-sys-color-border-surface-high: 228, 231, 234;
+
+  --ax-sys-color-surface-highest: 230, 233, 236;
+  --ax-sys-color-on-surface-highest: 10, 10, 10;
+  --ax-sys-color-border-surface-highest: 225, 229, 233;
+
+  --ax-sys-color-surface-dark: 0, 0, 0;
+  --ax-sys-color-on-surface-dark: 255, 255, 255;
+  --ax-sys-color-border-surface-dark: 255, 255, 255;
+
+  --ax-sys-color-input-surface: 255, 255, 255;
+  --ax-sys-color-input-surface-text: 30, 30, 30;
+  --ax-sys-color-input-surface-placeholder: 180, 180, 180;
+  --ax-sys-color-input-surface-border: 220, 220, 220;
+
+  --ax-sys-color-primary-50: 227, 244, 255;
+  --ax-sys-color-primary-100: 207, 231, 255;
+  --ax-sys-color-primary-200: 167, 207, 255;
+  --ax-sys-color-primary-300: 126, 181, 255;
+  --ax-sys-color-primary-400: 81, 154, 255;
+  --ax-sys-color-primary-500: 43, 127, 255;
+  --ax-sys-color-primary-600: 0, 97, 222;
+  --ax-sys-color-primary-700: 0, 66, 190;
+  --ax-sys-color-primary-800: 0, 31, 158;
+  --ax-sys-color-primary-900: 0, 0, 117;
+  --ax-sys-color-primary-950: 0, 0, 89;
   --ax-sys-color-on-primary: 255, 255, 255;
-  --ax-sys-color-on-contrast-primary: 11, 30, 71;
-  --ax-sys-color-primary-50: 239, 246, 255;
-  --ax-sys-color-primary-100: 219, 234, 254;
-  --ax-sys-color-primary-200: 191, 219, 254;
-  --ax-sys-color-primary-300: 147, 197, 253;
-  --ax-sys-color-primary-400: 96, 165, 250;
-  --ax-sys-color-primary-500: 59, 130, 246;
-  --ax-sys-color-primary-600: 37, 99, 235;
-  --ax-sys-color-primary-700: 29, 78, 216;
-  --ax-sys-color-primary-800: 30, 64, 175;
-  --ax-sys-color-primary-900: 30, 58, 138;
-  --ax-sys-color-primary-950: 23, 37, 84;
-
+  --ax-sys-color-on-contrast-primary: 0, 0, 89;
+
+  --ax-sys-color-secondary-50: 231, 240, 255;
+  --ax-sys-color-secondary-100: 216, 226, 244;
+  --ax-sys-color-secondary-200: 188, 196, 214;
+  --ax-sys-color-secondary-300: 159, 168, 185;
+  --ax-sys-color-secondary-400: 132, 141, 157;
+  --ax-sys-color-secondary-500: 106, 114, 130;
+  --ax-sys-color-secondary-600: 83, 91, 107;
+  --ax-sys-color-secondary-700: 62, 69, 84;
+  --ax-sys-color-secondary-800: 42, 48, 62;
+  --ax-sys-color-secondary-900: 23, 29, 42;
+  --ax-sys-color-secondary-950: 14, 20, 32;
   --ax-sys-color-on-secondary: 255, 255, 255;
-  --ax-sys-color-on-contrast-secondary: 9, 9, 11;
-  --ax-sys-color-secondary-50: 249, 250, 251;
-  --ax-sys-color-secondary-100: 243, 244, 246;
-  --ax-sys-color-secondary-200: 229, 231, 235;
-  --ax-sys-color-secondary-300: 209, 213, 219;
-  --ax-sys-color-secondary-400: 156, 163, 175;
-  --ax-sys-color-secondary-500: 107, 114, 128;
-  --ax-sys-color-secondary-600: 75, 85, 99;
-  --ax-sys-color-secondary-700: 55, 65, 81;
-  --ax-sys-color-secondary-800: 31, 41, 55;
-  --ax-sys-color-secondary-900: 24, 24, 27;
-  --ax-sys-color-secondary-950: 9, 9, 11;
-
+  --ax-sys-color-on-contrast-secondary: 14, 20, 32;
+
+  --ax-sys-color-success-50: 199, 255, 228;
+  --ax-sys-color-success-100: 152, 255, 206;
+  --ax-sys-color-success-200: 102, 247, 180;
+  --ax-sys-color-success-300: 78, 227, 162;
+  --ax-sys-color-success-400: 51, 207, 143;
+  --ax-sys-color-success-500: 1, 188, 125;
+  --ax-sys-color-success-600: 0, 153, 93;
+  --ax-sys-color-success-700: 0, 116, 67;
+  --ax-sys-color-success-800: 0, 80, 43;
+  --ax-sys-color-success-900: 0, 47, 21;
+  --ax-sys-color-success-950: 0, 32, 11;
   --ax-sys-color-on-success: 255, 255, 255;
-  --ax-sys-color-on-contrast-success: 5, 46, 22;
-  --ax-sys-color-success-50: 240, 253, 244;
-  --ax-sys-color-success-100: 220, 252, 231;
-  --ax-sys-color-success-200: 187, 247, 208;
-  --ax-sys-color-success-300: 134, 239, 172;
-  --ax-sys-color-success-400: 74, 222, 128;
-  --ax-sys-color-success-500: 34, 197, 94;
-  --ax-sys-color-success-600: 22, 163, 74;
-  --ax-sys-color-success-700: 21, 128, 61;
-  --ax-sys-color-success-800: 22, 101, 52;
-  --ax-sys-color-success-900: 20, 83, 45;
-  --ax-sys-color-success-950: 5, 46, 22;
-
+  --ax-sys-color-on-contrast-success: 0, 32, 11;
+
+  --ax-sys-color-warning-50: 255, 242, 216;
+  --ax-sys-color-warning-100: 255, 233, 198;
+  --ax-sys-color-warning-200: 255, 213, 158;
+  --ax-sys-color-warning-300: 255, 192, 113;
+  --ax-sys-color-warning-400: 255, 170, 50;
+  --ax-sys-color-warning-500: 253, 154, 1;
+  --ax-sys-color-warning-600: 208, 116, 0;
+  --ax-sys-color-warning-700: 157, 85, 0;
+  --ax-sys-color-warning-800: 109, 55, 0;
+  --ax-sys-color-warning-900: 65, 28, 0;
+  --ax-sys-color-warning-950: 45, 16, 0;
   --ax-sys-color-on-warning: 255, 255, 255;
-  --ax-sys-color-on-contrast-warning: 69, 26, 3;
-  --ax-sys-color-warning-50: 255, 251, 235;
-  --ax-sys-color-warning-100: 254, 243, 199;
-  --ax-sys-color-warning-200: 253, 230, 138;
-  --ax-sys-color-warning-300: 252, 211, 77;
-  --ax-sys-color-warning-400: 251, 191, 36;
-  --ax-sys-color-warning-500: 245, 158, 11;
-  --ax-sys-color-warning-600: 217, 119, 6;
-  --ax-sys-color-warning-700: 180, 83, 9;
-  --ax-sys-color-warning-800: 146, 64, 14;
-  --ax-sys-color-warning-900: 120, 53, 15;
-  --ax-sys-color-warning-950: 69, 26, 3;
-
+  --ax-sys-color-on-contrast-warning: 45, 16, 0;
+
+  --ax-sys-color-danger-50: 255, 233, 233;
+  --ax-sys-color-danger-100: 255, 216, 216;
+  --ax-sys-color-danger-200: 255, 181, 181;
+  --ax-sys-color-danger-300: 255, 142, 152;
+  --ax-sys-color-danger-400: 255, 94, 117;
+  --ax-sys-color-danger-500: 255, 32, 86;
+  --ax-sys-color-danger-600: 215, 0, 60;
+  --ax-sys-color-danger-700: 165, 0, 43;
+  --ax-sys-color-danger-800: 119, 0, 27;
+  --ax-sys-color-danger-900: 75, 0, 11;
+  --ax-sys-color-danger-950: 54, 0, 5;
   --ax-sys-color-on-danger: 255, 255, 255;
-  --ax-sys-color-on-contrast-danger: 76, 5, 25;
-  --ax-sys-color-danger-50: 255, 241, 242;
-  --ax-sys-color-danger-100: 255, 228, 230;
-  --ax-sys-color-danger-200: 254, 205, 211;
-  --ax-sys-color-danger-300: 253, 164, 175;
-  --ax-sys-color-danger-400: 251, 113, 133;
-  --ax-sys-color-danger-500: 244, 63, 94;
-  --ax-sys-color-danger-600: 225, 29, 72;
-  --ax-sys-color-danger-700: 190, 18, 60;
-  --ax-sys-color-danger-800: 159, 18, 57;
-  --ax-sys-color-danger-900: 136, 19, 55;
-  --ax-sys-color-danger-950: 76, 5, 25;
+  --ax-sys-color-on-contrast-danger: 54, 0, 5;
 
-  --ax-sys-color-on-ghost: 255, 255, 255;
-  --ax-sys-color-on-contrast-ghost: 24, 24, 27;
   --ax-sys-color-ghost-50: 255, 255, 255;
   --ax-sys-color-ghost-100: 244, 244, 245;
   --ax-sys-color-ghost-200: 228, 228, 231;
   --ax-sys-color-ghost-300: 212, 212, 216;
-  --ax-sys-color-ghost-400: 161, 161, 170;
-  --ax-sys-color-ghost-500: 113, 113, 122;
-  --ax-sys-color-ghost-600: 82, 82, 91;
+  --ax-sys-color-ghost-400: 159, 159, 169;
+  --ax-sys-color-ghost-500: 113, 113, 123;
+  --ax-sys-color-ghost-600: 82, 82, 92;
   --ax-sys-color-ghost-700: 63, 63, 70;
   --ax-sys-color-ghost-800: 39, 39, 42;
   --ax-sys-color-ghost-900: 24, 24, 27;
   --ax-sys-color-ghost-950: 9, 9, 11;
+  --ax-sys-color-on-ghost: 255, 255, 255;
+  --ax-sys-color-on-contrast-ghost: 24, 24, 27;
 }
 
 .ax-dark {
-  --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
+  --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
   --ax-sys-body-text-color: 255, 255, 255;
 
   --ax-sys-border-color: 34, 38, 47;
 
-  --ax-sys-surface-lowest-bg-color: 15, 15, 15;
-  --ax-sys-on-surface-lowest-color: 220, 220, 220;
-  --ax-sys-surface-lowest-border-color: 20, 20, 20;
-
-  --ax-sys-surface-low-bg-color: 20, 20, 20;
-  --ax-sys-on-surface-low-color: 230, 230, 230;
-  --ax-sys-surface-low-border-color: 25, 25, 25;
-
-  --ax-sys-surface-bg-color: 25, 25, 25;
-  --ax-sys-on-surface-color: 240, 240, 240;
-  --ax-sys-surface-border-color: 34, 34, 34;
-
-  --ax-sys-surface-high-bg-color: 29, 29, 29;
-  --ax-sys-on-surface-high-color: 250, 250, 250;
-  --ax-sys-surface-high-border-color: 43, 43, 43;
-
-  --ax-sys-surface-highest-bg-color: 34, 34, 34;
-  --ax-sys-on-surface-highest-color: 255, 255, 255;
-  --ax-sys-surface-highest-border-color: 52, 52, 52;
-
-  --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
-  --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
-  --ax-sys-surface-input-placeholder-color: 100, 100, 100;
-  --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
-
-  --ax-sys-color-on-primary: 11, 30, 71;
-  --ax-sys-color-on-contrast-primary: 57, 62, 75;
-  --ax-sys-color-primary-50: 252, 253, 255;
-  --ax-sys-color-primary-100: 249, 250, 254;
-  --ax-sys-color-primary-200: 236, 241, 253;
-  --ax-sys-color-primary-300: 224, 232, 252;
-  --ax-sys-color-primary-400: 211, 222, 251;
-  --ax-sys-color-primary-500: 192, 208, 249;
-  --ax-sys-color-primary-600: 173, 187, 224;
-  --ax-sys-color-primary-700: 134, 146, 174;
-  --ax-sys-color-primary-800: 96, 104, 125;
-  --ax-sys-color-primary-900: 58, 62, 75;
-  --ax-sys-color-primary-950: 19, 21, 25;
-
-  --ax-sys-color-on-secondary: 58, 62, 69;
-  --ax-sys-color-on-contrast-secondary: 70, 74, 83;
-  --ax-sys-color-secondary-50: 255, 255, 255;
-  --ax-sys-color-secondary-100: 241, 242, 243;
-  --ax-sys-color-secondary-200: 227, 229, 232;
-  --ax-sys-color-secondary-300: 213, 216, 220;
-  --ax-sys-color-secondary-400: 199, 202, 209;
-  --ax-sys-color-secondary-500: 172, 176, 185;
-  --ax-sys-color-secondary-600: 144, 150, 162;
-  --ax-sys-color-secondary-700: 116, 124, 139;
-  --ax-sys-color-secondary-800: 93, 99, 111;
-  --ax-sys-color-secondary-900: 70, 74, 83;
-  --ax-sys-color-secondary-950: 58, 62, 69;
-
-  --ax-sys-color-on-success: 19, 109, 52;
-  --ax-sys-color-on-contrast-success: 23, 130, 62;
-  --ax-sys-color-success-50: 255, 255, 255;
-  --ax-sys-color-success-100: 233, 251, 240;
-  --ax-sys-color-success-200: 212, 247, 225;
-  --ax-sys-color-success-300: 190, 244, 210;
-  --ax-sys-color-success-400: 168, 240, 195;
-  --ax-sys-color-success-500: 125, 232, 164;
-  --ax-sys-color-success-600: 81, 225, 134;
-  --ax-sys-color-success-700: 38, 217, 104;
-  --ax-sys-color-success-800: 30, 174, 83;
-  --ax-sys-color-success-900: 23, 130, 62;
-  --ax-sys-color-success-950: 19, 109, 52;
-
-  --ax-sys-color-on-warning: 122, 79, 5;
-  --ax-sys-color-on-contrast-warning: 147, 95, 6;
-  --ax-sys-color-warning-50: 255, 255, 255;
-  --ax-sys-color-warning-100: 254, 245, 231;
-  --ax-sys-color-warning-200: 253, 236, 206;
-  --ax-sys-color-warning-300: 252, 226, 182;
-  --ax-sys-color-warning-400: 251, 216, 157;
-  --ax-sys-color-warning-500: 249, 197, 108;
-  --ax-sys-color-warning-600: 247, 177, 59;
-  --ax-sys-color-warning-700: 245, 158, 10;
-  --ax-sys-color-warning-800: 196, 126, 8;
-  --ax-sys-color-warning-900: 147, 95, 6;
-  --ax-sys-color-warning-950: 122, 79, 5;
-
-  --ax-sys-color-on-danger: 121, 7, 26;
-  --ax-sys-color-on-contrast-danger: 145, 8, 32;
-  --ax-sys-color-danger-50: 255, 255, 255;
-  --ax-sys-color-danger-100: 254, 231, 235;
-  --ax-sys-color-danger-200: 252, 207, 215;
-  --ax-sys-color-danger-300: 251, 183, 194;
-  --ax-sys-color-danger-400: 249, 159, 174;
-  --ax-sys-color-danger-500: 247, 110, 134;
-  --ax-sys-color-danger-600: 244, 62, 93;
-  --ax-sys-color-danger-700: 241, 14, 53;
-  --ax-sys-color-danger-800: 193, 11, 42;
-  --ax-sys-color-danger-900: 145, 8, 32;
-  --ax-sys-color-danger-950: 121, 7, 26;
+  --ax-sys-color-surface-lowest: 15, 15, 15;
+  --ax-sys-color-on-surface-lowest: 220, 220, 220;
+  --ax-sys-color-border-surface-lowest: 20, 20, 20;
+
+  --ax-sys-color-surface-low: 20, 20, 20;
+  --ax-sys-color-on-surface-low: 230, 230, 230;
+  --ax-sys-color-border-surface-low: 25, 25, 25;
+
+  --ax-sys-color-surface: 25, 25, 25;
+  --ax-sys-color-on-surface: 240, 240, 240;
+  --ax-sys-color-border-surface: 34, 34, 34;
+
+  --ax-sys-color-surface-high: 29, 29, 29;
+  --ax-sys-color-on-surface-high: 250, 250, 250;
+  --ax-sys-color-border-surface-high: 43, 43, 43;
+
+  --ax-sys-color-surface-highest: 34, 34, 34;
+  --ax-sys-color-on-surface-highest: 255, 255, 255;
+  --ax-sys-color-border-surface-highest: 52, 52, 52;
+
+  --ax-sys-color-input-surface: var(--ax-sys-color-surface-lowest);
+  --ax-sys-color-input-surface-text: var(--ax-sys-color-on-surface-lowest);
+  --ax-sys-color-input-surface-placeholder: 100, 100, 100;
+  --ax-sys-color-input-surface-border: var(--ax-sys-color-border-surface);
+
+  --ax-sys-color-primary-50: 233, 247, 255;
+  --ax-sys-color-primary-100: 219, 238, 255;
+  --ax-sys-color-primary-200: 190, 221, 255;
+  --ax-sys-color-primary-300: 161, 203, 255;
+  --ax-sys-color-primary-400: 132, 185, 255;
+  --ax-sys-color-primary-500: 101, 166, 255;
+  --ax-sys-color-primary-600: 67, 146, 255;
+  --ax-sys-color-primary-700: 43, 127, 255;
+  --ax-sys-color-primary-800: 25, 112, 239;
+  --ax-sys-color-primary-900: 0, 98, 223;
+  --ax-sys-color-primary-950: 0, 90, 215;
+  --ax-sys-color-on-primary: 0, 0, 91;
+  --ax-sys-color-on-contrast-primary: 0, 12, 146;
+
+  --ax-sys-color-secondary-50: 240, 249, 255;
+  --ax-sys-color-secondary-100: 233, 242, 255;
+  --ax-sys-color-secondary-200: 219, 228, 243;
+  --ax-sys-color-secondary-300: 206, 214, 229;
+  --ax-sys-color-secondary-400: 192, 201, 215;
+  --ax-sys-color-secondary-500: 179, 187, 202;
+  --ax-sys-color-secondary-600: 166, 174, 188;
+  --ax-sys-color-secondary-700: 153, 161, 175;
+  --ax-sys-color-secondary-800: 135, 143, 157;
+  --ax-sys-color-secondary-900: 118, 126, 139;
+  --ax-sys-color-secondary-950: 110, 117, 131;
+  --ax-sys-color-on-secondary: 16, 22, 32;
+  --ax-sys-color-on-contrast-secondary: 40, 46, 57;
+
+  --ax-sys-color-success-50: 210, 255, 233;
+  --ax-sys-color-success-100: 180, 255, 219;
+  --ax-sys-color-success-200: 115, 255, 191;
+  --ax-sys-color-success-300: 99, 244, 178;
+  --ax-sys-color-success-400: 82, 230, 164;
+  --ax-sys-color-success-500: 63, 216, 151;
+  --ax-sys-color-success-600: 41, 202, 138;
+  --ax-sys-color-success-700: 1, 188, 125;
+  --ax-sys-color-success-800: 0, 170, 108;
+  --ax-sys-color-success-900: 0, 151, 91;
+  --ax-sys-color-success-950: 0, 141, 85;
+  --ax-sys-color-on-success: 0, 31, 10;
+  --ax-sys-color-on-contrast-success: 0, 59, 29;
+
+  --ax-sys-color-warning-50: 255, 245, 222;
+  --ax-sys-color-warning-100: 255, 238, 208;
+  --ax-sys-color-warning-200: 255, 224, 181;
+  --ax-sys-color-warning-300: 255, 210, 152;
+  --ax-sys-color-warning-400: 255, 195, 120;
+  --ax-sys-color-warning-500: 255, 180, 82;
+  --ax-sys-color-warning-600: 255, 165, 33;
+  --ax-sys-color-warning-700: 253, 154, 1;
+  --ax-sys-color-warning-800: 230, 133, 0;
+  --ax-sys-color-warning-900: 203, 114, 0;
+  --ax-sys-color-warning-950: 190, 105, 0;
+  --ax-sys-color-on-warning: 41, 13, 0;
+  --ax-sys-color-on-contrast-warning: 74, 34, 0;
+
+  --ax-sys-color-danger-50: 255, 240, 242;
+  --ax-sys-color-danger-100: 255, 230, 233;
+  --ax-sys-color-danger-200: 255, 210, 215;
+  --ax-sys-color-danger-300: 255, 189, 196;
+  --ax-sys-color-danger-400: 255, 167, 178;
+  --ax-sys-color-danger-500: 255, 144, 159;
+  --ax-sys-color-danger-600: 255, 117, 140;
+  --ax-sys-color-danger-700: 255, 99, 126;
+  --ax-sys-color-danger-800: 234, 80, 109;
+  --ax-sys-color-danger-900: 213, 59, 92;
+  --ax-sys-color-danger-950: 203, 48, 84;
+  --ax-sys-color-on-danger: 54, 0, 9;
+  --ax-sys-color-on-contrast-danger: 97, 0, 25;
 
-  --ax-sys-color-on-ghost: 24, 24, 27;
-  --ax-sys-color-on-contrast-ghost: 244, 244, 245;
   --ax-sys-color-ghost-50: 9, 9, 11;
   --ax-sys-color-ghost-100: 24, 24, 27;
   --ax-sys-color-ghost-200: 39, 39, 42;
   --ax-sys-color-ghost-300: 63, 63, 70;
-  --ax-sys-color-ghost-400: 82, 82, 91;
-  --ax-sys-color-ghost-500: 113, 113, 122;
-  --ax-sys-color-ghost-600: 161, 161, 170;
+  --ax-sys-color-ghost-400: 82, 82, 92;
+  --ax-sys-color-ghost-500: 113, 113, 123;
+  --ax-sys-color-ghost-600: 159, 159, 169;
   --ax-sys-color-ghost-700: 212, 212, 216;
   --ax-sys-color-ghost-800: 228, 228, 231;
   --ax-sys-color-ghost-900: 244, 244, 245;
   --ax-sys-color-ghost-950: 250, 250, 250;
+  --ax-sys-color-on-ghost: 24, 24, 27;
+  --ax-sys-color-on-contrast-ghost: 244, 244, 245;
 }

package/themes/test.scss

@@ -5,42 +5,42 @@
   --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   --ax-sys-border-radius: 0.5rem;
   --ax-sys-border-color: 233, 234, 235;
-  --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
+  --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
   --ax-sys-body-text-color: 22, 22, 22;
 
   // Surfaces
-  --ax-sys-surface-light-bg-color: 255, 255, 255;
-  --ax-sys-on-surface-light-color: 0, 0, 0;
-  --ax-sys-surface-light-border-color: 0, 0, 0;
-
-  --ax-sys-surface-lowest-bg-color: 255, 255, 255;
-  --ax-sys-on-surface-lowest-color: 40, 40, 40;
-  --ax-sys-surface-lowest-border-color: 233, 236, 239;
-
-  --ax-sys-surface-low-bg-color: 248, 249, 250;
-  --ax-sys-on-surface-low-color: 40, 40, 40;
-  --ax-sys-surface-low-border-color: 233, 236, 239;
-
-  --ax-sys-surface-bg-color: 239, 241, 243;
-  --ax-sys-on-surface-color: 30, 30, 30;
-  --ax-sys-surface-border-color: 232, 235, 238;
-
-  --ax-sys-surface-high-bg-color: 234, 237, 239;
-  --ax-sys-on-surface-high-color: 20, 20, 20;
-  --ax-sys-surface-high-border-color: 228, 231, 234;
-
-  --ax-sys-surface-highest-bg-color: 230, 233, 236;
-  --ax-sys-on-surface-highest-color: 10, 10, 10;
-  --ax-sys-surface-highest-border-color: 225, 229, 233;
-
-  --ax-sys-surface-input-bg-color: 255, 255, 255;
-  --ax-sys-surface-input-text-color: 30, 30, 30;
-  --ax-sys-surface-input-placeholder-color: 180, 180, 180;
-  --ax-sys-surface-input-border-color: 220, 220, 220;
-
-  --ax-sys-surface-dark-bg-color: 0, 0, 0;
-  --ax-sys-on-surface-dark-color: 255, 255, 255;
-  --ax-sys-surface-dark-border-color: 255, 255, 255;
+  --ax-sys-color-surface-light: 255, 255, 255;
+  --ax-sys-color-on-surface-light: 0, 0, 0;
+  --ax-sys-color-border-surface-light: 0, 0, 0;
+
+  --ax-sys-color-surface-lowest: 255, 255, 255;
+  --ax-sys-color-on-surface-lowest: 40, 40, 40;
+  --ax-sys-color-border-surface-lowest: 233, 236, 239;
+
+  --ax-sys-color-surface-low: 248, 249, 250;
+  --ax-sys-color-on-surface-low: 40, 40, 40;
+  --ax-sys-color-border-surface-low: 233, 236, 239;
+
+  --ax-sys-color-surface: 239, 241, 243;
+  --ax-sys-color-on-surface: 30, 30, 30;
+  --ax-sys-color-border-surface: 232, 235, 238;
+
+  --ax-sys-color-surface-high: 234, 237, 239;
+  --ax-sys-color-on-surface-high: 20, 20, 20;
+  --ax-sys-color-border-surface-high: 228, 231, 234;
+
+  --ax-sys-color-surface-highest: 230, 233, 236;
+  --ax-sys-color-on-surface-highest: 10, 10, 10;
+  --ax-sys-color-border-surface-highest: 225, 229, 233;
+
+  --ax-sys-color-input-surface: 255, 255, 255;
+  --ax-sys-color-input-surface-text: 30, 30, 30;
+  --ax-sys-color-input-surface-placeholder: 180, 180, 180;
+  --ax-sys-color-input-surface-border: 220, 220, 220;
+
+  --ax-sys-color-surface-dark: 0, 0, 0;
+  --ax-sys-color-on-surface-dark: 255, 255, 255;
+  --ax-sys-color-border-surface-dark: 255, 255, 255;
 }
 
 .ax-dark {
@@ -48,30 +48,30 @@
 
   --ax-sys-border-color: 34, 38, 47;
 
-  --ax-sys-surface-lowest-bg-color: 15, 15, 15;
-  --ax-sys-on-surface-lowest-color: 220, 220, 220;
-  --ax-sys-surface-lowest-border-color: 20, 20, 20;
+  --ax-sys-color-surface-lowest: 15, 15, 15;
+  --ax-sys-color-on-surface-lowest: 220, 220, 220;
+  --ax-sys-color-border-surface-lowest: 20, 20, 20;
 
-  --ax-sys-surface-low-bg-color: 20, 20, 20;
-  --ax-sys-on-surface-low-color: 230, 230, 230;
-  --ax-sys-surface-low-border-color: 25, 25, 25;
+  --ax-sys-color-surface-low: 20, 20, 20;
+  --ax-sys-color-on-surface-low: 230, 230, 230;
+  --ax-sys-color-border-surface-low: 25, 25, 25;
 
-  --ax-sys-surface-bg-color: 25, 25, 25;
-  --ax-sys-on-surface-color: 240, 240, 240;
-  --ax-sys-surface-border-color: 34, 34, 34;
+  --ax-sys-color-surface: 25, 25, 25;
+  --ax-sys-color-on-surface: 240, 240, 240;
+  --ax-sys-color-border-surface: 34, 34, 34;
 
-  --ax-sys-surface-high-bg-color: 29, 29, 29;
-  --ax-sys-on-surface-high-color: 250, 250, 250;
-  --ax-sys-surface-high-border-color: 43, 43, 43;
+  --ax-sys-color-surface-high: 29, 29, 29;
+  --ax-sys-color-on-surface-high: 250, 250, 250;
+  --ax-sys-color-border-surface-high: 43, 43, 43;
 
-  --ax-sys-surface-highest-bg-color: 34, 34, 34;
-  --ax-sys-on-surface-highest-color: 255, 255, 255;
-  --ax-sys-surface-highest-border-color: 52, 52, 52;
+  --ax-sys-color-surface-highest: 34, 34, 34;
+  --ax-sys-color-on-surface-highest: 255, 255, 255;
+  --ax-sys-color-border-surface-highest: 52, 52, 52;
 
-  --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
-  --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
-  --ax-sys-surface-input-placeholder-color: 100, 100, 100;
-  --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
+  --ax-sys-color-input-surface: var(--ax-sys-color-surface-lowest);
+  --ax-sys-color-input-surface-text: var(--ax-sys-color-on-surface-lowest);
+  --ax-sys-color-input-surface-placeholder: 100, 100, 100;
+  --ax-sys-color-input-surface-border: var(--ax-sys-color-border-surface);
 }
 
 :root {

package/src/components/editors/_base.scss

@@ -1,50 +0,0 @@
-.ax-editor-container {
-  --ax-comp-editor-border-width: 1px;
-  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
-  --ax-comp-editor-height: calc(var(--ax-sys-size-base) * var(--ax-comp-editor-size-ratio));
-  --ax-comp-editor-font-family: inherit;
-  --ax-comp-editor-font-weight: normal;
-  --ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);
-  --ax-comp-editor-padding-y: 0;
-  --ax-comp-editor-button-text-color: var(--ax-sys-surface-input-text-color);
-}
-
-.ax-xs .ax-editor-container,
-.ax-editor-container.ax-xs {
-  --ax-comp-editor-size-ratio: 0.75;
-  --ax-comp-editor-font-size: 0.675rem;
-  --ax-comp-editor-padding-x: 0.188rem;
-  --ax-comp-editor-decorator-padding-x: 0.125rem;
-}
-
-.ax-sm .ax-editor-container,
-.ax-editor-container.ax-sm {
-  --ax-comp-editor-size-ratio: 0.875;
-  --ax-comp-editor-font-size: 0.75rem;
-  --ax-comp-editor-padding-x: 0.375rem;
-  --ax-comp-editor-decorator-padding-x: 0.25rem;
-}
-
-.ax-md .ax-editor-container,
-.ax-editor-container {
-  --ax-comp-editor-size-ratio: 1;
-  --ax-comp-editor-font-size: 0.875rem;
-  --ax-comp-editor-padding-x: 0.75rem;
-  --ax-comp-editor-decorator-padding-x: 0.5rem;
-}
-
-.ax-lg .ax-editor-container,
-.ax-editor-container.ax-lg {
-  --ax-comp-editor-size-ratio: 1.125;
-  --ax-comp-editor-font-size: 1rem;
-  --ax-comp-editor-padding-x: 0.875rem;
-  --ax-comp-editor-decorator-padding-x: 0.75rem;
-}
-
-.ax-xl .ax-editor-container,
-.ax-editor-container.ax-xl {
-  --ax-comp-editor-size-ratio: 1.5;
-  --ax-comp-editor-font-size: 1.5rem;
-  --ax-comp-editor-padding-x: 1rem;
-  --ax-comp-editor-decorator-padding-x: 0.875rem;
-}