feat: messing with the theme

This commit is contained in:
Maxime Beauchemin
2024-12-20 09:12:55 -08:00
parent 3e69ba1384
commit 336763f0c9
435 changed files with 11072 additions and 4081 deletions

View File

@@ -35,17 +35,22 @@ const DatasourceItemContainer = styled.div`
align-items: center;
justify-content: space-between;
width: 100%;
height: ${theme.gridUnit * 6}px;
padding: 0 ${theme.gridUnit}px;
height: ${theme.sizeUnit * 6}px;
padding: 0 ${theme.sizeUnit}px;
// hack to make the drag preview image corners rounded
transform: translate(0, 0);
background-color: inherit;
color: ${theme.colorText};
background-color: ${theme.colorBgLayout};
border-radius: 4px;
&:hover {
background-color: ${theme.colorPrimaryBgHover};
}
> div {
min-width: 0;
margin-right: ${theme.gridUnit * 2}px;
margin-right: ${theme.sizeUnit * 2}px;
}
`}
`;

View File

@@ -65,7 +65,7 @@ const Button = styled.button`
background: none;
border: none;
text-decoration: underline;
color: ${({ theme }) => theme.colors.primary.dark1};
color: ${({ theme }) => theme.colorPrimaryText};
`;
const ButtonContainer = styled.div`
@@ -77,11 +77,11 @@ const LabelWrapper = styled.div`
${({ theme }) => css`
overflow: hidden;
text-overflow: ellipsis;
font-size: ${theme.typography.sizes.s}px;
font-size: ${theme.fontSizeSM}px;
background-color: ${theme.colors.grayscale.light4};
margin: ${theme.gridUnit * 2}px 0;
margin: ${theme.sizeUnit * 2}px 0;
border-radius: 4px;
padding: 0 ${theme.gridUnit}px;
padding: 0 ${theme.sizeUnit}px;
&:first-of-type {
margin-top: 0;
@@ -106,7 +106,7 @@ const LabelWrapper = styled.div`
.metric-option {
& > svg {
min-width: ${theme.gridUnit * 4}px;
min-width: ${theme.sizeUnit * 4}px;
}
& > .option-label {
overflow: hidden;
@@ -128,7 +128,7 @@ const SectionHeaderButton = styled.button`
const SectionHeader = styled.span`
${({ theme }) => `
font-size: ${theme.typography.sizes.m}px;
font-size: ${theme.fontSize}px;
line-height: 1.3;
`}
`;
@@ -136,9 +136,9 @@ const SectionHeader = styled.span`
const Box = styled.div`
${({ theme }) => `
border: 1px ${theme.colors.grayscale.light4} solid;
border-radius: ${theme.gridUnit}px;
font-size: ${theme.typography.sizes.s}px;
padding: ${theme.gridUnit}px;
border-radius: ${theme.sizeUnit}px;
font-size: ${theme.fontSizeSM}px;
padding: ${theme.sizeUnit}px;
color: ${theme.colors.grayscale.light1};
text-overflow: ellipsis;
white-space: nowrap;
@@ -193,7 +193,7 @@ const DatasourcePanelItem: FC<Props> = ({ index, style, data }) => {
<div
style={style}
css={css`
padding: 0 ${theme.gridUnit * 4}px;
padding: 0 ${theme.sizeUnit * 4}px;
`}
>
{index === HEADER_LINE && (
@@ -212,7 +212,7 @@ const DatasourcePanelItem: FC<Props> = ({ index, style, data }) => {
<div
css={css`
display: flex;
gap: ${theme.gridUnit * 2}px;
gap: ${theme.sizeUnit * 2}px;
justify-content: space-between;
align-items: baseline;
`}

View File

@@ -79,7 +79,6 @@ export interface Props {
const DatasourceContainer = styled.div`
${({ theme }) => css`
background-color: ${theme.colors.grayscale.light5};
position: relative;
height: 100%;
display: flex;
@@ -89,23 +88,23 @@ const DatasourceContainer = styled.div`
height: auto;
}
.field-selections {
padding: 0 0 ${theme.gridUnit}px;
padding: 0 0 ${theme.sizeUnit}px;
overflow: auto;
height: 100%;
}
.field-length {
margin-bottom: ${theme.gridUnit * 2}px;
font-size: ${theme.typography.sizes.s}px;
margin-bottom: ${theme.sizeUnit * 2}px;
font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.light1};
}
.form-control.input-md {
display: inline-flex;
width: calc(100% - ${theme.gridUnit * 8}px);
height: ${theme.gridUnit * 8}px;
margin: ${theme.gridUnit * 2}px auto;
width: calc(100% - ${theme.sizeUnit * 8}px);
height: ${theme.sizeUnit * 8}px;
margin: ${theme.sizeUnit * 2}px auto;
}
.type-label {
font-size: ${theme.typography.sizes.s}px;
font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.base};
}
.Control {
@@ -116,7 +115,7 @@ const DatasourceContainer = styled.div`
const StyledInfoboxWrapper = styled.div`
${({ theme }) => css`
margin: 0 ${theme.gridUnit * 2.5}px;
margin: 0 ${theme.sizeUnit * 2.5}px;
span {
text-decoration: underline;