mirror of
https://github.com/apache/superset.git
synced 2026-04-19 08:04:53 +00:00
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
committed by
GitHub
GitHub
parent
35b8a72dae
commit
a8a48af7fa
@@ -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;
|
||||
}
|
||||
${({ 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 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 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 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 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
|
||||
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 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
|
||||
thead
|
||||
tr:last-of-type:not(:only-child)
|
||||
th.pvtAxisLabel
|
||||
+ .pvtTotalLabel {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
table.pvtTable tr th.active {
|
||||
background-color: #d9dbe4;
|
||||
}
|
||||
table.pvtTable tr th.active {
|
||||
background-color: #d9dbe4;
|
||||
}
|
||||
|
||||
table.pvtTable .pvtTotalLabel {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
table.pvtTable .pvtTotalLabel {
|
||||
text-align: right;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
|
||||
table.pvtTable .pvtSubtotalLabel {
|
||||
font-weight: bold;
|
||||
}
|
||||
table.pvtTable .pvtSubtotalLabel {
|
||||
font-weight: ${theme.typography.weights.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 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;
|
||||
}
|
||||
table.pvtTable tbody tr th.pvtRowLabel {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.pvtTotal,
|
||||
.pvtGrandTotal {
|
||||
font-weight: bold;
|
||||
}
|
||||
.pvtTotal,
|
||||
.pvtGrandTotal {
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
}
|
||||
|
||||
table.pvtTable tbody tr td.pvtRowTotal {
|
||||
vertical-align: middle;
|
||||
}
|
||||
table.pvtTable tbody tr td.pvtRowTotal {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toggle-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toggle-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toggle-wrapper > .toggle-val {
|
||||
white-space: normal;
|
||||
}
|
||||
.toggle-wrapper > .toggle-val {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
padding-right: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle {
|
||||
padding-right: ${theme.gridUnit}px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hoverable:hover {
|
||||
background-color: #eceef2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hoverable:hover {
|
||||
background-color: #eceef2;
|
||||
cursor: pointer;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user