From a9a73f2a256766adb76527bab29743ccf9e53124 Mon Sep 17 00:00:00 2001
From: SkyratBot <59378654+SkyratBot@users.noreply.github.com>
Date: Thu, 7 Dec 2023 06:45:04 +0100
Subject: [PATCH] [MIRROR] TGUI Stack Zebra Mode [MDB IGNORE] (#25484)

* TGUI Stack Zebra Mode (#79972)

## About The Pull Request

TGUI Stack elements can now be zebra-styled (alternating colors for
contrast)

![image](https://github.com/goonstation/goonstation/assets/4741640/962d048e-3428-471b-87b3-fc9edd4b134e)

## Why It's Good For The Game

readability? i kinda just like horses

partial port of https://github.com/goonstation/goonstation/pull/17117
i am the original author and i license my shit under MIT, if you really
want me to add to the header authors bug me on discord

![ZebraZebrasGIF](https://github.com/goonstation/goonstation/assets/4741640/8ca53f9d-c6e9-4bf2-86ac-aa4b4a87a306)

## Changelog

:cl:
add: TGUI Stack elements can now be zebra-styled (alternating colors for
contrast)
/:cl:

---------

Co-authored-by: oranges <email@ oranges.net.nz>

* TGUI Stack Zebra Mode

---------

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;
 }