studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(demo) update demo app

Browse Source 
Update the demo app to make it work with new tokens.
This commit is contained in:
Nathan Panchout
2025-09-17 16:48:37 +02:00
committed by NathanVss
parent 47e3e28090
commit f93a83655c
19 changed files with 2936 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/components/Button/_index.scss
View File

@@ -1,5 +1,5 @@
@mixin button-variant($context) {
white-space: nowrap;
&:hover,
&:focus-visible {
border-radius: var(--c--components--button--border-radius--focus);

9
packages/react/src/components/Forms/Switch/index.stories.tsx
View File

@@ -193,15 +193,6 @@ export const FormExampleRight = {
state="error"
disabled={true}
/>
<Switch
label="VPN"
defaultChecked={true}
fullWidth={true}
labelSide="right"
text="You must paDDy for this feature"
state="error"
disabled={true}
/>
</div>
</form>
);

2
packages/react/src/components/Pagination/index.stories.tsx
View File

@@ -47,7 +47,7 @@ export const List = () => {
<div>
<div>
{items.map((item) => (
<div className="p-t bg-semantic--neutral--tertiary mb-t" key={item}>
<div className="p-t bg-semantic-neutral-tertiary mb-t" key={item}>
{item}
</div>
))}

5
packages/react/src/components/Tooltip/tokens.ts
View File

@@ -3,9 +3,10 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => {
return {
"border-radius": "0.5rem",
"background-color": defaults.contextuals.background.semantic.neutral.secondary,
"background-color":
defaults.contextuals.background.semantic.neutral.tertiary,
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
color: defaults.contextuals.content.semantic.neutral.secondary,
color: defaults.contextuals.content.semantic.neutral.tertiary,
"font-size": defaults.globals.font.sizes.s,
padding: "1rem",
"max-width": "150px",

4
packages/react/src/cunningham-tokens.css
View File

@@ -584,9 +584,9 @@
--c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-350);
--c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-150);
--c--components--tooltip--border-radius: 0.5rem;
--c--components--tooltip--background-color: var(--c--contextuals--background--semantic--neutral--secondary);
--c--components--tooltip--background-color: var(--c--contextuals--background--semantic--neutral--tertiary);
--c--components--tooltip--border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
--c--components--tooltip--color: var(--c--contextuals--content--semantic--neutral--secondary);
--c--components--tooltip--color: var(--c--contextuals--content--semantic--neutral--tertiary);
--c--components--tooltip--font-size: var(--c--globals--font--sizes--s);
--c--components--tooltip--padding: 1rem;
--c--components--tooltip--max-width: 150px;

2
packages/react/src/cunningham-tokens.js
View File

File diff suppressed because one or more lines are too long

4
packages/react/src/cunningham-tokens.scss
View File

@@ -745,9 +745,9 @@ $themes: (
'components': (
'tooltip': (
'border-radius': 0.5rem,
'background-color': #E1E2E5,
'background-color': #F0F1F2,
'border-color': #D2D4D8,
'color': #5C5F63,
'color': #74777C,
'font-size': 0.75rem,
'padding': 1rem,
'max-width': 150px

2
packages/react/src/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long

56
packages/react/src/docs/spacings.stories.tsx
View File

@@ -11,35 +11,43 @@ type Story = StoryObj<{}>;
export const Default: Story = {
render: () => {
// 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,
).sort((a, b) => {
// On retire les éventuelles unités pour comparer numériquement
const parse = (v: any) =>
parseFloat(typeof v === "string" ? v : String(v));
return parse(a[1]) - parse(b[1]);
});
return (
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
{Object.entries(tokens.themes.default.globals.spacings).map(
([key, value]) => {
return (
{sortedSpacings.map(([key, value]) => {
return (
<div
key={key}
style={{ display: "flex", alignItems: "center", gap: "10px" }}
>
<div
key={key}
style={{ display: "flex", alignItems: "center", gap: "10px" }}
className="fw-bold clr-content-neutral-primary"
style={{ width: "50px" }}
>
<div
className="fw-bold clr-secondary-text"
style={{ width: "30px" }}
>
-{key}
</div>
<div
className="fw-medium fs-m clr-secondary-text"
style={{ width: "100px" }}
>
{value}
</div>
<div
className={"bg-error-tertiary pl-" + key}
style={{ height: "48px", width: 0 }}
/>
-{key}
</div>
);
}
)}
<div
className="fw-medium fs-m clr-content-neutral-primary"
style={{ width: "100px" }}
>
{value}
</div>
<div
className={"bg-semantic-error-tertiary pl-" + key}
style={{ height: "48px", width: 0 }}
/>
</div>
);
})}
</div>
);
},