Skip to content

feat(tokens): prepare for dark primitives #1662

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

Merged
merged 2 commits into from
May 2, 2025
Merged

feat(tokens): prepare for dark primitives #1662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fbf8183
feat(tokens): prepare for dark primitives
Niznikr May 2, 2025
e4e9ad7
chore: add changeset
Niznikr May 2, 2025
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
5 changes: 5 additions & 0 deletions .changeset/nice-jars-clap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@launchpad-ui/tokens": patch
---

Move default primitives to themes.css
222 changes: 106 additions & 116 deletions packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Tokens > builds dark alias tokens 1`] = `
exports[`Tokens > builds dark tokens 1`] = `
"/**
* Do not edit directly, this file was auto-generated.
*/
Expand Down Expand Up @@ -79,126 +79,12 @@ exports[`Tokens > builds dark alias tokens 1`] = `
"
`;

exports[`Tokens > builds default alias tokens 1`] = `
exports[`Tokens > builds default tokens 1`] = `
"/**
* Do not edit directly, this file was auto-generated.
*/

:root, [data-theme] {
--lp-color-bg-interactive-tertiary-base: rgba(0, 0, 0, 0);
--lp-color-bg-interactive-tertiary-active: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-base: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-active: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-focus: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-hover: rgba(0, 0, 0, 0);
--lp-color-border-interactive-disabled: rgba(0, 0, 0, 0);
--lp-color-data-info: rgb(137, 96, 194);
--lp-color-data-comparison: rgb(169, 175, 180);
--lp-color-data-neutral: rgb(148, 153, 159);
--lp-color-data-positive: rgb(0, 131, 68);
--lp-color-data-negative: rgb(219, 34, 81);
--lp-color-data-series-1: rgb(52, 182, 208);
--lp-color-data-series-2: rgb(254, 190, 112);
--lp-color-data-series-3: rgb(137, 96, 194);
--lp-color-data-series-4: rgb(0, 131, 68);
--lp-color-bg-feedback-primary: var(--lp-color-gray-800);
--lp-color-bg-feedback-error: var(--lp-color-red-50);
--lp-color-bg-feedback-info: var(--lp-color-blue-50);
--lp-color-bg-feedback-success: var(--lp-color-green-50);
--lp-color-bg-interactive-primary-base: var(--lp-color-blue-500);
--lp-color-bg-interactive-primary-active: var(--lp-color-blue-500);
--lp-color-bg-interactive-primary-focus: var(--lp-color-blue-600);
--lp-color-bg-interactive-primary-hover: var(--lp-color-blue-600);
--lp-color-bg-interactive-secondary-focus: var(--lp-color-gray-50);
--lp-color-bg-interactive-secondary-hover: var(--lp-color-gray-50);
--lp-color-bg-interactive-tertiary-focus: var(--lp-color-gray-50);
--lp-color-bg-interactive-tertiary-hover: var(--lp-color-gray-50);
--lp-color-bg-interactive-destructive-base: var(--lp-color-red-500);
--lp-color-bg-interactive-destructive-active: var(--lp-color-red-500);
--lp-color-bg-interactive-destructive-focus: var(--lp-color-red-600);
--lp-color-bg-interactive-destructive-hover: var(--lp-color-red-600);
--lp-color-bg-interactive-disabled: var(--lp-color-gray-100);
--lp-color-bg-interactive-link: var(--lp-color-blue-50);
--lp-color-bg-interactive-selected: var(--lp-color-blue-0);
--lp-color-bg-ui-primary: var(--lp-color-white-950);
--lp-color-bg-ui-secondary: var(--lp-color-gray-0);
--lp-color-bg-ui-tertiary: var(--lp-color-gray-50);
--lp-color-bg-product-beta: var(--lp-color-purple-100);
--lp-color-bg-product-federal: var(--lp-color-brand-yellow-base);
--lp-color-border-feedback-error: var(--lp-color-red-500);
--lp-color-border-feedback-info: var(--lp-color-blue-500);
--lp-color-border-feedback-success: var(--lp-color-green-500);
--lp-color-border-field-active: var(--lp-color-blue-500);
--lp-color-border-field-focus: var(--lp-color-blue-500);
--lp-color-border-interactive-focus: var(--lp-color-blue-500);
--lp-color-border-interactive-selected: var(--lp-color-blue-500);
--lp-color-border-ui-primary: var(--lp-color-gray-100);
--lp-color-border-ui-secondary: var(--lp-color-gray-50);
--lp-color-fill-feedback-error: var(--lp-color-red-500);
--lp-color-fill-feedback-info: var(--lp-color-blue-500);
--lp-color-fill-feedback-success: var(--lp-color-green-500);
--lp-color-fill-interactive-primary: var(--lp-color-white-950);
--lp-color-fill-interactive-destructive: var(--lp-color-red-500);
--lp-color-fill-ui-primary: var(--lp-color-gray-700);
--lp-color-fill-ui-secondary: var(--lp-color-gray-500);
--lp-color-fill-field-base: var(--lp-color-gray-600);
--lp-color-shadow-interactive-focus: var(--lp-color-blue-600);
--lp-color-shadow-interactive-primary: var(--lp-color-white-950);
--lp-color-shadow-ui-primary: var(--lp-color-black-50);
--lp-color-shadow-ui-secondary: var(--lp-color-black-0);
--lp-color-text-feedback-error: var(--lp-color-red-600);
--lp-color-text-feedback-success: var(--lp-color-green-600);
--lp-color-text-feedback-info: var(--lp-color-blue-600);
--lp-color-text-interactive-base: var(--lp-color-blue-600);
--lp-color-text-interactive-active: var(--lp-color-purple-700);
--lp-color-text-interactive-primary-base: var(--lp-color-white-950);
--lp-color-text-interactive-primary-active: var(--lp-color-white-950);
--lp-color-text-interactive-primary-focus: var(--lp-color-white-950);
--lp-color-text-interactive-primary-hover: var(--lp-color-white-950);
--lp-color-text-interactive-secondary: var(--lp-color-gray-600);
--lp-color-text-interactive-disabled: var(--lp-color-gray-500);
--lp-color-text-interactive-selected: var(--lp-color-blue-600);
--lp-color-text-ui-primary-base: var(--lp-color-gray-900);
--lp-color-text-ui-primary-inverted: var(--lp-color-white-950);
--lp-color-text-ui-secondary: var(--lp-color-gray-600);
--lp-color-text-field-disabled: var(--lp-color-gray-500);
--lp-color-text-field-placeholder: var(--lp-color-gray-500);
--lp-color-text-product-beta: var(--lp-color-purple-600);
--lp-color-text-product-federal: var(--lp-color-gray-950);
--lp-color-text-code-function: var(--lp-color-brand-purple-dark);
--lp-color-text-code-tag: var(--lp-color-brand-orange-dark);
--lp-color-text-code-string: var(--lp-color-brand-cyan-dark);
--lp-color-text-code-comment: var(--lp-color-gray-400);
--lp-color-text-code-base: var(--lp-color-gray-600);
--lp-color-text-code-keyword: var(--lp-color-brand-pink-base);
--lp-color-text-code-title: var(--lp-color-brand-orange-base);
--lp-color-text-code-number: var(--lp-color-brand-blue-dark);
--lp-color-bg-interactive-secondary-base: var(--lp-color-bg-ui-primary);
--lp-color-bg-interactive-secondary-active: var(--lp-color-bg-ui-primary);
--lp-color-bg-overlay-primary: var(--lp-color-bg-ui-primary);
--lp-color-bg-overlay-secondary: var(--lp-color-bg-ui-primary);
--lp-color-bg-field-base: var(--lp-color-bg-ui-primary);
--lp-color-bg-field-disabled: var(--lp-color-bg-ui-tertiary);
--lp-color-border-field-base: var(--lp-color-border-ui-primary);
--lp-color-border-field-error: var(--lp-color-border-feedback-error);
--lp-color-border-field-disabled: var(--lp-color-border-ui-secondary);
--lp-color-border-interactive-secondary-base: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-secondary-active: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-secondary-focus: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-secondary-hover: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-destructive: var(--lp-color-border-feedback-error);
--lp-color-text-feedback-base: var(--lp-color-text-ui-primary-base);
--lp-color-text-interactive-destructive: var(--lp-color-text-feedback-error);
}
"
`;

exports[`Tokens > builds default primitive tokens 1`] = `
"/**
* Do not edit directly, this file was auto-generated.
*/

:root {
--lp-color-gray-0: rgb(247, 249, 251);
--lp-color-gray-50: rgb(236, 239, 242);
--lp-color-gray-100: rgb(216, 221, 227);
Expand Down Expand Up @@ -304,6 +190,110 @@ exports[`Tokens > builds default primitive tokens 1`] = `
--lp-color-brand-green-light: rgb(225, 255, 200);
--lp-color-brand-green-base: rgb(139, 239, 52);
--lp-color-brand-green-dark: rgb(67, 144, 0);
--lp-color-bg-interactive-tertiary-base: rgba(0, 0, 0, 0);
--lp-color-bg-interactive-tertiary-active: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-base: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-active: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-focus: rgba(0, 0, 0, 0);
--lp-color-border-interactive-primary-hover: rgba(0, 0, 0, 0);
--lp-color-border-interactive-disabled: rgba(0, 0, 0, 0);
--lp-color-data-info: rgb(137, 96, 194);
--lp-color-data-comparison: rgb(169, 175, 180);
--lp-color-data-neutral: rgb(148, 153, 159);
--lp-color-data-positive: rgb(0, 131, 68);
--lp-color-data-negative: rgb(219, 34, 81);
--lp-color-data-series-1: rgb(52, 182, 208);
--lp-color-data-series-2: rgb(254, 190, 112);
--lp-color-data-series-3: rgb(137, 96, 194);
--lp-color-data-series-4: rgb(0, 131, 68);
--lp-color-bg-feedback-primary: var(--lp-color-gray-800);
--lp-color-bg-feedback-error: var(--lp-color-red-50);
--lp-color-bg-feedback-info: var(--lp-color-blue-50);
--lp-color-bg-feedback-success: var(--lp-color-green-50);
--lp-color-bg-interactive-primary-base: var(--lp-color-blue-500);
--lp-color-bg-interactive-primary-active: var(--lp-color-blue-500);
--lp-color-bg-interactive-primary-focus: var(--lp-color-blue-600);
--lp-color-bg-interactive-primary-hover: var(--lp-color-blue-600);
--lp-color-bg-interactive-secondary-focus: var(--lp-color-gray-50);
--lp-color-bg-interactive-secondary-hover: var(--lp-color-gray-50);
--lp-color-bg-interactive-tertiary-focus: var(--lp-color-gray-50);
--lp-color-bg-interactive-tertiary-hover: var(--lp-color-gray-50);
--lp-color-bg-interactive-destructive-base: var(--lp-color-red-500);
--lp-color-bg-interactive-destructive-active: var(--lp-color-red-500);
--lp-color-bg-interactive-destructive-focus: var(--lp-color-red-600);
--lp-color-bg-interactive-destructive-hover: var(--lp-color-red-600);
--lp-color-bg-interactive-disabled: var(--lp-color-gray-100);
--lp-color-bg-interactive-link: var(--lp-color-blue-50);
--lp-color-bg-interactive-selected: var(--lp-color-blue-0);
--lp-color-bg-ui-primary: var(--lp-color-white-950);
--lp-color-bg-ui-secondary: var(--lp-color-gray-0);
--lp-color-bg-ui-tertiary: var(--lp-color-gray-50);
--lp-color-bg-product-beta: var(--lp-color-purple-100);
--lp-color-bg-product-federal: var(--lp-color-brand-yellow-base);
--lp-color-border-feedback-error: var(--lp-color-red-500);
--lp-color-border-feedback-info: var(--lp-color-blue-500);
--lp-color-border-feedback-success: var(--lp-color-green-500);
--lp-color-border-field-active: var(--lp-color-blue-500);
--lp-color-border-field-focus: var(--lp-color-blue-500);
--lp-color-border-interactive-focus: var(--lp-color-blue-500);
--lp-color-border-interactive-selected: var(--lp-color-blue-500);
--lp-color-border-ui-primary: var(--lp-color-gray-100);
--lp-color-border-ui-secondary: var(--lp-color-gray-50);
--lp-color-fill-feedback-error: var(--lp-color-red-500);
--lp-color-fill-feedback-info: var(--lp-color-blue-500);
--lp-color-fill-feedback-success: var(--lp-color-green-500);
--lp-color-fill-interactive-primary: var(--lp-color-white-950);
--lp-color-fill-interactive-destructive: var(--lp-color-red-500);
--lp-color-fill-ui-primary: var(--lp-color-gray-700);
--lp-color-fill-ui-secondary: var(--lp-color-gray-500);
--lp-color-fill-field-base: var(--lp-color-gray-600);
--lp-color-shadow-interactive-focus: var(--lp-color-blue-600);
--lp-color-shadow-interactive-primary: var(--lp-color-white-950);
--lp-color-shadow-ui-primary: var(--lp-color-black-50);
--lp-color-shadow-ui-secondary: var(--lp-color-black-0);
--lp-color-text-feedback-error: var(--lp-color-red-600);
--lp-color-text-feedback-success: var(--lp-color-green-600);
--lp-color-text-feedback-info: var(--lp-color-blue-600);
--lp-color-text-interactive-base: var(--lp-color-blue-600);
--lp-color-text-interactive-active: var(--lp-color-purple-700);
--lp-color-text-interactive-primary-base: var(--lp-color-white-950);
--lp-color-text-interactive-primary-active: var(--lp-color-white-950);
--lp-color-text-interactive-primary-focus: var(--lp-color-white-950);
--lp-color-text-interactive-primary-hover: var(--lp-color-white-950);
--lp-color-text-interactive-secondary: var(--lp-color-gray-600);
--lp-color-text-interactive-disabled: var(--lp-color-gray-500);
--lp-color-text-interactive-selected: var(--lp-color-blue-600);
--lp-color-text-ui-primary-base: var(--lp-color-gray-900);
--lp-color-text-ui-primary-inverted: var(--lp-color-white-950);
--lp-color-text-ui-secondary: var(--lp-color-gray-600);
--lp-color-text-field-disabled: var(--lp-color-gray-500);
--lp-color-text-field-placeholder: var(--lp-color-gray-500);
--lp-color-text-product-beta: var(--lp-color-purple-600);
--lp-color-text-product-federal: var(--lp-color-gray-950);
--lp-color-text-code-function: var(--lp-color-brand-purple-dark);
--lp-color-text-code-tag: var(--lp-color-brand-orange-dark);
--lp-color-text-code-string: var(--lp-color-brand-cyan-dark);
--lp-color-text-code-comment: var(--lp-color-gray-400);
--lp-color-text-code-base: var(--lp-color-gray-600);
--lp-color-text-code-keyword: var(--lp-color-brand-pink-base);
--lp-color-text-code-title: var(--lp-color-brand-orange-base);
--lp-color-text-code-number: var(--lp-color-brand-blue-dark);
--lp-color-bg-interactive-secondary-base: var(--lp-color-bg-ui-primary);
--lp-color-bg-interactive-secondary-active: var(--lp-color-bg-ui-primary);
--lp-color-bg-overlay-primary: var(--lp-color-bg-ui-primary);
--lp-color-bg-overlay-secondary: var(--lp-color-bg-ui-primary);
--lp-color-bg-field-base: var(--lp-color-bg-ui-primary);
--lp-color-bg-field-disabled: var(--lp-color-bg-ui-tertiary);
--lp-color-border-field-base: var(--lp-color-border-ui-primary);
--lp-color-border-field-error: var(--lp-color-border-feedback-error);
--lp-color-border-field-disabled: var(--lp-color-border-ui-secondary);
--lp-color-border-interactive-secondary-base: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-secondary-active: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-secondary-focus: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-secondary-hover: var(--lp-color-border-ui-primary);
--lp-color-border-interactive-destructive: var(--lp-color-border-feedback-error);
--lp-color-text-feedback-base: var(--lp-color-text-ui-primary-base);
--lp-color-text-interactive-destructive: var(--lp-color-text-feedback-error);
}
"
`;
47 changes: 11 additions & 36 deletions packages/tokens/__tests__/tokens.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,13 @@ import type { DesignTokens } from 'style-dictionary/types';

import path from 'path';
import StyleDictionary from 'style-dictionary';
import { formats, transformGroups, transforms } from 'style-dictionary/enums';
import { describe, expect, it } from 'vitest';

import { css } from '../src/themes';
import aliasDark from '../tokens/color-aliases.dark.json' with { type: 'json' };
import aliasDefault from '../tokens/color-aliases.default.json' with { type: 'json' };

const primitives = () => ({
source: [path.resolve(__dirname, '../tokens/color-primitives.json')],
platforms: {
css: {
prefix: 'lp',
transformGroup: transformGroups.css,
transforms: [transforms.colorRgb],
options: {
outputReferences: true,
usesDtcg: true,
},
files: [
{
destination: 'primitives.css',
format: formats.cssVariables,
},
],
},
},
});
import primitiveDark from '../tokens/color-primitives.dark.json' with { type: 'json' };
import primitiveDefault from '../tokens/color-primitives.default.json' with { type: 'json' };

const sameKeys = (tokens1: DesignTokens, tokens2: DesignTokens) => {
for (const key in tokens1) {
Expand All @@ -47,24 +27,19 @@ const sameKeys = (tokens1: DesignTokens, tokens2: DesignTokens) => {
};

describe('Tokens', () => {
it('uses default theme as base for dark theme', () => {
it('uses default theme as base for dark theme aliases', () => {
expect(sameKeys(aliasDark, aliasDefault)).toBeTruthy();
});

it('builds default primitive tokens', async () => {
const config = primitives();

const sd = new StyleDictionary(config);
const [file] = await sd.formatPlatform('css');

expect(file.output).toMatchSnapshot();
it('uses default theme as base for dark theme primitives', () => {
expect(sameKeys(primitiveDark, primitiveDefault)).toBeTruthy();
});

it('builds default alias tokens', async () => {
it('builds default tokens', async () => {
const config = css('default');
config.source = [
path.resolve(__dirname, '../tokens/color-primitives.json'),
path.resolve(__dirname, '../tokens/color-aliases.default.json'),
path.resolve(__dirname, '../tokens/color-primitives.default.json'),
path.resolve(__dirname, '../tokens/*.default.json'),
];

const sd = new StyleDictionary(config);
Expand All @@ -73,11 +48,11 @@ describe('Tokens', () => {
expect(file.output).toMatchSnapshot();
});

it('builds dark alias tokens', async () => {
it('builds dark tokens', async () => {
const config = css('dark');
config.source = [
path.resolve(__dirname, '../tokens/color-primitives.json'),
path.resolve(__dirname, '../tokens/color-aliases.dark.json'),
path.resolve(__dirname, '../tokens/color-primitives.default.json'),
path.resolve(__dirname, '../tokens/*.dark.json'),
];

const sd = new StyleDictionary(config);
Expand Down
2 changes: 1 addition & 1 deletion packages/tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"./dist/tokens.json": "./dist/tokens.json"
},
"scripts": {
"build": "tsx src/build.ts && tsc --noEmit",
"build": "pnpm clean && tsx src/build.ts && tsc --noEmit",
"clean": "rm -rf dist",
"lint": "exit 0",
"test": "vitest run",
Expand Down
6 changes: 3 additions & 3 deletions packages/tokens/src/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const sd = new StyleDictionary({
{
destination: 'index.css',
format: formats.cssVariables,
filter: (token) => !token.filePath.includes('aliases'),
filter: (token) => !token.filePath.includes('color'),
},
{
destination: 'themes.css',
Expand Down Expand Up @@ -209,7 +209,7 @@ const sd = new StyleDictionary({
});

const modes = new StyleDictionary({
source: ['tokens/color-primitives.json', `tokens/*.${light}.json`, `tokens/*.${dark}.json`],
source: [`tokens/*.${light}.json`, `tokens/*.${dark}.json`],
platforms: {
figma: {
buildPath: 'dist/',
Expand All @@ -222,7 +222,7 @@ const modes = new StyleDictionary({
{
destination: `figma.${dark}.json`,
format: 'json/figma',
filter: (token) => !token.filePath.includes('primitives'),
filter: (token) => token.filePath.includes(dark),
},
],
},
Expand Down
2 changes: 1 addition & 1 deletion packages/tokens/src/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const themes = ['default', 'dark'] as const;
export type Theme = (typeof themes)[number];

export const css = (theme: Theme): Config => ({
source: ['tokens/color-primitives.json', `tokens/*.${theme}.json`],
source: ['tokens/color-primitives.default.json', `tokens/*.${theme}.json`],
platforms: {
css: {
prefix: 'lp',
Expand Down
5 changes: 5 additions & 0 deletions packages/tokens/tokens/color-primitives.dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"color": {
"$type": "color"
}
}
0 packages/tokens/tokens/color-primitives.json → ...kens/tokens/color-primitives.default.json
View file
Open in desktop
File renamed without changes.
Loading