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

chore: lint with prettier on build

Browse source
This commit is contained in:
Lucas Larroche 2022-10-15 23:22:12 +07:00
parent bf62c8ce09
commit 670826069b
40 changed files with 221 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.prettierrc Normal file
View file

@ -0,0 +1,3 @@
{
"printWidth": 100
}

20
css/pico.classless.css
View file

@ -7,9 +7,8 @@
* Theme: default * Theme: default
*/ */
:root { :root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5; --line-height: 1.5;
--font-weight: 400; --font-weight: 400;
--font-size: 16px; --font-size: 16px;
@ -188,9 +187,9 @@ pre,
code, code,
kbd, kbd,
samp { samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Noto Color Emoji";
} }
kbd { kbd {
@ -269,8 +268,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
@ -376,8 +374,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26; --card-background-color: #141e26;
--card-border-color: var(--card-background-color); --card-border-color: var(--card-background-color);
--card-box-shadow: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
@ -482,8 +479,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26; --card-background-color: #141e26;
--card-border-color: var(--card-background-color); --card-border-color: var(--card-background-color);
--card-box-shadow: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),

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

File diff suppressed because one or more lines are too long

20
css/pico.css
View file

@ -7,9 +7,8 @@
* Theme: default * Theme: default
*/ */
:root { :root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5; --line-height: 1.5;
--font-weight: 400; --font-weight: 400;
--font-size: 16px; --font-size: 16px;
@ -193,9 +192,9 @@ pre,
code, code,
kbd, kbd,
samp { samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Noto Color Emoji";
} }
kbd { kbd {
@ -274,8 +273,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
@ -381,8 +379,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26; --card-background-color: #141e26;
--card-border-color: var(--card-background-color); --card-border-color: var(--card-background-color);
--card-box-shadow: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
@ -487,8 +484,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26; --card-background-color: #141e26;
--card-border-color: var(--card-background-color); --card-border-color: var(--card-background-color);
--card-box-shadow: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

20
css/themes/default.css
View file

@ -2,9 +2,8 @@
* Theme: default * Theme: default
*/ */
:root { :root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5; --line-height: 1.5;
--font-weight: 400; --font-weight: 400;
--font-size: 16px; --font-size: 16px;
@ -188,9 +187,9 @@ pre,
code, code,
kbd, kbd,
samp { samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Noto Color Emoji";
} }
kbd { kbd {
@ -269,8 +268,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--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: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
@ -376,8 +374,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26; --card-background-color: #141e26;
--card-border-color: var(--card-background-color); --card-border-color: var(--card-background-color);
--card-box-shadow: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
@ -482,8 +479,7 @@ kbd {
--accordion-open-summary-color: var(--muted-color); --accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26; --card-background-color: #141e26;
--card-border-color: var(--card-background-color); --card-border-color: var(--card-background-color);
--card-box-shadow: --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

15
package.json
View file

@ -29,18 +29,20 @@
}, },
"scripts": { "scripts": {
"✨": "run-s build", "✨": "run-s build",
"build": "run-s \"build:*\" --silent", "build": "run-s lint \"build:*\" --silent",
"watch": "nodemon -q --watch scss/ --ext scss --exec 'run-s build'", "watch": "nodemon -q --watch scss/ --ext scss --exec 'run-s build'",
"build:sort-scss": "postcss --config scss ./scss/**/*.scss --replace", "lint": "run-s \"lint:*\" --silent",
"lint:prettier": "prettier --write --loglevel silent 'scss/**/*.scss'",
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
"build:css": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/", "build:css": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/",
"build:autoprefix": "postcss --config css --replace css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css", "build:autoprefix": "postcss --config css --replace css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css",
"build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css", "build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css",
"prebuild": "echo '\\033[32m[@picocss/pico] ✨ Start\\033[0m'", "prebuild": "echo '\\033[96m[@picocss/pico] ✨ Start\\033[0m'",
"prebuild:sort-scss": "echo '[@picocss/pico] ✨ Clean SCSS files'", "prelint": "echo '[@picocss/pico] ✨ Lint'",
"prebuild:css": "echo '[@picocss/pico] ✨ Compile'", "prebuild:css": "echo '[@picocss/pico] ✨ Compile'",
"prebuild:autoprefix": "echo '[@picocss/pico] ✨ Autoprefix'", "prebuild:autoprefix": "echo '[@picocss/pico] ✨ Autoprefix'",
"prebuild:minify": "echo '[@picocss/pico] ✨ Minify'", "prebuild:minify": "echo '[@picocss/pico] ✨ Minify'",
"postbuild:minify": "echo '\\033[32m[@picocss/pico] ✨ Build done\\033[0m'" "postbuild:minify": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.12", "autoprefixer": "^10.4.12",
@ -51,6 +53,7 @@
"postcss": "^8.4.17", "postcss": "^8.4.17",
"postcss-cli": "^10.0.0", "postcss-cli": "^10.0.0",
"postcss-scss": "^4.0.5", "postcss-scss": "^4.0.5",
"prettier": "2.7.1",
"sass": "^1.55.0" "sass": "^1.55.0"
}, },
"browserslist": [ "browserslist": [
@ -59,4 +62,4 @@
"not dead", "not dead",
"not ie > 0" "not ie > 0"
] ]
} }

2
scss/_functions.scss
View file

@ -1,4 +1,4 @@
// Output color in RGB format // Output color in RGB format
@function to-rgb($color) { @function to-rgb($color) {
@return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})"); @return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
} }

2
scss/_variables.scss
View file

@ -10,7 +10,7 @@ $enable-semantic-container: false !default;
// Enable .container and .container-fluid // Enable .container and .container-fluid
$enable-class-container: true !default; $enable-class-container: true !default;
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container // Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
// Fluid layout if disabled // Fluid layout if disabled
$enable-viewport: true !default; $enable-viewport: true !default;

2
scss/components/_accordion.scss
View file

@ -113,4 +113,4 @@ details {
} }
} }
} }
} }

5
scss/components/_card.scss
View file

@ -13,8 +13,7 @@ article {
> 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) padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color); background-color: var(--card-sectionning-background-color);
} }
@ -33,4 +32,4 @@ article {
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);
} }
} }

17
scss/components/_dropdown.scss
View file

@ -31,8 +31,7 @@ li[role="list"] > ul {
li { li {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
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);
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
@ -89,11 +88,10 @@ details[role="list"] {
&:not([role]) { &:not([role]) {
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) *
var(--border-width) * 2 2
); );
padding: var(--form-element-spacing-vertical) padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
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);
@ -102,9 +100,8 @@ details[role="list"] {
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), transition: background-color var(--transition), border-color var(--transition),
border-color var(--transition), color var(--transition), color var(--transition), box-shadow var(--transition);
box-shadow var(--transition);
} }
&:active, &:active,
@ -205,4 +202,4 @@ li[role="list"] {
> a::after { > a::after {
background-image: var(--icon-chevron); background-image: var(--icon-chevron);
} }
} }

7
scss/components/_modal.scss
View file

@ -45,8 +45,7 @@ dialog {
> header, > header,
> footer { > footer {
padding: calc(var(--block-spacing-vertical) * 0.5) padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
var(--block-spacing-horizontal);
} }
> header { > header {
@ -135,7 +134,7 @@ dialog {
dialog { dialog {
animation-duration: ($animation-duration * 4); animation-duration: ($animation-duration * 4);
animation-name: modal-overlay ; animation-name: modal-overlay;
> article { > article {
animation-delay: $animation-duration; animation-delay: $animation-duration;
@ -165,4 +164,4 @@ dialog {
opacity: 0; opacity: 0;
} }
} }
} }

8
scss/components/_nav.scss
View file

@ -41,8 +41,7 @@ nav {
li { li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: var(--nav-element-spacing-vertical) padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
var(--nav-element-spacing-horizontal);
// Minimal support for buttons and forms elements // Minimal support for buttons and forms elements
> * { > * {
@ -111,8 +110,7 @@ aside {
} }
li { li {
padding: calc(var(--nav-element-spacing-vertical) * 0.5) padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
var(--nav-element-spacing-horizontal);
a { a {
display: block; display: block;
@ -138,4 +136,4 @@ aside {
} }
} }
} }
} }

10
scss/components/_progress.scss
View file

@ -53,13 +53,9 @@ progress {
@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( linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%)
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;
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
@ -86,4 +82,4 @@ progress {
100% { 100% {
background-position: -200% 0; background-position: -200% 0;
} }
} }

17
scss/content/_button.scss
View file

@ -48,8 +48,7 @@ input[type="reset"],
--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) padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
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;
@ -63,9 +62,8 @@ input[type="reset"],
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), transition: background-color var(--transition), border-color var(--transition),
border-color var(--transition), color var(--transition), color var(--transition), box-shadow var(--transition);
box-shadow var(--transition);
} }
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
@ -83,7 +81,6 @@ input[type="reset"],
// .secondary, .contrast & .outline // .secondary, .contrast & .outline
@if $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"] {
@ -152,8 +149,7 @@ input[type="reset"],
--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);
@ -176,8 +172,9 @@ input[type="reset"],
// Button [disabled] // Button [disabled]
// Links without href are disabled by default // Links without href are disabled by default
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled], :where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]), :where(fieldset[disabled])
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
a[role="button"]:not([href]) { a[role="button"]:not([href]) {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }

2
scss/content/_code.scss
View file

@ -88,4 +88,4 @@ 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

@ -45,4 +45,4 @@ img {
// Hide the overflow in IE // Hide the overflow in IE
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }

20
scss/content/_form-alt-input-types.scss
View file

@ -102,9 +102,8 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), transition: background-color var(--transition), border-color var(--transition),
border-color var(--transition), color var(--transition), color var(--transition), box-shadow var(--transition);
box-shadow var(--transition);
} }
&:is(:hover, :active, :focus) { &:is(:hover, :active, :focus) {
@ -149,8 +148,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
background-color: var(--range-border-color); background-color: var(--range-border-color);
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), transition: background-color var(--transition), box-shadow var(--transition);
box-shadow var(--transition);
} }
} }
@ -178,8 +176,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
cursor: pointer; cursor: pointer;
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), transition: background-color var(--transition), transform var(--transition);
transform var(--transition);
} }
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@ -228,12 +225,11 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
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 $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;
@ -262,11 +258,11 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] { &[type="search"] {
background-position: center right 1.125rem; background-position: center right 1.125rem;
&[aria-invalid] { &[aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem; background-position: center right 1.125rem, center left 0.75rem;
} }
} }
} }
} }
} }

3
scss/content/_form-checkbox-radio.scss
View file

@ -127,7 +127,6 @@
[type="radio"]:checked, [type="radio"]:checked,
[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);
} }
@ -135,4 +134,4 @@
&[aria-invalid="true"] { &[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color); --border-color: var(--form-element-invalid-border-color);
} }
} }

32
scss/content/_form.scss
View file

@ -144,8 +144,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select, select,
textarea { textarea {
appearance: none; appearance: none;
padding: var(--form-element-spacing-vertical) padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
var(--form-element-spacing-horizontal);
} }
// Commons styles // Commons styles
@ -165,9 +164,8 @@ textarea {
font-weight: var(--font-weight); font-weight: var(--font-weight);
@if $enable-transitions { @if $enable-transitions {
transition: background-color var(--transition), transition: background-color var(--transition), border-color var(--transition),
border-color var(--transition), color var(--transition), color var(--transition), box-shadow var(--transition);
box-shadow var(--transition);
} }
} }
@ -200,7 +198,8 @@ textarea {
input:not([type="submit"], [type="button"], [type="reset"])[disabled], input:not([type="submit"], [type="button"], [type="reset"])[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { :where(fieldset[disabled])
: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);
@ -212,16 +211,11 @@ textarea[disabled],
&: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 $enable-important { @if $enable-important {
padding-right: calc( padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
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( padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
var(--form-element-spacing-horizontal) + 1.5rem } @else {
) !important;
}
@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);
@ -248,8 +242,7 @@ textarea[disabled],
@if $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);
} }
@ -263,8 +256,7 @@ textarea[disabled],
@if $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);
} }
@ -275,7 +267,7 @@ textarea[disabled],
[dir="rtl"] { [dir="rtl"] {
:where(input, select, textarea) { :where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"]) { &:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){ &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
background-position: center left 0.75rem; background-position: center left 0.75rem;
} }
} }
@ -343,4 +335,4 @@ label {
> :where(input, select, textarea) { > :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25); margin-top: calc(var(--spacing) * 0.25);
} }
} }

5
scss/content/_miscs.scss
View file

@ -21,8 +21,7 @@ hr {
template { template {
@if $enable-important { @if $enable-important {
display: none !important; display: none !important;
} } @else {
@else {
display: none; display: none;
} }
} }
@ -30,4 +29,4 @@ template {
// Add the correct display in IE 9- // Add the correct display in IE 9-
canvas { canvas {
display: inline-block; display: inline-block;
} }

2
scss/content/_table.scss
View file

@ -47,4 +47,4 @@ table {
background-color: var(--table-row-stripped-background-color); background-color: var(--table-row-stripped-background-color);
} }
} }
} }

2
scss/content/_typography.scss
View file

@ -261,4 +261,4 @@ del {
// selection // selection
::selection { ::selection {
background-color: var(--primary-focus); background-color: var(--primary-focus);
} }

2
scss/layout/_container.scss
View file

@ -39,4 +39,4 @@
} }
} }
} }
} }

2
scss/layout/_document.scss
View file

@ -45,4 +45,4 @@
overflow-wrap: break-word; // 3 overflow-wrap: break-word; // 3
cursor: default; // 1 cursor: default; // 1
tab-size: 4; // 4 tab-size: 4; // 4
} }

2
scss/layout/_grid.scss
View file

@ -21,4 +21,4 @@
min-width: 0; // HACK for childs in overflow min-width: 0; // HACK for childs in overflow
} }
} }
} }

2
scss/layout/_scroller.scss
View file

@ -13,4 +13,4 @@ figure {
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
color: var(--muted-color); color: var(--muted-color);
} }
} }

2
scss/layout/_section.scss
View file

@ -5,4 +5,4 @@
section { section {
margin-bottom: var(--block-spacing-vertical); margin-bottom: var(--block-spacing-vertical);
} }

2
scss/layout/_sectioning.scss
View file

@ -67,4 +67,4 @@ main {
padding: var(--block-spacing-vertical) 0; padding: var(--block-spacing-vertical) 0;
} }
} }
} }

2
scss/themes/default.scss
View file

@ -34,4 +34,4 @@ progress,
[type="radio"], [type="radio"],
[type="range"] { [type="range"] {
accent-color: var(--primary); accent-color: var(--primary);
} }

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

@ -110,14 +110,26 @@
$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: --card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))}, $box-shadow-blur-strengh * 0.029
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))}, )} #{rgba($black, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))}, #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))}, $box-shadow-blur-strengh * 0.067
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))}, )} #{rgba($black, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)}, #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )}; $box-shadow-blur-strengh * 0.125
)} #{rgba($black, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
$box-shadow-blur-strengh * 0.225
)} #{rgba($black, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
$box-shadow-blur-strengh * 0.417
)} #{rgba($black, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
$black,
$box-shadow-opacity
)},
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">)
@ -153,7 +165,7 @@
--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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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;
} }

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

@ -110,14 +110,26 @@
$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: --card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))}, $box-shadow-blur-strengh * 0.029
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))}, )} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))}, #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))}, $box-shadow-blur-strengh * 0.067
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))}, )} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)}, #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )}; $box-shadow-blur-strengh * 0.125
)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
$box-shadow-blur-strengh * 0.225
)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
$box-shadow-blur-strengh * 0.417
)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
$grey-900,
$box-shadow-opacity
)},
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">)
@ -151,9 +163,9 @@
--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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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='#{to-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;
} }

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

@ -1,9 +1,8 @@
// Commons Styles // Commons Styles
:root { :root {
// Typography // Typography
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5; --line-height: 1.5;
--font-weight: 400; --font-weight: 400;
--font-size: 16px; --font-size: 16px;
@ -136,7 +135,6 @@
// 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);
@ -237,9 +235,9 @@ pre,
code, code,
kbd, kbd,
samp { samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Noto Color Emoji";
} }
kbd { kbd {

2
scss/utilities/_accessibility.scss
View file

@ -49,4 +49,4 @@ textarea,
[dir="rtl"] { [dir="rtl"] {
direction: rtl; direction: rtl;
} }

6
scss/utilities/_loading.scss
View file

@ -2,7 +2,6 @@
* Loading ([aria-busy=true]) * Loading ([aria-busy=true])
*/ */
// Cursor // Cursor
[aria-busy="true"] { [aria-busy="true"] {
cursor: progress; cursor: progress;
@ -10,7 +9,6 @@
// Everyting except form elements // Everyting except form elements
[aria-busy="true"]:not(input, select, textarea) { [aria-busy="true"]:not(input, select, textarea) {
&::before { &::before {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
@ -20,7 +18,7 @@
border-right-color: transparent; border-right-color: transparent;
content: ""; content: "";
vertical-align: text-bottom; vertical-align: text-bottom;
vertical-align: -.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);
} }
@ -55,4 +53,4 @@ a {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

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

@ -24,4 +24,4 @@
transition-duration: 0s !important; // 4 transition-duration: 0s !important; // 4
} }
} }
} }

129
scss/utilities/_tooltip.scss
View file

@ -20,31 +20,31 @@
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
padding: .25rem .5rem; padding: 0.25rem 0.5rem;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -.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: .875rem; font-size: 0.875rem;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&[data-placement="top"]::after, &[data-placement="top"]::after,
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: .3rem solid; border-top: 0.3rem solid;
border-right: .3rem solid transparent; border-right: 0.3rem solid transparent;
border-left: .3rem solid transparent; border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
content: ""; content: "";
@ -56,13 +56,13 @@
&::after { &::after {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
transform: translate(-50%, .25rem); transform: translate(-50%, 0.25rem);
} }
&:after{ &:after {
transform: translate(-50%, -.3rem); transform: translate(-50%, -0.3rem);
border: .3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: .3rem solid; border-bottom: 0.3rem solid;
} }
} }
@ -73,13 +73,13 @@
right: 100%; right: 100%;
bottom: auto; bottom: auto;
left: auto; left: auto;
transform: translate(-.25rem, -50%); transform: translate(-0.25rem, -50%);
} }
&:after{ &:after {
transform: translate(.3rem, -50%); transform: translate(0.3rem, -50%);
border: .3rem solid transparent; border: 0.3rem solid transparent;
border-left: .3rem solid; border-left: 0.3rem solid;
} }
} }
@ -90,13 +90,13 @@
right: auto; right: auto;
bottom: auto; bottom: auto;
left: 100%; left: 100%;
transform: translate(.25rem, -50%); transform: translate(0.25rem, -50%);
} }
&:after{ &:after {
transform: translate(-.3rem, -50%); transform: translate(-0.3rem, -50%);
border: .3rem solid transparent; border: 0.3rem solid transparent;
border-right: .3rem solid; border-right: 0.3rem solid;
} }
} }
@ -109,67 +109,64 @@
} }
} }
@if $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,
&[data-placement="bottom"]:hover &[data-placement="bottom"]:hover &:focus,
&:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: 0.2s;
animation-name: tooltip-slide-top; animation-name: tooltip-slide-top;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-top; animation-name: tooltip-caret-slide-top;
} }
} }
&[data-placement="bottom"] { &[data-placement="bottom"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: 0.2s;
animation-name: tooltip-slide-bottom; animation-name: tooltip-slide-bottom;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-bottom; animation-name: tooltip-caret-slide-bottom;
} }
} }
} }
&[data-placement="left"] { &[data-placement="left"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: 0.2s;
animation-name: tooltip-slide-left; animation-name: tooltip-slide-left;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-left; animation-name: tooltip-caret-slide-left;
} }
} }
} }
&[data-placement="right"] { &[data-placement="right"] {
&:focus, &:focus,
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: 0.2s;
animation-name: tooltip-slide-right; animation-name: tooltip-slide-right;
} }
&::after { &::after {
animation-name: tooltip-caret-slide-right; animation-name: tooltip-caret-slide-right;
} }
} }
} }
@ -177,21 +174,21 @@
@keyframes tooltip-slide-top { @keyframes tooltip-slide-top {
from { from {
transform: translate(-50%, .75rem); transform: translate(-50%, 0.75rem);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-50%, -.25rem); transform: translate(-50%, -0.25rem);
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-caret-slide-top { @keyframes tooltip-caret-slide-top {
from { from {
opacity: 0; opacity: 0;
} }
50% { 50% {
transform: translate(-50%, -.25rem); transform: translate(-50%, -0.25rem);
opacity: 0; opacity: 0;
} }
to { to {
@ -199,80 +196,80 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-bottom { @keyframes tooltip-slide-bottom {
from { from {
transform: translate(-50%, -.75rem); transform: translate(-50%, -0.75rem);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-50%, .25rem); transform: translate(-50%, 0.25rem);
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-caret-slide-bottom { @keyframes tooltip-caret-slide-bottom {
from { from {
opacity: 0; opacity: 0;
} }
50% { 50% {
transform: translate(-50%, -.5rem); transform: translate(-50%, -0.5rem);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-50%, -.3rem); transform: translate(-50%, -0.3rem);
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-left { @keyframes tooltip-slide-left {
from { from {
transform: translate(.75rem, -50%); transform: translate(0.75rem, -50%);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-.25rem, -50%); transform: translate(-0.25rem, -50%);
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-caret-slide-left { @keyframes tooltip-caret-slide-left {
from { from {
opacity: 0; opacity: 0;
} }
50% { 50% {
transform: translate(.05rem, -50%); transform: translate(0.05rem, -50%);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(.3rem, -50%); transform: translate(0.3rem, -50%);
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-slide-right { @keyframes tooltip-slide-right {
from { from {
transform: translate(-.75rem, -50%); transform: translate(-0.75rem, -50%);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(.25rem, -50%); transform: translate(0.25rem, -50%);
opacity: 1; opacity: 1;
} }
} }
@keyframes tooltip-caret-slide-right { @keyframes tooltip-caret-slide-right {
from { from {
opacity: 0; opacity: 0;
} }
50% { 50% {
transform: translate(-.05rem, -50%); transform: translate(-0.05rem, -50%);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate(-.3rem, -50%); transform: translate(-0.3rem, -50%);
opacity: 1; opacity: 1;
} }
} }
} }
} }

5
yarn.lock
View file

@ -910,6 +910,11 @@ postcss@^8.4.17:
picocolors "^1.0.0" picocolors "^1.0.0"
source-map-js "^1.0.2" source-map-js "^1.0.2"
prettier@2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
pretty-hrtime@^1.0.3: pretty-hrtime@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"