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

6
packages/react/.storybook/preview-head.html
View File

@@ -14,12 +14,10 @@
}
.cunningham-theme--dark {
.docblock-source {
background-color: var(--c--globals--colors--gray-100);
}
.prismjs {
background-color: var(--c--globals--colors--gray-100) !important;
background-color: var(--c--globals--colors--gray-800) !important;
}
}
</style>

72
packages/react/.storybook/themes.ts
View File

@@ -1,6 +1,8 @@
import { create } from '@storybook/theming';
import { tokens } from '../src/cunningham-tokens';
const buildLightTheme = () => {
const buildTheme = (colors: typeof tokens.themes.default.contextuals & any, type: 'default' | 'dark' = 'default') => {
return {
brandUrl: 'https://github.com/openfun/cunningham',
brandImage: 'logo-cunningham.svg',
@@ -8,74 +10,46 @@ const buildLightTheme = () => {
brandTarget: '_self',
//
colorPrimary: '#20467F', // content.brand.primary
colorSecondary: '#0659C5', // content.brand.secondary
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
// UI
// appBg: '#F7F8F8', // background.surface.tertiary
appContentBg: '#FFFFFF', // background.surface.primary
appBorderColor: '#E1E2E5', // border.surface.primary
appBg: colors.background.surface.secondary, // background.surface.tertiary
appContentBg: colors.background.surface.tertiary, // background.surface.primary
appBorderColor: colors.border.surface.primary, // border.surface.primary
appBorderRadius: 4,
// Text colors
textColor: '#252627', // content.neutral.primary
textInverseColor: '#5C5F63', // content.neutral.secondary
textColor: colors.content.semantic.neutral.primary, // content.neutral.primary
textInverseColor: colors.content.semantic.neutral.secondary, // content.neutral.secondary
// Toolbar default and active colors
barTextColor: '#74777C', // content.neutral.tertiary
barSelectedColor: '#252627', // content.neutral.primary
barBg: '#FFFFFF', // background.surface.primary
barTextColor: colors.content.semantic.neutral.tertiary, // content.neutral.tertiary
barSelectedColor: colors.content.semantic.neutral.primary, // content.neutral.primary
barBg: colors.background.surface.primary, // background.surface.primary
// Form colors
inputBg: '#FFFFFF', // background.surface.primary
inputBorder: '#A7ACB2', // border.neutral.secondary
inputTextColor: '#252627', // content.neutral.primary
inputBg: colors.background.surface.primary, // background.surface.primary
inputBorder: colors.border.semantic.neutral.secondary, // border.neutral.secondary
inputTextColor: colors.content.semantic.neutral.primary, // content.neutral.primary
inputBorderRadius: 2,
// Code preview colors
codeBg: colors.background.surface.secondary, // background.surface.secondary
codeColor: colors.content.semantic.neutral.primary, // content.neutral.primary
};
};
}
const buildDarkTheme = () => {
return {
brandUrl: 'https://github.com/openfun/cunningham',
brandImage: 'logo-cunningham.svg',
brandTitle: 'Cunningham',
brandTarget: '_self',
//
colorPrimary: '#EAF1FB', // content.brand.primary
colorSecondary: '#D5E4F7', // content.brand.secondary
// UI
appBg: '#222631', // background.surface.tertiary
appContentBg: '#181B24', // background.surface.primary
appBorderColor: '#3A3B3E', // border.surface.primary
appBorderRadius: 4,
// Text colors
// textColor: '#F0F1F2', // content.neutral.primary
// textInverseColor: '#E1E2E5', // content.neutral.secondary
// Toolbar default and active colors
// barTextColor: '#B5B9BE', // content.neutral.tertiary
// barSelectedColor: '#F0F1F2', // content.neutral.primary
barBg: '#222631', // background.surface.primary
// Form colors
// inputBg: '#2F3033', // background.surface.primary
// inputBorder: '#5C5F63', // border.neutral.secondary
// inputTextColor: '#F0F1F2', // content.neutral.primary
// inputBorderRadius: 2,
};
};
export const themes = {
default: create({
base: 'light',
// ...buildLightTheme(),
...buildTheme(tokens.themes.default.contextuals),
}),
dark: create({
base: 'dark',
...buildDarkTheme(),
...buildTheme(tokens.themes.dark.contextuals, 'dark'),
}),
};

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>
);
},

10
packages/tokens/src/bin/Generators/CssGenerator.ts
View File

@@ -259,11 +259,11 @@ function generatePaddingClasses(tokens: Tokens) {
);
return tokensSpacings.map((key) => {
return [
`.p-${key.path.join("-")} { margin: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pb-${key.path.join("-")} { margin-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pt-${key.path.join("-")} { margin-top: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pl-${key.path.join("-")} { margin-left: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pr-${key.path.join("-")} { margin-right: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.p-${key.path.join("-")} { padding: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pb-${key.path.join("-")} { padding-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pt-${key.path.join("-")} { padding-top: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pl-${key.path.join("-")} { padding-left: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pr-${key.path.join("-")} { padding-right: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
].join("");
});
}