adminator-admin-dashboard 2.8.1 → 4.1.5

package/src/assets/styles/2026/_error.scss

@@ -0,0 +1,98 @@
+/* ============ ERROR PAGES (404 / 500) ============ */
+
+.error-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+  background: var(--bg-body);
+  position: relative;
+  overflow: hidden;
+}
+.error-shell::before {
+  content: '';
+  position: absolute;
+  inset: -20% -10% auto auto;
+  width: 60vmax; aspect-ratio: 1;
+  background: radial-gradient(circle, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%);
+  pointer-events: none;
+}
+.error-shell::after {
+  content: '';
+  position: absolute;
+  inset: auto auto -20% -10%;
+  width: 60vmax; aspect-ratio: 1;
+  background: radial-gradient(circle, color-mix(in oklab, var(--purple) 8%, transparent), transparent 70%);
+  pointer-events: none;
+}
+
+.error-card {
+  position: relative;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: var(--shadow-lg);
+  padding: 48px 56px;
+  max-width: 540px;
+  width: 100%;
+  text-align: center;
+  animation: rise-in 600ms cubic-bezier(.2,.7,.2,1) both;
+}
+@media (max-width: 600px) {
+  .error-card { padding: 32px 24px; }
+}
+
+.error-eyebrow {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--t-light);
+  margin-bottom: 14px;
+  display: block;
+}
+.error-code {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: clamp(96px, 16vw, 160px);
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+  background: linear-gradient(135deg, var(--primary), var(--purple));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin-bottom: 8px;
+}
+.error-title {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  letter-spacing: -0.022em;
+  color: var(--t-base);
+  margin: 0 0 10px;
+}
+.error-sub {
+  font-size: 14px;
+  color: var(--t-muted);
+  line-height: 1.6;
+  margin: 0 0 24px;
+  max-width: 40ch;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.error-actions {
+  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
+}
+
+.error-meta {
+  margin-top: 28px;
+  padding-top: 18px;
+  border-top: 1px dashed var(--border);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: var(--t-light);
+  letter-spacing: 0.06em;
+  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
+}
+.error-meta strong { color: var(--t-muted); font-weight: 600; }

package/src/assets/styles/2026/_forms.scss

@@ -0,0 +1,215 @@
+/* ============ FORMS ============ */
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px 22px;
+}
+.form-grid .span-2 { grid-column: span 2; }
+@media (max-width: 720px) {
+  .form-grid { grid-template-columns: 1fr; }
+  .form-grid .span-2 { grid-column: span 1; }
+}
+
+.field {
+  display: flex; flex-direction: column; gap: 6px;
+  min-width: 0;
+}
+.field-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--t-base);
+  letter-spacing: -0.005em;
+  display: flex; align-items: center; gap: 6px;
+}
+.field-label .req { color: var(--danger); }
+.field-help {
+  font-size: 11.5px;
+  color: var(--t-muted);
+  line-height: 1.45;
+}
+.field-error {
+  font-size: 11.5px;
+  color: var(--danger);
+  display: flex; align-items: center; gap: 4px;
+}
+
+.input,
+.select,
+.textarea {
+  width: 100%;
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-card);
+  color: var(--t-base);
+  font-size: 13px;
+  font-family: inherit;
+  outline: 0;
+  transition: border-color 180ms, box-shadow 180ms, background 180ms;
+}
+.input::placeholder,
+.textarea::placeholder { color: var(--t-light); }
+.input:focus,
+.select:focus,
+.textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+.input:disabled,
+.select:disabled,
+.textarea:disabled {
+  background: var(--bg-muted);
+  color: var(--t-light);
+  cursor: not-allowed;
+}
+.input.is-invalid,
+.select.is-invalid,
+.textarea.is-invalid {
+  border-color: var(--danger);
+}
+.input.is-invalid:focus,
+.select.is-invalid:focus,
+.textarea.is-invalid:focus {
+  box-shadow: 0 0 0 3px var(--danger-soft);
+}
+.textarea {
+  min-height: 96px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.select {
+  appearance: none; -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 32px;
+}
+
+.input-icon {
+  position: relative;
+}
+.input-icon .ico {
+  position: absolute;
+  left: 11px; top: 50%; transform: translateY(-50%);
+  width: 14px; height: 14px;
+  color: var(--t-light);
+  pointer-events: none;
+}
+.input-icon .ico svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }
+.input-icon .input { padding-left: 34px; }
+
+/* Inline addon (e.g. https://) */
+.input-group {
+  display: flex;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-card);
+  overflow: hidden;
+  transition: border-color 180ms, box-shadow 180ms;
+}
+.input-group:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+.input-group .addon {
+  padding: 0 12px;
+  display: grid; place-items: center;
+  background: var(--bg-muted);
+  color: var(--t-muted);
+  font-size: 12px;
+  font-family: 'JetBrains Mono', monospace;
+  border-right: 1px solid var(--border);
+}
+.input-group .input {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.input-group .input:focus { box-shadow: none; }
+
+/* Checkbox / radio */
+.check {
+  display: inline-flex; align-items: center; gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--t-base);
+  user-select: none;
+}
+.check input { position: absolute; opacity: 0; pointer-events: none; }
+.check .box {
+  width: 16px; height: 16px;
+  border: 1.5px solid var(--t-light);
+  border-radius: 5px;
+  display: grid; place-items: center;
+  flex-shrink: 0;
+  transition: all 160ms;
+  background: var(--bg-card);
+}
+.check input:checked + .box {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.check input:checked + .box::after {
+  content: '';
+  width: 4px; height: 8px;
+  border: solid #fff;
+  border-width: 0 1.8px 1.8px 0;
+  transform: rotate(45deg) translate(-1px, -1px);
+}
+.check.radio .box { border-radius: 50%; }
+.check.radio input:checked + .box::after {
+  width: 7px; height: 7px;
+  border: 0;
+  border-radius: 50%;
+  background: #fff;
+  transform: none;
+}
+.check:hover .box { border-color: var(--primary); }
+.check input:disabled + .box { opacity: 0.5; cursor: not-allowed; }
+
+/* Toggle switch */
+.switch {
+  display: inline-flex; align-items: center; gap: 10px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--t-base);
+  user-select: none;
+}
+.switch input { position: absolute; opacity: 0; pointer-events: none; }
+.switch .track {
+  width: 34px; height: 20px;
+  background: var(--bg-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  position: relative;
+  transition: background 200ms;
+  flex-shrink: 0;
+}
+.switch .track::after {
+  content: '';
+  position: absolute;
+  top: 2px; left: 2px;
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
+}
+.switch input:checked + .track {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.switch input:checked + .track::after {
+  transform: translateX(14px);
+}
+
+/* Form actions row */
+.form-actions {
+  display: flex; gap: 10px; align-items: center;
+  padding-top: 18px;
+  margin-top: 18px;
+  border-top: 1px solid var(--border-soft);
+}
+.form-actions .spacer { flex: 1; }

package/src/assets/styles/2026/_fullcalendar.scss

@@ -0,0 +1,134 @@
+/* ============ FULLCALENDAR — 2026 OVERRIDES ============ */
+
+/* Map FC's CSS variables to our tokens so all chrome inherits the theme. */
+
+[data-fc] {
+  --fc-border-color:               var(--border-soft);
+  --fc-page-bg-color:              var(--bg-card);
+  --fc-neutral-bg-color:           var(--bg-muted);
+  --fc-neutral-text-color:         var(--t-muted);
+  --fc-today-bg-color:             color-mix(in oklab, var(--primary) 10%, transparent);
+  --fc-now-indicator-color:        var(--danger);
+  --fc-event-bg-color:             var(--primary);
+  --fc-event-border-color:         var(--primary);
+  --fc-event-text-color:           #fff;
+  --fc-event-selected-overlay-color: rgb(15 23 42 / 0.06);
+  --fc-list-event-hover-bg-color:  var(--bg-hover);
+  --fc-highlight-color:            color-mix(in oklab, var(--primary) 16%, transparent);
+  font-family: 'Inter', system-ui, sans-serif;
+  height: 100%;
+}
+
+/* Day-grid header row (S M T W T F S) */
+.fc .fc-col-header-cell-cushion {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--t-light);
+  font-weight: 500;
+  padding: 10px 0;
+}
+.fc-theme-standard .fc-scrollgrid,
+.fc-theme-standard td,
+.fc-theme-standard th { border-color: var(--border-soft); }
+
+/* Day numbers in month grid */
+.fc .fc-daygrid-day-number {
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 600;
+  font-size: 12.5px;
+  color: var(--t-base);
+  padding: 6px 8px;
+}
+.fc .fc-day-other .fc-daygrid-day-number { color: var(--t-light); font-weight: 500; }
+.fc .fc-day-today .fc-daygrid-day-number {
+  background: var(--primary);
+  color: #fff;
+  border-radius: 6px;
+  margin: 4px;
+  padding: 3px 7px;
+  min-width: 22px;
+  text-align: center;
+}
+
+.fc .fc-day-today { background: transparent; }
+.fc .fc-daygrid-day-frame { padding: 2px 4px; }
+
+/* Events — base chip */
+.fc .fc-daygrid-event,
+.fc .fc-timegrid-event {
+  border-radius: 5px;
+  border: 0;
+  border-left: 2px solid transparent;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 6px;
+  margin: 1px 4px;
+  line-height: 1.3;
+  cursor: pointer;
+  transition: transform 140ms ease, filter 160ms ease;
+}
+.fc .fc-daygrid-event:hover { transform: translateX(1px); }
+.fc .fc-daygrid-event-dot { display: none; }
+.fc .fc-event-time {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  font-weight: 600;
+  margin-right: 4px;
+  opacity: 0.85;
+}
+
+/* Category colors via classNames — match dashboard cal-chip variants */
+.fc .fc-event.fc-cat-work     { background: var(--primary-soft); color: var(--primary);  border-left-color: var(--primary); }
+.fc .fc-event.fc-cat-team     { background: var(--success-soft); color: var(--success);  border-left-color: var(--success); }
+.fc .fc-event.fc-cat-personal { background: var(--purple-soft);  color: var(--purple);   border-left-color: var(--purple); }
+.fc .fc-event.fc-cat-travel   { background: var(--info-soft);    color: var(--info);     border-left-color: var(--info); }
+.fc .fc-event.fc-cat-finance  { background: var(--warning-soft); color: var(--warning);  border-left-color: var(--warning); }
+.fc .fc-event.fc-cat-birthday { background: var(--pink-soft);    color: var(--pink);     border-left-color: var(--pink); }
+
+.fc .fc-event.fc-cat-travel .fc-event-time,
+.fc .fc-event.fc-cat-team   .fc-event-time,
+.fc .fc-event.fc-cat-work   .fc-event-time { color: inherit; }
+
+/* "more" link */
+.fc .fc-daygrid-more-link {
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--t-muted);
+  padding: 2px 6px;
+}
+.fc .fc-daygrid-more-link:hover { color: var(--primary); }
+
+/* Time-grid axis */
+.fc .fc-timegrid-axis-cushion,
+.fc .fc-timegrid-slot-label-cushion {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--t-light);
+  letter-spacing: 0.04em;
+}
+.fc .fc-timegrid-now-indicator-line { border-color: var(--danger); border-width: 1.5px; }
+.fc .fc-timegrid-now-indicator-arrow { border-color: var(--danger); }
+
+/* List view */
+.fc .fc-list-day-cushion {
+  background: var(--bg-muted);
+}
+.fc .fc-list-day-text,
+.fc .fc-list-day-side-text {
+  color: var(--t-base);
+  font-family: 'Inter Tight', sans-serif;
+  font-weight: 600;
+  font-size: 13px;
+}
+.fc .fc-list-event-time,
+.fc .fc-list-event-title {
+  font-size: 13px;
+  color: var(--t-base);
+}
+.fc .fc-list-event-dot { border-color: var(--primary); }
+.fc .fc-list-empty {
+  background: var(--bg-card);
+  color: var(--t-muted);
+}

package/src/assets/styles/2026/_palette.scss

@@ -0,0 +1,173 @@
+/* ============ COMMAND PALETTE (⌘K) ============ */
+
+.palette-backdrop {
+  position: fixed; inset: 0;
+  background: rgb(15 23 42 / 0.55);
+  backdrop-filter: blur(4px);
+  z-index: 200;
+  display: none;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 12vh 16px 16px;
+  animation: palette-fade 160ms ease both;
+}
+
+body.has-palette-open .palette-backdrop {
+  display: flex;
+}
+
+@keyframes palette-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.palette-modal {
+  width: 100%;
+  max-width: 560px;
+  max-height: 70vh;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: palette-rise 200ms cubic-bezier(.2,.7,.2,1) both;
+}
+
+@keyframes palette-rise {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.palette-input-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.palette-icon {
+  width: 18px; height: 18px;
+  color: var(--t-muted);
+  flex-shrink: 0;
+}
+
+.palette-input {
+  flex: 1;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font-size: 15px;
+  color: var(--t-base);
+  font-family: inherit;
+  padding: 4px 0;
+  min-width: 0;
+}
+.palette-input::placeholder { color: var(--t-light); }
+
+.palette-esc {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  padding: 3px 7px;
+  border-radius: 5px;
+  background: var(--bg-muted);
+  color: var(--t-muted);
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+  text-transform: lowercase;
+  letter-spacing: 0.04em;
+}
+
+.palette-results {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px;
+}
+.palette-results::-webkit-scrollbar { width: 4px; }
+.palette-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+
+.palette-result {
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  gap: 12px;
+  align-items: center;
+  padding: 9px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 120ms;
+}
+.palette-result:hover { background: var(--bg-hover); }
+.palette-result.is-selected {
+  background: var(--primary-soft);
+  color: var(--primary);
+}
+
+.palette-result-icon {
+  width: 28px; height: 28px;
+  display: grid; place-items: center;
+  border-radius: 6px;
+  background: var(--bg-muted);
+  color: var(--t-muted);
+  flex-shrink: 0;
+}
+.palette-result.is-selected .palette-result-icon {
+  background: color-mix(in oklab, var(--primary) 14%, transparent);
+  color: var(--primary);
+}
+.palette-result-icon svg { width: 14px; height: 14px; }
+
+.palette-result-label {
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--t-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.palette-result.is-selected .palette-result-label { color: var(--primary); font-weight: 600; }
+
+.palette-result-section {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--t-light);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+.palette-result.is-selected .palette-result-section { color: var(--primary); opacity: 0.8; }
+
+.palette-empty {
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--t-muted);
+  font-size: 13px;
+}
+
+.palette-foot {
+  display: flex;
+  gap: 18px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border-soft);
+  background: var(--bg-card);
+  font-size: 11px;
+  color: var(--t-muted);
+}
+.palette-foot kbd {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  padding: 1.5px 5px;
+  border-radius: 4px;
+  background: var(--bg-muted);
+  color: var(--t-muted);
+  border: 1px solid var(--border);
+  margin-right: 4px;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 600px) {
+  .palette-backdrop { padding-top: 6vh; }
+  .palette-foot { flex-wrap: wrap; gap: 10px; font-size: 10px; }
+}