Skip to content
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.

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

Refactor tokens file/folder structure to support additional theme variants #2017

Closed
2 tasks done
Tracked by #246
adamstankiewicz opened this issue Feb 13, 2023 · 1 comment · Fixed by #2069
Closed
2 tasks done
Tracked by #246

Refactor tokens file/folder structure to support additional theme variants #2017

adamstankiewicz opened this issue Feb 13, 2023 · 1 comment · Fixed by #2069
Assignees
Labels

Comments

@adamstankiewicz
Copy link
Member

adamstankiewicz commented Feb 13, 2023

Description

The current structure of the tokens directory contains a top-level src folder containing all the tokens for the design system (e.g., global, alias, component). As described in #2014, these tokens are largely a combination of core tokens and tokens representing the values for the default "light" theme variant.

To be forward thinking to support a future dark mode (i.e., an additional theme variant), let's extract the core tokens out from the theme-specific tokens. I might recommend a folder/file structure similar to:

tokens/src/core/
tokens/src/themes/light/
tokens/src/themes/dark/ # in the future

By accomplishing this issue, consuming applications should be able to load the core Paragon styles independently from any theme-variant CSS variables. For example:

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<link rel="stylesheet" href="/core.css" />

Acceptance Criteria

  • Ensure the global, alias, and component tokens defined in ./tokens/src/core/ are not specific to a particular theme variant (i.e., light or dark).
  • Ensure the global, alias, and component tokens defined in ./tokens/src/themes/light/ are only related to style properties relevant to a light theme variant (most likely color tokens).
@adamstankiewicz adamstankiewicz added this to the Design tokens with style-dictionary milestone Feb 13, 2023
@adamstankiewicz adamstankiewicz moved this from 📋 Backlog to 🔖 To Do in Paragon Working Group Feb 13, 2023
@PKulkoRaccoonGang PKulkoRaccoonGang moved this from 🔖 To Do to 🏗 In progress in Paragon Working Group Feb 14, 2023
@PKulkoRaccoonGang
Copy link
Contributor

PR: #2069

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Closed
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants