Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 25, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions nx-dev/feature-search/src/lib/algolia-search.global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 changes: 1 addition & 1 deletion nx-dev/feature-search/src/lib/algolia-search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions nx-dev/ui-community/src/lib/create-nx-plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion nx-dev/ui-home/src/lib/nx-statistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion nx-dev/ui-markdoc/src/lib/tags/nx-cloud-section.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
Expand All @@ -209,6 +209,6 @@ export function Persona({
className="absolute inset-0"
/>
</div>
</aside>
</section>
);
}
2 changes: 1 addition & 1 deletion nx-dev/ui-markdoc/src/lib/tags/tabs.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down