snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/styles/emoji.css

@@ -0,0 +1,53 @@
+@layer components {
+  .EmojiPickerReact {
+    --epr-category-navigation-button-size: 1.25rem !important;
+    --epr-category-label-height: 1.5rem !important;
+    --epr-emoji-size: 1.25rem !important;
+    --epr-picker-border-radius: 0.25rem !important;
+    --epr-horizontal-padding: 0.5rem !important;
+    --epr-emoji-padding: 0.5rem !important;
+    @apply bg-surface-1!;
+  }
+
+  .epr-main {
+    border: none !important;
+    border-radius: 0 !important;
+  }
+
+  .epr-emoji-category-label {
+    font-size: 0.7875rem !important;
+    @apply bg-surface-1/80! text-tertiary!;
+  }
+
+  .epr-category-nav,
+  .epr-header-overlay {
+    padding: 0.5rem !important;
+  }
+
+  button.epr-emoji:hover > *,
+  button.epr-emoji:focus > * {
+    @apply bg-layer-2!;
+  }
+
+  input.epr-search {
+    font-size: 0.7875rem !important;
+    height: 2rem !important;
+    background: transparent !important;
+    @apply border-subtle!;
+    border-radius: 0.25rem !important;
+  }
+
+  input.epr-search::placeholder {
+    @apply text-placeholder!;
+  }
+
+  button.epr-btn-clear-search:hover {
+    @apply bg-layer-2!;
+    @apply text-tertiary!;
+  }
+
+  .epr-emoji-variation-picker {
+    @apply bg-surface-1!;
+    @apply border-subtle-1!;
+  }
+}

apps/web/styles/globals.css

@@ -0,0 +1,170 @@
+@import "@plane/tailwind-config/index.css";
+@import "@plane/editor/styles";
+@import "@plane/propel/styles/react-day-picker.css";
+@import "./power-k.css";
+@import "./emoji.css";
+@plugin "@tailwindcss/typography";
+
+/* stickies and editor colors
+ * Text colors and the themed light/dark background ramps come from
+ * @plane/editor/styles (imported above), which is their single source of truth.
+ * Only the un-themed :root fallback below is kept: the editor package declares
+ * background colors solely under [data-theme*="light"] / [data-theme*="dark"],
+ * so without this they are undefined until a theme lands on the element. */
+:root {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
+}
+
+.shadow-custom {
+  box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
+}
+/* backdrop filter */
+.backdrop-blur-custom {
+  @apply backdrop-filter blur-[9px];
+}
+
+.epr-search-container > input {
+  @apply bg-surface-2! text-primary!;
+  border: none !important;
+}
+
+.epr-search-container > input::placeholder {
+  @apply text-placeholder!;
+}
+
+.epr-search-container > .epr-icn-search {
+  @apply text-placeholder!;
+}
+
+/* Lock icon animations */
+@keyframes textSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-8px);
+    max-width: 0px;
+  }
+  40% {
+    opacity: 0.7;
+    max-width: 60px;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+    max-width: 60px;
+  }
+}
+
+@keyframes textFadeOut {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+}
+
+@keyframes lockIconAnimation {
+  0% {
+    transform: rotate(-5deg) scale(1);
+  }
+  25% {
+    transform: rotate(0deg) scale(1.15);
+  }
+  50% {
+    transform: rotate(5deg) scale(1.08);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes unlockIconAnimation {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  40% {
+    transform: rotate(-8deg) scale(1.15);
+  }
+  80% {
+    transform: rotate(3deg) scale(1.05);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-text-slide-in {
+  animation: textSlideIn 400ms ease-out forwards;
+}
+
+.animate-text-fade-out {
+  animation: textFadeOut 600ms ease-in 300ms forwards;
+}
+
+.animate-lock-icon {
+  animation: lockIconAnimation 600ms ease-out forwards;
+}
+
+.animate-unlock-icon {
+  animation: unlockIconAnimation 600ms ease-out forwards;
+}
+
+.animate-fade-out {
+  animation: fadeOut 500ms ease-in 100ms forwards;
+}
+
+@keyframes highlight {
+  0% {
+    background-color: var(--background-color-layer-2);
+    border-radius: 4px;
+  }
+  100% {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+}
+
+/* Progress Bar Styles */
+:root {
+  --bprogress-color: var(--background-color-accent-primary);
+  --bprogress-height: 2.5px !important;
+}
+
+.bprogress {
+  pointer-events: none;
+}
+
+.bprogress .bar {
+  background: linear-gradient(
+    90deg,
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
+  ) !important;
+  will-change: width, opacity;
+}
+
+.bprogress .peg {
+  display: block;
+  box-shadow:
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
+  will-change: transform, opacity;
+}

apps/web/styles/power-k.css

@@ -0,0 +1,27 @@
+@layer components {
+  [cmdk-group] {
+    @apply mt-2 px-[0.45rem];
+  }
+
+  [cmdk-group-heading] {
+    @apply text-tertiary text-12 font-medium mb-2 px-[0.45rem];
+  }
+
+  [cmdk-item] {
+    @apply flex items-center justify-between cursor-pointer bg-layer-transparent text-body-xs-regular p-2 rounded-md;
+
+    &:focus,
+    &[aria-selected="true"] {
+      @apply bg-layer-transparent-active;
+    }
+
+    &[aria-disabled="true"],
+    &[data-disabled="true"] {
+      @apply bg-layer-transparent opacity-50 cursor-not-allowed;
+
+      &:focus {
+        @apply bg-layer-1/70;
+      }
+    }
+  }
+}