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

package/dist/_variables.scss

@@ -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-line-height: 150%;
 $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/dist/index.css

@@ -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-theme {
@@ -257,6 +257,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/dist/index.d.ts

@@ -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
  */
 
 export const utrechtActionActivateCursor : string;
@@ -881,6 +881,48 @@ export const rhcDotBadgeSize : string;
 export const rhcCheckboxGroupPaddingBlockEnd : string;
 export const rhcCheckboxGroupPaddingBlockStart : string;
 export const rhcCheckboxGroupRowGap : string;
+export const rhcCardAsLinkBackgroundColor : string;
+export const rhcCardAsLinkBorderColor : string;
+export const rhcCardAsLinkBorderRadius : string;
+export const rhcCardAsLinkBorderWidth : string;
+export const rhcCardAsLinkColor : string;
+export const rhcCardAsLinkColumnGap : string;
+export const rhcCardAsLinkInlineSize : string;
+export const rhcCardAsLinkIconColor : string;
+export const rhcCardAsLinkIconSize : string;
+export const rhcCardAsLinkLinkColor : string;
+export const rhcCardAsLinkLinkTextDecoration : string;
+export const rhcCardAsLinkLinkActiveTextDecoration : string;
+export const rhcCardAsLinkLinkHoverTextDecoration : string;
+export const rhcCardAsLinkLinkFocusTextDecoration : string;
+export const rhcCardAsLinkMetadataColor : string;
+export const rhcCardAsLinkPaddingBlockEnd : string;
+export const rhcCardAsLinkPaddingBlockStart : string;
+export const rhcCardAsLinkPaddingInlineEnd : string;
+export const rhcCardAsLinkPaddingInlineStart : string;
+export const rhcCardAsLinkRowGap : string;
+export const rhcCardAsLinkActiveBackgroundColor : string;
+export const rhcCardAsLinkActiveTextDecoration : string;
+export const rhcCardAsLinkHoverBackgroundColor : string;
+export const rhcCardAsLinkHoverTextDecoration : string;
+export const rhcCardAsLinkFocusBackgroundColor : string;
+export const rhcCardAsLinkFocusTextDecoration : string;
+export const rhcCardAsLinkFullBleedBackgroundColor : string;
+export const rhcCardAsLinkFullBleedBorderColor : string;
+export const rhcCardAsLinkFullBleedColor : string;
+export const rhcCardAsLinkFullBleedOpacity : number;
+export const rhcCardAsLinkHeadingPaddingBlockStart : string;
+export const rhcCardAsLinkHeadingFontSize : string;
+export const rhcCardAsLinkHeadingFontWeight : number;
+export const rhcCardAsLinkHorizontalBackgroundColor : string;
+export const rhcCardAsLinkHorizontalBorderColor : string;
+export const rhcCardAsLinkHorizontalColor : string;
+export const rhcCardAsLinkHorizontalMaxBlockSize : string;
+export const rhcCardAsLinkHorizontalPaddingBlockEnd : number;
+export const rhcCardAsLinkHorizontalPaddingBlockStart : number;
+export const rhcCardAsLinkHorizontalPaddingInlineEnd : string;
+export const rhcCardAsLinkHorizontalPaddingInlineStart : string;
+export const rhcCardAsLinkHorizontalHeadingInlineSize : string;
 export const rhcAccordionButtonFontFamily : string;
 export const rhcAccordionButtonFontSize : string;
 export const rhcAccordionButtonFontWeight : number;

package/dist/index.js

@@ -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
  */
 
 export const utrechtActionActivateCursor = "pointer";
@@ -880,6 +880,48 @@ export const rhcDotBadgeSize = "12px";
 export const rhcCheckboxGroupPaddingBlockEnd = "0.5rem";
 export const rhcCheckboxGroupPaddingBlockStart = "0.5rem";
 export const rhcCheckboxGroupRowGap = "1rem";
+export const rhcCardAsLinkBackgroundColor = "#fff";
+export const rhcCardAsLinkBorderColor = "#CBD5E1";
+export const rhcCardAsLinkBorderRadius = "5px";
+export const rhcCardAsLinkBorderWidth = "1px";
+export const rhcCardAsLinkColor = "#154273";
+export const rhcCardAsLinkColumnGap = "1rem";
+export const rhcCardAsLinkInlineSize = "328px";
+export const rhcCardAsLinkIconColor = "#154273";
+export const rhcCardAsLinkIconSize = "24px";
+export const rhcCardAsLinkLinkColor = "#01689b";
+export const rhcCardAsLinkLinkTextDecoration = "underline";
+export const rhcCardAsLinkLinkActiveTextDecoration = "none";
+export const rhcCardAsLinkLinkHoverTextDecoration = "none";
+export const rhcCardAsLinkLinkFocusTextDecoration = "none";
+export const rhcCardAsLinkMetadataColor = "#154273";
+export const rhcCardAsLinkPaddingBlockEnd = "1rem";
+export const rhcCardAsLinkPaddingBlockStart = "1rem";
+export const rhcCardAsLinkPaddingInlineEnd = "1rem";
+export const rhcCardAsLinkPaddingInlineStart = "1rem";
+export const rhcCardAsLinkRowGap = "0.75rem";
+export const rhcCardAsLinkActiveBackgroundColor = "#F1F5F9";
+export const rhcCardAsLinkActiveTextDecoration = "underline";
+export const rhcCardAsLinkHoverBackgroundColor = "#F8FAFC";
+export const rhcCardAsLinkHoverTextDecoration = "underline";
+export const rhcCardAsLinkFocusBackgroundColor = "#dce3ea";
+export const rhcCardAsLinkFocusTextDecoration = "underline";
+export const rhcCardAsLinkFullBleedBackgroundColor = "#000";
+export const rhcCardAsLinkFullBleedBorderColor = "transparent";
+export const rhcCardAsLinkFullBleedColor = "#fff";
+export const rhcCardAsLinkFullBleedOpacity = 0.5;
+export const rhcCardAsLinkHeadingPaddingBlockStart = "0.5rem";
+export const rhcCardAsLinkHeadingFontSize = "1.5rem";
+export const rhcCardAsLinkHeadingFontWeight = 700;
+export const rhcCardAsLinkHorizontalBackgroundColor = "#154273";
+export const rhcCardAsLinkHorizontalBorderColor = "transparent";
+export const rhcCardAsLinkHorizontalColor = "#fff";
+export const rhcCardAsLinkHorizontalMaxBlockSize = "96px";
+export const rhcCardAsLinkHorizontalPaddingBlockEnd = 0;
+export const rhcCardAsLinkHorizontalPaddingBlockStart = 0;
+export const rhcCardAsLinkHorizontalPaddingInlineEnd = "1rem";
+export const rhcCardAsLinkHorizontalPaddingInlineStart = "1rem";
+export const rhcCardAsLinkHorizontalHeadingInlineSize = "200px";
 export const rhcAccordionButtonFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
 export const rhcAccordionButtonFontSize = "1.25rem";
 export const rhcAccordionButtonFontWeight = 400;

package/dist/index.json

@@ -876,6 +876,48 @@
   "rhcCheckboxGroupPaddingBlockEnd": "0.5rem",
   "rhcCheckboxGroupPaddingBlockStart": "0.5rem",
   "rhcCheckboxGroupRowGap": "1rem",
+  "rhcCardAsLinkBackgroundColor": "#fff",
+  "rhcCardAsLinkBorderColor": "#CBD5E1",
+  "rhcCardAsLinkBorderRadius": "5px",
+  "rhcCardAsLinkBorderWidth": "1px",
+  "rhcCardAsLinkColor": "#154273",
+  "rhcCardAsLinkColumnGap": "1rem",
+  "rhcCardAsLinkInlineSize": "328px",
+  "rhcCardAsLinkIconColor": "#154273",
+  "rhcCardAsLinkIconSize": "24px",
+  "rhcCardAsLinkLinkColor": "#01689b",
+  "rhcCardAsLinkLinkTextDecoration": "underline",
+  "rhcCardAsLinkLinkActiveTextDecoration": "none",
+  "rhcCardAsLinkLinkHoverTextDecoration": "none",
+  "rhcCardAsLinkLinkFocusTextDecoration": "none",
+  "rhcCardAsLinkMetadataColor": "#154273",
+  "rhcCardAsLinkPaddingBlockEnd": "1rem",
+  "rhcCardAsLinkPaddingBlockStart": "1rem",
+  "rhcCardAsLinkPaddingInlineEnd": "1rem",
+  "rhcCardAsLinkPaddingInlineStart": "1rem",
+  "rhcCardAsLinkRowGap": "0.75rem",
+  "rhcCardAsLinkActiveBackgroundColor": "#F1F5F9",
+  "rhcCardAsLinkActiveTextDecoration": "underline",
+  "rhcCardAsLinkHoverBackgroundColor": "#F8FAFC",
+  "rhcCardAsLinkHoverTextDecoration": "underline",
+  "rhcCardAsLinkFocusBackgroundColor": "#dce3ea",
+  "rhcCardAsLinkFocusTextDecoration": "underline",
+  "rhcCardAsLinkFullBleedBackgroundColor": "#000",
+  "rhcCardAsLinkFullBleedBorderColor": "transparent",
+  "rhcCardAsLinkFullBleedColor": "#fff",
+  "rhcCardAsLinkFullBleedOpacity": 0.5,
+  "rhcCardAsLinkHeadingPaddingBlockStart": "0.5rem",
+  "rhcCardAsLinkHeadingFontSize": "1.5rem",
+  "rhcCardAsLinkHeadingFontWeight": 700,
+  "rhcCardAsLinkHorizontalBackgroundColor": "#154273",
+  "rhcCardAsLinkHorizontalBorderColor": "transparent",
+  "rhcCardAsLinkHorizontalColor": "#fff",
+  "rhcCardAsLinkHorizontalMaxBlockSize": "96px",
+  "rhcCardAsLinkHorizontalPaddingBlockEnd": 0,
+  "rhcCardAsLinkHorizontalPaddingBlockStart": 0,
+  "rhcCardAsLinkHorizontalPaddingInlineEnd": "1rem",
+  "rhcCardAsLinkHorizontalPaddingInlineStart": "1rem",
+  "rhcCardAsLinkHorizontalHeadingInlineSize": "200px",
   "rhcAccordionButtonFontFamily": "Fira Sans, Arial, Verdana, sans-serif",
   "rhcAccordionButtonFontSize": "1.25rem",
   "rhcAccordionButtonFontWeight": 400,

package/dist/index.tokens.json

@@ -1378,6 +1378,76 @@
       "padding-block-start": "0.5rem",
       "row-gap": "1rem"
     },
+    "card-as-link": {
+      "background-color": "#fff",
+      "border-color": "#CBD5E1",
+      "border-radius": "5px",
+      "border-width": "1px",
+      "color": "#154273",
+      "column-gap": "1rem",
+      "inline-size": "328px",
+      "icon": {
+        "color": "#154273",
+        "size": "24px"
+      },
+      "link": {
+        "color": "#01689b",
+        "text-decoration": "underline",
+        "active": {
+          "text-decoration": "none"
+        },
+        "hover": {
+          "text-decoration": "none"
+        },
+        "focus": {
+          "text-decoration": "none"
+        }
+      },
+      "metadata": {
+        "color": "#154273"
+      },
+      "padding-block-end": "1rem",
+      "padding-block-start": "1rem",
+      "padding-inline-end": "1rem",
+      "padding-inline-start": "1rem",
+      "row-gap": "0.75rem",
+      "active": {
+        "background-color": "#F1F5F9",
+        "text-decoration": "underline"
+      },
+      "hover": {
+        "background-color": "#F8FAFC",
+        "text-decoration": "underline"
+      },
+      "focus": {
+        "background-color": "#dce3ea",
+        "text-decoration": "underline"
+      },
+      "full-bleed": {
+        "background-color": "#000",
+        "border-color": "transparent",
+        "color": "#fff",
+        "opacity": 0.5
+      },
+      "heading": {
+        "padding-block-start": "0.5rem",
+        "font-size": "1.5rem",
+        "font-weight": 700
+      },
+      "horizontal": {
+        "background-color": "#154273",
+        "border-color": "transparent",
+        "color": "#fff",
+        "max-block-size": "96px",
+        "padding-block-end": 0,
+        "padding-block-start": 0,
+        "padding-inline-end": "1rem",
+        "padding-inline-start": "1rem",
+        "heading": {
+          "inline-size": "200px"
+        }
+      }
+    },
     "accordion": {
       "button": {
         "font-family": "Fira Sans, Arial, Verdana, sans-serif",

package/dist/root.css

@@ -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
  */
 
 :root {
@@ -257,6 +257,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/dist/tokens.d.ts

@@ -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
  */
 
 export default tokens;
@@ -1401,6 +1401,76 @@ declare const tokens: {
       "padding-block-start": DesignToken,
       "row-gap": DesignToken
     },
+    "card-as-link": {
+      "background-color": DesignToken,
+      "border-color": DesignToken,
+      "border-radius": DesignToken,
+      "border-width": DesignToken,
+      "color": DesignToken,
+      "column-gap": DesignToken,
+      "inline-size": DesignToken,
+      "icon": {
+        "color": DesignToken,
+        "size": DesignToken
+      },
+      "link": {
+        "color": DesignToken,
+        "text-decoration": DesignToken,
+        "active": {
+          "text-decoration": DesignToken
+        },
+        "hover": {
+          "text-decoration": DesignToken
+        },
+        "focus": {
+          "text-decoration": DesignToken
+        }
+      },
+      "metadata": {
+        "color": DesignToken
+      },
+      "padding-block-end": DesignToken,
+      "padding-block-start": DesignToken,
+      "padding-inline-end": DesignToken,
+      "padding-inline-start": DesignToken,
+      "row-gap": DesignToken,
+      "active": {
+        "background-color": DesignToken,
+        "text-decoration": DesignToken
+      },
+      "hover": {
+        "background-color": DesignToken,
+        "text-decoration": DesignToken
+      },
+      "focus": {
+        "background-color": DesignToken,
+        "text-decoration": DesignToken
+      },
+      "full-bleed": {
+        "background-color": DesignToken,
+        "border-color": DesignToken,
+        "color": DesignToken,
+        "opacity": DesignToken
+      },
+      "heading": {
+        "padding-block-start": DesignToken,
+        "font-size": DesignToken,
+        "font-weight": DesignToken
+      },
+      "horizontal": {
+        "background-color": DesignToken,
+        "border-color": DesignToken,
+        "color": DesignToken,
+        "max-block-size": DesignToken,
+        "padding-block-end": DesignToken,
+        "padding-block-start": DesignToken,
+        "padding-inline-end": DesignToken,
+        "padding-inline-start": DesignToken,
+        "heading": {
+          "inline-size": DesignToken
+        }
+      }
+    },
     "accordion": {
       "button": {
         "font-family": DesignToken,