Merge pull request #121 from emulsify-ds/EMULSIF-82-checkboxes-radios…

…-cards-and-links Checkboxes, Radios, Cards and Links
emulsify-ds · May 10, 2024 · ce1bf64 · ce1bf64
2 parents 6759cc5 + 7ad218c
commit ce1bf64
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 16 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -13,8 +13,9 @@
 .card__heading {
   @include heading-large($font-size: var(--font-size-h3));
 
+  color: var(--color-text-heading);
   margin: 0;
-  line-height: var(--line-heights-tight);
+  line-height: var(--line-height-tight);
 
   &-link {
     @include link;
@@ -26,12 +27,16 @@
 .card__subheading {
   @include heading-medium($font-size: var(--font-size-small));
 
-  color: var(--colors-grays-500);
+  color: var(--color-grays-500);
   margin: 0 0 var(--spacing-md);
-  line-height: var(--line-heights-tight);
+  line-height: var(--line-height-tight);
   text-transform: uppercase;
 }
 
+.card__body {
+  color: var(--color-text-body);
+}
+
 .card__link {
   @include link;
 }

diff --git a/src/components/forms/checkbox/_checkbox-item.twig b/src/components/forms/checkbox/_checkbox-item.twig
@@ -1,8 +1,8 @@
 {% set labelClasses = checkbox_item_disabled ? 'form-item--checkbox__item--label__disabled' : '' %}
 
 <li class="form-item--checkbox__item">
+	<input id="checkbox{{ key }}" name="checkbox" type="checkbox" {% if checkbox_item_checked %} checked="{{ checkbox_item_checked }}" {% endif %} {% if checkbox_item_disabled %} disabled="{{ checkbox_item_disabled }}" {% endif %}>
 	<label for="checkbox{{ key }}" class="form-item--checkbox__item--label {{ labelClasses }}">
-		<input id="checkbox{{ key }}" name="checkbox" type="checkbox" {% if checkbox_item_checked %} checked="{{ checkbox_item_checked }}" {% endif %} {% if checkbox_item_disabled %} disabled="{{ checkbox_item_disabled }}" {% endif %}>
 		{{ checkbox_item }}
 	</label>
 </li>
diff --git a/src/components/forms/checkbox/_checkbox.scss b/src/components/forms/checkbox/_checkbox.scss
@@ -6,13 +6,61 @@
 .form-item--checkboxes {
   display: flex;
   flex-flow: column nowrap;
-  gap: var(--checkbox-gap);
+  gap: var(--checkbox-spacing-gap);
 }
 
 .form-item--checkbox__item--label {
-  color: var(--checkbox-label);
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  padding-left: calc(var(--spacing-lg) + var(--spacing-sm));
+  color: var(--checkbox-color-label);
+  font-size: var(--font-size-caption);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 5px;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--checkbox-button-stroke);
+    background-color: transparent;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 7px;
+    width: 5px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+    display: none;
+  }
 }
 
 .form-item--checkbox__item--label__disabled {
-  color: var(--checkbox-label-disabled);
+  color: var(--checkbox-color-label-disabled);
+
+  &::before {
+    border-color: var(--checkbox-button-stroke-disabled);
+  }
+}
+
+.form-item--checkbox__item {
+  input[type='checkbox'] {
+    @include sr-only;
+  }
+
+  input[type='checkbox']:checked + .form-item--checkbox__item--label::before {
+    background-color: var(--checkbox-button-fill);
+  }
+
+  input[type='checkbox']:checked + .form-item--checkbox__item--label::after {
+    display: block;
+    border-color: white;
+  }
 }
diff --git a/src/components/forms/radio/_radio-item.twig b/src/components/forms/radio/_radio-item.twig
@@ -1,8 +1,8 @@
 {% set labelClasses = radio_item_disabled ? 'form-item--radio__item--label__disabled' : '' %}
 
-<li class="form-item--radio__item {{ labelClasses }}">
-	<label for="radio{{ key }}">
-		<input id="radio{{ key }}" name="radio" type="radio" class="radio" {% if radio_item_checked %} checked="{{ radio_item_checked }}" {% endif %} {% if radio_item_disabled %} disabled="{{ radio_item_disabled }}" {% endif %}>
+<li class="form-item--radio__item">
+	<input id="radio{{ key }}" name="radio" type="radio" class="radio" {% if radio_item_checked %} checked="{{ radio_item_checked }}" {% endif %} {% if radio_item_disabled %} disabled="{{ radio_item_disabled }}" {% endif %}>
+	<label for="radio{{ key }}" class="form-item--radio__item--label {{ labelClasses }}">
 		{{ radio_item }}
 	</label>
 </li>
diff --git a/src/components/forms/radio/_radio.scss b/src/components/forms/radio/_radio.scss
@@ -10,9 +10,52 @@
 }
 
 .form-item--radio__item--label {
-  color: var(--radio-label);
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  padding-left: calc(var(--spacing-lg) + var(--spacing-sm));
+  color: var(--radio-color-label);
+  font-size: var(--font-size-caption);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 5px;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--checkbox-button-stroke);
+    background-color: transparent;
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 9px;
+    width: 8px;
+    height: 8px;
+    display: none;
+    background-color: var(--radio-color-button-fill);
+    border-radius: 50%;
+  }
 }
 
 .form-item--radio__item--label__disabled {
-  color: var(--radio-label-disabled);
+  color: var(--radio-color-button-fill-disabled);
+
+  &::before {
+    border-color: var(--radio-button-stroke-disabled);
+  }
+}
+
+.form-item--radio__item {
+  input[type='radio'] {
+    @include sr-only;
+  }
+
+  input[type='radio']:checked + .form-item--radio__item--label::after {
+    display: block;
+  }
 }
diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 May 2024 20:34:40 GMT
+ * Generated on Fri, 10 May 2024 20:46:35 GMT
  */
 
 :root {

diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
@@ -186,10 +186,22 @@ $outer-container-break: var(--breakpoint-sm);
 }
 
 @mixin link {
-  color: var(--link-default);
+  color: var(--link-color-default);
   transition: all .15s;
 
   &:hover {
-    color: var(--link-hover);
+    color: var(--link-color-hover);
   }
-}
+}
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}