@kth/style 0.0.1-1

package/README.md

@@ -0,0 +1,24 @@
+# @kth/style
+
+**WORK IN PROGRESS**. Styles and components used across KTH.
+
+## Requirements
+
+- Sass
+- React
+
+## Getting started
+
+1. Install `@kth/style` from npm:
+
+   ```
+   npm i @kth/style
+   ```
+
+2. In your Sass file, import and include the sizes mixin:
+
+   ```scss
+   @use "node_modules/@kth/style/scss/utils" as sizes;
+
+   @include utils.sizes;
+   ```

package/dist/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/Button.js

@@ -0,0 +1,15 @@
+"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;

package/dist/Tabs.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export declare function NavigationTabs({ id, children, url, defaultValue, }: {
+    id: string;
+    children: React.ReactElement<TabProps>[];
+    url?: "query" | "none";
+    defaultValue?: string;
+}): JSX.Element;
+export declare function ContentTabs({ id, children, url, defaultValue, }: {
+    id: string;
+    children: React.ReactElement<TabProps>[];
+    url?: "hash" | "none";
+    defaultValue?: string;
+}): JSX.Element;
+interface TabProps {
+    children?: React.ReactNode;
+    id: string;
+    title: string;
+}
+export declare function Tab({ children, id }: TabProps): JSX.Element;
+export {};

package/dist/Tabs.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.ContentTabs = exports.NavigationTabs = void 0;
+const react_1 = require("react");
+/** Get current URL hash */
+function useUrlHash() {
+    const [currentHash, setCurrentHash] = react_1.default.useState("");
+    react_1.default.useEffect(() => {
+        function updateValue(event) {
+            const hash = new URL(event?.newURL || location.href).hash.slice(1);
+            setCurrentHash(hash);
+        }
+        window.addEventListener("hashchange", updateValue);
+        updateValue();
+        return () => {
+            window.removeEventListener("hashchange", updateValue);
+        };
+    });
+    return currentHash;
+}
+/** Keep in sync the value of the query parameter `param` */
+function useUrlQuery(param) {
+    const [value, _setValue] = react_1.default.useState("");
+    react_1.default.useEffect(() => {
+        function updateValue() {
+            const url = new URL(location.href);
+            const value = url.searchParams.get(param) || "";
+            _setValue(value);
+        }
+        window.addEventListener("popstate", updateValue);
+        updateValue();
+        return () => {
+            window.removeEventListener("popstate", updateValue);
+        };
+    }, [param]);
+    function setValue(newValue) {
+        const url = new URL(location.href);
+        url.searchParams.set(param, newValue);
+        history.pushState(undefined, "", url);
+        _setValue(newValue);
+    }
+    return [value, setValue];
+}
+function NavigationTabs({ id, children, url = "query", defaultValue, }) {
+    const containerRef = react_1.default.useRef(null);
+    const [queryTab, setQueryTab] = useUrlQuery(id);
+    const [manualTab, setManualTab] = react_1.default.useState(defaultValue || "");
+    const activeTab = url === "query" ? queryTab : manualTab;
+    let activeTabIndex = children.findIndex((c) => c.props.id === activeTab);
+    if (activeTabIndex === -1) {
+        activeTabIndex = 0;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: containerRef, className: "kth-navigation-tabs", id: id },
+            react_1.default.createElement("ul", { className: "kth-navigation-tabs__tablist" }, children.map((child, index) => (react_1.default.createElement("li", { key: child.props.id },
+                react_1.default.createElement("button", { className: "kth-navigation-tabs__tab", "aria-selected": index === activeTabIndex, onClick: (event) => {
+                        event.preventDefault();
+                        if (url === "query") {
+                            setQueryTab(child.props.id);
+                        }
+                        else {
+                            setManualTab(child.props.id);
+                        }
+                    } }, child.props.title)))))),
+        children[activeTabIndex]));
+}
+exports.NavigationTabs = NavigationTabs;
+function ContentTabs({ id, children, url = "hash", defaultValue, }) {
+    const containerRef = react_1.default.useRef(null);
+    const [manualActiveTab, setManualActiveTab] = react_1.default.useState("");
+    const hashActiveTab = useUrlHash() || defaultValue || "";
+    const activeTab = url === "hash" ? hashActiveTab : manualActiveTab;
+    let activeTabIndex = children.findIndex((c) => c.props.id === activeTab);
+    if (activeTabIndex === -1) {
+        activeTabIndex = 0;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: containerRef, className: "kth-content-tabs", id: id },
+            react_1.default.createElement("ul", { className: "kth-content-tabs__tablist" }, children.map((child, index) => (react_1.default.createElement("li", { key: child.props.id },
+                react_1.default.createElement("a", { href: `#${child.props.id}`, className: "kth-content-tabs__tab", "aria-selected": index === activeTabIndex, onClick: (event) => {
+                        if (url === "none") {
+                            event.preventDefault();
+                            setManualActiveTab(child.props.id);
+                        }
+                    } }, child.props.title)))))),
+        children[activeTabIndex]));
+}
+exports.ContentTabs = ContentTabs;
+function Tab({ children, id }) {
+    return react_1.default.createElement("div", { id: id }, children);
+}
+exports.Tab = Tab;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@kth/style",
+  "version": "0.0.1-1",
+  "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: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"
+  },
+  "files": [
+    "scss",
+    "dist"
+  ],
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-vite": "^7.0.6",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.0-beta.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-storybook": "^0.6.11",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.6",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.0"
+  }
+}

package/scss/components/content-tabs.scss

@@ -0,0 +1,56 @@
+@use "../tokens/" as t;
+
+$border-secondary: 1px solid t.$color-neutral-10;
+
+@layer kth-style {
+  .kth-content-tabs {
+    overflow: auto;
+    padding-block: t.$space-4;
+  }
+
+  .kth-content-tabs__tablist {
+    position: sticky;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: end;
+    gap: t.$space-4;
+    min-width: 100%;
+    border-block-end: $border-secondary;
+
+    li {
+      margin-bottom: -1px;
+    }
+  }
+  .kth-content-tabs__tab {
+    box-sizing: border-box;
+    padding-inline: var(--kth-0-button-padding-inline);
+    padding-block: calc(var(--kth-0-button-padding-block) - 1px);
+    border-block-width: 1px;
+    white-space: nowrap;
+    display: block;
+    text-decoration: none;
+    margin-block-end: -1px;
+    color: t.$color-neutral-10;
+    border: $border-secondary;
+    border-radius: t.border-radius(8 8 0 0);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &[aria-selected="false"] {
+      background: t.$color-neutral-2;
+    }
+
+    &[aria-selected="true"] {
+      background: t.$color-neutral-0;
+      padding-block-start: calc(
+        var(--kth-0-button-padding-block) + #{t.$space-8} - 1px
+      );
+      border-block-end-color: transparent;
+    }
+  }
+}

package/scss/components/navigation-tabs.scss

@@ -0,0 +1,49 @@
+@use "../tokens/" as t;
+
+$border-secondary: 1px solid t.$color-neutral-10;
+
+@layer kth-style {
+  .kth-navigation-tabs {
+    overflow: auto;
+  }
+
+  .kth-navigation-tabs__tablist {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: end;
+    gap: t.$space-4;
+    min-width: 100%;
+    border-block-end: $border-secondary;
+  }
+
+  .kth-navigation-tabs__tab {
+    font: inherit;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    padding-inline: var(--kth-0-button-padding-inline);
+    padding-block: var(--kth-0-button-padding-block);
+    white-space: nowrap;
+    display: block;
+    text-decoration: none;
+    color: t.$color-neutral-10;
+    margin-block-end: -1px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &[aria-selected="false"] {
+      color: t.$color-neutral-10;
+    }
+
+    &[aria-selected="true"] {
+      color: t.$color-primary-5;
+      padding-block-end: calc(var(--kth-0-button-padding-block) - 3px);
+      border-block-end: 3px t.$color-primary-5 solid;
+    }
+  }
+}

package/scss/globals.scss

@@ -0,0 +1,5 @@
+@use "utils/reset";
+@use "utils/sizes";
+
+@include reset.reset();
+@include sizes.sizes();

package/scss/tokens/_colors.scss

@@ -0,0 +1,20 @@
+// 1. Colors
+$color-neutral-10: #000;
+$color-neutral-6: #65656c;
+$color-neutral-2: #d4d4d4;
+$color-neutral-1: #f6f6f6;
+$color-neutral-0: #fff;
+
+$color-primary-6: #006388;
+$color-primary-5: #007fae;
+
+$color-success-6: #3f6600;
+$color-success-5: #528400;
+$color-success-1: #dff0d8;
+
+$color-danger-6: #b52c17;
+$color-danger-5: #d4351c;
+$color-danger-1: #f5e6e6;
+
+$color-warning-3: #fab919;
+$color-warning-1: #fcf8e3;

package/scss/tokens/_spacing.en.md

@@ -0,0 +1,40 @@
+---
+lang: en
+---
+
+# How to use
+
+We provide two ways for consuming these values:
+
+- With the utility functions `padding`, `margin` and `gap`
+- With the variables `$space-<number>`
+
+## Utility functions `padding`, `margin` and `gap`
+
+All three functions accept an arbitrary number of arguments, so they can be used in shorthand and non-shorthand CSS properties.
+
+```scss
+@use "@kth/style/scss/tokens" as t;
+
+.an-element {
+  // Passing two values at the same time
+  padding: t.padding(2 8);
+
+  // Passing one value only
+  margin-inline-end: t.margin(0);
+}
+```
+
+All three functions will throw an error if the passed value is invalid. Accepted values are: 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64 and 80.
+
+## Variables `$space-<value>`
+
+This package also exports variables named `$space-<value>` (example: `$space-2`) which can be convenient if you need a single value.
+
+```scss
+@use "@kth/style/scss/tokens" as t;
+
+.an-element {
+  padding-top: t.$space-4;
+}
+```

package/scss/tokens/_spacing.scss

@@ -0,0 +1,81 @@
+@use "sass:list";
+@use "sass:map";
+/// Design Tokens for spacing
+
+$space-0: 0;
+$space-2: 0.125rem;
+$space-4: 0.25rem;
+$space-6: 0.375rem;
+$space-8: 0.5rem;
+$space-12: 0.75rem;
+$space-16: 1rem;
+$space-20: 1.25rem;
+$space-24: 1.5rem;
+$space-32: 2rem;
+$space-40: 2.5rem;
+$space-48: 3rem;
+$space-64: 4rem;
+$space-80: 5rem;
+
+// Convinience map that stores every value. Used internally
+$_all_spaces: (
+  0: $space-0,
+  2: $space-2,
+  4: $space-4,
+  6: $space-6,
+  8: $space-8,
+  12: $space-12,
+  16: $space-16,
+  20: $space-20,
+  24: $space-24,
+  32: $space-32,
+  40: $space-40,
+  48: $space-48,
+  64: $space-64,
+  80: $space-80,
+);
+
+/// Converts a single KTH Style space value to rem.
+/// Throws an Error if the argument is not part of the valid spaces
+///
+/// This function is used internally.
+@function _space_to_rem($space) {
+  @if map.get($_all_spaces, $space) == null {
+    @error "#{$space} is not a valid spacing. Use one of the following instead: #{$_all_spaces}";
+  }
+
+  @return map.get($_all_spaces, $space);
+}
+
+/// Converts a list of "KTH Style space" value to their rem values.
+/// Throws an Error if any element is not valid
+///
+/// This function is used internally.
+@function _spaces_to_rem($list-of-spaces) {
+  $list-of-rem: ();
+
+  @each $element in $list-of-spaces {
+    $list-of-rem: list.append($list-of-rem, _space_to_rem($element));
+  }
+
+  @return $list-of-rem;
+}
+
+/// Converts a list of "KTH Style padding" values to actual CSS measurements.
+@function padding($list) {
+  @return _spaces_to_rem($list);
+}
+
+/// Converts a list of "KTH Style margin" values to actual CSS measurements..
+@function margin($list) {
+  @return _spaces_to_rem($list);
+}
+
+/// Converts a list of "KTH Style gap" values to actual CSS measurements..
+@function gap($list) {
+  @return _spaces_to_rem($list);
+}
+
+@function border-radius($list) {
+  @return _spaces_to_rem($list);
+}

package/scss/tokens/_typography.scss

@@ -0,0 +1,70 @@
+// 2. Typography
+
+// Base tokens
+// All allowed single values for different properties
+// Name convention: `font-<property>-identifier`
+$font-family-sans: "Open Sans", sans-serif;
+$font-family-serif: Georgia, serif;
+
+// 2.2. Font sizes
+$font-size-base: 1rem;
+$font-size-l: 1.25rem;
+$font-size-xl: 1.5rem;
+$font-size-2xl: 1.875rem;
+$font-size-3xl: 2.75rem;
+
+// 2.3. Line heights
+$font-lh-base: 1.5rem;
+$font-lh-l: 2rem;
+$font-lh-xl: 2.25rem;
+$font-lh-2xl: 3rem;
+$font-lh-3xl: 4rem;
+
+// 2.4. Font weights
+$font-weight-normal: 400;
+$font-weight-bold: 600;
+
+// 2.5. Combinations of font size, line height and font weight
+@mixin font-h1 {
+  font-weight: $font-weight-bold;
+  font-size: $font-size-3xl;
+  line-height: $font-lh-3xl;
+}
+
+@mixin font-h2 {
+  font-weight: $font-weight-bold;
+  font-size: $font-size-2xl;
+  line-height: $font-lh-2xl;
+}
+
+@mixin font-h3 {
+  font-weight: $font-weight-bold;
+  font-size: $font-size-xl;
+  line-height: $font-lh-xl;
+}
+
+@mixin font-h4 {
+  font-weight: $font-weight-bold;
+  font-size: $font-size-l;
+  line-height: $font-lh-l;
+}
+
+@mixin font-h5 {
+  font-weight: $font-weight-bold;
+  font-size: $font-size-base;
+  line-height: $font-lh-base;
+}
+
+@mixin font-body-copy {
+  font-family: $font-serif;
+  font-weight: 400;
+  font-size: g.rem(18);
+  line-height: g.rem(28);
+}
+
+@mixin font-body-lead {
+  font-family: $font-serif;
+  font-weight: 400;
+  font-size: g.rem(22);
+  line-height: g.rem(32);
+}

package/scss/tokens/index.scss

@@ -0,0 +1,6 @@
+/// List of all KTH Style Design Tokens
+@forward "./typography";
+@forward "./spacing";
+@forward "./colors";
+
+@use "./spacing" as spacing;

package/scss/utils/reset.scss

@@ -0,0 +1,244 @@
+@use "../tokens/index.scss" as t;
+
+/// 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
+@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 */
+  }
+
+  /* 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;
+  }
+
+  h1 {
+    @include t.font-h1();
+  }
+
+  h2 {
+    @include t.font-h2();
+  }
+
+  h3 {
+    @include t.font-h3();
+  }
+
+  h4 {
+    @include t.font-h4();
+  }
+
+  h5,
+  h6 {
+    @include t.font-h5();
+  }
+
+  /* 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. 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 */
+  }
+
+  /* Text-level semantics
+   ========================================================================== */
+  a {
+    // color: t.$color-blue-5;
+    text-decoration: none;
+
+    &: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 */
+  }
+
+  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 */
+  }
+
+  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;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* 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 */
+  }
+
+  // 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;
+  }
+
+  // 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;
+  }
+
+  // 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 */
+  }
+
+  // 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;
+  }
+
+  // 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;
+  }
+
+  // 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
+   ========================================================================== */
+  // Add the correct display in Edge, IE 10+, and Firefox.
+  details {
+    display: block;
+  }
+
+  // Add the correct display in all browsers.
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+   ========================================================================== */
+
+  // Add the correct display
+  [hidden] {
+    display: none;
+  }
+}

package/scss/utils/sizes.scss

@@ -0,0 +1,19 @@
+@use "../tokens" as t;
+
+@mixin sizes {
+  :root {
+    // Padding (block and inline axis) for clickable elements
+    --kth-0-button-padding-block: #{t.$space-8};
+    --kth-0-button-padding-inline: #{t.$space-16};
+  }
+
+  .kth-0-normal {
+    --kth-0-button-padding-block: #{t.$space-8};
+    --kth-0-button-padding-inline: #{t.$space-16};
+  }
+
+  .kth-0-small {
+    --kth-0-button-padding-block: #{t.$space-4};
+    --kth-0-button-padding-inline: #{t.$space-12};
+  }
+}