jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Expose theme from JavaScript

Browse Source 
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
2020-09-17 04:02:25 -07:00
committed by Facebook GitHub Bot
parent ef4379e847
commit 694d4e0e33
5 changed files with 114 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
desktop/themes/base.less Normal file
View 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;
}