@nordcode/ui 1.1.3 → 1.1.5

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 (8) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/out/bundle.css +14 -8
  3. package/out/bundle_configless.css +14 -8
  4. package/out/complete.css +14 -8
  5. package/out/complete_configless.css +14 -8
  6. package/package.json +1 -1
  7. package/src/styles/utils/base.css +13 -15
  8. package/src/styles/utils/theme.css +5 -0
package/CHANGELOG.md CHANGED
@@ -79,3 +79,19 @@ Lots of spring cleaning
79
79
  ### Fixes
80
80
 
81
81
  - Small design fixes and improvements
82
+
83
+ ## 1.1.4 (2025-01-04)
84
+
85
+ ### Fixes
86
+
87
+ - Fix summary border-radius by using a border-radius token
88
+
89
+ ## 1.1.5 (2025-01-09)
90
+
91
+ ### Improvements
92
+
93
+ - Add `themed` class to apply `var(--text)` and `var(--surface)` colors
94
+
95
+ ### Fixes
96
+
97
+ - Fix text colors for `<ins>` and `<del>`
package/out/bundle.css CHANGED
@@ -506,8 +506,9 @@
506
506
  :where(details) {
507
507
  --p-x-details: 2ch;
508
508
  --p-y-details: .8lh;
509
+ --b-r-details: var(--border-radius-medium);
509
510
  background-color: var(--color-surface-muted);
510
- border-radius: var(--border-radius-medium);
511
+ border-radius: var(--b-r-details);
511
512
  border: var(--border-width-thin) solid var(--color-border-base);
512
513
  padding: var(--p-y-details) var(--p-x-details);
513
514
  inline-size: 100%;
@@ -516,8 +517,8 @@
516
517
  :where(details) > summary {
517
518
  color: var(--color-text-base);
518
519
  background: var(--color-surface-subtle);
519
- border-radius: inherit;
520
520
  font-weight: var(--font-weight-heading);
521
+ border-radius: var(--b-r-details);
521
522
  padding: var(--p-y-details) var(--p-x-details);
522
523
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
523
524
  }
@@ -804,16 +805,16 @@
804
805
  }
805
806
 
806
807
  :where(del) {
807
- color: var(--color-status-danger-text);
808
- -webkit-text-decoration-color: var(--color-status-danger-text);
809
- text-decoration-color: var(--color-status-danger-text);
808
+ color: var(--color-status-danger-emphasis);
809
+ -webkit-text-decoration-color: var(--color-status-danger-emphasis);
810
+ text-decoration-color: var(--color-status-danger-emphasis);
810
811
  background: var(--color-status-danger-surface);
811
812
  }
812
813
 
813
814
  :where(ins) {
814
- color: var(--color-status-success-text);
815
- -webkit-text-decoration-color: var(--color-status-success-text);
816
- text-decoration-color: var(--color-status-success-text);
815
+ color: var(--color-status-success-emphasis);
816
+ -webkit-text-decoration-color: var(--color-status-success-emphasis);
817
+ text-decoration-color: var(--color-status-success-emphasis);
817
818
  background: var(--color-status-success-surface);
818
819
  }
819
820
 
@@ -1252,6 +1253,11 @@
1252
1253
  --surface-hover: var(--color-status-success-base);
1253
1254
  --border-hover: var(--color-status-success-base);
1254
1255
  }
1256
+
1257
+ .themed {
1258
+ background: var(--surface);
1259
+ color: var(--text);
1260
+ }
1255
1261
  }
1256
1262
 
1257
1263
  :where(.text-assistive, .sr-only) {
package/out/bundle_configless.css CHANGED
@@ -287,8 +287,9 @@
287
287
  :where(details) {
288
288
  --p-x-details: 2ch;
289
289
  --p-y-details: .8lh;
290
+ --b-r-details: var(--border-radius-medium);
290
291
  background-color: var(--color-surface-muted);
291
- border-radius: var(--border-radius-medium);
292
+ border-radius: var(--b-r-details);
292
293
  border: var(--border-width-thin) solid var(--color-border-base);
293
294
  padding: var(--p-y-details) var(--p-x-details);
294
295
  inline-size: 100%;
@@ -297,8 +298,8 @@
297
298
  :where(details) > summary {
298
299
  color: var(--color-text-base);
299
300
  background: var(--color-surface-subtle);
300
- border-radius: inherit;
301
301
  font-weight: var(--font-weight-heading);
302
+ border-radius: var(--b-r-details);
302
303
  padding: var(--p-y-details) var(--p-x-details);
303
304
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
304
305
  }
@@ -585,16 +586,16 @@
585
586
  }
586
587
 
587
588
  :where(del) {
588
- color: var(--color-status-danger-text);
589
- -webkit-text-decoration-color: var(--color-status-danger-text);
590
- text-decoration-color: var(--color-status-danger-text);
589
+ color: var(--color-status-danger-emphasis);
590
+ -webkit-text-decoration-color: var(--color-status-danger-emphasis);
591
+ text-decoration-color: var(--color-status-danger-emphasis);
591
592
  background: var(--color-status-danger-surface);
592
593
  }
593
594
 
594
595
  :where(ins) {
595
- color: var(--color-status-success-text);
596
- -webkit-text-decoration-color: var(--color-status-success-text);
597
- text-decoration-color: var(--color-status-success-text);
596
+ color: var(--color-status-success-emphasis);
597
+ -webkit-text-decoration-color: var(--color-status-success-emphasis);
598
+ text-decoration-color: var(--color-status-success-emphasis);
598
599
  background: var(--color-status-success-surface);
599
600
  }
600
601
 
@@ -1033,6 +1034,11 @@
1033
1034
  --surface-hover: var(--color-status-success-base);
1034
1035
  --border-hover: var(--color-status-success-base);
1035
1036
  }
1037
+
1038
+ .themed {
1039
+ background: var(--surface);
1040
+ color: var(--text);
1041
+ }
1036
1042
  }
1037
1043
 
1038
1044
  :where(.text-assistive, .sr-only) {
package/out/complete.css CHANGED
@@ -506,8 +506,9 @@
506
506
  :where(details) {
507
507
  --p-x-details: 2ch;
508
508
  --p-y-details: .8lh;
509
+ --b-r-details: var(--border-radius-medium);
509
510
  background-color: var(--color-surface-muted);
510
- border-radius: var(--border-radius-medium);
511
+ border-radius: var(--b-r-details);
511
512
  border: var(--border-width-thin) solid var(--color-border-base);
512
513
  padding: var(--p-y-details) var(--p-x-details);
513
514
  inline-size: 100%;
@@ -516,8 +517,8 @@
516
517
  :where(details) > summary {
517
518
  color: var(--color-text-base);
518
519
  background: var(--color-surface-subtle);
519
- border-radius: inherit;
520
520
  font-weight: var(--font-weight-heading);
521
+ border-radius: var(--b-r-details);
521
522
  padding: var(--p-y-details) var(--p-x-details);
522
523
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
523
524
  }
@@ -804,16 +805,16 @@
804
805
  }
805
806
 
806
807
  :where(del) {
807
- color: var(--color-status-danger-text);
808
- -webkit-text-decoration-color: var(--color-status-danger-text);
809
- text-decoration-color: var(--color-status-danger-text);
808
+ color: var(--color-status-danger-emphasis);
809
+ -webkit-text-decoration-color: var(--color-status-danger-emphasis);
810
+ text-decoration-color: var(--color-status-danger-emphasis);
810
811
  background: var(--color-status-danger-surface);
811
812
  }
812
813
 
813
814
  :where(ins) {
814
- color: var(--color-status-success-text);
815
- -webkit-text-decoration-color: var(--color-status-success-text);
816
- text-decoration-color: var(--color-status-success-text);
815
+ color: var(--color-status-success-emphasis);
816
+ -webkit-text-decoration-color: var(--color-status-success-emphasis);
817
+ text-decoration-color: var(--color-status-success-emphasis);
817
818
  background: var(--color-status-success-surface);
818
819
  }
819
820
 
@@ -1252,6 +1253,11 @@
1252
1253
  --surface-hover: var(--color-status-success-base);
1253
1254
  --border-hover: var(--color-status-success-base);
1254
1255
  }
1256
+
1257
+ .themed {
1258
+ background: var(--surface);
1259
+ color: var(--text);
1260
+ }
1255
1261
  }
1256
1262
 
1257
1263
  :where(.text-assistive, .sr-only) {
package/out/complete_configless.css CHANGED
@@ -287,8 +287,9 @@
287
287
  :where(details) {
288
288
  --p-x-details: 2ch;
289
289
  --p-y-details: .8lh;
290
+ --b-r-details: var(--border-radius-medium);
290
291
  background-color: var(--color-surface-muted);
291
- border-radius: var(--border-radius-medium);
292
+ border-radius: var(--b-r-details);
292
293
  border: var(--border-width-thin) solid var(--color-border-base);
293
294
  padding: var(--p-y-details) var(--p-x-details);
294
295
  inline-size: 100%;
@@ -297,8 +298,8 @@
297
298
  :where(details) > summary {
298
299
  color: var(--color-text-base);
299
300
  background: var(--color-surface-subtle);
300
- border-radius: inherit;
301
301
  font-weight: var(--font-weight-heading);
302
+ border-radius: var(--b-r-details);
302
303
  padding: var(--p-y-details) var(--p-x-details);
303
304
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
304
305
  }
@@ -585,16 +586,16 @@
585
586
  }
586
587
 
587
588
  :where(del) {
588
- color: var(--color-status-danger-text);
589
- -webkit-text-decoration-color: var(--color-status-danger-text);
590
- text-decoration-color: var(--color-status-danger-text);
589
+ color: var(--color-status-danger-emphasis);
590
+ -webkit-text-decoration-color: var(--color-status-danger-emphasis);
591
+ text-decoration-color: var(--color-status-danger-emphasis);
591
592
  background: var(--color-status-danger-surface);
592
593
  }
593
594
 
594
595
  :where(ins) {
595
- color: var(--color-status-success-text);
596
- -webkit-text-decoration-color: var(--color-status-success-text);
597
- text-decoration-color: var(--color-status-success-text);
596
+ color: var(--color-status-success-emphasis);
597
+ -webkit-text-decoration-color: var(--color-status-success-emphasis);
598
+ text-decoration-color: var(--color-status-success-emphasis);
598
599
  background: var(--color-status-success-surface);
599
600
  }
600
601
 
@@ -1033,6 +1034,11 @@
1033
1034
  --surface-hover: var(--color-status-success-base);
1034
1035
  --border-hover: var(--color-status-success-base);
1035
1036
  }
1037
+
1038
+ .themed {
1039
+ background: var(--surface);
1040
+ color: var(--text);
1041
+ }
1036
1042
  }
1037
1043
 
1038
1044
  :where(.text-assistive, .sr-only) {
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": "1.1.3",
15
+ "version": "1.1.5",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/utils/base.css CHANGED
@@ -84,24 +84,24 @@
84
84
  :where(details) {
85
85
  --p-x-details: 2ch;
86
86
  --p-y-details: 0.8lh;
87
+ --b-r-details: var(--border-radius-medium);
87
88
 
88
89
  background-color: var(--color-surface-muted);
89
- border-radius: var(--border-radius-medium);
90
+ border-radius: var(--b-r-details);
90
91
  border: var(--border-width-thin) solid var(--color-border-base);
91
92
  padding: var(--p-y-details) var(--p-x-details);
92
93
  inline-size: 100%;
93
94
 
94
- & > summary {
95
+ &>summary {
95
96
  color: var(--color-text-base);
96
97
  background: var(--color-surface-subtle);
97
- border-radius: inherit;
98
98
  font-weight: var(--font-weight-heading);
99
+ border-radius: var(--b-r-details);
99
100
  padding: var(--p-y-details) var(--p-x-details);
100
- margin: calc(-1 * var(--p-y-details))
101
- calc(-1 * var(--p-x-details) + var(--border-width-thin));
101
+ margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
102
102
  }
103
103
 
104
- &[open] > summary {
104
+ &[open]>summary {
105
105
  border-end-start-radius: 0;
106
106
  border-end-end-radius: 0;
107
107
  margin-block-end: var(--p-y-details);
@@ -138,11 +138,9 @@
138
138
  margin-block-start: var(--spacing-near);
139
139
  font-size: var(--font-size-base);
140
140
  max-inline-size: max-content;
141
- color: color-mix(
142
- in oklch,
143
- currentColor calc(var(--transparency-weaker) * 100%),
144
- transparent
145
- );
141
+ color: color-mix(in oklch,
142
+ currentColor calc(var(--transparency-weaker) * 100%),
143
+ transparent);
146
144
  }
147
145
 
148
146
  & cite:before {
@@ -387,14 +385,14 @@
387
385
  }
388
386
 
389
387
  :where(del) {
390
- color: var(--color-status-danger-text);
391
- text-decoration-color: var(--color-status-danger-text);
388
+ color: var(--color-status-danger-emphasis);
389
+ text-decoration-color: var(--color-status-danger-emphasis);
392
390
  background: var(--color-status-danger-surface);
393
391
  }
394
392
 
395
393
  :where(ins) {
396
- color: var(--color-status-success-text);
397
- text-decoration-color: var(--color-status-success-text);
394
+ color: var(--color-status-success-emphasis);
395
+ text-decoration-color: var(--color-status-success-emphasis);
398
396
  background: var(--color-status-success-surface);
399
397
  }
400
398
 
package/src/styles/utils/theme.css CHANGED
@@ -117,4 +117,9 @@
117
117
  --surface-hover: var(--color-status-success-base);
118
118
  --border-hover: var(--color-status-success-base);
119
119
  }
120
+
121
+ .themed {
122
+ background: var(--surface);
123
+ color: var(--text);
124
+ }
120
125
  }