@rolemodel/optics 0.3.1 → 0.4.1

package/dist/scss/components/sidebar.scss

@@ -1,36 +1,20 @@
 @mixin sidebar-rail-global {
   // Private API
   --__op-sidebar-width: var(--_op-sidebar-rail-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
 
   // Elements
   .sidebar__content {
-    gap: var(--_op-sidebar-link-spacing);
-  }
-
-  .sidebar__section-title,
-  .sidebar__section-divider {
-    display: none;
-  }
-
-  .sidebar__item {
-    flex-direction: column;
-    gap: var(--op-space-2x-small);
-
-    .sidebar__item-icon {
-      padding: var(--op-space-2x-small) var(--op-space-medium);
-      transition: var(--_op-sidebar-transition);
-    }
-
-    &:hover .sidebar__item-icon {
-      background-color: var(--_op-sidebar-icon-background-hover-color);
-    }
-
-    &.active .sidebar__item-icon {
-      background-color: var(--_op-sidebar-icon-background-active-color);
-    }
+    align-items: center;
 
-    .sidebar__item-label {
-      font-size: var(--op-font-x-small);
+    > * {
+      // Can't use extend but need to get icon behavior
+      width: var(--__op-btn-height);
+      min-width: var(--__op-btn-height);
+      justify-content: center;
+      padding: 0;
+      font-size: 0;
+      gap: 0;
     }
   }
 }
@@ -38,51 +22,21 @@
 @mixin sidebar-drawer-global {
   // Private API
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
+}
 
-  .sidebar__content {
-    padding: 0 var(--_op-sidebar-spacing);
-  }
-
-  .sidebar__section-title {
-    overflow: hidden;
-    height: var(--op-input-height-large);
-    padding: var(--op-space-small) var(--op-space-medium);
-    color: var(--_op-sidebar-text-color);
-    font-size: var(--op-font-small);
-    font-weight: var(--op-font-weight-bold);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .sidebar__section-divider {
-    border-bottom: var(--op-border-width) solid var(--_op-sidebar-text-color);
-    margin: 0 var(--_op-sidebar-spacing);
-  }
-
-  .sidebar__item {
-    height: var(--op-input-height-large);
-    flex-direction: row;
-    padding: var(--op-space-x-small) var(--op-space-medium);
-    border-radius: var(--op-radius-pill);
-    gap: var(--_op-sidebar-link-spacing);
-
-    &:hover,
-    &.active {
-      transition: var(--_op-sidebar-transition);
-    }
-
-    &:hover {
-      background-color: var(--_op-sidebar-icon-background-hover-color);
-      color: var(--_op-sidebar-icon-text-hover-color);
-
-      .sidebar__item-icon {
-        color: var(--_op-sidebar-icon-text-hover-color);
-      }
-    }
+@mixin sidebar-compact-global {
+  // Private API
+  --__op-sidebar-width: var(--_op-sidebar-compact-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
 
-    &.active {
-      background-color: var(--_op-sidebar-icon-background-active-color);
-      color: var(--_op-sidebar-icon-text-active-color);
+  // Elements
+  .sidebar__content {
+    > * {
+      // Can't use extend but need to get icon-with-label behavior
+      flex-direction: column;
+      padding: var(--op-space-small);
+      gap: var(--op-space-3x-small);
     }
   }
 }
@@ -90,51 +44,69 @@
 %sidebar-global {
   // Public API
   // Normal
-  --_op-sidebar-background-color: var(--op-color-neutral-plus-seven);
-  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-seven);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-neutral-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-neutral-on-plus-three);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-four);
+  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
+  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
+  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
 
   // Width
   --_op-sidebar-rail-width: 8.8rem;
-  --_op-sidebar-drawer-width: 25rem;
+  --_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;
 
   // Spacing
-  --_op-sidebar-spacing: var(--op-space-medium);
-  --_op-sidebar-link-spacing: var(--op-space-large);
+  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
+  --_op-sidebar-brand-spacing: var(--op-space-medium);
+  --_op-sidebar-content-spacing: var(--op-space-x-small);
+  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);
 
   // Animation
   --_op-sidebar-transition: var(--op-transition-sidebar);
 
   // Private API
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
 
   display: flex;
   width: var(--__op-sidebar-width);
+  min-width: var(--__op-sidebar-width);
   flex-direction: column;
-  padding: var(--_op-sidebar-spacing) 0;
   background-color: var(--_op-sidebar-background-color);
+  box-shadow: var(--op-border-right) var(--_op-sidebar-border-color);
   color: var(--_op-sidebar-text-color);
-  gap: var(--_op-sidebar-spacing);
   overflow-y: auto;
   transition: var(--_op-sidebar-transition);
 
   // Elements
   .sidebar__brand {
-    display: block;
-    padding: 0 var(--_op-sidebar-spacing);
+    height: var(--__op-sidebar-brand-width);
+    padding: var(--_op-sidebar-brand-spacing);
+    margin: 0 auto;
+
+    img {
+      height: 100%;
+    }
   }
 
   .sidebar__content {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    padding: 0 var(--_op-sidebar-content-spacing);
+    gap: var(--_op-sidebar-content-item-spacing);
+
+    > * {
+      justify-content: flex-start;
+
+      .material-symbols-outlined {
+        /* stylelint-disable scss/at-extend-no-missing-placeholder */
+        @extend .icon--large;
+        @extend .icon--weight-bold;
+        /* stylelint-enable scss/at-extend-no-missing-placeholder */
+      }
+    }
 
     &.sidebar__content--start {
       justify-content: start;
@@ -149,61 +121,34 @@
     }
   }
 
-  .sidebar__item {
-    display: flex;
-    align-items: center;
-    color: var(--_op-sidebar-text-color);
-    cursor: pointer;
-    text-align: center;
-    text-decoration: none;
-
-    &:visited {
-      color: var(--_op-sidebar-text-color);
-    }
-
-    &:hover,
-    &.active {
-      .sidebar__item-icon {
-        --op-mso-weight: var(--op-font-weight-bold);
-      }
-    }
-
-    &:hover .sidebar__item-icon {
-      color: var(--_op-sidebar-text-color);
-    }
-
-    .sidebar__item-icon {
-      /* stylelint-disable scss/at-extend-no-missing-placeholder */
-      @extend .icon--x-large;
-      /* stylelint-enable scss/at-extend-no-missing-placeholder */
+  // Modifiers
+  &.sidebar--padded {
+    padding: var(--_op-sidebar-spacing) 0;
+  }
 
-      --op-mso-weight: var(--op-font-weight-medium);
+  // Drawer Modifier
+  &.sidebar--drawer:not(.sidebar--responsive) {
+    @include sidebar-drawer-global;
+  }
 
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--op-radius-pill);
+  &.sidebar--drawer.sidebar--responsive {
+    @media (width > $breakpoint-medium) {
+      @include sidebar-drawer-global;
     }
 
-    .sidebar__item-label {
-      overflow: hidden;
-      max-width: 90%;
-      font-weight: var(--op-font-weight-medium);
-      letter-spacing: var(--op-letter-spacing-navigation);
-      line-height: var(--op-line-height-dense);
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    @media (width <= $breakpoint-medium) {
+      @include sidebar-rail-global;
     }
   }
 
-  // Modifiers
-  &.sidebar--drawer:not(.sidebar--responsive) {
-    @include sidebar-drawer-global;
+  // Compact Modifier
+  &.sidebar--compact:not(.sidebar--responsive) {
+    @include sidebar-compact-global;
   }
 
-  &.sidebar--drawer.sidebar--responsive {
+  &.sidebar--compact.sidebar--responsive {
     @media (width > $breakpoint-medium) {
-      @include sidebar-drawer-global;
+      @include sidebar-compact-global;
     }
 
     @media (width <= $breakpoint-medium) {
@@ -214,6 +159,10 @@
   &.sidebar--rail {
     @include sidebar-rail-global;
   }
+
+  &.sidebar--compact {
+    @include sidebar-compact-global;
+  }
 }
 
 .sidebar {
@@ -224,32 +173,7 @@
 .sidebar-primary {
   @extend %sidebar-global;
 
-  // Normal
-  --_op-sidebar-background-color: var(--op-color-primary-plus-seven);
-  --_op-sidebar-text-color: var(--op-color-primary-on-plus-seven);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
-}
-
-// Subtle Primary
-.sidebar-subtle-primary {
-  @extend %sidebar-global;
-
-  // Normal
-  --_op-sidebar-background-color: var(--op-color-primary-plus-max);
-  --_op-sidebar-text-color: var(--op-color-primary-on-plus-max);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
+  --_op-sidebar-background-color: var(--op-color-primary-plus-six);
+  --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
+  --_op-sidebar-border-color: var(--op-color-primary-plus-four);
 }

package/dist/scss/components/table.scss

@@ -1,15 +1,13 @@
-// TODO: When we get a pagination component, add it to the table styles and docs for within a table footer
-
 %table-global {
   // Public API
-  // Cells (for padding, the appropriate variable is used when using the density modifiers)
-  --_op-table-cell-padding-default: var(--op-space-small) var(--op-space-x-small);
-  --_op-table-cell-padding-comfortable: var(--op-space-medium) var(--op-space-small);
-  --_op-table-cell-padding-compact: var(--op-space-x-small) var(--op-space-2x-small);
+  // 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);
 
   // Private API
   // These allow for overriding specific padding versions easier.
-  --__op-table-cell-padding: var(--_op-table-cell-padding-default);
+  --__op-table-cell-height: var(--_op-table-cell-height-default);
 
   width: 100%;
   border-radius: var(--op-radius-medium);
@@ -19,25 +17,32 @@
   table-layout: auto;
 
   thead {
-    background-color: var(--op-color-neutral-plus-four);
-    color: var(--op-color-neutral-on-plus-four);
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: inset var(--op-border-top) var(--op-border-color);
+    color: var(--op-color-neutral-on-plus-eight);
+
+    // This Currently does not work in Firefox since it does not support :has yet, but fails gracefully.
+    &:has(th input[type='checkbox']:checked) {
+      background-color: var(--op-color-primary-plus-seven);
+      color: var(--op-color-primary-on-plus-seven);
+    }
   }
 
   th {
-    font-weight: var(--op-font-weight-normal);
+    font-weight: var(--op-font-weight-semi-bold);
     text-align: left;
-    text-transform: uppercase;
   }
 
   tbody,
   tfoot {
-    background-color: var(--op-color-background);
-    color: var(--op-color-on-background);
+    background-color: var(--op-color-neutral-plus-max);
+    color: var(--op-color-neutral-on-plus-max);
   }
 
   th,
   td {
-    padding: var(--__op-table-cell-padding);
+    height: var(--__op-table-cell-height);
+    padding: var(--op-space-2x-small) var(--op-space-small);
     font-size: var(--op-font-small);
   }
 
@@ -60,15 +65,15 @@
 
   // Table Density Modifiers
   &.table--default-density {
-    --__op-table-cell-padding: var(--_op-table-cell-padding-default);
+    --__op-table-cell-height: var(--_op-table-cell-height-default);
   }
 
   &.table--comfortable-density {
-    --__op-table-cell-padding: var(--_op-table-cell-padding-comfortable);
+    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
   }
 
   &.table--compact-density {
-    --__op-table-cell-padding: var(--_op-table-cell-padding-compact);
+    --__op-table-cell-height: var(--_op-table-cell-height-compact);
   }
 
   // Striped Modifiers

package/dist/scss/components/tooltip.scss

@@ -0,0 +1,136 @@
+%tooltip-global {
+  // Public API
+  --_op-tooltip-max-width: calc(5 * var(--op-space-3x-large));
+  --_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: 0;
+    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: 1;
+      visibility: visible;
+    }
+  }
+
+  &[data-tooltip-position='top'],
+  &:not([data-tooltip-position]) {
+    &::before,
+    &::after {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &::before {
+      bottom: 100%;
+      margin-bottom: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      bottom: 100%;
+      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
+      margin-bottom: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+
+  &[data-tooltip-position='left'] {
+    &::before,
+    &::after {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &::before {
+      right: 100%;
+      margin-right: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      right: 100%;
+      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
+      margin-right: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+
+  &[data-tooltip-position='bottom'] {
+    &::before,
+    &::after {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &::before {
+      top: 100%;
+      margin-top: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      top: 100%;
+      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
+      margin-top: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+
+  &[data-tooltip-position='right'] {
+    &::before,
+    &::after {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &::before {
+      left: 100%;
+      margin-left: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+
+    &::after {
+      left: 100%;
+      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
+      margin-left: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+    }
+  }
+}
+
+[data-tooltip-text] {
+  @extend %tooltip-global;
+}

package/dist/scss/core/tokens/base_tokens.scss

@@ -194,8 +194,8 @@
   /**
   * @tokens Encoded Images
   */
-  --op-form-dropdown-arrow-width: 1rem; // No way to string interpolate
-  --op-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
+  --op-encoded-images-dropdown-arrow-width: var(--op-space-scale-unit); // No way to string interpolate
+  --op-encoded-images-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
 @mixin fonts {
@@ -268,9 +268,14 @@
   * @tokens Input Focus
   * @presenter Shadow
   */
-  --op-input-outer-focus: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four);
-  --op-input-inner-focus: inset var(--op-border-all) var(--op-color-primary-minus-three);
-  --op-input-focus: var(--op-input-inner-focus), var(--op-input-outer-focus);
+  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
+  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
+  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
+  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
+  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
 }
 
 // We use SCSS variables outside the root since support for custom properties / css variables