♻️(docs) various update for storybook
Color fixes due to new tokens architecture and few rewords.
This commit is contained in:
Nathan Vasse
@@ -4,18 +4,19 @@
|
||||
padding: 3px 5px;
|
||||
white-space: nowrap;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #EEEEEE;
|
||||
border: 1px solid #eeeeee;
|
||||
color: rgba(51, 51, 51, 0.9);
|
||||
background-color: #F8F8F8;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
/* Prevent the index.scss font-family to override code blocks's one. */
|
||||
pre * {
|
||||
font-family: ui-monospace,Menlo,Monaco,"Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Droid Sans Mono","Courier New",monospace;
|
||||
font-family:
|
||||
ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono",
|
||||
"Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
.cunningham-theme--dark {
|
||||
|
||||
|
||||
.prismjs {
|
||||
background-color: var(--c--globals--colors--gray-800) !important;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
import { create } from '@storybook/theming';
|
||||
import { tokens } from '../src/cunningham-tokens';
|
||||
import { create } from "@storybook/theming";
|
||||
import { tokens } from "../src/cunningham-tokens";
|
||||
|
||||
|
||||
const buildTheme = (colors: typeof tokens.themes.default.contextuals & any, type: 'default' | 'dark' = 'default') => {
|
||||
const buildTheme = (
|
||||
colors: typeof tokens.themes.default.contextuals & any,
|
||||
type: "default" | "dark" = "default"
|
||||
) => {
|
||||
return {
|
||||
brandUrl: 'https://github.com/openfun/cunningham',
|
||||
brandImage: 'logo-cunningham.svg',
|
||||
brandTitle: 'Cunningham',
|
||||
brandTarget: '_self',
|
||||
brandUrl: "https://github.com/openfun/cunningham",
|
||||
brandImage: "logo-cunningham.svg",
|
||||
brandTitle: "Cunningham",
|
||||
brandTarget: "_self",
|
||||
|
||||
//
|
||||
colorPrimary: colors.content.semantic.brand.primary, // content.brand.primary
|
||||
colorSecondary: type === 'dark' ? colors.content.semantic.contextual.primary : colors.content.semantic.brand.secondary, // content.brand.secondary
|
||||
colorSecondary: colors.content.semantic.brand.secondary, // content.brand.secondary
|
||||
|
||||
// UI
|
||||
appBg: colors.background.surface.secondary, // background.surface.tertiary
|
||||
@@ -38,28 +40,26 @@ const buildTheme = (colors: typeof tokens.themes.default.contextuals & any, type
|
||||
codeBg: colors.background.surface.secondary, // background.surface.secondary
|
||||
codeColor: colors.content.semantic.neutral.primary, // content.neutral.primary
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
export const themes = {
|
||||
default: create({
|
||||
base: 'light',
|
||||
base: "light",
|
||||
...buildTheme(tokens.themes.default.contextuals),
|
||||
}),
|
||||
dark: create({
|
||||
base: 'dark',
|
||||
...buildTheme(tokens.themes.dark.contextuals, 'dark'),
|
||||
base: "dark",
|
||||
...buildTheme(tokens.themes.dark.contextuals, "dark"),
|
||||
}),
|
||||
};
|
||||
|
||||
export enum Themes {
|
||||
dark = 'dark',
|
||||
default = 'default'
|
||||
dark = "dark",
|
||||
default = "default",
|
||||
}
|
||||
|
||||
export const BACKGROUND_COLOR_TO_THEME = {
|
||||
'#181B24': Themes.dark,
|
||||
"#181B24": Themes.dark,
|
||||
};
|
||||
|
||||
export const getThemeFromGlobals = (globals: any): string => {
|
||||
|
||||
@@ -64,7 +64,9 @@ export const OverflowLabels = () => {
|
||||
<Input label={"City" + overflow} fullWidth={true} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
|
||||
<div className="fs-l clr-content-semantic-neutral-primary mb-t">
|
||||
Your curriculum vitae
|
||||
</div>
|
||||
<FileUploader
|
||||
fullWidth={true}
|
||||
text="pdf only ( 4mb maximum )"
|
||||
@@ -79,7 +81,7 @@ export const OverflowLabels = () => {
|
||||
<Button fullWidth={true}>Apply</Button>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-gray-800 fs-m"
|
||||
className="clr-content-semantic-neutral-primary fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
|
||||
@@ -84,9 +84,12 @@ export const Login = () => {
|
||||
/>
|
||||
</div>
|
||||
<Button fullWidth={true}>Log in</Button>
|
||||
<div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
|
||||
<div
|
||||
className="fs-m clr-content-semantic-neutral-primary"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
You do not have an account?{" "}
|
||||
<a href="/#" className="clr-gray-800">
|
||||
<a href="/#" className="clr-content-semantic-neutral-primary">
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +72,9 @@ const SportsBase = ({ values }: SportProps) => {
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<div className="fs-l clr-gray-800 mb-t">Gender</div>
|
||||
<div className="fs-l clr-content-semantic-neutral-primary mb-t">
|
||||
Gender
|
||||
</div>
|
||||
<RadioGroup
|
||||
state={getFieldState("gender", methods.formState)}
|
||||
text={getFieldErrorMessage("gender", methods.formState)}
|
||||
@@ -158,7 +160,7 @@ const SportsBase = ({ values }: SportProps) => {
|
||||
<Button fullWidth={true}>Apply</Button>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-gray-800 fs-m"
|
||||
className="clr-content-semantic-neutral-primary fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
|
||||
@@ -25,7 +25,7 @@ export const Login = () => {
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-gray-900"
|
||||
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Log in
|
||||
@@ -43,9 +43,12 @@ export const Login = () => {
|
||||
<Checkbox label="Remember me" />
|
||||
</div>
|
||||
<Button fullWidth={true}>Log in</Button>
|
||||
<div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
|
||||
<div
|
||||
className="fs-m clr-content-semantic-neutral-primary"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
You do not have an account?{" "}
|
||||
<a href="/#" className="clr-gray-800">
|
||||
<a href="/#" className="clr-content-semantic-neutral-primary">
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
@@ -65,7 +68,7 @@ export const Application = () => {
|
||||
method="get"
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-gray-900"
|
||||
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Application
|
||||
@@ -102,7 +105,9 @@ export const Application = () => {
|
||||
<Input label="City" fullWidth={true} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
|
||||
<div className="fs-l clr-content-semantic-neutral-primary mb-t">
|
||||
Your curriculum vitae
|
||||
</div>
|
||||
<FileUploader
|
||||
fullWidth={true}
|
||||
text="pdf only ( 4mb maximum )"
|
||||
@@ -142,7 +147,7 @@ export const Application = () => {
|
||||
<Button fullWidth={true}>Apply</Button>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-gray-800 fs-m"
|
||||
className="clr-content-semantic-neutral-primary fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
@@ -163,13 +168,15 @@ export const Sports = () => {
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-gray-900"
|
||||
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Register
|
||||
</h1>
|
||||
<div>
|
||||
<div className="fs-l clr-gray-800 mb-t">Gender</div>
|
||||
<div className="fs-l clr-content-semantic-neutral-primary mb-t">
|
||||
Gender
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
<Radio name="gender" label="Male" fullWidth={true} />
|
||||
<Radio name="gender" label="Female" />
|
||||
@@ -234,7 +241,7 @@ export const Sports = () => {
|
||||
<Button fullWidth={true}>Apply</Button>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-gray-800 fs-m"
|
||||
className="clr-content-semantic-neutral-primary fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
@@ -254,13 +261,15 @@ export const SportsDisabled = () => {
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-gray-900"
|
||||
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Register
|
||||
</h1>
|
||||
<div>
|
||||
<div className="fs-l clr-gray-800 mb-t">Gender</div>
|
||||
<div className="fs-l clr-content-semantic-neutral-primary mb-t">
|
||||
Gender
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
<Radio name="gender" label="Male" fullWidth={true} disabled={true} />
|
||||
<Radio name="gender" label="Female" disabled={true} />
|
||||
@@ -347,7 +356,7 @@ export const SportsDisabled = () => {
|
||||
</Button>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-gray-800 fs-m"
|
||||
className="clr-content-semantic-neutral-primary fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
|
||||
@@ -27,7 +27,9 @@ export const Default = {
|
||||
render: Template,
|
||||
args: {
|
||||
label: "Your label here",
|
||||
children: <span className="clr-gray-800">Hello world</span>,
|
||||
children: (
|
||||
<span className="clr-content-semantic-neutral-primary">Hello world</span>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
@@ -44,6 +46,8 @@ export const NoLabel = {
|
||||
args: {
|
||||
label: "Your label here",
|
||||
hideLabel: true,
|
||||
children: <span className="clr-gray-800">Hello world</span>,
|
||||
children: (
|
||||
<span className="clr-content-semantic-neutral-primary">Hello world</span>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
@@ -62,7 +62,7 @@ export const BackgroundColors: Story = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexShrink: 0,
|
||||
flexBasis: "120px",
|
||||
flexBasis: "200px",
|
||||
alignItems: "center",
|
||||
flexGrow: 1,
|
||||
}}
|
||||
@@ -71,7 +71,7 @@ export const BackgroundColors: Story = {
|
||||
style={{ width: "72px", height: "48px" }}
|
||||
className={"bg-" + color + "-" + tint}
|
||||
/>
|
||||
<pre className="clr-gray-800 fs-s mt-st">
|
||||
<pre className="clr-content-semantic-neutral-primary fs-s mt-st">
|
||||
bg-semantic-{color}-{tint}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Canvas, Meta, Story, Source } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, Source } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="Migrating/From v3 to v4" />
|
||||
|
||||
@@ -8,8 +8,6 @@ The Cunningham color system has been revised with a methodical approach focused
|
||||
|
||||
An algorithm (available soon) has been developed to facilitate the rapid generation and adaptation of color palettes, producing a JSON file compatible with the existing infrastructure and natively supporting both light and dark display modes. This algorithmic solution optimizes Cunningham's adaptability to a wide range of user environments.
|
||||
|
||||
|
||||
|
||||
# Structure
|
||||
|
||||
The color system is structured around two complementary, interdependent palettes:
|
||||
@@ -19,27 +17,37 @@ The color system is structured around two complementary, interdependent palettes
|
||||
|
||||
This two-tier architecture facilitates the systematic propagation of changes: any alteration to the primitive palette is automatically reflected in all interface elements without the need for additional adjustments (see Figure 1).
|
||||
|
||||
|
||||
<figure>
|
||||
<img src="docs/migrating/ressources/v3_to_v4/one.gif" alt="Changing the color primitive palette automatically updates the color contextual palette while maintaining contrast ratios inside components." />
|
||||
<figcaption style={{ textAlign: 'center' }}>Figure 1. Changing the color primitive palette automatically updates the color contextual palette while maintaining contrast ratios inside components.</figcaption>
|
||||
<img
|
||||
src="docs/migrating/ressources/v3_to_v4/Figure1.gif"
|
||||
alt="Changing the color primitive palette automatically updates the color contextual palette while maintaining contrast ratios inside components."
|
||||
/>
|
||||
<figcaption style={{ textAlign: "center" }}>
|
||||
Figure 1. Changing the color primitive palette automatically updates the
|
||||
color contextual palette while maintaining contrast ratios inside
|
||||
components.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
A **theme** is a comprehensive color configuration derived from a brand's visual identity. It constitutes a specific implementation of the "Color Primitive" palette with predetermined color values. The Cunningham theme is provided as the default reference.
|
||||
|
||||
A **mode** represents a systematic modulation of luminance and contrast parameters from an established theme, executed through the "Color Contextual" palette. This parametric adjustment accommodates diverse usage contexts while preserving the fundamental chromatic identity. Standard implementations include light and dark modes. These could be supplemented with specialized modes (such as high contrast) to meet specific accessibility needs or style requirements.
|
||||
|
||||
|
||||
# Palettes
|
||||
|
||||
## Color Primitive
|
||||
|
||||
The Color Primitive palette includes 16 colors. Each color is available in 19 distinct shades, except gray, which contains 22. Each shade is referenced by a number between 000 and 1000. A shade of 000 corresponds to pure white, while a shade of 1000 corresponds to pure black. Each intermediate shade value is then defined on the basis of the perceived luminance noted L* in the CIELAB color space ([more info on CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space)). Using L* as a reference ensures that each primitive color fits into a predictable tonal scale, regardless of hue or saturation. This ensures consistent contrast levels across all themes, promoting universal accessibility. The correspondence between shade (S) and perceived luminance (L*) is as follows: $S=1000 \times (1-L^*)$ with $L^* \in [0;1]$. See Figure 2 for an example.
|
||||
|
||||
|
||||
<figure>
|
||||
<img src="docs/migrating/ressources/v3_to_v4/Figure2.png" alt="Breakdown of the first 6 colors of a Color Primitive theme. Gray includes 3 complementary shades." />
|
||||
<figcaption style={{ textAlign: 'center' }}>Figure 2. Breakdown of the first 6 colors of a "Color Primitive" theme. Gray includes 3 complementary shades.</figcaption>
|
||||
<img
|
||||
src="docs/migrating/ressources/v3_to_v4/Figure2.png"
|
||||
alt="Breakdown of the first 6 colors of a Color Primitive theme. Gray includes 3 complementary shades."
|
||||
/>
|
||||
<figcaption style={{ textAlign: "center" }}>
|
||||
Figure 2. Breakdown of the first 6 colors of a "Color Primitive" theme. Gray
|
||||
includes 3 complementary shades.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
To optimize visual ergonomics in dark mode, it is necessary to reduce color saturation in the darkest shades (S > 600). This gradual desaturation avoids perceptual glare in dark mode and improves legibility in low ambient light environments.
|
||||
@@ -49,17 +57,26 @@ An algorithm will soon be available to automatically adjust the parameters of pe
|
||||
## Color Contextual
|
||||
|
||||
<figure>
|
||||
<img src="docs/migrating/ressources/v3_to_v4/Figure3.png" alt="Excerpt from the Color Contextual palette for the background.semantic.brand role, with light and dark modes." />
|
||||
<figcaption style={{ textAlign: 'center' }}>Figure 3. excerpt from the "Color Contextual" palette for the background.semantic.brand role, with light and dark modes.</figcaption>
|
||||
<img
|
||||
src="docs/migrating/ressources/v3_to_v4/Figure3.png"
|
||||
alt="Excerpt from the Color Contextual palette for the background.semantic.brand role, with light and dark modes."
|
||||
/>
|
||||
<figcaption style={{ textAlign: "center" }}>
|
||||
Figure 3. excerpt from the "Color Contextual" palette for the
|
||||
background.semantic.brand role, with light and dark modes.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
The "Color Contextual" palette allows you to classify the various colors of a theme according to their actual use, differentiating between each of the modes (light, dark, etc.). This makes it possible (1) to simplify and limit errors when assigning colors to different components, and (2) to manage multiple modes.
|
||||
|
||||
This palette introduces the notion of roles, whose format is as follows:
|
||||
|
||||
<Source dark={true} code={`
|
||||
<Source
|
||||
dark={true}
|
||||
code={`
|
||||
layer.scope.(intent).variant.(state)
|
||||
`}></Source>
|
||||
`}
|
||||
></Source>
|
||||
|
||||
### Layer
|
||||
|
||||
@@ -96,16 +113,14 @@ The state characterizes the interactional state of an interface element (e.g., H
|
||||
|
||||
# **Accessibility**
|
||||
|
||||
Accessibility is a fundamental principle guiding the design of this color system. As demonstrated in the Color Primitive section, the methodical standardization of luminance values (L*) ensures consistent contrast ratios, regardless of the theme or display mode selected. This systematic approach eliminates the need to re-evaluate accessibility parameters when implementing new themes, ensuring ongoing compliance with WCAG accessibility standards. The main objective is to establish an accessibility framework that is invariant and resilient in the face of multiple usage contexts.
|
||||
Accessibility is a fundamental principle guiding the design of this color system. As demonstrated in the Color Primitive section, the methodical standardization of luminance values (L\*) ensures consistent contrast ratios, regardless of the theme or display mode selected. This systematic approach eliminates the need to re-evaluate accessibility parameters when implementing new themes, ensuring ongoing compliance with WCAG accessibility standards. The main objective is to establish an accessibility framework that is invariant and resilient in the face of multiple usage contexts.
|
||||
|
||||
# **Technical implementation**
|
||||
|
||||
Du à tout les changements, et à l'architecture des tokens, toutes les variables css ont changés. Vous devez donc mettre à jour vos variables css. Il faut absolument
|
||||
regénérer vos tokens avec la commande `cunningham -g css,ts,js` pour avoir les nouvelles variables css.
|
||||
|
||||
Dans le cas des tokens d'un theme, toutes les valeurs sémantiques sont dans le ```theme.globals```. Cela correspond aux couleurs primitives, transitions, fonts, spacings, breakpoints, font weights, font families, etc.
|
||||
De fait toutes les valeurs contextuelles sont dans le ```theme.contextuals```. Cela correspond aux couleurs de fond, aux couleurs de contenu, aux couleurs de bordure, aux couleurs de palette, etc.
|
||||
Due to all the changes and the token architecture, all CSS variables have changed. You must therefore update your CSS variables. It is absolutely necessary to regenerate your tokens with the command `cunningham -g css,ts,js` to get the new CSS variables.
|
||||
|
||||
In the case of theme tokens, all primitive values are in `theme.globals`. This corresponds to primitive colors, transitions, fonts, spacings, breakpoints, font weights, font families, etc.
|
||||
As a result, all contextual values are in `theme.contextuals`. This corresponds to background colors, content colors, border colors, palette colors, etc.
|
||||
|
||||
```json
|
||||
// Old structure
|
||||
@@ -113,18 +128,17 @@ De fait toutes les valeurs contextuelles sont dans le ```theme.contextuals```. C
|
||||
"themes": {
|
||||
"default": {
|
||||
"theme": {
|
||||
"colors": "..."
|
||||
"font": "..."
|
||||
"spacings": "..."
|
||||
"breakpoints": "..."
|
||||
"...": "..."
|
||||
"colors": "...",
|
||||
"font": "...",
|
||||
"spacings": "...",
|
||||
"breakpoints": "...",
|
||||
...
|
||||
},
|
||||
"components": {
|
||||
"button": {
|
||||
"...": "..."
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -135,38 +149,36 @@ De fait toutes les valeurs contextuelles sont dans le ```theme.contextuals```. C
|
||||
"themes": {
|
||||
"default": {
|
||||
"globals": {
|
||||
"colors": "..."
|
||||
"font": "..."
|
||||
"spacings": "..."
|
||||
"breakpoints": "..."
|
||||
"...": "..."
|
||||
"colors": "...",
|
||||
"font": "...",
|
||||
"spacings": "...",
|
||||
"breakpoints": "...",
|
||||
...
|
||||
},
|
||||
"contextuals": {
|
||||
"background": {
|
||||
"...": "..."
|
||||
}
|
||||
},
|
||||
"content": {
|
||||
"...": "..."
|
||||
}
|
||||
},
|
||||
"border": {
|
||||
"...": "..."
|
||||
}
|
||||
}
|
||||
},
|
||||
"components": {
|
||||
"button": {
|
||||
"...": "..."
|
||||
},
|
||||
...
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## **Migration Steps**
|
||||
|
||||
|
||||
### **1. Update Dependencies**
|
||||
|
||||
First, update your `package.json` to use version 4.0.0:
|
||||
@@ -196,7 +208,7 @@ All your references to old CSS variables will need to be updated. The new variab
|
||||
```css
|
||||
/* Old structure (v3) */
|
||||
.test {
|
||||
color: var(--c--theme--colors--primary-500)
|
||||
color: var(--c--theme--colors--primary-500);
|
||||
}
|
||||
|
||||
/* New structure (v4) */
|
||||
@@ -207,13 +219,12 @@ All your references to old CSS variables will need to be updated. The new variab
|
||||
color: var(--c--contextuals--border--semantic--brand--primary);
|
||||
color: var(--c--contextuals--palette--brand--primary);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### **3. Update Button Props**
|
||||
|
||||
Dans le cas du button, il faut mettre à jour les props `color` et `variant` pour utiliser le nouveau structure.
|
||||
La props color correspond au color primitive et la props variant au type de button.
|
||||
For buttons, you need to update the `color` and `variant` props to use the new structure.
|
||||
The color prop corresponds to the primitive color and the variant prop corresponds to the button type.
|
||||
|
||||
```tsx
|
||||
/* Old structure (v3) */
|
||||
@@ -228,7 +239,7 @@ La props color correspond au color primitive et la props variant au type de butt
|
||||
|
||||
### **4. Verify Accessibility**
|
||||
|
||||
The new architecture automatically ensures WCAG accessibility standards compliance through methodical standardization of luminance values (L*). Contrast ratios are now consistent regardless of the selected theme or display mode.
|
||||
The new architecture automatically ensures WCAG accessibility standards compliance through methodical standardization of luminance values (L\*). Contrast ratios are now consistent regardless of the selected theme or display mode.
|
||||
|
||||
## **Migration Benefits**
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export const Default: Story = {
|
||||
// Trier les espacements par valeur croissante avant de les afficher
|
||||
// Sort spacings by value before rendering
|
||||
const sortedSpacings = Object.entries(
|
||||
tokens.themes.default.globals.spacings,
|
||||
tokens.themes.default.globals.spacings
|
||||
).sort((a, b) => {
|
||||
// On retire les éventuelles unités pour comparer numériquement
|
||||
const parse = (v: any) =>
|
||||
@@ -30,13 +30,13 @@ export const Default: Story = {
|
||||
style={{ display: "flex", alignItems: "center", gap: "10px" }}
|
||||
>
|
||||
<div
|
||||
className="fw-bold clr-content-neutral-primary"
|
||||
className="fw-bold clr-content-semantic-neutral-primary"
|
||||
style={{ width: "50px" }}
|
||||
>
|
||||
-{key}
|
||||
</div>
|
||||
<div
|
||||
className="fw-medium fs-m clr-content-neutral-primary"
|
||||
className="fw-medium fs-m clr-content-semantic-neutral-primary"
|
||||
style={{ width: "100px" }}
|
||||
>
|
||||
{value}
|
||||
@@ -56,11 +56,11 @@ export const Default: Story = {
|
||||
export const Example: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<div className="clr-gray-800 bg-error-tertiary">
|
||||
<div className="clr-gray-800 bg-brand-tertiary fw-medium p-t mb-l">
|
||||
<div className="clr-content-semantic-neutral-primary bg-yellow-500">
|
||||
<div className="clr-content-semantic-neutral-primary bg-purple-500 fw-medium p-t mb-l">
|
||||
Tiny padding + Large margin bottom
|
||||
</div>
|
||||
<div className="content-neutral-primary bg-neutral-tertiary fw-medium p-l ml-b">
|
||||
<div className="content-neutral-primary bg-pink-500 fw-medium p-l ml-b">
|
||||
Large padding + Base margin left
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Canvas, Meta, Source } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Source } from "@storybook/addon-docs";
|
||||
import * as Stories from "./typo.stories";
|
||||
|
||||
<Meta title="Getting Started/Typography" />
|
||||
@@ -12,7 +12,7 @@ Cunningham comes with an existing toolkit to deal with typography, and it's easy
|
||||
You can use custom utility classes to set the font size of an element. These classes are named using the format `.fs-{size}`.
|
||||
|
||||
<Source
|
||||
language='tsx'
|
||||
language="tsx"
|
||||
dark
|
||||
format={false}
|
||||
code={`
|
||||
@@ -25,7 +25,7 @@ You can use custom utility classes to set the font size of an element. These cla
|
||||
You can customize the values of the font size design tokens with the configuration file this way:
|
||||
|
||||
<Source
|
||||
language='ts'
|
||||
language="ts"
|
||||
dark
|
||||
format={true}
|
||||
code={`
|
||||
@@ -53,7 +53,7 @@ You can customize the values of the font size design tokens with the configurati
|
||||
You can use custom utility classes to set the font weight of an element. These classes are named using the format `.fw-{weight}`.
|
||||
|
||||
<Source
|
||||
language='tsx'
|
||||
language="tsx"
|
||||
dark
|
||||
format={false}
|
||||
code={`
|
||||
@@ -66,7 +66,7 @@ You can use custom utility classes to set the font weight of an element. These c
|
||||
You can customize the values of the font weight design tokens with the configuration file this way:
|
||||
|
||||
<Source
|
||||
language='ts'
|
||||
language="ts"
|
||||
dark
|
||||
format={true}
|
||||
code={`
|
||||
@@ -98,11 +98,11 @@ The font associated with `f-base` is the default font for the whole application,
|
||||
class on every dom element.
|
||||
|
||||
<Source
|
||||
language='tsx'
|
||||
language="tsx"
|
||||
dark
|
||||
format={false}
|
||||
code={`
|
||||
<div className="clr-gray-800 f-accent">Accent text</div>
|
||||
<div className="clr-content-semantic-neutral-primary f-accent">Accent text</div>
|
||||
`}
|
||||
/>
|
||||
|
||||
@@ -111,7 +111,7 @@ class on every dom element.
|
||||
You can customize the values of the font family design tokens with the configuration file this way:
|
||||
|
||||
<Source
|
||||
language='ts'
|
||||
language="ts"
|
||||
dark
|
||||
format={true}
|
||||
code={`
|
||||
|
||||
@@ -14,7 +14,10 @@ export const Sizes: Story = {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
||||
{Object.keys(tokens.themes.default.globals.font.sizes).map((key) => (
|
||||
<div key={key} className={"clr-gray-800 fs-" + key}>
|
||||
<div
|
||||
key={key}
|
||||
className={"clr-content-semantic-neutral-primary fs-" + key}
|
||||
>
|
||||
Using the <code>fs-{key}</code> class
|
||||
</div>
|
||||
))}
|
||||
@@ -28,7 +31,10 @@ export const Weights: Story = {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
||||
{Object.keys(tokens.themes.default.globals.font.weights).map((key) => (
|
||||
<div key={key} className={"clr-gray-800 fs-l fw-" + key}>
|
||||
<div
|
||||
key={key}
|
||||
className={"clr-content-semantic-neutral-primary fs-l fw-" + key}
|
||||
>
|
||||
Using the <code>fw-{key}</code> class
|
||||
</div>
|
||||
))}
|
||||
@@ -42,7 +48,10 @@ export const Families: Story = {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
||||
{Object.keys(tokens.themes.default.globals.font.families).map((key) => (
|
||||
<div key={key} className={"clr-gray-800 f-" + key}>
|
||||
<div
|
||||
key={key}
|
||||
className={"clr-content-semantic-neutral-primary f-" + key}
|
||||
>
|
||||
Using the <code>f-{key}</code> class
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user