@cnamts/synapse 1.0.2 → 1.0.4

package/src/designTokens/tokens/amelipro/apColors.ts

@@ -0,0 +1,81 @@
+import type { IndexedObject } from '@/components/Amelipro/types'
+
+export const apColorsTokens = {
+	apBlack: { base: '#000000' },
+	apBlue: {
+		base: '#0C419A',
+		darken1: '#00749C',
+		darken2: '#00516D',
+		lighten1: '#99DBF2',
+		lighten2: '#CCEDF9',
+		lighten3: '#E6F6FC',
+		lighten4: '#F3FBFE',
+	},
+	apGreen: {
+		base: '#56C271',
+		darken1: '#459B5A',
+		darken2: '#337343',
+		lighten1: '#78CE8D',
+		lighten2: '#DDF3E3',
+	},
+	apGrey: {
+		base: '#545859',
+		darken1: '#1A1B1B',
+		lighten1: '#CCCDCE',
+		lighten2: '#DDDEDE',
+		lighten3: '#EEEEEE',
+		lighten4: '#F3F4F4',
+		lighten5: '#FAFAFA',
+		lighten6: '#F4F8F9',
+	},
+	apParme: {
+		base: '#C8D1E6',
+		darken1: '#4D547D',
+	},
+	apPink: { base: '#D00063' },
+	apRed: {
+		base: '#B33F2E',
+		darken1: '#9D3728',
+		darken2: '#70281C',
+		lighten1: '#E67261',
+		lighten2: '#EC9588',
+		lighten3: '#F9DCD7',
+		lighten4: '#FDF0EE',
+	},
+	apTurquoise: {
+		base: '#33BCA5',
+		darken1: '#007863',
+		darken2: '#006654',
+		darken3: '#005647',
+		lighten1: '#CCEEE8',
+		lighten2: '#E6F7F4',
+	},
+	apWhite: { base: '#FFFFFF' },
+	apYellow: {
+		base: '#F0B323',
+		darken1: '#D8A120',
+		darken2: '#C08F1C',
+		darken3: '#A87D19',
+		darken4: '#906C16',
+		lighten1: '#F3C24F',
+		lighten2: '#FED66D',
+		lighten3: '#F7D990',
+		lighten4: '#F9E1A7',
+		lighten5: '#FCF0D3',
+	},
+}
+
+export const apColorClasses: IndexedObject = {}
+
+export function toKebabCase(value: string): string {
+	return value.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+Object.entries(apColorsTokens).forEach(([colorName, colorValues]) => {
+	Object.entries(colorValues).forEach(([variationName, colorValue]) => {
+		const colorClass = toKebabCase(`${colorName}-${variationName}`
+			.replace(/\d+/, '-$&')
+			.replace('-base', ''))
+		apColorClasses[colorClass] = colorValue as string
+	})
+})

package/src/designTokens/tokens/amelipro/apContextual.ts

@@ -0,0 +1,58 @@
+export const apContextualTokens = {
+	colors: {
+		background: '#ffffff',
+		border: '#dddddd',
+		text: '#333333',
+		icon: '#666666',
+		overlay: 'rgba(0, 0, 0, 0.5)',
+		interactive: '#007bff',
+	},
+	gap: {
+		0: '0',
+		1: '4px',
+		2: '8px',
+		3: '122px',
+		4: '16px',
+		5: '20px',
+		6: '24px',
+		7: '28px',
+		8: '32px',
+		9: '36px',
+		10: '40px',
+		11: '44px',
+		12: '48px',
+		13: '52px',
+		14: '56px',
+		15: '60px',
+		16: '64px',
+	},
+	iconSize: {
+		xsmall: '8px',
+		small: '16px',
+		default: '24px',
+		large: '32px',
+	},
+	radius: {
+		rounded0: '0',
+		rounded: '4px',
+		roundedLg: '8px',
+		roundedPill: '64px',
+	},
+	padding: {
+		0: '0',
+		2: '8px',
+		3: '12px',
+		4: '16px',
+		6: '24px',
+		8: '32px',
+		10: '40px',
+		14: '56px',
+		16: '64px',
+	},
+	fontSize: {
+		titres: '24px',
+		titresAlternatifs: '20px',
+		corpsDeTexte: '16px',
+		liensEtLibelles: '14px',
+	},
+}

package/src/designTokens/tokens/amelipro/apDarkTheme.ts

@@ -0,0 +1,5 @@
+// import { apColorsTokens } from '../amelipro/apColors'
+
+export const apDarkTheme = {
+	// backgroundSurface: apColorsTokens.parma.darken60,
+}

package/src/designTokens/tokens/amelipro/apLightTheme.ts

@@ -0,0 +1,13 @@
+import { apColorsTokens } from './apColors'
+// import { apSemanticTokens } from '../amelipro/apSemantic'
+import { apColorClasses } from './apColors'
+
+export const apLightTheme = {
+	...apColorClasses,
+	error: apColorsTokens.apRed.base,
+	info: apColorsTokens.apParme.darken1 as string,
+	primary: apColorsTokens.apBlue.darken1 as string,
+	secondary: apColorsTokens.apBlue.darken2 as string,
+	success: apColorsTokens.apTurquoise.darken1 as string,
+	warning: apColorsTokens.apYellow.darken4 as string,
+}

package/src/designTokens/tokens/amelipro/apSemantic.ts

@@ -0,0 +1,87 @@
+export const apSemanticTokens = {
+	colors: {
+		background: {
+			main: '#e7ecf5',
+			surface: '#ffffff',
+			mainAlt: '#ffffff',
+			surfaceAlt: '#e7ecf5',
+			raised: '#f8f9fc',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentAlt: '#111212',
+			info: '#ced9eb',
+			infoSubdued: '#e7ecf5',
+			infoContrasted: '#0c419a',
+			success: '#cceee8',
+			successSubdued: '#e5f7f4',
+			successContrasted: '#56c271',
+			warning: '#fcf0d3',
+			warningSubdued: '#fdf7e9',
+			warningContrasted: '#f0b323',
+			error: '#f9dcd7',
+			errorSubdued: '#fcedeb',
+			errorContrasted: '#b33f2e',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			assure: '#ed76b3',
+			professionnel: '#66c9ec',
+			entreprise: '#f0b323',
+		},
+		border: {
+			darker: '#222324',
+			base: '#989b9b',
+			subdued: '#dddede',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentOnDark: '#ffffff',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: 'rgba(255, 255, 255, 0.7)',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		text: {
+			base: '#222324',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			subdued: '#545859',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			disabled: '#989b9b',
+			onDark: '#ffffff',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		icon: {
+			base: '#222324',
+			subdued: '#545859',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: '#ffffff',
+			disabled: '#989b9b',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		overlay: {
+			fullpage: '#989b9b',
+			onDark: '#ffffff',
+			onLight: '#0c419a',
+		},
+		interactive: {
+			default: 'rgba(255, 255, 255, 0.0000)',
+			hover: '#e7ecf5',
+			pressed: '#ced9eb',
+			focus: '#e7ecf5',
+			disabled: 'rgba(255, 255, 255, 0.0000)',
+			hoverOnSelected: '#ced9eb',
+		},
+	},
+}

package/src/designTokens/utils/createFontVariables.ts

@@ -53,7 +53,7 @@ export function createFontVariables(fontTokens: FontTokens): Record<string, stri
 			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 || ''
+			variables[`typography-${key}-letter-spacing`] = value.letterSpacing || 'normal'
 		})
 	}
 
@@ -64,7 +64,7 @@ export function createFontVariables(fontTokens: FontTokens): Record<string, stri
 			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 || ''
+			variables[`typography-${key}-letter-spacing`] = value.letterSpacing || 'normal'
 		})
 	}
 
@@ -75,7 +75,7 @@ export function createFontVariables(fontTokens: FontTokens): Record<string, stri
 			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 || ''
+			variables[`typography-${key}-letter-spacing`] = value.letterSpacing || 'normal'
 		})
 	}
 
@@ -90,7 +90,7 @@ export function createFontVariables(fontTokens: FontTokens): Record<string, stri
 					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 || ''
+					variables[`typography-${category}-letter-spacing`] = (value as FontProperty).letterSpacing || 'normal'
 
 					// Add text-transform if present
 					if ((value as FontProperty).textTransform) {
@@ -105,7 +105,7 @@ export function createFontVariables(fontTokens: FontTokens): Record<string, stri
 						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 || ''
+						variables[`typography-${category}-letter-spacing`] = nestedValue.letterSpacing || 'normal'
 
 						// Add text-transform if present
 						if (nestedValue.textTransform) {
@@ -129,7 +129,7 @@ export function createFontVariables(fontTokens: FontTokens): Record<string, stri
 				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 || ''
+				variables[`typography-${key}-letter-spacing`] = value.letterSpacing || 'normal'
 
 				// Add text-transform if present
 				if (value.textTransform) {

package/src/directives/Toolbar.ts

@@ -0,0 +1,172 @@
+import type { Directive } from 'vue'
+
+type Instance = {
+	tools: HTMLElement[]
+	lastElementFocused?: HTMLElement
+}
+
+const toolbarInstances = new WeakMap<HTMLElement, Instance>()
+
+/**
+ * This directive implements the "roving tabindex" pattern for accessible toolbars.
+ *
+ * example usage:
+ * <div v-toolbar role="toolbar">
+ *   <button>Tool 1</button>
+ *   <button>Tool 2</button>
+ *   <a href="#">Tool 3</a>
+ * </div>
+ *
+ * The directive allows keyboard navigation through the toolbar's tools using arrow keys,
+ * home, and end keys, while managing focus and tabindex attributes for accessibility.
+ */
+export const vToolbar: Directive = {
+	mounted(el: HTMLElement) {
+		el.setAttribute('role', 'toolbar') // Required on firefox to capture arrow keys!
+		el.setAttribute('tabindex', '0')
+
+		const tools = Array.from(el.querySelectorAll<HTMLElement>('button:not([disabled]), a:not([disabled]), input:not([disabled])') || [])
+
+		toolbarInstances.set(el, {
+			tools: tools,
+			lastElementFocused: undefined,
+		})
+
+		tools.forEach((el) => {
+			el.setAttribute('tabindex', '-1')
+		})
+
+		el.addEventListener('keydown', (event: KeyboardEvent) => {
+			const instance = toolbarInstances.get(el)
+
+			if (!instance) {
+				return
+			}
+
+			switch (event.key) {
+				case 'ArrowRight':
+				case 'ArrowDown':
+					selectNextElement(event as KeyboardEvent & { target: HTMLElement }, instance.tools)
+					break
+				case 'ArrowLeft':
+				case 'ArrowUp':
+					selectPrevElement(event as KeyboardEvent & { target: HTMLElement }, instance.tools)
+					break
+				case 'Home':
+					selectFirstElement(instance.tools)
+					break
+				case 'End':
+					selectLastElement(instance.tools)
+					break
+			}
+		})
+
+		el.addEventListener('focus', () => {
+			const instance = toolbarInstances.get(el)
+
+			if (!instance) {
+				return
+			}
+
+			setupFocus(el, instance)
+		})
+
+		el.addEventListener('focusin', (e: FocusEvent) => {
+			const instance = toolbarInstances.get(el)
+			if (!instance) {
+				return
+			}
+
+			saveFocus(e, instance)
+		})
+
+		el.addEventListener('focusout', (e: FocusEvent) => {
+			const instance = toolbarInstances.get(el)
+			if (!instance) {
+				return
+			}
+
+			blurToolbar(e, el)
+		})
+	},
+
+	unmounted(el: HTMLElement) {
+		toolbarInstances.delete(el)
+	},
+}
+
+function selectNextElement(e: Event & { target: HTMLElement }, tools: HTMLElement[]) {
+	const currentIndex = tools.findIndex(tool => tool === e.target)
+
+	const nextIndex = currentIndex < tools.length - 1 ? currentIndex + 1 : 0
+
+	const nextElem = tools.at(nextIndex)
+
+	e.target.setAttribute('tabindex', '-1')
+	nextElem?.setAttribute('tabindex', '0')
+	nextElem?.focus()
+}
+
+function selectPrevElement(e: Event & { target: HTMLElement }, tools: HTMLElement[]) {
+	const currentIndex = tools.findIndex(tool => tool === e.target)
+
+	const prevIndex = currentIndex > 0 ? currentIndex - 1 : tools.length - 1
+
+	const nextElem = tools.at(prevIndex)
+
+	e.target.setAttribute('tabindex', '-1')
+	nextElem?.setAttribute('tabindex', '0')
+	nextElem?.focus()
+}
+
+function selectFirstElement(tools: HTMLElement[]) {
+	const firstElement = tools.at(0)
+	if (!firstElement) {
+		return
+	}
+	document.activeElement?.setAttribute('tabindex', '-1')
+	firstElement.setAttribute('tabindex', '0')
+	firstElement.focus()
+}
+
+function selectLastElement(tools: HTMLElement[]) {
+	const lastElement = tools.at(-1)
+	if (!lastElement) {
+		return
+	}
+	document.activeElement?.setAttribute('tabindex', '-1')
+	lastElement.setAttribute('tabindex', '0')
+	lastElement.focus()
+}
+
+function setupFocus(toolbar: HTMLElement, instance: Instance) {
+	// Remove the ability to tab into the toolbar to be able to shift focus to previous focusable element
+	toolbar?.setAttribute('tabindex', '-1')
+
+	if (instance.lastElementFocused) {
+		// If there is a last focused element, restore focus to it
+		instance.lastElementFocused.setAttribute('tabindex', '0')
+		instance.lastElementFocused.focus()
+	}
+	else {
+		selectFirstElement(instance.tools)
+	}
+}
+
+function saveFocus(e: FocusEvent, instance: Instance) {
+	// Save the last focused element to restore focus later
+	if (e.target !== e.currentTarget) {
+		instance.lastElementFocused = e.target as HTMLElement
+	}
+}
+
+function blurToolbar(e: FocusEvent, toolbar: HTMLElement) {
+	// When an item of the toolbar is blured it should not be focusable anymore
+	(e.target as HTMLElement)?.setAttribute('tabindex', '-1')
+
+	// When the toolbar loses focus, we need to set its focusable
+	if (toolbar?.contains(e.relatedTarget as HTMLElement)) {
+		return
+	}
+	toolbar?.setAttribute('tabindex', '0')
+}