diff --git a/about.html b/about.html
index 6cf866743..8544c8a80 100644
--- a/about.html
+++ b/about.html
@@ -18,8 +18,8 @@
<style>
body {
text-align: center;
- background-color: rgba(0, 0, 0);
- color: white;
+ background-color: var(--background-primary-color);
+ color: var(--text-primary-color);
font-size: 14px;
}
@@ -29,7 +29,7 @@
}
a {
- color: white;
+ color: var(--text-primary-color);
}
</style>
</head>
diff --git a/debug_log.html b/debug_log.html
index 267c842c5..e354d086d 100644
--- a/debug_log.html
+++ b/debug_log.html
@@ -17,7 +17,7 @@
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
<style>
body {
- background-color: #000;
+ background-color: var(--background-primary-color);
}
</style>
</head>
diff --git a/package.json b/package.json
index d61780aff..6f2f78581 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 053c9297d..8ca4873f8 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 7ba156608..4f67b9690 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 9af3f74cc..8e12e500e 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 e98c1186f..cbc1cd11d 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 c43faf822..627356d22 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 8a7feb81c..29688fad1 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 4e4e2ca29..3872d6a89 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 21e4d82f5..3f070d178 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 19148b1e3..c088a53ab 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 296b25052..752655d1c 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<string> => {
// key is the pubkey, value is the hash
const cachedHashes = new Map<string, number>();
-const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
+const avatarPlaceholderColors = Object.values(COLORS.PRIMARY);
function useHashBasedOnPubkey(pubkey: string) {
const [hash, setHash] = useState<number | undefined>(undefined);
@@ -79,6 +80,7 @@ export const AvatarPlaceHolder = (props: Props) => {
if (loading || !hash) {
// return grey circle
+ // TODO Theming update
return (
<svg viewBox={viewBox}>
<g id="UrTavla">
@@ -104,6 +106,7 @@ export const AvatarPlaceHolder = (props: Props) => {
const bgColor = avatarPlaceholderColors[bgColorIndex];
+ // TODO Theming Update
return (
<svg viewBox={viewBox}>
<g id="UrTavla">
diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx
index 30a64f9ad..ef808c684 100644
--- a/ts/components/dialog/OnionStatusPathDialog.tsx
+++ b/ts/components/dialog/OnionStatusPathDialog.tsx
@@ -154,7 +154,7 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme
<ModalStatusLight
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
- color={'var(--color-accent)'}
+ color={'var(--button-path-default-color)'}
/>
);
};
@@ -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 bb52ac0fd..d4bba15a6 100644
--- a/ts/components/icon/SessionIcon.tsx
+++ b/ts/components/icon/SessionIcon.tsx
@@ -127,13 +127,15 @@ const Svg = React.memo(styled.svg<StyledSvgProps>`
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 929772089..8084164e5 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 7d6d4231b..74f7bbc60 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 49bbaee8e..7abfbe2f2 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 4cd3ff702..2d77fe5a5 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 5a1749897..5a8bef1a8 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 (
- <SessionIcon iconType="mute" iconColor={'var(--color-text-subtle)'} iconSize="small" />
+ <SessionIcon
+ iconType="mute"
+ iconColor={'var(--conversation-tab-text-color)'}
+ iconSize="small"
+ />
);
case 'mentions_only':
return (
- <SessionIcon iconType="bell" iconColor={'var(--color-text-subtle)'} iconSize="small" />
+ <SessionIcon
+ iconType="bell"
+ iconColor={'var(--conversation-tab-text-color)'}
+ iconSize="small"
+ />
);
default:
return null;
@@ -71,7 +79,11 @@ const ListItemIcons = () => {
const pinIcon =
isMessagesSection && isPinned ? (
- <SessionIcon iconType="pin" iconColor={'var(--color-text-subtle)'} iconSize="small" />
+ <SessionIcon
+ iconType="pin"
+ iconColor={'var(--conversation-tab-text-color)'}
+ iconSize="small"
+ />
) : null;
return (
<StyledConversationListItemIconWrapper>
diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
index 06ae33b37..4fe86fffe 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<Props, 'displayName' | 'id'>) => {
};
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 4b1571e67..4ee5f092c 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 98c3dba6f..2b88aecbf 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<PrimaryColorType> => {
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 },
];
};