[WIP] JSON theme #4443

origami-z · 2024-11-25T15:43:13Z

MVP - Make the script to generate CSS for theme-next, so there is no visual regression with minimal output change (e.g., variable syntax stays the same, CSS rule / selector stays the same, order of CSS variable may change)

#4041

Tokens

Run "Export Color Styles" -> "Export Variables" -> "Json (Experimental)" from PR#51
Select Collection and Mode on plugin UI
1. Add "Additional Root Key (Optional)"
  - Colors library: 'color'
  - Palette library: 'palette'
Copy output to corresponding *.tokens.json file
Modify color tokens
1. remove categorical. from , e.g. replace "{color.categorical to "{color
2. added background. to a few background color raw tokens

TODOs

Custom value tranformer for foundation/alpha-next.css tokens, to achieve rgba syntax from packages/theme/css/foundations/alpha-next.css? Or this may not be needed given we generate these values
Better alpha foundation color generation, maybe use custom opacity modifier instead
Correct token types for non-colors, they're currently all "number". Refer to DTCG format types

changeset-bot · 2024-11-25T15:43:17Z

⚠️ No Changeset found

Latest commit: 0e8752e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2024-11-25T15:43:18Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
saltdesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 29, 2024 2:43pm

origami-z · 2024-11-29T10:36:06Z

packages/theme/css/palette/accent-next.css

  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-none: var(--salt-color-blue-500-0a);


This is new in Figma, not in code

--salt-color-blue-500-0a didn't exist in code

origami-z · 2024-11-29T10:38:31Z

packages/theme/css/palette/alpha-next.css

 .salt-theme.salt-theme-next[data-mode="light"] {
  --salt-palette-alpha: var(--salt-color-black-30a);
+  --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
+  --salt-palette-alpha-none: var(--salt-color-black-0a);


--salt-color-black-0a vs transparent

origami-z · 2024-11-29T10:55:24Z

packages/theme/css/foundations/color-next.css

-  --salt-color-background-snow-rgb: 255, 255, 255;
-  --salt-color-background-marble-rgb: 245, 247, 248;
-  --salt-color-background-limestone-rgb: 250, 248, 242;
-  --salt-color-background-gradientlight-rgb: 226, 228, 229;


This color was fundamentally wrong #4463

origami-z · 2024-11-29T11:14:43Z

packages/theme/css/foundations/color-next.css

+  --salt-color-background-marble: rgb(245, 247, 248);
+  --salt-color-background-limestone: rgb(250, 248, 242);
+  --salt-color-background-titanium: rgb(226, 228, 229);
+  --salt-color-background-charcoal: rgb(71, 76, 80);


Charcoal not in code

origami-z · 2024-11-29T11:41:34Z

packages/theme/css/palette/background-next.css

 .salt-theme.salt-theme-next[data-mode="dark"] {
  --salt-palette-background-primary: var(--salt-color-background-jet);
  --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a);
  --salt-palette-background-secondary: var(--salt-color-background-granite);
-  --salt-palette-background-secondary-disabled: var(--salt-color-background-granite-40a);
+  --salt-palette-background-secondary-disabled: var(--salt-color-background-charcoal-40a);


Likely Figma is wrong, default is granite the line above

origami-z · 2024-11-29T11:42:27Z

packages/theme/css/palette/info-next.css

 .salt-theme.salt-theme-next[data-mode="light"] {
  --salt-palette-info: var(--salt-color-blue-500);
  --salt-palette-info-strong: var(--salt-color-blue-600);
-  --salt-palette-info-weak: var(--salt-color-blue-100);
+  --salt-palette-info-weakest: var(--salt-color-blue-100);


Code is likely wrong, need to fix with deprecation. This can't be easily deprecate and fix, given weak may be needed afterwards. Should be a breaking change action. Noted in #1107

origami-z · 2024-11-29T11:43:01Z

packages/theme/css/palette/negative-next.css

 .salt-theme.salt-theme-next[data-mode="light"] {
  --salt-palette-negative: var(--salt-color-red-500);
-  --salt-palette-negative-strong: var(--salt-color-red-600);
-  --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
-  --salt-palette-negative-weak: var(--salt-color-red-100);


Name weak - weakest

origami-z · 2024-11-29T11:44:28Z

packages/theme/css/palette/neutral-next.css

  --salt-palette-neutral-weak: var(--salt-color-gray-400);
  --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a);
+  --salt-palette-neutral-weak-readonly: var(--salt-color-gray-400-10a);


Net new in Figma, code only has --salt-palette-neutral-weaker-readonly, neither used by characteristics?

origami-z · 2024-11-29T11:44:54Z

packages/theme/css/palette/positive-next.css

 .salt-theme.salt-theme-next[data-mode="light"] {
  --salt-palette-positive: var(--salt-color-green-500);
-  --salt-palette-positive-strong: var(--salt-color-green-600);
-  --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
-  --salt-palette-positive-weak: var(--salt-color-green-100);


weak -> weakest

origami-z · 2024-11-29T11:45:07Z

packages/theme/css/palette/warning-next.css

  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
  --salt-palette-warning-strong: var(--salt-color-orange-600);
  --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
-  --salt-palette-warning-weak: var(--salt-color-orange-100);


weak -> weakest

origami-z · 2024-11-29T11:52:41Z

packages/theme/css/foundations/alpha-next.css

+  --salt-color-gray-500-10a: rgba(114, 119, 125, 0.1);
+  --salt-color-gray-500-40a: rgba(114, 119, 125, 0.4);
+  --salt-color-gray-600-10a: rgba(95, 100, 106, 0.1);
+  --salt-color-gray-600-40a: rgba(97, 102, 108, 0.4);


??? Why gray 600 10a/40a not same RGB

origami-z · 2024-11-29T14:41:02Z

tooling/typescript-turbosnap/package.json

@@ -4,6 +4,7 @@
  "main": "./src/index.ts",
  "version": "1.0.0",
  "dependencies": {
+    "slash": "^4.0.0",


Fix typecheck error, different version is resolved without this

origami-z added 15 commits November 25, 2024 15:40

Some basic stuff

8298cb9

Split palette to multiple files

46f839e

Multi modes? not working

b30b23b

kebab case tokens.json

6684f2c

Update with $modes working version for palette.accent.stronger.$modes

769fe79

Add script to combine multiple tokens files into a single $modes file

b721215

Add accent + mode. How to remove accent from uncessary css?

ccf36f5

Add todo

a0cf477

refactor kebab, remove -default suffix

f193634

Refactor transform to standalone file

5142f76

Update readme instructions

486531a

Reduce number of css when blue/teal mode doesn't matter for palette

efc85c0

Fix characteristics palette token

5222d7c

Exclude figma only token in platform filtes filter

f059c70

Add readme

608ae23

vercel bot deployed to Preview November 25, 2024 15:47 View deployment

Refactor files to standalone file

9691e5b

vercel bot deployed to Preview November 25, 2024 16:37 View deployment

Fix build after refactor

b313f5e

vercel bot deployed to Preview November 25, 2024 17:26 View deployment

Adds characteristics files

b047854

vercel bot deployed to Preview November 25, 2024 17:51 View deployment

origami-z added 2 commits November 26, 2024 09:46

Move palette tokens into src folder

fbe14eb

Fix script

3fe6718

vercel bot deployed to Preview November 26, 2024 09:54 View deployment

origami-z added 2 commits November 26, 2024 16:35

Add curve-next tokens

b1924d0

Biome fix

31b0eec

vercel bot deployed to Preview November 26, 2024 16:57 View deployment

origami-z commented Nov 29, 2024

View reviewed changes

vercel bot deployed to Preview November 29, 2024 10:39 View deployment

origami-z added 3 commits November 29, 2024 10:44

Reorder color.tokens, add background prefix to some colors

63ff787

add alph.background prefix to some colors

7d1b115

Add foundation color/alpha next to prod css

808c9c9

origami-z commented Nov 29, 2024

View reviewed changes

vercel bot deployed to Preview November 29, 2024 10:59 View deployment

Add slash to tooling/ts package.json

ed06aea

origami-z commented Nov 29, 2024

View reviewed changes

vercel bot deployed to Preview November 29, 2024 11:16 View deployment

Use out of box css/variables format

3670ac1

vercel bot deployed to Preview November 29, 2024 11:27 View deployment

origami-z added 3 commits November 29, 2024 11:33

Add formatting to cssMultiModes

d28b2c6

Add remaining header formatting

00f9dd2

Adds more palette next css

72340fc

origami-z commented Nov 29, 2024

View reviewed changes

Rename script name

6c9845e

origami-z commented Nov 29, 2024

View reviewed changes

vercel bot deployed to Preview November 29, 2024 12:24 View deployment

origami-z added 2 commits November 29, 2024 14:33

Fix salt-ds/value/px

711b569

Update file header comment

0e8752e

origami-z commented Nov 29, 2024

View reviewed changes

vercel bot deployed to Preview November 29, 2024 14:43 View deployment

origami-z mentioned this pull request Nov 29, 2024

JSON representation for theme #4041

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] JSON theme #4443

[WIP] JSON theme #4443

origami-z commented Nov 25, 2024 •

edited

Loading

changeset-bot bot commented Nov 25, 2024 •

edited

Loading

vercel bot commented Nov 25, 2024 •

edited

Loading

origami-z Nov 29, 2024 •

edited

Loading

origami-z Nov 29, 2024

origami-z Nov 29, 2024 •

edited

Loading

origami-z Nov 29, 2024

origami-z Nov 29, 2024

origami-z Nov 29, 2024 •

edited

Loading

origami-z Nov 29, 2024

origami-z Nov 29, 2024

origami-z Nov 29, 2024

origami-z Nov 29, 2024

origami-z Nov 29, 2024

origami-z Nov 29, 2024

		--salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
		--salt-palette-accent-none: var(--salt-color-blue-500-0a);

[WIP] JSON theme #4443

Are you sure you want to change the base?

[WIP] JSON theme #4443

Conversation

origami-z commented Nov 25, 2024 • edited Loading

Tokens

changeset-bot bot commented Nov 25, 2024 • edited Loading

⚠️ No Changeset found

vercel bot commented Nov 25, 2024 • edited Loading

origami-z Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

origami-z Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

origami-z Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

origami-z commented Nov 25, 2024 •

edited

Loading

changeset-bot bot commented Nov 25, 2024 •

edited

Loading

vercel bot commented Nov 25, 2024 •

edited

Loading

origami-z Nov 29, 2024 •

edited

Loading

origami-z Nov 29, 2024 •

edited

Loading

origami-z Nov 29, 2024 •

edited

Loading