@conduction/theme 1.0.15 → 1.0.17

package/README.md

@@ -4,7 +4,11 @@ Conduction's design tokens theme
 ## Changelog
 
 - **Version 1**
-  - 1.0.15: added conduction theme as JSON format.
+  - 1.0.17: 
+    - removed gitignore.
+    - fixed alert warning colors in xxllnc theme.
+  - 1.0.16: added Leiden theme as JSON format.
+  - 1.0.15: added Conduction theme as JSON format.
   - 1.0.14: added xxllnc theme as JSON format.
   - 1.0.13: added secondary button styling for all themes.
   - 1.0.12: implemented Select Single styling in xxllnc and Leiden
@@ -12,10 +16,10 @@ Conduction's design tokens theme
   - 1.0.10: 
     - Added document-backgroundcolor to all themes.
     - Added buttonIconGap token to Conduction and Leiden themes.
-    - Added formField, cards and conduction overwrite tokens to Conduction and Leiden themes.
+    - Added formField, cards and Conduction overwrite tokens to Conduction and Leiden themes.
     - Added link-text-decoration tokens to xxllnc theme.
   - 1.0.9: Added buttonIconGap token to xxllnc theme.
-  - 1.0.8: Added formField, cards and conduction overwrite tokens to xxllnc theme.
+  - 1.0.8: Added formField, cards and Conduction overwrite tokens to xxllnc theme.
   - 1.0.7: Added button tokens to all themes.
   - 1.0.6: Added xxllnc theme.
   - 1.0.5: Added page-max-inline size to Conduction theme.

package/conduction-design-tokens/dist/design-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Aug 2023 12:36:59 GMT
+ * Generated on Wed, 09 Aug 2023 14:24:45 GMT
  */
 
 .conduction-theme {
@@ -25,10 +25,8 @@
   --utrecht-code-block-margin-inline-start: 0;
   --utrecht-code-font-size: inherit;
   --utrecht-button-primary-action-font-weight: inherit;
-  --utrecht-button-primary-action-border-width: 0;
   --utrecht-button-font-weight: inherit;
   --utrecht-button-font-size: inherit;
-  --utrecht-button-border-width: 0;
   --utrecht-button-border-radius: 3px;
   --utrecht-table-header-cell-text-transform: unset;
   --utrecht-table-margin-block-end: 0;
@@ -196,10 +194,14 @@
   --utrecht-button-secondary-action-border-color: var(--conduction-color-primary);
   --utrecht-button-secondary-action-background-color: var(--conduction-color-white-100);
   --utrecht-button-primary-action-hover-color: var(--conduction-color-white-100);
+  --utrecht-button-primary-action-hover-border-color: var(--conduction-color-primary);
   --utrecht-button-primary-action-hover-background-color: var(--conduction-color-primary);
   --utrecht-button-primary-action-color: var(--conduction-color-white-100);
+  --utrecht-button-primary-action-border-width: var(--conduction-size-3xs);
+  --utrecht-button-primary-action-border-color: var(--conduction-color-primary);
   --utrecht-button-primary-action-background-color: var(--conduction-color-primary);
   --utrecht-button-hover-color: var(--conduction-color-white-100);
+  --utrecht-button-hover-border-color: var(--conduction-color-primary-hover);
   --utrecht-button-hover-background-color: var(--conduction-color-primary-hover);
   --utrecht-button-icon-gap: var(--conduction-size-xs);
   --utrecht-button-padding-inline-end: var(--conduction-size-sm);
@@ -208,6 +210,8 @@
   --utrecht-button-padding-block-start: var(--conduction-size-2xs);
   --utrecht-button-font-family: var(--conduction-typography-sans-serif-font-family);
   --utrecht-button-color: var(--conduction-color-white-100);
+  --utrecht-button-border-width: var(--conduction-size-3xs);
+  --utrecht-button-border-color: var(--conduction-color-primary);
   --utrecht-button-background-color: var(--conduction-color-primary);
   --utrecht-blockquote-content-font-size: var(--conduction-font-size-md);
   --utrecht-blockquote-content-color: var(--conduction-color-black-0);

package/conduction-design-tokens/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Aug 2023 12:36:59 GMT
+ * Generated on Wed, 09 Aug 2023 14:24:45 GMT
  */
 
 export const conductionColorPrimary = "#4376fc";
@@ -144,8 +144,9 @@ export const utrechtBlockquoteMarginInlineEnd = "32px";
 export const utrechtBlockquoteContentColor = "#000000";
 export const utrechtBlockquoteContentFontSize = "18px";
 export const utrechtButtonBackgroundColor = "#4376fc";
+export const utrechtButtonBorderColor = "#4376fc";
 export const utrechtButtonBorderRadius = "3px";
-export const utrechtButtonBorderWidth = 0;
+export const utrechtButtonBorderWidth = "2px";
 export const utrechtButtonColor = "#ffffff";
 export const utrechtButtonFontFamily = "\"Noto Sans\", Arial, sans-serif";
 export const utrechtButtonFontSize = "inherit";
@@ -156,12 +157,15 @@ export const utrechtButtonPaddingInlineStart = "14px";
 export const utrechtButtonPaddingInlineEnd = "14px";
 export const utrechtButtonIconGap = "8px";
 export const utrechtButtonHoverBackgroundColor = "#2e5ed9";
+export const utrechtButtonHoverBorderColor = "#2e5ed9";
 export const utrechtButtonHoverColor = "#ffffff";
 export const utrechtButtonPrimaryActionBackgroundColor = "#4376fc";
-export const utrechtButtonPrimaryActionBorderWidth = 0;
+export const utrechtButtonPrimaryActionBorderColor = "#4376fc";
+export const utrechtButtonPrimaryActionBorderWidth = "2px";
 export const utrechtButtonPrimaryActionColor = "#ffffff";
 export const utrechtButtonPrimaryActionFontWeight = "inherit";
 export const utrechtButtonPrimaryActionHoverBackgroundColor = "#4376fc";
+export const utrechtButtonPrimaryActionHoverBorderColor = "#4376fc";
 export const utrechtButtonPrimaryActionHoverColor = "#ffffff";
 export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
 export const utrechtButtonSecondaryActionBorderColor = "#4376fc";

package/conduction-design-tokens/dist/index.json

@@ -1883,6 +1883,25 @@
       "background-color"
     ]
   },
+  {
+    "value": "#4376fc",
+    "filePath": "src/component/utrecht/button.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.primary}"
+    },
+    "name": "utrechtButtonBorderColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "button",
+      "item": "border-color"
+    },
+    "path": [
+      "utrecht",
+      "button",
+      "border-color"
+    ]
+  },
   {
     "value": "3px",
     "filePath": "src/component/utrecht/button.tokens.json",
@@ -1903,11 +1922,11 @@
     ]
   },
   {
-    "value": 0,
+    "value": "2px",
     "filePath": "src/component/utrecht/button.tokens.json",
     "isSource": true,
     "original": {
-      "value": 0
+      "value": "{conduction.size.3xs}"
     },
     "name": "utrechtButtonBorderWidth",
     "attributes": {
@@ -2018,6 +2037,27 @@
       "background-color"
     ]
   },
+  {
+    "value": "#2e5ed9",
+    "filePath": "src/component/utrecht/button.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.primary-hover}"
+    },
+    "name": "utrechtButtonHoverBorderColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "button",
+      "item": "hover",
+      "subitem": "border-color"
+    },
+    "path": [
+      "utrecht",
+      "button",
+      "hover",
+      "border-color"
+    ]
+  },
   {
     "value": "#ffffff",
     "filePath": "src/component/utrecht/button.tokens.json",
@@ -2158,11 +2198,32 @@
     ]
   },
   {
-    "value": 0,
+    "value": "#4376fc",
     "filePath": "src/component/utrecht/button.tokens.json",
     "isSource": true,
     "original": {
-      "value": 0
+      "value": "{conduction.color.primary}"
+    },
+    "name": "utrechtButtonPrimaryActionBorderColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "button",
+      "item": "primary-action",
+      "subitem": "border-color"
+    },
+    "path": [
+      "utrecht",
+      "button",
+      "primary-action",
+      "border-color"
+    ]
+  },
+  {
+    "value": "2px",
+    "filePath": "src/component/utrecht/button.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.size.3xs}"
     },
     "name": "utrechtButtonPrimaryActionBorderWidth",
     "attributes": {
@@ -2243,6 +2304,29 @@
       "background-color"
     ]
   },
+  {
+    "value": "#4376fc",
+    "filePath": "src/component/utrecht/button.tokens.json",
+    "isSource": true,
+    "original": {
+      "value": "{conduction.color.primary}"
+    },
+    "name": "utrechtButtonPrimaryActionHoverBorderColor",
+    "attributes": {
+      "category": "utrecht",
+      "type": "button",
+      "item": "primary-action",
+      "subitem": "hover",
+      "state": "border-color"
+    },
+    "path": [
+      "utrecht",
+      "button",
+      "primary-action",
+      "hover",
+      "border-color"
+    ]
+  },
   {
     "value": "#ffffff",
     "filePath": "src/component/utrecht/button.tokens.json",

package/conduction-design-tokens/dist/index.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 09 Aug 2023 12:37:00 GMT
+// Generated on Wed, 09 Aug 2023 14:24:45 GMT
 
 @utrecht-textbox-font-size: 15px;
 @utrecht-textbox-border-radius: 3px;
@@ -23,10 +23,8 @@
 @utrecht-code-block-margin-inline-start: 0;
 @utrecht-code-font-size: inherit;
 @utrecht-button-primary-action-font-weight: inherit;
-@utrecht-button-primary-action-border-width: 0;
 @utrecht-button-font-weight: inherit;
 @utrecht-button-font-size: inherit;
-@utrecht-button-border-width: 0;
 @utrecht-button-border-radius: 3px;
 @utrecht-table-header-cell-text-transform: unset;
 @utrecht-table-margin-block-end: 0;
@@ -194,10 +192,14 @@
 @utrecht-button-secondary-action-border-color: @conduction-color-primary;
 @utrecht-button-secondary-action-background-color: @conduction-color-white-100;
 @utrecht-button-primary-action-hover-color: @conduction-color-white-100;
+@utrecht-button-primary-action-hover-border-color: @conduction-color-primary;
 @utrecht-button-primary-action-hover-background-color: @conduction-color-primary;
 @utrecht-button-primary-action-color: @conduction-color-white-100;
+@utrecht-button-primary-action-border-width: @conduction-size-3xs;
+@utrecht-button-primary-action-border-color: @conduction-color-primary;
 @utrecht-button-primary-action-background-color: @conduction-color-primary;
 @utrecht-button-hover-color: @conduction-color-white-100;
+@utrecht-button-hover-border-color: @conduction-color-primary-hover;
 @utrecht-button-hover-background-color: @conduction-color-primary-hover;
 @utrecht-button-icon-gap: @conduction-size-xs;
 @utrecht-button-padding-inline-end: @conduction-size-sm;
@@ -206,6 +208,8 @@
 @utrecht-button-padding-block-start: @conduction-size-2xs;
 @utrecht-button-font-family: @conduction-typography-sans-serif-font-family;
 @utrecht-button-color: @conduction-color-white-100;
+@utrecht-button-border-width: @conduction-size-3xs;
+@utrecht-button-border-color: @conduction-color-primary;
 @utrecht-button-background-color: @conduction-color-primary;
 @utrecht-blockquote-content-font-size: @conduction-font-size-md;
 @utrecht-blockquote-content-color: @conduction-color-black-0;

package/conduction-design-tokens/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 09 Aug 2023 12:37:00 GMT
+// Generated on Wed, 09 Aug 2023 14:24:45 GMT
 
 $utrecht-textbox-font-size: 15px;
 $utrecht-textbox-border-radius: 3px;
@@ -23,10 +23,8 @@ $utrecht-code-block-margin-inline-end: 0;
 $utrecht-code-block-margin-inline-start: 0;
 $utrecht-code-font-size: inherit;
 $utrecht-button-primary-action-font-weight: inherit;
-$utrecht-button-primary-action-border-width: 0;
 $utrecht-button-font-weight: inherit;
 $utrecht-button-font-size: inherit;
-$utrecht-button-border-width: 0;
 $utrecht-button-border-radius: 3px;
 $utrecht-table-header-cell-text-transform: unset;
 $utrecht-table-margin-block-end: 0;
@@ -194,10 +192,14 @@ $utrecht-button-secondary-action-border-width: $conduction-size-3xs;
 $utrecht-button-secondary-action-border-color: $conduction-color-primary;
 $utrecht-button-secondary-action-background-color: $conduction-color-white-100;
 $utrecht-button-primary-action-hover-color: $conduction-color-white-100;
+$utrecht-button-primary-action-hover-border-color: $conduction-color-primary;
 $utrecht-button-primary-action-hover-background-color: $conduction-color-primary;
 $utrecht-button-primary-action-color: $conduction-color-white-100;
+$utrecht-button-primary-action-border-width: $conduction-size-3xs;
+$utrecht-button-primary-action-border-color: $conduction-color-primary;
 $utrecht-button-primary-action-background-color: $conduction-color-primary;
 $utrecht-button-hover-color: $conduction-color-white-100;
+$utrecht-button-hover-border-color: $conduction-color-primary-hover;
 $utrecht-button-hover-background-color: $conduction-color-primary-hover;
 $utrecht-button-icon-gap: $conduction-size-xs;
 $utrecht-button-padding-inline-end: $conduction-size-sm;
@@ -206,6 +208,8 @@ $utrecht-button-padding-block-end: $conduction-size-2xs;
 $utrecht-button-padding-block-start: $conduction-size-2xs;
 $utrecht-button-font-family: $conduction-typography-sans-serif-font-family;
 $utrecht-button-color: $conduction-color-white-100;
+$utrecht-button-border-width: $conduction-size-3xs;
+$utrecht-button-border-color: $conduction-color-primary;
 $utrecht-button-background-color: $conduction-color-primary;
 $utrecht-blockquote-content-font-size: $conduction-font-size-md;
 $utrecht-blockquote-content-color: $conduction-color-black-0;

package/conduction-design-tokens/dist/tokens.json

@@ -2981,7 +2981,25 @@
           "background-color"
         ]
       },
-      "border-color": {},
+      "border-color": {
+        "value": "#4376fc",
+        "filePath": "src/component/utrecht/button.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{conduction.color.primary}"
+        },
+        "name": "utrechtButtonBorderColor",
+        "attributes": {
+          "category": "utrecht",
+          "type": "button",
+          "item": "border-color"
+        },
+        "path": [
+          "utrecht",
+          "button",
+          "border-color"
+        ]
+      },
       "border-radius": {
         "value": "3px",
         "filePath": "src/component/utrecht/button.tokens.json",
@@ -3002,11 +3020,11 @@
         ]
       },
       "border-width": {
-        "value": 0,
+        "value": "2px",
         "filePath": "src/component/utrecht/button.tokens.json",
         "isSource": true,
         "original": {
-          "value": 0
+          "value": "{conduction.size.3xs}"
         },
         "name": "utrechtButtonBorderWidth",
         "attributes": {
@@ -3240,7 +3258,27 @@
             "background-color"
           ]
         },
-        "border-color": {},
+        "border-color": {
+          "value": "#2e5ed9",
+          "filePath": "src/component/utrecht/button.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{conduction.color.primary-hover}"
+          },
+          "name": "utrechtButtonHoverBorderColor",
+          "attributes": {
+            "category": "utrecht",
+            "type": "button",
+            "item": "hover",
+            "subitem": "border-color"
+          },
+          "path": [
+            "utrecht",
+            "button",
+            "hover",
+            "border-color"
+          ]
+        },
         "color": {
           "value": "#ffffff",
           "filePath": "src/component/utrecht/button.tokens.json",
@@ -3291,13 +3329,33 @@
             "background-color"
           ]
         },
-        "border-color": {},
+        "border-color": {
+          "value": "#4376fc",
+          "filePath": "src/component/utrecht/button.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{conduction.color.primary}"
+          },
+          "name": "utrechtButtonPrimaryActionBorderColor",
+          "attributes": {
+            "category": "utrecht",
+            "type": "button",
+            "item": "primary-action",
+            "subitem": "border-color"
+          },
+          "path": [
+            "utrecht",
+            "button",
+            "primary-action",
+            "border-color"
+          ]
+        },
         "border-width": {
-          "value": 0,
+          "value": "2px",
           "filePath": "src/component/utrecht/button.tokens.json",
           "isSource": true,
           "original": {
-            "value": 0
+            "value": "{conduction.size.3xs}"
           },
           "name": "utrechtButtonPrimaryActionBorderWidth",
           "attributes": {
@@ -3389,7 +3447,29 @@
               "background-color"
             ]
           },
-          "border-color": {},
+          "border-color": {
+            "value": "#4376fc",
+            "filePath": "src/component/utrecht/button.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{conduction.color.primary}"
+            },
+            "name": "utrechtButtonPrimaryActionHoverBorderColor",
+            "attributes": {
+              "category": "utrecht",
+              "type": "button",
+              "item": "primary-action",
+              "subitem": "hover",
+              "state": "border-color"
+            },
+            "path": [
+              "utrecht",
+              "button",
+              "primary-action",
+              "hover",
+              "border-color"
+            ]
+          },
           "color": {
             "value": "#ffffff",
             "filePath": "src/component/utrecht/button.tokens.json",

package/conduction-design-tokens/src/component/utrecht/button.tokens.json

@@ -2,9 +2,9 @@
   "utrecht": {
     "button": {
       "background-color": { "value": "{conduction.color.primary}" },
-      "border-color": {},
+      "border-color": { "value": "{conduction.color.primary}" },
       "border-radius": { "value": "3px" },
-      "border-width": { "value": 0 },
+      "border-width": { "value": "{conduction.size.3xs}" },
       "color": { "value": "{conduction.color.white.100}" },
       "font-family": { "value": "{conduction.typography.sans-serif.font-family}" },
       "font-size": { "value": "inherit" },
@@ -41,7 +41,7 @@
       },
       "hover": {
         "background-color": { "value": "{conduction.color.primary-hover}" },
-        "border-color": {},
+        "border-color": { "value": "{conduction.color.primary-hover}" },
         "color": { "value": "{conduction.color.white.100}" },
         "scale": {}
       },
@@ -52,8 +52,8 @@
       },
       "primary-action": {
         "background-color": { "value": "{conduction.color.primary}" },
-        "border-color": {},
-        "border-width": { "value": 0 },
+        "border-color": { "value": "{conduction.color.primary}" },
+        "border-width": { "value": "{conduction.size.3xs}" },
         "color": { "value": "{conduction.color.white.100}" },
         "font-weight": { "value": "inherit" },
         "active": {
@@ -68,7 +68,7 @@
         },
         "hover": {
           "background-color": { "value": "{conduction.color.primary}" },
-          "border-color": {},
+          "border-color": { "value": "{conduction.color.primary}" },
           "color": { "value": "{conduction.color.white.100}" },
           "scale": {}
         },

package/conduction-design-tokens/src/config.json

@@ -1,6 +1,6 @@
 {
   "fullName": "Conduction",
-  "name": "conduction",
+  "name": "Conduction",
   "prefix": "conduction",
   "npm": "@conduction/theme",
   "stories": ["react-utrecht-link--default"]

package/municipalities/leiden-design-tokens/LICENSE.md

@@ -0,0 +1,17 @@
+# Auteursrecht Gemeente Leiden
+
+Copyright (c) 2023 Gemeente Leiden
+
+## Logo en huisstijl
+
+Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Gemeente Leiden.
+
+Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Gemeente Leiden gebruiken en je ontwerpt een eigen huisstijl.
+
+## Lettertype
+
+Lettertypes die worden gebruikt voor de huisstijl zijn niet allemaal gratis en open source. Let op dat bij gebruik van die bijgeleverde lettertypes je een (betaalde) licentie regelt. Pas anders de configuratie aan om minder of andere lettertypes te gebruiken.
+
+## Toestemming
+
+Wanneer je het logo of de huisstijl wilt gebruiken kun je voor toestemming contact opnemen met Gemeente Leiden.