From 44dcd884a87306aeafffd7c3fa2b9a8dae99cb4f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 2 Oct 2026 03:10:21 +0000 Subject: [PATCH] chore: sync NL Design System tokens from upstream Auto-generated from nl-design-system/themes repository. See: https://github.com/nl-design-system/themes --- css/tokens/dark/amsterdam.css | 10 +- css/tokens/dark/bodegraven-reeuwijk.css | 10 +- css/tokens/dark/borne.css | 10 +- css/tokens/dark/buren.css | 10 +- css/tokens/dark/cunningham.css | 10 +- css/tokens/dark/demodam.css | 10 +- css/tokens/dark/denhaag.css | 2 - css/tokens/dark/dinkelland.css | 16 +- css/tokens/dark/drechterland.css | 12 +- css/tokens/dark/duiven.css | 10 +- css/tokens/dark/duo.css | 10 +- css/tokens/dark/enkhuizen.css | 10 +- css/tokens/dark/epe.css | 12 +- css/tokens/dark/frankendesk.css | 10 +- css/tokens/dark/groningen.css | 10 +- css/tokens/dark/haarlem.css | 10 +- css/tokens/dark/haarlemmermeer.css | 10 +- css/tokens/dark/hoog-contrast.css | 186 +++++++++++ css/tokens/dark/hoorn.css | 12 +- css/tokens/dark/horstaandemaas.css | 10 +- css/tokens/dark/lasuite.css | 10 +- css/tokens/dark/leiden.css | 2 - css/tokens/dark/leidschendam-voorburg.css | 10 +- css/tokens/dark/nextcloud.css | 184 +++++++++++ css/tokens/dark/nijmegen.css | 12 +- css/tokens/dark/noaberkracht.css | 16 +- css/tokens/dark/noordoostpolder.css | 10 +- css/tokens/dark/noordwijk.css | 18 +- css/tokens/dark/opencatalogi.css | 2 - css/tokens/dark/provincie-zuid-holland.css | 12 +- css/tokens/dark/riddeliemers.css | 10 +- css/tokens/dark/ridderkerk.css | 10 +- css/tokens/dark/rijkshuisstijl.css | 10 +- css/tokens/dark/rotterdam.css | 2 - css/tokens/dark/stedebroec.css | 10 +- css/tokens/dark/summer-breeze.css | 10 +- css/tokens/dark/tilburg.css | 12 +- css/tokens/dark/tubbergen.css | 16 +- css/tokens/dark/utrecht.css | 10 +- css/tokens/dark/venray.css | 10 +- css/tokens/dark/vng.css | 2 - css/tokens/dark/vught.css | 10 +- css/tokens/dark/westervoort.css | 10 +- css/tokens/dark/xxllnc.css | 98 +++--- css/tokens/dark/zevenaar.css | 10 +- css/tokens/dark/zwolle.css | 278 ++++++++-------- css/tokens/dinkelland.css | 18 +- css/tokens/drechterland.css | 3 - css/tokens/epe.css | 11 +- css/tokens/hoorn.css | 3 - css/tokens/nijmegen.css | 3 - css/tokens/noaberkracht.css | 27 +- css/tokens/noordwijk.css | 17 +- css/tokens/provincie-zuid-holland.css | 3 - css/tokens/tilburg.css | 3 - css/tokens/tubbergen.css | 18 +- css/tokens/xxllnc.css | 34 +- css/tokens/zwolle.css | 249 ++++++++------- token-sets.json | 353 ++++----------------- 59 files changed, 958 insertions(+), 948 deletions(-) create mode 100644 css/tokens/dark/hoog-contrast.css create mode 100644 css/tokens/dark/nextcloud.css diff --git a/css/tokens/dark/amsterdam.css b/css/tokens/dark/amsterdam.css index c8e56bb2d..eb136b7ed 100644 --- a/css/tokens/dark/amsterdam.css +++ b/css/tokens/dark/amsterdam.css @@ -10,7 +10,6 @@ --amsterdam-color-red: #f31c1c; --amsterdam-color-red-dark: #f54949; --amsterdam-color-yellow: #f2dc0d; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #292929; --nldesign-color-background-darker: #3f3f3f; --nldesign-color-background-hover: #1d1d1d; @@ -36,11 +35,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #1a83ff; + --nldesign-color-primary: #004699; --nldesign-color-primary-hover: #003677; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #6bf7a8; --nldesign-color-success-rgb: 107, 247, 168; --nldesign-color-text: #dfdfdf; @@ -112,7 +111,6 @@ body[data-themes*=dark] { --amsterdam-color-red: #f31c1c; --amsterdam-color-red-dark: #f54949; --amsterdam-color-yellow: #f2dc0d; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #292929; --nldesign-color-background-darker: #3f3f3f; --nldesign-color-background-hover: #1d1d1d; @@ -138,11 +136,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #1a83ff; + --nldesign-color-primary: #004699; --nldesign-color-primary-hover: #003677; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #6bf7a8; --nldesign-color-success-rgb: 107, 247, 168; --nldesign-color-text: #dfdfdf; diff --git a/css/tokens/dark/bodegraven-reeuwijk.css b/css/tokens/dark/bodegraven-reeuwijk.css index da6a04101..140437534 100644 --- a/css/tokens/dark/bodegraven-reeuwijk.css +++ b/css/tokens/dark/bodegraven-reeuwijk.css @@ -6,7 +6,6 @@ --bodegraven-color-dataviz-3: #408b8d; --bodegraven-color-dataviz-4: #d2841f; --bodegraven-color-grey-30: #c0c0c0; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -37,11 +36,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -110,7 +109,6 @@ body[data-themes*=dark] { --bodegraven-color-dataviz-3: #408b8d; --bodegraven-color-dataviz-4: #d2841f; --bodegraven-color-grey-30: #c0c0c0; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -141,11 +139,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/borne.css b/css/tokens/dark/borne.css index a86fb8f76..5e3917046 100644 --- a/css/tokens/dark/borne.css +++ b/css/tokens/dark/borne.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/borne.css (sha256:df0a0b4462ba0f19d8a41b37d98e157e3572f82e85758e5fcf23e273876fb0aa) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/buren.css b/css/tokens/dark/buren.css index 7f2dd34b7..44f7f2b32 100644 --- a/css/tokens/dark/buren.css +++ b/css/tokens/dark/buren.css @@ -14,7 +14,6 @@ --buren-color-rood-40: #e54d58; --buren-color-rood-50: #e1313e; --buren-color-rood-70: #92151f; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -50,11 +49,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-rood-40: #e54d58; --nldesign-color-rood-50: #e1313e; --nldesign-color-rood-70: #92151f; @@ -133,7 +132,6 @@ body[data-themes*=dark] { --buren-color-rood-40: #e54d58; --buren-color-rood-50: #e1313e; --buren-color-rood-70: #92151f; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -169,11 +167,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-rood-40: #e54d58; --nldesign-color-rood-50: #e1313e; --nldesign-color-rood-70: #92151f; diff --git a/css/tokens/dark/cunningham.css b/css/tokens/dark/cunningham.css index 680c89188..5aa893544 100644 --- a/css/tokens/dark/cunningham.css +++ b/css/tokens/dark/cunningham.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/cunningham.css (sha256:b168d9b46cc0798427fe413e02ab5ee677447ebb48851e73995ff836c425f3d3) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #292b2f; --nldesign-color-background-dark: #292b2f; --nldesign-color-background-darker: #3f4247; --nldesign-color-background-hover: #1e2022; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #558fe3; + --nldesign-color-primary: #1a509f; --nldesign-color-primary-hover: #203c63; --nldesign-color-primary-light: #0c1c32; --nldesign-color-primary-light-hover: #102643; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #e2e3e4; @@ -93,7 +92,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #292b2f; --nldesign-color-background-dark: #292b2f; --nldesign-color-background-darker: #3f4247; --nldesign-color-background-hover: #1e2022; @@ -119,11 +117,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #558fe3; + --nldesign-color-primary: #1a509f; --nldesign-color-primary-hover: #203c63; --nldesign-color-primary-light: #0c1c32; --nldesign-color-primary-light-hover: #102643; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #e2e3e4; diff --git a/css/tokens/dark/demodam.css b/css/tokens/dark/demodam.css index fab49785e..b4992d924 100644 --- a/css/tokens/dark/demodam.css +++ b/css/tokens/dark/demodam.css @@ -8,7 +8,6 @@ --demodam-color-grey-20: #313131; --demodam-color-grey-30: #141414; --demodam-color-grey-40: #c3d5dc; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -41,11 +40,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -116,7 +115,6 @@ body[data-themes*=dark] { --demodam-color-grey-20: #313131; --demodam-color-grey-30: #141414; --demodam-color-grey-40: #c3d5dc; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -149,11 +147,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/denhaag.css b/css/tokens/dark/denhaag.css index c7b437dfd..1a7e004e2 100644 --- a/css/tokens/dark/denhaag.css +++ b/css/tokens/dark/denhaag.css @@ -7,7 +7,6 @@ --denhaag-color-orange: #d4611d; --denhaag-color-red: #ca3232; --denhaag-color-yellow: #dfb715; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #282828; --nldesign-color-background-darker: #393939; --nldesign-color-background-hover: #1d1d1d; @@ -106,7 +105,6 @@ body[data-themes*=dark] { --denhaag-color-orange: #d4611d; --denhaag-color-red: #ca3232; --denhaag-color-yellow: #dfb715; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #282828; --nldesign-color-background-darker: #393939; --nldesign-color-background-hover: #1d1d1d; diff --git a/css/tokens/dark/dinkelland.css b/css/tokens/dark/dinkelland.css index 25bf7d90a..4db2f995c 100644 --- a/css/tokens/dark/dinkelland.css +++ b/css/tokens/dark/dinkelland.css @@ -1,4 +1,4 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/dinkelland.css (sha256:3a078e61ad62346701ba107fd8d49cc5c97e9119cafb148104e62b75e3def45d) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/dinkelland.css (sha256:ae364648644037d2aa95093ccd463025087d671509bf909d3b0f40a2dca1ef7e) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --dinkelland-color-alert-error-background: #420f13; @@ -35,7 +35,6 @@ --nldesign-color-alert-error-background: #420f13; --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -84,11 +83,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -99,8 +98,6 @@ --nldesign-color-warning-rgb: 237, 181, 12; --nldesign-color-white-100: #141414; --nldesign-color-white-98: #191919; - --nldesign-component-badge-background-color: #81afe2; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #8cb9ea; --nldesign-component-button-border-color: #81afe2; @@ -188,7 +185,6 @@ body[data-themes*=dark] { --nldesign-color-alert-error-background: #420f13; --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -237,11 +233,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -252,8 +248,6 @@ body[data-themes*=dark] { --nldesign-color-warning-rgb: 237, 181, 12; --nldesign-color-white-100: #141414; --nldesign-color-white-98: #191919; - --nldesign-component-badge-background-color: #81afe2; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #8cb9ea; --nldesign-component-button-border-color: #81afe2; diff --git a/css/tokens/dark/drechterland.css b/css/tokens/dark/drechterland.css index 1ffa23cef..c3f41e784 100644 --- a/css/tokens/dark/drechterland.css +++ b/css/tokens/dark/drechterland.css @@ -1,7 +1,6 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/drechterland.css (sha256:cacfb205610bf1c47834423d9d801af7c5e8e1721470d70383a839ec571a8c2c) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/drechterland.css (sha256:d172f8f6bb9971f27d1560c96692a2d21d5a19441af3e9d10e37c1a54fe826da) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/duiven.css b/css/tokens/dark/duiven.css index 1355de7d0..243308395 100644 --- a/css/tokens/dark/duiven.css +++ b/css/tokens/dark/duiven.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/duiven.css (sha256:3f49c03b7fefdd097e6566c482f5ae34377084667ee8383e210c25ecf7921f44) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/duo.css b/css/tokens/dark/duo.css index d4c7d0861..f5d4025eb 100644 --- a/css/tokens/dark/duo.css +++ b/css/tokens/dark/duo.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/duo.css (sha256:3a276b6c0e3c239399edc3ea74bb17c11e322644493d8eef8edf8b535d32d1ba) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -93,7 +92,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -119,11 +117,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/enkhuizen.css b/css/tokens/dark/enkhuizen.css index 6974cb097..b01e582bb 100644 --- a/css/tokens/dark/enkhuizen.css +++ b/css/tokens/dark/enkhuizen.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/enkhuizen.css (sha256:18f2e240361fd56a1c1ec5603429ce83bbf75d67527893dce19baf4cb9479ba3) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/epe.css b/css/tokens/dark/epe.css index 173cc9619..bb6a514d4 100644 --- a/css/tokens/dark/epe.css +++ b/css/tokens/dark/epe.css @@ -1,4 +1,4 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/epe.css (sha256:9372c009ed74fbf0810a7965f4fbec4e07bb77d4b3ed727948f48345fa616cba) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/epe.css (sha256:feb7ead06cec80c34f1533165b7df46b4ecedc04413a59163b1e147f9c4a37b9) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --nldesign-brand-epe-color-alert-error-background: #420f13; @@ -29,7 +29,6 @@ --nldesign-brand-epe-color-white-98: #191919; --nldesign-brand-epe-color-yellow-42: #f4c32d; --nldesign-brand-epe-color-yellow-90: #4d3b07; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -55,11 +54,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -150,7 +149,6 @@ body[data-themes*=dark] { --nldesign-brand-epe-color-white-98: #191919; --nldesign-brand-epe-color-yellow-42: #f4c32d; --nldesign-brand-epe-color-yellow-90: #4d3b07; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -176,11 +174,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/frankendesk.css b/css/tokens/dark/frankendesk.css index a62e2bae9..f83ea061c 100644 --- a/css/tokens/dark/frankendesk.css +++ b/css/tokens/dark/frankendesk.css @@ -5,7 +5,6 @@ --nldesign-card-body-color: #9595a7; --nldesign-card-border-color: #23232f; --nldesign-card-heading-color: #dcdce4; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #23232f; --nldesign-color-background-darker: #353747; --nldesign-color-background-hover: #1d1d23; @@ -33,11 +32,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #9c99d7; + --nldesign-color-primary: #4844ad; --nldesign-color-primary-hover: #36347d; --nldesign-color-primary-light: #0f162c; --nldesign-color-primary-light-hover: #141c3a; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #dcdce4; @@ -119,7 +118,6 @@ body[data-themes*=dark] { --nldesign-card-body-color: #9595a7; --nldesign-card-border-color: #23232f; --nldesign-card-heading-color: #dcdce4; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #23232f; --nldesign-color-background-darker: #353747; --nldesign-color-background-hover: #1d1d23; @@ -147,11 +145,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #9c99d7; + --nldesign-color-primary: #4844ad; --nldesign-color-primary-hover: #36347d; --nldesign-color-primary-light: #0f162c; --nldesign-color-primary-light-hover: #141c3a; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #dcdce4; diff --git a/css/tokens/dark/groningen.css b/css/tokens/dark/groningen.css index 40edfedaa..486a828d6 100644 --- a/css/tokens/dark/groningen.css +++ b/css/tokens/dark/groningen.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/groningen.css (sha256:4d6157821d7ad03124f99d9bcd56d5d924ace2ef94f50e9eab98ede618c7a4c4) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/haarlem.css b/css/tokens/dark/haarlem.css index 06ed6ff6c..d5ec098c0 100644 --- a/css/tokens/dark/haarlem.css +++ b/css/tokens/dark/haarlem.css @@ -33,7 +33,6 @@ --haarlem-color-zand-25: #463d11; --haarlem-color-zand-50: #6b5d1a; --haarlem-color-zand-75: #907d22; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -80,11 +79,11 @@ --nldesign-color-oceaan-75: #4f80b6; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-rood-10: #380308; --nldesign-color-rood-100: #d23545; --nldesign-color-rood-25: #5d050f; @@ -190,7 +189,6 @@ body[data-themes*=dark] { --haarlem-color-zand-25: #463d11; --haarlem-color-zand-50: #6b5d1a; --haarlem-color-zand-75: #907d22; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -237,11 +235,11 @@ body[data-themes*=dark] { --nldesign-color-oceaan-75: #4f80b6; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-rood-10: #380308; --nldesign-color-rood-100: #d23545; --nldesign-color-rood-25: #5d050f; diff --git a/css/tokens/dark/haarlemmermeer.css b/css/tokens/dark/haarlemmermeer.css index 54e5ce548..4ac8c8e76 100644 --- a/css/tokens/dark/haarlemmermeer.css +++ b/css/tokens/dark/haarlemmermeer.css @@ -2,7 +2,6 @@ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --haarlemmermeer-color-grey-45: #888888; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -29,11 +28,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -97,7 +96,6 @@ body[data-theme-dark], body[data-themes*=dark] { --haarlemmermeer-color-grey-45: #888888; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -124,11 +122,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/hoog-contrast.css b/css/tokens/dark/hoog-contrast.css new file mode 100644 index 000000000..0916f34fa --- /dev/null +++ b/css/tokens/dark/hoog-contrast.css @@ -0,0 +1,186 @@ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/hoog-contrast.css (sha256:c247f7a5d15461dbf52f2626088dc2ff211aecfad02330db8aea318e6be731d6) — do not edit */ +@media (prefers-color-scheme: dark) { + body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { + --nldesign-color-background: #141414; + --nldesign-color-background-dark: #3f3f3f; + --nldesign-color-background-darker: #6a6a6a; + --nldesign-color-background-hover: #292929; + --nldesign-color-border: #ebebeb; + --nldesign-color-border-dark: #ebebeb; + --nldesign-color-button-primary-background: #81afe2; + --nldesign-color-button-primary-border: #81afe2; + --nldesign-color-button-primary-hover: #6397da; + --nldesign-color-button-primary-text: #9e9e9e; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #e2726d; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #ebebeb; + --nldesign-color-focus-rgb: 235, 235, 235; + --nldesign-color-header-background: #ebebeb; + --nldesign-color-header-text: #9e9e9e; + --nldesign-color-info: #5e98f7; + --nldesign-color-info-rgb: 94, 152, 247; + --nldesign-color-link: #81afe2; + --nldesign-color-link-hover: #39adf5; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #d5d5d5; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #EBEBEB; + --nldesign-color-primary-hover: #333333; + --nldesign-color-primary-light: #141414; + --nldesign-color-primary-light-hover: #292929; + --nldesign-color-primary-text: #5e5e5e; + --nldesign-color-success: #91f9b0; + --nldesign-color-success-rgb: 145, 249, 176; + --nldesign-color-text: #ebebeb; + --nldesign-color-text-light: #ebebeb; + --nldesign-color-text-muted: #e5e5e5; + --nldesign-color-warning: #f8b777; + --nldesign-color-warning-rgb: 248, 183, 119; + --nldesign-component-badge-background-color: #ebebeb; + --nldesign-component-badge-color: #9e9e9e; + --nldesign-component-button-active-background-color: #292929; + --nldesign-component-button-active-color: #ebebeb; + --nldesign-component-button-border-color: #ebebeb; + --nldesign-component-button-color: #ebebeb; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-focus-border-color: #ebebeb; + --nldesign-component-button-hover-background-color: #141414; + --nldesign-component-button-hover-border-color: #c0c0c0; + --nldesign-component-button-hover-color: #ebebeb; + --nldesign-component-button-primary-action-background-color: #ebebeb; + --nldesign-component-button-primary-action-border-color: #ebebeb; + --nldesign-component-button-primary-action-color: #9e9e9e; + --nldesign-component-button-primary-action-hover-background-color: #c0c0c0; + --nldesign-component-button-primary-action-hover-color: #9e9e9e; + --nldesign-component-button-secondary-action-border-color: #ebebeb; + --nldesign-component-button-secondary-action-color: #ebebeb; + --nldesign-component-button-secondary-action-hover-background-color: #141414; + --nldesign-component-form-field-label-color: #ebebeb; + --nldesign-component-form-fieldset-border-color: #ebebeb; + --nldesign-component-form-select-border-color: #ebebeb; + --nldesign-component-form-select-focus-border-color: #5e98f7; + --nldesign-component-heading-1-color: #ebebeb; + --nldesign-component-heading-2-color: #ebebeb; + --nldesign-component-heading-3-color: #ebebeb; + --nldesign-component-heading-4-color: #ebebeb; + --nldesign-component-heading-5-color: #ebebeb; + --nldesign-component-heading-6-color: #ebebeb; + --nldesign-component-heading-color: #ebebeb; + --nldesign-component-link-color: #8cb9ea; + --nldesign-component-link-hover-color: #3db5ff; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-ordered-list-color: #ebebeb; + --nldesign-component-paragraph-color: #ebebeb; + --nldesign-component-separator-border-color: #ebebeb; + --nldesign-component-table-border-color: #ebebeb; + --nldesign-component-table-header-background-color: #3f3f3f; + --nldesign-component-table-header-color: #ebebeb; + --nldesign-component-table-row-hover-background-color: #292929; + --nldesign-component-textbox-background-color: #9e9e9e; + --nldesign-component-textbox-border-color: #ebebeb; + --nldesign-component-textbox-color: #ebebeb; + --nldesign-component-textbox-disabled-background-color: #9e9e9e; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #66a0ff; + --nldesign-component-textbox-hover-border-color: #ebebeb; + --nldesign-component-textbox-invalid-border-color: #ff4c4c; + --nldesign-component-unordered-list-color: #ebebeb; + } +} +body[data-theme-dark], +body[data-themes*=dark] { + --nldesign-color-background: #141414; + --nldesign-color-background-dark: #3f3f3f; + --nldesign-color-background-darker: #6a6a6a; + --nldesign-color-background-hover: #292929; + --nldesign-color-border: #ebebeb; + --nldesign-color-border-dark: #ebebeb; + --nldesign-color-button-primary-background: #81afe2; + --nldesign-color-button-primary-border: #81afe2; + --nldesign-color-button-primary-hover: #6397da; + --nldesign-color-button-primary-text: #9e9e9e; + --nldesign-color-error: #f54949; + --nldesign-color-error-hover: #e2726d; + --nldesign-color-error-rgb: 245, 73, 73; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #ebebeb; + --nldesign-color-focus-rgb: 235, 235, 235; + --nldesign-color-header-background: #ebebeb; + --nldesign-color-header-text: #9e9e9e; + --nldesign-color-info: #5e98f7; + --nldesign-color-info-rgb: 94, 152, 247; + --nldesign-color-link: #81afe2; + --nldesign-color-link-hover: #39adf5; + --nldesign-color-link-visited: #c392e3; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #d5d5d5; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #EBEBEB; + --nldesign-color-primary-hover: #333333; + --nldesign-color-primary-light: #141414; + --nldesign-color-primary-light-hover: #292929; + --nldesign-color-primary-text: #5e5e5e; + --nldesign-color-success: #91f9b0; + --nldesign-color-success-rgb: 145, 249, 176; + --nldesign-color-text: #ebebeb; + --nldesign-color-text-light: #ebebeb; + --nldesign-color-text-muted: #e5e5e5; + --nldesign-color-warning: #f8b777; + --nldesign-color-warning-rgb: 248, 183, 119; + --nldesign-component-badge-background-color: #ebebeb; + --nldesign-component-badge-color: #9e9e9e; + --nldesign-component-button-active-background-color: #292929; + --nldesign-component-button-active-color: #ebebeb; + --nldesign-component-button-border-color: #ebebeb; + --nldesign-component-button-color: #ebebeb; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-focus-border-color: #ebebeb; + --nldesign-component-button-hover-background-color: #141414; + --nldesign-component-button-hover-border-color: #c0c0c0; + --nldesign-component-button-hover-color: #ebebeb; + --nldesign-component-button-primary-action-background-color: #ebebeb; + --nldesign-component-button-primary-action-border-color: #ebebeb; + --nldesign-component-button-primary-action-color: #9e9e9e; + --nldesign-component-button-primary-action-hover-background-color: #c0c0c0; + --nldesign-component-button-primary-action-hover-color: #9e9e9e; + --nldesign-component-button-secondary-action-border-color: #ebebeb; + --nldesign-component-button-secondary-action-color: #ebebeb; + --nldesign-component-button-secondary-action-hover-background-color: #141414; + --nldesign-component-form-field-label-color: #ebebeb; + --nldesign-component-form-fieldset-border-color: #ebebeb; + --nldesign-component-form-select-border-color: #ebebeb; + --nldesign-component-form-select-focus-border-color: #5e98f7; + --nldesign-component-heading-1-color: #ebebeb; + --nldesign-component-heading-2-color: #ebebeb; + --nldesign-component-heading-3-color: #ebebeb; + --nldesign-component-heading-4-color: #ebebeb; + --nldesign-component-heading-5-color: #ebebeb; + --nldesign-component-heading-6-color: #ebebeb; + --nldesign-component-heading-color: #ebebeb; + --nldesign-component-link-color: #8cb9ea; + --nldesign-component-link-hover-color: #3db5ff; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-ordered-list-color: #ebebeb; + --nldesign-component-paragraph-color: #ebebeb; + --nldesign-component-separator-border-color: #ebebeb; + --nldesign-component-table-border-color: #ebebeb; + --nldesign-component-table-header-background-color: #3f3f3f; + --nldesign-component-table-header-color: #ebebeb; + --nldesign-component-table-row-hover-background-color: #292929; + --nldesign-component-textbox-background-color: #9e9e9e; + --nldesign-component-textbox-border-color: #ebebeb; + --nldesign-component-textbox-color: #ebebeb; + --nldesign-component-textbox-disabled-background-color: #9e9e9e; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #66a0ff; + --nldesign-component-textbox-hover-border-color: #ebebeb; + --nldesign-component-textbox-invalid-border-color: #ff4c4c; + --nldesign-component-unordered-list-color: #ebebeb; +} diff --git a/css/tokens/dark/hoorn.css b/css/tokens/dark/hoorn.css index c33ed9eed..1374b3caf 100644 --- a/css/tokens/dark/hoorn.css +++ b/css/tokens/dark/hoorn.css @@ -1,8 +1,7 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/hoorn.css (sha256:ba90d4b84a3d03c23d9efac1bde32ad2ee061dcca83d80257ac4b6b7b244eab3) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/hoorn.css (sha256:829fac2f331d0af1a1dcd08bd550f0cf3c5eb9be149ac073f491085918d0863a) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --hoorn-color-blue-20: #85b5ee; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -29,11 +28,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -97,7 +96,6 @@ body[data-theme-dark], body[data-themes*=dark] { --hoorn-color-blue-20: #85b5ee; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -124,11 +122,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/horstaandemaas.css b/css/tokens/dark/horstaandemaas.css index f7074417f..44e3a1f4a 100644 --- a/css/tokens/dark/horstaandemaas.css +++ b/css/tokens/dark/horstaandemaas.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/horstaandemaas.css (sha256:f21c9618f94c81fee62ca2f97295ddb7b9da9372701bd84791d8f7c6fc6a3d37) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/lasuite.css b/css/tokens/dark/lasuite.css index 4ae642148..cc171ebaa 100644 --- a/css/tokens/dark/lasuite.css +++ b/css/tokens/dark/lasuite.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/lasuite.css (sha256:d89f33ce0ac340c70fbf9f90a5d21d720bcc282e199558b948fc661ff368a960) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #23232f; --nldesign-color-background-darker: #353747; --nldesign-color-background-hover: #1d1d23; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #9c99d7; + --nldesign-color-primary: #4844ad; --nldesign-color-primary-hover: #36347d; --nldesign-color-primary-light: #0f162c; --nldesign-color-primary-light-hover: #141c3a; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #dcdce4; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #23232f; --nldesign-color-background-darker: #353747; --nldesign-color-background-hover: #1d1d23; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #9c99d7; + --nldesign-color-primary: #4844ad; --nldesign-color-primary-hover: #36347d; --nldesign-color-primary-light: #0f162c; --nldesign-color-primary-light-hover: #141c3a; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #dcdce4; diff --git a/css/tokens/dark/leiden.css b/css/tokens/dark/leiden.css index 10ece744b..9c8f42847 100644 --- a/css/tokens/dark/leiden.css +++ b/css/tokens/dark/leiden.css @@ -39,7 +39,6 @@ --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -188,7 +187,6 @@ body[data-themes*=dark] { --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; diff --git a/css/tokens/dark/leidschendam-voorburg.css b/css/tokens/dark/leidschendam-voorburg.css index 59ec88bfc..b7697f185 100644 --- a/css/tokens/dark/leidschendam-voorburg.css +++ b/css/tokens/dark/leidschendam-voorburg.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/leidschendam-voorburg.css (sha256:49ec3b0c58300cede5911b557d1d410026a23e534775451c7869f3a37d962703) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/nextcloud.css b/css/tokens/dark/nextcloud.css new file mode 100644 index 000000000..658a497f4 --- /dev/null +++ b/css/tokens/dark/nextcloud.css @@ -0,0 +1,184 @@ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/nextcloud.css (sha256:dbc959ba24eda546b744f4c284c72d356c05321aa8df67cb21b983f63488cd34) — do not edit */ +@media (prefers-color-scheme: dark) { + body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { + --nldesign-color-background-dark: #242424; + --nldesign-color-background-darker: #333333; + --nldesign-color-background-hover: #1d1d1d; + --nldesign-color-border: #343434; + --nldesign-color-border-dark: #878787; + --nldesign-color-button-primary-background: #5ac0f6; + --nldesign-color-button-primary-border: #5ac0f6; + --nldesign-color-button-primary-hover: #77cbf8; + --nldesign-color-button-primary-text: #9e9e9e; + --nldesign-color-error: #c83434; + --nldesign-color-error-hover: #d04743; + --nldesign-color-error-rgb: 200, 52, 52; + --nldesign-color-favorite: #f3cd12; + --nldesign-color-focus: #38b2f580; + --nldesign-color-focus-rgb: 56, 178, 245; + --nldesign-color-header-background: #5ac0f6; + --nldesign-color-header-text: #9e9e9e; + --nldesign-color-info: #6ac5f7; + --nldesign-color-info-rgb: 106, 197, 247; + --nldesign-color-link: #5ac0f6; + --nldesign-color-link-hover: #77cbf8; + --nldesign-color-link-visited: #5ac0f6; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #545454; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #00679e; + --nldesign-color-primary-hover: #3285b1; + --nldesign-color-primary-light: #152732; + --nldesign-color-primary-light-hover: #1e3443; + --nldesign-color-primary-text: #dedede; + --nldesign-color-success: #4bb363; + --nldesign-color-success-rgb: 75, 179, 99; + --nldesign-color-text: #dddddd; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #9e9e9e; + --nldesign-color-warning: #f3b41c; + --nldesign-color-warning-rgb: 243, 180, 28; + --nldesign-component-badge-background-color: #5ac0f6; + --nldesign-component-badge-color: #9e9e9e; + --nldesign-component-button-active-background-color: #1e3443; + --nldesign-component-button-active-color: #61c8ff; + --nldesign-component-button-border-color: #5ac0f6; + --nldesign-component-button-color: #61c8ff; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-focus-border-color: #38b2f580; + --nldesign-component-button-hover-background-color: #152732; + --nldesign-component-button-hover-border-color: #519dc6; + --nldesign-component-button-hover-color: #61c8ff; + --nldesign-component-button-primary-action-background-color: #5ac0f6; + --nldesign-component-button-primary-action-border-color: #5ac0f6; + --nldesign-component-button-primary-action-color: #9e9e9e; + --nldesign-component-button-primary-action-hover-background-color: #519dc6; + --nldesign-component-button-primary-action-hover-color: #9e9e9e; + --nldesign-component-button-secondary-action-border-color: #5ac0f6; + --nldesign-component-button-secondary-action-color: #61c8ff; + --nldesign-component-button-secondary-action-hover-background-color: #152732; + --nldesign-component-form-field-label-color: #dddddd; + --nldesign-component-form-fieldset-border-color: #343434; + --nldesign-component-form-select-border-color: #343434; + --nldesign-component-form-select-focus-border-color: #6ac5f7; + --nldesign-component-heading-1-color: #dddddd; + --nldesign-component-heading-2-color: #dddddd; + --nldesign-component-heading-3-color: #dddddd; + --nldesign-component-heading-4-color: #dddddd; + --nldesign-component-heading-5-color: #dddddd; + --nldesign-component-heading-6-color: #dddddd; + --nldesign-component-heading-color: #dddddd; + --nldesign-component-link-color: #61c8ff; + --nldesign-component-link-hover-color: #85d5ff; + --nldesign-component-link-visited-color: #61c8ff; + --nldesign-component-ordered-list-color: #dddddd; + --nldesign-component-paragraph-color: #dddddd; + --nldesign-component-separator-border-color: #343434; + --nldesign-component-table-border-color: #343434; + --nldesign-component-table-header-background-color: #242424; + --nldesign-component-table-header-color: #dddddd; + --nldesign-component-table-row-hover-background-color: #1d1d1d; + --nldesign-component-textbox-background-color: #9e9e9e; + --nldesign-component-textbox-border-color: #9e9e9e; + --nldesign-component-textbox-color: #dddddd; + --nldesign-component-textbox-disabled-background-color: #9e9e9e; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #75ceff; + --nldesign-component-textbox-hover-border-color: #9e9e9e; + --nldesign-component-textbox-invalid-border-color: #dd5f5f; + --nldesign-component-unordered-list-color: #dddddd; + } +} +body[data-theme-dark], +body[data-themes*=dark] { + --nldesign-color-background-dark: #242424; + --nldesign-color-background-darker: #333333; + --nldesign-color-background-hover: #1d1d1d; + --nldesign-color-border: #343434; + --nldesign-color-border-dark: #878787; + --nldesign-color-button-primary-background: #5ac0f6; + --nldesign-color-button-primary-border: #5ac0f6; + --nldesign-color-button-primary-hover: #77cbf8; + --nldesign-color-button-primary-text: #9e9e9e; + --nldesign-color-error: #c83434; + --nldesign-color-error-hover: #d04743; + --nldesign-color-error-rgb: 200, 52, 52; + --nldesign-color-favorite: #f3cd12; + --nldesign-color-focus: #38b2f580; + --nldesign-color-focus-rgb: 56, 178, 245; + --nldesign-color-header-background: #5ac0f6; + --nldesign-color-header-text: #9e9e9e; + --nldesign-color-info: #6ac5f7; + --nldesign-color-info-rgb: 106, 197, 247; + --nldesign-color-link: #5ac0f6; + --nldesign-color-link-hover: #77cbf8; + --nldesign-color-link-visited: #5ac0f6; + --nldesign-color-nav-background: #141414; + --nldesign-color-placeholder-dark: #545454; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #00679e; + --nldesign-color-primary-hover: #3285b1; + --nldesign-color-primary-light: #152732; + --nldesign-color-primary-light-hover: #1e3443; + --nldesign-color-primary-text: #dedede; + --nldesign-color-success: #4bb363; + --nldesign-color-success-rgb: 75, 179, 99; + --nldesign-color-text: #dddddd; + --nldesign-color-text-light: #9e9e9e; + --nldesign-color-text-muted: #9e9e9e; + --nldesign-color-warning: #f3b41c; + --nldesign-color-warning-rgb: 243, 180, 28; + --nldesign-component-badge-background-color: #5ac0f6; + --nldesign-component-badge-color: #9e9e9e; + --nldesign-component-button-active-background-color: #1e3443; + --nldesign-component-button-active-color: #61c8ff; + --nldesign-component-button-border-color: #5ac0f6; + --nldesign-component-button-color: #61c8ff; + --nldesign-component-button-disabled-background-color: #2a2a2a; + --nldesign-component-button-disabled-border-color: #535353; + --nldesign-component-button-disabled-color: #9e9e9e; + --nldesign-component-button-focus-border-color: #38b2f580; + --nldesign-component-button-hover-background-color: #152732; + --nldesign-component-button-hover-border-color: #519dc6; + --nldesign-component-button-hover-color: #61c8ff; + --nldesign-component-button-primary-action-background-color: #5ac0f6; + --nldesign-component-button-primary-action-border-color: #5ac0f6; + --nldesign-component-button-primary-action-color: #9e9e9e; + --nldesign-component-button-primary-action-hover-background-color: #519dc6; + --nldesign-component-button-primary-action-hover-color: #9e9e9e; + --nldesign-component-button-secondary-action-border-color: #5ac0f6; + --nldesign-component-button-secondary-action-color: #61c8ff; + --nldesign-component-button-secondary-action-hover-background-color: #152732; + --nldesign-component-form-field-label-color: #dddddd; + --nldesign-component-form-fieldset-border-color: #343434; + --nldesign-component-form-select-border-color: #343434; + --nldesign-component-form-select-focus-border-color: #6ac5f7; + --nldesign-component-heading-1-color: #dddddd; + --nldesign-component-heading-2-color: #dddddd; + --nldesign-component-heading-3-color: #dddddd; + --nldesign-component-heading-4-color: #dddddd; + --nldesign-component-heading-5-color: #dddddd; + --nldesign-component-heading-6-color: #dddddd; + --nldesign-component-heading-color: #dddddd; + --nldesign-component-link-color: #61c8ff; + --nldesign-component-link-hover-color: #85d5ff; + --nldesign-component-link-visited-color: #61c8ff; + --nldesign-component-ordered-list-color: #dddddd; + --nldesign-component-paragraph-color: #dddddd; + --nldesign-component-separator-border-color: #343434; + --nldesign-component-table-border-color: #343434; + --nldesign-component-table-header-background-color: #242424; + --nldesign-component-table-header-color: #dddddd; + --nldesign-component-table-row-hover-background-color: #1d1d1d; + --nldesign-component-textbox-background-color: #9e9e9e; + --nldesign-component-textbox-border-color: #9e9e9e; + --nldesign-component-textbox-color: #dddddd; + --nldesign-component-textbox-disabled-background-color: #9e9e9e; + --nldesign-component-textbox-disabled-color: #9e9e9e; + --nldesign-component-textbox-focus-border-color: #75ceff; + --nldesign-component-textbox-hover-border-color: #9e9e9e; + --nldesign-component-textbox-invalid-border-color: #dd5f5f; + --nldesign-component-unordered-list-color: #dddddd; +} diff --git a/css/tokens/dark/nijmegen.css b/css/tokens/dark/nijmegen.css index d8946597b..8a03cbccc 100644 --- a/css/tokens/dark/nijmegen.css +++ b/css/tokens/dark/nijmegen.css @@ -1,4 +1,4 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/nijmegen.css (sha256:cb7bd11292cec9a40695d80345abf2fd2d6e3ccd705e790206ac1bd8d1b8c1fa) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/nijmegen.css (sha256:e7a3b182d601b7bab61332bffbf6c2256733a14961534cff191ef118dada4958) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --nijmegen-color-black: #ebebeb; @@ -129,7 +129,6 @@ --nijmegen-color-yellow-800: #f9e992; --nijmegen-color-yellow-900: #faeca0; --nijmegen-color-yellow-950: #fbf1bb; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -236,11 +235,11 @@ --nldesign-color-pink-950: #f2a6c9; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-red-100: #370508; --nldesign-color-red-20: #f394aa; --nldesign-color-red-200: #52070b; @@ -747,7 +746,6 @@ body[data-themes*=dark] { --nijmegen-color-yellow-800: #f9e992; --nijmegen-color-yellow-900: #faeca0; --nijmegen-color-yellow-950: #fbf1bb; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -854,11 +852,11 @@ body[data-themes*=dark] { --nldesign-color-pink-950: #f2a6c9; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-red-100: #370508; --nldesign-color-red-20: #f394aa; --nldesign-color-red-200: #52070b; diff --git a/css/tokens/dark/noaberkracht.css b/css/tokens/dark/noaberkracht.css index b4728b300..916da7796 100644 --- a/css/tokens/dark/noaberkracht.css +++ b/css/tokens/dark/noaberkracht.css @@ -1,4 +1,4 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/noaberkracht.css (sha256:7086d19cd654c71cf78eec1e18befb77efbb3880b342bde8d6b74f6065b25c06) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/noaberkracht.css (sha256:037c1762d015ed4fdedca28062741fc32a83f4b26d264971eb455326964ff582) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --nldesign-color-alert-error: #db838b; @@ -9,7 +9,6 @@ --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -50,11 +49,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #5581f3; + --nldesign-color-primary: #0d3dbc; --nldesign-color-primary-hover: #2f5ac9; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -66,8 +65,6 @@ --nldesign-color-white-100: #141414; --nldesign-color-white-98: #191919; --nldesign-color-yellow-47: #f3c019; - --nldesign-component-badge-background-color: #0d3dbc; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #4074fc; --nldesign-component-button-border-color: #0d3dbc; @@ -160,7 +157,6 @@ body[data-themes*=dark] { --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -201,11 +197,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #5581f3; + --nldesign-color-primary: #0d3dbc; --nldesign-color-primary-hover: #2f5ac9; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -217,8 +213,6 @@ body[data-themes*=dark] { --nldesign-color-white-100: #141414; --nldesign-color-white-98: #191919; --nldesign-color-yellow-47: #f3c019; - --nldesign-component-badge-background-color: #0d3dbc; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #4074fc; --nldesign-component-button-border-color: #0d3dbc; diff --git a/css/tokens/dark/noordoostpolder.css b/css/tokens/dark/noordoostpolder.css index cfc667ec6..5ac8d3962 100644 --- a/css/tokens/dark/noordoostpolder.css +++ b/css/tokens/dark/noordoostpolder.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/noordoostpolder.css (sha256:eef546cf8b23ac66e5992d524cc40e9ec98b7161648adce6f9190aa66930b06f) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -98,7 +97,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -124,11 +122,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/noordwijk.css b/css/tokens/dark/noordwijk.css index 6ca30147c..d7acd4269 100644 --- a/css/tokens/dark/noordwijk.css +++ b/css/tokens/dark/noordwijk.css @@ -1,4 +1,4 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/noordwijk.css (sha256:4981ad3abcb266151212970a734cb616e636c151ec15637c35846ca30a7f7632) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/noordwijk.css (sha256:09fe908fc377c441a485d5f08ddc759f10ea9203abdd403d02f103b3344a7f3c) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --nldesign-color-alert-error: #db838b; @@ -9,7 +9,6 @@ --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -53,11 +52,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -69,8 +68,6 @@ --nldesign-color-white-100: #141414; --nldesign-color-white-95: #1f1f1f; --nldesign-color-white-98: #191919; - --nldesign-component-badge-background-color: #81afe2; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #8cb9ea; --nldesign-component-button-border-color: #81afe2; @@ -94,7 +91,6 @@ --nldesign-component-form-fieldset-border-color: #535353; --nldesign-component-form-select-border-color: #535353; --nldesign-component-form-select-focus-border-color: #39adf5; - --nldesign-component-heading-1-color: #cccccc; --nldesign-component-heading-2-color: #cccccc; --nldesign-component-heading-3-color: #cccccc; --nldesign-component-heading-4-color: #cccccc; @@ -164,7 +160,6 @@ body[data-themes*=dark] { --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -208,11 +203,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -224,8 +219,6 @@ body[data-themes*=dark] { --nldesign-color-white-100: #141414; --nldesign-color-white-95: #1f1f1f; --nldesign-color-white-98: #191919; - --nldesign-component-badge-background-color: #81afe2; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #8cb9ea; --nldesign-component-button-border-color: #81afe2; @@ -249,7 +242,6 @@ body[data-themes*=dark] { --nldesign-component-form-fieldset-border-color: #535353; --nldesign-component-form-select-border-color: #535353; --nldesign-component-form-select-focus-border-color: #39adf5; - --nldesign-component-heading-1-color: #cccccc; --nldesign-component-heading-2-color: #cccccc; --nldesign-component-heading-3-color: #cccccc; --nldesign-component-heading-4-color: #cccccc; diff --git a/css/tokens/dark/opencatalogi.css b/css/tokens/dark/opencatalogi.css index 91d8d4c8a..76e873c5b 100644 --- a/css/tokens/dark/opencatalogi.css +++ b/css/tokens/dark/opencatalogi.css @@ -159,7 +159,6 @@ --denhaag-step-marker-warning-color: #c1b10c; --denhaag-step-marker-warning-nested-background-color: #141414; --denhaag-step-marker-warning-nested-border-color: #ed7719; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #1b2b30; --nldesign-color-background-darker: #223337; --nldesign-color-background-hover: #172227; @@ -952,7 +951,6 @@ body[data-themes*=dark] { --denhaag-step-marker-warning-color: #c1b10c; --denhaag-step-marker-warning-nested-background-color: #141414; --denhaag-step-marker-warning-nested-border-color: #ed7719; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #1b2b30; --nldesign-color-background-darker: #223337; --nldesign-color-background-hover: #172227; diff --git a/css/tokens/dark/provincie-zuid-holland.css b/css/tokens/dark/provincie-zuid-holland.css index 117718620..dbc3a4e5e 100644 --- a/css/tokens/dark/provincie-zuid-holland.css +++ b/css/tokens/dark/provincie-zuid-holland.css @@ -1,7 +1,6 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/provincie-zuid-holland.css (sha256:abba1768e5c90f593b7c55f90c1b2a5a770f7d686f1e13a530834d5b2275bba7) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/provincie-zuid-holland.css (sha256:1fe4f786d82c6ff32c49070bee02f4eb04329a6b0579b050b5e4ab81ba957584) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -96,7 +95,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -122,11 +120,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/riddeliemers.css b/css/tokens/dark/riddeliemers.css index b1208a1b4..85fd22d84 100644 --- a/css/tokens/dark/riddeliemers.css +++ b/css/tokens/dark/riddeliemers.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/riddeliemers.css (sha256:cccf22e0990ae869a3aaf7b033586ab167fdbe1968b3cc95f1b82923c19e5cbb) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/ridderkerk.css b/css/tokens/dark/ridderkerk.css index 50acb54c5..532dff426 100644 --- a/css/tokens/dark/ridderkerk.css +++ b/css/tokens/dark/ridderkerk.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/ridderkerk.css (sha256:3caecde61aaf309b9f7620caefbb3378645e34c26b394d762b66605955eb4821) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -31,11 +30,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-purple-30: #987ec5; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -104,7 +103,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -134,11 +132,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-purple-30: #987ec5; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; diff --git a/css/tokens/dark/rijkshuisstijl.css b/css/tokens/dark/rijkshuisstijl.css index 246e4a7f2..6bff689e0 100644 --- a/css/tokens/dark/rijkshuisstijl.css +++ b/css/tokens/dark/rijkshuisstijl.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/rijkshuisstijl.css (sha256:4817da72ea0de8ea7761c789d0f2d2e51fbc30746ceedb1bde94c6a85fb2b2bc) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #191c1f; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -29,11 +28,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #162f50; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #d5ddf0; @@ -111,7 +110,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #191c1f; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -139,11 +137,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #162f50; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #d5ddf0; diff --git a/css/tokens/dark/rotterdam.css b/css/tokens/dark/rotterdam.css index 83da9923b..1b3d822bb 100644 --- a/css/tokens/dark/rotterdam.css +++ b/css/tokens/dark/rotterdam.css @@ -554,7 +554,6 @@ --nl-number-badge-color: #9e9e9e; --nl-skip-link-background-color: #f2d40d; --nl-skip-link-color: #eaebeb; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #1b2b30; --nldesign-color-background-darker: #223337; --nldesign-color-background-hover: #172227; @@ -2121,7 +2120,6 @@ body[data-themes*=dark] { --nl-number-badge-color: #9e9e9e; --nl-skip-link-background-color: #f2d40d; --nl-skip-link-color: #eaebeb; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #1b2b30; --nldesign-color-background-darker: #223337; --nldesign-color-background-hover: #172227; diff --git a/css/tokens/dark/stedebroec.css b/css/tokens/dark/stedebroec.css index 5420f3220..c429a0601 100644 --- a/css/tokens/dark/stedebroec.css +++ b/css/tokens/dark/stedebroec.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/stedebroec.css (sha256:1ba2544f657b44eecd0031cdd3662636e659fed5f35f2add1bb8ebdd0c07630a) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/summer-breeze.css b/css/tokens/dark/summer-breeze.css index cd7953e30..37549f445 100644 --- a/css/tokens/dark/summer-breeze.css +++ b/css/tokens/dark/summer-breeze.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/summer-breeze.css (sha256:f63c9a43783e85e3ea2500ec110f61e4f2b12877f43479723545275531be7acb) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #0c1e32; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -124,7 +123,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #0c1e32; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -150,11 +148,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/tilburg.css b/css/tokens/dark/tilburg.css index 35cd503a8..72a331ff0 100644 --- a/css/tokens/dark/tilburg.css +++ b/css/tokens/dark/tilburg.css @@ -1,7 +1,6 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/tilburg.css (sha256:0b00378efa52b730db7527a2e084394bd8b2f79b0727aa596821396448e4f963) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/tilburg.css (sha256:11720fd71baefbf95ff0d8f7e36cd317797df8fa409d2e38d15bc5cd85854e6b) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/tubbergen.css b/css/tokens/dark/tubbergen.css index 5ed9ed894..7f5ed5e51 100644 --- a/css/tokens/dark/tubbergen.css +++ b/css/tokens/dark/tubbergen.css @@ -1,10 +1,9 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/tubbergen.css (sha256:c88867eee452eb2cade75a4076adf15a8a973017c80466685cdb38fbd6940c8f) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/tubbergen.css (sha256:5d655208953917011c5ef4e9edb808918898fa554b93acec055725f11bc24256) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --nldesign-color-alert-error-background: #420f13; --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -55,11 +54,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -71,8 +70,6 @@ --nldesign-color-white-100: #141414; --nldesign-color-white-98: #191919; --nldesign-color-yellow-0: #f3bf19; - --nldesign-component-badge-background-color: #81afe2; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #8cb9ea; --nldesign-component-button-border-color: #81afe2; @@ -163,7 +160,6 @@ body[data-themes*=dark] { --nldesign-color-alert-error-background: #420f13; --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -214,11 +210,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-succes: #58cf73; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; @@ -230,8 +226,6 @@ body[data-themes*=dark] { --nldesign-color-white-100: #141414; --nldesign-color-white-98: #191919; --nldesign-color-yellow-0: #f3bf19; - --nldesign-component-badge-background-color: #81afe2; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; --nldesign-component-button-active-color: #8cb9ea; --nldesign-component-button-border-color: #81afe2; diff --git a/css/tokens/dark/utrecht.css b/css/tokens/dark/utrecht.css index d4e3c58d6..b408218a7 100644 --- a/css/tokens/dark/utrecht.css +++ b/css/tokens/dark/utrecht.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/utrecht.css (sha256:2a9d792f6b88d96d2bf5735d0b2ac6270a47ee423bfafe0f0a1fd796adc69e0b) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #282828; --nldesign-color-background-darker: #393939; --nldesign-color-background-hover: #1d1d1d; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #5c96d6; + --nldesign-color-primary: #24578f; --nldesign-color-primary-hover: #1f4b7a; --nldesign-color-primary-light: #16212e; --nldesign-color-primary-light-hover: #192a40; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #b7e79a; --nldesign-color-success-rgb: 183, 231, 154; --nldesign-color-text: #ebebeb; @@ -101,7 +100,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #282828; --nldesign-color-background-darker: #393939; --nldesign-color-background-hover: #1d1d1d; @@ -127,11 +125,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #5c96d6; + --nldesign-color-primary: #24578f; --nldesign-color-primary-hover: #1f4b7a; --nldesign-color-primary-light: #16212e; --nldesign-color-primary-light-hover: #192a40; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #b7e79a; --nldesign-color-success-rgb: 183, 231, 154; --nldesign-color-text: #ebebeb; diff --git a/css/tokens/dark/venray.css b/css/tokens/dark/venray.css index 570caba28..3fcd1041a 100644 --- a/css/tokens/dark/venray.css +++ b/css/tokens/dark/venray.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/venray.css (sha256:0b5c805e218e073f0f313fb60f491154323f6e33eeb313a1bfbfed980de9894a) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/vng.css b/css/tokens/dark/vng.css index 13bf3466b..c0653131d 100644 --- a/css/tokens/dark/vng.css +++ b/css/tokens/dark/vng.css @@ -82,7 +82,6 @@ --denhaag-step-marker-warning-color: #141414; --denhaag-step-marker-warning-nested-background-color: #141414; --denhaag-step-marker-warning-nested-border-color: #ed7719; - --nldesign-color-background: #42b1f3; --nldesign-color-background-dark: #22262e; --nldesign-color-background-darker: #2e363f; --nldesign-color-background-hover: #191e22; @@ -656,7 +655,6 @@ body[data-themes*=dark] { --denhaag-step-marker-warning-color: #141414; --denhaag-step-marker-warning-nested-background-color: #141414; --denhaag-step-marker-warning-nested-border-color: #ed7719; - --nldesign-color-background: #42b1f3; --nldesign-color-background-dark: #22262e; --nldesign-color-background-darker: #2e363f; --nldesign-color-background-hover: #191e22; diff --git a/css/tokens/dark/vught.css b/css/tokens/dark/vught.css index e4b3dd5dc..8cf08b1ed 100644 --- a/css/tokens/dark/vught.css +++ b/css/tokens/dark/vught.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/vught.css (sha256:f444e375d1942be94daa39d7e7d41d1ad7c477950593daac05158a8917b6bfa1) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/westervoort.css b/css/tokens/dark/westervoort.css index 7fdc9c876..7ebcdd4e0 100644 --- a/css/tokens/dark/westervoort.css +++ b/css/tokens/dark/westervoort.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/westervoort.css (sha256:a181011169bc6e71204edeb0453752c44442c31f37a2561e3dbf60e3ecec6141) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -92,7 +91,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -118,11 +116,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/xxllnc.css b/css/tokens/dark/xxllnc.css index 064a6b25f..1c4721c1a 100644 --- a/css/tokens/dark/xxllnc.css +++ b/css/tokens/dark/xxllnc.css @@ -1,13 +1,12 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/xxllnc.css (sha256:fc0d7b2fdcec0ccfaa57e618a408ec49a666dbc80ded7af6f002799a9bed9336) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/xxllnc.css (sha256:31426e659483923f6e68684b6198a587cb0c39087065566b95ec29066bba9d28) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { --nldesign-color-alert-error: #db838b; --nldesign-color-alert-error-background: #420f13; - --nldesign-color-alert-success: #99e1aa; - --nldesign-color-alert-success-background: #1d3f25; + --nldesign-color-alert-succes: #99e1aa; + --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -56,13 +55,14 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #EBEBEB; - --nldesign-color-primary-hover: #333333; + --nldesign-color-primary: #000000ad; + --nldesign-color-primary-hover: #00000080; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #5e5e5e; - --nldesign-color-success: #58cf73; - --nldesign-color-success-rgb: 88, 207, 115; + --nldesign-color-primary-text: #dedede; + --nldesign-color-succes: #58cf73; + --nldesign-color-success: #9ceb6f; + --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; --nldesign-color-text-light: #9e9e9e; --nldesign-color-text-muted: #9e9e9e; @@ -71,26 +71,24 @@ --nldesign-color-white-100: #141414; --nldesign-color-white-100-0t: #141414; --nldesign-color-white-95: #202020; - --nldesign-component-badge-background-color: #ebebeb; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; - --nldesign-component-button-active-color: #ebebeb; - --nldesign-component-button-border-color: #ebebeb; - --nldesign-component-button-color: #ebebeb; + --nldesign-component-button-active-color: #ebebebad; + --nldesign-component-button-border-color: #ebebebad; + --nldesign-component-button-color: #ebebebad; --nldesign-component-button-disabled-background-color: #2a2a2a; --nldesign-component-button-disabled-border-color: #535353; --nldesign-component-button-disabled-color: #9e9e9e; --nldesign-component-button-focus-border-color: #39adf580; --nldesign-component-button-hover-background-color: #112131; - --nldesign-component-button-hover-border-color: #c0c0c0; - --nldesign-component-button-hover-color: #ebebeb; - --nldesign-component-button-primary-action-background-color: #ebebeb; - --nldesign-component-button-primary-action-border-color: #ebebeb; + --nldesign-component-button-hover-border-color: #ebebeb80; + --nldesign-component-button-hover-color: #ebebebad; + --nldesign-component-button-primary-action-background-color: #ebebebad; + --nldesign-component-button-primary-action-border-color: #ebebebad; --nldesign-component-button-primary-action-color: #9e9e9e; - --nldesign-component-button-primary-action-hover-background-color: #c0c0c0; + --nldesign-component-button-primary-action-hover-background-color: #ebebeb80; --nldesign-component-button-primary-action-hover-color: #9e9e9e; - --nldesign-component-button-secondary-action-border-color: #ebebeb; - --nldesign-component-button-secondary-action-color: #ebebeb; + --nldesign-component-button-secondary-action-border-color: #ebebebad; + --nldesign-component-button-secondary-action-color: #ebebebad; --nldesign-component-button-secondary-action-hover-background-color: #112131; --nldesign-component-form-field-label-color: #cccccc; --nldesign-component-form-fieldset-border-color: #535353; @@ -124,8 +122,8 @@ --nldesign-component-unordered-list-color: #cccccc; --xxllnc-color-alert-error: #db838b; --xxllnc-color-alert-error-background: #420f13; - --xxllnc-color-alert-success: #99e1aa; - --xxllnc-color-alert-success-background: #1d3f25; + --xxllnc-color-alert-succes: #99e1aa; + --xxllnc-color-alert-succes-background: #1d3f25; --xxllnc-color-alert-warning: #f3d16f; --xxllnc-color-alert-warning-background: #4f3d04; --xxllnc-color-black-0: #ebebeb; @@ -152,9 +150,9 @@ --xxllnc-color-lightgrey-86: #333333; --xxllnc-color-lightgrey-87: #313131; --xxllnc-color-lightgrey-96: #1d1d1d; - --xxllnc-color-primary: #ebebeb; - --xxllnc-color-primary-hover: #c0c0c0; - --xxllnc-color-success: #58cf73; + --xxllnc-color-primary: #ebebebad; + --xxllnc-color-primary-hover: #ebebeb80; + --xxllnc-color-succes: #58cf73; --xxllnc-color-warning: #edb50c; --xxllnc-color-white-100: #141414; --xxllnc-color-white-100-0t: #141414; @@ -165,11 +163,10 @@ body[data-theme-dark], body[data-themes*=dark] { --nldesign-color-alert-error: #db838b; --nldesign-color-alert-error-background: #420f13; - --nldesign-color-alert-success: #99e1aa; - --nldesign-color-alert-success-background: #1d3f25; + --nldesign-color-alert-succes: #99e1aa; + --nldesign-color-alert-succes-background: #1d3f25; --nldesign-color-alert-warning: #f3d16f; --nldesign-color-alert-warning-background: #4f3d04; - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -218,13 +215,14 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #EBEBEB; - --nldesign-color-primary-hover: #333333; + --nldesign-color-primary: #000000ad; + --nldesign-color-primary-hover: #00000080; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #5e5e5e; - --nldesign-color-success: #58cf73; - --nldesign-color-success-rgb: 88, 207, 115; + --nldesign-color-primary-text: #dedede; + --nldesign-color-succes: #58cf73; + --nldesign-color-success: #9ceb6f; + --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; --nldesign-color-text-light: #9e9e9e; --nldesign-color-text-muted: #9e9e9e; @@ -233,26 +231,24 @@ body[data-themes*=dark] { --nldesign-color-white-100: #141414; --nldesign-color-white-100-0t: #141414; --nldesign-color-white-95: #202020; - --nldesign-component-badge-background-color: #ebebeb; - --nldesign-component-badge-color: #9e9e9e; --nldesign-component-button-active-background-color: #172d41; - --nldesign-component-button-active-color: #ebebeb; - --nldesign-component-button-border-color: #ebebeb; - --nldesign-component-button-color: #ebebeb; + --nldesign-component-button-active-color: #ebebebad; + --nldesign-component-button-border-color: #ebebebad; + --nldesign-component-button-color: #ebebebad; --nldesign-component-button-disabled-background-color: #2a2a2a; --nldesign-component-button-disabled-border-color: #535353; --nldesign-component-button-disabled-color: #9e9e9e; --nldesign-component-button-focus-border-color: #39adf580; --nldesign-component-button-hover-background-color: #112131; - --nldesign-component-button-hover-border-color: #c0c0c0; - --nldesign-component-button-hover-color: #ebebeb; - --nldesign-component-button-primary-action-background-color: #ebebeb; - --nldesign-component-button-primary-action-border-color: #ebebeb; + --nldesign-component-button-hover-border-color: #ebebeb80; + --nldesign-component-button-hover-color: #ebebebad; + --nldesign-component-button-primary-action-background-color: #ebebebad; + --nldesign-component-button-primary-action-border-color: #ebebebad; --nldesign-component-button-primary-action-color: #9e9e9e; - --nldesign-component-button-primary-action-hover-background-color: #c0c0c0; + --nldesign-component-button-primary-action-hover-background-color: #ebebeb80; --nldesign-component-button-primary-action-hover-color: #9e9e9e; - --nldesign-component-button-secondary-action-border-color: #ebebeb; - --nldesign-component-button-secondary-action-color: #ebebeb; + --nldesign-component-button-secondary-action-border-color: #ebebebad; + --nldesign-component-button-secondary-action-color: #ebebebad; --nldesign-component-button-secondary-action-hover-background-color: #112131; --nldesign-component-form-field-label-color: #cccccc; --nldesign-component-form-fieldset-border-color: #535353; @@ -286,8 +282,8 @@ body[data-themes*=dark] { --nldesign-component-unordered-list-color: #cccccc; --xxllnc-color-alert-error: #db838b; --xxllnc-color-alert-error-background: #420f13; - --xxllnc-color-alert-success: #99e1aa; - --xxllnc-color-alert-success-background: #1d3f25; + --xxllnc-color-alert-succes: #99e1aa; + --xxllnc-color-alert-succes-background: #1d3f25; --xxllnc-color-alert-warning: #f3d16f; --xxllnc-color-alert-warning-background: #4f3d04; --xxllnc-color-black-0: #ebebeb; @@ -314,9 +310,9 @@ body[data-themes*=dark] { --xxllnc-color-lightgrey-86: #333333; --xxllnc-color-lightgrey-87: #313131; --xxllnc-color-lightgrey-96: #1d1d1d; - --xxllnc-color-primary: #ebebeb; - --xxllnc-color-primary-hover: #c0c0c0; - --xxllnc-color-success: #58cf73; + --xxllnc-color-primary: #ebebebad; + --xxllnc-color-primary-hover: #ebebeb80; + --xxllnc-color-succes: #58cf73; --xxllnc-color-warning: #edb50c; --xxllnc-color-white-100: #141414; --xxllnc-color-white-100-0t: #141414; diff --git a/css/tokens/dark/zevenaar.css b/css/tokens/dark/zevenaar.css index 6c5ace28a..23862658d 100644 --- a/css/tokens/dark/zevenaar.css +++ b/css/tokens/dark/zevenaar.css @@ -1,7 +1,6 @@ /* GENERATED by nldesign DarkPaletteService v3 from tokens/zevenaar.css (sha256:47873ebf10fc8d2a550d7c5385f00b399560b625a48e0bf7c68d61b2e6bb811b) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -27,11 +26,11 @@ --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; @@ -94,7 +93,6 @@ } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; --nldesign-color-background-dark: #2c2e2f; --nldesign-color-background-darker: #3a3b3c; --nldesign-color-background-hover: #252728; @@ -120,11 +118,11 @@ body[data-themes*=dark] { --nldesign-color-nav-background: #141414; --nldesign-color-placeholder-dark: #3f3f3f; --nldesign-color-placeholder-light: #2a2a2a; - --nldesign-color-primary: #2f80d9; + --nldesign-color-primary: #154273; --nldesign-color-primary-hover: #1d5499; --nldesign-color-primary-light: #112131; --nldesign-color-primary-light-hover: #172d41; - --nldesign-color-primary-text: #111111; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; --nldesign-color-text: #cccccc; diff --git a/css/tokens/dark/zwolle.css b/css/tokens/dark/zwolle.css index 049e27fc8..0864965de 100644 --- a/css/tokens/dark/zwolle.css +++ b/css/tokens/dark/zwolle.css @@ -1,200 +1,184 @@ -/* GENERATED by nldesign DarkPaletteService v3 from tokens/zwolle.css (sha256:1c267a3957b857146fffba4c8802e4948540ba5be6e9cad2f76399c16178fc0d) — do not edit */ +/* GENERATED by nldesign DarkPaletteService v3 from tokens/zwolle.css (sha256:99957cc6439a88e53e3454f34b73a965db49361aebcc7badc573b76b24482203) — do not edit */ @media (prefers-color-scheme: dark) { body:not([data-theme-light]):not([data-theme-dark]):not([data-theme-light-highcontrast]):not([data-theme-dark-highcontrast]) { - --nldesign-color-background: #141414; - --nldesign-color-background-dark: #252525; - --nldesign-color-background-darker: #373737; - --nldesign-color-background-hover: #1d1d1d; - --nldesign-color-border: #252525; - --nldesign-color-border-dark: #878787; - --nldesign-color-button-primary-background: #4d6fb2; - --nldesign-color-button-primary-border: #4d6fb2; - --nldesign-color-button-primary-hover: #6b87bf; + --nldesign-color-background-dark: #2c2e2f; + --nldesign-color-background-darker: #3a3b3c; + --nldesign-color-background-hover: #252728; + --nldesign-color-border: #535353; + --nldesign-color-border-dark: #929292; + --nldesign-color-button-primary-background: #81afe2; + --nldesign-color-button-primary-border: #81afe2; + --nldesign-color-button-primary-hover: #6397da; --nldesign-color-button-primary-text: #9e9e9e; --nldesign-color-error: #d83d32; --nldesign-color-error-hover: #e2726d; --nldesign-color-error-rgb: 216, 61, 50; - --nldesign-color-favorite: #f321a5; - --nldesign-color-focus: #ebebeb80; - --nldesign-color-focus-rgb: 235, 235, 235; - --nldesign-color-header-background: #4d6fb2; - --nldesign-color-header-text: #9e9e9e; - --nldesign-color-info: #4c8cc4; - --nldesign-color-info-rgb: 76, 140, 196; - --nldesign-color-link: #4d6fb2; - --nldesign-color-link-hover: #6b87bf; - --nldesign-color-link-visited: #4c8cc4; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #39adf580; + --nldesign-color-focus-rgb: 57, 173, 245; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #cccccc; + --nldesign-color-info: #39adf5; + --nldesign-color-info-rgb: 57, 173, 245; + --nldesign-color-link: #81afe2; + --nldesign-color-link-hover: #39adf5; + --nldesign-color-link-visited: #c392e3; --nldesign-color-nav-background: #141414; - --nldesign-color-placeholder-dark: #373737; - --nldesign-color-placeholder-light: #252525; - --nldesign-color-primary: #476db8; - --nldesign-color-primary-hover: #395793; - --nldesign-color-primary-light: #151f34; - --nldesign-color-primary-light-hover: #1e2d4b; - --nldesign-color-primary-text: #fefefe; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #154273; + --nldesign-color-primary-hover: #1d5499; + --nldesign-color-primary-light: #112131; + --nldesign-color-primary-light-hover: #172d41; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; - --nldesign-color-text: #ebebeb; + --nldesign-color-text: #cccccc; --nldesign-color-text-light: #9e9e9e; --nldesign-color-text-muted: #9e9e9e; --nldesign-color-warning: #f48c25; --nldesign-color-warning-rgb: 244, 140, 37; - --nldesign-component-badge-background-color: #4d6fb2; + --nldesign-component-badge-background-color: #81afe2; --nldesign-component-badge-color: #9e9e9e; - --nldesign-component-button-active-background-color: #1e2d4b; - --nldesign-component-button-active-color: #7390c9; - --nldesign-component-button-border-color: #4d6fb2; - --nldesign-component-button-color: #7390c9; + --nldesign-component-button-active-background-color: #172d41; + --nldesign-component-button-active-color: #8cb9ea; + --nldesign-component-button-border-color: #81afe2; + --nldesign-component-button-color: #8cb9ea; --nldesign-component-button-disabled-background-color: #2a2a2a; --nldesign-component-button-disabled-border-color: #535353; --nldesign-component-button-disabled-color: #9e9e9e; - --nldesign-component-button-focus-border-color: #ebebeb80; - --nldesign-component-button-hover-background-color: #151f34; - --nldesign-component-button-hover-border-color: #6b87bf; - --nldesign-component-button-hover-color: #7390c9; - --nldesign-component-button-primary-action-background-color: #4d6fb2; - --nldesign-component-button-primary-action-border-color: #4d6fb2; + --nldesign-component-button-focus-border-color: #39adf580; + --nldesign-component-button-hover-background-color: #112131; + --nldesign-component-button-hover-border-color: #6397da; + --nldesign-component-button-hover-color: #8cb9ea; + --nldesign-component-button-primary-action-background-color: #81afe2; + --nldesign-component-button-primary-action-border-color: #81afe2; --nldesign-component-button-primary-action-color: #9e9e9e; - --nldesign-component-button-primary-action-hover-background-color: #6b87bf; + --nldesign-component-button-primary-action-hover-background-color: #6397da; --nldesign-component-button-primary-action-hover-color: #9e9e9e; - --nldesign-component-button-secondary-action-border-color: #4d6fb2; - --nldesign-component-button-secondary-action-color: #7390c9; - --nldesign-component-button-secondary-action-hover-background-color: #151f34; - --nldesign-component-form-field-label-color: #ebebeb; - --nldesign-component-form-fieldset-border-color: #252525; - --nldesign-component-form-select-border-color: #252525; - --nldesign-component-form-select-focus-border-color: #4c8cc4; - --nldesign-component-heading-1-color: #ebebeb; - --nldesign-component-heading-2-color: #ebebeb; - --nldesign-component-heading-3-color: #ebebeb; - --nldesign-component-heading-4-color: #ebebeb; - --nldesign-component-heading-5-color: #ebebeb; - --nldesign-component-heading-6-color: #ebebeb; - --nldesign-component-heading-color: #ebebeb; - --nldesign-component-link-color: #7390c9; - --nldesign-component-link-hover-color: #7390c9; - --nldesign-component-link-visited-color: #68a2d4; - --nldesign-component-ordered-list-color: #ebebeb; - --nldesign-component-paragraph-color: #ebebeb; - --nldesign-component-separator-border-color: #252525; - --nldesign-component-table-border-color: #252525; - --nldesign-component-table-header-background-color: #252525; - --nldesign-component-table-header-color: #ebebeb; - --nldesign-component-table-row-hover-background-color: #1d1d1d; + --nldesign-component-button-secondary-action-border-color: #81afe2; + --nldesign-component-button-secondary-action-color: #8cb9ea; + --nldesign-component-button-secondary-action-hover-background-color: #112131; + --nldesign-component-form-field-label-color: #cccccc; + --nldesign-component-form-fieldset-border-color: #535353; + --nldesign-component-form-select-border-color: #535353; + --nldesign-component-form-select-focus-border-color: #39adf5; + --nldesign-component-heading-1-color: #cccccc; + --nldesign-component-heading-2-color: #cccccc; + --nldesign-component-heading-3-color: #cccccc; + --nldesign-component-heading-4-color: #cccccc; + --nldesign-component-heading-5-color: #cccccc; + --nldesign-component-heading-6-color: #cccccc; + --nldesign-component-heading-color: #cccccc; + --nldesign-component-link-color: #8cb9ea; + --nldesign-component-link-hover-color: #3db5ff; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-ordered-list-color: #cccccc; + --nldesign-component-paragraph-color: #cccccc; + --nldesign-component-separator-border-color: #535353; + --nldesign-component-table-border-color: #535353; + --nldesign-component-table-header-background-color: #2c2e2f; + --nldesign-component-table-header-color: #cccccc; + --nldesign-component-table-row-hover-background-color: #252728; --nldesign-component-textbox-background-color: #9e9e9e; --nldesign-component-textbox-border-color: #9e9e9e; - --nldesign-component-textbox-color: #ebebeb; + --nldesign-component-textbox-color: #cccccc; --nldesign-component-textbox-disabled-background-color: #9e9e9e; --nldesign-component-textbox-disabled-color: #9e9e9e; - --nldesign-component-textbox-focus-border-color: #68a2d4; + --nldesign-component-textbox-focus-border-color: #3db5ff; --nldesign-component-textbox-hover-border-color: #9e9e9e; --nldesign-component-textbox-invalid-border-color: #e75f55; - --nldesign-component-unordered-list-color: #ebebeb; - --zwolle-color-black: #ebebeb; - --zwolle-color-blue-40: #6b87bf; - --zwolle-color-blue-45: #4c8cc4; - --zwolle-color-blue-50: #4d6fb2; - --zwolle-color-grey: #252525; - --zwolle-color-pink-50: #f321a5; - --zwolle-color-white: #141414; + --nldesign-component-unordered-list-color: #cccccc; } } body[data-theme-dark], body[data-themes*=dark] { - --nldesign-color-background: #141414; - --nldesign-color-background-dark: #252525; - --nldesign-color-background-darker: #373737; - --nldesign-color-background-hover: #1d1d1d; - --nldesign-color-border: #252525; - --nldesign-color-border-dark: #878787; - --nldesign-color-button-primary-background: #4d6fb2; - --nldesign-color-button-primary-border: #4d6fb2; - --nldesign-color-button-primary-hover: #6b87bf; + --nldesign-color-background-dark: #2c2e2f; + --nldesign-color-background-darker: #3a3b3c; + --nldesign-color-background-hover: #252728; + --nldesign-color-border: #535353; + --nldesign-color-border-dark: #929292; + --nldesign-color-button-primary-background: #81afe2; + --nldesign-color-button-primary-border: #81afe2; + --nldesign-color-button-primary-hover: #6397da; --nldesign-color-button-primary-text: #9e9e9e; --nldesign-color-error: #d83d32; --nldesign-color-error-hover: #e2726d; --nldesign-color-error-rgb: 216, 61, 50; - --nldesign-color-favorite: #f321a5; - --nldesign-color-focus: #ebebeb80; - --nldesign-color-focus-rgb: 235, 235, 235; - --nldesign-color-header-background: #4d6fb2; - --nldesign-color-header-text: #9e9e9e; - --nldesign-color-info: #4c8cc4; - --nldesign-color-info-rgb: 76, 140, 196; - --nldesign-color-link: #4d6fb2; - --nldesign-color-link-hover: #6b87bf; - --nldesign-color-link-visited: #4c8cc4; + --nldesign-color-favorite: #f48c25; + --nldesign-color-focus: #39adf580; + --nldesign-color-focus-rgb: 57, 173, 245; + --nldesign-color-header-background: #141414; + --nldesign-color-header-text: #cccccc; + --nldesign-color-info: #39adf5; + --nldesign-color-info-rgb: 57, 173, 245; + --nldesign-color-link: #81afe2; + --nldesign-color-link-hover: #39adf5; + --nldesign-color-link-visited: #c392e3; --nldesign-color-nav-background: #141414; - --nldesign-color-placeholder-dark: #373737; - --nldesign-color-placeholder-light: #252525; - --nldesign-color-primary: #476db8; - --nldesign-color-primary-hover: #395793; - --nldesign-color-primary-light: #151f34; - --nldesign-color-primary-light-hover: #1e2d4b; - --nldesign-color-primary-text: #fefefe; + --nldesign-color-placeholder-dark: #3f3f3f; + --nldesign-color-placeholder-light: #2a2a2a; + --nldesign-color-primary: #154273; + --nldesign-color-primary-hover: #1d5499; + --nldesign-color-primary-light: #112131; + --nldesign-color-primary-light-hover: #172d41; + --nldesign-color-primary-text: #dedede; --nldesign-color-success: #9ceb6f; --nldesign-color-success-rgb: 156, 235, 111; - --nldesign-color-text: #ebebeb; + --nldesign-color-text: #cccccc; --nldesign-color-text-light: #9e9e9e; --nldesign-color-text-muted: #9e9e9e; --nldesign-color-warning: #f48c25; --nldesign-color-warning-rgb: 244, 140, 37; - --nldesign-component-badge-background-color: #4d6fb2; + --nldesign-component-badge-background-color: #81afe2; --nldesign-component-badge-color: #9e9e9e; - --nldesign-component-button-active-background-color: #1e2d4b; - --nldesign-component-button-active-color: #7390c9; - --nldesign-component-button-border-color: #4d6fb2; - --nldesign-component-button-color: #7390c9; + --nldesign-component-button-active-background-color: #172d41; + --nldesign-component-button-active-color: #8cb9ea; + --nldesign-component-button-border-color: #81afe2; + --nldesign-component-button-color: #8cb9ea; --nldesign-component-button-disabled-background-color: #2a2a2a; --nldesign-component-button-disabled-border-color: #535353; --nldesign-component-button-disabled-color: #9e9e9e; - --nldesign-component-button-focus-border-color: #ebebeb80; - --nldesign-component-button-hover-background-color: #151f34; - --nldesign-component-button-hover-border-color: #6b87bf; - --nldesign-component-button-hover-color: #7390c9; - --nldesign-component-button-primary-action-background-color: #4d6fb2; - --nldesign-component-button-primary-action-border-color: #4d6fb2; + --nldesign-component-button-focus-border-color: #39adf580; + --nldesign-component-button-hover-background-color: #112131; + --nldesign-component-button-hover-border-color: #6397da; + --nldesign-component-button-hover-color: #8cb9ea; + --nldesign-component-button-primary-action-background-color: #81afe2; + --nldesign-component-button-primary-action-border-color: #81afe2; --nldesign-component-button-primary-action-color: #9e9e9e; - --nldesign-component-button-primary-action-hover-background-color: #6b87bf; + --nldesign-component-button-primary-action-hover-background-color: #6397da; --nldesign-component-button-primary-action-hover-color: #9e9e9e; - --nldesign-component-button-secondary-action-border-color: #4d6fb2; - --nldesign-component-button-secondary-action-color: #7390c9; - --nldesign-component-button-secondary-action-hover-background-color: #151f34; - --nldesign-component-form-field-label-color: #ebebeb; - --nldesign-component-form-fieldset-border-color: #252525; - --nldesign-component-form-select-border-color: #252525; - --nldesign-component-form-select-focus-border-color: #4c8cc4; - --nldesign-component-heading-1-color: #ebebeb; - --nldesign-component-heading-2-color: #ebebeb; - --nldesign-component-heading-3-color: #ebebeb; - --nldesign-component-heading-4-color: #ebebeb; - --nldesign-component-heading-5-color: #ebebeb; - --nldesign-component-heading-6-color: #ebebeb; - --nldesign-component-heading-color: #ebebeb; - --nldesign-component-link-color: #7390c9; - --nldesign-component-link-hover-color: #7390c9; - --nldesign-component-link-visited-color: #68a2d4; - --nldesign-component-ordered-list-color: #ebebeb; - --nldesign-component-paragraph-color: #ebebeb; - --nldesign-component-separator-border-color: #252525; - --nldesign-component-table-border-color: #252525; - --nldesign-component-table-header-background-color: #252525; - --nldesign-component-table-header-color: #ebebeb; - --nldesign-component-table-row-hover-background-color: #1d1d1d; + --nldesign-component-button-secondary-action-border-color: #81afe2; + --nldesign-component-button-secondary-action-color: #8cb9ea; + --nldesign-component-button-secondary-action-hover-background-color: #112131; + --nldesign-component-form-field-label-color: #cccccc; + --nldesign-component-form-fieldset-border-color: #535353; + --nldesign-component-form-select-border-color: #535353; + --nldesign-component-form-select-focus-border-color: #39adf5; + --nldesign-component-heading-1-color: #cccccc; + --nldesign-component-heading-2-color: #cccccc; + --nldesign-component-heading-3-color: #cccccc; + --nldesign-component-heading-4-color: #cccccc; + --nldesign-component-heading-5-color: #cccccc; + --nldesign-component-heading-6-color: #cccccc; + --nldesign-component-heading-color: #cccccc; + --nldesign-component-link-color: #8cb9ea; + --nldesign-component-link-hover-color: #3db5ff; + --nldesign-component-link-visited-color: #cea0eb; + --nldesign-component-ordered-list-color: #cccccc; + --nldesign-component-paragraph-color: #cccccc; + --nldesign-component-separator-border-color: #535353; + --nldesign-component-table-border-color: #535353; + --nldesign-component-table-header-background-color: #2c2e2f; + --nldesign-component-table-header-color: #cccccc; + --nldesign-component-table-row-hover-background-color: #252728; --nldesign-component-textbox-background-color: #9e9e9e; --nldesign-component-textbox-border-color: #9e9e9e; - --nldesign-component-textbox-color: #ebebeb; + --nldesign-component-textbox-color: #cccccc; --nldesign-component-textbox-disabled-background-color: #9e9e9e; --nldesign-component-textbox-disabled-color: #9e9e9e; - --nldesign-component-textbox-focus-border-color: #68a2d4; + --nldesign-component-textbox-focus-border-color: #3db5ff; --nldesign-component-textbox-hover-border-color: #9e9e9e; --nldesign-component-textbox-invalid-border-color: #e75f55; - --nldesign-component-unordered-list-color: #ebebeb; - --zwolle-color-black: #ebebeb; - --zwolle-color-blue-40: #6b87bf; - --zwolle-color-blue-45: #4c8cc4; - --zwolle-color-blue-50: #4d6fb2; - --zwolle-color-grey: #252525; - --zwolle-color-pink-50: #f321a5; - --zwolle-color-white: #141414; + --nldesign-component-unordered-list-color: #cccccc; } diff --git a/css/tokens/dinkelland.css b/css/tokens/dinkelland.css index 1e2747c83..e642fc19a 100644 --- a/css/tokens/dinkelland.css +++ b/css/tokens/dinkelland.css @@ -94,13 +94,13 @@ --nldesign-conduction-download-card-border-radius: 0px; --nldesign-conduction-logo-header-inline-size: 150px; --nldesign-conduction-logo-header-block-size: 30px; - --nldesign-conduction-logo-header-background-image: url('../../../img/logos/dinkelland.svg'); + --nldesign-conduction-logo-header-background-image: url('https://www.dinkelland.nl/sites/all/themes/dinkelland/logo.svg'); --nldesign-conduction-logo-navbar-inline-size: 150px; --nldesign-conduction-logo-navbar-block-size: 40px; - --nldesign-conduction-logo-navbar-background-image: url('../../../img/logos/dinkelland.svg'); + --nldesign-conduction-logo-navbar-background-image: url('https://www.dinkelland.nl/sites/all/themes/dinkelland/logo.svg'); --nldesign-conduction-primary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {dinkelland.color.primary}; */ - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {dinkelland.color.primary}; */ + --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {dinkelland.color.primary}; + --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {dinkelland.color.primary}; --nldesign-conduction-primary-top-nav-item-padding: 18px; --nldesign-conduction-primary-top-nav-padding-inline-end: 16px; --nldesign-conduction-primary-top-nav-padding-inline-start: 16px; @@ -108,7 +108,7 @@ --nldesign-conduction-primary-top-nav-padding-block-start: 16px; --nldesign-conduction-secondary-top-nav-background-color: transparent; --nldesign-conduction-secondary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {dinkelland.color.primary}; */ + --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {dinkelland.color.primary}; --nldesign-conduction-secondary-top-nav-font-weight: 400; --nldesign-conduction-secondary-top-nav-item-padding: 18px; --nldesign-conduction-secondary-top-nav-padding-inline-end: 16px; @@ -145,7 +145,7 @@ --nldesign-conduction-tabs-tab-min-width: 160px; --nldesign-conduction-tabs-tab-min-height: 61px; --nldesign-conduction-tabs-tab-selected-background-color: transparent; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 0px {dinkelland.color.white.100}; */ + --nldesign-conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 0px {dinkelland.color.white.100}; --nldesign-conduction-tabs-tab-selected-border-style: solid; --nldesign-conduction-tabs-tab-selected-border-bottom: 0; --nldesign-conduction-tabs-tab-selected-border-bottom-width: 0px; @@ -166,9 +166,9 @@ --nldesign-conduction-tooltip-border-radius: 0px; --nldesign-conduction-tooltip-z-index: 9999; --nldesign-component-badge-counter-border-radius: 50%; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-background-color: {dinkelland.color.black.0}; */ + --nldesign-component-badge-background-color: {dinkelland.color.black.0} ; --nldesign-component-badge-border-radius: 0; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-color: {dinkelland.color.white.100}; */ + --nldesign-component-badge-color: {dinkelland.color.white.100} ; --nldesign-component-button-font-size: inherit; --nldesign-component-button-font-weight: inherit; --nldesign-component-button-primary-action-font-weight: inherit; @@ -199,7 +199,7 @@ --nldesign-component-unordered-list-padding-inline-start: 2ch; --nldesign-component-unordered-list-item-padding-inline-start: 1ch; --nldesign-component-page-footer-background-color: unset; - --nldesign-component-page-footer-background-image: unset; /* External footer-bg.svg removed (privacy/availability). Replace with a locally-bundled asset under img/themes/dinkelland/ if needed. */ + --nldesign-component-page-footer-background-image: url(https://www.dinkelland.nl/sites/all/themes/dinkelland/dist/assets/img/footer-bg.svg); --nldesign-component-page-max-inline-size: 1140px; --nldesign-component-paragraph-line-height: 1.5em; --nldesign-component-radio-button-icon-size: 5px; diff --git a/css/tokens/drechterland.css b/css/tokens/drechterland.css index e240cf809..7a80ff909 100644 --- a/css/tokens/drechterland.css +++ b/css/tokens/drechterland.css @@ -8,9 +8,6 @@ */ :root { - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/drechterland.svg'); - /* NL Design tokens */ --nldesign-color-blue-40: hsl(198 70% 35%); --nldesign-color-grey-0: hsl(0 0% 0%); diff --git a/css/tokens/epe.css b/css/tokens/epe.css index 663a38b80..42430127a 100644 --- a/css/tokens/epe.css +++ b/css/tokens/epe.css @@ -8,9 +8,6 @@ */ :root { - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/epe.svg'); - /* NL Design tokens */ --nldesign-brand-epe-color-error: #dc3545; --nldesign-brand-epe-color-alert-error-background: #f8d7da; @@ -101,8 +98,8 @@ --nldesign-component-conduction-logo-navbar-block-size: 45px; --nldesign-component-conduction-logo-navbar-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='155' height='88' viewBox='0 0 155 88' class='logo__svg' role='img' aria-hidden='true'%3E%3Ctitle id='site-logo-title'%3EGemeente Epe%3C/title%3E%3Cdesc id='site-logo-desc'%3ELogo dat naar de hoofdpagina leidt%3C/desc%3E%3Cpath fill='%23231f20' class='logo__svg--letters-path' d='M7.7,74.621h5.957v8.144a16.255,16.255,0,0,1-5.594.8C4.916,83.57,0,82.137,0,75.642c0-3.715,2.325-7.754,8.767-7.754A16.751,16.751,0,0,1,13.2,68.5l-.242,2.975a9.753,9.753,0,0,0-3.875-.847c-4.19,0-5.013,3.453-5.013,5.169,0,2.824,1.453,5.038,4.48,5.038a3.46,3.46,0,0,0,1.381-.217V77.184H7.7ZM19.69,76.684c0-.607,0-2.781,1.962-2.781,1.574,0,1.985,1.347,1.985,2.781Zm7.435,1.043c0-5.909-4.335-5.909-5.473-5.909a5.478,5.478,0,0,0-5.6,5.8c0,3.454,1.962,5.865,6.394,5.865a13.084,13.084,0,0,0,4-.653l-.073-2.583a8.557,8.557,0,0,1-3.56.89c-2.156,0-3.124-1.238-3.124-2.585h7.435Zm15.96-1.389c0-1.3-.605-1.782-1.453-1.782a1.445,1.445,0,0,0-1.574,1.586v7.167H36.231V76.338c0-1.434-.7-1.782-1.332-1.782-1.259,0-1.7.977-1.7,2.411v6.342H29.377V74.36a19.59,19.59,0,0,0-.1-2.368h3.488c.048.5.1,1.13.1,1.891h.049a3.461,3.461,0,0,1,3.56-2.065,3.212,3.212,0,0,1,3.27,1.891,3.434,3.434,0,0,1,3.463-1.891c2.786,0,3.706,1.826,3.706,4.085v7.406H43.085Zm9.809.346c0-.607,0-2.781,1.961-2.781,1.575,0,1.987,1.347,1.987,2.781Zm7.435,1.043c0-5.909-4.335-5.909-5.474-5.909a5.478,5.478,0,0,0-5.594,5.8c0,3.454,1.962,5.865,6.394,5.865a13.084,13.084,0,0,0,4-.653l-.073-2.583a8.553,8.553,0,0,1-3.56.89c-2.155,0-3.124-1.238-3.124-2.585h7.435Zm5.57-1.043c0-.607,0-2.781,1.962-2.781,1.574,0,1.986,1.347,1.986,2.781Zm7.435,1.043c0-5.909-4.335-5.909-5.473-5.909a5.478,5.478,0,0,0-5.6,5.8c0,3.454,1.962,5.865,6.394,5.865a13.079,13.079,0,0,0,4-.653l-.072-2.583a8.561,8.561,0,0,1-3.561.89c-2.155,0-3.124-1.238-3.124-2.585h7.435Zm9.228-1.389c0-1.412-.7-1.782-1.478-1.782-1.235,0-1.67.955-1.67,2.411v6.342H75.587V74.36a19.8,19.8,0,0,0-.1-2.368h3.487c.049.5.1,1.13.1,1.891h.048a3.463,3.463,0,0,1,3.561-2.065c2.785,0,3.7,1.826,3.7,4.085v7.406H82.562Zm5.5-4.346h2.18V69.669l3.73-1.064v3.387h2.47V74.4h-2.47v5.19c0,1.108.557,1.412,1.283,1.412a3.133,3.133,0,0,0,1.261-.239v2.411a10.072,10.072,0,0,1-2.665.305c-1.986,0-3.706-.869-3.706-3.345V74.4H88.059Zm13.733,4.692c0-.607,0-2.781,1.961-2.781,1.575,0,1.986,1.347,1.986,2.781Zm7.434,1.043c0-5.909-4.335-5.909-5.473-5.909a5.479,5.479,0,0,0-5.595,5.8c0,3.454,1.961,5.865,6.395,5.865a13.089,13.089,0,0,0,4-.653l-.074-2.583a8.544,8.544,0,0,1-3.559.89c-2.156,0-3.124-1.238-3.124-2.585h7.434Zm8.815-9.578H127.8V70.8h-5.933v3.39h5.642v2.648h-5.642V80.66h6.223v2.649H118.041Zm19.885,9.491c0,1.8-.146,3.5-1.841,3.5-1.551,0-1.913-1.694-1.913-3.5,0-1.3.339-3.345,1.913-3.345C137.828,74.3,137.926,76.467,137.926,77.64ZM130.345,88h3.827V81.637h.048a3.278,3.278,0,0,0,3.245,1.846c3.173,0,4.432-2.52,4.432-5.561,0-3.6-1.6-6.1-4.432-6.1a3.607,3.607,0,0,0-3.439,1.978h-.048a15.517,15.517,0,0,0-.1-1.8h-3.632a23.955,23.955,0,0,1,.1,2.542Zm17.22-11.316c0-.607,0-2.781,1.962-2.781,1.574,0,1.986,1.347,1.986,2.781ZM155,77.727c0-5.909-4.335-5.909-5.473-5.909a5.479,5.479,0,0,0-5.6,5.8c0,3.454,1.963,5.865,6.394,5.865a13.091,13.091,0,0,0,4-.653l-.072-2.583a8.569,8.569,0,0,1-3.561.89c-2.156,0-3.124-1.238-3.124-2.585H155Z'%3E%3C/path%3E%3Cpath fill='%2300539f' class='logo__svg--deer-path' d='M102.234,38.54l.11-.063c-.038-7.534-2.5-14.87-6.094-21.718v-.248l8.5-2.678-.6-2.989-7.8-.437A8.7,8.7,0,0,0,99.4,7.557l-1.809-1c-1.073,1.529-3.054,3.053-6.7,3.053-9.735,0-15.672-7.5-17.153-9.614L71.754.783c.956,1.481,5.885,8.486,14.6,10.413l-6.025,3.031,6,.436L87.5,25.622l-39.711-.006.054,2.164c1.447-.083,3.011-.042,3.975,1a4.948,4.948,0,0,1,.5,5.167,37.313,37.313,0,0,1-2.967,5.109c-9.037,2-16.871,5-22.686,8.82l2.466,3.062c5.771-3.791,13.73-6.721,22.965-8.591l.005,0v0a126.7,126.7,0,0,1,26.561-2.336c17.5.231,34.074,3.822,44.985,9.683l2.119-3.266A83.593,83.593,0,0,0,102.234,38.54Z'%3E%3C/path%3E%3Cpath fill='%23d5a10f' class='logo__svg--emblem-path' d='M115.353,41.321c.036.224.068.458.1.684-.8-.273-1.615-.532-2.44-.787.3-.845.732-1.635,1.208-1.58C114.809,39.706,115.217,40.479,115.353,41.321Zm-82.624-.978c1.1,1.09,2.674,2.585,2.982,2.873q1.681-.684,3.475-1.308a12.483,12.483,0,0,1-.321-2.475,19.928,19.928,0,0,1,.363-3.388.927.927,0,0,0-.272-1.069.535.535,0,0,0-.794.159,19.482,19.482,0,0,0-1.382,2.411s-.136.492-.333.477-.075-.5-.061-.591a16.765,16.765,0,0,1,1.588-4.866c1.284-2.562,1.1-1.971,1.194-2.3s.226-1.046-.485-.849-.694.243-.785.106.121-.349.257-.606a16.566,16.566,0,0,1,3.4-3.684s.757-.591.438-1.015-.68-.152-.906-.122-.363.106-.438-.03.1-.576.544-.849a42.561,42.561,0,0,0,5.244-3.9c.862-1,1.33-1.622.968-2.077s-1.345-.379-2.086.091a24.753,24.753,0,0,0-3.31,2.926,9.567,9.567,0,0,1-1.375,1.379c-.151.061-.378.167-.181-.182s.5-.924.226-1.121-.65-.273-1.33.182a11.369,11.369,0,0,0-3.37,3.986,17.766,17.766,0,0,0-.877,2.744c-.03.137-.332.561-.453.076a7.037,7.037,0,0,1-.181-1.152c-.016-.212-.046-.561-.318-.606a.919.919,0,0,0-.967.5c-.257.47-1.633,3.683-1.149,6.033a23.4,23.4,0,0,0,.877,3.532c.151.364.257.531.106.622a1,1,0,0,1-.877-.318c-.227-.258-.71-.9-.8-1.032s-.439-.454-.756-.227a2,2,0,0,0-.242,1.85A12.089,12.089,0,0,0,32.729,40.343ZM114.5,23.213c.44.273.62.712.545.849s-.212.06-.439.03-.588-.3-.906.122.438,1.015.438,1.015a16.609,16.609,0,0,1,3.4,3.684c.136.257.347.47.256.606s-.075.091-.785-.106-.576.515-.484.849-.092-.258,1.194,2.3a16.744,16.744,0,0,1,1.587,4.866c.014.091.136.576-.061.591s-.332-.477-.332-.477a19.61,19.61,0,0,0-1.382-2.411.535.535,0,0,0-.794-.159.928.928,0,0,0-.273,1.069,20.012,20.012,0,0,1,.364,3.388,14.049,14.049,0,0,1-.418,2.912q1.629.579,3.176,1.206c.134-.115.273-.222.34-.283.166-.152,1.873-1.773,3.037-2.925a12.07,12.07,0,0,0,2.388-3.82,2,2,0,0,0-.241-1.85c-.318-.227-.665.091-.756.227s-.574.774-.8,1.032a1,1,0,0,1-.878.318c-.15-.091-.044-.258.107-.622a23.621,23.621,0,0,0,.876-3.532c.485-2.35-.892-5.563-1.149-6.033a.919.919,0,0,0-.967-.5c-.272.045-.3.394-.316.606a7.1,7.1,0,0,1-.183,1.152c-.12.485-.423.061-.452-.076a17.581,17.581,0,0,0-.878-2.744,11.368,11.368,0,0,0-3.369-3.986c-.681-.455-1.058-.38-1.33-.182s.03.773.225,1.121-.03.243-.18.182a9.567,9.567,0,0,1-1.375-1.379,24.815,24.815,0,0,0-3.31-2.926c-.742-.47-1.723-.545-2.086-.091s.1,1.077.967,2.077A42.561,42.561,0,0,0,114.5,23.213Zm5.79,20.62q1.323.553,2.579,1.144a20.9,20.9,0,0,0,2.438-2.3c.3-.378.832-1.485.513-1.819s-1.48.622-2.388,1.334A15.2,15.2,0,0,1,120.288,43.833Zm-2.025,5.045c-.274.076-1.332.348-1.981.47s-3.128.273-3.416.287-.287.076-.3-.167.166-.211.166-.211.982-.274,2.508-.713a34.4,34.4,0,0,0,3.383-1.219q-3.251-1.358-6.921-2.491a10.7,10.7,0,0,1-.791,1.534,7.909,7.909,0,0,1-3.037,2.365c-.636.228-.25-.341-.25-.341s.18-.227.522-.682a10.755,10.755,0,0,0,1.019-2.387,1.742,1.742,0,0,0-.107-1.257c-.209-.057-.425-.11-.635-.166a1.173,1.173,0,0,0-.39.444,20.853,20.853,0,0,1-9.3,6.458c-6.849,2.465-14.532,3.2-20.964,3.267-6.4-.073-14.02-.821-20.814-3.267a20.848,20.848,0,0,1-9.3-6.458s-.362-.749-.861-.432-.317,1.115-.272,1.411a10.716,10.716,0,0,0,1.02,2.387c.34.455.522.682.522.682s.386.569-.25.341a7.9,7.9,0,0,1-3.038-2.365,12.548,12.548,0,0,1-.971-1.958,69.708,69.708,0,0,0-7.355,2.653,35.7,35.7,0,0,0,4,1.481c1.526.439,2.509.713,2.509.713s.181-.031.165.211-.014.182-.3.167-2.766-.167-3.415-.287-1.708-.394-1.981-.47-.694-.167-.846.273.968,1.136,1.224,1.273A28.168,28.168,0,0,0,44.73,52.8a92,92,0,0,0,9.944,1.7s.529,0,.529.226-.3.213-.529.228-2.145.075-2.539.061-2.765-.212-3.052-.258-1.18-.061-1.134.228.257.7,1.013.864,6.544,1.106,7.737,1.182,6.485.318,6.772.318.876.379.03.41-3.2.091-3.2.091-.439.014-.439.242.258.3.514.334,3.764.546,3.764.546,6.59.818,7.375.894c.577.055,3.637.235,6.175.3,0,0,.606.028.917.018.087,0,.261-.01.261-.01,2.328-.089,4.8-.259,5.316-.308.786-.076,7.376-.894,7.376-.894s3.507-.516,3.763-.546.515-.107.515-.334-.439-.242-.439-.242-2.358-.061-3.2-.091-.257-.41.03-.41,5.577-.242,6.772-.318,6.981-1.016,7.737-1.182.967-.577,1.012-.864-.846-.273-1.134-.228-2.658.243-3.053.258-2.311-.046-2.538-.061-.529,0-.529-.228.529-.226.529-.226a91.957,91.957,0,0,0,9.944-1.7,28.13,28.13,0,0,0,6.923-2.379c.257-.137,1.375-.834,1.224-1.273S118.534,48.8,118.263,48.878ZM32.438,44.657q1.155-.55,2.376-1.067a13.562,13.562,0,0,1-2.553-1.4c-.907-.712-2.071-1.667-2.388-1.334s.212,1.441.514,1.819A20.028,20.028,0,0,0,32.438,44.657Zm9.034-5.019c-.589.068-1,.841-1.133,1.683-.01.067-.021.137-.031.206q1.092-.363,2.22-.7C42.24,40.146,41.872,39.592,41.472,39.638Z'%3E%3C/path%3E%3C/svg%3E"); --nldesign-component-conduction-primary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {epe.color.primary}; */ - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {epe.color.primary}; */ + --nldesign-component-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {epe.color.primary}; + --nldesign-component-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {epe.color.primary}; --nldesign-component-conduction-primary-top-nav-item-padding: 18px; --nldesign-component-conduction-primary-top-nav-padding-inline-end: 16px; --nldesign-component-conduction-primary-top-nav-padding-inline-start: 16px; @@ -110,7 +107,7 @@ --nldesign-component-conduction-primary-top-nav-padding-block-start: 16px; --nldesign-component-conduction-secondary-top-nav-background-color: transparent; --nldesign-component-conduction-secondary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {epe.color.primary}; */ + --nldesign-component-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {epe.color.primary}; --nldesign-component-conduction-secondary-top-nav-font-weight: 400; --nldesign-component-conduction-secondary-top-nav-item-padding: 18px; --nldesign-component-conduction-secondary-top-nav-padding-inline-end: 16px; @@ -147,7 +144,7 @@ --nldesign-component-conduction-tooltip-z-index: 9999; --nldesign-component-utrecht-badge-counter-border-radius: 50%; --nldesign-component-utrecht-badge-border-radius: 0; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-utrecht-badge-color: {epe.color.light-blue.31}; */ + --nldesign-component-utrecht-badge-color: {epe.color.light-blue.31} ; --nldesign-component-utrecht-breadcrumb-nav-font-size: 16px; --nldesign-component-utrecht-breadcrumb-nav-separator-icon-size: 13px; --nldesign-component-utrecht-button-border-width: 3px; diff --git a/css/tokens/hoorn.css b/css/tokens/hoorn.css index f584c781f..3c0cf1a49 100644 --- a/css/tokens/hoorn.css +++ b/css/tokens/hoorn.css @@ -8,9 +8,6 @@ */ :root { - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/hoorn.svg'); - /* NL Design tokens */ --nldesign-color-blue-20: #09366c; --nldesign-color-blue-25: hsl(213deg 85% 23%); diff --git a/css/tokens/nijmegen.css b/css/tokens/nijmegen.css index 15097ac36..417a8c082 100644 --- a/css/tokens/nijmegen.css +++ b/css/tokens/nijmegen.css @@ -8,9 +8,6 @@ */ :root { - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/nijmegen.svg'); - /* NL Design tokens */ --nldesign-color-green-20: #17564a; --nldesign-color-green-22: #006f5a; diff --git a/css/tokens/noaberkracht.css b/css/tokens/noaberkracht.css index 58e299fd1..eb282f0cf 100644 --- a/css/tokens/noaberkracht.css +++ b/css/tokens/noaberkracht.css @@ -9,10 +9,6 @@ :root { /* NL Design tokens */ - /* NOTE: #4376fc is the legacy Conduction cobalt (retired 2026-05-13). - Verify with Noaberkracht municipality whether their actual brand primary - should replace this value. If confirmed, update upstream in nl-design-system/themes. - See conduction brand ref: canonical cobalt is #21468B, not #4376fc. */ --nldesign-color-primary: #4376fc; --nldesign-color-primary-hover: #2e5ed9; --nldesign-color-error: #dc3545; @@ -45,7 +41,7 @@ --nldesign-color-white-100: #ffffff; --nldesign-color-black-0: #000000; --nldesign-font-size-4xs: 8px; - --nldesign-font-size-3xs: 10px; + --nldesign-font-size-3xs: 10x; --nldesign-font-size-2xs: 12px; --nldesign-font-size-xs: 14px; --nldesign-font-size-sm: 18px; @@ -99,17 +95,17 @@ --nldesign-conduction-download-card-border-radius: 22px; --nldesign-conduction-logo-header-inline-size: 130px; --nldesign-conduction-logo-header-block-size: 75px; - --nldesign-conduction-logo-header-background-image: url('../../../img/logos/noaberkracht.svg'); + --nldesign-conduction-logo-header-background-image: url('https://werkenbijnoaberkracht.nl/assets/img/base/logo.png'); --nldesign-conduction-logo-footer-inline-size: 150px; --nldesign-conduction-logo-footer-block-size: 87px; - --nldesign-conduction-logo-footer-background-image: url('../../../img/logos/noaberkracht.svg'); + --nldesign-conduction-logo-footer-background-image: url('https://werkenbijnoaberkracht.nl/assets/img/base/logo.png'); --nldesign-conduction-logo-navbar-inline-size: 69px; --nldesign-conduction-logo-navbar-block-size: 43px; - --nldesign-conduction-logo-navbar-background-image: url('../../../img/logos/noaberkracht.svg'); - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {noaberkracht.color.yellow.47}; */ - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {noaberkracht.color.yellow.47}; */ + --nldesign-conduction-logo-navbar-background-image: url('https://werkenbijnoaberkracht.nl/assets/img/base/logo.png'); + --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {noaberkracht.color.yellow.47}; + --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {noaberkracht.color.yellow.47}; --nldesign-conduction-primary-top-nav-dropdown-border-style: solid; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px {noaberkracht.color.yellow.47}; */ + --nldesign-conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px {noaberkracht.color.yellow.47}; --nldesign-conduction-primary-top-nav-item-padding: 18px; --nldesign-conduction-primary-top-nav-padding-inline-end: 16px; --nldesign-conduction-primary-top-nav-padding-inline-start: 16px; @@ -118,7 +114,7 @@ --nldesign-conduction-secondary-top-nav-background-color: transparent; --nldesign-conduction-secondary-top-nav-hover-background-color: transparent; --nldesign-conduction-secondary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {noaberkracht.color.yellow.47}; */ + --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {noaberkracht.color.yellow.47}; --nldesign-conduction-secondary-top-nav-font-weight: 400; --nldesign-conduction-secondary-top-nav-item-padding: 18px; --nldesign-conduction-secondary-top-nav-padding-inline-end: 16px; @@ -154,9 +150,9 @@ --nldesign-conduction-tooltip-border-radius: 0px; --nldesign-conduction-tooltip-z-index: 9999; --nldesign-component-badge-counter-border-radius: 50%; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-background-color: {noaberkracht.color.blue.31}; */ + --nldesign-component-badge-background-color: {noaberkracht.color.blue.31} ; --nldesign-component-badge-border-radius: 9999px; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-color: {noaberkracht.color.white.100}; */ + --nldesign-component-badge-color: {noaberkracht.color.white.100} ; --nldesign-component-button-border-radius: 9999px; --nldesign-component-button-font-size: inherit; --nldesign-component-button-font-weight: inherit; @@ -194,7 +190,6 @@ --nldesign-component-textbox-font-size: 14px; /* Noaberkracht palette */ - /* NOTE: legacy #4376fc — verify with municipality; may need upstream update */ --noaberkracht-color-primary: #4376fc; --noaberkracht-color-primary-hover: #2e5ed9; --noaberkracht-color-error: #dc3545; @@ -227,7 +222,7 @@ --noaberkracht-color-white-100: #ffffff; --noaberkracht-color-black-0: #000000; --noaberkracht-font-size-4xs: 8px; - --noaberkracht-font-size-3xs: 10px; + --noaberkracht-font-size-3xs: 10x; --noaberkracht-font-size-2xs: 12px; --noaberkracht-font-size-xs: 14px; --noaberkracht-font-size-sm: 18px; diff --git a/css/tokens/noordwijk.css b/css/tokens/noordwijk.css index 27c44be1f..aae42d555 100644 --- a/css/tokens/noordwijk.css +++ b/css/tokens/noordwijk.css @@ -8,9 +8,6 @@ */ :root { - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/noordwijk.svg'); - /* NL Design tokens */ --nldesign-color-error: #dc3545; --nldesign-color-alert-error: #721c24; @@ -102,10 +99,10 @@ --nldesign-conduction-logo-navbar-inline-size: 102px; --nldesign-conduction-logo-navbar-block-size: 45px; --nldesign-conduction-logo-navbar-background-image: url('data:image/svg+xml,%3Csvg class="custom-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 72.7"%3E%3Cdefs%3E%3CclipPath id="a"%3E%3Cpath fill="none" d="M5.6 0H165v72.7H5.6Z" data-name="Path 5771"%3E%3C/path%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name="Group 11598"%3E%3Cg clip-path="url(%23a)" data-name="Mask Group 11250"%3E%3Cpath fill="%23111A64" d="M72 27.1v.9h-1.6a1.9 1.9 0 0 1 .4.5 1.8 1.8 0 0 1 .1.8 1.9 1.9 0 0 1-.7 1.5 3.5 3.5 0 0 1-2.2.6h-.5a2 2 0 0 1-.4 0 2.9 2.9 0 0 1-.1.3.6.6 0 0 0-.1.3c0 .2 0 .3.3.4a5.5 5.5 0 0 0 .9.2l1 .3a5.5 5.5 0 0 1 1.2.3 2.5 2.5 0 0 1 .9.6 1.3 1.3 0 0 1 .3.9 1.5 1.5 0 0 1-.3.9 2 2 0 0 1-.7.6 3.9 3.9 0 0 1-1 .4 8 8 0 0 1-1.5 0 5.4 5.4 0 0 1-2.5-.4 1.3 1.3 0 0 1-.8-1.2 1.4 1.4 0 0 1 .5-1 4.1 4.1 0 0 1 1.4-.7 2.3 2.3 0 0 1-.5-.4.6.6 0 0 1-.2-.5.8.8 0 0 1 0-.3 1.4 1.4 0 0 1 .3-.3 2.2 2.2 0 0 1 .2-.3 2.1 2.1 0 0 1 .3-.2 2.5 2.5 0 0 1-1.2-.8 2 2 0 0 1-.5-1.2 1.8 1.8 0 0 1 .7-1.6 3.6 3.6 0 0 1 2.3-.6Zm-1.9 8a.9.9 0 0 0-.3-.8 2.5 2.5 0 0 0-.8-.4 7.1 7.1 0 0 0-1-.3 10.2 10.2 0 0 1-1-.2 1.9 1.9 0 0 0-.7.7 1.5 1.5 0 0 0-.2.7 1 1 0 0 0 .6.9 2.9 2.9 0 0 0 1.6.4 3.9 3.9 0 0 0 .9-.1 1.8 1.8 0 0 0 .5-.3.8.8 0 0 0 .3-.3 1 1 0 0 0 .1-.4m-3.7-5.7a2.4 2.4 0 0 0 0 .6 1.2 1.2 0 0 0 .3.5 1.2 1.2 0 0 0 .5.3 2.1 2.1 0 0 0 .8.1 1.5 1.5 0 0 0 1.2-.4 1.7 1.7 0 0 0 .3-1.1 4.4 4.4 0 0 0 0-.5 2.8 2.8 0 0 0 0-.3 2.1 2.1 0 0 0-.1-.3V28a2.4 2.4 0 0 0-.7-.2 5.3 5.3 0 0 0-.7 0 1.7 1.7 0 0 0-1.3.3 1.6 1.6 0 0 0-.3 1.2" data-name="Path 5659"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M79 33.1a2.3 2.3 0 0 1-1 .8 3.5 3.5 0 0 1-1.5.3 4.3 4.3 0 0 1-1.5-.3 3 3 0 0 1-1.8-1.8 4.5 4.5 0 0 1-.3-1.5 3.7 3.7 0 0 1 1-2.7 3.3 3.3 0 0 1 2.4-.9 4.1 4.1 0 0 1 1 .1 2.5 2.5 0 0 1 1 .5 2.2 2.2 0 0 1 .6.8 2.8 2.8 0 0 1 .2 1.2 4.4 4.4 0 0 1 0 .5v.5h-4.7a3.5 3.5 0 0 0 .1 1 2.2 2.2 0 0 0 .5.9 2.1 2.1 0 0 0 .8.5 2.9 2.9 0 0 0 1 .2 2.7 2.7 0 0 0 1-.2 2.5 2.5 0 0 0 .8-.4Zm-2.8-5.5a2 2 0 0 0-.7.1 1.3 1.3 0 0 0-.5.4 2 2 0 0 0-.4.8 5.2 5.2 0 0 0-.2 1h3.2a4.6 4.6 0 0 0 0-.4 2.4 2.4 0 0 0-.3-1.4 1.2 1.2 0 0 0-1-.5" data-name="Path 5660"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M88.1 34H85v-.6h.8v-3.2a9.6 9.6 0 0 0 0-1 2.2 2.2 0 0 0-.2-.7 1 1 0 0 0-.4-.5 1.4 1.4 0 0 0-.7-.1 1.5 1.5 0 0 0-.6 0 1.6 1.6 0 0 0-.4.4 2 2 0 0 0-.4.5 2.6 2.6 0 0 0-.2.5v4h.8v.7h-3.2v-.6h1v-5.6h-1v-.7h2.4v1.4a2.3 2.3 0 0 1 .8-1A2.2 2.2 0 0 1 85 27a3.5 3.5 0 0 1 .6 0 1.6 1.6 0 0 1 1.1.8 2.2 2.2 0 0 1 .3.9 3 3 0 0 1 .4-.7 2.6 2.6 0 0 1 .5-.5 2.5 2.5 0 0 1 .6-.4 2.3 2.3 0 0 1 .8 0 3 3 0 0 1 1 0 1.4 1.4 0 0 1 .6.5 2.1 2.1 0 0 1 .4.9 6.4 6.4 0 0 1 .2 1.4v3.5h1v.6h-3.3v-.6h.9v-3.5a6.5 6.5 0 0 0 0-.8 1.8 1.8 0 0 0-.3-.7 1 1 0 0 0-.4-.4 1.5 1.5 0 0 0-.7-.1 1.4 1.4 0 0 0-1 .4 2.5 2.5 0 0 0-.6 1.1v4h1Z" data-name="Path 5661"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M99.6 33.1a2.3 2.3 0 0 1-1 .8 3.5 3.5 0 0 1-1.5.3 4.3 4.3 0 0 1-1.5-.3 3 3 0 0 1-1.8-1.8 4.5 4.5 0 0 1-.2-1.5 3.7 3.7 0 0 1 .9-2.7 3.3 3.3 0 0 1 2.4-.9 4.1 4.1 0 0 1 1 .1 2.5 2.5 0 0 1 1 .5 2.2 2.2 0 0 1 .6.8 2.8 2.8 0 0 1 .3 1.2 4.4 4.4 0 0 1 0 .5l-.1.5H95a3.5 3.5 0 0 0 .2 1 2.2 2.2 0 0 0 .5.9 2.1 2.1 0 0 0 .7.5 2.9 2.9 0 0 0 1.1.2 2.7 2.7 0 0 0 1-.2 2.5 2.5 0 0 0 .7-.4Zm-2.7-5.5a2 2 0 0 0-.8.1 1.3 1.3 0 0 0-.5.4 2 2 0 0 0-.3.8 5.2 5.2 0 0 0-.2 1h3.2a4.6 4.6 0 0 0 0-.4 2.4 2.4 0 0 0-.4-1.4 1.2 1.2 0 0 0-1-.5" data-name="Path 5662"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M107.3 33.1a2.3 2.3 0 0 1-1 .8 3.5 3.5 0 0 1-1.4.3 4.3 4.3 0 0 1-1.5-.3 3 3 0 0 1-1.8-1.8 4.5 4.5 0 0 1-.3-1.5 3.7 3.7 0 0 1 1-2.7 3.3 3.3 0 0 1 2.4-.9 4.1 4.1 0 0 1 1 .1 2.5 2.5 0 0 1 1 .5 2.2 2.2 0 0 1 .6.8 2.8 2.8 0 0 1 .2 1.2 4.4 4.4 0 0 1 0 .5v.5h-4.7a3.5 3.5 0 0 0 .2 1 2.2 2.2 0 0 0 .4.9 2.1 2.1 0 0 0 .8.5 2.9 2.9 0 0 0 1.1.2 2.7 2.7 0 0 0 1-.2 2.5 2.5 0 0 0 .7-.4Zm-2.7-5.5a2 2 0 0 0-.7.1 1.3 1.3 0 0 0-.5.4 2 2 0 0 0-.4.8 5.2 5.2 0 0 0-.1 1h3.1a4.6 4.6 0 0 0 0-.4 2.4 2.4 0 0 0-.3-1.4 1.2 1.2 0 0 0-1-.5" data-name="Path 5663"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M117 34h-3.2v-.6h.9V30a3.4 3.4 0 0 0-.4-1.6 1.2 1.2 0 0 0-1.1-.6 1.9 1.9 0 0 0-.7.1 2 2 0 0 0-.5.3 2.1 2.1 0 0 0-.5.5 2.2 2.2 0 0 0-.2.5v4h.8v.7H109v-.6h1v-5.6h-1v-.7h2.4v1.4a2.8 2.8 0 0 1 .9-1 2.3 2.3 0 0 1 1.4-.5 4 4 0 0 1 1 .1 1.6 1.6 0 0 1 .8.5 2.2 2.2 0 0 1 .5.9 5 5 0 0 1 .1 1.4v3.5h1Z" data-name="Path 5664"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M117.6 27.1h1.1v-1l1.4-.6v1.6h2.2v.9h-2.2v3.8a2.4 2.4 0 0 0 .2 1.2.7.7 0 0 0 .7.3 1.6 1.6 0 0 0 .7-.1 4.4 4.4 0 0 0 .6-.3l.3.5a2.2 2.2 0 0 1-.3.2 3 3 0 0 1-.5.3 3.4 3.4 0 0 1-.6.2 2.8 2.8 0 0 1-.6 0 1.9 1.9 0 0 1-1.4-.4 2 2 0 0 1-.5-1.5V28h-1.1Z" data-name="Path 5665"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M129.6 33.1a2.3 2.3 0 0 1-1 .8 3.5 3.5 0 0 1-1.5.3 4.3 4.3 0 0 1-1.5-.3 3 3 0 0 1-1.8-1.8 4.5 4.5 0 0 1-.2-1.5 3.7 3.7 0 0 1 .9-2.7 3.3 3.3 0 0 1 2.4-.9 4.1 4.1 0 0 1 1 .1 2.5 2.5 0 0 1 1 .5 2.2 2.2 0 0 1 .6.8 2.8 2.8 0 0 1 .3 1.2 4.4 4.4 0 0 1 0 .5l-.1.5H125a3.5 3.5 0 0 0 .2 1 2.2 2.2 0 0 0 .5.9 2.1 2.1 0 0 0 .7.5 2.9 2.9 0 0 0 1.1.2 2.7 2.7 0 0 0 1-.2 2.5 2.5 0 0 0 .7-.4Zm-2.7-5.5a2 2 0 0 0-.7.1 1.3 1.3 0 0 0-.6.4 2 2 0 0 0-.3.8 5.2 5.2 0 0 0-.2 1h3.2a4.6 4.6 0 0 0 0-.4 2.4 2.4 0 0 0-.3-1.4 1.2 1.2 0 0 0-1.1-.5" data-name="Path 5666"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M89.9 43.4A5.3 5.3 0 0 0 88 42a6.8 6.8 0 0 0-4.9 0 5.3 5.3 0 0 0-1.8 1.3 5.4 5.4 0 0 0-1.1 1.9 7.8 7.8 0 0 0 0 4.9 5.4 5.4 0 0 0 1 1.9 5.3 5.3 0 0 0 2 1.2 6.8 6.8 0 0 0 4.8 0 5.3 5.3 0 0 0 1.9-1.2 5.4 5.4 0 0 0 1.1-2 7.8 7.8 0 0 0 0-4.8 5.4 5.4 0 0 0-1.1-2m-3 8a3 3 0 0 1-2.7 0 3 3 0 0 1-1-.9 4 4 0 0 1-.6-1.3 5.7 5.7 0 0 1 0-2.8 3.8 3.8 0 0 1 .6-1.3 3 3 0 0 1 1-.9 3 3 0 0 1 2.8 0 3 3 0 0 1 1 1 3.8 3.8 0 0 1 .5 1.2 5.7 5.7 0 0 1 0 2.8 4 4 0 0 1-.5 1.3 3 3 0 0 1-1 .9" data-name="Path 5667"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M102.7 43.4A5.3 5.3 0 0 0 101 42a6.8 6.8 0 0 0-4.9 0 5.3 5.3 0 0 0-1.8 1.3 5.4 5.4 0 0 0-1.2 1.9 7.8 7.8 0 0 0 0 4.9 5.4 5.4 0 0 0 1.2 1.9 5.3 5.3 0 0 0 1.8 1.2 6.8 6.8 0 0 0 5 0 5.3 5.3 0 0 0 1.7-1.2 5.4 5.4 0 0 0 1.2-2 7.8 7.8 0 0 0 0-4.8 5.4 5.4 0 0 0-1.2-2m-2.8 8a3 3 0 0 1-2.9 0 3 3 0 0 1-1-.9 4 4 0 0 1-.5-1.3 5.7 5.7 0 0 1 0-2.8 3.8 3.8 0 0 1 .6-1.3 3 3 0 0 1 1-.9 3 3 0 0 1 2.8 0 3 3 0 0 1 1 1 3.8 3.8 0 0 1 .5 1.2 5.7 5.7 0 0 1 0 2.8 4 4 0 0 1-.6 1.3 3 3 0 0 1-1 .9" data-name="Path 5668"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M112.5 41.7a5.4 5.4 0 0 0-.6 0 3.1 3.1 0 0 0-1.2.2 4 4 0 0 0-1 .6 4.3 4.3 0 0 0-.8.8 2.8 2.8 0 0 0-.3.5V42H106v11.5h2.6V48a5.2 5.2 0 0 1 .3-1.6 3.6 3.6 0 0 1 .6-1.2 2.7 2.7 0 0 1 1-.8 3.1 3.1 0 0 1 1.7-.2l.5.1v-2.6h-.3" data-name="Path 5669"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M122.1 43.3a3.2 3.2 0 0 0-.6-.6 4.3 4.3 0 0 0-1-.6 4.8 4.8 0 0 0-1-.3 5.4 5.4 0 0 0-3 .2 4.4 4.4 0 0 0-1.6 1 5.4 5.4 0 0 0-1.1 2 7.7 7.7 0 0 0-.4 2.6 8.5 8.5 0 0 0 .3 2.4 5.6 5.6 0 0 0 1 2 4.8 4.8 0 0 0 1.7 1.3 5.5 5.5 0 0 0 2.4.5 5.1 5.1 0 0 0 2-.5 3 3 0 0 0 1.4-1.2v1.4h2.6V38.3H122Zm-3 8.3a2.8 2.8 0 0 1-1.4-.3 2.8 2.8 0 0 1-1-.8 3.8 3.8 0 0 1-.5-1.3 5.4 5.4 0 0 1-.2-1.4 6.8 6.8 0 0 1 .2-1.4 3.9 3.9 0 0 1 .5-1.3 3 3 0 0 1 1-1 2.8 2.8 0 0 1 1.4-.3 2.7 2.7 0 0 1 2.3 1 4.5 4.5 0 0 1 .8 3 5.7 5.7 0 0 1-.2 1.4 4.1 4.1 0 0 1-.6 1.2 2.9 2.9 0 0 1-1 .9 2.7 2.7 0 0 1-1.3.3" data-name="Path 5670"%3E%3C/path%3E%3Cpath fill="%23111A64" d="m137.8 50.3-2-8.3h-2.6l-2.1 8.3-2.2-8.3h-2.8l3.5 11.4h2.8l2-8.2 2 8.2H139.3l3.6-11.4h-2.7Z" data-name="Path 5671"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M144 38.3h2.8v2.5H144z" data-name="Rectangle 17828"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M144 42h2.8v11.5H144z" data-name="Rectangle 17829"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M149.2 54.2a3.6 3.6 0 0 1-.2 1.3c0 .2-.3.3-.8.3a4.5 4.5 0 0 1-.8 0v2l.5.2h.6a3.1 3.1 0 0 0 2.6-1 4.2 4.2 0 0 0 .7-2.6V42h-2.6Z" data-name="Path 5672"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M149.2 38.3h2.7v2.5h-2.7z" data-name="Rectangle 17830"%3E%3C/path%3E%3Cpath fill="%23111A64" d="m160.2 46.2 4.4-4.2h-3.3l-4.4 4.4v-8h-2.7v15h2.7v-4l1.4-1.4 3.4 5.4h3.3Z" data-name="Path 5673"%3E%3C/path%3E%3Cpath fill="%23111A64" d="M75.2 40v9l-6.7-9h-4.3v1.7l1.4.3v11.5h2.8v-9l6.6 9h3V40Z" data-name="Path 5674"%3E%3C/path%3E%3Cpath fill="%232C2276" d="m50.7 0-9.2 19.6 10 13.3V16.7h9.2L64.8 0Z" data-name="Path 5675"%3E%3C/path%3E%3Cpath fill="%232C2276" d="M39.2 36.9v16.7H25.5l-5.3 11.2a16.6 16.6 0 0 0 3.2 1.6l1.4.4 22 5.9 4-16 .8-3.3Z" data-name="Path 5676"%3E%3C/path%3E%3Cpath fill="%23007C4C" d="m39.6 17 1.3 1.9L50 0h-1.6Z" data-name="Path 5677"%3E%3C/path%3E%3Cpath fill="%23007C4C" d="M24.6 52.7v-6.5l-8 15.6a16.7 16.7 0 0 0 2.6 2.3Z" data-name="Path 5678"%3E%3C/path%3E%3Cpath fill="%23FFD66F" d="M38.3 16.7h-2.4L45.2 0h2Z" data-name="Path 5679"%3E%3C/path%3E%3Cpath fill="%23FFD66F" d="m24.6 36.9-11 20a16.5 16.5 0 0 0 1.6 3.1l9.4-17.7Z" data-name="Path 5680"%3E%3C/path%3E%3Cpath fill="%236096C7" d="M24.6 24.7 19 23.2v-6.5h14.7L43.4 0H5.6v6.5l6.8 1.8V51a16.9 16.9 0 0 0 .1 1.8L24.6 32Z" data-name="Path 5681"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-hover-box-shadow: inset 0 -4px {noordwijk.color.light-blue.58}; */ + --nldesign-conduction-primary-top-nav-hover-box-shadow: inset 0 -4px {noordwijk.color.light-blue.58}; --nldesign-conduction-primary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {noordwijk.color.light-blue.58}; */ - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {noordwijk.color.light-blue.58}; */ + --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {noordwijk.color.light-blue.58}; + --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {noordwijk.color.light-blue.58}; --nldesign-conduction-primary-top-nav-dropdown-hover-box-shadow: none; --nldesign-conduction-primary-top-nav-item-padding: 18px; --nldesign-conduction-primary-top-nav-padding-inline-end: 16px; @@ -115,7 +112,7 @@ --nldesign-conduction-secondary-top-nav-background-color: transparent; --nldesign-conduction-secondary-top-nav-hover-background-color: transparent; --nldesign-conduction-secondary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {noordwijk.color.primary}; */ + --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {noordwijk.color.primary}; --nldesign-conduction-secondary-top-nav-font-weight: 400; --nldesign-conduction-secondary-top-nav-item-padding: 18px; --nldesign-conduction-secondary-top-nav-padding-inline-end: 16px; @@ -156,9 +153,9 @@ --nldesign-conduction-tooltip-border-radius: 0px; --nldesign-conduction-tooltip-z-index: 9999; --nldesign-component-badge-counter-border-radius: 50%; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-background-color: {noordwijk.color.black.0}; */ + --nldesign-component-badge-background-color: {noordwijk.color.black.0} ; --nldesign-component-badge-border-radius: 0; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-color: {noordwijk.color.white.100}; */ + --nldesign-component-badge-color: {noordwijk.color.white.100} ; --nldesign-component-button-border-radius: 5px; --nldesign-component-button-font-size: inherit; --nldesign-component-button-font-weight: 500; @@ -181,7 +178,7 @@ --nldesign-component-radio-button-min-inline-size: 16px; --nldesign-component-table-border-collapse: collapse; --nldesign-component-form-input-font-size: 15px; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-heading-1-color: {noordwijk.color.primary} !important; */ + --nldesign-component-heading-1-color: {noordwijk.color.primary} !important; --nldesign-component-heading-1-font-size: 36px; --nldesign-component-heading-2-font-size: 26px; --nldesign-component-heading-3-font-size: 21px; diff --git a/css/tokens/provincie-zuid-holland.css b/css/tokens/provincie-zuid-holland.css index 6f6950b76..01acf6db2 100644 --- a/css/tokens/provincie-zuid-holland.css +++ b/css/tokens/provincie-zuid-holland.css @@ -8,9 +8,6 @@ */ :root { - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/provincie-zuid-holland.svg'); - /* NL Design tokens */ --nldesign-color-wit: #FFFFFF; --nldesign-color-rood-35: hsl(350deg 75% 34%); diff --git a/css/tokens/tilburg.css b/css/tokens/tilburg.css index 43aba8cf1..aa4f676a7 100644 --- a/css/tokens/tilburg.css +++ b/css/tokens/tilburg.css @@ -8,9 +8,6 @@ */ :root { - /* Logo image */ - --nldesign-logo-url: url('../../img/logos/tilburg.svg'); - /* NL Design tokens */ --nldesign-color-blue-20: hsl(207 100% 20%); --nldesign-color-blue-30: hsl(203 99% 32%); diff --git a/css/tokens/tubbergen.css b/css/tokens/tubbergen.css index dd7582a6f..800b0c0a7 100644 --- a/css/tokens/tubbergen.css +++ b/css/tokens/tubbergen.css @@ -97,13 +97,13 @@ --nldesign-conduction-download-card-border-radius: 0px; --nldesign-conduction-logo-header-inline-size: 150px; --nldesign-conduction-logo-header-block-size: 36px; - --nldesign-conduction-logo-header-background-image: url('../../../img/logos/tubbergen.svg'); + --nldesign-conduction-logo-header-background-image: url('https://www.tubbergen.nl/sites/all/themes/tubbergen/logo.svg'); --nldesign-conduction-logo-navbar-inline-size: 150px; --nldesign-conduction-logo-navbar-block-size: 50px; - --nldesign-conduction-logo-navbar-background-image: url('../../../img/logos/tubbergen.svg'); + --nldesign-conduction-logo-navbar-background-image: url('https://www.tubbergen.nl/sites/all/themes/tubbergen/logo.svg'); --nldesign-conduction-primary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {tubbergen.color.primary}; */ - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {tubbergen.color.primary}; */ + --nldesign-conduction-primary-top-nav-current-box-shadow: inset 0 -4px {tubbergen.color.primary}; + --nldesign-conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 {tubbergen.color.primary}; --nldesign-conduction-primary-top-nav-item-padding: 18px; --nldesign-conduction-primary-top-nav-padding-inline-end: 16px; --nldesign-conduction-primary-top-nav-padding-inline-start: 16px; @@ -111,7 +111,7 @@ --nldesign-conduction-primary-top-nav-padding-block-start: 16px; --nldesign-conduction-secondary-top-nav-background-color: transparent; --nldesign-conduction-secondary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {tubbergen.color.primary}; */ + --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {tubbergen.color.primary}; --nldesign-conduction-secondary-top-nav-font-weight: 400; --nldesign-conduction-secondary-top-nav-item-padding: 18px; --nldesign-conduction-secondary-top-nav-padding-inline-end: 16px; @@ -146,7 +146,7 @@ --nldesign-conduction-tabs-tab-min-width: 160px; --nldesign-conduction-tabs-tab-min-height: 61px; --nldesign-conduction-tabs-tab-selected-background-color: transparent; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 0px {tubbergen.color.white.100}; */ + --nldesign-conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 0px {tubbergen.color.white.100}; --nldesign-conduction-tabs-tab-selected-border-style: solid; --nldesign-conduction-tabs-tab-selected-border-bottom: 0; --nldesign-conduction-tabs-tab-selected-border-bottom-width: 0px; @@ -167,9 +167,9 @@ --nldesign-conduction-tooltip-border-radius: 0px; --nldesign-conduction-tooltip-z-index: 9999; --nldesign-component-badge-counter-border-radius: 50%; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-background-color: {tubbergen.color.black.0}; */ + --nldesign-component-badge-background-color: {tubbergen.color.black.0} ; --nldesign-component-badge-border-radius: 0; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-color: {tubbergen.color.white.100}; */ + --nldesign-component-badge-color: {tubbergen.color.white.100} ; --nldesign-component-button-font-size: inherit; --nldesign-component-button-font-weight: inherit; --nldesign-component-button-primary-action-font-weight: inherit; @@ -200,7 +200,7 @@ --nldesign-component-unordered-list-padding-inline-start: 2ch; --nldesign-component-unordered-list-item-padding-inline-start: 1ch; --nldesign-component-page-footer-background-color: unset; - --nldesign-component-page-footer-background-image: unset; /* External footer-bg.svg removed (privacy/availability). Replace with a locally-bundled asset under img/themes/tubbergen/ if needed. */ + --nldesign-component-page-footer-background-image: url(https://www.tubbergen.nl/sites/all/themes/tubbergen/dist/assets/img/footer-bg.svg); --nldesign-component-page-max-inline-size: 1140px; --nldesign-component-paragraph-line-height: 1.5em; --nldesign-component-radio-button-icon-size: 5px; diff --git a/css/tokens/xxllnc.css b/css/tokens/xxllnc.css index f19d8fe35..7581fbce4 100644 --- a/css/tokens/xxllnc.css +++ b/css/tokens/xxllnc.css @@ -9,22 +9,17 @@ :root { /* NL Design tokens */ - /* NOTE: upstream xxllnc source used translucent #000000ad/#00000080; replaced with - * solid equivalents to comply with Conduction brand rules (solid colours only) and - * ensure WCAG AA contrast on any background. File upstream bug with xxllnc token - * maintainers requesting solid-colour values. */ - --nldesign-color-primary: #000000; - --nldesign-color-primary-hover: #333333; - --nldesign-logo-url: url('../../img/logos/xxllnc.svg'); + --nldesign-color-primary: #000000ad; + --nldesign-color-primary-hover: #00000080; --nldesign-color-error: #dc3545; --nldesign-color-alert-error: #721c24; --nldesign-color-alert-error-background: #f8d7da; --nldesign-color-warning: #ffc107; --nldesign-color-alert-warning: #856404; --nldesign-color-alert-warning-background: #fff3cd; - --nldesign-color-success: #28a745; - --nldesign-color-alert-success: #155724; - --nldesign-color-alert-success-background: #d4edda; + --nldesign-color-succes: #28a745; + --nldesign-color-alert-succes: #155724; + --nldesign-color-alert-succes-background: #d4edda; --nldesign-color-white-95: #f1f1f1; --nldesign-color-white-100: #ffffff; --nldesign-color-white-100-0t: #ffffff; @@ -118,7 +113,7 @@ --nldesign-conduction-primary-top-nav-padding-block-start: 16px; --nldesign-conduction-secondary-top-nav-background-color: transparent; --nldesign-conduction-secondary-top-nav-current-background-color: unset; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {xxllnc.color.primary}; */ + --nldesign-conduction-secondary-top-nav-current-box-shadow: inset 0 -4px {xxllnc.color.primary}; --nldesign-conduction-secondary-top-nav-font-weight: 400; --nldesign-conduction-secondary-top-nav-item-padding: 18px; --nldesign-conduction-secondary-top-nav-padding-inline-end: 16px; @@ -141,7 +136,7 @@ --nldesign-conduction-pagination-current-page-text-decoration: unset; --nldesign-conduction-pagination-page-hover-text-decoration: unset; --nldesign-conduction-pagination-page-hover-text-decoration-thickness: 0px; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-conduction-input-select-border: 1px solid {xxllnc.color.grey.92}; */ + --nldesign-conduction-input-select-border: 1px solid {xxllnc.color.grey.92}; --nldesign-conduction-input-select-border-focus: unset; --nldesign-conduction-table-wrapper-scroll-button-border-style: solid; --nldesign-conduction-tabs-tab-background-color: transparent; @@ -160,9 +155,9 @@ --nldesign-conduction-tooltip-border-radius: 0px; --nldesign-conduction-tooltip-z-index: 9999; --nldesign-component-badge-counter-border-radius: 50%; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-background-color: {xxllnc.color.black.16}; */ + --nldesign-component-badge-background-color: {xxllnc.color.black.16} ; --nldesign-component-badge-border-radius: 10000px; - /* TODO: unresolved Style-Dictionary ref — needs upstream sync: --nldesign-component-badge-color: {xxllnc.color.white.95}; */ + --nldesign-component-badge-color: {xxllnc.color.white.95} ; --nldesign-component-button-border-radius: 16px; --nldesign-component-button-font-size: inherit; --nldesign-component-button-font-weight: inherit; @@ -202,18 +197,17 @@ --nldesign-component-textbox-font-size: 15px; /* xxllnc palette */ - /* NOTE: upstream used translucent values; replaced with solid equivalents (brand rules). */ - --xxllnc-color-primary: #000000; - --xxllnc-color-primary-hover: #333333; + --xxllnc-color-primary: #000000ad; + --xxllnc-color-primary-hover: #00000080; --xxllnc-color-error: #dc3545; --xxllnc-color-alert-error: #721c24; --xxllnc-color-alert-error-background: #f8d7da; --xxllnc-color-warning: #ffc107; --xxllnc-color-alert-warning: #856404; --xxllnc-color-alert-warning-background: #fff3cd; - --xxllnc-color-success: #28a745; - --xxllnc-color-alert-success: #155724; - --xxllnc-color-alert-success-background: #d4edda; + --xxllnc-color-succes: #28a745; + --xxllnc-color-alert-succes: #155724; + --xxllnc-color-alert-succes-background: #d4edda; --xxllnc-color-white-95: #f1f1f1; --xxllnc-color-white-100: #ffffff; --xxllnc-color-white-100-0t: #ffffff; diff --git a/css/tokens/zwolle.css b/css/tokens/zwolle.css index d10fae054..a3ff1d315 100644 --- a/css/tokens/zwolle.css +++ b/css/tokens/zwolle.css @@ -1,121 +1,144 @@ /** - * Gemeente Zwolle — Token Set + * Gemeente Zwolle Design Tokens * - * Standard Layer-3 `--nldesign-*` semantic layer for the `zwolle` token set, - * hand-authored the way css/tokens/cunningham.css is: one flat :root that pins - * the values Nextcloud's chrome reads and lets everything else fall through to - * css/systems/nldesign/defaults.css. + * Auto-generated from nl-design-system/themes repository. + * Do not edit manually — changes will be overwritten by the sync workflow. * - * Source: @nl-design-system-unstable/zwolle-design-tokens 1.0.0 — - * dist/design-tokens.css (base block `.zwolle-theme`). The previous file was - * the nightly importer's raw dump (palette steps, spacing and heading sizes - * under the --nldesign-* prefix, no semantic roles), which rendered as - * Rijkshuisstijl; this file resolves the theme's aliases by hand, which is - * what `TokenSetConverterService` will do mechanically. When that - * lands, this file is regenerated, not edited — and the nightly sync - * (scripts/generate-tokens.mjs) must go through the converter too, or it - * overwrites this file with the raw dump again. - * - * --utrecht-button-background-color → --zwolle-color-blue-50 - * → hsl(220 44% 50%) → #476db8 - * The theme's only button colour (no primary-action token), so it is the - * primary by plan Rule P step 2. The palette also names blue-45 - * "Primary-Darkblue" (#347ab7) — kept as the hover/dark step. - * --utrecht-document-color → --zwolle-color-black → #000000 - * --utrecht-document-font-family → DIN, Arial, Helvetica, sans-serif - * (DIN is not bundled; Arial renders) - * --utrecht-textbox-border-color → --utrecht-form-input-border-color - * → --zwolle-color-black - * --utrecht-textbox-border-radius → 2px · --utrecht-button-border-radius → 0 - * --zwolle-color-grey → hsl(0 0% 92%) → #ebebeb - * --zwolle-color-pink-50 → hsl(322 100% 45%) → #e60091 (accent) - * - * No header, link or status tokens exist in the theme, so those roles are - * "the Nextcloud way" (plan Rule N): header = the primary with its contrast - * text, links follow the primary, status colours are the nldesign defaults. - * - * ONE FLAT :root BLOCK, deliberately (see cunningham.css). + * Source: https://github.com/nl-design-system/themes */ :root { - /* Brand palette — --zwolle-*, literal values (hsl resolved to hex) */ - --zwolle-color-blue-40: #395793; - --zwolle-color-blue-45: #347ab7; - --zwolle-color-blue-50: #476db8; - --zwolle-color-grey: #ebebeb; - --zwolle-color-white: #ffffff; - --zwolle-color-black: #000000; - --zwolle-color-pink-50: #e60091; - - /* Primary — the theme's button colour, blue-50 (Rule P, step 2) */ - --nldesign-color-primary: #476db8; - --nldesign-color-primary-text: #ffffff; - --nldesign-color-primary-hover: #395793; - --nldesign-color-primary-light: #e3e9f5; - --nldesign-color-primary-light-hover: #c7d3eb; - - /* Header — no header token in the theme: the primary, the Nextcloud way */ - --nldesign-color-header-background: #476db8; - --nldesign-color-header-text: #ffffff; - /* Dark header: keep Nextcloud's white app-menu icons white */ - --nldesign-header-icon-filter: none; - --nldesign-color-nav-background: #ffffff; - - /* Text — document colour black; muted is Nextcloud's own step */ - --nldesign-color-text: #000000; - --nldesign-color-text-muted: #6b6b6b; - --nldesign-color-text-light: #ffffff; - - /* Border — the theme's grey; the dark step is Nextcloud's own */ - --nldesign-color-border: #ebebeb; - --nldesign-color-border-dark: #767676; - - /* Focus — the theme's button focus border colour, black */ - --nldesign-color-focus: rgba(0, 0, 0, 0.5); - --nldesign-color-focus-rgb: 0, 0, 0; - - /* Links — no link token: follow the primary */ - --nldesign-color-link: #476db8; - --nldesign-color-link-hover: #395793; - --nldesign-color-link-visited: #347ab7; - - /* Status — no tokens in the theme: the nldesign defaults */ - --nldesign-color-error: #d52b1e; - --nldesign-color-error-rgb: 213, 43, 30; - --nldesign-color-error-hover: #8b1a15; - --nldesign-color-warning: #e17000; - --nldesign-color-warning-rgb: 225, 112, 0; - --nldesign-color-success: #39870c; - --nldesign-color-success-rgb: 57, 135, 12; - --nldesign-color-info: #347ab7; - --nldesign-color-info-rgb: 52, 122, 183; - - /* Background tones — from the theme's grey */ - --nldesign-color-background-hover: #f5f5f5; - --nldesign-color-background-dark: #ebebeb; - --nldesign-color-background-darker: #d6d6d6; - - /* Buttons — the same blue (one colour) */ - --nldesign-color-button-primary-background: #476db8; - --nldesign-color-button-primary-text: #ffffff; - --nldesign-color-button-primary-border: #476db8; - --nldesign-color-button-primary-hover: #395793; - - /* Typography — DIN is not bundled, so Arial renders */ - --nldesign-font-family: DIN, Arial, Helvetica, sans-serif; - - /* Border radius — 2px inputs, square buttons; large/rounded/pill are - * Nextcloud's */ - --nldesign-border-radius: 2px; - --nldesign-border-radius-small: 0; - --nldesign-border-radius-large: 10px; - --nldesign-border-radius-rounded: 28px; - --nldesign-border-radius-pill: 100px; + /* NL Design tokens */ + --nldesign-color-blue-40: hsl(220 44% 40%); + --nldesign-color-blue-45: hsl(208 56% 46%); + --nldesign-color-blue-50: hsl(220 44% 50%); + --nldesign-color-grey: hsl(0 0% 92%); + --nldesign-color-white: hsl(0 0% 100%); + --nldesign-color-black: hsl(0 0% 0%); + --nldesign-color-pink-50: hsl(322 100% 45%); + --nldesign-typography-sans-serif-font-family: DIN, Arial, Helvetica, sans-serif; + --nldesign-typography-scale-md-font-size: 16px; + --nldesign-typography-scale-md-line-height: 22px; + --nldesign-typography-scale-sm-font-size: 14px; + --nldesign-typography-scale-sm-line-height: 18px; + --nldesign-typography-weight-scale-bold-font-weight: 700; + --nldesign-typography-weight-scale-semi-bold-font-weight: 500; + --nldesign-typography-weight-scale-normal-font-weight: 400; + --nldesign-space-block-3xs: 0; + --nldesign-space-block-2xs: 4px; + --nldesign-space-block-xs: 8px; + --nldesign-space-block-sm: 12px; + --nldesign-space-block-md: 16px; + --nldesign-space-block-lg: 20px; + --nldesign-space-block-xl: 24px; + --nldesign-space-block-2xl: 28px; + --nldesign-space-block-3xl: 32px; + --nldesign-space-block-4xl: 36px; + --nldesign-space-block-5xl: 40px; + --nldesign-space-inline-3xs: 0.125ch; + --nldesign-space-inline-2xs: 0.25ch; + --nldesign-space-inline-xs: 0.5ch; + --nldesign-space-inline-sm: 0.75ch; + --nldesign-space-inline-md: 1ch; + --nldesign-space-inline-lg: 1.5ch; + --nldesign-space-inline-xl: 1.75ch; + --nldesign-space-inline-2xl: 2ch; + --nldesign-space-inline-3xl: 3ch; + --nldesign-space-row-3xs: 0; + --nldesign-space-row-2xs: 4px; + --nldesign-space-row-xs: 8px; + --nldesign-space-row-sm: 12px; + --nldesign-space-row-md: 16px; + --nldesign-space-row-lg: 20px; + --nldesign-space-row-xl: 24px; + --nldesign-space-row-2xl: 28px; + --nldesign-space-row-3xl: 32px; + --nldesign-space-row-4xl: 36px; + --nldesign-space-row-5xl: 40px; + --nldesign-space-column-3xs: 0; + --nldesign-space-column-2xs: 4px; + --nldesign-space-column-xs: 8px; + --nldesign-space-column-sm: 12px; + --nldesign-space-column-md: 16px; + --nldesign-space-column-lg: 20px; + --nldesign-space-column-xl: 24px; + --nldesign-space-column-2xl: 28px; + --nldesign-space-column-3xl: 32px; + --nldesign-space-column-4xl: 36px; + --nldesign-space-column-5xl: 40px; + --nldesign-component-badge-counter-border-radius: 3ex; + --nldesign-component-badge-counter-padding-block: 1ex; + --nldesign-component-badge-counter-padding-inline: 1ex; + --nldesign-component-badge-border-radius: 0; + --nldesign-component-badge-font-weight: 700; + --nldesign-component-badge-padding-block: 6px; + --nldesign-component-button-border-radius: 0; + --nldesign-component-button-border-width: 0; + --nldesign-component-button-margin-inline-end: 0; + --nldesign-component-button-margin-inline-start: 0; + --nldesign-component-document-font-size: 16px; + --nldesign-component-document-line-height: 22px; + --nldesign-component-form-input-block-size: 44px; + --nldesign-component-form-input-line-height: 18px; + --nldesign-component-form-select-border-width: 1px; + --nldesign-component-form-select-font-size: 1rem; + --nldesign-component-form-select-max-inline-size: 100%; + --nldesign-component-heading-1-font-size: 31px; + --nldesign-component-heading-1-line-height: 30px; + --nldesign-component-heading-1-margin-block-end: 0; + --nldesign-component-heading-1-margin-block-start: 0; + --nldesign-component-heading-2-font-size: 24px; + --nldesign-component-heading-2-line-height: 28px; + --nldesign-component-heading-2-margin-block-end: 8px; + --nldesign-component-heading-2-margin-block-start: 0; + --nldesign-component-heading-3-font-size: 20px; + --nldesign-component-heading-3-line-height: 28px; + --nldesign-component-heading-3-margin-block-end: 8px; + --nldesign-component-heading-3-margin-block-start: 0; + --nldesign-component-heading-4-font-size: 18px; + --nldesign-component-heading-4-line-height: 25px; + --nldesign-component-heading-4-margin-block-end: 8px; + --nldesign-component-heading-4-margin-block-start: 0; + --nldesign-component-heading-5-font-size: 18px; + --nldesign-component-heading-5-line-height: 25px; + --nldesign-component-heading-5-margin-block-end: 8px; + --nldesign-component-heading-5-margin-block-start: 0; + --nldesign-component-heading-6-font-size: 16px; + --nldesign-component-heading-6-letter-spacing: 0.72px; + --nldesign-component-heading-6-line-height: 20px; + --nldesign-component-heading-6-margin-block-end: 0; + --nldesign-component-heading-6-margin-block-start: 0; + --nldesign-component-paragraph-line-height: 22px; + --nldesign-component-table-header-font-weight: bold; + --nldesign-component-table-header-border-block-end-width: 0.5px; + --nldesign-component-table-cell-padding-block-end: 15px; + --nldesign-component-table-cell-padding-block-start: 15px; + --nldesign-component-table-cell-padding-inline-end: 6px; + --nldesign-component-table-cell-padding-inline-start: 6px; + --nldesign-component-table-cell-border-color: hsl(0deg 0% 71%); + --nldesign-component-table-row-alternate-odd-background-color: hsl(0deg 0% 90%); + --nldesign-component-table-row-alternate-even-background-color: hsl(0deg 0% 100%); + --nldesign-component-textarea-min-block-size: 95px; + --nldesign-component-textbox-border-bottom-width: 1px; + --nldesign-component-textbox-border-radius: 2px; + --nldesign-component-textbox-border-width: 1px; + --nldesign-component-textbox-min-inline-size: 70px; + --nldesign-component-textbox-max-inline-size: 620px; - /* Nextcloud-way defaults for roles the theme has no token for */ - --nldesign-color-placeholder-light: #ebebeb; - --nldesign-color-placeholder-dark: #d6d6d6; - --nldesign-color-favorite: #e60091; - --nldesign-animation-quick: 100ms; - --nldesign-animation-slow: 300ms; + /* Gemeente Zwolle palette */ + --zwolle-color-blue-40: hsl(220 44% 40%); + --zwolle-color-blue-45: hsl(208 56% 46%); + --zwolle-color-blue-50: hsl(220 44% 50%); + --zwolle-color-grey: hsl(0 0% 92%); + --zwolle-color-white: hsl(0 0% 100%); + --zwolle-color-black: hsl(0 0% 0%); + --zwolle-color-pink-50: hsl(322 100% 45%); + --zwolle-typography-sans-serif-font-family: DIN, Arial, Helvetica, sans-serif; + --zwolle-typography-scale-md-font-size: 16px; + --zwolle-typography-scale-md-line-height: 22px; + --zwolle-typography-scale-sm-font-size: 14px; + --zwolle-typography-scale-sm-line-height: 18px; + --zwolle-typography-weight-scale-bold-font-weight: 700; + --zwolle-typography-weight-scale-semi-bold-font-weight: 500; + --zwolle-typography-weight-scale-normal-font-weight: 400; } diff --git a/token-sets.json b/token-sets.json index 8b3f04856..4044ebb0a 100644 --- a/token-sets.json +++ b/token-sets.json @@ -1,454 +1,225 @@ [ - { - "id": "nextcloud", - "name": "Nextcloud (Base)", - "description": "Stock Nextcloud appearance — system fonts, rounded corners, Nextcloud blue (#00679e)", - "design_system": "none", - "theming": { - "primary_color": "#00679e", - "background_color": "#FFFFFF" - } - }, - { - "id": "summer-breeze", - "name": "Summer Breeze", - "description": "Soft, airy light-blue theme — Inter, rounded surfaces, soft shadows, pastel status colours and a pale-blue gradient navigation. Gentle on the eyes.", - "design_system": "summer-breeze", - "theming": { - "primary_color": "#2874D1", - "background_color": "#EAF2FB" - } - }, - { - "id": "rijkshuisstijl", - "name": "Rijkshuisstijl", - "description": "Official Dutch national government design system (Rijksoverheid)", - "theming": { - "primary_color": "#154273", - "background_color": "#F5F6F7", - "logo": "img/logos/rijkshuisstijl.svg" - } - }, - { - "id": "amsterdam", - "name": "Gemeente Amsterdam", - "description": "Design tokens for Gemeente Amsterdam", - "theming": { - "primary_color": "#004699", - "background_color": "#FFFFFF", - "logo": "img/logos/amsterdam.svg" - } - }, { "id": "bodegraven-reeuwijk", "name": "Gemeente Bodegraven-Reeuwijk", "description": "Design tokens for Gemeente Bodegraven-Reeuwijk", - "theming": { - "primary_color": "#0066CC", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "borne", "name": "Gemeente Borne", "description": "Design tokens for Gemeente Borne", - "theming": { - "primary_color": "#003352", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "buren", "name": "Gemeente Buren", "description": "Design tokens for Gemeente Buren", - "theming": { - "primary_color": "#D41422", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "demodam", "name": "Demodam", "description": "Design tokens for Demodam", - "theming": { - "primary_color": "#03A9F4", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "dinkelland", "name": "Gemeente Dinkelland", "description": "Design tokens for Gemeente Dinkelland", - "theming": { - "primary_color": "#006CB9", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "drechterland", "name": "Gemeente Drechterland", "description": "Design tokens for Gemeente Drechterland", - "theming": { - "primary_color": "#1B6E8C", - "background_color": "#FFFFFF", - "logo": "img/logos/drechterland.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "duiven", "name": "Gemeente Duiven", "description": "Design tokens for Gemeente Duiven", - "theming": { - "primary_color": "#1D5B8F", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "duo", "name": "Duo", "description": "Design tokens for Duo", - "theming": { - "primary_color": "#004FA3", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "enkhuizen", "name": "Gemeente Enkhuizen", "description": "Design tokens for Gemeente Enkhuizen", - "theming": { - "primary_color": "#0055AD", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "epe", "name": "Gemeente Epe", "description": "Design tokens for Gemeente Epe", - "theming": { - "primary_color": "#00549E", - "background_color": "#FFFFFF", - "logo": "img/logos/epe.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.3" }, { "id": "groningen", "name": "Gemeente Groningen", "description": "Design tokens for Gemeente Groningen", - "theming": { - "primary_color": "#154273", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "4.0.0" }, { "id": "haarlem", "name": "Gemeente Haarlem", "description": "Design tokens for Gemeente Haarlem", - "theming": { - "primary_color": "#1457A3", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "haarlemmermeer", "name": "Gemeente Haarlemmermeer", "description": "Design tokens for Gemeente Haarlemmermeer", - "theming": { - "primary_color": "#068E8C", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "hoorn", "name": "Gemeente Hoorn", "description": "Design tokens for Gemeente Hoorn", - "theming": { - "primary_color": "#09366C", - "background_color": "#FFFFFF", - "logo": "img/logos/hoorn.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "horstaandemaas", "name": "Gemeente Horst aan de Maas", "description": "Design tokens for Gemeente Horst aan de Maas", - "theming": { - "primary_color": "#125EA4", - "background_color": "#FFFFFF" - } - }, - { - "id": "leiden", - "name": "Gemeente Leiden", - "description": "Design tokens for Gemeente Leiden", - "theming": { - "primary_color": "#d62410", - "background_color": "#FFFFFF", - "logo": "img/logos/leiden.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "leidschendam-voorburg", "name": "Gemeente Leidschendam Voorburg", "description": "Design tokens for Gemeente Leidschendam Voorburg", - "theming": { - "primary_color": "#1E1B54", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "nijmegen", "name": "Gemeente Nijmegen", "description": "Design tokens for Gemeente Nijmegen", - "theming": { - "primary_color": "#157C68", - "background_color": "#FFFFFF", - "logo": "img/logos/nijmegen.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "noaberkracht", "name": "Noaberkracht", "description": "Design tokens for Noaberkracht", - "theming": { - "primary_color": "#4376fc", - "background_color": "#FFFFFF" - }, - "note": "primary_color #4376fc is legacy Conduction cobalt (retired 2026-05-13) — verify with municipality upstream" + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "noordoostpolder", "name": "Gemeente Noordoostpolder", "description": "Design tokens for Gemeente Noordoostpolder", - "theming": { - "primary_color": "#389003", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "noordwijk", "name": "Gemeente Noordwijk", "description": "Design tokens for Gemeente Noordwijk", - "theming": { - "primary_color": "#2C2276", - "background_color": "#FFFFFF", - "logo": "img/logos/noordwijk.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "provincie-zuid-holland", "name": "Provincie Zuid-Holland", "description": "Design tokens for Provincie Zuid-Holland", - "theming": { - "primary_color": "#C42035", - "background_color": "#FFFFFF", - "logo": "img/logos/provincie-zuid-holland.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "riddeliemers", "name": "Riddeliemers", "description": "Design tokens for Riddeliemers", - "theming": { - "primary_color": "#154273", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09" }, { "id": "ridderkerk", "name": "Ridderkerk", "description": "Design tokens for Ridderkerk", - "theming": { - "primary_color": "#008937", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "stedebroec", "name": "Gemeente Stede Broec", "description": "Design tokens for Gemeente Stede Broec", - "theming": { - "primary_color": "#035935", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "tilburg", "name": "Gemeente Tilburg", "description": "Design tokens for Gemeente Tilburg", - "theming": { - "primary_color": "#003366", - "background_color": "#FFFFFF", - "logo": "img/logos/tilburg.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "tubbergen", "name": "Gemeente Tubbergen", "description": "Design tokens for Gemeente Tubbergen", - "theming": { - "primary_color": "#067432", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "venray", "name": "Gemeente Venray", "description": "Design tokens for Gemeente Venray", - "theming": { - "primary_color": "#2A8113", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "vught", "name": "Gemeente Vught", "description": "Design tokens for Gemeente Vught", - "theming": { - "primary_color": "#0088AD", - "background_color": "#FFFFFF" - } - }, - { - "id": "vng", - "name": "VNG Vereniging Nederlandse Gemeenten", - "description": "Design tokens for VNG (Vereniging Nederlandse Gemeenten), the association of Dutch municipalities", - "theming": { - "primary_color": "#003865", - "background_color": "#0277BD", - "logo": "img/logos/vng.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "westervoort", "name": "Gemeente Westervoort", "description": "Design tokens for Gemeente Westervoort", - "theming": { - "primary_color": "#003C6B", - "background_color": "#FFFFFF" - } - }, - { - "id": "utrecht", - "name": "Gemeente Utrecht", - "description": "Design tokens for Gemeente Utrecht", - "theming": { - "primary_color": "#24578F", - "background_color": "#FFFFFF", - "logo": "img/logos/utrecht.svg" - } - }, - { - "id": "denhaag", - "name": "Gemeente Den Haag", - "description": "Design tokens for Gemeente Den Haag", - "theming": { - "primary_color": "#1a7a3e", - "background_color": "#FFFFFF", - "logo": "img/logos/denhaag.svg" - } - }, - { - "id": "rotterdam", - "name": "Gemeente Rotterdam", - "description": "Design tokens for Gemeente Rotterdam, composed from the Rotterdam Design System (RODS)", - "theming": { - "primary_color": "#00811F", - "background_color": "#FFFFFF", - "logo": "img/logos/rotterdam.svg" - }, - "upstreamPackage": "@gemeente-rotterdam/design-tokens", - "upstreamVersion": "1.1.0" - }, - { - "id": "opencatalogi", - "name": "OpenCatalogi", - "description": "Design tokens for OpenCatalogi, transcribed from the tokens opencatalogi.nl ships", - "theming": { - "primary_color": "#00811f", - "background_color": "#FFFFFF", - "logo": "img/logos/opencatalogi.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "xxllnc", "name": "xxllnc", "description": "Design tokens for xxllnc", - "theming": { - "primary_color": "#333333", - "background_color": "#FFFFFF", - "logo": "img/logos/xxllnc.svg" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "zevenaar", "name": "Gemeente Zevenaar", "description": "Design tokens for Gemeente Zevenaar", - "theming": { - "primary_color": "#596E28", - "background_color": "#FFFFFF" - } + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", + "upstreamVersion": "1.0.0" }, { "id": "zwolle", "name": "Gemeente Zwolle", "description": "Design tokens for Gemeente Zwolle, resolved from the @nl-design-system-unstable/zwolle-design-tokens package", - "theming": { - "primary_color": "#476DB8", - "background_color": "#FFFFFF" - }, - "upstreamPackage": "@nl-design-system-unstable/zwolle-design-tokens", + "upstreamRef": "9cfc4c5a292b3750e44a674e6240fb8e4924dc09", "upstreamVersion": "1.0.0" - }, - { - "id": "hoog-contrast", - "name": "Hoog contrast (WCAG AAA)", - "description": "Maximaal contrast — zwart op wit voor optimale leesbaarheid. Voldoet aan WCAG 2.2 AAA (>= 7:1) en werkt samen met OS hoog-contrast (prefers-contrast / forced-colors, EN 301 549).", - "design_system": "high-contrast", - "theming": { - "primary_color": "#000000", - "background_color": "#FFFFFF" - } - }, - { - "id": "lasuite", - "name": "La Suite numérique", - "description": "European sovereign-workplace theme (MinBZK/mijn-bureau EDIC bundle) — Cunningham design tokens (MIT), self-hosted Inter, brand blue-violet #4844AD. No La Suite/state logo bundled (trademark).", - "design_system": "lasuite", - "theming": { - "primary_color": "#4844AD", - "background_color": "#FFFFFF" - } - }, - { - "id": "frankendesk", - "name": "La Frankendesk", - "description": "Conduction's own branded riff on the lasuite bundle. EXTENDS `lasuite`: the renderer loads the parent set first and this one after, so this file is the DELTA — the logo and anything Conduction deliberately changes — instead of a copy that drifts. Same violet Cunningham design tokens (MIT), self-hosted Inter, brand blue-violet #4844AD, with the original \"La Frankendesk\" mark as logo.", - "design_system": "lasuite", - "theming": { - "primary_color": "#4844AD", - "background_color": "#FFFFFF", - "logo": "img/logos/frankendesk.svg" - }, - "extends": "lasuite" - }, - { - "id": "cunningham", - "name": "Cunningham (blue base)", - "description": "The published Cunningham design system (MIT, @openfun/cunningham-tokens) as distributed — blue base (brand-650 #1A509F, the same scale step the shared bridge/element-overrides derive --color-primary from for lasuite's violet #4844AD), self-hosted Inter. Secondary/optional sibling of lasuite: same generated token base, without the deployed violet La Suite brand override. No logo bundled.", - "design_system": "cunningham", - "theming": { - "primary_color": "#1A509F", - "background_color": "#E1E2E5" - } - }, - { - "id": "conduction-new", - "name": "Conduction 2026", - "description": "Conduction house style as published at identity.conduction.nl (theme-conduction-2026): cobalt #21468B, KNVB orange accent, Figtree. Independent of the older vendored conduction theme.", - "theming": { - "primary_color": "#21468B", - "background_color": "#FFFFFF" - } } ]