bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start adding color adaptations

Browse source
This commit is contained in:
Alex Gleason 2020-05-30 20:11:08 -05:00
parent 67a7adb9a9
commit 56540932e1
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/soapbox/containers/soapbox.js
View file

@ -78,7 +78,8 @@ class SoapboxMount extends React.PureComponent {
componentDidMount() {
this.props.dispatch(setTheme(ImmutableMap({
'brand-color': 'green',
// 'brand-color': '#0482d8',
'brand-color': '#1ca82b',
})));
}

10
app/soapbox/reducers/theme.js
View file

@ -2,13 +2,21 @@ import {
SET_THEME,
} from '../actions/theme';
import { Map as ImmutableMap } from 'immutable';
import { brightness, hue } from 'chromatism';
const initialState = ImmutableMap();
const populate = themeData => {
const { 'brand-color': brandColor } = themeData.toObject();
return ImmutableMap({
'nav-ui-highlight-color': brightness(10, hue(-3, brandColor).hex).hex,
}).merge(themeData);
};
export default function theme(state = initialState, action) {
switch(action.type) {
case SET_THEME:
return action.themeData;
return populate(ImmutableMap(action.themeData));
default:
return state;
}

4
app/styles/azure.scss
View file

@ -8,10 +8,6 @@ $ui-highlight-color: $gab-brand-default;
$nav-ui-highlight-color: #149dfb;
$ui-base-lighter-color: #b0c0cf;
// :root {
// --brand-color: #0482d8;
// }
@import 'application';
@import 'soapbox-light/diff';

4
app/styles/soapbox/components/tabs-bar.scss
View file

@ -120,7 +120,7 @@ $nav-ui-background-color: var(--brand-color) !default;
height: 34px;
margin-left: 20px;
border-radius: 4px;
background-color: $nav-ui-highlight-color !important;
background-color: var(--nav-ui-highlight-color) !important;
transition: background-color 0.2s;
font-weight: bold;
font-size: 16px;
@ -205,7 +205,7 @@ $nav-ui-background-color: var(--brand-color) !default;
display: block;
width: 100%;
height: 0;
background: $nav-ui-highlight-color;
background: var(--nav-ui-highlight-color);
position: absolute;
bottom: 0;
left: 0;