@acorex/styles 18.16.0-next.9 → 19.0.0

package/index.scss

@@ -1,9 +1,9 @@
-@import '@angular/cdk/overlay-prebuilt.css';
+@forward './src/base/preflight';
+@forward './src/variables/colors';
 
-@import './src/base/preflight';
-@import './src/variables/colors';
+@forward './src/base/index.scss';
+@forward './src/mixins/index.scss';
+@forward './src/shared/index.scss';
+@forward './src/utility/index.scss';
 
-@import './src/base/index.scss';
-@import './src/mixins/index.scss';
-@import './src/shared/index.scss';
-@import './src/utility/index.scss';
+@import '@angular/cdk/overlay-prebuilt.css';

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@acorex/styles",
-  "version": "18.16.0-next.9",
+  "version": "19.0.0",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",
   "peerDependencies": {
     "animated-tailwindcss": ">=4.0.0",
-    "tailwindcss": ">=3.4.10"
+    "tailwindcss": ">=3.4.13"
   }
 }

package/src/base/index.scss

@@ -1,4 +1,4 @@
-@import '../mixins/index.scss';
+@forward '../mixins/index.scss';
 
 :root {
   --ax-overlay-full-width: 93;

package/src/mixins/index.scss

@@ -1,3 +1,3 @@
-@import './look';
-@import './media';
-@import './util';
+@forward './look';
+@forward './media';
+@forward './util';

package/src/shared/_check-box.scss

@@ -1,4 +1,4 @@
-@import '../mixins/index.scss';
+@use '../mixins/index.scss';
 
 .ax-checkbox {
   // @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;

package/src/shared/_color-look.scss

@@ -1,7 +1,8 @@
-@import '../variables/index.scss';
+@use '../variables/colors';
+@use '../mixins/util';
 
-@each $color in $color_names {
-  @each $look in $look_names {
+@each $color in colors.$color_names {
+  @each $look in colors.$look_names {
     @if ($look == 'solid') {
       .ax-el-#{$color}-#{$look} {
         // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
@@ -463,8 +464,8 @@
 }
 
 @mixin color-look-dark-mode {
-  @each $color in $color_names {
-    @each $look in $look_names {
+  @each $color in colors.$color_names {
+    @each $look in colors.$look_names {
       @if ($look == 'solid') {
         .ax-el-#{$color}-#{$look} {
           // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
@@ -472,6 +473,10 @@
           color: rgba(var(--ax-color-#{$color}-fore-tint));
           border-color: rgba(var(--ax-color-#{$color}-200));
           &.ax-el-interactive {
+            .ax-action-item-suffix ax-text {
+              color: rgba(var(--ax-color-#{$color}-800));
+            }
+
             &:hover {
               &:not(.ax-state-disabled) {
                 // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
@@ -561,6 +566,9 @@
                 // @apply ax-text-#{$color}-500;
                 background-color: rgba(var(--ax-color-#{$color}-200));
                 color: rgba(var(--ax-color-#{$color}-fore-tint));
+                .ax-action-item-suffix ax-text {
+                  color: rgba(var(--ax-color-#{$color}-800));
+                }
               }
             }
           }
@@ -590,6 +598,9 @@
       }
       @if ($look == 'twotone') {
         .ax-el-#{$color}-#{$look} {
+          .ax-action-item-suffix ax-text {
+            color: rgba(var(--ax-color-#{$color}-800));
+          }
           // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
 
           background-color: rgba(var(--ax-color-#{$color}-200));
@@ -806,6 +817,6 @@
   }
 }
 
-@include darkMode() {
+@include util.darkMode() {
   @include color-look-dark-mode();
 }

package/src/shared/_drop-down.scss

@@ -1,5 +1,5 @@
-@import '../variables/index.scss';
-@import '../mixins/index.scss';
+@use '../variables/index.scss';
+@use '../mixins/index.scss' as mixins;
 .ax-drop-down {
   // @apply ax-contents;
   display: contents;
@@ -37,10 +37,10 @@
   --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
   box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
 
-  @include media('md') {
+  @include mixins.media('md') {
     border-radius: var(--ax-rounded-border-default);
   }
-  @include media('xs') {
+  @include mixins.media('xs') {
     margin: 0;
   }
   ax-header,

package/src/shared/_editor-container.scss

@@ -1,6 +1,7 @@
-@import '../mixins/look';
+@use '../mixins/look';
+@use '../mixins/util';
 
-@include darkMode() {
+@include util.darkMode() {
   .ax-editor-container {
     &.ax-look-fill {
       &.ax-state-error {
@@ -39,16 +40,16 @@
   }
   &.ax-look-solid,
   &.ax-look-outline {
-    @include solid-look();
+    @include look.solid-look();
   }
   &.ax-look-flat {
-    @include flat-look();
+    @include look.flat-look();
   }
   &.ax-look-outline {
-    @include outline-look();
+    @include look.outline-look();
   }
   &.ax-look-fill {
-    @include fill-look();
+    @include look.fill-look();
   }
 
   .ax-editor-input {

package/src/shared/_list.scss

@@ -1,5 +1,5 @@
-@import '../mixins/index.scss';
-@include darkMode() {
+@use '../mixins/index.scss' as mixins;
+@include mixins.darkMode() {
   .ax-list-item {
     &.ax-state-selected {
       // @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
@@ -22,7 +22,7 @@
   background-color: rgba(var(--ax-color-surface));
   font-size: 0.875rem /* 14px */;
   line-height: 1.25rem /* 20px */;
-  @include media('md') {
+  @include mixins.media('md') {
     max-height: 20rem /* 320px */;
   }
   ax-header,
@@ -42,7 +42,7 @@
     font-size: 1rem /* 16px */;
     line-height: 1.5rem /* 24px */;
     font-weight: 500;
-    @include media('md') {
+    @include mixins.media('md') {
       font-size: 1.125rem /* 18px */;
       line-height: 1.75rem /* 28px */;
     }

package/src/shared/_radio.scss

@@ -1,4 +1,4 @@
-@import '../mixins/index.scss';
+@use '../mixins/index.scss';
 
 .ax-radio {
   // @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;

package/src/shared/_table.scss

@@ -1,5 +1,5 @@
-@import '../mixins/index.scss';
-@include darkMode() {
+@use '../mixins/index.scss' as mixins;
+@include mixins.darkMode() {
   .ax-table {
     thead {
       // @apply ax-bg-on-surface;
@@ -94,7 +94,7 @@
       }
     }
   }
-  @include mediaLessThan('xs') {
+  @include mixins.mediaLessThan('xs') {
     &.ax-table-responsive {
       // @apply ax-block ax-break-words ax-border-0;
       display: block;

package/src/shared/_utils.scss

@@ -1,4 +1,5 @@
-@import '../variables/index.scss';
+@use '../variables/index.scss';
+@use '../mixins/util';
 
 [class*=' ax-icon-'],
 [class^='ax-icon-'] {
@@ -74,7 +75,7 @@
 .ax-select-none * {
   user-select: none !important;
 }
-@include darkMode() {
+@include util.darkMode() {
   .ax-uploader-overlay-state {
     // @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
     background-color: rgba(var(--ax-color-primary-800), 0.75);

package/src/shared/index.scss

@@ -1,12 +1,12 @@
-@import './action-item';
-@import './actionsheet';
-@import './check-box';
-@import './color-look';
-@import './drop-down';
-@import './editor-container';
-@import './general-button';
-@import './inputs';
-@import './list';
-@import './radio';
-@import './table';
-@import './utils';
+@forward './action-item';
+@forward './actionsheet';
+@forward './check-box';
+@forward './color-look';
+@forward './drop-down';
+@forward './editor-container';
+@forward './general-button';
+@forward './inputs';
+@forward './list';
+@forward './radio';
+@forward './table';
+@forward './utils';

package/src/variables/index.scss

@@ -1,2 +1,2 @@
-@import './colors';
-@import './degrees';
+@forward './colors';
+@forward './degrees';