@dictu/design-tokens 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dictu/design-tokens
 
+## 2.12.0
+
+### Minor Changes
+
+- 28d161f: Added Link as Button component and tokens
+- 818d0bb: Changed tokens for Link as Button component
+
 ## 2.11.0
 
 ### Minor Changes

package/dist/index.css

@@ -238,6 +238,15 @@
   --govnl-link-list-icon-size: 1.125em;
   --govnl-link-list-link-text-decoration: None;
   --govnl-link-list-link-hover-text-decoration: underline;
+  --govnl-link-as-button-text-decoration-line: underline;
+  --govnl-link-as-button-active-text-decoration-line: underline;
+  --govnl-link-as-button-active-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-link-as-button-focus-visible-text-decoration-line: underline;
+  --govnl-link-as-button-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-link-as-button-hover-text-decoration-line: underline;
+  --govnl-link-as-button-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-link-as-button-text-decoration-thickness: max(1px, .0625rem);
+  --govnl-link-as-button-text-underline-offset: 0.1578em;
   --govnl-icon-size: 1.5em;
   --govnl-hero-message-max-inline-size: 50%;
   --govnl-grid-template-columns-col-1: repeat(1, 1fr);
@@ -355,6 +364,20 @@
   --govnl-list-list-item-level3-indent: var(--govnl-dimension-size-600);
   --govnl-list-gap: var(--govnl-dimension-size-100);
   --govnl-list-prefix: var(--govnl-dimension-size-300);
+  --govnl-link-as-button-primary-action-color: var(--govnl-color-white);
+  --govnl-link-as-button-primary-action-hover-color: var(--govnl-color-white);
+  --govnl-link-as-button-primary-action-active-color: var(--govnl-color-white);
+  --govnl-link-as-button-secondary-action-hover-background-color: var(--govnl-color-grijs-50);
+  --govnl-link-as-button-secondary-action-background-color: var(--govnl-color-white);
+  --govnl-link-as-button-secondary-action-active-background-color: var(--govnl-color-grijs-100);
+  --govnl-link-as-button-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-link-as-button-border-width: var(--govnl-border-border-width-sm);
+  --govnl-link-as-button-line-height: var(--govnl-typography-line-height-sm);
+  --govnl-link-as-button-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-link-as-button-min-inline-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-link-as-button-small-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-link-as-button-small-min-block-size: var(--govnl-dimension-size-500);
+  --govnl-link-as-button-small-min-inline-size: var(--govnl-dimension-size-500);
   --govnl-hero-message-border-radius: var(--govnl-rh-min-border-radius);
   --govnl-hero-border-radius: var(--govnl-rh-max-border-radius);
   --govnl-grid-template-columns-width: var(--govnl-dimension-size-2000);
@@ -684,6 +707,27 @@
   --govnl-link-list-row-gap: 0.5rem;
   --govnl-link-list-link-column-gap: 0.5rem;
   --govnl-link-list-font-weight: var(--govnl-document-font-weight);
+  --govnl-link-as-button-primary-action-background-color: var(--govnl-interaction-color);
+  --govnl-link-as-button-primary-action-border-color: var(--govnl-interaction-color);
+  --govnl-link-as-button-primary-action-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-link-as-button-primary-action-focus-border-color: var(--govnl-focus-border-color);
+  --govnl-link-as-button-primary-action-focus-color: var(--govnl-focus-color);
+  --govnl-link-as-button-secondary-action-border-color: var(--govnl-interaction-color);
+  --govnl-link-as-button-secondary-action-color: var(--govnl-interaction-color);
+  --govnl-link-as-button-secondary-action-focus-background-color: var(--govnl-focus-background-color);
+  --govnl-link-as-button-secondary-action-focus-border-color: var(--govnl-focus-border-color);
+  --govnl-link-as-button-secondary-action-focus-color: var(--govnl-focus-color);
+  --govnl-link-as-button-font-family: var(--govnl-document-font-family);
+  --govnl-link-as-button-font-size: var(--govnl-document-font-size);
+  --govnl-link-as-button-font-weight: var(--govnl-document-font-weight);
+  --govnl-link-as-button-padding-block-end: var(--govnl-space-xs);
+  --govnl-link-as-button-padding-block-start: var(--govnl-space-xs);
+  --govnl-link-as-button-padding-inline-end: var(--govnl-space-sm);
+  --govnl-link-as-button-padding-inline-start: var(--govnl-space-sm);
+  --govnl-link-as-button-small-padding-block-end: var(--govnl-space-2xs);
+  --govnl-link-as-button-small-padding-block-start: var(--govnl-space-2xs);
+  --govnl-link-as-button-small-padding-inline-end: var(--govnl-space-xs);
+  --govnl-link-as-button-small-padding-inline-start: var(--govnl-space-xs);
   --govnl-icon-color: var(--govnl-document-color);
   --govnl-hero-message-row-gap: var(--govnl-space-4xs);
   --govnl-hero-message-padding-block-end: var(--govnl-space-sm);
@@ -866,7 +910,7 @@
   --govnl-select-border-color: var(--govnl-form-control-border-color);
   --govnl-select-color: var(--govnl-form-control-color);
   --govnl-select-padding-block-start: var(--govnl-space-xs);
-  --govnl-select-padding-inline-end: var(--govnl-space-xs);
+  --govnl-select-padding-inline-end: var(--govnl-space-2xl);
   --govnl-select-padding-block-end: var(--govnl-space-xs);
   --govnl-select-padding-inline-start: var(--govnl-space-xs);
   --govnl-select-column-gap: var(--govnl-space-3xs);
@@ -881,6 +925,7 @@
   --govnl-select-list-item-active-color: var(--govnl-form-control-active-color);
   --govnl-select-list-item-hover-background-color: var(--govnl-form-control-hover-background-color);
   --govnl-select-list-item-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-select-background-position: right var(--govnl-space-xs) center;
   --govnl-radio-button-unchecked-background-color: var(--govnl-form-control-background-color);
   --govnl-radio-button-unchecked-border-color: var(--govnl-form-control-border-color);
   --govnl-radio-button-unchecked-hover-background-color: var(--govnl-form-control-hover-background-color);
@@ -994,6 +1039,14 @@
   --nl-heading-level-6-font-family: var(--govnl-heading-font-family);
   --nl-heading-level-6-font-weight: var(--govnl-heading-font-weight);
   --govnl-table-header-color: var(--govnl-heading-color);
+  --govnl-link-as-button-primary-action-hover-background-color: var(--govnl-interaction-hover-color);
+  --govnl-link-as-button-primary-action-hover-border-color: var(--govnl-interaction-hover-color);
+  --govnl-link-as-button-primary-action-active-background-color: var(--govnl-interaction-active-color);
+  --govnl-link-as-button-primary-action-active-border-color: var(--govnl-interaction-active-color);
+  --govnl-link-as-button-secondary-action-hover-border-color: var(--govnl-interaction-hover-color);
+  --govnl-link-as-button-secondary-action-hover-color: var(--govnl-interaction-hover-color);
+  --govnl-link-as-button-secondary-action-active-border-color: var(--govnl-interaction-active-color);
+  --govnl-link-as-button-secondary-action-active-color: var(--govnl-interaction-active-color);
   --govnl-button-primary-action-hover-background-color: var(--govnl-interaction-hover-color);
   --govnl-button-primary-action-hover-border-color: var(--govnl-interaction-hover-color);
   --govnl-button-primary-action-active-background-color: var(--govnl-interaction-active-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "author": "Dienst ICT Uitvoering",
   "description": "Design Tokens for DICTU Design system, based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/$metadata.json

@@ -5,6 +5,7 @@
     "components/accordion.tokens",
     "components/breadcrumb.tokens",
     "components/button.tokens",
+    "components/link-as-button.tokens",
     "components/card.tokens",
     "components/container.tokens",
     "components/figure.tokens",

package/src/components/form-elements/select.tokens.json

@@ -39,7 +39,7 @@
       },
       "padding-inline-end": {
         "$type": "dimension",
-        "$value": "{govnl.space.xs}"
+        "$value": "{govnl.space.2xl}"
       },
       "padding-block-end": {
         "$type": "dimension",
@@ -158,7 +158,11 @@
           "$type": "textDecoration",
           "$value": "none"
         }
+      },
+      "background-position": {
+        "$type": "dimension",
+        "$value": "right {govnl.space.xs} center"
       }
     }
   }
-}
+}

package/src/components/link-as-button.tokens.json

@@ -0,0 +1,238 @@
+{
+  "govnl": {
+    "link-as-button": {
+      "primary-action": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.interaction.color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.interaction.color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.color.white}"
+        },
+        "hover": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.hover.color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.hover.color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          }
+        },
+        "active": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.active.color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.active.color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          }
+        },
+        "focus": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.focus.background-color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.focus.border-color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.focus.color}"
+          }
+        }
+      },
+      "secondary-action": {
+        "hover": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.grijs.50}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.hover.color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.hover.color}"
+          }
+        },
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.color.white}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.interaction.color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.interaction.color}"
+        },
+        "focus": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.focus.background-color}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.focus.border-color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.focus.color}"
+          }
+        },
+        "active": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.grijs.100}"
+          },
+          "border-color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.active.color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.active.color}"
+          }
+        }
+      },
+      "border-radius": {
+        "$type": "borderRadius",
+        "$value": "{govnl.border.border-radius.sm}"
+      },
+      "border-width": {
+        "$type": "borderWidth",
+        "$value": "{govnl.border.border-width.sm}"
+      },
+      "font-family": {
+        "$type": "fontFamilies",
+        "$value": "{govnl.document.font-family}"
+      },
+      "font-size": {
+        "$type": "fontSizes",
+        "$value": "{govnl.document.font-size}"
+      },
+      "font-weight": {
+        "$type": "fontWeights",
+        "$value": "{govnl.document.font-weight}"
+      },
+      "line-height": {
+        "$type": "lineHeights",
+        "$value": "{govnl.typography.line-height.sm}"
+      },
+      "padding-block-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-block-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-inline-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.sm}"
+      },
+      "padding-inline-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.sm}"
+      },
+      "min-block-size": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.pointer-target.min-size}"
+      },
+      "min-inline-size": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.pointer-target.min-size}"
+      },
+      "small": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.sm}"
+        },
+        "padding-block-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.2xs}"
+        },
+        "padding-block-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.2xs}"
+        },
+        "padding-inline-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "padding-inline-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
+        },
+        "min-block-size": {
+          "$type": "dimension",
+          "$value": "{govnl.dimension.size.500}"
+        },
+        "min-inline-size": {
+          "$type": "dimension",
+          "$value": "{govnl.dimension.size.500}"
+        }
+      },
+      "text-decoration-line": {
+        "$type": "textDecoration",
+        "$value": "underline"
+      },
+      "active": {
+        "text-decoration-line": {
+          "$type": "textDecoration",
+          "$value": "underline"
+        },
+        "text-decoration-thickness": {
+          "$type": "other",
+          "$value": "max(3px, .1875rem, .12em)"
+        }
+      },
+      "focus-visible": {
+        "text-decoration-line": {
+          "$type": "textDecoration",
+          "$value": "underline"
+        },
+        "text-decoration-thickness": {
+          "$type": "other",
+          "$value": "max(3px, .1875rem, .12em)"
+        }
+      },
+      "hover": {
+        "text-decoration-line": {
+          "$type": "textDecoration",
+          "$value": "underline"
+        },
+        "text-decoration-thickness": {
+          "$type": "other",
+          "$value": "max(3px, .1875rem, .12em)"
+        }
+      },
+      "text-decoration-thickness": {
+        "$type": "other",
+        "$value": "max(1px, .0625rem)"
+      },
+      "text-underline-offset": {
+        "$type": "other",
+        "$value": ".1578em"
+      }
+    }
+  }
+}