@rolemodel/optics 1.8.0 → 1.10.0

package/dist/css/optics.css

@@ -2366,8 +2366,8 @@ small {
   }
 }
 
-.btn-warning, .btn-destructive,
-.btn-delete, .btn-primary, .btn {
+.btn {
+  /* Public API (customizable component options) */
   --_op-btn-height-small: var(--op-input-height-small);
   --_op-btn-height-medium: var(--op-input-height-medium);
   --_op-btn-height-large: var(--op-input-height-large);
@@ -2377,6 +2377,7 @@ small {
   --_op-btn-padding-small: 0 var(--op-space-x-small);
   --_op-btn-padding-medium: 0 var(--op-space-small);
   --_op-btn-padding-large: 0 var(--op-space-small);
+  /* Private API (component option defaults) */
   --__op-btn-height: var(--_op-btn-height-large);
   --__op-btn-font-size: var(--_op-btn-font-large);
   --__op-btn-padding: var(--_op-btn-padding-large);
@@ -2387,6 +2388,9 @@ small {
   padding: var(--__op-btn-padding);
   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-btn-font-size);
   font-weight: var(--op-font-weight-normal);
@@ -2395,201 +2399,209 @@ small {
   text-decoration: none;
   transition: var(--op-transition-input);
   white-space: nowrap;
-}
-.btn--pill.btn-warning, .btn--pill.btn-destructive,
-.btn--pill.btn-delete, .btn--pill.btn-primary, .btn--pill.btn {
-  border-radius: var(--op-radius-pill);
-}
-.btn--icon.btn-warning, .btn--icon.btn-destructive,
-.btn--icon.btn-delete, .btn--icon.btn-primary, .btn--icon.btn {
-  width: var(--__op-btn-height);
-  min-width: var(--__op-btn-height);
-  padding: 0;
-}
-.btn--icon-with-label.btn-warning, .btn--icon-with-label.btn-destructive,
-.btn--icon-with-label.btn-delete, .btn--icon-with-label.btn-primary, .btn--icon-with-label.btn {
-  flex-direction: column;
-  padding: var(--op-space-small);
-  gap: var(--op-space-3x-small);
-}
-.btn--small.btn-warning, .btn--small.btn-destructive,
-.btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn {
-  --__op-btn-height: var(--_op-btn-height-small);
-  --__op-btn-font-size: var(--_op-btn-font-small);
-  --__op-btn-padding: var(--_op-btn-padding-small);
-}
-.btn--medium.btn-warning, .btn--medium.btn-destructive,
-.btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn {
-  --__op-btn-height: var(--_op-btn-height-medium);
-  --__op-btn-font-size: var(--_op-btn-font-medium);
-  --__op-btn-padding: var(--_op-btn-padding-medium);
-}
-.btn--large.btn-warning, .btn--large.btn-destructive,
-.btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
-  --__op-btn-height: var(--_op-btn-height-large);
-  --__op-btn-font-size: var(--_op-btn-font-large);
-  --__op-btn-padding: var(--_op-btn-padding-large);
-}
-.btn--disabled.btn-warning, .btn--disabled.btn-destructive,
-.btn--disabled.btn-delete, .btn--disabled.btn-primary, .btn--disabled.btn, .btn-warning:disabled, .btn-destructive:disabled,
-.btn-delete:disabled, .btn-primary:disabled, .btn:disabled {
-  opacity: var(--op-opacity-disabled);
-  pointer-events: none;
-  -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
-  user-select: none;
-}
-.btn--with-badge.btn-warning, .btn--with-badge.btn-destructive,
-.btn--with-badge.btn-delete, .btn--with-badge.btn-primary, .btn--with-badge.btn {
-  position: relative;
-}
-.btn-warning:focus, .btn-destructive:focus,
-.btn-delete:focus, .btn-primary:focus, .btn:focus, .btn-warning:focus-within, .btn-destructive:focus-within,
-.btn-delete:focus-within, .btn-primary:focus-within, .btn:focus-within, .btn-warning:focus-visible, .btn-destructive:focus-visible,
-.btn-delete:focus-visible, .btn-primary:focus-visible, .btn:focus-visible {
-  outline: none;
-}
-@media (width <= 768px) {
-  .btn-warning, .btn-destructive,
-  .btn-delete, .btn-primary, .btn {
-    --__op-btn-height: var(--_op-btn-height-large);
-    --__op-btn-font-size: var(--_op-btn-font-large);
+  /* Modifiers */
+  /* Default Active State */
+  &.btn--active {
+    background-color: var(--op-color-primary-plus-five);
+    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+    color: var(--op-color-primary-on-plus-five);
+  }
+  /* Default Hover State */
+  &:hover {
+    background-color: var(--op-color-primary-plus-eight);
+    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+    color: var(--op-color-primary-on-plus-eight);
+  }
+  /* Default Focus State */
+  &:focus-visible {
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: var(--op-input-focus-primary);
+    color: var(--op-color-neutral-on-plus-eight);
+  }
+  /* Default Borderless State */
+  &.btn--no-border {
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--op-color-primary-on-plus-max);
+    /* Default Borderless + Active State. */
+    &.btn--active {
+      background-color: var(--op-color-primary-plus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+      color: var(--op-color-primary-on-plus-five);
+    }
+    /* Default Borderless + Hover State */
+    &:hover {
+      background-color: var(--op-color-primary-plus-eight);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
+      color: var(--op-color-primary-on-plus-eight);
+    }
+    /* Default Borderless + Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-primary-plus-eight);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-plus-eight);
+    }
+  }
+  /* Pill Modifier */
+  &.btn--pill {
+    border-radius: var(--op-radius-pill);
+  }
+  /* Icon Modifier */
+  &.btn--icon {
+    width: var(--__op-btn-height);
+    min-width: var(--__op-btn-height);
+    padding: 0;
   }
-  .btn--small.btn-warning, .btn--small.btn-destructive,
-  .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn, .btn--medium.btn-warning, .btn--medium.btn-destructive,
-  .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.btn-warning, .btn--large.btn-destructive,
-  .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
+  /* Icon With Label Modifier */
+  &.btn--icon-with-label {
+    flex-direction: column;
+    padding: var(--op-space-small);
+    gap: var(--op-space-3x-small);
+  }
+  /* Size Modifiers */
+  &.btn--small {
+    --__op-btn-height: var(--_op-btn-height-small);
+    --__op-btn-font-size: var(--_op-btn-font-small);
+    --__op-btn-padding: var(--_op-btn-padding-small);
+  }
+  &.btn--medium {
+    --__op-btn-height: var(--_op-btn-height-medium);
+    --__op-btn-font-size: var(--_op-btn-font-medium);
+    --__op-btn-padding: var(--_op-btn-padding-medium);
+  }
+  &.btn--large {
     --__op-btn-height: var(--_op-btn-height-large);
     --__op-btn-font-size: var(--_op-btn-font-large);
     --__op-btn-padding: var(--_op-btn-padding-large);
   }
+  /* Disabled Modifier */
+  &.btn--disabled,
+  &:disabled {
+    opacity: var(--op-opacity-disabled);
+    pointer-events: none;
+    -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
+    user-select: none;
+  }
+  /* Button with notification style badge */
+  &.btn--with-badge {
+    position: relative;
+  }
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+  /* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */
+  /* --op-breakpoint-small */
+  /* Variant Modifiers */
+  &.btn--primary {
+    background-color: var(--op-color-primary-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+    /* Active State */
+    &.btn--active {
+      background-color: var(--op-color-primary-minus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
+      color: var(--op-color-primary-on-minus-five);
+    }
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-primary-plus-one);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
+      color: var(--op-color-primary-on-plus-one);
+    }
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-primary-base);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-base);
+    }
+    /* Borderless State */
+    &.btn--no-border {
+      background-color: transparent;
+      box-shadow: none;
+      color: var(--op-color-primary-base);
+      /* Borderless + Active State */
+      &.btn--active {
+        background-color: var(--op-color-primary-plus-five);
+        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+        color: var(--op-color-primary-on-plus-five);
+      }
+      /* Borderless + Hover State */
+      &:hover {
+        background-color: var(--op-color-primary-plus-eight);
+        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
+        color: var(--op-color-primary-on-plus-eight);
+      }
+      /* Borderless + Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-primary-plus-eight);
+        box-shadow: var(--op-input-focus-primary);
+        color: var(--op-color-primary-on-plus-eight);
+      }
+    }
+  }
+  &.btn--destructive,
+  &.btn--delete {
+    background-color: var(--op-color-alerts-danger-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+    /* Active State */
+    &.btn--active {
+      background-color: var(--op-color-alerts-danger-plus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
+      color: var(--op-color-alerts-danger-on-plus-five);
+    }
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-alerts-danger-minus-two);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
+      color: var(--op-color-alerts-danger-on-minus-two);
+    }
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-alerts-danger-base);
+      box-shadow: var(--op-input-focus-danger);
+      color: var(--op-color-alerts-danger-on-base);
+    }
+  }
+  &.btn--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+    /* Active State */
+    &.btn--active {
+      background-color: var(--op-color-alerts-warning-plus-five);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
+      color: var(--op-color-alerts-warning-on-plus-five);
+    }
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-alerts-warning-minus-two);
+      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
+      color: var(--op-color-alerts-warning-on-minus-two);
+    }
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-alerts-warning-base);
+      box-shadow: var(--op-input-focus-warning);
+      color: var(--op-color-alerts-warning-on-base);
+    }
+  }
 }
-
-.btn {
-  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);
-}
-.btn.btn--active {
-  background-color: var(--op-color-primary-plus-five);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-  color: var(--op-color-primary-on-plus-five);
-}
-.btn:hover {
-  background-color: var(--op-color-primary-plus-eight);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-  color: var(--op-color-primary-on-plus-eight);
-}
-.btn:focus-visible {
-  background-color: var(--op-color-neutral-plus-eight);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-neutral-on-plus-eight);
-}
-.btn.btn--no-border {
-  background-color: transparent;
-  box-shadow: none;
-  color: var(--op-color-primary-on-plus-max);
-}
-.btn.btn--no-border.btn--active {
-  background-color: var(--op-color-primary-plus-five);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-  color: var(--op-color-primary-on-plus-five);
-}
-.btn.btn--no-border:hover {
-  background-color: var(--op-color-primary-plus-eight);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
-  color: var(--op-color-primary-on-plus-eight);
-}
-.btn.btn--no-border:focus-visible {
-  background-color: var(--op-color-primary-plus-eight);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-primary-on-plus-eight);
-}
-
-.btn-primary {
-  background-color: var(--op-color-primary-base);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
-  color: var(--op-color-primary-on-base);
-}
-.btn-primary.btn--active {
-  background-color: var(--op-color-primary-minus-five);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
-  color: var(--op-color-primary-on-minus-five);
-}
-.btn-primary:hover {
-  background-color: var(--op-color-primary-plus-one);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
-  color: var(--op-color-primary-on-plus-one);
-}
-.btn-primary:focus-visible {
-  background-color: var(--op-color-primary-base);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-primary-on-base);
-}
-.btn-primary.btn--no-border {
-  background-color: transparent;
-  box-shadow: none;
-  color: var(--op-color-primary-base);
-}
-.btn-primary.btn--no-border.btn--active {
-  background-color: var(--op-color-primary-plus-five);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-  color: var(--op-color-primary-on-plus-five);
-}
-.btn-primary.btn--no-border:hover {
-  background-color: var(--op-color-primary-plus-eight);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
-  color: var(--op-color-primary-on-plus-eight);
-}
-.btn-primary.btn--no-border:focus-visible {
-  background-color: var(--op-color-primary-plus-eight);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-primary-on-plus-eight);
-}
-
-.btn-destructive,
-.btn-delete {
-  background-color: var(--op-color-alerts-danger-base);
-  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-base);
-}
-.btn-destructive.btn--active,
-.btn-delete.btn--active {
-  background-color: var(--op-color-alerts-danger-plus-five);
-  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
-  color: var(--op-color-alerts-danger-on-plus-five);
-}
-.btn-destructive:hover,
-.btn-delete:hover {
-  background-color: var(--op-color-alerts-danger-minus-two);
-  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
-  color: var(--op-color-alerts-danger-on-minus-two);
-}
-.btn-destructive:focus-visible,
-.btn-delete:focus-visible {
-  background-color: var(--op-color-alerts-danger-base);
-  box-shadow: var(--op-input-focus-danger);
-  color: var(--op-color-alerts-danger-on-base);
-}
-
-.btn-warning {
-  background-color: var(--op-color-alerts-warning-base);
-  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-base);
-}
-.btn-warning.btn--active {
-  background-color: var(--op-color-alerts-warning-plus-five);
-  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
-  color: var(--op-color-alerts-warning-on-plus-five);
-}
-.btn-warning:hover {
-  background-color: var(--op-color-alerts-warning-minus-two);
-  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
-  color: var(--op-color-alerts-warning-on-minus-two);
-}
-.btn-warning:focus-visible {
-  background-color: var(--op-color-alerts-warning-base);
-  box-shadow: var(--op-input-focus-warning);
-  color: var(--op-color-alerts-warning-on-base);
+@media (width <= 768px) {
+  .btn {
+    --__op-btn-height: var(--_op-btn-height-large);
+    --__op-btn-font-size: var(--_op-btn-font-large);
+    &.btn--small,
+    &.btn--medium,
+    &.btn--large {
+      --__op-btn-height: var(--_op-btn-height-large);
+      --__op-btn-font-size: var(--_op-btn-font-large);
+      --__op-btn-padding: var(--_op-btn-padding-large);
+    }
+  }
 }
 
 .btn-group {
@@ -2598,85 +2610,33 @@ small {
   --op-btn-group-focus-z-index: 3;
   display: inline-flex;
   align-items: center;
-}
-.btn-group .btn + .btn,
-.btn-group .btn + .btn-primary,
-.btn-group .btn + .btn-destructive,
-.btn-group .btn + .btn-delete,
-.btn-group .btn + .btn-warning,
-.btn-group .btn-primary + .btn,
-.btn-group .btn-primary + .btn-primary,
-.btn-group .btn-primary + .btn-destructive,
-.btn-group .btn-primary + .btn-delete,
-.btn-group .btn-primary + .btn-warning,
-.btn-group .btn-destructive + .btn,
-.btn-group .btn-destructive + .btn-primary,
-.btn-group .btn-destructive + .btn-destructive,
-.btn-group .btn-destructive + .btn-delete,
-.btn-group .btn-destructive + .btn-warning,
-.btn-group .btn-delete + .btn,
-.btn-group .btn-delete + .btn-primary,
-.btn-group .btn-delete + .btn-destructive,
-.btn-group .btn-delete + .btn-delete,
-.btn-group .btn-delete + .btn-warning,
-.btn-group .btn-warning + .btn,
-.btn-group .btn-warning + .btn-primary,
-.btn-group .btn-warning + .btn-destructive,
-.btn-group .btn-warning + .btn-delete,
-.btn-group .btn-warning + .btn-warning {
-  margin-left: -1px;
-}
-.btn-group .btn:hover,
-.btn-group .btn-primary:hover,
-.btn-group .btn-destructive:hover,
-.btn-group .btn-delete:hover,
-.btn-group .btn-warning:hover {
-  z-index: var(--op-btn-group-hover-z-index);
-}
-.btn-group .btn.btn--active,
-.btn-group .btn-primary.btn--active,
-.btn-group .btn-destructive.btn--active,
-.btn-group .btn-delete.btn--active,
-.btn-group .btn-warning.btn--active {
-  z-index: var(--op-btn-group-active-z-index);
-}
-.btn-group .btn:focus, .btn-group .btn:focus-within, .btn-group .btn:focus-visible,
-.btn-group .btn-primary:focus,
-.btn-group .btn-primary:focus-within,
-.btn-group .btn-primary:focus-visible,
-.btn-group .btn-destructive:focus,
-.btn-group .btn-destructive:focus-within,
-.btn-group .btn-destructive:focus-visible,
-.btn-group .btn-delete:focus,
-.btn-group .btn-delete:focus-within,
-.btn-group .btn-delete:focus-visible,
-.btn-group .btn-warning:focus,
-.btn-group .btn-warning:focus-within,
-.btn-group .btn-warning:focus-visible {
-  z-index: var(--op-btn-group-focus-z-index);
-}
-.btn-group .btn:not(:first-child, :last-child),
-.btn-group .btn-primary:not(:first-child, :last-child),
-.btn-group .btn-destructive:not(:first-child, :last-child),
-.btn-group .btn-delete:not(:first-child, :last-child),
-.btn-group .btn-warning:not(:first-child, :last-child) {
-  border-radius: 0;
-}
-.btn-group .btn:first-child:not(:last-child),
-.btn-group .btn-primary:first-child:not(:last-child),
-.btn-group .btn-destructive:first-child:not(:last-child),
-.btn-group .btn-delete:first-child:not(:last-child),
-.btn-group .btn-warning:first-child:not(:last-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.btn-group .btn:last-child:not(:first-child),
-.btn-group .btn-primary:last-child:not(:first-child),
-.btn-group .btn-destructive:last-child:not(:first-child),
-.btn-group .btn-delete:last-child:not(:first-child),
-.btn-group .btn-warning:last-child:not(:first-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  .btn {
+    + .btn {
+      margin-inline-start: calc(var(--op-border-width) * -1);
+    }
+    &:hover {
+      z-index: var(--op-btn-group-hover-z-index);
+    }
+    &.btn--active {
+      z-index: var(--op-btn-group-active-z-index);
+    }
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      z-index: var(--op-btn-group-focus-z-index);
+    }
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
 }
 
 .btn-group-toolbar {
@@ -3859,10 +3819,14 @@ dialog.modal {
   }
 }
 
-.table-container, .table-danger, .table-primary, .table {
-  --_op-table-cell-height-default: calc(11 * var(--op-size-unit));
-  --_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit));
-  --_op-table-cell-height-compact: calc(8 * var(--op-size-unit));
+.table {
+  /* Public API */
+  /* Cells (for height, the appropriate variable is used when using the density modifiers) */
+  --_op-table-cell-height-default: calc(11 * var(--op-size-unit)); /* 44px */
+  --_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit)); /* 64px */
+  --_op-table-cell-height-compact: calc(8 * var(--op-size-unit)); /* 32px */
+  /* Private API */
+  /* These allow for overriding specific padding versions easier. */
   --__op-table-cell-height: var(--_op-table-cell-height-default);
   width: 100%;
   border-radius: var(--op-radius-medium);
@@ -3870,87 +3834,98 @@ dialog.modal {
   box-shadow: var(--op-border-all) var(--op-color-border);
   contain: paint;
   table-layout: auto;
-}
-.table-container thead, .table-danger thead, .table-primary thead, .table thead {
-  background-color: var(--op-color-neutral-plus-eight);
-  box-shadow: inset var(--op-border-top) var(--op-color-border);
-  color: var(--op-color-neutral-on-plus-eight);
-}
-.table-container thead:has(th input[type=checkbox]:checked), .table-danger thead:has(th input[type=checkbox]:checked), .table-primary thead:has(th input[type=checkbox]:checked), .table thead:has(th input[type=checkbox]:checked) {
-  background-color: var(--op-color-primary-plus-seven);
-  color: var(--op-color-primary-on-plus-seven);
-}
-.table-container th, .table-danger th, .table-primary th, .table th {
-  font-weight: var(--op-font-weight-semi-bold);
-  text-align: left;
-}
-.table-container tbody, .table-danger tbody, .table-primary tbody, .table tbody,
-.table-container tfoot,
-.table-danger tfoot,
-.table-primary tfoot,
-.table tfoot {
-  background-color: var(--op-color-neutral-plus-max);
-  color: var(--op-color-neutral-on-plus-max);
-}
-.table-container th, .table-danger th, .table-primary th, .table th,
-.table-container td,
-.table-danger td,
-.table-primary td,
-.table td {
-  height: var(--__op-table-cell-height);
-  padding: var(--op-space-2x-small) var(--op-space-small);
-  font-size: var(--op-font-small);
-}
-.table-container tr:not(:last-child), .table-danger tr:not(:last-child), .table-primary tr:not(:last-child), .table tr:not(:last-child) {
-  box-shadow: inset var(--op-border-top) var(--op-color-border);
-}
-.table-container tfoot tr, .table-danger tfoot tr, .table-primary tfoot tr, .table tfoot tr {
-  box-shadow: var(--op-border-top) var(--op-color-border);
-}
-.table--auto-layout.table-container, .table--auto-layout.table-danger, .table--auto-layout.table-primary, .table--auto-layout.table {
-  table-layout: auto;
-}
-.table--fixed-layout.table-container, .table--fixed-layout.table-danger, .table--fixed-layout.table-primary, .table--fixed-layout.table {
-  table-layout: fixed;
-}
-.table--default-density.table-container, .table--default-density.table-danger, .table--default-density.table-primary, .table--default-density.table {
-  --__op-table-cell-height: var(--_op-table-cell-height-default);
-}
-.table--comfortable-density.table-container, .table--comfortable-density.table-danger, .table--comfortable-density.table-primary, .table--comfortable-density.table {
-  --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
-}
-.table--compact-density.table-container, .table--compact-density.table-danger, .table--compact-density.table-primary, .table--compact-density.table {
-  --__op-table-cell-height: var(--_op-table-cell-height-compact);
-}
-.table--even-striped.table-container tbody tr:nth-child(even), .table--even-striped.table-danger tbody tr:nth-child(even), .table--even-striped.table-primary tbody tr:nth-child(even), .table--even-striped.table tbody tr:nth-child(even) {
-  background-color: var(--op-color-neutral-plus-seven);
-  color: var(--op-color-neutral-on-plus-seven);
-}
-.table--odd-striped.table-container tbody tr:nth-child(odd), .table--odd-striped.table-danger tbody tr:nth-child(odd), .table--odd-striped.table-primary tbody tr:nth-child(odd), .table--odd-striped.table tbody tr:nth-child(odd) {
-  background-color: var(--op-color-neutral-plus-seven);
-  color: var(--op-color-neutral-on-plus-seven);
-}
-.table--sticky-header.table-container thead, .table--sticky-header.table-danger thead, .table--sticky-header.table-primary thead, .table--sticky-header.table thead {
-  position: sticky;
-  top: 0;
-}
-.table--sticky-footer.table-container tfoot, .table--sticky-footer.table-danger tfoot, .table--sticky-footer.table-primary tfoot, .table--sticky-footer.table tfoot {
-  position: sticky;
-  bottom: 0;
-}
-
-.table-primary thead {
-  background-color: var(--op-color-primary-plus-seven);
-  color: var(--op-color-primary-on-plus-seven);
-}
-
-.table-danger thead {
-  background-color: var(--op-color-alerts-danger-plus-seven);
-  color: var(--op-color-alerts-danger-on-plus-seven);
-}
-
-.table-container {
-  overflow-y: auto;
+  /* Elements */
+  thead {
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
+    color: var(--op-color-neutral-on-plus-eight);
+    &:has(th input[type=checkbox]:checked) {
+      background-color: var(--op-color-primary-plus-seven);
+      color: var(--op-color-primary-on-plus-seven);
+    }
+  }
+  th {
+    font-weight: var(--op-font-weight-semi-bold);
+    text-align: left;
+  }
+  tbody,
+  tfoot {
+    background-color: var(--op-color-neutral-plus-max);
+    color: var(--op-color-neutral-on-plus-max);
+  }
+  th,
+  td {
+    height: var(--__op-table-cell-height);
+    font-size: var(--op-font-small);
+    padding-block: var(--op-space-2x-small);
+    padding-inline: var(--op-space-small);
+  }
+  tfoot tr {
+    box-shadow: var(--op-border-top) var(--op-color-border);
+  }
+  tr:not(:last-child) {
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
+  }
+  /* Modifiers */
+  /* stylelint-disable no-descending-specificity */
+  &.table--primary {
+    thead {
+      background-color: var(--op-color-primary-plus-seven);
+      color: var(--op-color-primary-on-plus-seven);
+    }
+  }
+  &.table--danger {
+    thead {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+  }
+  /* stylelint-enable no-descending-specificity */
+  &.table--container {
+    overflow-y: auto;
+  }
+  /* Layout Modifiers */
+  &.table--auto-layout {
+    table-layout: auto;
+  }
+  &.table--fixed-layout {
+    table-layout: fixed;
+  }
+  /* Table Density Modifiers */
+  &.table--default-density {
+    --__op-table-cell-height: var(--_op-table-cell-height-default);
+  }
+  &.table--comfortable-density {
+    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
+  }
+  &.table--compact-density {
+    --__op-table-cell-height: var(--_op-table-cell-height-compact);
+  }
+  /* Striped Modifiers */
+  &.table--even-striped {
+    tbody tr:nth-child(even) {
+      background-color: var(--op-color-neutral-plus-seven);
+      color: var(--op-color-neutral-on-plus-seven);
+    }
+  }
+  &.table--odd-striped {
+    tbody tr:nth-child(odd) {
+      background-color: var(--op-color-neutral-plus-seven);
+      color: var(--op-color-neutral-on-plus-seven);
+    }
+  }
+  /* Sticky Header Row Modifier */
+  /* stylelint-disable no-descending-specificity */
+  &.table--sticky-header thead {
+    position: sticky;
+    inset-block-start: 0;
+  }
+  /* stylelint-enable no-descending-specificity */
+  /* Sticky Footer Row Modifier */
+  &.table--sticky-footer tfoot {
+    position: sticky;
+    inset-block-end: 0;
+  }
 }
 
 .tag {