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

refactor: CSS vars

Browse source
This commit is contained in:
Lucas Larroche 2023-04-02 11:04:23 +07:00
parent 435e731d82
commit d407df3c23
16 changed files with 231 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

6
scss/components/_group.scss
View file

@ -83,12 +83,12 @@
@supports selector(:has(*)) {
// Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-with-button);
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-button);
}
// Group box shadow when an input is focused
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-with-input);
#{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-input);
// Adapt box shadow for buttons
button,
@ -97,7 +97,7 @@
[role="button"] {
#{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border);
#{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width)
var(#{$✨}primary-border-hover);
var(#{$✨}primary-hover-border);
}
}

12
scss/content/_button.scss
View file

@ -63,8 +63,8 @@
}
&:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}primary-background-hover);
#{$✨}border-color: var(#{$✨}primary-border-hover);
#{$✨}background-color: var(#{$✨}primary-hover-background);
#{$✨}border-color: var(#{$✨}primary-hover-border);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
#{$✨}color: var(#{$✨}primary-inverse);
}
@ -93,8 +93,8 @@
cursor: pointer;
&:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover);
#{$✨}background-color: var(#{$✨}secondary-hover-background);
#{$✨}border-color: var(#{$✨}secondary-hover-border);
#{$✨}color: var(#{$✨}secondary-inverse);
}
@ -111,8 +111,8 @@
#{$✨}color: var(#{$✨}contrast-inverse);
&:is([aria-current], :hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}contrast-background-hover);
#{$✨}border-color: var(#{$✨}contrast-border-hover);
#{$✨}background-color: var(#{$✨}contrast-hover-background);
#{$✨}border-color: var(#{$✨}contrast-hover-border);
#{$✨}color: var(#{$✨}contrast-inverse);
}

6
scss/content/_link.scss
View file

@ -25,7 +25,7 @@
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}primary-hover);
#{$✨}underline: var(#{$✨}primary-underline-hover);
#{$✨}underline: var(#{$✨}primary-hover-underline);
#{$✨}text-decoration: underline;
}
@ -41,7 +41,7 @@
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}secondary-hover);
#{$✨}underline: var(#{$✨}secondary-underline-hover);
#{$✨}underline: var(#{$✨}secondary-hover-underline);
}
}
@ -52,7 +52,7 @@
&:is([aria-current], :hover, :active, :focus) {
#{$✨}color: var(#{$✨}contrast-hover);
#{$✨}underline: var(#{$✨}contrast-underline-hover);
#{$✨}underline: var(#{$✨}contrast-hover-underline);
}
}
}

4
scss/forms/_input-file.scss
View file

@ -25,8 +25,8 @@
&:is(:hover, :active, :focus) {
&::file-selector-button {
#{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover);
#{$✨}background-color: var(#{$✨}secondary-hover-background);
#{$✨}border-color: var(#{$✨}secondary-hover-border);
}
}

30
scss/themes/default/_dark.scss
View file

@ -20,37 +20,37 @@
// Primary colors
#{$✨}primary: #{$azure-350};
#{$✨}primary-hover: #{$azure-250};
#{$✨}primary-underline: #{rgba($azure-350, 0.5)};
#{$✨}primary-underline-hover: var(#{$✨}primary-hover);
#{$✨}primary-background: #{$azure-550};
#{$✨}primary-background-hover: #{$azure-500};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-underline: #{rgba($azure-350, 0.5)};
#{$✨}primary-hover: #{$azure-250};
#{$✨}primary-hover-background: #{$azure-500};
#{$✨}primary-hover-border: var(#{$✨}primary-hover-background);
#{$✨}primary-hover-underline: var(#{$✨}primary-hover);
#{$✨}primary-focus: #{rgba($azure-350, 0.375)};
#{$✨}primary-inverse: #{$white};
// Secondary colors
#{$✨}secondary: #{$zinc-350};
#{$✨}secondary-hover: #{$zinc-250};
#{$✨}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$✨}secondary-underline-hover: var(#{$✨}secondary-hover);
#{$✨}secondary-background: #{$slate-600};
#{$✨}secondary-background-hover: #{$slate-550};
#{$✨}secondary-border: var(#{$✨}secondary-background);
#{$✨}secondary-border-hover: var(#{$✨}secondary-background-hover);
#{$✨}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$✨}secondary-hover: #{$zinc-250};
#{$✨}secondary-hover-background: #{$slate-550};
#{$✨}secondary-hover-border: var(#{$✨}secondary-hover-background);
#{$✨}secondary-hover-underline: var(#{$✨}secondary-hover);
#{$✨}secondary-focus: #{rgba($slate-350, 0.25)};
#{$✨}secondary-inverse: #{$white};
// Contrast colors
#{$✨}contrast: #{$slate-100};
#{$✨}contrast-hover: #{$white};
#{$✨}contrast-underline: #{rgba($slate-100, 0.5)};
#{$✨}contrast-underline-hover: var(#{$✨}contrast-hover);
#{$✨}contrast-background: #{$slate-50};
#{$✨}contrast-background-hover: #{$white};
#{$✨}contrast-border: var(#{$✨}contrast-background);
#{$✨}contrast-border-hover: var(#{$✨}contrast-background-hover);
#{$✨}contrast-underline: #{rgba($slate-100, 0.5)};
#{$✨}contrast-hover: #{$white};
#{$✨}contrast-hover-background: #{$white};
#{$✨}contrast-hover-border: var(#{$✨}contrast-hover-background);
#{$✨}contrast-hover-underline: var(#{$✨}contrast-hover);
#{$✨}contrast-focus: #{rgba($slate-150, 0.25)};
#{$✨}contrast-inverse: #{$black};

30
scss/themes/default/_light.scss
View file

@ -20,37 +20,37 @@
// Primary colors
#{$✨}primary: #{$azure-550};
#{$✨}primary-hover: #{$azure-650};
#{$✨}primary-underline: #{rgba($azure-550, 0.5)};
#{$✨}primary-underline-hover: var(#{$✨}primary-hover);
#{$✨}primary-background: #{$azure-550};
#{$✨}primary-background-hover: #{$azure-600};
#{$✨}primary-border: var(#{$✨}primary-background);
#{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
#{$✨}primary-underline: #{rgba($azure-550, 0.5)};
#{$✨}primary-hover: #{$azure-650};
#{$✨}primary-hover-background: #{$azure-600};
#{$✨}primary-hover-border: var(#{$✨}primary-hover-background);
#{$✨}primary-hover-underline: var(#{$✨}primary-hover);
#{$✨}primary-focus: #{rgba($azure-400, 0.5)};
#{$✨}primary-inverse: #{$white};
// Secondary colors
#{$✨}secondary: #{$slate-550};
#{$✨}secondary-hover: #{$slate-650};
#{$✨}secondary-underline: #{rgba($slate-550, 0.5)};
#{$✨}secondary-underline-hover: var(#{$✨}secondary-hover);
#{$✨}secondary-background: #{$slate-600};
#{$✨}secondary-background-hover: #{$slate-650};
#{$✨}secondary-border: var(#{$✨}secondary-background);
#{$✨}secondary-border-hover: var(#{$✨}secondary-background-hover);
#{$✨}secondary-underline: #{rgba($slate-550, 0.5)};
#{$✨}secondary-hover: #{$slate-650};
#{$✨}secondary-hover-background: #{$slate-650};
#{$✨}secondary-hover-border: var(#{$✨}secondary-hover-background);
#{$✨}secondary-hover-underline: var(#{$✨}secondary-hover);
#{$✨}secondary-focus: #{rgba($slate-550, 0.25)};
#{$✨}secondary-inverse: #{$white};
// Contrast colors
#{$✨}contrast: #{$slate-900};
#{$✨}contrast-hover: #{$black};
#{$✨}contrast-underline: #{rgba($slate-900, 0.5)};
#{$✨}contrast-underline-hover: var(#{$✨}secondary-hover);
#{$✨}contrast-background: #{$slate-900};
#{$✨}contrast-background-hover: #{$black};
#{$✨}contrast-border: var(#{$✨}contrast-background);
#{$✨}contrast-border-hover: var(#{$✨}contrast-background-hover);
#{$✨}contrast-underline: #{rgba($slate-900, 0.5)};
#{$✨}contrast-hover: #{$black};
#{$✨}contrast-hover-background: #{$black};
#{$✨}contrast-hover-border: var(#{$✨}contrast-hover-background);
#{$✨}contrast-hover-underline: var(#{$✨}secondary-hover);
#{$✨}contrast-focus: #{rgba($slate-550, 0.25)};
#{$✨}contrast-inverse: #{$white};

12
scss/themes/default/_styles.scss
View file

@ -383,8 +383,12 @@
[role="search"],
[role="group"] {
#{$✨}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$✨}group-box-shadow-with-button: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
#{$✨}group-box-shadow-with-input: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
#{$✨}group-box-shadow-focus-with-button: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}primary-focus);
#{$✨}group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
@if $enable-classes {
&:has(
@ -393,7 +397,7 @@
[type="button"].secondary:focus,
[role="button"].secondary:focus
) {
#{$✨}group-box-shadow-with-button: 0
#{$✨}group-box-shadow-focus-with-button: 0
0
0
var(#{$✨}outline-width)
@ -406,7 +410,7 @@
[type="button"].contrast:focus,
[role="button"].contrast:focus
) {
#{$✨}group-box-shadow-with-button: 0
#{$✨}group-box-shadow-focus-with-button: 0
0
0
var(#{$✨}outline-width)