@rolemodel/optics 2.1.2 → 2.1.4

package/dist/css/components/form.css

@@ -0,0 +1,360 @@
+.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);
+  --_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 (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 */
+  &.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);
+  }
+
+  /* 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 */
+  }
+}
+
+/* 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 (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);
+  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);
+  padding-block: var(--op-space-2x-small);
+  padding-inline: var(--op-space-small) var(--op-space-x-small);
+
+  /* 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);
+    }
+  }
+}
+
+/* Color Form Control */
+.form-control[type='color'] {
+  padding: var(--op-space-2x-small);
+  cursor: pointer;
+
+  &::-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;
+    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));
+    padding-block: 0;
+    padding-inline: var(--op-space-x-small);
+    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));
+  }
+}
+
+select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
+  appearance: none;
+  background-image: var(--op-encoded-images-dropdown-arrow);
+  background-position: center right;
+  background-position-x: calc(
+    100% - ((var(--op-space-3x-large) / 2) - (var(--op-encoded-images-dropdown-arrow-width) / 2))
+  );
+  background-repeat: no-repeat;
+  cursor: pointer;
+  padding-inline-end: var(--op-space-3x-large);
+}
+
+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);
+  font-weight: var(--op-font-weight-normal);
+  letter-spacing: var(--op-letter-spacing-label);
+  line-height: var(--op-line-height-base);
+}
+
+.form-error {
+  width: fit-content;
+  color: var(--op-color-alerts-danger-base);
+  font-size: var(--op-font-x-small);
+}
+
+.form-hint {
+  display: block;
+  font-size: var(--op-font-small);
+  font-style: italic;
+}
+
+.form-error-summary {
+  padding: var(--op-space-large);
+  border-radius: var(--op-radius-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-block-end: 0;
+  }
+}
+
+.form-group {
+  display: grid;
+  align-content: baseline;
+  gap: var(--op-space-x-small);
+  grid-auto-rows: auto;
+  grid-template-columns: auto 1fr;
+  padding-block: var(--op-space-small);
+  padding-inline: 0;
+
+  /* Group Alignment */
+  /* stylelint-disable no-descending-specificity */
+  .form-label,
+  .form-error,
+  .form-hint,
+  .form-control:not([type='radio'], [type='checkbox']) {
+    grid-column: 1 / 3;
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  .form-control[type='radio'],
+  .form-control[type='checkbox'] {
+    grid-column: 1 / 1;
+
+    & + .form-label {
+      grid-column: 2 / 3;
+      grid-row: 1;
+    }
+  }
+}
+
+.form-group--inline {
+  align-items: center;
+
+  /* Group Alignment */
+
+  /* stylelint-disable no-descending-specificity */
+  .form-label {
+    grid-column: unset;
+  }
+
+  .form-error,
+  .form-hint {
+    grid-column: 1 / 3;
+  }
+
+  .form-control:not([type='radio'], [type='checkbox']),
+  .switch {
+    grid-column: unset;
+  }
+  /* 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 */
+}

package/dist/css/components/icon.css

@@ -0,0 +1,121 @@
+.icon {
+  /* Public API (customizable component options) */
+
+  /* Weight */
+  --_op-icon-weight-light: var(--op-font-weight-light);
+  --_op-icon-weight-normal: var(--op-font-weight-normal);
+  --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
+  --_op-icon-weight-bold: var(--op-font-weight-bold);
+
+  /* Fill */
+  --_op-icon-fill-outlined: 0;
+  --_op-icon-fill-filled: 1;
+
+  /* Emphasis */
+  --_op-icon-emphasis-low: -20;
+  --_op-icon-emphasis-normal: 0;
+  --_op-icon-emphasis-high: 200;
+
+  /* Size */
+  --_op-icon-font-size-small: var(--op-font-small);
+  --_op-icon-font-size-medium: var(--op-font-medium);
+  --_op-icon-font-size-large: var(--op-font-large);
+  --_op-icon-font-size-x-large: var(--op-font-2x-large);
+  --_op-icon-optical-size-small: 20;
+  --_op-icon-optical-size-medium: 20;
+  --_op-icon-optical-size-large: 40;
+  --_op-icon-optical-size-x-large: 48;
+
+  /* Private API (component option defaults) */
+  --__op-icon-weight: var(--_op-icon-weight-normal);
+  --__op-icon-fill: var(--_op-icon-fill-outlined);
+  --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
+  --__op-icon-font-size: var(--_op-icon-font-size-medium);
+  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+
+  display: inline-block;
+  width: var(--__op-icon-font-size);
+  height: var(--__op-icon-font-size);
+  font-size: var(--__op-icon-font-size);
+  font-weight: var(--__op-icon-weight);
+  line-height: var(--op-line-height-densest);
+  vertical-align: middle;
+
+  /* Fill Modifiers */
+  &.icon--outlined {
+    --__op-icon-fill: var(--_op-icon-fill-outlined);
+  }
+
+  &.icon--filled {
+    --__op-icon-fill: var(--_op-icon-fill-filled);
+  }
+
+  /* Weight Modifiers */
+  &.icon--weight-light {
+    --__op-icon-weight: var(--_op-icon-weight-light);
+  }
+
+  &.icon--weight-normal {
+    --__op-icon-weight: var(--_op-icon-weight-normal);
+  }
+
+  &.icon--weight-semi-bold {
+    --__op-icon-weight: var(--_op-icon-weight-semi-bold);
+  }
+
+  &.icon--weight-bold {
+    --__op-icon-weight: var(--_op-icon-weight-bold);
+  }
+
+  /* Emphasis */
+  &.icon--low-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-low);
+  }
+
+  &.icon--normal-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
+  }
+
+  &.icon--high-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-high);
+  }
+
+  /* Size Modifiers */
+  &.icon--small {
+    --__op-icon-font-size: var(--_op-icon-font-size-small);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-small);
+  }
+
+  &.icon--medium {
+    --__op-icon-font-size: var(--_op-icon-font-size-medium);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+  }
+
+  &.icon--large {
+    --__op-icon-font-size: var(--_op-icon-font-size-large);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
+  }
+
+  &.icon--x-large {
+    --__op-icon-font-size: var(--_op-icon-font-size-x-large);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
+  }
+}
+
+/* Material Icons class provided by the Google Fonts CDN */
+.material-symbols-outlined {
+  font-variation-settings:
+    'FILL' var(--__op-icon-fill),
+    'wght' var(--__op-icon-weight),
+    'GRAD' var(--__op-icon-emphasis),
+    'opsz' var(--__op-icon-optical-size);
+  font-weight: unset;
+}
+
+/* Custom SVG Icons app specific */
+.custom-icons {
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/css/components/index.css

@@ -0,0 +1,24 @@
+@import 'accordion';
+@import 'alert';
+@import 'avatar';
+@import 'badge';
+@import 'breadcrumbs';
+@import 'button';
+@import 'button_group';
+@import 'card';
+@import 'confirm-dialog';
+@import 'divider';
+@import 'form';
+@import 'icon';
+@import 'modal';
+@import 'navbar';
+@import 'pagination';
+@import 'sidebar';
+@import 'side_panel';
+@import 'spinner';
+@import 'switch';
+@import 'tab';
+@import 'table';
+@import 'tag';
+@import 'text_pair';
+@import 'tooltip';

package/dist/css/components/modal.css

@@ -0,0 +1,149 @@
+.modal-wrapper {
+  /* Public API (customizable component options) */
+  --_op-modal-backdrop-active-opacity: var(--op-opacity-half);
+
+  position: fixed;
+  z-index: var(--op-z-index-dialog);
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  outline: 0;
+  visibility: hidden;
+
+  /* Elements */
+
+  .modal-wrapper__backdrop {
+    position: fixed;
+    z-index: var(--op-z-index-dialog-backdrop);
+    background: var(--op-color-black);
+    inset: 0;
+    opacity: var(--op-opacity-none);
+    transition: var(--op-transition-modal);
+    visibility: hidden;
+  }
+
+  /* Modifiers */
+
+  &.modal-wrapper--active {
+    visibility: visible;
+
+    .modal {
+      opacity: var(--op-opacity-full);
+      transform: scale(1);
+    }
+
+    .modal-wrapper__backdrop {
+      opacity: var(--_op-modal-backdrop-active-opacity);
+      visibility: visible;
+    }
+  }
+}
+
+/* stylelint-disable no-descending-specificity */
+.modal {
+  /* Public API (customizable component options) */
+  --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
+  --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */
+
+  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-color-border);
+  color: var(--op-color-on-background);
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+  opacity: var(--op-opacity-none);
+  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-color-border);
+    overflow-y: auto;
+  }
+
+  .modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--op-space-small);
+  }
+}
+/* stylelint-enable no-descending-specificity */
+
+dialog.modal {
+  position: fixed;
+  display: block;
+  padding: 0;
+  border: none;
+  inset: 0;
+
+  &::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;
+    --op-opacity-none: 0;
+    --op-opacity-full: 1;
+
+    animation: show-backdrop 300ms ease-in;
+    background: var(--op-color-black);
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+
+  &[open] {
+    opacity: var(--op-opacity-full);
+    transform: scale(1);
+  }
+
+  &.modal--closing {
+    opacity: var(--op-opacity-none);
+    transform: scale(0.7);
+
+    &::backdrop {
+      animation: hide-backdrop 300ms ease-in;
+      opacity: var(--op-opacity-none);
+    }
+  }
+}
+
+/* Using the Dialog element */
+
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
+
+@keyframes show-backdrop {
+  from {
+    opacity: var(--op-opacity-none);
+  }
+
+  to {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+}
+
+@keyframes hide-backdrop {
+  from {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+
+  to {
+    opacity: var(--op-opacity-none);
+  }
+}

package/dist/css/components/navbar.css

@@ -0,0 +1,60 @@
+.navbar {
+  /* Public API (customizable component options) */
+
+  /* Normal */
+  --_op-navbar-background-color: var(--op-color-neutral-plus-eight);
+  --_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
+  --_op-navbar-border-color: var(--op-color-neutral-plus-four);
+  --_op-navbar-brand-height: calc(12 * var(--op-size-unit)); /* 48px */
+
+  /* Spacing */
+  --_op-navbar-horizontal-spacing: var(--op-space-x-large);
+  --_op-navbar-content-spacing: var(--op-space-x-small);
+  --_op-navbar-content-item-spacing: var(--op-space-2x-small);
+
+  display: flex;
+  align-items: center;
+  padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
+  background-color: var(--_op-navbar-background-color);
+  box-shadow: var(--op-border-bottom) var(--_op-navbar-border-color);
+  color: var(--_op-navbar-text-color);
+  gap: var(--_op-navbar-content-spacing);
+
+  /* Elements */
+
+  .navbar__brand {
+    height: var(--_op-navbar-brand-height);
+    margin-right: var(--_op-navbar-horizontal-spacing);
+
+    img {
+      height: 100%;
+    }
+  }
+
+  .navbar__content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--_op-navbar-content-item-spacing);
+
+    &.navbar__content--justify-start {
+      margin-inline-end: auto;
+    }
+
+    &.navbar__content--justify-center {
+      margin-inline: auto;
+    }
+
+    &.navbar__content--justify-end {
+      margin-inline-start: auto;
+    }
+  }
+
+  /* Modifiers */
+
+  &.navbar--primary {
+    --_op-navbar-background-color: var(--op-color-primary-plus-six);
+    --_op-navbar-text-color: var(--op-color-primary-on-plus-six);
+    --_op-navbar-border-color: var(--op-color-primary-plus-four);
+  }
+}