athameui 0.0.12 → 0.0.14

package/dist/styles/tokens.d.ts

@@ -1,3 +1,190 @@
+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 media: {
+    readonly min: {
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+    };
+    readonly max: {
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+    };
+};
+export declare const font: {
+    family: {
+        sans: string;
+        serif: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+    };
+};
+export declare const color: {
+    primary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    secondary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    tertiary: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    error: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    warning: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    success: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        default: string;
+        vibrant: {
+            "300": string;
+            "500": string;
+            "700": string;
+        };
+    };
+    text: {
+        dark: string;
+        light: string;
+    };
+    background: {
+        light: string;
+        dark: string;
+    };
+};
+export declare const padding: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const radius: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+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 declare const tokens: {
     font: {
         family: {
@@ -134,6 +321,28 @@ export declare const tokens: {
             dark: string;
         };
     };
+    media: {
+        readonly min: {
+            readonly xs: string;
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+            readonly xl: string;
+            readonly "2xl": string;
+            readonly "3xl": string;
+            readonly "4xl": string;
+        };
+        readonly max: {
+            readonly xs: string;
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+            readonly xl: string;
+            readonly "2xl": string;
+            readonly "3xl": string;
+            readonly "4xl": string;
+        };
+    };
     padding: {
         xs: string;
         sm: string;
@@ -146,31 +355,5 @@ export declare const tokens: {
         md: string;
         lg: string;
     };
-    media: {
-        min: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-            "3xl": string;
-        };
-        max: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-            "3xl": string;
-        };
-    };
 };
-export type Tokens = typeof tokens;
-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;
 //# sourceMappingURL=tokens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../styles/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKlB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC;AAGnC,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,OAAO,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC,KAAK,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../styles/tokens.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;;;;;;;;;;;;;;;;;;;;;CAqBR,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHjB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AACF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,IAAI,CAAC;AACrC,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC;AACvC,MAAM,MAAM,aAAa,GAAG,OAAO,OAAO,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC;AACvC,MAAM,MAAM,YAAY,GAAG,OAAO,WAAW,CAAC;AAE9C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMlB,CAAC"}

package/dist/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "athameui",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "./dist/athameui.cjs",
   "module": "./dist/athameui.mjs",