build: make .utrecht-theme instead of :root the default selector

nl-design-system · May 13, 2022 · a4b70eb · a4b70eb
1 parent 3f461a3
commit a4b70eb
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ Combine it with the latest Web Components from the NL Design System community, f
 Then you can go ahead and see the result:
 
 ```html
-<utrecht-html-content>
+<utrecht-html-content class="utrecht-theme">
   <h1>Page styled with NL Design System</h1>
 </utrecht-html-content>
 ```

diff --git a/packages/component-library-formio/README.md b/packages/component-library-formio/README.md
@@ -58,7 +58,7 @@ To use the Utrecht theme for the components, include the design tokens CSS in yo
 npm install --save-dev --save-exact @utrecht/design-tokens
 ```
 
-Include the CSS variables in your page.
+Include the CSS variables in your page, and apply the `utrecht-theme` class name.
 
 ```js
 import "@utrecht/design-tokens/dist/index.css";

diff --git a/packages/component-library-react/README.md b/packages/component-library-react/README.md
@@ -49,7 +49,7 @@ import "@utrecht/component-library-css/dist/bem.css";
 
 // Package with Utrecht design tokens for the white-label components
 // Substitute with your another theme for other organisations.
-import "@utrecht/design-tokens/dist/theme/index.css";
+import "@utrecht/design-tokens/dist/index.css";
 
 export const MyPage = () => (
   // Class name to apply the design tokens from the theme

diff --git a/packages/storybook/config/preview.js b/packages/storybook/config/preview.js
@@ -2,7 +2,7 @@ import { defineCustomElements } from '@utrecht/web-component-library-stencil';
 import defaultsDeep from 'lodash.defaultsdeep';
 
 import '@utrecht/components/document/css/index.scss';
-import '@utrecht/design-tokens/dist/theme/index.css';
+import '@utrecht/design-tokens/dist/index.css';
 import '@utrecht/design-tokens/dist/property.css';
 import '@utrecht/design-tokens/src/custom.scss';
 

diff --git a/packages/web-component-library-angular/README.md b/packages/web-component-library-angular/README.md
@@ -48,7 +48,7 @@ After this you can use web components in your templates:
 <utrecht-paragraph>Hello world!</utrecht-paragraph>
 ```
 
-To use the Utrecht theme for the components, include the design tokens CSS in your `angular.json`:
+To use the Utrecht theme for the components, use the `utrecht-theme` class name and include the design tokens CSS in your `angular.json`:
 
 ```json
 {

diff --git a/packages/web-component-library-stencil/README.md b/packages/web-component-library-stencil/README.md
@@ -24,7 +24,7 @@ Combine it with the latest Web Components (for convenience you can use the unpkg
 Then you can go ahead and see the result:
 
 ```html
-<utrecht-html-content>
+<utrecht-html-content class="utrecht-theme">
   <h1>Page styled with NL Design System</h1>
 </utrecht-html-content>
 ```

diff --git a/packages/web-component-library-vue/README.md b/packages/web-component-library-vue/README.md
@@ -50,7 +50,7 @@ For example, in your `App.vue`:
 Since the implementation of the web components needs to be loaded in the browser, include the following effect to import web component library from `@utrecht/web-component-library-stencil`, for example in your `main.js`:
 
 ```js
-import "@utrecht/design-tokens/dist/theme/index.css";
+import "@utrecht/design-tokens/dist/index.css";
 import { defineCustomElements } from "@utrecht/web-component-library-stencil";
 
 createApp(App).use(router).mount("#app");

diff --git a/proprietary/design-tokens/README.md b/proprietary/design-tokens/README.md
@@ -28,7 +28,7 @@ Design decisions at a component level, to make components look a very specific w
 
 ## Files in this package
 
-### `dist/theme/index.css`
+### `dist/index.css`
 
 Opt-in way to apply all the CSS variables to HTML elements with the `utrecht-theme` class name:
 
@@ -41,7 +41,7 @@ Opt-in way to apply all the CSS variables to HTML elements with the `utrecht-the
 
 This method is the preferred way to style the page.
 
-### `dist/index.css`
+### `dist/root.css`
 
 Automatically applies all the CSS variables to HTML elements to the `:root` element:
 
@@ -111,6 +111,14 @@ To use the design tokens in your site via CSS variables, first include the desig
 <link rel="stylesheet" href="https://unpkg.com/@utrecht/design-tokens/dist/index.css" />
 ```
 
+Then add the `utrecht-theme` class name to your page:
+
+```html
+<html class="utrecht-theme">
+  ...
+</html>
+```
+
 Now the CSS variables will be available and you can use of all the design tokens:
 
 ```css

diff --git a/proprietary/design-tokens/style-dictionary.config.json b/proprietary/design-tokens/style-dictionary.config.json
@@ -35,7 +35,7 @@
       "buildPath": "dist/",
       "files": [
         {
-          "destination": "index.css",
+          "destination": "root.css",
           "format": "css/variables",
           "options": {
             "outputReferences": true
@@ -48,7 +48,7 @@
       "buildPath": "dist/",
       "files": [
         {
-          "destination": "theme/index.css",
+          "destination": "index.css",
           "format": "css/variables",
           "options": {
             "selector": ".utrecht-theme",

diff --git a/standalone/docusaurus/docusaurus.config.js b/standalone/docusaurus/docusaurus.config.js
@@ -32,7 +32,7 @@ module.exports = {
         },
         theme: {
           customCss: [
-            require.resolve('@utrecht/design-tokens/dist/theme/index.css'),
+            require.resolve('@utrecht/design-tokens/dist/index.css'),
             require.resolve('./src/styles/custom.scss'),
           ],
         },