PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-27 21:47:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

switch from scss/sass to plain css with postcss plugins

Browse source
This commit is contained in:
Luna D. 2024-04-30 12:16:09 +02:00
parent 044df29a38
commit 5aad931ba7
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
43 changed files with 849 additions and 696 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/css/application.scss → assets/css/application.css
View file

@ -7,22 +7,20 @@
* *
*/ */
$fa-font-path: "@fortawesome/fontawesome-free/webfonts"; @import "@fortawesome/fontawesome-free/css/fontawesome.css";
@import "@fortawesome/fontawesome-free/css/solid.css";
@import "@fortawesome/fontawesome-free/css/regular.css";
@import "@fortawesome/fontawesome-free/css/brands.css";
@import "normalize.css";
@import "@fortawesome/fontawesome-free/scss/fontawesome.scss"; /* Import the default theme to act as a fallback. */
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";
@import "@fortawesome/fontawesome-free/scss/brands.scss";
@import "normalize-scss/sass/normalize/import-now";
// Import the default theme to act as a fallback.
@import "themes/dark-blue"; @import "themes/dark-blue";
// Files containing common properties, such as variable definitions. /* Files containing common properties, such as variable definitions. */
@import "common/measurements"; @import "common/measurements";
@import "common/mixins"; @import "common/mixins";
// General style elements that are used throughout the project. /* General style elements that are used throughout the project. */
@import "elements/avatar"; @import "elements/avatar";
@import "elements/base"; @import "elements/base";
@import "elements/block"; @import "elements/block";
@ -39,7 +37,7 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
@import "elements/separator"; @import "elements/separator";
@import "elements/table"; @import "elements/table";
// Style elements specific to certain pages. /* Style elements specific to certain pages. */
@import "views/admin"; @import "views/admin";
@import "views/burger"; @import "views/burger";
@import "views/communication"; @import "views/communication";

58
assets/css/common/_mixins.scss
View file

@ -1,58 +0,0 @@
@mixin if-desktop {
@media (min-width: $min-desktop-width + 1) {
@content;
}
}
@mixin if-tablet {
@media (max-width: $min-desktop-width) and (min-width: $max-phone-width + 1) {
@content;
}
}
@mixin if-phone {
@media (max-width: $max-phone-width) {
@content;
}
}
@mixin if-mobile {
@media (max-width: $min-desktop-width) {
@content;
}
}
@mixin even-odd-type($type) {
&:nth-child(odd).#{$type},
&:nth-child(odd) .#{$type} {
background: var(--#{$type}-color);
}
&:nth-child(even).#{$type},
&:nth-child(even) .#{$type} {
background: var(--#{$type}-dark-color);
}
&:nth-child(even) &:nth-child(odd).#{$type},
&:nth-child(even) &:nth-child(odd) .#{$type} {
background: var(--#{$type}-color);
}
}
@mixin even-odd {
&:nth-child(odd) {
background: var(--secondary-dark-color);
}
&:nth-child(even) {
background: var(--secondary-muted-color);;
}
@include even-odd-type(primary);
@include even-odd-type(success);
@include even-odd-type(warning);
@include even-odd-type(danger);
@include even-odd-type(information);
@include even-odd-type(special);
}
@mixin animated-transition {
transition: color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease;
}

14
assets/css/common/_measurements.scss → assets/css/common/measurements.css
View file

@ -29,7 +29,7 @@ $font-family-monospace: "Droid Sans Mono", monospace;
--button-group-tall-height: 2.5rem; --button-group-tall-height: 2.5rem;
--button-group-small-height: 1.5rem; --button-group-small-height: 1.5rem;
--tag-height: calc(1em * 2); --tag-height: 2em;
--tag-border-width: 0; --tag-border-width: 0;
--column-left-width: 360px; --column-left-width: 360px;
@ -53,8 +53,8 @@ $font-family-monospace: "Droid Sans Mono", monospace;
--number-badge-lower-offset: 0.7rem; --number-badge-lower-offset: 0.7rem;
--number-badge-upper-offset: 0.7rem; --number-badge-upper-offset: 0.7rem;
--font-family: #{$font-family-base}; --font-family: $font-family-base;
--font-family-monospace: #{$font-family-monospace}; --font-family-monospace: $font-family-monospace;
--font-size: 14px; --font-size: 14px;
--font-tiny-size: 12px; --font-tiny-size: 12px;
@ -69,10 +69,10 @@ $font-family-monospace: "Droid Sans Mono", monospace;
--input-text-height: 9rem; --input-text-height: 9rem;
--min-desktop-width: #{$min-desktop-width}; --min-desktop-width: $min-desktop-width;
--max-phone-width: #{$max-phone-width}; --max-phone-width: $max-phone-width;
--medium-layout-width: #{$medium-layout-width}; --medium-layout-width: $medium-layout-width;
--narrow-layout-width: #{$narrow-layout-width}; --narrow-layout-width: $narrow-layout-width;
--transition-animation-duration: 0.15s; --transition-animation-duration: 0.15s;
} }

58
assets/css/common/mixins.css Normal file
View file

@ -0,0 +1,58 @@
@define-mixin if-desktop {
@media (min-width: calc($min-desktop-width + 1px)) {
@mixin-content;
}
}
@define-mixin if-tablet {
@media (max-width: $min-desktop-width) and (min-width: calc($max-phone-width + 1px)) {
@mixin-content;
}
}
@define-mixin if-phone {
@media (max-width: $max-phone-width) {
@mixin-content;
}
}
@define-mixin if-mobile {
@media (max-width: $min-desktop-width) {
@mixin-content;
}
}
@define-mixin even-odd-type $type {
&:nth-child(odd).$(type),
&:nth-child(odd) .$(type) {
background: var(--$(type)-color);
}
&:nth-child(even).$(type),
&:nth-child(even) .$(type) {
background: var(--$(type)-dark-color);
}
&:nth-child(even) &:nth-child(odd).$(type),
&:nth-child(even) &:nth-child(odd) .$(type) {
background: var(--$(type)-color);
}
}
@define-mixin even-odd {
&:nth-child(odd) {
background: var(--secondary-dark-color);
}
&:nth-child(even) {
background: var(--secondary-muted-color);;
}
@mixin even-odd-type primary;
@mixin even-odd-type success;
@mixin even-odd-type warning;
@mixin even-odd-type danger;
@mixin even-odd-type information;
@mixin even-odd-type special;
}
@define-mixin animated-transition {
transition: color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease;
}

48
assets/css/elements/_flash.scss
View file

@ -1,48 +0,0 @@
@mixin flash-type($type) {
.flash--#{$type} {
border: 1px solid var(--#{$type}-border-color);
background: var(--#{$type}-color);
.flash__message {
border-left: 1px solid var(--#{$type}-border-color);
}
& a {
color: var(--#{$type}-link-color);
&:hover {
color: var(--link-hover-color);
}
}
}
}
.flash {
display: grid;
grid-template-columns: auto 1fr;
margin: var(--padding-normal);
margin-bottom: 0;
border-radius: var(--border-radius-inner);
}
@include if-phone {
.flash {
margin: var(--padding-small);
margin-bottom: 0;
}
}
.flash__icon {
@extend .flex__column--centered;
padding: var(--padding-normal);
}
.flash__message {
padding: var(--padding-normal);
}
@include flash-type(success);
@include flash-type(warning);
@include flash-type(danger);
@include flash-type(information);
@include flash-type(special);

40
assets/css/elements/_heading.scss
View file

@ -1,40 +0,0 @@
@mixin heading($el) {
#{$el} {
font-size: var(--font-#{$el}-size);
font-weight: bold;
font-variant: small-caps;
padding: var(--padding-small) 0;
margin-top: 0;
border-bottom: 1px solid var(--primary-border-color);
}
}
@mixin heading-type($type) {
.heading--#{$type} {
border-bottom-color: var(--#{$type}-border-color);
}
.block--#{$type} {
h1, h2, h3, h4, h5, h6 {
border-bottom-color: var(--#{$type}-border-color);
}
}
}
@include heading(h1);
@include heading(h2);
@include heading(h3);
@include heading(h4);
@include heading(h5);
@include heading(h6);
/* To differentiate between h5 and h6, simply make h6 not bold */
h6 {
font-weight: normal;
}
@include heading-type(success);
@include heading-type(warning);
@include heading-type(danger);
@include heading-type(information);
@include heading-type(special);

39
assets/css/elements/_separator.scss
View file

@ -1,39 +0,0 @@
@mixin separator-type($type) {
.separator--#{$type} {
border-color: var(--#{$type}-border-color);
&.separator--vertical {
background: var(--#{$type}-border-color);
}
}
.button__group--standalone .separator--#{$type},
.button__group .separator--#{$type} {
&.separator--vertical {
background: var(--#{$type}-color) !important;
}
}
}
.separator {
margin: var(--padding-normal) 0;
}
.separator--thin {
margin: var(--padding-small) 0;
}
.separator--vertical {
width: 1px;
height: inherit;
margin: 0 var(--padding-small);
background: var(--primary-border-color);
}
@include separator-type(primary);
@include separator-type(secondary);
@include separator-type(success);
@include separator-type(warning);
@include separator-type(danger);
@include separator-type(information);
@include separator-type(special);

0
assets/css/elements/_avatar.scss → assets/css/elements/avatar.css
View file

2
assets/css/elements/_base.scss → assets/css/elements/base.css
View file

@ -16,7 +16,7 @@ main {
flex-grow: 1; flex-grow: 1;
} }
@include if-mobile { @mixin if-mobile {
main { main {
padding: var(--padding-small); padding: var(--padding-small);
} }

39
assets/css/elements/_block.scss → assets/css/elements/block.css
View file

@ -1,24 +1,24 @@
@mixin block-type($type) { @define-mixin block-type $type {
.block--#{$type} { .block--$(type) {
.block__content { .block__content {
border-color: var(--#{$type}-border-color); border-color: var(--$(type)-border-color);
background: var(--#{$type}-dark-color); background: var(--$(type)-dark-color);
} }
.block__footer { .block__footer {
background: var(--#{$type}-color); background: var(--$(type)-color);
} }
&.block--muted { &.block--muted {
border-color: var(--#{$type}-color); border-color: var(--$(type)-color);
} }
&.block--fixed { &.block--fixed {
background: var(--#{$type}-color); background: var(--$(type)-color);
} }
& a { & a {
color: var(--#{$type}-link-color); color: var(--$(type)-link-color);
&:hover { &:hover {
color: var(--link-hover-color); color: var(--link-hover-color);
@ -56,8 +56,9 @@
padding: var(--padding-small); padding: var(--padding-small);
} }
.block__footer { .block__footer, .block__footer--small {
@extend .flex__row; display: flex;
flex-direction: row;
background: var(--primary-muted-color); background: var(--primary-muted-color);
padding: var(--padding-normal); padding: var(--padding-normal);
margin: var(--padding-normal); margin: var(--padding-normal);
@ -65,12 +66,11 @@
} }
.block__footer--small { .block__footer--small {
@extend .block__footer;
margin: var(--padding-small); margin: var(--padding-small);
margin-top: 0; margin-top: 0;
} }
@include if-phone { @mixin if-phone {
.block__content { .block__content {
padding: var(--padding-small); padding: var(--padding-small);
} }
@ -81,7 +81,7 @@
} }
} }
.block__header { .block__header, .block__header--single-item {
line-height: var(--block-header-height); line-height: var(--block-header-height);
padding: 0 var(--padding-normal); padding: 0 var(--padding-normal);
font-size: var(--font-header-size); font-size: var(--font-header-size);
@ -93,7 +93,6 @@
} }
.block__header--single-item { .block__header--single-item {
@extend .block__header;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -150,9 +149,9 @@
margin-top: var(--padding-normal); margin-top: var(--padding-normal);
} }
@include block-type(secondary); @mixin block-type secondary;
@include block-type(success); @mixin block-type success;
@include block-type(warning); @mixin block-type warning;
@include block-type(danger); @mixin block-type danger;
@include block-type(information); @mixin block-type information;
@include block-type(special); @mixin block-type special;

59
assets/css/elements/_button.scss → assets/css/elements/button.css
View file

@ -1,38 +1,38 @@
@mixin button-type($type) { @define-mixin button-type $type {
.button--#{$type} { .button--$(type) {
color: var(--#{$type}-link-color) !important; color: var(--$(type)-link-color) !important;
border-color: var(--#{$type}-border-color); border-color: var(--$(type)-border-color);
background: var(--#{$type}-dark-color); background: var(--$(type)-dark-color);
&.button--important { &.button--important {
color: var(--text-color) !important; color: var(--text-color) !important;
background: var(--#{$type}-color); background: var(--$(type)-color);
box-shadow: 0 -1px var(--#{$type}-dark-color) inset; box-shadow: 0 -1px var(--$(type)-dark-color) inset;
} }
&:hover { &:hover {
background: var(--#{$type}-muted-color) !important; background: var(--$(type)-muted-color) !important;
} }
} }
.button__group--#{$type} { .button__group--$(type) {
border-color: var(--#{$type}-color); border-color: var(--$(type)-color);
background: var(--#{$type}-dark-color); background: var(--$(type)-dark-color);
& a { & a {
color: var(--#{$type}-link-color); color: var(--$(type)-link-color);
&:hover { &:hover {
@include animated-transition; @mixin animated-transition;
color: var(--text-color); color: var(--text-color);
background: var(--#{$type}-color); background: var(--$(type)-color);
} }
} }
} }
} }
.button { .button {
@include animated-transition; @mixin animated-transition;
display: flex; display: flex;
flex: 0 1 auto; flex: 0 1 auto;
width: fit-content; width: fit-content;
@ -48,7 +48,7 @@
align-items: center; align-items: center;
&:hover { &:hover {
@include animated-transition; @mixin animated-transition;
background: var(--primary-muted-color); background: var(--primary-muted-color);
cursor: pointer; cursor: pointer;
} }
@ -64,15 +64,17 @@
} }
.button__row { .button__row {
@extend .flex__row; display: flex;
flex-direction: row;
& > button { & > button {
margin-right: var(--padding-small); margin-right: var(--padding-small);
} }
} }
.button__group { .button__group, .button__group--single, .button__group--standalone {
@extend .flex__row; display: flex;
flex-direction: row;
border: 1px solid var(--secondary-color); border: 1px solid var(--secondary-color);
border-radius: var(--border-radius-inner); border-radius: var(--border-radius-inner);
margin-right: var(--padding-normal); margin-right: var(--padding-normal);
@ -102,21 +104,16 @@
} }
.button__group--single { .button__group--single {
@extend .button__group;
margin-right: 0; margin-right: 0;
} }
.button__group--standalone {
@extend .button__group;
}
.button__group--standalone a { .button__group--standalone a {
@include animated-transition; @mixin animated-transition;
font-weight: bold; font-weight: bold;
padding: 0 var(--padding-small); padding: 0 var(--padding-small);
&:hover { &:hover {
@include animated-transition; @mixin animated-transition;
background: var(--secondary-muted-color); background: var(--secondary-muted-color);
} }
} }
@ -135,8 +132,8 @@
} }
} }
@include button-type(success); @mixin button-type success;
@include button-type(warning); @mixin button-type warning;
@include button-type(danger); @mixin button-type danger;
@include button-type(information); @mixin button-type information;
@include button-type(special); @mixin button-type special;

0
assets/css/elements/_dropdown.scss → assets/css/elements/dropdown.css
View file

51
assets/css/elements/flash.css Normal file
View file

@ -0,0 +1,51 @@
@define-mixin flash-type $type {
.flash--$(type) {
border: 1px solid var(--$(type)-border-color);
background: var(--$(type)-color);
.flash__message {
border-left: 1px solid var(--$(type)-border-color);
}
& a {
color: var(--$(type)-link-color);
&:hover {
color: var(--link-hover-color);
}
}
}
}
.flash {
display: grid;
grid-template-columns: auto 1fr;
margin: var(--padding-normal);
margin-bottom: 0;
border-radius: var(--border-radius-inner);
}
@mixin if-phone {
.flash {
margin: var(--padding-small);
margin-bottom: 0;
}
}
.flash__icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-normal);
}
.flash__message {
padding: var(--padding-normal);
}
@mixin flash-type success;
@mixin flash-type warning;
@mixin flash-type danger;
@mixin flash-type information;
@mixin flash-type special;

10
assets/css/elements/_flex.scss → assets/css/elements/flex.css
View file

@ -13,13 +13,15 @@
} }
.flex__row--centered { .flex__row--centered {
@extend .flex__row; display: flex;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.flex__column--centered { .flex__column--centered {
@extend .flex__column; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@ -77,13 +79,13 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
@include if-desktop { @mixin if-desktop {
.flex--maybe-wrap { .flex--maybe-wrap {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
@include if-mobile { @mixin if-mobile {
.flex--maybe-wrap { .flex--maybe-wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }

40
assets/css/elements/heading.css Normal file
View file

@ -0,0 +1,40 @@
@define-mixin heading $el {
$(el) {
font-size: var(--font-$(el)-size);
font-weight: bold;
font-variant: small-caps;
padding: var(--padding-small) 0;
margin-top: 0;
border-bottom: 1px solid var(--primary-border-color);
}
}
@define-mixin heading-type $type {
.heading--$(type) {
border-bottom-color: var(--$(type)-border-color);
}
.block--$(type) {
h1, h2, h3, h4, h5, h6 {
border-bottom-color: var(--$(type)-border-color);
}
}
}
@mixin heading h1;
@mixin heading h2;
@mixin heading h3;
@mixin heading h4;
@mixin heading h5;
@mixin heading h6;
/* To differentiate between h5 and h6, simply make h6 not bold */
h6 {
font-weight: normal;
}
@mixin heading-type success;
@mixin heading-type warning;
@mixin heading-type danger;
@mixin heading-type information;
@mixin heading-type special;

0
assets/css/elements/_input.scss → assets/css/elements/input.css
View file

18
assets/css/elements/_interaction.scss → assets/css/elements/interaction.css
View file

@ -1,22 +1,22 @@
@mixin interaction-type($type) { @define-mixin interaction-type $type {
.interaction--#{$type} { .interaction--$(type) {
position: relative; position: relative;
color: var(--#{$type}-color) !important; color: var(--$(type)-color) !important;
padding: 0 var(--padding-tiny); padding: 0 var(--padding-tiny);
width: 1rem; width: 1rem;
&.active, &:hover { &.active, &:hover {
color: var(--text-color) !important; color: var(--text-color) !important;
background-color: var(--#{$type}-color); background-color: var(--$(type)-color);
} }
} }
} }
@include interaction-type(fave); @mixin interaction-type fave;
@include interaction-type(upvote); @mixin interaction-type upvote;
@include interaction-type(downvote); @mixin interaction-type downvote;
@include interaction-type(comment); @mixin interaction-type comment;
@include interaction-type(hide); @mixin interaction-type hide;
.comments_count { .comments_count {
position: absolute; position: absolute;

10
assets/css/elements/_layout.scss → assets/css/elements/layout.css
View file

@ -1,5 +1,6 @@
.column-layout { .column-layout {
@extend .flex__row; display: flex;
flex-direction: row;
width: 100%; width: 100%;
} }
@ -12,7 +13,7 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
@include if-mobile { @mixin if-mobile {
.column-layout { .column-layout {
flex-direction: column; flex-direction: column;
} }
@ -23,7 +24,8 @@
} }
#container { #container {
@extend .flex__column; display: flex;
flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
margin: auto; margin: auto;
@ -41,7 +43,7 @@
max-width: var(--medium-layout-width); max-width: var(--medium-layout-width);
} }
@include if-desktop { @mixin if-desktop {
.centered-layout { .centered-layout {
.layout--medium, .layout--narrow { .layout--medium, .layout--narrow {
margin-left: auto; margin-left: auto;

16
assets/css/elements/_media.scss → assets/css/elements/media.css
View file

@ -1,5 +1,8 @@
.image-constrained { .image-constrained {
@extend .flex__row--centered; display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
} }
.media-list { .media-list {
@ -17,7 +20,7 @@
grid-column: 1 / 1; grid-column: 1 / 1;
} }
@include if-phone { @mixin if-phone {
.media-list { .media-list {
grid-template-columns: repeat(auto-fill, minmax(var(--media-small-container-width), 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--media-small-container-width), 1fr));
} }
@ -93,15 +96,18 @@
} }
.image-container { .image-container {
@extend .flex__column--centered; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.image-container a { .image-container a {
display: flex; display: flex;
max-height: 100%; max-height: 100%;
// For some reason tall images don't center properly within the container /* For some reason tall images don't center properly within the container
// without this hack. I blame CSS. without this hack. I blame CSS. */
& > img { & > img {
max-height: 100%; max-height: 100%;
margin: auto; margin: auto;

16
assets/css/elements/_mobile.scss → assets/css/elements/mobile.css
View file

@ -1,26 +1,26 @@
// Phones. /* Phones. */
@include if-phone { @mixin if-phone {
.hidden--phone { .hidden--phone {
display: none !important; display: none !important;
} }
} }
// Tablets. /* Tablets. */
@include if-tablet { @mixin if-tablet {
.hidden--tablet { .hidden--tablet {
display: none !important; display: none !important;
} }
} }
// Phones and tablets. /* Phones and tablets. */
@include if-mobile { @mixin if-mobile {
.hidden--mobile { .hidden--mobile {
display: none !important; display: none !important;
} }
} }
// Anything larger than 1280px (Desktops). /* Anything larger than 1280px (Desktops). */
@include if-desktop { @mixin if-desktop {
.hidden--desktop { .hidden--desktop {
display: none !important; display: none !important;
} }

39
assets/css/elements/separator.css Normal file
View file

@ -0,0 +1,39 @@
@define-mixin separator-type $type {
.separator--$(type) {
border-color: var(--$(type)-border-color);
&.separator--vertical {
background: var(--$(type)-border-color);
}
}
.button__group--standalone .separator--$(type),
.button__group .separator--$(type) {
&.separator--vertical {
background: var(--$(type)-color) !important;
}
}
}
.separator {
margin: var(--padding-normal) 0;
}
.separator--thin {
margin: var(--padding-small) 0;
}
.separator--vertical {
width: 1px;
height: inherit;
margin: 0 var(--padding-small);
background: var(--primary-border-color);
}
@mixin separator-type primary;
@mixin separator-type secondary;
@mixin separator-type success;
@mixin separator-type warning;
@mixin separator-type danger;
@mixin separator-type information;
@mixin separator-type special;

0
assets/css/elements/_table.scss → assets/css/elements/table.css
View file

89
assets/css/themes/dark-blue.css Normal file
View file

@ -0,0 +1,89 @@
$background-color: #131a22;
$text-color: #e0e0e0;
$primary-color: #2e4c80;
$secondary-color: #434f69;
$danger-color: #672a21;
$warning-color: #684f2c;
$success-color: #25603e;
$information-color: #205861;
$special-color: #561e5e;
$upvote-color: #5b9b26;
$downvote-color: #da3412;
$fave-color: #a18e27;
$comment-color: #b099dd;
$hide-color: #da3412;
$tag-default-color: #1b3c21;
$tag-error-color: #4f181d;
$tag-rating-color: #113456;
$tag-origin-color: #1d1858;
$tag-character-color: #193f47;
$tag-oc-color: #451f47;
$tag-species-color: #362118;
$tag-body-type-color: #393939;
$tag-content-fanmade-color: #622c4e;
$tag-content-official-color: #4b491c;
$tag-spoiler-color: #4f3811;
$spoiler-color: #0f0f0f;
@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
--tag-$(tagname)-color: $(color);
--tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
--tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
}
@define-mixin type-color $type, $color {
--$(type)-color: $color;
--$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
--$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l - 12));
--$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
}
:root {
--background-color: $background-color;
--text-color: $text-color;
--link-color: hsl(from $primary-color h calc(s + 7) calc(l + 35));
--link-hover-color: $text-color;
--primary-color: $primary-color;
--primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 10));
--primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
--primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 20));
--secondary-color: $secondary-color;
--secondary-border-color: hsl(from $secondary-color h s calc(l + 10));
--secondary-muted-color: hsl(from $secondary-color h calc(s - 5) calc(l - 10));
--secondary-dark-color: hsl(from $secondary-color h s calc(l - 15));
--secondary-link-color: hsl(from $secondary-color h s calc(l + 55));
--upvote-color: $upvote-color;
--downvote-color: $downvote-color;
--fave-color: $fave-color;
--comment-color: $comment-color;
--hide-color: $hide-color;
--spoiler-color: $spoiler-color;
--spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
@mixin type-color success, $success-color;
@mixin type-color warning, $warning-color;
@mixin type-color danger, $danger-color;
@mixin type-color information, $information-color;
@mixin type-color special, $special-color;
@mixin tag-color default, $tag-default-color;
@mixin tag-color error, $tag-error-color, 37;
@mixin tag-color rating, $tag-rating-color, 37;
@mixin tag-color origin, $tag-origin-color, 42;
@mixin tag-color character, $tag-character-color;
@mixin tag-color oc, $tag-oc-color, 40;
@mixin tag-color species, $tag-species-color, 37;
@mixin tag-color body-type, $tag-body-type-color, 45, 12;
@mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
@mixin tag-color content-official, $tag-content-official-color;
@mixin tag-color spoiler, $tag-spoiler-color;
}

92
assets/css/themes/dark-blue.scss
View file

@ -1,92 +0,0 @@
$background-color: #131a22;
$text-color: #e0e0e0;
$primary-color: #2e4c80;
$secondary-color: #434f69;
$danger-color: #672a21;
$warning-color: #684f2c;
$success-color: #25603e;
$information-color: #205861;
$special-color: #561e5e;
$upvote-color: #5b9b26;
$downvote-color: #da3412;
$fave-color: #a18e27;
$comment-color: #b099dd;
$hide-color: #da3412;
$tag-default-color: #1b3c21;
$tag-error-color: #4f181d;
$tag-rating-color: #113456;
$tag-origin-color: #1d1858;
$tag-character-color: #193f47;
$tag-oc-color: #451f47;
$tag-species-color: #362118;
$tag-body-type-color: #393939;
$tag-content-fanmade-color: #622c4e;
$tag-content-official-color: #4b491c;
$tag-spoiler-color: #4f3811;
$spoiler-color: #0f0f0f;
@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
--tag-#{$tagname}-color: #{$color};
--tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
--tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
}
@mixin type-color($type, $color) {
--#{$type}-color: #{$color};
--#{$type}-border-color: #{lighten(desaturate($color, 20%), 10%)};
--#{$type}-dark-color: #{darken(desaturate($color, 25%), 12%)};
--#{$type}-link-color: #{lighten(saturate($color, 10%), 45%)};
}
:root {
--background-color: #{$background-color};
--text-color: #{$text-color};
--link-color: #{lighten(saturate($primary-color, 7%), 35%)};
--link-hover-color: #{$text-color};
--primary-color: #{$primary-color};
--primary-border-color: #{lighten(desaturate($primary-color, 20%), 10%)};
--primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
--primary-dark-color: #{darken(desaturate($primary-color, 15%), 20%)};
--secondary-color: #{$secondary-color};
--secondary-border-color: #{lighten($secondary-color, 10%)};
--secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
--secondary-dark-color: #{darken($secondary-color, 15%)};
--secondary-link-color: #{lighten($secondary-color, 55%)};
--upvote-color: #{$upvote-color};
--downvote-color: #{$downvote-color};
--fave-color: #{$fave-color};
--comment-color: #{$comment-color};
--hide-color: #{$hide-color};
--spoiler-color: #{$spoiler-color};
--spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
@include type-color(success, $success-color);
@include type-color(warning, $warning-color);
@include type-color(danger, $danger-color);
@include type-color(information, $information-color);
@include type-color(special, $special-color);
@include tag-color(default, $tag-default-color);
@include tag-color(error, $tag-error-color, 37%);
@include tag-color(rating, $tag-rating-color, 37%);
@include tag-color(origin, $tag-origin-color, 42%);
@include tag-color(character, $tag-character-color);
@include tag-color(oc, $tag-oc-color, 40%);
@include tag-color(species, $tag-species-color, 37%);
@include tag-color(body-type, $tag-body-type-color, 45%, 12%);
@include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
@include tag-color(content-official, $tag-content-official-color);
@include tag-color(spoiler, $tag-spoiler-color);
/* Exceptions to mixin colors */
--tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
}

92
assets/css/themes/dark-purple.scss
View file

@ -1,92 +0,0 @@
$background-color: #1d1924;
$text-color: #dadada;
$primary-color: #3e2d5c;
$secondary-color: #4f4066;
$danger-color: #57261f;
$warning-color: #5c472a;
$success-color: #255339;
$information-color: #1f5057;
$special-color: #501f57;
$upvote-color: #5b9b26;
$downvote-color: #da3412;
$fave-color: #a18e27;
$comment-color: #b099dd;
$hide-color: #da3412;
$tag-default-color: #1b3c21;
$tag-error-color: #4f181d;
$tag-rating-color: #113456;
$tag-origin-color: #1d1858;
$tag-character-color: #193f47;
$tag-oc-color: #451f47;
$tag-species-color: #362118;
$tag-body-type-color: #393939;
$tag-content-fanmade-color: #622c4e;
$tag-content-official-color: #4b491c;
$tag-spoiler-color: #4f3811;
$spoiler-color: #0f0f0f;
@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
--tag-#{$tagname}-color: #{$color};
--tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
--tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
}
@mixin type-color($type, $color) {
--#{$type}-color: #{$color};
--#{$type}-border-color: #{lighten(desaturate($color, 5%), 30%)};
--#{$type}-dark-color: #{darken($color, 15%)};
--#{$type}-link-color: #{lighten($color, 45%)};
}
:root {
--background-color: #{$background-color};
--text-color: #{$text-color};
--link-color: #{lighten(saturate($primary-color, 7%), 30%)};
--link-hover-color: #{$text-color};
--primary-color: #{$primary-color};
--primary-border-color: #{lighten($primary-color, 20%)};
--primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
--primary-dark-color: #{darken(desaturate($primary-color, 5%), 15%)};
--secondary-color: #{$secondary-color};
--secondary-border-color: #{lighten($secondary-color, 20%)};
--secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
--secondary-dark-color: #{darken($secondary-color, 15%)};
--secondary-link-color: #{lighten($secondary-color, 55%)};
--upvote-color: #{$upvote-color};
--downvote-color: #{$downvote-color};
--fave-color: #{$fave-color};
--comment-color: #{$comment-color};
--hide-color: #{$hide-color};
--spoiler-color: #{$spoiler-color};
--spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
@include type-color(success, $success-color);
@include type-color(warning, $warning-color);
@include type-color(danger, $danger-color);
@include type-color(information, $information-color);
@include type-color(special, $special-color);
@include tag-color(default, $tag-default-color);
@include tag-color(error, $tag-error-color, 37%);
@include tag-color(rating, $tag-rating-color, 37%);
@include tag-color(origin, $tag-origin-color, 42%);
@include tag-color(character, $tag-character-color);
@include tag-color(oc, $tag-oc-color, 40%);
@include tag-color(species, $tag-species-color, 37%);
@include tag-color(body-type, $tag-body-type-color, 45%, 12%);
@include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
@include tag-color(content-official, $tag-content-official-color);
@include tag-color(spoiler, $tag-spoiler-color);
/* Exceptions to mixin colors */
--tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
}

4
assets/css/views/_burger.scss
View file

@ -1,4 +0,0 @@
// Temporary; todo: make it work
#burger {
display: none;
}

0
assets/css/views/_admin.scss → assets/css/views/admin.css
View file

2
assets/css/views/_approval.scss → assets/css/views/approval.css
View file

@ -37,7 +37,7 @@
line-height: 100%; line-height: 100%;
} }
@media (max-width: $min_px_width_for_desktop_layout) { @mixin if-mobile {
.approval-grid { .approval-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: auto; grid-template-rows: auto;

4
assets/css/views/burger.css Normal file
View file

@ -0,0 +1,4 @@
/* Temporary; todo: make it work */
#burger {
display: none;
}

6
assets/css/views/_communication.scss → assets/css/views/communication.css
View file

@ -20,7 +20,8 @@
} }
.communication-edit__actions { .communication-edit__actions {
@extend .flex__row; display: flex;
flex-direction: row;
line-height: var(--block-header-height); line-height: var(--block-header-height);
border: 0; border: 0;
margin: var(--padding-normal); margin: var(--padding-normal);
@ -29,7 +30,8 @@
} }
.communication__anonymous { .communication__anonymous {
@extend .flex__row; display: flex;
flex-direction: row;
line-height: ar(--block-header-height); line-height: ar(--block-header-height);
background: var(--secondary-color); background: var(--secondary-color);
border: 1px solid var(--secondary-border-color); border: 1px solid var(--secondary-border-color);

0
assets/css/views/_footer.scss → assets/css/views/footer.css
View file

11
assets/css/views/_header.scss → assets/css/views/header.css
View file

@ -22,10 +22,9 @@ header {
} }
.header__search { .header__search {
@extend .flex; display: flex;
@extend .flex--no-wrap; flex-wrap: nowrap;
@extend .flex--centered; align-items: center;
border: 0; border: 0;
border-radius: var(--border-radius-inner); border-radius: var(--border-radius-inner);
background: var(--primary-muted-color); background: var(--primary-muted-color);
@ -38,7 +37,7 @@ header {
} }
.header__input { .header__input {
@include animated-transition; @mixin animated-transition;
height: var(--navbar-input-size); height: var(--navbar-input-size);
font-size: var(--font-size); font-size: var(--font-size);
background: 0; background: 0;
@ -82,7 +81,7 @@ nav.dropdown__content {
line-height: var(--navbar-secondary-size); line-height: var(--navbar-secondary-size);
} }
@include if-mobile { @mixin if-mobile {
header { header {
gap: var(--padding-normal); gap: var(--padding-normal);
flex-wrap: wrap; flex-wrap: wrap;

0
assets/css/views/_image.scss → assets/css/views/image.css
View file

3
assets/css/views/_markdown.scss → assets/css/views/markdown.css
View file

@ -1,5 +1,6 @@
.textile-syntax-reference { .textile-syntax-reference {
@extend .flex__row; display: flex;
flex-direction: row;
line-height: var(--block-header-height); line-height: var(--block-header-height);
vertical-align: center; vertical-align: center;
margin-bottom: var(--padding-small); margin-bottom: var(--padding-small);

19
assets/css/views/_metabar.scss → assets/css/views/metabar.css
View file

@ -1,19 +1,19 @@
@mixin fix-interaction($type) { @define-mixin fix-interaction $type {
.interaction--#{$type} { .interaction--$(type) {
padding: var(--padding-tiny) var(--padding-small); padding: var(--padding-tiny) var(--padding-small);
} }
} }
@include if-phone { @mixin if-phone {
.metabar__interactions { .metabar__interactions {
display: grid; display: grid;
width: 100%; width: 100%;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
@include fix-interaction(fave); @mixin fix-interaction fave;
@include fix-interaction(upvote); @mixin fix-interaction upvote;
@include fix-interaction(downvote); @mixin fix-interaction downvote;
@include fix-interaction(hide); @mixin fix-interaction hide;
} }
.metabar__interactions * { .metabar__interactions * {
@ -42,7 +42,10 @@
} }
.metabar { .metabar {
@extend .flex__row--centered; display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: var(--block-header-height); line-height: var(--block-header-height);
} }

0
assets/css/views/_pagination.scss → assets/css/views/pagination.css
View file

0
assets/css/views/_staff.scss → assets/css/views/staff.css
View file

5
assets/css/views/_statistics.scss → assets/css/views/statistics.css
View file

@ -1,12 +1,13 @@
.statistics { .statistics {
@extend .flex__column; display: flex;
flex-direction: column;
border: 1.5px solid var(--secondary-color); border: 1.5px solid var(--secondary-color);
border-radius: var(--border-radius-inner); border-radius: var(--border-radius-inner);
overflow: hidden; overflow: hidden;
} }
.statistics__statistic { .statistics__statistic {
@include even-odd; @mixin even-odd;
display: grid; display: grid;
grid-template-columns: 15% 15% auto; grid-template-columns: 15% 15% auto;

39
assets/css/views/_tag.scss → assets/css/views/tag.css
View file

@ -1,25 +1,26 @@
@mixin tag-color($tag_type) { @define-mixin tag-color $tagtype {
&[data-tag-category=#{$tag_type}] { &[data-tag-category=$(tagtype)] {
color: var(--tag-#{$tag_type}-text-color); color: var(--tag-$(tagtype)-text-color);
background: var(--tag-#{$tag_type}-color); background: var(--tag-$(tagtype)-color);
border-color: var(--tag-#{$tag_type}-border-color); border-color: var(--tag-$(tagtype)-border-color);
.tag__state { .tag__state {
color: var(--tag-#{$tag_type}-text-color); color: var(--tag-$(tagtype)-text-color);
} }
.tag__name { .tag__name {
color: var(--tag-#{$tag_type}-text-color); color: var(--tag-$(tagtype)-text-color);
} }
.tag__count { .tag__count {
background: var(--tag-#{$tag_type}-border-color); background: var(--tag-$(tagtype)-border-color);
} }
} }
} }
.tag-list { .tag-list {
@extend .flex__row; display: flex;
flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--padding-small); gap: var(--padding-small);
margin-bottom: var(--padding-normal); margin-bottom: var(--padding-normal);
@ -39,16 +40,16 @@
color: inherit; color: inherit;
} }
@include tag-color(error); @mixin tag-color error;
@include tag-color(rating); @mixin tag-color rating;
@include tag-color(origin); @mixin tag-color origin;
@include tag-color(character); @mixin tag-color character;
@include tag-color(oc); @mixin tag-color oc;
@include tag-color(species); @mixin tag-color species;
@include tag-color(body-type); @mixin tag-color body-type;
@include tag-color(content-fanmade); @mixin tag-color content-fanmade;
@include tag-color(content-official); @mixin tag-color content-official;
@include tag-color(spoiler); @mixin tag-color spoiler;
} }
.tag > span { .tag > span {

7
assets/js/app.js
View file

@ -8,10 +8,3 @@
// Our code // Our code
import './ujs'; import './ujs';
import './when-ready'; import './when-ready';
// Base stylesheet.
import '../css/application.scss';
// Themes.
import '../css/themes/dark-blue.scss';
import '../css/themes/dark-purple.scss';

575
assets/package-lock.json generated
View file

@ -5,7 +5,9 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@csstools/postcss-relative-color-syntax": "^2.0.14",
"@fortawesome/fontawesome-free": "^6.5.2", "@fortawesome/fontawesome-free": "^6.5.2",
"@types/postcss-mixins": "^9.0.5",
"@types/web": "^0.0.143", "@types/web": "^0.0.143",
"@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.8.0", "@typescript-eslint/parser": "^7.8.0",
@ -13,8 +15,10 @@
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.34.0", "eslint": "^8.34.0",
"jest-environment-jsdom": "^29.7.0", "jest-environment-jsdom": "^29.7.0",
"normalize-scss": "^8.0.0", "normalize.css": "^8.0.1",
"sass": "^1.75.0", "postcss-mixins": "^10.0.1",
"postcss-nested": "^6.0.1",
"postcss-simple-vars": "^7.0.1",
"typescript": "^5.4", "typescript": "^5.4",
"vite": "^5.2" "vite": "^5.2"
}, },
@ -629,6 +633,184 @@
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
"dev": true "dev": true
}, },
"node_modules/@csstools/color-helpers": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-4.2.0.tgz",
"integrity": "sha512-hJJrSBzbfGxUsaR6X4Bzd/FLx0F1ulKnR5ljY9AiXCtsR+H+zSWQDFWlKES1BRaVZTDHLpIIHS9K2o0h+JLlrg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"engines": {
"node": "^14 || ^16 || >=18"
}
},
"node_modules/@csstools/css-calc": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.2.0.tgz",
"integrity": "sha512-iQqIW5vDPqQdLx07/atCuNKDprhIWjB0b8XRhUyXZWBZYUG+9mNyFwyu30rypX84WLevVo25NYW2ipxR8WyseQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"engines": {
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"@csstools/css-parser-algorithms": "^2.6.1",
"@csstools/css-tokenizer": "^2.2.4"
}
},
"node_modules/@csstools/css-color-parser": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-2.0.0.tgz",
"integrity": "sha512-0/v6OPpcg+b8TJT2N1Rcp0oH5xEvVOU5K2qDkaR3IMHNXuJ7XfVCQLINt3Cuj8mr54DbilEoZ9uvAmHBoZ//Fw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"dependencies": {
"@csstools/color-helpers": "^4.2.0",
"@csstools/css-calc": "^1.2.0"
},
"engines": {
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"@csstools/css-parser-algorithms": "^2.6.1",
"@csstools/css-tokenizer": "^2.2.4"
}
},
"node_modules/@csstools/css-parser-algorithms": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz",
"integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"engines": {
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"@csstools/css-tokenizer": "^2.2.4"
}
},
"node_modules/@csstools/css-tokenizer": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz",
"integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"engines": {
"node": "^14 || ^16 || >=18"
}
},
"node_modules/@csstools/postcss-progressive-custom-properties": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.2.0.tgz",
"integrity": "sha512-BZlirVxCRgKlE7yVme+Xvif72eTn1MYXj8oZ4Knb+jwaH4u3AN1DjbhM7j86RP5vvuAOexJ4JwfifYYKWMN/QQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"dependencies": {
"postcss-value-parser": "^4.2.0"
},
"engines": {
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"postcss": "^8.4"
}
},
"node_modules/@csstools/postcss-relative-color-syntax": {
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.14.tgz",
"integrity": "sha512-NlxgLjAjVCTUVGiWk8WNj3dKvux9eC6O5aLM3BmdA8UXEwBHYI9r4IqlanxG9PlcXnzhTUX6eZsqgmxwt4FPow==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"dependencies": {
"@csstools/css-color-parser": "^2.0.0",
"@csstools/css-parser-algorithms": "^2.6.1",
"@csstools/css-tokenizer": "^2.2.4",
"@csstools/postcss-progressive-custom-properties": "^3.2.0",
"@csstools/utilities": "^1.0.0"
},
"engines": {
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"postcss": "^8.4"
}
},
"node_modules/@csstools/utilities": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz",
"integrity": "sha512-tAgvZQe/t2mlvpNosA4+CkMiZ2azISW5WPAcdSalZlEjQvUfghHxfQcrCiK/7/CrfAWVxyM88kGFYO82heIGDg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"engines": {
"node": "^14 || ^16 || >=18"
},
"peerDependencies": {
"postcss": "^8.4"
}
},
"node_modules/@esbuild/aix-ppc64": { "node_modules/@esbuild/aix-ppc64": {
"version": "0.20.2", "version": "0.20.2",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@ -1600,9 +1782,9 @@
} }
}, },
"node_modules/@rollup/rollup-android-arm-eabi": { "node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
"integrity": "sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==", "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
"cpu": [ "cpu": [
"arm" "arm"
], ],
@ -1612,9 +1794,9 @@
] ]
}, },
"node_modules/@rollup/rollup-android-arm64": { "node_modules/@rollup/rollup-android-arm64": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
"integrity": "sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==", "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -1624,9 +1806,9 @@
] ]
}, },
"node_modules/@rollup/rollup-darwin-arm64": { "node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
"integrity": "sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==", "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -1636,9 +1818,9 @@
] ]
}, },
"node_modules/@rollup/rollup-darwin-x64": { "node_modules/@rollup/rollup-darwin-x64": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
"integrity": "sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==", "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -1648,9 +1830,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-arm-gnueabihf": { "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
"integrity": "sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==", "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
"cpu": [ "cpu": [
"arm" "arm"
], ],
@ -1660,9 +1842,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-arm-musleabihf": { "node_modules/@rollup/rollup-linux-arm-musleabihf": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
"integrity": "sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==", "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
"cpu": [ "cpu": [
"arm" "arm"
], ],
@ -1672,9 +1854,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-arm64-gnu": { "node_modules/@rollup/rollup-linux-arm64-gnu": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
"integrity": "sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==", "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -1684,9 +1866,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-arm64-musl": { "node_modules/@rollup/rollup-linux-arm64-musl": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
"integrity": "sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==", "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -1696,9 +1878,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": { "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
"integrity": "sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==", "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
"cpu": [ "cpu": [
"ppc64" "ppc64"
], ],
@ -1708,9 +1890,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-riscv64-gnu": { "node_modules/@rollup/rollup-linux-riscv64-gnu": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
"integrity": "sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==", "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
"cpu": [ "cpu": [
"riscv64" "riscv64"
], ],
@ -1720,9 +1902,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-s390x-gnu": { "node_modules/@rollup/rollup-linux-s390x-gnu": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
"integrity": "sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==", "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
"cpu": [ "cpu": [
"s390x" "s390x"
], ],
@ -1732,9 +1914,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-x64-gnu": { "node_modules/@rollup/rollup-linux-x64-gnu": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
"integrity": "sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==", "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -1744,9 +1926,9 @@
] ]
}, },
"node_modules/@rollup/rollup-linux-x64-musl": { "node_modules/@rollup/rollup-linux-x64-musl": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
"integrity": "sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==", "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -1756,9 +1938,9 @@
] ]
}, },
"node_modules/@rollup/rollup-win32-arm64-msvc": { "node_modules/@rollup/rollup-win32-arm64-msvc": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
"integrity": "sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==", "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -1768,9 +1950,9 @@
] ]
}, },
"node_modules/@rollup/rollup-win32-ia32-msvc": { "node_modules/@rollup/rollup-win32-ia32-msvc": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
"integrity": "sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==", "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
@ -1780,9 +1962,9 @@
] ]
}, },
"node_modules/@rollup/rollup-win32-x64-msvc": { "node_modules/@rollup/rollup-win32-x64-msvc": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
"integrity": "sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==", "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -2050,6 +2232,14 @@
"undici-types": "~5.26.4" "undici-types": "~5.26.4"
} }
}, },
"node_modules/@types/postcss-mixins": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/@types/postcss-mixins/-/postcss-mixins-9.0.5.tgz",
"integrity": "sha512-xtHiTGjIV6kr/7j+U682Hz8szSjzp0T606k/OMS4/mrjHZvovBs+ceKllzpOzQLAB8mXmgeJI6K5AbcPh16lsA==",
"dependencies": {
"postcss": "^8.2.14"
}
},
"node_modules/@types/semver": { "node_modules/@types/semver": {
"version": "7.5.8", "version": "7.5.8",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@ -2391,6 +2581,7 @@
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"dependencies": { "dependencies": {
"normalize-path": "^3.0.0", "normalize-path": "^3.0.0",
"picomatch": "^2.0.4" "picomatch": "^2.0.4"
@ -2583,17 +2774,6 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
}, },
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@ -2688,6 +2868,14 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/camelcase-css": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"engines": {
"node": ">= 6"
}
},
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001614", "version": "1.0.30001614",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz",
@ -2731,40 +2919,6 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/chokidar/node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dependencies": {
"is-glob": "^4.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/ci-info": { "node_modules/ci-info": {
"version": "3.9.0", "version": "3.9.0",
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz", "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@ -2919,6 +3073,17 @@
"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
"dev": true "dev": true
}, },
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"bin": {
"cssesc": "bin/cssesc"
},
"engines": {
"node": ">=4"
}
},
"node_modules/cssom": { "node_modules/cssom": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@ -3961,11 +4126,6 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/immutable": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
},
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -4037,17 +4197,6 @@
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
"dev": true "dev": true
}, },
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dependencies": {
"binary-extensions": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/is-core-module": { "node_modules/is-core-module": {
"version": "2.13.1", "version": "2.13.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@ -4852,16 +5001,6 @@
"node": "^14.15.0 || ^16.10.0 || >=18.0.0" "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
} }
}, },
"node_modules/jest-runner/node_modules/source-map-support": {
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
"integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
"dev": true,
"dependencies": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
}
},
"node_modules/jest-runtime": { "node_modules/jest-runtime": {
"version": "29.7.0", "version": "29.7.0",
"resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.7.0.tgz", "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.7.0.tgz",
@ -5473,6 +5612,7 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -5485,10 +5625,10 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/normalize-scss": { "node_modules/normalize.css": {
"version": "8.0.0", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/normalize-scss/-/normalize-scss-8.0.0.tgz", "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
"integrity": "sha512-C6GXIxQ2LOYWrde27xWbONavmybobxp+V6TY8BiBJw5M+yMNEg2R0WjaeDtmP5JsunFYKvFOvgMAIC0/OxZuJQ==" "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
}, },
"node_modules/npm-run-path": { "node_modules/npm-run-path": {
"version": "4.0.1", "version": "4.0.1",
@ -5777,6 +5917,96 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/postcss-js": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
"dependencies": {
"camelcase-css": "^2.0.1"
},
"engines": {
"node": "^12 || ^14 || >= 16"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.4.21"
}
},
"node_modules/postcss-mixins": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-10.0.1.tgz",
"integrity": "sha512-5+cI9r8L5ChegVsLM9pXa53Ft03Mt9xAq+kvzqfrUHGPCArVGOfUvmQK2CLP3XWWP2dqxDLQI+lIcXG+GTqOBQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"fast-glob": "^3.3.2",
"postcss-js": "^4.0.1",
"postcss-simple-vars": "^7.0.1",
"sugarss": "^4.0.1"
},
"engines": {
"node": "^18.0 || >= 20.0"
},
"peerDependencies": {
"postcss": "^8.2.14"
}
},
"node_modules/postcss-nested": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
"dependencies": {
"postcss-selector-parser": "^6.0.11"
},
"engines": {
"node": ">=12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.2.14"
}
},
"node_modules/postcss-selector-parser": {
"version": "6.0.16",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/postcss-simple-vars": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
"integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
"engines": {
"node": ">=14.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.2.1"
}
},
"node_modules/postcss-value-parser": { "node_modules/postcss-value-parser": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@ -5894,17 +6124,6 @@
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true "dev": true
}, },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/redent": { "node_modules/redent": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@ -6026,9 +6245,9 @@
} }
}, },
"node_modules/rollup": { "node_modules/rollup": {
"version": "4.17.1", "version": "4.17.2",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.1.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
"integrity": "sha512-0gG94inrUtg25sB2V/pApwiv1lUb0bQ25FPNuzO89Baa+B+c0ccaaBKM5zkZV/12pUUdH+lWCSm9wmHqyocuVQ==", "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
"dependencies": { "dependencies": {
"@types/estree": "1.0.5" "@types/estree": "1.0.5"
}, },
@ -6040,22 +6259,22 @@
"npm": ">=8.0.0" "npm": ">=8.0.0"
}, },
"optionalDependencies": { "optionalDependencies": {
"@rollup/rollup-android-arm-eabi": "4.17.1", "@rollup/rollup-android-arm-eabi": "4.17.2",
"@rollup/rollup-android-arm64": "4.17.1", "@rollup/rollup-android-arm64": "4.17.2",
"@rollup/rollup-darwin-arm64": "4.17.1", "@rollup/rollup-darwin-arm64": "4.17.2",
"@rollup/rollup-darwin-x64": "4.17.1", "@rollup/rollup-darwin-x64": "4.17.2",
"@rollup/rollup-linux-arm-gnueabihf": "4.17.1", "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
"@rollup/rollup-linux-arm-musleabihf": "4.17.1", "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
"@rollup/rollup-linux-arm64-gnu": "4.17.1", "@rollup/rollup-linux-arm64-gnu": "4.17.2",
"@rollup/rollup-linux-arm64-musl": "4.17.1", "@rollup/rollup-linux-arm64-musl": "4.17.2",
"@rollup/rollup-linux-powerpc64le-gnu": "4.17.1", "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
"@rollup/rollup-linux-riscv64-gnu": "4.17.1", "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
"@rollup/rollup-linux-s390x-gnu": "4.17.1", "@rollup/rollup-linux-s390x-gnu": "4.17.2",
"@rollup/rollup-linux-x64-gnu": "4.17.1", "@rollup/rollup-linux-x64-gnu": "4.17.2",
"@rollup/rollup-linux-x64-musl": "4.17.1", "@rollup/rollup-linux-x64-musl": "4.17.2",
"@rollup/rollup-win32-arm64-msvc": "4.17.1", "@rollup/rollup-win32-arm64-msvc": "4.17.2",
"@rollup/rollup-win32-ia32-msvc": "4.17.1", "@rollup/rollup-win32-ia32-msvc": "4.17.2",
"@rollup/rollup-win32-x64-msvc": "4.17.1", "@rollup/rollup-win32-x64-msvc": "4.17.2",
"fsevents": "~2.3.2" "fsevents": "~2.3.2"
} }
}, },
@ -6086,22 +6305,6 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"node_modules/sass": {
"version": "1.75.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
"integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/saxes": { "node_modules/saxes": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@ -6199,6 +6402,16 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/source-map-support": {
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
"integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
"dev": true,
"dependencies": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
}
},
"node_modules/sprintf-js": { "node_modules/sprintf-js": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@ -6303,6 +6516,21 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/sugarss": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
"integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
"engines": {
"node": ">=12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.3.3"
}
},
"node_modules/supports-color": { "node_modules/supports-color": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -6578,6 +6806,11 @@
"requires-port": "^1.0.0" "requires-port": "^1.0.0"
} }
}, },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"node_modules/v8-to-istanbul": { "node_modules/v8-to-istanbul": {
"version": "9.2.0", "version": "9.2.0",
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",

8
assets/package.json
View file

@ -10,7 +10,9 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@csstools/postcss-relative-color-syntax": "^2.0.14",
"@fortawesome/fontawesome-free": "^6.5.2", "@fortawesome/fontawesome-free": "^6.5.2",
"@types/postcss-mixins": "^9.0.5",
"@types/web": "^0.0.143", "@types/web": "^0.0.143",
"@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.8.0", "@typescript-eslint/parser": "^7.8.0",
@ -18,8 +20,10 @@
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.34.0", "eslint": "^8.34.0",
"jest-environment-jsdom": "^29.7.0", "jest-environment-jsdom": "^29.7.0",
"normalize-scss": "^8.0.0", "normalize.css": "^8.0.1",
"sass": "^1.75.0", "postcss-mixins": "^10.0.1",
"postcss-nested": "^6.0.1",
"postcss-simple-vars": "^7.0.1",
"typescript": "^5.4", "typescript": "^5.4",
"vite": "^5.2" "vite": "^5.2"
}, },

12
assets/vite.config.ts
View file

@ -1,6 +1,10 @@
import fs from 'fs'; import fs from 'fs';
import path from 'path'; import path from 'path';
import autoprefixer from 'autoprefixer'; import autoprefixer from 'autoprefixer';
import postcssMixins from 'postcss-mixins';
import postcssNested from 'postcss-nested';
import postcssSimpleVars from 'postcss-simple-vars';
import postcssRelativeColor from '@csstools/postcss-relative-color-syntax';
import { defineConfig, UserConfig, ConfigEnv } from 'vite'; import { defineConfig, UserConfig, ConfigEnv } from 'vite';
export default defineConfig(({ command }: ConfigEnv): UserConfig => { export default defineConfig(({ command }: ConfigEnv): UserConfig => {
@ -17,7 +21,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
const themeNames = const themeNames =
fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => { fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
const m = name.match(/([-a-z]+).scss/); const m = name.match(/([-a-z]+).css/);
if (m) { return m[1]; } if (m) { return m[1]; }
return null; return null;
@ -26,7 +30,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
const themes = new Map(); const themes = new Map();
for (const name of themeNames) { for (const name of themeNames) {
themes.set(`css/${name}`, `./css/themes/${name}.scss`); themes.set(`css/${name}`, `./css/themes/${name}.css`);
} }
return { return {
@ -50,7 +54,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
rollupOptions: { rollupOptions: {
input: { input: {
'js/app': './js/app.js', 'js/app': './js/app.js',
'css/application': './css/application.scss', 'css/application': './css/application.css',
...Object.fromEntries(themes) ...Object.fromEntries(themes)
}, },
output: { output: {
@ -62,7 +66,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
}, },
css: { css: {
postcss: { postcss: {
plugins: [autoprefixer] plugins: [postcssMixins(), postcssNested(), postcssSimpleVars, postcssRelativeColor(), autoprefixer]
} }
} }
}; };