Skip to content

Commit 3061496

Browse files
KATIETOLERKATIETOLER
authored
Add underline, arrow, and subtitle href structure (#3231)
* Add underline, arrow, and subtitle href structure * Fix subtitle text size * Fix type errors: * Fix type errors in nav container. * Add new icons * Add padding fix per design * Add new color to subtitle line * Move support navitem and add padding if no href subtitle. * Remove old padding * Align arrow with icons.
1 parent 27eaa32 commit 3061496

File tree

14 files changed

+190
-47
lines changed

14 files changed

+190
-47
lines changed

‎src/lib/holocene/icon/paths.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import action from './svg/action.svelte';
12
import activity from './svg/activity.svelte';
23
import addSquare from './svg/add-square.svelte';
34
import add from './svg/add.svelte';
@@ -66,6 +67,7 @@ import github from './svg/github.svelte';
6667
import graph from './svg/graph.svelte';
6768
import happyLappy from './svg/happy-lappy.svelte';
6869
import heartbeat from './svg/heartbeat.svelte';
70+
import house from './svg/house.svelte';
6971
import hyphen from './svg/hyphen.svelte';
7072
import identities from './svg/identities.svelte';
7173
import importIcon from './svg/import.svelte';
@@ -108,6 +110,7 @@ import server from './svg/server.svelte';
108110
import settings from './svg/settings.svelte';
109111
import shield from './svg/shield.svelte';
110112
import signal from './svg/signal.svelte';
113+
import slashForward from './svg/slash-forward.svelte';
111114
import sliders from './svg/sliders.svelte';
112115
import spinner from './svg/spinner.svelte';
113116
import starEmpty from './svg/star-empty.svelte';
@@ -138,10 +141,12 @@ import userGroup from './svg/user-group.svelte';
138141
import verticalEllipsis from './svg/vertical-ellipsis.svelte';
139142
import warning from './svg/warning.svelte';
140143
import workflow from './svg/workflow.svelte';
144+
import workflows from './svg/workflows.svelte';
141145
import xmarkFilled from './svg/xmark-filled.svelte';
142146
import xmarkSquare from './svg/xmark-square.svelte';
143147

144148
export const icons = {
149+
action,
145150
activity,
146151
'add-square': addSquare,
147152
add,
@@ -210,6 +215,7 @@ export const icons = {
210215
graph,
211216
'happy-lappy': happyLappy,
212217
heartbeat,
218+
house,
213219
hyphen,
214220
identities,
215221
inactive,
@@ -252,6 +258,7 @@ export const icons = {
252258
settings,
253259
shield,
254260
signal,
261+
'slash-forward': slashForward,
255262
sliders,
256263
spinner,
257264
'star-empty': starEmpty,
@@ -283,6 +290,7 @@ export const icons = {
283290
warning,
284291
'system-window': systemWindow,
285292
workflow,
293+
workflows,
286294
'xmark-filled': xmarkFilled,
287295
'xmark-square': xmarkSquare,
288296
} as const;

‎src/lib/holocene/icon/svg/action.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import Svg from '../svg.svelte';
3+
let props = $props();
4+
</script>
5+
6+
<Svg {...props}>
7+
<path
8+
d="m 12,0 c 6.32265,0 11.49885,4.890495 11.9619,11.09475 H 24 v 2.25 H 23.9238 C
9+
23.2554,19.3392 18.17295,24 12,24 5.82711,24 0.744525,19.3392 0.07617,13.34475 H
10+
0 v -2.25 H 0.038085 C 0.501195,4.890495 5.677365,0 12,0 Z M 9.3282,8.286615 C
11+
9.19305,7.98075 8.75544,7.9908 8.63526,8.30274 L 7.34619,11.6601 C
12+
6.956715,12.6747 5.982285,13.34475 4.895505,13.34475 H 2.34522 C 3.0003,18.09315
13+
7.071495,21.75 12,21.75 c 4.92855,0 8.9997,-3.65685 9.65475,-8.40525 h -2.001 c
14+
-0.1491,0 -0.28455,0.08895 -0.34425,0.2256 l -1.4106,3.24015 c -0.9135,2.09715
15+
-3.88635,2.10345 -4.809,0.01035 z M 12,2.25 c -5.07939,0 -9.25062,3.88458
16+
-9.70752,8.84475 h 2.603025 c 0.155025,0 0.2943,-0.0957 0.3501,-0.2403 L
17+
6.534675,7.497075 C 7.3743,5.309415 10.4424,5.234295 11.3877,7.378425 l
18+
3.7602,8.534175 c 0.13185,0.2991 0.55665,0.2982 0.687,-0.0015 l 1.4121,-3.24015
19+
c 0.4173,-0.95715 1.3626,-1.5762 2.40675,-1.5762 h 2.0538 C 21.25065,6.13458
20+
17.07945,2.25 12,2.25 Z"
21+
fill="currentcolor"
22+
/>
23+
</Svg>

‎src/lib/holocene/icon/svg/house.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import Svg from '../svg.svelte';
3+
let props = $props();
4+
</script>
5+
6+
<Svg {...props}>
7+
<path
8+
d="M 12.66315,2.041935 11.9979,1.5 11.3325,2.041935 0,11.23845 1.335,12.741
9+
2.382405,11.88705 V 21.51465 22.5 h 1.03023 17.170515 1.0302 v -0.98535 -9.6276
10+
L 22.665,12.741 24,11.23845 12.6675,2.041935 Z M 4.44285,20.5293 V 10.2162 L
11+
11.9979,4.08651 19.5528,10.2162 V 20.5293 H 16.1187 V 13.632 12.64665 H 15.0885
12+
8.90718 7.87695 v 0.98535 6.8973 z m 5.4945,0 v -5.91195 h 4.12095 v 5.91195 z"
13+
fill="currentcolor"
14+
/>
15+
</Svg>

‎src/lib/holocene/icon/svg/overview.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<Svg {...props}>
77
<path
8-
d="M 3.5452871,2.6119654 V 11.155731 H 8.1760879 V 2.6119654 Z M 1.2298799,0.04882678 H 3.5452871 8.1760879 10.491482 V 2.6119654 11.155731 13.71887 H 8.1760879 3.5452871 1.2298799 V 11.155731 2.6119654 Z M 15.894031,12.86449 v 8.54375 h 4.630841 v -8.54375 z m -2.31534,-2.563139 h 2.31534 4.630841 2.31542 v 2.563139 8.54375 2.563154 h -2.31542 -4.630841 -2.31534 V 21.40824 12.86449 Z M 8.1760879,17.990753 H 3.5452871 V 21.40824 H 8.1760879 Z M 3.5452871,15.427599 h 4.6308008 2.3153941 v 2.563154 3.417487 2.563154 H 8.1760879 3.5452871 1.2298799 V 21.40824 17.990753 15.427599 Z M 15.894031,2.6119654 v 3.4175034 h 4.630841 V 2.6119654 Z m -2.31534,-2.56313862 h 2.31534 4.630841 2.31542 V 2.6119654 6.0294688 8.5926075 h -2.31542 -4.630841 -2.31534 V 6.0294688 2.6119654 Z"
8+
d="M 2.25,3.75 V 7.5 h 19.5 V 3.75 Z m 19.5,16.5 V 9.75 h -4.5 v 10.5 z m -6.75,0 V 9.75 H 2.25 v 10.5 z M 21.75,1.5 H 24 v 2.25 16.5 2.25 H 21.75 2.25 0 V 20.25 3.75 1.5 h 2.25 z"
99
fill="currentcolor"
1010
/>
1111
</Svg>

‎src/lib/holocene/icon/svg/slash-forward.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts">
2+
import Svg from '../svg.svelte';
3+
let props = $props();
4+
</script>
5+
6+
<Svg {...props}>
7+
<path d="M 18.75,0 H 16.3674 L 5.25,24 h 2.382615 z" fill="currentColor" />
8+
</Svg>

‎src/lib/holocene/icon/svg/support.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<Svg {...props}>
77
<path
8-
d="M18.0516 19.6453C16.3922 20.9625 14.2875 21.75 12 21.75C9.7125 21.75 7.60781 20.9625 5.94844 19.6453L9.71719 15.8766C10.3875 16.2703 11.1703 16.5 12.0047 16.5C12.8391 16.5 13.6219 16.275 14.2922 15.8766L18.0609 19.6453H18.0516ZM21.2438 19.6547C22.9641 17.5734 24 14.9109 24 12C24 9.08906 22.9641 6.42656 21.2438 4.34531L21.7969 3.79688L22.5938 3L21 1.41094L20.2031 2.20312L19.6547 2.75625C17.5734 1.03594 14.9109 0 12 0C9.08906 0 6.42656 1.03594 4.34531 2.75625L3.79688 2.20312L3 1.40625L1.41094 3L2.20312 3.79688L2.75625 4.34531C1.03594 6.42656 0 9.08906 0 12C0 14.9109 1.03594 17.5734 2.75625 19.6547L2.20312 20.2031L1.40625 21L3 22.5891L3.79688 21.7922L4.35 21.2391C6.42656 22.9641 9.08906 24 12 24C14.9109 24 17.5734 22.9641 19.6547 21.2438L20.2031 21.7969L21 22.5938L22.5891 21L21.7922 20.2031L21.2391 19.65L21.2438 19.6547ZM19.6453 18.0563L15.8766 14.2875C16.2703 13.6172 16.5 12.8344 16.5 12C16.5 11.1656 16.275 10.3828 15.8766 9.7125L19.6453 5.94375C20.9625 7.60781 21.75 9.7125 21.75 12C21.75 14.2875 20.9625 16.3922 19.6453 18.0516V18.0563ZM18.0516 4.35469L14.2828 8.12344C13.6125 7.72969 12.8297 7.5 11.9953 7.5C11.1609 7.5 10.3781 7.725 9.70781 8.12344L5.94844 4.35469C7.60781 3.0375 9.7125 2.25 12 2.25C14.2875 2.25 16.3922 3.0375 18.0516 4.35469ZM8.12344 14.2875L4.35469 18.0516C3.0375 16.3922 2.25 14.2875 2.25 12C2.25 9.7125 3.0375 7.60781 4.35469 5.94844L8.12344 9.71719C7.72969 10.3875 7.5 11.1703 7.5 12.0047C7.5 12.8391 7.725 13.6219 8.12344 14.2922V14.2875ZM9.75 12C9.75 11.4033 9.98705 10.831 10.409 10.409C10.831 9.98705 11.4033 9.75 12 9.75C12.5967 9.75 13.169 9.98705 13.591 10.409C14.0129 10.831 14.25 11.4033 14.25 12C14.25 12.5967 14.0129 13.169 13.591 13.591C13.169 14.0129 12.5967 14.25 12 14.25C11.4033 14.25 10.831 14.0129 10.409 13.591C9.98705 13.169 9.75 12.5967 9.75 12Z"
8+
d="m 11.999312,0 c 2.93008,1.1350852e-4 5.614557,1.0502234 7.698432,2.7947642 L 21.665272,0.82858382 23.169969,2.333352 21.202441,4.2995182 C 22.947918,6.3833076 23.999858,9.0686213 24,11.999312 c -1.42e-4,2.930365 -1.052508,5.614557 -2.797559,7.698432 l 1.967528,1.967528 -1.504697,1.504697 -1.967528,-1.967528 C 17.613869,22.947492 14.929677,23.999858 11.999312,24 9.0690044,23.999858 6.3845705,22.947492 4.3009087,21.202441 L 2.3347425,23.169969 0.82858382,21.665272 2.7947642,19.697744 C 1.0502234,17.613869 1.1350852e-4,14.929392 0,11.999312 9.9319954e-5,9.0689334 1.0498544,6.3832083 2.7947642,4.2995182 L 0.82858382,2.333352 2.333352,0.82858382 4.2995182,2.7947642 C 6.3832083,1.0498544 9.0689334,9.9319954e-5 11.999312,0 Z M 5.8139773,19.689372 c 1.692568,1.363379 3.8429444,2.182202 6.1853347,2.182343 2.34239,-1.41e-4 4.492526,-0.818964 6.185363,-2.182343 l -2.708881,-2.70888 c -0.985395,0.689138 -2.183053,1.095924 -3.476482,1.096066 -1.29343,-1.42e-4 -2.4912283,-0.406928 -3.4764822,-1.096066 z M 16.980492,8.5214534 c 0.689564,0.9853533 1.095924,2.1841456 1.096066,3.4778586 -1.42e-4,1.293429 -0.406928,2.491087 -1.096066,3.476482 l 2.70888,2.708881 c 1.363379,-1.692837 2.182202,-3.842973 2.182343,-6.185363 C 21.871574,9.6566379 21.053177,7.5052826 19.689372,5.812601 Z M 4.3078327,5.812601 c -1.3631805,1.6925823 -2.1794628,3.8443207 -2.1795479,6.186711 1.135e-4,2.342107 0.8167363,4.492667 2.1795479,6.185363 l 2.710243,-2.708881 C 6.3291925,14.490399 5.9235272,13.2926 5.9234421,11.999312 5.9235272,10.705882 6.3277169,9.5066649 7.0166852,8.5214534 Z m 7.6914793,2.2391258 c -2.1800731,2.27e-4 -3.9473582,1.7675121 -3.9475852,3.9475852 2.128e-4,2.180073 1.7675121,3.948678 3.9475852,3.948961 2.180073,-1.42e-4 3.948819,-1.768888 3.948961,-3.948961 C 15.94799,9.8192389 14.179385,8.0519396 11.999312,8.0517268 Z m 0,-5.923442 C 9.6569217,2.1283699 7.5051833,2.9446522 5.812601,4.3078327 l 2.7102288,2.7088525 c 0.985112,-0.688571 2.1834782,-1.093158 3.4764822,-1.0932431 1.29272,8.51e-5 2.489952,0.405041 3.475063,1.0932431 l 2.7103,-2.7088525 C 16.491979,2.9450211 14.341419,2.1283983 11.999312,2.1282848 Z"
99
fill="currentcolor"
1010
/>
1111
</Svg>

‎src/lib/holocene/icon/svg/usage.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<Svg {...props}>
77
<path
8-
d="M12 2.25C14.5859 2.25 17.0658 3.27723 18.8943 5.10571C20.7228 6.93419 21.75 9.41414 21.75 12C21.75 14.5859 20.7228 17.0658 18.8943 18.8943C17.0658 20.7228 14.5859 21.75 12 21.75C9.41414 21.75 6.93419 20.7228 5.10571 18.8943C3.27723 17.0658 2.25 14.5859 2.25 12C2.25 9.41414 3.27723 6.93419 5.10571 5.10571C6.93419 3.27723 9.41414 2.25 12 2.25ZM12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12C0 15.1826 1.26428 18.2348 3.51472 20.4853C5.76516 22.7357 8.8174 24 12 24ZM13.5 5.25C13.5 4.85218 13.342 4.47064 13.0607 4.18934C12.7794 3.90804 12.3978 3.75 12 3.75C11.6022 3.75 11.2206 3.90804 10.9393 4.18934C10.658 4.47064 10.5 4.85218 10.5 5.25C10.5 5.64782 10.658 6.02936 10.9393 6.31066C11.2206 6.59196 11.6022 6.75 12 6.75C12.3978 6.75 12.7794 6.59196 13.0607 6.31066C13.342 6.02936 13.5 5.64782 13.5 5.25ZM12 19.125C13.4484 19.125 14.625 17.9484 14.625 16.5C14.625 15.8438 14.3859 15.2437 13.9828 14.7844L17.1562 7.57969L17.6109 6.54844L15.5531 5.64375L15.0984 6.675L11.925 13.875C10.5094 13.9125 9.375 15.075 9.375 16.5C9.375 17.9484 10.5516 19.125 12 19.125ZM9 7.5C9 7.10218 8.84196 6.72064 8.56066 6.43934C8.27936 6.15804 7.89782 6 7.5 6C7.10218 6 6.72064 6.15804 6.43934 6.43934C6.15804 6.72064 6 7.10218 6 7.5C6 7.89782 6.15804 8.27936 6.43934 8.56066C6.72064 8.84196 7.10218 9 7.5 9C7.89782 9 8.27936 8.84196 8.56066 8.56066C8.84196 8.27936 9 7.89782 9 7.5ZM5.25 13.5C5.64782 13.5 6.02936 13.342 6.31066 13.0607C6.59196 12.7794 6.75 12.3978 6.75 12C6.75 11.6022 6.59196 11.2206 6.31066 10.9393C6.02936 10.658 5.64782 10.5 5.25 10.5C4.85218 10.5 4.47064 10.658 4.18934 10.9393C3.90804 11.2206 3.75 11.6022 3.75 12C3.75 12.3978 3.90804 12.7794 4.18934 13.0607C4.47064 13.342 4.85218 13.5 5.25 13.5ZM20.25 12C20.25 11.6022 20.092 11.2206 19.8107 10.9393C19.5294 10.658 19.1478 10.5 18.75 10.5C18.3522 10.5 17.9706 10.658 17.6893 10.9393C17.408 11.2206 17.25 11.6022 17.25 12C17.25 12.3978 17.408 12.7794 17.6893 13.0607C17.9706 13.342 18.3522 13.5 18.75 13.5C19.1478 13.5 19.5294 13.342 19.8107 13.0607C20.092 12.7794 20.25 12.3978 20.25 12Z"
8+
d="M 23.9985,23.993424 H 0.00146991 L 0,21.743565 H 23.997 Z M 6.8081645,2.1187767 C 7.328407,-0.71283628 11.389838,-0.70356686 11.896656,2.130491 l 2.696682,15.095806 c 0.0219,0.122993 0.06855,0.176989 0.105443,0.206537 0.0474,0.0375 0.122693,0.06765 0.215387,0.0702 0.09254,0.0024 0.170389,-0.02355 0.219586,-0.0585 0.0384,-0.02745 0.0888,-0.07875 0.117293,-0.199188 l 1.457309,-6.191613 C 16.983739,9.8865062 18.025423,9.0603579 19.224898,9.0602079 H 24 v 2.2498591 h -4.775102 c -0.15554,1.5e-4 -0.290531,0.108144 -0.326679,0.259334 L 17.44076,17.759364 C 16.79745,20.492793 12.872195,20.386 12.378576,17.621673 L 9.6820449,2.5259713 C 9.6590963,2.3982093 9.6098994,2.3445576 9.5736016,2.3165244 9.5259046,2.2797467 9.4480595,2.2495986 9.3525155,2.2491336 c -0.095844,-2.25e-4 -0.1745891,0.030838 -0.2227361,0.067391 -0.036298,0.027913 -0.086245,0.08065 -0.1097931,0.207992 L 7.7983426,9.1905497 C 7.5731467,10.418223 6.5020336,11.309767 5.2540666,11.310067 H 0.00146991 V 9.0602079 H 5.2540666 c 0.1619749,-3e-4 0.3017962,-0.1159578 0.3310293,-0.2753378 z"
99
fill="currentcolor"
1010
/>
1111
</Svg>

‎src/lib/holocene/icon/svg/workflows.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts">
2+
import Svg from '../svg.svelte';
3+
let props = $props();
4+
</script>
5+
6+
<Svg {...props}>
7+
<path
8+
d="M 7.8124945,24 H 0 V 16.187491 H 7.8124945 Z M 20.093818,16.187491 c
9+
2.157091,0 3.906037,1.749091 3.906182,3.906327 C 24,22.251055 22.251055,24
10+
20.093818,24 c -2.157382,0 -3.906327,-1.748945 -3.906327,-3.906182
11+
1.45e-4,-2.157236 1.748945,-3.906327 3.906327,-3.906327 z M 2.1818182,21.818182
12+
H 5.6306764 V 18.369309 H 2.1818182 Z M 20.093818,18.369309 c -0.952291,0
13+
-1.724363,0.772218 -1.724509,1.724509 0,0.952146 0.772073,1.724364
14+
1.724509,1.724364 0.952146,0 1.724364,-0.772218 1.724364,-1.724364
15+
-1.46e-4,-0.952291 -0.772218,-1.724509 -1.724364,-1.724509 z m
16+
-5.184727,2.815418 H 9.0909091 V 19.002909 H 14.909091 Z M 4.9971636,14.909091 H
17+
2.8153455 V 9.0909091 H 4.9971636 Z M 3.9062545,0 c 2.1572655,4.3636364e-5
18+
3.90624,1.7489745 3.90624,3.9062545 -4.36e-5,2.1572364 -1.7490036,3.9061964
19+
-3.90624,3.90624 C 1.7489745,7.8124945 4.3636364e-5,6.06352 0,3.9062545
20+
0,1.7489455 1.7489455,0 3.9062545,0 Z M 24,7.8124945 H 16.187491 V 0 H 24 Z M
21+
3.9062545,2.1818182 c -0.9523345,0 -1.7244363,0.7721018 -1.7244363,1.7244363
22+
4.36e-5,0.9522764 0.7721309,1.7244219 1.7244363,1.7244219 0.9522473,-4.37e-5
23+
1.7243782,-0.7721746 1.7244219,-1.7244219 0,-0.9523054 -0.7721455,-1.7243927
24+
-1.7244219,-1.7244363 z M 18.369309,5.6306764 h 3.448873 V 2.1818182 H 18.369309
25+
Z M 14.909091,4.9971636 H 9.0909091 V 2.8153455 h 5.8181819 z"
26+
fill="currentColor"
27+
/>
28+
</Svg>

‎src/lib/holocene/navigation/cloud-nav-bar.svelte‎

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,69 @@
1212
version: string;
1313
navOpen: boolean;
1414
subtitle?: string;
15+
subtitleHref?: string;
1516
children?: Snippet;
1617
bottom?: Snippet;
1718
ontoggle: () => void;
1819
}
1920
20-
let { version, navOpen, subtitle, children, bottom, ontoggle }: Props =
21-
$props();
21+
let {
22+
version,
23+
navOpen,
24+
subtitle,
25+
subtitleHref,
26+
children,
27+
bottom,
28+
ontoggle,
29+
}: Props = $props();
2230
</script>
2331

2432
<div
2533
class="flex items-center justify-between pb-4 group-data-[nav=closed]:flex-col group-data-[nav=closed]:gap-2"
2634
>
27-
<a
28-
href={resolve('', {})}
29-
class="text-inherit flex items-center gap-2 no-underline"
30-
>
31-
<Logo
32-
height={24}
33-
width={24}
34-
class={merge('m-1', subtitle !== 'Cloud' && 'hidden')}
35-
/>
35+
<div class="flex flex-row items-center justify-start">
36+
<a href={resolve('', {})} class="text-inherit flex items-center">
37+
<Logo
38+
height={24}
39+
width={24}
40+
class={merge(subtitle !== 'Cloud' && 'hidden')}
41+
/>
42+
</a>
3643
{#if subtitle}
37-
<h2
38-
class={merge(
39-
'font-secondary mb-0 hidden whitespace-nowrap font-medium text-white group-data-[nav=open]:block',
40-
subtitle === 'Cloud' ? 'text-2xl' : 'text-base',
41-
subtitle !== 'Cloud' && 'px-2',
42-
)}
43-
>
44-
{subtitle}
45-
</h2>
44+
{#if subtitleHref}
45+
<a href={subtitleHref} class="contents">
46+
<Icon
47+
label="Project Namespaces"
48+
name="arrow-left"
49+
class="m-1.5 text-indigo-100 group-data-[nav=closed]:hidden"
50+
/>
51+
<h2
52+
class={merge(
53+
'mb-0 hidden whitespace-nowrap px-1 pr-2 font-sans font-medium not-italic text-indigo-100 underline group-data-[nav=open]:block',
54+
subtitle === 'Cloud' ? 'text-2xl' : 'text-xs underline-offset-2',
55+
)}
56+
>
57+
{subtitle}
58+
</h2>
59+
</a>
60+
{:else}
61+
<h2
62+
class={merge(
63+
'mb-0 hidden whitespace-nowrap pl-2 font-sans font-medium not-italic text-indigo-100 group-data-[nav=open]:block',
64+
subtitle === 'Cloud' ? 'text-2xl' : 'text-xs',
65+
)}
66+
>
67+
{subtitle}
68+
</h2>
69+
{/if}
4670
{/if}
47-
</a>
71+
</div>
4872
<button
4973
title={navOpen ? 'Collapse Navigation' : 'Expand Navigation'}
5074
class="mx-[8px] justify-self-end transition-[opacity,transform] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-success"
5175
onclick={ontoggle}
5276
>
53-
<Icon name="collapse" />
77+
<Icon name="collapse" class="text-indigo-100" />
5478
</button>
5579
</div>
5680
<div role="list">

‎src/lib/holocene/navigation/navigation-button.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
data-track-intent="action"
2727
data-track-text={label}
2828
class={merge(
29-
'relative mb-1 flex items-center whitespace-nowrap p-1 pl-2 text-sm hover:bg-black hover:bg-opacity-25 group-[.surface-black]:hover:bg-white group-[.surface-black]:hover:bg-opacity-25',
29+
'relative mb-1 flex items-center whitespace-nowrap pl-1 text-sm hover:bg-black hover:bg-opacity-25 group-[.surface-black]:hover:bg-white group-[.surface-black]:hover:bg-opacity-25',
3030
disabled && 'pointer-events-none cursor-not-allowed opacity-50',
3131
className,
3232
)}

0 commit comments

Comments
 (0)