feat(design-tokens): Nieuw build script / Tokens voor NLdoc en Logius…

… Blauw (#114)

- Nieuwe build scripts voor Tokens naar CSS (en meer)
- Bouwt correcte LUX-tokens-structuur-combinaties
- Updated Tokens en -structuur
- Logius Blauw toegevoegd

---------

Co-authored-by: Remy Parzinski <rs.parzinski@gmail.com>
Co-authored-by: Jaap-Hein Wester <j.h.wester@setonix.nl>
Co-authored-by: Jaap-Hein Wester <MrSkippy@users.noreply.github.com>
Co-authored-by: Remy Parzinski <remypar5@users.noreply.github.com>

.gitignore

@@ -60,3 +60,7 @@ package-lock.json
 
 # Ignore generated files from Stencil
 components.d.ts
+
+# Do not ignore our build scripts 
+# (This leaves other build/ folders ignored, see line #9)
+!/proprietary/design-tokens/build

.prettierignore

@@ -23,3 +23,6 @@ components/components.d.ts
 packages/web-components-stencil/loader
 packages/web-components-react/src/react-component-lib/
 packages/web-components-react/src/components.ts
+
+# Ignore imported files
+imported/

packages/storybook/config/preview.tsx

@@ -19,8 +19,8 @@ const preview: Preview = {
         'Logius dark': 'lux-theme--logius-dark',
         'Mijn Overheid light': 'lux-theme--mijnoverheid-light',
         'Mijn Overheid dark': 'lux-theme--mijnoverheid-dark',
-        'NLdoc light': 'lux-theme--nldoc-default-light',
-        'NLdoc dark': 'lux-theme--nldoc-default-dark',
+        'NLdoc light': 'lux-theme--nldoc-light',
+        'NLdoc dark': 'lux-theme--nldoc-dark',
       },
       defaultTheme: 'Logius light',
     }),

packages/storybook/src/styles/theme.css

@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   border: solid 1px #a7a7a7;
+  background-color: var(--lux-color-background-default);
   padding: 0 !important;
   list-style: none;
 }

packages/storybook/src/web-components/button-login/button-login-themes.mdx

@@ -15,18 +15,8 @@ import * as ButtonLoginStories from "./button-login.stories";
 
 ## NLdoc Light Theme
 
-<Canvas
-  of={ButtonLoginStories.LightTheme}
-  withToolbar={false}
-  className="lux-theme--nldoc-default-light"
-  sourceState="none"
-/>
+<Canvas of={ButtonLoginStories.LightTheme} withToolbar={false} className="lux-theme--nldoc-light" sourceState="none" />
 
 ## NLdoc Dark Theme
 
-<Canvas
-  of={ButtonLoginStories.DarkTheme}
-  withToolbar={false}
-  className="lux-theme--nl-doc-default-dark"
-  sourceState="none"
-/>
+<Canvas of={ButtonLoginStories.DarkTheme} withToolbar={false} className="lux-theme--nldoc-dark" sourceState="none" />

packages/storybook/src/web-components/button-login/button-login.mdx

@@ -98,15 +98,15 @@ Schaal het icoon mee met de hoogte van de button. Houd de button minimaal 48px h
     <span>Default</span>
   </li>
   <li>
-    <lux-button-login className="force-state--hover" agent="digid"></lux-button-login>
+    <lux-button-login class="force-state--hover" agent="digid"></lux-button-login>
     <span>Hover</span>
   </li>
   <li>
-    <lux-button-login className="force-state--active" agent="digid"></lux-button-login>
+    <lux-button-login class="force-state--active" agent="digid"></lux-button-login>
     <span>Active</span>
   </li>
   <li>
-    <lux-button-login className="force-state--focus" agent="digid"></lux-button-login>
+    <lux-button-login class="force-state--focus" agent="digid"></lux-button-login>
     <span>Focus</span>
   </li>
 </ul>

packages/web-components-stencil/src/components/button-login/button-login.scss

@@ -11,9 +11,9 @@
 
 .lux-button-login {
   display: flex;
+  column-gap: var(--lux-button-login-column-gap);
   justify-content: flex-start;
   align-items: center;
-  gap: var(--lux-button-login-margin-inline);
   appearance: button;
   margin-inline: 0;
   margin-block: 0;
@@ -49,7 +49,7 @@
 
 :host(.force-state--focus) .lux-button-login,
 .lux-button-login:focus-visible {
-  outline-color: var(--lux-focus-outline-color);
+  outline-color: var(--lux-color-focus-outline);
   outline-style: var(--lux-focus-outline-style);
   outline-width: var(--lux-focus-outline-width);
   outline-offset: var(--lux-focus-outline-offset);