@furystack/shades-common-components 12.2.0 → 12.3.0

package/src/components/typography.tsx

@@ -3,8 +3,8 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteMainColors } from '../services/palette-css-vars.js'
 import type { Palette } from '../services/theme-provider-service.js'
-import { Icon } from './icons/icon.js'
 import { clipboard } from './icons/icon-definitions.js'
+import { Icon } from './icons/icon.js'
 
 /**
  * Typography variant determines semantic HTML tag and default styles.
@@ -50,74 +50,85 @@ type VariantDef = {
   lineHeight: string
   letterSpacing: string
   textTransform?: string
-  scale?: string
+  marginTop?: string
+  marginBottom?: string
 }
 
 const variantDefs: Record<TypographyVariant, VariantDef> = {
   h1: {
-    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontSize: cssVariableTheme.typography.fontSize.xxxxl,
     fontWeight: cssVariableTheme.typography.fontWeight.bold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.tight,
-    scale: '2',
+    marginBottom: '0.3em',
   },
   h2: {
-    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontSize: cssVariableTheme.typography.fontSize.xxxl,
     fontWeight: cssVariableTheme.typography.fontWeight.bold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.dense,
-    scale: '1.6',
+    marginTop: '1.5em',
+    marginBottom: '0.3em',
   },
   h3: {
-    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontSize: cssVariableTheme.typography.fontSize.xxl,
     fontWeight: cssVariableTheme.typography.fontWeight.semibold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
-    scale: '1.3',
+    marginTop: '1.25em',
+    marginBottom: '0.25em',
   },
   h4: {
-    fontSize: cssVariableTheme.typography.fontSize.lg,
+    fontSize: cssVariableTheme.typography.fontSize.xl,
     fontWeight: cssVariableTheme.typography.fontWeight.semibold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
-    scale: '1.15',
+    marginTop: '1em',
+    marginBottom: '0.25em',
   },
   h5: {
     fontSize: cssVariableTheme.typography.fontSize.lg,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
+    marginTop: '0.75em',
+    marginBottom: '0.35em',
   },
   h6: {
     fontSize: cssVariableTheme.typography.fontSize.md,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
-    scale: '1.1',
+    marginTop: '0.5em',
+    marginBottom: '0.2em',
   },
   subtitle1: {
     fontSize: cssVariableTheme.typography.fontSize.md,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    marginBottom: '0.35em',
   },
   subtitle2: {
     fontSize: cssVariableTheme.typography.fontSize.sm,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: '0.1px',
+    marginBottom: '0.25em',
   },
   body1: {
     fontSize: cssVariableTheme.typography.fontSize.md,
     fontWeight: cssVariableTheme.typography.fontWeight.normal,
     lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    marginBottom: '0.75em',
   },
   body2: {
     fontSize: cssVariableTheme.typography.fontSize.sm,
     fontWeight: cssVariableTheme.typography.fontWeight.normal,
     lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    marginBottom: '0.5em',
   },
   caption: {
     fontSize: cssVariableTheme.typography.fontSize.xs,
@@ -131,6 +142,7 @@ const variantDefs: Record<TypographyVariant, VariantDef> = {
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.widest,
     textTransform: 'uppercase',
+    marginBottom: '0.5em',
   },
 }
 
@@ -146,10 +158,11 @@ const buildVariantCssRules = (): Record<string, Record<string, string>> => {
     if (def.textTransform) {
       rule.textTransform = def.textTransform
     }
-    if (def.scale && def.scale !== '1') {
-      rule.transformOrigin = 'left top'
-      rule.transform = `scale(${def.scale})`
-      rule.marginBottom = `calc((${def.scale} - 1) * 1em)`
+    if (def.marginTop) {
+      rule.marginTop = def.marginTop
+    }
+    if (def.marginBottom) {
+      rule.marginBottom = def.marginBottom
     }
     rules[`&[data-variant="${variant}"]`] = rule
   }

package/src/services/css-variable-theme.spec.ts

@@ -59,6 +59,9 @@ describe('css-variable-theme', () => {
       expect(cssVariableTheme.typography.fontFamily).toBe('var(--shades-theme-typography-font-family)')
       expect(cssVariableTheme.typography.fontSize.xs).toBe('var(--shades-theme-typography-font-size-xs)')
       expect(cssVariableTheme.typography.fontSize.md).toBe('var(--shades-theme-typography-font-size-md)')
+      expect(cssVariableTheme.typography.fontSize.xxl).toBe('var(--shades-theme-typography-font-size-xxl)')
+      expect(cssVariableTheme.typography.fontSize.xxxl).toBe('var(--shades-theme-typography-font-size-xxxl)')
+      expect(cssVariableTheme.typography.fontSize.xxxxl).toBe('var(--shades-theme-typography-font-size-xxxxl)')
       expect(cssVariableTheme.typography.fontWeight.normal).toBe('var(--shades-theme-typography-font-weight-normal)')
       expect(cssVariableTheme.typography.fontWeight.bold).toBe('var(--shades-theme-typography-font-weight-bold)')
       expect(cssVariableTheme.typography.lineHeight.tight).toBe('var(--shades-theme-typography-line-height-tight)')

package/src/services/css-variable-theme.ts

@@ -102,6 +102,9 @@ export const cssVariableTheme = {
       md: 'var(--shades-theme-typography-font-size-md)',
       lg: 'var(--shades-theme-typography-font-size-lg)',
       xl: 'var(--shades-theme-typography-font-size-xl)',
+      xxl: 'var(--shades-theme-typography-font-size-xxl)',
+      xxxl: 'var(--shades-theme-typography-font-size-xxxl)',
+      xxxxl: 'var(--shades-theme-typography-font-size-xxxxl)',
     },
     fontWeight: {
       normal: 'var(--shades-theme-typography-font-weight-normal)',

package/src/services/default-dark-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from './theme-provider-service.js'
+
+/**
+ * Color palette optimized for dark backgrounds (#121212).
+ * Uses lighter Material Design color variants to ensure
+ * WCAG AA contrast (≥4.5:1) against the dark theme background.
+ */
+export const defaultDarkPalette: Palette = {
+  primary: {
+    light: '#9fa8da',
+    lightContrast: '#000000',
+    main: '#7986cb',
+    mainContrast: '#000000',
+    dark: '#5c6bc0',
+    darkContrast: '#ffffff',
+  },
+  secondary: {
+    light: '#4aedc4',
+    lightContrast: '#000000',
+    main: '#1de9b6',
+    mainContrast: '#000000',
+    dark: '#14a37f',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#ef9a9a',
+    lightContrast: '#000000',
+    main: '#ef5350',
+    mainContrast: '#000000',
+    dark: '#e53935',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#ffb74d',
+    lightContrast: '#000000',
+    main: '#ff9800',
+    mainContrast: '#000000',
+    dark: '#f57c00',
+    darkContrast: '#000000',
+  },
+  info: {
+    light: '#90caf9',
+    lightContrast: '#000000',
+    main: '#42a5f5',
+    mainContrast: '#000000',
+    dark: '#1e88e5',
+    darkContrast: '#ffffff',
+  },
+  success: {
+    light: '#81c784',
+    lightContrast: '#000000',
+    main: '#4caf50',
+    mainContrast: '#000000',
+    dark: '#388e3c',
+    darkContrast: '#ffffff',
+  },
+}

package/src/services/default-dark-theme.ts

@@ -1,4 +1,4 @@
-import { defaultPalette } from './default-palette.js'
+import { defaultDarkPalette } from './default-dark-palette.js'
 import type { Theme } from './theme-provider-service.js'
 
 export const defaultDarkTheme = {
@@ -16,10 +16,10 @@ export const defaultDarkTheme = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
   background: {
-    default: '#303030',
-    paper: '#424242',
+    default: '#121212',
+    paper: '#1e1e1e',
   },
-  palette: defaultPalette,
+  palette: defaultDarkPalette,
   divider: 'rgba(255, 255, 255, 0.12)',
   action: {
     hoverBackground: 'rgba(255, 255, 255, 0.08)',
@@ -54,6 +54,9 @@ export const defaultDarkTheme = {
       md: '14px',
       lg: '16px',
       xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
     },
     fontWeight: {
       normal: '400',

package/src/services/default-light-theme.ts

@@ -54,6 +54,9 @@ export const defaultLightTheme = {
       md: '14px',
       lg: '16px',
       xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
     },
     fontWeight: {
       normal: '400',

package/src/services/index.ts

@@ -1,6 +1,7 @@
 export * from './click-away-service.js'
 export * from './collection-service.js'
 export * from './css-variable-theme.js'
+export * from './default-dark-palette.js'
 export * from './default-dark-theme.js'
 export * from './default-light-theme.js'
 export * from './default-palette.js'

package/src/services/theme-provider-service.ts

@@ -158,8 +158,14 @@ export type FontSizeScale = {
   md: string
   /** 16px - large body, icons */
   lg: string
-  /** 24px - page headings */
+  /** 24px - subheadings, large UI elements */
   xl: string
+  /** 30px - small headings (h3) */
+  xxl: string
+  /** 36px - medium headings (h2) */
+  xxxl: string
+  /** 48px - large headings (h1) */
+  xxxxl: string
 }
 
 /**