ably-ui 8.7.0.dev.2b71529 → 8.7.0.dev.2c392ee

data/lib/ably_ui/core/styles.css

@@ -4,24 +4,20 @@
     --color-active-orange: #ff5416;
     --color-red-orange: #e40000;
     --color-white: #ffffff;
-    --color-electric-cyan: #4ad4ff;
+    --color-electric-cyan: #4af7ff;
     --color-zingy-green: #08ff13;
-    --color-bright-red: #fe372b;
-    --color-orange-700: #ff2739;
+    --color-bright-red: #ff2739;
     --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #f8fafc;
-    --color-light-grey: #f4f8fb;
-    --color-mid-grey: #c6ced9;
-    --color-dark-grey: #667085;
-    --color-charcoal-grey: #2b303b;
-    --color-gui-default: #006edc;
-    --color-gui-hover: #0862b9;
-    --color-gui-active: #074095;
-    --color-gui-default-dark: #4da6ff;
-    --color-gui-hover-dark: #2894ff;
-    --color-gui-active-dark: #0080ff;
-    --color-gui-focus: #80b9f2;
+    --color-extra-light-grey: #fafafb;
+    --color-light-grey: #f5f5f6;
+    --color-mid-grey: #d9d9da;
+    --color-dark-grey: #76767c;
+    --color-charcoal-grey: #292831;
+    --color-gui-default: #0073e6;
+    --color-gui-hover: #0867c4;
+    --color-gui-focus: #0073e6;
     --color-gui-focus-outline: #80b9f2;
+    --color-gui-active: #074095;
     --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
@@ -40,10 +36,6 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
-    /* New Neutral colors */
-    --color-neutral-900: #39414e;
-    --color-neutral-500: #c6ced9;
-
     /* uptime status colors */
     --uptime-color-up: #39b54a;
     --uptime-color-trouble: #e87623;
@@ -78,51 +70,44 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-orange-700) 0%,
+      var(--color-bright-red) 0%,
       var(--color-jazzy-pink) 100%
     );
 
-    --fs-title-xl: 3rem;
-    --fs-title: 2.75rem;
-    --fs-title-xs: 2.5rem;
-    --fs-h1-xl: 2.5rem;
-    --fs-h1: 2.25rem;
-    --fs-h1-xs: 2rem;
-
-    --fs-h2-xl: 2.125rem;
+    --fs-title-xl: 4rem;
+    --fs-title: 3.5rem;
+    --fs-title-xs: 3rem;
+    --fs-h1-xl: 3.5rem;
+    --fs-h1: 3rem;
+    --fs-h1-xs: 2.625rem;
+    --fs-h2-xl: 2.5rem;
     --fs-h2: 2rem;
-    --fs-h2-xs: 1.75rem;
-
+    --fs-h2-xs: 1.875rem;
     --fs-h3: 1.5rem;
-    --fs-h4: 1.25rem;
-    --fs-h5: 1rem;
-
-    --fs-p1: 1rem;
-    --fs-p2: 0.938rem;
+    --fs-h4: 1.125rem;
+    --fs-p1: 1.125rem;
+    --fs-p2: 1rem;
     --fs-p3: 0.875rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
-    --fs-sub-header: 1.125rem;
-    --fs-sub-header-xs: 1.063rem;
+    --fs-sub-header: 1.5rem;
+    --fs-sub-header-xs: 1.125rem;
     --fs-overline1: 1rem;
     --fs-overline2: 0.875rem;
-    --fs-btn1: 1rem;
-    --fs-btn2: 0.938rem;
+    --fs-btn1: 1.125rem;
+    --fs-btn2: 1rem;
     --fs-btn3: 0.875rem;
-    --fs-menu1: 1rem;
-    --fs-menu2: 0.938rem;
+    --fs-menu1: 1.125rem;
+    --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
-    --fs-quote: 1.25rem;
-    --fs-code: 0.938rem;
-    --fs-code2: 0.813rem;
+    --fs-quote: 1.5rem;
+    --fs-code: 0.875rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
-    --lh-min-normal: 1.2;
     --lh-normal: 1.25;
     --lh-relaxed: 1.45;
-    --lh-extra-relaxed: 1.6;
 
     --ls-tighten-0_025: -0.025em;
     --ls-tighten-0_02: -0.02em;
@@ -130,9 +115,7 @@
     --ls-tighten-0_01: -0.01em;
     --ls-tighten-0_005: -0.005em;
     --ls-tighten-0_0025: -0.0025em;
-    --ls-tighten-0_0015: -0.0015em;
     --ls-widen-0_1: 0.1em;
-    --ls-widen-0_16: 0.16em;
     --ls-widen-0_15: 0.15em;
 
     --spacing-0: 0px;
@@ -147,7 +130,6 @@
     --spacing-20: 1.25rem;
     --spacing-24: 1.5rem;
     --spacing-32: 2rem;
-    --spacing-36: 2.25rem;
     --spacing-40: 2.5rem;
     --spacing-48: 3rem;
     --spacing-64: 4rem;
@@ -195,7 +177,7 @@
 }
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium 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;
@@ -219,7 +201,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -235,7 +217,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium 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;
@@ -245,7 +227,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium 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;
@@ -255,7 +237,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium 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;
@@ -340,53 +322,47 @@
 }
 @layer components {
   .ui-text-title {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
+    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
+    @apply tracking-tighten-0.01;
   }
 
   .ui-text-h2 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h3 {
-    @apply font-manrope font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h3;
-    @apply tracking-tighten-0.005;
+    @apply tracking-tighten-0.0025;
   }
 
   .ui-text-h4 {
-    @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h4;
-    @apply tracking-tighten-0.0015;
-  }
-
-  .ui-text-h5 {
-    @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h5;
-    @apply tracking-tighten-0.0025;
+    @apply font-sans font-medium text-cool-black;
+    @apply text-h4 uppercase;
+    @apply tracking-widen-0.1;
   }
 
   .ui-text-p1 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-manrope font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -397,63 +373,60 @@
   }
 
   .ui-text-quote {
-    @apply font-manrope font-normal text-cool-black;
-    @apply text-quote leading-normal;
-    @apply tracking-tighten-0.0015;
+    @apply font-sans font-light text-cool-black;
+    @apply text-quote;
+    @apply tracking-tighten-0.025;
   }
 
   .ui-text-sub-header {
-    @apply font-manrope font-semibold text-neutral-900;
-    @apply text-sub-header-xs xs:text-sub-header leading-normal;
+    @apply font-sans font-light text-dark-grey;
+    @apply text-sub-header-xs xs:text-sub-header;
+    @apply tracking-tighten-0.025;
   }
 
   .ui-text-overline1 {
-    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline1 leading-normal;
-    @apply tracking-widen-0.16;
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline1;
+    @apply tracking-widen-0.15;
   }
 
   .ui-text-overline2 {
-    @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline2 leading-normal;
-    @apply tracking-widen-0.16;
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline2;
+    @apply tracking-widen-0.1;
   }
 
   .ui-text-menu1 {
-    @apply font-manrope font-medium text-cool-black;
-    @apply text-menu1 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu1;
   }
 
   .ui-text-menu2 {
-    @apply font-manrope font-medium text-cool-black;
-    @apply text-menu2 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu2;
   }
 
   .ui-text-menu3 {
-    @apply font-manrope font-medium text-cool-black;
-    @apply text-menu3 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu3;
   }
 
   .ui-text-code {
-    @apply font-jetbrains_mono font-medium text-code;
-  }
-
-  .ui-text-code2 {
-    @apply font-jetbrains_mono font-medium text-code2;
+    @apply font-mono font-semibold text-code;
   }
 
   .ui-text-code-inline {
-    @apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 my-16;
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mb-24;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16 list-decimal;
+    @apply text-p1 font-light text-cool-black;
+    @apply ml-32 mb-24 list-decimal;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -470,21 +443,11 @@
   }
 
   .ui-unordered-list ul ul {
-    @apply list-square my-8;
-  }
-
-  .ui-unordered-list ul ul {
-    @apply my-8;
-  }
-
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply font-medium font-manrope tracking-widen-0;
-    line-height: var(--lh-extra-relaxed);
+    @apply list-square;
   }
 
   .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-medium text-cool-black;
+    @apply text-p1 font-light text-cool-black;
     @apply list-disc ml-32 mt-32 -mb-12;
   }
 
@@ -520,11 +483,11 @@
 }
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-manrope font-medium;
+    @apply flex items-start mb-16 font-sans;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-manrope font-medium;
+    @apply flex items-start mb-12 font-sans;
   }
 
   .ui-checkbox-input {
@@ -543,12 +506,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
+    @apply text-p1 font-light text-cool-black;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
+    @apply text-p2 font-light text-cool-black;
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -569,7 +532,7 @@
   }
 
   .ui-textarea {
-    @apply font-manrope font-medium text-cool-black text-p1;
+    @apply font-sans font-light text-cool-black text-p1;
     @apply p-input mb-16;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;
@@ -582,6 +545,12 @@
     color: #76767c;
   }
 
+  .ui-textarea:-ms-input-placeholder {
+    /* CSS vars don't work in ::placeholder in Webkit :( */
+    /* color: var(--text-dark-grey); */
+    color: #76767c;
+  }
+
   .ui-textarea::placeholder {
     /* CSS vars don't work in ::placeholder in Webkit :( */
     /* color: var(--text-dark-grey); */

data/lib/ably_ui/core/uptime/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Uptime=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Uptime=t())}(this,(function(){return(()=>{"use strict";var e={};return e.default})()}));

data/lib/ably_ui/reset/scripts.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(function(){return(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()}));

data/lib/ably_ui/reset/styles.css

@@ -86,7 +86,8 @@
   abbr[title] {
     border-bottom: none; /* 1 */
     text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted; /* 2 */
   }
 
   /**
@@ -443,10 +444,19 @@
     resize: vertical;
   }
 
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
   input::-moz-placeholder, textarea::-moz-placeholder {
     color: #a0aec0;
   }
 
+  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
   input::placeholder,
   textarea::placeholder {
     color: #a0aec0;

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.7.0.dev.2b71529'
+  VERSION = '8.7.0.dev.2c392ee'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 8.7.0.dev.2b71529
+  version: 8.7.0.dev.2c392ee
 platform: ruby
 authors:
 - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-20 00:00:00.000000000 Z
+date: 2023-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -91,8 +91,6 @@ files:
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
-- lib/ably_ui/core/fonts/jetBrains-mono.css
-- lib/ably_ui/core/fonts/manrope.css
 - lib/ably_ui/core/fonts/next.css
 - lib/ably_ui/core/fonts/source-code-pro.css
 - lib/ably_ui/core/footer/component.css

data/lib/ably_ui/core/fonts/jetBrains-mono.css

@@ -1,3 +0,0 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
-}

data/lib/ably_ui/core/fonts/manrope.css

@@ -1,3 +0,0 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
-}