Skip to content

Commit 7c1cddd

Browse files
ronggurronggur
authored
Merge pull request #1419 from datum-cloud/chore/active-state-nav
style(nav): align active states across site navigation with figma
2 parents 1d9da3e + 03c385e commit 7c1cddd

8 files changed

Lines changed: 54 additions & 62 deletions

File tree

‎src/pages/download/[slug].astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,6 @@ const jsonLd = appSchema
350350
</Download>
351351
</div>
352352
</div>
353-
<Footer class="z-10" />
353+
<Footer class="z-10" showCTA={false} />
354354
</section>
355355
</Layout>

‎src/v1/styles/color-theme.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,10 @@
4444

4545
/* Target .expressive-code directly to match EC's own selector specificity */
4646
.expressive-code {
47-
--ec-frm-inlBtnFg: var(--color-pine-forge);
48-
--ec-code-background: var(--glacier-mist-700);
49-
--ec-codeBg: var(--glacier-mist-700);
50-
--ec-frm-edBg: var(--glacier-mist-700);
47+
--ec-frm-inlBtnFg: var(--color-canyon-clay---links);
48+
--ec-code-background: var(--glacier-mist-800);
49+
--ec-codeBg: var(--glacier-mist-800);
50+
--ec-frm-edBg: var(--glacier-mist-800);
5151
--ec-code-header-background: color-mix(in srgb, var(--color-glacier-mist-800) 40%, transparent);
5252
}
5353

‎src/v1/styles/components-dark.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,11 @@
2727
}
2828
}
2929
}
30+
31+
.nav--main {
32+
.nav-menu-link {
33+
@apply text-glacier-mist-700 opacity-100 hover:opacity-80;
34+
}
35+
}
3036
}
3137
}

‎src/v1/styles/components-download.css‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,18 @@
3737
}
3838

3939
.download-nav-link {
40-
@apply flex items-center gap-2;
41-
@apply p-2;
42-
@apply datum-text-base;
43-
@apply text-midnight-fjord/80;
40+
@apply flex items-center gap-2 rounded-md p-2;
41+
@apply datum-text-sm text-midnight-fjord/60 font-medium;
4442
@apply transition-colors duration-200;
45-
@apply hover:text-midnight-fjord;
43+
@apply hover:text-midnight-fjord/80;
4644
}
4745

4846
.download-nav-link--active {
49-
/* Figma: Item → Link — glacier pill, midnight text, 8px pad, 6px radius */
50-
@apply bg-glacier-mist-900 rounded-md p-2;
51-
@apply text-midnight-fjord font-semibold;
52-
@apply hover:bg-glacier-mist-900 hover:text-midnight-fjord;
47+
@apply text-canyon-clay---links bg-white font-semibold;
48+
@apply hover:text-canyon-clay---links hover:bg-white;
5349

5450
.download-nav-icon {
55-
@apply text-midnight-fjord;
51+
@apply text-canyon-clay---links;
5652
}
5753
}
5854

@@ -187,7 +183,7 @@
187183
}
188184

189185
.download-nav-mobile-selected {
190-
@apply truncate font-medium text-gray-900;
186+
@apply text-canyon-clay---links truncate font-semibold;
191187
}
192188

193189
.download-nav-mobile-chevron {
@@ -221,16 +217,14 @@
221217
}
222218

223219
.download-nav-mobile-link {
224-
@apply flex items-center gap-2;
225-
@apply px-3 py-1;
226-
@apply datum-text-base;
227-
@apply text-midnight-fjord;
220+
@apply flex items-center gap-2 rounded-md px-3 py-1;
221+
@apply datum-text-sm text-midnight-fjord/60 font-medium;
228222
@apply transition-colors duration-300 ease-out;
229-
@apply hover:text-canyon-clay---links;
223+
@apply hover:text-midnight-fjord/80;
230224

231225
&--active {
232-
@apply text-canyon-clay---links font-semibold;
233-
@apply hover:text-midnight-fjord;
226+
@apply text-canyon-clay---links bg-white font-semibold;
227+
@apply hover:text-canyon-clay---links hover:bg-white;
234228

235229
.download-nav-mobile-icon {
236230
@apply text-canyon-clay---links;

‎src/v1/styles/components-handbook.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
@apply transition-colors duration-200 hover:bg-gray-50;
112112

113113
.sidebar-mobile-toggle--text {
114-
@apply text-midnight-fjord datum-text-base;
114+
@apply text-canyon-clay---links datum-text-base font-semibold;
115115
}
116116

117117
.sidebar-mobile-toggle--icon {
@@ -179,11 +179,12 @@
179179
}
180180

181181
.handbook-sidebar .menu-link {
182-
@apply text-midnight-fjord/80 hover:text-midnight-fjord datum-text-sm transition-colors duration-200 ease-out;
183-
@apply inline-block w-full px-2 py-1;
182+
@apply datum-text-sm text-midnight-fjord/60 inline-block w-full rounded-md p-2 font-medium transition-colors duration-150;
183+
@apply hover:text-midnight-fjord/80;
184184
}
185185

186186
.handbook-sidebar .menu-link--active {
187-
@apply bg-glacier-mist-800 text-midnight-fjord font-semibold;
187+
@apply text-canyon-clay---links bg-white font-semibold;
188+
@apply hover:text-canyon-clay---links hover:bg-white;
188189
}
189190
}

‎src/v1/styles/components-nav.css‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
@apply border-glacier-mist-900;
2626
}
2727
.nav--main {
28-
@apply max-width relative z-80 m-auto flex w-full items-center justify-between gap-5 py-2.5 md:gap-10 md:py-3.5 lg:gap-20;
28+
@apply max-width relative z-80 m-auto flex w-full items-center justify-between gap-5 py-2.5 md:gap-10 md:py-3.5 lg:gap-16;
2929

3030
.nav-actions {
3131
@apply mr-3 ml-auto flex items-center gap-3 justify-self-end md:col-span-3 md:mr-0 md:gap-3.25;
@@ -49,30 +49,18 @@
4949
}
5050

5151
.nav-menu {
52-
@apply datum-text-base hidden items-center justify-start text-white md:flex md:gap-6 lg:gap-8 xl:gap-10;
53-
}
54-
55-
.nav-menu-link.link--active {
56-
& > span {
57-
@apply relative;
58-
59-
&::after {
60-
content: '';
61-
@apply absolute bottom-0 left-0 h-0.5;
62-
@apply bg-midnight-fjord w-full;
63-
}
64-
}
52+
@apply datum-text-base hidden items-center justify-start text-white md:flex md:gap-3 lg:gap-5;
6553
}
6654

6755
.nav-menu-item {
6856
@apply flex items-center gap-2 py-3;
6957
}
7058

7159
.nav-menu-link {
72-
@apply flex items-center gap-2 font-normal hover:opacity-80;
60+
@apply flex items-center gap-2 px-3 py-1.5 font-normal opacity-60 hover:opacity-80;
7361

74-
& > span {
75-
@apply pb-1;
62+
&.link--active {
63+
@apply text-canyon-clay---links rounded-md bg-white font-semibold opacity-100 hover:opacity-80;
7664
}
7765
}
7866
}

‎src/v1/styles/components-secondary-tab-nav.css‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
}
2323

2424
.secondary-tab-nav-mobile-selected {
25-
@apply datum-text-sm text-midnight-fjord shrink-0 font-semibold;
25+
@apply datum-text-sm text-canyon-clay---links shrink-0 font-semibold;
2626
}
2727

2828
.secondary-tab-nav-mobile-chevron {
@@ -42,31 +42,32 @@
4242
}
4343

4444
.secondary-tab-nav-mobile-link {
45-
@apply datum-text-sm text-midnight-fjord/60 mx-2 flex items-center gap-2 rounded-sm px-4 py-3 font-medium no-underline;
46-
@apply hover:bg-glacier-mist-700/50 hover:text-midnight-fjord/80;
45+
@apply datum-text-sm text-midnight-fjord/60 mx-2 flex items-center gap-2 rounded-md px-4 py-3 font-medium no-underline;
46+
@apply hover:text-midnight-fjord/80;
4747

4848
&--active {
49-
@apply bg-glacier-mist-900 text-midnight-fjord font-semibold;
50-
@apply hover:bg-glacier-mist-900 hover:text-midnight-fjord;
49+
@apply text-canyon-clay---links bg-white font-semibold;
50+
@apply hover:text-canyon-clay---links hover:bg-white;
5151
}
5252
}
5353

54-
/* Track color on the list avoids a white→gray flash before tab backgrounds paint */
5554
.secondary-tab-nav__list {
56-
@apply md:border-glacier-mist-900 md:bg-glacier-mist-700 m-0 hidden list-none p-0 md:inline-flex md:overflow-hidden md:rounded-md md:border;
55+
@apply bg-glacier-mist-800 m-0 hidden list-none gap-0 p-0.5 md:inline-flex md:overflow-hidden md:rounded-lg;
56+
5757
li {
58-
@apply last:[&>a]:border-r-0;
58+
@apply m-0 p-0;
5959
}
6060
}
6161

6262
.secondary-tab-nav__tab {
63-
@apply datum-text-sm text-midnight-fjord/60 border-glacier-mist-900 inline-flex items-center justify-center border-r bg-transparent px-6 py-1.25 font-medium no-underline;
64-
@apply hover:bg-glacier-mist-700/40 hover:text-midnight-fjord/75;
63+
@apply datum-text-sm text-midnight-fjord/60 inline-flex items-center justify-center rounded-md bg-transparent font-medium no-underline;
64+
@apply hover:text-midnight-fjord/80;
6565
@apply focus-visible:ring-midnight-fjord/30 focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset;
66+
@apply px-6 py-1.5;
6667
}
6768

6869
.secondary-tab-nav__tab--active {
69-
@apply bg-glacier-mist-900 text-midnight-fjord font-semibold;
70-
@apply hover:bg-glacier-mist-900 hover:text-midnight-fjord;
70+
@apply text-canyon-clay---links bg-white font-semibold;
71+
@apply hover:text-canyon-clay---links hover:bg-white;
7172
}
7273
}

‎src/v1/styles/page-legal.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,27 @@
2828
}
2929

3030
.legal-sidenav-item {
31-
@apply datum-text-sm text-midnight-fjord/60 hover:text-midnight-fjord block rounded-md px-2 py-2 font-medium transition-colors duration-150;
31+
@apply datum-text-sm text-midnight-fjord/60 block rounded-md p-2 font-medium transition-colors duration-150;
32+
@apply hover:text-midnight-fjord/80;
3233

3334
&.legal-sidenav-item--active {
34-
@apply bg-glacier-mist-800 text-midnight-fjord font-semibold opacity-100;
35+
@apply text-canyon-clay---links bg-white font-semibold;
36+
@apply hover:text-canyon-clay---links hover:bg-white;
3537
}
3638

3739
/* Mobile only: match brand nav dropdown style */
3840
@media (max-width: 767px) {
39-
@apply datum-text-base text-midnight-fjord rounded-none px-3 py-1;
41+
@apply datum-text-base text-midnight-fjord/60 rounded-md px-3 py-2;
4042

4143
&:hover {
42-
@apply text-canyon-clay---links;
44+
@apply text-midnight-fjord/80;
4345
}
4446

4547
&.legal-sidenav-item--active {
46-
@apply text-canyon-clay---links bg-transparent;
48+
@apply text-canyon-clay---links bg-white font-semibold;
4749

4850
&:hover {
49-
@apply text-midnight-fjord;
51+
@apply text-canyon-clay---links bg-white;
5052
}
5153
}
5254
}

0 commit comments

Comments
 (0)