From f7fd65eaffbdefb375bd27ed909b4bc1c05a901b Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Fri, 9 Aug 2024 16:27:53 -0400 Subject: [PATCH 01/18] Add token-based CSS theming #11262 --- .../media/js/utils/create-vue-application.js | 50 +++++++++++++++++-- releases/8.0.0.md | 1 + 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js index d5dc97e9ef9..fcd36564d45 100644 --- a/arches/app/media/js/utils/create-vue-application.js +++ b/arches/app/media/js/utils/create-vue-application.js @@ -7,16 +7,60 @@ import StyleClass from 'primevue/styleclass'; import ToastService from 'primevue/toastservice'; import Tooltip from 'primevue/tooltip'; -import Aura from '@primevue/themes/aura'; - +import { definePreset } from '@primevue/themes'; import { createApp } from 'vue'; import { createGettext } from "vue3-gettext"; +import Aura from '@primevue/themes/aura'; import arches from 'arches'; +export const ArchesPreset = definePreset(Aura, { + primitive: { + sky: { + 950: '#2d3c4b', // matches arches sidebar + }, + }, + semantic: { + primary: { + 50: '{sky.50}', + 100: '{sky.100}', + 200: '{sky.200}', + 300: '{sky.300}', + 400: '{sky.400}', + 500: '{sky.500}', + 600: '{sky.600}', + 700: '{sky.700}', + 800: '{sky.800}', + 900: '{sky.900}', + 950: '{sky.950}', + }, + }, + components: { + button: { + root: { + label: { + fontWeight: 600, + }, + }, + }, + datatable: { + column: { + title: { + fontWeight: 600, + }, + }, + }, + splitter: { + handle: { + background: '{surface.500}', + }, + }, + }, +}); + const DEFAULT_THEME = { theme: { - preset: Aura, + preset: ArchesPreset, options: { prefix: 'p', darkModeSelector: 'system', diff --git a/releases/8.0.0.md b/releases/8.0.0.md index ea7ec836576..445ddbfc9ee 100644 --- a/releases/8.0.0.md +++ b/releases/8.0.0.md @@ -4,6 +4,7 @@ Arches 8.0.0 Release Notes ### Major enhancements - 9613 Adds editable_future_graphs and the ability to update Graphs without unpublishing. - 11042 Adds `ResourceInstanceLifecycle`s and `ResourceInstanceLifecycleState`s +- Add token-based CSS theming [#11262](https://github.com/archesproject/arches/issues/11262) ### Additional highlights From e7a02148ae422ea33ded61e975e2c072772e5dbd Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 12 Aug 2024 10:44:56 -0400 Subject: [PATCH 02/18] Create theme.ts --- .../media/js/utils/create-vue-application.js | 58 +------------------ arches/app/src/arches/theme.ts | 57 ++++++++++++++++++ 2 files changed, 58 insertions(+), 57 deletions(-) create mode 100644 arches/app/src/arches/theme.ts diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js index fcd36564d45..ee22ac7d28b 100644 --- a/arches/app/media/js/utils/create-vue-application.js +++ b/arches/app/media/js/utils/create-vue-application.js @@ -7,67 +7,11 @@ import StyleClass from 'primevue/styleclass'; import ToastService from 'primevue/toastservice'; import Tooltip from 'primevue/tooltip'; -import { definePreset } from '@primevue/themes'; import { createApp } from 'vue'; import { createGettext } from "vue3-gettext"; -import Aura from '@primevue/themes/aura'; import arches from 'arches'; - -export const ArchesPreset = definePreset(Aura, { - primitive: { - sky: { - 950: '#2d3c4b', // matches arches sidebar - }, - }, - semantic: { - primary: { - 50: '{sky.50}', - 100: '{sky.100}', - 200: '{sky.200}', - 300: '{sky.300}', - 400: '{sky.400}', - 500: '{sky.500}', - 600: '{sky.600}', - 700: '{sky.700}', - 800: '{sky.800}', - 900: '{sky.900}', - 950: '{sky.950}', - }, - }, - components: { - button: { - root: { - label: { - fontWeight: 600, - }, - }, - }, - datatable: { - column: { - title: { - fontWeight: 600, - }, - }, - }, - splitter: { - handle: { - background: '{surface.500}', - }, - }, - }, -}); - -const DEFAULT_THEME = { - theme: { - preset: ArchesPreset, - options: { - prefix: 'p', - darkModeSelector: 'system', - cssLayer: false - } - } -}; +import { DEFAULT_THEME } from "@/arches/theme.ts"; export default async function createVueApplication(vueComponent, themeConfiguration) { /** diff --git a/arches/app/src/arches/theme.ts b/arches/app/src/arches/theme.ts new file mode 100644 index 00000000000..7dcc8dad376 --- /dev/null +++ b/arches/app/src/arches/theme.ts @@ -0,0 +1,57 @@ +import { definePreset } from "@primevue/themes"; +import Aura from "@primevue/themes/aura"; + +export const ArchesPreset = definePreset(Aura, { + primitive: { + sky: { + 950: "#2d3c4b", // matches arches sidebar + }, + }, + semantic: { + primary: { + 50: "{sky.50}", + 100: "{sky.100}", + 200: "{sky.200}", + 300: "{sky.300}", + 400: "{sky.400}", + 500: "{sky.500}", + 600: "{sky.600}", + 700: "{sky.700}", + 800: "{sky.800}", + 900: "{sky.900}", + 950: "{sky.950}", + }, + }, + components: { + button: { + root: { + label: { + fontWeight: 600, + }, + }, + }, + datatable: { + column: { + title: { + fontWeight: 600, + }, + }, + }, + splitter: { + handle: { + background: "{surface.500}", + }, + }, + }, +}); + +export const DEFAULT_THEME = { + theme: { + preset: ArchesPreset, + options: { + prefix: "p", + darkModeSelector: "system", + cssLayer: false, + }, + }, +}; From e53594a04a14404f8448f426fb660fe056b36d4d Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 12 Aug 2024 11:09:42 -0400 Subject: [PATCH 03/18] Stub out some primitive color tokens --- arches/app/src/arches/theme.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/arches/app/src/arches/theme.ts b/arches/app/src/arches/theme.ts index 7dcc8dad376..7b7c33c36b3 100644 --- a/arches/app/src/arches/theme.ts +++ b/arches/app/src/arches/theme.ts @@ -3,8 +3,13 @@ import Aura from "@primevue/themes/aura"; export const ArchesPreset = definePreset(Aura, { primitive: { - sky: { - 950: "#2d3c4b", // matches arches sidebar + arches: { + blue: { + 400: "#54abd9", // legacy paginator button color + 500: "#579ddb", // legacy light button color + 600: "#2986b8", // legacy sidebar highlight + 950: "#2d3c4b", // legacy sidebar + }, }, }, semantic: { @@ -21,6 +26,15 @@ export const ArchesPreset = definePreset(Aura, { 900: "{sky.900}", 950: "{sky.950}", }, + header: { + 950: "{arches.blue.950}", + }, + navigation: { + 950: "{arches.blue.950}", + }, + pagination: { + 800: "{arches.blue.400}", + }, }, components: { button: { From b75e002e2d5ee6e7fb06f0e457b89a329280815a Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 12 Aug 2024 15:55:45 -0400 Subject: [PATCH 04/18] Opt-in to primevue css layer Allows using a selector with all: revert-layer to isolate arches CSS --- arches/app/src/arches/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/arches/app/src/arches/theme.ts b/arches/app/src/arches/theme.ts index 7b7c33c36b3..051f0eff791 100644 --- a/arches/app/src/arches/theme.ts +++ b/arches/app/src/arches/theme.ts @@ -65,7 +65,7 @@ export const DEFAULT_THEME = { options: { prefix: "p", darkModeSelector: "system", - cssLayer: false, + cssLayer: true, }, }, }; From 607e86689d43425954d6ff37a5929480b8a299e1 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 12 Aug 2024 16:48:07 -0400 Subject: [PATCH 05/18] Make themes a directory --- arches/app/media/js/utils/create-vue-application.js | 2 +- arches/app/src/arches/{theme.ts => themes/default.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename arches/app/src/arches/{theme.ts => themes/default.ts} (100%) diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js index ee22ac7d28b..2f1620adc48 100644 --- a/arches/app/media/js/utils/create-vue-application.js +++ b/arches/app/media/js/utils/create-vue-application.js @@ -11,7 +11,7 @@ import { createApp } from 'vue'; import { createGettext } from "vue3-gettext"; import arches from 'arches'; -import { DEFAULT_THEME } from "@/arches/theme.ts"; +import { DEFAULT_THEME } from "@/arches/themes/default.ts"; export default async function createVueApplication(vueComponent, themeConfiguration) { /** diff --git a/arches/app/src/arches/theme.ts b/arches/app/src/arches/themes/default.ts similarity index 100% rename from arches/app/src/arches/theme.ts rename to arches/app/src/arches/themes/default.ts From eefa2dd681abd4cd6a85e93572be84a6a0fe9a07 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Tue, 13 Aug 2024 18:10:46 -0400 Subject: [PATCH 06/18] Add css-reset selectors --- arches/app/media/css/arches.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/arches/app/media/css/arches.scss b/arches/app/media/css/arches.scss index 07489174253..dc9bf608ec2 100644 --- a/arches/app/media/css/arches.scss +++ b/arches/app/media/css/arches.scss @@ -40,6 +40,15 @@ img { image-orientation: from-image; } +.css-reset * { + all: revert-layer; + font-family: 'Open Sans'; +} + +.css-reset .fa { + font-family: fontAwesome; +} + [class^="col-"]:not(.pad-no) { padding-left: 0px; padding-right: 0px; From 373cb9c5d137ece9f69630ab70a3d552ee230e0c Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 19 Aug 2024 12:41:44 -0400 Subject: [PATCH 07/18] Remove "header" token --- arches/app/src/arches/themes/default.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index 051f0eff791..9f7c7f87cbb 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -26,15 +26,7 @@ export const ArchesPreset = definePreset(Aura, { 900: "{sky.900}", 950: "{sky.950}", }, - header: { - 950: "{arches.blue.950}", - }, - navigation: { - 950: "{arches.blue.950}", - }, - pagination: { - 800: "{arches.blue.400}", - }, + navigation: "{arches.blue.950}", }, components: { button: { From 14bbab40e87f1d8d9f1e723a950450fe0a08cb52 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 19 Aug 2024 13:52:12 -0400 Subject: [PATCH 08/18] Exclude theme files from vitest coverage --- arches/install/arches-templates/vitest.config.mts | 1 + vitest.config.mts | 1 + 2 files changed, 2 insertions(+) diff --git a/arches/install/arches-templates/vitest.config.mts b/arches/install/arches-templates/vitest.config.mts index 6308789e963..c84322c1872 100644 --- a/arches/install/arches-templates/vitest.config.mts +++ b/arches/install/arches-templates/vitest.config.mts @@ -14,6 +14,7 @@ function generateConfig(): Promise { '**/dist/**', '**/install/**', '**/cypress/**', + '**/themes/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', ]; diff --git a/vitest.config.mts b/vitest.config.mts index 6308789e963..c84322c1872 100644 --- a/vitest.config.mts +++ b/vitest.config.mts @@ -14,6 +14,7 @@ function generateConfig(): Promise { '**/dist/**', '**/install/**', '**/cypress/**', + '**/themes/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', ]; From 57119383974a9e7c491f437d16c8a8a334345364 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Tue, 20 Aug 2024 13:23:43 -0400 Subject: [PATCH 09/18] Remove css-reset selectors and cssLayer --- arches/app/media/css/arches.scss | 9 --------- arches/app/src/arches/themes/default.ts | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/arches/app/media/css/arches.scss b/arches/app/media/css/arches.scss index dc9bf608ec2..07489174253 100644 --- a/arches/app/media/css/arches.scss +++ b/arches/app/media/css/arches.scss @@ -40,15 +40,6 @@ img { image-orientation: from-image; } -.css-reset * { - all: revert-layer; - font-family: 'Open Sans'; -} - -.css-reset .fa { - font-family: fontAwesome; -} - [class^="col-"]:not(.pad-no) { padding-left: 0px; padding-right: 0px; diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index 9f7c7f87cbb..192079fe9ae 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -57,7 +57,7 @@ export const DEFAULT_THEME = { options: { prefix: "p", darkModeSelector: "system", - cssLayer: true, + cssLayer: false, }, }, }; From b1dae729a6719c8bfe18ee0090ffdc5e3b6409e2 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Tue, 20 Aug 2024 13:25:56 -0400 Subject: [PATCH 10/18] Use legacy namespace --- arches/app/src/arches/themes/default.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index 192079fe9ae..18ef416c5e0 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -4,11 +4,11 @@ import Aura from "@primevue/themes/aura"; export const ArchesPreset = definePreset(Aura, { primitive: { arches: { - blue: { - 400: "#54abd9", // legacy paginator button color - 500: "#579ddb", // legacy light button color - 600: "#2986b8", // legacy sidebar highlight - 950: "#2d3c4b", // legacy sidebar + legacy: { + paginator: "#54abd9", + buttonLight: "#579ddb", + sidebarHighlight: "#2986b8", + sidebar: "#2d3c4b", }, }, }, @@ -26,7 +26,7 @@ export const ArchesPreset = definePreset(Aura, { 900: "{sky.900}", 950: "{sky.950}", }, - navigation: "{arches.blue.950}", + navigation: "{arches.legacy.sidebar}", }, components: { button: { From e05e33e15633a13d5a2319ea91c3210eec8c7425 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Tue, 20 Aug 2024 13:52:28 -0400 Subject: [PATCH 11/18] Remove font-weight overrides --- arches/app/src/arches/themes/default.ts | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index 18ef416c5e0..f142e43cabd 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -29,20 +29,6 @@ export const ArchesPreset = definePreset(Aura, { navigation: "{arches.legacy.sidebar}", }, components: { - button: { - root: { - label: { - fontWeight: 600, - }, - }, - }, - datatable: { - column: { - title: { - fontWeight: 600, - }, - }, - }, splitter: { handle: { background: "{surface.500}", From 174c5aeb71965e83edbd2e52c07b48ddcb97ad06 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Tue, 10 Sep 2024 13:53:32 -0400 Subject: [PATCH 12/18] Use palette util, avoid overwriting navigation, &c --- arches/app/src/arches/themes/default.ts | 48 ++++++++++++++++--------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index f142e43cabd..70d8854c982 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -1,34 +1,48 @@ -import { definePreset } from "@primevue/themes"; +import { definePreset, palette } from "@primevue/themes"; import Aura from "@primevue/themes/aura"; +const archesColors = Object.freeze({ + blue: "#579ddb", + green: "#3acaa1", + red: "#f75d3f", +}); + export const ArchesPreset = definePreset(Aura, { primitive: { arches: { + ...archesColors, legacy: { - paginator: "#54abd9", - buttonLight: "#579ddb", - sidebarHighlight: "#2986b8", sidebar: "#2d3c4b", }, }, + green: palette(archesColors.green), + red: palette(archesColors.red), }, semantic: { - primary: { - 50: "{sky.50}", - 100: "{sky.100}", - 200: "{sky.200}", - 300: "{sky.300}", - 400: "{sky.400}", - 500: "{sky.500}", - 600: "{sky.600}", - 700: "{sky.700}", - 800: "{sky.800}", - 900: "{sky.900}", - 950: "{sky.950}", + primary: palette(archesColors.blue), + navigation: { + list: { + padding: "0", + }, + item: { + padding: "1rem", + }, + color: "{arches.legacy.sidebar}", }, - navigation: "{arches.legacy.sidebar}", }, components: { + button: { + root: { + label: { + fontWeight: 600, + }, + }, + }, + menubar: { + border: { + radius: 0, + }, + }, splitter: { handle: { background: "{surface.500}", From a9f45343635ac5596d62907ffbef562923c7b45c Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Tue, 10 Sep 2024 14:57:19 -0400 Subject: [PATCH 13/18] Override iconSize token and add custom content gap token --- arches/app/src/arches/themes/default.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index 70d8854c982..bd39b5fb49e 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -29,6 +29,11 @@ export const ArchesPreset = definePreset(Aura, { }, color: "{arches.legacy.sidebar}", }, + iconSize: "small", + // Additional tokens + content: { + gap: "1rem", + }, }, components: { button: { From 691402493e2824d7f44697bbff13810e94d7d8ab Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Tue, 10 Sep 2024 15:55:43 -0400 Subject: [PATCH 14/18] Add dark mode selector #11322 --- arches/app/src/arches/themes/default.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index bd39b5fb49e..e2995d511d9 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -61,7 +61,7 @@ export const DEFAULT_THEME = { preset: ArchesPreset, options: { prefix: "p", - darkModeSelector: "system", + darkModeSelector: ".arches-dark", cssLayer: false, }, }, From 6ebcb72cc28cac2b081ed6ad55a44b8ab9c8e5af Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Thu, 12 Sep 2024 12:41:19 -0400 Subject: [PATCH 15/18] Add common toast styling --- arches/app/src/arches/themes/default.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index e2995d511d9..620f816be6f 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -30,7 +30,7 @@ export const ArchesPreset = definePreset(Aura, { color: "{arches.legacy.sidebar}", }, iconSize: "small", - // Additional tokens + // custom token content: { gap: "1rem", }, @@ -53,6 +53,18 @@ export const ArchesPreset = definePreset(Aura, { background: "{surface.500}", }, }, + toast: { + summary: { + fontSize: "medium", + }, + detail: { + fontSize: "small", + }, + // custom token + messageIcon: { + marginTop: "0.5rem", + }, + }, }, }); From fabd076ea0b63c94837ef6562839cd43f4b94e6b Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 7 Oct 2024 12:49:24 -0400 Subject: [PATCH 16/18] Add fontFamily token --- arches/app/src/arches/themes/default.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index 620f816be6f..b53d78e9a08 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -30,10 +30,11 @@ export const ArchesPreset = definePreset(Aura, { color: "{arches.legacy.sidebar}", }, iconSize: "small", - // custom token + // custom tokens content: { gap: "1rem", }, + fontFamily: "system-ui, sans-serif", }, components: { button: { From ed46cf2ae652499d0347b086205b624e2bcbbfa4 Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 7 Oct 2024 15:52:16 -0400 Subject: [PATCH 17/18] Remove some tokens --- arches/app/src/arches/themes/default.ts | 31 +------------------------ 1 file changed, 1 insertion(+), 30 deletions(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index b53d78e9a08..23a11ab235d 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -15,6 +15,7 @@ export const ArchesPreset = definePreset(Aura, { sidebar: "#2d3c4b", }, }, + blue: palette(archesColors.blue), green: palette(archesColors.green), red: palette(archesColors.red), }, @@ -29,43 +30,13 @@ export const ArchesPreset = definePreset(Aura, { }, color: "{arches.legacy.sidebar}", }, - iconSize: "small", - // custom tokens - content: { - gap: "1rem", - }, - fontFamily: "system-ui, sans-serif", }, components: { - button: { - root: { - label: { - fontWeight: 600, - }, - }, - }, - menubar: { - border: { - radius: 0, - }, - }, splitter: { handle: { background: "{surface.500}", }, }, - toast: { - summary: { - fontSize: "medium", - }, - detail: { - fontSize: "small", - }, - // custom token - messageIcon: { - marginTop: "0.5rem", - }, - }, }, }); From f5ff0689e3cb25bdad9f7351bc29321eb68cdfbd Mon Sep 17 00:00:00 2001 From: Jacob Walls Date: Mon, 7 Oct 2024 15:54:21 -0400 Subject: [PATCH 18/18] Rename navigation color token --- arches/app/src/arches/themes/default.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts index 23a11ab235d..2cffe997b5d 100644 --- a/arches/app/src/arches/themes/default.ts +++ b/arches/app/src/arches/themes/default.ts @@ -20,7 +20,9 @@ export const ArchesPreset = definePreset(Aura, { red: palette(archesColors.red), }, semantic: { + // PrimeVue token override primary: palette(archesColors.blue), + // PrimeVue token override navigation: { list: { padding: "0", @@ -28,7 +30,10 @@ export const ArchesPreset = definePreset(Aura, { item: { padding: "1rem", }, - color: "{arches.legacy.sidebar}", + // custom tokens + header: { + color: "{arches.legacy.sidebar}", + }, }, }, components: {