@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/dist/components/display/card/card-header.d.ts

@@ -4,8 +4,7 @@ export type CardHeaderProps = useRender.ComponentProps<'div'>;
 /**
  * Topo do card, onde ficam título e descrição.
  *
- * O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
- * cópia na mesma rodada.
+ * O `Dialog.Header` copia estas classes. Uma mudança aqui vale para a cópia na mesma rodada.
  */
 export declare const CardHeader: {
   (props: CardHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/display/card/card-header.js

@@ -4,8 +4,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Topo do card, onde ficam título e descrição.
 *
-* O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
-* cópia na mesma rodada.
+* O `Dialog.Header` copia estas classes. Uma mudança aqui vale para a cópia na mesma rodada.
 */
 const CardHeader = (props) => {
 	const { render, className, ...rest } = props;

package/dist/components/display/card/card-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-header.js","names":[],"sources":["../../../../src/components/display/card/card-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do card, onde ficam título e descrição.\n *\n * O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--card-padding)',\n        'pt-(--card-padding)',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do card embaixo.\n        'last:pb-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardHeader.displayName = 'Card.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}
+{"version":3,"file":"card-header.js","names":[],"sources":["../../../../src/components/display/card/card-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do card, onde ficam título e descrição.\n *\n * O `Dialog.Header` copia estas classes. Uma mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--card-padding)',\n        'pt-(--card-padding)',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do card embaixo.\n        'last:pb-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardHeader.displayName = 'Card.Header';\n"],"mappings":";;;;;;;;AAUA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/components/display/card/card-title.d.ts

@@ -13,8 +13,7 @@ export type CardTitleProps = MergeOverride<useRender.ComponentProps<'h3'>, {
 /**
  * Título do card, em tamanho fixo.
  *
- * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
- * cópia na mesma rodada.
+ * O `Dialog.Title` copia estas classes. Uma mudança aqui vale para a cópia na mesma rodada.
  */
 export declare const CardTitle: {
   (props: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/display/card/card-title.js

@@ -4,8 +4,7 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Título do card, em tamanho fixo.
 *
-* O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
-* cópia na mesma rodada.
+* O `Dialog.Title` copia estas classes. Uma mudança aqui vale para a cópia na mesma rodada.
 */
 const CardTitle = (props) => {
 	const { level = 3, render, className, ...rest } = props;

package/dist/components/display/card/card-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-title.js","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardTitleProps = MergeOverride<\n  useRender.ComponentProps<'h3'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência. Com `render`, a tag\n     * do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do card, em tamanho fixo.\n *\n * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardTitle = (props: CardTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Title',\n    className: mergeTwClassNames(\n      ['text-base', 'leading-6', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardTitle.displayName = 'Card.Title';\n"],"mappings":";;;;;;;;;AAuBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAa;GAAa;GAAe;GAAgB;EAAc,GACxE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,UAAU,cAAc"}
+{"version":3,"file":"card-title.js","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardTitleProps = MergeOverride<\n  useRender.ComponentProps<'h3'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência. Com `render`, a tag\n     * do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do card, em tamanho fixo.\n *\n * O `Dialog.Title` copia estas classes. Uma mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardTitle = (props: CardTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Title',\n    className: mergeTwClassNames(\n      ['text-base', 'leading-6', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardTitle.displayName = 'Card.Title';\n"],"mappings":";;;;;;;;AAsBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAa;GAAa;GAAe;GAAgB;EAAc,GACxE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,UAAU,cAAc"}

package/dist/components/display/clipboard/clipboard-indicator.js

@@ -3,7 +3,7 @@ import { Icon } from "../icon/icon.js";
 import { useClipboardContext } from "./use-clipboard-context.js";
 import { mergeProps, useRender } from "@base-ui/react";
 import { jsx } from "react/jsx-runtime";
-import { CheckIcon, ClipboardIcon } from "@phosphor-icons/react";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 //#region src/components/display/clipboard/clipboard-indicator.tsx
 /**
 * Conteúdo que alterna entre os estados de repouso e de cópia.
@@ -18,7 +18,7 @@ import { CheckIcon, ClipboardIcon } from "@phosphor-icons/react";
 * encolhe o ícone, que fica centralizado pelo botão.
 */
 const ClipboardIndicator = (props) => {
-	const { render, className, children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(ClipboardIcon, {}) }), copied = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CheckIcon, {}) }), ...rest } = props;
+	const { render, className, children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CopyIcon, {}) }), copied = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CheckIcon, {}) }), ...rest } = props;
 	const clipboard = useClipboardContext();
 	const zagProps = clipboard.getIndicatorProps({ copied: clipboard.copied });
 	const baseProps = {

package/dist/components/display/clipboard/clipboard-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard-indicator.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { CheckIcon, ClipboardIcon } from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\ntype IndicatorProps = {\n  /**\n   * Conteúdo exibido enquanto a cópia está em destaque.\n   *\n   * O destaque dura o tempo definido em `timeout` no `Clipboard.Root`.\n   *\n   * @default <Icon render={<CheckIcon />} />\n   */\n  copied?: React.ReactNode;\n};\n\n/**\n * Props do `Clipboard.Indicator`.\n */\nexport type ClipboardIndicatorProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  IndicatorProps\n>;\n\n/**\n * Conteúdo que alterna entre os estados de repouso e de cópia.\n *\n * Renderiza `children` normalmente e `copied` logo após a cópia. Os dois têm\n * ícone padrão, então a forma mais curta de usar é sem nenhuma prop.\n *\n * Renderiza um `span` por padrão para ser válido dentro do\n * `Clipboard.Trigger`, que é um `button`, e sem caixa própria (`contents`): o\n * ícone ou texto de dentro é que ocupa o lugar no layout. Assim, passado como\n * `icon` de um `IconButton`, o tamanho que o `Icon` aplica ao invólucro não\n * encolhe o ícone, que fica centralizado pelo botão.\n */\nexport const ClipboardIndicator = (props: ClipboardIndicatorProps) => {\n  const {\n    render,\n    className,\n    children = <Icon render={<ClipboardIcon />} />,\n    copied = <Icon render={<CheckIcon />} />,\n    ...rest\n  } = props;\n\n  const clipboard = useClipboardContext();\n\n  // O Zag esconde o indicador quando o `copied` informado não bate com o\n  // estado atual. Aqui os dois conteúdos vivem no mesmo elemento, então o\n  // estado real é repassado para que o indicador nunca seja escondido.\n  const zagProps = clipboard.getIndicatorProps({\n    copied: clipboard.copied,\n  });\n\n  const baseProps = {\n    'data-component': 'Clipboard.Indicator',\n    className: mergeTwClassNames(['contents'], className),\n    children: clipboard.copied ? copied : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nClipboardIndicator.displayName = 'Clipboard.Indicator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EACJ,QACA,WACA,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA,GAC7C,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,WAAD,CAAY,CAAA,EAAI,CAAA,GACvC,GAAG,SACD;CAEJ,MAAM,YAAY,oBAAoB;CAKtC,MAAM,WAAW,UAAU,kBAAkB,EAC3C,QAAQ,UAAU,OACpB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,UAAU,GAAG,SAAS;EACpD,UAAU,UAAU,SAAS,SAAS;CACxC;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"clipboard-indicator.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { CheckIcon, CopyIcon } from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\ntype IndicatorProps = {\n  /**\n   * Conteúdo exibido enquanto a cópia está em destaque.\n   *\n   * O destaque dura o tempo definido em `timeout` no `Clipboard.Root`.\n   *\n   * @default <Icon render={<CheckIcon />} />\n   */\n  copied?: React.ReactNode;\n};\n\n/**\n * Props do `Clipboard.Indicator`.\n */\nexport type ClipboardIndicatorProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  IndicatorProps\n>;\n\n/**\n * Conteúdo que alterna entre os estados de repouso e de cópia.\n *\n * Renderiza `children` normalmente e `copied` logo após a cópia. Os dois têm\n * ícone padrão, então a forma mais curta de usar é sem nenhuma prop.\n *\n * Renderiza um `span` por padrão para ser válido dentro do\n * `Clipboard.Trigger`, que é um `button`, e sem caixa própria (`contents`): o\n * ícone ou texto de dentro é que ocupa o lugar no layout. Assim, passado como\n * `icon` de um `IconButton`, o tamanho que o `Icon` aplica ao invólucro não\n * encolhe o ícone, que fica centralizado pelo botão.\n */\nexport const ClipboardIndicator = (props: ClipboardIndicatorProps) => {\n  const {\n    render,\n    className,\n    children = <Icon render={<CopyIcon />} />,\n    copied = <Icon render={<CheckIcon />} />,\n    ...rest\n  } = props;\n\n  const clipboard = useClipboardContext();\n\n  // O Zag esconde o indicador quando o `copied` informado não bate com o\n  // estado atual. Aqui os dois conteúdos vivem no mesmo elemento, então o\n  // estado real é repassado para que o indicador nunca seja escondido.\n  const zagProps = clipboard.getIndicatorProps({\n    copied: clipboard.copied,\n  });\n\n  const baseProps = {\n    'data-component': 'Clipboard.Indicator',\n    className: mergeTwClassNames(['contents'], className),\n    children: clipboard.copied ? copied : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nClipboardIndicator.displayName = 'Clipboard.Indicator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EACJ,QACA,WACA,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,UAAD,CAAW,CAAA,EAAI,CAAA,GACxC,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,WAAD,CAAY,CAAA,EAAI,CAAA,GACvC,GAAG,SACD;CAEJ,MAAM,YAAY,oBAAoB;CAKtC,MAAM,WAAW,UAAU,kBAAkB,EAC3C,QAAQ,UAAU,OACpB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,UAAU,GAAG,SAAS;EACpD,UAAU,UAAU,SAAS,SAAS;CACxC;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,mBAAmB,cAAc"}

package/dist/components/display/status/status-variants.d.ts

@@ -3,7 +3,7 @@ import { ColorSchemeSemantic } from "../../../types/color-scheme.js";
 export type StatusVariants = {
   /**
    * Cor do ponto, entre as cores de estado: `red`, `green`, `blue` e `amber`, mais `gray` e
-   * `brand`. O texto não muda de cor.
+   * `accent`. O texto não muda de cor.
    *
    * @default 'gray'
    */
@@ -24,7 +24,7 @@ export declare const statusDefaultVariants: Required<StatusVariants>;
  * do Windows sem tirar a adaptação do texto.
  */
 export declare const statusVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "amber" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/display/status/status-variants.js

@@ -25,12 +25,12 @@ const statusVariants = cva([
 ], {
 	variants: {
 		colorScheme: {
-			gray: "[--status-dot:var(--color-gray-9)]",
-			brand: "[--status-dot:var(--color-brand-9)]",
-			red: "[--status-dot:var(--color-red-9)]",
-			green: "[--status-dot:var(--color-green-9)]",
-			blue: "[--status-dot:var(--color-blue-9)]",
-			amber: "[--status-dot:var(--color-amber-9)]"
+			gray: "[--status-dot:var(--gray-9)]",
+			accent: "[--status-dot:var(--accent-9)]",
+			red: "[--status-dot:var(--red-9)]",
+			green: "[--status-dot:var(--green-9)]",
+			blue: "[--status-dot:var(--blue-9)]",
+			amber: "[--status-dot:var(--amber-9)]"
 		},
 		size: {
 			sm: "text-xs",

package/dist/components/display/status/status-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-variants.js","names":[],"sources":["../../../../src/components/display/status/status-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type StatusVariants = {\n  /**\n   * Cor do ponto, entre as cores de estado: `red`, `green`, `blue` e `amber`, mais `gray` e\n   * `brand`. O texto não muda de cor.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Tamanho do texto, que o ponto acompanha (`0.64em`): `sm` = `text-xs`, `md` = `text-sm`, `lg` =\n   * `text-base`.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n};\n\nexport const statusDefaultVariants: Required<StatusVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n};\n\n/**\n * O `colorScheme` só declara `--status-dot`, e o ponto, um `::before` do próprio elemento, a lê.\n * Sendo pseudo-elemento, ele fica fora da árvore de acessibilidade: quem diz o estado é o texto.\n * O `forced-color-adjust-none` fica só no ponto, para a cor sobreviver ao modo de alto contraste\n * do Windows sem tirar a adaptação do texto.\n */\nexport const statusVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'gap-2',\n    'align-middle',\n\n    'text-gray-12',\n\n    'before:content-[\"\"]',\n    'before:size-[0.64em]',\n    'before:shrink-0',\n    'before:rounded-full',\n    'before:bg-(--status-dot)',\n    'before:forced-color-adjust-none',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: '[--status-dot:var(--color-gray-9)]',\n        brand: '[--status-dot:var(--color-brand-9)]',\n        red: '[--status-dot:var(--color-red-9)]',\n        green: '[--status-dot:var(--color-green-9)]',\n        blue: '[--status-dot:var(--color-blue-9)]',\n        amber: '[--status-dot:var(--color-amber-9)]',\n      },\n      size: {\n        sm: 'text-xs',\n        md: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: statusDefaultVariants,\n  },\n);\n"],"mappings":";;AAoBA,MAAa,wBAAkD;CAC7D,aAAa;CACb,MAAM;AACR;;;;;;;AAQA,MAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;GACN,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;AACnB,CACF"}
+{"version":3,"file":"status-variants.js","names":[],"sources":["../../../../src/components/display/status/status-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type StatusVariants = {\n  /**\n   * Cor do ponto, entre as cores de estado: `red`, `green`, `blue` e `amber`, mais `gray` e\n   * `accent`. O texto não muda de cor.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Tamanho do texto, que o ponto acompanha (`0.64em`): `sm` = `text-xs`, `md` = `text-sm`, `lg` =\n   * `text-base`.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n};\n\nexport const statusDefaultVariants: Required<StatusVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n};\n\n/**\n * O `colorScheme` só declara `--status-dot`, e o ponto, um `::before` do próprio elemento, a lê.\n * Sendo pseudo-elemento, ele fica fora da árvore de acessibilidade: quem diz o estado é o texto.\n * O `forced-color-adjust-none` fica só no ponto, para a cor sobreviver ao modo de alto contraste\n * do Windows sem tirar a adaptação do texto.\n */\nexport const statusVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'gap-2',\n    'align-middle',\n\n    'text-gray-12',\n\n    'before:content-[\"\"]',\n    'before:size-[0.64em]',\n    'before:shrink-0',\n    'before:rounded-full',\n    'before:bg-(--status-dot)',\n    'before:forced-color-adjust-none',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: '[--status-dot:var(--gray-9)]',\n        accent: '[--status-dot:var(--accent-9)]',\n        red: '[--status-dot:var(--red-9)]',\n        green: '[--status-dot:var(--green-9)]',\n        blue: '[--status-dot:var(--blue-9)]',\n        amber: '[--status-dot:var(--amber-9)]',\n      },\n      size: {\n        sm: 'text-xs',\n        md: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: statusDefaultVariants,\n  },\n);\n"],"mappings":";;AAoBA,MAAa,wBAAkD;CAC7D,aAAa;CACb,MAAM;AACR;;;;;;;AAQA,MAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;GACN,QAAQ;GACR,KAAK;GACL,OAAO;GACP,MAAM;GACN,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;AACnB,CACF"}

package/dist/components/display/tag/tag-root-variants.d.ts

@@ -25,12 +25,12 @@ export type TagRootVariants = {
 export declare const tagRootDefaultVariants: Required<TagRootVariants>;
 /**
  * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão
- * explicadas (tabela no README de `display`). As diferenças:
+ * explicadas. As diferenças:
  * - variáveis com o prefixo `--tag-`;
  * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
  */
 export declare const tagRootVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "ruby" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
+  colorScheme?: "ruby" | "gray" | "accent" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/display/tag/tag-root-variants.js

@@ -7,7 +7,7 @@ const tagRootDefaultVariants = {
 };
 /**
 * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão
-* explicadas (tabela no README de `display`). As diferenças:
+* explicadas. As diferenças:
 * - variáveis com o prefixo `--tag-`;
 * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
 */
@@ -30,248 +30,248 @@ const tagRootVariants = cva([
 	variants: {
 		colorScheme: {
 			gray: [
-				"[--tag-fg:var(--color-gray-11)]",
-				"[--tag-subtle-bg:var(--color-gray-alpha-3)]",
-				"[--tag-surface-bg:var(--color-gray-alpha-2)]",
-				"[--tag-surface-border:var(--color-gray-alpha-6)]",
-				"[--tag-outline-border:var(--color-gray-alpha-8)]",
+				"[--tag-fg:var(--gray-11)]",
+				"[--tag-subtle-bg:var(--gray-a3)]",
+				"[--tag-surface-bg:var(--gray-a2)]",
+				"[--tag-surface-border:var(--gray-6)]",
+				"[--tag-outline-border:var(--gray-8)]",
 				"[--tag-solid-bg:var(--color-black)]",
 				"dark:[--tag-solid-bg:var(--color-white)]",
 				"[--tag-solid-fg:var(--color-white)]",
 				"dark:[--tag-solid-fg:var(--color-black)]"
 			],
-			brand: [
-				"[--tag-fg:var(--color-brand-11)]",
-				"[--tag-subtle-bg:var(--color-brand-alpha-3)]",
-				"[--tag-surface-bg:var(--color-brand-alpha-2)]",
-				"[--tag-surface-border:var(--color-brand-alpha-6)]",
-				"[--tag-outline-border:var(--color-brand-alpha-8)]",
-				"[--tag-solid-bg:var(--color-brand-9)]",
+			accent: [
+				"[--tag-fg:var(--accent-11)]",
+				"[--tag-subtle-bg:var(--accent-a3)]",
+				"[--tag-surface-bg:var(--accent-a2)]",
+				"[--tag-surface-border:var(--accent-6)]",
+				"[--tag-outline-border:var(--accent-8)]",
+				"[--tag-solid-bg:var(--accent-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			red: [
-				"[--tag-fg:var(--color-red-11)]",
-				"[--tag-subtle-bg:var(--color-red-alpha-3)]",
-				"[--tag-surface-bg:var(--color-red-alpha-2)]",
-				"[--tag-surface-border:var(--color-red-alpha-6)]",
-				"[--tag-outline-border:var(--color-red-alpha-8)]",
-				"[--tag-solid-bg:var(--color-red-9)]",
+				"[--tag-fg:var(--red-11)]",
+				"[--tag-subtle-bg:var(--red-a3)]",
+				"[--tag-surface-bg:var(--red-a2)]",
+				"[--tag-surface-border:var(--red-6)]",
+				"[--tag-outline-border:var(--red-8)]",
+				"[--tag-solid-bg:var(--red-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			green: [
-				"[--tag-fg:var(--color-green-11)]",
-				"[--tag-subtle-bg:var(--color-green-alpha-3)]",
-				"[--tag-surface-bg:var(--color-green-alpha-2)]",
-				"[--tag-surface-border:var(--color-green-alpha-6)]",
-				"[--tag-outline-border:var(--color-green-alpha-8)]",
-				"[--tag-solid-bg:var(--color-green-9)]",
+				"[--tag-fg:var(--green-11)]",
+				"[--tag-subtle-bg:var(--green-a3)]",
+				"[--tag-surface-bg:var(--green-a2)]",
+				"[--tag-surface-border:var(--green-6)]",
+				"[--tag-outline-border:var(--green-8)]",
+				"[--tag-solid-bg:var(--green-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			blue: [
-				"[--tag-fg:var(--color-blue-11)]",
-				"[--tag-subtle-bg:var(--color-blue-alpha-3)]",
-				"[--tag-surface-bg:var(--color-blue-alpha-2)]",
-				"[--tag-surface-border:var(--color-blue-alpha-6)]",
-				"[--tag-outline-border:var(--color-blue-alpha-8)]",
-				"[--tag-solid-bg:var(--color-blue-9)]",
+				"[--tag-fg:var(--blue-11)]",
+				"[--tag-subtle-bg:var(--blue-a3)]",
+				"[--tag-surface-bg:var(--blue-a2)]",
+				"[--tag-surface-border:var(--blue-6)]",
+				"[--tag-outline-border:var(--blue-8)]",
+				"[--tag-solid-bg:var(--blue-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			amber: [
-				"[--tag-fg:var(--color-amber-11)]",
-				"[--tag-subtle-bg:var(--color-amber-alpha-3)]",
-				"[--tag-surface-bg:var(--color-amber-alpha-2)]",
-				"[--tag-surface-border:var(--color-amber-alpha-6)]",
-				"[--tag-outline-border:var(--color-amber-alpha-8)]",
-				"[--tag-solid-bg:var(--color-amber-9)]",
+				"[--tag-fg:var(--amber-11)]",
+				"[--tag-subtle-bg:var(--amber-a3)]",
+				"[--tag-surface-bg:var(--amber-a2)]",
+				"[--tag-surface-border:var(--amber-6)]",
+				"[--tag-outline-border:var(--amber-8)]",
+				"[--tag-solid-bg:var(--amber-9)]",
 				"[--tag-solid-fg:var(--color-black)]"
 			],
 			purple: [
-				"[--tag-fg:var(--color-purple-11)]",
-				"[--tag-subtle-bg:var(--color-purple-alpha-3)]",
-				"[--tag-surface-bg:var(--color-purple-alpha-2)]",
-				"[--tag-surface-border:var(--color-purple-alpha-6)]",
-				"[--tag-outline-border:var(--color-purple-alpha-8)]",
-				"[--tag-solid-bg:var(--color-purple-9)]",
+				"[--tag-fg:var(--purple-11)]",
+				"[--tag-subtle-bg:var(--purple-a3)]",
+				"[--tag-surface-bg:var(--purple-a2)]",
+				"[--tag-surface-border:var(--purple-6)]",
+				"[--tag-outline-border:var(--purple-8)]",
+				"[--tag-solid-bg:var(--purple-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			pink: [
-				"[--tag-fg:var(--color-pink-11)]",
-				"[--tag-subtle-bg:var(--color-pink-alpha-3)]",
-				"[--tag-surface-bg:var(--color-pink-alpha-2)]",
-				"[--tag-surface-border:var(--color-pink-alpha-6)]",
-				"[--tag-outline-border:var(--color-pink-alpha-8)]",
-				"[--tag-solid-bg:var(--color-pink-9)]",
+				"[--tag-fg:var(--pink-11)]",
+				"[--tag-subtle-bg:var(--pink-a3)]",
+				"[--tag-surface-bg:var(--pink-a2)]",
+				"[--tag-surface-border:var(--pink-6)]",
+				"[--tag-outline-border:var(--pink-8)]",
+				"[--tag-solid-bg:var(--pink-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			cyan: [
-				"[--tag-fg:var(--color-cyan-11)]",
-				"[--tag-subtle-bg:var(--color-cyan-alpha-3)]",
-				"[--tag-surface-bg:var(--color-cyan-alpha-2)]",
-				"[--tag-surface-border:var(--color-cyan-alpha-6)]",
-				"[--tag-outline-border:var(--color-cyan-alpha-8)]",
-				"[--tag-solid-bg:var(--color-cyan-9)]",
+				"[--tag-fg:var(--cyan-11)]",
+				"[--tag-subtle-bg:var(--cyan-a3)]",
+				"[--tag-surface-bg:var(--cyan-a2)]",
+				"[--tag-surface-border:var(--cyan-6)]",
+				"[--tag-outline-border:var(--cyan-8)]",
+				"[--tag-solid-bg:var(--cyan-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			teal: [
-				"[--tag-fg:var(--color-teal-11)]",
-				"[--tag-subtle-bg:var(--color-teal-alpha-3)]",
-				"[--tag-surface-bg:var(--color-teal-alpha-2)]",
-				"[--tag-surface-border:var(--color-teal-alpha-6)]",
-				"[--tag-outline-border:var(--color-teal-alpha-8)]",
-				"[--tag-solid-bg:var(--color-teal-9)]",
+				"[--tag-fg:var(--teal-11)]",
+				"[--tag-subtle-bg:var(--teal-a3)]",
+				"[--tag-surface-bg:var(--teal-a2)]",
+				"[--tag-surface-border:var(--teal-6)]",
+				"[--tag-outline-border:var(--teal-8)]",
+				"[--tag-solid-bg:var(--teal-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			orange: [
-				"[--tag-fg:var(--color-orange-11)]",
-				"[--tag-subtle-bg:var(--color-orange-alpha-3)]",
-				"[--tag-surface-bg:var(--color-orange-alpha-2)]",
-				"[--tag-surface-border:var(--color-orange-alpha-6)]",
-				"[--tag-outline-border:var(--color-orange-alpha-8)]",
-				"[--tag-solid-bg:var(--color-orange-9)]",
+				"[--tag-fg:var(--orange-11)]",
+				"[--tag-subtle-bg:var(--orange-a3)]",
+				"[--tag-surface-bg:var(--orange-a2)]",
+				"[--tag-surface-border:var(--orange-6)]",
+				"[--tag-outline-border:var(--orange-8)]",
+				"[--tag-solid-bg:var(--orange-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			brown: [
-				"[--tag-fg:var(--color-brown-11)]",
-				"[--tag-subtle-bg:var(--color-brown-alpha-3)]",
-				"[--tag-surface-bg:var(--color-brown-alpha-2)]",
-				"[--tag-surface-border:var(--color-brown-alpha-6)]",
-				"[--tag-outline-border:var(--color-brown-alpha-8)]",
-				"[--tag-solid-bg:var(--color-brown-9)]",
+				"[--tag-fg:var(--brown-11)]",
+				"[--tag-subtle-bg:var(--brown-a3)]",
+				"[--tag-surface-bg:var(--brown-a2)]",
+				"[--tag-surface-border:var(--brown-6)]",
+				"[--tag-outline-border:var(--brown-8)]",
+				"[--tag-solid-bg:var(--brown-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			yellow: [
-				"[--tag-fg:var(--color-yellow-11)]",
-				"[--tag-subtle-bg:var(--color-yellow-alpha-3)]",
-				"[--tag-surface-bg:var(--color-yellow-alpha-2)]",
-				"[--tag-surface-border:var(--color-yellow-alpha-6)]",
-				"[--tag-outline-border:var(--color-yellow-alpha-8)]",
-				"[--tag-solid-bg:var(--color-yellow-9)]",
+				"[--tag-fg:var(--yellow-11)]",
+				"[--tag-subtle-bg:var(--yellow-a3)]",
+				"[--tag-surface-bg:var(--yellow-a2)]",
+				"[--tag-surface-border:var(--yellow-6)]",
+				"[--tag-outline-border:var(--yellow-8)]",
+				"[--tag-solid-bg:var(--yellow-9)]",
 				"[--tag-solid-fg:var(--color-black)]"
 			],
 			bronze: [
-				"[--tag-fg:var(--color-bronze-11)]",
-				"[--tag-subtle-bg:var(--color-bronze-alpha-3)]",
-				"[--tag-surface-bg:var(--color-bronze-alpha-2)]",
-				"[--tag-surface-border:var(--color-bronze-alpha-6)]",
-				"[--tag-outline-border:var(--color-bronze-alpha-8)]",
-				"[--tag-solid-bg:var(--color-bronze-9)]",
+				"[--tag-fg:var(--bronze-11)]",
+				"[--tag-subtle-bg:var(--bronze-a3)]",
+				"[--tag-surface-bg:var(--bronze-a2)]",
+				"[--tag-surface-border:var(--bronze-6)]",
+				"[--tag-outline-border:var(--bronze-8)]",
+				"[--tag-solid-bg:var(--bronze-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			gold: [
-				"[--tag-fg:var(--color-gold-11)]",
-				"[--tag-subtle-bg:var(--color-gold-alpha-3)]",
-				"[--tag-surface-bg:var(--color-gold-alpha-2)]",
-				"[--tag-surface-border:var(--color-gold-alpha-6)]",
-				"[--tag-outline-border:var(--color-gold-alpha-8)]",
-				"[--tag-solid-bg:var(--color-gold-9)]",
+				"[--tag-fg:var(--gold-11)]",
+				"[--tag-subtle-bg:var(--gold-a3)]",
+				"[--tag-surface-bg:var(--gold-a2)]",
+				"[--tag-surface-border:var(--gold-6)]",
+				"[--tag-outline-border:var(--gold-8)]",
+				"[--tag-solid-bg:var(--gold-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			tomato: [
-				"[--tag-fg:var(--color-tomato-11)]",
-				"[--tag-subtle-bg:var(--color-tomato-alpha-3)]",
-				"[--tag-surface-bg:var(--color-tomato-alpha-2)]",
-				"[--tag-surface-border:var(--color-tomato-alpha-6)]",
-				"[--tag-outline-border:var(--color-tomato-alpha-8)]",
-				"[--tag-solid-bg:var(--color-tomato-9)]",
+				"[--tag-fg:var(--tomato-11)]",
+				"[--tag-subtle-bg:var(--tomato-a3)]",
+				"[--tag-surface-bg:var(--tomato-a2)]",
+				"[--tag-surface-border:var(--tomato-6)]",
+				"[--tag-outline-border:var(--tomato-8)]",
+				"[--tag-solid-bg:var(--tomato-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			ruby: [
-				"[--tag-fg:var(--color-ruby-11)]",
-				"[--tag-subtle-bg:var(--color-ruby-alpha-3)]",
-				"[--tag-surface-bg:var(--color-ruby-alpha-2)]",
-				"[--tag-surface-border:var(--color-ruby-alpha-6)]",
-				"[--tag-outline-border:var(--color-ruby-alpha-8)]",
-				"[--tag-solid-bg:var(--color-ruby-9)]",
+				"[--tag-fg:var(--ruby-11)]",
+				"[--tag-subtle-bg:var(--ruby-a3)]",
+				"[--tag-surface-bg:var(--ruby-a2)]",
+				"[--tag-surface-border:var(--ruby-6)]",
+				"[--tag-outline-border:var(--ruby-8)]",
+				"[--tag-solid-bg:var(--ruby-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			crimson: [
-				"[--tag-fg:var(--color-crimson-11)]",
-				"[--tag-subtle-bg:var(--color-crimson-alpha-3)]",
-				"[--tag-surface-bg:var(--color-crimson-alpha-2)]",
-				"[--tag-surface-border:var(--color-crimson-alpha-6)]",
-				"[--tag-outline-border:var(--color-crimson-alpha-8)]",
-				"[--tag-solid-bg:var(--color-crimson-9)]",
+				"[--tag-fg:var(--crimson-11)]",
+				"[--tag-subtle-bg:var(--crimson-a3)]",
+				"[--tag-surface-bg:var(--crimson-a2)]",
+				"[--tag-surface-border:var(--crimson-6)]",
+				"[--tag-outline-border:var(--crimson-8)]",
+				"[--tag-solid-bg:var(--crimson-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			plum: [
-				"[--tag-fg:var(--color-plum-11)]",
-				"[--tag-subtle-bg:var(--color-plum-alpha-3)]",
-				"[--tag-surface-bg:var(--color-plum-alpha-2)]",
-				"[--tag-surface-border:var(--color-plum-alpha-6)]",
-				"[--tag-outline-border:var(--color-plum-alpha-8)]",
-				"[--tag-solid-bg:var(--color-plum-9)]",
+				"[--tag-fg:var(--plum-11)]",
+				"[--tag-subtle-bg:var(--plum-a3)]",
+				"[--tag-surface-bg:var(--plum-a2)]",
+				"[--tag-surface-border:var(--plum-6)]",
+				"[--tag-outline-border:var(--plum-8)]",
+				"[--tag-solid-bg:var(--plum-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			violet: [
-				"[--tag-fg:var(--color-violet-11)]",
-				"[--tag-subtle-bg:var(--color-violet-alpha-3)]",
-				"[--tag-surface-bg:var(--color-violet-alpha-2)]",
-				"[--tag-surface-border:var(--color-violet-alpha-6)]",
-				"[--tag-outline-border:var(--color-violet-alpha-8)]",
-				"[--tag-solid-bg:var(--color-violet-9)]",
+				"[--tag-fg:var(--violet-11)]",
+				"[--tag-subtle-bg:var(--violet-a3)]",
+				"[--tag-surface-bg:var(--violet-a2)]",
+				"[--tag-surface-border:var(--violet-6)]",
+				"[--tag-outline-border:var(--violet-8)]",
+				"[--tag-solid-bg:var(--violet-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			iris: [
-				"[--tag-fg:var(--color-iris-11)]",
-				"[--tag-subtle-bg:var(--color-iris-alpha-3)]",
-				"[--tag-surface-bg:var(--color-iris-alpha-2)]",
-				"[--tag-surface-border:var(--color-iris-alpha-6)]",
-				"[--tag-outline-border:var(--color-iris-alpha-8)]",
-				"[--tag-solid-bg:var(--color-iris-9)]",
+				"[--tag-fg:var(--iris-11)]",
+				"[--tag-subtle-bg:var(--iris-a3)]",
+				"[--tag-surface-bg:var(--iris-a2)]",
+				"[--tag-surface-border:var(--iris-6)]",
+				"[--tag-outline-border:var(--iris-8)]",
+				"[--tag-solid-bg:var(--iris-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			indigo: [
-				"[--tag-fg:var(--color-indigo-11)]",
-				"[--tag-subtle-bg:var(--color-indigo-alpha-3)]",
-				"[--tag-surface-bg:var(--color-indigo-alpha-2)]",
-				"[--tag-surface-border:var(--color-indigo-alpha-6)]",
-				"[--tag-outline-border:var(--color-indigo-alpha-8)]",
-				"[--tag-solid-bg:var(--color-indigo-9)]",
+				"[--tag-fg:var(--indigo-11)]",
+				"[--tag-subtle-bg:var(--indigo-a3)]",
+				"[--tag-surface-bg:var(--indigo-a2)]",
+				"[--tag-surface-border:var(--indigo-6)]",
+				"[--tag-outline-border:var(--indigo-8)]",
+				"[--tag-solid-bg:var(--indigo-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			sky: [
-				"[--tag-fg:var(--color-sky-11)]",
-				"[--tag-subtle-bg:var(--color-sky-alpha-3)]",
-				"[--tag-surface-bg:var(--color-sky-alpha-2)]",
-				"[--tag-surface-border:var(--color-sky-alpha-6)]",
-				"[--tag-outline-border:var(--color-sky-alpha-8)]",
-				"[--tag-solid-bg:var(--color-sky-9)]",
+				"[--tag-fg:var(--sky-11)]",
+				"[--tag-subtle-bg:var(--sky-a3)]",
+				"[--tag-surface-bg:var(--sky-a2)]",
+				"[--tag-surface-border:var(--sky-6)]",
+				"[--tag-outline-border:var(--sky-8)]",
+				"[--tag-solid-bg:var(--sky-9)]",
 				"[--tag-solid-fg:var(--color-black)]"
 			],
 			mint: [
-				"[--tag-fg:var(--color-mint-11)]",
-				"[--tag-subtle-bg:var(--color-mint-alpha-3)]",
-				"[--tag-surface-bg:var(--color-mint-alpha-2)]",
-				"[--tag-surface-border:var(--color-mint-alpha-6)]",
-				"[--tag-outline-border:var(--color-mint-alpha-8)]",
-				"[--tag-solid-bg:var(--color-mint-9)]",
+				"[--tag-fg:var(--mint-11)]",
+				"[--tag-subtle-bg:var(--mint-a3)]",
+				"[--tag-surface-bg:var(--mint-a2)]",
+				"[--tag-surface-border:var(--mint-6)]",
+				"[--tag-outline-border:var(--mint-8)]",
+				"[--tag-solid-bg:var(--mint-9)]",
 				"[--tag-solid-fg:var(--color-black)]"
 			],
 			lime: [
-				"[--tag-fg:var(--color-lime-11)]",
-				"[--tag-subtle-bg:var(--color-lime-alpha-3)]",
-				"[--tag-surface-bg:var(--color-lime-alpha-2)]",
-				"[--tag-surface-border:var(--color-lime-alpha-6)]",
-				"[--tag-outline-border:var(--color-lime-alpha-8)]",
-				"[--tag-solid-bg:var(--color-lime-9)]",
+				"[--tag-fg:var(--lime-11)]",
+				"[--tag-subtle-bg:var(--lime-a3)]",
+				"[--tag-surface-bg:var(--lime-a2)]",
+				"[--tag-surface-border:var(--lime-6)]",
+				"[--tag-outline-border:var(--lime-8)]",
+				"[--tag-solid-bg:var(--lime-9)]",
 				"[--tag-solid-fg:var(--color-black)]"
 			],
 			jade: [
-				"[--tag-fg:var(--color-jade-11)]",
-				"[--tag-subtle-bg:var(--color-jade-alpha-3)]",
-				"[--tag-surface-bg:var(--color-jade-alpha-2)]",
-				"[--tag-surface-border:var(--color-jade-alpha-6)]",
-				"[--tag-outline-border:var(--color-jade-alpha-8)]",
-				"[--tag-solid-bg:var(--color-jade-9)]",
+				"[--tag-fg:var(--jade-11)]",
+				"[--tag-subtle-bg:var(--jade-a3)]",
+				"[--tag-surface-bg:var(--jade-a2)]",
+				"[--tag-surface-border:var(--jade-6)]",
+				"[--tag-outline-border:var(--jade-8)]",
+				"[--tag-solid-bg:var(--jade-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			],
 			grass: [
-				"[--tag-fg:var(--color-grass-11)]",
-				"[--tag-subtle-bg:var(--color-grass-alpha-3)]",
-				"[--tag-surface-bg:var(--color-grass-alpha-2)]",
-				"[--tag-surface-border:var(--color-grass-alpha-6)]",
-				"[--tag-outline-border:var(--color-grass-alpha-8)]",
-				"[--tag-solid-bg:var(--color-grass-9)]",
+				"[--tag-fg:var(--grass-11)]",
+				"[--tag-subtle-bg:var(--grass-a3)]",
+				"[--tag-surface-bg:var(--grass-a2)]",
+				"[--tag-surface-border:var(--grass-6)]",
+				"[--tag-outline-border:var(--grass-8)]",
+				"[--tag-solid-bg:var(--grass-9)]",
 				"[--tag-solid-fg:var(--color-white)]"
 			]
 		},