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

💄(app-desk) integrate cunningham design system

Browse Source 
Integrate cunningham design system into app desk.
It comes with some boilerplate code that will have to be
adapted to our needs when we will get the design.
This commit is contained in:
Anthony LC
2024-01-05 15:39:17 +01:00
committed by Anthony LC
parent 4999472005
commit f4ff27636d
9 changed files with 3445 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/frontend/app/desk/cunningham.ts Normal file
View File

@@ -0,0 +1,179 @@
const config = {
themes: {
default: {
theme: {
colors: {
'primary-100': '#EDF5FA',
'primary-150': '#E5EEFA',
'info-150': '#E5EEFA',
},
font: {
sizes: {
ml: '0.938rem',
xl: '1.50rem',
t: '0.6875rem',
s: '0.75rem',
h1: '2.2rem',
h2: '1.7rem',
h3: '1.37rem',
h4: '1.15rem',
h5: '1rem',
h6: '0.87rem',
},
weights: {
thin: 100,
extrabold: 800,
black: 900,
},
},
spacings: {
'0': '0',
none: '0',
auto: 'auto',
bx: '2.2rem',
full: '100%',
},
breakpoints: {
xxs: '320px',
xs: '480px',
},
},
components: {
datagrid: {
header: {
weight: 'var(--c--theme--font--weights--extrabold)',
size: 'var(--c--theme--font--sizes--ml)',
},
cell: {
color: 'var(--c--theme--colors--primary-500)',
size: 'var(--c--theme--font--sizes--ml)',
},
},
'forms-checkbox': {
'background-color': {
hover: '#055fd214',
},
color: 'var(--c--theme--colors--primary-500)',
'font-size': 'var(--c--theme--font--sizes--ml)',
},
'forms-datepicker': {
'border-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
'border-radius': {
hover: 'var(--c--components--forms-datepicker--border-radius)',
focus: 'var(--c--components--forms-datepicker--border-radius)',
},
},
'forms-field': {
color: 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
width: 'auto',
},
'forms-input': {
'value-color': 'var(--c--theme--colors--primary-500)',
'border-color': 'var(--c--theme--colors--primary-500)',
},
'forms-labelledbox': {
'label-color': {
small: 'var(--c--theme--colors--primary-500)',
big: {
disabled: 'var(--c--theme--colors--greyscale-400)',
},
},
},
'forms-select': {
'border-color': 'var(--c--theme--colors--primary-500)',
'border-radius': {
hover: 'var(--c--components--forms-select--border-radius)',
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-100)',
},
'item-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
},
'forms-switch': {
'accent-color': 'var(--c--theme--colors--primary-400)',
},
'forms-textarea': {
'border-color': 'var(--c--components--forms-textarea--border-color)',
'border-color-hover':
'var(--c--components--forms-textarea--border-color)',
'border-radius': {
hover: 'var(--c--components--forms-textarea--border-radius)',
focus: 'var(--c--components--forms-textarea--border-radius)',
},
color: 'var(--c--theme--colors--primary-500)',
disabled: {
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
},
},
button: {
'border-radius': {
active: 'var(--c--components--button--border-radius)',
},
'medium-height': 'auto',
'small-height': 'auto',
success: {
color: 'white',
'color-disabled': 'white',
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--success-600)',
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--success-800)',
},
},
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
primary: {
color: 'var(--c--theme--colors--primary-text)',
'color-active': 'var(--c--theme--colors--primary-text)',
background: {
color: 'var(--c--theme--colors--primary-400)',
'color-active': 'var(--c--theme--colors--primary-500)',
},
border: {
'color-active': 'transparent',
},
},
secondary: {
color: 'var(--c--theme--colors--primary-500)',
'color-hover': 'var(--c--theme--colors--primary-text)',
background: {
color: 'white',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: {
color: 'var(--c--theme--colors--primary-200)',
},
},
tertiary: {
color: 'var(--c--theme--colors--primary-500)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
disabled: {
color: 'white',
background: {
color: '#b3cef0',
},
},
},
},
},
},
};
export default config;

2
src/frontend/app/desk/package.json
View File

@@ -5,11 +5,13 @@
"scripts": {
"dev": "next dev",
"build": "next build",
"build-theme": "cunningham -g css,ts -o src/cunningham --utility-classes",
"start": "next start",
"lint": "next lint",
"prettier": "prettier --write ."
},
"dependencies": {
"@openfun/cunningham-react": "2.4.0",
"next": "14.0.4",
"react": "18",
"react-dom": "18"

29
src/frontend/app/desk/src/app/layout.tsx
View File

@@ -1,23 +1,38 @@
import type { Metadata } from 'next';
'use client';
import { CunninghamProvider, Switch } from '@openfun/cunningham-react';
import { Inter } from 'next/font/google';
import { useState } from 'react';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const [themeDark, setThemeDark] = useState(false);
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body className={inter.className}>
<CunninghamProvider theme={themeDark ? 'dark' : 'default'}>
<div
style={{
backgroundColor: themeDark ? '#555' : 'white',
}}
>
<Switch
label="Dark"
onChange={() => setThemeDark(!themeDark)}
checked={themeDark}
/>
{children}
</div>
</CunninghamProvider>
</body>
</html>
);
}

29
src/frontend/app/desk/src/cunningham/cunningham-custom-tokens.css Normal file
View File

@@ -0,0 +1,29 @@
:root {
/**
* Input
*/
--c--components--forms-input--border-radius--hover: var(
--c--components--forms-input--border-radius
);
--c--components--forms-input--border-radius--focus: var(
--c--components--forms-input--border-radius
);
--c--components--forms-input--border-color--hover: var(
--c--components--forms-input--border-color
);
/**
* Datepicker
**/
--c--components--forms-datepicker--border-color--hover: var(
--c--components--forms-datepicker--border-color
);
/**
* Select
**/
--c--components--forms-select--value-color--disabled: var(
--c--theme--colors--greyscale-400
);
--c--components--forms-labelledbox--label-color--big: var(
--c--theme--colors--primary-500
);
}

299
src/frontend/app/desk/src/cunningham/cunningham-style.css Normal file
View File

@@ -0,0 +1,299 @@
@import '@openfun/cunningham-react/icons';
@import '@openfun/cunningham-react/style';
@import '@openfun/cunningham-react/fonts';
@import './cunningham-tokens.css';
@import './cunningham-custom-tokens.css';
.c__input,
.c__field,
.c__select,
.c__datagrid,
.typo {
font-family: var(--c--theme--font--families--base);
}
.c__field {
line-height: initial;
}
.labelled-box label {
color: var(--c--theme--colors--primary-500);
}
.labelled-box--disabled label {
color: var(--c--components--forms-labelledbox--label-color--small--disabled);
}
.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
top: 50%;
transform: translateY(-50%);
}
/**
* Input
* TextArea
*/
.c__input__wrapper,
.c__textarea__wrapper {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
}
.c__input__wrapper:has(input[readonly]),
.c__input__wrapper:has(input[readonly]) * {
cursor: default;
}
.c__textarea__wrapper:has(input.border-none),
.c__textarea__wrapper:has(input.border-none) *,
.c__input__wrapper:has(input.border-none),
.c__input__wrapper:has(input.border-none) * {
border: none;
}
.c__input__wrapper:hover,
.c__textarea__wrapper:hover {
box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
}
.c__textarea__wrapper--disabled:hover,
.c__input__wrapper--disabled:hover,
.c__input__wrapper:hover:has(input[readonly]) {
box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 0px;
}
.c__input__wrapper--disabled {
color: var(--c--components--forms-input--value-color--disabled);
}
.c__input__wrapper .labelled-box__label.placeholder {
cursor: inherit;
}
.c__input__wrapper .c__input,
.c__textarea__wrapper .c__textarea {
width: 100%;
}
.c__input__wrapper--disabled .c__input {
color: var(--c--components--forms-input--value-color--disabled);
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition:
background-color 0s 600000s,
color 0s 600000s;
}
.c__textarea__wrapper .c__textarea {
color: var(--c--components--forms-textarea--color);
}
.c__textarea__wrapper:hover {
border-color: var(--c--components--forms-textarea--border-color-hover);
}
.c__textarea__wrapper--disabled:hover {
border-color: var(
--c--components--forms-textarea--disabled--border-color-hover
);
}
/**
* Select
*/
.c_select__no_border .c__select .c__select__wrapper,
.c_select__no_border .c__select .c__select__wrapper:hover,
.c_select__no_border
.c__select:not(.c__select--disabled)
.c__select__wrapper:hover {
border: none;
box-shadow: none;
}
.c__select__wrapper {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
min-height: var(--c--components--forms-select--height);
height: auto;
}
.c__select:not(.c__select--disabled) .c__select__wrapper:hover {
box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
}
.c__select__menu__item {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
}
.c__select--disabled .c__select__wrapper label,
.c__select--disabled .c__select__wrapper input,
.c_select__no_bg .c__select__wrapper {
background: none;
}
.c__select__wrapper:focus-within .labelled-box--disabled label {
color: var(--c--components--forms-labelledbox--label-color--small--disabled);
}
.c__select__wrapper .labelled-box {
display: flex;
gap: 0.6rem;
flex-direction: column;
align-items: flex-start;
}
.c__select__wrapper .labelled-box .labelled-box__children {
padding: unset;
padding-right: 5rem;
}
.c__select__wrapper .labelled-box .c__select__inner__actions {
right: 0px;
top: 50%;
position: absolute;
}
.c__select__wrapper label {
position: relative;
padding-right: 5rem;
max-width: none;
}
.c__select__wrapper .c__select__inner__actions__open:focus {
outline: none;
}
.c__select__wrapper .labelled-box__label.c__offscreen {
display: none;
}
/**
* DataGrid
*/
.c__datagrid > table td {
max-width: 10rem;
white-space: normal;
color: var(--c--components--datagrid--cell--color);
font-size: var(--c--components--datagrid--cell--size);
}
.c__datagrid > table th .c__datagrid__header {
color: var(--c--theme--colors--primary-500);
font-weight: var(--c--components--datagrid--header--weight);
font-size: var(--c--components--datagrid--header--size);
}
.c__datagrid > table tbody tr {
border: 1px var(--c--theme--colors--primary-100) solid;
}
.c__datagrid > .c__pagination {
padding-top: 1rem;
justify-content: flex-end;
}
@media (max-width: 380px) {
.c__datagrid > .c__pagination {
flex-direction: column;
align-items: center;
gap: 1rem;
}
}
/**
* Date picker
*/
.c__popover.c__popover--borderless {
z-index: 3;
}
.c__date-picker__wrapper {
transition: all var(--c--theme--transitions--duration)
var(--c--theme--transitions--ease-out);
}
.c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper {
box-shadow: var(--c--theme--colors--primary-500) 0px 0px 0px 2px;
}
.c__date-picker.c__date-picker--invalid:not(.c__date-picker--disabled):hover
.c__date-picker__wrapper {
box-shadow: var(--c--theme--colors--danger-300) 0px 0px 0px 2px;
}
.c__date-picker__wrapper button[aria-label='Clear date'],
.c__date-picker.c__date-picker--invalid .c__date-picker__wrapper * {
color: var(--c--theme--colors--danger-300);
}
/**
* Others
*/
.c__checkbox:focus-within {
border-color: transparent;
background-color: transparent;
}
.c__checkbox {
transition: all 0.8s ease-in-out;
}
/**
* Button
*/
.c__button {
text-decoration: none;
}
.c__button:hover.c__button-no-bg,
.c__button.c__button-no-bg,
.c__button:disabled.c__button-no-bg {
background-color: transparent;
}
.c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s);
}
.c__button--small {
padding: 0.6rem 0.75rem;
}
.c__button--with-icon--right {
padding: 0.7rem var(--c--theme--spacings--t) 0.7rem
var(--c--theme--spacings--s);
}
.c__button--primary {
background-color: var(--c--components--button--primary--background--color);
color: var(--c--components--button--primary--color);
}
.c__button--primary:active,
.c__button--primary.c__button--active {
background-color: var(
--c--components--button--primary--background--color-active
);
color: var(--c--components--button--primary--color-active);
border-color: var(--c--components--button--primary--border--color-active);
}
.c__button:disabled {
background-color: var(--c--components--button--disabled--background--color);
color: var(--c--components--button--disabled--color);
}
.c__button--success {
background-color: var(--c--components--button--success--background--color);
color: var(--c--components--button--success--color);
}
.c__button--success:hover,
.c__button--success:focus-visible {
background-color: var(
--c--components--button--success--background--color-hover
);
color: var(--c--components--button--success--color-hover);
}
.c__button--success:disabled {
background-color: var(
--c--components--button--success--background--color-disabled
);
color: var(--c--components--button--success--color-disabled);
}
.c__button--secondary {
background-color: var(--c--components--button--secondary--background--color);
color: var(--c--components--button--secondary--color);
border: 1px solid var(--c--components--button--secondary--border--color);
}
.c__button--secondary:hover,
.c__button--secondary:focus-visible {
background-color: var(
--c--components--button--secondary--background--color-hover
);
color: var(--c--components--button--secondary--color-hover);
}
.c__button--tertiary {
color: var(--c--components--button--tertiary--color);
border: none;
}
.c__button--tertiary:hover,
.c__button--tertiary:focus-visible {
background-color: var(
--c--components--button--tertiary--background--color-hover
);
color: var(--c--components--button--tertiary--color);
}
.c__button--tertiary:disabled {
background-color: var(
--c--components--button--tertiary--background--color-disabled
);
color: var(--c--components--button--tertiary--color-disabled);
}
.c__button--danger {
background-color: var(--c--components--button--danger--background--color);
}
.c__button--danger:hover,
.c__button--danger:focus-visible {
background-color: var(
--c--components--button--danger--background--color-hover
);
color: var(--c--components--button--danger--color-hover);
}
.c__button--danger:disabled {
background-color: var(
--c--components--button--danger--background--color-disabled
);
}

1154
src/frontend/app/desk/src/cunningham/cunningham-tokens.css Normal file
View File

File diff suppressed because it is too large Load Diff

323
src/frontend/app/desk/src/cunningham/cunningham-tokens.ts Normal file
View File

@@ -0,0 +1,323 @@
export const tokens = {
themes: {
default: {
theme: {
colors: {
'secondary-text': '#555F6B',
'secondary-100': '#F2F7FC',
'secondary-200': '#EBF3FA',
'secondary-300': '#E2EEF8',
'secondary-400': '#DDEAF7',
'secondary-500': '#D4E5F5',
'secondary-600': '#C1D0DF',
'secondary-700': '#97A3AE',
'secondary-800': '#757E87',
'secondary-900': '#596067',
'info-text': '#FFFFFF',
'info-100': '#EBF2FC',
'info-200': '#8CB5EA',
'info-300': '#5894E1',
'info-400': '#377FDB',
'info-500': '#055FD2',
'info-600': '#0556BF',
'info-700': '#044395',
'info-800': '#033474',
'info-900': '#022858',
'greyscale-100': '#FAFAFB',
'greyscale-200': '#F3F4F4',
'greyscale-300': '#E7E8EA',
'greyscale-400': '#C2C6CA',
'greyscale-500': '#9EA3AA',
'greyscale-600': '#79818A',
'greyscale-700': '#555F6B',
'greyscale-800': '#303C4B',
'greyscale-900': '#0C1A2B',
'greyscale-000': '#FFFFFF',
'primary-100': '#EDF5FA',
'primary-200': '#8CB5EA',
'primary-300': '#5894E1',
'primary-400': '#377FDB',
'primary-500': '#055FD2',
'primary-600': '#0556BF',
'primary-700': '#044395',
'primary-800': '#033474',
'primary-900': '#022858',
'success-100': '#EFFCD3',
'success-200': '#DBFAA9',
'success-300': '#BEF27C',
'success-400': '#A0E659',
'success-500': '#76D628',
'success-600': '#5AB81D',
'success-700': '#419A14',
'success-800': '#2C7C0C',
'success-900': '#1D6607',
'warning-100': '#FFF8CD',
'warning-200': '#FFEF9B',
'warning-300': '#FFE469',
'warning-400': '#FFDA43',
'warning-500': '#FFC805',
'warning-600': '#DBA603',
'warning-700': '#B78702',
'warning-800': '#936901',
'warning-900': '#7A5400',
'danger-100': '#F4B0B0',
'danger-200': '#EE8A8A',
'danger-300': '#E65454',
'danger-400': '#E13333',
'danger-500': '#DA0000',
'danger-600': '#C60000',
'danger-700': '#9B0000',
'danger-800': '#780000',
'danger-900': '#5C0000',
'primary-text': '#FFFFFF',
'success-text': '#FFFFFF',
'warning-text': '#FFFFFF',
'danger-text': '#FFFFFF',
'primary-150': '#E5EEFA',
'info-150': '#E5EEFA',
},
font: {
sizes: {
h1: '2.2rem',
h2: '1.7rem',
h3: '1.37rem',
h4: '1.15rem',
h5: '1rem',
h6: '0.87rem',
l: '1rem',
m: '0.8125rem',
s: '0.75rem',
ml: '0.938rem',
xl: '1.50rem',
t: '0.6875rem',
},
weights: {
thin: 100,
light: 300,
regular: 400,
medium: 500,
bold: 600,
extrabold: 800,
black: 900,
},
families: {
base: '"Roboto Flex Variable", sans-serif',
accent: '"Roboto Flex Variable", sans-serif',
},
letterSpacings: {
h1: 'normal',
h2: 'normal',
h3: 'normal',
h4: 'normal',
h5: '1px',
h6: 'normal',
l: 'normal',
m: 'normal',
s: 'normal',
},
},
spacings: {
'0': '0',
xl: '4rem',
l: '3rem',
b: '1.625rem',
s: '1rem',
t: '0.5rem',
st: '0.25rem',
none: '0',
auto: 'auto',
bx: '2.2rem',
full: '100%',
},
transitions: {
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
duration: '250ms',
},
breakpoints: {
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1400px',
xxs: '320px',
},
},
components: {
datagrid: {
header: {
weight: 'var(--c--theme--font--weights--extrabold)',
size: 'var(--c--theme--font--sizes--ml)',
},
cell: {
color: 'var(--c--theme--colors--primary-500)',
size: 'var(--c--theme--font--sizes--ml)',
},
},
'forms-checkbox': {
'background-color': { hover: '#055fd214' },
color: 'var(--c--theme--colors--primary-500)',
'font-size': 'var(--c--theme--font--sizes--ml)',
},
'forms-datepicker': {
'border-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
'border-radius': {
hover: 'var(--c--components--forms-datepicker--border-radius)',
focus: 'var(--c--components--forms-datepicker--border-radius)',
},
},
'forms-field': {
color: 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
width: 'auto',
},
'forms-input': {
'value-color': 'var(--c--theme--colors--primary-500)',
'border-color': 'var(--c--theme--colors--primary-500)',
},
'forms-labelledbox': {
'label-color': {
small: 'var(--c--theme--colors--primary-500)',
big: { disabled: 'var(--c--theme--colors--greyscale-400)' },
},
},
'forms-select': {
'border-color': 'var(--c--theme--colors--primary-500)',
'border-radius': {
hover: 'var(--c--components--forms-select--border-radius)',
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-100)',
},
'item-color': 'var(--c--theme--colors--primary-500)',
'value-color': 'var(--c--theme--colors--primary-500)',
},
'forms-switch': {
'accent-color': 'var(--c--theme--colors--primary-400)',
},
'forms-textarea': {
'border-color': 'var(--c--components--forms-textarea--border-color)',
'border-color-hover':
'var(--c--components--forms-textarea--border-color)',
'border-radius': {
hover: 'var(--c--components--forms-textarea--border-radius)',
focus: 'var(--c--components--forms-textarea--border-radius)',
},
color: 'var(--c--theme--colors--primary-500)',
disabled: {
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
},
},
button: {
'border-radius': {
active: 'var(--c--components--button--border-radius)',
},
'medium-height': 'auto',
'small-height': 'auto',
success: {
color: 'white',
'color-disabled': 'white',
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--success-600)',
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--success-800)',
},
},
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
primary: {
color: 'var(--c--theme--colors--primary-text)',
'color-active': 'var(--c--theme--colors--primary-text)',
background: {
color: 'var(--c--theme--colors--primary-400)',
'color-active': 'var(--c--theme--colors--primary-500)',
},
border: { 'color-active': 'transparent' },
},
secondary: {
color: 'var(--c--theme--colors--primary-500)',
'color-hover': 'var(--c--theme--colors--primary-text)',
background: {
color: 'white',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: { color: 'var(--c--theme--colors--primary-200)' },
},
tertiary: {
color: 'var(--c--theme--colors--primary-500)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
disabled: { color: 'white', background: { color: '#b3cef0' } },
},
},
},
dark: {
theme: {
colors: {
'greyscale-100': '#182536',
'greyscale-200': '#303C4B',
'greyscale-300': '#555F6B',
'greyscale-400': '#79818A',
'greyscale-500': '#9EA3AA',
'greyscale-600': '#C2C6CA',
'greyscale-700': '#E7E8EA',
'greyscale-800': '#F3F4F4',
'greyscale-900': '#FAFAFB',
'greyscale-000': '#0C1A2B',
'primary-100': '#3B4C62',
'primary-200': '#4D6481',
'primary-300': '#6381A6',
'primary-400': '#7FA5D5',
'primary-500': '#8CB5EA',
'primary-600': '#A3C4EE',
'primary-700': '#C3D8F4',
'primary-800': '#DDE9F8',
'primary-900': '#F4F8FD',
'success-100': '#EEF8D7',
'success-200': '#D9F1B2',
'success-300': '#BDE985',
'success-400': '#A0E25D',
'success-500': '#76D628',
'success-600': '#5BB520',
'success-700': '#43941A',
'success-800': '#307414',
'success-900': '#225D10',
'warning-100': '#F7F3D5',
'warning-200': '#F0E5AA',
'warning-300': '#E8D680',
'warning-400': '#E3C95F',
'warning-500': '#D9B32B',
'warning-600': '#BD9721',
'warning-700': '#9D7B1C',
'warning-800': '#7E6016',
'warning-900': '#684D12',
'danger-100': '#F8D0D0',
'danger-200': '#F09898',
'danger-300': '#F09898',
'danger-400': '#ED8585',
'danger-500': '#E96666',
'danger-600': '#DD6666',
'danger-700': '#C36666',
'danger-800': '#AE6666',
'danger-900': '#9D6666',
},
},
},
},
};

7
src/frontend/app/desk/src/cunningham/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import { tokens } from './cunningham-tokens';
const themeTokens = tokens.themes.default.theme;
const colorsTokens = tokens.themes.default.theme.colors;
const componentTokens = tokens.themes.default.components;
export { tokens, themeTokens, componentTokens, colorsTokens };

1435
src/frontend/app/desk/yarn.lock
View File

File diff suppressed because it is too large Load Diff