@stamcat/craftsman 0.0.23-alpha.24 → 0.0.23-alpha.25

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 (25) hide show
  1. package/Styles.esm.js +8 -8
  2. package/package.json +1 -1
  3. package/src/styles/components/ClientProvider.d.ts +0 -2
  4. package/src/styles/components/ClientProvider.esm.js +9 -10
  5. package/src/styles/components/NextJSProvider.d.ts +1 -3
  6. package/src/styles/components/NextJSProvider.esm.js +21 -23
  7. package/src/styles/global/components/button.esm.js +5 -5
  8. package/src/styles/global/components/code.esm.js +5 -4
  9. package/src/styles/global/components/loaders.d.ts +0 -2
  10. package/src/styles/global/components/loaders.esm.js +1 -11
  11. package/src/styles/global/components/loaders.module.css +1 -1
  12. package/src/styles/global/components/loaders.module.esm.js +13 -17
  13. package/src/styles/global/components/loaders.module.scss +73 -67
  14. package/src/styles/global/variables.esm.js +8 -3
  15. package/src/styles/index.d.ts +0 -1
  16. package/src/styles/utilities/color.d.ts +170 -1
  17. package/src/styles/utilities/color.esm.js +4 -8
  18. package/src/styles/utilities/constants.d.ts +168 -73
  19. package/src/styles/utilities/constants.esm.js +174 -70
  20. package/src/styles/utilities/layout.d.ts +5 -2
  21. package/src/styles/utilities/layout.esm.js +19 -24
  22. package/src/styles/utilities/types.d.ts +44 -15
  23. package/src/styles/utilities/types.esm.js +25 -0
  24. package/src/styles/utilities/config.d.ts +0 -7
  25. package/src/styles/utilities/config.esm.js +0 -41
package/Styles.esm.js CHANGED
@@ -1,8 +1,8 @@
1
- import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
2
- import { getCraftsmanConfig as n, resetCraftsmanConfig as r, setCraftsmanConfig as i } from "./src/styles/utilities/config.esm.js";
3
- import { breakpoint as a, media as o, width as s, widths as c } from "./src/styles/utilities/layout.esm.js";
4
- import { color as l, colors as u, hexToRgba as d } from "./src/styles/utilities/color.esm.js";
5
- import { CraftsmanThemeProvider as f, themeBuilder as p } from "./src/styles/theme/theme.esm.js";
6
- import { globalStyles as m } from "./src/styles/global/globalStyles.esm.js";
7
- import { ClientProvider as h } from "./src/styles/components/ClientProvider.esm.js";
8
- export { h as ClientProvider, f as CraftsmanThemeProvider, a as breakpoint, l as color, u as colors, e as defaultColors, t as defaultWidths, n as getCraftsmanConfig, m as globalStyles, d as hexToRgba, o as media, r as resetCraftsmanConfig, i as setCraftsmanConfig, p as themeBuilder, s as width, c as widths };
1
+ import { BaseWidthSchema as e, BreakpointSchema as t, LayoutWidthsSchema as n, MaxScreenWidthSchema as r, ScreenWidthSchema as i } from "./src/styles/utilities/types.esm.js";
2
+ import { defaultColors as a, defaultWidths as o } from "./src/styles/utilities/constants.esm.js";
3
+ import { breakpoint as s, media as c, width as l, widths as u } from "./src/styles/utilities/layout.esm.js";
4
+ import { color as d, colors as f, hexToRgba as p } from "./src/styles/utilities/color.esm.js";
5
+ import { CraftsmanThemeProvider as m, themeBuilder as h } from "./src/styles/theme/theme.esm.js";
6
+ import { globalStyles as g } from "./src/styles/global/globalStyles.esm.js";
7
+ import { ClientProvider as _ } from "./src/styles/components/ClientProvider.esm.js";
8
+ export { e as BaseWidthSchema, t as BreakpointSchema, _ as ClientProvider, m as CraftsmanThemeProvider, n as LayoutWidthsSchema, r as MaxScreenWidthSchema, i as ScreenWidthSchema, s as breakpoint, d as color, f as colors, a as defaultColors, o as defaultWidths, g as globalStyles, p as hexToRgba, c as media, h as themeBuilder, l as width, u as widths };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stamcat/craftsman",
3
- "version": "0.0.23-alpha.24",
3
+ "version": "0.0.23-alpha.25",
4
4
  "type": "module",
5
5
  "description": "A powerful, lightweight framework for design systems",
6
6
  "repository": {
package/src/styles/components/ClientProvider.d.ts CHANGED
@@ -1,7 +1,5 @@
1
- import { CraftsmanStyleConfig } from '../utilities/types';
2
1
  import { Theme } from '../theme/types';
3
2
  type ClientProviderProps = {
4
- config?: CraftsmanStyleConfig;
5
3
  theme?: Theme;
6
4
  children?: React.ReactNode;
7
5
  };
package/src/styles/components/ClientProvider.esm.js CHANGED
@@ -1,14 +1,13 @@
1
- import { setCraftsmanConfig as e } from "../utilities/config.esm.js";
2
- import { CraftsmanThemeProvider as t, themeBuilder as n } from "../theme/theme.esm.js";
3
- import { globalStyles as r } from "../global/globalStyles.esm.js";
4
- import { Global as i } from "@emotion/react";
5
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
1
+ import { CraftsmanThemeProvider as e, themeBuilder as t } from "../theme/theme.esm.js";
2
+ import { globalStyles as n } from "../global/globalStyles.esm.js";
3
+ import { Global as r } from "@emotion/react";
4
+ import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
5
  //#region src/styles/components/ClientProvider.tsx
7
- function s(s) {
8
- return s.config && e(s.config), /* @__PURE__ */ o(t, {
9
- theme: s.theme || {},
10
- children: [/* @__PURE__ */ a(i, { styles: (e) => [r, n(e)] }), s.children]
6
+ function o(o) {
7
+ return /* @__PURE__ */ a(e, {
8
+ theme: o.theme || {},
9
+ children: [/* @__PURE__ */ i(r, { styles: (e) => [n, t(e)] }), o.children]
11
10
  });
12
11
  }
13
12
  //#endregion
14
- export { s as ClientProvider };
13
+ export { o as ClientProvider };
package/src/styles/components/NextJSProvider.d.ts CHANGED
@@ -1,10 +1,8 @@
1
- import { CraftsmanStyleConfig } from '../utilities/types';
2
1
  import { Theme } from '../theme/types';
3
2
  type StyleProviderProps = {
4
3
  key?: string;
5
4
  children?: React.ReactNode;
6
- config?: CraftsmanStyleConfig;
7
5
  theme?: Theme;
8
6
  };
9
- export declare function NextJSProvider({ children, key, config, theme }: StyleProviderProps): import("react").JSX.Element;
7
+ export declare function NextJSProvider({ children, key, theme }: StyleProviderProps): import("react").JSX.Element;
10
8
  export {};
package/src/styles/components/NextJSProvider.esm.js CHANGED
@@ -1,17 +1,15 @@
1
1
  "use client";
2
- import { setCraftsmanConfig as e } from "../utilities/config.esm.js";
3
- import { CraftsmanThemeProvider as t, themeBuilder as n } from "../theme/theme.esm.js";
4
- import { globalStyles as r } from "../global/globalStyles.esm.js";
5
- import { CacheProvider as i, Global as a } from "@emotion/react";
6
- import { jsx as o, jsxs as s } from "react/jsx-runtime";
7
- import { useState as c } from "react";
8
- import l from "@emotion/cache";
9
- import { useServerInsertedHTML as u } from "next/navigation";
2
+ import { CraftsmanThemeProvider as e, themeBuilder as t } from "../theme/theme.esm.js";
3
+ import { globalStyles as n } from "../global/globalStyles.esm.js";
4
+ import { CacheProvider as r, Global as i } from "@emotion/react";
5
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
+ import { useState as s } from "react";
7
+ import c from "@emotion/cache";
8
+ import { useServerInsertedHTML as l } from "next/navigation";
10
9
  //#region src/styles/components/NextJSProvider.tsx
11
- function d({ children: d, key: f = "app", config: p, theme: m }) {
12
- p && e(p);
13
- let [{ cache: h, flush: g }] = c(() => {
14
- let e = l({ key: f });
10
+ function u({ children: u, key: d = "app", theme: f }) {
11
+ let [{ cache: p, flush: m }] = s(() => {
12
+ let e = c({ key: d });
15
13
  e.compat = !0;
16
14
  let t = e.insert, n = [];
17
15
  return e.insert = (...r) => {
@@ -25,22 +23,22 @@ function d({ children: d, key: f = "app", config: p, theme: m }) {
25
23
  }
26
24
  };
27
25
  });
28
- return u(() => {
29
- let e = g();
26
+ return l(() => {
27
+ let e = m();
30
28
  if (e.length === 0) return null;
31
29
  let t = "";
32
- for (let n of e) t += h.inserted[n];
33
- return /* @__PURE__ */ o("style", {
34
- "data-emotion": `${h.key} ${e.join(" ")}`,
30
+ for (let n of e) t += p.inserted[n];
31
+ return /* @__PURE__ */ a("style", {
32
+ "data-emotion": `${p.key} ${e.join(" ")}`,
35
33
  dangerouslySetInnerHTML: { __html: t }
36
34
  });
37
- }), /* @__PURE__ */ o(i, {
38
- value: h,
39
- children: /* @__PURE__ */ s(t, {
40
- theme: m || {},
41
- children: [/* @__PURE__ */ o(a, { styles: (e) => [r, n(e)] }), d]
35
+ }), /* @__PURE__ */ a(r, {
36
+ value: p,
37
+ children: /* @__PURE__ */ o(e, {
38
+ theme: f || {},
39
+ children: [/* @__PURE__ */ a(i, { styles: (e) => [n, t(e)] }), u]
42
40
  })
43
41
  });
44
42
  }
45
43
  //#endregion
46
- export { d as NextJSProvider };
44
+ export { u as NextJSProvider };
package/src/styles/global/components/button.esm.js CHANGED
@@ -38,12 +38,12 @@ var r = t`
38
38
  &:disabled,
39
39
  &.disabled {
40
40
  cursor: not-allowed;
41
- border-color: var(--grey200);
42
- color: var(--grey400);
41
+ border-color: var(--gray200);
42
+ color: var(--gray400);
43
43
  &.primary {
44
- border-color: var(--grey200);
45
- background-color: var(--grey400);
46
- color: var(--grey200);
44
+ border-color: var(--gray200);
45
+ background-color: var(--gray400);
46
+ color: var(--gray200);
47
47
  }
48
48
  }
49
49
  &.primary {
package/src/styles/global/components/code.esm.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import { css as e } from "@emotion/react";
2
2
  //#region src/styles/global/components/code.ts
3
3
  var t = e`
4
- background-color: var(--grey200);
5
- color: var(--grey800);
4
+ background-color: var(--gray200);
5
+ color: var(--gray800);
6
6
  padding: calc(var(--w-gutter) * 0.125) calc(var(--w-gutter) * 0.25);
7
7
  margin: calc(var(--w-gutter) * 0.125);
8
8
  display: inline-block;
9
+ font-size: var(--w-text);
9
10
  &:has(pre) {
10
11
  padding: var(--w-gutter);
11
12
  border-radius: calc(var(--w-gutter) * 0.5);
12
- background-color: var(--grey800);
13
- color: var(--grey200);
13
+ background-color: var(--gray800);
14
+ color: var(--gray200);
14
15
  }
15
16
 
16
17
  &:has(pre) pre {
package/src/styles/global/components/loaders.d.ts CHANGED
@@ -3,14 +3,12 @@ import { default as z } from 'zod';
3
3
  export declare const LoaderStyleSchema: z.ZodEnum<{
4
4
  dots: "dots";
5
5
  "dots-trace": "dots-trace";
6
- "dots-bounce": "dots-bounce";
7
6
  "dots-orbit": "dots-orbit";
8
7
  dashes: "dashes";
9
8
  spinner: "spinner";
10
9
  swirl: "swirl";
11
10
  ball: "ball";
12
11
  boxy: "boxy";
13
- factory: "factory";
14
12
  }>;
15
13
  export type LoaderStyle = z.infer<typeof LoaderStyleSchema>;
16
14
  export type LoaderStyleDefinition = (color: string, width?: number) => SerializedStyles;
package/src/styles/global/components/loaders.esm.js CHANGED
@@ -3,14 +3,12 @@ import t from "zod";
3
3
  t.enum([
4
4
  "dots",
5
5
  "dots-trace",
6
- "dots-bounce",
7
6
  "dots-orbit",
8
7
  "dashes",
9
8
  "spinner",
10
9
  "swirl",
11
10
  "ball",
12
- "boxy",
13
- "factory"
11
+ "boxy"
14
12
  ]);
15
13
  var n = {
16
14
  dots: (t, n = 100) => e`
@@ -18,10 +16,6 @@ var n = {
18
16
  --_l5w: ${Math.round(n * .125)}px;
19
17
  --_l5w2: ${Math.round(n * .16666)}px;
20
18
  --_l5w3: ${Math.round(n * -.16666)}px;
21
- `,
22
- "dots-bounce": (t, n = 60) => e`
23
- --_g: no-repeat radial-gradient(circle closest-side, ${t} 90%, #0000);
24
- --_gw: ${n}px;
25
19
  `,
26
20
  "dots-trace": (t, n = 60) => e`
27
21
  --_dtc: ${t};
@@ -55,10 +49,6 @@ var n = {
55
49
  --_boxc: ${t};
56
50
  --_boxw: ${n}px;
57
51
  --_boxw2: ${Math.round(n * .16666)}px;
58
- `,
59
- factory: (t, n = 0) => e`
60
- --_ftyc: ${t};
61
- --_ftyw: ${n};
62
52
  `
63
53
  };
64
54
  //#endregion
package/src/styles/global/components/loaders.module.css CHANGED
@@ -1 +1 @@
1
- ._dots_1132g_1{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1132g_1}@keyframes _l5_1132g_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}._dots-bounce_1132g_27{width:var(--_gw);aspect-ratio:2;background:var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;background-size:33.3333% 50%;animation:1s linear infinite _l3_1132g_1}@keyframes _l3_1132g_1{to{transform:rotate(1turn)}}._dots-trace_1132g_49{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_1132g_1}@keyframes _l1_1132g_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1132g_62{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1132g_1;display:grid}._dots-orbit_1132g_62:before,._dots-orbit_1132g_62:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1132g_1;transform:rotate(0)translate(150%)}._dots-orbit_1132g_62:after{animation-delay:-.5s}@keyframes _l22-0_1132g_1{to{transform:rotate(1turn)}}@keyframes _l22_1132g_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1132g_93{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_1132g_93}@keyframes _dashes_1132g_93{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_1132g_119{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_1132g_1}@keyframes _l2_1132g_1{to{transform:rotate(1turn)}}._swirl_1132g_133{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_1132g_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1132g_154{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_1132g_1}@keyframes _l9_1132g_1{to{transform:rotate(1turn)}}._boxy_1132g_167{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_1132g_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1132g_1{to{background-position:right -25% top 0}}._factory_1132g_180{width:var(--_ftyw);height:var(--_ftyw2);box-shadow:0 3px 0 var(--_ftyc);clip-path:inset(-40px 0 -5px);position:relative}._factory_1132g_180:before{content:"";height:var(--_ftyw3);--g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);background:var(--g), var(--g), var(--g), var(--g);background-size:var(--_ftyw4) 14px;animation:2s linear infinite _l7-1_1132g_1,2s linear infinite _l7-2_1132g_1;position:absolute;inset:auto calc(50% - 17px) 0}@keyframes _l7-1_1132g_1{0%,to{background-position:0 -var(--_ftyw3), 100% -var(--_ftyw3)}17.5%{background-position:0 100%, 100% -var(--_ftyw3), 0 -var(--_ftyw3), 100% -var(--_ftyw3)}35%{background-position:0 100%, 100% 100%, 0 -var(--_ftyw3), 100% -var(--_ftyw3)}52.5%{background-position:0 100%, 100% 100%, 0 calc(100% - var(--_ftyw4)), 100% -var(--_ftyw3)}70%,98%{background-position:0 100%, 100% 100%, 0 calc(100% - var(--_ftyw4)), 100% calc(100% - var(--_ftyw4))}}@keyframes _l7-2_1132g_1{0%,70%{transform:translate(0)}to{transform:translate(200%)}}
1
+ ._dots_1w7tl_1{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1w7tl_1}@keyframes _l5_1w7tl_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_1w7tl_1{to{transform:rotate(1turn)}}._dots-trace_1w7tl_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_1w7tl_1}@keyframes _l1_1w7tl_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1w7tl_54{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1w7tl_1;display:grid}._dots-orbit_1w7tl_54:before,._dots-orbit_1w7tl_54:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1w7tl_1;transform:rotate(0)translate(150%)}._dots-orbit_1w7tl_54:after{animation-delay:-.5s}@keyframes _l22-0_1w7tl_1{to{transform:rotate(1turn)}}@keyframes _l22_1w7tl_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1w7tl_85{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_1w7tl_85}@keyframes _dashes_1w7tl_85{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_1w7tl_111{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_1w7tl_1}@keyframes _l2_1w7tl_1{to{transform:rotate(1turn)}}._swirl_1w7tl_125{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_1w7tl_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1w7tl_146{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_1w7tl_1}@keyframes _l9_1w7tl_1{to{transform:rotate(1turn)}}._boxy_1w7tl_159{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_1w7tl_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1w7tl_1{to{background-position:right -25% top 0}}
package/src/styles/global/components/loaders.module.esm.js CHANGED
@@ -1,25 +1,21 @@
1
1
  import './loaders.module.css';//#region src/styles/global/components/loaders.module.scss
2
- var e = "_dots_1132g_1", t = "_l5_1132g_1", n = "_l3_1132g_1", r = "_l1_1132g_1", i = "_l22_1132g_1", a = "_dashes_1132g_93", o = "_spinner_1132g_119", s = "_l2_1132g_1", c = "_swirl_1132g_133", l = "_ball_1132g_154", u = "_l9_1132g_1", d = "_boxy_1132g_167", f = "_l7_1132g_1", p = "_factory_1132g_180", m = {
2
+ var e = "_dots_1w7tl_1", t = "_l5_1w7tl_1", n = "_l1_1w7tl_1", r = "_l22_1w7tl_1", i = "_dashes_1w7tl_85", a = "_spinner_1w7tl_111", o = "_l2_1w7tl_1", s = "_swirl_1w7tl_125", c = "_l3_1w7tl_1", l = "_ball_1w7tl_146", u = "_l9_1w7tl_1", d = "_boxy_1w7tl_159", f = "_l7_1w7tl_1", p = {
3
3
  dots: e,
4
4
  l5: t,
5
- "dots-bounce": "_dots-bounce_1132g_27",
6
- l3: n,
7
- "dots-trace": "_dots-trace_1132g_49",
8
- l1: r,
9
- "dots-orbit": "_dots-orbit_1132g_62",
10
- "l22-0": "_l22-0_1132g_1",
11
- l22: i,
12
- dashes: a,
13
- spinner: o,
14
- l2: s,
15
- swirl: c,
5
+ "dots-trace": "_dots-trace_1w7tl_41",
6
+ l1: n,
7
+ "dots-orbit": "_dots-orbit_1w7tl_54",
8
+ "l22-0": "_l22-0_1w7tl_1",
9
+ l22: r,
10
+ dashes: i,
11
+ spinner: a,
12
+ l2: o,
13
+ swirl: s,
14
+ l3: c,
16
15
  ball: l,
17
16
  l9: u,
18
17
  boxy: d,
19
- l7: f,
20
- factory: p,
21
- "l7-1": "_l7-1_1132g_1",
22
- "l7-2": "_l7-2_1132g_1"
18
+ l7: f
23
19
  };
24
20
  //#endregion
25
- export { l as ball, d as boxy, a as dashes, m as default, e as dots, p as factory, r as l1, s as l2, i as l22, n as l3, t as l5, f as l7, u as l9, o as spinner, c as swirl };
21
+ export { l as ball, d as boxy, i as dashes, p as default, e as dots, n as l1, o as l2, r as l22, c as l3, t as l5, f as l7, u as l9, a as spinner, s as swirl };
package/src/styles/global/components/loaders.module.scss CHANGED
@@ -32,42 +32,48 @@
32
32
  }
33
33
  }
34
34
 
35
- .dots-bounce {
36
- width: var(--_gw);
37
- aspect-ratio: 2;
38
- background:
39
- var(--_g) 0% 50%,
40
- var(--_g) 50% 50%,
41
- var(--_g) 100% 50%;
42
- background-size: calc(100% / 3) 50%;
43
- animation: l3 1s infinite linear;
44
- }
45
35
  @keyframes l3 {
46
- 20% {
47
- background-position:
48
- 0% 0%,
49
- 50% 50%,
50
- 100% 50%;
51
- }
52
- 40% {
53
- background-position:
54
- 0% 100%,
55
- 50% 0%,
56
- 100% 50%;
57
- }
58
- 60% {
59
- background-position:
60
- 0% 50%,
61
- 50% 100%,
62
- 100% 0%;
63
- }
64
- 80% {
65
- background-position:
66
- 0% 50%,
67
- 50% 50%,
68
- 100% 100%;
69
- }
70
- }
36
+ 20%{background-position:0% 0%, 50% 50%,100% 50%}
37
+ 40%{background-position:0% 100%, 50% 0%,100% 50%}
38
+ 60%{background-position:0% 50%, 50% 100%,100% 0%}
39
+ 80%{background-position:0% 50%, 50% 50%,100% 100%}
40
+ }
41
+ // .dots-bounce {
42
+ // width: var(--_gw);
43
+ // aspect-ratio: 2;
44
+ // background:
45
+ // var(--_g) 0% 50%,
46
+ // var(--_g) 50% 50%,
47
+ // var(--_g) 100% 50%;
48
+ // background-size: calc(100% / 3) 50%;
49
+ // animation: l3 1s infinite linear;
50
+ // }
51
+ // @keyframes l3 {
52
+ // 20% {
53
+ // background-position:
54
+ // 0% 0%,
55
+ // 50% 50%,
56
+ // 100% 50%;
57
+ // }
58
+ // 40% {
59
+ // background-position:
60
+ // 0% 100%,
61
+ // 50% 0%,
62
+ // 100% 50%;
63
+ // }
64
+ // 60% {
65
+ // background-position:
66
+ // 0% 50%,
67
+ // 50% 100%,
68
+ // 100% 0%;
69
+ // }
70
+ // 80% {
71
+ // background-position:
72
+ // 0% 50%,
73
+ // 50% 50%,
74
+ // 100% 100%;
75
+ // }
76
+ // }
71
77
 
72
78
  .dots-trace {
73
79
  width: var(--_dtw);
@@ -205,36 +211,36 @@
205
211
  100% {background-position: right -25% top 0}
206
212
  }
207
213
 
208
- .factory {
209
- width: var(--_ftyw);
210
- height: var(--_ftyw2);
211
- box-shadow: 0 3px 0 var(--_ftyc);
212
- position: relative;
213
- clip-path: inset(-40px 0 -5px);
214
- &:before {
215
- content: "";
216
- position: absolute;
217
- inset: auto calc(50% - 17px) 0;
218
- height: var(--_ftyw3);
219
- --g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);
220
- background: var(--g),var(--g),var(--g),var(--g);
221
- background-size: var(--_ftyw4) 14px;
222
- animation:
223
- l7-1 2s infinite linear,
224
- l7-2 2s infinite linear;
225
- }
226
- }
227
- @keyframes l7-1 {
228
- 0%,
229
- 100% {background-position: 0 -var(--_ftyw3),100% -var(--_ftyw3)}
230
- 17.5% {background-position: 0 100%,100% -var(--_ftyw3),0 -var(--_ftyw3),100% -var(--_ftyw3)}
231
- 35% {background-position: 0 100%,100% 100% ,0 -var(--_ftyw3),100% -var(--_ftyw3)}
232
- 52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% -var(--_ftyw3)}
233
- 70%,
234
- 98% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% calc(100% - var(--_ftyw4))}
235
- }
236
- @keyframes l7-2 {
237
- 0%,70% {transform:translate(0)}
238
- 100% {transform:translate(200%)}
239
- }
214
+ // .factory {
215
+ // width: var(--_ftyw);
216
+ // height: var(--_ftyw2);
217
+ // box-shadow: 0 3px 0 var(--_ftyc);
218
+ // position: relative;
219
+ // clip-path: inset(-40px 0 -5px);
220
+ // &:before {
221
+ // content: "";
222
+ // position: absolute;
223
+ // inset: auto calc(50% - 17px) 0;
224
+ // height: var(--_ftyw3);
225
+ // --g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);
226
+ // background: var(--g),var(--g),var(--g),var(--g);
227
+ // background-size: var(--_ftyw4) 14px;
228
+ // animation:
229
+ // l7-1 2s infinite linear,
230
+ // l7-2 2s infinite linear;
231
+ // }
232
+ // }
233
+ // @keyframes l7-1 {
234
+ // 0%,
235
+ // 100% {background-position: 0 -var(--_ftyw3),100% -var(--_ftyw3)}
236
+ // 17.5% {background-position: 0 100%,100% -var(--_ftyw3),0 -var(--_ftyw3),100% -var(--_ftyw3)}
237
+ // 35% {background-position: 0 100%,100% 100% ,0 -var(--_ftyw3),100% -var(--_ftyw3)}
238
+ // 52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% -var(--_ftyw3)}
239
+ // 70%,
240
+ // 98% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% calc(100% - var(--_ftyw4))}
241
+ // }
242
+ // @keyframes l7-2 {
243
+ // 0%,70% {transform:translate(0)}
244
+ // 100% {transform:translate(200%)}
245
+ // }
240
246
 
package/src/styles/global/variables.esm.js CHANGED
@@ -1,6 +1,11 @@
1
- import { widths as e } from "../utilities/layout.esm.js";
1
+ import { defaultWidths as e } from "../utilities/constants.esm.js";
2
2
  import { colors as t } from "../utilities/color.esm.js";
3
3
  //#region src/styles/global/variables.ts
4
- var n = Object.entries(t).map(([e, t]) => `--${e}: ${t};`).join("\n"), r = Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join("\n");
4
+ var n = {
5
+ ...e,
6
+ mobileMax: e.tablet - 1e-5,
7
+ tabletMax: e.desktop - 1e-5,
8
+ desktopMax: e.extDesktop - 1e-5
9
+ }, r = Object.entries(t).map(([e, t]) => `--${e}: ${t};`).join("\n"), i = Object.entries(n).map(([e, t]) => `--w-${e}: ${t}px;`).join("\n");
5
10
  //#endregion
6
- export { n as colors, r as widths };
11
+ export { r as colors, i as widths };
package/src/styles/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export * from './utilities/color';
2
- export * from './utilities/config';
3
2
  export * from './utilities/constants';
4
3
  export * from './utilities/layout';
5
4
  export * from './utilities/types';
package/src/styles/utilities/color.d.ts CHANGED
@@ -1,5 +1,174 @@
1
1
  import { ColorType } from './types';
2
- export declare const colors: Record<string, string>;
2
+ export declare const colors: {
3
+ red990: string;
4
+ red950: string;
5
+ red925: string;
6
+ red900: string;
7
+ red850: string;
8
+ red800: string;
9
+ red750: string;
10
+ red700: string;
11
+ red650: string;
12
+ red600: string;
13
+ red550: string;
14
+ red500: string;
15
+ red450: string;
16
+ red400: string;
17
+ red350: string;
18
+ red300: string;
19
+ red250: string;
20
+ red200: string;
21
+ red150: string;
22
+ red100: string;
23
+ red50: string;
24
+ red10: string;
25
+ orange950: string;
26
+ orange900: string;
27
+ orange800: string;
28
+ orange700: string;
29
+ orange600: string;
30
+ orange500: string;
31
+ orange400: string;
32
+ orange300: string;
33
+ orange200: string;
34
+ orange100: string;
35
+ orange50: string;
36
+ yellow950: string;
37
+ yellow900: string;
38
+ yellow800: string;
39
+ yellow700: string;
40
+ yellow600: string;
41
+ yellow500: string;
42
+ yellow400: string;
43
+ yellow300: string;
44
+ yellow200: string;
45
+ yellow100: string;
46
+ yellow50: string;
47
+ green990: string;
48
+ green975: string;
49
+ green950: string;
50
+ green900: string;
51
+ green850: string;
52
+ green800: string;
53
+ green750: string;
54
+ green700: string;
55
+ green650: string;
56
+ green600: string;
57
+ green550: string;
58
+ green500: string;
59
+ green450: string;
60
+ green400: string;
61
+ green350: string;
62
+ green300: string;
63
+ green250: string;
64
+ green200: string;
65
+ green100: string;
66
+ green80: string;
67
+ green50: string;
68
+ green10: string;
69
+ teal990: string;
70
+ teal975: string;
71
+ teal950: string;
72
+ teal900: string;
73
+ teal850: string;
74
+ teal800: string;
75
+ teal750: string;
76
+ teal700: string;
77
+ teal650: string;
78
+ teal600: string;
79
+ teal550: string;
80
+ teal500: string;
81
+ teal450: string;
82
+ teal400: string;
83
+ teal300: string;
84
+ teal250: string;
85
+ teal150: string;
86
+ teal50: string;
87
+ teal10: string;
88
+ blue900: string;
89
+ blue800: string;
90
+ blue700: string;
91
+ blue600: string;
92
+ blue500: string;
93
+ blue450: string;
94
+ blue400: string;
95
+ blue350: string;
96
+ blue300: string;
97
+ blue250: string;
98
+ blue200: string;
99
+ blue150: string;
100
+ blue100: string;
101
+ blue50: string;
102
+ navy950: string;
103
+ navy900: string;
104
+ navy800: string;
105
+ navy700: string;
106
+ navy600: string;
107
+ navy500: string;
108
+ navy400: string;
109
+ navy300: string;
110
+ navy200: string;
111
+ navy100: string;
112
+ navy50: string;
113
+ violet950: string;
114
+ violet900: string;
115
+ violet800: string;
116
+ violet700: string;
117
+ violet600: string;
118
+ violet500: string;
119
+ violet400: string;
120
+ violet300: string;
121
+ violet200: string;
122
+ violet100: string;
123
+ violet50: string;
124
+ purple950: string;
125
+ purple900: string;
126
+ purple800: string;
127
+ purple700: string;
128
+ purple600: string;
129
+ purple500: string;
130
+ purple400: string;
131
+ purple300: string;
132
+ purple200: string;
133
+ purple100: string;
134
+ purple50: string;
135
+ beige990: string;
136
+ beige900: string;
137
+ beige800: string;
138
+ beige700: string;
139
+ beige600: string;
140
+ beige500: string;
141
+ beige400: string;
142
+ beige300: string;
143
+ beige200: string;
144
+ beige100: string;
145
+ beige50: string;
146
+ gray999: string;
147
+ gray980: string;
148
+ gray950: string;
149
+ gray900: string;
150
+ gray850: string;
151
+ gray800: string;
152
+ gray750: string;
153
+ gray700: string;
154
+ gray650: string;
155
+ gray600: string;
156
+ gray550: string;
157
+ gray500: string;
158
+ gray450: string;
159
+ gray400: string;
160
+ gray350: string;
161
+ gray300: string;
162
+ gray250: string;
163
+ gray200: string;
164
+ gray150: string;
165
+ gray100: string;
166
+ gray50: string;
167
+ gray10: string;
168
+ white: string;
169
+ black: string;
170
+ text: string;
171
+ };
3
172
  export type ColorKey = keyof typeof colors;
4
173
  export declare function hexToRgba(hex: string, alpha?: number): string;
5
174
  export declare const color: (name: ColorKey, type?: ColorType, alpha?: number) => string;