From ea34769536b6614e3020a46bb9debb1bfbda4116 Mon Sep 17 00:00:00 2001
From: Sebastian Werner <s.werner@sebastian-software.de>
Date: Thu, 7 Mar 2024 09:12:46 +0100
Subject: [PATCH] feat: dropped responsive type (not universal enough) +
 dropped custom loaders

---
 src/assets/ResponsiveType.css       | 70 -----------------------------
 src/index.ts                        | 22 +--------
 src/stories/util/ResetDecorator.tsx |  7 +--
 3 files changed, 3 insertions(+), 96 deletions(-)
 delete mode 100644 src/assets/ResponsiveType.css

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<CoreStyles, () => Promise<unknown>> = {
-  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 <StoryToWrap />
 }