@rolemodel/optics 2.0.1 → 2.1.2

package/dist/css/components/button.css

@@ -1,273 +0,0 @@
-.btn {
-  /* Public API (customizable component options) */
-  --_op-btn-height-small: var(--op-input-height-small);
-  --_op-btn-height-medium: var(--op-input-height-medium);
-  --_op-btn-height-large: var(--op-input-height-large);
-  --_op-btn-font-small: var(--op-font-x-small);
-  --_op-btn-font-medium: var(--op-font-small);
-  --_op-btn-font-large: var(--op-font-small);
-  --_op-btn-padding-small: 0 var(--op-space-x-small);
-  --_op-btn-padding-medium: 0 var(--op-space-small);
-  --_op-btn-padding-large: 0 var(--op-space-small);
-
-  /* Private API (component option defaults) */
-  --__op-btn-height: var(--_op-btn-height-large);
-  --__op-btn-font-size: var(--_op-btn-font-large);
-  --__op-btn-padding: var(--_op-btn-padding-large);
-
-  display: inline-flex;
-  min-height: var(--__op-btn-height);
-  align-items: center;
-  justify-content: center;
-  padding: var(--__op-btn-padding);
-  border-radius: var(--op-radius-medium);
-  appearance: none;
-  background-color: var(--op-color-neutral-plus-eight);
-  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
-  color: var(--op-color-neutral-on-plus-eight);
-  cursor: pointer;
-  font-size: var(--__op-btn-font-size);
-  font-weight: var(--op-font-weight-normal);
-  gap: var(--op-space-x-small);
-  text-align: center;
-  text-decoration: none;
-  transition: var(--op-transition-input);
-  white-space: nowrap;
-
-  /* Modifiers */
-
-  /* Default Active State */
-  &.btn--active {
-    background-color: var(--op-color-primary-plus-five);
-    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-    color: var(--op-color-primary-on-plus-five);
-  }
-
-  /* Default Hover State */
-  &:hover {
-    background-color: var(--op-color-primary-plus-eight);
-    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-    color: var(--op-color-primary-on-plus-eight);
-  }
-
-  /* Default Focus State */
-  &:focus-visible {
-    background-color: var(--op-color-neutral-plus-eight);
-    box-shadow: var(--op-input-focus-primary);
-    color: var(--op-color-neutral-on-plus-eight);
-  }
-
-  /* Default Borderless State */
-  &.btn--no-border {
-    background-color: transparent;
-    box-shadow: none;
-    color: var(--op-color-primary-on-plus-max);
-
-    /* Default Borderless + Active State. */
-    &.btn--active {
-      background-color: var(--op-color-primary-plus-five);
-      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-      color: var(--op-color-primary-on-plus-five);
-    }
-
-    /* Default Borderless + Hover State */
-    &:hover {
-      background-color: var(--op-color-primary-plus-eight);
-      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
-      color: var(--op-color-primary-on-plus-eight);
-    }
-
-    /* Default Borderless + Focus State */
-    &:focus-visible {
-      background-color: var(--op-color-primary-plus-eight);
-      box-shadow: var(--op-input-focus-primary);
-      color: var(--op-color-primary-on-plus-eight);
-    }
-  }
-
-  /* Pill Modifier */
-  &.btn--pill {
-    border-radius: var(--op-radius-pill);
-  }
-
-  /* Icon Modifier */
-  &.btn--icon {
-    width: var(--__op-btn-height);
-    min-width: var(--__op-btn-height);
-    padding: 0;
-  }
-
-  /* Icon With Label Modifier */
-  &.btn--icon-with-label {
-    flex-direction: column;
-    padding: var(--op-space-small);
-    gap: var(--op-space-3x-small);
-  }
-
-  /* Size Modifiers */
-  &.btn--small {
-    --__op-btn-height: var(--_op-btn-height-small);
-    --__op-btn-font-size: var(--_op-btn-font-small);
-    --__op-btn-padding: var(--_op-btn-padding-small);
-  }
-
-  &.btn--medium {
-    --__op-btn-height: var(--_op-btn-height-medium);
-    --__op-btn-font-size: var(--_op-btn-font-medium);
-    --__op-btn-padding: var(--_op-btn-padding-medium);
-  }
-
-  &.btn--large {
-    --__op-btn-height: var(--_op-btn-height-large);
-    --__op-btn-font-size: var(--_op-btn-font-large);
-    --__op-btn-padding: var(--_op-btn-padding-large);
-  }
-
-  /* Disabled Modifier */
-  &.btn--disabled,
-  &:disabled {
-    opacity: var(--op-opacity-disabled);
-    pointer-events: none;
-    -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
-    user-select: none;
-  }
-
-  /* Button with notification style badge */
-  &.btn--with-badge {
-    position: relative;
-  }
-
-  /* Focus State */
-  &:focus,
-  &:focus-within,
-  &:focus-visible {
-    outline: none;
-  }
-
-  /* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */
-
-  /* --op-breakpoint-small */
-  @media (width <= 768px) {
-    --__op-btn-height: var(--_op-btn-height-large);
-    --__op-btn-font-size: var(--_op-btn-font-large);
-
-    &.btn--small,
-    &.btn--medium,
-    &.btn--large {
-      --__op-btn-height: var(--_op-btn-height-large);
-      --__op-btn-font-size: var(--_op-btn-font-large);
-      --__op-btn-padding: var(--_op-btn-padding-large);
-    }
-  }
-
-  /* Variant Modifiers */
-  &.btn--primary {
-    background-color: var(--op-color-primary-base);
-    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
-    color: var(--op-color-primary-on-base);
-
-    /* Active State */
-    &.btn--active {
-      background-color: var(--op-color-primary-minus-five);
-      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
-      color: var(--op-color-primary-on-minus-five);
-    }
-
-    /* Hover State */
-    &:hover {
-      background-color: var(--op-color-primary-plus-one);
-      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
-      color: var(--op-color-primary-on-plus-one);
-    }
-
-    /* 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);
-    }
-
-    /* Borderless State */
-    &.btn--no-border {
-      background-color: transparent;
-      box-shadow: none;
-      color: var(--op-color-primary-base);
-
-      /* Borderless + Active State */
-      &.btn--active {
-        background-color: var(--op-color-primary-plus-five);
-        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
-        color: var(--op-color-primary-on-plus-five);
-      }
-
-      /* Borderless + Hover State */
-      &:hover {
-        background-color: var(--op-color-primary-plus-eight);
-        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
-        color: var(--op-color-primary-on-plus-eight);
-      }
-
-      /* Borderless + Focus State */
-      &:focus-visible {
-        background-color: var(--op-color-primary-plus-eight);
-        box-shadow: var(--op-input-focus-primary);
-        color: var(--op-color-primary-on-plus-eight);
-      }
-    }
-  }
-
-  &.btn--destructive,
-  &.btn--delete {
-    background-color: var(--op-color-alerts-danger-base);
-    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
-    color: var(--op-color-alerts-danger-on-base);
-
-    /* Active State */
-    &.btn--active {
-      background-color: var(--op-color-alerts-danger-plus-five);
-      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
-      color: var(--op-color-alerts-danger-on-plus-five);
-    }
-
-    /* Hover State */
-    &:hover {
-      background-color: var(--op-color-alerts-danger-minus-two);
-      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
-      color: var(--op-color-alerts-danger-on-minus-two);
-    }
-
-    /* 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);
-    }
-  }
-
-  &.btn--warning {
-    background-color: var(--op-color-alerts-warning-base);
-    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
-    color: var(--op-color-alerts-warning-on-base);
-
-    /* Active State */
-    &.btn--active {
-      background-color: var(--op-color-alerts-warning-plus-five);
-      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
-      color: var(--op-color-alerts-warning-on-plus-five);
-    }
-
-    /* Hover State */
-    &:hover {
-      background-color: var(--op-color-alerts-warning-minus-two);
-      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
-      color: var(--op-color-alerts-warning-on-minus-two);
-    }
-
-    /* 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);
-    }
-  }
-}

package/dist/css/components/button_group.css

@@ -1,47 +0,0 @@
-.btn-group {
-  --op-btn-group-hover-z-index: 1;
-  --op-btn-group-active-z-index: 2;
-  --op-btn-group-focus-z-index: 3;
-
-  display: inline-flex;
-  align-items: center;
-
-  .btn {
-    + .btn {
-      margin-inline-start: calc(var(--op-border-width) * -1);
-    }
-
-    &:hover {
-      z-index: var(--op-btn-group-hover-z-index);
-    }
-
-    &.btn--active {
-      z-index: var(--op-btn-group-active-z-index);
-    }
-
-    &:focus,
-    &:focus-within,
-    &:focus-visible {
-      z-index: var(--op-btn-group-focus-z-index);
-    }
-
-    &:not(:first-child, :last-child) {
-      border-radius: 0;
-    }
-
-    &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
-  }
-}
-
-.btn-group-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-}

package/dist/css/components/card.css

@@ -1,62 +0,0 @@
-.card {
-  /* Public API (customizable component options) */
-  --_op-card-padding: var(--op-space-medium);
-  --_op-card-box-shadow: var(--op-border-all) var(--op-color-border);
-
-  position: relative;
-  border-radius: var(--op-radius-medium);
-  background-color: var(--op-color-background);
-  box-shadow: var(--_op-card-box-shadow);
-  color: var(--op-color-on-background);
-  contain: paint;
-  font-size: var(--op-font-medium);
-  line-height: var(--op-line-height-base);
-
-  /* Modifiers */
-
-  &.card--condensed {
-    --_op-card-padding: var(--op-space-x-small);
-  }
-
-  &.card--padded {
-    padding: var(--_op-card-padding);
-  }
-
-  &.card--shadow-x-small {
-    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-small);
-  }
-
-  &.card--shadow-small {
-    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-small);
-  }
-
-  &.card--shadow-medium {
-    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-medium);
-  }
-
-  &.card--shadow-large {
-    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-large);
-  }
-
-  &.card--shadow-x-large {
-    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-large);
-  }
-
-  /* Elements */
-  .card__header,
-  .card__body,
-  .card__footer {
-    padding: var(--_op-card-padding);
-  }
-
-  .card__header {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 0;
-    }
-  }
-}

package/dist/css/components/confirm-dialog.css

@@ -1,80 +0,0 @@
-.confirm-dialog-wrapper {
-  position: fixed;
-  z-index: var(--op-z-index-dialog);
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  inset: 0;
-  outline: 0;
-  visibility: hidden;
-
-  /* Elements */
-
-  .confirm-dialog-wrapper__backdrop {
-    position: fixed;
-    z-index: var(--op-z-index-dialog-backdrop);
-    background: var(--op-color-black);
-    inset: 0;
-    opacity: var(--op-opacity-none);
-    transition: var(--op-transition-modal);
-    visibility: hidden;
-  }
-
-  /* Modifiers */
-
-  &.confirm-dialog-wrapper--active {
-    visibility: visible;
-
-    .confirm-dialog {
-      opacity: var(--op-opacity-full);
-      transform: scale(1);
-    }
-
-    .confirm-dialog-wrapper__backdrop {
-      opacity: var(--op-opacity-half);
-      visibility: visible;
-    }
-  }
-}
-
-/* stylelint-disable no-descending-specificity */
-.confirm-dialog {
-  /* Public API (customizable component options) */
-  --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */
-
-  z-index: var(--op-z-index-dialog-content);
-  width: var(--_op-confirm-dialog-width);
-  border-radius: var(--op-radius-medium);
-  background-color: var(--op-color-background);
-  box-shadow: var(--op-border-all) var(--op-color-border);
-  color: var(--op-color-on-background);
-  contain: paint;
-  font-size: var(--op-font-medium);
-  line-height: var(--op-line-height-base);
-  opacity: var(--op-opacity-none);
-  transform: scale(0.7);
-  transition: var(--op-transition-modal);
-
-  .confirm-dialog__header,
-  .confirm-dialog__body,
-  .confirm-dialog__footer {
-    padding: var(--op-space-medium);
-  }
-
-  .confirm-dialog__header {
-    font-size: var(--op-font-large);
-    font-weight: var(--op-font-weight-semi-bold);
-  }
-
-  .confirm-dialog__body {
-    box-shadow: var(--op-border-all) var(--op-color-border);
-  }
-
-  .confirm-dialog__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-/* stylelint-enable no-descending-specificity */

package/dist/css/components/divider.css

@@ -1,55 +0,0 @@
-.divider {
-  /* Public API (customizable component options) */
-  --_op-divider-vertical-min-height: var(--op-space-large);
-  --_op-divider-height-small: var(--op-border-width);
-  --_op-divider-height-medium: var(--op-border-width-large);
-  --_op-divider-height-large: var(--op-border-width-x-large);
-  --_op-divider-padding-small: var(--op-space-2x-small);
-  --_op-divider-padding-medium: var(--op-space-x-small);
-  --_op-divider-padding-large: var(--op-space-medium);
-
-  /* Private API (component option defaults) */
-  --__op-divider-height: var(--_op-divider-height-small);
-  --__op-divider-padding: 0;
-
-  width: 100%;
-  height: var(--__op-divider-height);
-  background-color: var(--op-color-border);
-  margin-block: var(--__op-divider-padding);
-  margin-inline: 0;
-
-  /* Size Modifiers */
-  &.divider--small {
-    --__op-divider-height: var(--_op-divider-height-small);
-  }
-
-  &.divider--medium {
-    --__op-divider-height: var(--_op-divider-height-medium);
-  }
-
-  &.divider--large {
-    --__op-divider-height: var(--_op-divider-height-large);
-  }
-
-  /* Spacing Modifiers */
-  &.divider--spacing-small {
-    --__op-divider-padding: var(--_op-divider-padding-small);
-  }
-
-  &.divider--spacing-medium {
-    --__op-divider-padding: var(--_op-divider-padding-medium);
-  }
-
-  &.divider--spacing-large {
-    --__op-divider-padding: var(--_op-divider-padding-large);
-  }
-
-  /* Direction Modifier */
-  &.divider--vertical {
-    width: var(--__op-divider-height);
-    height: 100%;
-    min-height: var(--_op-divider-vertical-min-height);
-    margin-block: 0;
-    margin-inline: var(--__op-divider-padding);
-  }
-}