@rolemodel/optics 2.1.2 → 2.1.3

package/dist/css/components/button.css

@@ -0,0 +1,273 @@
+.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

@@ -0,0 +1,47 @@
+.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

@@ -0,0 +1,62 @@
+.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

@@ -0,0 +1,80 @@
+.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

@@ -0,0 +1,55 @@
+.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);
+  }
+}