@knime/kds-styles 0.6.6 → 0.7.0

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/dist/img/icons/cloud-pending-changes.svg +1 -1
  2. package/dist/img/icons/cloud-synced.svg +1 -1
  3. package/dist/img/icons/deploy.svg +1 -1
  4. package/dist/tokens/css/_properties-legacy.css +8 -2
  5. package/dist/tokens/css/_properties.css +42 -30
  6. package/dist/tokens/css/_variables-legacy.css +3 -2
  7. package/dist/tokens/css/_variables.css +25 -23
  8. package/package.json +3 -3
package/dist/img/icons/cloud-pending-changes.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".833" viewBox="0 0 12 12"><path d="M9.493 7.723C10.375 7.307 11 6.44 11 5.436c0-1.57-1.42-2.53-2.868-2.53C7.728 1.797 6.625 1 5.302 1c-1.558.067-3.398 1.572-2.942 3.292-.809.243-1.36.97-1.36 1.802 0 .868.512 1.415 1.188 1.69M5.9 7v1.25M5.9 7l-.884.366M5.9 7l.884.366M5.9 8.25V9.5m0-1.25-.884-.884m.884.884.884.884M5.9 8.25l.884-.884M5.9 8.25l-.884.884M5.9 8.25H4.65m1.25 0h1.25m-1.25 0-.625-1.083M5.9 8.25l.625 1.083M5.9 8.25l-1.207-.324M5.9 8.25l1.207.324M5.9 8.25l.324-1.207M5.9 8.25l-.323 1.207M5.9 8.25l-1.083.625M5.9 8.25l1.083-.625M5.9 9.5l.884-.366M5.9 9.5l-.884-.366m0-1.768-.366.884m2.134.884.366-.884m-.366-.884.366.884m-2.134.884L4.65 8.25m.625-1.083-.582.76m.582-.76.949-.124m.301 2.29.582-.76m-.582.76-.948.124m-.884-1.53.124.948m2.29-.301-.124-.949m-.76-.582.76.582M5.577 9.457l-.76-.582m.76-1.832-.76.582-.124.949.582.759.949.124.759-.582.124-.949-.582-.758z" vector-effect="non-scaling-stroke"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M6.025 7.75V9m0-1.25-.884.366m.884-.366.884.366M6.025 9v1.25m0-1.25-.884-.884M6.025 9l.884.884M6.025 9l.884-.884M6.025 9l-.884.884M6.025 9h-1.25m1.25 0h1.25m-1.25 0L5.4 7.917M6.025 9l.625 1.082M6.025 9l-1.207-.324M6.025 9l1.207.324M6.025 9l.324-1.207M6.025 9l-.323 1.207M6.025 9l-1.083.625M6.025 9l1.083-.625M6.025 10.25l.884-.366m-.884.366-.884-.366m0-1.768L4.775 9m2.134.884L7.275 9m-.366-.884L7.275 9m-2.134.884L4.775 9M5.4 7.917l-.582.76m.582-.76.949-.124m.301 2.29.582-.76m-.582.76-.948.124m-.884-1.53.124.948m2.29-.301-.124-.949m-.76-.582.76.582m-1.406 1.832-.76-.582m4.091-1.738c.141-.04.3-.094.46-.164C10 7.5 11 6.44 11 5.436c0-1.57-1.42-2.53-2.868-2.53C7.728 1.797 6.625 1 5.302 1c-1.558.067-3.398 1.572-2.942 3.292-.809.243-1.36.97-1.36 1.802 0 1.139.881 1.726 1.86 1.87m2.842-.171-.76.582-.124.949.582.759.949.124.759-.582.124-.949-.582-.758z" vector-effect="non-scaling-stroke"/></svg>
package/dist/img/icons/cloud-synced.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M9.493 7.723C10.375 7.307 11 6.44 11 5.436c0-1.57-1.42-2.53-2.868-2.53C7.728 1.797 6.625 1 5.302 1c-1.558.067-3.398 1.572-2.942 3.292-.809.243-1.36.97-1.36 1.802 0 .785.42 1.308 1 1.604m2.15-.313L5.65 9l2.357-3" vector-effect="non-scaling-stroke"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M1.232 7A1.76 1.76 0 0 1 1 6.094c0-.832.551-1.56 1.36-1.802C1.904 2.572 3.744 1.067 5.301 1c1.324 0 2.427.797 2.831 1.906 1.447 0 2.868.96 2.868 2.53 0 .428-.114.832-.313 1.186a2.6 2.6 0 0 1-.227.338m-5.96.526 1.167 1.292 1.604-2.1M9 7.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0" vector-effect="non-scaling-stroke"/></svg>
package/dist/img/icons/deploy.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 12 12"><path fill="#000" stroke="none" d="m8.093 9.818-.267-.423zm-1.964.663-.046-.498zm-2.062-.289.181-.466zm-1.675-1.17-.377.328zm-.403-1.88a.5.5 0 1 0-.978.206l.489-.103zM10 1l.354-.354a.5.5 0 0 0-.708 0zm-1.604.897a.5.5 0 1 0 .708.707L8.75 2.25zm2.5.707a.5.5 0 1 0 .708-.707l-.354.353zM5.2 5.2v-.5a.5.5 0 0 0-.5.5zm1.8 0h.5a.5.5 0 0 0-.5-.5zM7 7v.5a.5.5 0 0 0 .5-.5zM5.2 7h-.5a.5.5 0 0 0 .5.5zm0-6V.5a.5.5 0 0 0-.5.5zM7 1h.5A.5.5 0 0 0 7 .5zm0 1.8v.5a.5.5 0 0 0 .5-.5zm-1.8 0h-.5a.5.5 0 0 0 .5.5zM1 3.1v-.5a.5.5 0 0 0-.5.5zm1.8 0h.5a.5.5 0 0 0-.5-.5zm0 1.8v.5a.5.5 0 0 0 .5-.5zM1 4.9H.5a.5.5 0 0 0 .5.5zm9 1.556h-.5a3.36 3.36 0 0 1-.442 1.66l.435.246.435.247c.375-.66.572-1.4.572-2.153zm-.507 1.906-.435-.246c-.29.512-.713.953-1.232 1.28l.267.422.266.424a4.64 4.64 0 0 0 1.57-1.633zm-1.4 1.456-.267-.423a3.96 3.96 0 0 1-1.743.588l.046.498.047.497a4.96 4.96 0 0 0 2.183-.736zm-1.964.663-.046-.498a4 4 0 0 1-1.835-.257l-.181.466-.182.466a5 5 0 0 0 2.29.32zm-2.062-.289.181-.466a3.8 3.8 0 0 1-1.48-1.033l-.376.328-.377.329a4.8 4.8 0 0 0 1.87 1.308zm-1.675-1.17.377-.329a3.45 3.45 0 0 1-.78-1.552l-.489.104-.49.103A4.45 4.45 0 0 0 2.016 9.35zM10 6.455h.5V1h-1v5.456zM8.75 2.25l.354.354 1.25-1.25L10 1 9.646.646l-1.25 1.25zM10 1l-.354.354 1.25 1.25.354-.354.354-.353-1.25-1.25zM5.2 5.2v.5H7v-1H5.2zM7 7v-.5H5.2v1H7zm0-1.8h-.5V7h1V5.2zM5.2 1v.5H7v-1H5.2zM7 2.8v-.5H5.2v1H7zM7 1h-.5v1.8h1V1zM1 3.1v.5h1.8v-1H1zm1.8 1.8v-.5H1v1h1.8zM1 4.9h.5V3.1h-1v1.8zm1.8-1.8h-.5V4h1v-.9zm0 .9h-.5v.9h1V4zm1.278 1.2h.5V4h-1v1.2zm0-1.2h.5V2.8h-1V4zM2.8 4v.5h1.278v-1H2.8zm2.4-1.2h.5v-.9h-1v.9zm0-.9h.5V1h-1v.9zm0 5.1h.5v-.9h-1V7zm0-.9h.5v-.9h-1v.9zm-1.122-.9h-.5c0 .5.168.914.554 1.16.333.213.744.24 1.068.24v-1c-.31 0-.46-.038-.53-.082a.13.13 0 0 1-.052-.062.6.6 0 0 1-.04-.256zm0-2.4h.5c0-.138.023-.212.041-.248a.15.15 0 0 1 .06-.067c.078-.049.233-.085.521-.085v-1c-.312 0-.718.028-1.051.237-.386.241-.571.65-.571 1.163z" vector-effect="non-scaling-stroke"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".833" viewBox="0 0 12 12"><path d="M4.5 9.5h2.25c1.5 0 2.5-1 2.5-2.5V2.5m0 0L7.75 4m1.5-1.5 1.5 1.5M3 5v-.75H1.5v1.5H3zm0 0h1.065m0 0v1c0 .643.407.75.935.75M4.065 5V4c0-.643.435-.75.935-.75m0 0V4h1.5V2.5H5zm0 3.5v.75h1.5V6H5z" vector-effect="non-scaling-stroke"/></svg>
package/dist/tokens/css/_properties-legacy.css CHANGED
@@ -143,13 +143,13 @@ syntax: "<color>";
143
143
  @property --kds-color-background-danger-hover {
144
144
  syntax: "<color>";
145
145
  inherits: true;
146
- initial-value: hsl(3 100% 86%);
146
+ initial-value: hsl(2 100% 92%);
147
147
  }
148
148
 
149
149
  @property --kds-color-background-danger-active {
150
150
  syntax: "<color>";
151
151
  inherits: true;
152
- initial-value: hsl(4 100% 80%);
152
+ initial-value: hsl(3 100% 86%);
153
153
  }
154
154
 
155
155
  @property --kds-color-background-danger-bold-initial {
@@ -1118,6 +1118,12 @@ syntax: "<string>";
1118
1118
  initial-value: 2px solid hsl(345 0% 10% / 0.74);
1119
1119
  }
1120
1120
 
1121
+ @property --kds-border-color-picker-handle-initial {
1122
+ syntax: "<string>";
1123
+ inherits: false;
1124
+ initial-value: 2px solid hsl(0 0% 99%);
1125
+ }
1126
+
1121
1127
  @property --kds-elevation-level-0 {
1122
1128
  syntax: "<string>";
1123
1129
  inherits: false;
package/dist/tokens/css/_properties.css CHANGED
@@ -1149,12 +1149,6 @@ syntax: "<string>";
1149
1149
  }
1150
1150
 
1151
1151
  @property --kds-core-line-height-singleline {
1152
- syntax: "<number> | <percentage>";
1153
- inherits: true;
1154
- initial-value: 1;
1155
- }
1156
-
1157
- @property --kds-core-line-height-multiline-narrow {
1158
1152
  syntax: "<number> | <percentage>";
1159
1153
  inherits: true;
1160
1154
  initial-value: 1.3;
@@ -1343,13 +1337,13 @@ syntax: "<color>";
1343
1337
  @property --kds-color-background-danger-hover {
1344
1338
  syntax: "<color>";
1345
1339
  inherits: true;
1346
- initial-value: light-dark(hsl(3 100% 86%), hsl(349 91% 35% / 0.72));
1340
+ initial-value: light-dark(hsl(2 100% 92%), hsl(349 91% 35% / 0.72));
1347
1341
  }
1348
1342
 
1349
1343
  @property --kds-color-background-danger-active {
1350
1344
  syntax: "<color>";
1351
1345
  inherits: true;
1352
- initial-value: light-dark(hsl(4 100% 80%), hsl(353 75% 45% / 0.72));
1346
+ initial-value: light-dark(hsl(3 100% 86%), hsl(353 75% 45% / 0.72));
1353
1347
  }
1354
1348
 
1355
1349
  @property --kds-color-background-danger-bold-initial {
@@ -2408,6 +2402,12 @@ syntax: "<string>";
2408
2402
  initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
2409
2403
  }
2410
2404
 
2405
+ @property --kds-border-color-picker-handle-initial {
2406
+ syntax: "<string>";
2407
+ inherits: false;
2408
+ initial-value: 2px solid hsl(0 0% 99%);
2409
+ }
2410
+
2411
2411
  @property --kds-sizing-viewport-breakpoints-576 {
2412
2412
  syntax: "<length>";
2413
2413
  inherits: false;
@@ -2558,6 +2558,12 @@ syntax: "<length>";
2558
2558
  initial-value: 4px;
2559
2559
  }
2560
2560
 
2561
+ @property --kds-dimension-component-height-0-125x {
2562
+ syntax: "<length>";
2563
+ inherits: false;
2564
+ initial-value: 2px;
2565
+ }
2566
+
2561
2567
  @property --kds-dimension-component-height-0-25x {
2562
2568
  syntax: "<length>";
2563
2569
  inherits: false;
@@ -2618,6 +2624,12 @@ syntax: "<length>";
2618
2624
  initial-value: 64px;
2619
2625
  }
2620
2626
 
2627
+ @property --kds-dimension-component-width-0-125x {
2628
+ syntax: "<length>";
2629
+ inherits: false;
2630
+ initial-value: 2px;
2631
+ }
2632
+
2621
2633
  @property --kds-dimension-component-width-0-25x {
2622
2634
  syntax: "<length>";
2623
2635
  inherits: false;
@@ -2672,16 +2684,16 @@ syntax: "<length>";
2672
2684
  initial-value: 64px;
2673
2685
  }
2674
2686
 
2675
- @property --kds-dimension-component-width-25x {
2687
+ @property --kds-dimension-component-width-16x {
2676
2688
  syntax: "<length>";
2677
2689
  inherits: false;
2678
- initial-value: 400px;
2690
+ initial-value: 256px;
2679
2691
  }
2680
2692
 
2681
- @property --kds-dimension-component-width-16x {
2693
+ @property --kds-dimension-component-width-25x {
2682
2694
  syntax: "<length>";
2683
2695
  inherits: false;
2684
- initial-value: 256px;
2696
+ initial-value: 400px;
2685
2697
  }
2686
2698
 
2687
2699
  @property --kds-dimension-component-width-32x {
@@ -2759,43 +2771,43 @@ syntax: "<string>";
2759
2771
  @property --kds-font-base-title-xsmall {
2760
2772
  syntax: "<string>";
2761
2773
  inherits: true;
2762
- initial-value: 500 10px/1 Roboto, sans-serif;
2774
+ initial-value: 500 10px/1.3 Roboto, sans-serif;
2763
2775
  }
2764
2776
 
2765
2777
  @property --kds-font-base-title-small {
2766
2778
  syntax: "<string>";
2767
2779
  inherits: true;
2768
- initial-value: 500 12px/1 Roboto, sans-serif;
2780
+ initial-value: 500 12px/1.3 Roboto, sans-serif;
2769
2781
  }
2770
2782
 
2771
2783
  @property --kds-font-base-title-small-strong {
2772
2784
  syntax: "<string>";
2773
2785
  inherits: true;
2774
- initial-value: 700 12px/1 Roboto, sans-serif;
2786
+ initial-value: 700 12px/1.3 Roboto, sans-serif;
2775
2787
  }
2776
2788
 
2777
2789
  @property --kds-font-base-title-medium {
2778
2790
  syntax: "<string>";
2779
2791
  inherits: true;
2780
- initial-value: 500 14px/1 Roboto, sans-serif;
2792
+ initial-value: 500 14px/1.3 Roboto, sans-serif;
2781
2793
  }
2782
2794
 
2783
2795
  @property --kds-font-base-title-medium-strong {
2784
2796
  syntax: "<string>";
2785
2797
  inherits: true;
2786
- initial-value: 700 14px/1 Roboto, sans-serif;
2798
+ initial-value: 700 14px/1.3 Roboto, sans-serif;
2787
2799
  }
2788
2800
 
2789
2801
  @property --kds-font-base-title-large {
2790
2802
  syntax: "<string>";
2791
2803
  inherits: true;
2792
- initial-value: 500 16px/1 Roboto, sans-serif;
2804
+ initial-value: 500 16px/1.3 Roboto, sans-serif;
2793
2805
  }
2794
2806
 
2795
2807
  @property --kds-font-base-title-large-strong {
2796
2808
  syntax: "<string>";
2797
2809
  inherits: true;
2798
- initial-value: 700 16px/1 Roboto, sans-serif;
2810
+ initial-value: 700 16px/1.3 Roboto, sans-serif;
2799
2811
  }
2800
2812
 
2801
2813
  @property --kds-font-base-body-small {
@@ -2831,7 +2843,7 @@ syntax: "<string>";
2831
2843
  @property --kds-font-base-body-large {
2832
2844
  syntax: "<string>";
2833
2845
  inherits: true;
2834
- initial-value: 400 16px/1.3 Roboto, sans-serif;
2846
+ initial-value: 400 16px/1.5 Roboto, sans-serif;
2835
2847
  }
2836
2848
 
2837
2849
  @property --kds-font-base-body-xlarge {
@@ -2843,7 +2855,7 @@ syntax: "<string>";
2843
2855
  @property --kds-font-base-subtext-xsmall {
2844
2856
  syntax: "<string>";
2845
2857
  inherits: true;
2846
- initial-value: 400 9px Roboto, sans-serif;
2858
+ initial-value: 400 9px/1.3 Roboto, sans-serif;
2847
2859
  }
2848
2860
 
2849
2861
  @property --kds-font-base-subtext-small {
@@ -2861,55 +2873,55 @@ syntax: "<string>";
2861
2873
  @property --kds-font-base-interactive-xsmall-strong {
2862
2874
  syntax: "<string>";
2863
2875
  inherits: true;
2864
- initial-value: 500 11px/1 Roboto, sans-serif;
2876
+ initial-value: 500 11px/1.3 Roboto, sans-serif;
2865
2877
  }
2866
2878
 
2867
2879
  @property --kds-font-base-interactive-small {
2868
2880
  syntax: "<string>";
2869
2881
  inherits: true;
2870
- initial-value: 400 12px/1 Roboto, sans-serif;
2882
+ initial-value: 400 12px/1.3 Roboto, sans-serif;
2871
2883
  }
2872
2884
 
2873
2885
  @property --kds-font-base-interactive-small-italic {
2874
2886
  syntax: "<string>";
2875
2887
  inherits: true;
2876
- initial-value: italic 400 12px/1 Roboto, sans-serif;
2888
+ initial-value: italic 400 12px/1.3 Roboto, sans-serif;
2877
2889
  }
2878
2890
 
2879
2891
  @property --kds-font-base-interactive-small-strong {
2880
2892
  syntax: "<string>";
2881
2893
  inherits: true;
2882
- initial-value: 500 12px/1 Roboto, sans-serif;
2894
+ initial-value: 500 12px/1.3 Roboto, sans-serif;
2883
2895
  }
2884
2896
 
2885
2897
  @property --kds-font-base-interactive-medium {
2886
2898
  syntax: "<string>";
2887
2899
  inherits: true;
2888
- initial-value: 400 14px/1 Roboto, sans-serif;
2900
+ initial-value: 400 14px/1.3 Roboto, sans-serif;
2889
2901
  }
2890
2902
 
2891
2903
  @property --kds-font-base-interactive-medium-strong {
2892
2904
  syntax: "<string>";
2893
2905
  inherits: true;
2894
- initial-value: 500 14px/1 Roboto, sans-serif;
2906
+ initial-value: 500 14px/1.3 Roboto, sans-serif;
2895
2907
  }
2896
2908
 
2897
2909
  @property --kds-font-base-interactive-large {
2898
2910
  syntax: "<string>";
2899
2911
  inherits: true;
2900
- initial-value: 400 16px/1 Roboto, sans-serif;
2912
+ initial-value: 400 16px/1.3 Roboto, sans-serif;
2901
2913
  }
2902
2914
 
2903
2915
  @property --kds-font-base-interactive-large-strong {
2904
2916
  syntax: "<string>";
2905
2917
  inherits: true;
2906
- initial-value: 500 16px/1 Roboto, sans-serif;
2918
+ initial-value: 500 16px/1.3 Roboto, sans-serif;
2907
2919
  }
2908
2920
 
2909
2921
  @property --kds-font-base-code-xsmall {
2910
2922
  syntax: "<string>";
2911
2923
  inherits: true;
2912
- initial-value: 400 10px/1 'Roboto Mono', monospace;
2924
+ initial-value: 400 10px/1.3 'Roboto Mono', monospace;
2913
2925
  }
2914
2926
 
2915
2927
  @property --kds-font-base-code-small {
package/dist/tokens/css/_variables-legacy.css CHANGED
@@ -26,8 +26,8 @@
26
26
  --kds-color-background-selected-bold-hover: hsl(0 0% 16%);
27
27
  --kds-color-background-selected-bold-active: hsl(0 0% 13%);
28
28
  --kds-color-background-danger-initial: hsl(0 100% 97%);
29
- --kds-color-background-danger-hover: hsl(3 100% 86%);
30
- --kds-color-background-danger-active: hsl(4 100% 80%);
29
+ --kds-color-background-danger-hover: hsl(2 100% 92%);
30
+ --kds-color-background-danger-active: hsl(3 100% 86%);
31
31
  --kds-color-background-danger-bold-initial: hsl(349 91% 35%);
32
32
  --kds-color-background-danger-bold-hover: hsl(348 97% 27%);
33
33
  --kds-color-background-danger-bold-active: hsl(348 94% 21%);
@@ -189,6 +189,7 @@
189
189
  --kds-border-resize-handle-initial: 2px solid hsl(345 0% 10% / 0.4);
190
190
  --kds-border-resize-handle-hover: 2px solid hsl(345 0% 10% / 0.64);
191
191
  --kds-border-resize-handle-active: 2px solid hsl(345 0% 10% / 0.74);
192
+ --kds-border-color-picker-handle-initial: 2px solid hsl(0 0% 99%);
192
193
  --kds-elevation-level-0: 0 0 0 0 hsl(330 0% 73% / 0.32);
193
194
  --kds-elevation-level-1: 0 1px 1px 0 hsl(330 0% 73% / 0.32), 0 0 1px 0 hsl(330 0% 32% / 0.14), 0 0 8px 0 hsl(330 0% 32% / 0.12);
194
195
  --kds-elevation-level-3: 0 2px 4px 0 hsl(330 0% 73% / 0.32), 0 4px 8px 0 hsl(330 0% 32% / 0.14), 0 0 20px 0 hsl(330 0% 32% / 0.12);
package/dist/tokens/css/_variables.css CHANGED
@@ -194,8 +194,7 @@
194
194
  --kds-core-font-weight-strong: 700;
195
195
  --kds-core-font-weight-strong-italic-weight: 700;
196
196
  --kds-core-font-weight-strong-italic-style: italic;
197
- --kds-core-line-height-singleline: 1;
198
- --kds-core-line-height-multiline-narrow: 1.3;
197
+ --kds-core-line-height-singleline: 1.3;
199
198
  --kds-core-line-height-multiline-wide: 1.5;
200
199
  --kds-core-size-scale: 16px;
201
200
  --kds-core-border-width-none: 0;
@@ -226,8 +225,8 @@
226
225
  --kds-color-background-selected-bold-hover: light-dark(hsl(176 67% 22%), hsl(174 48% 31%));
227
226
  --kds-color-background-selected-bold-active: light-dark(hsl(177 82% 18%), hsl(172 27% 48%));
228
227
  --kds-color-background-danger-initial: light-dark(hsl(0 100% 97%), hsl(356.66 65.093% 15.235%));
229
- --kds-color-background-danger-hover: light-dark(hsl(3 100% 86%), hsl(349 91% 35% / 0.72));
230
- --kds-color-background-danger-active: light-dark(hsl(4 100% 80%), hsl(353 75% 45% / 0.72));
228
+ --kds-color-background-danger-hover: light-dark(hsl(2 100% 92%), hsl(349 91% 35% / 0.72));
229
+ --kds-color-background-danger-active: light-dark(hsl(3 100% 86%), hsl(353 75% 45% / 0.72));
231
230
  --kds-color-background-danger-bold-initial: light-dark(hsl(349 91% 35%), hsl(348 97% 27%));
232
231
  --kds-color-background-danger-bold-hover: light-dark(hsl(348 97% 27%), hsl(353 75% 45% / 0.8));
233
232
  --kds-color-background-danger-bold-active: light-dark(hsl(348 94% 21%), hsl(356 77% 54% / 0.8));
@@ -404,6 +403,7 @@
404
403
  --kds-border-resize-handle-initial: 2px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.4));
405
404
  --kds-border-resize-handle-hover: 2px solid light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
406
405
  --kds-border-resize-handle-active: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
406
+ --kds-border-color-picker-handle-initial: 2px solid hsl(0 0% 99%);
407
407
  --kds-sizing-viewport-breakpoints-576: 576px;
408
408
  --kds-sizing-viewport-breakpoints-768: 768px;
409
409
  --kds-sizing-viewport-breakpoints-1024: 1024px;
@@ -429,6 +429,7 @@
429
429
  --kds-spacing-offset-focus: 1px;
430
430
  --kds-spacing-input-label-spacing-bottom: 6px;
431
431
  --kds-spacing-sub-text-spacing-top: 4px;
432
+ --kds-dimension-component-height-0-125x: 2px;
432
433
  --kds-dimension-component-height-0-25x: 4px;
433
434
  --kds-dimension-component-height-0-75x: 12px;
434
435
  --kds-dimension-component-height-0-88x: 14px;
@@ -439,6 +440,7 @@
439
440
  --kds-dimension-component-height-2-25x: 36px;
440
441
  --kds-dimension-component-height-2-5x: 40px;
441
442
  --kds-dimension-component-height-4x: 64px;
443
+ --kds-dimension-component-width-0-125x: 2px;
442
444
  --kds-dimension-component-width-0-25x: 4px;
443
445
  --kds-dimension-component-width-0-75x: 12px;
444
446
  --kds-dimension-component-width-0-88x: 14px;
@@ -448,8 +450,8 @@
448
450
  --kds-dimension-component-width-1-75x: 28px;
449
451
  --kds-dimension-component-width-2-25x: 36px;
450
452
  --kds-dimension-component-width-4x: 64px;
451
- --kds-dimension-component-width-25x: 400px;
452
453
  --kds-dimension-component-width-16x: 256px;
454
+ --kds-dimension-component-width-25x: 400px;
453
455
  --kds-dimension-component-width-32x: 512px;
454
456
  --kds-dimension-component-width-45x: 720px;
455
457
  --kds-dimension-component-width-61x: 976px;
@@ -462,32 +464,32 @@
462
464
  --kds-font-base-display-medium: 700 24px/1.3 Roboto, sans-serif;
463
465
  --kds-font-base-display-large: 700 32px/1.3 Roboto, sans-serif;
464
466
  --kds-font-base-display-xlarge: 700 40px/1.3 Roboto, sans-serif;
465
- --kds-font-base-title-xsmall: 500 10px/1 Roboto, sans-serif;
466
- --kds-font-base-title-small: 500 12px/1 Roboto, sans-serif;
467
- --kds-font-base-title-small-strong: 700 12px/1 Roboto, sans-serif;
468
- --kds-font-base-title-medium: 500 14px/1 Roboto, sans-serif;
469
- --kds-font-base-title-medium-strong: 700 14px/1 Roboto, sans-serif;
470
- --kds-font-base-title-large: 500 16px/1 Roboto, sans-serif;
471
- --kds-font-base-title-large-strong: 700 16px/1 Roboto, sans-serif;
467
+ --kds-font-base-title-xsmall: 500 10px/1.3 Roboto, sans-serif;
468
+ --kds-font-base-title-small: 500 12px/1.3 Roboto, sans-serif;
469
+ --kds-font-base-title-small-strong: 700 12px/1.3 Roboto, sans-serif;
470
+ --kds-font-base-title-medium: 500 14px/1.3 Roboto, sans-serif;
471
+ --kds-font-base-title-medium-strong: 700 14px/1.3 Roboto, sans-serif;
472
+ --kds-font-base-title-large: 500 16px/1.3 Roboto, sans-serif;
473
+ --kds-font-base-title-large-strong: 700 16px/1.3 Roboto, sans-serif;
472
474
  --kds-font-base-body-small: 400 12px/1.5 Roboto, sans-serif;
473
475
  --kds-font-base-body-small-italic: italic 400 12px/1.5 Roboto, sans-serif;
474
476
  --kds-font-base-body-small-strong: 700 12px/1.5 Roboto, sans-serif;
475
477
  --kds-font-base-body-small-strong-italic: italic 700 12px/1.5 Roboto, sans-serif;
476
478
  --kds-font-base-body-medium: 400 14px/1.5 Roboto, sans-serif;
477
- --kds-font-base-body-large: 400 16px/1.3 Roboto, sans-serif;
479
+ --kds-font-base-body-large: 400 16px/1.5 Roboto, sans-serif;
478
480
  --kds-font-base-body-xlarge: 400 20px/1.5 Roboto, sans-serif;
479
- --kds-font-base-subtext-xsmall: 400 9px Roboto, sans-serif;
481
+ --kds-font-base-subtext-xsmall: 400 9px/1.3 Roboto, sans-serif;
480
482
  --kds-font-base-subtext-small: 400 10px/1.3 Roboto, sans-serif;
481
483
  --kds-font-base-subtext-medium: 400 12px/1.3 Roboto, sans-serif;
482
- --kds-font-base-interactive-xsmall-strong: 500 11px/1 Roboto, sans-serif;
483
- --kds-font-base-interactive-small: 400 12px/1 Roboto, sans-serif;
484
- --kds-font-base-interactive-small-italic: italic 400 12px/1 Roboto, sans-serif;
485
- --kds-font-base-interactive-small-strong: 500 12px/1 Roboto, sans-serif;
486
- --kds-font-base-interactive-medium: 400 14px/1 Roboto, sans-serif;
487
- --kds-font-base-interactive-medium-strong: 500 14px/1 Roboto, sans-serif;
488
- --kds-font-base-interactive-large: 400 16px/1 Roboto, sans-serif;
489
- --kds-font-base-interactive-large-strong: 500 16px/1 Roboto, sans-serif;
490
- --kds-font-base-code-xsmall: 400 10px/1 'Roboto Mono', monospace;
484
+ --kds-font-base-interactive-xsmall-strong: 500 11px/1.3 Roboto, sans-serif;
485
+ --kds-font-base-interactive-small: 400 12px/1.3 Roboto, sans-serif;
486
+ --kds-font-base-interactive-small-italic: italic 400 12px/1.3 Roboto, sans-serif;
487
+ --kds-font-base-interactive-small-strong: 500 12px/1.3 Roboto, sans-serif;
488
+ --kds-font-base-interactive-medium: 400 14px/1.3 Roboto, sans-serif;
489
+ --kds-font-base-interactive-medium-strong: 500 14px/1.3 Roboto, sans-serif;
490
+ --kds-font-base-interactive-large: 400 16px/1.3 Roboto, sans-serif;
491
+ --kds-font-base-interactive-large-strong: 500 16px/1.3 Roboto, sans-serif;
492
+ --kds-font-base-code-xsmall: 400 10px/1.3 'Roboto Mono', monospace;
491
493
  --kds-font-base-code-small: 400 11px/1.3 'Roboto Mono', monospace;
492
494
  --kds-font-workflow-annotation-headline-h1: 700 36px/1.5 'Roboto Condensed', sans-serif;
493
495
  --kds-font-workflow-annotation-headline-h2: 700 30px/1.5 'Roboto Condensed', sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knime/kds-styles",
3
- "version": "0.6.6",
3
+ "version": "0.7.0",
4
4
  "description": "Package containing the design tokens and icons for the KNIME Design System",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,11 +17,11 @@
17
17
  "modern-normalize": "3.0.1"
18
18
  },
19
19
  "devDependencies": {
20
- "@tokens-studio/sd-transforms": "^2.0.1",
20
+ "@tokens-studio/sd-transforms": "^2.0.3",
21
21
  "@types/jsdom": "^21.1.7",
22
22
  "@types/node": "^25.0.10",
23
23
  "consola": "^3.4.2",
24
- "jsdom": "^27.0.0",
24
+ "jsdom": "^28.0.0",
25
25
  "style-dictionary": "^5.2.0",
26
26
  "svgo": "^4.0.0",
27
27
  "typescript": "^5.9.3"