feat: #65 add style dictionary (#120)

* feat: #65 add style dictionary custom parse methods

* feat: #65 adds scripting for design tokens

* feat: #65 updates tokens

* feat: #65 adds a couple of comments

* feat: #65 update tokens to latest

* feat: #65 fixes a variable name

* fix: #65 adds a bit of whitespace to trigger snyk run

* feat: #65 adds changelog

* feat: #65 pr updates

package.json

@@ -31,6 +31,7 @@
     "build": "yarn build:dist && yarn build:storybook",
     "build:storybook": "cross-env NODE_ENV=production && storybook build -o public/dist",
     "build:dist": "cross-env NODE_ENV=production && rimraf public/dist && rimraf dist && rollup -c",
+    "build:sd": "node ./tokens/build.mjs && eslint --cache --ext=ts tokens --fix",
     "commit": "yarn test --coverage --no-cache --silent --forceExit --detectOpenHandles --runInBand --watch=false && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges && yarn lint --fix && yarn check",
     "lint": "eslint --cache --ext=ts,tsx,js src",
     "check": "tsc --noEmit --skipLibCheck",
@@ -129,6 +130,7 @@
     "rollup-plugin-css-only": "^4.5.2",
     "snyk": "^1.1288.0",
     "storybook": "^8.0.7",
+    "style-dictionary": "^3.9.2",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",

src/components/accordion/__styles__/index.ts

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react'
 import { elIsActive } from '../../../styles/states'
 
 export const ElAccordionContainer = styled.div`
-  background-color: var(--color-white);
+  background-color: var(--white);
   height: auto;
   display: flex;
   flex-direction: column;
@@ -26,14 +26,14 @@ export const ElAccordionItem = styled.a`
   justify-content: space-between;
   align-items: center;
   padding: 0.875rem 0;
-  border-bottom: 1px solid var(--color-grey-100);
+  border-bottom: 1px solid var(--neutral-100);
 
   &:has(+ .${elIsActive}) {
     border-bottom: none;
   }
 `
 export const ElAccordionTitle = styled.div`
-  color: var(--color-black);
+  color: var(--black);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-medium);
 `
@@ -50,7 +50,7 @@ export const ElAccordionTitleContent = styled.div`
 
   svg {
     font-size: 1rem;
-    color: var(--color-grey-300);
+    color: var(--neutral-300);
   }
 
   &:last-child {
@@ -66,6 +66,6 @@ export const ElAccordionContent = styled.div`
   &.${elIsActive} {
     height: auto;
     padding: 1.5rem 0;
-    border-bottom: 1px solid var(--color-grey-100);
+    border-bottom: 1px solid var(--neutral-100);
   }
 `

src/components/avatar/__styles__/index.ts

@@ -9,7 +9,7 @@ export const ElAvatar = styled.div`
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-grey-100);
+  background-color: var(--neutral-100);
   border-radius: 50%;
   overflow: hidden;
   width: 2.5rem;

src/components/badge/__styles__/index.ts

@@ -29,17 +29,17 @@ export const ElBadge = styled.span`
   }
 
   &.${elIntentSuccess} {
-    color: var(--color-green-600);
+    color: var(--green-600);
     background: var(--intent-success-lightest);
   }
 
   &.${elIntentPending} {
-    color: var(--color-yellow-600);
+    color: var(--yellow-600);
     background: var(--intent-pending-lightest);
   }
 
   &.${elIntentWarning} {
-    color: var(--color-orange-600);
+    color: var(--orange-600);
     background: var(--intent-warning-lightest);
   }
 

src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -40,7 +40,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -79,7 +79,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -118,7 +118,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -162,7 +162,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -189,7 +189,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -228,7 +228,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {
@@ -267,7 +267,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
   min-width: 0;
 
   &., {
-    background: var(--color-grey-50);
+    background: var(--neutral-050);
   }
 
   &., {

src/components/button/__styles__/index.ts

@@ -28,10 +28,10 @@ export const ElButtonLoader = styled.div`
   color: transparent !important;
   pointer-events: none;
   animation: spinAround 500ms infinite linear;
-  border: 2px solid var(--color-grey-400);
+  border: 2px solid var(--neutral-400);
   margin-right: 0.5rem;
   border-radius: 290486px;
-  border-color: transparent transparent var(--color-grey-400) var(--color-grey-400);
+  border-color: transparent transparent var(--neutral-400) var(--neutral-400);
   display: none;
   height: 0.75rem;
   width: 0.75rem;
@@ -53,45 +53,45 @@ export const ElButton = styled.button`
   white-space: nowrap;
   cursor: pointer;
   border-radius: var(--default-border-radius);
-  border: 1px solid var(--color-grey-100);
+  border: 1px solid var(--neutral-100);
   font-size: var(--font-size-small);
   font-family: var(--font-sans-serif);
   font-weight: var(--font-weight-medium);
-  color: var(--color-grey-400);
+  color: var(--neutral-400);
   background-color: unset;
-  background-image: linear-gradient(to right, var(--color-white), var(--color-white));
+  background-image: linear-gradient(to right, var(--white), var(--white));
   outline-color: var(--intent-primary);
   background-repeat: no-repeat;
   height: 2.25rem;
 
   &:hover {
-    border: 1px solid var(--color-grey-400);
-    color: var(--color-grey-700);
+    border: 1px solid var(--neutral-400);
+    color: var(--neutral-700);
   }
 
   &.${elIntentPrimary} {
     background-image: linear-gradient(to right, var(--intent-primary), var(--intent-primary));
-    color: var(--color-white);
+    color: var(--white);
     outline-color: var(--intent-primary-dark);
     border: 1px solid var(--intent-primary);
 
     &:hover {
       background-image: linear-gradient(to right, var(--intent-primary-dark), var(--intent-primary-dark));
       border: 1px solid var(--intent-primary-dark);
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 
   &.${elIntentDanger} {
     background-image: linear-gradient(to right, var(--intent-danger), var(--intent-danger));
-    color: var(--color-white);
+    color: var(--white);
     outline-color: var(--intent-danger-dark);
     border: 1px solid var(--intent-danger);
 
     &:hover {
       background-image: linear-gradient(to right, var(--intent-danger-dark), var(--intent-danger-dark));
       border: 1px solid var(--intent-danger-dark);
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 
@@ -132,7 +132,7 @@ export const ElButton = styled.button`
 
   &.${elIntentDanger}, &.${elIntentPrimary} {
     ${ElIcon} {
-      color: var(--color-white);
+      color: var(--white);
     }
   }
 
@@ -147,9 +147,9 @@ export const ElButton = styled.button`
     .${elIntentPrimary},
     &.${elIsLoading}
     .${elIntentDefault} {
-    border: 1px solid var(--color-grey-100);
-    color: var(--color-grey-400);
-    background-image: linear-gradient(to right, var(--color-grey-100), var(--color-grey-100));
+    border: 1px solid var(--neutral-100);
+    color: var(--neutral-400);
+    background-image: linear-gradient(to right, var(--neutral-100), var(--neutral-100));
     cursor: disabled;
   }
 
@@ -182,16 +182,16 @@ export const ElButton = styled.button`
     }
 
     ${ElIcon} {
-      color: var(--color-grey-400);
+      color: var(--neutral-400);
 
       &:hover {
-        color: var(--color-grey-700);
+        color: var(--neutral-700);
       }
     }
 
     &.${elIntentDanger}, &.${elIntentPrimary} {
       ${ElIcon} {
-        color: var(--color-white);
+        color: var(--white);
       }
     }
 

src/components/card/__styles__/index.ts

@@ -4,14 +4,14 @@ import { isTablet } from '../../../styles/media'
 import { ElAvatar } from '../../avatar'
 
 export const elCardFocussed = css`
-  background-color: var(--color-purple-50);
+  background-color: var(--purple-050);
 `
 
 export const ElCardWrap = styled.div`
   padding: 1rem;
   border-radius: 0.25rem;
   box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.03);
-  background: var(--color-white);
+  background: var(--white);
   position: relative;
 
   ${isTablet} {
@@ -20,7 +20,7 @@ export const ElCardWrap = styled.div`
   }
 
   &.${elCardFocussed} {
-    background-color: var(--color-purple-50);
+    background-color: var(--purple-050);
   }
 `
 
@@ -64,7 +64,7 @@ export const ElCardHeading = styled.h5`
 `
 
 export const ElCardSubHeading = styled.h6`
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -74,7 +74,7 @@ export const ElCardSubHeading = styled.h6`
 export const elCardSubHeadingAdditionalExpanded = css``
 
 export const ElCardSubHeadingAdditional = styled.h6`
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   font-size: var(--font-size-smallest);
   font-weight: var(--font-weight-medium);
   text-overflow: ellipsis;
@@ -88,7 +88,7 @@ export const elCardBodyWrapExpanded = css``
 
 export const ElCardBodyWrap = styled.div`
   width: 100%;
-  color: var(--color-black);
+  color: var(--black);
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -117,7 +117,7 @@ export const ElCardAvatarWrap = styled.div`
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-grey-100);
+  background-color: var(--neutral-100);
   margin-right: 0.5rem;
   border-radius: 50%;
   width: 2.5rem;
@@ -164,7 +164,7 @@ export const ElCardListHeading = styled.h5`
 
 export const ElCardListSubHeading = styled.h6`
   font-size: var(--font-size-smallest);
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -200,7 +200,7 @@ export const ElCardListItemTextWrap = styled.div`
 `
 
 export const ElCardListItemTextPrimary = styled.div`
-  color: var(--color-black);
+  color: var(--black);
 `
 
 export const ElCardListItemTextSecondary = styled.div`

src/components/chip/__styles__/index.ts

@@ -13,9 +13,9 @@ export const ElChipCheckbox = styled.input`
 
   &:checked + label,
   &:hover + label {
-    background: var(--color-purple-50);
+    background: var(--purple-050);
     padding: 0.2rem 2rem 0.2rem 1rem;
-    color: var(--color-black);
+    color: var(--black);
 
     &::before {
       content: '';
@@ -35,8 +35,8 @@ export const ElChipLabel = styled.label`
   cursor: pointer;
   width: auto;
   height: 28px;
-  background: var(--color-purple-50);
-  border: 1px solid var(--color-purple-50);
+  background: var(--purple-050);
+  border: 1px solid var(--purple-050);
   border-radius: 1rem;
   padding: 0.2rem 1.5rem;
   position: relative;
@@ -45,10 +45,10 @@ export const ElChipLabel = styled.label`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-grey-500);
+  color: var(--neutral-500);
 
   &:hover {
-    color: var(--color-grey-700);
+    color: var(--neutral-700);
   }
 `