@nordcode/ui 1.1.2 → 1.1.4

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.
package/CHANGELOG.md CHANGED
@@ -73,3 +73,15 @@ Lots of spring cleaning
73
73
  ### Fixes
74
74
 
75
75
  - Fix switch component not working
76
+
77
+ ## 1.1.3 (2025-01-04)
78
+
79
+ ### Fixes
80
+
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
package/out/bundle.css CHANGED
@@ -410,7 +410,6 @@
410
410
  }
411
411
 
412
412
  :where(p) {
413
- text-wrap: balance;
414
413
  text-wrap: pretty;
415
414
  max-inline-size: var(--measure-base);
416
415
  }
@@ -492,6 +491,7 @@
492
491
  }
493
492
 
494
493
  :where(figure) :where(figcaption) {
494
+ text-align: center;
495
495
  border-end-end-radius: inherit;
496
496
  border-end-start-radius: inherit;
497
497
  }
@@ -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: var(--border-radius-medium);
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
  }
@@ -191,7 +191,6 @@
191
191
  }
192
192
 
193
193
  :where(p) {
194
- text-wrap: balance;
195
194
  text-wrap: pretty;
196
195
  max-inline-size: var(--measure-base);
197
196
  }
@@ -273,6 +272,7 @@
273
272
  }
274
273
 
275
274
  :where(figure) :where(figcaption) {
275
+ text-align: center;
276
276
  border-end-end-radius: inherit;
277
277
  border-end-start-radius: inherit;
278
278
  }
@@ -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: var(--border-radius-medium);
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
  }
package/out/complete.css CHANGED
@@ -410,7 +410,6 @@
410
410
  }
411
411
 
412
412
  :where(p) {
413
- text-wrap: balance;
414
413
  text-wrap: pretty;
415
414
  max-inline-size: var(--measure-base);
416
415
  }
@@ -492,6 +491,7 @@
492
491
  }
493
492
 
494
493
  :where(figure) :where(figcaption) {
494
+ text-align: center;
495
495
  border-end-end-radius: inherit;
496
496
  border-end-start-radius: inherit;
497
497
  }
@@ -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: var(--border-radius-medium);
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
  }
@@ -191,7 +191,6 @@
191
191
  }
192
192
 
193
193
  :where(p) {
194
- text-wrap: balance;
195
194
  text-wrap: pretty;
196
195
  max-inline-size: var(--measure-base);
197
196
  }
@@ -273,6 +272,7 @@
273
272
  }
274
273
 
275
274
  :where(figure) :where(figcaption) {
275
+ text-align: center;
276
276
  border-end-end-radius: inherit;
277
277
  border-end-start-radius: inherit;
278
278
  }
@@ -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: var(--border-radius-medium);
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
  }
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.2",
15
+ "version": "1.1.4",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
@@ -44,7 +44,7 @@
44
44
  }
45
45
  }
46
46
 
47
- :where(button, .nc-button)>.nc-icon {
47
+ :where(button, .nc-button) > .nc-icon {
48
48
  --icon-size: 2ex;
49
49
  }
50
50
 
@@ -70,6 +70,7 @@
70
70
  & :where(figcaption) {
71
71
  border-end-start-radius: inherit;
72
72
  border-end-end-radius: inherit;
73
+ text-align: center;
73
74
  }
74
75
  }
75
76
 
@@ -83,9 +84,10 @@
83
84
  :where(details) {
84
85
  --p-x-details: 2ch;
85
86
  --p-y-details: 0.8lh;
87
+ --b-r-details: var(--border-radius-medium);
86
88
 
87
89
  background-color: var(--color-surface-muted);
88
- border-radius: var(--border-radius-medium);
90
+ border-radius: var(--b-r-details);
89
91
  border: var(--border-width-thin) solid var(--color-border-base);
90
92
  padding: var(--p-y-details) var(--p-x-details);
91
93
  inline-size: 100%;
@@ -93,8 +95,8 @@
93
95
  & > summary {
94
96
  color: var(--color-text-base);
95
97
  background: var(--color-surface-subtle);
96
- border-radius: var(--border-radius-medium);
97
98
  font-weight: var(--font-weight-heading);
99
+ border-radius: var(--b-r-details);
98
100
  padding: var(--p-y-details) var(--p-x-details);
99
101
  margin: calc(-1 * var(--p-y-details))
100
102
  calc(-1 * var(--p-x-details) + var(--border-width-thin));
@@ -1,6 +1,6 @@
1
+ @import "./reset.css";
1
2
  @import "./media.css";
2
3
  @import "./base.css";
3
- @import "./reset.css";
4
4
  @import "./easings.css";
5
5
  @import "./layouts.css";
6
6
  @import "./theme.css";
@@ -134,7 +134,6 @@
134
134
  }
135
135
 
136
136
  :where(p) {
137
- text-wrap: balance;
138
137
  text-wrap: pretty;
139
138
  max-inline-size: var(--measure-base);
140
139
  }