astralkit 0.3.0 → 0.3.2

package/primitives/badges.css

@@ -1,231 +1,231 @@
-
-
-/* Badge primitives -- notification badges, status dots, rank, social, verified, count badges */
-
-
-
-/* Badge (notification counts) */
-/* Base badge — background + color only.
-   Position is set by context (absolute on avatars, static in nav links). */
-/* Exact match of HTML badge CSS — nothing extra */
-.ak-badge {
-  position: absolute;
-  border-radius: var(--radius-ak-full);
-  background: var(--color-ak-primary);
-  /* Monochrome by default — use .ak-badge--danger/success/warning/info
-     to override when a semantic color is needed.
-     No outer shadow: the white border (set per-size in avatar.css)
-     matches the page background and creates a "cutout" illusion —
-     the badge appears to be carved into the avatar rather than
-     floating on top. An outer shadow would contradict that. */
-}
-.ak-badge--count {
-  /* Horizontal padding is overridable via --ak-badge-pad so tighter
-     sizes (MD/LG/XL on avatars) can keep a perfect circle for
-     2-digit counts without stretching into a pill. */
-  padding: 0 var(--ak-badge-pad, 4px);
-  font-weight: 700;
-  color: var(--color-ak-on-primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* Tabular digits so "11" / "24" / "99+" share column widths and
-     read centered regardless of digit mix. Tight letter-spacing
-     makes multi-digit counts feel like a single token. */
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.01em;
-}
-.ak-badge--success { background: var(--color-ak-success); }
-.ak-badge--warning { background: var(--color-ak-warning); }
-.ak-badge--danger  { background: var(--color-ak-danger); }
-.ak-badge--info    { background: var(--color-ak-info); }
-
-/* Dark panel/rail badge overrides */
-[data-ak-dark-panel] .ak-badge,
-[data-ak-dark-rail] .ak-badge,
-[data-ak-mobile-sheet] .ak-badge {
-  background: #ffffff;
-  color: #171717;
-}
-[data-ak-dark-panel] .ak-on-elevated .ak-badge,
-[data-ak-dark-rail] .ak-on-elevated .ak-badge,
-[data-ak-mobile-sheet] .ak-on-elevated .ak-badge {
-  background: #171717;
-  color: #ffffff;
-}
-
-/* Badge variants */
-.ak-badge-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-ak-full);
-  background: var(--color-ak-primary);
-}
-.ak-badge-inline {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-ak-full);
-  font-size: var(--text-ak-xs);
-  font-weight: 600;
-}
-.ak-badge-subtle {
-  background: var(--color-ak-primary-subtle);
-  color: var(--color-ak-primary);
-}
-
-/* Count badge (standalone) */
-.ak-count-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.375rem;
-  border-radius: var(--radius-ak-full);
-  font-size: var(--text-ak-xs);
-  font-weight: 600;
-  background: var(--color-ak-surface-2);
-  color: var(--color-ak-text-secondary);
-}
-
-/* Notification badge — monochrome by default.
-   Add .ak-notif-badge.ak-badge--danger etc. to override when needed. */
-.ak-notif-badge {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-ak-full);
-  background: var(--color-ak-primary);
-  color: var(--color-ak-on-primary);
-  font-weight: 700;
-  padding: 0 0.25rem;
-}
-
-/* Pro/plan badges */
-.ak-pro-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-ak-full);
-  font-size: var(--text-ak-xs);
-  font-weight: 600;
-  background: var(--color-ak-primary);
-  color: var(--color-ak-on-primary);
-}
-.ak-plan-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-ak-full);
-  font-size: var(--text-ak-xs);
-  font-weight: 600;
-}
-
-/* Verified badge — monochrome by default. Add .ak-badge--info
-   to override with the traditional blue checkmark. */
-.ak-verified-badge {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-ak-full);
-  background: var(--color-ak-primary);
-}
-.ak-verified-badge i {
-  color: var(--color-ak-on-primary);
-}
-
-/* Rank badge — tonal monochrome hierarchy.
-   1st = primary (black), 2nd = secondary neutral, 3rd = surface. */
-.ak-rank-badge {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-ak-full);
-  font-weight: 700;
-}
-.ak-rank-badge--1 { background: var(--color-ak-primary);      color: var(--color-ak-on-primary); }
-.ak-rank-badge--2 { background: var(--color-ak-text-secondary); color: var(--color-ak-bg); }
-.ak-rank-badge--3 { background: var(--color-ak-surface-2);    color: var(--color-ak-text); }
-
-/* Social badge — per-size border width set in avatar.css to scale with avatar */
-.ak-social-badge {
-  position: absolute;
-  bottom: -6px;
-  right: -6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-ak-full);
-  border-style: solid;
-  border-color: var(--color-ak-bg);
-  font-weight: 700;
-  line-height: 1;
-  flex-shrink: 0;
-}
-.ak-social-badge--google   { background: #ffffff; color: #4285F4; }
-.ak-social-badge--linkedin { background: #0A66C2; color: #ffffff; }
-.ak-social-badge--meta     { background: #0081FB; color: #ffffff; }
-.ak-social-badge--x        { background: #000000; color: #ffffff; }
-
-/* Status dot */
-.ak-status-dot {
-  position: absolute;
-  border-radius: var(--radius-ak-full);
-}
-.ak-status-dot--online  { background: var(--color-ak-success); }
-.ak-status-dot--away    { background: var(--color-ak-warning); }
-.ak-status-dot--busy    { background: var(--color-ak-danger); }
-.ak-status-dot--offline { background: var(--color-ak-text-muted); }
-.ak-status-dot--dnd     { background: var(--color-ak-danger); }
-.ak-status-dot--dnd::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--color-ak-text-inverse);
-  border-radius: var(--radius-ak-full);
-}
-
-/* Activity / status badges */
-.ak-activity-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-ak-full);
-  font-size: var(--text-ak-xs);
-  font-weight: 600;
-}
-.ak-status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.625rem;
-  border-radius: var(--radius-ak-full);
-  font-size: var(--text-ak-xs);
-  font-weight: 500;
-}
-.ak-notification-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--radius-ak-full);
-  background: var(--color-ak-danger);
-}
-.ak-status-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-ak-full);
-}
-
-/* Presence indicators */
-.ak-presence-online { background-color: var(--color-ak-success); }
-.ak-presence-away   { background-color: var(--color-ak-warning); }
-
-
-
-/* Note: Unlayered override block removed — no longer needed without @layer. */
+
+
+/* Badge primitives -- notification badges, status dots, rank, social, verified, count badges */
+
+
+
+/* Badge (notification counts) */
+/* Base badge — background + color only.
+   Position is set by context (absolute on avatars, static in nav links). */
+/* Exact match of HTML badge CSS — nothing extra */
+.ak-badge {
+  position: absolute;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+  /* Monochrome by default — use .ak-badge--danger/success/warning/info
+     to override when a semantic color is needed.
+     No outer shadow: the white border (set per-size in avatar.css)
+     matches the page background and creates a "cutout" illusion —
+     the badge appears to be carved into the avatar rather than
+     floating on top. An outer shadow would contradict that. */
+}
+.ak-badge--count {
+  /* Horizontal padding is overridable via --ak-badge-pad so tighter
+     sizes (MD/LG/XL on avatars) can keep a perfect circle for
+     2-digit counts without stretching into a pill. */
+  padding: 0 var(--ak-badge-pad, 4px);
+  font-weight: 700;
+  color: var(--color-ak-on-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Tabular digits so "11" / "24" / "99+" share column widths and
+     read centered regardless of digit mix. Tight letter-spacing
+     makes multi-digit counts feel like a single token. */
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+.ak-badge--success { background: var(--color-ak-success); }
+.ak-badge--warning { background: var(--color-ak-warning); }
+.ak-badge--danger  { background: var(--color-ak-danger); }
+.ak-badge--info    { background: var(--color-ak-info); }
+
+/* Dark panel/rail badge overrides */
+[data-ak-dark-panel] .ak-badge,
+[data-ak-dark-rail] .ak-badge,
+[data-ak-mobile-sheet] .ak-badge {
+  background: #ffffff;
+  color: #171717;
+}
+[data-ak-dark-panel] .ak-on-elevated .ak-badge,
+[data-ak-dark-rail] .ak-on-elevated .ak-badge,
+[data-ak-mobile-sheet] .ak-on-elevated .ak-badge {
+  background: #171717;
+  color: #ffffff;
+}
+
+/* Badge variants */
+.ak-badge-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+}
+.ak-badge-inline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+}
+.ak-badge-subtle {
+  background: var(--color-ak-primary-subtle);
+  color: var(--color-ak-primary);
+}
+
+/* Count badge (standalone) */
+.ak-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+  background: var(--color-ak-surface-2);
+  color: var(--color-ak-text-secondary);
+}
+
+/* Notification badge — monochrome by default.
+   Add .ak-notif-badge.ak-badge--danger etc. to override when needed. */
+.ak-notif-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+  color: var(--color-ak-on-primary);
+  font-weight: 700;
+  padding: 0 0.25rem;
+}
+
+/* Pro/plan badges */
+.ak-pro-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+  background: var(--color-ak-primary);
+  color: var(--color-ak-on-primary);
+}
+.ak-plan-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+}
+
+/* Verified badge — monochrome by default. Add .ak-badge--info
+   to override with the traditional blue checkmark. */
+.ak-verified-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+}
+.ak-verified-badge i {
+  color: var(--color-ak-on-primary);
+}
+
+/* Rank badge — tonal monochrome hierarchy.
+   1st = primary (black), 2nd = secondary neutral, 3rd = surface. */
+.ak-rank-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  font-weight: 700;
+}
+.ak-rank-badge--1 { background: var(--color-ak-primary);      color: var(--color-ak-on-primary); }
+.ak-rank-badge--2 { background: var(--color-ak-text-secondary); color: var(--color-ak-bg); }
+.ak-rank-badge--3 { background: var(--color-ak-surface-2);    color: var(--color-ak-text); }
+
+/* Social badge — per-size border width set in avatar.css to scale with avatar */
+.ak-social-badge {
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  border-style: solid;
+  border-color: var(--color-ak-bg);
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.ak-social-badge--google   { background: #ffffff; color: #4285F4; }
+.ak-social-badge--linkedin { background: #0A66C2; color: #ffffff; }
+.ak-social-badge--meta     { background: #0081FB; color: #ffffff; }
+.ak-social-badge--x        { background: #000000; color: #ffffff; }
+
+/* Status dot */
+.ak-status-dot {
+  position: absolute;
+  border-radius: var(--radius-ak-full);
+}
+.ak-status-dot--online  { background: var(--color-ak-success); }
+.ak-status-dot--away    { background: var(--color-ak-warning); }
+.ak-status-dot--busy    { background: var(--color-ak-danger); }
+.ak-status-dot--offline { background: var(--color-ak-text-muted); }
+.ak-status-dot--dnd     { background: var(--color-ak-danger); }
+.ak-status-dot--dnd::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--color-ak-text-inverse);
+  border-radius: var(--radius-ak-full);
+}
+
+/* Activity / status badges */
+.ak-activity-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+}
+.ak-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 500;
+}
+.ak-notification-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-danger);
+}
+.ak-status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-ak-full);
+}
+
+/* Presence indicators */
+.ak-presence-online { background-color: var(--color-ak-success); }
+.ak-presence-away   { background-color: var(--color-ak-warning); }
+
+
+
+/* Note: Unlayered override block removed — no longer needed without @layer. */