@1001-digital/styles 0.0.1

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@1001-digital/styles",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./src/index.css",
+  "style": "./src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./*": "./src/*"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "modern-normalize": "^3.0.1"
+  }
+}

package/src/base/base.css

@@ -0,0 +1,52 @@
+/*
+ * Base Layer
+ * Core element styling and document defaults
+ */
+
+html {
+  /* Color settings */
+  background-color: var(--background);
+  color: var(--color);
+
+  /* Font settings */
+  font-size: var(--rem);
+  font-family: var(--font-family);
+  line-height: var(--line-height-md);
+  font-weight: var(--font-weight);
+  font-style: normal;
+  letter-spacing: var(--letter-spacing);
+  text-transform: var(--text-transform);
+  font-synthesis: initial;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  /* Font size separate from root em */
+  font-size: var(--font-base);
+
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+}
+
+/*
+ * Modern Typography
+ * text-wrap for balanced headings and prettier paragraphs
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+p,
+li,
+figcaption,
+blockquote {
+  text-wrap: pretty;
+}

package/src/base/forms.css

@@ -0,0 +1,142 @@
+/*
+ * Form Elements
+ * Global styling for form elements
+ */
+
+button:not(.unstyled),
+.button:not(.unstyled),
+input:not(.unstyled),
+textarea:not(.unstyled),
+select:not(.unstyled) {
+  /* UI font styles */
+  font-family: var(--font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+
+  transition: all var(--speed);
+  border: none;
+  border-radius: var(--button-border-radius);
+  box-shadow: var(--border-shadow);
+  background: var(--button-background);
+  padding: var(--ui-padding-block) var(--ui-padding-inline);
+  user-select: none;
+  display: flex;
+  block-size: var(--form-item-height);
+
+  &:-internal-autofill-selected {
+    background: inherit;
+    background-image: none !important;
+  }
+
+  &:is(:hover, :active, :focus, .active) {
+    outline: none;
+    box-shadow: var(--border-shadow-highlight);
+  }
+
+  &:not(select):is(:hover, :active, :focus, .active) {
+    background: var(--button-background-highlight);
+  }
+
+  &::placeholder,
+  &::-ms-input-placeholder {
+    text-transform: var(--ui-text-transform);
+    color: var(--ui-placeholder-color);
+    opacity: 1;
+  }
+
+  &.small {
+    padding: calc(var(--ui-padding-block) / 2)
+      calc(var(--ui-padding-inline) / 2);
+    block-size: var(--form-item-height-sm);
+  }
+}
+
+input:not(.unstyled),
+textarea:not(.unstyled),
+select:not(.unstyled) {
+  inline-size: 100%;
+}
+
+input:not(.unstyled),
+textarea:not(.unstyled) {
+  text-transform: var(--input-text-transform);
+}
+
+select:not(.unstyled) {
+  --select-bg: var(--button-background);
+  appearance: none;
+  line-height: 1;
+  transition-property: box-shadow, background-color, color;
+  background:
+    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+),
+    var(--select-bg);
+  background-repeat: no-repeat, no-repeat;
+  background-position:
+    calc(100% - var(--ui-padding-inline)) 50%,
+    0% 0%;
+  background-size:
+    var(--size-4),
+    100% 100%;
+  padding-inline-end: calc(var(--ui-padding-inline) + var(--size-4) + var(--ui-padding-inline) / 2) !important;
+
+  &:is(:hover, :active, :focus, .active) {
+    --select-bg: var(--button-background-highlight);
+  }
+
+  &.small {
+    background-position:
+      calc(100% - calc(var(--ui-padding-inline) / 2)) 50%,
+      0% 0%;
+  }
+}
+
+input[type='checkbox'] {
+  block-size: var(--size-4);
+  margin-right: var(--spacer-sm);
+}
+
+form {
+  display: grid;
+  gap: var(--spacer);
+}
+
+form label,
+label.form-label {
+  /* UI font styles */
+  font-family: var(--font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+
+  transition: all var(--speed);
+  display: grid;
+  gap: var(--size-2);
+
+  &:hover {
+    color: var(--color);
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    display: block;
+  }
+}
+
+label:has(> input[type='checkbox']) {
+  display: flex;
+  align-items: center;
+
+  > * {
+    inline-size: auto;
+  }
+}

package/src/base/reset.css

@@ -0,0 +1,158 @@
+/*
+ * Reset Layer
+ * Based on modern-normalize with additional opinionated resets
+ * Inspired by Tailwind's preflight
+ */
+
+/* Import modern-normalize as the foundation */
+@import 'modern-normalize/modern-normalize.css';
+
+/*
+ * Additional resets (SUIT CSS / Tailwind inspired)
+ */
+
+/* Remove default spacing for semantic elements */
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+/* Reset fieldset */
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+/* Reset lists */
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Prevent layout shift when overflow is toggled (e.g. dialog open) */
+html {
+  scrollbar-gutter: stable;
+}
+
+/*
+ * Base box model
+ */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+/* Ensure horizontal rules are visible */
+hr {
+  border-top-width: 1px;
+  border-color: var(--border-color);
+}
+
+/* Reset italic style on i elements */
+i {
+  font-style: normal;
+}
+
+/* Image border style */
+img {
+  border-style: solid;
+}
+
+/* Textarea resize */
+textarea {
+  resize: vertical;
+}
+
+/* Placeholder styling */
+input::placeholder,
+textarea::placeholder {
+  color: var(--ui-placeholder-color);
+}
+
+/* Pointer cursor for interactive elements */
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+/* Table border collapse */
+table {
+  border-collapse: collapse;
+}
+
+/* Reset heading styles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/* Reset link styles */
+a {
+  color: inherit;
+  text-decoration: inherit;
+  transition: color var(--speed);
+}
+
+/* Form element defaults */
+.button,
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: var(--ui-padding-block) var(--ui-padding-inline);
+  line-height: inherit;
+  color: inherit;
+}
+
+/* Monospace elements */
+pre,
+code,
+kbd,
+samp {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+}
+
+/* Block display for media elements */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+/* Responsive images/video */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}

package/src/index.css

@@ -0,0 +1,28 @@
+/*
+ * CSS Layers Order Definition
+ * This establishes the cascade priority:
+ * variables, reset < base < components < utilities
+ */
+@layer variables, reset, base, components, utilities;
+
+/*
+ * CSS Custom Properties (outside layers for proper cascade)
+ */
+@import './variables/index.css' layer(variables);
+
+/*
+ * Reset Layer - Modern Normalize
+ */
+@import './base/reset.css' layer(reset);
+
+/*
+ * Base Layer - Element defaults
+ */
+@import './base/base.css' layer(base);
+@import './base/forms.css' layer(base);
+
+/*
+ * Utilities Layer - Helper classes
+ */
+@import './utilities/utilities.css' layer(utilities);
+@import './utilities/animations.css' layer(utilities);

package/src/utilities/animations.css

@@ -0,0 +1,76 @@
+/*
+ * Animations Layer
+ * Vue transitions and keyframe animations
+ */
+
+/* Default Vue transition */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity var(--speed) ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: all var(--speed) ease;
+  max-block-size: 100%;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  max-block-size: 0;
+}
+
+/* Keyframe animations */
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--spacer));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+ * Entry Animations with @starting-style
+ * For elements transitioning from display: none
+ */
+.appear {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity var(--speed) ease,
+    transform var(--speed) ease,
+    display var(--speed) ease allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(var(--spacer-sm));
+  }
+}

package/src/utilities/utilities.css

@@ -0,0 +1,62 @@
+/*
+ * Utilities Layer
+ * Single-purpose helper classes
+ */
+
+/* UI font utility */
+.ui {
+  font-family: var(--font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+}
+
+/* Muted text */
+.muted {
+  color: var(--muted);
+}
+
+:is(a, button).muted:is(:hover, :active, :focus, .active) {
+  color: var(--color);
+}
+
+/* Font sizes */
+.font-sm {
+  font-size: var(--font-sm);
+}
+
+/* Responsive visibility */
+.visible-sm {
+  display: none !important;
+
+  @media (min-width: 27rem) {
+    display: initial !important;
+
+    &.flex {
+      display: flex !important;
+    }
+
+    &.inline-flex {
+      display: inline-flex !important;
+    }
+  }
+}
+
+.visible-md {
+  display: none !important;
+
+  @media (min-width: 45rem) {
+    display: initial !important;
+
+    &.flex {
+      display: flex !important;
+    }
+
+    &.inline-flex {
+      display: inline-flex !important;
+    }
+  }
+}

package/src/variables/borders.css

@@ -0,0 +1,19 @@
+:root {
+  --border-width: 1px;
+  --border-radius: var(--size-2);
+
+  /* Border colors */
+  --border-color: var(--gray-z-2);
+  --border-color-highlight: var(--gray-z-3);
+  --border-color-dark: var(--color);
+  --border-color-light: var(--color);
+
+  /* Border shorthand */
+  --border: var(--border-width) solid var(--border-color);
+  --border-dark: var(--border-width) solid var(--border-color-dark);
+
+  /* Border effects */
+  --border-shadow: 0 0 0 var(--border-width) var(--border-color);
+  --border-shadow-highlight: 0 0 0 var(--border-width)
+    var(--border-color-highlight);
+}

package/src/variables/colors.css

@@ -0,0 +1,74 @@
+/*
+ * Colors
+ * Modern color palette using oklch for perceptual uniformity
+ */
+
+:root {
+  /* Enable system color scheme support */
+  color-scheme: light dark;
+
+  /* Base colors */
+  --black: oklch(0% 0 0);
+  --white: oklch(100% 0 0);
+
+  /* Gray scale (perceptually uniform in oklch) */
+  --gray-50: oklch(98% 0 0);
+  --gray-100: oklch(96% 0 0);
+  --gray-200: oklch(91% 0 0);
+  --gray-300: oklch(85% 0 0);
+  --gray-400: oklch(70% 0 0);
+  --gray-500: oklch(55% 0 0);
+  --gray-600: oklch(45% 0 0);
+  --gray-700: oklch(37% 0 0);
+  --gray-800: oklch(27% 0 0);
+  --gray-900: oklch(20% 0 0);
+  --gray-950: oklch(14% 0 0);
+
+  /* Semi-transparent variants */
+  --black-semi: color-mix(in oklch, var(--black) 73%, transparent);
+  --white-semi: color-mix(in oklch, var(--white) 73%, transparent);
+
+  /* Semantic colors */
+  --primary: var(--color);
+  --muted: var(--gray-z-5);
+  --error: oklch(55% 0.25 27);
+  --success: oklch(75% 0.2 130);
+}
+
+/*
+ * Color scheme aware values
+ * These use light-dark() and re-evaluate based on the element's color-scheme
+ */
+
+:root {
+  --background: light-dark(var(--white), var(--black));
+  --background-semi: light-dark(var(--white-semi), var(--black-semi));
+  --color: light-dark(var(--black), var(--white));
+  --color-semi: light-dark(var(--black-semi), var(--white-semi));
+
+  /* Z-colors (depth from viewer, 0 = closest to background) */
+  --gray-z-0: light-dark(var(--gray-50), var(--gray-950));
+  --gray-z-1: light-dark(var(--gray-100), var(--gray-900));
+  --gray-z-2: light-dark(var(--gray-200), var(--gray-800));
+  --gray-z-3: light-dark(var(--gray-300), var(--gray-700));
+  --gray-z-4: light-dark(var(--gray-400), var(--gray-600));
+  --gray-z-5: var(--gray-500);
+  --gray-z-6: light-dark(var(--gray-600), var(--gray-400));
+  --gray-z-7: light-dark(var(--gray-700), var(--gray-300));
+  --gray-z-8: light-dark(var(--gray-800), var(--gray-200));
+  --gray-z-9: light-dark(var(--gray-900), var(--gray-100));
+  --gray-z-10: light-dark(var(--gray-950), var(--gray-50));
+}
+
+/*
+ * Manual color scheme overrides
+ * Force light/dark mode on nested elements
+ */
+
+.light {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}

package/src/variables/components/alert.css

@@ -0,0 +1,17 @@
+:root {
+  --alert-color: var(--color);
+  --alert-background-color: transparent;
+  --alert-border-color: var(--border-color);
+
+  --alert-info-color: var(--alert-color);
+  --alert-info-background-color: var(--alert-background-color);
+  --alert-info-border-color: var(--alert-border-color);
+
+  --alert-error-color: var(--error);
+  --alert-error-background-color: color-mix(
+    in srgb,
+    var(--error) 10%,
+    transparent
+  );
+  --alert-error-border-color: var(--error);
+}

package/src/variables/components/button.css

@@ -0,0 +1,26 @@
+:root {
+  --button-border-radius: var(--border-radius);
+  --button-background: var(--background);
+  --button-background-highlight: var(--gray-z-1);
+  --button-border-color-highlight: var(--gray-z-3);
+  --button-color: var(--color);
+  --button-color-highlight: var(--color);
+  --button-icon-color: var(--muted);
+  --button-icon-color-highlight: var(--color);
+
+  /* Primary Button Styles */
+  --button-primary-background: var(--gray-z-10);
+  --button-primary-border-color: var(--gray-z-8);
+  --button-primary-color: var(--gray-z-0);
+  --button-primary-background-highlight: var(--gray-z-8);
+  --button-primary-border-color-highlight: var(--gray-z-6);
+  --button-primary-color-highlight: var(--gray-z-0);
+
+  /* Tertiary Button Styles */
+  --button-tertiary-background: transparent;
+  --button-tertiary-border-color: var(--gray-z-3);
+  --button-tertiary-color: var(--muted);
+  --button-tertiary-background-highlight: var(--gray-z-1);
+  --button-tertiary-border-color-highlight: var(--gray-z-4);
+  --button-tertiary-color-highlight: var(--color);
+}

package/src/variables/components/card.css

@@ -0,0 +1,7 @@
+:root {
+  --card-border-radius: var(--border-radius);
+  --card-border: var(--border);
+  --card-background: var(--gray-z-0);
+  --card-background-highlight: var(--gray-z-1);
+  --card-border-color-highlight: var(--gray-z-3);
+}

package/src/variables/components/dialog.css

@@ -0,0 +1,3 @@
+:root {
+  --backdrop-background-color: transparent;
+}

package/src/variables/components/dropdown.css

@@ -0,0 +1,7 @@
+:root {
+  --dropdown-background: var(--popover-background);
+  --dropdown-border: var(--popover-border);
+  --dropdown-border-radius: var(--popover-border-radius);
+  --dropdown-padding: var(--size-1);
+  --dropdown-arrow-fill: var(--popover-arrow-fill);
+}

package/src/variables/components/form.css

@@ -0,0 +1,4 @@
+:root {
+  --form-item-height: calc(var(--size-4) + var(--ui-padding-block) * 2);
+  --form-item-height-sm: calc(var(--size-4) + var(--ui-padding-block));
+}

package/src/variables/components/index.css

@@ -0,0 +1,10 @@
+@import './alert.css';
+@import './button.css';
+@import './card.css';
+@import './dialog.css';
+@import './tag.css';
+@import './dropdown.css';
+@import './form.css';
+@import './popover.css';
+@import './toast.css';
+@import './tooltip.css';

package/src/variables/components/popover.css

@@ -0,0 +1,7 @@
+:root {
+  --popover-background: var(--background);
+  --popover-border: var(--border);
+  --popover-border-radius: var(--border-radius);
+  --popover-padding: var(--spacer);
+  --popover-arrow-fill: var(--background);
+}

package/src/variables/components/tag.css

@@ -0,0 +1,3 @@
+:root {
+  --tag-border-radius: var(--border-radius);
+}

package/src/variables/components/toast.css

@@ -0,0 +1,17 @@
+:root {
+  --toast-width: 22rem;
+  --toast-padding: var(--spacer-sm);
+  --toast-gap: var(--spacer-sm);
+
+  --toast-info-color: var(--color);
+  --toast-info-background: var(--card-background);
+  --toast-info-border-color: var(--border-color);
+
+  --toast-success-color: var(--color);
+  --toast-success-background: var(--card-background);
+  --toast-success-border-color: var(--success);
+
+  --toast-error-color: var(--color);
+  --toast-error-background: var(--card-background);
+  --toast-error-border-color: var(--error);
+}

package/src/variables/components/tooltip.css

@@ -0,0 +1,7 @@
+:root {
+  --tooltip-background: var(--popover-background);
+  --tooltip-border: var(--popover-border);
+  --tooltip-border-radius: var(--popover-border-radius);
+  --tooltip-padding: calc(var(--popover-padding) / 2) var(--popover-padding);
+  --tooltip-arrow-fill: var(--popover-arrow-fill);
+}

package/src/variables/effects.css

@@ -0,0 +1,3 @@
+:root {
+  --blur: blur(var(--size-1));
+}

package/src/variables/fonts.css

@@ -0,0 +1,35 @@
+:root {
+  --rem: 16px;
+
+  /* Font family */
+  --font-family: sans-serif;
+
+  /* Fluid font sizes using clamp(min, preferred, max) */
+  --font-base: clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);
+  --font-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
+  --font-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
+  --font-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
+  --font-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
+  --font-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
+  --font-3xl: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
+
+  /* Font weights */
+  --font-weight-light: 300;
+  --font-weight: 400;
+  --font-weight-bold: 500;
+
+  /* Letter spacing */
+  --letter-spacing-sm: -0.025em;
+  --letter-spacing: 0.025em;
+  --letter-spacing-md: 0.05em;
+  --letter-spacing-lg: 0.1em;
+
+  /* Line heights */
+  --line-height-sm: 105%;
+  --line-height: 100%;
+  --line-height-md: 120%;
+  --line-height-lg: 160%;
+
+  /* Text transform */
+  --text-transform: none;
+}

package/src/variables/index.css

@@ -0,0 +1,15 @@
+/*
+ * CSS Custom Properties
+ * Organized by category. Order matters as some depend on others.
+ */
+
+@import './colors.css';
+@import './sizes.css';
+@import './fonts.css';
+@import './borders.css';
+@import './effects.css';
+@import './timing.css';
+@import './ui.css';
+@import './layout.css';
+@import './z-index.css';
+@import './components/index.css';

package/src/variables/layout.css

@@ -0,0 +1,7 @@
+:root {
+  --dialog-width: 27rem;
+  --content-width-wide: 90rem;
+  --content-width: 60rem;
+  --content-width-sm: 35rem;
+  --form-width: 24rem;
+}

package/src/variables/sizes.css

@@ -0,0 +1,24 @@
+:root {
+  --100vh: 100dvh;
+
+  /* Size scale */
+  --size-0: 0.125rem;
+  --size-1: 0.25rem;
+  --size-2: 0.5rem;
+  --size-3: 0.75rem;
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-7: 2rem;
+  --size-8: 3rem;
+  --size-9: 4.5rem;
+  --size-10: 6rem;
+
+  /* Semantic spacers */
+  --spacer-xs: var(--size-0);
+  --spacer-sm: var(--size-2);
+  --spacer: var(--size-4);
+  --spacer-md: var(--size-6);
+  --spacer-lg: var(--size-7);
+  --spacer-xl: var(--size-9);
+}

package/src/variables/timing.css

@@ -0,0 +1,5 @@
+:root {
+  --speed-fast: 0.15s;
+  --speed: 0.3s;
+  --speed-slow: 0.75s;
+}

package/src/variables/ui.css

@@ -0,0 +1,18 @@
+:root {
+  /* UI typography */
+  --ui-font-size: 13px;
+  --ui-font-weight: 400;
+  --ui-text-transform: uppercase;
+  --ui-letter-spacing: var(--letter-spacing);
+  --ui-line-height: var(--line-height);
+  --input-text-transform: none;
+
+  /* UI colors */
+  --ui-color: var(--primary);
+  --ui-placeholder-color: var(--gray-z-5);
+  --ui-color-visited: var(--primary);
+
+  /* UI spacing (logical property naming) */
+  --ui-padding-block: var(--spacer-sm);
+  --ui-padding-inline: var(--spacer);
+}

package/src/variables/z-index.css

@@ -0,0 +1,8 @@
+:root {
+  --z-index-n1: -1;
+  --z-index-0: 0;
+  --z-index-ui: 2;
+  --z-index-overlay: 9;
+  --z-index-dialog: 10;
+  --z-index-toast: 11;
+}