From 2448ebfdef6a15549137cf42116168f467bae393 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 10 Dec 2024 11:40:28 +0100
Subject: Refactoring
---
src/_badge.scss | 5 +-
src/_common.scss | 9 +--
src/_common.vars.scss | 79 -----------------------
src/_core.scss | 5 +-
src/_core.vars.scss | 175 ++++++++++++++++++++++++++++++++++++++++++++++++--
src/_reaction.scss | 6 +-
src/_sidebar.scss | 6 +-
src/_thread.scss | 4 +-
src/dark.scss | 1 -
src/design.scss | 30 +++++++++
src/light.scss | 30 ---------
11 files changed, 219 insertions(+), 131 deletions(-)
delete mode 100644 src/_common.vars.scss
create mode 100644 src/design.scss
delete mode 100644 src/light.scss
(limited to 'src')
diff --git a/src/_badge.scss b/src/_badge.scss
index f18a9fb..1076947 100644
--- a/src/_badge.scss
+++ b/src/_badge.scss
@@ -1,6 +1,5 @@
@use 'iro-sass/src/props';
-@use 'common';
@use 'core';
@mixin styles {
@@ -10,8 +9,8 @@
vertical-align: baseline;
&.badgeUpdate {
- --background-color: #{props.get(common.$vlpnLink)};
- --color: #{props.get(common.$vlpnLinkFg)};
+ --background-color: #{props.get(core.$vlpnLink)};
+ --color: #{props.get(core.$vlpnLinkFg)};
}
&.yellow {
diff --git a/src/_common.scss b/src/_common.scss
index c8b7ac7..3b182c5 100644
--- a/src/_common.scss
+++ b/src/_common.scss
@@ -2,16 +2,11 @@
@use 'sass:meta';
@use 'iro-sass/src/props';
-@use 'common.vars' as vars;
-@forward 'common.vars';
+@use 'core' as core;
@mixin styles {
- :root {
- @include props.materialize(map.values(meta.module-variables('vars')));
- }
-
body {
- background-color: props.get(vars.$vlpnBg);
+ background-color: props.get(core.$theme, --bg-l1);
}
a {
diff --git a/src/_common.vars.scss b/src/_common.vars.scss
deleted file mode 100644
index d01b17a..0000000
--- a/src/_common.vars.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@use 'iro-sass/src/props';
-
-@use 'core';
-
-$vlpnBg: props.def(--vlpnBg, props.get(core.$theme, --base, --75));
-
-$vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000));
-$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get(core.$theme, --red, --400));
-$vlpnLinkFg: props.def(--vlpnLinkFg, props.get(core.$theme, --red, --1000-text));
-$vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300));
-$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get(core.$theme, --red, --1300-text));
-
-$vlpnSmileySize: props.def(--vlpnSmileySize, 28px);
-
-$wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px);
-
-$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --700));
-$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800));
-$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get(core.$theme, --base, --800));
-$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get(core.$theme, --base, --700));
-$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get(core.$theme, --base, --800));
-$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get(core.$theme, --base, --800));
-$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get(core.$theme, --base, --700));
-
-$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get(core.$theme, --base, --100));
-$wcfNavigationText: props.def(--wcfNavigationText, props.get(core.$theme, --base, --500));
-$wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base, --800));
-$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800));
-
-$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242));
-$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
-$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6));
-$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6));
-
-$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100));
-$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800));
-$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --900));
-
-$wcfFooterBackground: props.def(--wcfFooterBackground, props.get(core.$theme, --base, --700));
-$wcfFooterText: props.def(--wcfFooterText, props.get(core.$theme, --base, --100));
-$wcfFooterLink: props.def(--wcfFooterLink, props.get(core.$theme, --base, --75));
-$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get(core.$theme, --base, --75));
-
-$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get(core.$theme, --base, --800));
-$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$theme, --base, --75));
-$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50));
-$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50));
-
-$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
-$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
-
-$wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --100));
-$wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --100-text));
-$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500));
-$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text));
-
-$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --red, --800));
-$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --red, --800-text));
-$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --red, --1200));
-$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --red, --1200-text));
-
-$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
-
-$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
-
-$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
-$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
-
-$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
-$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
-
-$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
-$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
-
-$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
-$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
-
-$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get(core.$theme, --blue, --200));
-$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get(core.$theme, --blue, --1200));
diff --git a/src/_core.scss b/src/_core.scss
index a99d147..aeea3ce 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -1,17 +1,20 @@
@use 'sass:map';
+@use 'sass:meta';
@use 'iro-sass/src/props';
@use 'core.vars' as vars;
@forward 'core.vars';
-@mixin styles--light {
+@mixin styles {
:root {
@include props.materialize(map.get(vars.$themes, --light));
+ @include props.materialize(map.values(meta.module-variables('vars')), null);
}
}
@mixin styles--dark {
:root {
@include props.materialize(map.get(vars.$themes, --dark));
+ @include props.materialize(map.values(meta.module-variables('vars')), 'dark');
}
}
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 3c6aba8..c9117b5 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -1,8 +1,10 @@
@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
+@use 'sass:meta';
@use 'iro-sass/src/props';
@use 'iro-sass/src/easing';
+@use 'iro-sass/src/functions';
@use 'iro-design/src/functions' as fn;
$themes-spec: (
@@ -42,12 +44,83 @@ $themes-spec: (
),
--palettes: (
- --base: #edddc4 --grays,
- --red: oklch(36.32% 0.1302 53.73) --colors,
- --blue: oklch(36.4% 0.1302 273.58) --colors,
- --yellow: oklch(36.32% 0.1302 92.94) --colors,
+ --base: #edddc4 --grays,
+ --red: oklch(36.32% 0.1302 53.73) --colors,
+ --blue: oklch(36.32% 0.1302 273.58) --colors,
+ --yellow: oklch(36.32% 0.1302 92.94) --colors,
+ ),
+
+ --semantic: (
+ --bg-l2: --base --50,
+ --bg-l1: --base --75,
+ --bg-base: --base --100,
+
+ --link: (
+ --fg: --red --1000,
+ --underline: --red --400,
+ --fg-inv: --red --1000-text,
+ --active: --red --1300,
+ --active-inv: --red --1300-text,
+ )
),
),
+
+ --dark: (
+ --levels: (
+ --grays: (
+ --50: #000,
+ --75: (easing.cubic-bezier(.3, .1, .7, 1, math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)),
+ --100: (easing.cubic-bezier(.3, .1, .7, 1, math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)),
+
+ --200: (easing.cubic-bezier(.3, .1, .7, 1, math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)),
+ --300: (easing.cubic-bezier(.3, .1, .7, 1, math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)),
+ --400: (easing.cubic-bezier(.3, .1, .7, 1, math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)),
+
+ --500: (easing.cubic-bezier(.3, .1, .7, 1, math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)),
+ --600: (easing.cubic-bezier(.3, .1, .7, 1, math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)),
+ --700: (0) .5 0,
+ --800: (-16) .3 0,
+ --900: (-30) .1 0,
+ ),
+
+ --colors: (
+ --100: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
+ --200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
+ --300: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
+ --400: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
+ --500: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
+ --600: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
+ --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
+ --800: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
+ --900: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
+ --1000: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
+ --1100: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
+ --1200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
+ --1300: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
+ ),
+ ),
+
+ --palettes: (
+ --base: #edddc4 --grays,
+ --red: oklch(36.32% 0.1302 53.73) --colors,
+ --blue: oklch(36.32% 0.1302 273.58) --colors,
+ --yellow: oklch(36.32% 0.1302 92.94) --colors,
+ ),
+
+ --semantic: (
+ --bg-l2: --base --50,
+ --bg-l1: --base --75,
+ --bg-base: --base --100,
+
+ --link: (
+ --fg: --red --1000,
+ --underline: --red --400,
+ --fg-inv: --red --1000-text,
+ --active: --red --1300,
+ --active-inv: --red --1300-text,
+ )
+ ),
+ )
);
$themes: ();
@@ -63,7 +136,101 @@ $themes: ();
$compiled: props.merge($compiled, ( $palette-name: $palette ));
}
+ @each $color, $ref in map.get($theme, --semantic) {
+ $res: ();
+
+ @if meta.type-of($ref) == 'map' {
+ @each $key, $r in $ref {
+ $re1: list.nth($r, 1);
+ $re2: functions.list-slice($r, 2);
+ $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
+ }
+ } @else {
+ $ref1: list.nth($ref, 1);
+ $ref2: functions.list-slice($ref, 2);
+ $res: props.get($compiled, $ref1, $ref2...);
+ }
+
+ $compiled: props.merge($compiled, ( $color: $res ));
+ }
+
$themes: map.set($themes, $theme-name, $compiled);
}
$theme: map.get($themes, --light);
+
+//
+
+$vlpnLink: props.def(--vlpnLink, props.get($theme, --link, --fg));
+$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get($theme, --link, --underline));
+$vlpnLinkFg: props.def(--vlpnLinkFg, props.get($theme, --link, --fg-inv));
+$vlpnLinkActive: props.def(--vlpnLinkActive, props.get($theme, --link, --active));
+$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get($theme, --link, --active-inv));
+
+$vlpnSmileySize: props.def(--vlpnSmileySize, 28px);
+
+$wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px);
+
+$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get($theme, --base, --700));
+$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --800));
+$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --800));
+$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --700));
+$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --800));
+$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --800));
+$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --700));
+
+$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get($theme, --bg-base));
+$wcfNavigationText: props.def(--wcfNavigationText, props.get($theme, --base, --500));
+$wcfNavigationLink: props.def(--wcfNavigationLink, props.get($theme, --base, --800));
+$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800));
+
+$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242));
+$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
+$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6));
+$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6));
+
+$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base));
+$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
+$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get($theme, --base, --900));
+
+$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --base, --700));
+$wcfFooterText: props.def(--wcfFooterText, props.get($theme, --base, --100));
+$wcfFooterLink: props.def(--wcfFooterLink, props.get($theme, --base, --75));
+$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get($theme, --base, --75));
+
+$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --800));
+$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --75));
+$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --50));
+$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50));
+
+$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
+$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
+
+$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
+$wcfButtonText: props.def(--wcfButtonText, props.get($theme, --base, --100-text));
+$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700));
+$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text));
+
+$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900));
+$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get($theme, --red, --900-text));
+$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200));
+$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get($theme, --red, --1200-text));
+
+$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
+
+$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
+
+$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
+$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
+
+$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
+$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
+
+$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
+$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
+
+$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
+$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
+
+$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));
+$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));
diff --git a/src/_reaction.scss b/src/_reaction.scss
index 1e09849..ecf88ad 100644
--- a/src/_reaction.scss
+++ b/src/_reaction.scss
@@ -1,12 +1,12 @@
@use 'iro-sass/src/props';
-@use 'common';
+@use 'core';
@mixin styles {
.messageFooter {
.reactionType {
- inline-size: props.get(common.$vlpnSmileySize);
- block-size: props.get(common.$vlpnSmileySize);
+ inline-size: props.get(core.$vlpnSmileySize);
+ block-size: props.get(core.$vlpnSmileySize);
}
}
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
index 5957d3a..b8cfc32 100644
--- a/src/_sidebar.scss
+++ b/src/_sidebar.scss
@@ -30,7 +30,7 @@
}
&:not(.boxBorderless) {
- background-color: props.get(common.$vlpnBg);
+ background-color: props.get(core.$theme, --bg-l1);
}
}
@@ -41,6 +41,10 @@
}
}
+ .userAvatarList > li > a > img {
+ border-color: props.get(core.$theme, --bg-l1);
+ }
+
@media screen and (max-width: 1024px) {
.boxesSidebarLeft{
margin-inline-end: 0;
diff --git a/src/_thread.scss b/src/_thread.scss
index 5217447..c602a87 100644
--- a/src/_thread.scss
+++ b/src/_thread.scss
@@ -1,6 +1,6 @@
@use 'iro-sass/src/props';
-@use 'common';
+@use 'core';
@mixin styles {
.messageGroupList .columnSubject > .statusDisplay {
@@ -22,7 +22,7 @@
.messageSignature {
a {
text-decoration: underline;
- text-decoration-color: props.get(common.$vlpnLinkUnderline);
+ text-decoration-color: props.get(core.$vlpnLinkUnderline);
}
a:hover {
diff --git a/src/dark.scss b/src/dark.scss
index 2bc7d79..060f4ba 100644
--- a/src/dark.scss
+++ b/src/dark.scss
@@ -5,4 +5,3 @@
@use 'common';
@include core.styles--dark;
-@include common.styles;
diff --git a/src/design.scss b/src/design.scss
new file mode 100644
index 0000000..453ee17
--- /dev/null
+++ b/src/design.scss
@@ -0,0 +1,30 @@
+@use 'sass:meta';
+@use 'iro-sass/src/props';
+
+@use 'core';
+@use 'common';
+
+@use 'header';
+@use 'sidebar';
+@use 'board';
+@use 'thread';
+@use 'avatar';
+@use 'badge';
+@use 'rank';
+@use 'reaction';
+@use 'footer';
+@use 'gallery';
+
+@include core.styles;
+@include common.styles;
+
+@include header.styles;
+@include sidebar.styles;
+@include board.styles;
+@include thread.styles;
+@include avatar.styles;
+@include badge.styles;
+@include rank.styles;
+@include reaction.styles;
+@include footer.styles;
+@include gallery.styles;
diff --git a/src/light.scss b/src/light.scss
deleted file mode 100644
index 325a0c6..0000000
--- a/src/light.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@use 'sass:meta';
-@use 'iro-sass/src/props';
-
-@use 'core';
-@use 'common';
-
-@use 'header';
-@use 'sidebar';
-@use 'board';
-@use 'thread';
-@use 'avatar';
-@use 'badge';
-@use 'rank';
-@use 'reaction';
-@use 'footer';
-@use 'gallery';
-
-@include core.styles--light;
-@include common.styles;
-
-@include header.styles;
-@include sidebar.styles;
-@include board.styles;
-@include thread.styles;
-@include avatar.styles;
-@include badge.styles;
-@include rank.styles;
-@include reaction.styles;
-@include footer.styles;
-@include gallery.styles;
--
cgit v1.2.3-70-g09d2