mirror of https://github.com/logseq/logseq
Initial radix color styling
parent
641a38afa6
commit
3e86da1b7b
|
@ -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",
|
||||
|
|
|
@ -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: {} } : {})
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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: " ";
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue