sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-02-22 00:04:36 -05:00
Code Issues Projects Releases Wiki Activity

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
Show Stats 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

13
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": [

3
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);
} }

15
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,

3
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 {

6
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;

6
scss/components/_progress.scss
View File

@ -53,11 +53,7 @@ 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;

15
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,7 +172,8 @@ 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;

14
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 {
@ -232,8 +229,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[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;

1
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);
} }

28
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);
} }

3
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;
} }
} }

26
scss/themes/default/_dark.scss
View File

@ -110,13 +110,25 @@
$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)} #{(
$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))}; 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%)};

26
scss/themes/default/_light.scss
View File

@ -110,13 +110,25 @@
$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)} #{(
$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))}; 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%)};

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 {

4
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);
} }

79
scss/utilities/_tooltip.scss
View File

@ -20,16 +20,16 @@
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;
@ -42,9 +42,9 @@
&::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,18 +109,15 @@
} }
} }
@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;
} }
@ -134,7 +131,7 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: 0.2s;
animation-name: tooltip-slide-bottom; animation-name: tooltip-slide-bottom;
} }
@ -149,7 +146,7 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: 0.2s;
animation-name: tooltip-slide-left; animation-name: tooltip-slide-left;
} }
@ -164,7 +161,7 @@
&:hover { &:hover {
&::before, &::before,
&::after { &::after {
animation-duration: .2s; animation-duration: 0.2s;
animation-name: tooltip-slide-right; animation-name: tooltip-slide-right;
} }
@ -177,11 +174,11 @@
@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;
} }
} }
@ -191,7 +188,7 @@
opacity: 0; opacity: 0;
} }
50% { 50% {
transform: translate(-50%, -.25rem); transform: translate(-50%, -0.25rem);
opacity: 0; opacity: 0;
} }
to { to {
@ -202,11 +199,11 @@
@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;
} }
} }
@ -216,22 +213,22 @@
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;
} }
} }
@ -241,22 +238,22 @@
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;
} }
} }
@ -266,11 +263,11 @@
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"