@acorex/styles 19.8.0-next.1 → 19.8.0-next.2

package/themes/default.scss

@@ -1,216 +1,145 @@
-:root {
-  --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: 249, 250, 251;
-  --ax-sys-surface-light-text-color: 31, 42, 71;
-  --ax-sys-surface-light-border-color: 243, 244, 246;
-
-  --ax-sys-surface-lowest-bg-color: 255, 255, 255;
-  --ax-sys-surface-lowest-text-color: 40, 40, 40;
-  --ax-sys-surface-lowest-border-color: 250, 250, 250;
-
-  --ax-sys-surface-low-bg-color: 250, 250, 250;
-  --ax-sys-surface-low-text-color: 40, 40, 40;
-  --ax-sys-surface-low-border-color: 245, 245, 245;
-
-  --ax-sys-surface-bg-color: 245, 245, 245;
-  --ax-sys-surface-text-color: 30, 30, 30;
-  --ax-sys-surface-border-color: 233, 234, 235;
-
-  --ax-sys-surface-high-bg-color: 233, 234, 235;
-  --ax-sys-surface-high-text-color: 20, 20, 20;
-  --ax-sys-surface-high-border-color: 213, 215, 218;
-
-  --ax-sys-surface-highest-bg-color: 213, 215, 218;
-  --ax-sys-surface-highest-text-color: 10, 10, 10;
-  --ax-sys-surface-highest-border-color: 164, 167, 174;
-
-  --ax-sys-surface-dark-bg-color: 249, 250, 251;
-  --ax-sys-surface-dark-text-color: 31, 42, 71;
-  --ax-sys-surface-dark-border-color: 243, 244, 246;
-
-  --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;
-
-  // Base Colors
-  --ax-sys-color-primary-text: 255, 255, 255;
-  --ax-sys-color-primary-contrast-text: 11, 30, 71;
-  --ax-sys-color-primary-50: 244, 247, 254;
-  --ax-sys-color-primary-100: 233, 239, 253;
-  --ax-sys-color-primary-200: 190, 208, 249;
-  --ax-sys-color-primary-300: 146, 177, 245;
-  --ax-sys-color-primary-400: 102, 146, 241;
-  --ax-sys-color-primary-500: 37, 99, 235;
-  --ax-sys-color-primary-600: 33, 89, 212;
-  --ax-sys-color-primary-700: 26, 69, 165;
-  --ax-sys-color-primary-800: 19, 50, 118;
-  --ax-sys-color-primary-900: 11, 30, 71;
-  --ax-sys-color-primary-950: 4, 10, 23;
-
-  --ax-sys-color-success-text: 255, 255, 255;
-  --ax-sys-color-success-contrast-text: 6, 78, 59;
-  --ax-sys-color-success-50: 236, 253, 245;
-  --ax-sys-color-success-100: 209, 250, 229;
-  --ax-sys-color-success-200: 167, 243, 208;
-  --ax-sys-color-success-300: 110, 231, 183;
-  --ax-sys-color-success-400: 52, 211, 153;
-  --ax-sys-color-success-500: 16, 185, 129;
-  --ax-sys-color-success-600: 5, 150, 105;
-  --ax-sys-color-success-700: 4, 120, 87;
-  --ax-sys-color-success-800: 6, 95, 70;
-  --ax-sys-color-success-900: 6, 78, 59;
-  --ax-sys-color-success-950: 2, 44, 34;
-
-  --ax-sys-color-warning-text: 48, 26, 10;
-  --ax-sys-color-warning-contrast-text: 18, 15, 14;
-  --ax-sys-color-warning-50: 255, 248, 225;
-  --ax-sys-color-warning-100: 255, 236, 179;
-  --ax-sys-color-warning-200: 255, 224, 130;
-  --ax-sys-color-warning-300: 255, 213, 79;
-  --ax-sys-color-warning-400: 255, 202, 40;
-  --ax-sys-color-warning-500: 255, 193, 7;
-  --ax-sys-color-warning-600: 255, 179, 0;
-  --ax-sys-color-warning-700: 255, 160, 0;
-  --ax-sys-color-warning-800: 255, 143, 0;
-  --ax-sys-color-warning-900: 255, 111, 0;
-  --ax-sys-color-warning-950: 72, 40, 15;
-
-  --ax-sys-color-danger-text: 255, 255, 255;
-  --ax-sys-color-danger-contrast-text: 127, 29, 29;
-  --ax-sys-color-danger-50: 254, 242, 242;
-  --ax-sys-color-danger-100: 254, 226, 226;
-  --ax-sys-color-danger-200: 254, 202, 202;
-  --ax-sys-color-danger-300: 252, 165, 165;
-  --ax-sys-color-danger-400: 248, 113, 113;
-  --ax-sys-color-danger-500: 239, 68, 68;
-  --ax-sys-color-danger-600: 220, 38, 38;
-  --ax-sys-color-danger-700: 185, 28, 28;
-  --ax-sys-color-danger-800: 153, 27, 27;
-  --ax-sys-color-danger-900: 127, 29, 29;
-  --ax-sys-color-danger-950: 69, 10, 10;
-
-  --ax-sys-color-neutral-text: 255, 255, 255;
-  --ax-sys-color-neutral-contrast-text: 17, 24, 39;
-  --ax-sys-color-neutral-50: 249, 250, 251;
-  --ax-sys-color-neutral-100: 243, 244, 246;
-  --ax-sys-color-neutral-200: 229, 231, 235;
-  --ax-sys-color-neutral-300: 209, 213, 219;
-  --ax-sys-color-neutral-400: 156, 163, 175;
-  --ax-sys-color-neutral-500: 107, 114, 128;
-  --ax-sys-color-neutral-600: 75, 85, 99;
-  --ax-sys-color-neutral-700: 55, 65, 81;
-  --ax-sys-color-neutral-800: 31, 41, 55;
-  --ax-sys-color-neutral-900: 17, 24, 39;
-  --ax-sys-color-neutral-950: 3, 7, 18;
+:root,
+.ax-light {
+  --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-text-color: 255, 255, 255;
-
-  --ax-sys-border-color: 34, 38, 47;
-
-  --ax-sys-surface-lowest-bg-color: 2, 6, 23;
-  --ax-sys-surface-lowest-text-color: 220, 220, 220;
-  --ax-sys-surface-lowest-border-color: 15, 23, 42;
-
-  --ax-sys-surface-low-bg-color: 15, 23, 42;
-  --ax-sys-surface-low-text-color: 230, 230, 230;
-  --ax-sys-surface-low-border-color: 30, 41, 59;
-
-  --ax-sys-surface-bg-color: 30, 41, 59;
-  --ax-sys-surface-text-color: 240, 240, 240;
-  --ax-sys-surface-border-color: 51, 65, 85;
-
-  --ax-sys-surface-high-bg-color: 51, 65, 85;
-  --ax-sys-surface-high-text-color: 250, 250, 250;
-  --ax-sys-surface-high-border-color: 71, 85, 105;
-
-  --ax-sys-surface-highest-bg-color: 71, 85, 105;
-  --ax-sys-surface-highest-text-color: 255, 255, 255;
-  --ax-sys-surface-highest-border-color: 100, 116, 139;
-
-  --ax-sys-surface-input-bg-color: 55, 55, 55;
-  --ax-sys-surface-input-text-color: 240, 240, 240;
-  --ax-sys-surface-input-placeholder-color: 100, 100, 100;
-  --ax-sys-surface-input-border-color: 80, 80, 80;
-
-  --ax-sys-color-primary-text: 19, 21, 25;
-  --ax-sys-color-primary-contrast-text: 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: 223, 232, 252;
-  --ax-sys-color-primary-400: 210, 222, 251;
-  --ax-sys-color-primary-500: 190, 208, 249;
-  --ax-sys-color-primary-600: 171, 187, 224;
-  --ax-sys-color-primary-700: 133, 146, 174;
-  --ax-sys-color-primary-800: 95, 104, 125;
-  --ax-sys-color-primary-900: 57, 62, 75;
-  --ax-sys-color-primary-950: 19, 21, 25;
-
-  --ax-sys-color-success-text: 255, 255, 255;
-  --ax-sys-color-success-contrast-text: 6, 78, 59;
-  --ax-sys-color-success-50: 236, 253, 245;
-  --ax-sys-color-success-100: 209, 250, 229;
-  --ax-sys-color-success-200: 167, 243, 208;
-  --ax-sys-color-success-300: 110, 231, 183;
-  --ax-sys-color-success-400: 52, 211, 153;
-  --ax-sys-color-success-500: 16, 185, 129;
-  --ax-sys-color-success-600: 5, 150, 105;
-  --ax-sys-color-success-700: 4, 120, 87;
-  --ax-sys-color-success-800: 6, 95, 70;
-  --ax-sys-color-success-900: 6, 78, 59;
-  --ax-sys-color-success-950: 2, 44, 34;
-
-  --ax-sys-color-warning-text: 25, 22, 13;
-  --ax-sys-color-warning-contrast-text: 77, 67, 39;
-  --ax-sys-color-warning-50: 255, 253, 249;
-  --ax-sys-color-warning-100: 255, 252, 243;
-  --ax-sys-color-warning-200: 255, 246, 218;
-  --ax-sys-color-warning-300: 255, 240, 193;
-  --ax-sys-color-warning-400: 255, 233, 168;
-  --ax-sys-color-warning-500: 255, 224, 130;
-  --ax-sys-color-warning-600: 230, 202, 117;
-  --ax-sys-color-warning-700: 179, 157, 91;
-  --ax-sys-color-warning-800: 128, 112, 65;
-  --ax-sys-color-warning-900: 77, 67, 39;
-  --ax-sys-color-warning-950: 25, 22, 13;
-
-  --ax-sys-color-danger-text: 24, 15, 15;
-  --ax-sys-color-danger-contrast-text: 72, 46, 46;
-  --ax-sys-color-danger-50: 254, 250, 250;
-  --ax-sys-color-danger-100: 253, 245, 245;
-  --ax-sys-color-danger-200: 250, 225, 225;
-  --ax-sys-color-danger-300: 247, 205, 205;
-  --ax-sys-color-danger-400: 244, 184, 184;
-  --ax-sys-color-danger-500: 239, 154, 154;
-  --ax-sys-color-danger-600: 215, 139, 139;
-  --ax-sys-color-danger-700: 167, 108, 108;
-  --ax-sys-color-danger-800: 120, 77, 77;
-  --ax-sys-color-danger-900: 72, 46, 46;
-  --ax-sys-color-danger-950: 24, 15, 15;
-
-  --ax-sys-color-neutral-text: 18, 19, 20;
-  --ax-sys-color-neutral-contrast-text: 53, 57, 59;
-  --ax-sys-color-neutral-50: 251, 252, 252;
-  --ax-sys-color-neutral-100: 247, 249, 249;
-  --ax-sys-color-neutral-200: 231, 236, 238;
-  --ax-sys-color-neutral-300: 216, 223, 226;
-  --ax-sys-color-neutral-400: 200, 210, 214;
-  --ax-sys-color-neutral-500: 176, 190, 197;
-  --ax-sys-color-neutral-600: 158, 171, 177;
-  --ax-sys-color-neutral-700: 123, 133, 138;
-  --ax-sys-color-neutral-800: 88, 95, 99;
-  --ax-sys-color-neutral-900: 53, 57, 59;
-  --ax-sys-color-neutral-950: 18, 19, 20;
+  --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,59 +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;
-
-  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-low-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;
-    }
-  }
-}