diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index 913b4157f..f314e1232 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -24,6 +24,15 @@ const config = {
components: {
card: {
'box-shadow': 'none',
+ 'title-color': 'var(--c--theme--colors--primary-600)',
+ },
+ pill: {
+ background: 'var(--c--theme--colors--primary-600)',
+ color: 'var(--c--theme--colors--greyscale-000)',
+ weight: 'bold',
+ radius: '3px',
+ 'padding-x': '4px',
+ 'padding-y': '0',
},
},
},
@@ -158,6 +167,7 @@ const config = {
},
card: {
'box-shadow': '2px 2px 5px var(--c--theme--colors--greyscale-300)',
+ 'title-color': 'var(--c--theme--colors--primary-600)',
},
datagrid: {
header: {
@@ -238,7 +248,7 @@ const config = {
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
- 'greyscale-000': '#f6f6f6',
+ 'greyscale-000': '#ffffff',
'greyscale-100': '#EEEFF2',
'greyscale-200': '#D3D7DE',
'greyscale-300': '#B6BCC8',
@@ -306,9 +316,12 @@ const config = {
'color-hover': 'var(--c--theme--colors--primary-text)',
},
},
+ card: {
+ 'title-color': 'var(--c--theme--colors--greyscale-900)',
+ },
datagrid: {
header: {
- color: 'var(--c--theme--colors--primary-700)',
+ color: 'var(--c--theme--colors--greyscale-900)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
@@ -316,6 +329,14 @@ const config = {
'background-color-hover': '#F4F4FD',
},
},
+ pill: {
+ background: 'var(--c--theme--colors--primary-300)',
+ color: 'var(--c--theme--colors--greyscale-900)',
+ weight: '500',
+ radius: '8px',
+ 'padding-x': '16px',
+ 'padding-y': '2px',
+ },
},
},
},
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index 4744119c6..3a0702f34 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -40,7 +40,14 @@
.c__datagrid__table__container > table {
th:first-child,
td:first-child {
- padding-left: 24px;
+ padding-left: 3rem;
+ }
+}
+
+.c__datagrid__table__container > table {
+ th:last-child,
+ td:last-child {
+ padding-right: 3rem;
}
}
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 65f3d86e0..957e80972 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -118,6 +118,13 @@
--c--theme--breakpoints--xl: 1200px;
--c--theme--breakpoints--xxl: 1400px;
--c--components--card--box-shadow: none;
+ --c--components--card--title-color: var(--c--theme--colors--primary-600);
+ --c--components--pill--background: var(--c--theme--colors--primary-600);
+ --c--components--pill--color: var(--c--theme--colors--greyscale-000);
+ --c--components--pill--weight: bold;
+ --c--components--pill--radius: 3px;
+ --c--components--pill--padding-x: 4px;
+ --c--components--pill--padding-y: 0;
}
.cunningham-theme--dark {
--c--theme--colors--greyscale-100: #182536;
@@ -285,6 +292,7 @@
);
--c--components--card--box-shadow: 2px 2px 5px
var(--c--theme--colors--greyscale-300);
+ --c--components--card--title-color: var(--c--theme--colors--primary-600);
--c--components--datagrid--header--color: var(
--c--theme--colors--primary-600
);
@@ -364,7 +372,7 @@
--c--theme--colors--secondary-700: #006c60;
--c--theme--colors--secondary-800: #00564d;
--c--theme--colors--secondary-900: #004039;
- --c--theme--colors--greyscale-000: #f6f6f6;
+ --c--theme--colors--greyscale-000: #ffffff;
--c--theme--colors--greyscale-100: #eeeff2;
--c--theme--colors--greyscale-200: #d3d7de;
--c--theme--colors--greyscale-300: #b6bcc8;
@@ -425,12 +433,19 @@
--c--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-text
);
+ --c--components--card--title-color: var(--c--theme--colors--greyscale-900);
--c--components--datagrid--header--color: var(
- --c--theme--colors--primary-700
+ --c--theme--colors--greyscale-900
);
--c--components--datagrid--header--size: var(--c--theme--font--sizes--s);
--c--components--datagrid--body--background-color: transparent;
--c--components--datagrid--body--background-color-hover: #f4f4fd;
+ --c--components--pill--background: var(--c--theme--colors--primary-300);
+ --c--components--pill--color: var(--c--theme--colors--greyscale-900);
+ --c--components--pill--weight: 500;
+ --c--components--pill--radius: 8px;
+ --c--components--pill--padding-x: 16px;
+ --c--components--pill--padding-y: 2px;
}
.clr-secondary-text {
color: var(--c--theme--colors--secondary-text);
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index 399a34b1b..4cd1f47b0 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -139,7 +139,20 @@ export const tokens = {
xxl: '1400px',
},
},
- components: { card: { 'box-shadow': 'none' } },
+ components: {
+ card: {
+ 'box-shadow': 'none',
+ 'title-color': 'var(--c--theme--colors--primary-600)',
+ },
+ pill: {
+ background: 'var(--c--theme--colors--primary-600)',
+ color: 'var(--c--theme--colors--greyscale-000)',
+ weight: 'bold',
+ radius: '3px',
+ 'padding-x': '4px',
+ 'padding-y': '0',
+ },
+ },
},
dark: {
theme: {
@@ -316,6 +329,7 @@ export const tokens = {
},
card: {
'box-shadow': '2px 2px 5px var(--c--theme--colors--greyscale-300)',
+ 'title-color': 'var(--c--theme--colors--primary-600)',
},
datagrid: {
header: {
@@ -388,7 +402,7 @@ export const tokens = {
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
- 'greyscale-000': '#f6f6f6',
+ 'greyscale-000': '#ffffff',
'greyscale-100': '#EEEFF2',
'greyscale-200': '#D3D7DE',
'greyscale-300': '#B6BCC8',
@@ -448,9 +462,10 @@ export const tokens = {
'color-hover': 'var(--c--theme--colors--primary-text)',
},
},
+ card: { 'title-color': 'var(--c--theme--colors--greyscale-900)' },
datagrid: {
header: {
- color: 'var(--c--theme--colors--primary-700)',
+ color: 'var(--c--theme--colors--greyscale-900)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
@@ -458,6 +473,14 @@ export const tokens = {
'background-color-hover': '#F4F4FD',
},
},
+ pill: {
+ background: 'var(--c--theme--colors--primary-300)',
+ color: 'var(--c--theme--colors--greyscale-900)',
+ weight: '500',
+ radius: '8px',
+ 'padding-x': '16px',
+ 'padding-y': '2px',
+ },
},
},
},
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 30fdd5298..e3589c88c 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -90,7 +90,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
{
{t('Documents')}
@@ -134,11 +132,14 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
{row.is_public && (
{row.is_public ? t('Public') : ''}
@@ -200,7 +201,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
},
},
{
- id: 'column-actions',
+ id: 'actions',
renderCell: ({ row }) => {
return ;
},