/* * Brand layer for Twenty — overrides design tokens WITHOUT forking Twenty. * * Twenty v2.9.0 drives its entire theme from CSS custom properties defined in * twenty-ui/src/theme-constants/theme-light.css and theme-dark.css (991 vars * each, scoped to .light / .dark on ). The JS side does not import * colour constants — ThemeProvider.computeThemeFromCss() reads the *computed* * values back out of the DOM, so overriding a variable here changes both the * CSS and what styled-components see. * * This file is loaded after Twenty's own stylesheets, but route-level CSS * chunks are appended lazily AFTER it, so cascade order alone is not a safe * guarantee across upgrades. The selectors below are therefore html.light / * html.dark (0,1,1) rather than Twenty's .light / .dark (0,1,0): they win on * specificity no matter where a future release puts the token declarations. * * PLACEHOLDER PALETTE — replace the accent scale with the real brand colours. * Scale semantics follow Radix: 1-2 page backgrounds, 3-5 component * backgrounds, 6-8 borders, 9-10 solid fills, 11 accessible text, 12 headings. */ html.light { --t-accent-accent1: #f5fbf8; --t-accent-accent2: #ebf7f1; --t-accent-accent3: #d8f0e4; --t-accent-accent4: #c2e8d4; --t-accent-accent5: #a9dec2; --t-accent-accent6: #8bd0ab; --t-accent-accent7: #63bd8f; --t-accent-accent8: #2ea36c; --t-accent-accent9: #0f8a56; --t-accent-accent10: #0c7a4c; --t-accent-accent11: #0a6b43; --t-accent-accent12: #073a25; /* Semantic aliases Twenty maps onto the scale above. */ --t-accent-primary: #a9dec2; --t-accent-secondary: #a9dec2; --t-accent-tertiary: #d8f0e4; --t-accent-quaternary: #ebf7f1; --t-accent-accent3570: #2ea36c; --t-accent-accent4060: #2ea36c; /* Blue-keyed tokens used for selection / links / focus rings. */ --t-border-color-blue: #63bd8f; --t-background-transparent-blue: rgba(15, 138, 86, 0.08); --t-color-blue: #0f8a56; } html.dark { --t-accent-accent1: #0b1410; --t-accent-accent2: #0f1c16; --t-accent-accent3: #12291e; --t-accent-accent4: #143526; --t-accent-accent5: #16412e; --t-accent-accent6: #1a5038; --t-accent-accent7: #1f6545; --t-accent-accent8: #268056; --t-accent-accent9: #2f9e68; --t-accent-accent10: #38b076; --t-accent-accent11: #4fd196; --t-accent-accent12: #d6f5e6; --t-accent-primary: #16412e; --t-accent-secondary: #16412e; --t-accent-tertiary: #12291e; --t-accent-quaternary: #0f1c16; --t-accent-accent3570: #268056; --t-accent-accent4060: #268056; --t-border-color-blue: #1f6545; --t-background-transparent-blue: rgba(47, 158, 104, 0.12); --t-color-blue: #2f9e68; } /* * Typography. Twenty ships Inter, pulled from fonts.googleapis.com by * index.html — for an EU self-host that is an avoidable third-party request; * self-host the woff2 files and point the family here. * * .light, .dark { --t-font-family: 'YourFont', Inter, sans-serif; } */