[#2473] prepare for new tokens

maykinmedia · Jul 11, 2024 · b20e35c · b20e35c
1 parent ecca7a2
commit b20e35c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 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);