@syscore/ui-library 1.3.7 → 1.5.0

package/client/global.css

@@ -758,49 +758,49 @@ layer(base);
  * These variables are used by Tailwind CSS and should be expressed as HSL values.
  */
 :root {
-    --background: 0 0% 100%;
-    --foreground: 230 15% 12%;
+  --background: 0 0% 100%;
+  --foreground: 230 15% 12%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 230 15% 12%;
+  --card: 0 0% 100%;
+  --card-foreground: 230 15% 12%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 230 15% 12%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 230 15% 12%;
 
-    --primary: 190 84% 29%;
-    --primary-foreground: 210 40% 98%;
+  --primary: 190 84% 29%;
+  --primary-foreground: 210 40% 98%;
 
-    --secondary: 252 100% 97%;
-    --secondary-foreground: 255 35% 20%;
+  --secondary: 252 100% 97%;
+  --secondary-foreground: 255 35% 20%;
 
-    --muted: 240 33% 98%;
-    --muted-foreground: 230 12% 40%;
+  --muted: 240 33% 98%;
+  --muted-foreground: 230 12% 40%;
 
-    --accent: 255 85% 55%;
-    --accent-foreground: 210 40% 98%;
+  --accent: 255 85% 55%;
+  --accent-foreground: 210 40% 98%;
 
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 210 40% 98%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 210 40% 98%;
 
-    --border: 240 13% 92%;
-    --input: 240 13% 92%;
-    --ring: 255 85% 55%;
+  --border: 240 13% 92%;
+  --input: 240 13% 92%;
+  --ring: 255 85% 55%;
 
-    --radius: 0.625rem;
+  --radius: 0.625rem;
 
-    /* Utility colors */
-    --white: 0 0% 100%;
-    --black: 0 0% 0%;
-    --coolGrey-400: 225 7% 35%;
+  /* Utility colors */
+  --white: 0 0% 100%;
+  --black: 0 0% 0%;
+  --coolGrey-400: 225 7% 35%;
 
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 .dark {
@@ -1287,7 +1287,9 @@ body {
   background-color: var(--color-white, #fff);
   padding: 1.5rem;
   gap: 1.5rem;
-  transition: transform 200ms ease-in-out, border-color 200ms ease-in-out;
+  transition:
+    transform 200ms ease-in-out,
+    border-color 200ms ease-in-out;
   will-change: transform;
 }
 
@@ -6054,7 +6056,7 @@ body {
 }
 
 .navigation-overlay[data-open="false"] {
-  transform: translateY(calc(-100% + 56px));
+  transform: translateY(calc(-100% + 64px));
   background-color: rgba(0, 0, 0, 0.16);
 }
 
@@ -6066,11 +6068,16 @@ body {
   padding-left: 2rem;
   padding-right: 2rem;
   display: flex;
-  height: 3.5rem;
+  height: 4rem;
   align-items: center;
   justify-content: space-between;
 }
 
+.navigation--strategy {
+  background-color: var(--color-gray-50, #f9f9fa);
+  border-bottom: 1px solid var(--color-gray-100, #eff1f2);
+}
+
 .navigation-logo-container {
   display: flex;
   height: 100%;
@@ -6155,10 +6162,16 @@ body {
   justify-content: center;
   border-radius: 9999px;
   transition: background-color 200ms;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.navigation-account-link--strategy {
+  background-color: var(--color-white, #fff);
+  border: 1px solid var(--color-gray-100, #eff1f2);
 }
 
 .navigation-account-link[data-open="false"] {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: rgba(255, 255, 255, 0.12);
 }
 
 .navigation-account-link[data-open="true"] {
@@ -6760,3 +6773,152 @@ body {
   text-decoration-thickness: 0.75px;
   text-underline-offset: 2px;
 }
+
+/* Standard Table Styles */
+.standard-table {
+  border: 1px solid var(--color-blue-200, #cbe0f1);
+  border-radius: var(--radius-lg, 12px);
+  overflow: hidden;
+}
+
+.standard-table-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-blue-50, #fbfdfe);
+}
+
+.standard-table-header__title {
+  /* Uses body-large utility */
+  color: var(--color-cyan-800, #0f748a);
+  font-weight: 600;
+}
+
+.standard-table-row {
+  border-bottom: 1px solid var(--color-blue-200, #cbe0f1);
+}
+
+.standard-table-row:last-child {
+  border-bottom: 0;
+}
+
+.standard-table-row-header {
+  height: 5rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background-color: var(--color-blue-50, #fbfdfe);
+  transition: background-color 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.standard-table-row-header:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+.standard-table-trigger {
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.standard-table-trigger:hover {
+  background-color: rgba(214, 244, 251, 0.5); /* cyan-100/50 */
+}
+
+.standard-table-content {
+  overflow: hidden;
+  background-color: var(--color-white, #fff);
+  border-top: 1px solid var(--color-blue-200, #cbe0f1);
+}
+
+.standard-table-content__inner {
+  display: flex;
+  flex-direction: column;
+}
+
+.standard-table-content__inner > * {
+  border-bottom: 1px solid var(--color-blue-200, #cbe0f1);
+}
+
+.standard-table-content__inner > *:last-child {
+  border-bottom: 0;
+}
+
+.standard-table-list-row {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  transition: background-color 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.standard-table-list-row--default {
+  background-color: var(--color-blue-50, #fbfdfe);
+}
+
+.standard-table-list-row--default:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+.standard-table-list-row--nested {
+  background-color: var(--color-white, #fff);
+}
+
+.standard-table-list-row--nested:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+.standard-table-list-row__title {
+  font-weight: 500;
+  flex: 1;
+  text-align: left;
+}
+
+.standard-table-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* PageHeader Styles */
+.page-header {
+  margin-bottom: 1.5rem;
+}
+
+.page-header-top-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  min-height: 52px;
+}
+
+.page-header-left-content {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.page-header-title {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  min-height: 32px;
+}
+
+.page-header-title:last-child {
+  margin-bottom: 0;
+}
+
+.page-header-description {
+  /* Uses body-large utility */
+  max-width: 680px;
+}

package/client/lib/concept-colors.ts

@@ -0,0 +1,115 @@
+export interface ConceptColor {
+  solid: string;
+  light: string;
+  border: string;
+  prefix: string;
+  contrast?: string;
+}
+
+/**
+ * Concept colors matching Figma design.
+ * Keys match URL slugs for direct lookup.
+ */
+export const conceptColors = {
+  mind: {
+    solid: "#0a5161",
+    light: "rgba(10,81,97,0.08)",
+    border: "rgba(10,81,97,0.16)",
+    prefix: "M",
+  },
+  community: {
+    solid: "#0f748a",
+    light: "rgba(15,116,138,0.12)",
+    border: "rgba(15,116,138,0.24)",
+    prefix: "C",
+  },
+  movement: {
+    solid: "#149ebd",
+    light: "rgba(20,158,189,0.12)",
+    border: "rgba(20,158,189,0.24)",
+    prefix: "V",
+  },
+  water: {
+    solid: "#39c9ea",
+    light: "rgba(57,201,234,0.12)",
+    border: "rgba(57,201,234,0.24)",
+    prefix: "W",
+  },
+  air: {
+    solid: "#87dff2",
+    light: "rgba(135,223,242,0.12)",
+    border: "rgba(135,223,242,0.24)",
+    prefix: "A",
+    contrast: "#7CCDDF",
+  },
+  light: {
+    solid: "#8aefdb",
+    light: "rgba(138,239,219,0.12)",
+    border: "rgba(138,239,219,0.24)",
+    prefix: "L",
+    contrast: "#7FDCC9",
+  },
+  "thermal-comfort": {
+    solid: "#3eddbf",
+    light: "rgba(62,221,191,0.12)",
+    border: "rgba(62,221,191,0.24)",
+    prefix: "T",
+    contrast: "#39CBB0",
+  },
+  nourishment: {
+    solid: "#17aa8d",
+    light: "rgba(23,170,141,0.12)",
+    border: "rgba(23,170,141,0.24)",
+    prefix: "N",
+  },
+  sound: {
+    solid: "#0c705c",
+    light: "rgba(12,112,92,0.12)",
+    border: "rgba(12,112,92,0.24)",
+    prefix: "S",
+  },
+  materials: {
+    solid: "#0a4f41",
+    light: "rgba(10,79,65,0.08)",
+    border: "rgba(10,79,65,0.16)",
+    prefix: "X",
+  },
+  innovation: {
+    solid: "#52545D",
+    light: "rgba(82,84,93,0.08)",
+    border: "rgba(82,84,93,0.16)",
+    prefix: "I",
+  },
+} as const;
+
+export type ConceptType = keyof typeof conceptColors;
+
+/**
+ * Get concept color by slug.
+ * @example getConceptColor("thermal-comfort") → { solid: "#3eddbf", ... }
+ */
+export function getConceptColor(slug: string): ConceptColor {
+  return conceptColors[slug as ConceptType] ?? conceptColors.mind;
+}
+
+/**
+ * Get concept color from a strategy code (e.g. "C7.4" → community colors).
+ * @example getConceptColorsFromCode("C7.4") → { solid: "#0f748a", ... }
+ */
+export function getConceptColorsFromCode(code: string): ConceptColor {
+  const prefixMap: Record<string, ConceptType> = {
+    M: "mind",
+    C: "community",
+    V: "movement",
+    W: "water",
+    A: "air",
+    L: "light",
+    T: "thermal-comfort",
+    N: "nourishment",
+    S: "sound",
+    X: "materials",
+    I: "innovation",
+  };
+  const slug = prefixMap[code.charAt(0).toUpperCase()] || "community";
+  return conceptColors[slug];
+}

package/client/lib/concept-icons.ts

@@ -0,0 +1,45 @@
+/**
+ * Centralized concept icon mapping
+ *
+ * Maps concept slugs to their icon components.
+ * Used when fetching concept data from API - the API returns string IDs,
+ * and this map resolves them to actual React components.
+ */
+
+import {
+  IconConceptMind,
+  IconConceptCommunity,
+  IconConceptMovement,
+  IconConceptWater,
+  IconConceptAir,
+  IconConceptLight,
+  IconConceptThermalComfort,
+  IconConceptNourishment,
+  IconConceptSound,
+  IconConceptMaterials,
+  IconConceptInnovation,
+} from "@/components/icons/ConceptIcons";
+import { type ConceptSlug } from "@/lib/mock-data/explore-data";
+
+export interface ConceptIconProps {
+  className?: string;
+  active?: boolean;
+  outlined?: boolean;
+}
+
+export const CONCEPT_ICONS: Record<
+  ConceptSlug,
+  React.ComponentType<ConceptIconProps>
+> = {
+  air: IconConceptAir,
+  water: IconConceptWater,
+  nourishment: IconConceptNourishment,
+  light: IconConceptLight,
+  movement: IconConceptMovement,
+  "thermal-comfort": IconConceptThermalComfort,
+  sound: IconConceptSound,
+  materials: IconConceptMaterials,
+  community: IconConceptCommunity,
+  mind: IconConceptMind,
+  innovation: IconConceptInnovation,
+};