@acorex/styles 21.0.0-next.6 → 21.0.0-next.7

package/components/{_action-item.scss → _action-item.css}

@@ -11,17 +11,12 @@
       border-inline-end: 1px solid rgba(var(--ax-sys-color-border-lightest-surface));
     }
   }
+
   &.ax-action-list-vertical {
     flex-direction: column;
 
-    .ax-action-item {
-      & > div {
-        &.ax-action-item-prefix {
-          ax-prefix {
-            min-width: 1rem;
-          }
-        }
-      }
+    .ax-action-item>div.ax-action-item-prefix ax-prefix {
+      min-width: 1rem;
     }
 
     ax-divider {
@@ -38,10 +33,8 @@
     font-weight: bolder;
     text-transform: uppercase;
     padding-block: var(--ax-comp-action-item-padding-block, 0.25rem);
-    padding-inline: var(
-      --ax-comp-action-item-padding-inline,
-      calc(var(--ax-comp-action-item-padding-inline, 0.875rem) / 3 * 2)
-    );
+    padding-inline: var(--ax-comp-action-item-padding-inline,
+        calc(var(--ax-comp-action-item-padding-inline, 0.875rem) / 3 * 2));
   }
 
   ax-divider {
@@ -63,25 +56,26 @@
     width: 100%;
     cursor: pointer;
     padding-inline: var(--ax-comp-action-item-padding-inline, 0.875rem);
+
     &.ax-state-disabled {
       cursor: not-allowed;
       opacity: 0.5;
     }
 
-    &:hover {
-      &:not(&.ax-state-disabled, &.ax-state-selected) {
-        background-color: rgba(var(--ax-sys-color-surface));
-        ax-prefix,
-        ax-suffix {
-          opacity: 1;
-        }
+    &:hover:not(.ax-state-disabled, .ax-state-selected) {
+      background-color: rgba(var(--ax-sys-color-surface));
+
+      ax-prefix,
+      ax-suffix {
+        opacity: 1;
       }
     }
 
-    & > div {
+    &>div {
       display: flex;
       align-items: center;
       justify-content: center;
+
       &.ax-action-item-prefix,
       &.ax-action-item-suffix {
         gap: 0.5rem;
@@ -93,12 +87,10 @@
       gap: 0.5rem;
     }
 
-    ax-suffix {
-      ax-text {
-        color: rgba(var(--ax-sys-body-text-color));
-        opacity: 0.5;
-        font-weight: lighter;
-      }
+    ax-suffix ax-text {
+      color: rgba(var(--ax-sys-body-text-color));
+      opacity: 0.5;
+      font-weight: lighter;
     }
   }
-}
+}

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

@@ -6,8 +6,10 @@
   border-top-right-radius: var(--ax-comp-action-sheet-border-radius-size);
   background-color: rgba(var(--ax-sys-color-surface-lowest));
   --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
-  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
+  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color),
+    0 4px 6px -4px var(--ax-shadow-color);
+  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000),
+    var(--ax-shadow);
 
   animation: 1s both ax-fadeInUp;
   animation-duration: var(--ax-sys-transition-duration);
@@ -17,5 +19,10 @@
       transform: translate3d(0, 100%, 0);
       opacity: 0;
     }
+
+    to {
+      transform: translate3d(0, 0, 0);
+      opacity: 1;
+    }
   }
-}
+}

package/components/{_check-box.scss → _check-box.css}

@@ -1,12 +1,13 @@
-@use '../mixins/index.scss';
-
 .ax-checkbox {
   margin: 0px;
-  height: 1rem /* 16px */;
-  min-width: 1rem /* 16px */;
+  height: 1rem;
+  /* 16px */
+  min-width: 1rem;
+  /* 16px */
   cursor: pointer;
   appearance: none;
-  border-radius: 0.25rem /* 4px */;
+  border-radius: 0.25rem;
+  /* 4px */
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-surface));
   background-color: rgba(var(--ax-sys-color-input-surface));
@@ -27,7 +28,7 @@
   }
 
   &:indeterminate {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
   }
 
   &:focus-visible,
@@ -41,14 +42,4 @@
     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/{_drop-down.scss → _drop-down.css}

@@ -1,5 +1,3 @@
-@use '../variables/index.scss';
-@use '../mixins/' as mixins;
 .ax-drop-down {
   display: contents;
 
@@ -9,8 +7,10 @@
     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 {
@@ -29,20 +29,31 @@
   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 #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));
-  @include mixins.media('xs') {
+  --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 */
+  @media (max-width: 480px) {
     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 {
@@ -56,6 +67,7 @@
     max-height: 85vh;
     width: 100%;
     background-color: rgba(var(--ax-sys-color-lightest-surface));
+
     &.ax-full {
       height: 95vh;
       max-height: 95vh;
@@ -68,9 +80,9 @@
   }
 }
 
-@include mixins.darkMode() {
+.dark {
   .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.css

@@ -0,0 +1,306 @@
+: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-editor-container .ax-icon {
+  font-size: var(--ax-comp-editor-icon-font-size);
+}
+
+.ax-editor-container:has(> ax-prefix) {
+  padding-inline-start: 0;
+}
+
+.ax-editor-container:has(> ax-prefix)>ax-prefix:has(ax-button, .ax-editor-container) {
+  --ax-comp-editor-space-start-size: 0px;
+}
+
+.ax-editor-container:has(> ax-prefix)>ax-prefix {
+  padding-inline-start: var(--ax-comp-editor-space-start-size);
+}
+
+.ax-editor-container:has(> ax-suffix) {
+  padding-inline-end: 0;
+}
+
+.ax-editor-container:has(> ax-suffix)>ax-suffix:has(ax-button, .ax-editor-container) {
+  --ax-comp-editor-space-end-size: 0px;
+}
+
+.ax-editor-container:has(> ax-suffix)>ax-suffix {
+  padding-inline-end: var(--ax-comp-editor-space-end-size);
+}
+
+.ax-editor-container: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-editor-container.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;
+}
+
+.ax-editor-container.ax-state-error:focus-within {
+  border-color: rgba(var(--ax-comp-editor-error-border-color));
+}
+
+.ax-editor-container.ax-state-error .ax-input .ax-placeholder,
+.ax-editor-container.ax-state-error .ax-input::placeholder {
+  color: rgba(var(--ax-comp-editor-error-text-color), var(--ax-comp-editor-placeholder-opacity));
+}
+
+.ax-editor-container.ax-solid {
+  --ax-comp-editor-bg-color: var(--ax-sys-color-lightest-surface);
+  --ax-comp-editor-border-width: 1px;
+}
+
+.ax-editor-container.ax-outline {
+  --ax-comp-editor-bg-color: 0, 0, 0, 0;
+  --ax-comp-editor-border-width: 1px;
+}
+
+.ax-editor-container.ax-flat {
+  --ax-comp-editor-border-width: 2px;
+  --ax-comp-editor-border-radius: 0px;
+  --ax-comp-editor-box-outline-width: 0px;
+  border-width: 0px !important;
+  border-bottom-width: var(--ax-comp-editor-border-width) !important;
+}
+
+.ax-editor-container.ax-fill {
+  --ax-comp-editor-box-outline-width: 2px;
+  --ax-comp-editor-border-width: 0px;
+  --ax-comp-editor-bg-color: var(--ax-sys-color-surface);
+  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
+  --ax-comp-editor-border-color: var(--ax-sys-color-border-lighter-surface);
+}
+
+.ax-editor-container.ax-none {
+  --ax-comp-editor-border-radius: 0px;
+  --ax-comp-editor-box-outline-width: 0px;
+  --ax-comp-editor-border-width: 0px;
+  --ax-comp-editor-bg-color: 0, 0, 0, 0;
+  --ax-comp-editor-border-color: 0, 0, 0, 0;
+  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
+}
+
+.ax-editor-container .ax-editor-input {
+  height: 100%;
+  flex: 1 1 0%;
+}
+
+.ax-editor-container .ax-editor-input .ax-input {
+  height: 100%;
+}
+
+.ax-editor-container .ax-input {
+  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-editor-container .ax-input .ax-placeholder,
+.ax-editor-container .ax-input::placeholder {
+  font-size: inherit;
+  font-weight: 400;
+  color: rgb(var(--ax-comp-editor-text-color), var(--ax-comp-editor-placeholder-opacity));
+}
+
+.ax-editor-container .ax-input:focus,
+.ax-editor-container .ax-input:focus-visible,
+.ax-editor-container .ax-input:focus-within {
+  outline: none;
+}
+
+.ax-editor-container.ax-state-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ax-editor-container .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-editor-container.ax-button-icon {
+  padding: 0 0.5rem;
+}
+
+.ax-editor-container .ax-input,
+.ax-editor-container .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;
+}
+
+.ax-editor-container .ax-input:focus,
+.ax-editor-container .ax-text-area:focus {
+  box-shadow: none;
+}
+
+.ax-editor-container .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-container>ax-prefix,
+.ax-editor-container>ax-suffix {
+  height: 100%;
+  max-width: fit-content;
+}
+
+.ax-editor-container>ax-prefix ax-button,
+.ax-editor-container>ax-prefix ax-text,
+.ax-editor-container>ax-prefix ax-icon,
+.ax-editor-container>ax-prefix .ax-editor-container,
+.ax-editor-container>ax-suffix ax-button,
+.ax-editor-container>ax-suffix ax-text,
+.ax-editor-container>ax-suffix ax-icon,
+.ax-editor-container>ax-suffix .ax-editor-container {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px;
+}
+
+.ax-editor-container>ax-prefix ax-title,
+.ax-editor-container>ax-suffix ax-title {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.ax-editor-container>ax-prefix>ax-text,
+.ax-editor-container>ax-suffix>ax-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ax-editor-container .ax-button {
+  height: 100% !important;
+  border-radius: 0px !important;
+}
+
+.ax-editor-container .ax-button.ax-button-icon {
+  height: 100%;
+  width: var(--ax-comp-editor-height);
+}
+
+.ax-editor-container 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;
+}