diff --git a/web/components/tabs-header.js b/web/components/tabs-header.js index a59162562..dbf94ef80 100644 --- a/web/components/tabs-header.js +++ b/web/components/tabs-header.js @@ -1,34 +1,38 @@ // @flow import classnames from 'classnames'; import * as React from 'react'; import Button from './button.react.js'; import cssPill from './tabs-pill.css'; import cssUnderline from './tabs-underline.css'; export type TabsHeaderStyle = 'pill' | 'underline'; type Props = { +children: React.Node, +isActive: boolean, +setTab: T => mixed, +id: T, +headerStyle?: TabsHeaderStyle, }; function TabsHeader(props: Props): React.Node { const { children, isActive, setTab, id, headerStyle = 'underline' } = props; + const css = headerStyle === 'pill' ? cssPill : cssUnderline; + const headerClasses = classnames(css.tabHeader, { - [css.backgroundTabHeader]: !isActive, + [css.inactiveTabHeader]: !isActive, }); + const onClickSetTab = React.useCallback(() => setTab(id), [setTab, id]); + return ( ); } export default TabsHeader; diff --git a/web/components/tabs-legacy.react.js b/web/components/tabs-legacy.react.js deleted file mode 100644 index b8814b787..000000000 --- a/web/components/tabs-legacy.react.js +++ /dev/null @@ -1,70 +0,0 @@ -// @flow - -import * as React from 'react'; - -import TabsHeader from './tabs-header.js'; -import type { TabsHeaderStyle } from './tabs-header.js'; -import cssPill from './tabs-pill.css'; -import cssUnderline from './tabs-underline.css'; - -type TabsContainerProps = { - +children?: React.ChildrenArray>, - +activeTab: T, - +setTab: T => mixed, - +headerStyle?: TabsHeaderStyle, -}; - -function TabsContainer(props: TabsContainerProps): React.Node { - const { children, activeTab, setTab, headerStyle = 'underline' } = props; - - const css = headerStyle === 'pill' ? cssPill : cssUnderline; - - const headers = React.Children.map(children, tab => { - const { id, header } = tab.props; - - const isActive = id === activeTab; - return ( - - {header} - - ); - }); - - const currentTab = React.Children.toArray(children).find( - tab => tab.props.id === activeTab, - ); - - const currentContent = currentTab ? currentTab.props.children : null; - - return ( -
-
-
{headers}
-
- {currentContent} -
- ); -} - -type TabsItemProps = { - +children: React.Node, - +id: T, - +header: React.Node, -}; - -function TabsItem(props: TabsItemProps): React.Node { - const { children } = props; - return children; -} - -const Tabs = { - Container: TabsContainer, - Item: TabsItem, -}; - -export default Tabs; diff --git a/web/components/tabs-pill.css b/web/components/tabs-pill.css index fa7af224a..a69710aa0 100644 --- a/web/components/tabs-pill.css +++ b/web/components/tabs-pill.css @@ -1,46 +1,24 @@ -div.tabsContainer { - color: var(--fg); - display: flex; - flex-direction: column; - overflow: hidden; - max-height: 100%; - flex: 1; -} - -div.tabsHeaderContainer { - border-bottom: 1px solid var(--border); - height: 56px; -} - -.tabsHeaderContainerPill { - display: flex; - background-color: var(--menu-bg); - border-radius: 8px; - margin: 8px; - align-items: center; -} - .tabHeader { flex: 1; font-size: var(--s-font-14); font-weight: var(--semi-bold); - color: var(--tabs-header-active-color); + color: var(--tab-label-primary-active); height: 32px; border-radius: 4px; - background-color: var(--tabs-header-active-background); + background-color: var(--tab-indicator-primary-active); margin: 4px; } -.backgroundTabHeader { - color: var(--tabs-header-background-color-pill); +.inactiveTabHeader { + color: var(--tab-label-primary-default); background-color: transparent; } -.backgroundTabHeader:hover { - color: var(--tabs-header-background-color-hover); +.inactiveTabHeader:hover { + color: var(--tab-label-primary-hover); transition: color 100ms; } -.backgroundTabHeader:not(:hover) { +.inactiveTabHeader:not(:hover) { transition: color 100ms; } diff --git a/web/components/tabs-underline.css b/web/components/tabs-underline.css index 7bfe8eb9b..978a869ff 100644 --- a/web/components/tabs-underline.css +++ b/web/components/tabs-underline.css @@ -1,35 +1,17 @@ -div.tabsContainer { - color: var(--fg); - display: flex; - flex-direction: column; - overflow: hidden; - max-height: 100%; - flex: 1; -} - -div.tabsHeaderContainer { - display: flex; -} - -.tabsHeaderContainerPill { - display: flex; - width: 100%; -} - .tabHeader { flex: 1; padding: 16px; font-size: var(--m-font-16); - color: var(--tabs-header-active-color); - border-bottom: 2px solid var(--tabs-header-active-border); + color: var(--tab-label-secondary-active); + border-bottom: 2px solid var(--tab-indicator-secondary-active); } -.backgroundTabHeader { - color: var(--tabs-header-background-color); - border-bottom-color: var(--tabs-header-background-border); +.inactiveTabHeader { + color: var(--tab-label-secondary-default); + border-bottom-color: var(--tab-indicator-secondary-default); } -.backgroundTabHeader:hover { - color: var(--tabs-header-background-color-hover); - border-bottom-color: var(--tabs-header-background-border-hover); +.inactiveTabHeader:hover { + color: var(--tab-label-secondary-hover); + border-bottom-color: var(--tab-indicator-secondary-hover); } diff --git a/web/components/tabs.css b/web/components/tabs.css index 36939f261..9491a646a 100644 --- a/web/components/tabs.css +++ b/web/components/tabs.css @@ -1,9 +1,9 @@ .container { display: flex; } .containerPill { - background-color: var(--tab-background-primary-default); + background-color: var(--tab-indicator-primary-default); margin: 8px; border-radius: 8px; } diff --git a/web/theme.css b/web/theme.css index abb9deeb6..3e512d001 100644 --- a/web/theme.css +++ b/web/theme.css @@ -1,435 +1,455 @@ :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-light-35: #ffffff59; --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); /* 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-tetirary-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-white-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); /* 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-background-primary-default: var(--shades-black-85); + --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); } /* 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); /* 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-tetirary-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-white-90); --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); /* 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-background-primary-default: var(--shades-white-60); + --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); }