@db-ux/core-foundations 4.5.4 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +16 -69
  3. package/agent/_instructions.md +84 -0
  4. package/agent/tailwind/Variables.md +11 -9
  5. package/build/styles/bundle.css +4820 -0
  6. package/build/styles/{index.scss → bundle.scss} +5 -0
  7. package/build/styles/colors/_default-color-mappings.scss +3461 -3472
  8. package/build/styles/colors/_placeholder.scss +155 -159
  9. package/build/styles/colors/classes/all.css +2499 -2601
  10. package/build/styles/colors/classes/blue.css +147 -185
  11. package/build/styles/colors/classes/brand.css +147 -185
  12. package/build/styles/colors/classes/burgundy.css +147 -185
  13. package/build/styles/colors/classes/critical.css +147 -185
  14. package/build/styles/colors/classes/cyan.css +147 -185
  15. package/build/styles/colors/classes/green.css +147 -185
  16. package/build/styles/colors/classes/informational.css +147 -185
  17. package/build/styles/colors/classes/light-green.css +147 -185
  18. package/build/styles/colors/classes/neutral.css +147 -185
  19. package/build/styles/colors/classes/orange.css +147 -185
  20. package/build/styles/colors/classes/pink.css +147 -185
  21. package/build/styles/colors/classes/red.css +147 -185
  22. package/build/styles/colors/classes/successful.css +147 -185
  23. package/build/styles/colors/classes/turquoise.css +147 -185
  24. package/build/styles/colors/classes/violet.css +147 -185
  25. package/build/styles/colors/classes/warning.css +147 -185
  26. package/build/styles/colors/classes/yellow.css +147 -185
  27. package/build/styles/defaults/default-code.css +97 -97
  28. package/build/styles/defaults/default-container-properties.css +1 -0
  29. package/build/styles/defaults/default-container-variables.css +1 -0
  30. package/build/styles/defaults/default-elevation.css +1 -1
  31. package/build/styles/defaults/default-fonts.css +1 -1
  32. package/build/styles/defaults/default-icons.css +1 -1
  33. package/build/styles/defaults/default-properties.css +1 -0
  34. package/build/styles/defaults/default-required.css +1 -1
  35. package/build/styles/defaults/default-required.scss +13 -16
  36. package/build/styles/defaults/default-root.css +97 -97
  37. package/build/styles/defaults/default-variables.css +1 -0
  38. package/build/styles/density/_scaling-placeholder.scss +51 -54
  39. package/build/styles/density/_typography-placeholder.scss +54 -60
  40. package/build/styles/density/classes/all.css +759 -907
  41. package/build/styles/density/classes/expressive.css +255 -377
  42. package/build/styles/density/classes/functional.css +255 -377
  43. package/build/styles/density/classes/regular.css +255 -377
  44. package/build/styles/fonts/_font-sizes.scss +10 -16
  45. package/build/styles/fonts/absolute.scss +1 -1
  46. package/build/styles/fonts/classes/all.css +54 -214
  47. package/build/styles/fonts/classes/body/2xl.css +3 -95
  48. package/build/styles/fonts/classes/body/2xs.css +3 -95
  49. package/build/styles/fonts/classes/body/3xl.css +3 -95
  50. package/build/styles/fonts/classes/body/3xs.css +3 -95
  51. package/build/styles/fonts/classes/body/all.css +27 -151
  52. package/build/styles/fonts/classes/body/lg.css +3 -95
  53. package/build/styles/fonts/classes/body/md.css +3 -95
  54. package/build/styles/fonts/classes/body/sm.css +3 -95
  55. package/build/styles/fonts/classes/body/xl.css +3 -95
  56. package/build/styles/fonts/classes/body/xs.css +3 -95
  57. package/build/styles/fonts/classes/headline/2xl.css +3 -95
  58. package/build/styles/fonts/classes/headline/2xs.css +3 -95
  59. package/build/styles/fonts/classes/headline/3xl.css +3 -95
  60. package/build/styles/fonts/classes/headline/3xs.css +3 -95
  61. package/build/styles/fonts/classes/headline/all.css +27 -151
  62. package/build/styles/fonts/classes/headline/lg.css +3 -95
  63. package/build/styles/fonts/classes/headline/md.css +3 -95
  64. package/build/styles/fonts/classes/headline/sm.css +3 -95
  65. package/build/styles/fonts/classes/headline/xl.css +3 -95
  66. package/build/styles/fonts/classes/headline/xs.css +3 -95
  67. package/build/styles/fonts/relative.scss +1 -1
  68. package/build/styles/fonts/rollup.scss +1 -1
  69. package/build/styles/fonts/webpack.scss +1 -1
  70. package/build/styles/helpers/_index.scss +0 -1
  71. package/build/styles/helpers/classes/all.css +0 -34
  72. package/build/styles/helpers/classes/divider.css +0 -34
  73. package/build/styles/helpers/classes/focus.css +0 -34
  74. package/build/styles/icons/absolute.css +1 -1
  75. package/build/styles/icons/absolute.scss +1 -1
  76. package/build/styles/icons/relative.css +1 -1
  77. package/build/styles/icons/relative.scss +1 -1
  78. package/build/styles/icons/rollup.css +1 -1
  79. package/build/styles/icons/rollup.scss +1 -1
  80. package/build/styles/icons/webpack.css +1 -1
  81. package/build/styles/icons/webpack.scss +1 -1
  82. package/build/styles/theme/absolute.css +1 -0
  83. package/build/styles/theme/relative.css +1 -0
  84. package/build/styles/{defaults/default-theme.scss → theme/relative.scss} +3 -6
  85. package/build/styles/theme/rollup.css +1 -0
  86. package/build/styles/theme/webpack.css +1 -0
  87. package/build/tailwind/theme/colors.css +1 -2953
  88. package/build/tailwind/theme/colors.scss +1 -10
  89. package/build/tailwind/theme/dimensions.css +77 -160
  90. package/package.json +4 -4
  91. package/build/styles/absolute.css +0 -10635
  92. package/build/styles/defaults/default-theme.css +0 -97
  93. package/build/styles/helpers/_layer.scss +0 -1
  94. package/build/styles/index.css +0 -4907
  95. package/build/styles/relative.css +0 -10635
  96. package/build/styles/relative.scss +0 -4
  97. package/build/styles/rollup.css +0 -10635
  98. package/build/styles/webpack.css +0 -10635
  99. package/build/tailwind/theme/_variables.scss +0 -77
  100. package/build/tailwind/theme/dimensions.scss +0 -17
  101. /package/build/styles/defaults/{_default-container-properties.scss → default-container-properties.scss} +0 -0
  102. /package/build/styles/defaults/{_default-container-variables.scss → default-container-variables.scss} +0 -0
  103. /package/build/styles/defaults/{_default-properties.scss → default-properties.scss} +0 -0
  104. /package/build/styles/defaults/{_default-variables.scss → default-variables.scss} +0 -0
  105. /package/build/styles/{_absolute.assets-paths.scss → theme/_absolute.assets-paths.scss} +0 -0
  106. /package/build/styles/{_default.assets-paths.scss → theme/_default.assets-paths.scss} +0 -0
  107. /package/build/styles/{_rollup.assets-paths.scss → theme/_rollup.assets-paths.scss} +0 -0
  108. /package/build/styles/{_webpack.assets-paths.scss → theme/_webpack.assets-paths.scss} +0 -0
  109. /package/build/styles/{absolute.scss → theme/absolute.scss} +0 -0
  110. /package/build/styles/{rollup.scss → theme/rollup.scss} +0 -0
  111. /package/build/styles/{webpack.scss → theme/webpack.scss} +0 -0
package/build/styles/colors/_placeholder.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @use "sass:string";
2
2
  @use "variables";
3
3
  @use "../helpers/functions";
4
- @use "../helpers/layer";
5
4
  @use "variables.additional" as additional-colors;
6
5
 
7
6
  @mixin set-current-colors($bg, $on, $hovered: false, $pressed: false) {
@@ -28,171 +27,168 @@
28
27
 
29
28
  @mixin generate-color-placeholder($variant) {
30
29
  %db-#{$variant}-variables {
31
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
32
- @layer #{layer.$layer-variables} {
33
- // bg basic
34
- --db-adaptive-bg-basic-level-1-default: var(
35
- --db-#{$variant}-bg-basic-level-1-default
36
- );
37
- --db-adaptive-bg-basic-level-1-hovered: var(
38
- --db-#{$variant}-bg-basic-level-1-hovered
39
- );
40
- --db-adaptive-bg-basic-level-1-pressed: var(
41
- --db-#{$variant}-bg-basic-level-1-pressed
42
- );
43
- --db-adaptive-bg-basic-level-2-default: var(
44
- --db-#{$variant}-bg-basic-level-2-default
45
- );
46
- --db-adaptive-bg-basic-level-2-hovered: var(
47
- --db-#{$variant}-bg-basic-level-2-hovered
48
- );
49
- --db-adaptive-bg-basic-level-2-pressed: var(
50
- --db-#{$variant}-bg-basic-level-2-pressed
51
- );
52
- --db-adaptive-bg-basic-level-3-default: var(
53
- --db-#{$variant}-bg-basic-level-3-default
54
- );
55
- --db-adaptive-bg-basic-level-3-hovered: var(
56
- --db-#{$variant}-bg-basic-level-3-hovered
57
- );
58
- --db-adaptive-bg-basic-level-3-pressed: var(
59
- --db-#{$variant}-bg-basic-level-3-pressed
60
- );
61
- --db-adaptive-bg-basic-transparent-full-default: var(
62
- --db-#{$variant}-bg-basic-transparent-full-default
63
- );
64
- --db-adaptive-bg-basic-transparent-semi-default: var(
65
- --db-#{$variant}-bg-basic-transparent-semi-default
66
- );
67
- --db-adaptive-bg-basic-transparent-full-hovered: var(
68
- --db-#{$variant}-bg-basic-transparent-full-hovered
69
- );
70
- --db-adaptive-bg-basic-transparent-full-pressed: var(
71
- --db-#{$variant}-bg-basic-transparent-full-pressed
72
- );
73
- --db-adaptive-bg-basic-transparent-semi-hovered: var(
74
- --db-#{$variant}-bg-basic-transparent-semi-hovered
75
- );
76
- --db-adaptive-bg-basic-transparent-semi-pressed: var(
77
- --db-#{$variant}-bg-basic-transparent-semi-pressed
78
- );
30
+ // bg basic
31
+ --db-adaptive-bg-basic-level-1-default: var(
32
+ --db-#{$variant}-bg-basic-level-1-default
33
+ );
34
+ --db-adaptive-bg-basic-level-1-hovered: var(
35
+ --db-#{$variant}-bg-basic-level-1-hovered
36
+ );
37
+ --db-adaptive-bg-basic-level-1-pressed: var(
38
+ --db-#{$variant}-bg-basic-level-1-pressed
39
+ );
40
+ --db-adaptive-bg-basic-level-2-default: var(
41
+ --db-#{$variant}-bg-basic-level-2-default
42
+ );
43
+ --db-adaptive-bg-basic-level-2-hovered: var(
44
+ --db-#{$variant}-bg-basic-level-2-hovered
45
+ );
46
+ --db-adaptive-bg-basic-level-2-pressed: var(
47
+ --db-#{$variant}-bg-basic-level-2-pressed
48
+ );
49
+ --db-adaptive-bg-basic-level-3-default: var(
50
+ --db-#{$variant}-bg-basic-level-3-default
51
+ );
52
+ --db-adaptive-bg-basic-level-3-hovered: var(
53
+ --db-#{$variant}-bg-basic-level-3-hovered
54
+ );
55
+ --db-adaptive-bg-basic-level-3-pressed: var(
56
+ --db-#{$variant}-bg-basic-level-3-pressed
57
+ );
58
+ --db-adaptive-bg-basic-transparent-full-default: var(
59
+ --db-#{$variant}-bg-basic-transparent-full-default
60
+ );
61
+ --db-adaptive-bg-basic-transparent-semi-default: var(
62
+ --db-#{$variant}-bg-basic-transparent-semi-default
63
+ );
64
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
65
+ --db-#{$variant}-bg-basic-transparent-full-hovered
66
+ );
67
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
68
+ --db-#{$variant}-bg-basic-transparent-full-pressed
69
+ );
70
+ --db-adaptive-bg-basic-transparent-semi-hovered: var(
71
+ --db-#{$variant}-bg-basic-transparent-semi-hovered
72
+ );
73
+ --db-adaptive-bg-basic-transparent-semi-pressed: var(
74
+ --db-#{$variant}-bg-basic-transparent-semi-pressed
75
+ );
79
76
 
80
- // on-bg basic
81
- --db-adaptive-on-bg-basic-emphasis-100-default: var(
82
- --db-#{$variant}-on-bg-basic-emphasis-100-default
83
- );
84
- --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
85
- --db-#{$variant}-on-bg-basic-emphasis-100-hovered
86
- );
87
- --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
88
- --db-#{$variant}-on-bg-basic-emphasis-100-pressed
89
- );
90
- --db-adaptive-on-bg-basic-emphasis-90-default: var(
91
- --db-#{$variant}-on-bg-basic-emphasis-90-default
92
- );
93
- --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
94
- --db-#{$variant}-on-bg-basic-emphasis-90-hovered
95
- );
96
- --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
97
- --db-#{$variant}-on-bg-basic-emphasis-90-pressed
98
- );
99
- --db-adaptive-on-bg-basic-emphasis-80-default: var(
100
- --db-#{$variant}-on-bg-basic-emphasis-80-default
101
- );
102
- --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
103
- --db-#{$variant}-on-bg-basic-emphasis-80-hovered
104
- );
105
- --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
106
- --db-#{$variant}-on-bg-basic-emphasis-80-pressed
107
- );
108
- --db-adaptive-on-bg-basic-emphasis-70-default: var(
109
- --db-#{$variant}-on-bg-basic-emphasis-70-default
110
- );
111
- --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
112
- --db-#{$variant}-on-bg-basic-emphasis-70-hovered
113
- );
114
- --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
115
- --db-#{$variant}-on-bg-basic-emphasis-70-pressed
116
- );
117
- --db-adaptive-on-bg-basic-emphasis-60-default: var(
118
- --db-#{$variant}-on-bg-basic-emphasis-60-default
119
- );
120
- --db-adaptive-on-bg-basic-emphasis-50-default: var(
121
- --db-#{$variant}-on-bg-basic-emphasis-50-default
122
- );
77
+ // on-bg basic
78
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
79
+ --db-#{$variant}-on-bg-basic-emphasis-100-default
80
+ );
81
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
82
+ --db-#{$variant}-on-bg-basic-emphasis-100-hovered
83
+ );
84
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
85
+ --db-#{$variant}-on-bg-basic-emphasis-100-pressed
86
+ );
87
+ --db-adaptive-on-bg-basic-emphasis-90-default: var(
88
+ --db-#{$variant}-on-bg-basic-emphasis-90-default
89
+ );
90
+ --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
91
+ --db-#{$variant}-on-bg-basic-emphasis-90-hovered
92
+ );
93
+ --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
94
+ --db-#{$variant}-on-bg-basic-emphasis-90-pressed
95
+ );
96
+ --db-adaptive-on-bg-basic-emphasis-80-default: var(
97
+ --db-#{$variant}-on-bg-basic-emphasis-80-default
98
+ );
99
+ --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
100
+ --db-#{$variant}-on-bg-basic-emphasis-80-hovered
101
+ );
102
+ --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
103
+ --db-#{$variant}-on-bg-basic-emphasis-80-pressed
104
+ );
105
+ --db-adaptive-on-bg-basic-emphasis-70-default: var(
106
+ --db-#{$variant}-on-bg-basic-emphasis-70-default
107
+ );
108
+ --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
109
+ --db-#{$variant}-on-bg-basic-emphasis-70-hovered
110
+ );
111
+ --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
112
+ --db-#{$variant}-on-bg-basic-emphasis-70-pressed
113
+ );
114
+ --db-adaptive-on-bg-basic-emphasis-60-default: var(
115
+ --db-#{$variant}-on-bg-basic-emphasis-60-default
116
+ );
117
+ --db-adaptive-on-bg-basic-emphasis-50-default: var(
118
+ --db-#{$variant}-on-bg-basic-emphasis-50-default
119
+ );
123
120
 
124
- // inverted
125
- --db-adaptive-bg-inverted-contrast-max-default: var(
126
- --db-#{$variant}-bg-inverted-contrast-max-default
127
- );
128
- --db-adaptive-bg-inverted-contrast-max-hovered: var(
129
- --db-#{$variant}-bg-inverted-contrast-max-hovered
130
- );
131
- --db-adaptive-bg-inverted-contrast-max-pressed: var(
132
- --db-#{$variant}-bg-inverted-contrast-max-pressed
133
- );
134
- --db-adaptive-bg-inverted-contrast-high-default: var(
135
- --db-#{$variant}-bg-inverted-contrast-high-default
136
- );
137
- --db-adaptive-bg-inverted-contrast-high-hovered: var(
138
- --db-#{$variant}-bg-inverted-contrast-high-hovered
139
- );
140
- --db-adaptive-bg-inverted-contrast-high-pressed: var(
141
- --db-#{$variant}-bg-inverted-contrast-high-pressed
142
- );
143
- --db-adaptive-bg-inverted-contrast-low-default: var(
144
- --db-#{$variant}-bg-inverted-contrast-low-default
145
- );
146
- --db-adaptive-bg-inverted-contrast-low-hovered: var(
147
- --db-#{$variant}-bg-inverted-contrast-low-hovered
148
- );
149
- --db-adaptive-bg-inverted-contrast-low-pressed: var(
150
- --db-#{$variant}-bg-inverted-contrast-low-pressed
151
- );
121
+ // inverted
122
+ --db-adaptive-bg-inverted-contrast-max-default: var(
123
+ --db-#{$variant}-bg-inverted-contrast-max-default
124
+ );
125
+ --db-adaptive-bg-inverted-contrast-max-hovered: var(
126
+ --db-#{$variant}-bg-inverted-contrast-max-hovered
127
+ );
128
+ --db-adaptive-bg-inverted-contrast-max-pressed: var(
129
+ --db-#{$variant}-bg-inverted-contrast-max-pressed
130
+ );
131
+ --db-adaptive-bg-inverted-contrast-high-default: var(
132
+ --db-#{$variant}-bg-inverted-contrast-high-default
133
+ );
134
+ --db-adaptive-bg-inverted-contrast-high-hovered: var(
135
+ --db-#{$variant}-bg-inverted-contrast-high-hovered
136
+ );
137
+ --db-adaptive-bg-inverted-contrast-high-pressed: var(
138
+ --db-#{$variant}-bg-inverted-contrast-high-pressed
139
+ );
140
+ --db-adaptive-bg-inverted-contrast-low-default: var(
141
+ --db-#{$variant}-bg-inverted-contrast-low-default
142
+ );
143
+ --db-adaptive-bg-inverted-contrast-low-hovered: var(
144
+ --db-#{$variant}-bg-inverted-contrast-low-hovered
145
+ );
146
+ --db-adaptive-bg-inverted-contrast-low-pressed: var(
147
+ --db-#{$variant}-bg-inverted-contrast-low-pressed
148
+ );
152
149
 
153
- // on-bg-inverted
154
- --db-adaptive-on-bg-inverted-default: var(
155
- --db-#{$variant}-on-bg-inverted-default
156
- );
157
- --db-adaptive-on-bg-inverted-hovered: var(
158
- --db-#{$variant}-on-bg-inverted-hovered
159
- );
160
- --db-adaptive-on-bg-inverted-pressed: var(
161
- --db-#{$variant}-on-bg-inverted-pressed
162
- );
150
+ // on-bg-inverted
151
+ --db-adaptive-on-bg-inverted-default: var(
152
+ --db-#{$variant}-on-bg-inverted-default
153
+ );
154
+ --db-adaptive-on-bg-inverted-hovered: var(
155
+ --db-#{$variant}-on-bg-inverted-hovered
156
+ );
157
+ --db-adaptive-on-bg-inverted-pressed: var(
158
+ --db-#{$variant}-on-bg-inverted-pressed
159
+ );
163
160
 
164
- // origin
165
- --db-adaptive-origin-default: var(--db-#{$variant}-origin-default);
166
- --db-adaptive-origin-hovered: var(--db-#{$variant}-origin-hovered);
167
- --db-adaptive-origin-pressed: var(--db-#{$variant}-origin-pressed);
161
+ // origin
162
+ --db-adaptive-origin-default: var(--db-#{$variant}-origin-default);
163
+ --db-adaptive-origin-hovered: var(--db-#{$variant}-origin-hovered);
164
+ --db-adaptive-origin-pressed: var(--db-#{$variant}-origin-pressed);
168
165
 
169
- // on-origin
170
- --db-adaptive-on-origin-default: var(
171
- --db-#{$variant}-on-origin-default
172
- );
166
+ // on-origin
167
+ --db-adaptive-on-origin-default: var(
168
+ --db-#{$variant}-on-origin-default
169
+ );
173
170
 
174
- // vibrant
175
- --db-adaptive-bg-vibrant-default: var(
176
- --db-#{$variant}-bg-vibrant-default
177
- );
178
- --db-adaptive-bg-vibrant-hovered: var(
179
- --db-#{$variant}-bg-vibrant-hovered
180
- );
181
- --db-adaptive-bg-vibrant-pressed: var(
182
- --db-#{$variant}-bg-vibrant-pressed
183
- );
171
+ // vibrant
172
+ --db-adaptive-bg-vibrant-default: var(
173
+ --db-#{$variant}-bg-vibrant-default
174
+ );
175
+ --db-adaptive-bg-vibrant-hovered: var(
176
+ --db-#{$variant}-bg-vibrant-hovered
177
+ );
178
+ --db-adaptive-bg-vibrant-pressed: var(
179
+ --db-#{$variant}-bg-vibrant-pressed
180
+ );
184
181
 
185
- // on-vibrant
186
- --db-adaptive-on-bg-vibrant-default: var(
187
- --db-#{$variant}-on-bg-vibrant-default
188
- );
189
- --db-adaptive-on-bg-vibrant-hovered: var(
190
- --db-#{$variant}-on-bg-vibrant-hovered
191
- );
192
- --db-adaptive-on-bg-vibrant-pressed: var(
193
- --db-#{$variant}-on-bg-vibrant-pressed
194
- );
195
- }
182
+ // on-vibrant
183
+ --db-adaptive-on-bg-vibrant-default: var(
184
+ --db-#{$variant}-on-bg-vibrant-default
185
+ );
186
+ --db-adaptive-on-bg-vibrant-hovered: var(
187
+ --db-#{$variant}-on-bg-vibrant-hovered
188
+ );
189
+ --db-adaptive-on-bg-vibrant-pressed: var(
190
+ --db-#{$variant}-on-bg-vibrant-pressed
191
+ );
196
192
  }
197
193
 
198
194
  @each $bg in variables.$background-colors {