feat: add sbb prefixed variable files and convert prefixed css vari…

…ables to rem (#428)
sbb-design-systems · Jun 20, 2022 · a83810f · a83810f
1 parent bfef7e2
commit a83810f
Show file tree

Hide file tree

Showing 12 changed files with 341 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = () =>
+  <Partial<DesignToken>>{
+    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
@@ -1,58 +1,81 @@
-export const breakpoint = {
+import { DesignToken, DesignTokens } from 'style-dictionary';
+
+const attributes = () =>
+  <Partial<DesignToken>>{
+    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
@@ -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
@@ -1,10 +1,14 @@
-const attributes = (group: string) => ({
-  attributes: {
-    group,
-  },
-});
+import { DesignToken, DesignTokens } from 'style-dictionary';
+
+const attributes = (group: string) =>
+  <Partial<DesignToken>>{
+    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
@@ -1,10 +1,14 @@
-const attributes = (group: string) => ({
-  attributes: {
-    group,
-  },
-});
+import { DesignToken, DesignTokens } from 'style-dictionary';
+
+const attributes = (group: string) =>
+  <Partial<DesignToken>>{
+    attributes: {
+      category: 'size',
+      group,
+    },
+  };
 
-export const layout = {
+export const layout: DesignTokens = {
   base: {
     grid: {
       columns: {