feat: update font sizes

SwitchbackTech · Nov 11, 2024 · 867d15c · 867d15c
1 parent 22f01d5
commit 867d15c
Show file tree

Hide file tree

Showing 25 changed files with 63 additions and 59 deletions.
diff --git a/packages/web/src/common/styles/default-theme.d.ts b/packages/web/src/common/styles/default-theme.d.ts
@@ -50,8 +50,14 @@ declare module "styled-components" {
       };
     };
     text: {
-      default: string;
-      medium: string;
+      xs: string;
+      s: string;
+      m: string;
+      l: string;
+      xl: string;
+      xxl: string;
+      xxxl: string;
+      "4xl": string;
     };
     transition: {
       default: string;

diff --git a/packages/web/src/common/styles/style.types.ts b/packages/web/src/common/styles/style.types.ts
@@ -0,0 +1 @@
+export type FontSize = "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl" | "4xl";
diff --git a/packages/web/src/common/styles/theme.ts b/packages/web/src/common/styles/theme.ts
@@ -7,7 +7,7 @@ export const c = {
   blue100: "hsl(202 100 67)",
   blueGray400: "hsl(207 14 57)",
   blueGray300: "hsl(205 33 61)",
-  blueGray200: "hsl(205 36 56)",
+  blueGray200: "hsl(205 36 62)",
   blueGray100: "hsl(196 45 78)",
   darkBlue500: "hsl(220 29 6)",
   darkBlue400: "hsl(222 28 7)",
@@ -81,8 +81,14 @@ export const theme: DefaultTheme = {
     },
   },
   text: {
-    default: "0.8125rem",
-    medium: "1rem",
+    xs: "0.563rem",
+    s: "0.688rem",
+    m: "0.8125rem",
+    l: "1rem",
+    xl: "1.125rem",
+    xxl: "1.3rem",
+    xxxl: "1.6rem",
+    "4xl": "1.7rem",
   },
   transition: {
     default: "0.3s",

diff --git a/packages/web/src/components/DatePicker/DatePicker.tsx b/packages/web/src/components/DatePicker/DatePicker.tsx
@@ -96,17 +96,17 @@ export const DatePicker: React.FC<Props> = ({
         changeYear,
         customHeaderCount,
       }) => {
-        const formattedSelectedMonth = dayjs(monthDate).format("MMM YYYY");
-        const formattedCurrentMonth = dayjs().format("MMM YYYY");
+        const selectedMonth = dayjs(monthDate).format("MMM YYYY");
+        const currentMonth = dayjs().format("MMM YYYY");
 
         return (
           <StyledHeaderFlex
             alignItems={AlignItems.CENTER}
             justifyContent={JustifyContent.LEFT}
           >
             <MonthContainerStyled>
-              <Text color={theme.color.text.light} size={17}>
-                {formattedSelectedMonth}
+              <Text color={theme.color.text.light} size="xl">
+                {selectedMonth}
               </Text>
             </MonthContainerStyled>
 
@@ -116,34 +116,30 @@ export const DatePicker: React.FC<Props> = ({
                   <Text
                     cursor="pointer"
                     onClick={decreaseMonth}
-                    fontWeight={600}
                     color={theme.color.text.light}
-                    size={20}
+                    size="l"
                   >
                     {"<"}
                   </Text>
                   <Text
                     cursor="pointer"
                     onClick={increaseMonth}
-                    fontWeight={600}
                     color={theme.color.text.light}
-                    size={20}
+                    size="l"
                   >
                     {">"}
                   </Text>
                 </ChangeDayButtonsStyledFlex>
                 {withTodayButton && (
                   <TodayStyledText
-                    isCurrentDate={
-                      formattedCurrentMonth === formattedSelectedMonth
-                    }
+                    isCurrentDate={currentMonth === selectedMonth}
                     cursor="pointer"
                     onClick={() => {
                       changeMonth(dayjs().month());
                       changeYear(dayjs().year());
                     }}
                     color={theme.color.text.light}
-                    size={16}
+                    size="l"
                   >
                     Today
                   </TodayStyledText>

diff --git a/packages/web/src/components/Flex/styled.ts b/packages/web/src/components/Flex/styled.ts
@@ -16,6 +16,7 @@ export enum JustifyContent {
 
 export enum AlignItems {
   CENTER = "center",
+  BASELINE = "baseline",
   FLEX_END = "flex-end",
   FLEX_START = "flex-start",
 }

diff --git a/packages/web/src/components/Input/styled.ts b/packages/web/src/components/Input/styled.ts
@@ -8,7 +8,7 @@ export const StyledInput = styled.input<Props>`
   background-color: ${({ bgColor }) => bgColor};
   border: none;
   height: 34px;
-  font-size: ${({ theme }) => theme.text.medium};
+  font-size: ${({ theme }) => theme.text.l};
   outline: none;
   width: 100%;
 

diff --git a/packages/web/src/components/Text/styled.ts b/packages/web/src/components/Text/styled.ts
@@ -1,24 +1,27 @@
 import styled from "styled-components";
 import { getGradient, blueGradient } from "@web/common/styles/theme.util";
+import { FontSize } from "@web/common/styles/style.types";
+import { theme } from "@web/common/styles/theme";
 
 export interface Props {
   bgColor?: string;
   color?: string;
   cursor?: string;
   fontWeight?: number | "normal" | "bold" | "bolder" | "lighter";
   lineHeight?: number;
-  size?: number;
+  size?: FontSize;
   withGradient?: boolean;
   withUnderline?: boolean;
   zIndex?: number;
 }
 
+// size && font-size: ${theme.text[size] || size};`} //TODO fallback to m */
 export const StyledText = styled.span<Props>`
   ${({ color }) => color && `color: ${color};`}
   ${({ cursor }) => cursor && `cursor: ${cursor};`}
   ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight}px;`}
-  ${({ size }) => size && `font-size: ${size}px;`}
-
+  ${({ size }) => size && `font-size: ${theme.text[size] || "5px"};`} 
+  
   font-weight: ${({ fontWeight = "normal" }) => fontWeight};
   position: relative;
 

diff --git a/packages/web/src/components/TimePicker/styled.ts b/packages/web/src/components/TimePicker/styled.ts
@@ -8,7 +8,7 @@ export interface Props {
 }
 
 export const StyledTimePicker = styled.div<Props>`
-  font-size: ${({ theme }) => theme.text.medium};
+  font-size: ${({ theme }) => theme.text.l};
   min-width: 90px;
   position: relative;
 

diff --git a/packages/web/src/components/Tooltip/Description/TooltipDescription.tsx b/packages/web/src/components/Tooltip/Description/TooltipDescription.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export const TooltipDescription: FC<Props> = ({ description }) => {
   return (
-    <Text size={11} style={{ paddingRight: 10 }}>
+    <Text size="m" style={{ paddingRight: 10 }}>
       {description}
     </Text>
   );

diff --git a/packages/web/src/components/Tooltip/TooltipWrapper.tsx b/packages/web/src/components/Tooltip/TooltipWrapper.tsx
@@ -42,7 +42,7 @@ export const TooltipWrapper: React.FC<Props> = ({
           {description && <TooltipDescription description={description} />}
           {shortcut && (
             <StyledShortcutTip>
-              <Text size={12}>{shortcut}</Text>
+              <Text size="m">{shortcut}</Text>
             </StyledShortcutTip>
           )}
         </Flex>

diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
@@ -98,14 +98,14 @@ const _GridEvent = (
         direction={FlexDirections.COLUMN}
         flexWrap={FlexWrap.WRAP}
       >
-        <StyledEventTitle size={10.3} role="textbox">
+        <StyledEventTitle size="m" role="textbox">
           {event.title}
         </StyledEventTitle>
         {!event.isAllDay && (
           <>
             <Times
               event={event}
-              isDrafting={isDragging || isResizing}
+              isDrafting={isDraft}
               isPlaceholder={isPlaceholder}
             />
             <>

diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/Times/Times.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/Times/Times.tsx
@@ -24,8 +24,7 @@ export const Times: React.FC<Props> = ({
   const [isHovered, setIsHovered] = useState(false);
   const [isTimesShown, setIsTimesShown] = useState(event.isTimesShown);
 
-  const SIZE = 10;
-  const shouldRevealBox = isPlaceholder && !isTimesShown && !isDrafting;
+  const shouldRevealBox = !isPlaceholder && !isTimesShown && !isDrafting;
 
   const toggleTimes = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -52,9 +51,8 @@ export const Times: React.FC<Props> = ({
           onMouseDown={toggleTimes}
         >
           <Text
-            lineHeight={SIZE}
             role="textbox"
-            size={SIZE}
+            size="xs"
             title="Click to hide times"
             zIndex={ZIndex.LAYER_3}
           >
@@ -65,9 +63,8 @@ export const Times: React.FC<Props> = ({
         <StyledTimes revealBox={shouldRevealBox}>
           {isHovered && shouldRevealBox ? (
             <Text
-              lineHeight={SIZE}
               onMouseDown={toggleTimes}
-              size={SIZE}
+              size="xs"
               role="textbox"
               title="Click to show times"
             >

diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx
@@ -85,14 +85,14 @@ export const GridEventPreview: FC<Props> = memo(function GridEventPreview({
           width={width}
         >
           <Flex alignItems={AlignItems.CENTER} flexWrap={FlexWrap.WRAP}>
-            <Text size={12} role="textbox">
+            <Text size="m" role="textbox">
               {event.title}
             </Text>
 
             {isOverMainGrid && (
               <>
                 <SpaceCharacter />
-                <Text size={10}>{getTimePreview()}</Text>
+                <Text size="s">{getTimePreview()}</Text>
               </>
             )}
           </Flex>

diff --git a/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx b/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx
@@ -56,7 +56,7 @@ const AllDayEvent = ({
         alignItems={AlignItems.FLEX_START}
         direction={FlexDirections.COLUMN}
       >
-        <Text size={10.3} role="textbox">
+        <Text size="m" role="textbox">
           {event.title}
           <SpaceCharacter />
         </Text>

diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/TimesColumn.tsx b/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/TimesColumn.tsx
@@ -34,7 +34,7 @@ export const TimesColumn = () => {
     <StyledDayTimes>
       {hourLabels.map((label, index) => (
         <StyledTimesLabel color={colors[index]} key={`${label}-${index}`}>
-          <Text size={9}>{label}</Text>
+          <Text size="xs">{label}</Text>
         </StyledTimesLabel>
       ))}
     </StyledDayTimes>

diff --git a/packages/web/src/views/Calendar/components/Header/DayLabels.tsx b/packages/web/src/views/Calendar/components/Header/DayLabels.tsx
@@ -61,15 +61,11 @@ export const DayLabels: FC<Props> = ({
             title={getWeekDayLabel(day)}
             color={color}
           >
-            <Text
-              lineHeight={WEEK_DAYS_HEIGHT}
-              size={WEEK_DAYS_HEIGHT}
-              withGradient={isToday}
-            >
+            <Text size="xxl" withGradient={isToday}>
               {dayNumber}
             </Text>
             <SpaceCharacter />
-            <Text size={12}>{day.format("ddd")}</Text>
+            <Text size="l">{day.format("ddd")}</Text>
           </StyledWeekDayFlex>
         );
       })}

diff --git a/packages/web/src/views/Calendar/components/Header/Header.tsx b/packages/web/src/views/Calendar/components/Header/Header.tsx
@@ -67,11 +67,11 @@ export const Header: FC<Props> = ({
       >
         <StyledLeftGroup>
           <StyledHeaderLabel aria-level={1} role="heading">
-            <Text size={40}>{startOfView.format("MMMM")}</Text>
+            <Text size="4xl">{startOfView.format("MMMM")}</Text>
 
             <SpaceCharacter />
 
-            <Text size={38}>{startOfView.format("YYYY")}</Text>
+            <Text size="xxxl">{startOfView.format("YY")}</Text>
           </StyledHeaderLabel>
 
           <StyledNavigationButtons>
@@ -91,7 +91,7 @@ export const Header: FC<Props> = ({
                 <ArrowNavigationButton
                   cursor="pointer"
                   role="navigation"
-                  size={35}
+                  size="xxl"
                   title="previous week"
                 >
                   {"<"}
@@ -105,7 +105,7 @@ export const Header: FC<Props> = ({
                 <ArrowNavigationButton
                   cursor="pointer"
                   role="navigation"
-                  size={35}
+                  size="xxl"
                   title="next week"
                 >
                   {">"}

diff --git a/packages/web/src/views/Calendar/components/Header/styled.ts b/packages/web/src/views/Calendar/components/Header/styled.ts
@@ -13,7 +13,6 @@ import {
 } from "@web/views/Calendar/layout.constants";
 
 export const ArrowNavigationButton = styled(Text)`
-  align-items: center;
   display: flex;
   justify-content: center;
   height: 30px;
@@ -36,11 +35,10 @@ export const StyledHeaderLabel = styled.div`
 `;
 
 export const StyledLeftGroup = styled(Flex)`
-  align-items: ${AlignItems.CENTER};
+  align-items: ${AlignItems.BASELINE};
 `;
 
 export const StyledHeaderRow = styled(Flex)`
-  align-items: ${AlignItems.CENTER};
   color: ${({ theme }) => theme.color.text.light};
   font-size: 40px;
   justify-content: ${JustifyContent.SPACE_BETWEEN};

diff --git a/...eb/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx b/...eb/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx
@@ -33,7 +33,7 @@ export const MonthSection: FC<Props> = ({
         alignItems={AlignItems.CENTER}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
-        <Text role="heading" size={22}>
+        <Text role="heading" size="xl">
           {monthLabel}
         </Text>
         <div onClick={(e) => e.stopPropagation()}>
@@ -45,7 +45,7 @@ export const MonthSection: FC<Props> = ({
             shortcut="M"
           >
             <div role="button">
-              <StyledAddEventButton size={25}>+</StyledAddEventButton>
+              <StyledAddEventButton size="xl">+</StyledAddEventButton>
             </div>
           </TooltipWrapper>
         </div>

diff --git a/...ws/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx b/...ws/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx
@@ -30,7 +30,7 @@ export const SomedayEventRectangle = ({
         direction={FlexDirections.ROW}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
-        <Text size={15}>{event.title}</Text>
+        <Text size="l">{event.title}</Text>
 
         {canMigrate ? (
           <Flex>

diff --git a/.../web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx b/.../web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx
@@ -32,7 +32,7 @@ export const WeekSection: FC<Props> = ({
         alignItems={AlignItems.CENTER}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
-        <Text role="heading" size={22}>
+        <Text role="heading" size="xl">
           {weekLabel}
         </Text>
 
@@ -45,7 +45,7 @@ export const WeekSection: FC<Props> = ({
             shortcut="W"
           >
             <div role="button">
-              <StyledAddEventButton size={25}>+</StyledAddEventButton>
+              <StyledAddEventButton size="xl">+</StyledAddEventButton>
             </div>
           </TooltipWrapper>
         </div>

diff --git a/packages/web/src/views/Calendar/components/TodayButton/styled.ts b/packages/web/src/views/Calendar/components/TodayButton/styled.ts
@@ -6,7 +6,7 @@ export const StyledTodayButton = styled(Flex)`
   color: ${({ theme }) => theme.color.text.light};
   cursor: pointer;
   display: flex;
-  font-size: 17px;
+  font-size: ${({ theme }) => theme.text.l};
   min-width: 80px;
   padding: 0 10px;
 

diff --git a/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatDialog/RepeatDialog.tsx b/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatDialog/RepeatDialog.tsx
@@ -44,7 +44,7 @@ export const RepeatDialog: FC<Props> = ({
     setIsRepeat(false);
   };
 
-  const fontSize = theme.text.default;
+  const fontSize = theme.text.m;
   const bgBright = brighten(bgColor);
   const bgDark = darken(bgColor);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type FontSize = "xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl" \| "xxxl" \| "4xl";