@kth/style 0.0.1 → 0.0.3

package/dist/cjs/components/Something.d.ts

@@ -0,0 +1 @@
+export declare function hello2(): void;

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export { Tab, ContentTabs, NavigationTabs } from "./components/Tabs";

package/dist/{Tabs.js → cjs/index.js}

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.ContentTabs = exports.NavigationTabs = exports.GenericTabs = void 0;
-const react_1 = require("react");
+'use strict';
+
+var React = require('react');
+
 function getValueFromUrl(key) {
     const url = new URL(location.href);
     if (key) {
@@ -19,9 +19,9 @@ function getValueFromUrl(key) {
  * as `React.useState` if false)
  */
 function useUrlState(defaultValue = "", key = "", enableUrl = false) {
-    const initialValue = getValueFromUrl(key) || defaultValue;
-    const [value, _setValue] = react_1.default.useState(initialValue);
-    react_1.default.useEffect(() => {
+    const initialValue = (enableUrl && getValueFromUrl(key)) || defaultValue;
+    const [value, _setValue] = React.useState(initialValue);
+    React.useEffect(() => {
         function updateValue() {
             if (enableUrl) {
                 _setValue(getValueFromUrl(key) || defaultValue);
@@ -79,34 +79,34 @@ function useFocus(element) {
  * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
  */
 function GenericTabs({ classPrefix, children, id, defaultValue, url = "none", }) {
-    const ref = react_1.default.useRef(null);
+    const ref = React.useRef(null);
     const [activeTab, setActiveTab] = useUrlState(defaultValue, url === "query" ? id : "", url === "query" || url === "hash");
     let activeTabIndex = children.findIndex((c) => c.props.id === activeTab);
     if (activeTabIndex === -1) {
         activeTabIndex = 0;
     }
     useFocus(ref.current?.querySelector(`#${activeTab}-tab`));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { ref: ref, className: `${classPrefix}`, id: id },
-            react_1.default.createElement("ul", { className: `${classPrefix}__tablist`, role: "tablist" }, children.map((child, index) => (react_1.default.createElement("li", { role: "presentation", className: `${classPrefix}__tab-element` },
-                react_1.default.createElement("button", { key: child.props.id, role: "tab", "aria-selected": index === activeTabIndex, "aria-controls": child.props.id, id: `${child.props.id}-tab`, className: `${classPrefix}__tab`, tabIndex: index === activeTabIndex ? 0 : -1, onKeyDown: (event) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: ref, className: `${classPrefix}`, id: id },
+            React.createElement("ul", { className: `${classPrefix}__tablist`, role: "tablist" }, children.map((child, index) => (React.createElement("li", { role: "presentation", className: `${classPrefix}__tab-element` },
+                React.createElement("button", { key: child.props.id, role: "tab", "aria-selected": index === activeTabIndex, "aria-controls": child.props.id, id: `${child.props.id}-tab`, className: `${classPrefix}__tab`, tabIndex: index === activeTabIndex ? 0 : -1, onKeyDown: (event) => {
                         handleKeyDown(event, index, children, setActiveTab);
                     }, onClick: (event) => {
                         event.preventDefault();
                         setActiveTab(child.props.id);
                     } }, child.props.title)))))),
-        children.map((child, index) => (react_1.default.createElement("div", { className: `${classPrefix}__tabpanel`, role: "tabpanel", "aria-labelledby": `${child.props.id}-tab`, id: child.props.id, key: index, hidden: index !== activeTabIndex }, child)))));
+        children.map((child, index) => (React.createElement("div", { className: `${classPrefix}__tabpanel`, role: "tabpanel", "aria-labelledby": `${child.props.id}-tab`, id: child.props.id, key: index, hidden: index !== activeTabIndex }, child)))));
 }
-exports.GenericTabs = GenericTabs;
 function NavigationTabs({ id, children, url = "query", defaultValue, }) {
-    return (react_1.default.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-navigation-tabs" }));
+    return (React.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-navigation-tabs" }));
 }
-exports.NavigationTabs = NavigationTabs;
 function ContentTabs({ id, children, url = "hash", defaultValue, }) {
-    return (react_1.default.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-content-tabs" }));
+    return (React.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-content-tabs" }));
 }
-exports.ContentTabs = ContentTabs;
 function Tab({ children }) {
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
 }
+
+exports.ContentTabs = ContentTabs;
+exports.NavigationTabs = NavigationTabs;
 exports.Tab = Tab;

package/dist/cjs/stories/ContentTabs.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from "@storybook/react";
+import { ContentTabs } from "../components/Tabs";
+import "../../scss/globals.scss";
+import "../../scss/components/content-tabs.scss";
+declare const meta: {
+    title: string;
+    component: typeof ContentTabs;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;

package/dist/cjs/stories/NavigationTabs.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/react";
+import { NavigationTabs } from "../components/Tabs";
+import "../../scss/globals.scss";
+import "../../scss/components/navigation-tabs.scss";
+declare const meta: {
+    title: string;
+    component: typeof NavigationTabs;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/esm/components/Button.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import "./button.css";
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element;
+export {};

package/dist/esm/components/Something.d.ts

@@ -0,0 +1 @@
+export declare function hello2(): void;

package/dist/esm/components/Tabs.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+interface TabProps {
+    children?: React.ReactNode;
+    id: string;
+    title: string;
+}
+interface GenericTabsProps {
+    classPrefix: string;
+    children: React.ReactElement<TabProps>[];
+    id: string;
+    defaultValue?: string;
+    url: "query" | "hash" | "none";
+}
+interface NavigationTabsProps {
+    id: string;
+    children: React.ReactElement<TabProps>[];
+    url?: "query" | "none";
+    defaultValue?: string;
+}
+interface ContentTabsProps {
+    id: string;
+    children: React.ReactElement<TabProps>[];
+    url?: "hash" | "none";
+    defaultValue?: string;
+}
+/**
+ * Highly customizable Tabs component made for testing purposes.
+ * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
+ */
+export declare function GenericTabs({ classPrefix, children, id, defaultValue, url, }: GenericTabsProps): JSX.Element;
+export declare function NavigationTabs({ id, children, url, defaultValue, }: NavigationTabsProps): JSX.Element;
+export declare function ContentTabs({ id, children, url, defaultValue, }: ContentTabsProps): JSX.Element;
+export declare function Tab({ children }: TabProps): JSX.Element;
+export {};

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export { Tab, ContentTabs, NavigationTabs } from "./components/Tabs";

package/dist/esm/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+
+function getValueFromUrl(key) {
+    const url = new URL(location.href);
+    if (key) {
+        return url.searchParams.get(key);
+    }
+    else {
+        return url.hash === "" ? null : url.hash.slice(1);
+    }
+}
+/**
+ * Sync state with URL hash or query parameter.
+ * @param defaultValue Default state value
+ * @param key Query parameter to use. Hash if empty
+ * @param enableUrl Will sync with URL if true (this function behaves the same
+ * as `React.useState` if false)
+ */
+function useUrlState(defaultValue = "", key = "", enableUrl = false) {
+    const initialValue = (enableUrl && getValueFromUrl(key)) || defaultValue;
+    const [value, _setValue] = React.useState(initialValue);
+    React.useEffect(() => {
+        function updateValue() {
+            if (enableUrl) {
+                _setValue(getValueFromUrl(key) || defaultValue);
+            }
+        }
+        window.addEventListener("popstate", updateValue);
+        return () => {
+            window.removeEventListener("popstate", updateValue);
+        };
+    });
+    function setValue(value) {
+        _setValue(value);
+        const url = new URL(location.href);
+        if (key !== "") {
+            url.searchParams.set(key, value);
+        }
+        else {
+            url.hash = "#" + value;
+        }
+        if (enableUrl) {
+            history.pushState(undefined, "", url);
+        }
+    }
+    return [value, setValue];
+}
+function handleKeyDown(event, index, tabs, setActiveTab) {
+    event.preventDefault();
+    switch (event.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+            if (index > 0) {
+                setActiveTab(tabs[index - 1].props.id);
+            }
+            break;
+        case "ArrowRight":
+        case "ArrowDown":
+            if (index < tabs.length - 1) {
+                setActiveTab(tabs[index + 1].props.id);
+            }
+            break;
+        case "Home":
+            setActiveTab(tabs[0].props.id);
+            break;
+        case "End":
+            setActiveTab(tabs[tabs.length - 1].props.id);
+            break;
+    }
+}
+function useFocus(element) {
+    element?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    element?.focus();
+}
+/**
+ * Highly customizable Tabs component made for testing purposes.
+ * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
+ */
+function GenericTabs({ classPrefix, children, id, defaultValue, url = "none", }) {
+    const ref = React.useRef(null);
+    const [activeTab, setActiveTab] = useUrlState(defaultValue, url === "query" ? id : "", url === "query" || url === "hash");
+    let activeTabIndex = children.findIndex((c) => c.props.id === activeTab);
+    if (activeTabIndex === -1) {
+        activeTabIndex = 0;
+    }
+    useFocus(ref.current?.querySelector(`#${activeTab}-tab`));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: ref, className: `${classPrefix}`, id: id },
+            React.createElement("ul", { className: `${classPrefix}__tablist`, role: "tablist" }, children.map((child, index) => (React.createElement("li", { role: "presentation", className: `${classPrefix}__tab-element` },
+                React.createElement("button", { key: child.props.id, role: "tab", "aria-selected": index === activeTabIndex, "aria-controls": child.props.id, id: `${child.props.id}-tab`, className: `${classPrefix}__tab`, tabIndex: index === activeTabIndex ? 0 : -1, onKeyDown: (event) => {
+                        handleKeyDown(event, index, children, setActiveTab);
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        setActiveTab(child.props.id);
+                    } }, child.props.title)))))),
+        children.map((child, index) => (React.createElement("div", { className: `${classPrefix}__tabpanel`, role: "tabpanel", "aria-labelledby": `${child.props.id}-tab`, id: child.props.id, key: index, hidden: index !== activeTabIndex }, child)))));
+}
+function NavigationTabs({ id, children, url = "query", defaultValue, }) {
+    return (React.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-navigation-tabs" }));
+}
+function ContentTabs({ id, children, url = "hash", defaultValue, }) {
+    return (React.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-content-tabs" }));
+}
+function Tab({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+
+export { ContentTabs, NavigationTabs, Tab };

package/dist/esm/stories/ContentTabs.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from "@storybook/react";
+import { ContentTabs } from "../components/Tabs";
+import "../../scss/globals.scss";
+import "../../scss/components/content-tabs.scss";
+declare const meta: {
+    title: string;
+    component: typeof ContentTabs;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;

package/dist/esm/stories/NavigationTabs.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/react";
+import { NavigationTabs } from "../components/Tabs";
+import "../../scss/globals.scss";
+import "../../scss/components/navigation-tabs.scss";
+declare const meta: {
+    title: string;
+    component: typeof NavigationTabs;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@kth/style",
-  "version": "0.0.1",
+  "version": "0.0.3",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "scripts": {
     "clean": "rm -rf dist",
     "dev": "storybook dev -p 6006",
     "build": "npm run clean && npm run build:components && npm run build:storybook",
-    "build:components": "tsc",
+    "build:components": "rollup -c",
     "build:storybook": "storybook build -o ../../apps/style-web/public/storybook",
     "test": "npm run test:lint",
     "test:lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
@@ -15,6 +17,9 @@
     "dist"
   ],
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@storybook/addon-essentials": "^7.0.6",
     "@storybook/addon-interactions": "^7.0.6",
     "@storybook/addon-links": "^7.0.6",
@@ -34,6 +39,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup": "^3.21.4",
     "storybook": "^7.0.6",
     "typescript": "^5.0.2",
     "vite": "^4.3.0"

package/scss/components/content-tabs.scss

@@ -10,7 +10,7 @@ $border-secondary: 1px solid t.$color-neutral-10;
     top: calc(var(--kpm-bar-height, 0rem));
     background: t.$color-neutral-0;
 
-    &__tablist {
+    ul[role="tablist"] {
       list-style: none;
       padding: 0;
       margin: 0;
@@ -22,11 +22,11 @@ $border-secondary: 1px solid t.$color-neutral-10;
       border-block-end: $border-secondary;
     }
 
-    &__tab-element {
+    li {
       display: flex;
     }
 
-    &__tab {
+    button[role="tab"] {
       box-sizing: border-box;
       padding-inline: var(--kth-0-clickable-padding-inline);
       padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
@@ -38,6 +38,10 @@ $border-secondary: 1px solid t.$color-neutral-10;
       border: $border-secondary;
       border-radius: t.border-radius(8 8 0 0);
 
+      &:focus {
+        outline-offset: -#{t.$space-4};
+      }
+
       &:hover {
         text-decoration: underline;
       }
@@ -56,7 +60,7 @@ $border-secondary: 1px solid t.$color-neutral-10;
       }
     }
 
-    &__tabpanel {
+    [role="tabpanel"] {
       border-inline: $border-secondary;
       border-block-end: $border-secondary;
     }

package/scss/components/navigation-tabs.scss

@@ -6,7 +6,7 @@ $border-secondary: 1px solid t.$color-neutral-10;
   .kth-navigation-tabs {
     overflow: auto;
 
-    &__tablist {
+    [role="tablist"] {
       list-style: none;
       padding: 0;
       margin: 0;
@@ -18,7 +18,7 @@ $border-secondary: 1px solid t.$color-neutral-10;
       border-block-end: $border-secondary;
     }
 
-    &__tab {
+    [role="tab"] {
       font: inherit;
       background: none;
       border: none;
@@ -31,6 +31,10 @@ $border-secondary: 1px solid t.$color-neutral-10;
       color: t.$color-neutral-10;
       margin-block-end: -1px;
 
+      &:focus {
+        outline-offset: -#{t.$space-4};
+      }
+
       &:hover {
         text-decoration: underline;
       }

package/scss/globals.scss

@@ -1,7 +1,5 @@
 @use "utils/reset";
 @use "utils/sizes";
 
-@layer kth-style {
-  @include reset.reset();
-  @include sizes.sizes();
-}
+@include reset.reset();
+@include sizes.sizes();

package/scss/tokens/_typography.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 // 2. Typography
 
 // Base tokens
@@ -56,15 +57,15 @@ $font-weight-bold: 600;
 }
 
 @mixin font-body-copy {
-  font-family: $font-serif;
+  font-family: $font-family-serif;
   font-weight: 400;
-  font-size: g.rem(18);
-  line-height: g.rem(28);
+  font-size: math.div(18rem, 16);
+  line-height: math.div(28rem, 16);
 }
 
 @mixin font-body-lead {
-  font-family: $font-serif;
+  font-family: $font-family-sans;
   font-weight: 400;
-  font-size: g.rem(22);
-  line-height: g.rem(32);
+  font-size: math.div(22rem, 16);
+  line-height: math.div(32rem, 16);
 }

package/scss/utils/prose.scss

@@ -0,0 +1,109 @@
+@use "../tokens" as t;
+
+/// This mixin provides CSS for webpages with lots of prose text.
+///
+/// It includes:
+/// - CSS for tags like <p>, <h1-6>, <code>, <pre>, <ul> and <li>
+/// - CSS classes like ".lead"
+@mixin prose {
+  @layer kth-style {
+    p {
+      @include t.font-body-copy;
+      margin-block: t.$space-20;
+      max-width: 60ch;
+    }
+
+    .lead {
+      @include t.font-body-lead;
+      margin-block-start: t.$space-12;
+      margin-block-end: t.$space-16;
+    }
+
+    h1 {
+      margin: t.margin(32 0 16 0);
+    }
+
+    h2 {
+      margin: t.margin(32 0 16 0);
+    }
+
+    h3 {
+      margin: t.margin(32 0 8 0);
+    }
+
+    h4 {
+      margin: t.margin(32 0 4 0);
+    }
+
+    li {
+      @include t.font-body-copy;
+      max-width: 60ch;
+      margin: t.margin(8 0);
+    }
+
+    ol,
+    ul {
+      padding-inline-start: t.$space-32;
+
+      li {
+        padding-inline-start: t.$space-6;
+      }
+    }
+
+    h1 + *,
+    h2 + *,
+    h3 + * {
+      margin-block-start: 0;
+    }
+
+    table {
+      table-layout: auto;
+      text-align: left;
+      margin: 2rem 0;
+      border-collapse: collapse;
+
+      display: block;
+      overflow-x: auto;
+    }
+
+    thead {
+      border-bottom: 1px solid t.$color-neutral-2;
+
+      th {
+        padding: t.padding(0 8 8 8);
+        font-weight: 600;
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid t.$color-neutral-2;
+
+        &:last-child {
+          border-bottom-width: 0;
+        }
+      }
+
+      td {
+        vertical-align: baseline;
+        padding: t.$space-8;
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+  }
+}

package/scss/utils/reset.scss

@@ -3,242 +3,261 @@
 /// Adaptation of normalize.css v8.0.1
 /// github.com/necolas/normalize.css
 ///
-/// The aim of this mixin is to normalize all browsers and at the same time
-/// provide basic global styles for everything
-///
-/// Use this mixin if you wanted a **scoped** version of the mixin, i.e., if you
-/// want the reset to be applied to a part of the document.
-///
-/// If you want a global version of this, use the `reset` file outside of the
-/// `globals` directory
+/// This mixin normalizes all browsers and provides basic global styles for all
+/// HTML elements. This mixin only styles elements in isolation
 @mixin reset {
-  // HTML
-  // 1. Prevent adjustments of font size after orientation changes in iOS.
-  html {
-    line-height: t.$font-lh-base;
-    -webkit-text-size-adjust: 100%; /* 1 */
-  }
+  @layer kth-style {
+    // HTML
+    // 1. Prevent adjustments of font size after orientation changes in iOS.
+    html {
+      line-height: t.$font-lh-base;
+      -webkit-text-size-adjust: 100%; /* 1 */
+    }
 
-  /* Sections
+    /* Sections
    ========================================================================== */
 
-  // Body
-  // 1. Remove the margin in all browsers
-  // 2. Default fonts
-  body {
-    margin: 0;
-    font-family: t.$font-family-sans;
-    font-weight: t.$font-weight-normal;
-    line-height: t.$font-lh-base;
-  }
+    // Body
+    // 1. Remove the margin in all browsers
+    // 2. Default fonts
+    body {
+      margin: 0;
+      font-family: t.$font-family-sans;
+      font-weight: t.$font-weight-normal;
+      line-height: t.$font-lh-base;
+    }
 
-  h1 {
-    @include t.font-h1();
-  }
+    h1 {
+      @include t.font-h1();
+    }
 
-  h2 {
-    @include t.font-h2();
-  }
+    h2 {
+      @include t.font-h2();
+    }
 
-  h3 {
-    @include t.font-h3();
-  }
+    h3 {
+      @include t.font-h3();
+    }
 
-  h4 {
-    @include t.font-h4();
-  }
+    h4 {
+      @include t.font-h4();
+    }
 
-  h5,
-  h6 {
-    @include t.font-h5();
-  }
+    h5,
+    h6 {
+      @include t.font-h5();
+    }
 
-  /* Grouping content
+    /* Grouping content
    ========================================================================== */
 
-  // 1. Add the correct box sizing in Firefox.
-  // 2. Show the overflow in Edge and IE.
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
+    // 1. Add the correct box sizing in Firefox.
+    // 2. Show the overflow in Edge and IE.
+    hr {
+      box-sizing: content-box; /* 1 */
+      height: 0; /* 1 */
+      border: 0;
+      border-top: 1px t.$color-neutral-2 solid;
+      margin: t.$space-32 0;
+      overflow: visible; /* 2 */
+    }
 
-  // 1. Correct the inheritance and scaling of font size in all browsers.
-  // 2. Correct the odd `em` font sizing in all browsers.
-  pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
+    // 1. Correct the inheritance and scaling of font size in all browsers.
+    // 2. Correct the odd `em` font sizing in all browsers.
+    pre {
+      font-family: monospace, monospace; /* 1 */
+      font-size: 1em; /* 2 */
+    }
+
+    iframe {
+      border: none;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    figure {
+      margin: t.$space-32 0;
+    }
+
+    figcaption {
+      max-width: 70ch;
+      font-style: italic;
+      margin-block-start: t.$space-12;
+      font-size: 1rem;
+    }
 
-  /* Text-level semantics
+    /* Text-level semantics
    ========================================================================== */
-  a {
-    // color: t.$color-blue-5;
-    text-decoration: none;
+    a {
+      // color: t.$color-blue-5;
+      text-decoration: none;
 
-    &:hover {
-      text-decoration: underline;
+      &:hover {
+        text-decoration: underline;
+      }
     }
-  }
 
-  // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-  abbr[title] {
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-  }
+    // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+    abbr[title] {
+      text-decoration: underline; /* 2 */
+      text-decoration: underline dotted; /* 2 */
+    }
 
-  b,
-  strong {
-    font-weight: t.$font-weight-bold;
-  }
+    b,
+    strong {
+      font-weight: t.$font-weight-bold;
+    }
 
-  // 1. Correct the inheritance and scaling of font size in all browsers.
-  // 2. Correct the odd `em` font sizing in all browsers.
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
+    // 1. Correct the inheritance and scaling of font size in all browsers.
+    // 2. Correct the odd `em` font sizing in all browsers.
+    code,
+    kbd,
+    samp {
+      font-family: monospace, monospace; /* 1 */
+      font-size: 1em; /* 2 */
+    }
 
-  small {
-    // TODO: This is the default in normalize.css. Define the right one
-    font-size: 80%;
-  }
+    small {
+      // TODO: This is the default in normalize.css. Define the right one
+      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;
-  }
+    // 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;
-  }
+    sub {
+      bottom: -0.25em;
+    }
 
-  sup {
-    top: -0.5em;
-  }
+    sup {
+      top: -0.5em;
+    }
 
-  /* Forms
+    /* Forms
    ========================================================================== */
 
-  // 1. Change the font styles in all browsers.
-  // 2. Remove the margin in Firefox and Safari.
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: t.$font-lh-base; /* 1 */
-    margin: 0; /* 2 */
-  }
+    // 1. Change the font styles in all browsers.
+    // 2. Remove the margin in Firefox and Safari.
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      font-family: inherit; /* 1 */
+      font-size: 100%; /* 1 */
+      line-height: t.$font-lh-base; /* 1 */
+      margin: 0; /* 2 */
+    }
 
-  // Remove the inheritance of text transform in Edge, Firefox, and IE.
-  // Remove the inheritance of text transform in Firefox.
-  button,
-  select {
-    /* 1 */
-    text-transform: none;
-  }
+    // Remove the inheritance of text transform in Edge, Firefox, and IE.
+    // Remove the inheritance of text transform in Firefox.
+    button,
+    select {
+      /* 1 */
+      text-transform: none;
+    }
 
-  // Correct the inability to style clickable types in iOS and Safari.
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-  }
+    // Correct the inability to style clickable types in iOS and Safari.
+    button,
+    [type="button"],
+    [type="reset"],
+    [type="submit"] {
+      -webkit-appearance: button;
+    }
 
-  // Remove the inner border and padding in Firefox.
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
+    // Remove the inner border and padding in Firefox.
+    button::-moz-focus-inner,
+    [type="button"]::-moz-focus-inner,
+    [type="reset"]::-moz-focus-inner,
+    [type="submit"]::-moz-focus-inner {
+      border-style: none;
+      padding: 0;
+    }
 
-  // Restore the focus styles unset by the previous rule.
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
+    // Restore the focus styles unset by the previous rule.
+    button:-moz-focusring,
+    [type="button"]:-moz-focusring,
+    [type="reset"]:-moz-focusring,
+    [type="submit"]:-moz-focusring {
+      outline: 1px dotted ButtonText;
+    }
 
-  // Correct the padding in Firefox.
-  fieldset {
-    // TODO: unifiy with our own values
-    padding: 0.35em 0.75em 0.625em;
-  }
+    // Correct the padding in Firefox.
+    fieldset {
+      // TODO: unifiy with our own values
+      padding: 0.35em 0.75em 0.625em;
+    }
 
-  // 1. Correct the text wrapping in Edge and IE.
-  // 2. Correct the color inheritance from `fieldset` elements in IE.
-  // 3. Remove the padding so developers are not caught out when they zero out
-  //    `fieldset` elements in all browsers.
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
+    // 1. Correct the text wrapping in Edge and IE.
+    // 2. Correct the color inheritance from `fieldset` elements in IE.
+    // 3. Remove the padding so developers are not caught out when they zero out
+    //    `fieldset` elements in all browsers.
+    legend {
+      box-sizing: border-box; /* 1 */
+      color: inherit; /* 2 */
+      display: table; /* 1 */
+      max-width: 100%; /* 1 */
+      padding: 0; /* 3 */
+      white-space: normal; /* 1 */
+    }
 
-  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-  progress {
-    vertical-align: baseline;
-  }
+    // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+    progress {
+      vertical-align: baseline;
+    }
 
-  // Correct the cursor style of increment and decrement buttons in Chrome.
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
+    // Correct the cursor style of increment and decrement buttons in Chrome.
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-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 */
-  }
+    // 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.
-  [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
+    // Remove the inner padding in Chrome and Safari on macOS.
+    [type="search"]::-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 */
-  }
+    // 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 */
+    }
 
-  /* Interactive
+    /* Interactive
    ========================================================================== */
-  // Add the correct display in Edge, IE 10+, and Firefox.
-  details {
-    display: block;
-  }
+    // Add the correct display in Edge, IE 10+, and Firefox.
+    details {
+      display: block;
+    }
 
-  // Add the correct display in all browsers.
-  summary {
-    display: list-item;
-  }
+    // Add the correct display in all browsers.
+    summary {
+      display: list-item;
+    }
 
-  /* Misc
+    /* Misc
    ========================================================================== */
 
-  // Add the correct display
-  [hidden] {
-    display: none;
+    // Add the correct display
+    [hidden] {
+      display: none;
+    }
   }
 }

package/scss/utils/sizes.scss

@@ -1,19 +1,22 @@
 @use "../tokens" as t;
 
+/// This mixin provides CSS custom properties used for sizing all UI elements
 @mixin sizes {
-  :root {
-    // Padding (block and inline axis) for clickable elements
-    --kth-0-clickable-padding-block: #{t.$space-8};
-    --kth-0-clickable-padding-inline: #{t.$space-16};
-  }
+  @layer kth-style {
+    :root {
+      // Padding (block and inline axis) for clickable elements
+      --kth-0-clickable-padding-block: #{t.$space-8};
+      --kth-0-clickable-padding-inline: #{t.$space-16};
+    }
 
-  .kth-0-normal {
-    --kth-0-clickable-padding-block: #{t.$space-8};
-    --kth-0-clickable-padding-inline: #{t.$space-16};
-  }
+    .kth-0-normal {
+      --kth-0-clickable-padding-block: #{t.$space-8};
+      --kth-0-clickable-padding-inline: #{t.$space-16};
+    }
 
-  .kth-0-small {
-    --kth-0-clickable-padding-block: #{t.$space-4};
-    --kth-0-clickable-padding-inline: #{t.$space-12};
+    .kth-0-small {
+      --kth-0-clickable-padding-block: #{t.$space-4};
+      --kth-0-clickable-padding-inline: #{t.$space-12};
+    }
   }
 }

package/dist/Button.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const react_1 = require("react");
-require("./button.css");
-/**
- * Primary UI component for user interaction
- */
-const Button = ({ primary = false, size = "medium", backgroundColor, label, ...props }) => {
-    const mode = primary
-        ? "storybook-button--primary"
-        : "storybook-button--secondary";
-    return (react_1.default.createElement("button", { type: "button", className: ["storybook-button", `storybook-button--${size}`, mode].join(" "), style: { backgroundColor }, ...props }, label));
-};
-exports.Button = Button;