@rdna/radiants 0.1.0

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@rdna/radiants",
+  "version": "0.1.0",
+  "description": "Radiants theme package for DNA - retro pixel aesthetic",
+  "main": "./index.css",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "exports": {
+    ".": "./index.css",
+    "./tokens": "./tokens.css",
+    "./dark": "./dark.css",
+    "./animations": "./animations.css",
+    "./base": "./base.css",
+    "./typography": "./typography.css",
+    "./fonts": "./fonts.css",
+    "./components/core": {
+      "types": "./dist/components/core/index.d.mts",
+      "import": "./dist/components/core/index.mjs",
+      "default": "./dist/components/core/index.mjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.mts",
+      "import": "./dist/hooks/index.mjs",
+      "default": "./dist/hooks/index.mjs"
+    },
+    "./remotion": {
+      "types": "./dist/remotion/index.d.mts",
+      "import": "./dist/remotion/index.mjs",
+      "default": "./dist/remotion/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "*.css",
+    "fonts/Joystix.woff2",
+    "fonts/PixelCode*.woff2",
+    "assets/",
+    "dna.config.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Radiants-DAO/DNA.git",
+    "directory": "packages/radiants"
+  },
+  "homepage": "https://github.com/Radiants-DAO/DNA/tree/master/packages/radiants",
+  "bugs": {
+    "url": "https://github.com/Radiants-DAO/DNA/issues"
+  },
+  "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "remotion": "^4.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "remotion": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "dna",
+    "theme",
+    "design-system",
+    "retro",
+    "pixel",
+    "tailwind",
+    "react",
+    "components"
+  ],
+  "license": "GPL-3.0",
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "next": "16.0.10",
+    "remotion": "^4.0.409",
+    "tsup": "^8.5.1"
+  }
+}

package/tokens.css

@@ -0,0 +1,202 @@
+/* =============================================================================
+   @dna/radiants - Design Tokens
+   Semantic token layer mapping rad_os brand colors to DNA-compliant tokens
+   ============================================================================= */
+
+@theme inline {
+  /* ============================================
+     BRAND COLORS (internal reference only)
+     These are private tokens - use semantic tokens in components
+     ============================================ */
+
+  --color-cream: #FEF8E2;
+  --color-black: #0F0E0C;
+  --color-sun-yellow: #FCE184;
+  --color-sky-blue: #95BAD2;
+  --color-warm-cloud: #FEF8E2;
+  --color-sunset-fuzz: #FCC383;
+  --color-sun-red: #FF6B63;
+  --color-green: #CEF5CA;
+  --color-white: #FFFFFF;
+
+  /* System Colors (internal) */
+  --color-success-green: #22C55E;
+  --color-success-green-dark: #87BB82;
+  --color-warning-yellow: var(--color-sun-yellow);
+  --color-warning-yellow-dark: #BE9D2B;
+  --color-error-red: var(--color-sun-red);
+  --color-error-red-dark: #9E433E;
+  --color-focus-state: var(--color-sky-blue);
+}
+
+@theme {
+  /* ============================================
+     SEMANTIC TOKENS - Surface
+     Background colors for containers and sections
+     ============================================ */
+
+  --color-surface-primary: var(--color-warm-cloud);
+  --color-surface-secondary: var(--color-black);
+  --color-surface-tertiary: var(--color-sunset-fuzz);
+  --color-surface-elevated: var(--color-white);
+  --color-surface-muted: var(--color-cream);
+
+  /* ============================================
+     SEMANTIC TOKENS - Content
+     Text and foreground colors
+     ============================================ */
+
+  --color-content-primary: var(--color-black);
+  --color-content-secondary: var(--color-black);  /* Use with opacity modifier: text-content-secondary/70 */
+  --color-content-inverted: var(--color-warm-cloud);
+  --color-content-muted: rgba(15, 14, 12, 0.6);
+  --color-content-link: var(--color-sky-blue);
+
+  /* ============================================
+     SEMANTIC TOKENS - Edge
+     Borders, outlines, and focus indicators
+     ============================================ */
+
+  --color-edge-primary: var(--color-black);
+  --color-edge-muted: rgba(15, 14, 12, 0.2);
+  --color-edge-focus: var(--color-sun-yellow);
+
+  /* ============================================
+     SEMANTIC TOKENS - Action
+     Interactive element colors (buttons, links)
+     ============================================ */
+
+  --color-action-primary: var(--color-sun-yellow);
+  --color-action-secondary: var(--color-black);
+  --color-action-destructive: var(--color-sun-red);
+  --color-action-accent: var(--color-sunset-fuzz);
+
+  /* ============================================
+     SEMANTIC TOKENS - Status
+     Feedback and state indicators
+     ============================================ */
+
+  --color-status-success: var(--color-green);
+  --color-status-warning: var(--color-sun-yellow);
+  --color-status-error: var(--color-sun-red);
+  --color-status-info: var(--color-sky-blue);
+
+  /* ============================================
+     BORDER RADIUS
+     Rounded corner scale for the pixel aesthetic
+     ============================================ */
+
+  --radius-none: 0;
+  --radius-xs: 0.125rem;   /* 2px */
+  --radius-sm: 0.25rem;    /* 4px */
+  --radius-md: 0.5rem;     /* 8px */
+  --radius-lg: 1rem;       /* 16px */
+  --radius-full: 9999px;
+
+  /* ============================================
+     BOX SHADOWS
+     Retro lift effect - sharp pixel-art style shadows
+     ============================================ */
+
+  --shadow-btn: 0 1px 0 0 var(--color-black);
+  --shadow-btn-hover: 0 3px 0 0 var(--color-black);
+  --shadow-card: 2px 2px 0 0 var(--color-black);
+  --shadow-card-lg: 4px 4px 0 0 var(--color-black);
+  --shadow-inner: inset 0 0 0 1px var(--color-black);
+
+  /* ============================================
+     TYPOGRAPHY SCALE
+     Font sizes for the pixel-art aesthetic
+     ============================================ */
+
+  --font-size-2xs: 0.5rem;     /* 8px - tiny labels */
+  --font-size-xs: 0.75rem;     /* 12px - buttons, small UI */
+  --font-size-sm: 0.875rem;    /* 14px - body text */
+  --font-size-base: 0.875rem;  /* 14px - body text */
+  --font-size-lg: 1rem;        /* 16px - large body */
+  --font-size-xl: 1.25rem;     /* 20px - headings */
+  --font-size-2xl: 1.5rem;     /* 24px - headings */
+  --font-size-3xl: 2rem;       /* 32px - display */
+
+  /* ============================================
+     SPACING SCALE
+     Consistent spacing for layout and components
+     ============================================ */
+
+  --spacing-xs: 0.25rem;       /* 4px */
+  --spacing-sm: 0.5rem;        /* 8px */
+  --spacing-md: 1rem;          /* 16px */
+  --spacing-lg: 1.5rem;        /* 24px */
+  --spacing-xl: 2rem;          /* 32px */
+  --spacing-2xl: 3rem;         /* 48px */
+
+  /* ============================================
+     MOTION - Duration
+     Animation timing scale (max 300ms per DNA spec)
+     ============================================ */
+
+  --duration-instant: 0ms;      /* Reduced motion fallback */
+  --duration-fast: 100ms;       /* Hover states */
+  --duration-base: 150ms;       /* Standard transitions */
+  --duration-moderate: 200ms;   /* Medium complexity */
+  --duration-slow: 300ms;       /* Complex animations */
+
+  /* ============================================
+     MOTION - Easing
+     Ease-out only per DNA spec (simple, predictable)
+     ============================================ */
+
+  --easing-default: cubic-bezier(0, 0, 0.2, 1);  /* All standard transitions */
+  --easing-out: cubic-bezier(0, 0, 0.2, 1);      /* Entering elements */
+  --easing-in: cubic-bezier(0.4, 0, 1, 1);       /* Exiting elements */
+
+  /* ============================================
+     BREAKPOINTS
+     Responsive design breakpoints
+     ============================================ */
+
+  --breakpoint-xs: 360px;    /* Small phones */
+  --breakpoint-sm: 640px;    /* Large phones */
+  --breakpoint-md: 768px;    /* Tablets */
+  --breakpoint-lg: 1024px;   /* Laptops */
+  --breakpoint-xl: 1280px;   /* Desktops */
+  --breakpoint-2xl: 1536px;  /* Large screens */
+
+  /* ============================================
+     ACCESSIBILITY - Focus
+     Focus ring styling for keyboard navigation
+     ============================================ */
+
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: var(--color-edge-focus);
+
+  /* ============================================
+     ACCESSIBILITY - Touch Targets
+     Minimum sizes for touch interactions (WCAG 2.2)
+     ============================================ */
+
+  --touch-target-min: 44px;   /* WCAG AA minimum */
+  --touch-target-comfortable: 48px;
+}
+
+/* =============================================================================
+   REDUCED MOTION SUPPORT
+   Respects user preference for reduced motion
+   ============================================================================= */
+
+:root {
+  --duration-scalar: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-scalar: 0;
+
+    /* Override all durations to instant */
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-moderate: 0ms;
+    --duration-slow: 0ms;
+  }
+}

package/typography.css

@@ -0,0 +1,175 @@
+/* =============================================================================
+   @dna/radiants - Typography
+   Base element styles using semantic tokens
+   Source: rad_os/app/globals.css @layer base
+   ============================================================================= */
+
+@layer base {
+  /* ============================================
+     HEADINGS
+     All headings use font-heading (Joystix)
+     ============================================ */
+
+  h1 {
+    @apply text-4xl font-heading font-bold leading-tight text-content-primary;
+  }
+
+  h2 {
+    @apply text-3xl font-heading font-normal leading-tight text-content-primary;
+  }
+
+  h3 {
+    @apply text-2xl font-heading font-semibold leading-snug text-content-primary;
+  }
+
+  h4 {
+    @apply text-xl font-heading font-medium leading-snug text-content-primary;
+  }
+
+  h5 {
+    @apply text-lg font-heading font-medium leading-normal text-content-primary;
+  }
+
+  h6 {
+    @apply text-base font-heading font-medium leading-normal text-content-primary;
+  }
+
+  /* ============================================
+     BODY TEXT
+     Uses font-sans (Mondwest) for readability
+     ============================================ */
+
+  p {
+    @apply text-base font-sans font-normal leading-relaxed text-content-primary;
+  }
+
+  /* ============================================
+     LINKS
+     Uses font-sans with link color
+     ============================================ */
+
+  a {
+    @apply text-base font-sans font-normal leading-normal text-content-link underline hover:opacity-80;
+  }
+
+  /* ============================================
+     LISTS
+     ============================================ */
+
+  ul {
+    @apply text-base font-heading font-normal leading-relaxed text-content-primary pl-6;
+  }
+
+  ol {
+    @apply text-base font-heading font-normal leading-relaxed text-content-primary pl-6;
+  }
+
+  li {
+    @apply text-base font-sans font-normal leading-relaxed text-content-primary mb-2;
+  }
+
+  /* ============================================
+     INLINE TEXT ELEMENTS
+     ============================================ */
+
+  small {
+    @apply text-sm font-heading font-normal leading-normal text-content-primary;
+  }
+
+  strong {
+    @apply text-base font-heading font-bold leading-normal text-content-primary;
+  }
+
+  em {
+    @apply text-base font-heading font-normal leading-normal text-content-primary italic;
+  }
+
+  /* ============================================
+     CODE ELEMENTS
+     Uses font-mono (PixelCode)
+     ============================================ */
+
+  code {
+    @apply text-sm font-mono font-normal leading-normal text-content-primary bg-surface-secondary/10 px-1 py-0.5 rounded-sm;
+  }
+
+  pre {
+    @apply text-sm font-mono font-normal leading-relaxed text-content-primary bg-surface-secondary/10 p-4 rounded-sm overflow-x-auto;
+  }
+
+  kbd {
+    @apply text-xs font-mono font-normal leading-normal text-content-inverted bg-surface-secondary px-1 py-0.5 rounded-sm;
+  }
+
+  /* ============================================
+     HIGHLIGHTS AND QUOTES
+     ============================================ */
+
+  mark {
+    @apply text-base font-heading font-normal leading-normal text-content-primary bg-action-primary;
+  }
+
+  blockquote {
+    @apply text-base font-heading font-normal leading-relaxed text-content-primary border-l-4 border-edge-primary pl-4 italic;
+  }
+
+  cite {
+    @apply text-sm font-heading font-normal leading-normal text-content-primary italic;
+  }
+
+  q {
+    @apply text-base font-heading font-normal leading-normal text-content-primary italic;
+  }
+
+  /* ============================================
+     DEFINITIONS AND ABBREVIATIONS
+     ============================================ */
+
+  abbr {
+    @apply text-base font-heading font-normal leading-normal text-content-primary underline decoration-dotted;
+  }
+
+  dfn {
+    @apply text-base font-heading font-normal leading-normal text-content-primary italic;
+  }
+
+  /* ============================================
+     SUBSCRIPT AND SUPERSCRIPT
+     ============================================ */
+
+  sub {
+    @apply text-xs font-heading font-normal leading-none text-content-primary;
+  }
+
+  sup {
+    @apply text-xs font-heading font-normal leading-none text-content-primary;
+  }
+
+  /* ============================================
+     EDITS
+     ============================================ */
+
+  del {
+    @apply text-base font-heading font-normal leading-normal text-content-primary line-through;
+  }
+
+  ins {
+    @apply text-base font-heading font-normal leading-normal text-content-primary underline;
+  }
+
+  /* ============================================
+     LABELS AND CAPTIONS
+     ============================================ */
+
+  caption {
+    @apply text-xs font-heading font-normal leading-normal text-content-primary;
+  }
+
+  label {
+    @apply text-xs font-heading font-medium leading-normal text-content-primary;
+  }
+
+  figcaption {
+    @apply text-xs font-heading font-normal leading-normal text-content-primary;
+  }
+}