unpreset / unocss-preset-theme

The dynamic theme presets for UnoCSS.
https://unocss-preset-theme.todev.cc
123 stars 11 forks source link

border color variables doesnt work #6

Closed ws-rush closed 1 year ago

ws-rush commented 1 year ago

first I loved really this preset, I moved to unocss after find this, I use tailwindcss variables in all of my projects, but this preset more better

I tried it today, it work very well but I have a problem, see this is my uno.config.js

import { presetForms } from '@julr/unocss-preset-forms'
import { defineConfig, presetUno } from 'unocss'
import { colors } from 'unocss/preset-mini'
import { presetTheme } from 'unocss-preset-theme'

export default defineConfig({
  theme: {
    colors: {
      color: {
        50: colors.blue['50'],
        100: colors.blue['100'],
        200: colors.blue['200'],
        300: colors.blue['300'],
        400: colors.blue['400'],
        500: colors.blue['500'],
        600: colors.blue['600'],
        700: colors.blue['700'],
        800: colors.blue['800'],
        900: colors.blue['900'],
      }
    },
  },
  rules: [
    // ['custom-rule', { color: 'red' }]
  ],
  shortcuts: {
    // 'custom-shortcut': 'text-lg text-orange hover:text-teal'
  },
  presets: [
    presetUno({
      dark: 'class'
    }),
    presetForms(),
    presetTheme({
      prefix: '--',
      theme: {
        primary: {
          colors: {
            color: {
              50: colors.blue['50'],
              100: colors.blue['100'],
              200: colors.blue['200'],
              300: colors.blue['300'],
              400: colors.blue['400'],
              500: colors.blue['500'],
              600: colors.blue['600'],
              700: colors.blue['700'],
              800: colors.blue['800'],
              900: colors.blue['900'],
            }
          }
        },
        secondary: {
          colors: {
            color: {
              50: colors.green['50'],
              100: colors.green['100'],
              200: colors.green['200'],
              300: colors.green['300'],
              400: colors.green['400'],
              500: colors.green['500'],
              600: colors.green['600'],
              700: colors.green['700'],
              800: colors.green['800'],
              900: colors.green['900'],
            }
          }
        },
        tertinary: {
          colors: {
            color: {
              50: colors.yellow['50'],
              100: colors.yellow['100'],
              200: colors.yellow['200'],
              300: colors.yellow['300'],
              400: colors.yellow['400'],
              500: colors.yellow['500'],
              600: colors.yellow['600'],
              700: colors.yellow['700'],
              800: colors.yellow['800'],
              900: colors.yellow['900'],
            }
          }
        },
        danger: {
          colors: {
            color: {
              50: colors.red['50'],
              100: colors.red['100'],
              200: colors.red['200'],
              300: colors.red['300'],
              400: colors.red['400'],
              500: colors.red['500'],
              600: colors.red['600'],
              700: colors.red['700'],
              800: colors.red['800'],
              900: colors.red['900'],
            }
          }
        }
      }
    })
  ]
})

when I use things like text-color-500 border-color-500 it work but with border border-color-500 does'nt work, and by the way border-green-500 work

I used it today with version 0.4.0

ws-rush commented 1 year ago

Notice: to make my code work I used border-$colors-color-500 , I wish you fix it coz I want use it with opacity opeator border-color-500/25

Dunqing commented 1 year ago

You should use border-color-color-500, because border-color is the rule.