stellar-docs/sds-elements.css at main · stellar/stellar-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/* SDS for Mintlify: element styling (type scale, text colors, links, tables, inline code, monospace font).
   Part of sds-mintlify-kit, built against @stellar/design-system 4.0.2 and Mintlify theme "sequoia".
   Tokens only (var(--sds-*) from sds-tokens.css); no raw colors.
   Selectors: documented Mintlify IDs (#content-area, #page-title, #navbar) plus the `.prose` content
   wrapper. #navigation-items / #table-of-contents are observed in the DOM but not documented. */
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600;700&display=swap");

/* SDS monospace everywhere. .font-mono covers API reference paths and request samples. */
code,
pre,
kbd,
.font-mono {
  font-family: var(--sds-ff-monospace);
}

/* Page title = SDS Heading sm (2rem/2.5rem), weight medium, gray-12 */
#content-area #page-title {
  font-family: var(--sds-ff-heading);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: var(--sds-fw-medium);
  letter-spacing: -0.02em;
  color: var(--sds-clr-gray-12);
}

/* Body text: SDS site uses gray-11 base text, 16px, 1.6 line-height */
#content-area .prose {
  color: var(--sds-clr-gray-11);
  font-size: var(--sds-fs-primary);
  line-height: 1.6;
}
#content-area .prose p,
#content-area .prose li {
  color: var(--sds-clr-gray-11);
  line-height: 1.6;
}
#content-area .prose strong,
#content-area .prose b {
  color: var(--sds-clr-gray-12);
  font-weight: var(--sds-fw-semi-bold);
}

/* Heading scale: h2 = Heading xs (1.5rem/2rem), h3 1.25/1.75, h4 1.125/1.625, all weight medium, gray-12 */
#content-area .prose h2,
#content-area .prose h3,
#content-area .prose h4,
#content-area .prose h5 {
  font-family: var(--sds-ff-heading);
  font-weight: var(--sds-fw-medium);
  color: var(--sds-clr-gray-12);
  letter-spacing: -0.01em;
}
#content-area .prose h2 { font-size: 1.5rem; line-height: 2rem; margin-top: 2.5rem; margin-bottom: 1rem; }
#content-area .prose h3 { font-size: 1.25rem; line-height: 1.75rem; margin-top: 2rem; margin-bottom: 0.75rem; }
#content-area .prose h4 { font-size: 1.125rem; line-height: 1.625rem; }
#content-area .prose h5 { font-size: 1rem; line-height: 1.5rem; font-weight: var(--sds-fw-semi-bold); }

/* Links = SDS Link primary: lilac-11, medium, no underline; hover lilac-12 underline */
#content-area .prose a:not([class*="card"]):not([data-component-part]):not(.sds *),
#content-area .prose a.link:not(.sds *) {
  color: var(--sds-clr-lilac-11);
  font-weight: var(--sds-fw-medium);
  text-decoration: none;
  border-bottom: 0;
  transition: color var(--sds-anim-transition-default);
}
#content-area .prose a:not([class*="card"]):not([data-component-part]):not(.sds *):hover,
#content-area .prose a.link:not(.sds *):hover {
  color: var(--sds-clr-lilac-12);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Inline code = SDS Code: mono, gray-12 on gray-03 with gray-06 border, 0.25rem radius */
#content-area .prose :not(pre) > code {
  font-family: var(--sds-ff-monospace);
  font-size: 0.875em;
  font-weight: var(--sds-fw-regular);
  color: var(--sds-clr-gray-12);
  background-color: var(--sds-clr-gray-03);
  border: 1px solid var(--sds-clr-gray-06);
  border-radius: 0.25rem;
  padding: 0.0625rem 0.25rem;
}

/* Tables: gray-06 header rule, gray-04 row rules, no vertical borders, 14px */
#content-area .prose table {
  font-size: var(--sds-fs-secondary);
  line-height: 1.25rem;
  border-collapse: collapse;
}
#content-area .prose thead th {
  color: var(--sds-clr-gray-11);
  font-weight: var(--sds-fw-medium);
  font-size: 0.75rem;
  line-height: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--sds-clr-gray-06);
  padding: 0.5rem 0.75rem;
}
#content-area .prose tbody td {
  color: var(--sds-clr-gray-12);
  border-bottom: 1px solid var(--sds-clr-gray-04);
  padding: 0.625rem 0.75rem;
  vertical-align: top;
}
#content-area .prose tbody tr:last-child td { border-bottom: 0; }

/* Rules and quotes */
#content-area .prose hr { border-color: var(--sds-clr-gray-04); }
#content-area .prose blockquote {
  border-left: 2px solid var(--sds-clr-gray-06);
  color: var(--sds-clr-gray-11);
  font-style: normal;
}

/* Sidebar + TOC as on SDS's docs site: 14px medium, gray-11, active gray-12.
   IDs observed in the DOM, not in Mintlify's documented list. */
#navigation-items a,
#table-of-contents a {
  font-size: var(--sds-fs-secondary);
  font-weight: var(--sds-fw-medium);
  color: var(--sds-clr-gray-11);
}
#navigation-items a:hover,
#table-of-contents a:hover,
#navigation-items a[aria-current],
#table-of-contents a[aria-current] {
  color: var(--sds-clr-gray-12);
}

/* Inline SDS icon helper for JSX icons in prose */
.sds-inline-icon { display: inline-flex; vertical-align: -0.15em; width: 1em; height: 1em; color: var(--sds-clr-gray-12); }
.sds-inline-icon svg { width: 100%; height: 100%; }