chore: Make font-weights themable, fix font faces (#19236)

* fix(fonts): Import all necessary font packages

* Make html tags themable

* Set bold font weight to 600, add medium font weight to theme

* Replace hard coded font weights with theme variables

* Change some font weight light elements to normal

* Fix tests

* Fix bug in pivot table

* Address code review comments
This commit is contained in:
Kamil Gabryjelski
2022-03-22 09:36:15 +01:00
committed by GitHub
parent 35b8a72dae
commit a8a48af7fa
29 changed files with 523 additions and 452 deletions

View File

@@ -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;
}
`}
`;