Fix theme

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-17 11:32:21 +05:30
parent 18dc02c700
commit 630dbee817
5 changed files with 52 additions and 25 deletions

View file

@ -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
? <RawIcon size={size} src={iconSrc} />
? <RawIcon size={size} src={iconSrc} color={iconColor} />
: text !== null && (
<Text variant={textSize} weight="medium" primary>
{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']),
};

View file

@ -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 <span className={classes.join(' ')}>{ children }</span>;

View file

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

View file

@ -55,6 +55,7 @@ function RoomSelector({
text={name}
bgColor={colorMXID(roomId)}
imageSrc={imageSrc}
iconColor="var(--ic-surface-low)"
iconSrc={iconSrc}
size="extra-small"
/>

View file

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