@ably/ui 14.4.0 → 14.5.0

package/core/styles/layout.css

@@ -18,4 +18,12 @@
   .ui-grid-mx {
     @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
   }
+
+  .ui-full-borderless-container-override {
+    @apply w-[10000px] ml-[calc(50%-5000px)];
+  }
+
+  .ui-full-container-override {
+    @apply ml-[calc(-50vw+50%)] !px-0 w-screen;
+  }
 }

package/core/styles/properties.css

@@ -189,8 +189,8 @@
     --fs-standfirst: 1.5rem;
     --fs-sub-header: 1.125rem;
     --fs-sub-header-xs: 1.063rem;
-    --fs-overline1: 1rem;
-    --fs-overline2: 0.875rem;
+    --fs-overline1: 0.875rem;
+    --fs-overline2: 0.75rem;
     --fs-btn1: 1rem;
     --fs-btn2: 0.938rem;
     --fs-btn3: 0.875rem;

package/core/styles/shadows.css

@@ -0,0 +1,136 @@
+@layer components {
+  .ui-shadow-xs-soft {
+    box-shadow:
+      0px 13.699px 3.805px 0px rgba(3, 2, 13, 0),
+      0px 9.133px 3.805px 0px rgba(3, 2, 13, 0.01),
+      0px 5.327px 3.044px 0px rgba(3, 2, 13, 0.03),
+      0px 2.283px 2.283px 0px rgba(3, 2, 13, 0.05),
+      0px 0.761px 1.522px 0px rgba(3, 2, 13, 0.06);
+  }
+
+  .ui-shadow-sm-soft {
+    box-shadow:
+      0px 32.725px 9.133px 0px rgba(3, 2, 13, 0),
+      0px 21.309px 8.371px 0px rgba(3, 2, 13, 0.01),
+      0px 12.177px 6.849px 0px rgba(3, 2, 13, 0.03),
+      0px 5.327px 5.327px 0px rgba(3, 2, 13, 0.05),
+      0px 1.522px 3.044px 0px rgba(3, 2, 13, 0.06);
+  }
+
+  .ui-shadow-md-soft {
+    box-shadow:
+      0px 105.024px 29.681px 0px rgba(3, 2, 13, 0),
+      0px 66.972px 26.637px 0px rgba(3, 2, 13, 0.01),
+      0px 38.052px 22.831px 0px rgba(3, 2, 13, 0.02),
+      0px 16.743px 16.743px 0px rgba(3, 2, 13, 0.03),
+      0px 4.566px 9.133px 0px rgba(3, 2, 13, 0.04);
+  }
+
+  .ui-shadow-lg-soft {
+    box-shadow:
+      0px 200.915px 56.317px 0px rgba(20, 25, 36, 0),
+      0px 128.616px 51.751px 0px rgba(20, 25, 36, 0.01),
+      0px 72.299px 43.379px 0px rgba(20, 25, 36, 0.02),
+      0px 31.964px 31.964px 0px rgba(20, 25, 36, 0.03),
+      0px 8.371px 17.504px 0px rgba(20, 25, 36, 0.04);
+  }
+
+  .ui-shadow-xl-soft {
+    box-shadow:
+      0px 210.048px 58.6px 0px rgba(20, 25, 36, 0),
+      0px 134.705px 54.034px 0px rgba(20, 25, 36, 0.01),
+      0px 75.343px 45.663px 0px rgba(20, 25, 36, 0.03),
+      0px 33.486px 33.486px 0px rgba(20, 25, 36, 0.04),
+      0px 8.371px 18.265px 0px rgba(20, 25, 36, 0.05);
+  }
+
+  .ui-shadow-xs-medium {
+    box-shadow:
+      0px 14px 4px 0px rgba(3, 2, 13, 0),
+      0px 9px 4px 0px rgba(3, 2, 13, 0.02),
+      0px 5px 3px 0px rgba(3, 2, 13, 0.08),
+      0px 2px 2px 0px rgba(3, 2, 13, 0.14),
+      0px 1px 1px 0px rgba(3, 2, 13, 0.16);
+  }
+
+  .ui-shadow-sm-medium {
+    box-shadow:
+      0px 33px 9px 0px rgba(3, 2, 13, 0),
+      0px 21px 8px 0px rgba(3, 2, 13, 0.02),
+      0px 12px 7px 0px rgba(3, 2, 13, 0.08),
+      0px 5px 5px 0px rgba(3, 2, 13, 0.14),
+      0px 1px 3px 0px rgba(3, 2, 13, 0.16);
+  }
+
+  .ui-shadow-md-medium {
+    box-shadow:
+      0px 105px 29px 0px rgba(3, 2, 13, 0),
+      0px 67px 27px 0px rgba(3, 2, 13, 0.02),
+      0px 38px 23px 0px rgba(3, 2, 13, 0.06),
+      0px 17px 17px 0px rgba(3, 2, 13, 0.1),
+      0px 4px 9px 0px rgba(3, 2, 13, 0.12);
+  }
+
+  .ui-shadow-lg-medium {
+    box-shadow:
+      0px 201px 56px 0px rgba(20, 25, 36, 0),
+      0px 129px 51px 0px rgba(20, 25, 36, 0.02),
+      0px 72px 43px 0px rgba(20, 25, 36, 0.06),
+      0px 32px 32px 0px rgba(20, 25, 36, 0.1),
+      0px 8px 18px 0px rgba(20, 25, 36, 0.12);
+  }
+
+  .ui-shadow-xl-medium {
+    box-shadow:
+      0px 210px 59px 0px rgba(20, 25, 36, 0),
+      0px 134px 54px 0px rgba(20, 25, 36, 0.02),
+      0px 76px 45px 0px rgba(20, 25, 36, 0.08),
+      0px 34px 34px 0px rgba(20, 25, 36, 0.13),
+      0px 8px 18px 0px rgba(20, 25, 36, 0.15);
+  }
+
+  .ui-shadow-xs-strong {
+    box-shadow:
+      0px 14px 4px 0px rgba(3, 2, 13, 0.01),
+      0px 9px 4px 0px rgba(3, 2, 13, 0.09),
+      0px 5px 3px 0px rgba(3, 2, 13, 0.3),
+      0px 2px 2px 0px rgba(3, 2, 13, 0.51),
+      0px 1px 1px 0px rgba(3, 2, 13, 0.59);
+  }
+
+  .ui-shadow-sm-strong {
+    box-shadow:
+      0px 49px 14px 0px rgba(3, 2, 13, 0.01),
+      0px 32px 13px 0px rgba(3, 2, 13, 0.09),
+      0px 18px 11px 0px rgba(3, 2, 13, 0.3),
+      0px 8px 8px 0px rgba(3, 2, 13, 0.51),
+      0px 2px 4px 0px rgba(3, 2, 13, 0.59);
+  }
+
+  .ui-shadow-md-strong {
+    box-shadow:
+      0px 105px 29px 0px rgba(3, 2, 13, 0.01),
+      0px 67px 27px 0px rgba(3, 2, 13, 0.09),
+      0px 38px 23px 0px rgba(3, 2, 13, 0.3),
+      0px 17px 17px 0px rgba(3, 2, 13, 0.51),
+      0px 4px 9px 0px rgba(3, 2, 13, 0.59);
+  }
+
+  .ui-shadow-lg-strong {
+    box-shadow:
+      0px 201px 56px 0px rgba(0, 0, 0, 0.01),
+      0px 129px 51px 0px rgba(0, 0, 0, 0.08),
+      0px 72px 43px 0px rgba(0, 0, 0, 0.28),
+      0px 32px 32px 0px rgba(0, 0, 0, 0.47),
+      0px 8px 18px 0px rgba(0, 0, 0, 0.54);
+  }
+
+  .ui-shadow-xl-strong {
+    box-shadow:
+      0px 210px 59px 0px rgba(0, 0, 0, 0.01),
+      0px 134px 54px 0px rgba(0, 0, 0, 0.09),
+      0px 76px 45px 0px rgba(0, 0, 0, 0.3),
+      0px 34px 34px 0px rgba(0, 0, 0, 0.51),
+      0px 8px 18px 0px rgba(0, 0, 0, 0.59);
+  }
+}

package/core/styles.components.css

@@ -1,9 +1,10 @@
 @import "./styles/buttons.css";
+@import "./styles/dropdowns.css";
+@import "./styles/forms.css";
 @import "./styles/layout.css";
+@import "./styles/shadows.css";
 @import "./styles/text.css";
-@import "./styles/forms.css";
 @import "./styles/toggles.css";
-@import "./styles/dropdowns.css";
 
 @layer components {
   .ui-input {

package/index.d.ts

@@ -188,14 +188,20 @@ export default Footer;
 //# sourceMappingURL=Footer.d.ts.map
 }
 
+declare module '@ably/ui/core/Icon/secondary-colors' {
+export const defaultIconSecondaryColor: (name: string) => string | undefined;
+//# sourceMappingURL=secondary-colors.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon' {
 type IconProps = {
     name: string;
     size?: string;
     color?: string;
+    secondaryColor?: string;
     additionalCSS?: string;
 };
-const Icon: ({ name, size, color, additionalCSS, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element;
+const Icon: ({ name, size, color, secondaryColor, additionalCSS, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }
@@ -587,6 +593,32 @@ export default Notice;
 //# sourceMappingURL=Notice.d.ts.map
 }
 
+declare module '@ably/ui/core/ProductTile/data' {
+export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
+type Products = Record<ProductName, {
+    label: string;
+    description: string;
+    link?: string;
+    icon?: string;
+    unavailable?: boolean;
+}>;
+export const products: Products;
+export {};
+//# sourceMappingURL=data.d.ts.map
+}
+
+declare module '@ably/ui/core/ProductTile' {
+import { ProductName } from "@ably/ui/core/ProductTile/data";
+type ProductTileProps = {
+    name: ProductName;
+    selected?: boolean;
+    currentPage?: boolean;
+};
+const ProductTile: ({ name, selected, currentPage }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductTile;
+//# sourceMappingURL=ProductTile.d.ts.map
+}
+
 declare module '@ably/ui/core/SignOutLink' {
 import { MouseEventHandler, ReactNode } from "react";
 import { AbsUrl } from "@ably/ui/core/Meganav";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.4.0",
+  "version": "14.5.0",
   "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",
@@ -40,7 +40,7 @@
     "eslint": "^8.57.0",
     "http-server": "14.1.1",
     "msw-storybook-addon": "^2.0.2",
-    "msw": "2.3.5",
+    "msw": "2.4.2",
     "prettier": "^3.2.5",
     "storybook": "^8.2.9",
     "svg-sprite": "^2.0.4",