anentrypoint-design 0.0.127 → 0.0.130

package/colors_and_type.css

@@ -136,13 +136,50 @@
   --measure:     68ch;
 }
 
+/* ============================================================
+   Focus-visible styles for keyboard navigation
+   ============================================================ */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Button variants with focus-visible */
+.btn:focus-visible,
+.btn-primary:focus-visible,
+.btn-ghost:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Link focus-visible */
+a:focus-visible,
+[role="link"]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Form inputs with focus-visible */
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* Interactive element focus-visible */
+[tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 [data-theme="ink"] {
   --bg:        var(--ink);
   --bg-2:      var(--ink-2);
-  --bg-3:      #34343C;
+  --bg-3:      #464650;
   --fg:        var(--paper);
   --fg-2:      var(--paper-2);
-  --fg-3:      #9A9AA2;
+  --fg-3:      #B4B4BC;
   --panel-bg:  var(--bg);
   --panel-bg-2: var(--bg-2);
   --panel-0:   var(--bg);
@@ -154,16 +191,17 @@
   --panel-text-3: var(--fg-3);
   --accent:    var(--accent-bright, var(--green-2));
   --accent-fg: var(--ink);
+  --accent-bright: var(--green-2);
 }
 
 @media (prefers-color-scheme: dark) {
   [data-theme="auto"] {
     --bg:        var(--ink);
     --bg-2:      var(--ink-2);
-    --bg-3:      #34343C;
+    --bg-3:      #464650;
     --fg:        var(--paper);
     --fg-2:      var(--paper-2);
-    --fg-3:      #9A9AA2;
+    --fg-3:      #B4B4BC;
     --panel-bg:  var(--bg);
     --panel-bg-2: var(--bg-2);
     --panel-0:   var(--bg);
@@ -175,6 +213,7 @@
     --panel-text-3: var(--fg-3);
     --accent:    var(--accent-bright, var(--green-2));
     --accent-fg: var(--ink);
+    --accent-bright: var(--green-2);
   }
 }
 

package/community.css

@@ -275,8 +275,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 44px;
+  height: 44px;
+  padding: 8px;
   border: 0;
   background: transparent;
   color: var(--fg-3);
@@ -290,6 +291,10 @@
   color: var(--fg);
   background: color-mix(in oklab, var(--fg) 8%, transparent);
 }
+.cm-cat-add:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
 
 .cm-cat-channels {
   display: flex;
@@ -374,11 +379,42 @@
   border-radius: 50%;
   border: 2px solid color-mix(in oklab, var(--sun) 30%, transparent);
   border-top-color: var(--sun);
-  animation: cm-spin 700ms linear infinite;
   flex-shrink: 0;
 }
-@keyframes cm-spin {
-  to { transform: rotate(360deg); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .cm-ch-spinner {
+    animation: cm-spin var(--dur-slow) steps(8, end) infinite;
+    will-change: transform;
+    contain: layout;
+  }
+  @keyframes cm-spin {
+    to { transform: rotate(360deg); }
+  }
+}
+
+.cm-ch-icon.voice-active-badge {
+  color: var(--green-2);
+  text-shadow: 0 0 8px var(--green-2);
+}
+
+.cm-ch-voice-badge {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green-2);
+  flex-shrink: 0;
+  position: relative;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .cm-ch-voice-badge {
+    animation: cm-voice-pulse 2s ease-in-out infinite;
+  }
+  @keyframes cm-voice-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.3); }
+  }
 }
 
 .cm-ch-name {
@@ -418,8 +454,9 @@
 .cm-channel-item.active .cm-ch-actions { opacity: 0.6; }
 
 .cm-ch-action-btn {
-  width: 18px;
-  height: 18px;
+  width: 44px;
+  height: 44px;
+  padding: 8px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -435,6 +472,10 @@
   color: var(--fg);
   background: color-mix(in oklab, var(--fg) 10%, transparent);
 }
+.cm-ch-action-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
 
 /* Voice users nested under a voice channel */
 .cm-ch-voice-users {
@@ -529,11 +570,16 @@
   border-radius: 50%;
   background: var(--green-2);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--green-2) 30%, transparent);
-  animation: cm-pulse 1.6s ease-in-out infinite;
 }
-@keyframes cm-pulse {
-  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--green-2) 30%, transparent); }
-  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--green-2) 0%,  transparent); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .cm-vs-label::before {
+    animation: cm-pulse 1.6s ease-in-out infinite;
+  }
+  @keyframes cm-pulse {
+    0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--green-2) 30%, transparent); }
+    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--green-2) 0%,  transparent); }
+  }
 }
 
 .cm-vs-channel {
@@ -752,12 +798,16 @@
   scrollbar-width: thin;
   scrollbar-color: color-mix(in oklab, var(--fg) 18%, transparent) transparent;
   transition: width var(--dur-base) var(--ease), flex-basis var(--dur-base) var(--ease);
+  will-change: width, flex-basis, opacity, transform; contain: layout style;
 }
 .cm-member-list:not(.open) {
   width: 0;
   flex-basis: 0;
   padding: 0;
   overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateX(100%);
 }
 .cm-member-list::-webkit-scrollbar { width: 8px; }
 .cm-member-list::-webkit-scrollbar-thumb {
@@ -785,6 +835,8 @@
   color: var(--fg-2);
   cursor: pointer;
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+  max-width: 100%;
+  min-width: 0;
 }
 .cm-member-item:hover {
   background: color-mix(in oklab, var(--fg) 6%, transparent);
@@ -926,8 +978,75 @@
   .cm-server-icon,
   .cm-server-add,
   .cm-server-back {
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+  }
+  .cm-channel-sidebar {
+    left: 56px;
+    width: 80vw;
+    max-width: 200px;
+  }
+  .cm-channel-sidebar.open {
+    width: 80vw;
+    max-width: 200px;
+  }
+
+  /* Mobile touch target fixes for icon buttons */
+  .cm-cat-add,
+  .cm-ch-action-btn {
+    width: 44px;
+    height: 44px;
+    padding: 8px;
+  }
+  .cm-ch-icon {
+    flex: 0 0 24px;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+/* ---------- a11y polish: focus-visible coverage on community interactive elements ---------- */
+/* Every interactive surface with a :hover state must also have a :focus-visible state so
+   keyboard users get equivalent feedback. The selectors here mirror the existing :hover rules. */
+
+.cm-server-icon:focus-visible,
+.cm-server-back:focus-visible,
+.cm-server-add:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--r-2);
+}
+
+.cm-channel-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: var(--r-1);
+}
+
+.cm-member-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: var(--r-1);
+}
+
+.cm-vs-btn:focus-visible,
+.cm-user-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--r-1);
+}
+
+/* ---------- prefers-reduced-motion: kill the transitions that were not previously guarded ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .cm-server-icon,
+  .cm-channel-item,
+  .cm-member-item,
+  .cm-vs-btn,
+  .cm-user-btn,
+  .cm-ch-spinner,
+  .cm-ch-voice-badge {
+    transition: none !important;
+    animation: none !important;
   }
-  .cm-channel-sidebar { left: 56px; }
 }