@ably/ui 5.2.0 → 6.0.1-dev.2e2d2c8

package/src/core/styles/forms.css

@@ -0,0 +1,50 @@
+@layer components {
+  .ui-checkbox-p1 {
+    @apply flex items-start mb-16 font-sans;
+  }
+
+  .ui-checkbox-p2 {
+    @apply flex items-start mb-12 font-sans;
+  }
+
+  .ui-checkbox-input {
+    @apply opacity-0 absolute h-20 w-20;
+  }
+
+  .ui-checkbox-styled {
+    @apply w-20 h-20 mr-16;
+    @apply bg-white flex flex-shrink-0 justify-center items-center;
+    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+  }
+
+  .ui-checkbox-styled-tick {
+    @apply hidden text-white;
+  }
+
+  .ui-checkbox-label-p1 {
+    @apply select-none;
+    @apply text-p1 font-light text-cool-black;
+  }
+
+  .ui-checkbox-label-p2 {
+    @apply select-none;
+    @apply text-p2 font-light text-cool-black;
+  }
+
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-gui-unavailable border;
+  }
+
+  .ui-checkbox-input:focus + .ui-checkbox-styled {
+    border-width: 0.125rem;
+    @apply border-gui-focus;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-dark-grey border;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
+    @apply block;
+  }
+}

package/src/core/styles/properties.css

@@ -45,10 +45,27 @@
     --icon-color-github: #000000;
 
     --gradient-active-orange: linear-gradient(
-      62deg,
-      var(--color-active-orange) 0,
-      var(--color-active-orange) 60%,
-      var(--color-red-orange) 100%
+      61.2deg,
+      var(--color-active-orange) 10.46%,
+      #fe5215 38.63%,
+      #fc4a13 54.38%,
+      #f73c10 67.07%,
+      #f1280a 78.13%,
+      #e90f04 88.02%,
+      var(--color-red-orange) 92.73%
+    );
+
+    /* Used for smooth transitions from gradient to non-gradient backgrounds */
+    --gradient-transparent: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    );
+
+    --gradient-hot-pink: linear-gradient(
+      80.2deg,
+      var(--color-bright-red) 0%,
+      var(--color-jazzy-pink) 100%
     );
 
     --fs-title-xl: 4rem;
@@ -73,11 +90,15 @@
     --fs-overline2: 0.875rem;
     --fs-btn1: 1.125rem;
     --fs-btn2: 1rem;
+    --fs-btn3: 0.875rem;
     --fs-menu1: 1.125rem;
     --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
     --fs-quote: 1.5rem;
+    --fs-code1: 1rem;
+    --fs-code2: 0.875rem;
 
+    --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
     --lh-normal: 1.25;
@@ -109,17 +130,24 @@
     --spacing-80: 5rem;
     --spacing-88: 5.5rem;
     --spacing-96: 6rem;
+    --spacing-128: 8rem;
     --spacing-160: 10rem;
     --spacing-256: 16rem;
 
-    --spacing-btn: 0.9375rem 1.5rem; /* 15px 24px */
-    --spacing-btn-small: 0.6875rem 1rem; /* 11px 16px */
+    --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
+    --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
+    --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
+    --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
     --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
     --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
     --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
+    --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
+    --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
+    --spacing-chip: 0.75rem 1rem; /* 6px 8px */
+    --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
 
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.

package/src/core/styles/text.css

@@ -14,7 +14,7 @@
   .ui-text-h2 {
     @apply font-sans font-medium text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h3 {
@@ -88,4 +88,65 @@
     @apply font-sans font-light text-cool-black;
     @apply text-menu3;
   }
+
+  .ui-text-code1 {
+    @apply font-mono font-normal text-code1;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
+  }
+
+  .ui-unordered-list {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mb-24;
+  }
+
+  .ui-unordered-list ul {
+    @apply ml-24 mt-16 list-circle;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply list-square;
+  }
+
+  .ui-unordered-list-with-emphasis {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mt-32 -mb-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div {
+    @apply relative -top-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div > strong {
+    @apply block;
+  }
+
+  .ui-unordered-list-with-emphasis ul {
+    margin-top: calc(var(--spacing-16) + var(--spacing-8));
+    @apply ml-24 list-disc;
+  }
+
+  .ui-unordered-list-with-emphasis ul ul {
+    @apply list-circle;
+  }
+
+  /* visited needs to come before :hover et all else it overrides them */
+  .ui-link:visited {
+    @apply text-gui-viewed;
+  }
+
+  .ui-link {
+    @apply hover:text-active-orange active:text-red-orange;
+    text-decoration-color: var(--color-active-orange);
+    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+  }
+
+  .ui-link:focus {
+    @apply focus:text-white focus:bg-active-orange focus:outline-none;
+    text-decoration: none;
+  }
 }

package/src/core/styles.components.css

@@ -1,6 +1,7 @@
 @import "./styles/buttons.css";
 @import "./styles/layout.css";
 @import "./styles/text.css";
+@import "./styles/forms.css";
 
 @layer components {
   .ui-input {

package/tailwind.config.js

@@ -44,12 +44,16 @@ module.exports = {
       "sub-header-xs": ["var(--fs-sub-header-xs)", "var(--lh-normal)"],
       overline1: ["var(--fs-overline1)", "var(--lh-normal)"],
       overline2: ["var(--fs-overline2)", "var(--lh-normal)"],
-      btn1: ["var(--fs-btn1)", "var(--lh-tight)"],
+      btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
       btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
+      btn3: ["var(--fs-btn2)", "var(--lh-tight)"],
+      btn4: ["var(--fs-btn3)", "var(--lh-dense)"],
       menu1: ["var(--fs-menu1)", "var(--lh-tight)"],
       menu2: ["var(--fs-menu2)", "var(--lh-tight)"],
       menu3: ["var(--fs-menu3)", "var(--lh-snug)"],
       quote: ["var(--fs-quote)", "var(--lh-relaxed)"],
+      code1: ["var(--fs-code1)", "var(--lh-relaxed)"],
+      code2: ["var(--fs-code2)", "var(--lh-relaxed)"],
     },
     colors: {
       transparent: "transparent",
@@ -90,6 +94,12 @@ module.exports = {
     padding: (theme) => ({
       btn: "var(--spacing-btn)",
       "btn-small": "var(--spacing-btn-small)",
+      "btn-xsmall": "var(--spacing-btn-xsmall)",
+      "btn-large": "var(--spacing-btn-large)",
+      chip: "var(--spacing-chip)",
+      "chip-small": "var(--spacing-chip-small)",
+      "chip-xsmall": "var(--spacing-chip-xsmall)",
+      "chip-large": "var(--spacing-chip-large)",
       "menu-row": "var(--spacing-menu-row)",
       "menu-row-snug": "var(--spacing-menu-row-snug)",
       "menu-row-title": "var(--spacing-menu-row-title)",
@@ -146,6 +156,7 @@ module.exports = {
     borderRadius: {
       none: "0",
       sm: "0.125rem",
+      md: "0.1875rem",
       lg: "0.5rem",
       xl: "0.75rem",
       full: "9999px",
@@ -158,6 +169,7 @@ module.exports = {
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
+        "gradient-hot-pink": "var(--gradient-hot-pink)",
       },
       transitionProperty: {
         input: "background-color, box-shadow",
@@ -180,6 +192,13 @@ module.exports = {
         8: "8",
       },
     },
+    listStyleType: {
+      none: "none",
+      disc: "disc",
+      decimal: "decimal",
+      square: "square",
+      circle: "circle",
+    },
   },
   variants: {
     extend: {
@@ -187,7 +206,9 @@ module.exports = {
       textColor: ["hover", "focus", "active", "group-focus", "disabled"],
       display: ["group-focus"],
       backgroundColor: ["hover", "focus", "active", "group-focus", "disabled"],
+      backgroundImage: ["hover", "active", "focus"],
       filter: ["hover"],
+      cursor: ["disabled"],
     },
   },
   corePlugins: {