From 6a7d9b6282e194e36c92b8c2a03d117bc1d9e2c6 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 14 May 2024 17:32:20 +0200
Subject: [PATCH 1/2] [#2450] Add OIP button tokens and modify Utrecht buttons

---
 .gitignore                                    |  5 +
 README.md                                     | 21 ++---
 src/brand/openinwoner/color.tokens.json       | 62 ++++++-------
 src/brand/openinwoner/spacing.tokens.json     | 46 ++++++++++
 src/brand/openinwoner/typography.tokens.json  |  3 +-
 src/community/utrecht/button.tokens.json      | 92 +++++++++++++++++++
 src/community/utrecht/link-button.tokens.json | 80 ++++++++++++++++
 .../buttons/button-modifiers.tokens.json      | 56 +++++++++++
 src/components/buttons/button.tokens.json     | 48 ++++++++++
 9 files changed, 363 insertions(+), 50 deletions(-)
 create mode 100644 src/brand/openinwoner/spacing.tokens.json
 create mode 100644 src/community/utrecht/button.tokens.json
 create mode 100644 src/community/utrecht/link-button.tokens.json
 create mode 100644 src/components/buttons/button-modifiers.tokens.json
 create mode 100644 src/components/buttons/button.tokens.json

diff --git a/.gitignore b/.gitignore
index 5eaa9bb..4ce2a4c 100644
--- 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
index dbbf24d..d31bb1d 100644
--- 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
index 5e3e75f..c4ade1f 100644
--- 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
new file mode 100644
index 0000000..a50db2a
--- /dev/null
+++ 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
index 47b6e31..9db3f6a 100644
--- 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
new file mode 100644
index 0000000..0f9ad9e
--- /dev/null
+++ 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
new file mode 100644
index 0000000..45617b1
--- /dev/null
+++ 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"}
+      }
+    }
+  }
+}
diff --git a/src/components/buttons/button-modifiers.tokens.json b/src/components/buttons/button-modifiers.tokens.json
new file mode 100644
index 0000000..b2d9ea8
--- /dev/null
+++ b/src/components/buttons/button-modifiers.tokens.json
@@ -0,0 +1,56 @@
+{
+  "oip": {
+    "button": {
+      "focus": {
+        "transform": {
+          "value": "translateY(-1px)"
+        }
+      },
+      "hover": {
+        "transform": {
+          "value": "translateY(-1px)"
+        }
+      },
+      "primary": {
+        "hover": {
+          "bg": {
+            "value": "{oip.color.primary-darker}"
+          },
+          "color-border": {
+            "value": "{oip.color.primary-darker}"
+          }
+        },
+        "focus": {
+          "color-border": {
+            "value": "{oip.color.primary-darker}"
+          }
+        },
+        "focus-visible": {
+          "color-border": {
+            "value": "{oip.color.primary-darker}"
+          }
+        }
+      },
+      "danger": {
+        "hover": {
+          "bg": {
+            "value": "{oip.color.danger}"
+          },
+          "color-border": {
+            "value": "{oip.color.danger}"
+          }
+        },
+        "focus": {
+          "color-border": {
+            "value": "{oip.color.danger}"
+          }
+        },
+        "focus-visible": {
+          "color-border": {
+            "value": "{oip.color.danger}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/buttons/button.tokens.json b/src/components/buttons/button.tokens.json
new file mode 100644
index 0000000..be3bb77
--- /dev/null
+++ b/src/components/buttons/button.tokens.json
@@ -0,0 +1,48 @@
+{
+  "oip": {
+    "button": {
+      "border-radius": {"value": "3px"},
+      "border-radius-large": {"value": "6px"},
+      "padding-top": {"value": "{oip.spacing.medium}"},
+      "padding-right": {"value": "{oip.spacing.large}"},
+      "padding-bottom": {"value": "{oip.spacing.medium}"},
+      "padding-left": {"value": "{oip.spacing.large}"},
+      "primary": {
+        "fg": {
+          "value": "#ffffff"
+        },
+        "bg": {
+          "value": "{oip.color.primary}",
+          "comment": "The primary button-background color determined by the configuration."
+        },
+        "color-border": {
+          "value": "{oip.color.primary}"
+        }
+      },
+      "secondary": {
+        "fg": {
+          "value": "#ffffff"
+        },
+        "bg": {
+          "value": "{oip.color.secondary}",
+          "comment": "The secondary button-background color determined by the configuration."
+        },
+        "color-border": {
+          "value": "{oip.color.secondary}"
+        }
+      },
+      "disabled": {
+        "fg": {
+          "value": "#ffffff"
+        },
+        "bg": {
+          "value": "{oip.color.secondary}",
+          "comment": "The secondary button-background color determined by the configuration."
+        },
+        "color-border": {
+          "value": "{oip.color.secondary}"
+        }
+      }
+    }
+  }
+}

From a60935f13a22b53b0d3b189655a7510c8adc5f3e Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Thu, 11 Jul 2024 17:30:59 +0200
Subject: [PATCH 2/2] [#2450] Added Den Haag tokens to gain more modifiers

---
 src/community/denhaag/button.tokens.json | 177 +++++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 src/community/denhaag/button.tokens.json

diff --git a/src/community/denhaag/button.tokens.json b/src/community/denhaag/button.tokens.json
new file mode 100644
index 0000000..50e4227
--- /dev/null
+++ b/src/community/denhaag/button.tokens.json
@@ -0,0 +1,177 @@
+{
+  "denhaag": {
+    "button": {
+      "primary": {
+        "action": {
+          "background-color": {
+            "value": "{oip.color.primary}"
+          },
+          "color": {
+            "value": "var(--denhaag-button-primary-action-color)"
+          },
+          "hover": {
+            "background-color": {
+              "value": "var(--denhaag-button-primary-action-hover-background-color)"
+            },
+            "color": {"value": "#ffffff"}
+          },
+          "disabled": {
+            "background-color": {
+              "value": "var(--denhaag-button-primary-action-disabled-background-color)"
+            },
+            "color": {
+              "value": "var(--denhaag-button-primary-action-disabled-color)"
+            }
+          }
+        }
+      },
+      "secondary": {
+        "action": {
+          "background-color": {"value": "#ffffff"},
+          "border-color": {"value": "#ffffff"},
+          "color": {
+            "value": "{oip.color.secondary}"
+          },
+          "hover": {
+            "background-color": {
+              "value": "var(--denhaag-button-secondary-action-hover-background-color)"
+            },
+            "border-color": {
+              "value": "var(--denhaag-button-secondary-action-hover-border-color)"
+            },
+            "color": {
+              "value": "var(--denhaag-button-secondary-action-hover-color)"
+            }
+          },
+          "disabled": {
+            "background-color": {
+              "value": "var(--denhaag-button-secondary-action-disabled-background-color)"
+            },
+            "border-color": {
+              "value": "var(--denhaag-button-secondary-action-disabled-border-color)"
+            },
+            "color": {
+              "value": "var(--denhaag-button-secondary-action-disabled-color)"
+            }
+          }
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "var(--denhaag-button-border-radius)"
+        },
+        "width": {
+          "value": "var(--denhaag-button-border-width)"
+        }
+      },
+      "cursor": {
+        "value": "var(--denhaag-button-cursor, default)"
+      },
+      "font-family": {
+        "value": "var(--denhaag-button-font-family)"
+      },
+      "font-weight": {
+        "value": "var(--denhaag-button-font-weight, 400)"
+      },
+      "size": {
+        "padding-block": {
+          "medium": {
+            "value": "var(--denhaag-button-medium-size-padding-block, var(--denhaag-button-padding-block))"
+          },
+          "large": {
+            "value": "var(--denhaag-button-large-size-padding-block, var(--denhaag-button-padding-block))"
+          }
+        },
+        "padding-inline": {
+          "medium": {
+            "value": "var(--denhaag-button-medium-size-padding-inline, var(--denhaag-button-padding-inline))"
+          },
+          "large": {
+            "value": "var(--denhaag-button-large-size-padding-inline, var(--denhaag-button-padding-inline))"
+          }
+        },
+        "icon-only": {
+          "padding-inline": {
+            "value": "0.75rem"
+          },
+          "height": {
+            "value": "var(--denhaag-button-icon-only-height)"
+          },
+          "icon-height": {
+            "value": "var(--denhaag-button-icon-only-icon-height)"
+          }
+        }
+      },
+      "typography": {
+        "scale": {
+          "base-font-size": {
+            "value": "var(--denhaag-typography-scale-base-font-size)"
+          },
+          "lg-font-size": {
+            "value": "var(--denhaag-typography-scale-lg-font-size)"
+          },
+          "xl-font-size": {
+            "value": "var(--denhaag-typography-scale-xl-font-size)"
+          }
+        }
+      },
+      "focus": {
+        "border": {
+          "value": "var(--denhaag-focus-border)"
+        }
+      },
+      "large": {
+        "line-height": {
+          "value": "var(--denhaag-button-large-size-line-height)"
+        }
+      },
+      "sr-only": {
+        "position": {
+          "value": "absolute"
+        },
+        "width": {
+          "value": "1px"
+        },
+        "height": {
+          "value": "1px"
+        },
+        "padding-block-start": {
+          "value": "0"
+        },
+        "padding-block-end": {
+          "value": "0"
+        },
+        "padding-inline-start": {
+          "value": "0"
+        },
+        "padding-inline-end": {
+          "value": "0"
+        },
+        "margin-block-start": {
+          "value": "-1px"
+        },
+        "margin-block-end": {
+          "value": "-1px"
+        },
+        "margin-inline-start": {
+          "value": "-1px"
+        },
+        "margin-inline-end": {
+          "value": "-1px"
+        },
+        "overflow": {
+          "value": "hidden"
+        },
+        "clip": {
+          "value": "rect(0, 0, 0, 0)"
+        },
+        "border": {
+          "value": "0"
+        }
+      }
+    },
+    "border-radius": {
+      "value": "var(--denhaag-border-radius)"
+    }
+  }
+}