diff --git a/SC2.png b/SC2.png
new file mode 100644
index 00000000..011fbfb8
Binary files /dev/null and b/SC2.png differ
diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index a324b170..633e2db9 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -5,6 +5,7 @@ const config = {
colors: {
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
+ 'primary-action': '#1212FF',
'primary-050': '#F5F5FE',
'primary-100': '#EDF5FA',
'primary-150': '#E5EEFA',
@@ -59,6 +60,11 @@ const config = {
h4: '1.375rem',
h5: '1.25rem',
h6: '1.125rem',
+ 'xl-alt': '5rem',
+ 'lg-alt': '4.5rem',
+ 'md-alt': '4rem',
+ 'sm-alt': '3.5rem',
+ 'xs-alt': '3rem',
},
weights: {
thin: 100,
@@ -224,7 +230,7 @@ const config = {
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: {
- color: 'var(--c--theme--colors--primary-200)',
+ color: 'var(--c--theme--colors--greyscale-300)',
},
},
tertiary: {
@@ -379,8 +385,8 @@ const config = {
'color-active': '#EDEDED',
},
border: {
- color: 'var(--c--theme--colors--primary-600)',
- 'color-hover': 'var(--c--theme--colors--primary-600)',
+ color: 'var(--c--theme--colors--greyscale-300)',
+ 'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
diff --git a/src/frontend/apps/impress/src/assets/common/logo-doc-big.png b/src/frontend/apps/impress/src/assets/common/logo-doc-big.png
new file mode 100644
index 00000000..07d55857
Binary files /dev/null and b/src/frontend/apps/impress/src/assets/common/logo-doc-big.png differ
diff --git a/src/frontend/apps/impress/src/assets/common/logo-docs-md.svg b/src/frontend/apps/impress/src/assets/common/logo-docs-md.svg
new file mode 100644
index 00000000..72a90e9c
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/common/logo-docs-md.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/frontend/apps/impress/src/assets/common/logo-docs-sm.png b/src/frontend/apps/impress/src/assets/common/logo-docs-sm.png
new file mode 100644
index 00000000..7d5f385c
Binary files /dev/null and b/src/frontend/apps/impress/src/assets/common/logo-docs-sm.png differ
diff --git a/src/frontend/apps/impress/src/assets/common/logo-docs.svg b/src/frontend/apps/impress/src/assets/common/logo-docs.svg
new file mode 100644
index 00000000..72a90e9c
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/common/logo-docs.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/frontend/apps/impress/src/assets/common/pro-connect-disabled.png b/src/frontend/apps/impress/src/assets/common/pro-connect-disabled.png
new file mode 100644
index 00000000..1248bd91
Binary files /dev/null and b/src/frontend/apps/impress/src/assets/common/pro-connect-disabled.png differ
diff --git a/src/frontend/apps/impress/src/assets/common/pro-connect.png b/src/frontend/apps/impress/src/assets/common/pro-connect.png
new file mode 100644
index 00000000..c99e1f5e
Binary files /dev/null and b/src/frontend/apps/impress/src/assets/common/pro-connect.png differ
diff --git a/src/frontend/apps/impress/src/components/DocsTitle.tsx b/src/frontend/apps/impress/src/components/DocsTitle.tsx
new file mode 100644
index 00000000..53499496
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/DocsTitle.tsx
@@ -0,0 +1,29 @@
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+
+import IconDocs from '@/assets/common/logo-docs-sm.png';
+import { useCunninghamTheme } from '@/cunningham';
+import Title from '@/features/header/components/Title/Title';
+import { useResponsiveStore } from '@/stores';
+
+import { Box } from './Box';
+
+export const DocsTitle = () => {
+ const theme = useCunninghamTheme();
+ const { t } = useTranslation();
+ const { isDesktop } = useResponsiveStore();
+ const spacings = theme.spacingsTokens();
+ const colors = theme.colorsTokens();
+ return (
+
+
+
+
+ );
+};
diff --git a/src/frontend/apps/impress/src/components/ProConnectButton.tsx b/src/frontend/apps/impress/src/components/ProConnectButton.tsx
new file mode 100644
index 00000000..28f2022b
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/ProConnectButton.tsx
@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+
+import { baseApiUrl } from '@/api';
+
+import { BoxButton } from './BoxButton';
+
+export const ProConnectButton = () => {
+ const handleClick = () => {
+ window.location.replace(`${baseApiUrl()}authenticate/`);
+ };
+
+ return (
+
+ );
+};
diff --git a/src/frontend/apps/impress/src/core/auth/Auth.tsx b/src/frontend/apps/impress/src/core/auth/Auth.tsx
index bcfa6a53..3f8c5008 100644
--- a/src/frontend/apps/impress/src/core/auth/Auth.tsx
+++ b/src/frontend/apps/impress/src/core/auth/Auth.tsx
@@ -14,7 +14,7 @@ import { useAuthStore } from './useAuthStore';
* When we will have a homepage design for non-authenticated users, we will remove this restriction to have
* the full website accessible without authentication.
*/
-const regexpUrlsAuth = [/\/docs\/$/g, /^\/$/g];
+const regexpUrlsAuth = [/\/docs\/$/g];
export const Auth = ({ children }: PropsWithChildren) => {
const { initAuth, initiated, authenticated, login, getAuthUrl } =
diff --git a/src/frontend/apps/impress/src/core/auth/useAuthStore.tsx b/src/frontend/apps/impress/src/core/auth/useAuthStore.tsx
index 63e285b2..e2c7a67c 100644
--- a/src/frontend/apps/impress/src/core/auth/useAuthStore.tsx
+++ b/src/frontend/apps/impress/src/core/auth/useAuthStore.tsx
@@ -38,9 +38,13 @@ export const useAuthStore = create((set, get) => ({
});
},
login: () => {
- get().setAuthUrl(window.location.pathname);
+ console.log(window.location.pathname);
+ if (window.location.pathname !== '/') {
+ get().setAuthUrl(window.location.pathname);
+ window.location.replace(`/`);
+ }
- window.location.replace(`${baseApiUrl()}authenticate/`);
+ // window.location.replace(`${baseApiUrl()}authenticate/`);
},
logout: () => {
terminateCrispSession();
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 3357c29c..c21fb586 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -71,6 +71,7 @@
--c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--card-border: #ededed;
--c--theme--colors--primary-bg: #fafafa;
+ --c--theme--colors--primary-action: #1212ff;
--c--theme--colors--primary-050: #f5f5fe;
--c--theme--colors--primary-150: #e5eefa;
--c--theme--colors--primary-950: #1b1b35;
@@ -122,6 +123,11 @@
--c--theme--font--sizes--ml: 0.938rem;
--c--theme--font--sizes--xl: 1.25rem;
--c--theme--font--sizes--t: 0.6875rem;
+ --c--theme--font--sizes--xl-alt: 5rem;
+ --c--theme--font--sizes--lg-alt: 4.5rem;
+ --c--theme--font--sizes--md-alt: 4rem;
+ --c--theme--font--sizes--sm-alt: 3.5rem;
+ --c--theme--font--sizes--xs-alt: 3rem;
--c--theme--font--weights--thin: 100;
--c--theme--font--weights--light: 300;
--c--theme--font--weights--regular: 400;
@@ -316,7 +322,7 @@
--c--theme--colors--primary-700
);
--c--components--button--secondary--border--color: var(
- --c--theme--colors--primary-200
+ --c--theme--colors--greyscale-300
);
--c--components--button--tertiary--color: var(
--c--theme--colors--primary-text
@@ -340,7 +346,6 @@
--c--components--button--disabled--background--color: #b3cef0;
--c--components--la-gauffre--activated: false;
}
-
.cunningham-theme--dark {
--c--theme--colors--greyscale-100: #182536;
--c--theme--colors--greyscale-200: #303c4b;
@@ -384,12 +389,11 @@
--c--theme--colors--danger-300: #f09898;
--c--theme--colors--danger-400: #ed8585;
--c--theme--colors--danger-500: #e96666;
- --c--theme--colors--danger-600: #d66;
+ --c--theme--colors--danger-600: #dd6666;
--c--theme--colors--danger-700: #c36666;
--c--theme--colors--danger-800: #ae6666;
--c--theme--colors--danger-900: #9d6666;
}
-
.cunningham-theme--dsfr {
--c--theme--colors--card-border: #e5e5e5;
--c--theme--colors--primary-text: #000091;
@@ -423,7 +427,7 @@
--c--theme--colors--greyscale-350: #ddd;
--c--theme--colors--greyscale-400: #929292;
--c--theme--colors--greyscale-500: #7c7c7c;
- --c--theme--colors--greyscale-600: #666;
+ --c--theme--colors--greyscale-600: #666666;
--c--theme--colors--greyscale-700: #3a3a3a;
--c--theme--colors--greyscale-750: #353535;
--c--theme--colors--greyscale-800: #2a2a2a;
@@ -462,7 +466,7 @@
--c--theme--colors--warning-900: #361e19;
--c--theme--colors--danger-text: #fff;
--c--theme--colors--danger-100: #ffe9e9;
- --c--theme--colors--danger-200: #fdd;
+ --c--theme--colors--danger-200: #ffdddd;
--c--theme--colors--danger-300: #ffbdbd;
--c--theme--colors--danger-400: #ff5655;
--c--theme--colors--danger-500: #f60700;
@@ -470,12 +474,12 @@
--c--theme--colors--danger-700: #642626;
--c--theme--colors--danger-800: #412121;
--c--theme--colors--danger-900: #391c1c;
- --c--theme--font--families--accent: marianne;
- --c--theme--font--families--base: marianne;
+ --c--theme--font--families--accent: Marianne;
+ --c--theme--font--families--base: Marianne;
--c--theme--logo--src: /assets/logo-gouv.svg;
--c--theme--logo--widthHeader: 110px;
--c--theme--logo--widthFooter: 220px;
- --c--theme--logo--alt: gouvernement logo;
+ --c--theme--logo--alt: Gouvernement Logo;
--c--components--alert--border-radius: 0;
--c--components--modal--width-small: 342px;
--c--components--button--medium-height: 40px;
@@ -501,10 +505,10 @@
--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--theme--colors--greyscale-300
);
--c--components--button--secondary--border--color-hover: var(
- --c--theme--colors--primary-600
+ --c--theme--colors--greyscale-300
);
--c--components--button--secondary--color: var(
--c--theme--colors--primary-text
@@ -585,1975 +589,1512 @@
--c--components--forms-textarea--border-radius: 0;
--c--components--la-gauffre--activated: true;
}
-
.clr-secondary-text {
color: var(--c--theme--colors--secondary-text);
}
-
.clr-secondary-100 {
color: var(--c--theme--colors--secondary-100);
}
-
.clr-secondary-200 {
color: var(--c--theme--colors--secondary-200);
}
-
.clr-secondary-300 {
color: var(--c--theme--colors--secondary-300);
}
-
.clr-secondary-400 {
color: var(--c--theme--colors--secondary-400);
}
-
.clr-secondary-500 {
color: var(--c--theme--colors--secondary-500);
}
-
.clr-secondary-600 {
color: var(--c--theme--colors--secondary-600);
}
-
.clr-secondary-700 {
color: var(--c--theme--colors--secondary-700);
}
-
.clr-secondary-800 {
color: var(--c--theme--colors--secondary-800);
}
-
.clr-secondary-900 {
color: var(--c--theme--colors--secondary-900);
}
-
.clr-info-text {
color: var(--c--theme--colors--info-text);
}
-
.clr-info-100 {
color: var(--c--theme--colors--info-100);
}
-
.clr-info-200 {
color: var(--c--theme--colors--info-200);
}
-
.clr-info-300 {
color: var(--c--theme--colors--info-300);
}
-
.clr-info-400 {
color: var(--c--theme--colors--info-400);
}
-
.clr-info-500 {
color: var(--c--theme--colors--info-500);
}
-
.clr-info-600 {
color: var(--c--theme--colors--info-600);
}
-
.clr-info-700 {
color: var(--c--theme--colors--info-700);
}
-
.clr-info-800 {
color: var(--c--theme--colors--info-800);
}
-
.clr-info-900 {
color: var(--c--theme--colors--info-900);
}
-
.clr-greyscale-100 {
color: var(--c--theme--colors--greyscale-100);
}
-
.clr-greyscale-200 {
color: var(--c--theme--colors--greyscale-200);
}
-
.clr-greyscale-300 {
color: var(--c--theme--colors--greyscale-300);
}
-
.clr-greyscale-400 {
color: var(--c--theme--colors--greyscale-400);
}
-
.clr-greyscale-500 {
color: var(--c--theme--colors--greyscale-500);
}
-
.clr-greyscale-600 {
color: var(--c--theme--colors--greyscale-600);
}
-
.clr-greyscale-700 {
color: var(--c--theme--colors--greyscale-700);
}
-
.clr-greyscale-800 {
color: var(--c--theme--colors--greyscale-800);
}
-
.clr-greyscale-900 {
color: var(--c--theme--colors--greyscale-900);
}
-
.clr-greyscale-000 {
color: var(--c--theme--colors--greyscale-000);
}
-
.clr-primary-100 {
color: var(--c--theme--colors--primary-100);
}
-
.clr-primary-200 {
color: var(--c--theme--colors--primary-200);
}
-
.clr-primary-300 {
color: var(--c--theme--colors--primary-300);
}
-
.clr-primary-400 {
color: var(--c--theme--colors--primary-400);
}
-
.clr-primary-500 {
color: var(--c--theme--colors--primary-500);
}
-
.clr-primary-600 {
color: var(--c--theme--colors--primary-600);
}
-
.clr-primary-700 {
color: var(--c--theme--colors--primary-700);
}
-
.clr-primary-800 {
color: var(--c--theme--colors--primary-800);
}
-
.clr-primary-900 {
color: var(--c--theme--colors--primary-900);
}
-
.clr-success-100 {
color: var(--c--theme--colors--success-100);
}
-
.clr-success-200 {
color: var(--c--theme--colors--success-200);
}
-
.clr-success-300 {
color: var(--c--theme--colors--success-300);
}
-
.clr-success-400 {
color: var(--c--theme--colors--success-400);
}
-
.clr-success-500 {
color: var(--c--theme--colors--success-500);
}
-
.clr-success-600 {
color: var(--c--theme--colors--success-600);
}
-
.clr-success-700 {
color: var(--c--theme--colors--success-700);
}
-
.clr-success-800 {
color: var(--c--theme--colors--success-800);
}
-
.clr-success-900 {
color: var(--c--theme--colors--success-900);
}
-
.clr-warning-100 {
color: var(--c--theme--colors--warning-100);
}
-
.clr-warning-200 {
color: var(--c--theme--colors--warning-200);
}
-
.clr-warning-300 {
color: var(--c--theme--colors--warning-300);
}
-
.clr-warning-400 {
color: var(--c--theme--colors--warning-400);
}
-
.clr-warning-500 {
color: var(--c--theme--colors--warning-500);
}
-
.clr-warning-600 {
color: var(--c--theme--colors--warning-600);
}
-
.clr-warning-700 {
color: var(--c--theme--colors--warning-700);
}
-
.clr-warning-800 {
color: var(--c--theme--colors--warning-800);
}
-
.clr-warning-900 {
color: var(--c--theme--colors--warning-900);
}
-
.clr-danger-100 {
color: var(--c--theme--colors--danger-100);
}
-
.clr-danger-200 {
color: var(--c--theme--colors--danger-200);
}
-
.clr-danger-300 {
color: var(--c--theme--colors--danger-300);
}
-
.clr-danger-400 {
color: var(--c--theme--colors--danger-400);
}
-
.clr-danger-500 {
color: var(--c--theme--colors--danger-500);
}
-
.clr-danger-600 {
color: var(--c--theme--colors--danger-600);
}
-
.clr-danger-700 {
color: var(--c--theme--colors--danger-700);
}
-
.clr-danger-800 {
color: var(--c--theme--colors--danger-800);
}
-
.clr-danger-900 {
color: var(--c--theme--colors--danger-900);
}
-
.clr-primary-text {
color: var(--c--theme--colors--primary-text);
}
-
.clr-success-text {
color: var(--c--theme--colors--success-text);
}
-
.clr-warning-text {
color: var(--c--theme--colors--warning-text);
}
-
.clr-danger-text {
color: var(--c--theme--colors--danger-text);
}
-
.clr-card-border {
color: var(--c--theme--colors--card-border);
}
-
.clr-primary-bg {
color: var(--c--theme--colors--primary-bg);
}
-
+.clr-primary-action {
+ color: var(--c--theme--colors--primary-action);
+}
.clr-primary-050 {
color: var(--c--theme--colors--primary-050);
}
-
.clr-primary-150 {
color: var(--c--theme--colors--primary-150);
}
-
.clr-primary-950 {
color: var(--c--theme--colors--primary-950);
}
-
.clr-info-150 {
color: var(--c--theme--colors--info-150);
}
-
.clr-greyscale-1000 {
color: var(--c--theme--colors--greyscale-1000);
}
-
.clr-blue-400 {
color: var(--c--theme--colors--blue-400);
}
-
.clr-blue-500 {
color: var(--c--theme--colors--blue-500);
}
-
.clr-blue-600 {
color: var(--c--theme--colors--blue-600);
}
-
.clr-brown-400 {
color: var(--c--theme--colors--brown-400);
}
-
.clr-brown-500 {
color: var(--c--theme--colors--brown-500);
}
-
.clr-brown-600 {
color: var(--c--theme--colors--brown-600);
}
-
.clr-cyan-400 {
color: var(--c--theme--colors--cyan-400);
}
-
.clr-cyan-500 {
color: var(--c--theme--colors--cyan-500);
}
-
.clr-cyan-600 {
color: var(--c--theme--colors--cyan-600);
}
-
.clr-gold-400 {
color: var(--c--theme--colors--gold-400);
}
-
.clr-gold-500 {
color: var(--c--theme--colors--gold-500);
}
-
.clr-gold-600 {
color: var(--c--theme--colors--gold-600);
}
-
.clr-green-400 {
color: var(--c--theme--colors--green-400);
}
-
.clr-green-500 {
color: var(--c--theme--colors--green-500);
}
-
.clr-green-600 {
color: var(--c--theme--colors--green-600);
}
-
.clr-olive-400 {
color: var(--c--theme--colors--olive-400);
}
-
.clr-olive-500 {
color: var(--c--theme--colors--olive-500);
}
-
.clr-olive-600 {
color: var(--c--theme--colors--olive-600);
}
-
.clr-orange-400 {
color: var(--c--theme--colors--orange-400);
}
-
.clr-orange-500 {
color: var(--c--theme--colors--orange-500);
}
-
.clr-orange-600 {
color: var(--c--theme--colors--orange-600);
}
-
.clr-pink-400 {
color: var(--c--theme--colors--pink-400);
}
-
.clr-pink-500 {
color: var(--c--theme--colors--pink-500);
}
-
.clr-pink-600 {
color: var(--c--theme--colors--pink-600);
}
-
.clr-purple-400 {
color: var(--c--theme--colors--purple-400);
}
-
.clr-purple-500 {
color: var(--c--theme--colors--purple-500);
}
-
.clr-purple-600 {
color: var(--c--theme--colors--purple-600);
}
-
.clr-yellow-400 {
color: var(--c--theme--colors--yellow-400);
}
-
.clr-yellow-500 {
color: var(--c--theme--colors--yellow-500);
}
-
.clr-yellow-600 {
color: var(--c--theme--colors--yellow-600);
}
-
.bg-secondary-text {
background-color: var(--c--theme--colors--secondary-text);
}
-
.bg-secondary-100 {
background-color: var(--c--theme--colors--secondary-100);
}
-
.bg-secondary-200 {
background-color: var(--c--theme--colors--secondary-200);
}
-
.bg-secondary-300 {
background-color: var(--c--theme--colors--secondary-300);
}
-
.bg-secondary-400 {
background-color: var(--c--theme--colors--secondary-400);
}
-
.bg-secondary-500 {
background-color: var(--c--theme--colors--secondary-500);
}
-
.bg-secondary-600 {
background-color: var(--c--theme--colors--secondary-600);
}
-
.bg-secondary-700 {
background-color: var(--c--theme--colors--secondary-700);
}
-
.bg-secondary-800 {
background-color: var(--c--theme--colors--secondary-800);
}
-
.bg-secondary-900 {
background-color: var(--c--theme--colors--secondary-900);
}
-
.bg-info-text {
background-color: var(--c--theme--colors--info-text);
}
-
.bg-info-100 {
background-color: var(--c--theme--colors--info-100);
}
-
.bg-info-200 {
background-color: var(--c--theme--colors--info-200);
}
-
.bg-info-300 {
background-color: var(--c--theme--colors--info-300);
}
-
.bg-info-400 {
background-color: var(--c--theme--colors--info-400);
}
-
.bg-info-500 {
background-color: var(--c--theme--colors--info-500);
}
-
.bg-info-600 {
background-color: var(--c--theme--colors--info-600);
}
-
.bg-info-700 {
background-color: var(--c--theme--colors--info-700);
}
-
.bg-info-800 {
background-color: var(--c--theme--colors--info-800);
}
-
.bg-info-900 {
background-color: var(--c--theme--colors--info-900);
}
-
.bg-greyscale-100 {
background-color: var(--c--theme--colors--greyscale-100);
}
-
.bg-greyscale-200 {
background-color: var(--c--theme--colors--greyscale-200);
}
-
.bg-greyscale-300 {
background-color: var(--c--theme--colors--greyscale-300);
}
-
.bg-greyscale-400 {
background-color: var(--c--theme--colors--greyscale-400);
}
-
.bg-greyscale-500 {
background-color: var(--c--theme--colors--greyscale-500);
}
-
.bg-greyscale-600 {
background-color: var(--c--theme--colors--greyscale-600);
}
-
.bg-greyscale-700 {
background-color: var(--c--theme--colors--greyscale-700);
}
-
.bg-greyscale-800 {
background-color: var(--c--theme--colors--greyscale-800);
}
-
.bg-greyscale-900 {
background-color: var(--c--theme--colors--greyscale-900);
}
-
.bg-greyscale-000 {
background-color: var(--c--theme--colors--greyscale-000);
}
-
.bg-primary-100 {
background-color: var(--c--theme--colors--primary-100);
}
-
.bg-primary-200 {
background-color: var(--c--theme--colors--primary-200);
}
-
.bg-primary-300 {
background-color: var(--c--theme--colors--primary-300);
}
-
.bg-primary-400 {
background-color: var(--c--theme--colors--primary-400);
}
-
.bg-primary-500 {
background-color: var(--c--theme--colors--primary-500);
}
-
.bg-primary-600 {
background-color: var(--c--theme--colors--primary-600);
}
-
.bg-primary-700 {
background-color: var(--c--theme--colors--primary-700);
}
-
.bg-primary-800 {
background-color: var(--c--theme--colors--primary-800);
}
-
.bg-primary-900 {
background-color: var(--c--theme--colors--primary-900);
}
-
.bg-success-100 {
background-color: var(--c--theme--colors--success-100);
}
-
.bg-success-200 {
background-color: var(--c--theme--colors--success-200);
}
-
.bg-success-300 {
background-color: var(--c--theme--colors--success-300);
}
-
.bg-success-400 {
background-color: var(--c--theme--colors--success-400);
}
-
.bg-success-500 {
background-color: var(--c--theme--colors--success-500);
}
-
.bg-success-600 {
background-color: var(--c--theme--colors--success-600);
}
-
.bg-success-700 {
background-color: var(--c--theme--colors--success-700);
}
-
.bg-success-800 {
background-color: var(--c--theme--colors--success-800);
}
-
.bg-success-900 {
background-color: var(--c--theme--colors--success-900);
}
-
.bg-warning-100 {
background-color: var(--c--theme--colors--warning-100);
}
-
.bg-warning-200 {
background-color: var(--c--theme--colors--warning-200);
}
-
.bg-warning-300 {
background-color: var(--c--theme--colors--warning-300);
}
-
.bg-warning-400 {
background-color: var(--c--theme--colors--warning-400);
}
-
.bg-warning-500 {
background-color: var(--c--theme--colors--warning-500);
}
-
.bg-warning-600 {
background-color: var(--c--theme--colors--warning-600);
}
-
.bg-warning-700 {
background-color: var(--c--theme--colors--warning-700);
}
-
.bg-warning-800 {
background-color: var(--c--theme--colors--warning-800);
}
-
.bg-warning-900 {
background-color: var(--c--theme--colors--warning-900);
}
-
.bg-danger-100 {
background-color: var(--c--theme--colors--danger-100);
}
-
.bg-danger-200 {
background-color: var(--c--theme--colors--danger-200);
}
-
.bg-danger-300 {
background-color: var(--c--theme--colors--danger-300);
}
-
.bg-danger-400 {
background-color: var(--c--theme--colors--danger-400);
}
-
.bg-danger-500 {
background-color: var(--c--theme--colors--danger-500);
}
-
.bg-danger-600 {
background-color: var(--c--theme--colors--danger-600);
}
-
.bg-danger-700 {
background-color: var(--c--theme--colors--danger-700);
}
-
.bg-danger-800 {
background-color: var(--c--theme--colors--danger-800);
}
-
.bg-danger-900 {
background-color: var(--c--theme--colors--danger-900);
}
-
.bg-primary-text {
background-color: var(--c--theme--colors--primary-text);
}
-
.bg-success-text {
background-color: var(--c--theme--colors--success-text);
}
-
.bg-warning-text {
background-color: var(--c--theme--colors--warning-text);
}
-
.bg-danger-text {
background-color: var(--c--theme--colors--danger-text);
}
-
.bg-card-border {
background-color: var(--c--theme--colors--card-border);
}
-
.bg-primary-bg {
background-color: var(--c--theme--colors--primary-bg);
}
-
+.bg-primary-action {
+ background-color: var(--c--theme--colors--primary-action);
+}
.bg-primary-050 {
background-color: var(--c--theme--colors--primary-050);
}
-
.bg-primary-150 {
background-color: var(--c--theme--colors--primary-150);
}
-
.bg-primary-950 {
background-color: var(--c--theme--colors--primary-950);
}
-
.bg-info-150 {
background-color: var(--c--theme--colors--info-150);
}
-
.bg-greyscale-1000 {
background-color: var(--c--theme--colors--greyscale-1000);
}
-
.bg-blue-400 {
background-color: var(--c--theme--colors--blue-400);
}
-
.bg-blue-500 {
background-color: var(--c--theme--colors--blue-500);
}
-
.bg-blue-600 {
background-color: var(--c--theme--colors--blue-600);
}
-
.bg-brown-400 {
background-color: var(--c--theme--colors--brown-400);
}
-
.bg-brown-500 {
background-color: var(--c--theme--colors--brown-500);
}
-
.bg-brown-600 {
background-color: var(--c--theme--colors--brown-600);
}
-
.bg-cyan-400 {
background-color: var(--c--theme--colors--cyan-400);
}
-
.bg-cyan-500 {
background-color: var(--c--theme--colors--cyan-500);
}
-
.bg-cyan-600 {
background-color: var(--c--theme--colors--cyan-600);
}
-
.bg-gold-400 {
background-color: var(--c--theme--colors--gold-400);
}
-
.bg-gold-500 {
background-color: var(--c--theme--colors--gold-500);
}
-
.bg-gold-600 {
background-color: var(--c--theme--colors--gold-600);
}
-
.bg-green-400 {
background-color: var(--c--theme--colors--green-400);
}
-
.bg-green-500 {
background-color: var(--c--theme--colors--green-500);
}
-
.bg-green-600 {
background-color: var(--c--theme--colors--green-600);
}
-
.bg-olive-400 {
background-color: var(--c--theme--colors--olive-400);
}
-
.bg-olive-500 {
background-color: var(--c--theme--colors--olive-500);
}
-
.bg-olive-600 {
background-color: var(--c--theme--colors--olive-600);
}
-
.bg-orange-400 {
background-color: var(--c--theme--colors--orange-400);
}
-
.bg-orange-500 {
background-color: var(--c--theme--colors--orange-500);
}
-
.bg-orange-600 {
background-color: var(--c--theme--colors--orange-600);
}
-
.bg-pink-400 {
background-color: var(--c--theme--colors--pink-400);
}
-
.bg-pink-500 {
background-color: var(--c--theme--colors--pink-500);
}
-
.bg-pink-600 {
background-color: var(--c--theme--colors--pink-600);
}
-
.bg-purple-400 {
background-color: var(--c--theme--colors--purple-400);
}
-
.bg-purple-500 {
background-color: var(--c--theme--colors--purple-500);
}
-
.bg-purple-600 {
background-color: var(--c--theme--colors--purple-600);
}
-
.bg-yellow-400 {
background-color: var(--c--theme--colors--yellow-400);
}
-
.bg-yellow-500 {
background-color: var(--c--theme--colors--yellow-500);
}
-
.bg-yellow-600 {
background-color: var(--c--theme--colors--yellow-600);
}
-
.fw-thin {
font-weight: var(--c--theme--font--weights--thin);
}
-
.fw-light {
font-weight: var(--c--theme--font--weights--light);
}
-
.fw-regular {
font-weight: var(--c--theme--font--weights--regular);
}
-
.fw-medium {
font-weight: var(--c--theme--font--weights--medium);
}
-
.fw-bold {
font-weight: var(--c--theme--font--weights--bold);
}
-
.fw-extrabold {
font-weight: var(--c--theme--font--weights--extrabold);
}
-
.fw-black {
font-weight: var(--c--theme--font--weights--black);
}
-
.fs-h1 {
font-size: var(--c--theme--font--sizes--h1);
letter-spacing: var(--c--theme--font--letterspacings--h1);
}
-
.fs-h2 {
font-size: var(--c--theme--font--sizes--h2);
letter-spacing: var(--c--theme--font--letterspacings--h2);
}
-
.fs-h3 {
font-size: var(--c--theme--font--sizes--h3);
letter-spacing: var(--c--theme--font--letterspacings--h3);
}
-
.fs-h4 {
font-size: var(--c--theme--font--sizes--h4);
letter-spacing: var(--c--theme--font--letterspacings--h4);
}
-
.fs-h5 {
font-size: var(--c--theme--font--sizes--h5);
letter-spacing: var(--c--theme--font--letterspacings--h5);
}
-
.fs-h6 {
font-size: var(--c--theme--font--sizes--h6);
letter-spacing: var(--c--theme--font--letterspacings--h6);
}
-
.fs-l {
font-size: var(--c--theme--font--sizes--l);
letter-spacing: var(--c--theme--font--letterspacings--l);
}
-
.fs-m {
font-size: var(--c--theme--font--sizes--m);
letter-spacing: var(--c--theme--font--letterspacings--m);
}
-
.fs-s {
font-size: var(--c--theme--font--sizes--s);
letter-spacing: var(--c--theme--font--letterspacings--s);
}
-
.fs-xs {
font-size: var(--c--theme--font--sizes--xs);
letter-spacing: var(--c--theme--font--letterspacings--xs);
}
-
.fs-sm {
font-size: var(--c--theme--font--sizes--sm);
letter-spacing: var(--c--theme--font--letterspacings--sm);
}
-
.fs-md {
font-size: var(--c--theme--font--sizes--md);
letter-spacing: var(--c--theme--font--letterspacings--md);
}
-
.fs-lg {
font-size: var(--c--theme--font--sizes--lg);
letter-spacing: var(--c--theme--font--letterspacings--lg);
}
-
.fs-ml {
font-size: var(--c--theme--font--sizes--ml);
letter-spacing: var(--c--theme--font--letterspacings--ml);
}
-
.fs-xl {
font-size: var(--c--theme--font--sizes--xl);
letter-spacing: var(--c--theme--font--letterspacings--xl);
}
-
.fs-t {
font-size: var(--c--theme--font--sizes--t);
letter-spacing: var(--c--theme--font--letterspacings--t);
}
-
+.fs-xl-alt {
+ font-size: var(--c--theme--font--sizes--xl-alt);
+ letter-spacing: var(--c--theme--font--letterspacings--xl-alt);
+}
+.fs-lg-alt {
+ font-size: var(--c--theme--font--sizes--lg-alt);
+ letter-spacing: var(--c--theme--font--letterspacings--lg-alt);
+}
+.fs-md-alt {
+ font-size: var(--c--theme--font--sizes--md-alt);
+ letter-spacing: var(--c--theme--font--letterspacings--md-alt);
+}
+.fs-sm-alt {
+ font-size: var(--c--theme--font--sizes--sm-alt);
+ letter-spacing: var(--c--theme--font--letterspacings--sm-alt);
+}
+.fs-xs-alt {
+ font-size: var(--c--theme--font--sizes--xs-alt);
+ letter-spacing: var(--c--theme--font--letterspacings--xs-alt);
+}
.f-base {
font-family: var(--c--theme--font--families--base);
}
-
.f-accent {
font-family: var(--c--theme--font--families--accent);
}
-
.m-0 {
margin: var(--c--theme--spacings--0);
}
-
.mb-0 {
margin-bottom: var(--c--theme--spacings--0);
}
-
.mt-0 {
margin-top: var(--c--theme--spacings--0);
}
-
.ml-0 {
margin-left: var(--c--theme--spacings--0);
}
-
.mr-0 {
margin-right: var(--c--theme--spacings--0);
}
-
.m-xl {
margin: var(--c--theme--spacings--xl);
}
-
.mb-xl {
margin-bottom: var(--c--theme--spacings--xl);
}
-
.mt-xl {
margin-top: var(--c--theme--spacings--xl);
}
-
.ml-xl {
margin-left: var(--c--theme--spacings--xl);
}
-
.mr-xl {
margin-right: var(--c--theme--spacings--xl);
}
-
.m-l {
margin: var(--c--theme--spacings--l);
}
-
.mb-l {
margin-bottom: var(--c--theme--spacings--l);
}
-
.mt-l {
margin-top: var(--c--theme--spacings--l);
}
-
.ml-l {
margin-left: var(--c--theme--spacings--l);
}
-
.mr-l {
margin-right: var(--c--theme--spacings--l);
}
-
.m-b {
margin: var(--c--theme--spacings--b);
}
-
.mb-b {
margin-bottom: var(--c--theme--spacings--b);
}
-
.mt-b {
margin-top: var(--c--theme--spacings--b);
}
-
.ml-b {
margin-left: var(--c--theme--spacings--b);
}
-
.mr-b {
margin-right: var(--c--theme--spacings--b);
}
-
.m-s {
margin: var(--c--theme--spacings--s);
}
-
.mb-s {
margin-bottom: var(--c--theme--spacings--s);
}
-
.mt-s {
margin-top: var(--c--theme--spacings--s);
}
-
.ml-s {
margin-left: var(--c--theme--spacings--s);
}
-
.mr-s {
margin-right: var(--c--theme--spacings--s);
}
-
.m-t {
margin: var(--c--theme--spacings--t);
}
-
.mb-t {
margin-bottom: var(--c--theme--spacings--t);
}
-
.mt-t {
margin-top: var(--c--theme--spacings--t);
}
-
.ml-t {
margin-left: var(--c--theme--spacings--t);
}
-
.mr-t {
margin-right: var(--c--theme--spacings--t);
}
-
.m-st {
margin: var(--c--theme--spacings--st);
}
-
.mb-st {
margin-bottom: var(--c--theme--spacings--st);
}
-
.mt-st {
margin-top: var(--c--theme--spacings--st);
}
-
.ml-st {
margin-left: var(--c--theme--spacings--st);
}
-
.mr-st {
margin-right: var(--c--theme--spacings--st);
}
-
.m-none {
margin: var(--c--theme--spacings--none);
}
-
.mb-none {
margin-bottom: var(--c--theme--spacings--none);
}
-
.mt-none {
margin-top: var(--c--theme--spacings--none);
}
-
.ml-none {
margin-left: var(--c--theme--spacings--none);
}
-
.mr-none {
margin-right: var(--c--theme--spacings--none);
}
-
.m-auto {
margin: var(--c--theme--spacings--auto);
}
-
.mb-auto {
margin-bottom: var(--c--theme--spacings--auto);
}
-
.mt-auto {
margin-top: var(--c--theme--spacings--auto);
}
-
.ml-auto {
margin-left: var(--c--theme--spacings--auto);
}
-
.mr-auto {
margin-right: var(--c--theme--spacings--auto);
}
-
.m-bx {
margin: var(--c--theme--spacings--bx);
}
-
.mb-bx {
margin-bottom: var(--c--theme--spacings--bx);
}
-
.mt-bx {
margin-top: var(--c--theme--spacings--bx);
}
-
.ml-bx {
margin-left: var(--c--theme--spacings--bx);
}
-
.mr-bx {
margin-right: var(--c--theme--spacings--bx);
}
-
.m-full {
margin: var(--c--theme--spacings--full);
}
-
.mb-full {
margin-bottom: var(--c--theme--spacings--full);
}
-
.mt-full {
margin-top: var(--c--theme--spacings--full);
}
-
.ml-full {
margin-left: var(--c--theme--spacings--full);
}
-
.mr-full {
margin-right: var(--c--theme--spacings--full);
}
-
.m-4xs {
margin: var(--c--theme--spacings--4xs);
}
-
.mb-4xs {
margin-bottom: var(--c--theme--spacings--4xs);
}
-
.mt-4xs {
margin-top: var(--c--theme--spacings--4xs);
}
-
.ml-4xs {
margin-left: var(--c--theme--spacings--4xs);
}
-
.mr-4xs {
margin-right: var(--c--theme--spacings--4xs);
}
-
.m-3xs {
margin: var(--c--theme--spacings--3xs);
}
-
.mb-3xs {
margin-bottom: var(--c--theme--spacings--3xs);
}
-
.mt-3xs {
margin-top: var(--c--theme--spacings--3xs);
}
-
.ml-3xs {
margin-left: var(--c--theme--spacings--3xs);
}
-
.mr-3xs {
margin-right: var(--c--theme--spacings--3xs);
}
-
.m-2xs {
margin: var(--c--theme--spacings--2xs);
}
-
.mb-2xs {
margin-bottom: var(--c--theme--spacings--2xs);
}
-
.mt-2xs {
margin-top: var(--c--theme--spacings--2xs);
}
-
.ml-2xs {
margin-left: var(--c--theme--spacings--2xs);
}
-
.mr-2xs {
margin-right: var(--c--theme--spacings--2xs);
}
-
.m-xs {
margin: var(--c--theme--spacings--xs);
}
-
.mb-xs {
margin-bottom: var(--c--theme--spacings--xs);
}
-
.mt-xs {
margin-top: var(--c--theme--spacings--xs);
}
-
.ml-xs {
margin-left: var(--c--theme--spacings--xs);
}
-
.mr-xs {
margin-right: var(--c--theme--spacings--xs);
}
-
.m-sm {
margin: var(--c--theme--spacings--sm);
}
-
.mb-sm {
margin-bottom: var(--c--theme--spacings--sm);
}
-
.mt-sm {
margin-top: var(--c--theme--spacings--sm);
}
-
.ml-sm {
margin-left: var(--c--theme--spacings--sm);
}
-
.mr-sm {
margin-right: var(--c--theme--spacings--sm);
}
-
.m-base {
margin: var(--c--theme--spacings--base);
}
-
.mb-base {
margin-bottom: var(--c--theme--spacings--base);
}
-
.mt-base {
margin-top: var(--c--theme--spacings--base);
}
-
.ml-base {
margin-left: var(--c--theme--spacings--base);
}
-
.mr-base {
margin-right: var(--c--theme--spacings--base);
}
-
.m-md {
margin: var(--c--theme--spacings--md);
}
-
.mb-md {
margin-bottom: var(--c--theme--spacings--md);
}
-
.mt-md {
margin-top: var(--c--theme--spacings--md);
}
-
.ml-md {
margin-left: var(--c--theme--spacings--md);
}
-
.mr-md {
margin-right: var(--c--theme--spacings--md);
}
-
.m-lg {
margin: var(--c--theme--spacings--lg);
}
-
.mb-lg {
margin-bottom: var(--c--theme--spacings--lg);
}
-
.mt-lg {
margin-top: var(--c--theme--spacings--lg);
}
-
.ml-lg {
margin-left: var(--c--theme--spacings--lg);
}
-
.mr-lg {
margin-right: var(--c--theme--spacings--lg);
}
-
.m-xxl {
margin: var(--c--theme--spacings--xxl);
}
-
.mb-xxl {
margin-bottom: var(--c--theme--spacings--xxl);
}
-
.mt-xxl {
margin-top: var(--c--theme--spacings--xxl);
}
-
.ml-xxl {
margin-left: var(--c--theme--spacings--xxl);
}
-
.mr-xxl {
margin-right: var(--c--theme--spacings--xxl);
}
-
.m-xxxl {
margin: var(--c--theme--spacings--xxxl);
}
-
.mb-xxxl {
margin-bottom: var(--c--theme--spacings--xxxl);
}
-
.mt-xxxl {
margin-top: var(--c--theme--spacings--xxxl);
}
-
.ml-xxxl {
margin-left: var(--c--theme--spacings--xxxl);
}
-
.mr-xxxl {
margin-right: var(--c--theme--spacings--xxxl);
}
-
.m-4xl {
margin: var(--c--theme--spacings--4xl);
}
-
.mb-4xl {
margin-bottom: var(--c--theme--spacings--4xl);
}
-
.mt-4xl {
margin-top: var(--c--theme--spacings--4xl);
}
-
.ml-4xl {
margin-left: var(--c--theme--spacings--4xl);
}
-
.mr-4xl {
margin-right: var(--c--theme--spacings--4xl);
}
-
.m-5xl {
margin: var(--c--theme--spacings--5xl);
}
-
.mb-5xl {
margin-bottom: var(--c--theme--spacings--5xl);
}
-
.mt-5xl {
margin-top: var(--c--theme--spacings--5xl);
}
-
.ml-5xl {
margin-left: var(--c--theme--spacings--5xl);
}
-
.mr-5xl {
margin-right: var(--c--theme--spacings--5xl);
}
-
.m-6xl {
margin: var(--c--theme--spacings--6xl);
}
-
.mb-6xl {
margin-bottom: var(--c--theme--spacings--6xl);
}
-
.mt-6xl {
margin-top: var(--c--theme--spacings--6xl);
}
-
.ml-6xl {
margin-left: var(--c--theme--spacings--6xl);
}
-
.mr-6xl {
margin-right: var(--c--theme--spacings--6xl);
}
-
.m-7xl {
margin: var(--c--theme--spacings--7xl);
}
-
.mb-7xl {
margin-bottom: var(--c--theme--spacings--7xl);
}
-
.mt-7xl {
margin-top: var(--c--theme--spacings--7xl);
}
-
.ml-7xl {
margin-left: var(--c--theme--spacings--7xl);
}
-
.mr-7xl {
margin-right: var(--c--theme--spacings--7xl);
}
-
.p-0 {
padding: var(--c--theme--spacings--0);
}
-
.pb-0 {
padding-bottom: var(--c--theme--spacings--0);
}
-
.pt-0 {
padding-top: var(--c--theme--spacings--0);
}
-
.pl-0 {
padding-left: var(--c--theme--spacings--0);
}
-
.pr-0 {
padding-right: var(--c--theme--spacings--0);
}
-
.p-xl {
padding: var(--c--theme--spacings--xl);
}
-
.pb-xl {
padding-bottom: var(--c--theme--spacings--xl);
}
-
.pt-xl {
padding-top: var(--c--theme--spacings--xl);
}
-
.pl-xl {
padding-left: var(--c--theme--spacings--xl);
}
-
.pr-xl {
padding-right: var(--c--theme--spacings--xl);
}
-
.p-l {
padding: var(--c--theme--spacings--l);
}
-
.pb-l {
padding-bottom: var(--c--theme--spacings--l);
}
-
.pt-l {
padding-top: var(--c--theme--spacings--l);
}
-
.pl-l {
padding-left: var(--c--theme--spacings--l);
}
-
.pr-l {
padding-right: var(--c--theme--spacings--l);
}
-
.p-b {
padding: var(--c--theme--spacings--b);
}
-
.pb-b {
padding-bottom: var(--c--theme--spacings--b);
}
-
.pt-b {
padding-top: var(--c--theme--spacings--b);
}
-
.pl-b {
padding-left: var(--c--theme--spacings--b);
}
-
.pr-b {
padding-right: var(--c--theme--spacings--b);
}
-
.p-s {
padding: var(--c--theme--spacings--s);
}
-
.pb-s {
padding-bottom: var(--c--theme--spacings--s);
}
-
.pt-s {
padding-top: var(--c--theme--spacings--s);
}
-
.pl-s {
padding-left: var(--c--theme--spacings--s);
}
-
.pr-s {
padding-right: var(--c--theme--spacings--s);
}
-
.p-t {
padding: var(--c--theme--spacings--t);
}
-
.pb-t {
padding-bottom: var(--c--theme--spacings--t);
}
-
.pt-t {
padding-top: var(--c--theme--spacings--t);
}
-
.pl-t {
padding-left: var(--c--theme--spacings--t);
}
-
.pr-t {
padding-right: var(--c--theme--spacings--t);
}
-
.p-st {
padding: var(--c--theme--spacings--st);
}
-
.pb-st {
padding-bottom: var(--c--theme--spacings--st);
}
-
.pt-st {
padding-top: var(--c--theme--spacings--st);
}
-
.pl-st {
padding-left: var(--c--theme--spacings--st);
}
-
.pr-st {
padding-right: var(--c--theme--spacings--st);
}
-
.p-none {
padding: var(--c--theme--spacings--none);
}
-
.pb-none {
padding-bottom: var(--c--theme--spacings--none);
}
-
.pt-none {
padding-top: var(--c--theme--spacings--none);
}
-
.pl-none {
padding-left: var(--c--theme--spacings--none);
}
-
.pr-none {
padding-right: var(--c--theme--spacings--none);
}
-
.p-auto {
padding: var(--c--theme--spacings--auto);
}
-
.pb-auto {
padding-bottom: var(--c--theme--spacings--auto);
}
-
.pt-auto {
padding-top: var(--c--theme--spacings--auto);
}
-
.pl-auto {
padding-left: var(--c--theme--spacings--auto);
}
-
.pr-auto {
padding-right: var(--c--theme--spacings--auto);
}
-
.p-bx {
padding: var(--c--theme--spacings--bx);
}
-
.pb-bx {
padding-bottom: var(--c--theme--spacings--bx);
}
-
.pt-bx {
padding-top: var(--c--theme--spacings--bx);
}
-
.pl-bx {
padding-left: var(--c--theme--spacings--bx);
}
-
.pr-bx {
padding-right: var(--c--theme--spacings--bx);
}
-
.p-full {
padding: var(--c--theme--spacings--full);
}
-
.pb-full {
padding-bottom: var(--c--theme--spacings--full);
}
-
.pt-full {
padding-top: var(--c--theme--spacings--full);
}
-
.pl-full {
padding-left: var(--c--theme--spacings--full);
}
-
.pr-full {
padding-right: var(--c--theme--spacings--full);
}
-
.p-4xs {
padding: var(--c--theme--spacings--4xs);
}
-
.pb-4xs {
padding-bottom: var(--c--theme--spacings--4xs);
}
-
.pt-4xs {
padding-top: var(--c--theme--spacings--4xs);
}
-
.pl-4xs {
padding-left: var(--c--theme--spacings--4xs);
}
-
.pr-4xs {
padding-right: var(--c--theme--spacings--4xs);
}
-
.p-3xs {
padding: var(--c--theme--spacings--3xs);
}
-
.pb-3xs {
padding-bottom: var(--c--theme--spacings--3xs);
}
-
.pt-3xs {
padding-top: var(--c--theme--spacings--3xs);
}
-
.pl-3xs {
padding-left: var(--c--theme--spacings--3xs);
}
-
.pr-3xs {
padding-right: var(--c--theme--spacings--3xs);
}
-
.p-2xs {
padding: var(--c--theme--spacings--2xs);
}
-
.pb-2xs {
padding-bottom: var(--c--theme--spacings--2xs);
}
-
.pt-2xs {
padding-top: var(--c--theme--spacings--2xs);
}
-
.pl-2xs {
padding-left: var(--c--theme--spacings--2xs);
}
-
.pr-2xs {
padding-right: var(--c--theme--spacings--2xs);
}
-
.p-xs {
padding: var(--c--theme--spacings--xs);
}
-
.pb-xs {
padding-bottom: var(--c--theme--spacings--xs);
}
-
.pt-xs {
padding-top: var(--c--theme--spacings--xs);
}
-
.pl-xs {
padding-left: var(--c--theme--spacings--xs);
}
-
.pr-xs {
padding-right: var(--c--theme--spacings--xs);
}
-
.p-sm {
padding: var(--c--theme--spacings--sm);
}
-
.pb-sm {
padding-bottom: var(--c--theme--spacings--sm);
}
-
.pt-sm {
padding-top: var(--c--theme--spacings--sm);
}
-
.pl-sm {
padding-left: var(--c--theme--spacings--sm);
}
-
.pr-sm {
padding-right: var(--c--theme--spacings--sm);
}
-
.p-base {
padding: var(--c--theme--spacings--base);
}
-
.pb-base {
padding-bottom: var(--c--theme--spacings--base);
}
-
.pt-base {
padding-top: var(--c--theme--spacings--base);
}
-
.pl-base {
padding-left: var(--c--theme--spacings--base);
}
-
.pr-base {
padding-right: var(--c--theme--spacings--base);
}
-
.p-md {
padding: var(--c--theme--spacings--md);
}
-
.pb-md {
padding-bottom: var(--c--theme--spacings--md);
}
-
.pt-md {
padding-top: var(--c--theme--spacings--md);
}
-
.pl-md {
padding-left: var(--c--theme--spacings--md);
}
-
.pr-md {
padding-right: var(--c--theme--spacings--md);
}
-
.p-lg {
padding: var(--c--theme--spacings--lg);
}
-
.pb-lg {
padding-bottom: var(--c--theme--spacings--lg);
}
-
.pt-lg {
padding-top: var(--c--theme--spacings--lg);
}
-
.pl-lg {
padding-left: var(--c--theme--spacings--lg);
}
-
.pr-lg {
padding-right: var(--c--theme--spacings--lg);
}
-
.p-xxl {
padding: var(--c--theme--spacings--xxl);
}
-
.pb-xxl {
padding-bottom: var(--c--theme--spacings--xxl);
}
-
.pt-xxl {
padding-top: var(--c--theme--spacings--xxl);
}
-
.pl-xxl {
padding-left: var(--c--theme--spacings--xxl);
}
-
.pr-xxl {
padding-right: var(--c--theme--spacings--xxl);
}
-
.p-xxxl {
padding: var(--c--theme--spacings--xxxl);
}
-
.pb-xxxl {
padding-bottom: var(--c--theme--spacings--xxxl);
}
-
.pt-xxxl {
padding-top: var(--c--theme--spacings--xxxl);
}
-
.pl-xxxl {
padding-left: var(--c--theme--spacings--xxxl);
}
-
.pr-xxxl {
padding-right: var(--c--theme--spacings--xxxl);
}
-
.p-4xl {
padding: var(--c--theme--spacings--4xl);
}
-
.pb-4xl {
padding-bottom: var(--c--theme--spacings--4xl);
}
-
.pt-4xl {
padding-top: var(--c--theme--spacings--4xl);
}
-
.pl-4xl {
padding-left: var(--c--theme--spacings--4xl);
}
-
.pr-4xl {
padding-right: var(--c--theme--spacings--4xl);
}
-
.p-5xl {
padding: var(--c--theme--spacings--5xl);
}
-
.pb-5xl {
padding-bottom: var(--c--theme--spacings--5xl);
}
-
.pt-5xl {
padding-top: var(--c--theme--spacings--5xl);
}
-
.pl-5xl {
padding-left: var(--c--theme--spacings--5xl);
}
-
.pr-5xl {
padding-right: var(--c--theme--spacings--5xl);
}
-
.p-6xl {
padding: var(--c--theme--spacings--6xl);
}
-
.pb-6xl {
padding-bottom: var(--c--theme--spacings--6xl);
}
-
.pt-6xl {
padding-top: var(--c--theme--spacings--6xl);
}
-
.pl-6xl {
padding-left: var(--c--theme--spacings--6xl);
}
-
.pr-6xl {
padding-right: var(--c--theme--spacings--6xl);
}
-
.p-7xl {
padding: var(--c--theme--spacings--7xl);
}
-
.pb-7xl {
padding-bottom: var(--c--theme--spacings--7xl);
}
-
.pt-7xl {
padding-top: var(--c--theme--spacings--7xl);
}
-
.pl-7xl {
padding-left: var(--c--theme--spacings--7xl);
}
-
.pr-7xl {
padding-right: var(--c--theme--spacings--7xl);
}
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index 521094f4..b63ef0bf 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -75,6 +75,7 @@ export const tokens = {
'danger-text': '#fff',
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
+ 'primary-action': '#1212FF',
'primary-050': '#F5F5FE',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
@@ -129,6 +130,11 @@ export const tokens = {
ml: '0.938rem',
xl: '1.25rem',
t: '0.6875rem',
+ 'xl-alt': '5rem',
+ 'lg-alt': '4.5rem',
+ 'md-alt': '4rem',
+ 'sm-alt': '3.5rem',
+ 'xs-alt': '3rem',
},
weights: {
thin: 100,
@@ -315,7 +321,7 @@ export const tokens = {
color: 'white',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
- border: { color: 'var(--c--theme--colors--primary-200)' },
+ border: { color: 'var(--c--theme--colors--greyscale-300)' },
},
tertiary: {
color: 'var(--c--theme--colors--primary-text)',
@@ -502,8 +508,8 @@ export const tokens = {
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--greyscale-300)',
+ 'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index de6eb6e6..fdd77f04 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -60,14 +60,13 @@ export const Header = () => {
}
/>
)}
-
+
diff --git a/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx b/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
index afc16f01..d4687710 100644
--- a/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Title/Title.tsx
@@ -1,26 +1,47 @@
import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
import { Box, Text } from '@/components/';
import { useCunninghamTheme } from '@/cunningham';
-const Title = () => {
+type TitleProps = {
+ size?: 'sm' | 'md';
+};
+
+const Title = ({ size = 'sm' }: TitleProps) => {
const { t } = useTranslation();
const theme = useCunninghamTheme();
const spacings = theme.spacingsTokens();
const colors = theme.colorsTokens();
return (
-
-
+
+
{t('Docs')}
BETA
diff --git a/src/frontend/apps/impress/src/features/home/assets/SC1-responsive.png b/src/frontend/apps/impress/src/features/home/assets/SC1-responsive.png
new file mode 100644
index 00000000..33bc6583
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/SC1-responsive.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/SC1.png b/src/frontend/apps/impress/src/features/home/assets/SC1.png
new file mode 100644
index 00000000..39221a6e
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/SC1.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/SC2.png b/src/frontend/apps/impress/src/features/home/assets/SC2.png
new file mode 100644
index 00000000..011fbfb8
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/SC2.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/SC3.png b/src/frontend/apps/impress/src/features/home/assets/SC3.png
new file mode 100644
index 00000000..d4eee62c
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/SC3.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/SC4-responsive.png b/src/frontend/apps/impress/src/features/home/assets/SC4-responsive.png
new file mode 100644
index 00000000..53c3811a
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/SC4-responsive.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/SC4.png b/src/frontend/apps/impress/src/features/home/assets/SC4.png
new file mode 100644
index 00000000..ca3070fb
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/SC4.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/first.png b/src/frontend/apps/impress/src/features/home/assets/first.png
new file mode 100644
index 00000000..844499e1
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/first.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/logo-docs.png b/src/frontend/apps/impress/src/features/home/assets/logo-docs.png
new file mode 100644
index 00000000..258c8b95
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/logo-docs.png differ
diff --git a/src/frontend/apps/impress/src/features/home/assets/logo.png b/src/frontend/apps/impress/src/features/home/assets/logo.png
new file mode 100644
index 00000000..7643a698
Binary files /dev/null and b/src/frontend/apps/impress/src/features/home/assets/logo.png differ
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
new file mode 100644
index 00000000..91389705
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
@@ -0,0 +1,84 @@
+import { Button } from '@openfun/cunningham-react';
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { ProConnectButton } from '@/components/ProConnectButton';
+import { useCunninghamTheme } from '@/cunningham';
+import { useResponsiveStore } from '@/stores';
+
+import firstImage from '../assets/first.png';
+import DocLogo from '../assets/logo-docs.png';
+
+export default function HomeBanner() {
+ const { t } = useTranslation();
+ const { spacingsTokens } = useCunninghamTheme();
+ const spacings = spacingsTokens();
+ const { isDesktop } = useResponsiveStore();
+
+ return (
+
+
+
+
+
+ {t('Collaborative writing made simple')}
+
+
+ {t(
+ 'Collaborate and write in real time, without layout constraints.',
+ )}
+
+
+
+ {isDesktop && (
+
+ )}
+
+
+ }
+ >
+ Voir plus
+
+
+
+
+ );
+}
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
new file mode 100644
index 00000000..69a5e1db
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
@@ -0,0 +1,106 @@
+import { useTranslation } from 'react-i18next';
+
+import IconDocs from '@/assets/common/logo-docs.svg';
+import { Box, Text } from '@/components';
+import { ProConnectButton } from '@/components/ProConnectButton';
+import { useCunninghamTheme } from '@/cunningham';
+import { Footer } from '@/features/footer';
+import Title from '@/features/header/components/Title/Title';
+import { useResponsiveStore } from '@/stores';
+
+import SC1Responsive from '../assets/SC1-responsive.png';
+import SC1 from '../assets/SC1.png';
+import SC2 from '../assets/SC2.png';
+import SC3 from '../assets/SC3.png';
+import SC4Responsive from '../assets/SC4-responsive.png';
+import SC4 from '../assets/SC4.png';
+
+import HomeBanner from './HomeBanner';
+import { HomeHeader } from './HomeHeader';
+import { HomeSection } from './HomeSection';
+
+export default function HomeContent() {
+ const { t } = useTranslation();
+ const { isDesktop } = useResponsiveStore();
+ const { spacingsTokens } = useCunninghamTheme();
+ const spacings = spacingsTokens();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('Docs is already available, log in to use it now.')}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
new file mode 100644
index 00000000..374e658f
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+
+import IconDocs from '@/assets/common/logo-docs-sm.png';
+import { Box } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { LaGaufre } from '@/features/header/components/LaGaufre';
+import Title from '@/features/header/components/Title/Title';
+import { LanguagePicker } from '@/features/language';
+import { useResponsiveStore } from '@/stores';
+
+export const HomeHeader = () => {
+ const { t } = useTranslation();
+ const { isDesktop } = useResponsiveStore();
+ const { themeTokens, spacingsTokens } = useCunninghamTheme();
+ const logo = themeTokens().logo;
+ const spacings = spacingsTokens();
+ return (
+
+
+ {logo && (
+
+ )}
+
+ {isDesktop && (
+
+
+
+
+ )}
+
+
+
+
+
+
+ );
+};
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
new file mode 100644
index 00000000..b574b006
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
@@ -0,0 +1,126 @@
+import Image, { ImageProps } from 'next/image';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { useResponsiveStore } from '@/stores';
+
+export type HomeSectionProps = {
+ illustration?: ImageProps['src'];
+ title: string;
+ description: string;
+ tag: string;
+ availableSoon?: boolean;
+ shadow?: boolean;
+ isColumn?: boolean;
+ reverse?: boolean;
+};
+export const HomeSection = ({
+ illustration,
+ title,
+ description,
+ tag,
+ reverse = false,
+ isColumn = true,
+ availableSoon = false,
+ shadow = false,
+}: HomeSectionProps) => {
+ const { t } = useTranslation();
+ const { spacingsTokens } = useCunninghamTheme();
+ const spacings = spacingsTokens();
+
+ const { isDesktop } = useResponsiveStore();
+
+ const direction = useMemo(() => {
+ if (!isDesktop) {
+ return 'column';
+ } else if (isColumn) {
+ return reverse ? 'column-reverse' : 'column';
+ }
+
+ return reverse ? 'row-reverse' : 'row';
+ }, [isColumn, isDesktop, reverse]);
+
+ return (
+
+
+
+
+ {availableSoon && (
+
+ )}
+
+
+ {title}
+
+
+ {description}
+
+
+
+ {illustration && (
+
+ )}
+
+ );
+};
+
+const SectionTag = ({
+ tag,
+ availableSoon,
+}: {
+ tag: string;
+ availableSoon?: boolean;
+}) => {
+ const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+ const spacings = spacingsTokens();
+ const colors = colorsTokens();
+ return (
+
+
+ {tag}
+
+
+ );
+};
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeWriteSection.tsx b/src/frontend/apps/impress/src/features/home/components/HomeWriteSection.tsx
new file mode 100644
index 00000000..a618553a
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/home/components/HomeWriteSection.tsx
@@ -0,0 +1,18 @@
+import Image from 'next/image';
+
+import SC1 from '../assets/SC1.png';
+import SC1Responsive from '../assets/SC1-responsive.png';
+
+import { HomeSection } from './HomeSection';
+
+export const HomeWriteSection = () => {
+ return (
+ }
+ title="Une expérience d'écriture sans compromis."
+ tag="Écrire"
+ description="Docs propose une expérience d'écriture intuitive. Son interface minimaliste privilégie le contenu sur la mise en page, tout en offrant l'essentiel : import de médias, mode hors-ligne et raccourcis clavier pour plus d'efficacité."
+ />
+ );
+};
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 81523571..23ed037a 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -3,7 +3,6 @@ import { css } from 'styled-components';
import { Box } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
-import { Footer } from '@/features/footer';
import { Header } from '@/features/header';
import { HEADER_HEIGHT } from '@/features/header/conf';
import { LeftPanel } from '@/features/left-panel';
@@ -12,13 +11,14 @@ import { useResponsiveStore } from '@/stores';
type MainLayoutProps = {
backgroundColor?: 'white' | 'grey';
- withoutFooter?: boolean;
+
+ withoutLeftPanel?: boolean;
};
export function MainLayout({
children,
backgroundColor = 'white',
- withoutFooter = false,
+ withoutLeftPanel = false,
}: PropsWithChildren) {
const { isDesktop } = useResponsiveStore();
const { colorsTokens } = useCunninghamTheme();
@@ -33,7 +33,7 @@ export function MainLayout({
$margin={{ top: `${HEADER_HEIGHT}px` }}
$width="100%"
>
-
+ {!withoutLeftPanel && }
- {!withoutFooter && }
);
}
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
index ede0f454..8a3b6075 100644
--- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
+++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
@@ -34,7 +34,7 @@ export function DocLayout() {
-
+
>
diff --git a/src/frontend/apps/impress/src/pages/home.tsx b/src/frontend/apps/impress/src/pages/home.tsx
new file mode 100644
index 00000000..e2fe5d06
--- /dev/null
+++ b/src/frontend/apps/impress/src/pages/home.tsx
@@ -0,0 +1,5 @@
+import HomeContent from '@/features/home/components/HomeContent';
+
+export default function Home() {
+ return ;
+}
diff --git a/src/frontend/apps/impress/src/pages/index.tsx b/src/frontend/apps/impress/src/pages/index.tsx
index c6fc9734..249731fe 100644
--- a/src/frontend/apps/impress/src/pages/index.tsx
+++ b/src/frontend/apps/impress/src/pages/index.tsx
@@ -1,3 +1,16 @@
-import Docs from './docs';
+import { useRouter } from 'next/navigation';
-export default Docs;
+import { useAuthStore } from '@/core';
+import HomeContent from '@/features/home/components/HomeContent';
+
+export default function Index() {
+ const router = useRouter();
+ const auth = useAuthStore();
+
+ if (auth.userData) {
+ router.push('/docs/');
+ return null;
+ }
+
+ return ;
+}