studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Update focus-visible variables and style

Browse source
This commit is contained in:
Timothée Goguely 2024-09-10 16:36:30 +02:00
parent 591625e15a
commit 34863a9adc
2 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/assets/css/src/0.2.variables.css
View file

@ -21,6 +21,7 @@
--color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */ --color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */
--color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */ --color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */
--color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */ --color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */
--color-primary-50: hsla(177, 100%, 29%, .5); /* Focus 50% */
--color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */ --color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */
--color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */ --color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */
--color-primary: var(--color-primary-100); /* Focus */ --color-primary: var(--color-primary-100); /* Focus */
@ -28,7 +29,7 @@
--color-brand: var(--color-brand-100); /* Brand */ --color-brand: var(--color-brand-100); /* Brand */
--color-background: var(--color-white); --color-background: var(--color-white);
--color-text: var(--color-black); --color-text: var(--color-black);
--color-focus-ring: var(--color-primary-100); --color-focus-ring: var(--color-primary-50);
--color-disabled: var(--color-grey-400); --color-disabled: var(--color-grey-400);
/* Space scale */ /* Space scale */

4
src/assets/css/src/1.0.global.css
View file

@ -226,7 +226,7 @@ a.link-full:focus-visible {
outline-width: 0; outline-width: 0;
} }
a.link-full:focus-visible::after { a.link-full:focus-visible::after {
outline: none; outline: 2px solid var(--color-focus-ring);
outline-offset: 2px; outline-offset: 2px;
text-decoration: underline; text-decoration: underline;
} }
@ -254,7 +254,7 @@ button {
/* General interactive states */ /* General interactive states */
:focus-visible { :focus-visible {
outline: 2px solid var(--color-focus-ring);
} }