@dictu/design-tokens 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
+
+- de8ea47: Added design tokens for variant of Link component with icon
+
 ## 2.10.0
 
 ### Minor Changes

package/dist/index.css

@@ -229,10 +229,24 @@
   --govnl-logo-title-padding-block-start: 3.125rem;
   --govnl-logo-subtitle-line-height: 1rem;
   --govnl-logo-subtitle-font-size: 0.775rem;
+  --govnl-link-icon-size: 1em;
+  --govnl-link-icon-margin-inline-start: 0.3em;
+  --govnl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
   --govnl-link-list-icon-inset-block-start: 0px;
   --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);
@@ -270,9 +284,6 @@
   --govnl-breadcrumb-nav-link-text-decoration: underline;
   --govnl-breadcrumb-nav-link-mobile-padding-inline-start: 0rem;
   --govnl-breadcrumb-nav-current-text-decoration: none;
-  --govnl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
-  --govnl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
-  --govnl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
   --govnl-accordion-body-border-color: rgba(0, 0, 0, 0);
   --govnl-accordion-button-border-color: rgba(0, 0, 0, 0);
   --govnl-accordion-button-icon-size: 1.5em;
@@ -353,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);
@@ -682,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);
@@ -864,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);
@@ -879,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);
@@ -992,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.10.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"
+      }
+    }
+  }
+}

package/src/components/link.tokens.json

@@ -84,5 +84,19 @@
         }
       }
     }
+  },
+  "govnl": {
+    "link": {
+      "icon": {
+        "size": {
+          "$type": "sizing",
+          "$value": "1em"
+        },
+        "margin-inline-start": {
+          "$type": "dimension",
+          "$value": "0.3em"
+        }
+      }
+    }
   }
-}
+}