aidos-ui 3.0.12 → 3.0.14

package/dist/Tabs.js

@@ -6,7 +6,7 @@ import { useNavigation } from "./useNavigation";
 import { Text } from "./Text";
 export function Tabs({ tabs, gap = "none", padding = "none", tabPadding = "medium", labelSize = "large", jsStyle, tabJSStyle, ["aria-controls"]: ariaControls, ...otherProps }) {
     const root = useNavigation();
-    return (_jsx(Row, { role: "tablist", jsStyle: jsStyle, gap: gap, padding: padding, ref: root, ...otherProps, children: tabs.map(({ label, href, onClick, selected, addOn, addOnPosition = "start", }) => (_jsxs(BaseLink, { "aria-controls": ariaControls, role: "tab", "aria-selected": selected ? "true" : undefined, bare: true, color: selected ? "positive" : "secondary", href: href, onClick: onClick, animateInteraction: false, jsStyle: [
+    return (_jsx(Row, { role: "tablist", jsStyle: jsStyle, gap: gap, padding: padding, ref: root, ...otherProps, children: tabs.map(({ label, href, onClick, selected, addOn, addOnPosition = "start", }) => (_jsxs(BaseLink, { "aria-controls": ariaControls, role: "tab", "aria-selected": selected ? "true" : undefined, bare: true, color: selected ? "positive" : "primary", href: href, onClick: onClick, animateInteraction: false, jsStyle: [
                 {
                     textDecoration: "none",
                     borderBottom: selected

package/dist/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,EAA0B,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAqB9B,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,GAAG,GAAG,MAAM,EACZ,OAAO,GAAG,MAAM,EAChB,UAAU,GAAG,QAAQ,EACrB,SAAS,GAAG,OAAO,EACnB,OAAO,EACP,UAAU,EACV,CAAC,eAAe,CAAC,EAAE,YAAY,EAC/B,GAAG,UAAU,EACH;IACV,MAAM,IAAI,GAAG,aAAa,EAAE,CAAC;IAE7B,OAAO,CACL,KAAC,GAAG,IACF,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,IAAI,KACL,UAAU,YAEb,IAAI,CAAC,GAAG,CACP,CAAC,EACC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,aAAa,GAAG,OAAO,GACxB,EAAE,EAAE,CAAC,CACJ,MAAC,QAAQ,qBACQ,YAAY,EAC3B,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAE5C,IAAI,QACJ,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,EAC1C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE;gBACP;oBACE,cAAc,EAAE,MAAM;oBACtB,YAAY,EAAE,QAAQ;wBACpB,CAAC,CAAC,aAAa,MAAM,CAAC,aAAa,CAAC,EAAE;wBACtC,CAAC,CAAC,uBAAuB;oBAC3B,cAAc,EAAE;wBACd,SAAS,EAAE,aAAa;qBACzB;oBACD,cAAc,EAAE;wBACd,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBACjD;oBACD,aAAa,EAAE;wBACb,oBAAoB,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBAClD;oBACD,QAAQ,EAAE;wBACR,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;qBAChD;oBACD,eAAe,EAAE;wBACf,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;qBAChD;iBACF;gBACD,UAAU,CAAC,UAAU,CAAC;gBACtB,UAAU;aACX,aAEA,aAAa,KAAK,OAAO,IAAI,KAAK,EACnC,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,YAC7D,KAAK,GACD,EACN,aAAa,KAAK,KAAK,IAAI,KAAK,KApC5B,KAAK,CAqCD,CACZ,CACF,GACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,EAA0B,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAqB9B,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,GAAG,GAAG,MAAM,EACZ,OAAO,GAAG,MAAM,EAChB,UAAU,GAAG,QAAQ,EACrB,SAAS,GAAG,OAAO,EACnB,OAAO,EACP,UAAU,EACV,CAAC,eAAe,CAAC,EAAE,YAAY,EAC/B,GAAG,UAAU,EACH;IACV,MAAM,IAAI,GAAG,aAAa,EAAE,CAAC;IAE7B,OAAO,CACL,KAAC,GAAG,IACF,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,IAAI,KACL,UAAU,YAEb,IAAI,CAAC,GAAG,CACP,CAAC,EACC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,aAAa,GAAG,OAAO,GACxB,EAAE,EAAE,CAAC,CACJ,MAAC,QAAQ,qBACQ,YAAY,EAC3B,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAE5C,IAAI,QACJ,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACxC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE;gBACP;oBACE,cAAc,EAAE,MAAM;oBACtB,YAAY,EAAE,QAAQ;wBACpB,CAAC,CAAC,aAAa,MAAM,CAAC,aAAa,CAAC,EAAE;wBACtC,CAAC,CAAC,uBAAuB;oBAC3B,cAAc,EAAE;wBACd,SAAS,EAAE,aAAa;qBACzB;oBACD,cAAc,EAAE;wBACd,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBACjD;oBACD,aAAa,EAAE;wBACb,oBAAoB,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBAClD;oBACD,QAAQ,EAAE;wBACR,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;qBAChD;oBACD,eAAe,EAAE;wBACf,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;qBAChD;iBACF;gBACD,UAAU,CAAC,UAAU,CAAC;gBACtB,UAAU;aACX,aAEA,aAAa,KAAK,OAAO,IAAI,KAAK,EACnC,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,YAC7D,KAAK,GACD,EACN,aAAa,KAAK,KAAK,IAAI,KAAK,KApC5B,KAAK,CAqCD,CACZ,CACF,GACG,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aidos-ui",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "description": "A simple UI framework",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/BaseButton.tsx

@@ -8,6 +8,7 @@ export interface BaseButtonProps
   jsStyle?: JSStyle;
   color: InteractableColor;
   bare?: boolean;
+  border?: boolean;
   className?: undefined;
   animateInteraction?: boolean;
   padding?: Padding;
@@ -21,6 +22,7 @@ export const BaseButton = React.forwardRef(
       jsStyle,
       color,
       bare = false,
+      border = false,
       disabled,
       animateInteraction = true,
       padding,
@@ -44,6 +46,7 @@ export const BaseButton = React.forwardRef(
           ...getInteractableJSStyles({
             color,
             bare,
+            border,
             disabled,
             animateInteraction,
             padding,

package/src/BaseLink.tsx

@@ -11,6 +11,7 @@ export interface BaseLinkProps
   href: string;
   disabled?: boolean;
   bare?: boolean;
+  border?: boolean;
   className?: undefined;
   animateInteraction?: boolean;
   padding?: Padding;
@@ -33,6 +34,7 @@ export const BaseLink = React.forwardRef(
       animateInteraction = true,
       padding,
       href,
+      border,
       role = "link",
       ...otherProps
     }: BaseLinkProps,
@@ -61,6 +63,7 @@ export const BaseLink = React.forwardRef(
         className={jss([
           ...getInteractableJSStyles({
             color,
+            border,
             bare,
             disabled,
             animateInteraction,

package/src/Button.tsx

@@ -21,6 +21,7 @@ export interface ButtonProps extends BaseButtonProps {
   align?: Align;
   gap?: Gap;
   justify?: Justify;
+  bold?: boolean;
 }
 
 export const Button = React.forwardRef(
@@ -38,6 +39,7 @@ export const Button = React.forwardRef(
       justify = "center",
       jsStyle,
       size = "medium",
+      bold,
       ...otherProps
     }: ButtonProps,
     ref?: React.Ref<HTMLButtonElement>
@@ -67,7 +69,11 @@ export const Button = React.forwardRef(
               color={getGlyphColor(color, disabled, bare)}
             />
           )}
-          <Text size={size} color={getGlyphColor(color, disabled, bare)}>
+          <Text
+            bold={bold}
+            size={size}
+            color={getGlyphColor(color, disabled, bare)}
+          >
             {label}
           </Text>
           {icon && iconPosition === "right" && (

package/src/DarkMode.tsx

@@ -93,7 +93,7 @@ export function DarkModeToggle() {
       icon={darkMode.enabled ? "fa-sun-o" : "fa-moon-o"}
       size="medium"
       onClick={darkMode.toggle}
-      color="secondary"
+      color="primary"
       bare
     />
   );

package/src/DesignBook.tsx

@@ -109,7 +109,7 @@ export function DesignBook() {
                 <Button
                   style={{ position: "relative" }}
                   label="Secondary button"
-                  color="secondary"
+                  color="primary"
                   onClick={() => {
                     toggle(undefined);
                   }}
@@ -192,7 +192,7 @@ export function DesignBook() {
             <Button
               bare={true}
               label="Bare secondary button"
-              color="secondary"
+              color="primary"
               onClick={() => {}}
             />
           </Row>
@@ -223,7 +223,7 @@ export function DesignBook() {
           </Row>
 
           <Row gap="medium">
-            <Link label="Secondary link" color="secondary" href="/" />
+            <Link label="Secondary link" color="primary" href="/" />
           </Row>
 
           <Row gap="medium">
@@ -250,7 +250,7 @@ export function DesignBook() {
             <Link
               bare={true}
               label="Bare secondary Link"
-              color="secondary"
+              color="primary"
               href="/"
             />
           </Row>
@@ -365,39 +365,39 @@ export function DesignBook() {
             <IconButton
               size="large"
               icon="fa-info"
-              color="secondary"
+              color="primary"
               onClick={() => {}}
             />
             <IconButton
               size="medium"
               icon="fa-info"
-              color="secondary"
+              color="primary"
               onClick={() => {}}
             />
             <IconButton
               size="small"
               icon="fa-info"
-              color="secondary"
+              color="primary"
               onClick={() => {}}
             />
             <IconButton
               size="large"
               icon="fa-info"
-              color="secondary"
+              color="primary"
               onClick={() => {}}
               bare={true}
             />
             <IconButton
               size="medium"
               icon="fa-info"
-              color="secondary"
+              color="primary"
               onClick={() => {}}
               bare={true}
             />
             <IconButton
               size="small"
               icon="fa-info"
-              color="secondary"
+              color="primary"
               onClick={() => {}}
               bare={true}
             />

package/src/Dialog.tsx

@@ -56,7 +56,7 @@ export const Dialog = ({
             icon="fa-close"
             size="medium"
             onClick={close}
-            color="secondary"
+            color="primary"
           />
         </Row>
         <ListDivider />

package/src/Interactable.tsx

@@ -1,6 +1,11 @@
 import { JSStyle, Padding, TextColor, cssVar, getPadding } from "./jss";
 
-export type InteractableColor = "positive" | "secondary" | "negative";
+export type InteractableColor =
+  | "positive"
+  | "primary"
+  | "negative"
+  | "dark"
+  | "light";
 
 const jsStyles = {
   root: {
@@ -8,10 +13,10 @@ const jsStyles = {
     display: "inline-flex",
     alignItems: "center",
     transition: "opacity 0.1s ease-in",
-    outlineColor: "var(--outline)",
+    outlineColor: cssVar("--outline"),
     "[aria-disabled=true]": {
-      color: "var(--secondary-text)",
-      backgroundColor: "var(--background-button-secondary)",
+      color: cssVar("--secondary-text"),
+      backgroundColor: cssVar("--background-button-secondary"),
     },
     ":focus-visible": {
       outlineWidth: "2px",
@@ -19,22 +24,34 @@ const jsStyles = {
       outlineOffset: -2,
     },
   },
+  dark: {
+    backgroundColor: "black",
+    "[aria-disabled=true]": {
+      backgroundColor: cssVar("--background-button-disabled"),
+    },
+  },
+  light: {
+    backgroundColor: "white",
+    "[aria-disabled=true]": {
+      backgroundColor: cssVar("--background-button-disabled"),
+    },
+  },
   positive: {
-    backgroundColor: "var(--background-button-positive)",
+    backgroundColor: cssVar("--background-button-positive"),
     "[aria-disabled=true]": {
-      backgroundColor: "var(--background-button-disabled)",
+      backgroundColor: cssVar("--background-button-disabled"),
     },
   },
-  secondary: {
-    backgroundColor: "var(--background-button-secondary)",
+  primary: {
+    backgroundColor: cssVar("--background-button-secondary"),
     "[aria-disabled=true]": {
-      backgroundColor: "var(--background-button-disabled)",
+      backgroundColor: cssVar("--background-button-disabled"),
     },
   },
   negative: {
-    backgroundColor: "var(--background-button-negative)",
+    backgroundColor: cssVar("--background-button-negative"),
     "[aria-disabled=true]": {
-      backgroundColor: "var(--background-button-disabled)",
+      backgroundColor: cssVar("--background-button-disabled"),
     },
   },
   disabled: {
@@ -42,7 +59,7 @@ const jsStyles = {
   },
   bare: {
     backgroundColor: "inherit",
-    outlineColor: "var(--outline)",
+    outlineColor: cssVar("--outline"),
     "[aria-disabled=true]": {
       backgroundColor: "inherit",
     },
@@ -50,6 +67,24 @@ const jsStyles = {
       backgroundColor: "inherit",
     },
   },
+  borderDark: {
+    border: "1px solid black",
+  },
+  borderLight: {
+    border: "1px solid white",
+  },
+  borderPositive: {
+    border: `1px solid ${cssVar("--highlight-text")}`,
+  },
+  borderNegative: {
+    border: `1px solid ${cssVar("--negative-text")}`,
+  },
+  borderPrimary: {
+    border: `1px solid ${cssVar("--primary-text")}`,
+  },
+  borderDisabled: {
+    border: `1px solid ${cssVar("--subtle-text")}`,
+  },
   opacityHover: {
     ":hover": {
       opacity: 0.8,
@@ -67,18 +102,28 @@ export function getInteractableJSStyles({
   disabled,
   animateInteraction,
   padding,
+  border,
 }: {
   color: InteractableColor;
   bare: boolean;
   disabled: boolean;
   animateInteraction: boolean;
   padding: Padding;
+  border: boolean;
 }): Array<JSStyle> {
   return [
     jsStyles.root,
+    color === "dark" && jsStyles.dark,
+    color === "light" && jsStyles.light,
     color === "positive" && jsStyles.positive,
-    color === "secondary" && jsStyles.secondary,
+    color === "primary" && jsStyles.primary,
     color === "negative" && jsStyles.negative,
+    border && !disabled && color === "positive" && jsStyles.borderPositive,
+    border && !disabled && color === "negative" && jsStyles.borderNegative,
+    border && !disabled && color === "primary" && jsStyles.borderPrimary,
+    border && !disabled && color === "dark" && jsStyles.borderDark,
+    border && !disabled && color === "light" && jsStyles.borderLight,
+    border && disabled && jsStyles.borderDisabled,
     bare && jsStyles.bare,
     disabled && jsStyles.disabled,
     !bare && jsStyles.opacityHover,
@@ -112,8 +157,12 @@ export const getGlyphColor = (
       return bare ? "highlight" : "light";
     case "negative":
       return bare ? "negative" : "light";
-    case "secondary":
+    case "primary":
       return bare ? "primary" : "secondary";
+    case "dark":
+      return bare ? "primary" : "light";
+    case "light":
+      return bare ? "light" : "primary";
   }
 };
 
@@ -131,16 +180,16 @@ export const getInteractableListItemJSStyles = ({
       borderRadius: bare ? cssVar("--border-radius-m") : null,
       textDecoration: "none",
       ":hover": {
-        backgroundColor: "var(--hovered-background)",
+        backgroundColor: cssVar("--hovered-background"),
       },
       ":active:hover": {
-        backgroundColor: "var(--pressed-background)",
+        backgroundColor: cssVar("--pressed-background"),
       },
       "[aria-disabled=true]": {
-        backgroundColor: "var(--primary-background)",
+        backgroundColor: cssVar("--primary-background"),
       },
       "[aria-disabled=true]:active:hover": {
-        backgroundColor: "var(--primary-background)",
+        backgroundColor: cssVar("--primary-background"),
       },
     },
     selected && {
@@ -149,10 +198,10 @@ export const getInteractableListItemJSStyles = ({
         : cssVar("--selected-background"),
       boxShadow: bare ? "" : "inset 1px 1px 2px -1px #0000004a",
       ":hover": {
-        backgroundColor: "var(--hovered-background)",
+        backgroundColor: cssVar("--hovered-background"),
       },
       ":active:hover": {
-        backgroundColor: "var(--pressed-background)",
+        backgroundColor: cssVar("--pressed-background"),
       },
     },
   ];

package/src/Link.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 
 import { BaseLink, BaseLinkProps } from "./BaseLink";
 import { Text } from "./Text";
@@ -21,6 +21,7 @@ export interface LinkProps extends BaseLinkProps {
   align?: Align;
   gap?: Gap;
   justify?: Justify;
+  bold?: boolean;
 }
 
 export const Link = React.forwardRef(
@@ -38,6 +39,7 @@ export const Link = React.forwardRef(
       justify = "center",
       jsStyle,
       size = "medium",
+      bold,
       ...otherProps
     }: LinkProps,
     ref?: React.Ref<HTMLAnchorElement>
@@ -69,7 +71,11 @@ export const Link = React.forwardRef(
               color={getGlyphColor(color, disabled, bare)}
             />
           )}
-          <Text size={size} color={getGlyphColor(color, disabled, bare)}>
+          <Text
+            bold={bold}
+            size={size}
+            color={getGlyphColor(color, disabled, bare)}
+          >
             {label}
           </Text>
           {icon && iconPosition === "right" && (

package/src/ListButtonItem.tsx

@@ -24,7 +24,7 @@ export const ListButtonItem = React.forwardRef(
   (
     {
       onClick,
-      color = "secondary",
+      color = "primary",
       disabled = false,
       padding = "medium",
       jsStyle,
@@ -55,7 +55,7 @@ export const ListButtonItem = React.forwardRef(
             disabled={disabled}
             animateInteraction={false}
             bare={true}
-            color={bare ? "secondary" : color}
+            color={bare ? "primary" : color}
             ref={ref}
             jsStyle={getInteractableListItemJSStyles({ bare, selected })}
             onClick={onClick}

package/src/ListLinkItem.tsx

@@ -32,7 +32,7 @@ export const ListLinkItem = React.forwardRef(
       jsStyle,
       gap,
       selected,
-      color = "secondary",
+      color = "primary",
       target,
       ...otherProps
     }: ListLinkItemProps,

package/src/Sublist.tsx

@@ -4,7 +4,6 @@ import { Icon } from "./Icon";
 import { Box } from "./Box";
 import { Row } from "./Row";
 import { JSStyle } from "./jss";
-import { useListContext } from "./List";
 
 export function Sublist({
   children,
@@ -54,7 +53,7 @@ export function Sublist({
           </Row>
         }
         addOnPosition="end"
-        color="secondary"
+        color="primary"
       />
       {collapsed ? null : children}
     </>

package/src/Tabs.tsx

@@ -60,7 +60,7 @@ export function Tabs({
             aria-selected={selected ? "true" : undefined}
             key={label}
             bare
-            color={selected ? "positive" : "secondary"}
+            color={selected ? "positive" : "primary"}
             href={href}
             onClick={onClick}
             animateInteraction={false}