opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 06:41:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Checkbox: Updates to look and feel and using new theme (#33310)

Browse Source 
* Checkbox: Updates to look and feel and using new theme

* A few more theme fixes

* Removed comments

* Updated snapshot
This commit is contained in:
Torkel Ödegaard
2021-04-23 14:40:06 +02:00
committed by GitHub
parent b6cfb65e40
commit e6a9654d0e
16 changed files with 99 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-data/src/themes/createShadows.ts
View File

@ -13,7 +13,7 @@ export function createShadows(colors: ThemeColors): ThemeShadows {
return { return {
z1: '0px 1px 2px rgba(24, 26, 27, 0.75)', z1: '0px 1px 2px rgba(24, 26, 27, 0.75)',
z2: '0px 4px 8px rgba(24, 26, 27, 0.75)', z2: '0px 4px 8px rgba(24, 26, 27, 0.75)',
z3: '0px 10px 20px #181A1B', z3: '0px 10px 20px rgb(20,20,20)',
}; };
} }

33
packages/grafana-data/src/themes/createV1Theme.ts
View File

@ -171,27 +171,18 @@ export function createV1Theme(theme: Omit<GrafanaThemeV2, 'v1'>): GrafanaTheme {
// Next-gen forms functional colors // Next-gen forms functional colors
formLabel: theme.colors.text.primary, formLabel: theme.colors.text.primary,
formDescription: theme.colors.text.secondary, formDescription: theme.colors.text.secondary,
formInputBg: basicColors.gray05, formInputBg: theme.components.input.background,
formInputBgDisabled: basicColors.gray10, formInputBgDisabled: theme.colors.action.disabledBackground,
formInputBorder: borders.border2, formInputBorder: theme.components.input.borderColor,
formInputBorderHover: basicColors.gray33, formInputBorderHover: theme.components.input.borderHover,
formInputBorderActive: basicColors.blue95, formInputBorderActive: theme.colors.primary.border,
formInputBorderInvalid: basicColors.red88, formInputBorderInvalid: theme.colors.error.border,
formInputPlaceholderText: textColors.textFaint, formInputPlaceholderText: theme.colors.text.disabled,
formInputText: basicColors.gray85, formInputText: theme.components.input.text,
formInputDisabledText: basicColors.gray70, formInputDisabledText: theme.colors.action.disabledText,
formFocusOutline: basicColors.blue77, formFocusOutline: theme.colors.primary.main,
formValidationMessageText: basicColors.white, formValidationMessageText: theme.colors.error.contrastText,
formValidationMessageBg: basicColors.red88, formValidationMessageBg: theme.colors.error.main,
formSwitchBg: basicColors.gray25,
formSwitchBgActive: basicColors.blue95,
formSwitchBgHover: basicColors.gray33,
formSwitchBgActiveHover: basicColors.blue80,
formSwitchBgDisabled: basicColors.gray25,
formSwitchDot: basicColors.gray15,
formCheckboxBgChecked: basicColors.blue95,
formCheckboxBgCheckedHover: basicColors.blue80,
formCheckboxCheckmark: basicColors.gray25,
}; };
return { return {

9
packages/grafana-data/src/types/theme.ts
View File

@ -234,15 +234,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
formInputPlaceholderText: string; formInputPlaceholderText: string;
formValidationMessageText: string; formValidationMessageText: string;
formValidationMessageBg: string; formValidationMessageBg: string;
formSwitchBg: string;
formSwitchBgActive: string;
formSwitchBgActiveHover: string;
formSwitchBgHover: string;
formSwitchBgDisabled: string;
formSwitchDot: string;
formCheckboxBgChecked: string;
formCheckboxBgCheckedHover: string;
formCheckboxCheckmark: string;
}; };
shadows: { shadows: {
listItem: string; listItem: string;

45
packages/grafana-ui/src/components/Forms/Checkbox.tsx
View File

@ -1,9 +1,9 @@
import React, { HTMLProps, useCallback } from 'react'; import React, { HTMLProps, useCallback } from 'react';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaThemeV2 } from '@grafana/data';
import { getLabelStyles } from './Label'; import { getLabelStyles } from './Label';
import { useTheme, stylesFactory } from '../../themes'; import { useTheme2, stylesFactory } from '../../themes';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { focusCss } from '../../themes/mixins'; import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'> { export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
label?: string; label?: string;
@ -11,29 +11,30 @@ export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'
value?: boolean; value?: boolean;
} }
export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme) => { export const getCheckboxStyles = stylesFactory((theme: GrafanaThemeV2) => {
const labelStyles = getLabelStyles(theme); const labelStyles = getLabelStyles(theme);
const checkboxSize = '16px'; const checkboxSize = '16px';
return { return {
label: cx( label: cx(
labelStyles.label, labelStyles.label,
css` css`
padding-left: ${theme.spacing.formSpacingBase}px; padding-left: ${theme.spacing(1)};
white-space: nowrap; white-space: nowrap;
cursor: pointer;
` `
), ),
description: cx( description: cx(
labelStyles.description, labelStyles.description,
css` css`
line-height: ${theme.typography.lineHeight.sm}; line-height: ${theme.typography.bodySmall.lineHeight};
padding-left: ${theme.spacing.formSpacingBase}px; padding-left: ${theme.spacing(1)};
` `
), ),
wrapper: css` wrapper: css`
position: relative; position: relative;
padding-left: ${checkboxSize}; padding-left: ${checkboxSize};
vertical-align: middle; vertical-align: middle;
height: ${theme.spacing.lg}; height: ${theme.spacing(3)};
`, `,
input: css` input: css`
position: absolute; position: absolute;
@ -42,8 +43,14 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
&:focus + span {
${focusCss(theme)} &:focus + span,
&:focus-visible + span {
${getFocusStyles(theme)}
}
&:focus:not(:focus-visible) + span {
${getMouseFocusStyles(theme)}
} }
/** /**
@ -53,11 +60,11 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme) => {
* */ * */
&:checked + span { &:checked + span {
background: blue; background: blue;
background: ${theme.colors.formCheckboxBgChecked}; background: ${theme.colors.primary.main};
border: none; border: none;
&:hover { &:hover {
background: ${theme.colors.formCheckboxBgCheckedHover}; background: ${theme.colors.primary.shade};
} }
&:after { &:after {
@ -67,7 +74,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme) => {
top: 1px; top: 1px;
width: 6px; width: 6px;
height: 12px; height: 12px;
border: solid ${theme.colors.formCheckboxCheckmark}; border: solid ${theme.colors.primary.contrastText};
border-width: 0 3px 3px 0; border-width: 0 3px 3px 0;
transform: rotate(45deg); transform: rotate(45deg);
} }
@ -77,17 +84,17 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme) => {
display: inline-block; display: inline-block;
width: ${checkboxSize}; width: ${checkboxSize};
height: ${checkboxSize}; height: ${checkboxSize};
border-radius: ${theme.border.radius.sm}; border-radius: ${theme.shape.borderRadius()};
margin-right: ${theme.spacing.formSpacingBase}px; margin-right: ${theme.spacing(1)};
background: ${theme.colors.formInputBg}; background: ${theme.components.input.background};
border: 1px solid ${theme.colors.formInputBorder}; border: 1px solid ${theme.components.input.borderColor};
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 0; left: 0;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
border-color: ${theme.colors.formInputBorderHover}; border-color: ${theme.components.input.borderHover};
} }
`, `,
}; };
@ -95,7 +102,7 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme) => {
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>( export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
({ label, description, value, onChange, disabled, className, ...inputProps }, ref) => { ({ label, description, value, onChange, disabled, className, ...inputProps }, ref) => {
const theme = useTheme(); const theme = useTheme2();
const handleOnChange = useCallback( const handleOnChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => { (e: React.ChangeEvent<HTMLInputElement>) => {
if (onChange) { if (onChange) {

27
packages/grafana-ui/src/components/Forms/Label.tsx
View File

@ -1,9 +1,8 @@
import React from 'react'; import React from 'react';
import { useTheme, stylesFactory } from '../../themes'; import { useTheme2, stylesFactory } from '../../themes';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaThemeV2 } from '@grafana/data';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
import tinycolor from 'tinycolor2';
export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> { export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
children: React.ReactNode; children: React.ReactNode;
@ -11,16 +10,15 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
category?: string[]; category?: string[];
} }
export const getLabelStyles = stylesFactory((theme: GrafanaTheme) => { export const getLabelStyles = stylesFactory((theme: GrafanaThemeV2) => {
return { return {
label: css` label: css`
label: Label; label: Label;
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.fontWeightMedium};
line-height: 1.25; line-height: 1.25;
margin: ${theme.spacing.formLabelMargin}; margin-bottom: ${theme.spacing(0.5)};
padding: ${theme.spacing.formLabelPadding}; color: ${theme.colors.text.primary};
color: ${theme.colors.formLabel};
max-width: 480px; max-width: 480px;
`, `,
labelContent: css` labelContent: css`
@ -29,28 +27,25 @@ export const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
`, `,
description: css` description: css`
label: Label-description; label: Label-description;
color: ${theme.colors.formDescription}; color: ${theme.colors.text.secondary};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.regular}; font-weight: ${theme.typography.fontWeightRegular};
margin-top: ${theme.spacing.xxs}; margin-top: ${theme.spacing(0.25)};
display: block; display: block;
`, `,
categories: css` categories: css`
label: Label-categories; label: Label-categories;
color: ${theme.isLight
? tinycolor(theme.colors.formLabel).lighten(10).toHexString()
: tinycolor(theme.colors.formLabel).darken(10).toHexString()};
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
`, `,
chevron: css` chevron: css`
margin: 0 ${theme.spacing.xxs}; margin: 0 ${theme.spacing(0.25)};
`, `,
}; };
}); });
export const Label: React.FC<LabelProps> = ({ children, description, className, category, ...labelProps }) => { export const Label: React.FC<LabelProps> = ({ children, description, className, category, ...labelProps }) => {
const theme = useTheme(); const theme = useTheme2();
const styles = getLabelStyles(theme); const styles = getLabelStyles(theme);
const categories = category?.map((c, i) => { const categories = category?.map((c, i) => {
return ( return (

4
packages/grafana-ui/src/components/Forms/getFormStyles.ts
View File

@ -14,7 +14,7 @@ export const getFormStyles = stylesFactory(
console.warn('getFormStyles is deprecated'); console.warn('getFormStyles is deprecated');
return { return {
label: getLabelStyles(theme.v1), label: getLabelStyles(theme),
legend: getLegendStyles(theme.v1), legend: getLegendStyles(theme.v1),
fieldValidationMessage: getFieldValidationMessageStyles(theme.v1), fieldValidationMessage: getFieldValidationMessageStyles(theme.v1),
button: getButtonStyles({ button: getButtonStyles({
@ -23,7 +23,7 @@ export const getFormStyles = stylesFactory(
size: options.size, size: options.size,
}), }),
input: getInputStyles({ theme, invalid: options.invalid }), input: getInputStyles({ theme, invalid: options.invalid }),
checkbox: getCheckboxStyles(theme.v1), checkbox: getCheckboxStyles(theme),
}; };
} }
); );

34
packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx
View File

@ -1,7 +1,7 @@
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { GrafanaTheme, SelectableValue, getTimeZoneInfo } from '@grafana/data'; import { GrafanaThemeV2, SelectableValue, getTimeZoneInfo } from '@grafana/data';
import { useTheme } from '../../../themes/ThemeContext'; import { useTheme2 } from '../../../themes/ThemeContext';
import { stylesFactory } from '../../../themes/stylesFactory'; import { stylesFactory } from '../../../themes/stylesFactory';
import { Icon } from '../../Icon/Icon'; import { Icon } from '../../Icon/Icon';
import { TimeZoneOffset } from './TimeZoneOffset'; import { TimeZoneOffset } from './TimeZoneOffset';
@ -24,7 +24,7 @@ export interface SelectableZone extends SelectableValue<string> {
export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => { export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => {
const { children, innerProps, data, isSelected, isFocused } = props; const { children, innerProps, data, isSelected, isFocused } = props;
const theme = useTheme(); const theme = useTheme2();
const styles = getStyles(theme); const styles = getStyles(theme);
const timestamp = Date.now(); const timestamp = Date.now();
const containerStyles = cx(styles.container, isFocused && styles.containerFocused); const containerStyles = cx(styles.container, isFocused && styles.containerFocused);
@ -56,7 +56,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
export const CompactTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => { export const CompactTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => {
const { children, innerProps, data, isSelected, isFocused } = props; const { children, innerProps, data, isSelected, isFocused } = props;
const theme = useTheme(); const theme = useTheme2();
const styles = getStyles(theme); const styles = getStyles(theme);
const timestamp = Date.now(); const timestamp = Date.now();
const containerStyles = cx(styles.container, isFocused && styles.containerFocused); const containerStyles = cx(styles.container, isFocused && styles.containerFocused);
@ -93,9 +93,7 @@ export const CompactTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props,
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
const offsetHoverBg = theme.isDark ? theme.palette.gray05 : theme.palette.white;
return { return {
container: css` container: css`
display: flex; display: flex;
@ -104,34 +102,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
border-left: 2px solid transparent;
padding: 6px 8px 4px; padding: 6px 8px 4px;
&:hover { &:hover {
background: ${theme.colors.dropdownOptionHoverBg}; background: ${theme.colors.action.hover};
span.${offsetClassName} {
background: ${offsetHoverBg};
}
} }
`, `,
containerFocused: css` containerFocused: css`
background: ${theme.colors.dropdownOptionHoverBg}; background: ${theme.colors.action.hover};
border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
border-image-slice: 1;
border-style: solid;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left-width: 2px;
span.${offsetClassName} {
background: ${offsetHoverBg};
}
`, `,
body: css` body: css`
display: flex; display: flex;
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.fontWeightMedium};
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
`, `,

8
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -200,11 +200,11 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $white; $input-bg: ${theme.components.input.background};
$input-bg-disabled: $gray-5; $input-bg-disabled: ${theme.colors.action.disabledBackground};
$input-color: ${theme.v1.colors.formInputText}; $input-color: ${theme.components.input.text};
$input-border-color: ${theme.v1.colors.formInputBorder}; $input-border-color: ${theme.components.input.borderColor};
$input-box-shadow: none; $input-box-shadow: none;
$input-border-focus: ${theme.v1.palette.blue95}; $input-border-focus: ${theme.v1.palette.blue95};
$input-box-shadow-focus: ${theme.v1.palette.blue95}; $input-box-shadow-focus: ${theme.v1.palette.blue95};

4
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<div <div
className="panel-container css-ozhi9g" className="panel-container css-e4b3m6"
> >
<AddPanelWidgetHandle <AddPanelWidgetHandle
onCancel={[Function]} onCancel={[Function]}
@ -15,7 +15,7 @@ exports[`Render should render component 1`] = `
"libraryPanelsWrapper": "css-18m13of", "libraryPanelsWrapper": "css-18m13of",
"noMargin": "css-u023fv", "noMargin": "css-u023fv",
"panelSearchInput": "css-2ug8g3", "panelSearchInput": "css-2ug8g3",
"wrapper": "css-ozhi9g", "wrapper": "css-e4b3m6",
} }
} }
> >

17
public/app/features/dashboard/components/SubMenu/Annotations.tsx
View File

@ -1,7 +1,6 @@
import React, { FunctionComponent, useEffect, useState } from 'react'; import React, { FunctionComponent, useEffect, useState } from 'react';
import { LegacyForms } from '@grafana/ui';
import { AnnotationQuery } from '@grafana/data'; import { AnnotationQuery } from '@grafana/data';
const { Switch } = LegacyForms; import { InlineField, InlineSwitch } from '@grafana/ui';
interface Props { interface Props {
annotations: AnnotationQuery[]; annotations: AnnotationQuery[];
@ -22,16 +21,10 @@ export const Annotations: FunctionComponent<Props> = ({ annotations, onAnnotatio
<> <>
{visibleAnnotations.map((annotation: any) => { {visibleAnnotations.map((annotation: any) => {
return ( return (
<div <div key={annotation.name} className={'submenu-item'}>
key={annotation.name} <InlineField label={annotation.name}>
className={annotation.enable ? 'submenu-item' : 'submenu-item annotation-disabled'} <InlineSwitch checked={annotation.enable} onChange={() => onAnnotationChanged(annotation)} />
> </InlineField>
<Switch
label={annotation.name}
className="gf-form"
checked={annotation.enable}
onChange={() => onAnnotationChanged(annotation)}
/>
</div> </div>
); );
})} })}

2
public/app/features/live/dashboard/DashboardChangedModal.tsx
View File

@ -110,7 +110,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
width: 100%; width: 100%;
&:hover { &:hover {
background: ${theme.colors.formCheckboxBgCheckedHover}; background: ${theme.colors.bgBlue1};
color: ${theme.colors.text}; color: ${theme.colors.text};
} }
`, `,

42
public/app/plugins/datasource/loki/components/LokiLabel.tsx
View File

@ -1,7 +1,7 @@
import React, { forwardRef, HTMLAttributes } from 'react'; import React, { forwardRef, HTMLAttributes } from 'react';
import { cx, css } from '@emotion/css'; import { cx, css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaThemeV2 } from '@grafana/data';
import { useTheme } from '@grafana/ui'; import { useTheme2 } from '@grafana/ui';
// @ts-ignore // @ts-ignore
import Highlighter from 'react-highlight-words'; import Highlighter from 'react-highlight-words';
@ -22,7 +22,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
export const LokiLabel = forwardRef<HTMLElement, Props>( export const LokiLabel = forwardRef<HTMLElement, Props>(
({ name, value, hidden, facets, onClick, className, loading, searchTerm, active, style, ...rest }, ref) => { ({ name, value, hidden, facets, onClick, className, loading, searchTerm, active, style, ...rest }, ref) => {
const theme = useTheme(); const theme = useTheme2();
const styles = getLabelStyles(theme); const styles = getLabelStyles(theme);
const searchWords = searchTerm ? [searchTerm] : []; const searchWords = searchTerm ? [searchTerm] : [];
@ -64,47 +64,47 @@ export const LokiLabel = forwardRef<HTMLElement, Props>(
LokiLabel.displayName = 'LokiLabel'; LokiLabel.displayName = 'LokiLabel';
const getLabelStyles = (theme: GrafanaTheme) => ({ const getLabelStyles = (theme: GrafanaThemeV2) => ({
base: css` base: css`
cursor: pointer; cursor: pointer;
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
line-height: ${theme.typography.lineHeight.xs}; line-height: ${theme.typography.bodySmall.lineHeight};
background-color: ${theme.colors.bg3}; background-color: ${theme.colors.background.secondary};
vertical-align: baseline; vertical-align: baseline;
color: ${theme.colors.text}; color: ${theme.colors.text};
white-space: nowrap; white-space: nowrap;
text-shadow: none; text-shadow: none;
padding: ${theme.spacing.xs}; padding: ${theme.spacing(0.5)};
border-radius: ${theme.border.radius.md}; border-radius: ${theme.shape.borderRadius()};
margin-right: ${theme.spacing.sm}; margin-right: ${theme.spacing(1)};
margin-bottom: ${theme.spacing.xs}; margin-bottom: ${theme.spacing(0.5)};
`, `,
loading: css` loading: css`
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.fontWeightMedium};
background-color: ${theme.colors.formSwitchBgHover}; background-color: ${theme.colors.primary.shade};
color: ${theme.palette.gray98}; color: ${theme.colors.text.primary};
animation: pulse 3s ease-out 0s infinite normal forwards; animation: pulse 3s ease-out 0s infinite normal forwards;
@keyframes pulse { @keyframes pulse {
0% { 0% {
color: ${theme.colors.textSemiWeak}; color: ${theme.colors.text.primary};
} }
50% { 50% {
color: ${theme.colors.textFaint}; color: ${theme.colors.text.secondary};
} }
100% { 100% {
color: ${theme.colors.textSemiWeak}; color: ${theme.colors.text.disabled};
} }
} }
`, `,
active: css` active: css`
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.fontWeightMedium};
background-color: ${theme.colors.formSwitchBgActive}; background-color: ${theme.colors.primary.main};
color: ${theme.colors.formSwitchDot}; color: ${theme.colors.primary.contrastText};
`, `,
matchHighLight: css` matchHighLight: css`
background: inherit; background: inherit;
color: ${theme.palette.yellow}; color: ${theme.colors.primary.text};
background-color: rgba(${theme.palette.yellow}, 0.1); background-color: ${theme.colors.primary.transparent};
`, `,
hidden: css` hidden: css`
opacity: 0.6; opacity: 0.6;

4
public/sass/_variables.dark.generated.scss
View File

@ -263,7 +263,7 @@ $side-menu-header-color: rgb(201, 209, 217);
// ------------------------- // -------------------------
$menu-dropdown-bg: #181b1f; $menu-dropdown-bg: #181b1f;
$menu-dropdown-hover-bg: rgba(201, 209, 217, 0.08); $menu-dropdown-hover-bg: rgba(201, 209, 217, 0.08);
$menu-dropdown-shadow: 0px 10px 20px #181A1B; $menu-dropdown-shadow: 0px 10px 20px rgb(20,20,20);
// Tabs // Tabs
// ------------------------- // -------------------------
@ -296,7 +296,7 @@ $popover-bg: #181b1f;
$popover-color: rgb(201, 209, 217); $popover-color: rgb(201, 209, 217);
$popover-border-color: rgba(201, 209, 217, 0.10); $popover-border-color: rgba(201, 209, 217, 0.10);
$popover-header-bg: #22252b; $popover-header-bg: #22252b;
$popover-shadow: 0px 10px 20px #181A1B; $popover-shadow: 0px 10px 20px rgb(20,20,20);
$popover-help-bg: $tooltipBackground; $popover-help-bg: $tooltipBackground;
$popover-help-color: $text-color; $popover-help-color: $text-color;

6
public/sass/_variables.light.generated.scss
View File

@ -202,10 +202,10 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $white; $input-bg: #fff;
$input-bg-disabled: $gray-5; $input-bg-disabled: rgba(36, 41, 46, 0.07);
$input-color: #c7d0d9; $input-color: rgba(36, 41, 46, 1);
$input-border-color: rgba(36, 41, 46, 0.30); $input-border-color: rgba(36, 41, 46, 0.30);
$input-box-shadow: none; $input-box-shadow: none;
$input-border-focus: #5794f2; $input-border-focus: #5794f2;

5
public/sass/components/_submenu.scss
View File

@ -7,11 +7,6 @@
padding: 0 0 $space-sm 0; padding: 0 0 $space-sm 0;
} }
.annotation-disabled,
.annotation-disabled a {
color: $link-color-disabled;
}
.annotation-segment { .annotation-segment {
padding: 8px 7px; padding: 8px 7px;

1
public/sass/components/_tagsinput.scss
View File

@ -5,6 +5,7 @@
max-width: 100%; max-width: 100%;
line-height: 22px; line-height: 22px;
background-color: $input-bg; background-color: $input-bg;
border: 1px solid $input-border-color;
input { input {
display: inline-block; display: inline-block;