Save dialog

This commit is contained in:
Ben Yorke
2023-10-16 20:39:04 +02:00
parent 2d659e8058
commit 9d6154937a
6 changed files with 276 additions and 71 deletions

View File

@@ -52,6 +52,61 @@ const lx = {
'gray-12-alpha': 'var(--lx-gray-12-alpha)',
}
const accent = {
'01': 'var(--lx-accent-01)',
'02': 'var(--lx-accent-02)',
'03': 'var(--lx-accent-03)',
'04': 'var(--lx-accent-04)',
'05': 'var(--lx-accent-05)',
'06': 'var(--lx-accent-06)',
'07': 'var(--lx-accent-07)',
'08': 'var(--lx-accent-08)',
'09': 'var(--lx-accent-09)',
'10': 'var(--lx-accent-10)',
'11': 'var(--lx-accent-11)',
'12': 'var(--lx-accent-12)',
'01-alpha': 'var(--lx-accent-01-alpha)',
'02-alpha': 'var(--lx-accent-02-alpha)',
'03-alpha': 'var(--lx-accent-03-alpha)',
'04-alpha': 'var(--lx-accent-04-alpha)',
'05-alpha': 'var(--lx-accent-05-alpha)',
'06-alpha': 'var(--lx-accent-06-alpha)',
'07-alpha': 'var(--lx-accent-07-alpha)',
'08-alpha': 'var(--lx-accent-08-alpha)',
'09-alpha': 'var(--lx-accent-09-alpha)',
'10-alpha': 'var(--lx-accent-10-alpha)',
'11-alpha': 'var(--lx-accent-11-alpha)',
'12-alpha': 'var(--lx-accent-12-alpha)',
}
const gray = {
...colors.gray,
'01': 'var(--lx-gray-01)',
'02': 'var(--lx-gray-02)',
'03': 'var(--lx-gray-03)',
'04': 'var(--lx-gray-04)',
'05': 'var(--lx-gray-05)',
'06': 'var(--lx-gray-06)',
'07': 'var(--lx-gray-07)',
'08': 'var(--lx-gray-08)',
'09': 'var(--lx-gray-09)',
'10': 'var(--lx-gray-10)',
'11': 'var(--lx-gray-11)',
'12': 'var(--lx-gray-12)',
'01-alpha': 'var(--lx-gray-01-alpha)',
'02-alpha': 'var(--lx-gray-02-alpha)',
'03-alpha': 'var(--lx-gray-03-alpha)',
'04-alpha': 'var(--lx-gray-04-alpha)',
'05-alpha': 'var(--lx-gray-05-alpha)',
'06-alpha': 'var(--lx-gray-06-alpha)',
'07-alpha': 'var(--lx-gray-07-alpha)',
'08-alpha': 'var(--lx-gray-08-alpha)',
'09-alpha': 'var(--lx-gray-09-alpha)',
'10-alpha': 'var(--lx-gray-10-alpha)',
'11-alpha': 'var(--lx-gray-11-alpha)',
'12-alpha': 'var(--lx-gray-12-alpha)',
}
function exposeColorsToCssVars ({ addBase, theme }) {
function extractColorVars (colorObj, colorGroup = '') {
return Object.keys(colorObj).reduce((vars, colorKey) => {
@@ -145,18 +200,18 @@ module.exports = {
],
theme: {
extend: {
backgroundColor: {
...lx,
},
borderColor: {
...lx,
},
outlineColor: {
...lx,
},
textColor: {
...lx,
},
// 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))',
@@ -186,7 +241,8 @@ module.exports = {
},
colors: {
// Tailwind colors
gray: colors.gray,
gray: gray,
accent: accent,
red: colors.red,
green: colors.green,
blue: colors.blue,