@acorex/styles 19.10.0-next.13 → 19.10.0-next.15

package/components/_editor-container.scss

@@ -3,17 +3,19 @@
 :root,
 .ax-editor-container {
   --ax-comp-editor-font-size: 0.875rem;
+  --ax-comp-editor-gap: 0.5rem;
   --ax-comp-editor-space-start-size: 0.75rem;
   --ax-comp-editor-space-end-size: 0.75rem;
   --ax-comp-editor-height: var(--ax-sys-size-base);
+  --ax-comp-editor-placeholder-space-x: 0.75rem;
 
   --ax-comp-editor-error-bg-color: var(--ax-sys-color-danger-light-surface);
   --ax-comp-editor-error-text-color: var(--ax-sys-color-danger-surface);
   --ax-comp-editor-error-border-color: var(--ax-sys-color-border-danger-surface);
   --ax-comp-editor-error-box-shadow-color: var(--ax-sys-color-danger-surface);
 
-  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
-  --ax-comp-editor-border-color: var(--ax-sys-color-border-lighter-surface);
+  --ax-comp-editor-text-color: var(--ax-sys-color-on-surface);
+  --ax-comp-editor-border-color: var(--ax-sys-color-border-surface);
   --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
   --ax-comp-editor-box-outline-width: 1px;
   --ax-comp-editor-box-outline-color: var(--ax-sys-color-primary-surface);
@@ -37,6 +39,10 @@
   border-color: rgba(var(--ax-comp-editor-border-color));
   background-color: rgba(var(--ax-comp-editor-bg-color));
   color: rgba(var(--ax-comp-editor-text-color));
+  position: relative;
+  gap: var(--ax-comp-editor-gap);
+  padding-inline-start: var(--ax-comp-editor-space-start-size);
+  padding-inline-end: var(--ax-comp-editor-space-end-size);
 
   &:focus-within {
     border-color: rgba(var(--ax-comp-editor-focused-border-color));
@@ -75,6 +81,9 @@
   &.ax-fill {
     @include mixin.fill-look();
   }
+  &.ax-none {
+    @include mixin.none-look();
+  }
 
   .ax-editor-input {
     height: 100%;
@@ -85,11 +94,11 @@
     }
   }
 
-  .ax-editor,
-  .ax-input {
-    padding-inline-start: var(--ax-comp-editor-space-start-size);
-    padding-inline-end: var(--ax-comp-editor-space-end-size);
-  }
+  // .ax-editor,
+  // .ax-input {
+  //   padding-inline-start: var(--ax-comp-editor-space-start-size);
+  //   padding-inline-end: var(--ax-comp-editor-space-end-size);
+  // }
   .ax-input {
     // padding: 0 calc(var(--ax-comp-editor-font-size) - 4px);
     font-size: var(--ax-comp-editor-font-size);
@@ -109,19 +118,6 @@
     }
   }
 
-  .ax-editor-container {
-    border-radius: 0 !important;
-    border: 0px !important;
-    // height: 100% !important;
-
-    &:focus-within {
-      box-shadow: none !important;
-    }
-    &:focus {
-      box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500));
-    }
-  }
-
   &.ax-state-disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -164,37 +160,23 @@
     height: var(--ax-comp-editor-button-height, 100%);
   }
 
-  > ax-prefix {
-    padding-inline-start: var(--ax-comp-editor-space-start-size);
-  }
-
-  > ax-suffix,
-  .ax-editor-button,
-  .ax-clear-button {
-    padding-inline-end: var(--ax-comp-editor-space-end-size);
-  }
+  // .ax-editor-button,
+  // .ax-clear-button {
+  //   padding-inline-end: var(--ax-comp-editor-space-end-size);
+  // }
   & > ax-prefix,
   & > ax-suffix {
     max-width: fit-content;
   }
-  & > ax-prefix {
-    ax-icon {
-    }
-  }
-  & > ax-suffix {
-    ax-icon {
-    }
-  }
 
   & > ax-prefix,
   & > ax-suffix {
     height: 100%;
 
-    // + .ax-input {
-    //   padding-left: 0.375rem !important;
-    //   padding-right: 0.375rem !important;
-    // }
-    * {
+    ax-button,
+    ax-text,
+    ax-icon,
+    .ax-editor-container {
       display: flex;
       height: 100%;
       align-items: center;
@@ -223,38 +205,57 @@
       width: var(--ax-comp-editor-height);
     }
   }
+
+  ax-popover {
+    position: absolute;
+  }
 }
 
 .ax-xs .ax-editor-container,
 .ax-editor-container.ax-xs {
   --ax-comp-editor-font-size: 0.75rem;
-  --ax-comp-editor-space-start-size: 0.375rem;
-  --ax-comp-editor-space-end-size: 0.375rem;
+  --ax-comp-editor-space-start-size: 0.25rem;
+  --ax-comp-editor-space-end-size: 0.25rem;
+  --ax-comp-editor-button-font-size: 0.625rem;
+  --ax-comp-editor-gap: 0.25rem;
+  --ax-comp-editor-height: 1.5rem;
 }
 .ax-sm .ax-editor-container,
 .ax-editor-container.ax-sm {
   --ax-comp-editor-font-size: 0.875rem;
   --ax-comp-editor-space-start-size: 0.5rem;
   --ax-comp-editor-space-end-size: 0.5rem;
+  --ax-comp-editor-button-font-size: 0.75rem;
+  --ax-comp-editor-gap: 0.375rem;
+  --ax-comp-editor-height: 1.969rem;
 }
 
 .ax-md .ax-editor-container,
 .ax-editor-container,
 .ax-editor-container.ax-md {
-  --ax-comp-editor-space-start-size: 0.75rem;
-  --ax-comp-editor-space-end-size: 0.75rem;
+  --ax-comp-editor-space-start-size: 1rem;
+  --ax-comp-editor-space-end-size: 1rem;
+  --ax-comp-editor-button-font-size: 0.875rem;
+  --ax-comp-editor-gap: 0.5rem;
+  --ax-comp-editor-height: 2.5rem;
 }
 
 .ax-lg .ax-editor-container,
 .ax-editor-container.ax-lg {
   --ax-comp-editor-font-size: 1.125rem;
-  --ax-comp-editor-space-start-size: 0.75rem;
-  --ax-comp-editor-space-end-size: 0.75rem;
+  --ax-comp-editor-space-start-size: 1.125rem;
+  --ax-comp-editor-space-end-size: 1.125rem;
+  --ax-comp-editor-button-font-size: 0.875rem;
+  --ax-comp-editor-gap: 0.625rem;
+  --ax-comp-editor-height: 3.375rem;
 }
 
 .ax-xl .ax-editor-container,
 .ax-editor-container.ax-xl {
   --ax-comp-editor-font-size: 1.5rem;
-  --ax-comp-editor-space-start-size: 0.75rem;
-  --ax-comp-editor-space-end-size: 0.75rem;
+  --ax-comp-editor-space-start-size: 1.5rem;
+  --ax-comp-editor-space-end-size: 1.5rem;
+  --ax-comp-editor-button-font-size: 1rem;
+  --ax-comp-editor-gap: 0.75rem;
+  --ax-comp-editor-height: 3.938rem;
 }

package/mixins/_editor-looks.scss

@@ -21,3 +21,12 @@
   border-width: 0px !important;
   border-bottom-width: var(--ax-comp-editor-border-width) !important;
 }
+
+@mixin none-look() {
+  --ax-comp-editor-border-radius: 0px;
+  --ax-comp-editor-box-outline-width: 0px;
+  --ax-comp-editor-border-width: 0px;
+  --ax-comp-editor-bg-color: 0, 0, 0, 0;
+  --ax-comp-editor-border-color: 0, 0, 0, 0;
+  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
+}

package/mixins/_scroll-bar.scss

@@ -6,8 +6,6 @@
     --ax-sys-scroller-size-radius: 3px;
     --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
     --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
-    scrollbar-width: thin;
-    scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
   }
 
   .ax-dark,
@@ -33,3 +31,9 @@
     border-radius: var(--ax-sys-scroller-size-radius);
   }
 }
+@-moz-document url-prefix() {
+  * {
+    // scrollbar-width: thin;
+    scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "19.10.0-next.13",
+  "version": "19.10.0-next.15",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",

package/tailwind-base.js

@@ -1,6 +1,7 @@
 const plugin = require('tailwindcss/plugin');
 const { withAnimations } = require('animated-tailwindcss');
 const { createBorderSurfaces, createOnSurfaces, createPalette, createSurfaces } = require('./generators/index');
+
 const childSelector = plugin(function ({ addVariant }) {
   addVariant('child', '& > *');
   addVariant('child-hover', '& > *:hover');
@@ -151,32 +152,32 @@ const UTILITY_CLASSES = {
     color: 'rgb(var(--ax-sys-color-on-surface))',
     borderColor: 'rgb(var(--ax-sys-color-border-surface))',
   },
-  '.lightest': {
+  '.lightest-surface': {
     backgroundColor: 'rgb(var(--ax-sys-color-lightest-surface))',
     color: 'rgb(var(--ax-sys-color-on-lightest-surface))',
     borderColor: 'rgb(var(--ax-sys-color-border-lightest-surface))',
   },
-  '.lighter': {
+  '.lighter-surface': {
     backgroundColor: 'rgb(var(--ax-sys-color-lighter-surface))',
     color: 'rgb(var(--ax-sys-color-on-lighter-surface))',
     borderColor: 'rgb(var(--ax-sys-color-border-lighter-surface))',
   },
-  '.light': {
+  '.light-surface': {
     backgroundColor: 'rgb(var(--ax-sys-color-light-surface))',
     color: 'rgb(var(--ax-sys-color-on-light-surface))',
     borderColor: 'rgb(var(--ax-sys-color-border-light-surface))',
   },
-  '.dark': {
+  '.dark-surface': {
     backgroundColor: 'rgb(var(--ax-sys-color-dark-surface))',
     color: 'rgb(var(--ax-sys-color-on-dark-surface))',
     borderColor: 'rgb(var(--ax-sys-color-border-dark-surface))',
   },
-  '.darker': {
+  '.darker-surface': {
     backgroundColor: 'rgb(var(--ax-sys-color-darker-surface))',
     color: 'rgb(var(--ax-sys-color-on-darker-surface))',
     borderColor: 'rgb(var(--ax-sys-color-border-darker-surface))',
   },
-  '.darkest': {
+  '.darkest-surface': {
     backgroundColor: 'rgb(var(--ax-sys-color-darkest-surface))',
     color: 'rgb(var(--ax-sys-color-on-darkest-surface))',
     borderColor: 'rgb(var(--ax-sys-color-border-darkest-surface))',

package/themes/default.scss

@@ -9,9 +9,6 @@ $theme-colors: (
     oklch(0.645 0.246 16.439),
     oklch(0.712 0.194 13.428),
   ),
-  'info': hsl(257, 100%, 50%),
-  'accent1': hsla(77, 100%, 50%, 0.483),
-  'accent2': hsl(48, 100%, 50%),
 );
 
 $theme-surfaces: (
@@ -36,9 +33,6 @@ $options: (
   --ax-sys-border-radius: 0.5rem;
   --ax-sys-color-body-text: 0, 0, 0;
   --ax-sys-color-input-text: 0, 0, 0;
-
-  // --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
-  // --ax-sys-body-text-color: var(--ax-sys-color-surface-lowest-border);
 }
 
 @include generate-pallete-variables($theme-colors, $theme-surfaces, $options);