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

refactor: prefix css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 13:11:51 +07:00
parent cba8f385c2
commit c5a1ffc733
40 changed files with 2334 additions and 2329 deletions
Download patch file Download diff file Expand all files Collapse all files

110
scss/content/_button.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Button
@ -33,7 +33,7 @@ button,
button {
display: block;
width: 100%;
margin-bottom: var(--spacing);
margin-bottom: var(#{$✨}spacing);
}
[role="button"] {
@ -46,127 +46,127 @@ input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"] {
--background-color: var(--primary);
--border-color: var(--primary);
--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);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
#{$✨}background-color: var(#{$✨}primary);
#{$✨}border-color: var(#{$✨}primary);
#{$✨}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);
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: var(#{$✨}border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
background-color: var(#{$✨}background-color);
box-shadow: var(#{$✨}box-shadow);
color: var(#{$✨}color);
font-weight: var(#{$✨}font-weight);
font-size: 1rem;
line-height: var(--line-height);
line-height: var(#{$✨}line-height);
text-align: center;
cursor: pointer;
@if settings.$enable-transitions {
transition: background-color var(--transition), border-color var(--transition),
color var(--transition), box-shadow var(--transition);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
}
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
#{$✨}background-color: var(#{$✨}primary-hover);
#{$✨}border-color: var(#{$✨}primary-hover);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
#{$✨}color: var(#{$✨}primary-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
}
}
// .secondary, .contrast & .outline
@if settings.$enable-classes {
@if $enable-classes {
// Secondary
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
#{$✨}background-color: var(#{$✨}secondary);
#{$✨}border-color: var(#{$✨}secondary);
#{$✨}color: var(#{$✨}secondary-inverse);
cursor: pointer;
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
#{$✨}background-color: var(#{$✨}secondary-hover);
#{$✨}border-color: var(#{$✨}secondary-hover);
#{$✨}color: var(#{$✨}secondary-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
}
}
// Contrast
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
#{$✨}background-color: var(#{$✨}contrast);
#{$✨}border-color: var(#{$✨}contrast);
#{$✨}color: var(#{$✨}contrast-inverse);
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
#{$✨}background-color: var(#{$✨}contrast-hover);
#{$✨}border-color: var(#{$✨}contrast-hover);
#{$✨}color: var(#{$✨}contrast-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}contrast-focus);
}
}
// Outline (primary)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
input[type="reset"].outline {
--background-color: transparent;
--color: var(--primary);
#{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary);
&:is([aria-current], :hover, :active, :focus) {
--background-color: transparent;
--color: var(--primary-hover);
#{$✨}background-color: transparent;
#{$✨}color: var(#{$✨}primary-hover);
}
}
// Outline (secondary)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline {
--color: var(--secondary);
#{$✨}color: var(#{$✨}secondary);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
#{$✨}color: var(#{$✨}secondary-hover);
}
}
// Outline (contrast)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
--color: var(--contrast);
#{$✨}color: var(#{$✨}contrast);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
#{$✨}color: var(#{$✨}contrast-hover);
}
}
} @else {
// Secondary button without .class
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
#{$✨}background-color: var(#{$✨}secondary);
#{$✨}border-color: var(#{$✨}secondary);
#{$✨}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-hover);
#{$✨}border-color: var(#{$✨}secondary-hover);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
}
}
}

32
scss/content/_code.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/**
* Code
*/
@ -14,7 +16,7 @@ code,
kbd,
samp {
font-size: 0.875em; // 2
font-family: var(--font-family); // 1
font-family: var(#{$✨}font-family); // 1
}
// Prevent overflow of the container in all browsers (opinionated)
@ -29,10 +31,10 @@ pre {
pre,
code,
kbd {
border-radius: var(--border-radius);
background: var(--code-background-color);
color: var(--code-color);
font-weight: var(--font-weight);
border-radius: var(#{$✨}border-radius);
background: var(#{$✨}code-background-color);
color: var(#{$✨}code-color);
font-weight: var(#{$✨}font-weight);
line-height: initial;
}
@ -44,15 +46,15 @@ kbd {
pre {
display: block;
margin-bottom: var(--spacing);
margin-bottom: var(#{$✨}spacing);
overflow-x: auto;
> code {
display: block;
padding: var(--spacing);
padding: var(#{$✨}spacing);
background: none;
font-size: 14px;
line-height: var(--line-height);
line-height: var(#{$✨}line-height);
}
}
@ -60,32 +62,32 @@ pre {
code {
// Tags
b {
color: var(--code-tag-color);
font-weight: var(--font-weight);
color: var(#{$✨}code-tag-color);
font-weight: var(#{$✨}font-weight);
}
// Properties
i {
color: var(--code-property-color);
color: var(#{$✨}code-property-color);
font-style: normal;
}
// Values
u {
color: var(--code-value-color);
color: var(#{$✨}code-value-color);
text-decoration: none;
}
// Comments
em {
color: var(--code-comment-color);
color: var(#{$✨}code-comment-color);
font-style: normal;
}
}
// kbd
kbd {
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
background-color: var(#{$✨}code-kbd-background-color);
color: var(#{$✨}code-kbd-color);
vertical-align: baseline;
}

2
scss/content/_embedded.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/**
* Embedded content
*/

6
scss/content/_miscs.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Miscs
@ -14,14 +14,14 @@
hr {
height: 0; // 2
border: 0;
border-top: 1px solid var(--muted-border-color);
border-top: 1px solid var(#{$✨}muted-border-color);
color: inherit; // 1
}
// Add the correct display in IE 10+
[hidden],
template {
@if settings.$enable-important {
@if $enable-important {
display: none !important;
} @else {
display: none;

16
scss/content/_table.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/**
* Table
*/
@ -22,11 +24,11 @@
// Cells
th,
td {
padding: calc(var(--spacing) / 2) var(--spacing);
border-bottom: var(--border-width) solid var(--table-border-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
padding: calc(var(#{$✨}spacing) / 2) var(#{$✨}spacing);
border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
color: var(#{$✨}color);
font-weight: var(#{$✨}font-weight);
font-size: var(#{$✨}font-size);
text-align: left;
text-align: start;
}
@ -35,7 +37,7 @@ td {
tfoot {
th,
td {
border-top: var(--border-width) solid var(--table-border-color);
border-top: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
border-bottom: 0;
}
}
@ -44,7 +46,7 @@ tfoot {
table {
&[role="grid"] {
tbody tr:nth-child(odd) {
background-color: var(--table-row-stripped-background-color);
background-color: var(#{$✨}table-row-stripped-background-color);
}
}
}

120
scss/content/_typography.scss
View file

@ -1,4 +1,4 @@
@use "../settings";
@use "../settings" as *;
/**
* Typography
@ -44,62 +44,62 @@ pre,
table,
ul {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
margin-bottom: var(#{$✨}typography-spacing-vertical);
color: var(#{$✨}color);
font-style: normal;
font-weight: var(--font-weight);
font-size: var(--font-size);
font-weight: var(#{$✨}font-weight);
font-size: var(#{$✨}font-size);
}
// Links
// 1. Remove the gray background on active links in IE 10
a,
[role="link"] {
--color: var(--primary);
--background-color: transparent;
#{$✨}color: var(#{$✨}primary);
#{$✨}background-color: transparent;
outline: none;
background-color: var(--background-color); // 1
color: var(--color);
text-decoration: var(--text-decoration);
background-color: var(#{$✨}background-color); // 1
color: var(#{$✨}color);
text-decoration: var(#{$✨}text-decoration);
@if settings.$enable-transitions {
transition: background-color var(--transition), color var(--transition),
text-decoration var(--transition), box-shadow var(--transition);
@if $enable-transitions {
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
}
&:is([aria-current], :hover, :active, :focus) {
--color: var(--primary-hover);
--text-decoration: underline;
#{$✨}color: var(#{$✨}primary-hover);
#{$✨}text-decoration: underline;
}
&:focus {
--background-color: var(--primary-focus);
#{$✨}background-color: var(#{$✨}primary-focus);
}
@if settings.$enable-classes {
@if $enable-classes {
// Secondary
&.secondary {
--color: var(--secondary);
#{$✨}color: var(#{$✨}secondary);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
#{$✨}color: var(#{$✨}secondary-hover);
}
&:focus {
--background-color: var(--secondary-focus);
#{$✨}background-color: var(#{$✨}secondary-focus);
}
}
// Contrast
&.contrast {
--color: var(--contrast);
#{$✨}color: var(#{$✨}contrast);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
#{$✨}color: var(#{$✨}contrast-hover);
}
&:focus {
--background-color: var(--contrast-focus);
#{$✨}background-color: var(#{$✨}contrast-focus);
}
}
}
@ -113,69 +113,69 @@ h4,
h5,
h6 {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
font-family: var(--font-family);
margin-bottom: var(#{$✨}typography-spacing-vertical);
color: var(#{$✨}color);
font-weight: var(#{$✨}font-weight);
font-size: var(#{$✨}font-size);
font-family: var(#{$✨}font-family);
}
h1 {
--color: var(--h1-color);
#{$✨}color: var(#{$✨}h1-color);
}
h2 {
--color: var(--h2-color);
#{$✨}color: var(#{$✨}h2-color);
}
h3 {
--color: var(--h3-color);
#{$✨}color: var(#{$✨}h3-color);
}
h4 {
--color: var(--h4-color);
#{$✨}color: var(#{$✨}h4-color);
}
h5 {
--color: var(--h5-color);
#{$✨}color: var(#{$✨}h5-color);
}
h6 {
--color: var(--h6-color);
#{$✨}color: var(#{$✨}h6-color);
}
// Margin-top for headings after a typography block
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--typography-spacing-vertical);
margin-top: var(#{$✨}typography-spacing-vertical);
}
}
// Heading group
@if settings.$enable-classes == false {
@if $enable-classes == false {
hgroup {
margin-bottom: var(--typography-spacing-vertical);
margin-bottom: var(#{$✨}typography-spacing-vertical);
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
#{$✨}color: var(#{$✨}muted-color);
#{$✨}font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
}
@if settings.$enable-classes {
@if $enable-classes {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
margin-bottom: var(#{$✨}typography-spacing-vertical);
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
#{$✨}color: var(#{$✨}muted-color);
#{$✨}font-weight: unset;
font-size: 1rem;
font-family: unset;
}
@ -184,23 +184,23 @@ h6 {
// Paragraphs
p {
margin-bottom: var(--typography-spacing-vertical);
margin-bottom: var(#{$✨}typography-spacing-vertical);
}
// Small
small {
font-size: var(--font-size);
font-size: var(#{$✨}font-size);
}
// Lists
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
padding-inline-start: var(--spacing);
padding-left: var(#{$✨}spacing);
padding-inline-start: var(#{$✨}spacing);
padding-inline-end: 0;
li {
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
margin-bottom: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
}
}
@ -209,7 +209,7 @@ small {
:where(dl, ol, ul) {
:is(dl, ol, ul) {
margin: 0; // 1
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
}
}
@ -220,24 +220,24 @@ ul li {
// Highlighted text
mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
background-color: var(#{$✨}mark-background-color);
color: var(#{$✨}mark-color);
vertical-align: baseline;
}
// Blockquote
blockquote {
display: block;
margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing);
margin: var(#{$✨}typography-spacing-vertical) 0;
padding: var(#{$✨}spacing);
border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color);
border-left: 0.25rem solid var(#{$✨}blockquote-border-color);
border-inline-start: 0.25rem solid var(#{$✨}blockquote-border-color);
border-inline-end: none;
footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
color: var(--blockquote-footer-color);
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.5);
color: var(#{$✨}blockquote-footer-color);
}
}
@ -251,16 +251,16 @@ abbr[title] {
// Ins
ins {
color: var(--ins-color);
color: var(#{$✨}ins-color);
text-decoration: none;
}
// del
del {
color: var(--del-color);
color: var(#{$✨}del-color);
}
// selection
::selection {
background-color: var(--primary-focus);
background-color: var(#{$✨}primary-focus);
}