Skip to content

Commit

Permalink
Color correction for typography
Browse files Browse the repository at this point in the history
  • Loading branch information
@isacoder
isacoder committed Nov 27, 2023
1 parent 8328be2 commit da868e1
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 36 deletions.
10 changes: 5 additions & 5 deletions packages/ui-lib/src/Filters/atoms/FilterButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,14 @@ const StyledButton = styled.button<{ isOpen?: boolean, hasFlipArrow?: boolean }>
}
`};
${({ theme, isOpen, hasFlipArrow }) => isOpen && hasFlipArrow && css`
background-color: hsl(205, 100%, 72%);
border: solid 1px hsl(205, 100%, 72%);
color: ${theme.colors.icons.inverse};
${({isOpen, hasFlipArrow }) => isOpen && hasFlipArrow && css`
background-color: var(--primary-7);
border: solid 1px var(--primary-7);
color: var(--white-1);
${IconWrapper} {
[stroke]{
stroke: ${theme.colors.icons.inverse};
stroke: var(--white-1);
}
}
`};
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-lib/src/Form/atoms/ButtonWithLoading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const TextContainer = styled.div`

const LoadingContainer = styled.div<{ design: TypeButtonDesigns, show?: boolean, position?: string }>`
height: inherit;
flex: 0 0 35px;
flex: 0 0 36px;
display: flex;
justify-content: center;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-lib/src/Form/atoms/FilterOption.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { dimensions } from '../../themes/common';
const Title = styled.div`
font-family: ${({ theme }) => theme.fontFamily.data};
display: block;
color: hsl(0, 0%, 56%);
color: var(--grey-9);
font-size: 14px;
font-weight: 500;
margin-left: 12px;
Expand Down Expand Up @@ -87,7 +87,7 @@ const Container = styled.div<{ disabled: boolean, selected: boolean }>`
&:hover {
cursor: pointer;
${Title} {
color: ${styles.form.checkbox.checked.hover.backgroundColor};
color: ${styles.form.checkbox.unchecked.hover.borderColor};
}
${FakeCheckbox} {
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-lib/src/Misc/atoms/Tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const TagWrapper = styled.div<{ hoverColor:ISvgIcons['color']; enableHove
font-family: ${({theme}) => theme.fontFamily.ui };
font-size: ${({size}) => size}px;
font-weight: 500;
color: hsl(200, 3%, 39%);
color: var(--grey-11);
padding: 4px 10px;
border: solid 1px hsl(120, 1%, 85%);
display: inline-flex;
Expand Down Expand Up @@ -60,7 +60,7 @@ const Tag : React.FC<ITag> = ({
weight = 'regular',
label='',
linkTo,
...props
...props
}) => {

const renderTag = () => (
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-lib/src/themes/light/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export const colors = {
},
"menu": {
"active": "var(--primary-9)",
"hover": "var(--primary-6)",
"default": "var(--primary-a6)",
"hover": "var(--primary-8)",
"default": "var(--gray-2)",
"indicator": "var(--grey-a1)",
"passive": "var(--primary-a7)"
},
Expand All @@ -25,7 +25,7 @@ export const colors = {
"warning": "var(--warning-8)"
},
"status": {
"caution": "var(--warning-7)",
"caution": "var(--warning-10)",
"danger": "var(--error-8)",
"folder": "var(--primary-7)",
"highlight": "var(--primary-7)",
Expand Down
25 changes: 13 additions & 12 deletions packages/ui-lib/src/themes/light/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const styles = {
"primary": {
"default": {
"backgroundColor": "var(--primary-9)",
"backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
"backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
},
"hover": {
"backgroundColor": "var(--primary-10)"
Expand All @@ -108,11 +108,11 @@ export const styles = {
},
"disabled": {
"backgroundColor": "var(--primary-a10)",
"backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
"backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
},
"actionArea": {
"backgroundColor": "var(--primary-9)",
"backgroundImage": "linear-gradient(135.00deg, var(--primary-7) 0%, var(--primary-7) 100%)"
"backgroundImage": "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
}
},
"secondary": {
Expand All @@ -132,7 +132,8 @@ export const styles = {
"backgroundColor": "var(--grey-a8)"
},
"actionArea": {
"backgroundColor": "var(--grey-9)"
"backgroundColor": "var(--grey-9)",
"backgroundImage": "linear-gradient(135.00deg, var(--grey-9) 0%, var(--grey-8) 100%)"
}
},
"danger": {
Expand Down Expand Up @@ -302,12 +303,12 @@ export const styles = {
"border": "var(--grey-6) 2px solid"
},
"default": {
"borderColor": "var(--grey-8)",
"border": "var(--grey-8) 2px solid"
"borderColor": "var(--grey-9)",
"border": "var(--grey-9) 2px solid"
},
"hover": {
"borderColor": "var(--primary-7)",
"border": "var(--primary-7) 2px solid"
"borderColor": "var(--primary-8)",
"border": "var(--primary-8) 2px solid"
}
},
"checked": {
Expand All @@ -317,11 +318,11 @@ export const styles = {
},
"default": {
"boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
"backgroundColor": "var(--primary-7)"
"backgroundColor": "var(--primary-8)"
},
"hover": {
"boxShadow": "inset 0px 1px 5px 0px var(--grey-a1)",
"backgroundColor": "var(--primary-7)"
"backgroundColor": "var(--primary-8)"
}
},
"indeterminate": {
Expand Down Expand Up @@ -449,7 +450,7 @@ export const styles = {
},
"hover": {
"boxShadow": "0px 4px 9px 0px var(--primary-a1)",
"backgroundColor": "var(--primary-6)",
"backgroundColor": "var(--primary-7)",
"borderColor": "var(--primary-7)",
"border": "var(--primary-7) 1px solid",
"textColor": "var(--white-1)"
Expand Down Expand Up @@ -492,7 +493,7 @@ export const styles = {
"backgroundColor": "var(--grey-4)"
},
"default": {
"backgroundColor": "var(--grey-a4)"
"backgroundColor": "var(--grey-2)"
}
}
}
Expand Down
22 changes: 11 additions & 11 deletions packages/ui-lib/src/themes/light/typography.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,15 +197,15 @@ export const typography = {
"fontWeight": 500,
"lineHeight": "25px",
"textDecoration": "none",
"color": "var(--grey-11)"
"color": "var(--grey-12)"
},
"compact": {
"textAlign": "left",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": "15px",
"textDecoration": "none",
"color": "var(--grey-11)"
"color": "var(--grey-12)"
}
}
},
Expand Down Expand Up @@ -335,7 +335,7 @@ export const typography = {
"fontSize": "14px",
"fontWeight": 300,
"textDecoration": "none",
"color": "var(--grey-11)"
"color": "var(--grey-12)"
},
"placeholder": {
"textAlign": "left",
Expand Down Expand Up @@ -417,7 +417,7 @@ export const typography = {
"fontSize": "14px",
"fontWeight": 600,
"textDecoration": "none",
"color": "var(--grey-11)"
"color": "var(--grey-12)"
}
},
"meta": {
Expand Down Expand Up @@ -632,7 +632,7 @@ export const typography = {
"fontSize": "14px",
"fontWeight": 400,
"textDecoration": "none",
"color": "var(--grey-a11)"
"color": "var(--grey-a8)"
},
"default": {
"textAlign": "center",
Expand All @@ -646,7 +646,7 @@ export const typography = {
"fontSize": "12px",
"fontWeight": 700,
"textDecoration": "none",
"color": "calendar: "
"color": "var(--grey-a12)"
}
},
"monthLink": {
Expand All @@ -658,7 +658,7 @@ export const typography = {
"textTransform": "uppercase",
"letterSpacing": "0.4px",
"textDecoration": "none",
"color": "var(--grey-8)"
"color": "var(--grey-9)"
},
"hover": {
"textAlign": "center",
Expand Down Expand Up @@ -712,15 +712,15 @@ export const typography = {
"fontSize": "13px",
"fontWeight": 500,
"textDecoration": "none",
"color": "var(--white-11)"
"color": "var(--grey-a12)"
}
},
"presetAction": {
"textAlign": "left",
"fontSize": "13px",
"fontWeight": 500,
"textDecoration": "none",
"color": "var(--white-11)"
"color": "var(--gray-12)"
},
"filterButton": {
"default": {
Expand Down Expand Up @@ -759,7 +759,7 @@ export const typography = {
"fontSize": "12px",
"fontWeight": 400,
"textDecoration": "none",
"color": "var(--grey-11)"
"color": "var(--grey-12)"
}
}
},
Expand All @@ -778,7 +778,7 @@ export const typography = {
"textAlign": "left",
"fontSize": "20px",
"fontWeight": 400,
"textShadow": "0px 0px 10px #ffffffcc",
"textShadow": "0px 0px 10px var(--white-a5)",
"textDecoration": "none",
"color": "var(--grey-11)"
},
Expand Down

0 comments on commit da868e1

Please sign in to comment.