220ebbc601
Summary: Changelog: Added an explicit autoscroll indicator in logs and fixed snapping We got several reports that auto scrolling was to aggressive, so revisited the implementation and the new one is a lot more reliable. Also added an explicit indicator / button to toggle tailing. Exposed ant's active color as well in our theme, as it gives better contrast on the buttons than Flipper purple. Reviewed By: passy Differential Revision: D27397506 fbshipit-source-id: 5e82939de4b2f8b89380bd55009e3fa2a7c10ec9
81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
/**
|
|
* 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 = {
|
|
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)',
|
|
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: {
|
|
default: '14px',
|
|
small: '12px',
|
|
} as const,
|
|
monospace: {
|
|
fontFamily: 'SF Mono,Monaco,Andale Mono,monospace',
|
|
fontSize: '12px',
|
|
} as const,
|
|
} as const;
|
|
|
|
export type Spacing = keyof typeof theme['space'] | number | undefined | true;
|
|
|
|
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
|
|
? 0
|
|
: typeof spacing === 'string'
|
|
? theme.space[spacing]
|
|
: spacing;
|
|
}
|