@rolemodel/optics 2.1.2 → 2.1.4

package/.yarnrc.yml

@@ -1,2 +1,2 @@
-yarnPath: .yarn/releases/yarn-4.2.2.cjs
+yarnPath: .yarn/releases/yarn-4.8.1.cjs
 nodeLinker: node-modules

package/README.md

@@ -12,7 +12,7 @@
 
 </div>
 
-Optics is an css package that provides base styles and components that can be integrated and customized in a variety of projects.
+Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.
 
 ## Installation
 

package/dist/README.md

@@ -12,7 +12,7 @@
 
 </div>
 
-Optics is an css package that provides base styles and components that can be integrated and customized in a variety of projects.
+Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.
 
 ## Installation
 

package/dist/css/components/accordion.css

@@ -0,0 +1,66 @@
+.accordion {
+  /* Public API (customizable component options) */
+  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */
+
+  overflow: hidden;
+  interpolate-size: allow-keywords;
+
+  /* Elements */
+
+  summary {
+    display: grid;
+    min-height: var(--_op-accordion-summary-min-height);
+    align-items: center;
+    cursor: pointer;
+    gap: var(--op-space-2x-small);
+    grid-template-columns: auto 1fr auto;
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+      content: '';
+    }
+
+    .accordion__label {
+      color: var(--op-color-neutral-on-plus-max);
+      font-size: var(--op-font-x-small);
+      font-weight: var(--op-font-weight-semi-bold);
+    }
+
+    .accordion__marker {
+      --__op-icon-font-size: var(--_op-icon-font-size-x-large);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
+
+      justify-self: flex-end;
+      transition: var(--op-transition-accordion);
+      user-select: none;
+    }
+  }
+
+  &::details-content {
+    height: 0;
+    transition: var(--op-transition-accordion-content);
+  }
+
+  &[open] {
+    summary .accordion__marker {
+      rotate: 0.25turn;
+    }
+
+    &::details-content {
+      height: auto;
+    }
+  }
+
+  /* Modifiers */
+
+  &.accordion--disable-animation {
+    summary .accordion__marker {
+      transition: none;
+    }
+
+    &::details-content {
+      transition: none;
+    }
+  }
+}

package/dist/css/components/alert.css

@@ -0,0 +1,171 @@
+.alert {
+  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);
+
+  /* Elements */
+
+  .alert__icon {
+    --__op-icon-font-size: var(--_op-icon-font-size-large);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
+    --__op-icon-weight: var(--_op-icon-weight-bold);
+
+    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);
+  }
+
+  /* Modifiers */
+
+  &.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 {
+    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 {
+    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 {
+    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 {
+    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);
+      }
+    }
+  }
+}

package/dist/css/components/avatar.css

@@ -0,0 +1,95 @@
+.avatar {
+  /* Public API (customizable component options) */
+  --_op-avatar-border-radius: var(--op-radius-circle);
+  --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
+  --_op-avatar-outer-border-color: var(--op-color-neutral-base);
+  --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
+  --_op-avatar-outer-border-width: var(--op-border-width-large);
+  --_op-avatar-disabled-opacity: var(--op-opacity-disabled);
+  --_op-avatar-hover-opacity: var(--op-opacity-overlay);
+  --_op-avatar-size-small: calc(8 * var(--op-size-unit)); /* 32px */
+  --_op-avatar-size-medium: calc(10 * var(--op-size-unit)); /* 40px */
+  --_op-avatar-size-large: calc(14 * var(--op-size-unit)); /* 56px */
+
+  /* Private API (component option defaults) */
+  --__op-avatar-size: var(--_op-avatar-size-large);
+
+  position: relative;
+  z-index: 1;
+  display: block;
+  overflow: hidden;
+  width: var(--__op-avatar-size);
+  min-width: var(--__op-avatar-size);
+  height: var(--__op-avatar-size);
+  min-height: var(--__op-avatar-size);
+  border-radius: var(--_op-avatar-border-radius);
+
+  &::before {
+    position: absolute;
+    z-index: 2;
+    content: '';
+    inset: 0;
+  }
+
+  &::after {
+    position: absolute;
+    z-index: 3;
+    border-radius: var(--_op-avatar-border-radius);
+    box-shadow:
+      inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color),
+      inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
+    content: '';
+    inset: 0;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Disabled State */
+  &.avatar--disabled {
+    opacity: var(--_op-avatar-disabled-opacity);
+    pointer-events: none;
+  }
+
+  /* Focus State */
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    outline: none;
+  }
+
+  /* Hover State */
+  &:hover:not(div, .avatar--disabled) {
+    --_op-avatar-inner-border-color: var(--op-color-primary-base);
+    --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
+
+    cursor: pointer;
+
+    &::before {
+      background-color: var(--op-color-primary-base);
+      opacity: var(--_op-avatar-hover-opacity);
+    }
+  }
+
+  &:focus-visible:not(.avatar--disabled) {
+    --_op-avatar-outer-border-color: var(--op-color-primary-base);
+
+    cursor: pointer;
+  }
+
+  /* Size Modifiers */
+  &.avatar--small {
+    --__op-avatar-size: var(--_op-avatar-size-small);
+  }
+
+  &.avatar--medium {
+    --__op-avatar-size: var(--_op-avatar-size-medium);
+  }
+
+  &.avatar--large {
+    --__op-avatar-size: var(--_op-avatar-size-large);
+  }
+}

package/dist/css/components/badge.css

@@ -0,0 +1,73 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-neutral-base);
+  color: var(--op-color-neutral-on-base);
+  cursor: inherit;
+  font-size: var(--op-font-x-small);
+  font-weight: var(--op-font-weight-bold);
+  gap: var(--op-space-x-small);
+  letter-spacing: var(--op-letter-spacing-label);
+  line-height: var(--op-line-height-dense);
+  padding-block: var(--op-space-2x-small);
+  padding-inline: var(--op-space-x-small);
+  user-select: none;
+  white-space: nowrap;
+
+  /* Elements */
+
+  .material-symbols-outlined {
+    font-size: var(--op-font-small);
+  }
+
+  /* Modifiers */
+
+  &.badge--primary {
+    background-color: var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+  }
+
+  &.badge--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+  }
+
+  &.badge--danger {
+    background-color: var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+  }
+
+  &.badge--info {
+    background-color: var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-base);
+  }
+
+  &.badge--notice {
+    background-color: var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-base);
+  }
+
+  &.badge--pill {
+    border-radius: var(--op-radius-pill);
+  }
+
+  &.badge--notification-right {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(50%);
+  }
+
+  &.badge--notification-left {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(-50%);
+  }
+}

package/dist/css/components/breadcrumbs.css

@@ -0,0 +1,37 @@
+.breadcrumbs {
+  /* Public API (customizable component options) */
+  --_op-breadcrumbs-font-size-small: var(--op-font-x-small);
+  --_op-breadcrumbs-font-size-large: var(--op-font-small);
+
+  /* Private API (component option defaults) */
+  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--op-space-x-small);
+
+  /* Elements */
+  .breadcrumbs__link {
+    font-size: var(--__op-breadcrumbs-font-size);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .breadcrumbs__text {
+    font-size: var(--__op-breadcrumbs-font-size);
+    font-weight: var(--op-font-weight-bold);
+  }
+
+  /* Modifiers */
+  &.breadcrumbs--small {
+    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
+  }
+
+  &.breadcrumbs--large {
+    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
+  }
+}