@acorex/styles 7.5.0 → 7.8.0

package/src/mixins/_appearance.scss

@@ -1,4 +1,4 @@
-@mixin solid-appearance() {
+@mixin solid-look() {
   background-color: rgba(var(--ax-color-input-surface));
   border: 1px solid;
   border-color: rgba(var(--ax-color-border-default));
@@ -34,9 +34,11 @@
     }
   }
 }
-@mixin flat-appearance() {
+@mixin flat-look() {
   border-bottom: 1px solid;
   border-color: rgba(var(--ax-color-border-default));
+  border-radius: 0;
+
   &:focus-within {
     border-color: rgba(var(--ax-color-primary-500));
   }
@@ -62,12 +64,12 @@
   }
 }
 
-@mixin outline-appearance() {
+@mixin outline-look() {
   background-color: transparent !important;
 }
 
-@mixin fill-appearance() {
-  background-color: rgba(var(--ax-color-input-surface-fill));
+@mixin fill-look() {
+  background-color: rgba(var(--ax-color-on-surface));
   border-radius: var(--ax-rounded-border-default);
   &:focus-within {
     box-shadow: 0 0 0 2px rgba(var(--ax-color-primary-500));

package/src/shared/_drop-down.scss

@@ -9,7 +9,7 @@
 
       &:hover,
       &:focus {
-        background-color: rgba(var(--ax-color-gray-200));
+        background-color: rgba(var(--ax-color-on-surface));
         color: rgba(var(--ax-color-#{$color}-600));
       }
 
@@ -32,8 +32,8 @@
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba(var(--ax-color-default));
-      color: rgba(var(--ax-color-default-fore));
+      background-color: rgba(var(--ax-color-on-surface));
+      color: rgba(var(--ax-color-on-surface-fore));
     }
 
     &.ax-state-selected {
@@ -53,7 +53,7 @@
     font-size: 0.875rem;
     overflow-y: hidden;
     overflow-x: auto;
-
+    text-transform: capitalize;
     &.ax-state-disabled {
       opacity: 0.5;
       cursor: not-allowed;
@@ -121,12 +121,20 @@
       display: inline-flex;
       align-items: center;
       justify-content: flex-start;
-      padding: 0.5rem 1rem;
+      padding: 0.5rem;
+      padding-inline-start: 1rem;
+      padding-inline-end: 2.5rem;
       font-size: 0.875rem;
       color: rgba(var(--ax-color-text-default));
       user-select: none;
       cursor: pointer;
 
+      &:hover {
+        &:not(&.ax-state-disabled) {
+          background-color: rgba(var(--ax-color-on-surface));
+        }
+      }
+
       &.ax-divide {
         border: 1px solid;
         border-color: rgba(var(--ax-color-border-default));

package/src/shared/_editor-container.scss

@@ -2,7 +2,7 @@
 
 @include darkMode() {
   .ax-editor-container {
-    &.ax-appearance-fill {
+    &.ax-look-fill {
       &.ax-state-error {
         background-color: rgba(var(--ax-color-danger-500), 0.25);
       }
@@ -17,22 +17,23 @@
   width: 100%;
   height: var(--ax-size-default);
   display: flex;
+  align-items: center;
   color: rgba(var(--ax-color-input-surface-fore));
   font-size: 0.875rem;
   overflow: hidden;
-
-  &.ax-appearance-solid,
-  &.ax-appearance-outline {
-    @include solid-appearance();
+  line-height: 1;
+  &.ax-look-solid,
+  &.ax-look-outline {
+    @include solid-look();
   }
-  &.ax-appearance-flat {
-    @include flat-appearance();
+  &.ax-look-flat {
+    @include flat-look();
   }
-  &.ax-appearance-outline {
-    @include outline-appearance();
+  &.ax-look-outline {
+    @include outline-look();
   }
-  &.ax-appearance-fill {
-    @include fill-appearance();
+  &.ax-look-fill {
+    @include fill-look();
   }
 
   .ax-editor-input {
@@ -46,7 +47,7 @@
     padding: 0 0.75rem;
 
     &::placeholder {
-      color: rgba(var(--ax-color-text-default), 0.25);
+      color: rgba(var(--ax-color-text-default), 0.5);
       font-weight: 500;
       font-size: inherit;
     }
@@ -55,31 +56,33 @@
   &.ax-xs {
     .ax-input {
       font-size: 0.75rem;
-      line-height: 1.25rem;
+      line-height: calc(var(--ax-size-base) - 0.75rem);
+      padding: 0.5rem;
     }
   }
   &.ax-sm {
     .ax-input {
       font-size: 0.875rem;
-      line-height: 1.25rem;
+      line-height: calc(var(--ax-size-base) - 0.5rem);
+      padding: 0.5rem;
     }
   }
   &.ax-md {
     .ax-input {
       font-size: 0.875rem;
-      line-height: 1.5rem;
+      line-height: var(--ax-size-base);
     }
   }
   &.ax-lg {
     .ax-input {
       font-size: 1.125rem;
-      line-height: 1.5rem;
+      line-height: calc(var(--ax-size-base) + 0.5rem);
     }
   }
   &.ax-xl {
     .ax-input {
       font-size: 1.25rem;
-      line-height: 1.5rem;
+      line-height: calc(var(--ax-size-base) + 1rem);
     }
   }
 
@@ -87,12 +90,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--ax-size-default);
-    min-width: var(--ax-size-default);
+    // width: var(--ax-size-default);
+    // min-width: var(--ax-size-default);
+    padding-inline-start: 0.5rem;
     height: 100%;
     font-size: 1.25rem;
     line-height: 1.25rem;
-    color: rgba(var(--ax-color-default-fore));
+    color: rgba(var(--ax-color-text-default));
   }
 
   &.ax-button-icon {
@@ -139,6 +143,7 @@
 
   & > ax-prefix,
   & > ax-suffix {
+    height: 100%;
     * {
       height: 100%;
       display: flex;
@@ -182,15 +187,14 @@
     opacity: 0.5;
   }
 }
-span.ripple {
+.ax-ripple {
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  animation: ripple 300ms linear;
-  background-color: rgba(var(--ax-color-white), 0.7);
+  animation: ripple 225ms linear;
   @keyframes ripple {
     to {
-      transform: scale(4);
+      transform: scale3d(1, 1, 1);
       opacity: 0;
     }
   }

package/src/shared/_general-button.scss

@@ -7,16 +7,15 @@
   font-size: 0.875rem;
   cursor: pointer;
   transition: background-color 0.3s;
-  color: rgba(var(--ax-color-default-fore), 0.6);
-
+  color: rgba(var(--ax-color-text-default), 0.6);
+  border-radius: var(--ax-rounded-border-default);
   &:is(&:hover):not(&:disabled, .ax-state-disabled) {
-    background: rgba(var(--ax-color-default));
-    color: rgba(var(--ax-color-default-fore), 0.87);
+    color: rgba(var(--ax-color-primary-500));
   }
 
   &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
-    background-color: rgba(var(--ax-color-default));
-    outline-color: transparent;
+    color: rgba(var(--ax-color-primary-700));
+    // outline-color: transparent;
   }
 
   &:is(&:active):not(&:disabled, .ax-state-disabled) {
@@ -26,8 +25,8 @@
   &.ax-button-icon {
     padding: 0 0.5rem;
     font-size: 1.25rem;
-    min-width: var(--ax-size-default);
-    width: var(--ax-size-default);
+    // min-width: var(--ax-size-default);
+    // width: var(--ax-size-default);
     // min-height: 100%;
     > button {
       display: flex;
@@ -45,3 +44,23 @@
     cursor: not-allowed;
   }
 }
+.ax-clear-button {
+  font-size: 1rem;
+  line-height: 1;
+  color: rgba(var(--ax-color-text-default), 0.6);
+  height: var(--ax-size-default);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  > button {
+    display: flex;
+  }
+  &:is(&:hover):not(&:disabled, .ax-state-disabled) {
+    color: rgba(var(--ax-color-text-default), 0.75);
+  }
+  &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
+    color: rgba(var(--ax-color-text-default));
+    // outline-color: transparent;
+  }
+}

package/src/shared/_list.scss

@@ -122,8 +122,8 @@
             }
           }
           &.ax-state-selected {
-            background-color: rgba(var(--ax-color-default)) !important;
-            color: rgba(var(--ax-color-default-fore)) !important;
+            background-color: rgba(var(--ax-color-primary-500)) !important;
+            color: rgba(var(--ax-color-primary-fore)) !important;
             .ax-selected-icon {
               color: rgba(var(--ax-color-primary-500));
               font-size: 1.5rem;
@@ -142,10 +142,10 @@
 
           &:focus-visible,
           &:hover {
-            background-color: rgba(var(--ax-color-default));
+            background-color: rgba(var(--ax-color-on-surface));
           }
           &.ax-state-focus {
-            background-color: rgba(var(--ax-color-default));
+            background-color: rgba(var(--ax-color-on-surface));
           }
         }
       }

package/src/shared/_table.scss

@@ -2,7 +2,7 @@
 @include darkMode() {
   .ax-table {
     thead {
-      background-color: rgba(var(--ax-color-gray-900));
+      background-color: rgba(var(--ax-color-on-surface));
     }
   }
 }
@@ -21,7 +21,7 @@
     padding: 0.875rem 1rem;
   }
   thead {
-    background-color: rgba(var(--ax-color-gray-200));
+    background-color: rgba(var(--ax-color-on-surface));
     border-bottom: 1px solid;
     border-color: rgba(var(--ax-color-border-default));
     th {
@@ -35,7 +35,7 @@
     tbody {
       tr {
         &:nth-child(even) {
-          background-color: rgba(var(--ax-color-gray-200));
+          background-color: rgba(var(--ax-color-on-surface));
         }
       }
     }

package/src/shared/_utils.scss

@@ -5,26 +5,6 @@
   vertical-align: middle;
 }
 
-.ax-rotaion-0 {
-  transform: rotate(0);
-}
-
-@each $deg in $degrees {
-  .ax-rotation-#{$deg} {
-    transform: rotate(#{$deg}deg);
-  }
-
-  .-ax-rotation-#{$deg} {
-    transform: rotate(-#{$deg}deg);
-  }
-}
-
-.ax-transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .ax-w-full {
   width: 100%;
 }
@@ -50,6 +30,32 @@
   border-color: rgba(var(--ax-color-border-default));
   border-radius: var(--ax-rounded-border-default);
 }
+
 .ax-hidden {
   display: none;
 }
+
+.ax-drop-over-state {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  background-color: rgba(var(--ax-color-primary-500), 0.15);
+  pointer-events: none;
+  outline: 2px dashed rgba(var(--ax-color-primary-500));
+  outline-offset: -4px;
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 0.875rem;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: rgba(var(--ax-color-primary-700));
+  transition: all 0.3s;
+  .ax-icon {
+    font-size: 1.5rem;
+  }
+}

package/src/shared/index.scss

@@ -1,13 +1,11 @@
-@import "./actionsheet";
-@import "./check-box";
-@import "./decoration";
-@import "./drop-down";
-@import "./editor-container";
-@import "./general-button";
-@import "./icon-control";
-@import "./inputs";
-@import "./list";
-@import "./radio";
-@import "./skeleton";
-@import "./table";
-@import "./utils";
+@import './actionsheet';
+@import './check-box';
+@import './decoration';
+@import './drop-down';
+@import './editor-container';
+@import './general-button';
+@import './inputs';
+@import './list';
+@import './radio';
+@import './table';
+@import './utils';

package/src/themes/default.scss

@@ -5,26 +5,23 @@
   --ax-rounded-border-default: 0.5rem;
   --ax-color-border-default: 224, 224, 224;
 
-  --ax-color-background-default: 246, 247, 249;
+  --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: 248, 248, 248;
+  --ax-color-on-surface: 243, 244, 246;
   --ax-color-on-surface-fore: 22, 22, 22;
 
   --ax-color-input-surface: 255, 255, 255;
-  --ax-color-input-surface-fill: 247, 247, 247;
   --ax-color-input-surface-fore: 22, 22, 22;
 
-  --ax-color-default: 229, 231, 235;
-  --ax-color-default-fore: 22, 22, 22;
-
   --ax-color-ghost: 255, 255, 255;
   --ax-color-ghost-fore: 22, 22, 22;
 
   --ax-color-primary-fore: 255, 255, 255;
+  --ax-color-primary-fore-lighten: 29, 78, 216;
   --ax-color-primary-50: 239, 246, 255;
   --ax-color-primary-100: 219, 234, 254;
   --ax-color-primary-200: 191, 219, 254;
@@ -38,6 +35,7 @@
   --ax-color-primary-950: 23, 37, 84;
 
   --ax-color-secondary-fore: 255, 255, 255;
+  --ax-color-secondary-fore-lighten: 57, 65, 79;
   --ax-color-secondary-50: 233, 234, 236;
   --ax-color-secondary-100: 200, 203, 208;
   --ax-color-secondary-200: 164, 169, 176;
@@ -51,6 +49,7 @@
   --ax-color-secondary-950: 22, 27, 35;
 
   --ax-color-success-fore: 255, 255, 255;
+  --ax-color-success-fore-lighten: 4, 120, 87;
   --ax-color-success-50: 236, 253, 245;
   --ax-color-success-100: 209, 250, 229;
   --ax-color-success-200: 167, 243, 208;
@@ -64,6 +63,7 @@
   --ax-color-success-950: 2, 44, 34;
 
   --ax-color-danger-fore: 255, 255, 255;
+  --ax-color-danger-fore-lighten: 185, 28, 28;
   --ax-color-danger-50: 254, 242, 242;
   --ax-color-danger-100: 254, 226, 226;
   --ax-color-danger-200: 254, 202, 202;
@@ -77,6 +77,7 @@
   --ax-color-danger-950: 69, 10, 10;
 
   --ax-color-warning-fore: 48, 26, 10;
+  --ax-color-warning-fore-lighten: 255, 160, 0;
   --ax-color-warning-50: 255, 248, 225;
   --ax-color-warning-100: 255, 236, 179;
   --ax-color-warning-200: 255, 224, 130;
@@ -90,6 +91,7 @@
   --ax-color-warning-950: 72, 40, 15;
 
   --ax-color-info-fore: 255, 255, 255;
+  --ax-color-info-fore-lighten: 67, 56, 202;
   --ax-color-info-50: 238, 242, 255;
   --ax-color-info-100: 224, 231, 255;
   --ax-color-info-200: 199, 210, 254;
@@ -102,28 +104,28 @@
   --ax-color-info-900: 49, 46, 129;
   --ax-color-info-950: 30, 27, 75;
 
-  --ax-color-gray-fore: 3, 7, 18;
-  --ax-color-gray-50: 249, 250, 251;
-  --ax-color-gray-100: 243, 244, 246;
-  --ax-color-gray-200: 229, 231, 235;
-  --ax-color-gray-300: 209, 213, 219;
-  --ax-color-gray-400: 156, 163, 175;
-  --ax-color-gray-500: 107, 114, 128;
-  --ax-color-gray-600: 75, 85, 99;
-  --ax-color-gray-700: 55, 65, 81;
-  --ax-color-gray-800: 31, 41, 55;
-  --ax-color-gray-900: 17, 24, 39;
-  --ax-color-gray-950: 3, 7, 18;
+  --ax-color-neutral-fore: 3, 7, 18;
+  --ax-color-neutral-fore-lighten: 55, 65, 81;
+  --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-color-border-default: 75, 85, 99;
 
-  --ax-color-background-default: 23, 23, 23;
+  --ax-color-background-default: 24, 32, 43;
   --ax-color-text-default: 255, 255, 255;
 
   --ax-color-surface: 31, 41, 55;
-  --ax-color-input-surface-fill: 31, 41, 55;
   --ax-color-surface-fore: 255, 255, 255;
 
   --ax-color-on-surface: 55, 65, 81;
@@ -132,9 +134,6 @@
   --ax-color-input-surface: 38, 45, 57;
   --ax-color-input-surface-fore: 224, 224, 224;
 
-  --ax-color-default: 77, 91, 113;
-  --ax-color-default-fore: 255, 255, 255;
-
   --ax-color-ghost: 77, 91, 113;
   --ax-color-ghost-fore: 255, 255, 255;
 }

package/src/variables/_colors.scss

@@ -1,2 +1,2 @@
 $color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
-$look_names: 'default', 'outline', 'blank';
+$look_names: 'solid', 'twotone', 'outline', 'blank';

package/tailwind-base.js

@@ -117,20 +117,20 @@ module.exports = withAnimations({
           900: withOpacityValue('--ax-color-info-900'),
           950: withOpacityValue('--ax-color-info-950'),
         },
-        gray: {
-          DEFAULT: withOpacityValue('--ax-color-gray-500'),
-          fore: withOpacityValue('--ax-color-gray-fore'),
-          50: withOpacityValue('--ax-color-gray-50'),
-          100: withOpacityValue('--ax-color-gray-100'),
-          200: withOpacityValue('--ax-color-gray-200'),
-          300: withOpacityValue('--ax-color-gray-300'),
-          400: withOpacityValue('--ax-color-gray-400'),
-          500: withOpacityValue('--ax-color-gray-500'),
-          600: withOpacityValue('--ax-color-gray-600'),
-          700: withOpacityValue('--ax-color-gray-700'),
-          800: withOpacityValue('--ax-color-gray-800'),
-          900: withOpacityValue('--ax-color-gray-900'),
-          950: withOpacityValue('--ax-color-gray-950'),
+        neutral: {
+          DEFAULT: withOpacityValue('--ax-color-neutral-500'),
+          fore: withOpacityValue('--ax-color-neutral-fore'),
+          50: withOpacityValue('--ax-color-neutral-50'),
+          100: withOpacityValue('--ax-color-neutral-100'),
+          200: withOpacityValue('--ax-color-neutral-200'),
+          300: withOpacityValue('--ax-color-neutral-300'),
+          400: withOpacityValue('--ax-color-neutral-400'),
+          500: withOpacityValue('--ax-color-neutral-500'),
+          600: withOpacityValue('--ax-color-neutral-600'),
+          700: withOpacityValue('--ax-color-neutral-700'),
+          800: withOpacityValue('--ax-color-neutral-800'),
+          900: withOpacityValue('--ax-color-neutral-900'),
+          950: withOpacityValue('--ax-color-neutral-950'),
         },
       },
       textColor: {
@@ -277,12 +277,6 @@ module.exports = withAnimations({
         '.tabs-fit': {
           width: '100%',
         },
-        '.skeleton': {
-          position: 'relative',
-          overflow: 'hidden',
-          backgroundColor: 'rgba(var(--ax-color-default), 0.15)',
-        },
-        '.skeleton-animate': {},
         '.xs': {
           '--ax-size-default': '2rem',
         },

package/src/shared/_skeleton.scss

@@ -1,26 +0,0 @@
-.ax-skeleton {
-  position: relative;
-  overflow: hidden;
-  background-color: rgba(var(--ax-color-default));
-  &.ax-skeleton-animate {
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      height: 100%;
-      width: 14rem;
-      left: -200px;
-      background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-default-fore), 0.15) 50%, transparent 100%);
-      animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-    }
-  }
-}
-@keyframes load {
-  from {
-    left: -200px;
-  }
-  to {
-    left: 100%;
-  }
-}