@prolibu-suite/cobalt-tokens 0.5.0 → 0.6.0

package/build/css/tokens-dark.css

@@ -3,12 +3,15 @@
  */
 
 [data-theme="dark"] {
+  --co-semantic-accent: var(--co-color-celeste-600);
+  --co-semantic-on-accent: var(--co-color-base-blanco);
   --co-semantic-surface-primary: var(--co-color-base-blanco);
   --co-semantic-surface-secondary: var(--co-color-gray-800);
   --co-semantic-surface-page: var(--co-color-gray-800);
   --co-semantic-surface-muted: var(--co-color-gray-600);
   --co-semantic-surface-hover: var(--co-color-opacity-blanco-8);
   --co-semantic-surface-disabled: var(--co-color-gray-700);
+  --co-semantic-surface-control: var(--co-color-gray-700);
   --co-semantic-on-primary: var(--co-color-base-negro);
   --co-semantic-on-secondary: var(--co-color-base-blanco);
   --co-semantic-text-default: var(--co-color-base-blanco);
@@ -22,6 +25,7 @@
   --co-semantic-border-field: var(--co-color-opacity-blanco-25);
   --co-semantic-border-focus: var(--co-color-opacity-blanco-50);
   --co-semantic-border-focus-ring: var(--co-color-opacity-blanco-8);
+  --co-semantic-border-hairline: var(--co-color-opacity-blanco-4);
   --co-semantic-control-thumb: var(--co-color-base-negro);
   --co-semantic-control-shadow: var(--co-color-opacity-blanco-16);
   --co-semantic-status-success: var(--co-color-status-success);

package/build/css/tokens-light.css

@@ -3,12 +3,15 @@
  */
 
 [data-theme="light"] {
+  --co-semantic-accent: var(--co-color-celeste-600);
+  --co-semantic-on-accent: var(--co-color-base-blanco);
   --co-semantic-surface-primary: var(--co-color-base-negro);
   --co-semantic-surface-secondary: var(--co-color-base-blanco);
   --co-semantic-surface-page: var(--co-color-base-blanco);
   --co-semantic-surface-muted: var(--co-color-gray-200);
   --co-semantic-surface-hover: var(--co-color-opacity-negro-8);
   --co-semantic-surface-disabled: var(--co-color-gray-100);
+  --co-semantic-surface-control: var(--co-color-gray-100);
   --co-semantic-on-primary: var(--co-color-base-blanco);
   --co-semantic-on-secondary: var(--co-color-base-negro);
   --co-semantic-text-default: var(--co-color-base-negro);
@@ -22,6 +25,7 @@
   --co-semantic-border-field: var(--co-color-opacity-negro-25);
   --co-semantic-border-focus: var(--co-color-opacity-negro-50);
   --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
+  --co-semantic-border-hairline: var(--co-color-opacity-negro-4);
   --co-semantic-control-thumb: var(--co-color-base-blanco);
   --co-semantic-control-shadow: var(--co-color-opacity-negro-16);
   --co-semantic-status-success: var(--co-color-status-success);

package/build/css/tokens.css

@@ -19,6 +19,8 @@
   --co-color-azul-700: #2563eb;
   --co-color-azul-800: #1d58d8;
   --co-color-azul-900: #1e408a;
+  --co-color-celeste-100: #e5f0ff;
+  --co-color-celeste-600: #008ff0;
   --co-color-rosado-100: #fef1f6;
   --co-color-rosado-200: #fde6f0;
   --co-color-rosado-300: #fdcde2;
@@ -144,6 +146,7 @@
   --co-border-radius-6xl: 64px;
   --co-border-radius-full: 9999px;
   --co-shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.04);
+  --co-shadow-sm2: 0 1px 2px -1px rgba(26, 26, 26, 0.05), 0 1px 4px -1px rgba(26, 26, 26, 0.05);
   --co-shadow-lg: 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05);
   --co-spacing-xxs: 2px;
   --co-spacing-xs: 4px;
@@ -211,12 +214,15 @@
   --co-font-line-height-relaxed: 1.6;
   --co-font-letter-spacing-body: -0.03em;
   --co-font-letter-spacing-overline: 0.08em;
+  --co-semantic-accent: var(--co-color-celeste-600);
+  --co-semantic-on-accent: var(--co-color-base-blanco);
   --co-semantic-surface-primary: var(--co-color-base-negro);
   --co-semantic-surface-secondary: var(--co-color-base-blanco);
   --co-semantic-surface-page: var(--co-color-base-blanco);
   --co-semantic-surface-muted: var(--co-color-gray-200);
   --co-semantic-surface-hover: var(--co-color-opacity-negro-8);
   --co-semantic-surface-disabled: var(--co-color-gray-100);
+  --co-semantic-surface-control: var(--co-color-gray-100);
   --co-semantic-on-primary: var(--co-color-base-blanco);
   --co-semantic-on-secondary: var(--co-color-base-negro);
   --co-semantic-text-default: var(--co-color-base-negro);
@@ -230,6 +236,7 @@
   --co-semantic-border-field: var(--co-color-opacity-negro-25);
   --co-semantic-border-focus: var(--co-color-opacity-negro-50);
   --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
+  --co-semantic-border-hairline: var(--co-color-opacity-negro-4);
   --co-semantic-control-thumb: var(--co-color-base-blanco);
   --co-semantic-control-shadow: var(--co-color-opacity-negro-16);
   --co-semantic-status-success: var(--co-color-status-success);

package/build/js/tokens.d.ts

@@ -18,6 +18,8 @@ export const ColorAzul600: string;
 export const ColorAzul700: string;
 export const ColorAzul800: string;
 export const ColorAzul900: string;
+export const ColorCeleste100: string;
+export const ColorCeleste600: string;
 export const ColorRosado100: string;
 export const ColorRosado200: string;
 export const ColorRosado300: string;
@@ -142,12 +144,15 @@ export const BorderRadius4xl: string;
 export const BorderRadius5xl: string;
 export const BorderRadius6xl: string;
 export const BorderRadiusFull: string;
+export const SemanticAccent: string;
+export const SemanticOnAccent: string;
 export const SemanticSurfacePrimary: string;
 export const SemanticSurfaceSecondary: string;
 export const SemanticSurfacePage: string;
 export const SemanticSurfaceMuted: string;
 export const SemanticSurfaceHover: string;
 export const SemanticSurfaceDisabled: string;
+export const SemanticSurfaceControl: string;
 export const SemanticOnPrimary: string;
 export const SemanticOnSecondary: string;
 export const SemanticTextDefault: string;
@@ -161,6 +166,7 @@ export const SemanticBorderStrong: string;
 export const SemanticBorderField: string;
 export const SemanticBorderFocus: string;
 export const SemanticBorderFocusRing: string;
+export const SemanticBorderHairline: string;
 export const SemanticControlThumb: string;
 export const SemanticControlShadow: string;
 export const SemanticStatusSuccess: string;
@@ -168,6 +174,7 @@ export const SemanticStatusError: string;
 export const SemanticStatusWarning: string;
 export const SemanticStatusInfo: string;
 export const ShadowSm: string;
+export const ShadowSm2: string;
 export const ShadowLg: string;
 export const SpacingXxs: string;
 export const SpacingXs: string;

package/build/js/tokens.mjs

@@ -18,6 +18,8 @@ export const ColorAzul600 = "#3b76f6";
 export const ColorAzul700 = "#2563eb";
 export const ColorAzul800 = "#1d58d8";
 export const ColorAzul900 = "#1e408a";
+export const ColorCeleste100 = "#e5f0ff";
+export const ColorCeleste600 = "#008ff0";
 export const ColorRosado100 = "#fef1f6";
 export const ColorRosado200 = "#fde6f0";
 export const ColorRosado300 = "#fdcde2";
@@ -142,12 +144,15 @@ export const BorderRadius4xl = "48px";
 export const BorderRadius5xl = "56px";
 export const BorderRadius6xl = "64px";
 export const BorderRadiusFull = "9999px";
+export const SemanticAccent = "#008ff0";
+export const SemanticOnAccent = "#ffffff";
 export const SemanticSurfacePrimary = "#1f1c1b";
 export const SemanticSurfaceSecondary = "#ffffff";
 export const SemanticSurfacePage = "#ffffff";
 export const SemanticSurfaceMuted = "#e3e3e3";
 export const SemanticSurfaceHover = "rgba(31, 28, 27, 0.08)";
 export const SemanticSurfaceDisabled = "#f6f6f6";
+export const SemanticSurfaceControl = "#f6f6f6";
 export const SemanticOnPrimary = "#ffffff";
 export const SemanticOnSecondary = "#1f1c1b";
 export const SemanticTextDefault = "#1f1c1b";
@@ -161,6 +166,7 @@ export const SemanticBorderStrong = "rgba(31, 28, 27, 0.50)";
 export const SemanticBorderField = "rgba(31, 28, 27, 0.25)";
 export const SemanticBorderFocus = "rgba(31, 28, 27, 0.50)";
 export const SemanticBorderFocusRing = "rgba(31, 28, 27, 0.08)";
+export const SemanticBorderHairline = "rgba(31, 28, 27, 0.04)";
 export const SemanticControlThumb = "#ffffff";
 export const SemanticControlShadow = "rgba(31, 28, 27, 0.16)";
 export const SemanticStatusSuccess = "#0a7724";
@@ -168,6 +174,8 @@ export const SemanticStatusError = "#aa2e1b";
 export const SemanticStatusWarning = "#fdbf00";
 export const SemanticStatusInfo = "#2d6cc5";
 export const ShadowSm = "0 1px 2px 0 rgba(26, 26, 26, 0.04)";
+export const ShadowSm2 =
+  "0 1px 2px -1px rgba(26, 26, 26, 0.05), 0 1px 4px -1px rgba(26, 26, 26, 0.05)";
 export const ShadowLg =
   "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)";
 export const SpacingXxs = "2px";

package/build/scss/_tokens.scss

@@ -17,6 +17,8 @@ $co-color-azul-600: #3b76f6;
 $co-color-azul-700: #2563eb;
 $co-color-azul-800: #1d58d8;
 $co-color-azul-900: #1e408a;
+$co-color-celeste-100: #e5f0ff;
+$co-color-celeste-600: #008ff0;
 $co-color-rosado-100: #fef1f6;
 $co-color-rosado-200: #fde6f0;
 $co-color-rosado-300: #fdcde2;
@@ -141,12 +143,15 @@ $co-border-radius-4xl: 48px;
 $co-border-radius-5xl: 56px;
 $co-border-radius-6xl: 64px;
 $co-border-radius-full: 9999px;
+$co-semantic-accent: #008ff0;
+$co-semantic-on-accent: #ffffff;
 $co-semantic-surface-primary: #1f1c1b;
 $co-semantic-surface-secondary: #ffffff;
 $co-semantic-surface-page: #ffffff;
 $co-semantic-surface-muted: #e3e3e3;
 $co-semantic-surface-hover: rgba(31, 28, 27, 0.08);
 $co-semantic-surface-disabled: #f6f6f6;
+$co-semantic-surface-control: #f6f6f6;
 $co-semantic-on-primary: #ffffff;
 $co-semantic-on-secondary: #1f1c1b;
 $co-semantic-text-default: #1f1c1b;
@@ -160,6 +165,7 @@ $co-semantic-border-strong: rgba(31, 28, 27, 0.50);
 $co-semantic-border-field: rgba(31, 28, 27, 0.25);
 $co-semantic-border-focus: rgba(31, 28, 27, 0.50);
 $co-semantic-border-focus-ring: rgba(31, 28, 27, 0.08);
+$co-semantic-border-hairline: rgba(31, 28, 27, 0.04);
 $co-semantic-control-thumb: #ffffff;
 $co-semantic-control-shadow: rgba(31, 28, 27, 0.16);
 $co-semantic-status-success: #0a7724;
@@ -167,6 +173,7 @@ $co-semantic-status-error: #aa2e1b;
 $co-semantic-status-warning: #fdbf00;
 $co-semantic-status-info: #2d6cc5;
 $co-shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.04);
+$co-shadow-sm2: 0 1px 2px -1px rgba(26, 26, 26, 0.05), 0 1px 4px -1px rgba(26, 26, 26, 0.05);
 $co-shadow-lg: 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05);
 $co-spacing-xxs: 2px;
 $co-spacing-xs: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prolibu-suite/cobalt-tokens",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
   "type": "module",
   "exports": {
@@ -37,6 +37,7 @@
   "scripts": {
     "build": "style-dictionary build --config config.js && node config.dark.js && node config.light.js && node config.motion.js && node config.transparency.js",
     "dev": "style-dictionary build --config config.js --watch",
-    "clean": "rm -rf build"
+    "clean": "rm -rf build",
+    "test": "node tokens.test.mjs"
   }
 }

package/build/js/tokens.js

@@ -1,75 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-module.exports = {
-  ColorBaseNegro: "#1f1c1b",
-  ColorBaseBlanco: "#ffffff",
-  ColorBaseOffWhite: "#f7f6f0",
-  ColorPrimaryVerde: "#02a270",
-  ColorPrimaryAmarillo: "#fdbf00",
-  ColorPrimaryAzul: "#2563eb",
-  ColorPrimaryRosado: "#f32a73",
-  ColorGray100: "#f6f6f6",
-  ColorGray200: "#e3e3e3",
-  ColorGray300: "#c4c4c4",
-  ColorGray400: "#a0a0a0",
-  ColorGray500: "#888888",
-  ColorGray600: "#585858",
-  ColorGray700: "#1f1c1b",
-  ColorGray800: "#0a0a0a",
-  ColorNeutral100: "#e6e5df",
-  ColorNeutralBeige: "#fffcfa",
-  ColorSecondaryRojo: "#eb1e1e",
-  ColorSecondaryNaranja: "#f0821e",
-  ColorSecondaryOliva: "#aab43c",
-  ColorSecondaryVioleta: "#5f4bd7",
-  ColorSecondaryMarron: "#af7355",
-  ColorVerde100: "#ecfdf5",
-  ColorVerde900: "#046147",
-  ColorStatusSuccess: "#0a7724",
-  ColorStatusSuccessBg: "#ebf9ec",
-  ColorStatusError: "#aa2e1b",
-  ColorStatusProgress: "#2d6cc5",
-  ColorStatusReview: "#85571f",
-  ColorStatusSubmitted: "#7556ca",
-  OpacityNegro4: "rgba(31, 28, 27, 0.04)",
-  OpacityNegro8: "rgba(31, 28, 27, 0.08)",
-  OpacityNegro16: "rgba(31, 28, 27, 0.16)",
-  OpacityNegro25: "rgba(31, 28, 27, 0.25)",
-  OpacityNegro50: "rgba(31, 28, 27, 0.5)",
-  OpacityNegro80: "rgba(31, 28, 27, 0.8)",
-  OpacityBlanco4: "rgba(255, 255, 255, 0.04)",
-  OpacityBlanco8: "rgba(255, 255, 255, 0.08)",
-  OpacityBlanco16: "rgba(255, 255, 255, 0.16)",
-  OpacityBlanco80: "rgba(255, 255, 255, 0.8)",
-  RadiusXxs: "4px",
-  RadiusXs: "8px",
-  RadiusSm: "12px",
-  RadiusLg: "16px",
-  RadiusXl: "24px",
-  RadiusFull: "9999px",
-  ShadowLg:
-    "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)",
-  FocusRing: "0 0 0 2px rgba(31, 28, 27, 0.08)",
-  SpaceXxs: "2px",
-  SpaceXs: "4px",
-  SpaceSm: "6px",
-  SpaceSm2: "8px",
-  SpaceMd: "12px",
-  SpaceLg: "16px",
-  SpaceXl: "20px",
-  Space2xl: "24px",
-  Space3xl: "32px",
-  Space5xl: "48px",
-  FontFamilyPrimary: "'Geist', sans-serif",
-  FontFamilyMono: "'Geist Mono', monospace",
-  FontSize10: "10px",
-  FontSize12: "12px",
-  FontSize14: "14px",
-  FontSize16: "16px",
-  FontSize18: "18px",
-  FontSize20: "20px",
-  FontSize22: "22px",
-  FontSize24: "24px",
-};

package/build/json/tokens.json

@@ -1,70 +0,0 @@
-{
-  "ColorBaseNegro": "#1f1c1b",
-  "ColorBaseBlanco": "#ffffff",
-  "ColorBaseOffWhite": "#f7f6f0",
-  "ColorPrimaryVerde": "#02a270",
-  "ColorPrimaryAmarillo": "#fdbf00",
-  "ColorPrimaryAzul": "#2563eb",
-  "ColorPrimaryRosado": "#f32a73",
-  "ColorGray100": "#f6f6f6",
-  "ColorGray200": "#e3e3e3",
-  "ColorGray300": "#c4c4c4",
-  "ColorGray400": "#a0a0a0",
-  "ColorGray500": "#888888",
-  "ColorGray600": "#585858",
-  "ColorGray700": "#1f1c1b",
-  "ColorGray800": "#0a0a0a",
-  "ColorNeutral100": "#e6e5df",
-  "ColorNeutralBeige": "#fffcfa",
-  "ColorSecondaryRojo": "#eb1e1e",
-  "ColorSecondaryNaranja": "#f0821e",
-  "ColorSecondaryOliva": "#aab43c",
-  "ColorSecondaryVioleta": "#5f4bd7",
-  "ColorSecondaryMarron": "#af7355",
-  "ColorVerde100": "#ecfdf5",
-  "ColorVerde900": "#046147",
-  "ColorStatusSuccess": "#0a7724",
-  "ColorStatusSuccessBg": "#ebf9ec",
-  "ColorStatusError": "#aa2e1b",
-  "ColorStatusProgress": "#2d6cc5",
-  "ColorStatusReview": "#85571f",
-  "ColorStatusSubmitted": "#7556ca",
-  "OpacityNegro4": "rgba(31, 28, 27, 0.04)",
-  "OpacityNegro8": "rgba(31, 28, 27, 0.08)",
-  "OpacityNegro16": "rgba(31, 28, 27, 0.16)",
-  "OpacityNegro25": "rgba(31, 28, 27, 0.25)",
-  "OpacityNegro50": "rgba(31, 28, 27, 0.5)",
-  "OpacityNegro80": "rgba(31, 28, 27, 0.8)",
-  "OpacityBlanco4": "rgba(255, 255, 255, 0.04)",
-  "OpacityBlanco8": "rgba(255, 255, 255, 0.08)",
-  "OpacityBlanco16": "rgba(255, 255, 255, 0.16)",
-  "OpacityBlanco80": "rgba(255, 255, 255, 0.8)",
-  "RadiusXxs": "4px",
-  "RadiusXs": "8px",
-  "RadiusSm": "12px",
-  "RadiusLg": "16px",
-  "RadiusXl": "24px",
-  "RadiusFull": "9999px",
-  "ShadowLg": "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)",
-  "FocusRing": "0 0 0 2px rgba(31, 28, 27, 0.08)",
-  "SpaceXxs": "2px",
-  "SpaceXs": "4px",
-  "SpaceSm": "6px",
-  "SpaceSm2": "8px",
-  "SpaceMd": "12px",
-  "SpaceLg": "16px",
-  "SpaceXl": "20px",
-  "Space2xl": "24px",
-  "Space3xl": "32px",
-  "Space5xl": "48px",
-  "FontFamilyPrimary": "'Geist', sans-serif",
-  "FontFamilyMono": "'Geist Mono', monospace",
-  "FontSize10": "10px",
-  "FontSize12": "12px",
-  "FontSize14": "14px",
-  "FontSize16": "16px",
-  "FontSize18": "18px",
-  "FontSize20": "20px",
-  "FontSize22": "22px",
-  "FontSize24": "24px"
-}

package/build/ts/tokens.d.ts

@@ -1,140 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-/** Figma: Base/Negro */
-export const ColorBaseNegro: string;
-/** Figma: Base/Blanco */
-export const ColorBaseBlanco: string;
-/** Figma: Base/Off-White */
-export const ColorBaseOffWhite: string;
-/** Figma: Primarios/Verde */
-export const ColorPrimaryVerde: string;
-/** Figma: Primarios/Amarillo */
-export const ColorPrimaryAmarillo: string;
-/** Figma: Primarios/Azul */
-export const ColorPrimaryAzul: string;
-/** Figma: Primarios/Rosado */
-export const ColorPrimaryRosado: string;
-/** Figma: Escala de grises/Gris-100 */
-export const ColorGray100: string;
-/** Figma: Escala de grises/Gris-200 */
-export const ColorGray200: string;
-/** Figma: Escala de grises/Gris-300 */
-export const ColorGray300: string;
-/** Figma: Escala de grises/Gris-400 */
-export const ColorGray400: string;
-/** Figma: Escala de grises/Gris-500 */
-export const ColorGray500: string;
-/** Figma: Escala de grises/Gris-600 */
-export const ColorGray600: string;
-/** Figma: Escala de grises/Gris-700 */
-export const ColorGray700: string;
-/** Figma: Escala de grises/Gris-800 */
-export const ColorGray800: string;
-/** Figma: Neutrales/Neutral-100 */
-export const ColorNeutral100: string;
-/** Figma: Neutrals/Beige */
-export const ColorNeutralBeige: string;
-/** Figma: Secundario/Rojo/Rojo 100% */
-export const ColorSecondaryRojo: string;
-/** Figma: Secundario/Naranja/Naranja 100% */
-export const ColorSecondaryNaranja: string;
-/** Figma: Secundario/Oliva/Oliva 100% */
-export const ColorSecondaryOliva: string;
-/** Figma: Secundario/Violeta/Violeta 100% */
-export const ColorSecondaryVioleta: string;
-/** Figma: Secundario/Marrón/Marrón 100% */
-export const ColorSecondaryMarron: string;
-/** Figma: Verde/Verde-100 */
-export const ColorVerde100: string;
-/** Figma: Verde/Verde-900 */
-export const ColorVerde900: string;
-/** Figma: Estatus/Éxito/Success */
-export const ColorStatusSuccess: string;
-/** Figma: Estatus/Éxito/Bg_Success */
-export const ColorStatusSuccessBg: string;
-/** Figma: Estatus/Error/Error */
-export const ColorStatusError: string;
-/** Figma: Estatus/En progreso/In progress */
-export const ColorStatusProgress: string;
-/** Figma: Estatus/En revisión/In review */
-export const ColorStatusReview: string;
-/** Figma: Estatus/Enviado/Submitted */
-export const ColorStatusSubmitted: string;
-/** Figma: Opacidad/Negro/Negro 4% */
-export const OpacityNegro4: string;
-/** Figma: Opacidad/Negro/Negro 8% */
-export const OpacityNegro8: string;
-/** Figma: Opacidad/Negro/Negro 16% */
-export const OpacityNegro16: string;
-/** Figma: Opacidad/Negro/Negro 25% */
-export const OpacityNegro25: string;
-/** Figma: Opacidad/Negro/Negro 50% */
-export const OpacityNegro50: string;
-/** Figma: Opacidad/Negro/Negro 80% */
-export const OpacityNegro80: string;
-/** Figma: Opacidad/Blanco/Blanco 4% */
-export const OpacityBlanco4: string;
-/** Figma: Opacidad/Blanco/Blanco 8% */
-export const OpacityBlanco8: string;
-/** Figma: Opacidad/Blanco/Blanco 16% */
-export const OpacityBlanco16: string;
-/** Figma: Opacidad/Blanco/Blanco 80% */
-export const OpacityBlanco80: string;
-/** Figma: Border Radius/radius-xxs */
-export const RadiusXxs: string;
-/** Figma: Border Radius/radius-xs */
-export const RadiusXs: string;
-/** Figma: Border Radius/radius-sm */
-export const RadiusSm: string;
-/** Figma: Border Radius/radius-lg */
-export const RadiusLg: string;
-/** Figma: Border Radius/radius-xl */
-export const RadiusXl: string;
-/** Figma: Border Radius/radius-full */
-export const RadiusFull: string;
-/** Figma: Shadows/lg — 2 layer composite */
-export const ShadowLg: string;
-/** Figma: Focus effect */
-export const FocusRing: string;
-/** Figma: Espacio/space-xxs */
-export const SpaceXxs: string;
-/** Figma: Espacio/space-xs */
-export const SpaceXs: string;
-/** Figma: Espacio/space-sm */
-export const SpaceSm: string;
-/** Figma: Espacio/space-sm2 */
-export const SpaceSm2: string;
-/** Figma: Espacio/space-md */
-export const SpaceMd: string;
-/** Figma: Espacio/space-lg */
-export const SpaceLg: string;
-/** Figma: Espacio/space-xl */
-export const SpaceXl: string;
-/** Figma: Espacio/space-2xl */
-export const Space2xl: string;
-/** Figma: Espacio/space-3xl */
-export const Space3xl: string;
-/** Figma: Espacio/space-5xl */
-export const Space5xl: string;
-/** Figma: Font Families/font-family-geist */
-export const FontFamilyPrimary: string;
-/** Figma: Font Families/font-family-geist-mono */
-export const FontFamilyMono: string;
-/** Figma: Font Size/font-size-10 */
-export const FontSize10: string;
-/** Figma: Font Size/font-size-12 */
-export const FontSize12: string;
-/** Figma: Font Size/font-size-14 */
-export const FontSize14: string;
-/** Figma: Font Size/font-size-16 */
-export const FontSize16: string;
-/** Figma: Font Size/font-size-18 */
-export const FontSize18: string;
-/** Figma: Font Size/font-size-20 */
-export const FontSize20: string;
-/** Figma: Font Size/font-size-22 */
-export const FontSize22: string;
-/** Figma: Font Size/font-size-24 */
-export const FontSize24: string;