sid-ui 0.1.2 → 0.2.0

package/src/styles/components/notification.css

@@ -27,100 +27,200 @@
 }
 
 .os-note {
+  position: relative;
   display: flex;
-  align-items: stretch;
+  align-items: flex-start;
   border-bottom: 1px solid var(--color-border);
+  transition: background-color var(--duration-fast) var(--ease-standard);
 }
 
 .os-note:last-child {
   border-bottom: 0;
 }
 
+.os-note-interactive:hover {
+  background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
+}
+
+.os-note-unread {
+  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
+}
+
 .os-note-main {
   flex: 1;
   min-width: 0;
-  display: grid;
-  grid-template-columns: 10px auto minmax(0, 1fr) auto;
-  column-gap: var(--spacing-3);
-  align-items: center;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
   padding: var(--spacing-3) var(--spacing-2);
-  color: inherit;
-  text-decoration: none;
   text-align: start;
-  background: transparent;
+}
+
+/* The title's link or button stretches over the whole row; the row's own
+   buttons (actions, action, dismiss) sit above it and stay clickable. */
+.os-note-hit {
+  padding: 0;
   border: 0;
+  background: none;
+  color: inherit;
   font: inherit;
-  cursor: default;
+  text-align: inherit;
+  text-decoration: none;
+  cursor: pointer;
 }
 
-a.os-note-main,
-button.os-note-main {
-  cursor: pointer;
+.os-note-hit::after {
+  content: "";
+  position: absolute;
+  inset: 0;
 }
 
-a.os-note-main:hover,
-button.os-note-main:hover {
-  background: var(--surface-hover);
+.os-note-hit:focus-visible {
+  outline: none;
 }
 
-.os-note-main:focus-visible {
+.os-note-hit:focus-visible::after {
   outline: 2px solid var(--color-accent);
   outline-offset: -2px;
 }
 
+.os-note-actions,
+.os-note-action,
+.os-note-dismiss {
+  position: relative;
+  z-index: 1;
+}
+
 .os-note-unread .os-note-title {
   font-weight: var(--font-weight-semibold);
 }
 
+/* Centered on the title's first line. */
 .os-note-mark {
+  flex-shrink: 0;
   width: 8px;
   height: 8px;
+  margin-top: calc((1.3em - 8px) / 2 + 1px);
+  margin-inline: 1px;
   border-radius: var(--radius-full);
-  justify-self: center;
   background: transparent;
 }
 
 .os-note-unread .os-note-mark {
   background: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
 }
 
 .os-note-tone-success.os-note-mark {
-  background: var(--color-success);
+  background: var(--color-data-categorical-green);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-data-categorical-green) 18%, transparent);
 }
 .os-note-tone-warning.os-note-mark {
-  background: var(--color-warning);
+  background: var(--color-data-categorical-orange);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-data-categorical-orange) 22%, transparent);
 }
 .os-note-tone-danger.os-note-mark {
-  background: var(--color-error);
+  background: var(--color-data-categorical-red);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-data-categorical-red) 18%, transparent);
 }
 .os-note-tone-neutral.os-note-mark {
   background: var(--color-text-secondary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-secondary) 18%, transparent);
 }
 
 .os-note:not(.os-note-unread) .os-note-mark {
   background: transparent;
+  box-shadow: none;
 }
 
 .os-note-start {
+  position: relative;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
 }
 
-.os-note-main:has(.os-note-start-empty) {
-  grid-template-columns: 10px minmax(0, 1fr) auto;
+/* The event-type chip on the avatar's corner. */
+.os-note-badge {
+  position: absolute;
+  inset-inline-end: -5px;
+  bottom: -4px;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  color: #fff;
+  font-size: 11px;
+  box-shadow: 0 0 0 2px var(--color-background-surface);
 }
 
-.os-note-start-empty {
-  display: none;
+.os-note-badge > * {
+  width: 11px;
+  height: 11px;
+}
+
+.os-note-badge-success {
+  background: var(--color-data-categorical-green);
+}
+.os-note-badge-warning {
+  background: var(--color-data-categorical-orange);
+}
+.os-note-badge-danger {
+  background: var(--color-data-categorical-red);
+}
+.os-note-badge-neutral {
+  background: var(--color-text-secondary);
+}
+
+/* System events: a tinted round icon in place of an avatar. Tag token pairs
+   keep the glyph readable on its tint in both themes. */
+.os-note-icon,
+.os-note-card-icon {
+  --os-note-tile-bg: var(--color-accent-muted);
+  --os-note-tile-fg: var(--color-accent);
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-full);
+  background: var(--os-note-tile-bg);
+  color: var(--os-note-tile-fg);
+  font-size: 1rem;
+}
+
+.os-note-icon-success,
+.os-note-card-success .os-note-card-icon {
+  --os-note-tile-bg: var(--color-background-green);
+  --os-note-tile-fg: var(--color-icon-green);
+}
+.os-note-icon-warning,
+.os-note-card-warning .os-note-card-icon {
+  --os-note-tile-bg: var(--color-background-yellow);
+  --os-note-tile-fg: var(--color-icon-yellow);
+}
+.os-note-icon-danger,
+.os-note-card-danger .os-note-card-icon {
+  --os-note-tile-bg: var(--color-background-red);
+  --os-note-tile-fg: var(--color-icon-red);
+}
+.os-note-icon-neutral,
+.os-note-card-neutral .os-note-card-icon {
+  --os-note-tile-bg: var(--color-background-gray);
+  --os-note-tile-fg: var(--color-icon-gray);
 }
 
 .os-note-action {
   display: flex;
   align-items: center;
+  align-self: center;
   padding-inline-end: var(--spacing-2);
 }
 
 .os-note-body {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-0-5);
@@ -147,16 +247,70 @@ button.os-note-main:hover {
 }
 
 .os-note-time {
+  flex-shrink: 0;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
-  padding-inline-start: var(--spacing-3);
+  padding-inline-start: var(--spacing-2);
+  line-height: calc(var(--font-size-base) * 1.3);
+}
+
+/* Rich detail: a quoted comment, a file, an amount. */
+.os-note-preview {
+  display: block;
+  margin-top: var(--spacing-1-5);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-element);
+  background: var(--color-background-body);
+  border: 1px solid var(--color-border);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+  color: var(--color-text-primary);
+}
+
+.os-note-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+}
+
+/* Day sections. */
+.os-note-group {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.os-note-group:last-child {
+  border-bottom: 0;
+}
+
+.os-note-group > .os-notes-list > .os-note {
+  border-bottom: 0;
+}
+
+.os-note-group-label {
+  padding: var(--spacing-3) var(--spacing-2) var(--spacing-1);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.02em;
+  color: var(--color-text-secondary);
+}
+
+.os-notes-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-8) var(--spacing-4);
+  color: var(--color-text-secondary);
+  text-align: center;
 }
 
 .os-note-dismiss {
   display: flex;
   align-items: center;
   justify-content: center;
-  align-self: center;
+  align-self: flex-start;
+  margin-top: var(--spacing-2);
   width: var(--control-height);
   height: var(--control-height);
   margin-inline-end: var(--spacing-1);
@@ -169,7 +323,7 @@ button.os-note-main:hover {
 }
 
 .os-note-dismiss:hover {
-  background: var(--surface-hover);
+  background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
   color: var(--color-icon-primary);
 }
 
@@ -295,26 +449,67 @@ button.os-note-main:hover {
   }
 }
 
-.os-note-card-mark {
-  width: var(--spacing-2);
-  height: var(--spacing-2);
-  margin-top: var(--spacing-1);
-  border-radius: var(--radius-full);
-  background: var(--color-accent);
+.os-note-card {
+  --os-note-tone: var(--color-accent);
+  position: relative;
+}
+
+.os-note-card-success {
+  --os-note-tone: var(--color-data-categorical-green);
+}
+.os-note-card-warning {
+  --os-note-tone: var(--color-data-categorical-orange);
+}
+.os-note-card-danger {
+  --os-note-tone: var(--color-data-categorical-red);
+}
+.os-note-card-neutral {
+  --os-note-tone: var(--color-text-secondary);
+}
+
+.os-note-card-start {
   flex-shrink: 0;
+  display: flex;
 }
 
-.os-note-card-success .os-note-card-mark {
-  background: var(--color-success);
+.os-note-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
 }
-.os-note-card-warning .os-note-card-mark {
-  background: var(--color-warning);
+
+/* Time left. Paused while the card is hovered or holds focus. */
+.os-note-card-progress {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 3px;
+  background: var(--os-note-tone);
+  opacity: 0.55;
+  transform-origin: left;
+  animation-name: os-note-countdown;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
 }
-.os-note-card-danger .os-note-card-mark {
-  background: var(--color-error);
+
+[dir="rtl"] .os-note-card-progress {
+  transform-origin: right;
 }
-.os-note-card-neutral .os-note-card-mark {
-  background: var(--color-text-secondary);
+
+.os-note-card:hover .os-note-card-progress,
+.os-note-card:focus-within .os-note-card-progress {
+  animation-play-state: paused;
+}
+
+.os-note-card-progress-hidden {
+  visibility: hidden;
+}
+
+@keyframes os-note-countdown {
+  to {
+    transform: scaleX(0);
+  }
 }
 
 .os-note-card-copy {

package/src/styles/components/status.css

@@ -0,0 +1,117 @@
+/* StatusIndicator — a dot with its words, plain or in a pill. */
+
+.os-status {
+  --os-status-color: var(--color-accent);
+  --os-status-dot: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  max-width: 100%;
+  font-size: var(--font-size-base);
+  line-height: 1.3;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+.os-status-success {
+  --os-status-color: var(--color-data-categorical-green);
+}
+.os-status-warning {
+  --os-status-color: var(--color-data-categorical-orange);
+}
+.os-status-error {
+  --os-status-color: var(--color-data-categorical-red);
+}
+.os-status-neutral {
+  --os-status-color: var(--color-data-neutral);
+}
+
+.os-status-sm {
+  --os-status-dot: 6px;
+  gap: var(--spacing-1-5);
+  font-size: var(--font-size-sm);
+}
+
+.os-status-lg {
+  --os-status-dot: 10px;
+  gap: var(--spacing-2-5, var(--spacing-2));
+  font-size: var(--font-size-lg);
+}
+
+.os-status-dot {
+  position: relative;
+  flex-shrink: 0;
+  width: var(--os-status-dot);
+  height: var(--os-status-dot);
+  border-radius: var(--radius-full);
+  background: var(--os-status-color);
+}
+
+.os-status-pulsing .os-status-dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--os-status-color);
+  animation: os-status-ripple 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes os-status-ripple {
+  from {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-status-pulsing .os-status-dot::after {
+    animation: none;
+    opacity: 0.25;
+    transform: scale(2);
+  }
+}
+
+.os-status-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.os-status-detail {
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.os-status-detail::before {
+  content: "·";
+  margin-inline-end: var(--spacing-2);
+  opacity: 0.6;
+}
+
+/* Pills */
+.os-status-soft,
+.os-status-outline {
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-2-5, var(--spacing-2));
+  border-radius: var(--radius-full);
+}
+
+.os-status-soft.os-status-sm,
+.os-status-outline.os-status-sm {
+  padding: 2px var(--spacing-2) 2px var(--spacing-1-5);
+}
+
+.os-status-soft.os-status-lg,
+.os-status-outline.os-status-lg {
+  padding: var(--spacing-1-5) var(--spacing-4) var(--spacing-1-5) var(--spacing-3);
+}
+
+.os-status-soft {
+  background: color-mix(in srgb, var(--os-status-color) 13%, transparent);
+}
+
+.os-status-outline {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--os-status-color) 45%, var(--color-border));
+}

package/src/styles/components.css

@@ -11,6 +11,9 @@
 @import "./components/calendar.css";
 @import "./components/responsive.css";
 @import "./components/notification.css";
+@import "./components/status.css";
+@import "./components/chip.css";
+@import "./components/card-effects.css";
 @import "./components/sticky.css";
 @import "./components/charts.css";
 @import "./components/message-list.css";
@@ -201,35 +204,117 @@
 }
 
 /* Rating */
+/* Rating — gold stars or rose hearts. Each mark is an outline with a clipped fill on top, so
+   fractional scores fill part of a mark. Hover previews, a pick pops. */
 .os-rating {
+  --_mark: 22px;
+  --_on: #f5a524;
+  --_off: color-mix(in srgb, var(--color-text-primary) 14%, transparent);
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
 }
-.os-rating-stars {
+.os-rating-heart {
+  --_on: #f43f5e;
+}
+.os-rating-sm {
+  --_mark: 16px;
+}
+.os-rating-lg {
+  --_mark: 32px;
+}
+.os-rating-marks {
   display: inline-flex;
-  gap: 2px;
+  gap: calc(var(--_mark) * 0.12);
 }
-.os-star {
+.os-rating-mark {
+  position: relative;
+  display: inline-grid;
+  width: var(--_mark);
+  height: var(--_mark);
+  padding: 0;
   border: 0;
+  border-radius: 4px;
   background: transparent;
-  color: var(--color-border-emphasized, var(--color-border));
-  font-size: 20px;
-  line-height: 1;
-  padding: 0;
   cursor: default;
+  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-button.os-star {
+button.os-rating-mark {
   cursor: pointer;
 }
-.os-star-on {
-  color: var(--color-warning);
+button.os-rating-mark:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
-.os-rating-sm .os-star {
-  font-size: 14px;
+.os-rating-mark svg {
+  display: block;
+  width: var(--_mark);
+  height: var(--_mark);
+}
+.os-rating-mark-base {
+  fill: var(--_off);
+}
+.os-rating-mark-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  overflow: hidden;
+  transition: width 0.2s var(--ease-standard);
+}
+[dir="rtl"] .os-rating-mark-fill {
+  inset: 0 0 0 auto;
+  direction: rtl;
+}
+.os-rating-mark-fill svg {
+  fill: var(--_on);
+  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--_on) 35%, transparent));
 }
-.os-rating-lg .os-star {
-  font-size: 28px;
+/* Hovered marks grow a touch; the picked one pops. */
+.os-rating-mark-preview {
+  transform: scale(1.12);
+}
+.os-rating-mark-inner {
+  position: relative;
+  display: inline-grid;
+}
+.os-rating-mark-pop .os-rating-mark-inner {
+  animation: os-rating-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.os-rating-heart .os-rating-mark-pop .os-rating-mark-inner {
+  animation-name: os-rating-beat;
+}
+@keyframes os-rating-pop {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.35) rotate(-8deg);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes os-rating-beat {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.35);
+  }
+  50% {
+    transform: scale(0.92);
+  }
+  70% {
+    transform: scale(1.12);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .os-rating-mark,
+  .os-rating-mark-inner,
+  .os-rating-mark-fill {
+    transition: none;
+    animation: none !important;
+  }
 }
 .os-rating-value {
   font-size: var(--font-size-sm, 0.75rem);