ably-ui 11.7.1.dev.d409fff → 11.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/README.md +7 -7
  4. data/lib/ably_ui/core/code/component.css +0 -2
  5. data/lib/ably_ui/core/featured_link/component.css +15 -0
  6. data/lib/ably_ui/core/featured_link/component.js +1 -1
  7. data/lib/ably_ui/core/featured_link/featured_link.html.erb +5 -14
  8. data/lib/ably_ui/core/featured_link/featured_link.rb +1 -3
  9. data/lib/ably_ui/core/footer/component.css +3 -3
  10. data/lib/ably_ui/core/footer/footer.html.erb +13 -13
  11. data/lib/ably_ui/core/meganav/component.css +6 -6
  12. data/lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb +1 -1
  13. data/lib/ably_ui/core/notice/notice.html.erb +2 -2
  14. data/lib/ably_ui/core/styles.css +94 -225
  15. data/lib/ably_ui/version.rb +1 -1
  16. metadata +9 -11
  17. data/lib/ably_ui/core/fonts/jetBrains-mono.css +0 -3
  18. data/lib/ably_ui/core/fonts/manrope.css +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 567f511aac0ed6dad1e59498e0ebc6fd6a28108471d636a9b634041bfa51bf42
4
- data.tar.gz: 78f2e6b22592d2a9c9180d1f6ae88ba68366d36ccfe07de125a85de732019154
3
+ metadata.gz: 2afa7302e5340d5635d86b73c4902271191e9da6bd9fd22db0ed876cab957636
4
+ data.tar.gz: dd26ea7b43f4b72375f9ba2ce831094bd66286a13d4d0747d48182e9a75afd62
5
5
  SHA512:
6
- metadata.gz: 7ad42cc1362ba1e6074134e1226bf3db462a3fa5b97219cf1c24681ddb44a5a398343a5cc9789a40792aa5f55fe337a7ac412e717f48146b60ca6f8fef4c7a00
7
- data.tar.gz: 810bef9cce6465b2e518ce150b5aec35b80ac422a74504845447f249ce3ddebdb3249acf789612cd9d4bc5941a0604060fd75ce0334245a480d44e0bb237b000
6
+ metadata.gz: b36a930eafd6c384b55e60fa99328ffdbbe60200a83d5b7fc5589401040e5790d43b3cfc06557bd9a6b056fbfc4b256c955c39e258be746175b6e022bca35209
7
+ data.tar.gz: 2f03873dfab2ad7de45d5783b1e426563a55f52ae4fe7aa97f0c66fe5565d7a8191a816b345b3156e562a75c58b04272dd1ecc6789ce4a5b448045cd5b794f78
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (11.7.1.dev.d65c98c)
4
+ ably-ui (8.7.0.dev.827e917)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
data/README.md CHANGED
@@ -75,12 +75,12 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
75
75
  1. Add AblyUI to your project
76
76
  2. Add TailwindCSS to your project
77
77
  1. By project type:
78
- 1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
79
- 2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
80
- 1. Add postCSS import with `npm install postcss-import`
81
- 1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
- 1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
83
- 1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
78
+ 1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
79
+ 2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
80
+ 1. Add postCSS import with `npm install postcss-import`
81
+ 1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
+ 2. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
83
+ 3. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
84
84
  3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
85
85
  4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
86
86
 
@@ -233,7 +233,7 @@ For `npm`:
233
233
  ```bash
234
234
  # in the root directory
235
235
  yarn link
236
- # in the "preview" directory
236
+ # in the the "preview" directory
237
237
  yarn link @ably/ui
238
238
  ```
239
239
 
data/lib/ably_ui/core/code/component.css CHANGED
@@ -1,7 +1,5 @@
1
1
  @layer base {
2
2
  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
3
- @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
4
- @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
5
3
  }
6
4
 
7
5
  @layer components {
data/lib/ably_ui/core/featured_link/component.css CHANGED
@@ -1 +1,16 @@
1
+ @layer components {
2
+ .ui-featured-link {
3
+ @apply font-sans font-medium block;
4
+ @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
+ }
6
+
7
+ .ui-featured-link:hover svg {
8
+ @apply left-0;
9
+ }
10
+
11
+ .ui-featured-link-icon {
12
+ transition: left 100ms ease-in-out;
13
+ @apply align-middle ml-8 relative -top-1 -left-4;
14
+ }
15
+ }
1
16
 
data/lib/ably_ui/core/featured_link/component.js CHANGED
@@ -1 +1 @@
1
- !function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));
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.FeaturedLink=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
data/lib/ably_ui/core/featured_link/featured_link.html.erb CHANGED
@@ -1,15 +1,6 @@
1
- <%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
- <% if @reverse %>
3
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
4
- size: "calc(var(--featured-link-icon-size) * 1.25)",
5
- color: @icon_color,
6
- additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
7
- <%= content -%>
8
- <% else %>
9
- <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
10
- size: "calc(var(--featured-link-icon-size) * 1.25)",
11
- color: @icon_color,
12
- additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
13
- <% end %>
14
-
1
+ <%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
+ <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
3
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
4
+ color: @icon_color,
5
+ additional_css: "ui-featured-link-icon")) %>
15
6
  <% end %>
data/lib/ably_ui/core/featured_link/featured_link.rb CHANGED
@@ -3,17 +3,15 @@ module AblyUi
3
3
  class FeaturedLink < ViewComponent::Base
4
4
  def initialize(
5
5
  url:,
6
- text_size: 'text-p2',
6
+ text_size: 'text-menu3',
7
7
  icon_color: 'text-cool-black',
8
8
  flush: false,
9
- reverse: false,
10
9
  additional_css: ''
11
10
  )
12
11
  @url = url
13
12
  @text_size = text_size
14
13
  @icon_color = icon_color
15
14
  @flush = flush
16
- @reverse = reverse
17
15
  @additional_css = additional_css
18
16
  end
19
17
  end
data/lib/ably_ui/core/footer/component.css CHANGED
@@ -1,14 +1,14 @@
1
1
  @layer components {
2
2
  .ui-footer-col-title {
3
- @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
3
+ @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
4
4
  }
5
5
 
6
6
  .ui-footer-menu-row-link {
7
- @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
7
+ @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
data/lib/ably_ui/core/footer/footer.html.erb CHANGED
@@ -1,12 +1,12 @@
1
- <footer class="bg-light-grey font-sans antialiased leading-normal" data-id="footer">
1
+ <footer class="bg-light-grey font-sans antialiased" data-id="footer">
2
2
  <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
3
3
  <div class="col-span-full md:col-span-2">
4
4
  <div class="flex flex-row p-menu-row-snug">
5
5
  <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
6
- <h2 class="text-overline2 col-span-full font-mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
6
+ <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
7
7
  </div>
8
8
  <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
9
- <p class="font-sans text-p3 py-16 font-bold p-menu-row-snug">
9
+ <p class="text-p3 py-16 font-medium p-menu-row-snug">
10
10
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
11
11
  </p>
12
12
  </div>
@@ -174,7 +174,7 @@
174
174
  >
175
175
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
176
176
  </a>
177
- <div class="pl-16 text-menu3 font-sans font-medium">
177
+ <div class="pl-16 text-menu3 font-light">
178
178
  <strong class="block font-medium">We&apos;re hiring!</strong>
179
179
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
180
180
  Learn more at Glassdoor
@@ -194,7 +194,7 @@
194
194
  >
195
195
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
196
196
  </a>
197
- <div class="text-menu3 font-sans font-medium">
197
+ <div class="text-menu3 font-light">
198
198
  <strong class="block font-medium">We&apos;re hiring!</strong>
199
199
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
200
200
  Learn more at Glassdoor
@@ -226,29 +226,29 @@
226
226
  <div class="flex mr-24">
227
227
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
228
228
  <div>
229
- <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
230
- <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
229
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
230
+ <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
231
231
  </div>
232
232
  </div>
233
233
  <div class="flex mr-24 md:col-start-2">
234
234
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
235
235
  <div>
236
- <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
237
- <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
236
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
237
+ <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
238
238
  </div>
239
239
  </div>
240
240
  <div class="flex mr-24 md:col-start-3">
241
241
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
242
242
  <div>
243
- <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
244
- <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
243
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
244
+ <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
245
245
  </div>
246
246
  </div>
247
247
  <div class="flex mr-24 md:col-start-4">
248
248
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
249
249
  <div>
250
- <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
251
- <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
250
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
251
+ <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
252
252
  </div>
253
253
  </div>
254
254
  </div>
data/lib/ably_ui/core/meganav/component.css CHANGED
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .ui-meganav-link {
54
- @apply text-menu2 font-bold block font-sans;
54
+ @apply text-menu2 font-medium block;
55
55
  @apply mr-12 lg:mr-24 px-0 py-20;
56
56
  @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
57
57
  @apply transition-colors;
@@ -63,13 +63,13 @@
63
63
 
64
64
  .ui-meganav-mobile-link {
65
65
  @apply p-menu-row relative -left-8 w-extend-8;
66
- @apply text-menu2 font-bold font-mono font-medium block text-cool-black text-left;
66
+ @apply text-menu2 font-medium block text-cool-black text-left;
67
67
  @apply flex items-center;
68
68
  @apply focus:text-gui-focus focus:outline-none;
69
69
  }
70
70
 
71
71
  .ui-meganav-account-link {
72
- @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
72
+ @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
73
73
  }
74
74
 
75
75
  .ui-meganav-content {
@@ -97,15 +97,15 @@
97
97
  }
98
98
 
99
99
  .ui-meganav-media-heading {
100
- @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
100
+ @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
101
101
  }
102
102
 
103
103
  .ui-meganav-media-copy {
104
- @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
104
+ @apply text-p3 text-dark-grey font-light;
105
105
  }
106
106
 
107
107
  .ui-meganav-overline {
108
- @apply text-overline2 text-cool-black uppercase font-bold font-mono tracking-widen-0.16 p-overline;
108
+ @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
109
109
  }
110
110
 
111
111
  .ui-meganav-hr {
data/lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb CHANGED
@@ -7,7 +7,7 @@
7
7
  <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
8
8
  </div>
9
9
 
10
- <p class="text-p2 font-bold text-cool-black mb-24 leading-normal" style="max-width: 330px">
10
+ <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
11
11
  Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
12
12
  realtime, and lets you focus on your code.
13
13
  </p>
data/lib/ably_ui/core/notice/notice.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%# Note the style attribute is used for entry animation %>
2
2
  <%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
3
3
  <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
4
- <%= content_wrapper class: "font-medium w-full pr-8 text-p3 self-center" do %>
5
- <strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
4
+ <%= content_wrapper class: "font-light w-full pr-8 text-p3 self-center" do %>
5
+ <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
6
6
  <span class="pr-4"><%= @contents[:body_text] %></span>
7
7
  <span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
8
8
  <% end %>
data/lib/ably_ui/core/styles.css CHANGED
@@ -1,132 +1,34 @@
1
1
  @layer base {
2
2
  :root {
3
- /* Neutral colors */
4
- --color-neutral-000: #ffffff;
5
- --color-neutral-100: #f8fafc;
6
- --color-neutral-200: #f4f8fb;
7
- --color-neutral-300: #edf1f7;
8
- --color-neutral-400: #e2e7ef;
9
- --color-neutral-500: #c6ced9;
10
- --color-neutral-600: #adb6c2;
11
- --color-neutral-700: #89929f;
12
- --color-neutral-800: #667085;
13
- --color-neutral-900: #39414e;
14
- --color-neutral-1000: #2b303b;
15
- --color-neutral-1100: #202531;
16
- --color-neutral-1200: #141924;
17
- --color-neutral-1300: #03020d;
18
-
19
- /* Ably orange */
20
- --color-orange-100: #fff5f1;
21
- --color-orange-200: #ffe3d8;
22
- --color-orange-300: #ffc4ae;
23
- --color-orange-400: #ff9c79;
24
- --color-orange-500: #ff723f;
25
- --color-orange-600: #ff5416;
26
- --color-orange-700: #ff2739;
27
- --color-orange-800: #e40000;
28
- --color-orange-900: #b82202;
29
- --color-orange-1000: #751500;
30
- --color-orange-1100: #2a0b00;
31
-
32
- /* Secondary colours */
33
- --color-yellow-100: #fffbef;
34
- --color-yellow-200: #fff0ba;
35
- --color-yellow-300: #ffe27c;
36
- --color-yellow-400: #ffd43d;
37
- --color-yellow-500: #f8c100;
38
- --color-yellow-600: #e8a700;
39
- --color-yellow-700: #ac8600;
40
- --color-yellow-800: #654f00;
41
- --color-yellow-900: #291c01;
42
- --color-green-100: #f1fff1;
43
- --color-green-200: #b8ffbb;
44
- --color-green-300: #80ff85;
45
- --color-green-400: #08ff13;
46
- --color-green-500: #00e80b;
47
- --color-green-600: #00c008;
48
- --color-green-700: #008e06;
49
- --color-green-800: #005303;
50
- --color-green-900: #002a02;
51
- --color-blue-100: #f1fbff;
52
- --color-blue-200: #b8eaff;
53
- --color-blue-300: #80d9ff;
54
- --color-blue-400: #4ad4ff;
55
- --color-blue-500: #2cc0ff;
56
- --color-blue-600: #00a5ec;
57
- --color-blue-700: #0284cd;
58
- --color-blue-800: #004b75;
59
- --color-blue-900: #001b2a;
60
- --color-violet-100: #f7f2fe;
61
- --color-violet-200: #d8bcfb;
62
- --color-violet-300: #b986f8;
63
- --color-violet-400: #9951f5;
64
- --color-violet-500: #7a1bf2;
65
- --color-violet-600: #5f0bc9;
66
- --color-violet-700: #460894;
67
- --color-violet-800: #2d055e;
68
- --color-violet-900: #130228;
69
- --color-pink-100: #fff1fc;
70
- --color-pink-200: #ffb8f1;
71
- --color-pink-300: #ff80e6;
72
- --color-pink-400: #ff47db;
73
- --color-pink-500: #ff17d2;
74
- --color-pink-600: #d400ab;
75
- --color-pink-700: #9c007e;
76
- --color-pink-800: #630050;
77
- --color-pink-900: #2a0022;
78
-
79
- /* GUI colours */
80
- /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
81
- --color-gui-blue-default-light: #006edc;
82
- --color-gui-blue-hover-light: #0862b9;
83
- --color-gui-blue-active-light: #074095;
84
- --color-gui-blue-default-dark: #4da6ff;
85
- --color-gui-blue-hover-dark: #2894ff;
86
- --color-gui-blue-active-dark: #0080ff;
87
- --color-gui-blue-focus: #80b9f2;
88
- --color-gui-unavailable: #a8a8a8;
89
- --color-gui-success-green: #11cb24;
90
- --color-gui-error-red: #fb0c0c;
91
- --color-gui-focus: #80b9f2;
3
+ --color-cool-black: #03020d;
4
+ --color-active-orange: #ff5416;
5
+ --color-red-orange: #e40000;
6
+ --color-white: #ffffff;
7
+ --color-electric-cyan: #4af7ff;
8
+ --color-zingy-green: #08ff13;
9
+ --color-bright-red: #ff2739;
10
+ --color-jazzy-pink: #ff17d2;
11
+ --color-extra-light-grey: #fafafb;
12
+ --color-light-grey: #f5f5f6;
13
+ --color-mid-grey: #d9d9da;
14
+ --color-dark-grey: #76767c;
15
+ --color-charcoal-grey: #292831;
16
+ --color-gui-default: #0073e6;
17
+ --color-gui-hover: #0867c4;
18
+ --color-gui-focus: #0073e6;
92
19
  --color-gui-focus-outline: #80b9f2;
20
+ --color-gui-active: #074095;
93
21
  --color-gui-visited: #4887c2;
94
-
95
- /* Colours replaced by neutral colours */
96
- --color-white: var(--color-neutral-000);
97
- --color-extra-light-grey: var(--color-neutral-100);
98
- --color-light-grey: var(--color-neutral-200);
99
- --color-mid-grey: var(--color-neutral-500);
100
- --color-dark-grey: var(--color-neutral-800);
101
- --color-charcoal-grey: var(--color-neutral-1000);
102
- --color-cool-black: var(--color-neutral-1300);
103
-
104
- /* Colours replaced by orange colours */
105
- --color-active-orange: var(--color-orange-600);
106
- --color-bright-red: var(--color-orange-700);
107
- --color-red-orange: var(--color-orange-800);
108
-
109
- /* Colours replaced by secondary colours */
110
- --color-electric-cyan: var(--color-blue-400);
111
- --color-zingy-green: var(--color-green-400);
112
- --color-jazzy-pink: var(--color-pink-500);
113
-
114
- /* Colours replaced by GUI colours */
115
- --color-gui-default: var(--color-gui-blue-default-light);
116
- --color-gui-hover: var(--color-gui-blue-hover-light);
117
- --color-gui-active: var(--color-gui-blue-active-light);
118
- --color-gui-error: var(--color-gui-error-red);
119
- --color-gui-success: var(--color-gui-success-green);
120
- --color-gui-default-dark: var(--color-gui-blue-default-dark);
121
- --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
122
- --color-gui-active-dark: var(--color-gui-blue-active-dark);
22
+ --color-gui-unavailable: #a8a8a8;
23
+ --color-gui-error: #fb0c0c;
24
+ --color-gui-success: #11cb24;
123
25
 
124
26
  /* code syntax: theme */
125
- --syntax-black: var(--color-neutral-1300);
126
- --syntax-dark-grey: var(--color-neutral-800);
127
- --syntax-mid-grey: var(--color-neutral-500);
128
- --syntax-light-grey: var(--color-neutral-200);
129
- --syntax-extra-light-grey: var(--color-neutral-100);
27
+ --syntax-black: var(--color-cool-black);
28
+ --syntax-dark-grey: var(--color-dark-grey);
29
+ --syntax-mid-grey: var(--color-mid-grey);
30
+ --syntax-light-grey: var(--color-light-grey);
31
+ --syntax-extra-light-grey: var(--color-extra-light-grey);
130
32
  --syntax-orange: #e78c45;
131
33
  --syntax-yellow: #e7c547;
132
34
  --syntax-blue: #3490ec;
@@ -168,51 +70,44 @@
168
70
 
169
71
  --gradient-hot-pink: linear-gradient(
170
72
  80.2deg,
171
- var(--color-orange-700) 0%,
73
+ var(--color-bright-red) 0%,
172
74
  var(--color-jazzy-pink) 100%
173
75
  );
174
76
 
175
- --fs-title-xl: 3rem;
176
- --fs-title: 2.75rem;
177
- --fs-title-xs: 2.5rem;
178
- --fs-h1-xl: 2.5rem;
179
- --fs-h1: 2.25rem;
180
- --fs-h1-xs: 2rem;
181
-
182
- --fs-h2-xl: 2.125rem;
77
+ --fs-title-xl: 4rem;
78
+ --fs-title: 3.5rem;
79
+ --fs-title-xs: 3rem;
80
+ --fs-h1-xl: 3.5rem;
81
+ --fs-h1: 3rem;
82
+ --fs-h1-xs: 2.625rem;
83
+ --fs-h2-xl: 2.5rem;
183
84
  --fs-h2: 2rem;
184
- --fs-h2-xs: 1.75rem;
185
-
85
+ --fs-h2-xs: 1.875rem;
186
86
  --fs-h3: 1.5rem;
187
- --fs-h4: 1.25rem;
188
- --fs-h5: 1rem;
189
-
190
- --fs-p1: 1rem;
191
- --fs-p2: 0.938rem;
87
+ --fs-h4: 1.125rem;
88
+ --fs-p1: 1.125rem;
89
+ --fs-p2: 1rem;
192
90
  --fs-p3: 0.875rem;
193
91
  --fs-standfirst-xl: 2.25rem;
194
92
  --fs-standfirst: 1.5rem;
195
- --fs-sub-header: 1.125rem;
196
- --fs-sub-header-xs: 1.063rem;
93
+ --fs-sub-header: 1.5rem;
94
+ --fs-sub-header-xs: 1.125rem;
197
95
  --fs-overline1: 1rem;
198
96
  --fs-overline2: 0.875rem;
199
- --fs-btn1: 1rem;
200
- --fs-btn2: 0.938rem;
97
+ --fs-btn1: 1.125rem;
98
+ --fs-btn2: 1rem;
201
99
  --fs-btn3: 0.875rem;
202
- --fs-menu1: 1rem;
203
- --fs-menu2: 0.938rem;
100
+ --fs-menu1: 1.125rem;
101
+ --fs-menu2: 1rem;
204
102
  --fs-menu3: 0.875rem;
205
- --fs-quote: 1.25rem;
206
- --fs-code: 0.938rem;
207
- --fs-code2: 0.813rem;
103
+ --fs-quote: 1.5rem;
104
+ --fs-code: 0.875rem;
208
105
 
209
106
  --lh-dense: 1;
210
107
  --lh-tight: 1.125;
211
108
  --lh-snug: 1.15;
212
- --lh-min-normal: 1.2;
213
109
  --lh-normal: 1.25;
214
110
  --lh-relaxed: 1.45;
215
- --lh-extra-relaxed: 1.6;
216
111
 
217
112
  --ls-tighten-0_025: -0.025em;
218
113
  --ls-tighten-0_02: -0.02em;
@@ -220,9 +115,7 @@
220
115
  --ls-tighten-0_01: -0.01em;
221
116
  --ls-tighten-0_005: -0.005em;
222
117
  --ls-tighten-0_0025: -0.0025em;
223
- --ls-tighten-0_0015: -0.0015em;
224
118
  --ls-widen-0_1: 0.1em;
225
- --ls-widen-0_16: 0.16em;
226
119
  --ls-widen-0_15: 0.15em;
227
120
 
228
121
  --spacing-0: 0px;
@@ -237,7 +130,6 @@
237
130
  --spacing-20: 1.25rem;
238
131
  --spacing-24: 1.5rem;
239
132
  --spacing-32: 2rem;
240
- --spacing-36: 2.25rem;
241
133
  --spacing-40: 2.5rem;
242
134
  --spacing-48: 3rem;
243
135
  --spacing-64: 4rem;
@@ -285,7 +177,7 @@
285
177
  }
286
178
  @layer components {
287
179
  .ui-btn {
288
- @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
180
+ @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
289
181
  @apply hover:text-white hover:bg-active-orange;
290
182
  @apply active:text-white active:bg-red-orange;
291
183
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -309,7 +201,7 @@
309
201
  background-size: 200% 100%;
310
202
  background-position: 0% 0%;
311
203
 
312
- @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
204
+ @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
313
205
  @apply focus:outline-gui-focus;
314
206
  @apply inline-flex items-center justify-center;
315
207
  }
@@ -325,7 +217,7 @@
325
217
  }
326
218
 
327
219
  .ui-btn-invert {
328
- @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
220
+ @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
329
221
  @apply hover:text-white hover:bg-active-orange;
330
222
  @apply active:text-white active:bg-red-orange;
331
223
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -335,7 +227,7 @@
335
227
  }
336
228
 
337
229
  .ui-btn-secondary {
338
- @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
230
+ @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
339
231
  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
340
232
  @apply active:border-red-orange active:bg-white;
341
233
  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -345,7 +237,7 @@
345
237
  }
346
238
 
347
239
  .ui-btn-secondary-invert {
348
- @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
240
+ @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
349
241
  @apply hover:text-white hover:border-active-orange;
350
242
  @apply active:border-red-orange;
351
243
  @apply focus:outline-gui-focus;
@@ -430,53 +322,47 @@
430
322
  }
431
323
  @layer components {
432
324
  .ui-text-title {
433
- @apply font-sans font-extrabold text-cool-black;
325
+ @apply font-sans font-medium text-cool-black;
434
326
  @apply text-title-xs xs:text-title xl:text-title-xl;
435
- @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
327
+ @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
436
328
  }
437
329
 
438
330
  .ui-text-h1 {
439
- @apply font-sans font-extrabold text-cool-black;
331
+ @apply font-sans font-medium text-cool-black;
440
332
  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
441
- @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
333
+ @apply tracking-tighten-0.01;
442
334
  }
443
335
 
444
336
  .ui-text-h2 {
445
- @apply font-sans font-extrabold text-cool-black;
337
+ @apply font-sans font-medium text-cool-black;
446
338
  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
447
- @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
339
+ @apply tracking-tighten-0.005;
448
340
  }
449
341
 
450
342
  .ui-text-h3 {
451
- @apply font-sans font-extrabold text-cool-black;
343
+ @apply font-sans font-medium text-cool-black;
452
344
  @apply text-h3;
453
- @apply tracking-tighten-0.005;
345
+ @apply tracking-tighten-0.0025;
454
346
  }
455
347
 
456
348
  .ui-text-h4 {
457
- @apply font-sans font-extrabold text-cool-black;
349
+ @apply font-sans font-medium text-cool-black;
458
350
  @apply text-h4;
459
- @apply tracking-tighten-0.0015;
460
- }
461
-
462
- .ui-text-h5 {
463
- @apply font-sans font-extrabold text-cool-black;
464
- @apply text-h5;
465
- @apply tracking-tighten-0.0025;
351
+ @apply tracking-widen-0.1;
466
352
  }
467
353
 
468
354
  .ui-text-p1 {
469
- @apply font-sans font-medium text-charcoal-grey;
355
+ @apply font-sans font-light text-charcoal-grey;
470
356
  @apply text-p1;
471
357
  }
472
358
 
473
359
  .ui-text-p2 {
474
- @apply font-sans font-medium text-charcoal-grey;
360
+ @apply font-sans font-light text-charcoal-grey;
475
361
  @apply text-p2;
476
362
  }
477
363
 
478
364
  .ui-text-p3 {
479
- @apply font-sans font-medium text-charcoal-grey;
365
+ @apply font-sans font-light text-charcoal-grey;
480
366
  @apply text-p3;
481
367
  }
482
368
 
@@ -487,63 +373,60 @@
487
373
  }
488
374
 
489
375
  .ui-text-quote {
490
- @apply font-sans font-normal text-cool-black;
491
- @apply text-quote leading-normal;
492
- @apply tracking-tighten-0.0015;
376
+ @apply font-sans font-light text-cool-black;
377
+ @apply text-quote;
378
+ @apply tracking-tighten-0.025;
493
379
  }
494
380
 
495
381
  .ui-text-sub-header {
496
- @apply font-sans font-semibold text-neutral-800;
497
- @apply text-sub-header-xs xs:text-sub-header leading-normal;
382
+ @apply font-sans font-light text-dark-grey;
383
+ @apply text-sub-header-xs xs:text-sub-header;
384
+ @apply tracking-tighten-0.025;
498
385
  }
499
386
 
500
387
  .ui-text-overline1 {
501
- @apply font-mono font-medium text-active-orange uppercase;
502
- @apply text-overline1 leading-normal;
503
- @apply tracking-widen-0.16;
388
+ @apply font-sans font-medium text-dark-grey uppercase;
389
+ @apply text-overline1;
390
+ @apply tracking-widen-0.15;
504
391
  }
505
392
 
506
393
  .ui-text-overline2 {
507
- @apply font-mono font-medium text-active-orange uppercase;
508
- @apply text-overline2 leading-normal;
509
- @apply tracking-widen-0.16;
394
+ @apply font-sans font-medium text-dark-grey uppercase;
395
+ @apply text-overline2;
396
+ @apply tracking-widen-0.1;
510
397
  }
511
398
 
512
399
  .ui-text-menu1 {
513
- @apply font-sans font-medium text-cool-black;
514
- @apply text-menu1 leading-snug;
400
+ @apply font-sans font-light text-cool-black;
401
+ @apply text-menu1;
515
402
  }
516
403
 
517
404
  .ui-text-menu2 {
518
- @apply font-sans font-medium text-cool-black;
519
- @apply text-menu2 leading-snug;
405
+ @apply font-sans font-light text-cool-black;
406
+ @apply text-menu2;
520
407
  }
521
408
 
522
409
  .ui-text-menu3 {
523
- @apply font-sans font-medium text-cool-black;
524
- @apply text-menu3 leading-snug;
410
+ @apply font-sans font-light text-cool-black;
411
+ @apply text-menu3;
525
412
  }
526
413
 
527
414
  .ui-text-code {
528
- @apply font-mono font-medium text-code;
529
- }
530
-
531
- .ui-text-code2 {
532
- @apply font-mono font-medium text-code2;
415
+ @apply font-mono font-semibold text-code;
533
416
  }
534
417
 
535
418
  .ui-text-code-inline {
536
- @apply font-mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
419
+ @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
537
420
  }
538
421
 
539
422
  .ui-unordered-list {
540
- @apply text-p1 font-medium text-cool-black;
541
- @apply list-disc ml-32 my-16;
423
+ @apply text-p1 font-light text-cool-black;
424
+ @apply list-disc ml-32 mb-24;
542
425
  }
543
426
 
544
427
  .ui-ordered-list {
545
- @apply text-p1 font-medium text-charcoal-grey;
546
- @apply ml-32 my-16 list-decimal;
428
+ @apply text-p1 font-light text-cool-black;
429
+ @apply ml-32 mb-24 list-decimal;
547
430
  }
548
431
 
549
432
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -560,21 +443,11 @@
560
443
  }
561
444
 
562
445
  .ui-unordered-list ul ul {
563
- @apply list-square my-8;
564
- }
565
-
566
- .ui-unordered-list ul ul {
567
- @apply my-8;
568
- }
569
-
570
- .ui-ordered-list li,
571
- .ui-unordered-list li {
572
- @apply font-medium font-sans tracking-widen-0;
573
- line-height: var(--lh-extra-relaxed);
446
+ @apply list-square;
574
447
  }
575
448
 
576
449
  .ui-unordered-list-with-emphasis {
577
- @apply text-p1 font-medium text-cool-black;
450
+ @apply text-p1 font-light text-cool-black;
578
451
  @apply list-disc ml-32 mt-32 -mb-12;
579
452
  }
580
453
 
@@ -607,18 +480,14 @@
607
480
  @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
608
481
  @apply underline;
609
482
  }
610
-
611
- .ui-figcaption {
612
- @apply font-mono text-p3 text-neutral-800;
613
- }
614
483
  }
615
484
  @layer components {
616
485
  .ui-checkbox-p1 {
617
- @apply flex items-start mb-16 font-sans font-medium;
486
+ @apply flex items-start mb-16 font-sans;
618
487
  }
619
488
 
620
489
  .ui-checkbox-p2 {
621
- @apply flex items-start mb-12 font-sans font-medium;
490
+ @apply flex items-start mb-12 font-sans;
622
491
  }
623
492
 
624
493
  .ui-checkbox-input {
@@ -637,12 +506,12 @@
637
506
 
638
507
  .ui-checkbox-label-p1 {
639
508
  @apply select-none;
640
- @apply text-p1 font-medium text-cool-black;
509
+ @apply text-p1 font-light text-cool-black;
641
510
  }
642
511
 
643
512
  .ui-checkbox-label-p2 {
644
513
  @apply select-none;
645
- @apply text-p2 font-medium text-cool-black;
514
+ @apply text-p2 font-light text-cool-black;
646
515
  }
647
516
 
648
517
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -663,7 +532,7 @@
663
532
  }
664
533
 
665
534
  .ui-textarea {
666
- @apply font-sans font-medium text-cool-black text-p1;
535
+ @apply font-sans font-light text-cool-black text-p1;
667
536
  @apply p-input mb-16;
668
537
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
669
538
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
data/lib/ably_ui/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '11.7.1.dev.d409fff'
2
+ VERSION = '11.7.1'
3
3
  end
metadata CHANGED
@@ -1,16 +1,16 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ably-ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 11.7.1.dev.d409fff
4
+ version: 11.7.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dominik Piatek
8
8
  - Arti Mathanda
9
9
  - Bruce Thomas
10
- autorequire:
10
+ autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2023-11-24 00:00:00.000000000 Z
13
+ date: 2023-11-15 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -32,7 +32,7 @@ dependencies:
32
32
  - - "<"
33
33
  - !ruby/object:Gem::Version
34
34
  version: '2.50'
35
- description:
35
+ description:
36
36
  email:
37
37
  - dominik.piatek@ably.com
38
38
  - arti.mathanda@ably.com
@@ -91,8 +91,6 @@ files:
91
91
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
92
92
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
93
93
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
94
- - lib/ably_ui/core/fonts/jetBrains-mono.css
95
- - lib/ably_ui/core/fonts/manrope.css
96
94
  - lib/ably_ui/core/fonts/next.css
97
95
  - lib/ably_ui/core/fonts/source-code-pro.css
98
96
  - lib/ably_ui/core/footer/component.css
@@ -231,7 +229,7 @@ licenses:
231
229
  - Apache-2.0
232
230
  metadata:
233
231
  source_code_uri: https://github.com/ably/ably-ui
234
- post_install_message:
232
+ post_install_message:
235
233
  rdoc_options: []
236
234
  require_paths:
237
235
  - lib
@@ -242,12 +240,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
242
240
  version: '0'
243
241
  required_rubygems_version: !ruby/object:Gem::Requirement
244
242
  requirements:
245
- - - ">"
243
+ - - ">="
246
244
  - !ruby/object:Gem::Version
247
- version: 1.3.1
245
+ version: '0'
248
246
  requirements: []
249
- rubygems_version: 3.3.7
250
- signing_key:
247
+ rubygems_version: 3.2.3
248
+ signing_key:
251
249
  specification_version: 4
252
250
  summary: Shared component library and design system for Ably Real-time Ltd (ably.com)
253
251
  test_files: []
data/lib/ably_ui/core/fonts/jetBrains-mono.css DELETED
@@ -1,3 +0,0 @@
1
- @layer base {
2
- @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
3
- }
data/lib/ably_ui/core/fonts/manrope.css DELETED
@@ -1,3 +0,0 @@
1
- @layer base {
2
- @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
3
- }