@deque/cauldron-styles 4.0.0 → 4.1.0-canary.1d6f49de

package/dist/index.css

@@ -381,7 +381,7 @@ p {
   position: relative;
   text-align: center;
   text-transform: uppercase;
-  height: 36px;
+  min-height: 36px;
   min-width: 100px;
   display: inline-grid;
   grid-auto-flow: column;
@@ -1441,6 +1441,7 @@ ul.semantic-only {
   --field-background-color-disabled: #f7f7f7;
   --field-required-text-color: var(--gray-60);
   --field-label-text-color: var(--gray-90);
+  --field-label-description-text-color: var(--gray-60);
   --input-min-width: 250px;
 }
 
@@ -1456,6 +1457,7 @@ ul.semantic-only {
   --field-background-color-disabled: #5d676f;
   --field-required-text-color: var(--white);
   --field-label-text-color: var(--white);
+  --field-label-description-text-color: rgba(255, 255, 255, 0.8);
 }
 
 input,
@@ -1581,7 +1583,6 @@ textarea.Field--has-error:focus:hover,
 }
 
 .Error {
-  min-height: var(--space-large);
   color: var(--error);
   text-align: left;
   font-size: var(--text-size-smallest);
@@ -1593,7 +1594,7 @@ textarea.Field--has-error:focus:hover,
   display: block;
   position: relative;
   box-sizing: border-box;
-  margin-bottom: var(--space-smallest);
+  margin-bottom: var(--space-small);
 }
 
 .Field.is--flex-row {
@@ -1611,6 +1612,7 @@ textarea.Field--has-error:focus:hover,
   margin-bottom: 0;
   flex-direction: row-reverse;
   justify-content: flex-end;
+  flex-wrap: wrap;
 }
 
 .Checkbox {
@@ -1634,7 +1636,7 @@ textarea.Field--has-error:focus:hover,
   text-align: left;
   color: var(--field-label-text-color);
   font-size: var(--text-size-small);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
   padding-bottom: var(--space-half);
   cursor: default;
 }
@@ -1694,6 +1696,28 @@ textarea.Field--has-error:focus:hover,
   border: 1px solid var(--field-border-color);
 }
 
+.Field__labelDescription {
+  flex-basis: 100%;
+  color: var(--field-label-description-text-color);
+  font-size: var(--text-size-small);
+  font-weight: var(--font-weight-normal);
+  line-height: 1;
+  margin-left: calc(24px + 2px + var(--space-half));
+  cursor: default;
+}
+
+.Icon + .Error {
+  flex-basis: 100%;
+  margin-top: var(--space-smallest);
+}
+
+.Field__labelDescription + .Error {
+  border-top: 1px solid var(--error);
+  margin-left: calc(24px + 2px + var(--space-half));
+  padding: 4px 0;
+  margin-top: 4px;
+}
+
 .Radio__overlay,
 .Checkbox__overlay {
   border: 1px solid transparent;
@@ -1965,7 +1989,7 @@ p .Link {
 .Field__select {
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--space-smallest);
+  margin-bottom: var(--space-small);
 }
 
 .Field__select--disabled {
@@ -2246,10 +2270,6 @@ p .Link {
   box-sizing: border-box;
 }
 
-.Card__content ul li {
-  border-bottom: 1px solid var(--list-separator);
-}
-
 .Card__footer {
   padding: var(--space-small);
   text-align: center;
@@ -2294,6 +2314,7 @@ p .Link {
   background: transparent;
   border: 0;
   height: calc(var(--text-size-small) + 9px);
+  color: currentColor;
 }
 
 .Toast__dismiss:focus {
@@ -2362,6 +2383,8 @@ p .Link {
 
 .Tooltip--hidden {
   visibility: hidden;
+  /* Take the tooltip out of the DOM layout flow so it doesn't reserve space when hidden */
+  position: fixed !important;
 }
 
 .TooltipInfo {
@@ -3265,25 +3288,34 @@ button.TooltipTabstop {
 :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-header-background-color-hover: #dddddd;
   --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-header-background-color-hover: #53636e;
   --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 {
+  table-layout: auto;
   font-size: var(--text-size-small);
   border-collapse: collapse;
   text-align: left;
   width: 100%;
-  table-layout: fixed;
   overflow-wrap: break-word;
 }
 
@@ -3294,6 +3326,49 @@ button.TooltipTabstop {
   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;
+  background-color: var(--table-header-background-color-hover);
+}
+
+.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);
@@ -3927,9 +4002,290 @@ fieldset.Panel {
 
 .Breadcrumb__Link {
   font-weight: 400;
+  padding: 0;
 }
 
 .Breadcrumb__Item {
   font-weight: 500;
   color: var(--link-text-color);
 }
+
+:root {
+  --two-column-panel-border-color: var(--gray-40);
+  --two-column-panel-background-color: #fff;
+  --two-column-panel-border-radius: 3px;
+  --two-column-panel-header-height: 3.125rem;
+  --two-column-panel-animation-timing: 0.25s;
+  --two-column-panel-left-column-width: 17.5rem;
+  --two-column-panel-header-text-color: var(--gray-90);
+  --two-column-panel-accent-text-color: var(--text-color-base);
+  --two-column-panel-list-background-color: var(
+    --two-column-panel-background-color
+  );
+  --two-column-panel-group-heading-background-color: var(--accent-secondary);
+  --two-column-panel-group-heading-text-color: var(--text-base);
+}
+
+.cauldron--theme-dark {
+  --two-column-panel-border-color: #5d676f;
+  --two-column-panel-background-color: var(--accent-medium);
+  --two-column-panel-header-text-color: #fff;
+  --two-column-panel-accent-text-color: #fff;
+  --two-column-panel-list-background-color: var(--accent-dark);
+  --two-column-panel-group-heading-background-color: #b3bfc6;
+  --two-column-panel-group-heading-text-color: var(--accent-dark);
+}
+
+.TwoColumnPanel {
+  display: flex;
+  border: 1px solid var(--two-column-panel-border-color);
+  background-color: var(--two-column-panel-background-color);
+  border-radius: var(--two-column-panel-border-radius);
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.TwoColumnPanel__Header {
+  padding: 0 var(--space-small);
+  border-bottom: 1px solid var(--two-column-panel-border-color);
+  height: var(--two-column-panel-header-height);
+  line-height: var(--two-column-panel-header-height);
+  font-weight: 500;
+  color: var(--two-column-panel-header-text-color);
+  flex: 1;
+}
+
+.TwoColumnPanel__Left {
+  position: relative;
+  width: var(--two-column-panel-left-column-width);
+  border-right: 1px solid var(--two-column-panel-border-color);
+  background-color: var(--two-column-panel-background-color);
+  border-top-left-radius: var(--two-column-panel-border-radius);
+  border-bottom-left-radius: var(--two-column-panel-border-radius);
+  align-content: start;
+}
+
+.TwoColumnPanel__Right {
+  flex: 1;
+  align-content: flex-start;
+}
+
+.TwoColumnPanel__Left,
+.TwoColumnPanel__Right {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.TwoColumnPanel__Right .TwoColumnPanel__Header {
+  flex: 1;
+  font-size: var(--text-size-normal);
+}
+
+.TwoColumnPanel__Left .TwoColumnPanel__Header ~ * {
+  flex-basis: 100%;
+}
+
+.TwoColumnPanel__Left ul li {
+  list-style-type: none;
+  color: var(--gray-90);
+  font-weight: 500;
+  text-decoration: none;
+  background-color: var(--two-column-panel-list-background-color);
+  transition: ease-in-out 100ms background-color;
+  height: 4.1875rem;
+  flex-direction: column;
+  align-items: flex-start;
+  border-top: 1px solid var(--two-column-panel-border-color);
+}
+
+.TwoColumnPanel__Left ul li a {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-small);
+  text-decoration: none;
+  height: 100%;
+}
+
+.TwoColumnPanel__Left ul li a:last-child {
+  box-shadow: 0px 1px 0px 0px var(--two-column-panel-border-color);
+}
+
+.TwoColumnPanel__Left ul li a[aria-current]:not([aria-current='false']) {
+  box-shadow: inset 4px 0 0 var(--tab-shadow-color);
+}
+
+.TwoColumnPanel__Left
+  ul
+  li
+  a[aria-current]:not([aria-current='false']):last-child {
+  box-shadow: inset 4px 0 0 var(--tab-shadow-color),
+    0px 1px 0px 0px var(--two-column-panel-border-color);
+}
+
+.TwoColumnPanel__Left ul li em {
+  color: var(--two-column-panel-accent-text-color);
+  font-size: var(--text-size-smaller);
+  font-style: normal;
+  font-weight: 300;
+  display: block;
+}
+
+.TwoColumnPanel__Left ul li:hover {
+  background-color: var(--tab-inactive-background-color);
+}
+
+.TwoColumnPanel__Left ul li:first-child {
+  border-top: none;
+}
+
+.TwoColumnPanel__Left ul li:last-child {
+  border-bottom: none;
+}
+
+.TwoColumnPanel__GroupHeader {
+  border-top: 1px solid var(--two-column-panel-border-color);
+  border-bottom: 1px solid var(--two-column-panel-border-color);
+  background: var(--two-column-panel-group-heading-background-color);
+  text-transform: uppercase;
+  font-size: var(--text-size-smaller);
+  font-weight: 500;
+  padding: var(--space-smallest) var(--space-small);
+  color: var(--two-column-panel-group-heading-text-color);
+  position: sticky;
+  top: 0;
+}
+
+.TwoColumnPanel__GroupHeader h1,
+.TwoColumnPanel__GroupHeader h2,
+.TwoColumnPanel__GroupHeader h3,
+.TwoColumnPanel__GroupHeader h4,
+.TwoColumnPanel__GroupHeader h5,
+.TwoColumnPanel__GroupHeader h6 {
+  color: inherit;
+  font-size: var(--text-size-smaller);
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+}
+
+.TwoColumnPanel__Header + .TwoColumnPanel__GroupHeader,
+.TwoColumnPanel__GroupHeader:first-child {
+  border-top: none;
+}
+
+.TwoColumnPanel__Right .TwoColumnPanel__Header ~ * {
+  display: flex;
+  flex-direction: column;
+  width: unset;
+  min-height: unset;
+  flex-basis: 100%;
+  border: none;
+  padding: var(--space-small);
+}
+
+.TwoColumnPanel__Right .TwoColumnPanel__Header ~ * > :last-child {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.TwoColumnPanel__ButtonToggle button,
+.TwoColumnPanel__Close button {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid var(--two-column-panel-border-color);
+  height: var(--two-column-panel-header-height);
+  width: var(--two-column-panel-header-height);
+}
+
+.TwoColumnPanel__ButtonToggle button {
+  border-right: 1px solid var(--two-column-panel-border-color);
+}
+
+.TwoColumnPanel__Close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: none;
+}
+
+.TwoColumnPanel__ButtonToggle button:focus,
+.TwoColumnPanel__Close button:focus {
+  position: relative;
+  /* TODO: fix this z-index */
+  z-index: 2;
+}
+
+.TwoColumnPanel__ButtonToggle button:hover {
+  background-color: var(--tab-inactive-background-color);
+}
+
+/* Panel show/hide transitions */
+
+.TwoColumnPanel__Left {
+  transition: opacity ease-in-out var(--two-column-panel-animation-timing);
+}
+
+.TwoColumnPanel--hide .TwoColumnPanel__Left {
+  opacity: 0;
+}
+
+.TwoColumnPanel--show .TwoColumnPanel__Left {
+  opacity: 1;
+  animation: TwoColumnPanel--fade-in ease-in-out
+    var(--two-column-panel-animation-timing);
+}
+
+@keyframes TwoColumnPanel--fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .TwoColumnPanel__Left {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+@media (max-width: 45rem) {
+  .TwoColumnPanel__Close {
+    display: block;
+  }
+
+  .TwoColumnPanel__Left {
+    position: relative;
+    z-index: 1;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform cubic-bezier(0.5, 0.5, 0, 1)
+      var(--two-column-panel-animation-timing);
+  }
+
+  .TwoColumnPanel--hide .TwoColumnPanel__Left,
+  .TwoColumnPanel--show .TwoColumnPanel__Left {
+    margin-left: calc(var(--two-column-panel-left-column-width) * -1);
+    animation: none;
+    opacity: 1;
+  }
+
+  .TwoColumnPanel__Right .TwoColumnPanel__Header {
+    border-top: 1px solid var(--two-column-panel-border-color);
+    flex-basis: 100%;
+    font-size: var(--text-size-small);
+  }
+
+  .TwoColumnPanel__ButtonToggle button {
+    border-bottom: none;
+  }
+
+  .TwoColumnPanel--show .TwoColumnPanel__Left {
+    transform: translateX(100%);
+  }
+
+  .TwoColumnPanel--hide .TwoColumnPanel__Left {
+    transform: translateX(-10vw);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "4.0.0",
+  "version": "4.1.0-canary.1d6f49de",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -22,4 +22,4 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1"
   }
-}
+}