@ossy/design-system 3.25.0 → 3.27.0

package/src/line-chart/LineChart.jsx

@@ -10,6 +10,7 @@ function ChartAxisLabel ({ x, y, viewWidth, viewHeight, children }) {
       as="span"
       variant="small"
       data-chart-axis-label=""
+      leading="none"
       style={{
         position: 'absolute',
         left: `${(x / viewWidth) * 100}%`,
@@ -17,7 +18,6 @@ function ChartAxisLabel ({ x, y, viewWidth, viewHeight, children }) {
         transform: 'translate(-50%, -100%)',
         margin: 0,
         opacity: 0.75,
-        lineHeight: 1,
         whiteSpace: 'nowrap',
         pointerEvents: 'none',
       }}
@@ -27,17 +27,62 @@ function ChartAxisLabel ({ x, y, viewWidth, viewHeight, children }) {
   )
 }
 
+function legendEntries (series) {
+  const seen = new Set()
+  const entries = []
+  for (const entry of series) {
+    const label = entry.legendLabel || entry.label
+    if (seen.has(label)) continue
+    seen.add(label)
+    entries.push({ label, color: entry.color })
+  }
+  return entries
+}
+
+function ColorSwatch ({ color }) {
+  return (
+    <span
+      aria-hidden
+      style={{
+        width: 10,
+        height: 10,
+        borderRadius: 999,
+        background: color,
+        display: 'inline-block',
+        flexShrink: 0,
+      }}
+    />
+  )
+}
+
+function StrokeSample ({ dashed }) {
+  return (
+    <span
+      aria-hidden
+      style={{
+        width: 18,
+        display: 'inline-block',
+        flexShrink: 0,
+        height: 0,
+        borderTop: dashed ? '2px dashed currentColor' : '2px solid currentColor',
+      }}
+    />
+  )
+}
+
 /**
  * Multi-series line chart. Months share one money scale unless a series sets
- * `scale: 'hours'`. Dashed series render as a dashed stroke and legend mark.
+ * `scale: 'hours'`. Dashed series render as a dashed stroke.
+ * `legendStyle` puts color swatches on the left and the forecast/actual stroke key on the right.
  *
  * @param {object} props
  * @param {Array<Record<string, unknown>>} props.months
- * @param {Array<{ key: string, label: string, color: string, dashed?: boolean, scale?: string }>} props.series
+ * @param {Array<{ key: string, label: string, legendLabel?: string, color: string, dashed?: boolean, scale?: string }>} props.series
  * @param {string} [props.unit] Translation key shown beside the legend.
  * @param {string} [props.empty] Translation key shown when there is nothing to plot.
+ * @param {{ forecast: string, actual: string }} [props.legendStyle] Translation keys for the stroke key.
  */
-export function LineChart ({ months, series, unit, empty }) {
+export function LineChart ({ months, series, unit, empty, legendStyle }) {
   const { language, t } = useLocale()
   const chart = useMemo(
     () => buildKpiChartLayout({ months, series, language }),
@@ -56,33 +101,46 @@ export function LineChart ({ months, series, unit, empty }) {
   return (
     <View gap="s" inset="m" data-line-chart="" style={{ width: '100%' }}>
       <View layout="row-wrap" gap="m" style={{ alignItems: 'center', justifyContent: 'space-between' }}>
-      <View layout="row-wrap" gap="m" style={{ alignItems: 'center' }}>
-        {series.map((entry) => (
-          <View key={entry.key} layout="row" gap="s" style={{ alignItems: 'center' }}>
-            <span
-              aria-hidden
-              style={{
-                width: 10,
-                height: 10,
-                borderRadius: 2,
-                background: entry.color,
-                display: 'inline-block',
-                flexShrink: 0,
-                ...(entry.dashed
-                  ? {
-                      background: 'transparent',
-                      borderTop: `2px dashed ${entry.color}`,
-                      height: 0,
-                      borderRadius: 0,
-                    }
-                  : null),
-              }}
-            />
-            <Text variant="small" style={{ marginBottom: 0 }} text={entry.label} />
+        <View layout="row-wrap" gap="m" style={{ alignItems: 'center' }}>
+          {(legendStyle ? legendEntries(series) : series).map((entry) => (
+            <View key={entry.label || entry.key} layout="row" gap="s" style={{ alignItems: 'center' }}>
+              {legendStyle ? <ColorSwatch color={entry.color} /> : (
+                <span
+                  aria-hidden
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 2,
+                    background: entry.color,
+                    display: 'inline-block',
+                    flexShrink: 0,
+                    ...(entry.dashed
+                      ? {
+                          background: 'transparent',
+                          borderTop: `2px dashed ${entry.color}`,
+                          height: 0,
+                          borderRadius: 0,
+                        }
+                      : null),
+                  }}
+                />
+              )}
+              <Text variant="small" style={{ marginBottom: 0 }} text={entry.label} />
+            </View>
+          ))}
+        </View>
+        {legendStyle ? (
+          <View layout="row" gap="m" style={{ alignItems: 'center' }} data-line-chart-style="">
+            <View layout="row" gap="s" style={{ alignItems: 'center' }}>
+              <StrokeSample dashed />
+              <Text variant="small" style={{ marginBottom: 0 }} text={legendStyle.forecast} />
+            </View>
+            <View layout="row" gap="s" style={{ alignItems: 'center' }}>
+              <StrokeSample />
+              <Text variant="small" style={{ marginBottom: 0 }} text={legendStyle.actual} />
+            </View>
           </View>
-        ))}
-      </View>
-        {unit ? (
+        ) : unit ? (
           <Text
             as="span"
             variant="small"
@@ -101,11 +159,11 @@ export function LineChart ({ months, series, unit, empty }) {
                 key={`tick-size-${tick.value}`}
                 as="span"
                 variant="small"
+                leading="none"
                 style={{
                   gridArea: '1 / 1',
                   visibility: 'hidden',
                   margin: 0,
-                  lineHeight: 1,
                   whiteSpace: 'nowrap',
                 }}
               >
@@ -119,6 +177,7 @@ export function LineChart ({ months, series, unit, empty }) {
               as="span"
               variant="small"
               data-line-chart-tick={tick.label}
+              leading="none"
               style={{
                 position: 'absolute',
                 right: 0,
@@ -126,7 +185,6 @@ export function LineChart ({ months, series, unit, empty }) {
                 transform: 'translateY(-50%)',
                 margin: 0,
                 opacity: 0.75,
-                lineHeight: 1,
                 whiteSpace: 'nowrap',
                 pointerEvents: 'none',
               }}

package/src/line-chart/LineChart.stories.jsx

@@ -24,9 +24,9 @@ const months = Array.from({ length: 12 }, (_, index) => ({
 }))
 
 const series = [
-  { key: 'projectedIncome', label: 'Forecast income', color: 'var(--color-info, hsl(199, 89%, 43%))', dashed: true },
-  { key: 'monthlyCostOfEmployees', label: 'Salary cost', color: 'var(--color-warning, hsl(38, 92%, 50%))' },
-  { key: 'revenue', label: 'Revenue', color: 'var(--color-accent, hsl(167, 89%, 43%))' },
+  { key: 'projectedIncome', label: 'Forecast income', color: 'var(--surface-info, hsl(199, 89%, 43%))', dashed: true },
+  { key: 'monthlyCostOfEmployees', label: 'Salary cost', color: 'var(--surface-warning, hsl(38, 92%, 50%))' },
+  { key: 'revenue', label: 'Revenue', color: 'var(--surface-accent, hsl(167, 89%, 43%))' },
 ]
 
 export const Default = () => (

package/src/list/List.jsx

@@ -63,7 +63,7 @@ export function ListItem ({
         height: comfortable ? undefined : '56px',
         minHeight: comfortable ? '72px' : undefined,
         flexShrink: 0,
-        borderBottom: '1px solid var(--separator-primary)',
+        borderBottom: '1px solid var(--separator)',
         padding: comfortable ? 'var(--space-s) 0' : undefined,
         paddingRight: trailing ? undefined : 'var(--space-m)',
       }}

package/src/panel/Panel.jsx

@@ -52,19 +52,19 @@ export function Panel ({
       <style href="@ossy/design-system/panel" precedence="high">
       {`
         [data-panel][data-panel-status="info"] {
-          --panel-status-color: var(--color-info, hsl(199, 89%, 43%));
+          --panel-status-color: var(--surface-info, hsl(199, 89%, 43%));
         }
 
         [data-panel][data-panel-status="success"] {
-          --panel-status-color: var(--color-accent, hsl(167, 89%, 43%));
+          --panel-status-color: var(--surface-accent, hsl(167, 89%, 43%));
         }
 
         [data-panel][data-panel-status="warning"] {
-          --panel-status-color: var(--color-warning, hsl(38, 92%, 50%));
+          --panel-status-color: var(--surface-warning, hsl(38, 92%, 50%));
         }
 
         [data-panel][data-panel-status="error"] {
-          --panel-status-color: var(--color-danger, hsl(0, 84%, 60%));
+          --panel-status-color: var(--surface-danger, hsl(0, 84%, 60%));
         }
 
         [data-panel][data-panel-status] > [data-stack] > [data-panel-header] {
@@ -102,8 +102,8 @@ function PanelTitle ({ title }) {
       variant="small"
       as="h2"
       text={title}
+      weight="bold"
       style={{
-        fontWeight: 'bold',
         minWidth: 0,
         overflow: 'hidden',
         textOverflow: 'ellipsis',

package/src/panel/Panel.stories.jsx

@@ -17,7 +17,7 @@ export default {
 }
 
 const title = (
-  <Text variant="small" as="h2" style={{ fontWeight: 'bold' }}>Forecast</Text>
+  <Text variant="small" as="h2" weight="bold">Forecast</Text>
 )
 
 export const Default = () => (

package/src/profile/Profile.jsx

@@ -44,7 +44,7 @@ export const Profile = ({
         scrollbar-width: none;
         overflow-y: auto;
         box-sizing: border-box;
-        border: 0.5px solid var(--separator-primary);
+        border: 0.5px solid var(--separator);
       }
 
       [data-profile]::-webkit-scrollbar {

package/src/separator/Separator.jsx

@@ -5,6 +5,9 @@ export const Separator = ({
   as: Element = 'div',
   ...props
 }) => {
+  const borderColor = variant === 'accent' || variant === 'contrast'
+    ? `var(--surface-${variant})`
+    : 'var(--separator)'
 
   return (
     <>
@@ -19,7 +22,7 @@ export const Separator = ({
       <style href={`@ossy/design-system/separator/${variant}`} precedence='high'>
       {`
         [data-separator-variant="${variant}"] {
-          border-color: var(--separator-${variant}, var(--color-accent, currentColor));
+          border-color: ${borderColor};
         }
       `}
       </style>

package/src/table/Table.jsx

@@ -43,7 +43,7 @@ export const Table = ({
             //   <Stack.Item>
             //     <div
             //       className="hover:bg-96 inset-stretch-m cursor-pointer sans-serif d-flex align-center justify-between"
-            //       style={{ borderBottom: '1px solid var(--separator-primary)' }}
+            //       style={{ borderBottom: '1px solid var(--separator)' }}
             //       onClick={() => setSelectedResourceId(resource.id)}
             //     >
             //       <div className="d-flex align-center">

package/src/text/Text.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useLocale } from '../locale/index.js'
+import { patternCss, patternOverrideStyle } from '../view/resolveVariant.js'
 
 export const Text = ({
   as: Element = 'p',
@@ -7,6 +8,12 @@ export const Text = ({
   maxWidth = 'full',
   text,
   params,
+  font,
+  family,
+  weight,
+  leading,
+  tracking,
+  style,
   children,
   ...props
 }) => {
@@ -24,41 +31,28 @@ export const Text = ({
       </style>
       <style href="@ossy/design-system/text" precedence='high'>
       {`
+        ${patternCss}
         [data-text] {
           display: block;
           box-sizing: border-box;
-          color: var(--color);
-          font-family: var(--font-family);
-          font-size: var(--font-size);
-          font-weight: var(--font-weight);
-          line-height: var(--line-height);
-          letter-spacing: var(--letter-spacing);
-          text-shadow: var(--text-shadow);
           margin: 0;
-          margin-bottom: var(--margin-bottom);
-        }
-
-        [data-text]:last-of-type {
-          marginBottom: 0
-        }
-      `}
-      </style>
-      <style href={`@ossy/design-system/text/${variant}`} precedence='high'>
-      {`
-        [data-text-variant="${variant}"] {
-          --max-width: var(--text-${variant}-max-width, var(--text-default-max-width, 100%));
-          --color: var(--text-${variant}-color, var(--foreground, inherit));
-          --font-family: var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif));
-          --font-size: var(--text-${variant}-font-size, var(--text-default-font-size, 2rem));
-          --font-weight: var(--text-${variant}-font-weight, var(--text-default-font-weight, 400));
-          --line-height: var(--text-${variant}-line-height, var(--text-default-line-height, 1.6));
-          --margin-bottom: var(--text-${variant}-margin-bottom, var(--text-default-margin-bottom, 0));
-          --letter-spacing: var(--text-${variant}-letter-spacing, var(--text-default-letter-spacing));
-          --text-shadow: var(--text-${variant}-text-shadow, var(--text-default-text-shadow, none));
         }
       `}
       </style>
-      <Element data-text data-text-variant={variant} data-max-width={maxWidth} children={content} {...props} />
+      <Element
+        data-text
+        data-text-variant={variant}
+        data-variant={`text-${variant}`}
+        data-font={font}
+        data-family={family}
+        data-weight={weight}
+        data-leading={leading}
+        data-tracking={tracking}
+        data-max-width={maxWidth}
+        style={{ ...patternOverrideStyle({ font, family, weight, leading, tracking }), ...style }}
+        {...props}
+        children={content}
+      />
     </>
   )
 }

package/src/theme/Theme.jsx

@@ -59,13 +59,14 @@ export const Theme = ({
     : `@ossy/design-system/theme/${activeTheme}`
 
   return (
-    <ThemeContext.Provider value={{ activeTheme, themes: Object.keys(_themes), setTheme, }}>
+    <ThemeContext.Provider value={{ activeTheme, themes: Object.keys(_themes), setTheme, theme: activeThemeValues }}>
       <style href="@ossy/design-system/reset" precedence='high'>
         {`*, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; }`}
       </style>
       <style href="@ossy/design-system/surface" precedence='high'>
       {`
-        [data-surface] {
+        [data-surface],
+        [data-variant] {
           background: var(--background, transparent);
           color: var(--foreground);
           fill: var(--foreground);
@@ -78,62 +79,6 @@ export const Theme = ({
           --backdropFilter: none;
         }
 
-        /*
-         * Hero atmosphere — motion ShortformField / CalmMesh air over tealGlow:
-         * cover base + screen mesh (meshStrength 0.72) + soft blur + film grain.
-         */
-        [data-surface="hero"] {
-          position: relative;
-          isolation: isolate;
-          overflow: hidden;
-        }
-
-        [data-surface="hero"]::before {
-          content: '';
-          position: absolute;
-          inset: -28%;
-          z-index: 0;
-          pointer-events: none;
-          opacity: 0.72;
-          mix-blend-mode: screen;
-          filter: blur(10px);
-          background:
-            radial-gradient(ellipse 55% 50% at 28% 32%, hsla(205, 92%, 58%, 0.95) 0%, transparent 62%),
-            radial-gradient(ellipse 48% 55% at 72% 28%, hsla(220, 45%, 18%, 0.72) 0%, transparent 58%),
-            radial-gradient(ellipse 50% 45% at 58% 78%, hsla(22, 88%, 56%, 0.88) 0%, transparent 60%),
-            radial-gradient(ellipse 42% 40% at 18% 72%, hsla(28, 70%, 78%, 0.9) 0%, transparent 55%);
-          animation: ossy-hero-mesh-breath 28s ease-in-out infinite;
-        }
-
-        [data-surface="hero"]::after {
-          content: '';
-          position: absolute;
-          inset: 0;
-          z-index: 0;
-          pointer-events: none;
-          opacity: 0.35;
-          mix-blend-mode: overlay;
-          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-          background-size: 160px 160px;
-        }
-
-        [data-surface="hero"] > *:not([data-hero-mesh]):not([data-hero-grain]):not([data-pkg-hero-mesh]):not([data-pkg-hero-grain]):not([data-calm-mesh]):not([data-calm-grain]):not([data-calm-portal]) {
-          position: relative;
-          z-index: 1;
-        }
-
-        @keyframes ossy-hero-mesh-breath {
-          0% { transform: scale(0.96) translate(0%, 0%); }
-          50% { transform: scale(1.05) translate(1.5%, -1.2%); }
-          100% { transform: scale(0.96) translate(-1%, 0.8%); }
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          [data-surface="hero"]::before {
-            animation: none;
-          }
-        }
-
         [data-selectable] {
           cursor: pointer;
         }