mirror of
https://github.com/logseq/logseq.git
synced 2026-02-01 22:47:36 +00:00
Customizable overrides
This commit is contained in:
Ben Yorke
@@ -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)',
|
||||
@@ -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] || {}
|
||||
|
||||
@@ -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))',
|
||||
@@ -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,
|
||||
@@ -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"),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user