Expose theme from JavaScript
Summary: This diff fixes two problems when further theming Flipper: 1. All shades of gray where defined in terms of black/white + transparency. Converted all colors to non transparent to make sure they stack well. 2. The color theme defined in less aren't available as javascript colors. It is possible to achieve that through setting up a babel parser that parses the less files and exposes them to JS. But since we have modern stack, figured that exposing all theme variables as CSS variables as well is a much simpler setup. Reviewed By: passy Differential Revision: D23756558 fbshipit-source-id: e92be1f66b11c2c9c400fc1622cb8a493cc4c2a5
This commit is contained in:
Michel Weststrate
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
ef4379e847
commit
694d4e0e33
@@ -14,6 +14,7 @@ import {Settings, updateSettings} from '../reducers/settings';
|
||||
import {styled, FlexColumn, colors, Text} from 'flipper';
|
||||
import {DatePicker, Button} from 'antd';
|
||||
import {Layout, FlexBox} from '../ui';
|
||||
import {theme} from './theme';
|
||||
|
||||
import {LeftRail} from './LeftRail';
|
||||
import {CloseCircleOutlined} from '@ant-design/icons';
|
||||
@@ -46,6 +47,8 @@ const AnnoucementText = styled(Text)({
|
||||
fontWeight: 300,
|
||||
textAlign: 'center',
|
||||
margin: 16,
|
||||
color: theme.primaryColor,
|
||||
background: theme.backgroundWash,
|
||||
});
|
||||
|
||||
const LeftContainer = styled(FlexBox)({
|
||||
@@ -87,7 +90,7 @@ function SandyApp(props: Props) {
|
||||
</LeftContainer>
|
||||
<Layout.Right>
|
||||
<MainContainer>
|
||||
<TemporarilyContent {...props} />
|
||||
<TemporarilyContent />
|
||||
</MainContainer>
|
||||
<RightMenu />
|
||||
</Layout.Right>
|
||||
@@ -114,7 +117,7 @@ function MainContainer({children}: any) {
|
||||
);
|
||||
}
|
||||
|
||||
function TemporarilyContent(props: Props) {
|
||||
function TemporarilyContent() {
|
||||
return (
|
||||
<Container>
|
||||
<Box>
|
||||
|
||||
25
desktop/app/src/sandy-chrome/theme.tsx
Normal file
25
desktop/app/src/sandy-chrome/theme.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
// Exposes all the variables defined in themes/base.less:
|
||||
|
||||
export const theme = {
|
||||
primaryColor: 'var(--flipper-primary-color)',
|
||||
successColor: 'var(--flipper-success-color)',
|
||||
errorColor: 'var(--flipper-error-color)',
|
||||
warningColor: 'var(--flipper-warning-color)',
|
||||
textColorPrimary: 'var(--flipper-text-color-primary)',
|
||||
textColorSecondary: 'var(--flipper-text-color-secondary)',
|
||||
textColorPlaceholder: 'var(--flipper-text-color-placeholder)',
|
||||
disabledColor: 'var(--flipper-disabled-color)',
|
||||
backgroundDefault: 'var(--flipper-background-default)',
|
||||
backgroundWash: 'var(--flipper-background-wash)',
|
||||
dividerColor: 'var(--flipper-divider-color)',
|
||||
borderRadius: 'var(--flipper-border-radius)',
|
||||
};
|
||||
42
desktop/themes/base.less
Normal file
42
desktop/themes/base.less
Normal file
@@ -0,0 +1,42 @@
|
||||
@import '../node_modules/antd/dist/antd.less';
|
||||
/* Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84636 */
|
||||
@border-radius-base: 6px;
|
||||
|
||||
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
|
||||
monospace;
|
||||
|
||||
/**
|
||||
This section maps theme base colors as defined in light/dark.less to ANT variables
|
||||
(as far as they aren't already)
|
||||
*/
|
||||
@highlight-color: @error-color;
|
||||
@badge-color: @error-color;
|
||||
@text-color: @text-color-primary;
|
||||
@input-placeholder-color: @text-color-placeholder;
|
||||
@body-background: @background-default; // Background color for `<body>`
|
||||
@normal-color: @background-wash;
|
||||
@tooltip-color: @background-default;
|
||||
@tooltip-bg: @text-color-primary;
|
||||
|
||||
/**
|
||||
This section maps theme colors to CSS variables so that thye can be
|
||||
used in styled components, see sandyColors.tsx
|
||||
*/
|
||||
|
||||
:root {
|
||||
--flipper-primary-color: @primary-color;
|
||||
--flipper-success-color: @success-color;
|
||||
--flipper-error-color: @error-color;
|
||||
--flipper-warning-color: @warning-color;
|
||||
--flipper-text-color-primary: @text-color-primary;
|
||||
--flipper-text-color-secondary: @text-color-secondary;
|
||||
--flipper-text-color-placeholder: @text-color-placeholder;
|
||||
--flipper-disabled-color: @disabled-color;
|
||||
--flipper-background-default: @background-default;
|
||||
--flipper-background-wash: @background-wash;
|
||||
--flipper-divider-color: @divider-color;
|
||||
--flipper-border-radius: 6px;
|
||||
}
|
||||
@@ -1,14 +1,7 @@
|
||||
@import '../node_modules/antd/lib/style/themes/dark.less';
|
||||
@import '../node_modules/antd/dist/antd.less';
|
||||
@import './base.less';
|
||||
|
||||
/* Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84636 */
|
||||
@border-radius-base: 6px;
|
||||
|
||||
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
|
||||
monospace;
|
||||
// Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84614
|
||||
|
||||
// Link Text & Icon
|
||||
@primary-color: @purple-8;
|
||||
@@ -16,49 +9,31 @@
|
||||
@success-color: @green-7;
|
||||
// Negative
|
||||
@error-color: @red-6;
|
||||
@highlight-color: @red-6;
|
||||
@badge-color: @red-6;
|
||||
// Warning
|
||||
@warning-color: @gold-6;
|
||||
|
||||
// Primary Text & Icon
|
||||
@text-color: @white;
|
||||
@text-color-primary: @white;
|
||||
// Secondary Text & Icon
|
||||
@text-color-secondary: fade(@white, 60%);
|
||||
@text-color-secondary: #999; // white 60%
|
||||
// Placeholder Text & Icon
|
||||
@input-placeholder-color: fade(@white, 45%);
|
||||
@text-color-placeholder: #737373; // white 45%
|
||||
// Disabled & Icon
|
||||
@disabled-color: fade(@white, 25%);
|
||||
@disabled-color: #404040; // white 25%
|
||||
// Background - default
|
||||
@body-background: @black; // Background color for `<body>`
|
||||
// @component-background: @black; // Base background color for most components
|
||||
@background-default: @black;
|
||||
// Background - Wash
|
||||
@normal-color:fade(
|
||||
@white,
|
||||
5%
|
||||
);
|
||||
// @background-color-light: fade(
|
||||
// @white,
|
||||
// 5%
|
||||
// ); // background of header and selected item
|
||||
// Background - Wash
|
||||
// @background-color-base: fade(@white, 10%); // Default grey background color
|
||||
// Background - Primary Button
|
||||
// @btn-primary-bg: @primary-color;
|
||||
// Background - Primary Hoever
|
||||
// ??? : @purple-7
|
||||
// Background - Default Button
|
||||
// @btn-default-bg: fade(@white, 10%);
|
||||
// Background - Default Hover
|
||||
// @btn-text-hover-bg: fade(@white, 15%);
|
||||
// Background - Button Disabled
|
||||
// @btn-disable-bg: fade(@white, 10%);
|
||||
// Background - Transparent Hover
|
||||
// @btn-link-hover-bg: fade(@white, 10%);
|
||||
// Background - Navigation Active
|
||||
// ???: fade(@white, 8%)
|
||||
// Dividers and Borders
|
||||
@divider-color: fade(@white, 10%);
|
||||
@background-wash: #0d0d0d; // white 5%
|
||||
|
||||
@tooltip-color: @black;
|
||||
@tooltip-bg: @white;
|
||||
// The following variables are not yet defined at this moment,
|
||||
// as they have / need no mapping to ANT (?)
|
||||
// @background-wash2: fade(@white, 10%)
|
||||
// @button-primary-background: @purple6;
|
||||
// @button-primary-background-hover: @purple7;
|
||||
// @button-default-background: @fade(@white, 10%)
|
||||
// @button-default=backgorund-hover: @fade(@white, 15%)
|
||||
// @button-default-background-disabled: @fade(@white, 10%)
|
||||
// @button-transparent-background-hover: @fade(@white, 10%)
|
||||
// @button-background-active: @fade(@white, 8%)
|
||||
|
||||
// Divider color
|
||||
@divider-color: #181818; // white 10%
|
||||
|
||||
@@ -1,14 +1,7 @@
|
||||
@import '../node_modules/antd/lib/style/themes/default.less';
|
||||
@import '../node_modules/antd/dist/antd.less';
|
||||
@import './base.less';
|
||||
|
||||
/* Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84636 */
|
||||
@border-radius-base: 6px;
|
||||
|
||||
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
|
||||
monospace;
|
||||
// Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84614
|
||||
|
||||
// Link Text & Icon
|
||||
@primary-color: @purple-7;
|
||||
@@ -16,48 +9,31 @@
|
||||
@success-color: @green-7;
|
||||
// Negative
|
||||
@error-color: @red-6;
|
||||
@highlight-color: @red-6;
|
||||
// Warning
|
||||
@warning-color: @gold-6;
|
||||
|
||||
// Primary Text & Icon
|
||||
@text-color: @black;
|
||||
@text-color-primary: @black;
|
||||
// Secondary Text & Icon
|
||||
@text-color-secondary: fade(@black, 60%);
|
||||
@text-color-secondary: #666; // black 60%
|
||||
// Placeholder Text & Icon
|
||||
@input-placeholder-color: fade(@black, 45%);
|
||||
@text-color-placeholder: #8c8c8c; // black 45%
|
||||
// Disabled & Icon
|
||||
@disabled-color: fade(@black, 25%);
|
||||
@disabled-color: #bfbfbf; // black 25%
|
||||
// Background - default
|
||||
@body-background: @white; // Background color for `<body>`
|
||||
// @component-background: @white; // Base background color for most components
|
||||
@background-default: @white;
|
||||
// Background - Wash
|
||||
@normal-color:fade(
|
||||
@black,
|
||||
5%
|
||||
);
|
||||
// @background-color-light: fade(
|
||||
// @black,
|
||||
// 5%
|
||||
// ); // background of header and selected item
|
||||
// Background - Wash
|
||||
// @background-color-base: fade(@black, 10%); // Default grey background color
|
||||
// Background - Primary Button
|
||||
// @btn-primary-bg: @primary-color;
|
||||
// Background - Primary Hoever
|
||||
// ??? : @purple-7
|
||||
// Background - Default Button
|
||||
// @btn-default-bg: fade(@black, 10%);
|
||||
// Background - Default Hover
|
||||
// @btn-text-hover-bg: fade(@black, 15%);
|
||||
// Background - Button Disabled
|
||||
// @btn-disable-bg: fade(@black, 10%);
|
||||
// Background - Transparent Hover
|
||||
// @btn-link-hover-bg: fade(@black, 10%);
|
||||
// Background - Navigation Active
|
||||
// ???: fade(@black, 8%)
|
||||
// Dividers and Borders
|
||||
@divider-color: fade(@black, 10%);
|
||||
@background-wash: #f2f2f2; // black 5%
|
||||
|
||||
@tooltip-color: @white;
|
||||
@tooltip-bg: @black;
|
||||
// The following variables are not yet defined at this moment,
|
||||
// as they have / need no mapping to ANT (?)
|
||||
// @background-wash2: fade(@black, 10%)
|
||||
// @button-primary-background: @purple6;
|
||||
// @button-primary-background-hover: @purple7;
|
||||
// @button-default-background: @fade(@black, 10%)
|
||||
// @button-default=backgorund-hover: @fade(@black, 15%)
|
||||
// @button-default-background-disabled: @fade(@black, 10%)
|
||||
// @button-transparent-background-hover: @fade(@black, 10%)
|
||||
// @button-background-active: @fade(@black, 8%)
|
||||
|
||||
// Divider color
|
||||
@divider-color: #ececec; // black 10%
|
||||
|
||||
Reference in New Issue
Block a user