From cc7479b534ab945c8e9d2f4da2163c90b540bcda Mon Sep 17 00:00:00 2001
From: Iajret Creature <122297233+Steals-The-PRs@users.noreply.github.com>
Date: Thu, 7 Dec 2023 14:47:52 +0300
Subject: [PATCH] [MIRROR] TGUI Stack Zebra Mode [MDB IGNORE](#1020)

* TGUI Stack Zebra Mode (#79972)
---------

Co-authored-by: SkyratBot <59378654+SkyratBot@users.noreply.github.com>
Co-authored-by: ZeWaka <zewakagamer@gmail.com>
Co-authored-by: oranges <email@ oranges.net.nz>
---
 tgui/packages/tgui/components/Stack.tsx         | 4 +++-
 tgui/packages/tgui/stories/Stack.stories.jsx    | 2 +-
 tgui/packages/tgui/styles/components/Stack.scss | 6 ++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx
index 9abf13e651b..4d0ab75cab5 100644
--- a/tgui/packages/tgui/components/Stack.tsx
+++ b/tgui/packages/tgui/components/Stack.tsx
@@ -11,16 +11,18 @@ import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, c
 type StackProps = FlexProps & {
   vertical?: boolean;
   fill?: boolean;
+  zebra?: boolean;
 };
 
 export const Stack = (props: StackProps) => {
-  const { className, vertical, fill, ...rest } = props;
+  const { className, vertical, fill, zebra, ...rest } = props;
   return (
     <div
       className={classes([
         'Stack',
         fill && 'Stack--fill',
         vertical ? 'Stack--vertical' : 'Stack--horizontal',
+        zebra && 'Stack--zebra',
         className,
         computeFlexClassName(props),
       ])}
diff --git a/tgui/packages/tgui/stories/Stack.stories.jsx b/tgui/packages/tgui/stories/Stack.stories.jsx
index 9ebdf16c793..d1ac602f5b1 100644
--- a/tgui/packages/tgui/stories/Stack.stories.jsx
+++ b/tgui/packages/tgui/stories/Stack.stories.jsx
@@ -35,7 +35,7 @@ const Story = (props) => {
       <Stack fill className="debug-layout">
         <SmallStackItems />
         <Stack.Item grow={1}>
-          <Stack fill vertical>
+          <Stack fill vertical zebra>
             <SmallStackItems />
             <Stack.Item>
               <Stack fill>
diff --git a/tgui/packages/tgui/styles/components/Stack.scss b/tgui/packages/tgui/styles/components/Stack.scss
index ab2c6f24931..02d0e8bbe24 100644
--- a/tgui/packages/tgui/styles/components/Stack.scss
+++ b/tgui/packages/tgui/styles/components/Stack.scss
@@ -6,6 +6,8 @@
 @use '../base.scss';
 @use './Divider.scss';
 
+$zebra-background-color: base.$color-bg-section !default;
+
 .Stack--fill {
   height: 100%;
 }
@@ -26,6 +28,10 @@
   }
 }
 
+.Stack--zebra > .Stack__item:nth-child(even) {
+  background-color: $zebra-background-color;
+}
+
 .Stack--horizontal > .Stack__divider:not(.Stack__divider--hidden) {
   border-left: Divider.$thickness solid Divider.$color;
 }