@deque/cauldron-styles 4.4.0-canary.f8ca4e9b → 4.5.0-canary.16adb900

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;
@@ -110,6 +111,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 {
@@ -2189,6 +2194,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.4.0-canary.f8ca4e9b",
+  "version": "4.5.0-canary.16adb900",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",