@sharedex/ui 0.0.0-stage → 0.9.0

package/styles/services.css

@@ -0,0 +1,111 @@
+/* Services: cards-grid | list | alternating */
+
+@layer components {
+  /* ---------- layout ---------- */
+
+  :where([data-sx-section="services"] [data-sx-part="services-inner"]) {
+    grid-template-areas: "header" "items";
+  }
+  :where([data-sx-section="services"] [data-sx-part="services-header"]) {
+    grid-area: header;
+    max-width: 48rem;
+  }
+  :where([data-sx-section="services"] [data-sx-part="services-items"]) {
+    grid-area: items;
+    display: grid;
+    gap: var(--spacing-sx-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where([data-sx-section="services"] [data-sx-part="services-item"]) {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-sx-gap) * 0.5);
+    min-width: 0;
+  }
+  :where([data-sx-section="services"] [data-sx-part="services-item-media"]) {
+    aspect-ratio: 4 / 3;
+  }
+
+  /* cards-grid: as many columns as fit; an item's image leads the card */
+  :where([data-sx-section="services"][data-sx-layout="cards-grid"] [data-sx-part="services-items"]) {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  }
+  :where([data-sx-section="services"][data-sx-layout="cards-grid"] [data-sx-part="services-item-media"]) {
+    order: -1;
+  }
+
+  /* list: one row per item, icon at the start */
+  :where([data-sx-section="services"][data-sx-layout="list"] [data-sx-part="services-items"]) {
+    gap: 0;
+  }
+  :where([data-sx-section="services"][data-sx-layout="list"] [data-sx-part="services-item"]) {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  :where([data-sx-section="services"][data-sx-layout="list"] [data-sx-part="services-item-media"]) {
+    display: none;
+  }
+
+  /* alternating: media beside text, switching sides every other item */
+  :where([data-sx-section="services"][data-sx-layout="alternating"] [data-sx-part="services-items"]) {
+    gap: var(--spacing-sx-section);
+  }
+  @container (min-width: 44rem) {
+    :where([data-sx-section="services"][data-sx-layout="alternating"] [data-sx-part="services-item"]) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      gap: var(--spacing-sx-gap);
+    }
+    :where([data-sx-section="services"][data-sx-layout="alternating"] [data-sx-part="services-item"]:nth-child(even) [data-sx-part="services-item-media"]) {
+      order: 2;
+    }
+  }
+
+  /* ---------- visual ---------- */
+
+  :where([data-sx-styled] [data-sx-part="services-item-title"]) {
+    margin: 0;
+    font-family: var(--font-sx-display);
+    font-size: calc(var(--text-sx-title) * 0.62);
+    line-height: 1.3;
+  }
+  :where([data-sx-styled] [data-sx-part="services-item-description"]) {
+    margin: calc(var(--spacing-sx-gap) * 0.25) 0 0;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-styled] [data-sx-part="services-item-icon"]) {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-accent);
+    color: var(--color-sx-ink);
+  }
+
+  :where([data-sx-styled][data-sx-layout="cards-grid"] [data-sx-part="services-item"]) {
+    padding: calc(var(--spacing-sx-gap) * 0.75);
+    border: 1px solid var(--color-sx-border);
+    border-radius: var(--radius-sx-card);
+    background: color-mix(in oklab, var(--color-sx-ink) 3%, var(--color-sx-secondary));
+    box-shadow: var(--shadow-sx-card);
+  }
+  :where([data-sx-styled][data-sx-layout="cards-grid"] [data-sx-part="services-item-media"]) {
+    margin: calc(var(--spacing-sx-gap) * -0.75);
+    margin-block-end: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where([data-sx-styled][data-sx-layout="list"] [data-sx-part="services-item"]) {
+    padding-block: calc(var(--spacing-sx-gap) * 0.75);
+    border-block-end: 1px solid var(--color-sx-border);
+  }
+  :where([data-sx-styled][data-sx-layout="list"] [data-sx-part="services-item"]:first-child) {
+    border-block-start: 1px solid var(--color-sx-border);
+  }
+}

package/theme.css

@@ -0,0 +1,83 @@
+/*
+ * @sharedex/ui — Tailwind CSS v4 preset. Requires Tailwind v4 in the consumer.
+ *
+ * In your Tailwind entry stylesheet, AFTER `@import "tailwindcss";`:
+ *
+ *     @import "tailwindcss";
+ *     @import "@sharedex/ui/theme.css";
+ *
+ * If a component renders UNSTYLED, your Tailwind build isn't scanning this
+ * package. Add an explicit source (adjust the ../ depth to wherever your
+ * node_modules lives):
+ *
+ *     @source "../node_modules/@sharedex/ui/dist";
+ *
+ * (Never write a glob with a double-star-slash inside a CSS comment: its
+ * star-slash closes the comment early and breaks the whole stylesheet.)
+ */
+
+/* Default looks for Button and the headless sections, as plain CSS in
+   Tailwind's `components` layer: any utility class you pass through
+   `className` sits in the later `utilities` layer, so it always wins. (An
+   @import must come before every other rule, so it sits up here.) Button comes
+   first: at equal specificity a section restyles its own action buttons (the
+   Hero over a photo). */
+@import "./styles/button.css";
+@import "./styles/sections.css";
+
+/* Best-effort: register the shipped component code as a scan source. This
+   path is relative to THIS file (the package root), so it survives wherever
+   the package manager puts @sharedex/ui on disk. If your setup resolves it
+   against your entry stylesheet instead, it's a harmless no-op — use the
+   explicit @source above. */
+@source "./dist/**/*.js";
+
+/*
+ * The sx token contract. Namespaced `sx-` so they never collide with your own.
+ *
+ * This is the ONLY host CSS the package reads. Re-theme (or add dark mode) by
+ * redefining any of these in your own @theme / :root / [data-theme] block — it
+ * comes after this @import and wins. Each token also generates a utility
+ * (`bg-sx-primary`, `font-sx-display`, `rounded-sx-card`, `py-sx-section` …).
+ *
+ * `static` makes Tailwind emit every variable even when no utility uses it:
+ * component defaults read them through plain `var()`.
+ *
+ * Colour roles:
+ *   ink        text: headings and body copy
+ *   primary    the strong fill: primary buttons, key accents
+ *   secondary  the surface the component sits on
+ *   accent     highlights, soft fills, focus accents
+ *   muted      secondary text
+ *   border     hairlines and outlines
+ *   on-primary text placed on a primary fill
+ */
+@theme static {
+  --color-sx-ink: #001d21;
+  --color-sx-primary: #001d21;
+  --color-sx-secondary: #f9f9f7;
+  --color-sx-accent: #cdc4ff;
+  --color-sx-muted: #5b6b6e;
+  --color-sx-border: #e3e6e4;
+  --color-sx-on-primary: #f9f9f7;
+
+  --font-sx-display: ui-sans-serif, system-ui, sans-serif;
+  --font-sx-body: ui-sans-serif, system-ui, sans-serif;
+
+  --text-sx-display: clamp(2.5rem, 4vw + 1rem, 4.5rem);
+  --text-sx-display--line-height: 1.05;
+  --text-sx-title: clamp(1.75rem, 2vw + 1rem, 2.5rem);
+  --text-sx-title--line-height: 1.15;
+
+  --radius-sx-card: 1rem;
+  --radius-sx-control: 0.75rem;
+  /* buttons, incl. section actions: the control radius unless a design gives buttons their own shape (pill, square) */
+  --radius-sx-button: var(--radius-sx-control);
+
+  --shadow-sx-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.06);
+
+  --spacing-sx-section: 6rem;
+  --spacing-sx-gap: 2rem;
+
+  --ease-sx-out: cubic-bezier(0.22, 1, 0.36, 1);
+}