@deque/cauldron-styles 3.0.1-canary.b36c405c → 3.0.1-canary.b5d7a8b3

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;
@@ -230,7 +235,7 @@ p {
 
 .Layout .Main:focus {
   outline: 0;
-  border-left-color: var(--top-bar-background-color);
+  border-left-color: var(--gray-90);
 }
 
 /* the left-bar style focus indication */
@@ -294,6 +299,10 @@ p {
   color: var(--white);
 }
 
+.cauldron--theme-dark .Layout .Main:focus {
+  border-left-color: var(--white);
+}
+
 :root {
   --alert-warning-background-color: #d93251;
   --alert-warning-header-text-color: #fff;
@@ -888,7 +897,7 @@ button.Link {
 }
 
 .Dialog__content {
-  padding: calc(var(--space-small) - 4px) var(--dialog-padding);
+  padding: var(--dialog-padding);
 }
 
 .Dialog__content p:first-child {
@@ -940,6 +949,7 @@ button.Link {
   display: flex;
   justify-content: center;
   border-top: none;
+  padding-top: 0;
 }
 
 /* Dark Theme */
@@ -1574,7 +1584,6 @@ textarea.Field--has-error:focus:hover,
   min-height: var(--space-large);
   color: var(--error);
   text-align: left;
-  margin-bottom: var(--space-smallest);
   font-size: var(--text-size-smallest);
   font-weight: var(--font-weight-normal);
   padding-left: var(--space-half);
@@ -1584,6 +1593,7 @@ textarea.Field--has-error:focus:hover,
   display: block;
   position: relative;
   box-sizing: border-box;
+  margin-bottom: var(--space-smallest);
 }
 
 .Field.is--flex-row {
@@ -1599,6 +1609,17 @@ textarea.Field--has-error:focus:hover,
   box-sizing: border-box;
   position: relative;
   margin-bottom: 0;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.Checkbox {
+  margin-bottom: var(--space-smallest);
+}
+
+.Checkbox + .Checkbox,
+.Radio + .Radio {
+  margin-top: var(--space-smallest);
 }
 
 .Checkbox .Field__label,
@@ -1705,6 +1726,7 @@ textarea.Field--has-error:focus:hover,
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  border: 0;
 }
 
 .Checkbox__overlay.Checkbox__overlay--focused,
@@ -1722,6 +1744,7 @@ textarea.Field--has-error:focus:hover,
   color: #ccc;
 }
 
+.Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
 .Radio__overlay:hover:not(.Radio__overlay--disabled) {
   border: 1px solid currentColor;
 }
@@ -1735,6 +1758,7 @@ textarea.Field--has-error:focus:hover,
      -moz-appearance: none;
           appearance: none;
   width: 2px;
+  border: 0;
 }
 
 .Checkbox__overlay.Icon--checkbox-checked {
@@ -1746,6 +1770,7 @@ textarea.Field--has-error:focus:hover,
   color: #ccc;
 }
 
+.Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
 .Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
   border: 1px solid currentColor;
 }
@@ -1776,12 +1801,18 @@ textarea.Field--has-error:focus:hover,
 }
 
 :root {
-  --link-text-color: var(--accent-primary);
+  --link-text-color: var(--gray-90);
+  --link-text-color-hover: var(--accent-primary);
   --link-text-color-light: rgba(60, 122, 174, 0.1);
 }
 
+.cauldron--theme-dark {
+  --link-text-color: var(--white);
+  --link-text-color-hover: var(--accent-light);
+}
+
 .Link {
-  text-decoration: none;
+  text-decoration: underline;
   color: var(--link-text-color);
   font-weight: var(--font-weight-medium);
   display: inline-block;
@@ -1808,14 +1839,6 @@ p .Link {
   font-weight: var(--font-weight-normal);
 }
 
-.cauldron--theme-dark .Link {
-  --link-text-color: var(--accent-light);
-}
-
-.cauldron--theme-dark .Link:hover {
-  --link-text-color: var(--white);
-}
-
 .OptionsMenu {
   position: relative;
   width: 34px;
@@ -1942,10 +1965,10 @@ p .Link {
 .Field__select {
   display: flex;
   flex-direction: column;
+  margin-bottom: var(--space-smallest);
 }
 
 .Field__select--disabled {
-  background: var(--field-background-color-disabled);
   opacity: 0.65;
 }
 
@@ -2270,6 +2293,7 @@ p .Link {
 .Toast__dismiss {
   background: transparent;
   border: 0;
+  height: calc(var(--text-size-small) + 9px);
 }
 
 .Toast__dismiss:focus {
@@ -3129,24 +3153,34 @@ button.TooltipTabstop {
   --tag-text-color: var(--gray-90);
   --tag-label-text-color: var(--gray-60);
   --tag-background-color: var(--gray-20);
+  --tag-border-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --tag-text-color: var(--white);
+  --tag-label-text-color: var(--accent-light);
+  --tag-background-color: var(--accent-medium);
+  --tag-border-color: var(--accent-medium);
 }
 
 .Tag {
   color: var(--tag-text-color);
   background-color: var(--tag-background-color);
   font-size: var(--text-size-smaller);
-  border: 1px solid currentColor;
+  border: 1px solid var(--tag-border-color);
   border-radius: 11px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 2px 8px;
   width: 90px;
+  font-weight: var(--font-weight-medium);
 }
 
 .Tag__label {
   color: var(--tag-label-text-color);
   margin-right: 3px;
+  font-weight: var(--font-weight-normal);
 }
 
 :root {
@@ -3158,6 +3192,13 @@ button.TooltipTabstop {
   --table-space: 11px;
 }
 
+.cauldron--theme-dark {
+  --table-header-text-color: var(--white);
+  --table-header-background-color: var(--accent-dark);
+  --table-cell-text-color: var(--accent-light);
+  --table-cell-background-color: var(--accent-medium);
+}
+
 .Table {
   font-size: var(--text-size-small);
   border-collapse: collapse;
@@ -3169,8 +3210,7 @@ button.TooltipTabstop {
 
 .TableHeader {
   background: var(--table-header-background-color);
-  font-family: 'Lato', sans-serif;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
   border-bottom: 2px solid var(--table-row-border-color);
 }
@@ -3191,14 +3231,23 @@ button.TooltipTabstop {
 }
 
 :root {
-  --data-list-value-background-color: var(--gray-20);
+  --data-list-background-color: var(--gray-20);
+  --data-list-value-background-color: var(--white);
   --data-list-border-color: var(--gray-40);
   --data-list-text-color: var(--gray-90);
-  --data-list-value-text-color: var(--gray-60);
+  --data-list-value-text-color: var(--gray-80);
   --data-list-space: 11px;
   --data-list-value-width: 187px;
 }
 
+.cauldron--theme-dark {
+  --data-list-background-color: var(--accent-dark);
+  --data-list-value-background-color: var(--accent-medium);
+  --data-list-text-color: var(--white);
+  --data-list-value-text-color: var(--accent-light);
+  --data-list-border-color: #5d676f;
+}
+
 .DescriptionList {
   color: var(--data-list-text-color);
   font-size: var(--text-size-small);
@@ -3217,6 +3266,7 @@ button.TooltipTabstop {
   padding: var(--data-list-space);
   border-top: 1px solid var(--data-list-border-color);
   border-bottom: 1px solid var(--data-list-border-color);
+  background-color: var(--data-list-value-background-color);
 }
 
 .DescriptionList__item {
@@ -3228,6 +3278,7 @@ button.TooltipTabstop {
   border: 0;
   margin-bottom: var(--space-small);
   display: block;
+  background-color: var(--data-list-value-background-color);
 }
 
 .DescriptionList__item:first-child {
@@ -3247,12 +3298,11 @@ button.TooltipTabstop {
 }
 
 .DescriptionList__term {
-  background-color: var(--data-list-value-background-color);
+  background-color: var(--data-list-background-color);
   width: var(--data-list-value-width);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
   border-right: 1px solid var(--data-list-border-color);
   flex: 0 0 auto;
-  font-family: 'Lato', sans-serif;
 }
 
 .DescriptionList--collapsed .DescriptionList__term {
@@ -3262,7 +3312,10 @@ button.TooltipTabstop {
 }
 
 .DescriptionList__details {
+  width: 100%;
   color: var(--data-list-value-text-color);
+  background-color: var(--data-list-value-background-color);
+  font-weight: var(--font-weight-normal);
 }
 
 .DescriptionList__term,
@@ -3402,58 +3455,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 {
@@ -3654,3 +3737,69 @@ button.TooltipTabstop {
 .Address {
   line-height: var(--address-line-height);
 }
+
+.Pagination > ul {
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  font-size: var(--text-size-small);
+}
+
+.Pagination > ul > li {
+  margin-right: 5px;
+}
+
+.Pagination button {
+  height: 2.26rem;
+  width: 2.26rem;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* light theme-specific styles */
+  background: var(--gray-20);
+  border: 1px solid var(--gray-40);
+  color: var(--gray-90);
+}
+
+.Pagination button[aria-disabled='true'] {
+  color: var(--gray-40);
+  margin: 2px;
+}
+
+.Pagination button .Icon {
+  width: auto;
+  height: auto;
+}
+
+.Pagination [role='log'] {
+  margin-left: calc(var(--space-medium) - 5px);
+  margin-right: calc(var(--space-medium) - 5px);
+  color: var(--gray-60);
+}
+
+.Pagination [role='log'] strong {
+  color: var(--gray-90);
+}
+
+/*
+ * dark theme
+ */
+
+.cauldron--theme-dark .Pagination button {
+  background-color: var(--accent-medium);
+  border-color: transparent;
+}
+
+.cauldron--theme-dark .Pagination button[aria-disabled='true'] {
+  color: #5d676f;
+}
+
+.cauldron--theme-dark .Pagination [role='log'] {
+  color: var(--accent-light);
+  font-variant-numeric: tabular-nums;
+}
+
+.cauldron--theme-dark .Pagination [role='log'] strong {
+  color: var(--white);
+}

package/package.json

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