@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/components/card.css CHANGED
@@ -34,7 +34,7 @@
34
34
  border-radius: var(--_card-border-radius);
35
35
  box-shadow: var(--_card-shadow);
36
36
 
37
- transition: border-color var(--transition-duration-base) var(--ease-2);
37
+ transition: border-color var(--transition-duration-quick-2) var(--ease-2);
38
38
 
39
39
  @media (width >= 480px) {
40
40
  --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
package/src/styles/components/dialogs.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
6
6
  --_dialog-transition-duration: var(
7
7
  --dialog-transition-duration,
8
- var(--transition-duration-base)
8
+ var(--transition-duration-moderate-2)
9
9
  );
10
10
  --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
11
11
  --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
@@ -13,9 +13,8 @@
13
13
  --_dialog-radius: 0;
14
14
  display: block;
15
15
  z-index: var(--layer-important);
16
- animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1)
17
- forwards;
18
- transition: opacity var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1);
16
+ animation: close-dialog var(--_dialog-transition-duration) var(--easing-exit) forwards;
17
+ transition: opacity var(--_dialog-transition-duration) var(--easing-exit);
19
18
  position: fixed;
20
19
  inset: 0;
21
20
  border: var(--border-width-thin) solid var(--color-border-base);
@@ -40,7 +39,7 @@
40
39
  }
41
40
 
42
41
  &[open] {
43
- animation: open-dialog var(--_dialog-transition-duration) cubic-bezier(0, 0.6, 0.58, 1);
42
+ animation: open-dialog var(--_dialog-transition-duration) var(--easing-entry);
44
43
  }
45
44
 
46
45
  &:not([open]) {
package/src/styles/components/forms.css CHANGED
@@ -34,13 +34,9 @@
34
34
  }
35
35
  }
36
36
 
37
- :where(
38
- :is(fieldset:not([class]), .nc-fieldset):has(
39
- :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)
40
- )
41
- > :is(legend:not([class]), .nc-legend)
42
- + .nc-hint
43
- ) {
37
+ :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint))
38
+ > :is(legend:not([class]), .nc-legend)
39
+ + .nc-hint) {
44
40
  --nc-legend-spacing: var(--control-spacing-tiny, 0.25em);
45
41
  margin-block: var(--control-spacing-base, 0.75em);
46
42
  }
package/src/styles/components/gallery.css CHANGED
@@ -51,14 +51,18 @@
51
51
  background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
52
52
  background-image: linear-gradient(
53
53
  var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) 0,
54
- var(--gallery-scrollbar-bg, var(--color-surface-emphasis))
55
- calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25),
56
- var(--gallery-scrollbar-fg, var(--color-text-on-emphasis))
57
- calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25),
58
- var(--gallery-scrollbar-fg, var(--color-text-on-emphasis))
59
- calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75),
60
- var(--gallery-scrollbar-bg, var(--color-surface-emphasis))
61
- calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75)
54
+ var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(
55
+ var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25
56
+ ),
57
+ var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(
58
+ var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25
59
+ ),
60
+ var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(
61
+ var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75
62
+ ),
63
+ var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(
64
+ var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75
65
+ )
62
66
  );
63
67
  }
64
68
  }
package/src/styles/components/inputs/base.css CHANGED
@@ -1,5 +1,5 @@
1
- @layer components.inputs {
2
- :where(label:not([class]), .nc-input-label) {
1
+ @layer base.inputs {
2
+ :where(label, .nc-input-label) {
3
3
  font-family: var(--font-family-default);
4
4
  letter-spacing: var(--tracking-tight);
5
5
  font-weight: var(--font-weight-active);
@@ -10,41 +10,7 @@
10
10
  align-items: center;
11
11
  }
12
12
 
13
- :where(
14
- input[type="text"],
15
- input[type="email"],
16
- input[type="password"],
17
- input[type="number"],
18
- input[type="url"],
19
- input[type="search"],
20
- input[type="date"],
21
- input[type="month"],
22
- input[type="week"],
23
- input[type="text"],
24
- input[type="datetime"],
25
- input[type="datetime-local"],
26
- input[type="time"],
27
- input[type="tel"],
28
- input[type="color"],
29
- input[type="file"],
30
- input[type="checkbox"],
31
- input[type="radio"],
32
- textarea,
33
- select,
34
- .nc-input,
35
- .nc-select,
36
- .nc-textarea,
37
- .nc-input-checkbox,
38
- .nc-input-radio,
39
- .nc-input-label,
40
- .nc-input-color,
41
- .nc-input-field,
42
- .nc-input-error,
43
- .nc-checkbox-wrapper,
44
- .nc-input-switch,
45
- .nc-radio-field,
46
- .nc-checkbox-field
47
- ) {
13
+ :where(input, textarea, select, .nc-input, .nc-select, .nc-textarea, .nc-input-checkbox, .nc-input-radio, .nc-input-label, .nc-input-color, .nc-input-field, .nc-input-error, .nc-checkbox-wrapper, .nc-input-switch, .nc-radio-field, .nc-checkbox-field) {
48
14
  --_input-background: var(--input-background, var(--color-surface-subtle));
49
15
  --_input-background-active: var(--input-background-active, var(--color-surface-base));
50
16
  --_input-color: var(--input-color, var(--color-text-base));
@@ -66,27 +32,7 @@
66
32
  --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
67
33
  }
68
34
 
69
- :where(
70
- input[type="text"],
71
- input[type="email"],
72
- input[type="password"],
73
- input[type="number"],
74
- input[type="url"],
75
- input[type="search"],
76
- input[type="date"],
77
- input[type="month"],
78
- input[type="week"],
79
- input[type="text"],
80
- input[type="datetime"],
81
- input[type="datetime-local"],
82
- input[type="time"],
83
- input[type="tel"],
84
- input[type="color"],
85
- input[type="file"],
86
- textarea,
87
- select,
88
- .nc-input
89
- ) {
35
+ :where(input, textarea, select, .nc-input) {
90
36
  font: inherit;
91
37
  letter-spacing: inherit;
92
38
  word-spacing: inherit;
@@ -127,16 +73,28 @@
127
73
  &::placeholder {
128
74
  color: var(--color-text-subtle);
129
75
  }
76
+
77
+ &.-validate:user-valid {
78
+ outline: var(--_input-outline);
79
+ outline-offset: 0;
80
+ outline-color: var(--color-status-success-base);
81
+ }
82
+
83
+ &.-validate:user-invalid {
84
+ outline: var(--_input-outline);
85
+ outline-offset: 0;
86
+ outline-color: var(--color-status-danger-base);
87
+ }
130
88
  }
131
89
 
132
- :where(select:not([class]), .nc-select) {
90
+ :where(select, .nc-select) {
133
91
  padding-inline-end: 1.75em;
134
92
  background-image: var(--triangle-down-url);
135
93
  background-position: right 0.5em top 50%;
136
94
  background-size: 1em 0.75em;
137
95
  }
138
96
 
139
- :where(textarea:not([class]), .nc-textarea) {
97
+ :where(textarea, .nc-textarea) {
140
98
  min-block-size: calc(8lh + 2 * var(--_input-padding-block));
141
99
  max-block-size: 80svh;
142
100
  min-inline-size: var(--input-inline-size, 100%);
@@ -147,13 +105,7 @@
147
105
  field-sizing: content;
148
106
  }
149
107
 
150
- :where(
151
- input[type="checkbox"]:not([class]),
152
- input[type="radio"]:not([class]),
153
- .nc-input-checkbox,
154
- .nc-input-radio,
155
- .nc-input-switch
156
- ) {
108
+ :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
157
109
  inline-size: 1lh;
158
110
  block-size: 1lh;
159
111
  padding: 0;
@@ -164,11 +116,11 @@
164
116
  border: var(--_input-border);
165
117
  --current-background: var(--_input-background);
166
118
  background: var(--current-background);
167
- transition: var(--transition-duration-short) background var(--ease-2);
119
+ transition: var(--transition-duration-quick-1) background var(--ease-2);
168
120
  box-shadow: var(--_input-box-shadow);
169
121
  }
170
122
 
171
- :where(input[type="checkbox"]:not([class]), .nc-input-checkbox) {
123
+ :where(input[type="checkbox"], .nc-input-checkbox) {
172
124
  --_transition-duration: 0ms;
173
125
  overflow: hidden;
174
126
  border-radius: var(--_input-border-radius);
@@ -182,7 +134,7 @@
182
134
  block-size: 0.75lh;
183
135
  background-color: var(--color-brand-primary-contrast);
184
136
  transform: scale(0.8) translateY(2em);
185
- transition: transform var(--ease-out-2) var(--transition-duration-short);
137
+ transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
186
138
  font-family: var(--font-family-sans);
187
139
  --font-weight: var(--font-weight-active);
188
140
  line-height: 1;
@@ -211,7 +163,7 @@
211
163
  border-radius: var(--border-radius-round);
212
164
  transform: scale(0.8) translateY(2em);
213
165
  background-color: var(--color-brand-primary-contrast);
214
- transition: transform var(--ease-out-2) var(--transition-duration-short);
166
+ transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
215
167
  }
216
168
 
217
169
  &:checked {
@@ -226,7 +178,7 @@
226
178
  :where(input[type="color"], .nc-input-color) {
227
179
  aspect-ratio: 1;
228
180
  inline-size: auto;
229
- padding: var(--control-spacing-minimal, 0.125em);
181
+ padding: var(--control-spacing-nearest, 0.125em);
230
182
  }
231
183
 
232
184
  :where(input[type="date"], .nc-input-date) {
package/src/styles/components/inputs/segmented.css CHANGED
@@ -59,13 +59,11 @@
59
59
  }
60
60
 
61
61
  &:first-child {
62
- border-radius: var(--_segmented-control-border-radius)
63
- var(--_segmented-control-border-radius) 0 0;
62
+ border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
64
63
  }
65
64
 
66
65
  &:last-child {
67
- border-radius: 0 0 var(--_segmented-control-border-radius)
68
- var(--_segmented-control-border-radius);
66
+ border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
69
67
  }
70
68
 
71
69
  &:not(:last-child) {
@@ -100,13 +98,11 @@
100
98
 
101
99
  > label {
102
100
  &:first-child {
103
- border-radius: var(--_segmented-control-border-radius) 0 0
104
- var(--_segmented-control-border-radius);
101
+ border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
105
102
  }
106
103
 
107
104
  &:last-child {
108
- border-radius: 0 var(--_segmented-control-border-radius)
109
- var(--_segmented-control-border-radius) 0;
105
+ border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
110
106
  }
111
107
 
112
108
  &:not(:last-child) {
package/src/styles/components/inputs/switch.css CHANGED
@@ -25,7 +25,7 @@
25
25
  border-radius: var(--_input-border-radius);
26
26
  box-shadow: var(--shadow-near);
27
27
  transition: transform, background-color;
28
- transition-duration: var(--transition-duration-base);
28
+ transition-duration: var(--transition-duration-quick-2);
29
29
  transition-timing-function: var(--ease-2);
30
30
  }
31
31
 
@@ -34,9 +34,7 @@
34
34
  }
35
35
 
36
36
  &:checked:before {
37
- transform: translateX(
38
- calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin))
39
- );
37
+ transform: translateX(calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin)));
40
38
  }
41
39
  }
42
40
  }
package/src/styles/components/notifications.css CHANGED
@@ -26,7 +26,7 @@
26
26
  backdrop-filter: blur(3px);
27
27
  background-color: var(--_notification-center-background);
28
28
  transform: translate(100%, 0);
29
- transition: transform var(--transition-duration-base) ease-in-out;
29
+ transition: transform var(--transition-duration-moderate-2) var(--ease-in-out-2);
30
30
  }
31
31
 
32
32
  :where(.nc-notification-output, .nc-notification-center-container) {
@@ -70,7 +70,7 @@
70
70
  inline-size: 100%;
71
71
  border-radius: var(--border-radius-small);
72
72
  box-shadow: var(--shadow-far);
73
- animation: pop-in var(--transition-duration-base) cubic-bezier(0, 0.6, 0.58, 1);
73
+ animation: pop-in var(--transition-duration-moderate-2) var(--easing-entry);
74
74
  color: var(--color-text-base);
75
75
  pointer-events: all;
76
76
  }
@@ -108,8 +108,7 @@
108
108
  }
109
109
 
110
110
  :where(.nc-notification.-closing) {
111
- animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1)
112
- forwards;
111
+ animation: remove-notification var(--transition-duration-moderate-2) var(--easing-exit) forwards;
113
112
  }
114
113
 
115
114
  @keyframes pop-in {