[#2450] Add OIP button tokens and modify Utrecht buttons

maykinmedia · Jun 6, 2024 · b0a0dcb · b0a0dcb
1 parent 5cf1ec6
commit b0a0dcb
Show file tree

Hide file tree

Showing 9 changed files with 363 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -105,3 +105,8 @@ dist
 
 # IDE files
 .idea/
+
+# misc
+.DS_Store
+Icon?
+Icon[\r]
diff --git a/README.md b/README.md
@@ -5,8 +5,7 @@ backend project.
 
 For any component that OIP has that corresponds with a community component, we use the community
 classes. But for any component that OIP has that does not have an NLDS equivalent, we use our own
-OIP brand tokens. We also set OIP (brand/component) tokens in case we have certain values that are
-used repeatedly, like for example `border-radius`.
+oip brand tokens.
 
 Long term goal is to make it possible for different municipalities to make their own design-tokens
 and then simply switch themes in OIP.
@@ -21,8 +20,10 @@ The draft [Design Token Format](https://design-tokens.github.io/community-group/
 
 **Using tokens**
 
-If you are only _consuming_ the design tokens, the easiest integration path is adding the
-NPM-package in your own project.
+If you are only _consuming_ the design tokens, the easiest integration path is adding this
+package in your own project.
+
+Then, import the desired build target artifact and run your usual build chain.
 
 ## Add this package to your project
 
@@ -93,9 +94,7 @@ tokens. E.g. if you have two tokens definition files like:
 {
   "oip": {
     "color": {
-      "fg": {
-        "value": "#000000"
-      }
+      "fg": {"value": "#000000"}
     }
   }
 }
@@ -106,9 +105,7 @@ tokens. E.g. if you have two tokens definition files like:
   "oip": {
     "color": {
       "fg": {
-        "muted": {
-          "value": "#000000"
-        }
+        "muted": {"value": "#000000"}
       }
     }
   }
@@ -133,9 +130,7 @@ e.g.:
 {
   "oip": {
     "color": {
-      "fg-muted": {
-        "value": "#000000"
-      }
+      "fg-muted": {"value": "#000000"}
     }
   }
 }

diff --git a/src/brand/openinwoner/color.tokens.json b/src/brand/openinwoner/color.tokens.json
@@ -8,54 +8,32 @@
       },
       "primary": {
         "value": "#0065BD",
-        "comment": "The primary color makes up a large part of the theme, it is used in buttons for example.",
-        "$extensions": {
-          "dte.metadata": {
-            "isCurated": true,
-            "category": "color"
-          }
-        }
+        "comment": "The primary color makes up a large part of the theme, it is used in buttons for example."
+      },
+      "primary-darker": {
+        "value": "#0065BD",
+        "comment": "The primary darker color is for hover states mainly."
       },
       "primary-light": {},
       "secondary": {
         "value": "#006A0F",
-        "comment": "The secondary compliments the primary color and serves as the default for text-links.",
-        "$extensions": {
-          "dte.metadata": {
-            "isCurated": true,
-            "category": "color"
-          }
-        }
+        "comment": "The secondary color compliments the primary color and serves as the default for text-links."
+      },
+      "secondary-darker": {
+        "value": "navy",
+        "comment": "The secondary darker color is for hover states mainly."
       },
       "accent": {
         "value": "#E10019",
-        "comment": "The accent color is usually the main identity color for a municipality",
-        "$extensions": {
-          "dte.metadata": {
-            "isCurated": true,
-            "category": "color"
-          }
-        }
+        "comment": "The accent color is usually the main identity color for a municipality"
       },
       "info": {
         "value": "#2566A7",
-        "comment": "The dark blue text color for informational states and/or messages.",
-        "$extensions": {
-          "dte.metadata": {
-            "isCurated": true,
-            "category": "color"
-          }
-        }
+        "comment": "The dark blue text color for informational states and/or messages."
       },
       "info-light": {
         "value": "#D5E6F6",
-        "comment": "The light blue background color for informational states and/or messages.",
-        "$extensions": {
-          "dte.metadata": {
-            "isCurated": true,
-            "category": "color"
-          }
-        }
+        "comment": "The light blue background color for informational states and/or messages."
       },
       "success": {
         "value": "#4A7746",
@@ -81,6 +59,14 @@
         "value": "#ffdbe1",
         "comment": "The light red background color for error/critical states and/or messages."
       },
+      "danger-lighter": {
+        "value": "rgb(204, 116, 0)",
+        "comment": "The lighter orange text color for warning states and/or messages."
+      },
+      "danger-lightest": {
+        "value": "rgb(255, 220, 173)",
+        "comment": "The very lightest orange background-color for warning states and/or messages."
+      },
       "bg": {
         "value": "#ffffff",
         "comment": "Background color for the (main) user interface."
@@ -91,7 +77,7 @@
       },
       "fg-muted": {
         "value": "#949494",
-        "comment": "Font/foreground color for non-actionable or less-important content."
+        "comment": "Font/foreground gray §1color for non-actionable or less-important content."
       },
       "fg-heading": {
         "value": "#000000",
@@ -101,6 +87,10 @@
         "value": "#d2d2d2",
         "comment": "Default color for borders."
       },
+      "gray": {
+        "value": "#d2d2d2",
+        "comment": "Default gray for borders."
+      },
       "focus": {
         "$extensions": {
           "dte.metadata": {

diff --git a/src/brand/openinwoner/spacing.tokens.json b/src/brand/openinwoner/spacing.tokens.json
@@ -0,0 +1,46 @@
+{
+  "oip": {
+    "row": {
+      "height": {
+        "value": "40px"
+      },
+      "height-small": {
+        "value": "24px"
+      },
+      "height-big": {
+        "value": "48px"
+      },
+      "height-giant": {
+        "value": "57px"
+      }
+    },
+    "gutter": {
+      "width": {
+        "value": "32px"
+      }
+    },
+    "spacing": {
+      "tiny": {
+        "value": "2px"
+      },
+      "small": {
+        "value": "4px"
+      },
+      "medium": {
+        "value": "8px"
+      },
+      "large": {
+        "value": "16px"
+      },
+      "extra-large": {
+        "value": "24px"
+      },
+      "giant": {
+        "value": "32px"
+      },
+      "mega": {
+        "value": "80px"
+      }
+    }
+  }
+}
diff --git a/src/brand/openinwoner/typography.tokens.json b/src/brand/openinwoner/typography.tokens.json
@@ -9,7 +9,8 @@
       "font-size": {"value": "16px"},
       "big": {
         "font-size": {"value": "24px"}
-      }
+      },
+      "line-height": {"value": "24px"}
     },
     "typography": {
       "sans-serif": {

diff --git a/src/community/utrecht/button.tokens.json b/src/community/utrecht/button.tokens.json
@@ -0,0 +1,92 @@
+{
+  "utrecht": {
+    "button": {
+      "background-color": {"value": "transparent"},
+      "border-color": {"value": "transparent"},
+      "border-radius": {"value": "{oip.button.border-radius}"},
+      "border-width": {"value": "1px"},
+      "color": {"value": "{oip.color.secondary}"},
+      "cursor": {"value": "pointer"},
+      "font-size": {"value": "{oip.text.font-size}"},
+      "line-height": {"value": "{oip.text.line-height}"},
+      "min-block-size": {"value": "0"},
+      "min-inline-size": {"value": "0"},
+      "padding-block-start": {"value": "{oip.button.padding-top}"},
+      "padding-block-end": {"value": "{oip.button.padding-bottom}"},
+      "padding-inline-start": {"value": "{oip.button.padding-left}"},
+      "padding-inline-end": {"value": "{oip.button.padding-right}"},
+
+      "focus": {
+        "border-color": {"value": "transparent"},
+        "color": {"value": "{oip.color.secondary}"}
+      },
+
+      "hover": {
+        "background-color": {"value": "transparent"},
+        "border-color": {"value": "transparent"},
+        "color": {"value": "{oip.color.secondary}"}
+      },
+
+      "primary-action": {
+        "background-color": {"value": "{oip.color.primary}"},
+        "border-color": {
+          "value": "{oip.color.primary}",
+          "comment": "The primary button-background color determined by the configuration."
+        },
+        "color": {"value": "#ffffff"},
+
+        "hover": {
+          "background-color": {"value": "{oip.color.primary-darker}"},
+          "border-color": {"value": "{oip.color.primary-darker}"},
+          "color": {"value": "#ffffff"}
+        },
+
+        "focus": {
+          "background-color": {"value": "{oip.color.primary-darker}"},
+          "border-color": {"value": "{oip.color.primary-darker}"},
+          "color": {"value": "#ffffff"}
+        },
+
+        "warning": {
+          "background-color": {"value": "{oip.color.danger-lightest}"},
+          "border-color": {"value": "{oip.color.danger-lightest}"},
+          "color": {"value": "{oip.color.danger}"},
+
+          "hover": {
+            "background-color": {"value": "{oip.button.danger}"},
+            "border-color": {"value": "{oip.color.danger}"},
+            "color": {"value": "{oip.color.danger-lightest}"}
+          }
+        }
+      },
+      "secondary-action": {
+        "background-color": {"value": "{oip.color.secondary}"},
+        "border-color": {
+          "value": "{oip.color.secondary}",
+          "comment": "The secondary button-background color determined by the configuration."
+        },
+        "color": {"value": "#ffffff"},
+
+        "hover": {
+          "background-color": {"value": "{oip.color.secondary-darker}"},
+          "border-color": {"value": "{oip.color.secondary-darker}"},
+          "color": {"value": "#ffffff"}
+        },
+
+        "focus": {
+          "background-color": {"value": "{oip.color.secondary-darker}"},
+          "border-color": {"value": "{oip.color.secondary-darker}"},
+          "color": {"value": "#ffffff"}
+        }
+      },
+      "disabled": {
+        "background-color": {"value": "{oip.color.gray}"},
+        "border-color": {
+          "value": "{oip.color.gray}",
+          "comment": "Default gray for disabled elements"
+        },
+        "color": {"value": "#ffffff"}
+      }
+    }
+  }
+}
diff --git a/src/community/utrecht/link-button.tokens.json b/src/community/utrecht/link-button.tokens.json
@@ -0,0 +1,80 @@
+{
+  "utrecht": {
+    "link-button": {
+      "background-color": {"value": "transparent"},
+      "border-color": {"value": "transparent"},
+      "border-radius": {"value": "{oip.button.border-radius}"},
+      "border-width": {"value": "1px"},
+      "color": {"value": "{oip.color.secondary}"},
+      "cursor": {"value": "pointer"},
+      "font-size": {"value": "{oip.text.font-size}"},
+      "line-height": {"value": "{oip.text.line-height}"},
+      "min-block-size": {"value": "0"},
+      "min-inline-size": {"value": "0"},
+      "padding-block-start": {"value": "{oip.button.padding-top}"},
+      "padding-block-end": {"value": "{oip.button.padding-bottom}"},
+      "padding-inline-start": {"value": "{oip.button.padding-left}"},
+      "padding-inline-end": {"value": "{oip.button.padding-right}"},
+
+      "focus": {
+        "border-color": {"value": "transparent"},
+        "color": {"value": "{oip.color.secondary}"}
+      },
+
+      "hover": {
+        "background-color": {"value": "transparent"},
+        "border-color": {"value": "transparent"},
+        "color": {"value": "{oip.color.secondary}"}
+      },
+
+      "primary-action": {
+        "background-color": {"value": "{oip.color.primary}"},
+        "border-color": {
+          "value": "{oip.color.primary}",
+          "comment": "The primary button-background color determined by the configuration."
+        },
+        "color": {"value": "#ffffff"},
+
+        "hover": {
+          "background-color": {"value": "{oip.color.primary-darker}"},
+          "border-color": {"value": "{oip.color.primary-darker}"},
+          "color": {"value": "#ffffff"}
+        },
+
+        "focus": {
+          "background-color": {"value": "{oip.color.primary-darker}"},
+          "border-color": {"value": "{oip.color.primary-darker}"},
+          "color": {"value": "#ffffff"}
+        }
+      },
+      "secondary-action": {
+        "background-color": {"value": "{oip.color.secondary}"},
+        "border-color": {
+          "value": "{oip.color.secondary}",
+          "comment": "The secondary button-background color determined by the configuration."
+        },
+        "color": {"value": "#ffffff"},
+
+        "hover": {
+          "background-color": {"value": "{oip.color.secondary-darker}"},
+          "border-color": {"value": "{oip.color.secondary-darker}"},
+          "color": {"value": "#ffffff"}
+        },
+
+        "focus": {
+          "background-color": {"value": "{oip.color.secondary-darker}"},
+          "border-color": {"value": "{oip.color.secondary-darker}"},
+          "color": {"value": "#ffffff"}
+        }
+      },
+      "disabled": {
+        "background-color": {"value": "{oip.color.gray}"},
+        "border-color": {
+          "value": "{oip.color.gray}",
+          "comment": "Default gray for disabled elements"
+        },
+        "color": {"value": "#ffffff"}
+      }
+    }
+  }
+}