@ably/ui 14.9.0-dev.b9c2a3b → 15.0.1-dev.80b42cd

package/core/Button.js

@@ -0,0 +1 @@
+import React from"react";import Icon from"./Icon";import clsx from"clsx";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,...rest})=>{return /*#__PURE__*/React.createElement("button",{className:clsx(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className),...rest},leftIcon?/*#__PURE__*/React.createElement(Icon,{name:leftIcon}):null,children,rightIcon?/*#__PURE__*/React.createElement(Icon,{name:rightIcon}):null)};export default Button;

package/core/styles/buttons.css

@@ -1,95 +1,125 @@
 @layer components {
-  .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
+  .ui-button-base {
+    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-4 focus:outline-gui-blue-focus disabled:cursor-not-allowed;
   }
 
-  .ui-btn-alt {
-    transition: background-position 0.2s;
-    background: linear-gradient(
-      61.2deg,
-      var(--color-active-orange) 5%,
-      #fe5215 19%,
-      #fc4a13 27%,
-      #f73c10 33%,
-      #f1280a 39%,
-      #e90f04 44%,
-      var(--color-red-orange) 50%
-    );
-    background-size: 200% 100%;
-    background-position: 0% 0%;
+  .ui-button-lg-base {
+    @apply ui-button-base ui-gui-button1 h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24;
+  }
+
+  .ui-button-md-base {
+    @apply ui-button-base ui-gui-button2 h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24;
+  }
+
+  .ui-button-sm-base {
+    @apply ui-button-base ui-gui-button3 h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20;
+  }
+
+  .ui-button-xs-base {
+    @apply ui-button-base ui-gui-button4 h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16;
+  }
+
+  .ui-button-disabled-base {
+    @apply disabled:bg-gui-unavailable disabled:text-gui-unavailable-dark disabled:hover:bg-gui-unavailable;
+  }
+
+  .ui-button-disabled-base-dark {
+    @apply disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable-dark;
+  }
+
+  .ui-button-priority-base {
+    @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base;
+  }
+
+  .ui-theme-dark .ui-button-priority-base {
+    @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base-dark;
+  }
+
+  .ui-button-primary-base {
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1200 active:bg-neutral-1100 ui-button-disabled-base;
+  }
+
+  .ui-theme-dark .ui-button-primary-base {
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-100 active:bg-neutral-200 ui-button-disabled-base-dark;
+  }
+
+  .ui-button-secondary-base {
+    @apply text-neutral-1300 border border-neutral-600 hover:border-neutral-700 active:border-neutral-400 active:text-neutral-1000 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+  }
+
+  .ui-theme-dark .ui-button-secondary-base {
+    @apply text-neutral-000 border-neutral-700 hover:border-neutral-600 active:border-neutral-800 active:text-neutral-300 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
+  }
+
+  .ui-button-priority-lg {
+    @apply ui-button-lg-base ui-button-priority-base;
+  }
+
+  .ui-button-priority {
+    @apply ui-button-md-base ui-button-priority-base;
+  }
 
-    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply focus:outline-gui-focus;
-    @apply inline-flex items-center justify-center;
+  .ui-button-priority-sm {
+    @apply ui-button-sm-base ui-button-priority-base;
   }
 
-  .ui-btn-alt:hover,
-  .ui-btn-alt:focus {
-    background-position: 100% 0%;
+  .ui-button-priority-xs {
+    @apply ui-button-xs-base ui-button-priority-base;
   }
 
-  .ui-btn-alt:disabled {
-    background: linear-gradient(var(--gradient-transparent));
-    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+  .ui-button-primary-lg {
+    @apply ui-button-lg-base ui-button-primary-base;
   }
 
-  .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
+  .ui-button-primary {
+    @apply ui-button-md-base ui-button-primary-base;
   }
 
-  .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
-    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
-    @apply active:border-red-orange active:bg-white;
-    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
+  .ui-button-primary-sm {
+    @apply ui-button-sm-base ui-button-primary-base;
   }
 
-  .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
-    @apply hover:text-white hover:border-active-orange;
-    @apply active:border-red-orange;
-    @apply focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
-    @apply transition-colors;
-    @apply inline-flex items-center justify-center;
+  .ui-button-primary-xs {
+    @apply ui-button-xs-base ui-button-primary-base;
   }
 
-  .ui-btn-icon {
-    @apply w-24 h-24 mr-16;
+  .ui-button-secondary-lg {
+    @apply ui-button-lg-base ui-button-secondary-base;
   }
 
-  .ui-btn-icon-small {
-    @apply w-20 h-20 mr-12;
+  .ui-button-secondary {
+    @apply ui-button-md-base ui-button-secondary-base;
   }
 
-  .ui-btn-icon-xsmall {
-    @apply w-16 h-16 mr-8;
+  .ui-button-secondary-sm {
+    @apply ui-button-sm-base ui-button-secondary-base;
   }
-  .ui-btn.ui-btn-disabled,
-  .ui-btn-invert.ui-btn-disabled {
-    @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+
+  .ui-button-secondary-xs {
+    @apply ui-button-xs-base ui-button-secondary-base;
+  }
+
+  .ui-button-lg-left-icon {
+    @apply pl-24;
+  }
+
+  .ui-button-left-icon {
+    @apply pl-20;
+  }
+
+  .ui-button-sm-left-icon {
+    @apply pl-[18px];
+  }
+
+  .ui-button-lg-right-icon {
+    @apply pr-24;
   }
 
-  .ui-btn-secondary.ui-btn-disabled {
-    @apply text-gui-unavailable border-gui-unavailable bg-white cursor-not-allowed pointer-events-none select-none;
+  .ui-button-right-icon {
+    @apply pr-20;
   }
 
-  .ui-btn-secondary-invert.ui-btn-disabled {
-    @apply text-gui-unavailable border-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+  .ui-button-sm-right-icon {
+    @apply pr-[18px];
   }
 }

package/core/styles/gui.css

@@ -0,0 +1,33 @@
+@layer components {
+  .ui-gui-menu1 {
+    @apply font-sans text-neutral-1000 text-p1 font-medium leading-snug;
+  }
+
+  .ui-gui-menu2 {
+    @apply font-sans text-neutral-1000 text-p2 font-medium leading-snug;
+  }
+
+  .ui-gui-menu3 {
+    @apply font-sans text-neutral-1000 text-p3 font-medium leading-snug;
+  }
+
+  .ui-gui-menu4 {
+    @apply font-sans text-neutral-1000 text-p4 font-medium leading-snug;
+  }
+
+  .ui-gui-button1 {
+    @apply font-sans text-p1 font-bold leading-snug;
+  }
+
+  .ui-gui-button2 {
+    @apply font-sans text-p2 font-bold leading-snug;
+  }
+
+  .ui-gui-button3 {
+    @apply font-sans text-p3 font-bold leading-snug;
+  }
+
+  .ui-gui-button4 {
+    @apply font-sans text-p4 font-bold leading-snug;
+  }
+}

package/core/styles/legacy-buttons.css

@@ -0,0 +1,95 @@
+@layer components {
+  .ui-btn {
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-active-orange;
+    @apply active:text-white active:bg-red-orange;
+    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt {
+    transition: background-position 0.2s;
+    background: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-red-orange) 50%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+
+    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply focus:outline-gui-focus;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt:hover,
+  .ui-btn-alt:focus {
+    background-position: 100% 0%;
+  }
+
+  .ui-btn-alt:disabled {
+    background: linear-gradient(var(--gradient-transparent));
+    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+  }
+
+  .ui-btn-invert {
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-active-orange;
+    @apply active:text-white active:bg-red-orange;
+    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-secondary {
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
+    @apply active:border-red-orange active:bg-white;
+    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-secondary-invert {
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply hover:text-white hover:border-active-orange;
+    @apply active:border-red-orange;
+    @apply focus:outline-gui-focus;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-icon {
+    @apply w-24 h-24 mr-16;
+  }
+
+  .ui-btn-icon-small {
+    @apply w-20 h-20 mr-12;
+  }
+
+  .ui-btn-icon-xsmall {
+    @apply w-16 h-16 mr-8;
+  }
+  .ui-btn.ui-btn-disabled,
+  .ui-btn-invert.ui-btn-disabled {
+    @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+  }
+
+  .ui-btn-secondary.ui-btn-disabled {
+    @apply text-gui-unavailable border-gui-unavailable bg-white cursor-not-allowed pointer-events-none select-none;
+  }
+
+  .ui-btn-secondary-invert.ui-btn-disabled {
+    @apply text-gui-unavailable border-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+  }
+}

package/core/styles/properties.css

@@ -86,6 +86,7 @@
     --color-gui-blue-active-dark: #0080ff;
     --color-gui-blue-focus: #80b9f2;
     --color-gui-unavailable: #a8a8a8;
+    --color-gui-unavailable-dark: #575757;
     --color-gui-success-green: #11cb24;
     --color-gui-error-red: #fb0c0c;
     --color-gui-focus: #80b9f2;

package/core/styles/text.css

@@ -165,20 +165,4 @@
   .ui-figcaption {
     @apply font-mono text-p3 text-neutral-800;
   }
-
-  .ui-menu-label-1 {
-    @apply font-sans text-neutral-1000 text-p1 font-medium leading-snug;
-  }
-
-  .ui-menu-label-2 {
-    @apply font-sans text-neutral-1000 text-p2 font-medium leading-snug;
-  }
-
-  .ui-menu-label-3 {
-    @apply font-sans text-neutral-1000 text-p3 font-medium leading-snug;
-  }
-
-  .ui-menu-label-4 {
-    @apply font-sans text-neutral-1000 text-p4 font-medium leading-snug;
-  }
 }

package/core/styles.components.css

@@ -1,9 +1,11 @@
 @import "./styles/buttons.css";
+@import "./styles/legacy-buttons.css";
 @import "./styles/dropdowns.css";
 @import "./styles/forms.css";
 @import "./styles/layout.css";
 @import "./styles/shadows.css";
 @import "./styles/text.css";
+@import "./styles/gui.css";
 
 @layer components {
   /* Basis for icon component */

package/index.d.ts

@@ -168,6 +168,42 @@ export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map
 }
 
+declare module '@ably/ui/core/Button' {
+import React, { PropsWithChildren } from "react";
+import { IconName } from "@ably/ui/core/Icon/types";
+export type ButtonType = "priority" | "primary" | "secondary";
+type ButtonSize = "lg" | "md" | "sm" | "xs";
+type ButtonProps = {
+    /**
+     * The type of button: priority, primary, or secondary.
+     */
+    variant?: ButtonType;
+    /**
+     * The button size: lg, sm, or xs. Leave empty for md.
+     */
+    size?: ButtonSize;
+    /**
+     * An icon to render on the left side of the button label.
+     */
+    leftIcon?: IconName;
+    /**
+     * An icon to render on the right side of the button label.
+     */
+    rightIcon?: IconName;
+    /**
+     * Optional classes to add to the button element.
+     */
+    className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export const iconModifierClasses: Record<ButtonSize, {
+    left: string;
+    right: string;
+}>;
+const Button: React.FC<PropsWithChildren<ButtonProps>>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map
+}
+
 declare module '@ably/ui/core/Code' {
 type CodeProps = {
     language: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.9.0-dev.b9c2a3b",
+  "version": "15.0.1-dev.80b42cd",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/tailwind.config.js

@@ -128,6 +128,7 @@ module.exports = {
       "gui-blue-focus": "var(--color-gui-blue-focus)",
       "gui-blue-visited": "var(--color-gui-blue-focus)",
       "gui-unavailable": "var(--color-gui-unavailable)",
+      "gui-unavailable-dark": "var(--color-gui-unavailable-dark)",
       "gui-success-green": "var(--color-gui-success-green)",
       "gui-error-red": "var(--color-gui-error-red)",
       "gui-focus": "var(--color-gui-focus)",

package/core/styles/colors/computed-colors.json

@@ -1 +0,0 @@
-["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]