diff --git a/src/components/badge.style.js b/src/components/badge.style.js index 37833cdb..0697cac6 100644 --- a/src/components/badge.style.js +++ b/src/components/badge.style.js @@ -9,6 +9,12 @@ export default { notification: '.-notification' }, defaultRules: [ + { + component: 'Root', + directives: { + '--badgeNotification': 'color | --cRed' + } + }, { directives: { background: '--cGreen' diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 18eb610b..f7254ea3 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -1,5 +1,3 @@ -@import "../../variables"; - .chat-message-wrapper { &.hovered-message-chain { .animated.Avatar { @@ -93,8 +91,7 @@ .error { .status-content.media-body, .created-at { - color: $fallback--cRed; - color: var(--badgeNotification, $fallback--cRed); + color: var(--badgeNotification); } } @@ -146,6 +143,5 @@ margin: 1.4em 0; font-size: 0.9em; user-select: none; - color: $fallback--text; - color: var(--faintedText, $fallback--text); + color: var(--textFaint); } diff --git a/src/components/root.style.js b/src/components/root.style.js index 53777a4b..40c53172 100644 --- a/src/components/root.style.js +++ b/src/components/root.style.js @@ -15,9 +15,23 @@ export default { defaultRules: [ { directives: { + // These are here just to establish order, + // themes should override those + '--bg': 'color | #121a24', + '--fg': 'color | #182230', + '--text': 'color | #b9b9ba', + '--link': 'color | #d8a070', + '--cRed': 'color | #FF0000', + '--cBlue': 'color | #0095ff', + '--cGreen': 'color | #0fa00f', + '--cOrange': 'color | #ffa500', + + // Fonts '--font': 'generic | sans-serif', '--monoFont': 'generic | monospace', - '--bg': 'color | #000000', // just to establish order + + // Fallback no-background-image color + // (also useful in some other places like scrollbars) '--wallpaper': 'color | --bg, -2' } }