@deque/cauldron-styles 4.6.0 → 4.7.0-canary.02e686cb

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;
 }
@@ -2467,23 +2474,38 @@ p .Link {
 }
 
 :root {
-  --tooltip-background-color: var(--gray-90);
-  --tooltip-border-color: #fff;
-  --tooltip-text-color: var(--gray-20);
-  --tooltip-info-background-color: var(--gray-20);
-  --tooltip-info-border-color: var(--gray-90);
+  --tooltip-background-color: var(--gray-10);
+  --tooltip-border-color: var(--gray-90);
+  --tooltip-text-color: var(--gray-90);
+  --tooltip-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px 0px;
+  --tooltip-info-background-color: var(--white);
+  --tooltip-info-border-color: var(--accent-primary);
   --tooltip-info-text-color: var(--gray-90);
+  --tooltip-info-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px 0px;
+}
+
+/* Dark theme variables */
+
+.cauldron--theme-dark {
+  --tooltip-background-color: var(--accent-medium);
+  --tooltip-border-color: #b3bfc6;
+  --tooltip-text-color: var(--white);
+  --tooltip-info-background-color: var(--accent-dark);
+  --tooltip-info-border-color: var(--accent-info);
+  --tooltip-info-text-color: var(--white);
 }
 
 .Tooltip {
   background-color: var(--tooltip-background-color);
   border: 2px solid var(--tooltip-border-color);
+  box-shadow: var(--tooltip-box-shadow);
   color: var(--tooltip-text-color);
   font-size: var(--text-size-smaller);
   line-height: var(--text-size-normal);
   padding: var(--space-half) var(--space-small);
-  border-radius: 4px;
+  border-radius: 3px;
   z-index: var(--z-index-tooltip);
+  text-align: center;
 }
 
 .Tooltip--hidden {
@@ -2495,8 +2517,10 @@ p .Link {
 .TooltipInfo {
   background-color: var(--tooltip-info-background-color);
   border: 2px solid var(--tooltip-info-border-color);
+  box-shadow: var(--tooltip-info-box-shadow);
   color: var(--tooltip-info-text-color);
   max-width: 12.5rem;
+  padding: var(--space-half);
 }
 
 /* TooltipArrow needs some dimensions to accurately calculate its positioning */
@@ -2506,16 +2530,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 {
@@ -2537,35 +2563,14 @@ p .Link {
   transform-origin: top;
 }
 
-.TooltipArrow:after {
-  content: '';
-  position: absolute;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 5px solid var(--tooltip-background-color);
-  border-bottom: none;
-  z-index: 1;
-  transform: translateX(-50%);
-  transform-origin: top;
-}
-
-[class*='Tooltip--bottom'] .TooltipArrow:after,
 [class*='Tooltip--bottom'] .TooltipArrow:before {
   transform: translateX(-50%) rotate(180deg);
 }
 
-[class*='Tooltip--left'] .TooltipArrow:after {
-  transform: rotate(-90deg) translateY(-5px);
-}
-
 [class*='Tooltip--left'] .TooltipArrow:before {
   transform: rotate(-90deg) translateY(-6px);
 }
 
-[class*='Tooltip--right'] .TooltipArrow:after {
-  transform: rotate(90deg) translateY(4px);
-}
-
 [class*='Tooltip--right'] .TooltipArrow:before {
   transform: rotate(90deg) translateY(100%);
 }
@@ -2575,36 +2580,7 @@ p .Link {
  */
 
 .TooltipInfo .TooltipArrow:before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 7px solid var(--tooltip-info-border-color);
-}
-
-.TooltipInfo .TooltipArrow:after {
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid var(--tooltip-info-background-color);
-}
-
-.TooltipInfo[class*='Tooltip--bottom'] .TooltipArrow:after,
-.TooltipInfo[class*='Tooltip--bottom'] .TooltipArrow:before {
-  transform: translateX(-50%) rotate(180deg);
-}
-
-.TooltipInfo[class*='Tooltip--left'] .TooltipArrow:after {
-  transform: rotate(-90deg) translateY(-3px);
-}
-
-.TooltipInfo[class*='Tooltip--left'] .TooltipArrow:before {
-  transform: rotate(-90deg) translateY(-6px);
-}
-
-.TooltipInfo[class*='Tooltip--right'] .TooltipArrow:after {
-  transform: rotate(90deg) translateY(3px);
-}
-
-.TooltipInfo[class*='Tooltip--right'] .TooltipArrow:before {
-  transform: rotate(90deg) translateY(6px);
+  border-top-color: var(--tooltip-info-border-color);
 }
 
 /*
@@ -2625,7 +2601,7 @@ p .Link {
 }
 
 .TooltipHead {
-  background: var(--tooltip-info-background-color);
+  background: var(--gray-20);
   font-size: 16px;
   color: var(--gray-90);
   padding: 16px 28px;
@@ -2635,6 +2611,7 @@ p .Link {
 .TooltipContent {
   background: #fff;
   font-size: var(--font-size-smaller);
+  text-align: left;
 }
 
 .Tooltip--big ul {
@@ -4043,6 +4020,20 @@ fieldset.Panel {
   line-height: var(--address-line-height);
 }
 
+:root {
+  --pagination-button-background-color: var(--gray-20);
+  --pagination-button-border-color: var(--gray-40);
+  --pagination-button-disabled-text-color: var(--gray-40);
+  --pagination-text-accent-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --pagination-button-background-color: var(--accent-medium);
+  --pagination-button-border-color: transparent;
+  --pagination-button-disabled-text-color: var(--stroke-dark);
+  --pagination-text-accent-color: var(--white);
+}
+
 .Pagination > ul {
   list-style-type: none;
   display: flex;
@@ -4050,26 +4041,29 @@ fieldset.Panel {
   font-size: var(--text-size-small);
 }
 
-.Pagination > ul > li {
-  margin-right: 5px;
+.Pagination > ul > li:not(:last-child) {
+  margin-right: var(--space-smallest);
 }
 
-.Pagination button {
+.Pagination:not(.Pagination--thin) button {
   height: 2.26rem;
   width: 2.26rem;
-  border-radius: 2px;
+}
+
+.Pagination button {
   display: flex;
   justify-content: center;
   align-items: center;
   /* light theme-specific styles */
-  background: var(--gray-20);
-  border: 1px solid var(--gray-40);
-  color: var(--gray-90);
+  background: var(--pagination-button-background-color);
+  border: 1px solid var(--pagination-button-border-color);
+  padding: 0;
+  margin: 0;
+  border-radius: 2px;
 }
 
 .Pagination button[aria-disabled='true'] {
-  color: var(--gray-40);
-  margin: 2px;
+  color: var(--pagination-button-disabled-text-color);
 }
 
 .Pagination button .Icon {
@@ -4078,35 +4072,21 @@ fieldset.Panel {
 }
 
 .Pagination [role='log'] {
-  margin-left: calc(var(--space-medium) - 5px);
-  margin-right: calc(var(--space-medium) - 5px);
-  color: var(--gray-60);
-}
-
-.Pagination [role='log'] strong {
-  color: var(--gray-90);
+  margin: 0 var(--space-small);
+  font-variant-numeric: tabular-nums;
 }
 
-/*
- * dark theme
- */
-
-.cauldron--theme-dark .Pagination button {
-  background-color: var(--accent-medium);
-  border-color: transparent;
+.Pagination--thin [role='log'] {
+  font-size: var(--text-size-smaller);
+  margin: 0 var(--space-half);
 }
 
-.cauldron--theme-dark .Pagination button[aria-disabled='true'] {
-  color: #5d676f;
+.Pagination [role='log'] strong {
+  color: var(--pagination-text-accent-color);
 }
 
 .cauldron--theme-dark .Pagination [role='log'] {
   color: var(--accent-light);
-  font-variant-numeric: tabular-nums;
-}
-
-.cauldron--theme-dark .Pagination [role='log'] strong {
-  color: var(--white);
 }
 
 .Breadcrumb ol {
@@ -4447,8 +4427,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;
@@ -4462,13 +4443,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;
@@ -4476,7 +4457,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.6.0",
+  "version": "4.7.0-canary.02e686cb",
   "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"
   }
-}
+}