@synergy-design-system/tokens 2.46.0 → 2.48.0

package/dist/themes/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.45.0
+ * @synergy-design-system/tokens version 2.47.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -7,35 +7,35 @@
 :root, .syn-sick2025-light {
   color-scheme: light;
 
-  --syn-alert-error-color-background: var(--syn-color-error-100);
-  --syn-alert-error-color-border: var(--syn-color-error-100);
+  --syn-alert-error-color-background: var(--syn-namur-error-color-background);
+  --syn-alert-error-color-border: var(--syn-namur-error-color-background);
   --syn-alert-error-color-icon: var(--syn-typography-color-text);
-  --syn-alert-error-color-indicator: var(--syn-color-error-600);
-  --syn-alert-informative-color-background: var(--syn-color-info-100);
-  --syn-alert-informative-color-border: var(--syn-color-info-100);
+  --syn-alert-error-color-indicator: var(--syn-namur-error-color);
+  --syn-alert-informative-color-background: var(--syn-namur-info-color-background);
+  --syn-alert-informative-color-border: var(--syn-namur-info-color-background);
   --syn-alert-informative-color-icon: var(--syn-typography-color-text);
-  --syn-alert-informative-color-indicator: var(--syn-color-info-400);
-  --syn-alert-neutral-color-background: #e6e1dc;
-  --syn-alert-neutral-color-border: #e6e1dc;
+  --syn-alert-informative-color-indicator: var(--syn-namur-info-color);
+  --syn-alert-neutral-color-background: var(--syn-namur-neutral-color-background);
+  --syn-alert-neutral-color-border: var(--syn-namur-neutral-color-background);
   --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
-  --syn-alert-neutral-color-indicator: #d5ccc5;
-  --syn-alert-success-color-background: var(--syn-color-success-100);
-  --syn-alert-success-color-border: var(--syn-color-success-100);
+  --syn-alert-neutral-color-indicator: var(--syn-namur-neutral-color);
+  --syn-alert-success-color-background: var(--syn-namur-success-color-background);
+  --syn-alert-success-color-border: var(--syn-namur-success-color-background);
   --syn-alert-success-color-icon: var(--syn-typography-color-text);
-  --syn-alert-success-color-indicator: var(--syn-color-success-800);
-  --syn-alert-warning-color-background: var(--syn-color-warning-100);
-  --syn-alert-warning-color-border: var(--syn-color-warning-100);
+  --syn-alert-success-color-indicator: var(--syn-namur-success-color);
+  --syn-alert-warning-color-background: var(--syn-namur-warning-color-background);
+  --syn-alert-warning-color-border: var(--syn-namur-warning-color-background);
   --syn-alert-warning-color-icon: var(--syn-typography-color-text);
-  --syn-alert-warning-color-indicator: var(--syn-color-warning-500);
-  --syn-badge-error-color-background: var(--syn-color-error-600);
-  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
-  --syn-badge-informative-color-background: #26c9ff;
+  --syn-alert-warning-color-indicator: var(--syn-namur-warning-color);
+  --syn-badge-error-color-background: var(--syn-namur-error-color);
+  --syn-badge-error-color-text: var(--syn-typography-color-text);
+  --syn-badge-informative-color-background: var(--syn-namur-info-color);
   --syn-badge-informative-color-text: var(--syn-typography-color-text);
-  --syn-badge-neutral-color-background: #d5ccc5;
+  --syn-badge-neutral-color-background: var(--syn-namur-neutral-color);
   --syn-badge-neutral-color-text: var(--syn-typography-color-text);
-  --syn-badge-success-color-background: var(--syn-color-success-800);
-  --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
-  --syn-badge-warning-color-background: var(--syn-color-warning-500);
+  --syn-badge-success-color-background: var(--syn-namur-success-color);
+  --syn-badge-success-color-text: var(--syn-typography-color-text);
+  --syn-badge-warning-color-background: var(--syn-namur-warning-color);
   --syn-badge-warning-color-text: var(--syn-typography-color-text);
   --syn-border-radius-circle: 9999px;
   --syn-border-radius-large: 8px;
@@ -50,21 +50,49 @@
   --syn-border-width-small: 1px; /** Small */
   --syn-border-width-x-large: 4px; /** X Large */
   --syn-breadcrumb-color: var(--syn-typography-color-text);
+  --syn-button-border-radius-large: var(--syn-border-radius-pill);
+  --syn-button-border-radius-medium: var(--syn-border-radius-pill);
+  --syn-button-border-radius-small: var(--syn-border-radius-pill);
+  --syn-button-color: var(--syn-interactive-emphasis-color);
+  --syn-button-color-active: var(--syn-interactive-emphasis-color-active);
+  --syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
+  --syn-button-filled-color-text: inherit;
+  --syn-button-filled-color-text-active: inherit;
+  --syn-button-filled-color-text-hover: inherit;
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-button-outline-color-active: var(--syn-interactive-emphasis-color-active);
+  --syn-button-outline-color-hover: var(--syn-interactive-emphasis-color-hover);
+  --syn-button-outline-color-text: var(--syn-typography-color-text);
+  --syn-button-outline-color-text-active: var(--syn-typography-color-text-inverted);
+  --syn-button-outline-color-text-hover: var(--syn-typography-color-text-inverted);
+  --syn-button-text-color-text: var(--syn-button-color);
+  --syn-button-text-color-text-active: var(--syn-button-color-active);
+  --syn-button-text-color-text-hover: var(--syn-button-color-hover);
   --syn-checkbox-border-radius: var(--syn-border-radius-small);
-  --syn-color-accent-50: #ffffff;
-  --syn-color-accent-100: #ffffff;
-  --syn-color-accent-200: #ffffff;
-  --syn-color-accent-300: #ffffff;
-  --syn-color-accent-400: #ffffff;
-  --syn-color-accent-500: #ffffff;
-  --syn-color-accent-600: #ffffff;
-  --syn-color-accent-700: #ffffff;
-  --syn-color-accent-800: #ffffff;
-  --syn-color-accent-900: #ffffff;
-  --syn-color-accent-950: #ffffff;
+  --syn-color-accent-50: #e9f8ed;
+  --syn-color-accent-100: #d2f0dc;
+  --syn-color-accent-200: #bbe8c8;
+  --syn-color-accent-300: #a5e1b9;
+  --syn-color-accent-400: #83d2a3;
+  --syn-color-accent-500: #4fb87c;
+  --syn-color-accent-600: #2d9c60;
+  --syn-color-accent-700: #1e7d4c;
+  --syn-color-accent-800: #18643e;
+  --syn-color-accent-900: #155033;
+  --syn-color-accent-950: #092518;
+  --syn-color-critical-50: #fffbec;
+  --syn-color-critical-100: #fff7d3;
+  --syn-color-critical-200: #ffeba5;
+  --syn-color-critical-300: #ffdb6d;
+  --syn-color-critical-400: #ffbf32;
+  --syn-color-critical-500: #ffa80a;
+  --syn-color-critical-600: #ff9100;
+  --syn-color-critical-700: #cc6b02;
+  --syn-color-critical-800: #a1520b;
+  --syn-color-critical-900: #82450c;
+  --syn-color-critical-950: #462104;
   --syn-color-error-50: #fff1f1;
   --syn-color-error-100: #ffe3e4;
   --syn-color-error-200: #ffcfd1;
@@ -170,6 +198,7 @@
   --syn-input-background-color-focus: var(--syn-input-background-color);
   --syn-input-background-color-hover: var(--syn-input-background-color);
   --syn-input-border-color: var(--syn-color-neutral-950);
+  --syn-input-border-color-active: var(--syn-color-primary-800);
   --syn-input-border-color-disabled: var(--syn-color-neutral-950);
   --syn-input-border-color-focus: var(--syn-color-primary-700);
   --syn-input-border-color-focus-error: var(--syn-color-error-600);
@@ -203,6 +232,7 @@
   --syn-input-icon-color: var(--syn-color-neutral-950);
   --syn-input-icon-color-hover: var(--syn-color-neutral-950);
   --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
+  --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-800);
   --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-700);
   --syn-input-label-color: var(--syn-color-neutral-950);
   --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -223,6 +253,7 @@
   --syn-input-spacing-medium: var(--syn-spacing-medium);
   --syn-input-spacing-small: var(--syn-spacing-small);
   --syn-input-width: var(--syn-border-width-small);
+  --syn-interactive-background-color-active: #e6e1dc;
   --syn-interactive-background-color-hover: #f2f0ed;
   --syn-interactive-emphasis-color: var(--syn-color-primary-700);
   --syn-interactive-emphasis-color-active: var(--syn-color-primary-1000);
@@ -248,6 +279,20 @@
   --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
   --syn-link-underline-outline: 25%;
   --syn-logo-color: var(--syn-color-primary-700);
+  --syn-namur-color-border: var(--syn-color-neutral-950);
+  --syn-namur-critical-color: var(--syn-color-critical-600);
+  --syn-namur-critical-color-background: var(--syn-color-critical-100);
+  --syn-namur-error-color: var(--syn-color-error-500);
+  --syn-namur-error-color-background: var(--syn-color-error-100);
+  --syn-namur-icon-color: var(--syn-color-neutral-950);
+  --syn-namur-info-color: var(--syn-color-info-400);
+  --syn-namur-info-color-background: var(--syn-color-info-100);
+  --syn-namur-neutral-color: #d5ccc5;
+  --syn-namur-neutral-color-background: #e6e1dc;
+  --syn-namur-success-color: var(--syn-color-success-500);
+  --syn-namur-success-color-background: var(--syn-color-success-100);
+  --syn-namur-warning-color: var(--syn-color-warning-500);
+  --syn-namur-warning-color-background: var(--syn-color-warning-100);
   --syn-opacity-50: 0.5; /** 50% */
   --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
   --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
@@ -348,9 +393,9 @@
   --syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-large: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-x-large: 600 24px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-2x-large: 600 32px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --syn-heading-3x-large: 600 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
 }

package/package.json

@@ -57,7 +57,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "2.46.0",
+  "version": "2.48.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "build:all": "dotenvx -q run pnpm build:_all",

package/src/figma-tokens/_docs.json

@@ -142,6 +142,16 @@
           "value": "The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.\n\nBy default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting .syn-toast-stack in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.",
           "type": "text"
         }
+      },
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change an alert’s size.",
+          "type": "text"
+        }
       }
     },
     "animated-image": {
@@ -3489,6 +3499,16 @@
           "type": "text"
         }
       },
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "In development use the size attribute of the form element e.g. syn-input to set the size of the inline syn-validate automatically.",
+          "type": "text"
+        }
+      },
       "live": {
         "title": {
           "value": "Live",

package/src/figma-variables/output/sick2018-dark.json

@@ -91,6 +91,16 @@
       }
     }
   },
+  "background": {
+    "color-1": {
+      "type": "color",
+      "value": "{color.neutral.50}"
+    },
+    "color-2": {
+      "type": "color",
+      "value": "{color.accent.100}"
+    }
+  },
   "badge": {
     "error": {
       "color-background": {
@@ -207,6 +217,50 @@
     }
   },
   "button": {
+    "border": {
+      "radius-large": {
+        "type": "sizing",
+        "value": "{input.border.radius-large}"
+      },
+      "radius-medium": {
+        "type": "sizing",
+        "value": "{input.border.radius-medium}"
+      },
+      "radius-small": {
+        "type": "sizing",
+        "value": "{input.border.radius-small}"
+      }
+    },
+    "color": {
+      "type": "color",
+      "value": "{interactive.emphasis.color}"
+    },
+    "color-active": {
+      "type": "color",
+      "value": "{interactive.emphasis.color-active}"
+    },
+    "color-disabled": {
+      "type": "color",
+      "value": "{color.neutral.600}"
+    },
+    "color-hover": {
+      "type": "color",
+      "value": "{interactive.emphasis.color-hover}"
+    },
+    "filled": {
+      "color-text": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-text-active": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-text-hover": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      }
+    },
     "font-size": {
       "large": {
         "type": "sizing",
@@ -220,6 +274,46 @@
         "type": "sizing",
         "value": "{font-size.small}"
       }
+    },
+    "outline": {
+      "color": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-active": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-hover": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-text": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-text-active": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-text-hover": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      }
+    },
+    "text": {
+      "color-text": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-text-active": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      },
+      "color-text-hover": {
+        "type": "color",
+        "value": "rgba(255, 255, 255, 0.00)"
+      }
     }
   },
   "checkbox": {
@@ -277,6 +371,52 @@
         "value": "#fffbea"
       }
     },
+    "critical": {
+      "50": {
+        "type": "color",
+        "value": "#481700"
+      },
+      "100": {
+        "type": "color",
+        "value": "#7c310b"
+      },
+      "200": {
+        "type": "color",
+        "value": "#983b08"
+      },
+      "300": {
+        "type": "color",
+        "value": "#bb4d02"
+      },
+      "400": {
+        "type": "color",
+        "value": "#e27200"
+      },
+      "500": {
+        "type": "color",
+        "value": "#f39200"
+      },
+      "600": {
+        "type": "color",
+        "value": "#ffbd1b"
+      },
+      "700": {
+        "type": "color",
+        "value": "#ffd246"
+      },
+      "800": {
+        "type": "color",
+        "value": "#ffe685"
+      },
+      "900": {
+        "type": "color",
+        "value": "#fff2c5"
+      },
+      "950": {
+        "type": "color",
+        "value": "#fffbea"
+      }
+    },
     "error": {
       "50": {
         "type": "color",
@@ -646,6 +786,22 @@
     }
   },
   "font-size": {
+    "0x-large": {
+      "type": "sizing",
+      "value": "22px"
+    },
+    "1_5x-large": {
+      "type": "sizing",
+      "value": "30px"
+    },
+    "1x-large": {
+      "type": "sizing",
+      "value": "28px"
+    },
+    "2_5x-large": {
+      "type": "sizing",
+      "value": "34px"
+    },
     "2x-large": {
       "type": "sizing",
       "value": "32px"
@@ -670,6 +826,10 @@
       "type": "sizing",
       "value": "16px"
     },
+    "medium-large": {
+      "type": "sizing",
+      "value": "18px"
+    },
     "small": {
       "type": "sizing",
       "value": "14px"
@@ -996,7 +1156,7 @@
     "background": {
       "color-active": {
         "type": "color",
-        "value": "{color.neutral.200}"
+        "value": "{color.neutral.300}"
       },
       "color-hover": {
         "type": "color",
@@ -1123,6 +1283,78 @@
       "value": "{color.primary.400}"
     }
   },
+  "namur": {
+    "color-border": {
+      "type": "color",
+      "value": "{color.neutral.50}"
+    },
+    "critical": {
+      "color": {
+        "type": "color",
+        "value": "{color.critical.600}"
+      },
+      "color-background": {
+        "type": "color",
+        "value": "{color.critical.100}"
+      }
+    },
+    "error": {
+      "color": {
+        "type": "color",
+        "value": "{color.error.500}"
+      },
+      "color-background": {
+        "type": "color",
+        "value": "{color.error.100}"
+      }
+    },
+    "icon": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.50}"
+      }
+    },
+    "info": {
+      "color": {
+        "type": "color",
+        "value": "{color.info.500}"
+      },
+      "color-background": {
+        "type": "color",
+        "value": "{color.info.50}"
+      }
+    },
+    "neutral": {
+      "color": {
+        "type": "color",
+        "value": "{color.neutral.600}"
+      },
+      "color-background": {
+        "type": "color",
+        "value": "{color.neutral.800}"
+      }
+    },
+    "success": {
+      "color": {
+        "type": "color",
+        "value": "{color.success.500}"
+      },
+      "color-background": {
+        "type": "color",
+        "value": "{color.success.100}"
+      }
+    },
+    "warning": {
+      "color": {
+        "type": "color",
+        "value": "{color.warning.600}"
+      },
+      "color-background": {
+        "type": "color",
+        "value": "{color.warning.100}"
+      }
+    }
+  },
   "opacity": {
     "50": {
       "description": "50%",
@@ -1527,6 +1759,116 @@
         "type": "color",
         "value": "{color.neutral.200}"
       }
+    },
+    "heading": {
+      "2x-large": {
+        "font-size": {
+          "type": "sizing",
+          "value": "{font-size.2x-large}"
+        },
+        "font-weight": {
+          "type": "fontWeights",
+          "value": "{font-weight.bold}"
+        },
+        "letter-spacing": {
+          "type": "letterSpacing",
+          "value": "0px"
+        },
+        "line-height": {
+          "type": "lineHeights",
+          "value": "120%"
+        }
+      },
+      "3x-large": {
+        "font-size": {
+          "type": "sizing",
+          "value": "{font-size.3x-large}"
+        },
+        "font-weight": {
+          "type": "fontWeights",
+          "value": "{font-weight.bold}"
+        },
+        "letter-spacing": {
+          "type": "letterSpacing",
+          "value": "0px"
+        },
+        "line-height": {
+          "type": "lineHeights",
+          "value": "120%"
+        }
+      },
+      "4x-large": {
+        "font-size": {
+          "type": "sizing",
+          "value": "{font-size.4x-large}"
+        },
+        "font-weight": {
+          "type": "fontWeights",
+          "value": "{font-weight.bold}"
+        },
+        "letter-spacing": {
+          "type": "letterSpacing",
+          "value": "0px"
+        },
+        "line-height": {
+          "type": "lineHeights",
+          "value": "120%"
+        }
+      },
+      "large": {
+        "font-size": {
+          "type": "sizing",
+          "value": "{font-size.large}"
+        },
+        "font-weight": {
+          "type": "fontWeights",
+          "value": "{font-weight.bold}"
+        },
+        "letter-spacing": {
+          "type": "letterSpacing",
+          "value": "0px"
+        },
+        "line-height": {
+          "type": "lineHeights",
+          "value": "140%"
+        }
+      },
+      "medium": {
+        "font-size": {
+          "type": "sizing",
+          "value": "{font-size.medium}"
+        },
+        "font-weight": {
+          "type": "fontWeights",
+          "value": "{font-weight.bold}"
+        },
+        "letter-spacing": {
+          "type": "letterSpacing",
+          "value": "0px"
+        },
+        "line-height": {
+          "type": "lineHeights",
+          "value": "140%"
+        }
+      },
+      "x-large": {
+        "font-size": {
+          "type": "sizing",
+          "value": "{font-size.x-large}"
+        },
+        "font-weight": {
+          "type": "fontWeights",
+          "value": "{font-weight.bold}"
+        },
+        "letter-spacing": {
+          "type": "letterSpacing",
+          "value": "0px"
+        },
+        "line-height": {
+          "type": "lineHeights",
+          "value": "120%"
+        }
+      }
     }
   },
   "z-index": {
@@ -1669,23 +2011,27 @@
   "heading": {
     "large": {
       "type": "typography",
-      "value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
+      "value": "{typography.heading.large.font-weight} {typography.heading.large.font-size}/1.4 {font.sans}"
     },
     "x-large": {
       "type": "typography",
-      "value": "{font-weight.bold} {font-size.x-large}/1.2 {font.sans}"
+      "value": "{typography.heading.x-large.font-weight} {typography.heading.x-large.font-size}/1.2 {font.sans}"
     },
     "2x-large": {
       "type": "typography",
-      "value": "{font-weight.bold} {font-size.2x-large}/1.2 {font.sans}"
+      "value": "{typography.heading.2x-large.font-weight} {typography.heading.2x-large.font-size}/1.2 {font.sans}"
     },
     "3x-large": {
       "type": "typography",
-      "value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
+      "value": "{typography.heading.3x-large.font-weight} {typography.heading.3x-large.font-size}/1.2 {font.sans}"
+    },
+    "medium": {
+      "type": "typography",
+      "value": "{typography.heading.medium.font-weight} {typography.heading.medium.font-size}/1.4 {font.sans}"
     },
     "4x-large": {
       "type": "typography",
-      "value": "{font-weight.bold} {font-size.4x-large}/1.2 {font.sans}"
+      "value": "{typography.heading.4x-large.font-weight} {typography.heading.4x-large.font-size}/1.2 {font.sans}"
     }
   }
 }