@acorex/styles 7.5.1 → 7.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "7.5.1",
+  "version": "7.8.1",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",

package/src/base/_normalize.scss

@@ -33,7 +33,8 @@
 5. Use the user's configured `sans` font-feature-settings by default.
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -201,20 +202,15 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  font-weight: inherit;
-  /* 1 */
-  line-height: inherit;
-  /* 1 */
-  color: inherit;
-  /* 1 */
-  margin: 0;
-  /* 2 */
-  padding: 0;
-  /* 3 */
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
 }
 
 /*
@@ -353,6 +349,10 @@ menu {
   padding: 0;
 }
 
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */

package/src/shared/_drop-down.scss

@@ -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,7 +121,9 @@
       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;

package/src/shared/_editor-container.scss

@@ -21,7 +21,7 @@
   color: rgba(var(--ax-color-input-surface-fore));
   font-size: 0.875rem;
   overflow: hidden;
-
+  line-height: 1;
   &.ax-look-solid,
   &.ax-look-outline {
     @include solid-look();
@@ -56,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);
     }
   }
 
@@ -88,8 +90,9 @@
     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;
@@ -140,6 +143,7 @@
 
   & > ax-prefix,
   & > ax-suffix {
+    height: 100%;
     * {
       height: 100%;
       display: flex;
@@ -183,15 +187,14 @@
     opacity: 0.5;
   }
 }
-span.ripple {
+.ax-ripple {
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  animation: ripple 500ms linear;
-  background-color: rgba(var(--ax-color-white), 0.16);
+  animation: ripple 225ms linear;
   @keyframes ripple {
     to {
-      transform: scale(4);
+      transform: scale3d(1, 1, 1);
       opacity: 0;
     }
   }

package/src/shared/index.scss

@@ -7,6 +7,5 @@
 @import './inputs';
 @import './list';
 @import './radio';
-@import './skeleton';
 @import './table';
 @import './utils';

package/src/themes/default.scss

@@ -21,6 +21,7 @@
   --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;
@@ -34,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;
@@ -47,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;
@@ -60,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;
@@ -73,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;
@@ -86,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;
@@ -99,6 +105,7 @@
   --ax-color-info-950: 30, 27, 75;
 
   --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;
@@ -115,7 +122,7 @@
 .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;

package/src/variables/_colors.scss

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

package/tailwind-base.js

@@ -277,12 +277,6 @@ module.exports = withAnimations({
         '.tabs-fit': {
           width: '100%',
         },
-        '.skeleton': {
-          position: 'relative',
-          overflow: 'hidden',
-          backgroundColor: 'rgba(var(--ax-color-black), 0.15)',
-        },
-        '.skeleton-animate': {},
         '.xs': {
           '--ax-size-default': '2rem',
         },

package/src/shared/_skeleton.scss

@@ -1,31 +0,0 @@
-.ax-skeleton {
-  position: relative;
-  overflow: hidden;
-  background-color: rgba(var(--ax-color-black), 0.5);
-  &.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-black), 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%;
-  }
-}