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

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