mirror of
https://github.com/twentyhq/twenty.git
synced 2026-09-17 00:22:48 -04:00
Raphaël Bosi
2fa7f53553
The two 1,000-line theme CSS files, the `themeCssVariables` accessor,
`ThemeType` and the 44 files under `src/theme/constants` were all
hand-maintained mirrors of the same ~994 values. This PR makes a
committed TypeScript token source the single source of truth and
generates every one of them from it.
## How it works
Token values live in `packages/twenty-ui/design-tokens/`, one file per
token group. `npx nx generateTokens twenty-ui` rebuilds every artifact
and formats it with oxfmt. A `generate:check` step on the CI lint job
reruns the generator and diffs its declared outputs, so a hand edit to a
generated value cannot merge.
```mermaid
flowchart LR
A["design-tokens/
TypeScript token source"] --> B["scripts/generateThemeTokens.ts"]
B --> C["theme-light.css / theme-dark.css"]
B --> D["themeCssVariables.ts
var() accessor"]
B --> E["themeTypes.ts
ThemeType"]
B --> F["ThemeLight.ts / ThemeDark.ts / ThemeCommon.ts
resolved static values"]
B --> G["MainColorNames.ts
ThemeColor vocabulary"]
B --> H["Animation.ts / GrayScaleLight.ts / GrayScaleDark.ts
standalone subtree constants"]
CI["generate:check (CI)"] -. "regenerates and fails on drift" .-> B
```
## Why this is useful
- Drift between the light CSS, the dark CSS, the accessor, the types and
the static theme objects becomes structurally impossible. Changing a
token is one edit in one file instead of five coordinated ones.
- `src/theme/constants` goes from 44 files to 10, seven of them
generated (`ThemeLight`, `ThemeDark`, `ThemeCommon`, `MainColorNames`,
`Animation`, `GrayScaleLight`, `GrayScaleDark`); the 35 that only held
values are deleted.
- Inside the token source, semantic tokens reference the primitives they
come from instead of copying them: `grayScale` is the gray scale, each
main color is that palette's `9` step, and `smRound` / `mdRound` are
`sm` / `md`. The round-corner and palette invariants hold by
construction rather than by test.
- `ANIMATION`, `GRAY_SCALE_LIGHT`, `GRAY_SCALE_DARK` and `THEME_COMMON`
are emitted as standalone literals rather than slices of `THEME_LIGHT`,
so importing one does not retain the whole 994-token object in a
consumer's bundle.
- `ThemeType` is generated and fully explicit, which removes the
hand-kept `NumericOverrides` mapping and typechecks faster than the
previous nested mapped types.
## Breaking changes
- The four IllustrationIcon CSS variables are renamed from the
historical double-dash names to `--t-illustration-icon-*`. These ship in
the published `./theme-light.css` and `./theme-dark.css` entrypoints, so
a downstream stylesheet writing `var(--t--illustration-icon-color-blue)`
silently resolves to nothing after upgrading. All in-repo consumers read
them through the accessor, which renames in the same commit.
- 35 exports are removed from `twenty-ui/theme` (`ACCENT_LIGHT`,
`BORDER_COMMON`, `COLOR_DARK`, ...). None had a consumer outside
`src/theme/constants`, and every value stays reachable as a subtree of
`THEME_LIGHT` / `THEME_DARK`. `twenty-front` and `twenty-website` need
no edits.
- `packages/twenty-ui/dist/theme-{light,dark}.css` are no longer tracked
in git. The vite `copy-theme-css` plugin is now their only writer;
twenty-front already required a `twenty-ui` build to resolve
`twenty-ui/style.css`.
## Notes for review
Of the ~6,900 added lines, ~3,350 are generated artifacts and ~2,700 are
machine-extracted token values. The reviewable surface is the ~800 lines
under `design-tokens/pipeline`, `design-tokens/__tests__` and
`scripts/`.
Values were machine-extracted, so the only CSS content diffs are the
header comment, a 2-line radius reorder aligning the CSS with the
accessor's token order, and the IllustrationIcon rename. No visual
change is possible, and Argos is flat. The generators are
byte-idempotent. `THEME_LIGHT.spacing` stays a variadic function, and
`background.noisy` stays a `var()` reference in the static trees rather
than inlining a 100 kB data URL into the bundle.
109 lines
3.6 KiB
YAML
109 lines
3.6 KiB
YAML
name: CI UI
|
|
|
|
on:
|
|
pull_request:
|
|
push:
|
|
branches: [main]
|
|
|
|
permissions:
|
|
contents: read
|
|
|
|
concurrency:
|
|
group: ${{ github.workflow }}-${{ github.ref }}${{ github.ref == 'refs/heads/main' && format('-{0}', github.sha) || '' }}
|
|
cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
|
|
|
|
jobs:
|
|
changed-files-check:
|
|
if: github.event_name == 'pull_request'
|
|
uses: ./.github/workflows/changed-files.yaml
|
|
with:
|
|
files: |
|
|
package.json
|
|
yarn.lock
|
|
packages/twenty-ui/**
|
|
packages/twenty-shared/**
|
|
ui-task:
|
|
needs: changed-files-check
|
|
if: needs.changed-files-check.outputs.any_changed == 'true'
|
|
timeout-minutes: 30
|
|
runs-on: ubuntu-latest
|
|
strategy:
|
|
matrix:
|
|
task: [lint, typecheck, test, size, pack-size]
|
|
steps:
|
|
- name: Fetch custom Github Actions and base branch history
|
|
uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
|
|
with:
|
|
fetch-depth: 10
|
|
- name: Install dependencies
|
|
uses: ./.github/actions/yarn-install
|
|
- name: Run ${{ matrix.task }}
|
|
run: npx nx ${{ matrix.task }} twenty-ui
|
|
- name: Check generated theme artifacts are up to date
|
|
if: matrix.task == 'lint'
|
|
run: npx nx generate:check twenty-ui
|
|
ui-sb-build:
|
|
needs: changed-files-check
|
|
if: >-
|
|
always() &&
|
|
(github.event_name == 'push' ||
|
|
needs.changed-files-check.outputs.any_changed == 'true')
|
|
timeout-minutes: 30
|
|
runs-on: ubuntu-latest
|
|
steps:
|
|
- name: Fetch custom Github Actions and base branch history
|
|
uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
|
|
with:
|
|
fetch-depth: 10
|
|
- name: Install dependencies
|
|
uses: ./.github/actions/yarn-install
|
|
- name: Build storybook
|
|
run: npx nx storybook:build twenty-ui
|
|
- name: Upload storybook build
|
|
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
|
|
with:
|
|
name: storybook-twenty-ui
|
|
path: packages/twenty-ui/storybook-static
|
|
retention-days: 1
|
|
ui-sb-test:
|
|
timeout-minutes: 30
|
|
runs-on: ubuntu-latest
|
|
needs: ui-sb-build
|
|
if: always() && needs.ui-sb-build.result == 'success'
|
|
steps:
|
|
- name: Fetch custom Github Actions and base branch history
|
|
uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
|
|
with:
|
|
fetch-depth: 10
|
|
- name: Install dependencies
|
|
uses: ./.github/actions/yarn-install
|
|
- name: Build dependencies
|
|
run: npx nx build twenty-shared
|
|
- name: Download storybook build
|
|
uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
|
|
with:
|
|
name: storybook-twenty-ui
|
|
path: packages/twenty-ui/storybook-static
|
|
- name: Install Playwright
|
|
run: |
|
|
cd packages/twenty-ui
|
|
npx playwright install
|
|
- name: Run storybook tests
|
|
run: npx nx storybook:test twenty-ui
|
|
- name: Upload screenshots for visual regression
|
|
if: always() && !cancelled()
|
|
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
|
|
with:
|
|
name: argos-screenshots-twenty-ui
|
|
path: packages/twenty-ui/screenshots
|
|
retention-days: 1
|
|
ci-ui-status-check:
|
|
if: always() && !cancelled()
|
|
timeout-minutes: 5
|
|
runs-on: ubuntu-latest
|
|
needs: [changed-files-check, ui-task, ui-sb-build, ui-sb-test]
|
|
steps:
|
|
- name: Fail job if any needs failed
|
|
if: contains(needs.*.result, 'failure')
|
|
run: exit 1
|