fd3f6a0435
Summary: DataTable selected rows are a bit hard to spot when changing search, scrolling etc, so give them a bit more prominent background Changelog: DataTable: more pronounced background color for selections Reviewed By: aigoncharov Differential Revision: D36736495 fbshipit-source-id: 2cab9eb99594ffaaccdd9ebe0d922691adb27bdc
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
/**
|
|
* 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.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import * as antColors from '@ant-design/colors';
|
|
|
|
// Exposes all the variables defined in themes/base.less:
|
|
export const theme = {
|
|
white: 'white', // use as counter color for primary
|
|
black: 'black',
|
|
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)',
|
|
textColorActive: 'var(--light-color-button-active)',
|
|
searchHighlightBackground: antColors.yellow[3],
|
|
selectionBackgroundColor: 'var(--flipper-primary-background-wash)',
|
|
disabledColor: 'var(--flipper-disabled-color)',
|
|
backgroundDefault: 'var(--flipper-background-default)',
|
|
backgroundWash: 'var(--flipper-background-wash)',
|
|
buttonDefaultBackground: 'var(--flipper-button-default-background)',
|
|
backgroundTransparentHover: 'var(--flipper-background-transparent-hover)',
|
|
dividerColor: 'var(--flipper-divider-color)',
|
|
borderRadius: 'var(--flipper-border-radius)',
|
|
containerBorderRadius: 8,
|
|
inlinePaddingV: 6, // vertical padding on inline elements like buttons
|
|
inlinePaddingH: 12, // horizontal ,,,
|
|
space: {
|
|
// from Space component in Ant
|
|
tiny: 4,
|
|
small: 8,
|
|
medium: 12,
|
|
large: 16,
|
|
huge: 24,
|
|
} as const,
|
|
fontSize: {
|
|
large: '16px',
|
|
default: '14px',
|
|
small: '12px',
|
|
} as const,
|
|
monospace: {
|
|
fontFamily: 'SF Mono,Monaco,Andale Mono,monospace',
|
|
fontSize: '12px',
|
|
} as const,
|
|
bold: 600,
|
|
semanticColors: {
|
|
attribute: antColors.orange[5],
|
|
nullValue: antColors.grey.primary!,
|
|
stringValue: antColors.orange[5],
|
|
colorValue: antColors.cyan[5],
|
|
booleanValue: antColors.magenta[5],
|
|
numberValue: antColors.blue[5],
|
|
diffAddedBackground: 'var(--flipper-diff-added-background)',
|
|
diffRemovedBackground: 'var(--flipper-diff-removed-background)',
|
|
},
|
|
} as const;
|
|
|
|
export type Spacing =
|
|
| keyof typeof theme['space']
|
|
| number
|
|
| undefined
|
|
| boolean;
|
|
|
|
export type PaddingProps = {
|
|
padv?: Spacing;
|
|
padh?: Spacing;
|
|
pad?: Spacing;
|
|
};
|
|
|
|
export function normalizePadding({
|
|
padv,
|
|
padh,
|
|
pad,
|
|
}: PaddingProps): string | undefined {
|
|
if (padv === undefined && padh === undefined && pad === undefined) {
|
|
return undefined;
|
|
}
|
|
return `${normalizeSpace(
|
|
padv ?? pad ?? 0,
|
|
theme.inlinePaddingV,
|
|
)}px ${normalizeSpace(padh ?? pad ?? 0, theme.inlinePaddingH)}px`;
|
|
}
|
|
|
|
export function normalizeSpace(spacing: Spacing, defaultSpace: number): number {
|
|
return spacing === true
|
|
? defaultSpace
|
|
: spacing === undefined || spacing === false
|
|
? 0
|
|
: typeof spacing === 'string'
|
|
? theme.space[spacing]
|
|
: spacing;
|
|
}
|