Skip to content

Commit 230f14b

Browse files
Rel1cxRel1cx
committed
docs: minor improvements
1 parent 9cd8a49 commit 230f14b

File tree

6 files changed

+72
-44
lines changed

6 files changed

+72
-44
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[![Version](https://img.shields.io/npm/v/eslint-plugin-react-x?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/eslint-plugin-react-x)
66
[![Downloads](https://img.shields.io/npm/dt/eslint-plugin-react-x.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/eslint-plugin-react-x)
77

8-
A series of composable ESLint Plugins for libraries and frameworks that use React as a UI runtime.
8+
A set of composable linting rules for libraries and frameworks that use React as a UI runtime.
99

1010
## Features
1111

‎apps/website/app/(home)/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function HomePage() {
1717
<ESLintReact />
1818
<article className="prose max-w-none">
1919
<p className="text-center">
20-
A series of composable ESLint Plugins for libraries and frameworks that use React as a UI runtime.
20+
A set of composable linting rules for libraries and frameworks that use React as a UI runtime.
2121
</p>
2222
<h2>Features</h2>
2323
<Cards className="grid grid-cols-1 gap-4 md:grid-cols-4">

‎apps/website/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const ibm_plex_mono = IBM_Plex_Mono({
1616
});
1717

1818
export const metadata = {
19-
description: "A series of composable ESLint Plugins for libraries and frameworks that use React as a UI runtime.",
19+
description: "A set of composable linting rules for libraries and frameworks that use React as a UI runtime.",
2020
title: {
2121
default: "ESLint React",
2222
template: "%s | ESLint React",

‎apps/website/app/theme.css‎

Lines changed: 67 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,71 @@
1-
/************************
2-
CSS variable definition
3-
************************/
1+
/* =============================================================================
2+
Base Theme Variables - Light Mode (Default)
3+
========================================================================== */
44

5-
/* base theme variables */
65
@theme {
7-
/* background and foreground color */
6+
/* Primary UI Colors */
87
--color-fd-background: hsl(0, 0%, 100%);
98
--color-fd-foreground: hsl(240, 6%, 25%);
109

11-
/* card and popover */
10+
/* Component Colors */
1211
--color-fd-card: hsl(0, 0%, 100%);
1312
--color-fd-card-foreground: hsl(0, 0%, 3.9%);
1413
--color-fd-popover: hsl(0, 0%, 100%);
1514
--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
1615

17-
/* primary and secondary color */
16+
/* Action Colors */
1817
--color-fd-primary: hsl(210, 100%, 44%);
18+
/* Main action color */
1919
--color-fd-primary-foreground: hsl(0, 0%, 98%);
2020
--color-fd-secondary: hsl(240, 6%, 97%);
2121
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
2222

23-
/* border and ring color */
23+
/* Utility Colors */
2424
--color-fd-border: hsl(0, 0%, 89.8%);
2525
--color-fd-ring: hsl(0, 0%, 63.9%);
26-
27-
/* muted text color */
2826
--color-fd-muted: hsl(0, 0%, 96%);
2927
--color-fd-muted-foreground: hsl(240, 6%, 50%);
30-
31-
/* accent color */
3228
--color-fd-accent: hsl(0, 0%, 94.1%);
3329
--color-fd-accent-foreground: hsl(240, 6%, 25%);
3430
}
3531

36-
/* dark theme variables override */
32+
/* =============================================================================
33+
Dark Theme Variables
34+
========================================================================== */
35+
3736
.dark {
37+
/* Primary UI Colors */
3838
--color-fd-background: hsl(0, 0%, 7.04%);
3939
--color-fd-foreground: hsl(0, 0%, 92%);
4040

41+
/* Component Colors */
4142
--color-fd-card: hsl(0, 0%, 9.8%);
4243
--color-fd-card-foreground: hsl(0, 0%, 98%);
4344
--color-fd-popover: hsl(0, 0%, 9.8%);
4445
--color-fd-popover-foreground: hsl(0, 0%, 88%);
4546

47+
/* Action Colors */
4648
--color-fd-primary: hsl(0, 0%, 98%);
49+
/* Inverted in dark mode */
4750
--color-fd-primary-foreground: hsl(0, 0%, 9%);
4851
--color-fd-secondary: hsl(0, 0%, 12.9%);
4952
--color-fd-secondary-foreground: hsl(0, 0%, 98%);
5053

54+
/* Utility Colors */
5155
--color-fd-border: hsl(0, 0%, 14%);
5256
--color-fd-ring: hsl(0, 0%, 54.9%);
53-
5457
--color-fd-muted: hsl(0, 0%, 12.9%);
5558
--color-fd-muted-foreground: hsl(0, 0%, 60.9%);
56-
5759
--color-fd-accent: hsl(0, 0%, 16.9%);
5860
--color-fd-accent-foreground: hsl(0, 0%, 90%);
5961
}
6062

61-
/* font definition */
63+
/* =============================================================================
64+
Typography System
65+
========================================================================== */
66+
6267
:root {
68+
/* Main text font stack */
6369
--font-family-body:
6470
"SF Pro Text",
6571
"SF Pro Icons",
@@ -79,6 +85,7 @@
7985
"Segoe UI Symbol",
8086
"Noto Color Emoji";
8187

88+
/* UI elements font stack */
8289
--font-family-ui:
8390
system-ui,
8491
-apple-system,
@@ -96,6 +103,7 @@
96103
"Segoe UI Symbol",
97104
"Noto Color Emoji";
98105

106+
/* Monospace font stack for code */
99107
--font-family-mono:
100108
var(--font-ibm_plex_mono),
101109
ui-monospace,
@@ -105,48 +113,60 @@
105113
monospace;
106114
}
107115

108-
/******************
109-
global base style
110-
******************/
111-
:focus-visible {
112-
outline: none;
113-
}
114-
115-
:focus-visible:not([class*="outline-none"]) {
116-
outline: 2px solid var(--color-fd-primary);
117-
outline-offset: -2px;
118-
/* box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--color-fd-primary) 20%, transparent); */
119-
}
116+
/* =============================================================================
117+
Global Element Styling
118+
========================================================================== */
120119

120+
/* Base body styling */
121121
body {
122122
font-family: var(--font-family-body);
123123
}
124124

125+
/* Interactive elements */
125126
button {
126127
cursor: pointer;
127128
}
128129

130+
/* =============================================================================
131+
Focus States
132+
========================================================================== */
133+
134+
/* Remove default focus outline */
135+
:focus-visible {
136+
outline: none;
137+
}
138+
139+
/* Custom focus style for accessibility */
140+
:focus-visible:not([class*="outline-none"]) {
141+
outline: 2px solid var(--color-fd-primary);
142+
outline-offset: -2px;
143+
/* Commented out box-shadow alternative:
144+
box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--color-fd-primary) 20%, transparent); */
145+
}
146+
147+
/* Remove focus outline from tab panels */
129148
[role="tabpanel"]:focus-visible {
130149
outline: none;
131150
}
132151

133-
/***********************
134-
sidebar specific style
135-
***********************/
152+
/* =============================================================================
153+
Sidebar Navigation Styling
154+
========================================================================== */
155+
136156
#nd-docs-layout #nd-sidebar {
137157

138-
/* link active state */
158+
/* Active link styling */
139159
a[data-active] {
140160
font-weight: 400;
141161
}
142162

143-
/* margin adjustment */
163+
/* Section headings */
144164
p.mt-8.mb-2[style^="padding-inline-start:"] {
145165
margin-top: 28px;
146166
margin-bottom: 16px;
147167
}
148168

149-
/* interaction state */
169+
/* Navigation items */
150170
div[data-state],
151171
a[data-active] {
152172
margin-top: 4px;
@@ -155,50 +175,58 @@ button {
155175
}
156176
}
157177

158-
/* dark mode sidebar adjustment */
178+
/* Sidebar adjustments for dark mode */
159179
.dark #nd-sidebar {
160180
--color-fd-muted: hsl(0, 0%, 16%);
161181
--color-fd-secondary: hsl(0, 0%, 18%);
162182
--color-fd-muted-foreground: hsl(0, 0%, 72%);
163183
}
164184

165-
/*************************
166-
content typography style
167-
*************************/
185+
/* =============================================================================
186+
Content/Prose Styling
187+
========================================================================== */
188+
168189
.prose {
169190
font-family: var(--font-family-body);
170191
--tw-prose-links: var(--color-fd-primary);
192+
/* Link color */
171193

194+
/* Code block styling */
172195
.fd-codeblock.shiki {
173196
background-color: color-mix(in oklab, var(--color-fd-secondary) 25%, transparent);
174197
}
175198

199+
/* Remove outlines from code blocks */
176200
.fd-codeblock,
177201
[data-radix-scroll-area-viewport],
178202
[data-radix-scroll-area-viewport]>div {
179203
outline: none;
180204
}
181205

206+
/* Inline code styling */
182207
:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
183208
border: none;
184209
padding: .125rem .25em;
185210
font-size: 14px;
186211
}
187212

213+
/* Table styling */
188214
table {
189215
font-size: 1em;
190216

217+
/* Code inside tables */
191218
thead tr th code,
192219
tbody tr td code {
193220
white-space: nowrap;
194221
}
195222
}
196223
}
197224

198-
/* dark mode content adjustment */
225+
/* Dark mode adjustments for content */
199226
.dark .prose {
200227
--tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 80%, transparent);
201228

229+
/* Code text color in dark mode */
202230
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
203231
color: #ffffff;
204232
}

‎packages/plugins/eslint-plugin/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[![Version](https://img.shields.io/npm/v/eslint-plugin-react-x?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/eslint-plugin-react-x)
66
[![Downloads](https://img.shields.io/npm/dt/eslint-plugin-react-x.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/eslint-plugin-react-x)
77

8-
A series of composable ESLint Plugins for libraries and frameworks that use React as a UI runtime.
8+
A set of composable linting rules for libraries and frameworks that use React as a UI runtime.
99

1010
## Features
1111

‎packages/plugins/eslint-plugin/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@eslint-react/eslint-plugin",
33
"version": "1.40.4-beta.0",
4-
"description": "A series of composable ESLint Plugins for libraries and frameworks that use React as a UI runtime.",
4+
"description": "A set of composable linting rules for libraries and frameworks that use React as a UI runtime.",
55
"keywords": [
66
"react",
77
"eslint",

0 commit comments

Comments
 (0)