From bc3dc8322decbe70f6a79b270887b55ad43e9c5c Mon Sep 17 00:00:00 2001 From: josefie Date: Tue, 12 Jul 2022 12:43:36 +0200 Subject: [PATCH] [#182321458] update tokens (#12) * pivotal-182321458 update tokens and remove token type * adjust sd directory structure * pivotal-182321458 add missing theme keys * pivotal-182321458 - allow for multiple token files, - remove at and me token sets for now, - simplify themeprovider only passing theme key as context * move tokens again (to make github sync simpler) * update readme --- .eslintignore | 2 +- .../config.js} | 8 +- config/{sd => style-dictionary}/parsers.js | 2 +- .../transformGroups.js | 2 - config/{sd => style-dictionary}/transforms.js | 13 - config/themes.json | 2 +- config/tokens.json | 494 +++++++++++++++++- generator/index.ts | 2 +- package.json | 2 +- src/helpers/theme_provider.tsx | 22 +- src/lib/shared/themes.ts | 8 - 11 files changed, 502 insertions(+), 55 deletions(-) rename config/{sd.config.js => style-dictionary/config.js} (89%) rename config/{sd => style-dictionary}/parsers.js (94%) rename config/{sd => style-dictionary}/transformGroups.js (91%) rename config/{sd => style-dictionary}/transforms.js (86%) diff --git a/.eslintignore b/.eslintignore index 5d21585f..65a4cf7c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -11,6 +11,6 @@ app/javascript/shared/i18n.ts config/**/*.js vite.config.ts node_modules -sd.config.js +style-dictionary/config.js storybook-static dist diff --git a/config/sd.config.js b/config/style-dictionary/config.js similarity index 89% rename from config/sd.config.js rename to config/style-dictionary/config.js index 1a0b25fb..12f63af5 100644 --- a/config/sd.config.js +++ b/config/style-dictionary/config.js @@ -1,7 +1,7 @@ -const themes = require('./themes.json') -require('./sd/transforms.js') -require('./sd/transformGroups.js') -require('./sd/parsers.js') +const themes = require('../themes.json') +require('./transforms.js') +require('./transformGroups.js') +require('./parsers.js') const getFileConfig = (platform, format) => { const themeFiles = themes.map((theme) => ({ diff --git a/config/sd/parsers.js b/config/style-dictionary/parsers.js similarity index 94% rename from config/sd/parsers.js rename to config/style-dictionary/parsers.js index c62878e5..a45957a7 100644 --- a/config/sd/parsers.js +++ b/config/style-dictionary/parsers.js @@ -12,7 +12,7 @@ StyleDictionary.registerParser({ // strip away the global key for global token set but keep the themes nested // this is necessary, because the references from Figma Tokens do not include the token set key // e.g. {Primary.Green 800} would not work - let transformedTokens = tokens['global'] + let transformedTokens = tokens['global'] || {} Object.keys(tokens).forEach((set) => { // only add the token set if it is defined as a valid theme diff --git a/config/sd/transformGroups.js b/config/style-dictionary/transformGroups.js similarity index 91% rename from config/sd/transformGroups.js rename to config/style-dictionary/transformGroups.js index 8d017021..c53b5dcf 100644 --- a/config/sd/transformGroups.js +++ b/config/style-dictionary/transformGroups.js @@ -5,7 +5,6 @@ StyleDictionary.registerTransformGroup({ transforms: [ ...StyleDictionary.transformGroup['web'], 'name/theme', - 'name/tokenType', 'size/pxToRem', 'value/quote', 'value/boxShadow', @@ -18,7 +17,6 @@ StyleDictionary.registerTransformGroup({ ...StyleDictionary.transformGroup['js'], 'name/cti/kebab', 'name/theme', - 'name/tokenType', 'size/pxToRem', 'value/boxShadow', ], diff --git a/config/sd/transforms.js b/config/style-dictionary/transforms.js similarity index 86% rename from config/sd/transforms.js rename to config/style-dictionary/transforms.js index 72ffc3c4..39cae038 100644 --- a/config/sd/transforms.js +++ b/config/style-dictionary/transforms.js @@ -50,19 +50,6 @@ StyleDictionary.registerTransform({ }, }) -// add token type to name -StyleDictionary.registerTransform({ - name: 'name/tokenType', - type: 'name', - matcher: function (token) { - return token.type - }, - transformer: function (token) { - const prefix = token.name.split('-')[0] - return token.name.replace(prefix, `${prefix}-${token.type}`) - }, -}) - // TODO: output typography styles as mixin StyleDictionary.registerTransform({ name: 'value/typography', diff --git a/config/themes.json b/config/themes.json index b306adf4..2cc87db0 100644 --- a/config/themes.json +++ b/config/themes.json @@ -1 +1 @@ -["at", "me", "org"] +["org"] diff --git a/config/tokens.json b/config/tokens.json index d0699eff..9ec798e8 100644 --- a/config/tokens.json +++ b/config/tokens.json @@ -1,4 +1,492 @@ { - "global": {}, - "$themes": [] -} \ No newline at end of file + "global": { + "spacing": { + "scale": { + "value": "2", + "type": "spacing" + }, + "2xs": { + "value": "4", + "type": "spacing" + }, + "xs": { + "value": "{spacing.2xs} * {spacing.scale}", + "type": "spacing" + }, + "sm": { + "value": "12", + "type": "spacing" + }, + "md": { + "value": "{spacing.xs} * {spacing.scale}", + "type": "spacing" + }, + "lg": { + "value": "24", + "type": "spacing" + }, + "xl": { + "value": "{spacing.md} * {spacing.scale}", + "type": "spacing" + }, + "2xl": { + "value": "{spacing.xl} * {spacing.scale}", + "type": "spacing" + } + }, + "sizing": { + "scale": { + "value": "1.5", + "type": "sizing" + }, + "xs": { + "value": "4", + "type": "sizing" + }, + "sm": { + "value": "{sizing.xs} * {sizing.scale}", + "type": "sizing" + }, + "md": { + "value": "{sizing.sm} * {sizing.scale}", + "type": "sizing" + }, + "lg": { + "value": "{sizing.md} * {sizing.scale}", + "type": "sizing" + }, + "xl": { + "value": "{sizing.lg} * {sizing.scale}", + "type": "sizing" + } + }, + "borderRadius": { + "2xs": { + "value": "4", + "type": "borderRadius" + }, + "xs": { + "value": "8", + "type": "borderRadius" + }, + "md": { + "value": "16", + "type": "borderRadius" + } + }, + "borderWidth": { + "none": { + "value": "0", + "type": "borderWidth" + }, + "xs": { + "value": "1", + "type": "borderWidth" + }, + "sm": { + "value": "2", + "type": "borderWidth" + }, + "md": { + "value": "4", + "type": "borderWidth" + }, + "lg": { + "value": "8", + "type": "borderWidth" + } + }, + "opacity": { + "low": { + "value": "10%", + "type": "opacity" + }, + "md": { + "value": "50%", + "type": "opacity" + }, + "high": { + "value": "90%", + "type": "opacity" + } + }, + "fontFamilies": { + "heading": { + "value": "Inter", + "type": "fontFamilies" + }, + "body": { + "value": "Roboto", + "type": "fontFamilies" + } + }, + "lineHeights": { + "heading": { + "value": "110%", + "type": "lineHeights" + }, + "body": { + "value": "140%", + "type": "lineHeights" + } + }, + "letterSpacing": { + "default": { + "value": "0", + "type": "letterSpacing" + }, + "increased": { + "value": "150%", + "type": "letterSpacing" + }, + "decreased": { + "value": "-5%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "h1": { + "value": "32", + "type": "paragraphSpacing" + }, + "h2": { + "value": "26", + "type": "paragraphSpacing" + } + }, + "fontWeights": { + "headingRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "headingBold": { + "value": "Bold", + "type": "fontWeights" + }, + "bodyRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "bodyBold": { + "value": "Bold", + "type": "fontWeights" + } + }, + "fontSizes": { + "h1": { + "value": "{fontSizes.h2} * 1.25", + "type": "fontSizes" + }, + "h2": { + "value": "{fontSizes.h3} * 1.25", + "type": "fontSizes" + }, + "h3": { + "value": "{fontSizes.h4} * 1.25", + "type": "fontSizes" + }, + "h4": { + "value": "{fontSizes.h5} * 1.25", + "type": "fontSizes" + }, + "h5": { + "value": "{fontSizes.h6} * 1.25", + "type": "fontSizes" + }, + "h6": { + "value": "{fontSizes.body} * 1", + "type": "fontSizes" + }, + "body": { + "value": "16", + "type": "fontSizes" + }, + "sm": { + "value": "{fontSizes.body} * 0.85", + "type": "fontSizes" + }, + "xs": { + "value": "{fontSizes.body} * 0.65", + "type": "fontSizes" + } + }, + "typography": { + "H1": { + "Bold": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingBold}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.h1}", + "paragraphSpacing": "{paragraphSpacing.h1}", + "letterSpacing": "{letterSpacing.decreased}" + } + }, + "Regular": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.h1}", + "paragraphSpacing": "{paragraphSpacing.h1}", + "letterSpacing": "{letterSpacing.decreased}" + } + } + }, + "H2": { + "Bold": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingBold}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.h2}", + "paragraphSpacing": "{paragraphSpacing.h2}", + "letterSpacing": "{letterSpacing.decreased}" + } + }, + "Regular": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.h2}", + "paragraphSpacing": "{paragraphSpacing.h2}", + "letterSpacing": "{letterSpacing.decreased}" + } + } + }, + "Body": { + "type": "typography", + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.body}", + "paragraphSpacing": "{paragraphSpacing.h2}" + } + } + }, + "Color": { + "Gray 100": { + "value": "#f8f8f8", + "type": "color", + "description": "the lightest gray" + }, + "Gray 200": { + "value": "#eeeeee", + "type": "color", + "description": "lighter gray" + }, + "Gray 300": { + "value": "#cccccc", + "type": "color", + "description": "lightish gray" + }, + "Gray 500": { + "value": "#919191", + "type": "color", + "description": "mid gray" + }, + "Gray 700": { + "value": "#636363", + "type": "color", + "description": "darker gray" + }, + "Gray 900": { + "value": "#292929", + "type": "color", + "description": "very dark gray" + }, + "Green 100": { + "value": "#f5fccc", + "type": "color", + "description": "very light green" + }, + "Green 500": { + "value": "#9ecb0a", + "type": "color", + "description": "mid green" + }, + "Green 600": { + "value": "#85ac1c", + "type": "color", + "description": "bit darker green" + }, + "Green 800": { + "value": "#357c00", + "type": "color", + "description": "very dark green" + }, + "Purple 600": { + "value": "#6d2c64", + "type": "color", + "description": "dark purple" + }, + "Teal 500": { + "value": "#60b2a4", + "type": "color", + "description": "light teal" + }, + "Teal 700": { + "value": "#2b8475", + "type": "color", + "description": "dark teal" + }, + "Teal 800": { + "value": "#1e6761", + "type": "color", + "description": "darkest teal" + }, + "Yellow 100": { + "value": "#fff4d2", + "type": "color", + "description": "lightest yellow" + }, + "Yellow 400": { + "value": "#f6ce46", + "type": "color", + "description": "mid yelllow" + }, + "Red 200": { + "value": "#ffc4c4", + "type": "color", + "description": "lightest red" + }, + "Red 700": { + "value": "#d32b43", + "type": "color", + "description": "darker red" + }, + "White": { + "value": "#ffffff", + "type": "color", + "description": "white shade" + }, + "Black": { + "value": "#000000", + "type": "color", + "description": "black shade" + } + } + }, + "org": { + "Color": { + "bg-light": { + "value": "{Color.Gray 100}", + "type": "color", + "description": "Planned color / as section UI Color" + }, + "bg": { + "value": "{Color.Gray 200}", + "type": "color", + "description": "Backround main" + }, + "border": { + "value": "{Color.Gray 300}", + "type": "color", + "description": "planned as border color" + }, + "text-mute": { + "value": "{Color.Gray 500}", + "type": "color", + "description": "text disabled" + }, + "text-light": { + "value": "{Color.Gray 700}", + "type": "color", + "description": "text color secondary" + }, + "text": { + "value": "{Color.Gray 900}", + "type": "color", + "description": "planned text color" + }, + "bg-success": { + "value": "{Color.Green 100}", + "type": "color", + "description": "bg color success" + }, + "button": { + "value": "{Color.Green 500}", + "type": "color", + "description": "color for the primary buttons" + }, + "brand": { + "value": "{Color.Green 500}", + "type": "color", + "description": "offcial brand color token" + }, + "button-dark": { + "value": "{Color.Green 600}", + "type": "color", + "description": "primary button hover" + }, + "link": { + "value": "{Color.Green 800}", + "type": "color", + "description": "Linkcolor text" + }, + "accent": { + "value": "{Color.Purple 600}", + "type": "color", + "description": "accent color" + }, + "forms-bg": { + "value": "{Color.Teal 500}", + "type": "color", + "description": "bg color behind every form. note: there is a surface white in between" + }, + "progressbar": { + "value": "{Color.Teal 700}", + "type": "color", + "description": "Fill and Stroke of Donation Progressbar" + }, + "warning-bg": { + "value": "{Color.Yellow 100}", + "type": "color", + "description": "bg color warning" + }, + "bg-yellow": { + "value": "{Color.Yellow 400}", + "type": "color", + "description": "bg color yellow" + }, + "error-bg": { + "value": "{Color.Red 200}", + "type": "color", + "description": "bg color warning" + }, + "text-error": { + "value": "{Color.Red 700}", + "type": "color", + "description": "text color error" + }, + "surface": { + "value": "{Color.White}", + "type": "color", + "description": "Surface is always white" + }, + "text-black": { + "value": "{Color.Black}", + "type": "color", + "description": "Current text color" + } + }, + "manage--Color": { + "navi": { + "value": "{Color.Teal 700}", + "type": "color", + "description": "bg color navigation mng area for users on org" + }, + "navi-dark": { + "value": "{Color.Teal 800}", + "type": "color", + "description": "bg nav mng , hover active menu pnt" + } + } + } +} diff --git a/generator/index.ts b/generator/index.ts index 16c7c8b8..d75b7e25 100644 --- a/generator/index.ts +++ b/generator/index.ts @@ -4,7 +4,7 @@ import { camelize, kebabCase, objToArr, snakeify } from '../figma/lib/helpers' import Fuse from 'fuse.js' import { prettierTransform } from './transforms' // until we simplify the dir structure we have to do it like this -// import SDConfig from '../config/sd.config' +// import SDConfig from '../config/style-dictionary/config' const SDConfig = { platforms: { css: { diff --git a/package.json b/package.json index 6bc2b630..9004559b 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "component::add::main": "ts-node --project ./tsconfig.tsnode.json node_modules/.bin/yo ./generator --figma --test --story --root src/lib", "component::add::local": "ts-node --project ./tsconfig.tsnode.json node_modules/.bin/yo ./generator --root", "build-storybook": "export BASE_URL='/betterplace-design-system/'; build-storybook", - "build-tokens": "style-dictionary build --config config/sd.config.js", + "build-tokens": "style-dictionary build --config config/style-dictionary/config.js", "lint": "tsc -p tsconfig.base.json && eslint . && stylelint src/**/*.css", "prepare": "husky install" }, diff --git a/src/helpers/theme_provider.tsx b/src/helpers/theme_provider.tsx index 1ced7d51..af5ed149 100644 --- a/src/helpers/theme_provider.tsx +++ b/src/helpers/theme_provider.tsx @@ -1,7 +1,6 @@ import { ReactFramework, StoryContext } from '@storybook/react' import React, { ReactNode, useState } from 'react' import '../../build/css/globals.css' -import tokens from '../../config/tokens.json' import AVAILABLE_THEMES from '../lib/shared/themes' const ThemeKeys = AVAILABLE_THEMES.map((theme) => theme.key) type Theme = typeof ThemeKeys[number] @@ -11,34 +10,17 @@ type ThemeProviderProps = { children: ReactNode } -type Tokens = typeof tokens -export type ThemeProviderContext = { - theme?: Theme - tokens?: { - global: Tokens['global'] - theme: Tokens[Exclude] - } -} - -export const ThemeContext = React.createContext({}) +export const ThemeContext = React.createContext('org') export const ThemeProvider = (props: ThemeProviderProps) => { const [themeVars, setThemeVars] = useState('') - const theme: ThemeProviderContext = { - theme: props.theme, - tokens: { - global: tokens.global, - theme: tokens[props.theme], - }, - } - import(`../../build/css/themes/${props.theme}.css`).then((styles) => { setThemeVars(styles.default) }) return ( - + {props.children} diff --git a/src/lib/shared/themes.ts b/src/lib/shared/themes.ts index 6ef255e8..09a72ee9 100644 --- a/src/lib/shared/themes.ts +++ b/src/lib/shared/themes.ts @@ -3,12 +3,4 @@ export default [ key: 'org', title: 'betterplace.org', }, - { - key: 'at', - title: 'betterplace.at', - }, - { - key: 'me', - title: 'betterplace.me', - }, ] as const