tyrell-components 1.0.0-TC23 → 1.0.0-TC24
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/css/tyrell-brand.css +176 -78
- package/css/tyrell-simple.css +257 -0
- package/css/tyrell.css +30 -16
- package/dist/tyrell-brand.css +176 -78
- package/dist/tyrell.css +30 -16
- package/dist/tyrell.js +1 -1
- package/lib/styles/button.d.ts +5 -2
- package/lib/styles/button.d.ts.map +1 -1
- package/lib/styles/button.js +35 -71
- package/lib/styles/button.js.map +1 -1
- package/lib/styles/tag.d.ts +1 -1
- package/lib/styles/tag.d.ts.map +1 -1
- package/lib/styles/tag.js +5 -5
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
package/lib/styles/button.d.ts
CHANGED
|
@@ -3,12 +3,15 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Three appearance variants × six semantic flavors × three tones (+/base/-).
|
|
5
5
|
* Each variant uses ONE token system:
|
|
6
|
-
* - solid →
|
|
6
|
+
* - solid → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
|
|
7
|
+
* -strong,-soft,-fg}. Derived in tyrell-brand.css via OKLCH on
|
|
8
|
+
* 3 axes (color / hover-active / theme chroma-hue); literal in
|
|
9
|
+
* tyrell.css. The component does no color math.
|
|
7
10
|
* - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border)
|
|
8
11
|
* - ghost → --ty-color-{flavor}-{strong|base|soft} (text), --ty-bg-{flavor}-soft (hover)
|
|
9
12
|
*
|
|
10
13
|
* Per-instance overrides via host CSS variables:
|
|
11
14
|
* --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border
|
|
12
15
|
*/
|
|
13
|
-
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";
|
|
16
|
+
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 flat: one variable per segment. No color math here; all the\n --ty-solid-{flavor}-{hover,active,strong,soft} tokens are DERIVED in\n tyrell-brand.css (OKLCH) or set literally in tyrell.css. Override any\n single token to recolor that one segment. Bare .solid = custom-flavor\n fallback, themable via --ty-button-{bg,bg-hover,color}.\n ============================================================ */\n\nbutton.solid {\n border: none;\n --_ring: var(--ty-color-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.tone-plus { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }\nbutton.solid.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }\nbutton.solid:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }\nbutton.solid:active:not(:disabled) { background: var(--ty-solid-neutral-active); }\n\nbutton.solid.primary { --_ring: var(--ty-color-primary); background: var(--ty-button-bg, var(--ty-solid-primary)); color: var(--ty-button-color, var(--ty-solid-primary-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-primary-hover)); }\nbutton.solid.primary:active:not(:disabled) { background: var(--ty-solid-primary-active); }\n\nbutton.solid.secondary { --_ring: var(--ty-color-secondary); background: var(--ty-button-bg, var(--ty-solid-secondary)); color: var(--ty-button-color, var(--ty-solid-secondary-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-secondary-hover)); }\nbutton.solid.secondary:active:not(:disabled) { background: var(--ty-solid-secondary-active); }\n\nbutton.solid.success { --_ring: var(--ty-color-success); background: var(--ty-button-bg, var(--ty-solid-success)); color: var(--ty-button-color, var(--ty-solid-success-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-success-hover)); }\nbutton.solid.success:active:not(:disabled) { background: var(--ty-solid-success-active); }\n\nbutton.solid.danger { --_ring: var(--ty-color-danger); background: var(--ty-button-bg, var(--ty-solid-danger)); color: var(--ty-button-color, var(--ty-solid-danger-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-danger-hover)); }\nbutton.solid.danger:active:not(:disabled) { background: var(--ty-solid-danger-active); }\n\nbutton.solid.warning { --_ring: var(--ty-color-warning); background: var(--ty-button-bg, var(--ty-solid-warning)); color: var(--ty-button-color, var(--ty-solid-warning-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-warning-hover)); }\nbutton.solid.warning:active:not(:disabled) { background: var(--ty-solid-warning-active); }\n\nbutton.solid.neutral { --_ring: var(--ty-color-neutral); background: var(--ty-button-bg, var(--ty-solid-neutral)); color: var(--ty-button-color, var(--ty-solid-neutral-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }\nbutton.solid.neutral:active:not(:disabled) { background: var(--ty-solid-neutral-active); }\n\nbutton.solid:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);\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";
|
|
14
17
|
//# sourceMappingURL=button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,eAAO,MAAM,YAAY,mnjBA6bxB,CAAC"}
|
package/lib/styles/button.js
CHANGED
|
@@ -3,7 +3,10 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Three appearance variants × six semantic flavors × three tones (+/base/-).
|
|
5
5
|
* Each variant uses ONE token system:
|
|
6
|
-
* - solid →
|
|
6
|
+
* - solid → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
|
|
7
|
+
* -strong,-soft,-fg}. Derived in tyrell-brand.css via OKLCH on
|
|
8
|
+
* 3 axes (color / hover-active / theme chroma-hue); literal in
|
|
9
|
+
* tyrell.css. The component does no color math.
|
|
7
10
|
* - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border)
|
|
8
11
|
* - ghost → --ty-color-{flavor}-{strong|base|soft} (text), --ty-bg-{flavor}-soft (hover)
|
|
9
12
|
*
|
|
@@ -218,101 +221,62 @@ button.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem
|
|
|
218
221
|
button.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }
|
|
219
222
|
|
|
220
223
|
/* ============================================================
|
|
221
|
-
SOLID —
|
|
222
|
-
|
|
224
|
+
SOLID — flat: one variable per segment. No color math here; all the
|
|
225
|
+
--ty-solid-{flavor}-{hover,active,strong,soft} tokens are DERIVED in
|
|
226
|
+
tyrell-brand.css (OKLCH) or set literally in tyrell.css. Override any
|
|
227
|
+
single token to recolor that one segment. Bare .solid = custom-flavor
|
|
228
|
+
fallback, themable via --ty-button-{bg,bg-hover,color}.
|
|
223
229
|
============================================================ */
|
|
224
230
|
|
|
225
231
|
button.solid {
|
|
226
232
|
border: none;
|
|
233
|
+
--_ring: var(--ty-color-neutral);
|
|
227
234
|
background: var(--ty-button-bg, var(--ty-solid-neutral));
|
|
228
235
|
color: var(--ty-button-color, var(--ty-solid-neutral-fg));
|
|
229
236
|
}
|
|
230
|
-
button.solid:
|
|
231
|
-
|
|
232
|
-
}
|
|
237
|
+
button.solid.tone-plus { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }
|
|
238
|
+
button.solid.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }
|
|
239
|
+
button.solid:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }
|
|
240
|
+
button.solid:active:not(:disabled) { background: var(--ty-solid-neutral-active); }
|
|
233
241
|
|
|
234
|
-
|
|
235
|
-
button.solid.primary {
|
|
236
|
-
background: var(--ty-button-bg, var(--ty-solid-primary));
|
|
237
|
-
color: var(--ty-button-color, var(--ty-solid-primary-fg));
|
|
238
|
-
}
|
|
242
|
+
button.solid.primary { --_ring: var(--ty-color-primary); background: var(--ty-button-bg, var(--ty-solid-primary)); color: var(--ty-button-color, var(--ty-solid-primary-fg)); }
|
|
239
243
|
button.solid.primary.tone-plus { background: var(--ty-button-bg, var(--ty-solid-primary-strong)); }
|
|
240
244
|
button.solid.primary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-primary-soft)); }
|
|
241
|
-
button.solid.primary:hover:not(:disabled)
|
|
242
|
-
|
|
243
|
-
}
|
|
244
|
-
button.solid.primary:focus-visible {
|
|
245
|
-
box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-primary);
|
|
246
|
-
}
|
|
245
|
+
button.solid.primary:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-primary-hover)); }
|
|
246
|
+
button.solid.primary:active:not(:disabled) { background: var(--ty-solid-primary-active); }
|
|
247
247
|
|
|
248
|
-
|
|
249
|
-
button.solid.secondary {
|
|
250
|
-
background: var(--ty-button-bg, var(--ty-solid-secondary));
|
|
251
|
-
color: var(--ty-button-color, var(--ty-solid-secondary-fg));
|
|
252
|
-
}
|
|
248
|
+
button.solid.secondary { --_ring: var(--ty-color-secondary); background: var(--ty-button-bg, var(--ty-solid-secondary)); color: var(--ty-button-color, var(--ty-solid-secondary-fg)); }
|
|
253
249
|
button.solid.secondary.tone-plus { background: var(--ty-button-bg, var(--ty-solid-secondary-strong)); }
|
|
254
250
|
button.solid.secondary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-secondary-soft)); }
|
|
255
|
-
button.solid.secondary:hover:not(:disabled)
|
|
256
|
-
|
|
257
|
-
}
|
|
258
|
-
button.solid.secondary:focus-visible {
|
|
259
|
-
box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-secondary);
|
|
260
|
-
}
|
|
251
|
+
button.solid.secondary:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-secondary-hover)); }
|
|
252
|
+
button.solid.secondary:active:not(:disabled) { background: var(--ty-solid-secondary-active); }
|
|
261
253
|
|
|
262
|
-
|
|
263
|
-
button.solid.success {
|
|
264
|
-
background: var(--ty-button-bg, var(--ty-solid-success));
|
|
265
|
-
color: var(--ty-button-color, var(--ty-solid-success-fg));
|
|
266
|
-
}
|
|
254
|
+
button.solid.success { --_ring: var(--ty-color-success); background: var(--ty-button-bg, var(--ty-solid-success)); color: var(--ty-button-color, var(--ty-solid-success-fg)); }
|
|
267
255
|
button.solid.success.tone-plus { background: var(--ty-button-bg, var(--ty-solid-success-strong)); }
|
|
268
256
|
button.solid.success.tone-minus { background: var(--ty-button-bg, var(--ty-solid-success-soft)); }
|
|
269
|
-
button.solid.success:hover:not(:disabled)
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
button.solid.success:focus-visible {
|
|
273
|
-
box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-success);
|
|
274
|
-
}
|
|
257
|
+
button.solid.success:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-success-hover)); }
|
|
258
|
+
button.solid.success:active:not(:disabled) { background: var(--ty-solid-success-active); }
|
|
275
259
|
|
|
276
|
-
|
|
277
|
-
button.solid.danger {
|
|
278
|
-
background: var(--ty-button-bg, var(--ty-solid-danger));
|
|
279
|
-
color: var(--ty-button-color, var(--ty-solid-danger-fg));
|
|
280
|
-
}
|
|
260
|
+
button.solid.danger { --_ring: var(--ty-color-danger); background: var(--ty-button-bg, var(--ty-solid-danger)); color: var(--ty-button-color, var(--ty-solid-danger-fg)); }
|
|
281
261
|
button.solid.danger.tone-plus { background: var(--ty-button-bg, var(--ty-solid-danger-strong)); }
|
|
282
262
|
button.solid.danger.tone-minus { background: var(--ty-button-bg, var(--ty-solid-danger-soft)); }
|
|
283
|
-
button.solid.danger:hover:not(:disabled)
|
|
284
|
-
|
|
285
|
-
}
|
|
286
|
-
button.solid.danger:focus-visible {
|
|
287
|
-
box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-danger);
|
|
288
|
-
}
|
|
263
|
+
button.solid.danger:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-danger-hover)); }
|
|
264
|
+
button.solid.danger:active:not(:disabled) { background: var(--ty-solid-danger-active); }
|
|
289
265
|
|
|
290
|
-
|
|
291
|
-
button.solid.warning {
|
|
292
|
-
background: var(--ty-button-bg, var(--ty-solid-warning));
|
|
293
|
-
color: var(--ty-button-color, var(--ty-solid-warning-fg));
|
|
294
|
-
}
|
|
266
|
+
button.solid.warning { --_ring: var(--ty-color-warning); background: var(--ty-button-bg, var(--ty-solid-warning)); color: var(--ty-button-color, var(--ty-solid-warning-fg)); }
|
|
295
267
|
button.solid.warning.tone-plus { background: var(--ty-button-bg, var(--ty-solid-warning-strong)); }
|
|
296
268
|
button.solid.warning.tone-minus { background: var(--ty-button-bg, var(--ty-solid-warning-soft)); }
|
|
297
|
-
button.solid.warning:hover:not(:disabled)
|
|
298
|
-
|
|
299
|
-
}
|
|
300
|
-
button.solid.warning:focus-visible {
|
|
301
|
-
box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-warning);
|
|
302
|
-
}
|
|
269
|
+
button.solid.warning:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-warning-hover)); }
|
|
270
|
+
button.solid.warning:active:not(:disabled) { background: var(--ty-solid-warning-active); }
|
|
303
271
|
|
|
304
|
-
|
|
305
|
-
button.solid.neutral {
|
|
306
|
-
background: var(--ty-button-bg, var(--ty-solid-neutral));
|
|
307
|
-
color: var(--ty-button-color, var(--ty-solid-neutral-fg));
|
|
308
|
-
}
|
|
272
|
+
button.solid.neutral { --_ring: var(--ty-color-neutral); background: var(--ty-button-bg, var(--ty-solid-neutral)); color: var(--ty-button-color, var(--ty-solid-neutral-fg)); }
|
|
309
273
|
button.solid.neutral.tone-plus { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }
|
|
310
274
|
button.solid.neutral.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }
|
|
311
|
-
button.solid.neutral:hover:not(:disabled)
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
button.solid
|
|
315
|
-
box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--
|
|
275
|
+
button.solid.neutral:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }
|
|
276
|
+
button.solid.neutral:active:not(:disabled) { background: var(--ty-solid-neutral-active); }
|
|
277
|
+
|
|
278
|
+
button.solid:focus-visible {
|
|
279
|
+
box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);
|
|
316
280
|
}
|
|
317
281
|
|
|
318
282
|
/* ============================================================
|
package/lib/styles/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6b3B,CAAC"}
|
package/lib/styles/tag.d.ts
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Tag Component Styles
|
|
3
3
|
* PORTED FROM: clj/ty/components/tag.css
|
|
4
4
|
*/
|
|
5
|
-
export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n display: none !important;\n}\n\n/* Main container */\n.tag-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-1);\n /* Default pill shape - can be overridden */\n border-radius: var(--ty-radius-full);\n font-weight: var(--ty-font-medium);\n text-align: center;\n white-space: nowrap;\n user-select: none;\n box-sizing: border-box;\n\n /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n padding: 0 0.625rem; /* 0 10px */\n font-size: var(--ty-font-xs); /* 14px */\n line-height: var(--ty-leading-xs); /* 21px */\n letter-spacing: var(--ty-tracking-xs); /* -0.013em */\n min-height: 28px;\n\n /* Transitions using centralized values */\n transition: var(--ty-transition-all);\n\n /* Colors via custom properties \u2014 override on :host for full control */\n background: var(--tag-bg, transparent);\n color: var(--tag-color, var(--ty-text));\n border: 1px solid;\n border-color: var(--tag-border-color, var(--ty-border));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n border-radius: var(--ty-radius-md);\n /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n background: var(--ty-bg-neutral-soft);\n transform: translateY(-1px);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n transform: translateY(0);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.tag-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n background: none;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--ty-radius-full);\n transition: var(--ty-transition-all);\n opacity: 0.7;\n flex-shrink: 0;\n /* Default MD dismiss button size */\n width: var(--ty-spacing-4);\n /* 16px */\n height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n width: 100%;\n height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n padding: 0 0.375rem; /* 0 6px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n padding: 0 var(--ty-spacing-2); /* 0 8px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n padding: 0 var(--ty-spacing-3); /* 0 12px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n padding: 0 0.875rem; /* 0 14px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n Append '+' to flavor for a stronger shade (mild background, strong color),\n or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n --tag-bg: var(--ty-bg-primary);\n --tag-color: var(--ty-color-primary-strong);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n --tag-bg: var(--ty-bg-primary-bold);\n --tag-color: var(--ty-color-primary-strong);\n --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n --tag-bg: var(--ty-bg-primary-soft);\n --tag-color: var(--ty-color-primary);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-primary-bold);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n --tag-bg: var(--ty-bg-secondary);\n --tag-color: var(--ty-color-secondary-strong);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n --tag-bg: var(--ty-bg-secondary-bold);\n --tag-color: var(--ty-color-secondary-strong);\n --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n --tag-bg: var(--ty-bg-secondary-soft);\n --tag-color: var(--ty-color-secondary);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-secondary-bold);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n --tag-bg: var(--ty-bg-success);\n --tag-color: var(--ty-color-success-strong);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n --tag-bg: var(--ty-bg-success-bold);\n --tag-color: var(--ty-color-success-strong);\n --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n --tag-bg: var(--ty-bg-success-soft);\n --tag-color: var(--ty-color-success);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-success-bold);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n --tag-bg: var(--ty-bg-danger);\n --tag-color: var(--ty-color-danger-strong);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n --tag-bg: var(--ty-bg-danger-bold);\n --tag-color: var(--ty-color-danger-strong);\n --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n --tag-bg: var(--ty-bg-danger-soft);\n --tag-color: var(--ty-color-danger);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-danger-bold);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n --tag-bg: var(--ty-bg-warning);\n --tag-color: var(--ty-color-warning-strong);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n --tag-bg: var(--ty-bg-warning-bold);\n --tag-color: var(--ty-color-warning-strong);\n --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n --tag-bg: var(--ty-bg-warning-soft);\n --tag-color: var(--ty-color-warning);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-warning-bold);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral\"]) {\n --tag-color: var(--ty-text-bold);\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-border-color: var(--ty-border-bold);\n}\n\n:host([flavor=\"neutral+\"]) {\n --tag-bg: var(--ty-bg-neutral-bold);\n --tag-color: var(--ty-text-bold);\n --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-color: var(--ty-text-soft);\n --tag-border-color: var(--ty-border);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n display: flex;\n align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--ty-spacing-6);\n /* 24px */\n height: var(--ty-spacing-5);\n /* 20px */\n padding: 0 var(--ty-spacing-2);\n /* 0 8px */\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--ty-radius-full);\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n line-height: var(--ty-line-height-none);\n flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n min-width: var(--ty-spacing-20);\n /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
|
|
5
|
+
export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n display: none !important;\n}\n\n/* Main container */\n.tag-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-1);\n /* Default pill shape - can be overridden */\n border-radius: var(--ty-radius-full);\n font-weight: var(--ty-font-medium);\n text-align: center;\n white-space: nowrap;\n user-select: none;\n box-sizing: border-box;\n\n /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n padding: 0 0.625rem; /* 0 10px */\n font-size: var(--ty-font-xs); /* 14px */\n line-height: var(--ty-leading-xs); /* 21px */\n letter-spacing: var(--ty-tracking-xs); /* -0.013em */\n min-height: 28px;\n\n /* Transitions using centralized values */\n transition: var(--ty-transition-all);\n\n /* Colors via custom properties \u2014 override on :host for full control */\n background: var(--tag-bg, transparent);\n color: var(--tag-color, var(--ty-text));\n border: 1px solid;\n border-color: var(--tag-border-color, var(--ty-border));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n border-radius: var(--ty-radius-md);\n /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n background: var(--ty-bg-neutral-soft);\n transform: translateY(-1px);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n transform: translateY(0);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.tag-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n background: none;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--ty-radius-full);\n transition: var(--ty-transition-all);\n opacity: 0.7;\n flex-shrink: 0;\n /* Default MD dismiss button size */\n width: var(--ty-spacing-4);\n /* 16px */\n height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n width: 100%;\n height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n padding: 0 0.375rem; /* 0 6px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n padding: 0 var(--ty-spacing-2); /* 0 8px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n padding: 0 var(--ty-spacing-3); /* 0 12px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n padding: 0 0.875rem; /* 0 14px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n Append '+' to flavor for a stronger shade (mild background, strong color),\n or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n --tag-bg: var(--ty-bg-primary);\n --tag-color: var(--ty-color-primary);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n --tag-bg: var(--ty-bg-primary-bold);\n --tag-color: var(--ty-color-primary-strong);\n --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n --tag-bg: var(--ty-bg-primary-soft);\n --tag-color: var(--ty-color-primary);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-primary-bold);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n --tag-bg: var(--ty-bg-secondary);\n --tag-color: var(--ty-color-secondary);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n --tag-bg: var(--ty-bg-secondary-bold);\n --tag-color: var(--ty-color-secondary-strong);\n --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n --tag-bg: var(--ty-bg-secondary-soft);\n --tag-color: var(--ty-color-secondary);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-secondary-bold);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n --tag-bg: var(--ty-bg-success);\n --tag-color: var(--ty-color-success);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n --tag-bg: var(--ty-bg-success-bold);\n --tag-color: var(--ty-color-success-strong);\n --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n --tag-bg: var(--ty-bg-success-soft);\n --tag-color: var(--ty-color-success);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-success-bold);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n --tag-bg: var(--ty-bg-danger);\n --tag-color: var(--ty-color-danger);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n --tag-bg: var(--ty-bg-danger-bold);\n --tag-color: var(--ty-color-danger-strong);\n --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n --tag-bg: var(--ty-bg-danger-soft);\n --tag-color: var(--ty-color-danger);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-danger-bold);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n --tag-bg: var(--ty-bg-warning);\n --tag-color: var(--ty-color-warning);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n --tag-bg: var(--ty-bg-warning-bold);\n --tag-color: var(--ty-color-warning-strong);\n --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n --tag-bg: var(--ty-bg-warning-soft);\n --tag-color: var(--ty-color-warning);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-warning-bold);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral\"]) {\n --tag-color: var(--ty-text-bold);\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-border-color: var(--ty-border-bold);\n}\n\n:host([flavor=\"neutral+\"]) {\n --tag-bg: var(--ty-bg-neutral-bold);\n --tag-color: var(--ty-text-bold);\n --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-color: var(--ty-text-soft);\n --tag-border-color: var(--ty-border);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n display: flex;\n align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--ty-spacing-6);\n /* 24px */\n height: var(--ty-spacing-5);\n /* 20px */\n padding: 0 var(--ty-spacing-2);\n /* 0 8px */\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--ty-radius-full);\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n line-height: var(--ty-line-height-none);\n flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n min-width: var(--ty-spacing-20);\n /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
|
|
6
6
|
//# sourceMappingURL=tag.d.ts.map
|
package/lib/styles/tag.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,iqYAmZrB,CAAC"}
|
package/lib/styles/tag.js
CHANGED
|
@@ -194,7 +194,7 @@ export const tagStyles = `
|
|
|
194
194
|
/* ----- PRIMARY ----- */
|
|
195
195
|
:host([flavor="primary"]) {
|
|
196
196
|
--tag-bg: var(--ty-bg-primary);
|
|
197
|
-
--tag-color: var(--ty-color-primary
|
|
197
|
+
--tag-color: var(--ty-color-primary);
|
|
198
198
|
--tag-border-color: var(--ty-border-primary);
|
|
199
199
|
}
|
|
200
200
|
:host([flavor="primary+"]) {
|
|
@@ -221,7 +221,7 @@ export const tagStyles = `
|
|
|
221
221
|
/* ----- SECONDARY ----- */
|
|
222
222
|
:host([flavor="secondary"]) {
|
|
223
223
|
--tag-bg: var(--ty-bg-secondary);
|
|
224
|
-
--tag-color: var(--ty-color-secondary
|
|
224
|
+
--tag-color: var(--ty-color-secondary);
|
|
225
225
|
--tag-border-color: var(--ty-border-secondary);
|
|
226
226
|
}
|
|
227
227
|
:host([flavor="secondary+"]) {
|
|
@@ -248,7 +248,7 @@ export const tagStyles = `
|
|
|
248
248
|
/* ----- SUCCESS ----- */
|
|
249
249
|
:host([flavor="success"]) {
|
|
250
250
|
--tag-bg: var(--ty-bg-success);
|
|
251
|
-
--tag-color: var(--ty-color-success
|
|
251
|
+
--tag-color: var(--ty-color-success);
|
|
252
252
|
--tag-border-color: var(--ty-border-success);
|
|
253
253
|
}
|
|
254
254
|
:host([flavor="success+"]) {
|
|
@@ -275,7 +275,7 @@ export const tagStyles = `
|
|
|
275
275
|
/* ----- DANGER ----- */
|
|
276
276
|
:host([flavor="danger"]) {
|
|
277
277
|
--tag-bg: var(--ty-bg-danger);
|
|
278
|
-
--tag-color: var(--ty-color-danger
|
|
278
|
+
--tag-color: var(--ty-color-danger);
|
|
279
279
|
--tag-border-color: var(--ty-border-danger);
|
|
280
280
|
}
|
|
281
281
|
:host([flavor="danger+"]) {
|
|
@@ -302,7 +302,7 @@ export const tagStyles = `
|
|
|
302
302
|
/* ----- WARNING ----- */
|
|
303
303
|
:host([flavor="warning"]) {
|
|
304
304
|
--tag-bg: var(--ty-bg-warning);
|
|
305
|
-
--tag-color: var(--ty-color-warning
|
|
305
|
+
--tag-color: var(--ty-color-warning);
|
|
306
306
|
--tag-border-color: var(--ty-border-warning);
|
|
307
307
|
}
|
|
308
308
|
:host([flavor="warning+"]) {
|
package/lib/version.d.ts
CHANGED
package/lib/version.js
CHANGED