@rolemodel/optics 2.1.2 → 2.1.4

package/dist/css/components/tag.css

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

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

@@ -0,0 +1,134 @@
+/* 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

@@ -0,0 +1,95 @@
+/* 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

@@ -0,0 +1,8 @@
+/*
+  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

@@ -0,0 +1,8 @@
+/*
+  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

@@ -0,0 +1,16 @@
+/*
+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

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