mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-30 04:49:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: update colors

Browse source
This commit is contained in:
Lucas Larroche 2022-12-26 11:35:56 +07:00
parent 52e1072a08
commit 6ade871f3f
20 changed files with 892 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

26
scss/content/_button.scss
View file

@ -48,8 +48,8 @@
input[type="button"],
input[type="reset"],
[role="button"] {
#{$✨}background-color: var(#{$✨}primary);
#{$✨}border-color: var(#{$✨}primary);
#{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary-border);
#{$✨}color: var(#{$✨}primary-inverse);
#{$✨}box-shadow: var(#{$✨}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
@ -71,8 +71,8 @@
}
&:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}primary-hover);
#{$✨}border-color: var(#{$✨}primary-hover);
#{$✨}background-color: var(#{$✨}primary-background-hover);
#{$✨}border-color: var(#{$✨}primary-border-hover);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
#{$✨}color: var(#{$✨}primary-inverse);
}
@ -88,14 +88,14 @@
// Secondary
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"] {
#{$✨}background-color: var(#{$✨}secondary);
#{$✨}border-color: var(#{$✨}secondary);
#{$✨}background-color: var(#{$✨}secondary-background);
#{$✨}border-color: var(#{$✨}secondary-border);
#{$✨}color: var(#{$✨}secondary-inverse);
cursor: pointer;
&:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}secondary-hover);
#{$✨}border-color: var(#{$✨}secondary-hover);
#{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover);
#{$✨}color: var(#{$✨}secondary-inverse);
}
@ -107,13 +107,13 @@
// Contrast
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
#{$✨}background-color: var(#{$✨}contrast);
#{$✨}border-color: var(#{$✨}contrast);
#{$✨}background-color: var(#{$✨}contrast-background);
#{$✨}border-color: var(#{$✨}contrast-border);
#{$✨}color: var(#{$✨}contrast-inverse);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}contrast-hover);
#{$✨}border-color: var(#{$✨}contrast-hover);
#{$✨}background-color: var(#{$✨}contrast-background-hover);
#{$✨}border-color: var(#{$✨}contrast-border-hover);
#{$✨}color: var(#{$✨}contrast-inverse);
}
@ -128,6 +128,7 @@
input[type="reset"].outline {
#{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary);
#{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: transparent;
@ -139,6 +140,7 @@
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline {
#{$✨}color: var(#{$✨}secondary);
#{$✨}border-color: currentColor;
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover);

27
scss/content/_code.scss
View file

@ -60,33 +60,6 @@
}
}
// Code Syntax
code {
// Tags
b {
color: var(#{$✨}code-tag-color);
font-weight: var(#{$✨}font-weight);
}
// Properties
i {
color: var(#{$✨}code-property-color);
font-style: normal;
}
// Values
u {
color: var(#{$✨}code-value-color);
text-decoration: none;
}
// Comments
em {
color: var(#{$✨}code-comment-color);
font-style: normal;
}
}
// kbd
kbd {
background-color: var(#{$✨}code-kbd-background-color);

8
scss/content/_link.scss
View file

@ -10,10 +10,13 @@
[role="link"] {
#{$✨}color: var(#{$✨}primary);
#{$✨}background-color: transparent;
#{$✨}underline: var(#{$✨}primary-underline);
outline: none;
background-color: var(#{$✨}background-color); // 1
color: var(#{$✨}color);
text-decoration: var(#{$✨}text-decoration);
text-decoration-color: var(#{$✨}underline);
text-underline-offset: 0.125em;
@if $enable-transitions {
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
@ -22,6 +25,7 @@
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}primary-hover);
#{$✨}underline: var(#{$✨}primary-underline-hover);
#{$✨}text-decoration: underline;
}
@ -33,9 +37,11 @@
// Secondary
&.secondary {
#{$✨}color: var(#{$✨}secondary);
#{$✨}underline: var(#{$✨}secondary-underline);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-underline-hover);
}
&:focus {
@ -46,9 +52,11 @@
// Contrast
&.contrast {
#{$✨}color: var(#{$✨}contrast);
#{$✨}underline: var(#{$✨}contrast-underline);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-underline-hover);
}
&:focus {