From 711bea01663cd8113bdc4659a49573797cccd73d Mon Sep 17 00:00:00 2001 From: Mo Date: Wed, 9 Nov 2022 09:28:20 -0600 Subject: [PATCH] refactor: include themes in components folder --- .../src/Lexical/Theme/editor.scss | 2 +- .../Utilities/FillThemeComponentDefaults.ts | 2 +- packages/web/.gitignore | 12 +++- packages/web/scripts/CopyComponents.mjs | 27 +++----- .../index.css | 56 +++++++++++++++++ .../org.standardnotes.theme-dynamic/index.css | 22 +++++++ .../org.standardnotes.theme-focus/index.css | 49 +++++++++++++++ .../org.standardnotes.theme-futura/index.css | 45 ++++++++++++++ .../index.css | 46 ++++++++++++++ .../index.css | 61 +++++++++++++++++++ .../index.css | 42 +++++++++++++ 11 files changed, 341 insertions(+), 23 deletions(-) create mode 100644 packages/web/src/components/assets/org.standardnotes.theme-autobiography/index.css create mode 100644 packages/web/src/components/assets/org.standardnotes.theme-dynamic/index.css create mode 100644 packages/web/src/components/assets/org.standardnotes.theme-focus/index.css create mode 100644 packages/web/src/components/assets/org.standardnotes.theme-futura/index.css create mode 100644 packages/web/src/components/assets/org.standardnotes.theme-midnight/index.css create mode 100644 packages/web/src/components/assets/org.standardnotes.theme-solarized-dark/index.css create mode 100644 packages/web/src/components/assets/org.standardnotes.theme-titanium/index.css diff --git a/packages/blocks-editor/src/Lexical/Theme/editor.scss b/packages/blocks-editor/src/Lexical/Theme/editor.scss index adf6635f3..8ea50f20d 100644 --- a/packages/blocks-editor/src/Lexical/Theme/editor.scss +++ b/packages/blocks-editor/src/Lexical/Theme/editor.scss @@ -73,7 +73,7 @@ border-bottom: 1px solid rgba(88, 144, 255, 0.3); } .Lexical__link { - color: rgb(33, 111, 219); + color: var(--sn-stylekit-info-color); text-decoration: none; } .Lexical__link:hover { diff --git a/packages/features/src/Domain/Lists/Utilities/FillThemeComponentDefaults.ts b/packages/features/src/Domain/Lists/Utilities/FillThemeComponentDefaults.ts index d6e1a7d87..5960195f9 100644 --- a/packages/features/src/Domain/Lists/Utilities/FillThemeComponentDefaults.ts +++ b/packages/features/src/Domain/Lists/Utilities/FillThemeComponentDefaults.ts @@ -8,7 +8,7 @@ export function FillThemeComponentDefaults( theme: Partial & RequiredThemeFields, ): ThemeFeatureDescription { if (!theme.index_path) { - theme.index_path = 'dist/dist.css' + theme.index_path = 'index.css' } theme.content_type = ContentType.Theme diff --git a/packages/web/.gitignore b/packages/web/.gitignore index 90004aa43..207ab9500 100644 --- a/packages/web/.gitignore +++ b/packages/web/.gitignore @@ -1 +1,11 @@ -src/components +src/components/assets/org.standardnotes.advanced-markdown-editor +src/components/assets/org.standardnotes.bold-editor +src/components/assets/org.standardnotes.code-editor +src/components/assets/org.standardnotes.fancy-markdown-editor +src/components/assets/org.standardnotes.markdown-visual-editor +src/components/assets/org.standardnotes.minimal-markdown-editor +src/components/assets/org.standardnotes.plus-editor +src/components/assets/org.standardnotes.simple-markdown-editor +src/components/assets/org.standardnotes.simple-task-editor +src/components/assets/org.standardnotes.standard-sheets +src/components/assets/org.standardnotes.token-vault \ No newline at end of file diff --git a/packages/web/scripts/CopyComponents.mjs b/packages/web/scripts/CopyComponents.mjs index 444437f41..03007b12f 100644 --- a/packages/web/scripts/CopyComponents.mjs +++ b/packages/web/scripts/CopyComponents.mjs @@ -1,36 +1,23 @@ import fs from 'fs' import path from 'path' import { fileURLToPath } from 'url' -import { - copyRecursiveSync, - doesDirExist, - emptyExistingDir, - ensureDirExists, - copyFileOrDir, -} from '../../../scripts/ScriptUtils.mjs' +import { doesDirExist, emptyExistingDir, ensureDirExists, copyFileOrDir } from '../../../scripts/ScriptUtils.mjs' const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) const components = { '@standardnotes/authenticator': 'org.standardnotes.token-vault', - '@standardnotes/autobiography-theme': 'org.standardnotes.theme-autobiography', - '@standardnotes/classic-code-editor': 'org.standardnotes.code-editor', - '@standardnotes/dynamic-theme': 'org.standardnotes.theme-dynamic', - '@standardnotes/focus-theme': 'org.standardnotes.theme-focus', - '@standardnotes/futura-theme': 'org.standardnotes.theme-futura', - '@standardnotes/markdown-hybrid': 'org.standardnotes.advanced-markdown-editor', - '@standardnotes/markdown-visual': 'org.standardnotes.markdown-visual-editor', - '@standardnotes/midnight-theme': 'org.standardnotes.theme-midnight', - '@standardnotes/rich-text': 'org.standardnotes.plus-editor', - '@standardnotes/simple-task-editor': 'org.standardnotes.simple-task-editor', - '@standardnotes/solarized-dark-theme': 'org.standardnotes.theme-solarized-dark', - '@standardnotes/spreadsheets': 'org.standardnotes.standard-sheets', - '@standardnotes/titanium-theme': 'org.standardnotes.theme-titanium', '@standardnotes/bold-editor': 'org.standardnotes.bold-editor', + '@standardnotes/classic-code-editor': 'org.standardnotes.code-editor', '@standardnotes/markdown-basic': 'org.standardnotes.simple-markdown-editor', + '@standardnotes/markdown-hybrid': 'org.standardnotes.advanced-markdown-editor', '@standardnotes/markdown-math': 'org.standardnotes.fancy-markdown-editor', '@standardnotes/markdown-minimal': 'org.standardnotes.minimal-markdown-editor', + '@standardnotes/markdown-visual': 'org.standardnotes.markdown-visual-editor', + '@standardnotes/rich-text': 'org.standardnotes.plus-editor', + '@standardnotes/simple-task-editor': 'org.standardnotes.simple-task-editor', + '@standardnotes/spreadsheets': 'org.standardnotes.standard-sheets', } const BasePath = path.join(__dirname, '../../../node_modules') diff --git a/packages/web/src/components/assets/org.standardnotes.theme-autobiography/index.css b/packages/web/src/components/assets/org.standardnotes.theme-autobiography/index.css new file mode 100644 index 000000000..fead15fe8 --- /dev/null +++ b/packages/web/src/components/assets/org.standardnotes.theme-autobiography/index.css @@ -0,0 +1,56 @@ +:root { + --background-1: #ede4da; + --background-2: #e8d9c8; + --foreground-color: #5c3f27; + --border-color: #d9c6b1; + --highlight-color: #d68420; + --highlight-contrast: #e3ae74; + --sn-stylekit-passive-color-0: #7e582a; + --sn-stylekit-passive-color-1: #a37337; + --sn-stylekit-passive-color-3: #d9c6b1; + --sn-stylekit-passive-color-4: #e3d5c4; + --sn-stylekit-passive-color-4-opacity-variant: #c9995e3d; + --sn-stylekit-passive-color-5: #e9d9c7; + --sn-stylekit-info-color: #620613; + --sn-stylekit-info-contrast-color: #ebcdaa; + --sn-stylekit-neutral-color: #a47c5b; + --sn-stylekit-neutral-contrast-color: #e7ddd2; + --sn-stylekit-success-color: #9f4e03; + --sn-stylekit-success-contrast-color: #ebcdaa; + --sn-stylekit-warning-color: #b87a02; + --sn-stylekit-warning-contrast-color: #ebcdaa; + --sn-stylekit-danger-color: #a71428; + --sn-stylekit-danger-contrast-color: #ebcdaa; + + --sn-stylekit-accessory-tint-color-1: #941648; + + --sn-stylekit-shadow-color: var(--background-2); + --sn-stylekit-background-color: var(--background-1); + --sn-stylekit-foreground-color: var(--foreground-color); + --sn-stylekit-border-color: var(--border-color); + --sn-stylekit-paragraph-text-color: var(--foreground-color); + --sn-stylekit-contrast-background-color: var(--background-2); + --sn-stylekit-contrast-foreground-color: var(--foreground-color); + --sn-stylekit-contrast-border-color: var(--border-color); + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); + --sn-stylekit-secondary-foreground-color: var(--foreground-color); + --sn-stylekit-secondary-border-color: var(--border-color); + --sn-stylekit-secondary-contrast-background-color: var(--background-2); + --sn-stylekit-secondary-contrast-foreground-color: var(--foreground-color); + --sn-stylekit-secondary-contrast-border-color: var(--border-color); + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-scrollbar-track-border-color: var(--border-color); + --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color); + --sn-desktop-titlebar-bg-color: var(--background-1); + --sn-desktop-titlebar-border-color: var(--border-color); + --sn-desktop-titlebar-ui-color: var(--foreground-color); + --sn-desktop-titlebar-ui-hover-color: var(--highlight-color); + --navigation-item-selected-background-color: var(--sn-stylekit-background-color); +} + +#notes-column .note.selected, +.notes .note.selected { + background-color: #e9d9c7; + color: var(--sn-stylekit-contrast-foreground-color); +} diff --git a/packages/web/src/components/assets/org.standardnotes.theme-dynamic/index.css b/packages/web/src/components/assets/org.standardnotes.theme-dynamic/index.css new file mode 100644 index 000000000..80abb1c39 --- /dev/null +++ b/packages/web/src/components/assets/org.standardnotes.theme-dynamic/index.css @@ -0,0 +1,22 @@ +@media screen and (min-width: 768px) { + #navigation { + flex: none !important; + width: 10px !important; + transition: width 0.25s; + } + #navigation:hover { + flex: initial; + width: 200px !important; + transition: width 0.25s; + } + #items-column { + flex: none !important; + width: 270px !important; + transition: width 0.25s; + } + #items-column:hover { + flex: initial; + width: 380px !important; + transition: width 0.25s; + } +} diff --git a/packages/web/src/components/assets/org.standardnotes.theme-focus/index.css b/packages/web/src/components/assets/org.standardnotes.theme-focus/index.css new file mode 100644 index 000000000..f976feaee --- /dev/null +++ b/packages/web/src/components/assets/org.standardnotes.theme-focus/index.css @@ -0,0 +1,49 @@ +:root { + --foreground-color: #eeeeee; + --background-color: #0f1011; + --highlight-color: #a464c2; + --border-color: #0f1011; + --sn-component-foreground-color: var(--foreground-color); + --sn-component-background-color: transparent; + --sn-component-foreground-highlight-color: var(--highlight-color); + --sn-component-outer-border-color: transparent; + --sn-component-inner-border-color: var(--foreground-color); + --sn-stylekit-passive-color-0: #999999; + --sn-stylekit-passive-color-3: #28292b; + --sn-stylekit-passive-color-4: #1c1d1e; + --sn-stylekit-passive-color-5: #1d1f20; + --sn-stylekit-shadow-color: #000000; + --sn-stylekit-info-color: var(--highlight-color); + --sn-stylekit-info-contrast-color: var(--foreground-color); + --sn-stylekit-neutral-color: #7c7c7c; + --sn-stylekit-neutral-contrast-color: #ffffff; + --sn-stylekit-success-color: #2b9612; + --sn-stylekit-success-contrast-color: #ffffff; + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: #ffffff; + --sn-stylekit-danger-color: #f80324; + --sn-stylekit-danger-contrast-color: #ffffff; + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-background-color: var(--background-color); + --sn-stylekit-foreground-color: var(--foreground-color); + --sn-stylekit-border-color: #000000; + --sn-stylekit-contrast-background-color: #000000; + --sn-stylekit-contrast-foreground-color: #ffffff; + --sn-stylekit-contrast-border-color: #000000; + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); + --sn-stylekit-secondary-foreground-color: #ffffff; + --sn-stylekit-secondary-border-color: #000000; + --sn-stylekit-secondary-contrast-background-color: #000000; + --sn-stylekit-secondary-contrast-foreground-color: #ffffff; + --sn-stylekit-secondary-contrast-border-color: #ffffff; + --sn-stylekit-paragraph-text-color: #ffffff; + --sn-desktop-titlebar-bg-color: var(--background-color); + --sn-desktop-titlebar-border-color: var(--border-color); + --sn-desktop-titlebar-ui-color: var(--foreground-color); + --sn-desktop-titlebar-ui-hover-color: var(--highlight-color); + --sn-stylekit-scrollbar-track-border-color: var(--border-color); + --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color); + --sn-stylekit-menu-border: 1px solid #424242; + --navigation-item-selected-background-color: var(--background-color); +} diff --git a/packages/web/src/components/assets/org.standardnotes.theme-futura/index.css b/packages/web/src/components/assets/org.standardnotes.theme-futura/index.css new file mode 100644 index 000000000..b34e839a6 --- /dev/null +++ b/packages/web/src/components/assets/org.standardnotes.theme-futura/index.css @@ -0,0 +1,45 @@ +:root { + --foreground-color: #a9aabe; + --background-color: #20202b; + --highlight-color: #fca429; + --border-color: #20222c; + --sn-stylekit-passive-color-0: #a4a5b3; + --sn-stylekit-passive-color-3: #3a3a48; + --sn-stylekit-passive-color-4: #2c2c39; + --sn-stylekit-passive-color-4-opacity-variant: #292937; + --sn-stylekit-passive-color-5: #2e2e3e; + --sn-stylekit-shadow-color: var(--border-color); + --sn-stylekit-info-color: var(--highlight-color); + --sn-stylekit-info-contrast-color: var(--background-color); + --sn-stylekit-neutral-color: #7c7c7c; + --sn-stylekit-neutral-contrast-color: #ffffff; + --sn-stylekit-success-color: #2b9612; + --sn-stylekit-success-contrast-color: #ffffff; + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: #ffffff; + --sn-stylekit-danger-color: #f80324; + --sn-stylekit-danger-contrast-color: #ffffff; + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-background-color: #20202b; + --sn-stylekit-foreground-color: #a9aabe; + --sn-stylekit-border-color: #0f1116; + --sn-stylekit-contrast-background-color: #272734; + --sn-stylekit-contrast-foreground-color: #a9aabe; + --sn-stylekit-contrast-border-color: #0f1116; + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); + --sn-stylekit-secondary-foreground-color: #a9aabe; + --sn-stylekit-secondary-border-color: #20222c; + --sn-stylekit-secondary-contrast-background-color: #272734; + --sn-stylekit-secondary-contrast-foreground-color: #a9aabe; + --sn-stylekit-secondary-contrast-border-color: #272734; + --sn-stylekit-paragraph-text-color: var(--foreground-color); + --sn-stylekit-scrollbar-track-border-color: var(--border-color); + --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color); + --sn-desktop-titlebar-bg-color: var(--background-color); + --sn-desktop-titlebar-border-color: var(--border-color); + --sn-desktop-titlebar-ui-color: var(--foreground-color); + --sn-desktop-titlebar-ui-hover-color: var(--highlight-color); + --sn-stylekit-menu-border: 1px solid #434b60; + --navigation-item-selected-background-color: var(--sn-stylekit-background-color); +} diff --git a/packages/web/src/components/assets/org.standardnotes.theme-midnight/index.css b/packages/web/src/components/assets/org.standardnotes.theme-midnight/index.css new file mode 100644 index 000000000..aad0384a1 --- /dev/null +++ b/packages/web/src/components/assets/org.standardnotes.theme-midnight/index.css @@ -0,0 +1,46 @@ +:root { + --primary-bg-color: #292937; + --secondary-bg-color: #313142; + --editor-bg-color: #202020; + --border-color: #13131a; + --ui-text-color: #d8d8d8; + --sn-stylekit-info-color: #4ca3ff; + --sn-stylekit-info-contrast-color: white; + --sn-stylekit-neutral-color: #7c7c7c; + --sn-stylekit-neutral-contrast-color: white; + --sn-stylekit-success-color: #01be79; + --sn-stylekit-success-contrast-color: white; + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: white; + --sn-stylekit-danger-color: #f80324; + --sn-stylekit-danger-contrast-color: white; + --sn-desktop-titlebar-bg-color: var(--primary-bg-color); + --sn-desktop-titlebar-border-color: var(--border-color); + --sn-desktop-titlebar-ui-color: var(--ui-text-color); + --sn-desktop-titlebar-ui-hover-color: var(--sn-stylekit-info-color); + --sn-stylekit-passive-color-0: #94979e; + --sn-stylekit-passive-color-3: #2c2c39; + --sn-stylekit-passive-color-4: #313142; + --sn-stylekit-passive-color-4-opacity-variant: #292937; + --sn-stylekit-passive-color-5: #313142; + --sn-stylekit-shadow-color: #20202b; + --sn-stylekit-background-color: #20202b; + --sn-stylekit-border-color: var(--border-color); + --sn-stylekit-foreground-color: var(--ui-text-color); + --sn-stylekit-contrast-background-color: var(--secondary-bg-color); + --sn-stylekit-contrast-foreground-color: var(--ui-text-color); + --sn-stylekit-contrast-border-color: var(--border-color); + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); + --sn-stylekit-secondary-foreground-color: var(--ui-text-color); + --sn-stylekit-secondary-border-color: var(--border-color); + --sn-stylekit-secondary-contrast-background-color: #45445a; + --sn-stylekit-secondary-contrast-foreground-color: var(--ui-text-color); + --sn-stylekit-secondary-contrast-border-color: var(--border-color); + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-paragraph-text-color: var(--ui-text-color); + --sn-stylekit-scrollbar-track-border-color: var(--border-color); + --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color); + --sn-stylekit-menu-border: 1px solid #494965; + --navigation-item-selected-background-color: var(--sn-stylekit-background-color); +} diff --git a/packages/web/src/components/assets/org.standardnotes.theme-solarized-dark/index.css b/packages/web/src/components/assets/org.standardnotes.theme-solarized-dark/index.css new file mode 100644 index 000000000..913389a62 --- /dev/null +++ b/packages/web/src/components/assets/org.standardnotes.theme-solarized-dark/index.css @@ -0,0 +1,61 @@ +:root { + --background-1: #002b36; + --background-2: #083642; + --foreground-color: #fdf6e3; + --highlight-color: #2aa198; + --border-color: #00252e; + --pre-color: #d6dbdb; + --content-1: #586d75; + --content-2: #667a83; + --content-3: #839496; + --content-4: #93a1a1; + /* Footer */ + --footer-bar-border-top-color: 0; + /* Column Menus */ + --menu-item-sep-color: rgba(0, 0, 0, 0.1); + --sn-component-foreground-color: var(--content-1); + --sn-component-background-color: var(--border-color); + --sn-component-foreground-highlight-color: var(--highlight-color); + --sn-component-outer-border-color: transparent; + --sn-component-inner-border-color: var(--highlight-color); + --sn-stylekit-passive-color-0: #a8bdbd; + --sn-stylekit-passive-color-1: #93a1a1; + --sn-stylekit-passive-color-3: #0d4f60; + --sn-stylekit-passive-color-4: #083642; + --sn-stylekit-passive-color-4-opacity-variant: #2aa1983d; + --sn-stylekit-passive-color-5: #003542; + --sn-stylekit-info-color: var(--highlight-color); + --sn-stylekit-info-contrast-color: var(--foreground-color); + --sn-stylekit-neutral-color: #7c7c7c; + --sn-stylekit-neutral-contrast-color: white; + --sn-stylekit-success-color: #2b9612; + --sn-stylekit-success-contrast-color: white; + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: white; + --sn-stylekit-danger-color: #f80324; + --sn-stylekit-danger-contrast-color: white; + --sn-stylekit-shadow-color: var(--background-2); + --sn-stylekit-background-color: var(--background-1); + --sn-stylekit-foreground-color: var(--foreground-color); + --sn-stylekit-border-color: var(--border-color); + --sn-stylekit-paragraph-text-color: var(--foreground-color); + --sn-stylekit-contrast-background-color: var(--background-2); + --sn-stylekit-contrast-foreground-color: var(--foreground-color); + --sn-stylekit-contrast-border-color: var(--border-color); + --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4); + --sn-stylekit-secondary-foreground-color: var(--foreground-color); + --sn-stylekit-secondary-border-color: var(--border-color); + --sn-stylekit-secondary-contrast-background-color: var(--background-2); + --sn-stylekit-secondary-contrast-foreground-color: var(--foreground-color); + --sn-stylekit-secondary-contrast-border-color: var(--border-color); + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-scrollbar-track-border-color: var(--border-color); + --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color); + --sn-desktop-titlebar-bg-color: var(--background-1); + --sn-desktop-titlebar-border-color: var(--border-color); + --sn-desktop-titlebar-ui-color: var(--foreground-color); + --sn-desktop-titlebar-ui-hover-color: var(--highlight-color); + --sn-stylekit-menu-border: 1px solid #1f5461; + --navigation-item-selected-background-color: var(--sn-stylekit-background-color); +} diff --git a/packages/web/src/components/assets/org.standardnotes.theme-titanium/index.css b/packages/web/src/components/assets/org.standardnotes.theme-titanium/index.css new file mode 100644 index 000000000..65c76aab0 --- /dev/null +++ b/packages/web/src/components/assets/org.standardnotes.theme-titanium/index.css @@ -0,0 +1,42 @@ +:root { + --foreground-color: #3d3c40; + --background-color: #663399; + --highlight-color: #c9cccf; + --border-color: var(--highlight-color); + --sn-stylekit-passive-color-0: #626166; + --sn-stylekit-passive-color-4-opacity-variant: #e9e9e9; + --sn-stylekit-shadow-color: var(--highlight-color); + --sn-stylekit-info-color: var(--background-color); + --sn-stylekit-info-contrast-color: #e6e6e6; + --sn-stylekit-neutral-color: #7c7c7c; + --sn-stylekit-neutral-contrast-color: #ffffff; + --sn-stylekit-success-color: #2b9612; + --sn-stylekit-success-contrast-color: #ffffff; + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: #ffffff; + --sn-stylekit-danger-color: #f80324; + --sn-stylekit-danger-contrast-color: #ffffff; + --sn-stylekit-background-color: var(--sn-stylekit-passive-color-4); + --sn-stylekit-foreground-color: #3d3c40; + --sn-stylekit-border-color: #c9cccf; + --sn-stylekit-contrast-background-color: #e7e7e7; + --sn-stylekit-contrast-foreground-color: #3d3c40; + --sn-stylekit-contrast-border-color: #c9cccf; + --sn-stylekit-secondary-background-color: #d9dbde; + --sn-stylekit-secondary-foreground-color: #3d3c40; + --sn-stylekit-secondary-border-color: #c9cccf; + --sn-stylekit-secondary-contrast-background-color: #e7e7e7; + --sn-stylekit-secondary-contrast-foreground-color: #3d3c40; + --sn-stylekit-secondary-contrast-border-color: #c9cccf; + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-paragraph-text-color: #3d3c40; + --sn-stylekit-scrollbar-track-border-color: var(--border-color); + --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-neutral-color); + --sn-desktop-titlebar-bg-color: #d9dbde; + --sn-desktop-titlebar-border-color: var(--highlight-color); + --sn-desktop-titlebar-ui-color: var(--foreground-color); + --sn-desktop-titlebar-ui-hover-color: var(--background-color); + --sn-stylekit-menu-border: 1px solid #b2b2b3; + --navigation-item-selected-background-color: var(--sn-stylekit-background-color); +}