@deque/cauldron-styles 4.7.0 → 5.0.0-canary.07163dab

package/dist/index.css

@@ -8,6 +8,7 @@
   /* color palette */
   --white: #ffffff;
   --dark-workspace-color: #53636e;
+  --stroke-light: #b3bfc6;
   --stroke-dark: #5d676f;
   --gray-10: #fdfdfe;
   --gray-20: #f2f2f2;
@@ -20,6 +21,7 @@
   --accent-medium: #283640;
   --accent-light: #d4dde0;
   --accent-success: #a5db75;
+  --accent-success-high-contrast: #4fa630;
   --accent-success-light: #d1ffa4;
   --accent-success-dark: #57a711;
   --accent-error: #d93251;
@@ -35,12 +37,12 @@
   --accent-primary-active: #316091;
   --accent-secondary: var(--gray-20);
   --accent-secondary-active: var(--gray-30);
-  --focus-light: #c11bde;
+  --focus-light: #b51ad1;
   --focus-dark: #eb94ff;
-  --issue-critical: #ed5959;
-  --issue-serious: #f3826b;
-  --issue-moderate: #ffdd76;
-  --issue-minor: #d3dde0;
+  --issue-critical: var(--accent-danger);
+  --issue-serious: var(--accent-warning);
+  --issue-moderate: #f0c4f8;
+  --issue-minor: var(--gray-20);
 
   /* text colours */
   --text-color-base: var(--gray-60);
@@ -49,6 +51,9 @@
   --header-text-color: var(--gray-80);
   --header-text-color-dark: var(--gray-90);
 
+  /* background colours */
+  --background-light: #f0f2f5;
+
   /* accents */
   --error: var(--accent-error);
   --disabled: var(--gray-40);
@@ -65,10 +70,11 @@
 
   /* spacing (padding/margin) */
   --space-smallest: 8px;
+  --space-smaller: 12px;
   --space-small: 16px;
   --space-medium: 18px;
   --space-large: 24px;
-  --space-largest: 29px;
+  --space-largest: 32px;
   --space-half: 4px;
   --space-three-quarters: 6px;
   --space-quarter: 2px;
@@ -80,6 +86,7 @@
   --text-size-larger: 56px;
   --text-size-large: 45px;
   --text-size-large-medium: 34px;
+  --text-size-medium-large: 32px;
   --text-size-medium: 24px;
   --text-small-medium: 20px;
   --text-size-normal: 18px;
@@ -87,6 +94,9 @@
   --text-size-smaller: 13px;
   --text-size-smallest: 12px;
 
+  /* fonts */
+  --base-font-family: 'Roboto', Helvetica, Arial, sans-serif;
+
   /* font weight */
   --font-weight-thin: 100;
   --font-weight-light: 300;
@@ -95,13 +105,16 @@
   --font-weight-bold: 700;
   --font-weight-ultra-bold: 900;
 
+  /* icon sizes */
+  --icon-size: 24px;
+
   /* dimensions */
   --border-width: 6px;
   --layout-padding: 9px;
   --content-max-width: 1000px;
 
   /* z-index */
-  --z-index-tooltip: 9;
+  --z-index-tooltip: 22;
   --z-index-loader: 8;
   --z-index-scrim: 7;
   --z-index-dialog: 21;
@@ -150,7 +163,7 @@ html {
 }
 
 body {
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-family: var(--base-font-family);
   font-style: normal;
   font-weight: 400;
   color: var(--text-color-base);
@@ -186,6 +199,11 @@ ul {
   padding: 0;
 }
 
+button {
+  font-family: var(--base-font-family);
+  font-weight: 500;
+}
+
 button,
 [role='button'] {
   display: inline-block;
@@ -661,7 +679,7 @@ button.Link {
     --button-background-color-secondary-active
   );
   --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
-  --icon-button-border-color-secondary: #dadada;
+  --icon-button-border-color-secondary: var(--gray-40);
 
   --icon-button-background-color-error: var(--button-background-color-error);
   --icon-button-background-color-error-disabled: var(
@@ -689,6 +707,7 @@ button.Link {
   display: inline-flex;
   justify-content: center;
   align-content: center;
+  align-items: center;
   height: var(--button-thin-height);
   width: var(--button-thin-height);
   border-radius: 3px;
@@ -699,9 +718,16 @@ button.Link {
   padding: 0;
 }
 
+/* Ensure both <a> and <button> IconButtons are aligned correctly. See #846. */
+
+a.IconButton {
+  vertical-align: middle;
+  line-height: unset;
+}
+
 .IconButton .Icon {
-  width: 100%;
-  height: 100%;
+  height: var(--space-small);
+  width: var(--space-small);
   pointer-events: none;
 }
 
@@ -927,8 +953,8 @@ button.Link {
 }
 
 .Dialog__close svg {
-  height: 24px;
-  width: 24px;
+  height: var(--icon-size);
+  width: var(--icon-size);
 }
 
 .Dialog__content {
@@ -1190,8 +1216,8 @@ button.Link {
 .Pointout__dismiss .Icon svg,
 .Pointout__next .Icon svg,
 .Pointout__previous .Icon svg {
-  height: 24px;
-  width: 24px;
+  height: var(--icon-size);
+  width: var(--icon-size);
 }
 
 .Pointout__dismiss:hover {
@@ -1488,9 +1514,10 @@ textarea:focus,
 [role='listbox']:focus,
 [role='spinbutton']:focus {
   outline: 0;
-  border: 2px solid var(--field-border-color-focus);
-  box-shadow: 0px 0px 4px var(--field-border-color-focus-glow),
-    inset 0px 1px 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--field-border-color-focus);
+  box-shadow: 0 0 0 2px var(--field-border-color-focus),
+    0 0 5px var(--field-border-color-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 input:hover,
@@ -1514,7 +1541,7 @@ textarea:focus:hover,
 [aria-haspopup='listbox']:focus:hover,
 [role='listbox']:focus:hover,
 [role='spinbutton']:focus:hover {
-  border: 2px solid var(--field-border-color-focus-hover);
+  border: 1px solid var(--field-border-color-focus-hover);
 }
 
 input.Field--has-error,
@@ -1554,9 +1581,10 @@ textarea.Field--has-error:focus,
 [aria-haspopup='listbox'].Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
-  border: 2px solid var(--field-border-color-error);
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px inset,
-    var(--field-border-color-error-focus-glow) 0px 0px 4px 0px;
+  border: 1px solid var(--field-border-color-error);
+  box-shadow: 0 0 0 1px var(--field-border-color-error-hover),
+    inset 0 2px 3px 0 rgba(0, 0, 0, 0.05),
+    0 0 5px 0 var(--field-border-color-error-focus-glow);
 }
 
 input.Field--has-error:focus:hover,
@@ -1812,7 +1840,7 @@ textarea.Field--has-error:focus:hover,
 
 :root {
   --link-text-color: var(--gray-90);
-  --link-text-color-hover: var(--accent-primary);
+  --link-text-color-hover: #3873a3;
   --link-text-color-light: rgba(60, 122, 174, 0.1);
 }
 
@@ -1833,7 +1861,7 @@ textarea.Field--has-error:focus:hover,
 
 .Link:hover {
   text-decoration: underline;
-  color: var(--link-text-color);
+  color: var(--link-text-color-hover);
 }
 
 .Link:focus {
@@ -1845,7 +1873,7 @@ p .Link {
   margin: 0 2px;
   display: inline;
   text-decoration: underline;
-  color: var(--gray-90);
+  color: var(--link-text-color);
   font-weight: var(--font-weight-normal);
 }
 
@@ -1933,7 +1961,8 @@ p .Link {
 }
 
 .OptionsMenu__list-item:focus {
-  box-shadow: inset 0 0 0 2px var(--focus);
+  box-shadow: inset 0 0 0 1px var(--options-menu-hover-background-color),
+    inset 0 0 0 3px var(--focus);
 }
 
 .OptionsMenu__list-item[aria-disabled='true'] {
@@ -2013,7 +2042,8 @@ p .Link {
 
 .Field__select--wrapper {
   position: relative;
-  min-width: var(--select-width);
+  width: var(--select-width);
+  max-width: 100%;
 }
 
 .arrow-down {
@@ -2257,7 +2287,12 @@ p .Link {
 }
 
 .RadioCardGroup__Icon.Icon svg {
-  color: var(--accent-success-dark);
+  /**
+   * this is edge case to pass color-contrast when the radio-card is selected,
+   * it is not a color we want to live in cauldron as a variable
+   * @see https://github.com/dequelabs/cauldron/pull/736
+   */
+  color: #4f990f;
   height: 44px;
   width: 44px;
 }
@@ -2298,6 +2333,10 @@ p .Link {
   justify-content: center;
 }
 
+.cauldron--theme-dark .RadioCardGroup__Icon.Icon svg {
+  color: var(--accent-success);
+}
+
 :root {
   --tile-background-color: var(--white);
   --list-separator: rgba(153, 153, 153, 0.15);
@@ -2383,6 +2422,8 @@ p .Link {
 .Toast {
   top: var(--top-bar-height);
   position: fixed;
+  right: 0;
+  left: 0;
   color: #0b0e11;
   font-size: var(--text-size-small);
   z-index: var(--z-index-toast);
@@ -2390,8 +2431,11 @@ p .Link {
   box-sizing: border-box;
   display: flex;
   padding: 4px 15px;
-  right: 0;
-  left: 0;
+}
+
+.Toast.Toast--non-dismissible {
+  position: static;
+  margin-bottom: var(--space-small);
 }
 
 .TopBar--thin .Toast {
@@ -2499,6 +2543,8 @@ p .Link {
   border-radius: 3px;
   z-index: var(--z-index-tooltip);
   text-align: center;
+  max-width: calc(100vw - 16px);
+  word-break: break-word;
 }
 
 .Tooltip--hidden {
@@ -2523,16 +2569,18 @@ p .Link {
   width: 0.1px;
 }
 
+/* Adjust position to try to center the arrow in the tooltip's border */
+
 [class*='Tooltip--top'] .TooltipArrow {
-  bottom: 0;
+  bottom: -1px;
 }
 
 [class*='Tooltip--bottom'] .TooltipArrow {
-  top: 0;
+  top: -1px;
 }
 
 [class*='Tooltip--left'] .TooltipArrow {
-  right: 0;
+  right: -1px;
 }
 
 [class*='Tooltip--right'] .TooltipArrow {
@@ -2593,15 +2641,14 @@ p .Link {
 
 .TooltipHead {
   background: var(--gray-20);
-  font-size: 16px;
+  font-size: var(--text-size-small);
   color: var(--gray-90);
-  padding: 16px 28px;
+  padding: var(--space-small) var(--space-large);
   text-align: center;
 }
 
 .TooltipContent {
   background: #fff;
-  font-size: var(--font-size-smaller);
   text-align: left;
 }
 
@@ -2796,6 +2843,12 @@ button.TooltipTabstop {
   background-color: var(--top-bar-text-color);
 }
 
+@media (max-width: 71.25rem) {
+  .TopBar > ul {
+    border: 0;
+  }
+}
+
 :root {
   --skip-link-background-color: rgba(255, 255, 255, 0.95);
   --skip-link-focus-color: var(--focus-light);
@@ -3051,12 +3104,26 @@ button.TooltipTabstop {
 
 .Code.hljs {
   display: block;
-  overflow-x: auto;
   padding: 0.5em;
   background: var(--gray-20);
   color: var(--gray-90);
   border: 1px solid var(--gray-40);
   color: var(--accent-primary-active);
+  word-break: anywhere;
+}
+
+.Code--scrollable {
+  overflow-x: auto;
+}
+
+.Code code {
+  /* important needed to override inline styles */
+  white-space: break-spaces !important;
+}
+
+.Code--scrollable code {
+  /* important needed to override inline styles */
+  white-space: pre !important;
 }
 
 .Code .hljs-comment {
@@ -3361,11 +3428,10 @@ button.TooltipTabstop {
   font-size: var(--text-size-smaller);
   border: 1px solid var(--tag-border-color);
   border-radius: 11px;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: 2px 8px;
-  width: 90px;
   font-weight: var(--font-weight-medium);
 }
 
@@ -3386,6 +3452,7 @@ button.TooltipTabstop {
   --table-row-border-color: var(--gray-40);
   --table-space: 11px;
   --table-header-sorting-border-color: var(--gray-90);
+  --table-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
 }
 
 .cauldron--theme-dark {
@@ -3413,7 +3480,7 @@ button.TooltipTabstop {
   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: 3px solid var(--table-row-border-color);
 }
 
 .TableHeader[aria-sort] {
@@ -3445,7 +3512,7 @@ button.TooltipTabstop {
 .TableHeader--sort-ascending,
 .TableHeader--sort-descending {
   background: var(--table-header-sorting-background-color);
-  border-bottom: 2px solid var(--table-header-sorting-border-color);
+  border-bottom: 3px solid var(--table-header-sorting-border-color);
 }
 
 .TableHeader--sort-ascending .TableHeader__sort-button,
@@ -3466,21 +3533,54 @@ button.TooltipTabstop {
 }
 
 .TableCell,
-.TableHeader {
+.TableHeader,
+.TableFooter {
   padding: var(--table-space) var(--space-smallest);
 }
 
-.TableRow:last-child .TableCell {
+.Table:not(.Table--border) .TableRow:last-child .TableCell {
   border: none;
 }
 
+.Table--border {
+  box-shadow: var(--table-box-shadow);
+}
+
+.TableCell {
+  color: var(--gray-90);
+}
+
+.cauldron--theme-dark .TableCell {
+  color: var(--white);
+}
+
+.Table--border,
+.Table--border .TableHeader,
+.Table--border .TableFooter,
+.Table--border .TableCell {
+  border: 1px solid var(--gray-40);
+}
+
+.cauldron--theme-dark .Table--border,
+.cauldron--theme-dark .Table--border .TableHeader,
+.cauldron--theme-dark .Table--border .TableFooter,
+.cauldron--theme-dark .Table--border .TableCell {
+  border-color: var(--stroke-dark);
+}
+
+.TableFooter .TableCell {
+  background: var(--table-header-background-color);
+  font-weight: var(--font-weight-medium);
+  color: var(--table-header-text-color);
+}
+
 :root {
   --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-80);
-  --data-list-space: 11px;
+  --data-list-value-text-color: var(--gray-90);
+  --data-list-space: var(--space-small);
   --data-list-value-width: 187px;
 }
 
@@ -3498,7 +3598,7 @@ button.TooltipTabstop {
   border-radius: 3px;
   border: 1px solid var(--data-list-border-color);
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-  margin-bottom: var(--space-small) 0;
+  margin-bottom: var(--space-small);
 }
 
 .DescriptionList.DescriptionList--collapsed {
@@ -3520,7 +3620,7 @@ button.TooltipTabstop {
 
 .DescriptionList--collapsed .DescriptionList__item {
   border: 0;
-  margin-bottom: var(--space-small);
+  margin-bottom: 12px;
   display: block;
   background-color: var(--data-list-value-background-color);
 }
@@ -3553,6 +3653,7 @@ button.TooltipTabstop {
   background-color: transparent;
   width: auto;
   border-right: none;
+  margin-bottom: 2px;
 }
 
 .DescriptionList__details {
@@ -3560,6 +3661,7 @@ button.TooltipTabstop {
   color: var(--data-list-value-text-color);
   background-color: var(--data-list-value-background-color);
   font-weight: var(--font-weight-normal);
+  word-break: break-word;
 }
 
 .DescriptionList__term,
@@ -3584,6 +3686,16 @@ button.TooltipTabstop {
   color: var(--white);
 }
 
+@media screen and (max-width: 32rem) {
+  .DescriptionList {
+    margin-bottom: 0;
+    box-shadow: none;
+    border-bottom: 0;
+    border-left: 1px solid var(--gray-40);
+    border-right: 1px solid var(--gray-40);
+  }
+}
+
 .Stepper {
   --step-indicator-size: 2em;
   --step-line-height: 0.53em;
@@ -3708,10 +3820,11 @@ button.TooltipTabstop {
   --panel-border-color: var(--gray-40);
   --panel-background-color: var(--white);
   --panel-heading-color: var(--gray-90);
+  --panel-padding: var(--space-small);
 }
 
 .Panel {
-  padding: var(--space-large);
+  padding: var(--panel-padding);
   border: 1px solid var(--panel-border-color);
   border-radius: 3px;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
@@ -3740,7 +3853,7 @@ fieldset.Panel {
 }
 
 .Panel--collapsed {
-  padding: 12px;
+  --panel-padding: 12px;
 }
 
 .Panel--collapsed .Panel__Heading {
@@ -3864,6 +3977,18 @@ fieldset.Panel {
   transition: background-color 0.3s ease;
 }
 
+.NavBar > ul > .NavItem {
+  font-weight: var(--font-weight-normal);
+}
+
+.NavBar > ul > .NavItem--active {
+  font-weight: var(--font-weight-medium);
+}
+
+.NavBar > ul > .NavItem a {
+  font-weight: inherit;
+}
+
 .NavBar > ul > li:first-child:not(.NavBar__trigger) {
   border-left: 1px solid var(--top-nav-box-shadow-color);
 }
@@ -4030,6 +4155,7 @@ fieldset.Panel {
   display: flex;
   align-items: center;
   font-size: var(--text-size-small);
+  margin: 0;
 }
 
 .Pagination > ul > li:not(:last-child) {
@@ -4080,8 +4206,19 @@ fieldset.Panel {
   color: var(--accent-light);
 }
 
+@media (max-width: 28.125rem) {
+  .Pagination [role='log'] {
+    margin: 0;
+  }
+
+  .Pagination--thin [role='log'] {
+    margin: 0;
+  }
+}
+
 .Breadcrumb ol {
-  display: flex;
+  display: block;
+  word-break: break-all;
   align-items: center;
   list-style-type: none;
   padding: 0;
@@ -4096,11 +4233,13 @@ fieldset.Panel {
 .Breadcrumb__Link {
   font-weight: 400;
   padding: 0;
+  display: inline;
 }
 
 .Breadcrumb__Item {
   font-weight: 500;
   color: var(--link-text-color);
+  display: inline;
 }
 
 :root {
@@ -4138,13 +4277,15 @@ fieldset.Panel {
 }
 
 .TwoColumnPanel__Header {
-  padding: 0 var(--space-small);
+  /* The -2px is to account for the borders that are outside of the element and will make it line up with the left panel when there's only one line of text */
+  padding: calc(var(--space-small) - 2px);
   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);
+  min-height: var(--two-column-panel-header-height);
   font-weight: 500;
   color: var(--two-column-panel-header-text-color);
   flex: 1;
+  display: flex;
+  align-items: center;
 }
 
 .TwoColumnPanel__Left {
@@ -4281,12 +4422,16 @@ fieldset.Panel {
   margin-bottom: 0;
 }
 
+.TwoColumnPanel__ButtonToggle {
+  display: flex;
+}
+
 .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);
+  min-height: var(--two-column-panel-header-height);
   width: var(--two-column-panel-header-height);
 }
 
@@ -4418,8 +4563,9 @@ fieldset.Panel {
   all: unset;
 }
 
-.Accordion__trigger[type='button'] {
-  background: var(--accordion-trigger-background-color);
+.Accordion__trigger,
+button.Accordion__trigger {
+  background-color: var(--accordion-trigger-background-color);
   padding: calc(var(--space-small) - var(--space-half));
   width: 100%;
   display: flex;
@@ -4433,13 +4579,13 @@ fieldset.Panel {
           text-decoration: underline solid var(--accordion-trigger-text-color);
 }
 
-button.Accordion__trigger[aria-expanded='true'] {
+.Accordion__trigger[aria-expanded='true'] {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   background: var(--accordion-trigger-background-color-expanded);
 }
 
-button.Accordion__trigger:hover {
+.Accordion__trigger:hover {
   box-shadow: inset 8px 0 0 -4px var(--accordion-trigger-box-shadow-hover);
   color: var(--accordion-trigger-text-color-hover);
   transition: all 0.2s ease-in-out;
@@ -4447,7 +4593,7 @@ button.Accordion__trigger:hover {
           text-decoration: underline solid var(--accordion-trigger-text-color-hover);
 }
 
-button.Accordion__trigger:hover .Icon {
+.Accordion__trigger:hover .Icon {
   color: var(--accordion-trigger-icon-color);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "4.7.0",
+  "version": "5.0.0-canary.07163dab",
   "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"
   }
-}
+}