@rolemodel/optics 0.2.3

package/dist/scss/core/utilities.scss

@@ -0,0 +1,548 @@
+// Container Properties
+
+.container {
+  width: 100%;
+  max-width: $breakpoint-medium;
+  padding: 0 var(--rm-space-large);
+  margin: 0 auto;
+}
+
+.container--sm {
+  max-width: $breakpoint-small;
+}
+
+.container--md-padding {
+  padding: 0 var(--rm-space-medium);
+}
+
+.container--sm-padding {
+  padding: 0 var(--rm-space-small);
+}
+
+.container--xs {
+  max-width: $breakpoint-x-small;
+}
+
+// Width Properties
+
+.full-width {
+  width: 100%;
+}
+
+.half-width {
+  width: 50%;
+}
+
+.four-fifths-width {
+  width: calc(100% * 4 / 5);
+}
+
+.three-fifths-width {
+  width: calc(100% * 3 / 5);
+}
+
+.two-fifths-width {
+  width: calc(100% * 2 / 5);
+}
+
+.one-fifth-width {
+  width: calc(100% * 1 / 5);
+}
+
+.three-quarters-width {
+  width: calc(100% * 3 / 4);
+}
+
+.one-quarter-width {
+  width: calc(100% * 1 / 4);
+}
+
+.two-thirds-width {
+  width: calc(100% * 2 / 3);
+}
+
+.one-third-width {
+  width: calc(100% * 1 / 3);
+}
+
+// Flex Properties
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+// Gap Properties
+.gap-xxs {
+  gap: var(--rm-space-2x-small);
+
+  --rm-gap: var(--rm-space-2x-small);
+}
+
+.gap-xs {
+  gap: var(--rm-space-x-small);
+
+  --rm-gap: var(--rm-space-x-small);
+}
+
+.gap-sm {
+  gap: var(--rm-space-small);
+
+  --rm-gap: var(--rm-space-small);
+}
+
+.gap-md {
+  gap: var(--rm-space-medium);
+
+  --rm-gap: var(--rm-space-medium);
+}
+
+.gap-lg {
+  gap: var(--rm-space-large);
+
+  --rm-gap: var(--rm-space-large);
+}
+
+.gap-xl {
+  gap: var(--rm-space-x-large);
+
+  --rm-gap: var(--rm-space-x-large);
+}
+
+// Justify Content
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+// Align Items
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+// Align Self
+
+.self-auto {
+  align-self: auto;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+// Text Alignment
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+// Box Margin
+
+.margin-xl {
+  margin: var(--rm-space-x-large);
+}
+
+.margin-lg {
+  margin: var(--rm-space-large);
+}
+
+.margin-md {
+  margin: var(--rm-space-medium);
+}
+
+.margin-sm {
+  margin: var(--rm-space-small);
+}
+
+.margin-xs {
+  margin: var(--rm-space-x-small);
+}
+
+.margin-none {
+  margin: 0;
+}
+
+.margin-auto {
+  margin: auto;
+}
+
+// Vertical Margin
+
+.margin-y-xl {
+  margin-top: var(--rm-space-x-large);
+  margin-bottom: var(--rm-space-x-large);
+}
+
+.margin-y-lg {
+  margin-top: var(--rm-space-large);
+  margin-bottom: var(--rm-space-large);
+}
+
+.margin-y-md {
+  margin-top: var(--rm-space-medium);
+  margin-bottom: var(--rm-space-medium);
+}
+
+.margin-y-sm {
+  margin-top: var(--rm-space-small);
+  margin-bottom: var(--rm-space-small);
+}
+
+.margin-y-xs {
+  margin-top: var(--rm-space-x-small);
+  margin-bottom: var(--rm-space-x-small);
+}
+
+.margin-y-none {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+// Horizontal Margin
+
+.margin-x-xl {
+  margin-right: var(--rm-space-x-large);
+  margin-left: var(--rm-space-x-large);
+}
+
+.margin-x-lg {
+  margin-right: var(--rm-space-large);
+  margin-left: var(--rm-space-large);
+}
+
+.margin-x-md {
+  margin-right: var(--rm-space-medium);
+  margin-left: var(--rm-space-medium);
+}
+
+.margin-x-sm {
+  margin-right: var(--rm-space-small);
+  margin-left: var(--rm-space-small);
+}
+
+.margin-x-xs {
+  margin-right: var(--rm-space-x-small);
+  margin-left: var(--rm-space-x-small);
+}
+
+.margin-x-none {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+// Top Margin
+
+.margin-top-xl {
+  margin-top: var(--rm-space-x-large);
+}
+
+.margin-top-lg {
+  margin-top: var(--rm-space-large);
+}
+
+.margin-top-md {
+  margin-top: var(--rm-space-medium);
+}
+
+.margin-top-sm {
+  margin-top: var(--rm-space-small);
+}
+
+.margin-top-xs {
+  margin-top: var(--rm-space-x-small);
+}
+
+.margin-top-none {
+  margin-top: 0;
+}
+
+// Bottom Margin
+
+.margin-bottom-xl {
+  margin-bottom: var(--rm-space-x-large);
+}
+
+.margin-bottom-lg {
+  margin-bottom: var(--rm-space-large);
+}
+
+.margin-bottom-md {
+  margin-bottom: var(--rm-space-medium);
+}
+
+.margin-bottom-sm {
+  margin-bottom: var(--rm-space-small);
+}
+
+.margin-bottom-xs {
+  margin-bottom: var(--rm-space-x-small);
+}
+
+.margin-bottom-none {
+  margin-bottom: 0;
+}
+
+// Right Margin
+
+.margin-right-xl {
+  margin-right: var(--rm-space-x-large);
+}
+
+.margin-right-lg {
+  margin-right: var(--rm-space-large);
+}
+
+.margin-right-md {
+  margin-right: var(--rm-space-medium);
+}
+
+.margin-right-sm {
+  margin-right: var(--rm-space-small);
+}
+
+.margin-right-xs {
+  margin-right: var(--rm-space-x-small);
+}
+
+.margin-right-none {
+  margin-left: 0;
+}
+
+// Left Margin
+
+.margin-left-xl {
+  margin-left: var(--rm-space-x-large);
+}
+
+.margin-left-lg {
+  margin-left: var(--rm-space-large);
+}
+
+.margin-left-md {
+  margin-left: var(--rm-space-medium);
+}
+
+.margin-left-sm {
+  margin-left: var(--rm-space-small);
+}
+
+.margin-left-xs {
+  margin-left: var(--rm-space-x-small);
+}
+
+.margin-left-none {
+  margin-left: 0;
+}
+
+// Layout properties
+// Layout row evenly spaces all elements within it.
+// It also makes it responsive at the sm breakpoint.
+// If you combine it with flex-wrap, it tries to break using the
+// normal flex wrap rules instead of responsively.
+
+// E.G:
+// .flex.layout-row
+//   .card Item
+//   .card Item
+//   .card Item
+
+// Normal width
+// | Item | | Item | | Item |
+// Mobile
+// | Item |
+// | Item |
+// | Item |
+
+// E.G:
+// .flex.layout-row.flex-wrap
+//   .card Item
+//   .card Item
+
+// Normal width
+// | Item | | Item | | Item |
+// Mobile (really small)
+// | Item | | Item |
+// |      Item     |
+.layout-row {
+  & > * {
+    flex: 1;
+  }
+
+  @media screen and (max-width: $breakpoint-small) {
+    // Use flex wrapping strategy instead of responsive wrapping at sm breakpoint.
+    &:not(.flex-wrap) {
+      flex-direction: column;
+    }
+  }
+}
+
+// Flexible Layout
+// This allows for creating a grid like area using one flex container with multiple lines
+// Percentage based widths can be used to define the areas of each row.
+// Note: This responsively breaks at $breakpoint-small to a single column.
+// You can add the .flex-no-wrap class to prevent that.
+// This can also be combined with .gap-{size} to space items without having
+// them wrap when you don't want them to.
+
+// E.G
+// | One Fifth | | One Fifth | | One Fifth | | One Fifth | | One Fifth |
+// | One Quarter  | | One Quarter  | |  One Quarter  | |  One Quarter  |
+// |      One Third      | |      One Third      | |     One Third     |
+// |            One Half            | |            One Half            |
+// |                              One Full                             |
+// Mobile
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+// | Item |
+
+// .flexible-layout-area can be nested in the item of another .flexible-layout-area
+// for a more complex layout if needed. Gaps are not inherited and will need
+// to be redefined at each level
+
+.flexible-layout-area {
+  display: flex;
+  flex-wrap: wrap;
+
+  & > * {
+    flex: 1;
+
+    &.four-fifths-width {
+      flex-basis: calc(calc(100% * 4 / 5) - var(--rm-gap));
+    }
+
+    &.three-fifths-width {
+      flex-basis: calc(calc(100% * 3 / 5) - var(--rm-gap));
+    }
+
+    &.two-fifths-width {
+      flex-basis: calc(calc(100% * 2 / 5) - var(--rm-gap));
+    }
+
+    &.one-fifth-width {
+      flex-basis: calc(calc(100% * 1 / 5) - var(--rm-gap));
+    }
+
+    &.three-quarters-width {
+      flex-basis: calc(calc(100% * 3 / 4) - var(--rm-gap));
+    }
+
+    &.one-quarter-width {
+      flex-basis: calc(calc(100% * 1 / 4) - var(--rm-gap));
+    }
+
+    &.two-thirds-width {
+      flex-basis: calc(calc(100% * 2 / 3) - var(--rm-gap));
+    }
+
+    &.one-third-width {
+      flex-basis: calc(calc(100% * 1 / 3) - var(--rm-gap));
+    }
+
+    &.full-width {
+      flex-basis: calc(100% - var(--rm-gap));
+    }
+
+    &.half-width {
+      flex-basis: calc(50% - var(--rm-gap));
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-small) {
+    &:not(.flex-no-wrap) {
+      flex-direction: column;
+
+      & > * {
+        width: 100%;
+        flex-basis: 100%;
+      }
+    }
+  }
+}

package/dist/scss/optics.scss

@@ -0,0 +1,13 @@
+// Third party Vendors
+@import 'modern-css-reset/dist/reset';
+
+// Tokens
+@import 'core/tokens';
+
+// Base styles and utilities
+@import 'core/base';
+@import 'core/layout';
+@import 'core/utilities';
+
+// Components
+@import 'components';

package/dist/scss/recipes/16six-sidebar.scss

@@ -0,0 +1,97 @@
+// 16Six Sidebar Example
+@mixin sidebar-16six-rail-global {
+  .sidebar__brand {
+    svg {
+      width: 100%;
+      padding: 0 var(--rm-space-small);
+    }
+
+    .sidebar__brand-label {
+      display: none;
+    }
+  }
+}
+
+@mixin sidebar-16six-drawer-global {
+  .sidebar__item {
+    border-radius: var(--rm-radius-large);
+    font-size: var(--rm-font-small);
+  }
+}
+
+.sidebar-16six {
+  @extend %sidebar-global;
+
+  --_rm-sidebar-spacing: var(--rm-space-x-small);
+
+  // Normal
+  --_rm-sidebar-background-color: var(--rm-color-primary-minus-five);
+  --_rm-sidebar-text-color: var(--rm-color-primary-on-minus-five);
+
+  // Active
+  --_rm-sidebar-icon-background-active-color: var(--rm-color-primary-minus-three);
+  --_rm-sidebar-icon-text-active-color: var(--rm-color-primary-on-minus-three);
+
+  // Hover
+  --_rm-sidebar-icon-background-hover-color: var(--rm-color-primary-minus-three);
+  --_rm-sidebar-icon-text-hover-color: var(--rm-color-primary-on-minus-three);
+
+  gap: var(--rm-space-x-large);
+
+  .sidebar__brand {
+    display: flex;
+    color: inherit;
+    gap: var(--rm-space-small);
+    text-decoration: none;
+
+    svg {
+      width: var(--rm-space-3x-large);
+    }
+
+    .sidebar__brand-label {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rm-space-4x-small);
+    }
+  }
+
+  .sidebar__content {
+    gap: var(--rm-space-x-small);
+  }
+
+  .sidebar__item {
+    .sidebar__item-icon {
+      border-radius: var(--rm-radius-large);
+
+      &.sidebar__item-icon--rotated {
+        rotate: 90deg;
+      }
+    }
+
+    &:hover,
+    &.active {
+      .sidebar__item-icon {
+        --rm-mso-weight: var(--rm-font-weight-medium);
+      }
+    }
+  }
+
+  // Modifiers
+  &.sidebar--drawer:not(.sidebar--responsive) {
+    @include sidebar-16six-drawer-global;
+  }
+
+  &.sidebar--drawer.sidebar--responsive {
+    @media (width > $breakpoint-medium) {
+      @include sidebar-16six-drawer-global;
+    }
+
+    @media (width <= $breakpoint-medium) {
+      @include sidebar-16six-rail-global;
+    }
+  }
+
+  &.sidebar--rail {
+    @include sidebar-16six-rail-global;
+  }
+}

package/dist/scss/recipes/domains-sidebar.scss

@@ -0,0 +1,60 @@
+// Domains Sidebar Example
+@mixin sidebar-domains-rail-global {
+  .sidebar__brand {
+    padding: 0 var(--_rm-sidebar-spacing);
+  }
+}
+
+@mixin sidebar-domains-drawer-global {
+  .sidebar__content {
+    padding: 0;
+  }
+
+  .sidebar__item {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .sidebar__section-divider {
+    margin: var(--rm-space-small) 0;
+  }
+}
+
+.sidebar-domains {
+  @extend %sidebar-global;
+
+  // Normal
+  --_rm-sidebar-background-color: var(--rm-color-background);
+  --_rm-sidebar-text-color: var(--rm-color-on-background);
+
+  // Active
+  --_rm-sidebar-icon-background-active-color: var(--rm-color-primary-plus-seven);
+  --_rm-sidebar-icon-text-active-color: var(--rm-color-primary-on-plus-seven);
+
+  // Hover
+  --_rm-sidebar-icon-background-hover-color: var(--rm-color-neutral-plus-seven);
+  --_rm-sidebar-icon-text-hover-color: var(--rm-color-neutral-on-plus-seven);
+
+  .sidebar__brand {
+    padding: 0 var(--rm-space-4x-large);
+  }
+
+  // Modifiers
+  &.sidebar--drawer:not(.sidebar--responsive) {
+    @include sidebar-domains-drawer-global;
+  }
+
+  &.sidebar--drawer.sidebar--responsive {
+    @media (width > $breakpoint-medium) {
+      @include sidebar-domains-drawer-global;
+    }
+
+    @media (width <= $breakpoint-medium) {
+      @include sidebar-domains-rail-global;
+    }
+  }
+
+  &.sidebar--rail {
+    @include sidebar-domains-rail-global;
+  }
+}