@moduix/solid 1.0.0

package/dist/styles/reset.css

@@ -0,0 +1,367 @@
+/*!
+ * moduix reset.css
+ *
+ * Portions of this file are derived from:
+ * - @unocss/reset tailwind-v4.css
+ *   Copyright (c) 2021-PRESENT Anthony Fu <https://github.com/antfu>
+ *   https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-v4.css
+ * - Tailwind CSS Preflight
+ *   Copyright (c) Tailwind Labs, Inc.
+ *   https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
+ *
+ * Modifications Copyright (c) 2026 Blinks44
+ *
+ * MIT License
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+@layer moduix.reset {
+  /*
+    1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+    2. Remove default margins and padding
+    3. Reset all borders.
+  */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 2 */
+    border: 0 solid; /* 3 */
+  }
+
+  /*
+    1. Use a consistent sensible line-height in all browsers.
+    2. Prevent adjustments of font size after orientation changes in iOS.
+    3. Use a more readable tab size.
+    4. Use the user's configured `sans` font-family by default.
+    5. Use the user's configured `sans` font-feature-settings by default.
+    6. Use the user's configured `sans` font-variation-settings by default.
+    7. Disable tap highlights on iOS.
+  */
+  html,
+  :host {
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
+    font-family:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */
+    font-feature-settings: normal; /* 5 */
+    font-variation-settings: normal; /* 6 */
+    -webkit-tap-highlight-color: transparent; /* 7 */
+  }
+
+  /*
+    1. Add the correct height in Firefox.
+    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+    3. Reset the default border style to a 1px solid border.
+  */
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  /*
+    Add the correct text decoration in Chrome, Edge, and Safari.
+  */
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  /*
+    Remove the default font size and weight for headings.
+  */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+    Reset links to optimize for opt-in styling instead of opt-out.
+  */
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+    Add the correct font weight in Edge and Safari.
+  */
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+    1. Use the user's configured `mono` font-family by default.
+    2. Use the user's configured `mono` font-feature-settings by default.
+    3. Use the user's configured `mono` font-variation-settings by default.
+    4. Correct the odd `em` font sizing in all browsers.
+  */
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+      monospace; /* 1 */
+    font-feature-settings: normal; /* 2 */
+    font-variation-settings: normal; /* 3 */
+    font-size: 1em; /* 4 */
+  }
+
+  /*
+    Add the correct font size in all browsers.
+  */
+  small {
+    font-size: 80%;
+  }
+
+  /*
+    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+  */
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+    3. Remove gaps between table borders by default.
+  */
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  /*
+    Use the modern Firefox focus style for all focusable elements.
+  */
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+    Add the correct vertical alignment in Chrome and Firefox.
+  */
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+    Add the correct display in Chrome and Safari.
+  */
+  summary {
+    display: list-item;
+  }
+
+  /*
+    Make lists unstyled by default.
+  */
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  /*
+    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+        This can trigger a poorly considered lint error in some tools but is included by design.
+  */
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  /*
+    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+  */
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+    1. Inherit font styles in all browsers.
+    2. Remove border radius in all browsers.
+    3. Remove background color in all browsers.
+    4. Ensure consistent opacity for disabled states in all browsers.
+  */
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+  }
+
+  /*
+    Restore default font weight.
+  */
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  /*
+    Restore indentation.
+  */
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  /*
+    Restore space after button.
+  */
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  /*
+    Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+  */
+  ::placeholder {
+    opacity: 1;
+  }
+
+  /*
+    Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+    crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+  */
+  @supports (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  /*
+    Prevent resizing textareas horizontally by default.
+  */
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+    Remove the inner padding in Chrome and Safari on macOS.
+  */
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+    1. Ensure date/time inputs have the same height when empty in iOS Safari.
+    2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+  */
+  ::-webkit-date-and-time-value {
+    min-height: 1lh; /* 1 */
+    text-align: inherit; /* 2 */
+  }
+
+  /*
+    Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+  */
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  /*
+    Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+  */
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  /*
+    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+  */
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+    Correct the inability to style the border radius in iOS Safari.
+  */
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  /*
+    Correct the cursor style of increment and decrement buttons in Safari.
+  */
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+    Make elements with the HTML hidden attribute stay hidden by default.
+  */
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}

package/dist/styles/shadows.css

@@ -0,0 +1,5 @@
+:root {
+  --moduix-shadow-sm: 0 2px 4px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --moduix-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  --moduix-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+}

package/dist/styles/sizing.css

@@ -0,0 +1,11 @@
+/*
+ * Control sizes (Input, Button, Select, etc.)
+ * Keeps elements in the same row at a consistent height.
+ */
+:root {
+  --moduix-size-xs: 24px;
+  --moduix-size-sm: 32px;
+  --moduix-size-md: 36px;
+  --moduix-size-lg: 40px;
+  --moduix-size-xl: 48px;
+}

package/dist/styles/spacing.css

@@ -0,0 +1,26 @@
+:root {
+  /* Primitives */
+  --moduix-spacing-0: 0px;
+  --moduix-spacing-1: 4px;
+  --moduix-spacing-0-5: calc((var(--moduix-spacing-0) + var(--moduix-spacing-1)) / 2);
+  --moduix-spacing-2: 8px;
+  --moduix-spacing-1-5: calc((var(--moduix-spacing-1) + var(--moduix-spacing-2)) / 2);
+  --moduix-spacing-3: 12px;
+  --moduix-spacing-2-5: calc((var(--moduix-spacing-2) + var(--moduix-spacing-3)) / 2);
+  --moduix-spacing-4: 16px;
+  --moduix-spacing-3-5: calc((var(--moduix-spacing-3) + var(--moduix-spacing-4)) / 2);
+  --moduix-spacing-5: 20px;
+  --moduix-spacing-4-5: calc((var(--moduix-spacing-4) + var(--moduix-spacing-5)) / 2);
+  --moduix-spacing-6: 24px;
+  --moduix-spacing-7: calc((var(--moduix-spacing-6) + var(--moduix-spacing-8)) / 2);
+  --moduix-spacing-8: 32px;
+  --moduix-spacing-10: 40px;
+
+  /* Semantic (for components; use primitives directly for larger values) */
+  --moduix-spacing-xs: var(--moduix-spacing-1); /*  4px */
+  --moduix-spacing-sm: var(--moduix-spacing-2); /*  8px */
+  --moduix-spacing-md: var(--moduix-spacing-3); /* 12px */
+  --moduix-spacing-lg: var(--moduix-spacing-4); /* 16px */
+  --moduix-spacing-xl: var(--moduix-spacing-5); /* 20px */
+  --moduix-spacing-2xl: var(--moduix-spacing-6); /* 24px */
+}

package/dist/styles/style.css

@@ -0,0 +1,180 @@
+@layer theme, base, moduix.reset, moduix.tokens, moduix.base, components, moduix.components, utilities;
+
+@import './animations.css' layer(moduix.tokens);
+@import './borders.css' layer(moduix.tokens);
+@import './colors.css' layer(moduix.tokens);
+@import './opacity.css' layer(moduix.tokens);
+@import './radius.css' layer(moduix.tokens);
+@import './shadows.css' layer(moduix.tokens);
+@import './sizing.css' layer(moduix.tokens);
+@import './spacing.css' layer(moduix.tokens);
+@import './transforms.css' layer(moduix.tokens);
+@import './transitions.css' layer(moduix.tokens);
+@import './typography.css' layer(moduix.tokens);
+@import './z-index.css' layer(moduix.tokens);
+
+@theme inline {
+  --font-sans: var(--moduix-font-sans);
+  --font-mono: var(--moduix-font-mono);
+  --font-weight-normal: var(--moduix-weight-regular);
+  --font-weight-regular: var(--moduix-weight-regular);
+  --font-weight-medium: var(--moduix-weight-medium);
+  --font-weight-semibold: var(--moduix-weight-semibold);
+  --font-weight-bold: var(--moduix-weight-bold);
+  --text-xs: var(--moduix-text-xs);
+  --text-xs--line-height: var(--moduix-line-height-text-xs);
+  --text-sm: var(--moduix-text-sm);
+  --text-sm--line-height: var(--moduix-line-height-text-sm);
+  --text-base: var(--moduix-text-md);
+  --text-base--line-height: var(--moduix-line-height-text-md);
+  --text-md: var(--moduix-text-md);
+  --text-md--line-height: var(--moduix-line-height-text-md);
+  --text-lg: var(--moduix-text-lg);
+  --text-lg--line-height: var(--moduix-line-height-text-lg);
+  --text-xl: var(--moduix-text-xl);
+  --text-xl--line-height: var(--moduix-line-height-text-xl);
+  --text-2xl: var(--moduix-text-2xl);
+  --text-2xl--line-height: var(--moduix-line-height-text-2xl);
+  --text-3xl: var(--moduix-text-3xl);
+  --text-3xl--line-height: var(--moduix-line-height-text-3xl);
+  --tracking-text-xs: var(--moduix-tracking-text-xs);
+  --tracking-text-sm: var(--moduix-tracking-text-sm);
+  --spacing-0: var(--moduix-spacing-0);
+  --spacing-0_5: var(--moduix-spacing-0-5);
+  --spacing-1: var(--moduix-spacing-1);
+  --spacing-1_5: var(--moduix-spacing-1-5);
+  --spacing-2: var(--moduix-spacing-2);
+  --spacing-2_5: var(--moduix-spacing-2-5);
+  --spacing-3: var(--moduix-spacing-3);
+  --spacing-3_5: var(--moduix-spacing-3-5);
+  --spacing-4: var(--moduix-spacing-4);
+  --spacing-4_5: var(--moduix-spacing-4-5);
+  --spacing-5: var(--moduix-spacing-5);
+  --spacing-6: var(--moduix-spacing-6);
+  --spacing-7: var(--moduix-spacing-7);
+  --spacing-8: var(--moduix-spacing-8);
+  --spacing-10: var(--moduix-spacing-10);
+  --spacing-space-xs: var(--moduix-spacing-xs);
+  --spacing-space-sm: var(--moduix-spacing-sm);
+  --spacing-space-md: var(--moduix-spacing-md);
+  --spacing-space-lg: var(--moduix-spacing-lg);
+  --spacing-space-xl: var(--moduix-spacing-xl);
+  --spacing-space-2xl: var(--moduix-spacing-2xl);
+  --spacing-control-xs: var(--moduix-size-xs);
+  --spacing-control-sm: var(--moduix-size-sm);
+  --spacing-control-md: var(--moduix-size-md);
+  --spacing-control-lg: var(--moduix-size-lg);
+  --spacing-control-xl: var(--moduix-size-xl);
+  --radius-none: var(--moduix-radius-none);
+  --radius-xs: var(--moduix-radius-xs);
+  --radius-sm: var(--moduix-radius-sm);
+  --radius-md: var(--moduix-radius-md);
+  --radius-lg: var(--moduix-radius-lg);
+  --radius-xl: var(--moduix-radius-xl);
+  --radius-full: var(--moduix-radius-full);
+  --shadow-sm: var(--moduix-shadow-sm);
+  --shadow-md: var(--moduix-shadow-md);
+  --shadow-lg: var(--moduix-shadow-lg);
+  --ease-in: var(--moduix-ease-in);
+  --ease-out: var(--moduix-ease-out);
+  --ease-in-out: var(--moduix-ease-in-out);
+  --ease-standard: var(--moduix-ease-standard);
+  --ease-spring: var(--moduix-ease-spring);
+  --ease-emphasized: var(--moduix-ease-emphasized);
+  --color-background: var(--moduix-color-background);
+  --color-foreground: var(--moduix-color-foreground);
+  --color-card: var(--moduix-color-card);
+  --color-card-foreground: var(--moduix-color-card-foreground);
+  --color-popover: var(--moduix-color-popover);
+  --color-popover-foreground: var(--moduix-color-popover-foreground);
+  --color-primary: var(--moduix-color-primary);
+  --color-primary-foreground: var(--moduix-color-primary-foreground);
+  --color-secondary: var(--moduix-color-secondary);
+  --color-secondary-foreground: var(--moduix-color-secondary-foreground);
+  --color-muted: var(--moduix-color-muted);
+  --color-muted-foreground: var(--moduix-color-muted-foreground);
+  --color-accent: var(--moduix-color-accent);
+  --color-accent-foreground: var(--moduix-color-accent-foreground);
+  --color-destructive: var(--moduix-color-destructive);
+  --color-destructive-foreground: var(--moduix-color-destructive-foreground);
+  --color-success: var(--moduix-color-success);
+  --color-warning: var(--moduix-color-warning);
+  --color-border: var(--moduix-color-border);
+  --color-input: var(--moduix-color-input);
+  --color-ring: var(--moduix-color-ring);
+  --color-overlay: var(--moduix-color-overlay);
+  --color-overlay-foreground: var(--moduix-color-overlay-foreground);
+  --color-chart-1: var(--moduix-color-chart-1);
+  --color-chart-2: var(--moduix-color-chart-2);
+  --color-chart-3: var(--moduix-color-chart-3);
+  --color-chart-4: var(--moduix-color-chart-4);
+  --color-chart-5: var(--moduix-color-chart-5);
+  --color-sidebar: var(--moduix-color-sidebar);
+  --color-sidebar-foreground: var(--moduix-color-sidebar-foreground);
+  --color-sidebar-primary: var(--moduix-color-sidebar-primary);
+  --color-sidebar-primary-foreground: var(--moduix-color-sidebar-primary-foreground);
+  --color-sidebar-accent: var(--moduix-color-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--moduix-color-sidebar-accent-foreground);
+  --color-sidebar-border: var(--moduix-color-sidebar-border);
+  --color-sidebar-ring: var(--moduix-color-sidebar-ring);
+  --animate-moduix-accordion-open: moduix-accordion-item-content-open
+    var(--moduix-transition-default);
+  --animate-moduix-accordion-closed: moduix-accordion-item-content-closed
+    var(--moduix-transition-default);
+  --animate-moduix-accordion-open-horizontal: moduix-accordion-item-content-open-horizontal
+    var(--moduix-transition-default);
+  --animate-moduix-accordion-closed-horizontal: moduix-accordion-item-content-closed-horizontal
+    var(--moduix-transition-default);
+  --animate-moduix-swap-fade-enter: moduix-fade-in var(--moduix-transition-slow);
+  --animate-moduix-swap-fade-exit: moduix-fade-out var(--moduix-transition-slow);
+  --animate-moduix-swap-scale-enter: moduix-swap-scale-enter var(--moduix-transition-slow);
+  --animate-moduix-swap-scale-exit: moduix-swap-scale-exit var(--moduix-transition-slow);
+  --animate-moduix-swap-rotate-enter: moduix-swap-rotate-enter var(--moduix-transition-slow);
+  --animate-moduix-swap-rotate-exit: moduix-swap-rotate-exit var(--moduix-transition-slow);
+  --animate-moduix-swap-flip-enter: moduix-swap-flip-enter var(--moduix-transition-slow);
+  --animate-moduix-swap-flip-exit: moduix-swap-flip-exit var(--moduix-transition-slow);
+  --animate-moduix-marquee-x: moduix-marquee-x var(--marquee-duration) linear var(--marquee-delay)
+    var(--marquee-loop-count);
+  --animate-moduix-marquee-y: moduix-marquee-y var(--marquee-duration) linear var(--marquee-delay)
+    var(--marquee-loop-count);
+  --animate-moduix-progress-linear-indeterminate: moduix-progress-linear-indeterminate 1.5s
+    ease-in-out infinite;
+  --animate-moduix-progress-linear-indeterminate-vertical: moduix-progress-linear-indeterminate-vertical
+    1.5s ease-in-out infinite;
+  --animate-moduix-collapsible-open: moduix-collapsible-content-open
+    var(--moduix-transition-default);
+  --animate-moduix-collapsible-closed: moduix-collapsible-content-closed
+    var(--moduix-transition-default);
+  --animate-moduix-collapsible-open-partial: moduix-collapsible-content-open-partial
+    var(--moduix-transition-default);
+  --animate-moduix-collapsible-closed-partial: moduix-collapsible-content-closed-partial
+    var(--moduix-transition-default);
+  --animate-moduix-menu-open: moduix-menu-content-open var(--moduix-transition-default);
+  --animate-moduix-menu-closed: moduix-menu-content-closed var(--moduix-transition-default);
+  --animate-moduix-navigation-menu-content-from-start: moduix-navigation-menu-content-from-start
+    var(--moduix-transition-default) both;
+  --animate-moduix-navigation-menu-content-from-end: moduix-navigation-menu-content-from-end
+    var(--moduix-transition-default) both;
+  --animate-moduix-navigation-menu-content-to-start: moduix-navigation-menu-content-to-start
+    var(--moduix-transition-default) both;
+  --animate-moduix-navigation-menu-content-to-end: moduix-navigation-menu-content-to-end
+    var(--moduix-transition-default) both;
+  --animate-moduix-drawer-backdrop-in: moduix-drawer-backdrop-in var(--moduix-transition-spring);
+  --animate-moduix-drawer-backdrop-out: moduix-drawer-backdrop-out var(--moduix-transition-spring)
+    forwards;
+  --animate-moduix-drawer-content-in-down: moduix-drawer-content-in-down
+    var(--moduix-transition-spring);
+  --animate-moduix-drawer-content-out-down: moduix-drawer-content-out-down
+    var(--moduix-transition-spring) forwards;
+  --animate-moduix-drawer-content-in-up: moduix-drawer-content-in-up var(--moduix-transition-spring);
+  --animate-moduix-drawer-content-out-up: moduix-drawer-content-out-up
+    var(--moduix-transition-spring) forwards;
+  --animate-moduix-drawer-content-in-left: moduix-drawer-content-in-left
+    var(--moduix-transition-spring);
+  --animate-moduix-drawer-content-out-left: moduix-drawer-content-out-left
+    var(--moduix-transition-spring) forwards;
+  --animate-moduix-drawer-content-in-right: moduix-drawer-content-in-right
+    var(--moduix-transition-spring);
+  --animate-moduix-drawer-content-out-right: moduix-drawer-content-out-right
+    var(--moduix-transition-spring) forwards;
+}

package/dist/styles/transforms.css

@@ -0,0 +1,4 @@
+:root {
+  --moduix-scale-popup: 0.9; /* overlays: dialog, popover, tooltip, menu, hover-card, toast, nav-menu */
+  --moduix-scale-dropdown: 0.95; /* dropdown lists: select, combobox */
+}

package/dist/styles/transitions.css

@@ -0,0 +1,32 @@
+:root {
+  /* Duration */
+  --moduix-duration-fast: 150ms;
+  --moduix-duration-normal: 200ms;
+  --moduix-duration-slow: 350ms;
+  --moduix-duration-slower: 450ms;
+
+  /* Easing */
+  --moduix-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --moduix-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --moduix-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --moduix-ease-standard: ease;
+  --moduix-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
+  --moduix-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Composed (shorthand) */
+  --moduix-transition-default: var(--moduix-duration-normal) var(--moduix-ease-in-out);
+  --moduix-transition-fast: var(--moduix-duration-fast) var(--moduix-ease-in-out);
+  --moduix-transition-slow: var(--moduix-duration-slow) var(--moduix-ease-in-out);
+  --moduix-transition-slower: var(--moduix-duration-slower) var(--moduix-ease-in-out);
+  --moduix-transition-spring: var(--moduix-duration-slower) var(--moduix-ease-spring);
+  --moduix-transition-emphasized: var(--moduix-duration-slower) var(--moduix-ease-emphasized);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --moduix-duration-fast: 0.01ms;
+    --moduix-duration-normal: 0.01ms;
+    --moduix-duration-slow: 0.01ms;
+    --moduix-duration-slower: 0.01ms;
+  }
+}

package/dist/styles/typography.css

@@ -0,0 +1,37 @@
+:root {
+  /* Font-family */
+  --moduix-font-sans:
+    'Noto Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --moduix-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+
+  /* Weight */
+  --moduix-weight-regular: 400;
+  --moduix-weight-medium: 500;
+  --moduix-weight-semibold: 600;
+  --moduix-weight-bold: 700;
+
+  /* Font-size */
+  --moduix-text-xs: 12px;
+  --moduix-text-sm: 14px;
+  --moduix-text-md: 16px;
+  --moduix-text-lg: 18px;
+  --moduix-text-xl: 20px;
+  --moduix-text-2xl: 24px;
+  --moduix-text-3xl: 30px;
+
+  /* Line-height */
+  --moduix-line-height-text-xs: 16px;
+  --moduix-line-height-text-sm: 20px;
+  --moduix-line-height-text-md: 24px;
+  --moduix-line-height-text-lg: 28px;
+  --moduix-line-height-text-xl: 28px;
+  --moduix-line-height-text-2xl: 32px;
+  --moduix-line-height-text-3xl: 36px;
+
+  /* Letter-spacing */
+  --moduix-tracking-text-sm: -0.01em; /* -1% */
+  --moduix-tracking-text-xs: -0.016em; /* -1.6% */
+}

package/dist/styles/z-index.css

@@ -0,0 +1,13 @@
+:root {
+  --moduix-z-default: 1;
+  --moduix-z-xs: 5;
+  --moduix-z-sm: 10;
+  --moduix-z-md: 20;
+  --moduix-z-lg: 30;
+  --moduix-z-xl: 40;
+
+  --moduix-z-backdrop: 40;
+  --moduix-z-modal: 50;
+  --moduix-z-popup: 60;
+  --moduix-z-toast: 70;
+}