@studiolxd/brand 49.18.0 → 49.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.18.0",
+  "version": "49.19.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -932,12 +932,15 @@
     "preview": "vite preview",
     "build:tokens": "node sd.config.mjs",
     "build:email-assets": "node scripts/build-email-assets.mjs",
+    "build:native-fonts": "python3 scripts/build-native-fonts.py",
+    "build:native-icons": "node scripts/build-native-icons.mjs",
+    "native:parity": "node scripts/native-parity.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
     "test": "vitest run --project unit --project components",
     "test:stories": "vitest run --project storybook",
-    "build:all": "pnpm build:tokens && pnpm build:lib && pnpm build:css && pnpm build:tokens-css && pnpm build:fonts-css && pnpm build:icons && pnpm build:email-assets",
+    "build:all": "pnpm build:tokens && pnpm build:lib && pnpm build:css && pnpm build:tokens-css && pnpm build:fonts-css && pnpm build:icons && pnpm build:email-assets && pnpm build:native-icons",
     "release:check": "node scripts/release-check.mjs",
     "release:npm": "node scripts/publish-npm.mjs"
   },
@@ -978,6 +981,7 @@
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.2",
     "@vitest/coverage-v8": "^4.1.2",
+    "ajv": "^8.18.0",
     "chromatic": "^18.5.0",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",

package/src/tokens/components/text.css

@@ -34,6 +34,7 @@
   --text-paragraph-large-line-height: var(--line-height-snug); /** Large paragraph line height */
   --text-list-gap: var(--spacing-2); /** Spacing between list items (8px) */
   --text-list-padding-inline-start: var(--spacing-6); /** Left indent for list (32px) */
+  --text-list-item-gap: var(--spacing-3); /** Aire entre el contenido de una fila y su accesorio final (trailing) (12px) */
   --text-font-weight: var(--font-weight-default); /** Default font weight */
   --text-color: var(--color-text-on-light); /** Default text color */
   --text-background: var(--color-background-light); /** Fondo del lienzo de página (body) */
@@ -59,6 +60,10 @@
   --text-list-font-size: var(--text-font-size); /** List font size */
   --text-list-line-height: var(--text-line-height); /** List line height */
   --text-list-letter-spacing: var(--text-letter-spacing); /** List letter spacing */
+  --text-list-secondary-font-size: var(--text-paragraph-small-font-size); /** Línea secundaria de una fila: un peldaño por debajo del cuerpo */
+  --text-list-secondary-line-height: var(--text-paragraph-small-line-height); /** Interlineado de la línea secundaria de una fila */
+  --text-list-secondary-color: var(--color-text-muted-on-light); /** Color atenuado de la línea secundaria de una fila */
+  --text-list-separator-spacing: var(--separator-spacing-md); /** Aire a cada lado de la línea entre filas */
   --text-h1-font-weight: var(--text-heading-font-weight); /** H1 font weight */
   --text-h1-color: var(--text-heading-color); /** H1 color */
   --text-h2-font-weight: var(--text-heading-font-weight); /** H2 font weight */
@@ -73,6 +78,8 @@
   --text-h6-color: var(--text-heading-color); /** H6 color */
   --text-list-font-weight: var(--text-font-weight); /** List font weight */
   --text-list-color: var(--text-color); /** List text color */
+  --text-list-separator-color: var(--separator-color); /** Línea entre filas de una lista con separadores */
+  --text-list-separator-thickness: var(--separator-thickness); /** Grosor de la línea entre filas */
 }
 
 .surface-dark,
@@ -88,4 +95,6 @@ html.dark {
   --text-h5-color: var(--color-text-on-dark); /** H5 color — surface-dark */
   --text-h6-color: var(--color-text-on-dark); /** H6 color — surface-dark */
   --text-list-color: var(--color-text-on-dark); /** List color — surface-dark */
+  --text-list-secondary-color: var(--color-text-muted-on-dark); /** Línea secundaria de una fila — surface-dark */
+  --text-list-separator-color: var(--separator-color); /** Línea entre filas — surface-dark */
 }

package/src/tokens/scss/components/_text.scss

@@ -71,3 +71,10 @@ $lxd-text-list-color: #111e30; // List text color
 $lxd-text-list-letter-spacing: 0em; // List letter spacing
 $lxd-text-list-gap: 0.5rem; // Spacing between list items (8px)
 $lxd-text-list-padding-inline-start: 2rem; // Left indent for list (32px)
+$lxd-text-list-item-gap: 0.75rem; // Aire entre el contenido de una fila y su accesorio final (trailing) (12px)
+$lxd-text-list-secondary-font-size: 0.875rem; // Línea secundaria de una fila: un peldaño por debajo del cuerpo
+$lxd-text-list-secondary-line-height: 1.65; // Interlineado de la línea secundaria de una fila
+$lxd-text-list-secondary-color: #4a4a4a; // Color atenuado de la línea secundaria de una fila
+$lxd-text-list-separator-color: #111e30; // Línea entre filas de una lista con separadores
+$lxd-text-list-separator-thickness: 1px; // Grosor de la línea entre filas
+$lxd-text-list-separator-spacing: 0.5rem; // Aire a cada lado de la línea entre filas

package/src/tokens/surface-invert.css

@@ -391,6 +391,8 @@ html.dark .surface-invert {
   --text-h5-color: var(--text-heading-color);
   --text-h6-color: var(--text-heading-color);
   --text-list-color: var(--text-color);
+  --text-list-secondary-color: var(--color-text-muted-on-light);
+  --text-list-separator-color: var(--separator-color);
   --textarea-bg: var(--color-white);
   --textarea-color: var(--color-text-on-light);
   --textarea-border-color: var(--color-primary);

package/src/tokens/surface-light.css

@@ -392,6 +392,8 @@ html.dark .surface-light {
   --text-h5-color: var(--text-heading-color);
   --text-h6-color: var(--text-heading-color);
   --text-list-color: var(--text-color);
+  --text-list-secondary-color: var(--color-text-muted-on-light);
+  --text-list-separator-color: var(--separator-color);
   --textarea-bg: var(--color-white);
   --textarea-color: var(--color-text-on-light);
   --textarea-border-color: var(--color-primary);

package/src/tokens/surface-public.css

@@ -177,6 +177,7 @@
   --text-h6-font-size: var(--text-size-3);
   --text-list-font-size: var(--text-font-size);
   --text-list-line-height: var(--text-line-height);
+  --text-list-secondary-font-size: var(--text-paragraph-small-font-size);
   --assistant-message-model-font-size: var(--text-paragraph-small-font-size);
   --assistant-message-timestamp-font-size: var(--text-paragraph-small-font-size);
   --async-multi-select-field-error-font-size: var(--form-error-font-size);

package/src/tokens/tokens.json

@@ -1903,6 +1903,13 @@
   "--text-list-letter-spacing": "0em",
   "--text-list-gap": "0.5rem",
   "--text-list-padding-inline-start": "2rem",
+  "--text-list-item-gap": "0.75rem",
+  "--text-list-secondary-font-size": "0.875rem",
+  "--text-list-secondary-line-height": "1.65",
+  "--text-list-secondary-color": "#4a4a4a",
+  "--text-list-separator-color": "#111e30",
+  "--text-list-separator-thickness": "1px",
+  "--text-list-separator-spacing": "0.5rem",
   "--textarea-border-radius": "0px",
   "--textarea-border-width": "1px",
   "--textarea-border-style": "solid",