@seed-design/css 1.2.5 → 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 (31) hide show
  1. package/all.css +61 -12
  2. package/all.layered.css +61 -12
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/package.json +2 -2
  6. package/recipes/content-placeholder.css +24 -0
  7. package/recipes/content-placeholder.d.ts +24 -0
  8. package/recipes/content-placeholder.layered.css +27 -0
  9. package/recipes/content-placeholder.layered.mjs +53 -0
  10. package/recipes/content-placeholder.mjs +53 -0
  11. package/recipes/help-bubble.css +1 -0
  12. package/recipes/help-bubble.layered.css +1 -0
  13. package/recipes/image-frame-reaction-button.css +23 -8
  14. package/recipes/image-frame-reaction-button.d.ts +3 -1
  15. package/recipes/image-frame-reaction-button.layered.css +25 -8
  16. package/recipes/image-frame-reaction-button.layered.mjs +22 -4
  17. package/recipes/image-frame-reaction-button.mjs +22 -4
  18. package/recipes/image-frame.css +13 -11
  19. package/recipes/image-frame.d.ts +3 -1
  20. package/recipes/image-frame.layered.css +9 -4
  21. package/recipes/image-frame.layered.mjs +22 -4
  22. package/recipes/image-frame.mjs +22 -4
  23. package/vars/component/content-placeholder.d.ts +28 -0
  24. package/vars/component/content-placeholder.mjs +27 -0
  25. package/vars/component/index.d.ts +1 -0
  26. package/vars/component/index.mjs +1 -0
  27. package/vars/component/text-input.d.ts +1 -0
  28. package/vars/component/text-input.mjs +1 -0
  29. package/recipes/tag-group-tag.css +0 -44
  30. package/recipes/tag-group-tag.d.ts +0 -30
  31. package/recipes/tag-group-tag.mjs +0 -41
package/all.css CHANGED
@@ -3986,6 +3986,32 @@
3986
3986
  top: 0;
3987
3987
  }
3988
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
+
3989
4015
  .seed-contextual-floating-button {
3990
4016
  box-sizing: border-box;
3991
4017
  cursor: pointer;
@@ -4903,6 +4929,7 @@
4903
4929
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
4904
4930
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
4905
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));
4906
4933
  color: var(--seed-color-fg-neutral-inverted);
4907
4934
  --seed-icon-size: var(--seed-dimension-x3_5);
4908
4935
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -4943,13 +4970,13 @@
4943
4970
  overflow: hidden;
4944
4971
  }
4945
4972
 
4946
- .seed-image-frame {
4973
+ .seed-image-frame__root {
4947
4974
  border-radius: inherit;
4948
4975
  position: relative;
4949
4976
  overflow: hidden;
4950
4977
  }
4951
4978
 
4952
- .seed-image-frame > img, .seed-image-frame > video {
4979
+ .seed-image-frame__content {
4953
4980
  object-fit: cover;
4954
4981
  border-radius: inherit;
4955
4982
  width: 100%;
@@ -4957,7 +4984,12 @@
4957
4984
  display: block;
4958
4985
  }
4959
4986
 
4960
- .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 {
4961
4993
  content: "";
4962
4994
  pointer-events: none;
4963
4995
  border-radius: inherit;
@@ -4966,7 +4998,7 @@
4966
4998
  inset: 0;
4967
4999
  }
4968
5000
 
4969
- .seed-image-frame--rounded_true {
5001
+ .seed-image-frame__root--rounded_true {
4970
5002
  border-radius: var(--seed-radius-r2);
4971
5003
  }
4972
5004
 
@@ -4994,13 +5026,11 @@
4994
5026
  display: inline-flex;
4995
5027
  }
4996
5028
 
4997
- .seed-image-frame-reaction-button {
5029
+ .seed-image-frame-reaction-button__root {
4998
5030
  box-sizing: border-box;
4999
5031
  cursor: pointer;
5000
5032
  width: var(--seed-dimension-x6);
5001
5033
  height: var(--seed-dimension-x6);
5002
- --seed-icon-size: var(--seed-dimension-x6);
5003
- --seed-icon-color: var(--seed-color-palette-static-white);
5004
5034
  background: none;
5005
5035
  border: none;
5006
5036
  justify-content: center;
@@ -5010,7 +5040,7 @@
5010
5040
  position: relative;
5011
5041
  }
5012
5042
 
5013
- .seed-image-frame-reaction-button:before {
5043
+ .seed-image-frame-reaction-button__root:before {
5014
5044
  content: "";
5015
5045
  top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5016
5046
  right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -5022,18 +5052,37 @@
5022
5052
  position: absolute;
5023
5053
  }
5024
5054
 
5025
- .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
5055
+ .seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
5026
5056
  outline: none;
5027
5057
  }
5028
5058
 
5029
- .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 {
5030
5060
  border-radius: var(--seed-radius-r1);
5031
5061
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5032
5062
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5033
5063
  }
5034
5064
 
5035
- .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
5036
- --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);
5037
5086
  }
5038
5087
 
5039
5088
  .seed-inline-banner__root {
package/all.layered.css CHANGED
@@ -4083,6 +4083,32 @@
4083
4083
  top: 0;
4084
4084
  }
4085
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
+
4086
4112
  .seed-contextual-floating-button {
4087
4113
  box-sizing: border-box;
4088
4114
  cursor: pointer;
@@ -5000,6 +5026,7 @@
5000
5026
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
5001
5027
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
5002
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));
5003
5030
  color: var(--seed-color-fg-neutral-inverted);
5004
5031
  --seed-icon-size: var(--seed-dimension-x3_5);
5005
5032
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -5040,13 +5067,13 @@
5040
5067
  overflow: hidden;
5041
5068
  }
5042
5069
 
5043
- .seed-image-frame {
5070
+ .seed-image-frame__root {
5044
5071
  border-radius: inherit;
5045
5072
  position: relative;
5046
5073
  overflow: hidden;
5047
5074
  }
5048
5075
 
5049
- .seed-image-frame > img, .seed-image-frame > video {
5076
+ .seed-image-frame__content {
5050
5077
  object-fit: cover;
5051
5078
  border-radius: inherit;
5052
5079
  width: 100%;
@@ -5054,7 +5081,12 @@
5054
5081
  display: block;
5055
5082
  }
5056
5083
 
5057
- .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 {
5058
5090
  content: "";
5059
5091
  pointer-events: none;
5060
5092
  border-radius: inherit;
@@ -5063,7 +5095,7 @@
5063
5095
  inset: 0;
5064
5096
  }
5065
5097
 
5066
- .seed-image-frame--rounded_true {
5098
+ .seed-image-frame__root--rounded_true {
5067
5099
  border-radius: var(--seed-radius-r2);
5068
5100
  }
5069
5101
 
@@ -5091,13 +5123,11 @@
5091
5123
  display: inline-flex;
5092
5124
  }
5093
5125
 
5094
- .seed-image-frame-reaction-button {
5126
+ .seed-image-frame-reaction-button__root {
5095
5127
  box-sizing: border-box;
5096
5128
  cursor: pointer;
5097
5129
  width: var(--seed-dimension-x6);
5098
5130
  height: var(--seed-dimension-x6);
5099
- --seed-icon-size: var(--seed-dimension-x6);
5100
- --seed-icon-color: var(--seed-color-palette-static-white);
5101
5131
  background: none;
5102
5132
  border: none;
5103
5133
  justify-content: center;
@@ -5107,7 +5137,7 @@
5107
5137
  position: relative;
5108
5138
  }
5109
5139
 
5110
- .seed-image-frame-reaction-button:before {
5140
+ .seed-image-frame-reaction-button__root:before {
5111
5141
  content: "";
5112
5142
  top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5113
5143
  right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -5119,18 +5149,37 @@
5119
5149
  position: absolute;
5120
5150
  }
5121
5151
 
5122
- .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
5152
+ .seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
5123
5153
  outline: none;
5124
5154
  }
5125
5155
 
5126
- .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 {
5127
5157
  border-radius: var(--seed-radius-r1);
5128
5158
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5129
5159
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5130
5160
  }
5131
5161
 
5132
- .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
5133
- --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);
5134
5183
  }
5135
5184
 
5136
5185
  .seed-inline-banner__root {