clipper-css 0.1.0

package/clipper/clipper.css

@@ -0,0 +1,416 @@
+/** 
+ * Clipper CSS Framework
+ * v0.1.0
+ *
+ * Ensure @import "tailwindcss"; is added before clipper.css in your project.
+ *
+ * THIS FILE SHOULD NOT BE EDITED:
+ * Customize the framework with variables.css and components.css instead.
+ */
+@import "./variables.css";
+@import "./components.css";
+
+/* Custom variants exposed to templates for app-level state styling */
+@custom-variant theme-dark (&:where(.dark, .dark *));
+@custom-variant theme-light (&:where(.light, .light *));
+/* Matches common open-state attributes from native + headless UI patterns */
+@custom-variant data-open (&:where([data-open], [data-open="true"], [data-state="open"], [data-state="open"] *));
+
+:root {
+  /* Grid Templates */
+  --layout-page-width: minmax(var(--page-margin), 1fr) minmax(0, var(--max-page-width)) minmax(var(--page-margin), 1fr);
+  --layout-readable: minmax(var(--page-margin), 1fr) minmax(0, var(--readable-width)) minmax(var(--page-margin), 1fr);
+}
+
+@layer base {
+  html,
+  body {
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  html {
+    /* Prevents horizontal layout jump when vertical scrollbar appears/disappears */
+    scrollbar-gutter: stable;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--text-base);
+    font-family: var(--font-text);
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  main {
+    flex: 1 0 auto;
+  }
+
+  /* ===== Layout grid system ===== */
+
+  :where(header, footer, section) {
+    display: grid;
+    grid-template-columns: var(--layout-page-width);
+  }
+
+  section {
+    padding-block: var(--section-row-padding);
+    row-gap: var(--section-row-gap);
+    /* Rendering hint: skip off-screen section painting until needed */
+    content-visibility: auto;
+    /* Reserve intrinsic size to reduce layout pop-in before rendering */
+    contain-intrinsic-size: 1px 700px;
+
+    /* Readable width variant for content-heavy sections */
+    &.readable {
+      grid-template-columns: var(--layout-readable);
+    }
+  }
+
+  /* All direct children on grid use center column */
+  :where(header, footer, section) > * {
+    grid-column: 2;
+    min-width: 0; /* Prevent overflow */
+  }
+
+  /* Full-width breakout: use `.full-width` on children */
+  :where(header, footer, section) > .full-width {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  .page-width {
+    width: min(var(--max-page-width), max(0px, calc(100% - (2 * var(--page-margin)))));
+    max-width: var(--max-page-width);
+    margin-inline: auto;
+  }
+
+  .readable-width {
+    width: min(var(--readable-width), max(0px, calc(100% - (2 * var(--page-margin)))));
+    max-width: var(--readable-width);
+    margin-inline: auto;
+  }
+
+  .header-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    backdrop-filter: blur(var(--backdrop-blur));
+    -webkit-backdrop-filter: blur(var(--backdrop-blur));
+  }
+
+  :where(section[id], main[id], [id^="section-"]) {
+    /* Keeps anchor target visible below sticky header */
+    scroll-margin-top: var(--anchor-offset);
+  }
+
+  /* Make html5 semantic elements (and div) flex containers for easier layout */
+
+  address,
+  article,
+  aside,
+  details,
+  div,
+  dl,
+  fieldset,
+  figure,
+  form,
+  menu,
+  nav,
+  ol,
+  ul {
+    @apply flex flex-col;
+    gap: var(--div-gap);
+  }
+
+  /* ===== Typography ===== */
+
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5 {
+    font-family: var(--font-heading);
+    letter-spacing: var(--heading-letter-spacing);
+    --heading-start-current: calc(var(--heading-margin-top) + var(--heading-margin-top-offset));
+    --heading-end-current: calc(var(--heading-margin-bottom) + var(--heading-margin-bottom-offset));
+    margin-block-start: var(--heading-start-current);
+    margin-block-end: var(--heading-end-current);
+    text-wrap: balance;
+  }
+
+  p,
+  li {
+    /* Improves rag/line endings for longer paragraph text */
+    text-wrap: pretty;
+  }
+
+  a:not([class]) {
+    color: var(--link);
+    text-decoration-line: var(--link-underline);
+    text-underline-offset: var(--link-underline-offset);
+    text-decoration-thickness: var(--link-underline-thickness);
+    text-decoration-color: currentColor;
+    transition:
+      color 180ms ease,
+      text-decoration-color 180ms ease;
+  }
+
+  a:not([class]):hover {
+    color: var(--link-hover);
+    text-decoration-line: var(--link-underline-hover);
+    text-decoration-color: var(--link-hover);
+  }
+
+  h1,
+  .h1 {
+    @apply text-5xl font-bold;
+    line-height: var(--heading-line-height, var(--text-5xl--line-height));
+    --heading-start-current: calc((var(--heading-margin-top) * 1.45) + var(--heading-margin-top-offset));
+    --heading-end-current: calc((var(--heading-margin-bottom) * 1.45) + var(--heading-margin-bottom-offset));
+  }
+
+  h2,
+  .h2 {
+    @apply text-4xl font-bold;
+    line-height: var(--heading-line-height, var(--text-4xl--line-height));
+    --heading-start-current: calc((var(--heading-margin-top) * 1.3) + var(--heading-margin-top-offset));
+    --heading-end-current: calc((var(--heading-margin-bottom) * 1.3) + var(--heading-margin-bottom-offset));
+  }
+
+  h3,
+  .h3 {
+    @apply text-3xl font-semibold;
+    line-height: var(--heading-line-height, var(--text-3xl--line-height));
+    --heading-start-current: calc((var(--heading-margin-top) * 1.15) + var(--heading-margin-top-offset));
+    --heading-end-current: calc((var(--heading-margin-bottom) * 1.15) + var(--heading-margin-bottom-offset));
+  }
+
+  h4,
+  .h4 {
+    @apply text-2xl font-semibold;
+    line-height: var(--heading-line-height, var(--text-2xl--line-height));
+    --heading-start-current: calc((var(--heading-margin-top) * 1) + var(--heading-margin-top-offset));
+    --heading-end-current: calc((var(--heading-margin-bottom) * 1) + var(--heading-margin-bottom-offset));
+  }
+
+  h5,
+  .h5 {
+    @apply text-xl font-semibold;
+    line-height: var(--heading-line-height, var(--text-xl--line-height));
+    --heading-start-current: calc((var(--heading-margin-top) * 0.9) + var(--heading-margin-top-offset));
+    --heading-end-current: calc((var(--heading-margin-bottom) * 0.9) + var(--heading-margin-bottom-offset));
+  }
+
+  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5):first-child {
+    margin-block-start: calc(var(--heading-start-current) * (1 - var(--heading-trim-first-child)));
+  }
+
+  :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5):last-child {
+    margin-block-end: calc(var(--heading-end-current) * (1 - var(--heading-trim-last-child)));
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border, currentColor);
+  }
+
+  /* I mean why not? */
+  button {
+    cursor: pointer;
+  }
+
+  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
+    /* Unified keyboard-focus style across interactive controls */
+    outline: 2px solid var(--focus-outline-color);
+    outline-offset: 2px;
+  }
+}
+
+/* Respect user motion preferences for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Forced-colors support (Windows High Contrast, etc.) */
+@media (forced-colors: active) {
+  :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/* Fallback for browsers without text-wrap balancing */
+@supports not (text-wrap: balance) {
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3 {
+    overflow-wrap: anywhere;
+  }
+}
+
+/* Fallback for browsers without backdrop-filter blur */
+@supports not (backdrop-filter: blur(1px)) {
+  .header-sticky {
+    background-color: color-mix(in oklch, var(--background) 92%, transparent);
+  }
+}
+
+/* =========================================================================
+   DARK MODE (Colors are defined in variables.css)
+   ========================================================================= */
+
+:root {
+  color-scheme: light dark;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+.light {
+  color-scheme: light;
+}
+
+/* =========================================================================
+   UTILITIES — Minimal helpers for layout
+   ========================================================================= */
+
+@utility row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--div-gap);
+}
+
+@utility readable {
+  &:not(section) {
+    max-width: var(--readable-width);
+  }
+}
+
+/* Opt-in container query utility */
+@utility cq {
+  container-type: inline-size;
+}
+
+/* Named container utility for nested component queries */
+@utility cq-main {
+  container: main / inline-size;
+}
+
+/* 
+  ==============================================================================
+  Color and spacing theme definitions based on variables.css
+  If you need to add more colors, add them as tokens in variables.css and then 
+  reference them here.
+  ==============================================================================
+*/
+
+@theme inline {
+  /* Spacing */
+  --spacing-4xs: var(--space-4xs);
+  --spacing-3xs: var(--space-3xs);
+  --spacing-2xs: var(--space-2xs);
+  --spacing-xs: var(--space-xs);
+  --spacing-sm: var(--space-sm);
+  --spacing-base: var(--space-base);
+  --spacing-lg: var(--space-lg);
+  --spacing-xl: var(--space-xl);
+  --spacing-2xl: var(--space-2xl);
+  --spacing-3xl: var(--space-3xl);
+  --spacing-4xl: var(--space-4xl);
+}
+
+@theme inline {
+  /* Colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-link-underline: var(--link-underline);
+  --color-link-underline-hover: var(--link-underline-hover);
+
+  --color-border: var(--border);
+
+  /* Primary */
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-muted: var(--primary-muted);
+
+  /* Secondary */
+  --color-secondary-50: var(--secondary-50);
+  --color-secondary-100: var(--secondary-100);
+  --color-secondary-200: var(--secondary-200);
+  --color-secondary-300: var(--secondary-300);
+  --color-secondary-400: var(--secondary-400);
+  --color-secondary-500: var(--secondary-500);
+  --color-secondary-600: var(--secondary-600);
+  --color-secondary-700: var(--secondary-700);
+  --color-secondary-800: var(--secondary-800);
+  --color-secondary-900: var(--secondary-900);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-secondary-muted: var(--secondary-muted);
+
+  /* Tertiary */
+  --color-tertiary-50: var(--tertiary-50);
+  --color-tertiary-100: var(--tertiary-100);
+  --color-tertiary-200: var(--tertiary-200);
+  --color-tertiary-300: var(--tertiary-300);
+  --color-tertiary-400: var(--tertiary-400);
+  --color-tertiary-500: var(--tertiary-500);
+  --color-tertiary-600: var(--tertiary-600);
+  --color-tertiary-700: var(--tertiary-700);
+  --color-tertiary-800: var(--tertiary-800);
+  --color-tertiary-900: var(--tertiary-900);
+
+  --color-tertiary: var(--tertiary);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+  --color-tertiary-hover: var(--tertiary-hover);
+  --color-tertiary-muted: var(--tertiary-muted);
+}

package/clipper/components.css

@@ -0,0 +1,42 @@
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center rounded-md px-4 py-2 font-heading text-sm font-semibold no-underline transition-colors;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    inline-size: fit-content;
+    max-inline-size: 100%;
+
+    &.btn-outline {
+      background-color: var(--background);
+      color: var(--foreground);
+      border: 1px solid var(--border);
+
+      &:hover {
+        background-color: var(--muted);
+      }
+    }
+
+    &:hover {
+      background-color: var(--primary-hover);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus-outline-color);
+      outline-offset: 2px;
+    }
+  }
+
+  .card {
+    @apply rounded-xl border p-5 place-content-center;
+    border-color: var(--border);
+    background-color: var(--muted);
+  }
+
+  .badge {
+    @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold;
+    background-color: var(--primary-muted);
+    color: var(--foreground);
+    inline-size: fit-content;
+    max-inline-size: 100%;
+  }
+}

package/clipper/variables.css

@@ -0,0 +1,156 @@
+:root {
+  /* Color definitions */
+  --background: light-dark(var(--color-white), var(--color-slate-950));
+  --foreground: light-dark(var(--color-slate-900), var(--color-slate-100));
+
+  --accent: var(--color-amber-500);
+  --accent-foreground: var(--color-white);
+
+  --muted: light-dark(var(--color-slate-100), var(--color-slate-800));
+  --muted-foreground: light-dark(var(--color-slate-500), var(--color-slate-400));
+
+  --link: light-dark(var(--primary-600), var(--primary-300));
+  --link-hover: light-dark(var(--primary-800), var(--primary-200));
+  --link-underline: underline; /* Can be 'underline', 'none', or 'hover' */
+  --link-underline-hover: var(--link-underline);
+  --link-underline-offset: 0.16em;
+  --link-underline-thickness: 0.08em;
+
+  --border: light-dark(var(--color-slate-200), var(--color-slate-700));
+  --focus-outline-color: var(--primary);
+
+  /* Primary */
+  --primary-50: oklch(97% 0.03 260);
+  --primary-100: oklch(93% 0.07 260);
+  --primary-200: oklch(86% 0.12 260);
+  --primary-300: oklch(78% 0.16 260);
+  --primary-400: oklch(67% 0.19 260);
+  --primary-500: oklch(55% 0.22 260);
+  --primary-600: oklch(48% 0.24 260);
+  --primary-700: oklch(40% 0.2 260);
+  --primary-800: oklch(32% 0.16 260);
+  --primary-900: oklch(24% 0.12 260);
+
+  --primary: var(--primary-500);
+  --primary-hover: var(--primary-600);
+  --primary-foreground: var(--color-white);
+  --primary-muted: light-dark(var(--primary-100), var(--primary-900));
+
+  /* Additional color scales (secondary and tertiary) can be defined similarly */
+}
+
+@theme {
+  /* Fonts */
+  --font-heading: "Poppins", sans-serif;
+  --font-text: "Inter", sans-serif;
+
+  --text-base: 1rem;
+  --text-xl: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
+  --text-2xl: clamp(1.1875rem, 1rem + 0.7vw, 1.625rem);
+  --text-3xl: clamp(1.375rem, 1.1rem + 1vw, 2rem);
+  --text-4xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
+  --text-5xl: clamp(2.125rem, 1.7rem + 2vw, 3.25rem);
+  --text-6xl: clamp(3.25rem, 2.8rem + 1.8vw, 4.5rem);
+  --text-7xl: clamp(3.75rem, 3rem + 2.2vw, 5.25rem);
+}
+
+:root {
+  /* Layout & types */
+  --max-page-width: 1120px;
+  --readable-width: 65ch;
+
+  /* Heading styles and customizable margin (remove to use defaults) */
+  --heading-line-height: clamp(1.1em, 1.1em + 0.15vw, 1.3em);
+  --heading-letter-spacing: clamp(-0.025em, -0.02em - 0.05vw, -0.015em);
+  --heading-margin-top: clamp(0.5rem, 0.8vw, 0.8rem);
+  --heading-margin-top-offset: 0rem;
+  --heading-margin-bottom: clamp(0.1667rem, 0.2667vw, 0.2667rem);
+  --heading-margin-bottom-offset: 0rem;
+
+  /* These two are boolean! Set to 0 to disable first-child and 
+     last-child margin trimming on headings, or 1 to enable. 
+  */
+  --heading-trim-first-child: 0;
+  --heading-trim-last-child: 0;
+
+  /* Fluent spacing */
+  --page-margin: clamp(1rem, 3vw, 2.25rem);
+
+  /*
+    Spacing scale controls
+    - Use `--space-scale-*` to scale all spacing globally per clamp axis.
+    - Use `--space-offset-*` for constant nudges per clamp axis.
+  */
+  --space-scale-min: 1;
+  --space-offset-min: 0rem;
+
+  --space-scale-fluid: 1;
+  --space-offset-fluid: 0vw;
+
+  --space-scale-max: 1;
+  --space-offset-max: 0rem;
+
+  --section-row-padding: var(--space-2xl);
+  --section-row-gap: var(--space-lg);
+  --div-gap: var(--space-base);
+
+  --space-4xs: clamp(
+    calc((0.25rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((0.28vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((0.32rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-3xs: clamp(
+    calc((0.3125rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((0.35vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((0.4rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-2xs: clamp(
+    calc((0.375rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((0.45vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((0.5rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-xs: clamp(
+    calc((0.5rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((0.6vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((0.65rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-sm: clamp(
+    calc((0.625rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((0.8vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((0.8rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-base: clamp(
+    calc((0.75rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((1vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((0.95rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-lg: clamp(
+    calc((1rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((1.4vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((1.25rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-xl: clamp(
+    calc((1.25rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((2.1vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((1.9rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-2xl: clamp(
+    calc((1.75rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((3.8vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((2.8rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-3xl: clamp(
+    calc((2.25rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((5.4vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((3.9rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+  --space-4xl: clamp(
+    calc((2.75rem * var(--space-scale-min)) + var(--space-offset-min)),
+    calc((7.2vw * var(--space-scale-fluid)) + var(--space-offset-fluid)),
+    calc((5.4rem * var(--space-scale-max)) + var(--space-offset-max))
+  );
+
+  /* Offset for in-page anchor links so sticky header doesn't cover headings */
+  --anchor-offset: clamp(4.5rem, 8vw, 6rem);
+  --backdrop-blur: 14px;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "clipper-css",
+  "version": "0.1.0",
+  "description": "Clipper is a simple Tailwind framework for building pages without fighting CSS and drowning in utility classes.",
+  "type": "module",
+  "main": "bin/cli.js",
+  "bin": {
+    "clipper": "./bin/cli.js",
+    "create-clipper": "./bin/cli.js"
+  },
+  "keywords": [
+    "css",
+    "tailwind",
+    "framework",
+    "design-system",
+    "sveltekit",
+    "astro"
+  ],
+  "author": "Clipper",
+  "license": "ISC",
+  "files": [
+    "bin",
+    "clipper",
+    "templates",
+    "README.md"
+  ],
+  "dependencies": {
+    "globby": "^16.1.1",
+    "prompts": "^2.4.2"
+  },
+  "scripts": {
+    "clean": "node scripts/utils.js clean",
+    "build": "node scripts/utils.js update-version",
+    "test:astro": "cd tests/astro && node ../../bin/cli.js -y",
+    "test:sveltekit": "cd tests/sveltekit && node ../../bin/cli.js -y",
+    "version": "npm run build && git add clipper/clipper.css"
+  }
+}