@rolemodel/optics 0.4.2 → 0.5.0

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,106 @@
+%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;
+
+  input {
+    width: 0;
+    height: 0;
+    margin-right: calc(-1 * var(--op-space-2x-small));
+
+    &: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/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);

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

@@ -64,6 +64,41 @@
   --op-color-alerts-notice-l: 64%;
 }
 
+@mixin opacities {
+  /**
+  * @tokens Opacities
+  * @presenter Opacity
+  */
+  --op-opacity-none: 0;
+  --op-opacity-overlay: 0.2;
+  --op-opacity-disabled: 0.4;
+  --op-opacity-half: 0.5;
+  --op-opacity-full: 1;
+}
+
+// Breakpoints are duplicated here for use as variables with calculations and for use in @media queries.
+// We use SCSS variables outside the root since support for custom properties / css variables
+// is not yet available
+// https://drafts.csswg.org/css-env-1/
+// https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
+@mixin breakpoints {
+  /**
+  * @tokens Breakpoints
+  * @presenter Spacing
+  */
+  --op-breakpoint-x-small: 512px; // vertical phone
+  --op-breakpoint-small: 768px; // vertical ipad
+  --op-breakpoint-medium: 1024px; // landscape ipad
+  --op-breakpoint-large: 1280px; // small laptop
+  --op-breakpoint-x-large: 1440px; // medium laptop
+}
+
+$breakpoint-x-small: 512px; // vertical phone
+$breakpoint-small: 768px; // vertical ipad
+$breakpoint-medium: 1024px; // landscape ipad
+$breakpoint-large: 1280px; // small laptop
+$breakpoint-x-large: 1440px; // medium laptop
+
 @mixin border-radius {
   /**
   * @tokens Border Radius
@@ -195,8 +230,8 @@
   /**
   * @tokens Encoded Images
   */
-  --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");
+  --op-encoded-images-dropdown-arrow-width: calc(1.2 * var(--op-space-scale-unit)); // 12px No way to string interpolate
+  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==');
 }
 
 @mixin fonts {
@@ -225,6 +260,14 @@
   --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); // 80px
 }
 
+@mixin sizing-scales {
+  /**
+  * @tokens Size Scale
+  * @presenter Spacing
+  */
+  --op-size-unit: 0.4rem; // 4px;
+}
+
 @mixin shadows {
   /**
   * @tokens Shadows
@@ -273,29 +316,25 @@
   --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-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
+    var(--op-input-outer-focus) var(--op-color-neutral-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);
+  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
+  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
 }
 
-// We use SCSS variables outside the root since support for custom properties / css variables
-// is not yet available
-// https://drafts.csswg.org/css-env-1/
-// https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
-
-/**
-* @tokens Breakpoints
-*/
-$breakpoint-x-small: 512px; // vertical phone
-$breakpoint-small: 768px; // vertical ipad
-$breakpoint-medium: 1024px; // landscape ipad
-$breakpoint-large: 1280px; // small laptop
-$breakpoint-x-large: 1440px; // medium laptop
-
 :root {
   // Color HSLs
   @include color-varieties;
+  @include opacities;
+
+  // Breakpoints
+  @include breakpoints;
 
   // Border
   @include border-radius;
@@ -320,6 +359,7 @@ $breakpoint-x-large: 1440px; // medium laptop
   @include encoded-images;
 
   // Spacing
+  @include sizing-scales;
   @include spacing-scales;
 
   // Shadows