npm - @acorex/styles - Versions diffs - 7.12.2 → 7.12.5 - Mend

@acorex/styles 7.12.2 → 7.12.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/index.css +2855 -1
package/index.min.css +1 -1
package/package.json +1 -1
package/src/shared/_color-look.scss +458 -0
package/src/shared/_editor-container.scss +4 -4
package/src/shared/index.scss +1 -0

package/src/shared/_color-look.scss ADDED Viewed

@@ -0,0 +1,458 @@
+@import '../variables/index.scss';
+@each $color in $color_names {
+  @each $look in $look_names {
+    @if ($look == 'solid') {
+      .ax-el-#{$color}-#{$look} {
+        @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
+        &.ax-el-interactive {
+          &:is(&:hover):not(.ax-state-disabled) {
+            @apply ax-bg-#{$color}-600;
+          }
+        }
+        &.ax-state-selected {
+          @apply ax-bg-#{$color}-700;
+        }
+        .ax-ripple {
+          @apply ax-bg-#{$color}-300/30 #{!important};
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            @apply ax-border-#{$color}-fore ax-border-b-transparent;
+          }
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            @apply ax-outline-#{$color}-500;
+          }
+        }
+      }
+    }
+    @if ($look == 'outline') {
+      .ax-el-#{$color}-#{$look} {
+        @apply ax-border-#{$color}-500 ax-text-#{$color}-500 ax-border ax-bg-transparent;
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              @apply ax-border-#{$color}-700 ax-text-#{$color}-700;
+            }
+          }
+        }
+        &.ax-state-selected {
+          @apply ax-border-#{$color}-500 ax-text-#{$color}-fore ax-bg-#{$color}-500;
+        }
+        .ax-ripple {
+          @apply ax-bg-#{$color}-500/30 #{!important};
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            @apply ax-border-#{$color}-fore ax-border-b-transparent;
+          }
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
+          }
+        }
+      }
+    }
+    @if ($look == 'blank') {
+      .ax-el-#{$color}-#{$look} {
+        @apply ax-text-#{$color}-500;
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              @apply ax-text-#{$color}-fore-tint;
+            }
+          }
+        }
+        &.ax-state-selected {
+          @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
+        }
+        .ax-ripple {
+          @apply ax-bg-#{$color}-500/30 #{!important};
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            @apply ax-border-#{$color}-fore ax-border-b-transparent;
+          }
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+          }
+        }
+      }
+    }
+    @if ($look == 'twotone') {
+      .ax-el-#{$color}-#{$look} {
+        @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
+        &.ax-el-interactive {
+          &:hover {
+            &:not(.ax-state-disabled) {
+              @apply ax-bg-#{$color}-200;
+            }
+          }
+        }
+        &.ax-state-selected {
+          @apply ax-bg-#{$color}-300;
+        }
+        .ax-ripple {
+          @apply ax-bg-#{$color}-500/30 #{!important};
+        }
+        ax-loading-spinner {
+          .ax-loader {
+            @apply ax-border-#{$color}-fore ax-border-b-transparent;
+          }
+        }
+        & > button {
+          &:is(&:focus-visible, &.ax-state-focus) {
+            @apply ax-outline-#{$color}-500;
+          }
+        }
+      }
+    }
+    .ax-el-ghost-solid {
+      @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
+      &.ax-el-interactive {
+        &:hover {
+          &:not(&.ax-state-selected, &.ax-state-disabled) {
+            @apply ax-border-primary-500 ax-text-primary-500;
+          }
+        }
+        &:active {
+          @apply ax-border-primary-700 ax-text-primary-700;
+        }
+      }
+      &.ax-state-selected {
+        @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
+      }
+      .ax-ripple {
+        @apply ax-bg-primary-500/30 #{!important};
+      }
+      ax-loading-spinner {
+        .ax-loader {
+          @apply ax-border-ghost-fore ax-border-b-transparent;
+        }
+      }
+    }
+    .ax-el-ghost-outline {
+      @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
+      &.ax-el-interactive {
+        &:hover {
+          &:not(&.ax-state-selected, &.ax-state-disabled) {
+            @apply ax-border-primary-500 ax-text-primary-500;
+          }
+        }
+      }
+      &.ax-state-selected {
+        @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
+      }
+      .ax-ripple {
+        @apply ax-bg-primary-500/30 #{!important};
+      }
+      ax-loading-spinner {
+        .ax-loader {
+          @apply ax-border-ghost-fore ax-border-b-transparent;
+        }
+      }
+    }
+    .ax-el-ghost-blank {
+      @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
+      &.ax-state-selected {
+        @apply ax-bg-primary-500 ax-text-primary-fore;
+      }
+      &.ax-el-interactive {
+        &:hover {
+          &:not(&.ax-state-selected, &.ax-state-disabled) {
+            @apply ax-border-primary-700 ax-text-primary-700;
+          }
+        }
+        &:active {
+          @apply ax-border-primary-800 ax-text-primary-800;
+        }
+      }
+      .ax-ripple {
+        @apply ax-bg-primary-500/30 #{!important};
+      }
+      ax-loading-spinner {
+        .ax-loader {
+          @apply ax-border-ghost-fore ax-border-b-transparent;
+        }
+      }
+      & > button {
+        &:is(&:focus-visible, &.ax-state-focus) {
+          @apply ax-outline-primary-500;
+        }
+      }
+    }
+    .ax-el-ghost-twotone {
+      @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
+      &.ax-el-interactive {
+        &:hover {
+          &:not(&.ax-state-selected, &.ax-state-disabled) {
+            @apply ax-bg-primary-200 ax-text-primary-fore-tint;
+          }
+        }
+        &:active {
+          @apply ax-bg-primary-300 ax-text-primary-fore-tint;
+        }
+      }
+      &.ax-state-selected {
+        @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
+      }
+      .ax-ripple {
+        @apply ax-bg-primary-500/30 #{!important};
+      }
+      ax-loading-spinner {
+        .ax-loader {
+          @apply ax-border-ghost-fore ax-border-b-transparent;
+        }
+      }
+      & > button {
+        &:is(&:focus-visible, &.ax-state-focus) {
+          @apply ax-outline-primary-500;
+        }
+      }
+    }
+  }
+}
+@mixin color-look-dark-mode {
+  @each $color in $color_names {
+    @each $look in $look_names {
+      @if ($look == 'solid') {
+        .ax-el-#{$color}-#{$look} {
+          @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
+          &.ax-el-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
+              }
+            }
+          }
+          &.ax-state-selected {
+            @apply ax-bg-#{$color}-400;
+          }
+          .ax-ripple {
+            @apply ax-bg-#{$color}-200/30 #{!important};
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              @apply ax-outline-#{$color}-500;
+            }
+          }
+        }
+      }
+      @if ($look == 'outline') {
+        .ax-el-#{$color}-#{$look} {
+          @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
+          &.ax-el-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
+              }
+            }
+          }
+          &.ax-state-selected {
+            @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
+          }
+          .ax-ripple {
+            @apply ax-bg-#{$color}-500/30 #{!important};
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
+            }
+          }
+        }
+      }
+      @if ($look == 'blank') {
+        .ax-el-#{$color}-#{$look} {
+          @apply ax-text-#{$color}-300 ax-bg-transparent;
+          &.ax-el-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                @apply ax-text-#{$color}-500;
+              }
+            }
+          }
+          &.ax-state-selected {
+            @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
+          }
+          .ax-ripple {
+            @apply ax-bg-#{$color}-500/30 #{!important};
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              @apply ax-outline-#{$color}-300 ax-outline-offset-0;
+            }
+          }
+        }
+      }
+      @if ($look == 'twotone') {
+        .ax-el-#{$color}-#{$look} {
+          @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
+          &.ax-state-interactive {
+            &:hover {
+              &:not(.ax-state-disabled) {
+                background-color: rgba(var(--ax-color-#{$color}-300));
+                @apply ax-bg-#{$color}-300;
+              }
+            }
+          }
+          &.ax-state-selected {
+            @apply ax-bg-#{$color}-400;
+          }
+          .ax-ripple {
+            @apply ax-bg-#{$color}-500/30 #{!important};
+          }
+          ax-loading-spinner {
+            .ax-loader {
+              @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
+            }
+          }
+          & > button {
+            &:is(&:focus-visible, &.ax-state-focus) {
+              @apply ax-outline-#{$color}-500;
+            }
+          }
+        }
+      }
+    }
+  }
+  .ax-el-ghost-solid {
+    @apply ax-bg-ghost ax-text-ghost-fore;
+    &.ax-state-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          @apply ax-border-primary-200 ax-text-primary-200;
+        }
+      }
+    }
+    &:active {
+      @apply ax-border-primary-300 ax-text-primary-300;
+    }
+    &.ax-state-selected {
+      @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
+    }
+    & > button {
+      &:is(&:focus-visible, &.ax-state-focus) {
+        @apply ax-outline-primary-500;
+      }
+    }
+  }
+  .ax-el-ghost-outline {
+    @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
+    &.ax-el-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          @apply ax-border-primary-300 ax-text-primary-300;
+        }
+      }
+      &:active {
+        @apply ax-border-primary-400 ax-text-primary-400;
+      }
+    }
+    &.ax-state-selected {
+      @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-500;
+    }
+    & > button {
+      &:is(&:focus-visible, &.ax-state-focus) {
+        @apply -ax-outline-offset-0 ax-outline-primary-500;
+      }
+    }
+  }
+  .ax-el-ghost-blank {
+    @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
+    &.ax-state-selected {
+      @apply ax-bg-primary-500 ax-text-primary-fore;
+    }
+    &.ax-el-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          @apply ax-border-primary-200 ax-text-primary-200;
+        }
+      }
+      &:active {
+        @apply ax-border-primary-300 ax-text-primary-300;
+      }
+    }
+    & > button {
+      &:is(&:focus-visible, &.ax-state-focus) {
+        @apply ax-outline-ghost-fore ax-ring-offset-0;
+      }
+    }
+  }
+  .ax-el-ghost-twotone {
+    @apply ax-bg-ghost ax-text-ghost-fore;
+    &.ax-el-interactive {
+      &:hover {
+        &:not(&.ax-state-selected, &.ax-state-disabled) {
+          @apply ax-bg-primary-200 ax-text-info-fore-tint;
+        }
+      }
+      &:active {
+        @apply ax-bg-primary-300 ax-text-info-fore-tint;
+      }
+    }
+    &.ax-state-selected {
+      @apply ax-border-primary-400 ax-bg-primary-400 ax-text-info-fore-tint;
+    }
+    & > button {
+      &:is(&:focus-visible, &.ax-state-focus) {
+        @apply ax-outline-primary-500;
+      }
+    }
+  }
+}
+@include darkMode() {
+  @include color-look-dark-mode();
+}

package/src/shared/_editor-container.scss CHANGED Viewed

@@ -7,9 +7,9 @@
         @apply ax-bg-danger-500/25;
       }
-      // &.ax-state-success {
-      //   background-color: rgba(var(--ax-color-success-500), 0.25);
-      // }
+      &.ax-state-success {
+        background-color: rgba(var(--ax-color-success-500), 0.25);
+      }
     }
   }
 }
@@ -101,7 +101,7 @@
     }
     ax-icon {
-      @apply ax-ps-3;
+      @apply ax-px-3;
     }
   }

package/src/shared/index.scss CHANGED Viewed

@@ -1,5 +1,6 @@
 @import './actionsheet';
 @import './check-box';
+@import './color-look';
 @import './decoration';
 @import './drop-down';
 @import './editor-container';