{"id":19288203,"url":"https://github.com/openweb-nl/workshop-design-sytem-white-label","last_synced_at":"2026-02-10T09:35:34.395Z","repository":{"id":147710327,"uuid":"605045841","full_name":"openweb-nl/workshop-design-sytem-white-label","owner":"openweb-nl","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-31T09:21:24.000Z","size":1202,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-02-23T23:28:46.603Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openweb-nl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-22T10:26:54.000Z","updated_at":"2023-03-04T17:37:21.000Z","dependencies_parsed_at":"2023-05-27T05:15:20.256Z","dependency_job_id":null,"html_url":"https://github.com/openweb-nl/workshop-design-sytem-white-label","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/openweb-nl/workshop-design-sytem-white-label","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openweb-nl%2Fworkshop-design-sytem-white-label","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openweb-nl%2Fworkshop-design-sytem-white-label/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openweb-nl%2Fworkshop-design-sytem-white-label/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openweb-nl%2Fworkshop-design-sytem-white-label/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openweb-nl","download_url":"https://codeload.github.com/openweb-nl/workshop-design-sytem-white-label/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openweb-nl%2Fworkshop-design-sytem-white-label/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272937318,"owners_count":25018357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T22:08:22.170Z","updated_at":"2026-02-10T09:35:34.346Z","avatar_url":"https://github.com/openweb-nl.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Workshop Design System \u0026 Whitelabeling\n\nThis repo is used for the workshop with Design system and Whitelabeling. Where this readme is used to guide the participants to create an application which is able to change style depending on company but also themes like light and dark.\n\n---\n\n## Get started\n\nDownload the repo and create your own branch within. So everyone can use their favourite setup and at the end we can see each others implementation.\n\n---\n\n## Installation\n\nOnce you downloaded the repo you can start with a setup of your choosing.\nMake sure you have installed `npm` or `yarn` to begin.\n\n### Angular\nTo do the workshop with angular use following command:\n##### 1. `npm install -g @angular/cli`\n##### 2. `ng new [your name] --style=scss`\n\nStart project with `ng serve`\n\n### React\n\nTo do the workshop with react use following steps:\n##### 1. `npm install -g npx`\n##### 2. `npx create-react-app [your name] --template typescript`\n##### 3. `npm install node-sass --save`\n##### 4. Change the app.css to app.scss (and change import in tsx file)\n\nStart project with: `npm start`\n\n### Svelte or Vue or anything else\nNo easy setup codes for you but you might know it yourself.\nIt's recommended to have `typescript`, `scss` and `hot-reload` in your environment.\n\n---\n\n## Part 1\nWe will start out with a simple component: `Button`.\nIn your environment create a component which will output something similar as this in html:\n#### `\u003cbutton ...props\u003e[This data should come from parent]\u003c/button\u003e`\nAdd this button to your app so you can see it in the browser.\n\nNext up in the main.scss file (styles.scss) we will add:\n ```\n    :root {\n        --primary-color: #95C23D;\n    }\n```\n\nNow inside the newly created component `Button` we will use these colors to set the background color.\nYou can do this in the following way:\n```\n    button {\n        background-color: var(--primary-color);\n    }\n```\n\nThis works for more than just colors try to create a nice button by using variables\n\n---\n## Part 2\nOk so now we have a nice button let's start making themes for this button. Without the need to provide this in your `Button` component.\nThis can be done in a few ways personally I like to use data-attributes for this. Inside your main component(app).\nDo something like this:\n```\n    \u003cdiv data-mode='light'\u003e\n        \u003cButton\u003eMy light button\u003c/Button\u003e\n    \u003c/div\u003e\n    \u003cdiv data-mode='dark'\u003e\n        \u003cButton\u003eMy dark button\u003c/Button\u003e\n    \u003c/div\u003e\n```\nWhen using this in your own project the value of data-mode should be provided depending on the selected theme of the browser. But for the workshop we will use both styles so you can easily see the difference.\n\nNext-up is creating a way in your main scss to provide the right colors for the right button.\nWithin css you can set rules for data attributes by using `[data-mode='light']` by doing this we can appoint the variables we use for the button to a mode. e.g:\n```\n[data-mode='light'] {\n    --primary-color: #95C23D;\n}\n[data-mode='dark'] {\n    --primary-color: #ffffff;\n}\n```\nAdd this to your main scss file and see what happens to your button. Both buttons are the same component but they both have a different background color. By doing it in this way you can easily provide several themes for your application. Maybe you want to create a high-contract mode or even Christmas theme. And this without needing to provide logic to your components just setting some basic rules of things you want to use within your app.\ne.g:\n```\n--color-NAMES (eg. primary, secondary, black-100, black-200, warning, info)\n--breakpoint-SIZE (eg. small, medium, large, mobile, thablet, desktop)\n--spacing-SIZE (eg. S, M, L, 4, 8, 12)\n```\n\n---\n\n## Part 3\nWhen you create lots of variables you might need to think of a way to be able to maintain your scss files. By creating an architecture you might be able to create some clear ability to your project. Off course naming is opinionated but for this workshop we will create something like this:\n\n```\nProject directory\n    src\n        components\n            button\n        theming\n            styles\n            themes\n                openweb\n                    light\n                    dark\n```\nInside the `styles` folder we can create a few `scss` files with basic colors which we can later use for out system. For now let's create one file called `colors.scss` and add this:\n```\n$colors: (\n        openweb: #95C23D,\n        pauwels: #FF5B00,\n        white: #ffffff,\n        // You can add more colours than just these\n)\n```\nInside the `theming` folder create a `generator.scss` in this file we add the following magic.\n```\n@import './styles/colors';\n\n:root {\n  @each $key, $value in $colors {\n    --color-#{$key}: #{$value};\n  }\n}\n```\nWhen you created both files make sure that inside `styles.scss` you import the `generator.scss` file.\n\nNow inside your browser inspect the `:root` and you can see that all colors are available. Note that al your color names will have a prefix call `--color-[name]`. Which is added within the for loop from the generator.scss.\n\nThe next step is to setup our light and dark mode again. Cause the provided colors are not listening to the data-attribute just yet.\nInside the `openweb-\u003elight` folder create two files `button.scss` and `index.scss` so we can easily scale up our project in a later stadium.\n```\nbutton.scss\n\n$button: (\n        color: var(--color-openweb),\n        background: var(--color-white),\n)\n```\nInside button we create names which we will use later on inside our project. The value for those names should point to the colors you created in the previous step.\n```\nindex.scss\n\n@import './button';\n\n$light: (\n        button: $button,\n)\n```\nThis file will be used to connect styling for multiple components into one so we can created proper theming in a later state. Now create these two files also for the dark folder but change the colors so you can see if it's working later on.\n\nOnce you created the files for the light and dark folder we will create another `index.scss` file within the openweb folder. And another inside the themes folder.\n```\nthemes/openweb/index.scss\n\n@import './light';\n@import './dark';\n\n$ow-theme: (\n  light: $light,\n  dark: $dark,\n)\n```\n```\nthemes/index.scss\n\n@import './openweb';\n\n$themes: (\n  openweb: $ow-theme,\n)\n\n```\nNow we need to create some more magic to make sure we can use the tokens you just made available for your component(s). Inside your `generator.scss` file we will add some code:\n```\n// First loop trough themes\n@each $theme, $modes in $themes {\n// Now loop trough the modes within themes\n  @each $mode, $variables in $modes {\n    [data-mode='#{$mode}'] {\n      // Now add all components with their specific styles\n      @each $component, $styles in $variables {\n        @each $key, $value in $styles {\n          --#{$component}-#{$key}: #{$value};\n        }\n      }\n    }\n  }\n}\n```\nThe above code is created in a way so that you can add themes to openweb as you like. But in a later stage we will change this a bit to also support whitelabel. But for now we only support openweb as a theme.\n\nNow inside your `Button` component we will need to change the scss variable to the new names we just created. Change `color: var(--primary-color)` to `color: var(--button-color)` and `background-color` should be set to `var(--button-background-color)`.\nInside your browser the two buttons should be working again. Now also apply this way of working to the other changes you made to the button.\n\n---\n\n## Part 4\nNow we will add another brand to our application. Start by duplicating the `openweb` directory and call it `pauwels`.\nMake some changes to the light and dark theme of button. And inside your main page (app) we will create another data-attribute. This one we will call `data-brand`.\nNow your main html page should have 4 buttons. Something like:\n```\n\u003cdiv\u003e\n    \u003cdiv data-company={'openweb'} data-mode={'light'}\u003e\n        \u003cButton\u003eOpen web light\u003c/Button\u003e\n    \u003c/div\u003e\n    \u003cdiv data-company={'openweb'} data-mode={'dark'}\u003e\n        \u003cButton\u003eOpen web dark\u003c/Button\u003e\n    \u003c/div\u003e\n    \u003cdiv data-company={'pauwels'} data-mode={'light'}\u003e\n        \u003cButton\u003ePauwels light\u003c/Button\u003e\n    \u003c/div\u003e\n    \u003cdiv data-company={'pauwels'} data-mode={'dark'}\u003e\n        \u003cButton\u003ePauwels dark\u003c/Button\u003e\n    \u003c/div\u003e\n\u003cdiv\u003e\n```\n\nInside the generator we need to make a small change, so it can also recognize the data-brand attribute.\nOn the line were we first only used the data-mode we should now change it to this:\n`[data-mode='#{$mode}'][data-company='#{$theme}'] {`\n\nAnd that should be all to make it work. Now can you create the actual Openweb and Pauwels button by using the new system?\n\n---\n\n## Part 5\nNext up using this new system we are going to create a FAQ section. Try to minimize the amount of js/ts you need to create this component. Try using the default html `\u003cdetails\u003e` and `\u003csummary\u003e` to make it all work.\nAlso add animations to the new system, so you can have different animations for your FAQ depending on the company. All css values could be part of the system to create components so styling each component can be very different depending on the brand.\n\nThe acceptance criteria for the FAQ you will create are as following:\n```\nUsage examples:\n\u003cFAQ title='My question'\u003eMy Answer\u003c/FAQ\u003e\n\u003cFAQ title='Where can i login?'\u003eYou can login \u003ca href='login'\u003ehere\u003c/a\u003e\u003c/FAQ\u003e\n\nDefault behavior:\n-Question is always a string value\n-Answer can be anything from a plain text to a text with anchor's in it or even an image. (provided within tag)\n-Component uses full width inside it's container\n\nOpenweb only:\n-Has an icon on the left (use + for closed state and - for open)\n-Has a border on top and bottom of the question\n\nPauwel only:\n-Has an icon on the right (use + for closed state and - for open)\n-Icon's are apart from text as in fully to the right. \n-No border beteen questions\n```\nAll other style options are up to you to create an easy to use component.\n\n---\n\n## Part 6\nThe biggest issue here is to keep a clean architecture the more components you create the more variables will be available to you. I hope with this current setup you can scale this enough, or maybe you can think of an even better way.\n\nFor this final part I want you to create a component of your own. Which uses the system we just created. Maybe think about something cool you are currently using within your own project and could be styled in this new way.\n\nWhen you have no inspiration you could consider one of the following:\n```\n\u003cInput\u003e with the label inside for own brand and outside for another brand\n\u003cCheckbox\u003e with different style for each brand and inverted for light/dark mode\n\u003cTypography\u003e Setup a system to make sure the right font is used depending on the brand but also the variant (Header/p/caption)\n```\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenweb-nl%2Fworkshop-design-sytem-white-label","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenweb-nl%2Fworkshop-design-sytem-white-label","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenweb-nl%2Fworkshop-design-sytem-white-label/lists"}