@kth/style 0.0.12 → 0.2.0

package/scss/utils/prose.scss

@@ -1,4 +1,4 @@
-@use "../tokens" as t;
+@use "../tokens/spacing.scss" as s;
 
 /// This mixin provides CSS for webpages with lots of prose text.
 ///
@@ -6,103 +6,115 @@
 /// - 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;
-    }
+  p {
+    margin-block: s.$space-20;
+    max-width: 60ch;
+  }
 
-    .lead {
-      @include t.font-body-lead;
-      margin-block-start: t.$space-12;
-      margin-block-end: t.$space-16;
-    }
+  .lead {
+    font: var(--font-lead);
+    margin-block-start: s.$space-12;
+    margin-block-end: s.$space-16;
+  }
 
-    h1 {
-      margin: t.margin(32 0 16 0);
-    }
+  h1,
+  h2,
+  h3,
+  h4 {
+    text-wrap: balance;
+  }
 
-    h2 {
-      margin: t.margin(32 0 16 0);
-    }
+  h1 {
+    font: var(--font-heading-xl);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-16;
+  }
 
-    h3 {
-      margin: t.margin(32 0 8 0);
-    }
+  h2 {
+    font: var(--font-heading-l);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-16;
+  }
 
-    h4 {
-      margin: t.margin(32 0 4 0);
-    }
+  h3 {
+    font: var(--font-heading-m);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-8;
+  }
 
-    li {
-      @include t.font-body-copy;
-      max-width: 60ch;
-      margin: t.margin(8 0);
-    }
+  h4 {
+    font: var(--font-heading-s);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-4;
+  }
 
-    ol,
-    ul {
-      padding-inline-start: t.$space-32;
+  li {
+    max-width: 60ch;
+    margin-block: s.$space-8;
+    margin-inline: 0;
+  }
 
-      li {
-        padding-inline-start: t.$space-6;
-      }
-    }
+  ol,
+  ul {
+    padding-inline-start: s.$space-32;
 
-    h1 + *,
-    h2 + *,
-    h3 + * {
-      margin-block-start: 0;
+    li {
+      padding-inline-start: s.$space-6;
     }
+  }
 
-    table {
-      table-layout: auto;
-      text-align: left;
-      margin: 2rem 0;
-      border-collapse: collapse;
+  h1 + *,
+  h2 + *,
+  h3 + * {
+    margin-block-start: 0;
+  }
 
-      display: block;
-      overflow-x: auto;
-    }
+  pre {
+    margin-block: s.$space-32;
+    padding-block: s.$space-16;
+    padding-inline: s.$space-24;
+  }
 
-    thead {
-      border-bottom: 1px solid t.$color-neutral-2;
+  table {
+    @include s.theme-dense;
+    table-layout: auto;
+    text-align: left;
+    margin-block: s.$space-32;
+    border-collapse: collapse;
+    overflow-x: auto;
+  }
 
-      th {
-        padding: t.padding(0 8 8 8);
-        font-weight: 600;
+  thead {
+    // TODO: border
+    th {
+      font: var(--font-label-s);
+      padding-block: var(--space-inner-block);
+      padding-inline: var(--space-inner-inline);
 
-        &:first-child {
-          padding-left: 0;
-        }
+      &:first-child {
+        padding-inline-start: 0;
+      }
 
-        &:last-child {
-          padding-right: 0;
-        }
+      &:last-child {
+        padding-inline-end: 0;
       }
     }
+  }
 
-    tbody {
-      tr {
-        border-bottom: 1px solid t.$color-neutral-2;
-
-        &:last-child {
-          border-bottom-width: 0;
-        }
-      }
+  tbody {
+    // TODO: border
 
-      td {
-        vertical-align: baseline;
-        padding: t.$space-8;
+    td {
+      vertical-align: baseline;
+      padding-block: var(--space-inner-block);
+      padding-inline: var(--space-inner-inline);
 
-        &:first-child {
-          padding-left: 0;
-        }
+      &:first-child {
+        padding-inline-start: 0;
+      }
 
-        &:last-child {
-          padding-right: 0;
-        }
+      &:last-child {
+        padding-inline-end: 0;
       }
     }
   }

package/scss/utils/reset.scss

@@ -1,263 +1,75 @@
-@use "../tokens/index.scss" as t;
+@use "../tokens/typography";
+@use "../tokens/spacing";
+@use "../tokens/colors";
 
-/// Adaptation of normalize.css v8.0.1
-/// github.com/necolas/normalize.css
+/// When true, the file generates CSS code for the entire document
 ///
-/// This mixin normalizes all browsers and provides basic global styles for all
-/// HTML elements. This mixin only styles elements in isolation
-@mixin reset {
-  @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
-   ========================================================================== */
-
-    // 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 */
-      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 */
-    }
-
-    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
-   ========================================================================== */
-    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;
-    }
+/// Set to `false` when importing if you want to use the mixin but don't want
+/// to apply reset to the entire document.
+$generate-css: true !default;
 
-    // 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 */
-    }
+/// Based on https://andy-bell.co.uk/a-more-modern-css-reset/
+@mixin reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-    // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-    progress {
-      vertical-align: baseline;
-    }
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
 
-    // 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;
-    }
+  a {
+    color: var(--color-tertiary);
+    text-underline-offset: spacing.$space-4;
+  }
 
-    // 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 */
-    }
+  img,
+  picture {
+    max-width: 100%;
+    height: auto;
+  }
 
-    // Remove the inner padding in Chrome and Safari on macOS.
-    [type="search"]::-webkit-search-decoration {
-      -webkit-appearance: none;
-    }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+}
 
-    // 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 */
+@if $generate-css {
+  @layer kth-style {
+    html {
+      -moz-text-size-adjust: none;
+      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
+      scrollbar-gutter: stable;
     }
 
-    /* Interactive
-   ========================================================================== */
-    // Add the correct display in Edge, IE 10+, and Firefox.
-    details {
-      display: block;
+    :root {
+      @include colors.theme-default;
+      @include spacing.theme-default;
+      @include typography.theme-default;
     }
 
-    // Add the correct display in all browsers.
-    summary {
-      display: list-item;
+    body {
+      color: var(--color-text);
+      background: var(--color-background);
+      font: var(--font-default);
+      min-height: 100vh;
+      margin: 0;
     }
 
-    /* Misc
-   ========================================================================== */
-
-    // Add the correct display
-    [hidden] {
-      display: none;
-    }
+    @include reset;
   }
 }

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

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-interface ButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-    /** Appearance */
-    appearance: "primary" | "secondary" | "tertiary";
-}
-interface IconButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-}
-/** A button with just text */
-export declare function Button({ children, onClick, appearance }: ButtonProps): JSX.Element;
-export declare function BackButton({ children, onClick }: IconButtonProps): JSX.Element;
-export declare function ForwardButton({ children, onClick }: IconButtonProps): JSX.Element;
-export {};

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

@@ -1,20 +0,0 @@
-import React from "react";
-interface RadioGroupProps {
-    /** Options */
-    children: React.ReactElement<RadioProps> | React.ReactElement<RadioProps>[];
-    /** The value of the selected radio button */
-    value: string;
-    /** The callback function when a different choice is made by the user */
-    onChange: (value: string) => void;
-}
-interface RadioProps {
-    /** The value of the radio button */
-    value: string;
-    /** The label of the radio button */
-    label: string;
-}
-/** Implemented as fancy radio buttons */
-export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): JSX.Element;
-/** A single radio button */
-export declare function Radio({ value, label }: RadioProps): JSX.Element;
-export {};

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

@@ -1,36 +0,0 @@
-import React from "react";
-interface SelectProps {
-    /** Equivalent to HTML `name` */
-    name: string;
-    /** Label for the select */
-    label: string;
-    /** Select description */
-    description?: string;
-    /** Current value of the select field */
-    value: string;
-    /** Called when the select value changes */
-    onChange(value: string): void;
-    /** Options */
-    children: React.ReactNode;
-    /**
-     * Error message if the field has errors. `undefined` here means the field
-     * contains no error.
-     */
-    error?: string;
-}
-interface OptionProps {
-    /** The value for the option */
-    value: string;
-    /** Human-readable label for the option */
-    children: string;
-    /** True if the option should be disabled */
-    disabled?: boolean;
-}
-interface OptionGroupProps {
-    label: string;
-    children: React.ReactNode;
-}
-export declare function Select({ name, label, description, value, onChange, children, error, }: SelectProps): JSX.Element;
-export declare function OptionGroup({ label, children }: OptionGroupProps): JSX.Element;
-export declare function Option({ value, children, disabled }: OptionProps): JSX.Element;
-export {};

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

@@ -1,34 +0,0 @@
-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/cjs/icons/400/ArrowBack.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from "react";
-declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => JSX.Element;
-export default SvgArrowBack;

package/dist/cjs/icons/400/Check.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from "react";
-declare const SvgCheck: (props: SVGProps<SVGSVGElement>) => JSX.Element;
-export default SvgCheck;

package/dist/cjs/icons/500/ArrowForward.d.ts

@@ -1,3 +0,0 @@
-import type { SVGProps } from "react";
-declare const SvgArrowForward: (props: SVGProps<SVGSVGElement>) => JSX.Element;
-export default SvgArrowForward;

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

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { Button } from "../components/Button";
-import "../../scss/globals.scss";
-import "../../scss/components/button.scss";
-declare const meta: {
-    title: string;
-    component: typeof Button;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Back: StoryObj;
-export declare const Forward: StoryObj;

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

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