mirror of
https://github.com/we-promise/sure.git
synced 2026-05-11 06:34:56 +00:00
0954200ad43ca4e7aec7a5504aee6bc71f3ffe7a
6 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Guillem Arias Fauste
|
99844c1b90 |
chore(design-system): swap raw gray classes for semantic tokens in holdings/ (#1654)
* chore(design-system): swap raw gray classes for semantic tokens in holdings/ Continues the raw-color sweep on the holdings/ domain plus the related account activity feed component. 11 occurrences across 5 files. Token additions: - button-bg-secondary-strong (gray-200 / gray-700) and -hover (gray-300 / gray-600). Holdings CTAs (Add Trade, Add Holding, Edit Cost Basis, Sync Prices, etc.) used a hand-rolled "secondary-strong" pattern that doesn't match the existing button-bg-secondary token (which is gray-50 / gray-700, much subtler). Adding the strong variant preserves the intentional visual weight of these CTAs and gives future PRs a name to reuse. - $version bump 1.0.0 -> 1.1.0 (additive). Mappings: - 8x text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600 (holdings/show + sync_prices + cost_basis_cell) -> text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover - 1x bg-gray-50 theme-dark:bg-gray-700 hover:bg-gray-100 theme-dark:hover:bg-gray-600 (holdings/index search button) -> button-bg-secondary hover:button-bg-secondary-hover - 1x hover:bg-gray-100 theme-dark:hover:bg-gray-700 (cost_basis_cell hover row) -> hover:bg-container-inset-hover - 1x focus-within:border-gray-900 (activity_feed search wrapper) -> focus-within:border-primary Left intentionally: - bg-gray-300 status indicator dot in show.html.erb (same pattern as the settings pilot; no semantic equivalent for "neutral inactive indicator" yet). - bg-gray-700 in _missing_price_tooltip.html.erb (already fixed in PR #1626; would conflict on rebase). - focus-within:ring-gray-100 (subtle effect that works in both modes; ring-color tokens are a separate concern). * chore(design-system): bump $version to 2.1.0 for additive token additions Per the design tokens semver contract: PR #1626 already bumped to 2.0.0 (major / breaking when fg-* utilities were removed). This PR adds button-bg-secondary-strong + hover without removing or changing existing tokens, so the correct bump is minor (2.0.0 → 2.1.0). Spotted by CodeRabbit on the rebased branch. * fix(design-system): drop dead focus-within:ring-gray-100 on activity feed search The focus-within:ring-gray-100 class only sets --tw-ring-color, but the parent has no ring-width utility, so it produces no visible ring — dead code from before the focus-within:border-primary swap landed. Same issue spotted on app/views/accounts/show/_activity.html.erb in the finalize sweep PR; applying the equivalent fix here for the holdings activity feed component. --------- Signed-off-by: Guillem Arias Fauste <gariasf@proton.me> |
||
|
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).
|
||
|
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
|
||
|
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. |
||
|
Guillem Arias Fauste
|
6aa7adb931 |
fix(design-system): give cyan-900 a darker value than cyan-800 (#1619)
Both `cyan-800` and `cyan-900` were defined as `#155B75` since the original commit that introduced the v4 design system, leaving the cyan scale plateaued at the dark end. Setting `cyan-900` to `#164E63` (Tailwind v3's default for that step), so the scale progresses monotonically. The token has zero current usage (`bg-cyan-900`, `text-cyan-900`, `border-cyan-900` aren't referenced anywhere outside the design system source), so this change is invisible in the running app today. Closes #1605. |
||
|
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> |