diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index c6831265e098b..64f01bbff0c1e 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -67,8 +67,8 @@ "dom-to-image": "^2.6.0", "emotion-rgba": "0.0.9", "fast-glob": "^3.2.7", - "fontsource-fira-code": "^3.0.5", - "fontsource-inter": "^3.0.5", + "fontsource-fira-code": "^4.0.0", + "fontsource-inter": "^4.0.0", "fs-extra": "^10.0.0", "fuse.js": "^6.4.6", "geolib": "^2.0.24", @@ -34913,15 +34913,15 @@ } }, "node_modules/fontsource-fira-code": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-3.0.5.tgz", - "integrity": "sha512-pxhYUSBdgXYFnGIdO3QQTuemncqdRE3NEoVu94tm+jCx5/sUUGDugOdNdZqSY7Gd8w7Xk98hHbT5zFGgrxDL+A==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-4.0.0.tgz", + "integrity": "sha512-qKVeWWNvkPP22FUkea2qVgZHiPBIRk9HFGIFmEUbqEV7Wcu/Dxrva4t7d1XPa2+0cnJgD0kHAiDZ514KjHYQKA==", "deprecated": "Package relocated. Please install and migrate to @fontsource/fira-code." }, "node_modules/fontsource-inter": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-3.0.5.tgz", - "integrity": "sha512-7AGbrHVjL2IcIz/Lv64IR5g0W+JuGQT/bFFF5nDD1zNOT5Ke8IMIMc+tE4rb5fCVNG2AGt0gtXH3kGLUURKY8w==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-4.0.0.tgz", + "integrity": "sha512-TicQe9zq5GS12vE/ZOE+iXkJ0GN+Tem4TrIbPyOsGn3OaTrs/bmc/a4BjDzJsxS8+Qr3t121Bw5acyeqb4fiAQ==", "deprecated": "Package relocated. Please install and migrate to @fontsource/inter." }, "node_modules/for-in": { @@ -87452,14 +87452,14 @@ "devOptional": true }, "fontsource-fira-code": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-3.0.5.tgz", - "integrity": "sha512-pxhYUSBdgXYFnGIdO3QQTuemncqdRE3NEoVu94tm+jCx5/sUUGDugOdNdZqSY7Gd8w7Xk98hHbT5zFGgrxDL+A==" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/fontsource-fira-code/-/fontsource-fira-code-4.0.0.tgz", + "integrity": "sha512-qKVeWWNvkPP22FUkea2qVgZHiPBIRk9HFGIFmEUbqEV7Wcu/Dxrva4t7d1XPa2+0cnJgD0kHAiDZ514KjHYQKA==" }, "fontsource-inter": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-3.0.5.tgz", - "integrity": "sha512-7AGbrHVjL2IcIz/Lv64IR5g0W+JuGQT/bFFF5nDD1zNOT5Ke8IMIMc+tE4rb5fCVNG2AGt0gtXH3kGLUURKY8w==" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/fontsource-inter/-/fontsource-inter-4.0.0.tgz", + "integrity": "sha512-TicQe9zq5GS12vE/ZOE+iXkJ0GN+Tem4TrIbPyOsGn3OaTrs/bmc/a4BjDzJsxS8+Qr3t121Bw5acyeqb4fiAQ==" }, "for-in": { "version": "1.0.2", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index 4dabb388c1eb2..ab75687b6d609 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -127,8 +127,8 @@ "dom-to-image": "^2.6.0", "emotion-rgba": "0.0.9", "fast-glob": "^3.2.7", - "fontsource-fira-code": "^3.0.5", - "fontsource-inter": "^3.0.5", + "fontsource-fira-code": "^4.0.0", + "fontsource-inter": "^4.0.0", "fs-extra": "^10.0.0", "fuse.js": "^6.4.6", "geolib": "^2.0.24", diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/NoResultsComponent.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/NoResultsComponent.tsx index 9266a97704236..a5fc5d962d8f3 100644 --- a/superset-frontend/packages/superset-ui-core/src/chart/components/NoResultsComponent.tsx +++ b/superset-frontend/packages/superset-ui-core/src/chart/components/NoResultsComponent.tsx @@ -17,31 +17,38 @@ * under the License. */ -import React, { CSSProperties, useMemo } from 'react'; +import React, { CSSProperties } from 'react'; +import { css, styled } from '../../style'; import { t } from '../../translation'; const MESSAGE_STYLES: CSSProperties = { maxWidth: 800 }; -const TITLE_STYLES: CSSProperties = { - fontSize: 16, - fontWeight: 'bold', - paddingBottom: 8, -}; -const BODY_STYLES: CSSProperties = { fontSize: 14 }; const MIN_WIDTH_FOR_BODY = 250; -const generateContainerStyles: ( - height: number | string, - width: number | string, -) => CSSProperties = (height: number | string, width: number | string) => ({ - alignItems: 'center', - display: 'flex', - flexDirection: 'column', - height, - justifyContent: 'center', - padding: 16, - textAlign: 'center', - width, -}); +const Container = styled.div<{ + width: number | string; + height: number | string; +}>` + ${({ theme, width, height }) => css` + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + height: ${height}px; + width: ${width}px; + padding: ${theme.gridUnit * 4}px; + + & .no-results-title { + font-size: ${theme.typography.sizes.l}px; + font-weight: ${theme.typography.weights.bold}; + padding-bottom: ${theme.gridUnit * 2}; + } + + & .no-results-body { + font-size: ${theme.typography.sizes.m}px; + } + `} +`; type Props = { className?: string; @@ -51,11 +58,6 @@ type Props = { }; const NoResultsComponent = ({ className, height, id, width }: Props) => { - const containerStyles = useMemo( - () => generateContainerStyles(height, width), - [height, width], - ); - // render the body if the width is auto/100% or greater than 250 pixels const shouldRenderBody = typeof width === 'string' || width > MIN_WIDTH_FOR_BODY; @@ -65,17 +67,20 @@ const NoResultsComponent = ({ className, height, id, width }: Props) => { ); return ( -
-
{t('No Results')}
- {shouldRenderBody &&
{BODY_STRING}
} +
{t('No Results')}
+ {shouldRenderBody && ( +
{BODY_STRING}
+ )}
-
+ ); }; diff --git a/superset-frontend/packages/superset-ui-core/src/style/index.tsx b/superset-frontend/packages/superset-ui-core/src/style/index.tsx index 2c2d9f2ac854e..b20dbc5aa9f5e 100644 --- a/superset-frontend/packages/superset-ui-core/src/style/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/style/index.tsx @@ -140,7 +140,8 @@ const defaultTheme = { weights: { light: 200, normal: 400, - bold: 700, + medium: 500, + bold: 600, }, sizes: { xxs: 9, diff --git a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx index 870dda1040442..7b46270bc66bf 100644 --- a/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx +++ b/superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx @@ -17,13 +17,18 @@ * under the License. */ -import React from 'react'; -import { mount } from 'enzyme'; +import React, { ReactElement } from 'react'; import mockConsole, { RestoreConsole } from 'jest-mock-console'; import { triggerResizeObserver } from 'resize-observer-polyfill'; import ErrorBoundary from 'react-error-boundary'; -import { promiseTimeout, SuperChart } from '@superset-ui/core'; +import { + promiseTimeout, + SuperChart, + supersetTheme, + ThemeProvider, +} from '@superset-ui/core'; +import { mount as enzymeMount } from 'enzyme'; import RealSuperChart, { WrapperProps, } from '../../../src/chart/components/SuperChart'; @@ -51,6 +56,12 @@ function expectDimension( ); } +const mount = (component: ReactElement) => + enzymeMount(component, { + wrappingComponent: ThemeProvider, + wrappingComponentProps: { theme: supersetTheme }, + }); + describe('SuperChart', () => { const plugins = [ new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }), @@ -303,6 +314,7 @@ describe('SuperChart', () => { height="125" />, ); + // @ts-ignore triggerResizeObserver([{ contentRect: { height: 125, width: 150 } }]); return promiseTimeout(() => { @@ -328,6 +340,7 @@ describe('SuperChart', () => { height="25%" />, ); + // @ts-ignore triggerResizeObserver([{ contentRect: { height: 75, width: 50 } }]); return promiseTimeout(() => { diff --git a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx index b8c6278f069e4..75c1ed557ce5c 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx @@ -65,7 +65,6 @@ export default styled(SankeyComponent)` background: #ddd; padding: 10px; font-size: ${({ fontSize }) => fontSize}em; - font-weight: ${({ theme }) => theme.typography.weights.light}; color: #000; border: 1px solid #fff; text-align: center; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx index 1c650efeea31a..83340ba9eb268 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx @@ -302,13 +302,11 @@ export default styled(BigNumberVis)` } .kicker { - font-weight: ${({ theme }) => theme.typography.weights.light}; line-height: 1em; padding-bottom: 2em; } .header-line { - font-weight: ${({ theme }) => theme.typography.weights.normal}; position: relative; line-height: 1em; span { @@ -318,7 +316,6 @@ export default styled(BigNumberVis)` } .subheader-line { - font-weight: ${({ theme }) => theme.typography.weights.light}; line-height: 1em; padding-bottom: 0; } diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js index 8c68f2351871e..06bfdd3b0cb91 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js @@ -17,123 +17,124 @@ * under the License. */ -import { styled } from '@superset-ui/core'; +import { css, styled } from '@superset-ui/core'; export const Styles = styled.div` - table.pvtTable { - position: relative; - font-size: 12px; - text-align: left; - margin-top: 3px; - margin-left: 3px; - border-collapse: separate; - font-family: 'Inter', Helvetica, Arial, sans-serif; - line-height: 1.4; - } - - table thead { - position: sticky; - top: 0; - } - - table.pvtTable thead tr th, - table.pvtTable tbody tr th { - background-color: #fff; - border-top: 1px solid #e0e0e0; - border-left: 1px solid #e0e0e0; - font-size: 12px; - padding: 5px; - font-weight: normal; - } - - table.pvtTable tbody tr.pvtRowTotals { - position: sticky; - bottom: 0; - } - - table.pvtTable thead tr:last-of-type th, - table.pvtTable thead tr:first-of-type th.pvtTotalLabel, - table.pvtTable thead tr:nth-last-of-type(2) th.pvtColLabel, - table.pvtTable thead th.pvtSubtotalLabel, - table.pvtTable tbody tr:last-of-type th, - table.pvtTable tbody tr:last-of-type td { - border-bottom: 1px solid #e0e0e0; - } - - table.pvtTable - thead - tr:last-of-type:not(:only-child) - th.pvtAxisLabel - ~ th.pvtColLabel, - table.pvtTable tbody tr:first-of-type th, - table.pvtTable tbody tr:first-of-type td { - border-top: none; - } - - table.pvtTable tbody tr td:last-of-type, - table.pvtTable thead tr th:last-of-type:not(.pvtSubtotalLabel) { - border-right: 1px solid #e0e0e0; - } - - table.pvtTable - thead - tr:last-of-type:not(:only-child) - th.pvtAxisLabel - + .pvtTotalLabel { - border-right: none; - } - - table.pvtTable tr th.active { - background-color: #d9dbe4; - } - - table.pvtTable .pvtTotalLabel { - text-align: right; - font-weight: bold; - } - - table.pvtTable .pvtSubtotalLabel { - font-weight: bold; - } - - table.pvtTable tbody tr td { - color: #2a3f5f; - padding: 5px; - background-color: #fff; - border-top: 1px solid #e0e0e0; - border-left: 1px solid #e0e0e0; - vertical-align: top; - text-align: right; - } - - table.pvtTable tbody tr th.pvtRowLabel { - vertical-align: baseline; - } - - .pvtTotal, - .pvtGrandTotal { - font-weight: bold; - } - - table.pvtTable tbody tr td.pvtRowTotal { - vertical-align: middle; - } - - .toggle-wrapper { - white-space: nowrap; - } - - .toggle-wrapper > .toggle-val { - white-space: normal; - } - - .toggle { - padding-right: 4px; - cursor: pointer; - } - - .hoverable:hover { - background-color: #eceef2; - cursor: pointer; - } + ${({ theme }) => css` + table.pvtTable { + position: relative; + font-size: ${theme.typography.sizes.s}px; + text-align: left; + margin: ${theme.gridUnit}px; + border-collapse: separate; + font-family: ${theme.typography.families.sansSerif}; + line-height: 1.4; + } + + table thead { + position: sticky; + top: 0; + } + + table.pvtTable thead tr th, + table.pvtTable tbody tr th { + background-color: ${theme.colors.grayscale.light5}; + border-top: 1px solid ${theme.colors.grayscale.light2}; + border-left: 1px solid ${theme.colors.grayscale.light2}; + font-size: ${theme.typography.sizes.s}px; + padding: ${theme.gridUnit}px; + font-weight: ${theme.typography.weights.normal}; + } + + table.pvtTable tbody tr.pvtRowTotals { + position: sticky; + bottom: 0; + } + + table.pvtTable thead tr:last-of-type th, + table.pvtTable thead tr:first-of-type th.pvtTotalLabel, + table.pvtTable thead tr:nth-last-of-type(2) th.pvtColLabel, + table.pvtTable thead th.pvtSubtotalLabel, + table.pvtTable tbody tr:last-of-type th, + table.pvtTable tbody tr:last-of-type td { + border-bottom: 1px solid ${theme.colors.grayscale.light2}; + } + + table.pvtTable + thead + tr:last-of-type:not(:only-child) + th.pvtAxisLabel + ~ th.pvtColLabel, + table.pvtTable tbody tr:first-of-type th, + table.pvtTable tbody tr:first-of-type td { + border-top: none; + } + + table.pvtTable tbody tr td:last-of-type, + table.pvtTable thead tr th:last-of-type:not(.pvtSubtotalLabel) { + border-right: 1px solid ${theme.colors.grayscale.light2}; + } + + table.pvtTable + thead + tr:last-of-type:not(:only-child) + th.pvtAxisLabel + + .pvtTotalLabel { + border-right: none; + } + + table.pvtTable tr th.active { + background-color: #d9dbe4; + } + + table.pvtTable .pvtTotalLabel { + text-align: right; + font-weight: ${theme.typography.weights.bold}; + } + + table.pvtTable .pvtSubtotalLabel { + font-weight: ${theme.typography.weights.bold}; + } + + table.pvtTable tbody tr td { + color: #2a3f5f; + padding: ${theme.gridUnit}px; + background-color: ${theme.colors.grayscale.light5}; + border-top: 1px solid ${theme.colors.grayscale.light2}; + border-left: 1px solid ${theme.colors.grayscale.light2}; + vertical-align: top; + text-align: right; + } + + table.pvtTable tbody tr th.pvtRowLabel { + vertical-align: baseline; + } + + .pvtTotal, + .pvtGrandTotal { + font-weight: ${theme.typography.weights.bold}; + } + + table.pvtTable tbody tr td.pvtRowTotal { + vertical-align: middle; + } + + .toggle-wrapper { + white-space: nowrap; + } + + .toggle-wrapper > .toggle-val { + white-space: normal; + } + + .toggle { + padding-right: ${theme.gridUnit}px; + cursor: pointer; + } + + .hoverable:hover { + background-color: #eceef2; + cursor: pointer; + } + `} `; diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx index 68bdc141d7b75..ab56dc8c612a9 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx @@ -17,82 +17,84 @@ * under the License. */ -import { styled } from '@superset-ui/core'; +import { css, styled } from '@superset-ui/core'; export default styled.div` - table { - width: 100%; - min-width: auto; - max-width: none; - margin: 0; - } + ${({ theme }) => css` + table { + width: 100%; + min-width: auto; + max-width: none; + margin: 0; + } - th, - td { - min-width: 4.3em; - } + th, + td { + min-width: 4.3em; + } - thead > tr > th { - padding-right: 0; - position: relative; - background: ${({ theme: { colors } }) => colors.grayscale.light5}; - text-align: left; - } - th svg { - color: ${({ theme: { colors } }) => colors.grayscale.light2}; - margin: ${({ theme: { gridUnit } }) => gridUnit / 2}px; - } - th.is-sorted svg { - color: ${({ theme: { colors } }) => colors.grayscale.base}; - } - .table > tbody > tr:first-of-type > td, - .table > tbody > tr:first-of-type > th { - border-top: 0; - } + thead > tr > th { + padding-right: 0; + position: relative; + background: ${theme.colors.grayscale.light5}; + text-align: left; + } + th svg { + color: ${theme.colors.grayscale.light2}; + margin: ${theme.gridUnit / 2}px; + } + th.is-sorted svg { + color: ${theme.colors.grayscale.base}; + } + .table > tbody > tr:first-of-type > td, + .table > tbody > tr:first-of-type > th { + border-top: 0; + } - .dt-controls { - padding-bottom: 0.65em; - } - .dt-metric { - text-align: right; - } - .dt-totals { - font-weight: bold; - } - .dt-is-null { - color: ${({ theme: { colors } }) => colors.grayscale.light1}; - } - td.dt-is-filter { - cursor: pointer; - } - td.dt-is-filter:hover { - background-color: ${({ theme: { colors } }) => colors.secondary.light4}; - } - td.dt-is-active-filter, - td.dt-is-active-filter:hover { - background-color: ${({ theme: { colors } }) => colors.secondary.light3}; - } + .dt-controls { + padding-bottom: 0.65em; + } + .dt-metric { + text-align: right; + } + .dt-totals { + font-weight: ${theme.typography.weights.bold}; + } + .dt-is-null { + color: ${theme.colors.grayscale.light1}; + } + td.dt-is-filter { + cursor: pointer; + } + td.dt-is-filter:hover { + background-color: ${theme.colors.secondary.light4}; + } + td.dt-is-active-filter, + td.dt-is-active-filter:hover { + background-color: ${theme.colors.secondary.light3}; + } - .dt-global-filter { - float: right; - } + .dt-global-filter { + float: right; + } - .dt-pagination { - text-align: right; - /* use padding instead of margin so clientHeight can capture it */ - padding-top: 0.5em; - } - .dt-pagination .pagination { - margin: 0; - } + .dt-pagination { + text-align: right; + /* use padding instead of margin so clientHeight can capture it */ + padding-top: 0.5em; + } + .dt-pagination .pagination { + margin: 0; + } - .pagination > li > span.dt-pagination-ellipsis:focus, - .pagination > li > span.dt-pagination-ellipsis:hover { - background: ${({ theme: { colors } }) => colors.grayscale.light5}; - } + .pagination > li > span.dt-pagination-ellipsis:focus, + .pagination > li > span.dt-pagination-ellipsis:hover { + background: ${theme.colors.grayscale.light5}; + } - .dt-no-results { - text-align: center; - padding: 1em 0.6em; - } + .dt-no-results { + text-align: center; + padding: 1em 0.6em; + } + `} `; diff --git a/superset-frontend/src/GlobalStyles.tsx b/superset-frontend/src/GlobalStyles.tsx new file mode 100644 index 0000000000000..1e2cf449ff637 --- /dev/null +++ b/superset-frontend/src/GlobalStyles.tsx @@ -0,0 +1,38 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { css } from '@superset-ui/core'; +import { Global } from '@emotion/react'; + +export const GlobalStyles = () => ( + css` + h1, + h2, + h3, + h4, + h5, + h6, + strong, + th { + font-weight: ${theme.typography.weights.bold}; + } + `} + /> +); diff --git a/superset-frontend/src/SqlLab/App.jsx b/superset-frontend/src/SqlLab/App.jsx index b0b5e7320a239..e2118e2efd084 100644 --- a/superset-frontend/src/SqlLab/App.jsx +++ b/superset-frontend/src/SqlLab/App.jsx @@ -22,6 +22,7 @@ import { Provider } from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import { hot } from 'react-hot-loader/root'; import { ThemeProvider } from '@superset-ui/core'; +import { GlobalStyles } from 'src/GlobalStyles'; import { initFeatureFlags, isFeatureEnabled, @@ -127,6 +128,7 @@ if (sqlLabMenu) { const Application = () => ( + diff --git a/superset-frontend/src/addSlice/App.tsx b/superset-frontend/src/addSlice/App.tsx index 900cc36f446c8..dac830308364f 100644 --- a/superset-frontend/src/addSlice/App.tsx +++ b/superset-frontend/src/addSlice/App.tsx @@ -19,6 +19,7 @@ import React from 'react'; import { hot } from 'react-hot-loader/root'; import { ThemeProvider } from '@superset-ui/core'; +import { GlobalStyles } from 'src/GlobalStyles'; import setupApp from '../setup/setupApp'; import setupPlugins from '../setup/setupPlugins'; import { DynamicPluginProvider } from '../components/DynamicPlugins'; @@ -38,6 +39,7 @@ initFeatureFlags(bootstrapData.common.feature_flags); const App = () => ( + diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less index 6b9e3b0ca1895..a3c74f712cb0a 100644 --- a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less +++ b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less @@ -615,7 +615,7 @@ @alert-padding: 15px; @alert-border-radius: @border-radius-base; -@alert-link-font-weight: bold; +@alert-link-font-weight: @font-weight-bold; @alert-success-bg: @state-success-bg; @alert-success-text: @state-success-text; @@ -765,7 +765,7 @@ // ** Badge background color in active nav link @badge-active-bg: @lightest; // superset-var -@badge-font-weight: bold; +@badge-font-weight: @font-weight-bold; @badge-line-height: 1; @badge-border-radius: 10px; @@ -804,7 +804,7 @@ // // ## -@close-font-weight: bold; +@close-font-weight: @font-weight-bold; @close-color: @lightest; // superset-var @close-text-shadow: 0 1px 0 @lightest; // superset-var diff --git a/superset-frontend/src/assets/stylesheets/less/fonts.less b/superset-frontend/src/assets/stylesheets/less/fonts.less index d076a03bb1478..7e15ab439589e 100644 --- a/superset-frontend/src/assets/stylesheets/less/fonts.less +++ b/superset-frontend/src/assets/stylesheets/less/fonts.less @@ -22,7 +22,12 @@ /*************************************************************************/ /******************************* Inter UI ********************************/ -@import '~fontsource-inter/index.css'; +@import '~fontsource-inter/200.css'; +@import '~fontsource-inter/400.css'; +@import '~fontsource-inter/500.css'; +@import '~fontsource-inter/600.css'; /******************************* Fira Code ********************************/ -@import '~fontsource-fira-code/index.css'; +@import '~fontsource-fira-code/400.css'; +@import '~fontsource-fira-code/500.css'; +@import '~fontsource-fira-code/600.css'; diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less b/superset-frontend/src/assets/stylesheets/less/variables.less index 34bfdac628158..3f4fad5572708 100644 --- a/superset-frontend/src/assets/stylesheets/less/variables.less +++ b/superset-frontend/src/assets/stylesheets/less/variables.less @@ -144,7 +144,7 @@ // *************************** Weights ********************************** @font-weight-light: 200; @font-weight-normal: 400; -@font-weight-bold: 700; +@font-weight-bold: 600; // ***************************** Font Sizes ***************************** @font-size-base: 14px; // Base `rem` units on this, as needed. diff --git a/superset-frontend/src/components/ReportModal/styles.tsx b/superset-frontend/src/components/ReportModal/styles.tsx index cd68b271ebb4e..ce71ab47256f7 100644 --- a/superset-frontend/src/components/ReportModal/styles.tsx +++ b/superset-frontend/src/components/ReportModal/styles.tsx @@ -27,10 +27,6 @@ export const StyledModal = styled(Modal)` .ant-modal-body { padding: 0; } - - h4 { - font-weight: 600; - } `; export const StyledTopSection = styled.div` @@ -95,7 +91,6 @@ export const TimezoneHeaderStyle = (theme: SupersetTheme) => css` export const SectionHeaderStyle = (theme: SupersetTheme) => css` margin: ${theme.gridUnit * 3}px 0; - font-weight: ${theme.typography.weights.bold}; `; export const StyledMessageContentTitle = styled.div` diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx index de207d6b78cd5..c717fbbeec76f 100644 --- a/superset-frontend/src/components/Select/styles.tsx +++ b/superset-frontend/src/components/Select/styles.tsx @@ -101,6 +101,7 @@ export const defaultTheme: (theme: SupersetTheme) => PartialThemeConfig = fontSize: 14, minWidth: '6.5em', }, + weights: theme.typography.weights, }); // let styles accept serialized CSS, too @@ -219,6 +220,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = { theme: { colors, spacing: { lineHeight, fontSize }, + weights, }, }, ) => { @@ -237,7 +239,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = { font-size: ${fontSize}px; background-color: ${backgroundColor}; color: ${color}; - font-weight: ${isSelected ? 600 : 400}; + font-weight: ${isSelected ? weights.bold : weights.normal}; white-space: nowrap; &:hover:active { background-color: ${colors.grayBg}; diff --git a/superset-frontend/src/dashboard/components/AddSliceCard.jsx b/superset-frontend/src/dashboard/components/AddSliceCard.jsx index 312627e1ee085..7a8f7f3b78280 100644 --- a/superset-frontend/src/dashboard/components/AddSliceCard.jsx +++ b/superset-frontend/src/dashboard/components/AddSliceCard.jsx @@ -47,7 +47,6 @@ const Styled = styled.div` border: 1px solid ${theme.colors.grayscale.light2}; border-radius: ${theme.gridUnit}px; background: ${theme.colors.grayscale.light5}; - font-weight: ${theme.typography.weights.light}; padding: ${theme.gridUnit * 2}px; margin: 0 ${theme.gridUnit * 3}px ${theme.gridUnit * 3}px diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx index 2fa1afb944eff..c80e0ec0cb734 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx @@ -16,68 +16,70 @@ * specific language governing permissions and limitations * under the License. */ -import { styled } from '@superset-ui/core'; +import { css, styled } from '@superset-ui/core'; export const Pill = styled.div` - display: inline-block; - color: ${({ theme }) => theme.colors.grayscale.light5}; - background: ${({ theme }) => theme.colors.grayscale.base}; - border-radius: 1em; - vertical-align: text-top; - padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`}; - font-size: ${({ theme }) => theme.typography.sizes.m}px; - font-weight: bold; - min-width: 1em; - min-height: 1em; - line-height: 1em; - vertical-align: middle; - white-space: nowrap; - - svg { - position: relative; - top: -2px; - color: ${({ theme }) => theme.colors.grayscale.light5}; - width: 1em; - height: 1em; + ${({ theme }) => css` display: inline-block; + color: ${theme.colors.grayscale.light5}; + background: ${theme.colors.grayscale.base}; + border-radius: 1em; + vertical-align: text-top; + padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px; + font-size: ${theme.typography.sizes.m}px; + font-weight: ${theme.typography.weights.bold}; + min-width: 1em; + min-height: 1em; + line-height: 1em; vertical-align: middle; - } - - &:hover { - cursor: pointer; - background: ${({ theme }) => theme.colors.grayscale.dark1}; - } + white-space: nowrap; - &.has-cross-filters { - background: ${({ theme }) => theme.colors.primary.base}; - &:hover { - background: ${({ theme }) => theme.colors.primary.dark1}; + svg { + position: relative; + top: -2px; + color: ${theme.colors.grayscale.light5}; + width: 1em; + height: 1em; + display: inline-block; + vertical-align: middle; } - } - &.has-incompatible-filters { - color: ${({ theme }) => theme.colors.grayscale.dark2}; - background: ${({ theme }) => theme.colors.alert.base}; &:hover { - background: ${({ theme }) => theme.colors.alert.dark1}; + cursor: pointer; + background: ${theme.colors.grayscale.dark1}; } - svg { - color: ${({ theme }) => theme.colors.grayscale.dark2}; + + &.has-cross-filters { + background: ${theme.colors.primary.base}; + &:hover { + background: ${theme.colors.primary.dark1}; + } } - } - &.filters-inactive { - color: ${({ theme }) => theme.colors.grayscale.light5}; - background: ${({ theme }) => theme.colors.grayscale.light1}; - padding: ${({ theme }) => theme.gridUnit}px; - text-align: center; - height: 22px; - width: 22px; + &.has-incompatible-filters { + color: ${theme.colors.grayscale.dark2}; + background: ${theme.colors.alert.base}; + &:hover { + background: ${theme.colors.alert.dark1}; + } + svg { + color: ${theme.colors.grayscale.dark2}; + } + } - &:hover { - background: ${({ theme }) => theme.colors.grayscale.base}; + &.filters-inactive { + color: ${theme.colors.grayscale.light5}; + background: ${theme.colors.grayscale.light1}; + padding: ${theme.gridUnit}px; + text-align: center; + height: 22px; + width: 22px; + + &:hover { + background: ${theme.colors.grayscale.base}; + } } - } + `} `; export interface TitleProps { diff --git a/superset-frontend/src/dashboard/stylesheets/components/header.less b/superset-frontend/src/dashboard/stylesheets/components/header.less index 7571378261403..7db5924b71265 100644 --- a/superset-frontend/src/dashboard/stylesheets/components/header.less +++ b/superset-frontend/src/dashboard/stylesheets/components/header.less @@ -56,7 +56,7 @@ } .dashboard-header .dashboard-component-header { - font-weight: @font-weight-light; + font-weight: @font-weight-normal; width: auto; } diff --git a/superset-frontend/src/dashboard/stylesheets/components/markdown.less b/superset-frontend/src/dashboard/stylesheets/components/markdown.less index a66216a06cbf4..d8b3676eb8e96 100644 --- a/superset-frontend/src/dashboard/stylesheets/components/markdown.less +++ b/superset-frontend/src/dashboard/stylesheets/components/markdown.less @@ -20,8 +20,9 @@ overflow: hidden; h4, - h5 { - font-weight: @font-weight-light; + h5, + h6 { + font-weight: @font-weight-normal; } h5 { @@ -29,7 +30,6 @@ } h6 { - font-weight: @font-weight-normal; font-size: @font-size-s; } diff --git a/superset-frontend/src/explore/App.jsx b/superset-frontend/src/explore/App.jsx index 63bd55238ec1f..c440b784e7def 100644 --- a/superset-frontend/src/explore/App.jsx +++ b/superset-frontend/src/explore/App.jsx @@ -22,6 +22,7 @@ import { Provider } from 'react-redux'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { ThemeProvider } from '@superset-ui/core'; +import { GlobalStyles } from 'src/GlobalStyles'; import { DynamicPluginProvider } from 'src/components/DynamicPlugins'; import ToastContainer from 'src/components/MessageToasts/ToastContainer'; import setupApp from 'src/setup/setupApp'; @@ -38,6 +39,7 @@ const App = ({ store }) => ( + diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx index 7e974d50da6d9..04378cb9985be 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx @@ -87,7 +87,6 @@ const DatasourceContainer = styled.div` margin: ${theme.gridUnit * 2}px auto; } .type-label { - font-weight: ${theme.typography.weights.light}; font-size: ${theme.typography.sizes.s}px; color: ${theme.colors.grayscale.base}; } diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index 24ee1f870b21e..b87d494aef5be 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx @@ -18,7 +18,7 @@ */ import React, { useState, useEffect, useMemo } from 'react'; import rison from 'rison'; -import { SupersetClient, styled, t, useTheme } from '@superset-ui/core'; +import { css, SupersetClient, styled, t, useTheme } from '@superset-ui/core'; import { buildTimeRangeString, formatTimeRange, @@ -92,58 +92,60 @@ const StyledRangeType = styled(Select)` `; const ContentStyleWrapper = styled.div` - .ant-row { - margin-top: 8px; - } + ${({ theme }) => css` + .ant-row { + margin-top: 8px; + } - .ant-input-number { - width: 100%; - } + .ant-input-number { + width: 100%; + } - .ant-picker { - padding: 4px 17px 4px; - border-radius: 4px; - width: 100%; - } + .ant-picker { + padding: 4px 17px 4px; + border-radius: 4px; + width: 100%; + } - .ant-divider-horizontal { - margin: 16px 0; - } + .ant-divider-horizontal { + margin: 16px 0; + } - .control-label { - font-size: 11px; - font-weight: 500; - color: #b2b2b2; - line-height: 16px; - text-transform: uppercase; - margin: 8px 0; - } + .control-label { + font-size: 11px; + font-weight: ${theme.typography.weights.medium}; + color: #b2b2b2; + line-height: 16px; + text-transform: uppercase; + margin: 8px 0; + } - .vertical-radio { - display: block; - height: 40px; - line-height: 40px; - } + .vertical-radio { + display: block; + height: 40px; + line-height: 40px; + } - .section-title { - font-style: normal; - font-weight: 500; - font-size: 15px; - line-height: 24px; - margin-bottom: 8px; - } + .section-title { + font-style: normal; + font-weight: ${theme.typography.weights.bold}; + font-size: 15px; + line-height: 24px; + margin-bottom: 8px; + } - .control-anchor-to { - margin-top: 16px; - } + .control-anchor-to { + margin-top: 16px; + } - .control-anchor-to-datetime { - width: 217px; - } + .control-anchor-to-datetime { + width: 217px; + } - .footer { - text-align: right; - } + .footer { + text-align: right; + } + `} `; const IconWrapper = styled.span` diff --git a/superset-frontend/src/profile/App.tsx b/superset-frontend/src/profile/App.tsx index 85f4ccc831fa0..6f935ee710f99 100644 --- a/superset-frontend/src/profile/App.tsx +++ b/superset-frontend/src/profile/App.tsx @@ -22,6 +22,7 @@ import thunk from 'redux-thunk'; import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; import { Provider } from 'react-redux'; import { ThemeProvider } from '@superset-ui/core'; +import { GlobalStyles } from 'src/GlobalStyles'; import App from 'src/profile/components/App'; import messageToastReducer from 'src/components/MessageToasts/reducers'; import { initEnhancer } from 'src/reduxUtils'; @@ -48,6 +49,7 @@ const store = createStore( const Application = () => ( + diff --git a/superset-frontend/src/views/App.tsx b/superset-frontend/src/views/App.tsx index b996fa708a929..04ca777c3d7a7 100644 --- a/superset-frontend/src/views/App.tsx +++ b/superset-frontend/src/views/App.tsx @@ -24,6 +24,7 @@ import { Route, useLocation, } from 'react-router-dom'; +import { GlobalStyles } from 'src/GlobalStyles'; import { initFeatureFlags } from 'src/featureFlags'; import ErrorBoundary from 'src/components/ErrorBoundary'; import Loading from 'src/components/Loading'; @@ -61,6 +62,7 @@ const App = () => ( + {routes.map(({ path, Component, props = {}, Fallback = Loading }) => ( diff --git a/superset-frontend/src/views/CRUD/alert/ExecutionLog.tsx b/superset-frontend/src/views/CRUD/alert/ExecutionLog.tsx index 580d923141492..c424a931b3c17 100644 --- a/superset-frontend/src/views/CRUD/alert/ExecutionLog.tsx +++ b/superset-frontend/src/views/CRUD/alert/ExecutionLog.tsx @@ -17,7 +17,7 @@ * under the License. */ -import { styled, t } from '@superset-ui/core'; +import { css, styled, t } from '@superset-ui/core'; import moment from 'moment'; import React, { useEffect, useMemo } from 'react'; import { Link, useParams } from 'react-router-dom'; @@ -35,16 +35,18 @@ import { AlertObject, LogObject } from './types'; const PAGE_SIZE = 25; const StyledHeader = styled.div` - display: flex; - flex-direction: row; + ${({ theme }) => css` + display: flex; + flex-direction: row; - a, - Link { - margin-left: 16px; - font-size: 12px; - font-weight: normal; - text-decoration: underline; - } + a, + Link { + margin-left: ${theme.gridUnit * 4}px; + font-size: ${theme.typography.sizes.s}; + font-weight: ${theme.typography.weights.normal}; + text-decoration: underline; + } + `} `; interface ExecutionLogProps { diff --git a/superset-frontend/src/views/CRUD/annotation/AnnotationList.tsx b/superset-frontend/src/views/CRUD/annotation/AnnotationList.tsx index 82bf26dcc821b..413373aefce68 100644 --- a/superset-frontend/src/views/CRUD/annotation/AnnotationList.tsx +++ b/superset-frontend/src/views/CRUD/annotation/AnnotationList.tsx @@ -19,7 +19,7 @@ import React, { useMemo, useState, useEffect, useCallback } from 'react'; import { useParams, Link, useHistory } from 'react-router-dom'; -import { t, styled, SupersetClient } from '@superset-ui/core'; +import { css, t, styled, SupersetClient } from '@superset-ui/core'; import moment from 'moment'; import rison from 'rison'; @@ -44,6 +44,21 @@ interface AnnotationListProps { addSuccessToast: (msg: string) => void; } +const StyledHeader = styled.div` + ${({ theme }) => css` + display: flex; + flex-direction: row; + + a, + Link { + margin-left: ${theme.gridUnit * 4}px; + font-size: ${theme.typography.sizes.s}px; + font-weight: ${theme.typography.weights.normal}; + text-decoration: underline; + } + `} +`; + function AnnotationList({ addDangerToast, addSuccessToast, @@ -215,19 +230,6 @@ function AnnotationList({ 'data-test': 'annotation-bulk-select', }); - const StyledHeader = styled.div` - display: flex; - flex-direction: row; - - a, - Link { - margin-left: 16px; - font-size: 12px; - font-weight: normal; - text-decoration: underline; - } - `; - let hasHistory = true; try { diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts index af66ba24b15bc..c0e65b97774cc 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts @@ -17,7 +17,7 @@ * under the License. */ -import { styled, css, SupersetTheme } from '@superset-ui/core'; +import { css, styled, SupersetTheme } from '@superset-ui/core'; import { JsonEditor } from 'src/components/AsyncAceEditor'; import Button from 'src/components/Button'; @@ -62,7 +62,6 @@ export const StyledFormHeader = styled.header` h4 { color: ${({ theme }) => theme.colors.grayscale.dark2}; - font-weight: bold; font-size: ${({ theme }) => theme.typography.sizes.l}px; margin: 0; padding: 0; @@ -95,7 +94,6 @@ export const antdCollapseStyles = (theme: SupersetTheme) => css` } h4 { font-size: 16px; - font-weight: bold; margin-top: 0; margin-bottom: ${theme.gridUnit}px; } @@ -155,10 +153,6 @@ export const antDModalStyles = (theme: SupersetTheme) => css` opacity: 1; } - .ant-modal-title > h4 { - font-weight: bold; - } - .ant-modal-body { height: ${theme.gridUnit * 180.5}px; } @@ -176,7 +170,7 @@ export const antDAlertStyles = (theme: SupersetTheme) => css` .ant-alert-message { color: ${theme.colors.info.dark2}; font-size: ${theme.typography.sizes.s + 1}px; - font-weight: bold; + font-weight: ${theme.typography.weights.bold}; } .ant-alert-description { @@ -198,7 +192,9 @@ export const antDAlertStyles = (theme: SupersetTheme) => css` `; export const StyledAlertMargin = styled.div` - margin: 0 ${({ theme }) => theme.gridUnit * 4}px -${({ theme }) => theme.gridUnit * 4}px; + ${({ theme }) => css` + margin: 0 ${theme.gridUnit * 4}px -${theme.gridUnit * 4}px; + `} `; export const antDErrorAlertStyles = (theme: SupersetTheme) => css` @@ -208,7 +204,7 @@ export const antDErrorAlertStyles = (theme: SupersetTheme) => css` color: ${theme.colors.error.dark2}; .ant-alert-message { font-size: ${theme.typography.sizes.s + 1}px; - font-weight: bold; + font-weight: ${theme.typography.weights.bold}; } .ant-alert-description { font-size: ${theme.typography.sizes.s + 1}px; @@ -284,85 +280,86 @@ export const validatedFormStyles = (theme: SupersetTheme) => css` `; export const StyledInputContainer = styled.div` - margin-bottom: ${({ theme }) => theme.gridUnit * 6}px; - &.mb-0 { - margin-bottom: 0; - } - &.mb-8 { - margin-bottom: ${({ theme }) => theme.gridUnit * 2}px; - } - - .control-label { - color: ${({ theme }) => theme.colors.grayscale.dark1}; - font-size: ${({ theme }) => theme.typography.sizes.s - 1}px; - margin-bottom: ${({ theme }) => theme.gridUnit * 2}px; - } + ${({ theme }) => css` + margin-bottom: ${theme.gridUnit * 6}px; + &.mb-0 { + margin-bottom: 0; + } + &.mb-8 { + margin-bottom: ${theme.gridUnit * 2}px; + } - &.extra-container { - padding-top: 8px; - } + .control-label { + color: ${theme.colors.grayscale.dark1}; + font-size: ${theme.typography.sizes.s - 1}px; + margin-bottom: ${theme.gridUnit * 2}px; + } - .input-container { - display: flex; - align-items: top; + &.extra-container { + padding-top: ${theme.gridUnit * 2}px; + } - label { + .input-container { display: flex; - margin-left: ${({ theme }) => theme.gridUnit * 2}px; - margin-top: ${({ theme }) => theme.gridUnit * 0.75}px; - font-family: ${({ theme }) => theme.typography.families.sansSerif}; - font-size: ${({ theme }) => theme.typography.sizes.m}px; - } + align-items: top; + + label { + display: flex; + margin-left: ${theme.gridUnit * 2}px; + margin-top: ${theme.gridUnit * 0.75}px; + font-family: ${theme.typography.families.sansSerif}; + font-size: ${theme.typography.sizes.m}px; + } - i { - margin: 0 ${({ theme }) => theme.gridUnit}px; + i { + margin: 0 ${theme.gridUnit}px; + } } - } - input, - textarea { - flex: 1 1 auto; - } - - textarea { - height: 160px; - resize: none; - } + input, + textarea { + flex: 1 1 auto; + } - input::placeholder, - textarea::placeholder { - color: ${({ theme }) => theme.colors.grayscale.light1}; - } + textarea { + height: 160px; + resize: none; + } - textarea, - input[type='text'], - input[type='number'] { - padding: ${({ theme }) => theme.gridUnit * 1.5}px - ${({ theme }) => theme.gridUnit * 2}px; - border-style: none; - border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; - border-radius: ${({ theme }) => theme.gridUnit}px; + input::placeholder, + textarea::placeholder { + color: ${theme.colors.grayscale.light1}; + } - &[name='name'] { - flex: 0 1 auto; - width: 40%; + textarea, + input[type='text'], + input[type='number'] { + padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 2}px; + border-style: none; + border: 1px solid ${theme.colors.grayscale.light2}; + border-radius: ${theme.gridUnit}px; + + &[name='name'] { + flex: 0 1 auto; + width: 40%; + } } - } - &.expandable { - height: 0; - overflow: hidden; - transition: height 0.25s; - margin-left: ${({ theme }) => theme.gridUnit * 8}px; - margin-bottom: 0; - padding: 0; - .control-label { + &.expandable { + height: 0; + overflow: hidden; + transition: height 0.25s; + margin-left: ${theme.gridUnit * 8}px; margin-bottom: 0; + padding: 0; + .control-label { + margin-bottom: 0; + } + &.open { + height: ${CTAS_CVAS_SCHEMA_FORM_HEIGHT}px; + padding-right: ${theme.gridUnit * 5}px; + } } - &.open { - height: ${CTAS_CVAS_SCHEMA_FORM_HEIGHT}px; - padding-right: ${({ theme }) => theme.gridUnit * 5}px; - } - } + `} `; export const StyledJsonEditor = styled(JsonEditor)` @@ -397,13 +394,13 @@ export const StyledAlignment = styled.div` `; export const buttonLinkStyles = (theme: SupersetTheme) => css` - font-weight: 400; + font-weight: ${theme.typography.weights.normal}; text-transform: initial; padding-right: ${theme.gridUnit * 2}px; `; export const alchemyButtonLinkStyles = (theme: SupersetTheme) => css` - font-weight: 400; + font-weight: ${theme.typography.weights.normal}; text-transform: initial; padding: ${theme.gridUnit * 8}px 0 0; margin-left: 0px; @@ -424,7 +421,7 @@ export const TabHeader = styled.div` export const CreateHeaderTitle = styled.div` color: ${({ theme }) => theme.colors.grayscale.dark2}; - font-weight: bold; + font-weight: ${({ theme }) => theme.typography.weights.bold}; font-size: ${({ theme }) => theme.typography.sizes.m}px; `; @@ -442,7 +439,7 @@ export const EditHeaderTitle = styled.div` export const EditHeaderSubtitle = styled.div` color: ${({ theme }) => theme.colors.grayscale.dark1}; font-size: ${({ theme }) => theme.typography.sizes.l}px; - font-weight: bold; + font-weight: ${({ theme }) => theme.typography.weights.bold}; `; export const CredentialInfoForm = styled.div` @@ -515,7 +512,7 @@ export const SelectDatabaseStyles = styled.div` margin: ${({ theme }) => theme.gridUnit * 4}px; .available-label { font-size: ${({ theme }) => theme.typography.sizes.l * 1.1}px; - font-weight: bold; + font-weight: ${({ theme }) => theme.typography.weights.bold}; margin: ${({ theme }) => theme.gridUnit * 6}px 0; } .available-select { @@ -555,7 +552,7 @@ export const StyledCatalogTable = styled.div` .gsheet-title { font-size: ${({ theme }) => theme.typography.sizes.l * 1.1}px; - font-weight: bold; + font-weight: ${({ theme }) => theme.typography.weights.bold}; margin: ${({ theme }) => theme.gridUnit * 10}px 0 16px; }