@rolemodel/optics 2.1.0 → 2.1.2

package/dist/css/components/tag.css

@@ -1,168 +0,0 @@
-.tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--op-space-2x-small);
-  border-radius: var(--op-radius-pill);
-  background-color: var(--op-color-neutral-plus-four);
-  color: var(--op-color-neutral-on-plus-four);
-  font-size: var(--op-font-x-small);
-  font-weight: var(--op-font-weight-bold);
-  letter-spacing: var(--op-letter-spacing-label);
-  line-height: var(--op-line-height-dense);
-  user-select: none;
-  white-space: nowrap;
-
-  /* Elements */
-
-  .tag__label {
-    padding-inline: var(--op-space-2x-small);
-  }
-
-  .btn--icon {
-    --__op-btn-height: var(--op-font-medium);
-
-    /* Hover State */
-    &:hover {
-      background-color: var(--op-color-neutral-minus-three);
-      box-shadow: none;
-      color: var(--op-color-neutral-on-minus-three);
-    }
-
-    /* Focus State */
-    &:focus-visible {
-      background-color: var(--op-color-neutral-base);
-      box-shadow: var(--op-input-focus-neutral);
-      color: var(--op-color-neutral-on-base);
-    }
-  }
-
-  /* Modifiers */
-
-  &.tag--read-only {
-    /* This is here for consistency */
-  }
-
-  &.tag--primary {
-    background-color: var(--op-color-primary-base);
-    color: var(--op-color-primary-on-base);
-
-    .btn--icon {
-      color: var(--op-color-primary-on-base);
-
-      /* Hover State */
-      &:hover {
-        background-color: var(--op-color-primary-minus-three);
-        box-shadow: none;
-        color: var(--op-color-primary-on-minus-three);
-      }
-
-      /* 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);
-      }
-    }
-  }
-
-  &.tag--danger {
-    background-color: var(--op-color-alerts-danger-base);
-    color: var(--op-color-alerts-danger-on-base);
-
-    /* stylelint-disable no-descending-specificity */
-    .btn--icon {
-      color: var(--op-color-alerts-danger-on-base);
-
-      /* Hover State */
-      &:hover {
-        background-color: var(--op-color-alerts-danger-minus-three);
-        box-shadow: none;
-        color: var(--op-color-alerts-danger-on-minus-three);
-      }
-
-      /* 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);
-      }
-    }
-    /* stylelint-enable no-descending-specificity */
-  }
-
-  &.tag--warning {
-    background-color: var(--op-color-alerts-warning-base);
-    color: var(--op-color-alerts-warning-on-base);
-
-    /* stylelint-disable no-descending-specificity */
-    .btn--icon {
-      color: var(--op-color-alerts-warning-on-base);
-
-      /* Hover State */
-      &:hover {
-        background-color: var(--op-color-alerts-warning-minus-three);
-        box-shadow: none;
-        color: var(--op-color-alerts-warning-on-minus-three);
-      }
-
-      /* 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);
-      }
-    }
-    /* stylelint-enable no-descending-specificity */
-  }
-
-  &.tag--info {
-    background-color: var(--op-color-alerts-info-base);
-    color: var(--op-color-alerts-info-on-base);
-
-    /* stylelint-disable no-descending-specificity */
-    .btn--icon {
-      color: var(--op-color-alerts-info-on-base);
-
-      /* Hover State */
-      &:hover {
-        background-color: var(--op-color-alerts-info-minus-three);
-        box-shadow: none;
-        color: var(--op-color-alerts-info-on-minus-three);
-      }
-
-      /* Focus State */
-      &:focus-visible {
-        background-color: var(--op-color-alerts-info-base);
-        box-shadow: var(--op-input-focus-info);
-        color: var(--op-color-alerts-info-on-base);
-      }
-    }
-    /* stylelint-enable no-descending-specificity */
-  }
-
-  &.tag--notice {
-    background-color: var(--op-color-alerts-notice-base);
-    color: var(--op-color-alerts-notice-on-base);
-
-    /* stylelint-disable no-descending-specificity */
-    .btn--icon {
-      color: var(--op-color-alerts-notice-on-base);
-
-      /* Hover State */
-      &:hover {
-        background-color: var(--op-color-alerts-notice-minus-three);
-        box-shadow: none;
-        color: var(--op-color-alerts-notice-on-minus-three);
-      }
-
-      /* Focus State */
-      &:focus-visible {
-        background-color: var(--op-color-alerts-notice-base);
-        box-shadow: var(--op-input-focus-notice);
-        color: var(--op-color-alerts-notice-on-base);
-      }
-    }
-    /* stylelint-enable no-descending-specificity */
-  }
-}

package/dist/css/components/text_pair.css

@@ -1,55 +0,0 @@
-.text-pair {
-  /* Public API (customizable component options) */
-  --_op-text-pair-font-size-small: var(--op-font-small);
-  --_op-text-pair-font-size-medium: var(--op-font-medium);
-  --_op-text-pair-font-size-large: var(--op-font-large);
-
-  /* Private API (component option defaults) */
-  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
-  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--op-space-x-small);
-
-  &.text-pair--inline {
-    flex-direction: row;
-    align-items: baseline;
-  }
-
-  .text-pair__title {
-    font-size: var(--__op-text-pair-title-font-size);
-    font-weight: var(--op-font-weight-semi-bold);
-    line-height: var(--op-line-height-dense);
-
-    &.text-pair__title--small {
-      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
-    }
-
-    &.text-pair__title--medium {
-      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
-    }
-
-    &.text-pair__title--large {
-      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
-    }
-  }
-
-  .text-pair__subtitle {
-    font-size: var(--__op-text-pair-subtitle-font-size);
-    font-weight: var(--op-font-weight-normal);
-    line-height: var(--op-line-height-dense);
-
-    &.text-pair__subtitle--small {
-      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
-    }
-
-    &.text-pair__subtitle--medium {
-      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
-    }
-
-    &.text-pair__subtitle--large {
-      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
-    }
-  }
-}

package/dist/css/components/tooltip.css

@@ -1,134 +0,0 @@
-/* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
-
-[data-tooltip-text] {
-  /* Public API (customizable component options) */
-  --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); /* 200px */
-  --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
-  --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
-  --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
-  --_op-tooltip-arrow-size: calc(var(--op-space-small) / 2);
-  --_op-tooltip-tooltip-offset: var(--op-space-x-small);
-  --_op-tooltip-tooltip-radius: var(--op-radius-medium);
-  --_op-tooltip-tooltip-font-size: var(--op-font-small);
-
-  position: relative;
-
-  &::before,
-  &::after {
-    opacity: var(--op-opacity-none);
-    transition: var(--op-transition-tooltip);
-    visibility: hidden;
-  }
-
-  &::before {
-    position: absolute;
-    z-index: var(--op-z-index-tooltip);
-    display: block;
-    width: max-content;
-    max-width: var(--_op-tooltip-max-width);
-    padding: var(--_op-tooltip-padding);
-    border-radius: var(--_op-tooltip-tooltip-radius);
-    background-color: var(--_op-tooltip-background-color);
-    color: var(--_op-tooltip-text-color);
-    content: attr(data-tooltip-text);
-    font-family: var(--op-font-family); /* Makes tooltips on icons work */
-    font-size: var(--_op-tooltip-tooltip-font-size);
-    overflow-wrap: break-word;
-    pointer-events: none;
-    text-align: center;
-    white-space: normal;
-  }
-
-  &::after {
-    position: absolute;
-    z-index: var(--op-z-index-tooltip);
-    border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
-    content: '';
-    pointer-events: none;
-  }
-
-  &:hover {
-    &::before,
-    &::after {
-      opacity: var(--op-opacity-full);
-      visibility: visible;
-    }
-  }
-
-  &[data-tooltip-position='top'],
-  &:not([data-tooltip-position]) {
-    &::before,
-    &::after {
-      inset-inline-start: 50%;
-      transform: translateX(-50%);
-    }
-
-    &::before {
-      inset-block-end: 100%;
-      margin-block-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-
-    &::after {
-      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
-      inset-block-end: 100%;
-      margin-block-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-  }
-
-  &[data-tooltip-position='left'] {
-    &::before,
-    &::after {
-      inset-block-start: 50%;
-      transform: translateY(-50%);
-    }
-
-    &::before {
-      inset-inline-end: 100%;
-      margin-inline-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-
-    &::after {
-      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
-      inset-inline-end: 100%;
-      margin-inline-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-  }
-
-  &[data-tooltip-position='bottom'] {
-    &::before,
-    &::after {
-      inset-inline-start: 50%;
-      transform: translateX(-50%);
-    }
-
-    &::before {
-      inset-block-start: 100%;
-      margin-block-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-
-    &::after {
-      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
-      inset-block-start: 100%;
-      margin-block-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-  }
-
-  &[data-tooltip-position='right'] {
-    &::before,
-    &::after {
-      inset-block-start: 50%;
-      transform: translateY(-50%);
-    }
-
-    &::before {
-      inset-inline-start: 100%;
-      margin-inline-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-
-    &::after {
-      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
-      inset-inline-start: 100%;
-      margin-inline-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
-    }
-  }
-}

package/dist/css/core/base.css

@@ -1,95 +0,0 @@
-/* After a reset, introduce base element styles specific to this system */
-
-html {
-  overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
-  font-family: var(--op-font-family);
-  font-size: 62.5%; /* 1rem = 10px */
-}
-
-body {
-  overflow: auto;
-  height: 100vh;
-  background: var(--op-color-background);
-  color: var(--op-color-on-background);
-  font-size: var(--op-font-medium);
-}
-
-button {
-  background: none;
-  cursor: pointer;
-}
-
-button,
-input[type='submit'] {
-  border: 0;
-}
-
-label {
-  display: inline-block;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-a {
-  color: var(--op-color-primary-original);
-}
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-figure,
-pre {
-  margin: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: var(--op-space-small);
-  font-weight: var(--op-font-weight-normal);
-}
-
-h1 {
-  font-size: var(--op-font-3x-large);
-}
-
-h2 {
-  font-size: var(--op-font-2x-large);
-}
-
-h3 {
-  font-size: var(--op-font-large);
-}
-
-h4 {
-  font-size: var(--op-font-medium);
-}
-
-h5 {
-  font-size: var(--op-font-small);
-}
-
-h6 {
-  font-size: var(--op-font-x-small);
-}
-
-p {
-  margin-bottom: var(--op-space-small);
-  font-size: var(--op-font-medium);
-}
-
-small {
-  font-size: var(--op-font-small);
-}

package/dist/css/core/fonts/icon_fonts.css

@@ -1,8 +0,0 @@
-/*
-  See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
-  This import of Material Symbols supports:
-  font weight set through: font-variation-settings: 'wght' {100..700}
-*/
-
-/* Material Symbols */
-@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block';

package/dist/css/core/fonts/index.css

@@ -1,8 +0,0 @@
-/*
-  Instead of hosting the font files locally which requires a compiler to handle them, we pull fonts
-  from Google's CDN. For more information on the variable font, see:
-  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
-*/
-
-@import 'text_fonts';
-@import 'icon_fonts';

package/dist/css/core/fonts/text_fonts.css

@@ -1,16 +0,0 @@
-/*
-Noto Sans supports:
-  font-weight: {anything between 100 and 900}
-  font-stretch: {anything between 62.5% and 100%}
-  font-style: {normal or italic}
-*/
-
-/*
-  Noto Serif supports:
-  font-weight: {anything between 100 and 900}
-  font-stretch: {anything between 62.5% and 100%}
-  font-style: {normal or italic}
-*/
-
-/* Noto Sans and Noto Serif */
-@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';

package/dist/css/core/layout.css

@@ -1,43 +0,0 @@
-.app-with-sidebar {
-  display: grid;
-  width: 100%;
-  height: 100vh;
-  grid-template-columns: auto 1fr auto;
-}
-
-.app-body {
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-}
-
-.app__header {
-  position: sticky;
-  z-index: var(--op-z-index-header);
-  top: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.app__content {
-  width: 100%;
-  max-width: var(--op-breakpoint-medium);
-  flex-grow: 1;
-  padding: 0 var(--op-space-large);
-  margin: 0 auto;
-}
-
-.app__content-no-margin {
-  width: 100%;
-  flex-grow: 1;
-  padding: 0 var(--op-space-large);
-  overflow-y: auto;
-}
-
-.app__footer {
-  position: sticky;
-  z-index: var(--op-z-index-footer);
-  bottom: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-}