@seed-design/css 1.2.17 → 1.2.18

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 (13) hide show
  1. package/all.css +95 -5
  2. package/all.layered.css +95 -5
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +9 -1
  6. package/base.layered.css +9 -1
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/tag-group-item.css +59 -4
  11. package/recipes/tag-group-item.layered.css +64 -4
  12. package/recipes/tag-group.css +28 -10
  13. package/recipes/tag-group.layered.css +22 -0
package/all.css CHANGED
@@ -44,7 +44,6 @@
44
44
  }
45
45
 
46
46
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
47
- vertical-align: middle;
48
47
  flex-shrink: 0;
49
48
  justify-content: center;
50
49
  align-items: center;
@@ -55,12 +54,18 @@
55
54
  width: var(--seed-icon-size);
56
55
  height: var(--seed-icon-size);
57
56
  color: var(--seed-icon-color, currentColor);
57
+ font-size: var(--seed-icon-font-size, inherit);
58
+ font-weight: var(--seed-icon-font-weight, inherit);
59
+ vertical-align: middle;
58
60
  }
59
61
 
60
62
  .seed-prefix-icon {
61
63
  width: var(--seed-prefix-icon-size);
62
64
  height: var(--seed-prefix-icon-size);
63
65
  color: var(--seed-prefix-icon-color, currentColor);
66
+ font-size: var(--seed-prefix-icon-font-size, inherit);
67
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
68
+ vertical-align: middle;
64
69
  margin-left: var(--seed-prefix-icon-margin-left, 0);
65
70
  margin-right: var(--seed-prefix-icon-margin-right, 0);
66
71
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -73,6 +78,9 @@
73
78
  width: var(--seed-suffix-icon-size);
74
79
  height: var(--seed-suffix-icon-size);
75
80
  color: var(--seed-suffix-icon-color, currentColor);
81
+ font-size: var(--seed-suffix-icon-font-size, inherit);
82
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
83
+ vertical-align: middle;
76
84
  margin-left: var(--seed-suffix-icon-margin-left, 0);
77
85
  margin-right: var(--seed-suffix-icon-margin-right, 0);
78
86
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -7699,20 +7707,42 @@
7699
7707
  --tag-group-item-overflow: hidden;
7700
7708
  --tag-group-item-text-overflow: ellipsis;
7701
7709
  --tag-group-item-white-space: nowrap;
7710
+ --tag-group-item-align-items: baseline;
7702
7711
  align-items: center;
7703
7712
  max-width: 100%;
7704
7713
  display: inline-flex;
7705
7714
  }
7706
7715
 
7716
+ .seed-tag-group__root--truncate_true .seed-icon {
7717
+ top: var(--tag-group-item-icon-flex-offset, 0px);
7718
+ position: relative;
7719
+ }
7720
+
7721
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
7722
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
7723
+ position: relative;
7724
+ }
7725
+
7726
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
7727
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
7728
+ position: relative;
7729
+ }
7730
+
7707
7731
  .seed-tag-group__root--truncate_false {
7708
7732
  --tag-group-item-display: inline;
7709
7733
  --tag-group-item-overflow: visible;
7710
7734
  --tag-group-item-text-overflow: clip;
7711
7735
  --tag-group-item-white-space: normal;
7736
+ --tag-group-item-align-items: center;
7712
7737
  font-size: 0;
7713
7738
  display: inline-block;
7714
7739
  }
7715
7740
 
7741
+ .seed-tag-group__root--truncate_false .seed-icon, .seed-tag-group__root--truncate_false .seed-prefix-icon, .seed-tag-group__root--truncate_false .seed-suffix-icon {
7742
+ top: var(--tag-group-item-inline-icon-offset, 0px);
7743
+ position: relative;
7744
+ }
7745
+
7716
7746
  .seed-tag-group__separator--truncate_false {
7717
7747
  vertical-align: middle;
7718
7748
  }
@@ -7731,9 +7761,9 @@
7731
7761
 
7732
7762
  .seed-tag-group-item__root {
7733
7763
  display: var(--tag-group-item-display);
7764
+ align-items: var(--tag-group-item-align-items, center);
7734
7765
  vertical-align: middle;
7735
7766
  flex-shrink: var(--seed-box-flex-shrink, 1);
7736
- align-items: center;
7737
7767
  min-width: 0;
7738
7768
  }
7739
7769
 
@@ -7756,9 +7786,25 @@
7756
7786
  }
7757
7787
 
7758
7788
  .seed-tag-group-item__root--size_t2 {
7789
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
7790
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7791
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7792
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7793
+ --seed-icon-size: var(--seed-dimension-x3);
7794
+ --seed-icon-font-size: var(--seed-font-size-t2);
7759
7795
  --seed-prefix-icon-size: var(--seed-dimension-x3);
7796
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
7760
7797
  --seed-suffix-icon-size: var(--seed-dimension-x3);
7761
- --seed-icon-size: var(--seed-dimension-x3);
7798
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
7799
+ }
7800
+
7801
+ @supports (top: 1cap) {
7802
+ .seed-tag-group-item__root--size_t2 {
7803
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
7804
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7805
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7806
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7807
+ }
7762
7808
  }
7763
7809
 
7764
7810
  .seed-tag-group-item__label--size_t2 {
@@ -7767,9 +7813,25 @@
7767
7813
  }
7768
7814
 
7769
7815
  .seed-tag-group-item__root--size_t3 {
7816
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
7817
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
7818
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
7819
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
7820
+ --seed-icon-size: 13px;
7821
+ --seed-icon-font-size: var(--seed-font-size-t3);
7770
7822
  --seed-prefix-icon-size: 13px;
7823
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
7771
7824
  --seed-suffix-icon-size: 13px;
7772
- --seed-icon-size: 13px;
7825
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
7826
+ }
7827
+
7828
+ @supports (top: 1cap) {
7829
+ .seed-tag-group-item__root--size_t3 {
7830
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
7831
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
7832
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
7833
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
7834
+ }
7773
7835
  }
7774
7836
 
7775
7837
  .seed-tag-group-item__label--size_t3 {
@@ -7778,9 +7840,25 @@
7778
7840
  }
7779
7841
 
7780
7842
  .seed-tag-group-item__root--size_t4 {
7843
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
7844
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7845
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7846
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7847
+ --seed-icon-size: var(--seed-dimension-x3_5);
7848
+ --seed-icon-font-size: var(--seed-font-size-t4);
7781
7849
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
7850
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
7782
7851
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
7783
- --seed-icon-size: var(--seed-dimension-x3_5);
7852
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
7853
+ }
7854
+
7855
+ @supports (top: 1cap) {
7856
+ .seed-tag-group-item__root--size_t4 {
7857
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
7858
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7859
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7860
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7861
+ }
7784
7862
  }
7785
7863
 
7786
7864
  .seed-tag-group-item__label--size_t4 {
@@ -7788,10 +7866,22 @@
7788
7866
  line-height: var(--seed-line-height-t4);
7789
7867
  }
7790
7868
 
7869
+ .seed-tag-group-item__root--weight_regular {
7870
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
7871
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
7872
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
7873
+ }
7874
+
7791
7875
  .seed-tag-group-item__label--weight_regular {
7792
7876
  font-weight: var(--seed-font-weight-regular);
7793
7877
  }
7794
7878
 
7879
+ .seed-tag-group-item__root--weight_bold {
7880
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
7881
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
7882
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
7883
+ }
7884
+
7795
7885
  .seed-tag-group-item__label--weight_bold {
7796
7886
  font-weight: var(--seed-font-weight-bold);
7797
7887
  }
package/all.layered.css CHANGED
@@ -45,7 +45,6 @@
45
45
  }
46
46
 
47
47
  .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
48
- vertical-align: middle;
49
48
  flex-shrink: 0;
50
49
  justify-content: center;
51
50
  align-items: center;
@@ -56,12 +55,18 @@
56
55
  width: var(--seed-icon-size);
57
56
  height: var(--seed-icon-size);
58
57
  color: var(--seed-icon-color, currentColor);
58
+ font-size: var(--seed-icon-font-size, inherit);
59
+ font-weight: var(--seed-icon-font-weight, inherit);
60
+ vertical-align: middle;
59
61
  }
60
62
 
61
63
  .seed-prefix-icon {
62
64
  width: var(--seed-prefix-icon-size);
63
65
  height: var(--seed-prefix-icon-size);
64
66
  color: var(--seed-prefix-icon-color, currentColor);
67
+ font-size: var(--seed-prefix-icon-font-size, inherit);
68
+ font-weight: var(--seed-prefix-icon-font-weight, inherit);
69
+ vertical-align: middle;
65
70
  margin-left: var(--seed-prefix-icon-margin-left, 0);
66
71
  margin-right: var(--seed-prefix-icon-margin-right, 0);
67
72
  margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -74,6 +79,9 @@
74
79
  width: var(--seed-suffix-icon-size);
75
80
  height: var(--seed-suffix-icon-size);
76
81
  color: var(--seed-suffix-icon-color, currentColor);
82
+ font-size: var(--seed-suffix-icon-font-size, inherit);
83
+ font-weight: var(--seed-suffix-icon-font-weight, inherit);
84
+ vertical-align: middle;
77
85
  margin-left: var(--seed-suffix-icon-margin-left, 0);
78
86
  margin-right: var(--seed-suffix-icon-margin-right, 0);
79
87
  margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -7800,20 +7808,42 @@
7800
7808
  --tag-group-item-overflow: hidden;
7801
7809
  --tag-group-item-text-overflow: ellipsis;
7802
7810
  --tag-group-item-white-space: nowrap;
7811
+ --tag-group-item-align-items: baseline;
7803
7812
  align-items: center;
7804
7813
  max-width: 100%;
7805
7814
  display: inline-flex;
7806
7815
  }
7807
7816
 
7817
+ .seed-tag-group__root--truncate_true .seed-icon {
7818
+ top: var(--tag-group-item-icon-flex-offset, 0px);
7819
+ position: relative;
7820
+ }
7821
+
7822
+ .seed-tag-group__root--truncate_true .seed-prefix-icon {
7823
+ top: var(--tag-group-item-prefix-icon-flex-offset, 0px);
7824
+ position: relative;
7825
+ }
7826
+
7827
+ .seed-tag-group__root--truncate_true .seed-suffix-icon {
7828
+ top: var(--tag-group-item-suffix-icon-flex-offset, 0px);
7829
+ position: relative;
7830
+ }
7831
+
7808
7832
  .seed-tag-group__root--truncate_false {
7809
7833
  --tag-group-item-display: inline;
7810
7834
  --tag-group-item-overflow: visible;
7811
7835
  --tag-group-item-text-overflow: clip;
7812
7836
  --tag-group-item-white-space: normal;
7837
+ --tag-group-item-align-items: center;
7813
7838
  font-size: 0;
7814
7839
  display: inline-block;
7815
7840
  }
7816
7841
 
7842
+ .seed-tag-group__root--truncate_false .seed-icon, .seed-tag-group__root--truncate_false .seed-prefix-icon, .seed-tag-group__root--truncate_false .seed-suffix-icon {
7843
+ top: var(--tag-group-item-inline-icon-offset, 0px);
7844
+ position: relative;
7845
+ }
7846
+
7817
7847
  .seed-tag-group__separator--truncate_false {
7818
7848
  vertical-align: middle;
7819
7849
  }
@@ -7832,9 +7862,9 @@
7832
7862
 
7833
7863
  .seed-tag-group-item__root {
7834
7864
  display: var(--tag-group-item-display);
7865
+ align-items: var(--tag-group-item-align-items, center);
7835
7866
  vertical-align: middle;
7836
7867
  flex-shrink: var(--seed-box-flex-shrink, 1);
7837
- align-items: center;
7838
7868
  min-width: 0;
7839
7869
  }
7840
7870
 
@@ -7857,9 +7887,25 @@
7857
7887
  }
7858
7888
 
7859
7889
  .seed-tag-group-item__root--size_t2 {
7890
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t2) / 2);
7891
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7892
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7893
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .35em);
7894
+ --seed-icon-size: var(--seed-dimension-x3);
7895
+ --seed-icon-font-size: var(--seed-font-size-t2);
7860
7896
  --seed-prefix-icon-size: var(--seed-dimension-x3);
7897
+ --seed-prefix-icon-font-size: var(--seed-font-size-t2);
7861
7898
  --seed-suffix-icon-size: var(--seed-dimension-x3);
7862
- --seed-icon-size: var(--seed-dimension-x3);
7899
+ --seed-suffix-icon-font-size: var(--seed-font-size-t2);
7900
+ }
7901
+
7902
+ @supports (top: 1cap) {
7903
+ .seed-tag-group-item__root--size_t2 {
7904
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t2) / 2 - .5cap);
7905
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7906
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7907
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3) / 2 - .5cap);
7908
+ }
7863
7909
  }
7864
7910
 
7865
7911
  .seed-tag-group-item__label--size_t2 {
@@ -7868,9 +7914,25 @@
7868
7914
  }
7869
7915
 
7870
7916
  .seed-tag-group-item__root--size_t3 {
7917
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t3) / 2);
7918
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .35em);
7919
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .35em);
7920
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .35em);
7921
+ --seed-icon-size: 13px;
7922
+ --seed-icon-font-size: var(--seed-font-size-t3);
7871
7923
  --seed-prefix-icon-size: 13px;
7924
+ --seed-prefix-icon-font-size: var(--seed-font-size-t3);
7872
7925
  --seed-suffix-icon-size: 13px;
7873
- --seed-icon-size: 13px;
7926
+ --seed-suffix-icon-font-size: var(--seed-font-size-t3);
7927
+ }
7928
+
7929
+ @supports (top: 1cap) {
7930
+ .seed-tag-group-item__root--size_t3 {
7931
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t3) / 2 - .5cap);
7932
+ --tag-group-item-icon-flex-offset: calc(13px / 2 - .5cap);
7933
+ --tag-group-item-prefix-icon-flex-offset: calc(13px / 2 - .5cap);
7934
+ --tag-group-item-suffix-icon-flex-offset: calc(13px / 2 - .5cap);
7935
+ }
7874
7936
  }
7875
7937
 
7876
7938
  .seed-tag-group-item__label--size_t3 {
@@ -7879,9 +7941,25 @@
7879
7941
  }
7880
7942
 
7881
7943
  .seed-tag-group-item__root--size_t4 {
7944
+ --tag-group-item-inline-icon-offset: calc(.65em - var(--seed-line-height-t4) / 2);
7945
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7946
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7947
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .35em);
7948
+ --seed-icon-size: var(--seed-dimension-x3_5);
7949
+ --seed-icon-font-size: var(--seed-font-size-t4);
7882
7950
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
7951
+ --seed-prefix-icon-font-size: var(--seed-font-size-t4);
7883
7952
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
7884
- --seed-icon-size: var(--seed-dimension-x3_5);
7953
+ --seed-suffix-icon-font-size: var(--seed-font-size-t4);
7954
+ }
7955
+
7956
+ @supports (top: 1cap) {
7957
+ .seed-tag-group-item__root--size_t4 {
7958
+ --tag-group-item-inline-icon-offset: calc(1em - var(--seed-line-height-t4) / 2 - .5cap);
7959
+ --tag-group-item-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7960
+ --tag-group-item-prefix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7961
+ --tag-group-item-suffix-icon-flex-offset: calc(var(--seed-dimension-x3_5) / 2 - .5cap);
7962
+ }
7885
7963
  }
7886
7964
 
7887
7965
  .seed-tag-group-item__label--size_t4 {
@@ -7889,10 +7967,22 @@
7889
7967
  line-height: var(--seed-line-height-t4);
7890
7968
  }
7891
7969
 
7970
+ .seed-tag-group-item__root--weight_regular {
7971
+ --seed-icon-font-weight: var(--seed-font-weight-regular);
7972
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-regular);
7973
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-regular);
7974
+ }
7975
+
7892
7976
  .seed-tag-group-item__label--weight_regular {
7893
7977
  font-weight: var(--seed-font-weight-regular);
7894
7978
  }
7895
7979
 
7980
+ .seed-tag-group-item__root--weight_bold {
7981
+ --seed-icon-font-weight: var(--seed-font-weight-bold);
7982
+ --seed-prefix-icon-font-weight: var(--seed-font-weight-bold);
7983
+ --seed-suffix-icon-font-weight: var(--seed-font-weight-bold);
7984
+ }
7985
+
7896
7986
  .seed-tag-group-item__label--weight_bold {
7897
7987
  font-weight: var(--seed-font-weight-bold);
7898
7988
  }