@greghowe79/the-lib 2.0.9 → 2.1.1

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 (14) hide show
  1. package/lib/components/button/button.qwik.cjs +31 -22
  2. package/lib/components/button/button.qwik.mjs +32 -23
  3. package/lib/components/button/button.utils.qwik.cjs +29 -0
  4. package/lib/components/button/button.utils.qwik.mjs +29 -0
  5. package/lib/components/hero/hero.qwik.cjs +51 -11
  6. package/lib/components/hero/hero.qwik.mjs +52 -12
  7. package/lib/components/hero/styles.css.qwik.cjs +1 -1
  8. package/lib/components/hero/styles.css.qwik.mjs +1 -1
  9. package/lib-types/components/button/button.d.ts +9 -0
  10. package/lib-types/components/button/button.utils.d.ts +2 -0
  11. package/lib-types/components/hero/hero.d.ts +3 -0
  12. package/lib-types/stories/button.stories.d.ts +7 -0
  13. package/lib-types/stories/hero.stories.d.ts +3 -0
  14. package/package.json +1 -1
package/lib/components/button/button.qwik.cjs CHANGED
@@ -5,32 +5,41 @@ const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/latin-500.css");
7
7
  const loader = require("../loader/loader.qwik.cjs");
8
- const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false }) => {
8
+ const button_utils = require("./button.utils.qwik.cjs");
9
+ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
9
10
  qwik.useStylesScoped$(styles);
10
11
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
11
- return /* @__PURE__ */ jsxRuntime.jsxs("button", {
12
- id,
13
- type,
14
- class: [
15
- `button-${variant}`,
16
- `button-${size}`,
17
- disabled && "button-disabled",
18
- active && "button-active"
19
- ].filter(Boolean).join(" "),
20
- disabled,
21
- "aria-disabled": disabled,
22
- "aria-label": ariaLabel || (icon ? label : void 0),
23
- onClick$,
24
- "preventdefault:click": !!onClick$,
12
+ const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border);
13
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
25
14
  children: [
26
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
27
- class: "button__icon",
28
- "aria-hidden": "true",
29
- children: typeof icon === "function" ? icon({}, null, 0) : icon
15
+ hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
16
+ dangerouslySetInnerHTML: button_utils.generateCustomCSS(id, customColors)
30
17
  }),
31
- /* @__PURE__ */ jsxRuntime.jsx("span", {
32
- class: "button__text",
33
- children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
18
+ /* @__PURE__ */ jsxRuntime.jsxs("button", {
19
+ id,
20
+ type,
21
+ class: [
22
+ `button-${variant}`,
23
+ `button-${size}`,
24
+ disabled && "button-disabled",
25
+ active && "button-active"
26
+ ].filter(Boolean).join(" "),
27
+ disabled,
28
+ "aria-disabled": disabled,
29
+ "aria-label": ariaLabel || (icon ? label : void 0),
30
+ onClick$,
31
+ "preventdefault:click": !!onClick$,
32
+ children: [
33
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
34
+ class: "button__icon",
35
+ "aria-hidden": "true",
36
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
37
+ }),
38
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
39
+ class: "button__text",
40
+ children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
41
+ })
42
+ ]
34
43
  })
35
44
  ]
36
45
  });
package/lib/components/button/button.qwik.mjs CHANGED
@@ -1,34 +1,43 @@
1
- import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
1
+ import { jsxs, Fragment, jsx } from "@builder.io/qwik/jsx-runtime";
2
2
  import { component$, useStylesScoped$ } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import "@fontsource/roboto-condensed/latin-500.css";
5
5
  import { Loader } from "../loader/loader.qwik.mjs";
6
- const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false }) => {
6
+ import { generateCustomCSS } from "./button.utils.qwik.mjs";
7
+ const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
7
8
  useStylesScoped$(styles);
8
9
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
9
- return /* @__PURE__ */ jsxs("button", {
10
- id,
11
- type,
12
- class: [
13
- `button-${variant}`,
14
- `button-${size}`,
15
- disabled && "button-disabled",
16
- active && "button-active"
17
- ].filter(Boolean).join(" "),
18
- disabled,
19
- "aria-disabled": disabled,
20
- "aria-label": ariaLabel || (icon ? label : void 0),
21
- onClick$,
22
- "preventdefault:click": !!onClick$,
10
+ const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border);
11
+ return /* @__PURE__ */ jsxs(Fragment, {
23
12
  children: [
24
- icon && /* @__PURE__ */ jsx("span", {
25
- class: "button__icon",
26
- "aria-hidden": "true",
27
- children: typeof icon === "function" ? icon({}, null, 0) : icon
13
+ hasCustomStyles && /* @__PURE__ */ jsx("style", {
14
+ dangerouslySetInnerHTML: generateCustomCSS(id, customColors)
28
15
  }),
29
- /* @__PURE__ */ jsx("span", {
30
- class: "button__text",
31
- children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
16
+ /* @__PURE__ */ jsxs("button", {
17
+ id,
18
+ type,
19
+ class: [
20
+ `button-${variant}`,
21
+ `button-${size}`,
22
+ disabled && "button-disabled",
23
+ active && "button-active"
24
+ ].filter(Boolean).join(" "),
25
+ disabled,
26
+ "aria-disabled": disabled,
27
+ "aria-label": ariaLabel || (icon ? label : void 0),
28
+ onClick$,
29
+ "preventdefault:click": !!onClick$,
30
+ children: [
31
+ icon && /* @__PURE__ */ jsx("span", {
32
+ class: "button__icon",
33
+ "aria-hidden": "true",
34
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
35
+ }),
36
+ /* @__PURE__ */ jsx("span", {
37
+ class: "button__text",
38
+ children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
39
+ })
40
+ ]
32
41
  })
33
42
  ]
34
43
  });
package/lib/components/button/button.utils.qwik.cjs ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ function generateCustomCSS(id, colors) {
4
+ const isGradient = (value) => value?.includes("gradient");
5
+ const gradientFix = `
6
+ background-origin: border-box !important;
7
+ background-clip: padding-box !important;
8
+ `;
9
+ const baseStyles = [
10
+ colors.bg && `background: ${colors.bg} !important;`,
11
+ colors.bg && isGradient(colors.bg) && gradientFix,
12
+ colors.text && `color: ${colors.text} !important;`,
13
+ colors.border && `border: 2px solid ${colors.border} !important;`
14
+ ].filter(Boolean).join("\n");
15
+ const hoverBg = colors.hoverBg || colors.bg;
16
+ const hoverText = colors.hoverText || colors.text;
17
+ const hoverBorder = colors.hoverBorder || colors.border;
18
+ const hoverStyles = [
19
+ hoverBg && `background: ${hoverBg} !important;`,
20
+ hoverBg && isGradient(hoverBg) && gradientFix,
21
+ hoverText && `color: ${hoverText} !important;`,
22
+ hoverBorder && `border: 2px solid ${hoverBorder} !important;`
23
+ ].filter(Boolean).join("\n");
24
+ return `
25
+ #${id} { ${baseStyles} }
26
+ #${id}:not(:disabled):hover { ${hoverStyles} }
27
+ `;
28
+ }
29
+ exports.generateCustomCSS = generateCustomCSS;
package/lib/components/button/button.utils.qwik.mjs ADDED
@@ -0,0 +1,29 @@
1
+ function generateCustomCSS(id, colors) {
2
+ const isGradient = (value) => value?.includes("gradient");
3
+ const gradientFix = `
4
+ background-origin: border-box !important;
5
+ background-clip: padding-box !important;
6
+ `;
7
+ const baseStyles = [
8
+ colors.bg && `background: ${colors.bg} !important;`,
9
+ colors.bg && isGradient(colors.bg) && gradientFix,
10
+ colors.text && `color: ${colors.text} !important;`,
11
+ colors.border && `border: 2px solid ${colors.border} !important;`
12
+ ].filter(Boolean).join("\n");
13
+ const hoverBg = colors.hoverBg || colors.bg;
14
+ const hoverText = colors.hoverText || colors.text;
15
+ const hoverBorder = colors.hoverBorder || colors.border;
16
+ const hoverStyles = [
17
+ hoverBg && `background: ${hoverBg} !important;`,
18
+ hoverBg && isGradient(hoverBg) && gradientFix,
19
+ hoverText && `color: ${hoverText} !important;`,
20
+ hoverBorder && `border: 2px solid ${hoverBorder} !important;`
21
+ ].filter(Boolean).join("\n");
22
+ return `
23
+ #${id} { ${baseStyles} }
24
+ #${id}:not(:disabled):hover { ${hoverStyles} }
25
+ `;
26
+ }
27
+ export {
28
+ generateCustomCSS
29
+ };
package/lib/components/hero/hero.qwik.cjs CHANGED
@@ -4,19 +4,59 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
4
4
  const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/latin-500.css");
7
- const Hero = qwik.component$(({ title, content }) => {
7
+ require("@fontsource/roboto-condensed/latin-400.css");
8
+ const Hero = qwik.component$(({ title, content, highlightText, highlightColor = "#0095ae" }) => {
8
9
  qwik.useStylesScoped$(styles);
9
- return /* @__PURE__ */ jsxRuntime.jsxs("div", {
10
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
10
11
  class: "hero",
11
- children: [
12
- /* @__PURE__ */ jsxRuntime.jsx("h1", {
13
- children: title
14
- }),
15
- /* @__PURE__ */ jsxRuntime.jsx("p", {
16
- children: content
17
- }),
18
- /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
19
- ]
12
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
13
+ class: "hero-grid",
14
+ children: [
15
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
16
+ class: "span-1-md"
17
+ }),
18
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
19
+ class: "span-10-md",
20
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
21
+ class: "ion-hero-2up",
22
+ children: [
23
+ /* @__PURE__ */ jsxRuntime.jsxs("div", {
24
+ class: "hero-2up__left-area",
25
+ children: [
26
+ /* @__PURE__ */ jsxRuntime.jsx("h1", {
27
+ class: "headline-1",
28
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
29
+ class: "title",
30
+ children: [
31
+ highlightText && /* @__PURE__ */ jsxRuntime.jsx("span", {
32
+ style: {
33
+ color: highlightColor
34
+ },
35
+ children: highlightText
36
+ }),
37
+ " ",
38
+ title
39
+ ]
40
+ })
41
+ }),
42
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
43
+ class: "content",
44
+ children: content
45
+ }),
46
+ /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
47
+ ]
48
+ }),
49
+ /* @__PURE__ */ jsxRuntime.jsx("div", {
50
+ class: "hero-2up__right-area",
51
+ children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
52
+ name: "media"
53
+ })
54
+ })
55
+ ]
56
+ })
57
+ })
58
+ ]
59
+ })
20
60
  });
21
61
  });
22
62
  exports.Hero = Hero;
package/lib/components/hero/hero.qwik.mjs CHANGED
@@ -1,20 +1,60 @@
1
- import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
1
+ import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
2
2
  import { component$, useStylesScoped$, Slot } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import "@fontsource/roboto-condensed/latin-500.css";
5
- const Hero = component$(({ title, content }) => {
5
+ import "@fontsource/roboto-condensed/latin-400.css";
6
+ const Hero = component$(({ title, content, highlightText, highlightColor = "#0095ae" }) => {
6
7
  useStylesScoped$(styles);
7
- return /* @__PURE__ */ jsxs("div", {
8
+ return /* @__PURE__ */ jsx("div", {
8
9
  class: "hero",
9
- children: [
10
- /* @__PURE__ */ jsx("h1", {
11
- children: title
12
- }),
13
- /* @__PURE__ */ jsx("p", {
14
- children: content
15
- }),
16
- /* @__PURE__ */ jsx(Slot, {})
17
- ]
10
+ children: /* @__PURE__ */ jsxs("div", {
11
+ class: "hero-grid",
12
+ children: [
13
+ /* @__PURE__ */ jsx("div", {
14
+ class: "span-1-md"
15
+ }),
16
+ /* @__PURE__ */ jsx("div", {
17
+ class: "span-10-md",
18
+ children: /* @__PURE__ */ jsxs("div", {
19
+ class: "ion-hero-2up",
20
+ children: [
21
+ /* @__PURE__ */ jsxs("div", {
22
+ class: "hero-2up__left-area",
23
+ children: [
24
+ /* @__PURE__ */ jsx("h1", {
25
+ class: "headline-1",
26
+ children: /* @__PURE__ */ jsxs("span", {
27
+ class: "title",
28
+ children: [
29
+ highlightText && /* @__PURE__ */ jsx("span", {
30
+ style: {
31
+ color: highlightColor
32
+ },
33
+ children: highlightText
34
+ }),
35
+ " ",
36
+ title
37
+ ]
38
+ })
39
+ }),
40
+ /* @__PURE__ */ jsx("div", {
41
+ class: "content",
42
+ children: content
43
+ }),
44
+ /* @__PURE__ */ jsx(Slot, {})
45
+ ]
46
+ }),
47
+ /* @__PURE__ */ jsx("div", {
48
+ class: "hero-2up__right-area",
49
+ children: /* @__PURE__ */ jsx(Slot, {
50
+ name: "media"
51
+ })
52
+ })
53
+ ]
54
+ })
55
+ })
56
+ ]
57
+ })
18
58
  });
19
59
  });
20
60
  export {
package/lib/components/hero/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = ".hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n}\r\n";
2
+ const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/hero/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = ".hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n}\r\n";
1
+ const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib-types/components/button/button.d.ts CHANGED
@@ -3,6 +3,14 @@ import '@fontsource/roboto-condensed/latin-500.css';
3
3
  export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'icon' | 'tertiary' | 'tab';
4
4
  export type ButtonType = 'button' | 'submit' | 'reset';
5
5
  export type ButtonSize = 'sm' | 'md' | 'lg';
6
+ export interface CustomColors {
7
+ bg?: string;
8
+ hoverBg?: string;
9
+ text?: string;
10
+ hoverText?: string;
11
+ border?: string;
12
+ hoverBorder?: string;
13
+ }
6
14
  export interface ButtonProps {
7
15
  id: string;
8
16
  label?: string;
@@ -15,5 +23,6 @@ export interface ButtonProps {
15
23
  onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
16
24
  isLoading?: boolean | Signal<boolean>;
17
25
  active?: boolean;
26
+ customColors?: CustomColors;
18
27
  }
19
28
  export declare const Button: Component<ButtonProps>;
package/lib-types/components/button/button.utils.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { CustomColors } from './button';
2
+ export declare function generateCustomCSS(id: string, colors: CustomColors): string;
package/lib-types/components/hero/hero.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import '@fontsource/roboto-condensed/latin-500.css';
2
+ import '@fontsource/roboto-condensed/latin-400.css';
2
3
  export interface HeroProps {
3
4
  title?: string;
4
5
  content?: string;
6
+ highlightText?: string;
7
+ highlightColor?: string;
5
8
  }
6
9
  export declare const Hero: import("@builder.io/qwik").Component<HeroProps>;
package/lib-types/stories/button.stories.d.ts CHANGED
@@ -6,3 +6,10 @@ type Story = StoryObj<ButtonProps>;
6
6
  export declare const Primary: Story;
7
7
  export declare const WithIcon: Story;
8
8
  export declare const WithLoader: Story;
9
+ export declare const CustomSolidColor: Story;
10
+ export declare const CustomGradient: Story;
11
+ export declare const CustomOutlined: Story;
12
+ export declare const CustomSuccess: Story;
13
+ export declare const CustomWarning: Story;
14
+ export declare const CustomWithIcon: Story;
15
+ export declare const CustomWithBorder: Story;
package/lib-types/stories/hero.stories.d.ts CHANGED
@@ -4,3 +4,6 @@ declare const meta: Meta<HeroProps>;
4
4
  export default meta;
5
5
  type Story = StoryObj<HeroProps>;
6
6
  export declare const HeroWithText: Story;
7
+ export declare const HeroWithHighlight: Story;
8
+ export declare const HeroWithGradientHighlight: Story;
9
+ export declare const HeroNoHighlight: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.0.9",
3
+ "version": "2.1.1",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",