Skip to content

Commit a91805b

Browse files
feat(btn): keyboard focus styles added via focus-visible (#53)
Co-authored-by: JD Solanki <jdsolanki0001@gmail.com> Co-authored-by: JD Solanki <47495003+jd-solanki@users.noreply.github.com>
1 parent 82f86b7 commit a91805b

File tree

3 files changed

+6
-5
lines changed

3 files changed

+6
-5
lines changed

packages/anu-vue/src/components/btn/ABtn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const ABtn = defineComponent({
6767
)
6868

6969
// 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}>
7171
{props.icon ? <i class={props.icon}></i> : null}{slots.default?.()}{props.appendIcon ? <i class={props.appendIcon}></i> : null}
7272
</button>
7373
},

packages/anu-vue/src/composables/useLayer.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,13 @@ export const useLayer = () => {
6565
const contrastColor = contrast(propColor)
6666

6767
styles.push(`--a-layer-text: ${contrastColor}`)
68+
styles.push(`--un-ring-color: ${propColor}`)
6869
}
6970
}
7071

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'
7273
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}))` })
7475

7576
// ℹ️ We need to set un-bg-opacity just like UnoCSS class
7677
classes.push('[--un-bg-opacity:1]')

packages/anu-vue/src/presets/theme-default/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ const themeShortcuts: Exclude<Preset['shortcuts'], undefined> = [
7878
'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',
7979

8080
// 👉 Button
81-
'a-btn': 'em:spacing:px-4 font-medium em:spacing:rounded-lg em:spacing:gap-x-2 em:spacing:h-10',
82-
'a-btn-icon-only': 'font-medium em:spacing:rounded-lg em:spacing:h-10 em:spacing:w-10 i:em:text-lg',
81+
'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',
82+
'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',
8383

8484
// 👉 Card
8585
'a-card': 'em:spacing:rounded-lg shadow-lg',

0 commit comments

Comments
 (0)