@acorex/styles 7.11.6 → 7.12.1

package/src/mixins/_look.scss

@@ -1,100 +1,54 @@
 @mixin solid-look() {
-  background-color: rgba(var(--ax-color-input-surface));
-  border: 1px solid;
-  border-color: rgba(var(--ax-color-border-default));
-  border-radius: var(--ax-rounded-border-default);
-
+  @apply ax-rounded-default ax-border ax-border-default ax-bg-input-surface;
   &:focus-within {
-    border-color: rgba(var(--ax-color-primary-500));
-    box-shadow: 0 0 0 1px rgba(var(--ax-color-primary-500));
+    @apply ax-border-primary ax-ring-1 ax-ring-primary-500;
   }
 
   &.ax-state-error {
-    border-color: rgba(var(--ax-color-danger-500));
+    @apply ax-border-danger-500;
     &:focus-within {
-      box-shadow: 0 0 0 1px rgba(var(--ax-color-danger-500));
+      @apply ax-ring-1 ax-ring-danger-500;
     }
     .ax-input {
       &::placeholder {
-        color: rgba(var(--ax-color-danger-500));
+        @apply ax-text-danger;
       }
     }
   }
-
-  // &.ax-state-success {
-  //   outline-color: rgba(var(--ax-color-success-500));
-  //   border-color: rgba(var(--ax-color-success-500));
-  //   &:focus-within {
-  //     box-shadow: 0 0 0 1px rgba(var(--ax-color-success-500));
-  //   }
-  //   .ax-input {
-  //     &::placeholder {
-  //       color: rgba(var(--ax-color-success-500));
-  //     }
-  //   }
-  // }
 }
 @mixin flat-look() {
-  border-bottom: 1px solid;
-  border-color: rgba(var(--ax-color-border-default));
-  border-radius: 0;
-
+  @apply ax-rounded-none ax-border-b ax-border-default;
   &:focus-within {
-    border-color: rgba(var(--ax-color-primary-500));
+    @apply ax-border-primary-500;
   }
   &.ax-state-error {
-    border-color: rgba(var(--ax-color-danger-500));
-
+    @apply ax-border-danger-500;
     .ax-input {
       &::placeholder {
-        color: rgba(var(--ax-color-danger-500));
+        @apply ax-text-danger-500;
       }
     }
   }
-
-  // &.ax-state-success {
-  //   outline-color: rgba(var(--ax-color-success-500));
-  //   border-color: rgba(var(--ax-color-success-500));
-
-  //   .ax-input {
-  //     &::placeholder {
-  //       color: rgba(var(--ax-color-success-500));
-  //     }
-  //   }
-  // }
 }
 
 @mixin outline-look() {
-  background-color: transparent !important;
+  @apply ax-bg-transparent #{!important};
 }
 
 @mixin fill-look() {
-  background-color: rgba(var(--ax-color-on-surface));
-  border-radius: var(--ax-rounded-border-default);
+  @apply ax-rounded-default ax-bg-on-surface;
   &:focus-within {
-    box-shadow: 0 0 0 2px rgba(var(--ax-color-primary-500));
+    @apply ax-ring-2 ax-ring-primary-500;
   }
   &.ax-state-error {
-    background-color: rgba(var(--ax-color-danger-50));
+    @apply ax-bg-danger-200 ax-text-danger-fore-tint;
     &:focus-within {
-      box-shadow: 0 0 0 2px rgba(var(--ax-color-danger-500));
+      @apply ax-ring-2 ax-ring-primary-500;
     }
     .ax-input {
       &::placeholder {
-        color: rgba(var(--ax-color-danger-500));
+        @apply ax-text-danger-500;
       }
     }
   }
-
-  // &.ax-state-success {
-  //   background-color: rgba(var(--ax-color-success-50));
-  //   &:focus-within {
-  //     box-shadow: 0 0 0 2px rgba(var(--ax-color-success-500));
-  //   }
-  //   .ax-input {
-  //     &::placeholder {
-  //       color: rgba(var(--ax-color-success-500));
-  //     }
-  //   }
-  // }
 }

package/src/mixins/_media.scss

@@ -1,27 +1,27 @@
 @mixin media($media) {
-    @if $media == "phone" {
-        @media (max-width: 599px) {
-            @content;
-        }
+  @if $media == 'phone' {
+    @media (max-width: 599px) {
+      @content;
     }
-    @if $media == "tablet" {
-        @media (min-width: 600px) {
-            @content;
-        }
+  }
+  @if $media == 'tablet' {
+    @media (min-width: 600px) {
+      @content;
     }
-    @if $media == "tablet-landscape" {
-        @media (min-width: 900px) {
-            @content;
-        }
+  }
+  @if $media == 'tablet-landscape' {
+    @media (min-width: 900px) {
+      @content;
     }
-    @if $media == "desktop" {
-        @media (min-width: 1200px) {
-            @content;
-        }
+  }
+  @if $media == 'desktop' {
+    @media (min-width: 1200px) {
+      @content;
     }
-    @if $media == "desktop-large" {
-        @media (min-width: 1800px) {
-            @content;
-        }
+  }
+  @if $media == 'desktop-large' {
+    @media (min-width: 1800px) {
+      @content;
     }
+  }
 }

package/src/mixins/_util.scss

@@ -1,18 +1,3 @@
-@mixin color-variable-genterator($array) {
-  @each $name, $color in $array {
-    @if (type-of($color) == 'map') {
-      @each $subname, $variant in $color {
-        @if ($subname != '') {
-          --ax-color-#{$name}-#{$subname}: #{$variant};
-        } @else {
-          --ax-color-#{$name}: #{$variant};
-        }
-      }
-    } @else {
-      --ax-color-#{$name}: #{$color};
-    }
-  }
-}
 @mixin darkMode() {
   .ax-dark {
     @content;

package/src/shared/_actionsheet.scss

@@ -1,40 +1,3 @@
 .ax-actionsheet-panel {
-  animation-duration: 100ms;
-  -webkit-animation-duration: 100ms;
-  animation-fill-mode: both;
-  -webkit-animation-fill-mode: both;
-  opacity: 0;
-  animation-name: fadeInUp;
-  -webkit-animation-name: fadeInUp;
-  background-color: rgba(var(--ax-color-surface));
-  -webkit-border-top-left-radius: var(--ax-rounded-border-default);
-  -webkit-border-top-right-radius: var(--ax-rounded-border-default);
-  -moz-border-radius-topleft: var(--ax-rounded-border-default);
-  -moz-border-radius-topright: var(--ax-rounded-border-default);
-  border-top-left-radius: var(--ax-rounded-border-default);
-  border-top-right-radius: var(--ax-rounded-border-default);
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.141), 0 6px 30px 5px rgba(0, 0, 0, 0.122);
-  overflow: hidden;
-
-  @keyframes fadeInUp {
-    from {
-      transform: translate3d(0, 40px, 0);
-    }
-
-    to {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-  }
-
-  @-webkit-keyframes fadeInUp {
-    from {
-      transform: translate3d(0, 40px, 0);
-    }
-
-    to {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-  }
+  @apply ax-animate-fadeInUp ax-overflow-hidden ax-rounded-t-default ax-bg-surface ax-shadow-lg ax-animate-2xfaster;
 }

package/src/shared/_check-box.scss

@@ -1,24 +1,13 @@
 @import '../mixins/index.scss';
 
 .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-input-surface));
-  border-radius: 0.2rem;
-  margin: 0;
-  outline: none;
-  vertical-align: middle;
-  appearance: none;
+  @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;
   .ax-state-loading {
   }
   &:checked,
   &:indeterminate {
-    border-color: rgba(var(--ax-color-primary-500)) !important;
-    background-color: rgba(var(--ax-color-primary-500)) !important;
-    background-repeat: no-repeat;
-    background-size: contain;
+    @apply ax-border-primary-500 ax-bg-primary-500 #{!important};
+    @apply ax-bg-contain ax-bg-no-repeat;
   }
 
   &:checked {
@@ -29,16 +18,13 @@
     background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
   }
 
-  &:focus-visible {
-    outline-offset: 2px;
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: rgba(var(--ax-color-primary-500));
+  &:focus-visible,
+  &:focus {
+    @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
   }
 
   &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+    @apply ax-cursor-not-allowed ax-opacity-50;
   }
 }
 

package/src/shared/_decoration.scss

@@ -1,46 +1,34 @@
 .ax-decoration-container,
 ax-header,
 ax-footer {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.5rem;
+  @apply ax-flex ax-justify-between ax-gap-2;
   & > ax-prefix,
   & > ax-suffix {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: row;
-    gap: 0.5rem;
-    align-items: center;
+    @apply ax-flex ax-flex-1 ax-items-center ax-gap-2;
   }
   & > ax-prefix {
-    order: -9999;
-    justify-content: flex-start;
-    align-items: center;
+    @apply -ax-order-last ax-items-center ax-justify-start;
   }
   & > ax-suffix {
-    order: 9999;
-    justify-content: flex-end;
-    align-items: center;
+    @apply ax-order-last ax-items-center ax-justify-end;
   }
 }
 
 ax-close-button {
   button {
-    cursor: pointer;
-    background-color: transparent;
-    display: flex;
+    @apply ax-flex ax-cursor-pointer ax-bg-transparent;
     i {
-      font-size: 1.5rem;
-    }
-    &:focus {
-      outline: none;
-      opacity: 0.85;
+      @apply ax-text-2xl;
     }
     &:hover {
-      opacity: 0.75;
+      @apply ax-opacity-70;
     }
+    &:focus {
+      @apply ax-opacity-80 ax-outline-none;
+    }
+
     &:active {
-      opacity: 1;
+      @apply ax-opacity-100;
     }
   }
 }
@@ -50,13 +38,8 @@ ax-icon {
 }
 
 ax-sub-title {
-  font-weight: 400;
-  font-size: 0.875rem;
-  opacity: 0.75;
+  @apply ax-text-sm ax-font-normal ax-opacity-75;
 }
 ax-form-hint {
-  font-size: 0.875rem;
-  color: rgba(var(--ax-color-text-default), 0.75);
-  margin-top: 0.5rem;
-  display: block;
+  @apply ax-mt-2 ax-block ax-text-sm ax-text-default/75;
 }

package/src/shared/_drop-down.scss

@@ -1,65 +1,38 @@
 @import '../variables/index.scss';
 
 .ax-drop-down {
-  display: contents;
+  @apply ax-contents;
 
   .ax-dropdown-content {
-    display: flex;
-    align-items: center;
-    flex: 1 1 auto;
-    font-size: 0.875rem;
-    overflow-y: hidden;
-    overflow-x: auto;
-    text-transform: capitalize;
+    @apply ax-flex ax-flex-1 ax-items-center ax-overflow-x-auto ax-overflow-y-hidden ax-text-sm ax-capitalize;
+
     &.ax-state-disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+      @apply ax-cursor-not-allowed ax-opacity-50;
     }
   }
 }
 
 .ax-overlay-pane {
-  height: fit-content;
-  background-color: rgba(var(--ax-color-surface));
-  border: 1px solid;
-  border-color: rgba(var(--ax-color-border-default));
-  border-radius: var(--ax-rounded-border-default);
-  box-shadow:
-    0px 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0px 4px 6px -2px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-  margin-top: 0.25rem;
+  @apply ax-mt-1 ax-h-fit ax-overflow-hidden ax-rounded-none ax-border ax-border-default ax-bg-surface ax-shadow-md md:ax-rounded-default;
   ax-header,
   ax-footer {
-    background-color: rgba(var(--ax-color-surface));
-    padding: 0.75rem;
-  }
-
-  @include media('phone') {
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
+    @apply ax-bg-surface ax-p-3;
   }
 
   &.ax-overlay-center {
-    height: fit-content;
-    max-height: 90vh;
-    width: 80vw;
+    @apply ax-h-fit ax-w-[80vw] ax-max-w-[90vh];
   }
 
   &.ax-overlay-actionsheet {
-    background-color: rgba(var(--ax-color-surface));
-    width: 100%;
-    height: auto;
-    max-height: 85vh;
-
+    @apply ax-h-auto ax-max-h-[85vh] ax-w-full ax-bg-surface;
     &.ax-full {
-      max-height: 95vh;
-      height: 95vh;
+      @apply ax-h-[95vh] ax-max-h-[95vh];
     }
   }
 
   &.ax-overlay-full {
     width: 100vw;
     height: 100vh;
+    @apply ax-h-screen ax-w-screen;
   }
 }

package/src/shared/_editor-container.scss

@@ -4,7 +4,7 @@
   .ax-editor-container {
     &.ax-look-fill {
       &.ax-state-error {
-        background-color: rgba(var(--ax-color-danger-500), 0.25);
+        @apply ax-bg-danger-500/25;
       }
 
       // &.ax-state-success {
@@ -14,14 +14,8 @@
   }
 }
 .ax-editor-container {
-  width: 100%;
-  height: var(--ax-size-default);
-  display: flex;
-  align-items: center;
-  color: rgba(var(--ax-color-input-surface-fore));
-  font-size: 0.875rem;
-  overflow: hidden;
-  line-height: 1;
+  @apply ax-flex ax-h-default ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none ax-text-input-surface-fore;
+
   &.ax-look-solid,
   &.ax-look-outline {
     @include solid-look();
@@ -37,103 +31,77 @@
   }
 
   .ax-editor-input {
-    height: 100%;
-    flex: 1;
+    @apply ax-h-full ax-flex-1;
     .ax-input {
-      height: 100%;
+      @apply ax-h-full;
     }
   }
   .ax-input {
-    padding: 0 0.75rem;
-
+    @apply ax-px-3;
     &::placeholder {
-      color: rgba(var(--ax-color-text-default), 0.5);
-      font-weight: 500;
       font-size: inherit;
+      @apply ax-font-normal ax-text-default/50;
     }
   }
 
   &.ax-xs {
     .ax-input {
-      font-size: 0.75rem;
-      line-height: calc(var(--ax-size-base) - 0.75rem);
-      padding: 0.5rem;
+      @apply ax-p-2 ax-text-xs;
     }
   }
   &.ax-sm {
     .ax-input {
-      font-size: 0.875rem;
-      line-height: calc(var(--ax-size-base) - 0.5rem);
-      padding: 0.5rem;
+      @apply ax-p-2 ax-text-sm;
     }
   }
   &.ax-md {
     .ax-input {
-      font-size: 0.875rem;
-      line-height: var(--ax-size-base);
+      @apply ax-text-sm;
     }
   }
   &.ax-lg {
     .ax-input {
-      font-size: 1.125rem;
-      line-height: calc(var(--ax-size-base) + 0.5rem);
+      @apply ax-text-lg;
     }
   }
   &.ax-xl {
     .ax-input {
-      font-size: 1.25rem;
-      line-height: calc(var(--ax-size-base) + 1rem);
+      @apply ax-text-lg;
     }
   }
 
   .ax-editor-control {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // 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;
-    color: rgba(var(--ax-color-text-default));
+    @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-ps-2 ax-text-lg ax-text-input-surface-fore;
   }
 
   &.ax-button-icon {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    @apply ax-px-2;
   }
   .ax-input,
   .ax-text-area {
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    flex: 1 1 0%;
-    border: none;
     text-align: inherit;
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
-    font-weight: 400;
+    @apply ax-h-full ax-w-full ax-flex-1 ax-bg-transparent ax-font-normal;
 
     &:focus {
-      box-shadow: none;
+      @apply ax-shadow-none;
     }
   }
 
   .ax-text-area {
-    padding: 0.625rem /* 10 */;
+    @apply ax-p-2.5;
   }
   & > ax-prefix {
     *,
     .ax-button,
     ax-title {
-      border-start-start-radius: 0.25rem /* 4px */;
-      border-end-start-radius: 0.25rem;
+      @apply ax-rounded-es ax-rounded-ss;
     }
 
     ax-icon {
-      padding-inline-start: 0.75rem;
+      @apply ax-ps-3;
     }
   }
 
@@ -141,60 +109,48 @@
     *,
     .ax-button,
     ax-title {
-      border-start-end-radius: 0.25rem /* 4px */;
-      border-end-end-radius: 0.25rem;
+      @apply ax-rounded-ee ax-rounded-se;
     }
     ax-icon {
-      padding-inline-end: 0.75rem;
+      @apply ax-pe-3;
     }
   }
 
   & > ax-prefix,
   & > ax-suffix {
-    height: 100%;
+    @apply ax-h-full;
+    + .ax-input {
+      @apply ax-px-0.5 #{!important};
+    }
     * {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 0;
+      @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-rounded-none;
     }
 
     ax-title {
-      padding-left: 1rem /* 16px */;
-      padding-right: 1rem /* 16px */;
+      @apply ax-px-4;
     }
 
     & > ax-text {
-      font-size: 0.875rem;
-      background-color: transparent;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 0.5rem;
-      line-height: 1;
+      @apply ax-flex ax-items-center ax-justify-center ax-bg-transparent ax-px-2 ax-text-sm;
     }
   }
 
   .ax-button {
-    height: 100% !important;
-    border-radius: 0;
+    @apply ax-h-full ax-rounded-none #{!important};
 
     &.ax-button-icon {
-      width: var(--ax-size-default);
-      height: 100%;
+      @apply ax-h-full ax-w-default;
     }
   }
 
   &.ax-state-disabled {
-    opacity: 0.5;
+    @apply ax-cursor-not-allowed ax-opacity-50;
   }
 }
 .ax-ripple {
-  position: absolute;
-  border-radius: 50%;
   transform: scale(0);
   animation: ripple 500ms linear;
+  @apply ax-absolute ax-rounded-full;
   @keyframes ripple {
     to {
       transform: scale(4);