oneslash-design-system 2.2.0 → 2.4.0

package/dist/designTokens.js

@@ -186,10 +186,36 @@ var base = {
         small: '4px',
         medium: '8px',
         large: '16px',
+        xlarge: '24px',
+        xxlarge: '32px',
+        huge: '48px',
+        giant: '64px',
+        // The space between the sections of a page, and under its last one.
+        section: '128px',
+        page: '160px',
+    },
+    // How wide a line of text runs, in characters, so a paragraph stays
+    // readable at any window width. `statement` is the large line that opens a
+    // section.
+    measure: {
+        narrow: '24ch',
+        lede: '48ch',
+        statement: '40rem',
+        body: '60ch',
+        wide: '75ch',
+    },
+    // The width of a page's column, and how tall a panel is at least.
+    container: {
+        page: '48rem',
+        'page-wide': '64rem',
+    },
+    stage: {
+        short: '20rem',
+        tall: '26rem',
     },
     typography: {
         family: 'Inter, sans-serif',
-        monoFamily: "'JetBrains Mono', ui-monospace, monospace",
+        monoFamily: "'Fira Code', ui-monospace, monospace",
         h1: {
             weight: '400',
             size: '96px',
@@ -256,6 +282,15 @@ var base = {
             lineHeight: '18px',
             letterSpacing: '0.5px',
         },
+        // Code, identifiers and type names; pair with font-mono. Light weight
+        // because Fira Code's regular is dark next to Inter; 0 tracking because
+        // letter-spacing disables its ligatures.
+        code: {
+            weight: '300',
+            size: '14px',
+            lineHeight: '21px',
+            letterSpacing: '0px',
+        },
         alignments: {
             left: 'left',
             center: 'center',
@@ -302,7 +337,10 @@ function withSemanticKeys(set, mode) {
     var status = function (g, isError) { return (__assign(__assign({}, g), { fill: isLight ? g.dark : g.main, onFill: isLight ? '#FFFFFF' : '#000000', text: isLight ? g.dark : isError ? g.light : g.main, textHover: isLight ? g.dark : g.light, tint: isLight ? g.light : g.dark })); };
     return __assign(__assign({}, set), { primary: __assign(__assign({}, set.primary), { contrast: isLight ? '#ffffff' : '#000000' }), 
         // Secondary buttons use text.primary as their label; a theme whose secondary.main is mid-tone sets its own.
-        secondary: __assign(__assign({}, set.secondary), { contrast: set.text.primary }), background: __assign(__assign({}, set.background), { elevated: isLight ? set.background.default : set.background.accent100, overlay: isLight ? set.background.accent300 : set.background.accent100 }), error: status(set.error, true), warning: status(set.warning, false), info: status(set.info, false), success: status(set.success, false) });
+        secondary: __assign(__assign({}, set.secondary), { contrast: set.text.primary }), background: __assign(__assign({}, set.background), { elevated: isLight ? set.background.default : set.background.accent100, overlay: isLight ? set.background.accent300 : set.background.accent100, 
+            // The surface a panel of content sits on, and a sheet of paper that stays
+            // light in dark mode, for scans, drawings and specimens drawn in black.
+            panel: set.background.accent100, paper: '#FFFFFF' }), error: status(set.error, true), warning: status(set.warning, false), info: status(set.info, false), success: status(set.success, false) });
 }
 // Forest: the default set with these values replaced (group by group).
 /**

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/button';
 export * from './components/checkBox';
 export * from './components/emptyBox';
 export * from './components/iconButton';
+export * from './components/layout';
 export * from './components/loadingScreen';
 export * from './components/menu';
 export * from './components/menuItem';
@@ -12,6 +13,7 @@ export * from './components/modal';
 export * from './components/navigation';
 export * from './components/popover';
 export * from './components/radioGroup';
+export * from './components/sectionIntro';
 export * from './components/select';
 export * from './components/tab';
 export * from './components/tableCell';

package/dist/index.js

@@ -5,6 +5,7 @@ export * from './components/button';
 export * from './components/checkBox';
 export * from './components/emptyBox';
 export * from './components/iconButton';
+export * from './components/layout';
 export * from './components/loadingScreen';
 export * from './components/menu';
 export * from './components/menuItem';
@@ -12,6 +13,7 @@ export * from './components/modal';
 export * from './components/navigation';
 export * from './components/popover';
 export * from './components/radioGroup';
+export * from './components/sectionIntro';
 export * from './components/select';
 export * from './components/tab';
 export * from './components/tableCell';

package/dist/stories/PageComponents.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Page: Story;
+export declare const FactsAndFigures: Story;

package/dist/stories/PageComponents.stories.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import PageShell from "../components/pageShell";
+import PageHeader from "../components/pageHeader";
+import SectionIntro from "../components/sectionIntro";
+import Paragraph from "../components/paragraph";
+import Surface from "../components/surface";
+import NumberedRow from "../components/numberedRow";
+import FactsRow from "../components/factsRow";
+import LinkCard from "../components/linkCard";
+import Figure from "../components/figure";
+import Tag from "../components/tag";
+import { Cluster, Grid, PageSection, Stack } from "../components/layout";
+var meta = {
+    title: "Pages/Page components",
+};
+export default meta;
+var facts = [
+    { label: "Role", value: "Principal Product Designer" },
+    { label: "Company", value: "Example Co" },
+    { label: "Focus", value: "Agents" },
+    { label: "Experience", value: "15 years" },
+    { label: "Based", value: "Chicago area" },
+];
+export var Page = {
+    render: function () { return (<PageShell>
+      <PageSection>
+        <PageHeader eyebrow="Design Translation · 2011" title="Geocentric Clock" lede="The arm stays still and the numbers come to it." facts={facts}/>
+      </PageSection>
+      <PageSection>
+        <SectionIntro name="How to read it" statement="The light stays. The numbers move.">
+          <Paragraph tone="secondary">
+            The clock has a stationary light at the top of the circle and a rotating face with three dots between each hour.
+          </Paragraph>
+        </SectionIntro>
+        <Surface padding="xlarge" minHeight="tall" align="center">
+          <Paragraph>A panel holds the thing being shown.</Paragraph>
+        </Surface>
+      </PageSection>
+      <PageSection>
+        <SectionIntro name="Design decisions" statement="Four choices behind the clock"/>
+        <Stack gap="giant">
+          <NumberedRow index={0} title="Move the numbers, not the arm" proof="One light stays put. Everything else moves." visual={<Paragraph tone="secondary">A visual</Paragraph>}>
+            <p>A standard wall clock turns two arms clockwise over twelve fixed numbers.</p>
+          </NumberedRow>
+          <NumberedRow index={1} title="A row with nothing to show">
+            <p>It is text alone, across the column.</p>
+          </NumberedRow>
+        </Stack>
+      </PageSection>
+      <PageSection>
+        <SectionIntro name="Tools"/>
+        <Surface>
+          <Cluster>
+            {["Figma", "Prototyping", "Design Systems"].map(function (label) { return (<Tag key={label} variant="contained" size="medium" state="enabled" label={label}/>); })}
+          </Cluster>
+        </Surface>
+        <Grid columns={2}>
+          <LinkCard href="/design-translation" title="More Design Translation" caption="Design Translation"/>
+          <LinkCard href="/design-product" title="More Design Product" caption="Design Product · Locked"/>
+        </Grid>
+      </PageSection>
+    </PageShell>); },
+};
+export var FactsAndFigures = {
+    render: function () { return (<Stack gap="xxlarge">
+      <FactsRow items={facts.slice(0, 3)}/>
+      <Grid columns={3} compact>
+        <Figure caption="Cropped to 4:5" crop={0.8}>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/>
+        </Figure>
+        <Figure caption="On paper" paper>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="100%" height="80"/>
+        </Figure>
+      </Grid>
+    </Stack>); },
+};

package/dist/tailwind-preset-auto.js

@@ -197,6 +197,12 @@ module.exports = {
         "background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "light-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "dark-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
+        "background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "light-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "dark-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "light-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "dark-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
         "action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "light-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "dark-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
@@ -266,7 +272,22 @@ module.exports = {
       "spacing": {
         "small": "var(--os-spacing-small)",
         "medium": "var(--os-spacing-medium)",
-        "large": "var(--os-spacing-large)"
+        "large": "var(--os-spacing-large)",
+        "xlarge": "var(--os-spacing-xlarge)",
+        "xxlarge": "var(--os-spacing-xxlarge)",
+        "huge": "var(--os-spacing-huge)",
+        "giant": "var(--os-spacing-giant)",
+        "section": "var(--os-spacing-section)",
+        "page": "var(--os-spacing-page)"
+      },
+      "maxWidth": {
+        "measure-narrow": "var(--os-measure-narrow)",
+        "measure-lede": "var(--os-measure-lede)",
+        "measure-statement": "var(--os-measure-statement)",
+        "measure-body": "var(--os-measure-body)",
+        "measure-wide": "var(--os-measure-wide)",
+        "page": "var(--os-container-page)",
+        "page-wide": "var(--os-container-page-wide)"
       },
       "fontSize": {
         "h1": [
@@ -356,11 +377,19 @@ module.exports = {
             "letterSpacing": "0.5px",
             "fontWeight": "400"
           }
+        ],
+        "code": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0px",
+            "fontWeight": "300"
+          }
         ]
       },
       "fontFamily": {
         "inter": "Inter, sans-serif",
-        "mono": "'JetBrains Mono', ui-monospace, monospace"
+        "mono": "'Fira Code', ui-monospace, monospace"
       },
       "fontWeight": {
         "h1": "400",
@@ -373,7 +402,8 @@ module.exports = {
         "subtitle2": "400",
         "body1": "400",
         "body2": "400",
-        "caption": "400"
+        "caption": "400",
+        "code": "300"
       },
       "letterSpacing": {
         "h1": "-1.5px",
@@ -386,7 +416,8 @@ module.exports = {
         "subtitle2": "0.1px",
         "body1": "0.2px",
         "body2": "0.2px",
-        "caption": "0.5px"
+        "caption": "0.5px",
+        "code": "0px"
       },
       "lineHeight": {
         "h1": "115px",
@@ -399,7 +430,8 @@ module.exports = {
         "subtitle2": "21px",
         "body1": "24px",
         "body2": "21px",
-        "caption": "18px"
+        "caption": "18px",
+        "code": "21px"
       }
     }
   }

package/dist/tailwind-preset.js

@@ -191,6 +191,12 @@ module.exports = {
         "background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "light-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
         "dark-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
+        "background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "light-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "dark-background-panel": "rgb(var(--os-color-background-panel) / <alpha-value>)",
+        "background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "light-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
+        "dark-background-paper": "rgb(var(--os-color-background-paper) / <alpha-value>)",
         "action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "light-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
         "dark-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
@@ -260,7 +266,22 @@ module.exports = {
       "spacing": {
         "small": "var(--os-spacing-small)",
         "medium": "var(--os-spacing-medium)",
-        "large": "var(--os-spacing-large)"
+        "large": "var(--os-spacing-large)",
+        "xlarge": "var(--os-spacing-xlarge)",
+        "xxlarge": "var(--os-spacing-xxlarge)",
+        "huge": "var(--os-spacing-huge)",
+        "giant": "var(--os-spacing-giant)",
+        "section": "var(--os-spacing-section)",
+        "page": "var(--os-spacing-page)"
+      },
+      "maxWidth": {
+        "measure-narrow": "var(--os-measure-narrow)",
+        "measure-lede": "var(--os-measure-lede)",
+        "measure-statement": "var(--os-measure-statement)",
+        "measure-body": "var(--os-measure-body)",
+        "measure-wide": "var(--os-measure-wide)",
+        "page": "var(--os-container-page)",
+        "page-wide": "var(--os-container-page-wide)"
       },
       "fontSize": {
         "h1": [
@@ -350,11 +371,19 @@ module.exports = {
             "letterSpacing": "0.5px",
             "fontWeight": "400"
           }
+        ],
+        "code": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0px",
+            "fontWeight": "300"
+          }
         ]
       },
       "fontFamily": {
         "inter": "Inter, sans-serif",
-        "mono": "'JetBrains Mono', ui-monospace, monospace"
+        "mono": "'Fira Code', ui-monospace, monospace"
       },
       "fontWeight": {
         "h1": "400",
@@ -367,7 +396,8 @@ module.exports = {
         "subtitle2": "400",
         "body1": "400",
         "body2": "400",
-        "caption": "400"
+        "caption": "400",
+        "code": "300"
       },
       "letterSpacing": {
         "h1": "-1.5px",
@@ -380,7 +410,8 @@ module.exports = {
         "subtitle2": "0.1px",
         "body1": "0.2px",
         "body2": "0.2px",
-        "caption": "0.5px"
+        "caption": "0.5px",
+        "code": "0px"
       },
       "lineHeight": {
         "h1": "115px",
@@ -393,7 +424,8 @@ module.exports = {
         "subtitle2": "21px",
         "body1": "24px",
         "body2": "21px",
-        "caption": "18px"
+        "caption": "18px",
+        "code": "21px"
       }
     }
   }

package/dist/theme-auto.css

@@ -194,6 +194,12 @@
   --color-background-overlay: rgb(var(--os-color-background-overlay));
   --color-light-background-overlay: rgb(var(--os-color-background-overlay));
   --color-dark-background-overlay: rgb(var(--os-color-background-overlay));
+  --color-background-panel: rgb(var(--os-color-background-panel));
+  --color-light-background-panel: rgb(var(--os-color-background-panel));
+  --color-dark-background-panel: rgb(var(--os-color-background-panel));
+  --color-background-paper: rgb(var(--os-color-background-paper));
+  --color-light-background-paper: rgb(var(--os-color-background-paper));
+  --color-dark-background-paper: rgb(var(--os-color-background-paper));
   --color-action-active: rgb(var(--os-color-action-active));
   --color-light-action-active: rgb(var(--os-color-action-active));
   --color-dark-action-active: rgb(var(--os-color-action-active));
@@ -256,4 +262,17 @@
   --spacing-small: var(--os-spacing-small);
   --spacing-medium: var(--os-spacing-medium);
   --spacing-large: var(--os-spacing-large);
+  --spacing-xlarge: var(--os-spacing-xlarge);
+  --spacing-xxlarge: var(--os-spacing-xxlarge);
+  --spacing-huge: var(--os-spacing-huge);
+  --spacing-giant: var(--os-spacing-giant);
+  --spacing-section: var(--os-spacing-section);
+  --spacing-page: var(--os-spacing-page);
+  --container-measure-narrow: var(--os-measure-narrow);
+  --container-measure-lede: var(--os-measure-lede);
+  --container-measure-statement: var(--os-measure-statement);
+  --container-measure-body: var(--os-measure-body);
+  --container-measure-wide: var(--os-measure-wide);
+  --container-page: var(--os-container-page);
+  --container-page-wide: var(--os-container-page-wide);
 }

package/dist/theme.css

@@ -189,6 +189,12 @@
   --color-background-overlay: rgb(var(--os-color-background-overlay));
   --color-light-background-overlay: rgb(var(--os-color-background-overlay));
   --color-dark-background-overlay: rgb(var(--os-color-background-overlay));
+  --color-background-panel: rgb(var(--os-color-background-panel));
+  --color-light-background-panel: rgb(var(--os-color-background-panel));
+  --color-dark-background-panel: rgb(var(--os-color-background-panel));
+  --color-background-paper: rgb(var(--os-color-background-paper));
+  --color-light-background-paper: rgb(var(--os-color-background-paper));
+  --color-dark-background-paper: rgb(var(--os-color-background-paper));
   --color-action-active: rgb(var(--os-color-action-active));
   --color-light-action-active: rgb(var(--os-color-action-active));
   --color-dark-action-active: rgb(var(--os-color-action-active));
@@ -251,4 +257,17 @@
   --spacing-small: var(--os-spacing-small);
   --spacing-medium: var(--os-spacing-medium);
   --spacing-large: var(--os-spacing-large);
+  --spacing-xlarge: var(--os-spacing-xlarge);
+  --spacing-xxlarge: var(--os-spacing-xxlarge);
+  --spacing-huge: var(--os-spacing-huge);
+  --spacing-giant: var(--os-spacing-giant);
+  --spacing-section: var(--os-spacing-section);
+  --spacing-page: var(--os-spacing-page);
+  --container-measure-narrow: var(--os-measure-narrow);
+  --container-measure-lede: var(--os-measure-lede);
+  --container-measure-statement: var(--os-measure-statement);
+  --container-measure-body: var(--os-measure-body);
+  --container-measure-wide: var(--os-measure-wide);
+  --container-page: var(--os-container-page);
+  --container-page-wide: var(--os-container-page-wide);
 }

package/dist/themes/clay-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 248 242;
   --os-color-background-elevated: 237 224 204;
   --os-color-background-overlay: 252 248 242;
+  --os-color-background-panel: 242 232 217;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 52;
   --os-color-background-elevated: 54 42 31;
   --os-color-background-overlay: 54 42 31;
+  --os-color-background-panel: 54 42 31;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 81 64 52;
     --os-color-background-elevated: 54 42 31;
     --os-color-background-overlay: 54 42 31;
+    --os-color-background-panel: 54 42 31;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/clay.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 248 242;
   --os-color-background-elevated: 237 224 204;
   --os-color-background-overlay: 252 248 242;
+  --os-color-background-panel: 242 232 217;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 52;
   --os-color-background-elevated: 54 42 31;
   --os-color-background-overlay: 54 42 31;
+  --os-color-background-panel: 54 42 31;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/default-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 255 255 255;
   --os-color-background-elevated: 232 232 232;
   --os-color-background-overlay: 255 255 255;
+  --os-color-background-panel: 241 241 241;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 79 79 79;
   --os-color-background-elevated: 51 51 51;
   --os-color-background-overlay: 51 51 51;
+  --os-color-background-panel: 51 51 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 79 79 79;
     --os-color-background-elevated: 51 51 51;
     --os-color-background-overlay: 51 51 51;
+    --os-color-background-panel: 51 51 51;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/default.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 255 255 255;
   --os-color-background-elevated: 232 232 232;
   --os-color-background-overlay: 255 255 255;
+  --os-color-background-panel: 241 241 241;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 79 79 79;
   --os-color-background-elevated: 51 51 51;
   --os-color-background-overlay: 51 51 51;
+  --os-color-background-panel: 51 51 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/forest-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 244 247 236;
   --os-color-background-elevated: 217 229 199;
   --os-color-background-overlay: 244 247 236;
+  --os-color-background-panel: 226 236 212;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 66 79 52;
   --os-color-background-elevated: 39 48 27;
   --os-color-background-overlay: 39 48 27;
+  --os-color-background-panel: 39 48 27;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 66 79 52;
     --os-color-background-elevated: 39 48 27;
     --os-color-background-overlay: 39 48 27;
+    --os-color-background-panel: 39 48 27;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/forest.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 244 247 236;
   --os-color-background-elevated: 217 229 199;
   --os-color-background-overlay: 244 247 236;
+  --os-color-background-panel: 226 236 212;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 66 79 52;
   --os-color-background-elevated: 39 48 27;
   --os-color-background-overlay: 39 48 27;
+  --os-color-background-panel: 39 48 27;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/indigo-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 247 249 252;
   --os-color-background-elevated: 221 230 240;
   --os-color-background-overlay: 247 249 252;
+  --os-color-background-panel: 230 237 245;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 51 64 90;
   --os-color-background-elevated: 28 38 59;
   --os-color-background-overlay: 28 38 59;
+  --os-color-background-panel: 28 38 59;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 51 64 90;
     --os-color-background-elevated: 28 38 59;
     --os-color-background-overlay: 28 38 59;
+    --os-color-background-panel: 28 38 59;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/indigo.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 247 249 252;
   --os-color-background-elevated: 221 230 240;
   --os-color-background-overlay: 247 249 252;
+  --os-color-background-panel: 230 237 245;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 51 64 90;
   --os-color-background-elevated: 28 38 59;
   --os-color-background-overlay: 28 38 59;
+  --os-color-background-panel: 28 38 59;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;

package/dist/themes/wine-auto.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 249 247;
   --os-color-background-elevated: 238 228 228;
   --os-color-background-overlay: 252 249 247;
+  --os-color-background-panel: 243 235 234;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 77;
   --os-color-background-elevated: 53 40 51;
   --os-color-background-overlay: 53 40 51;
+  --os-color-background-panel: 53 40 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;
@@ -230,6 +234,8 @@
     --os-color-background-accent300: 81 64 77;
     --os-color-background-elevated: 53 40 51;
     --os-color-background-overlay: 53 40 51;
+    --os-color-background-panel: 53 40 51;
+    --os-color-background-paper: 255 255 255;
     --os-color-action-active: 23 23 23;
     --os-color-action-hover: 61 61 61;
     --os-color-action-selected: 78 78 78;

package/dist/themes/wine.css

@@ -65,6 +65,8 @@
   --os-color-background-accent300: 252 249 247;
   --os-color-background-elevated: 238 228 228;
   --os-color-background-overlay: 252 249 247;
+  --os-color-background-panel: 243 235 234;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 136 136 136;
   --os-color-action-hover: 243 243 243;
   --os-color-action-selected: 227 227 227;
@@ -147,6 +149,8 @@
   --os-color-background-accent300: 81 64 77;
   --os-color-background-elevated: 53 40 51;
   --os-color-background-overlay: 53 40 51;
+  --os-color-background-panel: 53 40 51;
+  --os-color-background-paper: 255 255 255;
   --os-color-action-active: 23 23 23;
   --os-color-action-hover: 61 61 61;
   --os-color-action-selected: 78 78 78;