diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx
index bbbdaec5c..f7f5b94f0 100644
--- a/desktop/app/src/sandy-chrome/SandyApp.tsx
+++ b/desktop/app/src/sandy-chrome/SandyApp.tsx
@@ -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) {
-
+
@@ -114,7 +117,7 @@ function MainContainer({children}: any) {
);
}
-function TemporarilyContent(props: Props) {
+function TemporarilyContent() {
return (
diff --git a/desktop/app/src/sandy-chrome/theme.tsx b/desktop/app/src/sandy-chrome/theme.tsx
new file mode 100644
index 000000000..1b30492f0
--- /dev/null
+++ b/desktop/app/src/sandy-chrome/theme.tsx
@@ -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)',
+};
diff --git a/desktop/themes/base.less b/desktop/themes/base.less
new file mode 100644
index 000000000..83e2e0e61
--- /dev/null
+++ b/desktop/themes/base.less
@@ -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 ``
+@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;
+}
diff --git a/desktop/themes/dark.less b/desktop/themes/dark.less
index 065a83933..d758516e6 100644
--- a/desktop/themes/dark.less
+++ b/desktop/themes/dark.less
@@ -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 ``
-// @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%
diff --git a/desktop/themes/light.less b/desktop/themes/light.less
index bc479b3b0..18c6517c4 100644
--- a/desktop/themes/light.less
+++ b/desktop/themes/light.less
@@ -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 ``
-// @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%