@ossy/design-system 3.0.9 → 3.3.0

package/build/voicemail-o-DJgxxuT0.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var C=C=>r.createElement("svg",e({},C,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11 12C11 12.3506 10.9398 12.6872 10.8293 13H13.1707C13.0602 12.6872 13 12.3506 13 12C13 10.3431 14.3431 9 16 9C17.6569 9 19 10.3431 19 12C19 13.6569 17.6569 15 16 15H8C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9C9.65685 9 11 10.3431 11 12ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12ZM17 12C17 12.5523 16.5523 13 16 13C15.4477 13 15 12.5523 15 12C15 11.4477 15.4477 11 16 11C16.5523 11 17 11.4477 17 12Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",fill:"currentColor"}));export{C as default};

package/build/voicemail-r-CXZP9sJ1.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var C=C=>r.createElement("svg",e({},C,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.5 12C11.5 12.3506 11.4398 12.6872 11.3293 13H13.6707C13.5602 12.6872 13.5 12.3506 13.5 12C13.5 10.3431 14.8431 9 16.5 9C18.1569 9 19.5 10.3431 19.5 12C19.5 13.6569 18.1569 15 16.5 15H8.5C6.84315 15 5.5 13.6569 5.5 12C5.5 10.3431 6.84315 9 8.5 9C10.1569 9 11.5 10.3431 11.5 12ZM9.5 12C9.5 12.5523 9.05228 13 8.5 13C7.94772 13 7.5 12.5523 7.5 12C7.5 11.4477 7.94772 11 8.5 11C9.05228 11 9.5 11.4477 9.5 12ZM17.5 12C17.5 12.5523 17.0523 13 16.5 13C15.9477 13 15.5 12.5523 15.5 12C15.5 11.4477 15.9477 11 16.5 11C17.0523 11 17.5 11.4477 17.5 12Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M1.5 8C1.5 6.34315 2.84315 5 4.5 5H19.5C21.1569 5 22.5 6.34315 22.5 8V16C22.5 17.6569 21.1569 19 19.5 19H4.5C2.84315 19 1.5 17.6569 1.5 16V8ZM4.5 7H19.5C20.0523 7 20.5 7.44772 20.5 8V16C20.5 16.5523 20.0523 17 19.5 17H4.5C3.94772 17 3.5 16.5523 3.5 16V8C3.5 7.44772 3.94772 7 4.5 7Z",fill:"currentColor"}));export{C as default};

package/build/volume-Cky5oHR5.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M24 12C24 16.4183 20.4183 20 16 20V18C19.3137 18 22 15.3137 22 12C22 8.68629 19.3137 6 16 6V4C20.4183 4 24 7.58172 24 12Z",fill:"currentColor"}),r.createElement("path",{d:"M20 12C20 14.2091 18.2091 16 16 16V14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10V8C18.2091 8 20 9.79086 20 12Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M9 16L15 20V4L9 8H5C2.79086 8 1 9.79086 1 12C1 14.2091 2.79086 16 5 16H9ZM5 10H9L13 7.5V16.5L9 14H5C3.89543 14 3 13.1046 3 12C3 10.8954 3.89543 10 5 10Z",fill:"currentColor"}));export{t as default};

package/build/webcam-Cy3M7N_B.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M13 10C13 10.5523 12.5523 11 12 11C11.4477 11 11 10.5523 11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13 14.9C15.2822 14.4367 17 12.419 17 10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10C7 12.419 8.71776 14.4367 11 14.9V17H7V19H17V17H13V14.9ZM12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z",fill:"currentColor"}));export{t as default};

package/build/website-BCuPOwQE.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M14 7C13.4477 7 13 7.44772 13 8V16C13 16.5523 13.4477 17 14 17H18C18.5523 17 19 16.5523 19 16V8C19 7.44772 18.5523 7 18 7H14ZM17 9H15V15H17V9Z",fill:"currentColor"}),r.createElement("path",{d:"M6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9H10C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7H6Z",fill:"currentColor"}),r.createElement("path",{d:"M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H10C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11H6Z",fill:"currentColor"}),r.createElement("path",{d:"M5 16C5 15.4477 5.44772 15 6 15H10C10.5523 15 11 15.4477 11 16C11 16.5523 10.5523 17 10 17H6C5.44772 17 5 16.5523 5 16Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M4 3C2.34315 3 1 4.34315 1 6V18C1 19.6569 2.34315 21 4 21H20C21.6569 21 23 19.6569 23 18V6C23 4.34315 21.6569 3 20 3H4ZM20 5H4C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V6C21 5.44772 20.5523 5 20 5Z",fill:"currentColor"}));export{t as default};

package/build/windows-Dple80xd.js

@@ -0,0 +1 @@
+import{_ as t}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var e=e=>r.createElement("svg",t({},e,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M3 5.5485L10.1954 4.58174V11.6106L3.00672 11.6651L3 5.5485ZM10.1954 12.3909V19.4957L3.00571 18.5105L3.0053 12.3909H10.1954ZM11.1134 4.45599L20.9977 3V11.5334L11.1134 11.6106V4.45599ZM21 12.505L20.9977 21L11.1134 19.6466V12.505H21Z",fill:"currentColor"}));export{e as default};

package/build/work-alt-6lKOSng9.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M17 7C17 5.34315 15.6569 4 14 4H10C8.34315 4 7 5.34315 7 7H6C4.34315 7 3 8.34315 3 10V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10C21 8.34315 19.6569 7 18 7H17ZM14 6H10C9.44772 6 9 6.44772 9 7H15C15 6.44772 14.5523 6 14 6ZM6 9H18C18.5523 9 19 9.44772 19 10V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V10C5 9.44772 5.44772 9 6 9Z",fill:"currentColor"}));export{t as default};

package/build/yinyang-CqAkCeE1.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.2091 20 16 18.2091 16 16C16 13.7909 14.2091 12 12 12ZM14 8C14 9.10457 13.1046 10 12 10C10.8954 10 10 9.10457 10 8C10 6.89543 10.8954 6 12 6C13.1046 6 14 6.89543 14 8Z",fill:"currentColor"}));export{t as default};

package/build/youtube-BIbDcVtF.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M5 7H19C19.5523 7 20 7.44771 20 8V16C20 16.5523 19.5523 17 19 17H5C4.44772 17 4 16.5523 4 16V8C4 7.44772 4.44772 7 5 7ZM2 8C2 6.34315 3.34315 5 5 5H19C20.6569 5 22 6.34315 22 8V16C22 17.6569 20.6569 19 19 19H5C3.34315 19 2 17.6569 2 16V8ZM10 9L14 12L10 15V9Z",fill:"currentColor"}));export{t as default};

package/build/zoom-in-C393qYDp.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M15.3431 15.2426C17.6863 12.8995 17.6863 9.1005 15.3431 6.75736C13 4.41421 9.20101 4.41421 6.85786 6.75736C4.51472 9.1005 4.51472 12.8995 6.85786 15.2426C9.20101 17.5858 13 17.5858 15.3431 15.2426ZM16.7574 5.34315C19.6425 8.22833 19.8633 12.769 17.4195 15.9075C17.4348 15.921 17.4498 15.9351 17.4645 15.9497L21.7071 20.1924C22.0976 20.5829 22.0976 21.2161 21.7071 21.6066C21.3166 21.9971 20.6834 21.9971 20.2929 21.6066L16.0503 17.364C16.0356 17.3493 16.0215 17.3343 16.008 17.319C12.8695 19.7628 8.32883 19.542 5.44365 16.6569C2.31946 13.5327 2.31946 8.46734 5.44365 5.34315C8.56785 2.21895 13.6332 2.21895 16.7574 5.34315ZM10.1005 7H12.1005V10H15.1005V12H12.1005V15H10.1005V12H7.10052V10H10.1005V7Z",fill:"currentColor"}));export{t as default};

package/build/zoom-out-DstEwzsY.js

@@ -0,0 +1 @@
+import{_ as e}from"./index-Cmqg-N1e.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M15.3431 15.2426C17.6863 12.8995 17.6863 9.1005 15.3431 6.75736C13 4.41421 9.20101 4.41421 6.85786 6.75736C4.51472 9.1005 4.51472 12.8995 6.85786 15.2426C9.20101 17.5858 13 17.5858 15.3431 15.2426ZM16.7574 5.34315C19.6425 8.22833 19.8633 12.769 17.4195 15.9075C17.4348 15.921 17.4498 15.9351 17.4645 15.9497L21.7071 20.1924C22.0976 20.5829 22.0976 21.2161 21.7071 21.6066C21.3166 21.9971 20.6834 21.9971 20.2929 21.6066L16.0503 17.364C16.0356 17.3493 16.0215 17.3343 16.008 17.319C12.8695 19.7628 8.32883 19.542 5.44365 16.6569C2.31946 13.5327 2.31946 8.46734 5.44365 5.34315C8.56785 2.21895 13.6332 2.21895 16.7574 5.34315ZM7.10052 10V12H15.1005V10L7.10052 10Z",fill:"currentColor"}));export{t as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/design-system",
   "description": "Ossy's design system React component library",
-  "version": "3.0.9",
+  "version": "3.3.0",
   "type": "module",
   "source": "src/index.js",
   "module": "build/index.js",
@@ -17,7 +17,7 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose src/component-slots/slotLookup.spec.js"
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose src/component-slots/slotLookup.spec.js src/theme/createCss.spec.js"
   },
   "browserslist": {
     "production": [
@@ -32,7 +32,7 @@
     ]
   },
   "devDependencies": {
-    "@ossy/themes": "^3.0.9",
+    "@ossy/themes": "^3.3.0",
     "markdown-to-jsx": "^9.8.1",
     "react-syntax-highlighter": "^16.1.0"
   },
@@ -58,5 +58,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "908fae28675f6c3c179d4c2eecb451e8a1af886e"
+  "gitHead": "19e8bae4c1e9df79270218f28c0c9391f4f9871c"
 }

package/src/alert/Alert.jsx

@@ -5,19 +5,23 @@ const VARIANTS = new Set(['neutral', 'info', 'success', 'warning', 'danger'])
 /**
  * Theme-aware callout: tinted surface from `--surface-base` + semantic `--alert-tone`,
  * accent start border, no hard-coded light-mode grays.
+ *
+ * Variants map to theme CSS variables (`--color-info`, `--color-accent` for success,
+ * `--color-warning`, `--color-danger`). Neutral uses surface/separator tokens.
  */
 export const Alert = ({
   variant = 'neutral',
   title,
   icon,
   children,
+  onDismiss,
+  dismissLabel = 'Dismiss',
   as: Element = 'div',
   role: roleProp,
   ...props
 }) => {
   const v = VARIANTS.has(variant) ? variant : 'neutral'
-  const role =
-    roleProp ?? (v === 'danger' ? 'alert' : 'status')
+  const role = roleProp ?? (v === 'danger' ? 'alert' : 'status')
   const live = v === 'danger' ? 'assertive' : 'polite'
 
   return (
@@ -64,7 +68,7 @@ export const Alert = ({
           }
 
           [data-alert-variant="warning"] {
-            --alert-tone: hsl(38, 92%, 44%);
+            --alert-tone: var(--color-warning);
           }
 
           [data-alert-variant="danger"] {
@@ -104,6 +108,40 @@ export const Alert = ({
             color: inherit;
             opacity: 0.92;
           }
+
+          [data-alert-dismiss] {
+            flex-shrink: 0;
+            box-sizing: border-box;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 1.75rem;
+            height: 1.75rem;
+            margin: -0.25rem -0.35rem 0 0;
+            padding: 0;
+            border: 0;
+            border-radius: 8px;
+            background: transparent;
+            color: inherit;
+            opacity: 0.72;
+            cursor: pointer;
+            font: inherit;
+            line-height: 1;
+          }
+
+          [data-alert-dismiss]:hover,
+          [data-alert-dismiss]:focus-visible {
+            opacity: 1;
+            background: color-mix(in srgb, var(--alert-tone) 14%, transparent);
+            outline: none;
+          }
+
+          [data-alert-dismiss] svg {
+            width: 1rem;
+            height: 1rem;
+            display: block;
+            fill: currentColor;
+          }
         `}
       </style>
       <Element
@@ -124,6 +162,18 @@ export const Alert = ({
           ) : null}
           {children}
         </span>
+        {typeof onDismiss === 'function' ? (
+          <button
+            type="button"
+            data-alert-dismiss
+            aria-label={dismissLabel}
+            onClick={onDismiss}
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z" />
+            </svg>
+          </button>
+        ) : null}
       </Element>
     </>
   )

package/src/alert/alert.stories.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Alert } from './Alert.jsx'
 
 const infoIcon = (
@@ -65,3 +65,25 @@ export const WithIcon = {
     children: 'Pass any React node as icon — here an inline SVG.',
   },
 }
+
+export const Dismissible = {
+  render: function DismissibleAlert() {
+    const [visible, setVisible] = useState(true)
+    if (!visible) {
+      return (
+        <button type="button" onClick={() => setVisible(true)}>
+          Show alert again
+        </button>
+      )
+    }
+    return (
+      <Alert
+        variant="warning"
+        title="Storage almost full"
+        onDismiss={() => setVisible(false)}
+      >
+        Free up space or upgrade your plan to keep uploading.
+      </Alert>
+    )
+  },
+}

package/src/badge/Badge.jsx

@@ -1,70 +1,85 @@
 import React from 'react'
 
+const VARIANTS = new Set(['neutral', 'info', 'success', 'warning', 'danger'])
+
+/**
+ * Compact status pill. Semantic variants tint from theme `--color-*` tokens
+ * (same mapping as Alert: success → accent, warning → warning, …) so light and
+ * dark themes stay consistent without hard-coded pastels.
+ */
 export const Badge = ({
   label,
   children,
   variant = 'neutral',
   size = 'm',
   ...props
-}) => (
-  <>
-    <style href="@ossy/design-system/badge" precedence="high">
-    {`
-      [data-badge] {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        border-radius: 999px;
-        font-family: var(--font-family, sans-serif);
-        font-weight: 500;
-        line-height: 1;
-        white-space: nowrap;
-      }
+}) => {
+  const v = VARIANTS.has(variant) ? variant : 'neutral'
+
+  return (
+    <>
+      <style href="@ossy/design-system/badge" precedence="high">
+        {`
+          [data-badge] {
+            --badge-tone: var(--separator-primary);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            border-radius: 999px;
+            font-family: var(--font-family, sans-serif);
+            font-weight: 500;
+            line-height: 1;
+            white-space: nowrap;
+            background: color-mix(in srgb, var(--badge-tone) 16%, var(--surface-base));
+            color: color-mix(in srgb, var(--badge-tone) 72%, var(--text-default-color, currentColor));
+          }
 
-      [data-badge][data-badge-size="s"] {
-        font-size: 11px;
-        padding: 2px 8px;
-      }
+          [data-badge][data-badge-size="s"] {
+            font-size: 11px;
+            padding: 2px 8px;
+          }
 
-      [data-badge][data-badge-size="m"] {
-        font-size: 13px;
-        padding: 4px 10px;
-      }
+          [data-badge][data-badge-size="m"] {
+            font-size: 13px;
+            padding: 4px 10px;
+          }
 
-      [data-badge][data-badge-variant="success"] {
-        background: hsl(142, 76%, 90%);
-        color: hsl(142, 60%, 25%);
-      }
+          [data-badge][data-badge-variant="neutral"] {
+            --badge-tone: var(--separator-primary);
+            background: color-mix(
+              in srgb,
+              var(--surface-primary) 45%,
+              var(--separator-primary)
+            );
+            color: var(--text-default-color, inherit);
+          }
 
-      [data-badge][data-badge-variant="warning"] {
-        background: hsl(38, 100%, 90%);
-        color: hsl(38, 80%, 30%);
-      }
+          [data-badge][data-badge-variant="info"] {
+            --badge-tone: var(--color-info);
+          }
 
-      [data-badge][data-badge-variant="danger"] {
-        background: hsl(0, 86%, 92%);
-        color: hsl(0, 70%, 35%);
-      }
+          [data-badge][data-badge-variant="success"] {
+            --badge-tone: var(--color-accent);
+          }
 
-      [data-badge][data-badge-variant="neutral"] {
-        background: hsl(0, 0%, 90%);
-        color: hsl(0, 0%, 35%);
-      }
+          [data-badge][data-badge-variant="warning"] {
+            --badge-tone: var(--color-warning);
+          }
 
-      [data-badge][data-badge-variant="info"] {
-        background: hsl(210, 100%, 92%);
-        color: hsl(210, 70%, 30%);
-      }
-    `}
-    </style>
-    <span
-      data-badge
-      data-badge-variant={variant}
-      data-badge-size={size}
-      {...props}
-    >
-      {label ?? children}
-    </span>
-  </>
-)
+          [data-badge][data-badge-variant="danger"] {
+            --badge-tone: var(--color-danger);
+          }
+        `}
+      </style>
+      <span
+        data-badge
+        data-badge-variant={v}
+        data-badge-size={size}
+        {...props}
+      >
+        {label ?? children}
+      </span>
+    </>
+  )
+}

package/src/badge/badge.stories.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Badge } from './Badge.jsx'
+
+const VARIANTS = ['neutral', 'info', 'success', 'warning', 'danger']
+
+export default {
+  title: 'Design System/Feedback/Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: VARIANTS,
+    },
+    size: {
+      control: 'select',
+      options: ['s', 'm'],
+    },
+  },
+}
+
+export const Neutral = {
+  args: {
+    variant: 'neutral',
+    children: 'Neutral',
+  },
+}
+
+export const Info = {
+  args: {
+    variant: 'info',
+    children: 'Info',
+  },
+}
+
+export const Success = {
+  args: {
+    variant: 'success',
+    children: 'Success',
+  },
+}
+
+export const Warning = {
+  args: {
+    variant: 'warning',
+    children: 'Warning',
+  },
+}
+
+export const Danger = {
+  args: {
+    variant: 'danger',
+    children: 'Danger',
+  },
+}
+
+export const AllVariants = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+      {VARIANTS.map((variant) => (
+        <Badge key={variant} variant={variant}>
+          {variant}
+        </Badge>
+      ))}
+    </div>
+  ),
+}

package/src/overlay/Overlay.jsx

@@ -30,11 +30,10 @@ export const Overlay = forwardRef(({
       <style href="@ossy/design-system/overlay" precedence="high">
       {`
         [data-overlay] {
+          position: fixed;
+          inset: 0;
           width: 100%;
           height: 100%;
-          position: absolute;
-          top: 0;
-          left: 0;
           overflow: hidden;
           background: hsla(0, 0%, 0%, .8);
           z-index: 100;

package/src/theme/createCss.js

@@ -71,15 +71,47 @@ const createRestVars = (theme, scope) => css => {
   )
 }
 
+/**
+ * Emits `@media` blocks that redeclare CSS variables from a partial theme tree.
+ * Theme authors set `media: { '(max-width: 900px)': { text: { … } } }`.
+ */
+const createMediaCss = (theme, scope) => css => {
+  const media = theme.media
+  if (!media || typeof media !== 'object') return css
+  return Object.entries(media).reduce((acc, [query, portion]) => {
+    if (!portion || typeof portion !== 'object') return acc
+    const vars = createCssVars(portion)
+    if (!vars) return acc
+    return acc + (
+`
+@media ${query} {
+  ${scope} {
+    ${vars}
+  }
+}
+`
+    )
+  }, css)
+}
+
 export const createCss = (theme, scope = ':root') => {
   if (!theme) return ''
-  const restTheme = { ...theme, maxWidth: undefined, 'max-width': undefined, surfaces: undefined, space: undefined, surface: undefined }
+  const restTheme = {
+    ...theme,
+    maxWidth: undefined,
+    'max-width': undefined,
+    surfaces: undefined,
+    space: undefined,
+    surface: undefined,
+    media: undefined,
+  }
   return [
     createSpacingCss(theme, scope),
     createMaxWidthCss(theme, scope),
     createSurfaceVars(theme, scope),
     createSurfacesCss(theme, scope),
     createRestVars(restTheme, scope),
+    createMediaCss(theme, scope),
   ].reduce((css, fn) => fn(css), '')
 }
 

package/src/theme/createCss.spec.js

@@ -0,0 +1,69 @@
+import { describe, expect, it } from '@jest/globals'
+import { createCss } from './createCss.js'
+
+describe('createCss', () => {
+  it('emits CSS variables for text tokens', () => {
+    const css = createCss({
+      text: {
+        default: { 'font-size': '1rem' },
+        'heading-primary': { 'font-size': '2rem' },
+      },
+    })
+
+    expect(css).toContain('--text-default-font-size: 1rem;')
+    expect(css).toContain('--text-heading-primary-font-size: 2rem;')
+  })
+
+  it('emits media-query overrides without leaking media into root vars', () => {
+    const css = createCss({
+      text: {
+        'heading-primary': { 'font-size': '2rem' },
+      },
+      media: {
+        '(max-width: 900px)': {
+          text: {
+            'heading-primary': { 'font-size': '1.5rem' },
+          },
+        },
+      },
+    })
+
+    expect(css).toContain('@media (max-width: 900px)')
+    expect(css).toMatch(
+      /@media \(max-width: 900px\)\s*\{\s*:root\s*\{[\s\S]*--text-heading-primary-font-size: 1\.5rem;/
+    )
+    expect(css).not.toContain('--media-')
+  })
+
+  it('returns empty string for missing theme', () => {
+    expect(createCss(null)).toBe('')
+    expect(createCss(undefined)).toBe('')
+  })
+
+  it('scopes media overrides to an isolated theme selector', () => {
+    const css = createCss(
+      {
+        text: { 'heading-primary': { 'font-size': '2rem' } },
+        media: {
+          '(max-width: 900px)': {
+            text: { 'heading-primary': { 'font-size': '1.5rem' } },
+          },
+        },
+      },
+      '[data-theme-scope="x"]',
+    )
+
+    expect(css).toMatch(
+      /@media \(max-width: 900px\)\s*\{\s*\[data-theme-scope="x"\]\s*\{[\s\S]*--text-heading-primary-font-size: 1\.5rem;/,
+    )
+  })
+
+  it('ignores empty media maps and non-object portions', () => {
+    expect(createCss({ text: { default: { 'font-size': '1rem' } }, media: {} }))
+      .not.toContain('@media')
+    expect(createCss({
+      text: { default: { 'font-size': '1rem' } },
+      media: { '(max-width: 900px)': null },
+    })).not.toContain('@media')
+  })
+})

package/src/view/View.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 export const ViewItem = ({
   fill,
@@ -14,7 +14,7 @@ export const ViewItem = ({
   />
 )
 
-export const View = ({
+export const View = forwardRef(function View ({
   surface = 'neutral',
   selectable,
   layout = 'column',
@@ -29,7 +29,7 @@ export const View = ({
   as: Container = 'div',
   style = {},
   ...props
-}) => {
+}, ref) {
   const resolvedLayout = stack
     ? (horizontal ? 'row' : 'column')
     : layout
@@ -478,6 +478,7 @@ export const View = ({
       </style>
 
       <Container
+        ref={ref}
         data-view
         data-surface={surface}
         data-selectable={selectable}
@@ -502,6 +503,6 @@ export const View = ({
       />
     </>
   )
-}
+})
 
 View.Item = ViewItem

package/build/abstract-BWPkcsdp.js

@@ -1 +0,0 @@
-import{_ as e}from"./index-Bfxnaf5o.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M5 5H19V19H16L16 8H5V5Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10 19C12.7614 19 15 16.7614 15 14C15 11.2386 12.7614 9 10 9C7.23858 9 5 11.2386 5 14C5 16.7614 7.23858 19 10 19ZM10 16C11.1046 16 12 15.1046 12 14C12 12.8954 11.1046 12 10 12C8.89543 12 8 12.8954 8 14C8 15.1046 8.89543 16 10 16Z",fill:"currentColor"}));export{t as default};

package/build/add-r-CwHoBOPF.js

@@ -1 +0,0 @@
-import{_ as e}from"./index-Bfxnaf5o.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M12 6C12.5523 6 13 6.44772 13 7V11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H13V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H11V7C11 6.44772 11.4477 6 12 6Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M5 22C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5ZM4 19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V19Z",fill:"currentColor"}));export{t as default};

package/build/adidas-pQ1MLsOR.js

@@ -1 +0,0 @@
-import{_ as t}from"./index-Bfxnaf5o.js";import e from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var r=r=>e.createElement("svg",t({},r,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),e.createElement("path",{d:"M1.3294 19L0.731323 17.9641L5.06145 15.4641L7.1029 19H1.3294Z",fill:"currentColor"}),e.createElement("path",{d:"M15.1858 19H9.4123L5.7935 12.7321L10.1236 10.2321L15.1858 19Z",fill:"currentColor"}),e.createElement("path",{d:"M23.2687 19H17.4952L10.8557 7.5L15.1858 5L23.2687 19Z",fill:"currentColor"}));export{r as default};

package/build/airplane-CRWGe0Mp.js

@@ -1 +0,0 @@
-import{_ as t}from"./index-Bfxnaf5o.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var e=e=>r.createElement("svg",t({},e,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z",fill:"currentColor"}));export{e as default};

package/build/alarm-Dg-j5hk6.js

@@ -1 +0,0 @@
-import{_ as e}from"./index-Bfxnaf5o.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M5.45887 2L1 6.01478L2.33826 7.50107L6.79713 3.48629L5.45887 2Z",fill:"currentColor"}),r.createElement("path",{d:"M11 8H13V12H16V14H11V8Z",fill:"currentColor"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12Z",fill:"currentColor"}),r.createElement("path",{d:"M18.5411 2L23 6.01478L21.6617 7.50107L17.2029 3.48629L18.5411 2Z",fill:"currentColor"}));export{t as default};

package/build/album-BS_TYVFd.js

@@ -1 +0,0 @@
-import{_ as e}from"./index-Bfxnaf5o.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var t=t=>r.createElement("svg",e({},t,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M2 19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5C3.34315 2 2 3.34315 2 5V19ZM20 19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5C4 4.44772 4.44772 4 5 4H10V12.0111L12.395 12.0112L14.0001 9.86419L15.6051 12.0112H18.0001L18 4H19C19.5523 4 20 4.44772 20 5V19ZM16 4H12V9.33585L14.0001 6.66046L16 9.33571V4Z",fill:"currentColor"}));export{t as default};

package/build/align-bottom-QG6WuhMg.js

@@ -1 +0,0 @@
-import{_ as t}from"./index-Bfxnaf5o.js";import e from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var r=r=>e.createElement("svg",t({},r,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),e.createElement("path",{d:"M13 10H17V16H13V10Z",fill:"currentColor","fill-opacity":"0.5"}),e.createElement("path",{d:"M11 4H7V16H11V4Z",fill:"currentColor"}),e.createElement("path",{d:"M18 18H6V20H18V18Z",fill:"currentColor"}));export{r as default};

package/build/align-center-BB8DCuDJ.js

@@ -1 +0,0 @@
-import{_ as t}from"./index-Bfxnaf5o.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var e=e=>r.createElement("svg",t({},e,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M9 13H15V17H9V13Z",fill:"currentColor","fill-opacity":"0.5"}),r.createElement("path",{d:"M6 7H18V11H6V7Z",fill:"currentColor"}));export{e as default};

package/build/align-left-BFgo2yKd.js

@@ -1 +0,0 @@
-import{_ as t}from"./index-Bfxnaf5o.js";import e from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var r=r=>e.createElement("svg",t({},r,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),e.createElement("path",{d:"M8 13H14V17H8V13Z",fill:"currentColor","fill-opacity":"0.5"}),e.createElement("path",{d:"M6 6H4V18H6V6Z",fill:"currentColor"}),e.createElement("path",{d:"M20 7H8V11H20V7Z",fill:"currentColor"}));export{r as default};

package/build/align-middle-_y8F1145.js

@@ -1 +0,0 @@
-import{_ as t}from"./index-Bfxnaf5o.js";import r from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var e=e=>r.createElement("svg",t({},e,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),r.createElement("path",{d:"M13 9H17V15H13V9Z",fill:"currentColor","fill-opacity":"0.5"}),r.createElement("path",{d:"M7 6H11V18H7V6Z",fill:"currentColor"}));export{e as default};

package/build/align-right-B6Qs8qMr.js

@@ -1 +0,0 @@
-import{_ as e}from"./index-Bfxnaf5o.js";import l from"react";import"react-dom";import"markdown-to-jsx";import"react-syntax-highlighter";var r=r=>l.createElement("svg",e({},r,{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),l.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z",fill:"currentColor","fill-opacity":"0.5"}),l.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z",fill:"currentColor"}),l.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z",fill:"currentColor"}));export{r as default};