@rolemodel/optics 0.4.2 → 0.5.1

package/dist/scss/components/side_panel.scss

@@ -0,0 +1,94 @@
+%side-panel-global {
+  // Public API (allowed to be overridden)
+  --_op-side-panel-width: calc(54 * var(--op-size-unit)); // 216px
+  --_op-side-panel-header-padding: var(--op-space-medium);
+  --_op-side-panel-body-padding: var(--op-space-medium);
+  --_op-side-panel-footer-padding: var(--op-space-medium);
+  --_op-side-panel-section-padding: var(--op-space-medium);
+
+  display: flex;
+  width: var(--_op-side-panel-width);
+  min-width: var(--_op-side-panel-width);
+  height: 100vh;
+  max-height: 100%;
+  flex-direction: column;
+  background-color: var(--op-color-background);
+  color: var(--op-color-on-background);
+
+  // Modifiers
+  &.side-panel--border-left {
+    box-shadow: var(--op-border-left) var(--op-border-color);
+  }
+
+  &.side-panel--border-right {
+    box-shadow: var(--op-border-right) var(--op-border-color);
+  }
+
+  &.side-panel--border-left.side-panel--border-right {
+    box-shadow: var(--op-border-x);
+  }
+
+  // Elements
+  .side-panel__header {
+    &.side-panel__header--padded {
+      padding: var(--_op-side-panel-header-padding);
+    }
+
+    &.side-panel__header--padded-x {
+      padding-inline: var(--_op-side-panel-header-padding);
+    }
+
+    &.side-panel__header--padded-y {
+      padding-block: var(--_op-side-panel-header-padding);
+    }
+  }
+
+  .side-panel__body {
+    flex: 1;
+    overflow-y: auto;
+
+    &.side-panel__body--padded {
+      padding: var(--_op-side-panel-body-padding);
+    }
+
+    &.side-panel__body--padded-x {
+      padding-inline: var(--_op-side-panel-body-padding);
+    }
+
+    &.side-panel__body--padded-y {
+      padding-block: var(--_op-side-panel-body-padding);
+    }
+  }
+
+  .side-panel__footer {
+    &.side-panel__footer--padded {
+      padding: var(--_op-side-panel-footer-padding);
+    }
+
+    &.side-panel__footer--padded-x {
+      padding-inline: var(--_op-side-panel-footer-padding);
+    }
+
+    &.side-panel__footer--padded-y {
+      padding-block: var(--_op-side-panel-footer-padding);
+    }
+  }
+
+  .side-panel__section {
+    &.side-panel__section--padded {
+      padding: var(--_op-side-panel-section-padding);
+    }
+
+    &.side-panel__section--padded-x {
+      padding-inline: var(--_op-side-panel-section-padding);
+    }
+
+    &.side-panel__section--padded-y {
+      padding-block: var(--_op-side-panel-section-padding);
+    }
+  }
+}
+
+.side-panel {
+  @extend %side-panel-global;
+}

package/dist/scss/components/sidebar.scss

@@ -49,12 +49,12 @@
   --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
 
   // Width
-  --_op-sidebar-rail-width: 8.8rem;
-  --_op-sidebar-compact-width: 16.9rem;
-  --_op-sidebar-drawer-width: 21.6rem;
-  --_op-sidebar-rail-brand-width: 7.728rem;
-  --_op-sidebar-compact-brand-width: 9.8rem;
-  --_op-sidebar-drawer-brand-width: 9.8rem;
+  --_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); // 88px
+  --_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); // 168px
+  --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); // 216px
+  --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); // 76px
+  --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); // 96px
+  --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); // 96px
 
   // Spacing
   --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));

package/dist/scss/components/spinner.scss

@@ -0,0 +1,55 @@
+%spinner-global {
+  --_op-spinner-indicator-color: var(--op-color-primary-base);
+  --_op-spinner-track-color: var(--op-color-neutral-plus-four);
+  --_op-spinner-track-width-x-small: var(--op-border-width);
+  --_op-spinner-track-width-small: var(--op-border-width-large);
+  --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
+  --_op-spinner-track-width-large: var(--op-border-width-x-large);
+  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit)); // 24px
+  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit)); // 40px
+  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit)); // 60px
+  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit)); // 80px
+  --_op-spinner-animation-duration: 0.8s;
+  --_op-spinner-animation-timing-function: linear;
+
+  // Private API (don't touch these)
+  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
+  --__op-spinner-track-width: var(--_op-spinner-track-width-large);
+
+  width: var(--__op-spinner-diameter);
+  height: var(--__op-spinner-diameter);
+  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
+  border-radius: var(--__op-spinner-diameter);
+  border-top-color: var(--_op-spinner-indicator-color);
+  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
+
+  &.spinner--x-small {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
+  }
+
+  &.spinner--small {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
+  }
+
+  &.spinner--medium {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
+  }
+
+  &.spinner--large {
+    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
+    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
+  }
+}
+
+.spinner {
+  @extend %spinner-global;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/scss/components/switch.scss

@@ -0,0 +1,111 @@
+%switch-global {
+  // Public API (allowed to be overridden)
+  --_op-switch-height-small: calc(4 * var(--op-size-unit)); // 16px
+  --_op-switch-height-large: calc(6 * var(--op-size-unit)); // 24px
+  --_op-switch-width-small: calc(7 * var(--op-size-unit)); // 28px
+  --_op-switch-width-large: calc(11 * var(--op-size-unit)); // 44px
+  --_op-switch-opacity-disabled: var(--op-opacity-disabled);
+  --_op-switch-switch-padding: var(--op-space-2x-small);
+
+  // Private API (don't touch these)
+  --__op-switch-width: var(--_op-switch-width-large);
+  --__op-switch-height: var(--_op-switch-height-large);
+  --__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
+  --__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding) / 2);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  input {
+    width: 0;
+    height: 0;
+    margin-right: calc(-1 * var(--op-space-x-small));
+
+    &:disabled {
+      visibility: hidden;
+    }
+
+    &:disabled + label {
+      cursor: not-allowed;
+      opacity: var(--_op-switch-opacity-disabled);
+    }
+
+    &:checked + label {
+      background-color: var(--op-color-primary-base);
+      box-shadow: none;
+
+      &::after {
+        left: calc(100% - var(--__op-switch-half-switch-padding));
+        transform: translateX(-100%);
+      }
+    }
+
+    &:hover + label {
+      &::after {
+        background-color: var(--op-color-primary-plus-five);
+      }
+    }
+
+    &:focus-visible + label {
+      box-shadow:
+        0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six),
+        inset var(--op-border-all) var(--op-color-primary-minus-three);
+
+      &::after {
+        background-color: var(--op-color-neutral-plus-five);
+        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
+      }
+    }
+
+    &:focus-visible:checked + label {
+      &::after {
+        background-color: var(--op-color-primary-plus-six);
+        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
+      }
+    }
+  }
+
+  label {
+    position: relative;
+    display: block;
+    width: var(--__op-switch-width);
+    height: var(--__op-switch-height);
+    border-radius: var(--op-radius-pill);
+    background: var(--op-color-neutral-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
+    text-indent: -9999px; // Normally text would not be put in the label, but this hides it in case you do put text in the label
+
+    &::after {
+      position: absolute;
+      top: var(--__op-switch-half-switch-padding);
+      left: var(--__op-switch-half-switch-padding);
+      width: var(--__op-switch-switch-size);
+      height: var(--__op-switch-switch-size);
+      border-radius: var(--op-radius-circle);
+      background-color: var(--op-color-neutral-plus-eight);
+      content: '';
+      transition: var(--op-transition-input);
+    }
+  }
+
+  // Size Modifiers
+  &.switch--small {
+    --__op-switch-width: var(--_op-switch-width-small);
+    --__op-switch-height: var(--_op-switch-height-small);
+  }
+
+  &.switch--large {
+    --__op-switch-width: var(--_op-switch-width-large);
+    --__op-switch-height: var(--_op-switch-height-large);
+  }
+
+  // Prevent labels after the toggle being full width
+  & + label {
+    width: fit-content;
+  }
+}
+
+.switch {
+  @extend %switch-global;
+}

package/dist/scss/components/tab.scss

@@ -0,0 +1,84 @@
+%tab-group-global {
+  display: flex;
+  align-items: center;
+}
+
+%tab-global {
+  // Public API
+  --_op-tab-font-small: var(--op-font-x-small);
+  --_op-tab-font-large: var(--op-font-small);
+  --_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
+  --_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
+  --_op-tab-indicator-width-small: var(--op-border-width-large);
+  --_op-tab-indicator-width-large: var(--op-border-width-x-large);
+  --_op-tab-disabled-opacity: var(--op-opacity-disabled);
+
+  // Private API
+  --__op-tab-font-size: var(--_op-tab-font-large);
+  --__op-tab-padding: var(--_op-tab-padding-large);
+  --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
+  --__op-tab-indicator: inset 0 calc(-1 * var(--__op-tab-indicator-width)) 0 0;
+
+  padding: var(--__op-tab-padding);
+  background-color: var(--op-color-background);
+  color: var(--op-color-on-background);
+  font-size: var(--__op-tab-font-size);
+  text-decoration: none;
+
+  &.tab--active {
+    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
+  }
+
+  // Focus State
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+
+  // Focus State
+  &:focus-visible:not(.tab--disabled) {
+    z-index: 1;
+    box-shadow: var(--op-input-focus-primary);
+
+    &.tab--active {
+      box-shadow:
+        var(--__op-tab-indicator) var(--op-color-primary-plus-one),
+        var(--op-input-focus-primary);
+    }
+  }
+
+  // Disabled State
+  &.tab--disabled {
+    opacity: var(--_op-tab-disabled-opacity);
+    pointer-events: none;
+  }
+
+  // Hover State
+  &:hover {
+    background-color: var(--op-color-primary-plus-seven);
+    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
+    color: var(--op-color-primary-on-plus-seven);
+  }
+
+  // Size Modifiers
+  &.tab--small {
+    --__op-tab-padding: var(--_op-tab-padding-small);
+    --__op-tab-font-size: var(--_op-tab-font-small);
+    --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
+  }
+
+  &.tab--large {
+    --__op-tab-padding: var(--_op-tab-padding-large);
+    --__op-tab-font-size: var(--_op-tab-font-large);
+    --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
+  }
+}
+
+.tab-group {
+  @extend %tab-group-global;
+}
+
+.tab {
+  @extend %tab-global;
+}

package/dist/scss/components/table.scss

@@ -1,9 +1,9 @@
 %table-global {
   // Public API
   // Cells (for height, the appropriate variable is used when using the density modifiers)
-  --_op-table-cell-height-default: calc(var(--op-space-scale-unit) * 4.4);
-  --_op-table-cell-height-comfortable: calc(var(--op-space-scale-unit) * 6.4);
-  --_op-table-cell-height-compact: calc(var(--op-space-scale-unit) * 3.4);
+  --_op-table-cell-height-default: calc(11 * var(--op-size-unit)); // 44px
+  --_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit)); // 64px
+  --_op-table-cell-height-compact: calc(8 * var(--op-size-unit)); // 32px
 
   // Private API
   // These allow for overriding specific padding versions easier.

package/dist/scss/components/tag.scss

@@ -0,0 +1,174 @@
+%tag-global {
+  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;
+
+  .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);
+    }
+  }
+}
+
+.tag-readonly {
+  @extend %tag-global;
+}
+
+.tag-primary {
+  @extend %tag-global;
+
+  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 {
+  @extend %tag-global;
+
+  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 {
+  @extend %tag-global;
+
+  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 {
+  @extend %tag-global;
+
+  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 {
+  @extend %tag-global;
+
+  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/scss/components/text_pair.scss

@@ -0,0 +1,59 @@
+%text-pair-global {
+  // Public API (allowed to be overridden)
+  --_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 (don't touch these)
+  --__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);
+    }
+  }
+}
+
+.text-pair {
+  @extend %text-pair-global;
+}

package/dist/scss/components/tooltip.scss

@@ -1,6 +1,6 @@
 %tooltip-global {
   // Public API
-  --_op-tooltip-max-width: calc(5 * var(--op-space-3x-large));
+  --_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);
@@ -13,7 +13,7 @@
 
   &::before,
   &::after {
-    opacity: 0;
+    opacity: var(--op-opacity-none);
     transition: var(--op-transition-tooltip);
     visibility: hidden;
   }
@@ -48,7 +48,7 @@
   &:hover {
     &::before,
     &::after {
-      opacity: 1;
+      opacity: var(--op-opacity-full);
       visibility: visible;
     }
   }

package/dist/scss/core/layout.scss

@@ -21,12 +21,19 @@
 
 .app__content {
   width: 100%;
-  max-width: $breakpoint-medium;
+  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);