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

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

@@ -1,28 +1,32 @@
-@use '../mixins/index.scss' as mixins;
-@include mixins.darkMode() {
+.dark {
   .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 /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  @include mixins.media('md') {
-    max-height: 20rem /* 320px */;
+  font-size: 0.875rem
+    /* 14px */
+  ;
+  line-height: 1.25rem
+    /* 20px */
+  ;
+
+  .ax-md {
+    max-height: 20rem;
+
   }
+
   ax-header,
   ax-footer {
     display: flex;
@@ -31,26 +35,41 @@
     border-color: rgba(var(--ax-sys-color-border-lightest-surface), var(--tw-border-opacity));
     background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
   }
+
   ax-header {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface), var(--tw-border-opacity));
-    padding: 1rem /* 16px */;
-    font-size: 1rem /* 16px */;
-    line-height: 1.5rem /* 24px */;
+    padding: 1rem
+      /* 16px */
+    ;
+    font-size: 1rem
+      /* 16px */
+    ;
+    line-height: 1.5rem
+      /* 24px */
+    ;
     font-weight: 500;
-    @include mixins.media('md') {
-      font-size: 1.125rem /* 18px */;
-      line-height: 1.75rem /* 28px */;
+
+    .ax-md {
+      font-size: 1.125rem
+        /* 18px */
+      ;
+      line-height: 1.75rem
+        /* 28px */
+      ;
     }
+
     ax-prefix,
     ax-suffix {
       display: flex;
       flex-direction: column;
       justify-items: start;
     }
+
     ax-prefix {
       align-items: flex-start;
     }
+
     ax-suffix {
       align-items: flex-end;
     }
@@ -68,8 +87,12 @@
     &.ax-list-items-container {
       height: 100%;
       overflow-y: auto;
-      padding-top: 0.5rem /* 8px */;
-      padding-bottom: 0.5rem /* 8px */;
+      padding-top: 0.5rem
+        /* 8px */
+      ;
+      padding-bottom: 0.5rem
+        /* 8px */
+      ;
 
       &.ax-vertical {
         display: grid;
@@ -85,19 +108,28 @@
         cursor: pointer;
 
         .ax-list-item-group {
-          & > span {
+          &>span {
             display: flex;
             align-items: center;
-            padding: 0.75rem /* 12px */;
+            padding: 0.75rem
+              /* 12px */
+            ;
             font-weight: 500;
           }
 
-          & > ul {
-            padding-left: 0.75rem /* 12px */;
-            padding-right: 0.75rem /* 12px */;
+          &>ul {
+            padding-left: 0.75rem
+              /* 12px */
+            ;
+            padding-right: 0.75rem
+              /* 12px */
+            ;
           }
+
           .ax-list-item {
-            margin-bottom: 0.25rem /* 4px */;
+            margin-bottom: 0.25rem
+              /* 4px */
+            ;
             border-radius: var(--ax-sys-border-radius);
           }
         }
@@ -109,36 +141,39 @@
           user-select: none;
           align-items: center;
           justify-content: space-between;
-          padding-inline-end: 1rem /* 16px */;
-          padding-inline-start: 0.75rem /* 12px */;
-          font-size: 1rem /* 16px */;
-          line-height: 1.5rem /* 24px */;
+          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;
             outline-offset: 2px;
           }
+
           &.ax-state-checkbox {
             .ax-checkbox-label {
-              margin-inline-start: 0.5rem /* 8px */;
+              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;
@@ -149,6 +184,7 @@
           &:hover {
             background-color: rgba(var(--ax-sys-color-surface));
           }
+
           &.ax-state-focus {
             background-color: rgba(var(--ax-sys-color-surface));
           }
@@ -158,16 +194,20 @@
       .ax-list-loading-container {
         display: flex;
         justify-content: center;
-        padding: 0.5rem /* 8px */;
+        padding: 0.5rem
+          /* 8px */
+        ;
       }
     }
   }
 
   .ax-search-box-container {
-    padding: 0.5rem /* 8px */;
+    padding: 0.5rem
+      /* 8px */
+    ;
 
     &.ax-state-hidden {
       display: none;
     }
   }
-}
+}

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

@@ -1,14 +1,22 @@
-@use '../mixins/index.scss';
-
 .ax-radio {
   margin: 0px;
-  height: 1rem /* 16px */;
-  min-height: 1rem /* 16px */;
-  min-width: 1rem /* 16px */;
-  width: 1rem /* 16px */;
+  height: 1rem
+    /* 16px */
+  ;
+  min-height: 1rem
+    /* 16px */
+  ;
+  min-width: 1rem
+    /* 16px */
+  ;
+  width: 1rem
+    /* 16px */
+  ;
   cursor: pointer;
   appearance: none;
-  border-radius: 9999px /* 4px */;
+  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));
@@ -38,14 +46,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/{_table.scss → _table.css}

@@ -1,11 +1,11 @@
-@use '../mixins/index.scss' as mixins;
-@include mixins.darkMode() {
+.dark {
   .ax-table {
     thead {
       background-color: rgba(var(--ax-sys-color-surface));
     }
   }
 }
+
 .ax-table {
   width: 100%;
   border-collapse: collapse;
@@ -14,31 +14,54 @@
   border-radius: var(--ax-sys-border-radius);
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
+  font-size: 0.875rem
+    /* 14px */
+  ;
+  line-height: 1.25rem
+    /* 20px */
+  ;
+
   td {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-    padding-left: 1rem /* 16px */;
-    padding-right: 1rem /* 16px */;
-    padding-top: 0.75rem /* 12px */;
-    padding-bottom: 0.75rem /* 12px */;
+    padding-left: 1rem
+      /* 16px */
+    ;
+    padding-right: 1rem
+      /* 16px */
+    ;
+    padding-top: 0.75rem
+      /* 12px */
+    ;
+    padding-bottom: 0.75rem
+      /* 12px */
+    ;
   }
+
   thead {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface));
     background-color: rgba(var(--ax-sys-color-surface));
 
     th {
-      padding-left: 1rem /* 16px */;
-      padding-right: 1rem /* 16px */;
-      padding-top: 0.875rem /* 14px */;
-      padding-bottom: 0.875rem /* 14px */;
+      padding-left: 1rem
+        /* 16px */
+      ;
+      padding-right: 1rem
+        /* 16px */
+      ;
+      padding-top: 0.875rem
+        /* 14px */
+      ;
+      padding-bottom: 0.875rem
+        /* 14px */
+      ;
       text-align: start;
       font-weight: 500;
       text-transform: uppercase;
     }
   }
+
   &.ax-table-alternate {
     tbody {
       tr {
@@ -48,12 +71,14 @@
       }
     }
   }
+
   &.ax-table-bordered {
     thead {
       th {
         border-top-width: 0px !important;
       }
     }
+
     tbody {
       tr {
         &:last-child {
@@ -61,6 +86,7 @@
             border-bottom-width: 0px !important;
           }
         }
+
         td {
           &:last-child {
             border-bottom-width: 0px !important;
@@ -77,12 +103,14 @@
       &:first-child {
         border-inline-start-width: 0px;
       }
+
       &:last-child {
         border-inline-end-width: 0px;
       }
     }
   }
-  @include mixins.mediaLessThan('xs') {
+
+  @media screen and (max-width: 640px) {
     &.ax-table-responsive {
       display: block;
       overflow-wrap: break-word;
@@ -100,29 +128,44 @@
         box-sizing: border-box;
         display: block;
         width: 100%;
-        padding-left: 0.625rem /* 10px */;
-        padding-right: 0.625rem /* 10px */;
-        padding-top: 0.375rem /* 6px */;
-        padding-bottom: 0.375rem /* 6px */;
+        padding-left: 0.625rem
+          /* 10px */
+        ;
+        padding-right: 0.625rem
+          /* 10px */
+        ;
+        padding-top: 0.375rem
+          /* 6px */
+        ;
+        padding-bottom: 0.375rem
+          /* 6px */
+        ;
+
         &:last-child {
           border-width: 0px;
         }
+
         &:before {
           content: attr(data-label);
           display: block;
           font-weight: 700;
         }
       }
+
       tr {
         border-width: 1px;
         border-color: rgba(var(--ax-sys-color-border-lightest-surface));
       }
+
       tr,
       tbody {
         float: inline-start;
-        margin-bottom: 0.625rem /* 10px */;
+        margin-bottom: 0.625rem
+          /* 10px */
+        ;
         width: 100%;
       }
     }
   }
-}
+
+}

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

@@ -1,4 +1,5 @@
 @use '../mixins/index.scss' as mixin;
+
 .ax-uploader-overlay-state {
   border-radius: inherit;
   pointer-events: none;
@@ -13,10 +14,16 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem /* 8px */;
+  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 */;
+  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;
@@ -26,7 +33,7 @@
 }
 
 .ax-drop-zone {
-  > input {
+  >input {
     position: absolute;
     height: 100%;
     width: 100%;
@@ -35,10 +42,10 @@
   }
 }
 
-@include mixin.darkMode() {
+.dark {
   .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/components/index.css

@@ -0,0 +1,11 @@
+@import './_action-item.css';
+@import './_actionsheet.css';
+@import './_check-box.css';
+@import './_drop-down.css';
+@import './_editor-container.css';
+@import './_general-button.css';
+@import './_list.css';
+@import './_radio.css';
+@import './_ripple.css';
+@import './_table.css';
+@import './_uploader.css';