/* Copied from standout-design-system dist/filament-theme.css at commit ff17473. Re-copy to update; do not edit here. */ /* Copied from filament/filament-theme.css by scripts/build.mjs. Edit the source, then run npm run build. */ /* Standout theme for Filament 5 (Tailwind 4). Maps the generated --app-* tokens onto Filament's colour ramps, * radius, font and focus ring, in light and [data-theme='dark']. * * Host setup: * - Load tokens.css (or app-bundle.css) first, then this file AFTER Filament's theme stylesheet. * - Load the font. html.fi { --font-family: var(--font-sans) } selects roc-grotesk, then Hanken Grotesk, then * system-ui, but tokens.css loads no font files. Without them the panel renders in system-ui. Let Filament load * Hanken Grotesk (->font('Hanken Grotesk') on the panel) and/or add the Adobe kit for Roc Grotesk. * - Keep data-theme in step with Filament's dark mode. Filament only toggles the .dark class on html * (filament/resources/js/dark-mode.js) and nothing sets data-theme, but these tokens and ramps flip only on * [data-theme='dark']. Set data-theme='dark' on html whenever Filament sets .dark (or drive both from the user's * saved theme on the server), or the panel stays light. (standout-idebank Task 5.) * * Variables Filament reads (checked against Filament 5.9, support/resources/css/index.css and utilities.css): * --primary-N, --gray-N, --danger-N, --success-N, --warning-N, --info-N N = 50 100 200 300 400 500 600 700 800 900 950 * Filament prints them in a :root block before its theme stylesheet; a plain :root here comes later and wins. * --radius-xs/sm/md/lg/xl/2xl/3xl Tailwind radius scale (rounded-lg is the button and input corner) * --font-family Filament prints it in an inline :root AFTER the theme link, so it is set on html.fi * * Ramps run light (50) to dark (950) in BOTH modes, because Filament's components assume that order * (light: gray-950 text on gray-50; .dark: gray-100 text on gray-900). So each ramp is declared for :root and again * for [data-theme='dark']. Success, warning and info stay at Filament's defaults: the tokens have no such roles. * Rules: colours come only from var(--app-*); no literals, no shades invented here. A few roles alias onto many * steps on purpose; the ponytail: comments on --primary-600 and on the radius block name the ceilings. * * Open items for the host (standout-idebank Task 5): * 1. Text on a filled button in dark mode fails. For a named colour (primary, danger) Filament picks ONE text * shade per background in PHP (ButtonComponentColorMap), from the registered palette, and uses it for both * --text and --dark-text. The colour of that shade comes from THIS ramp (--text: var(--color-50), which is * var(--primary-50)); it is not hard-coded white. Light is fine: primary-50 (primary-container) on primary is * 4.98:1, danger 5.00:1. Dark fails: primary-50 (on-primary-container) on primary is 1.31:1, danger 1.31:1. No * single PHP palette fixes both modes, because the shade index is shared and the two ramps put opposite * lightness at 600. The lever is a scoped CSS override, to add in Task 5 and verify in a real panel: on filled * .fi-btn with the primary and danger colours, set --dark-text and --dark-hover-text to var(--app-on-primary) and * var(--app-on-error) (about 7.7:1 on the dark primary and error). The text variables are set by CLASS, not by * inline style, for named colours (.fi-text-color-N and .dark\:fi-text-color-N in support/resources/css/ * utilities.css, inside @layer utilities; only array colours use an inline style). An unlayered selector such as * .fi-btn.fi-color-primary therefore wins without !important. Only the inline style of a custom array colour * would need !important. * 2. Several Filament surfaces are hard-coded bg-white (cards, inputs, dropdowns) and rings use black or white alpha. * They stay neutral, not the warm surface tones. Check visually. * 3. Hover and press states are fixed alpha steps (/10 to /50); --app-state-* needs color-mix and is not mapped. * Tonal elevation (--app-elevation-*) is not mapped either: Filament's shadows are Tailwind utilities. * 4. The M3 type roles (--text-*, .text-* in tokens.css) are not mapped onto Filament's text sizes. */ /* ---------- light ---------- */ :root, [data-theme='light'] { /* primary: container tint at the light end, Havdyb in the middle, on-container at the dark end */ --primary-50: var(--app-primary-container); --primary-100: var(--app-primary-container); --primary-200: var(--app-primary-container); --primary-300: var(--app-inverse-primary); --primary-400: var(--app-inverse-primary); --primary-500: var(--app-primary); --primary-600: var(--app-primary); /* ponytail: filled bg; 500 and 600 share a role, hover is a no-op shade */ --primary-700: var(--app-on-primary-container); --primary-800: var(--app-on-primary-container); --primary-900: var(--app-on-primary-container); --primary-950: var(--app-on-primary-container); /* danger = the error roles */ --danger-50: var(--app-error-container); --danger-100: var(--app-error-container); --danger-200: var(--app-error-container); --danger-300: var(--app-error-container); --danger-400: var(--app-error); --danger-500: var(--app-error); --danger-600: var(--app-error); --danger-700: var(--app-on-error-container); --danger-800: var(--app-on-error-container); --danger-900: var(--app-on-error-container); --danger-950: var(--app-on-error-container); /* gray = the warm neutral surfaces and text. 500 is secondary text, so it takes on-surface-variant (4.5:1 or more) */ --gray-50: var(--app-surface-container-low); --gray-100: var(--app-surface-container); --gray-200: var(--app-surface-container-highest); --gray-300: var(--app-outline-variant); --gray-400: var(--app-outline); --gray-500: var(--app-on-surface-variant); --gray-600: var(--app-on-surface-variant); --gray-700: var(--app-on-surface-variant); --gray-800: var(--app-on-surface); --gray-900: var(--app-on-surface); --gray-950: var(--app-on-surface); /* M3 shape. ponytail: five steps cover Tailwind's seven, add steps when a screen needs the difference */ --radius-xs: var(--app-shape-extra-small); --radius-sm: var(--app-shape-extra-small); --radius-md: var(--app-shape-small); --radius-lg: var(--app-shape-small); --radius-xl: var(--app-shape-medium); --radius-2xl: var(--app-shape-large); --radius-3xl: var(--app-shape-extra-large); } /* ---------- dark ---------- */ [data-theme='dark'] { /* still light (50) to dark (950): the on-container tint first, then the pastel primary, then the deep tones */ --primary-50: var(--app-on-primary-container); --primary-100: var(--app-on-primary-container); --primary-200: var(--app-on-primary-container); --primary-300: var(--app-primary); --primary-400: var(--app-primary); --primary-500: var(--app-primary); --primary-600: var(--app-primary); /* ponytail: filled bg; dark text on it must be on-primary, see open item 1 */ --primary-700: var(--app-primary-container); --primary-800: var(--app-primary-container); --primary-900: var(--app-on-primary); --primary-950: var(--app-on-primary); --danger-50: var(--app-on-error-container); --danger-100: var(--app-on-error-container); --danger-200: var(--app-on-error-container); --danger-300: var(--app-error); --danger-400: var(--app-error); --danger-500: var(--app-error); --danger-600: var(--app-error); --danger-700: var(--app-error-container); --danger-800: var(--app-error-container); --danger-900: var(--app-on-error); --danger-950: var(--app-on-error); /* text at the light end, container surfaces at the dark end: gray-950 is the page, gray-900 the cards */ --gray-50: var(--app-on-surface); --gray-100: var(--app-on-surface); --gray-200: var(--app-on-surface); --gray-300: var(--app-on-surface-variant); --gray-400: var(--app-on-surface-variant); --gray-500: var(--app-outline); --gray-600: var(--app-outline-variant); --gray-700: var(--app-outline-variant); --gray-800: var(--app-surface-container-highest); --gray-900: var(--app-surface-container); --gray-950: var(--app-surface); } /* ---------- font ---------- */ html.fi { --font-family: var(--font-sans); } /* ---------- focus ring ---------- * Filament draws a 2px alpha ring on focus; this adds the design system's solid ring on top, on controls only * (text inputs already ring their wrapper). */ html.fi :is(a, button, summary, [role='button'], [role='tab'], [role='menuitem']):focus-visible { outline: var(--app-focus-ring) solid var(--app-primary); outline-offset: 2px; }