From 2448ebfdef6a15549137cf42116168f467bae393 Mon Sep 17 00:00:00 2001 From: Volpeon 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