@rotki/ui-library 3.1.5 → 3.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs p-[0.1875rem] + 0.875rem icon = 1.25rem (20px) 70%\n * sm p-1 + 1.25rem icon = 1.75rem (28px) 71%\n * md (default) p-2 + 1.25rem icon = 2.25rem (36px) 56%\n * lg p-1.5 + 1.5rem icon = 2.25rem (36px) 67%\n * xl p-2 + 1.5rem icon = 2.5rem (40px) 60%\n * 2xl p-2 + 1.75rem icon = 2.75rem (44px) 64%\n * ```\n */\nexport const buttonStyles = tv({\n slots: {\n root: [\n 'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n 'flex items-center justify-center gap-x-2',\n // md is 36px, the height of a text field or select, so a button lines up with them in a row\n 'px-4 py-2 rounded-rui-control transition-colors duration-150',\n '[--rui-icon-size:1rem]',\n 'disabled:cursor-not-allowed',\n 'focus-visible:focus-ring',\n ].join(' '),\n label: 'inline-block text-nowrap',\n // inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead\n spinner: 'shrink-0',\n },\n variants: {\n variant: {\n default: {},\n outlined: {},\n text: { root: 'px-2' },\n fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n },\n size: {\n 'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n 'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n 'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n 'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n },\n color: {\n grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n },\n rounded: {\n true: { root: 'rounded-full' },\n },\n icon: {\n /*\n * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n * badge) on the text baseline and grow the button by the descender gap.\n */\n true: { root: 'rounded-full', label: 'inline-flex' },\n },\n active: {\n true: {},\n false: {},\n },\n loading: {\n true: { root: 'relative !cursor-progress' },\n false: {},\n },\n hideFocusIndicator: {\n true: { root: 'focus-visible:!outline-hidden' },\n },\n /*\n * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n */\n collapseBelow: {\n 'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n 'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n 'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n 'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n },\n },\n compoundVariants: [\n /*\n * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n */\n { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n { loading: false, variant: ['text', 'link'], class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n // === Grey color variants ===\n { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n // the same hover and pressed tints as a highlighted menu option\n { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n // the shared control edge, 3:1 against the page like the 50% context colours beside it\n { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n // === Context colors: active default ===\n { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n // === Size overrides per variant ===\n { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n // Icon-only sizing, per the padding and glyph table on buttonStyles above\n { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n /*\n * === Link ===\n * Last, so they win over the size, colour and active entries above. Font size and line height\n * come from the surrounding text; a size only changes the spinner. The colour matches the\n * outlined/text compounds, with no fill or tint.\n */\n {\n variant: 'link',\n class: {\n root: [\n 'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n 'bg-transparent hover:bg-transparent active:bg-transparent',\n 'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n ].join(' '),\n },\n },\n { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n ],\n compoundSlots: [\n // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n ],\n defaultVariants: {\n variant: 'default',\n color: 'grey',\n active: false,\n },\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs p-[0.1875rem] + 0.875rem icon = 1.25rem (20px) 70%\n * sm p-1 + 1.25rem icon = 1.75rem (28px) 71%\n * md (default) p-2 + 1.25rem icon = 2.25rem (36px) 56%\n * lg p-1.5 + 1.5rem icon = 2.25rem (36px) 67%\n * xl p-2 + 1.5rem icon = 2.5rem (40px) 60%\n * 2xl p-2 + 1.75rem icon = 2.75rem (44px) 64%\n * ```\n */\nexport const buttonStyles = tv({\n slots: {\n root: [\n 'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n 'flex items-center justify-center gap-x-2',\n // md is 36px, the height of a text field or select, so a button lines up with them in a row\n 'px-4 py-2 rounded-rui-control transition-colors duration-150',\n '[--rui-icon-size:1rem]',\n 'disabled:cursor-not-allowed',\n 'focus-visible:focus-ring',\n ].join(' '),\n label: 'inline-block text-nowrap',\n /*\n * Inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead.\n * At lg the ring outgrows the label's line box, so its box is held to one line and the ring\n * overflows it evenly: loading never changes the button's height.\n */\n spinner: 'shrink-0 h-lh items-center',\n },\n variants: {\n variant: {\n default: {},\n outlined: {},\n text: { root: 'px-2' },\n fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n },\n size: {\n 'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n 'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n 'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n 'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n },\n color: {\n grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n },\n rounded: {\n true: { root: 'rounded-full' },\n },\n icon: {\n /*\n * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n * badge) on the text baseline and grow the button by the descender gap.\n */\n true: { root: 'rounded-full', label: 'inline-flex' },\n },\n active: {\n true: {},\n false: {},\n },\n loading: {\n true: { root: 'relative !cursor-progress' },\n false: {},\n },\n hideFocusIndicator: {\n true: { root: 'focus-visible:!outline-hidden' },\n },\n /*\n * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n */\n collapseBelow: {\n 'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n 'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n 'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n 'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n },\n },\n compoundVariants: [\n /*\n * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n */\n { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n { loading: false, variant: ['text', 'link'], class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n // === Grey color variants ===\n { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n // the same hover and pressed tints as a highlighted menu option\n { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n // the shared control edge, 3:1 against the page like the 50% context colours beside it\n { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n // === Context colors: active default ===\n { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n // === Size overrides per variant ===\n { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n // Icon-only sizing, per the padding and glyph table on buttonStyles above\n { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n /*\n * === Link ===\n * Last, so they win over the size, colour and active entries above. Font size and line height\n * come from the surrounding text; a size only changes the spinner. The colour matches the\n * outlined/text compounds, with no fill or tint.\n */\n {\n variant: 'link',\n class: {\n root: [\n 'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n 'bg-transparent hover:bg-transparent active:bg-transparent',\n 'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n ].join(' '),\n },\n },\n { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n ],\n compoundSlots: [\n // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n ],\n defaultVariants: {\n variant: 'default',\n color: 'grey',\n active: false,\n },\n});\n"],"mappings":"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"}
|
package/dist/style.css
CHANGED
package/dist/web-types.json
CHANGED