@dictu/design-tokens 2.9.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @dictu/design-tokens
 
+## 2.11.0
+
+### Minor Changes
+
+- de8ea47: Added design tokens for variant of Link component with icon
+
+## 2.10.0
+
+### Minor Changes
+
+- de36cc1: Updated grid.tokens.json to remove the type field. Removed duplicated
+  design tokens from the date-input.tokens.json
+
 ## 2.9.0
 
 ### Minor Changes

package/dist/index.css

@@ -229,6 +229,11 @@
   --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;
@@ -270,9 +275,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;
@@ -833,14 +835,9 @@
   --govnl-text-input-hover-color: var(--govnl-form-control-hover-color);
   --govnl-text-input-focus-background-color: var(--govnl-form-control-background-color);
   --govnl-text-input-error-background-color: var(--govnl-form-control-invalid-background-color);
-  --govnl-text-input-error-color: var(--govnl-form-control-color);
   --govnl-text-input-read-only-background-color: var(--govnl-form-control-read-only-background-color);
   --govnl-text-input-read-only-color: var(--govnl-form-control-read-only-color);
   --govnl-text-input-placeholder-color: var(--govnl-form-control-placeholder-color);
-  --govnl-text-input-icon-color: var(--govnl-form-control-color);
-  --govnl-text-input-active-background-color: var(--govnl-form-control-active-background-color);
-  --govnl-text-input-active-border-color: var(--govnl-form-control-active-border-color);
-  --govnl-text-input-active-color: var(--govnl-form-control-active-color);
   --govnl-text-input-small-padding-inline-end: var(--govnl-space-2xs);
   --govnl-text-input-small-padding-inline-start: var(--govnl-space-2xs);
   --govnl-textarea-font-family: var(--govnl-form-control-font-family);
@@ -1015,10 +1012,7 @@
   --govnl-text-input-focus-color: var(--govnl-form-control-focus-color);
   --govnl-text-input-focus-outline-color: var(--govnl-form-control-focus-outline-color);
   --govnl-text-input-error-border-color: var(--govnl-form-control-invalid-border-color);
-  --govnl-text-input-focus-visible-background-color: var(--govnl-form-control-focus-background-color);
-  --govnl-text-input-focus-visible-border-color: var(--govnl-form-control-focus-border-color);
-  --govnl-text-input-focus-visible-color: var(--govnl-form-control-focus-color);
-  --govnl-text-input-focus-visible-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-text-input-error-color: var(--govnl-form-control-invalid-color);
   --govnl-text-area-focus-background-color: var(--govnl-form-control-focus-background-color);
   --govnl-text-area-focus-border-color: var(--govnl-form-control-focus-border-color);
   --govnl-text-area-focus-color: var(--govnl-form-control-focus-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "2.9.0",
+  "version": "2.11.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/components/form-elements/date-input.tokens.json

@@ -135,86 +135,6 @@
           "$value": "{govnl.form-control.active.color}"
         }
       }
-    },
-    "text-input": {
-      "background-color": {
-        "$type": "color",
-        "$value": "{govnl.form-control.background-color}"
-      },
-      "border-color": {
-        "$type": "color",
-        "$value": "{govnl.form-control.border-color}"
-      },
-      "color": {
-        "$type": "color",
-        "$value": "{govnl.form-control.color}"
-      },
-      "hover": {
-        "background-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.hover.background-color}"
-        },
-        "border-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.hover.border-color}"
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.hover.color}"
-        }
-      },
-      "focus-visible": {
-        "background-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.focus.background-color}"
-        },
-        "border-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.focus.border-color}"
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.focus.color}"
-        },
-        "outline-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.focus.outline-color}"
-        }
-      },
-      "error": {
-        "background-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.invalid.background-color}"
-        },
-        "border-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.invalid.border-color}"
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.color}"
-        }
-      },
-      "icon": {
-        "color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.color}"
-        }
-      },
-      "active": {
-        "background-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.active.background-color}"
-        },
-        "border-color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.active.border-color}"
-        },
-        "color": {
-          "$type": "color",
-          "$value": "{govnl.form-control.active.color}"
-        }
-      }
     }
   }
 }

package/src/components/grid.tokens.json

@@ -8,25 +8,20 @@
             "$value": "{govnl.dimension.size.2000}"
           },
           "col-1": {
-            "$type": "dimension",
             "$value": "repeat(1, 1fr)"
           },
           "col-2": {
-            "$type": "dimension",
             "$value": "repeat(2, 1fr)"
           },
           "col-3": {
-            "$type": "dimension",
             "$value": "repeat(3, 1fr)"
           },
           "col-4": {
-            "$type": "dimension",
             "$value": "repeat(4, 1fr)"
           }
         },
         "rows": {
           "auto": {
-            "$type": "dimension",
             "$value": "auto"
           }
         }
@@ -55,4 +50,4 @@
       }
     }
   }
-}
+}

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"
+        }
+      }
+    }
   }
-}
+}