WIP

Author: Robbert

.changeset/README.md

@@ -4,7 +4,7 @@ Kopieer en plak het onderstaande sjabloon. Je kunt hiervoor de kopieer knop link
 
 ```markdown
 ---
-'@example/<package-name>': major
+'@frameless/<package-name>': major
 ---
 
 Beschrijving
@@ -15,9 +15,9 @@ dubbele aanhalingstekens op een nieuwe regel.
 
 Gebruik:
 
-- `"@example/<package-name>": major` voor breaking changes
-- `"@example/<package-name>": minor` voor nieuwe features
-- `"@example/<package-name>": patch` voor bug fixes
+- `"@frameless/<package-name>": major` voor breaking changes
+- `"@frameless/<package-name>": minor` voor nieuwe features
+- `"@frameless/<package-name>": patch` voor bug fixes
 
 Beschrijf na de tweede set `---` welke veranderingen je hebt doorgevoerd.
 

.github/workflows/publish.yml

@@ -12,7 +12,7 @@ permissions:
 
 jobs:
   publish:
-    if: ${{ github.repository != 'nl-design-system/example' }}
+    if: ${{ github.repository != 'frameless/theme-builder' }}
     runs-on: ubuntu-latest
 
     steps:

README.md

@@ -31,7 +31,7 @@ You need to have the following tools installed to run Storybook locally:
 1. Choose a prefix for your organisation. For example: the main NL Design System uses `nl-`, The Hague uses `denhaag-`, and you can choose something unique for you to use.
 2. Modify `.stylelintrc.json` by replacing the prefix `example` with the prefix you have chosen, in the following rules: `custom-property-pattern`, `selector-class-pattern`, `keyframes-name-pattern`, `scss/dollar-variable-pattern` and `scss/percent-placeholder-pattern`.
 3. Choose and register an npm organisation on [npmjs.com](https://www.npmjs.com/org/create), if you haven't already. This is very important to keep your project secure. The core NL Design System uses `@nl-design-system/`, and you can choose something for yourself. This prevents others from adding their code to your teams codebase.
-4. Modify all `package.json` files to use your npm organisation scope. Don't forget the locally linked packages under `devDependencies`. Find and replace all occurences of `@example/` in your project with `@your-organisation/`. Run `pnpm install` to install each package in under the new organisation directory in each `node_modules/`.
+4. Modify all `package.json` files to use your npm organisation scope. Don't forget the locally linked packages under `devDependencies`. Find and replace all occurences of `@frameless/` in your project with `@your-organisation/`. Run `pnpm install` to install each package in under the new organisation directory in each `node_modules/`.
 5. Modify `.npmpackagejsonlintrc.json` to require your organisation scope in package names, by configuring the `valid-values-name-scope` property.
 6. Modify the imports in `/packages/storybook/config/preview.ts` and `packages/web-components-stencil/src/button/index.scss` to use your prefix.
 7. Modify `proprietary/design-tokens/style-dictionary.config.json` to output `.yourprefix-theme` instead of `.example-theme`.
@@ -77,18 +77,18 @@ To add a component implementation to storybook, we use the `<component-name>-sto
 
 Things we usually do:
 
-- [ ] Generate [fine grained personal access token in GitHub](https://github.com/settings/tokens?type=beta), with rights to push npm version commits. Use a name that will be clear when the token expires, for example: `nl-design-system/example GH_TOKEN`. Choose "All repositories". For "Resource owner" choose the user or organisation of the repository. For "Repository access" choose "Only select repositories", and select only your repository. Expand "Account permissions", then for "Contents" select "Read and write".
+- [ ] Generate [fine grained personal access token in GitHub](https://github.com/settings/tokens?type=beta), with rights to push npm version commits. Use a name that will be clear when the token expires, for example: `frameless/theme-builder GH_TOKEN`. Choose "All repositories". For "Resource owner" choose the user or organisation of the repository. For "Repository access" choose "Only select repositories", and select only your repository. Expand "Account permissions", then for "Contents" select "Read and write".
 - [ ] Configure `GH_TOKEN` in Repository tokens, for use in the `publish-npm` GitHub Action. You might notice the `GITHUB_TOKEN` already exists, but the `GITHUB_` prefix is used by GitHub itself and the token has read-only rights.
-- [ ] Go to [npmjs.com](https://www.npmjs.com/) and create an "Granular Access Token". Use a name that serves as hint where to reset the token when it expires, for example: `nl-design-system/example NPM_TOKEN`. For "Permissions", allow only "Only select packages and scopes" and choose the scope of your npm packages. Do not store the token anywhere, just copy it to GitHub once. You can always generate new tokens, and they will be protected by multi-factor authentication.
+- [ ] Go to [npmjs.com](https://www.npmjs.com/) and create an "Granular Access Token". Use a name that serves as hint where to reset the token when it expires, for example: `frameless/theme-builder NPM_TOKEN`. For "Permissions", allow only "Only select packages and scopes" and choose the scope of your npm packages. Do not store the token anywhere, just copy it to GitHub once. You can always generate new tokens, and they will be protected by multi-factor authentication.
 - [ ] Configure `NPM_TOKEN` in Repository tokens, for use in the `publish-npm` GitHub Action.
 - [ ] Configure GitHub repository settings
-  - [General settings](https://github.com/nl-design-system/example/settings)
+  - [General settings](https://github.com/frameless/theme-builder/settings)
     - [ ] Uncheck "Allow merge commits"
     - [ ] Should already be checked: "Allow squash merging"
     - [ ] Should already be checked: "Allow rebase merging"
     - [ ] Check "Allow auto-merge"
     - [ ] Check "Automatically delete head branches"
-  - [Branches](https://github.com/nl-design-system/example/settings/branches)
+  - [Branches](https://github.com/frameless/theme-builder/settings/branches)
     - [ ] Add rule to protect `main` branch. Branch pattern should be exactly `main`.
       - [ ] Check "Require a pull request before merging"
       - [ ] Check "Require approvals" with at least one approval.
@@ -103,7 +103,7 @@ Things we usually do:
       - [ ] Check "Require linear history"
     - [ ] Add rule to protect `gh-pages` branch, to prevent someone from deleting it accidentally.
 - [ ] Enable GitHub Pages to host Storybook
-  - [ ] Go to [Pages](https://github.com/nl-design-system/example/settings/pages), choose "Deploy from a branch" with `gh-pages` as branch with `/ (root)` as folder. If `gh-pages` is not in the list, make sure the `publish-website` action succeeds at least once.
+  - [ ] Go to [Pages](https://github.com/frameless/theme-builder/settings/pages), choose "Deploy from a branch" with `gh-pages` as branch with `/ (root)` as folder. If `gh-pages` is not in the list, make sure the `publish-website` action succeeds at least once.
   - [ ] In the "Code" tab (the home page of your repository), configure the "About" section. Use "your GitHub Pages website" as "Website" of your repository.
   - [ ] Configure "nl-design-system" as one of the topics of your repository.
 

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="utrecht-root basis-theme">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body class="utrecht-body">
+    <div id="app" class="utrecht-page-layout"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

npmpackagejsonlint.config.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'no-tilde-version-devDependencies': 'error',
     'require-repository-directory': 'error',
     'valid-values-license': ['error', ['EUPL-1.2']],
-    'valid-values-name-scope': ['error', ['@example']],
+    'valid-values-name-scope': ['error', ['@frameless']],
   },
   overrides: [
     {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@example/design-system",
+  "name": "@frameless/theme-builder-workspace",
   "version": "1.0.0-alpha.0",
   "author": "Community for NL Design System",
   "description": "Design system based on the NL Design System architecture",
@@ -10,7 +10,7 @@
   "private": true,
   "repository": {
     "type": "git+ssh",
-    "url": "[email protected]:nl-design-system/example.git",
+    "url": "[email protected]:frameless/theme-builder.git",
     "directory": "."
   },
   "packageManager": "[email protected]+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
@@ -45,10 +45,13 @@
     "stylelint": "16.15.0",
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4",
-    "typescript": "5.8.2"
+    "typescript": "5.8.2",
+    "vite": "6.2.0"
   },
   "scripts": {
-    "build": "pnpm --recursive run build",
+    "dev": "vite",
+    "build": "pnpm --recursive run build && pnpm run build:vite",
+    "build:vite": "tsc && vite build",
     "clean": "pnpm --recursive run clean",
     "lint": "npm-run-all --continue-on-error lint:** lint-workspaces",
     "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",
@@ -68,6 +71,7 @@
     "changeset:empty": "changeset --empty",
     "changeset:publish": "changeset publish",
     "changeset:status": "changeset status --since origin/main",
+    "preview": "vite preview",
     "start": "http-server packages/storybook/dist/",
     "storybook": "npm-run-all --parallel watch:**",
     "test": "pnpm run test-workspaces",
@@ -76,10 +80,18 @@
     "update-patch": "npm-check-updates --configFileName .ncurc.patch.cjs",
     "update-minor": "npm-check-updates --configFileName .ncurc.minor.cjs",
     "update-major": "npm-check-updates --configFileName .ncurc.major.cjs",
-    "watch:storybook": "pnpm --filter @example/web-components-stencil run build:stencil && pnpm --filter @example/design-tokens run build:style-dictionary && pnpm --filter ./packages/storybook run storybook",
-    "watch:style-dictionary": "pnpm --filter @example/design-tokens run watch:style-dictionary"
+    "watch:storybook": "pnpm --filter @frameless/web-components-stencil run build:stencil && pnpm --filter @frameless/design-tokens run build:style-dictionary && pnpm --filter ./packages/storybook run storybook",
+    "watch:style-dictionary": "pnpm --filter @frameless/design-tokens run watch:style-dictionary"
   },
   "dependencies": {
+    "@radix-ui/colors": "3.0.0",
+    "@utrecht/body-css": "1.2.0",
+    "@utrecht/page-layout-css": "1.1.0",
+    "@utrecht/root-css": "1.2.0",
+    "@utrecht/web-component-library-stencil": "3.1.0",
+    "bezier-easing": "2.1.0",
+    "colorjs.io": "0.5.2",
     "http-server": "14.1.1"
-  }
+  },
+  "type": "module"
 }