@rolemodel/optics 0.2.4 → 0.3.0

package/dist/scss/core/utilities.scss

@@ -3,7 +3,7 @@
 .container {
   width: 100%;
   max-width: $breakpoint-medium;
-  padding: 0 var(--rm-space-large);
+  padding: 0 var(--op-space-large);
   margin: 0 auto;
 }
 
@@ -12,11 +12,11 @@
 }
 
 .container--md-padding {
-  padding: 0 var(--rm-space-medium);
+  padding: 0 var(--op-space-medium);
 }
 
 .container--sm-padding {
-  padding: 0 var(--rm-space-small);
+  padding: 0 var(--op-space-small);
 }
 
 .container--xs {
@@ -93,39 +93,39 @@
 
 // Gap Properties
 .gap-xxs {
-  gap: var(--rm-space-2x-small);
+  gap: var(--op-space-2x-small);
 
-  --rm-gap: var(--rm-space-2x-small);
+  --op-gap: var(--op-space-2x-small);
 }
 
 .gap-xs {
-  gap: var(--rm-space-x-small);
+  gap: var(--op-space-x-small);
 
-  --rm-gap: var(--rm-space-x-small);
+  --op-gap: var(--op-space-x-small);
 }
 
 .gap-sm {
-  gap: var(--rm-space-small);
+  gap: var(--op-space-small);
 
-  --rm-gap: var(--rm-space-small);
+  --op-gap: var(--op-space-small);
 }
 
 .gap-md {
-  gap: var(--rm-space-medium);
+  gap: var(--op-space-medium);
 
-  --rm-gap: var(--rm-space-medium);
+  --op-gap: var(--op-space-medium);
 }
 
 .gap-lg {
-  gap: var(--rm-space-large);
+  gap: var(--op-space-large);
 
-  --rm-gap: var(--rm-space-large);
+  --op-gap: var(--op-space-large);
 }
 
 .gap-xl {
-  gap: var(--rm-space-x-large);
+  gap: var(--op-space-x-large);
 
-  --rm-gap: var(--rm-space-x-large);
+  --op-gap: var(--op-space-x-large);
 }
 
 // Justify Content
@@ -194,6 +194,10 @@
   align-self: stretch;
 }
 
+.self-baseline {
+  align-self: baseline;
+}
+
 // Text Alignment
 
 .text-left {
@@ -215,23 +219,23 @@
 // Box Margin
 
 .margin-xl {
-  margin: var(--rm-space-x-large);
+  margin: var(--op-space-x-large);
 }
 
 .margin-lg {
-  margin: var(--rm-space-large);
+  margin: var(--op-space-large);
 }
 
 .margin-md {
-  margin: var(--rm-space-medium);
+  margin: var(--op-space-medium);
 }
 
 .margin-sm {
-  margin: var(--rm-space-small);
+  margin: var(--op-space-small);
 }
 
 .margin-xs {
-  margin: var(--rm-space-x-small);
+  margin: var(--op-space-x-small);
 }
 
 .margin-none {
@@ -245,28 +249,28 @@
 // Vertical Margin
 
 .margin-y-xl {
-  margin-top: var(--rm-space-x-large);
-  margin-bottom: var(--rm-space-x-large);
+  margin-top: var(--op-space-x-large);
+  margin-bottom: var(--op-space-x-large);
 }
 
 .margin-y-lg {
-  margin-top: var(--rm-space-large);
-  margin-bottom: var(--rm-space-large);
+  margin-top: var(--op-space-large);
+  margin-bottom: var(--op-space-large);
 }
 
 .margin-y-md {
-  margin-top: var(--rm-space-medium);
-  margin-bottom: var(--rm-space-medium);
+  margin-top: var(--op-space-medium);
+  margin-bottom: var(--op-space-medium);
 }
 
 .margin-y-sm {
-  margin-top: var(--rm-space-small);
-  margin-bottom: var(--rm-space-small);
+  margin-top: var(--op-space-small);
+  margin-bottom: var(--op-space-small);
 }
 
 .margin-y-xs {
-  margin-top: var(--rm-space-x-small);
-  margin-bottom: var(--rm-space-x-small);
+  margin-top: var(--op-space-x-small);
+  margin-bottom: var(--op-space-x-small);
 }
 
 .margin-y-none {
@@ -277,28 +281,28 @@
 // Horizontal Margin
 
 .margin-x-xl {
-  margin-right: var(--rm-space-x-large);
-  margin-left: var(--rm-space-x-large);
+  margin-right: var(--op-space-x-large);
+  margin-left: var(--op-space-x-large);
 }
 
 .margin-x-lg {
-  margin-right: var(--rm-space-large);
-  margin-left: var(--rm-space-large);
+  margin-right: var(--op-space-large);
+  margin-left: var(--op-space-large);
 }
 
 .margin-x-md {
-  margin-right: var(--rm-space-medium);
-  margin-left: var(--rm-space-medium);
+  margin-right: var(--op-space-medium);
+  margin-left: var(--op-space-medium);
 }
 
 .margin-x-sm {
-  margin-right: var(--rm-space-small);
-  margin-left: var(--rm-space-small);
+  margin-right: var(--op-space-small);
+  margin-left: var(--op-space-small);
 }
 
 .margin-x-xs {
-  margin-right: var(--rm-space-x-small);
-  margin-left: var(--rm-space-x-small);
+  margin-right: var(--op-space-x-small);
+  margin-left: var(--op-space-x-small);
 }
 
 .margin-x-none {
@@ -309,23 +313,23 @@
 // Top Margin
 
 .margin-top-xl {
-  margin-top: var(--rm-space-x-large);
+  margin-top: var(--op-space-x-large);
 }
 
 .margin-top-lg {
-  margin-top: var(--rm-space-large);
+  margin-top: var(--op-space-large);
 }
 
 .margin-top-md {
-  margin-top: var(--rm-space-medium);
+  margin-top: var(--op-space-medium);
 }
 
 .margin-top-sm {
-  margin-top: var(--rm-space-small);
+  margin-top: var(--op-space-small);
 }
 
 .margin-top-xs {
-  margin-top: var(--rm-space-x-small);
+  margin-top: var(--op-space-x-small);
 }
 
 .margin-top-none {
@@ -335,23 +339,23 @@
 // Bottom Margin
 
 .margin-bottom-xl {
-  margin-bottom: var(--rm-space-x-large);
+  margin-bottom: var(--op-space-x-large);
 }
 
 .margin-bottom-lg {
-  margin-bottom: var(--rm-space-large);
+  margin-bottom: var(--op-space-large);
 }
 
 .margin-bottom-md {
-  margin-bottom: var(--rm-space-medium);
+  margin-bottom: var(--op-space-medium);
 }
 
 .margin-bottom-sm {
-  margin-bottom: var(--rm-space-small);
+  margin-bottom: var(--op-space-small);
 }
 
 .margin-bottom-xs {
-  margin-bottom: var(--rm-space-x-small);
+  margin-bottom: var(--op-space-x-small);
 }
 
 .margin-bottom-none {
@@ -361,23 +365,23 @@
 // Right Margin
 
 .margin-right-xl {
-  margin-right: var(--rm-space-x-large);
+  margin-right: var(--op-space-x-large);
 }
 
 .margin-right-lg {
-  margin-right: var(--rm-space-large);
+  margin-right: var(--op-space-large);
 }
 
 .margin-right-md {
-  margin-right: var(--rm-space-medium);
+  margin-right: var(--op-space-medium);
 }
 
 .margin-right-sm {
-  margin-right: var(--rm-space-small);
+  margin-right: var(--op-space-small);
 }
 
 .margin-right-xs {
-  margin-right: var(--rm-space-x-small);
+  margin-right: var(--op-space-x-small);
 }
 
 .margin-right-none {
@@ -387,23 +391,23 @@
 // Left Margin
 
 .margin-left-xl {
-  margin-left: var(--rm-space-x-large);
+  margin-left: var(--op-space-x-large);
 }
 
 .margin-left-lg {
-  margin-left: var(--rm-space-large);
+  margin-left: var(--op-space-large);
 }
 
 .margin-left-md {
-  margin-left: var(--rm-space-medium);
+  margin-left: var(--op-space-medium);
 }
 
 .margin-left-sm {
-  margin-left: var(--rm-space-small);
+  margin-left: var(--op-space-small);
 }
 
 .margin-left-xs {
-  margin-left: var(--rm-space-x-small);
+  margin-left: var(--op-space-x-small);
 }
 
 .margin-left-none {
@@ -495,43 +499,43 @@
     flex: 1;
 
     &.four-fifths-width {
-      flex-basis: calc(calc(100% * 4 / 5) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 4 / 5) - var(--op-gap));
     }
 
     &.three-fifths-width {
-      flex-basis: calc(calc(100% * 3 / 5) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 3 / 5) - var(--op-gap));
     }
 
     &.two-fifths-width {
-      flex-basis: calc(calc(100% * 2 / 5) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 2 / 5) - var(--op-gap));
     }
 
     &.one-fifth-width {
-      flex-basis: calc(calc(100% * 1 / 5) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 1 / 5) - var(--op-gap));
     }
 
     &.three-quarters-width {
-      flex-basis: calc(calc(100% * 3 / 4) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 3 / 4) - var(--op-gap));
     }
 
     &.one-quarter-width {
-      flex-basis: calc(calc(100% * 1 / 4) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 1 / 4) - var(--op-gap));
     }
 
     &.two-thirds-width {
-      flex-basis: calc(calc(100% * 2 / 3) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 2 / 3) - var(--op-gap));
     }
 
     &.one-third-width {
-      flex-basis: calc(calc(100% * 1 / 3) - var(--rm-gap));
+      flex-basis: calc(calc(100% * 1 / 3) - var(--op-gap));
     }
 
     &.full-width {
-      flex-basis: calc(100% - var(--rm-gap));
+      flex-basis: calc(100% - var(--op-gap));
     }
 
     &.half-width {
-      flex-basis: calc(50% - var(--rm-gap));
+      flex-basis: calc(50% - var(--op-gap));
     }
   }
 

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

@@ -3,7 +3,7 @@
   .sidebar__brand {
     svg {
       width: 100%;
-      padding: 0 var(--rm-space-small);
+      padding: 0 var(--op-space-small);
     }
 
     .sidebar__brand-label {
@@ -14,54 +14,54 @@
 
 @mixin sidebar-16six-drawer-global {
   .sidebar__item {
-    border-radius: var(--rm-radius-large);
-    font-size: var(--rm-font-small);
+    border-radius: var(--op-radius-large);
+    font-size: var(--op-font-small);
   }
 }
 
 .sidebar-16six {
   @extend %sidebar-global;
 
-  --_rm-sidebar-spacing: var(--rm-space-x-small);
+  --_op-sidebar-spacing: var(--op-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);
+  --_op-sidebar-background-color: var(--op-color-primary-minus-five);
+  --_op-sidebar-text-color: var(--op-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);
+  --_op-sidebar-icon-background-active-color: var(--op-color-primary-minus-three);
+  --_op-sidebar-icon-text-active-color: var(--op-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);
+  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-minus-three);
+  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-minus-three);
 
-  gap: var(--rm-space-x-large);
+  gap: var(--op-space-x-large);
 
   .sidebar__brand {
     display: flex;
     color: inherit;
-    gap: var(--rm-space-small);
+    gap: var(--op-space-small);
     text-decoration: none;
 
     svg {
-      width: var(--rm-space-3x-large);
+      width: var(--op-space-3x-large);
     }
 
     .sidebar__brand-label {
       display: flex;
       flex-direction: column;
-      gap: var(--rm-space-4x-small);
+      gap: var(--op-space-4x-small);
     }
   }
 
   .sidebar__content {
-    gap: var(--rm-space-x-small);
+    gap: var(--op-space-x-small);
   }
 
   .sidebar__item {
     .sidebar__item-icon {
-      border-radius: var(--rm-radius-large);
+      border-radius: var(--op-radius-large);
 
       &.sidebar__item-icon--rotated {
         rotate: 90deg;
@@ -71,7 +71,7 @@
     &:hover,
     &.active {
       .sidebar__item-icon {
-        --rm-mso-weight: var(--rm-font-weight-medium);
+        --op-mso-weight: var(--op-font-weight-medium);
       }
     }
   }

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

@@ -1,7 +1,7 @@
 // Domains Sidebar Example
 @mixin sidebar-domains-rail-global {
   .sidebar__brand {
-    padding: 0 var(--_rm-sidebar-spacing);
+    padding: 0 var(--_op-sidebar-spacing);
   }
 }
 
@@ -16,7 +16,7 @@
   }
 
   .sidebar__section-divider {
-    margin: var(--rm-space-small) 0;
+    margin: var(--op-space-small) 0;
   }
 }
 
@@ -24,19 +24,19 @@
   @extend %sidebar-global;
 
   // Normal
-  --_rm-sidebar-background-color: var(--rm-color-background);
-  --_rm-sidebar-text-color: var(--rm-color-on-background);
+  --_op-sidebar-background-color: var(--op-color-background);
+  --_op-sidebar-text-color: var(--op-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);
+  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-seven);
+  --_op-sidebar-icon-text-active-color: var(--op-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);
+  --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-seven);
+  --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-seven);
 
   .sidebar__brand {
-    padding: 0 var(--rm-space-4x-large);
+    padding: 0 var(--op-space-4x-large);
   }
 
   // Modifiers