@deque/cauldron-styles 5.0.0-canary.f7bc1da2 → 5.1.0-canary.053f6fda

package/dist/index.css

@@ -37,7 +37,7 @@
   --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: var(--accent-danger);
   --issue-serious: var(--accent-warning);
@@ -94,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;
@@ -102,6 +105,9 @@
   --font-weight-bold: 700;
   --font-weight-ultra-bold: 900;
 
+  /* icon sizes */
+  --icon-size: 24px;
+
   /* dimensions */
   --border-width: 6px;
   --layout-padding: 9px;
@@ -157,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);
@@ -193,6 +199,11 @@ ul {
   padding: 0;
 }
 
+button {
+  font-family: var(--base-font-family);
+  font-weight: 500;
+}
+
 button,
 [role='button'] {
   display: inline-block;
@@ -942,8 +953,8 @@ a.IconButton {
 }
 
 .Dialog__close svg {
-  height: 24px;
-  width: 24px;
+  height: var(--icon-size);
+  width: var(--icon-size);
 }
 
 .Dialog__content {
@@ -1205,8 +1216,8 @@ a.IconButton {
 .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 {
@@ -1862,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);
 }
 
@@ -2031,7 +2042,8 @@ p .Link {
 
 .Field__select--wrapper {
   position: relative;
-  min-width: var(--select-width);
+  width: var(--select-width);
+  max-width: 100%;
 }
 
 .arrow-down {
@@ -2410,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);
@@ -2417,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 {
@@ -2526,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 {
@@ -3085,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 {
@@ -3395,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);
 }
 
@@ -3629,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,
@@ -3787,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-small);
+  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);
@@ -3819,7 +3853,7 @@ fieldset.Panel {
 }
 
 .Panel--collapsed {
-  padding: 12px;
+  --panel-padding: 12px;
 }
 
 .Panel--collapsed .Panel__Heading {
@@ -3943,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);
 }
@@ -4171,7 +4217,8 @@ fieldset.Panel {
 }
 
 .Breadcrumb ol {
-  display: flex;
+  display: block;
+  word-break: break-all;
   align-items: center;
   list-style-type: none;
   padding: 0;
@@ -4186,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 {
@@ -4228,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 {
@@ -4371,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);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.0.0-canary.f7bc1da2",
+  "version": "5.1.0-canary.053f6fda",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",