mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Convert theme to css variables

Browse source 
* Opt-in for light and dark color schemes
* Convert scss variables in _light.scss to css variables
* Add _dark.scss for dark color scheme
* Remove unused, theme-related variables
This commit is contained in:
Tom Najdek 2023-10-16 13:40:59 +02:00 • committed by Dan Stillman
parent 03d10f7de7
commit c7286194f8
18 changed files with 189 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

3
chrome/skin/default/zotero/overlay.css
View file

@ -602,7 +602,8 @@
z-index: 2; z-index: 2;
left: 0; left: 0;
right: 0; right: 0;
background-color: #ececec; color: var(--fill-primary);
background-color: var(--material-background);
position: fixed; position: fixed;
height: 100%; height: 100%;
display: flex; display: flex;

11
scss/_zotero.scss
View file

@ -1,8 +1,3 @@
//
// Zotero React Client
// --------------------------------------------------
// Abstracts // Abstracts
// -------------------------------------------------- // --------------------------------------------------
@ -13,10 +8,12 @@
@import "abstracts/utilities"; @import "abstracts/utilities";
@import "abstracts/split-button"; @import "abstracts/split-button";
// Theme :root {
// -------------------------------------------------- color-scheme: light dark;
}
@import "themes/light"; @import "themes/light";
@import "themes/dark";
// Components // Components
// -------------------------------------------------- // --------------------------------------------------

2
scss/components/_clicky.scss
View file

@ -1,6 +1,6 @@
.zotero-clicky { .zotero-clicky {
border-radius: 6px; border-radius: 6px;
border: 1px solid transparent; border: var(--material-border-transparent);
} }
/* Minus and plus buttons with clicky glow effect */ /* Minus and plus buttons with clicky glow effect */

4
scss/components/_longTagFixer.scss
View file

@ -38,7 +38,7 @@
height: 50px; height: 50px;
border: none; border: none;
padding: .5em; padding: .5em;
background-color: $shade-1; background: var(--material-background50);
appearance: none; appearance: none;
outline: none; outline: none;
} }
@ -102,7 +102,7 @@
} }
.invalid { .invalid {
color: $red; color: var(--accent-red);
} }
#zotero-new-tag-character-count { #zotero-new-tag-character-count {

8
scss/components/_mainWindow.scss
View file

@ -127,16 +127,16 @@
} }
#tab-bar-container .tab { #tab-bar-container .tab {
background: $transparent; background: transparent;
} }
#tab-bar-container .tab.selected { #tab-bar-container .tab.selected {
background: $toolbar-background-color; background: var(--material-tabbar)
} }
#zotero-toolbar { #zotero-toolbar {
-moz-appearance: none; -moz-appearance: none;
background: $toolbar-background-color; background: var(--material-tabbar);
border-bottom: $toolbar-border; border-bottom: var(--material-panedivider);
} }
} }

24
scss/components/_notesList.scss
View file

@ -3,8 +3,8 @@
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
background: #d2d8e2; background: var(--material-sidepane);
border-top: 1px solid lightgray; border-top: var(--material-border);
} }
.notes-list { .notes-list {
@ -47,13 +47,13 @@
} }
.note-row { .note-row {
border: 1px solid #bcc4d2; border: 1px solid var(--fill-quinary);
border-radius: 5px; border-radius: 5px;
margin: 4px 7px; margin: 4px 7px;
background-color: #fff; background: var(--material-background);
&:active { &:active {
background: #eef1f8; background: var(--accent-blue-50);
} }
.inner { .inner {
@ -64,7 +64,8 @@
.parent-line { .parent-line {
display: flex; display: flex;
width: calc(100% - 16px); width: calc(100% - 16px);
border-bottom: 1px solid #d7dad7; color: var(--fill-secondary);
border-bottom: 1px solid var(--fill-quinary);
align-items: center; align-items: center;
padding: 5px 8px 4px; padding: 5px 8px 4px;
margin-bottom: 5px; margin-bottom: 5px;
@ -102,7 +103,7 @@
padding: 0 8px 6px; padding: 0 8px 6px;
.date { .date {
color: $shade-6; color: var(--fill-primary);
} }
.body { .body {
@ -112,22 +113,23 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-left: 10px; margin-left: 10px;
color: $shade-6; color: var(--fill-primary);
} }
} }
} }
} }
.more-row { .more-row {
border: 1px solid #bcc4d2; color: var(--fill-primary);
border: 1px solid var(--fill-quinary);
border-radius: 5px; border-radius: 5px;
margin: 4px 7px; margin: 4px 7px;
background-color: white; background: var(--material-background);
text-align: center; text-align: center;
padding: 5px; padding: 5px;
&:active { &:active {
background: #eef1f8; background-color: var(--accent-blue-50);
} }
} }

5
scss/components/_rtfScan.scss
View file

@ -33,9 +33,6 @@
} }
.file-input-container { .file-input-container {
background-color: $input-group-background-color;
border-radius: $border-radius-base;
border: 1px solid $input-group-border-color;
display: flex; display: flex;
margin: auto $space-min auto; margin: auto $space-min auto;
padding: .5em; padding: .5em;
@ -69,7 +66,7 @@
>div { >div {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
background-color: -moz-field; background: var(--material-background70);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }

50
scss/components/_tabBar.scss
View file

@ -2,6 +2,7 @@
// These variables can be overridden in platform styles to set platform-specific safe areas // These variables can be overridden in platform styles to set platform-specific safe areas
--safe-area-start: 0; --safe-area-start: 0;
--safe-area-end: 0; --safe-area-end: 0;
--tab-border: .5px solid var(--tab-border);
min-height: 30px; min-height: 30px;
@ -14,14 +15,14 @@
content: ''; content: '';
min-width: var(--safe-area-start); min-width: var(--safe-area-start);
// Add bottom border to safe area space // Add bottom border to safe area space
border-bottom: $tab-border; border-bottom: var(--tab-border);
} }
&::after { &::after {
content: ''; content: '';
min-width: var(--safe-area-end); min-width: var(--safe-area-end);
// Add bottom border to safe area space // Add bottom border to safe area space
border-bottom: $tab-border; border-bottom: var(--tab-border);
} }
& > div { & > div {
@ -42,12 +43,12 @@
padding: 0 3px; padding: 0 3px;
align-items: center; align-items: center;
z-index: 1; z-index: 1;
color: #bebebe; color: var(--fill-tertiary);
display: none; display: none;
box-shadow: none; box-shadow: none;
// Add bottom border to scroll arrows, // Add bottom border to scroll arrows,
// and negate the extra vertical pixel added by the border with a negative margin // and negate the extra vertical pixel added by the border with a negative margin
border-bottom: $tab-border; border-bottom: var(--tab-border);
margin-bottom: -1px; margin-bottom: -1px;
box-sizing: border-box; box-sizing: border-box;
@ -56,26 +57,26 @@
} }
&.active { &.active {
color: #505050; color: var(--fill-secondary);
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.08); background-color: var(--fill-quinary);
} }
} }
} }
.scroll-start-arrow { .scroll-start-arrow {
border-right: 1px solid transparent; border-right: var(--material-border-transparent);
&.active { &.active {
border-right: 1px solid rgba(0, 0, 0, 0.2); border-right: var(--material-panedivider);
box-shadow: 1px 0 0 0 rgba(0,0,0,0.05); box-shadow: 3px 0 3px -3px rgba(0, 0, 0, .3);
} }
} }
.scroll-end-arrow { .scroll-end-arrow {
border-left: 1px solid transparent; border-left: var(--material-border-transparent);
&.active { &.active {
border-left: 1px solid rgba(0, 0, 0, 0.2); border-left: var(--material-panedivider);
box-shadow: -1px 0 0 0 rgba(0,0,0,0.05); box-shadow: -3px 0 3px -3px rgba(0, 0, 0, .3)
} }
} }
@ -112,7 +113,7 @@
content: ""; content: "";
width: 0; width: 0;
min-width: 0; min-width: 0;
border-inline-end: $tab-border; border-inline-end: var(--tab-border);
} }
&:after { &:after {
@ -121,8 +122,8 @@
width: 100%; width: 100%;
min-width: 0; min-width: 0;
// Add bottom border to the space between the last tab and the spacer in #tab-bar-container::after // Add bottom border to the space between the last tab and the spacer in #tab-bar-container::after
border-bottom: $tab-border; border-bottom: var(--tab-border);
border-inline-start: $tab-border; border-inline-start: var(--tab-border);
} }
} }
@ -134,28 +135,27 @@
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
position: relative; position: relative;
background: #f9f9f9; color: var(--fill-primary);
border-top: 2px solid transparent;
color: #000;
text-align: center; text-align: center;
padding: 0 22px; padding: 0 22px;
min-width: 110px; min-width: 110px;
&:not(:last-child) { &:not(:last-child) {
border-inline-end: $tab-border; border-inline-end: var(--tab-border);
} }
&.selected { &.selected {
border-top: 2px solid $tab-background-color-selected; background: var(--material-button);
box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.05), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.30);
} }
&.dragging { &.dragging {
border-inline-start: $tab-border; border-inline-start: var(--tab-border);
z-index: 1; z-index: 1;
} }
&.dragging + & { &.dragging + & {
border-inline-start: $tab-border; border-inline-start: var(--tab-border);
} }
.tab-name { .tab-name {
@ -197,11 +197,11 @@
} }
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.08); background-color: var(--fill-quinary);
} }
&:active { &:active {
background-color: rgba(0, 0, 0, 0.16); background-color: var(--fill-quarternary);
} }
} }
@ -210,6 +210,6 @@
} }
&:not(.selected) { &:not(.selected) {
border-bottom: $tab-border; border-bottom: var(--tab-border);
} }
} }

7
scss/components/_tagSelector.scss
View file

@ -28,7 +28,7 @@
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: 100px; height: 100px;
background-color: $tag-selector-bg; background: var(--material-sidepane);
} }
.tag-selector-list-container > div { .tag-selector-list-container > div {
@ -75,7 +75,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: pre; white-space: pre;
padding: 1px 4px 3px; // See also TagSelectorList.jsx padding: 1px 4px 3px; // See also TagSelectorList.jsx
background-color: $tag-selector-bg;
&.colored { &.colored {
font-weight: bold; font-weight: bold;
@ -87,7 +86,7 @@
} }
&.dragged-over { &.dragged-over {
color: $shade-0; color: var(--color-background);
background: $shade-6; background-color: var(--fill-secondary);
} }
} }

2
scss/components/_textLink.scss
View file

@ -2,6 +2,6 @@
-moz-user-focus: normal; -moz-user-focus: normal;
color: -moz-nativehyperlinktext; color: -moz-nativehyperlinktext;
text-decoration: underline; text-decoration: underline;
border: 1px solid transparent; border: var(--material-border-transparent);
cursor: pointer; cursor: pointer;
} }

6
scss/components/_virtualized-table.scss
View file

@ -96,8 +96,8 @@
box-sizing: border-box; box-sizing: border-box;
&.drop { &.drop {
color: $shade-0 !important; color: var(--material-background) !important;
background: $shade-5 !important; background: var(--fill-secondary) !important;
* { * {
pointer-events: none !important; pointer-events: none !important;
@ -108,7 +108,7 @@
position: absolute; position: absolute;
width: 20%; width: 20%;
height: 1px; height: 1px;
background-color: $shade-5; background-color: var(--fill-secondary);
pointer-events: none; pointer-events: none;
} }

2
scss/elements/_attachmentBox.scss
View file

@ -47,7 +47,7 @@ attachment-box {
-moz-margin-end: 5px !important; -moz-margin-end: 5px !important;
padding: 0 2px 0 2px !important; padding: 0 2px 0 2px !important;
border-radius: 6px; border-radius: 6px;
border: 1px solid transparent; border: var(--material-border-transparent);
} }
td > hbox { td > hbox {

2
scss/elements/_itemBox.scss
View file

@ -101,7 +101,7 @@ item-box {
} }
#item-type-menu:not(:hover):not(:active) { #item-type-menu:not(:hover):not(:active) {
border: 1px solid transparent; border: var(--material-border-transparent);
background-color: transparent; background-color: transparent;
} }

2
scss/elements/_noteEditor.scss
View file

@ -14,7 +14,7 @@
text-align: right; text-align: right;
font-weight: bold; font-weight: bold;
min-width: 62px; min-width: 62px;
border: 1px solid transparent; border: var(--material-border-transparent);
} }
.value { .value {

7
scss/elements/_styleConfigurator.scss
View file

@ -25,15 +25,12 @@ style-configurator {
.locale-selector-wrapper, .locale-selector-wrapper,
.style-selector-wrapper, .style-selector-wrapper,
.display-as-wrapper { .display-as-wrapper {
background-color: var(--style-configurator-field-wrapper-background-color, $input-group-background-color); margin: var(--style-configurator-field-margin, .5em 0 0 0);
border-radius: var(--style-configurator-field-wrapper-border-radius, $border-radius-base);
border: var(--style-configurator-field-wrapper-border, 1px solid $input-group-border-color);
margin: var(--style-configurator-field-margin, 1.5em 0 0 0);
padding: var(--style-configurator-field-padding, $space-xs); padding: var(--style-configurator-field-padding, $space-xs);
} }
label[for="style-selector"] { label[for="style-selector"] {
margin: var(--style-configurator-label-margin, 1.5em 0 0 0); margin: var(--style-configurator-label-margin, .5em 0 0 0);
font-size: var(--style-configurator-label-font-size, 13px); font-size: var(--style-configurator-label-font-size, 13px);
} }

2
scss/mac/_tag-selector.scss
View file

@ -4,7 +4,7 @@
.tag-selector-filter-container { .tag-selector-filter-container {
padding: 0.25em 0 0.25em 0.5em; padding: 0.25em 0 0.25em 0.5em;
border-top: 1px solid $shade-3; border-top: var(--material-panedivider);
} }
.tag-selector-item { .tag-selector-item {

63
scss/themes/_dark.scss Normal file
View file

@ -0,0 +1,63 @@
@media (prefers-color-scheme: dark) {
:root {
--accent-blue: #4072e5;
--accent-blue10: #4072e54d;
--accent-blue30: #4072e573;
--accent-blue50: #4072e599;
--accent-gold: #cc9200d9;
--accent-green: #39bf68d9;
--accent-orange: #ff794cd9;
--accent-red: #db2c3ae5;
--accent-teal: #59adc4e5;
--accent-white: #fff;
--accent-wood-dark: #996b6f;
--accent-wood: #cc7a52e5;
--accent-yellow: #faa700cc;
--fill-primary: #ffffffe5;
--fill-secondary: #ffffff8c;
--fill-tertiary: #ffffff4d;
--fill-quarternary: #ffffff1f;
--fill-quinary: #ffffff0f;
--fill-senary: #ffffff08;
--color-background: #1e1e1e;
--color-background50: #1e1e1e80;
--color-background70: #1e1e1eb2;
--color-border: #ffffff2e;
--color-border50: #ffffff17;
--color-button: #404040;
--color-control: #ccc;
--color-menu: #28282894;
--color-panedivider: #404040;
--color-sidepane: #303030;
--color-tabbar: #1e1e1e;
--color-toolbar: #272727;
--tag-blue: #55a6dfd9;
--tag-gray: #aaac;
--tag-green: #74b04ad9;
--tag-indigo: #5b6dd2;
--tag-magenta: #d675e7d9;
--tag-orange: #e59c4ccc;
--tag-plum: #9b5579;
--tag-purple: #9e8bdfe5;
--tag-red: #ed706be5;
--tag-teal: #439781;
--tag-yellow: #f8d648bf;
// background materials
--material-background: var(--color-background);
--material-background50: var(--color-background50);
--material-background70: var(--color-background70);
--material-button: var(--color-button);
--material-control: var(--color-control);
--material-menu: var(--color-menu);
--material-sidepane: var(--color-sidepane);
--material-tabbar: var(--color-tabbar);
--material-toolbar: var(--color-toolbar);
// border materials
--material-border-transparent: 1px solid transparent;
--material-border: 1px solid var(--color-border);
--material-border50: 1px solid var(--color-border50);
--material-panedivider: 1px solid var(--color-panedivider);
}
}

246
scss/themes/_light.scss
View file

@ -1,187 +1,63 @@
// @media (prefers-color-scheme: light) {
// Light theme :root {
// -------------------------------------------------- --accent-blue: #4072e5;
--accent-blue10: #4072e51a;
--accent-blue30: #4072e54d;
--accent-blue50: #4072e580;
--accent-gold: #cc9200;
--accent-green: #39bf68;
--accent-orange: #ff794c;
--accent-red: #db2c3a;
--accent-teal: #59adc4;
--accent-white: #fff;
--accent-wood-dark: #996b6f;
--accent-wood: #cc7a52;
--accent-yellow: #faa700;
--fill-primary: #000000d9;
--fill-secondary: #00000080;
--fill-tertiary: #00000040;
--fill-quarternary: #0000001a;
--fill-quinary: #0000000d;
--fill-senary: #00000005;
--color-background: #fff;
--color-background50: #ffffff80;
--color-background70: #ffffffb2;
--color-border: #00000026;
--color-border50: #00000014;
--color-button: #fff;
--color-control: #fff;
--color-menu: #f6f6f6b8;
--color-panedivider: #dadada;
--color-sidepane: #f2f2f2;
--color-tabbar: #f2f2f2;
--color-toolbar: #f9f9f9;
--tag-blue: #55a6df;
--tag-gray: #aaa;
--tag-green: #74b04a;
--tag-indigo: #5b6dd2;
--tag-magenta: #d675e7;
--tag-orange: #e59c4c;
--tag-plum: #9b5579;
--tag-purple: #9e8bdf;
--tag-red: #ed706b;
--tag-teal: #439781;
--tag-yellow: #f8d648;
// background materials
--material-background: var(--color-background);
--material-background50: var(--color-background50);
--material-background70: var(--color-background70);
--material-button: var(--color-button);
--material-control: var(--color-control);
--material-menu: var(--color-menu);
--material-sidepane: var(--color-sidepane);
--material-tabbar: var(--color-tabbar);
--material-toolbar: var(--color-toolbar);
// Colors // border materials
// -------------------------------------------------- --material-border-transparent: 1px solid transparent;
--material-border: 1px solid var(--color-border);
$red: #cc2936; --material-border50: 1px solid var(--color-border50);
$blue: rgb(89, 139, 236); --material-panedivider: 1px solid var(--color-panedivider);
$asphalt: #7a8799; }
$asphalt-light: #dadee3; }
$primary: $red;
$secondary: $blue;
$blue-dark: #333c66;
$blue-darkest: #3d4466;
$transparent: transparent;
// Grays
// --------------------------------------------------
$shade-0: #fff;
$shade-1: #f6f6f6;
$shade-2: #e6e6e6;
$shade-3: #ddd;
$shade-4: #ccc;
$shade-5: #bbb;
$shade-6: #777;
$shade-7: #555;
$shade-8: #444;
$shade-9: #222;
$shade-10: #000;
// Scaffolding
// --------------------------------------------------
$body-bg: $shade-0;
$text-color: $shade-9;
$headings-color: $shade-8;
$link-color: $blue;
$link-hover-color: $blue;
$focus-color: $secondary;
// Typography
// --------------------------------------------------
$text-selection-color: inherit;
$text-selection-bg: rgba($secondary, 0.2);
// Separator
$separator-color: $shade-3;
// Partials
// --------------------------------------------------
// Main
$main-bg: $shade-0;
// Sidebar
$sidebar-bg: $shade-1;
// Clicky
$clicky-hover-bg-color: rgb(187, 206, 241);
$clicky-active-bg-color: $secondary;
$clicky-border-radius: 6px;
$clicky-border-color: rgb(109, 149, 224);
$clicky-active-color: $shade-0;
// Components
// --------------------------------------------------
// Toolbar
$toolbar-background-color: #f6f6f6;
$toolbar-border-color: darkgray;
$toolbar-border: .5px solid $toolbar-border-color;
// Tab bar
$tab-border: $toolbar-border;
$tab-background-color-selected: #678AC5;
// Icon
$icon-color: $secondary;
$icon-active-color: $shade-9;
// Collection tree
$collection-tree-headings-color: $shade-6;
$collection-tree-link-color: $shade-8;
$collection-tree-active-link-color: $shade-9;
$collection-tree-active-icon-color: $shade-7;
$collection-tree-active-link-bg: $shade-2;
$collection-tree-focus-color: $asphalt;
$collection-tree-icon-color: $shade-6;
$touch-collection-tree-active-link-color: $shade-0;
$touch-collection-tree-active-link-bg: $blue;
$touch-collection-tree-border: $shade-2;
$touch-collection-tree-separator: $body-bg;
$collection-tree-dnd-target-link-color: $shade-0;
$collection-tree-dnd-target-bg-color: $blue;
$collection-tree-dnd-target-icon-color: $shade-0;
// Items
$items-bg: $shade-0;
$items-odd-bg: $shade-1;
$item-list-head-color: $shade-8;
$item-list-head-border: $shade-2;
// Item list
$item-odd-bg: $shade-1;
$item-active-color: $shade-0;
$item-active-bg: $secondary;
// Item details
$item-details-bg: $shade-1;
$info-view-color: $shade-5;
// Panel
$panel-bg: $shade-1;
$panel-header-color: $shade-8;
$panel-header-shadow: rgba($shade-10, 0.08);
// Tabs
$tabs-border-color: $shade-3;
$tab-active-color: $secondary;
$tab-inactive-color: $headings-color;
// Metadata list
$key-color: $shade-6;
$editable-hover-bg: rgba($shade-10, 0.04);
$handle-color-touch: $shade-4;
$handle-color-mouse: $shade-6;
$metadata-heading-color: $shade-5;
$metadata-separator-color: $shade-3;
// Button
$btn-primary-color: $shade-0;
$btn-primary-bg: $asphalt;
$btn-default-color: $text-color;
$btn-border: $shade-3;
$btn-default-bg: $shade-0;
$btn-default-active-color: rgba($btn-default-color, 0.5);
// Forms
$input-color: $text-color;
$input-bg: $body-bg;
$input-border-color: $shade-3;
$input-focus-color: $secondary;
$placeholder-color: $shade-5;
$input-group-background-color: #e5e5e5;
$input-group-border-color: darken($input-group-background-color, 5%);
// Editable
$editable-color: $text-color;
$editable-bg: $shade-0;
$editable-border-color: $secondary;
// Menu (select, dropdown, …)
$menu-bg: $body-bg;
$menu-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.2);
$menu-item-hover-bg: $shade-1;
$menu-item-selected-bg: $shade-2;
$menu-devider: $shade-2;
$menu-no-results-color: $shade-5;
// Drag layer
$creator-drag-preview-shadow: rgba($shade-10, 0.2);
// Modal
$modal-backdrop-bg: rgba($shade-10, 0.4);
$modal-content-bg: $shade-1;
$modal-header-bg: $shade-0;
$modal-footer-border-width: 1px;
$modal-footer-border-color: $shade-2;
$modal-icon-spin-color: $shade-0;
// Tag selector
$tag-selector-bg: -moz-field;