@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/editor/viewer/scss/_viewer.scss

@@ -0,0 +1,302 @@
+@use 'css-utilities/color';
+@use 'css-utilities/surface';
+
+
+.code-viewer {
+    background: var(--background);
+    border: var(--border-width) solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    color: var(--color);
+    display: flex;
+    flex-direction: column;
+    max-height: var(--max-height);
+    min-height: var(--min-height);
+    min-width: 0;
+    overflow: hidden;
+    width: 100%;
+
+
+    &-body {
+        display: flex;
+        flex: 1 1 auto;
+        min-height: 0;
+    }
+
+    &-code {
+        flex: 0 1 auto;
+        font: inherit;
+        min-width: 0;
+        overflow-wrap: var(--overflow-wrap);
+        padding-inline-start: var(--code-padding);
+        white-space: var(--white-space);
+
+        // The library root sets every element's line height; tokens take the line's.
+        * {
+            line-height: inherit;
+        }
+    }
+
+    &-copy {
+        margin-inline-start: auto;
+    }
+
+    &-filename {
+        font-weight: var(--font-weight-600);
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-fold {
+        @extend %color-state;
+        --color-default: currentColor;
+        --color-hover: var(--hover-color);
+        --color-pressed: var(--color-hover);
+        align-items: center;
+        background: transparent;
+        border: 0;
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        flex: none;
+        height: var(--line-height);
+        justify-content: center;
+        padding: 0;
+        width: var(--fold-width);
+
+        &-icon.icon {
+            --size: var(--fold-icon-size);
+            rotate: var(--fold-rotate);
+            transition: rotate var(--fold-duration) var(--easing-spring);
+        }
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: calc(var(--focus-width) * -1);
+        }
+
+        &[aria-expanded='false'] {
+            --fold-rotate: -90deg;
+        }
+    }
+
+    // Sticks while the code scrolls sideways, opaque so the code passes beneath it.
+    &-gutter {
+        background: var(--background);
+        border-inline-end: var(--gutter-border-width) solid var(--gutter-border-color);
+        color: var(--gutter-color);
+        display: flex;
+        flex: none;
+        left: 0;
+        position: sticky;
+        user-select: none;
+        z-index: 1;
+    }
+
+    &-header {
+        @extend %surface-sunken-level;
+        align-items: center;
+        background: var(--surface-background-default);
+        border-bottom: var(--border-width) solid var(--border-color);
+        display: flex;
+        flex: none;
+        font-size: var(--label-font-size);
+        gap: var(--bar-gap);
+        padding: var(--bar-padding);
+    }
+
+    // The first and last lines pad the block inside their gutter and code, so the separator runs its full height; the
+    // placeholder's margin keeps it centred on the text.
+    &-line {
+        display: flex;
+        line-height: var(--line-height);
+        min-height: var(--line-height);
+        padding-inline-end: var(--code-padding);
+
+        &:first-child {
+            > .code-viewer-code,
+            > .code-viewer-gutter {
+                padding-top: var(--padding);
+            }
+
+            > .code-viewer-placeholder {
+                margin-top: var(--padding);
+            }
+        }
+
+        &:last-child {
+            > .code-viewer-code,
+            > .code-viewer-gutter {
+                padding-bottom: var(--padding);
+            }
+
+            > .code-viewer-placeholder {
+                margin-bottom: var(--padding);
+            }
+        }
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    // Positioned, so the minimap reads each line's offset from the top of the code.
+    &-lines {
+        box-sizing: border-box;
+        min-width: 100%;
+        position: relative;
+        width: var(--line-width);
+    }
+
+    &-minimap {
+        background: var(--background);
+        border-inline-start: var(--border-width) solid var(--border-color);
+        cursor: pointer;
+        flex: none;
+        opacity: var(--minimap-opacity);
+        overflow: hidden;
+        position: relative;
+        touch-action: none;
+        width: var(--minimap-width);
+
+        &-canvas {
+            display: block;
+            height: 100%;
+            width: 100%;
+        }
+
+        &-slider {
+            background: var(--minimap-slider-background);
+            border: var(--border-width) solid var(--border-color);
+            box-sizing: border-box;
+            height: var(--slider-height);
+            left: 0;
+            pointer-events: none;
+            position: absolute;
+            top: var(--slider-top);
+            width: 100%;
+        }
+    }
+
+    // '--digits' is set per render on the lines, so the width resolves here rather than on the root.
+    &-number {
+        font-variant-numeric: tabular-nums;
+        text-align: end;
+        width: calc(var(--digits) * 1ch + var(--number-padding));
+    }
+
+    &-placeholder {
+        @extend %color-state;
+        --color-default: var(--placeholder-color);
+        --color-hover: var(--hover-color);
+        --color-pressed: var(--color-hover);
+        align-self: center;
+        background: var(--placeholder-background);
+        border: 0;
+        border-radius: var(--border-radius-100);
+        color: var(--color);
+        cursor: pointer;
+        font: inherit;
+        line-height: 1.2;
+        margin-inline-start: 1ch;
+        padding: 0 var(--size-100);
+        user-select: none;
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+        }
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    &-scroller {
+        flex: 1 1 auto;
+        font-family: var(--font-family);
+        font-size: var(--font-size);
+        min-height: 0;
+        min-width: 0;
+        overflow: auto;
+        tab-size: var(--tab-size);
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: calc(var(--focus-width) * -1);
+        }
+    }
+
+    &-space {
+        background: radial-gradient(circle at center, var(--whitespace-color) 1px, transparent 1.4px);
+    }
+
+    // The arrow is drawn, so selection and copy keep the tab itself.
+    &-tab {
+        position: relative;
+
+        &::before {
+            color: var(--whitespace-color);
+            content: '→';
+            left: 0;
+            pointer-events: none;
+            position: absolute;
+        }
+    }
+
+    &-token {
+        &--color {
+            color: var(--literal-color);
+        }
+
+        &--comment {
+            color: var(--comment-color);
+            font-style: italic;
+        }
+
+        &--function {
+            color: var(--function-color);
+        }
+
+        &--keyword {
+            color: var(--keyword-color);
+        }
+
+        &--number {
+            color: var(--number-color);
+        }
+
+        &--operator {
+            color: var(--operator-color);
+        }
+
+        &--property {
+            color: var(--property-color);
+        }
+
+        &--regexp {
+            color: var(--regexp-color);
+        }
+
+        &--selector {
+            color: var(--selector-color);
+        }
+
+        &--string {
+            color: var(--string-color);
+        }
+
+        &--tag {
+            color: var(--tag-color);
+        }
+
+        &--type {
+            color: var(--type-color);
+        }
+
+        &--variable {
+            color: var(--variable-color);
+        }
+    }
+}

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

@@ -0,0 +1,2 @@
+@use 'variables';
+@use 'viewer';

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

@@ -0,0 +1,69 @@
+@use 'css-utilities/background';
+@use 'css-utilities/border';
+@use 'css-utilities/font/geist';
+@use 'css-utilities/surface';
+
+
+.code-viewer {
+    @extend %background-state, %border-state, %font-geist-mono, %surface-raised-level;
+    --background-default: var(--surface-background-default);
+    --bar-gap: var(--size-200);
+    --bar-padding: var(--size-100) var(--size-100) var(--size-100) var(--size-300);
+    --border-color-default: var(--surface-border-default);
+    --border-radius: var(--border-radius-300);
+    --border-width: var(--border-width-400);
+    --code-padding: var(--padding);
+    --color: var(--color-text-500);
+    --comment-color: var(--color-text-300);
+    --focus-color: var(--color-blue-400);
+    --focus-width: var(--border-width-500);
+    --fold-duration: var(--duration-fast);
+    --fold-icon-size: var(--size-100);
+    --fold-rotate: 0deg;
+    --fold-width: var(--size-400);
+    --font-size: var(--font-size-300);
+    --function-color: light-dark(var(--color-purple-300), oklch(from var(--color-purple-300) 0.8 0.13 h));
+    --gutter-border-color: var(--surface-border-default);
+    --gutter-border-width: var(--border-width-400);
+    --gutter-color: var(--color-text-300);
+    // Resolved here, since the fold toggle's and placeholder's color states redefine --color on them.
+    --hover-color: var(--color);
+    --keyword-color: light-dark(var(--color-purple-400), oklch(from var(--color-purple-400) 0.75 0.15 h));
+    --label-font-size: var(--font-size-200);
+    --line-height: var(--size-600);
+    --line-width: max-content;
+    // CSS color literals.
+    --literal-color: var(--number-color);
+    --max-height: 480px;
+    --min-height: 0px;
+    --minimap-opacity: 0.7;
+    --minimap-slider-background: oklch(from var(--color-primary-500) l c h / 0.1);
+    --minimap-width: 80px;
+    --number-color: light-dark(var(--color-blue-400), oklch(from var(--color-blue-400) 0.78 0.12 h));
+    --number-padding: var(--size-100);
+    --operator-color: var(--color-text-400);
+    --overflow-wrap: normal;
+    --padding: var(--size-200);
+    --placeholder-background: oklch(from var(--color-primary-300) l c h / 0.15);
+    --placeholder-color: var(--color-text-300);
+    --property-color: light-dark(var(--color-blue-500), oklch(from var(--color-blue-500) 0.8 0.1 h));
+    --regexp-color: light-dark(var(--color-red-500), oklch(from var(--color-red-500) 0.75 0.14 h));
+    --selector-color: light-dark(var(--color-purple-500), oklch(from var(--color-purple-500) 0.78 0.13 h));
+    --string-color: light-dark(oklch(from var(--color-green-500) 45% c h), oklch(from var(--color-green-500) 0.8 0.15 h));
+    --tab-size: 4;
+    --tag-color: light-dark(var(--color-red-400), oklch(from var(--color-red-400) 0.72 0.16 h));
+    --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;
+    --whitespace-color: oklch(from var(--color-primary-300) l c h / 0.6);
+
+    &--wrap {
+        --line-width: 100%;
+        --overflow-wrap: anywhere;
+        --white-space: pre-wrap;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --fold-duration: 0s;
+    }
+}