@nordcode/ui 1.1.1 → 1.1.3

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 (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/out/bundle.css +6 -5
  3. package/out/bundle_configless.css +3 -2
  4. package/out/complete.css +7 -6
  5. package/out/complete_configless.css +4 -3
  6. package/package.json +1 -1
  7. package/src/styles/components/icons.css +1 -1
  8. package/src/styles/components/inputs/switch.css +1 -1
  9. package/src/styles/config/config.css +3 -3
  10. package/src/styles/utils/base.css +2 -1
  11. package/src/styles/utils/bundle.css +1 -1
  12. package/src/styles/utils/reset.css +0 -1
package/CHANGELOG.md CHANGED
@@ -67,3 +67,15 @@ Lots of spring cleaning
67
67
  ### Fixes
68
68
 
69
69
  - Made details full width again
70
+
71
+ ## 1.1.2 (2025-01-03)
72
+
73
+ ### Fixes
74
+
75
+ - Fix switch component not working
76
+
77
+ ## 1.1.3 (2025-01-04)
78
+
79
+ ### Fixes
80
+
81
+ - Small design fixes and improvements
package/out/bundle.css CHANGED
@@ -8,9 +8,9 @@
8
8
  --font-weight-heading: 600;
9
9
  --font-weight-active: 600;
10
10
  --font-weight-strong: 600;
11
- --line-height-large: 1.75;
12
- --line-height-base: 1.5;
13
- --line-height-small: 1.2;
11
+ --line-height-large: 1.85;
12
+ --line-height-base: 1.55;
13
+ --line-height-small: 1.1;
14
14
  --tracking-base: normal;
15
15
  --tracking-tight: -.04ch;
16
16
  --tracking-wide: .06ch;
@@ -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
  }
@@ -510,12 +510,13 @@
510
510
  border-radius: var(--border-radius-medium);
511
511
  border: var(--border-width-thin) solid var(--color-border-base);
512
512
  padding: var(--p-y-details) var(--p-x-details);
513
+ inline-size: 100%;
513
514
  }
514
515
 
515
516
  :where(details) > summary {
516
517
  color: var(--color-text-base);
517
518
  background: var(--color-surface-subtle);
518
- border-radius: var(--border-radius-medium);
519
+ border-radius: inherit;
519
520
  font-weight: var(--font-weight-heading);
520
521
  padding: var(--p-y-details) var(--p-x-details);
521
522
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
package/out/bundle_configless.css CHANGED
@@ -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
  }
@@ -291,12 +291,13 @@
291
291
  border-radius: var(--border-radius-medium);
292
292
  border: var(--border-width-thin) solid var(--color-border-base);
293
293
  padding: var(--p-y-details) var(--p-x-details);
294
+ inline-size: 100%;
294
295
  }
295
296
 
296
297
  :where(details) > summary {
297
298
  color: var(--color-text-base);
298
299
  background: var(--color-surface-subtle);
299
- border-radius: var(--border-radius-medium);
300
+ border-radius: inherit;
300
301
  font-weight: var(--font-weight-heading);
301
302
  padding: var(--p-y-details) var(--p-x-details);
302
303
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
package/out/complete.css CHANGED
@@ -8,9 +8,9 @@
8
8
  --font-weight-heading: 600;
9
9
  --font-weight-active: 600;
10
10
  --font-weight-strong: 600;
11
- --line-height-large: 1.75;
12
- --line-height-base: 1.5;
13
- --line-height-small: 1.2;
11
+ --line-height-large: 1.85;
12
+ --line-height-base: 1.55;
13
+ --line-height-small: 1.1;
14
14
  --tracking-base: normal;
15
15
  --tracking-tight: -.04ch;
16
16
  --tracking-wide: .06ch;
@@ -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
  }
@@ -510,12 +510,13 @@
510
510
  border-radius: var(--border-radius-medium);
511
511
  border: var(--border-width-thin) solid var(--color-border-base);
512
512
  padding: var(--p-y-details) var(--p-x-details);
513
+ inline-size: 100%;
513
514
  }
514
515
 
515
516
  :where(details) > summary {
516
517
  color: var(--color-text-base);
517
518
  background: var(--color-surface-subtle);
518
- border-radius: var(--border-radius-medium);
519
+ border-radius: inherit;
519
520
  font-weight: var(--font-weight-heading);
520
521
  padding: var(--p-y-details) var(--p-x-details);
521
522
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
@@ -2423,7 +2424,7 @@
2423
2424
 
2424
2425
  @layer components.input-switch {
2425
2426
  :where(.nc-input-switch) {
2426
- --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2));
2427
+ --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
2427
2428
  --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
2428
2429
  --_switch-color: var(--switch-color, var(--_input-background));
2429
2430
  --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
package/out/complete_configless.css CHANGED
@@ -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
  }
@@ -291,12 +291,13 @@
291
291
  border-radius: var(--border-radius-medium);
292
292
  border: var(--border-width-thin) solid var(--color-border-base);
293
293
  padding: var(--p-y-details) var(--p-x-details);
294
+ inline-size: 100%;
294
295
  }
295
296
 
296
297
  :where(details) > summary {
297
298
  color: var(--color-text-base);
298
299
  background: var(--color-surface-subtle);
299
- border-radius: var(--border-radius-medium);
300
+ border-radius: inherit;
300
301
  font-weight: var(--font-weight-heading);
301
302
  padding: var(--p-y-details) var(--p-x-details);
302
303
  margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
@@ -2204,7 +2205,7 @@
2204
2205
 
2205
2206
  @layer components.input-switch {
2206
2207
  :where(.nc-input-switch) {
2207
- --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2));
2208
+ --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
2208
2209
  --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
2209
2210
  --_switch-color: var(--switch-color, var(--_input-background));
2210
2211
  --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
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.1",
15
+ "version": "1.1.3",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/components/icons.css CHANGED
@@ -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
 
package/src/styles/components/inputs/switch.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components.input-switch {
2
2
  :where(.nc-input-switch) {
3
- --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2));
3
+ --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2rem));
4
4
  --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
5
5
  --_switch-color: var(--switch-color, var(--_input-background));
6
6
  --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
package/src/styles/config/config.css CHANGED
@@ -12,9 +12,9 @@
12
12
  --font-weight-active: 600;
13
13
  --font-weight-strong: 600;
14
14
 
15
- --line-height-large: 1.75;
16
- --line-height-base: 1.5;
17
- --line-height-small: 1.2;
15
+ --line-height-large: 1.85;
16
+ --line-height-base: 1.55;
17
+ --line-height-small: 1.1;
18
18
 
19
19
  --tracking-base: normal;
20
20
  --tracking-tight: -0.04ch;
package/src/styles/utils/base.css CHANGED
@@ -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
 
@@ -93,7 +94,7 @@
93
94
  & > summary {
94
95
  color: var(--color-text-base);
95
96
  background: var(--color-surface-subtle);
96
- border-radius: var(--border-radius-medium);
97
+ border-radius: inherit;
97
98
  font-weight: var(--font-weight-heading);
98
99
  padding: var(--p-y-details) var(--p-x-details);
99
100
  margin: calc(-1 * var(--p-y-details))
package/src/styles/utils/bundle.css CHANGED
@@ -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";
package/src/styles/utils/reset.css CHANGED
@@ -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
  }