@kth/style 0.5.0 → 0.6.1

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

@@ -9,5 +9,5 @@ export declare function closeAllDialogs(): void;
 export declare function addEventListeners(dialog: HTMLDialogElement): void;
 export declare class MenuPanel {
     static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
-    static initModal(items: NodeListOf<Element>): void;
+    static initModal(button: Element | null, modal: Element | null): void;
 }

package/dist/cjs/index.js

@@ -58,19 +58,16 @@ class MenuPanel {
             }
         });
     }
-    static initModal(items) {
-        for (const item of items) {
-            if (!(item instanceof HTMLElement))
-                continue;
-            const dialog = item.nextElementSibling;
-            if (!(dialog instanceof HTMLDialogElement))
-                continue;
-            addEventListeners(dialog);
-            item.addEventListener("click", (e) => {
-                e.preventDefault();
-                dialog.showModal();
-            });
-        }
+    static initModal(button, modal) {
+        if (!(button instanceof HTMLElement))
+            return;
+        if (!(modal instanceof HTMLDialogElement))
+            return;
+        addEventListeners(modal);
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            modal.showModal();
+        });
     }
 }
 

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

@@ -9,5 +9,5 @@ export declare function closeAllDialogs(): void;
 export declare function addEventListeners(dialog: HTMLDialogElement): void;
 export declare class MenuPanel {
     static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
-    static initModal(items: NodeListOf<Element>): void;
+    static initModal(button: Element | null, modal: Element | null): void;
 }

package/dist/esm/index.js

@@ -56,19 +56,16 @@ class MenuPanel {
             }
         });
     }
-    static initModal(items) {
-        for (const item of items) {
-            if (!(item instanceof HTMLElement))
-                continue;
-            const dialog = item.nextElementSibling;
-            if (!(dialog instanceof HTMLDialogElement))
-                continue;
-            addEventListeners(dialog);
-            item.addEventListener("click", (e) => {
-                e.preventDefault();
-                dialog.showModal();
-            });
-        }
+    static initModal(button, modal) {
+        if (!(button instanceof HTMLElement))
+            return;
+        if (!(modal instanceof HTMLDialogElement))
+            return;
+        addEventListeners(modal);
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            modal.showModal();
+        });
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -49,5 +49,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "bd4ad4e23abb131c4583fab73f02e4c22191a849"
+  "gitHead": "c7ff497dfbf4424b3fca6aeedd3c548f222352bb"
 }

package/scss/components/button.scss

@@ -1,24 +1,123 @@
 @use "../tokens/spacing";
 @use "../tokens/icons";
+@use "../tokens/typography";
+@use "../tokens/colors.scss";
 
 $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
 
 @layer kth-style {
   // Buttons with only icon:
-  .kth-button.close {
-    display: flex;
-    background: transparent;
+  .kth-icon-button {
+    background: unset;
     border: none;
     padding: var(--space-inner-icon);
     width: $icon-size;
     height: $icon-size;
-    border-radius: 100%;
+    border-radius: spacing.$space-4;
+
+    &:hover {
+      background: var(--color-secondary-hover);
+      cursor: pointer;
+    }
   }
 
-  .kth-button.close::before {
+  .kth-icon-button.close::before {
     @include icons.icon-close;
     width: 100%;
     height: 100%;
-    background-color: var(--color-secondary);
+    background-color: var(--color-tertiary);
+  }
+
+  .kth-button {
+    display: inline-flex;
+    padding: spacing.$space-8 spacing.$space-16;
+    justify-content: center;
+    align-items: center;
+    border: unset;
+    border-radius: spacing.$space-4;
+    background: none;
+    @include typography.font-heading-xs;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .kth-button.primary {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+
+    &:hover {
+      background: var(--color-primary-hover);
+    }
+  }
+
+  .kth-button.secondary,
+  .kth-button.previous {
+    border: 1px solid var(--color-secondary);
+    color: var(--color-secondary);
+
+    &:hover {
+      background: var(--color-secondary-hover);
+    }
+  }
+
+  .kth-button.success,
+  .kth-button.next {
+    background: var(--color-success);
+    color: var(--color-on-primary);
+
+    &:hover {
+      background: var(--color-success-hover);
+    }
+  }
+
+  .kth-button.error {
+    background: var(--color-error);
+    color: var(--color-on-primary);
+
+    &:hover {
+      background: var(--color-error-hover);
+    }
+  }
+
+  .kth-button.back {
+    padding: spacing.$space-8 0;
+    gap: spacing.$space-4;
+    color: var(--color-tertiary);
+    @include typography.font-default;
+
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  .kth-button.back::before {
+    @include icons.icon-arrow-back;
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-tertiary);
+  }
+
+  .kth-button.previous {
+    gap: spacing.$space-4;
+  }
+
+  .kth-button.previous::before {
+    @include icons.icon-arrow-back-500;
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-text);
+  }
+
+  .kth-button.next {
+    gap: spacing.$space-4;
+  }
+
+  .kth-button.next::after {
+    @include icons.icon-arrow-forward-500;
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-on-primary);
   }
 }

package/scss/components/mega-menu.scss

@@ -1,8 +1,6 @@
 @use "../tokens/spacing.scss";
 @use "../utils/mixins.scss";
-
-// TODO: this should be a token
-$breakpoint-mega-menu: 64rem;
+@use "../tokens/sizing.scss";
 
 @layer kth-style {
   nav.kth-mega-menu {
@@ -21,7 +19,7 @@ $breakpoint-mega-menu: 64rem;
     display: none;
   }
 
-  @media (max-width: $breakpoint-mega-menu) {
+  @media (max-width: sizing.$breakpoint-64) {
     nav.kth-mega-menu {
       display: none;
     }

package/scss/components/menu-item.scss

@@ -1,5 +1,6 @@
 @use "../tokens/spacing";
 @use "../tokens/icons";
+@use "../tokens/sizing";
 
 @layer kth-style {
   .kth-menu-item {
@@ -20,6 +21,16 @@
       border-bottom: transparent spacing.$space-4 solid;
     }
 
+    &.collapsable {
+      margin-inline-start: spacing.$space-16;
+    }
+
+    @media (min-width: sizing.$breakpoint-64) {
+      &.collapsable {
+        display: none;
+      }
+    }
+
     &:hover span {
       border-color: var(--color-primary);
     }

package/scss/tokens/colors.scss

@@ -1,6 +1,8 @@
 // Gray-scale
 $color-white: #fcfcfc;
 $color-black: #212121;
+$color-black-opacity10: rgb(33 33 33 / 0.1);
+
 $color-gray-lightest: #f2f2f2;
 $color-gray-lighter: #ededed;
 $color-gray-light: #e6e6e6;
@@ -10,6 +12,7 @@ $color-gray-dark: #323232;
 // Colors defined by "Varumärkesgruppen"
 $color-sand: #e6e1dd;
 $color-blue-kth: #004791;
+$color-blue-kth-dark: #003975;
 $color-blue-light: #e0edfc;
 $color-blue-sky: #6298d2;
 $color-blue-lake: #036eb8; // This is defined by us for links
@@ -20,20 +23,27 @@ $color-blue-digital: #221dd9;
 $color-red-light: #fad6d6;
 $color-red: #c7321d;
 $color-red-dark: #bf2c17;
+$color-red-darker: #962312;
+
 $color-green-light: #d8ffe7;
 $color-green: #3d784a;
 $color-green-dark: #366f43;
+$color-green-darker: #264f30;
 
 @mixin theme-default {
   --color-text: #{$color-black};
   --color-background: #{$color-white};
   --color-background-alt: #{$color-gray-lighter};
   --color-primary: #{$color-blue-kth};
+  --color-primary-hover: #{$color-blue-kth-dark};
   --color-on-primary: #{$color-white};
   --color-secondary: #{$color-black};
+  --color-secondary-hover: #{$color-black-opacity10};
   --color-tertiary: #{$color-blue-lake};
   --color-error: #{$color-red};
+  --color-error-hover: #{$color-red-dark};
   --color-success: #{$color-green};
+  --color-success-hover: #{$color-green-dark};
 }
 
 @mixin theme-student-web {
@@ -41,11 +51,15 @@ $color-green-dark: #366f43;
   --color-background: #{$color-blue-light};
   --color-background-alt: #{$color-gray-lighter};
   --color-primary: #{$color-blue-kth};
+  --color-primary-hover: #{$color-blue-kth-dark};
   --color-on-primary: #{$color-white};
   --color-secondary: #{$color-black};
+  --color-secondary-hover: #{$color-black-opacity10};
   --color-tertiary: #{$color-blue-lake};
   --color-error: #{$color-red-dark};
+  --color-error-hover: #{$color-red-darker};
   --color-success: #{$color-green-dark};
+  --color-success-hover: #{$color-green-darker};
 }
 
 @mixin theme-intranet {
@@ -53,11 +67,15 @@ $color-green-dark: #366f43;
   --color-background: #{$color-sand};
   --color-background-alt: #{$color-gray-lightest};
   --color-primary: #{$color-blue-kth};
+  --color-primary-hover: #{$color-blue-kth-dark};
   --color-on-primary: #{$color-white};
   --color-secondary: #{$color-black};
+  --color-secondary-hover: #{$color-black-opacity10};
   --color-tertiary: #{$color-blue-kth};
   --color-error: #{$color-red-dark};
+  --color-error-hover: #{$color-red-darker};
   --color-success: #{$color-green-dark};
+  --color-success-hover: #{$color-green-darker};
 }
 
 @mixin theme-inverse {
@@ -65,9 +83,13 @@ $color-green-dark: #366f43;
   --color-background: #{$color-blue-kth};
   --color-background-alt: #{$color-blue-marine};
   --color-primary: #{$color-white};
+  --color-primary-hover: #{$color-blue-kth-dark};
   --color-on-primary: #{$color-blue-kth};
   --color-secondary: #{$color-white};
+  --color-secondary-hover: #{$color-black-opacity10};
   --color-tertiary: #{$color-white};
   --color-error: #{$color-red-light};
+  --color-error-hover: #{$color-red-light};
   --color-success: #{$color-green-light};
+  --color-success-hover: #{$color-green-light};
 }

package/scss/tokens/icons.scss

@@ -38,6 +38,24 @@
   @include with-icon(raw.$icon-close);
 }
 
+@mixin icon-arrow-back {
+  @include with-icon(raw.$icon-arrow-forward);
+  rotate: 180deg;
+}
+
+@mixin icon-arrow-back-500 {
+  @include with-icon(raw.$icon-arrow-forward-500);
+  rotate: 180deg;
+}
+
+@mixin icon-arrow-forward {
+  @include with-icon(raw.$icon-arrow-forward);
+}
+
+@mixin icon-arrow-forward-500 {
+  @include with-icon(raw.$icon-arrow-forward-500);
+}
+
 @mixin icon-info-500 {
   @include with-icon(raw.$icon-info-500);
 }

package/scss/tokens/sizing.scss

@@ -0,0 +1,3 @@
+/// DO NOT USE IT OUTSIDE OF KTH STYLE. THOSE NAMES MAY CHANGE
+$breakpoint-48: 48rem;
+$breakpoint-64: 64rem;

package/scss/components/description-list.scss

@@ -1,30 +0,0 @@
-@use "../tokens/spacing.scss" as s;
-
-@layer kth-style {
-  .kth-description-list {
-    display: grid;
-    gap: 0 s.$space-16;
-    grid-template-columns: minmax(15rem, 1fr) 2fr;
-
-    @container (max-width: 30rem) {
-      grid-template-columns: 1fr;
-    }
-
-    > div:nth-child(n + 2) {
-      grid-column: 1 / -1;
-      display: grid;
-      grid-template-columns: subgrid;
-      padding-block: s.$space-8;
-      border-block-start: 1px solid gray;
-    }
-
-    dt {
-      font-weight: 600;
-      grid-column: 1 / 2;
-    }
-
-    dd {
-      grid-column: -2 / -1;
-    }
-  }
-}