/* * The text Tabler puts in each of its colors on the page: an outline or ghost button's label at rest. * * Tabler paints that label in the button's color itself, --tblr-btn-variant, on no fill, so the * color is text on whatever holds the button, and 1.7 still does. A mid-tone color reads on white * and not on a dark card, a light one the reverse: measured under 1.6.1 (issue #154), primary was * 3.03 on a dark card, warning 2.13 on a white one and 2.04 on the page, against WCAG's 4.5:1 for a * 14px label, and under every base, accent and scheme 4,186 of 7,448 labels on a card or the page * fell short. Hovered, pressed and focused, the label is the color's -fg on the color as a fill, * which the rest of this sheet corrects. * * Here the label is the color moved 40% of the way to black in light and 40% of the way to white in * dark. The dark half is Tabler's own derivation, the one six of its -text-emphasis colors and its * dark link color use; the light half mirrors it, at 6.61 or better where 30% would scrape 4.77. Not * the emphasis itself, which in light is 60% black and near-black: an outline button would read as a * plain one with a colored edge, and a ghost one, which has no edge, would lose the one thing at rest * that says danger or success. Read from --tblr-btn-variant, the variable the border and the hover * fill read, so the three come from one color and follow the accent, the base, the scheme, and a * color an application gives one button or one region. * * Every spelling Tabler gives these 19 colors, .btn-outline-primary and .btn-outline.btn-primary, and * the ghost pair, each at Tabler's own specificity and winning by landing after tabler.css. Not light * and dark: an outline light button is for a dark background and an outline dark one for a light * one, whatever the scheme, and correcting them by scheme would darken a light outline on a dark * hero. Not the social brands: a brand's color is its own, and this library ships no brand button. * * What falls back to the rest label follows it: an unchecked .btn-check option, focused or disabled * too, since Tabler changes only its border or its opacity there, and the loading spinner, drawn in * the same variable. That is every unchecked option of RadioButtonsFormField and * CheckboxButtonsFormField. A button's own hover, pressed, focus and disabled colors are Tabler's * explicit ones and do not move. * * Ahead of the guard and not inside it: color-mix() and light-dark() are what Tabler's palette is * written in. TablerOutlineContrastTest holds every label on the card, the page and Tabler's two other * surfaces, under every base, accent and scheme. */ .btn-outline-primary, .btn-outline.btn-primary, .btn-ghost-primary, .btn-ghost.btn-primary, .btn-outline-secondary, .btn-outline.btn-secondary, .btn-ghost-secondary, .btn-ghost.btn-secondary, .btn-outline-success, .btn-outline.btn-success, .btn-ghost-success, .btn-ghost.btn-success, .btn-outline-info, .btn-outline.btn-info, .btn-ghost-info, .btn-ghost.btn-info, .btn-outline-warning, .btn-outline.btn-warning, .btn-ghost-warning, .btn-ghost.btn-warning, .btn-outline-danger, .btn-outline.btn-danger, .btn-ghost-danger, .btn-ghost.btn-danger, .btn-outline-muted, .btn-outline.btn-muted, .btn-ghost-muted, .btn-ghost.btn-muted, .btn-outline-blue, .btn-outline.btn-blue, .btn-ghost-blue, .btn-ghost.btn-blue, .btn-outline-azure, .btn-outline.btn-azure, .btn-ghost-azure, .btn-ghost.btn-azure, .btn-outline-indigo, .btn-outline.btn-indigo, .btn-ghost-indigo, .btn-ghost.btn-indigo, .btn-outline-purple, .btn-outline.btn-purple, .btn-ghost-purple, .btn-ghost.btn-purple, .btn-outline-pink, .btn-outline.btn-pink, .btn-ghost-pink, .btn-ghost.btn-pink, .btn-outline-red, .btn-outline.btn-red, .btn-ghost-red, .btn-ghost.btn-red, .btn-outline-orange, .btn-outline.btn-orange, .btn-ghost-orange, .btn-ghost.btn-orange, .btn-outline-yellow, .btn-outline.btn-yellow, .btn-ghost-yellow, .btn-ghost.btn-yellow, .btn-outline-lime, .btn-outline.btn-lime, .btn-ghost-lime, .btn-ghost.btn-lime, .btn-outline-green, .btn-outline.btn-green, .btn-ghost-green, .btn-ghost.btn-green, .btn-outline-teal, .btn-outline.btn-teal, .btn-ghost-teal, .btn-ghost.btn-teal, .btn-outline-cyan, .btn-outline.btn-cyan, .btn-ghost-cyan, .btn-ghost.btn-cyan { --tblr-btn-color: light-dark(color-mix(in oklab, var(--tblr-black) 40%, var(--tblr-btn-variant)), color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-btn-variant))); } /* * The text Tabler puts on each of its colors as a fill, in black or white, whichever the fill can be * read against. * * Tabler 1.6.1 declares every --tblr--fg as --tblr-light, oklch 98.51%, whatever the color: * only light's is dark, and only the inverted accent sets its own. Those variables are what goes on * the fill wherever Tabler fills with a color: a solid button at rest, hovered and pressed, an * outline or ghost button hovered and pressed, a pressed list-group action, the calendar's selected * day, the skip link, and the .text--fg utilities. So white sat on success at 2.63, on warning * at 2.04, on info at 2.93, on secondary in dark at 2.42, and on primary under seven of the accents * tabler-themes.css offers at 2.04 to 2.99, against WCAG's 4.5:1 (issue #106). * * This re-points the variables themselves rather than correcting each component that reads them. * One declaration per color, no component selector restated, and every reader follows, including * application code that reads var(--tblr--fg). The pick is tabler-badge-corrections.css's: * white while the fill's oklch lightness is below 0.62, black from there up. Read from Tabler's own * variable, so it follows the accent, the theme base, the color scheme, and an application that sets * --tblr-primary on the root itself. * * It has to hold on the hover fill too, which the badge pick never did: a solid button hovers on * --tblr--darken, the same color 0.06 darker, under the same text. White only improves as the * fill darkens, so the weakest case is the darkest black pick. Teal, 6.74 at rest and 5.38 hovered. * TablerForegroundContrastTest computes both, for all 21 colors, under every theme base, accent and * scheme Tabler ships, and is the guarantee, not the number. * * Both are flat fills, which is what the pick is made on, and since 1.7 a solid button is not painted * flat: Tabler draws --tblr-btn-gradient over the fill, 12% white at the top fading to nothing, so * behind the top of a white label's glyphs the fill is lighter. Measured in Chrome, nine colors fall * below 4.5 at rest under some theme, all white labels, the lowest 3.99 on muted under the mist base, * 4.61 flat. Black labels gain up to 0.3, and hovered every label passes, the darker fill outweighing * the gradient. Accepted rather than corrected. No label fixes it: black on those fills fails hovered, * 3.51 on red and 3.27 on blue. Only a weaker gradient would, and with 0.11 to spare on muted the * strength that passes is too faint to see, so it would be removing Tabler's. buttons.mjs in * src/test/browser holds each case to its committed baseline. * * The guarantee is for that palette. For a color of an application's own it is a pick: a fill just * above 0.62 with a lot of chroma can be readable in black at rest and not once darkened, where white * was not readable at rest either, and the formula is continuous, so a fill within 0.001 of the * threshold gets a gray. The steepness is the badge sheet's, so a color gets the same text on a badge * and on a button. * * A custom property's var() is substituted where it is declared, here the root, and descendants * inherit the result. So a color redefined below the root, --tblr-success on a card say, keeps the * root's pick for its text, as it already kept the root's -darken and -lt. Set --tblr--fg * beside such an override. An application that wants white on a light brand color sets it the same * way, in a rule more specific than :root or after the theme. * * light-dark() is not resolved here. --tblr-secondary is light-dark(gray-500, gray-400), and inside an * unregistered custom property it stays an expression until a real property reads it, so the pick is * made per element, by that element's color scheme, and a dark subtree on a light page gets black on * its lighter secondary while the page around it keeps white. * * The 21 colors are the ones Tabler gives both a .text-bg- and a -fg: its eight theme colors, * muted, and the twelve others of its palette. Not the social brands: their -fg is the brand's own * text color, white on YouTube's red being a guideline rather than an oversight, and this library * ships no brand button. Not the grays, whose -fg is not a foreground. * * Its own --bs5-fg-contrast rather than the badge sheet's --bs5-badge-contrast, though the two are * equal: each correction sheet is meant to be deleted by itself the release Tabler fixes what it * corrects, and one reading the other's property would break when that one went. * * Inside @supports for the badge sheet's reason, with the same condition: a custom property holding * var() parses whatever it holds, and a browser without relative colors would make every reader * invalid at computed-value time and inherit the body text. Turned away, a browser keeps Tabler's * declarations, which are the fallback; nothing outside the block is needed. * * On :root, :host, the selector Tabler declares these on, so the two land on the same element. The * inverted accent's dark rule names two attributes and outranks this; it sets its own dark text on * its near-white primary, which is what this would pick anyway. */ @supports (color: oklch(from light-dark(red, blue) clamp(0, (1 - l) * 1000, 1) 0 0)) { :root, :host { --bs5-fg-contrast: clamp(0, (0.62 - l) * 1000, 1) 0 0; --tblr-primary-fg: oklch(from var(--tblr-primary) var(--bs5-fg-contrast)); --tblr-secondary-fg: oklch(from var(--tblr-secondary) var(--bs5-fg-contrast)); --tblr-success-fg: oklch(from var(--tblr-success) var(--bs5-fg-contrast)); --tblr-info-fg: oklch(from var(--tblr-info) var(--bs5-fg-contrast)); --tblr-warning-fg: oklch(from var(--tblr-warning) var(--bs5-fg-contrast)); --tblr-danger-fg: oklch(from var(--tblr-danger) var(--bs5-fg-contrast)); --tblr-light-fg: oklch(from var(--tblr-light) var(--bs5-fg-contrast)); --tblr-dark-fg: oklch(from var(--tblr-dark) var(--bs5-fg-contrast)); --tblr-muted-fg: oklch(from var(--tblr-muted) var(--bs5-fg-contrast)); --tblr-blue-fg: oklch(from var(--tblr-blue) var(--bs5-fg-contrast)); --tblr-azure-fg: oklch(from var(--tblr-azure) var(--bs5-fg-contrast)); --tblr-indigo-fg: oklch(from var(--tblr-indigo) var(--bs5-fg-contrast)); --tblr-purple-fg: oklch(from var(--tblr-purple) var(--bs5-fg-contrast)); --tblr-pink-fg: oklch(from var(--tblr-pink) var(--bs5-fg-contrast)); --tblr-red-fg: oklch(from var(--tblr-red) var(--bs5-fg-contrast)); --tblr-orange-fg: oklch(from var(--tblr-orange) var(--bs5-fg-contrast)); --tblr-yellow-fg: oklch(from var(--tblr-yellow) var(--bs5-fg-contrast)); --tblr-lime-fg: oklch(from var(--tblr-lime) var(--bs5-fg-contrast)); --tblr-green-fg: oklch(from var(--tblr-green) var(--bs5-fg-contrast)); --tblr-teal-fg: oklch(from var(--tblr-teal) var(--bs5-fg-contrast)); --tblr-cyan-fg: oklch(from var(--tblr-cyan) var(--bs5-fg-contrast)); } }