@nordcode/ui 2.0.5 → 2.1.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 (36) hide show
  1. package/CHANGELOG.md +14 -1
  2. package/LICENSE.md +159 -159
  3. package/README.md +1 -14
  4. package/out/bundle.css +44 -26
  5. package/out/bundle_configless.css +32 -14
  6. package/out/complete.css +170 -144
  7. package/out/complete_configless.css +158 -132
  8. package/package.json +4 -3
  9. package/src/assets/icons/ArrowRightSolid.svelte +3 -1
  10. package/src/assets/icons/arrow-right-solid.svg +5 -1
  11. package/src/assets/icons/favicon.svg +13 -4
  12. package/src/assets/logos/nordcode-logo-icon.svg +6 -1
  13. package/src/assets/logos/nordcode-logo.svg +46 -13
  14. package/src/modules/dialogs/svelte/dialog.svelte +14 -15
  15. package/src/modules/dialogs/ts/dialogs.ts +80 -79
  16. package/src/modules/notifications/js/notifications.js +3 -6
  17. package/src/modules/notifications/svelte/NotificationTemplate.svelte +0 -2
  18. package/src/styles/components/buttons.css +70 -93
  19. package/src/styles/components/card.css +1 -1
  20. package/src/styles/components/dialogs.css +4 -5
  21. package/src/styles/components/forms.css +3 -7
  22. package/src/styles/components/gallery.css +12 -8
  23. package/src/styles/components/inputs/base.css +24 -72
  24. package/src/styles/components/inputs/segmented.css +4 -8
  25. package/src/styles/components/inputs/switch.css +2 -4
  26. package/src/styles/components/notifications.css +3 -4
  27. package/src/styles/config/config.css +352 -305
  28. package/src/styles/theme/colors.css +182 -124
  29. package/src/styles/theme/colors_processed.css +254 -80
  30. package/src/styles/utils/base.css +2 -13
  31. package/src/styles/utils/bundle.css +1 -0
  32. package/src/styles/utils/conditionalRadius.css +7 -0
  33. package/src/styles/utils/easings.css +360 -304
  34. package/src/styles/utils/layouts.css +12 -18
  35. package/src/styles/utils/reset.css +5 -38
  36. package/transform.js +2 -9
package/src/styles/theme/colors.css CHANGED
@@ -14,152 +14,210 @@
14
14
  :where(:root) {
15
15
  --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
16
16
 
17
- --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light),
18
- var(--color-brand-primary-emphasis-dark));
19
-
20
- --color-brand-primary-base: light-dark(var(--color-brand-primary-base-light),
21
- var(--color-brand-primary-base-dark));
22
-
23
- --color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light),
24
- var(--color-brand-primary-surface-dark));
25
-
26
- --color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light),
27
- var(--color-brand-primary-hover-light));
28
-
29
- --color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light),
30
- var(--color-brand-primary-contrast-lightness-dark));
31
-
32
- --color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light),
33
- var(--color-brand-primary-contrast-dark));
34
-
35
- --color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light),
36
- var(--color-brand-secondary-emphasis-dark));
37
-
38
- --color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light),
39
- var(--color-brand-secondary-base-dark));
40
-
41
- --color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light),
42
- var(--color-brand-secondary-surface-dark));
43
-
44
- --color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light),
45
- var(--color-brand-secondary-hover-dark));
46
-
47
- --color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light),
48
- var(--color-brand-secondary-contrast-dark));
17
+ --color-brand-primary-emphasis: light-dark(
18
+ var(--color-brand-primary-emphasis-light),
19
+ var(--color-brand-primary-emphasis-dark)
20
+ );
21
+
22
+ --color-brand-primary-base: light-dark(
23
+ var(--color-brand-primary-base-light),
24
+ var(--color-brand-primary-base-dark)
25
+ );
26
+
27
+ --color-brand-primary-surface: light-dark(
28
+ var(--color-brand-primary-surface-light),
29
+ var(--color-brand-primary-surface-dark)
30
+ );
31
+
32
+ --color-brand-primary-hover: light-dark(
33
+ var(--color-brand-primary-hover-light),
34
+ var(--color-brand-primary-hover-light)
35
+ );
36
+
37
+ --color-brand-primary-contrast-lightness: light-dark(
38
+ var(--color-brand-primary-contrast-lightness-light),
39
+ var(--color-brand-primary-contrast-lightness-dark)
40
+ );
41
+
42
+ --color-brand-primary-contrast: light-dark(
43
+ var(--color-brand-primary-contrast-light),
44
+ var(--color-brand-primary-contrast-dark)
45
+ );
46
+
47
+ --color-brand-secondary-emphasis: light-dark(
48
+ var(--color-brand-secondary-emphasis-light),
49
+ var(--color-brand-secondary-emphasis-dark)
50
+ );
51
+
52
+ --color-brand-secondary-base: light-dark(
53
+ var(--color-brand-secondary-base-light),
54
+ var(--color-brand-secondary-base-dark)
55
+ );
56
+
57
+ --color-brand-secondary-surface: light-dark(
58
+ var(--color-brand-secondary-surface-light),
59
+ var(--color-brand-secondary-surface-dark)
60
+ );
61
+
62
+ --color-brand-secondary-hover: light-dark(
63
+ var(--color-brand-secondary-hover-light),
64
+ var(--color-brand-secondary-hover-dark)
65
+ );
66
+
67
+ --color-brand-secondary-contrast: light-dark(
68
+ var(--color-brand-secondary-contrast-light),
69
+ var(--color-brand-secondary-contrast-dark)
70
+ );
49
71
 
50
72
  --color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
51
73
 
52
74
  --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
53
75
 
54
- --color-text-subtle: light-dark(var(--color-text-subtle-light),
55
- var(--color-text-subtle-dark));
76
+ --color-text-subtle: light-dark(var(--color-text-subtle-light), var(--color-text-subtle-dark));
56
77
 
57
- --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light),
58
- var(--color-text-on-emphasis-dark));
78
+ --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light), var(--color-text-on-emphasis-dark));
59
79
 
60
80
  --color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
61
81
 
62
- --color-surface-base: light-dark(var(--color-surface-base-light),
63
- var(--color-surface-base-dark));
64
-
65
- --color-surface-muted: light-dark(var(--color-surface-muted-light),
66
- var(--color-surface-muted-dark));
67
-
68
- --color-surface-subtle: light-dark(var(--color-surface-subtle-light),
69
- var(--color-surface-subtle-dark));
70
-
71
- --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light),
72
- var(--color-surface-emphasis-dark));
73
-
74
- --color-border-base: light-dark(var(--color-border-base-light),
75
- var(--color-border-base-dark));
76
-
77
- --color-border-muted: light-dark(var(--color-border-muted-light),
78
- var(--color-border-muted-dark));
79
-
80
- --color-border-subtle: light-dark(var(--color-border-subtle-light),
81
- var(--color-border-subtle-dark));
82
-
83
- --color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light),
84
- var(--color-border-on-emphasis-dark));
85
-
86
- --color-border-hover: light-dark(var(--color-border-hover-light),
87
- var(--color-border-hover-dark));
88
-
89
- --color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light),
90
- var(--color-status-info-emphasis-dark));
91
-
92
- --color-status-info-base: light-dark(var(--color-status-info-base-light),
93
- var(--color-status-info-base-dark));
94
-
95
- --color-status-info-surface: light-dark(var(--color-status-info-surface-light),
96
- var(--color-status-info-surface-dark));
97
-
98
- --color-status-info-hover: light-dark(var(--color-status-info-hover-light),
99
- var(--color-status-info-hover-light));
100
-
101
- --color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light),
102
- var(--color-status-info-contrast-lightness-dark));
103
-
104
- --color-status-info-contrast: light-dark(var(--color-status-info-contrast-light),
105
- var(--color-status-info-contrast-dark));
106
-
107
- --color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light),
108
- var(--color-status-success-emphasis-dark));
109
-
110
- --color-status-success-base: light-dark(var(--color-status-success-base-light),
111
- var(--color-status-success-base-dark));
112
-
113
- --color-status-success-surface: light-dark(var(--color-status-success-surface-light),
114
- var(--color-status-success-surface-dark));
115
-
116
- --color-status-success-hover: light-dark(var(--color-status-success-hover-light),
117
- var(--color-status-success-hover-light));
118
-
119
- --color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light),
120
- var(--color-status-success-contrast-lightness-dark));
121
-
122
- --color-status-success-contrast: light-dark(var(--color-status-success-contrast-light),
123
- var(--color-status-success-contrast-dark));
82
+ --color-surface-base: light-dark(var(--color-surface-base-light), var(--color-surface-base-dark));
124
83
 
125
- --color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light),
126
- var(--color-status-warning-emphasis-dark));
84
+ --color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
127
85
 
128
- --color-status-warning-base: light-dark(var(--color-status-warning-base-light),
129
- var(--color-status-warning-base-dark));
86
+ --color-surface-subtle: light-dark(var(--color-surface-subtle-light), var(--color-surface-subtle-dark));
130
87
 
131
- --color-status-warning-surface: light-dark(var(--color-status-warning-surface-light),
132
- var(--color-status-warning-surface-dark));
88
+ --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light), var(--color-surface-emphasis-dark));
133
89
 
134
- --color-status-warning-hover: light-dark(var(--color-status-warning-hover-light),
135
- var(--color-status-warning-hover-light));
90
+ --color-border-base: light-dark(var(--color-border-base-light), var(--color-border-base-dark));
136
91
 
137
- --color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light),
138
- var(--color-status-warning-contrast-lightness-dark));
92
+ --color-border-muted: light-dark(var(--color-border-muted-light), var(--color-border-muted-dark));
139
93
 
140
- --color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light),
141
- var(--color-status-warning-contrast-dark));
94
+ --color-border-subtle: light-dark(var(--color-border-subtle-light), var(--color-border-subtle-dark));
142
95
 
143
- --color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light),
144
- var(--color-status-danger-emphasis-dark));
96
+ --color-border-on-emphasis: light-dark(
97
+ var(--color-border-on-emphasis-light),
98
+ var(--color-border-on-emphasis-dark)
99
+ );
145
100
 
146
- --color-status-danger-base: light-dark(var(--color-status-danger-base-light),
147
- var(--color-status-danger-base-dark));
101
+ --color-border-hover: light-dark(var(--color-border-hover-light), var(--color-border-hover-dark));
148
102
 
149
- --color-status-danger-surface: light-dark(var(--color-status-danger-surface-light),
150
- var(--color-status-danger-surface-dark));
103
+ --color-status-info-emphasis: light-dark(
104
+ var(--color-status-info-emphasis-light),
105
+ var(--color-status-info-emphasis-dark)
106
+ );
151
107
 
152
- --color-status-danger-hover: light-dark(var(--color-status-danger-hover-light),
153
- var(--color-status-danger-hover-light));
108
+ --color-status-info-base: light-dark(var(--color-status-info-base-light), var(--color-status-info-base-dark));
154
109
 
155
- --color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light),
156
- var(--color-status-danger-contrast-lightness-dark));
110
+ --color-status-info-surface: light-dark(
111
+ var(--color-status-info-surface-light),
112
+ var(--color-status-info-surface-dark)
113
+ );
157
114
 
158
- --color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light),
159
- var(--color-status-danger-contrast-dark));
115
+ --color-status-info-hover: light-dark(
116
+ var(--color-status-info-hover-light),
117
+ var(--color-status-info-hover-light)
118
+ );
119
+
120
+ --color-status-info-contrast-lightness: light-dark(
121
+ var(--color-status-info-contrast-lightness-light),
122
+ var(--color-status-info-contrast-lightness-dark)
123
+ );
124
+
125
+ --color-status-info-contrast: light-dark(
126
+ var(--color-status-info-contrast-light),
127
+ var(--color-status-info-contrast-dark)
128
+ );
129
+
130
+ --color-status-success-emphasis: light-dark(
131
+ var(--color-status-success-emphasis-light),
132
+ var(--color-status-success-emphasis-dark)
133
+ );
134
+
135
+ --color-status-success-base: light-dark(
136
+ var(--color-status-success-base-light),
137
+ var(--color-status-success-base-dark)
138
+ );
139
+
140
+ --color-status-success-surface: light-dark(
141
+ var(--color-status-success-surface-light),
142
+ var(--color-status-success-surface-dark)
143
+ );
144
+
145
+ --color-status-success-hover: light-dark(
146
+ var(--color-status-success-hover-light),
147
+ var(--color-status-success-hover-light)
148
+ );
149
+
150
+ --color-status-success-contrast-lightness: light-dark(
151
+ var(--color-status-success-contrast-lightness-light),
152
+ var(--color-status-success-contrast-lightness-dark)
153
+ );
154
+
155
+ --color-status-success-contrast: light-dark(
156
+ var(--color-status-success-contrast-light),
157
+ var(--color-status-success-contrast-dark)
158
+ );
159
+
160
+ --color-status-warning-emphasis: light-dark(
161
+ var(--color-status-warning-emphasis-light),
162
+ var(--color-status-warning-emphasis-dark)
163
+ );
164
+
165
+ --color-status-warning-base: light-dark(
166
+ var(--color-status-warning-base-light),
167
+ var(--color-status-warning-base-dark)
168
+ );
169
+
170
+ --color-status-warning-surface: light-dark(
171
+ var(--color-status-warning-surface-light),
172
+ var(--color-status-warning-surface-dark)
173
+ );
174
+
175
+ --color-status-warning-hover: light-dark(
176
+ var(--color-status-warning-hover-light),
177
+ var(--color-status-warning-hover-light)
178
+ );
179
+
180
+ --color-status-warning-contrast-lightness: light-dark(
181
+ var(--color-status-warning-contrast-lightness-light),
182
+ var(--color-status-warning-contrast-lightness-dark)
183
+ );
184
+
185
+ --color-status-warning-contrast: light-dark(
186
+ var(--color-status-warning-contrast-light),
187
+ var(--color-status-warning-contrast-dark)
188
+ );
189
+
190
+ --color-status-danger-emphasis: light-dark(
191
+ var(--color-status-danger-emphasis-light),
192
+ var(--color-status-danger-emphasis-dark)
193
+ );
194
+
195
+ --color-status-danger-base: light-dark(
196
+ var(--color-status-danger-base-light),
197
+ var(--color-status-danger-base-dark)
198
+ );
199
+
200
+ --color-status-danger-surface: light-dark(
201
+ var(--color-status-danger-surface-light),
202
+ var(--color-status-danger-surface-dark)
203
+ );
204
+
205
+ --color-status-danger-hover: light-dark(
206
+ var(--color-status-danger-hover-light),
207
+ var(--color-status-danger-hover-light)
208
+ );
209
+
210
+ --color-status-danger-contrast-lightness: light-dark(
211
+ var(--color-status-danger-contrast-lightness-light),
212
+ var(--color-status-danger-contrast-lightness-dark)
213
+ );
214
+
215
+ --color-status-danger-contrast: light-dark(
216
+ var(--color-status-danger-contrast-light),
217
+ var(--color-status-danger-contrast-dark)
218
+ );
160
219
  --shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
161
- --triangle-down-url: light-dark(var(--triangle-down-url-light),
162
- var(--triangle-down-url-dark));
220
+ --triangle-down-url: light-dark(var(--triangle-down-url-light), var(--triangle-down-url-dark));
163
221
  --triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
164
222
  }
165
223
  }