@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/src/bh-tokens/components/input-number.scss

@@ -0,0 +1,147 @@
+/* ==========================================================================
+   BH-INPUT-NUMBER COMPONENT STYLES
+   Uses tokens from _input-number.tokens.scss
+   Extends base input styles
+   ========================================================================== */
+
+@use './input-number.tokens' as *;
+@use './input.scss' as *;
+
+:host {
+  display: block;
+  font-family: var(--bh-input-font-family);
+}
+
+/* ==========================================================================
+   INPUT NUMBER CONTAINER
+   ========================================================================== */
+
+.input-number-container {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-input-number-container-gap);
+  padding: var(--bh-input-number-container-padding-md);
+  height: var(--bh-input-number-height-md);
+  background: var(--bh-input-number-bg);
+  border: var(--bh-input-number-border-width) solid var(--bh-input-number-border);
+  border-radius: var(--bh-input-number-radius);
+  transition: var(--bh-input-number-transition);
+  cursor: text;
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   INPUT NUMBER SIZES
+   ========================================================================== */
+
+.input-number-container.input-number-container-small {
+  height: var(--bh-input-number-height-sm);
+  padding: var(--bh-input-number-container-padding-sm);
+  font-size: var(--bh-input-font-size-sm);
+}
+
+.input-number-container.input-number-container-large {
+  height: var(--bh-input-number-height-lg);
+  padding: var(--bh-input-number-container-padding-lg);
+  font-size: var(--bh-input-font-size-lg);
+}
+
+/* ==========================================================================
+   INPUT NUMBER VARIANTS
+   ========================================================================== */
+
+.input-number-container.input-number-container-filled {
+  background: var(--bh-input-filled-bg);
+  border-color: var(--bh-input-filled-border);
+}
+
+.input-number-container.input-number-container-filled:not(.input-number-container-disabled):hover {
+  background: var(--bh-input-filled-bg-hover);
+}
+
+.input-number-container.input-number-container-filled.input-number-container-focused {
+  background: var(--bh-input-filled-bg-focused);
+  border-color: var(--bh-input-filled-border-focused);
+}
+
+/* ==========================================================================
+   FLUID (FULL-WIDTH)
+   ========================================================================== */
+
+.input-number-container.input-number-container-fluid {
+  width: 100%;
+}
+
+/* ==========================================================================
+   INPUT NUMBER STATES
+   ========================================================================== */
+
+.input-number-container.input-number-container-hover {
+  border-color: var(--bh-input-border-hover);
+}
+
+.input-number-container.input-number-container-focused {
+  border-color: var(--bh-input-border-focused);
+  box-shadow: var(--bh-input-shadow-focused);
+}
+
+.input-number-container.input-number-container-disabled {
+  opacity: var(--bh-input-opacity-disabled);
+  cursor: not-allowed;
+  background: var(--bh-input-bg-disabled);
+}
+
+.input-number-container.input-number-container-invalid {
+  border-color: var(--bh-input-border-invalid);
+}
+
+.input-number-container.input-number-container-invalid.input-number-container-hover {
+  border-color: var(--bh-input-border-invalid-hover);
+}
+
+.input-number-container.input-number-container-invalid.input-number-container-focused {
+  border-color: var(--bh-input-border-invalid-focused);
+}
+
+/* ==========================================================================
+   INPUT NUMBER BUTTONS
+   ========================================================================== */
+
+.input-number-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bh-input-number-button-size);
+  height: var(--bh-input-number-button-size);
+  padding: 0;
+  border: none;
+  background: var(--bh-input-number-button-bg);
+  color: var(--bh-input-number-button-color);
+  cursor: pointer;
+  border-radius: var(--bh-input-number-button-radius);
+  transition: var(--bh-input-number-button-transition);
+  flex-shrink: 0;
+}
+
+.input-number-button[aria-label="Clear value"] {
+  background: var(--bh-input-number-clear-button-bg);
+  border-radius: var(--bh-input-number-clear-button-radius) !important;
+}
+
+.input-number-button:hover:not(:disabled) {
+  background: var(--bh-input-number-button-bg-hover);
+  color: var(--bh-input-number-button-color-hover);
+}
+
+.input-number-button:active:not(:disabled) {
+  background: var(--bh-input-number-button-bg-active);
+}
+
+.input-number-button:disabled {
+  opacity: var(--bh-input-number-button-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.input-number-button .material-symbols-outlined {
+  font-size: var(--bh-input-number-icon-size);
+}

package/src/bh-tokens/components/input.scss

@@ -0,0 +1,271 @@
+/* ==========================================================================
+   BH-INPUT COMPONENT STYLES
+   Uses tokens from _input.tokens.scss
+   ========================================================================== */
+
+@use './input.tokens' as *;
+
+:host {
+  display: block;
+  font-family: var(--bh-input-font-family);
+}
+
+/* ==========================================================================
+   INPUT WRAPPER
+   ========================================================================== */
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-input-wrapper-gap);
+  width: 100%;
+}
+
+/* ==========================================================================
+   LABEL
+   ========================================================================== */
+
+.input-label {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-input-label-gap);
+  font-family: inherit;
+  font-weight: var(--bh-input-label-font-weight);
+  font-size: var(--bh-input-label-font-size);
+  line-height: 1.43;
+  color: var(--bh-input-label-color);
+}
+
+.required-indicator {
+  color: var(--bh-input-label-required-color);
+}
+
+.help-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--bh-input-help-icon-color);
+  transition: var(--bh-input-transition);
+}
+
+.help-icon-button:hover {
+  color: var(--bh-input-help-icon-color-hover);
+}
+
+/* ==========================================================================
+   INPUT CONTAINER
+   ========================================================================== */
+
+.input-container {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-input-container-gap);
+  padding: var(--bh-input-padding-md);
+  height: var(--bh-input-height-md);
+  width: 100%;
+  background: var(--bh-input-bg);
+  border: var(--bh-input-border-width) solid var(--bh-input-border);
+  border-radius: var(--bh-input-radius);
+  transition: var(--bh-input-transition);
+  cursor: text;
+  box-sizing: border-box;
+}
+
+.input-container.input-container-with-leading {
+  padding: var(--bh-input-padding-with-leading-sm);
+}
+
+/* ==========================================================================
+   INPUT SIZES
+   ========================================================================== */
+
+.input-container.input-container-small {
+  height: var(--bh-input-height-sm);
+  padding: var(--bh-input-padding-sm);
+  font-size: var(--bh-input-font-size-sm);
+}
+
+.input-container.input-container-small.input-container-with-leading {
+  padding: var(--bh-input-padding-with-leading-sm);
+}
+
+.input-container.input-container-medium {
+  height: var(--bh-input-height-md);
+  padding: var(--bh-input-padding-md);
+  font-size: var(--bh-input-font-size-md);
+}
+
+.input-container.input-container-medium.input-container-with-leading {
+  padding: var(--bh-input-padding-with-leading-md);
+}
+
+/* ==========================================================================
+   INPUT VARIANTS
+   ========================================================================== */
+
+.input-container.input-container-filled {
+  background: var(--bh-input-filled-bg);
+  border-color: var(--bh-input-filled-border);
+}
+
+.input-container.input-container-filled:not(.input-container-disabled):hover {
+  background: var(--bh-input-filled-bg-hover);
+}
+
+.input-container.input-container-filled.input-container-focused {
+  background: var(--bh-input-filled-bg-focused);
+  border-color: var(--bh-input-filled-border-focused);
+}
+
+/* ==========================================================================
+   FLUID (FULL-WIDTH)
+   ========================================================================== */
+
+.input-container.input-container-fluid {
+  width: 100%;
+}
+
+/* ==========================================================================
+   INPUT STATES
+   ========================================================================== */
+
+.input-container.input-container-hover {
+  border-color: var(--bh-input-border-hover);
+}
+
+.input-container.input-container-focused {
+  border-color: var(--bh-input-border-focused);
+  box-shadow: var(--bh-input-shadow-focused);
+}
+
+.input-container.input-container-disabled {
+  opacity: var(--bh-input-opacity-disabled);
+  cursor: not-allowed;
+  background: var(--bh-input-bg-disabled);
+}
+
+.input-container.input-container-invalid {
+  border-color: var(--bh-input-border-invalid);
+}
+
+.input-container.input-container-invalid.input-container-hover {
+  border-color: var(--bh-input-border-invalid-hover);
+}
+
+.input-container.input-container-invalid.input-container-focused {
+  border-color: var(--bh-input-border-invalid-focused);
+}
+
+/* ==========================================================================
+   INPUT CONTENT
+   ========================================================================== */
+
+.input-content {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-input-content-gap);
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+}
+
+/* ==========================================================================
+   INPUT ELEMENT
+   ========================================================================== */
+
+.input-element {
+  flex: 1;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-weight: var(--bh-input-font-weight);
+  font-size: var(--bh-input-font-size-md);
+  line-height: 1.43;
+  color: var(--bh-input-text);
+  min-width: 60px;
+  padding: 0;
+}
+
+.input-element:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.input-element::placeholder {
+  color: var(--bh-input-placeholder);
+}
+
+.input-element:disabled {
+  cursor: not-allowed;
+}
+
+.input-container-small .input-element {
+  font-size: var(--bh-input-font-size-sm);
+}
+
+.input-container-large .input-element {
+  font-size: var(--bh-input-font-size-md);
+}
+
+/* ==========================================================================
+   ICONS
+   ========================================================================== */
+
+.leading-icon,
+.trailing-icon {
+  font-size: var(--bh-input-icon-size);
+  color: var(--bh-input-icon-color);
+  user-select: none;
+  flex-shrink: 0;
+  cursor: default;
+  transition: var(--bh-input-transition);
+}
+
+.input-container-focused .leading-icon,
+.input-container-focused .trailing-icon {
+  color: var(--bh-input-icon-color-focused);
+}
+
+/* ==========================================================================
+   HINT TEXT
+   ========================================================================== */
+
+.hint-text {
+  font-family: inherit;
+  font-weight: var(--bh-input-hint-font-weight);
+  font-size: var(--bh-input-hint-font-size);
+  line-height: 1.43;
+  color: var(--bh-input-hint-color);
+}
+
+.hint-text.hint-error {
+  color: var(--bh-input-hint-error-color);
+}
+
+/* ==========================================================================
+   MATERIAL SYMBOLS
+   ========================================================================== */
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}

package/src/bh-tokens/components/label.scss

@@ -0,0 +1,176 @@
+/* ==========================================================================
+   BH-LABEL COMPONENT STYLES
+   Uses tokens from _label.tokens.scss
+   ========================================================================== */
+
+@use './_label.tokens.scss';
+
+:host {
+  display: block;
+  font-family: var(--bh-font-family);
+}
+
+/* ==========================================================================
+   LABEL CONTAINER
+   ========================================================================== */
+
+.label-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-label-gap-block);
+}
+
+.label-container.layout-block {
+  flex-direction: column;
+}
+
+.label-container.layout-inline {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--bh-label-gap-inline);
+}
+
+.label-container.layout-inline .label-wrapper {
+  flex-shrink: 0;
+}
+
+.label-container.layout-inline-start {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--bh-label-gap-inline);
+}
+
+.label-container.layout-inline-start .label-content {
+  flex-shrink: 0;
+  width: auto;
+}
+
+.label-container.layout-inline-start .label-text-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.label-container.layout-inline-start .label-wrapper {
+  gap: var(--bh-label-wrapper-gap);
+}
+
+.label-container.layout-inline-start .label-text {
+  font-size: var(--bh-label-inline-start-font-size);
+  color: var(--bh-label-inline-start-color);
+  cursor: pointer;
+}
+
+.label-container.layout-inline-space-between {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--bh-label-gap-inline);
+}
+
+.label-container.layout-inline-space-between .label-wrapper {
+  flex-shrink: 0;
+}
+
+.label-container.layout-inline-space-between .label-content {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* ==========================================================================
+   LABEL WRAPPER
+   ========================================================================== */
+
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-label-wrapper-gap);
+}
+
+/* ==========================================================================
+   LABEL TEXT
+   ========================================================================== */
+
+.label-text {
+  font-family: inherit;
+  font-weight: var(--bh-label-text-font-weight);
+  font-size: var(--bh-label-text-font-size);
+  line-height: var(--bh-label-text-line-height);
+  color: var(--bh-label-text-color);
+  margin: 0;
+  cursor: default;
+}
+
+.label-text.disabled {
+  color: var(--bh-label-text-color-disabled);
+}
+
+/* ==========================================================================
+   REQUIRED ASTERISK
+   ========================================================================== */
+
+.asterisk {
+  font-family: inherit;
+  font-weight: var(--bh-label-asterisk-font-weight);
+  font-size: var(--bh-label-asterisk-font-size);
+  line-height: var(--bh-label-asterisk-line-height);
+  color: var(--bh-label-asterisk-color);
+}
+
+/* ==========================================================================
+   LABEL CONTENT SLOT
+   ========================================================================== */
+
+.label-content {
+  width: 100%;
+}
+
+/* ==========================================================================
+   HELP ICON
+   ========================================================================== */
+
+.icon-with-tooltip {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.help-icon {
+  font-size: var(--bh-label-help-icon-size);
+  color: var(--bh-label-help-icon-color);
+  cursor: pointer;
+  user-select: none;
+  transition: var(--bh-label-help-icon-transition);
+}
+
+.help-icon:hover {
+  color: var(--bh-label-help-icon-color-hover);
+}
+
+.disabled .help-icon {
+  color: var(--bh-label-help-icon-color-disabled);
+  cursor: not-allowed;
+}
+
+/* ==========================================================================
+   MATERIAL SYMBOLS
+   ========================================================================== */
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}

package/src/bh-tokens/components/modal.scss

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   BH-MODAL COMPONENT STYLES
+   Uses tokens from _modal.tokens.scss
+   ========================================================================== */
+
+@use './_modal.tokens.scss';
+
+:host {
+  display: block;
+}
+
+/* ==========================================================================
+   MODAL WRAPPER
+   ========================================================================== */
+
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--bh-modal-wrapper-padding);
+  z-index: var(--bh-modal-z-index);
+}
+
+/* ==========================================================================
+   BACKDROP OVERLAY
+   ========================================================================== */
+
+.modal-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--bh-modal-overlay-bg);
+  backdrop-filter: var(--bh-modal-overlay-backdrop-blur);
+  -webkit-backdrop-filter: var(--bh-modal-overlay-backdrop-blur);
+}
+
+/* ==========================================================================
+   MODAL CONTAINER
+   ========================================================================== */
+
+.modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: var(--bh-modal-max-width);
+  background: var(--bh-modal-bg);
+  border-radius: var(--bh-modal-radius);
+  box-shadow: var(--bh-modal-shadow);
+  overflow: hidden;
+  z-index: var(--bh-modal-content-z-index);
+}
+
+/* ==========================================================================
+   RESPONSIVE ADJUSTMENTS
+   ========================================================================== */
+
+@media (max-width: 480px) {
+  .modal-wrapper {
+    padding: var(--bh-modal-wrapper-padding-mobile);
+  }
+
+  .modal {
+    max-width: var(--bh-modal-max-width-mobile);
+  }
+}
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal {
+  animation: modalFadeIn var(--bh-modal-animation-duration) var(--bh-modal-animation-timing);
+}
+
+.modal-overlay {
+  animation: overlayFadeIn var(--bh-modal-animation-duration) var(--bh-modal-animation-timing);
+}