diff --git a/my-workspace/projects/sae-lib/.storybook/main.ts b/my-workspace/projects/sae-lib/.storybook/main.ts new file mode 100644 index 0000000..4c08c4e --- /dev/null +++ b/my-workspace/projects/sae-lib/.storybook/main.ts @@ -0,0 +1,14 @@ +import type { StorybookConfig } from '@storybook/angular'; + +const config: StorybookConfig = { + stories: ['../src/**/*.stories.@(ts|tsx)'], + addons: [], + framework: { + name: '@storybook/angular', + options: {} + } +}; + +export default config; + + diff --git a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss b/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss index 07493b0..b89857e 100644 --- a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss +++ b/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss @@ -80,7 +80,7 @@ } .avatar { - background: transparent url('../../public/chatbot.png') center center no-repeat; + background: transparent url('/public/chatbot.png') center center no-repeat; background-size: contain; width: 32px; height: 32px; diff --git a/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.html b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.html new file mode 100644 index 0000000..c023bcb --- /dev/null +++ b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.html @@ -0,0 +1,15 @@ +
+
+
+
+
{{ token.name }}
+
+
+
Les variables alpha peuvent apparaître très claires selon le fond.
+
+ + Pastille utilisant la variable SCSS correspondante +
+
+ + diff --git a/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.scss b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.scss new file mode 100644 index 0000000..09783ad --- /dev/null +++ b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.scss @@ -0,0 +1,169 @@ +@use '../../styles/_variables.scss' as *; + +.colors-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 12px; +} + +.color-item { + display: flex; + align-items: center; + gap: 12px; + padding: 8px 10px; + border-radius: $radius-2; + background: #fff; + box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06); +} + +.swatch { + width: 40px; + height: 40px; + border-radius: $radius-3; + border: 1px solid rgba(0, 0, 0, 0.05); +} + +.meta { + display: flex; + flex-direction: column; +} + +.name { + font-weight: 600; +} + +.note { + grid-column: 1 / -1; + font-size: 12px; + color: $neutral-color-300; +} + +.legend { + grid-column: 1 / -1; + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 12px; +} + +.legend-swatch { + width: 16px; + height: 16px; + border-radius: 3px; + background: $neutral-color-200; +} + +// Génère une classe .color- pour chaque variable importée +.color-main-color { background: $main-color; } +.color-main-color-100 { background: $main-color-100; } +.color-main-color-200 { background: $main-color-200; } +.color-main-color-300 { background: $main-color-300; } +.color-main-color-400 { background: $main-color-400; } +.color-main-color-500 { background: $main-color-500; } +.color-main-color-alpha-10 { background: $main-color-alpha-10; } +.color-main-color-alpha-50 { background: $main-color-alpha-50; } +.color-primary-color { background: $primary-color; } + +.color-secondary-color-100 { background: $secondary-color-100; } +.color-secondary-color-200 { background: $secondary-color-200; } +.color-secondary-color-300 { background: $secondary-color-300; } +.color-secondary-color-400 { background: $secondary-color-400; } +.color-secondary-color-500 { background: $secondary-color-500; } +.color-secondary-color-alpha-10 { background: $secondary-color-alpha-10; } +.color-secondary-color-alpha-50 { background: $secondary-color-alpha-50; } +.color-secondary-color { background: $secondary-color; } + +.color-ia-color-100 { background: $ia-color-100; } +.color-ia-color-200 { background: $ia-color-200; } +.color-ia-color-300 { background: $ia-color-300; } +.color-ia-color-400 { background: $ia-color-400; } +.color-ia-color-500 { background: $ia-color-500; } +.color-ia-color-alpha-10 { background: $ia-color-alpha-10; } +.color-ia-color-alpha-50 { background: $ia-color-alpha-50; } +.color-ia-color { background: $ia-color; } + +.color-neutral-color-100 { background: $neutral-color-100; } +.color-neutral-color-200 { background: $neutral-color-200; } +.color-neutral-color-300 { background: $neutral-color-300; } +.color-neutral-color-400 { background: $neutral-color-400; } +.color-neutral-color-500 { background: $neutral-color-500; } +.color-neutral-color-alpha-10 { background: $neutral-color-alpha-10; } +.color-neutral-color-alpha-50 { background: $neutral-color-alpha-50; } +.color-neutral-color { background: $neutral-color; } + +.color-neutral-blue { background: $neutral-blue; } +.color-neutral-white { background: $neutral-white; } +.color-white { background: $white; } + +.color-error-color-100 { background: $error-color-100; } +.color-error-color-200 { background: $error-color-200; } +.color-error-color-300 { background: $error-color-300; } +.color-error-color-400 { background: $error-color-400; } +.color-error-color-500 { background: $error-color-500; } +.color-error-color-alpha-10 { background: $error-color-alpha-10; } +.color-error-color-alpha-50 { background: $error-color-alpha-50; } +.color-error-color { background: $error-color; } + +.color-danger-color { background: $danger-color; } +.color-danger-color-light { background: $danger-color-light; } + +.color-success-color-100 { background: $success-color-100; } +.color-success-color-200 { background: $success-color-200; } +.color-success-color-300 { background: $success-color-300; } +.color-success-color-400 { background: $success-color-400; } +.color-success-color-500 { background: $success-color-500; } +.color-success-color-alpha-10 { background: $success-color-alpha-10; } +.color-success-color-alpha-50 { background: $success-color-alpha-50; } +.color-success-color { background: $success-color; } + +.color-warning-color-100 { background: $warning-color-100; } +.color-warning-color-200 { background: $warning-color-200; } +.color-warning-color-300 { background: $warning-color-300; } +.color-warning-color-400 { background: $warning-color-400; } +.color-warning-color-500 { background: $warning-color-500; } +.color-warning-color-alpha-10 { background: $warning-color-alpha-10; } +.color-warning-color-alpha-50 { background: $warning-color-alpha-50; } +.color-warning-color { background: $warning-color; } +.color-warning-color-text { background: $warning-color-text; } + +.color-info-color-100 { background: $info-color-100; } +.color-info-color-200 { background: $info-color-200; } +.color-info-color-300 { background: $info-color-300; } +.color-info-color-400 { background: $info-color-400; } +.color-info-color-500 { background: $info-color-500; } +.color-info-color-alpha-10 { background: $info-color-alpha-10; } +.color-info-color-alpha-50 { background: $info-color-alpha-50; } +.color-info-color { background: $info-color; } + +.color-gradient-light { background: $gradient-light; } +.color-gradient-intense { background: $gradient-intense; } + +.color-csc-light-yellow-color { background: $csc-light-yellow-color; } +.color-csc-magic-color { background: $csc-magic-color; } +.color-csc-copy-color { background: $csc-copy-color; } +.color-csc-bg-color { background: $csc-bg-color; } +.color-csc-title-color { background: $csc-title-color; } +.color-csc-text-color { background: $csc-text-color; } +.color-csc-light-text-color { background: $csc-light-text-color; } +.color-csc-nav-color { background: $csc-nav-color; } +.color-csc-chips-bg-color { background: $csc-chips-bg-color; } +.color-csc-textarea-color { background: $csc-textarea-color; } +.color-csc-textarea-placeholder-color { background: $csc-textarea-placeholder-color; } +.color-csc-file-selector-bg-color { background: $csc-file-selector-bg-color; } +.color-csc-filters-box-color { background: $csc-filters-box-color; } +.color-csc-light-blue { background: $csc-light-blue; } +.color-csc-light-grey { background: $csc-light-grey; } +.color-bot-bubble { background: $bot-bubble; } + +.color-main-bg-color { background: $main-bg-color; } +.color-main-text-color { background: $main-text-color; } +.color-main-color-active { background: $main-color-active; } +.color-main-bg-color-active { background: $main-bg-color-active; } +.color-event-blue { background: $event-blue; } +.color-notification-green { background: $notification-green; } +.color-bg-color-button { background: $bg-color-button; } +.color-bg-color-nav { background: $bg-color-nav; } +.color-bg-color-chat { background: $bg-color-chat; } +.color-shadow-color { background: $shadow-color; } + + diff --git a/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.ts b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.ts new file mode 100644 index 0000000..69789bb --- /dev/null +++ b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.component.ts @@ -0,0 +1,133 @@ +import { Component } from '@angular/core'; + +type ColorToken = { + name: string; + cssVar?: string; + value?: string; +}; + +@Component({ + selector: 'sae-colors-demo', + standalone: true, + templateUrl: './colors-demo.component.html', + styleUrls: ['./colors-demo.component.scss'] +}) +export class ColorsDemoComponent { + // Liste des tokens à afficher; on utilisera des classes pour appliquer la couleur + readonly colorTokens: ReadonlyArray = [ + { name: 'main-color' }, + { name: 'main-color-100' }, + { name: 'main-color-200' }, + { name: 'main-color-300' }, + { name: 'main-color-400' }, + { name: 'main-color-500' }, + { name: 'main-color-alpha-10' }, + { name: 'main-color-alpha-50' }, + { name: 'primary-color' }, + + { name: 'secondary-color-100' }, + { name: 'secondary-color-200' }, + { name: 'secondary-color-300' }, + { name: 'secondary-color-400' }, + { name: 'secondary-color-500' }, + { name: 'secondary-color-alpha-10' }, + { name: 'secondary-color-alpha-50' }, + { name: 'secondary-color' }, + + { name: 'ia-color-100' }, + { name: 'ia-color-200' }, + { name: 'ia-color-300' }, + { name: 'ia-color-400' }, + { name: 'ia-color-500' }, + { name: 'ia-color-alpha-10' }, + { name: 'ia-color-alpha-50' }, + { name: 'ia-color' }, + + { name: 'neutral-color-100' }, + { name: 'neutral-color-200' }, + { name: 'neutral-color-300' }, + { name: 'neutral-color-400' }, + { name: 'neutral-color-500' }, + { name: 'neutral-color-alpha-10' }, + { name: 'neutral-color-alpha-50' }, + { name: 'neutral-color' }, + + { name: 'neutral-blue' }, + { name: 'neutral-white' }, + { name: 'white' }, + + { name: 'error-color-100' }, + { name: 'error-color-200' }, + { name: 'error-color-300' }, + { name: 'error-color-400' }, + { name: 'error-color-500' }, + { name: 'error-color-alpha-10' }, + { name: 'error-color-alpha-50' }, + { name: 'error-color' }, + + { name: 'danger-color' }, + { name: 'danger-color-light' }, + + { name: 'success-color-100' }, + { name: 'success-color-200' }, + { name: 'success-color-300' }, + { name: 'success-color-400' }, + { name: 'success-color-500' }, + { name: 'success-color-alpha-10' }, + { name: 'success-color-alpha-50' }, + { name: 'success-color' }, + + { name: 'warning-color-100' }, + { name: 'warning-color-200' }, + { name: 'warning-color-300' }, + { name: 'warning-color-400' }, + { name: 'warning-color-500' }, + { name: 'warning-color-alpha-10' }, + { name: 'warning-color-alpha-50' }, + { name: 'warning-color' }, + { name: 'warning-color-text' }, + + { name: 'info-color-100' }, + { name: 'info-color-200' }, + { name: 'info-color-300' }, + { name: 'info-color-400' }, + { name: 'info-color-500' }, + { name: 'info-color-alpha-10' }, + { name: 'info-color-alpha-50' }, + { name: 'info-color' }, + + { name: 'gradient-light' }, + { name: 'gradient-intense' }, + + // CSC project variables and others + { name: 'csc-light-yellow-color' }, + { name: 'csc-magic-color' }, + { name: 'csc-copy-color' }, + { name: 'csc-bg-color' }, + { name: 'csc-title-color' }, + { name: 'csc-text-color' }, + { name: 'csc-light-text-color' }, + { name: 'csc-nav-color' }, + { name: 'csc-chips-bg-color' }, + { name: 'csc-textarea-color' }, + { name: 'csc-textarea-placeholder-color' }, + { name: 'csc-file-selector-bg-color' }, + { name: 'csc-filters-box-color' }, + { name: 'csc-light-blue' }, + { name: 'csc-light-grey' }, + { name: 'bot-bubble' }, + + { name: 'main-bg-color' }, + { name: 'main-text-color' }, + { name: 'main-color-active' }, + { name: 'main-bg-color-active' }, + { name: 'event-blue' }, + { name: 'notification-green' }, + { name: 'bg-color-button' }, + { name: 'bg-color-nav' }, + { name: 'bg-color-chat' }, + { name: 'shadow-color' } + ]; +} + + diff --git a/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.stories.ts b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.stories.ts new file mode 100644 index 0000000..dedede5 --- /dev/null +++ b/my-workspace/projects/sae-lib/src/lib/colors-demo/colors-demo.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/angular'; +import { ColorsDemoComponent } from './colors-demo.component'; + +const meta: Meta = { + title: 'Design System/Couleurs/Tokens', + component: ColorsDemoComponent, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj; + +export const Palette: Story = { + args: {}, + render: () => ({ + component: ColorsDemoComponent, + }), +}; + +