@acorex/styles 7.0.37 → 7.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "7.0.37",
+  "version": "7.0.39",
   "description": "",
   "main": "index.js",
   "author": "",
@@ -13,6 +13,6 @@
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwind-auto-directions": "^1.0.2",
-    "tailwindcss": "^3.2.6"
+    "tailwindcss": "^3.3.1"
   }
 }

package/src/shared/_actionsheet.scss

@@ -1,6 +1,6 @@
 .ax-actionsheet-panel {
-  animation-duration: 300ms;
-  -webkit-animation-duration: 300ms;
+  animation-duration: 100ms;
+  -webkit-animation-duration: 100ms;
   animation-fill-mode: both;
   -webkit-animation-fill-mode: both;
   opacity: 0;
@@ -13,9 +13,9 @@
   -moz-border-radius-topright: var(--ax-rounded-border-default);
   border-top-left-radius: var(--ax-rounded-border-default);
   border-top-right-radius: var(--ax-rounded-border-default);
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-    0 16px 24px 2px rgba(0, 0, 0, 0.141), 0 6px 30px 5px rgba(0, 0, 0, 0.122);
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.141), 0 6px 30px 5px rgba(0, 0, 0, 0.122);
   overflow: hidden;
+
   @keyframes fadeInUp {
     from {
       transform: translate3d(0, 40px, 0);

package/src/shared/_check-box.scss

@@ -1,16 +1,11 @@
 @import '../mixins/index.scss';
 
-@include darkMode() {
-  .ax-checkbox {
-    background-color: rgba(var(--ax-color-on-surface));
-  }
-}
 .ax-checkbox {
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid;
   border-color: rgba(var(--ax-color-border-default));
-  background-color: rgba(var(--ax-color-surface));
+  background-color: rgba(var(--ax-color-input-surface));
   border-radius: 0.2rem;
   margin: 0;
   outline: none;

package/src/shared/_editor-container.scss

@@ -1,15 +1,15 @@
 @import '../mixins/index.scss';
-@include darkMode() {
-  .ax-editor-container {
-    background-color: rgba(var(--ax-color-on-surface));
-  }
-}
+// @include darkMode() {
+//   .ax-editor-container {
+//     background-color: rgba(var(--ax-color-on-surface));
+//   }
+// }
 .ax-editor-container {
   width: 100%;
   height: var(--ax-size-default);
   display: flex;
-  background-color: rgba(var(--ax-color-surface));
-  color: rgba(var(--ax-color-text-default));
+  background-color: rgba(var(--ax-color-input-surface));
+  color: rgba(var(--ax-color-input-surface-fore));
   border: 1px solid;
   border-color: rgba(var(--ax-color-border-default));
   border-radius: var(--ax-rounded-border-default);
@@ -47,7 +47,7 @@
     justify-content: center;
     width: var(--ax-size-default);
     min-width: var(--ax-size-default);
-    height: var(--ax-size-default);
+    height: 100%;
     font-size: 1.25rem;
     line-height: 1.25rem;
     color: rgba(var(--ax-color-surface-fore));

package/src/shared/_list.scss

@@ -1,17 +1,11 @@
 @import '../mixins/index.scss';
 @include darkMode() {
-  .ax-list {
-    .ax-content {
-      &.ax-default {
-        .ax-list-item {
-          &.ax-state-selected {
-            background-color: rgba(var(--ax-color-primary-800)) !important;
-            color: rgba(var(--ax-color-primary-fore)) !important;
-            .ax-selected-icon {
-              color: rgba(var(--ax-color-primary-fore));
-            }
-          }
-        }
+  .ax-list-item {
+    &.ax-state-selected {
+      background-color: rgba(var(--ax-color-primary-800)) !important;
+      color: rgba(var(--ax-color-primary-fore)) !important;
+      .ax-selected-icon {
+        color: rgba(var(--ax-color-primary-fore));
       }
     }
   }
@@ -102,8 +96,8 @@
             }
           }
           &.ax-state-selected {
-            background-color: rgba(var(--ax-color-primary-50)) !important;
-            color: rgba(var(--ax-color-primary-500)) !important;
+            background-color: rgba(var(--ax-color-on-surface)) !important;
+            color: rgba(var(--ax-color-on-surface-fore)) !important;
             .ax-selected-icon {
               color: rgba(var(--ax-color-primary-500));
               font-size: 1.5rem;

package/src/shared/_radio.scss

@@ -1,16 +1,16 @@
 @import '../mixins/index.scss';
-@include darkMode() {
-  .ax-radio {
-    background-color: rgba(var(--ax-color-on-surface));
-  }
-}
+// @include darkMode() {
+//   .ax-radio {
+//     background-color: rgba(var(--ax-color-on-surface));
+//   }
+// }
 .ax-radio {
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid;
   border-color: rgba(var(--ax-color-border-default));
   border-radius: 99rem;
-  background-color: rgba(var(--ax-color-surface));
+  background-color: rgba(var(--ax-color-input-surface));
   outline: 2px solid transparent;
   outline-offset: 2px;
   vertical-align: middle;

package/src/themes/default copy.scss

@@ -0,0 +1,129 @@
+:root {
+  --ax-size-base: 2.5rem;
+  --ax-size-default: var(--ax-size-base);
+
+  --ax-rounded-border-default: 0.375rem;
+  --ax-color-border-default: 224, 224, 224;
+
+  --ax-color-background-default: 250, 250, 250;
+  --ax-color-text-default: 18, 18, 18;
+
+  --ax-color-surface: 255, 255, 255;
+  --ax-color-surface-fore: 18, 18, 18;
+
+  --ax-color-on-surface: 244, 244, 244;
+  --ax-color-on-surface-fore: 20, 20, 20;
+
+  --ax-color-input-surface: 255, 255, 255;
+
+  --ax-color-ghost-fore: 30, 41, 59;
+  --ax-color-ghost-50: 247, 248, 250;
+  --ax-color-ghost-100: 235, 238, 242;
+  --ax-color-ghost-200: 221, 226, 233;
+  --ax-color-ghost-300: 207, 214, 224;
+  --ax-color-ghost-400: 197, 206, 217;
+  --ax-color-ghost-500: 187, 197, 210;
+  --ax-color-ghost-600: 181, 191, 205;
+  --ax-color-ghost-700: 172, 184, 199;
+  --ax-color-ghost-800: 164, 176, 193;
+  --ax-color-ghost-900: 150, 163, 182;
+
+  --ax-color-primary-fore: 255, 255, 255;
+  --ax-color-primary-50: 239, 246, 255;
+  --ax-color-primary-100: 219, 234, 254;
+  --ax-color-primary-200: 191, 219, 254;
+  --ax-color-primary-300: 147, 197, 253;
+  --ax-color-primary-400: 96, 165, 250;
+  --ax-color-primary-500: 59, 130, 246;
+  --ax-color-primary-600: 37, 99, 235;
+  --ax-color-primary-700: 29, 78, 216;
+  --ax-color-primary-800: 30, 64, 175;
+  --ax-color-primary-900: 30, 58, 138;
+
+  --ax-color-secondary-fore: 255, 255, 255;
+  --ax-color-secondary-50: 233, 234, 236;
+  --ax-color-secondary-100: 200, 203, 208;
+  --ax-color-secondary-200: 164, 169, 176;
+  --ax-color-secondary-300: 128, 134, 144;
+  --ax-color-secondary-400: 100, 108, 121;
+  --ax-color-secondary-500: 73, 82, 97;
+  --ax-color-secondary-600: 66, 75, 89;
+  --ax-color-secondary-700: 57, 65, 79;
+  --ax-color-secondary-800: 49, 56, 69;
+  --ax-color-secondary-900: 33, 40, 51;
+
+  --ax-color-success-fore: 255, 255, 255;
+  --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-danger-fore: 255, 255, 255;
+  --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-warning-fore: 120, 53, 15;
+  --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-dark {
+  --ax-color-background-default: 47, 48, 55;
+
+  --ax-color-text-default: 224, 224, 224;
+  --ax-color-border-default: 72, 72, 72;
+
+  --ax-color-surface: 60, 60, 67;
+  --ax-color-surface-fore: 224, 224, 224;
+
+  --ax-color-on-surface: 71, 71, 78;
+  --ax-color-on-surface-fore: 224, 224, 224;
+
+  --ax-color-input-surface: 80, 81, 87;
+
+  --ax-color-ghost-fore: 255, 255, 255;
+  --ax-color-ghost-50: 232, 233, 234;
+  --ax-color-ghost-100: 199, 200, 203;
+  --ax-color-ghost-200: 161, 163, 169;
+  --ax-color-ghost-300: 123, 126, 134;
+  --ax-color-ghost-400: 95, 99, 108;
+  --ax-color-ghost-500: 67, 71, 82;
+  --ax-color-ghost-600: 61, 64, 75;
+  --ax-color-ghost-700: 52, 55, 65;
+  --ax-color-ghost-800: 44, 47, 56;
+  --ax-color-ghost-900: 30, 32, 40;
+
+  //   --ax-color-primary-fore : 25, 41, 63;
+  //   --ax-color-primary-50 : 243, 248, 255;
+  // --ax-color-primary-100 : 226, 236, 254;
+  // --ax-color-primary-200 : 206, 224, 253;
+  // --ax-color-primary-300 : 186, 212, 252;
+  // --ax-color-primary-400 : 172, 202, 252;
+  // --ax-color-primary-500 : 157, 193, 251;
+  // --ax-color-primary-600 : 149, 187, 250;
+  // --ax-color-primary-700 : 139, 179, 250;
+  // --ax-color-primary-800 : 129, 171, 249;
+  // --ax-color-primary-900 : 111, 158, 248
+}

package/src/themes/default.scss

@@ -3,7 +3,7 @@
   --ax-size-default: var(--ax-size-base);
 
   --ax-rounded-border-default: 0.375rem;
-  --ax-color-border-default: 204, 204, 204;
+  --ax-color-border-default: 224, 224, 224;
 
   --ax-color-background-default: 250, 250, 250;
   --ax-color-text-default: 18, 18, 18;
@@ -11,9 +11,12 @@
   --ax-color-surface: 255, 255, 255;
   --ax-color-surface-fore: 18, 18, 18;
 
-  --ax-color-on-surface: 242, 242, 242;
+  --ax-color-on-surface: 244, 244, 244;
   --ax-color-on-surface-fore: 20, 20, 20;
 
+  --ax-color-input-surface: 255, 255, 255;
+  --ax-color-input-surface-fore: 18, 18, 18;
+
   --ax-color-ghost-fore: 30, 41, 59;
   --ax-color-ghost-50: 247, 248, 250;
   --ax-color-ghost-100: 235, 238, 242;
@@ -88,17 +91,19 @@
 }
 
 .ax-dark {
-  --ax-color-background-default: 23, 32, 46;
-
+  --ax-color-background-default: 27, 27, 27;
   --ax-color-text-default: 224, 224, 224;
-  --ax-color-border-default: 74, 76, 80;
+  --ax-color-border-default: 255, 255, 255, 0.13;
 
-  --ax-color-surface: 45, 50, 63;
+  --ax-color-surface: 50, 50, 50;
   --ax-color-surface-fore: 224, 224, 224;
 
-  --ax-color-on-surface: 60, 68, 79;
+  --ax-color-on-surface: 62, 62, 62;
   --ax-color-on-surface-fore: 224, 224, 224;
 
+  --ax-color-input-surface: 0, 0, 0, 0.26;
+  --ax-color-input-surface-fore: 224, 224, 224;
+
   --ax-color-ghost-fore: 255, 255, 255;
   --ax-color-ghost-50: 232, 233, 234;
   --ax-color-ghost-100: 199, 200, 203;
@@ -110,4 +115,16 @@
   --ax-color-ghost-700: 52, 55, 65;
   --ax-color-ghost-800: 44, 47, 56;
   --ax-color-ghost-900: 30, 32, 40;
+
+  //   --ax-color-primary-fore : 25, 41, 63;
+  //   --ax-color-primary-50 : 243, 248, 255;
+  // --ax-color-primary-100 : 226, 236, 254;
+  // --ax-color-primary-200 : 206, 224, 253;
+  // --ax-color-primary-300 : 186, 212, 252;
+  // --ax-color-primary-400 : 172, 202, 252;
+  // --ax-color-primary-500 : 157, 193, 251;
+  // --ax-color-primary-600 : 149, 187, 250;
+  // --ax-color-primary-700 : 139, 179, 250;
+  // --ax-color-primary-800 : 129, 171, 249;
+  // --ax-color-primary-900 : 111, 158, 248
 }

package/tailwind.config.js

@@ -116,6 +116,7 @@ module.exports = withAnimations({
         'success-fore': withOpacityValue('--ax-color-success-fore'),
         'warning-fore': withOpacityValue('--ax-color-warning-fore'),
         'danger-fore': withOpacityValue('--ax-color-danger-fore'),
+        'ghost-fore': withOpacityValue('--ax-color-ghost-fore'),
       },
       backgroundColor: {
         default: withOpacityValue('--ax-color-background-default'),
@@ -178,6 +179,5 @@ module.exports = withAnimations({
       addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
     }),
     childSelector,
-    require('tailwind-auto-directions'),
   ],
 });