@deque/cauldron-styles 4.5.0 → 4.6.0-canary.0ff6cd94

package/dist/index.css

@@ -8,6 +8,7 @@
   /* color palette */
   --white: #ffffff;
   --dark-workspace-color: #53636e;
+  --stroke-dark: #5d676f;
   --gray-10: #fdfdfe;
   --gray-20: #f2f2f2;
   --gray-30: #e0e0e0;
@@ -20,6 +21,7 @@
   --accent-light: #d4dde0;
   --accent-success: #a5db75;
   --accent-success-light: #d1ffa4;
+  --accent-success-dark: #57a711;
   --accent-error: #d93251;
   --accent-error-active: #c92e40;
   --accent-danger: #fe6d6b;
@@ -35,6 +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;
 
   /* text colours */
   --text-color-base: var(--gray-60);
@@ -110,6 +116,10 @@
   --z-index-top-bar: 25;
   /* ensure this is 1 higher than the top bar z-index */
   --z-index-skip-container: calc(var(--z-index-top-bar) + 1);
+
+  /* radio card */
+  --radio-card-width: 255px;
+  --radio-card-height: 229px;
 }
 
 .cauldron--theme-dark {
@@ -389,6 +399,10 @@ p {
   gap: 8px;
 }
 
+.Button--tag {
+  position: relative;
+}
+
 button.Link {
   cursor: pointer;
 }
@@ -403,7 +417,8 @@ button.Link {
 .Button--primary:before,
 .Button--secondary:before,
 .Button--clear:before,
-.Button--error:before {
+.Button--error:before,
+.Button--tag:before {
   content: '';
   position: absolute;
   top: -2px;
@@ -414,6 +429,10 @@ button.Link {
   pointer-events: none;
 }
 
+.Button--tag:before {
+  border-radius: 11px;
+}
+
 .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
   box-shadow: 0 0 0 1px var(--button-outline-color-primary);
 }
@@ -426,9 +445,14 @@ button.Link {
   box-shadow: 0 0 0 1px var(--button-outline-color-error);
 }
 
+.Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0 0 0 1px var(--button-outline-color-primary);
+}
+
 .Button--primary:focus:before,
 .Button--secondary:focus:before,
-.Button--error:focus:before {
+.Button--error:focus:before,
+.Button--tag:focus:before {
   box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
 }
 
@@ -479,6 +503,11 @@ button.Link {
   background-color: var(--button-background-color-error-active);
 }
 
+.Button--tag[aria-disabled='true'],
+.Button--tag[disabled] {
+  color: var(--disabled);
+}
+
 .Button--primary .Icon,
 .Button--secondary .Icon,
 .Button--clear .Icon,
@@ -563,7 +592,8 @@ button.Link {
 .cauldron--theme-dark .Button--secondary[aria-disabled='true'],
 .cauldron--theme-dark .Button--secondary[disabled],
 .cauldron--theme-dark .Button--error[aria-disabled='true'],
-.cauldron--theme-dark .Button--error[disabled] {
+.cauldron--theme-dark .Button--error[disabled],
+.cauldron--theme-dark .Button--tag[disabled] {
   color: var(--dark-workspace-color);
 }
 
@@ -603,6 +633,12 @@ button.Link {
     0 0 0 2px var(--accent-danger);
 }
 
+.cauldron--theme-dark
+  .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0 0 0 1px var(--dark-workspace-color),
+    0 0 0 2px var(--accent-info);
+}
+
 :root {
   --icon-button-background-color-primary: var(
     --button-background-color-primary
@@ -997,52 +1033,6 @@ button.Link {
   border-top: none;
 }
 
-.Dropdown {
-  position: absolute;
-  padding: 8px;
-  background-color: var(--white);
-  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
-  border: 1px solid var(--field-border-color);
-  color: var(--text-color-base);
-  display: none;
-  list-style: none;
-}
-
-.Dropdown.Dropdown--active {
-  display: block;
-}
-
-.Dropdown:focus {
-  outline: 0;
-  border: 1px solid var(--text-color-base);
-}
-
-.Dropdown [role='menuitem'] {
-  font-size: var(--text-size-small);
-  font-weight: var(--font-weight-normal);
-  padding: 2px var(--space-smallest);
-  cursor: default;
-}
-
-.Dropdown [role='menuitem']:hover,
-.Dropdown [role='menuitem']:focus {
-  background-color: var(--link-text-color-light);
-  outline: 0;
-}
-
-.Dropdown [role='menuitem'][aria-disabled='true'] {
-  color: var(--disabled);
-}
-
-.Dropdown [role='menuitem'][aria-disabled='true']:hover {
-  background-color: transparent;
-}
-
-.TopBar .Dropdown {
-  top: var(--top-bar-height);
-  right: 0;
-}
-
 :root {
   --pointout-border-color: var(--accent-success);
   --pointout-background-color: var(--accent-medium);
@@ -1859,6 +1849,24 @@ p .Link {
   font-weight: var(--font-weight-normal);
 }
 
+:root {
+  --options-menu-text-color: var(--gray-90);
+  --options-menu-disabled-text-color: var(--disabled);
+  --options-menu-background-color: var(--white);
+  --options-menu-hover-background-color: var(--gray-20);
+  --options-menu-active-border-color: var(--accent-primary);
+  --options-menu-border-color: var(--gray-40);
+}
+
+.cauldron--theme-dark {
+  --options-menu-text-color: var(--white);
+  --options-menu-disabled-text-color: rgba(255, 255, 255, 0.5);
+  --options-menu-background-color: var(--accent-dark);
+  --options-menu-hover-background-color: var(--accent-medium);
+  --options-menu-active-border-color: var(--accent-info);
+  --options-menu-border-color: var(--stroke-dark);
+}
+
 .OptionsMenu {
   position: relative;
   width: 34px;
@@ -1867,10 +1875,10 @@ p .Link {
 
 .OptionsMenu__trigger {
   font-size: var(--text-small-medium);
-  color: var(--gray-90);
+  color: var(--options-menu-text-color);
   border-radius: 3px;
-  background-color: var(--white);
-  border: 1px solid var(--field-border-color);
+  background-color: var(--options-menu-background-color);
+  border: 1px solid var(--options-menu-border-color);
   box-sizing: border-box;
   height: 34px;
   width: 34px;
@@ -1879,21 +1887,27 @@ p .Link {
   align-items: center;
 }
 
+.OptionsMenu__trigger ~ .OptionsMenu__list {
+  top: 33px;
+}
+
 .OptionsMenu__list {
+  color: var(--options-menu-text-color);
   display: none;
   position: absolute;
+  font-size: var(--text-size-smaller);
   list-style-type: none;
   margin: 0;
   padding: 0;
-  background-color: var(--white);
-  top: 33px;
+  background-color: var(--options-menu-background-color);
   right: 0;
   left: auto;
-  border: 1px solid var(--field-border-color);
+  border: 1px solid var(--options-menu-border-color);
   z-index: var(--z-index-listbox);
   min-width: 150px;
   max-height: 140px;
   overflow-y: auto;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
 }
 
 .OptionsMenu__list[aria-expanded='true'] {
@@ -1901,15 +1915,20 @@ p .Link {
 }
 
 .OptionsMenu__list-item {
-  font-size: var(--text-size-small);
   font-weight: var(--font-weight-normal);
-  padding: 2px var(--space-smallest);
+  padding: var(--space-smallest) calc(var(--space-smallest) + var(--space-half));
   cursor: default;
+  border-bottom: 1px solid var(--options-menu-border-color);
+  position: relative;
+}
+
+.OptionsMenu__list-item:last-child {
+  border-bottom: none;
 }
 
 .OptionsMenu__list-item:hover,
 .OptionsMenu__list-item:focus {
-  background-color: var(--link-text-color-light);
+  background-color: var(--options-menu-hover-background-color);
   outline: 0;
 }
 
@@ -1918,7 +1937,7 @@ p .Link {
 }
 
 .OptionsMenu__list-item[aria-disabled='true'] {
-  color: var(--disabled);
+  color: var(--options-menu-disabled-text-color);
 }
 
 .OptionsMenu__list-item[aria-disabled='true']:hover {
@@ -2189,6 +2208,96 @@ p .Link {
   background-color: var(--accent-dark);
 }
 
+.RadioCard__overlay {
+  border-radius: 50%;
+}
+
+.RadioCard input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 1px;
+  width: 1px;
+}
+
+.RadioCard__overlay.RadioCard__overlay--focused {
+  border: 1px solid var(--focus);
+  box-shadow: inset 0 0 0 1px var(--focus), 0 0 4px 2px var(--focus-glow);
+}
+
+.RadioCard__overlay--checked.RadioCard__overlay--checked {
+  background-color: var(--gray-20);
+}
+
+.RadioCard__overlay.RadioCard__overlay--disabled,
+.RadioCard__overlay.RadioCard__overlay--disabled:hover {
+  background-color: var(--gray-30);
+}
+
+.RadioCardGroup {
+  display: flex;
+  gap: var(--space-large);
+  flex-wrap: wrap;
+}
+
+.RadioCardGroup .Radio + .Radio {
+  margin-top: 0;
+}
+
+.RadioCardGroup__Base {
+  text-align: center;
+}
+
+.RadioCardGroup__Checked {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 44px;
+}
+
+.RadioCardGroup__Icon.Icon svg {
+  color: var(--accent-success-dark);
+  height: 44px;
+  width: 44px;
+}
+
+.RadioCardGroup__Card.Card--simple {
+  width: var(--radio-card-width);
+  height: var(--radio-card-height);
+  align-content: center;
+}
+
+.RadioCardGroup__Card:hover {
+  background-color: var(--gray-20);
+}
+
+.Radio__overlay--checked.Radio__overlay--checked {
+  background-color: var(--gray-20);
+}
+
+.RadioCardGroup__Image * {
+  max-width: 100%;
+}
+
+.RadioCardGroup__Image {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.RadioCardGroup__Label {
+  font-size: var(--text-size-medium);
+  font-weight: var(--font-weight-bold);
+  color: var(--field-label-text-color);
+  margin-top: var(--space-small);
+  display: flex;
+  justify-content: center;
+}
+
 :root {
   --tile-background-color: var(--white);
   --list-separator: rgba(153, 153, 153, 0.15);
@@ -2358,23 +2467,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 {
@@ -2386,8 +2510,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 */
@@ -2428,35 +2554,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%);
 }
@@ -2466,36 +2571,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);
 }
 
 /*
@@ -2516,7 +2592,7 @@ p .Link {
 }
 
 .TooltipHead {
-  background: var(--tooltip-info-background-color);
+  background: var(--gray-20);
   font-size: 16px;
   color: var(--gray-90);
   padding: 16px 28px;
@@ -2526,6 +2602,7 @@ p .Link {
 .TooltipContent {
   background: #fff;
   font-size: var(--font-size-smaller);
+  text-align: left;
 }
 
 .Tooltip--big ul {
@@ -2687,6 +2764,11 @@ button.TooltipTabstop {
   border-left: 1px solid var(--top-bar-menuitem-separator);
 }
 
+.TopBar .OptionsMenu__list {
+  top: var(--top-bar-height);
+  right: 0;
+}
+
 /* Dark Theme */
 
 .cauldron--theme-dark {
@@ -3929,6 +4011,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;
@@ -3937,25 +4033,28 @@ fieldset.Panel {
 }
 
 .Pagination > ul > li {
-  margin-right: 5px;
+  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 {
@@ -3964,35 +4063,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 {
@@ -4301,3 +4386,82 @@ fieldset.Panel {
     display: none;
   }
 }
+
+:root {
+  --accordion-trigger-background-color: var(--white);
+  --accordion-trigger-background-color-expanded: var(--gray-20);
+  --accordion-trigger-text-color: var(--gray-90);
+  --accordion-trigger-text-color-hover: var(--accent-primary);
+  --accordion-trigger-box-shadow-hover: var(--accent-primary);
+  --accordion-trigger-border-color: var(--gray-40);
+  --accordion-trigger-icon-color: var(--gray-90);
+  --accordion-panel-background-color: var(--white);
+  --accordion-panel-text-color: var(--gray-90);
+  --accordion-panel-border-color: var(--gray-40);
+  --accordion-box-shadow-color: rgba(0, 0, 0, 0.15);
+}
+
+.cauldron--theme-dark {
+  --accordion-trigger-background-color: var(--accent-medium);
+  --accordion-trigger-background-color-expanded: var(--accent-dark);
+  --accordion-trigger-text-color: var(--white);
+  --accordion-trigger-text-color-hover: var(--accent-light);
+  --accordion-trigger-box-shadow-hover: var(--accent-info);
+  --accordion-trigger-border-color: var(--stroke-dark);
+  --accordion-trigger-icon-color: var(--white);
+  --accordion-panel-background-color: var(--accent-medium);
+  --accordion-panel-text-color: var(--white);
+  --accordion-panel-border-color: var(--stroke-dark);
+}
+
+.Accordion > :is(h1, h2, h3, h4, h5, h6):first-of-type {
+  all: unset;
+}
+
+.Accordion__trigger[type='button'] {
+  background: var(--accordion-trigger-background-color);
+  padding: calc(var(--space-small) - var(--space-half));
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 3px;
+  border: 1px solid var(--accordion-trigger-border-color);
+  font-size: var(--text-size-small);
+  margin-top: var(--space-small);
+  color: var(--accordion-trigger-text-color);
+  -webkit-text-decoration: underline solid var(--accordion-trigger-text-color);
+          text-decoration: underline solid var(--accordion-trigger-text-color);
+}
+
+button.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 {
+  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;
+  -webkit-text-decoration: underline solid var(--accordion-trigger-text-color-hover);
+          text-decoration: underline solid var(--accordion-trigger-text-color-hover);
+}
+
+button.Accordion__trigger:hover .Icon {
+  color: var(--accordion-trigger-icon-color);
+}
+
+.Accordion .Icon {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.2s;
+}
+
+.Accordion__panel {
+  background: var(--accordion-panel-background-color);
+  color: var(--accordion-panel-text-color);
+  padding: var(--space-small);
+  border: 1px solid var(--accordion-panel-border-color);
+  border-top: 0;
+  border-radius: 0 0 3px 3px;
+  box-shadow: 0 2px 3px 0 var(--accordion-box-shadow-color);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "4.5.0",
+  "version": "4.6.0-canary.0ff6cd94",
   "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"
   }
-}
+}