* 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 3e9d76ed0b.
* 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.
* Initial implementation
* Add support for reports section too
* UI Improvement
now it looks a lot nicer :)
* Remove duplicate section titles
* FIX malformed DIV
* Add accessibility and touch support
WCAG 2.1 Level AA Compliant
- Keyboard operable (Success Criterion 2.1.1)
- Focus visible (Success Criterion 2.4.7)
- Name, Role, Value (Success Criterion 4.1.2)
Screen Reader Support
- Clear instructions in aria-label
- Proper semantic roles
- State changes announced via aria-grabbed
* Add proper UI for tab highlight
* Add keyboard support to collapse also
* FIX js errors
* Fix rabbit
* FIX we don't need the html
* FIX CSRF and error handling
* Simplify into one single DB migration
---------
Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
* Fix category dark mode styles
* Fix sidebar account tab states
* Fix dashboard balance sheet group styles
* Fix budget dark mode styles
* Fix chart gradient split
* Fix prose styles in dark mode
* Add back chat nav id for tests
* Add lookbook + viewcomponent, organize design system file
* Build menu component
* Button updates
* More button fixes
* Replace all menus with new ViewComponent
* Checkpoint: fix tests, all buttons and menus converted
* Split into Link and Button components for clarity
* Button cleanup
* Simplify custom confirmation configuration in views
* Finalize button, link component API
* Add toggle field to custom form builder + Component
* Basic tabs component
* Custom tabs, convert all menu / tab instances in app
* Gem updates
* Centralized icon helper
* Update all icon usage to central helper
* Lint fixes
* Centralize all disclosure instances
* Dialog replacements
* Consolidation of all dialog styles
* Test fixes
* Fix app layout issues, move to component with slots
* Layout simplification
* Flakey test fix
* Fix dashboard mobile issues
* Finalize homepage
* Lint fixes
* Fix shadows and borders in dark mode
* Fix tests
* Remove stale class
* Fix filled icon logic
* Move transparent? to public interface
* Improve net worth hover
* Improve graph tooltip
* Use locales files for some text on net worth and account charts
* Consolidate and simplify trend change between net worth and account charts
* Fix test and self-review stuff
* Clean up some stuff on the holding sidebar
Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.
Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:
- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones
* Add geist font
* Design system css file
* Add cursor ui/ux rules
* Add shadows and shadow borders
* Replace primitives with tokens for common text and backgrounds
* Organize css
* Update switch and checkbox class names
* Add back global color variables
* Move accountable partials
* Split accountables into separate view partials
* Fix test
* Add form to permitted partials
* Fix failing system tests
* Update new account modal views
* New sync algorithm implementation
* Update account system test assertions to match new behavior
* Fix off by 1 date error
* Revert new balance sync algorithm
* Add missing account overviews
* chore: add formatting and linting for javascript code relates to #1295
* use spaces instaed
* add to recommended extensions
* only enforce lint
* auto save
* Add pie chart for asset/debt allocation in dashboard view
* Fix lint issue
* Fix z-index issue with tooltip under pie chart
* Fix spacing of dashboard charts
* Reindent TimeSeries classes
* Fix spacing in time series tests
* Remove trend tests where current is nil
I think if we've gotten this far with a nil value for current, there's a data integrity problem.
If we allow this, we'll have to be very defensive in our code. Best to raise and fix early.
* Reindent Money class
* Refactor TimeSeries artifacts
* Use as_json in TimeSeries
* Bring back tests for trends where current is nil
* Bring back trend test
* Correctly enumerate trend test
* Use favorable_direction for trend_styles helper
* Make trend public in TimeSeries::Value
* Allow nil current values in trends
I think I might've gotten it wrong before, nils might appear in trends if values are unavailable for snapshots
* Clean up TimeSeries::Trend
* Skip trend values same class validations if any values are nil
* Refactor Money
* Remove object parsing in TimeSeries::Value
We're only every passing hashes
* Refactor trendline chart controller into a time series chart controller
* Replace trendline controller
* Implement empty state
* Port line-chart controller into time-series-chart
* Split out methods
* Group similar time series chart functionality
* Fix indicator color
* Fix empty state in time series chart
* Replace line-chart controller with time-series-chart controller
* Draw empty time series chart if less than 2 data points
* Fix favorable direction serialization
* Handle integers as well as money
* Fix favorable direction serialization
* Replace chart types with optional elements
* Prevent double-renders when displaying turbo caches of time series charts
* Remove ambiguities between time series and series data
* Improve time series chart property names
* Clean up tooltip template
* Match tooltip designs
* Apply trendline gradient
* Implement trendline split behavior
* Use same stroke width on all trend lines
* Sort time series data by date
* Support percentages
* Use data color for guideline circles
* Revert "Use data color for guideline circles"
This reverts commit f239a1e00f84ae28e32f48315d67cf990e541a8a.
* Use expected defaults for time series chart
* Include day in time-series chart x-axis labels
* favorableDirection -> favorable_direction
* data -> datum where appropriate
* Hide change data in tooltip for percentages
