Skip to content

Commit f149f2e

Browse files
SisyphusZhengSisyphusZheng
committed
Redesign www industrial standards system
1 parent 2f8dba0 commit f149f2e

18 files changed

Lines changed: 883 additions & 695 deletions

‎packages/ui/src/open-button.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@ sheet.replaceSync(`
4040
justify-content: center;
4141
gap: var(--size-2);
4242
font-family: var(--font-sans);
43-
font-weight: var(--font-weight-5);
43+
font-weight: var(--font-weight-8);
4444
text-decoration: none;
4545
cursor: pointer;
46-
border: var(--border-size-1) solid var(--gray-3);
46+
border: var(--border-size-1) solid var(--border);
4747
background: transparent;
48-
color: var(--gray-9);
49-
border-radius: var(--radius-2);
50-
transition: color var(--ease-3) var(--duration-2), border-color var(--ease-3) var(--duration-2), background var(--ease-3) var(--duration-2);
48+
color: var(--text-primary);
49+
border-radius: var(--btn-radius);
50+
transition: color var(--ease-3) var(--duration-2), border-color var(--ease-3) var(--duration-2), background var(--ease-3) var(--duration-2), transform var(--ease-3) var(--duration-2);
5151
white-space: nowrap;
5252
letter-spacing: 0;
5353
}
@@ -73,9 +73,9 @@ sheet.replaceSync(`
7373
7474
/* Variants */
7575
.btn--default:hover {
76-
color: var(--text-primary);
77-
border-color: var(--border-hover);
78-
background: var(--brand-subtle);
76+
color: var(--on-brand);
77+
border-color: var(--brand);
78+
background: var(--brand);
7979
}
8080
8181
.btn--primary {
@@ -87,6 +87,7 @@ sheet.replaceSync(`
8787
.btn--primary:hover {
8888
background: var(--brand-hover, var(--indigo-7));
8989
border-color: var(--brand-hover, var(--indigo-7));
90+
transform: translateX(var(--size-1));
9091
}
9192
9293
.btn--ghost {
@@ -99,13 +100,12 @@ sheet.replaceSync(`
99100
}
100101
101102
.btn--accent {
102-
background: linear-gradient(135deg, var(--brand), var(--brand-hover));
103+
background: var(--brand);
103104
color: var(--on-brand);
104105
border-color: transparent;
105106
}
106107
.btn--accent:hover {
107108
transform: translateY(-1px);
108-
box-shadow: var(--shadow-2);
109109
filter: brightness(1.05);
110110
}
111111
.btn--accent:active {

‎packages/ui/src/open-card.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,18 @@ sheet.replaceSync(`
3636
background: var(--bg-card);
3737
color: var(--text-primary);
3838
border: var(--border-size-1) solid var(--border);
39-
border-radius: var(--radius-2);
39+
border-radius: var(--card-radius);
4040
overflow: hidden;
41-
transition: box-shadow var(--ease-3) var(--duration-2), transform var(--ease-3) var(--duration-2);
41+
transition: border-color var(--ease-3) var(--duration-2), background var(--ease-3) var(--duration-2);
4242
}
4343
4444
:host([variant="elevated"]) {
45-
box-shadow: var(--shadow-1);
46-
border-color: transparent;
45+
box-shadow: none;
46+
border-color: var(--border);
4747
}
4848
4949
:host([variant="elevated"]:hover) {
50-
box-shadow: var(--shadow-2);
51-
transform: translateY(-2px);
50+
border-color: var(--brand);
5251
}
5352
5453
:host([variant="borderless"]) {

‎packages/ui/src/open-layout.tsx‎

Lines changed: 52 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,6 @@ sheet.replaceSync(`
178178
top: 0;
179179
z-index: 100;
180180
background: var(--nav-bg);
181-
backdrop-filter: blur(14px);
182-
-webkit-backdrop-filter: blur(14px);
183181
border-bottom: var(--border-size-1) solid var(--border);
184182
transition: background 0.2s ease, border-color 0.2s ease;
185183
}
@@ -188,14 +186,36 @@ sheet.replaceSync(`
188186
border-bottom-color: var(--border-hover);
189187
}
190188
189+
.app-layout[home] .app-header {
190+
background: var(--brand);
191+
border-bottom-color: color-mix(in srgb, var(--on-brand) 28%, transparent);
192+
}
193+
194+
.app-layout[home] .app-header.scrolled {
195+
background: var(--brand);
196+
border-bottom-color: color-mix(in srgb, var(--on-brand) 42%, transparent);
197+
}
198+
199+
.app-layout[home] .logo,
200+
.app-layout[home] .header-nav a,
201+
.app-layout[home] .logo-sub,
202+
.app-layout[home] .mobile-menu-btn {
203+
color: var(--on-brand);
204+
}
205+
206+
.app-layout[home] .logo-mark::before,
207+
.app-layout[home] .logo-mark::after {
208+
border-color: var(--on-brand);
209+
}
210+
191211
.header-inner {
192-
max-width: 1240px;
212+
max-width: none;
193213
margin: 0 auto;
194-
padding: 0 var(--size-8);
214+
padding: 0 var(--size-5);
195215
display: flex;
196216
align-items: center;
197-
min-height: 64px;
198-
gap: var(--size-4);
217+
min-height: var(--nav-height);
218+
gap: var(--size-6);
199219
}
200220
201221
.mobile-tab-bar { display: none; }
@@ -224,52 +244,49 @@ sheet.replaceSync(`
224244
display: inline-flex;
225245
align-items: center;
226246
gap: var(--size-3);
227-
font-size: var(--font-size-1);
228-
font-weight: var(--font-weight-8);
247+
font-size: var(--font-size-2);
248+
font-weight: var(--font-weight-9);
229249
color: var(--text-primary);
230250
text-decoration: none;
231251
letter-spacing: 0;
232252
white-space: nowrap;
233253
}
234254
235255
.logo:hover .logo-mark {
236-
transform: translateY(calc(var(--size-1) * -1));
237-
border-color: var(--brand-light);
256+
transform: rotate(8deg);
238257
}
239258
240259
.logo-mark {
241260
position: relative;
242261
display: inline-grid;
243262
place-items: center;
244-
width: var(--size-8);
245-
height: var(--size-8);
263+
width: var(--size-9);
264+
height: var(--size-9);
246265
overflow: hidden;
247-
border: var(--border-size-1) solid var(--border);
248-
border-radius: var(--radius-2);
249-
background:
250-
linear-gradient(135deg, color-mix(in srgb, var(--brand) 72%, var(--bg-code)), color-mix(in srgb, var(--success) 42%, var(--bg-code))),
251-
var(--bg-code);
252-
box-shadow: inset 0 0 0 var(--border-size-1) var(--edge-highlight);
266+
border: var(--size-2) solid currentColor;
267+
border-radius: var(--radius-round);
268+
background: transparent;
253269
flex: 0 0 auto;
254-
transition: transform var(--duration-2) var(--ease-2), border-color var(--duration-2) var(--ease-2);
270+
transition: transform var(--duration-2) var(--ease-2);
255271
}
256272
257273
.logo-mark::before {
258274
content: "";
259275
position: absolute;
260-
inset: var(--size-2);
261-
border-block: var(--border-size-1) solid color-mix(in srgb, var(--on-brand) 72%, transparent);
262-
transform: skewX(-18deg);
276+
inset-inline-end: calc(var(--size-1) * -1);
277+
inset-block-start: calc(var(--size-1) * -1);
278+
width: var(--size-4);
279+
height: var(--size-4);
280+
border-block-start: var(--size-2) solid var(--brand);
281+
border-inline-end: var(--size-2) solid var(--brand);
263282
}
264283
265284
.logo-mark::after {
266-
content: "<>";
285+
content: "";
267286
position: relative;
268-
color: var(--on-brand);
269-
font-family: var(--font-mono);
270-
font-size: var(--font-size-00);
271-
font-weight: var(--font-weight-8);
272-
letter-spacing: 0;
287+
width: var(--size-4);
288+
height: var(--size-2);
289+
border-block: var(--border-size-2) solid var(--brand);
273290
}
274291
275292
.logo-word {
@@ -281,19 +298,23 @@ sheet.replaceSync(`
281298
font-size: 0.75rem;
282299
color: var(--text-muted);
283300
margin-left: var(--size-2);
301+
font-family: var(--font-mono);
302+
font-weight: var(--font-weight-8);
303+
text-transform: uppercase;
284304
}
285305
286306
.header-nav {
287307
display: flex;
288-
gap: var(--size-4);
308+
gap: var(--size-6);
289309
flex: 1;
310+
justify-content: center;
290311
}
291312
.header-nav a {
292313
color: var(--nav-link-color);
293314
text-decoration: none;
294315
font-size: var(--nav-link-size);
295-
font-weight: 560;
296-
padding: 6px 0;
316+
font-weight: var(--font-weight-8);
317+
padding: var(--size-2) 0;
297318
transition: color 0.15s ease;
298319
}
299320
.header-nav a:hover {

‎packages/ui/src/open-props-tokens.ts‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function createTokenSheet(): StyleSheetLike {
3838
/* ═══════════════════════════════════════════════
3939
Border radius
4040
═══════════════════════════════════════════════ */
41-
--radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px;
41+
--radius-1: 0px; --radius-2: 0px; --radius-3: 0px; --radius-4: 0px;
4242
--radius-round: 9999px;
4343
4444
/* ═══════════════════════════════════════════════
@@ -54,13 +54,13 @@ function createTokenSheet(): StyleSheetLike {
5454
/* ═══════════════════════════════════════════════
5555
Typography
5656
═══════════════════════════════════════════════ */
57-
--font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
57+
--font-sans: Inter, Arial, Helvetica, system-ui, sans-serif;
5858
--font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
5959
--font-size-00: 0.75rem; --font-size-0: 0.875rem;
6060
--font-size-1: 1rem; --font-size-2: 1.25rem;
6161
--font-size-3: 1.5rem; --font-size-4: 2rem;
62-
--font-size-5: 2.5rem; --font-size-6: 3rem;
63-
--font-size-7: 3.5rem; --font-size-8: 4rem;
62+
--font-size-5: 2.5rem; --font-size-6: 3.25rem;
63+
--font-size-7: 4.5rem; --font-size-8: 5rem;
6464
--font-weight-4: 400; --font-weight-5: 500;
6565
--font-weight-6: 600; --font-weight-7: 700;
6666
--font-weight-8: 800; --font-weight-9: 900;
@@ -85,11 +85,11 @@ function createTokenSheet(): StyleSheetLike {
8585
/* ═══════════════════════════════════════════════
8686
Brand tokens
8787
═══════════════════════════════════════════════ */
88-
--brand: #4263eb; --brand-hover: #3b5bdb;
89-
--brand-light: #5c7cfa; --brand-pale: #8b7cf6;
90-
--brand-deep: #26215c; --brand-subtle: rgba(66, 99, 235, 0.1);
91-
--brand-glow: rgba(66, 99, 235, 0.15);
92-
--on-brand: #ffffff;
88+
--brand: var(--red-6); --brand-hover: var(--red-7);
89+
--brand-light: var(--red-5); --brand-pale: var(--red-3);
90+
--brand-deep: var(--red-12); --brand-subtle: color-mix(in srgb, var(--brand) 12%, transparent);
91+
--brand-glow: color-mix(in srgb, var(--brand) 18%, transparent);
92+
--on-brand: var(--gray-12);
9393
--site-container: 1120px;
9494
--site-container-wide: 1240px;
9595
--site-container-reading: 760px;
@@ -103,7 +103,7 @@ function createTokenSheet(): StyleSheetLike {
103103
--btn-radius: var(--radius-1);
104104
--btn-font-size: var(--font-size-0); --btn-font-weight: var(--font-weight-6);
105105
--btn-text-case: none;
106-
--card-padding: var(--size-6); --card-radius: var(--radius-3);
106+
--card-padding: var(--size-6); --card-radius: var(--radius-1);
107107
--badge-padding-x: var(--size-2); --badge-padding-y: 2px;
108108
--badge-radius: var(--radius-round); --badge-font-size: var(--font-size-00);
109109
--alert-padding: var(--size-4); --alert-radius: var(--radius-2);
@@ -149,6 +149,11 @@ function createTokenSheet(): StyleSheetLike {
149149
--info: #2563eb;
150150
--info-subtle: rgba(37,99,235,0.1);
151151
--overlay: rgba(0,0,0,0.4);
152+
--nav-bg: var(--bg-base);
153+
--nav-height: 64px;
154+
--nav-link-color: var(--text-primary);
155+
--nav-link-hover: var(--brand);
156+
--nav-link-size: var(--font-size-0);
152157
153158
/* ═══════════════════════════════════════════════
154159
Open Props Color Scales (light mode)
@@ -202,11 +207,11 @@ function createTokenSheet(): StyleSheetLike {
202207
--gray-6: #868e96; --gray-7: #adb5bd; --gray-8: #ced4da;
203208
--gray-9: #dee2e6; --gray-10: #e9ecef; --gray-11: #f1f3f5;
204209
--gray-12: #f8f9fa;
205-
--brand: #4263eb; --brand-hover: #3b5bdb;
206-
--brand-light: #5c7cfa; --brand-deep: #3d3580;
207-
--brand-subtle: rgba(66,99,235,.15);
208-
--brand-glow: rgba(66,99,235,.2);
209-
--on-brand: #ffffff;
210+
--brand: var(--red-6); --brand-hover: var(--red-7);
211+
--brand-light: var(--red-5); --brand-deep: var(--red-12);
212+
--brand-subtle: color-mix(in srgb, var(--brand) 16%, transparent);
213+
--brand-glow: color-mix(in srgb, var(--brand) 22%, transparent);
214+
--on-brand: var(--gray-0);
210215
--text-primary: var(--gray-10);
211216
--text-secondary: var(--gray-7);
212217
--text-muted: var(--gray-6);
@@ -229,6 +234,9 @@ function createTokenSheet(): StyleSheetLike {
229234
--info: #60a5fa;
230235
--info-subtle: rgba(96,165,250,.1);
231236
--overlay: rgba(0,0,0,.6);
237+
--nav-bg: var(--bg-base);
238+
--nav-link-color: var(--text-primary);
239+
--nav-link-hover: var(--brand-light);
232240
233241
/* Open Props Color Scales (dark mode inversion) */
234242
--indigo-0: #11184a; --indigo-1: #1e266d; --indigo-2: #2b3990;

‎www/app/islands/home-console.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,8 @@ styles.replaceSync(`
2626
min-height: 100%;
2727
overflow: hidden;
2828
border: var(--border-size-1) solid var(--code-border);
29-
border-radius: var(--radius-2);
30-
background:
31-
linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent),
32-
color-mix(in srgb, var(--bg-code) 88%, var(--code-border));
29+
border-radius: var(--radius-1);
30+
background: var(--bg-code);
3331
color: var(--code-text);
3432
}
3533
@@ -45,7 +43,7 @@ styles.replaceSync(`
4543
4644
.rp-title {
4745
overflow: hidden;
48-
color: var(--brand-light);
46+
color: var(--brand);
4947
font-family: var(--font-mono);
5048
font-size: var(--font-size-00);
5149
font-weight: var(--font-weight-8);
@@ -77,7 +75,7 @@ styles.replaceSync(`
7775
height: var(--size-8);
7876
padding: 0;
7977
border: var(--border-size-1) solid var(--code-border);
80-
border-radius: var(--radius-2);
78+
border-radius: var(--radius-1);
8179
background: color-mix(in srgb, var(--bg-code) 78%, var(--code-border));
8280
color: var(--code-text);
8381
cursor: pointer;
@@ -90,13 +88,14 @@ styles.replaceSync(`
9088
}
9189
9290
.counter-btn:hover {
93-
transform: translateY(calc(var(--size-1) * -1));
94-
border-color: var(--brand-light);
95-
background: color-mix(in srgb, var(--brand) 20%, var(--bg-code));
91+
transform: translateX(var(--size-1));
92+
border-color: var(--brand);
93+
background: var(--brand);
94+
color: var(--on-brand);
9695
}
9796
9897
.counter-btn:focus-visible {
99-
outline: var(--border-size-2) solid var(--brand-light);
98+
outline: var(--border-size-2) solid var(--brand);
10099
outline-offset: var(--size-1);
101100
}
102101
@@ -120,7 +119,7 @@ styles.replaceSync(`
120119
}
121120
122121
.counter-caption b {
123-
color: var(--success);
122+
color: var(--brand);
124123
font-weight: var(--font-weight-8);
125124
}
126125

0 commit comments

Comments
 (0)