c4577bfee2
Summary: Bug fix. Currenty Flipper provides incorrect red and green diff colors in Dark theme, this PR fixes the issue. Light theme colors are the same. Closes https://github.com/facebook/flipper/issues/3011 ## Changelog Color theme fix: make diff background colors be defined in theme LESS files Pull Request resolved: https://github.com/facebook/flipper/pull/3065 Test Plan: I used [redux-debugger](https://github.com/jk-gan/flipper-plugin-redux-debugger) plugin to test this as this is what I actually use for debugging Redux in React Native projects with Flipper. Here's a [React Native app](https://github.com/3rdp/flipper-redux-debugger-app) that I put together for testing purposes. Light theme:  Dark theme:  Reviewed By: mweststrate Differential Revision: D32529276 Pulled By: passy fbshipit-source-id: 3d11edaf1112444bb106521b6b30db4a4c2b8202
58 lines
1.9 KiB
Plaintext
58 lines
1.9 KiB
Plaintext
/**
|
|
* 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.
|
|
*
|
|
*/
|
|
@import '../node_modules/antd/lib/style/themes/dark.less';
|
|
@import './base.less';
|
|
|
|
// Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84614
|
|
|
|
// Link Text & Icon
|
|
@primary-color: @purple-8;
|
|
// Success
|
|
@success-color: @green-7;
|
|
// Negative
|
|
@error-color: @red-6;
|
|
// Warning
|
|
@warning-color: @gold-6;
|
|
// Primary Text & Icon
|
|
@text-color-primary: @white;
|
|
// Secondary Text & Icon
|
|
@text-color-secondary: #999; // white 60%
|
|
// Placeholder Text & Icon
|
|
@text-color-placeholder: #737373; // white 45%
|
|
// Disabled & Icon
|
|
@disabled-color: #404040; // white 25%
|
|
// Background - default
|
|
@background-default: @black;
|
|
// Background - Wash
|
|
@background-wash: #0d0d0d; // white 5%
|
|
// Backgroud - default button
|
|
@button-default-background: rgba(255, 255, 255, 0.1); // white 10%
|
|
// Background - transparent hover
|
|
@button-transparent-hover: rgba(255, 255, 255, 0.1); // white 10%
|
|
|
|
// 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=backgorund-hover: @fade(@white, 15%)
|
|
// @button-default-background-disabled: @fade(@white, 10%)
|
|
// @button-background-active: @fade(@white, 8%)
|
|
|
|
// Divider color
|
|
@divider-color: #181818; // white 10%
|
|
|
|
// Semantic colors: Diff
|
|
@diff-added-background: @lime-2;
|
|
@diff-removed-background: @volcano-2;
|
|
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track-piece { background-color: transparent; }
|
|
::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;}
|
|
::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.7);}
|