@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/display/data-list/data-list-root.d.ts

@@ -4,11 +4,12 @@ import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-root.d.ts
 export type DataListRootProps = MergeOverride<useRender.ComponentProps<'dl'>, DataListVariants>;
 /**
- * Lista de pares rótulo e valor, renderizada como `dl`.
+ * Lista de pares rótulo e valor, renderizada como `dl`. É sempre uma coluna; grade ou linha vêm da
+ * `className`, e o espaço entre os itens, do `gap`.
  *
  * @example
  * ```tsx
- * <DataList.Root>
+ * <DataList.Root orientation="horizontal">
  *   <DataList.Item>
  *     <DataList.ItemLabel>Status</DataList.ItemLabel>
  *     <DataList.ItemValue>Ativo</DataList.ItemValue>

package/dist/components/display/data-list/data-list-root.js

@@ -7,11 +7,12 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/display/data-list/data-list-root.tsx
 const splitVariantProps = createSplitProps();
 /**
-* Lista de pares rótulo e valor, renderizada como `dl`.
+* Lista de pares rótulo e valor, renderizada como `dl`. É sempre uma coluna; grade ou linha vêm da
+* `className`, e o espaço entre os itens, do `gap`.
 *
 * @example
 * ```tsx
-* <DataList.Root>
+* <DataList.Root orientation="horizontal">
 *   <DataList.Item>
 *     <DataList.ItemLabel>Status</DataList.ItemLabel>
 *     <DataList.ItemValue>Ativo</DataList.ItemValue>
@@ -20,7 +21,11 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const DataListRoot = (props) => {
-	const [variantProps, elementProps] = splitVariantProps(props, ["divided", "orientation"]);
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"orientation",
+		"size",
+		"variant"
+	]);
 	const { render, className, ...rest } = elementProps;
 	const baseProps = {
 		"data-component": "DataList.Root",

package/dist/components/display/data-list/data-list-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-list-root.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListRootVariants } from './data-list-root-variants';\nimport {\n  DataListContextProvider,\n  type DataListVariants,\n} from './use-data-list-context';\n\nexport type DataListRootProps = MergeOverride<\n  useRender.ComponentProps<'dl'>,\n  DataListVariants\n>;\n\nconst splitVariantProps = createSplitProps<DataListVariants>();\n\n/**\n * Lista de pares rótulo e valor, renderizada como `dl`.\n *\n * @example\n * ```tsx\n * <DataList.Root>\n *   <DataList.Item>\n *     <DataList.ItemLabel>Status</DataList.ItemLabel>\n *     <DataList.ItemValue>Ativo</DataList.ItemValue>\n *   </DataList.Item>\n * </DataList.Root>\n * ```\n */\nexport const DataListRoot = (props: DataListRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'divided',\n    'orientation',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'DataList.Root',\n    className: mergeTwClassNames(dataListRootVariants(variantProps), className),\n  };\n\n  return (\n    <DataListContextProvider value={variantProps}>\n      {useRender({\n        render,\n        defaultTagName: 'dl',\n        props: mergeProps(baseProps, rest),\n      })}\n    </DataListContextProvider>\n  );\n};\n\nDataListRoot.displayName = 'DataList.Root';\n"],"mappings":";;;;;;;AAiBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;AAe7D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,WACA,aACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,YAAY,GAAG,SAAS;CAC5E;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,IAAI;EACnC,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}
+{"version":3,"file":"data-list-root.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListRootVariants } from './data-list-root-variants';\nimport {\n  DataListContextProvider,\n  type DataListVariants,\n} from './use-data-list-context';\n\nexport type DataListRootProps = MergeOverride<\n  useRender.ComponentProps<'dl'>,\n  DataListVariants\n>;\n\nconst splitVariantProps = createSplitProps<DataListVariants>();\n\n/**\n * Lista de pares rótulo e valor, renderizada como `dl`. É sempre uma coluna; grade ou linha vêm da\n * `className`, e o espaço entre os itens, do `gap`.\n *\n * @example\n * ```tsx\n * <DataList.Root orientation=\"horizontal\">\n *   <DataList.Item>\n *     <DataList.ItemLabel>Status</DataList.ItemLabel>\n *     <DataList.ItemValue>Ativo</DataList.ItemValue>\n *   </DataList.Item>\n * </DataList.Root>\n * ```\n */\nexport const DataListRoot = (props: DataListRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'orientation',\n    'size',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'DataList.Root',\n    className: mergeTwClassNames(dataListRootVariants(variantProps), className),\n  };\n\n  return (\n    <DataListContextProvider value={variantProps}>\n      {useRender({\n        render,\n        defaultTagName: 'dl',\n        props: mergeProps(baseProps, rest),\n      })}\n    </DataListContextProvider>\n  );\n};\n\nDataListRoot.displayName = 'DataList.Root';\n"],"mappings":";;;;;;;AAiBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;AAgB7D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,YAAY,GAAG,SAAS;CAC5E;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,IAAI;EACnC,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}

package/dist/components/display/data-list/use-data-list-context.d.ts

@@ -1,21 +1,32 @@
 //#region src/components/display/data-list/use-data-list-context.d.ts
 /**
  * Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.
+ *
+ * O `size` e o `variant` são exceções à tipografia fixa por papel: a lista aparece em densidades
+ * diferentes (um resumo compacto, uma ficha completa), e o `bold` inverte a ênfase quando o rótulo
+ * é o que se procura.
  */
 export type DataListVariants = {
   /**
-   * Linha entre os itens.
+   * Orientação do par rótulo/valor, não da lista: `vertical` põe o rótulo em cima e o valor
+   * embaixo; `horizontal` põe os dois lado a lado, com o rótulo numa largura mínima de 120px para
+   * os valores alinharem. O `Root` é sempre uma coluna, e grade ou linha vêm pela `className`.
    *
-   * @default false
+   * @default 'vertical'
    */
-  divided?: boolean;
+  orientation?: 'horizontal' | 'vertical';
   /**
-   * Orientação da lista, não do par rótulo/valor: `vertical` empilha os itens, com rótulo e valor
-   * lado a lado; `horizontal` põe os itens em linha, com o valor abaixo do rótulo.
+   * Espaço entre os itens e tamanho do texto.
    *
-   * @default 'vertical'
+   * @default 'md'
    */
-  orientation?: 'horizontal' | 'vertical';
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Ênfase do par: `subtle` apaga o rótulo; `bold` põe o rótulo em peso médio e apaga o valor.
+   *
+   * @default 'subtle'
+   */
+  variant?: 'subtle' | 'bold';
 };
 export declare const dataListDefaultVariants: Required<DataListVariants>;
 export declare const DataListContextProvider: import("react").Provider<DataListVariants>, useDataListContext: () => DataListVariants;

package/dist/components/display/data-list/use-data-list-context.js

@@ -1,8 +1,9 @@
 import { createContext } from "@lucasbernardosn/react-utils";
 //#region src/components/display/data-list/use-data-list-context.ts
 const dataListDefaultVariants = {
-	divided: false,
-	orientation: "vertical"
+	orientation: "vertical",
+	size: "md",
+	variant: "subtle"
 };
 const [DataListContextProvider, useDataListContext] = createContext({
 	name: "DataListContext",

package/dist/components/display/data-list/use-data-list-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-data-list-context.js","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.\n */\nexport type DataListVariants = {\n  /**\n   * Linha entre os itens.\n   *\n   * @default false\n   */\n  divided?: boolean;\n  /**\n   * Orientação da lista, não do par rótulo/valor: `vertical` empilha os itens, com rótulo e valor\n   * lado a lado; `horizontal` põe os itens em linha, com o valor abaixo do rótulo.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const dataListDefaultVariants: Required<DataListVariants> = {\n  divided: false,\n  orientation: 'vertical',\n};\n\nexport const [DataListContextProvider, useDataListContext] =\n  createContext<DataListVariants>({\n    name: 'DataListContext',\n    providers: ['DataList.Root'],\n  });\n"],"mappings":";;AAqBA,MAAa,0BAAsD;CACjE,SAAS;CACT,aAAa;AACf;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,CAAC"}
+{"version":3,"file":"use-data-list-context.js","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.\n *\n * O `size` e o `variant` são exceções à tipografia fixa por papel: a lista aparece em densidades\n * diferentes (um resumo compacto, uma ficha completa), e o `bold` inverte a ênfase quando o rótulo\n * é o que se procura.\n */\nexport type DataListVariants = {\n  /**\n   * Orientação do par rótulo/valor, não da lista: `vertical` põe o rótulo em cima e o valor\n   * embaixo; `horizontal` põe os dois lado a lado, com o rótulo numa largura mínima de 120px para\n   * os valores alinharem. O `Root` é sempre uma coluna, e grade ou linha vêm pela `className`.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Espaço entre os itens e tamanho do texto.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Ênfase do par: `subtle` apaga o rótulo; `bold` põe o rótulo em peso médio e apaga o valor.\n   *\n   * @default 'subtle'\n   */\n  variant?: 'subtle' | 'bold';\n};\n\nexport const dataListDefaultVariants: Required<DataListVariants> = {\n  orientation: 'vertical',\n  size: 'md',\n  variant: 'subtle',\n};\n\nexport const [DataListContextProvider, useDataListContext] =\n  createContext<DataListVariants>({\n    name: 'DataListContext',\n    providers: ['DataList.Root'],\n  });\n"],"mappings":";;AAgCA,MAAa,0BAAsD;CACjE,aAAa;CACb,MAAM;CACN,SAAS;AACX;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,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,13 +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-`;
- * - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;
  * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
  */
 export declare const tagRootVariants: (props?: ({
-  colorScheme?: "ruby" | "gray" | "brand" | "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;
+  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,9 +7,8 @@ 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-`;
-* - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;
 * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
 */
 const tagRootVariants = cva([
@@ -31,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)]"
 			]
 		},