arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(module): allow CSS variables in tailwind colors (#2014)

Browse Source
This commit is contained in:
Dave Stewart
2024-09-16 14:15:04 +01:00
committed by GitHub
parent 68124de510
commit 7f50c7031f
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/runtime/plugins/colors.ts
View File

@@ -1,5 +1,5 @@
import { computed } from 'vue'
import { get, hexToRgb } from '../utils'
import { get, parseConfigValue } from '../utils'
import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
import colors from '#tailwind-config/theme/colors'
@@ -19,10 +19,10 @@ export default defineNuxtPlugin(() => {
}
return `:root {
${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${parseConfigValue(value)};`).join('\n')}
--color-primary-DEFAULT: var(--color-primary-500);
${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${parseConfigValue(value)};`).join('\n')}
}
.dark {

10
src/runtime/utils/index.ts
View File

@@ -41,6 +41,14 @@ export function mergeConfig<T> (strategy: Strategy, ...configs): T {
return defuTwMerge({}, ...configs) as T
}
const rxHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
export function parseConfigValue (value: string) {
return rxHex.test(value)
? hexToRgb(value)
: value
}
export function hexToRgb (hex: string) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
@@ -48,7 +56,7 @@ export function hexToRgb (hex: string) {
return r + r + g + g + b + b
})
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
const result = rxHex.exec(hex)
return result
? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
: null