search

openedx / paragon

💎 An accessible, theme-ready design system built for learning applications and Open edX.
https://paragon-openedx.netlify.app
Apache License 2.0
121 stars 67 forks source link

[DRAFT] [DOCS] Migrating custom brand packages to design tokens #3148

Open brian-smith-tcril opened 4 months ago

brian-smith-tcril commented 4 months ago

Color system

White

https://github.com/openedx/paragon/blob/4a00bb19f999b850d257b9b68f2a5f428c88f48a/scss/core/_variables.scss#L8

https://github.com/openedx/paragon/blob/0e16dbbff83b7e1ee72b93205b193feb3a99603a/tokens/src/themes/light/global/color.json#L3

Gray

https://github.com/openedx/paragon/blob/4a00bb19f999b850d257b9b68f2a5f428c88f48a/scss/core/_variables.scss#L9-L17

https://github.com/openedx/paragon/blob/4a00bb19f999b850d257b9b68f2a5f428c88f48a/scss/core/_variables.scss#L20-L34

https://github.com/openedx/paragon/blob/0e16dbbff83b7e1ee72b93205b193feb3a99603a/tokens/src/themes/light/global/color.json#L30-L121

Black

https://github.com/openedx/paragon/blob/4a00bb19f999b850d257b9b68f2a5f428c88f48a/scss/core/_variables.scss#L18

https://github.com/openedx/paragon/blob/0e16dbbff83b7e1ee72b93205b193feb3a99603a/tokens/src/themes/light/global/color.json#L4

PKulkoRaccoonGang commented 4 months ago

Some thoughts on the functionality of the migration command

This command should do the following:

  1. Create the necessary directories for token design For example, after paragon brand-migrate, the script creates the following structure automatically image
  2. Based on SCSS variables, create the necessary files and design tokens for them.

paragon/_variables.scss

$tooltip-color-light: $primary !default;

tokens/src/themes/light/components/Tooltip.json

{
  "color": {
    "tooltip": {
      "light": { "value": "{color.primary.base}" }
    }
  }
}