@kth/style 0.2.3 → 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/dist/cjs/react.d.ts

@@ -1 +1 @@
-export { DropdownContainer, DropdownWithPanel, } from "./components/react/DropdownWithPanel";
+export default function hello(): string;

package/dist/cjs/react.js

@@ -1,53 +1,7 @@
 'use strict';
 
-var React = require('react');
-
-/**
- * Close all <dialog>s (modal and non-modal) in a document
- */
-function closeAllDialogs() {
-    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
-}
-
-function DropdownWithPanel({ label, children }) {
-    const [shouldRender, setShouldRender] = React.useState(false);
-    const dialogRef = React.useRef(null);
-    function closeDialog() {
-        dialogRef.current?.close();
-    }
-    function handleKeyDown(event) {
-        if (event.key === "Escape") {
-            event.stopPropagation();
-            dialogRef.current?.close();
-        }
-    }
-    return (React.createElement("div", null,
-        React.createElement("button", { className: "kth-menu-item dropdown", onClick: () => {
-                setShouldRender(true);
-                if (!dialogRef.current?.open) {
-                    closeAllDialogs();
-                    dialogRef.current?.show();
-                }
-                else {
-                    closeAllDialogs();
-                }
-            }, onMouseOver: () => setShouldRender(true), onFocus: () => setShouldRender(true) },
-            React.createElement("span", null, label)),
-        React.createElement("dialog", { className: "kth-menu-panel", ref: dialogRef, onKeyDown: handleKeyDown },
-            React.createElement("div", { className: "kth-menu-panel__container" },
-                React.createElement("button", { className: "kth-button close", onClick: () => closeDialog() },
-                    React.createElement("span", { className: "kth-visually-hidden" }, "Close")),
-                React.createElement("div", { className: "kth-menu-panel__content" }, shouldRender && children)))));
-}
-function DropdownContainer(props) {
-    const containerRef = React.useRef(null);
-    return (React.createElement("div", { ref: containerRef, onBlur: (event) => {
-            const relatedTarget = event.relatedTarget;
-            if (relatedTarget && !containerRef.current?.contains(relatedTarget)) {
-                closeAllDialogs();
-            }
-        }, ...props }));
+function hello() {
+    return "world";
 }
 
-exports.DropdownContainer = DropdownContainer;
-exports.DropdownWithPanel = DropdownWithPanel;
+module.exports = hello;

package/dist/esm/react.d.ts

@@ -1 +1 @@
-export { DropdownContainer, DropdownWithPanel, } from "./components/react/DropdownWithPanel";
+export default function hello(): string;

package/dist/esm/react.js

@@ -1,50 +1,5 @@
-import React from 'react';
-
-/**
- * Close all <dialog>s (modal and non-modal) in a document
- */
-function closeAllDialogs() {
-    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
-}
-
-function DropdownWithPanel({ label, children }) {
-    const [shouldRender, setShouldRender] = React.useState(false);
-    const dialogRef = React.useRef(null);
-    function closeDialog() {
-        dialogRef.current?.close();
-    }
-    function handleKeyDown(event) {
-        if (event.key === "Escape") {
-            event.stopPropagation();
-            dialogRef.current?.close();
-        }
-    }
-    return (React.createElement("div", null,
-        React.createElement("button", { className: "kth-menu-item dropdown", onClick: () => {
-                setShouldRender(true);
-                if (!dialogRef.current?.open) {
-                    closeAllDialogs();
-                    dialogRef.current?.show();
-                }
-                else {
-                    closeAllDialogs();
-                }
-            }, onMouseOver: () => setShouldRender(true), onFocus: () => setShouldRender(true) },
-            React.createElement("span", null, label)),
-        React.createElement("dialog", { className: "kth-menu-panel", ref: dialogRef, onKeyDown: handleKeyDown },
-            React.createElement("div", { className: "kth-menu-panel__container" },
-                React.createElement("button", { className: "kth-button close", onClick: () => closeDialog() },
-                    React.createElement("span", { className: "kth-visually-hidden" }, "Close")),
-                React.createElement("div", { className: "kth-menu-panel__content" }, shouldRender && children)))));
-}
-function DropdownContainer(props) {
-    const containerRef = React.useRef(null);
-    return (React.createElement("div", { ref: containerRef, onBlur: (event) => {
-            const relatedTarget = event.relatedTarget;
-            if (relatedTarget && !containerRef.current?.contains(relatedTarget)) {
-                closeAllDialogs();
-            }
-        }, ...props }));
+function hello() {
+    return "world";
 }
 
-export { DropdownContainer, DropdownWithPanel };
+export { hello as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -48,5 +48,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "9eebb100e8d56f87395e62ecc89603c446832f20"
+  "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/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);
 

package/dist/cjs/components/react/DropdownWithPanel.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-interface Props {
-    label: string;
-    children: React.ReactNode;
-}
-export declare function DropdownWithPanel({ label, children }: Props): React.JSX.Element;
-export declare function DropdownContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-export {};

package/dist/esm/components/react/DropdownWithPanel.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-interface Props {
-    label: string;
-    children: React.ReactNode;
-}
-export declare function DropdownWithPanel({ label, children }: Props): React.JSX.Element;
-export declare function DropdownContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-export {};