From e0be558f929c4de08dc81739a8a79f1f3893ec0a Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 14:59:44 -0500
Subject: [PATCH 1/8] Refactor form.scss to CSS using BEM

---
 src/components/{form.scss => form.css} | 393 ++++++++++++++-----------
 1 file changed, 221 insertions(+), 172 deletions(-)
 rename src/components/{form.scss => form.css} (65%)

diff --git a/src/components/form.scss b/src/components/form.css
similarity index 65%
rename from src/components/form.scss
rename to src/components/form.css
index 52570ffd..d1e612f4 100644
--- a/src/components/form.scss
+++ b/src/components/form.css
@@ -1,5 +1,5 @@
-%form-control-global {
-  // Public API (allowed to be overridden)
+.form-control {
+  /* Public API (customizable component options) */
   --_op-form-control-height-small: var(--op-input-height-small);
   --_op-form-control-height-medium: var(--op-input-height-medium);
   --_op-form-control-height-large: var(--op-input-height-large);
@@ -7,14 +7,14 @@
   --_op-form-control-font-medium: var(--op-font-small);
   --_op-form-control-font-large: var(--op-font-small);
 
-  // Private API (don't touch these)
+  /* Private API (component option defaults) */
   --__op-form-control-height: var(--_op-form-control-height-large);
   --__op-form-control-font-size: var(--_op-form-control-font-large);
 
   min-width: var(--__op-form-control-height);
   height: var(--__op-form-control-height);
 
-  // Size Modifiers
+  /* Size Modifiers */
   &.form-control--small {
     --__op-form-control-height: var(--_op-form-control-height-small);
     --__op-form-control-font-size: var(--_op-form-control-font-small);
@@ -29,13 +29,55 @@
     --__op-form-control-height: var(--_op-form-control-height-large);
     --__op-form-control-font-size: var(--_op-form-control-font-large);
   }
+
+  /* Disabled State */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--_op-form-control-opacity-disabled);
+  }
+
+  /* Readonly State */
+  &[readonly] {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    color: var(--op-color-on-background);
+    pointer-events: none;
+    user-select: none;
+
+    /* stylelint-disable selector-no-vendor-prefix */
+    &::-webkit-input-placeholder {
+      color: var(--op-color-on-background);
+    }
+    /* stylelint-enable selector-no-vendor-prefix */
+  }
 }
 
-%form-control-input-global {
-  // Public API (allowed to be overridden)
+/* Radio or Checkbox Form Control */
+.form-control:is([type='radio'], [type='checkbox']) {
+  /* Public API (customizable component options) */
+  --_op-form-control-height-small: var(--op-space-medium);
+  --_op-form-control-height-medium: var(--op-space-large);
+  --_op-form-control-height-large: var(--op-space-x-large);
+
+  width: var(--__op-form-control-height);
+  height: var(--__op-form-control-height);
+  align-self: center;
+  margin: 0;
+  accent-color: var(--op-color-primary-base);
+  cursor: pointer;
+
+  & + label {
+    align-self: center;
+  }
+}
+
+/* Any Form Control that is not a radio or checkbox */
+.form-control:not([type='radio'], [type='checkbox']) {
+  /* Public API (customizable component options) */
   --_op-form-control-opacity-disabled: var(--op-opacity-disabled);
 
-  // Private API (don't touch these)
+  /* Private API (component option defaults) */
   --__op-form-control-border-color: var(--op-color-neutral-plus-four);
 
   display: block;
@@ -53,25 +95,25 @@
   font-size: var(--__op-form-control-font-size);
   line-height: var(--op-line-height-base);
 
-  // Hover State
-  &:hover:not(:disabled, [readonly]) {
-    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
-  }
-
-  // Focus State
+  /* Focus State */
   &:focus,
   &:focus-within,
   &:focus-visible {
     outline: none;
   }
 
+  /* Hover State */
+  &:hover:not(:disabled, [readonly]) {
+    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
+  }
+
   &:focus-visible:not([readonly]) {
     background-color: var(--op-color-primary-plus-seven);
     box-shadow: var(--op-input-focus-primary);
     color: var(--op-color-primary-on-plus-seven);
   }
 
-  // Borderless State
+  /* Borderless State */
   &.form-control--no-border {
     background-color: transparent;
     box-shadow: none;
@@ -83,7 +125,7 @@
       color: var(--op-color-primary-on-plus-seven);
     }
 
-    // Borderless + Hover State
+    /* Borderless + Hover State */
     &:hover:not(:disabled, [readonly]) {
       background-color: var(--op-color-primary-plus-eight);
       box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
@@ -92,25 +134,57 @@
   }
 }
 
-%form-control-inline-global {
-  // Public API (allowed to be overridden)
-  --_op-form-control-height-small: var(--op-space-medium);
-  --_op-form-control-height-medium: var(--op-space-large);
-  --_op-form-control-height-large: var(--op-space-x-large);
-
-  width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
-  align-self: center;
-  margin: 0;
-  accent-color: var(--op-color-primary-base);
+/* Color Form Control */
+.form-control[type='color'] {
+  padding: var(--op-space-2x-small);
   cursor: pointer;
 
-  & + label {
-    align-self: center;
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--op-radius-medium);
+  }
+}
+
+/* File Form Control */
+.form-control[type='file'] {
+  padding-block: 0;
+
+  &::file-selector-button {
+    --__op-btn-base-height: var(--op-input-height-small);
+    --__op-btn-height: var(--__op-btn-base-height);
+
+    display: inline-flex;
+    min-height: var(--__op-btn-height);
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--op-space-x-small);
+    border: none;
+    border-radius: var(--op-radius-medium);
+    appearance: none;
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
+    color: var(--op-color-neutral-on-plus-eight);
+    cursor: pointer;
+    font-size: var(--op-font-x-small);
+    font-weight: var(--op-font-weight-normal);
+    gap: var(--op-space-x-small);
+    margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+    text-align: center;
+    text-decoration: none;
+    transition: var(--op-transition-input);
+    white-space: nowrap;
+  }
+
+  &.form-control--small::file-selector-button {
+    --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
   }
 }
 
-%dropdown-arrow {
+select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
   padding-right: var(--op-space-3x-large);
   appearance: none;
   background-image: var(--op-encoded-images-dropdown-arrow);
@@ -122,6 +196,16 @@
   cursor: pointer;
 }
 
+select.form-control[multiple] {
+  min-height: calc(2 * var(--__op-form-control-height));
+}
+
+textarea.form-control:not([type='radio'], [type='checkbox']) {
+  max-width: 100%;
+  height: calc(2 * var(--__op-form-control-height));
+  min-height: var(--__op-form-control-height);
+}
+
 .form-label {
   color: var(--op-color-on-background);
   font-size: var(--op-font-x-small);
@@ -130,163 +214,65 @@
   line-height: var(--op-line-height-base);
 }
 
-.form-control {
-  @extend %form-control-global;
-
-  &:not([type='radio'], [type='checkbox']) {
-    @extend %form-control-input-global;
-  }
-
-  &[type='color'] {
-    padding: var(--op-space-2x-small);
-    cursor: pointer;
+.form-control-input {
+  /* Public API (customizable component options) */
+  --_op-form-control-opacity-disabled: var(--op-opacity-disabled);
 
-    &::-webkit-color-swatch-wrapper {
-      padding: 0;
-    }
+  /* Private API (component option defaults) */
+  --__op-form-control-border-color: var(--op-color-neutral-plus-four);
 
-    &::-webkit-color-swatch {
-      border: none;
-      border-radius: var(--op-radius-medium);
-    }
-  }
+  display: block;
+  width: 100%;
+  min-width: var(--__op-form-control-height);
+  height: var(--__op-form-control-height);
+  padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
+  border: none;
+  border-radius: var(--op-radius-medium);
+  appearance: none;
+  background-color: var(--op-color-neutral-plus-eight);
+  box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
+  color: var(--op-color-neutral-on-plus-eight);
+  cursor: text;
+  font-size: var(--__op-form-control-font-size);
+  line-height: var(--op-line-height-base);
 
-  &[type='radio'],
-  &[type='checkbox'] {
-    @extend %form-control-inline-global;
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
   }
 
-  &[type='file'] {
-    padding-block: 0;
-
-    &::file-selector-button {
-      --__op-btn-base-height: var(--op-input-height-small);
-      --__op-btn-height: var(--__op-btn-base-height);
-
-      display: inline-flex;
-      min-height: var(--__op-btn-height);
-      align-items: center;
-      justify-content: center;
-      padding: 0 var(--op-space-x-small);
-      border: none;
-      border-radius: var(--op-radius-medium);
-      appearance: none;
-      background-color: var(--op-color-neutral-plus-eight);
-      box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
-      color: var(--op-color-neutral-on-plus-eight);
-      cursor: pointer;
-      font-size: var(--op-font-x-small);
-      font-weight: var(--op-font-weight-normal);
-      gap: var(--op-space-x-small);
-      margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
-      text-align: center;
-      text-decoration: none;
-      transition: var(--op-transition-input);
-      white-space: nowrap;
-    }
-
-    &.form-control--small::file-selector-button {
-      --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
-    }
+  /* Hover State */
+  &:hover:not(:disabled, [readonly]) {
+    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
   }
 
-  // Disabled State
-  &:disabled {
-    cursor: not-allowed;
-    opacity: var(--_op-form-control-opacity-disabled);
+  &:focus-visible:not([readonly]) {
+    background-color: var(--op-color-primary-plus-seven);
+    box-shadow: var(--op-input-focus-primary);
+    color: var(--op-color-primary-on-plus-seven);
   }
 
-  // Readonly State
-  &[readonly] {
-    padding: 0;
-    background: transparent;
+  /* Borderless State */
+  &.form-control--no-border {
+    background-color: transparent;
     box-shadow: none;
-    color: var(--op-color-on-background);
-    pointer-events: none;
-    user-select: none;
-
-    /* stylelint-disable selector-no-vendor-prefix */
-    &::-webkit-input-placeholder {
-      color: var(--op-color-on-background);
-    }
-    /* stylelint-enable selector-no-vendor-prefix */
-  }
-}
-
-select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
-  @extend %dropdown-arrow;
-}
-
-select.form-control[multiple] {
-  min-height: calc(2 * var(--__op-form-control-height));
-}
-
-textarea.form-control:not([type='radio'], [type='checkbox']) {
-  max-width: 100%;
-  height: calc(2 * var(--__op-form-control-height));
-  min-height: var(--__op-form-control-height);
-}
-
-.form-group--error {
-  /* stylelint-disable no-descending-specificity */
-  .form-control {
-    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
-
-    &[type='radio'],
-    &[type='checkbox'] {
-      box-shadow: none;
-
-      & + label {
-        color: var(--op-color-alerts-danger-minus-three);
-        font-weight: var(--op-font-weight-bold);
-      }
-    }
-
-    // Error + Hover State
-    &:hover:not(:disabled, [readonly]) {
-      background-color: var(--op-color-alerts-danger-plus-seven);
-      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
-      color: var(--op-color-alerts-danger-on-plus-seven);
-    }
-
-    // Readonly State
-    &[readonly] {
-      box-shadow: none;
-    }
+    color: var(--op-color-primary-on-plus-max);
 
-    // Error + Focus State
     &:focus-visible:not([readonly]) {
-      background-color: var(--op-color-alerts-danger-plus-seven);
-      box-shadow: var(--op-input-focus-danger);
-      color: var(--op-color-alerts-danger-on-plus-seven);
+      background-color: var(--op-color-primary-plus-seven);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-plus-seven);
     }
 
-    // Borderless State
-    &.form-control--no-border {
-      border-radius: 0;
-      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
-
-      // Readonly State
-      &[readonly] {
-        box-shadow: none;
-      }
-
-      // Borderless + Focus State
-      &:focus-visible:not([readonly]) {
-        background-color: var(--op-color-alerts-danger-plus-seven);
-        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
-        color: var(--op-color-alerts-danger-on-plus-seven);
-      }
-
-      // Borderless + Hover State
-      &:hover:not(:disabled, [readonly]) {
-        background-color: var(--op-color-alerts-danger-plus-eight);
-        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
-        color: var(--op-color-alerts-danger-on-plus-eight);
-      }
+    /* Borderless + Hover State */
+    &:hover:not(:disabled, [readonly]) {
+      background-color: var(--op-color-primary-plus-eight);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
+      color: var(--op-color-primary-on-plus-eight);
     }
   }
-  /* stylelint-enable no-descending-specificity */
 }
 
 .form-error {
@@ -326,7 +312,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   grid-auto-rows: auto;
   grid-template-columns: auto 1fr;
 
-  // Group Alignment
+  /* Group Alignment */
   /* stylelint-disable no-descending-specificity */
   .form-label,
   .form-error,
@@ -350,7 +336,8 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
 .form-group--inline {
   align-items: center;
 
-  // Group Alignment
+  /* Group Alignment */
+
   /* stylelint-disable no-descending-specificity */
   .form-label {
     grid-column: unset;
@@ -367,3 +354,65 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   }
   /* stylelint-enable no-descending-specificity */
 }
+
+.form-group--error {
+  /* stylelint-disable no-descending-specificity */
+  .form-control {
+    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
+
+    &[type='radio'],
+    &[type='checkbox'] {
+      box-shadow: none;
+
+      & + label {
+        color: var(--op-color-alerts-danger-minus-three);
+        font-weight: var(--op-font-weight-bold);
+      }
+    }
+
+    /* Error + Hover State */
+    &:hover:not(:disabled, [readonly]) {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+
+    /* Readonly State */
+    &[readonly] {
+      box-shadow: none;
+    }
+
+    /* Error + Focus State */
+    &:focus-visible:not([readonly]) {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      box-shadow: var(--op-input-focus-danger);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+
+    /* Borderless State */
+    &.form-control--no-border {
+      border-radius: 0;
+      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+
+      /* Readonly State */
+      &[readonly] {
+        box-shadow: none;
+      }
+
+      /* Borderless + Focus State */
+      &:focus-visible:not([readonly]) {
+        background-color: var(--op-color-alerts-danger-plus-seven);
+        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+        color: var(--op-color-alerts-danger-on-plus-seven);
+      }
+
+      /* Borderless + Hover State */
+      &:hover:not(:disabled, [readonly]) {
+        background-color: var(--op-color-alerts-danger-plus-eight);
+        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+        color: var(--op-color-alerts-danger-on-plus-eight);
+      }
+    }
+  }
+  /* stylelint-enable no-descending-specificity */
+}

From dda0915fb57cc933b8c7caa254f9ad09c6f6cd38 Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 15:05:37 -0500
Subject: [PATCH 2/8] Update the form docs

---
 src/stories/Components/Form/Form.mdx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/stories/Components/Form/Form.mdx b/src/stories/Components/Form/Form.mdx
index bb6b5303..3c36a474 100644
--- a/src/stories/Components/Form/Form.mdx
+++ b/src/stories/Components/Form/Form.mdx
@@ -149,7 +149,7 @@ Here are the variables that can be customized.
 
 {/* prettier-ignore-start */}
 ```css
-// form-control-global
+// form-control
 --_op-form-control-height-small
 --_op-form-control-height-medium
 --_op-form-control-height-large
@@ -157,13 +157,8 @@ Here are the variables that can be customized.
 --_op-form-control-font-medium
 --_op-form-control-font-large
 
-// form-control-input-global
+// form-control-input
 --_op-form-control-opacity-disabled
-
-// form-control-inline-global
---_op-form-control-height-small
---_op-form-control-height-medium
---_op-form-control-height-large
 ```
 {/* prettier-ignore-end */}
 
@@ -178,21 +173,19 @@ Here are the variables that can be customized.
   }}
 ></div>
 
-The form classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors)
+The form classes are structured using the [BEM methodology](https://getbem.com/naming).
 
 This allows multiple classes to share the same behavior.
 
 Form Controls use multiple placeholder selectors to style all types of controls.
 
-`%form-control-global` is the placeholder selector that is used to style all form controls.
-
-`%form-control-input-global` is the placeholder selector that is used to style form controls based on the input like color, date, text, number, etc.
+`.form-control` is the placeholder selector that is used to style all form controls.
 
-`%form-control-inline-global` is the placeholder selector that is used to style checkboxes and radio buttons.
+`form-control-input` is the placeholder selector that is used to style form controls based on the input like color, date, text, number, etc.
 
 You can open them up like so to modify the styles:
 
 ```css
-%form-control-global {
+.form-control {
 }
 ```

From 95b8911c960051d4e2a95579473010d7ccba465d Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 15:34:14 -0500
Subject: [PATCH 3/8] Remove form-control-input

---
 src/components/form.css | 61 -----------------------------------------
 1 file changed, 61 deletions(-)

diff --git a/src/components/form.css b/src/components/form.css
index d1e612f4..95137b71 100644
--- a/src/components/form.css
+++ b/src/components/form.css
@@ -214,67 +214,6 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   line-height: var(--op-line-height-base);
 }
 
-.form-control-input {
-  /* Public API (customizable component options) */
-  --_op-form-control-opacity-disabled: var(--op-opacity-disabled);
-
-  /* Private API (component option defaults) */
-  --__op-form-control-border-color: var(--op-color-neutral-plus-four);
-
-  display: block;
-  width: 100%;
-  min-width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
-  padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
-  border: none;
-  border-radius: var(--op-radius-medium);
-  appearance: none;
-  background-color: var(--op-color-neutral-plus-eight);
-  box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
-  color: var(--op-color-neutral-on-plus-eight);
-  cursor: text;
-  font-size: var(--__op-form-control-font-size);
-  line-height: var(--op-line-height-base);
-
-  /* Focus State */
-  &:focus,
-  &:focus-within,
-  &:focus-visible {
-    outline: none;
-  }
-
-  /* Hover State */
-  &:hover:not(:disabled, [readonly]) {
-    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
-  }
-
-  &:focus-visible:not([readonly]) {
-    background-color: var(--op-color-primary-plus-seven);
-    box-shadow: var(--op-input-focus-primary);
-    color: var(--op-color-primary-on-plus-seven);
-  }
-
-  /* Borderless State */
-  &.form-control--no-border {
-    background-color: transparent;
-    box-shadow: none;
-    color: var(--op-color-primary-on-plus-max);
-
-    &:focus-visible:not([readonly]) {
-      background-color: var(--op-color-primary-plus-seven);
-      box-shadow: var(--op-input-focus-primary);
-      color: var(--op-color-primary-on-plus-seven);
-    }
-
-    /* Borderless + Hover State */
-    &:hover:not(:disabled, [readonly]) {
-      background-color: var(--op-color-primary-plus-eight);
-      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
-      color: var(--op-color-primary-on-plus-eight);
-    }
-  }
-}
-
 .form-error {
   width: fit-content;
   color: var(--op-color-alerts-danger-base);

From ba5127433d005257f9e5f9c0eb99e840502f59b8 Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 15:34:53 -0500
Subject: [PATCH 4/8] Refactor documentation to reflect the new selectors

---
 src/stories/Components/Form/Form.mdx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/stories/Components/Form/Form.mdx b/src/stories/Components/Form/Form.mdx
index 3c36a474..aca87a76 100644
--- a/src/stories/Components/Form/Form.mdx
+++ b/src/stories/Components/Form/Form.mdx
@@ -149,7 +149,7 @@ Here are the variables that can be customized.
 
 {/* prettier-ignore-start */}
 ```css
-// form-control
+// .form-control
 --_op-form-control-height-small
 --_op-form-control-height-medium
 --_op-form-control-height-large
@@ -157,8 +157,13 @@ Here are the variables that can be customized.
 --_op-form-control-font-medium
 --_op-form-control-font-large
 
-// form-control-input
+// .form-control:not([type='radio'], [type='checkbox'])
 --_op-form-control-opacity-disabled
+
+// .form-control:is([type='radio'], [type='checkbox'])
+--_op-form-control-height-small
+--_op-form-control-height-medium
+--_op-form-control-height-large
 ```
 {/* prettier-ignore-end */}
 
@@ -181,7 +186,9 @@ Form Controls use multiple placeholder selectors to style all types of controls.
 
 `.form-control` is the placeholder selector that is used to style all form controls.
 
-`form-control-input` is the placeholder selector that is used to style form controls based on the input like color, date, text, number, etc.
+`.form-control:not([type='radio'], [type='checkbox'])` is the placeholder selector that is used to style form controls based on the input like color, date, text, number, etc.
+
+`.form-control:is([type='radio'], [type='checkbox'])` is the selector that is used to style checkboxes and radio buttons.
 
 You can open them up like so to modify the styles:
 

From ff14fee6304958a22e9bb035346c28bdb992400b Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 15:35:04 -0500
Subject: [PATCH 5/8] specify padding and margin

---
 src/components/form.css | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/form.css b/src/components/form.css
index 95137b71..02864865 100644
--- a/src/components/form.css
+++ b/src/components/form.css
@@ -84,7 +84,6 @@
   width: 100%;
   min-width: var(--__op-form-control-height);
   height: var(--__op-form-control-height);
-  padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
   border: none;
   border-radius: var(--op-radius-medium);
   appearance: none;
@@ -94,6 +93,10 @@
   cursor: text;
   font-size: var(--__op-form-control-font-size);
   line-height: var(--op-line-height-base);
+  padding-block: var(--op-space-2x-small);
+  padding-inline-end: var(--op-space-x-small);
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  padding-inline-start: var(--op-space-small);
 
   /* Focus State */
   &:focus,
@@ -161,7 +164,6 @@
     min-height: var(--__op-btn-height);
     align-items: center;
     justify-content: center;
-    padding: 0 var(--op-space-x-small);
     border: none;
     border-radius: var(--op-radius-medium);
     appearance: none;
@@ -173,6 +175,8 @@
     font-weight: var(--op-font-weight-normal);
     gap: var(--op-space-x-small);
     margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+    padding-block: 0;
+    padding-inline: var(--op-space-x-small);
     text-align: center;
     text-decoration: none;
     transition: var(--op-transition-input);
@@ -185,7 +189,6 @@
 }
 
 select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
-  padding-right: var(--op-space-3x-large);
   appearance: none;
   background-image: var(--op-encoded-images-dropdown-arrow);
   background-position: center right;
@@ -194,6 +197,7 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
   );
   background-repeat: no-repeat;
   cursor: pointer;
+  padding-inline-end: var(--op-space-3x-large);
 }
 
 select.form-control[multiple] {
@@ -229,27 +233,28 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
 .form-error-summary {
   padding: var(--op-space-large);
   border-radius: var(--op-radius-large);
-  margin-bottom: var(--op-space-large);
   background-color: var(--op-color-alerts-danger-plus-seven);
   box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
   color: var(--op-color-alerts-danger-on-plus-seven);
+  margin-block-end: var(--op-space-large);
 
   h2 {
     font-size: var(--op-font-medium);
   }
 
   ul {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 
 .form-group {
   display: grid;
   align-content: baseline;
-  padding: var(--op-space-small) 0;
   gap: var(--op-space-x-small);
   grid-auto-rows: auto;
   grid-template-columns: auto 1fr;
+  padding-block: var(--op-space-small) 0;
+  padding-inline: 0;
 
   /* Group Alignment */
   /* stylelint-disable no-descending-specificity */

From 6efece686aa8bc04048e8daa831122e24a6706e1 Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 15:37:31 -0500
Subject: [PATCH 6/8] Fix modifiers in the docs

---
 src/stories/Components/Form/Form.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/stories/Components/Form/Form.mdx b/src/stories/Components/Form/Form.mdx
index aca87a76..2bc92ca4 100644
--- a/src/stories/Components/Form/Form.mdx
+++ b/src/stories/Components/Form/Form.mdx
@@ -106,7 +106,7 @@ Form Controls can be used as standalone components, however, they do have a few
 
 ### Input Error
 
-`.form-group--error` and `.form-error` are typically used on combination when there is a validation error on an input. They highlight the input in error along with the message provided.
+`.form-group.form-group--error` and `.form-error` are typically used on combination when there is a validation error on an input. They highlight the input in error along with the message provided.
 
 <Canvas of={FormGroupStories.Error} />
 
@@ -118,13 +118,13 @@ Form Controls can be used as standalone components, however, they do have a few
 
 ### No Border
 
-`.form-control--no-border` can be used to create a borderless input or select. When used in a form group with `.form-group--error`, the input will get a red bottom border and highlight.
+`.form-control.form-control--no-border` can be used to create a borderless input or select. When used in a form group with `.form-control.form-group--error`, the input will get a red bottom border and highlight.
 
 <Canvas of={FormGroupStories.NoBorder} />
 
 ### Size
 
-`.form-control--small`, `.form-control--medium`, `.form-control--large` (with large being the default) modify the size of any element by changing the font and height to be smaller or larger.
+`.form.form-control--small`, `.form.form-control--medium`, `.form.form-control--large` (with large being the default) modify the size of any element by changing the font and height to be smaller or larger.
 
 <Canvas of={FormGroupStories.Small} />
 
@@ -186,7 +186,7 @@ Form Controls use multiple placeholder selectors to style all types of controls.
 
 `.form-control` is the placeholder selector that is used to style all form controls.
 
-`.form-control:not([type='radio'], [type='checkbox'])` is the placeholder selector that is used to style form controls based on the input like color, date, text, number, etc.
+`.form-control:not([type='radio'], [type='checkbox'])` is the selector that is used to style form controls based on the input like color, date, text, number, etc.
 
 `.form-control:is([type='radio'], [type='checkbox'])` is the selector that is used to style checkboxes and radio buttons.
 

From 2166d99b32201be280a95d1f1808972ca2856e1d Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 15:42:27 -0500
Subject: [PATCH 7/8] Bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 299a1156..ea8a5287 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "packageManager": "yarn@4.2.2",
   "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/scss/optics.scss",

From c92a850558a8985a56400d26a96e027a640b50f2 Mon Sep 17 00:00:00 2001
From: dominicmacaulay <dominic.62502@gmail.com>
Date: Thu, 30 Jan 2025 16:04:34 -0500
Subject: [PATCH 8/8] assign padding-inline

---
 src/components/form.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/form.css b/src/components/form.css
index 02864865..22b6e54c 100644
--- a/src/components/form.css
+++ b/src/components/form.css
@@ -94,9 +94,7 @@
   font-size: var(--__op-form-control-font-size);
   line-height: var(--op-line-height-base);
   padding-block: var(--op-space-2x-small);
-  padding-inline-end: var(--op-space-x-small);
-  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  padding-inline-start: var(--op-space-small);
+  padding-inline: var(--op-space-small) var(--op-space-x-small);
 
   /* Focus State */
   &:focus,