@ably/ui 7.8.2-dev.b40c1c7 → 7.8.4-dev.f992ca8

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 (8) hide show
  1. package/core/fonts/source-code-pro.css +3 -0
  2. package/core/styles.css +17 -22
  3. package/package.json +1 -1
  4. package/src/core/Code/component.css +1 -3
  5. package/src/core/fonts/source-code-pro.css +3 -0
  6. package/src/core/styles/properties.css +4 -3
  7. package/src/core/styles/text.css +12 -16
  8. package/tailwind.config.js +12 -4
package/core/fonts/source-code-pro.css ADDED
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
3
+ }
package/core/styles.css CHANGED
@@ -15,9 +15,10 @@
15
15
  --color-charcoal-grey: #292831;
16
16
  --color-gui-default: #0073e6;
17
17
  --color-gui-hover: #0867c4;
18
- --color-gui-focus: #80b9f2;
18
+ --color-gui-focus: #0073e6;
19
+ --color-gui-focus-outline: #80b9f2;
19
20
  --color-gui-active: #074095;
20
- --color-gui-viewed: #4887c2;
21
+ --color-gui-visited: #4887c2;
21
22
  --color-gui-unavailable: #a8a8a8;
22
23
  --color-gui-error: #fb0c0c;
23
24
  --color-gui-success: #11cb24;
@@ -155,7 +156,7 @@
155
156
  /* In components, when looking at implementing viewport margin and spacing between elements,
156
157
  the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
157
158
  alternatively, look for ui-grid-* helpers. */
158
- --bp-xs: 375px; /* gutters 8px, side-margin 24px */
159
+ --bp-xs: 428px; /* gutters 8px, side-margin 24px */
159
160
  --bp-sm: 768px; /* gutters 16px, side-margin 32px */
160
161
  --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
161
162
  --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
@@ -343,17 +344,17 @@
343
344
  }
344
345
 
345
346
  .ui-text-p1 {
346
- @apply font-sans font-light text-cool-black;
347
+ @apply font-sans font-light text-charcoal-grey;
347
348
  @apply text-p1;
348
349
  }
349
350
 
350
351
  .ui-text-p2 {
351
- @apply font-sans font-light text-cool-black;
352
+ @apply font-sans font-light text-charcoal-grey;
352
353
  @apply text-p2;
353
354
  }
354
355
 
355
356
  .ui-text-p3 {
356
- @apply font-sans font-light text-cool-black;
357
+ @apply font-sans font-light text-charcoal-grey;
357
358
  @apply text-p3;
358
359
  }
359
360
 
@@ -459,24 +460,18 @@
459
460
  @apply list-square;
460
461
  }
461
462
 
462
- /* visited needs to come before :hover et all else it overrides them */
463
- .ui-link:visited {
464
- @apply text-gui-viewed;
463
+ .ui-link {
464
+ @apply visited:text-gui-visited;
465
+ @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
466
+ @apply focus:text-gui-focus focus:outline-gui-focus;
467
+ @apply underline;
465
468
  }
466
469
 
467
- .ui-link {
468
- @apply hover:text-active-orange active:text-red-orange;
469
- -webkit-text-decoration-color: var(--color-active-orange);
470
- text-decoration-color: var(--color-active-orange);
471
- text-underline-offset: 4px; /* px used here as behaves weird with rem's */
472
- -webkit-text-decoration-line: underline;
473
- text-decoration-line: underline;
474
- text-decoration-thickness: 0.125rem;
475
- }
476
-
477
- .ui-link:focus {
478
- @apply focus:text-white focus:bg-active-orange focus:outline-none;
479
- text-decoration: none;
470
+ .ui-link-neutral {
471
+ @apply visited:text-dark-grey;
472
+ @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
473
+ @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
474
+ @apply underline;
480
475
  }
481
476
  }
482
477
  @layer components {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "7.8.2-dev.b40c1c7",
3
+ "version": "7.8.4-dev.f992ca8",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/core/Code/component.css CHANGED
@@ -1,6 +1,4 @@
1
- @layer base {
2
- @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
3
- }
1
+ @import "../fonts/source-code-pro.css";
4
2
 
5
3
  @layer components {
6
4
  .hljs {
package/src/core/fonts/source-code-pro.css ADDED
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
3
+ }
package/src/core/styles/properties.css CHANGED
@@ -15,9 +15,10 @@
15
15
  --color-charcoal-grey: #292831;
16
16
  --color-gui-default: #0073e6;
17
17
  --color-gui-hover: #0867c4;
18
- --color-gui-focus: #80b9f2;
18
+ --color-gui-focus: #0073e6;
19
+ --color-gui-focus-outline: #80b9f2;
19
20
  --color-gui-active: #074095;
20
- --color-gui-viewed: #4887c2;
21
+ --color-gui-visited: #4887c2;
21
22
  --color-gui-unavailable: #a8a8a8;
22
23
  --color-gui-error: #fb0c0c;
23
24
  --color-gui-success: #11cb24;
@@ -155,7 +156,7 @@
155
156
  /* In components, when looking at implementing viewport margin and spacing between elements,
156
157
  the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
157
158
  alternatively, look for ui-grid-* helpers. */
158
- --bp-xs: 375px; /* gutters 8px, side-margin 24px */
159
+ --bp-xs: 428px; /* gutters 8px, side-margin 24px */
159
160
  --bp-sm: 768px; /* gutters 16px, side-margin 32px */
160
161
  --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
161
162
  --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
package/src/core/styles/text.css CHANGED
@@ -30,17 +30,17 @@
30
30
  }
31
31
 
32
32
  .ui-text-p1 {
33
- @apply font-sans font-light text-cool-black;
33
+ @apply font-sans font-light text-charcoal-grey;
34
34
  @apply text-p1;
35
35
  }
36
36
 
37
37
  .ui-text-p2 {
38
- @apply font-sans font-light text-cool-black;
38
+ @apply font-sans font-light text-charcoal-grey;
39
39
  @apply text-p2;
40
40
  }
41
41
 
42
42
  .ui-text-p3 {
43
- @apply font-sans font-light text-cool-black;
43
+ @apply font-sans font-light text-charcoal-grey;
44
44
  @apply text-p3;
45
45
  }
46
46
 
@@ -146,21 +146,17 @@
146
146
  @apply list-square;
147
147
  }
148
148
 
149
- /* visited needs to come before :hover et all else it overrides them */
150
- .ui-link:visited {
151
- @apply text-gui-viewed;
152
- }
153
-
154
149
  .ui-link {
155
- @apply hover:text-active-orange active:text-red-orange;
156
- text-decoration-color: var(--color-active-orange);
157
- text-underline-offset: 4px; /* px used here as behaves weird with rem's */
158
- text-decoration-line: underline;
159
- text-decoration-thickness: 0.125rem;
150
+ @apply visited:text-gui-visited;
151
+ @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
152
+ @apply focus:text-gui-focus focus:outline-gui-focus;
153
+ @apply underline;
160
154
  }
161
155
 
162
- .ui-link:focus {
163
- @apply focus:text-white focus:bg-active-orange focus:outline-none;
164
- text-decoration: none;
156
+ .ui-link-neutral {
157
+ @apply visited:text-dark-grey;
158
+ @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
159
+ @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
160
+ @apply underline;
165
161
  }
166
162
  }
package/tailwind.config.js CHANGED
@@ -17,7 +17,7 @@ module.exports = {
17
17
  theme: {
18
18
  screens: {
19
19
  // CSS custom properties can't be used in media queries
20
- xs: "375px",
20
+ xs: "428px",
21
21
  sm: "768px",
22
22
  md: "1040px",
23
23
  lg: "1280px",
@@ -74,7 +74,7 @@ module.exports = {
74
74
  "gui-hover": "var(--color-gui-hover)",
75
75
  "gui-focus": "var(--color-gui-focus)",
76
76
  "gui-active": "var(--color-gui-active)",
77
- "gui-viewed": "var(--color-gui-viewed)",
77
+ "gui-visited": "var(--color-gui-visited)",
78
78
  "gui-unavailable": "var(--color-gui-unavailable)",
79
79
  "gui-error": "var(--color-gui-error)",
80
80
  "gui-success": "var(--color-gui-success)",
@@ -181,7 +181,8 @@ module.exports = {
181
181
  filter: "filter",
182
182
  },
183
183
  outline: {
184
- "gui-focus": "4px solid var(--color-gui-focus)",
184
+ "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
185
+ "gui-focus-neutral": "2px solid var(--color-white)",
185
186
  },
186
187
  width: {
187
188
  "extend-8": "calc(100% + var(--spacing-8))",
@@ -208,7 +209,14 @@ module.exports = {
208
209
  variants: {
209
210
  extend: {
210
211
  borderColor: ["hover", "focus", "active", "group-focus", "disabled"],
211
- textColor: ["hover", "focus", "active", "group-focus", "disabled"],
212
+ textColor: [
213
+ "hover",
214
+ "focus",
215
+ "active",
216
+ "group-focus",
217
+ "disabled",
218
+ "visited",
219
+ ],
212
220
  display: ["group-focus"],
213
221
  backgroundColor: ["hover", "focus", "active", "group-focus", "disabled"],
214
222
  backgroundImage: ["hover", "active", "focus"],