sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-02-23 00:01:58 -05:00
Code Issues Projects Releases Wiki Activity

style: selection and focus color

Browse Source
This commit is contained in:
Lucas Larroche 2023-01-28 12:22:55 +07:00
parent dfa4041b77
commit 6c3e126943
13 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/pico.classless.css
View File

@ -10,6 +10,7 @@
:root:not([data-theme=dark]) {
--pico-background-color: #fff;
--pico-color: #373c44;
--pico-text-selection-color: rgba(2, 154, 232, 0.25);
--pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0;
--pico-primary: #0172ad;
@ -20,7 +21,7 @@
--pico-primary-background-hover: #02659a;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(2, 154, 232, 0.25);
--pico-primary-focus: rgba(2, 154, 232, 0.5);
--pico-primary-inverse: #fff;
--pico-secondary: #5d6b89;
--pico-secondary-hover: #48536b;
@ -139,6 +140,7 @@
:root:not([data-theme]) {
--pico-background-color: #13171f;
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #01aaff;
@ -149,7 +151,7 @@
--pico-primary-background-hover: #017fc0;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-focus: rgba(1, 170, 255, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-hover: #b3b9c5;
@ -261,6 +263,7 @@
[data-theme=dark] {
--pico-background-color: #13171f;
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #01aaff;
@ -271,7 +274,7 @@
--pico-primary-background-hover: #017fc0;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-focus: rgba(1, 170, 255, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-hover: #b3b9c5;
@ -729,7 +732,7 @@ a:is([aria-current], :hover, :active, :focus),
}
a:focus-visible,
[role=link]:focus-visible {
--pico-background-color: var(--pico-primary-focus);
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
/**
@ -897,11 +900,11 @@ del {
}
::-moz-selection {
background-color: var(--pico-primary-focus);
background-color: var(--pico-text-selection-color);
}
::selection {
background-color: var(--pico-primary-focus);
background-color: var(--pico-text-selection-color);
}
/**
@ -1107,7 +1110,7 @@ pre > code {
display: block;
padding: var(--pico-spacing);
background: none;
font-size: 14px;
font-size: inherit;
line-height: var(--pico-line-height);
}
@ -1854,6 +1857,8 @@ details summary:focus:not([role]) {
color: var(--pico-accordion-active-summary-color);
}
details summary:focus-visible:not([role]) {
outline: var(--pico-outline-width) solid var(--pico-primary-focus);
outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
color: var(--pico-primary);
}
details summary[role=button] {
@ -1973,6 +1978,9 @@ details[role=list] summary:not([role]):active, details[role=list] summary:not([r
details[role=list] summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}
details[role=list] summary:not([role]):focus-visible {
outline: none;
}
details[role=list] summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);

2
css/pico.classless.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View File

File diff suppressed because one or more lines are too long

30
css/pico.css
View File

@ -10,6 +10,7 @@
:root:not([data-theme=dark]) {
--pico-background-color: #fff;
--pico-color: #373c44;
--pico-text-selection-color: rgba(2, 154, 232, 0.25);
--pico-muted-color: #646b79;
--pico-muted-border-color: #e7eaf0;
--pico-primary: #0172ad;
@ -20,7 +21,7 @@
--pico-primary-background-hover: #02659a;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(2, 154, 232, 0.25);
--pico-primary-focus: rgba(2, 154, 232, 0.5);
--pico-primary-inverse: #fff;
--pico-secondary: #5d6b89;
--pico-secondary-hover: #48536b;
@ -139,6 +140,7 @@
:root:not([data-theme]) {
--pico-background-color: #13171f;
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #01aaff;
@ -149,7 +151,7 @@
--pico-primary-background-hover: #017fc0;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-focus: rgba(1, 170, 255, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-hover: #b3b9c5;
@ -261,6 +263,7 @@
[data-theme=dark] {
--pico-background-color: #13171f;
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #01aaff;
@ -271,7 +274,7 @@
--pico-primary-background-hover: #017fc0;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-border-hover: var(--pico-primary-background-hover);
--pico-primary-focus: rgba(1, 170, 255, 0.25);
--pico-primary-focus: rgba(1, 170, 255, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-hover: #b3b9c5;
@ -753,7 +756,7 @@ a:is([aria-current], :hover, :active, :focus),
}
a:focus-visible,
[role=link]:focus-visible {
--pico-background-color: var(--pico-primary-focus);
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}
a.secondary,
[role=link].secondary {
@ -765,10 +768,6 @@ a.secondary:is([aria-current], :hover, :active, :focus),
--pico-color: var(--pico-secondary-hover);
--pico-underline: var(--pico-secondary-underline-hover);
}
a.secondary:focus-visible,
[role=link].secondary:focus-visible {
--pico-background-color: var(--pico-secondary-focus);
}
a.contrast,
[role=link].contrast {
--pico-color: var(--pico-contrast);
@ -779,10 +778,6 @@ a.contrast:is([aria-current], :hover, :active, :focus),
--pico-color: var(--pico-contrast-hover);
--pico-underline: var(--pico-contrast-underline-hover);
}
a.contrast:focus-visible,
[role=link].contrast:focus-visible {
--pico-background-color: var(--pico-contrast-focus);
}
/**
* Typography
@ -952,11 +947,11 @@ del {
}
::-moz-selection {
background-color: var(--pico-primary-focus);
background-color: var(--pico-text-selection-color);
}
::selection {
background-color: var(--pico-primary-focus);
background-color: var(--pico-text-selection-color);
}
/**
@ -1209,7 +1204,7 @@ pre > code {
display: block;
padding: var(--pico-spacing);
background: none;
font-size: 14px;
font-size: inherit;
line-height: var(--pico-line-height);
}
@ -1956,6 +1951,8 @@ details summary:focus:not([role]) {
color: var(--pico-accordion-active-summary-color);
}
details summary:focus-visible:not([role]) {
outline: var(--pico-outline-width) solid var(--pico-primary-focus);
outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
color: var(--pico-primary);
}
details summary[role=button] {
@ -2093,6 +2090,9 @@ details[role=list] summary:not([role]):active, details[role=list] summary:not([r
details[role=list] summary:not([role]):focus {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}
details[role=list] summary:not([role]):focus-visible {
outline: none;
}
details[role=list] summary:not([role])[aria-invalid=false] {
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);

2
css/pico.css.map
View File

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
scss/components/_accordion.scss
View File

@ -70,6 +70,8 @@
&:focus-visible {
&:not([role]) {
outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus);
outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5);
color: var(#{$✨}primary);
}
}

5
scss/components/_dropdown.scss
View File

@ -104,6 +104,11 @@
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
}
// Reset focus visible from accordion component
&:focus-visible {
outline: none;
}
// Aria-invalid
&[aria-invalid="false"] {
#{$✨}form-element-border-color: var(#{$✨}form-element-valid-border-color);

2
scss/content/_code.scss
View File

@ -55,7 +55,7 @@
display: block;
padding: var(#{$✨}spacing);
background: none;
font-size: 14px;
font-size: inherit;
line-height: var(#{$✨}line-height);
}
}

10
scss/content/_link.scss
View File

@ -30,7 +30,7 @@
}
&:focus-visible {
#{$✨}background-color: var(#{$✨}primary-focus);
box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
}
@if $enable-classes {
@ -43,10 +43,6 @@
#{$✨}color: var(#{$✨}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-underline-hover);
}
&:focus-visible {
#{$✨}background-color: var(#{$✨}secondary-focus);
}
}
// Contrast
@ -58,10 +54,6 @@
#{$✨}color: var(#{$✨}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-underline-hover);
}
&:focus-visible {
#{$✨}background-color: var(#{$✨}contrast-focus);
}
}
}
}

2
scss/content/_typography.scss
View File

@ -210,6 +210,6 @@
// selection
::selection {
background-color: var(#{$✨}primary-focus);
background-color: var(#{$✨}text-selection-color);
}
}

5
scss/themes/default/_dark.scss
View File

@ -11,6 +11,9 @@
// Text color
#{$✨}color: #{$zinc-200};
// Text selection color
#{$✨}text-selection-color: #{rgba($azure-350, 0.1875)};
// Muted colors
#{$✨}muted-color: #{$zinc-450};
#{$✨}muted-border-color: #{$slate-850};
@ -24,7 +27,7 @@
#{$✨}primary-background-hover: #{$azure-500};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-focus: #{rgba($azure-350, 0.25)};
#{$✨}primary-focus: #{rgba($azure-350, 0.375)};
#{$✨}primary-inverse: #{$white};
// Secondary colors

5
scss/themes/default/_light.scss
View File

@ -11,6 +11,9 @@
// Text color
#{$✨}color: #{$zinc-750};
// Text selection color
#{$✨}text-selection-color: #{rgba($azure-400, 0.25)};
// Muted colors
#{$✨}muted-color: #{$zinc-550};
#{$✨}muted-border-color: #{mix($slate-100, $slate-50)};
@ -24,7 +27,7 @@
#{$✨}primary-background-hover: #{$azure-600};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-focus: #{rgba($azure-400, 0.25)};
#{$✨}primary-focus: #{rgba($azure-400, 0.5)};
#{$✨}primary-inverse: #{$white};
// Secondary colors