4 Commits

Author	SHA1	Message	Date
Guillem Arias Fauste	2bcdf6c554	fix(design-system): replace undefined utility classes and broken /N modifiers (#1660) ... * fix(design-system): replace undefined utility classes and broken /N modifiers Audit of class-name resolution in views surfaced two related silent failures across ~17 files: 1. Class names that don't exist anywhere in the design system. Tailwind silently drops them and the element renders with no CSS for that property. - bg-primary (and bg-primary/5, /10, /90): never defined as a custom utility, no --color-primary in @theme. Used as a CTA bg in 8 places, all rendered transparent. - text-inverted: typo of text-inverse. - text-primary-foreground: shadcn/Radix vocabulary, not in our token system. - bg-accent / border-accent / text-accent: same shadcn vocabulary; not defined. 2. Slash modifier (/N) used on custom @utility blocks. Modifiers only resolve on Tailwind theme colors (anything in tokens.json color.*). Custom @utility blocks compile to static @apply statements and silently drop the /N variant. Affected uses: - border-surface-inset/50 across provider account selectors. - border-secondary/30, /40 in admin SSO form and simplefin setup. - bg-surface-inset/30, /40 in settings preferences and simplefin. Fixes: | From | To | |---------------------------------------------------|------------------------------------------------------| | bg-primary text-white (and similar primary CTAs) | button-bg-primary text-inverse | | bg-primary text-primary-foreground (badges) | button-bg-primary text-inverse | | bg-primary text-inverted (typo) | button-bg-primary text-inverse | | bg-primary text-primary (broken active pill) | bg-inverse text-inverse | | bg-primary (status dot) | bg-inverse | | bg-primary/5, bg-primary/10 (subtle accent bg) | bg-gray-tint-5, bg-gray-tint-10 | | hover:bg-primary/90 | hover:button-bg-primary-hover | | border-accent bg-accent/10 text-accent (badges) | border-secondary bg-surface-inset text-secondary | | border-surface-inset/50 | border-secondary | | border-secondary/30, /40 | border-tertiary | | bg-surface-inset/30 | bg-surface-inset (full strength) | | bg-surface-inset/40 | bg-container-inset | Also documents the alpha-modifier limitation in design/tokens/README.md under a new "Alpha modifiers in views (/N syntax)" section, with the opacity-N convention for custom utilities and a note that the gray-tint-5 / gray-tint-10 family (and similar pre-resolved tints) are theme colors and accept /N modifiers natively. The accent-badge mapping uses neutral semantics for now. A dedicated brand-accent token (text-link-tint-10 etc.) is worth considering as a follow-up if the "highlighted metadata badge" pattern recurs. * fix(design-system): replace undefined divide-primary / divide-secondary with alpha tokens Same class of bug as the rest of this PR: divide-{name} requires the name to be a theme color (i.e. expose --color-{name}), and our custom @utility utilities (primary, secondary, etc.) do not. Tailwind silently drops the unrecognized class and rows render with no separator. Spotted six instances during the visual audit: - admin/users/index.html.erb (×2): users table + pending invitations - admin/sso_providers/index.html.erb (×2): configured + legacy lists - transactions/categorizes/_transaction_list.html.erb: categorize sidebar - settings/preferences/show.html.erb: divide-secondary/60 (also broken) Swapped to the alpha-black/white pattern already used elsewhere in the codebase (imports/cleans/show, transactions/_summary, etc.): divide-y divide-primary -> divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200 divide-y divide-secondary/60 -> divide-y divide-alpha-black-100 theme-dark:divide-alpha-white-100 The lighter (-100) variant on the preferences list matches the original intent of /60 (more subtle).	2026-05-04 21:40:17 +02:00
Guillem Arias Fauste	0fe1e06645	refactor(design-system): migrate fg-* utilities to text-* and remove namespace (#1626) ... * refactor(design-system): migrate fg-* utilities to text-* and remove namespace The design system carried two parallel namespaces for foreground colors: text-* (canonical, ~2,000 uses) and fg-* (32 uses). Most fg-* tokens were 1:1 duplicates of a text-* counterpart. fg-gray was nearly identical to text-secondary, with a one-step shade difference in dark mode. This PR migrates all 32 usages to their text-* equivalents and removes the fg-* block from the design tokens. Closes #1606. Mapping: - fg-inverse -> text-inverse (20 usages, identical light/dark values) - fg-gray -> text-secondary (7 usages; light values match, dark is one step lighter: gray-300 vs gray-400) - fg-primary -> text-primary (3 usages, identical values) - fg-subdued -> text-subdued (2 usages, identical values) The four other fg-* tokens (fg-contrast, fg-primary-variant, fg-secondary, fg-secondary-variant) had zero usages despite being defined; they are removed without replacement. JSON / build: - design/tokens/sure.tokens.json: $version 1.0.0 -> 2.0.0 (breaking schema change per the policy added in #1620). 8 fg-* token definitions removed. - button-bg-ghost-hover's dark value still references "fg-inverse" internally; rewritten to "bg-gray-800 text-inverse" so the cleanup doesn't break that utility. - _generated.css regenerated. 42 utility blocks now (was 50). Lookbook tokens preview: - The Text & foregrounds section dropped its split between text-* (canonical) and fg-* (legacy). Now a single section listing the five text-* utilities. The "(legacy)" framing is gone since there's no legacy left. README: - design/tokens/README.md's button-bg-ghost-hover edge-case example updated to reflect the new "bg-gray-800 text-inverse" dark value. Visual review needed in dark mode: - Anywhere icons use the application_helper#icon helper with color: "default" (most icons in the app). The default class moved from fg-gray (gray-400 dark) to text-secondary (gray-300 dark), so default-color icons render slightly lighter in dark mode. - DS::Buttonish icons in secondary buttons (same shade shift). - DS::Link icons (same). - Time series chart axes (same). - All tooltips, account add flow, settings hostings buttons, invitations, AI consent, family export, danger-zone buttons -- these used fg-inverse, which is identical to text-inverse, so no visual change expected. * fix(design-system): use inverse pair on tooltips for readable dark mode * fix(lookbook): use semantic tokens in menu preview header text * fix(lookbook): set text-primary on layout body so previews inherit theme * fix(design-system): keep shadows dark-toned in dark mode Inverting shadows to white|8% on dark surfaces produces a halo effect rather than an elevation cue, and stacks redundantly with the alpha-white 1px ring already in shadow-border-*. Switch dark-mode shadows to black at progressively higher alpha (25%/30%/35%/40%/50% for xs..xl) so they read as actual cast shadows on near-black surfaces. Surface-tint differences and the existing alpha-white border ring continue to handle elevation hierarchy and edge definition. Approach matches Material 3, Apple HIG, IBM Carbon, Refactoring UI, and the dark-mode shadows used in Linear/Vercel/Stripe. * fix(design-system): set text-primary on DS::Dialog element Browser UA stylesheets apply color: black directly to <dialog>, which overrides ancestor inheritance even when a body or html ancestor sets a theme-aware color. Unstyled child content then renders black regardless of theme. Setting text-primary on the dialog element itself defeats the UA override and lets descendants inherit the semantic token. * fix(lookbook): use shadow css vars in effects preview so dark theme renders * Revert "fix(design-system): keep shadows dark-toned in dark mode" This reverts commit 3e9d76ed0beb5ac5f2acbad61e4d1c39eadc9ac2. * fix(design-system): use opacity-70 instead of text-inverse/70 in value tooltip The custom @utility text-inverse expands to @apply text-white and isn't modifier-aware, so text-inverse/70 produced no CSS at all and the muted labels fell through to inherited color (invisible on the white pill in dark mode). Replace with text-inverse + opacity-70. Same visual effect, works with the existing utility definition.	2026-05-04 00:50:52 +02:00
Guillem Arias Fauste	05b5dba445	feat(tokens): add $version field + document versioning policy (#1620) ... Adds $version: "1.0.0" at the root of design/tokens/sure.tokens.json so external consumers (Tokens Studio, future Figma sync, AI design tooling, etc.) have a stable signal for when their cached snapshot of the token API is out of date. The build script's walker already skips top-level $-prefixed keys, so no code change is needed and _generated.css is unchanged. README documents semver semantics scoped to the token contract: - Major: breaking (token removed/renamed, type changed, dark dropped). - Minor: additive (new tokens, new $extensions.sure.* keys, new groups). - Patch: cosmetic value tweaks. Bump on commit.	2026-05-01 16:05:35 +02:00
Guillem Arias Fauste	e250d266e8	refactor(design-system): single-source design tokens via DTCG JSON (#1604) ... * refactor(css): rename maybe-design-system → sure-design-system Rename design system CSS file and directory to match the project name post-rebrand. Update internal imports plus references in CLAUDE.md, copilot instructions, and Junie guidelines. No CSS rules change; Tailwind compiled output is byte-identical. * build(tokens): introduce single-source tokens.json + build script Make the design system a tool-agnostic single source of truth. - tokens/sure.tokens.json: every primitive, semantic alias, and Tailwind utility token in one W3C DTCG-flavored file. - tools/tokens/build.mjs: ~120 LOC plain Node script (zero deps) that resolves token references and emits Tailwind v4 source CSS. - app/assets/tailwind/sure-design-system/_generated.css: build output — the @theme block, dark-mode overrides, and 50 @utility blocks. - Hand-written CSS split into base.css (element resets), components.css (form-field/checkbox/tooltip/qrcode), and prose.css (prose dark overrides). The 5 maybe-design-system/*-utils.css files are removed — their contents now live inside _generated.css. - application.css gains `@source not "../../../tokens"` so Tailwind's content scanner ignores the JSON file (it would otherwise treat token keys like `bg-surface` as "used" classes and skip tree-shaking). - package.json: `npm run tokens:build` and `npm run tokens:check`. - .gitattributes: _generated.css marked linguist-generated. Functional parity verified: compiled `tailwind.css` has the same 378 CSS variables and byte-identical non-:root rules as before. The only diff is which of Tailwind's internal `:root,:host` blocks each variable lands in, which is invisible to the browser. * build(tokens): wire tokens build into bin/setup Run `npm install && npm run tokens:build` after bundle so a fresh checkout reaches a runnable state with one command. * docs(css): explain @source not exclusion of tokens dir Adds a comment so future readers know why tokens/ is excluded from Tailwind's content scanner (utility keys in the JSON would otherwise be treated as used classes and bypass tree-shaking). * docs(tokens): add tokens/README Schema overview, workflow, custom $extensions reference, and a list of the edge cases the build script handles. Lands as a follow-up commit on the same branch so reviewers landing on the diff have something to read before opening sure.tokens.json. * Update tokens/README.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Guillem Arias Fauste <gariasf@proton.me> * docs(tokens): swap em-dashes for colons in README * refactor(tokens): move tokens to design/, build script to bin/ Per PR review feedback (jjmata): - tokens/ → design/tokens/ — top-level design/ namespace leaves room for future design assets (Figma exports, design docs, etc.) without cluttering the repo root. - tools/tokens/build.mjs → bin/tokens.mjs — keeps all developer-facing scripts in one place (bin/) regardless of language. Path references updated in: - bin/tokens.mjs (TOKENS / OUT / generated header) - package.json (tokens:build, tokens:check) - app/assets/tailwind/application.css (@source not directive) - app/assets/tailwind/sure-design-system.css (comment) - app/assets/tailwind/sure-design-system/_generated.css (regenerated) - design/tokens/README.md (workflow examples) bin/tokens.mjs gains a +x bit. Tailwind compile verified. * docs(tokens): normalize README paths to repo-root style Files section was mixing relative-to-README paths (`../../bin/...`) with repo-root paths (`design/tokens/...`) used elsewhere in the same README. Switching everything to repo-root style for consistency. * fix(tokens): validate {ref} placeholders against the known token set CodeRabbit caught: resolveTemplate() and refToClass() would happily emit var(--foo-bar) or bg-foo-bar for any {foo.bar} input, so a typo in design/tokens/sure.tokens.json would silently ship broken CSS. Now build() pre-computes the set of valid token paths from the walker, and resolveTemplate() / refToClass() throw a clean "[tokens] Unknown token reference ..." error when a placeholder doesn't match. Top-level catch surfaces just the message and exits 1, no Node stack trace noise. Smoke-tested both directions: - Valid JSON: builds. - {color.gray.NONEXISTENT|5%}: fails with clear message, exit 1. * docs(tokens): humanize README prose * One more refenrece to `maybe-design-system` --------- Signed-off-by: Guillem Arias Fauste <gariasf@proton.me> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Juan José Mata <jjmata@jjmata.com>	2026-05-01 14:46:33 +02:00