@deque/cauldron-styles 4.5.0 → 4.6.0-canary.18f99f9b

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);
@@ -2687,6 +2796,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 {
@@ -4301,3 +4415,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.18f99f9b",
   "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"
   }
-}
+}