@rolemodel/optics 1.2.0 → 1.4.0

package/dist/scss/components/{tab.scss → tab.css}

@@ -1,10 +1,10 @@
-%tab-group-global {
+.tab-group {
   display: flex;
   align-items: center;
 }
 
-%tab-global {
-  // Public API
+.tab {
+  /* 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);
@@ -13,7 +13,7 @@
   --_op-tab-indicator-width-large: var(--op-border-width-x-large);
   --_op-tab-disabled-opacity: var(--op-opacity-disabled);
 
-  // Private API
+  /* 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);
@@ -29,14 +29,21 @@
     box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
   }
 
-  // Focus State
+  /* Focus State */
   &:focus,
   &:focus-within,
   &:focus-visible {
     outline: none;
   }
 
-  // Focus State
+  /* 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);
+  }
+
+  /* Focus State */
   &:focus-visible:not(.tab--disabled) {
     z-index: 1;
     box-shadow: var(--op-input-focus-primary);
@@ -48,20 +55,13 @@
     }
   }
 
-  // Disabled State
+  /* 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
+  /* Size Modifiers */
   &.tab--small {
     --__op-tab-padding: var(--_op-tab-padding-small);
     --__op-tab-font-size: var(--_op-tab-font-small);
@@ -74,11 +74,3 @@
     --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
   }
 }
-
-.tab-group {
-  @extend %tab-group-global;
-}
-
-.tab {
-  @extend %tab-global;
-}

package/dist/scss/components/{text_pair.scss → text_pair.css}

@@ -1,10 +1,10 @@
-%text-pair-global {
-  // Public API (allowed to be overridden)
+.text-pair {
+  /* Public API (customizable component options) */
   --_op-text-pair-font-size-small: var(--op-font-small);
   --_op-text-pair-font-size-medium: var(--op-font-medium);
   --_op-text-pair-font-size-large: var(--op-font-large);
 
-  // Private API (don't touch these)
+  /* Private API (component option defaults) */
   --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
   --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
 
@@ -53,7 +53,3 @@
     }
   }
 }
-
-.text-pair {
-  @extend %text-pair-global;
-}

package/dist/scss/components/{tooltip.scss → tooltip.css}

@@ -1,8 +1,8 @@
-// Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/
+/* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
 
-%tooltip-global {
-  // Public API
-  --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); // 200px
+[data-tooltip-text] {
+  /* Public API (customizable component options) */
+  --_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);
@@ -31,7 +31,7 @@
     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-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;
@@ -59,80 +59,76 @@
   &:not([data-tooltip-position]) {
     &::before,
     &::after {
-      left: 50%;
+      inset-inline-start: 50%;
       transform: translateX(-50%);
     }
 
     &::before {
-      bottom: 100%;
-      margin-bottom: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+      inset-block-end: 100%;
+      margin-block-end: 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));
+      inset-block-end: 100%;
+      margin-block-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
     }
   }
 
   &[data-tooltip-position='left'] {
     &::before,
     &::after {
-      top: 50%;
+      inset-block-start: 50%;
       transform: translateY(-50%);
     }
 
     &::before {
-      right: 100%;
-      margin-right: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+      inset-inline-end: 100%;
+      margin-inline-end: 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));
+      inset-inline-end: 100%;
+      margin-inline-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
     }
   }
 
   &[data-tooltip-position='bottom'] {
     &::before,
     &::after {
-      left: 50%;
+      inset-inline-start: 50%;
       transform: translateX(-50%);
     }
 
     &::before {
-      top: 100%;
-      margin-top: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+      inset-block-start: 100%;
+      margin-block-start: 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));
+      inset-block-start: 100%;
+      margin-block-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
     }
   }
 
   &[data-tooltip-position='right'] {
     &::before,
     &::after {
-      top: 50%;
+      inset-block-start: 50%;
       transform: translateY(-50%);
     }
 
     &::before {
-      left: 100%;
-      margin-left: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+      inset-inline-start: 100%;
+      margin-inline-start: 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));
+      inset-inline-start: 100%;
+      margin-inline-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
     }
   }
 }
-
-[data-tooltip-text] {
-  @extend %tooltip-global;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "packageManager": "yarn@4.2.2",
   "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/scss/optics.scss",

package/dist/scss/components/alert.scss

@@ -1,176 +0,0 @@
-%alert-global {
-  display: flex;
-  align-items: center;
-  padding: var(--op-space-x-small) var(--op-space-medium);
-  border-radius: var(--op-radius-medium);
-  gap: var(--op-space-small);
-
-  .alert__icon {
-    /* stylelint-disable scss/at-extend-no-missing-placeholder */
-    @extend .icon--large;
-    @extend .icon--weight-bold;
-    /* stylelint-enable scss/at-extend-no-missing-placeholder */
-
-    line-height: var(--op-line-height-dense);
-  }
-
-  .alert__messages {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: var(--op-space-2x-small);
-  }
-
-  .alert__title {
-    font-size: var(--op-font-medium);
-    font-weight: var(--op-font-weight-medium);
-  }
-
-  .alert__description {
-    font-size: var(--op-font-small);
-  }
-
-  &.alert--flash {
-    position: fixed;
-    z-index: var(--op-z-index-alert-group);
-    top: var(--op-space-large);
-    right: var(--op-space-large);
-    animation: var(--op-animation-flash);
-  }
-}
-
-.alert-warning {
-  @extend %alert-global;
-
-  background-color: var(--op-color-alerts-warning-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-plus-eight);
-
-  .alert__title {
-    color: var(--op-color-alerts-warning-on-plus-eight-alt);
-  }
-
-  &.alert--muted {
-    background-color: var(--op-color-alerts-warning-plus-five);
-    box-shadow: none;
-    color: var(--op-color-alerts-warning-on-plus-five);
-
-    .alert__title {
-      color: var(--op-color-alerts-warning-on-plus-five-alt);
-    }
-  }
-
-  &.alert--filled {
-    background-color: var(--op-color-alerts-warning-base);
-    box-shadow: none;
-    color: var(--op-color-alerts-warning-on-base);
-
-    .alert__title {
-      color: var(--op-color-alerts-warning-on-base-alt);
-    }
-  }
-}
-
-// alert-alert is an alias for alert-danger. See Alert.mdx for reasoning.
-.alert-danger,
-.alert-alert {
-  @extend %alert-global;
-
-  background-color: var(--op-color-alerts-danger-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-plus-eight);
-
-  /* stylelint-disable no-descending-specificity */
-  .alert__title {
-    color: var(--op-color-alerts-danger-on-plus-eight-alt);
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  &.alert--muted {
-    background-color: var(--op-color-alerts-danger-plus-five);
-    box-shadow: none;
-    color: var(--op-color-alerts-danger-on-plus-five);
-
-    .alert__title {
-      color: var(--op-color-alerts-danger-on-plus-five-alt);
-    }
-  }
-
-  &.alert--filled {
-    background-color: var(--op-color-alerts-danger-base);
-    box-shadow: none;
-    color: var(--op-color-alerts-danger-on-base);
-
-    .alert__title {
-      color: var(--op-color-alerts-danger-on-base-alt);
-    }
-  }
-}
-
-.alert-info {
-  @extend %alert-global;
-
-  background-color: var(--op-color-alerts-info-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-on-plus-eight);
-
-  /* stylelint-disable no-descending-specificity */
-  .alert__title {
-    color: var(--op-color-alerts-info-on-plus-eight-alt);
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  &.alert--muted {
-    background-color: var(--op-color-alerts-info-plus-five);
-    box-shadow: none;
-    color: var(--op-color-alerts-info-on-plus-five);
-
-    .alert__title {
-      color: var(--op-color-alerts-info-on-plus-five-alt);
-    }
-  }
-
-  &.alert--filled {
-    background-color: var(--op-color-alerts-info-base);
-    box-shadow: none;
-    color: var(--op-color-alerts-info-on-base);
-
-    .alert__title {
-      color: var(--op-color-alerts-info-on-base-alt);
-    }
-  }
-}
-
-.alert-notice {
-  @extend %alert-global;
-
-  background-color: var(--op-color-alerts-notice-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-on-plus-eight);
-
-  /* stylelint-disable no-descending-specificity */
-  .alert__title {
-    color: var(--op-color-alerts-notice-on-plus-eight-alt);
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  &.alert--muted {
-    background-color: var(--op-color-alerts-notice-plus-five);
-    box-shadow: none;
-    color: var(--op-color-alerts-notice-on-plus-five);
-
-    .alert__title {
-      color: var(--op-color-alerts-notice-on-plus-five-alt);
-    }
-  }
-
-  &.alert--filled {
-    background-color: var(--op-color-alerts-notice-base);
-    box-shadow: none;
-    color: var(--op-color-alerts-notice-on-base);
-
-    .alert__title {
-      color: var(--op-color-alerts-notice-on-base-alt);
-    }
-  }
-}