@seed-design/css 0.2.0 → 0.2.1

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 (41) hide show
  1. package/all.css +25 -34
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/action-button.d.ts +3 -3
  5. package/recipes/action-chip.d.ts +2 -2
  6. package/recipes/action-sheet-item.d.ts +1 -1
  7. package/recipes/app-bar-main.d.ts +4 -4
  8. package/recipes/app-bar.d.ts +3 -3
  9. package/recipes/app-screen.d.ts +4 -4
  10. package/recipes/avatar.d.ts +1 -1
  11. package/recipes/badge.d.ts +3 -3
  12. package/recipes/bottom-sheet.d.ts +1 -1
  13. package/recipes/callout.d.ts +1 -1
  14. package/recipes/checkbox.d.ts +3 -3
  15. package/recipes/chip-tabs.d.ts +2 -2
  16. package/recipes/chip.css +33 -33
  17. package/recipes/chip.d.ts +3 -3
  18. package/recipes/contextual-floating-button.d.ts +2 -2
  19. package/recipes/control-chip.d.ts +2 -2
  20. package/recipes/extended-action-sheet-item.d.ts +1 -1
  21. package/recipes/extended-fab.d.ts +2 -2
  22. package/recipes/identity-placeholder.d.ts +1 -1
  23. package/recipes/inline-banner.d.ts +1 -1
  24. package/recipes/link-content.d.ts +2 -2
  25. package/recipes/manner-temp-badge.d.ts +1 -1
  26. package/recipes/manner-temp.d.ts +1 -1
  27. package/recipes/menu-sheet-item.d.ts +2 -2
  28. package/recipes/notification-badge-positioner.d.ts +2 -2
  29. package/recipes/notification-badge.d.ts +1 -1
  30. package/recipes/page-banner.d.ts +2 -2
  31. package/recipes/progress-circle.d.ts +1 -1
  32. package/recipes/radio.d.ts +1 -1
  33. package/recipes/reaction-button.d.ts +1 -1
  34. package/recipes/skeleton.d.ts +1 -1
  35. package/recipes/snackbar.d.ts +1 -1
  36. package/recipes/tabs.d.ts +3 -3
  37. package/recipes/text-field.d.ts +1 -1
  38. package/recipes/text.d.ts +3 -3
  39. package/recipes/toggle-button.d.ts +2 -2
  40. package/vars/component/chip.d.ts +0 -91
  41. package/vars/component/chip.mjs +0 -91
package/all.css CHANGED
@@ -2831,14 +2831,9 @@
2831
2831
  cursor: not-allowed;
2832
2832
  }
2833
2833
 
2834
- .seed-chip__root {
2835
- --seed-icon-color: inherit;
2836
- }
2837
-
2838
2834
  .seed-chip__label {
2839
2835
  font-weight: var(--seed-font-weight-medium);
2840
2836
  padding-inline: var(--seed-dimension-x1_5);
2841
- color: inherit;
2842
2837
  justify-content: center;
2843
2838
  align-items: center;
2844
2839
  display: inline-flex;
@@ -2846,7 +2841,6 @@
2846
2841
 
2847
2842
  .seed-chip__prefixIcon {
2848
2843
  padding-left: var(--seed-dimension-x1_5);
2849
- --seed-icon-color: inherit;
2850
2844
  flex-shrink: 0;
2851
2845
  align-items: center;
2852
2846
  display: inline-flex;
@@ -2860,7 +2854,6 @@
2860
2854
 
2861
2855
  .seed-chip__suffixIcon {
2862
2856
  padding-right: var(--seed-dimension-x1_5);
2863
- --seed-icon-color: inherit;
2864
2857
  flex-shrink: 0;
2865
2858
  align-items: center;
2866
2859
  display: inline-flex;
@@ -2868,101 +2861,99 @@
2868
2861
 
2869
2862
  .seed-chip__root--variant_solid {
2870
2863
  background: var(--seed-color-bg-neutral-weak);
2871
- color: var(--seed-color-fg-neutral);
2864
+ --seed-icon-color: var(--seed-color-fg-neutral);
2872
2865
  }
2873
2866
 
2874
2867
  .seed-chip__root--variant_solid:is(:checked, [data-checked]) {
2875
2868
  box-shadow: none;
2876
2869
  background: var(--seed-color-bg-neutral-inverted);
2877
- color: var(--seed-color-fg-neutral-inverted);
2878
2870
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2879
2871
  }
2880
2872
 
2881
2873
  .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2882
2874
  background: var(--seed-color-bg-neutral-weak-pressed);
2883
- color: var(--seed-color-fg-neutral);
2884
- --seed-icon-color: var(--seed-color-fg-neutral);
2885
2875
  }
2886
2876
 
2887
2877
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2888
2878
  background: var(--seed-color-bg-neutral-inverted-pressed);
2889
- color: var(--seed-color-fg-neutral-inverted);
2890
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2891
2879
  }
2892
2880
 
2893
2881
  .seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
2894
2882
  opacity: .5;
2895
2883
  }
2896
2884
 
2897
- .seed-chip__root--variant_solid {
2898
- --seed-icon-color: var(--seed-color-fg-neutral);
2885
+ .seed-chip__label--variant_solid {
2886
+ color: var(--seed-color-fg-neutral);
2887
+ }
2888
+
2889
+ .seed-chip__label--variant_solid:is(:checked, [data-checked]) {
2890
+ color: var(--seed-color-fg-neutral-inverted);
2891
+ }
2892
+
2893
+ .seed-chip__prefixIcon--variant_solid, .seed-chip__suffixIcon--variant_solid {
2894
+ color: var(--seed-color-fg-neutral);
2899
2895
  }
2900
2896
 
2901
2897
  .seed-chip__root--variant_outlineStrong {
2902
2898
  background: var(--seed-color-bg-layer-default);
2903
2899
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
2904
- color: var(--seed-color-fg-neutral);
2900
+ --seed-icon-color: var(--seed-color-fg-neutral);
2905
2901
  }
2906
2902
 
2907
2903
  .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2908
2904
  background: var(--seed-color-bg-layer-default-pressed);
2909
- color: var(--seed-color-fg-neutral);
2910
- --seed-icon-color: var(--seed-color-fg-neutral);
2911
2905
  }
2912
2906
 
2913
2907
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
2914
2908
  background: var(--seed-color-bg-neutral-inverted);
2915
- color: var(--seed-color-fg-neutral-inverted);
2916
2909
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2917
2910
  }
2918
2911
 
2919
2912
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2920
2913
  background: var(--seed-color-bg-neutral-inverted-pressed);
2921
- color: var(--seed-color-fg-neutral-inverted);
2922
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2923
2914
  }
2924
2915
 
2925
2916
  .seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
2926
2917
  opacity: .5;
2927
2918
  }
2928
2919
 
2929
- .seed-chip__root--variant_outlineStrong {
2930
- --seed-icon-color: var(--seed-color-fg-neutral);
2920
+ .seed-chip__label--variant_outlineStrong {
2921
+ color: var(--seed-color-fg-neutral);
2922
+ }
2923
+
2924
+ .seed-chip__label--variant_outlineStrong:is(:checked, [data-checked]) {
2925
+ color: var(--seed-color-fg-neutral-inverted);
2926
+ }
2927
+
2928
+ .seed-chip__prefixIcon--variant_outlineStrong, .seed-chip__suffixIcon--variant_outlineStrong {
2929
+ color: var(--seed-color-fg-neutral);
2931
2930
  }
2932
2931
 
2933
2932
  .seed-chip__root--variant_outlineWeak {
2934
2933
  background: var(--seed-color-bg-layer-default);
2935
2934
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
2936
- color: var(--seed-color-fg-neutral);
2935
+ --seed-icon-color: var(--seed-color-fg-neutral);
2937
2936
  }
2938
2937
 
2939
2938
  .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2940
2939
  background: var(--seed-color-bg-layer-default-pressed);
2941
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
2942
- color: var(--seed-color-fg-neutral);
2943
- --seed-icon-color: var(--seed-color-fg-neutral);
2944
2940
  }
2945
2941
 
2946
2942
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
2947
2943
  background: var(--seed-color-bg-neutral-weak);
2948
2944
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
2949
- color: var(--seed-color-fg-neutral);
2950
- --seed-icon-color: var(--seed-color-fg-neutral);
2951
2945
  }
2952
2946
 
2953
2947
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2954
2948
  background: var(--seed-color-bg-neutral-weak-pressed);
2955
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
2956
- color: var(--seed-color-fg-neutral);
2957
- --seed-icon-color: var(--seed-color-fg-neutral);
2958
2949
  }
2959
2950
 
2960
2951
  .seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
2961
2952
  opacity: .5;
2962
2953
  }
2963
2954
 
2964
- .seed-chip__root--variant_outlineWeak {
2965
- --seed-icon-color: var(--seed-color-fg-neutral);
2955
+ .seed-chip__label--variant_outlineWeak, .seed-chip__prefixIcon--variant_outlineWeak, .seed-chip__suffixIcon--variant_outlineWeak {
2956
+ color: var(--seed-color-fg-neutral);
2966
2957
  }
2967
2958
 
2968
2959
  .seed-chip__root--size_large {