@nordcode/ui 2.1.4 → 2.1.6

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 (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/out/bundle.css +17 -9
  3. package/out/bundle_configless.css +2 -2
  4. package/out/complete.css +27 -18
  5. package/out/complete_configless.css +12 -11
  6. package/package.json +4 -3
  7. package/src/styles/components/inputs/base.css +0 -4
  8. package/src/styles/components/inputs/fields.css +5 -0
  9. package/src/styles/config/config.css +36 -73
  10. package/src/styles/utils/base.css +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 2.1.6 (2025-12-12)
2
+
3
+ ### fixes
4
+
5
+ - fix required checkboxes looking broken
6
+
7
+ ### features
8
+
9
+ - add style for required markers
10
+
11
+ ## 2.1.5 (2025-12-12)
12
+
13
+ ### fixes
14
+
15
+ - fix selection styles not being readable
16
+
1
17
  ## 2.1.4 (2025-11-15)
2
18
 
3
19
  ### fixes
package/out/bundle.css CHANGED
@@ -39,11 +39,21 @@
39
39
  --border-radius-medium: 4px;
40
40
  --border-radius-large: 8px;
41
41
  --border-radius-round: 100000px;
42
- --shadow-inset: inset .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), inset .9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
43
- --shadow-nearest: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
44
- --shadow-near: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -1.33px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -2.67px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -4px color-mix(in oklch, var(--shadow-color), transparent 75.35%);
45
- --shadow-medium: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -.8px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1.6px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -2.4px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -3.2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -4px color-mix(in oklch, var(--shadow-color), transparent 84.61%);
46
- --shadow-far: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -.5px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -1.5px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -2.5px color-mix(in oklch, var(--shadow-color), transparent 84.61%), 218.7px 729px 1458px -3px color-mix(in oklch, var(--shadow-color), transparent 87.85%), 656.1px 2187px 4374px -3.5px color-mix(in oklch, var(--shadow-color), transparent 90.4%), 1968.3px 6561px 13122px -4px color-mix(in oklch, var(--shadow-color), transparent 92.41%);
42
+ --control-height-base: var(--button-height-base);
43
+ --control-height-small: var(--button-height-small);
44
+ --control-spacing-minimal: .125em;
45
+ --control-spacing-tiny: .25em;
46
+ --control-spacing-nearest: .375em;
47
+ --control-spacing-near: .5em;
48
+ --control-spacing-base: .75em;
49
+ --control-spacing-far: 1em;
50
+ --control-spacing-farthest: 1.5em;
51
+ --shadow-box: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), inset -.4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%), inset .4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%);
52
+ --shadow-inset: inset .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
53
+ --shadow-nearest: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
54
+ --shadow-near: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%);
55
+ --shadow-medium: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%);
56
+ --shadow-far: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%), 7.6px 15.1px 19.6px -2.5px color-mix(in oklch, var(--shadow-color), transparent 85.8%), 13.6px 27.2px 35.4px -3px color-mix(in oklch, var(--shadow-color), transparent 87.9%), 24.5px 49px 63.7px -3.5px color-mix(in oklch, var(--shadow-color), transparent 89.7%);
47
57
  --shadow-color-light: oklch(80% .03 265);
48
58
  --shadow-color-light-lch: 80% .03 265;
49
59
  --shadow-color-dark: oklch(24% .05 265);
@@ -201,8 +211,6 @@
201
211
  --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
202
212
  --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
203
213
  --color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
204
- --control-height-base: var(--button-height-base);
205
- --control-height-small: var(--button-height-small);
206
214
  --font-family-link: var(--font-family-default);
207
215
  --font-family-button: var(--font-family-default);
208
216
  }
@@ -613,12 +621,12 @@
613
621
 
614
622
  ::selection {
615
623
  background-color: var(--color-brand-primary-base);
616
- color: var(--color-brand-primary-emphasis);
624
+ color: var(--color-brand-primary-contrast);
617
625
  }
618
626
 
619
627
  ::target-text {
620
628
  background-color: var(--color-brand-primary-base);
621
- color: var(--color-brand-primary-emphasis);
629
+ color: var(--color-brand-primary-contrast);
622
630
  }
623
631
 
624
632
  :where(a, .nc-link) {
package/out/bundle_configless.css CHANGED
@@ -405,12 +405,12 @@
405
405
 
406
406
  ::selection {
407
407
  background-color: var(--color-brand-primary-base);
408
- color: var(--color-brand-primary-emphasis);
408
+ color: var(--color-brand-primary-contrast);
409
409
  }
410
410
 
411
411
  ::target-text {
412
412
  background-color: var(--color-brand-primary-base);
413
- color: var(--color-brand-primary-emphasis);
413
+ color: var(--color-brand-primary-contrast);
414
414
  }
415
415
 
416
416
  :where(a, .nc-link) {
package/out/complete.css CHANGED
@@ -39,11 +39,21 @@
39
39
  --border-radius-medium: 4px;
40
40
  --border-radius-large: 8px;
41
41
  --border-radius-round: 100000px;
42
- --shadow-inset: inset .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), inset .9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
43
- --shadow-nearest: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
44
- --shadow-near: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -1.33px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -2.67px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -4px color-mix(in oklch, var(--shadow-color), transparent 75.35%);
45
- --shadow-medium: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -.8px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1.6px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -2.4px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -3.2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -4px color-mix(in oklch, var(--shadow-color), transparent 84.61%);
46
- --shadow-far: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -.5px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -1.5px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -2.5px color-mix(in oklch, var(--shadow-color), transparent 84.61%), 218.7px 729px 1458px -3px color-mix(in oklch, var(--shadow-color), transparent 87.85%), 656.1px 2187px 4374px -3.5px color-mix(in oklch, var(--shadow-color), transparent 90.4%), 1968.3px 6561px 13122px -4px color-mix(in oklch, var(--shadow-color), transparent 92.41%);
42
+ --control-height-base: var(--button-height-base);
43
+ --control-height-small: var(--button-height-small);
44
+ --control-spacing-minimal: .125em;
45
+ --control-spacing-tiny: .25em;
46
+ --control-spacing-nearest: .375em;
47
+ --control-spacing-near: .5em;
48
+ --control-spacing-base: .75em;
49
+ --control-spacing-far: 1em;
50
+ --control-spacing-farthest: 1.5em;
51
+ --shadow-box: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), inset -.4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%), inset .4px .8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%);
52
+ --shadow-inset: inset .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
53
+ --shadow-nearest: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
54
+ --shadow-near: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%);
55
+ --shadow-medium: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%);
56
+ --shadow-far: .4px .8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%), .7px 1.4px 1.8px -.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%), 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%), 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%), 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%), 7.6px 15.1px 19.6px -2.5px color-mix(in oklch, var(--shadow-color), transparent 85.8%), 13.6px 27.2px 35.4px -3px color-mix(in oklch, var(--shadow-color), transparent 87.9%), 24.5px 49px 63.7px -3.5px color-mix(in oklch, var(--shadow-color), transparent 89.7%);
47
57
  --shadow-color-light: oklch(80% .03 265);
48
58
  --shadow-color-light-lch: 80% .03 265;
49
59
  --shadow-color-dark: oklch(24% .05 265);
@@ -201,8 +211,6 @@
201
211
  --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1));
202
212
  --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
203
213
  --color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
204
- --control-height-base: var(--button-height-base);
205
- --control-height-small: var(--button-height-small);
206
214
  --font-family-link: var(--font-family-default);
207
215
  --font-family-button: var(--font-family-default);
208
216
  }
@@ -613,12 +621,12 @@
613
621
 
614
622
  ::selection {
615
623
  background-color: var(--color-brand-primary-base);
616
- color: var(--color-brand-primary-emphasis);
624
+ color: var(--color-brand-primary-contrast);
617
625
  }
618
626
 
619
627
  ::target-text {
620
628
  background-color: var(--color-brand-primary-base);
621
- color: var(--color-brand-primary-emphasis);
629
+ color: var(--color-brand-primary-contrast);
622
630
  }
623
631
 
624
632
  :where(a, .nc-link) {
@@ -1534,7 +1542,7 @@
1534
1542
  }
1535
1543
 
1536
1544
  @layer components.buttons {
1537
- :where(button, button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
1545
+ :where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
1538
1546
  --_button-background: var(--button-background, var(--surface-hover));
1539
1547
  --_button-color: var(--button-color, var(--text-hover));
1540
1548
  --_button-border-color: var(--button-border-color, var(--surface-hover));
@@ -1558,7 +1566,7 @@
1558
1566
  font-size: inherit;
1559
1567
  cursor: pointer;
1560
1568
  text-align: center;
1561
- transition: var(--transition-duration-base) var(--ease-2);
1569
+ transition: var(--transition-duration-quick-2) var(--ease-2);
1562
1570
  -webkit-text-decoration: unset;
1563
1571
  text-decoration: unset;
1564
1572
  box-shadow: var(--_button-box-shadow);
@@ -1666,14 +1674,14 @@
1666
1674
  margin-inline: calc(-1 * var(--_button-padding-inline));
1667
1675
  }
1668
1676
 
1669
- :is([aria-label], .-icon):where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1677
+ :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1670
1678
  --_button-border-radius: var(--border-radius-round);
1671
1679
  aspect-ratio: 1;
1672
1680
  fill: currentColor;
1673
1681
  padding: 0;
1674
1682
  }
1675
1683
 
1676
- :is([aria-label], .-icon):where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
1684
+ :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
1677
1685
  content: "";
1678
1686
  inline-size: max(var(--control-height-base), 100%);
1679
1687
  block-size: max(var(--control-height-base), 100%);
@@ -1686,7 +1694,7 @@
1686
1694
  inset-inline-start: calc(-.5 * (var(--control-height-base) - 100%));
1687
1695
  }
1688
1696
 
1689
- [disabled]:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1697
+ [disabled]:where(button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1690
1698
  --_button-border-color-hover: var(--_button-border-color);
1691
1699
  filter: contrast(.72) opacity(.72);
1692
1700
  cursor: not-allowed;
@@ -2186,10 +2194,6 @@
2186
2194
  background-color: var(--_input-hover-background);
2187
2195
  }
2188
2196
 
2189
- :where(input, textarea, select, .nc-input)[required] {
2190
- border-inline-start-width: var(--border-width-thick);
2191
- }
2192
-
2193
2197
  :where(input, textarea, select, .nc-input)::placeholder {
2194
2198
  color: var(--color-text-subtle);
2195
2199
  }
@@ -2424,6 +2428,11 @@
2424
2428
  :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
2425
2429
  margin-block-start: var(--control-spacing-far, .75em);
2426
2430
  }
2431
+
2432
+ :where(.nc-input-required-mark) {
2433
+ color: var(--color-status-danger-emphasis);
2434
+ font-size: 1.25em;
2435
+ }
2427
2436
  }
2428
2437
 
2429
2438
  @layer components.inputs-segmented {
package/out/complete_configless.css CHANGED
@@ -405,12 +405,12 @@
405
405
 
406
406
  ::selection {
407
407
  background-color: var(--color-brand-primary-base);
408
- color: var(--color-brand-primary-emphasis);
408
+ color: var(--color-brand-primary-contrast);
409
409
  }
410
410
 
411
411
  ::target-text {
412
412
  background-color: var(--color-brand-primary-base);
413
- color: var(--color-brand-primary-emphasis);
413
+ color: var(--color-brand-primary-contrast);
414
414
  }
415
415
 
416
416
  :where(a, .nc-link) {
@@ -1326,7 +1326,7 @@
1326
1326
  }
1327
1327
 
1328
1328
  @layer components.buttons {
1329
- :where(button, button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
1329
+ :where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], .nc-button) {
1330
1330
  --_button-background: var(--button-background, var(--surface-hover));
1331
1331
  --_button-color: var(--button-color, var(--text-hover));
1332
1332
  --_button-border-color: var(--button-border-color, var(--surface-hover));
@@ -1350,7 +1350,7 @@
1350
1350
  font-size: inherit;
1351
1351
  cursor: pointer;
1352
1352
  text-align: center;
1353
- transition: var(--transition-duration-base) var(--ease-2);
1353
+ transition: var(--transition-duration-quick-2) var(--ease-2);
1354
1354
  -webkit-text-decoration: unset;
1355
1355
  text-decoration: unset;
1356
1356
  box-shadow: var(--_button-box-shadow);
@@ -1458,14 +1458,14 @@
1458
1458
  margin-inline: calc(-1 * var(--_button-padding-inline));
1459
1459
  }
1460
1460
 
1461
- :is([aria-label], .-icon):where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1461
+ :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1462
1462
  --_button-border-radius: var(--border-radius-round);
1463
1463
  aspect-ratio: 1;
1464
1464
  fill: currentColor;
1465
1465
  padding: 0;
1466
1466
  }
1467
1467
 
1468
- :is([aria-label], .-icon):where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
1468
+ :is([aria-label], .-icon):where(button, button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button):after {
1469
1469
  content: "";
1470
1470
  inline-size: max(var(--control-height-base), 100%);
1471
1471
  block-size: max(var(--control-height-base), 100%);
@@ -1478,7 +1478,7 @@
1478
1478
  inset-inline-start: calc(-.5 * (var(--control-height-base) - 100%));
1479
1479
  }
1480
1480
 
1481
- [disabled]:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1481
+ [disabled]:where(button, input[type="button"], input[type="submit"], input[type="reset"], .nc-button) {
1482
1482
  --_button-border-color-hover: var(--_button-border-color);
1483
1483
  filter: contrast(.72) opacity(.72);
1484
1484
  cursor: not-allowed;
@@ -1978,10 +1978,6 @@
1978
1978
  background-color: var(--_input-hover-background);
1979
1979
  }
1980
1980
 
1981
- :where(input, textarea, select, .nc-input)[required] {
1982
- border-inline-start-width: var(--border-width-thick);
1983
- }
1984
-
1985
1981
  :where(input, textarea, select, .nc-input)::placeholder {
1986
1982
  color: var(--color-text-subtle);
1987
1983
  }
@@ -2216,6 +2212,11 @@
2216
2212
  :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
2217
2213
  margin-block-start: var(--control-spacing-far, .75em);
2218
2214
  }
2215
+
2216
+ :where(.nc-input-required-mark) {
2217
+ color: var(--color-status-danger-emphasis);
2218
+ font-size: 1.25em;
2219
+ }
2219
2220
  }
2220
2221
 
2221
2222
  @layer components.inputs-segmented {
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.1.4",
15
+ "version": "2.1.6",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
@@ -68,9 +68,10 @@
68
68
  "./fonts": "./src/assets/fonts/fonts.css"
69
69
  },
70
70
  "devDependencies": {
71
+ "baseline-browser-mapping": "^2.9.6",
71
72
  "browserslist": "^4.28.0",
72
- "lightningcss": "^1.30.2",
73
- "browserslist-config-baseline": "^0.5.0"
73
+ "browserslist-config-baseline": "^0.5.0",
74
+ "lightningcss": "^1.30.2"
74
75
  },
75
76
  "scripts": {
76
77
  "lib:transform": "node transform.js",
package/src/styles/components/inputs/base.css CHANGED
@@ -63,10 +63,6 @@
63
63
  background-color: var(--_input-hover-background);
64
64
  }
65
65
 
66
- &[required] {
67
- border-inline-start-width: var(--border-width-thick);
68
- }
69
-
70
66
  &::placeholder {
71
67
  color: var(--color-text-subtle);
72
68
  }
package/src/styles/components/inputs/fields.css CHANGED
@@ -81,4 +81,9 @@
81
81
  margin-block-start: var(--control-spacing-far, 0.75em);
82
82
  }
83
83
  }
84
+
85
+ :where(.nc-input-required-mark) {
86
+ color: var(--color-status-danger-emphasis);
87
+ font-size: 1.25em;
88
+ }
84
89
  }
package/src/styles/config/config.css CHANGED
@@ -56,85 +56,48 @@
56
56
  --border-radius-large: 8px;
57
57
  --border-radius-round: 1e5px;
58
58
 
59
+ /* UI Density Elements */
60
+
61
+ --control-height-base: 2.5em;
62
+ --control-height-small: 2em;
63
+
64
+ --control-spacing-minimal: 0.125em;
65
+ --control-spacing-tiny: 0.25em;
66
+ --control-spacing-nearest: 0.375em;
67
+ --control-spacing-near: 0.5em;
68
+ --control-spacing-base: 0.75em;
69
+ --control-spacing-far: 1em;
70
+ --control-spacing-farthest: 1.5em;
71
+
59
72
  /* SHADOWS */
60
73
 
61
- --shadow-inset:
62
- inset 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%),
63
- inset 0.9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
74
+ --shadow-box:
75
+ 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
76
+ inset -0.4px 0.8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%),
77
+ inset 0.4px 0.8px 1px 0px color-mix(in oklch, var(--color-surface-base), transparent 68%);
64
78
 
65
- --shadow-nearest:
66
- 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%),
67
- 0.9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
79
+ --shadow-inset: inset 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
80
+
81
+ --shadow-nearest: 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%);
68
82
  --shadow-near:
69
- 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%),
70
- 0.9px 3px 6px -1.33px color-mix(
71
- in oklch,
72
- var(--shadow-color),
73
- transparent 60.5%
74
- ),
75
- 2.7px 9px 18px -2.67px color-mix(
76
- in oklch,
77
- var(--shadow-color),
78
- transparent 68.78999999999999%
79
- ),
80
- 8.1px 27px 54px -4px color-mix(in oklch, var(--shadow-color), transparent 75.35%);
83
+ 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
84
+ 0.7px 1.4px 1.8px -0.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%),
85
+ 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%);
81
86
  --shadow-medium:
82
- 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%),
83
- 0.9px 3px 6px -0.8px color-mix(
84
- in oklch,
85
- var(--shadow-color),
86
- transparent 60.5%
87
- ),
88
- 2.7px 9px 18px -1.6px color-mix(
89
- in oklch,
90
- var(--shadow-color),
91
- transparent 68.78999999999999%
92
- ),
93
- 8.1px 27px 54px -2.4px color-mix(in oklch, var(--shadow-color), transparent 75.35%),
94
- 24.3px 81px 162px -3.2px color-mix(
95
- in oklch,
96
- var(--shadow-color),
97
- transparent 80.52%
98
- ),
99
- 72.9px 243px 486px -4px color-mix(in oklch, var(--shadow-color), transparent 84.61%);
87
+ 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
88
+ 0.7px 1.4px 1.8px -0.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%),
89
+ 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%),
90
+ 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%),
91
+ 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%);
100
92
  --shadow-far:
101
- 0.3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%),
102
- 0.9px 3px 6px -0.5px color-mix(
103
- in oklch,
104
- var(--shadow-color),
105
- transparent 60.5%
106
- ),
107
- 2.7px 9px 18px -1px color-mix(
108
- in oklch,
109
- var(--shadow-color),
110
- transparent 68.78999999999999%
111
- ),
112
- 8.1px 27px 54px -1.5px color-mix(in oklch, var(--shadow-color), transparent 75.35%),
113
- 24.3px 81px 162px -2px color-mix(
114
- in oklch,
115
- var(--shadow-color),
116
- transparent 80.52%
117
- ),
118
- 72.9px 243px 486px -2.5px color-mix(
119
- in oklch,
120
- var(--shadow-color),
121
- transparent 84.61%
122
- ),
123
- 218.7px 729px 1458px -3px color-mix(
124
- in oklch,
125
- var(--shadow-color),
126
- transparent 87.85%
127
- ),
128
- 656.1px 2187px 4374px -3.5px color-mix(
129
- in oklch,
130
- var(--shadow-color),
131
- transparent 90.4%
132
- ),
133
- 1968.3px 6561px 13122px -4px color-mix(
134
- in oklch,
135
- var(--shadow-color),
136
- transparent 92.41%
137
- );
93
+ 0.4px 0.8px 1px 0px color-mix(in oklch, var(--shadow-color), transparent 68%),
94
+ 0.7px 1.4px 1.8px -0.5px color-mix(in oklch, var(--shadow-color), transparent 72.8%),
95
+ 1.3px 2.6px 3.4px -1px color-mix(in oklch, var(--shadow-color), transparent 76.9%),
96
+ 2.4px 4.7px 6.1px -1.5px color-mix(in oklch, var(--shadow-color), transparent 80.3%),
97
+ 4.2px 8.4px 10.9px -2px color-mix(in oklch, var(--shadow-color), transparent 83.3%),
98
+ 7.6px 15.1px 19.6px -2.5px color-mix(in oklch, var(--shadow-color), transparent 85.8%),
99
+ 13.6px 27.2px 35.4px -3px color-mix(in oklch, var(--shadow-color), transparent 87.9%),
100
+ 24.5px 49px 63.7px -3.5px color-mix(in oklch, var(--shadow-color), transparent 89.7%);
138
101
  /* Light Theme */
139
102
 
140
103
  --shadow-color-light: oklch(80% 0.03 265);
package/src/styles/utils/base.css CHANGED
@@ -202,7 +202,7 @@
202
202
  ::selection,
203
203
  ::target-text {
204
204
  background-color: var(--color-brand-primary-base);
205
- color: var(--color-brand-primary-emphasis);
205
+ color: var(--color-brand-primary-contrast);
206
206
  }
207
207
 
208
208
  :where(a, .nc-link) {