@cregis/tokens 1.0.2 → 1.0.4

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.
Files changed (22) hide show
  1. package/package.json +1 -1
  2. package/src/desktop/color-definition.css +148 -148
  3. package/src/mobile/color-definition.css +148 -148
  4. package/src/web/color-definition.css +148 -148
  5. package/src/web/index.css +1 -0
  6. package/src/web/motion/index.css +1 -0
  7. package/src/web/motion/motion.css +7 -0
  8. package/src/web/size/base.css +39 -33
  9. package/src/web/size/blur.css +3 -3
  10. package/src/web/size/control.css +15 -0
  11. package/src/web/size/depth.css +3 -3
  12. package/src/web/size/icon.css +4 -5
  13. package/src/web/size/index.css +7 -6
  14. package/src/web/size/radius.css +3 -5
  15. package/src/web/size/spacing.css +4 -3
  16. package/src/web/typography/combination.css +94 -30
  17. package/src/web/typography/font-family.css +1 -2
  18. package/src/web/typography/font-size.css +19 -8
  19. package/src/web/typography/font-weight.css +3 -3
  20. package/src/web/typography/index.css +7 -5
  21. package/src/web/typography/line-height.css +19 -8
  22. package/src/web/typography/typography.css +62 -0
package/src/web/color-definition.css CHANGED
@@ -1,172 +1,172 @@
1
1
  :root {
2
- --box-container: color-mix(in oklch, var(--eds-container) 80%, transparent);
3
- --box-menu: color-mix(in oklch, var(--eds-menu) 100%, transparent);
4
- --box-page: color-mix(in oklch, var(--eds-page) 100%, transparent);
5
- --box-flotation: color-mix(in oklch, var(--eds-flotation) 100%, transparent);
6
-
7
- --event-hover-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
8
- --event-hover-secondary: color-mix(in oklch, var(--eds-base) 5%, transparent);
9
- --event-hover-tertiary: color-mix(in oklch, var(--eds-page) 100%, transparent);
10
- --event-focus-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
11
- --event-focus-secondary: color-mix(in oklch, var(--eds-base) 7%, transparent);
12
- --event-focus-tertiary: color-mix(in oklch, var(--eds-brand) 20%, transparent);
13
-
14
- --text-brand-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
15
- --text-brand-secondary: color-mix(in oklch, var(--eds-brand) 60%, transparent);
16
- --text-brand-tertiary: color-mix(in oklch, var(--eds-brand) 40%, transparent);
17
- --text-brand-quaternary: color-mix(in oklch, var(--eds-brand) 20%, transparent);
18
- --text-match: color-mix(in oklch, var(--eds-match) 100%, transparent);
19
- --text-success: color-mix(in oklch, var(--eds-success) 100%, transparent);
20
- --text-danger-primary: color-mix(in oklch, var(--eds-danger) 100%, transparent);
21
- --text-danger-secondary: color-mix(in oklch, var(--eds-danger) 60%, transparent);
22
- --text-danger-disable: color-mix(in oklch, var(--eds-danger) 20%, transparent);
23
- --text-warning: color-mix(in oklch, var(--eds-warning) 100%, transparent);
24
- --text-same-black-primary: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
25
- --text-same-black-secondary: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
26
- --text-same-white-primary: color-mix(in oklch, var(--eds-same-white) 100%, transparent);
27
- --text-same-white-secondary: color-mix(in oklch, var(--eds-same-white) 60%, transparent);
28
- --text-base-primary: color-mix(in oklch, var(--eds-base) 100%, transparent);
29
- --text-base-secondary: color-mix(in oklch, var(--eds-base) 60%, transparent);
30
- --text-base-tertiary: color-mix(in oklch, var(--eds-base) 40%, transparent);
31
- --text-base-quaternary: color-mix(in oklch, var(--eds-base) 20%, transparent);
32
- --text-face-primary: color-mix(in oklch, var(--eds-face) 100%, transparent);
33
- --text-face-secondary: color-mix(in oklch, var(--eds-face) 60%, transparent);
34
- --text-face-tertiary: color-mix(in oklch, var(--eds-face) 40%, transparent);
35
- --text-face-quaternary: color-mix(in oklch, var(--eds-face) 20%, transparent);
36
-
37
- --material-hide: color-mix(in oklch, var(--eds-base) 0%, transparent);
38
- --material-brand-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
39
- --material-brand-tertiary: color-mix(in oklch, var(--eds-brand) 40%, transparent);
40
- --material-brand-quaternary: color-mix(in oklch, var(--eds-brand) 20%, transparent);
41
- --material-brand-subtle: color-mix(in oklch, var(--eds-brand) 10%, transparent);
42
- --material-match-primary: color-mix(in oklch, var(--eds-match) 100%, transparent);
43
- --material-match-quaternary: color-mix(in oklch, var(--eds-match) 20%, transparent);
44
- --material-decor-primary: color-mix(in oklch, var(--eds-decor) 100%, transparent);
45
- --material-decor-quaternary: color-mix(in oklch, var(--eds-decor) 20%, transparent);
46
- --material-decor-primary-10: color-mix(in oklch, var(--eds-decor) 10%, transparent);
47
- --material-success-primary: color-mix(in oklch, var(--eds-success) 100%, transparent);
48
- --material-success-quaternary: color-mix(in oklch, var(--eds-success) 20%, transparent);
49
- --material-danger-primary: color-mix(in oklch, var(--eds-danger) 100%, transparent);
50
- --material-danger-quaternary: color-mix(in oklch, var(--eds-danger) 20%, transparent);
51
- --material-warning-primary: color-mix(in oklch, var(--eds-warning) 100%, transparent);
52
- --material-warning-quaternary: color-mix(in oklch, var(--eds-warning) 20%, transparent);
53
- --material-same-black: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
54
- --material-same-white-primary: color-mix(in oklch, var(--eds-same-white) 100%, transparent);
55
- --material-same-white-secondary: color-mix(in oklch, var(--eds-same-white) 60%, transparent);
56
- --material-same-white-quaternary: color-mix(in oklch, var(--eds-same-white) 80%, transparent);
57
- --material-card-shallow: color-mix(in oklch, var(--eds-base) 2%, transparent);
58
- --material-card-moderate: color-mix(in oklch, var(--eds-base) 5%, transparent);
59
- --material-card-subtle: color-mix(in oklch, var(--eds-base) 4%, transparent);
60
- --material-card-deep: color-mix(in oklch, var(--eds-base) 10%, transparent);
61
- --material-base-primary: color-mix(in oklch, var(--eds-base) 100%, transparent);
62
- --material-base-secondary: color-mix(in oklch, var(--eds-base) 60%, transparent);
63
- --material-base-tertiary: color-mix(in oklch, var(--eds-base) 40%, transparent);
64
- --material-base-quaternary: color-mix(in oklch, var(--eds-base) 20%, transparent);
65
- --material-face-primary: color-mix(in oklch, var(--eds-face) 100%, transparent);
66
- --material-face-secondary: color-mix(in oklch, var(--eds-face) 60%, transparent);
67
- --material-face-tertiary: color-mix(in oklch, var(--eds-face) 40%, transparent);
68
- --material-face-quaternary: color-mix(in oklch, var(--eds-face) 20%, transparent);
69
-
70
- --eds-data-table-head: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
71
- --eds-data-table-scroll-bar-background: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
72
- --eds-data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 4%, transparent);
73
- --eds-data-table-scroll-bar-indicator-hover: color-mix(in oklch, var(--eds-base) 20%, transparent);
74
-
75
- --data-table-head: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
76
- --data-table-scroll-bar-background: color-mix(in oklch, var(--eds-data-table) 90%, transparent);
77
- --data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 4%, transparent);
78
- --data-table-scroll-bar-indicator-hover: color-mix(in oklch, var(--eds-base) 20%, transparent);
79
-
80
- --effect-shadow-deep: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
81
- --effect-shadow-shallow: color-mix(in oklch, var(--eds-same-black) 10%, transparent);
82
- --effect-popup-background: color-mix(in oklch, var(--eds-same-black) 50%, transparent);
83
- --effect-popup-box: color-mix(in oklch, var(--eds-flotation) 100%, transparent);
84
- --effect-flotation-box: color-mix(in oklch, var(--eds-flotation) 100%, transparent);
85
- --effect-mask: color-mix(in oklch, var(--eds-page) 60%, transparent);
86
- --effect-prompt: color-mix(in oklch, var(--eds-base) 90%, transparent);
87
- --effect-subtle-shadow: color-mix(in oklch, var(--eds-same-black) 3%, transparent);
88
- --effect-vulvar-shadow: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
89
- --effect-vulvar-shadow-glow: color-mix(in oklch, var(--eds-vulvar-glow) 100%, transparent);
90
- --effect-inner-shadow: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
91
- --effect-inner-shadow-glow: color-mix(in oklch, var(--eds-inner-glow) 100%, transparent);
92
-
93
- --stroke-hide: color-mix(in oklch, var(--eds-base) 0%, transparent);
94
- --stroke-base-primary: color-mix(in oklch, var(--eds-base) 100%, transparent);
95
- --stroke-base-secondary: color-mix(in oklch, var(--eds-base) 60%, transparent);
96
- --stroke-base-tertiary: color-mix(in oklch, var(--eds-base) 40%, transparent);
97
- --stroke-base-quaternary: color-mix(in oklch, var(--eds-base) 20%, transparent);
98
- --stroke-face-primary: color-mix(in oklch, var(--eds-face) 100%, transparent);
99
- --stroke-face-secondary: color-mix(in oklch, var(--eds-face) 60%, transparent);
100
- --stroke-divider-module: color-mix(in oklch, var(--eds-module-stroke) 100%, transparent);
101
- --stroke-divider-page: color-mix(in oklch, var(--eds-base) 10%, transparent);
102
- --stroke-divider-table: color-mix(in oklch, var(--eds-base) 9%, transparent);
103
- --stroke-outline-shallow: color-mix(in oklch, var(--eds-base) 12%, transparent);
104
- --stroke-outline-deep: color-mix(in oklch, var(--eds-base) 18%, transparent);
105
- --stroke-outline-subtle: color-mix(in oklch, var(--eds-base) 6%, transparent);
106
- --stroke-color-brand: color-mix(in oklch, var(--eds-brand) 100%, transparent);
107
- --stroke-color-brand-active: color-mix(in oklch, var(--eds-brand) 60%, transparent);
108
- --stroke-color-table-hover: color-mix(in oklch, var(--eds-brand) 40%, transparent);
109
- --stroke-color-success: color-mix(in oklch, var(--eds-success) 100%, transparent);
110
- --stroke-color-decor: color-mix(in oklch, var(--eds-decor) 100%, transparent);
111
- --stroke-color-danger: color-mix(in oklch, var(--eds-danger) 100%, transparent);
112
- --stroke-color-danger-active: color-mix(in oklch, var(--eds-danger) 60%, transparent);
113
- --stroke-same-white-primary: color-mix(in oklch, var(--eds-same-white) 100%, transparent);
114
- --stroke-same-white-secondary: color-mix(in oklch, var(--eds-same-white) 60%, transparent);
115
- --stroke-same-black-primary: color-mix(in oklch, var(--eds-same-black) 100%, transparent);
116
- --stroke-same-black-secondary: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
2
+ --box-container: color(from var(--eds-container) display-p3 r g b / 0.8);
3
+ --box-menu: color(from var(--eds-menu) display-p3 r g b / 1);
4
+ --box-page: color(from var(--eds-page) display-p3 r g b / 1);
5
+ --box-flotation: color(from var(--eds-flotation) display-p3 r g b / 1);
6
+
7
+ --event-hover-primary: color(from var(--eds-brand) display-p3 r g b / 1);
8
+ --event-hover-secondary: color(from var(--eds-base) display-p3 r g b / 0.05);
9
+ --event-hover-tertiary: color(from var(--eds-page) display-p3 r g b / 1);
10
+ --event-focus-primary: color(from var(--eds-brand) display-p3 r g b / 1);
11
+ --event-focus-secondary: color(from var(--eds-base) display-p3 r g b / 0.07);
12
+ --event-focus-tertiary: color(from var(--eds-brand) display-p3 r g b / 0.2);
13
+
14
+ --text-brand-primary: color(from var(--eds-brand) display-p3 r g b / 1);
15
+ --text-brand-secondary: color(from var(--eds-brand) display-p3 r g b / 0.6);
16
+ --text-brand-tertiary: color(from var(--eds-brand) display-p3 r g b / 0.4);
17
+ --text-brand-quaternary: color(from var(--eds-brand) display-p3 r g b / 0.2);
18
+ --text-match: color(from var(--eds-match) display-p3 r g b / 1);
19
+ --text-success: color(from var(--eds-success) display-p3 r g b / 1);
20
+ --text-danger-primary: color(from var(--eds-danger) display-p3 r g b / 1);
21
+ --text-danger-secondary: color(from var(--eds-danger) display-p3 r g b / 0.6);
22
+ --text-danger-disable: color(from var(--eds-danger) display-p3 r g b / 0.2);
23
+ --text-warning: color(from var(--eds-warning) display-p3 r g b / 1);
24
+ --text-same-black-primary: color(from var(--eds-same-black) display-p3 r g b / 1);
25
+ --text-same-black-secondary: color(from var(--eds-same-black) display-p3 r g b / 0.6);
26
+ --text-same-white-primary: color(from var(--eds-same-white) display-p3 r g b / 1);
27
+ --text-same-white-secondary: color(from var(--eds-same-white) display-p3 r g b / 0.6);
28
+ --text-base-primary: color(from var(--eds-base) display-p3 r g b / 1);
29
+ --text-base-secondary: color(from var(--eds-base) display-p3 r g b / 0.6);
30
+ --text-base-tertiary: color(from var(--eds-base) display-p3 r g b / 0.4);
31
+ --text-base-quaternary: color(from var(--eds-base) display-p3 r g b / 0.2);
32
+ --text-face-primary: color(from var(--eds-face) display-p3 r g b / 1);
33
+ --text-face-secondary: color(from var(--eds-face) display-p3 r g b / 0.6);
34
+ --text-face-tertiary: color(from var(--eds-face) display-p3 r g b / 0.4);
35
+ --text-face-quaternary: color(from var(--eds-face) display-p3 r g b / 0.2);
36
+
37
+ --material-hide: color(from var(--eds-base) display-p3 r g b / 0);
38
+ --material-brand-primary: color(from var(--eds-brand) display-p3 r g b / 1);
39
+ --material-brand-tertiary: color(from var(--eds-brand) display-p3 r g b / 0.4);
40
+ --material-brand-quaternary: color(from var(--eds-brand) display-p3 r g b / 0.2);
41
+ --material-brand-subtle: color(from var(--eds-brand) display-p3 r g b / 0.1);
42
+ --material-match-primary: color(from var(--eds-match) display-p3 r g b / 1);
43
+ --material-match-quaternary: color(from var(--eds-match) display-p3 r g b / 0.2);
44
+ --material-decor-primary: color(from var(--eds-decor) display-p3 r g b / 1);
45
+ --material-decor-quaternary: color(from var(--eds-decor) display-p3 r g b / 0.2);
46
+ --material-decor-primary-10: color(from var(--eds-decor) display-p3 r g b / 0.1);
47
+ --material-success-primary: color(from var(--eds-success) display-p3 r g b / 1);
48
+ --material-success-quaternary: color(from var(--eds-success) display-p3 r g b / 0.2);
49
+ --material-danger-primary: color(from var(--eds-danger) display-p3 r g b / 1);
50
+ --material-danger-quaternary: color(from var(--eds-danger) display-p3 r g b / 0.2);
51
+ --material-warning-primary: color(from var(--eds-warning) display-p3 r g b / 1);
52
+ --material-warning-quaternary: color(from var(--eds-warning) display-p3 r g b / 0.2);
53
+ --material-same-black: color(from var(--eds-same-black) display-p3 r g b / 1);
54
+ --material-same-white-primary: color(from var(--eds-same-white) display-p3 r g b / 1);
55
+ --material-same-white-secondary: color(from var(--eds-same-white) display-p3 r g b / 0.6);
56
+ --material-same-white-quaternary: color(from var(--eds-same-white) display-p3 r g b / 0.8);
57
+ --material-card-shallow: color(from var(--eds-base) display-p3 r g b / 0.02);
58
+ --material-card-moderate: color(from var(--eds-base) display-p3 r g b / 0.05);
59
+ --material-card-subtle: color(from var(--eds-base) display-p3 r g b / 0.04);
60
+ --material-card-deep: color(from var(--eds-base) display-p3 r g b / 0.1);
61
+ --material-base-primary: color(from var(--eds-base) display-p3 r g b / 1);
62
+ --material-base-secondary: color(from var(--eds-base) display-p3 r g b / 0.6);
63
+ --material-base-tertiary: color(from var(--eds-base) display-p3 r g b / 0.4);
64
+ --material-base-quaternary: color(from var(--eds-base) display-p3 r g b / 0.2);
65
+ --material-face-primary: color(from var(--eds-face) display-p3 r g b / 1);
66
+ --material-face-secondary: color(from var(--eds-face) display-p3 r g b / 0.6);
67
+ --material-face-tertiary: color(from var(--eds-face) display-p3 r g b / 0.4);
68
+ --material-face-quaternary: color(from var(--eds-face) display-p3 r g b / 0.2);
69
+
70
+ --eds-data-table-head: color(from var(--eds-data-table) display-p3 r g b / 0.9);
71
+ --eds-data-table-scroll-bar-background: color(from var(--eds-data-table) display-p3 r g b / 0.9);
72
+ --eds-data-table-scroll-bar-indicator: color(from var(--eds-base) display-p3 r g b / 0.04);
73
+ --eds-data-table-scroll-bar-indicator-hover: color(from var(--eds-base) display-p3 r g b / 0.2);
74
+
75
+ --data-table-head: color(from var(--eds-data-table) display-p3 r g b / 0.9);
76
+ --data-table-scroll-bar-background: color(from var(--eds-data-table) display-p3 r g b / 0.9);
77
+ --data-table-scroll-bar-indicator: color(from var(--eds-base) display-p3 r g b / 0.04);
78
+ --data-table-scroll-bar-indicator-hover: color(from var(--eds-base) display-p3 r g b / 0.2);
79
+
80
+ --effect-shadow-deep: color(from var(--eds-same-black) display-p3 r g b / 0.2);
81
+ --effect-shadow-shallow: color(from var(--eds-same-black) display-p3 r g b / 0.1);
82
+ --effect-popup-background: color(from var(--eds-same-black) display-p3 r g b / 0.5);
83
+ --effect-popup-box: color(from var(--eds-flotation) display-p3 r g b / 1);
84
+ --effect-flotation-box: color(from var(--eds-flotation) display-p3 r g b / 1);
85
+ --effect-mask: color(from var(--eds-page) display-p3 r g b / 0.6);
86
+ --effect-prompt: color(from var(--eds-base) display-p3 r g b / 0.9);
87
+ --effect-subtle-shadow: color(from var(--eds-same-black) display-p3 r g b / 0.03);
88
+ --effect-vulvar-shadow: color(from var(--eds-same-black) display-p3 r g b / 0.2);
89
+ --effect-vulvar-shadow-glow: color(from var(--eds-vulvar-glow) display-p3 r g b / 1);
90
+ --effect-inner-shadow: color(from var(--eds-same-black) display-p3 r g b / 1);
91
+ --effect-inner-shadow-glow: color(from var(--eds-inner-glow) display-p3 r g b / 1);
92
+
93
+ --stroke-hide: color(from var(--eds-base) display-p3 r g b / 0);
94
+ --stroke-base-primary: color(from var(--eds-base) display-p3 r g b / 1);
95
+ --stroke-base-secondary: color(from var(--eds-base) display-p3 r g b / 0.6);
96
+ --stroke-base-tertiary: color(from var(--eds-base) display-p3 r g b / 0.4);
97
+ --stroke-base-quaternary: color(from var(--eds-base) display-p3 r g b / 0.2);
98
+ --stroke-face-primary: color(from var(--eds-face) display-p3 r g b / 1);
99
+ --stroke-face-secondary: color(from var(--eds-face) display-p3 r g b / 0.6);
100
+ --stroke-divider-module: color(from var(--eds-module-stroke) display-p3 r g b / 1);
101
+ --stroke-divider-page: color(from var(--eds-base) display-p3 r g b / 0.1);
102
+ --stroke-divider-table: color(from var(--eds-base) display-p3 r g b / 0.09);
103
+ --stroke-outline-shallow: color(from var(--eds-base) display-p3 r g b / 0.12);
104
+ --stroke-outline-deep: color(from var(--eds-base) display-p3 r g b / 0.18);
105
+ --stroke-outline-subtle: color(from var(--eds-base) display-p3 r g b / 0.06);
106
+ --stroke-color-brand: color(from var(--eds-brand) display-p3 r g b / 1);
107
+ --stroke-color-brand-active: color(from var(--eds-brand) display-p3 r g b / 0.6);
108
+ --stroke-color-table-hover: color(from var(--eds-brand) display-p3 r g b / 0.4);
109
+ --stroke-color-success: color(from var(--eds-success) display-p3 r g b / 1);
110
+ --stroke-color-decor: color(from var(--eds-decor) display-p3 r g b / 1);
111
+ --stroke-color-danger: color(from var(--eds-danger) display-p3 r g b / 1);
112
+ --stroke-color-danger-active: color(from var(--eds-danger) display-p3 r g b / 0.6);
113
+ --stroke-same-white-primary: color(from var(--eds-same-white) display-p3 r g b / 1);
114
+ --stroke-same-white-secondary: color(from var(--eds-same-white) display-p3 r g b / 0.6);
115
+ --stroke-same-black-primary: color(from var(--eds-same-black) display-p3 r g b / 1);
116
+ --stroke-same-black-secondary: color(from var(--eds-same-black) display-p3 r g b / 0.6);
117
117
  }
118
118
 
119
119
  .dark {
120
- --box-container: color-mix(in oklch, var(--eds-container) 80%, transparent);
120
+ --box-container: color(from var(--eds-container) display-p3 r g b / 0.8);
121
121
 
122
- --event-hover-secondary: color-mix(in oklch, var(--eds-base) 7%, transparent);
123
- --event-focus-secondary: color-mix(in oklch, var(--eds-base) 10%, transparent);
122
+ --event-hover-secondary: color(from var(--eds-base) display-p3 r g b / 0.07);
123
+ --event-focus-secondary: color(from var(--eds-base) display-p3 r g b / 0.1);
124
124
 
125
- --stroke-divider-table: color-mix(in oklch, var(--eds-base) 7%, transparent);
125
+ --stroke-divider-table: color(from var(--eds-base) display-p3 r g b / 0.07);
126
126
 
127
- --material-same-white-quaternary: color-mix(in oklch, var(--eds-same-white) 20%, transparent);
128
- --material-card-shallow: color-mix(in oklch, var(--eds-base) 2%, transparent);
129
- --material-card-moderate: color-mix(in oklch, var(--eds-base) 7%, transparent);
130
- --material-card-subtle: color-mix(in oklch, var(--eds-base) 6%, transparent);
127
+ --material-same-white-quaternary: color(from var(--eds-same-white) display-p3 r g b / 0.2);
128
+ --material-card-shallow: color(from var(--eds-base) display-p3 r g b / 0.02);
129
+ --material-card-moderate: color(from var(--eds-base) display-p3 r g b / 0.07);
130
+ --material-card-subtle: color(from var(--eds-base) display-p3 r g b / 0.06);
131
131
 
132
- --eds-data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
132
+ --eds-data-table-scroll-bar-indicator: color(from var(--eds-base) display-p3 r g b / 0.07);
133
133
 
134
- --data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
134
+ --data-table-scroll-bar-indicator: color(from var(--eds-base) display-p3 r g b / 0.07);
135
135
 
136
- --effect-shadow-deep: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
137
- --effect-shadow-shallow: color-mix(in oklch, var(--eds-same-black) 30%, transparent);
138
- --effect-prompt: color-mix(in oklch, var(--eds-base) 20%, transparent);
139
- --effect-subtle-shadow: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
136
+ --effect-shadow-deep: color(from var(--eds-same-black) display-p3 r g b / 0.6);
137
+ --effect-shadow-shallow: color(from var(--eds-same-black) display-p3 r g b / 0.3);
138
+ --effect-prompt: color(from var(--eds-base) display-p3 r g b / 0.2);
139
+ --effect-subtle-shadow: color(from var(--eds-same-black) display-p3 r g b / 0.2);
140
140
 
141
- --stroke-outline-shallow: color-mix(in oklch, var(--eds-base) 14%, transparent);
142
- --stroke-outline-deep: color-mix(in oklch, var(--eds-base) 20%, transparent);
143
- --stroke-outline-subtle: color-mix(in oklch, var(--eds-base) 10%, transparent);
141
+ --stroke-outline-shallow: color(from var(--eds-base) display-p3 r g b / 0.14);
142
+ --stroke-outline-deep: color(from var(--eds-base) display-p3 r g b / 0.2);
143
+ --stroke-outline-subtle: color(from var(--eds-base) display-p3 r g b / 0.1);
144
144
  }
145
145
 
146
146
  @media (prefers-color-scheme: dark) {
147
147
  .system {
148
- --box-container: color-mix(in oklch, var(--eds-container) 80%, transparent);
148
+ --box-container: color(from var(--eds-container) display-p3 r g b / 0.8);
149
149
 
150
- --event-hover-secondary: color-mix(in oklch, var(--eds-base) 7%, transparent);
151
- --event-focus-secondary: color-mix(in oklch, var(--eds-base) 10%, transparent);
150
+ --event-hover-secondary: color(from var(--eds-base) display-p3 r g b / 0.07);
151
+ --event-focus-secondary: color(from var(--eds-base) display-p3 r g b / 0.1);
152
152
 
153
- --stroke-divider-table: color-mix(in oklch, var(--eds-base) 7%, transparent);
153
+ --stroke-divider-table: color(from var(--eds-base) display-p3 r g b / 0.07);
154
154
 
155
- --material-same-white-quaternary: color-mix(in oklch, var(--eds-same-white) 20%, transparent);
156
- --material-card-shallow: color-mix(in oklch, var(--eds-base) 2%, transparent);
157
- --material-card-moderate: color-mix(in oklch, var(--eds-base) 7%, transparent);
158
- --material-card-subtle: color-mix(in oklch, var(--eds-base) 6%, transparent);
155
+ --material-same-white-quaternary: color(from var(--eds-same-white) display-p3 r g b / 0.2);
156
+ --material-card-shallow: color(from var(--eds-base) display-p3 r g b / 0.02);
157
+ --material-card-moderate: color(from var(--eds-base) display-p3 r g b / 0.07);
158
+ --material-card-subtle: color(from var(--eds-base) display-p3 r g b / 0.06);
159
159
 
160
- --eds-data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
160
+ --eds-data-table-scroll-bar-indicator: color(from var(--eds-base) display-p3 r g b / 0.07);
161
161
 
162
- --data-table-scroll-bar-indicator: color-mix(in oklch, var(--eds-base) 7%, transparent);
162
+ --data-table-scroll-bar-indicator: color(from var(--eds-base) display-p3 r g b / 0.07);
163
163
 
164
- --effect-shadow-deep: color-mix(in oklch, var(--eds-same-black) 60%, transparent);
165
- --effect-prompt: color-mix(in oklch, var(--eds-base) 20%, transparent);
166
- --effect-subtle-shadow: color-mix(in oklch, var(--eds-same-black) 20%, transparent);
164
+ --effect-shadow-deep: color(from var(--eds-same-black) display-p3 r g b / 0.6);
165
+ --effect-prompt: color(from var(--eds-base) display-p3 r g b / 0.2);
166
+ --effect-subtle-shadow: color(from var(--eds-same-black) display-p3 r g b / 0.2);
167
167
 
168
- --stroke-outline-shallow: color-mix(in oklch, var(--eds-base) 14%, transparent);
169
- --stroke-outline-deep: color-mix(in oklch, var(--eds-base) 20%, transparent);
170
- --stroke-outline-subtle: color-mix(in oklch, var(--eds-base) 10%, transparent);
168
+ --stroke-outline-shallow: color(from var(--eds-base) display-p3 r g b / 0.14);
169
+ --stroke-outline-deep: color(from var(--eds-base) display-p3 r g b / 0.2);
170
+ --stroke-outline-subtle: color(from var(--eds-base) display-p3 r g b / 0.1);
171
171
  }
172
172
  }
package/src/web/index.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @import "./theme.css";
2
2
  @import "./color-definition.css";
3
3
  @import "./size/index.css";
4
+ @import "./motion/index.css";
4
5
  @import "./typography/index.css";
package/src/web/motion/index.css ADDED
@@ -0,0 +1 @@
1
+ @import "./motion.css";
package/src/web/motion/motion.css ADDED
@@ -0,0 +1,7 @@
1
+ :root {
2
+ --eds-motion-hover-duration: 0.35s;
3
+ --eds-motion-control-duration: 0.5s;
4
+ --eds-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
5
+ --eds-motion-ease-in-out: var(--eds-motion-ease-standard);
6
+ --eds-hover-transition-duration: var(--eds-motion-hover-duration);
7
+ }
package/src/web/size/base.css CHANGED
@@ -1,37 +1,43 @@
1
1
  :root {
2
- --scale-0: 0px;
3
- --scale-025: 1px;
4
- --scale-05: 2px;
5
- --scale-1: 4px;
6
- --scale-1-5: 6px;
7
- --scale-2: 8px;
8
- --scale-2-5: 10px;
9
- --scale-3: 12px;
10
- --scale-4: 16px;
11
- --scale-5: 20px;
12
- --scale-6: 24px;
13
- --scale-7: 28px;
14
- --scale-8: 32px;
15
- --scale-9: 36px;
16
- --scale-10: 40px;
17
- --scale-11: 44px;
18
- --scale-12: 48px;
19
- --scale-13: 52px;
20
- --scale-14: 56px;
21
- --scale-15: 60px;
22
- --scale-16: 64px;
23
- --scale-17: 68px;
24
- --scale-18: 72px;
25
- --scale-19: 76px;
26
- --scale-20: 80px;
27
- --scale-30: 120px;
28
- --scale-40: 160px;
29
- --scale-50: 200px;
2
+ --scale-base: 8px;
3
+ --scale-0: calc(0 * var(--scale-base));
4
+ --scale-05: calc(0.5 * var(--scale-base));
5
+ --scale-0-75: calc(0.75 * var(--scale-base));
6
+ --scale-1: calc(1 * var(--scale-base));
7
+ --scale-1-5: calc(1.5 * var(--scale-base));
8
+ --scale-2: calc(2 * var(--scale-base));
9
+ --scale-2-5: calc(2.5 * var(--scale-base));
10
+ --scale-3: calc(3 * var(--scale-base));
11
+ --scale-4: calc(4 * var(--scale-base));
12
+ --scale-4-5: calc(4.5 * var(--scale-base));
13
+ --scale-5: calc(5 * var(--scale-base));
14
+ --scale-5-5: calc(5.5 * var(--scale-base));
15
+ --scale-6: calc(6 * var(--scale-base));
16
+ --scale-6-5: calc(6.5 * var(--scale-base));
17
+ --scale-7: calc(7 * var(--scale-base));
18
+ --scale-7-5: calc(7.5 * var(--scale-base));
19
+ --scale-8: calc(8 * var(--scale-base));
20
+ --scale-9: calc(9 * var(--scale-base));
21
+ --scale-10: calc(10 * var(--scale-base));
22
+ --scale-11: calc(11 * var(--scale-base));
23
+ --scale-12: calc(12 * var(--scale-base));
24
+ --scale-13: calc(13 * var(--scale-base));
25
+ --scale-14: calc(14 * var(--scale-base));
26
+ --scale-15: calc(15 * var(--scale-base));
27
+ --scale-16: calc(16 * var(--scale-base));
28
+ --scale-17: calc(17 * var(--scale-base));
29
+ --scale-18: calc(18 * var(--scale-base));
30
+ --scale-19: calc(19 * var(--scale-base));
31
+ --scale-20: calc(20 * var(--scale-base));
32
+ --scale-30: calc(30 * var(--scale-base));
33
+ --scale-40: calc(40 * var(--scale-base));
34
+ --scale-50: calc(50 * var(--scale-base));
30
35
  --scale-full: 888px;
31
36
 
32
- --stroke-xl: 2;
33
- --stroke-lg: 1.4;
34
- --stroke-md: 1.1;
35
- --stroke-sm: 1;
36
- --stroke-xs: 0.5;
37
+ --stroke-xs: 0.5px;
38
+ --stroke-sm: 1px;
39
+ --stroke-md: 1.5px;
40
+ --stroke-lg: 2px;
41
+
42
+ --corner-smoothing: 0.6;
37
43
  }
package/src/web/size/blur.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --blur-shallow: var(--scale-20);
3
- --blur-deep: var(--scale-12);
4
- --blur-subtle: var(--scale-4);
2
+ --blur-subtle: var(--scale-2);
3
+ --blur-shallow: var(--scale-6);
4
+ --blur-deep: var(--scale-10);
5
5
  }
package/src/web/size/control.css ADDED
@@ -0,0 +1,15 @@
1
+ :root {
2
+ --control-button-xs: var(--scale-4);
3
+ --control-button-sm: var(--scale-5);
4
+ --control-button-md: var(--scale-6);
5
+ --control-button-lg: var(--scale-7);
6
+ --control-button-xl: var(--scale-7-5);
7
+ --control-icon-xs: var(--scale-4-5);
8
+ --control-icon-sm: var(--scale-5);
9
+ --control-icon-md: var(--scale-6);
10
+ --control-icon-lg: var(--scale-6-5);
11
+ --control-icon-xl: var(--scale-7);
12
+ --control-input-sm: var(--scale-4-5);
13
+ --control-input-md: var(--scale-5-5);
14
+ --control-input-lg: var(--scale-6-5);
15
+ }
package/src/web/size/depth.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --depth-shallow: var(--scale-6);
3
- --depth-deep: var(--scale-2);
4
- --depth-subtle: var(--scale-1-5);
2
+ --depth-subtle: var(--scale-05);
3
+ --depth-shallow: var(--scale-1);
4
+ --depth-deep: var(--scale-3);
5
5
  }
package/src/web/size/icon.css CHANGED
@@ -1,7 +1,6 @@
1
1
  :root {
2
- --icon-root: var(--scale-8);
3
- --icon-xl: var(--scale-6);
4
- --icon-lg: var(--scale-5);
5
- --icon-md: var(--scale-4);
6
- --icon-sm: var(--scale-3);
2
+ --icon-sm: var(--scale-1-5);
3
+ --icon-md: var(--scale-2);
4
+ --icon-lg: var(--scale-2-5);
5
+ --icon-xl: var(--scale-3);
7
6
  }
package/src/web/size/index.css CHANGED
@@ -1,6 +1,7 @@
1
- @import './base.css';
2
- @import './spacing.css';
3
- @import './radius.css';
4
- @import './blur.css';
5
- @import './depth.css';
6
- @import './icon.css';
1
+ @import "./base.css";
2
+ @import "./spacing.css";
3
+ @import "./radius.css";
4
+ @import "./blur.css";
5
+ @import "./depth.css";
6
+ @import "./icon.css";
7
+ @import "./control.css";
package/src/web/size/radius.css CHANGED
@@ -1,9 +1,7 @@
1
1
  :root {
2
2
  --radius-0: var(--scale-0);
3
- --radius-xs: var(--scale-1);
4
- --radius-sm: var(--scale-2);
5
- --radius-md: var(--scale-3);
6
- --radius-lg: var(--scale-4);
7
- --radius-frame: var(--scale-8);
3
+ --radius-sm: var(--scale-0-75);
4
+ --radius-md: var(--scale-2);
5
+ --radius-lg: var(--scale-3);
8
6
  --radius-full: var(--scale-full);
9
7
  }
package/src/web/size/spacing.css CHANGED
@@ -1,7 +1,6 @@
1
1
  :root {
2
2
  --spacing-0: var(--scale-0);
3
- --spacing-025: var(--scale-025);
4
- --spacing-0-5: var(--scale-05);
3
+ --spacing-05: var(--scale-05);
5
4
  --spacing-1: var(--scale-1);
6
5
  --spacing-1-5: var(--scale-1-5);
7
6
  --spacing-2: var(--scale-2);
@@ -14,10 +13,12 @@
14
13
  --spacing-8: var(--scale-8);
15
14
  --spacing-9: var(--scale-9);
16
15
  --spacing-10: var(--scale-10);
17
- --spacing-11: var(--scale-11);
18
16
  --spacing-12: var(--scale-12);
19
17
  --spacing-14: var(--scale-14);
20
18
  --spacing-16: var(--scale-16);
21
19
  --spacing-18: var(--scale-18);
22
20
  --spacing-20: var(--scale-20);
21
+ --spacing-30: var(--scale-30);
22
+ --spacing-40: var(--scale-40);
23
+ --spacing-50: var(--scale-50);
23
24
  }