diff --git a/web/modals/threads/create/compose-subchannel-modal.css b/web/modals/threads/create/compose-subchannel-modal.css
index 1b96bbd6a..032dacebd 100644
--- a/web/modals/threads/create/compose-subchannel-modal.css
+++ b/web/modals/threads/create/compose-subchannel-modal.css
@@ -1,33 +1,22 @@
 div.modalHeader {
   padding: 15px;
   font-weight: var(--semi-bold);
-  color: var(--compose-subchannel-header-fg);
-  background-color: var(--compose-subchannel-header-bg);
+  color: var(--text-background-tertiary-default);
+  background-color: var(--frame-background-tertiary-default);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 30px;
   column-gap: 10px;
 }
 
 div.modalHeaderParentName {
-  color: var(--compose-subchannel-mark-color);
+  color: var(--link-background-secondary-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 div.container {
-  width: 383px;
-  overflow-y: auto;
-}
-
-div.stepContainer {
-  position: relative;
-  height: 100vh;
-  max-height: 533px;
-}
-
-div.stepItem {
-  padding: 20px;
+  height: 60vh;
+  overflow: auto;
 }
diff --git a/web/modals/threads/create/compose-subchannel-modal.react.js b/web/modals/threads/create/compose-subchannel-modal.react.js
index af035e9b9..0fe3a49bb 100644
--- a/web/modals/threads/create/compose-subchannel-modal.react.js
+++ b/web/modals/threads/create/compose-subchannel-modal.react.js
@@ -1,271 +1,289 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   newThreadActionTypes,
   useNewThread,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { trimText } from 'lib/utils/text-utils.js';
 
 import css from './compose-subchannel-modal.css';
 import SubchannelMembers from './steps/subchannel-members.react.js';
 import type { VisibilityType } from './steps/subchannel-settings.react.js';
 import SubchannelSettings from './steps/subchannel-settings.react.js';
-import Stepper from '../../../components/stepper.react.js';
+import Button from '../../../components/button.react.js';
 import { updateNavInfoActionType } from '../../../redux/action-types.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../../selectors/nav-selectors.js';
 import {
   useAddUsersListContext,
   AddUsersListProvider,
 } from '../../../settings/relationship/add-users-list-provider.react.js';
 import Modal from '../../modal.react.js';
 
 type Props = {
   +onClose: () => void,
   +parentThreadInfo: ThreadInfo,
 };
 
 const getThreadType = (visibility: VisibilityType, announcement: boolean) => {
   if (visibility === 'open') {
     return announcement
       ? threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_OPEN_SUBTHREAD;
   } else {
     return announcement
       ? threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_SECRET_SUBTHREAD;
   }
 };
 
 type Steps = 'settings' | 'members';
 
 type HeaderProps = {
   +parentThreadName: string,
 };
 
 function ComposeSubchannelHeader(props: HeaderProps): React.Node {
   const { parentThreadName } = props;
   return (
     <div className={css.modalHeader}>
       <div>{'within '}</div>
       <div className={css.modalHeaderParentName}>{parentThreadName}</div>
     </div>
   );
 }
 
 const createSubchannelLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function ComposeSubchannelModal(props: Props): React.Node {
   const { parentThreadInfo, onClose } = props;
   const { uiName: parentThreadName } = useResolvedThreadInfo(parentThreadInfo);
 
   const { pendingUsersToAdd } = useAddUsersListContext();
 
   const [activeStep, setActiveStep] = React.useState<Steps>('settings');
 
   const [channelName, setChannelName] = React.useState<string>('');
   const [visibilityType, setVisibilityType] =
     React.useState<VisibilityType>('open');
   const [announcement, setAnnouncement] = React.useState<boolean>(false);
 
   const loadingState = useSelector(createSubchannelLoadingStatusSelector);
 
   const [errorMessage, setErrorMessage] = React.useState<string>('');
 
   const calendarQuery = useSelector(nonThreadCalendarQuery);
   const callNewThread = useNewThread();
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatch = useDispatch();
 
   const createSubchannel = React.useCallback(async () => {
     try {
       const threadType = getThreadType(visibilityType, announcement);
 
       const query = calendarQuery();
       const result = await callNewThread({
         name: channelName,
         type: threadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: Array.from(pendingUsersToAdd.keys()),
         calendarQuery: query,
         color: parentThreadInfo.color,
       });
 
       return result;
     } catch (e) {
       await setErrorMessage('unknown error');
       return null;
     }
   }, [
     visibilityType,
     announcement,
     calendarQuery,
     callNewThread,
     channelName,
     parentThreadInfo.id,
     parentThreadInfo.color,
     pendingUsersToAdd,
   ]);
 
   const dispatchCreateSubchannel = React.useCallback(async () => {
     await setErrorMessage('');
 
     const response = createSubchannel();
     await dispatchActionPromise(newThreadActionTypes, response);
     const result = await response;
 
     if (result) {
       const { newThreadID } = result;
       await dispatch({
         type: updateNavInfoActionType,
         payload: {
           activeChatThreadID: newThreadID,
         },
       });
 
       props.onClose();
     }
   }, [dispatchActionPromise, createSubchannel, props, dispatch]);
 
   const onChangeChannelName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const target = event.currentTarget;
       setChannelName(target.value);
     },
     [],
   );
 
   const onOpenVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('open'),
     [],
   );
 
   const onSecretVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('secret'),
     [],
   );
 
   const onAnnouncementSelected = React.useCallback(
     () => setAnnouncement(!announcement),
     [announcement],
   );
 
   const subchannelSettings = React.useMemo(
     () => (
       <SubchannelSettings
         channelName={channelName}
         visibilityType={visibilityType}
         announcement={announcement}
         onChangeChannelName={onChangeChannelName}
         onOpenTypeSelect={onOpenVisibilityTypeSelected}
         onSecretTypeSelect={onSecretVisibilityTypeSelected}
         onAnnouncementSelected={onAnnouncementSelected}
       />
     ),
     [
       channelName,
       visibilityType,
       announcement,
       onChangeChannelName,
       onOpenVisibilityTypeSelected,
       onSecretVisibilityTypeSelected,
       onAnnouncementSelected,
     ],
   );
 
-  const stepperButtons = React.useMemo(
-    () => ({
-      settings: {
-        nextProps: {
-          content: 'Next',
-          disabled: !channelName.trim(),
-          onClick: () => {
-            setErrorMessage('');
-            setChannelName(channelName.trim());
-            setActiveStep('members');
-          },
-        },
-      },
-      members: {
-        prevProps: {
-          content: 'Back',
-          onClick: () => setActiveStep('settings'),
-        },
-        nextProps: {
-          content: 'Create',
-          loading: loadingState === 'loading',
-          disabled: pendingUsersToAdd.size === 0,
-          onClick: dispatchCreateSubchannel,
-        },
-      },
-    }),
-    [
-      channelName,
-      dispatchCreateSubchannel,
-      loadingState,
-      pendingUsersToAdd.size,
-    ],
-  );
-
   const subchannelMembers = React.useMemo(
     () => <SubchannelMembers parentThreadInfo={parentThreadInfo} />,
     [parentThreadInfo],
   );
 
   const modalName =
     activeStep === 'members'
       ? `Create channel - ${trimText(channelName, 11)}`
       : 'Create channel';
 
+  const subheader = React.useMemo(
+    () => <ComposeSubchannelHeader parentThreadName={parentThreadName} />,
+    [parentThreadName],
+  );
+
+  const modalContent = React.useMemo(() => {
+    if (activeStep === 'settings') {
+      return subchannelSettings;
+    }
+    return subchannelMembers;
+  }, [activeStep, subchannelMembers, subchannelSettings]);
+
+  const onClickNext = React.useCallback(() => {
+    setErrorMessage('');
+    setChannelName(channelName.trim());
+    setActiveStep('members');
+  }, [channelName]);
+
+  const primaryButton = React.useMemo(() => {
+    if (activeStep === 'settings') {
+      return (
+        <Button
+          disabled={!channelName.trim()}
+          variant="filled"
+          onClick={onClickNext}
+        >
+          Next
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        disabled={loadingState === 'loading' || pendingUsersToAdd.size === 0}
+        variant="filled"
+        onClick={dispatchCreateSubchannel}
+      >
+        Create
+      </Button>
+    );
+  }, [
+    activeStep,
+    channelName,
+    dispatchCreateSubchannel,
+    loadingState,
+    onClickNext,
+    pendingUsersToAdd.size,
+  ]);
+
+  const onClickBack = React.useCallback(() => setActiveStep('settings'), []);
+
+  const secondaryButton = React.useMemo(() => {
+    if (activeStep !== 'members') {
+      return null;
+    }
+
+    return (
+      <Button variant="outline" onClick={onClickBack}>
+        Back
+      </Button>
+    );
+  }, [activeStep, onClickBack]);
+
   return (
-    <Modal name={modalName} onClose={onClose} size="fit-content">
+    <Modal
+      name={modalName}
+      onClose={onClose}
+      size="large"
+      subheader={subheader}
+      primaryButton={primaryButton}
+      secondaryButton={secondaryButton}
+    >
       <div className={css.container}>
-        <ComposeSubchannelHeader parentThreadName={parentThreadName} />
-        <div className={css.stepItem}>
-          <Stepper.Container
-            className={css.stepContainer}
-            activeStep={activeStep}
-          >
-            <Stepper.Item
-              content={subchannelSettings}
-              name="settings"
-              nextProps={stepperButtons.settings.nextProps}
-            />
-            <Stepper.Item
-              content={subchannelMembers}
-              name="members"
-              prevProps={stepperButtons.members.prevProps}
-              nextProps={stepperButtons.members.nextProps}
-              errorMessage={errorMessage}
-            />
-          </Stepper.Container>
-        </div>
+        {modalContent}
+        {errorMessage}
       </div>
     </Modal>
   );
 }
 
 function ComposeSubchannelModalWrapper(props: Props): React.Node {
   const composeSubchannelModalWrapper = React.useMemo(
     () => (
       <AddUsersListProvider>
         <ComposeSubchannelModal {...props} />
       </AddUsersListProvider>
     ),
     [props],
   );
 
   return composeSubchannelModalWrapper;
 }
 
 export default ComposeSubchannelModalWrapper;
diff --git a/web/theme.css b/web/theme.css
index e85862238..f7639d06f 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,471 +1,467 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-95: #0a0a0a;
   --shades-black-90: #191919;
   --shades-black-85: #1f1f1f;
   --shades-black-75: #404040;
   --shades-black-60: #666666;
   --shades-black-50: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --shadow-dark-35: #00000059;
   --shadow-dark-25: #00000040;
   --shadow-light-35: #ffffff59;
   --shadow-light-25: #ffffff40;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-95);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-50);
   --text-input-bg: var(--shades-black-75);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-75);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-85);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-75);
   --btn-disabled-color: var(--shades-black-50);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-75);
   --thread-active-bg: var(--shades-black-75);
   --chat-timestamp-color: var(--shades-black-50);
   --tool-tip-bg: var(--shades-black-75);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-75);
   --calendar-chevron: var(--shades-black-50);
   --calendar-day-bg: var(--shades-black-50);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-85);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --community-creation-btn-bg: var(--shades-black-75);
   --community-creation-ancestry-bg: var(--shades-black-75);
   --community-creation-ancestry-text: var(--shades-black-50);
   --community-creation-keyserver-container: var(--shades-black-95);
   --modal-bg: var(--shades-black-85);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-85);
   --help-color: var(--shades-black-50);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-50);
   --thread-color-read: var(--shades-black-50);
   --thread-preview-secondary: var(--shades-black-60);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-95);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-search-button-color: var(--shades-black-50);
   --thread-ancestor-keyserver-border: var(--shades-black-60);
   --thread-ancestor-color: var(--shades-white-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-75);
   --message-action-tooltip-bg: var(--shades-black-85);
   --message-action-tooltip-bg-light: var(--shades-black-75);
   --menu-bg: var(--shades-black-85);
   --menu-bg-light: var(--shades-black-75);
   --menu-separator-color: var(--shades-black-75);
   --menu-color: var(--shades-black-50);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-75);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-85);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-active-background: var(--violet-dark-100);
   --tabs-header-background-color: var(--shades-black-50);
   --tabs-header-background-color-pill: var(--shades-white-60);
   --tabs-header-background-border: var(--shades-black-75);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-60);
   --members-modal-member-text: var(--shades-black-50);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --label-grey-bg: var(--shades-black-75);
   --label-grey-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-50);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-75);
   --relationship-modal-color: var(--shades-black-50);
   --arrow-extension-color: var(--shades-black-50);
   --modal-close-color: var(--shades-black-50);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-50);
   --add-members-item-color: var(--shades-black-50);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-75);
   --add-members-item-disabled-color-hover: var(--shades-black-50);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-60);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-75);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-75);
   --notification-settings-option-invalid-selected-color: var(--shades-black-50);
   --thread-creation-search-container-bg: var(--shades-black-85);
   --thread-creation-close-search-color: var(--shades-black-50);
   --thread-creation-search-item-bg-hover: var(--shades-black-75);
   --thread-creation-search-item-info-color: var(--shades-black-50);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-50);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-60);
   --inline-engagement-bg-hover: var(--shades-black-75);
   --inline-engagement-color: var(--fg);
-  --compose-subchannel-header-fg: var(--shades-black-50);
-  --compose-subchannel-header-bg: var(--shades-black-75);
-  --compose-subchannel-label-color: var(--shades-black-50);
-  --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-60);
   --typeahead-overlay-light: var(--shades-black-75);
   --typeahead-overlay-dark: var(--shades-black-85);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
   --drawer-expand-button: var(--shades-black-50);
   --drawer-expand-button-disabled: var(--shades-black-75);
   --drawer-item-color: var(--shades-white-60);
   --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: var(--shades-black-90);
   --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
   --community-drawer-lines: rgba(255, 255, 255, 0.08);
   --topbar-button-bg: var(--shades-black-85);
   --filters-button-bg: var(--shades-black-95);
   --filters-button-border: var(--shades-black-75);
   --filters-button-hover-bg: var(--shades-black-85);
   --filter-panel-fg: var(--shades-black-50);
   --filter-panel-bg: #0d0d0d;
   --topbar-button-bg-hover: var(--shades-black-75);
   --topbar-button-fg: var(--shades-white-60);
   --message-label-color: var(--shades-black-50);
   --topbar-lines: rgba(255, 255, 255, 0.08);
   --pin-message-information-text-color: var(--shades-white-60);
   --pin-message-modal-border-color: var(--shades-black-75);
   --pinned-count-banner-color: var(--shades-black-85);
   --pinned-count-text-color: var(--shades-white-90);
   --modal-overlay-background-90: rgba(0, 0, 0, 0.9);
   --modal-overlay-background-80: rgba(0, 0, 0, 0.8);
   --dropdown-text: var(--shades-white-100);
   --dropdown-select-bg: var(--shades-black-85);
   --dropdown-select-border: var(--shades-white-60);
   --dropdown-option-bg: var(--shades-black-75);
   --dropdown-option-hover-bg: var(--shades-black-60);
   --dropdown-selected-option-check-color: var(--violet-dark-100);
   --dropdown-chevron-color: var(--shades-white-100);
   --dropdown-disabled-color: var(--shades-black-50);
   --change-member-role-modal-description-text: var(--shades-white-60);
   --change-member-role-modal-generic-text: var(--shades-white-100);
   --change-member-role-modal-disabled-background: var(--shades-black-75);
   --unsaved-changes-modal-text-color: var(--shades-white-60);
   --modal-secondary-label: var(--shades-black-50);
   --modal-separator: var(--shades-black-75);
 }
 
 /* 
   Hey Comm Devs! Below is the in progress work for introducing a new
   color design system/light mode for our web app! We will be slowly 
   migrating over to this new system over the next few months. At
   this moment, if you are working on a new feature, please use the
   new color system. 
 
   If there is not a good color for your use case, please message
   Ginsu and/or Ted and we can help you figure out what the best 
   to do is.
   
   Also until this project is fully done, please add Ginsu as a reviewer
   to any diff where we use the colors.
 
   If you have any questions please message Ginsu or Ted.
 
   Thanks :)
 */
 
 /* Dark theme (default CSS theme) */
 :root {
   /* Frame */
   --frame-background-primary-default: var(--shades-black-95);
   --frame-background-secondary-default: var(--shades-black-85);
   --frame-background-tertiary-default: var(--shades-black-75);
 
   /* Text */
   --text-background-primary-default: var(--shades-white-100);
   --text-background-secondary-default: var(--shades-white-60);
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
   /* Panel */
   --panel-background-primary-default: var(--shades-black-85);
   --panel-background-secondary-default: var(--shades-black-90);
   --panel-headerShadow-primary-default: var(--shadow-dark-35);
   --panel-headerShadow-secondary-default: var(--shadow-dark-25);
 
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-75);
   --button-background-tertiary-default: var(--shades-black-85);
   --button-background-success-default: var(--success-primary);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
   --button-background-tertiary-hover: var(--shades-black-75);
   --button-background-primary-disabled: var(--shades-black-75);
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-60);
   --button-label-tertiary-default: var(--shades-black-50);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
   --button-label-tertiary-hover: var(--shades-white-80);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
   --link-background-primary-disabled: var(--shades-black-50);
   --link-background-secondary-default: var(--violet-light-100);
   --link-background-secondary-disabled: var(--shades-black-75);
 
   /* Separator */
   --separator-background-primary-default: var(--shades-black-75);
 
   /* Modal */
   --modal-background-primary-default: var(--shades-black-85);
   --modal-background-secondary-default: var(--shades-black-90);
   --modal-header-primary-default: var(--shades-white-100);
   --modal-close-primary-default: var(--shades-black-50);
   --modal-close-primary-hover: var(--shades-white-100);
   --modal-listItem-primary-hover: var(--shades-black-90);
 
   /* Input Field */
   --inputField-background-primary-default: var(--shades-black-85);
   --inputField-background-secondary-default: var(--shades-black-75);
   --inputField-label-primary-default: var(--shades-white-100);
   --inputField-label-secondary-default: var(--shades-black-50);
   --inputField-border-primary-default: var(--shades-black-75);
   --inputField-clearBackground-primary-default: var(--shades-black-60);
   --inputField-clearIcon-primary-default: var(--shades-white-100);
 
   /* Status Indicator */
   --statusIndicator-background-outer-active: var(--success-dark-90);
   --statusIndicator-background-outer-inactive: var(--error-dark-90);
   --statusIndicator-background-inner-active: var(--success-primary);
   --statusIndicator-background-inner-inactive: var(--error-primary);
 
   /* Enum Option */
   --enumOption-background-primary-selected: var(--shades-black-75);
   --enumOption-icon-primary-default: var(--violet-dark-100);
   --enumOption-title-primary-default: var(--shades-white-90);
   --enumOption-description-primary-default: var(--shades-white-60);
   --enumOption-input-primary-default: var(--shades-black-60);
   --enumOption-input-primary-selected: var(--shades-white-60);
   --enumOption-input-secondary-default: var(--shades-white-80);
   --enumOption-input-secondary-selected: var(--success-primary);
   --enumOption-input-secondary-disabled: var(--shades-black-50);
 
   /* Tooltip */
   --tooltip-background-primary-default: var(--shades-black-75);
   --tooltip-label-primary-default: var(--shades-white-100);
 
   /* Unread Indicator */
   --unreadIndicator-background-primary-default: var(--error-primary);
   --unreadIndicator-label-primary-default: var(--shades-white-100);
   --unreadIndicator-border-primary-default: var(--shades-black-85);
 
   /* Tab */
   --tab-indicator-primary-default: var(--shades-black-85);
   --tab-indicator-primary-active: var(--violet-dark-100);
   --tab-label-primary-default: var(--shades-white-60);
   --tab-label-primary-active: var(--shades-white-100);
   --tab-label-primary-hover: var(--shades-white-80);
   --tab-indicator-secondary-default: var(--shades-black-75);
   --tab-indicator-secondary-active: var(--violet-light-100);
   --tab-indicator-secondary-hover: var(--shades-black-60);
   --tab-label-secondary-default: var(--shades-black-50);
   --tab-label-secondary-active: var(--shades-white-100);
   --tab-label-secondary-hover: var(--shades-white-80);
 
   /* List Item */
   --listItem-background-primary-hover: var(--shades-black-90);
 }
 
 /* Light theme */
 [data-theme='light'] {
   /* Frame */
   --frame-background-primary-default: var(--shades-white-100);
   --frame-background-secondary-default: var(--shades-white-80);
   --frame-background-tertiary-default: var(--shades-white-60);
 
   /* Text */
   --text-background-primary-default: var(--shades-black-95);
   --text-background-secondary-default: var(--shades-black-60);
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
   /* Panel */
   /* @GINSU: TODO double check these values after redesign is finished */
   --panel-background-primary-default: var(--shades-white-80);
   --panel-background-secondary-default: var(--shades-white-90);
   --panel-headerShadow-primary-default: var(--shadow-light-35);
   --panel-headerShadow-secondary-default: var(--shadow-light-25);
 
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-50);
   /* @GINSU: TODO double check the tertiary values after redesign is finished */
   --button-background-tertiary-default: var(--shades-black-60);
   --button-background-success-default: var(--success-primary);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
   --button-background-tertiary-hover: var(--shades-black-50);
   --button-background-primary-disabled: var(--shades-white-60);
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-90);
   --button-label-tertiary-default: var(--shades-black-60);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
   --button-label-tertiary-hover: var(--shades-white-80);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
   --link-background-primary-disabled: var(--shades-black-50);
   /* @GINSU: TODO double check the secondary values after redesign is finished */
   --link-background-secondary-default: var(--violet-dark-100);
   --link-background-secondary-disabled: var(--shades-white-60);
 
   /* Separator */
   --separator-background-primary-default: var(--shades-white-60);
 
   /* Modal */
   --modal-background-primary-default: var(--shades-white-100);
   --modal-background-secondary-default: var(--shades-white-80);
   --modal-header-primary-default: var(--shades-black-95);
   --modal-close-primary-default: var(--shades-black-50);
   --modal-close-primary-hover: var(--shades-black-95);
   --modal-listItem-primary-hover: var(--shades-white-70);
 
   /* Input Field */
   --inputField-background-primary-default: var(--shades-white-100);
   --inputField-background-secondary-default: var(--shades-white-60);
   --inputField-label-primary-default: var(--shades-black-95);
   --inputField-label-secondary-default: var(--shades-black-60);
   --inputField-border-primary-default: var(--shades-white-60);
   --inputField-clearBackground-primary-default: var(--shades-black-50);
   --inputField-clearIcon-primary-default: var(--shades-white-100);
 
   /* Status Indicator */
   --statusIndicator-background-outer-active: var(--success-dark-50);
   --statusIndicator-background-outer-inactive: var(--error-dark-50);
   --statusIndicator-background-inner-active: var(--success-primary);
   --statusIndicator-background-inner-inactive: var(--error-primary);
 
   /* Enum Option */
   --enumOption-background-primary-selected: var(--shades-white-70);
   --enumOption-icon-primary-default: var(--violet-dark-100);
   --enumOption-title-primary-default: var(--shades-black-85);
   --enumOption-description-primary-default: var(--shades-black-60);
   --enumOption-input-primary-default: var(--shades-black-50);
   --enumOption-input-primary-selected: var(--shades-black-60);
   --enumOption-input-secondary-default: var(--shades-black-75);
   --enumOption-input-secondary-selected: var(--success-primary);
   --enumOption-input-secondary-disabled: var(--shades-black-50);
 
   /* Tooltip */
   /* @GINSU: TODO double check these values after redesign is finished */
   --tooltip-background-primary-default: var(--shades-white-80);
   --tooltip-label-primary-default: var(--shades-black-85);
 
   /* Unread Indicator */
   --unreadIndicator-background-primary-default: var(--error-primary);
   --unreadIndicator-label-primary-default: var(--shades-white-100);
   --unreadIndicator-border-primary-default: var(--shades-white-80);
 
   /* Tab */
   /* @GINSU: TODO double check these values after redesign is finished */
   --tab-indicator-primary-default: var(--shades-white-60);
   --tab-indicator-primary-active: var(--violet-dark-100);
   --tab-label-primary-default: var(--shades-black-75);
   --tab-label-primary-active: var(--shades-white-100);
   --tab-label-primary-hover: var(--shades-black-95);
   --tab-indicator-secondary-default: var(--shades-black-50);
   --tab-indicator-secondary-active: var(--violet-dark-100);
   --tab-indicator-secondary-hover: var(--shades-black-60);
   --tab-label-secondary-default: var(--shades-black-60);
   --tab-label-secondary-active: var(--shades-black-95);
   --tab-label-secondary-hover: var(--shades-black-85);
 
   /* List Item */
   /* @GINSU: TODO double check these values after redesign is finished */
   --listItem-background-primary-hover: var(--shades-white-70);
 }