summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_badge.scss3
-rw-r--r--src/_core.vars.scss94
2 files changed, 46 insertions, 51 deletions
diff --git a/src/_badge.scss b/src/_badge.scss
index 5913ea6..34fc392 100644
--- a/src/_badge.scss
+++ b/src/_badge.scss
@@ -22,6 +22,9 @@
22 22
23@mixin styles--dark { 23@mixin styles--dark {
24 .badge, a.badge { 24 .badge, a.badge {
25 --background-color: #{props.get(core.$theme, --base, --300)};
26 --color: #{props.get(core.$theme, --base, --800)};
27
25 &.badgeUpdate { 28 &.badgeUpdate {
26 --background-color: #{props.get(core.$theme, --red, --400)}; 29 --background-color: #{props.get(core.$theme, --red, --400)};
27 --color: #{props.get(core.$theme, --red, --400-text)}; 30 --color: #{props.get(core.$theme, --red, --400-text)};
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index c188e8f..0c69713 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -35,19 +35,19 @@ $themes-spec: (
35 ), 35 ),
36 36
37 --colors: ( 37 --colors: (
38 --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), 38 --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * math.div(0, 12)) (-30 * math.div(0, 12)),
39 --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), 39 --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * math.div(1, 12)) (-30 * math.div(1, 12)),
40 --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), 40 --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * math.div(2, 12)) (-30 * math.div(2, 12)),
41 --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), 41 --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * math.div(3, 12)) (-30 * math.div(3, 12)),
42 --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), 42 --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * math.div(4, 12)) (-30 * math.div(4, 12)),
43 --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), 43 --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * math.div(5, 12)) (-30 * math.div(5, 12)),
44 --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), 44 --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * math.div(6, 12)) (-30 * math.div(6, 12)),
45 --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), 45 --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * math.div(7, 12)) (-30 * math.div(7, 12)),
46 --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), 46 --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * math.div(8, 12)) (-30 * math.div(8, 12)),
47 --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), 47 --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * math.div(9, 12)) (-30 * math.div(9, 12)),
48 --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), 48 --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * math.div(10, 12)) (-30 * math.div(10, 12)),
49 --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), 49 --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * math.div(11, 12)) (-30 * math.div(11, 12)),
50 --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), 50 --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * math.div(12, 12)) (-30 * math.div(12, 12)),
51 ), 51 ),
52 ), 52 ),
53 53
@@ -65,7 +65,7 @@ $themes-spec: (
65 65
66 --link: ( 66 --link: (
67 --fg: --red --1000, 67 --fg: --red --1000,
68 --underline: --red --400, 68 --underline: --red --500,
69 --fg-inv: --red --1000-text, 69 --fg-inv: --red --1000-text,
70 --active: --red --1300, 70 --active: --red --1300,
71 --active-inv: --red --1300-text, 71 --active-inv: --red --1300-text,
@@ -80,31 +80,31 @@ $themes-spec: (
80 --75: 0.7 .2 0, 80 --75: 0.7 .2 0,
81 --100: 0 .4 0, 81 --100: 0 .4 0,
82 82
83 --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .4 * math.div(0, 6)) (30 * math.div(1, 7)), 83 --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .2 * math.div(0, 6)) (30 * math.div(1, 7)),
84 --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .4 * math.div(1, 6)) (30 * math.div(2, 7)), 84 --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .2 * math.div(1, 6)) (30 * math.div(2, 7)),
85 --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .4 * math.div(2, 6)) (30 * math.div(3, 7)), 85 --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .2 * math.div(2, 6)) (30 * math.div(3, 7)),
86 86
87 --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .4 * math.div(3, 6)) (30 * math.div(4, 7)), 87 --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .2 * math.div(3, 6)) (30 * math.div(4, 7)),
88 --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .4 * math.div(4, 6)) (30 * math.div(5, 7)), 88 --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .2 * math.div(4, 6)) (30 * math.div(5, 7)),
89 --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .4 * math.div(5, 6)) (30 * math.div(6, 7)), 89 --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .2 * math.div(5, 6)) (30 * math.div(6, 7)),
90 --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .4 * math.div(6, 6)) (30 * math.div(7, 7)), 90 --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .2 * math.div(6, 6)) (30 * math.div(7, 7)),
91 --900: #fff 91 --900: #fff
92 ), 92 ),
93 93
94 --colors: ( 94 --colors: (
95 --100: (math.div(0, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), 95 --100: (math.div(0, 12) * -104 + 2) (1 - .5 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)),
96 --200: (math.div(1, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), 96 --200: (math.div(1, 12) * -104 + 2) (1 - .5 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)),
97 --300: (math.div(2, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), 97 --300: (math.div(2, 12) * -104 + 2) (1 - .5 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)),
98 --400: (math.div(3, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), 98 --400: (math.div(3, 12) * -104 + 2) (1 - .5 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)),
99 --500: (math.div(4, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), 99 --500: (math.div(4, 12) * -104 + 2) (1 - .5 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)),
100 --600: (math.div(5, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), 100 --600: (math.div(5, 12) * -104 + 2) (1 - .5 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)),
101 --700: (math.div(6, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), 101 --700: (math.div(6, 12) * -104 + 2) (1 - .5 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)),
102 --800: (math.div(7, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), 102 --800: (math.div(7, 12) * -104 + 2) (1 - .5 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)),
103 --900: (math.div(8, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), 103 --900: (math.div(8, 12) * -104 + 2) (1 - .5 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)),
104 --1000: (math.div(9, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), 104 --1000: (math.div(9, 12) * -104 + 2) (1 - .5 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)),
105 --1100: (math.div(10, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), 105 --1100: (math.div(10, 12) * -104 + 2) (1 - .5 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)),
106 --1200: (math.div(11, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), 106 --1200: (math.div(11, 12) * -104 + 2) (1 - .5 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)),
107 --1300: (math.div(12, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), 107 --1300: (math.div(12, 12) * -104 + 2) (1 - .5 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)),
108 ), 108 ),
109 ), 109 ),
110 110
@@ -119,14 +119,6 @@ $themes-spec: (
119 --bg-base: --base --75, 119 --bg-base: --base --75,
120 --bg-l1: --base --100, 120 --bg-l1: --base --100,
121 --bg-l2: --base --200, 121 --bg-l2: --base --200,
122
123 --link: (
124 --fg: --yellow --1000,
125 --underline: --yellow --400,
126 --fg-inv: --yellow --1000-text,
127 --active: --yellow --1300,
128 --active-inv: --yellow --1300-text,
129 )
130 ), 122 ),
131 ) 123 )
132); 124);
@@ -261,10 +253,12 @@ $wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base,
261$wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark'); 253$wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark');
262$wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark'); 254$wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark');
263 255
264$wcfContentBackgroundDark: props.def(--wcfContentBackground, rgb(242, 242, 242), 'dark'); 256$wcfContentBackgroundDark: props.def(--wcfContentBackground, props.get($theme, --base, --100), 'dark');
265$wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark'); 257$wcfContentBorderInnerDark: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'dark');
266$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark'); 258$wcfContentBorderDark: props.def(--wcfContentBorder, props.get($wcfContentBorderInnerDark), 'dark');
267$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), 'dark'); 259$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, props.get($theme, --base, --600), 'dark');
260$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'dark');
261$wcfContentTextDark: props.def(--wcfContentText, props.get($theme, --base, --800), 'dark');
268 262
269$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark'); 263$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark');
270$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark'); 264$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark');
@@ -289,13 +283,11 @@ $wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.g
289$wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark'); 283$wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark');
290$wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark'); 284$wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark');
291 285
292$wcfSidebarBorderDark: props.def(--wcfSidebarBackground, transparent, 'dark'); 286$wcfSidebarBackgroundDark: props.def(--wcfSidebarBackground, $wcfContentBackground, 'dark');
287$wcfSidebarBorderDark: props.def(--wcfSidebarBorder, transparent, 'dark');
293$wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark'); 288$wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark');
294$wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark'); 289$wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark');
295$wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); 290$wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
296$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); 291$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
297 292
298$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --yellow, --900), 'dark'); 293$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark');
299$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --yellow, --900-text), 'dark');
300$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --yellow, --1200), 'dark');
301$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --yellow, --1200-text), 'dark');