From 630dbee8170f66702f63d380923b9c0f6a702bd9 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Fri, 17 Dec 2021 11:32:21 +0530 Subject: [PATCH] Fix theme Signed-off-by: Ajay Bura --- src/app/atoms/avatar/Avatar.jsx | 6 +- src/app/atoms/text/Text.jsx | 2 +- src/app/atoms/text/Text.scss | 8 --- .../molecules/room-selector/RoomSelector.jsx | 1 + src/index.scss | 60 ++++++++++++++----- 5 files changed, 52 insertions(+), 25 deletions(-) diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx index d366399..e0fd78e 100644 --- a/src/app/atoms/avatar/Avatar.jsx +++ b/src/app/atoms/avatar/Avatar.jsx @@ -8,7 +8,7 @@ import Text from '../text/Text'; import RawIcon from '../system-icons/RawIcon'; function Avatar({ - text, bgColor, iconSrc, imageSrc, size, + text, bgColor, iconSrc, iconColor, imageSrc, size, }) { const [image, updateImage] = useState(imageSrc); let textSize = 's1'; @@ -30,7 +30,7 @@ function Avatar({ > { iconSrc !== null - ? + ? : text !== null && ( {twemojify([...text][0])} @@ -48,6 +48,7 @@ Avatar.defaultProps = { text: null, bgColor: 'transparent', iconSrc: null, + iconColor: null, imageSrc: null, size: 'normal', }; @@ -56,6 +57,7 @@ Avatar.propTypes = { text: PropTypes.string, bgColor: PropTypes.string, iconSrc: PropTypes.string, + iconColor: PropTypes.string, imageSrc: PropTypes.string, size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']), }; diff --git a/src/app/atoms/text/Text.jsx b/src/app/atoms/text/Text.jsx index 9567bad..a18328b 100644 --- a/src/app/atoms/text/Text.jsx +++ b/src/app/atoms/text/Text.jsx @@ -10,7 +10,7 @@ function Text({ if (className) classes.push(className); classes.push(`text text-${variant} text-${weight}`); - if (primary) classes.push('text-primary'); + if (primary) classes.push('font-primary'); const textClass = classes.join(' '); if (span) return { children }; diff --git a/src/app/atoms/text/Text.scss b/src/app/atoms/text/Text.scss index 0bae528..a4a1eed 100644 --- a/src/app/atoms/text/Text.scss +++ b/src/app/atoms/text/Text.scss @@ -24,14 +24,6 @@ } } -.text-primary { - font-family: var(--font-primary); - - --fw-light: var(--p-fw-light); - --fw-normal: var(--p-fw-normal); - --fw-medium: var(--p-fw-medium); - --fw-bold: var(--p-fw-bold); -} .text-light { font-weight: var(--fw-light); } diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx index ee5471f..c96612e 100644 --- a/src/app/molecules/room-selector/RoomSelector.jsx +++ b/src/app/molecules/room-selector/RoomSelector.jsx @@ -55,6 +55,7 @@ function RoomSelector({ text={name} bgColor={colorMXID(roomId)} imageSrc={imageSrc} + iconColor="var(--ic-surface-low)" iconSrc={iconSrc} size="extra-small" /> diff --git a/src/index.scss b/src/index.scss index 3377445..f4c6b60 100644 --- a/src/index.scss +++ b/src/index.scss @@ -69,6 +69,7 @@ /* system icons | --ic-[background type]-[priority]: value */ --ic-surface-normal: #626262; + --ic-surface-low: #7c7c7c; --ic-primary-normal: #ffffff; --ic-positive-normal: rgba(69, 184, 59, 80%); --ic-caution-normal: rgba(255, 179, 0, 80%); @@ -148,11 +149,6 @@ --lh-b3: 16px; /* font-weight */ - --p-fw-light: 300; - --p-fw-normal: 400; - --p-fw-medium: 500; - --p-fw-bold: 600; - --fw-light: 300; --fw-normal: 400; --fw-medium: 500; @@ -199,12 +195,12 @@ .dark-theme, .butter-theme { /* background color | --bg-[background type]: value */ - --bg-surface: hsl(230, 8%, 20%); - --bg-surface-transparent: hsla(230, 8%, 20%, 0); - --bg-surface-low: hsl(230, 8%, 16%); - --bg-surface-low-transparent: hsla(230, 8%, 16%, 0); - --bg-surface-extra-low: hsl(230, 8%, 14%); - --bg-surface-extra-low-transparent: hsla(230, 8%, 14%, 0); + --bg-surface: hsl(208, 8%, 20%); + --bg-surface-transparent: hsla(208, 8%, 20%, 0); + --bg-surface-low: hsl(208, 8%, 16%); + --bg-surface-low-transparent: hsla(208, 8%, 16%, 0); + --bg-surface-extra-low: hsl(208, 8%, 14%); + --bg-surface-extra-low-transparent: hsla(208, 8%, 14%, 0); --bg-surface-hover: rgba(255, 255, 255, 3%); --bg-surface-active: rgba(255, 255, 255, 5%); --bg-surface-border: rgba(0, 0, 0, 20%); @@ -237,15 +233,16 @@ /* system icons | --ic-[background type]-[priority]: value */ --ic-surface-normal: rgba(255, 255, 255, 84%); + --ic-surface-low: rgba(255, 255, 255, 64%); --ic-primary-normal: #ffffff; /* user mxid colors */ --mx-uc-1: hsl(208, 100%, 58%); - --mx-uc-2: hsl(301, 100%, 60%); + --mx-uc-2: hsl(301, 80%, 70%); --mx-uc-3: hsl(163, 93%, 41%); --mx-uc-4: hsl(343, 91%, 66%); - --mx-uc-5: hsl(24, 100%, 67%); - --mx-uc-6: hsl(181, 100%, 50%); + --mx-uc-5: hsl(24, 90%, 67%); + --mx-uc-6: hsl(181, 90%, 50%); --mx-uc-7: hsl(243, 100%, 74%); --mx-uc-8: hsl(94, 66%, 50%); @@ -301,6 +298,41 @@ /* system icons | --ic-[background type]-[priority]: value */ --ic-surface-normal: rgb(255, 251, 222, 84%); + --ic-surface-low: rgba(255, 251, 222, 64%); +} + +.font-primary { + font-family: var(--font-primary); + + /* override font styles for primary font */ + --fs-h1: 36px; + --ls-h1: -1.5px; + --lh-h1: 38px; + + --fs-h2: 24px; + --ls-h2: -0.5px; + --lh-h2: 30px; + + --fs-s1: 18px; + --ls-s1: -0.2px; + --lh-s1: 24px; + + --fs-b1: 16px; + --ls-b1: 0.1px; + --lh-b1: 24px; + + --fs-b2: 14px; + --ls-b2: 0.2px; + --lh-b2: 20px; + + --fs-b3: 12px; + --ls-b3: 0px; + --lh-b3: 16px; + + --fw-light: 300; + --fw-normal: 400; + --fw-medium: 500; + --fw-bold: 600; } html {