@rolemodel/optics 0.3.0 → 0.4.0

package/dist/scss/components/button_group.scss

@@ -1,16 +1,34 @@
 .btn-group {
+  --op-btn-group-hover-z-index: 1;
+  --op-btn-group-active-z-index: 2;
+  --op-btn-group-focus-z-index: 3;
+
   display: inline-flex;
   align-items: center;
 
   .btn,
   .btn-primary,
-  .btn-secondary,
-  .btn-delete {
+  .btn-delete,
+  .btn-warning {
     + .btn,
     + .btn-primary,
-    + .btn-secondary,
-    + .btn-delete {
-      margin-left: 1px;
+    + .btn-delete,
+    + .btn-warning {
+      margin-left: -1px;
+    }
+
+    &: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) {

package/dist/scss/components/confirm-dialog.scss

@@ -0,0 +1,88 @@
+%confirm-dialog-wrapper-global {
+  position: fixed;
+  z-index: var(--op-z-index-dialog);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  visibility: hidden;
+
+  .confirm-dialog-wrapper__backdrop {
+    position: fixed;
+    z-index: var(--op-z-index-dialog-backdrop);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--op-color-black);
+    opacity: 0;
+    transition: var(--op-transition-modal);
+    visibility: hidden;
+  }
+
+  &.confirm-dialog-wrapper--active {
+    visibility: visible;
+
+    .confirm-dialog {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .confirm-dialog-wrapper__backdrop {
+      opacity: 0.5;
+      visibility: visible;
+    }
+  }
+}
+
+%confirm-dialog-global {
+  // Public API (allowed to be overridden)
+  --_op-confirm-dialog-width: 40rem;
+
+  z-index: var(--op-z-index-dialog-content);
+  width: var(--_op-confirm-dialog-width);
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-background);
+  box-shadow: var(--op-border-all) var(--op-border-color);
+  color: var(--op-color-on-background);
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+  opacity: 0;
+  transform: scale(0.7);
+  transition: var(--op-transition-modal);
+
+  .confirm-dialog__header,
+  .confirm-dialog__body,
+  .confirm-dialog__footer {
+    padding: var(--op-space-medium);
+  }
+
+  .confirm-dialog__header {
+    font-size: var(--op-font-large);
+    font-weight: var(--op-font-weight-semi-bold);
+  }
+
+  .confirm-dialog__body {
+    box-shadow: var(--op-border-all) var(--op-border-color);
+  }
+
+  .confirm-dialog__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.confirm-dialog-wrapper {
+  @extend %confirm-dialog-wrapper-global;
+}
+
+.confirm-dialog {
+  @extend %confirm-dialog-global;
+}

package/dist/scss/components/form.scss

@@ -1,85 +1,177 @@
-%standard-input {
+%form-control-global {
+  // Public API (allowed to be overridden)
+  --_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);
+  --_op-form-control-font-small: var(--op-font-x-small);
+  --_op-form-control-font-medium: var(--op-font-small);
+  --_op-form-control-font-large: var(--op-font-small);
+
+  // Private API (don't touch these)
+  --__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
+  &.form-control--small {
+    --__op-form-control-height: var(--_op-form-control-height-small);
+    --__op-form-control-font-size: var(--_op-form-control-font-small);
+  }
+
+  &.form-control--medium {
+    --__op-form-control-height: var(--_op-form-control-height-medium);
+    --__op-form-control-font-size: var(--_op-form-control-font-medium);
+  }
+
+  &.form-control--large {
+    --__op-form-control-height: var(--_op-form-control-height-large);
+    --__op-form-control-font-size: var(--_op-form-control-font-large);
+  }
+}
+
+%form-control-input-global {
+  // Public API (allowed to be overridden)
+  --_op-form-control-opacity-disabled: 0.44;
+
   // Private API (don't touch these)
-  --__op-input-height: var(--op-input-height-large);
+  --__op-form-control-border-color: var(--op-color-neutral-plus-four);
 
   display: block;
   width: 100%;
-  min-width: var(--__op-input-height);
-  height: var(--__op-input-height);
-  padding: var(--op-space-small) var(--op-space-medium);
+  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-large);
-  background-color: var(--op-color-neutral-plus-max);
-  box-shadow: var(--op-border-all) var(--op-border-color);
-  color: var(--op-color-neutral-on-plus-max);
+  border-radius: var(--op-radius-medium);
+  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-font-small);
-  font-weight: var(--op-font-weight-light);
+  font-size: var(--__op-form-control-font-size);
   line-height: var(--op-line-height-base);
 
-  &.form-control--read-only {
-    height: fit-content;
-    background-color: var(--op-color-neutral-plus-seven);
-    background-image: none;
+  // Hover State
+  &:hover:not(:disabled, [readonly]) {
+    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
+  }
+
+  // Focus State
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &: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-neutral-on-plus-seven);
-    cursor: unset;
+    color: var(--op-color-primary-on-plus-max);
 
-    &[type='color'] {
-      height: var(--__op-input-height);
+    &: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-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);
+  cursor: pointer;
+
+  & + label {
+    align-self: center;
+  }
+}
+
 %dropdown-arrow {
   padding-right: var(--op-space-3x-large);
   appearance: none;
-  background: var(--op-form-dropdown-arrow) center right no-repeat;
-  background-position-x: calc(100% - ((var(--op-space-3x-large) / 2) - (var(--op-form-dropdown-arrow-width) / 2)));
+  background: var(--op-encoded-images-dropdown-arrow) center right no-repeat;
+  background-position-x: calc(
+    100% - ((var(--op-space-3x-large) / 2) - (var(--op-encoded-images-dropdown-arrow-width) / 2))
+  );
   cursor: pointer;
 }
 
 .form-label {
   color: var(--op-color-on-background);
-  font-size: var(--op-font-small);
+  font-size: var(--op-font-x-small);
   font-weight: var(--op-font-weight-normal);
   letter-spacing: var(--op-letter-spacing-label);
   line-height: var(--op-line-height-base);
 }
 
 .form-control {
+  @extend %form-control-global;
+
   &:not([type='radio'], [type='checkbox']) {
-    @extend %standard-input;
+    @extend %form-control-input-global;
   }
 
   &[type='color'] {
-    @extend %dropdown-arrow;
+    padding: var(--op-space-2x-small);
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: var(--op-radius-medium);
+    }
   }
 
   &[type='radio'],
   &[type='checkbox'] {
-    width: var(--op-space-large);
-    height: var(--op-space-large);
-    align-self: center;
-    margin: 0;
-    accent-color: var(--op-color-primary-base);
-    cursor: pointer;
+    @extend %form-control-inline-global;
   }
 
+  // Disabled State
   &:disabled {
     cursor: not-allowed;
+    opacity: var(--_op-form-control-opacity-disabled);
   }
 
-  &:focus,
-  &:focus-within,
-  &:focus-visible,
-  &:active {
-    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
-    outline: none;
+  // Readonly State
+  &[readonly] {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    color: var(--op-color-on-background);
+    pointer-events: none;
+    user-select: none;
 
-    &:hover:not(:disabled) {
-      box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
+    /* stylelint-disable selector-no-vendor-prefix */
+    &::-webkit-input-placeholder {
+      color: var(--op-color-on-background);
     }
+    /* stylelint-enable selector-no-vendor-prefix */
   }
 }
 
@@ -88,21 +180,19 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
 }
 
 select.form-control[multiple] {
-  min-height: calc(2 * var(--__op-input-height));
+  min-height: calc(2 * var(--__op-form-control-height));
 }
 
-textarea.form-control {
-  @extend %standard-input;
-
-  min-width: var(--__op-input-height);
+textarea.form-control:not([type='radio'], [type='checkbox']) {
   max-width: 100%;
-  min-height: var(--__op-input-height);
+  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-minus-three);
+    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
 
     &[type='radio'],
     &[type='checkbox'] {
@@ -113,16 +203,57 @@ textarea.form-control {
         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 */
 }
 
 .form-error {
   width: fit-content;
-  padding: var(--op-space-2x-small) var(--op-space-x-small);
-  border-radius: var(--op-radius-medium);
-  background: var(--op-color-alerts-danger-plus-seven);
-  color: var(--op-color-alerts-danger-on-plus-seven);
+  color: var(--op-color-alerts-danger-base);
   font-size: var(--op-font-x-small);
 }
 

package/dist/scss/components/index.scss

@@ -3,8 +3,9 @@
 @import 'button';
 @import 'button_group';
 @import 'card';
-@import 'flash';
+@import 'confirm-dialog';
 @import 'form';
 @import 'icon';
+@import 'modal';
 @import 'sidebar';
 @import 'table';

package/dist/scss/components/modal.scss

@@ -0,0 +1,156 @@
+%modal-wrapper-global {
+  // Public API (allowed to be overridden)
+  --_op-modal-backdrop-active-opacity: 0.5;
+
+  position: fixed;
+  z-index: var(--op-z-index-dialog);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  visibility: hidden;
+
+  .modal-wrapper__backdrop {
+    position: fixed;
+    z-index: var(--op-z-index-dialog-backdrop);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--op-color-black);
+    opacity: 0;
+    transition: var(--op-transition-modal);
+    visibility: hidden;
+  }
+
+  &.modal-wrapper--active {
+    visibility: visible;
+
+    .modal {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .modal-wrapper__backdrop {
+      opacity: var(--_op-modal-backdrop-active-opacity);
+      visibility: visible;
+    }
+  }
+}
+
+%modal-global {
+  // Public API (allowed to be overridden)
+  --_op-modal-width: 56.4rem;
+  --_op-modal-max-height: 50rem;
+
+  z-index: var(--op-z-index-dialog-content);
+  width: var(--_op-modal-width);
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-background);
+  box-shadow: var(--op-border-all) var(--op-border-color);
+  color: var(--op-color-on-background);
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+  opacity: 0;
+  transform: scale(0.7);
+  transition: var(--op-transition-modal);
+
+  .modal__header,
+  .modal__body,
+  .modal__footer {
+    padding: var(--op-space-medium);
+  }
+
+  .modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--op-font-large);
+    font-weight: var(--op-font-weight-semi-bold);
+  }
+
+  .modal__body {
+    max-height: var(--_op-modal-max-height);
+    box-shadow: var(--op-border-all) var(--op-border-color);
+    overflow-y: auto;
+  }
+
+  .modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--op-space-small);
+  }
+}
+
+.modal-wrapper {
+  @extend %modal-wrapper-global;
+}
+
+.modal {
+  @extend %modal-global;
+}
+
+// Using the Dialog element
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+@keyframes show-backdrop {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+}
+
+@keyframes hide-backdrop {
+  from {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+dialog.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  padding: 0;
+  border: none;
+
+  &::backdrop {
+    // The Dialog backdrop does not inheret from :root so these need to be duplicated here.
+    --op-color-black: hsl(0deg 0% 0%);
+    --_op-modal-backdrop-active-opacity: 0.5;
+
+    animation: show-backdrop 300ms ease-in;
+    background: var(--op-color-black);
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+
+  &[open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &.modal--closing {
+    opacity: 0;
+    transform: scale(0.7);
+
+    &::backdrop {
+      animation: hide-backdrop 300ms ease-in;
+      opacity: 0;
+    }
+  }
+}