@ably/ui 11.7.1-dev.abfa747 → 11.7.1-dev.c1ae187

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 (27) hide show
  1. package/README.md +0 -1
  2. package/core/FeaturedLink/component.css +0 -6
  3. package/core/FeaturedLink/component.js +1 -1
  4. package/core/FeaturedLink.jsx +8 -4
  5. package/core/Meganav.jsx +8 -4
  6. package/core/MeganavBlogPostsList.jsx +8 -4
  7. package/core/MeganavContentCompany.jsx +8 -4
  8. package/core/MeganavContentProducts.jsx +8 -4
  9. package/core/MeganavItemsMobile.jsx +8 -4
  10. package/core/MeganavItemsSignedIn.jsx +8 -4
  11. package/core/MeganavSearch.jsx +8 -4
  12. package/core/MeganavSearchPanel.jsx +8 -4
  13. package/core/MeganavSearchSuggestions.jsx +8 -4
  14. package/core/Showcase/component.js +1 -1
  15. package/core/Uptime/component.css +1 -2
  16. package/core/Uptime.jsx +8 -4
  17. package/core/styles.css +4 -0
  18. package/package.json +2 -3
  19. package/src/core/FeaturedLink/component.html.erb +3 -3
  20. package/src/core/FeaturedLink/component.js +0 -1
  21. package/src/core/FeaturedLink/component.jsx +27 -10
  22. package/src/core/Showcase/component.html.erb +2 -2
  23. package/src/core/Showcase/component.js +1 -1
  24. package/src/core/Uptime/component.css +1 -2
  25. package/src/core/styles/text.css +4 -0
  26. package/tailwind.config.js +3 -7
  27. package/src/core/FeaturedLink/component.css +0 -6
package/README.md CHANGED
@@ -80,7 +80,6 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
80
80
  1. Add postCSS import with `npm install postcss-import`
81
81
  1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
82
  1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
83
- 1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
84
83
  3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
85
84
  4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
86
85
 
package/core/FeaturedLink/component.css CHANGED
@@ -1,7 +1 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-bold block;
4
- @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
- }
7
1
 
package/core/FeaturedLink/component.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
1
+ !function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));
package/core/FeaturedLink.jsx CHANGED
@@ -172,10 +172,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
172
172
  flush = _ref$flush === void 0 ? false : _ref$flush,
173
173
  _ref$reverse = _ref.reverse,
174
174
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
175
+ _ref$additionalCSS = _ref.additionalCSS,
176
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
175
177
  children = _ref.children;
176
178
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
177
179
  href: url,
178
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
180
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
179
181
  style: {
180
182
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
181
183
  }
@@ -183,12 +185,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
183
185
  name: "icon-gui-link-arrow",
184
186
  size: "calc(var(--featured-link-icon-size) * 1.25)",
185
187
  color: iconColor,
186
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
188
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
187
189
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
188
190
  name: "icon-gui-link-arrow",
189
191
  size: "calc(var(--featured-link-icon-size) * 1.25)",
190
192
  color: iconColor,
191
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
193
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
192
194
  })));
193
195
  };
194
196
 
@@ -197,7 +199,9 @@ FeaturedLink.propTypes = {
197
199
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
198
200
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
199
201
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
200
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
202
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
203
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
204
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
201
205
  };
202
206
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
203
207
  })();
package/core/Meganav.jsx CHANGED
@@ -118,10 +118,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
118
118
  flush = _ref$flush === void 0 ? false : _ref$flush,
119
119
  _ref$reverse = _ref.reverse,
120
120
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
121
+ _ref$additionalCSS = _ref.additionalCSS,
122
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
121
123
  children = _ref.children;
122
124
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
123
125
  href: url,
124
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
126
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
125
127
  style: {
126
128
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
127
129
  }
@@ -129,12 +131,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
129
131
  name: "icon-gui-link-arrow",
130
132
  size: "calc(var(--featured-link-icon-size) * 1.25)",
131
133
  color: iconColor,
132
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
134
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
133
135
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
134
136
  name: "icon-gui-link-arrow",
135
137
  size: "calc(var(--featured-link-icon-size) * 1.25)",
136
138
  color: iconColor,
137
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
139
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
138
140
  })));
139
141
  };
140
142
 
@@ -143,7 +145,9 @@ FeaturedLink.propTypes = {
143
145
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
144
146
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
145
147
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
146
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
148
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
149
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
150
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
147
151
  };
148
152
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
149
153
 
package/core/MeganavBlogPostsList.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavContentCompany.jsx CHANGED
@@ -118,10 +118,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
118
118
  flush = _ref$flush === void 0 ? false : _ref$flush,
119
119
  _ref$reverse = _ref.reverse,
120
120
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
121
+ _ref$additionalCSS = _ref.additionalCSS,
122
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
121
123
  children = _ref.children;
122
124
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
123
125
  href: url,
124
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
126
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
125
127
  style: {
126
128
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
127
129
  }
@@ -129,12 +131,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
129
131
  name: "icon-gui-link-arrow",
130
132
  size: "calc(var(--featured-link-icon-size) * 1.25)",
131
133
  color: iconColor,
132
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
134
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
133
135
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
134
136
  name: "icon-gui-link-arrow",
135
137
  size: "calc(var(--featured-link-icon-size) * 1.25)",
136
138
  color: iconColor,
137
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
139
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
138
140
  })));
139
141
  };
140
142
 
@@ -143,7 +145,9 @@ FeaturedLink.propTypes = {
143
145
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
144
146
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
145
147
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
146
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
148
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
149
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
150
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
147
151
  };
148
152
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
149
153
 
package/core/MeganavContentProducts.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavItemsMobile.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavItemsSignedIn.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavSearch.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavSearchPanel.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavSearchSuggestions.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/Showcase/component.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,h,y,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["filter-grayscale","filter-none"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(h=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){h.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(y=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",y),function(){return l.parentNode.removeEventListener("wheel",y)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,y,h,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["grayscale","grayscale-0"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(y=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){y.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(h=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",h),function(){return l.parentNode.removeEventListener("wheel",h)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
package/core/Uptime/component.css CHANGED
@@ -30,8 +30,7 @@
30
30
  }
31
31
 
32
32
  .ui-uptime-day:hover {
33
- filter: brightness(1.2);
34
- @apply z-10;
33
+ @apply z-10 brightness-125;
35
34
  }
36
35
 
37
36
  .ui-uptime-day:hover span {
package/core/Uptime.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
54
  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/styles.css CHANGED
@@ -607,6 +607,10 @@
607
607
  @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
608
608
  @apply underline;
609
609
  }
610
+
611
+ .ui-figcaption {
612
+ @apply font-mono text-p3 text-neutral-800;
613
+ }
610
614
  }
611
615
  @layer components {
612
616
  .ui-checkbox-p1 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "11.7.1-dev.abfa747",
3
+ "version": "11.7.1-dev.c1ae187",
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",
@@ -43,8 +43,7 @@
43
43
  "postcss-loader": "^4.0.4",
44
44
  "prettier": "^2.3.0",
45
45
  "svg-spritemap-webpack-plugin": "^3.7.1",
46
- "tailwindcss": "^2.0.1",
47
- "tailwindcss-filters": "^3.0.0",
46
+ "tailwindcss": "^3.3.5",
48
47
  "webpack": "^5.3.2",
49
48
  "webpack-cli": "^4.2.0",
50
49
  "yargs": "^16.2.0"
package/src/core/FeaturedLink/component.html.erb CHANGED
@@ -1,15 +1,15 @@
1
- <%= link_to(@url, class: "ui-featured-link group #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
1
+ <%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
2
  <% if @reverse %>
3
3
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
4
4
  size: "calc(var(--featured-link-icon-size) * 1.25)",
5
5
  color: @icon_color,
6
- additional_css: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
6
+ additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
7
7
  <%= content -%>
8
8
  <% else %>
9
9
  <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
10
10
  size: "calc(var(--featured-link-icon-size) * 1.25)",
11
11
  color: @icon_color,
12
- additional_css: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
12
+ additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
13
13
  <% end %>
14
14
 
15
15
  <% end %>
package/src/core/FeaturedLink/component.js CHANGED
@@ -1 +0,0 @@
1
- import "./component.css";
package/src/core/FeaturedLink/component.jsx CHANGED
@@ -3,20 +3,35 @@ import T from "prop-types";
3
3
 
4
4
  import Icon from "../Icon/component.jsx";
5
5
 
6
- const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = false, children }) => (
6
+ const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = false, additionalCSS = "", children }) => (
7
7
  <a
8
8
  href={url}
9
- className={`ui-featured-link group ${textSize} ${flush ? "" : "py-8"}`}
9
+ className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ${textSize} ${
10
+ flush ? "" : "py-8"
11
+ } ${additionalCSS}`}
10
12
  style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}
11
13
  >
12
- {reverse ? <>
13
- <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180" />
14
- {children}
15
- </> :
16
- <>
17
- {children}
18
- <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0" />
19
- </>}
14
+ {reverse ? (
15
+ <>
16
+ <Icon
17
+ name="icon-gui-link-arrow"
18
+ size={`calc(var(--featured-link-icon-size) * 1.25)`}
19
+ color={iconColor}
20
+ additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
21
+ />
22
+ {children}
23
+ </>
24
+ ) : (
25
+ <>
26
+ {children}
27
+ <Icon
28
+ name="icon-gui-link-arrow"
29
+ size={`calc(var(--featured-link-icon-size) * 1.25)`}
30
+ color={iconColor}
31
+ additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
32
+ />
33
+ </>
34
+ )}
20
35
  </a>
21
36
  );
22
37
 
@@ -26,6 +41,8 @@ FeaturedLink.propTypes = {
26
41
  textSize: T.string,
27
42
  iconColor: T.string,
28
43
  flush: T.bool,
44
+ reverse: T.bool,
45
+ additionalCSS: T.string,
29
46
  };
30
47
 
31
48
  export default FeaturedLink;
package/src/core/Showcase/component.html.erb CHANGED
@@ -13,7 +13,7 @@
13
13
  type: 'button',
14
14
  data: { id: 'showcase-control' },
15
15
  aria: { controls: @random_id } do %>
16
- <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'filter-none' : 'filter-grayscale', 'hover:filter-none'], srcset: [["#{company[:logo2x]}", "2x"]] %>
16
+ <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
17
17
  <% end %>
18
18
  </li>
19
19
  <% end %>
@@ -40,7 +40,7 @@
40
40
 
41
41
  <div class="flex items-center">
42
42
  <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
43
- <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
43
+ <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
44
44
  </div>
45
45
  <div>
46
46
  <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
package/src/core/Showcase/component.js CHANGED
@@ -6,7 +6,7 @@ import "./component.css";
6
6
  const SLIDE_SHOW_INTERVAL = 5000;
7
7
 
8
8
  const updateLogoOpacity = (logos, currentIndex) => {
9
- const visible = ["filter-grayscale", "filter-none"];
9
+ const visible = ["grayscale", "grayscale-0"];
10
10
  const opaque = [...visible].reverse();
11
11
  logos.forEach((logo, i) => {
12
12
  logo.classList.replace(...(i === currentIndex ? visible : opaque));
package/src/core/Uptime/component.css CHANGED
@@ -30,8 +30,7 @@
30
30
  }
31
31
 
32
32
  .ui-uptime-day:hover {
33
- filter: brightness(1.2);
34
- @apply z-10;
33
+ @apply z-10 brightness-125;
35
34
  }
36
35
 
37
36
  .ui-uptime-day:hover span {
package/src/core/styles/text.css CHANGED
@@ -177,4 +177,8 @@
177
177
  @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
178
178
  @apply underline;
179
179
  }
180
+
181
+ .ui-figcaption {
182
+ @apply font-mono text-p3 text-neutral-800;
183
+ }
180
184
  }
package/tailwind.config.js CHANGED
@@ -136,6 +136,7 @@ module.exports = {
136
136
  "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
137
137
  "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
138
138
  "gui-blue-focus": "var(--color-gui-blue-focus)",
139
+ "gui-blue-visited": "var(--color-gui-blue-focus)",
139
140
  "gui-unavailable": "var(--color-gui-unavailable)",
140
141
  "gui-success-green": "var(--color-gui-success-green)",
141
142
  "gui-error-red": "var(--color-gui-error-red)",
@@ -298,10 +299,6 @@ module.exports = {
298
299
  full: "9999px",
299
300
  DEFAULT: "0.375rem",
300
301
  },
301
- filter: {
302
- none: "none",
303
- grayscale: "grayscale(1)",
304
- },
305
302
  extend: {
306
303
  backgroundImage: {
307
304
  "gradient-active-orange": "var(--gradient-active-orange)",
@@ -353,12 +350,11 @@ module.exports = {
353
350
  backgroundImage: ["hover", "active", "focus"],
354
351
  filter: ["hover"],
355
352
  cursor: ["disabled"],
356
- inset: ['group-hover']
357
-
353
+ inset: ["group-hover"],
358
354
  },
359
355
  },
360
356
  corePlugins: {
361
357
  preflight: false,
362
358
  },
363
- plugins: [require("tailwindcss-filters")],
359
+ plugins: [],
364
360
  };
package/src/core/FeaturedLink/component.css DELETED
@@ -1,6 +0,0 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-bold block;
4
- @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
- }