From a83810f7adc53bd8a108185eeaff9c7e9472c8d4 Mon Sep 17 00:00:00 2001 From: Lukas Spirig Date: Mon, 20 Jun 2022 16:13:02 +0200 Subject: [PATCH] feat: add `sbb` prefixed variable files and convert prefixed css variables to rem (#428) --- README.md | 34 +++++++---- config.ts | 122 +++++++++++++++++++++++++++++++++++++ designTokens/animation.ts | 4 +- designTokens/border.ts | 17 +++++- designTokens/breakpoint.ts | 25 +++++++- designTokens/color.ts | 4 +- designTokens/focus.ts | 16 +++-- designTokens/layout.ts | 16 +++-- designTokens/shadow.ts | 32 +++++----- designTokens/size.ts | 16 +++-- designTokens/spacing.ts | 82 ++++++++++++++++++++++++- designTokens/typo.ts | 23 ++++++- 12 files changed, 341 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 0e294cdc..e27d382a 100644 --- a/README.md +++ b/README.md @@ -16,22 +16,32 @@ npm install --save-dev lyne-design-tokens ``` lyne-design-tokens/ -├── designTokens/ # Token source files -└── dist/ # These files get built through the build task and get published via npm — are part of the npm package +├── designTokens/ # Token source files +└── dist/ # These files get built through the build task and get published via npm — are part of the npm package ├── css/ - │ ├── variables--host.css # CSS variables with :host selector - │ └── variables--root.css # CSS variables with :root selector + │ ├── sbb-variables--host.css # `sbb-` prefixed CSS variables with :host selector (converted to `rem`) + │ ├── sbb-variables--root.css # `sbb-` prefixed CSS variables with :root selector (converted to `rem`) + │ ├── variables--host.css # CSS variables with :host selector + │ └── variables--root.css # CSS variables with :root selector ├── js/ - │ ├── tokens-raw.json # Nested .json file - │ ├── tokens.mjs # Flat esm file - │ ├── tokens.cjs # Flat commonjs file - │ ├── tokens.d.ts # Flat type declaration - │ └── tokens.json # Flat .json file + │ ├── sbb-tokens-raw.json # `sbb-` prefixed nested .json file + │ ├── sbb-tokens.mjs # `Sbb` prefixed flat esm file + │ ├── sbb-tokens.cjs # `Sbb` prefixed flat commonjs file + │ ├── sbb-tokens.d.ts # `Sbb` prefixed flat type declaration + │ ├── sbb-tokens.json # `sbb-` prefixed flat .json file + │ ├── tokens-raw.json # Nested .json file + │ ├── tokens.mjs # Flat esm file + │ ├── tokens.cjs # Flat commonjs file + │ ├── tokens.d.ts # Flat type declaration + │ └── tokens.json # Flat .json file ├── less/ - │ └── variables.less # Less variables + │ ├── sbb-variables.less # `sbb-` prefixed Less variables (converted to `rem`) + │ └── variables.less # Less variables └── scss/ - ├── variables_css--placeholder.scss # CSS variables with Sass placeholder selector (%) - └── variables.scss # Sass variables + ├── sbb-variables_css--placeholder.scss # `sbb-` prefixed CSS variables with Sass placeholder selector (%) (converted to `rem`) + ├── sbb-variables.scss # `sbb-` prefixed Sass variables (converted to `rem`) + ├── variables_css--placeholder.scss # CSS variables with Sass placeholder selector (%) + └── variables.scss # Sass variables ``` ## Usage diff --git a/config.ts b/config.ts index 3d98523e..503a382a 100644 --- a/config.ts +++ b/config.ts @@ -23,6 +23,35 @@ export const config: Config = { transformGroup: 'css', transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css'], }, + cssPrefix: { + buildPath: 'dist/css/', + prefix: 'sbb', + files: [ + { + destination: 'sbb-variables--root.css', + format: 'css/variables', + options: { + selector: ':root', + }, + }, + { + destination: 'sbb-variables--host.css', + format: 'css/variables', + options: { + selector: ':host', + }, + }, + ], + transformGroup: 'css', + transforms: [ + 'attribute/cti', + 'name/cti/kebab', + 'time/seconds', + 'content/icon', + 'color/css', + 'size/pxToRem', + ], + }, js: { buildPath: 'dist/js/', files: [ @@ -46,6 +75,30 @@ export const config: Config = { transformGroup: 'js', transforms: ['attribute/cti', 'name/cti/pascal', 'color/css'], }, + jsPrefix: { + buildPath: 'dist/js/', + prefix: 'sbb', + files: [ + { + destination: 'sbb-tokens.mjs', + format: 'javascript/es6', + }, + { + destination: 'sbb-tokens.cjs', + format: 'custom/format/javascript/module', + }, + { + destination: 'sbb-tokens.d.ts', + format: 'typescript/es6-declarations', + }, + { + destination: 'sbb-tokens.json', + format: 'json/flat', + }, + ], + transformGroup: 'js', + transforms: ['attribute/cti', 'name/cti/pascal', 'color/css'], + }, jsonFlat: { buildPath: 'dist/js/', files: [ @@ -57,6 +110,18 @@ export const config: Config = { transformGroup: 'js', transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'], }, + jsonFlatPrefix: { + buildPath: 'dist/js/', + prefix: 'sbb', + files: [ + { + destination: 'sbb-tokens.json', + format: 'json/flat', + }, + ], + transformGroup: 'js', + transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'], + }, jsonRaw: { buildPath: 'dist/js/', files: [ @@ -68,6 +133,18 @@ export const config: Config = { transformGroup: 'js', transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'], }, + jsonRawPrefix: { + buildPath: 'dist/js/', + prefix: 'sbb', + files: [ + { + destination: 'sbb-tokens-raw.json', + format: 'json/extended', + }, + ], + transformGroup: 'js', + transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'], + }, less: { buildPath: 'dist/less/', files: [ @@ -79,6 +156,25 @@ export const config: Config = { transformGroup: 'less', transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css'], }, + lessPrefix: { + buildPath: 'dist/less/', + prefix: 'sbb', + files: [ + { + destination: 'sbb-variables.less', + format: 'less/variables', + }, + ], + transformGroup: 'less', + transforms: [ + 'attribute/cti', + 'name/cti/kebab', + 'time/seconds', + 'content/icon', + 'color/css', + 'size/pxToRem', + ], + }, scss: { buildPath: 'dist/scss/', files: [ @@ -97,6 +193,32 @@ export const config: Config = { transformGroup: 'scss', transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css'], }, + scssPrefix: { + buildPath: 'dist/scss/', + prefix: 'sbb', + files: [ + { + destination: 'sbb-variables.scss', + format: 'custom/format/scss', + }, + { + destination: 'sbb-variables_css--placeholder.scss', + format: 'css/variables', + options: { + selector: '%lyne-design-tokens-css-variables', + }, + }, + ], + transformGroup: 'scss', + transforms: [ + 'attribute/cti', + 'name/cti/kebab', + 'time/seconds', + 'content/icon', + 'color/css', + 'size/pxToRem', + ], + }, }, source: ['designTokens'], }; diff --git a/designTokens/animation.ts b/designTokens/animation.ts index 0833c510..032382b9 100644 --- a/designTokens/animation.ts +++ b/designTokens/animation.ts @@ -1,7 +1,9 @@ +import { DesignTokens } from 'style-dictionary'; + const baseDuration = 40; const duration = (value: number) => `${value * baseDuration}ms`; -export const animation = { +export const animation: DesignTokens = { duration: { '-1x': { value: duration(1), diff --git a/designTokens/border.ts b/designTokens/border.ts index 65dc2233..bed9ec77 100644 --- a/designTokens/border.ts +++ b/designTokens/border.ts @@ -1,30 +1,45 @@ +import { DesignToken, DesignTokens } from 'style-dictionary'; + const baseBorderWidth = 1; const baseBorderRadius = 2; const borderWidth = (width: number) => width * baseBorderWidth; const borderRadius = (width: number) => width * baseBorderRadius; -export const border = { +const attributes = () => + >{ + attributes: { + category: 'size', + }, + }; + +export const border: DesignTokens = { width: { '1x': { value: borderWidth(1), + ...attributes(), }, '2x': { value: borderWidth(2), + ...attributes(), }, }, radius: { '1x': { value: borderRadius(1), + ...attributes(), }, '4x': { value: borderRadius(4), + ...attributes(), }, '8x': { value: borderRadius(8), + ...attributes(), }, '16x': { value: borderRadius(16), + ...attributes(), }, }, }; diff --git a/designTokens/breakpoint.ts b/designTokens/breakpoint.ts index 61ae4850..19cfa359 100644 --- a/designTokens/breakpoint.ts +++ b/designTokens/breakpoint.ts @@ -1,58 +1,81 @@ -export const breakpoint = { +import { DesignToken, DesignTokens } from 'style-dictionary'; + +const attributes = () => + >{ + attributes: { + category: 'size', + }, + }; + +export const breakpoint: DesignTokens = { zero: { min: { value: 0, + ...attributes(), }, max: { value: 359, + ...attributes(), }, }, micro: { min: { value: 360, + ...attributes(), }, max: { value: 599, + ...attributes(), }, }, small: { min: { value: 600, + ...attributes(), }, max: { value: 839, + ...attributes(), }, }, medium: { min: { value: 840, + ...attributes(), }, max: { value: 1023, + ...attributes(), }, }, large: { min: { value: 1024, + ...attributes(), }, max: { value: 1279, + ...attributes(), }, }, wide: { min: { value: 1280, + ...attributes(), }, max: { value: 1439, + ...attributes(), }, }, ultra: { min: { value: 1440, + ...attributes(), }, max: { value: 2579, + ...attributes(), }, }, }; diff --git a/designTokens/color.ts b/designTokens/color.ts index 97543776..e666c198 100644 --- a/designTokens/color.ts +++ b/designTokens/color.ts @@ -1,4 +1,6 @@ -export const color = { +import { DesignTokens } from 'style-dictionary'; + +export const color: DesignTokens = { black: { default: { value: 'rgba(0,0,0,1)', diff --git a/designTokens/focus.ts b/designTokens/focus.ts index b6ea458d..a504617f 100644 --- a/designTokens/focus.ts +++ b/designTokens/focus.ts @@ -1,10 +1,14 @@ -const attributes = (group: string) => ({ - attributes: { - group, - }, -}); +import { DesignToken, DesignTokens } from 'style-dictionary'; + +const attributes = (group: string) => + >{ + attributes: { + category: 'size', + group, + }, + }; -export const focus = { +export const focus: DesignTokens = { outline: { offset: { value: 3, diff --git a/designTokens/layout.ts b/designTokens/layout.ts index d2553931..ea672181 100644 --- a/designTokens/layout.ts +++ b/designTokens/layout.ts @@ -1,10 +1,14 @@ -const attributes = (group: string) => ({ - attributes: { - group, - }, -}); +import { DesignToken, DesignTokens } from 'style-dictionary'; + +const attributes = (group: string) => + >{ + attributes: { + category: 'size', + group, + }, + }; -export const layout = { +export const layout: DesignTokens = { base: { grid: { columns: { diff --git a/designTokens/shadow.ts b/designTokens/shadow.ts index 5b77d847..88583b80 100644 --- a/designTokens/shadow.ts +++ b/designTokens/shadow.ts @@ -1,8 +1,12 @@ -const attributes = (shadowLevel: number) => ({ - attributes: { - group: shadowLevel, - }, -}); +import { DesignToken, DesignTokens } from 'style-dictionary'; + +const attributes = (shadowLevel: number, category?: string) => + >{ + attributes: { + category, + group: shadowLevel, + }, + }; const shadowObject = ( shadowLevel: number, @@ -24,40 +28,40 @@ const shadowObject = ( offset: { x: { value: x1, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, y: { value: y1, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, }, blur: { value: blur1, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, spread: { value: spread1, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, }, 2: { offset: { x: { value: x2, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, y: { value: y2, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, }, blur: { value: blur2, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, spread: { value: spread2, - ...attributes(shadowLevel), + ...attributes(shadowLevel, 'size'), }, }, }, @@ -91,7 +95,7 @@ const shadowObject = ( }, }); -export const shadow = { +export const shadow: DesignTokens = { elevation: { level: { 3: { diff --git a/designTokens/size.ts b/designTokens/size.ts index b7ee8818..b886306a 100644 --- a/designTokens/size.ts +++ b/designTokens/size.ts @@ -1,10 +1,14 @@ -const attributes = (group: string) => ({ - attributes: { - group, - }, -}); +import { DesignToken, DesignTokens } from 'style-dictionary'; + +const attributes = (group: string) => + >{ + attributes: { + category: 'size', + group, + }, + }; -export const size = { +export const size: DesignTokens = { form: { element: { m: { diff --git a/designTokens/spacing.ts b/designTokens/spacing.ts index 29c03959..ebd3431b 100644 --- a/designTokens/spacing.ts +++ b/designTokens/spacing.ts @@ -1,237 +1,317 @@ +import { DesignToken, DesignTokens } from 'style-dictionary'; + const baseSpacing = 4; const calculatedSpacing = (value: number) => value * baseSpacing; -export const spacing = { +const attributes = () => + >{ + attributes: { + category: 'size', + }, + }; + +export const spacing: DesignTokens = { fixed: { '-1x': { value: calculatedSpacing(1), + ...attributes(), }, '-2x': { value: calculatedSpacing(2), + ...attributes(), }, '-3x': { value: calculatedSpacing(3), + ...attributes(), }, '-4x': { value: calculatedSpacing(4), + ...attributes(), }, '-5x': { value: calculatedSpacing(5), + ...attributes(), }, '-6x': { value: calculatedSpacing(6), + ...attributes(), }, '-8x': { value: calculatedSpacing(8), + ...attributes(), }, '-10x': { value: calculatedSpacing(10), + ...attributes(), }, '-12x': { value: calculatedSpacing(12), + ...attributes(), }, '-14x': { value: calculatedSpacing(14), + ...attributes(), }, '-16x': { value: calculatedSpacing(16), + ...attributes(), }, '-18x': { value: calculatedSpacing(18), + ...attributes(), }, '-20x': { value: calculatedSpacing(20), + ...attributes(), }, '-24x': { value: calculatedSpacing(24), + ...attributes(), }, '-30x': { value: calculatedSpacing(30), + ...attributes(), }, }, responsive: { xxxs: { zero: { value: calculatedSpacing(3), + ...attributes(), }, micro: { value: calculatedSpacing(3), + ...attributes(), }, small: { value: calculatedSpacing(3), + ...attributes(), }, medium: { value: calculatedSpacing(4), + ...attributes(), }, large: { value: calculatedSpacing(4), + ...attributes(), }, wide: { value: calculatedSpacing(4), + ...attributes(), }, ultra: { value: calculatedSpacing(4), + ...attributes(), }, }, xxs: { zero: { value: calculatedSpacing(4), + ...attributes(), }, micro: { value: calculatedSpacing(4), + ...attributes(), }, small: { value: calculatedSpacing(4), + ...attributes(), }, medium: { value: calculatedSpacing(6), + ...attributes(), }, large: { value: calculatedSpacing(6), + ...attributes(), }, wide: { value: calculatedSpacing(6), + ...attributes(), }, ultra: { value: calculatedSpacing(6), + ...attributes(), }, }, xs: { zero: { value: calculatedSpacing(5), + ...attributes(), }, micro: { value: calculatedSpacing(5), + ...attributes(), }, small: { value: calculatedSpacing(5), + ...attributes(), }, medium: { value: calculatedSpacing(6), + ...attributes(), }, large: { value: calculatedSpacing(6), + ...attributes(), }, wide: { value: calculatedSpacing(6), + ...attributes(), }, ultra: { value: calculatedSpacing(6), + ...attributes(), }, }, s: { zero: { value: calculatedSpacing(6), + ...attributes(), }, micro: { value: calculatedSpacing(6), + ...attributes(), }, small: { value: calculatedSpacing(6), + ...attributes(), }, medium: { value: calculatedSpacing(8), + ...attributes(), }, large: { value: calculatedSpacing(8), + ...attributes(), }, wide: { value: calculatedSpacing(8), + ...attributes(), }, ultra: { value: calculatedSpacing(8), + ...attributes(), }, }, m: { zero: { value: calculatedSpacing(8), + ...attributes(), }, micro: { value: calculatedSpacing(8), + ...attributes(), }, small: { value: calculatedSpacing(8), + ...attributes(), }, medium: { value: calculatedSpacing(10), + ...attributes(), }, large: { value: calculatedSpacing(10), + ...attributes(), }, wide: { value: calculatedSpacing(12), + ...attributes(), }, ultra: { value: calculatedSpacing(12), + ...attributes(), }, }, l: { zero: { value: calculatedSpacing(8), + ...attributes(), }, micro: { value: calculatedSpacing(8), + ...attributes(), }, small: { value: calculatedSpacing(10), + ...attributes(), }, medium: { value: calculatedSpacing(12), + ...attributes(), }, large: { value: calculatedSpacing(14), + ...attributes(), }, wide: { value: calculatedSpacing(14), + ...attributes(), }, ultra: { value: calculatedSpacing(16), + ...attributes(), }, }, xl: { zero: { value: calculatedSpacing(8), + ...attributes(), }, micro: { value: calculatedSpacing(8), + ...attributes(), }, small: { value: calculatedSpacing(12), + ...attributes(), }, medium: { value: calculatedSpacing(16), + ...attributes(), }, large: { value: calculatedSpacing(20), + ...attributes(), }, wide: { value: calculatedSpacing(20), + ...attributes(), }, ultra: { value: calculatedSpacing(24), + ...attributes(), }, }, xxl: { zero: { value: calculatedSpacing(12), + ...attributes(), }, micro: { value: calculatedSpacing(12), + ...attributes(), }, small: { value: calculatedSpacing(18), + ...attributes(), }, medium: { value: calculatedSpacing(20), + ...attributes(), }, large: { value: calculatedSpacing(24), + ...attributes(), }, wide: { value: calculatedSpacing(24), + ...attributes(), }, ultra: { value: calculatedSpacing(30), + ...attributes(), }, }, }, diff --git a/designTokens/typo.ts b/designTokens/typo.ts index 80573a43..ffe1c116 100644 --- a/designTokens/typo.ts +++ b/designTokens/typo.ts @@ -1,7 +1,16 @@ +import { DesignToken, DesignTokens } from 'style-dictionary'; + const baseTypoSpacing = 16; const typoSpacing = (value: number) => value * baseTypoSpacing; -export const typo = { +const attributes = () => + >{ + attributes: { + category: 'size', + }, + }; + +export const typo: DesignTokens = { fontFamilyFallback: { value: '"Helvetica Neue", Helvetica, Arial, sans-serif', }, @@ -40,39 +49,51 @@ export const typo = { scale: { '0-75x': { value: typoSpacing(0.75), + ...attributes(), }, '0-8125x': { value: typoSpacing(0.8125), + ...attributes(), }, '0-875x': { value: typoSpacing(0.875), + ...attributes(), }, default: { value: typoSpacing(1), + ...attributes(), }, '1-125x': { value: typoSpacing(1.125), + ...attributes(), }, '1-25x': { value: typoSpacing(1.25), + ...attributes(), }, '1-5x': { value: typoSpacing(1.5), + ...attributes(), }, '2x': { value: typoSpacing(2), + ...attributes(), }, '2-5x': { value: typoSpacing(2.5), + ...attributes(), }, '3x': { value: typoSpacing(3), + ...attributes(), }, '3-5x': { value: typoSpacing(3.5), + ...attributes(), }, '4x': { value: typoSpacing(4), + ...attributes(), }, }, };