feat(btn): keyboard focus styles added via focus-visible (#53)

ManUtopiK · jd-solanki · web-flow · commit a91805bab9e2 · 2022-11-02T22:36:31.000+05:30
Co-authored-by: JD Solanki &lt;jdsolanki0001@gmail.com&gt;
Co-authored-by: JD Solanki &lt;47495003+jd-solanki@users.noreply.github.com&gt;
diff --git a/packages/anu-vue/src/components/btn/ABtn.tsx b/packages/anu-vue/src/components/btn/ABtn.tsx
@@ -67,7 +67,7 @@ export const ABtn = defineComponent({
     )
 
     // FIX: ABtn gets full width if placed inside flex container
-    return () => <button style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]}>
+    return () => <button style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]} tabindex={props.disabled ? -1 : 0}>
       {props.icon ? <i class={props.icon}></i> : null}{slots.default?.()}{props.appendIcon ? <i class={props.appendIcon}></i> : null}
     </button>
   },
diff --git a/packages/anu-vue/src/composables/useLayer.ts b/packages/anu-vue/src/composables/useLayer.ts
@@ -65,12 +65,13 @@ export const useLayer = () => {
         const contrastColor = contrast(propColor)
 
         styles.push(`--a-layer-text: ${contrastColor}`)
+        styles.push(`--un-ring-color: ${propColor}`)
       }
     }
 
-    // If it's theme color => Use color's CSS var to `--a-layer-color`
+    // If it's theme color => Use color's CSS var to `--a-layer-color` and to ring color '--un-ring-color'
     else {
-      styles.push({ '--a-layer-color': `hsla(var(--a-${propColor}),var(--un-bg-opacity))` })
+      styles.push({ '--a-layer-color': `hsla(var(--a-${propColor}),var(--un-bg-opacity))` }, { '--un-ring-color': `hsl(var(--a-${propColor}))` })
 
       // ℹ️ We need to set un-bg-opacity just like UnoCSS class
       classes.push('[--un-bg-opacity:1]')
diff --git a/packages/anu-vue/src/presets/theme-default/index.ts b/packages/anu-vue/src/presets/theme-default/index.ts
@@ -78,8 +78,8 @@ const themeShortcuts: Exclude<Preset['shortcuts'], undefined> = [
     'a-base-input-interactive': 'all-[.a-base-input-child]-placeholder:transition all-[.a-base-input-child]-placeholder:duration-250 all-[.a-base-input-child]-placeholder:ease all-[.a-base-input-child:focus]-placeholder-translate-x-1',
 
     // 👉 Button
-    'a-btn': 'em:spacing:px-4 font-medium em:spacing:rounded-lg em:spacing:gap-x-2 em:spacing:h-10',
-    'a-btn-icon-only': 'font-medium em:spacing:rounded-lg em:spacing:h-10 em:spacing:w-10 i:em:text-lg',
+    'a-btn': 'em:spacing:px-4 font-medium em:spacing:rounded-lg em:spacing:gap-x-2 em:spacing:h-10 focus-visible:ring-2 ring-offset-2',
+    'a-btn-icon-only': 'font-medium em:spacing:rounded-lg em:spacing:h-10 em:spacing:w-10 i:em:text-lg focus-visible:ring-2 ring-offset-2',
 
     // 👉 Card
     'a-card': 'em:spacing:rounded-lg shadow-lg',

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ export const ABtn = defineComponent({`
`67`	`67`	`)`
`68`	`68`
`69`	`69`	`// FIX: ABtn gets full width if placed inside flex container`
`70`		`- return () => <button style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]}>`
	`70`	`+ return () => <button style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]} tabindex={props.disabled ? -1 : 0}>`
`71`	`71`	`{props.icon ? <i class={props.icon}></i> : null}{slots.default?.()}{props.appendIcon ? <i class={props.appendIcon}></i> : null}`
`72`	`72`	`</button>`
`73`	`73`	`},`
Original file line number	Diff line number	Diff line change
`@@ -65,12 +65,13 @@ export const useLayer = () => {`
`65`	`65`	`const contrastColor = contrast(propColor)`
`66`	`66`
`67`	`67`	styles.push(`--a-layer-text: ${contrastColor}`)
	`68`	+ styles.push(`--un-ring-color: ${propColor}`)
`68`	`69`	`}`
`69`	`70`	`}`
`70`	`71`
`71`		- // If it's theme color => Use color's CSS var to `--a-layer-color`
	`72`	+ // If it's theme color => Use color's CSS var to `--a-layer-color` and to ring color '--un-ring-color'
`72`	`73`	`else {`
`73`		- styles.push({ '--a-layer-color': `hsla(var(--a-${propColor}),var(--un-bg-opacity))` })
	`74`	+ styles.push({ '--a-layer-color': `hsla(var(--a-${propColor}),var(--un-bg-opacity))` }, { '--un-ring-color': `hsl(var(--a-${propColor}))` })
`74`	`75`
`75`	`76`	`// ℹ️ We need to set un-bg-opacity just like UnoCSS class`
`76`	`77`	`classes.push('[--un-bg-opacity:1]')`