[#2473] prepare for new tokens

maykinmedia · May 23, 2024 · 41a0058 · 41a0058
1 parent b7e3f62
commit 41a0058
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 #}