Skip to content

Commit

Permalink
Customizable overrides
Browse files Browse the repository at this point in the history
  • Loading branch information
@bendyorke
bendyorke committed Nov 7, 2023
1 parent f68beb4 commit 863c4f9
Show file tree
Hide file tree
Showing 5 changed files with 218 additions and 294 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -31,7 +31,7 @@
"shadow-cljs": "2.17.5",
"stylelint": "^13.8.0",
"stylelint-config-standard": "^20.0.0",
"tailwindcss": "3.1.8",
"tailwindcss": "3.3.5",
"typescript": "^4.4.3"
},
"scripts": {
Expand Down Expand Up @@ -90,9 +90,9 @@
"@capacitor/splash-screen": "^5.0.0",
"@capacitor/status-bar": "^5.0.0",
"@capawesome/capacitor-background-task": "^5.0.0",
"@capgo/capacitor-navigation-bar": "^6.0.0",
"@excalidraw/excalidraw": "0.15.3",
"@highlightjs/cdn-assets": "10.4.1",
"@capgo/capacitor-navigation-bar": "^6.0.0",
"@isomorphic-git/lightning-fs": "^4.6.0",
"@logseq/capacitor-file-sync": "5.0.1",
"@logseq/diff-merge": "0.2.2",
Expand Down
7 changes: 4 additions & 3 deletions src/main/frontend/components/cmdk.cljs
View file
Expand Up @@ -235,7 +235,7 @@
:icon-theme :gray
:text file
:file-path file))
files)]
files)]
(swap! !results update group merge {:status :success :items items}))))

(defmethod load-results :recents [group state]
Expand Down Expand Up @@ -560,8 +560,9 @@
(rum/use-effect! (fn []
(js/setTimeout #(when (some-> input-ref deref) (.focus @input-ref)) 0))
[])
[:div {:style {:background "var(--lx-gray-02)"
:border-bottom "1px solid var(--lx-gray-07)"}}
; [:div {:style {:background "var(--lx-gray-02)"
; :border-bottom "1px solid var(--lx-gray-07)"}}]
[:div {:class "with-[bg-cmdk-input-row] bg-gray-02 border border-1 border-gray-07"}
[:input#search
{:class "text-xl bg-transparent border-none w-full outline-none px-3 py-3"
:placeholder (input-placeholder false)
Expand Down
71 changes: 0 additions & 71 deletions src/main/frontend/components/header.cljs
View file
Expand Up @@ -79,77 +79,6 @@
"platform="
(js/encodeURIComponent platform))))

#_(shui/dialog-v1 {:trigger (fn [{:keys [toggle-dialog! dialog]}]
[:div.relative
[:button.button.icon.toolbar-dots-btn
{:on-click toggle-dialog!
:title (t :header/more)}
(ui/icon "dots" {:size ui/icon-size})]
(dialog)])
:groups [[:<> [:div.pl-3.pb-1.text-xxs.font-semibold.text-gray-11-alpha {:class "pt-0.5"} "General"]
(shui/list-item-v1 {:text (t :settings)
:compact true
:icon "settings"
:icon-theme :gray
; :info "Open settings"
:shortcut "cmd+s"
:on-click state/open-settings!}
(make-shui-context nil nil))
(shui/list-item-v1 {:text (t :plugins)
:compact true
:icon "apps"
:icon-theme :gray
:shortcut "g a"
:on-click #(plugin-handler/goto-plugins-dashboard!)}
(make-shui-context nil nil))
(shui/list-item-v1 {:text (t :themes)
:compact true
:icon "palette"
:icon-theme :gray
:shortcut "g p"
:on-click #(plugins/open-select-theme!)}
(make-shui-context nil nil))]
[:<> [:div.pl-3.pb-1.pt-2.text-xxs.font-semibold.text-gray-11-alpha "Publishing"]
(shui/list-item-v1 {:text "Publishing settings"
:compact true
:icon-theme :gray
:icon "bulb"}
(make-shui-context nil nil))
(shui/list-item-v1 {:text "Copy page URL"
:compact true
:icon-theme :gray
:icon "bulb"}
(make-shui-context nil nil))
(shui/list-item-v1 {:text "Publish"
:compact true
:header "Last published: 2 days ago"
:icon-theme :gray
:icon "bulb"}
(make-shui-context nil nil))]
[:<> [:div.pl-3.pb-1.pt-2.text-xxs.font-semibold.text-gray-11-alpha "Graph management"]
(shui/list-item-v1 {:text (t :export-graph)
:compact true
:icon "database-export"
:icon-theme :color
:on-click #(state/set-modal! export/export)}
(make-shui-context nil nil))
(shui/list-item-v1 {:text (t :import)
:compact true
:icon "file-upload"
:icon-theme :color
:on-click #(js/alert "set href")}
(make-shui-context nil nil))]
[:<> [:div.pl-3.pb-1.pt-2.text-xxs.font-semibold.text-gray-11-alpha "Account"]
(shui/list-item-v1 {:text "Logout"
:compact true
:icon "logout"
; :shortcut "shift+cmd+x"
:icon-theme :gradient
:value "ben@logseq.com"
:on-click #(user-handler/logout)}
(make-shui-context nil nil))]]}
(make-shui-context nil nil))

(rum/defc dropdown-menu < rum/reactive
< {:key-fn #(identity "repos-dropdown-menu")}
[{:keys [current-repo t]}]
Expand Down
222 changes: 85 additions & 137 deletions tailwind.config.js
View file
@@ -1,56 +1,57 @@
const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
const radix = require('@radix-ui/colors')

const lx = {
'accent-01': 'var(--lx-accent-01)',
'accent-02': 'var(--lx-accent-02)',
'accent-03': 'var(--lx-accent-03)',
'accent-04': 'var(--lx-accent-04)',
'accent-05': 'var(--lx-accent-05)',
'accent-06': 'var(--lx-accent-06)',
'accent-07': 'var(--lx-accent-07)',
'accent-08': 'var(--lx-accent-08)',
'accent-09': 'var(--lx-accent-09)',
'accent-10': 'var(--lx-accent-10)',
'accent-11': 'var(--lx-accent-11)',
'accent-12': 'var(--lx-accent-12)',
'accent-01-alpha': 'var(--lx-accent-01-alpha)',
'accent-02-alpha': 'var(--lx-accent-02-alpha)',
'accent-03-alpha': 'var(--lx-accent-03-alpha)',
'accent-04-alpha': 'var(--lx-accent-04-alpha)',
'accent-05-alpha': 'var(--lx-accent-05-alpha)',
'accent-06-alpha': 'var(--lx-accent-06-alpha)',
'accent-07-alpha': 'var(--lx-accent-07-alpha)',
'accent-08-alpha': 'var(--lx-accent-08-alpha)',
'accent-09-alpha': 'var(--lx-accent-09-alpha)',
'accent-10-alpha': 'var(--lx-accent-10-alpha)',
'accent-11-alpha': 'var(--lx-accent-11-alpha)',
'accent-12-alpha': 'var(--lx-accent-12-alpha)',
'gray-01': 'var(--lx-gray-01)',
'gray-02': 'var(--lx-gray-02)',
'gray-03': 'var(--lx-gray-03)',
'gray-04': 'var(--lx-gray-04)',
'gray-05': 'var(--lx-gray-05)',
'gray-06': 'var(--lx-gray-06)',
'gray-07': 'var(--lx-gray-07)',
'gray-08': 'var(--lx-gray-08)',
'gray-09': 'var(--lx-gray-09)',
'gray-10': 'var(--lx-gray-10)',
'gray-11': 'var(--lx-gray-11)',
'gray-12': 'var(--lx-gray-12)',
'gray-01-alpha': 'var(--lx-gray-01-alpha)',
'gray-02-alpha': 'var(--lx-gray-02-alpha)',
'gray-03-alpha': 'var(--lx-gray-03-alpha)',
'gray-04-alpha': 'var(--lx-gray-04-alpha)',
'gray-05-alpha': 'var(--lx-gray-05-alpha)',
'gray-06-alpha': 'var(--lx-gray-06-alpha)',
'gray-07-alpha': 'var(--lx-gray-07-alpha)',
'gray-08-alpha': 'var(--lx-gray-08-alpha)',
'gray-09-alpha': 'var(--lx-gray-09-alpha)',
'gray-10-alpha': 'var(--lx-gray-10-alpha)',
'gray-11-alpha': 'var(--lx-gray-11-alpha)',
'gray-12-alpha': 'var(--lx-gray-12-alpha)',
}
const lx = override => ({
'accent-01': 'or(' + override + ', --lx-accent-01)',
'accent-02': 'or(' + override + ', --lx-accent-02)',
'accent-03': 'or(' + override + ', --lx-accent-03)',
'accent-04': 'or(' + override + ', --lx-accent-04)',
'accent-05': 'or(' + override + ', --lx-accent-05)',
'accent-06': 'or(' + override + ', --lx-accent-06)',
'accent-07': 'or(' + override + ', --lx-accent-07)',
'accent-08': 'or(' + override + ', --lx-accent-08)',
'accent-09': 'or(' + override + ', --lx-accent-09)',
'accent-10': 'or(' + override + ', --lx-accent-10)',
'accent-11': 'or(' + override + ', --lx-accent-11)',
'accent-12': 'or(' + override + ', --lx-accent-12)',
'accent-01-alpha': 'or(' + override + ', --lx-accent-01-alpha)',
'accent-02-alpha': 'or(' + override + ', --lx-accent-02-alpha)',
'accent-03-alpha': 'or(' + override + ', --lx-accent-03-alpha)',
'accent-04-alpha': 'or(' + override + ', --lx-accent-04-alpha)',
'accent-05-alpha': 'or(' + override + ', --lx-accent-05-alpha)',
'accent-06-alpha': 'or(' + override + ', --lx-accent-06-alpha)',
'accent-07-alpha': 'or(' + override + ', --lx-accent-07-alpha)',
'accent-08-alpha': 'or(' + override + ', --lx-accent-08-alpha)',
'accent-09-alpha': 'or(' + override + ', --lx-accent-09-alpha)',
'accent-10-alpha': 'or(' + override + ', --lx-accent-10-alpha)',
'accent-11-alpha': 'or(' + override + ', --lx-accent-11-alpha)',
'accent-12-alpha': 'or(' + override + ', --lx-accent-12-alpha)',
'gray-01': 'or(' + override + ', --lx-gray-01)',
'gray-02': 'or(' + override + ', --lx-gray-02)',
'gray-03': 'or(' + override + ', --lx-gray-03)',
'gray-04': 'or(' + override + ', --lx-gray-04)',
'gray-05': 'or(' + override + ', --lx-gray-05)',
'gray-06': 'or(' + override + ', --lx-gray-06)',
'gray-07': 'or(' + override + ', --lx-gray-07)',
'gray-08': 'or(' + override + ', --lx-gray-08)',
'gray-09': 'or(' + override + ', --lx-gray-09)',
'gray-10': 'or(' + override + ', --lx-gray-10)',
'gray-11': 'or(' + override + ', --lx-gray-11)',
'gray-12': 'or(' + override + ', --lx-gray-12)',
'gray-01-alpha': 'or(' + override + ', --lx-gray-01-alpha)',
'gray-02-alpha': 'or(' + override + ', --lx-gray-02-alpha)',
'gray-03-alpha': 'or(' + override + ', --lx-gray-03-alpha)',
'gray-04-alpha': 'or(' + override + ', --lx-gray-04-alpha)',
'gray-05-alpha': 'or(' + override + ', --lx-gray-05-alpha)',
'gray-06-alpha': 'or(' + override + ', --lx-gray-06-alpha)',
'gray-07-alpha': 'or(' + override + ', --lx-gray-07-alpha)',
'gray-08-alpha': 'or(' + override + ', --lx-gray-08-alpha)',
'gray-09-alpha': 'or(' + override + ', --lx-gray-09-alpha)',
'gray-10-alpha': 'or(' + override + ', --lx-gray-10-alpha)',
'gray-11-alpha': 'or(' + override + ', --lx-gray-11-alpha)',
'gray-12-alpha': 'or(' + override + ', --lx-gray-12-alpha)',
})

const accent = {
'01': 'var(--lx-accent-01)',
Expand Down Expand Up @@ -126,6 +127,27 @@ function exposeColorsToCssVars ({ addBase, theme }) {
})
}

const withOverride = plugin(function({ matchUtilities }) {
matchUtilities({
'or': (value, b) => {
// check if the value starts with "bg-"
if (value.startsWith('bg-')) {
return { [`--lx-bg-override`]: `var(--lx-${value})` }
}
// check if the value starts with "text-"
if (value.startsWith('text-')) {
return { [`--lx-text-override`]: `var(--lx-${value})` }
}
// check if the value starts with "border-"
if (value.startsWith('border-')) {
return { [`--lx-border-override`]: `var(--lx-${value})` }
}
}
}, {
values: {}
})
})

function buildColor(color, custom) {
const base = custom || colors[color] || {}

Expand Down Expand Up @@ -196,22 +218,11 @@ module.exports = {
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/line-clamp'),
require('tailwind-capitalize-first-letter'),
exposeColorsToCssVars
exposeColorsToCssVars,
withOverride,
],
theme: {
extend: {
// backgroundColor: {
// ...lx,
// },
// borderColor: {
// ...lx,
// },
// outlineColor: {
// ...lx,
// },
// textColor: {
// ...lx,
// },
backgroundImage: {
'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))',
'gradient-conic-bounce': 'conic-gradient(var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to), var(--tw-gradient-via), var(--tw-gradient-from))',
Expand All @@ -237,8 +248,17 @@ module.exports = {
'lsm': '600px',
'lmd': '728px',
'llg': '960px'
}
},
},
backgroundColor: {
...lx('--lx-bg-override'),
},
textColor: {
...lx('--lx-text-override'),
},
borderColor: {
...lx('--lx-border-override'),
},
},
colors: {
// Tailwind colors
gray: gray,
Expand All @@ -257,78 +277,6 @@ module.exports = {
current: 'currentColor',
transparent: 'transparent',
white: colors.white,

// Radix colors
// amber: buildColor("amber"),
// blue: buildColor("blue"),
// bronze: buildColor("bronze"),
// brown: buildColor("brown"),
// crimson: buildColor("crimson"),
// cyan: buildColor("cyan"),
// gold: buildColor("gold"),
// grass: buildColor("grass"),
// green: buildColor("green"),
// lime: buildColor("lime"),
// mauve: buildColor("mauve"),
// mint: buildColor("mint"),
// olive: buildColor("olive"),
// orange: buildColor("orange"),
// pink: buildColor("pink"),
// plum: buildColor("plum"),
// purple: buildColor("purple"),
// red: buildColor("red"),
// sage: buildColor("sage"),
// sand: buildColor("sand"),
// sky: buildColor("sky"),
// slate: buildColor("slate"),
// teal: buildColor("teal"),
// tomato: buildColor("tomato"),
// violet: buildColor("violet"),

// Custom colors
// gray: buildColor("gray", colors.neutral),
// yellow: buildColor("yellow", colors.amber),
// indigo: buildColor("indigo", {
// 50: '#f0f9ff',
// 100: '#e0f2fe',
// 200: '#bae6fd',
// 300: '#7dd3fc',
// 400: '#38bdf8',
// 500: '#0ea5e9',
// 600: '#0284c7',
// 700: '#005b8a',
// 800: '#075985',
// 900: '#0c4a6e',
// }),

// tomatodark: buildColor("tomatoDark"),
// reddark: buildColor("redDark"),
// crimsondark: buildColor("crimsonDark"),
// pinkdark: buildColor("pinkDark"),
// plumdark: buildColor("plumDark"),
// purpledark: buildColor("purpleDark"),
// violetdark: buildColor("violetDark"),
// skydark: buildColor("skyDark"),
// indigodark: buildColor("indigoDark"),
// bluedark: buildColor("blueDark"),
// cyandark: buildColor("cyanDark"),
// mintdark: buildColor("mintDark"),
// tealdark: buildColor("tealDark"),
// greendark: buildColor("greenDark"),
// limedark: buildColor("limeDark"),
// grassdark: buildColor("grassDark"),
// yellowdark: buildColor("yellowDark"),
// amberdark: buildColor("amberDark"),
// orangedark: buildColor("orangeDark"),
// browndark: buildColor("brownDark"),
// graydark: buildColor("grayDark"),
// mauvedark: buildColor("mauveDark"),
// slatedark: buildColor("slateDark"),
// sagedark: buildColor("sageDark"),
// olivedark: buildColor("oliveDark"),
// sanddark: buildColor("sandDark"),
// golddark: buildColor("goldDark"),
// bronzedark: buildColor("bronzeDark"),
}
}
}

0 comments on commit 863c4f9

Please sign in to comment.