@cnamts/synapse 1.0.0 → 1.0.2

package/src/designTokens/tokens/cnam/cnamFonts.ts

@@ -0,0 +1,140 @@
+export const cnamFontsTokens = {
+	family: {
+		primary: '"Arial", sans-serif',
+		secondary: '"Arial", sans-serif',
+	},
+	weight: {
+		thin: 100,
+		light: 300,
+		regular: 400,
+		medium: 500,
+		bold: 700,
+		black: 900,
+	},
+	size: {
+		xs: '0.75rem', // 12px
+		sm: '0.875rem', // 14px
+		base: '1rem', // 16px
+		lg: '1.125rem', // 18px
+		xl: '1.25rem', // 20px
+		xxl: '1.5rem', // 24px
+	},
+	lineHeight: {
+		tight: 1.3, // 130% for font-size > 18px
+		normal: 1.5, // 150% for font-size <= 18px
+	},
+	letterSpacing: {
+		tighter: '-0.05em',
+		tight: '-0.025em',
+		normal: '0',
+		wide: '0.025em',
+		wider: '0.05em',
+	},
+	heading: {
+		h1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '2rem', // 32px
+			lineHeight: 1.3,
+			letterSpacing: '-0.025em',
+		},
+		h2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1.75rem', // 28px
+			lineHeight: 1.3,
+			letterSpacing: '-0.025em',
+		},
+		h3: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1.5rem', // 24px
+			lineHeight: 1.3,
+			letterSpacing: '-0.025em',
+		},
+		h4: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1.25rem', // 20px
+			lineHeight: 1.3,
+			letterSpacing: '0',
+		},
+		h5: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1.125rem', // 18px
+			lineHeight: 1.3,
+			letterSpacing: '0',
+		},
+		h6: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1rem', // 16px
+			lineHeight: 1.3,
+			letterSpacing: '0',
+		},
+	},
+	body: {
+		body1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 400,
+			fontSize: '1.125rem', // 18px
+			lineHeight: 1.5,
+			letterSpacing: '0',
+		},
+		body2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 400,
+			fontSize: '1rem', // 16px
+			lineHeight: 1.5,
+			letterSpacing: '0',
+		},
+	},
+	subtitle: {
+		subtitle1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 500,
+			fontSize: '1.125rem', // 18px
+			lineHeight: 1.5,
+			letterSpacing: '0.009em',
+		},
+		subtitle2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 500,
+			fontSize: '1rem', // 16px
+			lineHeight: 1.5,
+			letterSpacing: '0.007em',
+		},
+	},
+	caption: {
+		fontFamily: '"Arial", sans-serif',
+		fontWeight: 400,
+		fontSize: '0.875rem', // 14px
+		lineHeight: 1.5,
+		letterSpacing: '0',
+	},
+	overline: {
+		fontFamily: '"Arial", sans-serif',
+		fontWeight: 400,
+		fontSize: '0.875rem', // 14px
+		lineHeight: 1.5,
+		letterSpacing: '0.1em',
+		textTransform: 'uppercase',
+	},
+	display: {
+		display1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 300,
+			fontSize: '2.5rem', // 40px
+			lineHeight: 1.15,
+			letterSpacing: '-0.0075em',
+		},
+		display2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 300,
+			fontSize: '1.875rem', // 30px
+			lineHeight: 1.1,
+			letterSpacing: '-0.00375em',
+		},
+	},
+}

package/src/designTokens/tokens/pa/paFonts.ts

@@ -0,0 +1,140 @@
+export const paFontsTokens = {
+	family: {
+		primary: '"Arial", sans-serif',
+		secondary: '"Arial", sans-serif',
+	},
+	weight: {
+		thin: 100,
+		light: 300,
+		regular: 400,
+		medium: 500,
+		bold: 700,
+		black: 900,
+	},
+	size: {
+		xs: '0.75rem', // 12px
+		sm: '0.875rem', // 14px
+		base: '1rem', // 16px
+		lg: '1.125rem', // 18px
+		xl: '1.25rem', // 20px
+		xxl: '1.5rem', // 24px
+	},
+	lineHeight: {
+		tight: 1.3, // 130% for font-size > 18px
+		normal: 1.5, // 150% for font-size <= 18px
+	},
+	letterSpacing: {
+		tighter: '-0.05em',
+		tight: '-0.025em',
+		normal: '0',
+		wide: '0.025em',
+		wider: '0.05em',
+	},
+	heading: {
+		h1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1.75rem', // 28px
+			lineHeight: 1.3,
+			letterSpacing: '-0.025em',
+		},
+		h2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1.25rem', // 20px
+			lineHeight: 1.3,
+			letterSpacing: '-0.025em',
+		},
+		h3: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1.125rem', // 18px
+			lineHeight: 1.3,
+			letterSpacing: '-0.025em',
+		},
+		h4: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '1rem', // 16px
+			lineHeight: 1.3,
+			letterSpacing: '0',
+		},
+		h5: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '0.875rem', // 14px
+			lineHeight: 1.3,
+			letterSpacing: '0',
+		},
+		h6: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 700,
+			fontSize: '0.75rem', // 12px
+			lineHeight: 1.3,
+			letterSpacing: '0',
+		},
+	},
+	body: {
+		body1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 400,
+			fontSize: '1rem', // 16px
+			lineHeight: 1.5,
+			letterSpacing: '0',
+		},
+		body2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 400,
+			fontSize: '0.875rem', // 14px
+			lineHeight: 1.5,
+			letterSpacing: '0',
+		},
+	},
+	subtitle: {
+		subtitle1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 500,
+			fontSize: '1rem', // 16px
+			lineHeight: 1.5,
+			letterSpacing: '0.009em',
+		},
+		subtitle2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 500,
+			fontSize: '0.875rem', // 14px
+			lineHeight: 1.5,
+			letterSpacing: '0.007em',
+		},
+	},
+	caption: {
+		fontFamily: '"Arial", sans-serif',
+		fontWeight: 400,
+		fontSize: '0.75rem', // 12px
+		lineHeight: 1.5,
+		letterSpacing: '0',
+	},
+	overline: {
+		fontFamily: '"Arial", sans-serif',
+		fontWeight: 500,
+		fontSize: '0.75rem', // 12px
+		lineHeight: 1.5,
+		letterSpacing: '0.1em',
+		textTransform: 'uppercase',
+	},
+	display: {
+		display1: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 300,
+			fontSize: '2rem', // 32px
+			lineHeight: 1.15,
+			letterSpacing: '-0.006em',
+		},
+		display2: {
+			fontFamily: '"Arial", sans-serif',
+			fontWeight: 300,
+			fontSize: '1.75rem', // 28px
+			lineHeight: 1.1,
+			letterSpacing: '-0.003em',
+		},
+	},
+}

package/src/designTokens/utils/createFontVariables.ts

@@ -0,0 +1,143 @@
+/**
+ * Creates CSS variables from font tokens
+ * @param fontTokens The font tokens object
+ * @returns An object with CSS variables for font properties
+ */
+interface FontProperty {
+	fontFamily?: string
+	fontSize?: string
+	fontWeight?: number
+	lineHeight?: number
+	letterSpacing?: string
+	textTransform?: string
+}
+
+interface FontTokens {
+	family?: {
+		primary?: string
+	}
+	heading?: {
+		[key: string]: FontProperty
+	}
+	body?: {
+		[key: string]: FontProperty
+	}
+	subtitle?: {
+		[key: string]: FontProperty
+	}
+	caption?: FontProperty | {
+		[key: string]: FontProperty
+	}
+	overline?: FontProperty | {
+		[key: string]: FontProperty
+	}
+	display?: {
+		[key: string]: FontProperty
+	}
+	[key: string]: unknown
+}
+
+export function createFontVariables(fontTokens: FontTokens): Record<string, string> {
+	const variables: Record<string, string> = {}
+
+	// Add font family if available
+	if (fontTokens.family && fontTokens.family.primary) {
+		variables['font-family'] = fontTokens.family.primary
+	}
+
+	// Process heading styles with proper Vuetify theme variable format
+	if (fontTokens.heading) {
+		Object.entries(fontTokens.heading).forEach(([key, value]: [string, FontProperty]) => {
+			// Add variables in the format Vuetify expects (without -- prefix)
+			// Vuetify will automatically add --v-theme- prefix
+			variables[`typography-${key}-font-size`] = value.fontSize || ''
+			variables[`typography-${key}-font-weight`] = value.fontWeight?.toString() || ''
+			variables[`typography-${key}-line-height`] = value.lineHeight?.toString() || ''
+			variables[`typography-${key}-letter-spacing`] = value.letterSpacing || ''
+		})
+	}
+
+	// Process body styles with proper Vuetify theme variable format
+	if (fontTokens.body) {
+		Object.entries(fontTokens.body).forEach(([key, value]: [string, FontProperty]) => {
+			// Add variables in the format Vuetify expects (without -- prefix)
+			variables[`typography-${key}-font-size`] = value.fontSize || ''
+			variables[`typography-${key}-font-weight`] = value.fontWeight?.toString() || ''
+			variables[`typography-${key}-line-height`] = value.lineHeight?.toString() || ''
+			variables[`typography-${key}-letter-spacing`] = value.letterSpacing || ''
+		})
+	}
+
+	// Process subtitle styles with proper Vuetify theme variable format
+	if (fontTokens.subtitle) {
+		Object.entries(fontTokens.subtitle).forEach(([key, value]: [string, FontProperty]) => {
+			// Add variables in the format Vuetify expects (without -- prefix)
+			variables[`typography-${key}-font-size`] = value.fontSize || ''
+			variables[`typography-${key}-font-weight`] = value.fontWeight?.toString() || ''
+			variables[`typography-${key}-line-height`] = value.lineHeight?.toString() || ''
+			variables[`typography-${key}-letter-spacing`] = value.letterSpacing || ''
+		})
+	}
+
+	// Process caption and overline styles with proper Vuetify theme variable format
+	['caption', 'overline'].forEach((category) => {
+		if (fontTokens[category]) {
+			const value = fontTokens[category]
+			if (value && typeof value === 'object' && !Array.isArray(value)) {
+				if ('fontSize' in value) {
+					// Direct property object
+					// Add variables in the format Vuetify expects (without -- prefix)
+					variables[`typography-${category}-font-size`] = (value as FontProperty).fontSize || ''
+					variables[`typography-${category}-font-weight`] = (value as FontProperty).fontWeight?.toString() || ''
+					variables[`typography-${category}-line-height`] = (value as FontProperty).lineHeight?.toString() || ''
+					variables[`typography-${category}-letter-spacing`] = (value as FontProperty).letterSpacing || ''
+
+					// Add text-transform if present
+					if ((value as FontProperty).textTransform) {
+						variables[`typography-${category}-text-transform`] = (value as FontProperty).textTransform || ''
+					}
+				}
+				else {
+					// Nested object with key matching category name
+					const nestedValue = (value as Record<string, FontProperty | undefined>)[category]
+					if (nestedValue) {
+						// Add variables in the format Vuetify expects (without -- prefix)
+						variables[`typography-${category}-font-size`] = nestedValue.fontSize || ''
+						variables[`typography-${category}-font-weight`] = nestedValue.fontWeight?.toString() || ''
+						variables[`typography-${category}-line-height`] = nestedValue.lineHeight?.toString() || ''
+						variables[`typography-${category}-letter-spacing`] = nestedValue.letterSpacing || ''
+
+						// Add text-transform if present
+						if (nestedValue.textTransform) {
+							variables[`typography-${category}-text-transform`] = nestedValue.textTransform || ''
+						}
+					}
+				}
+			}
+		}
+	})
+
+	// Process display styles with display1 and display2 properties
+	if (fontTokens.display) {
+		const display = fontTokens.display as Record<string, FontProperty | undefined>
+
+		// Process each display size (display1, display2)
+		['display1', 'display2'].forEach((key) => {
+			const value = display[key]
+			if (value) {
+				// Add variables in the format Vuetify expects (without -- prefix)
+				variables[`typography-${key}-font-size`] = value.fontSize || ''
+				variables[`typography-${key}-font-weight`] = value.fontWeight?.toString() || ''
+				variables[`typography-${key}-line-height`] = value.lineHeight?.toString() || ''
+				variables[`typography-${key}-letter-spacing`] = value.letterSpacing || ''
+
+				// Add text-transform if present
+				if (value.textTransform) {
+					variables[`typography-${key}-text-transform`] = value.textTransform || ''
+				}
+			}
+		})
+	}
+
+	return variables
+}

package/src/designTokens/utils/index.ts

@@ -1,4 +1,5 @@
 import { createFlattenTheme } from './createFlattenTheme'
 import { convertGaps } from './convertGaps'
+import { createFontVariables } from './createFontVariables'
 
-export { createFlattenTheme, convertGaps }
+export { createFlattenTheme, convertGaps, createFontVariables }