@acorex/styles 7.0.38 → 7.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "7.0.38",
+  "version": "7.0.40",
   "description": "",
   "main": "index.js",
   "author": "",

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);
@@ -118,14 +118,11 @@
 
     & > ax-text {
       font-size: 0.875rem;
-      background-color: rgba(var(--ax-color-surface-fore));
+      background-color: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0 0.5rem;
-      border-inline-start: 1px solid;
-      border-color: rgba(var(--ax-color-border-default));
-      color: rgba(var(--ax-color-ghost-fore));
       line-height: 1;
     }
   }

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

@@ -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;
@@ -85,20 +88,34 @@
   --ax-color-warning-700: 255, 160, 0;
   --ax-color-warning-800: 255, 143, 0;
   --ax-color-warning-900: 255, 111, 0;
+
+  --ax-color-info-fore: 255, 255, 255;
+  --ax-color-info-50: 226, 244, 252;
+  --ax-color-info-100: 183, 228, 248;
+  --ax-color-info-200: 135, 210, 244;
+  --ax-color-info-300: 86, 192, 240;
+  --ax-color-info-400: 50, 179, 236;
+  --ax-color-info-500: 14, 165, 233;
+  --ax-color-info-600: 12, 157, 230;
+  --ax-color-info-700: 10, 147, 227;
+  --ax-color-info-800: 8, 138, 223;
+  --ax-color-info-900: 4, 121, 217;
 }
 
 .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: 66, 83, 110;
+  --ax-color-border-default: 255, 255, 255, 0.13;
 
-  --ax-color-surface: 35, 51, 70;
+  --ax-color-surface: 50, 50, 50;
   --ax-color-surface-fore: 224, 224, 224;
 
-  --ax-color-on-surface: 53, 68, 91;
+  --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;

package/src/variables/_colors.scss

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