chore: rename ring-1 to ring

src/theme/badge.ts

@@ -27,7 +27,7 @@ export default (config: { colors: string[] }) => ({
   })), ...config.colors.map((color: string) => ({
     color,
     variant: 'outline',
-    class: `text-${color}-500 dark:text-${color}-400 ring-1 ring-inset ring-${color}-500 dark:ring-${color}-400`
+    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500 dark:ring-${color}-400`
   })), ...config.colors.map((color: string) => ({
     color,
     variant: 'soft',
@@ -35,15 +35,15 @@ export default (config: { colors: string[] }) => ({
   })), ...config.colors.map((color: string) => ({
     color,
     variant: 'subtle',
-    class: `bg-${color}-50 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring-1 ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
+    class: `bg-${color}-50 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
   })), {
     color: 'white',
     variant: 'solid',
-    class: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
+    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
   }, {
     color: 'gray',
     variant: 'solid',
-    class: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
+    class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
   }, {
     color: 'black',
     variant: 'solid',

src/theme/button.ts

@@ -84,7 +84,7 @@ export default (config: { colors: string[] }) => ({
   })), ...config.colors.map((color: string) => ({
     color,
     variant: 'outline',
-    class: `ring-1 ring-inset ring-current text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `ring ring-inset ring-current text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
   })), ...config.colors.map((color: string) => ({
     color,
     variant: 'soft',
@@ -100,7 +100,7 @@ export default (config: { colors: string[] }) => ({
   })), {
     color: 'white',
     variant: 'solid',
-    class: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    class: 'shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
   }, {
     color: 'white',
     variant: 'ghost',
@@ -108,7 +108,7 @@ export default (config: { colors: string[] }) => ({
   }, {
     color: 'gray',
     variant: 'solid',
-    class: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+    class: 'shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
   }, {
     color: 'gray',
     variant: 'ghost',

src/theme/tooltip.ts

@@ -1,6 +1,6 @@
 export default {
   slots: {
-    content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[tooltipSlideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltipSlideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltipSlideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltipSlideUp_200ms_ease-out]',
+    content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[tooltipSlideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltipSlideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltipSlideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltipSlideUp_200ms_ease-out]',
     arrow: 'fill-white dark:fill-gray-700'
   }
 }

test/components/__snapshots__/Badge.spec.ts.snap

@@ -4,11 +4,11 @@ exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex i
 
 exports[`Badge > renders with color black correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-white dark:text-gray-900 bg-gray-900 dark:bg-white">Badge</span>"`;
 
-exports[`Badge > renders with color gray correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">Badge</span>"`;
+exports[`Badge > renders with color gray correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">Badge</span>"`;
 
 exports[`Badge > renders with color green correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-green-500 dark:bg-green-400 text-white dark:text-gray-900">Badge</span>"`;
 
-exports[`Badge > renders with color white correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">Badge</span>"`;
+exports[`Badge > renders with color white correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">Badge</span>"`;
 
 exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Default slot</span>"`;
 
@@ -16,8 +16,8 @@ exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-md fo
 
 exports[`Badge > renders with size correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-sm px-2.5 py-1.5 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
 
-exports[`Badge > renders with variant link correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring-1 ring-inset ring-primary-500/25 dark:ring-primary-400/25">Badge</span>"`;
+exports[`Badge > renders with variant link correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">Badge</span>"`;
 
-exports[`Badge > renders with variant outline correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-primary-500 dark:text-primary-400 ring-1 ring-inset ring-primary-500 dark:ring-primary-400">Badge</span>"`;
+exports[`Badge > renders with variant outline correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500 dark:ring-primary-400">Badge</span>"`;
 
 exports[`Badge > renders with variant soft correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">Badge</span>"`;

test/components/__snapshots__/Button.spec.ts.snap

@@ -132,7 +132,7 @@ exports[`Button > renders with variant link correctly 1`] = `
 `;
 
 exports[`Button > renders with variant outline correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-x-1.5 ring-1 ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-x-1.5 ring ring-inset ring-current text-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
   <!--v-if--><span class="">Button</span>
   <!--v-if-->
 </button>"