tyrell-components 1.0.0-RC11 → 1.0.0-RC13

package/lib/styles/button.d.ts

@@ -1,14 +1,49 @@
 /**
  * Button Component Styles
  *
- * Three appearance variants × six semantic flavors × three tones (+/base/-).
+ * Three appearance variants × five semantic flavors × three tones (+/base/-).
  * Each variant uses ONE token system:
- *   - solid    → --ty-solid-{flavor}-{strong|base|soft}  (bg) + --ty-solid-{flavor}-fg (text)
- *   - outlined → --ty-color-{flavor}-{strong|base|soft}  (text === border)
- *   - ghost    → --ty-color-{flavor}-{strong|base|soft}  (text), --ty-bg-{flavor}-soft (hover)
+ *
+ *   - solid    → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
+ *               -strong,-soft,-fg}. Derived in tyrell-theme.css via OKLCH on
+ *               3 axes (color / hover-active / theme chroma-hue); literal in
+ *               tyrell.css. The component does no color math for the fill.
+ *               Depth chrome (border + drop shadow) IS computed here, from
+ *               the fill, via relative color — see "Depth chrome" below.
+ *   - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border at
+ *               rest); hover/active/focus always resolve to -strong,
+ *               whatever the resting tone was — see "Hover escalation".
+ *   - ghost    → same as outlined, text only (no border), --ty-bg-{flavor}-soft
+ *               background on hover.
+ *
+ * Neutral is the exception in both outlined and ghost: its `+` tone reads
+ * --ty-solid-neutral-strong (the ink dial solid buttons use — the only
+ * value that actually inverts light↔dark for full contrast) instead of the
+ * generic --ty-color-neutral-strong text-emphasis token. Base/soft neutral
+ * stay on the generic token like every other flavor.
+ *
+ * Depth chrome (solid only): a 1px border + soft drop shadow, both derived
+ * from the fill via oklch(from …), scaled by --ty-button-depth (0–1). The
+ * border reads the TONE'S RESTING fill (not the current/hover one) so it
+ * stays stationary while the fill rises toward it on interaction. Offset
+ * direction/magnitude is --ty-button-border-l (mode-flipped: no border at
+ * all for colored solids in dark, a lit edge in light) with its own
+ * stronger dial for neutral, --ty-button-border-l-neutral (ink has no hue
+ * to separate it from the canvas). Escape hatches --ty-solid-border-color
+ * / --ty-solid-border-width outrank the derivation entirely.
+ *
+ * Hover escalation (outlined/ghost): :hover/:active/:focus-visible always
+ * resolve to the -strong tier regardless of starting tone — soft and base
+ * both rise to the same peak on interaction. Composes with `muted` rather
+ * than fighting it (see the escalation rules themselves for the exact
+ * split) — a pressed muted button lands on the same color as a pressed
+ * plain one of the same flavor.
  *
  * Per-instance overrides via host CSS variables:
- *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border
+ *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border,
+ *   --ty-solid-border-color, --ty-solid-border-width
  */
-export declare const buttonStyles = "\n:host {\n  display: inline-block;\n  font-family: var(--ty-font-sans);\n}\n\n:host([wide]) {\n  display: flex;\n  flex-grow: 1;\n}\n\nbutton {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-1);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  font-weight: var(--ty-font-semibold);\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n  background: transparent;\n  color: var(--ty-color-neutral);\n  border: 1px solid transparent;\n}\n\nbutton:not(.action) {\n  min-width: 4rem;\n}\n\nbutton:not(.pill) {\n  border-radius: var(--ty-radius-md);\n}\n\nbutton.xs:not(.pill) { border-radius: var(--ty-button-radius-xs, var(--ty-radius-md)); }\nbutton.sm:not(.pill) { border-radius: var(--ty-button-radius-sm, var(--ty-radius-md)); }\nbutton.md:not(.pill) { border-radius: var(--ty-button-radius-md, var(--ty-radius-md)); }\nbutton.lg:not(.pill) { border-radius: var(--ty-button-radius-lg, var(--ty-radius-md)); }\nbutton.xl:not(.pill) { border-radius: var(--ty-button-radius-xl, var(--ty-radius-md)); }\n\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* ===== LOADING STATE =====\n   Spinner overlays the button center; original content kept in flow but\n   hidden via visibility so width/height are preserved (no layout shift).\n*/\n.loader-icon {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1em;\n  height: 1em;\n  color: currentColor;\n}\n.loader-icon svg {\n  width: 100%;\n  height: 100%;\n}\nbutton.loading {\n  cursor: wait;\n}\nbutton.loading > *:not(.loader-icon) {\n  visibility: hidden;\n}\nbutton.loading > .loader-icon {\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  animation: ty-button-spin 0.7s linear infinite;\n}\n@keyframes ty-button-spin {\n  to { transform: translate(-50%, -50%) rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n  button.loading > .loader-icon {\n    animation-duration: 1.6s;\n  }\n}\n\n::slotted(*) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n::slotted(ty-icon) {\n  flex-shrink: 0;\n}\n\n:host([wide]) button {\n  flex-grow: 1;\n}\n\n/* ===== SIZES ===== */\n\nbutton.xs {\n  padding: 0 var(--ty-spacing-2);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  gap: var(--ty-spacing-1);\n  height: 1.375rem;\n}\n\nbutton.sm {\n  padding: 0 var(--ty-spacing-2);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  gap: var(--ty-spacing-1);\n  height: 1.5rem;\n}\n\nbutton.md {\n  padding: 0.375rem var(--ty-spacing-3);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  gap: var(--ty-spacing-2);\n  height: 1.8rem;\n}\n\nbutton.lg {\n  padding: 0.375rem var(--ty-spacing-4);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  gap: var(--ty-spacing-2);\n  height: 2.1rem;\n}\n\nbutton.xl {\n  padding: var(--ty-spacing-2) var(--ty-spacing-6);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n  gap: var(--ty-spacing-2);\n  height: 2.3rem;\n}\n\n/* ===== ACTION (icon-only square) ===== */\n\nbutton.action {\n  gap: 0px !important;\n  height: 2rem;\n  width: 2rem;\n  padding: 0px !important;\n}\n\nbutton.action ::slotted(ty-icon) {\n  height: 1rem;\n  width: 1rem;\n}\n\nbutton.action.xs { height: 1.375rem; width: 1.375rem; }\nbutton.action.xs ::slotted(ty-icon) { height: 0.75rem; width: 0.75rem; }\n\nbutton.action.sm { height: 1.5rem; width: 1.5rem; }\nbutton.action.sm ::slotted(ty-icon) { height: 0.875rem; width: 0.875rem; }\n\nbutton.action.lg { height: 2.25rem; width: 2.25rem; }\nbutton.action.lg ::slotted(ty-icon) { height: 1.125rem; width: 1.125rem; }\n\nbutton.action.xl { height: 2.5rem; width: 2.5rem; }\nbutton.action.xl ::slotted(ty-icon) { height: 1.25rem; width: 1.25rem; }\n\n/* ===== PILL ===== */\n\nbutton.pill {\n  border-radius: 9999px;\n  padding-left: 1.25em;\n  padding-right: 1.25em;\n}\n\nbutton.pill.xs { padding-left: 1em; padding-right: 1em; }\nbutton.pill.sm { padding-left: 1.125em; padding-right: 1.125em; }\nbutton.pill.lg { padding-left: 1.5em; padding-right: 1.5em; }\nbutton.pill.xl { padding-left: 1.75em; padding-right: 1.75em; }\n\nbutton.pill:has(ty-icon:only-child),\nbutton.pill:has(slot[name=\"start\"]:only-child),\nbutton.pill:has(slot[name=\"end\"]:only-child) {\n  padding: 0;\n  aspect-ratio: 1;\n  min-width: var(--ty-size-md);\n}\n\nbutton.pill.xs:has(ty-icon:only-child) { min-width: 1.375rem; min-height: 1.375rem; }\nbutton.pill.sm:has(ty-icon:only-child) { min-width: 1.5rem; min-height: 1.5rem; }\nbutton.pill.md:has(ty-icon:only-child) { min-width: 2rem; min-height: 2rem; }\nbutton.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem; }\nbutton.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }\n\n/* ============================================================\n   SOLID \u2014 saturated brand fill (uses --ty-solid-{flavor}-* tokens)\n   Bare .solid rule = fallback for custom flavors (theme via --ty-button-*).\n   ============================================================ */\n\nbutton.solid {\n  border: none;\n  background: var(--ty-button-bg, var(--ty-solid-neutral));\n  color:      var(--ty-button-color, var(--ty-solid-neutral-fg));\n}\nbutton.solid:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-button-bg, var(--ty-solid-neutral-strong)));\n}\n\n/* Primary */\nbutton.solid.primary {\n  background: var(--ty-button-bg, var(--ty-solid-primary));\n  color:      var(--ty-button-color, var(--ty-solid-primary-fg));\n}\nbutton.solid.primary.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-primary-strong)); }\nbutton.solid.primary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-primary-soft)); }\nbutton.solid.primary:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-solid-primary-strong));\n}\nbutton.solid.primary:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-primary);\n}\n\n/* Secondary */\nbutton.solid.secondary {\n  background: var(--ty-button-bg, var(--ty-solid-secondary));\n  color:      var(--ty-button-color, var(--ty-solid-secondary-fg));\n}\nbutton.solid.secondary.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-secondary-strong)); }\nbutton.solid.secondary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-secondary-soft)); }\nbutton.solid.secondary:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-solid-secondary-strong));\n}\nbutton.solid.secondary:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-secondary);\n}\n\n/* Success */\nbutton.solid.success {\n  background: var(--ty-button-bg, var(--ty-solid-success));\n  color:      var(--ty-button-color, var(--ty-solid-success-fg));\n}\nbutton.solid.success.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-success-strong)); }\nbutton.solid.success.tone-minus { background: var(--ty-button-bg, var(--ty-solid-success-soft)); }\nbutton.solid.success:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-solid-success-strong));\n}\nbutton.solid.success:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-success);\n}\n\n/* Danger */\nbutton.solid.danger {\n  background: var(--ty-button-bg, var(--ty-solid-danger));\n  color:      var(--ty-button-color, var(--ty-solid-danger-fg));\n}\nbutton.solid.danger.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-danger-strong)); }\nbutton.solid.danger.tone-minus { background: var(--ty-button-bg, var(--ty-solid-danger-soft)); }\nbutton.solid.danger:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-solid-danger-strong));\n}\nbutton.solid.danger:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-danger);\n}\n\n/* Warning */\nbutton.solid.warning {\n  background: var(--ty-button-bg, var(--ty-solid-warning));\n  color:      var(--ty-button-color, var(--ty-solid-warning-fg));\n}\nbutton.solid.warning.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-warning-strong)); }\nbutton.solid.warning.tone-minus { background: var(--ty-button-bg, var(--ty-solid-warning-soft)); }\nbutton.solid.warning:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-solid-warning-strong));\n}\nbutton.solid.warning:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-warning);\n}\n\n/* Neutral */\nbutton.solid.neutral {\n  background: var(--ty-button-bg, var(--ty-solid-neutral));\n  color:      var(--ty-button-color, var(--ty-solid-neutral-fg));\n}\nbutton.solid.neutral.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }\nbutton.solid.neutral.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }\nbutton.solid.neutral:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-solid-neutral-strong));\n}\nbutton.solid.neutral:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-neutral);\n}\n\n/* ============================================================\n   OUTLINED \u2014 transparent bg, text === border (uses --ty-color-*)\n   Bare .outlined rule = fallback for custom flavors. For outlined,\n   text is bound to border color (the rule \"text === border\"), so the\n   fallback chain prefers --ty-button-border, then --ty-button-color.\n   ============================================================ */\n\nbutton.outlined {\n  background: transparent;\n  color:        var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));\n  border-color: var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));\n}\nbutton.outlined:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* Primary */\nbutton.outlined.primary {\n  color:        var(--ty-button-color,  var(--ty-color-primary));\n  border-color: var(--ty-button-border, var(--ty-color-primary));\n}\nbutton.outlined.primary.tone-plus {\n  color:        var(--ty-button-color,  var(--ty-color-primary-strong));\n  border-color: var(--ty-button-border, var(--ty-color-primary-strong));\n}\nbutton.outlined.primary.tone-minus {\n  color:        var(--ty-button-color,  var(--ty-color-primary-soft));\n  border-color: var(--ty-button-border, var(--ty-color-primary-soft));\n}\nbutton.outlined.primary:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-primary-soft));\n}\n\n/* Secondary */\nbutton.outlined.secondary {\n  color:        var(--ty-button-color,  var(--ty-color-secondary));\n  border-color: var(--ty-button-border, var(--ty-color-secondary));\n}\nbutton.outlined.secondary.tone-plus {\n  color:        var(--ty-button-color,  var(--ty-color-secondary-strong));\n  border-color: var(--ty-button-border, var(--ty-color-secondary-strong));\n}\nbutton.outlined.secondary.tone-minus {\n  color:        var(--ty-button-color,  var(--ty-color-secondary-soft));\n  border-color: var(--ty-button-border, var(--ty-color-secondary-soft));\n}\nbutton.outlined.secondary:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-secondary-soft));\n}\n\n/* Success */\nbutton.outlined.success {\n  color:        var(--ty-button-color,  var(--ty-color-success));\n  border-color: var(--ty-button-border, var(--ty-color-success));\n}\nbutton.outlined.success.tone-plus {\n  color:        var(--ty-button-color,  var(--ty-color-success-strong));\n  border-color: var(--ty-button-border, var(--ty-color-success-strong));\n}\nbutton.outlined.success.tone-minus {\n  color:        var(--ty-button-color,  var(--ty-color-success-soft));\n  border-color: var(--ty-button-border, var(--ty-color-success-soft));\n}\nbutton.outlined.success:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-success-soft));\n}\n\n/* Danger */\nbutton.outlined.danger {\n  color:        var(--ty-button-color,  var(--ty-color-danger));\n  border-color: var(--ty-button-border, var(--ty-color-danger));\n}\nbutton.outlined.danger.tone-plus {\n  color:        var(--ty-button-color,  var(--ty-color-danger-strong));\n  border-color: var(--ty-button-border, var(--ty-color-danger-strong));\n}\nbutton.outlined.danger.tone-minus {\n  color:        var(--ty-button-color,  var(--ty-color-danger-soft));\n  border-color: var(--ty-button-border, var(--ty-color-danger-soft));\n}\nbutton.outlined.danger:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-danger-soft));\n}\n\n/* Warning */\nbutton.outlined.warning {\n  color:        var(--ty-button-color,  var(--ty-color-warning));\n  border-color: var(--ty-button-border, var(--ty-color-warning));\n}\nbutton.outlined.warning.tone-plus {\n  color:        var(--ty-button-color,  var(--ty-color-warning-strong));\n  border-color: var(--ty-button-border, var(--ty-color-warning-strong));\n}\nbutton.outlined.warning.tone-minus {\n  color:        var(--ty-button-color,  var(--ty-color-warning-soft));\n  border-color: var(--ty-button-border, var(--ty-color-warning-soft));\n}\nbutton.outlined.warning:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-warning-soft));\n}\n\n/* Neutral */\nbutton.outlined.neutral {\n  color:        var(--ty-button-color,  var(--ty-color-neutral));\n  border-color: var(--ty-button-border, var(--ty-color-neutral));\n}\nbutton.outlined.neutral.tone-plus {\n  color:        var(--ty-button-color,  var(--ty-color-neutral-strong));\n  border-color: var(--ty-button-border, var(--ty-color-neutral-strong));\n}\nbutton.outlined.neutral.tone-minus {\n  color:        var(--ty-button-color,  var(--ty-color-neutral-soft));\n  border-color: var(--ty-button-border, var(--ty-color-neutral-soft));\n}\nbutton.outlined.neutral:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* ============================================================\n   GHOST \u2014 text only, hover bg (uses --ty-color-* + --ty-bg-*-soft)\n   Bare .ghost rule = fallback for custom flavors.\n   ============================================================ */\n\nbutton.ghost {\n  background: transparent;\n  border: none;\n  color: var(--ty-button-color, var(--ty-color-neutral));\n}\nbutton.ghost:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* Primary */\nbutton.ghost.primary            { color: var(--ty-button-color, var(--ty-color-primary)); }\nbutton.ghost.primary.tone-plus  { color: var(--ty-button-color, var(--ty-color-primary-strong)); }\nbutton.ghost.primary.tone-minus { color: var(--ty-button-color, var(--ty-color-primary-soft)); }\nbutton.ghost.primary:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-primary-soft));\n}\n\n/* Secondary */\nbutton.ghost.secondary            { color: var(--ty-button-color, var(--ty-color-secondary)); }\nbutton.ghost.secondary.tone-plus  { color: var(--ty-button-color, var(--ty-color-secondary-strong)); }\nbutton.ghost.secondary.tone-minus { color: var(--ty-button-color, var(--ty-color-secondary-soft)); }\nbutton.ghost.secondary:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-secondary-soft));\n}\n\n/* Success */\nbutton.ghost.success            { color: var(--ty-button-color, var(--ty-color-success)); }\nbutton.ghost.success.tone-plus  { color: var(--ty-button-color, var(--ty-color-success-strong)); }\nbutton.ghost.success.tone-minus { color: var(--ty-button-color, var(--ty-color-success-soft)); }\nbutton.ghost.success:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-success-soft));\n}\n\n/* Danger */\nbutton.ghost.danger            { color: var(--ty-button-color, var(--ty-color-danger)); }\nbutton.ghost.danger.tone-plus  { color: var(--ty-button-color, var(--ty-color-danger-strong)); }\nbutton.ghost.danger.tone-minus { color: var(--ty-button-color, var(--ty-color-danger-soft)); }\nbutton.ghost.danger:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-danger-soft));\n}\n\n/* Warning */\nbutton.ghost.warning            { color: var(--ty-button-color, var(--ty-color-warning)); }\nbutton.ghost.warning.tone-plus  { color: var(--ty-button-color, var(--ty-color-warning-strong)); }\nbutton.ghost.warning.tone-minus { color: var(--ty-button-color, var(--ty-color-warning-soft)); }\nbutton.ghost.warning:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-warning-soft));\n}\n\n/* Neutral */\nbutton.ghost.neutral            { color: var(--ty-button-color, var(--ty-color-neutral)); }\nbutton.ghost.neutral.tone-plus  { color: var(--ty-button-color, var(--ty-color-neutral-strong)); }\nbutton.ghost.neutral.tone-minus { color: var(--ty-button-color, var(--ty-color-neutral-soft)); }\nbutton.ghost.neutral:hover:not(:disabled) {\n  background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n";
+/** Rules for one custom (non-built-in) flavor across all three appearances. */
+export declare const buttonCustomFlavorCss: (base: string) => string;
+export declare const buttonStyles: string;
 //# sourceMappingURL=button.d.ts.map

package/lib/styles/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,YAAY,4riBAoexB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AA6IH,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,WAC6C,CAAA;AAE/F,eAAO,MAAM,YAAY,QA0WsB,CAAC"}