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

nuxt · Feb 10, 2022 · a9f1d93 · a9f1d93 · vercel · Feb 10, 2022
1 parent 185273f
commit a9f1d93
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
@@ -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: {

diff --git a/src/runtime/presets/nuxt.ts b/src/runtime/presets/nuxt.ts
@@ -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,16 +31,16 @@ 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 = {
   base: `${radio.base} rounded`
 }
 
 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 = {