From c8692d12c447c44d29a3df0ae2675df30437c941 Mon Sep 17 00:00:00 2001 From: Ben Yorke Date: Fri, 2 Jun 2023 16:59:50 +0200 Subject: [PATCH] Updates to radix jakobs feedback --- resources/css/table.css | 8 ++++---- src/main/frontend/colors.cljs | 8 +++++++- src/main/frontend/components/container.css | 4 ++-- src/main/frontend/components/page.css | 10 ++++++++-- src/main/frontend/components/whiteboard.css | 12 ++++++++++-- src/main/frontend/ui.cljs | 2 +- src/main/frontend/ui.css | 11 ++++++++++- tldraw/apps/tldraw-logseq/src/styles.css | 4 ++-- 8 files changed, 44 insertions(+), 15 deletions(-) diff --git a/resources/css/table.css b/resources/css/table.css index c2b65dd9ab6..535ceb3c692 100644 --- a/resources/css/table.css +++ b/resources/css/table.css @@ -22,8 +22,8 @@ td { text-align: left; } -tr:nth-child(even) {background: var(--ls-table-tr-even-background-color);} -tr:nth-child(odd) {background: var(--ls-primary-background-color);} +tr:nth-child(even) {background: or(--logseq-og-table-stripe-background, --lx-gray-03, --ls-table-tr-even-background-color);} +tr:nth-child(odd) {background: or(--logseq-og-table-background, --lx-gray-01, --ls-primary-background-color);} caption.t-above {caption-side:top} caption.t-bottom {caption-side:bottom} @@ -37,8 +37,8 @@ figcaption{margin-top:.3em} color: var(--ls-primary-text-color); } -.dark-theme tr:nth-child(even) {background: var(--ls-table-tr-even-background-color);} -.dark-theme tr:nth-child(odd) {background: var(--ls-primary-background-color);} +.dark-theme tr:nth-child(even) {background: or(--logseq-og-table-stripe-background, --lx-gray-03, --ls-table-tr-even-background-color);} +.dark-theme tr:nth-child(odd) {background: or(--logseq-og-table-background, --lx-gray-02, --ls-primary-background-color);} .dark-theme td, .dark-theme tr { border-bottom: none; } diff --git a/src/main/frontend/colors.cljs b/src/main/frontend/colors.cljs index 95aa2730e5a..16b6571c012 100644 --- a/src/main/frontend/colors.cljs +++ b/src/main/frontend/colors.cljs @@ -1527,8 +1527,14 @@ "--ls-secondary-text-color: var(--rx-" (name gray) "-11); " "--ls-primary-text-color: var(--rx-" (name gray) "-12); " "--ls-border-color: var(--rx-" (name gray) "-05); " - "--ls-block-highlight-color: var(--rx-" (name gray) "-04); " "--ls-secondary-border-color: var(--rx-" (name color) "-05); " + "--ls-page-checkbox-color: var(--rx-" (name gray) "-07); " + "--ls-selection-background-color: var(--rx-" (name color) "-09); " + "--ls-focus-ring-color: var(--rx-" (name color) "-09); " + "--ls-table-tr-even-background-color: var(--rx-" (name gray) "-04); " + "--ls-page-properties-background-color: var(--rx-" (name gray) "-04); " + "--ls-block-highlight-color: var(--rx-" (name gray) "-04); " + "--ls-cloze-text-color: var(--rx-" (name color) "-08); " "--ls-wb-stroke-color-default: var(--rx-" (name color) "-07); " "--ls-wb-background-color-default: var(--rx-" (name color) "-04); " "--ls-wb-text-color-default: var(--rx-" (name gray) "-12); ") diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css index c3d985d5cf4..c4ccd0c78bc 100644 --- a/src/main/frontend/components/container.css +++ b/src/main/frontend/components/container.css @@ -152,12 +152,12 @@ &:hover { background-color: or(--logseq-og-left-sidebar-hover-background, --lx-gray-04, --ls-tertiary-background-color); - color: or(--logseq-og-left-sidebar-text-color-hover, --lx-gray-12, --ls-header-button-background); + color: or(--logseq-og-left-sidebar-text-color-hover, --lx-gray-12); } &.active, &:active { background-color: or(--logseq-og-left-sidebar-active-background, --lx-gray-05, --ls-quaternary-background-color); - color: or(--logseq-og-left-sidebar-active-text-color, --lx-gray-12, --ls-quaternary-background-color); + color: or(--logseq-og-left-sidebar-active-text-color, --lx-gray-12); } } diff --git a/src/main/frontend/components/page.css b/src/main/frontend/components/page.css index ad93a8ecd4c..e0fee3690b6 100644 --- a/src/main/frontend/components/page.css +++ b/src/main/frontend/components/page.css @@ -74,7 +74,9 @@ } > span { - @apply text-gray-500 text-sm; + @apply text-sm; + + color: or(--logseq-og-all-pages-table-text, --lx-gray-11, rgb(115, 115, 115)); padding: 6px 8px; } @@ -99,12 +101,16 @@ .actions { position: sticky; - background-color: var(--ls-primary-background-color); + background-color: or(--logseq-og-all-pages-table, --lx-gray-01, --ls-primary-background-color); white-space: nowrap; top: -18px; padding-bottom: 10px; z-index: 1; + .dark & { + background-color: or(--logseq-og-all-pages-table, --lx-gray-02, --ls-primary-background-color); + } + @screen md { display: flex; align-items: center; diff --git a/src/main/frontend/components/whiteboard.css b/src/main/frontend/components/whiteboard.css index 0658d64448e..31e4a4a8593 100644 --- a/src/main/frontend/components/whiteboard.css +++ b/src/main/frontend/components/whiteboard.css @@ -50,11 +50,15 @@ h1.title.whiteboard-dashboard-title { .dashboard-create-card { @apply items-center justify-center relative; - background-color: var(--ls-secondary-background-color); + background-color: or(--logseq-og-create-whiteboard-background, --lx-gray-02, --ls-secondary-background-color); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); border: 1px solid transparent; } +.dark .dashboard-create-card { + background-color: or(--logseq-og-create-whiteboard-background, --lx-gray-03, --ls-secondary-background-color); +} + .dashboard-create-card i { font-size: 24px; } @@ -79,10 +83,14 @@ h1.title.whiteboard-dashboard-title { @apply px-4 py-3 flex flex-col; gap: 4px; border-bottom: 1px solid var(--ls-border-color); - background-color: var(--ls-secondary-background-color); + background-color: or(--logseq-og-whiteboard-card-title-background, --lx-gray-02, --ls-secondary-background-color); font-size: 16px; } +.dark .dashboard-card-title { + background-color: or(--logseq-og-whiteboard-card-title-background, --lx-gray-03, --ls-secondary-background-color); +} + .dashboard-card-title-name { @apply truncate; color: var(--ls-primary-text-color); diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 29d7eaad8a5..d73e6b1bdc0 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -560,7 +560,7 @@ :class (if small? "is-small" "")} [:span.wrapper.transition-colors.ease-in-out.duration-200 {:aria-checked (if on? "true" "false"), :tab-index "0", :role "checkbox" - :class (if on? "bg-indigo-600" "bg-gray-300")} + :class (if on? "ui__toggle-background-on" "ui__toggle-background-off")} [:span.switcher.transform.transition.ease-in-out.duration-200 {:class (if on? (if small? "translate-x-4" "translate-x-5") "translate-x-0") :aria-hidden "true"}]]])) diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css index 5d3d177e547..f1d102bb2c5 100644 --- a/src/main/frontend/ui.css +++ b/src/main/frontend/ui.css @@ -49,7 +49,8 @@ .ui__ac-group-name { @apply p-2 text-xs; - color: or(--lx-accent-11, --ls-block-ref-link-text-color); + color: or(--logseq-og-dropdown-title-color, --lx-gray-11-alpha, --ls-block-ref-link-text-color); + background-color: or(--logseq-og-dropdown-title-background, --lx-gray-03); } .search-all #ui__ac-inner { @@ -422,3 +423,11 @@ html.is-mobile { .ui__radio-list { @apply grid grid-flow-col gap-2; } + +.ui__toggle-background-on { + background: or(--logseq-og-toggle-on-background, --lx-accent-09, rgb(2, 132, 199)); +} + +.ui__toggle-background-off { + background: or(--logseq-og-toggle-off-background, --lx-gray-08, rgb(212, 212, 212)); +} diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css index faff07679a7..61bfbfa4c2a 100644 --- a/tldraw/apps/tldraw-logseq/src/styles.css +++ b/tldraw/apps/tldraw-logseq/src/styles.css @@ -177,7 +177,7 @@ html[data-theme='light'] { pointer-events: all; position: relative; - background-color: var(--ls-secondary-background-color); + background-color: or(--logseq-whiteboard-toolbar-background, --lx-gray-03, --ls-secondary-background-color); border-radius: 8px; white-space: nowrap; gap: 8px; @@ -819,7 +819,7 @@ html[data-theme='light'] { html[data-theme='dark'] { .tl-type-tag[data-active='true'] { - background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), or(--logseq-og-whiteboard-logseq-button-border, --lx-accent-09, #338fff); border: 1px solid or(--logseq-og-whiteboard-logseq-button-border, --lx-accent-09, #338fff); color: var(--ls-secondary-text-color);