@7shifts/sous-chef 3.87.0-beta.0 → 3.87.0-beta.2

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.
@@ -69,6 +69,7 @@ export declare const COLORS: {
69
69
  readonly 'neutral-on-container-variant': "var(--color-neutral-on-container-variant)";
70
70
  readonly 'neutral-black-transparent-05': "var(--color-neutral-black-transparent-05)";
71
71
  readonly 'neutral-black-transparent-10': "var(--color-neutral-black-transparent-10)";
72
+ readonly 'neutral-black-transparent-15': "var(--color-neutral-black-transparent-15)";
72
73
  readonly 'neutral-black-transparent-20': "var(--color-neutral-black-transparent-20)";
73
74
  readonly 'neutral-black-transparent-30': "var(--color-neutral-black-transparent-30)";
74
75
  readonly 'neutral-black-transparent-40': "var(--color-neutral-black-transparent-40)";
@@ -79,6 +80,7 @@ export declare const COLORS: {
79
80
  readonly 'neutral-black-transparent-90': "var(--color-neutral-black-transparent-90)";
80
81
  readonly 'neutral-white-transparent-05': "var(--color-neutral-white-transparent-05)";
81
82
  readonly 'neutral-white-transparent-10': "var(--color-neutral-white-transparent-10)";
83
+ readonly 'neutral-white-transparent-15': "var(--color-neutral-white-transparent-15)";
82
84
  readonly 'neutral-white-transparent-20': "var(--color-neutral-white-transparent-20)";
83
85
  readonly 'neutral-white-transparent-30': "var(--color-neutral-white-transparent-30)";
84
86
  readonly 'neutral-white-transparent-40': "var(--color-neutral-white-transparent-40)";
@@ -160,6 +162,9 @@ export declare const COLORS: {
160
162
  readonly 'warning-on-container-variant': "var(--color-warning-on-container-variant)";
161
163
  readonly 'shadow-overlay': "var(--color-shadow-overlay)";
162
164
  readonly 'shadow-active': "var(--color-shadow-active)";
165
+ readonly 'hover-inverse': "var(--color-hover-inverse)";
166
+ readonly 'hover-lighten': "var(--color-hover-lighten)";
167
+ readonly 'hover-darken': "var(--color-hover-darken)";
163
168
  readonly 'brand-neutrals-caviar-dynamic': "var(--color-brand-neutrals-caviar-dynamic)";
164
169
  readonly 'brand-neutrals-chefscoat-dynamic': "var(--color-brand-neutrals-chefscoat-dynamic)";
165
170
  };
@@ -1 +1 @@
1
- export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic';
1
+ export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic';
package/dist/index.css CHANGED
@@ -177,6 +177,7 @@
177
177
  --color-neutral-on-container-variant: #383430;
178
178
  --color-neutral-black-transparent-05: rgba(var(--color-black-rgb), 0.05);
179
179
  --color-neutral-black-transparent-10: rgba(var(--color-black-rgb), 0.1);
180
+ --color-neutral-black-transparent-15: rgba(var(--color-black-rgb), 0.15);
180
181
  --color-neutral-black-transparent-20: rgba(var(--color-black-rgb), 0.2);
181
182
  --color-neutral-black-transparent-30: rgba(var(--color-black-rgb), 0.3);
182
183
  --color-neutral-black-transparent-40: rgba(var(--color-black-rgb), 0.4);
@@ -187,6 +188,7 @@
187
188
  --color-neutral-black-transparent-90: rgba(var(--color-black-rgb), 0.9);
188
189
  --color-neutral-white-transparent-05: rgba(var(--color-white-rgb), 0.05);
189
190
  --color-neutral-white-transparent-10: rgba(var(--color-white-rgb), 0.1);
191
+ --color-neutral-white-transparent-15: rgba(var(--color-white-rgb), 0.15);
190
192
  --color-neutral-white-transparent-20: rgba(var(--color-white-rgb), 0.2);
191
193
  --color-neutral-white-transparent-30: rgba(var(--color-white-rgb), 0.3);
192
194
  --color-neutral-white-transparent-40: rgba(var(--color-white-rgb), 0.4);
@@ -268,6 +270,9 @@
268
270
  --color-warning-on-container-variant: #765f2c;
269
271
  --color-shadow-overlay: var(--color-neutral-black-transparent-20);
270
272
  --color-shadow-active: #4570ff;
273
+ --color-hover-inverse: var(--color-neutral-white-transparent-05);
274
+ --color-hover-lighten: var(--color-neutral-white-transparent-20);
275
+ --color-hover-darken: var(--color-neutral-black-transparent-05);
271
276
  --color-brand-neutrals-caviar-dynamic: #000;
272
277
  --color-brand-neutrals-chefscoat-dynamic: #fff;
273
278
  }
@@ -289,7 +294,7 @@
289
294
  --color-surface-inverse: #f3f3f3;
290
295
  --color-surface-on-inverse: #323232;
291
296
  --color-surface-on-inverse-disabled: var(--color-neutral-black-transparent-50);
292
- --color-outline: var(--color-neutral-white-transparent-10);
297
+ --color-outline: var(--color-neutral-white-transparent-15);
293
298
  --color-outline-variant: #464646;
294
299
  --color-outline-inverse: #323232;
295
300
  --color-primary-color: #4570ff;
@@ -352,6 +357,9 @@
352
357
  --color-neutral-on-container-variant: #c7c0b2;
353
358
  --color-shadow-overlay: var(--color-neutral-black-transparent-40);
354
359
  --color-shadow-active: #4570ff;
360
+ --color-hover-inverse: var(--color-neutral-black-transparent-05);
361
+ --color-hover-lighten: var(--color-neutral-black-transparent-20);
362
+ --color-hover-darken: var(--color-neutral-white-transparent-05);
355
363
  --color-brand-neutrals-caviar-dynamic: #fff;
356
364
  --color-brand-neutrals-chefscoat-dynamic: #000;
357
365
  }
@@ -763,8 +771,7 @@ Just for future references:
763
771
  color: var(--color-surface-on-color-bold);
764
772
  }
765
773
  ._ICNz7:hover {
766
- border-color: var(--color-outline-variant);
767
- background: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
774
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
768
775
  color: var(--color-surface-on-color-bold);
769
776
  }
770
777
  ._ICNz7:disabled {
@@ -784,8 +791,7 @@ Just for future references:
784
791
  color: var(--color-primary-on-color);
785
792
  }
786
793
  ._XwJWT:hover {
787
- border-color: color-mix(in srgb, var(--color-primary-color) 100%, var(--color-surface-container) 25%);
788
- background: color-mix(in srgb, var(--color-primary-color) 100%, var(--color-surface-container) 25%);
794
+ background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-primary-color);
789
795
  color: var(--color-primary-on-color);
790
796
  }
791
797
  ._XwJWT:disabled {
@@ -805,8 +811,7 @@ Just for future references:
805
811
  color: var(--color-danger-on-color);
806
812
  }
807
813
  ._gr3Dh:hover {
808
- border-color: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-container) 25%);
809
- background: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-container) 25%);
814
+ background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-danger-color);
810
815
  color: var(--color-danger-on-color);
811
816
  }
812
817
  ._gr3Dh:disabled {
@@ -826,8 +831,7 @@ Just for future references:
826
831
  color: var(--color-upsell-on-color-variant);
827
832
  }
828
833
  ._ME8te:hover {
829
- border-color: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-container) 25%);
830
- background: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-container) 25%);
834
+ background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-upsell-color-variant);
831
835
  color: var(--color-upsell-on-color-variant);
832
836
  }
833
837
  ._ME8te:disabled {
@@ -847,8 +851,7 @@ Just for future references:
847
851
  color: var(--color-secondary-on-color);
848
852
  }
849
853
  ._mI-Dx:hover {
850
- border-color: color-mix(in srgb, var(--color-secondary-color) 100%, var(--color-surface-container) 25%);
851
- background: color-mix(in srgb, var(--color-secondary-color) 100%, var(--color-surface-container) 25%);
854
+ background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-secondary-color);
852
855
  color: var(--color-secondary-on-color);
853
856
  }
854
857
  ._mI-Dx:disabled {
@@ -868,8 +871,7 @@ Just for future references:
868
871
  color: var(--color-surface-on-color-bold);
869
872
  }
870
873
  ._orywo:hover {
871
- border-color: var(--color-outline-variant);
872
- background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
874
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
873
875
  color: var(--color-surface-on-color-bold);
874
876
  }
875
877
  ._orywo:disabled {
@@ -889,8 +891,7 @@ Just for future references:
889
891
  color: var(--color-surface-on-inverse);
890
892
  }
891
893
  ._obtsl:hover {
892
- border-color: var(--color-outline-inverse);
893
- background: color-mix(in srgb, transparent 100%, var(--color-surface-container) 10%);
894
+ background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), transparent;
894
895
  color: var(--color-surface-on-inverse);
895
896
  }
896
897
  ._obtsl:disabled {
@@ -911,8 +912,7 @@ Just for future references:
911
912
  text-decoration: underline;
912
913
  }
913
914
  ._00jK4:hover {
914
- border-color: transparent;
915
- background: color-mix(in srgb, transparent 100%, var(--color-surface-container) 10%);
915
+ background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), transparent;
916
916
  color: var(--color-surface-on-inverse);
917
917
  text-decoration: underline;
918
918
  }
@@ -937,8 +937,7 @@ Just for future references:
937
937
  text-decoration: underline;
938
938
  }
939
939
  ._JPwJ7:hover {
940
- border-color: transparent;
941
- background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
940
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
942
941
  color: var(--color-surface-on-color-bold);
943
942
  text-decoration: underline;
944
943
  }
@@ -963,8 +962,7 @@ Just for future references:
963
962
  text-decoration: underline;
964
963
  }
965
964
  ._9TprN:hover {
966
- border-color: transparent;
967
- background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
965
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
968
966
  color: var(--color-danger-color);
969
967
  text-decoration: underline;
970
968
  }
@@ -989,8 +987,7 @@ Just for future references:
989
987
  text-decoration: underline;
990
988
  }
991
989
  ._tktX-:hover {
992
- border-color: transparent;
993
- background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
990
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
994
991
  color: var(--color-upsell-color);
995
992
  text-decoration: underline;
996
993
  }
@@ -1015,8 +1012,7 @@ Just for future references:
1015
1012
  text-decoration: underline;
1016
1013
  }
1017
1014
  ._r3SQl:hover {
1018
- border-color: transparent;
1019
- background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
1015
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
1020
1016
  color: var(--color-surface-on-color-bold);
1021
1017
  text-decoration: underline;
1022
1018
  }
@@ -1041,8 +1037,7 @@ Just for future references:
1041
1037
  text-decoration: underline;
1042
1038
  }
1043
1039
  ._oFBLN:hover {
1044
- border-color: transparent;
1045
- background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
1040
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
1046
1041
  color: var(--color-surface-on-color-subtle);
1047
1042
  text-decoration: underline;
1048
1043
  }
@@ -1393,7 +1388,7 @@ h5._6SgoN {
1393
1388
  padding: 0;
1394
1389
  }
1395
1390
  ._aMs9c {
1396
- background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
1391
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
1397
1392
  }
1398
1393
  ._ISJ4M {
1399
1394
  width: 100%;
@@ -1491,7 +1486,7 @@ h5._6SgoN {
1491
1486
  text-align: inherit;
1492
1487
  }
1493
1488
  ._uc-GV:not(._ft0I1):hover {
1494
- background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
1489
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
1495
1490
  }
1496
1491
  ._uc-GV:focus {
1497
1492
  box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -1555,8 +1550,7 @@ h5._6SgoN {
1555
1550
  border: 1px solid transparent;
1556
1551
  }
1557
1552
  ._fo7-A:hover {
1558
- background: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
1559
- border-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
1553
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
1560
1554
  text-decoration: none;
1561
1555
  }
1562
1556
  ._fo7-A:focus {
@@ -1879,8 +1873,9 @@ h5._6SgoN {
1879
1873
  }
1880
1874
 
1881
1875
  ._X7MoW:not(._AeJUw) {
1882
- color: var(--color-primary-on-container-variant);
1883
- font-weight: 700;
1876
+ color: var(--color-primary-color);
1877
+ font-weight: var(--p-font-weight-bold);
1878
+ text-decoration: underline;
1884
1879
  }
1885
1880
 
1886
1881
  ._AeJUw._AeJUw {
@@ -1962,8 +1957,9 @@ h5._6SgoN {
1962
1957
  }
1963
1958
 
1964
1959
  ._Snv-V:not(._Zf-6C) {
1965
- color: var(--color-primary-on-container-variant);
1966
- font-weight: 700;
1960
+ color: var(--color-primary-color);
1961
+ font-weight: var(--p-font-weight-bold);
1962
+ text-decoration: underline;
1967
1963
  }
1968
1964
 
1969
1965
  ._Zf-6C._Zf-6C {
@@ -2258,7 +2254,7 @@ input:disabled + ._kmvBP::after {
2258
2254
  font-size: var(--font-size-200);
2259
2255
  line-height: var(--font-line-height-200);
2260
2256
  font-weight: var(--p-font-weight-normal);
2261
- border: 1px solid var(--color-outline);
2257
+ border: 1px solid var(--color-outline-variant);
2262
2258
  border-radius: var(--border-radius-600);
2263
2259
  }
2264
2260
  ._1SNLz tr:first-of-type > td:first-of-type {
@@ -2290,10 +2286,10 @@ input:disabled + ._kmvBP::after {
2290
2286
  background: var(--color-surface-container-high);
2291
2287
  }
2292
2288
  ._mp1Ok tr td:first-of-type {
2293
- border-left: 1px solid var(--color-outline);
2289
+ border-left: 1px solid var(--color-outline-variant);
2294
2290
  }
2295
2291
  ._mp1Ok tr td:last-of-type {
2296
- border-right: 1px solid var(--color-outline);
2292
+ border-right: 1px solid var(--color-outline-variant);
2297
2293
  }
2298
2294
  ._mp1Ok tr:first-of-type td {
2299
2295
  border-top: 0;
@@ -2310,7 +2306,7 @@ input:disabled + ._kmvBP::after {
2310
2306
  ._wZ8Xg {
2311
2307
  width: 100%;
2312
2308
  height: 20px;
2313
- border: 1px solid var(--color-outline);
2309
+ border: 1px solid var(--color-outline-variant);
2314
2310
  box-sizing: border-box;
2315
2311
  position: absolute;
2316
2312
  z-index: var(--z-index-base);
@@ -2711,7 +2707,7 @@ input:disabled + ._kmvBP::after {
2711
2707
  border-radius: 50%;
2712
2708
  }
2713
2709
  ._hhDnr:first-of-type > td {
2714
- border-top: 1px solid var(--color-outline);
2710
+ border-top: 1px solid var(--color-outline-variant);
2715
2711
  }
2716
2712
  ._hhDnr:focus:not(:focus-visible) {
2717
2713
  /* Remove the focus indicator on mouse-focus for browsers
@@ -2722,7 +2718,7 @@ input:disabled + ._kmvBP::after {
2722
2718
  cursor: pointer;
2723
2719
  }
2724
2720
  ._ej5Ke:not(._qDTAh):hover td {
2725
- background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
2721
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
2726
2722
  }
2727
2723
  ._qDTAh td {
2728
2724
  background-color: var(--color-primary-container-variant);
@@ -2735,7 +2731,7 @@ input:disabled + ._kmvBP::after {
2735
2731
  }
2736
2732
  ._cp8xi {
2737
2733
  position: relative;
2738
- border-bottom: 1px solid var(--color-outline);
2734
+ border-bottom: 1px solid var(--color-outline-variant);
2739
2735
  padding: 16px;
2740
2736
  word-break: break-word;
2741
2737
  -webkit-hyphens: auto;
@@ -2743,16 +2739,16 @@ input:disabled + ._kmvBP::after {
2743
2739
  background: var(--color-surface-color);
2744
2740
  }
2745
2741
  ._cp8xi:first-of-type {
2746
- border-left: 1px solid var(--color-outline);
2742
+ border-left: 1px solid var(--color-outline-variant);
2747
2743
  }
2748
2744
  ._cp8xi:last-of-type {
2749
- border-right: 1px solid var(--color-outline);
2745
+ border-right: 1px solid var(--color-outline-variant);
2750
2746
  }
2751
2747
  ._gqbNb {
2752
2748
  padding: 0;
2753
2749
  }
2754
2750
  ._uHjkg:not(:last-child) {
2755
- border-right: 1px solid var(--color-outline);
2751
+ border-right: 1px solid var(--color-outline-variant);
2756
2752
  }
2757
2753
  ._ASOQd {
2758
2754
  background: var(--color-danger-container-variant);
@@ -2810,7 +2806,7 @@ input:disabled + ._kmvBP::after {
2810
2806
  z-index: var(--z-index-base);
2811
2807
  }
2812
2808
  ._jp9-G input:hover {
2813
- background: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
2809
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
2814
2810
  }
2815
2811
  ._BzPeH {
2816
2812
  text-align: right;
@@ -2880,7 +2876,7 @@ input:disabled + ._kmvBP::after {
2880
2876
  right: 0;
2881
2877
  }
2882
2878
  ._7dAEd._rR4W3 table tr > td:first-of-type {
2883
- border-right: 4px solid var(--color-outline);
2879
+ border-right: 4px solid var(--color-outline-variant);
2884
2880
  }
2885
2881
  ._qLE4I table thead tr th:first-of-type {
2886
2882
  position: sticky;
@@ -2924,7 +2920,7 @@ input:disabled + ._kmvBP::after {
2924
2920
  left: 0;
2925
2921
  }
2926
2922
  ._B92Ir._rR4W3 table tr > td:last-of-type {
2927
- border-left: 4px solid var(--color-outline);
2923
+ border-left: 4px solid var(--color-outline-variant);
2928
2924
  }
2929
2925
  ._ONjpl table thead tr th:last-of-type {
2930
2926
  position: sticky;
@@ -3021,7 +3017,7 @@ input:disabled + ._kmvBP::after {
3021
3017
  box-sizing: border-box;
3022
3018
  }
3023
3019
  ._k704p {
3024
- border: 1px solid rgba(var(--color-black-rgb), 0);
3020
+ border: 1px solid var(--color-outline-variant);
3025
3021
  border-right: 0;
3026
3022
  border-bottom-left-radius: var(--border-radius-600);
3027
3023
  border-top-left-radius: var(--border-radius-600);
@@ -3055,7 +3051,7 @@ input:disabled + ._kmvBP::after {
3055
3051
  box-shadow: -6px 6px 0 0 var(--corner-background-color);
3056
3052
  }
3057
3053
  ._wOust {
3058
- border: 1px solid rgba(var(--color-black-rgb), 0);
3054
+ border: 1px solid var(--color-outline-variant);
3059
3055
  border-left: 0;
3060
3056
  border-bottom-right-radius: var(--border-radius-600);
3061
3057
  border-top-right-radius: var(--border-radius-600);
@@ -3239,7 +3235,7 @@ input:disabled + ._kmvBP::after {
3239
3235
  transition: all ease-in-out 150ms;
3240
3236
  }
3241
3237
  ._G-7Pi:hover {
3242
- background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
3238
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
3243
3239
  }
3244
3240
  ._G-7Pi:focus {
3245
3241
  box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -3294,7 +3290,7 @@ input:disabled + ._kmvBP::after {
3294
3290
  cursor: pointer;
3295
3291
  }
3296
3292
  ._N37zE:not(._42Bvz):hover {
3297
- background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
3293
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
3298
3294
  }
3299
3295
  ._N37zE:not(._42Bvz):focus {
3300
3296
  box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -3314,7 +3310,7 @@ input:disabled + ._kmvBP::after {
3314
3310
  cursor: pointer;
3315
3311
  }
3316
3312
  ._9wFtw:hover {
3317
- background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
3313
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
3318
3314
  }
3319
3315
  ._9wFtw:focus {
3320
3316
  box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -3332,7 +3328,12 @@ input:disabled + ._kmvBP::after {
3332
3328
  border-left: 0;
3333
3329
  }
3334
3330
  ._RezMY {
3335
- display: flex;
3331
+ display: inline-flex;
3332
+ gap: 2px;
3333
+ background-color: var(--color-surface-container-high);
3334
+ border: 1px solid var(--color-outline);
3335
+ border-radius: var(--border-radius-400);
3336
+ padding: 2px;
3336
3337
  }
3337
3338
  ._lehFG {
3338
3339
  font-family: var(--font-family-body);
@@ -3343,84 +3344,25 @@ input:disabled + ._kmvBP::after {
3343
3344
  position: relative;
3344
3345
  background-color: transparent;
3345
3346
  color: var(--color-surface-on-color-bold);
3346
- border-style: solid;
3347
- border-color: var(--color-outline);
3348
- padding: 9px 12px;
3347
+ border: 0;
3348
+ border-radius: 6px;
3349
+ padding: 7px 12px;
3349
3350
  min-width: 38px;
3350
- height: 38px;
3351
+ height: 32px;
3351
3352
  cursor: pointer;
3352
3353
  display: inline-flex;
3353
3354
  }
3354
3355
  ._lehFG:not(._Fr5kb):hover {
3355
- background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
3356
- border-color: var(--color-outline);
3356
+ background-color: var(--color-surface-container-highest);
3357
3357
  }
3358
3358
  ._Fr5kb {
3359
- background-color: var(--color-surface-container-high);
3359
+ color: var(--color-surface-on-inverse);
3360
+ background-color: var(--color-surface-inverse);
3360
3361
  }
3361
3362
  ._lehFG:focus {
3362
- box-shadow: 0 0 8px 0 var(--color-shadow-active);
3363
3363
  outline: none;
3364
3364
  text-decoration: none;
3365
3365
  }
3366
- ._lehFG:first-child {
3367
- border-radius: var(--border-radius-400) 0 0 var(--border-radius-400);
3368
- border-width: 1px 0px 1px 1px;
3369
- }
3370
- ._lehFG:first-child:not(._Fr5kb):hover::after {
3371
- content: "";
3372
- height: 36px;
3373
- width: 1px;
3374
- background-color: var(--color-outline);
3375
- border-width: 1px 0px;
3376
- border-color: var(--color-outline);
3377
- border-style: solid;
3378
- position: absolute;
3379
- top: -1px;
3380
- right: -1px;
3381
- }
3382
- ._lehFG:not(:first-child):not(:last-child) {
3383
- border-radius: 0;
3384
- border-width: 1px 0px 1px 0px;
3385
- }
3386
- ._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::after, ._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::before {
3387
- content: "";
3388
- height: 36px;
3389
- width: 1px;
3390
- background-color: var(--color-outline);
3391
- border-width: 1px 0px;
3392
- border-color: var(--color-outline);
3393
- border-style: solid;
3394
- position: absolute;
3395
- top: -1px;
3396
- }
3397
- ._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::after {
3398
- right: -1px;
3399
- }
3400
- ._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::before {
3401
- left: -1px;
3402
- }
3403
- ._lehFG:last-child {
3404
- border-radius: 0 var(--border-radius-400) var(--border-radius-400) 0;
3405
- border-width: 1px 1px 1px 0px;
3406
- }
3407
- ._lehFG:last-child:not(._Fr5kb):hover::before {
3408
- content: "";
3409
- height: 36px;
3410
- width: 1px;
3411
- background-color: var(--color-outline);
3412
- border-width: 1px 0px;
3413
- border-color: var(--color-outline);
3414
- border-style: solid;
3415
- position: absolute;
3416
- top: -1px;
3417
- left: -1px;
3418
- }
3419
- ._GEqG9 {
3420
- height: 38px;
3421
- width: 1px;
3422
- background-color: var(--color-outline);
3423
- }
3424
3366
  ._8-Ykj {
3425
3367
  max-width: 500px;
3426
3368
  }
@@ -3546,8 +3488,8 @@ input:disabled + ._kmvBP::after {
3546
3488
  justify-content: center;
3547
3489
  background-color: var(--color-surface-container-high);
3548
3490
  padding: 8px 16px;
3549
- border: 1px solid var(--color-surface-container-high);
3550
3491
  border-radius: 25px;
3492
+ border: 0;
3551
3493
  min-height: 38px;
3552
3494
  min-width: 60px;
3553
3495
  text-align: center;
@@ -3565,7 +3507,7 @@ input:disabled + ._kmvBP::after {
3565
3507
  }
3566
3508
  ._ZxEwG {
3567
3509
  color: transparent;
3568
- border-color: var(--color-primary-color);
3510
+ border: 1px solid var(--color-primary-color);
3569
3511
  }
3570
3512
  ._Odw1V {
3571
3513
  padding: 0;
@@ -3582,25 +3524,19 @@ input:disabled + ._kmvBP::after {
3582
3524
  margin: -6px;
3583
3525
  }
3584
3526
  ._Yti6k:hover > input:not(:disabled) ~ ._JXakU, ._MsKVV:hover {
3585
- background-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
3586
- border-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
3527
+ background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container-high);
3587
3528
  cursor: pointer;
3588
3529
  }
3589
3530
  ._Yti6k:hover > input:not(:disabled):checked ~ ._JXakU {
3590
- background-color: color-mix(in srgb, var(--color-primary-container) 100%, var(--color-surface-inverse) 5%);
3591
- border-color: var(--color-primary-on-container);
3592
- color: var(--color-primary-on-container);
3593
- }
3594
- ._Yti6k:hover > input:not(:disabled):checked ~ ._JXakU ._Odw1V {
3595
- color: var(--color-primary-on-container);
3531
+ background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-surface-inverse);
3532
+ color: var(--color-surface-on-inverse);
3596
3533
  }
3597
3534
  input:checked ~ ._JXakU {
3598
- background-color: var(--color-primary-container);
3599
- border-color: var(--color-primary-on-container);
3600
- color: var(--color-primary-on-container);
3535
+ background-color: var(--color-surface-inverse);
3536
+ color: var(--color-surface-on-inverse);
3601
3537
  }
3602
3538
  input:checked ~ ._JXakU ._Odw1V {
3603
- color: var(--color-primary-on-container);
3539
+ color: var(--color-surface-on-inverse);
3604
3540
  }
3605
3541
  input:disabled + ._JXakU {
3606
3542
  background-color: var(--color-surface-container-disabled);
@@ -3611,12 +3547,9 @@ input:disabled + ._JXakU ._Odw1V {
3611
3547
  color: var(--color-surface-on-container-disabled);
3612
3548
  }
3613
3549
  input:disabled:checked + ._JXakU {
3614
- background-color: var(--color-primary-container);
3615
- border-color: var(--color-outline-variant);
3616
- color: var(--color-outline-variant);
3550
+ background-color: var(--color-surface-inverse);
3617
3551
  }
3618
3552
  input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
3619
- border: 1px solid var(--color-primary-color);
3620
3553
  box-shadow: 0 0 8px 0 var(--color-shadow-active);
3621
3554
  outline: none;
3622
3555
  }
@@ -4108,8 +4041,9 @@ input:disabled + ._Yfxkl::after {
4108
4041
  }
4109
4042
 
4110
4043
  ._lFzs7:not(._TjttB) {
4111
- color: var(--color-primary-on-container-variant);
4112
- font-weight: 700;
4044
+ color: var(--color-primary-color);
4045
+ font-weight: var(--p-font-weight-bold);
4046
+ text-decoration: underline;
4113
4047
  }
4114
4048
 
4115
4049
  ._TjttB._TjttB {