fix: 🐛 sizing var consistency

addons/rose/addon/components/rose/form/radio/card/index.js

@@ -3,5 +3,5 @@ import RoseFormRadioRadioComponent from '../radio';
 export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
   // =attributes
   layout = this.args.layout;
-  className = `rose-form-radio-card-${this.layout}`;
+  className = `rose-form-radio-card ${this.layout}`;
 }

addons/rose/addon/components/rose/form/radio/card/index.stories.mdx

@@ -48,8 +48,7 @@ Renders a form radiofield in a Wide format.
         'icon',
         {
           'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
         },
         null
       ),
@@ -100,8 +99,7 @@ Renders a form radiofield in a tile format.
         'icon',
         {
           'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
         },
         null
       ),

addons/rose/addon/styles/rose/components/form/_radio-card.scss

@@ -2,23 +2,68 @@
 @use '../../utilities/type';
 @use '../../variables/typography';
 
-$l: sizing.rems(l); // 16
+$size-xxl: sizing.rems(xxl); //48
-$m: sizing.rems(m); // 16
+$size-xl: sizing.rems(xl); //48
+$size-l: sizing.rems(l); // 24
+$size-m: sizing.rems(m); // 16
+$size-s: sizing.rems(s); //12
 $size-xs: sizing.rems(xs); // 8
 $size-xxs: sizing.rems(xxs); // 4
 $size-xxxs: sizing.rems(xxxs); // 2
 $size-xxxxs: sizing.rems(xxxxs); // 1
 
-.rose-form-radio-card-wide {
+
+$radio-svg: (
+  'default':
+    "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'hover':
+    "<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'focus':
+    "<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
+  'disabled':
+    "<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'disabled-checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
+  'error':
+    "<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'error-checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
+);
+
+.rose-form-radio-card {
+  &.wide {
+    width:  ($size-m) * 23;
+    .rose-icon {
+      --size: #{$size-m};
+    }
+  }
+
+  &.tile {
+    width: ($size-m) * 15;
+   
+    .rose-icon {
+      --size: #{$size-m + $size-xxs + $size-xxxs};
+    }
+    .rose-form-radio-label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: $size-m * 9;
+      &::after {
+        left:  $size-xl * 3.1;
+      }
+    }
+  }
   position: relative;
   display: flex;
   align-items: center;
-  width: ($m) * 23;
   justify-content: center;
 
   .radio-card-overlay {
     position: absolute;
-    height: $l + $size-xxs;
+    height: $size-l + $size-xxs;
     background-color: var(--ui-gray-subtler-5);
     width: 100%;
     bottom: 0;
@@ -29,32 +74,54 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
     font-weight: bold;
     font-size: typography.font-size(s);
     color: var(--black);
-    width: ($m) * 23;
+    width: ($size-m) * 23;
-    height: ($m) * 7.5;
+    height: ($size-m) * 7.4;
     display: block;
     position: relative;
     text-align: left;
     word-break: break-all;
-    border: $size-xxxxs solid #bac1cc;
+    border: $size-xxxxs solid var(--ui-gray-subtler-6);
     box-shadow: 0 $size-xxs $size-xxs
       rgba(var(--stark-components), var(--opacity-2));
     border-radius: $size-xxxs;
-    padding: $s $l;
+    padding: $size-s $size-m;
     box-sizing: border-box;
     background-color: var(--white);
     .rose-form-helper-text {
       font-weight: normal;
     }
-    .rose-icon {
+
-      padding-right: $size-xxs;
+    &::after {
-      padding-left: $size-xxs;
+      position: absolute;
+      bottom: $size-xxs;
+      right: $size-xxl * 3.7;
+      display: block;
+      width: $size-m;
+      height: $size-m;
+      transform: scale(2);
+      pointer-events: none;
+      content: ' ';
+      background: no-repeat 50%/50% 50%;
+      background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
     }
   }
   .rose-form-radio-field {
     position: absolute;
     z-index: 1;
     bottom: $size-xs;
+    opacity: 0;
+
     &:not(:disabled) {
+      &:focus {
+        ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'focus'
+              ));
+          }
+        }
+      }
       &:hover {
         ~ .rose-form-radio-label {
           border: $size-xxxxs solid var(--ui-gray);
@@ -62,10 +129,16 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
       }
       &:checked {
         ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'checked'
+              ));
+          }
           .radio-card-overlay {
             background-color: var(--action-subtler-1h);
           }
-          border: $size-xxxxs solid #1563ff;
+          border: $size-xxxxs solid var(--info-subtler-1);
         }
       }
     }
@@ -75,141 +148,48 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
         border: $size-xxxxs solid var(--ui-border-subtler-1);
         background-color: var(--ui-gray-subtler-6);
         color: var(--ui-gray-starker-1);
-      }
+        &::after {
-    }
+          background-image: url($data-svg-prefix + map-get(
-  }
+              $radio-svg,
-
+              'disabled'
-  &.error {
+            ));
-    .rose-form-radio-field {
-      &:not(:disabled):not(:focus) {
-        ~ .rose-form-radio-label {
-          .radio-card-overlay {
-            background-color: var(--failure-subtler-1);
-          }
-          border-color: var(--failure);
-        }
-        &:checked {
-          opacity: 0;
-          ~ .rose-form-radio-label {
-            &::after {
-              position: absolute;
-              bottom: $size-xxs + $size-xxxs;
-              right: sizing.rems(m) * 10.9;
-              display: block;
-              width: $m;
-              height: $m;
-              transform: scale(2);
-              pointer-events: none;
-              content: ' ';
-              background: no-repeat 50%/50% 50%;
-              background-image: url($data-svg-prefix + map-get(
-                  $radio-svg,
-                  'error-checked'
-                ));
-              z-index: 2;
-            }
-          }
         }
       }
-    }
-  }
-}
 
-.rose-form-radio-card-tile {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: ($m) * 15;
-  justify-content: center;
-
-  .radio-card-overlay {
-    position: absolute;
-    height: $l + $size-xxs;
-    background-color: var(--ui-gray-subtler-5);
-    width: 100%;
-    bottom: 0;
-    right: 0;
-  }
-  .rose-form-radio-label {
-    font-style: normal;
-    font-weight: bold;
-    font-size: typography.font-size(s);
-    color: var(--black);
-    width: ($m) * 15;
-    height: ($m) * 9;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    text-align: left;
-    word-break: break-all;
-    border: $xxxxs solid var(--ui-border);
-    box-shadow: 0 $size-xxs $size-xxs
-      rgba(var(--stark-components), var(--opacity-2));
-    border-radius: $size-xxxs;
-    padding: $m $size-xxs;
-    box-sizing: border-box;
-    background-color: var(--white);
-    .rose-form-helper-text {
-      font-weight: normal;
-    }
-  }
-  .rose-form-radio-field {
-    position: absolute;
-    z-index: 1;
-    bottom: $size-xs;
-    &:not(:disabled) {
-      &:hover {
-        ~ .rose-form-radio-label {
-          border: $xxxxs solid var(--ui-gray);
-        }
-      }
       &:checked {
         ~ .rose-form-radio-label {
-          .radio-card-overlay {
+          &::after {
-            background-color: var(--action-subtler-1h);
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'disabled-checked'
+              ));
           }
-          border: $xxxxs solid #1563ff;
         }
       }
     }
-    &:disabled {
-      ~ .rose-form-radio-label {
-        border: $xxxxs solid var(--ui-border-subtler-1);
-        background-color: var(--ui-gray-subtler-6);
-        color: var(--ui-gray-starker-1);
-      }
-    }
   }
 
   &.error {
     .rose-form-radio-field {
       &:not(:disabled):not(:focus) {
-        ~ .rose-form-radio-label {
+        &:not(:disabled):not(:focus) {
-          .radio-card-overlay {
-            background-color: var(--failure-subtler-1);
-          }
-          border-color: var(--failure);
-        }
-        &:checked {
-          opacity: 0;
           ~ .rose-form-radio-label {
             &::after {
-              position: absolute;
-              bottom: $size-xxs;
-              right: sizing.rems(m) * 6.8;
-              display: block;
-              width: $m;
-              height: $m;
-              transform: scale(2);
-              pointer-events: none;
-              content: ' ';
-              background: no-repeat 50%/50% 50%;
               background-image: url($data-svg-prefix + map-get(
                   $radio-svg,
-                  'error-checked'
+                  'error'
                 ));
-              z-index: 2;
+            }
+          }
+
+          &:checked {
+            ~ .rose-form-radio-label {
+              &::after {
+                background-image: url($data-svg-prefix + map-get(
+                    $radio-svg,
+                    'error-checked'
+                  ));
+              }
             }
           }
         }

addons/rose/tests/integration/components/rose/form/radio/card-test.js

@@ -14,7 +14,7 @@ module('Integration | Component | rose/form/radio/card', function (hooks) {
 
   test('it renders in a tile format when tile layout is applied', async function (assert) {
     await render(hbs`<Rose::Form::Radio::Card @layout="tile"/>`);
-    assert.ok(await find('.rose-form-radio-card-tile'));
+    assert.ok(await find('.tile'));
   });
 
   test('it supports an icon', async function (assert) {