sid-ui 0.0.0-stage → 0.1.1

package/src/theme/joined.js

@@ -0,0 +1,569 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/theme/joined.theme.ts
+ * Command: astryx theme build src/theme/joined.theme.ts --out src/theme/theme.css
+ * CLI: @astryxdesign/cli@0.6.2
+ * Core: @astryxdesign/core@0.6.2
+ */
+
+/**
+ * joined theme — built by `npx astryx theme build`
+ * Import the CSS file alongside this module:
+ *
+ *   import { joinedTheme } from './joined';
+ *   import './joined.css';
+ */
+export const joinedTheme = {
+  name: "joined",
+  __built: true,
+  tokens: {
+    "--font-size-4xs": "0.375rem",
+    "--font-size-3xs": "0.4375rem",
+    "--font-size-2xs": "0.5rem",
+    "--font-size-xs": "0.625rem",
+    "--font-size-sm": "0.75rem",
+    "--font-size-base": "0.875rem",
+    "--font-size-lg": "1.0625rem",
+    "--font-size-xl": "1.25rem",
+    "--font-size-2xl": "1.5rem",
+    "--font-size-3xl": "1.8125rem",
+    "--font-size-4xl": "2.1875rem",
+    "--font-size-5xl": "2.625rem",
+    "--text-heading-1-size": "var(--font-size-2xl)",
+    "--text-heading-1-weight": "var(--font-weight-semibold)",
+    "--text-heading-1-leading": "1.3333",
+    "--text-heading-2-size": "var(--font-size-xl)",
+    "--text-heading-2-weight": "var(--font-weight-semibold)",
+    "--text-heading-2-leading": "1.4",
+    "--text-heading-3-size": "var(--font-size-lg)",
+    "--text-heading-3-weight": "var(--font-weight-bold)",
+    "--text-heading-3-leading": "1.4118",
+    "--text-heading-4-size": "var(--font-size-base)",
+    "--text-heading-4-weight": "var(--font-weight-bold)",
+    "--text-heading-4-leading": "1.4286",
+    "--text-heading-5-size": "var(--font-size-sm)",
+    "--text-heading-5-weight": "var(--font-weight-semibold)",
+    "--text-heading-5-leading": "1.6667",
+    "--text-heading-6-size": "var(--font-size-xs)",
+    "--text-heading-6-weight": "var(--font-weight-semibold)",
+    "--text-heading-6-leading": "1.6",
+    "--text-body-size": "var(--font-size-base)",
+    "--text-body-weight": "var(--font-weight-normal)",
+    "--text-body-leading": "1.4286",
+    "--text-large-size": "var(--font-size-lg)",
+    "--text-large-weight": "var(--font-weight-semibold)",
+    "--text-large-leading": "1.4118",
+    "--text-label-size": "var(--font-size-base)",
+    "--text-label-weight": "var(--font-weight-medium)",
+    "--text-label-leading": "1.4286",
+    "--text-code-size": "var(--font-size-base)",
+    "--text-code-weight": "var(--font-weight-normal)",
+    "--text-code-leading": "1.4286",
+    "--text-supporting-size": "var(--font-size-sm)",
+    "--text-supporting-weight": "var(--font-weight-normal)",
+    "--text-supporting-leading": "1.6667",
+    "--text-display-1-size": "var(--font-size-5xl)",
+    "--text-display-1-weight": "var(--font-weight-normal)",
+    "--text-display-1-leading": "1.2381",
+    "--text-display-2-size": "var(--font-size-4xl)",
+    "--text-display-2-weight": "var(--font-weight-normal)",
+    "--text-display-2-leading": "1.2571",
+    "--text-display-3-size": "var(--font-size-3xl)",
+    "--text-display-3-weight": "var(--font-weight-normal)",
+    "--text-display-3-leading": "1.3793",
+    "--duration-fast-min": "95ms",
+    "--duration-fast": "125ms",
+    "--duration-fast-max": "165ms",
+    "--duration-medium-min": "225ms",
+    "--duration-medium": "300ms",
+    "--duration-medium-max": "400ms",
+    "--duration-slow-min": "525ms",
+    "--duration-slow": "700ms",
+    "--duration-slow-max": "935ms",
+    "--font-family-body":
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    "--font-family-heading":
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    "--font-family-code":
+      'ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    "--color-syntax-keyword": "light-dark(#6b187c, #efa8ff)",
+    "--color-syntax-string": "light-dark(#0b5615, #a4d6a3)",
+    "--color-syntax-comment": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-number": "light-dark(#733100, #ffb37e)",
+    "--color-syntax-function": "light-dark(#00458c, #a1caff)",
+    "--color-syntax-type": "light-dark(#6b187c, #efa8ff)",
+    "--color-syntax-variable": "light-dark(#111111, #e2e2e2)",
+    "--color-syntax-operator": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-constant": "light-dark(#733100, #ffb37e)",
+    "--color-syntax-tag": "light-dark(#8a0011, #ffaea7)",
+    "--color-syntax-attribute": "light-dark(#584400, #eec448)",
+    "--color-syntax-property": "light-dark(#005348, #90d7c8)",
+    "--color-syntax-punctuation": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-background": "light-dark(#ffffff, #111111)",
+    "--color-background-surface": "light-dark(#FBFCFF, #1A1B22)",
+    "--color-background-body": "light-dark(#EFF0FA, #0F1118)",
+    "--color-background-card": "light-dark(#FBFCFF, #1A1B22)",
+    "--color-background-popover": "light-dark(#FBFCFF, #2E3037)",
+    "--color-background-muted": "light-dark(#1A1B220D, #1A1B2280)",
+    "--color-accent": "light-dark(#1877F2, #2E89FF)",
+    "--color-accent-muted": "light-dark(#E7F3FF, #253C5A)",
+    "--color-neutral": "light-dark(#1A1B221A, #E0E2EC33)",
+    "--color-overlay": "light-dark(#1A1B2266, #1A1B2299)",
+    "--color-overlay-hover": "light-dark(#1A1B220D, #FFFFFF0D)",
+    "--color-overlay-pressed": "light-dark(#1A1B221A, #FFFFFF1A)",
+    "--color-text-primary": "light-dark(#1A1B22, #E0E2EC)",
+    "--color-text-secondary": "light-dark(#444652, #A8ABB9)",
+    "--color-text-disabled": "light-dark(#8E909E, #5B5E6B)",
+    "--color-text-accent": "light-dark(#003978, #A1CAFF)",
+    "--color-on-dark": "#ffffff",
+    "--color-on-light": "#111111",
+    "--color-on-accent": "#FFFFFF",
+    "--color-on-success": "light-dark(#ffffff, #111111)",
+    "--color-on-error": "light-dark(#ffffff, #111111)",
+    "--color-on-warning": "#111111",
+    "--color-icon-accent": "light-dark(#003978, #88BCFF)",
+    "--color-icon-primary": "light-dark(#1A1B22, #E0E2EC)",
+    "--color-icon-secondary": "light-dark(#444652, #A8ABB9)",
+    "--color-icon-disabled": "light-dark(#8E909E, #5B5E6B)",
+    "--color-success": "light-dark(#00490b, #a4d6a3)",
+    "--color-error": "light-dark(#76000c, #ffc4be)",
+    "--color-warning": "light-dark(#4b3900, #f8d36a)",
+    "--color-success-muted": "light-dark(#bce0bb, #90ca903D)",
+    "--color-error-muted": "light-dark(#ffc4be, #ff98903D)",
+    "--color-warning-muted": "light-dark(#fae19e, #e2b6233D)",
+    "--color-border": "light-dark(#1A1B221A, #EEF0FA1A)",
+    "--color-border-emphasized": "light-dark(#8E909E, #656875)",
+    "--color-skeleton": "light-dark(#A9AAB9, #434653)",
+    "--color-shadow": "light-dark(#0000001A, #0000004D)",
+    "--color-tint-hover": "light-dark(black, white)",
+    "--color-background-red": "light-dark(#ffc4be, #5b2b28)",
+    "--color-border-red": "light-dark(#ffaea7, #fa6762)",
+    "--color-icon-red": "light-dark(#76000c, #ff9890)",
+    "--color-text-red": "light-dark(#76000c, #ffaea7)",
+    "--color-background-orange": "light-dark(#ffc7a1, #503424)",
+    "--color-border-orange": "light-dark(#ffc7a1, #df843f)",
+    "--color-icon-orange": "light-dark(#622700, #ff9e55)",
+    "--color-text-orange": "light-dark(#622700, #ffb37e)",
+    "--color-background-yellow": "light-dark(#fae19e, #453a1c)",
+    "--color-border-yellow": "light-dark(#e3c36c, #c29900)",
+    "--color-icon-yellow": "light-dark(#4b3900, #e2b623)",
+    "--color-text-yellow": "light-dark(#4b3900, #eec448)",
+    "--color-background-green": "light-dark(#bce0bb, #2b422b)",
+    "--color-border-green": "light-dark(#aad4a9, #6ab26b)",
+    "--color-icon-green": "light-dark(#00490b, #90ca90)",
+    "--color-text-green": "light-dark(#00490b, #90ca90)",
+    "--color-background-teal": "light-dark(#a9e2d6, #28413c)",
+    "--color-border-teal": "light-dark(#90d7c8, #4fb1a0)",
+    "--color-icon-teal": "light-dark(#00463d, #81c9bb)",
+    "--color-text-teal": "light-dark(#00463d, #90d7c8)",
+    "--color-background-cyan": "light-dark(#9ae2f4, #274046)",
+    "--color-border-cyan": "light-dark(#85d5e9, #49adc4)",
+    "--color-icon-cyan": "light-dark(#004351, #71c7dd)",
+    "--color-text-cyan": "light-dark(#004351, #85d5e9)",
+    "--color-background-blue": "light-dark(#b9d7ff, #253c5a)",
+    "--color-border-blue": "light-dark(#a1caff, #5aa0f8)",
+    "--color-icon-blue": "light-dark(#003978, #88bcff)",
+    "--color-text-blue": "light-dark(#003978, #a1caff)",
+    "--color-background-purple": "light-dark(#f7d5ff, #4a2f51)",
+    "--color-border-purple": "light-dark(#f3bfff, #d885eb)",
+    "--color-icon-purple": "light-dark(#5c0e6c, #e496f6)",
+    "--color-text-purple": "light-dark(#5c0e6c, #eaacf8)",
+    "--color-background-pink": "light-dark(#ffc0d7, #572b3d)",
+    "--color-border-pink": "light-dark(#ffc0d7, #fc78b1)",
+    "--color-icon-pink": "light-dark(#70003f, #fd92bd)",
+    "--color-text-pink": "light-dark(#70003f, #ffa9ca)",
+    "--color-background-gray": "light-dark(#e2e2e2, #303030)",
+    "--color-border-gray": "light-dark(#d4d4d4, #262626)",
+    "--color-icon-gray": "light-dark(#474747, #9e9e9e)",
+    "--color-text-gray": "light-dark(#1b1b1b, #d4d4d4)",
+    "--radius-none": "0px",
+    "--radius-inner": "0.375rem",
+    "--radius-element": "0.625rem",
+    "--radius-container": "0.75rem",
+    "--radius-page": "1.75rem",
+    "--radius-full": "9999px",
+    "--shadow-low":
+      "0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%))",
+    "--shadow-med":
+      "0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%))",
+    "--shadow-high":
+      "0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%))",
+    "--shadow-inset-hover": "inset 0px 0px 0px 2px #0074e24D",
+    "--shadow-inset-selected": "inset 0px 0px 0px 2px #0074e280",
+    "--shadow-inset-success": "inset 0px 0px 0px 2px #2f7d334D",
+    "--shadow-inset-warning": "inset 0px 0px 0px 2px #f8d36a4D",
+    "--shadow-inset-error": "inset 0px 0px 0px 2px #de47454D",
+    "--color-background-inverted": "light-dark(#1A1B22, #FBFCFF)",
+    "--color-track": "light-dark(#A9AAB9, #434653)",
+  },
+  localTokens: {
+    "--astryx-theme-neutral-color-status-fill-accent": "light-dark(#0074e2, #6d9cfe)",
+    "--astryx-theme-neutral-color-status-fill-success": "light-dark(#198100, #64af4c)",
+    "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
+    "--astryx-theme-neutral-color-status-fill-error": "light-dark(#c9303a, #ff705d)",
+    "--astryx-theme-neutral-color-status-muted-accent": "light-dark(#b9d7ff, #88bcff3D)",
+    "--astryx-theme-neutral-color-on-tint-neutral": "light-dark(#fafafa4D, #0a0a0a4D)",
+    "--astryx-theme-neutral-color-on-tint-overlay-hover": "light-dark(#fafafa1A, #0a0a0a1A)",
+    "--astryx-theme-neutral-color-on-tint-overlay-pressed": "light-dark(#fafafa33, #0a0a0a33)",
+    "--astryx-theme-neutral-color-destructive-overlay-hover": "light-dark(#ff7f770D, #ee736c0D)",
+    "--astryx-theme-neutral-color-destructive-overlay-pressed": "light-dark(#ff7f771A, #ee736c1A)",
+  },
+  __localTokenOwners: {
+    "--astryx-theme-neutral-color-status-fill-accent": "neutral",
+    "--astryx-theme-neutral-color-status-fill-success": "neutral",
+    "--astryx-theme-neutral-color-status-fill-warning": "neutral",
+    "--astryx-theme-neutral-color-status-fill-error": "neutral",
+    "--astryx-theme-neutral-color-status-muted-accent": "neutral",
+    "--astryx-theme-neutral-color-on-tint-neutral": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-hover": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-pressed": "neutral",
+    "--astryx-theme-neutral-color-destructive-overlay-hover": "neutral",
+    "--astryx-theme-neutral-color-destructive-overlay-pressed": "neutral",
+  },
+  __localTokenLineage: ["neutral", "joined"],
+  components: {
+    heading: {
+      "level:1": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-heading-1-size)",
+        fontWeight: "var(--text-heading-1-weight)",
+        lineHeight: "var(--text-heading-1-leading)",
+      },
+      "level:2": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-heading-2-size)",
+        fontWeight: "var(--text-heading-2-weight)",
+        lineHeight: "var(--text-heading-2-leading)",
+      },
+      "level:3": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-heading-3-size)",
+        fontWeight: "var(--text-heading-3-weight)",
+        lineHeight: "var(--text-heading-3-leading)",
+      },
+      "level:4": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-heading-4-size)",
+        fontWeight: "var(--text-heading-4-weight)",
+        lineHeight: "var(--text-heading-4-leading)",
+      },
+      "level:5": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-heading-5-size)",
+        fontWeight: "var(--text-heading-5-weight)",
+        lineHeight: "var(--text-heading-5-leading)",
+      },
+      "level:6": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-heading-6-size)",
+        fontWeight: "var(--text-heading-6-weight)",
+        lineHeight: "var(--text-heading-6-leading)",
+      },
+      "type:display-1": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-display-1-size)",
+        lineHeight: "var(--text-display-1-leading)",
+      },
+      "type:display-2": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-display-2-size)",
+        lineHeight: "var(--text-display-2-leading)",
+      },
+      "type:display-3": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-display-3-size)",
+        lineHeight: "var(--text-display-3-leading)",
+      },
+    },
+    text: {
+      "type:body": {
+        fontFamily: "var(--font-family-body)",
+        fontSize: "var(--text-body-size)",
+        lineHeight: "var(--text-body-leading)",
+      },
+      "type:large": {
+        fontFamily: "var(--font-family-body)",
+        fontSize: "var(--text-large-size)",
+        lineHeight: "var(--text-large-leading)",
+      },
+      "type:label": {
+        fontFamily: "var(--font-family-body)",
+        fontSize: "var(--text-label-size)",
+        lineHeight: "var(--text-label-leading)",
+      },
+      "type:code": {
+        fontFamily: "var(--font-family-code)",
+        fontSize: "var(--text-code-size)",
+        lineHeight: "var(--text-code-leading)",
+      },
+      "type:supporting": {
+        fontFamily: "var(--font-family-body)",
+        fontSize: "var(--text-supporting-size)",
+        lineHeight: "var(--text-supporting-leading)",
+      },
+      "type:display-1": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-display-1-size)",
+        lineHeight: "var(--text-display-1-leading)",
+      },
+      "type:display-2": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-display-2-size)",
+        lineHeight: "var(--text-display-2-leading)",
+      },
+      "type:display-3": {
+        fontFamily: "var(--font-family-heading)",
+        fontSize: "var(--text-display-3-size)",
+        lineHeight: "var(--text-display-3-leading)",
+      },
+    },
+    button: {
+      "variant:destructive": {
+        backgroundColor: "var(--color-error-muted)",
+        color: "var(--color-error)",
+        "--color-overlay-hover": "var(--astryx-theme-neutral-color-destructive-overlay-hover)",
+        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-destructive-overlay-pressed)",
+      },
+    },
+    badge: {
+      "variant:info": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-accent)",
+        color: "var(--color-on-accent)",
+      },
+      "variant:neutral": {
+        backgroundColor: "var(--color-background-gray)",
+        color: "var(--color-text-gray)",
+      },
+      "variant:success": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-success)",
+        color: "var(--color-on-success)",
+      },
+      "variant:warning": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-warning)",
+        color: "var(--color-on-warning)",
+      },
+      "variant:error": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-error)",
+        color: "var(--color-on-error)",
+      },
+      "variant:red": {
+        backgroundColor: "var(--color-background-red)",
+        color: "var(--color-text-red)",
+      },
+      "variant:orange": {
+        backgroundColor: "var(--color-background-orange)",
+        color: "var(--color-text-orange)",
+      },
+      "variant:yellow": {
+        backgroundColor: "var(--color-background-yellow)",
+        color: "var(--color-text-yellow)",
+      },
+      "variant:green": {
+        backgroundColor: "var(--color-background-green)",
+        color: "var(--color-text-green)",
+      },
+      "variant:teal": {
+        backgroundColor: "var(--color-background-teal)",
+        color: "var(--color-text-teal)",
+      },
+      "variant:cyan": {
+        backgroundColor: "var(--color-background-cyan)",
+        color: "var(--color-text-cyan)",
+      },
+      "variant:blue": {
+        backgroundColor: "var(--color-background-blue)",
+        color: "var(--color-text-blue)",
+      },
+      "variant:purple": {
+        backgroundColor: "var(--color-background-purple)",
+        color: "var(--color-text-purple)",
+      },
+      "variant:pink": {
+        backgroundColor: "var(--color-background-pink)",
+        color: "var(--color-text-pink)",
+      },
+      "variant:gray": {
+        backgroundColor: "var(--color-background-gray)",
+        color: "var(--color-text-gray)",
+      },
+    },
+    "status-dot": {
+      "variant:success": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-success)",
+      },
+      "variant:warning": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-warning)",
+      },
+      "variant:error": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-error)",
+      },
+      "variant:accent": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-accent)",
+      },
+    },
+    "avatar-status-dot": {
+      "variant:success": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-success)",
+      },
+      "variant:error": {
+        backgroundColor: "var(--astryx-theme-neutral-color-status-fill-error)",
+      },
+    },
+    "segmented-control": {
+      base: {
+        padding: "var(--spacing-1)",
+        borderRadius: "var(--radius-full)",
+      },
+    },
+    "segmented-control-item": {
+      "size:sm": {
+        height: "var(--size-element-sm)",
+      },
+      "size:md": {
+        height: "var(--size-element-md)",
+      },
+      "size:lg": {
+        height: "var(--size-element-lg)",
+      },
+      selected: {
+        boxShadow: "none",
+      },
+    },
+    banner: {
+      base: {
+        "--color-neutral": "var(--astryx-theme-neutral-color-on-tint-neutral)",
+        "--color-overlay-hover": "var(--astryx-theme-neutral-color-on-tint-overlay-hover)",
+        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-on-tint-overlay-pressed)",
+      },
+      "status:info": {
+        "--color-accent-muted": "var(--astryx-theme-neutral-color-status-muted-accent)",
+        "--color-text-primary": "var(--color-text-blue)",
+        "--color-text-secondary": "var(--color-text-blue)",
+        "--color-accent": "var(--color-text-blue)",
+      },
+      "status:success": {
+        "--color-text-primary": "var(--color-text-green)",
+        "--color-text-secondary": "var(--color-text-green)",
+        "--color-success": "var(--color-text-green)",
+      },
+      "status:warning": {
+        "--color-text-primary": "var(--color-text-yellow)",
+        "--color-text-secondary": "var(--color-text-yellow)",
+        "--color-warning": "var(--color-text-yellow)",
+      },
+      "status:error": {
+        "--color-text-primary": "var(--color-text-red)",
+        "--color-text-secondary": "var(--color-text-red)",
+        "--color-error": "var(--color-text-red)",
+      },
+    },
+    "step-indicator": {
+      "status:accent": {
+        "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)",
+      },
+      "status:success": {
+        "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)",
+      },
+      "status:warning": {
+        "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)",
+      },
+      "status:error": {
+        "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)",
+      },
+    },
+    switch: {
+      base: {
+        "--color-background-gray": "var(--color-border-emphasized)",
+      },
+    },
+    "progress-bar": {
+      base: {
+        "--color-background-muted": "var(--color-border-emphasized)",
+      },
+      "variant:accent": {
+        "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)",
+      },
+      "variant:success": {
+        "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)",
+      },
+      "variant:warning": {
+        "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)",
+      },
+      "variant:error": {
+        "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)",
+      },
+    },
+    card: {
+      base: {
+        padding: "var(--spacing-3)",
+      },
+    },
+    section: {
+      base: {
+        padding: "var(--spacing-3)",
+      },
+    },
+  },
+  __onDark: {
+    tokens: {
+      "color-scheme": "dark",
+      "--color-text-primary": "var(--color-on-dark)",
+      "--color-icon-primary": "var(--color-on-dark)",
+      "--color-accent": "var(--color-on-dark)",
+    },
+  },
+  __onLight: {
+    tokens: {
+      "color-scheme": "light",
+      "--color-text-primary": "var(--color-on-light)",
+      "--color-icon-primary": "var(--color-on-light)",
+      "--color-accent": "var(--color-on-light)",
+    },
+  },
+  __adaptations: {
+    widthBreakpoints: {
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      "2xl": 1536,
+    },
+    rules: [],
+  },
+  __axes: {
+    typography: {
+      scale: {
+        base: 14,
+        ratio: 1.2,
+      },
+      body: {
+        family: "system-ui",
+        fallbacks:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      },
+      heading: {
+        family: "system-ui",
+        fallbacks:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        weights: {
+          3: "bold",
+          4: "bold",
+        },
+      },
+      code: {
+        family: "ui-monospace",
+        fallbacks: '"SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      },
+    },
+    color: {
+      accent: ["#1877F2", "#2E89FF"],
+      neutralStyle: "cool",
+    },
+    motion: {
+      fast: 125,
+      medium: 300,
+      slow: 700,
+      ratio: 0.75,
+    },
+  },
+};

package/src/theme/joined.theme.ts

@@ -0,0 +1,74 @@
+import { defineTheme } from "@astryxdesign/core/theme";
+import { neutralTheme } from "@astryxdesign/theme-neutral/built";
+
+/** Meta / Facebook blue — light scheme primary */
+export const ACCENT_LIGHT = "#1877F2";
+/** Meta / Facebook blue — dark scheme primary */
+export const ACCENT_DARK = "#2E89FF";
+
+/** Soft Meta blue surfaces — light / dark */
+export const ACCENT_MUTED_LIGHT = "#E7F3FF";
+export const ACCENT_MUTED_DARK = "#253C5A";
+
+/** Text / icon on blue series — light / dark */
+export const ACCENT_INK_LIGHT = "#003978";
+export const ACCENT_INK_DARK = "#A1CAFF";
+export const ACCENT_ICON_DARK = "#88BCFF";
+
+/** Platform system UI stack (no webfont). */
+export const FONT_FAMILY_SYSTEM =
+  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+
+/**
+ * Joined theme: Neutral structure with Meta blue primary and system fonts.
+ * Explicit accent tokens match the Joined blue series; `color.accent` keeps
+ * related neutrals cool-tinted from the same seed.
+ */
+export const joinedTheme = defineTheme({
+  name: "joined",
+  extends: neutralTheme,
+  color: {
+    accent: [ACCENT_LIGHT, ACCENT_DARK],
+    neutralStyle: "cool",
+  },
+  typography: {
+    body: {
+      family: "system-ui",
+      fallbacks:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    },
+    heading: {
+      family: "system-ui",
+      fallbacks:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      weights: { 3: "bold", 4: "bold" },
+    },
+    code: {
+      family: "ui-monospace",
+      fallbacks: '"SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
+  },
+  tokens: {
+    "--color-accent": [ACCENT_LIGHT, ACCENT_DARK],
+    "--color-accent-muted": [ACCENT_MUTED_LIGHT, ACCENT_MUTED_DARK],
+    "--color-on-accent": "#FFFFFF",
+    "--color-text-accent": [ACCENT_INK_LIGHT, ACCENT_INK_DARK],
+    "--color-icon-accent": [ACCENT_INK_LIGHT, ACCENT_ICON_DARK],
+    "--font-family-body": FONT_FAMILY_SYSTEM,
+    "--font-family-heading": FONT_FAMILY_SYSTEM,
+  },
+  components: {
+    "segmented-control": {
+      base: {
+        padding: "var(--spacing-1)",
+        borderRadius: "var(--radius-full)",
+      },
+    },
+    "segmented-control-item": {
+      "size:sm": { height: "var(--size-element-sm)" },
+      "size:md": { height: "var(--size-element-md)" },
+      "size:lg": { height: "var(--size-element-lg)" },
+      selected: { boxShadow: "none" },
+    },
+  },
+});

package/src/theme/joined.variants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/theme/joined.theme.ts
+ * Command: astryx theme build src/theme/joined.theme.ts --out src/theme/theme.css
+ * CLI: @astryxdesign/cli@0.6.2
+ * Core: @astryxdesign/core@0.6.2
+ */
+
+// Generated by astryx theme build
+export {};
+
+declare module "@astryxdesign/core/Badge" {
+  interface BadgeVariantMap {
+    gray: true;
+  }
+}