@digiko-npm/designsystem 0.9.7 → 0.9.8

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 (16) hide show
  1. package/dist/designsystem.css +32 -24
  2. package/dist/designsystem.min.css +2 -2
  3. package/package.json +2 -1
  4. package/src/components/bottom-nav.css +1 -1
  5. package/src/components/chip.css +1 -1
  6. package/src/components/command.css +4 -4
  7. package/src/components/datepicker.css +1 -1
  8. package/src/components/gallery.css +3 -3
  9. package/src/components/hero.css +1 -1
  10. package/src/components/popover.css +2 -2
  11. package/src/components/slider.css +2 -2
  12. package/src/components/tag.css +4 -4
  13. package/src/components/toolbar.css +1 -1
  14. package/src/tokens/colors.css +5 -1
  15. package/src/tokens/spacing.css +4 -0
  16. package/src/utilities/interactive.css +2 -2
package/dist/designsystem.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds/designsystem v0.9.7 */
1
+ /* @ds/designsystem v0.9.8 */
2
2
  /* ==========================================================================
3
3
  @digiko-npm/designsystem
4
4
 
@@ -68,6 +68,8 @@
68
68
  /* --- Interactive --- */
69
69
  --ds-color-interactive: #3f3f46;
70
70
  --ds-color-interactive-hover: #27272a;
71
+ --ds-color-interactive-subtle: rgba(63, 63, 70, 0.1);
72
+ --ds-color-interactive-border: rgba(63, 63, 70, 0.2);
71
73
 
72
74
  /* --- Overlays --- */
73
75
  --ds-color-overlay: rgba(0, 0, 0, 0.5);
@@ -101,7 +103,7 @@
101
103
  --ds-color-bg: #09090b;
102
104
  --ds-color-bg-subtle: #0f0f11;
103
105
  --ds-color-bg-muted: #18181b;
104
- --ds-color-bg-elevated: #1c1c20;
106
+ --ds-color-bg-elevated: #27272a;
105
107
 
106
108
  --ds-color-surface: #0f0f11;
107
109
  --ds-color-surface-hover: #18181b;
@@ -132,6 +134,8 @@
132
134
  /* --- Interactive --- */
133
135
  --ds-color-interactive: #d4d4d8;
134
136
  --ds-color-interactive-hover: #fafafa;
137
+ --ds-color-interactive-subtle: rgba(212, 212, 216, 0.1);
138
+ --ds-color-interactive-border: rgba(212, 212, 216, 0.2);
135
139
 
136
140
  /* --- Overlays --- */
137
141
  --ds-color-overlay: rgba(0, 0, 0, 0.7);
@@ -331,6 +335,10 @@
331
335
  --ds-size-3: 2.5rem;
332
336
  --ds-size-4: 3rem;
333
337
 
338
+ /* --- Component-Specific Heights --- */
339
+ --ds-search-bar-height: 3.5rem;
340
+ --ds-toolbar-row-height: 2.5rem;
341
+
334
342
  /* --- Section Padding (responsive, generous) --- */
335
343
  --ds-section-padding: clamp(80px, 12vw, 160px);
336
344
 
@@ -2857,7 +2865,7 @@ hr {
2857
2865
  height: 1.25rem;
2858
2866
  border: none;
2859
2867
  background: none;
2860
- border-radius: var(--ds-radius-default);
2868
+ border-radius: var(--ds-radius-md);
2861
2869
  color: var(--ds-color-text-tertiary);
2862
2870
  cursor: pointer;
2863
2871
  font-size: var(--ds-text-xs);
@@ -3099,7 +3107,7 @@ hr {
3099
3107
  border: 2px solid var(--ds-color-surface);
3100
3108
  box-shadow: var(--ds-shadow-sm);
3101
3109
  cursor: pointer;
3102
- transition: transform var(--ds-duration-fast) var(--ds-ease);
3110
+ transition: transform var(--ds-duration-fast) var(--ds-ease-default);
3103
3111
  }
3104
3112
  .ds-slider input[type="range"]::-moz-range-thumb {
3105
3113
 
@@ -3110,7 +3118,7 @@ hr {
3110
3118
  border: 2px solid var(--ds-color-surface);
3111
3119
  box-shadow: var(--ds-shadow-sm);
3112
3120
  cursor: pointer;
3113
- transition: transform var(--ds-duration-fast) var(--ds-ease);
3121
+ transition: transform var(--ds-duration-fast) var(--ds-ease-default);
3114
3122
  }
3115
3123
  .ds-slider input[type="range"]:hover::-webkit-slider-thumb {
3116
3124
 
@@ -3723,9 +3731,9 @@ hr {
3723
3731
  }
3724
3732
  .ds-tag--purple {
3725
3733
 
3726
- background-color: var(--ds-color-purple-subtle, var(--ds-color-bg-elevated));
3727
- color: var(--ds-color-purple, var(--ds-color-interactive));
3728
- border-color: var(--ds-color-purple-border, var(--ds-color-purple, var(--ds-color-interactive)));
3734
+ background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-elevated));
3735
+ color: var(--ds-color-accent-purple, var(--ds-color-interactive));
3736
+ border-color: var(--ds-color-accent-purple-border, var(--ds-color-accent-purple, var(--ds-color-interactive)));
3729
3737
  }
3730
3738
  .ds-tag--removable {
3731
3739
 
@@ -3799,7 +3807,7 @@ hr {
3799
3807
 
3800
3808
 
3801
3809
  /* Tags used as <button> for selection — no focus ring on click */
3802
- button.ds-tag:focus-visible {
3810
+ .ds-tag:focus-visible {
3803
3811
  outline: none;
3804
3812
  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
3805
3813
  scroll-margin-block: var(--ds-space-16, 4rem);
@@ -3854,7 +3862,7 @@ button.ds-tag:focus-visible {
3854
3862
  .ds-chip--logic {
3855
3863
 
3856
3864
  cursor: pointer;
3857
- font-weight: 600;
3865
+ font-weight: var(--ds-weight-semibold);
3858
3866
  color: var(--ds-color-text-tertiary);
3859
3867
  background: transparent;
3860
3868
  border-color: var(--ds-color-border);
@@ -6317,7 +6325,7 @@ button.ds-tag:focus-visible {
6317
6325
  height: 2.25rem;
6318
6326
  border-radius: var(--ds-radius-full);
6319
6327
  background: var(--ds-color-text);
6320
- color: var(--ds-color-bg-base);
6328
+ color: var(--ds-color-bg);
6321
6329
  }
6322
6330
 
6323
6331
 
@@ -6490,7 +6498,7 @@ button.ds-tag:focus-visible {
6490
6498
  height: 1rem;
6491
6499
  padding: 0 0.25rem;
6492
6500
  font-size: 0.625rem;
6493
- font-weight: 600;
6501
+ font-weight: var(--ds-weight-semibold);
6494
6502
  line-height: 1;
6495
6503
  color: var(--ds-color-on-inverted);
6496
6504
  background: var(--ds-color-interactive);
@@ -8017,8 +8025,8 @@ button.ds-tag:focus-visible {
8017
8025
  visibility: hidden;
8018
8026
  transform: scale(0.96);
8019
8027
  transition:
8020
- opacity var(--ds-duration-fast) var(--ds-ease),
8021
- visibility var(--ds-duration-fast) var(--ds-ease),
8028
+ opacity var(--ds-duration-fast) var(--ds-ease-default),
8029
+ visibility var(--ds-duration-fast) var(--ds-ease-default),
8022
8030
  transform var(--ds-duration-fast) var(--ds-ease-out-expo);
8023
8031
 
8024
8032
  /* Size: small */
@@ -8317,8 +8325,8 @@ button.ds-tag:focus-visible {
8317
8325
  opacity: 0;
8318
8326
  visibility: hidden;
8319
8327
  transition:
8320
- opacity var(--ds-duration-fast) var(--ds-ease),
8321
- visibility var(--ds-duration-fast) var(--ds-ease);
8328
+ opacity var(--ds-duration-fast) var(--ds-ease-default),
8329
+ visibility var(--ds-duration-fast) var(--ds-ease-default);
8322
8330
 
8323
8331
  /* Open state */
8324
8332
 
@@ -8445,8 +8453,8 @@ button.ds-tag:focus-visible {
8445
8453
  font-size: var(--ds-text-sm);
8446
8454
  color: var(--ds-color-text-secondary);
8447
8455
  transition:
8448
- background-color var(--ds-duration-fast) var(--ds-ease),
8449
- color var(--ds-duration-fast) var(--ds-ease);
8456
+ background-color var(--ds-duration-fast) var(--ds-ease-default),
8457
+ color var(--ds-duration-fast) var(--ds-ease-default);
8450
8458
 
8451
8459
  /* Item hover & active states */
8452
8460
 
@@ -9390,7 +9398,7 @@ button.ds-tag:focus-visible {
9390
9398
  border: none;
9391
9399
  border-radius: var(--ds-radius-full);
9392
9400
  background-color: rgba(255, 255, 255, 0.15);
9393
- color: #fff;
9401
+ color: var(--ds-color-on-inverted);
9394
9402
  font-size: var(--ds-text-xl);
9395
9403
  cursor: pointer;
9396
9404
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -9422,7 +9430,7 @@ button.ds-tag:focus-visible {
9422
9430
  border: none;
9423
9431
  border-radius: var(--ds-radius-full);
9424
9432
  background-color: rgba(255, 255, 255, 0.15);
9425
- color: #fff;
9433
+ color: var(--ds-color-on-inverted);
9426
9434
  font-size: var(--ds-text-2xl);
9427
9435
  cursor: pointer;
9428
9436
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -9467,7 +9475,7 @@ button.ds-tag:focus-visible {
9467
9475
  padding: var(--ds-space-1) var(--ds-space-3);
9468
9476
  border-radius: var(--ds-radius-full);
9469
9477
  background-color: rgba(0, 0, 0, 0.6);
9470
- color: #fff;
9478
+ color: var(--ds-color-on-inverted);
9471
9479
  font-size: var(--ds-text-sm);
9472
9480
  font-family: var(--ds-font-sans);
9473
9481
  font-variant-numeric: tabular-nums;
@@ -9593,7 +9601,7 @@ button.ds-tag:focus-visible {
9593
9601
 
9594
9602
  /* --- Title & subtitle (theme-independent white for photo readability) --- */
9595
9603
  .ds-hero__title {
9596
- color: #fff;
9604
+ color: var(--ds-color-on-inverted);
9597
9605
  }
9598
9606
 
9599
9607
  .ds-hero__subtitle {
@@ -12022,7 +12030,7 @@ tr:hover .ds-sortable__handle,
12022
12030
  /* --- Editable Cell (pointer + bg on hover) --- */
12023
12031
  .ds-editable {
12024
12032
  cursor: pointer;
12025
- border-radius: var(--ds-radius-default);
12033
+ border-radius: var(--ds-radius-md);
12026
12034
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
12027
12035
  }
12028
12036
  .ds-editable:hover {
@@ -12076,7 +12084,7 @@ tr:hover .ds-sortable__handle,
12076
12084
  }
12077
12085
 
12078
12086
  .ds-bg-base-50 {
12079
- background-color: color-mix(in srgb, var(--ds-color-bg-base) 50%, transparent);
12087
+ background-color: color-mix(in srgb, var(--ds-color-bg) 50%, transparent);
12080
12088
  }
12081
12089
 
12082
12090
  /* --- Hover Color Variants --- */