twntyx-css 1.0.0

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "twntyx-css",
+  "version": "1.0.0",
+  "exports": {
+    "./llm": "./llm/index.json",
+    "./llm/components/*": "./llm/components/*.json",
+    "./llm/tokens": "./llm/tokens.json",
+    "./llm/patterns": "./llm/patterns.json",
+    "./llm/rules": "./llm/rules.json",
+    "./llm/schema": "./llm/schema.json",
+    "./*": "./*",
+    "./styles": "./styles/globals.css",
+    "./styles/*": "./styles/*",
+    "./tailwind.config": "./tailwind.config.cjs"
+  },
+  "files": [
+    "styles/**/*",
+    "llm/**/*",
+    "README.md",
+    "package.json",
+    "tailwind.config.cjs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepack": "node ../scripts/package-framework.mjs",
+    "pack:dry": "npm pack --dry-run"
+  }
+}

package/styles/ai.css

@@ -0,0 +1,114 @@
+/*----------------------------*/
+/* AI */
+/*----------------------------*/
+
+@utility ai-perl {
+  --ai-perl-size: 140px;
+  @apply relative flex items-center justify-center select-none gap-0.5 leading-none;
+  @apply text-text-default/25;
+  @apply font-semibold tracking-wide;
+  width: var(--ai-perl-size);
+  height: var(--ai-perl-size);
+}
+
+@utility ai-perl-ring {
+  --ai-perl-c1: var(--color-brand-light);
+  --ai-perl-c2: var(--color-brand-soft);
+  --ai-perl-c3: var(--color-brand-moderate);
+  --ai-perl-c1-mid: var(--color-brand-soft);
+  --ai-perl-c2-mid: var(--color-brand-light);
+  --ai-perl-c3-mid: var(--color-brand-default);
+  --ai-perl-glow-1: color-mix(in srgb, var(--color-brand-moderate) 35%, transparent);
+  --ai-perl-glow-2: color-mix(in srgb, var(--color-brand-default) 25%, transparent);
+
+  @apply absolute inset-0 rounded-full animate-ai-perl-circle pointer-events-none;
+}
+
+/* .dark .ai-perl-ring {
+  --ai-perl-c1: var(--color-core-ui-600);
+  --ai-perl-c2: var(--color-core-ui-500);
+  --ai-perl-c3: var(--color-core-ui-400);
+  --ai-perl-c1-mid: var(--color-core-ui-500);
+  --ai-perl-c2-mid: var(--color-core-ui-400);
+  --ai-perl-c3-mid: var(--color-core-ui-300);
+  --ai-perl-glow-1: color-mix(in srgb, var(--color-core-ui-500) 35%, transparent);
+  --ai-perl-glow-2: color-mix(in srgb, var(--color-core-ui-400) 25%, transparent);
+} */
+
+@utility ai-orb {
+  --ai-orb-size: 140px;
+  --ai-orb-c1: var(--color-brand-default);
+  --ai-orb-c2: var(--color-brand-soft);
+  --ai-orb-c3: var(--color-brand-moderate);
+
+  @apply relative grid place-items-center overflow-clip rounded-full;
+  width: var(--ai-orb-size);
+  height: var(--ai-orb-size);
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--color-core-black) 12%, transparent) 0%,
+    color-mix(in srgb, var(--color-core-black) 6%, transparent) 30%,
+    transparent 70%
+  );
+    box-shadow: 0 0.5rem 0.25rem -0.125rem color-mix(in srgb, var(--color-text-inverted) 20%, transparent), inset 0 3rem 1rem 0rem color-mix(in srgb, var(--color-text-inverted) 90%, transparent), inset 0 -1.5rem 3rem 1.5rem color-mix(in srgb, var(--color-text-inverted) 100%, transparent);
+
+}
+
+/* .dark .ai-orb {
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--color-core-white) 12%, transparent) 0%,
+    color-mix(in srgb, var(--color-core-white) 4%, transparent) 30%,
+    transparent 70%
+  );
+} */
+
+@utility ai-orb-glow {
+  @apply absolute inset-0 rounded-full animate-ai-orb-rotate blur-lg contrast-180 saturate-50 translate-z-0 will-change-transform;
+  background:
+    conic-gradient(
+      from 30deg at 30% 65%,
+      var(--ai-orb-c3) 0deg,
+      transparent 45deg 315deg,
+      var(--ai-orb-c3) 360deg
+    ),
+    conic-gradient(
+      from 120deg at 70% 35%,
+      var(--ai-orb-c2) 0deg,
+      transparent 60deg 300deg,
+      var(--ai-orb-c2) 360deg
+    ),
+    conic-gradient(
+      from 210deg at 65% 75%,
+      var(--ai-orb-c1) 0deg,
+      transparent 90deg 270deg,
+      var(--ai-orb-c1) 360deg
+    ),
+    conic-gradient(
+      from 15deg at 25% 25%,
+      var(--ai-orb-c2) 0deg,
+      transparent 30deg 330deg,
+      var(--ai-orb-c2) 360deg
+    ),
+    conic-gradient(
+      from 300deg at 80% 80%,
+      var(--ai-orb-c1) 0deg,
+      transparent 45deg 315deg,
+      var(--ai-orb-c1) 360deg
+    ),
+    radial-gradient(
+      ellipse 120% 80% at 40% 60%,
+      var(--ai-orb-c3) 0%,
+      transparent 50%
+    );
+}
+
+@utility ai-orb-core {
+  @apply absolute inset-0 rounded-full mix-blend-overlay;
+  background: radial-gradient(
+    circle at 45% 55%,
+    color-mix(in srgb, var(--color-core-white) 12%, transparent) 0%,
+    color-mix(in srgb, var(--color-core-white) 6%, transparent) 30%,
+    transparent 60%
+  );
+}