@deque/cauldron-styles 4.7.0-canary.d45d7341 → 4.7.0-canary.dcc3921f

package/dist/index.css

@@ -37,10 +37,10 @@
   --accent-secondary-active: var(--gray-30);
   --focus-light: #c11bde;
   --focus-dark: #eb94ff;
-  --issue-critical: #ed5959;
-  --issue-serious: #f3826b;
-  --issue-moderate: #ffdd76;
-  --issue-minor: #d3dde0;
+  --issue-critical: var(--accent-danger);
+  --issue-serious: #ed9a55;
+  --issue-moderate: var(--accent-warning);
+  --issue-minor: var(--gray-20);
 
   /* text colours */
   --text-color-base: var(--gray-60);
@@ -101,7 +101,7 @@
   --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;
@@ -1488,9 +1488,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 +1515,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 +1555,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,
@@ -2257,7 +2259,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 +2305,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);
@@ -2523,16 +2534,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 {

package/package.json

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