@acorex/styles 19.8.0-next.8 → 19.9.0

package/themes/default.scss

@@ -1,246 +1,145 @@
 :root,
 .ax-light {
-  --ax-sys-body-font-size: 1rem;
-  --ax-sys-size-base: 2.5rem;
-  --ax-sys-transition-duration: 150ms;
-  --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-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-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-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-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-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-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-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-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-size-base: 2.5rem;
+  --ax-size-default: var(--ax-size-base);
+  --ax-icon-weight: 400;
+  --ax-icon-size: 100%;
+
+  --ax-rounded-border-default: 0.5rem;
+
+  --ax-color-border-default: 233, 234, 235;
+
+  --ax-color-background-default: 249, 250, 251;
+  --ax-color-text-default: 22, 22, 22;
+
+  --ax-color-surface: 255, 255, 255;
+  --ax-color-surface-fore: 22, 22, 22;
+
+  --ax-color-on-surface: 250, 250, 250;
+  --ax-color-on-surface-fore: 22, 22, 22;
+
+  --ax-color-input-surface: 255, 255, 255;
+  --ax-color-input-surface-fore: 22, 22, 22;
+  --ax-color-input-border: 213, 215, 218;
+
+  --ax-color-ghost: 255, 255, 255;
+  --ax-color-ghost-fore: 22, 22, 22;
+
+  --ax-color-primary-fore: 255, 255, 255;
+  --ax-color-primary-fore-tint: 11, 30, 71;
+  --ax-color-primary-50: 244, 247, 254;
+  --ax-color-primary-100: 233, 239, 253;
+  --ax-color-primary-200: 190, 208, 249;
+  --ax-color-primary-300: 146, 177, 245;
+  --ax-color-primary-400: 102, 146, 241;
+  --ax-color-primary-500: 37, 99, 235;
+  --ax-color-primary-600: 33, 89, 212;
+  --ax-color-primary-700: 26, 69, 165;
+  --ax-color-primary-800: 19, 50, 118;
+  --ax-color-primary-900: 11, 30, 71;
+  --ax-color-primary-950: 4, 10, 23;
+
+  --ax-color-secondary-fore: 255, 255, 255;
+  --ax-color-secondary-fore-tint: 9, 12, 18;
+  --ax-color-secondary-50: 244, 244, 245;
+  --ax-color-secondary-100: 233, 234, 235;
+  --ax-color-secondary-200: 188, 191, 196;
+  --ax-color-secondary-300: 143, 148, 157;
+  --ax-color-secondary-400: 98, 105, 118;
+  --ax-color-secondary-500: 30, 41, 59;
+  --ax-color-secondary-600: 27, 37, 53;
+  --ax-color-secondary-700: 21, 29, 41;
+  --ax-color-secondary-800: 15, 21, 30;
+  --ax-color-secondary-900: 9, 12, 18;
+  --ax-color-secondary-950: 3, 4, 6;
+
+  --ax-color-success-fore: 255, 255, 255;
+  --ax-color-success-fore-tint: 6, 78, 59;
+  --ax-color-success-50: 236, 253, 245;
+  --ax-color-success-100: 209, 250, 229;
+  --ax-color-success-200: 167, 243, 208;
+  --ax-color-success-300: 110, 231, 183;
+  --ax-color-success-400: 52, 211, 153;
+  --ax-color-success-500: 16, 185, 129;
+  --ax-color-success-600: 5, 150, 105;
+  --ax-color-success-700: 4, 120, 87;
+  --ax-color-success-800: 6, 95, 70;
+  --ax-color-success-900: 6, 78, 59;
+  --ax-color-success-950: 2, 44, 34;
+
+  --ax-color-warning-fore: 48, 26, 10;
+  --ax-color-warning-fore-tint: 255, 111, 0;
+  --ax-color-warning-50: 255, 248, 225;
+  --ax-color-warning-100: 255, 236, 179;
+  --ax-color-warning-200: 255, 224, 130;
+  --ax-color-warning-300: 255, 213, 79;
+  --ax-color-warning-400: 255, 202, 40;
+  --ax-color-warning-500: 255, 193, 7;
+  --ax-color-warning-600: 255, 179, 0;
+  --ax-color-warning-700: 255, 160, 0;
+  --ax-color-warning-800: 255, 143, 0;
+  --ax-color-warning-900: 255, 111, 0;
+  --ax-color-warning-950: 72, 40, 15;
+
+  --ax-color-danger-fore: 255, 255, 255;
+  --ax-color-danger-fore-tint: 127, 29, 29;
+  --ax-color-danger-50: 254, 242, 242;
+  --ax-color-danger-100: 254, 226, 226;
+  --ax-color-danger-200: 254, 202, 202;
+  --ax-color-danger-300: 252, 165, 165;
+  --ax-color-danger-400: 248, 113, 113;
+  --ax-color-danger-500: 239, 68, 68;
+  --ax-color-danger-600: 220, 38, 38;
+  --ax-color-danger-700: 185, 28, 28;
+  --ax-color-danger-800: 153, 27, 27;
+  --ax-color-danger-900: 127, 29, 29;
+  --ax-color-danger-950: 69, 10, 10;
+
+  --ax-color-info-fore: 255, 255, 255;
+  --ax-color-info-fore-tint: 49, 46, 129;
+  --ax-color-info-50: 238, 242, 255;
+  --ax-color-info-100: 224, 231, 255;
+  --ax-color-info-200: 199, 210, 254;
+  --ax-color-info-300: 165, 180, 252;
+  --ax-color-info-400: 129, 140, 248;
+  --ax-color-info-500: 99, 102, 241;
+  --ax-color-info-600: 79, 70, 229;
+  --ax-color-info-700: 67, 56, 202;
+  --ax-color-info-800: 55, 48, 163;
+  --ax-color-info-900: 49, 46, 129;
+  --ax-color-info-950: 30, 27, 75;
+
+  --ax-color-neutral-fore: 255, 255, 255;
+  --ax-color-neutral-fore-tint: 17, 24, 39;
+  --ax-color-neutral-50: 249, 250, 251;
+  --ax-color-neutral-100: 243, 244, 246;
+  --ax-color-neutral-200: 229, 231, 235;
+  --ax-color-neutral-300: 209, 213, 219;
+  --ax-color-neutral-400: 156, 163, 175;
+  --ax-color-neutral-500: 107, 114, 128;
+  --ax-color-neutral-600: 75, 85, 99;
+  --ax-color-neutral-700: 55, 65, 81;
+  --ax-color-neutral-800: 31, 41, 55;
+  --ax-color-neutral-900: 17, 24, 39;
+  --ax-color-neutral-950: 3, 7, 18;
 }
 
 .ax-dark {
-  --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
-  --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-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-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-color-border-default: 34, 38, 47;
+
+  --ax-color-background-default: 12, 14, 18;
+  --ax-color-text-default: 255, 255, 255;
+
+  --ax-color-surface: 19, 22, 27;
+  --ax-color-surface-fore: 255, 255, 255;
+
+  --ax-color-on-surface: 34, 38, 47;
+  --ax-color-on-surface-fore: 255, 255, 255;
+
+  --ax-color-input-surface: 12, 14, 18;
+  --ax-color-input-surface-fore: 224, 224, 224;
+  --ax-color-input-border: 55, 58, 65;
+
+  --ax-color-ghost: 77, 91, 113;
+  --ax-color-ghost-fore: 255, 255, 255;
 }

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;
-}

package/src/components/editors/index.scss

@@ -1,60 +0,0 @@
-@use './base' as *;
-@use './looks/index.scss' as *;
-
-.ax-editor-container {
-  background-color: rgba(var(--ax-comp-editor-bg-color));
-  color: rgba(var(--ax-comp-editor-text-color));
-  border-color: rgba(var(--ax-comp-editor-border-color));
-  border-radius: var(--ax-comp-editor-border-radius);
-  border-style: solid;
-  display: inline-flex;
-  align-items: center;
-  height: var(--ax-comp-editor-height);
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-
-  ax-prefix {
-    max-width: fit-content;
-    font-size: var(--ax-comp-editor-font-size);
-    padding: var(--ax-comp-editor-decorator-padding-y, 0) var(--ax-comp-editor-decorator-padding-x);
-  }
-  ax-clear-button {
-    margin-inline-end: var(--ax-comp-editor-decorator-padding-x);
-  }
-  ax-suffix {
-    margin-inline-start: var(--ax-comp-editor-decorator-padding-x);
-  }
-
-  .ax-input {
-    width: 100%;
-    height: 100%;
-    font-size: var(--ax-comp-editor-font-size);
-    padding: 0px;
-    outline-width: 0px;
-    padding: 0 var(--ax-comp-editor-padding-x);
-
-    background-color: transparent;
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-      outline: none;
-    }
-    &::placeholder {
-      color: rgba(var(--ax-comp-editor-placeholder-color));
-      font-size: calc(var(--ax-comp-editor-font-size));
-    }
-  }
-  .ax-editor-button {
-    height: var(--ax-comp-editor-button-height, 100%);
-    padding: var(--ax-comp-editor-decorator-button-y, 0) var(--ax-comp-editor-decorator-button-x, 0.75rem);
-    font-size: var(--ax-comp-editor-button-font-size, 100%);
-    color: rgba(
-      var(--ax-comp-editor-button-text-color),
-      var(--ax-comp-editor-button-text-color-opacity, 0.6)
-    );
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}

package/src/components/editors/looks/_fill.scss

@@ -1,17 +0,0 @@
-.ax-editor-container {
-  &.ax-fill {
-    --ax-comp-editor-bg-color: var(--ax-sys-surface-bg-color);
-    --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
-    --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
-    --ax-comp-editor-border-color: transparent;
-    --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
-    --ax-comp-editor-border-width: 0px;
-
-    &:focus,
-    &:focus-within,
-    &:focus-visible {
-      --ax-comp-editor-border-color: var(--ax-sys-color-primary-500);
-      box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500));
-    }
-  }
-}

package/src/components/editors/looks/_flat.scss

@@ -1,18 +0,0 @@
-.ax-editor-container {
-  &.ax-flat {
-    --ax-comp-editor-bg-color: 0, 0, 0, 0;
-    --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
-    --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
-    --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
-    --ax-comp-editor-border-radius: 0px;
-    --ax-comp-editor-border-width: 1px;
-    border-bottom-width: var(--ax-comp-editor-border-width);
-
-    &:focus,
-    &:focus-within,
-    &:focus-visible {
-      --ax-comp-editor-border-color: var(--ax-sys-color-primary-500);
-      box-shadow: 0px 1px 0 0px rgba(var(--ax-sys-color-primary-500));
-    }
-  }
-}

package/src/components/editors/looks/_outline.scss

@@ -1,18 +0,0 @@
-.ax-editor-container {
-  &.ax-outline {
-    --ax-comp-editor-bg-color: transparent;
-    --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
-    --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
-    --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
-    --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
-    --ax-comp-editor-border-width: 1px;
-    border-width: var(--ax-comp-editor-border-width);
-
-    &:focus,
-    &:focus-within,
-    &:focus-visible {
-      --ax-comp-editor-border-color: var(--ax-sys-color-primary-500);
-      box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500));
-    }
-  }
-}

package/src/components/editors/looks/_solid.scss

@@ -1,20 +0,0 @@
-.ax-editor-container {
-  &.ax-solid {
-    --ax-comp-editor-bg-color: var(--ax-sys-surface-input-bg-color);
-    --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
-    --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
-    --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
-    --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
-    --ax-comp-editor-button-bg-hover-color: var(--ax-sys-surface-high-bg-color);
-    --ax-comp-editor-border-width: 1px;
-    --ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color));
-    border-width: var(--ax-comp-editor-border-width);
-    // box-shadow: var(--ax-comp-editor-box-shadow);
-    &:focus,
-    &:focus-within,
-    &:focus-visible {
-      --ax-comp-editor-border-color: var(--ax-sys-color-primary-500);
-      box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500));
-    }
-  }
-}

package/src/components/editors/looks/index.scss

@@ -1,4 +0,0 @@
-@forward './solid';
-@forward './fill';
-@forward './outline';
-@forward './flat';

package/src/components/index.scss

@@ -1 +0,0 @@
-@use './editors/index.scss';

package/src/shared/_ripple.scss

@@ -1,13 +0,0 @@
-.ax-ripple {
-  transform: scale(0);
-  animation: ripple 500ms linear;
-  position: absolute;
-  border-radius: 9999rem !important;
-
-  @keyframes ripple {
-    to {
-      transform: scale(4);
-      opacity: 0;
-    }
-  }
-}