@prolibu-suite/cobalt-tokens 0.3.0 → 0.4.1

package/build/css/tokens-dark.css

@@ -7,7 +7,7 @@
   --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-4);
+  --co-semantic-surface-hover: var(--co-color-opacity-blanco-8);
   --co-semantic-surface-disabled: var(--co-color-gray-700);
   --co-semantic-on-primary: var(--co-color-base-negro);
   --co-semantic-on-secondary: var(--co-color-base-blanco);

package/build/css/tokens-light.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-theme="light"] {
+  --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-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);
+  --co-semantic-text-inverse: var(--co-color-base-blanco);
+  --co-semantic-text-secondary: var(--co-color-gray-600);
+  --co-semantic-text-muted: var(--co-color-gray-500);
+  --co-semantic-text-disabled: var(--co-color-gray-400);
+  --co-semantic-border-default: var(--co-color-opacity-negro-16);
+  --co-semantic-border-subtle: var(--co-color-opacity-negro-8);
+  --co-semantic-border-strong: var(--co-color-opacity-negro-50);
+  --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-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);
+  --co-semantic-status-error: var(--co-color-status-error);
+  --co-semantic-status-warning: var(--co-color-primary-amarillo);
+  --co-semantic-status-info: var(--co-color-status-progress);
+}

package/build/css/tokens-motion-reduced.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --co-motion-duration-instant: 0.01ms;
+    --co-motion-duration-fast: 0.01ms;
+    --co-motion-duration-base: 0.01ms;
+    --co-motion-duration-slow: 0.01ms;
+    --co-motion-duration-slower: 0.01ms;
+  }
+}

package/build/css/tokens.css

@@ -120,6 +120,15 @@
   --co-glass-blur: 12px;
   --co-glass-saturate: 1.3;
   --co-glass-panel-blur: 18px;
+  --co-motion-duration-instant: 80ms;
+  --co-motion-duration-fast: 120ms;
+  --co-motion-duration-base: 180ms;
+  --co-motion-duration-slow: 240ms;
+  --co-motion-duration-slower: 400ms;
+  --co-motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --co-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --co-motion-ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
+  --co-motion-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
   --co-border-radius-xxs: 4px;
   --co-border-radius-xs: 8px;
   --co-border-radius-sm: 12px;
@@ -204,7 +213,7 @@
   --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-4);
+  --co-semantic-surface-hover: var(--co-color-opacity-negro-8);
   --co-semantic-surface-disabled: var(--co-color-gray-100);
   --co-semantic-on-primary: var(--co-color-base-blanco);
   --co-semantic-on-secondary: var(--co-color-base-negro);

package/build/js/tokens.d.ts

@@ -119,6 +119,15 @@ export const ColorOpacityBlanco80: string;
 export const GlassBlur: string;
 export const GlassSaturate: string;
 export const GlassPanelBlur: string;
+export const MotionDurationInstant: string;
+export const MotionDurationFast: string;
+export const MotionDurationBase: string;
+export const MotionDurationSlow: string;
+export const MotionDurationSlower: string;
+export const MotionEaseOut: string;
+export const MotionEaseIn: string;
+export const MotionEaseInOut: string;
+export const MotionEaseSpring: string;
 export const BorderRadiusXxs: string;
 export const BorderRadiusXs: string;
 export const BorderRadiusSm: string;

package/build/js/tokens.mjs

@@ -119,6 +119,15 @@ export const ColorOpacityBlanco80 = "rgba(255, 255, 255, 0.80)";
 export const GlassBlur = "12px";
 export const GlassSaturate = "1.3";
 export const GlassPanelBlur = "18px";
+export const MotionDurationInstant = "80ms";
+export const MotionDurationFast = "120ms";
+export const MotionDurationBase = "180ms";
+export const MotionDurationSlow = "240ms";
+export const MotionDurationSlower = "400ms";
+export const MotionEaseOut = "cubic-bezier(0.2, 0, 0, 1)";
+export const MotionEaseIn = "cubic-bezier(0.4, 0, 1, 1)";
+export const MotionEaseInOut = "cubic-bezier(0.45, 0, 0.15, 1)";
+export const MotionEaseSpring = "cubic-bezier(0.34, 1.25, 0.64, 1)";
 export const BorderRadiusXxs = "4px";
 export const BorderRadiusXs = "8px";
 export const BorderRadiusSm = "12px";
@@ -135,7 +144,7 @@ export const SemanticSurfacePrimary = "#1f1c1b";
 export const SemanticSurfaceSecondary = "#ffffff";
 export const SemanticSurfacePage = "#ffffff";
 export const SemanticSurfaceMuted = "#e3e3e3";
-export const SemanticSurfaceHover = "rgba(31, 28, 27, 0.04)";
+export const SemanticSurfaceHover = "rgba(31, 28, 27, 0.08)";
 export const SemanticSurfaceDisabled = "#f6f6f6";
 export const SemanticOnPrimary = "#ffffff";
 export const SemanticOnSecondary = "#1f1c1b";

package/build/scss/_tokens.scss

@@ -118,6 +118,15 @@ $co-color-opacity-blanco-80: rgba(255, 255, 255, 0.80);
 $co-glass-blur: 12px;
 $co-glass-saturate: 1.3;
 $co-glass-panel-blur: 18px;
+$co-motion-duration-instant: 80ms;
+$co-motion-duration-fast: 120ms;
+$co-motion-duration-base: 180ms;
+$co-motion-duration-slow: 240ms;
+$co-motion-duration-slower: 400ms;
+$co-motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
+$co-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+$co-motion-ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
+$co-motion-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
 $co-border-radius-xxs: 4px;
 $co-border-radius-xs: 8px;
 $co-border-radius-sm: 12px;
@@ -134,7 +143,7 @@ $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.04);
+$co-semantic-surface-hover: rgba(31, 28, 27, 0.08);
 $co-semantic-surface-disabled: #f6f6f6;
 $co-semantic-on-primary: #ffffff;
 $co-semantic-on-secondary: #1f1c1b;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prolibu-suite/cobalt-tokens",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
   "type": "module",
   "exports": {
@@ -10,6 +10,8 @@
     },
     "./css": "./build/css/tokens.css",
     "./css/dark": "./build/css/tokens-dark.css",
+    "./css/light": "./build/css/tokens-light.css",
+    "./css/motion-reduced": "./build/css/tokens-motion-reduced.css",
     "./scss": "./build/scss/_tokens.scss"
   },
   "main": "build/js/tokens.mjs",
@@ -32,7 +34,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "style-dictionary build --config config.js && node config.dark.js",
+    "build": "style-dictionary build --config config.js && node config.dark.js && node config.light.js && node config.motion.js",
     "dev": "style-dictionary build --config config.js --watch",
     "clean": "rm -rf build"
   }