Skip to content

Commit 2661aec

Browse files
ShallowRedShallowRed
authored
♻️(ats-presentation) use exact dsfr color tokens (#679)
1 parent a252d74 commit 2661aec

7 files changed

Lines changed: 1947 additions & 228 deletions

File tree

‎src/web/presentation/frontend/src/stories/01-fondations/Tokens.stories.ts‎

Lines changed: 155 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/vue3'
2+
import { dsfrTokens } from './colors'
23

34
const meta = {
45
title: 'Fondations/Tokens',
@@ -15,63 +16,6 @@ const meta = {
1516
export default meta
1617
type Story = StoryObj<typeof meta>
1718

18-
const COLOR_GROUPS: Array<{ group: string, tokens: string[] }> = [
19-
{
20-
group: 'Texte',
21-
tokens: [
22-
'--text-default-grey',
23-
'--text-title-grey',
24-
'--text-title-blue-france',
25-
'--text-action-high-blue-france',
26-
'--text-action-high-grey',
27-
'--text-mention-grey',
28-
'--text-disabled-grey',
29-
'--text-inverted-grey',
30-
'--text-default-info',
31-
'--text-default-success',
32-
'--text-default-warning',
33-
'--text-default-error',
34-
],
35-
},
36-
{
37-
group: 'Fonds',
38-
tokens: [
39-
'--background-default-grey',
40-
'--background-alt-grey',
41-
'--background-alt-blue-france',
42-
'--background-contrast-grey',
43-
'--background-elevated-grey',
44-
'--background-contrast-info',
45-
'--background-contrast-success',
46-
'--background-contrast-warning',
47-
'--background-contrast-error',
48-
'--background-action-high-blue-france',
49-
'--background-action-high-blue-france-hover',
50-
'--background-action-high-blue-france-active',
51-
'--background-action-high-red-marianne',
52-
'--background-action-high-red-marianne-hover',
53-
'--background-action-high-red-marianne-active',
54-
'--background-default-grey-hover',
55-
'--background-default-grey-active',
56-
'--background-disabled-grey',
57-
],
58-
},
59-
{
60-
group: 'Bordures',
61-
tokens: [
62-
'--border-default-grey',
63-
'--border-default-blue-france',
64-
'--border-action-high-blue-france',
65-
'--border-plain-info',
66-
'--border-plain-success',
67-
'--border-plain-warning',
68-
'--border-plain-error',
69-
'--border-disabled-grey',
70-
'--csp-focus-ring-color',
71-
],
72-
},
73-
]
74-
7519
const SPACING_TOKENS = [
7620
'--csp-space-1',
7721
'--csp-space-2',
@@ -86,13 +30,13 @@ const SPACING_TOKENS = [
8630
]
8731

8832
const FONT_SIZE_TOKENS = [
89-
{ token: '--csp-font-size-xs', label: 'xs — caption' },
90-
{ token: '--csp-font-size-sm', label: 'sm — meta / chip' },
91-
{ token: '--csp-font-size-base', label: 'base — body' },
92-
{ token: '--csp-font-size-md', label: 'md — body fort' },
93-
{ token: '--csp-font-size-lg', label: 'lg — sous-titre' },
94-
{ token: '--csp-font-size-xl', label: 'xl — titre section' },
95-
{ token: '--csp-font-size-2xl', label: '2xl — titre page' },
33+
{ token: '--csp-font-size-xs', label: 'xs - caption' },
34+
{ token: '--csp-font-size-sm', label: 'sm - meta / chip' },
35+
{ token: '--csp-font-size-base', label: 'base - body' },
36+
{ token: '--csp-font-size-md', label: 'md - body fort' },
37+
{ token: '--csp-font-size-lg', label: 'lg - sous-titre' },
38+
{ token: '--csp-font-size-xl', label: 'xl - titre section' },
39+
{ token: '--csp-font-size-2xl', label: '2xl - titre page' },
9640
]
9741

9842
const FONT_WEIGHT_TOKENS = [
@@ -111,15 +55,75 @@ const SHADOW_TOKENS = ['--csp-shadow-sm', '--csp-shadow-md', '--csp-shadow-lg']
11155

11256
export const Couleurs: Story = {
11357
render: () => ({
114-
setup: () => ({ groups: COLOR_GROUPS }),
58+
setup: () => ({ dsfrTokens }),
11559
template: `
116-
<div style="padding: var(--csp-space-6); display: flex; flex-direction: column; gap: var(--csp-space-8);">
117-
<section v-for="g in groups" :key="g.group">
118-
<h3 style="margin: 0 0 var(--csp-space-3); font-size: var(--csp-font-size-lg); color: var(--text-title-grey);">{{ g.group }}</h3>
119-
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--csp-space-3);">
120-
<div v-for="t in g.tokens" :key="t" style="border: 1px solid var(--border-default-grey); border-radius: var(--csp-radius-md); overflow: hidden;">
121-
<div :style="{ background: 'var(' + t + ')', height: '56px' }"></div>
122-
<div style="padding: var(--csp-space-2); font-family: ui-monospace, monospace; font-size: var(--csp-font-size-xs); color: var(--text-mention-grey); background: var(--background-default-grey);">{{ t }}</div>
60+
<div class="flex flex-col gap-12">
61+
<section
62+
v-for="g in dsfrTokens"
63+
:key="g.name"
64+
>
65+
<h3 class="text-2xl font-bold mb-2">
66+
{{ g.name }}
67+
</h3>
68+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-12 gap-y-8 border p-6">
69+
<div
70+
v-for="t in g.tokens"
71+
:key="t"
72+
>
73+
<template v-if="g.type === 'text'">
74+
<p
75+
class="text-2xl font-medium"
76+
:class="[
77+
{ ['bg-[#333]']: t.match('inverted') },
78+
]"
79+
:style="{ color: 'var(--' + t + ')' }">
80+
Lorem ipsum
81+
</p>
82+
<p class="text-[var(--text-mention-grey)]">
83+
{{ t }}
84+
</p>
85+
</template>
86+
<template v-else-if="g.type === 'border'">
87+
<div
88+
class="border-2 p-2"
89+
:style="{ borderColor: 'var(--' + t + ')' }"
90+
>
91+
<p class="text-[var(--text-mention-grey)]">
92+
{{ t }}
93+
</p>
94+
</div>
95+
</template>
96+
<template v-else>
97+
<div class="flex flex-col gap-2">
98+
<div class="flex flex-row gap-2">
99+
<div
100+
v-for="tok in new Array(g.interactive ? 3 : 1)
101+
.fill(null)
102+
.map((_, i) => {
103+
return t + ['', '-hover', '-active'][i]
104+
})"
105+
:key="tok"
106+
class="flex-1 h-12 border border-black"
107+
:style="{ background: 'var(--' + tok + ')' }"
108+
/>
109+
</div>
110+
<div class="text-[var(--text-mention-grey)]">
111+
<p>
112+
{{ t }}
113+
</p>
114+
<template
115+
v-if="g.interactive"
116+
>
117+
<p>
118+
{{ t }}-hover
119+
</p>
120+
<p>
121+
{{ t }}-active
122+
</p>
123+
</template>
124+
</div>
125+
</div>
126+
</template>
123127
</div>
124128
</div>
125129
</section>
@@ -132,11 +136,23 @@ export const Espacements: Story = {
132136
render: () => ({
133137
setup: () => ({ tokens: SPACING_TOKENS }),
134138
template: `
135-
<div style="padding: var(--csp-space-6); display: flex; flex-direction: column; gap: var(--csp-space-3);">
136-
<div v-for="t in tokens" :key="t" style="display: flex; align-items: center; gap: var(--csp-space-4);">
137-
<code style="width: 220px; font-size: var(--csp-font-size-xs); color: var(--text-mention-grey);">{{ t }}</code>
138-
<div :style="{ width: 'var(' + t + ')', height: '20px', background: 'var(--background-action-high-blue-france)', borderRadius: '2px' }"></div>
139-
</div>
139+
<div class="flex flex-col gap-12">
140+
<section>
141+
<h3 class="text-2xl font-bold mb-2">Espacements</h3>
142+
<div class="flex flex-col gap-3 border p-6">
143+
<div
144+
v-for="t in tokens"
145+
:key="t"
146+
class="flex items-center gap-4"
147+
>
148+
<code class="w-52 text-xs text-[var(--text-mention-grey)]">{{ t }}</code>
149+
<div
150+
class="h-5 bg-[var(--background-action-high-blue-france)] rounded-sm"
151+
:style="{ width: 'var(' + t + ')' }"
152+
/>
153+
</div>
154+
</div>
155+
</section>
140156
</div>
141157
`,
142158
}),
@@ -146,31 +162,60 @@ export const Typographie: Story = {
146162
render: () => ({
147163
setup: () => ({ fontSizes: FONT_SIZE_TOKENS, fontWeights: FONT_WEIGHT_TOKENS, lineHeights: LINE_HEIGHT_TOKENS }),
148164
template: `
149-
<div style="padding: var(--csp-space-6); display: flex; flex-direction: column; gap: var(--csp-space-8);">
165+
<div class="flex flex-col gap-12">
150166
<section>
151-
<h3 style="margin: 0 0 var(--csp-space-3); font-size: var(--csp-font-size-lg); color: var(--text-title-grey);">Tailles</h3>
152-
<div style="display: flex; flex-direction: column; gap: var(--csp-space-4);">
153-
<div v-for="t in fontSizes" :key="t.token" style="display: flex; align-items: baseline; gap: var(--csp-space-4); border-bottom: 1px solid var(--border-default-grey); padding-bottom: var(--csp-space-2);">
154-
<span :style="{ fontSize: 'var(' + t.token + ')', color: 'var(--text-title-grey)', minWidth: '280px' }">{{ t.label }}</span>
155-
<code style="font-size: var(--csp-font-size-xs); color: var(--text-mention-grey);">{{ t.token }}</code>
167+
<h3 class="text-2xl font-bold mb-4">Tailles</h3>
168+
<div class="flex flex-col gap-4 border p-6">
169+
<div
170+
v-for="t in fontSizes"
171+
:key="t.token"
172+
class="flex items-baseline gap-4 border-b border-[var(--border-default-grey)] pb-2"
173+
>
174+
<span
175+
class="min-w-[280px] text-[var(--text-title-grey)]"
176+
:style="{ fontSize: 'var(' + t.token + ')' }"
177+
>
178+
{{ t.label }}
179+
</span>
180+
<code class="text-xs text-[var(--text-mention-grey)]">{{ t.token }}</code>
156181
</div>
157182
</div>
158183
</section>
184+
159185
<section>
160-
<h3 style="margin: 0 0 var(--csp-space-3); font-size: var(--csp-font-size-lg); color: var(--text-title-grey);">Graisses</h3>
161-
<div style="display: flex; flex-direction: column; gap: var(--csp-space-4);">
162-
<div v-for="t in fontWeights" :key="t.token" style="display: flex; align-items: baseline; gap: var(--csp-space-4); border-bottom: 1px solid var(--border-default-grey); padding-bottom: var(--csp-space-2);">
163-
<span :style="{ fontWeight: 'var(' + t.token + ')', fontSize: 'var(--csp-font-size-md)', color: 'var(--text-title-grey)', minWidth: '280px' }">{{ t.label }}</span>
164-
<code style="font-size: var(--csp-font-size-xs); color: var(--text-mention-grey);">{{ t.token }}</code>
186+
<h3 class="text-2xl font-bold mb-4">Graisses</h3>
187+
<div class="flex flex-col gap-4 border p-6">
188+
<div
189+
v-for="t in fontWeights"
190+
:key="t.token"
191+
class="flex items-baseline gap-4 border-b border-[var(--border-default-grey)] pb-2"
192+
>
193+
<span
194+
class="min-w-[280px] text-[var(--text-title-grey)] text-md"
195+
:style="{ fontWeight: 'var(' + t.token + ')' }"
196+
>
197+
{{ t.label }}
198+
</span>
199+
<code class="text-xs text-[var(--text-mention-grey)]">{{ t.token }}</code>
165200
</div>
166201
</div>
167202
</section>
203+
168204
<section>
169-
<h3 style="margin: 0 0 var(--csp-space-3); font-size: var(--csp-font-size-lg); color: var(--text-title-grey);">Hauteurs de ligne</h3>
170-
<div style="display: flex; flex-direction: column; gap: var(--csp-space-4);">
171-
<div v-for="t in lineHeights" :key="t.token" style="display: flex; align-items: flex-start; gap: var(--csp-space-4); border-bottom: 1px solid var(--border-default-grey); padding-bottom: var(--csp-space-2);">
172-
<p :style="{ lineHeight: 'var(' + t.token + ')', fontSize: 'var(--csp-font-size-sm)', color: 'var(--text-title-grey)', minWidth: '280px', margin: 0 }">{{ t.label }}<br>Texte exemple sur deux lignes<br>pour visualiser l'interligne</p>
173-
<code style="font-size: var(--csp-font-size-xs); color: var(--text-mention-grey);">{{ t.token }}</code>
205+
<h3 class="text-2xl font-bold mb-4">Hauteurs de ligne</h3>
206+
<div class="flex flex-col gap-4 border p-6">
207+
<div
208+
v-for="t in lineHeights"
209+
:key="t.token"
210+
class="flex items-start gap-4 border-b border-[var(--border-default-grey)] pb-2"
211+
>
212+
<p
213+
class="min-w-[280px] text-[var(--text-title-grey)] text-sm m-0"
214+
:style="{ lineHeight: 'var(' + t.token + ')' }"
215+
>
216+
{{ t.label }}<br>Texte exemple sur deux lignes<br>pour visualiser l'interligne
217+
</p>
218+
<code class="text-xs text-[var(--text-mention-grey)]">{{ t.token }}</code>
174219
</div>
175220
</div>
176221
</section>
@@ -183,11 +228,23 @@ export const Ombres: Story = {
183228
render: () => ({
184229
setup: () => ({ tokens: SHADOW_TOKENS }),
185230
template: `
186-
<div style="padding: var(--csp-space-8); display: flex; gap: var(--csp-space-8); background: var(--background-alt-grey);">
187-
<div v-for="t in tokens" :key="t" style="text-align: center;">
188-
<div :style="{ width: '160px', height: '100px', background: 'var(--background-default-grey)', borderRadius: 'var(--csp-radius-md)', boxShadow: 'var(' + t + ')', marginBottom: 'var(--csp-space-3)' }"></div>
189-
<code style="font-size: var(--csp-font-size-xs); color: var(--text-mention-grey);">{{ t }}</code>
190-
</div>
231+
<div class="flex flex-col gap-12">
232+
<section>
233+
<h3 class="text-2xl font-bold mb-4">Ombres</h3>
234+
<div class="flex gap-8 border p-8 bg-[var(--background-alt-grey)]">
235+
<div
236+
v-for="t in tokens"
237+
:key="t"
238+
class="text-center"
239+
>
240+
<div
241+
class="w-40 h-[100px] bg-[var(--background-default-grey)] rounded-[var(--csp-radius-md)] mb-3"
242+
:style="{ boxShadow: 'var(' + t + ')' }"
243+
/>
244+
<code class="text-xs text-[var(--text-mention-grey)]">{{ t }}</code>
245+
</div>
246+
</div>
247+
</section>
191248
</div>
192249
`,
193250
}),

0 commit comments

Comments
 (0)