@cnamts/synapse 1.0.26 → 1.0.27

package/src/designTokens/tokens/semanticTokens.ts

@@ -0,0 +1,114 @@
+import { baseTokens } from './baseTokens'
+
+export const semanticTokens = {
+	CNAM: {
+		color: {
+			border: baseTokens.color.blue.base,
+			borderVariant: baseTokens.color.grey.lighten40,
+			disabled: baseTokens.color.grey.lighten80,
+			inverseSurface: baseTokens.color.grey.base,
+			onDisabled: baseTokens.color.grey.lighten40,
+			onPrimary: baseTokens.color.white.base,
+			onPrimaryVariant: baseTokens.color.white.base,
+			onSecondary: baseTokens.color.white.base,
+			onSecondaryVariant: baseTokens.color.white.base,
+			onSurfaceVariant: baseTokens.color.grey.base,
+			overlay: baseTokens.color.grey.alpha40,
+			primary: baseTokens.color.blue.base,
+			primaryVariant: baseTokens.color.blue.darken40,
+			secondary: baseTokens.color.cyan.darken40,
+			secondaryVariant: baseTokens.color.cyan.darken60,
+			surface: baseTokens.color.white.base,
+			surfaceBright: baseTokens.color.blue.lighten97,
+			surfaceDim: baseTokens.color.blue.lighten90,
+		},
+		background: {
+			background: baseTokens.color.blue.lighten90,
+			backgroundVariant: baseTokens.color.white.base,
+			onBackgroundVariant: baseTokens.color.grey.lighten40,
+		},
+		feedback: {
+			error: baseTokens.color.orange.darken20,
+			errorVariant: baseTokens.color.orange.lighten80,
+			info: baseTokens.color.blue.base,
+			infoVariant: baseTokens.color.blue.lighten80,
+			onError: baseTokens.color.white.base,
+			onErrorVariant: baseTokens.color.orange.darken60,
+			onInfo: baseTokens.color.white.base,
+			onInfoVariant: baseTokens.color.blue.darken20,
+			onSuccess: baseTokens.color.grey.darken60,
+			onSuccessVariant: baseTokens.color.grey.darken60,
+			onWarningVariant: baseTokens.color.yellow.darken60,
+			success: baseTokens.color.green.base,
+			successVariant: baseTokens.color.green.lighten80,
+			warning: baseTokens.color.yellow.base,
+			warningVariant: baseTokens.color.yellow.lighten80,
+		},
+		interaction: {
+			darkEnabled: baseTokens.color.transparentBlue.alpha00,
+			darkHover: baseTokens.color.transparentBlue.alpha08,
+			darkPressed: baseTokens.color.transparentBlue.alpha20,
+			darkenEnabled: baseTokens.color.transparentBlack.alpha00,
+			darkenHover: baseTokens.color.transparentBlack.alpha20,
+			darkenPressed: baseTokens.color.transparentBlack.alpha40,
+			lightenEnabled: baseTokens.color.none,
+			lightenHover: baseTokens.color.white.alpha20,
+			lightenPressed: baseTokens.color.white.alpha40,
+		},
+	},
+	ap: {
+		color: {
+			border: baseTokens.color.cyan.darken20,
+			borderVariant: baseTokens.color.grey.lighten40,
+			disabled: baseTokens.color.grey.lighten80,
+			inverseSurface: baseTokens.color.grey.base,
+			onDisabled: baseTokens.color.grey.lighten40,
+			onPrimary: baseTokens.color.white.base,
+			onPrimaryVariant: baseTokens.color.white.base,
+			onSecondary: baseTokens.color.white.base,
+			onSecondaryVariant: baseTokens.color.white.base,
+			onSurfaceVariant: baseTokens.color.grey.base,
+			overlay: baseTokens.color.grey.alpha40,
+			primary: baseTokens.color.cyan.darken20,
+			primaryVariant: baseTokens.color.cyan.darken40,
+			secondary: baseTokens.color.cyan.darken60,
+			secondaryVariant: baseTokens.color.cyan.darken80,
+			surface: baseTokens.color.white.base,
+			surfaceBright: baseTokens.color.cyan.lighten97,
+			surfaceDim: baseTokens.color.cyan.lighten80,
+		},
+		background: {
+			background: baseTokens.color.cyan.lighten97,
+			backgroundVariant: baseTokens.color.white.base,
+			onBackgroundVariant: baseTokens.color.grey.lighten40,
+		},
+		feedback: {
+			error: baseTokens.color.red.darken20,
+			errorVariant: baseTokens.color.red.lighten90,
+			info: baseTokens.color.parma.darken40,
+			infoVariant: baseTokens.color.parma.lighten80,
+			onError: baseTokens.color.white.base,
+			onErrorVariant: baseTokens.color.red.darken60,
+			onInfo: baseTokens.color.white.base,
+			onInfoVariant: baseTokens.color.parma.darken60,
+			onSuccess: baseTokens.color.white.base,
+			onSuccessVariant: baseTokens.color.forestGreen.darken60,
+			onWarningVariant: baseTokens.color.yellow.darken60,
+			success: baseTokens.color.forestGreen.base,
+			successVariant: baseTokens.color.forestGreen.lighten90,
+			warning: baseTokens.color.yellow.base,
+			warningVariant: baseTokens.color.yellow.lighten80,
+		},
+		interaction: {
+			darkEnabled: baseTokens.color.transparentCyan.alpha00,
+			darkHover: baseTokens.color.transparentCyan.alpha08,
+			darkPressed: baseTokens.color.transparentCyan.alpha18,
+			darkenEnabled: baseTokens.color.transparentBlack.alpha00,
+			darkenHover: baseTokens.color.transparentBlack.alpha20,
+			darkenPressed: baseTokens.color.transparentBlack.alpha40,
+			lightenEnabled: baseTokens.color.none,
+			lightenHover: baseTokens.color.white.alpha20,
+			lightenPressed: baseTokens.color.white.alpha38,
+		},
+	},
+} as const

package/src/stories/Components/Components.stories.ts

@@ -151,7 +151,7 @@ export const ComponentsList: StoryObj = {
 						title: 'BackToTopBtn',
 						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de remonter en haut de la page.',
 						link: '/?path=/docs/composants-boutons-backtotopbtn--docs',
-						img: '/components/back-to-top-btn.svg',
+						img: `/components/back-to-top-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -305,7 +305,7 @@ export const ComponentsList: StoryObj = {
 						title: 'SelectBtnField',
 						description: 'Utilisé pour permettre à l’utilisateur de sélectionner une valeur dans une liste.',
 						link: '/?path=/docs/composants-formulaires-selectbtnfield--docs',
-						img: '/components/select-btn-field.svg',
+						img: `/components/select-btn-field${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -340,7 +340,7 @@ export const ComponentsList: StoryObj = {
 						title: 'TableToolbar',
 						description: 'Utilisé pour afficher une barre d\'outils pour les tableaux.',
 						link: '/?path=/docs/composants-tableaux-tabletoolbar--docs',
-						img: '/components/table-toolbar.svg',
+						img: `/components/table-toolbar${isAp ? '-ap' : ''}.svg`,
 						category: 'Tableaux',
 					},
 					{
@@ -491,6 +491,10 @@ export const ComponentsList: StoryObj = {
 					'Accordion',
 					'ChipList',
 					'SyTabs',
+					'SelectBtnField',
+					'BackToTopBtn',
+					'TableToolbar',
+					'PhoneField',
 				]
 
 				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {

package/src/stories/DesignTokens/ColorIntegrationExample.vue

@@ -23,10 +23,9 @@
 				<pre style="margin: 0; font-size: 12px; color: #333;"><code>&lt;h1 class="text-secondary myColor"&gt;Playground&lt;/h1&gt;</code></pre>
 			</div>
 			<div style="margin-top: 16px; padding: 12px; background-color: #f5f5f5; border-radius: 4px;">
-				<pre style="margin: 0; font-size: 12px; color: #333;"><code>@use '@cnamts/synapse/assets/tokens' as tokens;
-
+				<pre style="margin: 0; font-size: 12px; color: #333;"><code>
 .my-color {
-    color: rgb(var(--v-theme-yellow-lighten40)) !important;
+    color: rgb(var(--v-theme-primary)) !important;
  }</code></pre>
 			</div>
 		</div>

package/src/stories/DesignTokens/Colors.mdx

@@ -14,18 +14,16 @@ import '../styles/shared.css';
 
 <Story of={ColorsStories.ColorIntegration} />
 
-<Story of={ColorsStories.ColorBaseSection}/>
+<Story of={ColorsStories.mainColors}/>
 
-<Story of={ColorsStories.AccentSection}/>
-
-<Story of={ColorsStories.InteractiveSection}/>
+<Story of={ColorsStories.BackgroundSection}/>
 
 <Story of={ColorsStories.BorderSection}/>
 
-<Story of={ColorsStories.TextSection}/>
+<Story of={ColorsStories.OverlaySection}/>
 
-<Story of={ColorsStories.IconSection}/>
+<Story of={ColorsStories.InteractionSection}/>
 
-<Story of={ColorsStories.BackgroundSection}/>
+<Story of={ColorsStories.DisabledSection}/>
 
-<Story of={ColorsStories.PaletteSection}/>
+<Story of={ColorsStories.FeedbackSection}/>