@floegence/floe-webapp-core 0.35.51 → 0.35.53

package/dist/notes-legacy.css

@@ -256,8 +256,7 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    background-image:
-      linear-gradient(
+    background-image: linear-gradient(
         to right,
         color-mix(in srgb, var(--border) 28%, transparent) 1px,
         transparent 1px
@@ -526,8 +525,7 @@
   .notes-overview__grid {
     position: absolute;
     inset: 0;
-    background-image:
-      linear-gradient(
+    background-image: linear-gradient(
         to right,
         color-mix(in srgb, var(--border) 26%, transparent) 1px,
         transparent 1px
@@ -675,6 +673,8 @@
     --notes-surface-strong: color-mix(in srgb, var(--card) 88%, var(--notes-accent) 12%);
     --notes-border: color-mix(in srgb, var(--border) 74%, var(--notes-accent) 26%);
     --notes-ink: color-mix(in srgb, var(--card-foreground) 92%, var(--notes-accent) 8%);
+    --notes-ribbon: color-mix(in srgb, var(--notes-accent) 74%, var(--foreground) 26%);
+    --notes-title-ink: color-mix(in srgb, var(--notes-ribbon) 82%, var(--card-foreground) 18%);
     position: absolute;
     width: var(--note-width);
     height: var(--note-height);
@@ -692,7 +692,12 @@
     height: 100%;
     border: 1px solid var(--notes-border);
     border-radius: 0.42rem;
-    background: var(--notes-surface);
+    background: linear-gradient(180deg, color-mix(in srgb, white 20%, transparent), transparent 30%),
+      linear-gradient(
+        135deg,
+        var(--notes-surface),
+        color-mix(in srgb, var(--notes-surface) 84%, var(--notes-accent) 16%)
+      );
     box-shadow:
       0 16px 28px color-mix(in srgb, var(--foreground) 7%, transparent),
       0 1px 0 color-mix(in srgb, white 8%, transparent) inset;
@@ -708,15 +713,21 @@
     content: '';
     position: absolute;
     inset: 0 auto 0 0;
-    width: 3px;
-    background: color-mix(in srgb, var(--notes-accent) 72%, white 28%);
+    width: 4px;
+    background: var(--notes-ribbon);
     opacity: 0.92;
+    box-shadow: 1px 0 0 color-mix(in srgb, white 18%, transparent) inset;
   }
 
   .notes-note:hover .notes-note__surface,
   .notes-note:focus-within .notes-note__surface {
     border-color: color-mix(in srgb, var(--notes-accent) 42%, var(--border));
-    background: var(--notes-surface-strong);
+    background: linear-gradient(180deg, color-mix(in srgb, white 24%, transparent), transparent 32%),
+      linear-gradient(
+        135deg,
+        var(--notes-surface-strong),
+        color-mix(in srgb, var(--notes-surface-strong) 82%, var(--notes-accent) 18%)
+      );
     box-shadow:
       0 20px 34px color-mix(in srgb, var(--foreground) 10%, transparent),
       0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
@@ -891,13 +902,108 @@
 
   .notes-note__body {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.46rem;
     flex: 1;
-    padding: 0.18rem 0.9rem 0.84rem;
+    min-height: 0;
+    padding: 0.22rem 0.92rem 0.88rem;
     text-align: left;
     cursor: copy;
   }
 
-  .notes-note__body span {
+  .notes-note__body.is-empty,
+  .notes-note__body.is-title-only {
+    cursor: text;
+  }
+
+  .notes-note__title-block {
+    --notes-title-marker-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 34' preserveAspectRatio='none'%3E%3Cpath d='M5.5 13.4C17.8 11.4 31.8 10.9 48.1 11.8C72.2 13.2 94.8 14.8 120.7 14.8C149.5 14.7 175.2 12.8 202.7 13.2C214.1 13.3 224.1 13.9 234.5 15.2L237.2 20.5C225.7 22 214.6 22.4 201.8 22.2C174.3 21.6 148.8 19.8 120.7 20.2C94 20.7 70.4 22.8 44.6 22.4C29.4 22.2 16.7 21.4 4.2 19.6L5.5 13.4Z' fill='black'/%3E%3C/svg%3E");
+    --notes-title-underline-extension: 0.18rem;
+    --notes-title-marker-height: 0.41rem;
+    --notes-title-marker-soft-height: 0.54rem;
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: flex-start;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0 0.04rem 0.28rem;
+    color: var(--notes-title-ink);
+    isolation: isolate;
+  }
+
+  .notes-note__title-block::before,
+  .notes-note__title-block::after {
+    content: '';
+    position: absolute;
+    left: calc(var(--notes-title-underline-extension) * -1);
+    right: calc(var(--notes-title-underline-extension) * -1);
+    transform-origin: left center;
+    -webkit-mask-image: var(--notes-title-marker-mask);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 100% 100%;
+    mask-image: var(--notes-title-marker-mask);
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 100% 100%;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .notes-note__title-block::before {
+    bottom: -0.05rem;
+    height: var(--notes-title-marker-soft-height);
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, currentColor 28%, white 72%) 0%,
+        color-mix(in srgb, currentColor 42%, white 58%) 45%,
+        color-mix(in srgb, currentColor 24%, transparent) 100%
+      );
+    opacity: 0.52;
+    filter: blur(0.065rem);
+    transform: translateX(0.015rem) rotate(-0.6deg);
+  }
+
+  .notes-note__title-block::after {
+    bottom: 0.01rem;
+    height: var(--notes-title-marker-height);
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, currentColor 52%, white 48%) 0%,
+        color-mix(in srgb, currentColor 88%, white 12%) 40%,
+        color-mix(in srgb, currentColor 76%, black 24%) 100%
+      );
+    opacity: 0.84;
+    filter: saturate(0.94);
+    transform: rotate(-0.95deg);
+    box-shadow:
+      0 0.018rem 0 color-mix(in srgb, currentColor 18%, transparent),
+      0 0.04rem 0.05rem color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .notes-note__title {
+    display: -webkit-box;
+    overflow: hidden;
+    max-width: 100%;
+    position: relative;
+    z-index: 1;
+    color: inherit;
+    font-size: 1.03rem;
+    font-weight: 760;
+    letter-spacing: -0.045em;
+    line-height: 1.02;
+    text-wrap: balance;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+
+  .notes-note__body-copy {
     display: -webkit-box;
     overflow: hidden;
     color: color-mix(in srgb, var(--notes-ink) 94%, black 6%);
@@ -909,24 +1015,58 @@
     -webkit-box-orient: vertical;
   }
 
-  .notes-note__body.is-empty span {
+  .notes-note__body.is-empty .notes-note__body-copy {
     color: color-mix(in srgb, var(--notes-ink) 54%, var(--muted-foreground));
     font-style: italic;
   }
 
-  .notes-note--size-0 .notes-note__body span {
+  .notes-note__body.has-title .notes-note__body-copy {
+    font-size: 0.78rem;
+    line-height: 1.48;
+    -webkit-line-clamp: 4;
+  }
+
+  .notes-note__body.is-title-only {
+    padding-bottom: 1rem;
+  }
+
+  .notes-note--size-0 .notes-note__title {
+    font-size: 0.92rem;
+  }
+
+  .notes-note--size-3 .notes-note__title {
+    font-size: 1.08rem;
+  }
+
+  .notes-note--size-4 .notes-note__title {
+    font-size: 1.14rem;
+  }
+
+  .notes-note--size-0 .notes-note__body-copy {
     font-size: 0.78rem;
     -webkit-line-clamp: 4;
   }
 
-  .notes-note--size-1 .notes-note__body span {
+  .notes-note--size-1 .notes-note__body-copy {
     -webkit-line-clamp: 5;
   }
 
-  .notes-note--size-4 .notes-note__body span {
+  .notes-note--size-4 .notes-note__body-copy {
     -webkit-line-clamp: 8;
   }
 
+  .notes-note--size-0 .notes-note__body.has-title .notes-note__body-copy {
+    -webkit-line-clamp: 2;
+  }
+
+  .notes-note--size-1 .notes-note__body.has-title .notes-note__body-copy {
+    -webkit-line-clamp: 3;
+  }
+
+  .notes-note--size-4 .notes-note__body.has-title .notes-note__body-copy {
+    -webkit-line-clamp: 6;
+  }
+
   .notes-trash {
     position: absolute;
     right: 1rem;
@@ -1210,13 +1350,27 @@
 
   .notes-trash-note__body {
     display: flex;
+    flex-direction: column;
+    gap: 0.42rem;
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
-    padding: 0.18rem 0.78rem 0.65rem;
+    padding: 0.18rem 0.8rem 0.65rem;
+  }
+
+  .notes-note__title-block--trash {
+    --notes-title-underline-extension: 0.16rem;
+    --notes-title-marker-height: 0.35rem;
+    --notes-title-marker-soft-height: 0.45rem;
+    padding-bottom: 0.24rem;
   }
 
-  .notes-trash-note__body span {
+  .notes-trash-note .notes-note__title {
+    font-size: 0.94rem;
+    line-height: 1.05;
+  }
+
+  .notes-trash-note__body-copy {
     display: -webkit-box;
     width: 100%;
     overflow: hidden;
@@ -1229,18 +1383,54 @@
     word-break: break-word;
   }
 
-  .notes-trash-note--size-0 .notes-trash-note__body span {
+  .notes-trash-note__body.has-title .notes-trash-note__body-copy {
+    font-size: 0.77rem;
+    line-height: 1.46;
+    -webkit-line-clamp: 4;
+  }
+
+  .notes-trash-note__body.is-title-only {
+    padding-bottom: 0.86rem;
+  }
+
+  .notes-trash-note.notes-note--size-0 .notes-note__title {
+    font-size: 0.88rem;
+  }
+
+  .notes-trash-note.notes-note--size-4 .notes-note__title {
+    font-size: 1rem;
+  }
+
+  .notes-trash-note.notes-note--size-0 .notes-trash-note__body-copy {
     -webkit-line-clamp: 4;
   }
 
-  .notes-trash-note--size-1 .notes-trash-note__body span {
+  .notes-trash-note.notes-note--size-1 .notes-trash-note__body-copy {
     -webkit-line-clamp: 5;
   }
 
-  .notes-trash-note--size-4 .notes-trash-note__body span {
+  .notes-trash-note.notes-note--size-4 .notes-trash-note__body-copy {
     -webkit-line-clamp: 8;
   }
 
+  .notes-trash-note.notes-note--size-0
+    .notes-trash-note__body.has-title
+    .notes-trash-note__body-copy {
+    -webkit-line-clamp: 2;
+  }
+
+  .notes-trash-note.notes-note--size-1
+    .notes-trash-note__body.has-title
+    .notes-trash-note__body-copy {
+    -webkit-line-clamp: 3;
+  }
+
+  .notes-trash-note.notes-note--size-4
+    .notes-trash-note__body.has-title
+    .notes-trash-note__body-copy {
+    -webkit-line-clamp: 6;
+  }
+
   .notes-trash-note__actions {
     display: flex;
     flex-shrink: 0;
@@ -1402,6 +1592,28 @@
     gap: 0.5rem;
   }
 
+  .notes-editor__field--headline input {
+    background: color-mix(in srgb, var(--background) 96%, var(--notes-accent) 4%);
+    border-radius: 0.58rem;
+    border-color: color-mix(in srgb, var(--border) 70%, var(--notes-accent) 30%);
+    color: var(--foreground);
+    font-size: 0.88rem;
+    font-weight: 650;
+    letter-spacing: -0.022em;
+    box-shadow:
+      0 1px 0 color-mix(in srgb, white 12%, transparent) inset,
+      0 10px 22px color-mix(in srgb, var(--foreground) 4%, transparent);
+  }
+
+  .notes-editor__field--headline input::placeholder {
+    color: color-mix(in srgb, var(--muted-foreground) 72%, transparent);
+    font-weight: 500;
+  }
+
+  .notes-editor__field--headline p {
+    color: color-mix(in srgb, var(--muted-foreground) 86%, transparent);
+  }
+
   .notes-editor__swatches {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1503,6 +1715,8 @@
     --notes-surface: color-mix(in srgb, var(--card) 88%, var(--notes-accent) 12%);
     --notes-surface-strong: color-mix(in srgb, var(--card) 82%, var(--notes-accent) 18%);
     --notes-border: color-mix(in srgb, var(--border) 62%, var(--notes-accent) 38%);
+    --notes-ribbon: color-mix(in srgb, var(--notes-accent) 82%, white 18%);
+    --notes-title-ink: color-mix(in srgb, var(--notes-ribbon) 72%, white 28%);
   }
 
   .dark .notes-note__surface {
@@ -1975,8 +2189,7 @@
   }
 
   .notes-canvas {
-    background:
-      linear-gradient(
+    background: linear-gradient(
         to right,
         color-mix(in srgb, var(--border) 14%, transparent) 1px,
         transparent 1px
@@ -1987,7 +2200,10 @@
         transparent 1px
       ),
       color-mix(in srgb, var(--background) 98%, var(--muted) 2%);
-    background-size: 40px 40px, 40px 40px, auto;
+    background-size:
+      40px 40px,
+      40px 40px,
+      auto;
   }
 
   .notes-topic-composer input {
@@ -2176,6 +2392,7 @@
     --notes-surface-strong: color-mix(in srgb, var(--card) 92%, var(--notes-accent) 8%);
     --notes-border: color-mix(in srgb, var(--border) 78%, var(--notes-accent) 22%);
     --notes-ink: color-mix(in srgb, var(--card-foreground) 94%, var(--notes-accent) 6%);
+    --notes-ribbon: color-mix(in srgb, var(--notes-accent) 78%, var(--foreground) 22%);
   }
 
   .notes-note__surface {
@@ -2186,7 +2403,7 @@
   }
 
   .notes-note__surface::before {
-    width: 2px;
+    width: 3px;
   }
 
   .notes-note:hover .notes-note__surface,
@@ -2232,11 +2449,16 @@
   }
 
   .notes-note__body {
-    padding: 0.14rem 0.82rem 0.8rem;
+    gap: 0.42rem;
+    padding: 0.16rem 0.84rem 0.82rem;
   }
 
-  .notes-note__body span {
-    font-size: 0.82rem;
+  .notes-note__title {
+    font-size: 0.99rem;
+  }
+
+  .notes-note__body-copy {
+    font-size: 0.8rem;
   }
 
   .notes-note__copied-pill {