diff --git a/src/assets/ResponsiveType.css b/src/assets/ResponsiveType.css deleted file mode 100644 index 9fe3619..0000000 --- a/src/assets/ResponsiveType.css +++ /dev/null @@ -1,70 +0,0 @@ -/** - * Fluid Scaling for both Mobile and Desktop implemented using native CSS features. - * - * Legend: - * - [ViewportWidth]: [RootFontSize] * [UnitCount] => [ContainerWidth] => [RemainingWidth] - * - * Mobile New: - * [0.5px gain for each 15px device width] - * - 360px: 16.0px * 22 => 352px => 8px extra - * - 375px: 16.5px * 22 => 363px => 12px extra - * - 390px: 17.0px * 22 => 374px => 16px extra - * - 405px: 17.5px * 22 => 385px => 20px extra - * - 420px: 18.0px * 22 => 396px => 24px extra - * - 435px: 18.5px * 22 => 407px => 28px extra - * - 450px: 19.0px * 22 => 418px => 32px extra - * - * Desktop New: - * - 960px (2K): 16.0px: 60 => 960px => 0px extra - * - 1200px (2.5K): 16.5px: 70 => 1155px => 45px extra - * - 1440px (3K): 17.0px: 80 => 1360px => 80px extra - * - 1680px (3.5K): 17.5px: 90 => 1575px => 105px extra - * - 1920px (4K): 18.0px: 100 => 1800px => 120px extra - * - 2160px (4.5K) 18.5px: 110 => 2035px => 125px extra - * - 2400px (5K): 19.0px: 120 => 2280px => 120px extra - * - * See also: - * - https://cloudfour.com/thinks/childish-font-sizes/ - */ - -:root { - --base-size: 16px; - --max-size: 19px; - - /* Define mobile first configuration */ - --min-screen: 360px; - --increment-step: 30; -} - -@media screen and (min-width: 960px) { - :root { - --min-screen: 960px; - --increment-step: 480; - } -} - -html { - font-size: var(--base-size); -} - -html:not([data-layout="static"]) { - /* - * Starting with a resolution of 320px/960px, the base font size (16px) is slowly - * increased as the screen size increases. For every 20px/320px gain in available - * width, the font size is increased by 1px. This growth ends at max-size (20px). - * Relative to the container, there is still an increased space gain - * in the layout, which can be used by classic media queries to adjust the layout. - */ - - /* - * The static size is used to prevent the font size from changing when the - * screen size changes. This is useful for testing the layout at different - * sizes without the font size changing. - */ - font-size: min( - calc( - var(--base-size) + (100vw - var(--min-screen)) / var(--increment-step) - ), - var(--max-size) - ); -} diff --git a/src/index.ts b/src/index.ts index 4628f84..a7356a4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,20 +1,2 @@ -export type CoreStyles = - | "resetNative" - | "sensibleEnhancements" - | "responsiveType" - -export const importMap: Record Promise> = { - resetNative: async () => import("./assets/ResetNative.css"), - sensibleEnhancements: async () => import("./assets/SensibleEnhancements.css"), - responsiveType: async () => import("./assets/ResponsiveType.css") -} - -export async function loadStyle(style: CoreStyles) { - return importMap[style]() -} - -export async function loadStyles() { - await loadStyle("resetNative") - await loadStyle("sensibleEnhancements") - await loadStyle("responsiveType") -} +import "./assets/ResetNative.css" +import "./assets/SensibleEnhancements.css" diff --git a/src/stories/util/ResetDecorator.tsx b/src/stories/util/ResetDecorator.tsx index ba46cf7..c750454 100644 --- a/src/stories/util/ResetDecorator.tsx +++ b/src/stories/util/ResetDecorator.tsx @@ -1,11 +1,6 @@ import type { StoryFn } from "@storybook/react" -import { useEffect } from "react" -import { loadStyles } from "../.." +import "../.." export function ResetDecorator(StoryToWrap: StoryFn) { - useEffect(() => { - void loadStyles() - }, []) - return }