rails_den 2.0.0

data/app/assets/stylesheets/rails_den/presence_directory.css

@@ -0,0 +1,217 @@
+.rails-den-presence-directory {
+  --rails-den-presence-online: #16a34a;
+  --rails-den-presence-away: #d97706;
+  --rails-den-presence-offline: #94a3b8;
+}
+
+.rails-den-presence-directory-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.rails-den-presence-directory-summary > span {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding: 0.55rem 0.8rem;
+  border: 1px solid var(--rails-den-border);
+  border-radius: 999px;
+  background: var(--rails-den-surface);
+  color: var(--rails-den-muted);
+  white-space: nowrap;
+}
+
+.rails-den-presence-directory-summary strong {
+  color: var(--rails-den-text);
+}
+
+.rails-den-presence-directory-dot {
+  width: 0.65rem;
+  height: 0.65rem;
+  flex: none;
+  border-radius: 50%;
+  background: var(--rails-den-presence-offline);
+}
+
+.is-presence-online .rails-den-presence-directory-dot {
+  background: var(--rails-den-presence-online);
+}
+
+.is-presence-away .rails-den-presence-directory-dot {
+  background: var(--rails-den-presence-away);
+}
+
+.is-presence-offline .rails-den-presence-directory-dot {
+  background: var(--rails-den-presence-offline);
+}
+
+.rails-den-presence-directory-section {
+  overflow: hidden;
+  margin-top: 1.5rem;
+  border: 1px solid var(--rails-den-border);
+  border-radius: var(--rails-den-radius);
+  background: var(--rails-den-surface);
+  box-shadow: var(--rails-den-shadow);
+}
+
+.rails-den-presence-directory-section-header {
+  display: flex;
+  gap: 1rem;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--rails-den-border);
+}
+
+.rails-den-presence-directory-section-header h2 {
+  margin: 0;
+  color: var(--rails-den-text);
+  font-size: 1.1rem;
+}
+
+.rails-den-presence-directory-section-header span {
+  color: var(--rails-den-muted);
+  font-size: 0.875rem;
+}
+
+.rails-den-presence-directory-list {
+  display: block;
+}
+
+.rails-den-presence-directory-member {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  min-height: 76px;
+  padding: 0.85rem 1.25rem;
+  border-bottom: 1px solid var(--rails-den-border);
+}
+
+.rails-den-presence-directory-member:last-child {
+  border-bottom: 0;
+}
+
+.rails-den-presence-directory-member.is-presence-offline
+  .rails-den-member-profile-avatar {
+  opacity: 0.42;
+  filter:
+    grayscale(0.75)
+    saturate(0.25)
+    brightness(0.82);
+}
+
+.rails-den-presence-directory-avatar-link {
+  flex: none;
+  border-radius: 50%;
+}
+
+.rails-den-presence-directory-member-main {
+  min-width: 0;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.rails-den-presence-directory-identity {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+}
+
+.rails-den-presence-directory-name {
+  color: var(--rails-den-text);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.rails-den-presence-directory-name:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rails-den-presence-directory-mention,
+.rails-den-presence-directory-details {
+  color: var(--rails-den-muted);
+}
+
+.rails-den-presence-directory-mention {
+  font-size: 0.875rem;
+}
+
+.rails-den-presence-directory-details {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.rails-den-presence-directory-details a {
+  color: inherit;
+  font-weight: 600;
+  text-underline-offset: 2px;
+}
+
+.rails-den-presence-directory-status {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  color: var(--rails-den-text);
+  font-weight: 600;
+}
+
+.rails-den-presence-directory-status
+  .rails-den-presence-directory-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+}
+
+.rails-den-presence-directory-empty,
+.rails-den-presence-directory-message {
+  color: var(--rails-den-muted);
+}
+
+.rails-den-presence-directory-empty {
+  padding: 1.25rem;
+}
+
+.rails-den-presence-directory-message {
+  padding: 1.5rem;
+  border: 1px solid var(--rails-den-border);
+  border-radius: var(--rails-den-radius);
+  background: var(--rails-den-surface);
+}
+
+.rails-den-presence-directory-message h2 {
+  margin: 0 0 0.5rem;
+  color: var(--rails-den-text);
+}
+
+.rails-den-presence-directory-message p {
+  margin: 0;
+}
+
+.rails-den-presence-directory a:focus-visible {
+  outline: 3px solid #2563eb;
+  outline-offset: 3px;
+}
+
+@media (max-width: 640px) {
+  .rails-den-presence-directory-summary {
+    width: 100%;
+  }
+
+  .rails-den-presence-directory-member {
+    align-items: flex-start;
+    padding-inline: 1rem;
+  }
+
+  .rails-den-presence-directory-section-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}

data/app/assets/stylesheets/rails_den/presence_live.css

@@ -0,0 +1,15 @@
+.rails-den-community-presence-link {
+  width: fit-content;
+  color: inherit;
+  text-decoration: none;
+}
+
+.rails-den-community-presence-link:hover {
+  opacity: 0.82;
+}
+
+.rails-den-community-presence-link:focus-visible {
+  outline: 3px solid #2563eb;
+  outline-offset: 4px;
+  border-radius: 6px;
+}

data/app/assets/stylesheets/rails_den/private_messages.css

@@ -0,0 +1,41 @@
+.rails-den-private-messages { display: grid; gap: 1.25rem; }
+.rails-den-private-header h1, .rails-den-private-header p, .rails-den-private-thread-header h1, .rails-den-private-thread-header p { margin: .25rem 0; }
+.rails-den-private-header p, .rails-den-private-thread-header p, .rails-den-private-meta, .rails-den-private-counterpart span, .rails-den-private-field small { color: var(--rails-den-muted); }
+.rails-den-private-mailbox-nav, .rails-den-private-thread-header, .rails-den-private-thread-actions, .rails-den-private-counterpart, .rails-den-private-composer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
+.rails-den-private-mailbox-nav, .rails-den-private-thread-header { justify-content: space-between; }
+.rails-den-private-tab { display: inline-flex; padding: .55rem .8rem; color: var(--rails-den-muted); border-bottom: 3px solid transparent; font-weight: 800; text-decoration: none; }
+.rails-den-private-tab.is-active { color: var(--rails-den-text); border-color: var(--rails-den-primary); }
+.rails-den-private-list, .rails-den-private-history { display: grid; gap: .85rem; }
+.rails-den-private-conversation, .rails-den-private-message, .rails-den-private-composer, .rails-den-private-empty, .rails-den-private-unavailable, .rails-den-private-reply { padding: clamp(1rem, 3vw, 1.4rem); background: var(--rails-den-surface); border: 1px solid var(--rails-den-border); border-radius: var(--rails-den-radius); }
+.rails-den-private-conversation { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center; }
+.rails-den-private-conversation.is-unread { border-left: 5px solid var(--rails-den-primary); }
+.rails-den-private-conversation h2 { margin: .45rem 0; font-size: 1.2rem; }
+.rails-den-private-excerpt, .rails-den-private-meta { margin: .25rem 0; }
+.rails-den-private-unread { display: inline-flex; padding: .2rem .5rem; border: 1px solid var(--rails-den-primary); border-radius: 999px; color: var(--rails-den-text) !important; font-size: .78rem; font-weight: 800; }
+.rails-den-private-delete, .rails-den-private-preview-button { padding: .48rem .75rem; color: var(--rails-den-danger); background: transparent; border: 1px solid currentColor; border-radius: 8px; font: inherit; font-weight: 800; cursor: pointer; }
+.rails-den-private-preview-button { color: var(--rails-den-text); border-color: var(--rails-den-border); }
+.rails-den-private-composer { display: grid; gap: 1rem; max-width: 52rem; }
+.rails-den-private-field { display: grid; gap: .4rem; position: relative; }
+.rails-den-private-field label { font-weight: 800; }
+.rails-den-private-field input, .rails-den-private-field textarea { width: 100%; padding: .72rem; color: var(--rails-den-text); background: var(--rails-den-surface-input); border: 1px solid var(--rails-den-border); border-radius: 8px; font: inherit; }
+.rails-den-private-field textarea { resize: vertical; min-height: 12rem; }
+.rails-den-private-errors { padding: .75rem; color: var(--rails-den-danger); border: 1px solid var(--rails-den-danger); border-radius: 8px; }
+.rails-den-private-candidates { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; max-height: 16rem; overflow: auto; background: var(--rails-den-surface-raised); border: 1px solid var(--rails-den-border); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
+.rails-den-private-candidate { display: flex; justify-content: space-between; width: 100%; padding: .7rem; color: var(--rails-den-text); background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
+.rails-den-private-candidate:hover, .rails-den-private-candidate:focus { background: var(--rails-den-surface-input); }
+.rails-den-private-preview { padding: 1rem; border: 1px dashed var(--rails-den-border); border-radius: 8px; overflow-wrap: anywhere; }
+.rails-den-private-message.is-own { border-left: 3px solid var(--rails-den-primary); }
+.rails-den-private-message header { display: flex; flex-wrap: wrap; gap: .45rem; color: var(--rails-den-muted); }
+.rails-den-private-message header strong { color: var(--rails-den-text); }
+.rails-den-private-message header time { margin-left: auto; }
+.rails-den-private-message-body { margin-top: .8rem; line-height: 1.65; overflow-wrap: anywhere; }
+.rails-den-private-message-body pre { max-width: 100%; overflow-x: auto; }
+.rails-den-private-empty { display: grid; justify-items: center; gap: .8rem; padding-block: 3rem; text-align: center; border-style: dashed; }
+.rails-den-private-messages :focus-visible { outline: 2px solid var(--rails-den-primary); outline-offset: 3px; }
+@media (max-width: 42rem) {
+  .rails-den-private-conversation { grid-template-columns: 1fr; }
+  .rails-den-private-conversation form, .rails-den-private-conversation button { width: 100%; }
+  .rails-den-private-mailbox-nav, .rails-den-private-thread-header { align-items: stretch; flex-direction: column; }
+  .rails-den-private-mailbox-nav > .rails-den-navbar-button, .rails-den-private-thread-actions, .rails-den-private-thread-actions form, .rails-den-private-thread-actions button { width: 100%; }
+  .rails-den-private-message header time { width: 100%; margin-left: 0; }
+}

data/app/assets/stylesheets/rails_den/reactions.css

@@ -0,0 +1,53 @@
+.rails-den-reactions { margin-top: 1rem; }
+.rails-den-reaction-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+.rails-den-reaction-chip { display: inline-flex; align-items: stretch; min-height: 2.25rem; overflow: hidden; color: var(--rails-den-text); background: var(--rails-den-surface); border: 1px solid var(--rails-den-border); border-radius: 999px; }
+.rails-den-reaction-chip.is-selected { border-color: var(--rails-den-primary); box-shadow: inset 0 0 0 1px var(--rails-den-primary); }
+.rails-den-reaction-chip form { display: flex; margin: 0; }
+.rails-den-reaction-toggle, .rails-den-reaction-emoji { display: inline-flex; align-items: center; gap: .25rem; padding: .35rem .35rem .35rem .7rem; color: inherit; background: transparent; border: 0; font: inherit; }
+.rails-den-reaction-toggle { cursor: pointer; }
+.rails-den-reaction-selected-mark { font-size: .72rem; font-weight: 800; }
+.rails-den-reaction-count { display: inline-flex; align-items: center; min-width: 2rem; padding: .35rem .7rem .35rem .25rem; color: inherit; text-decoration: none; font-weight: 700; }
+.rails-den-reaction-chip:hover { border-color: var(--rails-den-primary); }
+.rails-den-reaction-toggle:focus-visible, .rails-den-reaction-count:focus-visible, .rails-den-add-reaction:focus-visible, .rails-den-reaction-option:focus-visible, .rails-den-reactor-dialog-close:focus-visible { outline: 2px solid var(--rails-den-primary); outline-offset: 2px; }
+.rails-den-reaction-picker { position: relative; }
+.rails-den-add-reaction { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .35rem .8rem; border: 1px solid var(--rails-den-border); border-radius: 999px; color: var(--rails-den-text); background: var(--rails-den-surface-raised); cursor: pointer; font-weight: 700; list-style: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
+.rails-den-add-reaction::before { content: "+"; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border: 1px solid currentColor; border-radius: 999px; font-size: .85rem; line-height: 1; }
+.rails-den-add-reaction::after { content: "▾"; color: var(--rails-den-muted); font-size: .75rem; }
+.rails-den-add-reaction::-webkit-details-marker { display: none; }
+.rails-den-add-reaction:hover { border-color: var(--rails-den-primary); background: var(--rails-den-surface); }
+.rails-den-reaction-picker[open] .rails-den-add-reaction { color: var(--rails-den-text); border-color: var(--rails-den-primary); background: color-mix(in srgb, var(--rails-den-primary) 18%, var(--rails-den-surface-raised)); }
+.rails-den-reaction-picker[open] .rails-den-add-reaction::after { content: "▴"; color: currentColor; }
+.rails-den-reaction-picker-menu { position: static; z-index: 10; display: grid; gap: .5rem; width: min(24rem, calc(100vw - 4rem)); margin-top: .4rem; padding: .6rem; background: var(--rails-den-surface); border: 1px solid var(--rails-den-border); border-radius: var(--rails-den-radius); box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); }
+.rails-den-reaction-picker-menu form { margin: 0; }
+.rails-den-reaction-search { display: flex; gap: .4rem; }
+.rails-den-reaction-search input[type="search"] { flex: 1; min-width: 0; padding: .55rem .65rem; color: var(--rails-den-text); background: var(--rails-den-surface-input); border: 1px solid var(--rails-den-border); border-radius: 7px; }
+.rails-den-reaction-search-submit { padding: .45rem .65rem; color: var(--rails-den-text); background: var(--rails-den-primary); border: 0; border-radius: 7px; cursor: pointer; }
+.rails-den-reaction-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 18rem; overflow-y: auto; }
+.rails-den-reaction-option { display: flex; width: 100%; min-width: 0; gap: .55rem; align-items: center; padding: .55rem .6rem; color: var(--rails-den-text); background: transparent; border: 0; border-radius: calc(var(--rails-den-radius) / 2); font: inherit; text-align: left; cursor: pointer; }
+.rails-den-reaction-option span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rails-den-reaction-option:hover { background: var(--rails-den-bg); }
+.rails-den-reaction-browse-all { color: var(--rails-den-muted); font-size: .85rem; text-align: center; }
+.rails-den-reaction-no-results { grid-column: 1 / -1; margin: .7rem; color: var(--rails-den-muted); text-align: center; }
+.rails-den-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+.rails-den-reactions[aria-busy="true"] { opacity: .68; }
+.rails-den-reaction-error { margin: .55rem 0 0; color: var(--rails-den-danger); font-size: .9rem; }
+.rails-den-reactor-dialog { width: min(26rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100vh - 2rem)); padding: 0; color: var(--rails-den-text); background: var(--rails-den-surface); border: 1px solid var(--rails-den-border); border-radius: var(--rails-den-radius); }
+.rails-den-reactor-dialog::backdrop { background: rgba(0,0,0,.66); }
+.rails-den-reactor-dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--rails-den-border); }
+.rails-den-reactor-dialog-header h2 { margin: 0; font-size: 1.1rem; }
+.rails-den-reactor-dialog-close { width: 2.25rem; height: 2.25rem; color: var(--rails-den-muted); background: transparent; border: 1px solid var(--rails-den-border); border-radius: 999px; cursor: pointer; font-size: 1.35rem; }
+.rails-den-reactor-dialog [data-rails-den-reactor-dialog-content] { padding: 1rem 1.1rem; overflow: auto; }
+.rails-den-reactor-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
+.rails-den-reactor-list li { padding: .65rem .75rem; background: var(--rails-den-bg); border-radius: calc(var(--rails-den-radius) / 2); }
+.rails-den-reactor-list a { color: var(--rails-den-text); font-weight: 650; }
+.rails-den-reactor-list-empty, .rails-den-reactor-loading { color: var(--rails-den-muted); }
+.rails-den-reactor-page-card { padding: clamp(1rem, 3vw, 2rem); background: var(--rails-den-surface); border: 1px solid var(--rails-den-border); border-radius: var(--rails-den-radius); }
+.rails-den-reactor-page-card > header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
+.rails-den-reactor-page-card h1, .rails-den-reactor-page-context { margin: 0; }
+.rails-den-reactor-page-emoji { font-size: 2.5rem; }
+.rails-den-reactor-page-context { color: var(--rails-den-muted); }
+.rails-den-reaction-picker-page-search { display: grid; gap: .45rem; margin-bottom: 1rem; }
+.rails-den-reaction-picker-page-search > div { display: flex; gap: .5rem; }
+.rails-den-reaction-picker-page-search input { flex: 1; min-width: 0; padding: .7rem; color: var(--rails-den-text); background: var(--rails-den-surface-input); border: 1px solid var(--rails-den-border); border-radius: 8px; }
+.rails-den-reaction-picker-page-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem; }
+@media (max-width: 36rem) { .rails-den-reaction-row { gap: .6rem; } .rails-den-reaction-chip, .rails-den-add-reaction { min-height: 2.65rem; } .rails-den-reaction-picker { max-width: 100%; } .rails-den-reaction-picker-menu { width: min(20rem, calc(100vw - 3rem)); max-height: 60vh; overflow: auto; } .rails-den-reaction-options { grid-template-columns: 1fr; } .rails-den-reaction-picker-page-search > div { display: grid; } .rails-den-reaction-picker-page-results { grid-template-columns: 1fr; } }

data/app/assets/stylesheets/rails_den/search.css

@@ -0,0 +1,100 @@
+.rails-den-search-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.rails-den-search-filters {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(10rem, 1fr)
+  );
+  gap: 1rem;
+  align-items: end;
+}
+
+.rails-den-search-filter {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.rails-den-search-filter label {
+  font-weight: 650;
+}
+
+.rails-den-search-filter input,
+.rails-den-search-filter select {
+  width: 100%;
+}
+
+.rails-den-search-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.rails-den-search-clear,
+.rails-den-search-clear:visited {
+  color: var(--rails-den-primary-hover);
+  font-weight: 650;
+  text-decoration: none;
+}
+
+.rails-den-search-clear:hover {
+  color: #ffffff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rails-den-search-filter-note {
+  opacity: 0.75;
+}
+
+.rails-den-search-results {
+  margin-top: 1.5rem;
+}
+
+.rails-den-search-result {
+  margin-top: 1.25rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.rails-den-search-result:first-of-type {
+  margin-top: 0.75rem;
+}
+
+.rails-den-search-result h3 {
+  margin: 0.35rem 0;
+}
+
+.rails-den-search-result p {
+  margin: 0.35rem 0;
+}
+
+.rails-den-search-result a,
+.rails-den-search-result a:visited {
+  color: var(--rails-den-primary-hover);
+  font-weight: 650;
+  text-decoration: none;
+}
+
+.rails-den-search-result a:hover {
+  color: #ffffff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rails-den-search-result a:focus-visible {
+  outline: 3px solid rgba(200, 59, 50, 0.22);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
+.rails-den-search-highlight {
+  padding: 0 0.08em;
+  border-radius: 0.15em;
+  background: rgba(200, 59, 50, 0.3);
+  color: inherit;
+  font-weight: 750;
+}

data/app/assets/stylesheets/rails_den/tags.css

@@ -0,0 +1,136 @@
+.rails-den-tag-picker {
+  margin-bottom: 18px;
+}
+
+.rails-den-tag-picker-heading {
+  margin-bottom: 7px;
+  color: var(--rails-den-text);
+  font-weight: 600;
+}
+
+.rails-den-tag-picker-help {
+  margin: 0 0 10px;
+  color: var(--rails-den-muted);
+  font-size: 0.85rem;
+}
+
+.rails-den-tag-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.rails-den-tag-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 36px;
+  margin: 0;
+  padding: 7px 12px;
+  border: 1px solid var(--rails-den-border);
+  border-radius: 999px;
+  background: var(--rails-den-surface-input);
+  color: var(--rails-den-text);
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 600;
+  transition:
+    border-color 120ms ease,
+    background 120ms ease;
+}
+
+.rails-den-tag-option:hover {
+  border-color: var(--rails-den-primary);
+}
+
+.rails-den-tag-option:has(
+  .rails-den-tag-option-checkbox:checked
+) {
+  border-color: var(--rails-den-primary);
+  background: rgba(200, 59, 50, 0.18);
+}
+
+.rails-den-tag-option:focus-within {
+  outline: 3px solid rgba(200, 59, 50, 0.18);
+  outline-offset: 2px;
+}
+
+.rails-den-tag-option-checkbox {
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  accent-color: var(--rails-den-primary);
+}
+
+.rails-den-topic-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.rails-den-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 26px;
+  padding: 3px 9px;
+  border: 1px solid
+    var(
+      --rails-den-tag-color,
+      var(--rails-den-border)
+    );
+  border-radius: 999px;
+  background: var(--rails-den-surface-input);
+  color: var(--rails-den-text);
+  font-size: 0.78rem;
+  font-weight: 650;
+  line-height: 1.2;
+  text-decoration: none;
+}
+
+.rails-den-tag::before {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 7px;
+  border-radius: 50%;
+  background:
+    var(
+      --rails-den-tag-color,
+      var(--rails-den-primary)
+    );
+  content: "";
+}
+
+.rails-den-tag--has-icon::before {
+  display: none;
+}
+
+.rails-den-tag-icon {
+  color:
+    var(
+      --rails-den-tag-color,
+      var(--rails-den-text)
+    );
+  line-height: 1;
+}
+
+.rails-den-tag:hover {
+  background: var(--rails-den-surface-raised);
+  color: #ffffff;
+}
+
+.rails-den-topic-title-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rails-den-topic-title-link:hover {
+  color: #ffffff;
+}
+
+.rails-den-board-arrow-link {
+  text-decoration: none;
+}