@protoflexo/proto-ui 0.1.0

package/dist/tokens.css

@@ -0,0 +1,296 @@
+/*
+ * Flex Design System Tokens
+ * Extracted from genoa/src/rxp/unistyles.ts and genoa/src/rxp/globalStyles.ts
+ *
+ * Naming: --flex-{category}-{name}
+ */
+
+:root {
+  /* ========================================
+     RAW PALETTE
+     ======================================== */
+
+  /* Brand Purples */
+  --flex-brand-purple-01: #2C194D;
+  --flex-brand-purple-02: #6A3DB8;
+  --flex-brand-purple-03: #DDC6F9;
+  --flex-brand-purple-04: #EEE2FC;
+  --flex-brand-purple-05: #E3E1E6;
+
+  /* Primary */
+  --flex-off-white: #F7F7F7;
+  --flex-off-black: #1D1D1D;
+  --flex-white: #FFFFFF;
+  --flex-black: #000000;
+
+  /* Gray Purple */
+  --flex-gray-purple-01: #EDEBF1;
+  --flex-gray-purple-02: #D5D1DB;
+  --flex-gray-purple-03: #C0BACA;
+  --flex-gray-purple-04: #ABA3B8;
+  --flex-gray-purple-05: #958CA6;
+  --flex-gray-purple-06: #807594;
+  --flex-gray-purple-07: #6B5E82;
+  --flex-gray-purple-08: #564771;
+
+  /* Gray */
+  --flex-gray-01: #F3F3F3;
+  --flex-gray-02: #EEEEEE;
+  --flex-gray-03: #E2E2E2;
+  --flex-gray-04: #BBBBBB;
+  --flex-gray-05: #949494;
+  --flex-gray-06: #737373;
+  --flex-gray-07: #6A6A6A;
+  --flex-gray-08: #535353;
+
+  /* Success */
+  --flex-success-01: #01795C;
+  --flex-success-02: #67AF9D;
+  --flex-success-03: #B3D7CE;
+  --flex-success-04: #E6F2EF;
+
+  /* Error */
+  --flex-error-01: #7A0800;
+  --flex-error-02: #E27474;
+  --flex-error-03: #F0BABA;
+  --flex-error-04: #FAE8E8;
+
+  /* Warning */
+  --flex-warning-01: #C8880A;
+  --flex-warning-02: rgba(200, 136, 10, 0.6);
+  --flex-warning-03: rgba(200, 136, 10, 0.3);
+  --flex-warning-04: rgba(200, 136, 10, 0.1);
+  --flex-warning-05: #FFF5E2;
+
+  /* Red */
+  --flex-red-01: #CE1818;
+  --flex-red-02: rgba(206, 24, 24, 0.6);
+  --flex-red-03: rgba(206, 24, 24, 0.3);
+  --flex-red-04: rgba(206, 24, 24, 0.1);
+
+  /* Blue */
+  --flex-blue-01: #00359C;
+  --flex-blue-02: #1C53BA;
+  --flex-blue-03: #6CA3EB;
+  --flex-blue-04: #B1D4FF;
+  --flex-blue-05: #E5EEFF;
+
+  /* Legacy named colors */
+  --flex-jewel-purple: #6A3DB8;
+  --flex-flavender: #B28CF4;
+  --flex-soft-lilac: #DDC6F9;
+  --flex-purple-powder: #EEE2FC;
+  --flex-midnight: #0E0622;
+  --flex-dusk: #767184;
+  --flex-storm: #C7C3D1;
+  --flex-cloud: #ECEAF2;
+  --flex-wildflower: #F7F7FA;
+  --flex-evergreen: #01795C;
+  --flex-fire-engine: #D6001A;
+  --flex-cider: #A16B00;
+  --flex-amber: #C58301;
+  --flex-forward-blue: #1C53BA;
+  --flex-frost: #E5EEFF;
+
+  /* ========================================
+     SEMANTIC COLOR TOKENS
+     ======================================== */
+
+  /* Base */
+  --flex-base-surface: var(--flex-white);
+  --flex-base-on-surface: var(--flex-off-black);
+  --flex-base-primary: var(--flex-brand-purple-01);
+  --flex-base-secondary: var(--flex-gray-purple-02);
+  --flex-base-interactive: var(--flex-brand-purple-02);
+  --flex-base-critical: var(--flex-red-01);
+  --flex-base-warning: var(--flex-warning-01);
+  --flex-base-success: var(--flex-success-01);
+  --flex-base-highlight: var(--flex-blue-02);
+
+  /* Text */
+  --flex-text-default: var(--flex-off-black);
+  --flex-text-subdued: var(--flex-gray-07);
+  --flex-text-disabled: var(--flex-gray-03);
+  --flex-text-on-dark: var(--flex-white);
+  --flex-text-on-dark-subdued: var(--flex-off-white);
+  --flex-text-link: var(--flex-brand-purple-01);
+  --flex-text-link-inline: var(--flex-brand-purple-02);
+  --flex-text-link-disabled: var(--flex-gray-07);
+  --flex-text-link-pressed: var(--flex-brand-purple-02);
+  --flex-text-link-on-dark: var(--flex-white);
+  --flex-text-link-on-dark-subdued: var(--flex-off-white);
+  --flex-text-action: var(--flex-brand-purple-01);
+  --flex-text-action-on-dark: var(--flex-off-white);
+  --flex-text-action-on-light-disabled: var(--flex-gray-purple-03);
+  --flex-text-critical: var(--flex-red-01);
+  --flex-text-critical-pressed: var(--flex-red-02);
+  --flex-text-critical-disabled: var(--flex-red-03);
+  --flex-text-success: var(--flex-success-01);
+  --flex-text-warning: var(--flex-warning-01);
+  --flex-text-highlight: var(--flex-blue-01);
+
+  /* Surface */
+  --flex-surface-default: var(--flex-white);
+  --flex-surface-subdued: var(--flex-off-white);
+  --flex-surface-pressed: var(--flex-brand-purple-01);
+  --flex-surface-disabled: var(--flex-gray-purple-01);
+  --flex-surface-callout: var(--flex-gray-02);
+  --flex-surface-brand: var(--flex-brand-purple-04);
+  --flex-surface-brand-subdued: var(--flex-gray-purple-01);
+  --flex-surface-brand-dark: var(--flex-brand-purple-02);
+  --flex-surface-brand-darkest: var(--flex-brand-purple-01);
+  --flex-surface-critical: var(--flex-error-04);
+  --flex-surface-critical-dark: var(--flex-error-01);
+  --flex-surface-success: var(--flex-success-04);
+  --flex-surface-success-dark: var(--flex-success-01);
+  --flex-surface-warning: var(--flex-warning-05);
+  --flex-surface-warning-dark: var(--flex-warning-01);
+  --flex-surface-highlight: var(--flex-blue-05);
+  --flex-surface-highlight-dark: var(--flex-blue-01);
+
+  /* Action */
+  --flex-action-primary: var(--flex-brand-purple-01);
+  --flex-action-primary-pressed: var(--flex-brand-purple-02);
+  --flex-action-primary-disabled: var(--flex-gray-03);
+  --flex-action-secondary: var(--flex-gray-purple-01);
+  --flex-action-secondary-pressed: var(--flex-gray-purple-02);
+  --flex-action-secondary-disabled: var(--flex-gray-03);
+  --flex-action-selection-default: var(--flex-gray-purple-01);
+  --flex-action-selection-pressed: var(--flex-brand-purple-02);
+  --flex-action-selection-disabled: var(--flex-gray-03);
+  --flex-action-on-dark: var(--flex-white);
+  --flex-action-progress-inactive: var(--flex-gray-purple-02);
+
+  /* Focus */
+  --flex-focus: var(--flex-brand-purple-02);
+
+  /* Icon */
+  --flex-icon-primary: var(--flex-brand-purple-01);
+  --flex-icon-subdued: var(--flex-gray-07);
+  --flex-icon-primary-disabled: var(--flex-brand-purple-05);
+  --flex-icon-subdued-disabled: var(--flex-gray-03);
+  --flex-icon-brand: var(--flex-brand-purple-02);
+  --flex-icon-brand-dark: var(--flex-brand-purple-01);
+  --flex-icon-brand-subdued: var(--flex-gray-purple-05);
+  --flex-icon-on-dark: var(--flex-white);
+  --flex-icon-critical: var(--flex-red-01);
+  --flex-icon-success: var(--flex-success-01);
+  --flex-icon-warning: var(--flex-warning-01);
+
+  /* Border */
+  --flex-border-default: var(--flex-gray-04);
+  --flex-border-subdued: var(--flex-gray-03);
+  --flex-border-hover: var(--flex-brand-purple-03);
+  --flex-border-pressed: var(--flex-brand-purple-02);
+  --flex-border-disabled: var(--flex-gray-purple-02);
+  --flex-border-action-default: var(--flex-brand-purple-05);
+  --flex-border-action-pressed: var(--flex-brand-purple-02);
+  --flex-border-critical: var(--flex-red-01);
+  --flex-border-critical-subdued: var(--flex-red-03);
+  --flex-border-success: var(--flex-success-01);
+  --flex-border-success-subdued: var(--flex-success-03);
+  --flex-border-warning: var(--flex-warning-01);
+  --flex-border-highlight: var(--flex-blue-01);
+
+  /* Decorative */
+  --flex-decorative-surface-1: var(--flex-gray-purple-02);
+  --flex-decorative-surface-2: var(--flex-blue-05);
+  --flex-decorative-surface-3: var(--flex-brand-purple-04);
+  --flex-decorative-surface-4: var(--flex-warning-05);
+  --flex-decorative-surface-5: var(--flex-gray-01);
+
+  /* Background */
+  --flex-background-dark: var(--flex-off-white);
+  --flex-background-lighter: var(--flex-white);
+
+  /* ========================================
+     SPACING
+     ======================================== */
+  --flex-space-12: 2px;
+  --flex-space-18: 3px;
+  --flex-space-25: 4px;
+  --flex-space-37: 6px;
+  --flex-space-50: 8px;
+  --flex-space-75: 12px;
+  --flex-space-87: 14px;
+  --flex-space-100: 16px;
+  --flex-space-112: 18px;
+  --flex-space-125: 20px;
+  --flex-space-150: 24px;
+  --flex-space-175: 28px;
+  --flex-space-200: 32px;
+  --flex-space-250: 40px;
+  --flex-space-275: 44px;
+  --flex-space-300: 48px;
+  --flex-space-325: 52px;
+  --flex-space-350: 56px;
+  --flex-space-375: 60px;
+  --flex-space-400: 64px;
+  --flex-space-500: 80px;
+  --flex-space-600: 96px;
+  --flex-space-725: 116px;
+  --flex-space-800: 128px;
+  --flex-space-900: 144px;
+
+  /* ========================================
+     BORDER RADIUS
+     ======================================== */
+  --flex-radius-none: 0px;
+  --flex-radius-xs: 2px;
+  --flex-radius-sm: 4px;
+  --flex-radius-md: 8px;
+  --flex-radius-mlg: 10px;
+  --flex-radius-lg: 12px;
+  --flex-radius-xl: 16px;
+  --flex-radius-xxl: 20px;
+  --flex-radius-xxxl: 24px;
+  --flex-radius-super: 100px;
+  --flex-radius-full: 9999px;
+
+  /* ========================================
+     FONT FAMILIES
+     ======================================== */
+  --flex-font-sans: 'ABCDiatype', system-ui, -apple-system, sans-serif;
+  --flex-font-serif: 'CooperBT-Medium', Georgia, serif;
+  --flex-font-mono: 'ABCDiatypeSemi-Mono', ui-monospace, monospace;
+
+  /* ========================================
+     FONT SIZES
+     ======================================== */
+  --flex-font-size-250: 10px;
+  --flex-font-size-300: 12px;
+  --flex-font-size-350: 14px;
+  --flex-font-size-400: 16px;
+  --flex-font-size-450: 18px;
+  --flex-font-size-500: 20px;
+  --flex-font-size-550: 22px;
+  --flex-font-size-600: 24px;
+  --flex-font-size-700: 28px;
+  --flex-font-size-800: 32px;
+  --flex-font-size-900: 36px;
+  --flex-font-size-1000: 40px;
+  --flex-font-size-1200: 48px;
+
+  /* ========================================
+     LINE HEIGHTS
+     ======================================== */
+  --flex-line-height-350: 14px;
+  --flex-line-height-400: 16px;
+  --flex-line-height-450: 18px;
+  --flex-line-height-475: 19px;
+  --flex-line-height-500: 20px;
+  --flex-line-height-550: 22px;
+  --flex-line-height-600: 24px;
+  --flex-line-height-700: 28px;
+  --flex-line-height-850: 34px;
+  --flex-line-height-925: 37px;
+  --flex-line-height-1050: 42px;
+  --flex-line-height-1225: 49px;
+
+  /* ========================================
+     FONT WEIGHTS
+     ======================================== */
+  --flex-font-weight-regular: 400;
+  --flex-font-weight-medium: 500;
+  --flex-font-weight-bold: 700;
+}

package/dist/typography.css

@@ -0,0 +1,299 @@
+/*
+ * Flex Typography Preset Classes
+ * Extracted from genoa/src/rxp/components/Typography/Typography.tsx
+ *
+ * Usage: <span class="flex-type-body">Text</span>
+ * Or via Typography component: <Typography type="body">Text</Typography>
+ */
+
+/* ── Heading Semantic Tokens ─────────────────────────────── */
+
+.flex-type-hero-lg {
+  font-family: var(--flex-font-serif);
+  font-size: 40px;
+  line-height: 42px;
+  font-weight: 400;
+  letter-spacing: -0.8px;
+}
+
+.flex-type-hero-lg-italic {
+  font-family: var(--flex-font-serif);
+  font-size: 40px;
+  line-height: 42px;
+  font-weight: 400;
+  letter-spacing: -0.8px;
+  font-style: italic;
+}
+
+.flex-type-hero-lg-number {
+  font-family: var(--flex-font-mono);
+  font-size: 48px;
+  line-height: 49px;
+  font-weight: 500;
+  letter-spacing: -0.96px;
+}
+
+.flex-type-hero-md {
+  font-family: var(--flex-font-serif);
+  font-size: 28px;
+  line-height: 37px;
+  font-weight: 400;
+  letter-spacing: -0.56px;
+}
+
+.flex-type-hero-md-italic {
+  font-family: var(--flex-font-serif);
+  font-size: 32px;
+  line-height: 37px;
+  font-weight: 400;
+  letter-spacing: -0.64px;
+  font-style: italic;
+}
+
+.flex-type-hero-sm {
+  font-family: var(--flex-font-sans);
+  font-size: 32px;
+  line-height: 37px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.flex-type-hero-sm-expressive {
+  font-family: var(--flex-font-serif);
+  font-size: 32px;
+  line-height: 37px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.flex-type-hero-sm-expressive-italic {
+  font-family: var(--flex-font-serif);
+  font-size: 32px;
+  line-height: 37px;
+  font-weight: 400;
+  letter-spacing: 0;
+  font-style: italic;
+}
+
+.flex-type-hero-sm-number {
+  font-family: var(--flex-font-mono);
+  font-size: 24px;
+  line-height: 34px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.flex-type-page-title {
+  font-family: var(--flex-font-sans);
+  font-size: 22px;
+  line-height: 34px;
+  font-weight: 700;
+  letter-spacing: -0.44px;
+}
+
+.flex-type-section-title {
+  font-family: var(--flex-font-sans);
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 700;
+  letter-spacing: -0.36px;
+}
+
+.flex-type-title-number {
+  font-family: var(--flex-font-mono);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 500;
+  letter-spacing: -0.4px;
+}
+
+.flex-type-header-sm {
+  font-family: var(--flex-font-sans);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: -0.16px;
+}
+
+.flex-type-headline {
+  font-family: var(--flex-font-serif);
+  font-size: 48px;
+  line-height: 49px;
+  font-weight: 400;
+  letter-spacing: -0.96px;
+}
+
+/* ── Body Semantic Tokens ────────────────────────────────── */
+
+.flex-type-body {
+  font-family: var(--flex-font-sans);
+  font-size: 16px;
+  line-height: 21.6px;
+  font-weight: 400;
+  letter-spacing: -0.16px;
+}
+
+.flex-type-body-md {
+  font-family: var(--flex-font-sans);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: -0.14px;
+}
+
+.flex-type-body-sm {
+  font-family: var(--flex-font-sans);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: -0.12px;
+}
+
+.flex-type-body-xs {
+  font-family: var(--flex-font-sans);
+  font-size: 10px;
+  line-height: 14px;
+  font-weight: 400;
+  letter-spacing: -0.1px;
+}
+
+.flex-type-body-bold {
+  font-family: var(--flex-font-sans);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 700;
+  letter-spacing: -0.16px;
+}
+
+.flex-type-body-md-bold {
+  font-family: var(--flex-font-sans);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 700;
+  letter-spacing: -0.14px;
+}
+
+.flex-type-body-input {
+  font-family: var(--flex-font-sans);
+  font-size: 16px;
+  line-height: 21.6px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.flex-type-body-hyperlink {
+  font-family: var(--flex-font-sans);
+  font-size: 16px;
+  line-height: 21.6px;
+  font-weight: 500;
+  letter-spacing: -0.16px;
+  text-decoration: underline;
+}
+
+.flex-type-body-md-hyperlink {
+  font-family: var(--flex-font-sans);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: -0.14px;
+  text-decoration: underline;
+}
+
+/* ── Label Tokens ────────────────────────────────────────── */
+
+.flex-type-label {
+  font-family: var(--flex-font-sans);
+  font-size: 16px;
+  line-height: 21.6px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.flex-type-label-sm {
+  font-family: var(--flex-font-sans);
+  font-size: 12px;
+  line-height: 16.2px;
+  font-weight: 400;
+  letter-spacing: -0.12px;
+}
+
+.flex-type-label-sm-bold {
+  font-family: var(--flex-font-sans);
+  font-size: 12px;
+  line-height: 16.2px;
+  font-weight: 700;
+  letter-spacing: -0.12px;
+}
+
+.flex-type-label-sm-hyperlink {
+  font-family: var(--flex-font-sans);
+  font-size: 12px;
+  line-height: 16.2px;
+  font-weight: 400;
+  letter-spacing: -0.12px;
+  text-decoration: underline;
+}
+
+/* ── Button Tokens ───────────────────────────────────────── */
+
+.flex-type-button {
+  font-family: var(--flex-font-sans);
+  font-size: 16px;
+  line-height: 21.6px;
+  font-weight: 500;
+  letter-spacing: -0.16px;
+}
+
+.flex-type-button-sm {
+  font-family: var(--flex-font-sans);
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+  letter-spacing: -0.14px;
+}
+
+/* ── Number Tokens ───────────────────────────────────────── */
+
+.flex-type-number {
+  font-family: var(--flex-font-mono);
+  font-size: 16px;
+  line-height: 21.6px;
+  font-weight: 400;
+  letter-spacing: -0.16px;
+}
+
+.flex-type-number-bold {
+  font-family: var(--flex-font-mono);
+  font-size: 16px;
+  line-height: 21.6px;
+  font-weight: 700;
+  letter-spacing: -0.16px;
+}
+
+/* ── Caption & Overline ──────────────────────────────────── */
+
+.flex-type-caption {
+  font-family: var(--flex-font-sans);
+  font-size: 10px;
+  line-height: 13.5px;
+  font-weight: 400;
+  letter-spacing: -0.1px;
+}
+
+.flex-type-caption-hyperlink {
+  font-family: var(--flex-font-sans);
+  font-size: 10px;
+  line-height: 13.5px;
+  font-weight: 400;
+  letter-spacing: -0.1px;
+  text-decoration: underline;
+}
+
+.flex-type-overline {
+  font-family: var(--flex-font-sans);
+  font-size: 10px;
+  line-height: 13.5px;
+  font-weight: 400;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@protoflexo/proto-ui",
+  "version": "0.1.0",
+  "description": "Flex design system components for ProtoFlexo prototypes",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./typography.css": "./dist/typography.css",
+    "./fonts.css": "./dist/fonts.css"
+  },
+  "files": ["dist"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}