feat: proper injected styles (#164)

2024-03-14 00:10:41 -05:00
parent 442be8cbee
commit e919e96c53
15 changed files with 527 additions and 127 deletions
--- a/src/pages/popup/index.tsx
+++ b/src/pages/popup/index.tsx
@@ -1,3 +1,5 @@
+import 'uno.css';
+
 import PopupMain from '@views/components/PopupMain';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
--- a/src/views/components/CourseCatalogMain.tsx
+++ b/src/views/components/CourseCatalogMain.tsx
@@ -6,7 +6,6 @@ import RecruitmentBanner from '@views/components/injected/RecruitmentBanner/Recr
 import TableHead from '@views/components/injected/TableHead';
 import TableRow from '@views/components/injected/TableRow/TableRow';
 // import TableSubheading from '@views/components/injected/TableSubheading/TableSubheading';
-import { useKeyPress } from '@views/hooks/useKeyPress';
 import useSchedules from '@views/hooks/useSchedules';
 import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import getCourseTableRows from '@views/lib/getCourseTableRows';
@@ -54,11 +53,7 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element {
        setSelectedCourse(course);
    };

-    const handleClearSelectedCourse = () => {
-        setSelectedCourse(null);
-    };
-
-    useKeyPress('Escape', handleClearSelectedCourse);
+    // useKeyPress('Escape', handleClearSelectedCourse);

    const [activeSchedule] = useSchedules();

@@ -87,7 +82,7 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element {
                activeSchedule={activeSchedule}
                show={showPopup}
                onClose={() => setShowPopup(false)}
-                afterLeave={handleClearSelectedCourse}
+                afterLeave={() => setSelectedCourse(null)}
            />
            <AutoLoad addRows={addRows} />
        </ExtensionRoot>
--- a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
@@ -69,7 +69,7 @@ export default function CalendarCourseCell({
            >
                <Text
                    variant='h1-course'
-                    className={clsx('leading-tight truncate', {
+                    className={clsx('leading-tight! truncate', {
                        '-my-0.8': timeAndLocation,
                        'text-wrap': !timeAndLocation,
                    })}
--- a/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss
@@ -87,7 +87,6 @@
        margin-bottom: 0;

        /* Type scale/small */
-        font-family: 'Roboto Flex';
        font-size: 14.22px;
        font-style: normal;
        font-weight: 500;
--- a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
@@ -40,8 +40,8 @@ export default function CalendarHeader(): JSX.Element {
                        <div className='flex items-center gap-2'>
                            <LogoIcon />
                            <div className='flex flex-col whitespace-nowrap'>
-                                <Text className='text-lg text-ut-burntorange font-medium'>UT Registration</Text>
-                                <Text className='text-lg text-ut-orange font-medium'>Plus</Text>
+                                <Text className='text-lg! text-ut-burntorange font-medium!'>UT Registration</Text>
+                                <Text className='text-lg! text-ut-orange font-medium!'>Plus</Text>
                            </div>
                        </div>
                    </div>
@@ -52,7 +52,7 @@ export default function CalendarHeader(): JSX.Element {
                            totalHours={activeSchedule.hours}
                            totalCourses={activeSchedule.courses.length}
                        />
-                        <Text variant='h4' className='text-xs text-gray font-medium leading-normal'>
+                        <Text variant='h4' className='text-xs! text-gray font-medium! leading-normal!'>
                            LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                        </Text>
                    </div>
--- a/src/views/components/common/Dialog/Dialog.tsx
+++ b/src/views/components/common/Dialog/Dialog.tsx
@@ -4,6 +4,8 @@ import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
 import React, { Fragment } from 'react';

+import ExtensionRoot from '../ExtensionRoot/ExtensionRoot';
+
 export interface _DialogProps {
    className?: string;
    title?: JSX.Element;
@@ -20,39 +22,41 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme

    return (
        <Transition show={open} as={HDialog} {...rest}>
-            <Transition.Child
-                as={Fragment}
-                enter='transition duration-300 ease-out'
-                enterFrom='opacity-0'
-                enterTo='opacity-100'
-                leave='transition duration-150 ease-in delay-25'
-                leaveFrom='opacity-100'
-                leaveTo='opacity-0'
-            >
-                <div className={clsx('fixed inset-0 z-50 bg-neutral-500/25')} />
-            </Transition.Child>
-            <Transition.Child
-                as={Fragment}
-                enter='transition duration-400 ease-[cubic-bezier(0.15,0.3,0.2,1)]'
-                enterFrom='transform scale-95 opacity-0'
-                enterTo='transform scale-100 opacity-100'
-                leave='transition duration-250 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
-                leaveFrom='transform scale-100 opacity-100'
-                leaveTo='transform scale-95 opacity-0'
-            >
-                <div className='fixed inset-0 z-50 flex items-center justify-center'>
-                    <HDialog.Panel
-                        className={clsx(
-                            'z-99 max-h-[80vh] flex flex-col overflow-y-scroll rounded bg-white shadow-xl',
-                            className
-                        )}
-                    >
-                        {props.title && <HDialog.Title>{props.title}</HDialog.Title>}
-                        {props.description && <HDialog.Description>{props.description}</HDialog.Description>}
-                        {children}
-                    </HDialog.Panel>
-                </div>
-            </Transition.Child>
+            <ExtensionRoot>
+                <Transition.Child
+                    as={Fragment}
+                    enter='transition duration-300 ease-out'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='transition duration-150 ease-in delay-25'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'
+                >
+                    <div className={clsx('fixed inset-0 z-50 bg-neutral-500/25')} />
+                </Transition.Child>
+                <Transition.Child
+                    as={Fragment}
+                    enter='transition duration-400 ease-[cubic-bezier(0.15,0.3,0.2,1)]'
+                    enterFrom='transform scale-95 opacity-0'
+                    enterTo='transform scale-100 opacity-100'
+                    leave='transition duration-250 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
+                    leaveFrom='transform scale-100 opacity-100'
+                    leaveTo='transform scale-95 opacity-0'
+                >
+                    <div className='fixed inset-0 z-50 flex items-center justify-center'>
+                        <HDialog.Panel
+                            className={clsx(
+                                'z-99 max-h-[80vh] flex flex-col overflow-y-auto rounded bg-white shadow-xl',
+                                className
+                            )}
+                        >
+                            {props.title && <HDialog.Title>{props.title}</HDialog.Title>}
+                            {props.description && <HDialog.Description>{props.description}</HDialog.Description>}
+                            {children}
+                        </HDialog.Panel>
+                    </div>
+                </Transition.Child>
+            </ExtensionRoot>
        </Transition>
    );
 }
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -1,5 +1,15 @@
@import 'src/views/styles/base.module.scss';

+@layer base {
+    .extensionRoot {
+        @import 'tailwind-compat';
+    }
+
+    span {
+        font-family: inherit;
+    }
+}
+
 .extensionRoot {
    @apply font-sans h-full;
    color: #303030;
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
@@ -1,4 +1,4 @@
-import '@unocss/reset/tailwind-compat.css';
+// import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';

 import React from 'react';
--- a/src/views/components/common/ExtensionRoot/_tailwind-compat.css
+++ b/src/views/components/common/ExtensionRoot/_tailwind-compat.css
@@ -0,0 +1,388 @@
+/*
+Please read: https://github.com/unocss/unocss/blob/main/packages/reset/tailwind-compat.md
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS.
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  /* Will affect the button style of most component libraries, so disable it */
+  /* https://github.com/unocss/unocss/issues/2127 */
+  /* background-color: transparent; !* 2 *! */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+[hidden] {
+  display: none;
+}
--- a/src/views/components/common/ScheduleDropdown/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown/ScheduleDropdown.tsx
@@ -39,7 +39,7 @@ export default function ScheduleDropdown(props: Props) {
                                    </Text>
                                </p>
                            </div>
-                            <Text className='text-2xl text-ut-burntorange font-normal'>
+                            <Text className='text-ut-burntorange text-2xl! font-normal!'>
                                {open ? <DropdownArrowDown /> : <DropdownArrowUp />}
                            </Text>
                        </Disclosure.Button>
--- a/src/views/components/common/Text/Text.module.scss
+++ b/src/views/components/common/Text/Text.module.scss
@@ -1,67 +1,64 @@
@use 'src/views/styles/colors.module.scss';
@use 'src/views/styles/fonts.module.scss';

-@layer theme {
-    .text {
-        font-family: 'Roboto Flex', sans-serif;
-        line-height: normal;
-        font-style: normal;
-    }
-
-    .mini {
-        font-size: 0.79rem;
-        font-weight: 500;
-    }
-
-    .small {
-        font-size: 0.88875rem;
-        font-weight: 500;
-    }
-
-    .p {
-        font-size: 1rem;
-        font-weight: 400;
-        letter-spacing: 0.025rem;
-    }
-
-    .h4 {
-        font-size: 1.125rem;
-        font-weight: 500;
-    }
-
-    .h3-course {
-        font-size: 0.6875rem;
-        font-weight: 400;
-        line-height: 100%; /* 0.6875rem */
-    }
-
-    .h3 {
-        font-size: 1.26563rem;
-        font-weight: 600;
-        text-transform: uppercase;
-    }
-
-    .h2-course {
-        font-size: 1rem;
-        font-weight: 500;
-        letter-spacing: 0.03125rem;
-        text-transform: capitalize;
-    }
-
-    .h2 {
-        font-size: 1.42375rem;
-        font-weight: 500;
-    }
-
-    .h1-course {
-        font-size: 1rem;
-        font-weight: 600;
-        text-transform: capitalize;
-    }
-
-    .h1 {
-        font-size: 1.60188rem;
-        font-weight: 700;
-        text-transform: uppercase;
-    }
+.text {
+    line-height: normal;
+    font-style: normal;
+}
+
+.mini {
+    font-size: 0.79rem;
+    font-weight: 500;
+}
+
+.small {
+    font-size: 0.88875rem;
+    font-weight: 500;
+}
+
+.p {
+    font-size: 1rem;
+    font-weight: 400;
+    letter-spacing: 0.025rem;
+}
+
+.h4 {
+    font-size: 1.125rem;
+    font-weight: 500;
+}
+
+.h3-course {
+    font-size: 0.6875rem;
+    font-weight: 400;
+    line-height: 100%; /* 0.6875rem */
+}
+
+.h3 {
+    font-size: 1.26563rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.h2-course {
+    font-size: 1rem;
+    font-weight: 500;
+    letter-spacing: 0.03125rem;
+    text-transform: capitalize;
+}
+
+.h2 {
+    font-size: 1.42375rem;
+    font-weight: 500;
+}
+
+.h1-course {
+    font-size: 1rem;
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.h1 {
+    font-size: 1.60188rem;
+    font-weight: 700;
+    text-transform: uppercase;
 }
--- a/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx
@@ -70,7 +70,7 @@ export default function Description({ course }: DescriptionProps): JSX.Element {
                                <li key={line}>
                                    <Text
                                        variant='p'
-                                        className={clsx({ 'font-bold text-ut-burntorange': isKeywordPresent })}
+                                        className={clsx({ 'font-bold! text-ut-burntorange': isKeywordPresent })}
                                    >
                                        {line}
                                    </Text>
--- a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
@@ -106,7 +106,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
            title: { text: 'Number of Students' },
        },
        chart: {
-            style: { fontFamily: 'Roboto Flex', fontWeight: '600' },
+            style: { fontFamily: 'Roboto Flex, Roboto Flex Local', fontWeight: '600' },
            spacingBottom: 25,
            spacingTop: 25,
            height: 250,
--- a/src/views/components/injected/TableRow/TableRow.tsx
+++ b/src/views/components/injected/TableRow/TableRow.tsx
@@ -1,6 +1,7 @@
 import type { Course, ScrapedRow } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
+import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';

@@ -85,20 +86,22 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
    }

    return ReactDOM.createPortal(
-        <div className='relative'>
-            <button
-                className='m1 h-6 w-6 flex items-center justify-center rounded bg-ut-burntorange color-white!'
-                onClick={onClick}
-            >
-                <RowIcon color='ut-white' />
-            </button>
-            {conflicts.length > 0 && (
-                <ConflictsWithWarning
-                    className='invisible absolute left-13 top--3 text-white group-hover:visible'
-                    conflicts={conflicts}
-                />
-            )}
-        </div>,
+        <ExtensionRoot>
+            <div className='relative'>
+                <button
+                    className='m1 h-6 w-6 flex items-center justify-center rounded bg-ut-burntorange color-white!'
+                    onClick={onClick}
+                >
+                    <RowIcon color='ut-white' />
+                </button>
+                {conflicts.length > 0 && (
+                    <ConflictsWithWarning
+                        className='invisible absolute left-13 top--3 text-white group-hover:visible'
+                        conflicts={conflicts}
+                    />
+                )}
+            </div>
+        </ExtensionRoot>,
        container
    );
 }
--- a/src/views/styles/fonts.module.scss
+++ b/src/views/styles/fonts.module.scss
@@ -9,12 +9,14 @@
 }

@font-face {
-    font-family: 'Roboto Flex';
+    font-family: 'Roboto Flex Local';
    src: url('@public/fonts/roboto-flex.woff2') format('woff2');
    font-display: swap;
    font-style: normal;
 }

+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap');
+
 $medium_size: 16px;

 :export {