@acorex/styles 19.8.0-next.9 → 19.9.0

package/src/shared/_drop-down.scss

@@ -1,9 +1,11 @@
 @use '../variables/index.scss';
 @use '../mixins/index.scss' as mixins;
 .ax-drop-down {
+  // @apply ax-contents;
   display: contents;
 
   .ax-dropdown-content {
+    // @apply ax-flex ax-flex-1 ax-items-center ax-overflow-x-auto ax-overflow-y-hidden ax-text-sm ax-capitalize;
     display: flex;
     flex: 1 1 0%;
     align-items: center;
@@ -14,6 +16,7 @@
     text-transform: capitalize;
 
     &.ax-state-disabled {
+      // @apply ax-cursor-not-allowed ax-opacity-50;
       cursor: not-allowed;
       opacity: 0.5;
     }
@@ -21,41 +24,46 @@
 }
 
 .ax-overlay-pane {
+  // @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;
   margin: 0.25rem 0;
   min-width: 10rem;
   height: fit-content;
   overflow: hidden;
   border-width: 1px;
-  border-color: rgba(var(--ax-sys-border-color));
-  background-color: rgba(var(--ax-sys-surface-lowest-bg-color));
+  border-color: rgba(var(--ax-color-border-default));
+  background-color: rgba(var(--ax-color-surface));
   --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --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);
-  border-radius: var(--ax-sys-border-radius);
+  border-radius: var(--ax-rounded-border-default);
 
   @include mixins.media('xs') {
     margin: 0;
   }
   ax-header,
   ax-footer {
-    background-color: rgba(var(--ax-sys-surface-bg-color));
+    // @apply ax-bg-surface ax-p-3;
+    background-color: rgba(var(--ax-color-surface));
     padding: 0.75rem /* 12px */;
   }
 
   &.ax-overlay-center {
+    // @apply ax-h-fit ax-w-[80vw] ax-max-w-[90vh];
     height: fit-content;
     width: 80vw;
     max-width: 90vh;
   }
 
   &.ax-overlay-actionsheet {
+    // @apply ax-h-auto ax-max-h-[85vh] ax-w-full ax-bg-surface;
     height: auto;
     max-height: 85vh;
     width: 100%;
-    background-color: rgba(var(--ax-sys-surface-bg-color));
-    border-top-left-radius: var(--ax-sys-border-radius);
-    border-top-right-radius: var(--ax-sys-border-radius);
+    background-color: rgba(var(--ax-color-surface));
+    border-top-left-radius: var(--ax-rounded-border-default);
+    border-top-right-radius: var(--ax-rounded-border-default);
     &.ax-full {
+      // @apply ax-h-[95vh] ax-max-h-[95vh];
       height: 95vh;
       max-height: 95vh;
     }
@@ -64,5 +72,6 @@
   &.ax-overlay-full {
     width: 100vw;
     height: 100vh;
+    // @apply ax-h-screen ax-w-screen;
   }
 }

package/src/shared/_editor-container.scss

@@ -10,32 +10,32 @@
   .ax-editor-container {
     &.ax-look-fill {
       &:focus-within {
-        box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-200));
+        box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-200));
       }
       &.ax-state-error {
-        background-color: rgba(var(--ax-sys-color-danger-200));
-        color: rgba(var(--ax-sys-color-danger-fore));
+        background-color: rgba(var(--ax-color-danger-200));
+        color: rgba(var(--ax-color-danger-fore));
 
         &:focus-within {
-          box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-danger-200));
+          box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-200));
         }
         .ax-input {
           &::placeholder {
-            color: rgba(var(--ax-sys-color-danger-200));
+            color: rgba(var(--ax-color-danger-200));
           }
         }
       }
     }
     &.ax-look-flat {
       &:focus-within {
-        border-color: rgba(var(--ax-sys-color-primary-200));
+        border-color: rgba(var(--ax-color-primary-200));
       }
       &.ax-state-error {
-        border-color: rgba(var(--ax-sys-color-danger-200));
+        border-color: rgba(var(--ax-color-danger-200));
 
         .ax-input {
           &::placeholder {
-            color: rgba(var(--ax-sys-color-danger-200));
+            color: rgba(var(--ax-color-danger-200));
           }
         }
       }
@@ -43,19 +43,19 @@
     &.ax-look-solid,
     &.ax-look-outline {
       &:focus-within {
-        box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-200));
-        border-color: rgba(var(--ax-sys-color-primary-200));
+        box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-200));
+        border-color: rgba(var(--ax-color-primary-200));
       }
 
       &.ax-state-error {
-        border-color: rgba(var(--ax-sys-color-danger-200));
+        border-color: rgba(var(--ax-color-danger-200));
         &:focus-within {
-          box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-danger-200));
-          border-color: rgba(var(--ax-sys-color-danger-200));
+          box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-200));
+          border-color: rgba(var(--ax-color-danger-200));
         }
         .ax-input {
           &::placeholder {
-            color: rgba(var(--ax-sys-color-danger-200));
+            color: rgba(var(--ax-color-danger-200));
           }
         }
       }
@@ -65,12 +65,13 @@
 
 .ax-editor-container {
   display: flex;
-  height: var(--ax-sys-size-base);
+  height: var(--ax-size-default);
   width: 100%;
   align-items: center;
   overflow: hidden;
   font-size: 0.875rem;
-  color: rgba(var(--ax-sys-surface-input-text-color));
+  line-height: 1;
+  color: rgba(var(--ax-color-input-surface-fore));
 
   .ax-editor-container {
     border-radius: 0 !important;
@@ -81,7 +82,7 @@
       box-shadow: none !important;
     }
     &:focus {
-      box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500));
+      box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
     }
   }
 
@@ -124,7 +125,7 @@
     &::placeholder {
       font-size: inherit;
       font-weight: 400;
-      color: rgb(var(--ax-sys-surface-input-text-color), 0.5);
+      color: rgb(var(--ax-color-input-surface-fore), 0.5);
     }
     &:focus,
     &:focus-visible,
@@ -133,6 +134,46 @@
     }
   }
 
+  &.ax-xs {
+    .ax-input {
+      padding: 0 calc(var(--ax-editor-space-size) - 8px);
+      font-size: calc(var(--ax-editor-font-size) - 4px);
+      line-height: 1rem;
+    }
+  }
+
+  &.ax-sm {
+    .ax-input {
+      padding: 0 calc(var(--ax-editor-space-size) - 4px);
+      font-size: calc(var(--ax-editor-font-size) - 2px);
+      line-height: calc(var(--ax-editor-font-size) - 2px);
+    }
+  }
+
+  &.ax-md {
+    .ax-input {
+      padding: 0 calc(var(--ax-editor-space-size) - 4px);
+      font-size: var(--ax-editor-font-size);
+      line-height: var(--ax-editor-font-size);
+    }
+  }
+
+  &.ax-lg {
+    .ax-input {
+      padding: 0 var(--ax-editor-space-size);
+      font-size: calc(var(--ax-editor-font-size) + 2px);
+      line-height: calc(var(--ax-editor-font-size) + 2px);
+    }
+  }
+
+  &.ax-xl {
+    .ax-input {
+      padding: 0 var(--ax-editor-space-size);
+      font-size: calc(var(--ax-editor-font-size) + 4px);
+      line-height: calc(var(--ax-editor-font-size) + 4px);
+    }
+  }
+
   .ax-editor-control {
     display: flex;
     height: 100%;
@@ -141,7 +182,7 @@
     padding-inline-start: 0.5rem;
     font-size: 1.125rem;
     line-height: 1.75rem;
-    color: rgba(var(--ax-sys-surface-input-text-color));
+    color: rgba(var(--ax-color-input-surface-fore));
   }
 
   &.ax-button-icon {
@@ -207,6 +248,7 @@
     }
 
     ax-title {
+      // @apply ax-px-4;
       padding-left: 1rem;
       padding-right: 1rem;
     }
@@ -229,23 +271,21 @@
 
     &.ax-button-icon {
       height: 100%;
-      width: var(--ax-sys-size-base);
+      width: var(--ax-size-default);
     }
   }
 }
 
-// Created new ripple.scss files intead
-
-// .ax-ripple {
-//   transform: scale(0);
-//   animation: ripple 500ms linear;
-//   position: absolute;
-//   border-radius: 9999rem !important;
-
-//   @keyframes ripple {
-//     to {
-//       transform: scale(4);
-//       opacity: 0;
-//     }
-//   }
-// }
+.ax-ripple {
+  transform: scale(0);
+  animation: ripple 500ms linear;
+  position: absolute;
+  border-radius: 9999rem !important;
+
+  @keyframes ripple {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+}

package/src/shared/_general-button.scss

@@ -1,32 +1,32 @@
 .ax-general-button {
   display: inline-flex;
-  height: var(--ax-sys-size-base);
+  height: var(--ax-size-default);
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  border-radius: var(--ax-sys-border-radius);
+  border-radius: var(--ax-rounded-border-default);
   padding-left: 1rem;
   padding-right: 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: rgb(var(--ax-sys-surface-input-text-color), 0.75);
+  color: rgb(var(--ax-color-input-surface-fore), 0.75);
 
   &:hover {
     &:not(&:disabled, .ax-state-disabled) {
-      color: rgba(var(--ax-sys-color-primary-500), var(--tw-text-opacity));
+      color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
     }
   }
 
   &:focus,
   &:focus-visible {
     &:not(&:disabled, .ax-state-disabled) {
-      color: rgba(var(--ax-sys-color-primary-700), var(--tw-text-opacity));
+      color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
     }
   }
 
   &:active {
     &:not(&:disabled, .ax-state-disabled) {
-      color: rgba(var(--ax-sys-color-primary-300), var(--tw-text-opacity));
+      color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
     }
   }
 
@@ -39,7 +39,7 @@
     }
   }
   &.ax-button-rounded {
-    border-radius: var(--ax-sys-border-radius);
+    border-radius: var(--ax-rounded-border-default);
   }
   &:disabled,
   &.ax-state-disabled {
@@ -49,27 +49,28 @@
 }
 .ax-clear-button {
   display: inline-flex;
-  height: var(--ax-sys-size-base);
+  height: var(--ax-size-default);
   align-items: center;
   justify-content: center;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   font-size: 1rem /* 16px */;
   line-height: 1.5rem /* 24px */;
-  color: rgb(var(--ax-sys-body-text-color), 0.75);
+  line-height: 1;
+  color: rgb(var(--ax-color-text-default), 0.75);
 
   > button {
     display: flex;
   }
   &:hover {
     &:not(&:disabled, .ax-state-disabled) {
-      color: rgb(var(--ax-sys-body-text-color), 0.5);
+      color: rgb(var(--ax-color-text-default), 0.5);
     }
   }
   &:focus,
   &:focus-visible {
     &:not(&:disabled, .ax-state-disabled) {
-      color: rgb(var(--ax-sys-body-text-color));
+      color: rgb(var(--ax-color-text-default));
     }
   }
 }

package/src/shared/_inputs.scss

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

package/src/shared/_list.scss

@@ -2,22 +2,24 @@
 @include mixins.darkMode() {
   .ax-list-item {
     &.ax-state-selected {
-      background-color: rgba(var(--ax-sys-color-primary-800)) !important;
-      color: rgba(var(--ax-sys-color-on-primary)) !important;
+      // @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
+      background-color: rgba(var(--ax-color-primary-800)) !important;
+      color: rgba(var(--ax-color-primary-fore)) !important;
 
       // .ax-selected-icon {
-      //
-      //   color: rgba(var(--ax-sys-color-on-primary));
+      //   // @apply ax-text-primary-fore;
+      //   color: rgba(var(--ax-color-primary-fore));
       // }
     }
   }
 }
 .ax-list {
+  // @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
   display: flex;
   height: 100%;
   flex-direction: column;
   overflow: hidden;
-  background-color: rgba(var(--ax-sys-surface-bg-color));
+  background-color: rgba(var(--ax-color-surface));
   font-size: 0.875rem /* 14px */;
   line-height: 1.25rem /* 20px */;
   @include mixins.media('md') {
@@ -25,15 +27,17 @@
   }
   ax-header,
   ax-footer {
+    // @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-color: rgba(var(--ax-sys-border-color), var(--tw-border-opacity));
+    border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
     background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
   }
   ax-header {
+    // @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
     border-bottom-width: 1px;
-    border-color: rgba(var(--ax-sys-border-color), var(--tw-border-opacity));
+    border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
     padding: 1rem /* 16px */;
     font-size: 1rem /* 16px */;
     line-height: 1.5rem /* 24px */;
@@ -44,48 +48,58 @@
     }
     ax-prefix,
     ax-suffix {
+      // @apply ax-flex ax-flex-col ax-justify-items-start;
       display: flex;
       flex-direction: column;
       justify-items: start;
     }
     ax-prefix {
+      // @apply ax-items-start;
       align-items: flex-start;
     }
     ax-suffix {
+      // @apply ax-items-end;
       align-items: flex-end;
     }
   }
 
   ax-footer {
+    // @apply ax-border-t;
     border-top-width: 1px;
   }
 
   .ax-content {
+    // @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
     flex: 1 1 0%;
     overflow-y: auto;
     overflow-x: hidden;
 
     &.ax-list-items-container {
+      // @apply ax-h-full ax-overflow-y-auto ax-py-2;
       height: 100%;
       overflow-y: auto;
       padding-top: 0.5rem /* 8px */;
       padding-bottom: 0.5rem /* 8px */;
 
       &.ax-vertical {
+        // @apply ax-grid ax-grid-cols-1;
         display: grid;
         grid-template-columns: repeat(1, minmax(0, 1fr));
 
         &.ax-divide {
+          // @apply ax-border-y;
           border-top-width: 1px;
           border-bottom-width: 1px;
         }
       }
 
       &.ax-default {
+        // @apply ax-cursor-pointer;
         cursor: pointer;
 
         .ax-list-item-group {
           & > span {
+            // @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
             display: flex;
             align-items: center;
             padding: 0.75rem /* 12px */;
@@ -93,19 +107,22 @@
           }
 
           & > ul {
+            // @apply ax-px-3;
             padding-left: 0.75rem /* 12px */;
             padding-right: 0.75rem /* 12px */;
           }
           .ax-list-item {
+            // @apply ax-mb-1 ax-rounded-default;
             margin-bottom: 0.25rem /* 4px */;
-            border-radius: var(--ax-sys-border-radius);
+            border-radius: var(--ax-rounded-border-default);
           }
         }
 
         .ax-list-item {
+          // @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;
           position: relative;
           display: flex;
-          height: var(--ax-sys-size-base);
+          height: var(--ax-size-default);
           user-select: none;
           align-items: center;
           justify-content: space-between;
@@ -115,23 +132,26 @@
           line-height: 1.5rem /* 24px */;
           &:focus,
           &:focus-visible {
+            // @apply ax-outline-2 ax-outline-offset-2;
             outline-width: 2px;
             outline-offset: 2px;
           }
           &.ax-state-checkbox {
             .ax-checkbox-label {
+              // @apply ax-ms-2;
               margin-inline-start: 0.5rem /* 8px */;
             }
           }
           &.ax-state-selected {
-            background-color: rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;
-            color: rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important;
+            // @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
+            background-color: rgba(var(--ax-color-primary-500), var(--tw-bg-opacity)) !important;
+            color: rgba(var(--ax-color-primary-fore), var(--tw-text-opacity)) !important;
 
             // .ax-selected-icon {
-            //
+            //   // @apply ax-text-2xl ax-text-primary-500;
             //   font-size: 1.5rem /* 24px */;
             //   line-height: 2rem /* 32px */;
-            //   color: rgba(var(--ax-sys-color-primary-500));
+            //   color: rgba(var(--ax-color-primary-500));
             // }
           }
 
@@ -141,21 +161,25 @@
           // }
 
           &.ax-state-disabled {
+            // @apply ax-cursor-not-allowed ax-opacity-50;
             cursor: not-allowed;
             opacity: 0.5;
           }
 
           &:focus-visible,
           &:hover {
-            background-color: rgba(var(--ax-sys-surface-high-bg-color));
+            // @apply ax-bg-on-surface;
+            background-color: rgba(var(--ax-color-on-surface));
           }
           &.ax-state-focus {
-            background-color: rgba(var(--ax-sys-surface-high-bg-color));
+            // @apply ax-bg-on-surface;
+            background-color: rgba(var(--ax-color-on-surface));
           }
         }
       }
 
       .ax-list-loading-container {
+        // @apply ax-flex ax-justify-center ax-p-2;
         display: flex;
         justify-content: center;
         padding: 0.5rem /* 8px */;
@@ -164,9 +188,11 @@
   }
 
   .ax-search-box-container {
+    // @apply ax-p-2;
     padding: 0.5rem /* 8px */;
 
     &.ax-state-hidden {
+      // @apply ax-hidden;
       display: none;
     }
   }

package/src/shared/_radio.scss

@@ -1,6 +1,7 @@
 @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;
   margin: 0px;
   height: 1rem /* 16px */;
   min-height: 1rem /* 16px */;
@@ -10,17 +11,20 @@
   appearance: none;
   border-radius: 9999px /* 4px */;
   border-width: 1px;
-  border-color: rgba(var(--ax-sys-surface-input-border-color));
-  background-color: rgba(var(--ax-sys-surface-input-bg-color));
+  border-color: rgba(var(--ax-color-input-border));
+  background-color: rgba(var(--ax-color-input-surface));
   vertical-align: middle;
   outline: 2px solid transparent;
   outline-offset: 2px;
 
   &:checked {
-    border-color: rgba(var(--ax-sys-color-primary-500)) !important;
-    background-color: rgba(var(--ax-sys-color-primary-500)) !important;
+    // @apply ax-border-primary-500 ax-bg-primary-500 #{!important};
+    border-color: rgba(var(--ax-color-primary-500)) !important;
+    background-color: rgba(var(--ax-color-primary-500)) !important;
     background-size: contain;
     background-repeat: no-repeat;
+
+    // @apply ax-bg-contain ax-bg-no-repeat;
   }
 
   &:checked {
@@ -29,12 +33,14 @@
 
   &:focus-visible,
   &:focus {
+    // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
     box-shadow:
-      0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)),
-      0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
+      0px 0px 0px 2px rgba(var(--ax-color-surface)),
+      0px 0px 0px 4px rgba(var(--ax-color-primary-500));
   }
 
   &:disabled {
+    // @apply ax-cursor-not-allowed ax-opacity-50;
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -43,8 +49,8 @@
 // @include darkMode() {
 //   .ax-checkbox {
 //     &:checked {
-//       border-color: rgba(var(--ax-sys-color-primary-200)) !important;
-//       background-color: rgba(var(--ax-sys-color-primary-200)) !important;
+//       border-color: rgba(var(--ax-color-primary-200)) !important;
+//       background-color: rgba(var(--ax-color-primary-200)) !important;
 //       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 //     }
 //   }