Add native gradient support

deps/shui/shui-graph/pages/shui___components___button.md

@@ -0,0 +1 @@
+-

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})

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

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"]

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))

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);
+}

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))
+

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: {