@f5xc-salesdemos/docs-theme 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/LinkCard.astro +79 -79
- package/fonts/font-face.css +10 -10
- package/package.json +1 -1
- package/styles/custom.css +21 -48
|
@@ -3,103 +3,103 @@ import Icon from './Icon.astro';
|
|
|
3
3
|
import type { HTMLAttributes } from 'astro/types';
|
|
4
4
|
|
|
5
5
|
interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
icon?: string;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
const { title, description, icon, ...attributes } = Astro.props;
|
|
12
12
|
---
|
|
13
13
|
|
|
14
14
|
<div class:list={['sl-link-card', { 'has-icon': !!icon }]}>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
15
|
+
{icon && (
|
|
16
|
+
<span class="card-icon">
|
|
17
|
+
<Icon name={icon} />
|
|
18
|
+
</span>
|
|
19
|
+
)}
|
|
20
|
+
<span class="sl-flex stack">
|
|
21
|
+
<a {...attributes}>
|
|
22
|
+
<span class="title" set:html={title} />
|
|
23
|
+
</a>
|
|
24
|
+
{description && <span class="description" set:html={description} />}
|
|
25
|
+
</span>
|
|
26
|
+
<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
<style>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
30
|
+
.sl-link-card {
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: 1fr auto;
|
|
33
|
+
gap: 0.5rem;
|
|
34
|
+
border: 1px solid var(--sl-color-gray-5);
|
|
35
|
+
border-radius: 0.5rem;
|
|
36
|
+
padding: 1rem;
|
|
37
|
+
box-shadow: var(--f5-shadow-low);
|
|
38
|
+
position: relative;
|
|
39
|
+
transition: box-shadow var(--f5-transition-base),
|
|
40
|
+
transform var(--f5-transition-base);
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
.sl-link-card.has-icon {
|
|
44
|
+
grid-template-columns: auto 1fr auto;
|
|
45
|
+
}
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
a {
|
|
48
|
+
text-decoration: none;
|
|
49
|
+
line-height: var(--sl-line-height-headings);
|
|
50
|
+
}
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
/* a11y fix for https://github.com/withastro/starlight/issues/487 */
|
|
53
|
+
a::before {
|
|
54
|
+
content: '';
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
}
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
.stack {
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: 0.5rem;
|
|
62
|
+
}
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
.title {
|
|
65
|
+
color: var(--sl-color-white);
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
font-size: var(--sl-text-lg);
|
|
68
|
+
}
|
|
69
69
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
.description {
|
|
71
|
+
color: var(--sl-color-gray-3);
|
|
72
|
+
line-height: 1.5;
|
|
73
|
+
}
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
.icon {
|
|
76
|
+
color: var(--sl-color-gray-3);
|
|
77
|
+
}
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
79
|
+
.card-icon {
|
|
80
|
+
color: var(--sl-color-white);
|
|
81
|
+
align-self: stretch;
|
|
82
|
+
position: relative;
|
|
83
|
+
aspect-ratio: 1;
|
|
84
|
+
max-height: 3rem;
|
|
85
|
+
}
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
.card-icon :global(svg) {
|
|
88
|
+
position: absolute;
|
|
89
|
+
inset: 0;
|
|
90
|
+
width: 100%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
}
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
94
|
+
/* Hover state */
|
|
95
|
+
.sl-link-card:hover {
|
|
96
|
+
background: var(--sl-color-gray-7, var(--sl-color-gray-6));
|
|
97
|
+
border-color: var(--sl-color-gray-2);
|
|
98
|
+
box-shadow: var(--f5-shadow-mid);
|
|
99
|
+
transform: translateY(-1px);
|
|
100
|
+
}
|
|
101
101
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
.sl-link-card:hover .icon {
|
|
103
|
+
color: var(--sl-color-white);
|
|
104
|
+
}
|
|
105
105
|
</style>
|
package/fonts/font-face.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@font-face {
|
|
2
|
-
font-family:
|
|
2
|
+
font-family: neusaNextProWide;
|
|
3
3
|
font-weight: 300;
|
|
4
4
|
font-style: normal;
|
|
5
5
|
font-display: swap;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@font-face {
|
|
10
|
-
font-family:
|
|
10
|
+
font-family: neusaNextProWide;
|
|
11
11
|
font-weight: 400;
|
|
12
12
|
font-style: normal;
|
|
13
13
|
font-display: swap;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
@font-face {
|
|
18
|
-
font-family:
|
|
18
|
+
font-family: neusaNextProWide;
|
|
19
19
|
font-weight: 500;
|
|
20
20
|
font-style: normal;
|
|
21
21
|
font-display: swap;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
@font-face {
|
|
26
|
-
font-family:
|
|
26
|
+
font-family: neusaNextProWide;
|
|
27
27
|
font-weight: 700;
|
|
28
28
|
font-style: normal;
|
|
29
29
|
font-display: swap;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
@font-face {
|
|
34
|
-
font-family:
|
|
34
|
+
font-family: neusaNextProWide;
|
|
35
35
|
font-weight: 400;
|
|
36
36
|
font-style: italic;
|
|
37
37
|
font-display: swap;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@font-face {
|
|
42
|
-
font-family:
|
|
42
|
+
font-family: neusaNextProWide;
|
|
43
43
|
font-weight: 700;
|
|
44
44
|
font-style: italic;
|
|
45
45
|
font-display: swap;
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
@font-face {
|
|
50
|
-
font-family:
|
|
50
|
+
font-family: proximaNova;
|
|
51
51
|
font-weight: 400;
|
|
52
52
|
font-style: normal;
|
|
53
53
|
font-display: swap;
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
@font-face {
|
|
58
|
-
font-family:
|
|
58
|
+
font-family: proximaNova;
|
|
59
59
|
font-weight: 500;
|
|
60
60
|
font-style: normal;
|
|
61
61
|
font-display: swap;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
@font-face {
|
|
66
|
-
font-family:
|
|
66
|
+
font-family: proximaNova;
|
|
67
67
|
font-weight: 600;
|
|
68
68
|
font-style: normal;
|
|
69
69
|
font-display: swap;
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
@font-face {
|
|
74
|
-
font-family:
|
|
74
|
+
font-family: proximaNova;
|
|
75
75
|
font-weight: 700;
|
|
76
76
|
font-style: normal;
|
|
77
77
|
font-display: swap;
|
package/package.json
CHANGED
package/styles/custom.css
CHANGED
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
--f5-bay-2: #66afd7;
|
|
36
36
|
--f5-bay-3: #005c8d;
|
|
37
37
|
--f5-bay-4: #003d5f;
|
|
38
|
-
--f5-white: #
|
|
38
|
+
--f5-white: #fff;
|
|
39
39
|
--f5-white-1: #faf9f7;
|
|
40
40
|
--f5-white-2: #f5f5f5;
|
|
41
41
|
--f5-white-3: #e6e6e6;
|
|
42
|
-
--f5-white-4: #
|
|
43
|
-
--f5-black: #
|
|
44
|
-
--f5-black-1: #
|
|
45
|
-
--f5-black-2: #
|
|
42
|
+
--f5-white-4: #ccc;
|
|
43
|
+
--f5-black: #000;
|
|
44
|
+
--f5-black-1: #999;
|
|
45
|
+
--f5-black-2: #666;
|
|
46
46
|
--f5-black-3: #343434;
|
|
47
|
-
--f5-black-4: #
|
|
47
|
+
--f5-black-4: #222;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
/* ===== F5 XC Multi-Color Icon Variables ===== */
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
/* Borders — dark mode (alpha-transparent) */
|
|
116
116
|
--f5-border-faint: #f5f5f51a;
|
|
117
117
|
--f5-border-default: #f5f5f533;
|
|
118
|
-
--f5-border-strong: #
|
|
118
|
+
--f5-border-strong: #ccc6;
|
|
119
119
|
|
|
120
120
|
/* Surfaces — dark mode */
|
|
121
121
|
--f5-surface-hover: var(--f5-black-3);
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
/* Borders — light mode */
|
|
174
174
|
--f5-border-faint: #3434341a;
|
|
175
175
|
--f5-border-default: #34343433;
|
|
176
|
-
--f5-border-strong: #
|
|
176
|
+
--f5-border-strong: #2226;
|
|
177
177
|
|
|
178
178
|
/* Surfaces — light mode */
|
|
179
179
|
--f5-surface-hover: var(--f5-white-2);
|
|
@@ -412,8 +412,8 @@ h4, h5, h6 {
|
|
|
412
412
|
font-family: var(--sl-font);
|
|
413
413
|
}
|
|
414
414
|
|
|
415
|
-
.swatch-color.text-light { color: #
|
|
416
|
-
.swatch-color.text-dark { color: #
|
|
415
|
+
.swatch-color.text-light { color: #fff; }
|
|
416
|
+
.swatch-color.text-dark { color: #000; }
|
|
417
417
|
|
|
418
418
|
.swatch-label {
|
|
419
419
|
padding: 0.5rem;
|
|
@@ -549,13 +549,13 @@ body {
|
|
|
549
549
|
}
|
|
550
550
|
|
|
551
551
|
/* ===== Phase 4: Button Component System ===== */
|
|
552
|
-
.btn-primary
|
|
552
|
+
.btn-primary,
|
|
553
|
+
.btn-secondary,
|
|
554
|
+
.btn-tertiary,
|
|
555
|
+
.btn-critical {
|
|
553
556
|
display: inline-flex;
|
|
554
557
|
align-items: center;
|
|
555
558
|
gap: 0.5rem;
|
|
556
|
-
background: var(--f5-red);
|
|
557
|
-
color: var(--f5-white);
|
|
558
|
-
border: none;
|
|
559
559
|
border-radius: var(--f5-radius-sm);
|
|
560
560
|
padding: 0.625rem 1rem;
|
|
561
561
|
min-height: 2.5rem;
|
|
@@ -564,6 +564,12 @@ body {
|
|
|
564
564
|
font-family: var(--sl-font);
|
|
565
565
|
cursor: pointer;
|
|
566
566
|
text-decoration: none;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.btn-primary {
|
|
570
|
+
background: var(--f5-red);
|
|
571
|
+
color: var(--f5-white);
|
|
572
|
+
border: none;
|
|
567
573
|
transition: background-color var(--f5-transition-fast),
|
|
568
574
|
box-shadow var(--f5-transition-fast);
|
|
569
575
|
}
|
|
@@ -575,20 +581,9 @@ body {
|
|
|
575
581
|
}
|
|
576
582
|
|
|
577
583
|
.btn-secondary {
|
|
578
|
-
display: inline-flex;
|
|
579
|
-
align-items: center;
|
|
580
|
-
gap: 0.5rem;
|
|
581
584
|
background: transparent;
|
|
582
585
|
color: var(--sl-color-gray-2);
|
|
583
586
|
border: 1px solid var(--f5-border-default);
|
|
584
|
-
border-radius: var(--f5-radius-sm);
|
|
585
|
-
padding: 0.625rem 1rem;
|
|
586
|
-
min-height: 2.5rem;
|
|
587
|
-
font-weight: 500;
|
|
588
|
-
font-size: 0.875rem;
|
|
589
|
-
font-family: var(--sl-font);
|
|
590
|
-
cursor: pointer;
|
|
591
|
-
text-decoration: none;
|
|
592
587
|
transition: background-color var(--f5-transition-fast),
|
|
593
588
|
border-color var(--f5-transition-fast);
|
|
594
589
|
}
|
|
@@ -599,20 +594,9 @@ body {
|
|
|
599
594
|
}
|
|
600
595
|
|
|
601
596
|
.btn-tertiary {
|
|
602
|
-
display: inline-flex;
|
|
603
|
-
align-items: center;
|
|
604
|
-
gap: 0.5rem;
|
|
605
597
|
background: transparent;
|
|
606
598
|
color: var(--sl-color-accent);
|
|
607
599
|
border: none;
|
|
608
|
-
border-radius: var(--f5-radius-sm);
|
|
609
|
-
padding: 0.625rem 1rem;
|
|
610
|
-
min-height: 2.5rem;
|
|
611
|
-
font-weight: 500;
|
|
612
|
-
font-size: 0.875rem;
|
|
613
|
-
font-family: var(--sl-font);
|
|
614
|
-
cursor: pointer;
|
|
615
|
-
text-decoration: none;
|
|
616
600
|
transition: background-color var(--f5-transition-fast);
|
|
617
601
|
}
|
|
618
602
|
.btn-tertiary:hover {
|
|
@@ -624,20 +608,9 @@ body {
|
|
|
624
608
|
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 3rem; }
|
|
625
609
|
|
|
626
610
|
.btn-critical {
|
|
627
|
-
display: inline-flex;
|
|
628
|
-
align-items: center;
|
|
629
|
-
gap: 0.5rem;
|
|
630
611
|
background: var(--f5-red-3);
|
|
631
612
|
color: var(--f5-white);
|
|
632
613
|
border: none;
|
|
633
|
-
border-radius: var(--f5-radius-sm);
|
|
634
|
-
padding: 0.625rem 1rem;
|
|
635
|
-
min-height: 2.5rem;
|
|
636
|
-
font-weight: 500;
|
|
637
|
-
font-size: 0.875rem;
|
|
638
|
-
font-family: var(--sl-font);
|
|
639
|
-
cursor: pointer;
|
|
640
|
-
text-decoration: none;
|
|
641
614
|
transition: background-color var(--f5-transition-fast),
|
|
642
615
|
box-shadow var(--f5-transition-fast);
|
|
643
616
|
}
|
|
@@ -668,7 +641,7 @@ body {
|
|
|
668
641
|
background: linear-gradient(180deg, #faf9f7 0%, #f5f5f5 100%);
|
|
669
642
|
}
|
|
670
643
|
:root:not([data-theme='light']) .hero-gradient-faint {
|
|
671
|
-
background: linear-gradient(180deg, #
|
|
644
|
+
background: linear-gradient(180deg, #222 0%, #000 100%);
|
|
672
645
|
}
|
|
673
646
|
|
|
674
647
|
.hero-fade {
|