up sae-lib style
This commit is contained in:
Tykayn
tykayn
parent
bdd10502a3
commit
ab962e27d3
6 changed files with 352 additions and 1 deletions
14
my-workspace/projects/sae-lib/.storybook/main.ts
Normal file
14
my-workspace/projects/sae-lib/.storybook/main.ts
Normal file
|
|
@ -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;
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<div class="colors-grid">
|
||||
<div class="color-item" *ngFor="let token of colorTokens">
|
||||
<div class="swatch" [ngClass]="'color-' + token.name"></div>
|
||||
<div class="meta">
|
||||
<div class="name">{{ token.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">Les variables alpha peuvent apparaître très claires selon le fond.</div>
|
||||
<div class="legend">
|
||||
<span class="legend-swatch"></span>
|
||||
<span>Pastille utilisant la variable SCSS correspondante</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -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-<token> 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; }
|
||||
|
||||
|
||||
|
|
@ -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<ColorToken> = [
|
||||
{ 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' }
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { ColorsDemoComponent } from './colors-demo.component';
|
||||
|
||||
const meta: Meta<ColorsDemoComponent> = {
|
||||
title: 'Design System/Couleurs/Tokens',
|
||||
component: ColorsDemoComponent,
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<ColorsDemoComponent>;
|
||||
|
||||
export const Palette: Story = {
|
||||
args: {},
|
||||
render: () => ({
|
||||
component: ColorsDemoComponent,
|
||||
}),
|
||||
};
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue