mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16: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

1500
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

4
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

1568
css/pico.css
View file

File diff suppressed because it is too large Load diff

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

6
scss/_settings.scss
View file

@ -1,6 +1,9 @@
// Config // Config
// –––––––––––––––––––– // ––––––––––––––––––––
// Prefix for CSS variables
$css-var-prefix: "pico-" !default;
// Set the root element for $enable-semantic-container and $enable-responsive-spacings // Set the root element for $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default; $semantic-root-element: "body" !default;
@ -67,3 +70,6 @@ $viewports: (
lg: 920px, lg: 920px,
xl: 1130px xl: 1130px
) !default; ) !default;
// Shortcut for CSS vars prefix
$✨: --#{$css-var-prefix};

36
scss/components/_accordion.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Accordion (<details>) * Accordion (<details>)
@ -6,9 +6,9 @@
details { details {
display: block; display: block;
margin-bottom: var(--spacing); margin-bottom: var(#{$✨}spacing);
padding-bottom: var(--spacing); padding-bottom: var(#{$✨}spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color); border-bottom: var(#{$✨}border-width) solid var(#{$✨}accordion-border-color);
summary { summary {
line-height: 1rem; line-height: 1rem;
@ -16,11 +16,11 @@ details {
cursor: pointer; cursor: pointer;
&:not([role]) { &:not([role]) {
color: var(--accordion-close-summary-color); color: var(#{$✨}accordion-close-summary-color);
} }
@if settings.$enable-transitions { @if $enable-transitions {
transition: color var(--transition); transition: color var(#{$✨}transition);
} }
// Reset marker // Reset marker
@ -41,17 +41,17 @@ details {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-inline-start: calc(var(--spacing, 1rem) * 0.5); margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
background-image: var(--icon-chevron); background-image: var(#{$✨}icon-chevron);
background-position: right center; background-position: right center;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
content: ""; content: "";
@if settings.$enable-transitions { @if $enable-transitions {
transition: transform var(--transition); transition: transform var(#{$✨}transition);
} }
} }
@ -59,7 +59,7 @@ details {
outline: none; outline: none;
&:not([role="button"]) { &:not([role="button"]) {
color: var(--accordion-active-summary-color); color: var(#{$✨}accordion-active-summary-color);
} }
} }
@ -70,16 +70,16 @@ details {
// Marker // Marker
&::after { &::after {
height: calc(1rem * var(--line-height, 1.5)); height: calc(1rem * var(#{$✨}line-height, 1.5));
background-image: var(--icon-chevron-button); background-image: var(#{$✨}icon-chevron-button);
} }
@if settings.$enable-classes { @if $enable-classes {
// .contrast // .contrast
&:not(.outline).contrast { &:not(.outline).contrast {
// Marker // Marker
&::after { &::after {
background-image: var(--icon-chevron-button-inverse); background-image: var(#{$✨}icon-chevron-button-inverse);
} }
} }
} }
@ -89,11 +89,11 @@ details {
// Open // Open
&[open] { &[open] {
> summary { > summary {
margin-bottom: calc(var(--spacing)); margin-bottom: calc(var(#{$✨}spacing));
&:not([role]) { &:not([role]) {
&:not(:focus) { &:not(:focus) {
color: var(--accordion-open-summary-color); color: var(#{$✨}accordion-open-summary-color);
} }
} }

40
scss/components/_card.scss
View file

@ -1,35 +1,37 @@
@use "../settings" as *;
/** /**
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin: var(--block-spacing-vertical) 0; margin: var(#{$✨}block-spacing-vertical) 0;
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
background: var(--card-background-color); background: var(#{$✨}card-background-color);
box-shadow: var(--card-box-shadow); box-shadow: var(#{$✨}card-box-shadow);
> header, > header,
> footer { > footer {
margin-right: calc(var(--block-spacing-horizontal) * -1); margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1); margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal); padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
background-color: var(--card-sectionning-background-color); background-color: var(#{$✨}card-sectionning-background-color);
} }
> header { > header {
margin-top: calc(var(--block-spacing-vertical) * -1); margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical); margin-bottom: var(#{$✨}block-spacing-vertical);
border-bottom: var(--border-width) solid var(--card-border-color); border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
border-top-right-radius: var(--border-radius); border-top-right-radius: var(#{$✨}border-radius);
border-top-left-radius: var(--border-radius); border-top-left-radius: var(#{$✨}border-radius);
} }
> footer { > footer {
margin-top: var(--block-spacing-vertical); margin-top: var(#{$✨}block-spacing-vertical);
margin-bottom: calc(var(--block-spacing-vertical) * -1); margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
border-top: var(--border-width) solid var(--card-border-color); border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(#{$✨}border-radius);
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(#{$✨}border-radius);
} }
} }

81
scss/components/_dropdown.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Dropdown ([role="list"]) * Dropdown ([role="list"])
@ -21,42 +21,43 @@ li[role="list"] > ul {
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: var(--border-width) solid var(--dropdown-border-color); border: var(#{$✨}border-width) solid var(#{$✨}dropdown-border-color);
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
background-color: var(--dropdown-background-color); background-color: var(#{$✨}dropdown-background-color);
box-shadow: var(--card-box-shadow); box-shadow: var(#{$✨}card-box-shadow);
color: var(--dropdown-color); color: var(#{$✨}dropdown-color);
white-space: nowrap; white-space: nowrap;
li { li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal); padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
var(#{$✨}form-element-spacing-horizontal);
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5); margin-top: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
} }
&:last-of-type { &:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(#{$✨}form-element-spacing-vertical) * 0.5);
} }
a { a {
display: block; display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5) margin: calc(var(#{$✨}form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1); calc(var(#{$✨}form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5) padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal); var(#{$✨}form-element-spacing-horizontal);
overflow: hidden; overflow: hidden;
color: var(--dropdown-color); color: var(#{$✨}dropdown-color);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
background-color: var(--dropdown-hover-background-color); background-color: var(#{$✨}dropdown-hover-background-color);
} }
} }
} }
@ -68,7 +69,7 @@ li[role="list"] > a {
&::after { &::after {
display: block; display: block;
width: 1rem; width: 1rem;
height: calc(1rem * var(--line-height, 1.5)); height: calc(1rem * var(#{$✨}line-height, 1.5));
margin-inline-start: 0.5rem; margin-inline-start: 0.5rem;
float: right; float: right;
transform: rotate(0deg); transform: rotate(0deg);
@ -90,30 +91,30 @@ details[role="list"] {
&:not([role]) { &:not([role]) {
height: calc( height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 1rem * var(#{$✨}line-height) + var(#{$✨}form-element-spacing-vertical) * 2 +
2 var(#{$✨}border-width) * 2
); );
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color); border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
background-color: var(--form-element-background-color); background-color: var(#{$✨}form-element-background-color);
color: var(--form-element-placeholder-color); color: var(#{$✨}form-element-placeholder-color);
line-height: inherit; line-height: inherit;
cursor: pointer; cursor: pointer;
@if settings.$enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), border-color var(--transition), transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(--transition), box-shadow var(--transition); color var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
&:active, &:active,
&:focus { &:focus {
border-color: var(--form-element-active-border-color); border-color: var(#{$✨}form-element-active-border-color);
background-color: var(--form-element-active-background-color); background-color: var(#{$✨}form-element-active-background-color);
} }
&:focus { &:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
} }
} }
} }
@ -148,7 +149,7 @@ nav li[role="list"] a {
nav details[role="list"] summary + ul, nav details[role="list"] summary + ul,
nav li[role="list"] > ul { nav li[role="list"] > ul {
min-width: fit-content; min-width: fit-content;
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
li a { li a {
border-radius: 0; border-radius: 0;
@ -160,25 +161,25 @@ nav details[role="list"] {
summary, summary,
summary:not([role]) { summary:not([role]) {
height: auto; height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
} }
&[open] summary { &[open] summary {
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
} }
summary + ul { summary + ul {
margin-top: var(--outline-width); margin-top: var(#{$✨}outline-width);
margin-inline-start: 0; margin-inline-start: 0;
} }
summary[role="link"] { summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); margin-bottom: calc(var(#{$✨}nav-link-spacing-vertical) * -1);
line-height: var(--line-height); line-height: var(#{$✨}line-height);
+ ul { + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
} }
} }
} }
@ -195,13 +196,13 @@ li[role="list"] {
> ul { > ul {
display: none; display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); margin-top: calc(var(#{$✨}nav-link-spacing-vertical) + var(#{$✨}outline-width));
margin-inline-start: calc( margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal) var(#{$✨}nav-element-spacing-horizontal) - var(#{$✨}nav-link-spacing-horizontal)
); );
} }
> a::after { > a::after {
background-image: var(--icon-chevron); background-image: var(#{$✨}icon-chevron);
} }
} }

8
scss/components/_loading.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/** /**
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
@ -20,15 +22,15 @@
vertical-align: text-bottom; vertical-align: text-bottom;
vertical-align: -0.125em; // Visual alignment vertical-align: -0.125em; // Visual alignment
animation: spinner 0.75s linear infinite; animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity); opacity: var(#{$✨}loading-spinner-opacity);
} }
&:not(:empty) { &:not(:empty) {
&::before { &::before {
margin-right: calc(var(--spacing) * 0.5); margin-right: calc(var(#{$✨}spacing) * 0.5);
margin-left: 0; margin-left: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) * 0.5); margin-inline-end: calc(var(#{$✨}spacing) * 0.5);
} }
} }

50
scss/components/_modal.scss
View file

@ -1,11 +1,11 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Modal (<dialog>) * Modal (<dialog>)
*/ */
:root { :root {
--scrollbar-width: 0px; #{$✨}scrollbar-width: 0px;
} }
dialog { dialog {
@ -22,38 +22,38 @@ dialog {
min-width: 100%; min-width: 100%;
height: inherit; height: inherit;
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(#{$✨}spacing);
border: 0; border: 0;
backdrop-filter: var(--modal-overlay-backdrop-filter); backdrop-filter: var(#{$✨}modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(#{$✨}modal-overlay-background-color);
color: var(--color); color: var(#{$✨}color);
// Content // Content
article { article {
max-height: calc(100vh - var(--spacing) * 2); max-height: calc(100vh - var(#{$✨}spacing) * 2);
overflow: auto; overflow: auto;
@if map-get(settings.$breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get(settings.$viewports, "sm"); max-width: map-get($viewports, "sm");
} }
} }
@if map-get(settings.$breakpoints, "md") { @if map-get($breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
max-width: map-get(settings.$viewports, "md"); max-width: map-get($viewports, "md");
} }
} }
> header, > header,
> footer { > footer {
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal); padding: calc(var(#{$✨}block-spacing-vertical) * 0.5) var(#{$✨}block-spacing-horizontal);
} }
> header { > header {
.close { .close {
margin: 0; margin: 0;
margin-left: var(--spacing); margin-left: var(#{$✨}spacing);
float: right; float: right;
} }
} }
@ -65,7 +65,7 @@ dialog {
margin-bottom: 0; margin-bottom: 0;
&:not(:first-of-type) { &:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5); margin-left: calc(var(#{$✨}spacing) * 0.5);
} }
} }
} }
@ -77,22 +77,22 @@ dialog {
} }
// Close icon // Close icon
@if settings.$enable-classes { @if $enable-classes {
.close { .close {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(--block-spacing-vertical) * -0.5); margin-top: calc(var(#{$✨}block-spacing-vertical) * -0.5);
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(#{$✨}typography-spacing-vertical);
margin-left: auto; margin-left: auto;
background-image: var(--icon-close); background-image: var(#{$✨}icon-close);
background-position: center; background-position: center;
background-size: auto 1rem; background-size: auto 1rem;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
@if settings.$enable-transitions { @if $enable-transitions {
transition: opacity var(--transition); transition: opacity var(#{$✨}transition);
} }
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
@ -110,9 +110,9 @@ dialog {
} }
// Utilities // Utilities
@if settings.$enable-classes { @if $enable-classes {
.modal-is-open { .modal-is-open {
padding-right: var(--scrollbar-width, 0px); padding-right: var(#{$✨}scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@ -123,7 +123,7 @@ dialog {
} }
// Animations // Animations
@if (settings.$enable-classes and settings.$enable-transitions) { @if ($enable-classes and $enable-transitions) {
$animation-duration: 0.2s; $animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) { :where(.modal-is-opening, .modal-is-closing) {

31
scss/components/_nav.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/** /**
* Nav * Nav
*/ */
@ -31,30 +33,30 @@ nav {
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-left: calc(var(--nav-element-spacing-horizontal) * -1); margin-left: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
} }
&:last-of-type { &:last-of-type {
margin-right: calc(var(--nav-element-spacing-horizontal) * -1); margin-right: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
} }
} }
li { li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal); padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);
// Minimal support for buttons and forms elements // Minimal support for buttons and forms elements
> * { > * {
--spacing: 0; #{$✨}spacing: 0;
} }
} }
:where(a, [role="link"]) { :where(a, [role="link"]) {
display: inline-block; display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1); calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
text-decoration: none; text-decoration: none;
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
@ -69,16 +71,16 @@ nav {
& ul li { & ul li {
&:not(:first-child) { &:not(:first-child) {
margin-inline-start: var(--nav-link-spacing-horizontal); margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
} }
&:not(:last-child) { &:not(:last-child) {
::after { ::after {
position: absolute; position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2); width: calc(var(#{$✨}nav-link-spacing-horizontal) * 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) / 2);
content: "/"; content: "/";
color: var(--muted-color); color: var(#{$✨}muted-color);
text-align: center; text-align: center;
} }
} }
@ -96,7 +98,7 @@ nav {
[role="button"] { [role="button"] {
margin-right: inherit; margin-right: inherit;
margin-left: inherit; margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
} }
} }
@ -110,7 +112,8 @@ aside {
} }
li { li {
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal); padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5)
var(#{$✨}nav-element-spacing-horizontal);
a { a {
display: block; display: block;

24
scss/components/_progress.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/** /**
* Progress * Progress
*/ */
@ -27,33 +29,37 @@ progress {
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(--spacing) * 0.5); margin-bottom: calc(var(#{$✨}spacing) * 0.5);
overflow: hidden; overflow: hidden;
// Remove Firefox and Opera border // Remove Firefox and Opera border
border: 0; border: 0;
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
background-color: var(--progress-background-color); background-color: var(#{$✨}progress-background-color);
// IE10 uses `color` to set the bar background-color // IE10 uses `color` to set the bar background-color
color: var(--progress-color); color: var(#{$✨}progress-color);
&::-webkit-progress-bar { &::-webkit-progress-bar {
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
background: none; background: none;
} }
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: var(--progress-color); background-color: var(#{$✨}progress-color);
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: var(--progress-color); background-color: var(#{$✨}progress-color);
} }
// Indeterminate state // Indeterminate state
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
&:indeterminate { &:indeterminate {
background: var(--progress-background-color) background: var(#{$✨}progress-background-color)
linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) linear-gradient(
to right,
var(#{$✨}progress-color) 30%,
var(#{$✨}progress-background-color) 30%
)
top left / 150% 150% no-repeat; top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite; animation: progress-indeterminate 1s linear infinite;

14
scss/components/_tooltip.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Tooltip ([data-tooltip]) * Tooltip ([data-tooltip])
@ -25,12 +25,12 @@
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
background: var(--tooltip-background-color); background: var(#{$✨}tooltip-background-color);
content: attr(data-tooltip); content: attr(data-tooltip);
color: var(--tooltip-color); color: var(#{$✨}tooltip-color);
font-style: normal; font-style: normal;
font-weight: var(--font-weight); font-weight: var(#{$✨}font-weight);
font-size: 0.875rem; font-size: 0.875rem;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -50,7 +50,7 @@
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(--tooltip-background-color); color: var(#{$✨}tooltip-background-color);
} }
&[data-placement="bottom"] { &[data-placement="bottom"] {
@ -111,7 +111,7 @@
} }
} }
@if settings.$enable-transitions { @if $enable-transitions {
// Animations, excluding touch devices // Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&[data-placement="bottom"]:focus, &[data-placement="bottom"]:focus,

110
scss/content/_button.scss
View file

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

32
scss/content/_code.scss
View file

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

2
scss/content/_embedded.scss
View file

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

6
scss/content/_miscs.scss
View file

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

16
scss/content/_table.scss
View file

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

134
scss/forms/_basics.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Basics form elements * Basics form elements
@ -17,7 +17,7 @@ select,
textarea { textarea {
margin: 0; // 2 margin: 0; // 2
font-size: 1rem; // 1 font-size: 1rem; // 1
line-height: var(--line-height); // 1 line-height: var(#{$✨}line-height); // 1
font-family: inherit; // 1 font-family: inherit; // 1
letter-spacing: inherit; // 2 letter-spacing: inherit; // 2
} }
@ -113,15 +113,15 @@ textarea {
// Force height for alternatives input types // Force height for alternatives input types
input:not([type="checkbox"], [type="radio"], [type="range"]) { input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc( height: calc(
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (1rem * var(#{$✨}line-height)) + (var(#{$✨}form-element-spacing-vertical) * 2) +
(var(--border-width) * 2) (var(#{$✨}border-width) * 2)
); );
} }
// Fieldset // Fieldset
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: var(--spacing); margin-bottom: var(#{$✨}spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -130,8 +130,8 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: calc(var(--spacing) * 0.25); margin-bottom: calc(var(#{$✨}spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight)); font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
} }
// Blocks, 100% // Blocks, 100%
@ -146,28 +146,28 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select, select,
textarea { textarea {
appearance: none; appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
} }
// Commons styles // Commons styles
input, input,
select, select,
textarea { textarea {
--background-color: var(--form-element-background-color); #{$✨}background-color: var(#{$✨}form-element-background-color);
--border-color: var(--form-element-border-color); #{$✨}border-color: var(#{$✨}form-element-border-color);
--color: var(--form-element-color); #{$✨}color: var(#{$✨}form-element-color);
--box-shadow: none; #{$✨}box-shadow: none;
border: var(--border-width) solid var(--border-color); border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
outline: none; outline: none;
background-color: var(--background-color); background-color: var(#{$✨}background-color);
box-shadow: var(--box-shadow); box-shadow: var(#{$✨}box-shadow);
color: var(--color); color: var(#{$✨}color);
font-weight: var(--font-weight); font-weight: var(#{$✨}font-weight);
@if settings.$enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), border-color var(--transition), transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(--transition), box-shadow var(--transition); color var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
} }
@ -175,7 +175,7 @@ textarea {
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]), input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
:where(select, textarea) { :where(select, textarea) {
&:is(:active, :focus) { &:is(:active, :focus) {
--background-color: var(--form-element-active-background-color); #{$✨}background-color: var(#{$✨}form-element-active-background-color);
} }
} }
@ -183,7 +183,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]), input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
:where(select, textarea) { :where(select, textarea) {
&:is(:active, :focus) { &:is(:active, :focus) {
--border-color: var(--form-element-active-border-color); #{$✨}border-color: var(#{$✨}form-element-active-border-color);
} }
} }
@ -192,7 +192,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [typ
select, select,
textarea { textarea {
&:focus { &:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); #{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
} }
} }
@ -202,9 +202,9 @@ select[disabled],
textarea[disabled], textarea[disabled],
:where(fieldset[disabled]) :where(fieldset[disabled])
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
--background-color: var(--form-element-disabled-background-color); #{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); #{$✨}border-color: var(#{$✨}form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity); opacity: var(#{$✨}form-element-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
@ -212,16 +212,16 @@ textarea[disabled],
:where(input, select, textarea) { :where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { &:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
&[aria-invalid] { &[aria-invalid] {
@if settings.$enable-important { @if $enable-important {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal); padding-left: var(#{$✨}form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal) !important; padding-inline-start: var(#{$✨}form-element-spacing-horizontal) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem) !important;
} @else { } @else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(#{$✨}form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
} }
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
@ -229,38 +229,50 @@ textarea[disabled],
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
background-image: var(--icon-valid); background-image: var(#{$✨}icon-valid);
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
background-image: var(--icon-invalid); background-image: var(#{$✨}icon-invalid);
} }
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color); #{$✨}border-color: var(#{$✨}form-element-valid-border-color);
&:is(:active, :focus) { &:is(:active, :focus) {
@if settings.$enable-important { @if $enable-important {
--border-color: var(--form-element-valid-active-border-color) !important; #{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important; #{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color) !important;
} @else { } @else {
--border-color: var(--form-element-valid-active-border-color); #{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color); #{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-valid-focus-color);
} }
} }
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color); #{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
&:is(:active, :focus) { &:is(:active, :focus) {
@if settings.$enable-important { @if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important; #{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important; #{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color) !important;
} @else { } @else {
--border-color: var(--form-element-invalid-active-border-color); #{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color); #{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color);
} }
} }
} }
@ -282,7 +294,7 @@ input::-webkit-input-placeholder,
textarea::placeholder, textarea::placeholder,
textarea::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
select:invalid { select:invalid {
color: var(--form-element-placeholder-color); color: var(#{$✨}form-element-placeholder-color);
opacity: 1; opacity: 1;
} }
@ -290,7 +302,7 @@ select:invalid {
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
textarea { textarea {
margin-bottom: var(--spacing); margin-bottom: var(#{$✨}spacing);
} }
// Select // Select
@ -302,11 +314,11 @@ select {
} }
&:not([multiple], [size]) { &:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-right: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal); padding-left: var(#{$✨}form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal); padding-inline-start: var(#{$✨}form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-inline-end: calc(var(#{$✨}form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron); background-image: var(#{$✨}icon-chevron);
background-position: center right 0.75rem; background-position: center right 0.75rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -326,15 +338,15 @@ select {
+ small { + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(--spacing) * -0.75); margin-top: calc(var(#{$✨}spacing) * -0.75);
margin-bottom: var(--spacing); margin-bottom: var(#{$✨}spacing);
color: var(--muted-color); color: var(#{$✨}muted-color);
} }
} }
// Styles for Input inside a label // Styles for Input inside a label
label { label {
> :where(input, select, textarea) { > :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25); margin-top: calc(var(#{$✨}spacing) * 0.25);
} }
} }

50
scss/forms/_checkbox-radio-switch.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Checkboxes, Radios and Switches * Checkboxes, Radios and Switches
@ -16,7 +16,7 @@
margin-left: 0; margin-left: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: 0.375em; margin-inline-end: 0.375em;
border-width: var(--border-width); border-width: var(#{$✨}border-width);
font-size: inherit; font-size: inherit;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -28,9 +28,9 @@
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
--background-color: var(--primary); #{$✨}background-color: var(#{$✨}primary);
--border-color: var(--primary); #{$✨}border-color: var(#{$✨}primary);
background-image: var(--icon-checkbox); background-image: var(#{$✨}icon-checkbox);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -47,9 +47,9 @@
// Checkboxes // Checkboxes
[type="checkbox"] { [type="checkbox"] {
&:indeterminate { &:indeterminate {
--background-color: var(--primary); #{$✨}background-color: var(#{$✨}primary);
--border-color: var(--primary); #{$✨}border-color: var(#{$✨}primary);
background-image: var(--icon-minus); background-image: var(#{$✨}icon-minus);
background-position: center; background-position: center;
background-size: 0.75em auto; background-size: 0.75em auto;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -63,7 +63,7 @@
&:checked, &:checked,
&:checked:active, &:checked:active,
&:checked:focus { &:checked:focus {
--background-color: var(--primary-inverse); #{$✨}background-color: var(#{$✨}primary-inverse);
border-width: 0.35em; border-width: 0.35em;
background-image: none; background-image: none;
} }
@ -71,9 +71,9 @@
// Switchs // Switchs
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
--background-color: var(--switch-background-color); #{$✨}background-color: var(#{$✨}switch-background-color);
--border-color: var(--switch-background-color); #{$✨}border-color: var(#{$✨}switch-background-color);
--color: var(--switch-color); #{$✨}color: var(#{$✨}switch-color);
// Config // Config
$switch-height: 1.25em; $switch-height: 1.25em;
@ -83,30 +83,30 @@
// Styles // Styles
width: $switch-width; width: $switch-width;
height: $switch-height; height: $switch-height;
border: var(--border-width) solid var(--border-color); border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: $switch-height; border-radius: $switch-height;
background-color: var(--background-color); background-color: var(#{$✨}background-color);
line-height: $switch-height; line-height: $switch-height;
&:focus { &:focus {
--background-color: var(--switch-background-color); #{$✨}background-color: var(#{$✨}switch-background-color);
--border-color: var(--switch-background-color); #{$✨}border-color: var(#{$✨}switch-background-color);
} }
&:checked { &:checked {
--background-color: var(--switch-checked-background-color); #{$✨}background-color: var(#{$✨}switch-checked-background-color);
--border-color: var(--switch-checked-background-color); #{$✨}border-color: var(#{$✨}switch-checked-background-color);
} }
&:before { &:before {
display: block; display: block;
width: calc(#{$switch-height} - (var(--border-width) * 2)); width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2));
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(--color); background-color: var(#{$✨}color);
content: ""; content: "";
@if settings.$enable-transitions { @if $enable-transitions {
transition: margin $switch-transition; transition: margin $switch-transition;
} }
} }
@ -115,8 +115,8 @@
background-image: none; background-image: none;
&::before { &::before {
margin-left: calc(#{$switch-width * 0.5} - var(--border-width)); margin-left: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width)); margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
} }
} }
} }
@ -129,10 +129,10 @@
[type="checkbox"][role="switch"], [type="checkbox"][role="switch"],
[type="checkbox"][role="switch"]:checked { [type="checkbox"][role="switch"]:checked {
&[aria-invalid="false"] { &[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color); #{$✨}border-color: var(#{$✨}form-element-valid-border-color);
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color); #{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
} }
} }

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

@ -1,3 +1,5 @@
@use "../settings" as *;
/** /**
* Input type color * Input type color
*/ */
@ -19,7 +21,7 @@
// Swatch // Swatch
@mixin color-swatch { @mixin color-swatch {
border: 0; border: 0;
border-radius: calc(var(--border-radius) * 0.5); border-radius: calc(var(#{$✨}border-radius) * 0.5);
} }
&::-webkit-color-swatch { &::-webkit-color-swatch {

22
scss/forms/_input-date.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/** /**
* Input type datetime * Input type datetime
*/ */
@ -5,18 +7,18 @@
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
--icon-position: 0.75rem; #{$✨}icon-position: 0.75rem;
--icon-width: 1rem; #{$✨}icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position)); padding-right: calc(var(#{$✨}icon-width) + var(#{$✨}icon-position));
background-image: var(--icon-date); background-image: var(#{$✨}icon-date);
background-position: center right var(--icon-position); background-position: center right var(#{$✨}icon-position);
background-size: var(--icon-width) auto; background-size: var(#{$✨}icon-width) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
// Time // Time
&[type="time"] { &[type="time"] {
background-image: var(--icon-time); background-image: var(#{$✨}icon-time);
} }
} }
@ -27,9 +29,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
[type="time"], [type="time"],
[type="week"] { [type="week"] {
&::-webkit-calendar-picker-indicator { &::-webkit-calendar-picker-indicator {
width: var(--icon-width); width: var(#{$✨}icon-width);
margin-right: calc(var(--icon-width) * -1); margin-right: calc(var(#{$✨}icon-width) * -1);
margin-left: var(--icon-position); margin-left: var(#{$✨}icon-position);
opacity: 0; opacity: 0;
} }
} }

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

@ -1,46 +1,46 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Input type file * Input type file
*/ */
[type="file"] { [type="file"] {
--color: var(--muted-color); #{$✨}color: var(#{$✨}muted-color);
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0; padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
@mixin file-selector-button { @mixin file-selector-button {
--background-color: var(--secondary); #{$✨}background-color: var(#{$✨}secondary);
--border-color: var(--secondary); #{$✨}border-color: var(#{$✨}secondary);
--color: var(--secondary-inverse); #{$✨}color: var(#{$✨}secondary-inverse);
margin-right: calc(var(--spacing) / 2); margin-right: calc(var(#{$✨}spacing) / 2);
margin-left: 0; margin-left: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) / 2); margin-inline-end: calc(var(#{$✨}spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5) padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5); calc(var(#{$✨}form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color); border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
outline: none; outline: none;
background-color: var(--background-color); background-color: var(#{$✨}background-color);
box-shadow: var(--box-shadow); box-shadow: var(#{$✨}box-shadow);
color: var(--color); color: var(#{$✨}color);
font-weight: var(--font-weight); font-weight: var(#{$✨}font-weight);
font-size: 1rem; font-size: 1rem;
line-height: var(--line-height); line-height: var(#{$✨}line-height);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@if settings.$enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), border-color var(--transition), transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
color var(--transition), box-shadow var(--transition); color var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
&:is(:hover, :active, :focus) { &:is(:hover, :active, :focus) {
--background-color: var(--secondary-hover); #{$✨}background-color: var(#{$✨}secondary-hover);
--border-color: var(--secondary-hover); #{$✨}border-color: var(#{$✨}secondary-hover);
} }
} }

24
scss/forms/_input-range.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Input type range * Input type range
@ -22,11 +22,11 @@
@mixin slider-track { @mixin slider-track {
width: 100%; width: 100%;
height: $height-track; height: $height-track;
border-radius: var(--border-radius); border-radius: var(#{$✨}border-radius);
background-color: var(--range-border-color); background-color: var(#{$✨}range-border-color);
@if settings.$enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), box-shadow var(--transition); transition: background-color var(#{$✨}transition), box-shadow var(#{$✨}transition);
} }
} }
@ -48,13 +48,13 @@
width: $height-thumb; width: $height-thumb;
height: $height-thumb; height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))}; margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(--range-thumb-border-color); border: $border-thumb solid var(#{$✨}range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(--range-thumb-color); background-color: var(#{$✨}range-thumb-color);
cursor: pointer; cursor: pointer;
@if settings.$enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), transform var(--transition); transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
} }
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@ -71,12 +71,12 @@
&:hover, &:hover,
&:focus { &:focus {
--range-border-color: var(--range-active-border-color); #{$✨}range-border-color: var(#{$✨}range-active-border-color);
--range-thumb-color: var(--range-thumb-hover-color); #{$✨}range-thumb-color: var(#{$✨}range-thumb-hover-color);
} }
&:active { &:active {
--range-thumb-color: var(--range-thumb-active-color); #{$✨}range-thumb-color: var(#{$✨}range-thumb-active-color);
// Slider Thumb // Slider Thumb
&::-webkit-slider-thumb { &::-webkit-slider-thumb {

16
scss/forms/_input-search.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Input type search * Input type search
@ -7,28 +7,28 @@
// :not() are needed to add Specificity and avoid !important on padding // :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] { &[type="search"] {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem; border-radius: 5rem;
background-image: var(--icon-search); background-image: var(#{$✨}icon-search);
background-position: center left 1.125rem; background-position: center left 1.125rem;
background-size: 1rem auto; background-size: 1rem auto;
background-repeat: no-repeat; background-repeat: no-repeat;
&[aria-invalid] { &[aria-invalid] {
@if settings.$enable-important { @if $enable-important {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem) !important;
} @else { } @else {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
} }
background-position: center left 1.125rem, center right 0.75rem; background-position: center left 1.125rem, center right 0.75rem;
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
background-image: var(--icon-search), var(--icon-valid); background-image: var(#{$✨}icon-search), var(#{$✨}icon-valid);
} }
&[aria-invalid="true"] { &[aria-invalid="true"] {
background-image: var(--icon-search), var(--icon-invalid); background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
} }
} }
} }

32
scss/layout/_container.scss
View file

@ -1,6 +1,6 @@
@use "../settings"; @use "../settings" as *;
@if (settings.$enable-class-container and settings.$enable-classes) { @if ($enable-class-container and $enable-classes) {
/** /**
* Container * Container
*/ */
@ -10,34 +10,34 @@
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-right: var(--spacing); padding-right: var(#{$✨}spacing);
padding-left: var(--spacing); padding-left: var(#{$✨}spacing);
} }
.container { .container {
@if map-get(settings.$breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get(settings.$viewports, "sm"); max-width: map-get($viewports, "sm");
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
} }
@if map-get(settings.$breakpoints, "md") { @if map-get($breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
max-width: map-get(settings.$viewports, "md"); max-width: map-get($viewports, "md");
} }
} }
@if map-get(settings.$breakpoints, "lg") { @if map-get($breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get(settings.$viewports, "lg"); max-width: map-get($viewports, "lg");
} }
} }
@if map-get(settings.$breakpoints, "xl") { @if map-get($breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) { @media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get(settings.$viewports, "xl"); max-width: map-get($viewports, "xl");
} }
} }
} }

14
scss/layout/_document.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/** /**
* Document * Document
* Content-box & Responsive typography * Content-box & Responsive typography
@ -35,12 +37,12 @@
-webkit-tap-highlight-color: transparent; // 5 -webkit-tap-highlight-color: transparent; // 5
-webkit-text-size-adjust: 100%; // 6 -webkit-text-size-adjust: 100%; // 6
text-size-adjust: 100%; // 6 text-size-adjust: 100%; // 6
background-color: var(--background-color); background-color: var(#{$✨}background-color);
color: var(--color); color: var(#{$✨}color);
font-weight: var(--font-weight); font-weight: var(#{$✨}font-weight);
font-size: var(--font-size); font-size: var(#{$✨}font-size);
line-height: var(--line-height); // 2 line-height: var(#{$✨}line-height); // 2
font-family: var(--font-family); font-family: var(#{$✨}font-family);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 3 overflow-wrap: break-word; // 3
cursor: default; // 1 cursor: default; // 1

12
scss/layout/_grid.scss
View file

@ -1,20 +1,20 @@
@use "../settings"; @use "../settings" as *;
@if (settings.$enable-classes and settings.$enable-grid) { @if ($enable-classes and $enable-grid) {
/** /**
* Grid * Grid
* Minimal grid system with auto-layout columns * Minimal grid system with auto-layout columns
*/ */
.grid { .grid {
grid-column-gap: var(--grid-spacing-horizontal); grid-column-gap: var(#{$✨}grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical); grid-row-gap: var(#{$✨}grid-spacing-vertical);
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin: 0; margin: 0;
@if map-get(settings.$breakpoints, "lg") { @if map-get($breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
} }
} }

6
scss/layout/_scroller.scss
View file

@ -1,3 +1,5 @@
@use "../settings" as *;
/** /**
* Horizontal scroller (<figure>) * Horizontal scroller (<figure>)
*/ */
@ -10,7 +12,7 @@ figure {
overflow-x: auto; overflow-x: auto;
figcaption { figcaption {
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(#{$✨}spacing) * 0.5) 0;
color: var(--muted-color); color: var(#{$✨}muted-color);
} }
} }

4
scss/layout/_section.scss
View file

@ -1,8 +1,10 @@
@use "../settings" as *;
/** /**
* Section * Section
* Responsive spacings for section * Responsive spacings for section
*/ */
section { section {
margin-bottom: var(--block-spacing-vertical); margin-bottom: var(#{$✨}block-spacing-vertical);
} }

36
scss/layout/_sectioning.scss
View file

@ -1,4 +1,4 @@
@use "../settings"; @use "../settings" as *;
/** /**
* Sectioning * Sectioning
@ -19,7 +19,7 @@ main {
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Remove the margin in all browsers (opinionated) // 1. Remove the margin in all browsers (opinionated)
#{settings.$semantic-root-element} { #{$semantic-root-element} {
width: 100%; width: 100%;
margin: 0; // 1 margin: 0; // 1
@ -31,34 +31,34 @@ main {
margin-left: auto; margin-left: auto;
// Semantic container // Semantic container
@if settings.$enable-semantic-container { @if $enable-semantic-container {
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
// Centered viewport // Centered viewport
@if settings.$enable-viewport { @if $enable-viewport {
@if map-get(settings.$breakpoints, "sm") and settings.$enable-viewport { @if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get(settings.$viewports, "sm"); max-width: map-get($viewports, "sm");
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
} }
@if map-get(settings.$breakpoints, "md") and settings.$enable-viewport { @if map-get($breakpoints, "md") and $enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
max-width: map-get(settings.$viewports, "md"); max-width: map-get($viewports, "md");
} }
} }
@if map-get(settings.$breakpoints, "lg") and settings.$enable-viewport { @if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get(settings.$viewports, "lg"); max-width: map-get($viewports, "lg");
} }
} }
@if map-get(settings.$breakpoints, "xl") and settings.$enable-viewport { @if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get(settings.$breakpoints, "xl")) { @media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get(settings.$viewports, "xl"); max-width: map-get($viewports, "xl");
} }
} }
} }
@ -66,7 +66,7 @@ main {
// Semantic container // Semantic container
@else { @else {
padding: var(--block-spacing-vertical) 0; padding: var(#{$✨}block-spacing-vertical) 0;
} }
} }
} }

14
scss/themes/_default.scss
View file

@ -1,6 +1,6 @@
@use "../settings"; @use "../settings" as *;
@use "default/light" as *; @use "default/light";
@use "default/dark" as *; @use "default/dark";
// Commons styles // Commons styles
@use "default/styles"; @use "default/styles";
@ -9,26 +9,26 @@
// Can be forced with data-theme="light" // Can be forced with data-theme="light"
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
@include light; @include light.theme;
} }
// Dark theme (Auto) // Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled // Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
@include dark; @include dark.theme;
} }
} }
// Dark theme (Forced) // Dark theme (Forced)
// Enabled if forced with data-theme="dark" // Enabled if forced with data-theme="dark"
[data-theme="dark"] { [data-theme="dark"] {
@include dark; @include dark.theme;
} }
progress, progress,
[type="checkbox"], [type="checkbox"],
[type="radio"], [type="radio"],
[type="range"] { [type="range"] {
accent-color: var(--primary); accent-color: var(#{$✨}primary);
} }

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

@ -1,119 +1,119 @@
@use "colors" as *; @use "colors" as *;
@use "../../settings" as *;
@use "../../utils/functions"; @use "../../utils/functions";
// Default: Dark theme // Default: Dark theme
@mixin dark { @mixin theme {
--background-color: #{mix($black, $grey-900, 37.5%)}; #{$✨}background-color: #{mix($black, $grey-900, 37.5%)};
// Texts colors // Texts colors
--color: #{$grey-200}; #{$✨}color: #{$grey-200};
--h1-color: #{$grey-50}; #{$✨}h1-color: #{$grey-50};
--h2-color: #{mix($grey-100, $grey-50)}; #{$✨}h2-color: #{mix($grey-100, $grey-50)};
--h3-color: #{$grey-100}; #{$✨}h3-color: #{$grey-100};
--h4-color: #{mix($grey-200, $grey-100)}; #{$✨}h4-color: #{mix($grey-200, $grey-100)};
--h5-color: #{$grey-200}; #{$✨}h5-color: #{$grey-200};
--h6-color: #{mix($grey-300, $grey-200)}; #{$✨}h6-color: #{mix($grey-300, $grey-200)};
// Muted colors // Muted colors
--muted-color: #{$grey-500}; #{$✨}muted-color: #{$grey-500};
--muted-border-color: #{mix($grey-900, $grey-800, 75%)}; #{$✨}muted-border-color: #{mix($grey-900, $grey-800, 75%)};
// Primary colors // Primary colors
--primary: #{$primary-600}; #{$✨}primary: #{$primary-600};
--primary-hover: #{$primary-500}; #{$✨}primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, 0.25)}; #{$✨}primary-focus: #{rgba($primary-600, 0.25)};
--primary-inverse: #{$white}; #{$✨}primary-inverse: #{$white};
// Secondary colors // Secondary colors
--secondary: #{$grey-600}; #{$✨}secondary: #{$grey-600};
--secondary-hover: #{$grey-500}; #{$✨}secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-500, 0.25)}; #{$✨}secondary-focus: #{rgba($grey-500, 0.25)};
--secondary-inverse: #{$white}; #{$✨}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
--contrast: #{$grey-50}; #{$✨}contrast: #{$grey-50};
--contrast-hover: #{$white}; #{$✨}contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-500, 0.25)}; #{$✨}contrast-focus: #{rgba($grey-500, 0.25)};
--contrast-inverse: #{$black}; #{$✨}contrast-inverse: #{$black};
// Highlighted text (<mark>) // Highlighted text (<mark>)
--mark-background-color: #{mix($grey-300, $amber-300)}; #{$✨}mark-background-color: #{mix($grey-300, $amber-300)};
--mark-color: #{mix($black, $grey-900, 37.5%)}; #{$✨}mark-color: #{mix($black, $grey-900, 37.5%)};
// Inserted (<ins>) & Deleted (<ins>) // Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700}; #{$✨}ins-color: #{$green-700};
--del-color: #{$red-800}; #{$✨}del-color: #{$red-800};
// Blockquote // Blockquote
--blockquote-border-color: var(--muted-border-color); #{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
--blockquote-footer-color: var(--muted-color); #{$✨}blockquote-footer-color: var(#{$✨}muted-color);
// Button // Button
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)' // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc. // Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Form elements // Form elements
--form-element-background-color: #{mix($black, $grey-900, 37.5%)}; #{$✨}form-element-background-color: #{mix($black, $grey-900, 37.5%)};
--form-element-border-color: #{mix($grey-800, $grey-700)}; #{$✨}form-element-border-color: #{mix($grey-800, $grey-700)};
--form-element-color: var(--color); #{$✨}form-element-color: var(#{$✨}color);
--form-element-placeholder-color: var(--muted-color); #{$✨}form-element-placeholder-color: var(#{$✨}muted-color);
--form-element-active-background-color: var(--form-element-background-color); #{$✨}form-element-active-background-color: var(#{$✨}form-element-background-color);
--form-element-active-border-color: var(--primary); #{$✨}form-element-active-border-color: var(#{$✨}primary);
--form-element-focus-color: var(--primary-focus); #{$✨}form-element-focus-color: var(#{$✨}primary-focus);
--form-element-disabled-background-color: #{$grey-800}; #{$✨}form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700}; #{$✨}form-element-disabled-border-color: #{$grey-700};
--form-element-disabled-opacity: 0.5; #{$✨}form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-900}; #{$✨}form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800}; #{$✨}form-element-invalid-active-border-color: #{$red-800};
--form-element-invalid-focus-color: #{rgba($red-800, 0.25)}; #{$✨}form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
--form-element-valid-border-color: #{$green-800}; #{$✨}form-element-valid-border-color: #{$green-800};
--form-element-valid-active-border-color: #{$green-700}; #{$✨}form-element-valid-active-border-color: #{$green-700};
--form-element-valid-focus-color: #{rgba($green-700, 0.25)}; #{$✨}form-element-valid-focus-color: #{rgba($green-700, 0.25)};
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
--switch-background-color: #{mix($grey-800, $grey-700)}; #{$✨}switch-background-color: #{mix($grey-800, $grey-700)};
--switch-color: var(--primary-inverse); #{$✨}switch-color: var(#{$✨}primary-inverse);
--switch-checked-background-color: var(--primary); #{$✨}switch-checked-background-color: var(#{$✨}primary);
// Range (input[type="range"]) // Range (input[type="range"])
--range-border-color: #{mix($grey-900, $grey-800)}; #{$✨}range-border-color: #{mix($grey-900, $grey-800)};
--range-active-border-color: #{$grey-800}; #{$✨}range-active-border-color: #{$grey-800};
--range-thumb-border-color: var(--background-color); #{$✨}range-thumb-border-color: var(#{$✨}background-color);
--range-thumb-color: var(--secondary); #{$✨}range-thumb-color: var(#{$✨}secondary);
--range-thumb-hover-color: var(--secondary-hover); #{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
--range-thumb-active-color: var(--primary); #{$✨}range-thumb-active-color: var(#{$✨}primary);
// Table // Table
--table-border-color: var(--muted-border-color); #{$✨}table-border-color: var(#{$✨}muted-border-color);
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)}; #{$✨}table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
// Code // Code
--code-background-color: #{mix($black, $grey-900, 12.5%)}; #{$✨}code-background-color: #{mix($black, $grey-900, 12.5%)};
--code-color: var(--muted-color); #{$✨}code-color: var(#{$✨}muted-color);
--code-kbd-background-color: var(--contrast); #{$✨}code-kbd-background-color: var(#{$✨}contrast);
--code-kbd-color: var(--contrast-inverse); #{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
--code-tag-color: #{hsl(330, 30%, 50%)}; #{$✨}code-tag-color: #{hsl(330, 30%, 50%)};
--code-property-color: #{hsl(185, 30%, 50%)}; #{$✨}code-property-color: #{hsl(185, 30%, 50%)};
--code-value-color: #{hsl(40, 10%, 50%)}; #{$✨}code-value-color: #{hsl(40, 10%, 50%)};
--code-comment-color: #{mix($grey-700, $grey-600)}; #{$✨}code-comment-color: #{mix($grey-700, $grey-600)};
// Accordion (<details>) // Accordion (<details>)
--accordion-border-color: var(--muted-border-color); #{$✨}accordion-border-color: var(#{$✨}muted-border-color);
--accordion-active-summary-color: var(--primary); #{$✨}accordion-active-summary-color: var(#{$✨}primary);
--accordion-close-summary-color: var(--color); #{$✨}accordion-close-summary-color: var(#{$✨}color);
--accordion-open-summary-color: var(--muted-color); #{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
// Card (<article>) // Card (<article>)
$box-shadow-elevation: 1rem; $box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem; $box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06; $box-shadow-opacity: 0.06;
--card-background-color: #{mix($black, $grey-900, 25%)}; #{$✨}card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: var(--card-background-color); #{$✨}card-border-color: var(#{$✨}card-background-color);
--card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{( #{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
$box-shadow-blur-strengh * 0.029 #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
)} #{rgba($black, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{( #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
$box-shadow-blur-strengh * 0.067 $box-shadow-blur-strengh * 0.067
)} #{rgba($black, ($box-shadow-opacity * 0.4))}, )} #{rgba($black, ($box-shadow-opacity * 0.4))},
@ -131,41 +131,41 @@
$box-shadow-opacity $box-shadow-opacity
)}, )},
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25))}; 0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25))};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)}; #{$✨}card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
--dropdown-background-color: #{$grey-900}; #{$✨}dropdown-background-color: #{$grey-900};
--dropdown-border-color: #{mix($grey-900, $grey-800)}; #{$✨}dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-box-shadow: var(--card-box-shadow); #{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
--dropdown-color: var(--color); #{$✨}dropdown-color: var(#{$✨}color);
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)}; #{$✨}dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)}; #{$✨}modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
// Progress // Progress
--progress-background-color: #{mix($grey-900, $grey-800)}; #{$✨}progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary); #{$✨}progress-color: var(#{$✨}primary);
// Loading ([aria-busy=true]) // Loading ([aria-busy=true])
--loading-spinner-opacity: 0.5; #{$✨}loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast); #{$✨}tooltip-background-color: var(#{$✨}contrast);
--tooltip-color: var(--contrast-inverse); #{$✨}tooltip-color: var(#{$✨}contrast-inverse);
// Icons // Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
// Document // Document
color-scheme: dark; color-scheme: dark;

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

@ -1,118 +1,118 @@
@use "colors" as *; @use "colors" as *;
@use "../../settings" as *;
@use "../../utils/functions"; @use "../../utils/functions";
// Default: Light theme // Default: Light theme
@mixin light { @mixin theme {
--background-color: #{$white}; #{$✨}background-color: #{$white};
// Texts colors // Texts colors
--color: #{$grey-700}; #{$✨}color: #{$grey-700};
--h1-color: #{$grey-900}; #{$✨}h1-color: #{$grey-900};
--h2-color: #{mix($grey-900, $grey-800)}; #{$✨}h2-color: #{mix($grey-900, $grey-800)};
--h3-color: #{$grey-800}; #{$✨}h3-color: #{$grey-800};
--h4-color: #{mix($grey-800, $grey-700)}; #{$✨}h4-color: #{mix($grey-800, $grey-700)};
--h5-color: #{$grey-700}; #{$✨}h5-color: #{$grey-700};
--h6-color: #{mix($grey-700, $grey-600)}; #{$✨}h6-color: #{mix($grey-700, $grey-600)};
// Muted colors // Muted colors
--muted-color: #{$grey-500}; #{$✨}muted-color: #{$grey-500};
--muted-border-color: #{$grey-50}; #{$✨}muted-border-color: #{$grey-50};
// Primary colors // Primary colors
--primary: #{$primary-600}; #{$✨}primary: #{$primary-600};
--primary-hover: #{$primary-700}; #{$✨}primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, 0.125)}; #{$✨}primary-focus: #{rgba($primary-600, 0.125)};
--primary-inverse: #{$white}; #{$✨}primary-inverse: #{$white};
// Secondary colors // Secondary colors
--secondary: #{$grey-600}; #{$✨}secondary: #{$grey-600};
--secondary-hover: #{$grey-700}; #{$✨}secondary-hover: #{$grey-700};
--secondary-focus: #{rgba($grey-600, 0.125)}; #{$✨}secondary-focus: #{rgba($grey-600, 0.125)};
--secondary-inverse: #{$white}; #{$✨}secondary-inverse: #{$white};
// Contrast colors // Contrast colors
--contrast: #{$grey-900}; #{$✨}contrast: #{$grey-900};
--contrast-hover: #{$black}; #{$✨}contrast-hover: #{$black};
--contrast-focus: #{rgba($grey-600, 0.125)}; #{$✨}contrast-focus: #{rgba($grey-600, 0.125)};
--contrast-inverse: #{$white}; #{$✨}contrast-inverse: #{$white};
// Highlighted text (<mark>) // Highlighted text (<mark>)
--mark-background-color: #{mix($amber-100, $amber-50)}; #{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
--mark-color: #{mix($grey-900, $amber-900, 75%)}; #{$✨}mark-color: #{mix($grey-900, $amber-900, 75%)};
// Inserted (<ins>) & Deleted (<ins>) // Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700}; #{$✨}ins-color: #{$green-700};
--del-color: #{$red-800}; #{$✨}del-color: #{$red-800};
// Blockquote // Blockquote
--blockquote-border-color: var(--muted-border-color); #{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
--blockquote-footer-color: var(--muted-color); #{$✨}blockquote-footer-color: var(#{$✨}muted-color);
// Button // Button
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)' // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc. // Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); #{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Form elements // Form elements
--form-element-background-color: transparent; #{$✨}form-element-background-color: transparent;
--form-element-border-color: #{$grey-300}; #{$✨}form-element-border-color: #{$grey-300};
--form-element-color: var(--color); #{$✨}form-element-color: var(#{$✨}color);
--form-element-placeholder-color: var(--muted-color); #{$✨}form-element-placeholder-color: var(#{$✨}muted-color);
--form-element-active-background-color: transparent; #{$✨}form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary); #{$✨}form-element-active-border-color: var(#{$✨}primary);
--form-element-focus-color: var(--primary-focus); #{$✨}form-element-focus-color: var(#{$✨}primary-focus);
--form-element-disabled-background-color: #{$grey-100}; #{$✨}form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300}; #{$✨}form-element-disabled-border-color: #{$grey-300};
--form-element-disabled-opacity: 0.5; #{$✨}form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-800}; #{$✨}form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-700}; #{$✨}form-element-invalid-active-border-color: #{$red-700};
--form-element-invalid-focus-color: #{rgba($red-700, 0.125)}; #{$✨}form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
--form-element-valid-border-color: #{$green-700}; #{$✨}form-element-valid-border-color: #{$green-700};
--form-element-valid-active-border-color: #{$green-600}; #{$✨}form-element-valid-active-border-color: #{$green-600};
--form-element-valid-focus-color: #{rgba($green-600, 0.125)}; #{$✨}form-element-valid-focus-color: #{rgba($green-600, 0.125)};
// Switch (input[type="checkbox"][role="switch"]) // Switch (input[type="checkbox"][role="switch"])
--switch-background-color: #{$grey-200}; #{$✨}switch-background-color: #{$grey-200};
--switch-color: var(--primary-inverse); #{$✨}switch-color: var(#{$✨}primary-inverse);
--switch-checked-background-color: var(--primary); #{$✨}switch-checked-background-color: var(#{$✨}primary);
// Range (input[type="range"]) // Range (input[type="range"])
--range-border-color: #{$grey-100}; #{$✨}range-border-color: #{$grey-100};
--range-active-border-color: #{$grey-200}; #{$✨}range-active-border-color: #{$grey-200};
--range-thumb-border-color: var(--background-color); #{$✨}range-thumb-border-color: var(#{$✨}background-color);
--range-thumb-color: var(--secondary); #{$✨}range-thumb-color: var(#{$✨}secondary);
--range-thumb-hover-color: var(--secondary-hover); #{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
--range-thumb-active-color: var(--primary); #{$✨}range-thumb-active-color: var(#{$✨}primary);
// Table // Table
--table-border-color: var(--muted-border-color); #{$✨}table-border-color: var(#{$✨}muted-border-color);
--table-row-stripped-background-color: #{mix($grey-50, $white)}; #{$✨}table-row-stripped-background-color: #{mix($grey-50, $white)};
// Code // Code
--code-background-color: #{$grey-50}; #{$✨}code-background-color: #{$grey-50};
--code-color: var(--muted-color); #{$✨}code-color: var(#{$✨}muted-color);
--code-kbd-background-color: var(--contrast); #{$✨}code-kbd-background-color: var(#{$✨}contrast);
--code-kbd-color: var(--contrast-inverse); #{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
--code-tag-color: #{hsl(330, 40%, 50%)}; #{$✨}code-tag-color: #{hsl(330, 40%, 50%)};
--code-property-color: #{hsl(185, 40%, 40%)}; #{$✨}code-property-color: #{hsl(185, 40%, 40%)};
--code-value-color: #{hsl(40, 20%, 50%)}; #{$✨}code-value-color: #{hsl(40, 20%, 50%)};
--code-comment-color: #{$grey-300}; #{$✨}code-comment-color: #{$grey-300};
// Accordion (<details>) // Accordion (<details>)
--accordion-border-color: var(--muted-border-color); #{$✨}accordion-border-color: var(#{$✨}muted-border-color);
--accordion-close-summary-color: var(--color); #{$✨}accordion-close-summary-color: var(#{$✨}color);
--accordion-open-summary-color: var(--muted-color); #{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
// Card (<article>) // Card (<article>)
$box-shadow-elevation: 1rem; $box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem; $box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06; $box-shadow-opacity: 0.06;
--card-background-color: var(--background-color); #{$✨}card-background-color: var(#{$✨}background-color);
--card-border-color: var(--muted-border-color); #{$✨}card-border-color: var(#{$✨}muted-border-color);
--card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{( #{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
$box-shadow-blur-strengh * 0.029 #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{( #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
$box-shadow-blur-strengh * 0.067 $box-shadow-blur-strengh * 0.067
)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))}, )} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
@ -130,41 +130,41 @@
$box-shadow-opacity $box-shadow-opacity
)}, )},
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25))}; 0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25))};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; #{$✨}card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)}; #{$✨}dropdown-background-color: #{mix($grey-50, $white, 25%)};
--dropdown-border-color: #{mix($grey-100, $grey-50)}; #{$✨}dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-box-shadow: var(--card-box-shadow); #{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
--dropdown-color: var(--color); #{$✨}dropdown-color: var(#{$✨}color);
--dropdown-hover-background-color: #{$grey-50}; #{$✨}dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.7)}; #{$✨}modal-overlay-background-color: #{rgba($grey-100, 0.7)};
// Progress // Progress
--progress-background-color: #{$grey-100}; #{$✨}progress-background-color: #{$grey-100};
--progress-color: var(--primary); #{$✨}progress-color: var(#{$✨}primary);
// Loading ([aria-busy=true]) // Loading ([aria-busy=true])
--loading-spinner-opacity: 0.5; #{$✨}loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast); #{$✨}tooltip-background-color: var(#{$✨}contrast);
--tooltip-color: var(--contrast-inverse); #{$✨}tooltip-color: var(#{$✨}contrast-inverse);
// Icons // Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); #{$✨}icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
// Document // Document
color-scheme: light; color-scheme: light;

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

@ -1,157 +1,158 @@
@use "sass:map"; @use "sass:map";
@use "../../settings"; @use "../../settings" as *;
// Commons Styles: // Commons Styles:
:root { :root {
// Typography // Typography
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", #{$✨}font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
--line-height: 1.5; "Noto Color Emoji";
--font-weight: 400; #{$✨}line-height: 1.5;
--font-size: 16px; #{$✨}font-weight: 400;
#{$✨}font-size: 16px;
// Responsive typography // Responsive typography
@if settings.$enable-responsive-typography { @if $enable-responsive-typography {
@if map-get(settings.$breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
--font-size: 17px; #{$✨}font-size: 17px;
} }
} }
@if map-get(settings.$breakpoints, "md") { @if map-get($breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
--font-size: 18px; #{$✨}font-size: 18px;
} }
} }
@if map-get(settings.$breakpoints, "lg") { @if map-get($breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
--font-size: 19px; #{$✨}font-size: 19px;
} }
} }
@if map-get(settings.$breakpoints, "xl") { @if map-get($breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) { @media (min-width: map-get($breakpoints, "xl")) {
--font-size: 20px; #{$✨}font-size: 20px;
} }
} }
} }
// Borders // Borders
--border-radius: 0.25rem; #{$✨}border-radius: 0.25rem;
--border-width: 1px; #{$✨}border-width: 1px;
--outline-width: 3px; #{$✨}outline-width: 3px;
// Spacings // Spacings
--spacing: 1rem; #{$✨}spacing: 1rem;
// Spacings for typography elements // Spacings for typography elements
--typography-spacing-vertical: 1.5rem; #{$✨}typography-spacing-vertical: 1.5rem;
// Spacings for body > header, body > main, body > footer, section, article // Spacings for body > header, body > main, body > footer, section, article
--block-spacing-vertical: calc(var(--spacing) * 2); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
--block-spacing-horizontal: var(--spacing); #{$✨}block-spacing-horizontal: var(#{$✨}spacing);
@if (settings.$enable-classes and settings.$enable-grid) { @if ($enable-classes and $enable-grid) {
--grid-spacing-vertical: 0; #{$✨}grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing); #{$✨}grid-spacing-horizontal: var(#{$✨}spacing);
} }
// Spacings for form elements and button // Spacings for form elements and button
--form-element-spacing-vertical: 0.75rem; #{$✨}form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; #{$✨}form-element-spacing-horizontal: 1rem;
// Spacings for nav component // Spacings for nav component
--nav-element-spacing-vertical: 1rem; #{$✨}nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.5rem; #{$✨}nav-element-spacing-horizontal: 0.5rem;
--nav-link-spacing-vertical: 0.5rem; #{$✨}nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem; #{$✨}nav-link-spacing-horizontal: 0.5rem;
// Font weight for form labels & fieldsets legend // Font weight for form labels & fieldsets legend
--form-label-font-weight: var(--font-weight); #{$✨}form-label-font-weight: var(#{$✨}font-weight);
// Transitions // Transitions
--transition: 0.2s ease-in-out; #{$✨}transition: 0.2s ease-in-out;
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-backdrop-filter: blur(0.25rem); #{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
} }
// Responsives spacings // Responsives spacings
@if settings.$enable-responsive-spacings { @if $enable-responsive-spacings {
// Sectioning // Sectioning
#{settings.$semantic-root-element} > header, #{$semantic-root-element} > header,
#{settings.$semantic-root-element} > main, #{$semantic-root-element} > main,
#{settings.$semantic-root-element} > footer, #{$semantic-root-element} > footer,
section { section {
@if map-get(settings.$breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
} }
} }
@if map-get(settings.$breakpoints, "md") { @if map-get($breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
} }
} }
@if map-get(settings.$breakpoints, "lg") { @if map-get($breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-vertical: calc(var(--spacing) * 3.5); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3.5);
} }
} }
@if map-get(settings.$breakpoints, "xl") { @if map-get($breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) { @media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-vertical: calc(var(--spacing) * 4); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 4);
} }
} }
} }
// Card (<article>) // Card (<article>)
article { article {
@if map-get(settings.$breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.25); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
} }
} }
@if map-get(settings.$breakpoints, "md") { @if map-get($breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.5); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
} }
} }
@if map-get(settings.$breakpoints, "lg") { @if map-get($breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.75);
} }
} }
@if map-get(settings.$breakpoints, "xl") { @if map-get($breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) { @media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 2);
} }
} }
} }
// Modal // Modal
dialog > article { dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
--block-spacing-horizontal: var(--spacing); #{$✨}block-spacing-horizontal: var(#{$✨}spacing);
@if map-get(settings.$breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.25); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
} }
} }
@if map-get(settings.$breakpoints, "md") { @if map-get($breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 1.5); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
} }
} }
} }
@ -159,20 +160,20 @@
// Link // Link
a { a {
--text-decoration: none; #{$✨}text-decoration: none;
// Secondary & Contrast // Secondary & Contrast
@if settings.$enable-classes { @if enable-classes {
&.secondary, &.secondary,
&.contrast { &.contrast {
--text-decoration: underline; #{$✨}text-decoration: underline;
} }
} }
} }
// Small // Small
small { small {
--font-size: 0.875em; #{$✨}font-size: 0.875em;
} }
// Headings // Headings
@ -182,42 +183,42 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
--font-weight: 700; #{$✨}font-weight: 700;
} }
h1 { h1 {
--font-size: 2rem; #{$✨}font-size: 2rem;
--typography-spacing-vertical: 3rem; #{$✨}typography-spacing-vertical: 3rem;
} }
h2 { h2 {
--font-size: 1.75rem; #{$✨}font-size: 1.75rem;
--typography-spacing-vertical: 2.625rem; #{$✨}typography-spacing-vertical: 2.625rem;
} }
h3 { h3 {
--font-size: 1.5rem; #{$✨}font-size: 1.5rem;
--typography-spacing-vertical: 2.25rem; #{$✨}typography-spacing-vertical: 2.25rem;
} }
h4 { h4 {
--font-size: 1.25rem; #{$✨}font-size: 1.25rem;
--typography-spacing-vertical: 1.874rem; #{$✨}typography-spacing-vertical: 1.874rem;
} }
h5 { h5 {
--font-size: 1.125rem; #{$✨}font-size: 1.125rem;
--typography-spacing-vertical: 1.6875rem; #{$✨}typography-spacing-vertical: 1.6875rem;
} }
// Forms elements // Forms elements
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
--border-width: 2px; #{$✨}border-width: 2px;
} }
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
--border-width: 3px; #{$✨}border-width: 3px;
} }
// Table // Table
@ -225,12 +226,12 @@ thead,
tfoot { tfoot {
th, th,
td { td {
--border-width: 3px; #{$✨}border-width: 3px;
} }
} }
:not(thead, tfoot) > * > td { :not(thead, tfoot) > * > td {
--font-size: 0.875em; #{$✨}font-size: 0.875em;
} }
// Code // Code
@ -238,11 +239,11 @@ pre,
code, code,
kbd, kbd,
samp { samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", #{$✨}font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono",
"Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji",
"Noto Color Emoji"; "Segoe UI Symbol", "Noto Color Emoji";
} }
kbd { kbd {
--font-weight: bolder; #{$✨}font-weight: bolder;
} }

4
scss/utilities/_reduce-motion.scss
View file

@ -1,6 +1,6 @@
@use "../settings"; @use "../settings" as *;
@if settings.$enable-transitions and settings.$enable-important { @if enable-transitions and enable-important {
/** /**
* Reduce Motion Features * Reduce Motion Features
*/ */

2
scss/utils/_copyright.scss
View file

@ -1,4 +1,4 @@
/*! /*!
* Pico.css v2.0.0-alpha1 (https://picocss.com) * Pico ✨ v2.0.0-alpha1 (https://picocss.com)
* Copyright 2019-2022 - Licensed under MIT * Copyright 2019-2022 - Licensed under MIT
*/ */