@deque/cauldron-styles 3.0.1-canary.ec8e93ab → 4.0.0-canary.2be1dbda

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;
@@ -1575,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);
@@ -1585,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 {
@@ -1604,6 +1613,10 @@ textarea.Field--has-error:focus:hover,
   justify-content: flex-end;
 }
 
+.Checkbox {
+  margin-bottom: var(--space-smallest);
+}
+
 .Checkbox + .Checkbox,
 .Radio + .Radio {
   margin-top: var(--space-smallest);
@@ -1788,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;
@@ -1820,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;
@@ -1954,6 +1965,7 @@ p .Link {
 .Field__select {
   display: flex;
   flex-direction: column;
+  margin-bottom: var(--space-smallest);
 }
 
 .Field__select--disabled {
@@ -2778,88 +2790,138 @@ button.TooltipTabstop {
   color: var(--text-color-light);
 }
 
+:root {
+  --loader-ring-size: 104px;
+  --loader-ring-thickness: 10px;
+  --loader-inner-ring-size: 4px;
+  --loader-ring-color: var(--accent-primary);
+  --loader-inner-ring-color: #fff;
+  --loader-logo-color: var(--accent-primary);
+  --loader-text-color: var(--gray-90);
+  --loader-overlay-border-color: var(--gray-40);
+  --loader-overlay-background-color: var(--workspace-background-color);
+}
+
+.cauldron--theme-dark {
+  --loader-ring-color: var(--accent-dark);
+  --loader-inner-ring-color: var(--accent-info);
+  --loader-logo-color: var(--white);
+  --loader-text-color: var(--white);
+  --loader-overlay-border-color: #5d676e;
+  --loader-overlay-background-color: var(--accent-medium);
+}
+
+.Loader--large {
+  --loader-ring-size: 192px;
+  --loader-ring-thickness: 16px;
+  --loader-inner-ring-size: calc(var(--loader-ring-thickness) * 0.5);
+}
+
+.Loader {
+  margin: 50px auto;
+  position: relative;
+  display: flex;
+  height: var(--loader-ring-size);
+  width: var(--loader-ring-size);
+  align-items: center;
+  justify-content: center;
+}
+
+.Loader:before,
+.Loader:after {
+  content: '';
+  display: block;
+  border-radius: 50%;
+}
+
+.Loader:before {
+  height: var(--loader-ring-size);
+  width: var(--loader-ring-size);
+  border: var(--loader-ring-thickness) solid var(--loader-ring-color);
+  position: absolute;
+}
+
+.Loader:after {
+  --size: calc(
+    var(--loader-ring-size) - var(--loader-ring-thickness) +
+      var(--loader-inner-ring-size)
+  );
+  height: var(--size);
+  width: var(--size);
+  border: var(--loader-inner-ring-size) solid transparent;
+  border-top: var(--loader-inner-ring-size) solid var(--loader-inner-ring-color);
+  animation: spin 1.5s linear infinite;
+}
+
 .Loader__overlay {
-  background: var(--workspace-background-color);
+  background: var(--loader-overlay-background-color);
   position: absolute;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  border: 2px solid #02101a;
+  border: 1px solid var(--loader-overlay-border-color);
   border-radius: 3px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-height: 200px;
-  min-width: 200px;
-  font-size: var(--text-size-normal);
-  padding: 1em;
-  padding-top: 0;
+  width: 260px;
+  padding: var(--space-large) var(--space-small) var(--space-small)
+    var(--space-small);
   z-index: var(--z-index-loader);
+  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.3);
+  font-size: var(--text-size-smaller);
+  color: var(--text-color-base);
+  text-align: center;
 }
 
 .cauldron--theme-dark .Loader__overlay {
-  border: 2px solid var(--white);
+  color: var(--accent-light);
 }
 
-.Loader {
-  font-size: 10px;
-  margin: 50px auto;
-  width: 7em;
-  height: 7em;
-  border-radius: 50%;
-  background: var(--gray-60);
-  background: linear-gradient(
-    to right,
-    var(--gray-60) 10%,
-    rgba(255, 255, 255, 0) 42%
-  );
-  transform: translateZ(0);
-  position: relative;
-  animation: load 1.4s linear infinite;
+.Loader__overlay__loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--loader-ring-size);
+  min-width: var(--loader-ring-size);
+  margin-bottom: var(--space-small);
 }
 
-.Loader:before {
-  width: 50%;
-  height: 50%;
-  background: var(--gray-60);
-  border-radius: 100% 0 0 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: '';
+.Loader__overlay--large .Loader__overlay__loader {
+  min-height: 192px;
+  min-width: 192px;
 }
 
-.Loader:after {
-  background: var(--workspace-background-color);
-  width: 75%;
-  height: 75%;
-  border-radius: 50%;
-  content: '';
-  margin: auto;
+.Loader__overlay__label {
+  color: var(--loader-text-color);
+  font-size: var(--text-size-normal);
+}
+
+.Loader__overlay > *:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.Loader__overlay .Loader {
   position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  margin: 0;
 }
 
-.cauldron--theme-dark .Loader {
-  background: linear-gradient(
-    to right,
-    var(--white) 10%,
-    var(--workspace-background-color) 45%
-  );
+.Loader__overlay svg {
+  color: var(--loader-logo-color);
+  height: calc(var(--loader-ring-size) * 0.7);
+  width: calc(var(--loader-ring-size) * 0.7);
 }
 
-.cauldron--theme-dark .Loader:before {
-  background: var(--white);
+.Loader__overlay--large svg {
+  height: 120px;
+  width: 120px;
 }
 
-@keyframes load {
+@keyframes spin {
   0% {
     transform: rotate(0deg);
   }
-
   100% {
     transform: rotate(360deg);
   }
@@ -3080,12 +3142,25 @@ button.TooltipTabstop {
   width: fit-content;
 }
 
+.Tabs--vertical {
+  display: inline-flex;
+}
+
+.Tabs--vertical ~ .TabPanel {
+  vertical-align: top;
+  display: inline-block;
+}
+
 .Tablist {
   display: flex;
   flex-direction: row;
   border-left: 1px solid var(--tabs-border-color);
 }
 
+.Tabs--vertical .Tablist {
+  flex-direction: column;
+}
+
 .Tab {
   display: flex;
   justify-content: center;
@@ -3101,6 +3176,18 @@ button.TooltipTabstop {
   padding: var(--space-small);
 }
 
+.Tabs--vertical .Tab {
+  justify-content: flex-start;
+}
+
+.Tabs--vertical .Tab {
+  border-right: none;
+}
+
+.cauldron--theme-light .Tabs--vertical .Tab:last-child {
+  border-bottom: 1px solid var(--tabs-border-color);
+}
+
 .Tab:hover {
   cursor: pointer;
   background-color: var(--tab-active-background-color);
@@ -3112,10 +3199,14 @@ button.TooltipTabstop {
   background-color: var(--tab-active-background-color);
   font-weight: bold;
   text-decoration: none;
-  box-shadow: inset 0px 4px 0px var(--tab-shadow-color);
+  box-shadow: inset 0 4px 0 var(--tab-shadow-color);
   z-index: 1;
 }
 
+.Tabs--vertical .Tab--active {
+  box-shadow: inset 4px 0 0 var(--tab-shadow-color);
+}
+
 .TabPanel {
   overflow-wrap: break-word;
   color: var(--tabs-active-text-color);
@@ -3129,7 +3220,7 @@ button.TooltipTabstop {
 }
 
 .TabPanel--hidden {
-  display: none;
+  display: none !important;
 }
 
 .Tabs--thin .Tab {
@@ -3141,33 +3232,57 @@ 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 {
   --table-header-text-color: var(--gray-90);
   --table-header-background-color: var(--gray-20);
+  --table-header-sorting-background-color: #caddec;
+  --table-header-sorting-text-color: var(--gray-90);
   --table-cell-text-color: var(--gray-60);
   --table-cell-background-color: var(--white);
   --table-row-border-color: var(--gray-40);
   --table-space: 11px;
+  --table-header-sorting-border-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --table-header-text-color: var(--white);
+  --table-header-background-color: var(--accent-dark);
+  --table-header-sorting-background-color: #53636e;
+  --table-header-sorting-text-color: var(--white);
+  --table-cell-text-color: var(--accent-light);
+  --table-cell-background-color: var(--accent-medium);
+  --table-row-border-color: #5d676f;
+  --table-header-sorting-border-color: var(--accent-info);
 }
 
 .Table {
@@ -3181,12 +3296,53 @@ 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);
 }
 
+.TableHeader[aria-sort] {
+  padding: 0;
+}
+
+.TableHeader .TableHeader__sort-button {
+  background-color: transparent;
+  font-family: inherit;
+  width: 100%;
+  font-size: var(--text-size-small);
+  font-weight: var(--font-weight-medium);
+  color: var(--table-header-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--table-space) var(--space-smallest);
+}
+
+.TableHeader__sort-button:hover {
+  cursor: pointer;
+}
+
+.TableHeader__sort-button:focus {
+  outline-offset: unset;
+}
+
+.TableHeader--sort-ascending,
+.TableHeader--sort-descending {
+  background: var(--table-header-sorting-background-color);
+  border-bottom: 2px solid var(--table-header-sorting-border-color);
+}
+
+.TableHeader--sort-ascending .TableHeader__sort-button,
+.TableHeader--sort-decscending .TableHeader__sort-button {
+  color: var(--table-header-sorting-text-color);
+}
+
+/* compensate the gap in height between TableHeader and Icon */
+
+.TableHeader__sort-button span {
+  margin: calc(var(--space-half) * -1) 0;
+}
+
 .TableCell {
   background: var(--table-cell-background-color);
   color: var(--table-cell-text-color);
@@ -3203,14 +3359,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);
@@ -3229,6 +3394,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 {
@@ -3240,6 +3406,7 @@ button.TooltipTabstop {
   border: 0;
   margin-bottom: var(--space-small);
   display: block;
+  background-color: var(--data-list-value-background-color);
 }
 
 .DescriptionList__item:first-child {
@@ -3259,12 +3426,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 {
@@ -3274,7 +3440,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,
@@ -3292,6 +3461,13 @@ button.TooltipTabstop {
   font-size: var(--text-size-small);
 }
 
+/* Temporary solution for insufficient color contrast until proper dark mode is implemented. */
+
+.cauldron--theme-dark .DescriptionList__details,
+.cauldron--theme-dark .DescriptionList--collapsed .DescriptionList__term {
+  color: var(--white);
+}
+
 .Stepper {
   --step-indicator-size: 2em;
   --step-line-height: 0.53em;
@@ -3414,58 +3590,110 @@ 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__Heading,
+.Panel legend {
+  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);
+}
+
+fieldset.Panel {
+  position: relative;
+  padding-top: 76px;
+}
+
+/* reset absurd browser-default legend styles */
+
+.Panel legend {
+  position: absolute;
+  top: var(--space-large);
+}
+
+.Panel--collapsed {
+  padding: 12px;
 }
 
-.Panel__Header {
-  background-color: var(--panel-header-background-color);
-  color: var(--panel-header-color);
+.Panel--collapsed .Panel__Heading {
+  margin: 0 0 12px 0;
+  font-size: var(--text-size-normal);
+}
+
+/* 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 {
@@ -3666,3 +3894,91 @@ 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);
+}
+
+.Breadcrumb ol {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.Breadcrumb__Separator {
+  color: var(--gray-40);
+  padding: 0 var(--space-half);
+}
+
+.Breadcrumb__Link {
+  font-weight: 400;
+}
+
+.Breadcrumb__Item {
+  font-weight: 500;
+  color: var(--link-text-color);
+}

package/package.json

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