@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/collection/components/bh-date-picker-content/bh-date-picker-content.css

@@ -0,0 +1,541 @@
+/**
+ * Bellhop Stencil Global Styles
+ *
+ * This file imports all design tokens and provides global CSS custom properties
+ * that are available to all Stencil components.
+ */
+
+/* ==========================================================================
+   FONT IMPORTS
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
+
+/* ==========================================================================
+   DESIGN TOKENS
+   ========================================================================== */
+
+:root {
+  /* -------------------------------------------------------------------------
+     COLORS - Primary
+     ------------------------------------------------------------------------- */
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%);
+  --color-transparent: hsla(0, 0%, 100%, 0);
+
+  /* Neutral */
+  --color-neutral-25: hsl(240, 20%, 99%);
+  --color-neutral-50: hsl(240, 20%, 98%);
+  --color-neutral-100: hsl(240, 17%, 95%);
+  --color-neutral-200: hsl(227, 25%, 89%);
+  --color-neutral-300: hsl(224, 24%, 78%);
+  --color-neutral-400: hsl(226, 24%, 59%);
+  --color-neutral-500: hsl(226, 24%, 48%);
+  --color-neutral-600: hsl(226, 24%, 38%);
+  --color-neutral-700: hsl(226, 24%, 25%);
+  --color-neutral-800: hsl(233, 33%, 10%);
+  --color-neutral-900: hsl(231, 32%, 8%);
+  --color-neutral-950: hsl(231, 32%, 8%);
+
+  /* Brand */
+  --color-brand-25: hsl(220, 82%, 98%);
+  --color-brand-50: hsl(222, 87%, 97%);
+  --color-brand-100: hsl(221, 94%, 94%);
+  --color-brand-200: hsl(221, 92%, 86%);
+  --color-brand-300: hsl(224, 95%, 77%);
+  --color-brand-400: hsl(224, 94%, 72%);
+  --color-brand-500: hsl(230, 67%, 58%);
+  --color-brand-600: hsl(230, 69%, 48%);
+  --color-brand-700: hsl(230, 75%, 34%);
+  --color-brand-800: hsl(243, 86%, 44%);
+  --color-brand-900: hsl(237, 69%, 24%);
+  --color-brand-950: hsl(237, 61%, 20%);
+
+  /* Error */
+  --color-error-25: hsl(12, 100%, 99%);
+  --color-error-50: hsl(5, 86%, 97%);
+  --color-error-100: hsl(4, 93%, 94%);
+  --color-error-200: hsl(3, 96%, 89%);
+  --color-error-300: hsl(4, 96%, 80%);
+  --color-error-400: hsl(4, 92%, 69%);
+  --color-error-500: hsl(4, 86%, 58%);
+  --color-error-600: hsl(4, 74%, 49%);
+  --color-error-700: hsl(4, 76%, 40%);
+  --color-error-800: hsl(4, 72%, 33%);
+  --color-error-900: hsl(8, 65%, 29%);
+  --color-error-950: hsl(8, 75%, 19%);
+
+  /* Warning */
+  --color-warning-25: hsl(42, 100%, 98%);
+  --color-warning-50: hsl(45, 100%, 96%);
+  --color-warning-100: hsl(45, 96%, 89%);
+  --color-warning-200: hsl(44, 98%, 77%);
+  --color-warning-300: hsl(42, 99%, 65%);
+  --color-warning-400: hsl(39, 98%, 56%);
+  --color-warning-500: hsl(34, 94%, 50%);
+  --color-warning-600: hsl(28, 97%, 44%);
+  --color-warning-700: hsl(22, 92%, 37%);
+  --color-warning-800: hsl(19, 84%, 31%);
+  --color-warning-900: hsl(18, 79%, 27%);
+  --color-warning-950: hsl(17, 79%, 17%);
+
+  /* Success */
+  --color-success-25: hsl(142, 80%, 98%);
+  --color-success-50: hsl(145, 81%, 96%);
+  --color-success-100: hsl(140, 80%, 90%);
+  --color-success-200: hsl(144, 78%, 80%);
+  --color-success-300: hsl(148, 63%, 67%);
+  --color-success-400: hsl(150, 57%, 54%);
+  --color-success-500: hsl(152, 77%, 39%);
+  --color-success-600: hsl(153, 91%, 30%);
+  --color-success-700: hsl(155, 90%, 24%);
+  --color-success-800: hsl(155, 84%, 20%);
+  --color-success-900: hsl(156, 83%, 16%);
+  --color-success-950: hsl(157, 82%, 11%);
+
+  /* -------------------------------------------------------------------------
+     TYPOGRAPHY
+     ------------------------------------------------------------------------- */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Text Sizes */
+  --text-xl-size: 1.25rem;
+  --text-lg-size: 1.125rem;
+  --text-md-size: 1rem;
+  --text-sm-size: 0.875rem;
+  --text-xs-size: 0.75rem;
+
+  /* Line Heights */
+  --text-xl-line: 1.875rem;
+  --text-lg-line: 1.75rem;
+  --text-md-line: 1.5rem;
+  --text-sm-line: 1.25rem;
+  --text-xs-line: 1.125rem;
+
+  /* -------------------------------------------------------------------------
+     SPACING
+     ------------------------------------------------------------------------- */
+  --spacing-none: 0rem;
+  --spacing-xxs: 0.125rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.375rem;
+  --spacing-md: 0.5rem;
+  --spacing-lg: 0.75rem;
+  --spacing-xl: 1rem;
+  --spacing-2xl: 1.25rem;
+  --spacing-3xl: 1.5rem;
+  --spacing-4xl: 2rem;
+  --spacing-5xl: 2.5rem;
+  --spacing-6xl: 3rem;
+
+  /* -------------------------------------------------------------------------
+     RADIUS
+     ------------------------------------------------------------------------- */
+  --radius-none: 0rem;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.25rem;
+  --radius-4xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* -------------------------------------------------------------------------
+     SHADOWS
+     ------------------------------------------------------------------------- */
+  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
+    0px 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+
+  /* -------------------------------------------------------------------------
+     ICON COMPENSATION (for buttons with icons)
+     ------------------------------------------------------------------------- */
+  --icon-compensation-xs-btn: calc(var(--spacing-lg) - var(--spacing-xs));
+  --icon-compensation-sm-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-md-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-lg-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+}
+
+/* ==========================================================================
+   BASE STYLES
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Material Symbols base styling */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  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-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+
+:host {
+  display: block;
+}
+
+/* Content area - reusable calendar content */
+.date-picker-content {
+  width: 100%;
+  font-family: var(--font-inter);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Month Navigation */
+.month-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+}
+
+/* Inline Month Picker - constrain to container */
+.month-picker-inline {
+  flex: 1;
+  overflow: hidden;
+  max-height: 270px;
+  animation: fadeIn 150ms ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.month-picker-inline.animate-fade-out {
+  animation: fadeOut 150ms ease-out;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+/* Calendar Grid */
+.calendar-grid {
+  padding: 0 var(--spacing-md) var(--spacing-md);
+  flex: 1;
+}
+
+.day-names {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 280px;
+  gap: 0;
+  margin-bottom: var(--spacing-sm);
+}
+
+.day-name {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-500);
+}
+
+.date-cells {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 280px;
+  row-gap: var(--spacing-xs, 4px);
+  column-gap: 0;
+  justify-items: center;
+  align-items: center;
+}
+
+/* Calendar Cell States */
+.calendar-cell {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: var(--radius-full);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  cursor: pointer;
+  transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);
+}
+
+.calendar-cell.other-month .date-number {
+  color: var(--color-neutral-400);
+}
+
+.calendar-cell.other-month.disabled .date-number {
+  color: var(--color-neutral-300);
+}
+
+.calendar-cell.selectable .date-number {
+  color: var(--color-neutral-500);
+}
+
+.calendar-cell.selectable:hover {
+  background: var(--color-neutral-50);
+}
+
+.calendar-cell.selectable:hover .date-number {
+  color: var(--color-neutral-800);
+}
+
+.calendar-cell.today {
+  border: 2px solid var(--color-brand-600);
+}
+
+.calendar-cell.today .date-number {
+  color: var(--color-neutral-500);
+}
+
+.calendar-cell.today:hover {
+  background: var(--color-brand-100);
+}
+
+.calendar-cell.today:hover .date-number {
+  color: var(--color-brand-600);
+}
+
+.calendar-cell.selected {
+  background: var(--color-brand-600);
+}
+
+.calendar-cell.selected .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar-cell.selected:hover {
+  background: var(--color-brand-800);
+}
+
+.calendar-cell.selected:hover .date-number {
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+}
+
+/* Range states - in-range background */
+.calendar-cell.in-range {
+  background: var(--color-neutral-100);
+  border-radius: 0;
+  position: relative;
+}
+
+.calendar-cell.in-range .date-number {
+  color: var(--color-neutral-800);
+  font-weight: var(--weight-medium);
+}
+
+.calendar-cell.in-range:hover {
+  background: var(--color-neutral-100);
+}
+
+.calendar-cell.in-range:hover .date-number {
+  background: var(--color-neutral-200);
+  border-radius: var(--radius-full);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Range start and end styling */
+.calendar-cell.range-start,
+.calendar-cell.range-end {
+  position: relative;
+}
+
+.calendar-cell.range-start .date-number,
+.calendar-cell.range-end .date-number {
+  background: var(--color-brand-600);
+  color: var(--color-white);
+  font-weight: var(--weight-semibold);
+  border-radius: var(--radius-full);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.calendar-cell.range-start:hover .date-number,
+.calendar-cell.range-start.selectable:hover .date-number,
+.calendar-cell.range-end:hover .date-number,
+.calendar-cell.range-end.selectable:hover .date-number {
+  background: var(--color-brand-800);
+  color: var(--color-white);
+}
+
+/* Range start - extend background to the right */
+.calendar-cell.range-start {
+  background: transparent;
+}
+
+.calendar-cell.range-start::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  background: var(--color-neutral-100);
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+  z-index: 0;
+}
+
+.calendar-cell.range-start:hover::after,
+.calendar-cell.range-start.selectable:hover::after {
+  background: var(--color-neutral-200);
+}
+
+/* Range end - extend background to the left */
+.calendar-cell.range-end {
+  background: transparent;
+}
+
+.calendar-cell.range-end::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  background: var(--color-neutral-100);
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+  z-index: 0;
+}
+
+.calendar-cell.range-end:hover::after,
+.calendar-cell.range-end.selectable:hover::after {
+  background: var(--color-neutral-200);
+}
+
+/* When both start and end are the same day */
+.calendar-cell.range-start.range-end {
+  background: transparent;
+}
+
+.calendar-cell.range-start.range-end::after {
+  display: none;
+}
+
+.calendar-cell.range-start.range-end .date-number {
+  border-radius: var(--radius-full);
+}
+
+/* Range start without end (first selection only) */
+.calendar-cell.range-start:not(.in-range):not(:has(~ .range-end))::after {
+  display: none;
+}
+
+/* Row start/end rounding for in-range cells */
+.calendar-cell.in-range:nth-child(7n+1) {
+  border-top-left-radius: var(--radius-full);
+  border-bottom-left-radius: var(--radius-full);
+}
+
+.calendar-cell.in-range:nth-child(7n) {
+  border-top-right-radius: var(--radius-full);
+  border-bottom-right-radius: var(--radius-full);
+}
+
+/* Range start at end of row */
+.calendar-cell.range-start:nth-child(7n)::after {
+  display: none;
+}
+
+/* Range end at start of row */
+.calendar-cell.range-end:nth-child(7n+1)::after {
+  display: none;
+}
+
+/* Today in range */
+.calendar-cell.today.in-range {
+  background: var(--color-brand-50);
+}
+
+.calendar-cell.today.in-range .date-number {
+  color: var(--color-brand-600);
+  font-weight: var(--weight-medium);
+  background: transparent;
+  border: 2px solid var(--color-brand-600);
+}
+
+.calendar-cell.today.in-range:hover {
+  background: var(--color-brand-100);
+}
+
+/* Today as range start/end */
+.calendar-cell.today.range-start .date-number,
+.calendar-cell.today.range-end .date-number {
+  background: var(--color-brand-600);
+  color: var(--color-white);
+  border: none;
+}
+
+.calendar-cell.disabled {
+  cursor: not-allowed;
+}
+
+.calendar-cell.disabled .date-number {
+  color: var(--color-neutral-300);
+}
+
+.date-number {
+  position: relative;
+  z-index: 1;
+}