@usefragments/ui 1.6.0 → 2.0.0

package/src/components/CodeBlock/CodeBlock.module.scss

@@ -1,13 +1,13 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/prose" as prose;
-@use "../../recipes/target" as target;
 @use "../../recipes/typography" as typography;
 
 .container {
-  --_fui-code-inline-inset: var(--fui-raw-space-16);
+  --_fui-code-inline-inset: var(--fui-raw-space-16, #{measurements.raw-space(16)});
 
   inline-size: 100%;
 }
@@ -21,15 +21,29 @@
 
 .title {
   margin-block-end: layout.gap("xs");
-  text-transform: uppercase;
 }
 
 .wrapper {
   position: relative;
   overflow: hidden;
+  // A hairline keeps the block legible on any ground: the light code surface
+  // and the sunken app main share the same tone, so fill alone can vanish.
+  border: var(--fui-stroke-hairline, $fui-stroke-hairline) solid
+    var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   background-color: var(--fui-code-bg, $fui-code-bg);
   color: var(--fui-code-text, var(--fui-text-primary, #{$fui-text-primary}));
+  --shiki-color-text: var(--fui-code-text, var(--fui-text-primary, #{$fui-text-primary}));
+  --shiki-color-background: var(--fui-code-bg, #{$fui-code-bg});
+  --shiki-token-keyword: var(--fui-code-token-keyword, #{$fui-code-token-keyword});
+  --shiki-token-string: var(--fui-code-token-string, #{$fui-code-token-string});
+  --shiki-token-string-expression: var(--fui-code-token-string, #{$fui-code-token-string});
+  --shiki-token-comment: var(--fui-code-token-comment, #{$fui-code-token-comment});
+  --shiki-token-function: var(--fui-code-token-function, #{$fui-code-token-function});
+  --shiki-token-constant: var(--fui-code-token-number, #{$fui-code-token-number});
+  --shiki-token-parameter: var(--fui-code-token-variable, #{$fui-code-token-variable});
+  --shiki-token-punctuation: var(--fui-code-token-punctuation, #{$fui-code-token-punctuation});
+  --shiki-token-link: var(--fui-link-ink, #{$fui-link-ink});
 }
 
 .header {
@@ -38,53 +52,36 @@
   justify-content: space-between;
   min-block-size: action.track("md");
   padding-inline: layout.gap("lg");
-  border-block-end: var(--fui-stroke-hairline) solid
-    var(--fui-code-border, var(--fui-border, #{$fui-border}));
+  border-block-end: var(--fui-stroke-hairline, $fui-stroke-hairline) solid
+    var(--fui-border, $fui-border);
 }
 
 .filename {
   @include typography.role("code");
 
-  color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
+  color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
-.copyButton {
-  @include button-reset;
-  @include action.base;
-  @include action.icon-only("sm");
-  @include target.hit-area("compact");
-
-  border: 0;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  background: transparent;
-  color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
-  cursor: pointer;
+// Copy affordances are IconButtons (ghost, sm); the kit owns reset, hit area,
+// hover and focus. Only the overlay fade and the copied state live here.
+.wrapper .copyButton {
   transition:
-    background var(--fui-transition-fast, $fui-transition-fast),
     color var(--fui-transition-fast, $fui-transition-fast),
     opacity var(--fui-transition-fast, $fui-transition-fast);
 
-  &:hover {
-    background: var(--fui-code-copy-bg-hover, var(--fui-bg-hover, #{$fui-bg-hover}));
-    color: var(--fui-code-tab-text-active, var(--fui-text-primary, #{$fui-text-primary}));
-  }
-
-  &:focus-visible {
-    @include focus-ring;
-  }
-
-  &.copied {
+  &.copied,
+  &.copied:hover:not(:disabled) {
     color: var(--fui-color-success-text, $fui-color-success-text);
     opacity: 1;
   }
 }
 
-.copyOverlay {
+.wrapper .copyOverlay {
   position: absolute;
   inset-block-start: layout.gap("sm");
   inset-inline-end: layout.gap("sm");
   z-index: 2;
-  background: var(--fui-code-copy-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+  background-color: var(--fui-bg-hover, $fui-bg-hover);
   opacity: 0;
 }
 
@@ -94,20 +91,13 @@
   .copyOverlay.copied {
     opacity: 1;
   }
-
-  .codeContainer :global(.shiki),
-  .loading pre {
-    padding-inline-end: calc(
-      var(--_fui-code-inline-inset) + #{action.track("sm")} + var(--fui-raw-space-12)
-    );
-  }
 }
 
 .icon {
   @include action.glyph("sm");
 }
 
-.persistentCopy {
+.wrapper .persistentCopy {
   inset-block-start: 50%;
   transform: translateY(-50%);
   opacity: 1;
@@ -117,22 +107,34 @@
   opacity: 1;
 }
 
+// Overlay + persistent copy both sit absolute — reserve trailing space so
+// content-sized blocks don't collide with the control.
+.withCopyOverlay,
+.persistentCopyWrapper {
+  .codeContainer :global(.shiki),
+  .loading pre {
+    padding-inline-end: calc(
+      var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)})) + #{action.track("sm")} + var(--fui-raw-space-12, #{measurements.raw-space(12)})
+    );
+  }
+}
+
 .loading pre,
 .codeContainer :global(.shiki) {
   @include prose.code-block("default");
 
-  margin: 0;
-  border: 0 !important;
-  border-radius: 0 !important;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: none !important;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none}) !important;
   background-color: transparent !important;
   color: inherit;
 }
 
 .loading code,
 .codeContainer :global(.shiki) code {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: none;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
   background: none !important;
   color: inherit;
   font: inherit;
@@ -147,14 +149,14 @@
   :global(.line) {
     display: inline-block;
     inline-size: 100%;
-    min-block-size: var(--fui-type-code-line);
+    min-block-size: typography.line-height("code");
 
     &:global(.highlighted) {
-      margin-inline: calc(-1 * var(--_fui-code-inline-inset));
-      padding-inline: var(--_fui-code-inline-inset);
-      border-inline-start: var(--fui-stroke-default) solid
+      margin-inline: calc(-1 * var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)})));
+      padding-inline: var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+      border-inline-start: var(--fui-stroke-default, $fui-stroke-default) solid
         var(--fui-color-info-text, $fui-color-info-text);
-      background-color: var(--fui-code-highlight-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+      background-color: var(--fui-bg-hover, $fui-bg-hover);
     }
   }
 
@@ -162,44 +164,44 @@
     display: inline-block;
     inline-size: 2.5em;
     padding-inline-end: 1em;
-    color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
+    color: var(--fui-text-secondary, $fui-text-secondary);
     text-align: end;
     user-select: none;
-    opacity: 0.6;
+    opacity: var(--fui-opacity-muted, #{$fui-opacity-muted});
   }
 
   *::selection {
     background: var(--fui-code-selection-bg, $fui-code-selection-bg);
-    color: var(--fui-code-tab-text-active, var(--fui-text-primary, #{$fui-text-primary}));
+    color: var(--fui-text-primary, $fui-text-primary);
   }
 
   :global(.shiki)::-webkit-scrollbar {
-    block-size: var(--fui-raw-space-4);
+    block-size: var(--fui-raw-space-4, #{measurements.raw-space(4)});
   }
 
   :global(.shiki)::-webkit-scrollbar-thumb {
     border-radius: var(--fui-radius-full, $fui-radius-full);
-    background: var(--fui-code-scrollbar-thumb, var(--fui-border-strong, #{$fui-border-strong}));
+    background: var(--fui-border-strong, $fui-border-strong);
   }
 }
 
 .withLineNumbers .codeContainer :global(.shiki) {
-  padding-inline-start: var(--fui-raw-space-8);
+  padding-inline-start: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
 .withDiff {
   :global(.diff-marker) {
     display: inline-block;
     inline-size: 1.5em;
-    color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
+    color: var(--fui-text-secondary, $fui-text-secondary);
     text-align: center;
     user-select: none;
   }
 
   :global(.diff-added),
   :global(.diff-removed) {
-    margin-inline: calc(-1 * var(--_fui-code-inline-inset));
-    padding-inline: var(--_fui-code-inline-inset);
+    margin-inline: calc(-1 * var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)})));
+    padding-inline: var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
   }
 
   :global(.diff-added) {
@@ -220,7 +222,7 @@
 }
 
 .compact {
-  --_fui-code-inline-inset: var(--fui-raw-space-12);
+  --_fui-code-inline-inset: var(--fui-raw-space-12, #{measurements.raw-space(12)});
 
   .wrapper {
     border-radius: var(--fui-radius-md, $fui-radius-md);
@@ -244,28 +246,28 @@
   margin-block-start: layout.gap("sm");
 }
 
-.collapseButton {
-  @include button-reset;
-  @include action.base;
-  @include action.size("sm");
-
-  inline-size: 100%;
-  border-block-start: 0;
+// The collapse bar is a ghost Button (sm, fullWidth) squared into the frame;
+// the gradient lets the last visible line fade under it.
+.wrapper .collapseButton {
+  border-block-start: none;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
   background: linear-gradient(to bottom, transparent, var(--fui-code-bg, $fui-code-bg) 40%);
-  color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
-  cursor: pointer;
+  color: var(--fui-text-secondary, $fui-text-secondary);
 
-  &:hover {
-    color: var(--fui-code-tab-text-active, var(--fui-text-primary, #{$fui-text-primary}));
+  &:hover:not(:disabled) {
+    background: linear-gradient(to bottom, transparent, var(--fui-code-bg, $fui-code-bg) 40%);
+    color: var(--fui-text-primary, $fui-text-primary);
   }
 
   &:focus-visible {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
-      var(--fui-focus-ring-color, $fui-focus-ring-color);
     outline-offset: calc(-1 * var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}));
   }
 }
 
+.wrapper .collapseExpand {
+  justify-content: flex-end;
+}
+
 .tabbedPanel {
-  margin-block-start: 0;
+  margin-block-start: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }

package/src/components/CodeBlock/css-variables-theme.ts

@@ -0,0 +1,102 @@
+/**
+ * Shiki theme whose token colors are CSS variables from the kit palette.
+ *
+ * Bundled shiki themes (including the old `css-variables` theme) were removed
+ * from shiki 3; this object is the replacement. `codeToHtml` accepts it as the
+ * `theme` option and writes `color: var(--fui-code-token-*)` onto spans.
+ */
+export const FUI_CSS_VARIABLES_THEME = {
+  name: "css-variables",
+  type: "dark" as const,
+  colors: {
+    "editor.foreground": "var(--fui-code-text)",
+    "editor.background": "var(--fui-code-bg)",
+  },
+  tokenColors: [
+    { settings: { foreground: "var(--fui-code-text)" } },
+    {
+      scope: [
+        "comment",
+        "punctuation.definition.comment",
+        "string.comment",
+        "string.quoted.docstring.multi",
+      ],
+      settings: { foreground: "var(--fui-code-token-comment)" },
+    },
+    {
+      scope: [
+        "keyword",
+        "keyword.control",
+        "keyword.other",
+        "storage",
+        "storage.type",
+        "storage.modifier",
+        "storage.control.clojure",
+      ],
+      settings: { foreground: "var(--fui-code-token-keyword)" },
+    },
+    {
+      scope: [
+        "string",
+        "string.quoted",
+        "string.template",
+        "string.interpolated",
+        "string.regexp",
+        "string.unquoted.plain.out.yaml",
+        "markup.inline",
+      ],
+      settings: { foreground: "var(--fui-code-token-string)" },
+    },
+    {
+      scope: [
+        "constant.numeric",
+        "constant.language",
+        "constant.other",
+        "constant.character.format.placeholder",
+        "constant.other.placeholder",
+      ],
+      settings: { foreground: "var(--fui-code-token-number)" },
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "meta.function-call",
+        "meta.instance.constructor",
+        "entity.other.attribute-name",
+        "entity.name.tag",
+        "support.class.component",
+        "meta.tag",
+      ],
+      settings: { foreground: "var(--fui-code-token-function)" },
+    },
+    {
+      scope: [
+        "punctuation",
+        "punctuation.separator",
+        "punctuation.definition.arguments",
+        "punctuation.definition.dict",
+        "punctuation.definition.string",
+        "punctuation.definition.template-expression",
+        "meta.brace",
+        "keyword.operator",
+        "keyword.operator.accessor",
+      ],
+      settings: { foreground: "var(--fui-code-token-punctuation)" },
+    },
+    {
+      scope: [
+        "variable",
+        "variable.other",
+        "variable.parameter",
+        "variable.language",
+        "entity.name",
+        "support.variable",
+        "support.type",
+        "meta.property-name",
+        "meta.property-value",
+      ],
+      settings: { foreground: "var(--fui-code-token-variable)" },
+    },
+  ],
+};