@conduction/theme 1.0.36 → 1.0.40

package/municipalities/noordwijk-design-tokens/documentation/color.stories.mdx

@@ -0,0 +1,17 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs";
+import tokens from "../dist/tokens.json";
+import { ColorSearch } from "@nl-design-system-unstable/theme-toolkit/src/ColorSearch";
+import { ColorTable } from "@nl-design-system-unstable/theme-toolkit/src/ColorTable";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}/Color`} />
+
+# Color
+
+## Find a color
+
+<ColorSearch tokens={tokens[config.prefix]["color"]}></ColorSearch>
+
+## Color palette
+
+<ColorTable tokens={tokens[config.prefix]["color"]}></ColorTable>

package/municipalities/noordwijk-design-tokens/documentation/components.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { ComponentStories } from "@nl-design-system-unstable/theme-toolkit/src/ComponentStories";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}`} />
+
+# Components
+
+<Story name="Components">
+  <ComponentStories config={config} />
+</Story>

package/municipalities/noordwijk-design-tokens/documentation/design-tokens.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs";
+import { DesignTokensTable } from "@nl-design-system-unstable/theme-toolkit/src/DesignTokensTable";
+import tokens from "../dist/index.json";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}/Design Tokens`} />
+
+# Design Tokens
+
+<DesignTokensTable tokens={tokens.filter((token) => token.path[0] !== config.prefix)}></DesignTokensTable>
+
+## Proprietary Design Tokens
+
+<DesignTokensTable tokens={tokens.filter((token) => token.path[0] === config.prefix)}></DesignTokensTable>

package/municipalities/noordwijk-design-tokens/documentation/readme.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta, Description } from "@storybook/addon-docs";
+import markdown from "../README.md";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}/README`} />
+
+<Description>{markdown}</Description>

package/municipalities/noordwijk-design-tokens/package.json

@@ -3,19 +3,16 @@
   "author": "Community for NL Design System",
   "description": "NL Design System design tokens for Gemeente Noordwijk",
   "website": "https://noordwijk.nl/",
-  "keywords": [
-    "nl-design-system",
-    "conduction"
-  ],
+  "keywords": ["nl-design-system", "conduction"],
   "license": "SEE LICENSE IN LICENSE.md",
-  "name": "@conduction/noordwijk-design-tokens",
+  "name": "@nl-design-system-unstable/noordwijk-design-tokens",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ConductionNL/conduction-theme.git"
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/themes.git"
   },
   "scripts": {
     "clean": "rimraf -rf dist/",
@@ -27,6 +24,8 @@
     "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js"
   },
   "devDependencies": {
+    "@fontsource/roboto": "5.0.8",
+    "@fontsource/roboto-slab": "5.0.11",
     "@nl-design-system-unstable/theme-toolkit": "workspace:*",
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",

package/municipalities/noordwijk-design-tokens/src/brand/noordwijk/color.tokens.json

@@ -7,29 +7,23 @@
       "primary-hover": {
         "value": "{noordwijk.color.blue.15}"
       },
-
       "error": { "value": "#dc3545" },
       "alert-error": { "value": "#721c24" },
       "alert-error-background": { "value": "#f8d7da" },
-
       "warning": { "value": "#ffc107" },
       "alert-warning": { "value": "#856404" },
       "alert-warning-background": { "value": "#fff3cd" },
-
       "succes": { "value": "#28a745" },
       "alert-succes": { "value": "#155724" },
       "alert-succes-background": { "value": "#d4edda" },
-
       "info": { "value": "{noordwijk.color.primary}" },
       "alert-info": { "value": "#004085" },
       "alert-info-background": { "value": "#cce5ff" },
-
       "light-green": {
         "24": {
           "value": "#007c4c"
         }
       },
-
       "grey": {
         "29": {
           "value": "#4a4a4a"
@@ -51,7 +45,6 @@
           "value": "#f7f7f7"
         }
       },
-
       "lightgrey": {
         "96": {
           "value": "#f5f5f5",
@@ -61,8 +54,10 @@
           "value": "#ebebeb"
         }
       },
-
       "light-blue": {
+        "46": {
+          "value": "#417aa9"
+        },
         "51": {
           "value": "#4685be"
         },
@@ -73,7 +68,6 @@
           "value": "#f2f7fa"
         }
       },
-
       "blue": {
         "15": {
           "value": "#16113b"
@@ -83,7 +77,6 @@
           "comment": "Base/Blue"
         }
       },
-
       "white": {
         "98": {
           "value": "#fafafa"
@@ -93,7 +86,6 @@
           "comment": "Base/White"
         }
       },
-
       "black": {
         "0": {
           "value": "#000000",

package/municipalities/noordwijk-design-tokens/src/brand/noordwijk/typography.tokens.json

@@ -3,12 +3,12 @@
     "typography": {
       "roboto": {
         "font-family": {
-          "value": "\"Roboto\",  Arial, sans-serif"
+          "value": "\"Roboto\", Monospace, Arial, sans-serif"
         }
       },
       "roboto-slab": {
         "font-family": {
-          "value": "\"Roboto Slab\", Arial, sans-serif"
+          "value": "\"Roboto Slab\", Monospace, Arial, sans-serif"
         }
       },
       "monospace": {

package/municipalities/noordwijk-design-tokens/src/component/conduction/table-wrapper.tokens.json

@@ -0,0 +1,21 @@
+{
+  "conduction": {
+    "table-wrapper": {
+      "scroll-button": {
+        "background-color": { "value": "{noordwijk.color.white.100}" },
+        "color": { "value": "{noordwijk.color.black.0}" },
+        "padding-inline-start": { "value": "{noordwijk.size.sm}" },
+        "padding-inline-end": { "value": "{noordwijk.size.sm}" },
+        "padding-block-start": {},
+        "padding-block-end": {},
+        "border-width": {},
+        "border-style": {},
+        "border-color": {},
+        "hover": {
+          "background-color": { "value": "{noordwijk.color.white.100}" },
+          "color": { "value": "{noordwijk.color.light-blue.58}" }
+        }
+      }
+    }
+  }
+}

package/municipalities/noordwijk-design-tokens/src/component/conduction/tabs.tokens.json

@@ -65,6 +65,17 @@
           "border-color": {},
           "border-top": {}
         }
+      },
+      "scroll-button": {
+        "background-color": { "value": "{noordwijk.color.light-blue.58}" },
+        "color": { "value": "{noordwijk.color.white.100}" },
+        "border-width": {},
+        "border-style": {},
+        "border-color": {},
+        "hover": {
+          "background-color": { "value": "{noordwijk.color.light-blue.51}" },
+          "color": { "value": "{noordwijk.color.white.100}" }
+        }
       }
     }
   }

package/municipalities/noordwijk-design-tokens/src/component/utrecht/breadcrumb.tokens.json

@@ -0,0 +1,35 @@
+{
+  "utrecht": {
+    "breadcrumb": {
+      "block-size": {},
+      "font-family": { "value": "{noordwijk.typography.roboto-slab.font-family}" },
+      "font-size": { "value": "{noordwijk.font-size.sm}" },
+      "text-transform": {},
+      "item": {
+        "padding-block-start": {},
+        "padding-block-end": {},
+        "padding-inline-end": {},
+        "padding-inline-start": {}
+      },
+      "link": {
+        "background-color": {},
+        "color": { "value": "{noordwijk.color.white.100}" },
+        "focus": {
+          "background-color": {},
+          "color": {}
+        },
+        "current": {
+          "background-color": {},
+          "color": { "value": "{noordwijk.color.white.100}" }
+        }
+      },
+      "separator": {
+        "inline-size": {},
+        "icon": {
+          "color": { "value": "{noordwijk.color.white.100}" },
+          "size": { "value": "{noordwijk.font-size.sm}" }
+        }
+      }
+    }
+  }
+}

package/municipalities/noordwijk-design-tokens/src/component/utrecht/code.tokens.json

@@ -7,7 +7,6 @@
       "font-size": { "value": "inherit" },
       "line-height": {}
     },
-
     "code-block": {
       "background-color": { "value": "{noordwijk.color.lightgrey.92}" },
       "color": { "value": "{noordwijk.color.black.0}" },

package/municipalities/noordwijk-design-tokens/src/component/utrecht/extra-tokens/breadcrumb.tokens.json

@@ -0,0 +1,21 @@
+{
+  "utrecht": {
+    "breadcrumb": {
+      "background-color": { "value": "{noordwijk.color.light-blue.46}" },
+      "padding-inline-start": { "value": "0" },
+      "padding-inline-end": { "value": "0" },
+      "padding-block-start": { "value": "12px" },
+      "padding-block-end": { "value": "12px" },
+      "link": {
+        "disabled": {
+          "background-color": {},
+          "color": { "value": "{noordwijk.color.white.100}" }
+        },
+        "hover": {
+          "background-color": {},
+          "color": { "value": "{noordwijk.color.white.100}" }
+        }
+      }
+    }
+  }
+}

package/municipalities/noordwijk-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json

@@ -2,26 +2,12 @@
   "utrecht": {
     "form-input": {
       "background-color": { "value": "{noordwijk.color.white.100}" },
-      "border-bottom-width": {},
-      "border-color": { "value": "{noordwijk.color.grey.55}" },
-      "border-radius": {},
-      "border-width": { "value": "{noordwijk.size.4xs}" },
-      "color": { "value": "{noordwijk.color.grey.29}" },
-      "font-family": { "value": "{noordwijk.typography.roboto.font-family}" },
-      "font-size": { "value": "15px" },
       "line-height": {},
-      "max-inline-size": {},
-      "padding-block-end": { "value": "{noordwijk.size.xs}" },
-      "padding-block-start": { "value": "{noordwijk.size.xs}" },
-      "padding-inline-end": { "value": "{noordwijk.size.sm}" },
-      "padding-inline-start": { "value": "{noordwijk.size.sm}" },
       "placeholder": {
         "color": { "value": "{noordwijk.color.grey.46}" }
       },
       "disabled": {
-        "background-color": {},
-        "border-color": {},
-        "color": {}
+        "background-color": {}
       },
       "focus": {
         "background-color": { "value": "{noordwijk.color.white.100}" },
@@ -30,14 +16,10 @@
       },
       "invalid": {
         "background-color": {},
-        "border-color": {},
-        "border-width": {},
         "color": {}
       },
       "read-only": {
-        "background-color": {},
-        "border-color": {},
-        "color": {}
+        "background-color": {}
       }
     }
   }

package/municipalities/noordwijk-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json

@@ -2,26 +2,12 @@
   "utrecht": {
     "textbox": {
       "background-color": { "value": "{noordwijk.color.white.100}" },
-      "border-bottom-width": {},
-      "border-color": { "value": "{noordwijk.color.grey.55}" },
-      "border-radius": {},
-      "border-width": { "value": "{noordwijk.size.4xs}" },
-      "color": { "value": "{noordwijk.color.grey.29}" },
-      "font-family": { "value": "{noordwijk.typography.roboto.font-family}" },
-      "font-size": { "value": "15px" },
       "line-height": {},
-      "max-inline-size": {},
-      "padding-block-end": { "value": "{noordwijk.size.xs}" },
-      "padding-block-start": { "value": "{noordwijk.size.xs}" },
-      "padding-inline-end": { "value": "{noordwijk.size.sm}" },
-      "padding-inline-start": { "value": "{noordwijk.size.sm}" },
       "placeholder": {
         "color": { "value": "{noordwijk.color.grey.46}" }
       },
       "disabled": {
-        "background-color": {},
-        "border-color": {},
-        "color": {}
+        "background-color": {}
       },
       "focus": {
         "background-color": { "value": "{noordwijk.color.white.100}" },
@@ -30,14 +16,10 @@
       },
       "invalid": {
         "background-color": {},
-        "border-color": {},
-        "border-width": {},
         "color": {}
       },
       "read-only": {
-        "background-color": {},
-        "border-color": {},
-        "color": {}
+        "background-color": {}
       }
     }
   }

package/municipalities/noordwijk-design-tokens/src/component/utrecht/form-input.tokens.json

@@ -0,0 +1,31 @@
+{
+  "utrecht": {
+    "form-input": {
+      "border-bottom-width": {},
+      "border-color": { "value": "{noordwijk.color.grey.55}" },
+      "border-radius": {},
+      "border-width": { "value": "{noordwijk.size.4xs}" },
+      "color": { "value": "{noordwijk.color.grey.29}" },
+      "font-family": { "value": "{noordwijk.typography.roboto.font-family}" },
+      "font-size": { "value": "15px" },
+      "min-inline-height": {},
+      "max-inline-size": {},
+      "padding-block-end": { "value": "{noordwijk.size.xs}" },
+      "padding-block-start": { "value": "{noordwijk.size.xs}" },
+      "padding-inline-end": { "value": "{noordwijk.size.sm}" },
+      "padding-inline-start": { "value": "{noordwijk.size.sm}" },
+      "disabled": {
+        "border-color": {},
+        "color": {}
+      },
+      "invalid": {
+        "border-color": {},
+        "border-width": {}
+      },
+      "read-only": {
+        "border-color": {},
+        "color": {}
+      }
+    }
+  }
+}

package/municipalities/noordwijk-design-tokens/src/component/utrecht/heading.tokens.json

@@ -9,7 +9,6 @@
       "margin-block-end": { "value": "{noordwijk.size.2xl}" },
       "margin-block-start": { "value": "{noordwijk.size.md}" }
     },
-
     "heading-2": {
       "color": { "value": "{noordwijk.color.primary}" },
       "font-family": { "value": "{noordwijk.typography.roboto-slab.font-family}" },
@@ -19,7 +18,6 @@
       "margin-block-end": { "value": "{noordwijk.size.2xl}" },
       "margin-block-start": { "value": "{noordwijk.size.md}" }
     },
-
     "heading-3": {
       "color": { "value": "{noordwijk.color.primary}" },
       "font-family": { "value": "{noordwijk.typography.roboto-slab.font-family}" },
@@ -29,7 +27,6 @@
       "margin-block-end": { "value": "{noordwijk.size.xl}" },
       "margin-block-start": { "value": "{noordwijk.size.md}" }
     },
-
     "heading-4": {
       "color": { "value": "{noordwijk.color.primary}" },
       "font-family": { "value": "{noordwijk.typography.roboto-slab.font-family}" },
@@ -39,7 +36,6 @@
       "margin-block-end": { "value": "{noordwijk.size.lg}" },
       "margin-block-start": { "value": "{noordwijk.size.md}" }
     },
-
     "heading-5": {
       "color": { "value": "{noordwijk.color.primary}" },
       "font-family": { "value": "{noordwijk.typography.roboto-slab.font-family}" },

package/municipalities/noordwijk-design-tokens/src/component/utrecht/list.tokens.json

@@ -12,7 +12,6 @@
         "padding-inline-start": { "value": "1ch" }
       }
     },
-
     "unordered-list": {
       "font-size": { "value": "{utrecht.document.font-size}" },
       "line-height": {},

package/municipalities/noordwijk-design-tokens/src/component/utrecht/textbox.tokens.json

@@ -0,0 +1,31 @@
+{
+  "utrecht": {
+    "textbox": {
+      "border-bottom-width": {},
+      "border-color": { "value": "{noordwijk.color.grey.55}" },
+      "border-radius": {},
+      "border-width": { "value": "{noordwijk.size.4xs}" },
+      "color": { "value": "{noordwijk.color.grey.29}" },
+      "font-family": { "value": "{noordwijk.typography.roboto.font-family}" },
+      "font-size": { "value": "15px" },
+      "min-inline-height": {},
+      "max-inline-size": {},
+      "padding-block-end": { "value": "{noordwijk.size.xs}" },
+      "padding-block-start": { "value": "{noordwijk.size.xs}" },
+      "padding-inline-end": { "value": "{noordwijk.size.sm}" },
+      "padding-inline-start": { "value": "{noordwijk.size.sm}" },
+      "disabled": {
+        "border-color": {},
+        "color": {}
+      },
+      "invalid": {
+        "border-color": {},
+        "border-width": {}
+      },
+      "read-only": {
+        "border-color": {},
+        "color": {}
+      }
+    }
+  }
+}

package/municipalities/noordwijk-design-tokens/src/config.json

@@ -3,5 +3,45 @@
   "name": "Noordwijk",
   "prefix": "noordwijk",
   "npm": "@nl-design-system-unstable/noordwijk-design-tokens",
-  "stories": ["react-utrecht-link--default"]
-}
+  "stories": [
+    "react-utrecht-alert--default",
+    "react-utrecht-alert--warning",
+    "react-utrecht-alert--error",
+    "react-utrecht-alert--ok",
+    "react-utrecht-badge-counter--default",
+    "react-utrecht-button--default",
+    "react-utrecht-button--hover",
+    "react-utrecht-button--primary-action-button",
+    "react-utrecht-button--secondary-action-button",
+    "react-utrecht-code--default",
+    "react-utrecht-code-block--default",
+    "react-utrecht-heading-1--default",
+    "react-utrecht-heading-2--default",
+    "react-utrecht-heading-3--default",
+    "react-utrecht-heading-4--default",
+    "react-utrecht-alert--default",
+    "react-utrecht-link--default",
+    "react-utrecht-link--hover",
+    "react-utrecht-link--focus",
+    "react-utrecht-ordered-list--default",
+    "react-utrecht-unordered-list--default",
+    "react-utrecht-page-header--default",
+    "react-utrecht-page-footer--default",
+    "react-utrecht-paragraph--default",
+    "react-utrecht-surface--default",
+    "react-utrecht-table--default",
+    "react-utrecht-textbox--default",
+    "react-conduction-card-header--default",
+    "react-conduction-card-header--hover",
+    "react-conduction-card-wrapper--default",
+    "react-conduction-card-wrapper--hover",
+    "react-conduction-pagination--default",
+    "react-conduction-input-select--default",
+    "react-conduction-input-select--list-option",
+    "react-conduction-input-select--placeholder",
+    "react-conduction-tabs--default",
+    "react-conduction-tabs--selected",
+    "react-conduction-tabs--hover",
+    "react-conduction-tabs--list",
+    "react-conduction-tabs--panel"
+  ]}

package/municipalities/noordwijk-design-tokens/src/font.js

@@ -0,0 +1,8 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/300-italic.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/400-italic.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/roboto/700-italic.css';
+import '@fontsource/roboto-slab/300.css';
+import '@fontsource/roboto-slab/500.css';

package/municipalities/open-webconcept-design-tokens/LICENSE.md

@@ -0,0 +1,17 @@
+# Auteursrecht Open Webconcept
+
+Copyright (c) 2023 Open Webconcept
+
+## Logo en huisstijl
+
+Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Open Webconcept.
+
+Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Open Webconcept gebruiken en je ontwerpt een eigen huisstijl.
+
+## Lettertype
+
+Lettertypes die worden gebruikt voor de huisstijl zijn niet allemaal gratis en open source. Let op dat bij gebruik van die bijgeleverde lettertypes je een (betaalde) licentie regelt. Pas anders de configuratie aan om minder of andere lettertypes te gebruiken.
+
+## Toestemming
+
+Wanneer je het logo of de huisstijl wilt gebruiken kun je voor toestemming contact opnemen met Open Webconcept.

package/municipalities/open-webconcept-design-tokens/README.md

@@ -0,0 +1,34 @@
+# NL Design System design tokens Gemeente Example
+
+These tokens have been obtained by analysing the [website of Gemeente Example](https://www.example.com/).
+
+---
+
+✂ In your own directory: **remove the "Getting started" section below!**
+
+---
+
+## Getting started with your own NL Design System theme
+
+1. Kies een unieke prefix voor jouw organisatie, die je gebruikt voor je npm package, BEM class names, CSS variabelen, etcetera. Wij gebruiken `nl-`, jij kiest iets anders. Gebruik alleen letters en cijfers in de prefix, geen andere tekens zoals het koppelstreepje. Bijvoorbeeld: gemeente Den Haag gebruikt `denhaag`.
+2. Kopieer `proprietary/example-design-tokens/` naar `proprietary/prefix-design-tokens`, waarbij je `prefix` vervangt door de prefix die je kiest.
+3. Gebruik "_Find and replace_" in `proprietary/prefix-design-tokens`, vervang _case-sensitive_ `example` door jouw `prefix`.
+4. Gebruik "_Find and replace_" in `proprietary/prefix-design-tokens`, vervang _case-sensitive_ `Example Organisation` door jouw de naam van jouw organisatie.
+5. Bewerk `packages/storybook/package.json`, en voeg `"@nl-design-system-unstable/prefix-design-tokens": "workspace:*",` toe onder `"dependencies"`. Vervang weer de `prefix` met je eigen prefix.
+6. Doe `pnpm install` vanuit de root van je project, zodat jouw nieuwe npm package aan de pnpm workspace toegevoegd wordt.
+7. Bewerk `proprietary/prefix-design-tokens/README.md` en pas het aan met je eigen gegevens, voeg een contactpersoon toe. Verwijder de instructies van de template.
+8. Bewerk `proprietary/prefix-design-tokens/package.json` en pas het aan met een link naar je eigen website.
+9. Bewerk `proprietary/prefix-design-tokens/src/package.json` en pas het aan met gegevens van jouw organisatie.
+10. Bewerk `packages/storybook/config/preview.js`
+    a. Voeg de naam van jouw organisatie toe aan de alfabetische lijst met teams, zodat je op alfabetische volgorde te vinden bent in Storybook.
+    b. Voeg een `import` toe voor de CSS met het thema van jouw organisatie.
+    c. Optioneel: voeg een `import` toe voor de webfonts voor jouw thema.
+11. Voeg in `proprietary/prefix-design-tokens/src/` jouw design tokens, bijvoorbeeld `color.tokens.json`. Op de [website van NL Design System](https://nldesignsystem.nl/) wordt uitgelegd hoe je een eigen thema kan maken met design tokens.
+12. Maak een Pull Request op GitHub om jouw code toe te voegen aan de [NL Design System themes repository](http://github.com/nl-design-system/themes).
+13. Als de code is gemerged in de themes repository, dan zal je eigen thema als npm pakketje na een paar minuten beschikbaar worden via [npmjs.com](http://npmjs.com). Dan kun je het thema installeren in jouw project met `npm install --save-dev @nl-design-system-unstable/prefix-design-tokens`.
+
+---
+
+✂ In your own directory: **remove the "Getting started" section above!**
+
+---