feat(nx-dev): increase contrast of borders on light theme (#18294)

nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx

@@ -71,7 +71,7 @@ export function TableOfContents({
                 <Link
                   href={href}
                   className={cx(
-                    'block w-full border-l-4 border-slate-100 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700',
+                    'block w-full border-l-4 border-slate-200 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700',
                     {
                       'border-slate-500 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60':
                         activeId === item.id,

nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx

@@ -124,7 +124,7 @@ function EmptyList({
     <li className="relative flex px-2 py-2 transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800/60">
       <div className="flex-shrink-0 self-start rounded-lg border-slate-200 bg-slate-100 p-2 dark:border-slate-600 dark:bg-slate-700">
         <InformationCircleIcon
-          className="h-5 w-5 flex-shrink-0 rounded-md border-slate-100 bg-slate-50 dark:bg-slate-800 dark:bg-slate-700"
+          className="h-5 w-5 flex-shrink-0 rounded-md border-slate-200 bg-slate-50 dark:bg-slate-800 dark:bg-slate-700"
           role="img"
         />
       </div>

nx-dev/feature-search/src/lib/algolia-search.global.css

@@ -38,7 +38,7 @@ body .DocSearch-Container {
 .DocSearch-SearchBar {
   z-index: 1;
   padding: 0 1rem;
-  @apply relative flex flex-none items-center border-b border-slate-100 dark:border-slate-800;
+  @apply relative flex flex-none items-center border-b border-slate-200 dark:border-slate-800;
 }
 
 .DocSearch-Form {
@@ -74,7 +74,7 @@ body .DocSearch-Container {
 .DocSearch-Hit > a {
   position: relative;
   font-size: 0.875rem;
-  @apply border-b border-slate-100 dark:border-slate-800;
+  @apply border-b border-slate-200 dark:border-slate-800;
 }
 
 .DocSearch-Hit--Result {
@@ -132,7 +132,7 @@ body .DocSearch-Container {
   font-size: 0;
   border-radius: 0.375rem;
   padding: 0.25rem 0.375rem;
-  @apply border border-slate-900/5 hover:border-slate-900/10 dark:border-slate-100/10 dark:hover:border-slate-100/20;
+  @apply border border-slate-900/5 hover:border-slate-900/10 dark:border-slate-200/10 dark:hover:border-slate-200/20;
   width: 1.75rem;
   height: 1.5rem;
   /* esc icon */
@@ -255,7 +255,7 @@ body .DocSearch-Container {
 }
 
 .DocSearch-Hit:first-child > a {
-  @apply border-t border-slate-100 dark:border-slate-800;
+  @apply border-t border-slate-200 dark:border-slate-800;
 }
 
 .DocSearch-Hit--Result {
@@ -296,7 +296,7 @@ body .DocSearch-Container {
 }
 
 .DocSearch-Footer {
-  @apply flex flex-none justify-end border-t border-slate-100 py-4 px-6 dark:border-slate-800;
+  @apply flex flex-none justify-end border-t border-slate-200 py-4 px-6 dark:border-slate-800;
 }
 
 .DocSearch-Commands {
@@ -435,5 +435,5 @@ body .DocSearch-Container {
 }
 
 .DocSearch-Hit-action + .DocSearch-Hit-action {
-  @apply ml-3 border-l border-slate-100 pl-3 dark:border-slate-800;
+  @apply ml-3 border-l border-slate-200 pl-3 dark:border-slate-800;
 }

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -114,7 +114,7 @@ export function AlgoliaSearch({
         >
           <span
             style={{ opacity: browserDetected ? '1' : '0' }}
-            className="ml-auto block flex-none rounded-md border border-slate-100 bg-slate-50/60 px-1 py-0.5 text-xs font-semibold text-slate-400 transition hover:text-slate-500 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-500 dark:hover:text-slate-400"
+            className="ml-auto block flex-none rounded-md border border-slate-200 bg-slate-50/60 px-1 py-0.5 text-xs font-semibold text-slate-400 transition hover:text-slate-500 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-500 dark:hover:text-slate-400"
           >
             <span className="sr-only">Press </span>
             <kbd className="font-sans">

nx-dev/ui-community/src/lib/create-nx-plugin.tsx

@@ -86,7 +86,7 @@ export function CreateNxPlugin(): JSX.Element {
                   </Link>
                 </div>
                 <div className="flex-shrink-0">
-                  <div className="rounded-full border border-slate-100 bg-white p-2 dark:border-slate-700 dark:bg-slate-800">
+                  <div className="rounded-full border border-slate-200 bg-white p-2 dark:border-slate-700 dark:bg-slate-800">
                     <DocumentPlusIcon className="h-6 w-6 text-slate-600 dark:text-slate-300" />
                   </div>
                 </div>
@@ -113,7 +113,7 @@ export function CreateNxPlugin(): JSX.Element {
                   </Link>
                 </div>
                 <div className="flex-shrink-0">
-                  <div className="rounded-full border border-slate-100 bg-white p-2 dark:border-slate-700 dark:bg-slate-800">
+                  <div className="rounded-full border border-slate-200 bg-white p-2 dark:border-slate-700 dark:bg-slate-800">
                     <ShareIcon className="h-6 w-6 text-slate-600 dark:text-slate-300" />
                   </div>
                 </div>

nx-dev/ui-home/src/lib/nx-statistics.tsx

@@ -19,7 +19,7 @@ export function NxStatistics(): JSX.Element {
       </div>
       <div className="mt-10 bg-slate-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
         <div className="relative">
-          <div className="absolute inset-0 h-1/2 border-b border-slate-100 bg-white dark:border-black dark:bg-slate-900"></div>
+          <div className="absolute inset-0 h-1/2 border-b border-slate-200 bg-white dark:border-black dark:bg-slate-900"></div>
           <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="mx-auto max-w-4xl">
               <dl className="overflow-hidden rounded-lg bg-white shadow dark:bg-slate-900 sm:grid sm:grid-cols-3">

nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx

@@ -6,7 +6,7 @@ export function Loading() {
   return (
     <div className="flex h-[450px] w-full items-center justify-center">
       <div
-        className="spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-slate-100 border-r-slate-400 dark:border-slate-700 dark:border-r-slate-500"
+        className="spinner-border inline-block h-8 w-8 animate-spin rounded-full border-4 border-slate-200 border-r-slate-400 dark:border-slate-700 dark:border-r-slate-500"
         role="status"
       >
         <span className="sr-only">Loading...</span>

nx-dev/ui-markdoc/src/lib/tags/nx-cloud-section.component.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 export function NxCloudSection({ children }: { children: ReactNode }) {
   return (
     <div className="mt-16 mb-4 border-l-2 border-slate-200 pl-4 dark:border-slate-700">
-      <aside className="not-prose mb-4 flex flex-wrap items-center justify-between rounded-lg border border-slate-100 bg-slate-50/40 p-4 dark:border-slate-800 dark:bg-slate-800/60">
+      <aside className="not-prose mb-4 flex flex-wrap items-center justify-between rounded-lg border border-slate-200 bg-slate-50/40 p-4 dark:border-slate-800 dark:bg-slate-800/60">
         <div className="flex flex w-0 flex-1 items-center">
           <span className="flex">
             <svg

nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx

@@ -197,7 +197,7 @@ export function Persona({
   const ui = typeMap[type];
 
   return (
-    <aside className="relative flex overflow-hidden rounded-md border border-slate-100 bg-slate-50 p-4 transition hover:bg-slate-50/40 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
+    <section className="relative flex overflow-hidden rounded-md border border-slate-200 bg-slate-50 p-4 transition hover:bg-slate-50/40 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
       <div className="flex-shrink-0">{ui.image}</div>
       <div className="ml-4">
         {title && <h5 className="mt-0 text-base font-medium">{title}</h5>}
@@ -209,6 +209,6 @@ export function Persona({
           className="absolute inset-0"
         />
       </div>
-    </aside>
+    </section>
   );
 }

nx-dev/ui-markdoc/src/lib/tags/tabs.component.tsx

@@ -17,7 +17,7 @@ export function Tabs({
     <TabContext.Provider value={currentTab}>
       <section>
         <div className="not-prose ">
-          <div className="border-b border-slate-100 dark:border-slate-800">
+          <div className="border-b border-slate-200 dark:border-slate-800">
             <nav className="-mb-px flex space-x-8" aria-label="Tabs">
               {labels.map((label: string) => (
                 <button