@prolibu-suite/cobalt-tokens 0.2.0 → 0.4.0

package/build/css/tokens-dark.css

@@ -19,7 +19,8 @@
   --co-semantic-border-default: var(--co-color-opacity-blanco-16);
   --co-semantic-border-subtle: var(--co-color-opacity-blanco-8);
   --co-semantic-border-strong: var(--co-color-opacity-blanco-80);
-  --co-semantic-border-focus: var(--co-color-opacity-blanco-16);
+  --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-control-thumb: var(--co-color-base-negro);
   --co-semantic-control-shadow: var(--co-color-opacity-blanco-16);

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;
@@ -216,7 +225,8 @@
   --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-focus: var(--co-color-opacity-negro-25);
+  --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);

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;
@@ -147,6 +156,7 @@ export const SemanticTextDisabled: string;
 export const SemanticBorderDefault: string;
 export const SemanticBorderSubtle: string;
 export const SemanticBorderStrong: string;
+export const SemanticBorderField: string;
 export const SemanticBorderFocus: string;
 export const SemanticBorderFocusRing: string;
 export const SemanticControlThumb: 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";
@@ -147,7 +156,8 @@ export const SemanticTextDisabled = "#a0a0a0";
 export const SemanticBorderDefault = "rgba(31, 28, 27, 0.16)";
 export const SemanticBorderSubtle = "rgba(31, 28, 27, 0.08)";
 export const SemanticBorderStrong = "rgba(31, 28, 27, 0.50)";
-export const SemanticBorderFocus = "rgba(31, 28, 27, 0.25)";
+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 SemanticControlThumb = "#ffffff";
 export const SemanticControlShadow = "rgba(31, 28, 27, 0.16)";

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;
@@ -146,7 +155,8 @@ $co-semantic-text-disabled: #a0a0a0;
 $co-semantic-border-default: rgba(31, 28, 27, 0.16);
 $co-semantic-border-subtle: rgba(31, 28, 27, 0.08);
 $co-semantic-border-strong: rgba(31, 28, 27, 0.50);
-$co-semantic-border-focus: rgba(31, 28, 27, 0.25);
+$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-control-thumb: #ffffff;
 $co-semantic-control-shadow: rgba(31, 28, 27, 0.16);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prolibu-suite/cobalt-tokens",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
   "type": "module",
   "exports": {
@@ -10,6 +10,7 @@
     },
     "./css": "./build/css/tokens.css",
     "./css/dark": "./build/css/tokens-dark.css",
+    "./css/motion-reduced": "./build/css/tokens-motion-reduced.css",
     "./scss": "./build/scss/_tokens.scss"
   },
   "main": "build/js/tokens.mjs",
@@ -32,7 +33,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.motion.js",
     "dev": "style-dictionary build --config config.js --watch",
     "clean": "rm -rf build"
   }