From deb22a5c1b31c9b8cd4b6eb244b015cc6a1fbb88 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 9 Dec 2024 17:57:32 +0100 Subject: Init --- src/_common.scss | 12 ++++++++++++ src/_common.vars.scss | 8 ++++++++ src/_core.scss | 17 +++++++++++++++++ src/_core.vars.scss | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/_header.scss | 16 ++++++++++++++++ src/dark.scss | 8 ++++++++ src/light.scss | 12 ++++++++++++ 7 files changed, 123 insertions(+) create mode 100644 src/_common.scss create mode 100644 src/_common.vars.scss create mode 100644 src/_core.scss create mode 100644 src/_core.vars.scss create mode 100644 src/_header.scss create mode 100644 src/dark.scss create mode 100644 src/light.scss (limited to 'src') diff --git a/src/_common.scss b/src/_common.scss new file mode 100644 index 0000000..f31fedb --- /dev/null +++ b/src/_common.scss @@ -0,0 +1,12 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'iro-sass/src/props'; + +@use 'common.vars' as vars; +@forward 'common.vars'; + +@mixin styles { + :root { + @include props.materialize(map.values(meta.module-variables('vars'))); + } +} diff --git a/src/_common.vars.scss b/src/_common.vars.scss new file mode 100644 index 0000000..36008f9 --- /dev/null +++ b/src/_common.vars.scss @@ -0,0 +1,8 @@ +@use 'iro-sass/src/props'; + +@use 'core'; + +$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600)); +$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)); diff --git a/src/_core.scss b/src/_core.scss new file mode 100644 index 0000000..a99d147 --- /dev/null +++ b/src/_core.scss @@ -0,0 +1,17 @@ +@use 'sass:map'; +@use 'iro-sass/src/props'; + +@use 'core.vars' as vars; +@forward 'core.vars'; + +@mixin styles--light { + :root { + @include props.materialize(map.get(vars.$themes, --light)); + } +} + +@mixin styles--dark { + :root { + @include props.materialize(map.get(vars.$themes, --dark)); + } +} diff --git a/src/_core.vars.scss b/src/_core.vars.scss new file mode 100644 index 0000000..65ebb65 --- /dev/null +++ b/src/_core.vars.scss @@ -0,0 +1,50 @@ +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'iro-sass/src/props'; +@use 'iro-sass/src/easing'; +@use 'iro-design/src/functions' as fn; + +$themes-spec: ( + --light: ( + --levels: ( + --grays: ( + --50: (-16) .8 0, + --75: (-8) .9 0, + --100: (0) 1 0, + + --200: (easing.cubic-bezier(.2, .1, .7, 1, math.div(1, 7)) * 87) (1 + 1 * math.div(1, 7)) (-30 * math.div(1, 7)), + --300: (easing.cubic-bezier(.2, .1, .7, 1, math.div(2, 7)) * 87) (1 + 1 * math.div(2, 7)) (-30 * math.div(2, 7)), + --400: (easing.cubic-bezier(.2, .1, .7, 1, math.div(3, 7)) * 87) (1 + 1 * math.div(3, 7)) (-30 * math.div(3, 7)), + + --500: (easing.cubic-bezier(.2, .1, .7, 1, math.div(4, 7)) * 87) (1 + 1 * math.div(4, 7)) (-30 * math.div(4, 7)), + --600: (easing.cubic-bezier(.2, .1, .7, 1, math.div(5, 7)) * 87) (1 + 1 * math.div(5, 7)) (-30 * math.div(5, 7)), + --700: (easing.cubic-bezier(.2, .1, .7, 1, math.div(6, 7)) * 87) (1 + 1 * math.div(6, 7)) (-30 * math.div(6, 7)), + --800: (easing.cubic-bezier(.2, .1, .7, 1, math.div(7, 7)) * 87) (1 + 1 * math.div(7, 7)) (-30 * math.div(7, 7)), + --900: #000 + ), + ), + + --palettes: ( + --base: #edddc4 --grays, + ), + ), +); + +$themes: (); + +@each $theme-name, $theme in $themes-spec { + $compiled: props.def(--colors, (), 'color'); + + @each $palette-name, $palette in map.get($theme, --palettes) { + $base-color: list.nth($palette, 1); + $levels: list.nth($palette, 2); + + $palette: fn.palette($base-color, map.get($theme, --levels, $levels), list.nth(map.get($theme, --palettes, --base), 1)); + $compiled: props.merge($compiled, ( $palette-name: $palette )); + } + + $themes: map.set($themes, $theme-name, $compiled); +} + +$theme: map.get($themes, --light); diff --git a/src/_header.scss b/src/_header.scss new file mode 100644 index 0000000..1f3abc7 --- /dev/null +++ b/src/_header.scss @@ -0,0 +1,16 @@ +@mixin styles { + .pageHeaderFacade { + background-image: url(../images/style-6/custom/header.jpeg); + background-repeat: repeat-x; + + > .layoutBoundary { + padding-block: 0; + } + } + + .pageHeaderLogo { + > a { + padding-block: 0; + } + } +} diff --git a/src/dark.scss b/src/dark.scss new file mode 100644 index 0000000..2bc7d79 --- /dev/null +++ b/src/dark.scss @@ -0,0 +1,8 @@ +@use 'sass:meta'; +@use 'iro-sass/src/props'; + +@use 'core'; +@use 'common'; + +@include core.styles--dark; +@include common.styles; diff --git a/src/light.scss b/src/light.scss new file mode 100644 index 0000000..2f9abdc --- /dev/null +++ b/src/light.scss @@ -0,0 +1,12 @@ +@use 'sass:meta'; +@use 'iro-sass/src/props'; + +@use 'core'; +@use 'common'; + +@use 'header'; + +@include core.styles--light; +@include common.styles; + +@include header.styles; -- cgit v1.2.3-70-g09d2