From 70f2330ae591f75e628228b1fc4b43daf3236e73 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 15:34:06 +1100 Subject: [PATCH] feat: moved remaning old theme globals to new globals --- stylesheets/_session.scss | 6 ++-- ts/themes/SessionTheme.tsx | 51 +------------------------- ts/themes/globals.tsx | 73 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 75 insertions(+), 55 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4ef3669c4..518e83e03 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -40,7 +40,8 @@ textarea { } ::selection { - background: var(--color-text-highlight); + // TODO Theming - See color + // background: var(--color-text-highlight); } .shadowed { @@ -160,8 +161,7 @@ label { .conversation-header { .module-avatar img { - // TODO Theming Update - box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2); + box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2); } .search-icon { diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index a73ce0254..9806360cc 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -4,58 +4,9 @@ import { createGlobalStyle } from 'styled-components'; import { classicLight } from './'; import { declareCSSVariables, THEME_GLOBALS } from './globals'; -const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba -const destructiveAltColorRGB = '255, 69, 56'; - -// THEME INDEPEDENT COLORS -const avatarBorderColor = '#00000059'; - -// default to classic light theme +// Defaults to Classic Dark theme export const SessionGlobalStyles = createGlobalStyle` html { - /* FONTS */ - --font-default: 'Roboto'; - --font-font-accent: 'Loor'; - --font-font-mono: 'SpaceMono'; - --font-size-xs: 11px; - --font-size-sm: 13px; - --font-size-md: 15px; - --font-size-lg: 17px; - --font-size-h1: 30px; - --font-size-h2: 24px; - --font-size-h3: 20px; - --font-size-h4: 16px; - - /* MARGINS */ - --margins-xs: 5px; - --margins-sm: 10px; - --margins-md: 15px; - --margins-lg: 20px; - - /* PADDING */ - // TODO Theming - review and update after Audric has done link preview fix - --padding-message-content: 7px 13px; - --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below - --border-radius-message-box: 16px; - --border-radius: 5px; - - /* SIZES */ - --main-view-header-height: 63px; - - /* ANIMATIONS */ - --default-duration: 0.25s; - - /* CONSTANTS */ - --composition-container-height: 60px; - --search-input-height: 34px; - - /* COLORS NOT CHANGING BETWEEN THEMES */ - - --color-white-color-rgb: ${whiteColorRGB}; - --color-destructive-alt-rgb: ${destructiveAltColorRGB}; - --color-avatar-border-color: ${avatarBorderColor}; - - /* New Theme */ ${declareCSSVariables(THEME_GLOBALS)} ${declareCSSVariables(classicLight)} }; diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index db9756900..bf32e2c72 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -1,9 +1,44 @@ import { hexColorToRGB } from '../util/hexColorToRGB'; import { COLORS } from './constants/colors'; -// For now this only keeps the colors -// TODO Theming add margin, padding, font, variables here. +// These variables are independant of the current theme export type ThemeGlobals = { + /* Fonts */ + '--font-default': string; + '--font-font-accent': string; + '--font-font-mono': string; + '--font-size-xs': string; + '--font-size-sm': string; + '--font-size-md': string; + '--font-size-lg': string; + '--font-size-h1': string; + '--font-size-h2': string; + '--font-size-h3': string; + '--font-size-h4': string; + + /* Margins */ + '--margins-xs': string; + '--margins-sm': string; + '--margins-md': string; + '--margins-lg': string; + + /* Padding */ + '--padding-message-content': string; + '--padding-link-preview': string; + + /* Border Radius */ + '--border-radius': string; + '--border-radius-message-box': string; + + /* Sizes */ + '--main-view-header-height': string; + '--composition-container-height': string; + '--search-input-height': string; + + /* Animations */ + '--default-duration': string; + + /* Colors */ '--green-color': string; '--blue-color': string; '--yellow-color': string; @@ -34,10 +69,42 @@ export type ThemeGlobals = { '--lightbox-background-color': string; '--lightbox-caption-background-color': string; '--lightbox-icon-stroke-color': string; + + /* Avatar Border */ + '--avatar-border-color': string; }; // These are only set once in the global style (at root). export const THEME_GLOBALS: ThemeGlobals = { + '--font-default': 'Roboto', + '--font-font-accent': 'Loor', + '--font-font-mono': 'SpaceMono', + '--font-size-xs': '11px', + '--font-size-sm': '13px', + '--font-size-md': '15px', + '--font-size-lg': '17px', + '--font-size-h1': '30px', + '--font-size-h2': '24px', + '--font-size-h3': '20px', + '--font-size-h4': '16px', + + '--margins-xs': '5px', + '--margins-sm': '10px', + '--margins-md': '15px', + '--margins-lg': '20px', + + '--padding-message-content': '7px 13px', + '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below + + '--border-radius': '5px', + '--border-radius-message-box': '16px', + + '--main-view-header-height': '63px', + '--composition-container-height': '60px', + '--search-input-height': '34px', + + '--default-duration': '0.25s', + '--green-color': COLORS.PRIMARY.GREEN, '--blue-color': COLORS.PRIMARY.BLUE, '--yellow-color': COLORS.PRIMARY.YELLOW, @@ -65,6 +132,8 @@ export const THEME_GLOBALS: ThemeGlobals = { '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)', '--lightbox-icon-stroke-color': 'var(--white-color)', + '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`, + // TODO Theming - Add selection colors for dark and light themes // Current light uses #00000088 and dark uses #FFFFFF88 };