ably-ui 8.7.0.dev.e2257f1 → 8.7.0.dev.ed2f2fd

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6b6cdb122b2efc15e77b38bc9a9fbb707c71062b62a6d07a319e71e203e70113
4
- data.tar.gz: 7b694613cfe233c4faacde4272e2fac37806152e0fd666c03ee6fec25f52553e
3
+ metadata.gz: 9711adea12e89220610f7e0f2f25cfa069febe298aadf84699002a0823dd2bb8
4
+ data.tar.gz: ad772b0b1c2a0697ca085a4c2c5d31590cd43268c3d9051bace745bfe57ad5b1
5
5
  SHA512:
6
- metadata.gz: 939cb5329175024785bd40a85478aeef78c6924a0e6f73c22da7e09801186003a4c98c556899ac59b68b68c2209e6caf51f5919ce144d5ce95fc0a06437884a4
7
- data.tar.gz: 5a9576fc8d8022f6322ba8641e82b761fbcacc8a41ea48d7660f195c95854ad7c78a94a200c26b41eb286243145c1b7e014402ee36e1d72493825b1bba591e6e
6
+ metadata.gz: ba2064f9acf4bd10f0a52ae850fcb66843bca9c111a6c23d7edf2f2d8dc92c6dbf526cb9309014f2d99d8edbb6783df62f174f4cb7c011e89907d8dd07b5e39e
7
+ data.tar.gz: 551cbf6038d6ad4dfe0c1056ef78e520a903f20a30922e0cc0c3615fad3b4aeee3e41f37ede4baa38422139596088a77ea872777fc9b57cbd9851888d1ddaa50
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (8.7.0.dev.7fe5ede)
4
+ ably-ui (8.7.0.dev.fe9bd38)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
@@ -1,5 +1,7 @@
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");
3
5
  }
4
6
 
5
7
  @layer components {
@@ -0,0 +1,3 @@
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
+ }
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
3
+ }
@@ -69,7 +69,7 @@
69
69
  <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
70
70
  <div class="flex flex-col justify-center">
71
71
  <p class="ui-meganav-media-heading">Multiplayer reference guide</p>
72
- <p class="ui-meganav-media-copy">Learn about the core Ably concepts for Multiplayer collaboration.</p>
72
+ <p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
73
73
  </div>
74
74
  <% end %>
75
75
  </li>
@@ -4,20 +4,24 @@
4
4
  --color-active-orange: #ff5416;
5
5
  --color-red-orange: #e40000;
6
6
  --color-white: #ffffff;
7
- --color-electric-cyan: #4af7ff;
7
+ --color-electric-cyan: #4ad4ff;
8
8
  --color-zingy-green: #08ff13;
9
- --color-bright-red: #ff2739;
9
+ --color-bright-red: #fe372b;
10
+ --color-orange-700: #ff2739;
10
11
  --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;
19
- --color-gui-focus-outline: #80b9f2;
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;
20
19
  --color-gui-active: #074095;
20
+ --color-gui-default-dark: #4da6ff;
21
+ --color-gui-hover-dark: #2894ff;
22
+ --color-gui-active-dark: #0080ff;
23
+ --color-gui-focus: #80b9f2;
24
+ --color-gui-focus-outline: #80b9f2;
21
25
  --color-gui-visited: #4887c2;
22
26
  --color-gui-unavailable: #a8a8a8;
23
27
  --color-gui-error: #fb0c0c;
@@ -36,6 +40,10 @@
36
40
  --syntax-red: #d54e53;
37
41
  --syntax-lilac: #bb87d3;
38
42
 
43
+ /* New Neutral colors */
44
+ --color-neutral-900: #39414e;
45
+ --color-neutral-500: #c6ced9;
46
+
39
47
  /* uptime status colors */
40
48
  --uptime-color-up: #39b54a;
41
49
  --uptime-color-trouble: #e87623;
@@ -70,38 +78,43 @@
70
78
 
71
79
  --gradient-hot-pink: linear-gradient(
72
80
  80.2deg,
73
- var(--color-bright-red) 0%,
81
+ var(--color-orange-700) 0%,
74
82
  var(--color-jazzy-pink) 100%
75
83
  );
76
84
 
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;
85
+ --fs-title-xl: 3rem;
86
+ --fs-title: 2.75rem;
87
+ --fs-title-xs: 2.5rem;
88
+ --fs-h1-xl: 2.5rem;
89
+ --fs-h1: 2.25rem;
90
+ --fs-h1-xs: 2rem;
91
+
92
+ --fs-h2-xl: 2.125rem;
84
93
  --fs-h2: 2rem;
85
- --fs-h2-xs: 1.875rem;
94
+ --fs-h2-xs: 1.75rem;
95
+
86
96
  --fs-h3: 1.5rem;
87
- --fs-h4: 1.125rem;
88
- --fs-p1: 1.125rem;
89
- --fs-p2: 1rem;
97
+ --fs-h4: 1.25rem;
98
+ --fs-h5: 1rem;
99
+
100
+ --fs-p1: 1rem;
101
+ --fs-p2: 0.938rem;
90
102
  --fs-p3: 0.875rem;
91
103
  --fs-standfirst-xl: 2.25rem;
92
104
  --fs-standfirst: 1.5rem;
93
- --fs-sub-header: 1.5rem;
94
- --fs-sub-header-xs: 1.125rem;
105
+ --fs-sub-header: 1.125rem;
106
+ --fs-sub-header-xs: 1.063rem;
95
107
  --fs-overline1: 1rem;
96
108
  --fs-overline2: 0.875rem;
97
- --fs-btn1: 1.125rem;
98
- --fs-btn2: 1rem;
109
+ --fs-btn1: 1rem;
110
+ --fs-btn2: 0.938rem;
99
111
  --fs-btn3: 0.875rem;
100
- --fs-menu1: 1.125rem;
101
- --fs-menu2: 1rem;
112
+ --fs-menu1: 1rem;
113
+ --fs-menu2: 0.938rem;
102
114
  --fs-menu3: 0.875rem;
103
- --fs-quote: 1.5rem;
104
- --fs-code: 0.875rem;
115
+ --fs-quote: 1.25rem;
116
+ --fs-code: 0.938rem;
117
+ --fs-code2: 0.813rem;
105
118
 
106
119
  --lh-dense: 1;
107
120
  --lh-tight: 1.125;
@@ -115,7 +128,9 @@
115
128
  --ls-tighten-0_01: -0.01em;
116
129
  --ls-tighten-0_005: -0.005em;
117
130
  --ls-tighten-0_0025: -0.0025em;
131
+ --ls-tighten-0_0015: -0.0015em;
118
132
  --ls-widen-0_1: 0.1em;
133
+ --ls-widen-0_16: 0.16em;
119
134
  --ls-widen-0_15: 0.15em;
120
135
 
121
136
  --spacing-0: 0px;
@@ -130,6 +145,7 @@
130
145
  --spacing-20: 1.25rem;
131
146
  --spacing-24: 1.5rem;
132
147
  --spacing-32: 2rem;
148
+ --spacing-36: 2.25rem;
133
149
  --spacing-40: 2.5rem;
134
150
  --spacing-48: 3rem;
135
151
  --spacing-64: 4rem;
@@ -177,7 +193,7 @@
177
193
  }
178
194
  @layer components {
179
195
  .ui-btn {
180
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
196
+ @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
181
197
  @apply hover:text-white hover:bg-active-orange;
182
198
  @apply active:text-white active:bg-red-orange;
183
199
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -201,7 +217,7 @@
201
217
  background-size: 200% 100%;
202
218
  background-position: 0% 0%;
203
219
 
204
- @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
220
+ @apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
205
221
  @apply focus:outline-gui-focus;
206
222
  @apply inline-flex items-center justify-center;
207
223
  }
@@ -217,7 +233,7 @@
217
233
  }
218
234
 
219
235
  .ui-btn-invert {
220
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
236
+ @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
221
237
  @apply hover:text-white hover:bg-active-orange;
222
238
  @apply active:text-white active:bg-red-orange;
223
239
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -227,7 +243,7 @@
227
243
  }
228
244
 
229
245
  .ui-btn-secondary {
230
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
246
+ @apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
231
247
  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
232
248
  @apply active:border-red-orange active:bg-white;
233
249
  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -237,7 +253,7 @@
237
253
  }
238
254
 
239
255
  .ui-btn-secondary-invert {
240
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
256
+ @apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
241
257
  @apply hover:text-white hover:border-active-orange;
242
258
  @apply active:border-red-orange;
243
259
  @apply focus:outline-gui-focus;
@@ -322,48 +338,54 @@
322
338
  }
323
339
  @layer components {
324
340
  .ui-text-title {
325
- @apply font-sans font-medium text-cool-black;
326
- @apply text-title-xs xs:text-title xl:text-title-xl;
327
- @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
341
+ @apply font-manrope font-extrabold text-cool-black;
342
+ @apply text-title-xs xs:text-title xl:text-title-xl leading-tight;
343
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
328
344
  }
329
345
 
330
346
  .ui-text-h1 {
331
- @apply font-sans font-medium text-cool-black;
332
- @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
333
- @apply tracking-tighten-0.01;
347
+ @apply font-manrope font-extrabold text-cool-black;
348
+ @apply text-h1-xs xs:text-h1 xl:text-h1-xl leading-tight;
349
+ @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
334
350
  }
335
351
 
336
352
  .ui-text-h2 {
337
- @apply font-sans font-medium text-cool-black;
338
- @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
339
- @apply tracking-tighten-0.005;
353
+ @apply font-manrope font-extrabold text-cool-black;
354
+ @apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-tight;
355
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
340
356
  }
341
357
 
342
358
  .ui-text-h3 {
343
- @apply font-sans font-medium text-cool-black;
344
- @apply text-h3;
345
- @apply tracking-tighten-0.0025;
359
+ @apply font-manrope font-extrabold text-cool-black;
360
+ @apply text-h3 leading-7;
361
+ @apply tracking-tighten-0.005;
346
362
  }
347
363
 
348
364
  .ui-text-h4 {
349
- @apply font-sans font-medium text-cool-black;
350
- @apply text-h4;
351
- @apply tracking-widen-0.1;
365
+ @apply font-manrope font-extrabold text-cool-black;
366
+ @apply text-h4 leading-6;
367
+ @apply tracking-tighten-0.0015;
368
+ }
369
+
370
+ .ui-text-h5 {
371
+ @apply font-manrope font-extrabold text-cool-black;
372
+ @apply text-h5 leading-5;
373
+ @apply tracking-tighten-0.0025;
352
374
  }
353
375
 
354
376
  .ui-text-p1 {
355
- @apply font-sans font-light text-charcoal-grey;
356
- @apply text-p1;
377
+ @apply font-manrope font-medium text-charcoal-grey;
378
+ @apply text-p1 leading-6;
357
379
  }
358
380
 
359
381
  .ui-text-p2 {
360
- @apply font-sans font-light text-charcoal-grey;
361
- @apply text-p2;
382
+ @apply font-manrope font-medium text-charcoal-grey;
383
+ @apply text-p2 leading-5;
362
384
  }
363
385
 
364
386
  .ui-text-p3 {
365
- @apply font-sans font-light text-charcoal-grey;
366
- @apply text-p3;
387
+ @apply font-manrope font-medium text-charcoal-grey;
388
+ @apply text-p3 leading-4;
367
389
  }
368
390
 
369
391
  .ui-text-standfirst {
@@ -373,60 +395,63 @@
373
395
  }
374
396
 
375
397
  .ui-text-quote {
376
- @apply font-sans font-light text-cool-black;
377
- @apply text-quote;
378
- @apply tracking-tighten-0.025;
398
+ @apply font-manrope font-normal text-cool-black;
399
+ @apply text-quote leading-7;
400
+ @apply tracking-tighten-0.0015;
379
401
  }
380
402
 
381
403
  .ui-text-sub-header {
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;
404
+ @apply font-manrope font-semibold text-neutral-900;
405
+ @apply text-sub-header-xs xs:text-sub-header leading-7 xs:leading-6;
385
406
  }
386
407
 
387
408
  .ui-text-overline1 {
388
- @apply font-sans font-medium text-dark-grey uppercase;
389
- @apply text-overline1;
390
- @apply tracking-widen-0.15;
409
+ @apply font-jetbrains_mono font-medium text-active-orange uppercase;
410
+ @apply text-overline1 leading-normal;
411
+ @apply tracking-widen-0.16;
391
412
  }
392
413
 
393
414
  .ui-text-overline2 {
394
- @apply font-sans font-medium text-dark-grey uppercase;
395
- @apply text-overline2;
396
- @apply tracking-widen-0.1;
415
+ @apply font-jetbrains_mono font-medium text-active-orange uppercase;
416
+ @apply text-overline2 leading-normal;
417
+ @apply tracking-widen-0.16;
397
418
  }
398
419
 
399
420
  .ui-text-menu1 {
400
- @apply font-sans font-light text-cool-black;
401
- @apply text-menu1;
421
+ @apply font-manrope font-medium text-cool-black;
422
+ @apply text-menu1 leading-snug;
402
423
  }
403
424
 
404
425
  .ui-text-menu2 {
405
- @apply font-sans font-light text-cool-black;
406
- @apply text-menu2;
426
+ @apply font-manrope font-medium text-cool-black;
427
+ @apply text-menu2 leading-snug;
407
428
  }
408
429
 
409
430
  .ui-text-menu3 {
410
- @apply font-sans font-light text-cool-black;
411
- @apply text-menu3;
431
+ @apply font-manrope font-medium text-cool-black;
432
+ @apply text-menu3 leading-snug;
412
433
  }
413
434
 
414
435
  .ui-text-code {
415
- @apply font-mono font-semibold text-code;
436
+ @apply font-jetbrains_mono font-medium text-code;
437
+ }
438
+
439
+ .ui-text-code2 {
440
+ @apply font-jetbrains_mono font-medium text-code2;
416
441
  }
417
442
 
418
443
  .ui-text-code-inline {
419
- @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
444
+ @apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
420
445
  }
421
446
 
422
447
  .ui-unordered-list {
423
- @apply text-p1 font-light text-cool-black;
424
- @apply list-disc ml-32 mb-24;
448
+ @apply text-p1 font-medium text-cool-black;
449
+ @apply list-disc ml-32 my-16;
425
450
  }
426
451
 
427
452
  .ui-ordered-list {
428
- @apply text-p1 font-light text-cool-black;
429
- @apply ml-32 mb-24 list-decimal;
453
+ @apply text-p1 font-medium text-charcoal-grey;
454
+ @apply ml-32 my-16 list-decimal;
430
455
  }
431
456
 
432
457
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -443,11 +468,20 @@
443
468
  }
444
469
 
445
470
  .ui-unordered-list ul ul {
446
- @apply list-square;
471
+ @apply list-square my-8;
472
+ }
473
+
474
+ .ui-unordered-list ul ul {
475
+ @apply my-8;
476
+ }
477
+
478
+ .ui-ordered-list li,
479
+ .ui-unordered-list li {
480
+ @apply font-medium font-manrope tracking-widen-0 leading-relaxed;
447
481
  }
448
482
 
449
483
  .ui-unordered-list-with-emphasis {
450
- @apply text-p1 font-light text-cool-black;
484
+ @apply text-p1 font-medium text-cool-black;
451
485
  @apply list-disc ml-32 mt-32 -mb-12;
452
486
  }
453
487
 
@@ -483,11 +517,11 @@
483
517
  }
484
518
  @layer components {
485
519
  .ui-checkbox-p1 {
486
- @apply flex items-start mb-16 font-sans;
520
+ @apply flex items-start mb-16 font-manrope font-medium;
487
521
  }
488
522
 
489
523
  .ui-checkbox-p2 {
490
- @apply flex items-start mb-12 font-sans;
524
+ @apply flex items-start mb-12 font-manrope font-medium;
491
525
  }
492
526
 
493
527
  .ui-checkbox-input {
@@ -506,12 +540,12 @@
506
540
 
507
541
  .ui-checkbox-label-p1 {
508
542
  @apply select-none;
509
- @apply text-p1 font-light text-cool-black;
543
+ @apply text-p1 font-medium text-cool-black;
510
544
  }
511
545
 
512
546
  .ui-checkbox-label-p2 {
513
547
  @apply select-none;
514
- @apply text-p2 font-light text-cool-black;
548
+ @apply text-p2 font-medium text-cool-black;
515
549
  }
516
550
 
517
551
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -532,7 +566,7 @@
532
566
  }
533
567
 
534
568
  .ui-textarea {
535
- @apply font-sans font-light text-cool-black text-p1;
569
+ @apply font-manrope font-medium text-cool-black text-p1;
536
570
  @apply p-input mb-16;
537
571
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
538
572
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '8.7.0.dev.e2257f1'
2
+ VERSION = '8.7.0.dev.ed2f2fd'
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.e2257f1
4
+ version: 8.7.0.dev.ed2f2fd
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-06-07 00:00:00.000000000 Z
13
+ date: 2023-06-15 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -91,6 +91,8 @@ 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
94
96
  - lib/ably_ui/core/fonts/next.css
95
97
  - lib/ably_ui/core/fonts/source-code-pro.css
96
98
  - lib/ably_ui/core/footer/component.css