@acorex/styles 21.0.0-next.16 → 21.0.0-next.17

package/components/{_drop-down.css → _drop-down.scss}

@@ -1,16 +1,18 @@
+@use '../variables/index.scss';
+@use '../mixins/' as mixins;
 .ax-drop-down {
   display: contents;
+
   .ax-dropdown-content {
     display: flex;
     flex: 1 1 0%;
     align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
-    font-size: 0.875rem;
-    /* 14px */
-    line-height: 1.25rem;
-    /* 20px */
+    font-size: 0.875rem /* 14px */;
+    line-height: 1.25rem /* 20px */;
     text-transform: capitalize;
+
     &.ax-state-disabled {
       cursor: not-allowed;
       opacity: 0.5;
@@ -27,27 +29,28 @@
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
   background-color: rgba(var(--ax-sys-color-lightest-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 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
+  --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-top-left-radius: var(--ax-comp-drop-down-border-top-left-radius, var(--ax-sys-border-radius));
   border-top-right-radius: var(--ax-comp-drop-down-border-top-right-radius, var(--ax-sys-border-radius));
   border-bottom-left-radius: var(--ax-comp-drop-down-border-bottom-left-radius, var(--ax-sys-border-radius));
   border-bottom-right-radius: var(--ax-comp-drop-down-border-bottom-right-radius, var(--ax-sys-border-radius));
-  /* Replace the @include mixin with a normal media query */
+  @include mixins.media('xs') {
+    margin: 0;
+  }
   ax-header,
   ax-footer {
     background-color: rgba(var(--ax-sys-color-lightest-surface));
-    padding: 0.75rem;
-    /* 12px */
+    padding: 0.75rem /* 12px */;
   }
+
   &.ax-overlay-center {
     height: fit-content;
     width: 80vw;
     max-width: 90vh;
   }
+
   &.ax-overlay-actionsheet {
     height: auto;
     max-height: 85vh;
@@ -58,18 +61,14 @@
       max-height: 95vh;
     }
   }
+
   &.ax-overlay-full {
     width: 100vw;
     height: 100vh;
   }
 }
-@media (max-width: 480px) {
-  .ax-overlay-pane {
-    margin: 0;
-  }
-}
 
-.dark {
+@include mixins.darkMode() {
   .ax-overlay-pane {
     background-color: rgba(var(--ax-sys-color-darker-surface));
     border-color: rgba(var(--ax-sys-color-border-darker-surface));

package/components/_editor-container.scss

@@ -0,0 +1,293 @@
+@use '../mixins/index.scss' as mixin;
+
+:root,
+.ax-editor-container {
+  --ax-comp-editor-font-size: 0.875rem;
+  --ax-comp-editor-gap: 0.5rem;
+  --ax-comp-editor-space-start-size: 0.5rem;
+  --ax-comp-editor-space-end-size: 0.5rem;
+  --ax-comp-editor-space-block-size: 0.5rem;
+  --ax-comp-editor-height: var(--ax-sys-size-base);
+  --ax-comp-editor-placeholder-space-x: 0.75rem;
+
+  --ax-comp-editor-error-bg-color: var(--ax-sys-color-danger-light-surface);
+  --ax-comp-editor-error-text-color: var(--ax-sys-color-danger-surface);
+  --ax-comp-editor-error-border-color: var(--ax-sys-color-border-danger-surface);
+  --ax-comp-editor-error-box-shadow-color: var(--ax-sys-color-danger-surface);
+
+  --ax-comp-editor-text-color: var(--ax-sys-color-on-surface);
+  --ax-comp-editor-border-color: var(--ax-sys-color-border-surface);
+  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
+  --ax-comp-editor-box-outline-width: 1px;
+  --ax-comp-editor-box-outline-color: var(--ax-sys-color-primary-surface);
+  --ax-comp-editor-placeholder-opacity: 0.5;
+
+  --ax-comp-editor-focused-border-color: var(--ax-sys-color-border-primary-surface);
+  --ax-comp-editor-focused-box-shadow-color: var(--ax-sys-color-primary-surface);
+
+  --ax-comp-editor-border-width: 0px;
+}
+
+.ax-editor-container {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  height: var(--ax-comp-editor-height);
+  font-size: var(--ax-comp-editor-font-size);
+  border-radius: var(--ax-comp-editor-border-radius);
+  border-width: var(--ax-comp-editor-border-width);
+  border-color: rgba(var(--ax-comp-editor-border-color));
+  background-color: rgba(var(--ax-comp-editor-bg-color));
+  color: rgba(var(--ax-comp-editor-text-color));
+  position: relative;
+  gap: var(--ax-comp-editor-gap);
+  padding-inline-end: var(--ax-comp-editor-space-end-size);
+  padding-inline-start: var(--ax-comp-editor-space-start-size);
+  justify-content: space-between;
+  .ax-icon {
+    font-size: var(--ax-comp-editor-icon-font-size);
+  }
+
+  &:has(> ax-prefix) {
+    padding-inline-start: 0;
+    > ax-prefix {
+      &:has(ax-button, .ax-editor-container) {
+        --ax-comp-editor-space-start-size: 0px;
+      }
+      padding-inline-start: var(--ax-comp-editor-space-start-size);
+    }
+  }
+
+  &:has(> ax-suffix) {
+    padding-inline-end: 0;
+    > ax-suffix {
+      &:has(ax-button, .ax-editor-container) {
+        --ax-comp-editor-space-end-size: 0px;
+      }
+      padding-inline-end: var(--ax-comp-editor-space-end-size);
+    }
+  }
+
+  &:not(.ax-state-disabled) {
+    &:focus-within {
+      border-color: rgba(var(--ax-comp-editor-focused-border-color));
+      outline-width: var(--ax-comp-editor-box-outline-width);
+      outline-style: solid;
+      outline-color: rgba(var(--ax-comp-editor-focused-border-color));
+    }
+  }
+
+  &.ax-state-error {
+    border-color: rgba(var(--ax-comp-editor-error-border-color));
+    outline-width: var(--ax-comp-editor-box-outline-width);
+    outline-color: rgba(var(--ax-comp-editor-error-border-color));
+    outline-style: solid;
+    &:focus-within {
+      border-color: rgba(var(--ax-comp-editor-error-border-color));
+    }
+    .ax-input {
+      .ax-placeholder,
+      &::placeholder {
+        color: rgba(var(--ax-comp-editor-error-text-color), var(--ax-comp-editor-placeholder-opacity));
+      }
+    }
+  }
+
+  &.ax-solid {
+    @include mixin.solid-look();
+  }
+  &.ax-outline {
+    @include mixin.outline-look();
+  }
+
+  &.ax-flat {
+    @include mixin.flat-look();
+  }
+
+  &.ax-fill {
+    @include mixin.fill-look();
+  }
+  &.ax-none {
+    @include mixin.none-look();
+  }
+
+  .ax-editor-input {
+    height: 100%;
+    flex: 1 1 0%;
+
+    .ax-input {
+      height: 100%;
+    }
+  }
+
+  // .ax-editor,
+  // .ax-input {
+  //   padding-inline-start: var(--ax-comp-editor-space-start-size);
+  //   padding-inline-end: var(--ax-comp-editor-space-end-size);
+  // }
+  .ax-input {
+    // padding: 0 calc(var(--ax-comp-editor-font-size) - 4px);
+    font-size: var(--ax-comp-editor-font-size);
+    line-height: var(--ax-comp-editor-font-size);
+    color: rgba(var(--ax-comp-editor-text-color));
+    cursor: inherit;
+    .ax-placeholder,
+    &::placeholder {
+      font-size: inherit;
+      font-weight: 400;
+      color: rgb(var(--ax-comp-editor-text-color), var(--ax-comp-editor-placeholder-opacity));
+    }
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+      outline: none;
+    }
+  }
+
+  &.ax-state-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ax-editor-control {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: 0.5rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    color: rgba(var(--ax-comp-editor-text-color));
+  }
+
+  &.ax-button-icon {
+    padding: 0 0.5rem;
+  }
+
+  .ax-input,
+  .ax-text-area {
+    text-align: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    height: 100%;
+    width: 100%;
+    flex: 1 1 0%;
+    background-color: transparent;
+    font-weight: inherit;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .ax-editor-button {
+    font-size: var(--ax-comp-editor-button-font-size, var(--ax-comp-editor-font-size));
+    height: var(--ax-comp-editor-button-height, 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+  }
+
+  // .ax-editor-button,
+  // .ax-clear-button {
+  //   padding-inline-end: var(--ax-comp-editor-space-end-size);
+  // }
+
+  & > ax-prefix,
+  & > ax-suffix {
+    height: 100%;
+    max-width: fit-content;
+
+    ax-button,
+    ax-text,
+    ax-icon,
+    .ax-editor-container {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0px;
+    }
+
+    ax-title {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    & > ax-text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .ax-button {
+    height: 100% !important;
+    border-radius: 0px !important;
+
+    &.ax-button-icon {
+      height: 100%;
+      width: var(--ax-comp-editor-height);
+    }
+  }
+
+  ax-popover {
+    position: absolute;
+  }
+}
+
+.ax-xs .ax-editor-container,
+.ax-editor-container.ax-xs {
+  --ax-comp-editor-font-size: 0.75rem;
+  --ax-comp-editor-space-start-size: 0.25rem;
+  --ax-comp-editor-space-end-size: 0.25rem;
+  --ax-comp-editor-button-font-size: 0.625rem;
+  --ax-comp-editor-gap: 0.25rem;
+  --ax-comp-editor-icon-font-size: 0.75rem;
+}
+.ax-sm .ax-editor-container,
+.ax-editor-container.ax-sm {
+  --ax-comp-editor-font-size: 0.875rem;
+  --ax-comp-editor-space-start-size: 0.5rem;
+  --ax-comp-editor-space-end-size: 0.5rem;
+  --ax-comp-editor-button-font-size: 0.75rem;
+  --ax-comp-editor-gap: 0.375rem;
+  --ax-comp-editor-icon-font-size: 0.875rem;
+}
+
+.ax-md .ax-editor-container,
+.ax-editor-container,
+.ax-editor-container.ax-md {
+  --ax-comp-editor-space-start-size: 0.75rem;
+  --ax-comp-editor-space-end-size: 0.75rem;
+  --ax-comp-editor-button-font-size: 0.875rem;
+  --ax-comp-editor-gap: 0.5rem;
+  --ax-comp-editor-icon-font-size: 1rem;
+}
+
+.ax-lg .ax-editor-container,
+.ax-editor-container.ax-lg {
+  --ax-comp-editor-font-size: 1.125rem;
+  --ax-comp-editor-space-start-size: 1.125rem;
+  --ax-comp-editor-space-end-size: 1.125rem;
+  --ax-comp-editor-button-font-size: 0.875rem;
+  --ax-comp-editor-gap: 0.625rem;
+  --ax-comp-editor-icon-font-size: 1.25rem;
+}
+
+.ax-xl .ax-editor-container,
+.ax-editor-container.ax-xl {
+  --ax-comp-editor-font-size: 1.5rem;
+  --ax-comp-editor-space-start-size: 1.5rem;
+  --ax-comp-editor-space-end-size: 1.5rem;
+  --ax-comp-editor-button-font-size: 1rem;
+  --ax-comp-editor-gap: 0.75rem;
+  --ax-comp-editor-icon-font-size: 1.5rem;
+}
+
+ax-validation-rule {
+  position: absolute;
+}

package/components/{_general-button.css → _general-button.scss}

@@ -10,22 +10,26 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: rgb(var(--ax-sys-color-on-surface), 0.75);
+
   &:hover {
     &:not(&:disabled, .ax-state-disabled) {
       color: rgba(var(--ax-sys-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));
     }
   }
+
   &:active {
     &:not(&:disabled, .ax-state-disabled) {
       color: rgba(var(--ax-sys-color-primary-300), var(--tw-text-opacity));
     }
   }
+
   &.ax-button-icon {
     padding-left: var(--ax-comp-general-button-padding-left, 0.5rem);
     padding-right: var(--ax-comp-general-button-padding-right, 0.5rem);
@@ -43,7 +47,6 @@
     opacity: 0.5;
   }
 }
-
 .ax-clear-button {
   display: inline-flex;
   height: var(--ax-sys-size-base);
@@ -51,9 +54,10 @@
   justify-content: center;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
   color: rgb(var(--ax-sys-color-on-surface), 0.75);
+
   > button {
     display: flex;
   }

package/components/{_list.css → _list.scss}

@@ -1,22 +1,27 @@
-.dark {
+@use '../mixins/index.scss' as mixins;
+@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;
+
+      // .ax-selected-icon {
+      //
+      //   color: rgba(var(--ax-sys-color-on-primary));
+      // }
     }
   }
 }
-
 .ax-list {
   display: flex;
   height: 100%;
   flex-direction: column;
   overflow: hidden;
   background-color: rgba(var(--ax-sys-color-surface));
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  .ax-md {
-    max-height: 20rem;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  @include mixins.media('md') {
+    max-height: 20rem /* 320px */;
   }
   ax-header,
   ax-footer {
@@ -29,13 +34,13 @@
   ax-header {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface), var(--tw-border-opacity));
-    padding: 1rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
+    padding: 1rem /* 16px */;
+    font-size: 1rem /* 16px */;
+    line-height: 1.5rem /* 24px */;
     font-weight: 500;
-    .ax-md {
-      font-size: 1.125rem;
-      line-height: 1.75rem;
+    @include mixins.media('md') {
+      font-size: 1.125rem /* 18px */;
+      line-height: 1.75rem /* 28px */;
     }
     ax-prefix,
     ax-suffix {
@@ -50,44 +55,53 @@
       align-items: flex-end;
     }
   }
+
   ax-footer {
     border-top-width: 1px;
   }
+
   .ax-content {
     flex: 1 1 0%;
     overflow-y: auto;
     overflow-x: hidden;
+
     &.ax-list-items-container {
       height: 100%;
       overflow-y: auto;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
+      padding-top: 0.5rem /* 8px */;
+      padding-bottom: 0.5rem /* 8px */;
+
       &.ax-vertical {
         display: grid;
         grid-template-columns: repeat(1, minmax(0, 1fr));
+
         &.ax-divide {
           border-top-width: 1px;
           border-bottom-width: 1px;
         }
       }
+
       &.ax-default {
         cursor: pointer;
+
         .ax-list-item-group {
           & > span {
             display: flex;
             align-items: center;
-            padding: 0.75rem;
+            padding: 0.75rem /* 12px */;
             font-weight: 500;
           }
+
           & > ul {
-            padding-left: 0.75rem;
-            padding-right: 0.75rem;
+            padding-left: 0.75rem /* 12px */;
+            padding-right: 0.75rem /* 12px */;
           }
           .ax-list-item {
-            margin-bottom: 0.25rem;
+            margin-bottom: 0.25rem /* 4px */;
             border-radius: var(--ax-sys-border-radius);
           }
         }
+
         .ax-list-item {
           position: relative;
           display: flex;
@@ -95,10 +109,10 @@
           user-select: none;
           align-items: center;
           justify-content: space-between;
-          padding-inline-end: 1rem;
-          padding-inline-start: 0.75rem;
-          font-size: 1rem;
-          line-height: 1.5rem;
+          padding-inline-end: 1rem /* 16px */;
+          padding-inline-start: 0.75rem /* 12px */;
+          font-size: 1rem /* 16px */;
+          line-height: 1.5rem /* 24px */;
           &:focus,
           &:focus-visible {
             outline-width: 2px;
@@ -106,17 +120,31 @@
           }
           &.ax-state-checkbox {
             .ax-checkbox-label {
-              margin-inline-start: 0.5rem;
+              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;
+
+            // .ax-selected-icon {
+            //
+            //   font-size: 1.5rem /* 24px */;
+            //   line-height: 2rem /* 32px */;
+            //   color: rgba(var(--ax-sys-color-primary-500));
+            // }
           }
+
+          // &:not(.ax-check-box) {
+          //     &.ax-state-selected {
+          //     }
+          // }
+
           &.ax-state-disabled {
             cursor: not-allowed;
             opacity: 0.5;
           }
+
           &:focus-visible,
           &:hover {
             background-color: rgba(var(--ax-sys-color-surface));
@@ -126,15 +154,18 @@
           }
         }
       }
+
       .ax-list-loading-container {
         display: flex;
         justify-content: center;
-        padding: 0.5rem;
+        padding: 0.5rem /* 8px */;
       }
     }
   }
+
   .ax-search-box-container {
-    padding: 0.5rem;
+    padding: 0.5rem /* 8px */;
+
     &.ax-state-hidden {
       display: none;
     }

package/components/_radio.scss

@@ -0,0 +1,51 @@
+@use '../mixins/index.scss';
+
+.ax-radio {
+  margin: 0px;
+  height: 1rem /* 16px */;
+  min-height: 1rem /* 16px */;
+  min-width: 1rem /* 16px */;
+  width: 1rem /* 16px */;
+  cursor: pointer;
+  appearance: none;
+  border-radius: 9999px /* 4px */;
+  border-width: 1px;
+  border-color: rgba(var(--ax-sys-color-border-surface));
+  background-color: rgba(var(--ax-sys-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;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  &:checked {
+    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");
+  }
+
+  &:focus-visible,
+  &:focus {
+    box-shadow:
+      0px 0px 0px 2px rgba(var(--ax-sys-color-surface)),
+      0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+// @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;
+//       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.css → _ripple.scss}

@@ -1,13 +1,13 @@
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
 .ax-ripple {
-  position: absolute;
   transform: scale(0);
   animation: ripple 500ms linear;
+  position: absolute;
   border-radius: 9999rem !important;
+
+  @keyframes ripple {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
 }