Skip to content

Commit

Permalink
feat: var
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaskang
jaskang committed Apr 29, 2024
1 parent ebb7382 commit 0676b4b
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 11 deletions.
69 changes: 66 additions & 3 deletions preset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,73 @@ function extractColorVars(colorObj: any, scope = ''): Record<string, string> {
}

const varPlugin: Plugin = {
handler: ({ addBase, theme }) => {
handler: ({ addBase, theme, config }) => {
let [mode, className = '.dark'] = ([] as any[]).concat(config('darkMode', 'media'))
if (mode === false) {
mode = 'media'
}
const darkContext = mode === 'media' ? '@media (prefers-color-scheme: dark)' : `:is(${className})`

const all = extractColorVars(theme('colors'))

// .theme-blue {
// --background: 0 0% 100%;
// --foreground: 222.2 84% 4.9%;
// --muted: 210 40% 96.1%;
// --muted-foreground: 215.4 16.3% 46.9%;
// --popover: 0 0% 100%;
// --popover-foreground: 222.2 84% 4.9%;
// --card: 0 0% 100%;
// --card-foreground: 222.2 84% 4.9%;
// --border: 214.3 31.8% 91.4%;
// --input: 214.3 31.8% 91.4%;
// --primary: 221.2 83.2% 53.3%;
// --primary-foreground: 210 40% 98%;
// --secondary: 210 40% 96.1%;
// --secondary-foreground: 222.2 47.4% 11.2%;
// --accent: 210 40% 96.1%;
// --accent-foreground: 222.2 47.4% 11.2%;
// --destructive: 0 84.2% 60.2%;
// --destructive-foreground: 210 40% 98%;
// --ring: 221.2 83.2% 53.3%;
// --radius:
// }

// .dark .theme-blue {
// --background: 222.2 84% 4.9%;
// --foreground: 210 40% 98%;
// --muted: 217.2 32.6% 17.5%;
// --muted-foreground: 215 20.2% 65.1%;
// --popover: 222.2 84% 4.9%;
// --popover-foreground: 210 40% 98%;
// --card: 222.2 84% 4.9%;
// --card-foreground: 210 40% 98%;
// --border: 217.2 32.6% 17.5%;
// --input: 217.2 32.6% 17.5%;
// --primary: 217.2 91.2% 59.8%;
// --primary-foreground: 222.2 47.4% 11.2%;
// --secondary: 217.2 32.6% 17.5%;
// --secondary-foreground: 210 40% 98%;
// --accent: 217.2 32.6% 17.5%;
// --accent-foreground: 210 40% 98%;
// --destructive: 0 62.8% 30.6%;
// --destructive-foreground: 210 40% 98%;
// --ring: 224.3 76.3% 48%
// }
addBase({
':root': all,
':root': {
...all,
'--t-primary': theme('colors.primary.500'),
'--t-border': theme('colors.gray.200'),
'--t-input-focus': theme('colors.gray.300'),
'--t-input-bg': theme('colors.gray.200'),
},
[darkContext]: {
'--t-primary': theme('colors.primary.500'),
'--t-border': theme('colors.gray.700'),
'--t-input-focus': theme('colors.gray.800'),
'--t-input-bg': theme('colors.gray.700'),
},
})
},
}
Expand All @@ -57,7 +120,7 @@ export default {
plugins: [
varPlugin,
{
handler: ({ addUtilities, matchUtilities, matchComponents, theme, config }) => {
handler: ({ addUtilities, matchUtilities, addBase, matchComponents, theme, config }) => {
let [mode, className = '.dark'] = ([] as any[]).concat(config('darkMode', 'media'))
if (mode === false) {
mode = 'media'
Expand Down
2 changes: 1 addition & 1 deletion src/Input/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ defineExpose({
</script>
<template>
<div
class="flex h-9 items-center rounded-md bg-white shadow-sm input-border focus-within:z-10 focus-within:input-border-ring data-[disabled='true']:cursor-not-allowed data-[disabled='true']:bg-gray-50 data-[disabled='true']:opacity-60 dark:bg-gray-800"
class="flex h-9 items-center rounded-md bg-transparent shadow-sm input-border focus-within:z-10 focus-within:input-border-ring data-[disabled='true']:cursor-not-allowed data-[disabled='true']:opacity-60"
:class="[
{
normal: 'focus-within:input-border-color-primary',
Expand Down
16 changes: 9 additions & 7 deletions src/Textarea/Textarea.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,18 @@ const onInput = (e: Event) => {
</script>
<template>
<textarea
class="relative flex w-full appearance-none overflow-y-scroll rounded-md bg-transparent bg-white py-1.5 pl-3 pr-0 text-sm leading-[1.375rem] scrollbar input-border placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800"
class="relative flex w-full appearance-none overflow-y-scroll rounded-md bg-transparent py-1.5 pl-3 pr-0 text-sm leading-[1.375rem] scrollbar input-border placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
:class="[
noBorder
? 'input-border-color-transparent dark:input-border-color-transparent'
: {
normal: 'focus:input-border-ring focus:input-border-color-primary',
danger: 'input-border-color-danger focus:input-border-ring dark:input-border-color-danger',
success: 'input-border-color-success focus:input-border-ring dark:input-border-color-success',
warning: 'input-border-color-warning focus:input-border-ring dark:input-border-color-warning',
}[props.status],
: 'bg-white focus:input-border-ring dark:bg-gray-900',
!noBorder &&
{
normal: ' focus:input-border-color-primary',
danger: 'input-border-color-danger dark:input-border-color-danger',
success: 'input-border-color-success dark:input-border-color-success',
warning: 'input-border-color-warning dark:input-border-color-warning',
}[props.status],
// noBorder ? 'focus:ring-0' : BUILTIN_CLASS.focusRing,
]"
:style="{
Expand Down

0 comments on commit 0676b4b

Please sign in to comment.