@nordcode/ui 1.1.4 → 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 +10 -0
  2. package/out/bundle.css +11 -6
  3. package/out/bundle_configless.css +11 -6
  4. package/out/complete.css +11 -6
  5. package/out/complete_configless.css +11 -6
  6. package/package.json +1 -1
  7. package/src/styles/utils/base.css +10 -13
  8. package/src/styles/utils/theme.css +5 -0
package/CHANGELOG.md CHANGED
@@ -85,3 +85,13 @@ Lots of spring cleaning
85
85
  ### Fixes
86
86
 
87
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
@@ -805,16 +805,16 @@
805
805
  }
806
806
 
807
807
  :where(del) {
808
- color: var(--color-status-danger-text);
809
- -webkit-text-decoration-color: var(--color-status-danger-text);
810
- 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);
811
811
  background: var(--color-status-danger-surface);
812
812
  }
813
813
 
814
814
  :where(ins) {
815
- color: var(--color-status-success-text);
816
- -webkit-text-decoration-color: var(--color-status-success-text);
817
- 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);
818
818
  background: var(--color-status-success-surface);
819
819
  }
820
820
 
@@ -1253,6 +1253,11 @@
1253
1253
  --surface-hover: var(--color-status-success-base);
1254
1254
  --border-hover: var(--color-status-success-base);
1255
1255
  }
1256
+
1257
+ .themed {
1258
+ background: var(--surface);
1259
+ color: var(--text);
1260
+ }
1256
1261
  }
1257
1262
 
1258
1263
  :where(.text-assistive, .sr-only) {
package/out/bundle_configless.css CHANGED
@@ -586,16 +586,16 @@
586
586
  }
587
587
 
588
588
  :where(del) {
589
- color: var(--color-status-danger-text);
590
- -webkit-text-decoration-color: var(--color-status-danger-text);
591
- 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);
592
592
  background: var(--color-status-danger-surface);
593
593
  }
594
594
 
595
595
  :where(ins) {
596
- color: var(--color-status-success-text);
597
- -webkit-text-decoration-color: var(--color-status-success-text);
598
- 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);
599
599
  background: var(--color-status-success-surface);
600
600
  }
601
601
 
@@ -1034,6 +1034,11 @@
1034
1034
  --surface-hover: var(--color-status-success-base);
1035
1035
  --border-hover: var(--color-status-success-base);
1036
1036
  }
1037
+
1038
+ .themed {
1039
+ background: var(--surface);
1040
+ color: var(--text);
1041
+ }
1037
1042
  }
1038
1043
 
1039
1044
  :where(.text-assistive, .sr-only) {
package/out/complete.css CHANGED
@@ -805,16 +805,16 @@
805
805
  }
806
806
 
807
807
  :where(del) {
808
- color: var(--color-status-danger-text);
809
- -webkit-text-decoration-color: var(--color-status-danger-text);
810
- 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);
811
811
  background: var(--color-status-danger-surface);
812
812
  }
813
813
 
814
814
  :where(ins) {
815
- color: var(--color-status-success-text);
816
- -webkit-text-decoration-color: var(--color-status-success-text);
817
- 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);
818
818
  background: var(--color-status-success-surface);
819
819
  }
820
820
 
@@ -1253,6 +1253,11 @@
1253
1253
  --surface-hover: var(--color-status-success-base);
1254
1254
  --border-hover: var(--color-status-success-base);
1255
1255
  }
1256
+
1257
+ .themed {
1258
+ background: var(--surface);
1259
+ color: var(--text);
1260
+ }
1256
1261
  }
1257
1262
 
1258
1263
  :where(.text-assistive, .sr-only) {
package/out/complete_configless.css CHANGED
@@ -586,16 +586,16 @@
586
586
  }
587
587
 
588
588
  :where(del) {
589
- color: var(--color-status-danger-text);
590
- -webkit-text-decoration-color: var(--color-status-danger-text);
591
- 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);
592
592
  background: var(--color-status-danger-surface);
593
593
  }
594
594
 
595
595
  :where(ins) {
596
- color: var(--color-status-success-text);
597
- -webkit-text-decoration-color: var(--color-status-success-text);
598
- 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);
599
599
  background: var(--color-status-success-surface);
600
600
  }
601
601
 
@@ -1034,6 +1034,11 @@
1034
1034
  --surface-hover: var(--color-status-success-base);
1035
1035
  --border-hover: var(--color-status-success-base);
1036
1036
  }
1037
+
1038
+ .themed {
1039
+ background: var(--surface);
1040
+ color: var(--text);
1041
+ }
1037
1042
  }
1038
1043
 
1039
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.4",
15
+ "version": "1.1.5",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/utils/base.css CHANGED
@@ -92,17 +92,16 @@
92
92
  padding: var(--p-y-details) var(--p-x-details);
93
93
  inline-size: 100%;
94
94
 
95
- & > summary {
95
+ &>summary {
96
96
  color: var(--color-text-base);
97
97
  background: var(--color-surface-subtle);
98
98
  font-weight: var(--font-weight-heading);
99
99
  border-radius: var(--b-r-details);
100
100
  padding: var(--p-y-details) var(--p-x-details);
101
- margin: calc(-1 * var(--p-y-details))
102
- 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));
103
102
  }
104
103
 
105
- &[open] > summary {
104
+ &[open]>summary {
106
105
  border-end-start-radius: 0;
107
106
  border-end-end-radius: 0;
108
107
  margin-block-end: var(--p-y-details);
@@ -139,11 +138,9 @@
139
138
  margin-block-start: var(--spacing-near);
140
139
  font-size: var(--font-size-base);
141
140
  max-inline-size: max-content;
142
- color: color-mix(
143
- in oklch,
144
- currentColor calc(var(--transparency-weaker) * 100%),
145
- transparent
146
- );
141
+ color: color-mix(in oklch,
142
+ currentColor calc(var(--transparency-weaker) * 100%),
143
+ transparent);
147
144
  }
148
145
 
149
146
  & cite:before {
@@ -388,14 +385,14 @@
388
385
  }
389
386
 
390
387
  :where(del) {
391
- color: var(--color-status-danger-text);
392
- text-decoration-color: var(--color-status-danger-text);
388
+ color: var(--color-status-danger-emphasis);
389
+ text-decoration-color: var(--color-status-danger-emphasis);
393
390
  background: var(--color-status-danger-surface);
394
391
  }
395
392
 
396
393
  :where(ins) {
397
- color: var(--color-status-success-text);
398
- text-decoration-color: var(--color-status-success-text);
394
+ color: var(--color-status-success-emphasis);
395
+ text-decoration-color: var(--color-status-success-emphasis);
399
396
  background: var(--color-status-success-surface);
400
397
  }
401
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
  }