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

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

Browse Source
This commit is contained in:
Miroslav Jonaš 2023-07-25 10:34:51 +02:00 committed by GitHub
parent ee7880c32e
commit 7aee21afd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,

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

@ -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>

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

@ -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;
}

2
nx-dev/feature-search/src/lib/algolia-search.tsx
View File

@ -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">

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

@ -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>

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

@ -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">

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

@ -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>

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

@ -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

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

@ -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>
);
}

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

@ -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