greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Initial radix color styling

pull/10493/head
Ben Yorke 2023-05-24 14:46:33 +02:00
parent 641a38afa6
commit 3e86da1b7b
9 changed files with 137 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -23,6 +23,7 @@
"playwright": "=1.31.0",
"postcss": "8.4.17",
"postcss-cli": "10.0.0",
"postcss-functions": "^4.0.2",
"postcss-import": "15.0.0",
"postcss-import-ext-glob": "2.0.1",
"postcss-nested": "6.0.0",

19
postcss.config.js
View File

@ -1,8 +1,27 @@
const or = (...args) => {
const variableNames = args.filter(x => x.startsWith('--'))
const initialValue = args.filter(x => !x.startsWith('--'))[0]
console.log(' ### or ### ', variableNames, initialValue)
return variableNames.reduceRight((memo, current) => {
if (memo && current) {
return `var(${current.trim()}, ${memo})`
} else if (current) {
return `var(${current.trim()})`
} else if (memo) {
return memo
}
}, initialValue)
}
module.exports = {
plugins: {
'autoprefixer': {},
'postcss-import-ext-glob': {},
'postcss-import': {},
'postcss-functions': { functions: { or } },
'tailwindcss/nesting': 'postcss-nested',
tailwindcss: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})

4
src/main/frontend/components/block.css
View File

@ -296,10 +296,10 @@
}
.page-ref {
color: var(--ls-link-ref-text-color);
color: or(--lx-accent-11, --ls-link-ref-text-color);
&:hover {
color: var(--ls-link-ref-text-hover-color);
color: or(--lx-accent-12, --ls-link-ref-text-hover-color);
}
}

28
src/main/frontend/components/container.css
View File

@ -6,7 +6,7 @@
}
#app-container {
background-color: var(--ls-primary-background-color, #fff);
background-color: or(--lx-gray-02, --ls-primary-background-color, #fff);
position: relative;
}
@ -82,7 +82,7 @@
width: var(--ls-left-sidebar-sm-width);
overflow-y: auto;
overflow-x: hidden;
background-color: var(--ls-primary-background-color);
background-color: or(--lx-gray-01, --ls-primary-background-color);
transition: transform .3s;
transform: translate3d(-100%, 0, 0);
z-index: 3;
@ -143,11 +143,11 @@
}
&:hover {
background-color: var(--ls-tertiary-background-color);
background-color: or(--lx-gray-04, --ls-tertiary-background-color);
}
&.active, &:active {
background-color: var(--ls-quaternary-background-color);
background-color: or(--lx-gray-05, --ls-quaternary-background-color);
}
}
@ -298,21 +298,21 @@
#create-button {
@apply flex items-center justify-center p-2 text-sm font-medium rounded-md w-full border;
background-color: var(--ls-secondary-background-color) !important;
background-color: or(--lx-gray-03, --ls-secondary-background-color) !important;
border-color: transparent;
&:hover,
&:focus {
border-color: var(--ls-border-color);
background-color: var(--ls-primary-background-color) !important;
background-color: or(--lx-gray-03, --ls-primary-background-color) !important;
}
@screen sm {
background-color: var(--ls-primary-background-color) !important;
background-color: or(--lx-gray-03, --ls-primary-background-color) !important;
&:hover,
&:focus {
background-color: var(--ls-secondary-background-color) !important;
background-color: or(--lx-gray-04, --ls-secondary-background-color) !important;
}
}
}
@ -321,7 +321,7 @@
@screen sm {
padding-top: 0;
width: var(--ls-left-sidebar-width);
background-color: var(--ls-secondary-background-color);
background-color: or(--lx-gray-01, --ls-secondary-background-color);
> .wrap {
margin-top: 52px;
@ -423,7 +423,7 @@
transition: width .3s;
&:before {
background-color: var(--ls-secondary-background-color);
background-color: or(--lx-gray-01, --ls-secondary-background-color);
width: 0;
overflow: hidden;
}
@ -493,7 +493,7 @@ html[data-theme='dark'] {
}
.cp__sidebar-main-layout {
background-color: var(--ls-primary-background-color);
background-color: or(--lx-gray-02, --ls-primary-background-color);
}
.cp__sidebar-main-content {
@ -523,7 +523,7 @@ html[data-theme='dark'] {
rounded-full h-8 w-8 flex items-center justify-center font-bold
select-none cursor-help;
background-color: var(--ls-secondary-background-color);
background-color: or(--lx-gray-01, --ls-secondary-background-color);
}
}
}
@ -531,7 +531,7 @@ html[data-theme='dark'] {
.cp__right-sidebar {
z-index: var(--ls-z-index-level-1);
transition: width 0.3s;
background-color: var(--ls-secondary-background-color, #d8e1e8);
background-color: or(--lx-gray-01, --ls-secondary-background-color, #d8e1e8);
position: relative;
user-select: none;
@ -592,7 +592,7 @@ html[data-theme='dark'] {
top: 0;
left: 0;
right: 0;
background-color: var(--ls-secondary-background-color, #d8e1e8);
background-color: or(--lx-gray-01, --ls-secondary-background-color, #d8e1e8);
z-index: 999;
user-select: none;
-webkit-app-region: drag;

35
src/main/frontend/components/settings.cljs
View File

@ -306,6 +306,41 @@
:action pick-theme
:desc (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))})))
(defn theme-row [t dark?]
(let [color-accent (state/sub :color/accent)
pick-theme [:div.grid {:style {:grid-template-columns "repeat(15, 1fr)"
:gap "0.75rem"
:overflow :scroll
:width "100%"
:padding-left "0.25rem"}}
(for [color colors/color-list]
[:div.theme-row--color {:on-click #(state/toggle-color-accent! color)
:class (when (= color-accent color) "selected")}
[:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name color) "-03)")
"--background-hover" (str "var(--rx-" (name color) "-04)")
"--background-active" (str "var(--rx-" (name color) "-05)")
"--border" (str "var(--rx-" (name color) "-07)")
"--border-hover" (str "var(--rx-" (name color) "-08)")}}]
; "--border-hover" (str "var(--rx-" (name color) "-08)")}}]
[:div.text-xs {:style {:margin "0 -0.5rem"
:opacity 0.5
:height "1rem"}}
(name color)]])]
display-theme [:button {:style {:background "var(--lx-accent-03)"
:border "1px solid var(--lx-accent-07)"
:color "var(--lx-accent-11)"}}
(if color-accent (name color-accent) "default")]]
[:<>
(row-with-button-action {:left-label "Radix color theme"
:-for "toggle_radix_theme"
:stretch true
:action pick-theme})]))
; (row-with-button-action {:left-label "Preview color theme"
; :-for "display_radix_theme"
; :stretch true
; :action display-theme})]))
(defn file-format-row [t preferred-format]
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
[:label.block.text-sm.font-medium.leading-5.opacity-70

35
src/main/frontend/components/settings.css
View File

@ -1,5 +1,16 @@
.cp__settings {
&-main {
> header {
padding: 10px;
padding-top: 0;
border-bottom: 1px solid or(--lx-gray-06, --ls-quaternary-background-color);
h1 {
font-size: 22px;
margin: 0;
}
}
aside {
@apply bg-gray-400/5 p-4;
}
@ -57,7 +68,7 @@
.settings-menu-link {
@apply px-2 py-1.5 select-none;
color: var(--ls-primary-text-color);
color: or(--lx-gray-12, --ls-primary-text-color);
}
}
@ -87,7 +98,7 @@
}
&.active {
background-color: var(--ls-quaternary-background-color);
background-color: or(--lx-gray-06, --ls-quaternary-background-color);
i {
opacity: 1;
@ -204,7 +215,7 @@
cursor: inherit;
> i {
border-color: var(--ls-link-text-color);
border-color: or(--lx-accent-11, --ls-link-text-color);
border-width: 2px;
}
}
@ -254,7 +265,7 @@
.update-state {
padding: 6px 10px;
background-color: var(--ls-quaternary-background-color);
background-color: or(--lx-gray-06, --ls-quaternary-background-color);
border-radius: 4px;
margin-top: 10px;
width: fit-content;
@ -323,7 +334,7 @@
@apply m-0 list-none -mx-2;
> li {
border-top: 1px solid var(--ls-secondary-border-color);
border-top: 1px solid or(--lx-accent-08, --ls-secondary-border-color);
&:hover {
.ext-label.is-plus {
@ -340,8 +351,8 @@
.ext-label {
@apply rounded px-1.5 opacity-70 cursor-pointer flex items-center select-none active:opacity-50;
background-color: var(--ls-secondary-border-color);
color: var(--ls-secondary-text-color);
background-color: or(--lx-accent-08, --ls-secondary-border-color);
color: or(--lx-gray-11, --ls-secondary-text-color);
&.is-del {
i.ti {
@ -365,8 +376,8 @@
}
&.is-plus {
background-color: var(--ls-primary-background-color);
border: 1px solid var(--ls-border-color);
background-color: or(--lx-gray-03, --ls-primary-background-color);
border: 1px solid or(--lx-gray-07, --ls-border-color);
}
}
@ -393,7 +404,7 @@
z-index: 1;
width: 100px;
max-height: 180px;
border:1px solid var(--ls-border-color);
border:1px solid or(--lx-gray-07, --ls-border-color);
border-radius: 4px;
overflow: auto;
overflow: overlay;
@ -432,13 +443,13 @@
&-alias-ext-input {
width: 80px !important;
padding: 1px 4px;
border: 2px solid var(--ls-secondary-border-color);
border: 2px solid or(--lx-gray-08, --ls-secondary-border-color);
font-size: 11px;
border-radius: 4px;
height: 22px;
&:focus {
border-color: var(--ls-border-color);
border-color: var(--lx-gray-07, --ls-border-color);
}
}
}

8
src/main/frontend/components/theme.css
View File

@ -1,6 +1,6 @@
:root {
scrollbar-width: thin;
scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color);
scrollbar-color: or(--lx-gray-05, --ls-scrollbar-foreground-color) or(--lx-gray-02, --ls-scrollbar-background-color);
--ls-z-index-level-0: 0;
--ls-z-index-level-1: 9;
@ -12,15 +12,15 @@
html {
::-webkit-scrollbar-thumb {
background-color: var(--ls-scrollbar-foreground-color);
background-color: or(--lx-gray-05, --ls-scrollbar-foreground-color);
}
::-webkit-scrollbar {
background-color: var(--ls-scrollbar-background-color);
background-color: or(--lx-gray-02, --ls-scrollbar-background-color);
}
::-webkit-scrollbar-thumb:active {
background-color: var(--ls-scrollbar-thumb-hover-color);
background-color: or(--lx-gray-06, --ls-scrollbar-thumb-hover-color);
}
::-webkit-scrollbar {

55
src/main/frontend/ui.css
View File

@ -35,7 +35,7 @@
&:not(.chosen):hover {
background-color: unset !important;
color: var(--ls-primary-text-color);
color: or(--lx-gray-12, --ls-primary-text-color);
}
}
}
@ -49,7 +49,7 @@
.ui__ac-group-name {
@apply p-2 text-xs;
color: var(--ls-block-ref-link-text-color);
color: or(--lx-accent-11, --ls-block-ref-link-text-color);
}
.search-all #ui__ac-inner {
@ -70,8 +70,8 @@
}
.notification-area {
background-color: var(--ls-tertiary-background-color, #fff);
color: var(--ls-primary-text-color);
background-color: or(--lx-gray-05, --ls-tertiary-background-color, #fff);
color: or(--lx-gray-12, --ls-primary-text-color);
}
}
@ -106,15 +106,17 @@
}
&-overlay div {
background-image: linear-gradient(to bottom, var(--ls-primary-background-color), var(--ls-quaternary-background-color));
--from: or(--lx-gray-03, --ls-primary-background-color);
--to: or(--lx-gray-06, --ls-quaternary-background-color);
background-image: linear-gradient(to bottom, var(--from), var(--to));
}
&-panel {
@apply relative rounded-md shadow-xl border;
border-color: var(--ls-border-color);
border-color: or(--lx-gray-07, --ls-border-color);
overflow: hidden;
background: var(--ls-secondary-background-color);
background: or(--lx-gray-04, --ls-secondary-background-color);
.panel-content {
overflow-y: auto;
@ -275,16 +277,23 @@ html.is-mobile {
.ui__button {
@apply inline-flex items-center px-3 py-2 border border-transparent
text-sm leading-4 font-medium rounded-md text-white
text-sm leading-4 font-medium rounded-md
focus:outline-none transition ease-in-out duration-150;
/* background-color: or(--lx-accent-04, --color-indigo-600); */
/* color: or(--lx-accent-11, white); */
background-color: or(--lx-accent-07, --color-indigo-600);
color: or(--lx-accent-12, white);
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&:hover:not([disabled]) {
opacity: 0.8;
/* opacity: or(--lx-accent-01, 0.8); */
opacity: 1;
background-color: or(--lx-accent-07);
}
&.is-link {
@ -294,22 +303,22 @@ html.is-mobile {
&[intent='logseq'] {
@apply focus:border-gray-500 dark:hover:text-gray-200;
color: var(--ls-primary-text-color);
background: var(--ls-secondary-background-color);
color: or(--lx-accent-11, --ls-primary-text-color);
background: or(--lx-accent-12, --ls-secondary-background-color);
&:hover {
color: var(--ls-link-text-color);
color: or(--lx-accent-11, --ls-link-text-color);
}
}
&[intent='link'], &[intent='border-link'] {
@apply focus:border-gray-500 dark:hover:text-gray-200;
color: var(--ls-primary-text-color);
color: or(--lx-gray-12, --ls-primary-text-color);
background: transparent;
&:hover {
color: var(--ls-link-text-color);
color: or(--lx-accent-11, --ls-link-text-color);
}
}
@ -323,8 +332,8 @@ html.is-mobile {
}
.dropdown-wrapper {
background-color: var(--ls-primary-background-color, #fff);
border: 1px solid var(--ls-tertiary-background-color);
background-color: or(--lx-gray-03, --ls-primary-background-color, #fff);
border: 1px solid or(--lx-gray-05, --ls-tertiary-background-color);
min-width: 12rem;
border-radius: 6px;
}
@ -346,10 +355,10 @@ html.is-mobile {
@apply block w-full pl-3 pr-10 py-2 text-base leading-6 rounded
border-gray-300 focus:outline-none sm:text-sm sm:leading-5;
background-color: var(--ls-primary-background-color, transparent);
background-color: or(--lx-gray-03, --ls-primary-background-color, transparent);
background-repeat: no-repeat;
border-width: 1px;
border-color: var(--ls-border-color);
border-color: or(--lx-gray-07, --ls-border-color);
&.is-small {
@apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
@ -361,7 +370,7 @@ html.is-mobile {
sm:text-sm sm:leading-5 rounded;
border-width: 1px;
border-color: var(--ls-border-color);
border-color: or(--lx-gray-07, --ls-border-color);
&:focus {
box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
@ -381,7 +390,7 @@ html.is-mobile {
}
.bg-quaternary {
background-color: var(--ls-quaternary-background-color);
background-color: or(--lx-gray-06, --ls-quaternary-background-color);
}
.ui__icon {
@ -394,9 +403,9 @@ html.is-mobile {
width: 24px;
height: 24px;
flex-shrink: 0;
border-color: var(--ls-primary-background-color);
border-color: or(--lx-gray-03, --ls-primary-background-color);
overflow: hidden;
color: var(--ls-primary-text-color);
color: or(--lx-gray-12, --ls-primary-text-color);
.ti,
.tie {
@ -405,7 +414,7 @@ html.is-mobile {
&:before {
@apply block absolute inset-0 ;
background: var(--ls-primary-background-color);
background: or(--lx-gray-03, --ls-primary-background-color);
content: " ";
}
}

7
yarn.lock
View File

@ -5506,6 +5506,13 @@ postcss-discard-overridden@^5.1.0:
resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
postcss-functions@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-4.0.2.tgz#23a7d100f507890042fbd0305f963554e6d1ce6a"
integrity sha512-htDZN6t97uW4GBXquTsz/DVaNVAHtHx5tLCALquVM2u58UwHki+RwHbANKiiI0ImA8T7Iml2MnvLUM7aGtlpqA==
dependencies:
postcss-value-parser "^4.0.0"
postcss-html@^0.36.0:
version "0.36.0"
resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"