@tale-ui/react-styles 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,86 @@
+# @tale-ui/react-styles
+
+CSS rules for `@tale-ui/react` components. Built entirely on `@tale-ui/core` design tokens (`--neutral-*`, `--color-*`, `--space-*`, `--text-*`).
+
+`@tale-ui/react` components apply BEM class names automatically (e.g. `tale-button`, `tale-select__popup`). This package provides the CSS rules for those classes.
+
+## Installation
+
+```bash
+pnpm add @tale-ui/react-styles
+```
+
+This automatically pulls in `@tale-ui/core` (the design-token layer).
+
+## Usage
+
+### All components (recommended)
+
+```ts
+import '@tale-ui/react-styles';          // tokens + every component stylesheet
+```
+
+### Per-component (tree-shakeable CSS)
+
+```ts
+import '@tale-ui/core';                  // tokens — required when using per-component imports
+import '@tale-ui/react-styles/button';
+import '@tale-ui/react-styles/dialog';
+```
+
+### Available per-component exports
+
+`accordion` · `alert-dialog` · `autocomplete` · `avatar` · `button` · `checkbox` · `collapsible` · `combobox` · `dialog` · `drawer` · `field` · `fieldset` · `form` · `input` · `menu` · `meter` · `navigation-menu` · `number-field` · `popover` · `preview-card` · `progress` · `radio` · `scroll-area` · `select` · `separator` · `slider` · `switch` · `tabs` · `toast` · `toggle` · `toolbar` · `tooltip`
+
+## Architecture
+
+```
+@tale-ui/core          (tokens, foundations, layout, themes)
+      ↓
+_primitives.css        (shared declarations for field controls, popups, items, etc.)
+      ↓
+{component}.css        (only the differentiating styles for each component)
+```
+
+### `_primitives.css`
+
+Grouped selectors for declarations that are byte-for-byte identical across multiple components. Five groups:
+
+1. **Field controls** — `.tale-input`, `.tale-select__trigger`, `.tale-combobox__input`, `.tale-autocomplete__input` (shared border, padding, font, focus ring)
+2. **Dropdown popups** — `.tale-select__popup`, `.tale-combobox__popup`, `.tale-menu__popup`, etc. (shared background, border-radius, shadow, animation)
+3. **Dropdown items** — `.tale-select__item`, `.tale-menu__item`, etc. (shared layout, hover, disabled states)
+4. **Group labels** — `.tale-select__group-label`, `.tale-menu__group-label`, etc.
+5. **Misc** — separators, popup arrows, item indicators
+
+### Individual component files
+
+Each file contains only the styles that differ from the shared primitives. For example, `menu.css` adds menu-specific padding and submenu trigger arrow, but inherits popup background, border-radius, and shadow from `_primitives.css`.
+
+## CSS Class Naming
+
+```
+.tale-{component}                     — root element
+.tale-{component}--{variant}          — variant modifier
+.tale-{component}__{element}          — child element (BEM)
+.tale-{component}[data-disabled]      — state via data attribute
+```
+
+Examples:
+```css
+.tale-button                          /* root */
+.tale-button--primary                 /* variant */
+.tale-button--sm                      /* size */
+.tale-select__trigger                 /* child element */
+.tale-select__item[data-highlighted]  /* state */
+```
+
+## Contributing a New Component Style
+
+1. Create `src/{component}.css` with a header comment documenting the component's data attributes and usage
+2. Check `_primitives.css` — if your component shares declarations with existing groups (field controls, popups, items), add its selector to the relevant group instead of duplicating
+3. Add `@import './{component}.css'` to `src/index.css` in the appropriate category section
+4. Add `"./{component}": "./src/{component}.css"` to `package.json` exports
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tale-ui/react-styles",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CSS styles for @tale-ui/react components, built on @tale-ui/core design tokens.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "./toolbar": "./src/toolbar.css"
   },
   "dependencies": {
-    "@tale-ui/core": "1.1.6"
+    "@tale-ui/core": "1.1.8"
   },
   "sideEffects": [
     "**/*.css"

package/src/_primitives.css

@@ -0,0 +1,199 @@
+/*
+ * _primitives.css — Shared style primitives for @tale-ui/react-styles
+ *
+ * Grouped selectors for declarations that are byte-for-byte identical across
+ * multiple components. Component files retain only their differentiating styles.
+ *
+ * Imported first in index.css so component files can override via cascade.
+ *
+ * Groups:
+ *   1. Field control  — Input, Select trigger, Combobox input, Autocomplete input
+ *   2. Dropdown popup — Select, Combobox, Autocomplete, Menu, Popover
+ *   3. Dropdown item  — Select, Combobox, Autocomplete, Menu (all item variants)
+ *   4. Group label    — Select, Combobox, Autocomplete, Menu
+ *   5. Misc           — Separator, Popup arrow, Item indicator
+ */
+
+/* ─── Focus ring tokens ────────────────────────────────────────────────────── */
+
+:root {
+  --focus-ring-color: var(--neutral-50);
+  --focus-ring-glow: color-mix(in srgb, var(--neutral-60) 15%, transparent);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   1. FIELD CONTROL
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.tale-input,
+.tale-select__trigger,
+.tale-combobox__input,
+.tale-autocomplete__input {
+  min-height: 3.6rem;
+  padding: var(--space-3xs) var(--space-xs);
+  border: 1px solid var(--neutral-26);
+  border-radius: 0.6rem;
+  background-color: var(--neutral-10);
+  color: var(--neutral-90);
+  font-family: var(--body-font-family);
+  font-size: var(--text-m-font-size);
+  outline: none;
+}
+
+/* Focus ring */
+.tale-input:focus,
+.tale-input[data-focused],
+.tale-select__trigger:focus-visible,
+.tale-select__trigger[data-popup-open],
+.tale-combobox__input:focus,
+.tale-combobox__input[data-popup-open],
+.tale-autocomplete__input:focus {
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 3px var(--focus-ring-glow);
+}
+
+/* Placeholder (select uses .tale-select__value[data-placeholder] instead) */
+.tale-input::placeholder,
+.tale-combobox__input::placeholder,
+.tale-autocomplete__input::placeholder {
+  color: var(--neutral-50);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   2. DROPDOWN POPUP
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.tale-select__popup,
+.tale-combobox__popup,
+.tale-autocomplete__popup,
+.tale-menu__popup,
+.tale-popover__popup {
+  background-color: var(--neutral-10);
+  border: 1px solid var(--neutral-20);
+  border-radius: 0.8rem;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  outline: none;
+  overflow: hidden;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+/* Enter/leave animation */
+.tale-select__popup[data-starting-style],
+.tale-select__popup[data-ending-style],
+.tale-combobox__popup[data-starting-style],
+.tale-combobox__popup[data-ending-style],
+.tale-autocomplete__popup[data-starting-style],
+.tale-autocomplete__popup[data-ending-style],
+.tale-menu__popup[data-starting-style],
+.tale-menu__popup[data-ending-style],
+.tale-popover__popup[data-starting-style],
+.tale-popover__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. DROPDOWN ITEM
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.tale-select__item,
+.tale-combobox__item,
+.tale-autocomplete__item,
+.tale-menu__item,
+.tale-menu__checkbox-item,
+.tale-menu__radio-item,
+.tale-menu__link-item,
+.tale-menu__submenu-trigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: var(--space-2xs) var(--space-xs);
+  border-radius: 0.5rem;
+  color: var(--neutral-80);
+  font-family: var(--body-font-family);
+  font-size: var(--text-m-font-size);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.1s ease, color 0.1s ease;
+  user-select: none;
+}
+
+/* Highlighted */
+.tale-select__item[data-highlighted],
+.tale-combobox__item[data-highlighted],
+.tale-autocomplete__item[data-highlighted],
+.tale-menu__item[data-highlighted],
+.tale-menu__checkbox-item[data-highlighted],
+.tale-menu__radio-item[data-highlighted],
+.tale-menu__link-item[data-highlighted],
+.tale-menu__submenu-trigger[data-highlighted] {
+  background-color: var(--neutral-14);
+  color: var(--neutral-90);
+}
+
+/* Disabled */
+.tale-select__item[data-disabled],
+.tale-combobox__item[data-disabled],
+.tale-autocomplete__item[data-disabled],
+.tale-menu__item[data-disabled],
+.tale-menu__checkbox-item[data-disabled],
+.tale-menu__radio-item[data-disabled],
+.tale-menu__link-item[data-disabled],
+.tale-menu__submenu-trigger[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. GROUP LABEL
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.tale-select__group-label,
+.tale-combobox__group-label,
+.tale-autocomplete__group-label,
+.tale-menu__group-label {
+  padding: var(--space-4xs) var(--space-xs);
+  color: var(--neutral-50);
+  font-family: var(--label-font-family);
+  font-size: var(--label-s-font-size);
+  font-weight: var(--label-font-weight);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: default;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. MISC
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* Separator */
+.tale-select__separator,
+.tale-menu__separator {
+  height: 1px;
+  background-color: var(--neutral-18);
+  margin: var(--space-4xs) 0;
+}
+
+/* Popup arrow */
+.tale-menu__arrow,
+.tale-popover__arrow {
+  width: 1rem;
+  height: 0.5rem;
+  fill: var(--neutral-10);
+  stroke: var(--neutral-20);
+  stroke-width: 1;
+}
+
+/* Item indicator (select + combobox — menu's indicator omits margin-left: auto) */
+.tale-select__item-indicator,
+.tale-combobox__item-indicator {
+  width: 1.4rem;
+  height: 1.4rem;
+  flex-shrink: 0;
+  color: var(--color-60);
+  margin-left: auto;
+}

package/src/accordion.css

@@ -3,13 +3,14 @@
  *
  * Styled with @tale-ui/core design tokens.
  * Base-ui Accordion exposes:
- *   Root: [data-disabled] [data-orientation]
- *   Item: [data-index] [data-disabled] [data-open]
+ *   Root:  [data-disabled] [data-orientation]
+ *   Item:  [data-index] [data-disabled] [data-open]
+ *   Panel: [data-open] [data-closed] [data-starting-style] [data-ending-style]
  *
  * Usage:
  *   <Accordion.Root className="tale-accordion">
  *     <Accordion.Item className="tale-accordion__item">
- *       <Accordion.Header>
+ *       <Accordion.Header className="tale-accordion__header">
  *         <Accordion.Trigger className="tale-accordion__trigger">Title</Accordion.Trigger>
  *       </Accordion.Header>
  *       <Accordion.Panel className="tale-accordion__panel">Content</Accordion.Panel>
@@ -36,6 +37,12 @@
   border-bottom: none;
 }
 
+/* ─── Header ──────────────────────────────────────────────────────────────── */
+
+.tale-accordion__header {
+  margin: 0;
+}
+
 /* ─── Trigger ──────────────────────────────────────────────────────────────── */
 
 .tale-accordion__trigger {
@@ -43,7 +50,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--space-s) var(--space-m);
+  padding: var(--space-xs) var(--space-m);
   background-color: transparent;
   border: none;
   color: var(--neutral-90);
@@ -89,13 +96,22 @@
 
 .tale-accordion__panel {
   overflow: hidden;
-  padding: 0 var(--space-m) var(--space-s);
+  height: var(--accordion-panel-height);
+  padding: 0 var(--space-m);
   color: var(--neutral-80);
-  font-family: var(--body-font-family);
+  font-family: var(--text-font-family);
   font-size: var(--text-m-font-size);
   line-height: 1.6;
+  transition: height 0.6s ease;
+}
+
+.tale-accordion__panel::after {
+  content: '';
+  display: block;
+  height: var(--space-xs);
 }
 
-.tale-accordion__panel:not([data-open]) {
-  display: none;
+.tale-accordion__panel[data-starting-style],
+.tale-accordion__panel[data-ending-style] {
+  height: 0;
 }

package/src/alert-dialog.css

@@ -56,10 +56,10 @@
   box-shadow:
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 20px 40px -4px rgba(0, 0, 0, 0.15);
-  padding: var(--space-xl);
+  padding: var(--space-s);
   display: flex;
   flex-direction: column;
-  gap: var(--space-m);
+  gap: var(--space-xs);
   outline: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
 }

package/src/autocomplete.css

@@ -16,6 +16,9 @@
  *       </Autocomplete.Positioner>
  *     </Autocomplete.Portal>
  *   </Autocomplete.Root>
+ *
+ * Shared field-control, popup, item, group-label primitives
+ * are defined in _primitives.css.
  */
 
 /* ─── Input ────────────────────────────────────────────────────────────────── */
@@ -23,86 +26,29 @@
 .tale-autocomplete__input {
   display: block;
   width: 100%;
-  min-height: 3.6rem;
-  padding: var(--space-3xs) var(--space-xs);
-  border: 1px solid var(--neutral-26);
-  border-radius: 0.6rem;
-  background-color: var(--neutral-10);
-  color: var(--neutral-90);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
-  outline: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.tale-autocomplete__input::placeholder {
-  color: var(--neutral-50);
-}
-
 .tale-autocomplete__input:hover {
   border-color: var(--neutral-40);
 }
 
-.tale-autocomplete__input:focus {
-  border-color: var(--color-60);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-60) 20%, transparent);
-}
-
 /* ─── Popup ────────────────────────────────────────────────────────────────── */
 
 .tale-autocomplete__popup {
-  background-color: var(--neutral-10);
-  border: 1px solid var(--neutral-20);
-  border-radius: 0.8rem;
-  box-shadow:
-    0 2px 4px rgba(0, 0, 0, 0.06),
-    0 8px 24px rgba(0, 0, 0, 0.08);
   padding: var(--space-4xs);
-  outline: none;
+  min-width: var(--anchor-width);
   max-height: 28rem;
   overflow-y: auto;
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.tale-autocomplete__popup[data-starting-style],
-.tale-autocomplete__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.97);
 }
 
 /* ─── Item ─────────────────────────────────────────────────────────────────── */
 
-.tale-autocomplete__item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs);
-  padding: var(--space-2xs) var(--space-xs);
-  border-radius: 0.5rem;
-  color: var(--neutral-80);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
-  cursor: pointer;
-  outline: none;
-  transition: background-color 0.1s ease, color 0.1s ease;
-  user-select: none;
-}
-
-.tale-autocomplete__item[data-highlighted] {
-  background-color: var(--neutral-14);
-  color: var(--neutral-90);
-}
-
 .tale-autocomplete__item[data-selected] {
   color: var(--color-60);
   font-weight: var(--label-font-weight);
 }
 
-.tale-autocomplete__item[data-disabled] {
-  opacity: 0.45;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
 /* ─── Empty state ──────────────────────────────────────────────────────────── */
 
 .tale-autocomplete__empty {
@@ -113,16 +59,3 @@
   font-size: var(--text-m-font-size);
   cursor: default;
 }
-
-/* ─── Group label ──────────────────────────────────────────────────────────── */
-
-.tale-autocomplete__group-label {
-  padding: var(--space-4xs) var(--space-xs);
-  color: var(--neutral-50);
-  font-family: var(--label-font-family);
-  font-size: var(--label-s-font-size);
-  font-weight: var(--label-font-weight);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: default;
-}

package/src/button.css

@@ -62,7 +62,7 @@
 
 .tale-button--primary {
   background-color: var(--color-60);
-  color: var(--neutral-100);
+  color: var(--color-60-fg);
   border-color: transparent;
 }
 
@@ -111,17 +111,17 @@
 /* ─── Danger variant — destructive actions ────────────────────────────────── */
 
 .tale-button--danger {
-  background-color: var(--red-60);
-  color: #fff;
+  background-color: var(--error-60);
+  color: var(--error-60-fg);
   border-color: transparent;
 }
 
 .tale-button--danger:hover:not([data-disabled]) {
-  background-color: var(--red-50);
+  background-color: var(--error-50);
 }
 
 .tale-button--danger:active:not([data-disabled]) {
-  background-color: var(--red-40);
+  background-color: var(--error-40);
 }
 
 /* ─── Size modifiers ──────────────────────────────────────────────────────── */

package/src/checkbox.css

@@ -37,7 +37,7 @@
 }
 
 .tale-checkbox:focus-visible {
-  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--color-60);
+  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--focus-ring-color);
 }
 
 /* ─── Checked state ───────────────────────────────────────────────────────── */
@@ -88,7 +88,7 @@
   justify-content: center;
   width: 1.2rem;
   height: 1.2rem;
-  color: var(--neutral-100);
+  color: var(--color-60-fg);
   pointer-events: none;
 }
 

package/src/collapsible.css

@@ -52,13 +52,17 @@
 
 .tale-collapsible__panel {
   overflow: hidden;
+  height: var(--collapsible-panel-height);
   color: var(--neutral-80);
-  font-family: var(--body-font-family);
+  font-family: var(--text-font-family);
   font-size: var(--text-m-font-size);
   line-height: 1.6;
   margin-top: var(--space-3xs);
+  transition: height 0.6s ease, opacity 0.2s ease;
 }
 
-.tale-collapsible__panel[data-closed]:not([data-starting-style]) {
-  display: none;
+.tale-collapsible__panel[data-starting-style],
+.tale-collapsible__panel[data-ending-style] {
+  height: 0;
+  opacity: 0;
 }

package/src/combobox.css

@@ -23,6 +23,9 @@
  *       </Combobox.Positioner>
  *     </Combobox.Portal>
  *   </Combobox.Root>
+ *
+ * Shared field-control, popup, item, group-label, item-indicator primitives
+ * are defined in _primitives.css.
  */
 
 /* ─── Input ────────────────────────────────────────────────────────────────── */
@@ -30,97 +33,29 @@
 .tale-combobox__input {
   display: block;
   width: 100%;
-  min-height: 3.6rem;
-  padding: var(--space-3xs) var(--space-xs);
-  border: 1px solid var(--neutral-26);
-  border-radius: 0.6rem;
-  background-color: var(--neutral-10);
-  color: var(--neutral-90);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
-  outline: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.tale-combobox__input::placeholder {
-  color: var(--neutral-50);
-}
-
 .tale-combobox__input:hover {
   border-color: var(--neutral-40);
 }
 
-.tale-combobox__input:focus,
-.tale-combobox__input[data-popup-open] {
-  border-color: var(--color-60);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-60) 20%, transparent);
-}
-
 /* ─── Popup ────────────────────────────────────────────────────────────────── */
 
 .tale-combobox__popup {
-  background-color: var(--neutral-10);
-  border: 1px solid var(--neutral-20);
-  border-radius: 0.8rem;
-  box-shadow:
-    0 2px 4px rgba(0, 0, 0, 0.06),
-    0 8px 24px rgba(0, 0, 0, 0.08);
   padding: var(--space-4xs);
-  outline: none;
+  min-width: var(--anchor-width);
   max-height: 28rem;
   overflow-y: auto;
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.tale-combobox__popup[data-starting-style],
-.tale-combobox__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.97);
 }
 
 /* ─── Item ─────────────────────────────────────────────────────────────────── */
 
-.tale-combobox__item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs);
-  padding: var(--space-2xs) var(--space-xs);
-  border-radius: 0.5rem;
-  color: var(--neutral-80);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
-  cursor: pointer;
-  outline: none;
-  transition: background-color 0.1s ease, color 0.1s ease;
-  user-select: none;
-}
-
-.tale-combobox__item[data-highlighted] {
-  background-color: var(--neutral-14);
-  color: var(--neutral-90);
-}
-
 .tale-combobox__item[data-selected] {
   color: var(--color-60);
   font-weight: var(--label-font-weight);
 }
 
-.tale-combobox__item[data-disabled] {
-  opacity: 0.45;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* ─── Item indicator ───────────────────────────────────────────────────────── */
-
-.tale-combobox__item-indicator {
-  width: 1.4rem;
-  height: 1.4rem;
-  flex-shrink: 0;
-  color: var(--color-60);
-  margin-left: auto;
-}
-
 /* ─── Empty state ──────────────────────────────────────────────────────────── */
 
 .tale-combobox__empty {
@@ -132,19 +67,6 @@
   cursor: default;
 }
 
-/* ─── Group label ──────────────────────────────────────────────────────────── */
-
-.tale-combobox__group-label {
-  padding: var(--space-4xs) var(--space-xs);
-  color: var(--neutral-50);
-  font-family: var(--label-font-family);
-  font-size: var(--label-s-font-size);
-  font-weight: var(--label-font-weight);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: default;
-}
-
 /* ─── Chips (multi-select) ─────────────────────────────────────────────────── */
 
 .tale-combobox__chips {

package/src/dialog.css

@@ -9,13 +9,17 @@
  *
  * Usage:
  *   <Dialog.Root>
- *     <Dialog.Trigger className="tale-button tale-button--primary">Open</Dialog.Trigger>
+ *     <Dialog.Trigger render={<Button variant="primary">Open</Button>} />
  *     <Dialog.Portal>
- *       <Dialog.Backdrop className="tale-dialog__backdrop" />
- *       <Dialog.Popup className="tale-dialog__popup">
- *         <Dialog.Title className="tale-dialog__title">Title</Dialog.Title>
- *         <Dialog.Description className="tale-dialog__description">…</Dialog.Description>
- *         <Dialog.Close className="tale-button tale-button--neutral">Close</Dialog.Close>
+ *       <Dialog.Backdrop />
+ *       <Dialog.Popup>
+ *         <Dialog.Close className="tale-dialog__close" aria-label="Close"><XIcon /></Dialog.Close>
+ *         <Dialog.Title>Title</Dialog.Title>
+ *         <Dialog.Description>…</Dialog.Description>
+ *         <div className="tale-dialog__actions">
+ *           <Dialog.Close render={<Button variant="neutral">Cancel</Button>} />
+ *           <Dialog.Close render={<Button variant="primary">Confirm</Button>} />
+ *         </div>
  *       </Dialog.Popup>
  *     </Dialog.Portal>
  *   </Dialog.Root>
@@ -53,10 +57,10 @@
   box-shadow:
     0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 20px 40px -4px rgba(0, 0, 0, 0.15);
-  padding: var(--space-xl);
+  padding: var(--space-s);
   display: flex;
   flex-direction: column;
-  gap: var(--space-m);
+  gap: var(--space-xs);
   outline: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
 }

package/src/index.css

@@ -14,6 +14,7 @@
  */
 
 @import '@tale-ui/core';
+@import './_primitives.css';
 
 /* ─── Form controls ─────────────────────────────────────────────────────────── */
 @import './button.css';

package/src/input.css

@@ -8,6 +8,9 @@
  *
  * Usage:
  *   <Input className="tale-input" />
+ *
+ * Shared field-control base (border, bg, font, focus ring, placeholder)
+ * is defined in _primitives.css.
  */
 
 /* ─── Base ─────────────────────────────────────────────────────────────────── */
@@ -15,34 +18,13 @@
 .tale-input {
   display: block;
   width: 100%;
-  min-height: 3.6rem;
-  padding: var(--space-3xs) var(--space-xs);
-  border: 1px solid var(--neutral-26);
-  border-radius: 0.6rem;
-  background-color: var(--neutral-10);
-  color: var(--neutral-90);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
   line-height: 1.5;
-  outline: none;
   transition:
     border-color 0.15s ease,
     box-shadow 0.15s ease,
     background-color 0.15s ease;
 }
 
-.tale-input::placeholder {
-  color: var(--neutral-50);
-}
-
-/* ─── Focus ───────────────────────────────────────────────────────────────── */
-
-.tale-input:focus,
-.tale-input[data-focused] {
-  border-color: var(--color-60);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-60) 20%, transparent);
-}
-
 /* ─── Hover ───────────────────────────────────────────────────────────────── */
 
 .tale-input:hover:not(:focus):not([data-disabled]):not([data-invalid]) {

package/src/menu.css

@@ -23,49 +23,27 @@
  *       </Menu.Positioner>
  *     </Menu.Portal>
  *   </Menu.Root>
+ *
+ * Shared popup, item, group-label, separator, arrow primitives
+ * are defined in _primitives.css.
  */
 
 /* ─── Popup ────────────────────────────────────────────────────────────────── */
 
 .tale-menu__popup {
-  background-color: var(--neutral-10);
-  border: 1px solid var(--neutral-20);
-  border-radius: 0.8rem;
-  box-shadow:
-    0 2px 4px rgba(0, 0, 0, 0.06),
-    0 8px 24px rgba(0, 0, 0, 0.08);
   padding: var(--space-4xs);
-  outline: none;
   min-width: 16rem;
-  max-width: 28rem;
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  max-width: 32rem;
+  width: max-content;
 }
 
-.tale-menu__popup[data-starting-style],
-.tale-menu__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.97);
-}
-
-/* ─── Item (base styles shared by Item, CheckboxItem, RadioItem) ────────────── */
+/* ─── Item (button/anchor resets not shared with select/combobox items) ─────── */
 
 .tale-menu__item,
 .tale-menu__checkbox-item,
 .tale-menu__radio-item,
 .tale-menu__link-item,
 .tale-menu__submenu-trigger {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs);
-  padding: var(--space-2xs) var(--space-xs);
-  border-radius: 0.5rem;
-  color: var(--neutral-80);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
-  cursor: pointer;
-  outline: none;
-  transition: background-color 0.1s ease, color 0.1s ease;
-  user-select: none;
   border: none;
   background: none;
   width: 100%;
@@ -73,25 +51,6 @@
   text-decoration: none;
 }
 
-.tale-menu__item[data-highlighted],
-.tale-menu__checkbox-item[data-highlighted],
-.tale-menu__radio-item[data-highlighted],
-.tale-menu__link-item[data-highlighted],
-.tale-menu__submenu-trigger[data-highlighted] {
-  background-color: var(--neutral-14);
-  color: var(--neutral-90);
-}
-
-.tale-menu__item[data-disabled],
-.tale-menu__checkbox-item[data-disabled],
-.tale-menu__radio-item[data-disabled],
-.tale-menu__link-item[data-disabled],
-.tale-menu__submenu-trigger[data-disabled] {
-  opacity: 0.45;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
 /* ─── Checkbox/Radio item indicator ────────────────────────────────────────── */
 
 .tale-menu__item-indicator {
@@ -109,37 +68,6 @@
   color: var(--neutral-50);
 }
 
-/* ─── Group label ──────────────────────────────────────────────────────────── */
-
-.tale-menu__group-label {
-  padding: var(--space-4xs) var(--space-xs);
-  color: var(--neutral-50);
-  font-family: var(--label-font-family);
-  font-size: var(--label-s-font-size);
-  font-weight: var(--label-font-weight);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: default;
-}
-
-/* ─── Separator ────────────────────────────────────────────────────────────── */
-
-.tale-menu__separator {
-  height: 1px;
-  background-color: var(--neutral-18);
-  margin: var(--space-4xs) 0;
-}
-
-/* ─── Arrow ────────────────────────────────────────────────────────────────── */
-
-.tale-menu__arrow {
-  width: 1rem;
-  height: 0.5rem;
-  fill: var(--neutral-10);
-  stroke: var(--neutral-20);
-  stroke-width: 1;
-}
-
 /* ─── Menubar — horizontal trigger bar ─────────────────────────────────────── */
 
 .tale-menubar {

package/src/number-field.css

@@ -37,8 +37,8 @@
 }
 
 .tale-number-field__group:focus-within {
-  border-color: var(--color-60);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-60) 20%, transparent);
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 3px var(--focus-ring-glow);
 }
 
 .tale-number-field__group:hover:not(:focus-within) {
@@ -106,7 +106,7 @@
 
 .tale-number-field__decrement:focus-visible,
 .tale-number-field__increment:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--color-60);
+  box-shadow: inset 0 0 0 2px var(--focus-ring-color);
 }
 
 /* ─── Disabled state ──────────────────────────────────────────────────────── */

package/src/popover.css

@@ -19,28 +19,16 @@
  *       </Popover.Positioner>
  *     </Popover.Portal>
  *   </Popover.Root>
+ *
+ * Shared popup base, popup animation, and arrow are defined in _primitives.css.
  */
 
 /* ─── Popup ────────────────────────────────────────────────────────────────── */
 
 .tale-popover__popup {
   position: relative;
-  background-color: var(--neutral-10);
-  border: 1px solid var(--neutral-20);
-  border-radius: 0.8rem;
-  box-shadow:
-    0 2px 4px rgba(0, 0, 0, 0.06),
-    0 8px 24px rgba(0, 0, 0, 0.08);
-  padding: var(--space-m);
+  padding: var(--space-xs);
   max-width: 32rem;
-  outline: none;
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.tale-popover__popup[data-starting-style],
-.tale-popover__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.97);
 }
 
 /* ─── Title ────────────────────────────────────────────────────────────────── */
@@ -92,13 +80,3 @@
 .tale-popover__close:focus-visible {
   box-shadow: 0 0 0 2px var(--color-60);
 }
-
-/* ─── Arrow ────────────────────────────────────────────────────────────────── */
-
-.tale-popover__arrow {
-  width: 1rem;
-  height: 0.5rem;
-  fill: var(--neutral-10);
-  stroke: var(--neutral-20);
-  stroke-width: 1;
-}

package/src/radio.css

@@ -35,7 +35,7 @@
 }
 
 .tale-radio:focus-visible {
-  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--color-60);
+  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--focus-ring-color);
 }
 
 /* ─── Checked state ───────────────────────────────────────────────────────── */

package/src/select.css

@@ -25,6 +25,9 @@
  *       </Select.Positioner>
  *     </Select.Portal>
  *   </Select.Root>
+ *
+ * Shared field-control, popup, item, group-label, separator, item-indicator
+ * primitives are defined in _primitives.css.
  */
 
 /* ─── Trigger ──────────────────────────────────────────────────────────────── */
@@ -35,16 +38,7 @@
   justify-content: space-between;
   gap: var(--space-xs);
   min-width: 16rem;
-  min-height: 3.6rem;
-  padding: var(--space-3xs) var(--space-xs);
-  border: 1px solid var(--neutral-26);
-  border-radius: 0.6rem;
-  background-color: var(--neutral-10);
-  color: var(--neutral-90);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
   cursor: pointer;
-  outline: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -52,12 +46,6 @@
   border-color: var(--neutral-40);
 }
 
-.tale-select__trigger:focus-visible,
-.tale-select__trigger[data-popup-open] {
-  border-color: var(--color-60);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-60) 20%, transparent);
-}
-
 .tale-select__trigger[data-disabled] {
   opacity: 0.45;
   cursor: not-allowed;
@@ -87,25 +75,11 @@
 /* ─── Popup ────────────────────────────────────────────────────────────────── */
 
 .tale-select__popup {
-  background-color: var(--neutral-10);
-  border: 1px solid var(--neutral-20);
-  border-radius: 0.8rem;
-  box-shadow:
-    0 2px 4px rgba(0, 0, 0, 0.06),
-    0 8px 24px rgba(0, 0, 0, 0.08);
-  outline: none;
-  overflow: hidden;
-  min-width: var(--available-width, 16rem);
+  padding: var(--space-4xs);
+  min-width: var(--anchor-width, 16rem);
   max-height: 28rem;
   overflow-y: auto;
-  padding: var(--space-4xs);
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.tale-select__popup[data-starting-style],
-.tale-select__popup[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.97);
+  overflow: hidden;
 }
 
 /* ─── List ─────────────────────────────────────────────────────────────────── */
@@ -118,70 +92,13 @@
 
 /* ─── Item ─────────────────────────────────────────────────────────────────── */
 
-.tale-select__item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs);
-  padding: var(--space-2xs) var(--space-xs);
-  border-radius: 0.5rem;
-  color: var(--neutral-80);
-  font-family: var(--body-font-family);
-  font-size: var(--text-m-font-size);
-  cursor: pointer;
-  outline: none;
-  transition: background-color 0.1s ease, color 0.1s ease;
-  user-select: none;
-}
-
-.tale-select__item[data-highlighted] {
-  background-color: var(--neutral-14);
-  color: var(--neutral-90);
-}
-
 .tale-select__item[data-selected] {
   color: var(--color-60);
   font-weight: var(--label-font-weight);
 }
 
-.tale-select__item[data-disabled] {
-  opacity: 0.45;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
 /* ─── Item text ────────────────────────────────────────────────────────────── */
 
 .tale-select__item-text {
   flex: 1;
 }
-
-/* ─── Item indicator (checkmark) ───────────────────────────────────────────── */
-
-.tale-select__item-indicator {
-  width: 1.4rem;
-  height: 1.4rem;
-  flex-shrink: 0;
-  color: var(--color-60);
-  margin-left: auto;
-}
-
-/* ─── Group label ──────────────────────────────────────────────────────────── */
-
-.tale-select__group-label {
-  padding: var(--space-4xs) var(--space-xs);
-  color: var(--neutral-50);
-  font-family: var(--label-font-family);
-  font-size: var(--label-s-font-size);
-  font-weight: var(--label-font-weight);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: default;
-}
-
-/* ─── Separator ────────────────────────────────────────────────────────────── */
-
-.tale-select__separator {
-  height: 1px;
-  background-color: var(--neutral-18);
-  margin: var(--space-4xs) 0;
-}

package/src/slider.css

@@ -59,7 +59,6 @@
   height: 0.4rem;
   border-radius: 9999px;
   background-color: var(--neutral-22);
-  overflow: hidden;
 }
 
 .tale-slider[data-orientation="vertical"] .tale-slider__track {
@@ -98,33 +97,21 @@
   width: 1.8rem;
   height: 1.8rem;
   border-radius: 50%;
-  background-color: var(--neutral-100);
+  background-color: var(--neutral-10);
   border: 2px solid var(--color-60);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-  top: 50%;
-  transform: translateY(-50%);
   outline: none;
-  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, scale 0.1s ease;
   cursor: grab;
 }
 
 .tale-slider__thumb:focus-visible {
-  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--color-60);
+  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--focus-ring-color);
 }
 
 .tale-slider__thumb[data-dragging] {
   cursor: grabbing;
-  transform: translateY(-50%) scale(1.15);
-}
-
-.tale-slider[data-orientation="vertical"] .tale-slider__thumb {
-  left: 50%;
-  top: auto;
-  transform: translateX(-50%);
-}
-
-.tale-slider[data-orientation="vertical"] .tale-slider__thumb[data-dragging] {
-  transform: translateX(-50%) scale(1.15);
+  scale: 1.15;
 }
 
 /* ─── Disabled state ──────────────────────────────────────────────────────── */

package/src/switch.css

@@ -17,14 +17,19 @@
 /* ─── Root — pill-shaped track ────────────────────────────────────────────── */
 
 .tale-switch {
+  --tale-switch-track-width: 4rem;
+  --tale-switch-track-height: 2.2rem;
+  --tale-switch-thumb-size: 1.4rem;
+  --tale-switch-thumb-offset: 0.2rem;
+
+  position: relative;
   display: inline-flex;
-  align-items: center;
-  width: 4rem;
-  height: 2.2rem;
+  width: var(--tale-switch-track-width);
+  height: var(--tale-switch-track-height);
   border-radius: 9999px;
   border: 1.5px solid var(--neutral-30);
   background-color: var(--neutral-20);
-  padding: 0 0.2rem;
+  padding: 0;
   cursor: pointer;
   outline: none;
   transition:
@@ -35,7 +40,7 @@
 }
 
 .tale-switch:focus-visible {
-  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--color-60);
+  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--focus-ring-color);
 }
 
 /* ─── Checked (on) state ──────────────────────────────────────────────────── */
@@ -74,17 +79,26 @@
 /* ─── Thumb — sliding circle ──────────────────────────────────────────────── */
 
 .tale-switch__thumb {
-  width: 1.4rem;
-  height: 1.4rem;
+  position: absolute;
+  inset-inline-start: var(--tale-switch-thumb-offset);
+  inset-block-start: 50%;
+  width: var(--tale-switch-thumb-size);
+  height: var(--tale-switch-thumb-size);
   border-radius: 50%;
   background-color: var(--neutral-80);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s ease, background-color 0.2s ease;
-  transform: translateX(0);
+  transform: translate(0, -50%);
   flex-shrink: 0;
 }
 
 .tale-switch__thumb[data-checked] {
-  transform: translateX(1.6rem);
-  background-color: var(--neutral-100);
+  transform: translate(
+    calc(
+      var(--tale-switch-track-width) - (var(--tale-switch-thumb-offset) * 2) -
+        var(--tale-switch-thumb-size)
+    ),
+    -50%
+  );
+  background-color: var(--color-60-fg);
 }

package/src/toast.css

@@ -25,7 +25,7 @@
   display: flex;
   flex-direction: column-reverse;
   gap: var(--space-2xs);
-  padding: var(--space-m);
+  padding: var(--space-xs);
   pointer-events: none;
 
   /* Default: bottom-right */
@@ -42,7 +42,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--space-xs);
-  padding: var(--space-s) var(--space-m);
+  padding: var(--space-2xs) var(--space-s);
   background-color: var(--neutral-14);
   border: 1px solid var(--neutral-22);
   border-radius: 1rem;
@@ -65,18 +65,18 @@
 /* ─── Type variants ───────────────────────────────────────────────────────── */
 
 .tale-toast__root[data-type="success"] {
-  border-color: var(--green-60, #22c55e);
-  border-left: 4px solid var(--green-60, #22c55e);
+  border-color: var(--success-60);
+  border-left: 4px solid var(--success-60);
 }
 
 .tale-toast__root[data-type="error"] {
-  border-color: var(--red-60);
-  border-left: 4px solid var(--red-60);
+  border-color: var(--error-60);
+  border-left: 4px solid var(--error-60);
 }
 
 .tale-toast__root[data-type="warning"] {
-  border-color: var(--yellow-60, #f59e0b);
-  border-left: 4px solid var(--yellow-60, #f59e0b);
+  border-color: var(--warning-60);
+  border-left: 4px solid var(--warning-60);
 }
 
 /* ─── Title ────────────────────────────────────────────────────────────────── */

package/src/toggle.css

@@ -57,13 +57,14 @@
 /* ─── Pressed (active/on) state ───────────────────────────────────────────── */
 
 .tale-toggle[data-pressed] {
-  background-color: var(--neutral-18);
-  border-color: var(--neutral-30);
-  color: var(--neutral-90);
+  background-color: var(--neutral-80);
+  border-color: var(--neutral-80);
+  color: var(--neutral-80-fg);
 }
 
 .tale-toggle[data-pressed]:hover:not([data-disabled]) {
-  background-color: var(--neutral-22);
+  background-color: var(--neutral-90);
+  border-color: var(--neutral-90);
 }
 
 /* ─── Disabled state ──────────────────────────────────────────────────────── */

package/src/tooltip.css

@@ -24,7 +24,7 @@
 
 .tale-tooltip__popup {
   background-color: var(--neutral-80);
-  color: var(--neutral-10);
+  color: var(--neutral-80-fg);
   font-family: var(--label-font-family);
   font-size: var(--label-s-font-size);
   font-weight: var(--label-font-weight);