@acorex/styles 16.0.2 → 17.0.1

package/src/shared/_table.scss

@@ -0,0 +1,149 @@
+@import '../mixins/index.scss';
+@include 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-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  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));
+    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));
+
+    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 */;
+      padding-bottom: 0.875rem /* 14px */;
+      text-align: start;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+  }
+  &.ax-table-alternate {
+    tbody {
+      tr {
+        &:nth-child(even) {
+          // @apply ax-bg-on-surface;
+          background-color: rgba(var(--ax-color-on-surface));
+        }
+      }
+    }
+  }
+  &.ax-table-bordered {
+    thead {
+      th {
+        // @apply ax-border-t-0 #{!important};
+        border-top-width: 0px !important;
+      }
+    }
+    tbody {
+      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;
+          }
+        }
+      }
+    }
+
+    td,
+    th {
+      // @apply ax-border ax-border-default;
+      border-width: 1px;
+      border-color: rgba(var(--ax-color-border-default));
+
+      &:first-child {
+        // @apply ax-border-s-0;
+        border-inline-start-width: 0px;
+      }
+      &:last-child {
+        // @apply ax-border-e-0;
+        border-inline-end-width: 0px;
+      }
+    }
+  }
+  @media screen and (max-width: 601px) {
+    &.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;
+        display: block;
+        width: 100%;
+        padding-left: 0.625rem /* 10px */;
+        padding-right: 0.625rem /* 10px */;
+        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));
+      }
+      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

@@ -0,0 +1,75 @@
+@import '../variables/index.scss';
+
+[class*=' ax-icon-'],
+[class^='ax-icon-'] {
+  vertical-align: middle;
+}
+
+.ax-fieldset {
+  // @apply ax-rounded-default ax-border ax-border-default ax-p-3;
+  border-radius: var(--ax-rounded-border-default);
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  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 */;
+    line-height: 1.25rem /* 20px */;
+  }
+}
+
+.ax-card {
+  // @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
+  border-radius: var(--ax-rounded-border-default);
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  background-color: rgba(var(--ax-color-surface));
+}
+
+.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%;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+.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;
+  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-color-primary-200), 0.75);
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: rgba(var(--ax-color-primary-fore-tint));
+  outline-style: dashed;
+  outline-offset: -4px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+@include 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));
+  }
+}

package/src/shared/index.scss

@@ -0,0 +1,11 @@
+@import './actionsheet';
+@import './check-box';
+@import './color-look';
+@import './drop-down';
+@import './editor-container';
+@import './general-button';
+@import './inputs';
+@import './list';
+@import './radio';
+@import './table';
+@import './utils';

package/src/utility/index.scss

@@ -0,0 +1,24 @@
+.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-text-default), 0.5);
+  font-weight: 500;
+}

package/src/variables/_colors.scss

@@ -0,0 +1,2 @@
+$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
+$look_names: 'solid', 'twotone', 'outline', 'blank';

package/src/variables/_degrees.scss

@@ -0,0 +1 @@
+$degrees: 45, 90, 130, 180;

package/src/variables/index.scss

@@ -0,0 +1,2 @@
+@import './colors';
+@import './degrees';

package/tailwind-base.js

@@ -0,0 +1,235 @@
+const plugin = require('tailwindcss/plugin');
+const { withAnimations } = require('animated-tailwindcss');
+
+function withOpacityValue(variable) {
+  return ({ opacityValue }) => {
+    if (opacityValue === undefined) {
+      return `rgb(var(${variable}))`;
+    }
+    return `rgb(var(${variable}) ,${opacityValue})`;
+  };
+}
+
+const childSelector = plugin(function ({ addVariant }) {
+  addVariant('child', '& > *');
+  addVariant('child-hover', '& > *:hover');
+  addVariant('child-focus', '& > *:focus');
+  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>)',
+
+  'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
+  'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <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 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>)`,
+  };
+};
+
+module.exports = withAnimations({
+  prefix: 'ax-',
+  content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: createPalete('primary'),
+        secondary: createPalete('secondary'),
+        success: createPalete('success'),
+        danger: createPalete('danger'),
+        warning: createPalete('warning'),
+        info: createPalete('info'),
+        neutral: createPalete('neutral'),
+        ..._colors,
+      },
+      textColor: {
+        DEFAULT: withOpacityValue('--ax-color-text-default'),
+        default: withOpacityValue('--ax-color-text-default'),
+        ..._colors,
+      },
+      backgroundColor: {
+        default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
+        'border-default': 'rgba(var(--ax-color-border-default), <alpha-value>)',
+      },
+
+      borderColor: {
+        DEFAULT: 'rgba(var(--ax-color-border-default), <alpha-value>)',
+        default: 'rgba(var(--ax-color-border-default), <alpha-value>)',
+        ..._colors,
+      },
+      maxWidth: {
+        '8xl': '90rem',
+      },
+      borderRadius: {
+        default: 'var(--ax-rounded-border-default)',
+      },
+      lineHeight: {
+        11: '2.5rem',
+        12: '3rem',
+        12: '3rem',
+        14: '3.5rem',
+        16: '4rem',
+        20: '5rem',
+      },
+      spacing: {
+        default: 'var(--ax-size-default)',
+      },
+      minWidth: {
+        default: 'var(--ax-size-default)',
+      },
+      width: {
+        default: 'var(--ax-size-default)',
+      },
+      maxHeight: {
+        default: 'var(--ax-size-default)',
+      },
+      minHeight: {
+        default: 'var(--ax-size-default)',
+      },
+      height: {
+        default: 'var(--ax-size-default)',
+      },
+      maxHeight: {
+        default: 'var(--ax-size-default)',
+      },
+    },
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      const acorexClasses = {
+        '.h1': {
+          'font-size': '3rem',
+          'font-weight': '700',
+          'line-height': '3rem',
+        },
+        '.h2': {
+          'font-size': '2.5rem',
+          'font-weight': '700',
+          'line-height': '2.5rem',
+        },
+        '.h3': {
+          'font-size': '1.875rem',
+          'font-weight': '700',
+          'line-height': '1.875rem',
+        },
+        '.h4': {
+          'font-size': '1.5rem',
+          'font-weight': '700',
+          'line-height': '1.5rem',
+        },
+        '.h5': {
+          'font-size': '1.25rem',
+          'font-weight': '700',
+          'line-height': '1.25rem',
+        },
+        '.h6': {
+          'font-size': '1.125rem',
+          'font-weight': '700',
+          'line-height': '1.125rem',
+        },
+        '.heading': {
+          width: '100%',
+          'border-bottom': '1px solid',
+          'border-color': 'rgba(var(--ax-color-border-default))',
+          'line-height': '0.1em',
+          margin: '1rem auto',
+        },
+        '.heading > span': {
+          background: 'rgba(var(--ax-color-surface))',
+          padding: '0 0.75rem',
+        },
+        '.heading-start': {
+          'text-align': 'start',
+        },
+        '.heading-center': {
+          'text-align': 'center',
+        },
+        '.heading-end': {
+          'text-align': 'end',
+        },
+        '.link': {
+          color: 'rgba(var(--ax-color-primary-500))',
+          cursor: 'pointer',
+        },
+        '.link:hover': {
+          'text-decoration': 'underline',
+        },
+        '.link:visited': {
+          color: 'rgba(var(--ax-color-primary-700))',
+        },
+        '.animate-slow': {
+          animationDuration: '2s',
+        },
+        '.animate-slower': {
+          animationDuration: '3s',
+        },
+        '.animate-2xslower': {
+          animationDuration: '5s',
+        },
+        '.animate-fast': {
+          animationDuration: '800ms',
+        },
+        '.animate-faster': {
+          animationDuration: '500ms',
+        },
+        '.animate-2xfaster': {
+          animationDuration: '250ms',
+        },
+        '.card': {
+          backgroundColor: 'rgb(var(--ax-color-surface))',
+          border: '1px solid',
+          borderColor: 'rgb(var(--ax-color-border-default))',
+          borderRadius: 'var(--ax-rounded-border-default)',
+        },
+        '.tabs-fit': {
+          width: '100%',
+        },
+        '.xs': {
+          '--ax-size-default': '2rem',
+        },
+        '.sm': {
+          '--ax-size-default': '2.25rem',
+        },
+        '.md': {
+          '--ax-size-default': '2.5rem',
+        },
+        '.lg': {
+          '--ax-size-default': '3rem',
+        },
+        '.xl': {
+          '--ax-size-default': '3.5rem',
+        },
+      };
+      addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
+    }),
+    childSelector,
+  ],
+});

package/themes/default.css

@@ -0,0 +1 @@
+:root{--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: 209, 213, 219;--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: 243, 244, 246;--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-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: 75, 85, 99;--ax-color-background-default: 24, 32, 43;--ax-color-text-default: 255, 255, 255;--ax-color-surface: 31, 41, 55;--ax-color-surface-fore: 255, 255, 255;--ax-color-on-surface: 55, 65, 81;--ax-color-on-surface-fore: 255, 255, 255;--ax-color-input-surface: 38, 45, 57;--ax-color-input-surface-fore: 224, 224, 224;--ax-color-ghost: 77, 91, 113;--ax-color-ghost-fore: 255, 255, 255}

package/themes/default.scss

@@ -0,0 +1,141 @@
+:root {
+  --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: 209, 213, 219;
+
+  --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: 243, 244, 246;
+  --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-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: 75, 85, 99;
+
+  --ax-color-background-default: 24, 32, 43;
+  --ax-color-text-default: 255, 255, 255;
+
+  --ax-color-surface: 31, 41, 55;
+  --ax-color-surface-fore: 255, 255, 255;
+
+  --ax-color-on-surface: 55, 65, 81;
+  --ax-color-on-surface-fore: 255, 255, 255;
+
+  --ax-color-input-surface: 38, 45, 57;
+  --ax-color-input-surface-fore: 224, 224, 224;
+
+  --ax-color-ghost: 77, 91, 113;
+  --ax-color-ghost-fore: 255, 255, 255;
+}