@acorex/styles 7.11.5 → 7.12.0

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-medium 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-w-full ax-flex-1  ax-bg-transparent ax-font-medium;
 
     &: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,45 @@
     *,
     .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;
     * {
-      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);

package/src/shared/_general-button.scss

@@ -1,66 +1,68 @@
 .ax-general-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem;
-  height: var(--ax-size-default);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  color: rgba(var(--ax-color-text-default), 0.6);
-  border-radius: var(--ax-rounded-border-default);
-  &:is(&:hover):not(&:disabled, .ax-state-disabled) {
-    color: rgba(var(--ax-color-primary-500));
+  // display: inline-flex;
+  // align-items: center;
+  // justify-content: center;
+  // padding: 0 1rem;
+  // height: var(--ax-size-default);
+  // font-size: 0.875rem;
+  // cursor: pointer;
+  // transition: background-color 0.3s;
+  // color: rgba(var(--ax-color-text-default), 0.6);
+  // border-radius: var(--ax-rounded-border-default);
+
+  @apply ax-inline-flex ax-h-default ax-cursor-pointer ax-items-center ax-justify-center ax-rounded-default ax-px-4 ax-text-sm ax-text-default;
+
+  &:hover {
+    &:not(&:disabled, .ax-state-disabled) {
+      @apply ax-text-primary-500;
+    }
   }
 
-  &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
-    color: rgba(var(--ax-color-primary-700));
-    // outline-color: transparent;
+  &:focus,
+  &:focus-visible {
+    &:not(&:disabled, .ax-state-disabled) {
+      @apply ax-text-primary-700;
+    }
   }
 
-  &:is(&:active):not(&:disabled, .ax-state-disabled) {
-    background-color: transparent;
+  &:active {
+    &:not(&:disabled, .ax-state-disabled) {
+      @apply ax-text-primary-300;
+    }
   }
 
   &.ax-button-icon {
-    padding: 0 0.5rem;
-    font-size: 1.25rem;
-    // min-width: var(--ax-size-default);
-    // width: var(--ax-size-default);
-    // min-height: 100%;
+    @apply ax-px-2 ax-text-lg;
     > button {
-      display: flex;
+      @apply ax-flex;
     }
     ax-icon {
-      font-size: 1.25rem;
+      @apply ax-text-lg;
     }
   }
   &.ax-button-rounded {
-    border-radius: var(--ax-rounded-border-default);
+    @apply ax-rounded-default;
   }
   &:disabled,
   &.ax-state-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    @apply ax-cursor-not-allowed ax-opacity-50;
   }
 }
 .ax-clear-button {
-  font-size: 1rem;
-  line-height: 1;
-  color: rgba(var(--ax-color-text-default), 0.6);
-  height: var(--ax-size-default);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.5rem;
+  @apply ax-inline-flex ax-h-default ax-items-center ax-justify-center ax-px-2 ax-text-base ax-leading-none ax-text-default;
+
   > button {
-    display: flex;
+    @apply ax-flex;
   }
-  &:is(&:hover):not(&:disabled, .ax-state-disabled) {
-    color: rgba(var(--ax-color-text-default), 0.75);
+  &:hover {
+    &:not(&:disabled, .ax-state-disabled) {
+      @apply ax-text-default/75;
+    }
   }
-  &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
-    color: rgba(var(--ax-color-text-default));
-    // outline-color: transparent;
+  &:focus,
+  &:focus-visible {
+    &:not(&:disabled, .ax-state-disabled) {
+      @apply ax-text-default;
+    }
   }
 }

package/src/shared/_inputs.scss

@@ -1,12 +1,10 @@
 .ax-input {
-    outline: none;
-    padding: 0;
-    font-size: inherit;
-    &:focus {
-        outline-color: transparent;
-    }
-    &.ax-state-disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-    }
+  font-size: inherit;
+  @apply ax-p-0 ax-outline-0;
+  &:focus {
+    @apply ax-outline-transparent;
+  }
+  &.ax-state-disabled {
+    @apply ax-cursor-not-allowed ax-opacity-50;
+  }
 }

package/src/shared/_list.scss

@@ -2,131 +2,83 @@
 @include darkMode() {
   .ax-list-item {
     &.ax-state-selected {
-      background-color: rgba(var(--ax-color-primary-800)) !important;
-      color: rgba(var(--ax-color-primary-fore)) !important;
+      @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
       .ax-selected-icon {
-        color: rgba(var(--ax-color-primary-fore));
+        @apply ax-text-primary-fore;
       }
     }
   }
 }
 .ax-list {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-size: 0.875rem;
-  background-color: rgba(var(--ax-color-surface));
-  height: 100%;
-  @include media('desktop') {
-    max-height: 320px;
-  }
+  @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
 
   ax-header,
   ax-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: rgba(var(--ax-color-surface));
-    border-color: rgba(var(--ax-color-border-default));
+    @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
   }
   ax-header {
-    padding: 1rem;
-    font-size: 1.125rem;
-    font-weight: 500;
-    border-bottom: 1px solid;
-    border-color: rgba(var(--ax-color-border-default));
+    @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
+
     ax-prefix,
     ax-suffix {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
+      @apply ax-flex ax-flex-col ax-justify-items-start;
     }
     ax-prefix {
-      align-items: flex-start;
+      @apply ax-items-start;
     }
     ax-suffix {
-      align-items: flex-end;
-    }
-
-    @include media('phone') {
-      font-size: 1rem;
+      @apply ax-items-end;
     }
   }
 
   ax-footer {
-    border-top: 1px solid;
+    @apply ax-border-t;
   }
 
   .ax-content {
-    flex: 1 1 0%;
-    overflow-y: auto;
-    overflow-x: hidden;
+    @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
 
     &.ax-list-items-container {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-      overflow-y: auto;
-      height: 100%;
-
+      @apply ax-h-full ax-overflow-y-auto ax-py-2;
       &.ax-vertical {
-        display: grid;
-        grid-template-columns: repeat(1, minmax(0, 1fr));
+        @apply ax-grid ax-grid-cols-1;
 
         &.ax-divide {
-          border-top: 1px solid;
-          border-bottom: 1px solid;
+          @apply ax-border-y;
         }
       }
 
       &.ax-default {
-        cursor: pointer;
+        @apply ax-cursor-pointer;
 
         .ax-list-item-group {
           & > span {
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            padding: 0.75rem;
+            @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
           }
 
           & > ul {
-            padding-left: 0.75rem;
-            padding-right: 0.75rem;
+            @apply ax-px-3;
           }
           .ax-list-item {
-            border-radius: var(--ax-rounded-border-default);
-            margin-bottom: 0.2rem;
+            @apply ax-mb-1 ax-rounded-default;
           }
         }
 
         .ax-list-item {
-          padding-inline-start: 0.75rem;
-          padding-inline-end: 1rem;
-          position: relative;
-          height: var(--ax-size-default);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          user-select: none;
-          @include media('phone') {
-            font-size: 1rem;
-          }
+          @apply ax-relative ax-flex ax-h-default ax-select-none ax-items-center ax-justify-between ax-pe-4 ax-ps-3 ax-text-base;
           &:focus,
           &:focus-visible {
-            outline: 2px solid transparent;
-            outline-offset: 2px;
+            @apply ax-outline-2 ax-outline-offset-2;
           }
           &.ax-state-checkbox {
             .ax-checkbox-label {
-              margin-inline-start: 0.5rem;
+              @apply ax-ms-2;
             }
           }
           &.ax-state-selected {
-            background-color: rgba(var(--ax-color-primary-500)) !important;
-            color: rgba(var(--ax-color-primary-fore)) !important;
+            @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
             .ax-selected-icon {
-              color: rgba(var(--ax-color-primary-500));
-              font-size: 1.5rem;
+              @apply ax-text-2xl ax-text-primary-500;
             }
           }
 
@@ -136,33 +88,30 @@
           // }
 
           &.ax-state-disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
+            @apply ax-cursor-not-allowed ax-opacity-50;
           }
 
           &:focus-visible,
           &:hover {
-            background-color: rgba(var(--ax-color-on-surface));
+            @apply ax-bg-on-surface;
           }
           &.ax-state-focus {
-            background-color: rgba(var(--ax-color-on-surface));
+            @apply ax-bg-on-surface;
           }
         }
       }
 
       .ax-list-loading-container {
-        display: flex;
-        justify-content: center;
-        padding: 0.5rem;
+        @apply ax-flex ax-justify-center ax-p-2;
       }
     }
   }
 
   .ax-search-box-container {
-    padding: 0.5rem;
+    @apply ax-p-2;
 
     &.ax-state-hidden {
-      display: none;
+      @apply ax-hidden;
     }
   }
   ax-footer {

package/src/shared/_radio.scss

@@ -1,49 +1,20 @@
 @import '../mixins/index.scss';
-// @include darkMode() {
-//   .ax-radio {
-//     background-color: rgba(var(--ax-color-default));
-//   }
-// }
+
 .ax-radio {
-  width: 1.125rem;
-  height: 1.125rem;
-  border: 1px solid;
-  border-color: rgba(var(--ax-color-border-default));
-  border-radius: 99rem;
-  background-color: rgba(var(--ax-color-input-surface));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  vertical-align: middle;
-  appearance: none;
+  @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded-full ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;
 
   &:checked {
-    border-color: rgba(var(--ax-color-primary-500));
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-    background-color: rgba(var(--ax-color-primary-500));
-    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;
   }
 
-  &: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;
   }
 
   &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    @apply ax-cursor-not-allowed ax-opacity-50;
   }
 }
-// @include darkMode() {
-//   .ax-radio {
-//     &:checked {
-//       border-color: rgba(var(--ax-color-primary-200));
-//       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-//       background-color: rgba(var(--ax-color-primary-200));
-//       background-repeat: no-repeat;
-//       background-size: contain;
-//     }
-//   }
-// }