@acorex/styles 19.7.0 → 19.8.0-next.0

package/src/shared/_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-surface-input-border-color));
+  background-color: rgba(var(--ax-sys-surface-input-bg-color));
   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-surface-bg-color)),
+      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/src/shared/_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/_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));
     }
   }
 }
 .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));
+    border-color: rgba(var(--ax-sys-border-color));
     background-color: rgba(var(--ax-color-on-surface));
 
     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,7 +43,6 @@
     tbody {
       tr {
         &:nth-child(even) {
-          // @apply ax-bg-on-surface;
           background-color: rgba(var(--ax-color-on-surface));
         }
       }
@@ -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/src/shared/_utils.scss

@@ -11,14 +11,12 @@
 }
 
 .ax-fieldset {
-  // @apply ax-rounded-default ax-border ax-border-default ax-p-3;
-  border-radius: var(--ax-rounded-border-default);
+  border-radius: var(--ax-sys-border-radius);
   border-width: 1px;
-  border-color: rgba(var(--ax-color-input-border));
+  border-color: rgba(var(--ax-sys-surface-input-border-color));
   padding: 0.75rem /* 12px */;
 
   legend {
-    // @apply ax-px-1 ax-text-sm;
     padding-left: 0.25rem /* 4px */;
     padding-right: 0.25rem /* 4px */;
     font-size: 0.875rem /* 14px */;
@@ -27,16 +25,14 @@
 }
 
 .ax-card {
-  // @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
-  border-radius: var(--ax-rounded-border-default);
+  border-radius: var(--ax-sys-border-radius);
   border-width: 1px;
-  border-color: rgba(var(--ax-color-input-border));
-  background-color: rgba(var(--ax-color-surface));
+  border-color: rgba(var(--ax-sys-surface-input-border-color));
+  background-color: rgba(var(--ax-sys-surface-bg-color));
 }
 
 .ax-drop-zone {
   > input {
-    // @apply ax-absolute ax-h-full ax-w-full ax-cursor-pointer ax-opacity-0;
     position: absolute;
     height: 100%;
     width: 100%;
@@ -45,7 +41,6 @@
   }
 }
 .ax-uploader-overlay-state {
-  // @apply ax-pointer-events-none ax-absolute ax-start-0 ax-top-0 ax-z-10 ax-flex ax-h-full ax-w-full ax-cursor-pointer ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-bg-primary-200/75 ax-text-sm ax-text-primary-fore-tint ax-outline-dashed ax-outline-2 -ax-outline-offset-4 ax-transition-all;
   border-radius: inherit;
   pointer-events: none;
   position: absolute;
@@ -60,10 +55,10 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem /* 8px */;
-  background-color: rgba(var(--ax-color-primary-200), 0.75);
+  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-color-primary-fore-tint));
+  color: rgba(var(--ax-sys-color-primary-text-tint));
   outline-style: dashed;
   outline-offset: -4px;
   transition-property: all;
@@ -77,9 +72,8 @@
 }
 @include util.darkMode() {
   .ax-uploader-overlay-state {
-    // @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
-    background-color: rgba(var(--ax-color-primary-800), 0.75);
-    color: rgba(var(--ax-color-primary-fore));
-    outline-color: rgba(var(--ax-color-primary-fore));
+    background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
+    color: rgba(var(--ax-sys-color-primary-text));
+    outline-color: rgba(var(--ax-sys-color-primary-text));
   }
 }

package/src/shared/index.scss

@@ -1,12 +1,14 @@
 @forward './action-item';
 @forward './actionsheet';
 @forward './check-box';
-@forward './color-look';
 @forward './drop-down';
-@forward './editor-container';
+// @forward './editor-container';
 @forward './general-button';
 @forward './inputs';
 @forward './list';
 @forward './radio';
 @forward './table';
 @forward './utils';
+
+// new //
+@forward './ripple';

package/src/utility/index.scss

@@ -1,24 +1,4 @@
-.ax-xs {
-  --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
-}
-
-.ax-sm {
-  --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
-}
-
-.ax-md {
-  --ax-size-default: var(--ax-size-base);
-}
-
-.ax-lg {
-  --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
-}
-
-.ax-xl {
-  --ax-size-default: calc(var(--ax-size-base) + 1rem);
-}
-
 .ax-placeholder {
-  color: rgba(var(--ax-color-input-surface-fore), 0.5);
-  font-weight: 500;
+  color: rgba(var(--ax-sys-surface-input-placeholder-color));
+  font-size: calc(var(--ax-comp-editor-font-size) * 0.875);
 }

package/tailwind-base.js

@@ -17,36 +17,56 @@ const childSelector = plugin(function ({ addVariant }) {
   addVariant('child-focus-within', '& > *:focus-within');
 });
 
-const _colors = {
-  ghost: 'rgba(var(--ax-color-ghost), <alpha-value>)',
-  'ghost-fore': 'rgba(var(--ax-color-ghost-fore), <alpha-value>)',
-
-  surface: 'rgba(var(--ax-color-surface), <alpha-value>)',
-  'surface-fore': 'rgba(var(--ax-color-surface-fore), <alpha-value>)',
+const _bgColors = {
+  default: 'rgba(var( --ax-sys-body-bg-color), <alpha-value>)',
+  'surface-light': 'rgba(var(--ax-sys-surface-light-bg-color), <alpha-value>)',
+  'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-bg-color), <alpha-value>)',
+  'surface-low': 'rgba(var(--ax-sys-surface-low-bg-color), <alpha-value>)',
+  surface: 'rgba(var(--ax-sys-surface-bg-color), <alpha-value>)',
+  'surface-high': 'rgba(var(--ax-sys-surface-high-bg-color), <alpha-value>)',
+  'surface-highest': 'rgba(var(--ax-sys-surface-highest-bg-color), <alpha-value>)',
+  'surface-dark': 'rgba(var(--ax-sys-surface-dark-bg-color), <alpha-value>)',
+  'surface-input': 'rgba(var(--ax-sys-surface-input-bg-color), <alpha-value>)',
+};
 
-  'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
-  'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <alpha-value>)',
+const _textColors = {
+  DEFAULT: withOpacityValue('--ax-sys-body-text-color'),
+  default: withOpacityValue('--ax-sys-body-text-color'),
+  'surface-light': 'rgba(var(--ax-sys-surface-light-text-color), <alpha-value>)',
+  'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-text-color), <alpha-value>)',
+  'surface-low': 'rgba(var(--ax-sys-surface-low-text-color), <alpha-value>)',
+  surface: 'rgba(var(--ax-sys-surface-text-color), <alpha-value>)',
+  'surface-high': 'rgba(var(--ax-sys-surface-high-text-color), <alpha-value>)',
+  'surface-dark': 'rgba(var(--ax-sys-surface-dark-text-color), <alpha-value>)',
+  'surface-highest': 'rgba(var(--ax-sys-surface-highest-text-color), <alpha-value>)',
+};
 
-  'input-surface': 'rgba(var(--ax-color-input-surface), <alpha-value>)',
-  'input-surface-fore': 'rgba(var(--ax-color-input-surface-fore), <alpha-value>)',
+const _borderColors = {
+  'surface-light': 'rgba(var(--ax-sys-surface-light-border-color), <alpha-value>)',
+  'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-border-color), <alpha-value>)',
+  'surface-low': 'rgba(var(--ax-sys-surface-low-border-color), <alpha-value>)',
+  surface: 'rgba(var(--ax-sys-surface-border-color), <alpha-value>)',
+  'surface-high': 'rgba(var(--ax-sys-surface-high-border-color), <alpha-value>)',
+  'surface-dark': 'rgba(var(--ax-sys-surface-dark-border-color), <alpha-value>)',
+  'surface-highest': 'rgba(var(--ax-sys-surface-highest-border-color), <alpha-value>)',
 };
 
 const createPalete = function (colorName) {
   return {
-    DEFAULT: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
-    fore: `rgba(var(--ax-color-${colorName}-fore), <alpha-value>)`,
-    'fore-tint': `rgba(var(--ax-color-${colorName}-fore-tint), <alpha-value>)`,
-    50: `rgba(var(--ax-color-${colorName}-50), <alpha-value>)`,
-    100: `rgba(var(--ax-color-${colorName}-100), <alpha-value>)`,
-    200: `rgba(var(--ax-color-${colorName}-200), <alpha-value>)`,
-    300: `rgba(var(--ax-color-${colorName}-300), <alpha-value>)`,
-    400: `rgba(var(--ax-color-${colorName}-400), <alpha-value>)`,
-    500: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
-    600: `rgba(var(--ax-color-${colorName}-600), <alpha-value>)`,
-    700: `rgba(var(--ax-color-${colorName}-700), <alpha-value>)`,
-    800: `rgba(var(--ax-color-${colorName}-800), <alpha-value>)`,
-    900: `rgba(var(--ax-color-${colorName}-900), <alpha-value>)`,
-    950: `rgba(var(--ax-color-${colorName}-950), <alpha-value>)`,
+    DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
+    fore: `rgba(var(--ax-sys-color-${colorName}-text), <alpha-value>)`,
+    'fore-tint': `rgba(var(--ax-sys-color-${colorName}-contrast-text), <alpha-value>)`,
+    50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
+    100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
+    200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
+    300: `rgba(var(--ax-sys-color-${colorName}-300), <alpha-value>)`,
+    400: `rgba(var(--ax-sys-color-${colorName}-400), <alpha-value>)`,
+    500: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
+    600: `rgba(var(--ax-sys-color-${colorName}-600), <alpha-value>)`,
+    700: `rgba(var(--ax-sys-color-${colorName}-700), <alpha-value>)`,
+    800: `rgba(var(--ax-sys-color-${colorName}-800), <alpha-value>)`,
+    900: `rgba(var(--ax-sys-color-${colorName}-900), <alpha-value>)`,
+    950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
   };
 };
 
@@ -62,29 +82,26 @@ module.exports = withAnimations({
         danger: createPalete('danger'),
         warning: createPalete('warning'),
         neutral: createPalete('neutral'),
-        ..._colors,
       },
       textColor: {
-        DEFAULT: withOpacityValue('--ax-color-text-default'),
-        default: withOpacityValue('--ax-color-text-default'),
-        ..._colors,
+        ..._textColors,
       },
       backgroundColor: {
-        default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
-        'border-default': 'rgba(var(--ax-color-border-default), <alpha-value>)',
+        ..._bgColors,
       },
 
       borderColor: {
-        DEFAULT: 'rgba(var(--ax-color-border-default), <alpha-value>)',
-        default: 'rgba(var(--ax-color-border-default), <alpha-value>)',
-        input: 'rgba(var(--ax-color-input-border), <alpha-value>)',
-        ..._colors,
+        DEFAULT: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
+        default: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
+        input: 'rgba(var(--ax-sys-surface-input-border-color), <alpha-value>)',
+        'border-default': 'rgba(var(--ax-sys-border-color), <alpha-value>)',
+        ..._borderColors,
       },
       maxWidth: {
         '8xl': '90rem',
       },
       borderRadius: {
-        default: 'var(--ax-rounded-border-default)',
+        default: 'var(--ax-sys-border-radius)',
       },
       lineHeight: {
         11: '2.5rem',
@@ -95,25 +112,25 @@ module.exports = withAnimations({
         20: '5rem',
       },
       spacing: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       minWidth: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       width: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       maxHeight: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       minHeight: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       height: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       maxHeight: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
     },
   },
@@ -156,12 +173,12 @@ module.exports = withAnimations({
         '.heading': {
           width: '100%',
           'border-bottom': '1px solid',
-          'border-color': 'rgba(var(--ax-color-border-default))',
+          'border-color': 'rgba(var(--ax-sys-border-color))',
           'line-height': '0.1em',
           margin: '1rem auto',
         },
         '.heading > span': {
-          background: 'rgba(var(--ax-color-surface))',
+          background: 'rgba(var(--ax-sys-surface-bg-color))',
           padding: '0 0.75rem',
         },
         '.heading-start': {
@@ -173,15 +190,15 @@ module.exports = withAnimations({
         '.heading-end': {
           'text-align': 'end',
         },
-        '.link': {
-          color: 'rgba(var(--ax-color-primary-500))',
+        '.links': {
+          color: 'rgba(var(--ax-sys-color-primary-500))',
           cursor: 'pointer',
         },
-        '.link:hover': {
+        '.links:hover': {
           'text-decoration': 'underline',
         },
-        '.link:visited': {
-          color: 'rgba(var(--ax-color-primary-700))',
+        '.links:visited': {
+          color: 'rgba(var(--ax-sys-color-primary-700))',
         },
         '.animate-slow': {
           animationDuration: '2s',
@@ -204,26 +221,26 @@ module.exports = withAnimations({
         '.card': {
           backgroundColor: 'rgb(var(--ax-color-surface))',
           border: '1px solid',
-          borderColor: 'rgb(var(--ax-color-border-default))',
-          borderRadius: 'var(--ax-rounded-border-default)',
+          borderColor: 'rgb(var(--ax-sys-border-color))',
+          borderRadius: 'var(--ax-sys-border-radius)',
         },
         '.tabs-fit': {
           width: '100%',
         },
         '.xs': {
-          '--ax-size-default': '2rem',
+          '--ax-sys-size-base': '2rem',
         },
         '.sm': {
-          '--ax-size-default': '2.25rem',
+          '--ax-sys-size-base': '2.25rem',
         },
         '.md': {
-          '--ax-size-default': '2.5rem',
+          '--ax-sys-size-base': '2.5rem',
         },
         '.lg': {
-          '--ax-size-default': '3rem',
+          '--ax-sys-size-base': '3rem',
         },
         '.xl': {
-          '--ax-size-default': '3.5rem',
+          '--ax-sys-size-base': '3.5rem',
         },
       };
       addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);

package/themes/default.css

@@ -1 +1 @@
-:root,.ax-light{--ax-size-base: 2.5rem;--ax-size-default: var(--ax-size-base);--ax-icon-weight: 400;--ax-icon-size: 100%;--ax-rounded-border-default: 0.5rem;--ax-color-border-default: 233, 234, 235;--ax-color-background-default: 249, 250, 251;--ax-color-text-default: 22, 22, 22;--ax-color-surface: 255, 255, 255;--ax-color-surface-fore: 22, 22, 22;--ax-color-on-surface: 250, 250, 250;--ax-color-on-surface-fore: 22, 22, 22;--ax-color-input-surface: 255, 255, 255;--ax-color-input-surface-fore: 22, 22, 22;--ax-color-input-border: 213, 215, 218;--ax-color-ghost: 255, 255, 255;--ax-color-ghost-fore: 22, 22, 22;--ax-color-primary-fore: 255, 255, 255;--ax-color-primary-fore-tint: 11, 30, 71;--ax-color-primary-50: 244, 247, 254;--ax-color-primary-100: 233, 239, 253;--ax-color-primary-200: 190, 208, 249;--ax-color-primary-300: 146, 177, 245;--ax-color-primary-400: 102, 146, 241;--ax-color-primary-500: 37, 99, 235;--ax-color-primary-600: 33, 89, 212;--ax-color-primary-700: 26, 69, 165;--ax-color-primary-800: 19, 50, 118;--ax-color-primary-900: 11, 30, 71;--ax-color-primary-950: 4, 10, 23;--ax-color-secondary-fore: 255, 255, 255;--ax-color-secondary-fore-tint: 9, 12, 18;--ax-color-secondary-50: 244, 244, 245;--ax-color-secondary-100: 233, 234, 235;--ax-color-secondary-200: 188, 191, 196;--ax-color-secondary-300: 143, 148, 157;--ax-color-secondary-400: 98, 105, 118;--ax-color-secondary-500: 30, 41, 59;--ax-color-secondary-600: 27, 37, 53;--ax-color-secondary-700: 21, 29, 41;--ax-color-secondary-800: 15, 21, 30;--ax-color-secondary-900: 9, 12, 18;--ax-color-secondary-950: 3, 4, 6;--ax-color-success-fore: 255, 255, 255;--ax-color-success-fore-tint: 6, 78, 59;--ax-color-success-50: 236, 253, 245;--ax-color-success-100: 209, 250, 229;--ax-color-success-200: 167, 243, 208;--ax-color-success-300: 110, 231, 183;--ax-color-success-400: 52, 211, 153;--ax-color-success-500: 16, 185, 129;--ax-color-success-600: 5, 150, 105;--ax-color-success-700: 4, 120, 87;--ax-color-success-800: 6, 95, 70;--ax-color-success-900: 6, 78, 59;--ax-color-success-950: 2, 44, 34;--ax-color-warning-fore: 48, 26, 10;--ax-color-warning-fore-tint: 255, 111, 0;--ax-color-warning-50: 255, 248, 225;--ax-color-warning-100: 255, 236, 179;--ax-color-warning-200: 255, 224, 130;--ax-color-warning-300: 255, 213, 79;--ax-color-warning-400: 255, 202, 40;--ax-color-warning-500: 255, 193, 7;--ax-color-warning-600: 255, 179, 0;--ax-color-warning-700: 255, 160, 0;--ax-color-warning-800: 255, 143, 0;--ax-color-warning-900: 255, 111, 0;--ax-color-warning-950: 72, 40, 15;--ax-color-danger-fore: 255, 255, 255;--ax-color-danger-fore-tint: 127, 29, 29;--ax-color-danger-50: 254, 242, 242;--ax-color-danger-100: 254, 226, 226;--ax-color-danger-200: 254, 202, 202;--ax-color-danger-300: 252, 165, 165;--ax-color-danger-400: 248, 113, 113;--ax-color-danger-500: 239, 68, 68;--ax-color-danger-600: 220, 38, 38;--ax-color-danger-700: 185, 28, 28;--ax-color-danger-800: 153, 27, 27;--ax-color-danger-900: 127, 29, 29;--ax-color-danger-950: 69, 10, 10;--ax-color-info-fore: 255, 255, 255;--ax-color-info-fore-tint: 49, 46, 129;--ax-color-info-50: 238, 242, 255;--ax-color-info-100: 224, 231, 255;--ax-color-info-200: 199, 210, 254;--ax-color-info-300: 165, 180, 252;--ax-color-info-400: 129, 140, 248;--ax-color-info-500: 99, 102, 241;--ax-color-info-600: 79, 70, 229;--ax-color-info-700: 67, 56, 202;--ax-color-info-800: 55, 48, 163;--ax-color-info-900: 49, 46, 129;--ax-color-info-950: 30, 27, 75;--ax-color-neutral-fore: 255, 255, 255;--ax-color-neutral-fore-tint: 17, 24, 39;--ax-color-neutral-50: 249, 250, 251;--ax-color-neutral-100: 243, 244, 246;--ax-color-neutral-200: 229, 231, 235;--ax-color-neutral-300: 209, 213, 219;--ax-color-neutral-400: 156, 163, 175;--ax-color-neutral-500: 107, 114, 128;--ax-color-neutral-600: 75, 85, 99;--ax-color-neutral-700: 55, 65, 81;--ax-color-neutral-800: 31, 41, 55;--ax-color-neutral-900: 17, 24, 39;--ax-color-neutral-950: 3, 7, 18}.ax-dark{--ax-color-border-default: 34, 38, 47;--ax-color-background-default: 12, 14, 18;--ax-color-text-default: 255, 255, 255;--ax-color-surface: 19, 22, 27;--ax-color-surface-fore: 255, 255, 255;--ax-color-on-surface: 34, 38, 47;--ax-color-on-surface-fore: 255, 255, 255;--ax-color-input-surface: 12, 14, 18;--ax-color-input-surface-fore: 224, 224, 224;--ax-color-input-border: 55, 58, 65;--ax-color-ghost: 77, 91, 113;--ax-color-ghost-fore: 255, 255, 255}
+:root{--ax-sys-body-font-size: 1rem;--ax-sys-size-base: 2.5rem;--ax-sys-transition-duration: 150ms;--ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);--ax-sys-border-radius: 0.5rem;--ax-sys-border-color: 233, 234, 235;--ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-body-text-color: 22, 22, 22;--ax-sys-surface-light-bg-color: 249, 250, 251;--ax-sys-surface-light-text-color: 31, 42, 71;--ax-sys-surface-light-border-color: 243, 244, 246;--ax-sys-surface-lowest-bg-color: 255, 255, 255;--ax-sys-surface-lowest-text-color: 40, 40, 40;--ax-sys-surface-lowest-border-color: 250, 250, 250;--ax-sys-surface-low-bg-color: 250, 250, 250;--ax-sys-surface-low-text-color: 40, 40, 40;--ax-sys-surface-low-border-color: 245, 245, 245;--ax-sys-surface-bg-color: 245, 245, 245;--ax-sys-surface-text-color: 30, 30, 30;--ax-sys-surface-border-color: 233, 234, 235;--ax-sys-surface-high-bg-color: 233, 234, 235;--ax-sys-surface-high-text-color: 20, 20, 20;--ax-sys-surface-high-border-color: 213, 215, 218;--ax-sys-surface-highest-bg-color: 213, 215, 218;--ax-sys-surface-highest-text-color: 10, 10, 10;--ax-sys-surface-highest-border-color: 164, 167, 174;--ax-sys-surface-dark-bg-color: 249, 250, 251;--ax-sys-surface-dark-text-color: 31, 42, 71;--ax-sys-surface-dark-border-color: 243, 244, 246;--ax-sys-surface-input-bg-color: 255, 255, 255;--ax-sys-surface-input-text-color: 30, 30, 30;--ax-sys-surface-input-placeholder-color: 180, 180, 180;--ax-sys-surface-input-border-color: 220, 220, 220;--ax-sys-color-primary-text: 255, 255, 255;--ax-sys-color-primary-contrast-text: 11, 30, 71;--ax-sys-color-primary-50: 244, 247, 254;--ax-sys-color-primary-100: 233, 239, 253;--ax-sys-color-primary-200: 190, 208, 249;--ax-sys-color-primary-300: 146, 177, 245;--ax-sys-color-primary-400: 102, 146, 241;--ax-sys-color-primary-500: 37, 99, 235;--ax-sys-color-primary-600: 33, 89, 212;--ax-sys-color-primary-700: 26, 69, 165;--ax-sys-color-primary-800: 19, 50, 118;--ax-sys-color-primary-900: 11, 30, 71;--ax-sys-color-primary-950: 4, 10, 23;--ax-sys-color-success-text: 255, 255, 255;--ax-sys-color-success-contrast-text: 6, 78, 59;--ax-sys-color-success-50: 236, 253, 245;--ax-sys-color-success-100: 209, 250, 229;--ax-sys-color-success-200: 167, 243, 208;--ax-sys-color-success-300: 110, 231, 183;--ax-sys-color-success-400: 52, 211, 153;--ax-sys-color-success-500: 16, 185, 129;--ax-sys-color-success-600: 5, 150, 105;--ax-sys-color-success-700: 4, 120, 87;--ax-sys-color-success-800: 6, 95, 70;--ax-sys-color-success-900: 6, 78, 59;--ax-sys-color-success-950: 2, 44, 34;--ax-sys-color-warning-text: 48, 26, 10;--ax-sys-color-warning-contrast-text: 18, 15, 14;--ax-sys-color-warning-50: 255, 248, 225;--ax-sys-color-warning-100: 255, 236, 179;--ax-sys-color-warning-200: 255, 224, 130;--ax-sys-color-warning-300: 255, 213, 79;--ax-sys-color-warning-400: 255, 202, 40;--ax-sys-color-warning-500: 255, 193, 7;--ax-sys-color-warning-600: 255, 179, 0;--ax-sys-color-warning-700: 255, 160, 0;--ax-sys-color-warning-800: 255, 143, 0;--ax-sys-color-warning-900: 255, 111, 0;--ax-sys-color-warning-950: 72, 40, 15;--ax-sys-color-danger-text: 255, 255, 255;--ax-sys-color-danger-contrast-text: 127, 29, 29;--ax-sys-color-danger-50: 254, 242, 242;--ax-sys-color-danger-100: 254, 226, 226;--ax-sys-color-danger-200: 254, 202, 202;--ax-sys-color-danger-300: 252, 165, 165;--ax-sys-color-danger-400: 248, 113, 113;--ax-sys-color-danger-500: 239, 68, 68;--ax-sys-color-danger-600: 220, 38, 38;--ax-sys-color-danger-700: 185, 28, 28;--ax-sys-color-danger-800: 153, 27, 27;--ax-sys-color-danger-900: 127, 29, 29;--ax-sys-color-danger-950: 69, 10, 10;--ax-sys-color-neutral-text: 255, 255, 255;--ax-sys-color-neutral-contrast-text: 17, 24, 39;--ax-sys-color-neutral-50: 249, 250, 251;--ax-sys-color-neutral-100: 243, 244, 246;--ax-sys-color-neutral-200: 229, 231, 235;--ax-sys-color-neutral-300: 209, 213, 219;--ax-sys-color-neutral-400: 156, 163, 175;--ax-sys-color-neutral-500: 107, 114, 128;--ax-sys-color-neutral-600: 75, 85, 99;--ax-sys-color-neutral-700: 55, 65, 81;--ax-sys-color-neutral-800: 31, 41, 55;--ax-sys-color-neutral-900: 17, 24, 39;--ax-sys-color-neutral-950: 3, 7, 18}.ax-dark{--ax-sys-body-text-color: 255, 255, 255;--ax-sys-border-color: 34, 38, 47;--ax-sys-surface-lowest-bg-color: 2, 6, 23;--ax-sys-surface-lowest-text-color: 220, 220, 220;--ax-sys-surface-lowest-border-color: 15, 23, 42;--ax-sys-surface-low-bg-color: 15, 23, 42;--ax-sys-surface-low-text-color: 230, 230, 230;--ax-sys-surface-low-border-color: 30, 41, 59;--ax-sys-surface-bg-color: 30, 41, 59;--ax-sys-surface-text-color: 240, 240, 240;--ax-sys-surface-border-color: 51, 65, 85;--ax-sys-surface-high-bg-color: 51, 65, 85;--ax-sys-surface-high-text-color: 250, 250, 250;--ax-sys-surface-high-border-color: 71, 85, 105;--ax-sys-surface-highest-bg-color: 71, 85, 105;--ax-sys-surface-highest-text-color: 255, 255, 255;--ax-sys-surface-highest-border-color: 100, 116, 139;--ax-sys-surface-input-bg-color: 55, 55, 55;--ax-sys-surface-input-text-color: 240, 240, 240;--ax-sys-surface-input-placeholder-color: 100, 100, 100;--ax-sys-surface-input-border-color: 80, 80, 80;--ax-sys-color-primary-text: 19, 21, 25;--ax-sys-color-primary-contrast-text: 57, 62, 75;--ax-sys-color-primary-50: 252, 253, 255;--ax-sys-color-primary-100: 249, 250, 254;--ax-sys-color-primary-200: 236, 241, 253;--ax-sys-color-primary-300: 223, 232, 252;--ax-sys-color-primary-400: 210, 222, 251;--ax-sys-color-primary-500: 190, 208, 249;--ax-sys-color-primary-600: 171, 187, 224;--ax-sys-color-primary-700: 133, 146, 174;--ax-sys-color-primary-800: 95, 104, 125;--ax-sys-color-primary-900: 57, 62, 75;--ax-sys-color-primary-950: 19, 21, 25;--ax-sys-color-success-text: 255, 255, 255;--ax-sys-color-success-contrast-text: 6, 78, 59;--ax-sys-color-success-50: 236, 253, 245;--ax-sys-color-success-100: 209, 250, 229;--ax-sys-color-success-200: 167, 243, 208;--ax-sys-color-success-300: 110, 231, 183;--ax-sys-color-success-400: 52, 211, 153;--ax-sys-color-success-500: 16, 185, 129;--ax-sys-color-success-600: 5, 150, 105;--ax-sys-color-success-700: 4, 120, 87;--ax-sys-color-success-800: 6, 95, 70;--ax-sys-color-success-900: 6, 78, 59;--ax-sys-color-success-950: 2, 44, 34;--ax-sys-color-warning-text: 25, 22, 13;--ax-sys-color-warning-contrast-text: 77, 67, 39;--ax-sys-color-warning-50: 255, 253, 249;--ax-sys-color-warning-100: 255, 252, 243;--ax-sys-color-warning-200: 255, 246, 218;--ax-sys-color-warning-300: 255, 240, 193;--ax-sys-color-warning-400: 255, 233, 168;--ax-sys-color-warning-500: 255, 224, 130;--ax-sys-color-warning-600: 230, 202, 117;--ax-sys-color-warning-700: 179, 157, 91;--ax-sys-color-warning-800: 128, 112, 65;--ax-sys-color-warning-900: 77, 67, 39;--ax-sys-color-warning-950: 25, 22, 13;--ax-sys-color-danger-text: 24, 15, 15;--ax-sys-color-danger-contrast-text: 72, 46, 46;--ax-sys-color-danger-50: 254, 250, 250;--ax-sys-color-danger-100: 253, 245, 245;--ax-sys-color-danger-200: 250, 225, 225;--ax-sys-color-danger-300: 247, 205, 205;--ax-sys-color-danger-400: 244, 184, 184;--ax-sys-color-danger-500: 239, 154, 154;--ax-sys-color-danger-600: 215, 139, 139;--ax-sys-color-danger-700: 167, 108, 108;--ax-sys-color-danger-800: 120, 77, 77;--ax-sys-color-danger-900: 72, 46, 46;--ax-sys-color-danger-950: 24, 15, 15;--ax-sys-color-neutral-text: 18, 19, 20;--ax-sys-color-neutral-contrast-text: 53, 57, 59;--ax-sys-color-neutral-50: 251, 252, 252;--ax-sys-color-neutral-100: 247, 249, 249;--ax-sys-color-neutral-200: 231, 236, 238;--ax-sys-color-neutral-300: 216, 223, 226;--ax-sys-color-neutral-400: 200, 210, 214;--ax-sys-color-neutral-500: 176, 190, 197;--ax-sys-color-neutral-600: 158, 171, 177;--ax-sys-color-neutral-700: 123, 133, 138;--ax-sys-color-neutral-800: 88, 95, 99;--ax-sys-color-neutral-900: 53, 57, 59;--ax-sys-color-neutral-950: 18, 19, 20}