@morscherlab/mint-sdk 1.1.0-beta.2 → 1.1.0-beta.4

package/src/__tests__/components/SectionCard.test.ts

@@ -0,0 +1,181 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SectionCard from '../../components/SectionCard.vue'
+
+describe('SectionCard', () => {
+  describe('basic rendering', () => {
+    it('should render container, header, and title when given the required title prop', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__title').text()).toBe('Experiments')
+    })
+
+    it('should render default slot content in the body', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { default: '<p class="body-probe">rows</p>' },
+      })
+      expect(wrapper.find('.mint-section-card__body .body-probe').exists()).toBe(true)
+    })
+  })
+
+  describe('count meta', () => {
+    it('should render the count in the header when provided', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Plugins', count: '10 enabled' },
+      })
+      expect(wrapper.find('.mint-section-card__count').text()).toBe('10 enabled')
+    })
+
+    it('should not render a count element when count is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Plugins' },
+      })
+      expect(wrapper.find('.mint-section-card__count').exists()).toBe(false)
+    })
+
+    it('should accept a numeric count', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Artifacts', count: 4 },
+      })
+      expect(wrapper.find('.mint-section-card__count').text()).toBe('4')
+    })
+  })
+
+  describe('title style variants', () => {
+    it('should apply the uppercase modifier when uppercase is true', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', uppercase: true },
+      })
+      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(true)
+    })
+
+    it('should not apply the uppercase modifier by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Design data' },
+      })
+      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(false)
+    })
+  })
+
+  describe('icon chip', () => {
+    it('should render an icon chip with an SVG path when icon is provided', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__icon-chip path').exists()).toBe(true)
+    })
+
+    it('should render one path per entry when icon is an array of paths', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', icon: ['M4 7v10', 'M4 7c0 2.21'] },
+      })
+      expect(wrapper.findAll('.mint-section-card__icon-chip path')).toHaveLength(2)
+    })
+
+    it('should not render an icon chip when icon is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(false)
+    })
+
+    it('should apply the accent modifier class matching the accent prop', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Projects', icon: 'M3 7v10', accent: 'project' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip--project').exists()).toBe(true)
+    })
+
+    it('should default to the primary accent when accent is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Projects', icon: 'M3 7v10' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip--primary').exists()).toBe(true)
+    })
+  })
+
+  describe('header divider', () => {
+    it('should use the strong divider by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(false)
+    })
+
+    it('should apply the light divider modifier when divider is light', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Design data', divider: 'light' },
+      })
+      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(true)
+    })
+  })
+
+  describe('fill mode', () => {
+    it('should not stretch by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(false)
+    })
+
+    it('should apply the fill modifier when fill is true', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+      })
+      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(true)
+    })
+
+    it('should render the toolbar slot outside the scrolling body', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+        slots: { toolbar: '<div class="toolbar-probe">chips</div>', default: '<p>rows</p>' },
+      })
+      expect(wrapper.find('.mint-section-card__toolbar .toolbar-probe').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__body .toolbar-probe').exists()).toBe(false)
+    })
+
+    it('should not render a toolbar region when the slot is unused', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__toolbar').exists()).toBe(false)
+    })
+
+    it('should keep the header, body and footer structure when filling', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+        slots: { default: '<p>rows</p>', footer: '<span>1 / 3</span>' },
+      })
+      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__body').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__footer').exists()).toBe(true)
+    })
+  })
+
+  describe('slots', () => {
+    it('should render the actions slot at the end of the header', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { actions: '<a class="actions-probe" href="#">All →</a>' },
+      })
+      expect(wrapper.find('.mint-section-card__header .actions-probe').exists()).toBe(true)
+    })
+
+    it('should render the footer strip only when the footer slot is provided', () => {
+      const withFooter = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { footer: '<span class="footer-probe">Showing 1–18 of 42</span>' },
+      })
+      const withoutFooter = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(withFooter.find('.mint-section-card__footer .footer-probe').exists()).toBe(true)
+      expect(withoutFooter.find('.mint-section-card__footer').exists()).toBe(false)
+    })
+  })
+})

package/src/components/SectionCard.story.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import SectionCard from './SectionCard.vue'
+import type { SectionCardAccent, SectionCardDivider } from '../types'
+
+const flaskIcon =
+  'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
+const folderIcon = 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'
+
+const experiments = [
+  { code: 'MM-2026-014', name: '13C glucose tracing — HeLa, 24h', updated: '2h ago' },
+  { code: 'MM-2026-013', name: 'Hypoxia timecourse — passage 6', updated: '5h ago' },
+  { code: 'MM-2026-011', name: 'Glutamine dropout, triplicate', updated: 'yesterday' },
+]
+
+function initPlayground() {
+  return {
+    title: 'Experiments',
+    count: '14 ongoing · 42 total',
+    accent: 'experiment' as SectionCardAccent,
+    uppercase: true,
+    divider: 'strong' as SectionCardDivider,
+    showIcon: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Layout/SectionCard">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SectionCard
+            :title="state.title"
+            :count="state.count || undefined"
+            :icon="state.showIcon ? flaskIcon : undefined"
+            :accent="state.accent"
+            :uppercase="state.uppercase"
+            :divider="state.divider"
+          >
+            <div class="mint-section-card__rows">
+              <a
+                v-for="e in experiments"
+                :key="e.code"
+                href="#"
+                class="mint-section-card__row"
+              >
+                <span style="flex: 1; min-width: 0">
+                  <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
+                  <span style="display: block; font-family: 'Fira Code', monospace; font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+                </span>
+                <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
+              </a>
+            </div>
+          </SectionCard>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.count" title="Count" />
+        <HstCheckbox v-model="state.showIcon" title="Show icon chip" />
+        <HstCheckbox v-model="state.uppercase" title="Uppercase title" />
+        <HstSelect
+          v-model="state.accent"
+          title="Accent"
+          :options="{
+            primary: 'primary',
+            experiment: 'experiment',
+            project: 'project',
+            success: 'success',
+            error: 'error',
+            warning: 'warning',
+            info: 'info',
+          }"
+        />
+        <HstSelect
+          v-model="state.divider"
+          title="Divider"
+          :options="{ strong: 'strong', light: 'light' }"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Home category card">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SectionCard
+          title="Projects"
+          count="6 active · 9 total"
+          :icon="folderIcon"
+          accent="project"
+          uppercase
+        >
+          <template #actions>
+            <a href="#" style="font-size: 0.75rem; font-weight: 500; color: var(--color-primary-hover)">All →</a>
+          </template>
+          <div class="mint-section-card__rows">
+            <a href="#" class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Hypoxia metabolic rewiring</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">12 experiments</span>
+            </a>
+            <a href="#" class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Serine one-carbon flux</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">7 experiments</span>
+            </a>
+          </div>
+        </SectionCard>
+      </div>
+    </Variant>
+
+    <Variant title="Detail card with footer">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SectionCard title="Analysis artifacts" :count="4" divider="light">
+          <div class="mint-section-card__rows">
+            <div class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">isotopologue_matrix.csv</span>
+              <span style="font-size: 0.71875rem; color: var(--text-secondary)">DRP</span>
+            </div>
+            <div class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">natural_abundance_corrected.parquet</span>
+              <span style="font-size: 0.71875rem; color: var(--text-secondary)">DRP</span>
+            </div>
+          </div>
+          <template #footer>
+            <span style="font-size: 0.71875rem; color: var(--text-muted)">Showing 1–2 of 4</span>
+            <span style="font-size: 0.71875rem; color: var(--text-secondary)">1 / 2</span>
+          </template>
+        </SectionCard>
+      </div>
+    </Variant>
+
+    <Variant title="Fill with pinned toolbar">
+      <div style="padding: 2rem; height: 420px; display: flex;">
+        <SectionCard title="All experiments" :count="42" divider="light" fill>
+          <template #toolbar>
+            <div style="display: flex; gap: 0.5rem; padding: 0.6875rem 1rem; border-bottom: 1px solid var(--border-color)">
+              <span style="font-size: 0.78125rem; color: var(--text-secondary)">Toolbar stays put while the rows scroll</span>
+            </div>
+          </template>
+          <div class="mint-section-card__rows">
+            <div v-for="n in 20" :key="n" class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">Row {{ n }}</span>
+              <span style="font-family: 'Fira Code', monospace; font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
+            </div>
+          </div>
+          <template #footer>
+            <span style="font-size: 0.71875rem; color: var(--text-muted)">Showing 1–20 of 42</span>
+            <span style="font-size: 0.71875rem; color: var(--text-secondary)">1 / 3</span>
+          </template>
+        </SectionCard>
+      </div>
+    </Variant>
+
+    <Variant title="No icon, plain title">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SectionCard title="Design data" count="96 samples · 4 timepoints" divider="light">
+          <div style="padding: 1rem; font-size: 0.8125rem; color: var(--text-secondary)">
+            Card body content sits directly on the card surface — no nested card.
+          </div>
+        </SectionCard>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SectionCard.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+/** One-card page region from the MINT 1.1 card system: 12px radius, the
+ * single --card-shadow token, a header strip (icon chip, title, mono count,
+ * actions), and hairline-separated content — no card-in-card. */
+import { computed } from 'vue'
+import type { SectionCardAccent, SectionCardDivider } from '../types'
+
+interface Props {
+  title: string
+  /** Monospace meta shown next to the title, e.g. "14 ongoing · 42 total". */
+  count?: string | number
+  /** SVG path(s) for the 22px icon chip; omit to render no chip. */
+  icon?: string | string[]
+  /** Tint of the icon chip. */
+  accent?: SectionCardAccent
+  /** Uppercase category heading (home cards) vs plain heading (detail cards). */
+  uppercase?: boolean
+  /** Header hairline: 'strong' = --border-color, 'light' = --border-light. */
+  divider?: SectionCardDivider
+  /**
+   * Stretch to fill the height its parent offers, scrolling the body and
+   * pinning the header and footer. Requires a parent that gives the card a
+   * definite height (a flex or grid track).
+   */
+  fill?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: undefined,
+  icon: undefined,
+  accent: 'primary',
+  uppercase: false,
+  divider: 'strong',
+  fill: false,
+})
+
+const iconPaths = computed(() =>
+  props.icon === undefined ? [] : Array.isArray(props.icon) ? props.icon : [props.icon],
+)
+
+const headerClasses = computed(() => [
+  'mint-section-card__header',
+  props.divider === 'light' ? 'mint-section-card__header--divider-light' : '',
+])
+
+const titleClasses = computed(() => [
+  'mint-section-card__title',
+  props.uppercase ? 'mint-section-card__title--uppercase' : '',
+])
+
+const cardClasses = computed(() => [
+  'mint-section-card',
+  props.fill ? 'mint-section-card--fill' : '',
+])
+</script>
+
+<template>
+  <section :class="cardClasses">
+    <div :class="headerClasses">
+      <span
+        v-if="iconPaths.length"
+        :class="['mint-section-card__icon-chip', `mint-section-card__icon-chip--${accent}`]"
+      >
+        <svg
+          class="mint-section-card__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path v-for="(d, i) in iconPaths" :key="i" :d="d" />
+        </svg>
+      </span>
+      <h2 :class="titleClasses">{{ title }}</h2>
+      <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
+      <div class="mint-section-card__spacer"></div>
+      <slot name="actions" />
+    </div>
+    <!-- Controls belong to the card's chrome, so they sit outside the body and
+         stay put while the body scrolls. -->
+    <div v-if="$slots.toolbar" class="mint-section-card__toolbar">
+      <slot name="toolbar" />
+    </div>
+    <div class="mint-section-card__body">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="mint-section-card__footer">
+      <slot name="footer" />
+    </div>
+  </section>
+</template>
+
+<style>
+@import '../styles/components/section-card.css';
+</style>

package/src/components/index.ts

@@ -126,6 +126,7 @@ export { default as DateTimePicker } from './DateTimePicker.vue'
 export { default as TimeRangeInput } from './TimeRangeInput.vue'
 export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
 export { default as ResourceCard } from './ResourceCard.vue'
+export { default as SectionCard } from './SectionCard.vue'
 
 // Experiment / analysis components
 export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'

package/src/styles/components/section-card.css

@@ -0,0 +1,161 @@
+/* SectionCard — the MINT 1.1 one-card system.
+ *
+ * One card per page region: 12px radius, one shadow token (--card-shadow),
+ * a single header strip, and hairline-separated regions inside — never a
+ * card nested in a card.
+ */
+
+.mint-section-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
+}
+
+/* Fill the height the parent offers: the body takes the slack and scrolls,
+ * so the header and footer stay pinned to the card's edges. */
+.mint-section-card--fill {
+  flex: 1;
+  min-height: 0;
+}
+
+.mint-section-card--fill .mint-section-card__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.mint-section-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.6875rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.mint-section-card__header--divider-light {
+  border-bottom-color: var(--border-light);
+}
+
+.mint-section-card__icon-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 6px;
+}
+
+.mint-section-card__icon {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+
+.mint-section-card__icon-chip--primary {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.mint-section-card__icon-chip--experiment {
+  background: var(--color-experiment-soft);
+  color: var(--color-experiment);
+}
+
+.mint-section-card__icon-chip--project {
+  background: var(--color-project-soft);
+  color: var(--color-project);
+}
+
+.mint-section-card__icon-chip--success {
+  background: var(--mint-success-bg);
+  color: var(--mint-success);
+}
+
+.mint-section-card__icon-chip--error {
+  background: var(--mint-error-bg);
+  color: var(--mint-error);
+}
+
+.mint-section-card__icon-chip--warning {
+  background: var(--mint-warning-bg);
+  color: var(--mint-warning);
+}
+
+.mint-section-card__icon-chip--info {
+  background: var(--mint-info-bg);
+  color: var(--mint-info);
+}
+
+.mint-section-card__title {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.mint-section-card__title--uppercase {
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+.mint-section-card__count {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+
+.mint-section-card__spacer {
+  flex: 1;
+}
+
+.mint-section-card__toolbar {
+  flex-shrink: 0;
+}
+
+.mint-section-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+/* Hairline row helpers — regions inside a card separate with 1px lines,
+ * rendered by a 1px gap over a hairline-colored track. */
+.mint-section-card__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--border-light);
+}
+
+.mint-section-card__row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5625rem 1rem;
+  background: var(--bg-secondary);
+  transition: background-color var(--mint-transition);
+}
+
+a.mint-section-card__row,
+button.mint-section-card__row {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+a.mint-section-card__row:hover,
+button.mint-section-card__row:hover {
+  background: var(--bg-primary);
+}

package/src/styles/index.css

@@ -28,6 +28,7 @@
 @import './components/plate-map-editor.css';
 @import './components/radio-group.css';
 @import './components/sample-legend.css';
+@import './components/section-card.css';
 @import './components/select.css';
 @import './components/skeleton.css';
 @import './components/slider.css';

package/src/styles/variables.css

@@ -36,6 +36,18 @@
   --color-cta-hover: #EA580C;
   --color-purple: #8B5CF6;
 
+  /* Entity accent colors — experiments (cyan) and projects (sky), from the
+     MINT 1.1 card system. -soft backs icon chips and pills, -border outlines
+     pills that sit on a card surface. */
+  --color-experiment: #06B6D4;
+  --color-experiment-hover: #0891B2;
+  --color-experiment-soft: rgba(6, 182, 212, 0.12);
+  --color-experiment-border: rgba(6, 182, 212, 0.3);
+  --color-project: #0EA5E9;
+  --color-project-hover: #0284C7;
+  --color-project-soft: rgba(14, 165, 233, 0.12);
+  --color-project-border: rgba(14, 165, 233, 0.32);
+
   /* MINT brand mark — used for browser theme-color, marketing chrome, app icon background */
   --mint-brand: #7BD0B5;
   --mint-brand-hover: #5FB89A;
@@ -51,6 +63,8 @@
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  /* The MINT 1.1 card system uses exactly one shadow for every card. */
+  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
 
   /* Border radius */
   --radius-sm: 0.25rem;
@@ -148,6 +162,17 @@ html.dark {
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
+  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.24), 0 1px 3px 0 rgb(0 0 0 / 0.32);
+
+  /* Entity accent colors - Dark mode */
+  --color-experiment: #22D3EE;
+  --color-experiment-hover: #67E8F9;
+  --color-experiment-soft: rgba(34, 211, 238, 0.16);
+  --color-experiment-border: rgba(34, 211, 238, 0.36);
+  --color-project: #38BDF8;
+  --color-project-hover: #7DD3FC;
+  --color-project-soft: rgba(56, 189, 248, 0.16);
+  --color-project-border: rgba(56, 189, 248, 0.38);
 
   /* Semantic colors - Dark mode */
   --mint-success-bg: rgba(16, 185, 129, 0.15);

package/src/tailwind.preset.ts

@@ -18,6 +18,10 @@ const mintPreset = {
           'warning-hover': 'var(--mint-warning-hover)',
           brand: 'var(--mint-brand)',
           'brand-hover': 'var(--mint-brand-hover)',
+          experiment: 'var(--color-experiment)',
+          'experiment-hover': 'var(--color-experiment-hover)',
+          project: 'var(--color-project)',
+          'project-hover': 'var(--color-project-hover)',
         },
         bg: {
           primary: 'var(--mint-bg-primary)',
@@ -50,6 +54,7 @@ const mintPreset = {
         mint: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
         'mint-md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
         'mint-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        'mint-card': 'var(--card-shadow)',
       },
       transitionDuration: {
         mint: '150ms',