@deque/cauldron-styles 6.11.0 → 6.12.0-canary.67739754

package/dist/index.css

@@ -474,7 +474,7 @@ ul.semantic-only {
 :root {
   --field-background-color: var(--white);
   --field-content-color: var(--text-color-base);
-  --field-border-color: var(--gray-40);
+  --field-border-color: var(--gray-60);
   --field-border-color-underline: var(--gray-80);
   --field-border-color-hover: var(--gray-90);
   --field-border-color-focus: var(--accent-primary);
@@ -2673,6 +2673,7 @@ a.IconButton {
 /* TooltipArrow needs some dimensions to accurately calculate its positioning */
 
 .TooltipArrow {
+  position: absolute;
   height: 0.1px;
   width: 0.1px;
 }
@@ -2680,18 +2681,22 @@ a.IconButton {
 /* Adjust position to try to center the arrow in the tooltip's border */
 
 [class*='Tooltip--top'] .TooltipArrow {
+  left: 50%;
   bottom: -1px;
 }
 
 [class*='Tooltip--bottom'] .TooltipArrow {
+  left: 50%;
   top: -1px;
 }
 
 [class*='Tooltip--left'] .TooltipArrow {
+  top: 50%;
   right: -1px;
 }
 
 [class*='Tooltip--right'] .TooltipArrow {
+  top: 50%;
   left: 0;
 }
 
@@ -3420,18 +3425,21 @@ button.TooltipTabstop {
 }
 
 :root {
-  --tabs-border-color: var(--stroke-light);
+  --tabs-border-color: var(--gray-20);
   --tab-shadow-color: var(--accent-primary);
   --tab-inactive-background-color: #fff;
-  --tab-inactive-text-color: var(--gray-80);
+  --tab-inactive-text-color: var(--gray-60);
   --tab-active-background-color: #fff;
   --tab-hover-background-color: var(--gray-20);
   --tab-panel-color: var(--gray-80);
-  --tabs-active-text-color: var(--gray-90);
+  --tab-panel-vertical-padding: var(--space-smaller) var(--space-largest)
+    var(--space-largest);
+  --tab-panel-horizontal-padding: var(--space-large) var(--space-small);
+  --tabs-active-text-color: var(--accent-primary-active);
 }
 
 .cauldron--theme-dark {
-  --tabs-border-color: var(--stroke-dark);
+  --tabs-border-color: var(--accent-dark);
   --tab-shadow-color: var(--accent-info);
   --tab-inactive-background-color: var(--accent-medium);
   --tab-inactive-text-color: var(--accent-light);
@@ -3453,19 +3461,23 @@ button.TooltipTabstop {
 .Tabs--vertical ~ .TabPanel {
   vertical-align: top;
   display: inline-block;
+  padding: var(--tab-panel-vertical-padding);
+}
+
+.Tabs--horizontal ~ .TabPanel {
+  padding: var(--tab-panel-horizontal-padding);
 }
 
 .Tabs--horizontal {
   width: 100%;
-  border: 1px solid var(--tabs-border-color);
+  border-bottom: 1px solid var(--tabs-border-color);
   background-color: var(--tab-inactive-background-color);
-  border-bottom: 0;
 }
 
 .Tablist {
   display: flex;
   flex-direction: row;
-  border-left: 1px solid var(--tabs-border-color);
+  border-right: 1px solid var(--tabs-border-color);
 }
 
 .Tabs--vertical .Tablist {
@@ -3483,9 +3495,6 @@ button.TooltipTabstop {
   height: 2.875rem;
   white-space: nowrap;
   list-style-type: none;
-  border-top: 1px solid var(--tabs-border-color);
-  border-right: 1px solid var(--tabs-border-color);
-  text-decoration: underline;
   background-color: var(--tab-inactive-background-color);
   color: var(--tab-inactive-text-color);
   padding: var(--space-small);
@@ -3503,22 +3512,18 @@ button.TooltipTabstop {
   border-top: 0;
 }
 
-.cauldron--theme-light .Tabs--vertical .Tab:last-child {
-  border-bottom: 1px solid var(--tabs-border-color);
-}
-
 .Tab:hover {
   cursor: pointer;
   background-color: var(--tab-hover-background-color);
-  color: var(--tabs-active-text-color);
+  font-weight: var(--font-weight-medium);
 }
 
 .Tab--active {
   color: var(--tabs-active-text-color);
   background-color: var(--tab-active-background-color);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-normal);
   text-decoration: none;
-  box-shadow: inset 0 4px 0 var(--tab-shadow-color);
+  box-shadow: inset 0 -2px 0 var(--tab-shadow-color);
   z-index: 1;
 }
 
@@ -3527,15 +3532,13 @@ button.TooltipTabstop {
 }
 
 .Tabs--vertical .Tab--active {
-  box-shadow: inset 4px 0 0 var(--tab-shadow-color);
+  box-shadow: inset 2px 0 0 var(--tab-shadow-color);
 }
 
 .TabPanel {
   overflow-wrap: break-word;
   color: var(--tab-panel-color);
   background-color: var(--tab-active-background-color);
-  border: 1px solid var(--tabs-border-color);
-  padding: 1rem;
 }
 
 .TabPanel > * {
@@ -3548,7 +3551,7 @@ button.TooltipTabstop {
 
 .Tabs--thin .Tab {
   height: 2.125rem;
-  padding: var(--space-smallest);
+  padding: var(--space-smallest) var(--space-small);
 }
 
 :root {
@@ -3617,15 +3620,17 @@ button.TooltipTabstop {
   --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-row-border-color: var(--gray-20);
+  --table-space: var(--space-small);
   --table-header-sorting-border-color: var(--gray-90);
   --table-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+  --table-odd-row-background: var(--gray-10);
+  --table-sort-hover-focus-ring-color: var(--gray-90);
 }
 
 .cauldron--theme-dark {
   --table-header-text-color: var(--white);
-  --table-header-background-color: var(--accent-dark);
+  --table-header-background-color: var(--accent-medium);
   /* --table-header-sorting-text-color will be deprecated */
   --table-header-sorting-text-color: var(--white);
   --table-header-sorting-background-color: #53636e;
@@ -3634,6 +3639,8 @@ button.TooltipTabstop {
   --table-cell-background-color: var(--accent-medium);
   --table-row-border-color: #5d676f;
   --table-header-sorting-border-color: var(--accent-info);
+  --table-odd-row-background: var(--gray-90);
+  --table-sort-hover-focus-ring-color: var(--accent-light);
 }
 
 .Table {
@@ -3645,22 +3652,38 @@ button.TooltipTabstop {
   overflow-wrap: break-word;
 }
 
+.TableGrid {
+  display: grid;
+  grid-template-columns: var(--table-grid-template-columns, auto);
+  grid-auto-rows: auto;
+}
+
+:where(.TableGrid) :is(.TableHead, .TableBody, .TableFooter, .TableRow) {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: -1 / 1;
+}
+
 .TableHeader {
   background: var(--table-header-background-color);
   font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
-  border-bottom: 2px solid var(--table-row-border-color);
+  border-bottom: 1px solid var(--table-row-border-color);
 }
 
 .TableBody .TableHeader {
   border-bottom-width: 1px;
-  border-right: 2px solid var(--table-row-border-color);
+  border-right: 1px solid var(--table-row-border-color);
 }
 
 .TableBody .TableRow:last-child .TableHeader {
   border-bottom: none;
 }
 
+.TableBody .TableRow:nth-child(odd) .TableCell {
+  background: var(--table-odd-row-background);
+}
+
 .TableHeader[aria-sort] {
   padding: 0;
 }
@@ -3675,24 +3698,18 @@ button.TooltipTabstop {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: var(--table-space) var(--space-smallest);
+  padding: var(--table-space) var(--space-large);
 }
 
 .TableHeader__sort-button:hover {
   cursor: pointer;
-  background-color: var(--table-header-background-color-hover);
+  box-shadow: inset 0 0 0 1px var(--table-sort-hover-focus-ring-color);
 }
 
 .TableHeader__sort-button:focus {
   outline-offset: unset;
 }
 
-.TableHeader--sort-ascending,
-.TableHeader--sort-descending {
-  background: var(--table-header-sorting-background-color);
-  border-bottom: 3px solid var(--table-header-sorting-border-color);
-}
-
 /* These styles are not applying and will be deprecated */
 
 .TableHeader--sort-ascending .TableHeader__sort-button,
@@ -3713,9 +3730,8 @@ button.TooltipTabstop {
 }
 
 .TableCell,
-.TableHeader,
-.TableFooter {
-  padding: var(--table-space) var(--space-smallest);
+.TableHeader {
+  padding: var(--table-space) var(--space-large);
 }
 
 .Table:not(.Table--border) .TableRow:last-child .TableCell {
@@ -3735,19 +3751,27 @@ button.TooltipTabstop {
 }
 
 .Table--border,
-.Table--border .TableHeader,
-.Table--border .TableFooter,
-.Table--border .TableCell {
+.Table--border :is(.TableHeader, .TableFooter, .TableCell) {
   border: 1px solid var(--gray-40);
 }
 
+:where(.TableGrid).Table--border :is(.TableCell, .TableHeader) {
+  border: none;
+}
+
+:where(.TableGrid).Table--border
+  :is(.TableBody, .TableHead, .TableFooter, .TableRow) {
+  grid-gap: 1px;
+  background-color: var(--table-row-border-color);
+}
+
 .Table--border .TableHeader {
-  border-bottom: 2px solid var(--gray-40);
+  border-bottom: 1px solid var(--gray-40);
 }
 
 .Table--border .TableBody .TableHeader {
   border-bottom-width: 1px;
-  border-right: 2px solid var(--table-row-border-color);
+  border-right: 1px solid var(--table-row-border-color);
 }
 
 .cauldron--theme-dark .Table--border,
@@ -4207,6 +4231,7 @@ fieldset.Panel {
 /* TooltipArrow needs some dimensions to accurately calculate its positioning */
 
 .Popover__popoverArrow {
+  position: absolute;
   height: 0.1px;
   width: 0.1px;
 }
@@ -4223,18 +4248,22 @@ fieldset.Panel {
 /* Adjust position to try to center the arrow in the tooltip's border */
 
 [class*='Popover--top'] .Popover__popoverArrow {
+  left: 50%;
   bottom: -1px;
 }
 
 [class*='Popover--bottom'] .Popover__popoverArrow {
+  left: 50%;
   top: -1px;
 }
 
 [class*='Popover--left'] .Popover__popoverArrow {
+  top: 50%;
   right: -1px;
 }
 
 [class*='Popover--right'] .Popover__popoverArrow {
+  top: 50%;
   left: 0;
 }
 

package/package.json

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