From 41a0058e27c9d5bf6558780f86c3b50f03aaf692 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Thu, 23 May 2024 13:05:07 +0200
Subject: [PATCH] [#2473] prepare for new tokens

---
 .../scss/components/Button/Button.scss            | 15 ++++++++-------
 src/open_inwoner/scss/views/App.scss              | 11 +++++++++--
 .../scss/views/_nl-design-system-oip-theme.scss   |  2 +-
 src/open_inwoner/templates/master.html            |  4 ++--
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
index b25c33a162..e98cbca1e2 100644
--- a/src/open_inwoner/scss/components/Button/Button.scss
+++ b/src/open_inwoner/scss/components/Button/Button.scss
@@ -1,6 +1,7 @@
 @import '~@utrecht/components/dist/button/css/index.css';
 
-.utrecht-button {
+.utrecht-button,
+.button {
   align-items: center;
   border-radius: var(--border-radius);
   box-sizing: border-box;
@@ -84,9 +85,9 @@
   }
 
   &#{&}--primary {
-    background-color: var(--color-primary);
-    border: 1px solid var(--color-primary);
-    color: var(--color-font-primary);
+    background-color: var(--utrecht-button-primary-action-background-color);
+    border: 1px solid var(--utrecht-button-primary-action-background-color);
+    color: var(--utrecht-button-secondary-color);
 
     &:focus,
     &:hover {
@@ -95,9 +96,9 @@
   }
 
   &--secondary {
-    background-color: var(--color-secondary);
-    border: 1px solid var(--color-secondary);
-    color: var(--color-white);
+    background-color: var(--utrecht-button-secondary-action-background-color);
+    border: 1px solid var(--utrecht-button-secondary-action-background-color);
+    color: var(--utrecht-button-secondary-action-color);
 
     &:focus,
     &:hover {
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index af13818806..7d1f2168bc 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -148,6 +148,7 @@
     calc(var(--color-error-l) + 50%)
   );
 
+  // From color picker
   --color-info-h: 2010;
   --color-info-s: 64%;
   --color-info-l: 80%;
@@ -167,6 +168,12 @@
     calc(var(--color-info-l) - 40%)
   );
 
+  // From design-tokens
+  --oip-color-primary: var(--color-primary);
+  --oip-color-secondary: var(--color-secondary);
+  --oip-color-primary-darker: var(--color-primary-darker);
+  --oip-color-secondary-darker: var(--color-secondary-darker);
+
   --color-success-h: 115;
   --color-success-s: 26%;
   --color-success-l: 37%;
@@ -182,8 +189,8 @@
   );
   // color-success-l was +50% but +57% is needed for 4.5:1 contrast
 
-  --color-font-primary: var(--color-white);
-  --color-font-secondary: var(--color-white);
+  //--color-font-primary: var(--color-white);
+  //--color-font-secondary: var(--color-white);
   --color-font-accent: var(--color-gray-dark);
 
   --color-body: var(--color-gray-dark);
diff --git a/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss b/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss
index 51ded51abd..05265c132f 100644
--- a/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss
+++ b/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss
@@ -1,5 +1,5 @@
 .openinwoner-theme {
-  --oip-color-primary: var(--color-primary);
+  //--oip-color-primary: var(--color-primary);
   --oip-color-secondary: var(--color-secondary);
   --oip-color-primary-darker: var(--color-primary-darker);
   --oip-color-secondary-darker: var(--color-secondary-darker);
diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html
index 0b2bea03df..ca8b4bfef1 100644
--- a/src/open_inwoner/templates/master.html
+++ b/src/open_inwoner/templates/master.html
@@ -28,7 +28,7 @@
         <link nonce="{{ request.csp_nonce }}" href="{% static 'bundles/open_inwoner-css.css' %}" media="all" rel="stylesheet" />
 
         <style nonce="{{ request.csp_nonce }}">
-            :root {
+            .openinwoner-theme {
                 --color-primary-h: {{theming.primary.0}};
                 --color-primary-s: {{theming.primary.1}}%;
                 --color-primary-l: {{theming.primary.2}}%;
@@ -61,7 +61,7 @@
 	{% endif %}
     </head>
 
-    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="utrecht-document">
 
         {% if cookiebanner_enabled %}
         {# render cookiebanner first #}