@deque/cauldron-styles 4.1.0 → 4.2.0

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;
@@ -1583,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);
@@ -1595,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 {
@@ -1637,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;
 }
@@ -1751,7 +1750,6 @@ textarea.Field--has-error:focus:hover,
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  border: 0;
 }
 
 .Checkbox__overlay.Checkbox__overlay--focused,
@@ -1782,8 +1780,6 @@ textarea.Field--has-error:focus:hover,
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  width: 2px;
-  border: 0;
 }
 
 .Checkbox__overlay.Icon--checkbox-checked {
@@ -1990,7 +1986,7 @@ p .Link {
 .Field__select {
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--space-smallest);
+  margin-bottom: var(--space-small);
 }
 
 .Field__select--disabled {
@@ -2271,10 +2267,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;
@@ -2319,6 +2311,7 @@ p .Link {
   background: transparent;
   border: 0;
   height: calc(var(--text-size-small) + 9px);
+  color: currentColor;
 }
 
 .Toast__dismiss:focus {
@@ -2387,6 +2380,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 {
@@ -3292,6 +3287,7 @@ button.TooltipTabstop {
   --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);
@@ -3304,6 +3300,7 @@ button.TooltipTabstop {
   --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;
@@ -3311,11 +3308,11 @@ button.TooltipTabstop {
 }
 
 .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;
 }
 
@@ -3345,6 +3342,7 @@ button.TooltipTabstop {
 
 .TableHeader__sort-button:hover {
   cursor: pointer;
+  background-color: var(--table-header-background-color-hover);
 }
 
 .TableHeader__sort-button:focus {
@@ -4001,9 +3999,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.1.0",
+  "version": "4.2.0",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",