@prolibu-suite/cobalt-tokens 0.4.0 → 0.5.0

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-transparency-reduced.css

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --co-glass-filter: none;
+  }
+}

package/build/css/tokens.css

@@ -121,14 +121,16 @@
   --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-duration-fast: 150ms;
+  --co-motion-duration-base: 250ms;
+  --co-motion-duration-slow: 350ms;
+  --co-motion-duration-slower: 500ms;
+  --co-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 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-motion-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
+  --co-motion-blur-sm: 2px;
+  --co-motion-blur-md: 3px;
   --co-border-radius-xxs: 4px;
   --co-border-radius-xs: 8px;
   --co-border-radius-sm: 12px;
@@ -213,7 +215,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

@@ -128,6 +128,8 @@ export const MotionEaseOut: string;
 export const MotionEaseIn: string;
 export const MotionEaseInOut: string;
 export const MotionEaseSpring: string;
+export const MotionBlurSm: string;
+export const MotionBlurMd: string;
 export const BorderRadiusXxs: string;
 export const BorderRadiusXs: string;
 export const BorderRadiusSm: string;

package/build/js/tokens.mjs

@@ -120,14 +120,16 @@ 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 MotionDurationFast = "150ms";
+export const MotionDurationBase = "250ms";
+export const MotionDurationSlow = "350ms";
+export const MotionDurationSlower = "500ms";
+export const MotionEaseOut = "cubic-bezier(0.22, 1, 0.36, 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 MotionEaseSpring = "cubic-bezier(0.34, 1.36, 0.64, 1)";
+export const MotionBlurSm = "2px";
+export const MotionBlurMd = "3px";
 export const BorderRadiusXxs = "4px";
 export const BorderRadiusXs = "8px";
 export const BorderRadiusSm = "12px";
@@ -144,7 +146,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

@@ -119,14 +119,16 @@ $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-duration-fast: 150ms;
+$co-motion-duration-base: 250ms;
+$co-motion-duration-slow: 350ms;
+$co-motion-duration-slower: 500ms;
+$co-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 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-motion-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
+$co-motion-blur-sm: 2px;
+$co-motion-blur-md: 3px;
 $co-border-radius-xxs: 4px;
 $co-border-radius-xs: 8px;
 $co-border-radius-sm: 12px;
@@ -143,7 +145,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.4.0",
+  "version": "0.5.0",
   "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
   "type": "module",
   "exports": {
@@ -10,7 +10,9 @@
     },
     "./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",
+    "./css/transparency-reduced": "./build/css/tokens-transparency-reduced.css",
     "./scss": "./build/scss/_tokens.scss"
   },
   "main": "build/js/tokens.mjs",
@@ -33,7 +35,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "style-dictionary build --config config.js && node config.dark.js && node config.motion.js",
+    "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"
   }