feat: refactor all tokens to use style-dictionary

BREAKING CHANGE: importing tokens has a new syntax now, no more mixins, made better for treeshaking.
divriots · Dec 15, 2021 · 4ba1c7c · 4ba1c7c
1 parent 0758590
commit 4ba1c7c
Show file tree

Hide file tree

Showing 77 changed files with 2,049 additions and 868 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,10 @@ Click the "Edit" button to also see the source code in the Backlight editor.
 
 > In case you don't use Backlight.dev but use straight from NPM, refer to our [usage from NPM guide](./UsingNPM.md).
 
+## Migration
+
+Migrating to a new minor (since this is alpha), see [Migration Docs](./migration.md).
+
 ## Usage
 
 ### Duplicate in Backlight

diff --git a/borders/index.js b/borders/index.js
diff --git a/borders/src/index.js b/borders/src/index.js
diff --git a/borders/src/radius.css.js b/borders/src/radius.css.js
diff --git a/button/doc/index.md b/button/doc/index.md
@@ -3,8 +3,16 @@
 Button web component.
 
 ```js script
-import { html } from '~/core'
-import '../simba-button.js';
+import { html } from '~/core';
+import '@divriots/starter-simba/button/simba-button.js';
+```
+
+## Usage
+
+Import the custom element definition file.
+
+```js
+import '@divriots/starter-simba/button/simba-button.js';
 ```
 
 ```js preview-story
@@ -20,19 +28,22 @@ Text buttons don't have outlines and are the least priority buttons.
 ### Secondary
 
 ```js preview-story
-export const secondaryButton = () => html`<simba-button variation="secondary">Submit</simba-button>`;
+export const secondaryButton = () =>
+  html`<simba-button variation="secondary">Submit</simba-button>`;
 ```
 
 ### Outline
 
 ```js preview-story
-export const outlineButton = () => html`<simba-button variation="outline">Submit</simba-button>`;
+export const outlineButton = () =>
+  html`<simba-button variation="outline">Submit</simba-button>`;
 ```
 
 ### Text
 
 ```js preview-story
-export const textButton = () => html`<simba-button variation="text">Submit</simba-button>`;
+export const textButton = () =>
+  html`<simba-button variation="text">Submit</simba-button>`;
 ```
 
 ## Sizes
@@ -42,23 +53,27 @@ Apart from the default size, there is also a small and large variation.
 ### Small
 
 ```js preview-story
-export const smallButton = () => html`<simba-button size="small">Submit</simba-button>`;
+export const smallButton = () =>
+  html`<simba-button size="small">Submit</simba-button>`;
 ```
 
 ### Large
 
 ```js preview-story
-export const largeButton = () => html`<simba-button size="large">Submit</simba-button>`;
+export const largeButton = () =>
+  html`<simba-button size="large">Submit</simba-button>`;
 ```
 
 ## Rounded
 
 ```js preview-story
-export const roundedButton = () => html`<simba-button rounded>Submit</simba-button>`;
+export const roundedButton = () =>
+  html`<simba-button rounded>Submit</simba-button>`;
 ```
 
 ```js preview-story
-export const circularButton = () => html`<simba-button rounded>+</simba-button>`;
+export const circularButton = () =>
+  html`<simba-button rounded>+</simba-button>`;
 ```
 
 ## Prefix & Suffix slots
@@ -68,8 +83,15 @@ The simba-button supports having a prefix or a suffix, through content projectio
 ```js preview-story
 export const prefixButton = () => html`
   <simba-button>
-    <svg slot="prefix" style="width: 18px; fill: white;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-      <path d="M561.938 158.06L417.94 14.092C387.926-15.922 336 5.097 336 48.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 199.2 96 232.6 96 271.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.651 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V336c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88zM384 336V232.16C255.309 234.082 166.492 255.35 206.31 376 176.79 357.55 144 324.08 144 271.94c0-109.334 129.14-118.947 240-119.85V48l144 144-144 144zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.369-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.541z"/>
+    <svg
+      slot="prefix"
+      style="width: 18px; fill: white;"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+    >
+      <path
+        d="M561.938 158.06L417.94 14.092C387.926-15.922 336 5.097 336 48.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 199.2 96 232.6 96 271.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.651 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V336c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88zM384 336V232.16C255.309 234.082 166.492 255.35 206.31 376 176.79 357.55 144 324.08 144 271.94c0-109.334 129.14-118.947 240-119.85V48l144 144-144 144zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.369-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.541z"
+      />
     </svg>
     Submit
   </simba-button>
@@ -80,8 +102,15 @@ export const prefixButton = () => html`
 export const suffixButton = () => html`
   <simba-button>
     Submit
-    <svg slot="suffix" style="width: 18px; fill: white;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-      <path d="M561.938 158.06L417.94 14.092C387.926-15.922 336 5.097 336 48.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 199.2 96 232.6 96 271.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.651 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V336c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88zM384 336V232.16C255.309 234.082 166.492 255.35 206.31 376 176.79 357.55 144 324.08 144 271.94c0-109.334 129.14-118.947 240-119.85V48l144 144-144 144zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.369-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.541z"/>
+    <svg
+      slot="suffix"
+      style="width: 18px; fill: white;"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+    >
+      <path
+        d="M561.938 158.06L417.94 14.092C387.926-15.922 336 5.097 336 48.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 199.2 96 232.6 96 271.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.651 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V336c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88zM384 336V232.16C255.309 234.082 166.492 255.35 206.31 376 176.79 357.55 144 324.08 144 271.94c0-109.334 129.14-118.947 240-119.85V48l144 144-144 144zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.369-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.541z"
+      />
     </svg>
   </simba-button>
 `;
@@ -90,7 +119,7 @@ export const suffixButton = () => html`
 ## Disabled
 
 ```js preview-story
-export const disabledButton = () =>html`
+export const disabledButton = () => html`
   <simba-button disabled>Submit</simba-button>
   <simba-button variation="secondary" disabled>Submit</simba-button>
   <simba-button variation="outline" disabled>Submit</simba-button>

diff --git a/button/src/styles.css.js b/button/src/styles.css.js
@@ -1,18 +1,37 @@
 import { css } from '~/core';
-import { borderRadiusMixin } from '~/borders';
-import { coolGray } from '~/colors';
-import { typographyMixin } from '~/typography';
-import { spacing } from '~/spacing';
+import { base, full } from '~/radii';
+import {
+  coolGray50,
+  coolGray100,
+  coolGray200,
+  coolGray300,
+  coolGray600,
+  coolGray700,
+} from '~/colors';
+import {
+  familySans,
+  sizeBaseSize,
+  sizeBaseLineHeight,
+  weightMedium,
+  sizeSmSize,
+  sizeSmLineHeight,
+  sizeXlSize,
+  sizeXlLineHeight,
+} from '~/typography';
+import { s1_5, s2_5, s3, s4, s5 } from '~/spacing';
 
 export default css`
   :host {
     display: inline-block;
     cursor: pointer;
     background-color: var(--simba-color-primary-500);
-    color: ${coolGray[50]};
-    ${borderRadiusMixin()}
-    ${typographyMixin('sans', 'base', 'medium')}
-    padding: ${spacing['2.5']} ${spacing['4']};
+    color: ${coolGray50};
+    border-radius: ${base};
+    font-family: ${familySans};
+    font-size: ${sizeBaseSize};
+    line-height: ${sizeBaseLineHeight};
+    font-weight: ${weightMedium};
+    padding: ${s2_5} ${s4};
     transition: var(--theme-background-transition),
       var(--theme-color-transition);
   }
@@ -46,7 +65,7 @@ export default css`
 
   :host([variation='outline']),
   :host([variation='text']) {
-    box-shadow: 0 0 1px 1px ${coolGray[300]};
+    box-shadow: 0 0 1px 1px ${coolGray300};
     color: var(--simba-text-color);
   }
 
@@ -64,32 +83,34 @@ export default css`
 
   :host([variation='outline']:hover),
   :host([variation='text']:hover) {
-    background-color: ${coolGray[100]};
+    background-color: ${coolGray100};
   }
 
   :host([variation='outline']:active),
   :host([variation='text']:active) {
-    background-color: ${coolGray[200]};
+    background-color: ${coolGray200};
   }
 
   :host([variation='outline']:focus),
   :host([variation='text']:focus) {
-    box-shadow: 0 0 1px 1px ${coolGray[300]},
+    box-shadow: 0 0 1px 1px ${coolGray300},
       0 0 0 3px var(--simba-focus-ring-color);
   }
 
   :host([size='small']) {
-    ${typographyMixin('sans', 'sm', 'medium')}
-    padding: ${spacing['1.5']} ${spacing['3']};
+    font-size: ${sizeSmSize};
+    line-height: ${sizeSmLineHeight};
+    padding: ${s1_5} ${s3};
   }
 
   :host([size='large']) {
-    ${typographyMixin('sans', 'xl', 'medium')}
-    padding: ${spacing['3']} ${spacing['5']};
+    font-size: ${sizeXlSize};
+    line-height: ${sizeXlLineHeight};
+    padding: ${s3} ${s5};
   }
 
   :host([rounded]) {
-    ${borderRadiusMixin('full')}
+    border-radius: ${full};
   }
 
   :host([disabled]) {
@@ -112,16 +133,16 @@ export default css`
 
   :host([theme='dark'][variation='text']),
   :host([theme='dark'][variation='outline']) {
-    color: ${coolGray[50]};
+    color: ${coolGray50};
   }
 
   :host([theme='dark'][variation='text']:hover),
   :host([theme='dark'][variation='outline']:hover) {
-    background-color: ${coolGray[700]};
+    background-color: ${coolGray700};
   }
 
   :host([theme='dark'][variation='text']:active),
   :host([theme='dark'][variation='outline']:active) {
-    background-color: ${coolGray[600]};
+    background-color: ${coolGray600};
   }
 `;
diff --git a/checkbox-group/doc/index.md b/checkbox-group/doc/index.md
@@ -6,13 +6,29 @@ Checkbox group Webcomponent.
 import { html } from '~/core';
 import { localize } from '~/localize';
 import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
+<<<<<<< HEAD
 import '../simba-checkbox.js';
 import '../simba-checkbox-indeterminate.js';
 import '../simba-checkbox-group.js';
+=======
+import '@divriots/starter-simba/checkbox-group/simba-checkbox.js';
+import '@divriots/starter-simba/checkbox-group/simba-checkbox-indeterminate.js';
+import '@divriots/starter-simba/checkbox-group/simba-checkbox-group.js';
+>>>>>>> restructure tokens, improve documentation
 
 loadDefaultFeedbackMessages();
 ```
 
+## Usage
+
+Import the custom element definition file.
+
+```js
+import '@divriots/starter-simba/checkbox-group/simba-checkbox.js';
+import '@divriots/starter-simba/checkbox-group/simba-checkbox-indeterminate.js';
+import '@divriots/starter-simba/checkbox-group/simba-checkbox-group.js';
+```
+
 ```js preview-story
 export const input = () => html`
   <simba-checkbox-group

diff --git a/checkbox-group/src/indeterminate-styles.css.js b/checkbox-group/src/indeterminate-styles.css.js
@@ -1,5 +1,5 @@
 import { css } from '~/core';
-import { spacing } from '~/spacing';
+import { s3_5 } from '~/spacing';
 
 export default css`
   :host {
@@ -28,6 +28,6 @@ export default css`
   }
 
   ::slotted([slot='checkbox']) {
-    padding-left: ${spacing['3.5']};
+    padding-left: ${s3_5};
   }
 `;
diff --git a/checkbox-group/src/styles.css.js b/checkbox-group/src/styles.css.js
@@ -1,24 +1,23 @@
 import { css } from '~/core';
-import { borderRadiusMixin } from '~/borders';
-import { coolGray } from '~/colors';
+import { none, base } from '~/radii';
+import { coolGray50 } from '~/colors';
 
 export default css`
   ::slotted(.form-control) {
-    ${borderRadiusMixin()};
+    border-radius: ${base};
   }
 
   ::slotted(.form-control:checked) {
     --rotation: 43deg;
   }
 
   ::slotted(.form-control):after {
-    ${borderRadiusMixin('none')};
+    border-radius: ${none};
     background: transparent;
     width: 4px;
     height: 8px;
-    border: 2px solid ${coolGray[50]};
-    border-top: 0;
-    border-left: 0;
+    border-bottom: 2px solid ${coolGray50};
+    border-right: 2px solid ${coolGray50};
     left: 4px;
     top: 1px;
     transform: rotate(var(--rotation, 20deg));