enhance(ui): polish the non-accent colors

This commit is contained in:
charlie
2024-01-22 18:41:55 +08:00
parent a0eab81c75
commit 8f0c4faec7
16 changed files with 428 additions and 487 deletions

View File

@@ -2,57 +2,6 @@ const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
const radix = require('@radix-ui/colors')
const lx = override => ({
'accent-01': 'or(' + override + ', --lx-accent-01, --ls-page-properties-background-color)',
'accent-02': 'or(' + override + ', --lx-accent-02, --ls-page-properties-background-color)',
'accent-03': 'or(' + override + ', --lx-accent-03, --ls-page-properties-background-color)',
'accent-04': 'or(' + override + ', --lx-accent-04, --ls-page-properties-background-color)',
'accent-05': 'or(' + override + ', --lx-accent-05, --rx-blue-03)',
'accent-06': 'or(' + override + ', --lx-accent-06, --rx-blue-04)',
'accent-07': 'or(' + override + ', --lx-accent-07, --rx-blue-05)',
'accent-08': 'or(' + override + ', --lx-accent-08, --rx-blue-06)',
'accent-09': 'or(' + override + ', --lx-accent-09, --rx-blue-07)',
'accent-10': 'or(' + override + ', --lx-accent-10, --rx-blue-08)',
'accent-11': 'or(' + override + ', --lx-accent-11, --rx-blue-09)',
'accent-12': 'or(' + override + ', --lx-accent-12, --rx-blue-10)',
'accent-01-alpha': 'or(' + override + ', --lx-accent-01-alpha, --ls-page-properties-background-color)',
'accent-02-alpha': 'or(' + override + ', --lx-accent-02-alpha, --ls-page-properties-background-color)',
'accent-03-alpha': 'or(' + override + ', --lx-accent-03-alpha, --ls-page-properties-background-color)',
'accent-04-alpha': 'or(' + override + ', --lx-accent-04-alpha, --ls-page-properties-background-color)',
'accent-05-alpha': 'or(' + override + ', --lx-accent-05-alpha, --color-blue-900)',
'accent-06-alpha': 'or(' + override + ', --lx-accent-06-alpha, --color-blue-800)',
'accent-07-alpha': 'or(' + override + ', --lx-accent-07-alpha, --color-blue-700)',
'accent-08-alpha': 'or(' + override + ', --lx-accent-08-alpha, --color-blue-600)',
'accent-09-alpha': 'or(' + override + ', --lx-accent-09-alpha, --color-blue-500)',
'accent-10-alpha': 'or(' + override + ', --lx-accent-10-alpha, --color-blue-400)',
'accent-11-alpha': 'or(' + override + ', --lx-accent-11-alpha, --color-blue-200)',
'accent-12-alpha': 'or(' + override + ', --lx-accent-12-alpha, --color-blue-50)',
'gray-01': 'or(' + override + ', --lx-gray-01, --ls-primary-background-color)',
'gray-02': 'or(' + override + ', --lx-gray-02, --ls-secondary-background-color)',
'gray-03': 'or(' + override + ', --lx-gray-03, --ls-tertiary-background-color)',
'gray-04': 'or(' + override + ', --lx-gray-04, --ls-quaternary-background-color)',
'gray-05': 'or(' + override + ', --lx-gray-05, --color-level-4)',
'gray-06': 'or(' + override + ', --lx-gray-06, --ls-block-bullet-border-color)',
'gray-07': 'or(' + override + ', --lx-gray-07, --ls-border-color)',
'gray-08': 'or(' + override + ', --lx-gray-08, --ls-secondary-border-color)',
'gray-09': 'or(' + override + ', --lx-gray-09, --color-level-5)',
'gray-10': 'or(' + override + ', --lx-gray-10, --ls-title-text-color)',
'gray-11': 'or(' + override + ', --lx-gray-11, --ls-primary-text-color)',
'gray-12': 'or(' + override + ', --lx-gray-12, --ls-secondary-text-color)',
'gray-01-alpha': 'or(' + override + ', --lx-gray-01-alpha, --ls-primary-background-color)',
'gray-02-alpha': 'or(' + override + ', --lx-gray-02-alpha, --ls-secondary-background-color)',
'gray-03-alpha': 'or(' + override + ', --lx-gray-03-alpha, --ls-tertiary-background-color)',
'gray-04-alpha': 'or(' + override + ', --lx-gray-04-alpha, --ls-quaternary-background-color)',
'gray-05-alpha': 'or(' + override + ', --lx-gray-05-alpha, --color-level-4)',
'gray-06-alpha': 'or(' + override + ', --lx-gray-06-alpha, --ls-block-bullet-color)',
'gray-07-alpha': 'or(' + override + ', --lx-gray-07-alpha, --ls-border-color)',
'gray-08-alpha': 'or(' + override + ', --lx-gray-08-alpha, --ls-secondary-border-color)',
'gray-09-alpha': 'or(' + override + ', --lx-gray-09-alpha, --color-level-5)',
'gray-10-alpha': 'or(' + override + ', --lx-gray-10-alpha, --color-level-6)',
'gray-11-alpha': 'or(' + override + ', --lx-gray-11-alpha, --ls-primary-text-color)',
'gray-12-alpha': 'or(' + override + ', --lx-gray-12-alpha, --ls-secondary-text-color)',
})
const accent = {
'DEFAULT': 'hsl(var(--accent))',
'base': 'hsl(var(--accent))',
@@ -194,8 +143,7 @@ module.exports = {
require('@tailwindcss/line-clamp'),
require('tailwind-capitalize-first-letter'),
require('tailwindcss-animate'),
exposeColorsToCssVars,
withOverride,
exposeColorsToCssVars
],
theme: {
extend: {