Skip to content

Commit bb4fc29

Browse files
committed
JS-3190: CSS vars
1 parent 9c1a373 commit bb4fc29

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+169
-139
lines changed

anytype-ts.code-workspace

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"folders": [
3+
{
4+
"path": "."
5+
}
6+
],
7+
"extensions": {
8+
"recommendations": [
9+
"aaron-bond.better-comments",
10+
"github.copilot",
11+
"eamodio.gitlens",
12+
"timonwong.shellcheck",
13+
"dbaeumer.vscode-eslint"
14+
]
15+
},
16+
"settings": {
17+
"editor.formatOnSave": false,
18+
"editor.formatOnPaste": false,
19+
"editor.formatOnType": false,
20+
"debug.inlineValues": "on"
21+
}
22+
}

src/scss/_vars.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
:root {
2+
--color-text-primary: #252525;
3+
}
4+
15
/* Text */
26

37
$colorTextPrimary: #252525;

src/scss/block/common.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
display: none; margin-left: 28px; color: $colorControlActive; position: relative; z-index: 2;
4747
@include text-overflow-nw;
4848
}
49-
.emptyToggle:hover { color: $colorTextPrimary; }
49+
.emptyToggle:hover { color: var(--color-text-primary); }
5050
}
5151

5252
.block.index0 { padding-top: 0px !important; }

src/scss/block/cover.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212
.loaderWrapper {
1313
.loader {
14-
left: auto; top: 16px; right: 16px; margin: 0px; border-color: $colorBgPrimary; border-left: 2px solid $colorTextPrimary;
14+
left: auto; top: 16px; right: 16px; margin: 0px; border-color: $colorBgPrimary; border-left: 2px solid var(--color-text-primary);
1515
}
1616
}
1717

src/scss/block/dataview.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.icon { flex-shrink: 0; width: 20px; height: 20px; background-image: url('~img/arrow/loadMore0.svg'); }
2323
}
2424

25-
.loadMore:hover { color: $colorTextPrimary; }
25+
.loadMore:hover { color: var(--color-text-primary); }
2626
.loadMore:hover {
2727
.icon { background-image: url('~img/arrow/loadMore1.svg'); }
2828
}
@@ -58,10 +58,10 @@
5858
.inner { width: 300px; }
5959
.name { font-weight: 500; margin: 0px 0px 2px 0px; }
6060
.descr { @include text-small; margin: 0px 0px 8px 0px; }
61-
.button { color: $colorTextPrimary; }
61+
.button { color: var(--color-text-primary); }
6262
}
6363

64-
.dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: $colorTextPrimary; }
64+
.dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: var(--color-text-primary); }
6565
.dataviewHead {
6666
.icon.source { width: 28px; height: 28px; background-size: 24px; background-image: url('~img/icon/dataview/button/source0.svg'); opacity: 0; }
6767
.icon.source.active { opacity: 1; }
@@ -95,7 +95,7 @@
9595
> .side.left { flex-grow: 1; padding-left: 14px; max-width: 100%; }
9696
> .side.right { flex-shrink: 0; gap: 0px 4px; justify-content: flex-end; }
9797
> .side.right {
98-
.filter { color: $colorTextPrimary; padding: 0px; }
98+
.filter { color: var(--color-text-primary); padding: 0px; }
9999
.filter {
100100
.inner { gap: 0px; height: 100%; }
101101
.filterInputWrap { overflow: hidden; width: 0px; transition: width 0.2s $easeInQuint; }
@@ -143,10 +143,10 @@
143143
.icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/view.svg'); }
144144
}
145145
.viewItem:last-child { margin: 0px; }
146-
.viewItem:hover, .viewItem.active { color: $colorTextPrimary; }
146+
.viewItem:hover, .viewItem.active { color: var(--color-text-primary); }
147147
.viewItem.isDragging { background: rgba(255,255,255,0.5); padding: 0px 4px; border-radius: 4px; width: auto !important; }
148148

149-
.viewSelect { display: none; border: 0px; padding-left: 0px; color: $colorTextPrimary; }
149+
.viewSelect { display: none; border: 0px; padding-left: 0px; color: var(--color-text-primary); }
150150
.viewSelect {
151151
.icon:hover, .icon.active { background-color: transparent !important; }
152152
.name { @include text-overflow-nw; }
@@ -169,7 +169,7 @@
169169
.side.right {
170170
.element {
171171
display: flex; flex-direction: row; align-items: center; gap: 0px 6px; border-radius: 4px; padding: 0px 6px 0px 4px;
172-
transition: $transitionAllCommon; color: $colorTextPrimary;
172+
transition: $transitionAllCommon; color: var(--color-text-primary);
173173
}
174174
.element {
175175
.icon { width: 20px; height: 20px; }

src/scss/block/dataview/cell.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119
.itemWrap { display: inline-block; }
120120

121121
.placeholder { position: absolute; left: 0px; top: 0px; height: 100%; }
122-
#entry { -webkit-user-modify: read-write-plaintext-only; color: $colorTextPrimary; }
122+
#entry { -webkit-user-modify: read-write-plaintext-only; color: var(--color-text-primary); }
123123
#list { margin-right: 6px; position: relative; word-wrap: break-word; }
124124
}
125125

src/scss/block/dataview/view/common.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
.cell.add { color: $colorControlActive; line-height: 20px; width: 100%; display: block; }
99
.cell.add {
1010
.btn { display: inline-block; transition: $transitionAllCommon; }
11-
.btn:hover { color: $colorTextPrimary; }
11+
.btn:hover { color: var(--color-text-primary); }
1212
.btn:hover {
1313
.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
1414
}
@@ -26,12 +26,12 @@
2626
.cellContent.canEdit { cursor: default; }
2727
.cellContent:empty, .cellContent.isEmpty { display: none; }
2828
.cellContent.last { margin: 0px; }
29-
.cellContent.c-description { color: $colorTextPrimary; }
29+
.cellContent.c-description { color: var(--color-text-primary); }
3030
.cellContent {
3131
.more { vertical-align: top; height: 18px; }
3232
}
3333

34-
.cellContent.isName { @include text-paragraph; color: $colorTextPrimary; display: flex; gap: 0px 6px; position: relative; }
34+
.cellContent.isName { @include text-paragraph; color: var(--color-text-primary); display: flex; gap: 0px 6px; position: relative; }
3535
.cellContent.isName {
3636
.iconObject { position: absolute; left: 0px; top: 0px; margin: 0px; cursor: default; }
3737
.name {

src/scss/block/dataview/view/gallery.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
.card:hover { border-color: $colorShapeSecondary; background: $colorShapeHighlightLight; }
6666
.card:hover {
6767
.cover {
68-
.inner { color: $colorTextPrimary; }
68+
.inner { color: var(--color-text-primary); }
6969
.inner .icon.plus { background-image: url('~img/icon/plus/gallery-cover1.svg'); }
7070
}
7171

src/scss/block/dataview/view/list.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
.name { @include text-overflow-nw; max-width: 200px; }
3232
}
3333

34-
.cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: $colorTextPrimary; }
34+
.cellContent.isName { @include text-paragraph; display: inline-flex; flex-direction: row; align-items: center; color: var(--color-text-primary); }
3535
.cellContent.isName {
3636
.name { display: inline-block; line-height: 24px; vertical-align: top; font-weight: 500; max-width: 500px; }
3737
.input.name { padding: 0; @include text-paragraph; }

src/scss/block/link.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156

157157
.block.blockLink.text:hover {
158158
.linkCard {
159-
.cardName .name { border-color: $colorTextPrimary; }
159+
.cardName .name { border-color: var(--color-text-primary); }
160160
}
161161
}
162162

src/scss/block/table.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
.resize { width: 6px; height: 100%; position: absolute; right: -3px; top: 0px; cursor: col-resize; z-index: 3; }
150150
.click { width: 100%; height: 100%; }
151151

152-
.block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: $colorTextPrimary; }
152+
.block { height: 100%; border: 0px !important; padding: 0px; margin: 0px; color: var(--color-text-primary); }
153153
.block {
154154
.selectable { flex-grow: 1; }
155155
.wrapContent, .wrap, .flex, .dropTarget { height: 100%; }

src/scss/block/text.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
markupmention.withImage.c28 name markupBgcolor:first-child { margin-left: -27px; padding-left: 27px; }
4747
markupmention.withImage.c32 name markupBgcolor:first-child { margin-left: -34px; padding-left: 34px; }
4848
markupmention:hover {
49-
name::before { border-color: $colorTextPrimary; }
49+
name::before { border-color: var(--color-text-primary); }
5050
}
5151

5252
markupbold { font-weight: 600; }

src/scss/common.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
html, body { height: 100%; }
55

66
body {
7-
font-family: 'Inter'; @include text-common; color: $colorTextPrimary; overflow-x: hidden; overflow-y: auto; background: $colorBgPrimary;
7+
font-family: 'Inter'; @include text-common; color: var(--color-text-primary); overflow-x: hidden; overflow-y: auto; background: $colorBgPrimary;
88
-webkit-font-smoothing: antialiased; backface-visibility: hidden; transform-style: flat; overscroll-behavior: none;
99
}
1010
body.colResize { cursor: col-resize !important; }
@@ -101,8 +101,8 @@ html.platformWindows, html.platformLinux {
101101

102102
.editableWrap { position: relative; }
103103

104-
a { color: $colorTextPrimary; }
105-
search { background: yellow !important; color: $colorTextPrimary !important; border-radius: 2px; display: inline; }
104+
a { color: var(--color-text-primary); }
105+
search { background: yellow !important; color: var(--color-text-primary) !important; border-radius: 2px; display: inline; }
106106
search.active { background: orange !important; }
107107

108108
.dropTarget.isOver.middle { background: $colorSystemDropZone !important; }
@@ -124,8 +124,8 @@ search.active { background: orange !important; }
124124
pointer-events: none; z-index: 10; content: ""; border-radius: 2px;
125125
}
126126

127-
.textColor-default { color: $colorTextPrimary !important; }
128-
.textColor-black { color: $colorTextPrimary !important; }
127+
.textColor-default { color: var(--color-text-primary) !important; }
128+
.textColor-black { color: var(--color-text-primary) !important; }
129129
.textColor-grey { color: $colorControlActive !important; }
130130
.textColor-yellow { color: $colorYellow !important; }
131131
.textColor-orange { color: $colorOrange !important; }
@@ -149,7 +149,7 @@ search.active { background: orange !important; }
149149
.bgColor-lime { background: #e3f7d0 !important; }
150150

151151
.isMultiSelect.archive { color: $colorTextSecondary; background: $colorShapeTertiary; }
152-
.isMultiSelect.tagColor-default { color: $colorTextPrimary !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; }
152+
.isMultiSelect.tagColor-default { color: var(--color-text-primary) !important; background: $colorBgPrimary !important; box-shadow: 0px 0px 0px 1px $colorShapeSecondary inset; }
153153
.isMultiSelect.tagColor-grey { color: #8c9ea5 !important; background: #ebeff1 !important; }
154154
.isMultiSelect.tagColor-yellow { color: #b2a616 !important; background: #fbf5b8 !important; }
155155
.isMultiSelect.tagColor-orange { color: #d3720d !important; background: #ffEcc8 !important; }
@@ -161,8 +161,8 @@ search.active { background: orange !important; }
161161
.isMultiSelect.tagColor-teal { color: #0caaa3 !important; background: #d4f5f3 !important; }
162162
.isMultiSelect.tagColor-lime { color: #64b90f !important; background: #e3f7d0 !important; }
163163

164-
.isSelect.tagColor-default { color: $colorTextPrimary !important; }
165-
.isSelect.tagColor-black { color: $colorTextPrimary !important; }
164+
.isSelect.tagColor-default { color: var(--color-text-primary) !important; }
165+
.isSelect.tagColor-black { color: var(--color-text-primary) !important; }
166166
.isSelect.tagColor-grey { color: $colorControlActive !important; }
167167
.isSelect.tagColor-yellow { color: $colorYellow !important; }
168168
.isSelect.tagColor-orange { color: $colorOrange !important; }

src/scss/component/cover.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.cover {
44
background-repeat: no-repeat; background-size: cover; background-position: top center; color: $colorBgPrimary; position: fixed; left: 0px;
5-
top: 0px; width: 100%; height: 100%; background-color: $colorTextPrimary;
5+
top: 0px; width: 100%; height: 100%; background-color: var(--color-text-primary);
66
}
77

88
.cover.type2.white { background-color: $colorBgPrimary !important; }
@@ -18,7 +18,7 @@
1818
.cover.type2.green { background-color: #136E41 !important; }
1919
.cover.type2.lightgrey { background-color: $colorShapeSecondary !important; }
2020
.cover.type2.darkgrey { background: $colorControlActive !important; }
21-
.cover.type2.black { background-color: $colorTextPrimary !important; }
21+
.cover.type2.black { background-color: var(--color-text-primary) !important; }
2222

2323
.cover.type3.yellow { background-image: linear-gradient(180deg, $colorSystemAccent100 0%, $colorYellow 105.47%); }
2424
.cover.type3.red { background-image: linear-gradient(180deg, $colorRed 0%, $colorPink 105.47%); }

src/scss/component/dotIndicator.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22

33
.dotIndicator { display: flex; justify-content: center; align-items: center; gap: 0px 6px; }
44
.dotIndicator {
5-
span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: $colorTextPrimary; }
5+
span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-text-primary); }
66
span.active { background-color: $colorShapePrimary; opacity: 0.9; }
77
}

src/scss/component/editor.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
transition: background $transitionCommon, color $transitionCommon; height: 28px; padding: 0px 8px 0px 6px; border-radius: 6px; display: flex;
4747
flex-direction: row; align-items: center;
4848
}
49-
.btn:hover, .btn.hover { background: $colorShapeHighlightMedium; color: $colorTextPrimary; }
49+
.btn:hover, .btn.hover { background: $colorShapeHighlightMedium; color: var(--color-text-primary); }
5050

5151
.btn {
5252
.icon { width: 20px; height: 20px; margin-right: 4px; }

src/scss/component/emptySearch.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.emptySearch { height: 100%; padding: 0px 16px; text-align: center; }
44
.emptySearch {
5-
b { display: block; font-weight: 400; color: $colorTextPrimary; }
5+
b { display: block; font-weight: 400; color: var(--color-text-primary); }
66
span { @include text-overflow-nw; max-width: 100%; display: block; }
77
.txt { line-height: 24px; color: $colorControlActive; width: 100%; }
88
}

src/scss/component/header.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
font-weight: 700; color: $colorControlActive; transition: $transitionAllCommon; text-align: center;
2727
vertical-align: top; padding: 0px 16px; display: flex; align-items: center; height: 100%; border-bottom: 1px solid rgba(0,0,0,0);
2828
}
29-
.tab:hover { color: $colorTextPrimary; }
30-
.tab.active { color: $colorTextPrimary; border-color: $colorTextPrimary; }
29+
.tab:hover { color: var(--color-text-primary); }
30+
.tab.active { color: var(--color-text-primary); border-color: var(--color-text-primary); }
3131
}
3232

3333
.headerBanner {
@@ -92,7 +92,7 @@
9292
}
9393
.item.orange { color: $colorOrange !important; font-weight: 500; }
9494

95-
.item.grey:hover { color: $colorTextPrimary; }
95+
.item.grey:hover { color: var(--color-text-primary); }
9696
.item.orange:hover { color: $colorSystemAccent100 !important; }
9797

9898
.item:hover {

src/scss/component/loader.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
}
99

1010
@keyframes dots-light {
11-
0% { background-color: $colorTextPrimary; }
12-
32% { background-color: $colorTextPrimary; }
11+
0% { background-color: var(--color-text-primary); }
12+
32% { background-color: var(--color-text-primary); }
1313
100% { background-color: rgba(0,0,0,0); }
1414
}
1515

src/scss/component/media/audio.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.mediaAudio { width: 100%; }
44
.mediaAudio {
5-
.controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: $colorTextPrimary; }
5+
.controls { width: 100%; min-width: 160px; position: relative; text-align: left; color: var(--color-text-primary); }
66
.controls {
77
.input-drag {
88
.icon { cursor: default; }

src/scss/component/pager.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
min-width: 24px; display: inline-block; padding: 0px 2px; transition: $transitionAllCommon; text-align: center;
1111
vertical-align: top; line-height: 20px;
1212
}
13-
.pageItem:hover, .pageItem.active { color: $colorTextPrimary; }
13+
.pageItem:hover, .pageItem.active { color: var(--color-text-primary); }
1414

1515
.pageItem.list { cursor: default; }
1616
.pageItem.list:hover { color: $colorControlActive; }

src/scss/component/preview/common.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
.head {
1515
.item { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; cursor: default; }
16-
.item:hover { color: $colorTextPrimary; }
16+
.item:hover { color: var(--color-text-primary); }
1717
.item:last-child { margin: 0px; }
1818
}
1919

src/scss/component/preview/link.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
.previewLink {
44
.link { @include text-small; height: 18px; margin-bottom: 2px; color: $colorTextSecondary; @include text-overflow-nw; }
5-
.name { @include text-common; font-weight: 500; height: 22px; color: $colorTextPrimary; @include text-overflow-nw; margin-bottom: 2px; }
5+
.name { @include text-common; font-weight: 500; height: 22px; color: var(--color-text-primary); @include text-overflow-nw; margin-bottom: 2px; }
66
.descr {
7-
@include text-small; @include clamp2; height: 36px; color: $colorTextPrimary; margin: 2px 0px 0px 0px;
7+
@include text-small; @include clamp2; height: 36px; color: var(--color-text-primary); margin: 2px 0px 0px 0px;
88
}
99

1010
.img {

src/scss/component/progress.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
transition-property: opacity, transform; transition-duration: 0.05s; transition-timing-function: ease-in-out; pointer-events: all;
1818
}
1919
.inner {
20-
.label { position: absolute; left: 16px; top: 12px; z-index: 1; color: $colorTextPrimary; white-space: nowrap; @include text-paragraph; }
20+
.label { position: absolute; left: 16px; top: 12px; z-index: 1; color: var(--color-text-primary); white-space: nowrap; @include text-paragraph; }
2121
.bar { width: calc(100% - 32px); height: 8px; background: $colorShapeTertiary; overflow: hidden; border-radius: 8px; position: absolute; bottom: 16px; left: 16px; }
2222
.fill { position: absolute; left: 0px; top: 0px; height: 100%; background: $colorControlAccent; transition: width 0.2s linear; }
2323
}

src/scss/component/tooltip.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515

1616
.tooltip.big {
17-
background-color: $colorBgPrimary; color: $colorTextPrimary; width: 316px; white-space: normal; padding: 12px 16px;
17+
background-color: $colorBgPrimary; color: var(--color-text-primary); width: 316px; white-space: normal; padding: 12px 16px;
1818
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px;
1919
}
2020
.tooltip.big {

src/scss/form/button.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,4 @@ input.button { line-height: 1; }
4949
letter-spacing: 0.1px;
5050
}
5151
.button.simple:hover,
52-
.button.simple.hover { color: $colorTextPrimary; }
52+
.button.simple.hover { color: var(--color-text-primary); }

src/scss/form/inputWithFile.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
.txt { line-height: 20px; height: 20px; overflow: hidden; width: calc(100% - 26px); vertical-align: top; }
1010
.fileWrap { display: inline-block; vertical-align: top; }
1111
.fileWrap .border { border-bottom: 0.05em solid $colorControlActive; display: inline-block; line-height: 1; transition: $transitionAllCommon; }
12-
.fileWrap:hover .border { color: $colorTextPrimary; }
12+
.fileWrap:hover .border { color: var(--color-text-primary); }
1313

1414
.input::placeholder { color: $colorControlActive; }
1515
.urlToggle { cursor: text; display: inline-block; }
1616

1717
#form { display: inline-block; vertical-align: top; }
18-
#url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: $colorTextPrimary; }
18+
#url { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: var(--color-text-primary); }
1919

2020
.icon { width: 20px; height: 20px; margin: 0px 6px 0px 0px; transition: none; vertical-align: top; }
2121
.icon.image { background-image: url('~img/icon/menu/action/block/media/image0.svg'); }

src/scss/list/widget.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
.button.disabled { background: $colorShapeTertiary; max-width: 80px; }
2424
.button.edit {
25-
box-shadow: 0px 0px; background: $colorShapeHighlightMedium; border-radius: 6px; @include text-common; color: $colorTextPrimary; line-height: 26px; width: auto;
25+
box-shadow: 0px 0px; background: $colorShapeHighlightMedium; border-radius: 6px; @include text-common; color: var(--color-text-primary); line-height: 26px; width: auto;
2626
padding: 0px 10px;
2727
}
2828
}

0 commit comments

Comments
 (0)