@nordcode/ui 2.0.0 → 2.0.2

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 (9) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/out/bundle.css +10 -5
  3. package/out/bundle_configless.css +10 -5
  4. package/out/complete.css +10 -5
  5. package/out/complete_configless.css +10 -5
  6. package/package.json +1 -1
  7. package/src/styles/utils/base.css +1 -1
  8. package/src/styles/utils/reset.css +7 -2
  9. package/src/styles/utils/theme.css +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ ## 2.0.2 (2025-05-10)
2
+
3
+ ### improvements
4
+
5
+ - increase focus-visible visibility
6
+ - small utility tweaks
7
+
8
+ ## 2.0.1 (2025-05-04)
9
+
10
+ ### improvements
11
+
12
+ - change theme default surface to --color-surface-base instead of transparent to fix contrast issue over colored backgrounds
13
+
1
14
  ## 2.0.0 (2025-05-02)
2
15
 
3
16
  ### BREAKING CHANGES
package/out/bundle.css CHANGED
@@ -328,8 +328,9 @@
328
328
  }
329
329
 
330
330
  :where(:not(:active):focus-visible) {
331
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
332
- outline-offset: var(--control-spacing-near, .5em);
331
+ outline: 2px solid var(--color-brand-primary-base);
332
+ box-shadow: 0 0 0 2px var(--color-surface-base);
333
+ outline-offset: 2px;
333
334
  }
334
335
 
335
336
  :where(:focus:not(:focus-visible)) {
@@ -377,6 +378,10 @@
377
378
  display: block;
378
379
  }
379
380
 
381
+ :where(svg) {
382
+ flex: none;
383
+ }
384
+
380
385
  :where(img, svg, video) {
381
386
  block-size: auto;
382
387
  max-inline-size: 100%;
@@ -628,7 +633,7 @@
628
633
  cursor: pointer;
629
634
  letter-spacing: var(--tracking-tight);
630
635
  text-decoration: underline;
631
- text-decoration-thickness: from-font;
636
+ text-decoration-thickness: .1em;
632
637
  }
633
638
 
634
639
  :where(a, .nc-link):visited {
@@ -1211,7 +1216,7 @@
1211
1216
  * {
1212
1217
  --text: var(--color-text-muted);
1213
1218
  --color: var(--color-text-muted);
1214
- --surface: transparent;
1219
+ --surface: var(--color-surface-base);
1215
1220
  --border: var(--color-border-muted);
1216
1221
  --text-hover: var(--color-text-on-emphasis);
1217
1222
  --color-hover: var(--color-text-on-emphasis);
@@ -1244,7 +1249,7 @@
1244
1249
  .-neutral {
1245
1250
  --text: var(--color-text-muted);
1246
1251
  --color: var(--color-text-muted);
1247
- --surface: transparent;
1252
+ --surface: var(--color-surface-base);
1248
1253
  --border: var(--color-border-muted);
1249
1254
  --text-hover: var(--color-text-on-emphasis);
1250
1255
  --color-hover: var(--color-text-on-emphasis);
package/out/bundle_configless.css CHANGED
@@ -110,8 +110,9 @@
110
110
  }
111
111
 
112
112
  :where(:not(:active):focus-visible) {
113
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
114
- outline-offset: var(--control-spacing-near, .5em);
113
+ outline: 2px solid var(--color-brand-primary-base);
114
+ box-shadow: 0 0 0 2px var(--color-surface-base);
115
+ outline-offset: 2px;
115
116
  }
116
117
 
117
118
  :where(:focus:not(:focus-visible)) {
@@ -159,6 +160,10 @@
159
160
  display: block;
160
161
  }
161
162
 
163
+ :where(svg) {
164
+ flex: none;
165
+ }
166
+
162
167
  :where(img, svg, video) {
163
168
  block-size: auto;
164
169
  max-inline-size: 100%;
@@ -410,7 +415,7 @@
410
415
  cursor: pointer;
411
416
  letter-spacing: var(--tracking-tight);
412
417
  text-decoration: underline;
413
- text-decoration-thickness: from-font;
418
+ text-decoration-thickness: .1em;
414
419
  }
415
420
 
416
421
  :where(a, .nc-link):visited {
@@ -993,7 +998,7 @@
993
998
  * {
994
999
  --text: var(--color-text-muted);
995
1000
  --color: var(--color-text-muted);
996
- --surface: transparent;
1001
+ --surface: var(--color-surface-base);
997
1002
  --border: var(--color-border-muted);
998
1003
  --text-hover: var(--color-text-on-emphasis);
999
1004
  --color-hover: var(--color-text-on-emphasis);
@@ -1026,7 +1031,7 @@
1026
1031
  .-neutral {
1027
1032
  --text: var(--color-text-muted);
1028
1033
  --color: var(--color-text-muted);
1029
- --surface: transparent;
1034
+ --surface: var(--color-surface-base);
1030
1035
  --border: var(--color-border-muted);
1031
1036
  --text-hover: var(--color-text-on-emphasis);
1032
1037
  --color-hover: var(--color-text-on-emphasis);
package/out/complete.css CHANGED
@@ -328,8 +328,9 @@
328
328
  }
329
329
 
330
330
  :where(:not(:active):focus-visible) {
331
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
332
- outline-offset: var(--control-spacing-near, .5em);
331
+ outline: 2px solid var(--color-brand-primary-base);
332
+ box-shadow: 0 0 0 2px var(--color-surface-base);
333
+ outline-offset: 2px;
333
334
  }
334
335
 
335
336
  :where(:focus:not(:focus-visible)) {
@@ -377,6 +378,10 @@
377
378
  display: block;
378
379
  }
379
380
 
381
+ :where(svg) {
382
+ flex: none;
383
+ }
384
+
380
385
  :where(img, svg, video) {
381
386
  block-size: auto;
382
387
  max-inline-size: 100%;
@@ -628,7 +633,7 @@
628
633
  cursor: pointer;
629
634
  letter-spacing: var(--tracking-tight);
630
635
  text-decoration: underline;
631
- text-decoration-thickness: from-font;
636
+ text-decoration-thickness: .1em;
632
637
  }
633
638
 
634
639
  :where(a, .nc-link):visited {
@@ -1211,7 +1216,7 @@
1211
1216
  * {
1212
1217
  --text: var(--color-text-muted);
1213
1218
  --color: var(--color-text-muted);
1214
- --surface: transparent;
1219
+ --surface: var(--color-surface-base);
1215
1220
  --border: var(--color-border-muted);
1216
1221
  --text-hover: var(--color-text-on-emphasis);
1217
1222
  --color-hover: var(--color-text-on-emphasis);
@@ -1244,7 +1249,7 @@
1244
1249
  .-neutral {
1245
1250
  --text: var(--color-text-muted);
1246
1251
  --color: var(--color-text-muted);
1247
- --surface: transparent;
1252
+ --surface: var(--color-surface-base);
1248
1253
  --border: var(--color-border-muted);
1249
1254
  --text-hover: var(--color-text-on-emphasis);
1250
1255
  --color-hover: var(--color-text-on-emphasis);
package/out/complete_configless.css CHANGED
@@ -110,8 +110,9 @@
110
110
  }
111
111
 
112
112
  :where(:not(:active):focus-visible) {
113
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
114
- outline-offset: var(--control-spacing-near, .5em);
113
+ outline: 2px solid var(--color-brand-primary-base);
114
+ box-shadow: 0 0 0 2px var(--color-surface-base);
115
+ outline-offset: 2px;
115
116
  }
116
117
 
117
118
  :where(:focus:not(:focus-visible)) {
@@ -159,6 +160,10 @@
159
160
  display: block;
160
161
  }
161
162
 
163
+ :where(svg) {
164
+ flex: none;
165
+ }
166
+
162
167
  :where(img, svg, video) {
163
168
  block-size: auto;
164
169
  max-inline-size: 100%;
@@ -410,7 +415,7 @@
410
415
  cursor: pointer;
411
416
  letter-spacing: var(--tracking-tight);
412
417
  text-decoration: underline;
413
- text-decoration-thickness: from-font;
418
+ text-decoration-thickness: .1em;
414
419
  }
415
420
 
416
421
  :where(a, .nc-link):visited {
@@ -993,7 +998,7 @@
993
998
  * {
994
999
  --text: var(--color-text-muted);
995
1000
  --color: var(--color-text-muted);
996
- --surface: transparent;
1001
+ --surface: var(--color-surface-base);
997
1002
  --border: var(--color-border-muted);
998
1003
  --text-hover: var(--color-text-on-emphasis);
999
1004
  --color-hover: var(--color-text-on-emphasis);
@@ -1026,7 +1031,7 @@
1026
1031
  .-neutral {
1027
1032
  --text: var(--color-text-muted);
1028
1033
  --color: var(--color-text-muted);
1029
- --surface: transparent;
1034
+ --surface: var(--color-surface-base);
1030
1035
  --border: var(--color-border-muted);
1031
1036
  --text-hover: var(--color-text-on-emphasis);
1032
1037
  --color-hover: var(--color-text-on-emphasis);
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "type": "git",
13
13
  "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
14
14
  },
15
- "version": "2.0.0",
15
+ "version": "2.0.2",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/utils/base.css CHANGED
@@ -210,7 +210,7 @@
210
210
  font-family: var(--font-family-link);
211
211
  text-decoration: underline;
212
212
  text-underline-offset: var(--control-spacing-nearest, 0.375em);
213
- text-decoration-thickness: from-font;
213
+ text-decoration-thickness: 0.1em;
214
214
  font-weight: var(--font-weight-default);
215
215
  text-decoration-color: currentColor;
216
216
  cursor: pointer;
package/src/styles/utils/reset.css CHANGED
@@ -27,8 +27,9 @@
27
27
  }
28
28
 
29
29
  :where(:not(:active):focus-visible) {
30
- outline: var(--border-width-medium) solid var(--color-brand-primary-base);
31
- outline-offset: var(--control-spacing-near, 0.5em);
30
+ outline: 2px solid var(--color-brand-primary-base);
31
+ box-shadow: 0 0 0 2px var(--color-surface-base);
32
+ outline-offset: 2px;
32
33
  }
33
34
 
34
35
  :where(:focus:not(:focus-visible)) {
@@ -81,6 +82,10 @@
81
82
  display: block;
82
83
  }
83
84
 
85
+ :where(svg) {
86
+ flex: none;
87
+ }
88
+
84
89
  :where(img, svg, video) {
85
90
  max-inline-size: 100%;
86
91
  block-size: auto;
package/src/styles/utils/theme.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * {
3
3
  --text: var(--color-text-muted);
4
4
  --color: var(--color-text-muted);
5
- --surface: transparent;
5
+ --surface: var(--color-surface-base);
6
6
  --border: var(--color-border-muted);
7
7
 
8
8
  --text-hover: var(--color-text-on-emphasis);
@@ -38,7 +38,7 @@
38
38
  .-neutral {
39
39
  --text: var(--color-text-muted);
40
40
  --color: var(--color-text-muted);
41
- --surface: transparent;
41
+ --surface: var(--color-surface-base);
42
42
  --border: var(--color-border-muted);
43
43
 
44
44
  --text-hover: var(--color-text-on-emphasis);