@seed-design/css 1.2.4 → 1.2.6

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 (35) hide show
  1. package/all.css +62 -14
  2. package/all.layered.css +62 -14
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +1 -2
  6. package/base.layered.css +1 -2
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +2 -2
  10. package/recipes/content-placeholder.css +24 -0
  11. package/recipes/content-placeholder.d.ts +24 -0
  12. package/recipes/content-placeholder.layered.css +27 -0
  13. package/recipes/content-placeholder.layered.mjs +53 -0
  14. package/recipes/content-placeholder.mjs +53 -0
  15. package/recipes/help-bubble.css +1 -0
  16. package/recipes/help-bubble.layered.css +1 -0
  17. package/recipes/image-frame-reaction-button.css +23 -8
  18. package/recipes/image-frame-reaction-button.d.ts +3 -1
  19. package/recipes/image-frame-reaction-button.layered.css +25 -8
  20. package/recipes/image-frame-reaction-button.layered.mjs +22 -4
  21. package/recipes/image-frame-reaction-button.mjs +22 -4
  22. package/recipes/image-frame.css +13 -11
  23. package/recipes/image-frame.d.ts +3 -1
  24. package/recipes/image-frame.layered.css +9 -4
  25. package/recipes/image-frame.layered.mjs +22 -4
  26. package/recipes/image-frame.mjs +22 -4
  27. package/vars/component/content-placeholder.d.ts +28 -0
  28. package/vars/component/content-placeholder.mjs +27 -0
  29. package/vars/component/index.d.ts +1 -0
  30. package/vars/component/index.mjs +1 -0
  31. package/vars/component/text-input.d.ts +1 -0
  32. package/vars/component/text-input.mjs +1 -0
  33. package/recipes/tag-group-tag.css +0 -44
  34. package/recipes/tag-group-tag.d.ts +0 -30
  35. package/recipes/tag-group-tag.mjs +0 -41
package/all.css CHANGED
@@ -193,8 +193,7 @@
193
193
  grid-row: var(--seed-box-grid-row);
194
194
  }
195
195
 
196
- .seed-box:is(:active, [data-active]) {
197
- --seed-box-background--active: var(--seed-box-background);
196
+ .seed-box[data-has-active-bg]:is(:active, [data-active]) {
198
197
  background: var(--seed-box-background--active);
199
198
  }
200
199
 
@@ -3987,6 +3986,32 @@
3987
3986
  top: 0;
3988
3987
  }
3989
3988
 
3989
+ .seed-content-placeholder__root {
3990
+ box-sizing: border-box;
3991
+ vertical-align: top;
3992
+ background-color: var(--seed-color-palette-gray-200);
3993
+ justify-content: center;
3994
+ align-items: center;
3995
+ width: 100%;
3996
+ height: 100%;
3997
+ display: inline-flex;
3998
+ position: relative;
3999
+ overflow: hidden;
4000
+ }
4001
+
4002
+ .seed-content-placeholder__asset {
4003
+ height: 50%;
4004
+ min-width: var(--seed-dimension-x4);
4005
+ aspect-ratio: 1;
4006
+ width: auto;
4007
+ max-width: 64px;
4008
+ color: var(--seed-color-palette-gray-400);
4009
+ fill: currentColor;
4010
+ stroke: currentColor;
4011
+ object-fit: contain;
4012
+ display: block;
4013
+ }
4014
+
3990
4015
  .seed-contextual-floating-button {
3991
4016
  box-sizing: border-box;
3992
4017
  cursor: pointer;
@@ -4904,6 +4929,7 @@
4904
4929
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
4905
4930
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
4906
4931
  margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
4932
+ margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
4907
4933
  color: var(--seed-color-fg-neutral-inverted);
4908
4934
  --seed-icon-size: var(--seed-dimension-x3_5);
4909
4935
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -4944,13 +4970,13 @@
4944
4970
  overflow: hidden;
4945
4971
  }
4946
4972
 
4947
- .seed-image-frame {
4973
+ .seed-image-frame__root {
4948
4974
  border-radius: inherit;
4949
4975
  position: relative;
4950
4976
  overflow: hidden;
4951
4977
  }
4952
4978
 
4953
- .seed-image-frame > img, .seed-image-frame > video {
4979
+ .seed-image-frame__content {
4954
4980
  object-fit: cover;
4955
4981
  border-radius: inherit;
4956
4982
  width: 100%;
@@ -4958,7 +4984,12 @@
4958
4984
  display: block;
4959
4985
  }
4960
4986
 
4961
- .seed-image-frame--stroke_true:after {
4987
+ .seed-image-frame__fallback {
4988
+ width: 100%;
4989
+ height: 100%;
4990
+ }
4991
+
4992
+ .seed-image-frame__root--stroke_true:after {
4962
4993
  content: "";
4963
4994
  pointer-events: none;
4964
4995
  border-radius: inherit;
@@ -4967,7 +4998,7 @@
4967
4998
  inset: 0;
4968
4999
  }
4969
5000
 
4970
- .seed-image-frame--rounded_true {
5001
+ .seed-image-frame__root--rounded_true {
4971
5002
  border-radius: var(--seed-radius-r2);
4972
5003
  }
4973
5004
 
@@ -4995,13 +5026,11 @@
4995
5026
  display: inline-flex;
4996
5027
  }
4997
5028
 
4998
- .seed-image-frame-reaction-button {
5029
+ .seed-image-frame-reaction-button__root {
4999
5030
  box-sizing: border-box;
5000
5031
  cursor: pointer;
5001
5032
  width: var(--seed-dimension-x6);
5002
5033
  height: var(--seed-dimension-x6);
5003
- --seed-icon-size: var(--seed-dimension-x6);
5004
- --seed-icon-color: var(--seed-color-palette-static-white);
5005
5034
  background: none;
5006
5035
  border: none;
5007
5036
  justify-content: center;
@@ -5011,7 +5040,7 @@
5011
5040
  position: relative;
5012
5041
  }
5013
5042
 
5014
- .seed-image-frame-reaction-button:before {
5043
+ .seed-image-frame-reaction-button__root:before {
5015
5044
  content: "";
5016
5045
  top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5017
5046
  right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -5023,18 +5052,37 @@
5023
5052
  position: absolute;
5024
5053
  }
5025
5054
 
5026
- .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
5055
+ .seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
5027
5056
  outline: none;
5028
5057
  }
5029
5058
 
5030
- .seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
5059
+ .seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
5031
5060
  border-radius: var(--seed-radius-r1);
5032
5061
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5033
5062
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5034
5063
  }
5035
5064
 
5036
- .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
5037
- --seed-icon-color: var(--seed-color-bg-transparent);
5065
+ .seed-image-frame-reaction-button__fillIcon {
5066
+ width: var(--seed-dimension-x6);
5067
+ height: var(--seed-dimension-x6);
5068
+ pointer-events: none;
5069
+ margin: auto;
5070
+ position: absolute;
5071
+ inset: 0;
5072
+ }
5073
+
5074
+ .seed-image-frame-reaction-button__lineIcon {
5075
+ width: var(--seed-dimension-x6);
5076
+ height: var(--seed-dimension-x6);
5077
+ color: var(--seed-color-palette-static-white);
5078
+ pointer-events: none;
5079
+ margin: auto;
5080
+ position: absolute;
5081
+ inset: 0;
5082
+ }
5083
+
5084
+ .seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
5085
+ color: var(--seed-color-bg-transparent);
5038
5086
  }
5039
5087
 
5040
5088
  .seed-inline-banner__root {
package/all.layered.css CHANGED
@@ -194,8 +194,7 @@
194
194
  grid-row: var(--seed-box-grid-row);
195
195
  }
196
196
 
197
- .seed-box:is(:active, [data-active]) {
198
- --seed-box-background--active: var(--seed-box-background);
197
+ .seed-box[data-has-active-bg]:is(:active, [data-active]) {
199
198
  background: var(--seed-box-background--active);
200
199
  }
201
200
 
@@ -4084,6 +4083,32 @@
4084
4083
  top: 0;
4085
4084
  }
4086
4085
 
4086
+ .seed-content-placeholder__root {
4087
+ box-sizing: border-box;
4088
+ vertical-align: top;
4089
+ background-color: var(--seed-color-palette-gray-200);
4090
+ justify-content: center;
4091
+ align-items: center;
4092
+ width: 100%;
4093
+ height: 100%;
4094
+ display: inline-flex;
4095
+ position: relative;
4096
+ overflow: hidden;
4097
+ }
4098
+
4099
+ .seed-content-placeholder__asset {
4100
+ height: 50%;
4101
+ min-width: var(--seed-dimension-x4);
4102
+ aspect-ratio: 1;
4103
+ width: auto;
4104
+ max-width: 64px;
4105
+ color: var(--seed-color-palette-gray-400);
4106
+ fill: currentColor;
4107
+ stroke: currentColor;
4108
+ object-fit: contain;
4109
+ display: block;
4110
+ }
4111
+
4087
4112
  .seed-contextual-floating-button {
4088
4113
  box-sizing: border-box;
4089
4114
  cursor: pointer;
@@ -5001,6 +5026,7 @@
5001
5026
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
5002
5027
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
5003
5028
  margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
5029
+ margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
5004
5030
  color: var(--seed-color-fg-neutral-inverted);
5005
5031
  --seed-icon-size: var(--seed-dimension-x3_5);
5006
5032
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -5041,13 +5067,13 @@
5041
5067
  overflow: hidden;
5042
5068
  }
5043
5069
 
5044
- .seed-image-frame {
5070
+ .seed-image-frame__root {
5045
5071
  border-radius: inherit;
5046
5072
  position: relative;
5047
5073
  overflow: hidden;
5048
5074
  }
5049
5075
 
5050
- .seed-image-frame > img, .seed-image-frame > video {
5076
+ .seed-image-frame__content {
5051
5077
  object-fit: cover;
5052
5078
  border-radius: inherit;
5053
5079
  width: 100%;
@@ -5055,7 +5081,12 @@
5055
5081
  display: block;
5056
5082
  }
5057
5083
 
5058
- .seed-image-frame--stroke_true:after {
5084
+ .seed-image-frame__fallback {
5085
+ width: 100%;
5086
+ height: 100%;
5087
+ }
5088
+
5089
+ .seed-image-frame__root--stroke_true:after {
5059
5090
  content: "";
5060
5091
  pointer-events: none;
5061
5092
  border-radius: inherit;
@@ -5064,7 +5095,7 @@
5064
5095
  inset: 0;
5065
5096
  }
5066
5097
 
5067
- .seed-image-frame--rounded_true {
5098
+ .seed-image-frame__root--rounded_true {
5068
5099
  border-radius: var(--seed-radius-r2);
5069
5100
  }
5070
5101
 
@@ -5092,13 +5123,11 @@
5092
5123
  display: inline-flex;
5093
5124
  }
5094
5125
 
5095
- .seed-image-frame-reaction-button {
5126
+ .seed-image-frame-reaction-button__root {
5096
5127
  box-sizing: border-box;
5097
5128
  cursor: pointer;
5098
5129
  width: var(--seed-dimension-x6);
5099
5130
  height: var(--seed-dimension-x6);
5100
- --seed-icon-size: var(--seed-dimension-x6);
5101
- --seed-icon-color: var(--seed-color-palette-static-white);
5102
5131
  background: none;
5103
5132
  border: none;
5104
5133
  justify-content: center;
@@ -5108,7 +5137,7 @@
5108
5137
  position: relative;
5109
5138
  }
5110
5139
 
5111
- .seed-image-frame-reaction-button:before {
5140
+ .seed-image-frame-reaction-button__root:before {
5112
5141
  content: "";
5113
5142
  top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5114
5143
  right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -5120,18 +5149,37 @@
5120
5149
  position: absolute;
5121
5150
  }
5122
5151
 
5123
- .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
5152
+ .seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
5124
5153
  outline: none;
5125
5154
  }
5126
5155
 
5127
- .seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
5156
+ .seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
5128
5157
  border-radius: var(--seed-radius-r1);
5129
5158
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5130
5159
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5131
5160
  }
5132
5161
 
5133
- .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
5134
- --seed-icon-color: var(--seed-color-bg-transparent);
5162
+ .seed-image-frame-reaction-button__fillIcon {
5163
+ width: var(--seed-dimension-x6);
5164
+ height: var(--seed-dimension-x6);
5165
+ pointer-events: none;
5166
+ margin: auto;
5167
+ position: absolute;
5168
+ inset: 0;
5169
+ }
5170
+
5171
+ .seed-image-frame-reaction-button__lineIcon {
5172
+ width: var(--seed-dimension-x6);
5173
+ height: var(--seed-dimension-x6);
5174
+ color: var(--seed-color-palette-static-white);
5175
+ pointer-events: none;
5176
+ margin: auto;
5177
+ position: absolute;
5178
+ inset: 0;
5179
+ }
5180
+
5181
+ .seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
5182
+ color: var(--seed-color-bg-transparent);
5135
5183
  }
5136
5184
 
5137
5185
  .seed-inline-banner__root {