@discourser/design-system 0.22.3 → 0.23.0

package/src/languages/material3.language.ts

@@ -25,7 +25,7 @@ export const material3Language: DesignLanguageContract = {
       90: '#B2F65F',
       95: '#D2FF9B',
       99: '#F9FFE9',
-      100: '#FFFFFF'
+      100: '#FFFFFF',
     },
     secondary: {
       0: '#000000',
@@ -40,7 +40,7 @@ export const material3Language: DesignLanguageContract = {
       90: '#D7E9BB',
       95: '#E5F7C9',
       99: '#F9FFE9',
-      100: '#FFFFFF'
+      100: '#FFFFFF',
     },
     tertiary: {
       0: '#000000',
@@ -55,7 +55,7 @@ export const material3Language: DesignLanguageContract = {
       90: '#A1F1EB',
       95: '#B0FFF9',
       99: '#F2FFFD',
-      100: '#FFFFFF'
+      100: '#FFFFFF',
     },
     neutral: {
       0: '#000000',
@@ -70,7 +70,7 @@ export const material3Language: DesignLanguageContract = {
       90: '#E3E3DB',
       95: '#F2F1E9',
       99: '#FDFCF5',
-      100: '#FFFFFF'
+      100: '#FFFFFF',
     },
     neutralVariant: {
       0: '#000000',
@@ -85,7 +85,7 @@ export const material3Language: DesignLanguageContract = {
       90: '#E1E4D5',
       95: '#EFF2E3',
       99: '#FBFEEE',
-      100: '#FFFFFF'
+      100: '#FFFFFF',
     },
     error: {
       0: '#000000',
@@ -100,8 +100,8 @@ export const material3Language: DesignLanguageContract = {
       90: '#F9DEDC',
       95: '#FCEEEE',
       99: '#FFFBF9',
-      100: '#FFFFFF'
-    }
+      100: '#FFFFFF',
+    },
   },
 
   semantic: {
@@ -148,7 +148,7 @@ export const material3Language: DesignLanguageContract = {
     onBackground: '#1A1C16',
 
     scrim: '#000000',
-    shadow: '#000000'
+    shadow: '#000000',
   },
 
   // Dark theme semantic colors (for reference/dark mode implementation)
@@ -195,14 +195,14 @@ export const material3Language: DesignLanguageContract = {
     onBackground: '#E2E3D8',
 
     scrim: '#000000',
-    shadow: '#000000'
+    shadow: '#000000',
   },
 
   typography: {
     fonts: {
       display: '"Fraunces", Georgia, serif',
       body: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      mono: '"JetBrains Mono", "Fira Code", Consolas, monospace'
+      mono: '"JetBrains Mono", "Fira Code", Consolas, monospace',
     },
     scale: {
       displayLarge: {
@@ -210,119 +210,124 @@ export const material3Language: DesignLanguageContract = {
         lineHeight: '64px',
         fontWeight: '400',
         letterSpacing: '-0.25px',
-        fontFamily: 'display'
+        fontFamily: 'display',
+        fontVariationSettings: "'SOFT' 0, 'WONK' 1",
       },
       displayMedium: {
         fontSize: '45px',
         lineHeight: '52px',
         fontWeight: '400',
         letterSpacing: '0px',
-        fontFamily: 'display'
+        fontFamily: 'display',
       },
       displaySmall: {
         fontSize: '36px',
         lineHeight: '44px',
         fontWeight: '400',
         letterSpacing: '0px',
-        fontFamily: 'display'
+        fontFamily: 'display',
       },
       headlineLarge: {
         fontSize: '32px',
         lineHeight: '40px',
         fontWeight: '400',
         letterSpacing: '0px',
-        fontFamily: 'display'
+        fontFamily: 'display',
       },
       headlineMedium: {
         fontSize: '28px',
         lineHeight: '36px',
         fontWeight: '400',
         letterSpacing: '0px',
-        fontFamily: 'display'
+        fontFamily: 'display',
+        fontVariationSettings: "'SOFT' 0, 'WONK' 1",
       },
       headlineSmall: {
         fontSize: '24px',
         lineHeight: '32px',
         fontWeight: '400',
         letterSpacing: '0px',
-        fontFamily: 'display'
+        fontFamily: 'display',
       },
       titleLarge: {
         fontSize: '22px',
         lineHeight: '28px',
         fontWeight: '500',
         letterSpacing: '0px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
       titleMedium: {
         fontSize: '16px',
         lineHeight: '24px',
         fontWeight: '500',
         letterSpacing: '0.15px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
       titleSmall: {
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: '500',
         letterSpacing: '0.1px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
+      // Custom override: bodyLarge bumped to 18px/28px (was M3 default 16px/24px)
+      // Decision date: 2026-03-24
       bodyLarge: {
-        fontSize: '16px',
-        lineHeight: '24px',
+        fontSize: '18px',
+        lineHeight: '28px',
         fontWeight: '400',
         letterSpacing: '0.5px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
       bodyMedium: {
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: '400',
         letterSpacing: '0.25px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
       bodySmall: {
         fontSize: '12px',
         lineHeight: '16px',
         fontWeight: '400',
         letterSpacing: '0.4px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
       labelLarge: {
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: '500',
         letterSpacing: '0.1px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
       labelMedium: {
         fontSize: '12px',
         lineHeight: '16px',
         fontWeight: '500',
         letterSpacing: '0.5px',
-        fontFamily: 'body'
+        fontFamily: 'body',
       },
       labelSmall: {
         fontSize: '11px',
         lineHeight: '16px',
         fontWeight: '500',
         letterSpacing: '0.5px',
-        fontFamily: 'body'
-      }
-    }
+        fontFamily: 'body',
+      },
+    },
   },
 
   spacing: {
     none: '0px',
     xxs: '2px',
     xs: '4px',
+    '2xs': '12px',
     sm: '8px',
     md: '16px',
     lg: '24px',
     xl: '32px',
     xxl: '48px',
-    xxxl: '64px'
+    xxxl: '64px',
   },
 
   shape: {
@@ -333,21 +338,26 @@ export const material3Language: DesignLanguageContract = {
       medium: '12px',
       large: '16px',
       extraLarge: '28px',
-      full: '9999px'
+      full: '9999px',
     },
-    style: 'rounded'
+    style: 'rounded',
   },
 
   elevation: {
     levels: {
       level0: 'none',
-      level1: '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
-      level2: '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
-      level3: '0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3)',
-      level4: '0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)',
-      level5: '0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3)'
+      level1:
+        '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
+      level2:
+        '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
+      level3:
+        '0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3)',
+      level4:
+        '0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)',
+      level5:
+        '0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3)',
     },
-    style: 'shadow'
+    style: 'shadow',
   },
 
   motion: {
@@ -356,7 +366,7 @@ export const material3Language: DesignLanguageContract = {
       fast: '100ms',
       normal: '200ms',
       slow: '300ms',
-      slower: '500ms'
+      slower: '500ms',
     },
     easings: {
       standard: 'cubic-bezier(0.2, 0, 0, 1)',
@@ -364,16 +374,16 @@ export const material3Language: DesignLanguageContract = {
       standardAccelerate: 'cubic-bezier(0.3, 0, 1, 1)',
       emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
       emphasizedDecelerate: 'cubic-bezier(0.05, 0.7, 0.1, 1)',
-      emphasizedAccelerate: 'cubic-bezier(0.3, 0, 0.8, 0.15)'
+      emphasizedAccelerate: 'cubic-bezier(0.3, 0, 0.8, 0.15)',
     },
-    style: 'expressive'
+    style: 'expressive',
   },
 
   border: {
     widths: {
       thin: '1px',
       medium: '2px',
-      thick: '4px'
-    }
-  }
-};
+      thick: '4px',
+    },
+  },
+};

package/src/languages/transform.ts

@@ -89,6 +89,9 @@ function transformTextStyles(language: DesignLanguageContract) {
           lineHeight: style.lineHeight,
           fontWeight: style.fontWeight,
           letterSpacing: style.letterSpacing,
+          ...(style.fontVariationSettings
+            ? { fontVariationSettings: style.fontVariationSettings }
+            : {}),
         },
       },
     ]),

package/src/stories/foundations/Typography.mdx

@@ -164,11 +164,14 @@ Titles are for medium-emphasis text that remains relatively short. Use titles fo
 
 Body styles are used for longer passages of text in your app.
 
+> **Note:** `bodyLarge` is a custom override from the M3 default (16px → 18px).
+> This provides better readability for primary content at Discourser's reading densities.
+
 <TypeSpecimen
   styleName="bodyLarge"
   name="Body Large"
-  fontSize="16px"
-  lineHeight="24px"
+  fontSize="18px"
+  lineHeight="28px"
   fontWeight="400"
   letterSpacing="0.5px"
   fontFamily="body"