@homebound/beam 3.79.0 → 3.80.0

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.
package/dist/Css.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "increment": 8,
3
3
  "breakpoints": {"ifPrint":"@media print","ifSm":"@media screen and (max-width: 599px)","ifMd":"@media screen and (min-width: 600px) and (max-width: 1024px)","ifSmOrMd":"@media screen and (max-width: 1024px)","ifMdAndUp":"@media screen and (min-width: 600px)","ifMdAndDown":"@media screen and (max-width: 1024px)","ifLg":"@media screen and (min-width: 1025px)","ifMdOrLg":"@media screen and (min-width: 600px)"},
4
4
  "typography": ["xs2","xs2Sb","xs","xsSb","sm","smSb","md","mdSb","lg","xl","xl2"],
5
- "tokens": {"ButtonCautionDisabledBg":"--b-button-caution-disabled-bg","ButtonCautionDisabledFg":"--b-button-caution-disabled-fg","ButtonDangerDisabledBg":"--b-button-danger-disabled-bg","ButtonDangerDisabledFg":"--b-button-danger-disabled-fg","ButtonGhostDisabledFg":"--b-button-ghost-disabled-fg","ButtonGhostFg":"--b-button-ghost-fg","ButtonPrimaryDisabledBg":"--b-button-primary-disabled-bg","ButtonPrimaryDisabledFg":"--b-button-primary-disabled-fg","ButtonSecondaryFg":"--b-button-secondary-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","ChoiceDisabled":"--b-choice-disabled","ChoiceSelected":"--b-choice-selected","Danger":"--b-danger","DangerPressed":"--b-danger-pressed","EnvBrandDev":"--b-env-brand-dev","EnvBrandLocalProd":"--b-env-brand-local-prod","EnvBrandProd":"--b-env-brand-prod","EnvBrandQa":"--b-env-brand-qa","FieldBgDefault":"--b-field-bg-default","FieldBgDisabled":"--b-field-bg-disabled","FieldBgHover":"--b-field-bg-hover","FieldBorderDefault":"--b-field-border-default","FieldBorderError":"--b-field-border-error","FieldBorderFocus":"--b-field-border-focus","FieldBorderHover":"--b-field-border-hover","FieldTextDisabled":"--b-field-text-disabled","FocusRingInset":"--b-focus-ring-inset","FocusRingMuted":"--b-focus-ring-muted","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","NavGlobalItemBgActive":"--b-nav-global-item-bg-active","NavGlobalItemBgHover":"--b-nav-global-item-bg-hover","NavGlobalItemBgPressed":"--b-nav-global-item-bg-pressed","NavGlobalText":"--b-nav-global-text","NavGlobalTextActive":"--b-nav-global-text-active","NavGlobalTextDisabled":"--b-nav-global-text-disabled","NavItemBgActive":"--b-nav-item-bg-active","NavItemBgHover":"--b-nav-item-bg-hover","NavItemBgPressed":"--b-nav-item-bg-pressed","NavText":"--b-nav-text","NavTextActive":"--b-nav-text-active","NavTextDisabled":"--b-nav-text-disabled","NavTextFocusVisible":"--b-nav-text-focus-visible","NavTextPressed":"--b-nav-text-pressed","NeutralFillHover":"--b-neutral-fill-hover","NeutralFillHoverStrong":"--b-neutral-fill-hover-strong","NeutralFillHoverSubtle":"--b-neutral-fill-hover-subtle","NeutralFillPressed":"--b-neutral-fill-pressed","NeutralSurfacePressed":"--b-neutral-surface-pressed","OnPrimary":"--b-on-primary","OnSurface":"--b-on-surface","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceDisabled":"--b-on-surface-disabled","OnSurfaceRaisedHover":"--b-on-surface-raised-hover","OnSurfaceRaisedPressed":"--b-on-surface-raised-pressed","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionFill":"--b-selection-fill","SelectionIndicator":"--b-selection-indicator","Surface":"--b-surface","SurfaceHover":"--b-surface-hover","SurfaceRaised":"--b-surface-raised","SurfaceRaisedHover":"--b-surface-raised-hover","SurfaceRaisedPressed":"--b-surface-raised-pressed","SurfaceDisabled":"--b-surface-disabled","SurfaceSeparator":"--b-surface-separator","SurfaceSubtle":"--b-surface-subtle","TextDisabled":"--b-text-disabled","TextHelper":"--b-text-helper","TextLabel":"--b-text-label","TextLinkDefault":"--b-text-link-default","TextLinkDisabled":"--b-text-link-disabled","TextLinkHover":"--b-text-link-hover","TextLinkPressed":"--b-text-link-pressed","TextPlaceholder":"--b-text-placeholder","TextSelection":"--b-text-selection"},
5
+ "tokens": {"AiFieldBg":"--b-ai-field-bg","AiFieldFg":"--b-ai-field-fg","ButtonCautionDisabledBg":"--b-button-caution-disabled-bg","ButtonCautionDisabledFg":"--b-button-caution-disabled-fg","ButtonDangerDisabledBg":"--b-button-danger-disabled-bg","ButtonDangerDisabledFg":"--b-button-danger-disabled-fg","ButtonGhostDisabledFg":"--b-button-ghost-disabled-fg","ButtonGhostFg":"--b-button-ghost-fg","ButtonPrimaryDisabledBg":"--b-button-primary-disabled-bg","ButtonPrimaryDisabledFg":"--b-button-primary-disabled-fg","ButtonSecondaryFg":"--b-button-secondary-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","ChoiceDisabled":"--b-choice-disabled","ChoiceSelected":"--b-choice-selected","Danger":"--b-danger","DangerPressed":"--b-danger-pressed","EnvBrandDev":"--b-env-brand-dev","EnvBrandLocalProd":"--b-env-brand-local-prod","EnvBrandProd":"--b-env-brand-prod","EnvBrandQa":"--b-env-brand-qa","FieldBgDefault":"--b-field-bg-default","FieldBgDisabled":"--b-field-bg-disabled","FieldBgHover":"--b-field-bg-hover","FieldBorderDefault":"--b-field-border-default","FieldBorderError":"--b-field-border-error","FieldBorderFocus":"--b-field-border-focus","FieldBorderHover":"--b-field-border-hover","FieldTextDisabled":"--b-field-text-disabled","FocusRingInset":"--b-focus-ring-inset","FocusRingMuted":"--b-focus-ring-muted","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","NavGlobalItemBgActive":"--b-nav-global-item-bg-active","NavGlobalItemBgHover":"--b-nav-global-item-bg-hover","NavGlobalItemBgPressed":"--b-nav-global-item-bg-pressed","NavGlobalText":"--b-nav-global-text","NavGlobalTextActive":"--b-nav-global-text-active","NavGlobalTextDisabled":"--b-nav-global-text-disabled","NavItemBgActive":"--b-nav-item-bg-active","NavItemBgHover":"--b-nav-item-bg-hover","NavItemBgPressed":"--b-nav-item-bg-pressed","NavText":"--b-nav-text","NavTextActive":"--b-nav-text-active","NavTextDisabled":"--b-nav-text-disabled","NavTextFocusVisible":"--b-nav-text-focus-visible","NavTextPressed":"--b-nav-text-pressed","NeutralFillHover":"--b-neutral-fill-hover","NeutralFillHoverStrong":"--b-neutral-fill-hover-strong","NeutralFillHoverSubtle":"--b-neutral-fill-hover-subtle","NeutralFillPressed":"--b-neutral-fill-pressed","NeutralSurfacePressed":"--b-neutral-surface-pressed","OnPrimary":"--b-on-primary","OnSurface":"--b-on-surface","OnSurfaceDisabled":"--b-on-surface-disabled","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceRaisedHover":"--b-on-surface-raised-hover","OnSurfaceRaisedPressed":"--b-on-surface-raised-pressed","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionFill":"--b-selection-fill","SelectionIndicator":"--b-selection-indicator","Surface":"--b-surface","SurfaceDisabled":"--b-surface-disabled","SurfaceHover":"--b-surface-hover","SurfaceRaised":"--b-surface-raised","SurfaceRaisedHover":"--b-surface-raised-hover","SurfaceRaisedPressed":"--b-surface-raised-pressed","SurfaceSeparator":"--b-surface-separator","SurfaceSubtle":"--b-surface-subtle","TextDisabled":"--b-text-disabled","TextHelper":"--b-text-helper","TextLabel":"--b-text-label","TextLinkDefault":"--b-text-link-default","TextLinkDisabled":"--b-text-link-disabled","TextLinkHover":"--b-text-link-hover","TextLinkPressed":"--b-text-link-pressed","TextPlaceholder":"--b-text-placeholder","TextSelection":"--b-text-selection"},
6
6
  "abbreviations": {
7
7
  "ba": {"kind":"static","defs":{"borderStyle":"solid","borderWidth":"1px"}},
8
8
  "bt": {"kind":"static","defs":{"borderTopStyle":"solid","borderTopWidth":"1px"}},
@@ -12,6 +12,7 @@
12
12
  "bn": {"kind":"static","defs":{"borderStyle":"none","borderWidth":"0"}},
13
13
  "bcWhite": {"kind":"static","defs":{"borderColor":"rgba(255, 255, 255, 1)"}},
14
14
  "bcTransparent": {"kind":"static","defs":{"borderColor":"rgba(0,0,0,0)"}},
15
+ "bcBlack": {"kind":"static","defs":{"borderColor":"rgba(0, 0, 0, 1)"}},
15
16
  "bcGray50": {"kind":"static","defs":{"borderColor":"rgba(255, 253, 253, 1)"}},
16
17
  "bcGray100": {"kind":"static","defs":{"borderColor":"rgba(247, 245, 245, 1)"}},
17
18
  "bcGray200": {"kind":"static","defs":{"borderColor":"rgba(236, 235, 235, 1)"}},
@@ -409,6 +410,7 @@
409
410
  "sbw": {"kind":"variable","props":["scrollbarWidth"],"incremented":false},
410
411
  "white": {"kind":"static","defs":{"color":"rgba(255, 255, 255, 1)"}},
411
412
  "transparent": {"kind":"static","defs":{"color":"rgba(0,0,0,0)"}},
413
+ "black": {"kind":"static","defs":{"color":"rgba(0, 0, 0, 1)"}},
412
414
  "gray50": {"kind":"static","defs":{"color":"rgba(255, 253, 253, 1)"}},
413
415
  "gray100": {"kind":"static","defs":{"color":"rgba(247, 245, 245, 1)"}},
414
416
  "gray200": {"kind":"static","defs":{"color":"rgba(236, 235, 235, 1)"}},
@@ -482,6 +484,7 @@
482
484
  "color": {"kind":"variable","props":["color"],"incremented":false},
483
485
  "bgWhite": {"kind":"static","defs":{"backgroundColor":"rgba(255, 255, 255, 1)"}},
484
486
  "bgTransparent": {"kind":"static","defs":{"backgroundColor":"rgba(0,0,0,0)"}},
487
+ "bgBlack": {"kind":"static","defs":{"backgroundColor":"rgba(0, 0, 0, 1)"}},
485
488
  "bgGray50": {"kind":"static","defs":{"backgroundColor":"rgba(255, 253, 253, 1)"}},
486
489
  "bgGray100": {"kind":"static","defs":{"backgroundColor":"rgba(247, 245, 245, 1)"}},
487
490
  "bgGray200": {"kind":"static","defs":{"backgroundColor":"rgba(236, 235, 235, 1)"}},
@@ -555,6 +558,7 @@
555
558
  "bgColor": {"kind":"variable","props":["backgroundColor"],"incremented":false},
556
559
  "fWhite": {"kind":"static","defs":{"fill":"rgba(255, 255, 255, 1)"}},
557
560
  "fTransparent": {"kind":"static","defs":{"fill":"rgba(0,0,0,0)"}},
561
+ "fBlack": {"kind":"static","defs":{"fill":"rgba(0, 0, 0, 1)"}},
558
562
  "fGray50": {"kind":"static","defs":{"fill":"rgba(255, 253, 253, 1)"}},
559
563
  "fGray100": {"kind":"static","defs":{"fill":"rgba(247, 245, 245, 1)"}},
560
564
  "fGray200": {"kind":"static","defs":{"fill":"rgba(236, 235, 235, 1)"}},
@@ -898,6 +902,9 @@
898
902
  "zInitial": {"kind":"static","defs":{"zIndex":"initial"}},
899
903
  "zUnset": {"kind":"static","defs":{"zIndex":"unset"}},
900
904
  "z": {"kind":"variable","props":["zIndex"],"incremented":false},
905
+ "aiBackground": {"kind":"static","defs":{"backgroundImage":"radial-gradient(40% 1000% at 35.83% 62.18%, rgba(239, 246, 255, 1) 0%, rgba(237, 233, 254, 1) 100%)"}},
906
+ "aiBoldBg": {"kind":"static","defs":{"backgroundImage":"linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"}},
907
+ "aiBoldText": {"kind":"static","defs":{"color":"rgba(109, 40, 217, 1)","backgroundImage":"linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)","backgroundClip":"text","WebkitBackgroundClip":"text","WebkitTextFillColor":"transparent"}},
901
908
  "sansSerif": {"kind":"static","defs":{"fontFamily":"'Inter', sans-serif"}},
902
909
  "fontFamily": {"kind":"variable","props":["fontFamily"],"incremented":false},
903
910
  "br8": {"kind":"static","defs":{"borderRadius":"8px"}},
package/dist/index.cjs CHANGED
@@ -403,6 +403,8 @@ module.exports = __toCommonJS(index_exports);
403
403
  // src/Css.ts
404
404
  var import_runtime = require("@homebound/truss/runtime");
405
405
  var Tokens = /* @__PURE__ */ ((Tokens4) => {
406
+ Tokens4["AiFieldBg"] = "--b-ai-field-bg";
407
+ Tokens4["AiFieldFg"] = "--b-ai-field-fg";
406
408
  Tokens4["ButtonCautionDisabledBg"] = "--b-button-caution-disabled-bg";
407
409
  Tokens4["ButtonCautionDisabledFg"] = "--b-button-caution-disabled-fg";
408
410
  Tokens4["ButtonDangerDisabledBg"] = "--b-button-danger-disabled-bg";
@@ -456,8 +458,8 @@ var Tokens = /* @__PURE__ */ ((Tokens4) => {
456
458
  Tokens4["NeutralSurfacePressed"] = "--b-neutral-surface-pressed";
457
459
  Tokens4["OnPrimary"] = "--b-on-primary";
458
460
  Tokens4["OnSurface"] = "--b-on-surface";
459
- Tokens4["OnSurfaceMuted"] = "--b-on-surface-muted";
460
461
  Tokens4["OnSurfaceDisabled"] = "--b-on-surface-disabled";
462
+ Tokens4["OnSurfaceMuted"] = "--b-on-surface-muted";
461
463
  Tokens4["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
462
464
  Tokens4["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
463
465
  Tokens4["Primary"] = "--b-primary";
@@ -467,11 +469,11 @@ var Tokens = /* @__PURE__ */ ((Tokens4) => {
467
469
  Tokens4["SelectionFill"] = "--b-selection-fill";
468
470
  Tokens4["SelectionIndicator"] = "--b-selection-indicator";
469
471
  Tokens4["Surface"] = "--b-surface";
472
+ Tokens4["SurfaceDisabled"] = "--b-surface-disabled";
470
473
  Tokens4["SurfaceHover"] = "--b-surface-hover";
471
474
  Tokens4["SurfaceRaised"] = "--b-surface-raised";
472
475
  Tokens4["SurfaceRaisedHover"] = "--b-surface-raised-hover";
473
476
  Tokens4["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
474
- Tokens4["SurfaceDisabled"] = "--b-surface-disabled";
475
477
  Tokens4["SurfaceSeparator"] = "--b-surface-separator";
476
478
  Tokens4["SurfaceSubtle"] = "--b-surface-subtle";
477
479
  Tokens4["TextDisabled"] = "--b-text-disabled";
@@ -523,6 +525,10 @@ var CssBuilder = class _CssBuilder {
523
525
  get bcTransparent() {
524
526
  return this.add("borderColor", "rgba(0,0,0,0)");
525
527
  }
528
+ /** Sets `borderColor: "rgba(0, 0, 0, 1)"`. */
529
+ get bcBlack() {
530
+ return this.add("borderColor", "rgba(0, 0, 0, 1)");
531
+ }
526
532
  /** Sets `borderColor: "rgba(255, 253, 253, 1)"`. */
527
533
  get bcGray50() {
528
534
  return this.add("borderColor", "rgba(255, 253, 253, 1)");
@@ -2183,6 +2189,10 @@ var CssBuilder = class _CssBuilder {
2183
2189
  get transparent() {
2184
2190
  return this.add("color", "rgba(0,0,0,0)");
2185
2191
  }
2192
+ /** Sets `color: "rgba(0, 0, 0, 1)"`. */
2193
+ get black() {
2194
+ return this.add("color", "rgba(0, 0, 0, 1)");
2195
+ }
2186
2196
  /** Sets `color: "rgba(255, 253, 253, 1)"`. */
2187
2197
  get gray50() {
2188
2198
  return this.add("color", "rgba(255, 253, 253, 1)");
@@ -2475,6 +2485,10 @@ var CssBuilder = class _CssBuilder {
2475
2485
  get bgTransparent() {
2476
2486
  return this.add("backgroundColor", "rgba(0,0,0,0)");
2477
2487
  }
2488
+ /** Sets `backgroundColor: "rgba(0, 0, 0, 1)"`. */
2489
+ get bgBlack() {
2490
+ return this.add("backgroundColor", "rgba(0, 0, 0, 1)");
2491
+ }
2478
2492
  /** Sets `backgroundColor: "rgba(255, 253, 253, 1)"`. */
2479
2493
  get bgGray50() {
2480
2494
  return this.add("backgroundColor", "rgba(255, 253, 253, 1)");
@@ -2767,6 +2781,10 @@ var CssBuilder = class _CssBuilder {
2767
2781
  get fTransparent() {
2768
2782
  return this.add("fill", "rgba(0,0,0,0)");
2769
2783
  }
2784
+ /** Sets `fill: "rgba(0, 0, 0, 1)"`. */
2785
+ get fBlack() {
2786
+ return this.add("fill", "rgba(0, 0, 0, 1)");
2787
+ }
2770
2788
  /** Sets `fill: "rgba(255, 253, 253, 1)"`. */
2771
2789
  get fGray50() {
2772
2790
  return this.add("fill", "rgba(255, 253, 253, 1)");
@@ -4221,6 +4239,28 @@ var CssBuilder = class _CssBuilder {
4221
4239
  z(value) {
4222
4240
  return this.add("zIndex", value);
4223
4241
  }
4242
+ // ai
4243
+ /** Sets `backgroundImage: "radial-gradient(40% 1000% at 35.83% 62.18%, rgba(239, 246, 255, 1) 0%, rgba(237, 233, 254, 1) 100%)"`. */
4244
+ get aiBackground() {
4245
+ return this.add(
4246
+ "backgroundImage",
4247
+ "radial-gradient(40% 1000% at 35.83% 62.18%, rgba(239, 246, 255, 1) 0%, rgba(237, 233, 254, 1) 100%)"
4248
+ );
4249
+ }
4250
+ /** Sets `backgroundImage: "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"`. */
4251
+ get aiBoldBg() {
4252
+ return this.add(
4253
+ "backgroundImage",
4254
+ "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"
4255
+ );
4256
+ }
4257
+ /** Sets `color: "rgba(109, 40, 217, 1)"; backgroundImage: "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"; backgroundClip: "text"; WebkitBackgroundClip: "text"; WebkitTextFillColor: "transparent"`. */
4258
+ get aiBoldText() {
4259
+ return this.add("color", "rgba(109, 40, 217, 1)").add(
4260
+ "backgroundImage",
4261
+ "linear-gradient(270deg, rgba(29, 78, 216, 1) 2.97%, rgba(109, 40, 217, 1) 87.08%)"
4262
+ ).add("backgroundClip", "text").add("WebkitBackgroundClip", "text").add("WebkitTextFillColor", "transparent");
4263
+ }
4224
4264
  // fontFamily
4225
4265
  /** Sets `fontFamily: "'Inter', sans-serif"`. */
4226
4266
  get sansSerif() {
@@ -4501,6 +4541,7 @@ function omitUndefinedValues(value) {
4501
4541
  var Palette = /* @__PURE__ */ ((Palette2) => {
4502
4542
  Palette2["White"] = "rgba(255, 255, 255, 1)";
4503
4543
  Palette2["Transparent"] = "rgba(0,0,0,0)";
4544
+ Palette2["Black"] = "rgba(0, 0, 0, 1)";
4504
4545
  Palette2["Gray50"] = "rgba(255, 253, 253, 1)";
4505
4546
  Palette2["Gray100"] = "rgba(247, 245, 245, 1)";
4506
4547
  Palette2["Gray200"] = "rgba(236, 235, 235, 1)";
@@ -10806,6 +10847,37 @@ function getButtonStyles(variant, size) {
10806
10847
  };
10807
10848
  }
10808
10849
  var variantStyles2 = {
10850
+ // Design applies their "AI Bold" ramp to the existing primary button. They haven't specified
10851
+ // hover/pressed/disabled, so those ramps are extrapolated from it rather than design-sourced.
10852
+ ai: {
10853
+ baseStyles: {
10854
+ backgroundImage: "aiBoldBg",
10855
+ color: ["color_var", {
10856
+ "--color": "var(--b-on-primary)"
10857
+ }]
10858
+ },
10859
+ hoverStyles: {
10860
+ backgroundImage: ["backgroundImage_var", {
10861
+ "--backgroundImage": (0, import_runtime31.maybeCssVar)(`linear-gradient(270deg, ${"rgba(30, 64, 175, 1)" /* Blue800 */}, ${"rgba(91, 33, 182, 1)" /* Purple800 */})`)
10862
+ }]
10863
+ },
10864
+ pressedStyles: {
10865
+ backgroundImage: ["backgroundImage_var", {
10866
+ "--backgroundImage": (0, import_runtime31.maybeCssVar)(`linear-gradient(270deg, ${"rgba(30, 58, 138, 1)" /* Blue900 */}, ${"rgba(76, 29, 149, 1)" /* Purple900 */})`)
10867
+ }]
10868
+ },
10869
+ disabledStyles: {
10870
+ backgroundImage: ["backgroundImage_var", {
10871
+ "--backgroundImage": (0, import_runtime31.maybeCssVar)(`linear-gradient(270deg, ${"rgba(191, 219, 254, 1)" /* Blue200 */}, ${"rgba(221, 214, 254, 1)" /* Purple200 */})`)
10872
+ }],
10873
+ color: ["color_var", {
10874
+ "--color": "var(--b-button-primary-disabled-fg)"
10875
+ }]
10876
+ },
10877
+ focusStyles: {
10878
+ boxShadow: "bshFocus"
10879
+ }
10880
+ },
10809
10881
  primary: {
10810
10882
  baseStyles: {
10811
10883
  backgroundColor: ["bgColor_var", {