oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: moved remaning old theme globals to new globals

This commit is contained in:
William Grant 2022-10-11 15:34:06 +11:00
parent a5a48e0ae7
commit 70f2330ae5
3 changed files with 75 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
stylesheets/_session.scss
View File

@ -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 {

51
ts/themes/SessionTheme.tsx
View File

@ -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)}
};

73
ts/themes/globals.tsx
View File

@ -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
};