@ably/ui 7.10.0-dev.e980a00 → 8.0.0-dev.467d57d

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 (32) hide show
  1. package/core/Meganav/component.js +1 -1
  2. package/core/Meganav.jsx +8471 -6616
  3. package/core/MeganavControlMobileDropdown/component.js +1 -1
  4. package/core/MeganavItemsMobile.jsx +7 -6
  5. package/core/MeganavItemsSignedIn.jsx +9 -8
  6. package/core/MeganavSearch.jsx +9 -8
  7. package/core/MeganavSearchAutocomplete/component.js +1 -1
  8. package/core/MeganavSearchPanel.jsx +7 -6
  9. package/core/MeganavSearchSuggestions/component.js +1 -1
  10. package/core/MeganavSearchSuggestions.jsx +6 -6
  11. package/core/fonts/source-code-pro.css +3 -0
  12. package/core/styles.css +17 -22
  13. package/package.json +2 -2
  14. package/src/core/Code/component.css +1 -3
  15. package/src/core/Meganav/component.js +8 -2
  16. package/src/core/Meganav/component.jsx +3 -2
  17. package/src/core/MeganavControlMobileDropdown/component.js +0 -31
  18. package/src/core/MeganavItemsMobile/component.html.erb +1 -0
  19. package/src/core/MeganavItemsMobile/component.jsx +1 -0
  20. package/src/core/MeganavItemsSignedIn/component.html.erb +2 -2
  21. package/src/core/MeganavSearch/component.html.erb +2 -2
  22. package/src/core/MeganavSearch/component.jsx +2 -2
  23. package/src/core/MeganavSearchAutocomplete/component.js +18 -10
  24. package/src/core/MeganavSearchPanel/component.html.erb +3 -3
  25. package/src/core/MeganavSearchPanel/component.jsx +1 -1
  26. package/src/core/MeganavSearchSuggestions/component.html.erb +4 -4
  27. package/src/core/MeganavSearchSuggestions/component.js +123 -0
  28. package/src/core/MeganavSearchSuggestions/component.jsx +6 -6
  29. package/src/core/fonts/source-code-pro.css +3 -0
  30. package/src/core/styles/properties.css +4 -3
  31. package/src/core/styles/text.css +12 -16
  32. package/tailwind.config.js +12 -4
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)",
@@ -183,7 +183,8 @@ module.exports = {
183
183
  filter: "filter",
184
184
  },
185
185
  outline: {
186
- "gui-focus": "4px solid var(--color-gui-focus)",
186
+ "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
187
+ "gui-focus-neutral": "2px solid var(--color-white)",
187
188
  },
188
189
  width: {
189
190
  "extend-8": "calc(100% + var(--spacing-8))",
@@ -210,7 +211,14 @@ module.exports = {
210
211
  variants: {
211
212
  extend: {
212
213
  borderColor: ["hover", "focus", "active", "group-focus", "disabled"],
213
- textColor: ["hover", "focus", "active", "group-focus", "disabled"],
214
+ textColor: [
215
+ "hover",
216
+ "focus",
217
+ "active",
218
+ "group-focus",
219
+ "disabled",
220
+ "visited",
221
+ ],
214
222
  display: ["group-focus"],
215
223
  backgroundColor: ["hover", "focus", "active", "group-focus", "disabled"],
216
224
  backgroundImage: ["hover", "active", "focus"],