style(tokens): new token sets for core, semantic, and branding #318

ju-Skinner · 2024-11-18T16:27:12Z

Description

Adds semantic tokens to our Design System, leveraging both Token Studio and Style Dictionary

Fixes #(issue)

Type of change

Please delete options that are not relevant.

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Checklist:

If not applicable, leave options unchecked.

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing tests pass locally with my changes
Design has QA'ed and approved this PR

github-actions · 2024-11-18T16:27:29Z

Dependency Review

✅ No vulnerabilities or license issues found.

Scanned Manifest Files

netlify · 2024-11-18T16:27:54Z

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	`f222bf8`
🔍 Latest deploy log	https://app.netlify.com/sites/pine-design-system/deploys/6786d4defda59e000832fd63
😎 Deploy Preview	https://deploy-preview-318--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

they have been moved to the tokens/base folder

…h token names in values

…nsions

this is temporary because we'd like to have this as a separate library

…en/components

* fix: adjust color token values * fix: adjust missed blue values * style(tokens): new colors --------- Co-authored-by: Julian Skinner <ju.skinner@gmail.com>

* style: updates some components with semantic tokens * style(chip): update chip to use component semantic tokens * style(input): create new component specific semantic tokens created input.json for tokenstudio updated both the themes and metadata.json files --------- Co-authored-by: Julian Skinner <ju.skinner@gmail.com>

…lements

…area

pixelflips

I have a few questions, but this is off to an awesome start. If anything is unclear or I am misunderstanding, jut let me know.

pixelflips · 2025-01-14T20:33:35Z

libs/core/src/components/pds-accordion/pds-accordion.scss


-  border-radius: var(--border-radius-default);
+  border-radius: var(--pine-dimension-xs);


Should this be a border-radius token?

See comment below

pixelflips · 2025-01-14T20:39:44Z

libs/core/src/components/pds-checkbox/pds-checkbox.scss

-  height: var(--sizing-input);
+  background-color: var(--pine-color-secondary);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-2xs);


I am confused by the dimension token, is this replacing spacing? Also in some areas, a radius token (e.g. --pine-border-radius-round) is used and in others its dimensions (e.g. --pine-dimension-2xs).

@phillip yes, the dimension token now covers a few areas. See here for more details.

As for ...radius-round and radius-circle those are special cases so we called those out.

pixelflips · 2025-01-14T20:43:15Z

libs/core/src/components/pds-chip/pds-chip.scss

+    padding-block: var(--pine-dimension-2xs);
+    padding-inline: var(--pine-dimension-025);


Are dimensions tshirt sizing or a numeric scale?

T-shirt sizing is only for a small defined set of semantic tokens. Core tokens are still numeric. This particular token has no corresponding semantic token, so we defaulted back to core.

Not a blocker, but maybe we think about having these assigned to a component token, just so it's obvious it's a one-off.

pixelflips · 2025-01-14T20:54:25Z

libs/core/src/global/styles/tokens/base/_core.scss

+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 :root {
  --pine-border-radius-0: 0px;


Is it possible to remove the unit (px) from the 0 values. 0 is usually unitless.

This is a style dictionary thing. We don't have control over that.

pixelflips

Thanks for the clarifications. LGTM!

QuintonJason

Good to go. Great work!

anechol

Since we tackled this together, my approval is biased, but thanks for keeping this PR in line through all our changes.

ju-Skinner added the work in progress (WIP) label Nov 18, 2024

github-actions bot added package: core Changes have been made to the Core package package: doc-componenets labels Nov 18, 2024

ju-Skinner force-pushed the style/new-tokensets branch from f24849f to a38db0b Compare November 19, 2024 19:08

dev-kjbot force-pushed the style/new-tokensets branch from 1adf5af to 72e4465 Compare November 19, 2024 20:16

ju-Skinner force-pushed the style/new-tokensets branch from 6359315 to ad6baaf Compare November 19, 2024 20:49

ju-Skinner force-pushed the style/new-tokensets branch from 8d35d5e to 0a30eb6 Compare December 11, 2024 21:52

dev-kjbot and others added 21 commits January 14, 2025 14:02

style: create new core tokenset

cdaa8e4

style: change font-weight to use numerical values in core tokenset

1cda9af

style: adds half of semantic tokens

624fc1c

style: adds the second half of the semantic tokens

7f40bd5

style: add kajabi products themes and mode (light and dark)

21d1eea

feat: add sd-transformations to generate tokens from token-studio

b782987

style(transform): refactor transform scripts to be more modular

367d60e

style: update themes to include component/avatar

6b677bf

style: remove old core and semantic tokens

bb83584

they have been moved to the tokens/base folder

style: changes for brand semantic and modes

265fedc

style(tokens): working version of token studio to figma variables wit…

1d9aa55

…h token names in values

style(tokens): add color.brand to kajabi semantic tokens

7ba1f72

style(tokens): cleanup semantic tokens and a few core tokens for dime…

657f952

…nsions

style(tokens): newly generated tokens from style dictionary

cb98e75

this is temporary because we'd like to have this as a separate library

style(tokens): restructure semantic brand token names and locations

ec8901f

style(button): update styles to use semantic tokens

f5d5e5d

style(token-studio): update tokens

44dc49d

style(tokens): generate new style sheets from sd-transforms

833cce8

style(avatar): clean up testing of component semantic level tokens

6d37418

style(application): add a the brand semantic style sheet for testing

6723bcb

style(token-studio): remove border-radius default and none

437b661

ju-Skinner and others added 14 commits January 14, 2025 14:11

style(button): change text color to match their variant

fd8cf6e

style(token-studio): change sentiment colors to use *-500

ed846e0

style(token-studio): create semantic tokens for chip

39fb137

style(token-studio): refactor component generator

39015f7

style(tokens-studio): remove avatar semantic tokens

6a6f560

style(tokens): refactor sd-tranforms to read component names from tok…

26b6535

…en/components

style(box): refactor to use new semantic tokens (#319)

dd8f7a3

fix: update incorrect core color token values (#322)

4459c5c

* fix: adjust color token values * fix: adjust missed blue values * style(tokens): new colors --------- Co-authored-by: Julian Skinner <ju.skinner@gmail.com>

style(tokens-studio): update background container disabled token

0137230

style(input): sync styles for readonly and disabled label and input e…

66d6b50

…lements

style(textarea): sync styles for readonly and disabled label and text…

86b2e27

…area

refactor(label): moves label to a style utils

0c5b75f

style(textarea): refactor to use utils/label.scss

066fec9

ju-Skinner force-pushed the style/new-tokensets branch from 710c02a to 066fec9 Compare January 14, 2025 20:15

ju-Skinner changed the title ~~[DNM} style(tokens): new token sets for core, semantic, and branding~~ style(tokens): new token sets for core, semantic, and branding Jan 14, 2025

ju-Skinner marked this pull request as ready for review January 14, 2025 20:16

ju-Skinner requested review from pixelflips, QuintonJason, anechol and monicawheeler January 14, 2025 20:16

ju-Skinner removed the work in progress (WIP) label Jan 14, 2025

ju-Skinner force-pushed the style/new-tokensets branch from 0bc18c6 to 4d16ecb Compare January 14, 2025 20:30

style(fonts): add Greet Condensed font family

5c69f0f

ju-Skinner force-pushed the style/new-tokensets branch from 4d16ecb to 5c69f0f Compare January 14, 2025 20:46

pixelflips reviewed Jan 14, 2025

View reviewed changes

test: fix failling specs for readonly components

f222bf8

pixelflips approved these changes Jan 14, 2025

View reviewed changes

QuintonJason approved these changes Jan 14, 2025

View reviewed changes

anechol approved these changes Jan 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style(tokens): new token sets for core, semantic, and branding #318

style(tokens): new token sets for core, semantic, and branding #318

ju-Skinner commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

netlify bot commented Nov 18, 2024 •

edited

Loading

pixelflips left a comment

pixelflips Jan 14, 2025

ju-Skinner Jan 14, 2025

pixelflips Jan 14, 2025

ju-Skinner Jan 14, 2025 •

edited

Loading

pixelflips Jan 14, 2025

anechol Jan 14, 2025 •

edited

Loading

pixelflips Jan 14, 2025

pixelflips Jan 14, 2025

ju-Skinner Jan 14, 2025

pixelflips left a comment

QuintonJason left a comment

anechol left a comment


		border-radius: var(--border-radius-default);
		border-radius: var(--pine-dimension-xs);

		padding-block: var(--pine-dimension-2xs);
		padding-inline: var(--pine-dimension-025);

style(tokens): new token sets for core, semantic, and branding #318

Are you sure you want to change the base?

style(tokens): new token sets for core, semantic, and branding #318

Conversation

ju-Skinner commented Nov 18, 2024 • edited Loading

Description

Type of change

How Has This Been Tested?

Checklist:

github-actions bot commented Nov 18, 2024 • edited Loading

Dependency Review

Scanned Manifest Files

netlify bot commented Nov 18, 2024 • edited Loading

✅ Deploy Preview for pine-design-system ready!

pixelflips left a comment

Choose a reason for hiding this comment

pixelflips Jan 14, 2025

Choose a reason for hiding this comment

ju-Skinner Jan 14, 2025

Choose a reason for hiding this comment

pixelflips Jan 14, 2025

Choose a reason for hiding this comment

ju-Skinner Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

pixelflips Jan 14, 2025

Choose a reason for hiding this comment

anechol Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

pixelflips Jan 14, 2025

Choose a reason for hiding this comment

pixelflips Jan 14, 2025

Choose a reason for hiding this comment

ju-Skinner Jan 14, 2025

Choose a reason for hiding this comment

pixelflips left a comment

Choose a reason for hiding this comment

QuintonJason left a comment

Choose a reason for hiding this comment

anechol left a comment

Choose a reason for hiding this comment

ju-Skinner commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

netlify bot commented Nov 18, 2024 •

edited

Loading

ju-Skinner Jan 14, 2025 •

edited

Loading

anechol Jan 14, 2025 •

edited

Loading