@rijkshuisstijl-community/design-tokens 1.0.0-alpha.58 → 1.0.0-alpha.59

package/dist/variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 06 Nov 2024 08:56:10 GMT
+// Generated on Wed, 06 Nov 2024 10:56:01 GMT
 
 @rhc-sub-nav-bar-content-list-row-gap: 0.5rem;
 @rhc-sub-nav-bar-content-max-inline-size: 1280px;
@@ -255,6 +255,48 @@
 @rhc-accordion-button-font-weight: 400;
 @rhc-accordion-button-font-size: 1.25rem;
 @rhc-accordion-button-font-family: Fira Sans, Arial, Verdana, sans-serif;
+@rhc-card-as-link-horizontal-heading-inline-size: 200px;
+@rhc-card-as-link-horizontal-padding-inline-start: 1rem;
+@rhc-card-as-link-horizontal-padding-inline-end: 1rem;
+@rhc-card-as-link-horizontal-padding-block-start: 0;
+@rhc-card-as-link-horizontal-padding-block-end: 0;
+@rhc-card-as-link-horizontal-max-block-size: 96px;
+@rhc-card-as-link-horizontal-color: #fff;
+@rhc-card-as-link-horizontal-border-color: transparent;
+@rhc-card-as-link-horizontal-background-color: #154273;
+@rhc-card-as-link-heading-font-weight: 700;
+@rhc-card-as-link-heading-font-size: 1.5rem;
+@rhc-card-as-link-heading-padding-block-start: 0.5rem;
+@rhc-card-as-link-full-bleed-opacity: 0.5;
+@rhc-card-as-link-full-bleed-color: #fff;
+@rhc-card-as-link-full-bleed-border-color: transparent;
+@rhc-card-as-link-full-bleed-background-color: #000;
+@rhc-card-as-link-focus-text-decoration: underline;
+@rhc-card-as-link-focus-background-color: #dce3ea;
+@rhc-card-as-link-hover-text-decoration: underline;
+@rhc-card-as-link-hover-background-color: #F8FAFC;
+@rhc-card-as-link-active-text-decoration: underline;
+@rhc-card-as-link-active-background-color: #F1F5F9;
+@rhc-card-as-link-row-gap: 0.75rem;
+@rhc-card-as-link-padding-inline-start: 1rem;
+@rhc-card-as-link-padding-inline-end: 1rem;
+@rhc-card-as-link-padding-block-start: 1rem;
+@rhc-card-as-link-padding-block-end: 1rem;
+@rhc-card-as-link-metadata-color: #154273;
+@rhc-card-as-link-link-focus-text-decoration: none;
+@rhc-card-as-link-link-hover-text-decoration: none;
+@rhc-card-as-link-link-active-text-decoration: none;
+@rhc-card-as-link-link-text-decoration: underline;
+@rhc-card-as-link-link-color: #01689b;
+@rhc-card-as-link-icon-size: 24px;
+@rhc-card-as-link-icon-color: #154273;
+@rhc-card-as-link-inline-size: 328px;
+@rhc-card-as-link-column-gap: 1rem;
+@rhc-card-as-link-color: #154273;
+@rhc-card-as-link-border-width: 1px;
+@rhc-card-as-link-border-radius: 5px;
+@rhc-card-as-link-border-color: #CBD5E1;
+@rhc-card-as-link-background-color: #fff;
 @rhc-checkbox-group-row-gap: 1rem;
 @rhc-checkbox-group-padding-block-start: 0.5rem;
 @rhc-checkbox-group-padding-block-end: 0.5rem;

package/figma/figma.tokens.json

@@ -2516,6 +2516,206 @@
       }
     }
   },
+  "components/card": {
+    "rhc": {
+      "card-as-link": {
+        "background-color": {
+          "value": "{rhc.color.wit}",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "{rhc.color.grijs.300}",
+          "type": "color"
+        },
+        "border-radius": {
+          "value": "{rhc.border-radius.md}",
+          "type": "borderRadius"
+        },
+        "border-width": {
+          "value": "{rhc.border-width.default}",
+          "type": "borderWidth"
+        },
+        "color": {
+          "value": "{rhc.color.foreground.lint}",
+          "type": "color"
+        },
+        "column-gap": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "inline-size": {
+          "value": "328px",
+          "type": "sizing"
+        },
+        "icon": {
+          "color": {
+            "value": "{rhc.color.foreground.lint}",
+            "type": "color"
+          },
+          "size": {
+            "value": "{rhc.size.icon.functional}",
+            "type": "sizing"
+          }
+        },
+        "link": {
+          "color": {
+            "value": "{rhc.color.donkerblauw.500}",
+            "type": "color"
+          },
+          "text-decoration": {
+            "value": "underline",
+            "type": "textDecoration"
+          },
+          "active": {
+            "text-decoration": {
+              "value": "none",
+              "type": "textDecoration"
+            }
+          },
+          "hover": {
+            "text-decoration": {
+              "value": "none",
+              "type": "textDecoration"
+            }
+          },
+          "focus": {
+            "text-decoration": {
+              "value": "none",
+              "type": "textDecoration"
+            }
+          }
+        },
+        "metadata": {
+          "color": {
+            "value": "{rhc.color.foreground.lint}",
+            "type": "color"
+          }
+        },
+        "padding-block-end": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "{rhc.space.200}",
+          "type": "spacing"
+        },
+        "row-gap": {
+          "value": "{rhc.space.150}",
+          "type": "spacing"
+        },
+        "active": {
+          "background-color": {
+            "value": "{rhc.color.grijs.100}",
+            "type": "color"
+          },
+          "text-decoration": {
+            "value": "underline",
+            "type": "textDecoration"
+          }
+        },
+        "hover": {
+          "background-color": {
+            "value": "{rhc.color.grijs.50}",
+            "type": "color"
+          },
+          "text-decoration": {
+            "value": "underline",
+            "type": "textDecoration"
+          }
+        },
+        "focus": {
+          "background-color": {
+            "value": "{rhc.color.lintblauw.50}",
+            "type": "color"
+          },
+          "text-decoration": {
+            "value": "underline",
+            "type": "textDecoration"
+          }
+        },
+        "full-bleed": {
+          "background-color": {
+            "value": "{rhc.color.zwart}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{rhc.color.none}",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.foreground.onEmphasis}",
+            "type": "color"
+          },
+          "opacity": {
+            "value": "0.5",
+            "type": "opacity"
+          }
+        },
+        "heading": {
+          "padding-block-start": {
+            "value": "{rhc.space.100}",
+            "type": "spacing"
+          },
+          "font-size": {
+            "value": "{rhc.font-size.heading.level-4}",
+            "type": "fontSizes"
+          },
+          "font-weight": {
+            "value": "{rhc.font-weight.bold}",
+            "type": "fontWeights"
+          }
+        },
+        "horizontal": {
+          "background-color": {
+            "value": "{rhc.color.lintblauw.500}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{rhc.color.none}",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.foreground.onEmphasis}",
+            "type": "color"
+          },
+          "max-block-size": {
+            "value": "{rhc.size.2-lint}",
+            "type": "sizing"
+          },
+          "padding-block-end": {
+            "value": "0",
+            "type": "spacing"
+          },
+          "padding-block-start": {
+            "value": "0",
+            "type": "spacing"
+          },
+          "padding-inline-end": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "padding-inline-start": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "heading": {
+            "inline-size": {
+              "value": "200px",
+              "type": "sizing"
+            }
+          }
+        }
+      }
+    }
+  },
   "components/checkbox": {
     "utrecht": {
       "checkbox": {
@@ -6652,6 +6852,7 @@
       "components/breadcrumb",
       "components/button",
       "components/button-group",
+      "components/card",
       "components/checkbox",
       "components/checkbox-group",
       "components/counter-badge",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/design-tokens",
-  "version": "1.0.0-alpha.58",
+  "version": "1.0.0-alpha.59",
   "author": "Community for NL Design System",
   "description": "Example design tokens",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -33,5 +33,5 @@
     "style-dictionary": "3.9.2",
     "token-transformer": "0.0.33"
   },
-  "gitHead": "ee0298da9ffa03c878f814e141f3feb8ca271804"
+  "gitHead": "228f31253ba8eafecb5a2b463f95e8146688f378"
 }

package/src/generated/figma.tokens.json

@@ -4028,6 +4028,202 @@
         "type": "spacing"
       }
     },
+    "card-as-link": {
+      "background-color": {
+        "value": "#fff",
+        "type": "color"
+      },
+      "border-color": {
+        "value": "#CBD5E1",
+        "type": "color"
+      },
+      "border-radius": {
+        "value": "5px",
+        "type": "borderRadius"
+      },
+      "border-width": {
+        "value": "1px",
+        "type": "borderWidth"
+      },
+      "color": {
+        "value": "#154273",
+        "type": "color"
+      },
+      "column-gap": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "inline-size": {
+        "value": "328px",
+        "type": "sizing"
+      },
+      "icon": {
+        "color": {
+          "value": "#154273",
+          "type": "color"
+        },
+        "size": {
+          "value": "24px",
+          "type": "sizing"
+        }
+      },
+      "link": {
+        "color": {
+          "value": "#01689b",
+          "type": "color"
+        },
+        "text-decoration": {
+          "value": "underline",
+          "type": "textDecoration"
+        },
+        "active": {
+          "text-decoration": {
+            "value": "none",
+            "type": "textDecoration"
+          }
+        },
+        "hover": {
+          "text-decoration": {
+            "value": "none",
+            "type": "textDecoration"
+          }
+        },
+        "focus": {
+          "text-decoration": {
+            "value": "none",
+            "type": "textDecoration"
+          }
+        }
+      },
+      "metadata": {
+        "color": {
+          "value": "#154273",
+          "type": "color"
+        }
+      },
+      "padding-block-end": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "1rem",
+        "type": "spacing"
+      },
+      "row-gap": {
+        "value": "0.75rem",
+        "type": "spacing"
+      },
+      "active": {
+        "background-color": {
+          "value": "#F1F5F9",
+          "type": "color"
+        },
+        "text-decoration": {
+          "value": "underline",
+          "type": "textDecoration"
+        }
+      },
+      "hover": {
+        "background-color": {
+          "value": "#F8FAFC",
+          "type": "color"
+        },
+        "text-decoration": {
+          "value": "underline",
+          "type": "textDecoration"
+        }
+      },
+      "focus": {
+        "background-color": {
+          "value": "#dce3ea",
+          "type": "color"
+        },
+        "text-decoration": {
+          "value": "underline",
+          "type": "textDecoration"
+        }
+      },
+      "full-bleed": {
+        "background-color": {
+          "value": "#000",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "color": {
+          "value": "#fff",
+          "type": "color"
+        },
+        "opacity": {
+          "value": 0.5,
+          "type": "opacity"
+        }
+      },
+      "heading": {
+        "padding-block-start": {
+          "value": "0.5rem",
+          "type": "spacing"
+        },
+        "font-size": {
+          "value": "1.5rem",
+          "type": "fontSizes"
+        },
+        "font-weight": {
+          "value": 700,
+          "type": "fontWeights"
+        }
+      },
+      "horizontal": {
+        "background-color": {
+          "value": "#154273",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "color": {
+          "value": "#fff",
+          "type": "color"
+        },
+        "max-block-size": {
+          "value": "96px",
+          "type": "sizing"
+        },
+        "padding-block-end": {
+          "value": 0,
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": 0,
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "1rem",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "1rem",
+          "type": "spacing"
+        },
+        "heading": {
+          "inline-size": {
+            "value": "200px",
+            "type": "sizing"
+          }
+        }
+      }
+    },
     "accordion": {
       "button": {
         "font-family": {