@kth/style 0.2.2 → 0.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 Styles and components used across KTH.
 
-Documentation available in the [KTH Style website](https://kthstyledemoref.z6.web.core.windows.net/style)
+Documentation available in the [KTH Style website](https://kthstyledemoprod.z6.web.core.windows.net/style)
 
 ## Structure
 

package/assets/fonts.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: Figtree;
+  src: url("figtree[wght].woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Figtree;
+  src: url("figtree-italic[wght].woff2") format("woff2-variations");
+  font-weight: 100 900;
+  font-style: italic;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -23,7 +23,8 @@
   },
   "files": [
     "scss",
-    "dist"
+    "dist",
+    "assets"
   ],
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.1.0",
@@ -47,5 +48,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "a4b94a5cc47a84e6d120a57afcf8857deb84fbaf"
+  "gitHead": "22910d9bc7994e3704105c0f2ab3ca45a422d960"
 }

package/scss/components/button.scss

@@ -7,8 +7,9 @@
     margin-inline-start: auto;
     background: transparent;
     border: none;
-    padding-inline: 0;
+    padding-inline: spacing.$space-8;
     padding-block: spacing.$space-8;
+    border-radius: 100%;
   }
 
   .kth-button.close::before {

package/scss/components/details.scss

@@ -0,0 +1,51 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+
+/// When true, the file generates CSS code for the entire document
+///
+/// Set to `false` when importing if you want to use the mixin but don't want
+/// to have the "kth-details" class
+$generate-css: true !default;
+$border-width: spacing.$space-4;
+
+@mixin details {
+  summary {
+    color: var(--color-tertiary);
+    padding-block: var(--space-inner-block);
+    cursor: pointer;
+    // padding-inline-start: spacing.$space-20;
+    list-style: none;
+    font: inherit;
+    display: grid;
+    grid-template-columns: 1.5rem auto;
+
+    &::before {
+      @include icons.icon-caret-right;
+      background-color: var(--color-tertiary);
+      margin-block: spacing.$space-2;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &[open] summary::before {
+    rotate: 0deg;
+  }
+
+  > div {
+    border-inline-start: $border-width solid var(--color-tertiary);
+    padding-inline-start: spacing.$space-16;
+    padding-block: spacing.$space-8;
+    margin-inline-start: spacing.$space-8;
+  }
+}
+
+@if $generate-css {
+  @layer kth-style {
+    .kth-details {
+      @include details;
+    }
+  }
+}

package/scss/components/header.scss

@@ -5,12 +5,21 @@
 @layer kth-style {
   .kth-header.intranet {
     @include colors.theme-intranet;
+    .kth-logotype img.white {
+      display: none;
+    }
   }
   .kth-header.external {
     @include colors.theme-inverse;
+    .kth-logotype img.blue {
+      display: none;
+    }
   }
   .kth-header.student-web {
     @include colors.theme-student-web;
+    .kth-logotype img.white {
+      display: none;
+    }
   }
 
   .kth-header {

package/scss/tokens/colors.scss

@@ -1,6 +1,8 @@
 // Gray-scale
 $color-white: #fcfcfc;
 $color-black: #212121;
+$color-gray-lightest: #f2f2f2;
+$color-gray-lighter: #ededed;
 $color-gray-light: #e6e6e6;
 $color-gray-medium: #a5a5a5;
 $color-gray-dark: #323232;
@@ -10,51 +12,62 @@ $color-sand: #e6e1dd;
 $color-blue-kth: #004791;
 $color-blue-light: #e0edfc;
 $color-blue-sky: #6298d2;
+$color-blue-lake: #036eb8; // This is defined by us for links
 $color-blue-marine: #08004f;
 $color-blue-digital: #221dd9;
 
-// This color is specially made for links
-// 4.51:1 with `$color-blue-light` (requires 4.50)
-// 5.21:1 with `$color-white`      (requires 4.50)
-// 3.01:1 with `$color-black`      (requires 3.00)
-$color-blue-special: #036eb8;
+// Other colors, defined by us to meet various needs
+$color-red-light: #fad6d6;
+$color-red: #c7321d;
+$color-red-dark: #bf2c17;
+$color-green-light: #d8ffe7;
+$color-green: #3d784a;
+$color-green-dark: #366f43;
 
 @mixin theme-default {
   --color-text: #{$color-black};
   --color-background: #{$color-white};
+  --color-background-alt: #{$color-gray-lighter};
   --color-primary: #{$color-blue-kth};
   --color-on-primary: #{$color-white};
   --color-secondary: #{$color-black};
-  --color-tertiary: #{$color-blue-special};
-  // ... --hover-overlay: ...
+  --color-tertiary: #{$color-blue-lake};
+  --color-error: #{$color-red};
+  --color-success: #{$color-green};
 }
 
 @mixin theme-student-web {
   --color-text: #{$color-black};
   --color-background: #{$color-blue-light};
+  --color-background-alt: #{$color-gray-lighter};
   --color-primary: #{$color-blue-kth};
   --color-on-primary: #{$color-white};
   --color-secondary: #{$color-black};
-  --color-tertiary: #{$color-blue-special};
-  // ... --hover-overlay: ...
+  --color-tertiary: #{$color-blue-lake};
+  --color-error: #{$color-red-dark};
+  --color-success: #{$color-green-dark};
 }
 
 @mixin theme-intranet {
   --color-text: #{$color-black};
   --color-background: #{$color-sand};
+  --color-background-alt: #{$color-gray-lightest};
   --color-primary: #{$color-blue-kth};
   --color-on-primary: #{$color-white};
   --color-secondary: #{$color-black};
-  --color-tertiary: #{$color-blue-special};
-  // ... --hover-overlay: ...
+  --color-tertiary: #{$color-blue-kth};
+  --color-error: #{$color-red-dark};
+  --color-success: #{$color-green-dark};
 }
 
 @mixin theme-inverse {
   --color-text: #{$color-white};
   --color-background: #{$color-blue-kth};
+  --color-background-alt: #{$color-blue-marine};
   --color-primary: #{$color-white};
   --color-on-primary: #{$color-blue-kth};
   --color-secondary: #{$color-white};
   --color-tertiary: #{$color-white};
-  // ... --hover-overlay: ...
+  --color-error: #{$color-red-light};
+  --color-success: #{$color-green-light};
 }

package/scss/utils/prose.scss

@@ -105,7 +105,6 @@
     // TODO: border
 
     td {
-      vertical-align: baseline;
       padding-block: var(--space-inner-block);
       padding-inline: var(--space-inner-inline);