@rolemodel/optics 2.0.1 → 2.1.2

package/dist/css/components/form.css

@@ -1,360 +0,0 @@
-.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

@@ -1,114 +0,0 @@
-/*
-  Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
-  Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
-  from Googles CDN like we do for our other fonts
-  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
-*/
-
-@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
-
-.material-symbols-outlined,
-.material-symbols {
-  --op-mso-fill: 0;
-  --op-mso-weight: var(--op-font-weight-normal);
-  --op-mso-grade: 0;
-  --op-mso-optical-sizing: 20;
-
-  font-size: var(--op-font-medium);
-  font-variation-settings:
-    'FILL' var(--op-mso-fill),
-    'wght' var(--op-mso-weight),
-    'GRAD' var(--op-mso-grade),
-    'opsz' var(--op-mso-optical-sizing);
-  line-height: var(--op-line-height-densest);
-  vertical-align: middle;
-}
-
-/* Fill */
-.icon--outlined {
-  --op-mso-fill: 0;
-}
-
-.icon--filled {
-  --op-mso-fill: 1;
-}
-
-/* Weight */
-.icon--weight-light {
-  --op-mso-weight: var(--op-font-weight-light);
-}
-
-.icon--weight-normal {
-  --op-mso-weight: var(--op-font-weight-normal);
-}
-
-.icon--weight-semi-bold {
-  --op-mso-weight: var(--op-font-weight-semi-bold);
-}
-
-.icon--weight-bold {
-  --op-mso-weight: var(--op-font-weight-bold);
-}
-
-/* Emphasis */
-.icon--low-emphasis {
-  --op-mso-grade: -20;
-}
-
-.icon--normal-emphasis {
-  --op-mso-grade: 0;
-}
-
-.icon--high-emphasis {
-  --op-mso-grade: 200;
-}
-
-/* Size */
-.icon--medium {
-  font-size: var(--op-font-medium);
-
-  --op-mso-optical-sizing: 20;
-}
-
-.icon--large {
-  font-size: var(--op-font-large);
-
-  --op-mso-optical-sizing: 40;
-}
-
-.icon--x-large {
-  font-size: var(--op-font-2x-large);
-
-  --op-mso-optical-sizing: 48;
-}
-
-.custom-icons {
-  display: inline-block;
-  width: var(--op-font-2x-large);
-  height: var(--op-font-2x-large);
-
-  &.icon--medium {
-    font-size: var(--op-font-small);
-
-    --op-mso-optical-sizing: 20;
-  }
-
-  &.icon--large {
-    width: var(--op-font-large);
-    height: var(--op-font-large);
-  }
-
-  &.icon--x-large {
-    width: var(--op-font-3x-large);
-    height: var(--op-font-3x-large);
-  }
-}
-
-.custom-icons svg {
-  width: 100%;
-  height: 100%;
-}
-
-.icon-link {
-  line-height: 0;
-}

package/dist/css/components/index.css

@@ -1,24 +0,0 @@
-@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

@@ -1,149 +0,0 @@
-.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

@@ -1,60 +0,0 @@
-.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);
-  }
-}