@kth/style 0.0.11 → 0.1.0

package/scss/utils/reset.scss

@@ -1,263 +1,61 @@
-@use "../tokens/index.scss" as t;
-
-/// Adaptation of normalize.css v8.0.1
-/// github.com/necolas/normalize.css
-///
-/// 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;
-    }
-
-    // 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 */
-    }
+@use "../tokens/typography";
+@use "../tokens/spacing";
+@use "../tokens/colors";
+
+/// Based on https://andy-bell.co.uk/a-more-modern-css-reset/
+@layer kth-style {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    scrollbar-gutter: stable;
+  }
 
-    // Remove the inner padding in Chrome and Safari on macOS.
-    [type="search"]::-webkit-search-decoration {
-      -webkit-appearance: none;
-    }
+  :root {
+    @include colors.theme-default;
+    @include spacing.theme-default;
+    @include typography.theme-default;
+  }
 
-    // 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 */
-    }
+  body {
+    color: var(--color-text);
+    background: var(--color-background);
+    font: var(--font-default);
+    min-height: 100vh;
+    margin: 0;
+  }
 
-    /* Interactive
-   ========================================================================== */
-    // Add the correct display in Edge, IE 10+, and Firefox.
-    details {
-      display: block;
-    }
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
 
-    // Add the correct display in all browsers.
-    summary {
-      display: list-item;
-    }
+  a {
+    color: var(--color-tertiary);
+    text-underline-offset: spacing.$space-4;
+  }
 
-    /* Misc
-   ========================================================================== */
+  img,
+  picture {
+    max-width: 100%;
+  }
 
-    // Add the correct display
-    [hidden] {
-      display: none;
-    }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
   }
 }

package/scss/components/content-tabs.scss

@@ -1,68 +0,0 @@
-@use "../tokens/" as t;
-
-$border-secondary: 1px solid t.$color-neutral-10;
-
-@layer kth-style {
-  .kth-content-tabs {
-    overflow: auto;
-    padding-block-start: t.$space-16;
-    position: sticky;
-    top: calc(var(--kpm-bar-height, 0rem));
-    background: t.$color-neutral-0;
-
-    ul[role="tablist"] {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: inline-flex;
-      flex-wrap: nowrap;
-      align-items: stretch;
-      gap: t.$space-4;
-      min-width: 100%;
-      border-block-end: $border-secondary;
-    }
-
-    li {
-      display: flex;
-    }
-
-    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);
-      border-block-width: 1px;
-      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);
-
-      &:focus {
-        outline-offset: -#{t.$space-4};
-      }
-
-      &:hover {
-        text-decoration: underline;
-      }
-
-      &[aria-selected="false"] {
-        background: t.$color-neutral-2;
-        margin-block-start: #{t.$space-8};
-      }
-
-      &[aria-selected="true"] {
-        background: t.$color-neutral-0;
-        padding-block-start: calc(
-          var(--kth-0-clickable-padding-block) + #{t.$space-8} - 1px
-        );
-        border-block-end-color: transparent;
-      }
-    }
-
-    [role="tabpanel"] {
-      border-inline: $border-secondary;
-      border-block-end: $border-secondary;
-    }
-  }
-}

package/scss/components/filter-tabs.scss

@@ -1,31 +0,0 @@
-@use "../tokens/" as t;
-
-@layer kth-style {
-  .kth-filter-tabs {
-    border: none;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-
-    input[type="radio"] {
-      appearance: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    label {
-      display: inline-block;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: var(--kth-0-clickable-padding-block);
-    }
-
-    input:focus + label {
-      outline: 2px solid t.$color-primary-5;
-      outline-offset: -#{t.$space-6};
-    }
-
-    input:checked + label {
-      border-bottom: t.$space-2 t.$color-primary-5 solid;
-    }
-  }
-}

package/scss/components/form.scss

@@ -1,48 +0,0 @@
-@use "../tokens/" as t;
-
-@layer kth-style {
-  .kth-select,
-  .kth-input {
-    margin-block: t.$space-24;
-
-    label {
-      display: block;
-      font-weight: 600;
-    }
-
-    p {
-      margin: t.$space-4 0;
-    }
-
-    select {
-      margin-top: t.$space-8;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
-      border-radius: t.$space-4;
-      border: 1px solid t.$color-neutral-10;
-
-      &[aria-invalid="true"] {
-        color: t.$color-danger-5;
-        border-color: t.$color-danger-5;
-      }
-    }
-
-    input {
-      margin-top: t.$space-8;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
-      border-radius: t.$space-4;
-      border: 1px solid t.$color-neutral-10;
-
-      &[aria-invalid="true"] {
-        color: t.$color-danger-5;
-        border-color: t.$color-danger-5;
-      }
-    }
-
-    &__error {
-      margin-top: t.$space-8;
-      color: t.$color-danger-5;
-    }
-  }
-}

package/scss/components/inline-icon.scss

@@ -1,7 +0,0 @@
-@use "../tokens/" as t;
-@layer kth-style {
-  .kth-inline-icon {
-    display: inline-block;
-    vertical-align: -12.5%;
-  }
-}

package/scss/globals.scss

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

package/scss/tokens/_colors.scss

@@ -1,20 +0,0 @@
-// 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

@@ -1,40 +0,0 @@
----
-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/_typography.scss

@@ -1,71 +0,0 @@
-@use "sass:math";
-// 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-family-serif;
-  font-weight: 400;
-  font-size: math.div(18rem, 16);
-  line-height: math.div(28rem, 16);
-}
-
-@mixin font-body-lead {
-  font-family: $font-family-sans;
-  font-weight: 400;
-  font-size: math.div(22rem, 16);
-  line-height: math.div(32rem, 16);
-}

package/scss/tokens/index.scss

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

package/scss/utils/sizes.scss

@@ -1,22 +0,0 @@
-@use "../tokens" as t;
-
-/// This mixin provides CSS custom properties used for sizing all UI elements
-@mixin sizes {
-  @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-small {
-      --kth-0-clickable-padding-block: #{t.$space-4};
-      --kth-0-clickable-padding-inline: #{t.$space-12};
-    }
-  }
-}