@studiolxd/brand 49.20.0 → 49.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.20.0",
+  "version": "49.22.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -253,6 +253,21 @@
       "import": "./dist/date-picker-field.js",
       "default": "./dist/date-picker-field.js"
     },
+    "./color-swatch": {
+      "types": "./dist/_types/atoms/ColorSwatch/ColorSwatch.d.ts",
+      "import": "./dist/color-swatch.js",
+      "default": "./dist/color-swatch.js"
+    },
+    "./color-picker": {
+      "types": "./dist/_types/molecules/ColorPicker/ColorPicker.d.ts",
+      "import": "./dist/color-picker.js",
+      "default": "./dist/color-picker.js"
+    },
+    "./color-picker-field": {
+      "types": "./dist/_types/molecules/ColorPickerField/ColorPickerField.d.ts",
+      "import": "./dist/color-picker-field.js",
+      "default": "./dist/color-picker-field.js"
+    },
     "./date-time-field": {
       "types": "./dist/_types/molecules/DateTimeField/DateTimeField.d.ts",
       "import": "./dist/date-time-field.js",

package/src/tokens/components/color-swatch.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-swatch-size-sm: var(--icon-size-sm); /** 16px — junto a un texto de una línea: una celda, una opción, el rótulo de una categoría */
+  --color-swatch-size-md: var(--icon-size-md); /** 24px — por defecto: listas de colores, la rejilla de predefinidos del selector */
+  --color-swatch-size-lg: var(--icon-size-lg); /** 48px — la muestra es el asunto: la cabecera de un color, una paleta que se revisa */
+  --color-swatch-checker-color: var(--color-grey-light); /** Casillas oscuras del damero que asoma bajo un color con transparencia. Es la convención de las herramientas de imagen, no un color de superficie: no cambia en oscuro */
+  --color-swatch-checker-bg: var(--color-white); /** Casillas claras del damero */
+  --color-swatch-checker-size: var(--spacing-2); /** Lado de un par de casillas del damero (8px: casillas de 4px) */
+  --color-swatch-border-width: var(--border-width-default); /** Grosor del borde: el del sistema. Es lo que separa una muestra blanca de una página blanca */
+  --color-swatch-border-color: var(--color-border-default-on-light); /** Color del borde: el separador neutro, para no competir con el color que enmarca */
+  --color-swatch-border-radius: var(--border-radius-default); /** Radio: recto, como toda forma del sistema */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --color-swatch-border-color: var(--color-text-on-dark); /** Color del borde — surface-dark. Regla de derivación: borde → texto sobre oscuro */
+}

package/src/tokens/components/color-swatch.ts

@@ -0,0 +1,7 @@
+import colorSwatch from '../../../tokens/component/color-swatch.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(colorSwatch as never);
+
+export const colorSwatchTokens     = all.filter(t => !t.name.startsWith('--color-swatch-surface-dark-'));
+export const colorSwatchDarkTokens = all.filter(t => t.name.startsWith('--color-swatch-surface-dark-'));

package/src/tokens/index.css

@@ -110,6 +110,9 @@
 @import "./molecules/time-field.css";
 @import "./molecules/date-picker.css";
 @import "./molecules/date-picker-field.css";
+@import "./components/color-swatch.css";
+@import "./molecules/color-picker.css";
+@import "./molecules/color-picker-field.css";
 @import "./molecules/date-time-field.css";
 @import "./components/switcher.css";
 @import "./molecules/switcher-field.css";

package/src/tokens/molecules/color-picker-field.css

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-picker-field-gap: var(--spacing-2); /** Espacio entre etiqueta, disparador, ayuda y error */
+  --color-picker-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --color-picker-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --color-picker-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --color-picker-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --color-picker-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --color-picker-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/color-picker-field.ts

@@ -0,0 +1,4 @@
+import colorPickerField from '../../../tokens/molecule/color-picker-field.json';
+import { flattenTokens } from '../utils';
+
+export const colorPickerFieldTokens = flattenTokens(colorPickerField as never);

package/src/tokens/molecules/color-picker.css

@@ -0,0 +1,63 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-picker-trigger-cursor: pointer; /** Cursor: abre el panel */
+  --color-picker-area-cursor: crosshair; /** Cursor sobre el área: se apunta a un punto */
+  --color-picker-preset-cursor: pointer; /** Cursor sobre un predefinido */
+  --color-picker-trigger-padding: var(--spacing-1); /** Aire entre el borde del disparador y la muestra que lleva dentro */
+  --color-picker-trigger-border-style: var(--input-border-style); /** Estilo del borde */
+  --color-picker-trigger-disabled-cursor: var(--input-disabled-cursor); /** Cursor deshabilitado */
+  --color-picker-trigger-disabled-opacity: var(--opacity-disabled); /** Opacidad de la muestra con el disparador deshabilitado: el color sigue ahí, atenuado */
+  --color-picker-panel-gap: var(--spacing-3); /** Separación entre las partes del panel: área, bandas, campo hex, predefinidos */
+  --color-picker-area-saturation-start: var(--color-white); /** Origen del degradado de saturación: sin saturación, el tono se lava hacia el blanco. Es el modelo HSV, no una decisión de marca */
+  --color-picker-area-brightness-end: var(--color-black); /** Fin del degradado de brillo: sin brillo, cualquier tono es negro. Es el modelo HSV */
+  --color-picker-channel-track-size: var(--spacing-3); /** Grosor de las bandas de tono y de opacidad: más gruesas que un deslizador, porque la banda es el dato */
+  --color-picker-thumb-size: var(--icon-size-sm); /** Lado del pulgar del área y de las bandas */
+  --color-picker-thumb-border-color: var(--color-white); /** Aro claro del pulgar: junto al contorno oscuro, se ve sobre cualquier color, claro u oscuro. No cambia en oscuro */
+  --color-picker-preset-gap: var(--spacing-2); /** Hueco entre predefinidos */
+  --color-picker-trigger-size: var(--input-height); /** Lado del disparador: cuadrado a la altura de los controles, talla md */
+  --color-picker-trigger-sm-size: var(--input-sm-height); /** Lado del disparador — sm */
+  --color-picker-trigger-lg-size: var(--input-lg-height); /** Lado del disparador — lg (y de partida en la superficie pública) */
+  --color-picker-trigger-bg: var(--input-bg); /** Fondo del disparador: el de un campo */
+  --color-picker-area-border-width: var(--border-width-default); /** Borde del área y de las bandas */
+  --color-picker-area-border-color: var(--color-border-default-on-light); /** Color del borde del área y de las bandas: el separador neutro */
+  --color-picker-thumb-border-width: var(--border-width-focus); /** Aro claro del pulgar */
+  --color-picker-thumb-outline-width: var(--border-width-default); /** Contorno oscuro del pulgar, por fuera y por dentro del aro */
+  --color-picker-thumb-outline-color: var(--color-primary); /** Contorno oscuro del pulgar. No cambia en oscuro: lo que tiene detrás es el color, no la superficie */
+  --color-picker-thumb-border-radius: var(--border-radius-default); /** Radio del pulgar */
+  --color-picker-thumb-focus-ring-width: var(--border-width-focus); /** Anillo de foco del pulgar */
+  --color-picker-thumb-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --color-picker-thumb-focus-ring-color: var(--color-primary); /** Color del anillo de foco del pulgar */
+  --color-picker-preset-size: var(--color-swatch-size-md); /** Lado de un predefinido: la muestra md */
+  --color-picker-preset-focus-ring-width: var(--border-width-focus); /** Anillo de foco de un predefinido */
+  --color-picker-preset-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --color-picker-preset-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --color-picker-preset-selected-ring-width: var(--border-width-focus); /** Marca del predefinido que coincide con el valor: un aro por fuera */
+  --color-picker-preset-selected-ring-offset: var(--border-width-default); /** Separación de la marca */
+  --color-picker-preset-selected-ring-color: var(--color-primary); /** Color de la marca del seleccionado */
+  --color-picker-trigger-border-width: var(--input-border-width); /** Grosor del borde: el de un campo */
+  --color-picker-trigger-border-color: var(--input-border-color); /** Color del borde: el de un campo */
+  --color-picker-trigger-border-radius: var(--input-border-radius); /** Radio del disparador */
+  --color-picker-trigger-focus-border-color: var(--input-focus-border-color); /** Borde en foco: el de un campo */
+  --color-picker-trigger-focus-ring-inset-offset: var(--input-focus-ring-inset-offset); /** Separación entre el borde y el anillo */
+  --color-picker-trigger-focus-ring-color: var(--input-focus-ring-color); /** Color del anillo de foco */
+  --color-picker-trigger-error-border-color: var(--input-error-border-color); /** Borde en error */
+  --color-picker-trigger-error-focus-ring-color: var(--input-error-focus-ring-color); /** Anillo de foco en error */
+  --color-picker-trigger-disabled-bg: var(--input-disabled-bg); /** Fondo deshabilitado */
+  --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color); /** Borde deshabilitado */
+  --color-picker-panel-inline-size: calc(8 * var(--color-picker-preset-size) + 7 * var(--color-picker-preset-gap)); /** Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero */
+  --color-picker-area-block-size: calc(6 * var(--color-picker-preset-size) + 5 * var(--color-picker-preset-gap)); /** Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho */
+  --color-picker-trigger-focus-ring-width: var(--input-focus-ring-width); /** Grosor del anillo de foco, por dentro del borde como en un campo */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --color-picker-area-border-color: var(--color-text-on-dark); /** Borde del área y de las bandas — surface-dark */
+  --color-picker-thumb-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del pulgar — surface-dark */
+  --color-picker-preset-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+  --color-picker-preset-selected-ring-color: var(--color-text-on-dark); /** Marca del seleccionado — surface-dark */
+}

package/src/tokens/molecules/color-picker.ts

@@ -0,0 +1,8 @@
+import colorPicker from '../../../tokens/molecule/color-picker.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(colorPicker as never);
+const isDark = (name: string) => name.includes('-surface-dark-');
+
+export const colorPickerTokens     = all.filter(t => !isDark(t.name));
+export const colorPickerDarkTokens = all.filter(t => isDark(t.name));

package/src/tokens/scss/_index.legacy.scss

@@ -108,6 +108,9 @@
 @import 'molecules/time-field';
 @import 'molecules/date-picker';
 @import 'molecules/date-picker-field';
+@import 'components/color-swatch';
+@import 'molecules/color-picker';
+@import 'molecules/color-picker-field';
 @import 'molecules/date-time-field';
 @import 'components/switcher';
 @import 'molecules/switcher-field';

package/src/tokens/scss/_index.scss

@@ -108,6 +108,9 @@
 @forward 'molecules/time-field';
 @forward 'molecules/date-picker';
 @forward 'molecules/date-picker-field';
+@forward 'components/color-swatch';
+@forward 'molecules/color-picker';
+@forward 'molecules/color-picker-field';
 @forward 'molecules/date-time-field';
 @forward 'components/switcher';
 @forward 'molecules/switcher-field';

package/src/tokens/scss/components/_color-swatch.scss

@@ -0,0 +1,12 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-color-swatch-size-sm: 16px; // 16px — junto a un texto de una línea: una celda, una opción, el rótulo de una categoría
+$lxd-color-swatch-size-md: 24px; // 24px — por defecto: listas de colores, la rejilla de predefinidos del selector
+$lxd-color-swatch-size-lg: 48px; // 48px — la muestra es el asunto: la cabecera de un color, una paleta que se revisa
+$lxd-color-swatch-border-width: 1px; // Grosor del borde: el del sistema. Es lo que separa una muestra blanca de una página blanca
+$lxd-color-swatch-border-color: #d0d0d0; // Color del borde: el separador neutro, para no competir con el color que enmarca
+$lxd-color-swatch-border-radius: 0px; // Radio: recto, como toda forma del sistema
+$lxd-color-swatch-checker-color: #d0d0d0; // Casillas oscuras del damero que asoma bajo un color con transparencia. Es la convención de las herramientas de imagen, no un color de superficie: no cambia en oscuro
+$lxd-color-swatch-checker-bg: #ffffff; // Casillas claras del damero
+$lxd-color-swatch-checker-size: 0.5rem; // Lado de un par de casillas del damero (8px: casillas de 4px)

package/src/tokens/scss/molecules/_color-picker-field.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-color-picker-field-gap: 0.5rem; // Espacio entre etiqueta, disparador, ayuda y error
+$lxd-color-picker-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
+$lxd-color-picker-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
+$lxd-color-picker-field-helper-font-weight: 300; // Font weight del texto de ayuda
+$lxd-color-picker-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-color-picker-field-helper-color: #111e30; // Color del texto de ayuda

package/src/tokens/scss/molecules/_color-picker.scss

@@ -0,0 +1,50 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-color-picker-trigger-size: 2.5rem; // Lado del disparador: cuadrado a la altura de los controles, talla md
+$lxd-color-picker-trigger-sm-size: 2rem; // Lado del disparador — sm
+$lxd-color-picker-trigger-lg-size: 3rem; // Lado del disparador — lg (y de partida en la superficie pública)
+$lxd-color-picker-trigger-padding: 0.25rem; // Aire entre el borde del disparador y la muestra que lleva dentro
+$lxd-color-picker-trigger-bg: #ffffff; // Fondo del disparador: el de un campo
+$lxd-color-picker-trigger-border-width: 1px; // Grosor del borde: el de un campo
+$lxd-color-picker-trigger-border-style: solid; // Estilo del borde
+$lxd-color-picker-trigger-border-color: #111e30; // Color del borde: el de un campo
+$lxd-color-picker-trigger-border-radius: 0px; // Radio del disparador
+$lxd-color-picker-trigger-cursor: pointer; // Cursor: abre el panel
+$lxd-color-picker-trigger-focus-border-color: #111e30; // Borde en foco: el de un campo
+$lxd-color-picker-trigger-focus-ring-width: 2px; // Grosor del anillo de foco, por dentro del borde como en un campo
+$lxd-color-picker-trigger-focus-ring-inset-offset: 1px; // Separación entre el borde y el anillo
+$lxd-color-picker-trigger-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-color-picker-trigger-error-border-color: #b30000; // Borde en error
+$lxd-color-picker-trigger-error-focus-ring-color: #b30000; // Anillo de foco en error
+$lxd-color-picker-trigger-disabled-bg: #f2f2f2; // Fondo deshabilitado
+$lxd-color-picker-trigger-disabled-border-color: #d0d0d0; // Borde deshabilitado
+$lxd-color-picker-trigger-disabled-cursor: not-allowed; // Cursor deshabilitado
+$lxd-color-picker-trigger-disabled-opacity: 0.4; // Opacidad de la muestra con el disparador deshabilitado: el color sigue ahí, atenuado
+$lxd-color-picker-panel-gap: 0.75rem; // Separación entre las partes del panel: área, bandas, campo hex, predefinidos
+$lxd-color-picker-panel-inline-size: calc(8 * 24px + 7 * 0.5rem); // Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero
+$lxd-color-picker-area-block-size: calc(6 * 24px + 5 * 0.5rem); // Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho
+$lxd-color-picker-area-border-width: 1px; // Borde del área y de las bandas
+$lxd-color-picker-area-border-color: #d0d0d0; // Color del borde del área y de las bandas: el separador neutro
+$lxd-color-picker-area-saturation-start: #ffffff; // Origen del degradado de saturación: sin saturación, el tono se lava hacia el blanco. Es el modelo HSV, no una decisión de marca
+$lxd-color-picker-area-brightness-end: #000000; // Fin del degradado de brillo: sin brillo, cualquier tono es negro. Es el modelo HSV
+$lxd-color-picker-area-cursor: crosshair; // Cursor sobre el área: se apunta a un punto
+$lxd-color-picker-channel-track-size: 0.75rem; // Grosor de las bandas de tono y de opacidad: más gruesas que un deslizador, porque la banda es el dato
+$lxd-color-picker-thumb-size: 16px; // Lado del pulgar del área y de las bandas
+$lxd-color-picker-thumb-border-width: 2px; // Aro claro del pulgar
+$lxd-color-picker-thumb-border-color: #ffffff; // Aro claro del pulgar: junto al contorno oscuro, se ve sobre cualquier color, claro u oscuro. No cambia en oscuro
+$lxd-color-picker-thumb-outline-width: 1px; // Contorno oscuro del pulgar, por fuera y por dentro del aro
+$lxd-color-picker-thumb-outline-color: #111e30; // Contorno oscuro del pulgar. No cambia en oscuro: lo que tiene detrás es el color, no la superficie
+$lxd-color-picker-thumb-border-radius: 0px; // Radio del pulgar
+$lxd-color-picker-thumb-focus-ring-width: 2px; // Anillo de foco del pulgar
+$lxd-color-picker-thumb-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-color-picker-thumb-focus-ring-color: #111e30; // Color del anillo de foco del pulgar
+$lxd-color-picker-preset-size: 24px; // Lado de un predefinido: la muestra md
+$lxd-color-picker-preset-gap: 0.5rem; // Hueco entre predefinidos
+$lxd-color-picker-preset-cursor: pointer; // Cursor sobre un predefinido
+$lxd-color-picker-preset-focus-ring-width: 2px; // Anillo de foco de un predefinido
+$lxd-color-picker-preset-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-color-picker-preset-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-color-picker-preset-selected-ring-width: 2px; // Marca del predefinido que coincide con el valor: un aro por fuera
+$lxd-color-picker-preset-selected-ring-offset: 1px; // Separación de la marca
+$lxd-color-picker-preset-selected-ring-color: #111e30; // Color de la marca del seleccionado

package/src/tokens/surface-dark-derived.css

@@ -77,6 +77,14 @@ html.dark {
   --calendar-year-selected-bg: var(--calendar-selected-bg);
   --calendar-year-selected-color: var(--calendar-selected-color);
   --calendar-year-disabled-color: var(--calendar-disabled-color);
+  --color-picker-trigger-bg: var(--input-bg);
+  --color-picker-trigger-border-color: var(--input-border-color);
+  --color-picker-trigger-focus-border-color: var(--input-focus-border-color);
+  --color-picker-trigger-focus-ring-color: var(--input-focus-ring-color);
+  --color-picker-trigger-error-border-color: var(--input-error-border-color);
+  --color-picker-trigger-error-focus-ring-color: var(--input-error-focus-ring-color);
+  --color-picker-trigger-disabled-bg: var(--input-disabled-bg);
+  --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color);
   --command-palette-input-border-color: var(--floating-panel-border-color);
   --prose-color: var(--text-color);
   --prose-quote-border-color: var(--separator-color);

package/src/tokens/surface-invert.css

@@ -140,6 +140,7 @@ html.dark .surface-invert {
   --code-color: var(--code-block-color);
   --collapsible-trigger-color: var(--color-text-on-light);
   --collapsible-focus-ring-color: var(--color-primary);
+  --color-swatch-border-color: var(--color-border-default-on-light);
   --description-list-border-color: var(--color-primary);
   --description-list-term-color: var(--color-text-on-light);
   --description-list-value-color: var(--color-text-on-light);
@@ -515,6 +516,19 @@ html.dark .surface-invert {
   --clock-widget-status-dot-closed-bg: var(--color-border-default-on-light);
   --clock-widget-elapsed-color: var(--color-text-on-light);
   --clock-widget-elapsed-label-color: var(--color-text-muted-on-light);
+  --color-picker-field-helper-color: var(--form-helper-color);
+  --color-picker-trigger-bg: var(--input-bg);
+  --color-picker-trigger-border-color: var(--input-border-color);
+  --color-picker-trigger-focus-border-color: var(--input-focus-border-color);
+  --color-picker-trigger-focus-ring-color: var(--input-focus-ring-color);
+  --color-picker-trigger-error-border-color: var(--input-error-border-color);
+  --color-picker-trigger-error-focus-ring-color: var(--input-error-focus-ring-color);
+  --color-picker-trigger-disabled-bg: var(--input-disabled-bg);
+  --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color);
+  --color-picker-area-border-color: var(--color-border-default-on-light);
+  --color-picker-thumb-focus-ring-color: var(--color-primary);
+  --color-picker-preset-focus-ring-color: var(--color-primary);
+  --color-picker-preset-selected-ring-color: var(--color-primary);
   --command-palette-input-border-color: var(--floating-panel-border-color);
   --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light);
   --command-palette-input-focus-ring-color: var(--color-primary);

package/src/tokens/surface-light.css

@@ -141,6 +141,7 @@ html.dark .surface-light {
   --code-color: var(--code-block-color);
   --collapsible-trigger-color: var(--color-text-on-light);
   --collapsible-focus-ring-color: var(--color-primary);
+  --color-swatch-border-color: var(--color-border-default-on-light);
   --description-list-border-color: var(--color-primary);
   --description-list-term-color: var(--color-text-on-light);
   --description-list-value-color: var(--color-text-on-light);
@@ -516,6 +517,19 @@ html.dark .surface-light {
   --clock-widget-status-dot-closed-bg: var(--color-border-default-on-light);
   --clock-widget-elapsed-color: var(--color-text-on-light);
   --clock-widget-elapsed-label-color: var(--color-text-muted-on-light);
+  --color-picker-field-helper-color: var(--form-helper-color);
+  --color-picker-trigger-bg: var(--input-bg);
+  --color-picker-trigger-border-color: var(--input-border-color);
+  --color-picker-trigger-focus-border-color: var(--input-focus-border-color);
+  --color-picker-trigger-focus-ring-color: var(--input-focus-ring-color);
+  --color-picker-trigger-error-border-color: var(--input-error-border-color);
+  --color-picker-trigger-error-focus-ring-color: var(--input-error-focus-ring-color);
+  --color-picker-trigger-disabled-bg: var(--input-disabled-bg);
+  --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color);
+  --color-picker-area-border-color: var(--color-border-default-on-light);
+  --color-picker-thumb-focus-ring-color: var(--color-primary);
+  --color-picker-preset-focus-ring-color: var(--color-primary);
+  --color-picker-preset-selected-ring-color: var(--color-primary);
   --command-palette-input-border-color: var(--floating-panel-border-color);
   --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light);
   --command-palette-input-focus-ring-color: var(--color-primary);

package/src/tokens/surface-public.css

@@ -88,6 +88,7 @@
   --calendar-year-font-size: var(--calendar-lg-year-font-size);
   --checkbox-field-gap: var(--checkbox-field-lg-gap);
   --checkbox-field-padding-block: var(--checkbox-field-lg-padding-block);
+  --color-picker-trigger-size: var(--color-picker-trigger-lg-size);
   --date-picker-button-slot-size: var(--date-picker-button-lg-slot-size);
   --date-picker-button-icon-size: var(--date-picker-button-lg-icon-size);
   --dropdown-field-height: var(--dropdown-field-lg-height);
@@ -202,6 +203,7 @@
   --clock-widget-date-font-size: var(--text-paragraph-small-font-size);
   --clock-widget-status-font-size: var(--text-paragraph-small-font-size);
   --clock-widget-elapsed-label-font-size: var(--text-paragraph-small-font-size);
+  --color-picker-field-helper-font-size: var(--form-helper-font-size);
   --consent-banner-title-font-size: var(--text-size-3);
   --consent-banner-description-font-size: var(--text-font-size);
   --conversation-list-item-font-size: var(--text-font-size);

package/src/tokens/tokens.json

@@ -685,6 +685,15 @@
   "--collapsible-focus-ring-width": "2px",
   "--collapsible-focus-ring-offset": "1px",
   "--collapsible-focus-ring-color": "#111e30",
+  "--color-swatch-size-sm": "16px",
+  "--color-swatch-size-md": "24px",
+  "--color-swatch-size-lg": "48px",
+  "--color-swatch-border-width": "1px",
+  "--color-swatch-border-color": "#d0d0d0",
+  "--color-swatch-border-radius": "0px",
+  "--color-swatch-checker-color": "#d0d0d0",
+  "--color-swatch-checker-bg": "#ffffff",
+  "--color-swatch-checker-size": "0.5rem",
   "--columns-gap-md": "2rem",
   "--columns-gap-lg": "4rem",
   "--columns-stack-gap-md": "2rem",
@@ -2427,6 +2436,59 @@
   "--clock-widget-elapsed-label-font-size": "0.875rem",
   "--clock-widget-elapsed-label-color": "#4a4a4a",
   "--clock-widget-footer-margin-block-start": "0.5rem",
+  "--color-picker-field-gap": "0.5rem",
+  "--color-picker-field-helper-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--color-picker-field-helper-font-size": "0.875rem",
+  "--color-picker-field-helper-font-weight": "300",
+  "--color-picker-field-helper-line-height": "1.5",
+  "--color-picker-field-helper-color": "#111e30",
+  "--color-picker-trigger-size": "2.5rem",
+  "--color-picker-trigger-sm-size": "2rem",
+  "--color-picker-trigger-lg-size": "3rem",
+  "--color-picker-trigger-padding": "0.25rem",
+  "--color-picker-trigger-bg": "#ffffff",
+  "--color-picker-trigger-border-width": "1px",
+  "--color-picker-trigger-border-style": "solid",
+  "--color-picker-trigger-border-color": "#111e30",
+  "--color-picker-trigger-border-radius": "0px",
+  "--color-picker-trigger-cursor": "pointer",
+  "--color-picker-trigger-focus-border-color": "#111e30",
+  "--color-picker-trigger-focus-ring-width": "2px",
+  "--color-picker-trigger-focus-ring-inset-offset": "1px",
+  "--color-picker-trigger-focus-ring-color": "#111e30",
+  "--color-picker-trigger-error-border-color": "#b30000",
+  "--color-picker-trigger-error-focus-ring-color": "#b30000",
+  "--color-picker-trigger-disabled-bg": "#f2f2f2",
+  "--color-picker-trigger-disabled-border-color": "#d0d0d0",
+  "--color-picker-trigger-disabled-cursor": "not-allowed",
+  "--color-picker-trigger-disabled-opacity": "0.4",
+  "--color-picker-panel-gap": "0.75rem",
+  "--color-picker-panel-inline-size": "calc(8 * 24px + 7 * 0.5rem)",
+  "--color-picker-area-block-size": "calc(6 * 24px + 5 * 0.5rem)",
+  "--color-picker-area-border-width": "1px",
+  "--color-picker-area-border-color": "#d0d0d0",
+  "--color-picker-area-saturation-start": "#ffffff",
+  "--color-picker-area-brightness-end": "#000000",
+  "--color-picker-area-cursor": "crosshair",
+  "--color-picker-channel-track-size": "0.75rem",
+  "--color-picker-thumb-size": "16px",
+  "--color-picker-thumb-border-width": "2px",
+  "--color-picker-thumb-border-color": "#ffffff",
+  "--color-picker-thumb-outline-width": "1px",
+  "--color-picker-thumb-outline-color": "#111e30",
+  "--color-picker-thumb-border-radius": "0px",
+  "--color-picker-thumb-focus-ring-width": "2px",
+  "--color-picker-thumb-focus-ring-offset": "2px",
+  "--color-picker-thumb-focus-ring-color": "#111e30",
+  "--color-picker-preset-size": "24px",
+  "--color-picker-preset-gap": "0.5rem",
+  "--color-picker-preset-cursor": "pointer",
+  "--color-picker-preset-focus-ring-width": "2px",
+  "--color-picker-preset-focus-ring-offset": "2px",
+  "--color-picker-preset-focus-ring-color": "#111e30",
+  "--color-picker-preset-selected-ring-width": "2px",
+  "--color-picker-preset-selected-ring-offset": "1px",
+  "--color-picker-preset-selected-ring-color": "#111e30",
   "--command-palette-max-height": "min(24rem, 60vh)",
   "--command-palette-input-padding-block": "0.75rem",
   "--command-palette-input-padding-inline": "0.5rem",