tio-design-make-experiments 0.0.1

package/src/styles/header.css

@@ -0,0 +1,48 @@
+/* ═══════════════════════════════════════════════════════
+   Header — CSS component classes
+   ═══════════════════════════════════════════════════════ */
+
+@layer components {
+  /* ─── Header bar container ─── */
+  .header-bar {
+    @apply bg-card flex items-center justify-between relative;
+    height: 70px;
+    @apply border-b border-secondary;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  /* ─── Header inner wrapper (max-width content area) ─── */
+  .header-wrapper {
+    @apply flex items-center justify-between w-full;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+
+  /* ─── Header left section (logo + nav) ─── */
+  .header-left {
+    @apply flex-1 min-h-px min-w-px;
+  }
+
+  .header-left-inner {
+    @apply flex items-center size-full;
+  }
+
+  .header-nav {
+    @apply flex gap-[5px] items-center w-full;
+    padding-left: 32px;
+  }
+
+  /* ─── Header right section ─── */
+  .header-right {
+    @apply flex items-center shrink-0;
+  }
+
+  /* ─── Profile avatar ─── */
+  .header-avatar {
+    @apply overflow-clip rounded-full size-10 shrink-0;
+  }
+
+  .header-avatar img {
+    @apply object-cover size-full;
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,7 @@
+@import './fonts.css';
+@import './tailwind.css';
+@import './theme.css';
+@import './header.css';
+@import './navlinks.css';
+@import './forms.css';
+@import './popover.css';

package/src/styles/navlinks.css

@@ -0,0 +1,112 @@
+/* ═══════════════════════════════════════════════════════
+   Navlinks & Tablinks — CSS component classes
+   All hover states use --link-hover / --link-hover-foreground.
+   ═══════════════════════════════════════════════════════ */
+
+@layer components {
+  /* ═══ HEADER NAVLINKS ═══ */
+
+  /* ─── Navlink base (transparent pill, foreground text) ─── */
+  .navlink {
+    @apply inline-flex items-center gap-2 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply text-foreground rounded-full relative;
+    height: 2.125rem; /* 34px */
+    padding-left: 15px;
+    padding-right: 15px;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:scale-[0.98];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-card;
+  }
+
+  /* ─── Navlink active (with bottom marker) ─── */
+  .navlink-active {
+    @apply inline-flex items-center gap-2 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply text-foreground rounded-full relative;
+    height: 2.125rem; /* 34px */
+    padding-left: 15px;
+    padding-right: 15px;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:scale-[0.98];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-card;
+  }
+
+  .navlink-active::after {
+    content: '';
+    @apply absolute bottom-0 h-0.5 bg-link-hover;
+    left: 15px;
+    right: 15px;
+  }
+
+  /* ─── Navlink highlight (filled primary CTA) ─── */
+  .navlink-highlight {
+    @apply inline-flex items-center gap-2 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply bg-primary text-primary-foreground rounded-full relative;
+    height: 2.125rem; /* 34px */
+    padding-left: 15px;
+    padding-right: 15px;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:bg-link-hover/90 active:text-link-hover-foreground active:scale-[0.98];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-card;
+  }
+
+  /* ═══ TAB NAVLINKS ═══ */
+
+  /* ─── Tablink base (muted text, light weight, larger font) ─── */
+  .tablink {
+    @apply inline-flex items-center cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_Pro',sans-serif];
+    @apply text-muted-foreground rounded-full relative;
+    font-weight: 300;
+    height: 2.125rem; /* 34px */
+    padding-left: 15px;
+    padding-right: 15px;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:scale-[0.98];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-card;
+  }
+
+  /* ─── Tablink active (white text + bottom marker) ─── */
+  .tablink-active {
+    @apply inline-flex items-center cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_Pro',sans-serif];
+    @apply text-foreground rounded-full relative;
+    font-weight: 300;
+    height: 2.125rem; /* 34px */
+    padding-left: 15px;
+    padding-right: 15px;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:scale-[0.98];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-card;
+  }
+
+  .tablink-active::after {
+    content: '';
+    @apply absolute bottom-0 h-0.5 bg-link-hover;
+    left: 15px;
+    right: 15px;
+  }
+
+  /* ─── Metrics item (icon + count) ─── */
+  .tab-metric {
+    @apply inline-flex items-center gap-2.5 shrink-0;
+  }
+
+  .tab-metric-value {
+    @apply font-['Source_Sans_Pro',sans-serif] text-foreground;
+    font-size: 14px;
+    line-height: 16px;
+  }
+}

package/src/styles/popover.css

@@ -0,0 +1,48 @@
+/* ═══════════════════════════════════════════════════════
+   Popover Menu — CSS component classes
+   Dropdown/popover menus and their action items.
+   ═══════════════════════════════════════════════════════ */
+
+@layer components {
+  /* ─── Popover menu container ─── */
+  .popover-menu {
+    @apply bg-secondary flex flex-col items-start;
+    padding: 5px;
+    border-radius: 10px;
+    width: 240px;
+    box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  /* ─── Popover button / action item ─── */
+  .popover-btn {
+    @apply bg-secondary relative w-full cursor-pointer
+           font-['Source_Sans_3',sans-serif] text-foreground uppercase
+           transition-all duration-200;
+    min-height: 40px;
+    border-radius: 10px;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+  }
+
+  .popover-btn-inner {
+    @apply flex items-center w-full;
+    min-height: inherit;
+    padding: 10px 20px;
+  }
+
+  .popover-btn-text {
+    @apply flex-1 font-['Source_Sans_3',sans-serif] uppercase;
+    font-size: 16px;
+    line-height: 14px;
+  }
+
+  /* Last item in a stacked menu (rounded only at bottom) */
+  .popover-btn-last {
+    @apply bg-secondary relative w-full cursor-pointer
+           font-['Source_Sans_3',sans-serif] text-foreground uppercase
+           transition-all duration-200;
+    min-height: 40px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+  }
+}

package/src/styles/tailwind.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss' source(none);
+@source '../**/*.{js,ts,jsx,tsx}';
+
+@import 'tw-animate-css';

package/src/styles/theme.css

@@ -0,0 +1,312 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-size: 16px;
+  --background: #181818;
+  --foreground: #ffffff;
+  --card: #1d1d1d;
+  --card-foreground: #ffffff;
+  --popover: #1d1d1d;
+  --popover-foreground: #ffffff;
+  --primary: #78eac1;
+  --primary-foreground: #1d1d1d;
+  --secondary: #262626;
+  --secondary-foreground: #ffffff;
+  --muted: #2e2e2e;
+  --muted-foreground: #888888;
+  --accent: #7954ff;
+  --accent-foreground: #ffffff;
+  --destructive: #FF3131;
+  --destructive-foreground: #ffffff;
+  --border: #2e2e2e;
+  --input: transparent;
+  --input-background: #262626;
+  --switch-background: #2e2e2e;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: #7954ff;
+  --link-hover: #7954ff;
+  --link-hover-foreground: #ffffff;
+  --chart-1: #33BA9E;
+  --chart-2: #FF3131;
+  --chart-3: #F48D21;
+  --chart-4: #7954ff;
+  --chart-5: #78eac1;
+  --radius: 0.625rem;
+  --sidebar: #1d1d1d;
+  --sidebar-foreground: #ffffff;
+  --sidebar-primary: #78eac1;
+  --sidebar-primary-foreground: #1d1d1d;
+  --sidebar-accent: #262626;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #2e2e2e;
+  --sidebar-ring: #7954ff;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  --color-link-hover: var(--link-hover);
+  --color-link-hover-foreground: var(--link-hover-foreground);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /**
+  * Default typography styles for HTML elements (h1-h4, p, label, button, input).
+  * These are in @layer base, so Tailwind utility classes (like text-sm, text-lg) automatically override them.
+  */
+
+  html {
+    font-size: var(--font-size);
+  }
+
+  h1 {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  h2 {
+    font-size: var(--text-xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  h3 {
+    font-size: var(--text-lg);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  h4 {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  label {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  button {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  input {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+}
+
+@layer components {
+  /* ─── Shared button base ─── */
+  .btn {
+    @apply inline-flex items-center justify-center gap-2.5 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+  }
+
+  /* ─── Primary Filled ─── */
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2.5 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply bg-primary text-primary-foreground h-10 px-5 rounded-full;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:bg-link-hover/90 active:text-link-hover-foreground active:scale-[0.98];
+    @apply disabled:opacity-50;
+  }
+
+  /* ─── Outline Primary (teal border) ─── */
+  .btn-outline-primary {
+    @apply inline-flex items-center justify-center gap-2.5 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply border border-primary text-primary h-10 px-5 rounded-full;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground hover:border-transparent;
+    @apply active:bg-link-hover/90 active:text-link-hover-foreground
+           active:border-transparent active:scale-[0.98];
+    @apply disabled:opacity-50;
+  }
+
+  /* ─── Outline Muted (subtle border, rounded-lg) ─── */
+  .btn-outline-muted {
+    @apply inline-flex items-center justify-center gap-2.5 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply border border-border text-primary h-10 px-5 rounded-lg;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground hover:border-transparent;
+    @apply active:bg-link-hover/90 active:text-link-hover-foreground
+           active:border-transparent active:scale-[0.98];
+    @apply disabled:opacity-50;
+  }
+
+  /* ─── Icon Circle ─── */
+  .btn-icon {
+    @apply inline-flex items-center justify-center gap-2.5 cursor-pointer
+           transition-all duration-200 outline-none
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply border border-muted-foreground size-10 rounded-full;
+    @apply hover:bg-link-hover hover:border-transparent;
+    @apply active:bg-link-hover/90 active:border-transparent active:scale-95;
+    @apply disabled:opacity-40;
+  }
+
+  /* ─── Ghost (no chrome) ─── */
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-2.5 cursor-pointer
+           transition-all duration-200 outline-none
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply size-10 rounded-md text-muted-foreground;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:bg-link-hover/90 active:scale-95;
+    @apply disabled:opacity-30;
+  }
+
+  /* ─── Navigation CTA (compact pill) ─── */
+  .btn-nav-cta {
+    @apply inline-flex items-center justify-center gap-2.5 cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply bg-primary text-primary-foreground px-4 rounded-full;
+    height: 2.125rem; /* 34px */
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:bg-link-hover/90 active:text-link-hover-foreground active:scale-[0.98];
+    @apply disabled:opacity-50;
+  }
+
+  /* ─── XL Outline (large action card) ─── */
+  .btn-xl-outline {
+    @apply inline-flex flex-col items-center justify-center cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply border border-border text-primary px-8 py-8 rounded-lg;
+    @apply hover:bg-secondary/30 hover:border-primary;
+    @apply active:bg-secondary/50 active:border-primary active:scale-[0.98];
+    @apply disabled:opacity-50;
+  }
+
+  /* ─── XL Filled (large action card) ─── */
+  .btn-xl-filled {
+    @apply inline-flex flex-col items-center justify-center cursor-pointer
+           transition-all duration-200 outline-none uppercase
+           font-['Source_Sans_3',sans-serif];
+    @apply focus-visible:ring-2 focus-visible:ring-ring
+           focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    @apply disabled:cursor-not-allowed disabled:pointer-events-none;
+    @apply bg-primary text-primary-foreground px-8 py-8 rounded-lg;
+    @apply hover:bg-link-hover hover:text-link-hover-foreground;
+    @apply active:bg-link-hover/90 active:text-link-hover-foreground active:scale-[0.98];
+    @apply disabled:opacity-50;
+  }
+}

package/vite.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, type Plugin } from 'vite'
+import path from 'path'
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+
+function figmaAssetPlaceholder(): Plugin {
+  const PREFIX = 'figma:asset/'
+  const placeholder = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' rx='20' fill='%23444'/%3E%3C/svg%3E"
+  return {
+    name: 'figma-asset-placeholder',
+    enforce: 'pre',
+    resolveId(source) {
+      if (source.startsWith(PREFIX)) return source
+    },
+    load(id) {
+      if (id.startsWith(PREFIX)) return `export default ${JSON.stringify(placeholder)}`
+    },
+  }
+}
+
+export default defineConfig({
+  plugins: [
+    figmaAssetPlaceholder(),
+    // The React and Tailwind plugins are both required for Make, even if
+    // Tailwind is not being actively used – do not remove them
+    react(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      // Alias @ to the src directory
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+
+  // File types to support raw imports. Never add .css, .tsx, or .ts files to this.
+  assetsInclude: ['**/*.svg', '**/*.csv'],
+})