athameui 0.0.12 → 0.0.14

package/styles/components/carousel.css

@@ -3,16 +3,19 @@
 @layer components {
   .ath-carousel-wrapper {
     position: relative;
+    overflow: hidden;
+  }
+  .ath-carousel-label {
+    margin-top: 1rem;
   }
   .ath-carousel {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
+    display: grid;
     border: 5px solid var(--color-secondary-800);
     border-radius: 10px;
     padding: 10px;
     overflow-x: auto;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
     gap: 10px;
     scrollbar-width: none;
     &::-webkit-scrollbar {
@@ -47,4 +50,25 @@
     padding: 1rem;
     color: var(--color-tertiary-300);
   }
+  .ath-carousel-slot {
+    position: relative;
+  }
+  .ath-carousel-slot[draggable="true"] {
+    cursor: grab;
+  }
+  .ath-carousel-slot[draggable="true"]:active {
+    cursor: grabbing;
+  }
+  .ath-carousel-slot-target {
+    outline: 2px solid var(--color-primary-300);
+    outline-offset: 2px;
+  }
+  .ath-carousel-remove-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    padding: 0;
+    color: var(--color-error-vibrant-700);
+  }
 }

package/styles/components/checkbox.css

@@ -0,0 +1,60 @@
+@import "../tokens.css";
+
+@layer components {
+  .ath-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    color: var(--color-primary-900);
+  }
+
+  .ath-checkbox-dark {
+    color: var(--color-tertiary-50);
+  }
+
+  .ath-checkbox-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .ath-checkbox-input {
+    appearance: none;
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0;
+    border: 2px solid var(--color-tertiary-500);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    display: grid;
+    place-content: center;
+  }
+
+  .ath-checkbox-input:focus-visible {
+    outline: 2px solid var(--color-primary-vibrant-500);
+    outline-offset: 2px;
+  }
+
+  .ath-checkbox-input:checked {
+    background: var(--color-primary-vibrant-500);
+    border-color: var(--color-primary-vibrant-500);
+  }
+
+  .ath-checkbox-input:checked::after {
+    content: "";
+    width: 0.3rem;
+    height: 0.55rem;
+    border: solid var(--color-primary-50);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg) translate(-1px, -1px);
+  }
+
+  .ath-checkbox-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .ath-checkbox-label {
+    line-height: 1.4;
+  }
+}

package/styles/components/form-input.css

@@ -58,6 +58,7 @@
   .ath-form-textarea {
     margin-top: 3px;
     font-size: inherit;
+    font-family: inherit;
     line-height: 1.5;
     padding: 0.75rem;
     border: 1px solid var(--color-tertiary-500);
@@ -76,7 +77,7 @@
     border-color: var(--color-primary-vibrant-500);
   }
   .ath-form-textarea::placeholder {
-    color: var(--color-tertiary-400);
+    color: var(--color-primary-300);
   }
   .ath-form-textarea-auto-resize {
     resize: none;

package/styles/components/main.css

@@ -17,9 +17,24 @@
     display: flex;
     flex-direction: column;
     gap: 15px;
-    width: 100%;
     margin-inline: auto;
-    max-width: 1200px;
     padding: 0 15px;
+    width: 100%;
+    /* Default to `medium` if no width is provided */
+    &.full {
+      margin-inline: auto;
+    }
+    &.wide {
+      max-width: 1200px;
+      margin-inline: auto;
+    }
+    &.medium {
+      max-width: 768px;
+      margin-inline: auto;
+    }
+    &.narrow {
+      max-width: 480px;
+      margin-inline: auto;
+    }
   }
 }

package/styles/index.ts

@@ -1,2 +1 @@
-export * from "./breakpoints";
 export * from "./tokens";

package/styles/theme.css

@@ -4,6 +4,7 @@
 @import "./components/button.css";
 @import "./components/button-group.css";
 @import "./components/carousel.css";
+@import "./components/checkbox.css";
 @import "./components/dropdown.css";
 @import "./components/footer.css";
 @import "./components/form-input.css";

package/styles/tokens.css

@@ -1,4 +1,4 @@
-/* CSS Custom Properties for Styling-Agnostic Design Tokens */
+/* Generated from styles/tokens.ts. Edit that file, then run pnpm generate-tokens. */
 :root {
   --font-family-sans: "Montserrat", sans-serif;
   --font-family-serif: "Libre Baskerville", serif;
@@ -12,8 +12,8 @@
   --color-text-dark: #040a0c;
   --color-text-light: #fcfbf7;
 
-  --color-background-light: var(--color-text-light);
-  --color-background-dark: var(--color-text-dark);
+  --color-background-light: #fcfbf7;
+  --color-background-dark: #040a0c;
 
   /* ----- Primary ----- */
   --color-primary-50: #f0f2f5;
@@ -21,7 +21,7 @@
   --color-primary-200: #b8c3d1;
   --color-primary-300: #8a9bae;
   --color-primary-400: #4a5f7a;
-  --color-primary-500: #0b1828; /* Base Primary */
+  --color-primary-500: #0b1828;
   --color-primary-600: #081320;
   --color-primary-700: #060e18;
   --color-primary-800: #04090f;
@@ -32,13 +32,12 @@
   --color-primary-vibrant-700: #1e3a8a;
 
   /* ----- Secondary ----- */
-
   --color-secondary-50: #e6f7f6;
   --color-secondary-100: #b3e8e5;
   --color-secondary-200: #80d9d4;
   --color-secondary-300: #4dcac3;
   --color-secondary-400: #2aa39b;
-  --color-secondary-500: #146b68; /* Base Secondary */
+  --color-secondary-500: #146b68;
   --color-secondary-600: #125a57;
   --color-secondary-700: #0f4a47;
   --color-secondary-800: #0c3835;
@@ -54,7 +53,7 @@
   --color-tertiary-200: #e5c8a8;
   --color-tertiary-300: #dcb184;
   --color-tertiary-400: #d19b60;
-  --color-tertiary-500: #bfa081; /* Base Tertiary */
+  --color-tertiary-500: #bfa081;
   --color-tertiary-600: #a68965;
   --color-tertiary-700: #7d6748;
   --color-tertiary-800: #54442c;
@@ -70,7 +69,7 @@
   --color-error-200: #f88080;
   --color-error-300: #f54d4d;
   --color-error-400: #f21a1a;
-  --color-error-500: #9f0001; /* original color */
+  --color-error-500: #9f0001;
   --color-error-600: #800001;
   --color-error-700: #600001;
   --color-error-800: #400000;
@@ -86,7 +85,7 @@
   --color-warning-200: #fad8b3;
   --color-warning-300: #f8c48c;
   --color-warning-400: #f5b065;
-  --color-warning-500: #f39c12; /* original color */
+  --color-warning-500: #f39c12;
   --color-warning-600: #c27d0e;
   --color-warning-700: #925e0b;
   --color-warning-800: #613e07;
@@ -102,7 +101,7 @@
   --color-success-200: #a3d8ca;
   --color-success-300: #76c5af;
   --color-success-400: #48b195;
-  --color-success-500: #1a9e7a; /* original color */
+  --color-success-500: #1a9e7a;
   --color-success-600: #157e62;
   --color-success-700: #105f49;
   --color-success-800: #0a3f31;
@@ -120,7 +119,6 @@
   --padding-xl: 16px;
 
   /* ----- Radius ----- */
-
   --radius-sm: 3px;
   --radius-md: 5px;
   --radius-lg: 8px;
@@ -146,7 +144,6 @@
   --screen-4xl: 1536;
 
   /* ----- Media Queries ----- */
-  /* Only useful for CSS-in-JS media query handling */
   --media-min-xs: @media (min-width: 320px);
   --media-min-sm: @media (min-width: 480px);
   --media-min-md: @media (min-width: 620px);
@@ -154,14 +151,16 @@
   --media-min-xl: @media (min-width: 896px);
   --media-min-2xl: @media (min-width: 1024px);
   --media-min-3xl: @media (min-width: 1280px);
+  --media-min-4xl: @media (min-width: 1536px);
 
   --media-max-xs: @media (max-width: 319px);
   --media-max-sm: @media (max-width: 479px);
-  --media-max-md: @media (max-width: 767px);
-  --media-max-lg: @media (max-width: 895px);
-  --media-max-xl: @media (max-width: 1023px);
-  --media-max-2xl: @media (max-width: 1279px);
-  --media-max-3xl: @media (max-width: 1535px);
+  --media-max-md: @media (max-width: 619px);
+  --media-max-lg: @media (max-width: 767px);
+  --media-max-xl: @media (max-width: 895px);
+  --media-max-2xl: @media (max-width: 1023px);
+  --media-max-3xl: @media (max-width: 1279px);
+  --media-max-4xl: @media (max-width: 1535px);
 }
 
 @layer base {

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,
+};