@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/editor/markdown/scss/index.scss

@@ -1,5 +1,7 @@
-@use '/shared';
-@use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/font/geist';
+@use 'css-utilities/hidden';
+@use 'css-utilities/surface';
 @use 'variables';
 
 .markdown-editor {
@@ -8,9 +10,7 @@
     color: var(--color);
     display: flex;
     flex-direction: column;
-    font-family: var(--font-family);
     font-size: var(--font-size);
-    font-variant-ligatures: none;
     height: var(--height);
     line-height: var(--line-height);
     min-height: var(--min-height);
@@ -20,13 +20,8 @@
     tab-size: var(--tab-size);
     width: 100%;
 
-    &-active {
-        display: none;
-        position: relative;
-
-        @include tokens.state(active) {
-            display: block;
-        }
+    &--empty &-content::before {
+        display: block;
     }
 
     &-block {
@@ -39,10 +34,6 @@
         position: relative;
         white-space: var(--white-space);
 
-        &--frontmatter {
-            white-space: normal;
-        }
-
         &--h1 {
             font-size: calc(var(--font-size) * var(--h1-scale));
         }
@@ -99,6 +90,11 @@
             margin-left: 0;
             white-space: var(--white-space);
         }
+
+        // Padding, not margin: the layout measures each block's border box, so space outside it would go uncounted.
+        &--task {
+            padding-top: var(--task-spacing);
+        }
     }
 
     &-body {
@@ -130,16 +126,45 @@
     }
 
     &-code {
-        background: var(--code-background);
+        @extend %font-geist-mono, %surface-sunken-level;
+        background: var(--surface-background-default);
         border-radius: var(--code-radius);
+        font-family: var(--font-family);
+        font-size: var(--code-font-size);
         padding: var(--code-padding);
 
         &--block {
             background: none;
+            font-size: inherit;
             padding: 0;
         }
     }
 
+    &-content {
+        caret-color: var(--caret-color);
+        cursor: var(--cursor);
+        min-height: 100%;
+        outline: none;
+        overflow-wrap: var(--overflow-wrap);
+        position: relative;
+        white-space: var(--white-space);
+
+        &::before {
+            color: var(--placeholder-color);
+            content: attr(data-placeholder);
+            display: none;
+            left: 0;
+            pointer-events: none;
+            position: absolute;
+            top: 0;
+        }
+
+        &::selection,
+        & ::selection {
+            background: var(--selection-background);
+        }
+    }
+
     &-em {
         font-style: italic;
     }
@@ -163,21 +188,16 @@
             pointer-events: none;
             visibility: hidden;
         }
-    }
 
-    &-fold-icon.icon {
-        --size: var(--fold-icon-size);
-        rotate: var(--fold-rotate);
-        transition: rotate var(--fold-duration) ease-out;
+        &-icon.icon {
+            --size: var(--fold-icon-size);
+            rotate: var(--fold-rotate);
+            transition: rotate var(--fold-duration) var(--easing-spring);
+        }
     }
 
     &-frontmatter {
-        background: var(--chip-background);
-        border: var(--border-width) solid var(--border-color);
-        border-radius: var(--code-radius);
-        display: inline-block;
-        font-size: var(--chip-font-size);
-        padding: var(--code-padding);
+        color: var(--muted-color);
     }
 
     &-heading {
@@ -217,90 +237,39 @@
         max-width: 100%;
     }
 
-    &-input {
-        // The shared scrollbar scope must not animate caret reveals in the editing surface.
-        --scrollbar-behavior: auto;
-        appearance: none;
-        background: transparent;
-        border: 0;
-        border-radius: 0;
-        box-sizing: border-box;
-        caret-color: var(--caret-color);
-        color: inherit;
-        cursor: var(--cursor);
-        display: block;
-        font: inherit;
-        letter-spacing: inherit;
-        line-height: inherit;
-        margin: 0;
-        min-width: 100%;
-        outline: none;
-        overflow: hidden;
-        overflow-wrap: var(--overflow-wrap);
-        padding: 0;
-        resize: none;
-        tab-size: inherit;
-        transition: none;
-        white-space: var(--white-space);
-        width: var(--field-width, 100%);
-        word-break: normal;
-
-        &--code,
-        &--fence {
-            background: var(--code-background);
-            border-radius: var(--code-radius);
-        }
 
-        &--h1 {
-            font-size: calc(var(--font-size) * var(--h1-scale));
-        }
-
-        &--h1,
-        &--h2 {
-            line-height: var(--heading-line-height);
-        }
-
-        &--h2 {
-            font-size: calc(var(--font-size) * var(--h2-scale));
-        }
-
-        &--h3 {
-            font-size: calc(var(--font-size) * var(--h3-scale));
-        }
-
-        &--h4 {
-            font-size: calc(var(--font-size) * var(--h4-scale));
-        }
-
-        &--h5 {
-            font-size: calc(var(--font-size) * var(--h5-scale));
-        }
-
-        &--h6 {
-            font-size: calc(var(--font-size) * var(--h6-scale));
-        }
-
-        &--heading {
-            font-weight: var(--heading-weight);
-        }
-
-        &--quoted {
-            color: var(--quote-color);
-            padding-left: calc(var(--depth) * var(--quote-indent));
-        }
+    // A fence's info string, labelling its code.
+    &-info {
+        @extend %font-geist-mono;
+        color: var(--muted-color);
+        display: block;
+        font-family: var(--font-family);
+        font-size: var(--chip-font-size);
+        min-height: 1lh;
+    }
 
-        &::placeholder {
-            color: var(--placeholder-color);
-        }
+    // A task's text. Inline, so the strike runs once per wrapped line; it draws after the check, as in the tasklist.
+    &-label {
+        -webkit-box-decoration-break: clone;
+        background-image: linear-gradient(var(--strike-color), var(--strike-color));
+        background-position: 0 55%;
+        background-repeat: no-repeat;
+        background-size: 0% var(--strike-width);
+        box-decoration-break: clone;
+        transition:
+            background-size var(--strike-duration) var(--strike-timing-function),
+            color var(--strike-duration) var(--strike-timing-function);
 
-        &::selection {
-            background: var(--selection-background);
+        &--done {
+            background-size: 100% var(--strike-width);
+            color: var(--done-color);
+            transition-delay: var(--check-duration);
         }
     }
 
     &-link {
         color: var(--link-color);
-        cursor: var(--cursor);
+        cursor: var(--link-cursor);
         text-decoration: underline;
     }
 
@@ -319,11 +288,10 @@
         }
 
         &--match {
-            background: var(--match-background);
-
-            @include tokens.state(active) {
-                background: var(--match-active-background);
-            }
+            @extend %background-state;
+            --background-active: var(--match-active-background);
+            --background-default: var(--match-background);
+            background: var(--background);
         }
 
         &--selection {
@@ -349,8 +317,10 @@
     }
 
     &-pre {
-        background: var(--code-background);
+        @extend %font-geist-mono, %surface-sunken-level;
+        background: var(--surface-background-default);
         border-radius: var(--code-radius);
+        font-family: var(--font-family);
         margin: 0;
         overflow-x: auto;
         padding: 0 var(--code-radius);
@@ -397,19 +367,19 @@
         gap: var(--size-100);
         list-style: none;
 
-        &::-webkit-details-marker {
-            display: none;
-        }
-    }
+        // Turns like a fold marker: right while closed, down once open.
+        &-icon.icon {
+            --size: var(--fold-icon-size);
+            rotate: -90deg;
+            transition: rotate var(--fold-duration) var(--easing-spring);
 
-    // Turns like a fold marker: right while closed, down once open.
-    &-summary-icon.icon {
-        --size: var(--fold-icon-size);
-        rotate: -90deg;
-        transition: rotate var(--fold-duration) ease-out;
+            details[open] > .markdown-editor-summary > & {
+                rotate: 0deg;
+            }
+        }
 
-        details[open] > .markdown-editor-summary > & {
-            rotate: 0deg;
+        &::-webkit-details-marker {
+            display: none;
         }
     }
 
@@ -423,7 +393,7 @@
         outline: none;
         overflow: auto;
         overflow-anchor: none;
-        padding: var(--padding) var(--padding) var(--padding) calc(var(--padding) + var(--fold-width));
+        padding: var(--padding) var(--padding) var(--padding) calc(var(--padding) + var(--gutter-width));
         position: relative;
         scroll-behavior: auto;
     }
@@ -435,10 +405,8 @@
     &-task.checkbox {
         --background-active: var(--task-color);
         --border-color-active: var(--task-color);
-        --border-color-default: var(--color-border-500);
-        --border-radius: var(--border-radius-200);
+        --border-color-default: var(--surface-border-pressed);
         --border-width: var(--border-width-400);
-        --size: var(--task-size);
         display: inline-block;
         margin: 0 var(--task-gap) 0 0;
         vertical-align: middle;

package/src/components/editor/markdown/scss/variables.scss

@@ -1,39 +1,44 @@
 @use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/surface';
 
 .markdown-editor {
-    --active-line-background: oklch(from var(--color-text-500) l c h / 0.04);
-    --background: var(--color-white-300);
-    --bar-background: var(--color-white-400);
+    @extend %background-state, %border-state, %surface-raised-level;
+    --active-line-background: var(--surface-background-hover);
+    --background-default: var(--surface-background-default);
     --bar-control-height: var(--size-700);
     --bar-font-size: var(--font-size-200);
     --bar-gap: var(--size-100);
     --bar-icon-size: var(--size-300);
     --bar-input-width: 160px;
     --bar-padding: var(--size-100);
-    --border-color: var(--color-border-300);
+    --border-color-default: var(--surface-border-default);
     --border-radius: var(--border-radius-300);
     --border-width: var(--border-width-400);
     --caret-color: var(--color);
     --caret-width: var(--border-width-500);
     --cell-padding: var(--size-100) var(--size-200);
-    --chip-background: oklch(from var(--color-text-300) l c h / 0.15);
-    --chip-font-size: var(--font-size-100);
-    --code-background: oklch(from var(--color-text-500) l c h / 0.06);
+    --check-duration: var(--duration-fast);
+    --chip-background: oklch(from var(--color-primary-300) l c h / 0.15);
+    --chip-font-size: var(--font-size-300);
+    --code-font-size: 0.9em;
     --code-padding: 0 0.25em;
     --code-radius: var(--border-radius-200);
     --color: var(--color-text-500);
     --comment-color: var(--color-text-300);
     --cursor: text;
     --disabled-opacity: 0.5;
+    --done-color: var(--color-text-300);
     --focus-color: var(--color-blue-400);
     --focus-offset: var(--border-width-400);
     --focus-width: var(--border-width-500);
-    --fold-duration: 0.15s;
+    --fold-duration: var(--duration-fast);
     --fold-icon-size: var(--size-100);
     --fold-rotate: 0deg;
     --fold-width: var(--size-400);
-    --font-family: var(--font-family-mono);
-    --font-size: var(--font-size-200);
+    --font-size: var(--font-size-300);
+    --gutter-width: 0px;
     // Heading font scales and the line height of the two largest; the layout's arithmetic uses the same values.
     --h1-scale: 1.7;
     --h2-scale: 1.45;
@@ -45,9 +50,10 @@
     --heading-weight: 600;
     --height: 320px;
     --invalid-color: var(--color-red-400);
-    --keyword-color: var(--color-purple-400);
+    --keyword-color: light-dark(var(--color-purple-400), oklch(from var(--color-purple-400) 0.75 0.15 h));
     --line-height: var(--size-600);
-    --link-color: var(--color-blue-400);
+    --link-color: light-dark(var(--color-blue-400), oklch(from var(--color-blue-400) 0.74 0.14 h));
+    --link-cursor: var(--cursor);
     --marker-width: 1.5em;
     --match-active-background: oklch(from var(--color-yellow-500) l c h / 0.6);
     --match-background: oklch(from var(--color-yellow-400) l c h / 0.35);
@@ -55,7 +61,7 @@
     --minimap-display: none;
     --minimap-offset: 0px;
     --minimap-opacity: 0.7;
-    --minimap-slider-background: oklch(from var(--color-text-500) l c h / 0.1);
+    --minimap-slider-background: oklch(from var(--color-primary-500) l c h / 0.1);
     --minimap-width: 80px;
     --muted-color: var(--color-text-300);
     --operator-color: var(--color-text-400);
@@ -63,19 +69,23 @@
     --overflow-wrap: break-word;
     --padding: var(--size-200);
     --placeholder-color: var(--color-text-300);
-    --property-color: var(--color-blue-500);
-    --quote-bar-color: var(--color-border-300);
+    --property-color: light-dark(var(--color-blue-500), oklch(from var(--color-blue-500) 0.8 0.1 h));
+    --quote-bar-color: var(--surface-border-default);
     --quote-bar-width: var(--border-width-500);
     --quote-color: var(--color-text-400);
     --quote-indent: var(--size-200);
-    --rule-color: var(--color-border-300);
+    --rule-color: var(--surface-border-default);
     --selection-background: oklch(from var(--color-blue-400) l c h / 0.22);
-    --string-color: oklch(from var(--color-green-500) 45% c h);
+    --strike-color: var(--surface-border-hover);
+    --strike-duration: var(--duration-moderate);
+    --strike-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+    --strike-width: 2px;
+    --string-color: light-dark(oklch(from var(--color-green-500) 45% c h), oklch(from var(--color-green-500) 0.8 0.15 h));
     // Resolved on the editor, since the checkbox derives its own '--focus-color' from these.
     --task-color: var(--focus-color);
     --task-gap: var(--size-100);
-    --task-size: 14px;
-    --type-color: var(--color-blue-300);
+    --task-spacing: calc(var(--size-100) / 2);
+    --type-color: light-dark(var(--color-blue-300), oklch(from var(--color-blue-300) 0.76 0.13 h));
     --variable-color: var(--color);
     --white-space: pre-wrap;
 
@@ -83,6 +93,14 @@
         --cursor: crosshair;
     }
 
+    &--fold {
+        --gutter-width: var(--fold-width);
+    }
+
+    &--linking {
+        --link-cursor: pointer;
+    }
+
     &--minimap {
         --minimap-display: block;
         --minimap-offset: var(--minimap-width);
@@ -104,6 +122,8 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
+        --check-duration: 0s;
         --fold-duration: 0s;
+        --strike-duration: 0s;
     }
 }