@starci/grammar 0.1.0

package/dist/offset-pop/styles.css

@@ -0,0 +1,393 @@
+@layer starci-grammar.offset-pop.tokens,
+    starci-grammar.offset-pop.foundation,
+    starci-grammar.offset-pop.components,
+    starci-grammar.offset-pop.composition,
+    starci-grammar.offset-pop.states,
+    starci-grammar.offset-pop.responsive;
+
+@layer starci-grammar.offset-pop.tokens {
+    [data-grammar="offset-pop"] {
+        color-scheme: light;
+
+        --offset-pop-canvas: #fff8ef;
+        --offset-pop-canvas-dot: rgb(28 21 36 / 12%);
+        --offset-pop-ink: #1c1524;
+        --offset-pop-muted: #716a76;
+        --offset-pop-surface: #fffdf9;
+        --offset-pop-surface-muted: #f8dbe8;
+        --offset-pop-pink: #ff3593;
+        --offset-pop-yellow: #ffd447;
+        --offset-pop-mint: #91e4ca;
+        --offset-pop-blush: #f8d8e6;
+        --offset-pop-critical: #e84a5f;
+
+        --offset-pop-outline-width: 2px;
+        --offset-pop-divider-width: 2px;
+        --offset-pop-shadow-x: 6px;
+        --offset-pop-shadow-y: 7px;
+        --offset-pop-shadow-blur: 0;
+        --offset-pop-shadow-spread: 0;
+        --offset-pop-radius-surface: 1.5rem;
+        --offset-pop-radius-control: 1.125rem;
+        --offset-pop-radius-pill: 999px;
+        --offset-pop-focus-width: 3px;
+        --offset-pop-focus-gap: 3px;
+        --offset-pop-press-x: 3px;
+        --offset-pop-press-y: 4px;
+        --offset-pop-rotation-low: -3deg;
+        --offset-pop-rotation-high: 3deg;
+        --offset-pop-overlap: clamp(1rem, 4cqi, 3rem);
+        --offset-pop-dot-step: 24px;
+        --offset-pop-transition: 140ms cubic-bezier(.2, .8, .2, 1);
+        --offset-pop-display-weight: 900;
+        --offset-pop-display-tracking: -.045em;
+    }
+
+    [data-theme="dark"][data-grammar="offset-pop"],
+    .dark [data-grammar="offset-pop"] {
+        color-scheme: dark;
+
+        --offset-pop-canvas: #17121d;
+        --offset-pop-canvas-dot: rgb(255 248 239 / 14%);
+        --offset-pop-ink: #fff8ef;
+        --offset-pop-muted: #c8bdca;
+        --offset-pop-surface: #251d2c;
+        --offset-pop-surface-muted: #3b2936;
+        --offset-pop-shadow-ink: #050306;
+    }
+}
+
+@layer starci-grammar.offset-pop.foundation {
+    [data-grammar="offset-pop"] {
+        --offset-pop-shadow-ink: var(--offset-pop-ink);
+
+        color: var(--offset-pop-ink);
+        background-color: var(--offset-pop-canvas);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-dot-field] {
+        background-color: var(--offset-pop-canvas);
+        background-image: radial-gradient(
+            circle,
+            var(--offset-pop-canvas-dot) 1px,
+            transparent 1.25px
+        );
+        background-position: center;
+        background-size: var(--offset-pop-dot-step) var(--offset-pop-dot-step);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-display] {
+        color: var(--offset-pop-ink);
+        font-weight: var(--offset-pop-display-weight);
+        letter-spacing: var(--offset-pop-display-tracking);
+        line-height: .96;
+        text-wrap: balance;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-muted] {
+        color: var(--offset-pop-muted);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-accent="pink"] {
+        --offset-pop-local-accent: var(--offset-pop-pink);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-accent="yellow"] {
+        --offset-pop-local-accent: var(--offset-pop-yellow);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-accent="mint"] {
+        --offset-pop-local-accent: var(--offset-pop-mint);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-accent="blush"] {
+        --offset-pop-local-accent: var(--offset-pop-blush);
+    }
+}
+
+@layer starci-grammar.offset-pop.components {
+    [data-grammar="offset-pop"] [data-grammar-surface] {
+        position: relative;
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-radius-surface);
+        color: var(--offset-pop-ink);
+        background: var(--offset-pop-surface);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-surface][data-grammar-surface-depth="top"] {
+        box-shadow:
+            var(--offset-pop-shadow-x)
+            var(--offset-pop-shadow-y)
+            var(--offset-pop-shadow-blur)
+            var(--offset-pop-shadow-spread)
+            var(--offset-pop-shadow-ink);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-surface][data-grammar-surface-depth="nested"] {
+        box-shadow: none;
+        background: color-mix(in srgb, var(--offset-pop-surface) 88%, transparent);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-surface-label] {
+        color: var(--offset-pop-ink);
+        font-weight: 800;
+        letter-spacing: -.015em;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-surface-content] {
+        min-inline-size: 0;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-list] {
+        overflow: clip;
+        border-radius: calc(var(--offset-pop-radius-surface) - var(--offset-pop-outline-width));
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-row] {
+        border-block-end: var(--offset-pop-divider-width) solid var(--offset-pop-ink);
+        background: transparent;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-row]:last-child {
+        border-block-end: 0;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state-mark] {
+        color: var(--offset-pop-ink);
+        background: var(--offset-pop-mint);
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-radius-pill);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-rail] {
+        color: var(--offset-pop-ink);
+        background: var(--offset-pop-canvas);
+        border-inline-end: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-rail-body] {
+        scrollbar-color: var(--offset-pop-ink) transparent;
+        scrollbar-width: thin;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-band] {
+        color: var(--offset-pop-ink);
+        background: var(--offset-pop-local-accent, var(--offset-pop-pink));
+        border-block: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-band] > * + * {
+        border-inline-start: var(--offset-pop-divider-width) solid color-mix(in srgb, var(--offset-pop-ink) 35%, transparent);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-emphasis] {
+        position: relative;
+        z-index: 0;
+        color: var(--offset-pop-pink);
+        white-space: nowrap;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-emphasis]::after {
+        position: absolute;
+        z-index: -1;
+        inset: 52% -.08em -.08em;
+        border: var(--offset-pop-outline-width) solid currentColor;
+        border-radius: 50%;
+        content: "";
+        transform: rotate(-2deg);
+        pointer-events: none;
+    }
+}
+
+@layer starci-grammar.offset-pop.composition {
+    [data-grammar="offset-pop"] [data-grammar-floating-cluster] {
+        container: offset-pop-cluster / inline-size;
+        isolation: isolate;
+        display: grid;
+        grid-template: minmax(20rem, 1fr) / minmax(0, 1fr);
+        min-inline-size: 0;
+        padding:
+            calc(var(--offset-pop-shadow-y) + .75rem)
+            calc(var(--offset-pop-shadow-x) + .75rem);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-floating-item] {
+        grid-area: 1 / 1;
+        inline-size: min(78%, 22rem);
+        min-inline-size: 0;
+        align-self: start;
+        justify-self: start;
+        transform: rotate(var(--offset-pop-item-rotation, 0deg));
+        transform-origin: center;
+        z-index: var(--offset-pop-item-layer, 1);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-floating-item]:nth-child(3n + 1) {
+        --offset-pop-item-layer: 1;
+        --offset-pop-item-rotation: var(--offset-pop-rotation-low);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-floating-item]:nth-child(3n + 2) {
+        --offset-pop-item-layer: 2;
+        --offset-pop-item-rotation: var(--offset-pop-rotation-high);
+
+        align-self: center;
+        justify-self: end;
+        margin-block-start: var(--offset-pop-overlap);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-floating-item]:nth-child(3n) {
+        --offset-pop-item-layer: 3;
+        --offset-pop-item-rotation: -1deg;
+
+        align-self: end;
+        justify-self: center;
+        inline-size: min(68%, 18rem);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-floating-item]:focus-within {
+        z-index: 10;
+    }
+}
+
+@layer starci-grammar.offset-pop.states {
+    [data-grammar="offset-pop"] [data-grammar-surface],
+    [data-grammar="offset-pop"] [data-grammar-row] {
+        transition:
+            transform var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition),
+            background-color var(--offset-pop-transition),
+            opacity var(--offset-pop-transition);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-whole-action] {
+        border-radius: inherit;
+        outline: 0;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-surface]:has([data-grammar-whole-action]:focus-visible),
+    [data-grammar="offset-pop"] [data-grammar-row]:focus-within {
+        outline: var(--offset-pop-focus-width) solid var(--offset-pop-pink);
+        outline-offset: var(--offset-pop-focus-gap);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-surface][data-grammar-surface-depth="top"]:has([data-grammar-whole-action]:active) {
+        box-shadow:
+            calc(var(--offset-pop-shadow-x) - var(--offset-pop-press-x))
+            calc(var(--offset-pop-shadow-y) - var(--offset-pop-press-y))
+            0
+            0
+            var(--offset-pop-shadow-ink);
+        transform: translate(var(--offset-pop-press-x), var(--offset-pop-press-y));
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-surface][data-grammar-surface-depth="nested"]:has([data-grammar-whole-action]:active) {
+        transform: translateY(1px);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-row]:has(:is(a, button):hover) {
+        background: color-mix(in srgb, var(--offset-pop-yellow) 32%, transparent);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state="affirmative"] [data-grammar-state-mark] {
+        background: var(--offset-pop-mint);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state="informative"] [data-grammar-state-mark] {
+        background: var(--offset-pop-blush);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state="cautionary"] [data-grammar-state-mark] {
+        background: var(--offset-pop-yellow);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state="negative"] [data-grammar-state-mark] {
+        color: var(--offset-pop-surface);
+        background: var(--offset-pop-critical);
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state="unavailable"] {
+        box-shadow: none;
+        opacity: .56;
+        transform: none;
+        cursor: not-allowed;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state="pending"] {
+        pointer-events: none;
+    }
+
+    [data-grammar="offset-pop"] [data-grammar-state="pending"] > * {
+        animation: none;
+    }
+}
+
+@layer starci-grammar.offset-pop.responsive {
+    @container offset-pop-cluster (max-width: 34rem) {
+        [data-grammar="offset-pop"] [data-grammar-floating-cluster] {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            min-block-size: auto;
+        }
+
+        [data-grammar="offset-pop"] [data-grammar-floating-item] {
+            inline-size: 100%;
+            margin: 0;
+            transform: rotate(0deg);
+        }
+    }
+
+    @container (max-width: 40rem) {
+        [data-grammar="offset-pop"] {
+            --offset-pop-shadow-x: 4px;
+            --offset-pop-shadow-y: 5px;
+            --offset-pop-radius-surface: 1.25rem;
+            --offset-pop-overlap: .75rem;
+        }
+
+        [data-grammar="offset-pop"] [data-grammar-band] {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        [data-grammar="offset-pop"] [data-grammar-band] > * + * {
+            border-inline-start: 0;
+        }
+
+        [data-grammar="offset-pop"] [data-grammar-band] > :nth-child(even) {
+            border-inline-start: var(--offset-pop-divider-width) solid color-mix(in srgb, var(--offset-pop-ink) 35%, transparent);
+        }
+
+        [data-grammar="offset-pop"] [data-grammar-band] > :nth-child(n + 3) {
+            border-block-start: var(--offset-pop-divider-width) solid color-mix(in srgb, var(--offset-pop-ink) 35%, transparent);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-grammar="offset-pop"] {
+            --offset-pop-transition: 0ms linear;
+        }
+
+        [data-grammar="offset-pop"] [data-grammar-floating-item],
+        [data-grammar="offset-pop"] [data-grammar-emphasis]::after {
+            transform: none;
+        }
+    }
+
+    @media (forced-colors: active) {
+        [data-grammar="offset-pop"] [data-grammar-surface],
+        [data-grammar="offset-pop"] [data-grammar-state-mark],
+        [data-grammar="offset-pop"] [data-grammar-rail],
+        [data-grammar="offset-pop"] [data-grammar-band] {
+            border-color: CanvasText;
+            color: CanvasText;
+            background: Canvas;
+            box-shadow: none;
+        }
+
+        [data-grammar="offset-pop"] [data-grammar-surface]:has([data-grammar-whole-action]:focus-visible),
+        [data-grammar="offset-pop"] [data-grammar-row]:focus-within {
+            outline-color: Highlight;
+        }
+    }
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@starci/grammar",
+  "version": "0.1.0",
+  "description": "Business-neutral StarCi UI contracts and versioned Grammar bundles.",
+  "keywords": [
+    "starci",
+    "design-system",
+    "ui-contracts",
+    "grammar"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/starci-lab/starci-academy-fe.git",
+    "directory": "packages/grammar"
+  },
+  "bugs": {
+    "url": "https://github.com/starci-lab/starci-academy-fe/issues"
+  },
+  "homepage": "https://github.com/starci-lab/starci-academy-fe/tree/main/packages/grammar#readme",
+  "type": "module",
+  "sideEffects": [
+    "./dist/**/*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./common": {
+      "types": "./dist/common/index.d.ts",
+      "import": "./dist/common/index.js"
+    },
+    "./common.css": "./dist/common/styles.css",
+    "./common/styles.css": "./dist/common/styles.css",
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    },
+    "./core.css": "./dist/core/styles.css",
+    "./core/styles.css": "./dist/core/styles.css",
+    "./offset-pop": {
+      "types": "./dist/offset-pop/index.d.ts",
+      "import": "./dist/offset-pop/index.js"
+    },
+    "./offset-pop.css": "./dist/offset-pop/styles.css",
+    "./offset-pop/styles.css": "./dist/offset-pop/styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "node scripts/clean.mjs && tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "test": "npm run build && node --test src/common/index.test.mjs src/core/index.test.mjs src/offset-pop/index.test.mjs && vitest run --config vitest.config.ts src/offset-pop/styles.spec.ts",
+    "prepack": "npm run typecheck && npm test"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.1.11"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}