@open-inwoner/design-tokens 0.0.24 → 0.0.25

package/dist/_variables.scss

@@ -126,8 +126,15 @@ $oip-external-link-align-items: center;
 $oip-external-link-row-gap: 8px;
 $oip-external-link-column-gap: 32px;
 $oip-external-link-text-decoration: none;
-$oip-external-link-hover-background-color: #f3f3f3;
+$oip-external-link-hover-background-color: #ffffff;
 $oip-external-link-hover-text-decoration-thickness: bold;
+$oip-external-link-hover-border-style: solid;
+$oip-external-link-hover-border-width-block-start: 1px;
+$oip-external-link-hover-border-width-block-end: 1px;
+$oip-external-link-hover-border-width-inline-start: 3px;
+$oip-external-link-hover-border-width-inline-end: 1px;
+$oip-external-link-hover-border-radius: 3px;
+$oip-external-link-hover-margin-inline-start: -2px;
 $oip-external-link-focus-visible-background-color: #f3f3f3;
 $oip-external-link-focus-visible-text-decoration-thickness: bold;
 $oip-external-link-body-margin-block-start: 0;
@@ -194,8 +201,8 @@ $oip-fieldset-horizontal-margin-bottom: 20px;
 $oip-utrecht-paragraph-centered-text-align: center;
 $oip-utrecht-paragraph-compact-margin-bottom: 0 !important;
 $oip-utrecht-paragraph-compact-margin-top: 0 !important;
-$oip-plugin-card-background-color: #fff;
-$oip-plugin-card-color: #333;
+$oip-plugin-card-background-color: #ffffff;
+$oip-plugin-card-color: #4b4b4b;
 $oip-plugin-card-max-inline-size: 100%;
 $oip-plugin-card-border-style: solid;
 $oip-plugin-card-border-width: 1px;
@@ -205,13 +212,25 @@ $oip-plugin-card-inline-size: 100%;
 $oip-plugin-card-row-gap: 24px;
 $oip-plugin-card-heading-padding-inline-start: 16px;
 $oip-plugin-card-heading-padding-inline-end: 16px;
+$oip-plugin-card-hover-background-color: #ffffff;
+$oip-plugin-card-hover-color: #4b4b4b;
+$oip-plugin-card-hover-border-style: solid;
+$oip-plugin-card-hover-border-width-block-start: 1px;
+$oip-plugin-card-hover-border-width-block-end: 1px;
+$oip-plugin-card-hover-border-width-inline-start: 3px;
+$oip-plugin-card-hover-border-width-inline-end: 1px;
+$oip-plugin-card-hover-border-radius: 3px;
+$oip-plugin-card-hover-box-shadow: none;
+$oip-plugin-card-hover-margin-inline-start: -2px;
 $oip-plugin-card-link-padding: 0;
 $oip-plugin-card-link-hover-text-decoration-thickness: 1px;
 $oip-plugin-card-link-hover-text-decoration-line: underline;
 $oip-plugin-card-link-hover-text-underline-offset: auto;
 $oip-plugin-card-content-gap: 24px;
-$oip-plugin-card-content-padding-block-start: 16px;
-$oip-plugin-card-content-padding-block-end: 16px;
+$oip-plugin-card-content-padding-block-start: 24px;
+$oip-plugin-card-content-padding-block-end: 24px;
+$oip-plugin-card-content-padding-inline-start: 16px;
+$oip-plugin-card-content-padding-inline-end: 16px;
 $oip-plugin-card-body-padding-inline-start: 16px;
 $oip-plugin-card-body-padding-inline-end: 16px;
 $oip-plugin-card-list-grid-template-columns: repeat(1, 1fr);
@@ -251,7 +270,7 @@ $oip-plugin-grid-margin-block-start: 0;
 $oip-plugin-grid-margin-block-end: 0;
 $oip-plugin-grid-padding-inline-start: 0;
 $oip-plugin-grid-padding-inline-end: 0;
-$oip-plugin-grid-row-gap: 8px;
+$oip-plugin-grid-row-gap: 16px;
 $oip-plugin-grid-column-gap: 32px;
 $oip-utrecht-unordered-list-marker-content: none;
 $oip-utrecht-unordered-list-nested-margin-inline-start: 0;
@@ -512,12 +531,14 @@ $oip-combobox-popover-listbox-list-option-selected-icon-color: $oip-color-fg;
 $oip-combobox-icon-color: $oip-color-fg;
 $oip-external-link-border-color: $oip-color-border;
 $oip-external-link-font-family: $oip-typography-sans-serif-font-family;
+$oip-external-link-hover-border-color: $oip-color-primary;
 $oip-external-link-list-item-border-color: $oip-color-border;
 $oip-external-link-content-font-family: $oip-typography-heading-font-family;
 $oip-external-link-arrow-icon-color: $oip-color-primary;
 $oip-utrecht-paragraph-muted-color: $oip-color-fg-muted;
 $oip-plugin-card-border-color: $oip-color-border;
 $oip-plugin-card-heading-color: $oip-color-fg-heading;
+$oip-plugin-card-hover-border-color: $oip-color-primary;
 $oip-plugin-header-font-family: $oip-typography-heading-font-family;
 $oip-plugin-header-indicator-notification-indicator-color: $oip-color-red-notification;
 $oip-plugin-header-heading-color: $oip-color-fg-heading;

package/dist/css/index.css

@@ -128,8 +128,15 @@
   --oip-external-link-row-gap: 8px;
   --oip-external-link-column-gap: 32px;
   --oip-external-link-text-decoration: none;
-  --oip-external-link-hover-background-color: #f3f3f3;
+  --oip-external-link-hover-background-color: #ffffff;
   --oip-external-link-hover-text-decoration-thickness: bold;
+  --oip-external-link-hover-border-style: solid;
+  --oip-external-link-hover-border-width-block-start: 1px;
+  --oip-external-link-hover-border-width-block-end: 1px;
+  --oip-external-link-hover-border-width-inline-start: 3px;
+  --oip-external-link-hover-border-width-inline-end: 1px;
+  --oip-external-link-hover-border-radius: 3px;
+  --oip-external-link-hover-margin-inline-start: -2px;
   --oip-external-link-focus-visible-background-color: #f3f3f3;
   --oip-external-link-focus-visible-text-decoration-thickness: bold;
   --oip-external-link-body-margin-block-start: 0;
@@ -196,8 +203,8 @@
   --oip-utrecht-paragraph-centered-text-align: center;
   --oip-utrecht-paragraph-compact-margin-bottom: 0 !important;
   --oip-utrecht-paragraph-compact-margin-top: 0 !important;
-  --oip-plugin-card-background-color: #fff;
-  --oip-plugin-card-color: #333;
+  --oip-plugin-card-background-color: #ffffff;
+  --oip-plugin-card-color: #4b4b4b;
   --oip-plugin-card-max-inline-size: 100%;
   --oip-plugin-card-border-style: solid;
   --oip-plugin-card-border-width: 1px;
@@ -207,13 +214,25 @@
   --oip-plugin-card-row-gap: 24px;
   --oip-plugin-card-heading-padding-inline-start: 16px;
   --oip-plugin-card-heading-padding-inline-end: 16px;
+  --oip-plugin-card-hover-background-color: #ffffff;
+  --oip-plugin-card-hover-color: #4b4b4b;
+  --oip-plugin-card-hover-border-style: solid;
+  --oip-plugin-card-hover-border-width-block-start: 1px;
+  --oip-plugin-card-hover-border-width-block-end: 1px;
+  --oip-plugin-card-hover-border-width-inline-start: 3px;
+  --oip-plugin-card-hover-border-width-inline-end: 1px;
+  --oip-plugin-card-hover-border-radius: 3px;
+  --oip-plugin-card-hover-box-shadow: none;
+  --oip-plugin-card-hover-margin-inline-start: -2px;
   --oip-plugin-card-link-padding: 0;
   --oip-plugin-card-link-hover-text-decoration-thickness: 1px;
   --oip-plugin-card-link-hover-text-decoration-line: underline;
   --oip-plugin-card-link-hover-text-underline-offset: auto;
   --oip-plugin-card-content-gap: 24px;
-  --oip-plugin-card-content-padding-block-start: 16px;
-  --oip-plugin-card-content-padding-block-end: 16px;
+  --oip-plugin-card-content-padding-block-start: 24px;
+  --oip-plugin-card-content-padding-block-end: 24px;
+  --oip-plugin-card-content-padding-inline-start: 16px;
+  --oip-plugin-card-content-padding-inline-end: 16px;
   --oip-plugin-card-body-padding-inline-start: 16px;
   --oip-plugin-card-body-padding-inline-end: 16px;
   --oip-plugin-card-list-grid-template-columns: repeat(1, 1fr);
@@ -253,7 +272,7 @@
   --oip-plugin-grid-margin-block-end: 0;
   --oip-plugin-grid-padding-inline-start: 0;
   --oip-plugin-grid-padding-inline-end: 0;
-  --oip-plugin-grid-row-gap: 8px;
+  --oip-plugin-grid-row-gap: 16px;
   --oip-plugin-grid-column-gap: 32px;
   --oip-utrecht-unordered-list-marker-content: none;
   --oip-utrecht-unordered-list-nested-margin-inline-start: 0;
@@ -514,12 +533,14 @@
   --oip-combobox-icon-color: var(--oip-color-fg);
   --oip-external-link-border-color: var(--oip-color-border);
   --oip-external-link-font-family: var(--oip-typography-sans-serif-font-family);
+  --oip-external-link-hover-border-color: var(--oip-color-primary);
   --oip-external-link-list-item-border-color: var(--oip-color-border);
   --oip-external-link-content-font-family: var(--oip-typography-heading-font-family);
   --oip-external-link-arrow-icon-color: var(--oip-color-primary);
   --oip-utrecht-paragraph-muted-color: var(--oip-color-fg-muted);
   --oip-plugin-card-border-color: var(--oip-color-border);
   --oip-plugin-card-heading-color: var(--oip-color-fg-heading);
+  --oip-plugin-card-hover-border-color: var(--oip-color-primary);
   --oip-plugin-header-font-family: var(--oip-typography-heading-font-family);
   --oip-plugin-header-indicator-notification-indicator-color: var(--oip-color-red-notification);
   --oip-plugin-header-heading-color: var(--oip-color-fg-heading);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-inwoner/design-tokens",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "Design tokens for Open Inwoner",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/external-link-plugin.tokens.json

@@ -17,8 +17,16 @@
       "column-gap": {"value": "32px"},
       "text-decoration": {"value": "none"},
       "hover": {
-        "background-color": {"value": "#f3f3f3"},
-        "text-decoration-thickness": {"value": "bold"}
+        "background-color": {"value": "#ffffff"},
+        "text-decoration-thickness": {"value": "bold"},
+        "border-color": {"value": "{oip.color.primary}"},
+        "border-style": {"value": "solid"},
+        "border-width-block-start": {"value": "1px"},
+        "border-width-block-end": {"value": "1px"},
+        "border-width-inline-start": {"value": "3px"},
+        "border-width-inline-end": {"value": "1px"},
+        "border-radius": {"value": "3px"},
+        "margin-inline-start": {"value": "-2px"}
       },
       "focus-visible": {
         "background-color": {"value": "#f3f3f3"},

package/src/components/plugin-card.tokens.json

@@ -1,8 +1,8 @@
 {
   "oip": {
     "plugin-card": {
-      "background-color": {"value": "#fff"},
-      "color": {"value": "#333"},
+      "background-color": {"value": "#ffffff"},
+      "color": {"value": "#4b4b4b"},
       "max-inline-size": {"value": "100%"},
       "border-color": {"value": "{oip.color.border}"},
       "border-style": {"value": "solid"},
@@ -16,6 +16,19 @@
         "padding-inline-start": {"value": "16px"},
         "padding-inline-end": {"value": "16px"}
       },
+      "hover": {
+        "background-color": {"value": "#ffffff"},
+        "color": {"value": "#4b4b4b"},
+        "border-color": {"value": "{oip.color.primary}"},
+        "border-style": {"value": "solid"},
+        "border-width-block-start": {"value": "1px"},
+        "border-width-block-end": {"value": "1px"},
+        "border-width-inline-start": {"value": "3px"},
+        "border-width-inline-end": {"value": "1px"},
+        "border-radius": {"value": "3px"},
+        "box-shadow": {"value": "none"},
+        "margin-inline-start": {"value": "-2px"}
+      },
       "link": {
         "padding": {"value": "0"}
       },
@@ -26,8 +39,10 @@
       },
       "content": {
         "gap": {"value": "24px"},
-        "padding-block-start": {"value": "16px"},
-        "padding-block-end": {"value": "16px"}
+        "padding-block-start": {"value": "24px"},
+        "padding-block-end": {"value": "24px"},
+        "padding-inline-start": {"value": "16px"},
+        "padding-inline-end": {"value": "16px"}
       },
       "body": {
         "padding-inline-start": {"value": "16px"},

package/src/components/plugin-grid.tokens.json

@@ -108,7 +108,7 @@
           "value": "0"
         },
         "row-gap": {
-          "value": "8px"
+          "value": "16px"
         },
         "column-gap": {
           "value": "32px"