@prolibu-suite/cobalt-tokens 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6
|
+
:root {
|
|
7
|
+
--co-motion-duration-instant: 0.01ms;
|
|
8
|
+
--co-motion-duration-fast: 0.01ms;
|
|
9
|
+
--co-motion-duration-base: 0.01ms;
|
|
10
|
+
--co-motion-duration-slow: 0.01ms;
|
|
11
|
+
--co-motion-duration-slower: 0.01ms;
|
|
12
|
+
}
|
|
13
|
+
}
|
package/build/css/tokens.css
CHANGED
|
@@ -120,6 +120,15 @@
|
|
|
120
120
|
--co-glass-blur: 12px;
|
|
121
121
|
--co-glass-saturate: 1.3;
|
|
122
122
|
--co-glass-panel-blur: 18px;
|
|
123
|
+
--co-motion-duration-instant: 80ms;
|
|
124
|
+
--co-motion-duration-fast: 120ms;
|
|
125
|
+
--co-motion-duration-base: 180ms;
|
|
126
|
+
--co-motion-duration-slow: 240ms;
|
|
127
|
+
--co-motion-duration-slower: 400ms;
|
|
128
|
+
--co-motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
129
|
+
--co-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
130
|
+
--co-motion-ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
|
|
131
|
+
--co-motion-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
|
|
123
132
|
--co-border-radius-xxs: 4px;
|
|
124
133
|
--co-border-radius-xs: 8px;
|
|
125
134
|
--co-border-radius-sm: 12px;
|
package/build/js/tokens.d.ts
CHANGED
|
@@ -119,6 +119,15 @@ export const ColorOpacityBlanco80: string;
|
|
|
119
119
|
export const GlassBlur: string;
|
|
120
120
|
export const GlassSaturate: string;
|
|
121
121
|
export const GlassPanelBlur: string;
|
|
122
|
+
export const MotionDurationInstant: string;
|
|
123
|
+
export const MotionDurationFast: string;
|
|
124
|
+
export const MotionDurationBase: string;
|
|
125
|
+
export const MotionDurationSlow: string;
|
|
126
|
+
export const MotionDurationSlower: string;
|
|
127
|
+
export const MotionEaseOut: string;
|
|
128
|
+
export const MotionEaseIn: string;
|
|
129
|
+
export const MotionEaseInOut: string;
|
|
130
|
+
export const MotionEaseSpring: string;
|
|
122
131
|
export const BorderRadiusXxs: string;
|
|
123
132
|
export const BorderRadiusXs: string;
|
|
124
133
|
export const BorderRadiusSm: string;
|
package/build/js/tokens.mjs
CHANGED
|
@@ -119,6 +119,15 @@ export const ColorOpacityBlanco80 = "rgba(255, 255, 255, 0.80)";
|
|
|
119
119
|
export const GlassBlur = "12px";
|
|
120
120
|
export const GlassSaturate = "1.3";
|
|
121
121
|
export const GlassPanelBlur = "18px";
|
|
122
|
+
export const MotionDurationInstant = "80ms";
|
|
123
|
+
export const MotionDurationFast = "120ms";
|
|
124
|
+
export const MotionDurationBase = "180ms";
|
|
125
|
+
export const MotionDurationSlow = "240ms";
|
|
126
|
+
export const MotionDurationSlower = "400ms";
|
|
127
|
+
export const MotionEaseOut = "cubic-bezier(0.2, 0, 0, 1)";
|
|
128
|
+
export const MotionEaseIn = "cubic-bezier(0.4, 0, 1, 1)";
|
|
129
|
+
export const MotionEaseInOut = "cubic-bezier(0.45, 0, 0.15, 1)";
|
|
130
|
+
export const MotionEaseSpring = "cubic-bezier(0.34, 1.25, 0.64, 1)";
|
|
122
131
|
export const BorderRadiusXxs = "4px";
|
|
123
132
|
export const BorderRadiusXs = "8px";
|
|
124
133
|
export const BorderRadiusSm = "12px";
|
package/build/scss/_tokens.scss
CHANGED
|
@@ -118,6 +118,15 @@ $co-color-opacity-blanco-80: rgba(255, 255, 255, 0.80);
|
|
|
118
118
|
$co-glass-blur: 12px;
|
|
119
119
|
$co-glass-saturate: 1.3;
|
|
120
120
|
$co-glass-panel-blur: 18px;
|
|
121
|
+
$co-motion-duration-instant: 80ms;
|
|
122
|
+
$co-motion-duration-fast: 120ms;
|
|
123
|
+
$co-motion-duration-base: 180ms;
|
|
124
|
+
$co-motion-duration-slow: 240ms;
|
|
125
|
+
$co-motion-duration-slower: 400ms;
|
|
126
|
+
$co-motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
127
|
+
$co-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
128
|
+
$co-motion-ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
|
|
129
|
+
$co-motion-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
|
|
121
130
|
$co-border-radius-xxs: 4px;
|
|
122
131
|
$co-border-radius-xs: 8px;
|
|
123
132
|
$co-border-radius-sm: 12px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prolibu-suite/cobalt-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
"./css": "./build/css/tokens.css",
|
|
12
12
|
"./css/dark": "./build/css/tokens-dark.css",
|
|
13
|
+
"./css/motion-reduced": "./build/css/tokens-motion-reduced.css",
|
|
13
14
|
"./scss": "./build/scss/_tokens.scss"
|
|
14
15
|
},
|
|
15
16
|
"main": "build/js/tokens.mjs",
|
|
@@ -32,7 +33,7 @@
|
|
|
32
33
|
"access": "public"
|
|
33
34
|
},
|
|
34
35
|
"scripts": {
|
|
35
|
-
"build": "style-dictionary build --config config.js && node config.dark.js",
|
|
36
|
+
"build": "style-dictionary build --config config.js && node config.dark.js && node config.motion.js",
|
|
36
37
|
"dev": "style-dictionary build --config config.js --watch",
|
|
37
38
|
"clean": "rm -rf build"
|
|
38
39
|
}
|