diff --git a/deps/shui/shui-graph/pages/shui___components___button.md b/deps/shui/shui-graph/pages/shui___components___button.md new file mode 100644 index 00000000000..3cf20d57b0b --- /dev/null +++ b/deps/shui/shui-graph/pages/shui___components___button.md @@ -0,0 +1 @@ +- \ No newline at end of file diff --git a/deps/shui/src/logseq/shui/context.cljs b/deps/shui/src/logseq/shui/context.cljs index fd3bbafe8c6..e0ea8a2c133 100644 --- a/deps/shui/src/logseq/shui/context.cljs +++ b/deps/shui/src/logseq/shui/context.cljs @@ -1,4 +1,7 @@ -(ns logseq.shui.context) +(ns logseq.shui.context + (:require + [frontend.state :as state] + [frontend.colors :as colors])) (defn inline->inline-block [inline block-config] (fn [_context item] @@ -33,4 +36,8 @@ :whiteboard? (:whiteboard? block-config) ;; Some functions from logseq's application will be used in the shui components. To avoid circular dependencies, ;; they will be provided via the context object - :int->local-time-2 int->local-time-2}) + :int->local-time-2 int->local-time-2 + ;; We need some variable from the state to carry over + :color-accent (state/get-color-accent) + :color-gradient (state/get-color-gradient) + :linear-gradient colors/linear-gradient}) diff --git a/deps/shui/src/logseq/shui/table/v2.cljs b/deps/shui/src/logseq/shui/table/v2.cljs index d84fc229e06..82d0c69e95e 100644 --- a/deps/shui/src/logseq/shui/table/v2.cljs +++ b/deps/shui/src/logseq/shui/table/v2.cljs @@ -304,10 +304,10 @@ :on-pointer-down handle-pointer-down} child]])) -(rum/defc table-gradient-accent [{:keys [color]}] +(rum/defc table-gradient-accent [{:keys [color color-gradient linear-gradient]}] [:div.rounded-t.h-2.-ml-px.-mt-px.-mr-px - {:style {:grid-column "1 / -1" :order -999} - :class (str "grad-bg-" color "-9") + {:style {:grid-column "1 / -1" :order -999 + :background (linear-gradient color :09 color-gradient)} :data-testid "v2-table-gradient-accent"}]) (rum/defc table-header-row [handle-cell-width-change cells {:keys [cell-col-map] :as opts}] @@ -372,7 +372,7 @@ children])) (rum/defc root - [{:keys [data] :as _props} {:keys [block] :as context}] + [{:keys [data] :as _props} {:keys [block color-accent color-gradient linear-gradient] :as context}] (let [;; In order to highlight cells in the same row or column of the hovered cell, ;; we need to know the row and column that the cursor is in [[_cell-hover-x _cell-hover-y :as cell-hover] set-cell-hover] (rum/use-state []) @@ -390,7 +390,7 @@ ;; Most of the config options will be repeated and reused throughout the table, so store ;; all of it's state in a single map for consistency table-opts {; user configurable properties (sometimes with defaults) - :color (get-view-prop* :logseq.color) + :color (get-view-prop* :logseq.color color-accent) :headers (get-view-prop* :logseq.table.headers "none") :borders? (get-view-prop* :logseq.table.borders true) :compact? (get-view-prop* :logseq.table.compact false) @@ -400,6 +400,8 @@ :columns (get-columns block data) ; non configurable properties + :color-gradient color-gradient + :linear-gradient linear-gradient :cell-hover cell-hover :cell-focus cell-focus :cursor (or (not-empty cell-focus) (not-empty cell-hover)) @@ -447,7 +449,7 @@ :table-underflow? table-underflow? :cell-col-map cell-col-map)] ; (js/console.log "shui table opts context" (clj->js context)) - ; (js/console.log "shui table opts" (clj->js table-opts)) + (js/console.log "shui table opts" (clj->js table-opts)) ; (js/console.log "shui table opts" (pr-str table-opts)) ;; Scrollable Container: if the table is larger than the container, manage the scrolling effects here (table-scrollable-overflow handle-root-width-change diff --git a/src/main/frontend/colors.cljs b/src/main/frontend/colors.cljs index 16b6571c012..4524aee58d8 100644 --- a/src/main/frontend/colors.cljs +++ b/src/main/frontend/colors.cljs @@ -1495,6 +1495,37 @@ :grass :olive :lime :olive :yellow :sand :amber :sand :orange :sand :brown :sand}) +(defn color-gradient-even [color n-stops] + (let [color-index (.indexOf color-list color) + middle (+ color-index (count color-list)) + start (- middle (/ n-stops 2)) + end (+ middle (/ n-stops 2))] + (subvec (into color-list color-list) start end))) + +(defn color-gradient-odd [color n-stops] + (let [color-index (.indexOf color-list color) + middle (+ color-index (count color-list)) + start (- middle (/ (dec n-stops) 2)) + end (+ middle (/ (dec n-stops) 2))] + (subvec (into color-list color-list) start end))) + + +(mod -1 10) +(defn linear-gradient [color-name color-stop gradient-level] + (let [color-index (.indexOf color-list color-name) + step (fn [dist] + (str "var(--rx-" + (name (nth color-list (mod (+ color-index dist) (count color-list)))) + "-" (name color-stop) ")"))] + (case gradient-level + 1 (str "linear-gradient(90deg, " (step 0) ", " (step 0) ")") + 2 (str "linear-gradient(-45deg, " (step -1) " -50%, " (step 0) " 50%, " (step 1) " 150%)") + 3 (str "linear-gradient(-45deg, " (step -1) " 0%, " (step 0) " 50%, " (step 1) " 100%)") + 4 (str "linear-gradient(-45deg, " (step -2) " -16.66%, " (step -1) " 16.66%, " (step 0) " 50%, " (step 1) " 83.33%, " (step 2) " 116.66%)") + 5 (str "linear-gradient(-45deg, " (step -2) " 0%, " (step -1) " 25%, " (step 0) " 50%, " (step 1) " 75%, " (step 2) " 100%)") + 6 (str "linear-gradient(-45deg, " (step -3) " -10%, " (step -2) " 10%, " (step -1) " 30%, " (step 0) " 50%, " (step 1) " 70%, " (step 2) " 90%, " (step 3) " 110%)") + 7 (str "linear-gradient(-45deg, " (step -3) " 0%, " (step -2) " 16.66%, " (step -1) " 33.33%, " (step 0) " 50%, " (step 1) " 66.66%, " (step 2) " 83.33%, " (step 3) " 100%)")))) + (defn get-color ; ([value]) ([color value] @@ -1511,7 +1542,7 @@ (get-in radix [(keyword color-name) (keyword color-value)])) (get-in radix [(keyword color-name) (keyword color-value)])))) -(defn set-radix [color] +(defn set-radix [color gradient-level] (let [style-tag (or (js/document.querySelector "style#color-variables") (js/document.createElement "style")) steps ["01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "01-alpha" "02-alpha" "03-alpha" "04-alpha" "05-alpha" "06-alpha" "07-alpha" "08-alpha" "09-alpha" "10-alpha" "11-alpha" "12-alpha"] diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs index d02f42b246e..bafab774b5f 100644 --- a/src/main/frontend/components/settings.cljs +++ b/src/main/frontend/components/settings.cljs @@ -316,12 +316,12 @@ :padding-left "0.25rem"}} [:div.theme-row--color {:on-click #(state/unset-color-accent!) :class (when (nil? color-accent) "selected")} - [:div.theme-row--color-swatch {:style {"--background" "#0F2A35" - "--background-hover" "#163542" - "--background-active" "#274E5E" - "--border" "#0369a1" - "--border-hover" "#38bdf8" ;; TODO what is the hover color? - "--border-active" "#0ea5e9"} ;; TODO what is the hover color? + [:div.theme-row--color-swatch {:style {;; "--background" "#0F2A35" + ;; "--background-hover" "#163542" + ;; "--background-active" "#274E5E" + "--background" "#0369a1" + "--background-hover" "#38bdf8" ;; TODO what is the hover color? + "--background-active" "#0ea5e9"} ;; TODO what is the hover color? :border-right "1px solid rgba(255,255,255,0.4)"}] [:div.text-xs {:style {:margin "0 -0.5rem" :opacity 0.5 @@ -330,28 +330,43 @@ [:div.theme-row--color-separator] (for [color colors/color-list :let [gray (get colors/gray-pairing-map color)]] - [:div.theme-row--color {:on-click #(state/toggle-color-accent! color) + [:div.theme-row--color {:on-click #(state/set-color-accent! color) :class (when (= color-accent color) "selected")} - [:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name gray) "-02-alpha)") - "--background-hover" (str "var(--rx-" (name gray) "-03)") - "--background-active" (str "var(--rx-" (name gray) "-06)") - "--border" (str "var(--rx-" (name color) "-07)") - "--border-hover" (str "var(--rx-" (name color) "-10)") - "--border-active" (str "var(--rx-" (name color) "-09) ")}}]])] + [:div.theme-row--color-swatch {:style {"--background" (str "var(--rx-" (name color) "-07)") + "--background-hover" (str "var(--rx-" (name color) "-10)") + "--background-active" (str "var(--rx-" (name color) "-09) ")}}]])] ; "--border-hover" (str "var(--rx-" (name color) "-08)")}}] 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 "Logseq color theme" + (row-with-button-action {:left-label "Theme color" :-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 theme-gradient-row [t dark? color-accent] + (let [color-gradient (state/sub :color/gradient) + pick-gradient [:div {:class "grid grid-cols-7 gap-2 overflow-x-auto"} + [:div {:class (cond-> "theme-gradient-row--gradient-swatch" + (= 1 color-gradient) (str " selected")) + :style {"--background" (str "var(--rx-" (name color-accent) "-07)") + "--background-hover" (str "var(--rx-" (name color-accent) "-08)") + "--background-active" (str "var(--rx-" (name color-accent) "-09)")} + :on-click #(state/unset-color-gradient!)}] + (for [n (range 2 8) + :let [active? (= n color-gradient)]] + [:div {:class (cond-> "bg-white theme-gradient-row--gradient-swatch" + active? (str " selected")) + :key n + :style {"--background" (colors/linear-gradient color-accent :07 n) + "--background-hover" (colors/linear-gradient color-accent :08 n) + "--background-active" (colors/linear-gradient color-accent :09 n)} + :on-click #(state/set-color-gradient! n)}])]] + (row-with-button-action {:left-label "Theme gradient" + :stretch true + :action pick-gradient}))) (defn file-format-row [t preferred-format] @@ -684,12 +699,15 @@ theme (state/sub :ui/theme) dark? (= "dark" theme) system-theme? (state/sub :ui/system-theme?) - switch-theme (if dark? "light" "dark")] + switch-theme (if dark? "light" "dark") + color-accent (state/sub :color/accent)] [:div.panel-wrap.is-general (version-row t version) (language-row t preferred-language) (theme-modes-row t switch-theme system-theme? dark?) (when (and (util/electron?) (not util/mac?)) (native-titlebar-row t)) + ; (theme-row t dark?) + ; (when color-accent (theme-gradient-row t dark? color-accent)) (when (config/global-config-enabled?) (edit-global-config-edn)) (when current-repo (edit-config-edn)) (when current-repo (edit-custom-css)) diff --git a/src/main/frontend/components/settings.css b/src/main/frontend/components/settings.css index 56b783eb40e..a8b3ff496b8 100644 --- a/src/main/frontend/components/settings.css +++ b/src/main/frontend/components/settings.css @@ -501,7 +501,7 @@ svg.cmd { width: 2rem; height: 2rem; background: var(--background); - border: 4px solid var(--border); + /* border: 4px solid var(--border); */ /* border: 3px solid orange; */ } @@ -515,3 +515,20 @@ svg.cmd { background: var(--background-active); border-color: var(--border-active); } + +.cp__settings-main .theme-gradient-row--gradient-swatch { + @apply rounded-full; + width: 2rem; + height: 2rem; + + background: var(--background); +} + +.cp__settings-main .theme-gradient-row--gradient-swatch:hover { + background: var(--background-hover); +} + +.cp__settings-main .selected.theme-gradient-row--gradient-swatch, +.cp__settings-main .selected.theme-gradient-row--gradient-swatch:hover { + background: var(--background-active); +} diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index f4074a40ab4..dca37a2c921 100644 --- a/src/main/frontend/state.cljs +++ b/src/main/frontend/state.cljs @@ -2129,17 +2129,25 @@ Similar to re-frame subscriptions" [] (storage/remove :user-groups)) -(defn toggle-color-accent! [color] - (if (= color (get @state :color/accent)) - (do (swap! state assoc :color/accent nil) - (colors/unset-radix)) - (do (swap! state assoc :color/accent color) - (colors/set-radix color)))) +(defn get-color-accent [] + (get @state :color/accent)) + +(defn get-color-gradient [] + (get @state :color/gradient 1)) + +(defn set-color-accent! [color] + (swap! state assoc :color/accent color) + (colors/set-radix color (get-color-gradient))) + +(defn set-color-gradient! [steps] + (swap! state assoc :color/gradient steps) + (colors/set-radix (get-color-accent) steps)) (defn unset-color-accent! [] (swap! state assoc :color/accent nil) (colors/unset-radix)) - -(defn get-color-accent [] - (get @state :color/accent)) +(defn unset-color-gradient! [] + (swap! state assoc :color/gradient nil) + (colors/unset-radix)) + diff --git a/tailwind.config.js b/tailwind.config.js index c5a2fb14df8..d09136ac50b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,30 +1,6 @@ -const plugin = require('tailwindcss/plugin') const colors = require('tailwindcss/colors') const radix = require('@radix-ui/colors') -const gradientColors = { - tomato: ["amber", "orange", "tomato", "red", "crimson"], - red: ["orange", "tomato", "red", "crimson", "pink"], - crimson: ["tomato", "red", "crimson", "pink", "plum"], - pink: ["red", "crimson", "pink", "plum", "purple"], - plum: ["crimson", "pink", "plum", "purple", "violet"], - purple: ["pink", "plum", "purple", "violet", "indigo"], - violet: ["plum", "purple", "violet", "indigo", "blue"], - indigo: ["purple", "violet", "indigo", "blue", "cyan"], - blue: ["violet", "indigo", "blue", "cyan", "teal"], - // sky: ["indigo", "blue", "sky", "cyan", "teal"], - cyan: ["indigo", "blue", "cyan", "teal", "green"], - teal: ["blue", "cyan", "teal", "green", "grass"], - // mint: ["cyan", "teal", "mint", "green", "grass"], - green: ["cyan", "teal", "green", "grass", "amber"], - grass: ["teal", "green", "grass", "amber", "orange"], - // lime: ["green", "grass", "lime", "yellow", "amber"], - // yellow: ["grass", "lime", "yellow", "amber", "orange"], - amber: ["green", "grass", "amber", "orange", "tomato"], - orange: ["grass", "amber", "orange", "tomato", "red"], - // brown: ["green", "grass", "brown", "tomato", "red"], -} - function exposeColorsToCssVars ({ addBase, theme }) { function extractColorVars (colorObj, colorGroup = '') { return Object.keys(colorObj).reduce((vars, colorKey) => { @@ -57,72 +33,6 @@ function buildColor(color, custom) { return base } -// this will allow us to use gradient color functions in the ui: -// grad-bg-tomato-3 OR grad-bg-tomato-3-alpha -// it will also loop through all 5 color stops, unless the stops are specified -// grad-bg-stops-3 -// this will have a default repeating gradient at a step that can be configured with -// grad-bg-cycle-32 -const addGradientColors = plugin(({ addBase, addComponents, addUtilities, config, ___theme }) => { - const dark = getDarkSelector(config) - - addUtilities({ - ['.grad-bg-stops-3']: { - '--grad-bg-stops': "var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d)", - }, - ['.grad-bg-stops-5']: { - '--grad-bg-stops': "var(--grad-bg-stop-a), var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d), var(--grad-bg-stop-e)", - }, - ['.grad-bg-cycle-12']: { - 'background-image': 'repeatint-linear-gradient(to right, var(--grad-bg-stops))', - }, - }) - - Object.values(gradientColors).forEach((stops, ___index) => { - const baseColor = stops[2] - const color = (scale, stopIndex = 2, suffix = "") => `--color-${stops[stopIndex]}${suffix}-${scale}` - - addComponents({ - // tailwind componnent for .grad-bg-COLOR-9 - [`.grad-bg-${baseColor}-9`]: { - "--grad-bg-stop-a": `var(${color(9, 0)})`, - "--grad-bg-stop-b": `var(${color(9, 1)})`, - "--grad-bg-stop-c": `var(${color(9, 2)})`, - "--grad-bg-stop-d": `var(${color(9, 3)})`, - "--grad-bg-stop-e": `var(${color(9, 4)})`, - "--grad-bg-stops-default": `var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d)`, - "background-image": `linear-gradient(var(--grad-bg-direction, to right), var(--grad-bg-stops, var(--grad-bg-stops-default)))`, - - [dark]: { - "--grad-bg-stop-a": `var(${color(9, 0, "dark")})`, - "--grad-bg-stop-b": `var(${color(9, 1, "dark")})`, - "--grad-bg-stop-c": `var(${color(9, 2, "dark")})`, - "--grad-bg-stop-d": `var(${color(9, 3, "dark")})`, - "--grad-bg-stop-e": `var(${color(9, 4, "dark")})`, - } - }, - // tailwind component for .grad-bg-COLOR-9-alpha - [`.grad-bg-${baseColor}-9-alpha`]: { - "--grad-bg-stop-a": `var(${color(9, 0)})`, - "--grad-bg-stop-b": `var(${color(9, 1)})`, - "--grad-bg-stop-c": `var(${color(9, 2)})`, - "--grad-bg-stop-d": `var(${color(9, 3)})`, - "--grad-bg-stop-e": `var(${color(9, 4)})`, - "--grad-bg-stops-default": `var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d)`, - "background-image": `linear-gradient(var(--grad-bg-direction, to right), var(--grad-bg-stops, var(--grad-bg-stops-default)))`, - - [dark]: { - "--grad-bg-stop-a": `var(${color(9, 0, "dark")})`, - "--grad-bg-stop-b": `var(${color(9, 1, "dark")})`, - "--grad-bg-stop-c": `var(${color(9, 2, "dark")})`, - "--grad-bg-stop-d": `var(${color(9, 3, "dark")})`, - "--grad-bg-stop-e": `var(${color(9, 4, "dark")})`, - } - }, - }) - }) -}) - function getDarkSelector(config) { const darkMode = config("darkMode"); const prefix = config("prefix"); @@ -173,14 +83,6 @@ module.exports = { { pattern: /bg-(gray|red|yellow|green|blue|orange|indigo|rose|purple|pink)-(100|200|300|400|500|600|700|800|900)/ }, { pattern: /text-(gray|red|yellow|green|blue|orange|indigo|rose|purple|pink)-(100|200|300|400|500|600|700|800|900)/ }, { pattern: /columns-([1-9]|1[0-2])|(auto|3xs|2xs|xs|sm|md|lg|xl)|([2-7]xl)/ }, - { pattern: /bg-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ }, - { pattern: /shadow-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ }, - { pattern: /text-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ }, - { pattern: /ring-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ }, - { pattern: /from-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ }, - { pattern: /via-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ }, - { pattern: /to-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ }, - { pattern: /border-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(4|5|6|7|8)/ }, ], plugins: [ require('@tailwindcss/forms'), @@ -188,7 +90,6 @@ module.exports = { require('@tailwindcss/aspect-ratio'), require('@tailwindcss/line-clamp'), require('tailwind-capitalize-first-letter'), - addGradientColors, exposeColorsToCssVars ], theme: {