@ably/ui 11.7.0 → 11.7.1-dev.abfa747

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 (51) hide show
  1. package/README.md +7 -7
  2. package/core/Code/component.css +2 -0
  3. package/core/CompanyAutocomplete/component.js +2 -1
  4. package/core/CompanyAutocomplete/component.js.LICENSE.txt +1 -0
  5. package/core/FeaturedLink/component.css +2 -11
  6. package/core/FeaturedLink.jsx +12 -5
  7. package/core/Footer/component.css +3 -3
  8. package/core/Footer.jsx +15 -15
  9. package/core/Meganav/component.css +6 -6
  10. package/core/Meganav.jsx +348 -756
  11. package/core/MeganavBlogPostsList/component.js +2 -1
  12. package/core/MeganavBlogPostsList/component.js.LICENSE.txt +1 -0
  13. package/core/MeganavBlogPostsList.jsx +12 -5
  14. package/core/MeganavContentCompany.jsx +307 -715
  15. package/core/MeganavContentDevelopers.jsx +1 -1
  16. package/core/MeganavContentProducts.jsx +13 -6
  17. package/core/MeganavItemsMobile.jsx +12 -5
  18. package/core/MeganavItemsSignedIn.jsx +12 -5
  19. package/core/MeganavSearch.jsx +12 -5
  20. package/core/MeganavSearchPanel.jsx +12 -5
  21. package/core/MeganavSearchSuggestions.jsx +12 -5
  22. package/core/Notice.jsx +2 -2
  23. package/core/Uptime.jsx +301 -709
  24. package/core/fonts/jetBrains-mono.css +3 -0
  25. package/core/fonts/manrope.css +3 -0
  26. package/core/scripts.js +2 -1
  27. package/core/scripts.js.LICENSE.txt +1 -0
  28. package/core/styles.css +221 -94
  29. package/package.json +3 -3
  30. package/src/core/FeaturedLink/component.css +2 -11
  31. package/src/core/FeaturedLink/component.html.erb +14 -5
  32. package/src/core/FeaturedLink/component.jsx +10 -4
  33. package/src/core/FeaturedLink/component.rb +3 -1
  34. package/src/core/Footer/component.css +3 -3
  35. package/src/core/Footer/component.html.erb +14 -14
  36. package/src/core/Footer/component.jsx +15 -15
  37. package/src/core/Meganav/component.css +6 -6
  38. package/src/core/MeganavContentDevelopers/component.html.erb +1 -1
  39. package/src/core/MeganavContentDevelopers/component.jsx +1 -1
  40. package/src/core/MeganavContentProducts/component.html.erb +1 -1
  41. package/src/core/MeganavContentProducts/component.jsx +1 -1
  42. package/src/core/Notice/component.html.erb +2 -2
  43. package/src/core/Notice/component.jsx +2 -2
  44. package/src/core/fonts/jetBrains-mono.css +3 -0
  45. package/src/core/fonts/manrope.css +3 -0
  46. package/src/core/styles/buttons.css +5 -5
  47. package/src/core/styles/forms.css +5 -5
  48. package/src/core/styles/properties.css +153 -45
  49. package/src/core/styles/text.css +58 -39
  50. package/src/core/utils/syntax-highlighter.css +2 -0
  51. package/tailwind.config.js +179 -49
package/tailwind.config.js CHANGED
@@ -24,60 +24,147 @@ module.exports = {
24
24
  xl: "1440px",
25
25
  },
26
26
  fontSize: {
27
- title: ["var(--fs-title)", "var(--lh-tight)"],
28
- "title-xl": ["var(--fs-title-xl)", "var(--lh-tight)"],
29
- "title-xs": ["var(--fs-title-xs)", "var(--lh-tight)"],
27
+ title: ["var(--fs-title)", "var(--lh-min-normal)"],
28
+ "title-xl": ["var(--fs-title-xl)", "var(--lh-min-normal)"],
29
+ "title-xs": ["var(--fs-title-xs)", "var(--lh-min-normal)"],
30
30
  h1: ["var(--fs-h1)", "var(--lh-tight)"],
31
- "h1-xl": ["var(--fs-h1-xl)", "var(--lh-tight)"],
32
- "h1-xs": ["var(--fs-h1-xs)", "var(--lh-tight)"],
33
- h2: ["var(--fs-h2)", "var(--lh-tight)"],
34
- "h2-xl": ["var(--fs-h2-xl)", "var(--lh-tight)"],
35
- "h2-xs": ["var(--fs-h2-xs)", "var(--lh-tight)"],
36
- h3: ["var(--fs-h3)", "var(--lh-tight)"],
37
- h4: ["var(--fs-h4)", "var(--lh-tight)"],
38
- p1: ["var(--fs-p1)", "var(--lh-relaxed)"],
39
- p2: ["var(--fs-p2)", "var(--lh-relaxed)"],
40
- p3: ["var(--fs-p3)", "var(--lh-relaxed)"],
41
- standfirst: ["var(--fs-standfirst)", "var(--lh-snug)"],
42
- "standfirst-xl": ["var(--fs-standfirst-xl)", "var(--lh-snug)"],
43
- "sub-header": ["var(--fs-sub-header)", "var(--lh-normal)"],
44
- "sub-header-xs": ["var(--fs-sub-header-xs)", "var(--lh-normal)"],
45
- overline1: ["var(--fs-overline1)", "var(--lh-normal)"],
46
- overline2: ["var(--fs-overline2)", "var(--lh-normal)"],
31
+ "h1-xl": ["var(--fs-h1-xl)", "var(--lh-min-normal)"],
32
+ "h1-xs": ["var(--fs-h1-xs)", "var(--lh-min-normal)"],
33
+ h2: ["var(--fs-h2)", "var(--lh-min-normal)"],
34
+ "h2-xl": ["var(--fs-h2-xl)", "var(--lh-min-normal)"],
35
+ "h2-xs": ["var(--fs-h2-xs)", "var(--lh-min-normal)"],
36
+ h3: ["var(--fs-h3)", "var(--lh-min-normal)"],
37
+ h4: ["var(--fs-h4)", "var(--lh-min-normal)"],
38
+ h5: ["var(--fs-h5)", "var(--lh-min-normal)"],
39
+ p1: ["var(--fs-p1)", "var(--lh-extra-relaxed)"],
40
+ p2: ["var(--fs-p2)", "var(--lh-extra-relaxed)"],
41
+ p3: ["var(--fs-p3)", "var(--lh-extra-relaxed)"],
42
+ standfirst: ["var(--fs-standfirst)"],
43
+ "standfirst-xl": ["var(--fs-standfirst-xl)"],
44
+ "sub-header": ["var(--fs-sub-header)"],
45
+ "sub-header-xs": ["var(--fs-sub-header-xs)"],
46
+ overline1: ["var(--fs-overline1)"],
47
+ overline2: ["var(--fs-overline2)"],
47
48
  btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
48
49
  btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
49
50
  btn3: ["var(--fs-btn2)", "var(--lh-tight)"],
50
51
  btn4: ["var(--fs-btn3)", "var(--lh-dense)"],
51
- menu1: ["var(--fs-menu1)", "var(--lh-tight)"],
52
- menu2: ["var(--fs-menu2)", "var(--lh-tight)"],
53
- menu3: ["var(--fs-menu3)", "var(--lh-snug)"],
54
- quote: ["var(--fs-quote)", "var(--lh-relaxed)"],
52
+ menu1: ["var(--fs-menu1)"],
53
+ menu2: ["var(--fs-menu2)"],
54
+ menu3: ["var(--fs-menu3)"],
55
+ quote: ["var(--fs-quote)"],
55
56
  code: ["var(--fs-code)", "var(--lh-dense)"],
57
+ code2: ["var(--fs-code2)", "var(--lh-dense)"],
56
58
  },
57
59
  colors: {
58
- transparent: "transparent",
59
- "cool-black": "var(--color-cool-black)",
60
- "active-orange": "var(--color-active-orange)",
61
- "red-orange": "var(--color-red-orange)",
62
- white: "var(--color-white)",
63
- "electric-cyan": "var(--color-electric-cyan)",
64
- "zingy-green": "var(--color-zingy-green)",
65
- "bright-red": "var(--color-bright-red)",
66
- "jazzy-pink": "var(--color-jazzy-pink)",
67
- "extra-light-grey": "var(--color-extra-light-grey)",
68
- "light-grey": "var(--color-light-grey)",
69
- "mid-grey": "var(--color-mid-grey)",
70
- "dark-grey": "var(--color-dark-grey)",
71
- "charcoal-grey": "var(--color-charcoal-grey)",
72
- "gui-default": "var(--color-gui-default)",
73
- "gui-alt": "var(--color-cool-black)",
74
- "gui-hover": "var(--color-gui-hover)",
75
- "gui-focus": "var(--color-gui-focus)",
76
- "gui-active": "var(--color-gui-active)",
77
- "gui-visited": "var(--color-gui-visited)",
60
+ "neutral-100": "var(--color-neutral-100)",
61
+ "neutral-200": "var(--color-neutral-200)",
62
+ "neutral-300": "var(--color-neutral-300)",
63
+ "neutral-400": "var(--color-neutral-400)",
64
+ "neutral-500": "var(--color-neutral-500)",
65
+ "neutral-600": "var(--color-neutral-600)",
66
+ "neutral-700": "var(--color-neutral-700)",
67
+ "neutral-800": "var(--color-neutral-800)",
68
+ "neutral-900": "var(--color-neutral-900)",
69
+ "neutral-1000": "var(--color-neutral-1000)",
70
+ "neutral-1100": "var(--color-neutral-1100)",
71
+ "neutral-1200": "var(--color-neutral-1200)",
72
+ "neutral-1300": "var(--color-neutral-1300)",
73
+
74
+ "orange-100": "var(--color-orange-100)",
75
+ "orange-200": "var(--color-orange-200)",
76
+ "orange-300": "var(--color-orange-300)",
77
+ "orange-400": "var(--color-orange-400)",
78
+ "orange-500": "var(--color-orange-500)",
79
+ "orange-600": "var(--color-orange-600)",
80
+ "orange-700": "var(--color-orange-700)",
81
+ "orange-800": "var(--color-orange-800)",
82
+ "orange-900": "var(--color-orange-900)",
83
+ "orange-1000": "var(--color-orange-1000)",
84
+ "orange-1100": "var(--color-orange-1100)",
85
+
86
+ "yellow-100": "var(--color-yellow-100)",
87
+ "yellow-200": "var(--color-yellow-200)",
88
+ "yellow-300": "var(--color-yellow-300)",
89
+ "yellow-400": "var(--color-yellow-400)",
90
+ "yellow-500": "var(--color-yellow-500)",
91
+ "yellow-600": "var(--color-yellow-600)",
92
+ "yellow-700": "var(--color-yellow-700)",
93
+ "yellow-800": "var(--color-yellow-800)",
94
+ "yellow-900": "var(--color-yellow-900)",
95
+ "green-100": "var(--color-green-100)",
96
+ "green-200": "var(--color-green-200)",
97
+ "green-300": "var(--color-green-300)",
98
+ "green-400": "var(--color-green-400)",
99
+ "green-500": "var(--color-green-500)",
100
+ "green-600": "var(--color-green-600)",
101
+ "green-700": "var(--color-green-700)",
102
+ "green-800": "var(--color-green-800)",
103
+ "green-900": "var(--color-green-900)",
104
+ "blue-100": "var(--color-blue-100)",
105
+ "blue-200": "var(--color-blue-200)",
106
+ "blue-300": "var(--color-blue-300)",
107
+ "blue-400": "var(--color-blue-400)",
108
+ "blue-500": "var(--color-blue-500)",
109
+ "blue-600": "var(--color-blue-600)",
110
+ "blue-700": "var(--color-blue-700)",
111
+ "blue-800": "var(--color-blue-800)",
112
+ "blue-900": "var(--color-blue-900)",
113
+ "violet-100": "var(--color-violet-100)",
114
+ "violet-200": "var(--color-violet-200)",
115
+ "violet-300": "var(--color-violet-300)",
116
+ "violet-400": "var(--color-violet-400)",
117
+ "violet-500": "var(--color-violet-500)",
118
+ "violet-600": "var(--color-violet-600)",
119
+ "violet-700": "var(--color-violet-700)",
120
+ "violet-800": "var(--color-violet-800)",
121
+ "violet-900": "var(--color-violet-900)",
122
+ "pink-100": "var(--color-pink-100)",
123
+ "pink-200": "var(--color-pink-200)",
124
+ "pink-300": "var(--color-pink-300)",
125
+ "pink-400": "var(--color-pink-400)",
126
+ "pink-500": "var(--color-pink-500)",
127
+ "pink-600": "var(--color-pink-600)",
128
+ "pink-700": "var(--color-pink-700)",
129
+ "pink-800": "var(--color-pink-800)",
130
+ "pink-900": "var(--color-pink-900)",
131
+
132
+ "gui-blue-default-light": "var(--color-gui-blue-default-light)",
133
+ "gui-blue-hover-light": "var(--color-gui-blue-hover-light)",
134
+ "gui-blue-active-light": "var(--color-gui-blue-active-light)",
135
+ "gui-blue-default-dark": "var(--color-gui-blue-default-dark)",
136
+ "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
137
+ "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
138
+ "gui-blue-focus": "var(--color-gui-blue-focus)",
78
139
  "gui-unavailable": "var(--color-gui-unavailable)",
79
- "gui-error": "var(--color-gui-error)",
80
- "gui-success": "var(--color-gui-success)",
140
+ "gui-success-green": "var(--color-gui-success-green)",
141
+ "gui-error-red": "var(--color-gui-error-red)",
142
+ "gui-focus": "var(--color-gui-focus)",
143
+ "gui-focus-outline": "var(--color-gui-focus-outline)",
144
+
145
+ transparent: "transparent",
146
+ "cool-black": "var(--color-neutral-1300)",
147
+ "active-orange": "var(--color-orange-600)",
148
+ "red-orange": "var(--color-orange-800)",
149
+ white: "var(--color-neutral-000)",
150
+ "electric-cyan": "var(--color-blue-400)",
151
+ "zingy-green": "var(--color-green-400)",
152
+ "bright-red": "var(--color-orange-700)",
153
+ "jazzy-pink": "var(--color-pink-500)",
154
+ "extra-light-grey": "var(--color-neutral-100)",
155
+ "light-grey": "var(--color-neutral-200)",
156
+ "mid-grey": "var(--color-neutral-500)",
157
+ "dark-grey": "var(--color-neutral-800)",
158
+ "charcoal-grey": "var(--color-neutral-1000)",
159
+ "gui-default": "var(--color-gui-blue-default-light)",
160
+ "gui-hover": "var(--color-gui-blue-hover-light)",
161
+ "gui-active": "var(--color-gui-blue-active-light)",
162
+ "gui-default-dark": "var(--color-gui-blue-default-dark)",
163
+ "gui-hover-dark": "var(--color-gui-blue-hover-dark)",
164
+ "gui-active-dark": "var(--color-gui-blue-active-dark)",
165
+ "gui-alt": "var(--color-neutral-1300)",
166
+ "gui-error": "var(--color-gui-error-red)",
167
+ "gui-success": "var(--color-gui-success-green)",
81
168
  "icon-linkedin": "var(--icon-color-linkedin)",
82
169
  "icon-twitter": "var(--icon-color-twitter)",
83
170
  "icon-glassdoor": "var(--icon-color-glassdoor)",
@@ -85,8 +172,44 @@ module.exports = {
85
172
  "icon-discord": "var(--icon-color-discord)",
86
173
  },
87
174
  fontFamily: {
88
- sans: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
89
- mono: ["Source Code Pro", "Courier", "monospace"],
175
+ sans_next: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
176
+ serif: [
177
+ "ui-serif",
178
+ "Georgia",
179
+ "Cambria",
180
+ "Times New Roman",
181
+ "Times",
182
+ "serif",
183
+ ],
184
+ mono_source_code: ["Source Code Pro", "Courier", "monospace"],
185
+ sans: [
186
+ "Manrope",
187
+ "ui-sans-serif",
188
+ "system-ui",
189
+ "-apple-system",
190
+ "BlinkMacSystemFont",
191
+ "Segoe UI",
192
+ "Roboto",
193
+ "Helvetica Neue",
194
+ "Arial",
195
+ "Noto Sans",
196
+ "sans-serif",
197
+ "Apple Color Emoji",
198
+ "Segoe UI Emoji",
199
+ "Segoe UI Symbol",
200
+ "Noto Color Emoji",
201
+ ],
202
+ mono: [
203
+ "JetBrains Mono",
204
+ "ui-monospace",
205
+ "SFMono-Regular",
206
+ "Menlo",
207
+ "Monaco",
208
+ "Consolas",
209
+ "Liberation Mono",
210
+ "Courier New",
211
+ "monospace",
212
+ ],
90
213
  },
91
214
  margin: (theme, { negative }) => ({
92
215
  auto: "auto",
@@ -124,6 +247,7 @@ module.exports = {
124
247
  20: "var(--spacing-20)",
125
248
  24: "var(--spacing-24)",
126
249
  32: "var(--spacing-32)",
250
+ 36: "var(--spacing-36)",
127
251
  40: "var(--spacing-40)",
128
252
  48: "var(--spacing-48)",
129
253
  64: "var(--spacing-64)",
@@ -143,7 +267,7 @@ module.exports = {
143
267
  ...breakpoints(theme("screens")),
144
268
  }),
145
269
  boxShadow: {
146
- subtle: "0px 1px 0px var(--color-mid-grey)",
270
+ subtle: "0px 1px 0px var(--color-neutral-500)",
147
271
  tooltip: "0px 5px 10px 0px #00000022",
148
272
  container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
149
273
  "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
@@ -155,11 +279,15 @@ module.exports = {
155
279
  "tighten-0.025": "var(--ls-tighten-0_025)",
156
280
  "tighten-0.02": "var(--ls-tighten-0_02)",
157
281
  "tighten-0.015": "var(--ls-tighten-0_015)",
282
+ "tighten-0.0125": "var(--ls-tighten-0_0125)",
158
283
  "tighten-0.01": "var(--ls-tighten-0_01)",
159
284
  "tighten-0.005": "var(--ls-tighten-0_005)",
160
285
  "tighten-0.0025": "var(--ls-tighten-0_0025)",
286
+ "tighten-0.0015": "var(--ls-tighten-0_0015)",
287
+ "widen-0": 0,
161
288
  "widen-0.1": "var(--ls-widen-0_1)",
162
289
  "widen-0.15": "var(--ls-widen-0_15)",
290
+ "widen-0.16": "var(--ls-widen-0_16)",
163
291
  },
164
292
  borderRadius: {
165
293
  none: "0",
@@ -185,7 +313,7 @@ module.exports = {
185
313
  },
186
314
  outline: {
187
315
  "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
188
- "gui-focus-neutral": "2px solid var(--color-white)",
316
+ "gui-focus-neutral": "2px solid var(--color-neutral-000)",
189
317
  },
190
318
  width: {
191
319
  "extend-8": "calc(100% + var(--spacing-8))",
@@ -225,6 +353,8 @@ module.exports = {
225
353
  backgroundImage: ["hover", "active", "focus"],
226
354
  filter: ["hover"],
227
355
  cursor: ["disabled"],
356
+ inset: ['group-hover']
357
+
228
358
  },
229
359
  },
230
360
  corePlugins: {