fix(focus): uniform focus outline accros components

shuriken-ui · Oct 18, 2023 · fa4c017 · fa4c017
1 parent b078396
commit fa4c017
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 34 deletions.
diff --git a/src/plugins/components/button-close/index.ts b/src/plugins/components/button-close/index.ts
@@ -69,7 +69,7 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}button-close`]: {
-          [`@apply flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]:
+          [`@apply ${prefix}focus flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]:
             {},
 
           [`.${prefix}button-icon`]: {

diff --git a/src/plugins/components/button-icon/index.ts b/src/plugins/components/button-icon/index.ts
@@ -83,7 +83,7 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}button-icon`]: {
-          [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline outline-none transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]:
+          [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]:
             {},
 
           [`&.${prefix}button-small`]: {

diff --git a/src/plugins/components/checkbox/index.ts b/src/plugins/components/checkbox/index.ts
@@ -117,18 +117,22 @@ export default plugin.withOptions(
             [`@apply text-${config.error.text} ms-1 inline-block font-${config.error.font} text-${config.error.textSixe}`]:
               {},
           },
-          [`&.${prefix}checkbox-rounded .${prefix}checkbox-inner`]: {
-            [`@apply rounded`]: {},
-          },
-          [`&.${prefix}checkbox-smooth .${prefix}checkbox-inner`]: {
-            [`@apply rounded-${config.rounded.smooth}`]: {},
-          },
-          [`&.${prefix}checkbox-curved .${prefix}checkbox-inner`]: {
-            [`@apply rounded-${config.rounded.curved}`]: {},
-          },
-          [`&.${prefix}checkbox-full .${prefix}checkbox-inner`]: {
-            [`@apply rounded-${config.rounded.full}`]: {},
-          },
+          [`&.${prefix}checkbox-rounded .${prefix}checkbox-outer, &.${prefix}checkbox-rounded .${prefix}checkbox-inner`]:
+            {
+              [`@apply rounded`]: {},
+            },
+          [`&.${prefix}checkbox-smooth .${prefix}checkbox-outer, &.${prefix}checkbox-smooth .${prefix}checkbox-inner`]:
+            {
+              [`@apply rounded-${config.rounded.smooth}`]: {},
+            },
+          [`&.${prefix}checkbox-curved .${prefix}checkbox-outer, &.${prefix}checkbox-curved .${prefix}checkbox-inner`]:
+            {
+              [`@apply rounded-${config.rounded.curved}`]: {},
+            },
+          [`&.${prefix}checkbox-full .${prefix}checkbox-outer, &.${prefix}checkbox-full .${prefix}checkbox-inner`]:
+            {
+              [`@apply rounded-${config.rounded.full}`]: {},
+            },
           [`&.${prefix}checkbox-default`]: {
             [`@apply text-${config.default.text} dark:text-${config.default.textDark}`]:
               {},

diff --git a/src/plugins/components/dropdown-item/index.ts b/src/plugins/components/dropdown-item/index.ts
@@ -43,7 +43,7 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}dropdown-item`]: {
-          [`@apply flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]:
+          [`@apply ${prefix}focus flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]:
             {},
 
           [`.${prefix}item-content`]: {

diff --git a/src/plugins/components/focus/index.ts b/src/plugins/components/focus/index.ts
@@ -4,7 +4,7 @@ import { type PluginOption, defaultPluginOptions } from '../../options'
 
 const defaultFocusConfig = {
   offset: '2',
-  width: '1',
+  width: '2',
   style: 'dashed',
   color: 'muted-300',
   colorDark: 'muted-600',

diff --git a/src/plugins/components/input-file-regular/index.ts b/src/plugins/components/input-file-regular/index.ts
@@ -115,7 +115,7 @@ export default plugin.withOptions(
             [`@apply relative`]: {},
           },
           [`.${prefix}input-file-inner`]: {
-            [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75`]:
+            [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} disabled:cursor-not-allowed disabled:opacity-75`]:
               {},
           },
           [`.${prefix}input-file-addon`]: {

diff --git a/src/plugins/components/input-file/index.ts b/src/plugins/components/input-file/index.ts
@@ -99,7 +99,7 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}input-file`]: {
-          [`@apply relative block`]: {},
+          [`@apply relative block ${prefix}focus`]: {},
 
           [`&.${prefix}input-file-drop`]: {
             [`@apply relative h-${config.drop.size} border-dashed border-2 border-${config.drop.border} dark:border-${config.drop.borderDark} hover:border-${config.drop.borderHover} dark:hover:border-${config.drop.borderHoverDark} bg-${config.drop.bg} dark:bg-${config.drop.bgDark} flex justify-center items-center transition-colors duration-${config.drop.duration}`]:
@@ -155,7 +155,7 @@ export default plugin.withOptions(
                 {},
             },
             [`.${prefix}combo-input`]: {
-              [`@apply block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]:
+              [`@apply outline-none block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]:
                 {},
             },
           },

diff --git a/src/plugins/components/message/index.ts b/src/plugins/components/message/index.ts
@@ -203,7 +203,7 @@ export default plugin.withOptions(
               {},
           },
           [`.${prefix}message-close`]: {
-            [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]:
+            [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]:
               {},
             [`.${prefix}close-icon`]: {
               [`@apply h-${config.messageClose.iconSize} w-${config.messageClose.iconSize}`]:

diff --git a/src/plugins/components/snack/index.ts b/src/plugins/components/snack/index.ts
@@ -72,7 +72,7 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}snack`]: {
-          [`@apply ${prefix}focus inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent overflow-hidden`]:
+          [`@apply inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent`]:
             {},
 
           [`.${prefix}snack-icon`]: {

diff --git a/src/plugins/components/snack/snack.component.ts b/src/plugins/components/snack/snack.component.ts
@@ -52,7 +52,7 @@ export const Snack = ({
       ${ButtonClose({
         shape: 'full',
         classes: {
-          wrapper: 'nui-snack-button',
+          wrapper: 'nui-snack-button scale-75',
         },
       })}
     </div>

diff --git a/src/plugins/components/switch-ball/index.ts b/src/plugins/components/switch-ball/index.ts
@@ -69,14 +69,15 @@ export default plugin.withOptions(
           [`@apply flex cursor-pointer items-center`]: {},
 
           [`.${prefix}switch-ball-outer`]: {
-            [`@apply relative block`]: {},
+            [`@apply ${prefix}focus relative block rounded-${config.handle.rounded}`]:
+              {},
           },
           [`.${prefix}switch-ball-handle`]: {
             [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute start-0.5 top-1/2 z-10 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition focus:w-6`]:
               {},
           },
           [`.${prefix}switch-ball-track`]: {
-            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]:
+            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]:
               {},
           },
           [`.${prefix}switch-ball-icon`]: {
@@ -107,10 +108,6 @@ export default plugin.withOptions(
               [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]:
                 {},
             },
-            [`&:checked ~ .${prefix}switch-ball-track`]: {
-              [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]:
-                {},
-            },
             [`&:checked ~ .${prefix}switch-ball-icon`]: {
               [`@apply -translate-y-1/2 opacity-100`]: {},
             },

diff --git a/src/plugins/components/switch-thin/index.ts b/src/plugins/components/switch-thin/index.ts
@@ -64,14 +64,15 @@ export default plugin.withOptions(
           [`@apply flex cursor-pointer items-center`]: {},
 
           [`.${prefix}switch-thin-outer`]: {
-            [`@apply relative block h-4`]: {},
+            [`@apply ${prefix}focus relative block h-4 rounded-${config.handle.rounded}`]:
+              {},
           },
           [`.${prefix}switch-thin-handle`]: {
             [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute -start-1 top-1/2 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition`]:
               {},
           },
           [`.${prefix}switch-thin-track`]: {
-            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]:
+            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]:
               {},
           },
           [`.${prefix}switch-thin-single-label`]: {
@@ -98,10 +99,6 @@ export default plugin.withOptions(
               [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]:
                 {},
             },
-            [`&:checked ~ .${prefix}switch-thin-track`]: {
-              [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]:
-                {},
-            },
           },
           [`&.${prefix}switch-thin-primary .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]:
             {