From bb4fc29c8346a7a7a621480366f57d18f2c728ab Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 8 Jan 2024 14:41:09 +0100 Subject: [PATCH] JS-3190: CSS vars --- anytype-ts.code-workspace | 22 +++++++++ src/scss/_vars.scss | 4 ++ src/scss/block/common.scss | 2 +- src/scss/block/cover.scss | 2 +- src/scss/block/dataview.scss | 14 +++--- src/scss/block/dataview/cell.scss | 2 +- src/scss/block/dataview/view/common.scss | 6 +-- src/scss/block/dataview/view/gallery.scss | 2 +- src/scss/block/dataview/view/list.scss | 2 +- src/scss/block/link.scss | 2 +- src/scss/block/table.scss | 2 +- src/scss/block/text.scss | 2 +- src/scss/common.scss | 16 +++---- src/scss/component/cover.scss | 4 +- src/scss/component/dotIndicator.scss | 2 +- src/scss/component/editor.scss | 2 +- src/scss/component/emptySearch.scss | 2 +- src/scss/component/header.scss | 6 +-- src/scss/component/loader.scss | 4 +- src/scss/component/media/audio.scss | 2 +- src/scss/component/pager.scss | 2 +- src/scss/component/preview/common.scss | 2 +- src/scss/component/preview/link.scss | 4 +- src/scss/component/progress.scss | 2 +- src/scss/component/tooltip.scss | 2 +- src/scss/form/button.scss | 2 +- src/scss/form/inputWithFile.scss | 4 +- src/scss/list/widget.scss | 2 +- src/scss/menu/block/cover.scss | 2 +- src/scss/menu/block/icon.scss | 4 +- src/scss/menu/block/link.scss | 2 +- src/scss/menu/block/relation.scss | 4 +- src/scss/menu/button.scss | 2 +- src/scss/menu/common.scss | 4 +- src/scss/menu/dataview/create/bookmark.scss | 2 +- src/scss/menu/onboarding.scss | 2 +- src/scss/menu/select.scss | 2 +- src/scss/menu/smile.scss | 2 +- src/scss/page/main/space.scss | 2 +- src/scss/page/main/store.scss | 4 +- src/scss/page/main/type.scss | 4 +- src/scss/popup/settings.scss | 10 ++-- src/scss/popup/shortcut.scss | 2 +- src/scss/theme/dark/_vars.scss | 4 ++ src/scss/theme/dark/block.scss | 36 +++++++------- src/scss/theme/dark/common.scss | 52 ++++++++++----------- src/scss/theme/dark/menu.scss | 26 +++++------ src/scss/theme/dark/page.scss | 6 +-- src/scss/theme/dark/popup.scss | 8 ++-- src/scss/theme/dark/widget.scss | 6 +-- src/scss/widget/list.scss | 2 +- 51 files changed, 169 insertions(+), 139 deletions(-) create mode 100644 anytype-ts.code-workspace diff --git a/anytype-ts.code-workspace b/anytype-ts.code-workspace new file mode 100644 index 0000000000..b9b439e13a --- /dev/null +++ b/anytype-ts.code-workspace @@ -0,0 +1,22 @@ +{ + "folders": [ + { + "path": "." + } + ], + "extensions": { + "recommendations": [ + "aaron-bond.better-comments", + "github.copilot", + "eamodio.gitlens", + "timonwong.shellcheck", + "dbaeumer.vscode-eslint" + ] + }, + "settings": { + "editor.formatOnSave": false, + "editor.formatOnPaste": false, + "editor.formatOnType": false, + "debug.inlineValues": "on" + } +} diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss index c94ebd1f0c..7d9634de60 100644 --- a/src/scss/_vars.scss +++ b/src/scss/_vars.scss @@ -1,3 +1,7 @@ +:root { + --color-text-primary: #252525; +} + /* Text */ $colorTextPrimary: #252525; diff --git a/src/scss/block/common.scss b/src/scss/block/common.scss index f5ee2e5d6e..11e58d50fc 100644 --- a/src/scss/block/common.scss +++ b/src/scss/block/common.scss @@ -46,7 +46,7 @@ display: none; margin-left: 28px; color: $colorControlActive; position: relative; z-index: 2; @include text-overflow-nw; } - .emptyToggle:hover { color: $colorTextPrimary; } + .emptyToggle:hover { color: var(--color-text-primary); } } .block.index0 { padding-top: 0px !important; } diff --git a/src/scss/block/cover.scss b/src/scss/block/cover.scss index e3353e68bd..bf58fe7e9f 100644 --- a/src/scss/block/cover.scss +++ b/src/scss/block/cover.scss @@ -11,7 +11,7 @@ } .loaderWrapper { .loader { - left: auto; top: 16px; right: 16px; margin: 0px; border-color: $colorBgPrimary; border-left: 2px solid $colorTextPrimary; + left: auto; top: 16px; right: 16px; margin: 0px; border-color: $colorBgPrimary; border-left: 2px solid var(--color-text-primary); } } diff --git a/src/scss/block/dataview.scss b/src/scss/block/dataview.scss index 1989a9c15f..4f325d5a4a 100644 --- a/src/scss/block/dataview.scss +++ b/src/scss/block/dataview.scss @@ -22,7 +22,7 @@ .icon { flex-shrink: 0; width: 20px; height: 20px; background-image: url('~img/arrow/loadMore0.svg'); } } - .loadMore:hover { color: $colorTextPrimary; } + .loadMore:hover { color: var(--color-text-primary); } .loadMore:hover { .icon { background-image: url('~img/arrow/loadMore1.svg'); } } @@ -58,10 +58,10 @@ .inner { width: 300px; } .name { font-weight: 500; margin: 0px 0px 2px 0px; } .descr { @include text-small; margin: 0px 0px 8px 0px; } - .button { color: $colorTextPrimary; } + .button { color: var(--color-text-primary); } } - .dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: $colorTextPrimary; } + .dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: var(--color-text-primary); } .dataviewHead { .icon.source { width: 28px; height: 28px; background-size: 24px; background-image: url('~img/icon/dataview/button/source0.svg'); opacity: 0; } .icon.source.active { opacity: 1; } @@ -95,7 +95,7 @@ > .side.left { flex-grow: 1; padding-left: 14px; max-width: 100%; } > .side.right { flex-shrink: 0; gap: 0px 4px; justify-content: flex-end; } > .side.right { - .filter { color: $colorTextPrimary; padding: 0px; } + .filter { color: var(--color-text-primary); padding: 0px; } .filter { .inner { gap: 0px; height: 100%; } .filterInputWrap { overflow: hidden; width: 0px; transition: width 0.2s $easeInQuint; } @@ -143,10 +143,10 @@ .icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/view.svg'); } } .viewItem:last-child { margin: 0px; } - .viewItem:hover, .viewItem.active { color: $colorTextPrimary; } + .viewItem:hover, .viewItem.active { color: var(--color-text-primary); } .viewItem.isDragging { background: rgba(255,255,255,0.5); padding: 0px 4px; border-radius: 4px; width: auto !important; } - .viewSelect { display: none; border: 0px; padding-left: 0px; color: $colorTextPrimary; } + .viewSelect { display: none; border: 0px; padding-left: 0px; color: var(--color-text-primary); } .viewSelect { .icon:hover, .icon.active { background-color: transparent !important; } .name { @include text-overflow-nw; } @@ -169,7 +169,7 @@ .side.right { .element { display: flex; flex-direction: row; align-items: center; gap: 0px 6px; border-radius: 4px; padding: 0px 6px 0px 4px; - transition: $transitionAllCommon; color: $colorTextPrimary; + transition: $transitionAllCommon; color: var(--color-text-primary); } .element { .icon { width: 20px; height: 20px; } diff --git a/src/scss/block/dataview/cell.scss b/src/scss/block/dataview/cell.scss index 5d08bdaf64..4e4a45ce16 100644 --- a/src/scss/block/dataview/cell.scss +++ b/src/scss/block/dataview/cell.scss @@ -119,7 +119,7 @@ .itemWrap { display: inline-block; } .placeholder { position: absolute; left: 0px; top: 0px; height: 100%; } - #entry { -webkit-user-modify: read-write-plaintext-only; color: $colorTextPrimary; } + #entry { -webkit-user-modify: read-write-plaintext-only; color: var(--color-text-primary); } #list { margin-right: 6px; position: relative; word-wrap: break-word; } } diff --git a/src/scss/block/dataview/view/common.scss b/src/scss/block/dataview/view/common.scss index 9f96b3b6b1..c888c21813 100644 --- a/src/scss/block/dataview/view/common.scss +++ b/src/scss/block/dataview/view/common.scss @@ -8,7 +8,7 @@ .cell.add { color: $colorControlActive; line-height: 20px; width: 100%; display: block; } .cell.add { .btn { display: inline-block; transition: $transitionAllCommon; } - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn:hover { .icon.plus { background-image: url('~img/icon/plus/menu1.svg'); } } @@ -26,12 +26,12 @@ .cellContent.canEdit { cursor: default; } .cellContent:empty, .cellContent.isEmpty { display: none; } .cellContent.last { margin: 0px; } - .cellContent.c-description { color: $colorTextPrimary; } + .cellContent.c-description { color: var(--color-text-primary); } .cellContent { .more { vertical-align: top; height: 18px; } } - .cellContent.isName { @include text-paragraph; color: $colorTextPrimary; display: flex; gap: 0px 6px; position: relative; } + .cellContent.isName { @include text-paragraph; color: var(--color-text-primary); display: flex; gap: 0px 6px; position: relative; } .cellContent.isName { .iconObject { position: absolute; left: 0px; top: 0px; margin: 0px; cursor: default; } .name { diff --git a/src/scss/block/dataview/view/gallery.scss b/src/scss/block/dataview/view/gallery.scss index bd81e03d42..94fef9bff0 100644 --- a/src/scss/block/dataview/view/gallery.scss +++ b/src/scss/block/dataview/view/gallery.scss @@ -65,7 +65,7 @@ .card:hover { border-color: $colorShapeSecondary; background: $colorShapeHighlightLight; } .card:hover { .cover { - .inner { color: $colorTextPrimary; } + .inner { color: var(--color-text-primary); } .inner .icon.plus { background-image: url('~img/icon/plus/gallery-cover1.svg'); } } diff --git a/src/scss/block/dataview/view/list.scss b/src/scss/block/dataview/view/list.scss index 83e4c3a0b1..54eff22b41 100644 --- a/src/scss/block/dataview/view/list.scss +++ b/src/scss/block/dataview/view/list.scss @@ -31,7 +31,7 @@ .name { @include text-overflow-nw; max-width: 200px; } } - .cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: $colorTextPrimary; } + .cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: var(--color-text-primary); } .cellContent.isName { .name { display: inline-block; line-height: 24px; vertical-align: top; font-weight: 500; max-width: 500px; } .input.name { padding: 0; @include text-paragraph; } diff --git a/src/scss/block/link.scss b/src/scss/block/link.scss index 26bfd06fd6..065f8a95f4 100644 --- a/src/scss/block/link.scss +++ b/src/scss/block/link.scss @@ -156,7 +156,7 @@ .block.blockLink.text:hover { .linkCard { - .cardName .name { border-color: $colorTextPrimary; } + .cardName .name { border-color: var(--color-text-primary); } } } diff --git a/src/scss/block/table.scss b/src/scss/block/table.scss index dbeb07cc5a..55932b36d9 100644 --- a/src/scss/block/table.scss +++ b/src/scss/block/table.scss @@ -149,7 +149,7 @@ .resize { width: 6px; height: 100%; position: absolute; right: -3px; top: 0px; cursor: col-resize; z-index: 3; } .click { width: 100%; height: 100%; } - .block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: $colorTextPrimary; } + .block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: var(--color-text-primary); } .block { .selectable { flex-grow: 1; } .wrapContent, .wrap, .flex, .dropTarget { height: 100%; } diff --git a/src/scss/block/text.scss b/src/scss/block/text.scss index 90d45a2195..1ff3432f26 100644 --- a/src/scss/block/text.scss +++ b/src/scss/block/text.scss @@ -46,7 +46,7 @@ markupmention.withImage.c28 name markupBgcolor:first-child { margin-left: -27px; padding-left: 27px; } markupmention.withImage.c32 name markupBgcolor:first-child { margin-left: -34px; padding-left: 34px; } markupmention:hover { - name::before { border-color: $colorTextPrimary; } + name::before { border-color: var(--color-text-primary); } } markupbold { font-weight: 600; } diff --git a/src/scss/common.scss b/src/scss/common.scss index 643efbb177..315a166dae 100644 --- a/src/scss/common.scss +++ b/src/scss/common.scss @@ -4,7 +4,7 @@ html, body { height: 100%; } body { - font-family: 'Inter'; @include text-common; color: $colorTextPrimary; overflow-x: hidden; overflow-y: auto; background: $colorBgPrimary; + font-family: 'Inter'; @include text-common; color: var(--color-text-primary); overflow-x: hidden; overflow-y: auto; background: $colorBgPrimary; -webkit-font-smoothing: antialiased; backface-visibility: hidden; transform-style: flat; overscroll-behavior: none; } body.colResize { cursor: col-resize !important; } @@ -101,8 +101,8 @@ html.platformWindows, html.platformLinux { .editableWrap { position: relative; } -a { color: $colorTextPrimary; } -search { background: yellow !important; color: $colorTextPrimary !important; border-radius: 2px; display: inline; } +a { color: var(--color-text-primary); } +search { background: yellow !important; color: var(--color-text-primary) !important; border-radius: 2px; display: inline; } search.active { background: orange !important; } .dropTarget.isOver.middle { background: $colorSystemDropZone !important; } @@ -124,8 +124,8 @@ search.active { background: orange !important; } pointer-events: none; z-index: 10; content: ""; border-radius: 2px; } -.textColor-default { color: $colorTextPrimary !important; } -.textColor-black { color: $colorTextPrimary !important; } +.textColor-default { color: var(--color-text-primary) !important; } +.textColor-black { color: var(--color-text-primary) !important; } .textColor-grey { color: $colorControlActive !important; } .textColor-yellow { color: $colorYellow !important; } .textColor-orange { color: $colorOrange !important; } @@ -149,7 +149,7 @@ search.active { background: orange !important; } .bgColor-lime { background: #e3f7d0 !important; } .isMultiSelect.archive { color: $colorTextSecondary; background: $colorShapeTertiary; } -.isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; } +.isMultiSelect.tagColor-default { color: var(--color-text-primary) !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; } .isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: #ebeff1 !important; } .isMultiSelect.tagColor-yellow { color: #b2a616 !important; background: #fbf5b8 !important; } .isMultiSelect.tagColor-orange { color: #d3720d !important; background: #ffEcc8 !important; } @@ -161,8 +161,8 @@ search.active { background: orange !important; } .isMultiSelect.tagColor-teal { color: #0caaa3 !important; background: #d4f5f3 !important; } .isMultiSelect.tagColor-lime { color: #64b90f !important; background: #e3f7d0 !important; } -.isSelect.tagColor-default { color: $colorTextPrimary !important; } -.isSelect.tagColor-black { color: $colorTextPrimary !important; } +.isSelect.tagColor-default { color: var(--color-text-primary) !important; } +.isSelect.tagColor-black { color: var(--color-text-primary) !important; } .isSelect.tagColor-grey { color: $colorControlActive !important; } .isSelect.tagColor-yellow { color: $colorYellow !important; } .isSelect.tagColor-orange { color: $colorOrange !important; } diff --git a/src/scss/component/cover.scss b/src/scss/component/cover.scss index c3497f56e2..e828d59bc6 100644 --- a/src/scss/component/cover.scss +++ b/src/scss/component/cover.scss @@ -2,7 +2,7 @@ .cover { background-repeat: no-repeat; background-size: cover; background-position: top center; color: $colorBgPrimary; position: fixed; left: 0px; - top: 0px; width: 100%; height: 100%; background-color: $colorTextPrimary; + top: 0px; width: 100%; height: 100%; background-color: var(--color-text-primary); } .cover.type2.white { background-color: $colorBgPrimary !important; } @@ -18,7 +18,7 @@ .cover.type2.green { background-color: #136E41 !important; } .cover.type2.lightgrey { background-color: $colorShapeSecondary !important; } .cover.type2.darkgrey { background: $colorControlActive !important; } -.cover.type2.black { background-color: $colorTextPrimary !important; } +.cover.type2.black { background-color: var(--color-text-primary) !important; } .cover.type3.yellow { background-image: linear-gradient(180deg, $colorSystemAccent100 0%, $colorYellow 105.47%); } .cover.type3.red { background-image: linear-gradient(180deg, $colorRed 0%, $colorPink 105.47%); } diff --git a/src/scss/component/dotIndicator.scss b/src/scss/component/dotIndicator.scss index d3108b6e4f..a1f2a6d8dd 100644 --- a/src/scss/component/dotIndicator.scss +++ b/src/scss/component/dotIndicator.scss @@ -2,6 +2,6 @@ .dotIndicator { display: flex; justify-content: center; align-items: center; gap: 0px 6px; } .dotIndicator { - span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: $colorTextPrimary; } + span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-text-primary); } span.active { background-color: $colorShapePrimary; opacity: 0.9; } } \ No newline at end of file diff --git a/src/scss/component/editor.scss b/src/scss/component/editor.scss index 04d6e10272..7c54840d73 100644 --- a/src/scss/component/editor.scss +++ b/src/scss/component/editor.scss @@ -46,7 +46,7 @@ transition: background $transitionCommon, color $transitionCommon; height: 28px; padding: 0px 8px 0px 6px; border-radius: 6px; display: flex; flex-direction: row; align-items: center; } - .btn:hover, .btn.hover { background: $colorShapeHighlightMedium; color: $colorTextPrimary; } + .btn:hover, .btn.hover { background: $colorShapeHighlightMedium; color: var(--color-text-primary); } .btn { .icon { width: 20px; height: 20px; margin-right: 4px; } diff --git a/src/scss/component/emptySearch.scss b/src/scss/component/emptySearch.scss index 543039c803..6077aca477 100644 --- a/src/scss/component/emptySearch.scss +++ b/src/scss/component/emptySearch.scss @@ -2,7 +2,7 @@ .emptySearch { height: 100%; padding: 0px 16px; text-align: center; } .emptySearch { - b { display: block; font-weight: 400; color: $colorTextPrimary; } + b { display: block; font-weight: 400; color: var(--color-text-primary); } span { @include text-overflow-nw; max-width: 100%; display: block; } .txt { line-height: 24px; color: $colorControlActive; width: 100%; } } \ No newline at end of file diff --git a/src/scss/component/header.scss b/src/scss/component/header.scss index c4ce6984c7..8c76fd8c9d 100644 --- a/src/scss/component/header.scss +++ b/src/scss/component/header.scss @@ -26,8 +26,8 @@ font-weight: 700; color: $colorControlActive; transition: $transitionAllCommon; text-align: center; vertical-align: top; padding: 0px 16px; display: flex; align-items: center; height: 100%; border-bottom: 1px solid rgba(0,0,0,0); } - .tab:hover { color: $colorTextPrimary; } - .tab.active { color: $colorTextPrimary; border-color: $colorTextPrimary; } + .tab:hover { color: var(--color-text-primary); } + .tab.active { color: var(--color-text-primary); border-color: var(--color-text-primary); } } .headerBanner { @@ -92,7 +92,7 @@ } .item.orange { color: $colorOrange !important; font-weight: 500; } - .item.grey:hover { color: $colorTextPrimary; } + .item.grey:hover { color: var(--color-text-primary); } .item.orange:hover { color: $colorSystemAccent100 !important; } .item:hover { diff --git a/src/scss/component/loader.scss b/src/scss/component/loader.scss index 666a78ed05..2d9022ad24 100644 --- a/src/scss/component/loader.scss +++ b/src/scss/component/loader.scss @@ -8,8 +8,8 @@ } @keyframes dots-light { - 0% { background-color: $colorTextPrimary; } - 32% { background-color: $colorTextPrimary; } + 0% { background-color: var(--color-text-primary); } + 32% { background-color: var(--color-text-primary); } 100% { background-color: rgba(0,0,0,0); } } diff --git a/src/scss/component/media/audio.scss b/src/scss/component/media/audio.scss index 7f26523520..ab16c23009 100644 --- a/src/scss/component/media/audio.scss +++ b/src/scss/component/media/audio.scss @@ -2,7 +2,7 @@ .mediaAudio { width: 100%; } .mediaAudio { - .controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: $colorTextPrimary; } + .controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: var(--color-text-primary); } .controls { .input-drag { .icon { cursor: default; } diff --git a/src/scss/component/pager.scss b/src/scss/component/pager.scss index 5e3696325b..ac2654aedc 100644 --- a/src/scss/component/pager.scss +++ b/src/scss/component/pager.scss @@ -10,7 +10,7 @@ min-width: 24px; display: inline-block; padding: 0px 2px; transition: $transitionAllCommon; text-align: center; vertical-align: top; line-height: 20px; } - .pageItem:hover, .pageItem.active { color: $colorTextPrimary; } + .pageItem:hover, .pageItem.active { color: var(--color-text-primary); } .pageItem.list { cursor: default; } .pageItem.list:hover { color: $colorControlActive; } diff --git a/src/scss/component/preview/common.scss b/src/scss/component/preview/common.scss index c47f22beac..26f0ecc661 100644 --- a/src/scss/component/preview/common.scss +++ b/src/scss/component/preview/common.scss @@ -13,7 +13,7 @@ } .head { .item { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; cursor: default; } - .item:hover { color: $colorTextPrimary; } + .item:hover { color: var(--color-text-primary); } .item:last-child { margin: 0px; } } diff --git a/src/scss/component/preview/link.scss b/src/scss/component/preview/link.scss index 3e3424d0cc..c7c2a0fb9a 100644 --- a/src/scss/component/preview/link.scss +++ b/src/scss/component/preview/link.scss @@ -2,9 +2,9 @@ .previewLink { .link { @include text-small; height: 18px; margin-bottom: 2px; color: $colorTextSecondary; @include text-overflow-nw; } - .name { @include text-common; font-weight: 500; height: 22px; color: $colorTextPrimary; @include text-overflow-nw; margin-bottom: 2px; } + .name { @include text-common; font-weight: 500; height: 22px; color: var(--color-text-primary); @include text-overflow-nw; margin-bottom: 2px; } .descr { - @include text-small; @include clamp2; height: 36px; color: $colorTextPrimary; margin: 2px 0px 0px 0px; + @include text-small; @include clamp2; height: 36px; color: var(--color-text-primary); margin: 2px 0px 0px 0px; } .img { diff --git a/src/scss/component/progress.scss b/src/scss/component/progress.scss index 5fdb3557ec..d739e098f0 100644 --- a/src/scss/component/progress.scss +++ b/src/scss/component/progress.scss @@ -17,7 +17,7 @@ transition-property: opacity, transform; transition-duration: 0.05s; transition-timing-function: ease-in-out; pointer-events: all; } .inner { - .label { position: absolute; left: 16px; top: 12px; z-index: 1; color: $colorTextPrimary; white-space: nowrap; @include text-paragraph; } + .label { position: absolute; left: 16px; top: 12px; z-index: 1; color: var(--color-text-primary); white-space: nowrap; @include text-paragraph; } .bar { width: calc(100% - 32px); height: 8px; background: $colorShapeTertiary; overflow: hidden; border-radius: 8px; position: absolute; bottom: 16px; left: 16px; } .fill { position: absolute; left: 0px; top: 0px; height: 100%; background: $colorControlAccent; transition: width 0.2s linear; } } diff --git a/src/scss/component/tooltip.scss b/src/scss/component/tooltip.scss index c867b23323..bd51535524 100644 --- a/src/scss/component/tooltip.scss +++ b/src/scss/component/tooltip.scss @@ -14,7 +14,7 @@ } .tooltip.big { - background-color: $colorBgPrimary; color: $colorTextPrimary; width: 316px; white-space: normal; padding: 12px 16px; + background-color: $colorBgPrimary; color: var(--color-text-primary); width: 316px; white-space: normal; padding: 12px 16px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px; } .tooltip.big { diff --git a/src/scss/form/button.scss b/src/scss/form/button.scss index c5dcd9e065..86680c11f4 100644 --- a/src/scss/form/button.scss +++ b/src/scss/form/button.scss @@ -49,4 +49,4 @@ input.button { line-height: 1; } letter-spacing: 0.1px; } .button.simple:hover, -.button.simple.hover { color: $colorTextPrimary; } +.button.simple.hover { color: var(--color-text-primary); } diff --git a/src/scss/form/inputWithFile.scss b/src/scss/form/inputWithFile.scss index 82a4b22135..62ae56e77f 100644 --- a/src/scss/form/inputWithFile.scss +++ b/src/scss/form/inputWithFile.scss @@ -9,13 +9,13 @@ .txt { line-height: 20px; height: 20px; overflow: hidden; width: calc(100% - 26px); vertical-align: top; } .fileWrap { display: inline-block; vertical-align: top; } .fileWrap .border { border-bottom: 0.05em solid $colorControlActive; display: inline-block; line-height: 1; transition: $transitionAllCommon; } - .fileWrap:hover .border { color: $colorTextPrimary; } + .fileWrap:hover .border { color: var(--color-text-primary); } .input::placeholder { color: $colorControlActive; } .urlToggle { cursor: text; display: inline-block; } #form { display: inline-block; vertical-align: top; } - #url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: $colorTextPrimary; } + #url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: var(--color-text-primary); } .icon { width: 20px; height: 20px; margin: 0px 6px 0px 0px; transition: none; vertical-align: top; } .icon.image { background-image: url('~img/icon/menu/action/block/media/image0.svg'); } diff --git a/src/scss/list/widget.scss b/src/scss/list/widget.scss index 01d2533ea9..f131ac4d52 100644 --- a/src/scss/list/widget.scss +++ b/src/scss/list/widget.scss @@ -22,7 +22,7 @@ .button.disabled { background: $colorShapeTertiary; max-width: 80px; } .button.edit { - box-shadow: 0px 0px; background: $colorShapeHighlightMedium; border-radius: 6px; @include text-common; color: $colorTextPrimary; line-height: 26px; width: auto; + box-shadow: 0px 0px; background: $colorShapeHighlightMedium; border-radius: 6px; @include text-common; color: var(--color-text-primary); line-height: 26px; width: auto; padding: 0px 10px; } } diff --git a/src/scss/menu/block/cover.scss b/src/scss/menu/block/cover.scss index 6bc558e249..18b9c376f5 100644 --- a/src/scss/menu/block/cover.scss +++ b/src/scss/menu/block/cover.scss @@ -13,7 +13,7 @@ } .head { .btn { display: inline-block; margin-right: 16px; transition: $transitionAllCommon; } - .btn:hover, .btn.active { color: $colorTextPrimary; } + .btn:hover, .btn.active { color: var(--color-text-primary); } .btn:last-child { margin: 0px; } } diff --git a/src/scss/menu/block/icon.scss b/src/scss/menu/block/icon.scss index 8f0a71348b..7e21ff524f 100644 --- a/src/scss/menu/block/icon.scss +++ b/src/scss/menu/block/icon.scss @@ -127,11 +127,11 @@ .icon.color { .inner { width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; margin: -8px 0px 0px -8px; border-radius: 100%; - background: $colorTextPrimary; + background: var(--color-text-primary); } .inner.bgColor-default { box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; background: $colorBgPrimary; } - .inner.textColor-black { background: $colorTextPrimary; } + .inner.textColor-black { background: var(--color-text-primary); } .inner.textColor-grey { background: $colorControlActive; } .inner.textColor-yellow { background: $colorYellow; } .inner.textColor-orange { background: $colorOrange; } diff --git a/src/scss/menu/block/link.scss b/src/scss/menu/block/link.scss index fa2226d057..970b3ae4f2 100644 --- a/src/scss/menu/block/link.scss +++ b/src/scss/menu/block/link.scss @@ -34,6 +34,6 @@ .info { padding-left: 52px; } } - .item.add { color: $colorTextPrimary; } + .item.add { color: var(--color-text-primary); } } } \ No newline at end of file diff --git a/src/scss/menu/block/relation.scss b/src/scss/menu/block/relation.scss index cb984aca7e..59c64e6f9a 100644 --- a/src/scss/menu/block/relation.scss +++ b/src/scss/menu/block/relation.scss @@ -41,7 +41,7 @@ .sections { display: flex; flex-direction: column; height: 100%; } .section { padding: 0px; } - .section > .name { @include text-common; padding: 7px 32px; position: relative; color: $colorTextPrimary; margin: 0px; } + .section > .name { @include text-common; padding: 7px 32px; position: relative; color: var(--color-text-primary); margin: 0px; } .section:last-child::after { display: none; } .section::after { margin: 16px 32px; } @@ -162,7 +162,7 @@ .info { width: 100%; transition: $transitionAllCommon; } } .item.add:hover { - .info { color: $colorTextPrimary; } + .info { color: var(--color-text-primary); } .icon.plus { background-image: url('~img/icon/plus/menu1.svg'); } } } diff --git a/src/scss/menu/button.scss b/src/scss/menu/button.scss index 20c9a334e8..e69cc7d20f 100644 --- a/src/scss/menu/button.scss +++ b/src/scss/menu/button.scss @@ -4,7 +4,7 @@ .menu.menuButton { white-space: nowrap; height: 44px; line-height: 44px; padding: 0px 14px; } .menu.menuButton { .item { display: inline-block; @include text-common; margin-right: 16px; color: $colorControlActive; transition: $transitionAllCommon; } - .item:hover { color: $colorTextPrimary; } + .item:hover { color: var(--color-text-primary); } .item:last-child { margin: 0px; } } } \ No newline at end of file diff --git a/src/scss/menu/common.scss b/src/scss/menu/common.scss index 555b3d2def..8b41ca0394 100644 --- a/src/scss/menu/common.scss +++ b/src/scss/menu/common.scss @@ -65,14 +65,14 @@ .tabs { padding: 10px 14px; border-bottom: 1px solid $colorShapeSecondary; white-space: nowrap; font-weight: 700; color: $colorControlActive; } .tabs { .tab { display: inline-block; vertical-align: top; transition: $transitionAllCommon; margin-right: 16px; position: relative; } - .tab:hover, .tab.active { color: $colorTextPrimary; } + .tab:hover, .tab.active { color: var(--color-text-primary); } .tab:last-child { margin: 0px; } } .titleWrapper { display: flex; gap: 0 6px; padding: 8px 14px; align-items: center; } .titleWrapper { .icon.back { width: 20px; height: 20px; background-image: url('~img/arrow/menu.svg'); transform: rotateZ(180deg); } - .title { @include text-common; font-weight: 600; color: $colorTextPrimary; padding: 0; } + .title { @include text-common; font-weight: 600; color: var(--color-text-primary); padding: 0; } } .inputWrap { padding: 0px 14px 8px 14px; } diff --git a/src/scss/menu/dataview/create/bookmark.scss b/src/scss/menu/dataview/create/bookmark.scss index 450b728bc0..2dcb89a67c 100644 --- a/src/scss/menu/dataview/create/bookmark.scss +++ b/src/scss/menu/dataview/create/bookmark.scss @@ -16,7 +16,7 @@ display: inline-block; vertical-align: top; transition: $transitionAllCommon; color: $colorControlActive; background: none; border: 0px; padding: 0px; height: 100%; padding: 0px 16px; line-height: 44px; } - .button:hover { color: $colorTextPrimary; } + .button:hover { color: var(--color-text-primary); } } } } \ No newline at end of file diff --git a/src/scss/menu/onboarding.scss b/src/scss/menu/onboarding.scss index 374849821a..68e7dba859 100644 --- a/src/scss/menu/onboarding.scss +++ b/src/scss/menu/onboarding.scss @@ -15,7 +15,7 @@ } .highlight { - background: $colorShapeSecondary; white-space: nowrap; border-radius: 4px; padding: 2px 6px; color: $colorTextPrimary; + background: $colorShapeSecondary; white-space: nowrap; border-radius: 4px; padding: 2px 6px; color: var(--color-text-primary); font-family: 'Plex'; font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: -0.12px; } a { color: $colorTextInversion; text-decoration: underline; } diff --git a/src/scss/menu/select.scss b/src/scss/menu/select.scss index 0cb7284d37..920b90fed9 100644 --- a/src/scss/menu/select.scss +++ b/src/scss/menu/select.scss @@ -30,7 +30,7 @@ .menu.menuSelect.button { .item { white-space: nowrap; display: inline-block; margin-right: 16px; color: $colorControlActive; font-weight: 500; } - .item:hover { color: $colorTextPrimary; } + .item:hover { color: var(--color-text-primary); } .item:last-child { margin-right: 0px; } } diff --git a/src/scss/menu/smile.scss b/src/scss/menu/smile.scss index 1b4fecb17a..b0801cac22 100644 --- a/src/scss/menu/smile.scss +++ b/src/scss/menu/smile.scss @@ -14,7 +14,7 @@ .head { .btn { display: inline-block; vertical-align: top; transition: $transitionAllCommon; } .btn:last-child { margin-right: 0px; } - .btn:hover, .btn.active { color: $colorTextPrimary; } + .btn:hover, .btn.active { color: var(--color-text-primary); } } .body.gallery { diff --git a/src/scss/page/main/space.scss b/src/scss/page/main/space.scss index 2950f41ae6..944090284b 100644 --- a/src/scss/page/main/space.scss +++ b/src/scss/page/main/space.scss @@ -40,7 +40,7 @@ .btn { .icon.plus { vertical-align: top; width: 20px; height: 20px; background-image: url('~img/icon/plus/template0.svg'); } } - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn:hover { .icon.plus { background-image: url('~img/icon/plus/template1.svg'); } } diff --git a/src/scss/page/main/store.scss b/src/scss/page/main/store.scss index 02a66979f8..d781f3016c 100644 --- a/src/scss/page/main/store.scss +++ b/src/scss/page/main/store.scss @@ -41,7 +41,7 @@ display: inline-block; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.16px; color: $colorControlActive; transition: $transitionAllCommon; } - .tab:hover, .tab.active { color: $colorTextPrimary; } + .tab:hover, .tab.active { color: var(--color-text-primary); } } .loaderWrapper { position: relative !important; } @@ -84,7 +84,7 @@ @include text-common; opacity: 0; background: none; color: $colorTextSecondary; border-radius: 0px; padding: 0px; height: 1em; line-height: 1em; cursor: default; } - .button:hover { color: $colorTextPrimary; } + .button:hover { color: var(--color-text-primary); } } } .item:hover { diff --git a/src/scss/page/main/type.scss b/src/scss/page/main/type.scss index 4c71e6ce1b..9689256377 100644 --- a/src/scss/page/main/type.scss +++ b/src/scss/page/main/type.scss @@ -33,7 +33,7 @@ .btn { .icon.plus { vertical-align: top; width: 20px; height: 20px; background-image: url('~img/icon/plus/template0.svg'); } } - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn:hover { .icon.plus { background-image: url('~img/icon/plus/template1.svg'); } } @@ -65,7 +65,7 @@ .name { color: $colorTextSecondary; transition: $transitionAllCommon; } .clickable:hover { - .name { color: $colorTextPrimary; } + .name { color: var(--color-text-primary); } .icon.plus { background-image: url('~img/icon/plus/menu1.svg'); } } } diff --git a/src/scss/popup/settings.scss b/src/scss/popup/settings.scss index e0aad53b9b..4417390557 100644 --- a/src/scss/popup/settings.scss +++ b/src/scss/popup/settings.scss @@ -154,7 +154,7 @@ } .select:hover { background: $colorShapeHighlightMedium; } .select { - .item { border-bottom: 0; color: $colorTextPrimary; } + .item { border-bottom: 0; color: var(--color-text-primary); } .item { .iconObject { display: none; } .name { line-height: 20px; } @@ -427,7 +427,7 @@ .icon { background-image: url('~img/icon/popup/settings/theme/system.svg'); } } - .btn.active { color: $colorTextPrimary; } + .btn.active { color: var(--color-text-primary); } .btn.active { .bg { box-shadow: 0px 0px 0px 2px #ffee94; } } @@ -445,7 +445,7 @@ } .select:hover { background: $colorShapeHighlightMedium; } .select { - .item { border-bottom: 0; color: $colorTextPrimary; } + .item { border-bottom: 0; color: var(--color-text-primary); } .icon.arrow { right: 3px !important; } } } @@ -467,7 +467,7 @@ .item { width: auto; } } - .item:hover { border-color: $colorTextPrimary; } + .item:hover { border-color: var(--color-text-primary); } .item { .icon { width: 28px; margin: 0px 0px 8px 0px; height: 28px; background-size: contain; background-position: top center; } @@ -503,7 +503,7 @@ .btn { .icon.help { width: 14px; height: 14px; background-image: url('~img/icon/popup/settings/help0.svg'); transition: $transitionAllCommon; } } - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn:hover { .icon.help { background-image: url('~img/icon/popup/settings/help1.svg'); } } diff --git a/src/scss/popup/shortcut.scss b/src/scss/popup/shortcut.scss index fa7034a0c9..bf48e0af7b 100644 --- a/src/scss/popup/shortcut.scss +++ b/src/scss/popup/shortcut.scss @@ -18,7 +18,7 @@ .tabs { .item { margin-right: 24px; display: inline-block; transition: $transitionAllCommon; cursor: default; } .item:last-child { margin: 0px; } - .item:hover, .item.active { color: $colorTextPrimary; } + .item:hover, .item.active { color: var(--color-text-primary); } } } diff --git a/src/scss/theme/dark/_vars.scss b/src/scss/theme/dark/_vars.scss index 1700cd89db..bf3df8631e 100644 --- a/src/scss/theme/dark/_vars.scss +++ b/src/scss/theme/dark/_vars.scss @@ -1,3 +1,7 @@ +:root { + --color-text-primary: #dcdcdc; +} + $themePath: '~img/theme/dark'; /* Text */ diff --git a/src/scss/theme/dark/block.scss b/src/scss/theme/dark/block.scss index 0530eeaaf9..56afb6f7fb 100644 --- a/src/scss/theme/dark/block.scss +++ b/src/scss/theme/dark/block.scss @@ -5,8 +5,8 @@ } .elements { - .btn.white { background: $colorShapeSecondary; color: $colorTextPrimary; } - .btn.white:hover { background: $colorBgPrimary; color: $colorTextPrimary; } + .btn.white { background: $colorShapeSecondary; color: var(--color-text-primary); } + .btn.white:hover { background: $colorBgPrimary; color: var(--color-text-primary); } .btn { .icon.icon { background-image: url('#{$themePath}/icon/add/icon1.svg'); } @@ -26,7 +26,7 @@ .icon.dnd { border-color: rgba(217, 212, 184, 0.14); } .emptyToggle { color: $colorTextSecondary; } - .emptyToggle:hover { color: $colorTextPrimary; } + .emptyToggle:hover { color: var(--color-text-primary); } .colResize { .line { background: $colorShapeSecondary; } @@ -81,7 +81,7 @@ .icon { background-image: url('#{$themePath}/arrow/loadMore0.svg'); } } - .loadMore:hover { color: $colorTextPrimary; } + .loadMore:hover { color: var(--color-text-primary); } .loadMore:hover { .icon { background-image: url('#{$themePath}/arrow/loadMore1.svg'); } } @@ -100,10 +100,10 @@ .dataviewEmpty { border-color: $colorShapeSecondary; } .dataviewEmpty { - .button { color: $colorTextPrimary; } + .button { color: var(--color-text-primary); } } - .dataviewHead { border-color: $colorShapeSecondary; color: $colorTextPrimary; } + .dataviewHead { border-color: $colorShapeSecondary; color: var(--color-text-primary); } .dataviewHead { .icon:hover { background-color: $colorShapeHighlightMedium; } .icon.source { background-image: url('#{$themePath}/icon/dataview/button/source0.svg'); opacity: 0; } @@ -112,7 +112,7 @@ .dataviewControls { > .sides { > .side.right { - .filter { color: $colorTextPrimary; } + .filter { color: var(--color-text-primary); } .buttonWrap.withSelect { .button.select { border-left-color: rgba(23,23,23,0.1); } @@ -124,7 +124,7 @@ .viewItem { .icon.arrow { background-image: url('#{$themePath}/arrow/view.svg'); } } - .viewItem:hover, .viewItem.active { color: $colorTextPrimary; } + .viewItem:hover, .viewItem.active { color: var(--color-text-primary); } .viewItem.isDragging { background: $colorShapeHighlightMedium; } .icon:hover, .icon.active { background-color: $colorShapeHighlightMedium; } @@ -134,9 +134,9 @@ .dataviewControls::after { background-color: $colorShapeSecondary; } .dataviewSelection { - .side.left { color: $colorTextPrimary; } + .side.left { color: var(--color-text-primary); } .side.right { - .element { color: $colorTextPrimary; } + .element { color: var(--color-text-primary); } .element:hover { background-color: $colorShapeHighlightMedium; } } } @@ -148,7 +148,7 @@ .viewContent.viewList { .cell.add { color: $colorTextSecondary; } .cell.add { - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn:hover { .icon.plus { background-image: url('#{$themePath}/icon/plus/menu1.svg'); } } @@ -175,13 +175,13 @@ } .viewContent.viewList, .viewContent.viewGallery, .viewContent.viewBoard { - .cellContent.isName { color: $colorTextPrimary; } + .cellContent.isName { color: var(--color-text-primary); } } .viewContent.viewGallery, .viewContent.viewBoard { .card { - .cellContent.c-description { color: $colorTextPrimary; } + .cellContent.c-description { color: var(--color-text-primary); } } } @@ -258,7 +258,7 @@ .block.blockText { markupcode { background: $colorShapeHighlightMedium; color: $colorSystemAccent100; } markuplink, markupobject { border-color: $colorTextSecondary; } - markuplink:hover, markupobject:hover { border-color: $colorTextPrimary; } + markuplink:hover, markupobject:hover { border-color: var(--color-text-primary); } } .block.blockText.textCallout > .wrapContent { background: rgba(140, 158, 165, 0.25); } @@ -281,7 +281,7 @@ .block.blockLink.text:hover { .linkCard { - .cardName .name { border-color: $colorTextPrimary; } + .cardName .name { border-color: var(--color-text-primary); } } } .block.blockLink.card:hover { @@ -313,7 +313,7 @@ .icon.embed-figma { background-image: url('#{$themePath}/icon/block/embed/figma.svg'); } } - .select { color: $colorTextPrimary; } + .select { color: var(--color-text-primary); } .wrap.isEditing { background-color: $colorShapeHighlightLight; } #input { background: $colorShapeSecondary; border-color: $colorShapeHighlightLight; } #placeholder { color: $colorTextSecondary; } @@ -327,7 +327,7 @@ .inner { border-color: transparent; background-color: $colorShapeHighlightMedium; } .inner { - .name { color: $colorTextPrimary; } + .name { color: var(--color-text-primary); } .descr { color: $colorTextSecondary; } .link { color: $colorTextSecondary; } @@ -359,7 +359,7 @@ .cell { background: $colorBgPrimary; border-color: $colorShapePrimary; } .cell { - .block { color: $colorTextPrimary; } + .block { color: var(--color-text-primary); } .icon.menu:hover { .inner { box-shadow: 0px 0px; background-color: $colorShapePrimary; } diff --git a/src/scss/theme/dark/common.scss b/src/scss/theme/dark/common.scss index 2e75cf9f58..8045b20aee 100644 --- a/src/scss/theme/dark/common.scss +++ b/src/scss/theme/dark/common.scss @@ -5,9 +5,9 @@ html.themeDark { /* Common */ - body { background: $colorBgPrimary; color: $colorTextPrimary; color-scheme: dark; } + body { background: $colorBgPrimary; color-scheme: dark; } - a { color: $colorTextPrimary; } + a { color: var(--color-text-primary); } a:hover { color: $colorOrange; } #root-loader { background: $colorBgPrimary; } @@ -26,7 +26,7 @@ html.themeDark { ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); } ::selection { background-color: $colorSystemSelection; } - .textColor-default { color: $colorTextPrimary !important; } + .textColor-default { color: var(--color-text-primary) !important; } .bgColor-grey { background: rgba(140, 158, 165, 0.25) !important; } .bgColor-yellow { background: rgba(236, 217, 27, 0.25) !important; } @@ -40,7 +40,7 @@ html.themeDark { .bgColor-lime { background: rgba(93, 212, 0, 0.25) !important; } .isMultiSelect.archive { background-color: $colorShapeHighlightMedium; color: $colorTextSecondary; } - .isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: unset !important; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; } + .isMultiSelect.tagColor-default { color: var(--color-text-primary) !important; background: unset !important; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; } .isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: rgba(140, 158, 165, 0.25) !important; } .isMultiSelect.tagColor-yellow { color: $colorYellow !important; background: rgba(236, 217, 27, 0.25) !important; } .isMultiSelect.tagColor-orange { color: $colorOrange !important; background: rgba(255, 181, 34, 0.25) !important; } @@ -52,7 +52,7 @@ html.themeDark { .isMultiSelect.tagColor-teal { color: $colorTeal !important; background: rgba(15, 200, 186, 0.25) !important; } .isMultiSelect.tagColor-lime { color: $colorLime !important; background: rgba(93, 212, 0, 0.25) !important; } - .isSelect.tagColor-default { color: $colorTextPrimary !important; } + .isSelect.tagColor-default { color: var(--color-text-primary) !important; } .selectable.isSelectionSelected::after, .block.isSelectionSelected > .wrapContent > .selectable::after @@ -89,7 +89,7 @@ html.themeDark { } .mediaAudio { - .controls { color: $colorTextPrimary; } + .controls { color: var(--color-text-primary); } .controls { .icon.play { background-image: url('#{$themePath}/icon/audio/play.svg'); } .icon.play.active { background-image: url('#{$themePath}/icon/audio/pause.svg'); } @@ -112,7 +112,7 @@ html.themeDark { .arrow { background-image: url('~img/arrow/button/black.svg'); } } - .button.blank { color: $colorTextPrimary; border-color: $colorShapePrimary; } + .button.blank { color: var(--color-text-primary); border-color: $colorShapePrimary; } .button.blank:not(.disabled):hover, .button.blank:not(.disabled).hover { border-color: $colorShapePrimary; background: $colorShapeHighlightMedium; } @@ -130,7 +130,7 @@ html.themeDark { } .emptySearch { - b { color: $colorTextPrimary; } + b { color: var(--color-text-primary); } .label { color: $colorTextSecondary; } } @@ -153,9 +153,9 @@ html.themeDark { .inputWithFile { background: $colorShapeHighlightMedium; color: $colorTextSecondary; border-color: transparent; } .inputWithFile { .input::placeholder { color: $colorTextSecondary; } - .fileWrap:hover .border { color: $colorTextPrimary; } + .fileWrap:hover .border { color: var(--color-text-primary); } - #url { color: $colorTextPrimary; } + #url { color: var(--color-text-primary); } } .listPreviewObject { @@ -185,7 +185,7 @@ html.themeDark { .icon.logo { background-image: url('#{$themePath}/icon/type/logo.svg'); } .moreWrapper { background: $colorShapeTertiary; } .heading { - .iconObject { background-color: $colorShapeTertiary; box-shadow: 0px 0px 0px 1px $colorTextPrimary inset; } + .iconObject { background-color: $colorShapeTertiary; box-shadow: 0px 0px 0px 1px var(--color-text-primary) inset; } .iconObject.isTask, .iconObject.isBookmark { background-color: unset; } .featured { background: $colorShapeSecondary; } @@ -226,11 +226,11 @@ html.themeDark { .content { background: $colorBgSecondary; } .head { border-color: $colorShapeSecondary; color: $colorTextSecondary; } .head { - .item:hover { color: $colorTextPrimary; } + .item:hover { color: var(--color-text-primary); } } .previewLink { - .name { color: $colorTextPrimary; } + .name { color: var(--color-text-primary); } .descr { color: $colorTextSecondary; } .link { color: $colorTextSecondary; } .img { border-color: $colorShapeSecondary; } @@ -242,9 +242,9 @@ html.themeDark { /* Pager */ .pager { - .pageItem:hover { color: $colorTextPrimary; } + .pageItem:hover { color: var(--color-text-primary); } .pageItem.active { color: $colorOrange; } - .pageItem.list:hover { color: $colorTextPrimary; } + .pageItem.list:hover { color: var(--color-text-primary); } .icon.arrow { background-image: url('#{$themePath}/arrow/pager0.svg'); } .icon.arrow:hover { background-image: url('#{$themePath}/arrow/pager1.svg'); } @@ -261,7 +261,7 @@ html.themeDark { .inner { background: $colorBgSecondary; } .inner { .fill { background: $colorTextSecondary; } - .label { color: $colorTextPrimary; } + .label { color: var(--color-text-primary); } .bar { background: $colorShapeHighlightMedium; } } } @@ -272,7 +272,7 @@ html.themeDark { } } - .tooltip { background: $colorShapeSecondary; color: $colorTextPrimary; } + .tooltip { background: $colorShapeSecondary; color: var(--color-text-primary); } .tooltip.big { background: $colorBgSecondary; border: 1px solid rgba(229, 229, 229, 0.1); } /* Icon */ @@ -296,7 +296,7 @@ html.themeDark { .editorControls { .btn { background: $colorShapeSecondary; color: $colorTextSecondary; } - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn { .icon.icon { background-image: url('#{$themePath}/icon/add/icon0.svg'); } @@ -317,20 +317,20 @@ html.themeDark { .header.isCommon { background: $colorBgPrimary; } .header.isCommon { .path { border: 0px; line-height: 28px; } - .path:hover { background-color: $colorShapeHighlightMedium; color: $colorTextPrimary; } + .path:hover { background-color: $colorShapeHighlightMedium; color: var(--color-text-primary); } .icon:hover, .icon.hover { background-color: $colorShapeHighlightMedium; } .tabs { color: $colorTextSecondary; } .tabs { - .tab.active, .tab:hover { color: $colorTextPrimary; border-color: $colorShapePrimary; } + .tab.active, .tab:hover { color: var(--color-text-primary); border-color: $colorShapePrimary; } } - .headerBanner { background: $colorShapeTertiary; color: $colorTextPrimary; } + .headerBanner { background: $colorShapeTertiary; color: var(--color-text-primary); } .headerBanner.withMenu:after { background-image: url('~img/arrow/button/white.svg'); } } .header.isCommon.active { - .path { background-color: $colorShapeHighlightMedium; color: $colorTextPrimary; } + .path { background-color: $colorShapeHighlightMedium; color: var(--color-text-primary); } } .header.mainHistory { background: $colorBgPrimary; } @@ -342,7 +342,7 @@ html.themeDark { } } - .item.grey:hover { color: $colorTextPrimary; } + .item.grey:hover { color: var(--color-text-primary); } .item:hover { .icon.arrow { background-image: url('#{$themePath}/arrow/history1.svg'); } @@ -357,7 +357,7 @@ html.themeDark { /* Sidebar */ - .sidebar { background-color: $colorBgSecondary; color: $colorTextPrimary; box-shadow: 0px 4px 16px rgba(0,0,0,0.2); } + .sidebar { background-color: $colorBgSecondary; color: var(--color-text-primary); box-shadow: 0px 4px 16px rgba(0,0,0,0.2); } .sidebar.fixed { box-shadow: 0px 0px rgba(0,0,0,0); } .sidebar { > .head { @@ -391,7 +391,7 @@ html.themeDark { } .cell.isEditing.c-select, .cell.isEditing.c-object { - #entry { color: $colorTextPrimary; } + #entry { color: var(--color-text-primary); } } .cellContent.c-url, @@ -399,7 +399,7 @@ html.themeDark { .cellContent.c-phone { .name { border-color: $colorTextSecondary; } - .name:hover { color: $colorTextPrimary; border-color: $colorTextPrimary; } + .name:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); } } /* Notifications */ diff --git a/src/scss/theme/dark/menu.scss b/src/scss/theme/dark/menu.scss index a145fb9260..030ef1a40e 100644 --- a/src/scss/theme/dark/menu.scss +++ b/src/scss/theme/dark/menu.scss @@ -39,7 +39,7 @@ .menu.vertical { .tabs { border-color: $colorShapeSecondary; } .tabs { - .tab:hover, .tab.active { color: $colorTextPrimary; } + .tab:hover, .tab.active { color: var(--color-text-primary); } } .titleWrapper { @@ -97,7 +97,7 @@ .menu.menuSmile { .head { border-color: $colorShapeSecondary; color: $colorTextSecondary; } .head { - .btn:hover, .btn.active { color: $colorTextPrimary; } + .btn:hover, .btn.active { color: var(--color-text-primary); } } .body.gallery { @@ -130,14 +130,14 @@ .menu.menuBlockCover { .head { border-color: $colorShapeSecondary; color: $colorTextSecondary; } .head { - .btn:hover, .btn.active { color: $colorTextPrimary; } + .btn:hover, .btn.active { color: var(--color-text-primary); } } } /* MenuBlockRelationView */ .menu.menuBlockRelationView { - .section > .name { color: $colorTextPrimary; } + .section > .name { color: var(--color-text-primary); } .item { .icon.dnd { border-color: rgba(217, 212, 184, 0.14); } @@ -151,7 +151,7 @@ } .item.add:hover { - .info { background: $colorShapeHighlightMedium; color: $colorTextPrimary; } + .info { background: $colorShapeHighlightMedium; color: var(--color-text-primary); } .icon.plus { background-image: url('#{$themePath}/icon/plus/menu1.svg'); } } } @@ -185,7 +185,7 @@ /* MenuDataviewFileValues */ .menu.menuDataviewFileValues { - .item { color: $colorTextPrimary; } + .item { color: var(--color-text-primary); } .item:hover::before { background: $colorShapeHighlightMedium; } .item { .icon.more { background-color: $colorShapeHighlightMedium; } @@ -249,7 +249,7 @@ .menu.menuButton { .item { color: $colorTextSecondary; } - .item:hover { color: $colorTextPrimary; } + .item:hover { color: var(--color-text-primary); } } /* MenuDataviewCalendar */ @@ -290,7 +290,7 @@ .iconObject { background-color: $colorShapeTertiary; } } - .item.add { color: $colorTextPrimary; } + .item.add { color: var(--color-text-primary); } } /* MenuBlockLinkSettings */ @@ -303,13 +303,13 @@ .icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card0.svg'); } } - .item:hover { color: $colorTextPrimary; box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; } + .item:hover { color: var(--color-text-primary); box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; } .item:hover { .icon.style-text { background-image: url('#{$themePath}/icon/menu/linkSettings/text1.svg'); } .icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card1.svg'); } } - .item.active { color: $colorTextPrimary; background: $colorShapeHighlightMedium; } + .item.active { color: var(--color-text-primary); background: $colorShapeHighlightMedium; } .item.active { .icon.style-text { background-image: url('#{$themePath}/icon/menu/linkSettings/text2.svg'); } .icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card2.svg'); } @@ -318,7 +318,7 @@ .buttons { .button.grey { box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; color: $colorTextSecondary; } - .button.grey:hover { box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; color: $colorTextPrimary; } + .button.grey:hover { box-shadow: 0px 0px 0px 1px $colorShapePrimary inset; color: var(--color-text-primary); } } } @@ -359,7 +359,7 @@ .loaderWrapper { background: rgba(39, 39, 35, 0.9); } .buttons { .button { color: $colorTextSecondary; } - .button:hover { color: $colorTextPrimary; } + .button:hover { color: var(--color-text-primary); } } } @@ -411,7 +411,7 @@ /* MenuSpace */ - .menu.menuSpace { color: $colorTextPrimary; } + .menu.menuSpace { color: var(--color-text-primary); } .menu.menuSpace { .head { .icon.settings { background-image: url('#{$themePath}/icon/menu/space/settings.svg'); } diff --git a/src/scss/theme/dark/page.scss b/src/scss/theme/dark/page.scss index 7de01ec443..ba813c6439 100644 --- a/src/scss/theme/dark/page.scss +++ b/src/scss/theme/dark/page.scss @@ -31,7 +31,7 @@ .body { .tabs { .tab { color: $colorTextSecondary; } - .tab:hover, .tab.active { color: $colorTextPrimary; } + .tab:hover, .tab.active { color: var(--color-text-primary); } } .emptySearch { border-color: $colorShapePrimary; } @@ -53,7 +53,7 @@ .icon.plus:hover { background-image: url('#{$themePath}/icon/store/plus1.svg'); } .button { color: $colorTextSecondary; } - .button:hover { color: $colorTextPrimary; } + .button:hover { color: var(--color-text-primary); } } } } @@ -70,7 +70,7 @@ .icon.plus { background-image: url('#{$themePath}/icon/plus/template0.svg'); } } - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn:hover { .icon.plus { background-image: url('#{$themePath}/icon/plus/template1.svg'); } } diff --git a/src/scss/theme/dark/popup.scss b/src/scss/theme/dark/popup.scss index 65afe6a0dd..7a4d167537 100644 --- a/src/scss/theme/dark/popup.scss +++ b/src/scss/theme/dark/popup.scss @@ -49,7 +49,7 @@ .select { color: $colorTextSecondary; } .select { - .item { color: $colorTextPrimary; } + .item { color: var(--color-text-primary); } } .select:hover { background-color: $colorShapeHighlightMedium; } @@ -129,7 +129,7 @@ .btn { .icon.help { background-image: url('#{$themePath}/icon/popup/settings/help0.svg'); } } - .btn:hover { color: $colorTextPrimary; } + .btn:hover { color: var(--color-text-primary); } .btn:hover { .icon.help { background-image: url('#{$themePath}/icon/popup/settings/help1.svg'); } } @@ -164,7 +164,7 @@ .icon { background-image: url('~img/icon/popup/settings/theme/system.svg'); } } - .btn.active { color: $colorTextPrimary; } + .btn.active { color: var(--color-text-primary); } .btn.active { .bg { box-shadow: 0px 0px 0px 2px #ffee94; } } @@ -184,7 +184,7 @@ .head { .tabs { color: $colorTextSecondary; } .tabs { - .item:hover, .item.active { color: $colorTextPrimary; } + .item:hover, .item.active { color: var(--color-text-primary); } } } diff --git a/src/scss/theme/dark/widget.scss b/src/scss/theme/dark/widget.scss index f4af249377..61b892b10a 100644 --- a/src/scss/theme/dark/widget.scss +++ b/src/scss/theme/dark/widget.scss @@ -1,10 +1,10 @@ .listWidget { > .buttons { - .button, .button.edit { background-color: $colorShapeSecondary; color: $colorTextPrimary; } + .button, .button.edit { background-color: $colorShapeSecondary; color: var(--color-text-primary); } } } -.widget { background-color: $colorBgPrimary; color: $colorTextPrimary; border-color: $colorShapeSecondary !important; } +.widget { background-color: $colorBgPrimary; color: var(--color-text-primary); border-color: $colorShapeSecondary !important; } .widget { .iconWrap:hover, .iconWrap.active { background-color: $colorShapeHighlightMedium; } .icon.back { background-image: url('#{$themePath}/icon/widget/back.svg'); } @@ -53,7 +53,7 @@ #viewSelect { .viewList { .viewItem { color: $colorTextSecondary; } - .viewItem:hover, .viewItem.active { color: $colorTextPrimary; } + .viewItem:hover, .viewItem.active { color: var(--color-text-primary); } } .select { diff --git a/src/scss/widget/list.scss b/src/scss/widget/list.scss index e67cb2c739..23b440eabf 100644 --- a/src/scss/widget/list.scss +++ b/src/scss/widget/list.scss @@ -18,7 +18,7 @@ vertical-align: top; } .viewItem:last-child { margin: 0px; } - .viewItem:hover, .viewItem.active { color: $colorTextPrimary; } + .viewItem:hover, .viewItem.active { color: var(--color-text-primary); } } .select { border: none; margin-left: -6px; padding-right: 16px; }