@clearstory/drywall-react 8.0.5 → 8.1.0

package/dist/components/DescriptionDetails/DescriptionDetails.d.ts

@@ -1,4 +1,6 @@
 import { TypographyProps } from '../Typography';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export type DescriptionDetailsProps = Omit<TypographyProps, "component">;
+export type DescriptionDetailsProps = Omit<TypographyProps, "component" | "variant"> & {
+    variant?: "standard" | "outlined";
+};
 export declare const DescriptionDetails: ForwardRefExoticComponent<Omit<DescriptionDetailsProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/DescriptionDetails/DescriptionDetails.js

@@ -1,22 +1,26 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { useDescriptionListContext as s } from "../DescriptionList/DescriptionListContext.js";
-import { T as a } from "../../Typography-DbGuUYt_.js";
-const c = p(({ variant: t = "body2", sx: r, ...i }, n) => {
-  const o = s()?.spacing;
+import { forwardRef as s } from "react";
+import { useDescriptionListContext as d } from "../DescriptionList/DescriptionListContext.js";
+import { T as p } from "../../Typography-DbGuUYt_.js";
+const c = s(({ variant: i = "standard", sx: r, ...a }, n) => {
+  const o = d()?.spacing;
   return /* @__PURE__ */ e(
-    a,
+    p,
     {
       component: "dd",
-      variant: t,
+      variant: "body2",
       ref: n,
-      ...i,
+      ...a,
       sx: [
         {
           border: "1px solid transparent",
           lineHeight: "1.25rem",
           padding: "5px 10px"
         },
+        i === "outlined" && ((t) => ({
+          borderColor: `color-mix(in srgb, ${t.vars?.palette.divider} 25%, transparent)`,
+          borderRadius: t.shape.borderRadius + "px"
+        })),
         o && {
           marginBlockEnd: o,
           "&:last-child": {

package/dist/theme/colorSchemes.js

@@ -1,4 +1,4 @@
-import { gray as r, orangePeel as i, vermilion as e, honoluluBlue as n, indiaGreen as a } from "./colors.js";
+import { gray as a, orangePeel as i, vermilion as e, honoluluBlue as d, indiaGreen as r } from "./colors.js";
 const g = {
   light: {
     palette: {
@@ -8,24 +8,24 @@ const g = {
         brand: "#02CD0D"
       },
       primary: {
-        main: a[500],
-        light: a[300],
-        dark: a[700]
+        main: r[500],
+        light: r[300],
+        dark: r[700]
       },
       secondary: {
-        main: r[600],
-        light: r[400],
-        dark: r[800]
+        main: a[600],
+        light: a[400],
+        dark: a[800]
       },
       success: {
-        main: a[500],
-        light: a[300],
-        dark: a[700]
+        main: r[500],
+        light: r[300],
+        dark: r[700]
       },
       info: {
-        main: n[500],
-        light: n[300],
-        dark: n[700]
+        main: d[500],
+        light: d[300],
+        dark: d[700]
       },
       error: {
         main: e[700],
@@ -37,12 +37,12 @@ const g = {
         light: i[500],
         dark: i[900]
       },
-      grey: r,
+      grey: a,
       background: {
-        default: r[50],
         paper: "#FFFFFF",
-        surface: "#F7F9FA"
-        // halfway between white and gray[50]
+        body: "#F7F9FA",
+        surface: a[50],
+        default: a[100]
       },
       action: {
         active: "rgba(15, 19, 28, 0.54)",
@@ -68,24 +68,24 @@ const g = {
         brand: "#02CD0D"
       },
       primary: {
-        main: a[200],
-        light: a[600],
-        dark: a[50]
+        main: r[200],
+        light: r[600],
+        dark: r[50]
       },
       secondary: {
-        main: r[100],
-        light: r[500],
-        dark: r[50]
+        main: a[100],
+        light: a[500],
+        dark: a[50]
       },
       success: {
-        main: a[300],
-        light: a[700],
-        dark: a[100]
+        main: r[300],
+        light: r[700],
+        dark: r[100]
       },
       info: {
-        main: n[200],
-        light: n[600],
-        dark: n[50]
+        main: d[200],
+        light: d[600],
+        dark: d[50]
       },
       error: {
         main: e[300],
@@ -97,12 +97,12 @@ const g = {
         light: i[700],
         dark: i[100]
       },
-      grey: r,
+      grey: a,
       background: {
-        default: r[800],
-        paper: r[900],
-        surface: "#1C2427"
-        // halfway between gray[800] and gray[900]
+        paper: a[900],
+        body: "#1C2427",
+        surface: a[800],
+        default: a[700]
       }
     }
   }

package/dist/theme/index.d.ts

@@ -6,6 +6,7 @@ declare module "@mui/material/styles" {
         brand: string;
     }
     interface TypeBackground {
+        body: string;
         surface: string;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clearstory/drywall-react",
-  "version": "8.0.5",
+  "version": "8.1.0",
   "license": "UNLICENSED",
   "description": "a Clearstory software design system",
   "type": "module",