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