fix(presets): support dark ring-offset-color

This commit is contained in:
Benjamin Canac
2022-02-10 12:00:34 +01:00
parent 185273f3e9
commit a9f1d937bc
2 changed files with 13 additions and 13 deletions

View File

@@ -20,7 +20,7 @@ const colors = [
]
const button = {
base: 'font-medium focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
base: 'font-medium focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus:ring-offset-white dark:focus:ring-offset-black',
size: {
xxs: 'text-xs',
xs: 'text-xs',
@@ -206,7 +206,7 @@ const select = {
const radio = {
wrapper: 'relative flex items-start',
base: 'h-4 w-4 text-primary-600 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 u-border-gray-300 dark:checked:border-primary-600 disabled:opacity-50 disabled:cursor-not-allowed',
base: 'h-4 w-4 text-primary-600 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 focus:ring-offset-white dark:focus:ring-offset-black u-border-gray-300 dark:checked:border-primary-600 disabled:opacity-50 disabled:cursor-not-allowed',
label: 'font-medium u-text-gray-700',
required: 'text-red-400',
help: 'u-text-gray-500'
@@ -222,7 +222,7 @@ const card = {
background: 'u-bg-white',
border: 'u-border-gray-200',
ring: 'ring-1 u-ring-gray-200',
shadow: 'shadow',
shadow: '',
body: 'px-4 py-5 sm:p-6',
header: 'px-4 py-5 sm:px-6',
footer: 'px-4 py-4 sm:px-6'
@@ -233,7 +233,7 @@ const container = {
}
const toggle = {
base: 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
base: 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 focus:ring-offset-white dark:focus:ring-offset-black',
active: 'bg-primary-600',
inactive: 'u-bg-gray-200',
container: {

View File

@@ -3,22 +3,22 @@ import preset from './default'
const badge = {
variant: {
primary: 'bg-gray-800 text-white',
secondary: 'bg-white text-gray-700'
primary: 'u-bg-gray-800 u-text-white',
secondary: 'u-bg-white u-text-gray-700'
}
}
const button = {
variant: {
primary: 'border border-transparent text-white bg-gray-800 hover:bg-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900',
secondary: 'border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900',
link: 'border border-transparent text-gray-900 hover:underline focus:underline'
primary: 'border border-transparent u-text-white u-bg-gray-800 hover:u-bg-gray-900 focus:ring-2 focus:ring-offset-2 focus:u-ring-gray-900',
secondary: 'border u-border-gray-300 u-text-gray-700 u-bg-white hover:u-bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:u-ring-gray-900',
link: 'border border-transparent u-text-gray-900 hover:underline focus:underline'
}
}
const input = {
appearance: {
default: 'focus:ring-1 focus:ring-gray-900 focus:border-gray-900 border border-gray-300 rounded-md shadow-sm'
default: 'focus:ring-1 focus:u-ring-gray-900 focus:u-border-gray-900 border u-border-gray-300 rounded-md shadow-sm'
}
}
@@ -31,7 +31,7 @@ const select = {
}
const radio = {
base: 'h-4 w-4 text-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 u-border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed'
base: 'h-4 w-4 u-text-gray-900 focus:ring-2 focus:ring-offset-2 focus:u-ring-gray-900 focus:ring-offset-white dark:focus:ring-offset-black u-border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed'
}
const checkbox = {
@@ -39,8 +39,8 @@ const checkbox = {
}
const toggle = {
base: 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2',
active: 'bg-gray-800'
base: 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:u-ring-gray-900 focus:ring-offset-white dark:focus:ring-offset-black',
active: 'u-bg-gray-800'
}
const container = {