@rolemodel/optics 1.11.0 → 1.13.1

package/dist/scss/addons/panel.scss

@@ -1,61 +0,0 @@
-.panel {
-  --op-panel-width: 40%;
-
-  position: absolute;
-  z-index: var(--op-z-index-sidebar);
-  right: calc(-1 * var(--op-panel-width)); // this pushes the panel off the sceen to the right
-  width: var(--op-panel-width);
-  height: 100vh;
-  padding-bottom: var(--op-space-large);
-  background: var(--op-color-background);
-  color: var(--op-color-on-background);
-  overflow-y: scroll;
-  transition: var(--op-transition-panel);
-}
-
-.panel--active {
-  right: 0;
-  box-shadow: var(--op-shadow-x-large);
-}
-
-.panel__close {
-  display: flex;
-  padding: var(--op-space-medium);
-  border-radius: 100%;
-  cursor: pointer;
-  float: right;
-
-  &:hover {
-    background: var(--op-color-neutral-plus-seven);
-  }
-}
-
-#panel-content {
-  padding-top: var(--op-space-large);
-  padding-bottom: var(--op-space-large);
-}
-
-@mixin panel-dark {
-  .panel {
-    background: var(--op-color-neutral-plus-seven);
-    color: var(--op-color-neutral-on-plus-seven);
-  }
-
-  .panel__close {
-    &:hover {
-      background: var(--op-color-background);
-    }
-  }
-}
-
-// Follow system preference unless forced to light
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme-mode='light']) {
-    @include panel-dark;
-  }
-}
-
-// Force design system to dark
-:root[data-theme-mode='dark'] {
-  @include panel-dark;
-}

package/dist/scss/components/sidebar.scss

@@ -1,184 +0,0 @@
-@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 {
-    align-items: center;
-
-    > * {
-      // 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;
-    }
-  }
-}
-
-@mixin sidebar-drawer-global {
-  // Private API
-  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
-  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
-}
-
-@mixin sidebar-compact-global {
-  // Private API
-  --__op-sidebar-width: var(--_op-sidebar-compact-width);
-  --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
-
-  // 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);
-    }
-  }
-}
-
-%sidebar-global {
-  // Public API
-  // Normal
-  --_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: 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));
-  --_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);
-
-  z-index: var(--op-z-index-sidebar);
-  display: flex;
-  width: var(--__op-sidebar-width);
-  min-width: var(--__op-sidebar-width);
-  flex-direction: column;
-  background-color: var(--_op-sidebar-background-color);
-  box-shadow: var(--op-border-right) var(--_op-sidebar-border-color);
-  color: var(--_op-sidebar-text-color);
-  overflow-y: auto;
-  transition: var(--_op-sidebar-transition);
-
-  // Elements
-  .sidebar__brand {
-    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;
-    }
-
-    &.sidebar__content--center {
-      justify-content: center;
-    }
-
-    &.sidebar__content--end {
-      justify-content: end;
-    }
-  }
-
-  // Modifiers
-  &.sidebar--padded {
-    padding: var(--_op-sidebar-spacing) 0;
-  }
-
-  // Drawer Modifier
-  &.sidebar--drawer:not(.sidebar--responsive) {
-    @include sidebar-drawer-global;
-  }
-
-  &.sidebar--drawer.sidebar--responsive {
-    // --op-breakpoint-medium
-    @media (width > 1024px) {
-      @include sidebar-drawer-global;
-    }
-
-    // --op-breakpoint-medium
-    @media (width <= 1024px) {
-      @include sidebar-rail-global;
-    }
-  }
-
-  // Compact Modifier
-  &.sidebar--compact:not(.sidebar--responsive) {
-    @include sidebar-compact-global;
-  }
-
-  &.sidebar--compact.sidebar--responsive {
-    // --op-breakpoint-medium
-    @media (width > 1024px) {
-      @include sidebar-compact-global;
-    }
-
-    // --op-breakpoint-medium
-    @media (width <= 1024px) {
-      @include sidebar-rail-global;
-    }
-  }
-
-  &.sidebar--rail {
-    @include sidebar-rail-global;
-  }
-
-  &.sidebar--compact {
-    @include sidebar-compact-global;
-  }
-}
-
-.sidebar {
-  @extend %sidebar-global;
-}
-
-// Primary
-.sidebar-primary {
-  @extend %sidebar-global;
-
-  --_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);
-}