Skip to content

Figma branch sync + alternative token setup #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
sjoerdbeentjes wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Figma branch sync + alternative token setup #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b6e703
feat(tokens): support Figma branch sync and apply alternative token s…
sjoerdbeentjes Jun 29, 2026
969f0ff
feat(angular): migrate button to redesigned token taxonomy
sjoerdbeentjes Jun 29, 2026
4b6eeb1
refactor(tokens): use literal Figma token names as Tailwind utilities
sjoerdbeentjes Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .claude/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@
"runtimeExecutable": "pnpm",
"runtimeArgs": ["--filter", "@surfnet/react-app", "dev"],
"port": 3000
},
{
"name": "angular-storybook",
"runtimeExecutable": "pnpm",
"runtimeArgs": ["--filter", "@surfnet/angular", "storybook"],
"port": 6007
}
]
}
5 changes: 5 additions & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,8 @@ FIGMA_TOKEN=
# Figma file key — the segment after /design/ (or /file/) in the file URL:
# https://www.figma.com/design/<FIGMA_FILE_ID>/Your-File-Name
FIGMA_FILE_ID=

# Optional: pull tokens from a Figma branch instead of the main file. Set to the
# branch name (as shown in Figma); overridable per-run with --branch "<name>".
# Leave empty to read from the main file.
FIGMA_BRANCH=
14 changes: 7 additions & 7 deletions packages/angular/src/lib/ui/button/src/lib/hlm-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import type { ClassValue } from 'clsx';
import { injectBrnButtonConfig } from './hlm-button.token';

const variantClasses = {
default: 'bg-primary text-primary-foreground hover:bg-primary/80',
default: 'bg-background-primary text-foreground-primary hover:bg-background-primary-hover',
outline:
'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
'border-border-default bg-background-default hover:bg-background-item-hover hover:text-foreground-item-hover aria-expanded:bg-background-item-hover aria-expanded:text-foreground-item-hover shadow-xs',
secondary:
'bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',
'bg-background-secondary text-foreground-secondary aria-expanded:bg-background-secondary aria-expanded:text-foreground-secondary hover:bg-background-secondary-hover',
ghost:
'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
'hover:bg-background-item-hover hover:text-foreground-item-hover aria-expanded:bg-background-item-hover aria-expanded:text-foreground-item-hover',
destructive:
'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
link: 'text-primary underline-offset-4 hover:underline',
'bg-background-error-subtle hover:bg-background-error-subtle-hover text-foreground-error focus-visible:border-border-error focus-visible:ring-ring-default-error/20',
link: 'text-background-primary underline-offset-4 hover:underline',
} satisfies Record<ButtonVariantName, string>;

const sizeClasses = {
Expand All @@ -33,7 +33,7 @@ const sizeClasses = {
} satisfies Record<ButtonSizeName, string>;

export const buttonVariants = cva(
"focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
"focus-visible:border-ring-default focus-visible:ring-ring-default/50 data-[matches-spartan-invalid=true]:ring-ring-default-error/20 data-[matches-spartan-invalid=true]:border-border-error rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
{
variants: {
variant: variantClasses,
Expand Down
54 changes: 52 additions & 2 deletions packages/angular/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,56 @@
@import '@surfnet/tokens/tokens.css';
/* You can add global styles to this file, and also import other style files */

/* Expose the @surfnet/tokens variables to Tailwind under their literal Figma role
names (e.g. bg-background-primary, text-foreground-primary). The @spartan-ng
preset still registers the old flat names; we don't use those. Keep in sync
with packages/react/src/index.css. */
@theme inline {
--color-background-default: var(--background-default);
--color-background-subtle: var(--background-subtle);
--color-background-primary: var(--background-primary);
--color-background-primary-hover: var(--background-primary-hover);
--color-background-secondary: var(--background-secondary);
--color-background-secondary-hover: var(--background-secondary-hover);
--color-background-error: var(--background-error);
--color-background-error-subtle: var(--background-error-subtle);
--color-background-error-subtle-hover: var(--background-error-subtle-hover);
--color-background-card: var(--background-card);
--color-background-popover: var(--background-popover);
--color-background-item-hover: var(--background-item-hover);
--color-background-item-selected: var(--background-item-selected);
--color-background-alt: var(--background-alt);
--color-background-alt-primary: var(--background-alt-primary);
--color-background-alt-item-hover: var(--background-alt-item-hover);
--color-foreground-default: var(--foreground-default);
--color-foreground-default-primary: var(--foreground-default-primary);
--color-foreground-default-error: var(--foreground-default-error);
--color-foreground-subtle: var(--foreground-subtle);
--color-foreground-secondary: var(--foreground-secondary);
--color-foreground-primary: var(--foreground-primary);
--color-foreground-error: var(--foreground-error);
--color-foreground-card: var(--foreground-card);
--color-foreground-popover: var(--foreground-popover);
--color-foreground-item-hover: var(--foreground-item-hover);
--color-foreground-item-selected: var(--foreground-item-selected);
--color-foreground-alt: var(--foreground-alt);
--color-foreground-alt-primary: var(--foreground-alt-primary);
--color-foreground-alt-item-hover: var(--foreground-alt-item-hover);
--color-border-subtle: var(--border-subtle);
--color-border-default: var(--border-default);
--color-border-error: var(--border-error);
--color-border-alt: var(--border-alt);
--color-ring-default: var(--ring-default);
--color-ring-default-error: var(--ring-default-error);
--color-ring-alt: var(--ring-alt);
--color-ring-offset: var(--ring-offset);
--color-charts-chart-1: var(--charts-chart-1);
--color-charts-chart-2: var(--charts-chart-2);
--color-charts-chart-3: var(--charts-chart-3);
--color-charts-chart-4: var(--charts-chart-4);
--color-charts-chart-5: var(--charts-chart-5);
}

:root {
color-scheme: light;

Expand All @@ -23,9 +73,9 @@

@layer base {
* {
@apply border-border outline-ring/50;
@apply border-border-default outline-ring-default/50;
}
body {
@apply bg-background text-foreground;
@apply bg-background-default text-foreground-default;
}
}
14 changes: 7 additions & 7 deletions packages/react/src/components/ui/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ import type { ButtonSizeName, ButtonVariantName } from '@surfnet/contracts';
import { cn } from '@/lib/utils';

const buttonVariantClasses = {
default: 'bg-primary text-primary-foreground hover:bg-primary/80',
default: 'bg-background-primary text-foreground-primary hover:bg-background-primary-hover',
outline:
'border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
'border-border-default bg-background-default shadow-xs hover:bg-background-item-hover hover:text-foreground-item-hover aria-expanded:bg-background-item-hover aria-expanded:text-foreground-item-hover',
secondary:
'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
'bg-background-secondary text-foreground-secondary hover:bg-background-secondary-hover aria-expanded:bg-background-secondary aria-expanded:text-foreground-secondary',
ghost:
'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
'hover:bg-background-item-hover hover:text-foreground-item-hover aria-expanded:bg-background-item-hover aria-expanded:text-foreground-item-hover',
destructive:
'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
link: 'text-primary underline-offset-4 hover:underline',
'bg-background-error-subtle text-foreground-error hover:bg-background-error-subtle-hover focus-visible:border-border-error focus-visible:ring-ring-default-error/20',
link: 'text-background-primary underline-offset-4 hover:underline',
} satisfies Record<ButtonVariantName, string>;

const buttonSizeClasses = {
Expand All @@ -31,7 +31,7 @@ const buttonSizeClasses = {
} satisfies Record<ButtonSizeName, string>;

const buttonVariants = cva(
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring-default focus-visible:ring-3 focus-visible:ring-ring-default/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-border-error aria-invalid:ring-3 aria-invalid:ring-ring-default-error/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: buttonVariantClasses,
Expand Down
81 changes: 48 additions & 33 deletions packages/react/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,52 @@
@theme inline {
--font-heading: var(--font-sans);
--font-sans: 'Geist Variable', sans-serif;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
/* Expose the @surfnet/tokens variables to Tailwind under their literal Figma
role names, so utilities read exactly like the tokens (e.g. bg-background-primary,
text-foreground-primary, hover:bg-background-item-hover). */
--color-background-default: var(--background-default);
--color-background-subtle: var(--background-subtle);
--color-background-primary: var(--background-primary);
--color-background-primary-hover: var(--background-primary-hover);
--color-background-secondary: var(--background-secondary);
--color-background-secondary-hover: var(--background-secondary-hover);
--color-background-error: var(--background-error);
--color-background-error-subtle: var(--background-error-subtle);
--color-background-error-subtle-hover: var(--background-error-subtle-hover);
--color-background-card: var(--background-card);
--color-background-popover: var(--background-popover);
--color-background-item-hover: var(--background-item-hover);
--color-background-item-selected: var(--background-item-selected);
--color-background-alt: var(--background-alt);
--color-background-alt-primary: var(--background-alt-primary);
--color-background-alt-item-hover: var(--background-alt-item-hover);
--color-foreground-default: var(--foreground-default);
--color-foreground-default-primary: var(--foreground-default-primary);
--color-foreground-default-error: var(--foreground-default-error);
--color-foreground-subtle: var(--foreground-subtle);
--color-foreground-secondary: var(--foreground-secondary);
--color-foreground-primary: var(--foreground-primary);
--color-foreground-error: var(--foreground-error);
--color-foreground-card: var(--foreground-card);
--color-foreground-popover: var(--foreground-popover);
--color-foreground-item-hover: var(--foreground-item-hover);
--color-foreground-item-selected: var(--foreground-item-selected);
--color-foreground-alt: var(--foreground-alt);
--color-foreground-alt-primary: var(--foreground-alt-primary);
--color-foreground-alt-item-hover: var(--foreground-alt-item-hover);
--color-border-subtle: var(--border-subtle);
--color-border-default: var(--border-default);
--color-border-error: var(--border-error);
--color-border-alt: var(--border-alt);
--color-ring-default: var(--ring-default);
--color-ring-default-error: var(--ring-default-error);
--color-ring-alt: var(--ring-alt);
--color-ring-offset: var(--ring-offset);
--color-charts-chart-1: var(--charts-chart-1);
--color-charts-chart-2: var(--charts-chart-2);
--color-charts-chart-3: var(--charts-chart-3);
--color-charts-chart-4: var(--charts-chart-4);
--color-charts-chart-5: var(--charts-chart-5);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
Expand All @@ -56,10 +71,10 @@

@layer base {
* {
@apply border-border outline-ring/50;
@apply border-border-default outline-ring-default/50;
}
body {
@apply bg-background text-foreground;
@apply bg-background-default text-foreground-default;
}
html {
@apply font-sans;
Expand Down
Loading
Loading