@acorex/styles 19.10.0-next.1 → 19.10.0-next.2

package/{src/shared → components}/_radio.scss

@@ -1,7 +1,6 @@
 @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 */;
@@ -11,20 +10,17 @@
   appearance: none;
   border-radius: 9999px /* 4px */;
   border-width: 1px;
-  border-color: rgba(var(--ax-color-input-border));
-  background-color: rgba(var(--ax-color-input-surface));
+  border-color: rgba(var(--ax-sys-color-input-surface-border));
+  background-color: rgba(var(--ax-sys-color-input-surface));
   vertical-align: middle;
   outline: 2px solid transparent;
   outline-offset: 2px;
 
   &:checked {
-    // @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;
+    border-color: rgba(var(--ax-sys-color-primary-500)) !important;
+    background-color: rgba(var(--ax-sys-color-primary-500)) !important;
     background-size: contain;
     background-repeat: no-repeat;
-
-    // @apply ax-bg-contain ax-bg-no-repeat;
   }
 
   &:checked {
@@ -33,14 +29,12 @@
 
   &: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-color-surface)),
-      0px 0px 0px 4px rgba(var(--ax-color-primary-500));
+      0px 0px 0px 2px rgba(var(--ax-sys-color-surface)),
+      0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
   }
 
   &:disabled {
-    // @apply ax-cursor-not-allowed ax-opacity-50;
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -49,8 +43,8 @@
 // @include darkMode() {
 //   .ax-checkbox {
 //     &:checked {
-//       border-color: rgba(var(--ax-color-primary-200)) !important;
-//       background-color: rgba(var(--ax-color-primary-200)) !important;
+//       border-color: rgba(var(--ax-sys-color-primary-200)) !important;
+//       background-color: rgba(var(--ax-sys-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");
 //     }
 //   }

package/components/_ripple.scss

@@ -0,0 +1,13 @@
+.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 → components}/_table.scss

@@ -2,39 +2,34 @@
 @include mixins.darkMode() {
   .ax-table {
     thead {
-      // @apply ax-bg-on-surface;
-      background-color: rgba(var(--ax-color-on-surface));
+      background-color: rgba(var(--ax-sys-color-surface-high));
     }
   }
 }
 .ax-table {
-  // @apply ax-w-full ax-border-collapse ax-border-spacing-0 ax-overflow-hidden ax-rounded-default ax-border ax-border-default ax-text-sm;
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   overflow: hidden;
-  border-radius: var(--ax-rounded-border-default);
+  border-radius: var(--ax-sys-border-radius);
   border-width: 1px;
-  border-color: rgba(var(--ax-color-border-default));
+  border-color: rgba(var(--ax-sys-border-color));
   font-size: 0.875rem /* 14px */;
   line-height: 1.25rem /* 20px */;
   td {
-    // @apply ax-border-b ax-border-default ax-px-4 ax-py-3;
     border-bottom-width: 1px;
-    border-color: rgba(var(--ax-color-border-default));
+    border-color: rgba(var(--ax-sys-border-color));
     padding-left: 1rem /* 16px */;
     padding-right: 1rem /* 16px */;
     padding-top: 0.75rem /* 12px */;
     padding-bottom: 0.75rem /* 12px */;
   }
   thead {
-    // @apply ax-border-b ax-border-default ax-bg-on-surface;
     border-bottom-width: 1px;
-    border-color: rgba(var(--ax-color-border-default));
-    background-color: rgba(var(--ax-color-on-surface));
+    border-color: rgba(var(--ax-sys-border-color));
+    background-color: rgba(var(--ax-sys-color-surface-high));
 
     th {
-      // @apply ax-px-4 ax-py-3.5 ax-text-start ax-font-medium ax-uppercase;
       padding-left: 1rem /* 16px */;
       padding-right: 1rem /* 16px */;
       padding-top: 0.875rem /* 14px */;
@@ -48,8 +43,7 @@
     tbody {
       tr {
         &:nth-child(even) {
-          // @apply ax-bg-on-surface;
-          background-color: rgba(var(--ax-color-on-surface));
+          background-color: rgba(var(--ax-sys-color-surface-high));
         }
       }
     }
@@ -57,7 +51,6 @@
   &.ax-table-bordered {
     thead {
       th {
-        // @apply ax-border-t-0 #{!important};
         border-top-width: 0px !important;
       }
     }
@@ -65,13 +58,11 @@
       tr {
         &:last-child {
           td {
-            // @apply ax-border-b-0 #{!important};
             border-bottom-width: 0px !important;
           }
         }
         td {
           &:last-child {
-            // @apply ax-border-b-0 #{!important};
             border-bottom-width: 0px !important;
           }
         }
@@ -80,37 +71,30 @@
 
     td,
     th {
-      // @apply ax-border ax-border-default;
       border-width: 1px;
-      border-color: rgba(var(--ax-color-border-default));
+      border-color: rgba(var(--ax-sys-border-color));
 
       &:first-child {
-        // @apply ax-border-s-0;
         border-inline-start-width: 0px;
       }
       &:last-child {
-        // @apply ax-border-e-0;
         border-inline-end-width: 0px;
       }
     }
   }
   @include mixins.mediaLessThan('xs') {
     &.ax-table-responsive {
-      // @apply ax-block ax-break-words ax-border-0;
       display: block;
       overflow-wrap: break-word;
       border-width: 0px;
 
       thead {
-        // @apply ax-absolute -ax-start-full -ax-top-full;
         position: absolute;
         inset-inline-start: -100%;
         top: -100%;
       }
 
       td {
-        // @apply ax-clear-both ax-box-border ax-block ax-w-full ax-px-2.5 ax-py-1.5;
-
         float: inline-start;
         clear: both;
         box-sizing: border-box;
@@ -121,25 +105,20 @@
         padding-top: 0.375rem /* 6px */;
         padding-bottom: 0.375rem /* 6px */;
         &:last-child {
-          // @apply ax-border-0;
           border-width: 0px;
         }
         &:before {
-          // @apply ax-block ax-font-bold;
-
           content: attr(data-label);
           display: block;
           font-weight: 700;
         }
       }
       tr {
-        // @apply ax-border ax-border-default;
         border-width: 1px;
-        border-color: rgba(var(--ax-color-border-default));
+        border-color: rgba(var(--ax-sys-border-color));
       }
       tr,
       tbody {
-        // @apply ax-mb-2.5 ax-block ax-w-full;
         float: inline-start;
         margin-bottom: 0.625rem /* 10px */;
         width: 100%;

package/components/_uploader.scss

@@ -0,0 +1,44 @@
+@use '../mixins/index.scss' as mixin;
+.ax-uploader-overlay-state {
+  border-radius: inherit;
+  pointer-events: none;
+  position: absolute;
+  inset-inline-start: 0px;
+  top: 0px;
+  z-index: 10;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem /* 8px */;
+  background-color: rgba(var(--ax-sys-color-primary-200), 0.75);
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: rgba(var(--ax-sys-color-on-primary-tint));
+  outline-style: dashed;
+  outline-offset: -4px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.ax-drop-zone {
+  > input {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+@include mixin.darkMode() {
+  .ax-uploader-overlay-state {
+    background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
+    color: rgba(var(--ax-sys-color-on-primary));
+    outline-color: rgba(var(--ax-sys-color-on-primary));
+  }
+}

package/{src/shared → components}/index.scss

@@ -1,12 +1,11 @@
 @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 './ripple';
 @forward './table';
-@forward './utils';
+@forward './uploader';

package/icons/fontawesome/index.scss

@@ -1,33 +1,32 @@
 @use './variables';
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
   font-style: normal;
   font-variant: normal;
-  line-height: 1;
   text-rendering: auto;
   font-family: 'Font Awesome 6 Pro';
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  font-weight: var(--ax-icon-weight, 400);
-  font-size: var(--ax-icon-size, 100%);
+  width: var(--ax-sys-icon-width, inherit);
+  height: var(--ax-sys-icon-height, inherit);
+  font-weight: var(--ax-sys-icon-weight, 400);
+  font-size: var(--ax-sys-icon-size, 100%);
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-bulk/index.scss

@@ -13,16 +13,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-duotone/index.scss

@@ -14,16 +14,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-solid-sharp/index.scss

@@ -13,16 +13,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-solid-standard/index.scss

@@ -13,16 +13,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-stroke-rounded/index.scss

@@ -13,16 +13,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-stroke-sharp/index.scss

@@ -13,16 +13,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-stroke-standard/index.scss

@@ -13,16 +13,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/huge/huge-twotone/index.scss

@@ -13,16 +13,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/icons/material/index.scss

@@ -5,7 +5,6 @@
   font-style: normal;
   font-size: 24px; /* Preferred icon size */
   display: inline-block;
-  line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
@@ -22,16 +21,16 @@
 }
 
 .ax-icon-thin {
-  --ax-icon-weight: 100;
+  --ax-sys-icon-weight: 100;
 }
 .ax-icon-light {
-  --ax-icon-weight: 300;
+  --ax-sys-icon-weight: 300;
 }
 .ax-icon-regular {
-  --ax-icon-weight: 400;
+  --ax-sys-icon-weight: 400;
 }
 .ax-icon-solid {
-  --ax-icon-weight: 900;
+  --ax-sys-icon-weight: 900;
 }
 
 .ax-icon-more-horizontal {

package/index.scss

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

package/mixins/_look.scss

@@ -0,0 +1,68 @@
+@mixin solid-look() {
+  border-radius: var(--ax-sys-border-radius);
+  border-width: 1px;
+  border-color: rgba(var(--ax-sys-color-input-surface-border));
+  background-color: rgba(var(--ax-sys-color-input-surface));
+
+  &:focus-within {
+    box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500));
+    border-color: rgba(var(--ax-sys-color-primary-500));
+  }
+
+  &.ax-state-error {
+    border-color: rgba(var(--ax-sys-color-danger-500));
+    &:focus-within {
+      box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-danger-500));
+      border-color: rgba(var(--ax-sys-color-danger-500));
+    }
+    .ax-input {
+      &::placeholder {
+        color: rgba(var(--ax-sys-color-danger-500));
+      }
+    }
+  }
+}
+@mixin flat-look() {
+  border-radius: 0px;
+  border-bottom-width: 1px;
+  border-color: rgba(var(--ax-sys-color-input-surface-border));
+
+  &:focus-within {
+    border-color: rgba(var(--ax-sys-color-primary-500));
+  }
+  &.ax-state-error {
+    border-color: rgba(var(--ax-sys-color-danger-500));
+
+    .ax-input {
+      &::placeholder {
+        color: rgba(var(--ax-sys-color-danger-500));
+      }
+    }
+  }
+}
+
+@mixin outline-look() {
+  background-color: transparent !important;
+}
+
+@mixin fill-look() {
+  border-radius: var(--ax-sys-border-radius);
+  background-color: rgba(var(--ax-sys-color-surface-high));
+
+  &:focus-within {
+    box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500));
+  }
+  &.ax-state-error {
+    background-color: rgba(var(--ax-sys-color-danger-50));
+    color: rgba(var(--ax-sys-color-danger-fore-tint));
+
+    &:focus-within {
+      box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-danger-500));
+    }
+    .ax-input {
+      &::placeholder {
+        color: rgba(var(--ax-sys-color-danger-500));
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "19.10.0-next.1",
+  "version": "19.10.0-next.2",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",