ably-ui 8.7.0.dev.734c219 → 8.7.0.dev.779bcfa

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/lib/ably_ui/core/footer/component.css +1 -1
  4. data/lib/ably_ui/core/footer/footer.html.erb +3 -3
  5. data/lib/ably_ui/core/meganav/component.css +2 -2
  6. data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +1 -1
  7. data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +1 -1
  8. data/lib/ably_ui/core/styles.css +42 -135
  9. data/lib/ably_ui/version.rb +1 -1
  10. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 36806061b50991c766671144fc54e7a4ccfcff4beac769153f696f2a38e43da8
4
- data.tar.gz: e20a19439b7ab8e037be595fd85ea1681556b415763d22bc10b56e97b84e0033
3
+ metadata.gz: 8fcbcb4fde3bb2665a6d1c592d9f4b0f5171e36ed56ee337c679ec4f2a089a96
4
+ data.tar.gz: cc494d6ab420af8ddd76b17d833ec421ed2f60c0cd74da72a27c42aeafb9ea0f
5
5
  SHA512:
6
- metadata.gz: c7628360e305be71a88986700a807acfcf3d3de2a156d60167391159db3a3716b4d8d707fbe3cd42e43192287790b881a2a73471bec01c21eb56916902c8b4ce
7
- data.tar.gz: 145e3281c62a1a5cb1f4791e530a11aa42c4a3ead2f50097e88b7a92286ccb4ab3e23cb6fa54c670260b33d0e227a0d78c65bc1ddbe90119d598029c5491a573
6
+ metadata.gz: b1380e04191dac32bbc47e08a53b82863b71c93fe31e67a5bba3d31f357e555cf2aec7a4f2b25525c800567b37fb19c5d3c2b90fd2bf0d9216115e9acb1d2f6f
7
+ data.tar.gz: 50d64b35814a266f74dc5e40c1d8391149013abfe21e522e471dabd43cd0a80b1e85bb42b7bc9338c4f1fc859a796ce68212bb6bf5382c2f82f9022abf728668
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (8.7.0.dev.2b71529)
4
+ ably-ui (8.7.0.dev.579e0ab)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
data/lib/ably_ui/core/footer/component.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-footer-col-title {
3
- @apply font-jetbrains_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 {
data/lib/ably_ui/core/footer/footer.html.erb CHANGED
@@ -1,12 +1,12 @@
1
- <footer class="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
1
+ <footer class="bg-light-grey font-manrope 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-jetbrains_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-manrope 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>
data/lib/ably_ui/core/meganav/component.css CHANGED
@@ -97,11 +97,11 @@
97
97
  }
98
98
 
99
99
  .ui-meganav-media-heading {
100
- @apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
100
+ @apply text-menu3 text-cool-black font-bold font-manrope 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-manrope font-medium text-dark-grey leading-normal;
104
+ @apply text-p3 font-manrope font-medium text-dark-grey;
105
105
  }
106
106
 
107
107
  .ui-meganav-overline {
data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb CHANGED
@@ -76,7 +76,7 @@
76
76
  </ul>
77
77
  </div>
78
78
  <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
79
- <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
79
+ <h3 class="ui-meganav-overline uppercase" id=meganav-developers-panel-quick-links">
80
80
  Quick links
81
81
  </h3>
82
82
  <ul aria-labelledby="meganav-developers-panel-quick-links">
data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.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/styles.css CHANGED
@@ -1,132 +1,38 @@
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;
3
+ --color-cool-black: #03020d;
4
+ --color-active-orange: #ff5416;
5
+ --color-red-orange: #e40000;
6
+ --color-white: #ffffff;
7
+ --color-electric-cyan: #4ad4ff;
8
+ --color-zingy-green: #08ff13;
9
+ --color-bright-red: #fe372b;
26
10
  --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;
11
+ --color-jazzy-pink: #ff17d2;
12
+ --color-extra-light-grey: #f8fafc;
13
+ --color-light-grey: #f4f8fb;
14
+ --color-mid-grey: #c6ced9;
15
+ --color-dark-grey: #667085;
16
+ --color-charcoal-grey: #2b303b;
17
+ --color-gui-default: #006edc;
18
+ --color-gui-hover: #0862b9;
19
+ --color-gui-active: #074095;
20
+ --color-gui-default-dark: #4da6ff;
21
+ --color-gui-hover-dark: #2894ff;
22
+ --color-gui-active-dark: #0080ff;
91
23
  --color-gui-focus: #80b9f2;
92
24
  --color-gui-focus-outline: #80b9f2;
93
25
  --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);
26
+ --color-gui-unavailable: #a8a8a8;
27
+ --color-gui-error: #fb0c0c;
28
+ --color-gui-success: #11cb24;
123
29
 
124
30
  /* 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);
31
+ --syntax-black: var(--color-cool-black);
32
+ --syntax-dark-grey: var(--color-dark-grey);
33
+ --syntax-mid-grey: var(--color-mid-grey);
34
+ --syntax-light-grey: var(--color-light-grey);
35
+ --syntax-extra-light-grey: var(--color-extra-light-grey);
130
36
  --syntax-orange: #e78c45;
131
37
  --syntax-yellow: #e7c547;
132
38
  --syntax-blue: #3490ec;
@@ -134,6 +40,10 @@
134
40
  --syntax-red: #d54e53;
135
41
  --syntax-lilac: #bb87d3;
136
42
 
43
+ /* New Neutral colors */
44
+ --color-neutral-900: #39414e;
45
+ --color-neutral-500: #c6ced9;
46
+
137
47
  /* uptime status colors */
138
48
  --uptime-color-up: #39b54a;
139
49
  --uptime-color-trouble: #e87623;
@@ -209,10 +119,8 @@
209
119
  --lh-dense: 1;
210
120
  --lh-tight: 1.125;
211
121
  --lh-snug: 1.15;
212
- --lh-min-normal: 1.2;
213
122
  --lh-normal: 1.25;
214
123
  --lh-relaxed: 1.45;
215
- --lh-extra-relaxed: 1.6;
216
124
 
217
125
  --ls-tighten-0_025: -0.025em;
218
126
  --ls-tighten-0_02: -0.02em;
@@ -431,53 +339,53 @@
431
339
  @layer components {
432
340
  .ui-text-title {
433
341
  @apply font-manrope font-extrabold text-cool-black;
434
- @apply text-title-xs xs:text-title xl:text-title-xl;
342
+ @apply text-title-xs xs:text-title xl:text-title-xl leading-tight;
435
343
  @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
436
344
  }
437
345
 
438
346
  .ui-text-h1 {
439
347
  @apply font-manrope font-extrabold text-cool-black;
440
- @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
348
+ @apply text-h1-xs xs:text-h1 xl:text-h1-xl leading-tight;
441
349
  @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
442
350
  }
443
351
 
444
352
  .ui-text-h2 {
445
353
  @apply font-manrope font-extrabold text-cool-black;
446
- @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
354
+ @apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-tight;
447
355
  @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
448
356
  }
449
357
 
450
358
  .ui-text-h3 {
451
359
  @apply font-manrope font-extrabold text-cool-black;
452
- @apply text-h3;
360
+ @apply text-h3 leading-tight;
453
361
  @apply tracking-tighten-0.005;
454
362
  }
455
363
 
456
364
  .ui-text-h4 {
457
365
  @apply font-manrope font-extrabold text-cool-black;
458
- @apply text-h4;
366
+ @apply text-h4 leading-tight;
459
367
  @apply tracking-tighten-0.0015;
460
368
  }
461
369
 
462
370
  .ui-text-h5 {
463
371
  @apply font-manrope font-extrabold text-cool-black;
464
- @apply text-h5;
372
+ @apply text-h5 leading-tight;
465
373
  @apply tracking-tighten-0.0025;
466
374
  }
467
375
 
468
376
  .ui-text-p1 {
469
377
  @apply font-manrope font-medium text-charcoal-grey;
470
- @apply text-p1;
378
+ @apply text-p1 leading-relaxed;
471
379
  }
472
380
 
473
381
  .ui-text-p2 {
474
382
  @apply font-manrope font-medium text-charcoal-grey;
475
- @apply text-p2;
383
+ @apply text-p2 leading-relaxed;
476
384
  }
477
385
 
478
386
  .ui-text-p3 {
479
387
  @apply font-manrope font-medium text-charcoal-grey;
480
- @apply text-p3;
388
+ @apply text-p3 leading-relaxed;
481
389
  }
482
390
 
483
391
  .ui-text-standfirst {
@@ -493,7 +401,7 @@
493
401
  }
494
402
 
495
403
  .ui-text-sub-header {
496
- @apply font-manrope font-semibold text-neutral-800;
404
+ @apply font-manrope font-semibold text-neutral-900;
497
405
  @apply text-sub-header-xs xs:text-sub-header leading-normal;
498
406
  }
499
407
 
@@ -569,8 +477,7 @@
569
477
 
570
478
  .ui-ordered-list li,
571
479
  .ui-unordered-list li {
572
- @apply font-medium font-manrope tracking-widen-0;
573
- line-height: var(--lh-extra-relaxed);
480
+ @apply font-medium font-manrope tracking-widen-0 leading-relaxed;
574
481
  }
575
482
 
576
483
  .ui-unordered-list-with-emphasis {
data/lib/ably_ui/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '8.7.0.dev.734c219'
2
+ VERSION = '8.7.0.dev.779bcfa'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ably-ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 8.7.0.dev.734c219
4
+ version: 8.7.0.dev.779bcfa
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2023-08-11 00:00:00.000000000 Z
13
+ date: 2023-06-19 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component