@mindlogic-ai/logician-ui 4.0.0 → 5.0.0-alpha.1

package/dist/components/Tag/Tag.styles.mjs

@@ -1,141 +1,160 @@
 "use client";
+import { disabledControl } from '../../utils/disabledControl.mjs';
+import { isDev } from '../../utils/isDev.mjs';
+
 /**
- * Tag styles using a two-dimensional variant system.
- *
- * Structure: tagColorPaletteStyles[colorPalette][variant]
- *
- * Uses semantic color tokens from the Golden Ratio color system.
+ * Colour per tone (5.0 BAZE tokens). `hoverBorder` is applied only when the
+ * tag is interactive (clickable / toggle).
  */
-const tagColorPaletteStyles = {
-    primary: {
-        soft: {
-            bgColor: 'primary.extralight',
-            borderColor: 'primary.lighter',
-            color: 'primary.darker',
-        },
-        solid: {
-            bgColor: 'blue.500',
-            borderColor: 'blue.500',
-            color: 'white',
-        },
-        outline: {
-            bgColor: 'transparent',
-            borderColor: 'primary.main',
-            color: 'primary.dark',
-        },
-    },
-    secondary: {
-        soft: {
-            bgColor: 'secondary.extralight',
-            borderColor: 'secondary.lighter',
-            color: 'secondary.darker',
-        },
-        solid: {
-            bgColor: 'violet.500',
-            borderColor: 'violet.500',
-            color: 'white',
-        },
-        outline: {
-            bgColor: 'transparent',
-            borderColor: 'secondary.main',
-            color: 'secondary.dark',
-        },
-    },
-    danger: {
-        soft: {
-            bgColor: 'danger.extralight',
-            borderColor: 'danger.lighter',
-            color: 'danger.darker',
-        },
-        solid: {
-            bgColor: 'rose.500',
-            borderColor: 'rose.500',
-            color: 'white',
-        },
-        outline: {
-            bgColor: 'transparent',
-            borderColor: 'danger.main',
-            color: 'danger.dark',
-        },
+const tagToneStyles = {
+    neutral: {
+        bgColor: 'bg.muted',
+        color: 'fg.default',
+        hoverBorder: 'secondary.border',
     },
     success: {
-        soft: {
-            bgColor: 'success.extralight',
-            borderColor: 'success.lighter',
-            color: 'success.darker',
-        },
-        solid: {
-            bgColor: 'green.600',
-            borderColor: 'green.600',
-            color: 'white',
-        },
-        outline: {
-            bgColor: 'transparent',
-            borderColor: 'success.main',
-            color: 'success.dark',
-        },
+        bgColor: 'success.bg',
+        color: 'success.fg',
+        hoverBorder: 'success.border',
     },
     warning: {
-        soft: {
-            bgColor: 'warning.extralight',
-            borderColor: 'warning.lighter',
-            color: 'warning.darker',
-        },
-        solid: {
-            // Deepened from gold.500 so white text clears AA and the chip matches the
-            // other solids (white on a saturated fill). White/gold.500 was only
-            // 2.39:1; white/gold.700 = 5.86:1 ✓ AA. Bright gold + near-black text read
-            // harsh on the dark canvas.
-            bgColor: 'gold.700',
-            borderColor: 'gold.700',
-            color: 'white',
-        },
-        outline: {
-            bgColor: 'transparent',
-            borderColor: 'warning.main',
-            // warning.dark (gold.700, 5.8:1 AA) over warning.main (gold.500, 3.0:1) —
-            // darker text also lifts this off the palette's AA-risk step.
-            color: 'warning.dark',
-        },
+        bgColor: 'warning.bg',
+        color: 'warning.fg',
+        hoverBorder: 'warning.border',
     },
-    neutral: {
-        soft: {
-            // Flip surface + border with the mode so the fg.default text stays legible
-            // in dark. Light values preserved (bg.muted → gray.100, border.default →
-            // gray.300).
-            bgColor: 'bg.muted',
-            borderColor: 'border.default',
-            color: 'fg.default',
-        },
-        solid: {
-            bgColor: 'gray.800',
-            borderColor: 'gray.800',
-            color: 'white',
-        },
-        outline: {
-            bgColor: 'transparent',
-            borderColor: 'border.strong', // gray.500 / gray.900 (_dark)
-            color: 'fg.muted',
-        },
+    danger: {
+        bgColor: 'danger.bg',
+        color: 'danger.fg',
+        hoverBorder: 'danger.border',
+    },
+    info: {
+        bgColor: 'info.bg',
+        color: 'info.fg',
+        hoverBorder: 'info.border',
     },
 };
-/**
- * Helper function to get tag styles for a given colorPalette and variant.
- */
-const getTagStyles = (colorPalette = 'neutral', variant = 'soft') => {
-    return tagColorPaletteStyles[colorPalette][variant];
-};
-/** All available color palettes */
-const tagColorPalettes = [
-    'primary',
-    'secondary',
-    'danger',
+/** Every 5.0 tone, in display order. */
+const tagTones = [
+    'neutral',
     'success',
     'warning',
-    'neutral',
+    'danger',
+    'info',
 ];
-/** All available variants */
-const tagVariants = ['soft', 'solid', 'outline'];
+/** Colour transition only — a focus ring or press must not lag. */
+const TAG_TRANSITION = {
+    transitionProperty: 'background-color, border-color, color',
+    transitionDuration: 'fast',
+    transitionTimingFunction: 'standard',
+};
+/**
+ * Resolve the colour styles for a tag. Precedence: `selected` > `category` >
+ * `tone`.
+ */
+const getTagStyles = ({ tone = 'neutral', selected = false, category, interactive = false, } = {}) => {
+    let colors;
+    if (selected) {
+        colors = {
+            bgColor: 'primary.main',
+            color: 'fg.onPrimary',
+            ...(interactive && {
+                _hover: { bgColor: 'primary.hover' },
+                _active: { bgColor: 'primary.active' },
+            }),
+        };
+    }
+    else if (category) {
+        colors = {
+            bgColor: `category.${category}.surface`,
+            color: 'fg.default',
+            ...(interactive && { _hover: { borderColor: 'secondary.border' } }),
+        };
+    }
+    else {
+        const { bgColor, color, hoverBorder } = tagToneStyles[tone] ?? tagToneStyles.neutral;
+        colors = {
+            bgColor,
+            color,
+            ...(interactive && { _hover: { borderColor: hoverBorder } }),
+        };
+    }
+    return {
+        borderColor: 'transparent',
+        ...colors,
+        ...TAG_TRANSITION,
+        cursor: interactive ? 'pointer' : undefined,
+        _disabled: { ...disabledControl, cursor: 'not-allowed' },
+    };
+};
+const PLAIN_PALETTES = new Set(['primary', 'secondary', 'neutral']);
+const STATUS_PALETTES = new Set(['danger', 'success', 'warning']);
+/**
+ * Map 4.x `colorPalette` × `variant` (or Chip's `colorScheme` × `variant`) to
+ * 5.0 Tag props. A missing palette / variant takes the 4.x default of the
+ * component it came from — Tag was `neutral` / `soft`, Chip `primary` / `soft`
+ * (Chip passes its own default in).
+ *
+ * | palette \ variant           | soft (or —)    | solid                  | outline                 |
+ * |-----------------------------|----------------|------------------------|-------------------------|
+ * | primary · secondary · neutral | neutral        | selected               | neutral                 |
+ * | danger · success · warning  | that tone      | that tone (needsHuman) | neutral (needsHuman)    |
+ * | anything else               | neutral (needsHuman, as does any unknown variant)                  |
+ *
+ * `neutral`/`secondary` × `solid` → `selected`, same as `primary`: 4.x
+ * call sites toggled `colorScheme={on ? 'primary' : 'neutral'}` or
+ * `variant={on ? 'solid' : 'soft'}`, and both arms must stay distinct.
+ * Selected here is the *look* only — it does not make the tag a toggle
+ * (no hover, no `aria-pressed`); only an explicit `selected` prop does.
+ */
+const mapLegacyTagProps = (colorPalette, variant) => {
+    const palette = colorPalette ?? 'neutral';
+    const v = variant ?? 'soft';
+    const plain = PLAIN_PALETTES.has(palette);
+    const status = STATUS_PALETTES.has(palette);
+    if (!plain && !status)
+        return { tone: 'neutral', needsHuman: true };
+    switch (v) {
+        case 'soft':
+            return status
+                ? { tone: palette, needsHuman: false }
+                : { tone: 'neutral', needsHuman: false };
+        case 'solid':
+            return status
+                ? { tone: palette, needsHuman: true }
+                : { tone: 'neutral', selected: true, needsHuman: false };
+        case 'outline':
+            return { tone: 'neutral', needsHuman: status };
+        default:
+            return { tone: 'neutral', needsHuman: true };
+    }
+};
+const warned = new Set();
+/**
+ * Warn once per (component, palette, variant) in development, naming the
+ * combination and what it now renders as. Exported for tests.
+ */
+const warnLegacyTagProps = (component, colorPalette, variant, resolved) => {
+    if (!isDev())
+        return;
+    const key = `${component}|${String(colorPalette)}|${String(variant)}`;
+    if (warned.has(key))
+        return;
+    warned.add(key);
+    const paletteProp = component === 'Chip' ? 'colorScheme' : 'colorPalette';
+    const to = resolved.selected
+        ? '<Tag selected>'
+        : resolved.tone === 'neutral'
+            ? '<Tag>'
+            : `<Tag tone="${resolved.tone}">`;
+    const lead = component === 'Chip'
+        ? '<Chip> is deprecated since 5.0 and will be removed in 6.0. '
+        : '';
+    console.warn(`[logician-ui] ${lead}<${component} ${paletteProp}="${String(colorPalette)}" variant="${String(variant)}"> uses the 4.x API, which 5.0 removed. ` +
+        `Rendering as ${to}.` +
+        (resolved.needsHuman
+            ? ' This combination has no exact 5.0 equivalent — please choose tone / selected / category by hand.'
+            : ' Replace the props with that.'));
+};
 
-export { getTagStyles, tagColorPaletteStyles, tagColorPalettes, tagVariants };
+export { getTagStyles, mapLegacyTagProps, tagToneStyles, tagTones, warnLegacyTagProps };
 //# sourceMappingURL=Tag.styles.mjs.map

package/dist/components/Tag/Tag.styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.mjs","sources":["../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAIA;;;;;;AAMG;AACI,MAAM,qBAAqB,GAG9B;AACF,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,oBAAoB;AAC7B,YAAA,WAAW,EAAE,iBAAiB;AAC9B,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,WAAW,EAAE,UAAU;AACvB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,KAAK,EAAE,cAAc;AACtB,SAAA;AACF,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,sBAAsB;AAC/B,YAAA,WAAW,EAAE,mBAAmB;AAChC,YAAA,KAAK,EAAE,kBAAkB;AAC1B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,YAAY;AACrB,YAAA,WAAW,EAAE,YAAY;AACzB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,WAAW,EAAE,gBAAgB;AAC7B,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,mBAAmB;AAC5B,YAAA,WAAW,EAAE,gBAAgB;AAC7B,YAAA,KAAK,EAAE,eAAe;AACvB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,WAAW,EAAE,UAAU;AACvB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,WAAW,EAAE,aAAa;AAC1B,YAAA,KAAK,EAAE,aAAa;AACrB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,oBAAoB;AAC7B,YAAA,WAAW,EAAE,iBAAiB;AAC9B,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,KAAK,EAAE,cAAc;AACtB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,oBAAoB;AAC7B,YAAA,WAAW,EAAE,iBAAiB;AAC9B,YAAA,KAAK,EAAE,gBAAgB;AACxB,SAAA;AACD,QAAA,KAAK,EAAE;;;;;AAKL,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,WAAW,EAAE,UAAU;AACvB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,WAAW,EAAE,cAAc;;;AAG3B,YAAA,KAAK,EAAE,cAAc;AACtB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE;;;;AAIJ,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,WAAW,EAAE,gBAAgB;AAC7B,YAAA,KAAK,EAAE,YAAY;AACpB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,WAAW,EAAE,UAAU;AACvB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,aAAa;YACtB,WAAW,EAAE,eAAe;AAC5B,YAAA,KAAK,EAAE,UAAU;AAClB,SAAA;AACF,KAAA;;AAGH;;AAEG;AACI,MAAM,YAAY,GAAG,CAC1B,YAAA,GAAgC,SAAS,EACzC,OAAA,GAAsB,MAAM,KACH;AACzB,IAAA,OAAO,qBAAqB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC;AACrD;AAEA;AACO,MAAM,gBAAgB,GAAsB;IACjD,SAAS;IACT,WAAW;IACX,QAAQ;IACR,SAAS;IACT,SAAS;IACT,SAAS;;AAaX;AACO,MAAM,WAAW,GAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS;;;;"}
+{"version":3,"file":"Tag.styles.mjs","sources":["../../../src/components/Tag/Tag.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/Tag/Tag.types.d.ts

@@ -1,45 +1,66 @@
-import type { ElementType } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import { TagRootProps } from '@chakra-ui/react';
+import type { SystemHue } from '@/theme/colors';
 import type { PolymorphicProps } from '../../types/polymorphic';
 /**
- * Tag color schemes - determines the semantic color of the tag.
+ * Tag tones (5.0).
  *
- * This prop overrides Chakra UI's native `colorPalette` prop to provide
- * a controlled set of color options that align with our design system.
+ * - `neutral` (default): neutral `bg.muted` with `fg.default` text (hover border `secondary.border`).
+ * - `success` / `warning` / `danger` / `info`: status family `.bg` + `.fg`.
+ *   Use them only when the tag reports a status.
  */
-export type TagColorPalette = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'neutral';
+export type TagTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 /**
- * Tag variants - determines the visual style of the tag.
- *
- * - soft: Light background tint with darker text (default)
- * - solid: Filled background with contrasting text
- * - outline: Transparent background with colored border
+ * 4.x colour palettes. Removed from `TagProps` in 5.0; still accepted at
+ * runtime (mapped to `tone` / `selected`) with a one-time dev warning.
+ * @deprecated Use `tone`, `selected` or `category`.
  */
-export type TagVariant = 'soft' | 'solid' | 'outline';
+export type TagColorPalette = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'neutral';
 /**
- * TagProps uses a two-dimensional variant system:
- * - `colorPalette`: What semantic color (primary, secondary, danger, etc.)
- * - `variant`: How it looks visually (soft, solid, outline)
- *
- * This matches the Button and Chip component architecture for consistency.
- *
- * @example
- * ```tsx
- * <Tag colorPalette="primary" variant="soft">Category</Tag>
- * <Tag colorPalette="danger" variant="solid">Error</Tag>
- * <Tag colorPalette="success" variant="outline">
- *   Completed
- *   <TagCloseButton />
- * </Tag>
- * ```
+ * 4.x visual variants. Removed from `TagProps` in 5.0 (`outline` is gone).
+ * @deprecated Use `tone`, `selected` or `category`.
  */
+export type TagVariant = 'soft' | 'solid' | 'outline';
 export type TagOwnProps = Omit<TagRootProps, 'colorPalette' | 'variant' | 'as'> & {
-    colorPalette?: TagColorPalette;
-    variant?: TagVariant;
+    /**
+     * Colour role of the tag. Ignored while `selected` is true or `category`
+     * is set.
+     * @default 'neutral'
+     */
+    tone?: TagTone;
+    /**
+     * Filter-chip "on" state: black `primary.main` fill with `fg.onPrimary`
+     * text. Passing it (true OR false) marks the tag as a toggle, so it gets
+     * the interactive hover; with `as="button"` it also sets `aria-pressed`.
+     */
+    selected?: boolean;
+    /**
+     * Decorative category colour (no status meaning): `category.{hue}.surface`
+     * fill with `fg.default` text. `icon` is coloured `category.{hue}.fg`.
+     */
+    category?: SystemHue;
+    /**
+     * Leading icon / mark. Takes `category.{hue}.fg` when `category` is set,
+     * otherwise the tag's text colour.
+     */
+    icon?: ReactNode;
+    /**
+     * Disabled: fixed `disabled.bg` / `disabled.fg`, no hover, clicks ignored.
+     * With `as="button"` it sets the native `disabled` attribute.
+     */
+    disabled?: boolean;
 };
 /**
  * Props for `Tag`, typed for whatever element `as` renders. Defaults to
- * `'span'`, so the bare type is unchanged.
+ * `'span'`. A filter chip should render `as="button"` (or `as="a"` when it
+ * navigates) so it is focusable and keyboard-operable.
+ *
+ * ```tsx
+ * <Tag>Draft</Tag>
+ * <Tag tone="success">Active</Tag>
+ * <Tag as="button" selected={on} onClick={toggle}>Images</Tag>
+ * <Tag category="blue" icon="#">design</Tag>
+ * ```
  */
 export type TagProps<TElement extends ElementType = 'span'> = PolymorphicProps<TElement, TagOwnProps>;
 //# sourceMappingURL=Tag.types.d.ts.map

package/dist/components/Tag/Tag.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACZ,cAAc,GAAG,SAAS,GAAG,IAAI,CAClC,GAAG;IACF,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,QAAQ,CAAC,QAAQ,SAAS,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC5E,QAAQ,EACR,WAAW,CACZ,CAAC"}
+{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E;;;;GAIG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACZ,cAAc,GAAG,SAAS,GAAG,IAAI,CAClC,GAAG;IACF;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,QAAQ,CAAC,QAAQ,SAAS,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC5E,QAAQ,EACR,WAAW,CACZ,CAAC"}

package/dist/components/Tag/TagCloseButton/TagCloseButton.d.ts

@@ -1,3 +1,8 @@
 import { TagCloseButtonProps } from './TagCloseButton.types';
+/**
+ * The remove (×) trigger inside a `Tag`. Inherits the tag's text colour and
+ * sits at reduced opacity until hovered, so the label stays the loudest thing
+ * in the tag.
+ */
 export declare const TagCloseButton: import("react").ForwardRefExoticComponent<TagCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=TagCloseButton.d.ts.map

package/dist/components/Tag/TagCloseButton/TagCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,cAAc,mHAQ1B,CAAC"}
+{"version":3,"file":"TagCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,cAAc,mHAmB1B,CAAC"}

package/dist/components/Tag/TagCloseButton/TagCloseButton.js

@@ -4,9 +4,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
+var focusRing = require('../../../utils/focusRing.js');
 
+/**
+ * The remove (×) trigger inside a `Tag`. Inherits the tag's text colour and
+ * sits at reduced opacity until hovered, so the label stays the loudest thing
+ * in the tag.
+ */
 const TagCloseButton = React.forwardRef(({ ...rest }, ref) => {
-    return (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { cursor: "pointer", ...rest, ref: ref }) }));
+    return (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { cursor: "pointer", color: "currentColor", opacity: 0.6, transitionProperty: "opacity", transitionDuration: "fast", transitionTimingFunction: "standard", _hover: { opacity: 1 }, ...focusRing.focusRing, ...rest, ref: ref }) }));
 });
 TagCloseButton.displayName = 'TagCloseButton';
 

package/dist/components/Tag/TagCloseButton/TagCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseButton.js","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","Tag"],"mappings":";;;;;;;AAKO,MAAM,cAAc,GAAGA,gBAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEC,eAACC,SAAG,CAAC,UAAU,EAAA,EAAA,QAAA,EACbD,cAAA,CAACC,SAAG,CAAC,YAAY,EAAA,EAAC,MAAM,EAAC,SAAS,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,EAAA,CAC1C;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"TagCloseButton.js","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","Tag","focusRing"],"mappings":";;;;;;;;AAOA;;;;AAIG;AACI,MAAM,cAAc,GAAGA,gBAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEC,cAAA,CAACC,SAAG,CAAC,UAAU,cACbD,cAAA,CAACC,SAAG,CAAC,YAAY,EAAA,EACf,MAAM,EAAC,SAAS,EAChB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EACZ,kBAAkB,EAAC,SAAS,EAC5B,kBAAkB,EAAC,MAAM,EACzB,wBAAwB,EAAC,UAAU,EACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAA,GAClBC,mBAAS,EAAA,GACT,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR,EAAA,CACa;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/components/Tag/TagCloseButton/TagCloseButton.mjs

@@ -2,9 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Tag } from '@chakra-ui/react';
+import { focusRing } from '../../../utils/focusRing.mjs';
 
+/**
+ * The remove (×) trigger inside a `Tag`. Inherits the tag's text colour and
+ * sits at reduced opacity until hovered, so the label stays the loudest thing
+ * in the tag.
+ */
 const TagCloseButton = forwardRef(({ ...rest }, ref) => {
-    return (jsx(Tag.EndElement, { children: jsx(Tag.CloseTrigger, { cursor: "pointer", ...rest, ref: ref }) }));
+    return (jsx(Tag.EndElement, { children: jsx(Tag.CloseTrigger, { cursor: "pointer", color: "currentColor", opacity: 0.6, transitionProperty: "opacity", transitionDuration: "fast", transitionTimingFunction: "standard", _hover: { opacity: 1 }, ...focusRing, ...rest, ref: ref }) }));
 });
 TagCloseButton.displayName = 'TagCloseButton';
 

package/dist/components/Tag/TagCloseButton/TagCloseButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseButton.mjs","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAKO,MAAM,cAAc,GAAG,UAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEA,IAAC,GAAG,CAAC,UAAU,EAAA,EAAA,QAAA,EACbA,GAAA,CAAC,GAAG,CAAC,YAAY,EAAA,EAAC,MAAM,EAAC,SAAS,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,EAAA,CAC1C;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"TagCloseButton.mjs","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAOA;;;;AAIG;AACI,MAAM,cAAc,GAAG,UAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEA,GAAA,CAAC,GAAG,CAAC,UAAU,cACbA,GAAA,CAAC,GAAG,CAAC,YAAY,EAAA,EACf,MAAM,EAAC,SAAS,EAChB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EACZ,kBAAkB,EAAC,SAAS,EAC5B,kBAAkB,EAAC,MAAM,EACzB,wBAAwB,EAAC,UAAU,EACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAA,GAClB,SAAS,EAAA,GACT,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR,EAAA,CACa;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/components/Tag/index.d.ts

@@ -1,7 +1,8 @@
 import { Icon } from '@chakra-ui/react';
 export { Tag } from './Tag';
-export { getTagStyles, tagColorPalettes, tagColorPaletteStyles, tagVariants, } from './Tag.styles';
-export type { TagColorPalette, TagOwnProps, TagProps, TagVariant, } from './Tag.types';
+export type { LegacyTagResolution, TagStyleOptions } from './Tag.styles';
+export { getTagStyles, mapLegacyTagProps, tagTones, tagToneStyles, } from './Tag.styles';
+export type { TagColorPalette, TagOwnProps, TagProps, TagTone, TagVariant, } from './Tag.types';
 export * from './TagCloseButton';
 export * from './TagLabel';
 /**

package/dist/components/Tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,eAAe,EACf,WAAW,EACX,QAAQ,EACR,UAAU,GACX,MAAM,aAAa,CAAC;AACrB,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAE3B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AAE/B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,eAAe,EACf,WAAW,EACX,QAAQ,EACR,OAAO,EACP,UAAU,GACX,MAAM,aAAa,CAAC;AACrB,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAE3B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AAE/B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,CAAC"}

package/dist/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,QAAQ,+GAkGpB,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,QAAQ,+GAmGpB,CAAC"}

package/dist/components/Textarea/Textarea.js

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
 var formControls = require('../../theme/formControls.js');
+var disabledControl = require('../../utils/disabledControl.js');
 var mergeCss = require('../../utils/mergeCss.js');
 
 const Textarea = React.forwardRef(({ placeholder, onChange, value: propValue, _focusVisible, _hover, _focus, disabled, invalid, readOnly, borderColor, css, ...props }, ref) => {
@@ -24,19 +25,22 @@ const Textarea = React.forwardRef(({ placeholder, onChange, value: propValue, _f
         // `Textarea` recipe does not — so the focus ring defaults to
         // `colorPalette.focusRing` (gray.400) and ends up visibly
         // different from Input/Select. Mirror Input's chain explicitly.
-        focusRingColor: invalid ? 'danger.main' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.main' : 'border.default'), _hover: {
-            borderColor: invalid ? 'danger.main' : 'primary.lighter',
+        focusRingColor: invalid ? 'danger.solid' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.solid' : 'border.control'), _hover: {
+            borderColor: invalid ? 'danger.solid' : 'fg.icon',
             ..._hover,
         }, _focus: {
-            borderColor: invalid ? 'danger.main' : 'primary.main',
+            borderColor: invalid ? 'danger.solid' : 'primary.main',
+            boxShadow: invalid
+                ? 'none'
+                : '0 0 0 1px var(--chakra-colors-primary-main)',
             ..._focus,
         }, _invalid: {
-            borderColor: 'danger.main',
+            borderColor: 'danger.solid',
             _hover: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
             _focus: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
         }, _readOnly: {
             opacity: 1,
@@ -45,14 +49,12 @@ const Textarea = React.forwardRef(({ placeholder, onChange, value: propValue, _f
             color: 'fg.muted',
             borderColor: 'border.subtle',
         }, _disabled: {
-            opacity: 1,
+            ...disabledControl.disabledControl,
             cursor: 'not-allowed',
-            bg: 'bg.subtle',
-            color: { base: 'gray.1000', _dark: 'gray.400' },
             fontWeight: 'semibold',
         }, ...props, css: mergeCss.mergeCss(formControls.noZoomOnFocus, {
             '--focus-color': 'var(--chakra-colors-primary-main)',
-            '--error-color': 'var(--chakra-colors-danger-main)',
+            '--error-color': 'var(--chakra-colors-danger-solid)',
         }, css) }));
 });
 Textarea.displayName = 'Textarea';

package/dist/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["forwardRef","useState","useEffect","_jsx","ChakraTextarea","mergeCss","noZoomOnFocus"],"mappings":";;;;;;;;;AAQO,MAAM,QAAQ,GAAGA,gBAAU,CAChC,CACE,EACE,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAE9C,SAAS,CAAC;IAEZC,eAAS,CAAC,MAAK;QACb,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,YAAY,GAAG,CAAC,CAAmC,KAAI;AAC3D,QAAA,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC;QACb;AACF,IAAA,CAAC;AAED,IAAA,QACEC,cAAA,CAACC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,IAAI,SAAS,EAClC,MAAM,EAAC,MAAM,EACb,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY;;;;;;AAMlB,QAAA,cAAc,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,EACxD,WAAW,EACT,WAAW,KAAK,OAAO,GAAG,aAAa,GAAG,gBAAgB,CAAC,EAE7D,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,aAAa,GAAG,iBAAiB;AACxD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc;AACrD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,aAAa;AAC1B,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,aAAa;AAC3B,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,aAAa;AAC3B,aAAA;AACF,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,WAAW,EAAE,eAAe;AAC7B,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;YACf,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE;AAC/C,YAAA,UAAU,EAAE,UAAU;AACvB,SAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAEC,iBAAQ,CACXC,0BAAa,EACb;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,eAAe,EAAE,kCAAkC;AACpD,SAAA,EACD,GAAG,CACJ,EAAA,CACD;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["forwardRef","useState","useEffect","_jsx","ChakraTextarea","disabledControl","mergeCss","noZoomOnFocus"],"mappings":";;;;;;;;;;AASO,MAAM,QAAQ,GAAGA,gBAAU,CAChC,CACE,EACE,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAE9C,SAAS,CAAC;IAEZC,eAAS,CAAC,MAAK;QACb,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,YAAY,GAAG,CAAC,CAAmC,KAAI;AAC3D,QAAA,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC;QACb;AACF,IAAA,CAAC;AAED,IAAA,QACEC,cAAA,CAACC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,IAAI,SAAS,EAClC,MAAM,EAAC,MAAM,EACb,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY;;;;;;AAMlB,QAAA,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc,EACzD,WAAW,EACT,WAAW,KAAK,OAAO,GAAG,cAAc,GAAG,gBAAgB,CAAC,EAE9D,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,SAAS;AACjD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc;AACtD,YAAA,SAAS,EAAE;AACT,kBAAE;AACF,kBAAE,6CAA6C;AACjD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,cAAc;AAC5B,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,cAAc;AAC5B,aAAA;AACF,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,WAAW,EAAE,eAAe;AAC7B,SAAA,EACD,SAAS,EAAE;AACT,YAAA,GAAGC,+BAAe;AAClB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,UAAU,EAAE,UAAU;AACvB,SAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAEC,iBAAQ,CACXC,0BAAa,EACb;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,eAAe,EAAE,mCAAmC;AACrD,SAAA,EACD,GAAG,CACJ,EAAA,CACD;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/Textarea/Textarea.mjs

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import { Textarea as Textarea$1 } from '@chakra-ui/react';
 import { noZoomOnFocus } from '../../theme/formControls.mjs';
+import { disabledControl } from '../../utils/disabledControl.mjs';
 import { mergeCss } from '../../utils/mergeCss.mjs';
 
 const Textarea = forwardRef(({ placeholder, onChange, value: propValue, _focusVisible, _hover, _focus, disabled, invalid, readOnly, borderColor, css, ...props }, ref) => {
@@ -22,19 +23,22 @@ const Textarea = forwardRef(({ placeholder, onChange, value: propValue, _focusVi
         // `Textarea` recipe does not — so the focus ring defaults to
         // `colorPalette.focusRing` (gray.400) and ends up visibly
         // different from Input/Select. Mirror Input's chain explicitly.
-        focusRingColor: invalid ? 'danger.main' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.main' : 'border.default'), _hover: {
-            borderColor: invalid ? 'danger.main' : 'primary.lighter',
+        focusRingColor: invalid ? 'danger.solid' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.solid' : 'border.control'), _hover: {
+            borderColor: invalid ? 'danger.solid' : 'fg.icon',
             ..._hover,
         }, _focus: {
-            borderColor: invalid ? 'danger.main' : 'primary.main',
+            borderColor: invalid ? 'danger.solid' : 'primary.main',
+            boxShadow: invalid
+                ? 'none'
+                : '0 0 0 1px var(--chakra-colors-primary-main)',
             ..._focus,
         }, _invalid: {
-            borderColor: 'danger.main',
+            borderColor: 'danger.solid',
             _hover: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
             _focus: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
         }, _readOnly: {
             opacity: 1,
@@ -43,14 +47,12 @@ const Textarea = forwardRef(({ placeholder, onChange, value: propValue, _focusVi
             color: 'fg.muted',
             borderColor: 'border.subtle',
         }, _disabled: {
-            opacity: 1,
+            ...disabledControl,
             cursor: 'not-allowed',
-            bg: 'bg.subtle',
-            color: { base: 'gray.1000', _dark: 'gray.400' },
             fontWeight: 'semibold',
         }, ...props, css: mergeCss(noZoomOnFocus, {
             '--focus-color': 'var(--chakra-colors-primary-main)',
-            '--error-color': 'var(--chakra-colors-danger-main)',
+            '--error-color': 'var(--chakra-colors-danger-solid)',
         }, css) }));
 });
 Textarea.displayName = 'Textarea';