DeterminateSystems · grahamc · Aug 19, 2025 · Aug 10, 2025 · Aug 18, 2025 · Aug 18, 2025
diff --git a/.storybook/preview.scss b/.storybook/preview.scss
@@ -0,0 +1,10 @@
+.preview-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 2rem;
+
+  @media screen and (width < 768px) {
+    padding: 0;
+  }
+}
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -2,12 +2,20 @@ import React, { useState } from "react";
 
 import type { Preview, StoryContext } from "@storybook/react-vite";
 
+import "../lib/reset.min.css";
 import "../lib/index.min.css";
+import "./preview.scss";
 import ColorProvider from "../src/ColorProvider";
 import type { ColorScheme } from "../src/ColorContext";
 import { MINIMAL_VIEWPORTS } from "storybook/viewport";
 import { allModes } from "./modes";
 
+const viewports = structuredClone(MINIMAL_VIEWPORTS);
+// The original mobile1 width is 320px.
+// We've only seen 400 pageviews from something smaller than 360px.
+// Measured of the 180 days prior to 2025-08-14.
+viewports.mobile1.styles.width = "360px";
+
 const preview: Preview = {
   decorators: [withSimulatedColorSchemes],
 
@@ -17,7 +25,7 @@ const preview: Preview = {
     },
 
     viewport: {
-      options: MINIMAL_VIEWPORTS,
+      options: viewports,
     },
 
     controls: {
@@ -42,15 +50,7 @@ const Wrapper: React.FC<
   const [root, setRoot] = useState<HTMLElement | null>(null);
 
   return (
-    <div
-      ref={setRoot}
-      style={{
-        display: "flex",
-        flexWrap: "wrap",
-        justifyContent: "center",
-        padding: "2rem",
-      }}
-    >
+    <div ref={setRoot} className="preview-wrapper">
       {root !== null && (
         <ColorProvider
           simulatedSystemColorScheme={simulatedSystemColorScheme}

diff --git a/README.md b/README.md
@@ -5,9 +5,21 @@
 The only special note here is that there is a bundled CSS file that needs to be imported alongside the usual React components. Most bundlers are able to ingest CSS, so this import statement should suffice:
 
 ```javascript
+import "@determinate-systems/ui/reset.min.css";
 import "@determinate-systems/ui/index.min.css";
 ```
 
+And, add this to your `<head>` so fonts work:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+  rel="stylesheet"
+/>
+```
+
 ## Development
 
 Run these two commands in two separate terminals. (Storybook needs to see the CSS, so it's better to have Rollup complete its CSS work.)
@@ -16,3 +28,7 @@ Run these two commands in two separate terminals. (Storybook needs to see the CS
 2. `npm run storybook`
 
 Remember to use `npm run format:fix` to match Prettier's expected formatting style.
+
+## Notes
+
+The CSS generated by this includes the tailwind CSS reset sheet, `preflight`.
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -29,8 +29,17 @@ export default defineConfig({
       options: {
         style: "compressed",
       },
+      exclude: ["./src/sass/preflight.scss"],
       output: "lib/index.min.css",
     }),
+    sass({
+      api: "modern",
+      options: {
+        style: "compressed",
+      },
+      include: ["./src/sass/preflight.scss"],
+      output: "lib/reset.min.css",
+    }),
     cjs(),
   ],
 });
diff --git a/src/CodeBlock/index.scss b/src/CodeBlock/index.scss
@@ -4,9 +4,5 @@
 @use "../sass/tokens";
 
 .code-block__heading {
-  font-family: map.get(tokens.$fonts, sans);
-  color: map.get(tokens.$brand, white);
-  @include mixins.light-mode {
-    color: map.get(tokens.$brand, black);
-  }
+  @include mixins.pad-bottom(lg);
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,7 @@
+// CSS
+import "./sass/preflight.scss";
+import "./sass/reset.scss";
+
 // Hooks
 export {
   type HighlightLanguage,

diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
@@ -20,6 +20,12 @@
   padding: $padding calc(2 * $padding);
 }
 
+@mixin pad-bottom($size) {
+  $padding: map.get(tokens.$padding, $size);
+
+  padding-bottom: $padding;
+}
+
 @mixin svg-icon {
   width: 24px;
   height: 24px;
@@ -60,11 +66,3 @@
     @include svg-icon;
   }
 }
-
-div.color-scheme--dark {
-  background-color: map.get(tokens.$brand, black);
-}
-
-div.color-scheme--light {
-  background-color: map.get(tokens.$brand, white);
-}
diff --git a/src/sass/_tokens.scss b/src/sass/_tokens.scss
@@ -13,6 +13,7 @@ $brand: (
   light: #ededef,
   gray: #545454,
   black: #231f20,
+  very-black: oklch(0.13 0.028 261.692),
   white: #ffffff,
 );