diff --git a/about.html b/about.html index 6cf866743e..8544c8a806 100644 --- a/about.html +++ b/about.html @@ -18,8 +18,8 @@ diff --git a/debug_log.html b/debug_log.html index 267c842c57..e354d086d6 100644 --- a/debug_log.html +++ b/debug_log.html @@ -17,7 +17,7 @@ diff --git a/package.json b/package.json index d61780afff..6f2f785818 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,8 @@ "scripts": { "start-prod": "cross-env NODE_ENV=production NODE_APP_INSTANCE=devprod$MULTI electron .", - "build-everything": "yarn clean && yarn protobuf && grunt && yarn sass && tsc && yarn parcel-util-worker", - "build-everything:watch": "yarn clean && yarn protobuf && grunt && yarn sass && yarn parcel-util-worker && tsc -w", + "build-everything": "yarn clean && yarn protobuf && grunt && yarn sass && tsc && yarn parcel-util-worker", + "build-everything:watch": "yarn clean && yarn protobuf && grunt && yarn sass && yarn parcel-util-worker && tsc -w", "protobuf": "pbjs --target static-module --wrap commonjs --out ts/protobuf/compiled.js protos/*.proto && pbts --out ts/protobuf/compiled.d.ts ts/protobuf/compiled.js --force-long", "sass": "rimraf 'stylesheets/dist/' && parcel build --target sass --no-autoinstall --no-cache", diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss index 053c9297dc..8ca4873f8c 100644 --- a/stylesheets/_avatar.scss +++ b/stylesheets/_avatar.scss @@ -9,6 +9,7 @@ img { object-fit: cover; border-radius: 50%; + // TODO Theming update border: 1px solid var(--color-avatar-border-color); } } diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 7ba1566088..4f67b96907 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -55,13 +55,14 @@ } .session-icon-button { - background-color: var(--color-accent); + background-color: var(--button-icon-background-color); box-shadow: none; filter: brightness(1.05); svg path { transition: var(--default-duration); opacity: 0.6; + // TODO Theming remove fill: var(--color-text-opposite); } } diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 9af3f74ccd..8e12e500ec 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -26,5 +26,5 @@ } .module-conversation-list-item--mentioned-us { - border-left: 4px solid var(--color-session-green-color) !important; + border-left: 4px solid var(--conversation-tab-color-strip-color) !important; } diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index e98c1186f4..cbc1cd11d4 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -178,6 +178,7 @@ position: relative; .module-avatar { + // TODO Theming update box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow); } diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c43faf8228..627356d228 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -42,7 +42,7 @@ display: inline-block; position: absolute; bottom: 4px; - @include color-svg('../images/error.svg', var(--color-destructive)); + @include color-svg('../images/error.svg', var(--danger-color)); } .module-message__error--outgoing { @@ -393,7 +393,7 @@ .module-message-detail__delete-button { @include button-reset; - background-color: var(--color-destructive); + background-color: var(--danger-color); color: var(--color-white-color); box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); border-radius: 5px; @@ -421,7 +421,7 @@ } .module-message-detail__contact__error { - color: var(--color-destructive); + color: var(--danger-color); font-weight: 300; } @@ -633,17 +633,17 @@ cursor: pointer; &:hover { - background-color: var(--color-dark-gray-color); + background-color: var(--conversation-tab-background-hover-color); } &--is-blocked { - border-left: 4px solid var(--color-destructive) !important; + border-left: 4px solid var(--danger-color) !important; } } .module-conversation-list-item__unread-count { - color: var(--color-white-color); - background-color: var(--color-session-green-color); + background-color: var(--unread-messages-alert-background-color); + color: var(--unread-messages-alert-text-color); text-align: center; padding-top: 1px; @@ -662,7 +662,7 @@ min-width: 16px; line-height: 16px; border-radius: 8px; - + // TODO Theming Should we remove this? box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); } @@ -704,7 +704,7 @@ .module-conversation-list-item__header__date--has-unread { font-weight: 300; - color: var(--color-lighter-gray-color); + color: var(--conversation-tab-text-unread-color); } .module-conversation-list-item__message { @@ -720,7 +720,7 @@ font-size: var(--font-size-sm); line-height: 18px; - color: var(--color-light-gray-color); + color: var(--conversation-tab-text-color); height: 1.3em; overflow: hidden; @@ -733,7 +733,7 @@ .module-conversation-list-item__message__text--has-unread { font-weight: 400; - color: var(--color-lighter-gray-color); + color: var(--conversation-tab-text-unread-color); } // Module: Image diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 8a7feb81c7..29688fad13 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -342,6 +342,7 @@ label { .conversation-header { .module-avatar img { + // TODO Theming Update box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2); } @@ -693,7 +694,7 @@ label { width: 13px; height: 13px; border-radius: 50%; - background: var(--color-session-green-color); + background: var(--primary-color); animation-timing-function: cubic-bezier(0, 1, 1, 0); } div:nth-child(1) { @@ -836,17 +837,18 @@ input { width: 40px; border-radius: 50%; opacity: 1; - background-color: var(--color-cell-background); + background-color: var(--button-icon-background-color); box-shadow: var(--color-session-shadow); svg path { transition: var(--default-duration); opacity: 0.6; - fill: var(--color-text); + fill: var(--button-icon-stroke-color); } &:hover svg path { opacity: 1; + fill: var(--button-icon-stroke-hover-color); } } } diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 4e4e2ca29d..3872d6a899 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -13,30 +13,31 @@ $session-compose-margin: 20px; } &-list-item { + background: var(--conversation-tab-background-color); transition: var(--default-duration); &:hover { - background: var(--color-clickable-hovered); + background: var(--conversation-tab-background-hover-color); } &--is-selected { - background: var(--color-conversation-item-selected); + background: var(--conversation-tab-background-selected-color); .module-conversation__user__profile-number, .module-conversation__user__profile-name, .module-conversation-list-item__message__text { - color: var(--color-text); + color: var(--conversation-tab-text-selected-color); } } &--has-unread { - border-left: var(--border-unread); - background: var(--color-conversation-item-has-unread); + background: var(--conversation-tab-background-unread-color); + border-left: 4px solid var(--conversation-tab-color-strip-color); } &__unread-count { - color: var(--color-text); - background: var(--color-clickable-hovered); + background: var(--conversation-tab-bubble-background-color); + color: var(--conversation-tab-bubble-text-color); position: static !important; font-weight: 700 !important; @@ -52,9 +53,9 @@ $session-compose-margin: 20px; } &__message__text { - color: var(--color-light-gray-color); + color: var(--conversation-tab-text-color); &--has-unread { - color: var(--color-text); + color: var(--conversation-tab-text-unread-color); } } @@ -65,7 +66,7 @@ $session-compose-margin: 20px; &__header__name--with-unread .module-conversation__user__profile-number, &__header__name--with-unread .module-conversation__user__profile-name { - color: var(--color-text); + color: var(--conversation-tab-text-unread-color); } } } @@ -98,7 +99,7 @@ $session-compose-margin: 20px; } &-overlay { - background: var(--color-left-pane-overlay-background); + background: var(--background-primary-color); display: flex; flex-direction: column; @@ -164,10 +165,6 @@ $session-compose-margin: 20px; margin-top: 10px; width: 250px; filter: var(--filter-session-text); - transition: 0s; - .path { - fill: red; - } } } diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 21e4d82f51..3f070d178c 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -259,33 +259,35 @@ .module-empty-state { color: var(--color-light-gray-color); } + + // TODO Theming Remove // Module: Conversation List Item - .module-conversation-list-item--is-selected { - background-color: var(--color-dark-gray-color); - } + // .module-conversation-list-item--is-selected { + // background-color: var(--color-dark-gray-color); + // } - .module-conversation-list-item__unread-count { - color: var(--color-white-color); - background-color: var(--color-session-green-color); - box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); - } + // .module-conversation-list-item__unread-count { + // color: var(--color-white-color); + // background-color: var(--color-session-green-color); + // box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); + // } - .module-conversation-list-item__header__name { - color: var(--color-lighter-gray-color); - } + // .module-conversation-list-item__header__name { + // color: var(--color-lighter-gray-color); + // } - .module-conversation-list-item__header__date--has-unread { - color: var(--color-lighter-gray-color); - } + // .module-conversation-list-item__header__date--has-unread { + // color: var(--color-lighter-gray-color); + // } - .module-conversation-list-item__message__text { - color: var(--color-light-gray-color); - } + // .module-conversation-list-item__message__text { + // color: var(--color-light-gray-color); + // } - .module-conversation-list-item__message__text--has-unread { - color: var(--color-lighter-gray-color); - } + // .module-conversation-list-item__message__text--has-unread { + // color: var(--color-lighter-gray-color); + // } // Module: Image diff --git a/ts/components/avatar/Avatar.tsx b/ts/components/avatar/Avatar.tsx index 19148b1e3d..c088a53ab2 100644 --- a/ts/components/avatar/Avatar.tsx +++ b/ts/components/avatar/Avatar.tsx @@ -43,20 +43,20 @@ const Identicon = (props: Props) => { }; const CrownWrapper = styled.div` - position: absolute; display: flex; + align-items: center; + justify-content: center; + position: absolute; bottom: 0%; right: 12%; height: 20px; width: 20px; transform: translate(25%, 25%); color: #f7c347; - background: var(--color-inbox-background); + background: var(--background-primary-color); border-radius: 50%; + /* TODO Theming update? */ filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); - - align-items: center; - justify-content: center; `; export const CrownIcon = () => { diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx index 296b250524..752655d1c0 100644 --- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { COLORS } from '../../../themes/colors'; import { getInitials } from '../../../util/getInitials'; type Props = { @@ -20,7 +21,7 @@ const sha512FromPubkey = async (pubkey: string): Promise => { // key is the pubkey, value is the hash const cachedHashes = new Map(); -const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a']; +const avatarPlaceholderColors = Object.values(COLORS.PRIMARY); function useHashBasedOnPubkey(pubkey: string) { const [hash, setHash] = useState(undefined); @@ -79,6 +80,7 @@ export const AvatarPlaceHolder = (props: Props) => { if (loading || !hash) { // return grey circle + // TODO Theming update return ( @@ -104,6 +106,7 @@ export const AvatarPlaceHolder = (props: Props) => { const bgColor = avatarPlaceholderColors[bgColorIndex]; + // TODO Theming Update return ( diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx index 30a64f9ad0..ef808c6847 100644 --- a/ts/components/dialog/OnionStatusPathDialog.tsx +++ b/ts/components/dialog/OnionStatusPathDialog.tsx @@ -154,7 +154,7 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme ); }; @@ -195,15 +195,16 @@ export const ActionPanelOnionStatusLight = (props: { const isOnline = useSelector(getIsOnline); // Set icon color based on result - const red = 'var(--color-destructive)'; - const green = 'var(--color-accent)'; - const orange = 'var(--color-warning)'; + const errorColor = 'var(--button-path-error-color)'; + const defaultColor = 'var(--button-path-default-color)'; + const connectingColor = 'var(--button-path-connecting-color)'; // start with red - let iconColor = red; + let iconColor = errorColor; //if we are not online or the first path is not valid, we keep red as color if (isOnline && firstPathLength > 1) { - iconColor = onionPathsCount >= 2 ? green : onionPathsCount >= 1 ? orange : red; + iconColor = + onionPathsCount >= 2 ? defaultColor : onionPathsCount >= 1 ? connectingColor : errorColor; } return ( diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx index bb52ac0fdf..d4bba15a63 100644 --- a/ts/components/icon/SessionIcon.tsx +++ b/ts/components/icon/SessionIcon.tsx @@ -127,13 +127,15 @@ const Svg = React.memo(styled.svg` transform: ${props => `rotate(${props.iconRotation}deg)`}; animation: ${props => animation(props)}; border-radius: ${props => props.borderRadius}; - background-color: ${props => (props.backgroundColor ? props.backgroundColor : '')}; + background-color: ${props => + props.backgroundColor ? props.backgroundColor : '--button-icon-background-color'}; border-radius: ${props => (props.borderRadius ? props.borderRadius : '')}; filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')}; + fill: ${props => (props.iconColor ? props.iconColor : '--button-icon-stroke-color')}; padding: ${props => (props.iconPadding ? props.iconPadding : '')}; transition: inherit; `); -//tslint:enable no-unnecessary-callback-wrapper +// tslint:enable no-unnecessary-callback-wrapper const SessionSvg = (props: { viewBox: string; @@ -150,7 +152,7 @@ const SessionSvg = (props: { backgroundColor?: string; iconPadding?: string; }) => { - const colorSvg = props.iconColor; + const colorSvg = props.iconColor ? props.iconColor : '--button-icon-stroke-color'; const pathArray = props.path instanceof Array ? props.path : [props.path]; const propsToPick = { width: props.width, diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index 9297720896..8084164e52 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -20,12 +20,12 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>` font-family: var(--font-default); border-radius: 50%; font-weight: 700; - background: var(--color-destructive); + /* TODO Theming Update */ + background: var(--unread-messages-alert-background-color); transition: var(--default-duration); opacity: ${props => (props.shouldRender ? 1 : 0)}; text-align: center; - color: white; - /* cursor: */ + color: var(--unread-messages-alert-text-color); `; const StyledCount = styled.div<{ countOverflow: boolean }>` diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index 7d6d4231b2..74f7bbc602 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -65,6 +65,7 @@ const Section = (props: { type: SectionType }) => { if (type === SectionType.Profile) { dispatch(editProfileModal({})); } else if (type === SectionType.Moon) { + // TODO Theming Toggle current theme light and dark mode with new system const currentTheme = window.Events.getThemeSetting(); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; diff --git a/ts/components/leftpane/LeftPaneMessageSection.tsx b/ts/components/leftpane/LeftPaneMessageSection.tsx index 49bbaee8e2..7abfbe2f2d 100644 --- a/ts/components/leftpane/LeftPaneMessageSection.tsx +++ b/ts/components/leftpane/LeftPaneMessageSection.tsx @@ -32,14 +32,20 @@ export interface Props { overlayMode: OverlayMode | undefined; } +const StyledLeftPaneContent = styled.div` + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; +`; + const StyledConversationListContent = styled.div` + background: var(--background-primary-color); overflow-x: hidden; display: flex; flex-direction: column; flex-grow: 1; transition: none; - - background: var(--color-conversation-list); `; const StyledLeftPaneContent = styled.div` diff --git a/ts/components/leftpane/LeftPaneSectionContainer.tsx b/ts/components/leftpane/LeftPaneSectionContainer.tsx index 4cd3ff7022..2d77fe5a55 100644 --- a/ts/components/leftpane/LeftPaneSectionContainer.tsx +++ b/ts/components/leftpane/LeftPaneSectionContainer.tsx @@ -5,7 +5,7 @@ export const LeftPaneSectionContainer = styled.div` display: flex; flex-direction: column; align-items: center; - border-right: var(--border-session); + border-right: var(--border-color); overflow-y: auto; .session-icon-button { diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 5a17498974..5a8bef1a8e 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -31,11 +31,19 @@ const NotificationSettingIcon = (props: { isMessagesSection: boolean }) => { return null; case 'disabled': return ( - + ); case 'mentions_only': return ( - + ); default: return null; @@ -71,7 +79,11 @@ const ListItemIcons = () => { const pinIcon = isMessagesSection && isPinned ? ( - + ) : null; return ( diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx index 06ae33b378..4fe86fffe1 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx @@ -35,6 +35,7 @@ const AvatarItem = (props: Pick) => { }; const StyledContactRowName = styled.div` + color: var(--text-primary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -47,14 +48,14 @@ const StyledRowContainer = styled.button` padding: 0 var(--margins-lg); transition: background-color var(--default-duration) linear; cursor: pointer; - border-bottom: 1px var(--color-session-border) solid; + border-bottom: 1px var(--border-color) solid; &:first-child { - border-top: 1px var(--color-session-border) solid; + border-top: 1px var(--border-color) solid; } :hover { - background-color: var(--color-clickable-hovered); + background-color: var(--conversation-tab-background-hover-color); } `; @@ -62,11 +63,11 @@ const StyledBreak = styled.div` display: flex; align-items: center; padding: 0 var(--margins-lg); - color: var(--color-text-subtle); + color: var(--text-secondary-color); font-size: var(--font-size-md); height: 30px; // should also be changed in rowHeight - border-bottom: 1px var(--color-session-border) solid; + border-bottom: 1px var(--border-color) solid; `; export const ContactRowBreak = (props: { char: string; key: string; style: CSSProperties }) => { diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx index 4b1571e671..4ee5f092c9 100644 --- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx +++ b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx @@ -12,21 +12,21 @@ const StyledActionRow = styled.button` border: none; display: flex; align-items: center; - border-bottom: 1px var(--color-session-border) solid; + border-bottom: 1px var(--border-color) solid; transition-duration: 0.25s; width: 100%; &:first-child { - border-top: 1px var(--color-session-border) solid; + border-top: 1px var(--border-color) solid; } :hover { - background: var(--color-clickable-hovered); + background: var(--conversation-tab-background-hover-color); } `; export const StyledChooseActionTitle = styled.span` - color: var(--color-text); + color: var(--text-primary-color); font-size: 18px; padding: var(--margins-xs) var(--margins-lg); `; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 98c3dba6fc..2b88aecbff 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -456,6 +456,17 @@ export const SessionGlobalStyles = createGlobalStyle` /* New Theme Variables */ /* Colors */ + --green-color: ${COLORS.PRIMARY.GREEN}, + --blue-color: ${COLORS.PRIMARY.BLUE}, + --yellow-color: ${COLORS.PRIMARY.YELLOW}, + --pink-color: ${COLORS.PRIMARY.PINK}, + --purple-color: ${COLORS.PRIMARY.PURPLE}, + --orange-color: ${COLORS.PRIMARY.ORANGE}, + --red-color: ${COLORS.PRIMARY.RED}, + /* TODO Theming this should be overridable */ + --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; + --danger-color: ${COLORS.DANGER.LIGHT}; + /* Backgrounds */ --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; --background-secondary-color: ${THEMES.CLASSIC_LIGHT.COLOR5}; @@ -468,7 +479,7 @@ export const SessionGlobalStyles = createGlobalStyle` --border-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; /* Modals */ - /* TODO Clarify what those transparent colors mean */ + /* TODO Theming Clarify what those transparent colors mean */ /* Text Box */ --text-box-background-color: var(--background-primary-color); @@ -477,14 +488,14 @@ export const SessionGlobalStyles = createGlobalStyle` --text-box-border-color: ${THEMES.CLASSIC_LIGHT.COLOR2}; /* Message Bubbles */ - --message-bubbles-outgoing-background-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; + --message-bubbles-outgoing-background-color: var(--primary-color); --message-bubbles-incoming-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --message-bubbles-outgoing-text-color: var(--text-primary-color); --message-bubbles-incoming-text-color: var(--text-primary-color); /* Menu Button */ --menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0}; - /* TODO Make a icon fill varible that uses the background color? */ + /* TODO Theming Make a icon fill varible that uses the background color? */ --menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; /* Chat (Interaction) Buttons */ @@ -498,9 +509,9 @@ export const SessionGlobalStyles = createGlobalStyle` --settings-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --settings-tab-text-color: var(--text-primary-color); - /* TODO probably consolidate this */ + /* TODO Theming probably consolidate this */ /* Buttons */ - /* TODO are solid buttons ever disabled? */ + /* TODO Theming are solid buttons ever disabled? */ /* Solid */ --button-solid-background-color: var(--background-primary-color); --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; @@ -513,19 +524,21 @@ export const SessionGlobalStyles = createGlobalStyle` THEMES.CLASSIC_LIGHT.COLOR0 )}, 0.1); --button-outline-text-color: var(--text-primary-color); - /* TODO we might not need this */ + /* TODO Theming we might not need this */ --button-outline-text-hover-color: var(--text-primary-color); --button-outline-border-color: var(--text-primary-color); --button-outline-border-hover-color: var(--text-primary-color); --button-outline-disabled-color: var(--text-secondary-color); /* Icons */ + --button-icon-background-color: ${COLORS.TRANSPARENT}; --button-icon-stroke-color: var(--text-secondary-color); --button-icon-stroke-hover-color: var(--text-primary-color); --button-icon-stroke-selected-color: var(--text-primary-color); - /* Consolidate with code */ + /* TODO Theming Consolidate with code */ /* Conversation Tab */ + /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items etc. */ --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5}; --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; @@ -537,8 +550,8 @@ export const SessionGlobalStyles = createGlobalStyle` --conversation-tab-text-selected-color: var(--text-primary-color); --conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --conversation-tab-bubble-text-color: var(--text-primary-color); - /* TODO account for overriding */ - --conversation-tab-color-strip-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; + /* TODO Theming account for overriding */ + --conversation-tab-color-strip-color: var(--primary-color); /* Search Bar */ --search-bar-background-color: var(--background-secondary-color); @@ -548,25 +561,25 @@ export const SessionGlobalStyles = createGlobalStyle` --search-bar-icon-hover-color: var(--text-primary-color); /* Scroll Bars */ - /* TODO think this is the track? Should add thumb and other scroll colors here */ + /* TODO Theming think this is the track? Should add thumb and other scroll colors here */ /* Default */ --scroll-bar-fill-color: var(--text-secondary-color); /* Zoom Bar */ --zoom-bar-interval-color: var(--text-secondary-color); - /* TODO think this is the thumb? */ - --zoom-bar-selector-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; + /* TODO Theming think this is the thumb? */ + --zoom-bar-selector-color: var(--primary-color); /* Toggle Switch */ --toggle-switch-ball-color: ; - /* TODO think this should be white instead of transparent */ + /* TODO Theming think this should be white instead of transparent */ --toggle-switch-off-background-color: ${COLORS.TRANSPARENT}; --toggle-switch-off-border-color: var(--border-color); - --toggle-switch-on-background-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; + --toggle-switch-on-background-color: var(--primary-color); --toggle-switch-on-border-color: ${COLORS.TRANSPARENT}; - /* TODO Think this is part of the Convesations Tab */ + /* TODO Theming Think this is part of the Convesations Tab */ /* Unread Messages Alert */ - --unread-messages-alert-background-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; + --unread-messages-alert-background-color: var(--primary-color); --unread-messages-alert-text-color: var(--text-primary-color); /* toggles between the Light and Dark mode for a Theme */ @@ -600,6 +613,7 @@ export const SessionTheme = ({ children }: { children: any }) => ( * */ +// TODO Theming need to improve this somehow type SettingsThemeSwitcherColor = { background: string; border: string; @@ -626,12 +640,12 @@ type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string export const getPrimaryColors = (): Array => { return [ - { id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: '#31F196' }, - { id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: '#57C9FA' }, - { id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: '#FAD657' }, - { id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: '#FF95EF' }, - { id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: '#C993FF' }, - { id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: '#FCB159' }, - { id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: '#FF9C8E' }, + { id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: COLORS.PRIMARY.GREEN }, + { id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: COLORS.PRIMARY.BLUE }, + { id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: COLORS.PRIMARY.YELLOW }, + { id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: COLORS.PRIMARY.PINK }, + { id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: COLORS.PRIMARY.PURPLE }, + { id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: COLORS.PRIMARY.ORANGE }, + { id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: COLORS.PRIMARY.RED }, ]; };