@cregis/tokens 1.0.3 → 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 (4) 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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cregis/tokens",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Design tokens for frontend projects",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/desktop/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/mobile/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/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
  }