athameui 0.0.12 → 0.0.13

package/styles/tokens.ts

@@ -1,178 +1,203 @@
-export const tokens = {
-  font: {
-    family: {
-      sans: "Montserrat, sans-serif",
-      serif: "Libre Baskerville, serif"
-    },
-    size: {
-      xs: "0.75rem",
-      sm: "0.875rem",
-      md: "1rem",
-      lg: "1.25rem",
-      xl: "1.5rem",
-      "2xl": "2rem",
-      "3xl": "2.5rem",
-      "4xl": "3rem",
-      "5xl": "3.5rem"
-    }
+export const breakpoints = {
+  xs: 320,
+  sm: 480,
+  md: 620,
+  lg: 768,
+  xl: 896,
+  "2xl": 1024,
+  "3xl": 1280,
+  "4xl": 1536,
+} as const;
+
+export type Breakpoints = typeof breakpoints;
+export type Breakpoint = keyof typeof breakpoints;
+
+const minWidth = (width: number) => `@media (min-width: ${width}px)`;
+const maxWidth = (width: number) => `@media (max-width: ${width - 1}px)`;
+
+export const media = {
+  min: {
+    xs: minWidth(breakpoints.xs),
+    sm: minWidth(breakpoints.sm),
+    md: minWidth(breakpoints.md),
+    lg: minWidth(breakpoints.lg),
+    xl: minWidth(breakpoints.xl),
+    "2xl": minWidth(breakpoints["2xl"]),
+    "3xl": minWidth(breakpoints["3xl"]),
+    "4xl": minWidth(breakpoints["4xl"]),
   },
-  color: {
-    primary: {
-      "50": "#f0f2f5",
-      "100": "#d9dee6",
-      "200": "#b8c3d1",
-      "300": "#8a9bae",
-      "400": "#4a5f7a",
-      "500": "#0b1828",
-      "600": "#081320",
-      "700": "#060e18",
-      "800": "#04090f",
-      "900": "#020407",
-      "default": "#0b1828",
-      vibrant: {
-        "300": "#8ab6ff",
-        "500": "#4f86f7",
-        "700": "#1e3a8a"
-      }
-    },
-    secondary: {
-      "50": "#e6f7f6",
-      "100": "#b3e8e5",
-      "200": "#80d9d4",
-      "300": "#4dcac3",
-      "400": "#2aa39b",
-      "500": "#146b68",
-      "600": "#125a57",
-      "700": "#0f4a47",
-      "800": "#0c3835",
-      "900": "#081f1c",
-      "default": "#146b68",
-      vibrant: {
-        "300": "#75dac7",
-        "500": "#1abc9c",
-        "700": "#138f6e"
-      }
-    },
-    tertiary: {
-      "50": "#f7f4f0",
-      "100": "#eedecc",
-      "200": "#e5c8a8",
-      "300": "#dcb184",
-      "400": "#d19b60",
-      "500": "#bfa081",
-      "600": "#a68965",
-      "700": "#7d6748",
-      "800": "#54442c",
-      "900": "#2b2216",
-      "default": "#bfa081",
-      vibrant: {
-        "300": "#f7c873",
-        "500": "#f39c12",
-        "700": "#c9780e"
-      }
+  max: {
+    xs: maxWidth(breakpoints.xs),
+    sm: maxWidth(breakpoints.sm),
+    md: maxWidth(breakpoints.md),
+    lg: maxWidth(breakpoints.lg),
+    xl: maxWidth(breakpoints.xl),
+    "2xl": maxWidth(breakpoints["2xl"]),
+    "3xl": maxWidth(breakpoints["3xl"]),
+    "4xl": maxWidth(breakpoints["4xl"]),
+  },
+} as const;
+
+export const font = {
+  family: {
+    sans: "Montserrat, sans-serif",
+    serif: "Libre Baskerville, serif",
+  },
+  size: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "1.5rem",
+    "2xl": "2rem",
+    "3xl": "2.5rem",
+    "4xl": "3rem",
+    "5xl": "3.5rem",
+  },
+};
+
+export const color = {
+  primary: {
+    "50": "#f0f2f5",
+    "100": "#d9dee6",
+    "200": "#b8c3d1",
+    "300": "#8a9bae",
+    "400": "#4a5f7a",
+    "500": "#0b1828",
+    "600": "#081320",
+    "700": "#060e18",
+    "800": "#04090f",
+    "900": "#020407",
+    default: "#0b1828",
+    vibrant: {
+      "300": "#8ab6ff",
+      "500": "#4f86f7",
+      "700": "#1e3a8a",
     },
-    error: {
-      "50": "#fee6e6",
-      "100": "#fbb3b3",
-      "200": "#f88080",
-      "300": "#f54d4d",
-      "400": "#f21a1a",
-      "500": "#9f0001",
-      "600": "#800001",
-      "700": "#600001",
-      "800": "#400000",
-      "900": "#200000",
-      "default": "#9f0001",
-      vibrant: {
-        "300": "#f48a6f",
-        "500": "#e74c3c",
-        "700": "#c0392b"
-      }
+  },
+  secondary: {
+    "50": "#e6f7f6",
+    "100": "#b3e8e5",
+    "200": "#80d9d4",
+    "300": "#4dcac3",
+    "400": "#2aa39b",
+    "500": "#146b68",
+    "600": "#125a57",
+    "700": "#0f4a47",
+    "800": "#0c3835",
+    "900": "#081f1c",
+    default: "#146b68",
+    vibrant: {
+      "300": "#75dac7",
+      "500": "#1abc9c",
+      "700": "#138f6e",
     },
-    warning: {
-      "50": "#fef5ec",
-      "100": "#fdebda",
-      "200": "#fad8b3",
-      "300": "#f8c48c",
-      "400": "#f5b065",
+  },
+  tertiary: {
+    "50": "#f7f4f0",
+    "100": "#eedecc",
+    "200": "#e5c8a8",
+    "300": "#dcb184",
+    "400": "#d19b60",
+    "500": "#bfa081",
+    "600": "#a68965",
+    "700": "#7d6748",
+    "800": "#54442c",
+    "900": "#2b2216",
+    default: "#bfa081",
+    vibrant: {
+      "300": "#f7c873",
       "500": "#f39c12",
-      "600": "#c27d0e",
-      "700": "#925e0b",
-      "800": "#613e07",
-      "900": "#311f04",
-      "default": "#f39c12",
-      vibrant: {
-        "300": "#fce705",
-        "500": "#fbc306",
-        "700": "#f8950a"
-      }
+      "700": "#c9780e",
     },
-    success: {
-      "50": "#e8f5f2",
-      "100": "#d1ece4",
-      "200": "#a3d8ca",
-      "300": "#76c5af",
-      "400": "#48b195",
-      "500": "#1a9e7a",
-      "600": "#157e62",
-      "700": "#105f49",
-      "800": "#0a3f31",
-      "900": "#052018",
-      "default": "#1a9e7a",
-      vibrant: {
-        "300": "#07e71f",
-        "500": "#08e27e",
-        "700": "#26b656"
-      }
+  },
+  error: {
+    "50": "#fee6e6",
+    "100": "#fbb3b3",
+    "200": "#f88080",
+    "300": "#f54d4d",
+    "400": "#f21a1a",
+    "500": "#9f0001",
+    "600": "#800001",
+    "700": "#600001",
+    "800": "#400000",
+    "900": "#200000",
+    default: "#9f0001",
+    vibrant: {
+      "300": "#f48a6f",
+      "500": "#e74c3c",
+      "700": "#c0392b",
     },
-    text: {
-      dark: "#040a0c",
-      light: "#fcfbf7"
+  },
+  warning: {
+    "50": "#fef5ec",
+    "100": "#fdebda",
+    "200": "#fad8b3",
+    "300": "#f8c48c",
+    "400": "#f5b065",
+    "500": "#f39c12",
+    "600": "#c27d0e",
+    "700": "#925e0b",
+    "800": "#613e07",
+    "900": "#311f04",
+    default: "#f39c12",
+    vibrant: {
+      "300": "#fce705",
+      "500": "#fbc306",
+      "700": "#f8950a",
     },
-    background: {
-      light: "#fcfbf7",
-      dark: "#040a0c"
-    }
   },
-  padding: {
-    xs: "2px",
-    sm: "4px",
-    md: "6px",
-    lg: "10px",
-    xl: "16px"
+  success: {
+    "50": "#e8f5f2",
+    "100": "#d1ece4",
+    "200": "#a3d8ca",
+    "300": "#76c5af",
+    "400": "#48b195",
+    "500": "#1a9e7a",
+    "600": "#157e62",
+    "700": "#105f49",
+    "800": "#0a3f31",
+    "900": "#052018",
+    default: "#1a9e7a",
+    vibrant: {
+      "300": "#07e71f",
+      "500": "#08e27e",
+      "700": "#26b656",
+    },
   },
-  radius: {
-    sm: "3px",
-    md: "5px",
-    lg: "8px"
+  text: {
+    dark: "#040a0c",
+    light: "#fcfbf7",
+  },
+  background: {
+    light: "#fcfbf7",
+    dark: "#040a0c",
   },
-  media: {
-    min: {
-      xs: "@media (min-width: 320px)",
-      sm: "@media (min-width: 480px)",
-      md: "@media (min-width: 620px)",
-      lg: "@media (min-width: 768px)",
-      xl: "@media (min-width: 896px)",
-      "2xl": "@media (min-width: 1024px)",
-      "3xl": "@media (min-width: 1280px)"
-    },
-    max: {
-      xs: "@media (max-width: 319px)",
-      sm: "@media (max-width: 479px)",
-      md: "@media (max-width: 767px)",
-      lg: "@media (max-width: 895px)",
-      xl: "@media (max-width: 1023px)",
-      "2xl": "@media (max-width: 1279px)",
-      "3xl": "@media (max-width: 1535px)"
-    }
-  }
+};
+export const padding = {
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "10px",
+  xl: "16px",
+};
+export const radius = {
+  sm: "3px",
+  md: "5px",
+  lg: "8px",
 };
 
-export type Tokens = typeof tokens;
-
+export type FontTokens = typeof font;
+export type ColorTokens = typeof color;
+export type PaddingTokens = typeof padding;
+export type RadiusTokens = typeof radius;
+export type MediaTokens = typeof media;
+export type ScreenTokens = typeof breakpoints;
 
-export type FontTokens = typeof tokens.font;
-export type ColorTokens = typeof tokens.color;
-export type PaddingTokens = typeof tokens.padding;
-export type RadiusTokens = typeof tokens.radius;
-export type MediaTokens = typeof tokens.media;
+export const tokens = {
+  font,
+  color,
+  media,
+  padding,
+  radius,
+};

package/dist/styles/breakpoints.d.ts

@@ -1,29 +0,0 @@
-export declare const breakpoints: {
-    readonly xs: 320;
-    readonly sm: 480;
-    readonly md: 620;
-    readonly lg: 768;
-    readonly xl: 896;
-    readonly "2xl": 1024;
-    readonly "3xl": 1280;
-    readonly "4xl": 1536;
-};
-export type Breakpoints = typeof breakpoints;
-export type Breakpoint = keyof typeof breakpoints;
-export declare const minXs: string;
-export declare const minSm: string;
-export declare const minMd: string;
-export declare const minLg: string;
-export declare const minXl: string;
-export declare const min2xl: string;
-export declare const min3xl: string;
-export declare const min4xl: string;
-export declare const maxXs: string;
-export declare const maxSm: string;
-export declare const maxMd: string;
-export declare const maxLg: string;
-export declare const maxXl: string;
-export declare const max2xl: string;
-export declare const max3xl: string;
-export declare const max4xl: string;
-//# sourceMappingURL=breakpoints.d.ts.map

package/dist/styles/breakpoints.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../styles/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;;;CASd,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAKlD,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,MAAM,QAA+B,CAAC;AACnD,eAAO,MAAM,MAAM,QAA+B,CAAC;AACnD,eAAO,MAAM,MAAM,QAA+B,CAAC;AAEnD,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,KAAK,QAA2B,CAAC;AAC9C,eAAO,MAAM,MAAM,QAA+B,CAAC;AACnD,eAAO,MAAM,MAAM,QAA+B,CAAC;AACnD,eAAO,MAAM,MAAM,QAA+B,CAAC"}

package/dist/styles/breakpoints.ts

@@ -1,34 +0,0 @@
-export const breakpoints = {
-  xs: 320,
-  sm: 480,
-  md: 620,
-  lg: 768,
-  xl: 896,
-  "2xl": 1024,
-  "3xl": 1280,
-  "4xl": 1536,
-} as const;
-
-export type Breakpoints = typeof breakpoints;
-export type Breakpoint = keyof typeof breakpoints;
-
-const minWidth = (width: number) => `@media (min-width: ${width}px)`;
-const maxWidth = (width: number) => `@media (max-width: ${width - 1}px)`;
-
-export const minXs = minWidth(breakpoints.xs);
-export const minSm = minWidth(breakpoints.sm);
-export const minMd = minWidth(breakpoints.md);
-export const minLg = minWidth(breakpoints.lg);
-export const minXl = minWidth(breakpoints.xl);
-export const min2xl = minWidth(breakpoints["2xl"]);
-export const min3xl = minWidth(breakpoints["3xl"]);
-export const min4xl = minWidth(breakpoints["4xl"]);
-
-export const maxXs = maxWidth(breakpoints.xs);
-export const maxSm = maxWidth(breakpoints.sm);
-export const maxMd = maxWidth(breakpoints.md);
-export const maxLg = maxWidth(breakpoints.lg);
-export const maxXl = maxWidth(breakpoints.xl);
-export const max2xl = maxWidth(breakpoints["2xl"]);
-export const max3xl = maxWidth(breakpoints["3xl"]);
-export const max4xl = maxWidth(breakpoints["4xl"]);

package/styles/breakpoints.ts

@@ -1,34 +0,0 @@
-export const breakpoints = {
-  xs: 320,
-  sm: 480,
-  md: 620,
-  lg: 768,
-  xl: 896,
-  "2xl": 1024,
-  "3xl": 1280,
-  "4xl": 1536,
-} as const;
-
-export type Breakpoints = typeof breakpoints;
-export type Breakpoint = keyof typeof breakpoints;
-
-const minWidth = (width: number) => `@media (min-width: ${width}px)`;
-const maxWidth = (width: number) => `@media (max-width: ${width - 1}px)`;
-
-export const minXs = minWidth(breakpoints.xs);
-export const minSm = minWidth(breakpoints.sm);
-export const minMd = minWidth(breakpoints.md);
-export const minLg = minWidth(breakpoints.lg);
-export const minXl = minWidth(breakpoints.xl);
-export const min2xl = minWidth(breakpoints["2xl"]);
-export const min3xl = minWidth(breakpoints["3xl"]);
-export const min4xl = minWidth(breakpoints["4xl"]);
-
-export const maxXs = maxWidth(breakpoints.xs);
-export const maxSm = maxWidth(breakpoints.sm);
-export const maxMd = maxWidth(breakpoints.md);
-export const maxLg = maxWidth(breakpoints.lg);
-export const maxXl = maxWidth(breakpoints.xl);
-export const max2xl = maxWidth(breakpoints["2xl"]);
-export const max3xl = maxWidth(breakpoints["3xl"]);
-export const max4xl = maxWidth(breakpoints["4xl"]);