@utopia-studio-design/design-system-cli 0.1.0 → 0.3.0

package/templates/components/page-hero.tsx

@@ -1,47 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { cn } from '../../lib/utils'
-import { BrandAction } from './brand-action'
-
-type PageHeroAction = {
-  href: string
-  label: string
-  variant?: 'primary' | 'secondary' | 'ghost'
-}
-
-export function PageHero({
-  actions = [],
-  body,
-  className,
-  eyebrow,
-  panelClassName,
-  title,
-  variant = 'split',
-}: {
-  actions?: PageHeroAction[]
-  body?: ReactNode
-  className?: string
-  eyebrow: string
-  panelClassName?: string
-  title: string
-  variant?: 'split' | 'stacked'
-}) {
-  return (
-    <section className={cn('brand-page-hero', `brand-page-hero--${variant}`, className)}>
-      <div className="brand-page-hero__copy">
-        <p className="brand-page-hero__eyebrow">{eyebrow}</p>
-        <h1 className="m-0 text-[length:var(--type-hero-title)] font-bold leading-none tracking-0">{title}</h1>
-      </div>
-      <div className={cn('brand-page-hero__panel', panelClassName)}>
-        {body ? <p className="text-lg leading-7">{body}</p> : null}
-        {actions.length ? (
-          <div className="brand-page-hero__actions">
-            {actions.map((action) => (
-              <BrandAction key={action.label} {...action} />
-            ))}
-          </div>
-        ) : null}
-      </div>
-    </section>
-  )
-}

package/templates/components/tooltip.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react'
-import { Tooltip as TooltipPrimitive } from 'radix-ui'
-
-import { cn } from '../../lib/utils'
-
-export function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-export function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root {...props} />
-}
-
-export function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger {...props} />
-}
-
-export function TooltipContent({
-  children,
-  className,
-  sideOffset = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        className={cn('utopia-tooltip-content', className)}
-        sideOffset={sideOffset}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="utopia-tooltip-arrow" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}

package/templates/components/topbar.tsx

@@ -1,59 +0,0 @@
-import { Button } from './button'
-
-export type TopbarNavItem = {
-  href: string
-  label: string
-}
-
-export interface TopbarProps {
-  applyHref?: string
-  applyLabel?: string
-  brandHref?: string
-  brandLabel?: string
-  navItems?: TopbarNavItem[]
-  partnerHref?: string
-  partnerLabel?: string
-}
-
-const defaultNavItems: TopbarNavItem[] = [
-  { label: 'Fellows', href: '/fellows' },
-  { label: 'Startups', href: '/portfolio' },
-  { label: 'How We Build', href: '/how-we-build' },
-  { label: 'Team', href: '/team' },
-  { label: 'Resources', href: '/resources' },
-]
-
-export function Topbar({
-  applyHref,
-  applyLabel = 'Apply',
-  brandHref = '/',
-  brandLabel = 'The Utopia Studio',
-  navItems = defaultNavItems,
-  partnerHref,
-  partnerLabel = 'Partner with us',
-}: TopbarProps) {
-  return (
-    <header className="utopia-topbar">
-      <a className="utopia-topbar__brand" href={brandHref}>
-        {brandLabel}
-      </a>
-      <nav aria-label="Primary navigation" className="utopia-topbar__nav">
-        {navItems.map((item) => (
-          <a className="utopia-topbar__link" href={item.href} key={item.href}>
-            {item.label}
-          </a>
-        ))}
-        {partnerHref ? (
-          <Button asChild variant="outline">
-            <a href={partnerHref}>{partnerLabel}</a>
-          </Button>
-        ) : null}
-        {applyHref ? (
-          <Button asChild>
-            <a href={applyHref}>{applyLabel}</a>
-          </Button>
-        ) : null}
-      </nav>
-    </header>
-  )
-}

package/templates/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/templates/styles/styles.css

@@ -1,271 +0,0 @@
-@import './utopia-tokens.css';
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-family: var(--font-sans);
-  font-weight: var(--font-weight-regular);
-  font-synthesis: none;
-  text-rendering: geometricPrecision;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-button,
-a {
-  font: inherit;
-}
-
-.utopia-button {
-  align-items: center;
-  border-radius: 0;
-  display: inline-flex;
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  gap: var(--button-gap);
-  height: var(--button-height);
-  justify-content: center;
-  letter-spacing: var(--button-tracking);
-  padding-inline: var(--button-padding-x);
-  text-transform: uppercase;
-  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
-  white-space: nowrap;
-}
-
-.utopia-button:focus-visible,
-.brand-action:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 2px;
-}
-
-.utopia-button--primary {
-  background: hsl(var(--primary));
-  border: 1px solid hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
-}
-
-.utopia-button--primary:hover {
-  background: var(--brand-brick-hover);
-  border-color: var(--brand-brick-hover);
-}
-
-.utopia-button--destructive {
-  background: hsl(var(--destructive));
-  border: 1px solid hsl(var(--destructive));
-  color: hsl(var(--destructive-foreground));
-}
-
-.utopia-button--destructive:hover {
-  background: var(--brand-brick-hover);
-  border-color: var(--brand-brick-hover);
-}
-
-.utopia-button--secondary {
-  background: hsl(var(--secondary));
-  border: 1px solid hsl(var(--secondary));
-  color: hsl(var(--secondary-foreground));
-}
-
-.utopia-button--outline,
-.utopia-button--ghost {
-  background: transparent;
-  border: 1px solid hsl(var(--input));
-  color: hsl(var(--foreground));
-}
-
-.utopia-button--outline:hover,
-.utopia-button--ghost:hover {
-  border-color: hsl(var(--primary));
-  color: hsl(var(--primary));
-}
-
-.utopia-card {
-  background: hsl(var(--card));
-  border: 1px solid var(--tint-black-20);
-  border-radius: 0;
-  box-shadow: none;
-  color: hsl(var(--card-foreground));
-}
-
-.utopia-icon-button {
-  padding: 0;
-}
-
-.utopia-tooltip-content {
-  background: hsl(var(--foreground));
-  color: hsl(var(--background));
-  font-size: 12px;
-  line-height: 1;
-  padding: 8px 10px;
-  z-index: 50;
-}
-
-.utopia-tooltip-arrow {
-  fill: hsl(var(--foreground));
-}
-
-.utopia-button-group {
-  align-items: center;
-  display: inline-flex;
-}
-
-.utopia-button-group__button {
-  border-right-width: 0;
-}
-
-.utopia-button-group__button:last-child {
-  border-right-width: 1px;
-}
-
-.brand-action {
-  align-items: center;
-  border: 1px solid hsl(var(--input));
-  border-radius: 0;
-  display: inline-flex;
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  gap: var(--button-gap);
-  min-height: var(--button-height);
-  padding-inline: var(--button-padding-x);
-  text-transform: uppercase;
-  letter-spacing: var(--button-tracking);
-  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
-}
-
-.brand-action--primary {
-  background: hsl(var(--primary));
-  border-color: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
-}
-
-.brand-action--secondary,
-.brand-action--ghost {
-  background: transparent;
-  color: hsl(var(--foreground));
-}
-
-.brand-action--secondary:hover,
-.brand-action--ghost:hover {
-  border-color: hsl(var(--primary));
-  color: hsl(var(--primary));
-}
-
-.brand-page-hero {
-  display: grid;
-  gap: clamp(28px, 5vw, 72px);
-  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
-  padding: var(--section-padding-y) var(--section-padding-x);
-}
-
-.brand-page-hero--stacked {
-  grid-template-columns: 1fr;
-}
-
-.brand-page-hero__eyebrow,
-.brand-cta-section__eyebrow,
-.utopia-topbar__link {
-  font-size: var(--fs-eyebrow);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--tracking-eyebrow);
-  text-transform: uppercase;
-}
-
-.brand-page-hero h1,
-.brand-cta-section h2 {
-  font-family: var(--font-display);
-  font-size: var(--type-hero-title);
-  font-weight: var(--font-weight-strong);
-  letter-spacing: 0;
-  line-height: var(--lh-tight);
-  margin: 0;
-}
-
-.brand-page-hero__panel {
-  border-left: 1px solid hsl(var(--foreground) / 0.18);
-  padding-left: clamp(20px, 3vw, 40px);
-}
-
-.brand-page-hero__panel p {
-  font-size: var(--type-hero-description);
-  line-height: var(--lh-body);
-  margin: 0;
-}
-
-.brand-page-hero__actions,
-.brand-cta-section__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 28px;
-}
-
-.brand-cta-section {
-  padding: var(--section-padding-y) var(--section-padding-x);
-}
-
-.brand-cta-section__inner {
-  border-top: 1px solid hsl(var(--foreground) / 0.18);
-  padding-top: clamp(24px, 4vw, 44px);
-}
-
-.utopia-topbar {
-  align-items: center;
-  border-bottom: 1px solid hsl(var(--foreground) / 0.14);
-  display: flex;
-  gap: 24px;
-  min-height: var(--topbar-height);
-  padding-inline: var(--section-padding-x);
-}
-
-.utopia-topbar__brand {
-  font-size: 14px;
-  font-weight: var(--font-weight-strong);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.utopia-topbar__nav {
-  align-items: center;
-  display: flex;
-  gap: 18px;
-  margin-left: auto;
-}
-
-.utopia-topbar__link:hover {
-  color: hsl(var(--primary));
-}
-
-@media (max-width: 760px) {
-  .brand-page-hero {
-    grid-template-columns: 1fr;
-  }
-
-  .brand-page-hero__panel {
-    border-left: 0;
-    border-top: 1px solid hsl(var(--foreground) / 0.18);
-    padding-left: 0;
-    padding-top: 20px;
-  }
-
-  .utopia-topbar {
-    align-items: flex-start;
-    flex-direction: column;
-    padding-block: 18px;
-  }
-
-  .utopia-topbar__nav {
-    flex-wrap: wrap;
-    margin-left: 0;
-  }
-}

package/templates/styles/tokens.css

@@ -1,21 +0,0 @@
-:root {
-  --background: 342 9.1% 21.6%;
-  --foreground: 0 0% 100%;
-  --card: 0 0% 100%;
-  --card-foreground: 342 9.1% 21.6%;
-  --primary: 12 59.5% 50.6%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 0 0% 93.3%;
-  --secondary-foreground: 342 9.1% 21.6%;
-  --border: 0 0% 100% / 0.18;
-  --ring: 12 59.5% 50.6%;
-  --font-sans: 'TWK Lausanne';
-  --font-weight-regular: 350;
-  --font-weight-medium: 500;
-  --font-weight-strong: 700;
-  --radius: 0px;
-  --type-hero-title: clamp(54px, 6.1vw, 112px);
-  --button-height: 44px;
-  --button-font-size: 14px;
-  --button-tracking: 0.06em;
-}

package/templates/tokens.json

@@ -1,41 +0,0 @@
-{
-  "name": "Utopia Studio Design System",
-  "version": "0.1.0",
-  "defaultTheme": "utopia",
-  "themeArchitecture": "Utopia is the default/reference theme. Components must consume semantic roles so other themes can be added without changing component APIs.",
-  "semanticRoles": [
-    "--background",
-    "--foreground",
-    "--card",
-    "--card-foreground",
-    "--primary",
-    "--primary-foreground",
-    "--secondary",
-    "--secondary-foreground",
-    "--muted",
-    "--muted-foreground",
-    "--border",
-    "--input",
-    "--ring",
-    "--radius"
-  ],
-  "color": {
-    "specialBlack": "hsl(342 9.1% 21.6%)",
-    "white": "hsl(0 0% 100%)",
-    "brickRed": "hsl(12 59.5% 50.6%)",
-    "brickHover": "hsl(12 61.4% 44.7%)",
-    "brickPress": "hsl(12 62.1% 38.2%)",
-    "lightGrey": "hsl(0 0% 93.3%)"
-  },
-  "radius": {
-    "base": "0px",
-    "max": "0px",
-    "button": "0px"
-  },
-  "font": {
-    "family": "TWK Lausanne",
-    "regular": 350,
-    "medium": 500,
-    "strong": 700
-  }
-}