@deque/cauldron-styles 2.0.0-canary.79e5b9b0 → 2.0.0-canary.83cf46e8

package/dist/index.css

@@ -157,7 +157,8 @@ h4,
 h5,
 h6,
 [role='heading'] {
-  color: var(--header-text-color-dark);
+  --heading-text-color: var(--header-text-color-dark);
+  color: var(--heading-text-color);
 }
 
 ul {
@@ -189,6 +190,16 @@ p {
   line-height: 1.618;
 }
 
+.cauldron--theme-dark h1,
+.cauldron--theme-dark h2,
+.cauldron--theme-dark h3,
+.cauldron--theme-dark h4,
+.cauldron--theme-dark h5,
+.cauldron--theme-dark h6,
+.cauldron--theme-dark [role='heading'] {
+  --heading-text-color: white;
+}
+
 .Layout {
   top: var(--top-bar-height);
   padding: var(--layout-padding) var(--layout-padding) 0 var(--layout-padding);
@@ -426,7 +437,6 @@ button.Link {
   background-color: var(--button-background-color-secondary);
   color: var(--button-text-color-dark);
   border: 1px solid var(--field-border-color);
-  --button-hover-outline-color: var(--header-text-color-dark);
 }
 
 .Button--secondary[aria-disabled='true'],
@@ -509,7 +519,6 @@ button.Link {
   --button-background-color-secondary: var(--accent-medium);
   --button-background-color-secondary-disabled: var(--accent-medium);
   --button-background-color-error-disabled: var(--accent-medium);
-  --header-text-color-dark: var(--white);
 
   --button-background-color-primary-active: #a7e9f7;
   --button-background-color-secondary-active: var(--accent-light);
@@ -1016,7 +1025,7 @@ button.Link {
 }
 
 .TopBar .Dropdown {
-  top: 42px;
+  top: var(--top-bar-height);
   right: 0;
 }
 
@@ -1402,22 +1411,38 @@ 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-underline: var(--gray-80);
-  --field-border-color-hover: var(--gray-80);
+  --field-border-color-hover: var(--gray-90);
   --field-border-color-focus: var(--accent-primary);
+  --field-border-color-focus-hover: var(--accent-primary-active);
   --field-border-color-focus-glow: rgba(60, 122, 174, 0.7);
   --field-border-color-error: var(--accent-error);
   --field-border-color-error-hover: #c42f41;
   --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
   --field-border-color-disabled: rgba(204, 204, 204, 0.25);
-  --field-border-color-disabled: rgba(204, 204, 204, 0.25);
   --field-background-color-disabled: #f7f7f7;
   --field-required-text-color: var(--gray-60);
   --field-label-text-color: var(--gray-90);
   --input-min-width: 250px;
 }
 
+.cauldron--theme-dark {
+  --field-background-color: var(--accent-medium);
+  --field-content-color: var(--white);
+  --field-border-color-hover: var(--accent-info-light);
+  --field-border-color-focus: var(--accent-info);
+  --field-border-color-focus-hover: var(--accent-info-light);
+  --field-border-color-focus-glow: var(--accent-info);
+  --field-border-color-error: var(--accent-danger);
+  --field-border-color-error-hover: #fea7a6;
+  --field-background-color-disabled: #5d676f;
+  --field-required-text-color: var(--white);
+  --field-label-text-color: var(--white);
+}
+
 input,
 select,
 textarea,
@@ -1432,6 +1457,19 @@ textarea,
   border-bottom: 1px solid var(--field-border-color-underline);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+  background-color: var(--field-background-color);
+}
+
+.cauldron--theme-dark input,
+select,
+textarea,
+[role='menuitemcheckbox'],
+[role='menuitemradio'],
+[role='textbox'],
+[aria-haspopup='listbox'],
+[role='listbox'],
+[role='spinbutton'] {
+  border: 1px solid var(--field-border-color);
 }
 
 input:focus,
@@ -1444,9 +1482,9 @@ textarea:focus,
 [role='listbox']:focus,
 [role='spinbutton']:focus {
   outline: 0;
-  border: 1px solid var(--field-border-color-focus);
-  box-shadow: inset 0 0 0 1px var(--field-border-color-focus),
-    0px 0px 4px var(--field-border-color-focus-glow);
+  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);
 }
 
 input:hover,
@@ -1461,6 +1499,18 @@ textarea:hover,
   border: 1px solid var(--field-border-color-hover);
 }
 
+input:focus:hover,
+select:focus:hover,
+textarea:focus:hover,
+[role='menuitemcheckbox']:focus:hover,
+[role='menuitemradio']:focus:hover,
+[role='textbox']:focus:hover,
+[aria-haspopup='listbox']:focus:hover,
+[role='listbox']:focus:hover,
+[role='spinbutton']:focus:hover {
+  border: 2px solid var(--field-border-color-focus-hover);
+}
+
 input.Field--has-error,
 select.Field--has-error,
 textarea.Field--has-error,
@@ -1477,6 +1527,18 @@ textarea.Field--has-error,
   color: var(--field-border-color-error);
 }
 
+input.Field--has-error:hover,
+select.Field--has-error:hover,
+textarea.Field--has-error:hover,
+[role='menuitemcheckbox'].Field--has-error:hover,
+[role='menuitemradio'].Field--has-error:hover,
+[role='textbox'].Field--has-error:hover,
+[aria-haspopup='listbox'].Field--has-error:hover,
+[role='listbox'].Field--has-error:hover,
+[role='spinbutton'].Field--has-error:hover {
+  border-color: var(--field-border-color-error-hover);
+}
+
 input.Field--has-error:focus,
 select.Field--has-error:focus,
 textarea.Field--has-error:focus,
@@ -1486,8 +1548,21 @@ textarea.Field--has-error:focus,
 [aria-haspopup='listbox'].Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
-  box-shadow: inset 0 0 0 1px var(--field-border-color-error),
-    0px 0px 4px 0 var(--field-border-color-error-focus-glow);
+  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;
+}
+
+input.Field--has-error:focus:hover,
+select.Field--has-error:focus:hover,
+textarea.Field--has-error:focus:hover,
+[role='menuitemcheckbox'].Field--has-error:focus:hover,
+[role='menuitemradio'].Field--has-error:focus:hover,
+[role='textbox'].Field--has-error:focus:hover,
+[aria-haspopup='listbox'].Field--has-error:focus:hover,
+[role='listbox'].Field--has-error:focus:hover,
+[role='spinbutton'].Field--has-error:focus:hover {
+  border-color: var(--field-border-color-error-hover);
 }
 
 .Error {
@@ -1550,7 +1625,7 @@ textarea.Field--has-error:focus,
 
 .Field__required-text::before {
   content: ' ';
-  color: var(--text-color-base);
+  color: var(--field-content-color);
 }
 
 .Field__label--has-error .Field__required-text {
@@ -1567,7 +1642,7 @@ textarea.Field--has-error:focus,
   padding: var(--space-smallest);
   box-sizing: border-box;
   font-size: var(--text-size-small);
-  color: var(--text-color-base);
+  color: var(--field-content-color);
   min-width: var(--input-min-width);
 }
 
@@ -1584,6 +1659,7 @@ textarea.Field--has-error:focus,
   min-width: var(--input-min-width);
   padding: var(--space-half);
   max-width: 500px;
+  color: var(--field-content-color);
 }
 
 .Field__textarea[disabled],
@@ -1723,10 +1799,18 @@ p .Link {
   margin: 0 2px;
   display: inline;
   text-decoration: underline;
-  color: var(--header-text-color-dark);
+  color: var(--gray-90);
   font-weight: var(--font-weight-normal);
 }
 
+.cauldron--theme-dark .Link {
+  --link-text-color: var(--accent-light);
+}
+
+.cauldron--theme-dark .Link:hover {
+  --link-text-color: var(--white);
+}
+
 .OptionsMenu {
   position: relative;
   width: 34px;
@@ -1735,7 +1819,7 @@ p .Link {
 
 .OptionsMenu__trigger {
   font-size: var(--text-small-medium);
-  color: var(--header-text-color-dark);
+  color: var(--gray-90);
   border-radius: 3px;
   background-color: var(--white);
   border: 1px solid var(--field-border-color);
@@ -1856,7 +1940,8 @@ p .Link {
 }
 
 .Field__select--disabled {
-  opacity: 0.45;
+  background: var(--field-background-color-disabled);
+  opacity: 0.65;
 }
 
 .Field__select--wrapper {
@@ -1872,7 +1957,7 @@ p .Link {
   right: var(--select-arrow-spacing);
   border-left: var(--space-half) solid transparent;
   border-right: var(--space-half) solid transparent;
-  border-top: var(--space-three-quarters) solid #6a6a6a;
+  border-top: var(--space-three-quarters) solid var(--field-content-color);
   pointer-events: none;
 }
 
@@ -1885,24 +1970,27 @@ p .Link {
   font-weight: normal;
   font-style: normal;
   font-size: var(--text-size-small);
-  color: var(--text-color-base);
+  color: var(--field-content-color);
   -webkit-text-decoration: rgb(102, 102, 102);
           text-decoration: rgb(102, 102, 102);
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);
-  background: transparent;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }
 
 .Field__select--wrapper select:not([disabled]):hover {
-  border-color: var(--gray-90);
+  border-color: var(--field-border-color-hover);
 }
 
 .Field__select--wrapper select:focus {
-  border-color: rgb(60, 122, 174);
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px inset,
-    rgba(60, 122, 174, 0.7) 0px 0px 4px 0px;
+  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);
+}
+
+.Field__select--wrapper select:focus:hover {
+  border: 2px solid var(--field-border-color-focus-hover);
 }
 
 .Field__select--wrapper select:invalid,
@@ -1911,13 +1999,21 @@ p .Link {
   border-color: var(--field-border-color-error);
 }
 
-.Field__select--wrapper select:invalid:focus,
-.Field__select--wrapper.Field--has-error select:focus,
 .Field__select--wrapper.Field--has-error select:hover {
+  border-color: var(--field-border-color-error-hover);
+}
+
+.Field__select--wrapper select:invalid:focus,
+.Field__select--wrapper.Field--has-error select:focus {
   border-width: var(--space-quarter);
-  border-color: var(--field-border-color-error);
+  border: 2px solid var(--field-border-color-error);
   box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px inset,
-    rgba(217, 50, 81, 0.7) 0px 0px 4px 0px;
+    var(--field-border-color-error-focus-glow) 0px 0px 4px 0px;
+}
+
+.Field__select--wrapper select:invalid:focus:hover,
+.Field__select--wrapper.Field--has-error select:focus:hover {
+  border-color: var(--field-border-color-error-hover);
 }
 
 :root {
@@ -2099,7 +2195,7 @@ p .Link {
 .Toast {
   top: var(--top-bar-height);
   position: fixed;
-  color: var(--top-bar-background-color-active);
+  color: #0b0e11;
   font-size: var(--text-size-small);
   z-index: var(--z-index-toast);
   align-items: center;
@@ -2161,7 +2257,7 @@ p .Link {
 }
 
 .Toast__message .Link {
-  color: var(--top-bar-background-color-active);
+  color: var(--accent-dark);
   font-size: var(--text-size-small);
   font-weight: var(--font-weight-light);
   text-decoration: underline;
@@ -2177,7 +2273,7 @@ p .Link {
 }
 
 .Toast:focus .Toast__message > .Toast__message-content {
-  border-bottom-color: var(--top-bar-background-color-active);
+  border-bottom-color: var(--accent-dark);
 }
 
 :root {
@@ -2339,7 +2435,7 @@ p .Link {
 .TooltipHead {
   background: var(--tooltip-info-background-color);
   font-size: 16px;
-  color: var(--header-text-color-dark);
+  color: var(--gray-90);
   padding: 16px 28px;
   text-align: center;
 }
@@ -2519,28 +2615,13 @@ button.TooltipTabstop {
 }
 
 .cauldron--theme-dark .TopBar {
-  background-color: var(--top-bar-background-color);
-  color: var(--top-bar-text-color);
-  border-bottom: solid 1px var(--top-bar-border-bottom-color);
-}
-
-.cauldron--theme-dark .MenuItem--separator {
-  border-left: 1px solid var(--top-bar-menuitem-separator);
-}
-
-.cauldron--theme-dark .TopBar__menu-trigger {
-  background-color: var(--top-bar-background-color);
-  color: var(--top-bar-text-color);
+  border-bottom: none;
 }
 
 .cauldron--theme-dark .TopBar [aria-current='page'] {
   background-color: var(--top-bar-background-color-active);
 }
 
-.cauldron--theme-dark a {
-  color: var(--top-bar-text-color);
-}
-
 .cauldron--theme-dark .TopBar > ul > .TopBar__menu-trigger {
   border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
@@ -2928,13 +3009,11 @@ button.TooltipTabstop {
 }
 
 .Tab {
-  display: block;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 2.875rem;
-  width: 9.375rem;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   list-style-type: none;
   border-top: 1px solid var(--tabs-border-color);
   border-right: 1px solid var(--tabs-border-color);
@@ -2980,16 +3059,6 @@ button.TooltipTabstop {
   padding: var(--space-smallest);
 }
 
-/* variant */
-
-.Tablist--full-width {
-  justify-content: space-evenly;
-}
-
-.Tab--full-width {
-  width: 100%;
-}
-
 :root {
   --tag-text-color: var(--gray-90);
   --tag-label-text-color: var(--gray-60);
@@ -3284,12 +3353,14 @@ button.TooltipTabstop {
   display: flex;
   border-bottom: 1px solid var(--panel-border-color);
   align-items: center;
+  padding: var(--space-half) 0;
 }
 
 .Panel__Header-title {
   flex-grow: 1;
   display: flex;
-  padding: var(--space-half) 0;
+  font-weight: var(--font-weight-bold);
+  padding-left: var(--space-small);
 }
 
 .Panel__Header-actions {
@@ -3307,7 +3378,7 @@ button.TooltipTabstop {
 
 /* Dark Theme */
 
-.cauldron--theme-dark .Panel {
+.cauldron--theme-dark {
   --panel-border-color: #5d676f;
   --panel-header-background-color: var(--accent-dark);
   --panel-header-color: var(--white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "2.0.0-canary.79e5b9b0",
+  "version": "2.0.0-canary.83cf46e8",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",