miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(nxdev): change -gray- usage for -slate- (#13420)

Browse Source
This commit is contained in:
Benjamin Cabanes 2022-11-25 15:59:33 -05:00 committed by GitHub
parent a63a25d2e2
commit 4a5059bdae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
View File

@ -59,7 +59,7 @@ export function DocViewer({
target="_blank"
rel="noreferrer"
title="Report an issue on Github"
className="relative inline-flex items-center rounded-l-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 focus-within:ring-blue-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
className="relative inline-flex items-center rounded-l-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
>
Report an issue
</a>
@ -75,7 +75,7 @@ export function DocViewer({
target="_blank"
rel="noreferrer"
title="Edit this page on Github"
className="relative -ml-px inline-flex items-center rounded-r-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
className="relative -ml-px inline-flex items-center rounded-r-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800"
>
Edit this page
</a>

9
nx-dev/ui-commands/src/lib/inline-command.tsx
View File

@ -38,10 +38,13 @@ export function InlineCommand({
>
<button
type="button"
className="font-input-mono duration-180 flex w-full flex-none items-center justify-center space-x-2 rounded-md border border-gray-300 bg-white py-1 text-sm leading-6 text-gray-400 transition-colors hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-white sm:max-w-full sm:space-x-4 sm:px-3"
className="font-input-mono duration-180 flex w-full flex-none items-center justify-center space-x-2 rounded-md border border-slate-300 bg-white py-1 text-sm leading-6 text-slate-400 transition-colors hover:text-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-2 focus:ring-offset-white sm:max-w-full sm:space-x-4 sm:px-3"
>
<span className="flex items-center overflow-auto text-slate-800">
<span
className="hidden text-slate-500 sm:inline"
aria-hidden="true"
>
<span className="flex items-center overflow-auto text-gray-800">
<span className="hidden text-gray-500 sm:inline" aria-hidden="true">
$
</span>
<SyntaxHighlighter

4
nx-dev/ui-common/src/lib/nx-users-showcase.tsx
View File

@ -1,10 +1,10 @@
export function NxUsersShowcase(): JSX.Element {
return (
<div className="overflow-hidden py-4 px-4">
<div className="top-1 bottom-3 mx-auto w-60 text-center text-xs text-gray-400">
<div className="top-1 bottom-3 mx-auto w-60 text-center text-xs text-slate-400">
Powering leading companies like
</div>
<div id="sponsors-carousel" className="column flex w-full text-gray-400">
<div id="sponsors-carousel" className="column flex w-full text-slate-400">
<div className="flex justify-center">
<svg className="w-full" viewBox="0 0 160 88" fill="currentColor">
<path d="M90.9947 24.3067L98.6787 27.3333L90.9947 30.1947V34.2827L104.155 28.9693V25.7L90.9947 20.3867V24.3067Z" />

8
nx-dev/ui-common/src/lib/selector.tsx
View File

@ -18,11 +18,11 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
{({ open }) => (
<>
<div className="relative mt-1">
<Listbox.Button className="relative w-full cursor-pointer rounded border border-gray-200 bg-white py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm">
<Listbox.Button className="relative w-full cursor-pointer rounded border border-slate-200 bg-white py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm">
<span className="block truncate">{props.selected.label}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon
className="h-5 w-5 text-gray-500"
className="h-5 w-5 text-slate-500"
aria-hidden="true"
/>
</span>
@ -48,7 +48,7 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
`${
active
? 'bg-blue-nx-base text-white'
: 'text-gray-500'
: 'text-slate-500'
}
relative cursor-pointer select-none py-2 pl-10 pr-4`
}
@ -62,7 +62,7 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
{selected || item.value === props.selected.value ? (
<span
className={`${
active ? 'text-white' : 'text-gray-500'
active ? 'text-white' : 'text-slate-500'
}
absolute inset-y-0 left-0 flex items-center pl-3`}
>

6
nx-dev/ui-community/src/lib/connect-with-us.tsx
View File

@ -53,7 +53,7 @@ export function ConnectWithUs(): JSX.Element {
</p>
</a>
</div>
<div className="group relative rounded-lg border border-gray-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-red-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-red-900 dark:hover:bg-slate-800">
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-red-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-red-900 dark:hover:bg-slate-800">
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-red-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-red-900" />
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#FF0000] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
@ -86,7 +86,7 @@ export function ConnectWithUs(): JSX.Element {
</div>
</div>
<div className="space-y-6 md:w-1/2">
<div className="group relative rounded-lg border border-gray-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-blue-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-blue-900 dark:hover:bg-slate-800">
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-blue-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-blue-900 dark:hover:bg-slate-800">
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-blue-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-blue-800" />
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#1DA1F2] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
@ -116,7 +116,7 @@ export function ConnectWithUs(): JSX.Element {
</p>
</a>
</div>
<div className="group relative rounded-lg border border-gray-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-green-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-green-900 dark:hover:bg-slate-800">
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-green-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-green-900 dark:hover:bg-slate-800">
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-green-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-green-800" />
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-green-500 bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />

2
nx-dev/ui-community/src/lib/plugin-directory.tsx
View File

@ -21,7 +21,7 @@ export function PluginDirectory({
className="max-w-screen mx-auto p-4 lg:max-w-7xl lg:px-8"
>
<div className="flex w-full flex-col justify-between gap-8 md:flex-row ">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
<h2 className="text-3xl font-extrabold tracking-tight text-slate-900">
Nx Plugin Directory
</h2>
<div>

8
nx-dev/ui-conference/src/lib/conf-sponsors.tsx
View File

@ -86,10 +86,10 @@ export function ConfSponsors(): JSX.Element {
return result;
}
return (
<div className="border-t border-gray-600">
<div className="border-t border-slate-600">
{sponsorLevelList.map((key, levelIndex) => (
<div key={'sponsor-level--' + key}>
{/*<div className="border-b border-gray-600">*/}
{/*<div className="border-b border-slate-600">*/}
{/* <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">*/}
{/* <h4 className="my-8 px-5 text-lg font-input-mono">{key}</h4>*/}
{/* </div>*/}
@ -98,7 +98,7 @@ export function ConfSponsors(): JSX.Element {
<div
key={'speaker-row--' + rowIndex}
className={cx(
'border-b border-gray-600',
'border-b border-slate-600',
sponsorLevelList.length === levelIndex + 1 && 'border-b'
)}
>
@ -107,7 +107,7 @@ export function ConfSponsors(): JSX.Element {
{row.map((speaker) => (
<div
key={speaker.name}
className="border-gray-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
className="border-slate-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
>
<div className="h-full px-5">
<SponsorCard

2
nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
View File

@ -9,7 +9,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
return (
<article
id="extensible-and-integrated"
className="overflow-hidden bg-gray-50 pt-28 dark:bg-slate-800/40"
className="overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<header className="max-w-2xl">

4
nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
View File

@ -49,8 +49,8 @@ export function GraphTab(): JSX.Element {
</span>
<div className="-m-0.5 h-0.5 w-full bg-slate-200 dark:bg-slate-700" />
</div>
<div className="z-10 h-auto overflow-hidden rounded-lg border border-gray-200 shadow dark:border-slate-700 lg:min-h-[485px] lg:w-[690px]">
<div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-gray-200 px-3 dark:bg-slate-700">
<div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow dark:border-slate-700 lg:min-h-[485px] lg:w-[690px]">
<div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-slate-200 px-3 dark:bg-slate-700">
<span className="h-2 w-2 rounded-full bg-red-400"></span>
<span className="h-2 w-2 rounded-full bg-yellow-400"></span>
<span className="h-2 w-2 rounded-full bg-green-400"></span>

2
nx-dev/ui-home/src/lib/extensible-and-integrated/plugins-tab.tsx
View File

@ -195,7 +195,7 @@ export function PluginsTab(): JSX.Element {
<h3 className="text-xl font-medium leading-6 text-blue-500 dark:text-sky-500">
Plugins available for all stacks
</h3>
<p className="mt-4 text-gray-900 dark:text-slate-400">
<p className="mt-4 text-slate-900 dark:text-slate-400">
Official Nx plugins are created and maintained by the Nx team at
Nrwl. You can see all the available plugins when you run the{' '}
<code className="break-normal rounded-md border border-slate-200 bg-slate-50 px-2 py-1 font-mono text-xs text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">

6
nx-dev/ui-home/src/lib/extensible-and-integrated/vscode-integration-tab.tsx
View File

@ -46,7 +46,7 @@ export function VscodeIntegrationTab(): JSX.Element {
className="wrapper my-8 grid h-full items-center gap-16 md:grid-cols-2 lg:grid-cols-3"
>
<div className="lg:col-span-2">
<div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-gray-200 shadow-lg shadow dark:hidden dark:border-slate-700">
<div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:hidden dark:border-slate-700">
<Image
src="/images/nx-console/vscode-light.webp"
alt="Nx Console app screenshot"
@ -56,7 +56,7 @@ export function VscodeIntegrationTab(): JSX.Element {
height={800}
/>
</div>
<div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-gray-200 shadow-lg shadow dark:block dark:border-slate-700">
<div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:block dark:border-slate-700">
<Image
src="/images/nx-console/vscode-dark.webp"
alt="Nx Console app screenshot"
@ -96,7 +96,7 @@ export function VscodeIntegrationTab(): JSX.Element {
<h3 className="text-sm font-medium">{feature.name}</h3>
<Link href={feature.link}>
<span className="absolute inset-0" aria-hidden="true" />
<p className="mt-2 text-sm text-gray-500">
<p className="mt-2 text-sm text-slate-500">
{feature.description}
</p>
</Link>

2
nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
View File

@ -4,7 +4,7 @@ export function MigrationsAndCodeGeneration(): JSX.Element {
return (
<article
id="affected-and-code-generation"
className="relative overflow-hidden bg-gray-50 py-28 dark:bg-slate-800/40"
className="relative overflow-hidden bg-slate-50 py-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
<div>

2
nx-dev/ui-home/src/lib/monorepo-styles.tsx
View File

@ -4,7 +4,7 @@ export function MonorepoStyles(): JSX.Element {
return (
<article
id="monorepo-styles"
className="relative overflow-hidden bg-gray-50 pt-28 dark:bg-slate-800/40"
className="relative overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
<div>

2
nx-dev/ui-home/src/lib/newsletter.tsx
View File

@ -69,7 +69,7 @@ export function Newsletter(): JSX.Element {
];
return (
<div className="bg-gray-50 pt-28 dark:bg-slate-800/40">
<div className="bg-slate-50 pt-28 dark:bg-slate-800/40">
<div className="mx-auto max-w-7xl py-16 px-4 sm:px-6 lg:flex lg:items-center lg:py-24 lg:px-8">
<div className="lg:w-0 lg:flex-1">
<h1 className="text-lg font-semibold tracking-tight text-blue-500 dark:text-sky-500">

14
nx-dev/ui-home/src/lib/nx-is-fast.tsx
View File

@ -68,7 +68,7 @@ export function NxIsFast(): JSX.Element {
return (
<article
id="nx-is-fast"
className="relative bg-gray-50 py-28 dark:bg-slate-800/40"
className="relative bg-slate-50 py-28 dark:bg-slate-800/40"
>
<motion.div
ref={ref}
@ -145,7 +145,7 @@ export function NxIsFast(): JSX.Element {
aria-hidden="true"
/>
</div>
<p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
<p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
<span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
Never rebuild the same code twice
</p>
@ -171,7 +171,7 @@ export function NxIsFast(): JSX.Element {
aria-hidden="true"
/>
</div>
<p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
<p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
<span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
Distributed task execution (DTE)
</p>
@ -201,12 +201,12 @@ export function NxIsFast(): JSX.Element {
aria-hidden="true"
/>
</div>
<p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
<p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
<span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
Remote caching
</p>
</dt>
<dd className="mt-2 text-base text-gray-500 dark:text-slate-400">
<dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
<span className="font-medium">
Share your local computation cache
</span>{' '}
@ -229,12 +229,12 @@ export function NxIsFast(): JSX.Element {
aria-hidden="true"
/>
</div>
<p className="relative mt-4 text-base font-medium leading-6 text-gray-900 dark:text-slate-100">
<p className="relative mt-4 text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
<span className="absolute -left-4 h-full w-0.5 bg-blue-500 dark:bg-sky-500"></span>
Only run what changed
</p>
</dt>
<dd className="mt-2 text-base text-gray-500 dark:text-slate-400">
<dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
Nothing is faster than not running a task. Nx analyzes your
project graph and can{' '}
<span className="font-medium">

2
nx-dev/ui-home/src/lib/nx-statistics.tsx
View File

@ -15,7 +15,7 @@ export function NxStatistics(): JSX.Element {
</p>
</div>
</div>
<div className="mt-10 bg-gray-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
<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="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

2
nx-dev/ui-home/src/lib/testimonials.tsx
View File

@ -76,7 +76,7 @@ export function Testimonials(): JSX.Element {
return (
<article
id="next-generation"
className="relative bg-gray-50 pt-28 dark:bg-slate-800/40"
className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
<div className="md:col-span-2">

2
nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
View File

@ -2,7 +2,7 @@ export function WhyIsNxFast(): JSX.Element {
return (
<article
id="why-is-nx-fast"
className="relative bg-gray-50 pt-28 dark:bg-slate-800/40"
className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<header className="max-w-prose">

2
nx-dev/ui-sponsor-card/src/lib/sponsor-card.tsx
View File

@ -21,7 +21,7 @@ export function SponsorCard(data: Sponsor): JSX.Element {
</div>
<div className="md:col-span-2">
<h5 className="font-input-mono mb-3">{data.name}</h5>
<p className="text-gray-400">{data.description}</p>
<p className="text-slate-400">{data.description}</p>
</div>
</figure>
);

4
nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
View File

@ -74,9 +74,9 @@ export function ThemeSwitcher() {
className={cx(
'flex cursor-pointer items-center px-4 py-2 text-sm',
{
'bg-gray-100 dark:bg-slate-800/60': active,
'bg-slate-100 dark:bg-slate-800/60': active,
'text-blue-500 dark:text-sky-500': active || selected,
'text-gray-700 dark:text-slate-400': !active,
'text-slate-700 dark:text-slate-400': !active,
}
)}
>