diff --git a/packages/storybook/config/preview.js b/packages/storybook/config/preview.js index 3f6cb8c52..53698ed07 100644 --- a/packages/storybook/config/preview.js +++ b/packages/storybook/config/preview.js @@ -12,6 +12,8 @@ import '@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens/dist/index. import '@nl-design-system-unstable/borne-design-tokens/dist/index.css'; import '@nl-design-system-unstable/buren-design-tokens/dist/index.css'; import '@nl-design-system-unstable/buren-design-tokens/src/font'; +import '@nl-design-system-unstable/dinkelland-design-tokens/dist/index.css'; +import '@nl-design-system-unstable/dinkelland-design-tokens/src/font'; import '@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens/src/font'; import '@nl-design-system-unstable/drechterland-design-tokens/dist/index.css'; import '@nl-design-system-unstable/duiven-design-tokens/dist/index.css'; @@ -21,6 +23,8 @@ import '@nl-design-system-unstable/voorbeeld-design-tokens/src/custom.scss'; import '@nl-design-system-unstable/voorbeeld-design-tokens/src/font'; // import '@nl-design-system-unstable/duo-design-tokens/dist/index.css'; import '@nl-design-system-unstable/enkhuizen-design-tokens/dist/index.css'; +import '@nl-design-system-unstable/epe-design-tokens/dist/index.css'; +import '@nl-design-system-unstable/epe-design-tokens/src/font'; import '@nl-design-system-unstable/groningen-design-tokens/dist/index.css'; import '@nl-design-system-unstable/haarlem-design-tokens/dist/index.css'; import '@nl-design-system-unstable/haarlem-design-tokens/src/font.scss'; @@ -29,9 +33,11 @@ import '@nl-design-system-unstable/hoorn-design-tokens/dist/design-tokens.css'; import '@nl-design-system-unstable/hoorn-design-tokens/src/font'; import '@nl-design-system-unstable/horstaandemaas-design-tokens/dist/index.css'; import '@nl-design-system-unstable/leiden-design-tokens/dist/index.css'; +import '@nl-design-system-unstable/leiden-design-tokens/src/font'; import '@nl-design-system-unstable/leidschendam-voorburg-design-tokens/dist/index.css'; import '@nl-design-system-unstable/nijmegen-design-tokens/dist/index.css'; import '@nl-design-system-unstable/nijmegen-design-tokens/src/font'; +import '@nl-design-system-unstable/noaberkracht-design-tokens/dist/index.css'; import '@nl-design-system-unstable/noordoostpolder-design-tokens/dist/index.css'; import '@nl-design-system-unstable/noordoostpolder-design-tokens/src/font'; import '@nl-design-system-unstable/noordwijk-design-tokens/dist/index.css'; @@ -43,10 +49,13 @@ import '@nl-design-system-unstable/rotterdam-design-tokens/src/custom.scss'; // import '@nl-design-system-unstable/rotterdam-design-tokens/src/font.scss'; import '@nl-design-system-unstable/stedebroec-design-tokens/dist/index.css'; import '@nl-design-system-unstable/tilburg-design-tokens/dist/index.css'; +import '@nl-design-system-unstable/tubbergen-design-tokens/dist/index.css'; +import '@nl-design-system-unstable/tubbergen-design-tokens/src/font'; import '@nl-design-system-unstable/venray-design-tokens/dist/index.css'; import '@nl-design-system-unstable/vught-design-tokens/dist/index.css'; import '@nl-design-system-unstable/westervoort-design-tokens/dist/index.css'; import '@nl-design-system-unstable/westervoort-design-tokens/src/font'; +import '@nl-design-system-unstable/xxllnc-design-tokens/dist/index.css'; import '@nl-design-system-unstable/zevenaar-design-tokens/dist/index.css'; import '@nl-design-system-unstable/zevenaar-design-tokens/src/font'; import '@nl-design-system-unstable/zwolle-design-tokens/dist/index.css'; @@ -73,11 +82,13 @@ const themes = [ 'Borne', 'Buren', 'Den Haag', + 'Dinkelland', 'Drechterland', 'DSO', 'Duiven', 'DUO', 'Enkhuizen', + 'Epe', 'Groningen', 'Haarlem', 'Haarlemmermeer', @@ -86,16 +97,19 @@ const themes = [ 'Leiden', 'Leidschendam Voorburg', 'Nijmegen', + 'Noaberkracht', 'Noordwijk', 'Noordoostpolder', 'Rijkshuisstijl', 'Rotterdam', 'Stede Broec', 'Tilburg', + 'Tubbergen', 'Utrecht', 'Venray', 'Vught', 'Westervoort', + 'Xxllnc', 'Zevenaar', 'Zuid-Holland', 'Zwolle', diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 36bf8a989..e0fd696a9 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -34,10 +34,12 @@ "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "workspace:*", "@nl-design-system-unstable/borne-design-tokens": "workspace:*", "@nl-design-system-unstable/buren-design-tokens": "workspace:*", + "@nl-design-system-unstable/dinkelland-design-tokens": "workspace:*", "@nl-design-system-unstable/drechterland-design-tokens": "workspace:*", "@nl-design-system-unstable/duiven-design-tokens": "workspace:*", "@nl-design-system-unstable/duo-design-tokens": "workspace:*", "@nl-design-system-unstable/enkhuizen-design-tokens": "workspace:*", + "@nl-design-system-unstable/epe-design-tokens": "workspace:*", "@nl-design-system-unstable/voorbeeld-design-tokens": "workspace:*", "@nl-design-system-unstable/groningen-design-tokens": "workspace:*", "@nl-design-system-unstable/haarlem-design-tokens": "workspace:*", @@ -47,6 +49,7 @@ "@nl-design-system-unstable/leiden-design-tokens": "workspace:*", "@nl-design-system-unstable/leidschendam-voorburg-design-tokens": "workspace:*", "@nl-design-system-unstable/nijmegen-design-tokens": "workspace:*", + "@nl-design-system-unstable/noaberkracht-design-tokens": "workspace:*", "@nl-design-system-unstable/noordoostpolder-design-tokens": "workspace:*", "@nl-design-system-unstable/noordwijk-design-tokens": "workspace:*", "@nl-design-system-unstable/provincie-zuid-holland-design-tokens": "workspace:*", @@ -55,9 +58,11 @@ "@nl-design-system-unstable/theme-switcher": "workspace:*", "@nl-design-system-unstable/theme-toolkit": "workspace:*", "@nl-design-system-unstable/tilburg-design-tokens": "workspace:*", + "@nl-design-system-unstable/tubbergen-design-tokens": "workspace:*", "@nl-design-system-unstable/venray-design-tokens": "workspace:*", "@nl-design-system-unstable/vught-design-tokens": "workspace:*", "@nl-design-system-unstable/westervoort-design-tokens": "workspace:*", + "@nl-design-system-unstable/xxllnc-design-tokens": "workspace:*", "@nl-design-system-unstable/zevenaar-design-tokens": "workspace:*", "@nl-design-system-unstable/zwolle-design-tokens": "workspace:*", "@open-formulieren/design-tokens": "0.25.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5faf67d2..a7c9d8d6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + importers: .: @@ -176,6 +180,9 @@ importers: '@nl-design-system-unstable/buren-design-tokens': specifier: workspace:* version: link:../../proprietary/buren-design-tokens + '@nl-design-system-unstable/dinkelland-design-tokens': + specifier: workspace:* + version: link:../../proprietary/dinkelland-design-tokens '@nl-design-system-unstable/drechterland-design-tokens': specifier: workspace:* version: link:../../proprietary/drechterland-design-tokens @@ -188,6 +195,9 @@ importers: '@nl-design-system-unstable/enkhuizen-design-tokens': specifier: workspace:* version: link:../../proprietary/enkhuizen-design-tokens + '@nl-design-system-unstable/epe-design-tokens': + specifier: workspace:* + version: link:../../proprietary/epe-design-tokens '@nl-design-system-unstable/groningen-design-tokens': specifier: workspace:* version: link:../../proprietary/groningen-design-tokens @@ -212,6 +222,9 @@ importers: '@nl-design-system-unstable/nijmegen-design-tokens': specifier: workspace:* version: link:../../proprietary/nijmegen-design-tokens + '@nl-design-system-unstable/noaberkracht-design-tokens': + specifier: workspace:* + version: link:../../proprietary/noaberkracht-design-tokens '@nl-design-system-unstable/noordoostpolder-design-tokens': specifier: workspace:* version: link:../../proprietary/noordoostpolder-design-tokens @@ -236,6 +249,9 @@ importers: '@nl-design-system-unstable/tilburg-design-tokens': specifier: workspace:* version: link:../../proprietary/tilburg-design-tokens + '@nl-design-system-unstable/tubbergen-design-tokens': + specifier: workspace:* + version: link:../../proprietary/tubbergen-design-tokens '@nl-design-system-unstable/venray-design-tokens': specifier: workspace:* version: link:../../proprietary/venray-design-tokens @@ -248,6 +264,9 @@ importers: '@nl-design-system-unstable/westervoort-design-tokens': specifier: workspace:* version: link:../../proprietary/westervoort-design-tokens + '@nl-design-system-unstable/xxllnc-design-tokens': + specifier: workspace:* + version: link:../../proprietary/xxllnc-design-tokens '@nl-design-system-unstable/zevenaar-design-tokens': specifier: workspace:* version: link:../../proprietary/zevenaar-design-tokens @@ -564,6 +583,30 @@ importers: specifier: 3.8.0 version: 3.8.0 + proprietary/dinkelland-design-tokens: + devDependencies: + '@fontsource/lato': + specifier: 5.0.12 + version: 5.0.12 + '@fontsource/montserrat': + specifier: 5.0.8 + version: 5.0.8 + '@nl-design-system-unstable/theme-toolkit': + specifier: workspace:* + version: link:../../packages/theme-toolkit + chokidar-cli: + specifier: 3.0.0 + version: 3.0.0 + npm-run-all: + specifier: 4.1.5 + version: 4.1.5 + rimraf: + specifier: 3.0.2 + version: 3.0.2 + style-dictionary: + specifier: 3.8.0 + version: 3.8.0 + proprietary/drechterland-design-tokens: devDependencies: '@nl-design-system-unstable/theme-toolkit': @@ -639,6 +682,27 @@ importers: specifier: 3.8.0 version: 3.8.0 + proprietary/epe-design-tokens: + devDependencies: + '@fontsource/source-sans-pro': + specifier: 5.0.8 + version: 5.0.8 + '@nl-design-system-unstable/theme-toolkit': + specifier: workspace:* + version: link:../../packages/theme-toolkit + chokidar-cli: + specifier: 3.0.0 + version: 3.0.0 + npm-run-all: + specifier: 4.1.5 + version: 4.1.5 + rimraf: + specifier: 3.0.2 + version: 3.0.2 + style-dictionary: + specifier: 3.8.0 + version: 3.8.0 + proprietary/example-design-tokens: devDependencies: '@nl-design-system-unstable/theme-toolkit': @@ -755,6 +819,9 @@ importers: proprietary/leiden-design-tokens: devDependencies: + '@fontsource/open-sans': + specifier: 5.0.12 + version: 5.0.12 '@nl-design-system-unstable/theme-toolkit': specifier: workspace:* version: link:../../packages/theme-toolkit @@ -810,6 +877,24 @@ importers: specifier: 3.8.0 version: 3.8.0 + proprietary/noaberkracht-design-tokens: + devDependencies: + '@nl-design-system-unstable/theme-toolkit': + specifier: workspace:* + version: link:../../packages/theme-toolkit + chokidar-cli: + specifier: 3.0.0 + version: 3.0.0 + npm-run-all: + specifier: 4.1.5 + version: 4.1.5 + rimraf: + specifier: 3.0.2 + version: 3.0.2 + style-dictionary: + specifier: 3.8.0 + version: 3.8.0 + proprietary/noordoostpolder-design-tokens: devDependencies: '@fontsource/roboto': @@ -930,6 +1015,30 @@ importers: specifier: 3.8.0 version: 3.8.0 + proprietary/tubbergen-design-tokens: + devDependencies: + '@fontsource/lato': + specifier: 5.0.12 + version: 5.0.12 + '@fontsource/montserrat': + specifier: 5.0.8 + version: 5.0.8 + '@nl-design-system-unstable/theme-toolkit': + specifier: workspace:* + version: link:../../packages/theme-toolkit + chokidar-cli: + specifier: 3.0.0 + version: 3.0.0 + npm-run-all: + specifier: 4.1.5 + version: 4.1.5 + rimraf: + specifier: 3.0.2 + version: 3.0.2 + style-dictionary: + specifier: 3.8.0 + version: 3.8.0 + proprietary/venray-design-tokens: devDependencies: '@nl-design-system-unstable/theme-toolkit': @@ -987,6 +1096,24 @@ importers: specifier: 3.8.0 version: 3.8.0 + proprietary/xxllnc-design-tokens: + devDependencies: + '@nl-design-system-unstable/theme-toolkit': + specifier: workspace:* + version: link:../../packages/theme-toolkit + chokidar-cli: + specifier: 3.0.0 + version: 3.0.0 + npm-run-all: + specifier: 4.1.5 + version: 4.1.5 + rimraf: + specifier: 3.0.2 + version: 3.0.2 + style-dictionary: + specifier: 3.8.0 + version: 3.8.0 + proprietary/zevenaar-design-tokens: devDependencies: '@fontsource/source-sans-pro': @@ -2576,9 +2703,21 @@ packages: resolution: {integrity: sha512-092h3D/WVUPVyGPFxdAqr4KwFsAxzxB1o01YY3qQGA3vB9zATYiCsXWGKXiztDzggIgJmC4TdUq+gEVZPZuXuA==} dev: true + /@fontsource/lato@5.0.12: + resolution: {integrity: sha512-49kN7Ty0mDicmxNdaaDuOFtY5hvAwFN1pXkxaJJVlozh4v/houKwvodM3L7QVJEUC4KfNVEwn5Y409Us+EyFWw==} + dev: true + + /@fontsource/montserrat@5.0.8: + resolution: {integrity: sha512-bNj6wfiWXXbsxb2ffatjpX+GBv30cWZ1lwNXW9qTeX2FnzPomsGRV4HdPrf3TqyTiVqX6fLo80zrQcMi7r8+fA==} + dev: true + /@fontsource/open-sans@4.5.14: resolution: {integrity: sha512-mBXIIETBlW8q/ocuUN0hyGow2iuf75hQEHQt8R/RJ/HcphVbLg8KB7pHYGbFGDqs75W+SWvTC7JkVeAjT65BuQ==} + /@fontsource/open-sans@5.0.12: + resolution: {integrity: sha512-Ptri5McmTGEJkQ5nvGQeJX8YdGbZpOT6V03By1pISIPZygO/ps4bQIvwPO+X/WtBY+2C1xKeyqx7LX+3fxlo2A==} + dev: true + /@fontsource/roboto-slab@5.0.11: resolution: {integrity: sha512-p6rk+Xjn7cVO7jkTpJlKA5QSa7eflNruUQBida4pUr2vLcY6XRMvO/ESqhPSxKQwGMjd8Opz8erZp/hPcP/dBw==} dev: true @@ -2594,6 +2733,10 @@ packages: resolution: {integrity: sha512-f7iw44q1EjBv3MNcHCGAgrW/QVyweaEouFsJzykPhTOGnZFSwFJRISToXornOmuAy7xUUGiVdqOLiykgZoYB8A==} dev: true + /@fontsource/source-sans-pro@5.0.8: + resolution: {integrity: sha512-5U2UvIYRkCMozZ388gCE73PEpa2MFgN/0t9O4a1FF7bGT/MIneQWSL1XpWZ8iMVYdh6ntxRf3iFA6slCIuFgkg==} + dev: true + /@gar/promisify@1.1.3: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} @@ -6084,6 +6227,7 @@ packages: /array-find-index@1.0.2: resolution: {integrity: sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw==} engines: {node: '>=0.10.0'} + requiresBuild: true dev: false optional: true @@ -6238,6 +6382,7 @@ packages: /async-each@1.0.6: resolution: {integrity: sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==} + requiresBuild: true optional: true /async-limiter@1.0.1: @@ -6531,6 +6676,7 @@ packages: /binary-extensions@1.13.1: resolution: {integrity: sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==} engines: {node: '>=0.10.0'} + requiresBuild: true optional: true /binary-extensions@2.2.0: @@ -6539,6 +6685,7 @@ packages: /bindings@1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} + requiresBuild: true dependencies: file-uri-to-path: 1.0.0 optional: true @@ -6630,6 +6777,7 @@ packages: /bplist-parser@0.1.1: resolution: {integrity: sha512-2AEM0FXy8ZxVLBuqX0hqt1gDwcnz2zygEkQ6zaD5Wko/sB9paUNwlpawrFtKeHUAQUOzjVy9AO4oeonqIHKA9Q==} + requiresBuild: true dependencies: big-integer: 1.6.51 dev: false @@ -6988,6 +7136,7 @@ packages: /camelcase-keys@2.1.0: resolution: {integrity: sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: camelcase: 2.1.1 map-obj: 1.0.1 @@ -7006,6 +7155,7 @@ packages: /camelcase@2.1.1: resolution: {integrity: sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw==} engines: {node: '>=0.10.0'} + requiresBuild: true dev: false optional: true @@ -7150,6 +7300,7 @@ packages: /chokidar@2.1.8: resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==} deprecated: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies + requiresBuild: true dependencies: anymatch: 2.0.0 async-each: 1.0.6 @@ -7730,6 +7881,7 @@ packages: /core-util-is@1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} + requiresBuild: true /corser@2.0.1: resolution: {integrity: sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==} @@ -7998,6 +8150,7 @@ packages: /currently-unhandled@0.4.1: resolution: {integrity: sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: array-find-index: 1.0.2 dev: false @@ -9306,6 +9459,7 @@ packages: /file-uri-to-path@1.0.0: resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==} + requiresBuild: true optional: true /fill-range@4.0.0: @@ -9795,6 +9949,7 @@ packages: /get-stdin@4.0.1: resolution: {integrity: sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==} engines: {node: '>=0.10.0'} + requiresBuild: true dev: false optional: true @@ -10740,6 +10895,7 @@ packages: /indent-string@2.1.0: resolution: {integrity: sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: repeating: 2.0.1 dev: false @@ -10927,6 +11083,7 @@ packages: /is-binary-path@1.0.1: resolution: {integrity: sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: binary-extensions: 1.13.1 optional: true @@ -11047,6 +11204,7 @@ packages: /is-finite@1.1.0: resolution: {integrity: sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==} engines: {node: '>=0.10.0'} + requiresBuild: true dev: false optional: true @@ -12010,6 +12168,7 @@ packages: /loud-rejection@1.6.0: resolution: {integrity: sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: currently-unhandled: 0.4.1 signal-exit: 3.0.7 @@ -12423,6 +12582,7 @@ packages: /meow@3.7.0: resolution: {integrity: sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: camelcase-keys: 2.1.0 decamelize: 1.2.0 @@ -13069,6 +13229,7 @@ packages: /nan@2.17.0: resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==} + requiresBuild: true optional: true /nano-css@5.3.5(react-dom@18.2.0)(react@18.2.0): @@ -13283,6 +13444,7 @@ packages: /normalize-path@2.1.1: resolution: {integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: remove-trailing-separator: 1.1.0 @@ -13706,6 +13868,7 @@ packages: /os-homedir@1.0.2: resolution: {integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==} engines: {node: '>=0.10.0'} + requiresBuild: true dev: false optional: true @@ -14112,6 +14275,7 @@ packages: /path-dirname@1.0.2: resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==} + requiresBuild: true /path-exists@2.1.0: resolution: {integrity: sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==} @@ -14669,6 +14833,7 @@ packages: /process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} + requiresBuild: true /process@0.11.10: resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==} @@ -15261,6 +15426,7 @@ packages: /readdirp@2.2.1: resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==} engines: {node: '>=0.10'} + requiresBuild: true dependencies: graceful-fs: 4.2.11 micromatch: 3.1.10 @@ -15278,6 +15444,7 @@ packages: /redent@1.0.0: resolution: {integrity: sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: indent-string: 2.1.0 strip-indent: 1.0.1 @@ -15473,6 +15640,7 @@ packages: /remove-trailing-separator@1.1.0: resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==} + requiresBuild: true /renderkid@2.0.7: resolution: {integrity: sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==} @@ -15504,6 +15672,7 @@ packages: /repeating@2.0.1: resolution: {integrity: sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: is-finite: 1.1.0 dev: false @@ -16639,6 +16808,7 @@ packages: /string_decoder@1.1.1: resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==} + requiresBuild: true dependencies: safe-buffer: 5.1.2 @@ -16709,6 +16879,7 @@ packages: resolution: {integrity: sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==} engines: {node: '>=0.10.0'} hasBin: true + requiresBuild: true dependencies: get-stdin: 4.0.1 dev: false @@ -17306,6 +17477,7 @@ packages: /trim-newlines@1.0.0: resolution: {integrity: sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==} engines: {node: '>=0.10.0'} + requiresBuild: true dev: false optional: true @@ -17802,6 +17974,7 @@ packages: /untildify@2.1.0: resolution: {integrity: sha512-sJjbDp2GodvkB0FZZcn7k6afVisqX5BZD7Yq3xp4nN2O15BBK0cLm3Vwn2vQaF7UDS0UUsrQMkkplmDI5fskig==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: os-homedir: 1.0.2 dev: false @@ -17815,6 +17988,7 @@ packages: /upath@1.2.0: resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==} engines: {node: '>=4'} + requiresBuild: true optional: true /upath@2.0.1: @@ -18836,7 +19010,3 @@ packages: /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} dev: true - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false diff --git a/proprietary/dinkelland-design-tokens/LICENSE.md b/proprietary/dinkelland-design-tokens/LICENSE.md new file mode 100644 index 000000000..f1ce87c72 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/LICENSE.md @@ -0,0 +1,17 @@ +# Auteursrecht Gemeente Dinkelland + +Copyright (c) 2023 Gemeente Dinkelland + +## Logo en huisstijl + +Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Gemeente Dinkelland. + +Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Gemeente Dinkelland 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 Gemeente Dinkelland. diff --git a/proprietary/dinkelland-design-tokens/README.md b/proprietary/dinkelland-design-tokens/README.md new file mode 100644 index 000000000..418b76cda --- /dev/null +++ b/proprietary/dinkelland-design-tokens/README.md @@ -0,0 +1,3 @@ +# NL Design System design tokens Gemeente Dinkelland + +These tokens have been obtained by analysing the [website of Gemeente Dinkelland](https://www.dinkelland.nl/). diff --git a/proprietary/dinkelland-design-tokens/documentation/color.stories.mdx b/proprietary/dinkelland-design-tokens/documentation/color.stories.mdx new file mode 100644 index 000000000..746f03e58 --- /dev/null +++ b/proprietary/dinkelland-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"; + + + +# Color + +## Find a color + + + +## Color palette + + diff --git a/proprietary/dinkelland-design-tokens/documentation/components.stories.mdx b/proprietary/dinkelland-design-tokens/documentation/components.stories.mdx new file mode 100644 index 000000000..0937db7f1 --- /dev/null +++ b/proprietary/dinkelland-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"; + + + +# Components + + + + diff --git a/proprietary/dinkelland-design-tokens/documentation/design-tokens.stories.mdx b/proprietary/dinkelland-design-tokens/documentation/design-tokens.stories.mdx new file mode 100644 index 000000000..dce92c263 --- /dev/null +++ b/proprietary/dinkelland-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"; + + + +# Design Tokens + + token.path[0] !== config.prefix)}> + +## Proprietary Design Tokens + + token.path[0] === config.prefix)}> diff --git a/proprietary/dinkelland-design-tokens/documentation/readme.stories.mdx b/proprietary/dinkelland-design-tokens/documentation/readme.stories.mdx new file mode 100644 index 000000000..e1d67fa5d --- /dev/null +++ b/proprietary/dinkelland-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"; + + + +{markdown} diff --git a/proprietary/dinkelland-design-tokens/package.json b/proprietary/dinkelland-design-tokens/package.json new file mode 100644 index 000000000..ce2cc4ed4 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/package.json @@ -0,0 +1,42 @@ +{ + "version": "1.0.0-alpha.1", + "author": "Community for NL Design System", + "description": "NL Design System design tokens for Gemeente Dinkelland", + "website": "https://www.dinkelland.nl/", + "keywords": [ + "nl-design-system", + "conduction" + ], + "license": "SEE LICENSE IN LICENSE.md", + "name": "@nl-design-system-unstable/dinkelland-design-tokens", + "private": false, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git+ssh", + "url": "git@github.com:nl-design-system/themes.git" + }, + "scripts": { + "clean": "rimraf -rf dist/", + "prebuild": "npm run clean", + "watch": "npm-run-all watch:**", + "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'", + "build": "npm-run-all build:**", + "build:scss": "sass --no-source-map src/:dist/", + "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js" + }, + "devDependencies": { + "@fontsource/lato": "5.0.12", + "@fontsource/montserrat": "5.0.8", + "@nl-design-system-unstable/theme-toolkit": "workspace:*", + "chokidar-cli": "3.0.0", + "npm-run-all": "4.1.5", + "rimraf": "3.0.2", + "style-dictionary": "3.8.0" + }, + "bugs": { + "url": "https://github.com/ConductionNL/conduction-theme/issues" + }, + "homepage": "https://github.com/ConductionNL/conduction-theme#readme" +} diff --git a/proprietary/dinkelland-design-tokens/src/brand/dinkelland/color.tokens.json b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/color.tokens.json new file mode 100644 index 000000000..6447322db --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/color.tokens.json @@ -0,0 +1,108 @@ +{ + "dinkelland": { + "color": { + "primary": { + "value": "{dinkelland.color.blue.36}" + }, + "primary-hover": { + "value": "{dinkelland.color.blue.26}" + }, + "error": { "value": "#dc3545" }, + "alert-error": { "value": "{dinkelland.color.black.20}" }, + "alert-error-background": { "value": "#f8d7da" }, + "warning": { "value": "#ffc107" }, + "alert-warning": { "value": "{dinkelland.color.black.20}" }, + "alert-warning-background": { "value": "#fff3cd" }, + "succes": { "value": "#28a745" }, + "alert-succes": { "value": "{dinkelland.color.black.20}" }, + "alert-succes-background": { "value": "#d4edda" }, + "info": { "value": "{dinkelland.color.blue.36}" }, + "alert-info": { "value": "{dinkelland.color.black.20}" }, + "alert-info-background": { "value": "{dinkelland.color.blue.94}" }, + "green": { + "24": { + "value": "#007a4d", + "comment": "Base/Green" + } + }, + "blue": { + "26": { + "value": "#004e86" + }, + "31": { + "value": "#005da0" + }, + "36": { + "value": "#006cb9", + "comment": "Base/Blue" + }, + "48": { + "value": "#2e79c6" + }, + "91": { + "value": "#deebf4" + }, + "94": { + "value": "#e5f0f8" + }, + "96": { + "value": "#f2f4f7" + } + }, + "white": { + "98": { + "value": "#fafafa" + }, + "100": { + "value": "#ffffff", + "comment": "Base/White" + } + }, + "black": { + "0": { + "value": "#000000" + }, + "13": { + "value": "#222222", + "comment": "Base/Black" + }, + "20": { + "value": "#333333" + }, + "33": { + "value": "#555555" + } + }, + "grey": { + "38": { + "value": "#5c6066" + }, + "42": { + "value": "#6b6b6b" + }, + "46": { + "value": "#767676" + }, + "64": { + "value": "#9aa1ab", + "comment": "Base/Grey" + }, + "72": { + "value": "#AEB6C2" + }, + "94": { + "value": "#edeff2" + } + }, + "lightgrey": { + "89": { + "value": "#e4e4e4", + "comment": "Base/LightGrey" + }, + "96": { + "value": "#f5f5f5" + } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/brand/dinkelland/font-size.tokens.json b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/font-size.tokens.json new file mode 100644 index 000000000..4cb76718e --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/font-size.tokens.json @@ -0,0 +1,17 @@ +{ + "dinkelland": { + "font-size": { + "4xs": { "value": "5px" }, + "3xs": { "value": "8px" }, + "2xs": { "value": "10px" }, + "xs": { "value": "12px" }, + "sm": { "value": "14px" }, + "md": { "value": "16px" }, + "lg": { "value": "18px" }, + "xl": { "value": "24px" }, + "2xl": { "value": "32px" }, + "3xl": { "value": "48px" }, + "4xl": { "value": "58px" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/brand/dinkelland/size.tokens.json b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/size.tokens.json new file mode 100644 index 000000000..60a0f9a83 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/size.tokens.json @@ -0,0 +1,17 @@ +{ + "dinkelland": { + "size": { + "4xs": { "value": "1px" }, + "3xs": { "value": "2px" }, + "2xs": { "value": "4px" }, + "xs": { "value": "8px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "24px" }, + "xl": { "value": "32px" }, + "2xl": { "value": "48px" }, + "3xl": { "value": "72px" }, + "4xl": { "value": "96px" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/brand/dinkelland/typography.tokens.json b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/typography.tokens.json new file mode 100644 index 000000000..9ff35434e --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/brand/dinkelland/typography.tokens.json @@ -0,0 +1,45 @@ +{ + "dinkelland": { + "typography": { + "lato": { + "font-family": { + "value": "\"Lato\", Arial, sans-serif" + } + }, + "montserrat": { + "font-family": { + "value": "\"Montserrat\", Arial, sans-serif" + } + }, + "monospace": { + "font-family": { + "value": "Monospace, \"Lucida Console\"" + } + }, + "font-weight": { + "bold": { + "value": "700" + }, + "normal": { + "value": "400" + }, + "light": { + "value": "100" + } + }, + "scale": { + "4xs": { "value": "{dinkelland.font-size.4xs}" }, + "3xs": { "value": "{dinkelland.font-size.3xs}" }, + "2xs": { "value": "{dinkelland.font-size.2xs}" }, + "xs": { "value": "{dinkelland.font-size.xs}" }, + "sm": { "value": "{dinkelland.font-size.sm}" }, + "md": { "value": "{dinkelland.font-size.md}" }, + "lg": { "value": "{dinkelland.font-size.lg}" }, + "xl": { "value": "{dinkelland.font-size.xl}" }, + "2xl": { "value": "{dinkelland.font-size.2xl}" }, + "3xl": { "value": "{dinkelland.font-size.3xl}" }, + "4xl": { "value": "{dinkelland.font-size.4xl}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/common/utrecht/action.tokens.json b/proprietary/dinkelland-design-tokens/src/common/utrecht/action.tokens.json new file mode 100644 index 000000000..d226101fc --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/common/utrecht/action.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "action": { + "busy": { "cursor": { "value": "wait" } }, + "disabled": { "cursor": { "value": "not-allowed" } }, + "submit": { "cursor": { "value": "pointer" } } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/common/utrecht/space.tokens.json b/proprietary/dinkelland-design-tokens/src/common/utrecht/space.tokens.json new file mode 100644 index 000000000..a5a35a606 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/common/utrecht/space.tokens.json @@ -0,0 +1,28 @@ +{ + "utrecht": { + "space": { + "block": { + "3xs": { "value": "{dinkelland.size.3xs}" }, + "2xs": { "value": "{dinkelland.size.2xs}" }, + "xs": { "value": "{dinkelland.size.xs}" }, + "sm": { "value": "{dinkelland.size.sm}" }, + "md": { "value": "{dinkelland.size.md}" }, + "lg": { "value": "{dinkelland.size.lg}" }, + "xl": { "value": "{dinkelland.size.xl}" }, + "2xl": { "value": "{dinkelland.size.2xl}" }, + "3xl": { "value": "{dinkelland.size.3xl}" } + }, + "inline": { + "3xs": { "value": "{dinkelland.size.3xs}" }, + "2xs": { "value": "{dinkelland.size.2xs}" }, + "xs": { "value": "{dinkelland.size.xs}" }, + "sm": { "value": "{dinkelland.size.sm}" }, + "md": { "value": "{dinkelland.size.md}" }, + "lg": { "value": "{dinkelland.size.lg}" }, + "xl": { "value": "{dinkelland.size.xl}" }, + "2xl": { "value": "{dinkelland.size.2xl}" }, + "3xl": { "value": "{dinkelland.size.3xl}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/conduction/card-header.tokens.json b/proprietary/dinkelland-design-tokens/src/component/conduction/card-header.tokens.json new file mode 100644 index 000000000..2ddaa9ff1 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/conduction/card-header.tokens.json @@ -0,0 +1,26 @@ +{ + "conduction": { + "card-header": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {} + }, + "title": { + "color": { "value": "{dinkelland.color.black.0}" } + }, + "date": { + "color": { "value": "{dinkelland.color.black.0}" }, + "font-size": { "value": "{dinkelland.font-size.sm}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.light}" }, + "margin-block-end": { "value": "{dinkelland.size.xs}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/conduction/card-wrapper.tokens.json b/proprietary/dinkelland-design-tokens/src/component/conduction/card-wrapper.tokens.json new file mode 100644 index 000000000..e83c7f522 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/conduction/card-wrapper.tokens.json @@ -0,0 +1,25 @@ +{ + "conduction": { + "card-wrapper": { + "background-color": { "value": "{dinkelland.color.blue.94}" }, + "border-color": {}, + "border-style": {}, + "border-width": { "value": "unset" }, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {}, + "border-radius": { "value": "0px" }, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {} + }, + "padding-inline-end": { "value": "{dinkelland.size.xl}" }, + "padding-inline-start": { "value": "{dinkelland.size.xl}" }, + "padding-block-end": { "value": "{dinkelland.size.xl}" }, + "padding-block-start": { "value": "{dinkelland.size.xl}" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/conduction/pagination.tokens.json b/proprietary/dinkelland-design-tokens/src/component/conduction/pagination.tokens.json new file mode 100644 index 000000000..584044faa --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/conduction/pagination.tokens.json @@ -0,0 +1,45 @@ +{ + "conduction": { + "pagination": { + "container-background-color": { "value": "unset" }, + "container-padding-inline-start": { "value": "0px" }, + "container-padding-inline-end": { "value": "0px" }, + "container-padding-block-start": { "value": "0px" }, + "container-padding-block-end": { "value": "0px" }, + "item-gap": { "value": "{dinkelland.size.2xs}" }, + "item-color": { "value": "{dinkelland.color.white.100}" }, + "item-background-color": { "value": "{dinkelland.color.primary}" }, + "item-border-radius": { "value": "0px" }, + "item-padding-inline-start": { "value": "15px" }, + "item-padding-inline-end": { "value": "15px" }, + "item-padding-block-start": { "value": "7.5px" }, + "item-padding-block-end": { "value": "7.5px" }, + "item-font-size": { "value": "17.6px" }, + "item-font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "item-font-family": { "value": "{utrecht.document.font-family}" }, + "item-border-width": {}, + "item-border-style": {}, + "item-border-color": {}, + "navigation-button-padding-inline-start": { "value": "{dinkelland.size.xs}" }, + "navigation-button-padding-inline-end": { "value": "{dinkelland.size.xs}" }, + "navigation-button-padding-block-start": { "value": "0px" }, + "navigation-button-padding-block-end": { "value": "0px" }, + "disabled-color": { "value": "{dinkelland.color.white.100}" }, + "disabled-background-color": { "value": "{dinkelland.color.lightgrey.96}" }, + "current-page-color": { "value": "{dinkelland.color.primary}" }, + "current-page-background-color": { "value": "{dinkelland.color.white.100}" }, + "current-page-font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "current-page-text-decoration": { "value": "unset" }, + "current-page-border-width": {}, + "current-page-border-style": {}, + "current-page-border-color": {}, + "page-hover-color": { "value": "{dinkelland.color.white.100}" }, + "page-hover-background-color": { "value": "{dinkelland.color.blue.31}" }, + "page-hover-text-decoration": { "value": "unset" }, + "page-hover-text-decoration-thickness": { "value": "0px" }, + "page-hover-border-width": {}, + "page-hover-border-style": {}, + "page-hover-border-color": {} + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/conduction/select.tokens.json b/proprietary/dinkelland-design-tokens/src/component/conduction/select.tokens.json new file mode 100644 index 000000000..5dc7fdd8d --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/conduction/select.tokens.json @@ -0,0 +1,30 @@ +{ + "conduction": { + "input-select": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "border": { "value": "{dinkelland.size.4xs} solid {dinkelland.color.grey.46}" }, + "border-focus": { "value": "unset" }, + "border-radius": { "value": "{utrecht.form-input.border-radius}" }, + "invalid-border-color": { "value": "{dinkelland.color.error}" }, + "padding-block-end": { "value": 0 }, + "padding-block-start": { "value": 0 }, + "hover": {}, + "focus": {}, + "list-option": { + "font-family": { "value": "{dinkelland.typography.lato.font-family}" }, + "background-color": {}, + "hover": { + "font-family": { "value": "{dinkelland.typography.lato.font-family}" }, + "color": {}, + "background-color": {} + } + }, + "placeholder": { + "color": { + "value": "{utrecht.form-input.placeholder.color}" + }, + "font-family": { "value": "{dinkelland.typography.lato.font-family}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/conduction/tabs.tokens.json b/proprietary/dinkelland-design-tokens/src/component/conduction/tabs.tokens.json new file mode 100644 index 000000000..dc1f935f6 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/conduction/tabs.tokens.json @@ -0,0 +1,73 @@ +{ + "conduction": { + "tabs": { + "tab": { + "background-color": { "value": "{dinkelland.color.blue.96}" }, + "color": { "value": "{dinkelland.color.grey.38}" }, + "border-width": { "value": "{dinkelland.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{dinkelland.color.blue.96}" }, + "border-bottom": { "value": "0" }, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "bottom": { "value": "0px" }, + "padding-block-start": { "value": "{dinkelland.size.xs}" }, + "padding-block-end": { "value": "{dinkelland.size.xs}" }, + "padding-inline-start": { "value": "{dinkelland.size.sm}" }, + "padding-inline-end": { "value": "{dinkelland.size.sm}" }, + "margin-inline-end": { "value": "{dinkelland.size.xs}" }, + "font-size": { "value": "{dinkelland.font-size.md}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "max-width": { "value": "unset" }, + "min-width": { "value": "160px" }, + "min-height": { "value": "61px" }, + "letter-spacing": {}, + "text-transform": {}, + "selected": { + "background-color": { "value": "transparent" }, + "color": { "value": "{dinkelland.color.blue.36}" }, + "box-shadow": { "value": "0px 1px 0px 0px {dinkelland.color.white.100}" }, + "border-width": { "value": "{dinkelland.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{dinkelland.color.grey.72}" }, + "border-bottom": { "value": "0" }, + "border-bottom-width": { "value": "0px" }, + "border-bottom-style": { "value": "unset" }, + "border-bottom-color": { "value": "unset" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "hover": { + "background-color": { "value": "transparent" }, + "color": { "value": "{dinkelland.color.blue.36}" }, + "text-decoration": { "value": "underline" } + } + }, + "hover": { + "background-color": { "value": "{dinkelland.color.blue.96}" }, + "color": { "value": "{dinkelland.color.blue.36}" }, + "text-decoration": { "value": "underline" } + }, + "list": { + "padding-inline-start": {}, + "margin-block-end": { "value": "0px" }, + "border-bottom-width": { "value": "1px" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{dinkelland.color.grey.72}" } + }, + "panel": { + "background-color": {}, + "padding-block-start": { "value": "{dinkelland.size.lg}" }, + "padding-block-end": { "value": "{dinkelland.size.lg}" }, + "padding-inline-start": { "value": "{dinkelland.size.lg}" }, + "padding-inline-end": { "value": "{dinkelland.size.lg}" }, + "border-width": { "value": "{dinkelland.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{dinkelland.color.grey.72}" }, + "border-top": { "value": "0" } + } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/alert.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/alert.tokens.json new file mode 100644 index 000000000..9c688c112 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/alert.tokens.json @@ -0,0 +1,46 @@ +{ + "utrecht": { + "alert": { + "background-color": { "value": "{dinkelland.color.alert-info-background}" }, + "border-color": {}, + "border-width": {}, + "color": { "value": "{dinkelland.color.alert-info}" }, + "padding-block-start": { "value": "{dinkelland.size.lg}" }, + "padding-block-end": { "value": "{dinkelland.size.lg}" }, + "padding-inline-start": { "value": "{dinkelland.size.lg}" }, + "padding-inline-end": { "value": "{dinkelland.size.lg}" }, + "margin-block-start": {}, + "margin-block-end": {}, + "warning": { + "background-color": { "value": "{dinkelland.color.alert-warning-background}" }, + "color": { "value": "{dinkelland.color.alert-warning}" }, + "border-color": {}, + "border-width": {} + }, + "error": { + "background-color": { "value": "{dinkelland.color.alert-error-background}" }, + "color": { "value": "{dinkelland.color.alert-error}" }, + "border-color": {}, + "border-width": {} + }, + "ok": { + "background-color": { "value": "{dinkelland.color.alert-succes-background}" }, + "color": { "value": "{dinkelland.color.alert-succes}" }, + "border-color": {}, + "border-width": {} + }, + "icon": { + "color": { "value": "{dinkelland.color.alert-info}" }, + "error": { + "color": { "value": "{dinkelland.color.alert-error}" } + }, + "warning": { + "color": { "value": "{dinkelland.color.alert-warning}" } + }, + "ok": { + "color": { "value": "{dinkelland.color.alert-succes}" } + } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/badge-counter.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/badge-counter.tokens.json new file mode 100644 index 000000000..0b5f73aff --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/badge-counter.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "badge-counter": { + "background-color": { "value": "{dinkelland.color.primary}" }, + "border-radius": { "value": "50%" }, + "color": { "value": "{dinkelland.color.white.100}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "padding-block": { "value": "{dinkelland.size.2xs}" }, + "padding-inline": { "value": "{dinkelland.size.2xs}" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/blockquote.tokens.json new file mode 100644 index 000000000..b5ad7f8a1 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/blockquote.tokens.json @@ -0,0 +1,27 @@ +{ + "utrecht": { + "blockquote": { + "background-color": { "value": "{dinkelland.color.grey.64}" }, + "color": { "value": "{dinkelland.color.grey.64}" }, + "margin-inline-start": { "value": "{dinkelland.size.xl}" }, + "margin-inline-end": { "value": "{dinkelland.size.xl}" }, + "margin-inline-block-start": {}, + "margin-inline-block-end": {}, + "font-size": {}, + "font-style": {}, + "font-family": {}, + "padding-inline-start": {}, + "padding-inline-end": {}, + "padding-inline-block-start": {}, + "padding-inline-block-end": {}, + "attribution": { + "color": {}, + "font-size": {} + }, + "content": { + "color": { "value": "{utrecht.document.color}" }, + "font-size": { "value": "{dinkelland.font-size.md}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/button.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/button.tokens.json new file mode 100644 index 000000000..5eab0e088 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/button.tokens.json @@ -0,0 +1,152 @@ +{ + "utrecht": { + "button": { + "background-color": { "value": "{dinkelland.color.blue.36}" }, + "border-color": { "value": "{dinkelland.color.blue.36}" }, + "border-radius": { "value": 0 }, + "border-width": { "value": "{dinkelland.size.3xs}" }, + "color": { "value": "{dinkelland.color.white.100}" }, + "font-family": { "value": "{dinkelland.typography.lato.font-family}" }, + "font-size": { "value": "inherit" }, + "font-weight": { "value": "inherit" }, + "inline-size": {}, + "letter-spacing": {}, + "line-height": {}, + "min-block-size": {}, + "min-inline-size": {}, + "padding-block-start": { "value": "{dinkelland.size.xs}" }, + "padding-block-end": { "value": "{dinkelland.size.xs}" }, + "padding-inline-start": { "value": "{dinkelland.size.xs}" }, + "padding-inline-end": { "value": "{dinkelland.size.xs}" }, + "text-transform": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "icon": { + "gap": { "value": "{dinkelland.size.xs}" }, + "size": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {}, + "scale": {} + }, + "hover": { + "background-color": { "value": "{dinkelland.color.black.13}" }, + "border-color": { "value": "{dinkelland.color.black.13}" }, + "color": { "value": "{dinkelland.color.white.100}" }, + "scale": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "primary-action": { + "background-color": { "value": "{dinkelland.color.blue.91}" }, + "border-color": { "value": "{dinkelland.color.blue.91}" }, + "border-width": { "value": "{dinkelland.size.3xs}" }, + "color": { "value": "{dinkelland.color.blue.26}" }, + "font-weight": { "value": "inherit" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{dinkelland.color.blue.91}" }, + "border-color": { "value": "{dinkelland.color.blue.91}" }, + "color": { "value": "{dinkelland.color.blue.26}" }, + "scale": {} + }, + "focus": { + "background-color": { "value": "{dinkelland.color.blue.91}" }, + "border-color": { "value": "{dinkelland.color.blue.91}" }, + "color": { "value": "{dinkelland.color.blue.26}" } + }, + "pressed": { + "background-color": { "value": "{dinkelland.color.blue.91}" }, + "border-color": { "value": "{dinkelland.color.blue.91}" }, + "color": { "value": "{dinkelland.color.blue.26}" } + } + }, + "secondary-action": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "border-color": { "value": "{dinkelland.color.primary}" }, + "border-width": { "value": "{dinkelland.size.3xs}" }, + "color": { "value": "{dinkelland.color.primary}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "border-color": { "value": "{dinkelland.color.primary-hover}" }, + "color": { "value": "{dinkelland.color.primary-hover}" } + }, + "focus": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "border-color": { "value": "{dinkelland.color.primary-hover}" }, + "color": { "value": "{dinkelland.color.primary-hover}" } + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "subtle": { + "background-color": {}, + "border-color": {}, + "border-width": {}, + "color": {}, + "font-weight": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/code.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/code.tokens.json new file mode 100644 index 000000000..05b046d00 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/code.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "code": { + "background-color": { "value": "{dinkelland.color.lightgrey.96}" }, + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{dinkelland.typography.monospace.font-family}" }, + "font-size": { "value": "inherit" }, + "line-height": {} + }, + "code-block": { + "background-color": { "value": "{dinkelland.color.lightgrey.96}" }, + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{dinkelland.typography.monospace.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.md}" }, + "line-height": { "value": "{dinkelland.size.lg}" }, + "margin-block-start": { "value": "{dinkelland.size.md}" }, + "margin-block-end": { "value": "{dinkelland.size.md}" }, + "margin-inline-start": { "value": 0 }, + "margin-inline-end": { "value": 0 }, + "padding-block-start": { "value": "{dinkelland.size.md}" }, + "padding-block-end": { "value": "{dinkelland.size.md}" }, + "padding-inline-start": { "value": "{dinkelland.size.md}" }, + "padding-inline-end": { "value": "{dinkelland.size.md}" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/document.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/document.tokens.json new file mode 100644 index 000000000..cb330f17c --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/document.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "document": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "color": { "value": "{dinkelland.color.black.20}" }, + "font-family": { "value": "{dinkelland.typography.lato.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.md}" }, + "font-weight": {}, + "line-height": {} + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json new file mode 100644 index 000000000..99f8495ef --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "alert": { + "icon": { + "gap": { "value": "{dinkelland.size.xs}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json new file mode 100644 index 000000000..bbcf0468d --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "badge-counter": { + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-style": {}, + "text-decoration": { "value": "none" }, + "min-block-size": {}, + "min-inline-size": {} + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json new file mode 100644 index 000000000..ff887a705 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "form-input": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{dinkelland.color.grey.42}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": { "value": "{dinkelland.color.blue.48}" }, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json new file mode 100644 index 000000000..e49ecc895 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json @@ -0,0 +1,7 @@ +{ + "utrecht": { + "icon": { + "gap": { "value": "{dinkelland.size.xs}" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json new file mode 100644 index 000000000..2a6e50f8e --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "page-footer": { + "min-height": { "value": "300px" }, + "logo": { + "max-height": { "value": "100px" }, + "max-width": { "value": "250px" } + }, + "background-position": {} + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json new file mode 100644 index 000000000..97abc989d --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "logo": { + "max-height": {}, + "max-width": { "value": "150px" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json new file mode 100644 index 000000000..d33a12758 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json @@ -0,0 +1,24 @@ +{ + "utrecht": { + "table": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "header": { + "border-block-end-color": { "value": "{dinkelland.color.blue.94}" }, + "border-block-end-width": { "value": "{dinkelland.size.4xs}" }, + "font-family": { "value": "{dinkelland.typography.montserrat.font-family}" } + }, + "row": { + "hover": { + "background-color": { "value": "{dinkelland.color.grey.94}" }, + "color": { "value": "{dinkelland.color.green.24}" } + } + }, + "body": { + "border": { "value": "{dinkelland.size.4xs} solid {dinkelland.color.blue.94}" } + }, + "caption": { + "font-style": {} + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json new file mode 100644 index 000000000..6ea3e95c2 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "textbox": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{dinkelland.color.grey.42}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": { "value": "{dinkelland.color.blue.48}" }, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/form-input.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/form-input.tokens.json new file mode 100644 index 000000000..d5c5ed6b2 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/form-input.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "form-input": { + "border-bottom-width": {}, + "border-color": { "value": "{dinkelland.color.grey.46}" }, + "border-radius": { "value": "0px" }, + "border-width": { "value": "{dinkelland.size.4xs}" }, + "color": { "value": "{dinkelland.color.black.33}" }, + "font-family": { "value": "{dinkelland.typography.lato.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{dinkelland.size.xs}" }, + "padding-block-start": { "value": "{dinkelland.size.xs}" }, + "padding-inline-end": { "value": "{dinkelland.size.sm}" }, + "padding-inline-start": { "value": "{dinkelland.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/heading.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/heading.tokens.json new file mode 100644 index 000000000..06d5a2c78 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/heading.tokens.json @@ -0,0 +1,49 @@ +{ + "utrecht": { + "heading-1": { + "color": { "value": "{dinkelland.color.black.13}" }, + "font-family": { "value": "{dinkelland.typography.montserrat.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.2xl}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{dinkelland.size.sm}" }, + "margin-block-start": { "value": "{dinkelland.size.sm}" } + }, + "heading-2": { + "color": { "value": "{dinkelland.color.black.13}" }, + "font-family": { "value": "{dinkelland.typography.montserrat.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.xl}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{dinkelland.size.xs}" }, + "margin-block-start": { "value": 0 } + }, + "heading-3": { + "color": { "value": "{dinkelland.color.black.13}" }, + "font-family": { "value": "{dinkelland.typography.montserrat.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.lg}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{dinkelland.size.2xs}" }, + "margin-block-start": { "value": 0 } + }, + "heading-4": { + "color": { "value": "{dinkelland.color.black.13}" }, + "font-family": { "value": "{dinkelland.typography.montserrat.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.md}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": 0 } + }, + "heading-5": { + "color": { "value": "{dinkelland.color.black.13}" }, + "font-family": { "value": "{dinkelland.typography.montserrat.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.md}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.light}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": 0 } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/icon.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/icon.tokens.json new file mode 100644 index 000000000..98efefafa --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/icon.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "icon": { + "color": {}, + "size": {}, + "inset-block-start": {}, + "baseline": { + "inset-block-start": {} + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/link.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/link.tokens.json new file mode 100644 index 000000000..07e04e6ec --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/link.tokens.json @@ -0,0 +1,33 @@ +{ + "utrecht": { + "link": { + "color": { "value": "{dinkelland.color.primary}" }, + "text-decoration": { "value": "none" }, + "text-decoration-color": { "value": "unset" }, + "text-decoration-thickness": { "value": 0 }, + "text-underline-offset": { "value": "{dinkelland.size.3xs}" }, + "active": { + "color": {} + }, + "focus": { + "color": {}, + "text-decoration": {}, + "text-decoration-thickness": {} + }, + "hover": { + "color": { "value": "{dinkelland.color.primary-hover}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "{dinkelland.size.4xs}" } + }, + "placeholder": { + "color": {} + }, + "visited": { + "color": { "value": "{dinkelland.color.primary}" } + }, + "icon": { + "size": { "value": "{dinkelland.size.md}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/list.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/list.tokens.json new file mode 100644 index 000000000..3da8c014a --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/list.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "ordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{dinkelland.size.sm}" }, + "margin-block-end": { "value": "{dinkelland.size.sm}" }, + "padding-inline-start": { "value": "{dinkelland.size.xl}" }, + "item": { + "margin-block-start": { "value": "{dinkelland.size.2xs}" }, + "margin-block-end": { "value": "{dinkelland.size.2xs}" }, + "padding-inline-start": { "value": "1ch" } + } + }, + "unordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{dinkelland.size.md}" }, + "margin-block-end": { "value": 0 }, + "padding-inline-start": { "value": "2ch" }, + "item": { + "margin-block-start": { "value": "{dinkelland.size.xs}" }, + "margin-block-end": { "value": "{dinkelland.size.xs}" }, + "padding-inline-start": { "value": "1ch" } + }, + "marker": { + "color": { "value": "{utrecht.document.color}" } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/page-footer.tokens.json new file mode 100644 index 000000000..6b17108fd --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/page-footer.tokens.json @@ -0,0 +1,15 @@ +{ + "utrecht": { + "page-footer": { + "background-color": { "value": "unset" }, + "background-image": { + "value": "url(https://www.dinkelland.nl/sites/all/themes/dinkelland/dist/assets/img/footer-bg.svg)" + }, + "color": { "value": "{dinkelland.color.white.100}" }, + "padding-inline-end": { "value": "{dinkelland.size.sm}" }, + "padding-inline-start": { "value": "{dinkelland.size.sm}" }, + "padding-block-end": { "value": "{dinkelland.size.2xl}" }, + "padding-block-start": { "value": "{dinkelland.size.2xl}" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/page-header.tokens.json new file mode 100644 index 000000000..d5f94f674 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "color": { "value": "{dinkelland.color.black.20}" }, + "padding-block-start": { "value": "{dinkelland.size.sm}" }, + "padding-block-end": { "value": "{dinkelland.size.sm}" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/page.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/page.tokens.json new file mode 100644 index 000000000..33d2a0839 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/page.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "page": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{dinkelland.size.lg}" }, + "margin-inline-end": { "value": "{dinkelland.size.lg}" }, + "max-inline-size": { "value": "1140px" } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/paragraph.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/paragraph.tokens.json new file mode 100644 index 000000000..5f73a0c86 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/paragraph.tokens.json @@ -0,0 +1,25 @@ +{ + "utrecht": { + "paragraph": { + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{dinkelland.typography.lato.font-family}" }, + "font-size": { "value": "{dinkelland.font-size.md}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.normal}" }, + "line-height": { "value": "1.5em" }, + "margin-block-start": { "value": 0 }, + "margin-block-end": { "value": 0 }, + "lead": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + }, + "small": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/surface.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/surface.tokens.json new file mode 100644 index 000000000..a2d21c297 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/surface.tokens.json @@ -0,0 +1,8 @@ +{ + "utrecht": { + "surface": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "color": {} + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/table.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/table.tokens.json new file mode 100644 index 000000000..5a814b8ac --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/table.tokens.json @@ -0,0 +1,60 @@ +{ + "utrecht": { + "table": { + "border-color": {}, + "border-width": {}, + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": "{dinkelland.size.md}" }, + "caption": { + "font-weight": {}, + "font-family": {}, + "font-size": {}, + "color": {}, + "line-height": {}, + "text-align": {}, + "margin-block-end": {} + }, + "header": { + "font-weight": { "value": "{dinkelland.typography.font-weight.bold}" }, + "background-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" }, + "border-block-end-color": {}, + "border-block-end-width": {} + }, + "header-cell": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{dinkelland.typography.font-weight.bold}" }, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" } + }, + "cell": { + "line-height": {}, + "padding-block-end": { "value": "{dinkelland.size.md}" }, + "padding-block-start": { "value": "{dinkelland.size.md}" }, + "padding-inline-end": { "value": "{dinkelland.size.md}" }, + "padding-inline-start": { "value": "{dinkelland.size.md}" }, + "icon": { + "size": {} + } + }, + "row": { + "border-block-end-color": { "value": "{dinkelland.color.lightgrey.89}" }, + "border-block-end-width": { "value": "{dinkelland.size.4xs}" }, + "padding-inline-end": {}, + "padding-inline-start": {}, + "alternate-odd": { + "background-color": { "value": "{dinkelland.color.white.100}" }, + "color": {} + }, + "alternate-even": { + "background-color": { "value": "{dinkelland.color.blue.96}" }, + "color": {} + } + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/component/utrecht/textbox.tokens.json b/proprietary/dinkelland-design-tokens/src/component/utrecht/textbox.tokens.json new file mode 100644 index 000000000..8a11394d0 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/component/utrecht/textbox.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "textbox": { + "border-bottom-width": {}, + "border-color": { "value": "{dinkelland.color.grey.46}" }, + "border-radius": { "value": "0px" }, + "border-width": { "value": "{dinkelland.size.4xs}" }, + "color": { "value": "{dinkelland.color.black.33}" }, + "font-family": { "value": "{dinkelland.typography.lato.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{dinkelland.size.xs}" }, + "padding-block-start": { "value": "{dinkelland.size.xs}" }, + "padding-inline-end": { "value": "{dinkelland.size.sm}" }, + "padding-inline-start": { "value": "{dinkelland.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/dinkelland-design-tokens/src/config.json b/proprietary/dinkelland-design-tokens/src/config.json new file mode 100644 index 000000000..6c3c74952 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/config.json @@ -0,0 +1,48 @@ +{ + "fullName": "Gemeente Dinkelland", + "name": "Dinkelland", + "prefix": "dinkelland", + "npm": "@nl-design-system-unstable/dinkelland-design-tokens", + "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" + ] +} diff --git a/proprietary/dinkelland-design-tokens/src/font.js b/proprietary/dinkelland-design-tokens/src/font.js new file mode 100644 index 000000000..411c6eff2 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/font.js @@ -0,0 +1,10 @@ +import '@fontsource/lato/400.css'; +import '@fontsource/lato/400-italic.css'; +import '@fontsource/lato/700.css'; +import '@fontsource/lato/700-italic.css'; +import '@fontsource/montserrat/300.css'; +import '@fontsource/montserrat/300-italic.css'; +import '@fontsource/montserrat/400.css'; +import '@fontsource/montserrat/400-italic.css'; +import '@fontsource/montserrat/700.css'; +import '@fontsource/montserrat/700-italic.css'; diff --git a/proprietary/dinkelland-design-tokens/src/index.scss b/proprietary/dinkelland-design-tokens/src/index.scss new file mode 100644 index 000000000..59ac9e2b4 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/src/index.scss @@ -0,0 +1,7 @@ +/** + * @license SEE LICENSE.md + * Copyright (c) 2021 NL Design System Community + * All rights reserved + */ + +@import "./design-tokens.css"; diff --git a/proprietary/dinkelland-design-tokens/style-dictionary.config.js b/proprietary/dinkelland-design-tokens/style-dictionary.config.js new file mode 100644 index 000000000..d43b0fd25 --- /dev/null +++ b/proprietary/dinkelland-design-tokens/style-dictionary.config.js @@ -0,0 +1,6 @@ +const config = require('./src/config.json'); +const { createConfig } = require('../../style-dictionary-config'); + +module.exports = createConfig({ + selector: `.${config.prefix}-theme`, +}); diff --git a/proprietary/epe-design-tokens/LICENSE.md b/proprietary/epe-design-tokens/LICENSE.md new file mode 100644 index 000000000..d0737e5d4 --- /dev/null +++ b/proprietary/epe-design-tokens/LICENSE.md @@ -0,0 +1,17 @@ +# Auteursrecht Gemeente Epe + +Copyright (c) 2023 Gemeente Epe + +## Logo en huisstijl + +Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Gemeente Epe. + +Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Gemeente Epe 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 Gemeente Epe. diff --git a/proprietary/epe-design-tokens/README.md b/proprietary/epe-design-tokens/README.md new file mode 100644 index 000000000..0d6e2e3c0 --- /dev/null +++ b/proprietary/epe-design-tokens/README.md @@ -0,0 +1,3 @@ +# NL Design System design tokens Gemeente Epe + +These tokens have been obtained by analysing the [website of Gemeente Epe](https://www.epe.nl/). diff --git a/proprietary/epe-design-tokens/documentation/color.stories.mdx b/proprietary/epe-design-tokens/documentation/color.stories.mdx new file mode 100644 index 000000000..746f03e58 --- /dev/null +++ b/proprietary/epe-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"; + + + +# Color + +## Find a color + + + +## Color palette + + diff --git a/proprietary/epe-design-tokens/documentation/components.stories.mdx b/proprietary/epe-design-tokens/documentation/components.stories.mdx new file mode 100644 index 000000000..0937db7f1 --- /dev/null +++ b/proprietary/epe-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"; + + + +# Components + + + + diff --git a/proprietary/epe-design-tokens/documentation/design-tokens.stories.mdx b/proprietary/epe-design-tokens/documentation/design-tokens.stories.mdx new file mode 100644 index 000000000..dce92c263 --- /dev/null +++ b/proprietary/epe-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"; + + + +# Design Tokens + + token.path[0] !== config.prefix)}> + +## Proprietary Design Tokens + + token.path[0] === config.prefix)}> diff --git a/proprietary/epe-design-tokens/documentation/readme.stories.mdx b/proprietary/epe-design-tokens/documentation/readme.stories.mdx new file mode 100644 index 000000000..e1d67fa5d --- /dev/null +++ b/proprietary/epe-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"; + + + +{markdown} diff --git a/proprietary/epe-design-tokens/package.json b/proprietary/epe-design-tokens/package.json new file mode 100644 index 000000000..87a4a0cdb --- /dev/null +++ b/proprietary/epe-design-tokens/package.json @@ -0,0 +1,41 @@ +{ + "version": "1.0.0-alpha.1", + "author": "Community for NL Design System", + "description": "NL Design System design tokens for Gemeente Epe", + "website": "https://www.epe.nl/", + "keywords": [ + "nl-design-system", + "conduction" + ], + "license": "SEE LICENSE IN LICENSE.md", + "name": "@nl-design-system-unstable/epe-design-tokens", + "private": false, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git+ssh", + "url": "git@github.com:nl-design-system/themes.git" + }, + "scripts": { + "clean": "rimraf -rf dist/", + "prebuild": "npm run clean", + "watch": "npm-run-all watch:**", + "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'", + "build": "npm-run-all build:**", + "build:scss": "sass --no-source-map src/:dist/", + "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js" + }, + "devDependencies": { + "@fontsource/source-sans-pro": "5.0.8", + "@nl-design-system-unstable/theme-toolkit": "workspace:*", + "chokidar-cli": "3.0.0", + "npm-run-all": "4.1.5", + "rimraf": "3.0.2", + "style-dictionary": "3.8.0" + }, + "bugs": { + "url": "https://github.com/ConductionNL/conduction-theme/issues" + }, + "homepage": "https://github.com/ConductionNL/conduction-theme#readme" +} diff --git a/proprietary/epe-design-tokens/src/brand/epe/color.tokens.json b/proprietary/epe-design-tokens/src/brand/epe/color.tokens.json new file mode 100644 index 000000000..cdf111cb2 --- /dev/null +++ b/proprietary/epe-design-tokens/src/brand/epe/color.tokens.json @@ -0,0 +1,99 @@ +{ + "epe": { + "color": { + "primary": { + "value": "{epe.color.light-blue.31}" + }, + "primary-hover": { + "value": "{epe.color.light-blue.21}" + }, + "error": { "value": "#dc3545" }, + "alert-error": { "value": "{epe.color.black.19}" }, + "alert-error-background": { "value": "#f8d7da" }, + "warning": { "value": "#ffc107" }, + "alert-warning": { "value": "{epe.color.black.19}" }, + "alert-warning-background": { "value": "#fff3cd" }, + "succes": { "value": "#28a745" }, + "alert-succes": { "value": "{epe.color.black.19}" }, + "alert-succes-background": { "value": "#d4edda" }, + "info": { "value": "{epe.color.light-blue.31}" }, + "alert-info": { "value": "{epe.color.black.19}" }, + "alert-info-background": { "value": "#cce5ff" }, + "light-blue": { + "21": { + "value": "#01476a" + }, + "31": { + "value": "#01699d", + "comment": "Base/Light-Blue" + } + }, + "yellow": { + "42": { + "value": "#d6a100", + "comment": "Base/Yellow" + }, + "90": { + "value": "#fdf1ce" + } + }, + "blue": { + "26": { + "value": "#004785" + }, + "31": { + "value": "#00549e", + "comment": "Base/Blue" + }, + "83": { + "value": "#c1cce6" + } + }, + "lightgrey": { + "41": { + "value": "#696969" + }, + "96": { + "value": "#f5f5f5", + "comment": "Base/LightGrey" + } + }, + "grey": { + "34": { + "value": "#575757", + "comment": "Base/Grey" + }, + "46": { + "value": "#757575" + }, + "90": { + "value": "#e6e6e6" + } + }, + "white": { + "98": { + "value": "#fafafa" + }, + "100": { + "value": "#ffffff", + "comment": "Base/White" + } + }, + "purple": { + "45": { + "value": "#7337ae", + "comment": "Base/Purple" + } + }, + "black": { + "0": { + "value": "#000000", + "comment": "Base/Black" + }, + "19": { + "value": "#2e2e33" + } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/brand/epe/font-size.tokens.json b/proprietary/epe-design-tokens/src/brand/epe/font-size.tokens.json new file mode 100644 index 000000000..03341b31f --- /dev/null +++ b/proprietary/epe-design-tokens/src/brand/epe/font-size.tokens.json @@ -0,0 +1,17 @@ +{ + "epe": { + "font-size": { + "4xs": { "value": "5px" }, + "3xs": { "value": "8px" }, + "2xs": { "value": "10px" }, + "xs": { "value": "12px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "20px" }, + "xl": { "value": "24px" }, + "2xl": { "value": "32px" }, + "3xl": { "value": "48px" }, + "4xl": { "value": "58px" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/brand/epe/size.tokens.json b/proprietary/epe-design-tokens/src/brand/epe/size.tokens.json new file mode 100644 index 000000000..0edc4efd4 --- /dev/null +++ b/proprietary/epe-design-tokens/src/brand/epe/size.tokens.json @@ -0,0 +1,17 @@ +{ + "epe": { + "size": { + "4xs": { "value": "1px" }, + "3xs": { "value": "2px" }, + "2xs": { "value": "4px" }, + "xs": { "value": "8px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "24px" }, + "xl": { "value": "32px" }, + "2xl": { "value": "48px" }, + "3xl": { "value": "72px" }, + "4xl": { "value": "96px" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/brand/epe/typography.tokens.json b/proprietary/epe-design-tokens/src/brand/epe/typography.tokens.json new file mode 100644 index 000000000..400016674 --- /dev/null +++ b/proprietary/epe-design-tokens/src/brand/epe/typography.tokens.json @@ -0,0 +1,40 @@ +{ + "epe": { + "typography": { + "source-sans": { + "font-family": { + "value": "\"Source Sans\"" + } + }, + "monospace": { + "font-family": { + "value": "Monospace, \"Lucida Console\"" + } + }, + "font-weight": { + "bold": { + "value": "700" + }, + "normal": { + "value": "400" + }, + "light": { + "value": "100" + } + }, + "scale": { + "4xs": { "value": "{epe.font-size.4xs}" }, + "3xs": { "value": "{epe.font-size.3xs}" }, + "2xs": { "value": "{epe.font-size.2xs}" }, + "xs": { "value": "{epe.font-size.xs}" }, + "sm": { "value": "{epe.font-size.sm}" }, + "md": { "value": "{epe.font-size.md}" }, + "lg": { "value": "{epe.font-size.lg}" }, + "xl": { "value": "{epe.font-size.xl}" }, + "2xl": { "value": "{epe.font-size.2xl}" }, + "3xl": { "value": "{epe.font-size.3xl}" }, + "4xl": { "value": "{epe.font-size.4xl}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/common/utrecht/action.tokens.json b/proprietary/epe-design-tokens/src/common/utrecht/action.tokens.json new file mode 100644 index 000000000..d226101fc --- /dev/null +++ b/proprietary/epe-design-tokens/src/common/utrecht/action.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "action": { + "busy": { "cursor": { "value": "wait" } }, + "disabled": { "cursor": { "value": "not-allowed" } }, + "submit": { "cursor": { "value": "pointer" } } + } + } +} diff --git a/proprietary/epe-design-tokens/src/common/utrecht/space.tokens.json b/proprietary/epe-design-tokens/src/common/utrecht/space.tokens.json new file mode 100644 index 000000000..5e70b3657 --- /dev/null +++ b/proprietary/epe-design-tokens/src/common/utrecht/space.tokens.json @@ -0,0 +1,28 @@ +{ + "utrecht": { + "space": { + "block": { + "3xs": { "value": "{epe.size.3xs}" }, + "2xs": { "value": "{epe.size.2xs}" }, + "xs": { "value": "{epe.size.xs}" }, + "sm": { "value": "{epe.size.sm}" }, + "md": { "value": "{epe.size.md}" }, + "lg": { "value": "{epe.size.lg}" }, + "xl": { "value": "{epe.size.xl}" }, + "2xl": { "value": "{epe.size.2xl}" }, + "3xl": { "value": "{epe.size.3xl}" } + }, + "inline": { + "3xs": { "value": "{epe.size.3xs}" }, + "2xs": { "value": "{epe.size.2xs}" }, + "xs": { "value": "{epe.size.xs}" }, + "sm": { "value": "{epe.size.sm}" }, + "md": { "value": "{epe.size.md}" }, + "lg": { "value": "{epe.size.lg}" }, + "xl": { "value": "{epe.size.xl}" }, + "2xl": { "value": "{epe.size.2xl}" }, + "3xl": { "value": "{epe.size.3xl}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/conduction/card-header.tokens.json b/proprietary/epe-design-tokens/src/component/conduction/card-header.tokens.json new file mode 100644 index 000000000..8b77b01f0 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/conduction/card-header.tokens.json @@ -0,0 +1,26 @@ +{ + "conduction": { + "card-header": { + "background-color": {}, + "border-bottom-width": { "value": "{epe.size.4xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{epe.color.yellow.42}" }, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-width": { "value": "{epe.size.4xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{epe.color.blue.31}" } + }, + "title": { + "color": { "value": "{epe.color.blue.31}" } + }, + "date": { + "color": { "value": "{utrecht.document.color}" }, + "font-size": { "value": "{epe.font-size.sm}" }, + "font-weight": { "value": "{epe.typography.font-weight.light}" }, + "margin-block-end": { "value": "{epe.size.xs}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/conduction/card-wrapper.tokens.json b/proprietary/epe-design-tokens/src/component/conduction/card-wrapper.tokens.json new file mode 100644 index 000000000..d0443a657 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/conduction/card-wrapper.tokens.json @@ -0,0 +1,25 @@ +{ + "conduction": { + "card-wrapper": { + "background-color": { "value": "{epe.color.white.100}" }, + "border-color": {}, + "border-style": {}, + "border-width": {}, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {}, + "border-radius": { "value": "0px" }, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": { "value": "{epe.color.yellow.90}" }, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {} + }, + "padding-inline-end": { "value": "{epe.size.md}" }, + "padding-inline-start": { "value": "{epe.size.md}" }, + "padding-block-end": { "value": "{epe.size.md}" }, + "padding-block-start": { "value": "{epe.size.md}" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/conduction/pagination.tokens.json b/proprietary/epe-design-tokens/src/component/conduction/pagination.tokens.json new file mode 100644 index 000000000..2986f6ddb --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/conduction/pagination.tokens.json @@ -0,0 +1,45 @@ +{ + "conduction": { + "pagination": { + "container-background-color": { "value": "{epe.color.grey.90}" }, + "container-padding-inline-start": { "value": "10px" }, + "container-padding-inline-end": { "value": "10px" }, + "container-padding-block-start": { "value": "10px" }, + "container-padding-block-end": { "value": "10px" }, + "item-gap": { "value": "{epe.size.2xs}" }, + "item-color": { "value": "{epe.color.blue.31}" }, + "item-background-color": { "value": "{epe.color.white.98}" }, + "item-border-radius": { "value": "0px" }, + "item-padding-inline-start": { "value": "{epe.size.sm}" }, + "item-padding-inline-end": { "value": "{epe.size.sm}" }, + "item-padding-block-start": { "value": "{epe.size.xs}" }, + "item-padding-block-end": { "value": "{epe.size.xs}" }, + "item-font-size": { "value": "{utrecht.document.font-size}" }, + "item-font-weight": { "value": "{epe.typography.font-weight.normal}" }, + "item-font-family": { "value": "{utrecht.document.font-family}" }, + "item-border-width": {}, + "item-border-style": {}, + "item-border-color": {}, + "navigation-button-padding-inline-start": { "value": "{epe.size.xs}" }, + "navigation-button-padding-inline-end": { "value": "{epe.size.xs}" }, + "navigation-button-padding-block-start": { "value": "0px" }, + "navigation-button-padding-block-end": { "value": "0px" }, + "disabled-color": { "value": "{epe.color.blue.83}" }, + "disabled-background-color": { "value": "{epe.color.grey.90}" }, + "current-page-color": { "value": "{epe.color.white.98}" }, + "current-page-background-color": { "value": "{epe.color.blue.31}" }, + "current-page-font-weight": { "value": "{epe.typography.font-weight.normal}" }, + "current-page-text-decoration": { "value": "unset" }, + "current-page-border-width": {}, + "current-page-border-style": {}, + "current-page-border-color": {}, + "page-hover-color": { "value": "{epe.color.blue.31}" }, + "page-hover-background-color": { "value": "{epe.color.blue.83}" }, + "page-hover-text-decoration": { "value": "underline" }, + "page-hover-text-decoration-thickness": { "value": "0.15rem" }, + "page-hover-border-width": {}, + "page-hover-border-style": {}, + "page-hover-border-color": {} + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/conduction/select.tokens.json b/proprietary/epe-design-tokens/src/component/conduction/select.tokens.json new file mode 100644 index 000000000..a8edbe2a6 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/conduction/select.tokens.json @@ -0,0 +1,30 @@ +{ + "conduction": { + "input-select": { + "background-color": { "value": "{epe.color.white.100}" }, + "border": { "value": "{epe.size.4xs} solid {epe.color.lightgrey.41}" }, + "border-focus": { "value": "unset" }, + "border-radius": { "value": "{utrecht.form-input.border-radius}" }, + "invalid-border-color": { "value": "{epe.color.error}" }, + "padding-block-end": { "value": 0 }, + "padding-block-start": { "value": 0 }, + "hover": {}, + "focus": {}, + "list-option": { + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "background-color": {}, + "hover": { + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "color": {}, + "background-color": {} + } + }, + "placeholder": { + "color": { + "value": "{utrecht.form-input.placeholder.color}" + }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/conduction/tabs.tokens.json b/proprietary/epe-design-tokens/src/component/conduction/tabs.tokens.json new file mode 100644 index 000000000..696d5275e --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/conduction/tabs.tokens.json @@ -0,0 +1,73 @@ +{ + "conduction": { + "tabs": { + "tab": { + "background-color": { "value": "transparent" }, + "color": { "value": "{epe.color.black.19}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-bottom": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "bottom": { "value": "-2px" }, + "padding-block-start": { "value": "{epe.size.xs}" }, + "padding-block-end": { "value": "{epe.size.xs}" }, + "padding-inline-start": { "value": "{epe.size.sm}" }, + "padding-inline-end": { "value": "{epe.size.sm}" }, + "margin-inline-end": {}, + "font-size": { "value": "{epe.font-size.md}" }, + "font-weight": { "value": "{epe.typography.font-weight.normal}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "max-width": { "value": "unset" }, + "min-width": { "value": "160px" }, + "min-height": { "value": "61px" }, + "letter-spacing": {}, + "text-transform": {}, + "selected": { + "background-color": { "value": "transparent" }, + "color": { "value": "{epe.color.black.19}" }, + "box-shadow": {}, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-bottom": {}, + "border-bottom-width": { "value": "{epe.size.3xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{epe.color.primary}" }, + "font-weight": { "value": "{epe.typography.font-weight.bold}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "hover": { + "background-color": {}, + "color": {}, + "text-decoration": {} + } + }, + "hover": { + "background-color": {}, + "color": {}, + "text-decoration": {} + }, + "list": { + "padding-inline-start": { "value": "0px" }, + "margin-block-end": { "value": "0px" }, + "border-bottom-width": { "value": "{epe.size.3xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{epe.color.grey.90}" } + }, + "panel": { + "background-color": {}, + "padding-block-start": { "value": "{epe.size.lg}" }, + "padding-block-end": { "value": "{epe.size.lg}" }, + "padding-inline-start": { "value": "{epe.size.lg}" }, + "padding-inline-end": { "value": "{epe.size.lg}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-top": {} + } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/alert.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/alert.tokens.json new file mode 100644 index 000000000..675b4c4f0 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/alert.tokens.json @@ -0,0 +1,46 @@ +{ + "utrecht": { + "alert": { + "background-color": { "value": "{epe.color.alert-info-background}" }, + "border-color": {}, + "border-width": {}, + "color": { "value": "{epe.color.alert-info}" }, + "padding-block-start": { "value": "{epe.size.lg}" }, + "padding-block-end": { "value": "{epe.size.lg}" }, + "padding-inline-start": { "value": "{epe.size.lg}" }, + "padding-inline-end": { "value": "{epe.size.lg}" }, + "margin-block-start": {}, + "margin-block-end": {}, + "warning": { + "background-color": { "value": "{epe.color.alert-warning-background}" }, + "color": { "value": "{epe.color.alert-warning}" }, + "border-color": {}, + "border-width": {} + }, + "error": { + "background-color": { "value": "{epe.color.alert-error-background}" }, + "color": { "value": "{epe.color.alert-error}" }, + "border-color": {}, + "border-width": {} + }, + "ok": { + "background-color": { "value": "{epe.color.alert-succes-background}" }, + "color": { "value": "{epe.color.alert-succes}" }, + "border-color": {}, + "border-width": {} + }, + "icon": { + "color": { "value": "{epe.color.alert-info}" }, + "error": { + "color": { "value": "{epe.color.alert-error}" } + }, + "warning": { + "color": { "value": "{epe.color.alert-warning}" } + }, + "ok": { + "color": { "value": "{epe.color.alert-succes}" } + } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/badge-counter.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/badge-counter.tokens.json new file mode 100644 index 000000000..6b222c3d9 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/badge-counter.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "badge-counter": { + "background-color": { "value": "{epe.color.primary}" }, + "border-radius": { "value": "50%" }, + "color": { "value": "{epe.color.white.100}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{epe.typography.font-weight.normal}" }, + "padding-block": { "value": "{epe.size.2xs}" }, + "padding-inline": { "value": "{epe.size.2xs}" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/blockquote.tokens.json new file mode 100644 index 000000000..f5f7e22d1 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/blockquote.tokens.json @@ -0,0 +1,27 @@ +{ + "utrecht": { + "blockquote": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{epe.size.xl}" }, + "margin-inline-end": { "value": "{epe.size.xl}" }, + "margin-inline-block-start": {}, + "margin-inline-block-end": {}, + "font-size": {}, + "font-style": {}, + "font-family": {}, + "padding-inline-start": {}, + "padding-inline-end": {}, + "padding-inline-block-start": {}, + "padding-inline-block-end": {}, + "attribution": { + "color": {}, + "font-size": {} + }, + "content": { + "color": { "value": "{epe.color.black.19}" }, + "font-size": { "value": "{epe.font-size.md}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/button.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/button.tokens.json new file mode 100644 index 000000000..c80e52e79 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/button.tokens.json @@ -0,0 +1,152 @@ +{ + "utrecht": { + "button": { + "background-color": { "value": "{epe.color.blue.31}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "border-radius": { "value": "{epe.size.2xs}" }, + "border-width": { "value": "3px" }, + "color": { "value": "{epe.color.white.100}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "inherit" }, + "font-weight": { "value": "500" }, + "inline-size": {}, + "letter-spacing": {}, + "line-height": {}, + "min-block-size": {}, + "min-inline-size": {}, + "padding-block-start": { "value": "{epe.size.xs}" }, + "padding-block-end": { "value": "{epe.size.xs}" }, + "padding-inline-start": { "value": "{epe.size.xs}" }, + "padding-inline-end": { "value": "{epe.size.xs}" }, + "text-transform": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "icon": { + "gap": { "value": "{epe.size.xs}" }, + "size": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {}, + "scale": {} + }, + "hover": { + "background-color": { "value": "{epe.color.blue.26}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "color": { "value": "{epe.color.white.100}" }, + "scale": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "primary-action": { + "background-color": { "value": "{epe.color.blue.31}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "border-width": { "value": "{epe.size.3xs}" }, + "color": { "value": "{epe.color.white.100}" }, + "font-weight": { "value": "500" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{epe.color.blue.26}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "color": { "value": "{epe.color.white.100}" }, + "scale": {} + }, + "focus": { + "background-color": { "value": "{epe.color.blue.26}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "color": { "value": "{epe.color.white.100}" } + }, + "pressed": { + "background-color": { "value": "{epe.color.blue.26}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "color": { "value": "{epe.color.white.100}" } + } + }, + "secondary-action": { + "background-color": { "value": "{epe.color.white.100}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "border-width": { "value": "{epe.size.3xs}" }, + "color": { "value": "{epe.color.blue.31}" }, + "font-weight": { "value": "500" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{epe.color.white.100}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "color": { "value": "{epe.color.blue.31}" } + }, + "focus": { + "background-color": { "value": "{epe.color.white.100}" }, + "border-color": { "value": "{epe.color.blue.31}" }, + "color": { "value": "{epe.color.blue.31}" } + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "subtle": { + "background-color": {}, + "border-color": {}, + "border-width": {}, + "color": {}, + "font-weight": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/code.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/code.tokens.json new file mode 100644 index 000000000..bd3e1f744 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/code.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "code": { + "background-color": { "value": "{epe.color.lightgrey.96}" }, + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.monospace.font-family}" }, + "font-size": { "value": "inherit" }, + "line-height": {} + }, + "code-block": { + "background-color": { "value": "{epe.color.lightgrey.96}" }, + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.monospace.font-family}" }, + "font-size": { "value": "{epe.font-size.md}" }, + "line-height": { "value": "{epe.size.lg}" }, + "margin-block-start": { "value": "{epe.size.md}" }, + "margin-block-end": { "value": "{epe.size.md}" }, + "margin-inline-start": { "value": 0 }, + "margin-inline-end": { "value": 0 }, + "padding-block-start": { "value": "{epe.size.md}" }, + "padding-block-end": { "value": "{epe.size.md}" }, + "padding-inline-start": { "value": "{epe.size.md}" }, + "padding-inline-end": { "value": "{epe.size.md}" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/document.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/document.tokens.json new file mode 100644 index 000000000..953d8b31d --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/document.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "document": { + "background-color": { "value": "{epe.color.white.100}" }, + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "{epe.font-size.md}" }, + "font-weight": {}, + "line-height": {} + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json new file mode 100644 index 000000000..71b79d9bc --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "alert": { + "icon": { + "gap": { "value": "{epe.size.xs}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json new file mode 100644 index 000000000..bbcf0468d --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "badge-counter": { + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-style": {}, + "text-decoration": { "value": "none" }, + "min-block-size": {}, + "min-inline-size": {} + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json new file mode 100644 index 000000000..21f6dce2b --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "form-input": { + "background-color": { "value": "{epe.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{epe.color.grey.46}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": { "value": "{epe.color.white.100}" }, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json new file mode 100644 index 000000000..be9d882aa --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json @@ -0,0 +1,7 @@ +{ + "utrecht": { + "icon": { + "gap": { "value": "{epe.size.xs}" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json new file mode 100644 index 000000000..6b4180ae3 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "page-footer": { + "min-height": { "value": "727px" }, + "logo": { + "max-height": { "value": "100px" }, + "max-width": { "value": "170px" } + }, + "background-position": { "value": "center center" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json new file mode 100644 index 000000000..761ea6fc5 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "logo": { + "max-height": {}, + "max-width": { "value": "100px" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json new file mode 100644 index 000000000..2cc329be8 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json @@ -0,0 +1,24 @@ +{ + "utrecht": { + "table": { + "background-color": { "value": "{epe.color.white.100}" }, + "header": { + "border-block-end-color": { "value": "{epe.color.yellow.42}" }, + "border-block-end-width": { "value": "5px" }, + "font-family": {} + }, + "row": { + "hover": { + "background-color": {}, + "color": {} + } + }, + "body": { + "border": {} + }, + "caption": { + "font-style": { "value": "italic" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json new file mode 100644 index 000000000..f95f7a649 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "textbox": { + "background-color": { "value": "{epe.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{epe.color.grey.46}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": { "value": "{epe.color.white.100}" }, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/form-input.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/form-input.tokens.json new file mode 100644 index 000000000..7fa37a8cd --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/form-input.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "form-input": { + "border-bottom-width": {}, + "border-color": { "value": "{epe.color.grey.34}" }, + "border-radius": { "value": "{epe.size.2xs}" }, + "border-width": { "value": "{epe.size.4xs}" }, + "color": { "value": "{epe.color.black.0}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "{epe.size.md}" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{epe.size.xs}" }, + "padding-block-start": { "value": "{epe.size.xs}" }, + "padding-inline-end": { "value": "{epe.size.sm}" }, + "padding-inline-start": { "value": "{epe.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/heading.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/heading.tokens.json new file mode 100644 index 000000000..974bb5821 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/heading.tokens.json @@ -0,0 +1,49 @@ +{ + "utrecht": { + "heading-1": { + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "2.66667em" }, + "font-weight": { "value": "600" }, + "line-height": {}, + "margin-block-end": { "value": "{epe.size.sm}" }, + "margin-block-start": { "value": "{epe.size.sm}" } + }, + "heading-2": { + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "1.777778em" }, + "font-weight": { "value": "600" }, + "line-height": {}, + "margin-block-end": { "value": "{epe.size.xs}" }, + "margin-block-start": { "value": 0 } + }, + "heading-3": { + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "1.333333em" }, + "font-weight": { "value": "600" }, + "line-height": {}, + "margin-block-end": { "value": "{epe.size.2xs}" }, + "margin-block-start": { "value": 0 } + }, + "heading-4": { + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "1.111111em" }, + "font-weight": { "value": "600" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": 0 } + }, + "heading-5": { + "color": { "value": "{epe.color.black.19}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "1.055556em" }, + "font-weight": { "value": "600" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": 0 } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/icon.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/icon.tokens.json new file mode 100644 index 000000000..98efefafa --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/icon.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "icon": { + "color": {}, + "size": {}, + "inset-block-start": {}, + "baseline": { + "inset-block-start": {} + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/link.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/link.tokens.json new file mode 100644 index 000000000..fae8d6ec6 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/link.tokens.json @@ -0,0 +1,33 @@ +{ + "utrecht": { + "link": { + "color": { "value": "{epe.color.primary}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-color": { "value": "unset" }, + "text-decoration-thickness": { "value": 0 }, + "text-underline-offset": { "value": "{epe.size.3xs}" }, + "active": { + "color": {} + }, + "focus": { + "color": {}, + "text-decoration": {}, + "text-decoration-thickness": {} + }, + "hover": { + "color": { "value": "{epe.color.primary-hover}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "0.15em" } + }, + "placeholder": { + "color": {} + }, + "visited": { + "color": { "value": "{epe.color.purple.45}" } + }, + "icon": { + "size": { "value": "{epe.size.md}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/list.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/list.tokens.json new file mode 100644 index 000000000..cc6992f57 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/list.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "ordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{epe.size.sm}" }, + "margin-block-end": { "value": "{epe.size.sm}" }, + "padding-inline-start": { "value": "{epe.size.xl}" }, + "item": { + "margin-block-start": { "value": "{epe.size.2xs}" }, + "margin-block-end": { "value": "{epe.size.2xs}" }, + "padding-inline-start": { "value": "1ch" } + } + }, + "unordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{epe.size.md}" }, + "margin-block-end": { "value": 0 }, + "padding-inline-start": { "value": "2ch" }, + "item": { + "margin-block-start": { "value": "{epe.size.xs}" }, + "margin-block-end": { "value": "{epe.size.xs}" }, + "padding-inline-start": { "value": "1ch" } + }, + "marker": { + "color": { "value": "{epe.color.black.19}" } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/page-footer.tokens.json new file mode 100644 index 000000000..3fd30b4e4 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/page-footer.tokens.json @@ -0,0 +1,15 @@ +{ + "utrecht": { + "page-footer": { + "background-color": {}, + "background-image": { + "value": "url(\"data:image/svg+xml,%3Csvg id='eHZsFqTy0zM1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1680 727' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Crect width='1680' height='629.500004' rx='0' ry='0' transform='translate(.000001 0)' fill='%2300549e' stroke-width='0'/%3E%3Crect width='1680' height='87' rx='0' ry='0' transform='translate(0 640)' fill='%23002e57' stroke-width='0'/%3E%3Cpath d='M1652.1,82.4923c-12.95-.0847-15.71-.4571-17.6-.7143-1.41-.2052-2.89-.2887-4.37-.2459c0-.0132,0-.0266,0-.0398c0-.0169,0-.0338.02-.05.26-.3469-.36-.5285-.98-.6571-.72-.151-1.11.0714-1.42.2928-.22.1646-.46.3222-.73.4715-8.47.0398-16.79.0326-24.76.0071-.27-.1164-.52-.2446-.73-.3826-.62-.4357-1.27-.4602-2.49-.1572-.62.1506-1.2.3265-1.75.5255h-1.89c-3.77-.0092-7.39-.0183-10.89-.0245-.03-.0246-.06-.0502-.09-.0765-.04-.0537-.11-.1023-.21-.1418-.56-.2245-1.1-.0959-1.65.0347-.2.0517-.41.0955-.63.1306l-.17.0255-.19.0275h-3.8c-.35-.1524-.62-.34-.78-.5469-.11-.1035-.3-.187-.54-.237-.23-.05-.5-.0636-.76-.0385-.28.2606-.33.5573-.15.8337-2.46.0071-4.76.0285-6.97.053-.42-.102-.84-.1949-1.26-.2908-.49-.1133-.98-.2255-1.47-.3418-.56-.1317-1.32-.25-1.64-.0572-1.42.8459-2.85.5561-4.25.2715-.57-.1327-1.18-.2254-1.81-.2745l-.26-.0143c-.39-.0487-.8-.0597-1.2-.032-.41.0277-.79.0933-1.12.1922-.68.2398-.29.4153.1.5908.08.0367.16.0724.23.1102.35.1898.47.4398-.14.5326-.38.0495-.77.0723-1.16.0674-.15,0-.29,0-.44.0071-.23-.0103-.46-.0419-.66-.0929-.21-.051-.38-.1202-.52-.203-.17-.1178-.3-.2426-.41-.3724-.34-.3776-.61-.6684-1.53.2357-.19.1938-.54.102-.74-.0388-.1-.066-.18-.1341-.25-.2041l-.1-.0826c-2.5.6122-3.95.2326-5.02-.8112-.16-.1612-.89.2898-1.12.5469-.06.0865-.11.1757-.14.2663-.11.2694-.22.5469-1.11.4918-.9-.0551-1.12-.4867-1.15-.8652-.02-.3113-.12-.6123-1.14-.4929-1.35.1083-2.73.0136-3.94-.2683-1.06-.1559-2.22-.145-3.27.0306-1.05.1809-2.21.1864-3.27.0153-.41.4077-1.09.7545-1.94.9979-.76.22-1.37.5229-1.78.8785-10.38-.0959-20.27-.2938-30.28-.4928-22.14-.4418-44.85-.8949-74.64-.2969l.42.2041c-10.6.2969-21.85.2469-32.94.0673v-.5571l-6.71.1224c-2.64.049-5.31.102-7.99.1459l-6.19-.1469c-1.71-.0415-3.4-.082-5.08-.1214v.45c-16.98.2581-34.56.3938-50.97.0398l.56-.2041c-33.33-.5102-39.1-.2551-47.17.102-10.02.4467-20.1.6735-30.17.6796-.43-.3653-15.53-.6224-31.01-.8857-16.34-.2786-33.11-.5633-33.53-.9908-1.41.1722-2.9.1676-4.3-.0133-1.39-.1749-2.86-.1851-4.26-.0296-1.63.2844-3.4.3769-5.13.2684-1.33-.1153-1.47.1816-1.49.4929-.02.3785-.34.8081-1.51.8652-1.17.0572-1.3-.2193-1.44-.4887-.04-.093-.1-.1835-.19-.2694-.3-.2571-1.24-.7082-1.45-.5469-1.4,1.0438-3.29,1.4285-6.57.8163l-.1.0694c-.11.0742-.22.1455-.35.2132-.26.147-.7.2327-.97.0388-1.2-.9061-1.55-.6122-2-.2326-.14.1315-.32.2555-.52.3693-.42.1768-.97.2819-1.55.2959h-.58c-.51.0016-1.01-.0224-1.51-.0714-.79-.0928-.65-.3428-.18-.5326.09-.0378.2-.0755.31-.1133.5-.1745,1-.349.12-.5877-.93-.2036-2.01-.2601-3.03-.1602l-.35.0143c-.81.0477-1.6.1399-2.35.2744-1.83.2847-3.7.5745-5.55-.2714-.43-.1969-1.41-.0786-2.15.0572-.59.102-1.19.2122-1.78.3163-.6.104-1.19.2092-1.78.3163-2.89-.0245-5.9-.0459-9.1-.0531.12-.1361.16-.2823.13-.427-.04-.1448-.15-.284-.33-.4066-.31-.0299-.64-.0198-.94.029s-.56.1344-.76.2465c-.22.2193-.58.4091-1.02.551-1.59,0-3.31,0-4.96,0l-.47-.0531c-.28-.0355-.56-.0795-.83-.1316-.32-.0919-.69-.1439-1.07-.1503-.38-.0065-.76.0328-1.09.1136-.11.0371-.2.0853-.27.1408-.03.0284-.07.0554-.12.0806-4.58.0061-9.33.0153-14.26.0245h-2.43c-.73-.2041-1.5-.3799-2.29-.5255-1.58-.3061-2.44-.2786-3.24.1541-.27.1362-.58.2593-.91.3673l-.05.0184c-10.41.0255-21.28.0326-32.34,0-.34-.1501-.65-.3089-.95-.4755-.17-.1392-.46-.2457-.8-.2996-.34-.054-.72-.0516-1.05.0067-.82.1286-1.62.3061-1.27.6571.01.016.02.033.01.05c0,.0136.01.0271.02.0398-8.58-.0398-17.17-.102-25.65-.2398l-9.16.0898c-15.206-.2112-22.757.8163-35.59.7714-.234-.1214-.439-.251-.651-.3806-.213-.1295-.434-.2653-.67-.3908-.083-.0445-.161-.0908-.233-.1387-.111-.1107-.301-.2029-.541-.263s-.517-.0848-.792-.0707c-.267.0129-.519.0596-.726.1342-.207.0747-.36.1741-.44.2862-.052.0449-.105.0908-.164.1337-.156.1122-.315.2255-.466.3377-.152.1123-.32.2255-.467.3378l-4.153-.0082c-2.555-.0048-5.073-.0092-7.556-.0133.028-.0265.045-.0489.063-.0704.026-.0373.06-.0735.101-.1081.592-.5-1.419-1.1653-3.323-1.4286-.681-.1107-1.421-.1334-2.13-.0656-.71.0678-1.361.2234-1.874.4483-.445.1364-.804.3196-1.045.5327s-.355.4492-.332.6866c-1.192,0-2.333,0-3.5-.0071h-.144c-.056-.0065-.11-.0157-.161-.0276-.062-.0097-.126-.0152-.192-.0163-1.343.0879-2.711-.0606-3.804-.4129-1.093-.3522-1.823-.8796-2.029-1.4666-.247-.4082-.6-.7623-1.904-.6796-1.584.102-1.045.4653-.609.7612.042.0296.086.0582.124.0857.037.0276.079.0551.121.0816.352.2378.7.4735,0,.698-.36.107-.769.1779-1.199.2076-.429.0296-.869.0173-1.286-.0362-1.261-.24-2.573-.4266-3.915-.5571-3.099-.35-6.209-.702-6.891-2.0775-.116-.2316-1.362-.7786-1.969-.4214-.564.2964-1.197.5666-1.888.8061-1.085.4081-2.121.7928-2.125,1.1816c0,1.4377-2.485,1.4081-5.201,1.3754l-.665-.0071c-.406-.0249-.82-.0117-1.214.0388-.393.0505-.758.1371-1.068.2541-5.834-.0715-11.667,1.0265-17.559.8877l-2.002.0643-.116-.0164c-.05-.0087-.102-.0152-.154-.0193-.695-.0809-1.373-.1877-2.026-.3194-1.139-.2506-2.388-.3911-3.663-.4123-2.028.0072-3.176-.0387-3.71-.7285-.29-.3275-.667-.6389-1.125-.9275-.76-.4251-1.231-.9349-1.36-1.4714c0-.2572-.912-.4857-1.888-.5357-.298-.0285-.609-.0132-.885.0437s-.501.1519-.641.2705c-.207.2837-.548.5454-1,.7683-.452.2228-1.005.4021-1.624.5262s-1.291.1905-1.972.1948-1.357-.0536-1.984-.1699c-.415-.0375-.846-.0262-1.248.0327-.402.059-.761.1635-1.041.303-.534.2429-1.453.5429-2.125.4286-3.519-.5929-5.53-.046-7.966.7295-1.503.4786-1.736.0898-4.07.0898h-68.833l-8.33-.0479c-47.203-.598-83.207-.1449-118.277.2969-15.866.2041-31.546.3969-47.973.4929-.761-.3905-1.731-.6927-2.823-.8796-1.218-.2012-2.285-.5463-3.08-.9969-1.706.1705-3.48.1652-5.18-.0153-1.709-.1761-3.485-.1866-5.204-.0307-2.007.2873-4.133.3789-6.23.2684-1.61-.1153-1.773.1816-1.796.4929.013.1093-.024.2187-.109.3217-.085.1031-.216.1977-.385.2783-.17.0806-.374.1456-.602.1911s-.474.0708-.724.0741c-1.424.0551-1.587-.2204-1.75-.4897-.051-.0935-.13-.1837-.234-.2684-.373-.2571-1.516-.7081-1.773-.5469-1.703,1.0438-3.99,1.4285-7.957.8163-.061.0249-.115.0526-.163.0826-.116.0739-.249.1423-.397.2041-.326.1469-.863.2327-1.166.0388-1.47-.9051-1.89-.6122-2.427-.2347-.182.1351-.401.2598-.653.3714-.534.1839-1.188.2877-1.867.2959-.233,0-.467,0-.7,0-.618.0011-1.235-.0228-1.843-.0714-.934-.0929-.77-.3429-.21-.5326.116-.0378.233-.0756.373-.1133.607-.1735,1.213-.349.14-.5877-1.161-.2047-2.432-.2603-3.663-.1602l-.42.0142c-.969.0471-1.923.1391-2.847.2745-2.24.2847-4.503.5745-6.743-.2714-.514-.1929-1.704-.0745-2.614.0571-.793.1204-1.61.2378-2.426.3562-.63.0911-1.26.1833-1.89.2765-3.5-.0245-7.164-.0459-11.06-.0531.151-.1337.21-.2839.168-.4321-.041-.1481-.181-.2877-.402-.4015-.367-.0323-.748-.0239-1.106.0242s-.684.1344-.947.2513c-.291.229-.718.4194-1.237.551-1.936,0-4.013,0-6.02,0-.14-.0102-.28-.0245-.42-.0388l-.14-.0143c-.34-.0346-.675-.0782-1.003-.1306-.405-.0931-.852-.1446-1.309-.1506s-.911.0336-1.328.1159c-.233.0582-.303.1469-.466.2184l-20.23.0285c-.904-.2044-1.839-.38-2.8-.5255-1.914-.3061-2.964-.2785-3.92.1572-.362.1429-.752.271-1.167.3826-12.623.0255-25.807.0327-39.223,0-.41-.1486-.799-.3074-1.167-.4755-.254-.1463-.608-.2534-1.011-.3061-.402-.0526-.833-.048-1.229.0133-1.003.1286-1.96.3061-1.54.6571.023.0143,0,.0306.023.0459v.0439c-10.383-.0398-20.836-.102-31.103-.2398c15.493.2327,28.957,1.0612-3.687,1.201-18.456-.2143-35.046-.2969-50.61-.3357-.56-.25-1.026-.5255-1.61-.7755-.093-.0449-.186-.0939-.28-.1428-.165-.1179-.405-.212-.691-.2706-.287-.0586-.606-.0791-.919-.059-.3.0043-.592.0462-.84.1207s-.442.1785-.56.2997c-.07.0449-.14.0908-.21.1336-.373.2255-.77.451-1.166.6755-4.823-.0075-9.559-.0146-14.21-.0214.038-.0227.069-.0474.093-.0735.023-.0306.07-.0622.117-.102.723-.5-1.727-1.1653-4.037-1.4285-.82-.1123-1.689-.1361-2.534-.0695s-1.641.2218-2.319.4521c-1.354.4224-1.75.8224-1.657,1.2194-1.47,0-2.847,0-4.293-.0072h-.117c-.14,0-.257-.0326-.42-.0326-4.947.0071-6.37-.8684-7.093-1.8796-.036-.1138-.127-.2231-.266-.3206s-.324-.1811-.542-.2452c-.218-.0642-.464-.1075-.723-.1271s-.525-.015-.779.0134c-1.914.102-1.284.4652-.747.7612.047.0295.117.0581.163.0857l.14.0826c.42.2367.84.4725,0,.6969-.919.2193-1.993.2804-3.01.1715-1.549-.2427-3.141-.429-4.76-.5572-3.756-.35-7.536-.702-8.353-2.0775-.14-.2316-1.657-.7785-2.403-.4214-.698.3027-1.464.5738-2.287.8092-1.307.4081-2.567.7928-2.567,1.1785c0,1.4377-3.01,1.4082-6.3,1.3755l-.816-.0071c-.977-.0544-1.965.0498-2.777.2928-7.07-.0714-14.163-.1643-21.303-.3061l-2.427.0643c-.063-.0068-.125-.0149-.187-.0245-.046-.0052-.092-.009-.14-.0112-.833-.0801-1.652-.1869-2.45-.3194-1.408-.2534-2.91-.3934-4.433-.4133-2.473,0-3.85-.2796-4.503-.9693-.366-.3338-.829-.6456-1.377-.9276-.897-.3989-1.471-.9154-1.633-1.4703-.024-.2572-1.12-.4868-2.287-.5368-.348-.0328-.709-.0204-1.041.0356-.332.0561-.619.1533-.826.2797-1.306,1.0082-3.173,1.748-7.98,1.3184-.491-.0396-.996-.0299-1.477.0284s-.925.1638-1.299.3083c-.654.2459-1.75.5428-2.567.4316-1.624-.2418-3.362-.3021-5.053-.1752s-3.283.4369-4.63.9017c-2.543.4721-5.366.5734-8.05.2888l-.467-.0367c-1.147-.1176-2.322-.1782-3.5-.1806v.6826c-2.38-.5367-4.76-1.0724-7.117-1.6193-.849-.1815-1.795-.2584-2.736-.2225-.942.036-1.843.1834-2.607.4265-.562.1326-1.148.2459-1.75.3388-1.33.1918-.863.4959-.373.8071.281.1435.452.3219.49.5102h-.047c-1.974-.0228-3.922.1975-5.623.6357-.612.1191-1.306.1308-1.937.0327-.723-.1092-.56-.2776-.397-.447.077-.0593.125-.125.14-.1928.21-.9327-1.166-1.5224-3.056-1.1224-.958.1746-1.985.2642-3.023.2635-1.037-.0007-2.064-.0917-3.021-.2676-.303-.0368-.606-.0735-.933-.1082-.28-.0316-.583-.0714-.863-.1112-.588-.1264-1.237-.1882-1.892-.18-.655.0081-1.295.086-1.865.2269-.125.0276-.261.0433-.4.0462-.14.0029-.279-.0071-.409-.0294-.13-.0222-.248-.0562-.345-.0997-.098-.0435-.174-.0956-.223-.1528-1.143-1.1418-2.356-.5469-3.313-.0847-.055.0347-.117.0668-.187.0959-.855.5025-2.121.8415-3.533.9466s-2.863-.0318-4.05-.3823c-.32-.0828-.697-.1135-1.065-.0866-.367.0269-.7.1096-.942.2336-.684.3089-1.417.5963-2.193.8601-1.044.3315-1.959.7351-2.707,1.1949-.746.5469-7.583.7755-10.08.7581-1.138-.0574-2.288-.0646-3.43-.0214-7.91-.0367-16.076,0-22.143.1286l-2.683,1.2918c-7.7237.0969-12.3903.1143-15.4937.0857-.1633-.0602-.3266-.1224-.49-.1847-.7992-.4299-1.8839-.7407-3.1043-.8895-1.2205-.1488-2.5165-.1282-3.709.0589-.3029.0489-.628.0658-.9487.0492s-.6278-.0661-.8963-.1445c-.2686-.0784-.4909-.1835-.6487-.3067s-.2468-.2609-.2596-.402l.4666-.697c.2567-.1959.3734-.3826-.2566-.5214-.63-.1387-1.0967.0388-1.61.2163-.2404.0917-.5071.1692-.7934.2307-.0253.0049-.0489.0115-.07.0193-.0466.0164-.07.0388-.14.048-2.73.0071-5.32.0286-7.6533.0786.49-.2674.9567-.5357,1.4233-.8163l.0467-.0204c.28-.1725.63-.3878.14-.5664-.3733-.1418-.7233-.0622-1.0967.0194-.1346.032-.2751.059-.42.0806-.2707.0533-.51.1329-.7.2327-.42.1959-.8633.3877-1.5166.0602s.07-.6265.7233-.8888c.1167-.0408.21-.0806.3033-.1183.28-.1194.5834-.2347.8634-.347.2566-.0908.49-.1795.7233-.2683.1624-.0561.334-.1069.5133-.1521.5134-.1336,1.0267-.2714.7467-.4765-.5849-.2954-1.3693-.5019-2.24-.5898-.1752-.0218-.3593-.0267-.5392-.0142s-.3515.042-.5027.0866c-.1511.0445-.2782.1029-.3723.1711s-.1529.1447-.1725.2239c-.0135.0581-.0548.1143-.1212.165s-.1564.0946-.2643.1291c-.1078.0344-.231.0586-.3616.0708-.1305.0123-.2655.0124-.3962.0004-.2866-.0295-.5846-.0308-.8725-.004-.288.0269-.5588.0813-.793.1593s-.426.1778-.5616.2921-.2118.2402-.2229.3689c-.35.7081-1.19.7336-2.52.3061-.4433-.1459-.9567-.2969-1.5167-.1459s-.4666.3888-.3033.5969c.35.4571.77.9041,1.19,1.4041-1.0286.0499-2.064-.0638-2.9166-.3203-.8527-.2565-1.4656-.6387-1.7267-1.0767-.0328-.0789-.1033-.154-.2068-.2203-.1034-.0663-.2377-.1224-.3939-.1645s-.331-.0695-.5129-.0802-.367-.0045-.5431.0181c-.7933.0888-.77.3888-.6067.6398.3773.5354.26,1.1141-.3266,1.6122-.4382-.1898-.9742-.3308-1.563-.4111-.5889-.0803-1.2132-.0974-1.8204-.0501-.84.0673-1.68.0928-1.82-.4224-.0182-.1273-.0976-.2513-.2331-.3642s-.3239-.2119-.553-.2907-.4936-.1356-.7763-.1665c-.2828-.031-.5772-.0356-.8642-.0133-.2949.0193-.5715.0743-.7983.1589s-.3949.1954-.4851.3196c-2.17-.1255-5.6933-.2357-11.6666-.3285-.6767.0092-1.3534.0224-2.0534.0367l-1.7266.0347c-.5314-.159-1.1661-.2386-1.8094-.2271-.6434.0116-1.2609.1138-1.7606.2914-2.7767.0551-5.6234.1194-8.5167.1837l-5.43667.1204c0-.0184-.02333-.0347-.02333-.0521-.02797-.0226-.04392-.0477-.04667-.0734.02334-.2113-.84-.3857-1.54-.4215-.11077-.0077-.22403-.0053-.33255.0071-.10852.0125-.20992.0346-.29774.0652-.08782.0305-.16012.0687-.2123.1121s-.08308.0912-.09074.1401c-.02335.0996-.08653.1967-.18667.2867-.58333.0103-1.14333.0245-1.75.0388-.14342-.0731-.29943-.1413-.46666-.2041C2.0656,81.0127,1.07561,80.7512,0,80.5781L0,100h1680v-17.822c-8.66.0449-17.83.1296-27.9.3143Z' transform='translate(0 541)' fill='%23002e57'/%3E%3Cpath d='M814.469,25.8928c0,0,1.481.1561,2.768-.5063c1.287-.6625,3.392-.5844,4.25-1.0526s1.014-.7803,1.014-.1942c0,.586-2.379,5.3408-5.497,5.4968-3.121.1561-2.3,3.1585-2.222,3.2764.078.1162,2.104,4.4842,2.104,4.4842s1.794-.7803,3.899.4283c2.106,1.2086,2.496-.1959,3.977-.4283c1.481-.2341,8.617-2.3791,11.151,1.3638c2.535,3.7429,4.173,5.3425,4.407,6.2788.233.9356-.352,5.3408-.974,7.3688-.625,2.0279-1.287,4.055-1.287,5.1864s-.78,4.9523-.858,5.6928c-.078.7404-.897,5.3026-.663,6.9794.234,1.6759.703,3.0024.39,6.8624-.312,3.8607-.196,4.8353-.196,4.8353h-1.052l-1.092-10.6842-.39-1.9499L832.99,61.61c0,0-.352.4682-1.326.7803c0,0,2.378,6.1211,2.886,7.2135l-.468,2.028c0,0-.35,1.5979-.41,1.6759-.059.078-.546,3.9185-.546,3.9185l-.526,4.7386h-1.58l.234-4.055.156-3.0025c0,0,.02-3.1967-.721-4.3671-.741-1.1696-2.171-2.5987-2.639-3.7174-.468-1.1171-1.612-4.5487-1.612-4.5487s-1.89,1.4037-3.392,1.5784c0,0-.936,5.4392-1.209,6.6487-.272,1.2086-.311,5.2644-.428,5.7708-.116.5063-.74,5.3408-.74,5.3408l-.351,2.8862-1.833.1942c0,0,0-3.0024-.078-3.5868-.078-.5843-.156-4.0414-.026-4.7437.13-.7014.208-1.8973.208-2.4435s.026-3.223.026-3.223.312-2.781.13-3.7691c-.182-.9873-.442-1.7413-.442-1.7413s-1.28-.1925-1.778-.4351c0,0-.867-.0102-1.481.6438l-1.005.0381c0,0-.019,1.6582-.447,5.245-.429,3.5868-1.248,7.3696-1.248,7.3696s-.78,4.8929-.8,5.0286c-.019.1366-.286,1.6183-.286,1.6183l-1.559.1959c0,0,.389-4.6792.338-5.8225-.053-1.1442-.312-1.5335-.104-3.301.207-1.7684.182-4.5758.182-4.5758s0-2.2874-.416-3.0406c-.417-.754-.944-3.5749-.514-5.2899c0,0-.396-1.0008-.553-1.8074-.156-.8049-.779-1.3257-.96-1.9236-.183-.5971-.235-1.195-.313-1.4817l-.078-.2858c0,0-.754-1.4037-1.013-1.6633-.261-.2603-1.353-2.0016-1.378-3.0669-.027-1.0661.468-1.7938.468-1.7938s-1.144-2.0279-1.248-3.3018c-.104-1.2731,0-2.8066,0-2.8066s-.91-2.8336-.234-4.1856c0,0-.52-2.7302.234-3.9252c0,0,.311-3.3273,1.248-4.7055c0,0,.012-.9491.051-1.5199.039-.5725-.338-.4818-.324-1.3002.012-.8185-2.022-3.2942-2.022-3.2942l-.78-1.7159c0,0-7.505-3.1915-10.365-8.8063c0,0-2.963-1.8193-2.34-7.59006.472-4.35864-.479-5.95909-.975-6.4824-.037-.04071.01-.10432.059-.07803.482.2519,1.38.86426,1.943,2.11358.488.87614,2.165-1.30699,2.165-1.30699s1.61-1.530063,2.547-1.926148c.078-.031382.145.058522.094.122981-.777.969437-4.03,5.149107-4.065,7.242337-.038,2.37906.663,2.80823.663,2.80823l.118-2.84639c0,0,.935.29176.721,2.96259c0,0,4.29-3.56817,5.653-4.6784c1.365-1.11192,2.457-2.65216,2.457-2.65216s.254-.12637.02.58438c-.234.71244-4.367,5.92686-4.367,5.92686s2.202.01951,3.256-.39015c0,0,.35.17642-.342.55639s-3.908,1.08228-3.908,1.08228-4.53,4.9642,3.996,9.3321c0,0-2.001-3.457-1.455-5.1474c0,0,.312-.1942.35.5335.04.7269,1.768,5.7708,6.447,7.1745c0,0-2.496-6.1991-2.574-7.6427-.052-1.0407.806.676.806.676s3.562,8.2533,4.184,8.6816c.625.4284,4.583.5259,5.089.0586.506-.4682,6.025-6.0499,6.908-11.0938c0,0,.5-.6624.384.9168-.118,1.5784-1.294,5.5817-3.79,8.233c0,0,4.94-1.9753,6.656-3.5351c1.715-1.5597,2.262-4.9905,2.262-4.9905s.76-1.3646,0,3.0406c0,0,1.949-3.5681,1.618-5.887-.332-2.32049-2.983-4.25003-2.983-4.25003s.116-.5267.838.26038l.722.78623c0,0-2.476-5.80388-2.398-6.75889c0,0,.194-.916005.722.74213.526,1.65643,3.327,7.51799,5.276,8.02603c0,0,.805-2.50968.883-4.50961.078-2.00248-.675-4.939617-.675-4.939617s.285-.597945,1.195,2.391777c.909,2.98888,2.574-.39015,2.574-.39015s.35.06531.091.70227c-.26.63696-1.326,2.26032-1.521,3.54781-.194,1.28664-.337,3.10677-1.39,4.78357c0,0,.467,3.4901-1.112,5.7123-1.58,2.2221-12.77,8.1295-12.77,8.1295l-1.481.5835Z' transform='translate(0 541)' fill='%23002e57'/%3E%3C/svg%3E%0A\")" + }, + "color": { "value": "{epe.color.white.100}" }, + "padding-inline-end": { "value": "{epe.size.sm}" }, + "padding-inline-start": { "value": "{epe.size.sm}" }, + "padding-block-end": { "value": "200px" }, + "padding-block-start": { "value": "{epe.size.2xl}" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/page-header.tokens.json new file mode 100644 index 000000000..23fc7f443 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "background-color": { "value": "{epe.color.white.98}" }, + "color": { "value": "{epe.color.black.19}" }, + "padding-block-start": { "value": "{epe.size.sm}" }, + "padding-block-end": { "value": "{epe.size.sm}" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/page.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/page.tokens.json new file mode 100644 index 000000000..24e1a5dba --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/page.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "page": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{epe.size.lg}" }, + "margin-inline-end": { "value": "{epe.size.lg}" }, + "max-inline-size": { "value": "1140px" } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/paragraph.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/paragraph.tokens.json new file mode 100644 index 000000000..8721393ef --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/paragraph.tokens.json @@ -0,0 +1,25 @@ +{ + "utrecht": { + "paragraph": { + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "{epe.font-size.md}" }, + "font-weight": { "value": "{epe.typography.font-weight.normal}" }, + "line-height": { "value": "1.5em" }, + "margin-block-start": { "value": 0 }, + "margin-block-end": { "value": 0 }, + "lead": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + }, + "small": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/surface.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/surface.tokens.json new file mode 100644 index 000000000..3286c4a9f --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/surface.tokens.json @@ -0,0 +1,8 @@ +{ + "utrecht": { + "surface": { + "background-color": { "value": "{epe.color.white.100}" }, + "color": {} + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/table.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/table.tokens.json new file mode 100644 index 000000000..e85ac4313 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/table.tokens.json @@ -0,0 +1,60 @@ +{ + "utrecht": { + "table": { + "border-color": {}, + "border-width": {}, + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": "{epe.size.md}" }, + "caption": { + "font-weight": {}, + "font-family": {}, + "font-size": {}, + "color": {}, + "line-height": {}, + "text-align": {}, + "margin-block-end": {} + }, + "header": { + "font-weight": { "value": "{epe.typography.font-weight.bold}" }, + "background-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" }, + "border-block-end-color": {}, + "border-block-end-width": {} + }, + "header-cell": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{epe.typography.font-weight.bold}" }, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" } + }, + "cell": { + "line-height": {}, + "padding-block-end": { "value": "{epe.size.md}" }, + "padding-block-start": { "value": "{epe.size.md}" }, + "padding-inline-end": { "value": "{epe.size.md}" }, + "padding-inline-start": { "value": "{epe.size.md}" }, + "icon": { + "size": {} + } + }, + "row": { + "border-block-end-color": { "value": "{epe.color.black.19}" }, + "border-block-end-width": { "value": "{epe.size.4xs}" }, + "padding-inline-end": {}, + "padding-inline-start": {}, + "alternate-odd": { + "background-color": {}, + "color": {} + }, + "alternate-even": { + "background-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/component/utrecht/textbox.tokens.json b/proprietary/epe-design-tokens/src/component/utrecht/textbox.tokens.json new file mode 100644 index 000000000..ad00eafd5 --- /dev/null +++ b/proprietary/epe-design-tokens/src/component/utrecht/textbox.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "textbox": { + "border-bottom-width": {}, + "border-color": { "value": "{epe.color.grey.34}" }, + "border-radius": { "value": "{epe.size.2xs}" }, + "border-width": { "value": "{epe.size.4xs}" }, + "color": { "value": "{epe.color.black.0}" }, + "font-family": { "value": "{epe.typography.source-sans.font-family}" }, + "font-size": { "value": "{epe.size.md}" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{epe.size.xs}" }, + "padding-block-start": { "value": "{epe.size.xs}" }, + "padding-inline-end": { "value": "{epe.size.sm}" }, + "padding-inline-start": { "value": "{epe.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/epe-design-tokens/src/config.json b/proprietary/epe-design-tokens/src/config.json new file mode 100644 index 000000000..d8f6b4354 --- /dev/null +++ b/proprietary/epe-design-tokens/src/config.json @@ -0,0 +1,48 @@ +{ + "fullName": "Gemeente Epe", + "name": "Epe", + "prefix": "epe", + "npm": "@nl-design-system-unstable/epe-design-tokens", + "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" + ] +} diff --git a/proprietary/epe-design-tokens/src/font.js b/proprietary/epe-design-tokens/src/font.js new file mode 100644 index 000000000..ca7daf1bf --- /dev/null +++ b/proprietary/epe-design-tokens/src/font.js @@ -0,0 +1,6 @@ +import '@fontsource/source-sans-pro/300.css'; +import '@fontsource/source-sans-pro/300-italic.css'; +import '@fontsource/source-sans-pro/400.css'; +import '@fontsource/source-sans-pro/400-italic.css'; +import '@fontsource/source-sans-pro/700.css'; +import '@fontsource/source-sans-pro/700-italic.css'; diff --git a/proprietary/epe-design-tokens/src/index.scss b/proprietary/epe-design-tokens/src/index.scss new file mode 100644 index 000000000..59ac9e2b4 --- /dev/null +++ b/proprietary/epe-design-tokens/src/index.scss @@ -0,0 +1,7 @@ +/** + * @license SEE LICENSE.md + * Copyright (c) 2021 NL Design System Community + * All rights reserved + */ + +@import "./design-tokens.css"; diff --git a/proprietary/epe-design-tokens/style-dictionary.config.js b/proprietary/epe-design-tokens/style-dictionary.config.js new file mode 100644 index 000000000..d43b0fd25 --- /dev/null +++ b/proprietary/epe-design-tokens/style-dictionary.config.js @@ -0,0 +1,6 @@ +const config = require('./src/config.json'); +const { createConfig } = require('../../style-dictionary-config'); + +module.exports = createConfig({ + selector: `.${config.prefix}-theme`, +}); diff --git a/proprietary/leiden-design-tokens/README.md b/proprietary/leiden-design-tokens/README.md index b1fe569ac..3dadbb854 100644 --- a/proprietary/leiden-design-tokens/README.md +++ b/proprietary/leiden-design-tokens/README.md @@ -1,3 +1,3 @@ # NL Design System design tokens Gemeente Leiden -These tokens have been obtained by analysing the [website of Gemeente Leiden](https://www.leiden.nl). +These tokens have been obtained by analysing the [website of Gemeente Leiden](https://gemeente.leiden.nl/). diff --git a/proprietary/leiden-design-tokens/package.json b/proprietary/leiden-design-tokens/package.json index e4b3d3ec0..61e96dae2 100644 --- a/proprietary/leiden-design-tokens/package.json +++ b/proprietary/leiden-design-tokens/package.json @@ -2,9 +2,10 @@ "version": "1.0.0-alpha.114", "author": "Community for NL Design System", "description": "NL Design System design tokens for Gemeente Leiden", - "website": "https://www.leiden.nl/", + "website": "https://gemeente.leiden.nl/", "keywords": [ - "nl-design-system" + "nl-design-system", + "conduction" ], "license": "SEE LICENSE IN LICENSE.md", "name": "@nl-design-system-unstable/leiden-design-tokens", @@ -26,10 +27,15 @@ "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js" }, "devDependencies": { + "@fontsource/open-sans": "5.0.12", "@nl-design-system-unstable/theme-toolkit": "workspace:*", "chokidar-cli": "3.0.0", "npm-run-all": "4.1.5", "rimraf": "3.0.2", "style-dictionary": "3.8.0" - } + }, + "bugs": { + "url": "https://github.com/ConductionNL/conduction-theme/issues" + }, + "homepage": "https://github.com/ConductionNL/conduction-theme#readme" } diff --git a/proprietary/leiden-design-tokens/src/brand/leiden/color.tokens.json b/proprietary/leiden-design-tokens/src/brand/leiden/color.tokens.json new file mode 100644 index 000000000..93d1fb257 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/brand/leiden/color.tokens.json @@ -0,0 +1,69 @@ +{ + "leiden": { + "color": { + "primary": { + "value": "#d62410" + }, + "primary-hover": { + "value": "#b81f0e" + }, + "error": { "value": "#d62410" }, + "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": "{leiden.color.primary}" }, + "alert-info": { "value": "#004085" }, + "alert-info-background": { "value": "#cce5ff" }, + "grey": { + "11": { + "value": "#1d1d1b" + }, + "33": { + "value": "#5f594a", + "comment": "Base/Grey" + } + }, + "lightgrey": { + "89": { + "value": "#e4e4e4", + "comment": "Base/LightGrey" + }, + "95": { + "value": "#f1f1f1" + }, + "98": { + "value": "#fbfbfb" + } + }, + "white": { + "100": { + "value": "#ffffff", + "comment": "Base/White" + } + }, + "black": { + "9": { + "value": "#0d1921", + "comment": "Base/Black" + } + }, + "lightblue": { + "24": { + "value": "#2c3e50", + "comment": "Base/LightBlue" + }, + "37": { + "value": "#057aba" + }, + "89": { + "value": "#dce4ec" + } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/brand/leiden/font-size.tokens.json b/proprietary/leiden-design-tokens/src/brand/leiden/font-size.tokens.json new file mode 100644 index 000000000..e1d371430 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/brand/leiden/font-size.tokens.json @@ -0,0 +1,17 @@ +{ + "leiden": { + "font-size": { + "4xs": { "value": "5px" }, + "3xs": { "value": "8px" }, + "2xs": { "value": "10px" }, + "xs": { "value": "12px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "20px" }, + "xl": { "value": "24px" }, + "2xl": { "value": "32px" }, + "3xl": { "value": "48px" }, + "4xl": { "value": "58px" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/brand/leiden/size.tokens.json b/proprietary/leiden-design-tokens/src/brand/leiden/size.tokens.json new file mode 100644 index 000000000..67cb0eaca --- /dev/null +++ b/proprietary/leiden-design-tokens/src/brand/leiden/size.tokens.json @@ -0,0 +1,17 @@ +{ + "leiden": { + "size": { + "4xs": { "value": "1px" }, + "3xs": { "value": "2px" }, + "2xs": { "value": "4px" }, + "xs": { "value": "8px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "24px" }, + "xl": { "value": "32px" }, + "2xl": { "value": "48px" }, + "3xl": { "value": "72px" }, + "4xl": { "value": "96px" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/brand/leiden/typography.tokens.json b/proprietary/leiden-design-tokens/src/brand/leiden/typography.tokens.json new file mode 100644 index 000000000..545caad9a --- /dev/null +++ b/proprietary/leiden-design-tokens/src/brand/leiden/typography.tokens.json @@ -0,0 +1,40 @@ +{ + "leiden": { + "typography": { + "sans-serif": { + "font-family": { + "value": "\"Open Sans\", Monospace, Arial, sans-serif" + } + }, + "monospace": { + "font-family": { + "value": "Monospace, \"Lucida Console\"" + } + }, + "font-weight": { + "bold": { + "value": "700" + }, + "normal": { + "value": "400" + }, + "light": { + "value": "100" + } + }, + "scale": { + "4xs": { "value": "{leiden.font-size.4xs}" }, + "3xs": { "value": "{leiden.font-size.3xs}" }, + "2xs": { "value": "{leiden.font-size.2xs}" }, + "xs": { "value": "{leiden.font-size.xs}" }, + "sm": { "value": "{leiden.font-size.sm}" }, + "md": { "value": "{leiden.font-size.md}" }, + "lg": { "value": "{leiden.font-size.lg}" }, + "xl": { "value": "{leiden.font-size.xl}" }, + "2xl": { "value": "{leiden.font-size.2xl}" }, + "3xl": { "value": "{leiden.font-size.3xl}" }, + "4xl": { "value": "{leiden.font-size.4xl}" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/brand/rotterdam/color.tokens.json b/proprietary/leiden-design-tokens/src/brand/rotterdam/color.tokens.json deleted file mode 100644 index dfd3a0d68..000000000 --- a/proprietary/leiden-design-tokens/src/brand/rotterdam/color.tokens.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "leiden": { - "color": {} - } -} diff --git a/proprietary/leiden-design-tokens/src/brand/rotterdam/typography.tokens.json b/proprietary/leiden-design-tokens/src/brand/rotterdam/typography.tokens.json deleted file mode 100644 index ec3e3e88d..000000000 --- a/proprietary/leiden-design-tokens/src/brand/rotterdam/typography.tokens.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "leiden": { - "typography": {} - } -} diff --git a/proprietary/leiden-design-tokens/src/common/utrecht/space.tokens.json b/proprietary/leiden-design-tokens/src/common/utrecht/space.tokens.json new file mode 100644 index 000000000..0490c9ea7 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/common/utrecht/space.tokens.json @@ -0,0 +1,28 @@ +{ + "utrecht": { + "space": { + "block": { + "3xs": { "value": "{leiden.size.3xs}" }, + "2xs": { "value": "{leiden.size.2xs}" }, + "xs": { "value": "{leiden.size.xs}" }, + "sm": { "value": "{leiden.size.sm}" }, + "md": { "value": "{leiden.size.md}" }, + "lg": { "value": "{leiden.size.lg}" }, + "xl": { "value": "{leiden.size.xl}" }, + "2xl": { "value": "{leiden.size.2xl}" }, + "3xl": { "value": "{leiden.size.3xl}" } + }, + "inline": { + "3xs": { "value": "{leiden.size.3xs}" }, + "2xs": { "value": "{leiden.size.2xs}" }, + "xs": { "value": "{leiden.size.xs}" }, + "sm": { "value": "{leiden.size.sm}" }, + "md": { "value": "{leiden.size.md}" }, + "lg": { "value": "{leiden.size.lg}" }, + "xl": { "value": "{leiden.size.xl}" }, + "2xl": { "value": "{leiden.size.2xl}" }, + "3xl": { "value": "{leiden.size.3xl}" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/conduction/card-header.tokens.json b/proprietary/leiden-design-tokens/src/component/conduction/card-header.tokens.json new file mode 100644 index 000000000..3ad5504f2 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/conduction/card-header.tokens.json @@ -0,0 +1,26 @@ +{ + "conduction": { + "card-header": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {} + }, + "title": { + "color": { "value": "{leiden.color.black.9}" } + }, + "date": { + "color": { "value": "{leiden.color.black.9}" }, + "font-size": { "value": "{leiden.font-size.sm}" }, + "font-weight": { "value": "{leiden.typography.font-weight.light}" }, + "margin-block-end": { "value": "{leiden.size.xs}" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/conduction/card-wrapper.tokens.json b/proprietary/leiden-design-tokens/src/component/conduction/card-wrapper.tokens.json new file mode 100644 index 000000000..c7a6c567e --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/conduction/card-wrapper.tokens.json @@ -0,0 +1,25 @@ +{ + "conduction": { + "card-wrapper": { + "background-color": { "value": "{leiden.color.lightgrey.89}" }, + "border-color": {}, + "border-style": {}, + "border-width": { "value": "unset" }, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {}, + "border-radius": { "value": "0px" }, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {} + }, + "padding-inline-end": { "value": "{leiden.size.xl}" }, + "padding-inline-start": { "value": "{leiden.size.xl}" }, + "padding-block-end": { "value": "{leiden.size.sm}" }, + "padding-block-start": { "value": "{leiden.size.sm}" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/conduction/pagination.tokens.json b/proprietary/leiden-design-tokens/src/component/conduction/pagination.tokens.json new file mode 100644 index 000000000..98ab1f9a3 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/conduction/pagination.tokens.json @@ -0,0 +1,45 @@ +{ + "conduction": { + "pagination": { + "container-background-color": { "value": "unset" }, + "container-padding-inline-start": { "value": "0px" }, + "container-padding-inline-end": { "value": "0px" }, + "container-padding-block-start": { "value": "0px" }, + "container-padding-block-end": { "value": "0px" }, + "item-gap": { "value": "{leiden.size.2xs}" }, + "item-color": { "value": "{leiden.color.lightblue.37}" }, + "item-background-color": { "value": "{leiden.color.white.100}" }, + "item-border-radius": { "value": "0px" }, + "item-padding-inline-start": { "value": "{leiden.size.xs}" }, + "item-padding-inline-end": { "value": "{leiden.size.xs}" }, + "item-padding-block-start": { "value": "{leiden.size.xs}" }, + "item-padding-block-end": { "value": "{leiden.size.xs}" }, + "item-font-size": { "value": "15px" }, + "item-font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "item-font-family": { "value": "{utrecht.document.font-family}" }, + "item-border-width": {}, + "item-border-style": {}, + "item-border-color": {}, + "navigation-button-padding-inline-start": { "value": "{leiden.size.xs}" }, + "navigation-button-padding-inline-end": { "value": "{leiden.size.xs}" }, + "navigation-button-padding-block-start": { "value": "0px" }, + "navigation-button-padding-block-end": { "value": "0px" }, + "disabled-color": { "value": "{leiden.color.lightgrey.89}" }, + "disabled-background-color": { "value": "{leiden.color.white.100}" }, + "current-page-color": { "value": "{leiden.color.black.9}" }, + "current-page-background-color": { "value": "{leiden.color.white.100}" }, + "current-page-font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "current-page-text-decoration": { "value": "underline" }, + "current-page-border-width": {}, + "current-page-border-style": {}, + "current-page-border-color": {}, + "page-hover-color": { "value": "{leiden.color.lightblue.37}" }, + "page-hover-background-color": { "value": "{leiden.color.white.100}" }, + "page-hover-text-decoration": { "value": "underline" }, + "page-hover-text-decoration-thickness": { "value": "1px" }, + "page-hover-border-width": {}, + "page-hover-border-style": {}, + "page-hover-border-color": {} + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/conduction/select.tokens.json b/proprietary/leiden-design-tokens/src/component/conduction/select.tokens.json new file mode 100644 index 000000000..b0c668a05 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/conduction/select.tokens.json @@ -0,0 +1,30 @@ +{ + "conduction": { + "input-select": { + "background-color": { "value": "{leiden.color.white.100}" }, + "border": { "value": "1px solid {utrecht.form-input.border-color}" }, + "border-focus": { "value": "unset" }, + "border-radius": { "value": "{utrecht.form-input.border-radius}" }, + "invalid-border-color": { "value": "{leiden.color.error}" }, + "padding-block-end": { "value": 0 }, + "padding-block-start": { "value": 0 }, + "hover": {}, + "focus": {}, + "list-option": { + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "background-color": {}, + "hover": { + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "color": {}, + "background-color": {} + } + }, + "placeholder": { + "color": { + "value": "{utrecht.form-input.placeholder.color}" + }, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/conduction/tabs.tokens.json b/proprietary/leiden-design-tokens/src/component/conduction/tabs.tokens.json new file mode 100644 index 000000000..e97f7cc4f --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/conduction/tabs.tokens.json @@ -0,0 +1,73 @@ +{ + "conduction": { + "tabs": { + "tab": { + "background-color": { "value": "transparent" }, + "color": { "value": "{leiden.color.black.9}" }, + "border-width": { "value": "{leiden.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{leiden.color.lightgrey.89}" }, + "border-bottom": { "value": "0px" }, + "border-bottom-width": { "value": "{leiden.size.4xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{leiden.color.lightgrey.89}" }, + "bottom": { "value": "0px" }, + "padding-block-start": { "value": "{leiden.size.xs}" }, + "padding-block-end": { "value": "{leiden.size.xs}" }, + "padding-inline-start": { "value": "{leiden.size.xl}" }, + "padding-inline-end": { "value": "{leiden.size.xl}" }, + "margin-inline-end": {}, + "font-size": { "value": "{leiden.font-size.md}" }, + "font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "max-width": { "value": "unset" }, + "min-width": { "value": "160px" }, + "min-height": { "value": "61px" }, + "letter-spacing": {}, + "text-transform": {}, + "selected": { + "background-color": { "value": "{leiden.color.lightgrey.89}" }, + "color": { "value": "{leiden.color.black.9}" }, + "box-shadow": {}, + "border-width": { "value": "{leiden.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{leiden.color.lightgrey.89}" }, + "border-bottom": {}, + "border-bottom-width": { "value": "{leiden.size.4xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{leiden.color.lightgrey.89}" }, + "font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "hover": { + "background-color": { "value": "{leiden.color.lightgrey.89}" }, + "color": {}, + "text-decoration": {} + } + }, + "hover": { + "background-color": { "value": "{leiden.color.lightgrey.98}" }, + "color": {}, + "text-decoration": {} + }, + "list": { + "padding-inline-start": { "value": "0px" }, + "margin-block-end": { "value": "0px" }, + "border-bottom-width": { "value": "0px" }, + "border-bottom-style": {}, + "border-bottom-color": {} + }, + "panel": { + "background-color": { "value": "{leiden.color.lightgrey.95}" }, + "padding-block-start": { "value": "{leiden.size.lg}" }, + "padding-block-end": { "value": "{leiden.size.lg}" }, + "padding-inline-start": { "value": "{leiden.size.lg}" }, + "padding-inline-end": { "value": "{leiden.size.lg}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-top": {} + } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/alert.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/alert.tokens.json new file mode 100644 index 000000000..d65aeb80f --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/alert.tokens.json @@ -0,0 +1,46 @@ +{ + "utrecht": { + "alert": { + "background-color": { "value": "{leiden.color.alert-info-background}" }, + "border-color": {}, + "border-width": {}, + "color": { "value": "{leiden.color.alert-info}" }, + "padding-block-start": { "value": "{leiden.size.lg}" }, + "padding-block-end": { "value": "{leiden.size.lg}" }, + "padding-inline-start": { "value": "{leiden.size.lg}" }, + "padding-inline-end": { "value": "{leiden.size.lg}" }, + "margin-block-start": {}, + "margin-block-end": {}, + "warning": { + "background-color": { "value": "{leiden.color.alert-warning-background}" }, + "color": { "value": "{leiden.color.alert-warning}" }, + "border-color": {}, + "border-width": {} + }, + "error": { + "background-color": { "value": "{leiden.color.alert-error-background}" }, + "color": { "value": "{leiden.color.alert-error}" }, + "border-color": {}, + "border-width": {} + }, + "ok": { + "background-color": { "value": "{leiden.color.alert-succes-background}" }, + "color": { "value": "{leiden.color.alert-succes}" }, + "border-color": {}, + "border-width": {} + }, + "icon": { + "color": { "value": "{leiden.color.alert-info}" }, + "error": { + "color": { "value": "{leiden.color.alert-error}" } + }, + "warning": { + "color": { "value": "{leiden.color.alert-warning}" } + }, + "ok": { + "color": { "value": "{leiden.color.alert-succes}" } + } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/badge-counter.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/badge-counter.tokens.json new file mode 100644 index 000000000..e1b7e165d --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/badge-counter.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "badge-counter": { + "background-color": { "value": "{leiden.color.primary}" }, + "border-radius": { "value": "50%" }, + "color": { "value": "{leiden.color.white.100}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{leiden.typography.font-weight.normal}" }, + "padding-block": { "value": "{leiden.size.2xs}" }, + "padding-inline": { "value": "{leiden.size.2xs}" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/blockquote.tokens.json new file mode 100644 index 000000000..de05f6563 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/blockquote.tokens.json @@ -0,0 +1,27 @@ +{ + "utrecht": { + "blockquote": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{leiden.size.xl}" }, + "margin-inline-end": { "value": "{leiden.size.xl}" }, + "margin-inline-block-start": {}, + "margin-inline-block-end": {}, + "font-size": {}, + "font-style": {}, + "font-family": {}, + "padding-inline-start": {}, + "padding-inline-end": {}, + "padding-inline-block-start": {}, + "padding-inline-block-end": {}, + "attribution": { + "color": {}, + "font-size": {} + }, + "content": { + "color": { "value": "{leiden.color.black.9}" }, + "font-size": { "value": "{leiden.font-size.md}" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/button.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/button.tokens.json new file mode 100644 index 000000000..8c1ebf302 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/button.tokens.json @@ -0,0 +1,152 @@ +{ + "utrecht": { + "button": { + "background-color": { "value": "{leiden.color.primary}" }, + "border-color": { "value": "{leiden.color.primary}" }, + "border-radius": { "value": "{leiden.size.2xs}" }, + "border-width": { "value": "{leiden.size.3xs}" }, + "color": { "value": "{leiden.color.white.100}" }, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "inherit" }, + "font-weight": { "value": "inherit" }, + "inline-size": {}, + "letter-spacing": {}, + "line-height": {}, + "min-block-size": {}, + "min-inline-size": {}, + "padding-block-start": { "value": "{leiden.size.xs}" }, + "padding-block-end": { "value": "{leiden.size.xs}" }, + "padding-inline-start": { "value": "{leiden.size.xs}" }, + "padding-inline-end": { "value": "{leiden.size.xs}" }, + "text-transform": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "icon": { + "gap": { "value": "{leiden.size.xs}" }, + "size": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {}, + "scale": {} + }, + "hover": { + "background-color": { "value": "{leiden.color.white.100}" }, + "border-color": {}, + "color": { "value": "{leiden.color.primary-hover}" }, + "scale": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "primary-action": { + "background-color": { "value": "{leiden.color.primary}" }, + "border-color": {}, + "border-width": { "value": "{leiden.size.3xs}" }, + "color": { "value": "{leiden.color.white.100}" }, + "font-weight": { "value": "inherit" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{leiden.color.primary}" }, + "border-color": {}, + "color": { "value": "{leiden.color.white.100}" }, + "scale": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "secondary-action": { + "background-color": { "value": "{leiden.color.white.100}" }, + "border-color": { "value": "{leiden.color.primary}" }, + "border-width": { "value": "{leiden.size.3xs}" }, + "color": { "value": "{leiden.color.primary}" }, + "font-weight": { "value": "{leiden.typography.font-weight.normal}" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{leiden.color.white.100}" }, + "border-color": { "value": "{leiden.color.primary-hover}" }, + "color": { "value": "{leiden.color.primary-hover}" } + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "subtle": { + "background-color": {}, + "border-color": {}, + "border-width": {}, + "color": {}, + "font-weight": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/code.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/code.tokens.json new file mode 100644 index 000000000..eb29b3c61 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/code.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "code": { + "background-color": { "value": "{leiden.color.lightgrey.89}" }, + "color": { "value": "{leiden.color.black.9}" }, + "font-family": { "value": "{leiden.typography.monospace.font-family}" }, + "font-size": { "value": "inherit" }, + "line-height": {} + }, + "code-block": { + "background-color": { "value": "{leiden.color.lightgrey.89}" }, + "color": { "value": "{leiden.color.black.9}" }, + "font-family": { "value": "{leiden.typography.monospace.font-family}" }, + "font-size": { "value": "{leiden.font-size.md}" }, + "line-height": { "value": "{leiden.size.lg}" }, + "margin-block-start": { "value": "{leiden.size.md}" }, + "margin-block-end": { "value": "{leiden.size.md}" }, + "margin-inline-start": { "value": 0 }, + "margin-inline-end": { "value": 0 }, + "padding-block-start": { "value": "{leiden.size.md}" }, + "padding-block-end": { "value": "{leiden.size.md}" }, + "padding-inline-start": { "value": "{leiden.size.md}" }, + "padding-inline-end": { "value": "{leiden.size.md}" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/document.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/document.tokens.json new file mode 100644 index 000000000..b22e663cd --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/document.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "document": { + "background-color": { "value": "{leiden.color.white.100}" }, + "color": { "value": "{leiden.color.black.9}" }, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "{leiden.font-size.md}" }, + "font-weight": {}, + "line-height": {} + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json new file mode 100644 index 000000000..e22af503d --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "alert": { + "icon": { + "gap": { "value": "{leiden.size.xs}" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json new file mode 100644 index 000000000..bbcf0468d --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "badge-counter": { + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-style": {}, + "text-decoration": { "value": "none" }, + "min-block-size": {}, + "min-inline-size": {} + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json new file mode 100644 index 000000000..e6a1fee22 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "form-input": { + "background-color": { "value": "{leiden.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{leiden.color.lightblue.24}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json new file mode 100644 index 000000000..a213150e0 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json @@ -0,0 +1,7 @@ +{ + "utrecht": { + "icon": { + "gap": { "value": "{leiden.size.xs}" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json new file mode 100644 index 000000000..0e9ff5c70 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "page-footer": { + "min-height": {}, + "logo": { + "max-height": { "value": "100px" }, + "max-width": { "value": "120px" } + }, + "background-position": {} + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json new file mode 100644 index 000000000..81f7179da --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "logo": { + "max-height": {}, + "max-width": { "value": "80px" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json new file mode 100644 index 000000000..1104f49a8 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json @@ -0,0 +1,24 @@ +{ + "utrecht": { + "table": { + "background-color": {}, + "header": { + "border-block-end-color": {}, + "border-block-end-width": {}, + "font-family": {} + }, + "row": { + "hover": { + "background-color": {}, + "color": {} + } + }, + "body": { + "border": {} + }, + "caption": { + "font-style": {} + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json new file mode 100644 index 000000000..acd31f683 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "textbox": { + "background-color": { "value": "{leiden.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{leiden.color.lightblue.24}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/form-input.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/form-input.tokens.json new file mode 100644 index 000000000..437338037 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/form-input.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "form-input": { + "border-bottom-width": {}, + "border-color": { "value": "{leiden.color.grey.33}" }, + "border-radius": { "value": "0px" }, + "border-width": { "value": "{leiden.size.4xs}" }, + "color": { "value": "{leiden.color.grey.11}" }, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{leiden.size.xs}" }, + "padding-block-start": { "value": "{leiden.size.xs}" }, + "padding-inline-end": { "value": "{leiden.size.sm}" }, + "padding-inline-start": { "value": "{leiden.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/heading.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/heading.tokens.json new file mode 100644 index 000000000..a60438689 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/heading.tokens.json @@ -0,0 +1,49 @@ +{ + "utrecht": { + "heading-1": { + "color": {}, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "{leiden.font-size.3xl}" }, + "font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{leiden.size.2xl}" }, + "margin-block-start": { "value": "{leiden.size.md}" } + }, + "heading-2": { + "color": {}, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "{leiden.font-size.2xl}" }, + "font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{leiden.size.2xl}" }, + "margin-block-start": { "value": "{leiden.size.md}" } + }, + "heading-3": { + "color": {}, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "{leiden.font-size.xl}" }, + "font-weight": { "value": "{leiden.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{leiden.size.xl}" }, + "margin-block-start": { "value": "{leiden.size.md}" } + }, + "heading-4": { + "color": {}, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "{leiden.font-size.lg}" }, + "font-weight": { "value": "{leiden.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{leiden.size.lg}" }, + "margin-block-start": { "value": "{leiden.size.md}" } + }, + "heading-5": { + "color": {}, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "{leiden.font-size.md}" }, + "font-weight": { "value": "{leiden.typography.font-weight.light}" }, + "line-height": {}, + "margin-block-end": { "value": "{leiden.size.lg}" }, + "margin-block-start": { "value": "{leiden.size.md}" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/icon.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/icon.tokens.json new file mode 100644 index 000000000..98efefafa --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/icon.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "icon": { + "color": {}, + "size": {}, + "inset-block-start": {}, + "baseline": { + "inset-block-start": {} + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/link.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/link.tokens.json index aeab5def3..1921a6071 100644 --- a/proprietary/leiden-design-tokens/src/component/utrecht/link.tokens.json +++ b/proprietary/leiden-design-tokens/src/component/utrecht/link.tokens.json @@ -1,5 +1,33 @@ { "utrecht": { - "link": {} + "link": { + "color": { "value": "{leiden.color.primary}" }, + "text-decoration": { "value": "none" }, + "text-decoration-color": { "value": "unset" }, + "text-decoration-thickness": { "value": 0 }, + "text-underline-offset": { "value": "{leiden.size.3xs}" }, + "active": { + "color": {} + }, + "focus": { + "color": {}, + "text-decoration": {}, + "text-decoration-thickness": {} + }, + "hover": { + "color": { "value": "{leiden.color.primary-hover}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "{leiden.size.4xs}" } + }, + "placeholder": { + "color": {} + }, + "visited": { + "color": { "value": "{leiden.color.primary}" } + }, + "icon": { + "size": { "value": "{leiden.size.md}" } + } + } } } diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/list.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/list.tokens.json new file mode 100644 index 000000000..be7d33922 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/list.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "ordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{leiden.size.sm}" }, + "margin-block-end": { "value": "{leiden.size.sm}" }, + "padding-inline-start": { "value": "{leiden.size.xl}" }, + "item": { + "margin-block-start": { "value": "{leiden.size.2xs}" }, + "margin-block-end": { "value": "{leiden.size.2xs}" }, + "padding-inline-start": { "value": "1ch" } + } + }, + "unordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{leiden.size.md}" }, + "margin-block-end": { "value": 0 }, + "padding-inline-start": { "value": "2ch" }, + "item": { + "margin-block-start": { "value": "{leiden.size.xs}" }, + "margin-block-end": { "value": "{leiden.size.xs}" }, + "padding-inline-start": { "value": "1ch" } + }, + "marker": { + "color": { "value": "{leiden.color.primary}" } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/page-footer.tokens.json new file mode 100644 index 000000000..e53a3b555 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/page-footer.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "page-footer": { + "background-color": { "value": "{leiden.color.black.9}" }, + "background-image": { "value": "unset" }, + "color": { "value": "{leiden.color.white.100}" }, + "padding-inline-end": { "value": "{leiden.size.sm}" }, + "padding-inline-start": { "value": "{leiden.size.sm}" }, + "padding-block-end": { "value": "{leiden.size.2xl}" }, + "padding-block-start": { "value": "{leiden.size.2xl}" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/page-header.tokens.json new file mode 100644 index 000000000..187d46266 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "background-color": { "value": "{leiden.color.black.9}" }, + "color": { "value": "{leiden.color.white.100}" }, + "padding-block-start": { "value": "{leiden.size.sm}" }, + "padding-block-end": { "value": "{leiden.size.sm}" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/page.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/page.tokens.json new file mode 100644 index 000000000..c2a30c66b --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/page.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "page": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{leiden.size.lg}" }, + "margin-inline-end": { "value": "{leiden.size.lg}" }, + "max-inline-size": { "value": "1140px" } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/paragraph.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/paragraph.tokens.json new file mode 100644 index 000000000..6ee11f4a5 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/paragraph.tokens.json @@ -0,0 +1,25 @@ +{ + "utrecht": { + "paragraph": { + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "{leiden.font-size.md}" }, + "font-weight": { "value": "{leiden.typography.font-weight.normal}" }, + "line-height": { "value": "1.5em" }, + "margin-block-start": { "value": 0 }, + "margin-block-end": { "value": 0 }, + "lead": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + }, + "small": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/surface.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/surface.tokens.json new file mode 100644 index 000000000..b4d0a492c --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/surface.tokens.json @@ -0,0 +1,8 @@ +{ + "utrecht": { + "surface": { + "background-color": { "value": "{leiden.color.white.100}" }, + "color": {} + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/table.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/table.tokens.json new file mode 100644 index 000000000..c05b21af7 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/table.tokens.json @@ -0,0 +1,60 @@ +{ + "utrecht": { + "table": { + "border-color": { "value": "{leiden.color.lightgrey.89}" }, + "border-width": { "value": "{leiden.size.4xs}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": "{leiden.size.md}" }, + "caption": { + "font-weight": {}, + "font-family": {}, + "font-size": {}, + "color": {}, + "line-height": {}, + "text-align": {}, + "margin-block-end": {} + }, + "header": { + "font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "background-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" }, + "border-block-end-color": {}, + "border-block-end-width": {} + }, + "header-cell": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{leiden.typography.font-weight.bold}" }, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" } + }, + "cell": { + "line-height": {}, + "padding-block-end": { "value": "{leiden.size.md}" }, + "padding-block-start": { "value": "{leiden.size.md}" }, + "padding-inline-end": { "value": "{leiden.size.md}" }, + "padding-inline-start": { "value": "{leiden.size.md}" }, + "icon": { + "size": {} + } + }, + "row": { + "border-block-end-color": { "value": "{leiden.color.lightgrey.89}" }, + "border-block-end-width": { "value": "{leiden.size.4xs}" }, + "padding-inline-end": {}, + "padding-inline-start": {}, + "alternate-odd": { + "background-color": {}, + "color": {} + }, + "alternate-even": { + "background-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/component/utrecht/textbox.tokens.json b/proprietary/leiden-design-tokens/src/component/utrecht/textbox.tokens.json new file mode 100644 index 000000000..af04d3fee --- /dev/null +++ b/proprietary/leiden-design-tokens/src/component/utrecht/textbox.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "textbox": { + "border-bottom-width": {}, + "border-color": { "value": "{leiden.color.grey.33}" }, + "border-radius": { "value": "0px" }, + "border-width": { "value": "{leiden.size.4xs}" }, + "color": { "value": "{leiden.color.grey.11}" }, + "font-family": { "value": "{leiden.typography.sans-serif.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{leiden.size.xs}" }, + "padding-block-start": { "value": "{leiden.size.xs}" }, + "padding-inline-end": { "value": "{leiden.size.sm}" }, + "padding-inline-start": { "value": "{leiden.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/leiden-design-tokens/src/config.json b/proprietary/leiden-design-tokens/src/config.json index 4fcab27a8..4a1ee46a9 100644 --- a/proprietary/leiden-design-tokens/src/config.json +++ b/proprietary/leiden-design-tokens/src/config.json @@ -3,5 +3,46 @@ "name": "Leiden", "prefix": "leiden", "npm": "@nl-design-system-unstable/leiden-design-tokens", - "stories": ["react-utrecht-button--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" + ] } diff --git a/proprietary/leiden-design-tokens/src/font.js b/proprietary/leiden-design-tokens/src/font.js new file mode 100644 index 000000000..aa985c422 --- /dev/null +++ b/proprietary/leiden-design-tokens/src/font.js @@ -0,0 +1,6 @@ +import '@fontsource/open-sans/400.css'; +import '@fontsource/open-sans/400-italic.css'; +import '@fontsource/open-sans/600.css'; +import '@fontsource/open-sans/600-italic.css'; +import '@fontsource/open-sans/700.css'; +import '@fontsource/open-sans/700-italic.css'; diff --git a/proprietary/leiden-design-tokens/src/font.scss b/proprietary/leiden-design-tokens/src/font.scss deleted file mode 100644 index 2aab06d11..000000000 --- a/proprietary/leiden-design-tokens/src/font.scss +++ /dev/null @@ -1 +0,0 @@ -/* Place any @font-face definitions here */ diff --git a/proprietary/leiden-design-tokens/src/font/.gitignore b/proprietary/leiden-design-tokens/src/font/.gitignore deleted file mode 100644 index c3022ba01..000000000 --- a/proprietary/leiden-design-tokens/src/font/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -*.eot -*.svg -*.ttf -*.woff -*.woff2 diff --git a/proprietary/leiden-design-tokens/src/index.scss b/proprietary/leiden-design-tokens/src/index.scss index 24a48d315..59ac9e2b4 100644 --- a/proprietary/leiden-design-tokens/src/index.scss +++ b/proprietary/leiden-design-tokens/src/index.scss @@ -5,7 +5,3 @@ */ @import "./design-tokens.css"; - -/* stylelint-disable block-no-empty */ -.leiden-theme { -} diff --git a/proprietary/noaberkracht-design-tokens/LICENSE.md b/proprietary/noaberkracht-design-tokens/LICENSE.md new file mode 100644 index 000000000..718e897d3 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/LICENSE.md @@ -0,0 +1,17 @@ +# Auteursrecht Noaberkracht + +Copyright (c) 2023 Noaberkracht + +## Logo en huisstijl + +Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Noaberkracht. + +Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Noaberkracht 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 Noaberkracht. diff --git a/proprietary/noaberkracht-design-tokens/README.md b/proprietary/noaberkracht-design-tokens/README.md new file mode 100644 index 000000000..9d1f9653c --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/README.md @@ -0,0 +1,3 @@ +# NL Design System design tokens Noaberkracht + +These tokens have been obtained by analysing the [website of Noaberkracht](https://werkenbijnoaberkracht.nl/). diff --git a/proprietary/noaberkracht-design-tokens/documentation/color.stories.mdx b/proprietary/noaberkracht-design-tokens/documentation/color.stories.mdx new file mode 100644 index 000000000..746f03e58 --- /dev/null +++ b/proprietary/noaberkracht-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"; + + + +# Color + +## Find a color + + + +## Color palette + + diff --git a/proprietary/noaberkracht-design-tokens/documentation/components.stories.mdx b/proprietary/noaberkracht-design-tokens/documentation/components.stories.mdx new file mode 100644 index 000000000..0937db7f1 --- /dev/null +++ b/proprietary/noaberkracht-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"; + + + +# Components + + + + diff --git a/proprietary/noaberkracht-design-tokens/documentation/design-tokens.stories.mdx b/proprietary/noaberkracht-design-tokens/documentation/design-tokens.stories.mdx new file mode 100644 index 000000000..dce92c263 --- /dev/null +++ b/proprietary/noaberkracht-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"; + + + +# Design Tokens + + token.path[0] !== config.prefix)}> + +## Proprietary Design Tokens + + token.path[0] === config.prefix)}> diff --git a/proprietary/noaberkracht-design-tokens/documentation/readme.stories.mdx b/proprietary/noaberkracht-design-tokens/documentation/readme.stories.mdx new file mode 100644 index 000000000..e1d67fa5d --- /dev/null +++ b/proprietary/noaberkracht-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"; + + + +{markdown} diff --git a/proprietary/noaberkracht-design-tokens/package.json b/proprietary/noaberkracht-design-tokens/package.json new file mode 100644 index 000000000..08ddf1f62 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/package.json @@ -0,0 +1,40 @@ +{ + "version": "1.0.0-alpha.1", + "author": "Community for NL Design System", + "description": "NL Design System design tokens for Noaberkracht", + "website": "https://werkenbijnoaberkracht.nl/", + "keywords": [ + "nl-design-system", + "conduction" + ], + "license": "SEE LICENSE IN LICENSE.md", + "name": "@nl-design-system-unstable/noaberkracht-design-tokens", + "private": false, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git+ssh", + "url": "git@github.com:nl-design-system/themes.git" + }, + "scripts": { + "clean": "rimraf -rf dist/", + "prebuild": "npm run clean", + "watch": "npm-run-all watch:**", + "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'", + "build": "npm-run-all build:**", + "build:scss": "sass --no-source-map src/:dist/", + "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js" + }, + "devDependencies": { + "@nl-design-system-unstable/theme-toolkit": "workspace:*", + "chokidar-cli": "3.0.0", + "npm-run-all": "4.1.5", + "rimraf": "3.0.2", + "style-dictionary": "3.8.0" + }, + "bugs": { + "url": "https://github.com/ConductionNL/conduction-theme/issues" + }, + "homepage": "https://github.com/ConductionNL/conduction-theme#readme" +} diff --git a/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json new file mode 100644 index 000000000..09a3d6487 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json @@ -0,0 +1,61 @@ +{ + "noaberkracht": { + "color": { + "primary": { + "value": "#4376fc" + }, + "primary-hover": { + "value": "#2e5ed9" + }, + "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": "{noaberkracht.color.primary}" }, + "alert-info": { "value": "#004085" }, + "alert-info-background": { "value": "#cce5ff" }, + "blue": { + "22": { + "value": "#003790", + "comment": "Base/Blue from Huisstijlhandboek, base color of website is #012c9d" + }, + "31-60t": { + "value": "#012c9d99", + "comment": "Blue with 60% transparency" + } + }, + "yellow": { + "47": { + "value": "#f0b800", + "comment": "Base/Yellow from Huisstijlhandboek, base color of website is #f0af00" + } + }, + "lightgrey": { + "96": { + "value": "#f5f5f5", + "comment": "Base/LightGrey" + } + }, + "white": { + "98": { + "value": "#fafafa" + }, + "100": { + "value": "#ffffff", + "comment": "Base/White" + } + }, + "black": { + "0": { + "value": "#000000", + "comment": "Base/Black" + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/font-size.tokens.json b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/font-size.tokens.json new file mode 100644 index 000000000..123f57406 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/font-size.tokens.json @@ -0,0 +1,17 @@ +{ + "noaberkracht": { + "font-size": { + "4xs": { "value": "8px" }, + "3xs": { "value": "10x" }, + "2xs": { "value": "12px" }, + "xs": { "value": "14px" }, + "sm": { "value": "18px" }, + "md": { "value": "24px" }, + "lg": { "value": "36px" }, + "xl": { "value": "48px" }, + "2xl": { "value": "60px" }, + "3xl": { "value": "72px" }, + "4xl": { "value": "84px" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/size.tokens.json b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/size.tokens.json new file mode 100644 index 000000000..6923879e7 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/size.tokens.json @@ -0,0 +1,17 @@ +{ + "noaberkracht": { + "size": { + "4xs": { "value": "1px" }, + "3xs": { "value": "2px" }, + "2xs": { "value": "4px" }, + "xs": { "value": "8px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "24px" }, + "xl": { "value": "32px" }, + "2xl": { "value": "48px" }, + "3xl": { "value": "72px" }, + "4xl": { "value": "96px" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/typography.tokens.json b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/typography.tokens.json new file mode 100644 index 000000000..967fa168b --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/typography.tokens.json @@ -0,0 +1,50 @@ +{ + "noaberkracht": { + "typography": { + "greycliff-cf": { + "font-family": { + "value": "greycliff-cf,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"" + } + }, + "oceanwide": { + "font-family": { + "value": "Oceanwide,ui-serif,Georgia,Cambria,Times New Roman,Times,serif" + } + }, + "sans-serif": { + "font-family": { + "value": "\"Noto Sans\", Arial, sans-serif" + } + }, + "monospace": { + "font-family": { + "value": "Monospace, \"Lucida Console\"" + } + }, + "font-weight": { + "bold": { + "value": "700" + }, + "normal": { + "value": "400" + }, + "light": { + "value": "100" + } + }, + "scale": { + "4xs": { "value": "{noaberkracht.font-size.4xs}" }, + "3xs": { "value": "{noaberkracht.font-size.3xs}" }, + "2xs": { "value": "{noaberkracht.font-size.2xs}" }, + "xs": { "value": "{noaberkracht.font-size.xs}" }, + "sm": { "value": "{noaberkracht.font-size.sm}" }, + "md": { "value": "{noaberkracht.font-size.md}" }, + "lg": { "value": "{noaberkracht.font-size.lg}" }, + "xl": { "value": "{noaberkracht.font-size.xl}" }, + "2xl": { "value": "{noaberkracht.font-size.2xl}" }, + "3xl": { "value": "{noaberkracht.font-size.3xl}" }, + "4xl": { "value": "{noaberkracht.font-size.4xl}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/common/utrecht/action.tokens.json b/proprietary/noaberkracht-design-tokens/src/common/utrecht/action.tokens.json new file mode 100644 index 000000000..d226101fc --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/common/utrecht/action.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "action": { + "busy": { "cursor": { "value": "wait" } }, + "disabled": { "cursor": { "value": "not-allowed" } }, + "submit": { "cursor": { "value": "pointer" } } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/common/utrecht/space.tokens.json b/proprietary/noaberkracht-design-tokens/src/common/utrecht/space.tokens.json new file mode 100644 index 000000000..726eee195 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/common/utrecht/space.tokens.json @@ -0,0 +1,28 @@ +{ + "utrecht": { + "space": { + "block": { + "3xs": { "value": "{noaberkracht.size.3xs}" }, + "2xs": { "value": "{noaberkracht.size.2xs}" }, + "xs": { "value": "{noaberkracht.size.xs}" }, + "sm": { "value": "{noaberkracht.size.sm}" }, + "md": { "value": "{noaberkracht.size.md}" }, + "lg": { "value": "{noaberkracht.size.lg}" }, + "xl": { "value": "{noaberkracht.size.xl}" }, + "2xl": { "value": "{noaberkracht.size.2xl}" }, + "3xl": { "value": "{noaberkracht.size.3xl}" } + }, + "inline": { + "3xs": { "value": "{noaberkracht.size.3xs}" }, + "2xs": { "value": "{noaberkracht.size.2xs}" }, + "xs": { "value": "{noaberkracht.size.xs}" }, + "sm": { "value": "{noaberkracht.size.sm}" }, + "md": { "value": "{noaberkracht.size.md}" }, + "lg": { "value": "{noaberkracht.size.lg}" }, + "xl": { "value": "{noaberkracht.size.xl}" }, + "2xl": { "value": "{noaberkracht.size.2xl}" }, + "3xl": { "value": "{noaberkracht.size.3xl}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/card-header.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/card-header.tokens.json new file mode 100644 index 000000000..ec22850c0 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/card-header.tokens.json @@ -0,0 +1,26 @@ +{ + "conduction": { + "card-header": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {} + }, + "title": { + "color": { "value": "{noaberkracht.color.blue.22}" } + }, + "date": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-size": { "value": "{noaberkracht.font-size.xs}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.light}" }, + "margin-block-end": { "value": "{noaberkracht.size.xs}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/card-wrapper.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/card-wrapper.tokens.json new file mode 100644 index 000000000..80da59270 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/card-wrapper.tokens.json @@ -0,0 +1,25 @@ +{ + "conduction": { + "card-wrapper": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "border-color": { "value": "{noaberkracht.color.blue.22}" }, + "border-style": { "value": "solid" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {}, + "border-radius": { "value": "22px" }, + "color": { "value": "{noaberkracht.color.blue.22}" }, + "hover": { + "background-color": {}, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {} + }, + "padding-inline-end": { "value": "{noaberkracht.size.md}" }, + "padding-inline-start": { "value": "{noaberkracht.size.md}" }, + "padding-block-end": { "value": "{noaberkracht.size.md}" }, + "padding-block-start": { "value": "{noaberkracht.size.md}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/pagination.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/pagination.tokens.json new file mode 100644 index 000000000..b6af5eeb7 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/pagination.tokens.json @@ -0,0 +1,45 @@ +{ + "conduction": { + "pagination": { + "container-background-color": { "value": "unset" }, + "container-padding-inline-start": { "value": "0px" }, + "container-padding-inline-end": { "value": "0px" }, + "container-padding-block-start": { "value": "0px" }, + "container-padding-block-end": { "value": "0px" }, + "item-gap": { "value": "{noaberkracht.size.2xs}" }, + "item-color": { "value": "{noaberkracht.color.black.0}" }, + "item-background-color": { "value": "{noaberkracht.color.white.100}" }, + "item-border-radius": { "value": "{noaberkracht.size.md}" }, + "item-padding-inline-start": { "value": "{noaberkracht.size.sm}" }, + "item-padding-inline-end": { "value": "{noaberkracht.size.sm}" }, + "item-padding-block-start": { "value": "{noaberkracht.size.xs}" }, + "item-padding-block-end": { "value": "{noaberkracht.size.xs}" }, + "item-font-size": { "value": "{utrecht.document.font-size}" }, + "item-font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "item-font-family": { "value": "{utrecht.document.font-family}" }, + "item-border-width": {}, + "item-border-style": {}, + "item-border-color": {}, + "navigation-button-padding-inline-start": { "value": "{noaberkracht.size.xs}" }, + "navigation-button-padding-inline-end": { "value": "{noaberkracht.size.xs}" }, + "navigation-button-padding-block-start": { "value": "0px" }, + "navigation-button-padding-block-end": { "value": "0px" }, + "disabled-color": {}, + "disabled-background-color": { "value": "{noaberkracht.color.lightgrey.96}" }, + "current-page-color": { "value": "{noaberkracht.color.white.100}" }, + "current-page-background-color": { "value": "{noaberkracht.color.yellow.47}" }, + "current-page-font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "current-page-text-decoration": { "value": "unset" }, + "current-page-border-width": {}, + "current-page-border-style": {}, + "current-page-border-color": {}, + "page-hover-color": { "value": "{noaberkracht.color.yellow.47}" }, + "page-hover-background-color": { "value": "{noaberkracht.color.white.100}" }, + "page-hover-text-decoration": { "value": "unset" }, + "page-hover-text-decoration-thickness": { "value": "0px" }, + "page-hover-border-width": {}, + "page-hover-border-style": {}, + "page-hover-border-color": {} + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/select.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/select.tokens.json new file mode 100644 index 000000000..eabdf8aed --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/select.tokens.json @@ -0,0 +1,30 @@ +{ + "conduction": { + "input-select": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "border": { "value": "{noaberkracht.size.4xs} solid {noaberkracht.color.blue.22}" }, + "border-focus": { "value": "unset" }, + "border-radius": { "value": "{utrecht.form-input.border-radius}" }, + "invalid-border-color": { "value": "{noaberkracht.color.error}" }, + "padding-block-end": { "value": 0 }, + "padding-block-start": { "value": 0 }, + "hover": {}, + "focus": {}, + "list-option": { + "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, + "background-color": {}, + "hover": { + "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, + "color": {}, + "background-color": {} + } + }, + "placeholder": { + "color": { + "value": "{utrecht.form-input.placeholder.color}" + }, + "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/tabs.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/tabs.tokens.json new file mode 100644 index 000000000..b06c7c8fa --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/tabs.tokens.json @@ -0,0 +1,73 @@ +{ + "conduction": { + "tabs": { + "tab": { + "background-color": { "value": "transparent" }, + "color": { "value": "{noaberkracht.color.blue.22}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-bottom": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "bottom": { "value": "-2px" }, + "padding-block-start": { "value": "{noaberkracht.size.xs}" }, + "padding-block-end": { "value": "{noaberkracht.size.xs}" }, + "padding-inline-start": { "value": "{noaberkracht.size.sm}" }, + "padding-inline-end": { "value": "{noaberkracht.size.sm}" }, + "margin-inline-end": {}, + "font-size": { "value": "{noaberkracht.font-size.sm}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "max-width": { "value": "unset" }, + "min-width": { "value": "160px" }, + "min-height": { "value": "61px" }, + "letter-spacing": {}, + "text-transform": {}, + "selected": { + "background-color": { "value": "transparent" }, + "color": { "value": "{noaberkracht.color.blue.22}" }, + "box-shadow": {}, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-bottom": {}, + "border-bottom-width": { "value": "{noaberkracht.size.3xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{noaberkracht.color.blue.22}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "hover": { + "background-color": {}, + "color": {}, + "text-decoration": {} + } + }, + "hover": { + "background-color": {}, + "color": {}, + "text-decoration": {} + }, + "list": { + "padding-inline-start": { "value": "0px" }, + "margin-block-end": { "value": "0px" }, + "border-bottom-width": { "value": "{noaberkracht.size.3xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{noaberkracht.color.yellow.47}" } + }, + "panel": { + "background-color": {}, + "padding-block-start": { "value": "{noaberkracht.size.lg}" }, + "padding-block-end": { "value": "{noaberkracht.size.lg}" }, + "padding-inline-start": { "value": "{noaberkracht.size.lg}" }, + "padding-inline-end": { "value": "{noaberkracht.size.lg}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-top": {} + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/alert.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/alert.tokens.json new file mode 100644 index 000000000..680c4832b --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/alert.tokens.json @@ -0,0 +1,46 @@ +{ + "utrecht": { + "alert": { + "background-color": { "value": "{noaberkracht.color.alert-info-background}" }, + "border-color": {}, + "border-width": {}, + "color": { "value": "{noaberkracht.color.alert-info}" }, + "padding-block-start": { "value": "{noaberkracht.size.lg}" }, + "padding-block-end": { "value": "{noaberkracht.size.lg}" }, + "padding-inline-start": { "value": "{noaberkracht.size.lg}" }, + "padding-inline-end": { "value": "{noaberkracht.size.lg}" }, + "margin-block-start": {}, + "margin-block-end": {}, + "warning": { + "background-color": { "value": "{noaberkracht.color.alert-warning-background}" }, + "color": { "value": "{noaberkracht.color.alert-warning}" }, + "border-color": {}, + "border-width": {} + }, + "error": { + "background-color": { "value": "{noaberkracht.color.alert-error-background}" }, + "color": { "value": "{noaberkracht.color.alert-error}" }, + "border-color": {}, + "border-width": {} + }, + "ok": { + "background-color": { "value": "{noaberkracht.color.alert-succes-background}" }, + "color": { "value": "{noaberkracht.color.alert-succes}" }, + "border-color": {}, + "border-width": {} + }, + "icon": { + "color": { "value": "{noaberkracht.color.alert-info}" }, + "error": { + "color": { "value": "{noaberkracht.color.alert-error}" } + }, + "warning": { + "color": { "value": "{noaberkracht.color.alert-warning}" } + }, + "ok": { + "color": { "value": "{noaberkracht.color.alert-succes}" } + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/badge-counter.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/badge-counter.tokens.json new file mode 100644 index 000000000..569f13ab7 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/badge-counter.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "badge-counter": { + "background-color": { "value": "{noaberkracht.color.yellow.47}" }, + "border-radius": { "value": "50%" }, + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "padding-block": { "value": "{noaberkracht.size.2xs}" }, + "padding-inline": { "value": "{noaberkracht.size.2xs}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/blockquote.tokens.json new file mode 100644 index 000000000..8333ac3f1 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/blockquote.tokens.json @@ -0,0 +1,27 @@ +{ + "utrecht": { + "blockquote": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{noaberkracht.size.xl}" }, + "margin-inline-end": { "value": "{noaberkracht.size.xl}" }, + "margin-inline-block-start": {}, + "margin-inline-block-end": {}, + "font-size": {}, + "font-style": {}, + "font-family": {}, + "padding-inline-start": {}, + "padding-inline-end": {}, + "padding-inline-block-start": {}, + "padding-inline-block-end": {}, + "attribution": { + "color": {}, + "font-size": {} + }, + "content": { + "color": { "value": "{noaberkracht.color.black.0}" }, + "font-size": { "value": "{noaberkracht.font-size.md}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/button.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/button.tokens.json new file mode 100644 index 000000000..e22e53649 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/button.tokens.json @@ -0,0 +1,152 @@ +{ + "utrecht": { + "button": { + "background-color": { "value": "{noaberkracht.color.yellow.47}" }, + "border-color": { "value": "{noaberkracht.color.yellow.47}" }, + "border-radius": { "value": "9999px" }, + "border-width": { "value": "{noaberkracht.size.3xs}" }, + "color": { "value": "{noaberkracht.color.white.100}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "font-size": { "value": "inherit" }, + "font-weight": { "value": "inherit" }, + "inline-size": {}, + "letter-spacing": {}, + "line-height": {}, + "min-block-size": {}, + "min-inline-size": {}, + "padding-block-start": { "value": "{noaberkracht.size.2xs}" }, + "padding-block-end": { "value": "{noaberkracht.size.2xs}" }, + "padding-inline-start": { "value": "{noaberkracht.size.sm}" }, + "padding-inline-end": { "value": "{noaberkracht.size.sm}" }, + "text-transform": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "icon": { + "gap": { "value": "{noaberkracht.size.xs}" }, + "size": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {}, + "scale": {} + }, + "hover": { + "background-color": { "value": "{noaberkracht.color.blue.22}" }, + "border-color": { "value": "{noaberkracht.color.blue.22}" }, + "color": { "value": "{noaberkracht.color.white.100}" }, + "scale": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "primary-action": { + "background-color": { "value": "{noaberkracht.color.yellow.47}" }, + "border-color": { "value": "{noaberkracht.color.yellow.47}" }, + "border-width": { "value": "{noaberkracht.size.3xs}" }, + "color": { "value": "{noaberkracht.color.white.100}" }, + "font-weight": { "value": "inherit" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{noaberkracht.color.yellow.47}" }, + "border-color": { "value": "{noaberkracht.color.yellow.47}" }, + "color": { "value": "{noaberkracht.color.white.100}" }, + "scale": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "secondary-action": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "border-color": { "value": "{noaberkracht.color.yellow.47}" }, + "border-width": { "value": "{noaberkracht.size.3xs}" }, + "color": { "value": "{noaberkracht.color.yellow.47}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "border-color": { "value": "{noaberkracht.color.blue.22}" }, + "color": { "value": "{noaberkracht.color.blue.22}" } + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "subtle": { + "background-color": {}, + "border-color": {}, + "border-width": {}, + "color": {}, + "font-weight": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/code.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/code.tokens.json new file mode 100644 index 000000000..21293acb2 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/code.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "code": { + "background-color": { "value": "{noaberkracht.color.lightgrey.96}" }, + "color": { "value": "{noaberkracht.color.black.0}" }, + "font-family": { "value": "{noaberkracht.typography.monospace.font-family}" }, + "font-size": { "value": "inherit" }, + "line-height": {} + }, + "code-block": { + "background-color": { "value": "{noaberkracht.color.lightgrey.96}" }, + "color": { "value": "{noaberkracht.color.black.0}" }, + "font-family": { "value": "{noaberkracht.typography.monospace.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.sm}" }, + "line-height": { "value": "{noaberkracht.size.lg}" }, + "margin-block-start": { "value": "{noaberkracht.size.md}" }, + "margin-block-end": { "value": "{noaberkracht.size.md}" }, + "margin-inline-start": { "value": 0 }, + "margin-inline-end": { "value": 0 }, + "padding-block-start": { "value": "{noaberkracht.size.md}" }, + "padding-block-end": { "value": "{noaberkracht.size.md}" }, + "padding-inline-start": { "value": "{noaberkracht.size.md}" }, + "padding-inline-end": { "value": "{noaberkracht.size.md}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/document.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/document.tokens.json new file mode 100644 index 000000000..499bc0d48 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/document.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "document": { + "background-color": { "value": "{noaberkracht.color.white.98}" }, + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.sm}" }, + "font-weight": {}, + "line-height": {} + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json new file mode 100644 index 000000000..e26356113 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "alert": { + "icon": { + "gap": { "value": "{noaberkracht.size.xs}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json new file mode 100644 index 000000000..85b3d874f --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "badge-counter": { + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "font-style": {}, + "text-decoration": { "value": "none" }, + "min-block-size": {}, + "min-inline-size": {} + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json new file mode 100644 index 000000000..079152313 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "form-input": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{noaberkracht.color.blue.22}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json new file mode 100644 index 000000000..f8bbc2134 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json @@ -0,0 +1,7 @@ +{ + "utrecht": { + "icon": { + "gap": { "value": "{noaberkracht.size.xs}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json new file mode 100644 index 000000000..dae9e4710 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "page-footer": { + "min-height": {}, + "logo": { + "max-height": {}, + "max-width": { "value": "150px" } + }, + "background-position": {} + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json new file mode 100644 index 000000000..066e1b2a0 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "logo": { + "max-height": {}, + "max-width": { "value": "130px" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json new file mode 100644 index 000000000..1104f49a8 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json @@ -0,0 +1,24 @@ +{ + "utrecht": { + "table": { + "background-color": {}, + "header": { + "border-block-end-color": {}, + "border-block-end-width": {}, + "font-family": {} + }, + "row": { + "hover": { + "background-color": {}, + "color": {} + } + }, + "body": { + "border": {} + }, + "caption": { + "font-style": {} + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json new file mode 100644 index 000000000..1f5d10530 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "textbox": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{noaberkracht.color.blue.22}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/form-input.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/form-input.tokens.json new file mode 100644 index 000000000..793688cd1 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/form-input.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "form-input": { + "border-bottom-width": {}, + "border-color": { "value": "{noaberkracht.color.blue.22}" }, + "border-radius": { "value": "9999px" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, + "font-size": { "value": "14px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{noaberkracht.size.xs}" }, + "padding-block-start": { "value": "{noaberkracht.size.xs}" }, + "padding-inline-end": { "value": "{noaberkracht.size.md}" }, + "padding-inline-start": { "value": "{noaberkracht.size.md}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/heading.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/heading.tokens.json new file mode 100644 index 000000000..42aece9e5 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/heading.tokens.json @@ -0,0 +1,49 @@ +{ + "utrecht": { + "heading-1": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.2xl}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{noaberkracht.size.2xl}" }, + "margin-block-start": { "value": "{noaberkracht.size.md}" } + }, + "heading-2": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.xl}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{noaberkracht.size.2xl}" }, + "margin-block-start": { "value": "{noaberkracht.size.md}" } + }, + "heading-3": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.lg}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{noaberkracht.size.xl}" }, + "margin-block-start": { "value": "{noaberkracht.size.md}" } + }, + "heading-4": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.md}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{noaberkracht.size.lg}" }, + "margin-block-start": { "value": "{noaberkracht.size.md}" } + }, + "heading-5": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.sm}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.light}" }, + "line-height": {}, + "margin-block-end": { "value": "{noaberkracht.size.lg}" }, + "margin-block-start": { "value": "{noaberkracht.size.md}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/icon.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/icon.tokens.json new file mode 100644 index 000000000..98efefafa --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/icon.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "icon": { + "color": {}, + "size": {}, + "inset-block-start": {}, + "baseline": { + "inset-block-start": {} + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/link.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/link.tokens.json new file mode 100644 index 000000000..aaf091f69 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/link.tokens.json @@ -0,0 +1,33 @@ +{ + "utrecht": { + "link": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-color": { "value": "{noaberkracht.color.blue.22}" }, + "text-decoration-thickness": { "value": "{noaberkracht.size.4xs}" }, + "text-underline-offset": { "value": "{noaberkracht.size.3xs}" }, + "active": { + "color": {} + }, + "focus": { + "color": {}, + "text-decoration": {}, + "text-decoration-thickness": {} + }, + "hover": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "text-decoration": {}, + "text-decoration-thickness": { "value": "{noaberkracht.size.4xs}" } + }, + "placeholder": { + "color": {} + }, + "visited": { + "color": { "value": "{noaberkracht.color.blue.22}" } + }, + "icon": { + "size": { "value": "{noaberkracht.size.sm}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/list.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/list.tokens.json new file mode 100644 index 000000000..6171908e4 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/list.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "ordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{noaberkracht.size.sm}" }, + "margin-block-end": { "value": "{noaberkracht.size.sm}" }, + "padding-inline-start": { "value": "{noaberkracht.size.xl}" }, + "item": { + "margin-block-start": { "value": "{noaberkracht.size.2xs}" }, + "margin-block-end": { "value": "{noaberkracht.size.2xs}" }, + "padding-inline-start": { "value": "1ch" } + } + }, + "unordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{noaberkracht.size.md}" }, + "margin-block-end": { "value": 0 }, + "padding-inline-start": { "value": "2ch" }, + "item": { + "margin-block-start": { "value": "{noaberkracht.size.xs}" }, + "margin-block-end": { "value": "{noaberkracht.size.xs}" }, + "padding-inline-start": { "value": "1ch" } + }, + "marker": { + "color": { "value": "{noaberkracht.color.blue.22}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/page-footer.tokens.json new file mode 100644 index 000000000..4b7a60971 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/page-footer.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "page-footer": { + "background-color": { "value": "{noaberkracht.color.yellow.47}" }, + "background-image": { "value": "unset" }, + "color": { "value": "{noaberkracht.color.white.100}" }, + "padding-inline-end": { "value": "{noaberkracht.size.sm}" }, + "padding-inline-start": { "value": "{noaberkracht.size.sm}" }, + "padding-block-end": { "value": "{noaberkracht.size.2xl}" }, + "padding-block-start": { "value": "{noaberkracht.size.2xl}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/page-header.tokens.json new file mode 100644 index 000000000..c02f2e6bf --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "background-color": { "value": "{noaberkracht.color.blue.31-60t}" }, + "color": { "value": "{noaberkracht.color.white.100}" }, + "padding-block-start": { "value": "{noaberkracht.size.sm}" }, + "padding-block-end": { "value": "{noaberkracht.size.sm}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/page.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/page.tokens.json new file mode 100644 index 000000000..c023234cf --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/page.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "page": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{noaberkracht.size.lg}" }, + "margin-inline-end": { "value": "{noaberkracht.size.lg}" }, + "max-inline-size": { "value": "1140px" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/paragraph.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/paragraph.tokens.json new file mode 100644 index 000000000..17ad56686 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/paragraph.tokens.json @@ -0,0 +1,25 @@ +{ + "utrecht": { + "paragraph": { + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, + "font-size": { "value": "{noaberkracht.font-size.sm}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "line-height": { "value": "1.5em" }, + "margin-block-start": { "value": 0 }, + "margin-block-end": { "value": 0 }, + "lead": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + }, + "small": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/surface.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/surface.tokens.json new file mode 100644 index 000000000..e9c507c6c --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/surface.tokens.json @@ -0,0 +1,8 @@ +{ + "utrecht": { + "surface": { + "background-color": { "value": "{noaberkracht.color.white.98}" }, + "color": {} + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/table.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/table.tokens.json new file mode 100644 index 000000000..f6659c590 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/table.tokens.json @@ -0,0 +1,60 @@ +{ + "utrecht": { + "table": { + "border-color": { "value": "{noaberkracht.color.lightgrey.96}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": "{noaberkracht.size.md}" }, + "caption": { + "font-weight": {}, + "font-family": {}, + "font-size": {}, + "color": {}, + "line-height": {}, + "text-align": {}, + "margin-block-end": {} + }, + "header": { + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "background-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" }, + "border-block-end-color": {}, + "border-block-end-width": {} + }, + "header-cell": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" } + }, + "cell": { + "line-height": {}, + "padding-block-end": { "value": "{noaberkracht.size.md}" }, + "padding-block-start": { "value": "{noaberkracht.size.md}" }, + "padding-inline-end": { "value": "{noaberkracht.size.md}" }, + "padding-inline-start": { "value": "{noaberkracht.size.md}" }, + "icon": { + "size": {} + } + }, + "row": { + "border-block-end-color": { "value": "{noaberkracht.color.lightgrey.96}" }, + "border-block-end-width": { "value": "{noaberkracht.size.4xs}" }, + "padding-inline-end": {}, + "padding-inline-start": {}, + "alternate-odd": { + "background-color": {}, + "color": {} + }, + "alternate-even": { + "background-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/textbox.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/textbox.tokens.json new file mode 100644 index 000000000..74b24f93e --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/textbox.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "textbox": { + "border-bottom-width": {}, + "border-color": { "value": "{noaberkracht.color.blue.22}" }, + "border-radius": { "value": "9999px" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, + "font-size": { "value": "14px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{noaberkracht.size.xs}" }, + "padding-block-start": { "value": "{noaberkracht.size.xs}" }, + "padding-inline-end": { "value": "{noaberkracht.size.md}" }, + "padding-inline-start": { "value": "{noaberkracht.size.md}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/config.json b/proprietary/noaberkracht-design-tokens/src/config.json new file mode 100644 index 000000000..6b6c0a548 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/config.json @@ -0,0 +1,48 @@ +{ + "fullName": "Noaberkracht", + "name": "Noaberkracht", + "prefix": "noaberkracht", + "npm": "@nl-design-system-unstable/noaberkracht-design-tokens", + "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" + ] +} diff --git a/proprietary/noaberkracht-design-tokens/src/font.scss b/proprietary/noaberkracht-design-tokens/src/font.scss new file mode 100644 index 000000000..03e7c571e --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/font.scss @@ -0,0 +1,11 @@ +/* Place any @font-face definitions here */ + +@font-face { + font-family: "greycliff-cf"; + src: url("../src/font/GreycliffCF.woff2") format("woff2"); +} + +@font-face { + font-family: "Oceanwide"; + src: url("../src/font/Oceanwide.woff2") format("woff2"); +} diff --git a/proprietary/noaberkracht-design-tokens/src/font/GreycliffCF.woff2 b/proprietary/noaberkracht-design-tokens/src/font/GreycliffCF.woff2 new file mode 100644 index 000000000..3d36c1b01 Binary files /dev/null and b/proprietary/noaberkracht-design-tokens/src/font/GreycliffCF.woff2 differ diff --git a/proprietary/noaberkracht-design-tokens/src/font/Oceanwide.woff2 b/proprietary/noaberkracht-design-tokens/src/font/Oceanwide.woff2 new file mode 100644 index 000000000..0829360c8 Binary files /dev/null and b/proprietary/noaberkracht-design-tokens/src/font/Oceanwide.woff2 differ diff --git a/proprietary/noaberkracht-design-tokens/src/index.scss b/proprietary/noaberkracht-design-tokens/src/index.scss new file mode 100644 index 000000000..a3295344e --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/index.scss @@ -0,0 +1,8 @@ +/** + * @license SEE LICENSE.md + * Copyright (c) 2021 NL Design System Community + * All rights reserved + */ + +@import "./design-tokens.css"; +@import "./font.css"; diff --git a/proprietary/noaberkracht-design-tokens/style-dictionary.config.js b/proprietary/noaberkracht-design-tokens/style-dictionary.config.js new file mode 100644 index 000000000..d43b0fd25 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/style-dictionary.config.js @@ -0,0 +1,6 @@ +const config = require('./src/config.json'); +const { createConfig } = require('../../style-dictionary-config'); + +module.exports = createConfig({ + selector: `.${config.prefix}-theme`, +}); diff --git a/proprietary/noordwijk-design-tokens/src/config.json b/proprietary/noordwijk-design-tokens/src/config.json index d9e79b735..933959129 100644 --- a/proprietary/noordwijk-design-tokens/src/config.json +++ b/proprietary/noordwijk-design-tokens/src/config.json @@ -3,5 +3,46 @@ "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" + ] } diff --git a/proprietary/tubbergen-design-tokens/LICENSE.md b/proprietary/tubbergen-design-tokens/LICENSE.md new file mode 100644 index 000000000..353124eb9 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/LICENSE.md @@ -0,0 +1,17 @@ +# Auteursrecht Gemeente Tubbergen + +Copyright (c) 2023 Gemeente Tubbergen + +## Logo en huisstijl + +Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Gemeente Tubbergen. + +Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Gemeente Tubbergen 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 Gemeente Tubbergen. diff --git a/proprietary/tubbergen-design-tokens/README.md b/proprietary/tubbergen-design-tokens/README.md new file mode 100644 index 000000000..de2876860 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/README.md @@ -0,0 +1,3 @@ +# NL Design System design tokens Gemeente Tubbergen + +These tokens have been obtained by analysing the [website of Gemeente Tubbergen](https://www.tubbergen.nl/). diff --git a/proprietary/tubbergen-design-tokens/documentation/color.stories.mdx b/proprietary/tubbergen-design-tokens/documentation/color.stories.mdx new file mode 100644 index 000000000..746f03e58 --- /dev/null +++ b/proprietary/tubbergen-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"; + + + +# Color + +## Find a color + + + +## Color palette + + diff --git a/proprietary/tubbergen-design-tokens/documentation/components.stories.mdx b/proprietary/tubbergen-design-tokens/documentation/components.stories.mdx new file mode 100644 index 000000000..0937db7f1 --- /dev/null +++ b/proprietary/tubbergen-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"; + + + +# Components + + + + diff --git a/proprietary/tubbergen-design-tokens/documentation/design-tokens.stories.mdx b/proprietary/tubbergen-design-tokens/documentation/design-tokens.stories.mdx new file mode 100644 index 000000000..dce92c263 --- /dev/null +++ b/proprietary/tubbergen-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"; + + + +# Design Tokens + + token.path[0] !== config.prefix)}> + +## Proprietary Design Tokens + + token.path[0] === config.prefix)}> diff --git a/proprietary/tubbergen-design-tokens/documentation/readme.stories.mdx b/proprietary/tubbergen-design-tokens/documentation/readme.stories.mdx new file mode 100644 index 000000000..e1d67fa5d --- /dev/null +++ b/proprietary/tubbergen-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"; + + + +{markdown} diff --git a/proprietary/tubbergen-design-tokens/package.json b/proprietary/tubbergen-design-tokens/package.json new file mode 100644 index 000000000..f5e0a9f16 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/package.json @@ -0,0 +1,42 @@ +{ + "version": "1.0.0-alpha.1", + "author": "Community for NL Design System", + "description": "NL Design System design tokens for Gemeente Tubbergen", + "website": "https://gemeente.tubbergen.nl/", + "keywords": [ + "nl-design-system", + "conduction" + ], + "license": "SEE LICENSE IN LICENSE.md", + "name": "@nl-design-system-unstable/tubbergen-design-tokens", + "private": false, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git+ssh", + "url": "git@github.com:nl-design-system/themes.git" + }, + "scripts": { + "clean": "rimraf -rf dist/", + "prebuild": "npm run clean", + "watch": "npm-run-all watch:**", + "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'", + "build": "npm-run-all build:**", + "build:scss": "sass --no-source-map src/:dist/", + "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js" + }, + "devDependencies": { + "@fontsource/lato": "5.0.12", + "@fontsource/montserrat": "5.0.8", + "@nl-design-system-unstable/theme-toolkit": "workspace:*", + "chokidar-cli": "3.0.0", + "npm-run-all": "4.1.5", + "rimraf": "3.0.2", + "style-dictionary": "3.8.0" + }, + "bugs": { + "url": "https://github.com/ConductionNL/conduction-theme/issues" + }, + "homepage": "https://github.com/ConductionNL/conduction-theme#readme" +} diff --git a/proprietary/tubbergen-design-tokens/src/brand/tubbergen/color.tokens.json b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/color.tokens.json new file mode 100644 index 000000000..5de46ffa1 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/color.tokens.json @@ -0,0 +1,120 @@ +{ + "tubbergen": { + "color": { + "primary": { + "value": "{tubbergen.color.green.21}" + }, + "primary-hover": { + "value": "{tubbergen.color.green.11}" + }, + "error": { "value": "#d62410" }, + "alert-error": { "value": "{tubbergen.color.black.20}" }, + "alert-error-background": { "value": "#f8d7da" }, + "warning": { "value": "#ffc107" }, + "alert-warning": { "value": "{tubbergen.color.black.20}" }, + "alert-warning-background": { "value": "#fff3cd" }, + "succes": { "value": "#28a745" }, + "alert-succes": { "value": "{tubbergen.color.black.20}" }, + "alert-succes-background": { "value": "#d4edda" }, + "info": { "value": "{tubbergen.color.green.24}" }, + "alert-info": { "value": "{tubbergen.color.black.20}" }, + "alert-info-background": { "value": "{tubbergen.color.green.89}" }, + "green": { + "11": { + "value": "#063318" + }, + "16": { + "value": "#084a22" + }, + "21": { + "value": "#0b612d", + "comment": "Base/Green" + }, + "24": { + "value": "#067432" + }, + "76": { + "value": "#b0d4be" + }, + "89": { + "value": "#d5efdf" + } + }, + "blue": { + "36": { + "value": "#006cb9" + }, + "48": { + "value": "#2e79c6" + }, + "84": { + "value": "#ccd4df", + "comment": "Base/Blue" + }, + "94": { + "value": "#edeff2" + }, + "96": { + "value": "#f2f4f7" + } + }, + "white": { + "98": { + "value": "#fafafa" + }, + "100": { + "value": "#ffffff", + "comment": "Base/White" + } + }, + "black": { + "0": { + "value": "#000000" + }, + "13": { + "value": "#222222", + "comment": "Base/Black" + }, + "20": { + "value": "#333333" + }, + "33": { + "value": "#555555" + } + }, + "yellow": { + "0": { + "value": "#f0b700", + "comment": "Base/Yellow" + } + }, + "grey": { + "38": { + "value": "#5c6066" + }, + "42": { + "value": "#6b6b6b" + }, + "46": { + "value": "#767676" + }, + "64": { + "value": "#9aa1ab", + "comment": "Base/Grey" + }, + "72": { + "value": "#AEB6C2" + } + }, + "lightgrey": { + "89": { + "value": "#e4e4e4", + "comment": "Base/LightGrey" + }, + "96": { + "value": "#f5f5f5" + } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/brand/tubbergen/font-size.tokens.json b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/font-size.tokens.json new file mode 100644 index 000000000..64a396c88 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/font-size.tokens.json @@ -0,0 +1,17 @@ +{ + "tubbergen": { + "font-size": { + "4xs": { "value": "5px" }, + "3xs": { "value": "8px" }, + "2xs": { "value": "10px" }, + "xs": { "value": "12px" }, + "sm": { "value": "14px" }, + "md": { "value": "16px" }, + "lg": { "value": "18px" }, + "xl": { "value": "24px" }, + "2xl": { "value": "32px" }, + "3xl": { "value": "48px" }, + "4xl": { "value": "58px" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/brand/tubbergen/size.tokens.json b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/size.tokens.json new file mode 100644 index 000000000..9d48885f5 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/size.tokens.json @@ -0,0 +1,17 @@ +{ + "tubbergen": { + "size": { + "4xs": { "value": "1px" }, + "3xs": { "value": "2px" }, + "2xs": { "value": "4px" }, + "xs": { "value": "8px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "24px" }, + "xl": { "value": "32px" }, + "2xl": { "value": "48px" }, + "3xl": { "value": "72px" }, + "4xl": { "value": "96px" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/brand/tubbergen/typography.tokens.json b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/typography.tokens.json new file mode 100644 index 000000000..f42aa896f --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/brand/tubbergen/typography.tokens.json @@ -0,0 +1,45 @@ +{ + "tubbergen": { + "typography": { + "lato": { + "font-family": { + "value": "\"Lato\", Arial, sans-serif" + } + }, + "montserrat": { + "font-family": { + "value": "\"Montserrat\", Arial, sans-serif" + } + }, + "monospace": { + "font-family": { + "value": "Monospace, \"Lucida Console\"" + } + }, + "font-weight": { + "bold": { + "value": "700" + }, + "normal": { + "value": "400" + }, + "light": { + "value": "100" + } + }, + "scale": { + "4xs": { "value": "{tubbergen.font-size.4xs}" }, + "3xs": { "value": "{tubbergen.font-size.3xs}" }, + "2xs": { "value": "{tubbergen.font-size.2xs}" }, + "xs": { "value": "{tubbergen.font-size.xs}" }, + "sm": { "value": "{tubbergen.font-size.sm}" }, + "md": { "value": "{tubbergen.font-size.md}" }, + "lg": { "value": "{tubbergen.font-size.lg}" }, + "xl": { "value": "{tubbergen.font-size.xl}" }, + "2xl": { "value": "{tubbergen.font-size.2xl}" }, + "3xl": { "value": "{tubbergen.font-size.3xl}" }, + "4xl": { "value": "{tubbergen.font-size.4xl}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/common/utrecht/action.tokens.json b/proprietary/tubbergen-design-tokens/src/common/utrecht/action.tokens.json new file mode 100644 index 000000000..d226101fc --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/common/utrecht/action.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "action": { + "busy": { "cursor": { "value": "wait" } }, + "disabled": { "cursor": { "value": "not-allowed" } }, + "submit": { "cursor": { "value": "pointer" } } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/common/utrecht/space.tokens.json b/proprietary/tubbergen-design-tokens/src/common/utrecht/space.tokens.json new file mode 100644 index 000000000..8ff35c8ce --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/common/utrecht/space.tokens.json @@ -0,0 +1,28 @@ +{ + "utrecht": { + "space": { + "block": { + "3xs": { "value": "{tubbergen.size.3xs}" }, + "2xs": { "value": "{tubbergen.size.2xs}" }, + "xs": { "value": "{tubbergen.size.xs}" }, + "sm": { "value": "{tubbergen.size.sm}" }, + "md": { "value": "{tubbergen.size.md}" }, + "lg": { "value": "{tubbergen.size.lg}" }, + "xl": { "value": "{tubbergen.size.xl}" }, + "2xl": { "value": "{tubbergen.size.2xl}" }, + "3xl": { "value": "{tubbergen.size.3xl}" } + }, + "inline": { + "3xs": { "value": "{tubbergen.size.3xs}" }, + "2xs": { "value": "{tubbergen.size.2xs}" }, + "xs": { "value": "{tubbergen.size.xs}" }, + "sm": { "value": "{tubbergen.size.sm}" }, + "md": { "value": "{tubbergen.size.md}" }, + "lg": { "value": "{tubbergen.size.lg}" }, + "xl": { "value": "{tubbergen.size.xl}" }, + "2xl": { "value": "{tubbergen.size.2xl}" }, + "3xl": { "value": "{tubbergen.size.3xl}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/conduction/card-header.tokens.json b/proprietary/tubbergen-design-tokens/src/component/conduction/card-header.tokens.json new file mode 100644 index 000000000..acbbeeaaf --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/conduction/card-header.tokens.json @@ -0,0 +1,26 @@ +{ + "conduction": { + "card-header": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {} + }, + "title": { + "color": { "value": "{utrecht.document.color}" } + }, + "date": { + "color": { "value": "{utrecht.document.color}" }, + "font-size": { "value": "{tubbergen.font-size.sm}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.light}" }, + "margin-block-end": { "value": "{tubbergen.size.xs}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/conduction/card-wrapper.tokens.json b/proprietary/tubbergen-design-tokens/src/component/conduction/card-wrapper.tokens.json new file mode 100644 index 000000000..ffb643123 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/conduction/card-wrapper.tokens.json @@ -0,0 +1,25 @@ +{ + "conduction": { + "card-wrapper": { + "background-color": { "value": "{tubbergen.color.green.89}" }, + "border-color": {}, + "border-style": {}, + "border-width": { "value": "unset" }, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {}, + "border-radius": { "value": "0px" }, + "color": { "value": "{utrecht.document.color}" }, + "hover": { + "background-color": {}, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {} + }, + "padding-inline-end": { "value": "{tubbergen.size.xl}" }, + "padding-inline-start": { "value": "{tubbergen.size.xl}" }, + "padding-block-end": { "value": "{tubbergen.size.sm}" }, + "padding-block-start": { "value": "{tubbergen.size.sm}" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/conduction/pagination.tokens.json b/proprietary/tubbergen-design-tokens/src/component/conduction/pagination.tokens.json new file mode 100644 index 000000000..10774b8c1 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/conduction/pagination.tokens.json @@ -0,0 +1,45 @@ +{ + "conduction": { + "pagination": { + "container-background-color": { "value": "unset" }, + "container-padding-inline-start": { "value": "0px" }, + "container-padding-inline-end": { "value": "0px" }, + "container-padding-block-start": { "value": "0px" }, + "container-padding-block-end": { "value": "0px" }, + "item-gap": { "value": "{tubbergen.size.2xs}" }, + "item-color": { "value": "{tubbergen.color.white.100}" }, + "item-background-color": { "value": "{tubbergen.color.primary}" }, + "item-border-radius": { "value": "0px" }, + "item-padding-inline-start": { "value": "15px" }, + "item-padding-inline-end": { "value": "15px" }, + "item-padding-block-start": { "value": "7.5px" }, + "item-padding-block-end": { "value": "7.5px" }, + "item-font-size": { "value": "17.6px" }, + "item-font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "item-font-family": { "value": "{utrecht.document.font-family}" }, + "item-border-width": {}, + "item-border-style": {}, + "item-border-color": {}, + "navigation-button-padding-inline-start": { "value": "{tubbergen.size.xs}" }, + "navigation-button-padding-inline-end": { "value": "{tubbergen.size.xs}" }, + "navigation-button-padding-block-start": { "value": "0px" }, + "navigation-button-padding-block-end": { "value": "0px" }, + "disabled-color": { "value": "{tubbergen.color.white.100}" }, + "disabled-background-color": { "value": "{tubbergen.color.lightgrey.89}" }, + "current-page-color": { "value": "{tubbergen.color.blue.36}" }, + "current-page-background-color": { "value": "{tubbergen.color.white.100}" }, + "current-page-font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "current-page-text-decoration": { "value": "unset" }, + "current-page-border-width": {}, + "current-page-border-style": {}, + "current-page-border-color": {}, + "page-hover-color": { "value": "{tubbergen.color.white.100}" }, + "page-hover-background-color": { "value": "{tubbergen.color.green.16}" }, + "page-hover-text-decoration": { "value": "unset" }, + "page-hover-text-decoration-thickness": { "value": "0px" }, + "page-hover-border-width": {}, + "page-hover-border-style": {}, + "page-hover-border-color": {} + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/conduction/select.tokens.json b/proprietary/tubbergen-design-tokens/src/component/conduction/select.tokens.json new file mode 100644 index 000000000..0297aaa21 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/conduction/select.tokens.json @@ -0,0 +1,30 @@ +{ + "conduction": { + "input-select": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "border": { "value": "{tubbergen.size.4xs} solid {tubbergen.color.grey.46}" }, + "border-focus": { "value": "unset" }, + "border-radius": { "value": "{utrecht.form-input.border-radius}" }, + "invalid-border-color": { "value": "{tubbergen.color.error}" }, + "padding-block-end": { "value": 0 }, + "padding-block-start": { "value": 0 }, + "hover": {}, + "focus": {}, + "list-option": { + "font-family": { "value": "{tubbergen.typography.lato.font-family}" }, + "background-color": {}, + "hover": { + "font-family": { "value": "{tubbergen.typography.lato.font-family}" }, + "color": {}, + "background-color": {} + } + }, + "placeholder": { + "color": { + "value": "{utrecht.form-input.placeholder.color}" + }, + "font-family": { "value": "{tubbergen.typography.lato.font-family}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/conduction/tabs.tokens.json b/proprietary/tubbergen-design-tokens/src/component/conduction/tabs.tokens.json new file mode 100644 index 000000000..97a19efda --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/conduction/tabs.tokens.json @@ -0,0 +1,73 @@ +{ + "conduction": { + "tabs": { + "tab": { + "background-color": { "value": "{tubbergen.color.blue.96}" }, + "color": { "value": "{tubbergen.color.grey.38}" }, + "border-width": { "value": "{tubbergen.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{tubbergen.color.blue.96}" }, + "border-bottom": { "value": "0" }, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "bottom": { "value": "0px" }, + "padding-block-start": { "value": "{tubbergen.size.xs}" }, + "padding-block-end": { "value": "{tubbergen.size.xs}" }, + "padding-inline-start": { "value": "{tubbergen.size.sm}" }, + "padding-inline-end": { "value": "{tubbergen.size.sm}" }, + "margin-inline-end": { "value": "{tubbergen.size.xs}" }, + "font-size": { "value": "{tubbergen.font-size.md}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "max-width": { "value": "unset" }, + "min-width": { "value": "160px" }, + "min-height": { "value": "61px" }, + "letter-spacing": {}, + "text-transform": {}, + "selected": { + "background-color": { "value": "transparent" }, + "color": { "value": "{tubbergen.color.primary}" }, + "box-shadow": { "value": "0px 1px 0px 0px {tubbergen.color.white.100}" }, + "border-width": { "value": "{tubbergen.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{tubbergen.color.grey.72}" }, + "border-bottom": { "value": "0" }, + "border-bottom-width": { "value": "0px" }, + "border-bottom-style": { "value": "unset" }, + "border-bottom-color": { "value": "unset" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "hover": { + "background-color": { "value": "transparent" }, + "color": { "value": "{tubbergen.color.primary}" }, + "text-decoration": { "value": "underline" } + } + }, + "hover": { + "background-color": { "value": "{tubbergen.color.blue.96}" }, + "color": { "value": "{tubbergen.color.primary}" }, + "text-decoration": { "value": "underline" } + }, + "list": { + "padding-inline-start": {}, + "margin-block-end": { "value": "0px" }, + "border-bottom-width": { "value": "1px" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{tubbergen.color.grey.72}" } + }, + "panel": { + "background-color": {}, + "padding-block-start": { "value": "{tubbergen.size.lg}" }, + "padding-block-end": { "value": "{tubbergen.size.lg}" }, + "padding-inline-start": { "value": "{tubbergen.size.lg}" }, + "padding-inline-end": { "value": "{tubbergen.size.lg}" }, + "border-width": { "value": "{tubbergen.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{tubbergen.color.grey.72}" }, + "border-top": { "value": "0" } + } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/alert.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/alert.tokens.json new file mode 100644 index 000000000..c22363d92 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/alert.tokens.json @@ -0,0 +1,46 @@ +{ + "utrecht": { + "alert": { + "background-color": { "value": "{tubbergen.color.alert-info-background}" }, + "border-color": {}, + "border-width": {}, + "color": { "value": "{tubbergen.color.alert-info}" }, + "padding-block-start": { "value": "{tubbergen.size.lg}" }, + "padding-block-end": { "value": "{tubbergen.size.lg}" }, + "padding-inline-start": { "value": "{tubbergen.size.lg}" }, + "padding-inline-end": { "value": "{tubbergen.size.lg}" }, + "margin-block-start": {}, + "margin-block-end": {}, + "warning": { + "background-color": { "value": "{tubbergen.color.alert-warning-background}" }, + "color": { "value": "{tubbergen.color.alert-warning}" }, + "border-color": {}, + "border-width": {} + }, + "error": { + "background-color": { "value": "{tubbergen.color.alert-error-background}" }, + "color": { "value": "{tubbergen.color.alert-error}" }, + "border-color": {}, + "border-width": {} + }, + "ok": { + "background-color": { "value": "{tubbergen.color.alert-succes-background}" }, + "color": { "value": "{tubbergen.color.alert-succes}" }, + "border-color": {}, + "border-width": {} + }, + "icon": { + "color": { "value": "{tubbergen.color.alert-info}" }, + "error": { + "color": { "value": "{tubbergen.color.alert-error}" } + }, + "warning": { + "color": { "value": "{tubbergen.color.alert-warning}" } + }, + "ok": { + "color": { "value": "{tubbergen.color.alert-succes}" } + } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/badge-counter.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/badge-counter.tokens.json new file mode 100644 index 000000000..baeefd0c3 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/badge-counter.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "badge-counter": { + "background-color": { "value": "{tubbergen.color.primary}" }, + "border-radius": { "value": "50%" }, + "color": { "value": "{tubbergen.color.white.100}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "padding-block": { "value": "{tubbergen.size.2xs}" }, + "padding-inline": { "value": "{tubbergen.size.2xs}" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/blockquote.tokens.json new file mode 100644 index 000000000..5f67ba9c7 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/blockquote.tokens.json @@ -0,0 +1,27 @@ +{ + "utrecht": { + "blockquote": { + "background-color": { "value": "{tubbergen.color.grey.64}" }, + "color": { "value": "{tubbergen.color.grey.64}" }, + "margin-inline-start": { "value": "{tubbergen.size.xl}" }, + "margin-inline-end": { "value": "{tubbergen.size.xl}" }, + "margin-inline-block-start": {}, + "margin-inline-block-end": {}, + "font-size": {}, + "font-style": {}, + "font-family": {}, + "padding-inline-start": {}, + "padding-inline-end": {}, + "padding-inline-block-start": {}, + "padding-inline-block-end": {}, + "attribution": { + "color": {}, + "font-size": {} + }, + "content": { + "color": { "value": "{utrecht.document.color}" }, + "font-size": { "value": "{tubbergen.font-size.md}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/button.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/button.tokens.json new file mode 100644 index 000000000..87480c713 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/button.tokens.json @@ -0,0 +1,152 @@ +{ + "utrecht": { + "button": { + "background-color": { "value": "{tubbergen.color.yellow.0}" }, + "border-color": { "value": "{tubbergen.color.yellow.0}" }, + "border-radius": { "value": 0 }, + "border-width": { "value": "{tubbergen.size.3xs}" }, + "color": { "value": "{tubbergen.color.black.0}" }, + "font-family": { "value": "{tubbergen.typography.lato.font-family}" }, + "font-size": { "value": "inherit" }, + "font-weight": { "value": "inherit" }, + "inline-size": {}, + "letter-spacing": {}, + "line-height": {}, + "min-block-size": {}, + "min-inline-size": {}, + "padding-block-start": { "value": "{tubbergen.size.xs}" }, + "padding-block-end": { "value": "{tubbergen.size.xs}" }, + "padding-inline-start": { "value": "{tubbergen.size.xs}" }, + "padding-inline-end": { "value": "{tubbergen.size.xs}" }, + "text-transform": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "icon": { + "gap": { "value": "{tubbergen.size.xs}" }, + "size": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {}, + "scale": {} + }, + "hover": { + "background-color": { "value": "{tubbergen.color.blue.84}" }, + "border-color": { "value": "{tubbergen.color.blue.84}" }, + "color": { "value": "{tubbergen.color.black.0}" }, + "scale": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "primary-action": { + "background-color": { "value": "{tubbergen.color.green.76}" }, + "border-color": { "value": "{tubbergen.color.green.76}" }, + "border-width": { "value": "{tubbergen.size.3xs}" }, + "color": { "value": "{tubbergen.color.green.21}" }, + "font-weight": { "value": "inherit" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{tubbergen.color.green.76}" }, + "border-color": { "value": "{tubbergen.color.green.76}" }, + "color": { "value": "{tubbergen.color.green.21}" }, + "scale": {} + }, + "focus": { + "background-color": { "value": "{tubbergen.color.green.76}" }, + "border-color": { "value": "{tubbergen.color.green.76}" }, + "color": { "value": "{tubbergen.color.green.21}" } + }, + "pressed": { + "background-color": { "value": "{tubbergen.color.green.76}" }, + "border-color": { "value": "{tubbergen.color.green.76}" }, + "color": { "value": "{tubbergen.color.green.21}" } + } + }, + "secondary-action": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "border-color": { "value": "{tubbergen.color.primary}" }, + "border-width": { "value": "{tubbergen.size.3xs}" }, + "color": { "value": "{tubbergen.color.primary}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "border-color": { "value": "{tubbergen.color.primary-hover}" }, + "color": { "value": "{tubbergen.color.primary-hover}" } + }, + "focus": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "border-color": { "value": "{tubbergen.color.primary-hover}" }, + "color": { "value": "{tubbergen.color.primary-hover}" } + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "subtle": { + "background-color": {}, + "border-color": {}, + "border-width": {}, + "color": {}, + "font-weight": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/code.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/code.tokens.json new file mode 100644 index 000000000..5122836a4 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/code.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "code": { + "background-color": { "value": "{tubbergen.color.lightgrey.96}" }, + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{tubbergen.typography.monospace.font-family}" }, + "font-size": { "value": "inherit" }, + "line-height": {} + }, + "code-block": { + "background-color": { "value": "{tubbergen.color.lightgrey.96}" }, + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{tubbergen.typography.monospace.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.md}" }, + "line-height": { "value": "{tubbergen.size.lg}" }, + "margin-block-start": { "value": "{tubbergen.size.md}" }, + "margin-block-end": { "value": "{tubbergen.size.md}" }, + "margin-inline-start": { "value": 0 }, + "margin-inline-end": { "value": 0 }, + "padding-block-start": { "value": "{tubbergen.size.md}" }, + "padding-block-end": { "value": "{tubbergen.size.md}" }, + "padding-inline-start": { "value": "{tubbergen.size.md}" }, + "padding-inline-end": { "value": "{tubbergen.size.md}" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/document.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/document.tokens.json new file mode 100644 index 000000000..144fe09d3 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/document.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "document": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "color": { "value": "{tubbergen.color.black.20}" }, + "font-family": { "value": "{tubbergen.typography.lato.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.md}" }, + "font-weight": {}, + "line-height": {} + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json new file mode 100644 index 000000000..ef0f1b0ad --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "alert": { + "icon": { + "gap": { "value": "{tubbergen.size.xs}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json new file mode 100644 index 000000000..bbcf0468d --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "badge-counter": { + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-style": {}, + "text-decoration": { "value": "none" }, + "min-block-size": {}, + "min-inline-size": {} + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json new file mode 100644 index 000000000..c8ef41fd6 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "form-input": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{tubbergen.color.grey.42}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": { "value": "{tubbergen.color.blue.48}" }, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json new file mode 100644 index 000000000..8e9480710 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json @@ -0,0 +1,7 @@ +{ + "utrecht": { + "icon": { + "gap": { "value": "{tubbergen.size.xs}" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json new file mode 100644 index 000000000..189ce1ea5 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "page-footer": { + "min-height": { "value": "300px" }, + "logo": { + "max-height": { "value": "100px" }, + "max-width": { "value": "220px" } + }, + "background-position": {} + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json new file mode 100644 index 000000000..97abc989d --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "logo": { + "max-height": {}, + "max-width": { "value": "150px" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json new file mode 100644 index 000000000..9a46a48be --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json @@ -0,0 +1,24 @@ +{ + "utrecht": { + "table": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "header": { + "border-block-end-color": { "value": "{tubbergen.color.blue.94}" }, + "border-block-end-width": { "value": "{tubbergen.size.4xs}" }, + "font-family": { "value": "{tubbergen.typography.montserrat.font-family}" } + }, + "row": { + "hover": { + "background-color": { "value": "{tubbergen.color.blue.94}" }, + "color": { "value": "{tubbergen.color.green.21}" } + } + }, + "body": { + "border": { "value": "{tubbergen.size.4xs} solid {tubbergen.color.blue.94}" } + }, + "caption": { + "font-style": {} + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json new file mode 100644 index 000000000..99fdd174c --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "textbox": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{tubbergen.color.grey.42}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": { "value": "{tubbergen.color.blue.48}" }, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/form-input.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/form-input.tokens.json new file mode 100644 index 000000000..09443d13f --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/form-input.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "form-input": { + "border-bottom-width": {}, + "border-color": { "value": "{tubbergen.color.grey.46}" }, + "border-radius": { "value": "0px" }, + "border-width": { "value": "{tubbergen.size.4xs}" }, + "color": { "value": "{tubbergen.color.black.33}" }, + "font-family": { "value": "{tubbergen.typography.lato.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{tubbergen.size.xs}" }, + "padding-block-start": { "value": "{tubbergen.size.xs}" }, + "padding-inline-end": { "value": "{tubbergen.size.sm}" }, + "padding-inline-start": { "value": "{tubbergen.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/heading.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/heading.tokens.json new file mode 100644 index 000000000..76b97599f --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/heading.tokens.json @@ -0,0 +1,49 @@ +{ + "utrecht": { + "heading-1": { + "color": { "value": "{tubbergen.color.black.13}" }, + "font-family": { "value": "{tubbergen.typography.montserrat.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.2xl}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{tubbergen.size.sm}" }, + "margin-block-start": { "value": "{tubbergen.size.sm}" } + }, + "heading-2": { + "color": { "value": "{tubbergen.color.black.13}" }, + "font-family": { "value": "{tubbergen.typography.montserrat.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.xl}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.bold}" }, + "line-height": {}, + "margin-block-end": { "value": "{tubbergen.size.xs}" }, + "margin-block-start": { "value": 0 } + }, + "heading-3": { + "color": { "value": "{tubbergen.color.black.13}" }, + "font-family": { "value": "{tubbergen.typography.montserrat.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.lg}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{tubbergen.size.2xs}" }, + "margin-block-start": { "value": 0 } + }, + "heading-4": { + "color": { "value": "{tubbergen.color.black.13}" }, + "font-family": { "value": "{tubbergen.typography.montserrat.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.md}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": 0 } + }, + "heading-5": { + "color": { "value": "{tubbergen.color.black.13}" }, + "font-family": { "value": "{tubbergen.typography.montserrat.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.md}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.light}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": 0 } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/icon.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/icon.tokens.json new file mode 100644 index 000000000..98efefafa --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/icon.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "icon": { + "color": {}, + "size": {}, + "inset-block-start": {}, + "baseline": { + "inset-block-start": {} + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/link.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/link.tokens.json new file mode 100644 index 000000000..e844fa5fe --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/link.tokens.json @@ -0,0 +1,33 @@ +{ + "utrecht": { + "link": { + "color": { "value": "{tubbergen.color.primary}" }, + "text-decoration": { "value": "none" }, + "text-decoration-color": { "value": "unset" }, + "text-decoration-thickness": { "value": 0 }, + "text-underline-offset": { "value": "{tubbergen.size.3xs}" }, + "active": { + "color": {} + }, + "focus": { + "color": {}, + "text-decoration": {}, + "text-decoration-thickness": {} + }, + "hover": { + "color": { "value": "{tubbergen.color.primary-hover}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "{tubbergen.size.4xs}" } + }, + "placeholder": { + "color": {} + }, + "visited": { + "color": { "value": "{tubbergen.color.primary}" } + }, + "icon": { + "size": { "value": "{tubbergen.size.md}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/list.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/list.tokens.json new file mode 100644 index 000000000..a6c035a9d --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/list.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "ordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{tubbergen.size.sm}" }, + "margin-block-end": { "value": "{tubbergen.size.sm}" }, + "padding-inline-start": { "value": "{tubbergen.size.xl}" }, + "item": { + "margin-block-start": { "value": "{tubbergen.size.2xs}" }, + "margin-block-end": { "value": "{tubbergen.size.2xs}" }, + "padding-inline-start": { "value": "1ch" } + } + }, + "unordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{tubbergen.size.md}" }, + "margin-block-end": { "value": 0 }, + "padding-inline-start": { "value": "2ch" }, + "item": { + "margin-block-start": { "value": "{tubbergen.size.xs}" }, + "margin-block-end": { "value": "{tubbergen.size.xs}" }, + "padding-inline-start": { "value": "1ch" } + }, + "marker": { + "color": { "value": "{utrecht.document.color}" } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/page-footer.tokens.json new file mode 100644 index 000000000..da5b25b5e --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/page-footer.tokens.json @@ -0,0 +1,15 @@ +{ + "utrecht": { + "page-footer": { + "background-color": { "value": "unset" }, + "background-image": { + "value": "url(https://www.tubbergen.nl/sites/all/themes/tubbergen/dist/assets/img/footer-bg.svg)" + }, + "color": { "value": "{tubbergen.color.white.100}" }, + "padding-inline-end": { "value": "{tubbergen.size.sm}" }, + "padding-inline-start": { "value": "{tubbergen.size.sm}" }, + "padding-block-end": { "value": "{tubbergen.size.2xl}" }, + "padding-block-start": { "value": "{tubbergen.size.2xl}" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/page-header.tokens.json new file mode 100644 index 000000000..cd26a7fa5 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "color": { "value": "{tubbergen.color.black.20}" }, + "padding-block-start": { "value": "{tubbergen.size.sm}" }, + "padding-block-end": { "value": "{tubbergen.size.sm}" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/page.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/page.tokens.json new file mode 100644 index 000000000..fed40e76d --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/page.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "page": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{tubbergen.size.lg}" }, + "margin-inline-end": { "value": "{tubbergen.size.lg}" }, + "max-inline-size": { "value": "1140px" } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/paragraph.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/paragraph.tokens.json new file mode 100644 index 000000000..e0d644ef1 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/paragraph.tokens.json @@ -0,0 +1,25 @@ +{ + "utrecht": { + "paragraph": { + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{tubbergen.typography.lato.font-family}" }, + "font-size": { "value": "{tubbergen.font-size.md}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.normal}" }, + "line-height": { "value": "1.5em" }, + "margin-block-start": { "value": 0 }, + "margin-block-end": { "value": 0 }, + "lead": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + }, + "small": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/surface.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/surface.tokens.json new file mode 100644 index 000000000..6a817bcbb --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/surface.tokens.json @@ -0,0 +1,8 @@ +{ + "utrecht": { + "surface": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "color": {} + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/table.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/table.tokens.json new file mode 100644 index 000000000..4ac731f8a --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/table.tokens.json @@ -0,0 +1,60 @@ +{ + "utrecht": { + "table": { + "border-color": {}, + "border-width": {}, + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": "{tubbergen.size.md}" }, + "caption": { + "font-weight": {}, + "font-family": {}, + "font-size": {}, + "color": {}, + "line-height": {}, + "text-align": {}, + "margin-block-end": {} + }, + "header": { + "font-weight": { "value": "{tubbergen.typography.font-weight.bold}" }, + "background-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" }, + "border-block-end-color": {}, + "border-block-end-width": {} + }, + "header-cell": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{tubbergen.typography.font-weight.bold}" }, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" } + }, + "cell": { + "line-height": {}, + "padding-block-end": { "value": "{tubbergen.size.md}" }, + "padding-block-start": { "value": "{tubbergen.size.md}" }, + "padding-inline-end": { "value": "{tubbergen.size.md}" }, + "padding-inline-start": { "value": "{tubbergen.size.md}" }, + "icon": { + "size": {} + } + }, + "row": { + "border-block-end-color": { "value": "{tubbergen.color.lightgrey.89}" }, + "border-block-end-width": { "value": "{tubbergen.size.4xs}" }, + "padding-inline-end": {}, + "padding-inline-start": {}, + "alternate-odd": { + "background-color": { "value": "{tubbergen.color.white.100}" }, + "color": {} + }, + "alternate-even": { + "background-color": { "value": "{tubbergen.color.blue.96}" }, + "color": {} + } + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/component/utrecht/textbox.tokens.json b/proprietary/tubbergen-design-tokens/src/component/utrecht/textbox.tokens.json new file mode 100644 index 000000000..4406b4a2e --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/component/utrecht/textbox.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "textbox": { + "border-bottom-width": {}, + "border-color": { "value": "{tubbergen.color.grey.46}" }, + "border-radius": { "value": "0px" }, + "border-width": { "value": "{tubbergen.size.4xs}" }, + "color": { "value": "{tubbergen.color.black.33}" }, + "font-family": { "value": "{tubbergen.typography.lato.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{tubbergen.size.xs}" }, + "padding-block-start": { "value": "{tubbergen.size.xs}" }, + "padding-inline-end": { "value": "{tubbergen.size.sm}" }, + "padding-inline-start": { "value": "{tubbergen.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/tubbergen-design-tokens/src/config.json b/proprietary/tubbergen-design-tokens/src/config.json new file mode 100644 index 000000000..379c2fcc9 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/config.json @@ -0,0 +1,48 @@ +{ + "fullName": "Gemeente Tubbergen", + "name": "Tubbergen", + "prefix": "tubbergen", + "npm": "@nl-design-system-unstable/tubbergen-design-tokens", + "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" + ] +} diff --git a/proprietary/tubbergen-design-tokens/src/font.js b/proprietary/tubbergen-design-tokens/src/font.js new file mode 100644 index 000000000..411c6eff2 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/font.js @@ -0,0 +1,10 @@ +import '@fontsource/lato/400.css'; +import '@fontsource/lato/400-italic.css'; +import '@fontsource/lato/700.css'; +import '@fontsource/lato/700-italic.css'; +import '@fontsource/montserrat/300.css'; +import '@fontsource/montserrat/300-italic.css'; +import '@fontsource/montserrat/400.css'; +import '@fontsource/montserrat/400-italic.css'; +import '@fontsource/montserrat/700.css'; +import '@fontsource/montserrat/700-italic.css'; diff --git a/proprietary/tubbergen-design-tokens/src/index.scss b/proprietary/tubbergen-design-tokens/src/index.scss new file mode 100644 index 000000000..59ac9e2b4 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/src/index.scss @@ -0,0 +1,7 @@ +/** + * @license SEE LICENSE.md + * Copyright (c) 2021 NL Design System Community + * All rights reserved + */ + +@import "./design-tokens.css"; diff --git a/proprietary/tubbergen-design-tokens/style-dictionary.config.js b/proprietary/tubbergen-design-tokens/style-dictionary.config.js new file mode 100644 index 000000000..d43b0fd25 --- /dev/null +++ b/proprietary/tubbergen-design-tokens/style-dictionary.config.js @@ -0,0 +1,6 @@ +const config = require('./src/config.json'); +const { createConfig } = require('../../style-dictionary-config'); + +module.exports = createConfig({ + selector: `.${config.prefix}-theme`, +}); diff --git a/proprietary/xxllnc-design-tokens/LICENSE.md b/proprietary/xxllnc-design-tokens/LICENSE.md new file mode 100644 index 000000000..05633cecd --- /dev/null +++ b/proprietary/xxllnc-design-tokens/LICENSE.md @@ -0,0 +1,17 @@ +# Auteursrecht XXLLNC + +Copyright (c) 2023 XXLLNC + +## Logo en huisstijl + +Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door XXLLNC. + +Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van XXLLNC 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 XXLLNC. diff --git a/proprietary/xxllnc-design-tokens/README.md b/proprietary/xxllnc-design-tokens/README.md new file mode 100644 index 000000000..b1ec8ffaf --- /dev/null +++ b/proprietary/xxllnc-design-tokens/README.md @@ -0,0 +1,3 @@ +# NL Design System design tokens XXLLNC + +These tokens have been obtained by analysing the [website of XXLLNC](https://xxllnc.nl/). diff --git a/proprietary/xxllnc-design-tokens/documentation/color.stories.mdx b/proprietary/xxllnc-design-tokens/documentation/color.stories.mdx new file mode 100644 index 000000000..746f03e58 --- /dev/null +++ b/proprietary/xxllnc-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"; + + + +# Color + +## Find a color + + + +## Color palette + + diff --git a/proprietary/xxllnc-design-tokens/documentation/components.stories.mdx b/proprietary/xxllnc-design-tokens/documentation/components.stories.mdx new file mode 100644 index 000000000..0937db7f1 --- /dev/null +++ b/proprietary/xxllnc-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"; + + + +# Components + + + + diff --git a/proprietary/xxllnc-design-tokens/documentation/design-tokens.stories.mdx b/proprietary/xxllnc-design-tokens/documentation/design-tokens.stories.mdx new file mode 100644 index 000000000..dce92c263 --- /dev/null +++ b/proprietary/xxllnc-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"; + + + +# Design Tokens + + token.path[0] !== config.prefix)}> + +## Proprietary Design Tokens + + token.path[0] === config.prefix)}> diff --git a/proprietary/xxllnc-design-tokens/documentation/readme.stories.mdx b/proprietary/xxllnc-design-tokens/documentation/readme.stories.mdx new file mode 100644 index 000000000..e1d67fa5d --- /dev/null +++ b/proprietary/xxllnc-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"; + + + +{markdown} diff --git a/proprietary/xxllnc-design-tokens/package.json b/proprietary/xxllnc-design-tokens/package.json new file mode 100644 index 000000000..956d35b5d --- /dev/null +++ b/proprietary/xxllnc-design-tokens/package.json @@ -0,0 +1,40 @@ +{ + "version": "1.0.0-alpha.1", + "author": "Community for NL Design System", + "description": "NL Design System design tokens for xxllnc", + "website": "https://www.xxllnc.nl/", + "keywords": [ + "nl-design-system", + "conduction" + ], + "license": "SEE LICENSE IN LICENSE.md", + "name": "@nl-design-system-unstable/xxllnc-design-tokens", + "private": false, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git+ssh", + "url": "git@github.com:nl-design-system/themes.git" + }, + "scripts": { + "clean": "rimraf -rf dist/", + "prebuild": "npm run clean", + "watch": "npm-run-all watch:**", + "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'", + "build": "npm-run-all build:**", + "build:scss": "sass --no-source-map src/:dist/", + "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js" + }, + "devDependencies": { + "@nl-design-system-unstable/theme-toolkit": "workspace:*", + "chokidar-cli": "3.0.0", + "npm-run-all": "4.1.5", + "rimraf": "3.0.2", + "style-dictionary": "3.8.0" + }, + "bugs": { + "url": "https://github.com/ConductionNL/conduction-theme/issues" + }, + "homepage": "https://github.com/ConductionNL/conduction-theme#readme" +} diff --git a/proprietary/xxllnc-design-tokens/src/brand/xxllnc/color.tokens.json b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/color.tokens.json new file mode 100644 index 000000000..736a2dc03 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/color.tokens.json @@ -0,0 +1,80 @@ +{ + "xxllnc": { + "color": { + "primary": { + "value": "#000000ad", + "comment": "Primary with 68% transparency" + }, + "primary-hover": { + "value": "#00000080", + "comment": "Primary with 50% transparency" + }, + "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": "{xxllnc.color.primary}" }, + "alert-info": { "value": "{xxllnc.color.black.16}" }, + "alert-info-background": { "value": "{xxllnc.color.grey.92}" }, + "white": { + "95": { + "value": "#f1f1f1" + }, + "100": { + "value": "#ffffff", + "comment": "Base/White" + }, + "100-0t": { + "value": "#ffffff", + "comment": "White with 0% transparency" + } + }, + "black": { + "0-22t": { + "value": "#00000038", + "comment": "Black with 22% transparency" + }, + "16": { + "value": "#28282c", + "comment": "Base/Black" + }, + "17": { + "value": "#2b2b2b" + }, + "17-hover": { + "value": "#2b2b2bcc", + "comment": "Black with 80% transparency" + }, + "21": { + "value": "#333338" + } + }, + "grey": { + "43": { + "value": "#6d6d6d" + }, + "90": { + "value": "#e5e5e5" + }, + "90-hover": { + "value": "#e5e5e5cc", + "comment": "Grey with 80% transparency" + }, + "92": { + "value": "#eaeaea", + "comment": "Base/Grey" + } + }, + "lightgrey": { + "96": { + "value": "#f5f5f5" + } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/brand/xxllnc/font-size.tokens.json b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/font-size.tokens.json new file mode 100644 index 000000000..e97fd850c --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/font-size.tokens.json @@ -0,0 +1,17 @@ +{ + "xxllnc": { + "font-size": { + "4xs": { "value": "5px" }, + "3xs": { "value": "8px" }, + "2xs": { "value": "10px" }, + "xs": { "value": "12px" }, + "sm": { "value": "14px" }, + "md": { "value": "16px" }, + "lg": { "value": "20px" }, + "xl": { "value": "24px" }, + "2xl": { "value": "32px" }, + "3xl": { "value": "48px" }, + "4xl": { "value": "58px" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/brand/xxllnc/size.tokens.json b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/size.tokens.json new file mode 100644 index 000000000..344961b29 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/size.tokens.json @@ -0,0 +1,17 @@ +{ + "xxllnc": { + "size": { + "4xs": { "value": "1px" }, + "3xs": { "value": "2px" }, + "2xs": { "value": "4px" }, + "xs": { "value": "8px" }, + "sm": { "value": "14px" }, + "md": { "value": "18px" }, + "lg": { "value": "24px" }, + "xl": { "value": "32px" }, + "2xl": { "value": "48px" }, + "3xl": { "value": "72px" }, + "4xl": { "value": "96px" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/brand/xxllnc/typography.tokens.json b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/typography.tokens.json new file mode 100644 index 000000000..a5f69967f --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/brand/xxllnc/typography.tokens.json @@ -0,0 +1,45 @@ +{ + "xxllnc": { + "typography": { + "sans-serif": { + "font-family": { + "value": "neue-haas-grotesk-text, sans-serif" + } + }, + "monospace": { + "font-family": { + "value": "Monospace, \"Lucida Console\"" + } + }, + "inter": { + "font-family": { + "value": "\"Inter\", sans-serif" + } + }, + "font-weight": { + "bold": { + "value": "700" + }, + "normal": { + "value": "400" + }, + "light": { + "value": "100" + } + }, + "scale": { + "4xs": { "value": "{xxllnc.font-size.4xs}" }, + "3xs": { "value": "{xxllnc.font-size.3xs}" }, + "2xs": { "value": "{xxllnc.font-size.2xs}" }, + "xs": { "value": "{xxllnc.font-size.xs}" }, + "sm": { "value": "{xxllnc.font-size.sm}" }, + "md": { "value": "{xxllnc.font-size.md}" }, + "lg": { "value": "{xxllnc.font-size.lg}" }, + "xl": { "value": "{xxllnc.font-size.xl}" }, + "2xl": { "value": "{xxllnc.font-size.2xl}" }, + "3xl": { "value": "{xxllnc.font-size.3xl}" }, + "4xl": { "value": "{xxllnc.font-size.4xl}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/common/utrecht/action.tokens.json b/proprietary/xxllnc-design-tokens/src/common/utrecht/action.tokens.json new file mode 100644 index 000000000..d226101fc --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/common/utrecht/action.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "action": { + "busy": { "cursor": { "value": "wait" } }, + "disabled": { "cursor": { "value": "not-allowed" } }, + "submit": { "cursor": { "value": "pointer" } } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/common/utrecht/space.tokens.json b/proprietary/xxllnc-design-tokens/src/common/utrecht/space.tokens.json new file mode 100644 index 000000000..ea3c32416 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/common/utrecht/space.tokens.json @@ -0,0 +1,28 @@ +{ + "utrecht": { + "space": { + "block": { + "3xs": { "value": "{xxllnc.size.3xs}" }, + "2xs": { "value": "{xxllnc.size.2xs}" }, + "xs": { "value": "{xxllnc.size.xs}" }, + "sm": { "value": "{xxllnc.size.sm}" }, + "md": { "value": "{xxllnc.size.md}" }, + "lg": { "value": "{xxllnc.size.lg}" }, + "xl": { "value": "{xxllnc.size.xl}" }, + "2xl": { "value": "{xxllnc.size.2xl}" }, + "3xl": { "value": "{xxllnc.size.3xl}" } + }, + "inline": { + "3xs": { "value": "{xxllnc.size.3xs}" }, + "2xs": { "value": "{xxllnc.size.2xs}" }, + "xs": { "value": "{xxllnc.size.xs}" }, + "sm": { "value": "{xxllnc.size.sm}" }, + "md": { "value": "{xxllnc.size.md}" }, + "lg": { "value": "{xxllnc.size.lg}" }, + "xl": { "value": "{xxllnc.size.xl}" }, + "2xl": { "value": "{xxllnc.size.2xl}" }, + "3xl": { "value": "{xxllnc.size.3xl}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/conduction/card-header.tokens.json b/proprietary/xxllnc-design-tokens/src/component/conduction/card-header.tokens.json new file mode 100644 index 000000000..9bd2f3c2b --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/conduction/card-header.tokens.json @@ -0,0 +1,26 @@ +{ + "conduction": { + "card-header": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "color": { "value": "{xxllnc.color.white.95}" }, + "hover": { + "background-color": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {} + }, + "title": { + "color": { "value": "{xxllnc.color.white.95}" } + }, + "date": { + "color": { "value": "{xxllnc.color.white.95}" }, + "font-size": { "value": "{xxllnc.font-size.sm}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.light}" }, + "margin-block-end": { "value": "{xxllnc.size.xs}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/conduction/card-wrapper.tokens.json b/proprietary/xxllnc-design-tokens/src/component/conduction/card-wrapper.tokens.json new file mode 100644 index 000000000..5e8af34b8 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/conduction/card-wrapper.tokens.json @@ -0,0 +1,25 @@ +{ + "conduction": { + "card-wrapper": { + "background-color": { "value": "{xxllnc.color.black.21}" }, + "border-color": {}, + "border-style": {}, + "border-width": { "value": "unset" }, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {}, + "border-radius": { "value": "{xxllnc.size.md}" }, + "color": { "value": "{xxllnc.color.white.95}" }, + "hover": { + "background-color": {}, + "border-bottom-color": {}, + "border-bottom-style": {}, + "border-bottom-width": {} + }, + "padding-inline-end": { "value": "{xxllnc.size.md}" }, + "padding-inline-start": { "value": "{xxllnc.size.md}" }, + "padding-block-end": { "value": "{xxllnc.size.md}" }, + "padding-block-start": { "value": "{xxllnc.size.md}" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/conduction/pagination.tokens.json b/proprietary/xxllnc-design-tokens/src/component/conduction/pagination.tokens.json new file mode 100644 index 000000000..0de6fe976 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/conduction/pagination.tokens.json @@ -0,0 +1,45 @@ +{ + "conduction": { + "pagination": { + "container-background-color": { "value": "unset" }, + "container-padding-inline-start": { "value": "0px" }, + "container-padding-inline-end": { "value": "0px" }, + "container-padding-block-start": { "value": "0px" }, + "container-padding-block-end": { "value": "0px" }, + "item-gap": { "value": "{xxllnc.size.2xs}" }, + "item-color": { "value": "{xxllnc.color.primary}" }, + "item-background-color": { "value": "{xxllnc.color.white.100}" }, + "item-border-radius": { "value": "{xxllnc.size.xl}" }, + "item-padding-inline-start": { "value": "12px" }, + "item-padding-inline-end": { "value": "12px" }, + "item-padding-block-start": { "value": "{xxllnc.size.xs}" }, + "item-padding-block-end": { "value": "{xxllnc.size.xs}" }, + "item-font-size": { "value": "{utrecht.document.font-size}" }, + "item-font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "item-font-family": { "value": "{utrecht.document.font-family}" }, + "item-border-width": {}, + "item-border-style": {}, + "item-border-color": {}, + "navigation-button-padding-inline-start": { "value": "" }, + "navigation-button-padding-inline-end": { "value": "" }, + "navigation-button-padding-block-start": { "value": "0px" }, + "navigation-button-padding-block-end": { "value": "0px" }, + "disabled-color": { "value": "{xxllnc.color.grey.90}" }, + "disabled-background-color": { "value": "unset" }, + "current-page-color": { "value": "{xxllnc.color.white.100}" }, + "current-page-background-color": { "value": "{xxllnc.color.black.21}" }, + "current-page-font-weight": { "value": "{xxllnc.typography.font-weight.bold}" }, + "current-page-text-decoration": { "value": "unset" }, + "current-page-border-width": {}, + "current-page-border-style": {}, + "current-page-border-color": {}, + "page-hover-color": { "value": "{xxllnc.color.primary}" }, + "page-hover-background-color": { "value": "{xxllnc.color.white.100}" }, + "page-hover-text-decoration": { "value": "unset" }, + "page-hover-text-decoration-thickness": { "value": "0px" }, + "page-hover-border-width": {}, + "page-hover-border-style": {}, + "page-hover-border-color": {} + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/conduction/select.tokens.json b/proprietary/xxllnc-design-tokens/src/component/conduction/select.tokens.json new file mode 100644 index 000000000..660ad3a14 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/conduction/select.tokens.json @@ -0,0 +1,30 @@ +{ + "conduction": { + "input-select": { + "background-color": { "value": "{xxllnc.color.white.100}" }, + "border": { "value": "1px solid {xxllnc.color.grey.92}" }, + "border-focus": { "value": "unset" }, + "border-radius": { "value": "{utrecht.form-input.border-radius}" }, + "invalid-border-color": { "value": "{xxllnc.color.error}" }, + "padding-block-end": { "value": 0 }, + "padding-block-start": { "value": 0 }, + "hover": {}, + "focus": {}, + "list-option": { + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "background-color": {}, + "hover": { + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "color": {}, + "background-color": {} + } + }, + "placeholder": { + "color": { + "value": "{utrecht.form-input.placeholder.color}" + }, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/conduction/tabs.tokens.json b/proprietary/xxllnc-design-tokens/src/component/conduction/tabs.tokens.json new file mode 100644 index 000000000..f962b4ee1 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/conduction/tabs.tokens.json @@ -0,0 +1,73 @@ +{ + "conduction": { + "tabs": { + "tab": { + "background-color": { "value": "transparent" }, + "color": { "value": "{xxllnc.color.black.16}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-bottom": {}, + "border-bottom-width": {}, + "border-bottom-style": {}, + "border-bottom-color": {}, + "bottom": { "value": "-2px" }, + "padding-block-start": { "value": "{xxllnc.size.xs}" }, + "padding-block-end": { "value": "{xxllnc.size.xs}" }, + "padding-inline-start": { "value": "{xxllnc.size.sm}" }, + "padding-inline-end": { "value": "{xxllnc.size.sm}" }, + "margin-inline-end": {}, + "font-size": { "value": "{xxllnc.font-size.md}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "max-width": { "value": "unset" }, + "min-width": { "value": "160px" }, + "min-height": { "value": "61px" }, + "letter-spacing": {}, + "text-transform": {}, + "selected": { + "background-color": { "value": "transparent" }, + "color": { "value": "{xxllnc.color.black.16}" }, + "box-shadow": {}, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-bottom": {}, + "border-bottom-width": { "value": "{xxllnc.size.3xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{xxllnc.color.primary}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.bold}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "hover": { + "background-color": {}, + "color": { "value": "{xxllnc.color.black.16}" }, + "text-decoration": {} + } + }, + "hover": { + "background-color": {}, + "color": { "value": "{xxllnc.color.black.16}" }, + "text-decoration": {} + }, + "list": { + "padding-inline-start": { "value": "0px" }, + "margin-block-end": { "value": "0px" }, + "border-bottom-width": { "value": "{xxllnc.size.3xs}" }, + "border-bottom-style": { "value": "solid" }, + "border-bottom-color": { "value": "{xxllnc.color.grey.92}" } + }, + "panel": { + "background-color": {}, + "padding-block-start": { "value": "{xxllnc.size.lg}" }, + "padding-block-end": { "value": "{xxllnc.size.lg}" }, + "padding-inline-start": { "value": "{xxllnc.size.lg}" }, + "padding-inline-end": { "value": "{xxllnc.size.lg}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-top": {} + } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/alert.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/alert.tokens.json new file mode 100644 index 000000000..09ffe307f --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/alert.tokens.json @@ -0,0 +1,46 @@ +{ + "utrecht": { + "alert": { + "background-color": { "value": "{xxllnc.color.alert-info-background}" }, + "border-color": {}, + "border-width": {}, + "color": { "value": "{xxllnc.color.alert-info}" }, + "padding-block-start": { "value": "{xxllnc.size.lg}" }, + "padding-block-end": { "value": "{xxllnc.size.lg}" }, + "padding-inline-start": { "value": "{xxllnc.size.lg}" }, + "padding-inline-end": { "value": "{xxllnc.size.lg}" }, + "margin-block-start": {}, + "margin-block-end": {}, + "warning": { + "background-color": { "value": "{xxllnc.color.alert-warning-background}" }, + "color": { "value": "{xxllnc.color.alert-warning}" }, + "border-color": {}, + "border-width": {} + }, + "error": { + "background-color": { "value": "{xxllnc.color.alert-error-background}" }, + "color": { "value": "{xxllnc.color.alert-error}" }, + "border-color": {}, + "border-width": {} + }, + "ok": { + "background-color": { "value": "{xxllnc.color.alert-succes-background}" }, + "color": { "value": "{xxllnc.color.alert-succes}" }, + "border-color": {}, + "border-width": {} + }, + "icon": { + "color": { "value": "{xxllnc.color.alert-info}" }, + "error": { + "color": { "value": "{xxllnc.color.alert-error}" } + }, + "warning": { + "color": { "value": "{xxllnc.color.alert-warning}" } + }, + "ok": { + "color": { "value": "{xxllnc.color.alert-succes}" } + } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/badge-counter.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/badge-counter.tokens.json new file mode 100644 index 000000000..33d28158f --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/badge-counter.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "badge-counter": { + "background-color": { "value": "{xxllnc.color.primary}" }, + "border-radius": { "value": "50%" }, + "color": { "value": "{xxllnc.color.white.100}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "padding-block": { "value": "{xxllnc.size.2xs}" }, + "padding-inline": { "value": "{xxllnc.size.2xs}" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/blockquote.tokens.json new file mode 100644 index 000000000..758dd50a4 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/blockquote.tokens.json @@ -0,0 +1,27 @@ +{ + "utrecht": { + "blockquote": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{xxllnc.size.xl}" }, + "margin-inline-end": { "value": "{xxllnc.size.xl}" }, + "margin-inline-block-start": {}, + "margin-inline-block-end": {}, + "font-size": {}, + "font-style": {}, + "font-family": {}, + "padding-inline-start": {}, + "padding-inline-end": {}, + "padding-inline-block-start": {}, + "padding-inline-block-end": {}, + "attribution": { + "color": {}, + "font-size": {} + }, + "content": { + "color": { "value": "{xxllnc.color.black.16}" }, + "font-size": { "value": "{xxllnc.font-size.md}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/button.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/button.tokens.json new file mode 100644 index 000000000..f37370f3e --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/button.tokens.json @@ -0,0 +1,152 @@ +{ + "utrecht": { + "button": { + "background-color": { "value": "{xxllnc.color.black.17}" }, + "border-color": {}, + "border-radius": { "value": "16px" }, + "border-width": { "value": 0 }, + "color": { "value": "{xxllnc.color.grey.90}" }, + "font-family": { "value": "{xxllnc.typography.inter.font-family}" }, + "font-size": { "value": "inherit" }, + "font-weight": { "value": "inherit" }, + "inline-size": {}, + "letter-spacing": {}, + "line-height": {}, + "min-block-size": {}, + "min-inline-size": {}, + "padding-block-start": { "value": "{xxllnc.size.2xs}" }, + "padding-block-end": { "value": "{xxllnc.size.2xs}" }, + "padding-inline-start": { "value": "{xxllnc.size.sm}" }, + "padding-inline-end": { "value": "{xxllnc.size.sm}" }, + "text-transform": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "icon": { + "gap": { "value": "{xxllnc.size.xs}" }, + "size": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {}, + "scale": {} + }, + "hover": { + "background-color": { "value": "{xxllnc.color.black.17-hover}" }, + "border-color": {}, + "color": { "value": "{xxllnc.color.grey.90-hover}" }, + "scale": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "primary-action": { + "background-color": { "value": "{xxllnc.color.black.17}" }, + "border-color": {}, + "border-width": { "value": 0 }, + "color": { "value": "{xxllnc.color.grey.90}" }, + "font-weight": { "value": "inherit" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{xxllnc.color.black.17}" }, + "border-color": {}, + "color": { "value": "{xxllnc.color.grey.90}" }, + "scale": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "secondary-action": { + "background-color": { "value": "{xxllnc.color.white.100}" }, + "border-color": { "value": "{xxllnc.color.black.17}" }, + "border-width": { "value": "{xxllnc.size.3xs}" }, + "color": { "value": "{xxllnc.color.black.17}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": { "value": "{xxllnc.color.white.100}" }, + "border-color": { "value": "{xxllnc.color.black.17-hover}" }, + "color": { "value": "{xxllnc.color.black.17-hover}" } + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + }, + "subtle": { + "background-color": {}, + "border-color": {}, + "border-width": {}, + "color": {}, + "font-weight": {}, + "active": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "disabled": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "hover": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "pressed": { + "background-color": {}, + "border-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/code.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/code.tokens.json new file mode 100644 index 000000000..d0e884dd7 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/code.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "code": { + "background-color": { "value": "{xxllnc.color.lightgrey.96}" }, + "color": { "value": "{xxllnc.color.black.16}" }, + "font-family": { "value": "{xxllnc.typography.monospace.font-family}" }, + "font-size": { "value": "inherit" }, + "line-height": {} + }, + "code-block": { + "background-color": { "value": "{xxllnc.color.lightgrey.96}" }, + "color": { "value": "{xxllnc.color.black.16}" }, + "font-family": { "value": "{xxllnc.typography.monospace.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.md}" }, + "line-height": { "value": "{xxllnc.size.lg}" }, + "margin-block-start": { "value": "{xxllnc.size.md}" }, + "margin-block-end": { "value": "{xxllnc.size.md}" }, + "margin-inline-start": { "value": 0 }, + "margin-inline-end": { "value": 0 }, + "padding-block-start": { "value": "{xxllnc.size.md}" }, + "padding-block-end": { "value": "{xxllnc.size.md}" }, + "padding-inline-start": { "value": "{xxllnc.size.md}" }, + "padding-inline-end": { "value": "{xxllnc.size.md}" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/document.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/document.tokens.json new file mode 100644 index 000000000..9bc02b3ad --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/document.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "document": { + "background-color": { "value": "{xxllnc.color.white.100}" }, + "color": { "value": "{xxllnc.color.black.16}" }, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.md}" }, + "font-weight": {}, + "line-height": {} + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json new file mode 100644 index 000000000..0872c6ad0 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/alert.tokens.json @@ -0,0 +1,9 @@ +{ + "utrecht": { + "alert": { + "icon": { + "gap": { "value": "{xxllnc.size.xs}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json new file mode 100644 index 000000000..bbcf0468d --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/badge-counter.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "badge-counter": { + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-style": {}, + "text-decoration": { "value": "none" }, + "min-block-size": {}, + "min-inline-size": {} + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json new file mode 100644 index 000000000..a55d52038 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/form-input.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "form-input": { + "background-color": { "value": "{xxllnc.color.white.100-0t}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{xxllnc.color.grey.43}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json new file mode 100644 index 000000000..4dff4091b --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/icon.tokens.json @@ -0,0 +1,7 @@ +{ + "utrecht": { + "icon": { + "gap": { "value": "{xxllnc.size.xs}" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json new file mode 100644 index 000000000..0e9ff5c70 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "page-footer": { + "min-height": {}, + "logo": { + "max-height": { "value": "100px" }, + "max-width": { "value": "120px" } + }, + "background-position": {} + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json new file mode 100644 index 000000000..b60d8b557 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "logo": { + "max-height": {}, + "max-width": { "value": "70px" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json new file mode 100644 index 000000000..1104f49a8 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json @@ -0,0 +1,24 @@ +{ + "utrecht": { + "table": { + "background-color": {}, + "header": { + "border-block-end-color": {}, + "border-block-end-width": {}, + "font-family": {} + }, + "row": { + "hover": { + "background-color": {}, + "color": {} + } + }, + "body": { + "border": {} + }, + "caption": { + "font-style": {} + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json new file mode 100644 index 000000000..83dc3cec4 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/extra-tokens/textbox.tokens.json @@ -0,0 +1,26 @@ +{ + "utrecht": { + "textbox": { + "background-color": { "value": "{xxllnc.color.white.100-0t}" }, + "line-height": {}, + "placeholder": { + "color": { "value": "{xxllnc.color.grey.43}" } + }, + "disabled": { + "background-color": {} + }, + "focus": { + "background-color": {}, + "border-color": {}, + "color": {} + }, + "invalid": { + "background-color": {}, + "color": {} + }, + "read-only": { + "background-color": {} + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/form-input.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/form-input.tokens.json new file mode 100644 index 000000000..30322de13 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/form-input.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "form-input": { + "border-bottom-width": {}, + "border-color": { "value": "{xxllnc.color.black.0-22t}" }, + "border-radius": { "value": "6px" }, + "border-width": { "value": "{xxllnc.size.4xs}" }, + "color": { "value": "{xxllnc.color.grey.43}" }, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{xxllnc.size.xs}" }, + "padding-block-start": { "value": "{xxllnc.size.xs}" }, + "padding-inline-end": { "value": "{xxllnc.size.sm}" }, + "padding-inline-start": { "value": "{xxllnc.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/heading.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/heading.tokens.json new file mode 100644 index 000000000..7f22ac24f --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/heading.tokens.json @@ -0,0 +1,49 @@ +{ + "utrecht": { + "heading-1": { + "color": {}, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.3xl}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{xxllnc.size.2xl}" }, + "margin-block-start": { "value": "{xxllnc.size.md}" } + }, + "heading-2": { + "color": {}, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.2xl}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{xxllnc.size.2xl}" }, + "margin-block-start": { "value": "{xxllnc.size.md}" } + }, + "heading-3": { + "color": {}, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.xl}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{xxllnc.size.xl}" }, + "margin-block-start": { "value": "{xxllnc.size.md}" } + }, + "heading-4": { + "color": {}, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.lg}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "line-height": {}, + "margin-block-end": { "value": "{xxllnc.size.lg}" }, + "margin-block-start": { "value": "{xxllnc.size.md}" } + }, + "heading-5": { + "color": {}, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.md}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.light}" }, + "line-height": {}, + "margin-block-end": { "value": "{xxllnc.size.lg}" }, + "margin-block-start": { "value": "{xxllnc.size.md}" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/icon.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/icon.tokens.json new file mode 100644 index 000000000..98efefafa --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/icon.tokens.json @@ -0,0 +1,12 @@ +{ + "utrecht": { + "icon": { + "color": {}, + "size": {}, + "inset-block-start": {}, + "baseline": { + "inset-block-start": {} + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/link.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/link.tokens.json new file mode 100644 index 000000000..d0952a1d9 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/link.tokens.json @@ -0,0 +1,33 @@ +{ + "utrecht": { + "link": { + "color": { "value": "{xxllnc.color.primary}" }, + "text-decoration": { "value": "none" }, + "text-decoration-color": { "value": "unset" }, + "text-decoration-thickness": { "value": 0 }, + "text-underline-offset": { "value": "{xxllnc.size.3xs}" }, + "active": { + "color": {} + }, + "focus": { + "color": {}, + "text-decoration": {}, + "text-decoration-thickness": {} + }, + "hover": { + "color": { "value": "{xxllnc.color.primary-hover}" }, + "text-decoration": { "value": "none" }, + "text-decoration-thickness": { "value": 0 } + }, + "placeholder": { + "color": {} + }, + "visited": { + "color": { "value": "{xxllnc.color.primary}" } + }, + "icon": { + "size": { "value": "{xxllnc.size.md}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/list.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/list.tokens.json new file mode 100644 index 000000000..3f3248bce --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/list.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "ordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{xxllnc.size.sm}" }, + "margin-block-end": { "value": "{xxllnc.size.sm}" }, + "padding-inline-start": { "value": "{xxllnc.size.xl}" }, + "item": { + "margin-block-start": { "value": "{xxllnc.size.2xs}" }, + "margin-block-end": { "value": "{xxllnc.size.2xs}" }, + "padding-inline-start": { "value": "1ch" } + } + }, + "unordered-list": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-start": { "value": "{xxllnc.size.md}" }, + "margin-block-end": { "value": 0 }, + "padding-inline-start": { "value": "2ch" }, + "item": { + "margin-block-start": { "value": "{xxllnc.size.xs}" }, + "margin-block-end": { "value": "{xxllnc.size.xs}" }, + "padding-inline-start": { "value": "1ch" } + }, + "marker": { + "color": { "value": "{xxllnc.color.primary}" } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/page-footer.tokens.json new file mode 100644 index 000000000..35111a6c3 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/page-footer.tokens.json @@ -0,0 +1,13 @@ +{ + "utrecht": { + "page-footer": { + "background-color": { "value": "{xxllnc.color.white.100}" }, + "background-image": { "value": "unset" }, + "color": { "value": "{xxllnc.color.primary}" }, + "padding-inline-end": { "value": "{xxllnc.size.sm}" }, + "padding-inline-start": { "value": "{xxllnc.size.sm}" }, + "padding-block-end": { "value": "{xxllnc.size.2xl}" }, + "padding-block-start": { "value": "{xxllnc.size.2xl}" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/page-header.tokens.json new file mode 100644 index 000000000..6a48c8ec9 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/page-header.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "page-header": { + "background-color": { "value": "{xxllnc.color.grey.92}" }, + "color": { "value": "{xxllnc.color.black.16}" }, + "padding-block-start": { "value": "{xxllnc.size.sm}" }, + "padding-block-end": { "value": "{xxllnc.size.sm}" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/page.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/page.tokens.json new file mode 100644 index 000000000..bfa73996e --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/page.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "page": { + "background-color": {}, + "color": {}, + "margin-inline-start": { "value": "{xxllnc.size.lg}" }, + "margin-inline-end": { "value": "{xxllnc.size.lg}" }, + "max-inline-size": { "value": "1140px" } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/paragraph.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/paragraph.tokens.json new file mode 100644 index 000000000..88d4cd2f7 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/paragraph.tokens.json @@ -0,0 +1,25 @@ +{ + "utrecht": { + "paragraph": { + "color": { "value": "{utrecht.document.color}" }, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "{xxllnc.font-size.md}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.normal}" }, + "line-height": { "value": "1.5em" }, + "margin-block-start": { "value": 0 }, + "margin-block-end": { "value": 0 }, + "lead": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + }, + "small": { + "color": {}, + "font-size": {}, + "font-weight": {}, + "line-height": {} + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/surface.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/surface.tokens.json new file mode 100644 index 000000000..ec81ad5af --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/surface.tokens.json @@ -0,0 +1,8 @@ +{ + "utrecht": { + "surface": { + "background-color": { "value": "{xxllnc.color.white.100}" }, + "color": {} + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/table.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/table.tokens.json new file mode 100644 index 000000000..99194bc7e --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/table.tokens.json @@ -0,0 +1,60 @@ +{ + "utrecht": { + "table": { + "border-color": { "value": "{xxllnc.color.lightgrey.96}" }, + "border-width": { "value": "{xxllnc.size.4xs}" }, + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "line-height": {}, + "margin-block-end": { "value": 0 }, + "margin-block-start": { "value": "{xxllnc.size.md}" }, + "caption": { + "font-weight": {}, + "font-family": {}, + "font-size": {}, + "color": {}, + "line-height": {}, + "text-align": {}, + "margin-block-end": {} + }, + "header": { + "font-weight": { "value": "{xxllnc.typography.font-weight.bold}" }, + "background-color": {}, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" }, + "border-block-end-color": {}, + "border-block-end-width": {} + }, + "header-cell": { + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{xxllnc.typography.font-weight.bold}" }, + "color": { "value": "{utrecht.document.color}" }, + "text-transform": { "value": "unset" } + }, + "cell": { + "line-height": {}, + "padding-block-end": { "value": "{xxllnc.size.md}" }, + "padding-block-start": { "value": "{xxllnc.size.md}" }, + "padding-inline-end": { "value": "{xxllnc.size.md}" }, + "padding-inline-start": { "value": "{xxllnc.size.md}" }, + "icon": { + "size": {} + } + }, + "row": { + "border-block-end-color": { "value": "{xxllnc.color.lightgrey.96}" }, + "border-block-end-width": { "value": "{xxllnc.size.4xs}" }, + "padding-inline-end": {}, + "padding-inline-start": {}, + "alternate-odd": { + "background-color": {}, + "color": {} + }, + "alternate-even": { + "background-color": {}, + "color": {} + } + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/component/utrecht/textbox.tokens.json b/proprietary/xxllnc-design-tokens/src/component/utrecht/textbox.tokens.json new file mode 100644 index 000000000..dd1f7d52c --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/component/utrecht/textbox.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "textbox": { + "border-bottom-width": {}, + "border-color": { "value": "{xxllnc.color.black.0-22t}" }, + "border-radius": { "value": "6px" }, + "border-width": { "value": "{xxllnc.size.4xs}" }, + "color": { "value": "{xxllnc.color.grey.43}" }, + "font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" }, + "font-size": { "value": "15px" }, + "min-inline-height": {}, + "max-inline-size": {}, + "padding-block-end": { "value": "{xxllnc.size.xs}" }, + "padding-block-start": { "value": "{xxllnc.size.xs}" }, + "padding-inline-end": { "value": "{xxllnc.size.sm}" }, + "padding-inline-start": { "value": "{xxllnc.size.sm}" }, + "disabled": { + "border-color": {}, + "color": {} + }, + "invalid": { + "border-color": {}, + "border-width": {} + }, + "read-only": { + "border-color": {}, + "color": {} + } + } + } +} diff --git a/proprietary/xxllnc-design-tokens/src/config.json b/proprietary/xxllnc-design-tokens/src/config.json new file mode 100644 index 000000000..a87b80d62 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/config.json @@ -0,0 +1,48 @@ +{ + "fullName": "xxllnc", + "name": "xxllnc", + "prefix": "xxllnc", + "npm": "@nl-design-system-unstable/xxllnc-design-tokens", + "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" + ] +} diff --git a/proprietary/xxllnc-design-tokens/src/index.scss b/proprietary/xxllnc-design-tokens/src/index.scss new file mode 100644 index 000000000..59ac9e2b4 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/src/index.scss @@ -0,0 +1,7 @@ +/** + * @license SEE LICENSE.md + * Copyright (c) 2021 NL Design System Community + * All rights reserved + */ + +@import "./design-tokens.css"; diff --git a/proprietary/xxllnc-design-tokens/style-dictionary.config.js b/proprietary/xxllnc-design-tokens/style-dictionary.config.js new file mode 100644 index 000000000..d43b0fd25 --- /dev/null +++ b/proprietary/xxllnc-design-tokens/style-dictionary.config.js @@ -0,0 +1,6 @@ +const config = require('./src/config.json'); +const { createConfig } = require('../../style-dictionary-config'); + +module.exports = createConfig({ + selector: `.${config.prefix}-theme`, +});