@deque/cauldron-styles 3.0.1-canary.da721d6e → 3.0.1-canary.eb6cb861

package/dist/index.css

@@ -122,6 +122,11 @@
 
 .cauldron--theme-dark {
   --workspace-background-color: var(--dark-workspace-color);
+  color-scheme: dark;
+}
+
+.cauldron--theme-light {
+  color-scheme: light;
 }
 
 html {
@@ -210,7 +215,7 @@ p {
   padding: var(--layout-padding) var(--layout-padding) 0 var(--layout-padding);
   position: fixed;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   right: 0;
   bottom: 0;
@@ -3445,58 +3450,88 @@ button.TooltipTabstop {
 
 :root {
   --panel-border-color: var(--gray-40);
-  --panel-header-background-color: var(--gray-20);
-  --panel-header-color: var(--gray-90);
-  --panel-content-background-color: var(--white);
-  --panel-content-color: var(--gray-60);
+  --panel-background-color: var(--white);
+  --panel-heading-color: var(--gray-90);
 }
 
 .Panel {
+  padding: var(--space-large);
   border: 1px solid var(--panel-border-color);
+  border-radius: 3px;
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
+  background-color: var(--panel-background-color);
 }
 
-.Panel__Header {
-  background-color: var(--panel-header-background-color);
-  color: var(--panel-header-color);
+.Panel__Heading {
+  font-size: var(--text-size-medium);
+  color: var(--panel-heading-color);
+  padding: 0;
+  margin: 0 0 var(--space-large) 0;
+  font-weight: var(--font-weight-bold);
+}
+
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --panel-border-color: #5d676f;
+  --panel-background-color: var(--accent-medium);
+  --panel-heading-color: var(--accent-light);
+}
+
+:root {
+  --issue-panel-border-color: var(--gray-40);
+  --issue-panel-header-background-color: var(--gray-20);
+  --issue-panel-header-color: var(--gray-90);
+  --issue-panel-content-background-color: var(--white);
+  --issue-panel-content-color: var(--gray-60);
+}
+
+.IssuePanel {
+  border: 1px solid var(--issue-panel-border-color);
+}
+
+.IssuePanel__Header {
+  background-color: var(--issue-panel-header-background-color);
+  color: var(--issue-panel-header-color);
   font-size: var(--text-size-normal);
   display: flex;
-  border-bottom: 1px solid var(--panel-border-color);
+  border-bottom: 1px solid var(--issue-panel-border-color);
   align-items: center;
   padding: var(--space-half) 0;
 }
 
-.Panel__Header-title {
+.IssuePanel__Header-title {
   flex-grow: 1;
   display: flex;
   font-weight: var(--font-weight-bold);
   padding-left: var(--space-small);
 }
 
-.Panel__Header-actions {
+.IssuePanel__Header-actions {
   flex-grow: 1;
   text-align: right;
   margin-right: var(--space-smallest);
 }
 
-.Panel__Content {
+.IssuePanel__Content {
   font-size: var(--text-size-smaller);
-  background-color: var(--panel-content-background-color);
-  color: var(--panel-content-color);
+  background-color: var(--issue-panel-content-background-color);
+  color: var(--issue-panel-content-color);
   padding: var(--space-small);
 }
 
 /* Dark Theme */
 
 .cauldron--theme-dark {
-  --panel-border-color: #5d676f;
-  --panel-header-background-color: var(--accent-dark);
-  --panel-header-color: var(--white);
-  --panel-content-background-color: var(--accent-medium);
-  --panel-content-color: var(--accent-light);
+  --issue-panel-border-color: #5d676f;
+  --issue-panel-header-background-color: var(--accent-dark);
+  --issue-panel-header-color: var(--white);
+  --issue-panel-content-background-color: var(--accent-medium);
+  --issue-panel-content-color: var(--accent-light);
 }
 
-.cauldron--theme-dark .Panel__Header {
-  border-bottom: 1px solid var(--panel-border-color);
+.cauldron--theme-dark .IssuePanel__Header {
+  border-bottom: 1px solid var(--issue-panel-border-color);
 }
 
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "3.0.1-canary.da721d6e",
+  "version": "3.0.1-canary.eb6cb861",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",