@dialpad/dialtone-css 8.80.0-next.4 → 8.80.0-next.5

package/lib/build/js/dialtone_migrate_scrollbar_always/index.mjs

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+
+/**
+ * @fileoverview Migration script for v-dt-scrollbar :never → :always rename.
+ *
+ * DLT-3158  The `:never` directive argument was renamed to `:always` to reflect
+ *           its actual meaning (always show the scrollbar, never auto-hide it).
+ *           The `DtBox` `scrollbar="never"` prop value is similarly renamed to
+ *           `scrollbar="always"`.
+ *
+ * This script:
+ *   - Replaces `v-dt-scrollbar:never` with `v-dt-scrollbar:always` in .vue and .html files.
+ *   - Replaces `scrollbar="never"` with `scrollbar="always"` (DtBox prop) in .vue files.
+ *   - Replaces `:scrollbar="'never'"` and `scrollbar='never'` variants in .vue files.
+ *
+ * Usage:
+ *   npx dialtone-migrate-scrollbar-always [options]
+ *
+ * Options:
+ *   --cwd <path>   Working directory (default: cwd)
+ *   --dry-run      Show changes without applying them
+ *   --yes          Apply all changes without prompting
+ *   --help         Show help
+ */
+
+import fs from 'fs/promises';
+import { realpathSync } from 'node:fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'node:url';
+
+// ---------------------------------------------------------------------------
+// Transform
+// ---------------------------------------------------------------------------
+
+/**
+ * Apply all renames to a single file's content.
+ * Returns the transformed string (may be identical to input if no matches).
+ */
+export function transformContent (content) {
+  return content
+    // v-dt-scrollbar:never → v-dt-scrollbar:always
+    .replace(/v-dt-scrollbar:never\b/g, 'v-dt-scrollbar:always')
+    // DtBox scrollbar prop: match the entire opening <dt-box>/<DtBox> tag, rewrite only within it
+    .replace(/<(dt-box|DtBox)\b[\s\S]*?>/g, tag =>
+      tag
+        // scrollbar="never" → scrollbar="always" (unbound prop only; negative lookbehind excludes :scrollbar="never")
+        .replace(/(?<!:)\bscrollbar="never"/g, 'scrollbar="always"')
+        // scrollbar='never' → scrollbar='always' (unbound prop only)
+        .replace(/(?<!:)\bscrollbar='never'/g, 'scrollbar=\'always\'')
+        // :scrollbar="'never'" → :scrollbar="'always'"
+        .replace(/:scrollbar="'never'"/g, ':scrollbar="\'always\'"')
+        // :scrollbar="\"never\"" → :scrollbar="\"always\""
+        .replace(/:scrollbar='"never"'/g, ':scrollbar=\'"always"\''),
+    );
+}
+
+// ---------------------------------------------------------------------------
+// File walker
+// ---------------------------------------------------------------------------
+
+function isIgnoredPath (fullPath, ignore) {
+  const segments = fullPath.split(path.sep);
+  return ignore.some(ig => {
+    if (ig.includes('/')) {
+      const parts = ig.split('/');
+      for (let i = 0; i + parts.length <= segments.length; i++) {
+        if (parts.every((p, j) => segments[i + j] === p)) return true;
+      }
+      return false;
+    }
+    return segments.includes(ig);
+  });
+}
+
+async function findFiles (dir, extensions, ignore = []) {
+  const results = [];
+  async function walk (currentDir) {
+    let entries;
+    try {
+      entries = await fs.readdir(currentDir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const fullPath = path.join(currentDir, entry.name);
+      if (isIgnoredPath(fullPath, ignore)) continue;
+      if (entry.isDirectory()) {
+        await walk(fullPath);
+      } else if (entry.isFile() && extensions.some(ext => entry.name.endsWith(ext))) {
+        results.push(fullPath);
+      }
+    }
+  }
+  await walk(dir);
+  return results;
+}
+
+// ---------------------------------------------------------------------------
+// CLI plumbing
+// ---------------------------------------------------------------------------
+
+function printHelp () {
+  console.log(`
+Usage: npx dialtone-migrate-scrollbar-always [options]
+
+Renames the v-dt-scrollbar ":never" directive argument to ":always" (DLT-3158).
+Also renames the DtBox scrollbar="never" prop value to scrollbar="always".
+
+Options:
+  --cwd <path>   Working directory (default: cwd)
+  --dry-run      Show changes without applying them
+  --yes          Apply all changes without prompting
+  --help         Show help
+
+Examples:
+  npx dialtone-migrate-scrollbar-always
+  npx dialtone-migrate-scrollbar-always --dry-run
+  npx dialtone-migrate-scrollbar-always --cwd ./src
+  npx dialtone-migrate-scrollbar-always --yes
+`);
+}
+
+function parseArgs (args) {
+  const cwdIndex = args.indexOf('--cwd');
+  return {
+    help: args.includes('--help'),
+    dryRun: args.includes('--dry-run'),
+    autoYes: args.includes('--yes'),
+    cwd: cwdIndex !== -1 && args[cwdIndex + 1]
+      ? path.resolve(args[cwdIndex + 1])
+      : process.cwd(),
+  };
+}
+
+async function prompt (question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(resolve => {
+    rl.question(question, answer => {
+      rl.close();
+      resolve(answer.trim().toLowerCase());
+    });
+  });
+}
+
+async function scanFiles (cwd) {
+  const extensions = ['.vue', '.html'];
+  const ignore = ['node_modules', 'dist', '.git', '.vuepress/public', '.vuepress/.temp', '.vuepress/.cache', 'storybook-static'];
+  const files = await findFiles(cwd, extensions, ignore);
+
+  const changes = [];
+
+  for (const file of files) {
+    const content = await fs.readFile(file, 'utf8');
+    const transformed = transformContent(content);
+    if (transformed !== content) {
+      changes.push({ file, content, transformed });
+    }
+  }
+
+  return changes;
+}
+
+async function applyChanges (changes, autoYes) {
+  if (!autoYes) {
+    const answer = await prompt('\nApply changes? (y/N) ');
+    if (answer !== 'y' && answer !== 'yes') {
+      console.log('Cancelled.');
+      return false;
+    }
+  }
+  for (const { file, transformed } of changes) {
+    await fs.writeFile(file, transformed, 'utf8');
+  }
+  return true;
+}
+
+function printChangeSummary (changes, cwd) {
+  console.log(`\nFound changes in ${changes.length} file(s):\n`);
+  for (const { file } of changes) {
+    console.log(`  ${path.relative(cwd, file)}`);
+  }
+}
+
+async function main () {
+  const opts = parseArgs(process.argv.slice(2));
+  if (opts.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  console.log(`\nScanning ${opts.cwd} for v-dt-scrollbar:never and scrollbar="never" usages...`);
+
+  const changes = await scanFiles(opts.cwd);
+
+  if (changes.length === 0) {
+    console.log('No usages found. Nothing to migrate.');
+    process.exit(0);
+  }
+
+  printChangeSummary(changes, opts.cwd);
+
+  if (opts.dryRun) {
+    console.log('\n--dry-run: No files were modified.');
+    process.exit(0);
+  }
+
+  const applied = await applyChanges(changes, opts.autoYes);
+  if (applied) console.log(`\nMigrated ${changes.length} file(s).\n`);
+}
+
+const isDirectRun = (() => {
+  try {
+    return realpathSync(process.argv[1]) === fileURLToPath(import.meta.url);
+  } catch {
+    return false;
+  }
+})();
+
+if (isDirectRun) {
+  main().catch(err => {
+    console.error(err);
+    process.exit(1);
+  });
+}

package/lib/build/less/components/box.less

@@ -99,6 +99,7 @@
   });
 }
 
+
 //  ============================================================================
 //  $   VALUE LISTS
 //  ----------------------------------------------------------------------------
@@ -140,6 +141,7 @@
   // Padding cascade: specific → axis → shorthand → 0
   padding-block:  var(--box-pbs, var(--box-pbl, var(--box-p, 0))) var(--box-pbe, var(--box-pbl, var(--box-p, 0)));
   padding-inline: var(--box-pis, var(--box-pi,  var(--box-p, 0))) var(--box-pie, var(--box-pi,  var(--box-p, 0)));
+
 }
 
 //  ============================================================================

package/lib/build/less/components/link.less

@@ -52,7 +52,6 @@
     }
 
     &:active {
-        // --link-text-decoration: underline;
         color: var(--link-color-default);
     }
 
@@ -191,36 +190,32 @@
     &--inverted-mention {
         --link-color-default: var(--dt-color-link-primary-inverted);
         --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
-        --link-text-decoration: none;
         --link-padding: 0 var(--dt-spacing-25);
-        --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.3);
+        --link-background-color: var(--dt-color-link-mention-inverted-background);
 
         line-height: var(--dt-font-line-height-200);
-        border-radius: var(--dt-size-radius-200);
+        border-radius: var(--dt-size-radius-300);
+
+        &:hover {
+            --link-background-color: var(--dt-color-link-mention-inverted-background-hover);
+        }
     }
 
     //  $$  MENTION
     //  ----------------------------------------------------------------------------
-    // Styling specific to mentions such as @brad.paugh. The underline highlighting
-    // is reversed compared to a regular link, and it has a light background.
+    // Styling for @mention links (e.g. @brad.paugh). Displays as a pill-shaped
+    // background using brand surface tokens. Background changes on hover.
     &--mention {
-        --link-text-decoration: none;
-        --link-padding: 0 var(--dt-spacing-25);
-        --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.1);
+        --link-color-default: var(--dt-color-link-mention);
+        --link-color-default-hover: var(--dt-color-link-mention-hover);
+        --link-padding: var(--dt-spacing-1) var(--dt-spacing-25);
+        --link-background-color: var(--dt-color-link-mention-background);
 
         line-height: var(--dt-font-line-height-200);
-        border-radius: var(--dt-size-radius-200);
+        border-radius: var(--dt-size-radius-300);
 
         &:hover {
-            --link-text-decoration: underline;
-            --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.25);
-
-            text-underline-offset: var(--dt-spacing-25);
-            text-decoration-thickness: var(--dt-size-border-100);
-        }
-
-        &:active {
-            --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.1);
+            --link-background-color: var(--dt-color-link-mention-background-hover);
         }
     }
 }

package/lib/build/less/components/notice.less

@@ -114,7 +114,7 @@
 .d-notice.d-notice--important,
 .d-banner.d-banner--important,
 .d-toast.d-toast--important {
-    --notice-color-background: var(--dt-color-surface-strong);
+    --notice-color-background: var(--dt-color-surface-primary-inverted);
     --notice-color-text: var(--dt-color-foreground-primary-inverted);
     --notice-color-icon: var(--notice-color-text);
     --notice-color-shadow: transparent;

package/lib/build/less/components/scrollbar.less

@@ -30,6 +30,28 @@
         opacity: var(--dt-opacity-1100);
       }
     }
+
+    // Track offsets via CSS custom properties set by v-dt-scrollbar directive.
+    // The base rules (0,3,0) beat OS's non-cornerless rules (0,1,0).
+    // The cornerless overrides (0,4,0) beat OS's cornerless rules (0,3,0) which reset
+    // top/bottom on vertical and left/right on horizontal — regardless of import order.
+    &.os-scrollbar-vertical {
+      inset-block-start: var(--dt-scrollbar-offset-block-start, 0);
+      inset-inline-end: var(--dt-scrollbar-offset-inline-end, 0);
+    }
+
+    &.os-scrollbar-vertical.os-scrollbar-cornerless {
+      inset-block: var(--dt-scrollbar-offset-block-start, 0) var(--dt-scrollbar-offset-block-end, 0);
+    }
+
+    &.os-scrollbar-horizontal {
+      inset-block-end: var(--dt-scrollbar-offset-block-end, 0);
+      inset-inline-start: var(--dt-scrollbar-offset-inline-start, 0);
+    }
+
+    &.os-scrollbar-horizontal.os-scrollbar-cornerless {
+      inset-inline: var(--dt-scrollbar-offset-inline-start, 0) var(--dt-scrollbar-offset-inline-end, 0);
+    }
   }
 }
 

package/lib/build/less/dialtone.less

@@ -133,3 +133,10 @@
     }
   }
 }
+
+@layer dialtone.utilities {
+  /*
+  [data-dt-brand="prota-deuter"]                      { --dt-color-surface-info-opaque: oklch(from var(--dt-color-blue-300) l c h / 0.5) !important; }
+  [data-dt-brand="prota-deuter"][data-dt-mode="dark"] { --dt-color-surface-info-opaque: oklch(from var(--dt-color-blue-300) l c h / 0.6) !important; }
+  */
+}