[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)

The main goal of this PR is to extract tokens from Salt (Next) Figma libraries and write some custom Style Dictionary rules to generate CSS and then can be compared with existing /theme/css files.

Once discussions are settled, can merge 1 CSS a time (next theme first), starting from foundations to palette ... characteristics

#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. Example of custom darken format
- Can follow style-dictionary, use setAlpha from tinycolor2
Correct token types for non-colors, they're currently all "number". Refer to DTCG format types, e.g. "$type": "dimension"

Conversation Logs

Figma issue (likely)

gray/600/10a not same rgb as gray/600/40a
Not in Figma --salt-palette-accent-strongest
--salt-palette-background-secondary-disabled referencing charcoal not granite (compared between disabled/default)

Code issue

titanium color wrong fixed in Fix titanium background token name #4463
Not in code --salt-palette-accent-none, is it used in any charactersitics?

Shared discussion

Code doesn't have color 0a variables but has been using transparent in palette layer. e.g. --salt-color-blue-500-0a
Charcoal color not in code (next theme). What's correct for secondary bg (Charcoal vs Granite in code)
A couple of weakest token, --salt-palette-info-weakest (in Figma) vs --salt-palette-info-weak (in code), likely a breaking change needed
--salt-palette-neutral-weak-readonly (in Figma) vs --salt-palette-neutral-weaker-readonly (in code)
Logo brown should be in code or not?

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

⚠️ No Changeset found

Latest commit: 4cc2d7f

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	Dec 6, 2024 2:20pm

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

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

  --salt-palette-accent-strong: var(--salt-color-blue-600);
  --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
  --salt-palette-accent-stronger: var(--salt-color-blue-700);
  --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
-  --salt-palette-accent-strongest: var(--salt-color-blue-800);


This does not exist in Figma

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

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

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

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

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

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

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