dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refine secondary rail icon animations
Build and Deploy Gateway / build-and-push (push) Successful in 35s
Details
Build and Deploy Gateway / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
dokril
2026-08-17 17:07:25 +03:00
parent 286a89051a
commit 0a0a932057
8 changed files with 131 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/versions.ts
+2 -2
View File
@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({ export const HARBOR_VERSIONS = Object.freeze({
macClient: '0.26.3', macClient: '0.26.4',
gatewayClient: '0.27.3', gatewayClient: '0.27.4',
gatewayBackend: '0.27.0', gatewayBackend: '0.27.0',
}); });
src/web/features/devices/DevicesFeature.tsx
+4 -3
View File
@@ -245,11 +245,12 @@ export function DevicesToggle({
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<g className="client-rail-device-monitor"> <g className="client-rail-device-monitor">
<rect x="2.5" y="4.5" width="9" height="10.5" rx="1.5" /> <rect x="2.5" y="4.5" width="9" height="10.5" rx="1.5" />
<path d="M5 19h4M7 15v4" /> <path d="M5 19h5.5M7 15v4" />
</g> </g>
<rect className="client-rail-device-phone" x="16.5" y="7" width="5" height="9" rx="1.3" /> <rect className="client-rail-device-phone" x="16.5" y="7" width="5" height="9" rx="1.3" />
<path className="client-rail-device-bridge" d="M11.5 11.5h5" /> <path className="client-rail-device-link" d="M19 16v3h-5.5" />
<path className="client-rail-device-packet" pathLength="1" d="M11.5 11.5h5" /> <path className="client-rail-device-bridge" d="M10.5 19h3" />
<path className="client-rail-device-packet" pathLength="1" d="M7 19h12" />
</svg> </svg>
</RailAction>; </RailAction>;
} }
src/web/features/diagnostics/DiagnosticsFeature.tsx
+7 -5
View File
@@ -60,11 +60,13 @@ export function DiagnosticsToggle({
onClick={onToggle} onClick={onToggle}
> >
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<g className="client-rail-diagnostics-glass"> <path className="client-rail-diagnostics-trace" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
<circle cx="9.5" cy="9.5" r="6.5" /> <path className="client-rail-diagnostics-scan" pathLength="1" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
<path d="m14.2 14.2 6.3 6.3" /> <g className="client-rail-diagnostics-position">
<path className="client-rail-diagnostics-trace" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" /> <g className="client-rail-diagnostics-glass">
<path className="client-rail-diagnostics-scan" pathLength="1" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" /> <circle cx="9.5" cy="9.5" r="6.5" />
<path d="m14.2 14.2 6.3 6.3" />
</g>
</g> </g>
</svg> </svg>
</RailAction>; </RailAction>;
src/web/features/instructions/InstructionsFeature.tsx
+7 -3
View File
@@ -249,9 +249,13 @@ export function InstructionsToggle({
onClick={onToggle} onClick={onToggle}
> >
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<circle className="client-rail-info-ring" cx="12" cy="12" r="8.5" pathLength="1" /> <g className="client-rail-book-page-position is-left">
<circle className="client-rail-info-sweep" cx="12" cy="12" r="8.5" pathLength="1" /> <path className="client-rail-book-page is-left" d="M12 7.5C10.2 6.1 7.7 5.7 5 6v11c2.8-.3 5.2.3 7 1.7z" />
<path className="client-rail-info-mark" d="M12 11v5M12 8h.01" /> </g>
<g className="client-rail-book-page-position is-right">
<path className="client-rail-book-page is-right" d="M12 7.5c1.8-1.4 4.3-1.8 7-1.5v11c-2.8-.3-5.2.3-7 1.7z" />
</g>
<path className="client-rail-book-spine" d="M12 7.5v11.2" />
</svg> </svg>
</RailAction>; </RailAction>;
} }
src/web/features/routing/RoutingFeature.tsx
+6 -4
View File
@@ -832,10 +832,12 @@ export function RoutingToggle({
> >
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<path className="client-rail-rule-track" d="M4 7h16M4 17h16" /> <path className="client-rail-rule-track" d="M4 7h16M4 17h16" />
<path className="client-rail-rule-scan is-top" pathLength="1" d="M4 7h16" /> <g className="client-rail-rule-knob-position is-top">
<path className="client-rail-rule-scan is-bottom" pathLength="1" d="M4 17h16" /> <circle className="client-rail-rule-knob is-top" cx="15" cy="7" r="2" />
<circle className="client-rail-rule-knob is-top" cx="15" cy="7" r="2" /> </g>
<circle className="client-rail-rule-knob is-bottom" cx="9" cy="17" r="2" /> <g className="client-rail-rule-knob-position is-bottom">
<circle className="client-rail-rule-knob is-bottom" cx="9" cy="17" r="2" />
</g>
</svg> </svg>
</RailAction> </RailAction>
); );
src/web/styles/primitives.css
+75 -32
View File
@@ -76,16 +76,26 @@
.client-rail-subscription-back, .client-rail-subscription-back,
.client-rail-subscription-front, .client-rail-subscription-front,
.client-rail-info-ring, .client-rail-book-page-position,
.client-rail-info-mark, .client-rail-book-spine,
.client-rail-device-monitor, .client-rail-device-link,
.client-rail-device-phone,
.client-rail-device-bridge, .client-rail-device-bridge,
.client-rail-diagnostics-position,
.client-rail-rule-knob-position {
transform-box: fill-box;
transform-origin: center;
transition: transform var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, stroke-dasharray var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.client-rail-book-page,
.client-rail-diagnostics-glass, .client-rail-diagnostics-glass,
.client-rail-rule-knob { .client-rail-rule-knob {
transform-box: fill-box; transform-box: fill-box;
transform-origin: center; transform-origin: center;
transition: transform var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, stroke-dasharray var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1); }
.client-rail-book-page.is-right {
transform-origin: left center;
} }
.client-rail-action .client-rail-subscription-card, .client-rail-action .client-rail-subscription-card,
@@ -105,17 +115,20 @@
transform: translate(-2px, 1px); transform: translate(-2px, 1px);
} }
.client-rail-info-ring { .client-instructions-toggle.is-open .client-rail-book-page-position.is-left {
stroke-dasharray: 1 0; transform: translateX(-1.25px) rotate(-2.5deg);
stroke-dashoffset: 0.1;
} }
.client-instructions-toggle.is-open .client-rail-info-ring { .client-instructions-toggle.is-open .client-rail-book-page-position.is-right {
stroke-dasharray: 0.9 0.1; transform: translateX(1.25px) rotate(2.5deg);
} }
.client-instructions-toggle.is-open .client-rail-info-mark { .client-instructions-toggle.is-open .client-rail-book-spine {
transform: translateY(-1px); transform: scaleY(1.06);
}
.client-rail-device-link {
opacity: 0.68;
} }
.client-rail-device-bridge { .client-rail-device-bridge {
@@ -124,10 +137,8 @@
} }
.client-rail-subscription-scan, .client-rail-subscription-scan,
.client-rail-info-sweep,
.client-rail-device-packet, .client-rail-device-packet,
.client-rail-diagnostics-scan, .client-rail-diagnostics-scan {
.client-rail-rule-scan {
stroke-width: 2.4; stroke-width: 2.4;
opacity: 0; opacity: 0;
stroke-dasharray: 0.18 0.82; stroke-dasharray: 0.18 0.82;
@@ -138,12 +149,8 @@
stroke-dasharray: 0.36 0.64; stroke-dasharray: 0.36 0.64;
} }
.client-devices-toggle.is-open .client-rail-device-monitor { .client-devices-toggle.is-open .client-rail-device-link {
transform: translateX(1px); opacity: 1;
}
.client-devices-toggle.is-open .client-rail-device-phone {
transform: translateX(-1px);
} }
.client-devices-toggle.is-open .client-rail-device-bridge { .client-devices-toggle.is-open .client-rail-device-bridge {
@@ -151,28 +158,42 @@
transform: scaleX(1); transform: scaleX(1);
} }
.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass { .client-rail-diagnostics-trace {
transform: translate(1px, -1px) rotate(-4deg); opacity: 0.72;
} }
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top { .client-diagnostics-toggle.is-open .client-rail-diagnostics-position {
transform: translateX(2px); transform: translate(2px, -1px) rotate(-7deg);
} }
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom { .client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-top {
transform: translateX(-2px); transform: translateX(4px);
}
.client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-bottom {
transform: translateX(-4px);
} }
.client-subscription-toggle.is-open .client-rail-subscription-scan, .client-subscription-toggle.is-open .client-rail-subscription-scan,
.client-instructions-toggle.is-open .client-rail-info-sweep,
.client-devices-toggle.is-open .client-rail-device-packet, .client-devices-toggle.is-open .client-rail-device-packet,
.client-diagnostics-toggle.is-open .client-rail-diagnostics-scan, .client-diagnostics-toggle.is-open .client-rail-diagnostics-scan {
.client-local-rules-toggle.is-open .client-rail-rule-scan {
animation: client-rail-ambient-trace 10s 1.1s linear infinite; animation: client-rail-ambient-trace 10s 1.1s linear infinite;
} }
.client-local-rules-toggle.is-open .client-rail-rule-scan.is-bottom { .client-instructions-toggle.is-open .client-rail-book-page.is-right {
animation: client-rail-ambient-trace 10s 1.32s linear infinite; animation: client-rail-book-turn 10s 1.1s ease-in-out infinite;
}
.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
animation: client-rail-glass-scan 10s 1.1s ease-in-out infinite;
}
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
animation: client-rail-rule-tune-top 10s 1.1s ease-in-out infinite;
}
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
animation: client-rail-rule-tune-bottom 10s 1.28s ease-in-out infinite;
} }
@keyframes client-rail-ambient-trace { @keyframes client-rail-ambient-trace {
@@ -182,6 +203,28 @@
10%, 100% { opacity: 0; stroke-dashoffset: 0; } 10%, 100% { opacity: 0; stroke-dashoffset: 0; }
} }
@keyframes client-rail-book-turn {
0%, 2%, 10%, 100% { transform: translateX(0) scaleX(1); }
5% { transform: translateX(-1px) scaleX(0.18); }
7% { transform: translateX(-0.5px) scaleX(0.55); }
}
@keyframes client-rail-glass-scan {
0%, 2%, 10%, 100% { transform: translateX(0) rotate(0); }
4% { transform: translateX(-3px) rotate(6deg); }
7% { transform: translateX(1.5px) rotate(-3deg); }
}
@keyframes client-rail-rule-tune-top {
0%, 2%, 10%, 100% { transform: translateX(0); }
6% { transform: translateX(-2px); }
}
@keyframes client-rail-rule-tune-bottom {
0%, 2%, 10%, 100% { transform: translateX(0); }
6% { transform: translateX(2px); }
}
.client-local-rules-toggle:disabled { .client-local-rules-toggle:disabled {
cursor: default; cursor: default;
color: var(--client-muted); color: var(--client-muted);
test/web/responsive-layout-contract.test.js
+17 -14
View File
@@ -140,31 +140,34 @@ test('secondary menus share one right rail and switch equal drawers as a vertica
assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/); assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/); assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines[\s\S]*client-rail-subscription-scan/); assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines[\s\S]*client-rail-subscription-scan/);
assert.match(instructions, /client-rail-info-ring[\s\S]*client-rail-info-sweep[\s\S]*client-rail-info-mark/); assert.match(instructions, /client-rail-book-page-position is-left[\s\S]*client-rail-book-page is-left[\s\S]*client-rail-book-page-position is-right[\s\S]*client-rail-book-page is-right[\s\S]*client-rail-book-spine/);
assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/); assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/);
assert.match(diagnosticsFeature, /client-rail-diagnostics-glass[\s\S]*client-rail-diagnostics-trace[\s\S]*client-rail-diagnostics-scan/); assert.match(diagnosticsFeature, /client-rail-diagnostics-trace[\s\S]*client-rail-diagnostics-scan[\s\S]*client-rail-diagnostics-position[\s\S]*client-rail-diagnostics-glass/);
assert.match(devices, /client-rail-device-monitor[\s\S]*client-rail-device-phone[\s\S]*client-rail-device-bridge[\s\S]*client-rail-device-packet/); assert.match(devices, /client-rail-device-monitor[\s\S]*M5 19h5\.5M7 15v4[\s\S]*client-rail-device-phone[\s\S]*client-rail-device-link[\s\S]*M19 16v3h-5\.5[\s\S]*client-rail-device-bridge[\s\S]*M10\.5 19h3[\s\S]*client-rail-device-packet[\s\S]*M7 19h12/);
assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-scan is-top[\s\S]*client-rail-rule-scan is-bottom[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/); assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-knob-position is-top[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob-position is-bottom[\s\S]*client-rail-rule-knob is-bottom/);
assert.match(styles, /\.client-rail-action:active:not\(:disabled\) svg \{[\s\S]*scale\(0\.94\)[\s\S]*120ms/); assert.match(styles, /\.client-rail-action:active:not\(:disabled\) svg \{[\s\S]*scale\(0\.94\)[\s\S]*120ms/);
assert.match(styles, /\.client-rail-action svg \{[\s\S]*stroke-width:\s*1\.75/); assert.match(styles, /\.client-rail-action svg \{[\s\S]*stroke-width:\s*1\.75/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-back \{[\s\S]*translate\(1\.5px, -1px\)/); assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-back \{[\s\S]*translate\(1\.5px, -1px\)/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-2px, 1px\)/); assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-2px, 1px\)/);
assert.match(styles, /\.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*1 0/); assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page-position\.is-left \{[\s\S]*translateX\(-1\.25px\) rotate\(-2\.5deg\)/);
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*0\.9 0\.1/); assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page-position\.is-right \{[\s\S]*translateX\(1\.25px\) rotate\(2\.5deg\)/);
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-mark \{[\s\S]*translateY\(-1px\)/); assert.match(styles, /@keyframes client-rail-book-turn[\s\S]*scaleX\(0\.18\)[\s\S]*scaleX\(0\.55\)/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-monitor \{[\s\S]*translateX\(1px\)/); assert.doesNotMatch(styles, /client-rail-info|stroke-dasharray:\s*0\.9 0\.1/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-phone \{[\s\S]*translateX\(-1px\)/); assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-link \{[\s\S]*opacity:\s*1/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/); assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/);
assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-glass \{[\s\S]*translate\(1px, -1px\) rotate\(-4deg\)/); assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-position \{[\s\S]*translate\(2px, -1px\) rotate\(-7deg\)/);
assert.match(styles, /@keyframes client-rail-glass-scan[\s\S]*translateX\(-3px\) rotate\(6deg\)[\s\S]*translateX\(1\.5px\) rotate\(-3deg\)/);
assert.match(routing, /client-rail-rule-knob is-top" cx="15"[\s\S]*client-rail-rule-knob is-bottom" cx="9"/); assert.match(routing, /client-rail-rule-knob is-top" cx="15"[\s\S]*client-rail-rule-knob is-bottom" cx="9"/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-top \{[\s\S]*translateX\(2px\)/); assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob-position\.is-top \{[\s\S]*translateX\(4px\)/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-bottom \{[\s\S]*translateX\(-2px\)/); assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob-position\.is-bottom \{[\s\S]*translateX\(-4px\)/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-scan,[\s\S]*\.client-local-rules-toggle\.is-open \.client-rail-rule-scan \{[\s\S]*client-rail-ambient-trace 10s 1\.1s/); assert.match(styles, /@keyframes client-rail-rule-tune-top[\s\S]*translateX\(-2px\)/);
assert.match(styles, /@keyframes client-rail-rule-tune-bottom[\s\S]*translateX\(2px\)/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-scan,[\s\S]*\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-scan \{[\s\S]*client-rail-ambient-trace 10s 1\.1s/);
assert.match(styles, /@keyframes client-rail-ambient-trace[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/); assert.match(styles, /@keyframes client-rail-ambient-trace[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
assert.match(styles, /--client-rail-state-duration:\s*340ms/); assert.match(styles, /--client-rail-state-duration:\s*340ms/);
assert.match(styles, /\.client-rail-action\.is-open \{[\s\S]*--client-rail-state-duration:\s*480ms/); assert.match(styles, /\.client-rail-action\.is-open \{[\s\S]*--client-rail-state-duration:\s*480ms/);
assert.match(styles, /transition: transform var\(--client-rail-state-duration\) cubic-bezier\(0\.16, 1, 0\.3, 1\)/); assert.match(styles, /transition: transform var\(--client-rail-state-duration\) cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
assert.doesNotMatch(styles, /client-rail-info-refill|client-rail-device-left|client-rail-rule-top|client-rail-book-page|client-rail-device-primary|client-rail-diagnostics-base|client-rail-rule-pulse/); assert.doesNotMatch(styles, /client-rail-info|client-rail-device-primary|client-rail-diagnostics-base|client-rail-rule-scan|client-rail-rule-pulse/);
assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/); assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/); assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/); assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);
test/web/style-boundaries.test.js
+13 -13
View File
@@ -39,24 +39,24 @@ const acceptedLedger = {
counts: { counts: {
cascadeEdges: 950, cascadeEdges: 950,
customProperties: 108, customProperties: 108,
declarations: 3500, declarations: 3516,
important: 0, important: 0,
keyframes: 49, keyframes: 53,
media: 13, media: 13,
rules: 984, rules: 1000,
variableReferences: 840, variableReferences: 840,
}, },
hashes: { hashes: {
cascadeEdges: '5d255c2f624bf3b45037c027f127d644f02dfc5a130313e766597da9bee4875f', cascadeEdges: '5d255c2f624bf3b45037c027f127d644f02dfc5a130313e766597da9bee4875f',
customProperties: '3b97add4c3d685a532afff5046ddbe2b6eebcc0866c62781348559897f2930fb', customProperties: '3b97add4c3d685a532afff5046ddbe2b6eebcc0866c62781348559897f2930fb',
declarations: '7b64892ae650b7035a2eadc2846f99c1085df66995637cdf0e0c807743275c38', declarations: '4cf0d3ed382d4757bf7313ea9e941167ccbb28293198e89852fda855b288f492',
duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945', duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
duplicateSelectors: '8982145dba05b33bf1c93b2d54cfbe76305b276ff3c657aa020144016ada5848', duplicateSelectors: '8982145dba05b33bf1c93b2d54cfbe76305b276ff3c657aa020144016ada5848',
keyframes: '9e78309512ed82b1e9f87c58aeff505dfcdb694fc30c8f54570d01dce13eb51a', keyframes: '78b90f6f08db3eb7c998d6be48799a1fff9179c416b6e4364c0efdeb3591e4d1',
ruleDeclarationSequences: '5e4f3127541777f8c404f2cc7c430bc42b3d0e15389f13cb62e7c5321d86897d', ruleDeclarationSequences: '8d146a746adac504897039e31408dc342e8e9f2940c2984d69b4b21b4d6a8e3f',
selectors: '744f667e7e36762ab798ef84fcb41abba655fc087e6362dbc1e71b9f637ac259', selectors: 'fb7382b9ad1e8a7593553ce7f2544647882a1089c967e30623bb48344da0b490',
variableReferences: '924d3c0fa5aa34a4afeeec4870e3a0f3e63c4144a930e90289da232fa96075ae', variableReferences: '1106c0a87671667957261a7f80cdab657d7a5f0078a9feece09c1efcad4f6455',
witnesses: 'aaaa1b6c3ac84e82646c8c8fd4d88f0c3c7cd291eed7d4c85ede32f2f9a2fea2', witnesses: '88e71ed6ab4be07b2c7b45f90677c2f70dbc5d5b7dc8a42c8715e3f8084096dc',
}, },
}; };
@@ -209,7 +209,7 @@ test('client typography uses the shared semantic scale outside the token owner',
test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => { test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
const witnesses = readStyleWitnesses(root); const witnesses = readStyleWitnesses(root);
assert.equal(witnesses.length, 859); assert.equal(witnesses.length, 863);
assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0); assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
const ledger = createStyleLedger(readStyleSource(root), { witnesses }); const ledger = createStyleLedger(readStyleSource(root), { witnesses });
assert.deepEqual(ledger.counts, acceptedLedger.counts); assert.deepEqual(ledger.counts, acceptedLedger.counts);
@@ -405,8 +405,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1); assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css')); const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
assert.deepEqual(assets, ['index-CAi7iXH5.css']); assert.deepEqual(assets, ['index-BlKS5cQQ.css']);
const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0])); const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
assert.equal(built.byteLength, 135653); assert.equal(built.byteLength, 136693);
assert.equal(sha256(built), '15cb8f4597c16fd8ba119395b1246e3cf9362fc24988aecd6a08a0666fb53d46'); assert.equal(sha256(built), '3486f1e09a97e1293d7cdd4c7661b994bda1f388c1560518657da1b3a8318d6e');
}); });