@deque/cauldron-styles 5.0.0-canary.09ebdf83 → 5.0.0-canary.1e5b9b01

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;
@@ -36,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);
@@ -50,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);
@@ -66,6 +70,7 @@
 
   /* spacing (padding/margin) */
   --space-smallest: 8px;
+  --space-smaller: 12px;
   --space-small: 16px;
   --space-medium: 18px;
   --space-large: 24px;
@@ -81,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;
@@ -88,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;
@@ -96,6 +105,9 @@
   --font-weight-bold: 700;
   --font-weight-ultra-bold: 900;
 
+  /* icon sizes */
+  --icon-size: 24px;
+
   /* dimensions */
   --border-width: 6px;
   --layout-padding: 9px;
@@ -151,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);
@@ -187,6 +199,11 @@ ul {
   padding: 0;
 }
 
+button {
+  font-family: var(--base-font-family);
+  font-weight: 500;
+}
+
 button,
 [role='button'] {
   display: inline-block;
@@ -936,8 +953,8 @@ a.IconButton {
 }
 
 .Dialog__close svg {
-  height: 24px;
-  width: 24px;
+  height: var(--icon-size);
+  width: var(--icon-size);
 }
 
 .Dialog__content {
@@ -1199,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 {
@@ -1823,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);
 }
 
@@ -1856,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);
 }
 
@@ -1944,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'] {
@@ -3388,11 +3406,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);
 }
 
@@ -3470,7 +3487,6 @@ button.TooltipTabstop {
   outline-offset: unset;
 }
 
-.TableHeader,
 .TableHeader--sort-ascending,
 .TableHeader--sort-descending {
   background: var(--table-header-sorting-background-color);
@@ -3781,10 +3797,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);
@@ -3813,7 +3830,7 @@ fieldset.Panel {
 }
 
 .Panel--collapsed {
-  padding: 12px;
+  --panel-padding: 12px;
 }
 
 .Panel--collapsed .Panel__Heading {
@@ -4170,6 +4187,7 @@ fieldset.Panel {
   list-style-type: none;
   padding: 0;
   margin: 0;
+  flex-wrap: wrap;
 }
 
 .Breadcrumb__Separator {
@@ -4185,6 +4203,8 @@ fieldset.Panel {
 .Breadcrumb__Item {
   font-weight: 500;
   color: var(--link-text-color);
+  display: flex;
+  flex-wrap: nowrap;
 }
 
 :root {

package/package.json

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