@deque/cauldron-styles 4.5.0-canary.b2ef84aa → 4.5.0-canary.ed401288

package/dist/index.css

@@ -20,6 +20,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 +36,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 +115,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 +398,10 @@ p {
   gap: 8px;
 }
 
+.Button--tag {
+  position: relative;
+}
+
 button.Link {
   cursor: pointer;
 }
@@ -403,7 +416,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 +428,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 +444,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 +502,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 +591,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 +632,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
@@ -2189,6 +2224,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);

package/package.json

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