Files
flipper/desktop/themes/base.less
Andrey Goncharov 2c5bcb373d Extract container
Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: LukeDefeo

Differential Revision: D48560381

fbshipit-source-id: ecdc6bb95514faf913b23239bbd40113b8e0f57b
2023-08-30 07:26:35 -07:00

66 lines
2.5 KiB
Plaintext

/**
* Copyright (c) Meta Platforms, Inc. and 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/dist/antd.less';
@import './typography.less';
// Breaks publish-static-docs-flipper-diff job on CI (D40717045)
// @import (inline) './plugins/public/node_modules/react-complex-tree/lib/style.css';
/* Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84636 */
@background-transparent-hover: rgba(0, 0, 0, 0.1);
@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 adds specific paddings to ANT component to match design
*/
/**
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;
@btn-default-bg: @button-default-background;
/**
This section maps theme colors to CSS variables so that they can be
used in styled components, see theme.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-primary-background-wash: mix(@primary-color, @background-default, 25%);
--flipper-button-default-background: @button-default-background;
--flipper-background-transparent-hover: @background-transparent-hover;
--flipper-divider-color: @divider-color;
--flipper-diff-added-background: @diff-added-background;
--flipper-diff-removed-background: @diff-removed-background;
--flipper-border-radius: @border-radius-base;
--flipper-border-color: @normal-color;
}