electron-rare/docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Nathan Vasse
2024-09-12 13:09:10 +02:00
parent 54d76a40d0
commit 4045969703
7 changed files with 412 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/apps/impress/.env
+1 -1
View File
@@ -1,4 +1,4 @@
NEXT_PUBLIC_API_ORIGIN=
NEXT_PUBLIC_Y_PROVIDER_URL=
NEXT_PUBLIC_MEDIA_URL=
NEXT_PUBLIC_THEME=dsfr
NEXT_PUBLIC_THEME=openDesk
src/frontend/apps/impress/cunningham.ts
+64
View File
@@ -204,6 +204,70 @@ const config = {
},
},
},
openDesk: {
theme: {
colors: {
'primary-100': '#F7F5FF',
'primary-200': '#ECE7FE',
'primary-300': '#DCD2FE',
'primary-400': '#C8B9FD',
'primary-500': '#8E75FA',
'primary-600': '#7051FA',
'primary-700': '#571EFA',
'primary-800': '#4519C2',
'primary-900': '#341291',
'secondary-100': '#EDFDFB',
'secondary-200': '#BFF9F2',
'secondary-300': '#71EFE1',
'secondary-400': '#00E6CC',
'secondary-500': '#00A896',
'secondary-600': '#008A7B',
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
},
},
components: {
button: {
'medium-height': '48px',
'border-radius': '0',
primary: {
background: {
color: 'var(--c--theme--colors--primary-700)',
'color-hover': 'var(--c--theme--colors--primary-900)',
'color-active': 'var(--c--theme--colors--primary-900)',
},
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
},
'primary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
},
secondary: {
background: {
'color-hover': '#F6F6F6',
'color-active': '#EDEDED',
},
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
},
color: 'var(--c--theme--colors--primary-600)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
},
},
},
},
},
};
src/frontend/apps/impress/src/cunningham/cunningham-style.css
+226 -220
View File
@@ -5,133 +5,6 @@
@import './cunningham-custom-tokens';
@import '../assets/fonts/Marianne/Marianne-font';
.c__input,
.c__field,
.c__select,
.c__datagrid {
font-family: var(--c--theme--font--families--base);
}
/**
* DataGrid
*/
.c__datagrid__table__container > table th .c__datagrid__header {
color: var(--c--components--datagrid--header--color);
font-weight: var(--c--components--datagrid--header--weight);
font-size: var(--c--components--datagrid--header--size);
}
.c__datagrid__table__container > table tbody tr {
border: none;
border-top: 1px var(--c--theme--colors--greyscale-300) solid;
border-bottom: 1px var(--c--theme--colors--greyscale-300) solid;
}
.c__datagrid__table__container > table tbody {
background-color: var(--c--components--datagrid--body--background-color);
}
.c__datagrid__table__container > table tbody tr:hover {
background-color: var(
--c--components--datagrid--body--background-color-hover
);
}
.c__datagrid > .c__pagination {
padding-inline: 1rem;
justify-content: flex-end;
}
.c__pagination__list {
gap: 3px;
border-radius: 4px;
background: var(--c--components--datagrid--pagination--background-color);
}
.c__pagination__list .c__button--tertiary-text.c__button--active {
background-color: var(
--c--components--datagrid--pagination--background-color-active
);
color: var(--c--theme--colors--greyscale-800);
}
.c__pagination__list .c__button--tertiary-text:disabled {
display: none;
}
@media (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) 0 0 0 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) 0 0 0 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);
@@ -153,88 +26,6 @@
border-color: var(--c--components--button--primary--border--color-active);
}
.c__button--primary-text:active,
.c__button--primary-text.c__button--active {
border: none;
background-color: var(
--c--components--button--primary-text--background--color-active
);
}
.c__button--primary-text:hover,
.c__button--primary-text:focus-visible {
background-color: var(
--c--components--button--primary-text--background--color-hover
);
color: var(--c--components--button--primary-text--color-hover);
}
.c__button--tertiary:disabled {
background-color: var(--c--theme--colors--greyscale-100);
}
.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);
&:disabled {
background-color: var(--c--theme--colors--greyscale-000);
border-color: var(--c--theme--colors--greyscale-200);
}
}
.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);
border: 1px solid var(--c--components--button--secondary--border--color-hover);
}
.c__button--tertiary-text {
border: none;
}
.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
);
}
/**
* Modal
*/
@@ -258,16 +49,231 @@
z-index: 10000;
}
/**
* Alert
*/
.cunningham-theme--dsfr {
.c__input,
.c__field,
.c__select,
.c__datagrid {
font-family: var(--c--theme--font--families--base);
}
.c__alert--success {
border-color: var(--c--theme--colors--success-600);
}
.c__alert--info {
border-color: var(--c--theme--colors--info-600);
}
.c__alert--error {
border-color: var(--c--theme--colors--danger-600);
/**
* DataGrid
*/
.c__datagrid__table__container > table th .c__datagrid__header {
color: var(--c--components--datagrid--header--color);
font-weight: var(--c--components--datagrid--header--weight);
font-size: var(--c--components--datagrid--header--size);
}
.c__datagrid__table__container > table tbody tr {
border: none;
border-top: 1px var(--c--theme--colors--greyscale-300) solid;
border-bottom: 1px var(--c--theme--colors--greyscale-300) solid;
}
.c__datagrid__table__container > table tbody {
background-color: var(--c--components--datagrid--body--background-color);
}
.c__datagrid__table__container > table tbody tr:hover {
background-color: var(
--c--components--datagrid--body--background-color-hover
);
}
.c__datagrid > .c__pagination {
padding-inline: 1rem;
justify-content: flex-end;
}
.c__pagination__list {
gap: 3px;
border-radius: 4px;
background: var(--c--components--datagrid--pagination--background-color);
}
.c__pagination__list .c__button--tertiary-text.c__button--active {
background-color: var(
--c--components--datagrid--pagination--background-color-active
);
color: var(--c--theme--colors--greyscale-800);
}
.c__pagination__list .c__button--tertiary-text:disabled {
display: none;
}
@media (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) 0 0 0 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) 0 0 0 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-text:active,
.c__button--primary-text.c__button--active {
border: none;
background-color: var(
--c--components--button--primary-text--background--color-active
);
}
.c__button--primary-text:hover,
.c__button--primary-text:focus-visible {
background-color: var(
--c--components--button--primary-text--background--color-hover
);
color: var(--c--components--button--primary-text--color-hover);
}
.c__button--tertiary:disabled {
background-color: var(--c--theme--colors--greyscale-100);
}
.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);
&:disabled {
background-color: var(--c--theme--colors--greyscale-000);
border-color: var(--c--theme--colors--greyscale-200);
}
}
.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);
border: 1px solid
var(--c--components--button--secondary--border--color-hover);
}
.c__button--tertiary-text {
border: none;
}
.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
);
}
/**
* Alert
*/
.c__alert--success {
border-color: var(--c--theme--colors--success-600);
}
.c__alert--info {
border-color: var(--c--theme--colors--info-600);
}
.c__alert--error {
border-color: var(--c--theme--colors--danger-600);
}
}
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+58
View File
@@ -336,6 +336,64 @@
--c--components--forms-switch--accent-color: #2323ff;
--c--components--forms-checkbox--accent-color: #2323ff;
}
.cunningham-theme--openDesk {
--c--theme--colors--primary-100: #f7f5ff;
--c--theme--colors--primary-200: #ece7fe;
--c--theme--colors--primary-300: #dcd2fe;
--c--theme--colors--primary-400: #c8b9fd;
--c--theme--colors--primary-500: #8e75fa;
--c--theme--colors--primary-600: #7051fa;
--c--theme--colors--primary-700: #571efa;
--c--theme--colors--primary-800: #4519c2;
--c--theme--colors--primary-900: #341291;
--c--theme--colors--secondary-100: #edfdfb;
--c--theme--colors--secondary-200: #bff9f2;
--c--theme--colors--secondary-300: #71efe1;
--c--theme--colors--secondary-400: #00e6cc;
--c--theme--colors--secondary-500: #00a896;
--c--theme--colors--secondary-600: #008a7b;
--c--theme--colors--secondary-700: #006c60;
--c--theme--colors--secondary-800: #00564d;
--c--theme--colors--secondary-900: #004039;
--c--components--button--medium-height: 48px;
--c--components--button--border-radius: 0;
--c--components--button--primary--background--color: var(
--c--theme--colors--primary-700
);
--c--components--button--primary--background--color-hover: var(
--c--theme--colors--primary-900
);
--c--components--button--primary--background--color-active: #2323ff;
--c--components--button--primary--color: #ffffff;
--c--components--button--primary--color-hover: #ffffff;
--c--components--button--primary--color-active: #ffffff;
--c--components--button--primary-text--background--color-hover: var(
--c--theme--colors--primary-100
);
--c--components--button--primary-text--background--color-active: var(
--c--theme--colors--primary-100
);
--c--components--button--primary-text--color-hover: var(
--c--theme--colors--primary-text
);
--c--components--button--secondary--background--color-hover: #f6f6f6;
--c--components--button--secondary--background--color-active: #ededed;
--c--components--button--secondary--border--color: var(
--c--theme--colors--primary-600
);
--c--components--button--secondary--border--color-hover: var(
--c--theme--colors--primary-600
);
--c--components--button--secondary--color: var(
--c--theme--colors--primary-600
);
--c--components--button--tertiary-text--background--color-hover: var(
--c--theme--colors--primary-100
);
--c--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-text
);
}
.clr-secondary-text {
color: var(--c--theme--colors--secondary-text);
}
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+61
View File
@@ -355,5 +355,66 @@ export const tokens = {
'forms-checkbox': { 'accent-color': '#2323ff' },
},
},
openDesk: {
theme: {
colors: {
'primary-100': '#F7F5FF',
'primary-200': '#ECE7FE',
'primary-300': '#DCD2FE',
'primary-400': '#C8B9FD',
'primary-500': '#8E75FA',
'primary-600': '#7051FA',
'primary-700': '#571EFA',
'primary-800': '#4519C2',
'primary-900': '#341291',
'secondary-100': '#EDFDFB',
'secondary-200': '#BFF9F2',
'secondary-300': '#71EFE1',
'secondary-400': '#00E6CC',
'secondary-500': '#00A896',
'secondary-600': '#008A7B',
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
},
},
components: {
button: {
'medium-height': '48px',
'border-radius': '0',
primary: {
background: {
color: 'var(--c--theme--colors--primary-700)',
'color-hover': 'var(--c--theme--colors--primary-900)',
'color-active': '#2323ff',
},
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
},
'primary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-active': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
},
secondary: {
background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
},
color: 'var(--c--theme--colors--primary-600)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
},
},
},
},
},
};
src/frontend/apps/impress/src/features/header/Header.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const Header = () => {
>
<RedStripe />
<Box
$margin={{ horizontal: 'xbig' }}
$margin={{ horizontal: '2.2rem' }}
$align="center"
$justify="space-between"
$direction="row"
src/frontend/apps/impress/src/layouts/MainLayout.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
as="main"
$minHeight={`calc(100vh - ${HEADER_HEIGHT})`}
$width="100%"
$background={colorsTokens()['primary-bg']}
$background={colorsTokens()['greyscale-100']}
>
{children}
</Box>