7 files changed, 48 insertions, 23 deletions

diff --git a/src/_badge.scss b/src/_badge.scss
index b13dbc9..f18a9fb 100644
--- a/src/_badge.scss
+++ b/src/_badge.scss
@@ -1,15 +1,22 @@
 @use 'iro-sass/src/props';
 
 @use 'common';
+@use 'core';
 
 @mixin styles {
     .badge, a.badge {
         padding-inline: 8px;
         border-radius: 10em;
-    }
+        vertical-align: baseline;
 
-    .badge.badgeUpdate, a.badge.badgeUpdate {
-        --background-color: #{props.get(common.$vlpnLink)};
-        --color: #{props.get(common.$vlpnLinkFg)};
+        &.badgeUpdate {
+            --background-color: #{props.get(common.$vlpnLink)};
+            --color: #{props.get(common.$vlpnLinkFg)};
+        }
+    
+        &.yellow {
+            --background-color: #{props.get(core.$theme, --yellow, --800)};
+            --color: #{props.get(core.$theme, --yellow, --800-text)};
+        }
     }
 }
diff --git a/src/_common.vars.scss b/src/_common.vars.scss
index 7b3116b..d01b17a 100644
--- a/src/_common.vars.scss
+++ b/src/_common.vars.scss
@@ -10,6 +10,8 @@ $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));
@@ -72,3 +74,6 @@ $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLink
 
 $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.vars.scss b/src/_core.vars.scss
index 40f98b0..3c6aba8 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -25,25 +25,27 @@ $themes-spec: (
             ),
 
             --colors: (
-                --100:  (math.div(0, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
-                --200:  (math.div(1, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
-                --300:  (math.div(2, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
-                --400:  (math.div(3, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
-                --500:  (math.div(4, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
-                --600:  (math.div(5, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
-                --700:  (math.div(6, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
-                --800:  (math.div(7, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
-                --900:  (math.div(8, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
-                --1000: (math.div(9, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
-                --1100: (math.div(10, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
-                --1200: (math.div(11, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
-                --1300: (math.div(12, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
+                --100:  (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
+                --200:  (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
+                --300:  (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
+                --400:  (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
+                --500:  (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
+                --600:  (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
+                --700:  (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
+                --800:  (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
+                --900:  (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
+                --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
+                --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
+                --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
+                --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
             ),
         ),
 
         --palettes: (
             --base: #edddc4 --grays,
-            --red:  #731601 --colors,
+            --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,
         ),
     ),
 );
diff --git a/src/_gallery.scss b/src/_gallery.scss
new file mode 100644
index 0000000..c436309
--- /dev/null
+++ b/src/_gallery.scss
@@ -0,0 +1,5 @@
+@mixin styles {
+    .galleryNewImageBadge {
+        box-shadow: none;
+    }
+}
diff --git a/src/_rank.scss b/src/_rank.scss
index fac2663..cd6e3cd 100644
--- a/src/_rank.scss
+++ b/src/_rank.scss
@@ -1,5 +1,5 @@
 @mixin styles {
     .userRankImage > img {
-       
+        vertical-align: baseline;
     }
 }
diff --git a/src/_reaction.scss b/src/_reaction.scss
index 82a9231..1e09849 100644
--- a/src/_reaction.scss
+++ b/src/_reaction.scss
@@ -1,12 +1,16 @@
- @mixin styles {
+@use 'iro-sass/src/props';
+
+@use 'common';
+
+@mixin styles {
     .messageFooter {
         .reactionType {
-            inline-size: 30px;
-            block-size: 30px;
+            inline-size: props.get(common.$vlpnSmileySize);
+            block-size: props.get(common.$vlpnSmileySize);
         }
     }
 
     .reactionSummary {
         gap: 15px;
     }
- }
+}
diff --git a/src/light.scss b/src/light.scss
index 87ba99f..325a0c6 100644
--- a/src/light.scss
+++ b/src/light.scss
@@ -13,6 +13,7 @@
 @use 'rank';
 @use 'reaction';
 @use 'footer';
+@use 'gallery';
 
 @include core.styles--light;
 @include common.styles;
@@ -26,3 +27,4 @@
 @include rank.styles;
 @include reaction.styles;
 @include footer.styles;
+@include gallery.styles;