Skip to content

Commit 1980f8d

Browse files
alphapapajarrodmillman
alphapapa
and
jarrodmillman
authored
Add PDST badges (#446)
* Add: Badges from PDST Fixes #445. * Docs: (web-components.md) Update badges with shortcodes --------- Co-authored-by: Jarrod Millman <jarrod.millman@gmail.com>
1 parent ad3b697 commit 1980f8d

5 files changed

Lines changed: 388 additions & 7 deletions

File tree

‎assets/theme-css/pst/components/_badges.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// Imported from file "design-style.css" from the "sphinx-design"
2+
// extension used in PyData Sphinx Theme.
3+
4+
.sd-badge {
5+
display: inline-block;
6+
padding: 0.35em 0.65em;
7+
font-size: 0.75em;
8+
font-weight: 700;
9+
line-height: 1;
10+
text-align: center;
11+
white-space: nowrap;
12+
vertical-align: baseline;
13+
border-radius: 0.25rem;
14+
}
15+
16+
// NOTE: These colors are defined in file "_sphinx_design.scss".
17+
18+
.sd-bg-primary {
19+
background-color: var(--sd-color-primary);
20+
}
21+
.sd-bg-text-primary {
22+
color: var(--pst-color-on-background);
23+
}
24+
25+
.sd-bg-text-secondary {
26+
color: var(--sd-color-secondary-text);
27+
}
28+
.sd-bg-secondary {
29+
background-color: var(--sd-color-secondary);
30+
}
31+
32+
.sd-bg-text-success {
33+
color: var(--sd-color-success-text);
34+
}
35+
.sd-bg-success {
36+
background-color: var(--sd-color-success);
37+
}
38+
39+
.sd-outline-primary {
40+
border-color: var(--sd-color-primary);
41+
border-style: solid;
42+
border-width: 1px;
43+
}
44+
.sd-text-primary {
45+
color: var(--sd-color-primary);
46+
}
47+
48+
.sd-outline-secondary {
49+
border-color: var(--sd-color-secondary);
50+
border-style: solid;
51+
border-width: 1px;
52+
}
53+
.sd-text-secondary {
54+
color: var(--sd-color-secondary);
55+
}
56+
57+
.sd-outline-success {
58+
border-color: var(--sd-color-success);
59+
border-style: solid;
60+
border-width: 1px;
61+
}
62+
.sd-text-success {
63+
color: var(--sd-color-success);
64+
}

‎assets/theme-css/pst/extensions/_sphinx_design.scss‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
/*******************************************************************************
2+
* Special-cases for the sphinx-design library, mainly to make it compatible
3+
* with the dark/light themes of pydata-sphinx-theme.
4+
*
5+
* NOTE: sphinx-design uses !important quite liberally, so here we must do the
6+
* same for our overrides to have any effect.
7+
*/
8+
@use "../variables/color" as pst-color;
9+
@use "sass:meta";
10+
@use "sass:color";
11+
12+
/*******************************************************************************
13+
* Color and variables
14+
*
15+
* This is a list of the semantic color names from sphinx-design (we only
16+
* need to override variables that sphinx-design has actually defined).
17+
* https://github.com/executablebooks/sphinx-design/blob/9226a12a/style/_colors.scss#L31-L43
18+
*/
19+
$sd-semantic-color-names: (
20+
"primary",
21+
"secondary",
22+
"success",
23+
"info",
24+
"warning",
25+
"danger",
26+
"light",
27+
"muted",
28+
"dark",
29+
"black",
30+
"white"
31+
);
32+
33+
/**
34+
* Here we create some extra --pst-color-* variables and use
35+
* them to override the value of the corresponding sphinx-design variables.
36+
* This is easier than re-writing the sphinx-design rules. Even easier would be
37+
* directly assigning our values to the --sd-color-* variables, but then our
38+
* downstream users couldn't override *our* colors and have it affect buttons
39+
* and badges.
40+
*
41+
* First, define the extra keys needed to cover the full range of semantic
42+
* color names used in sphinx-design, then merge them with the names we
43+
* already define for our own needs.
44+
* see https://sphinx-design.readthedocs.io/en/latest/css_variables.html
45+
*/
46+
$extra-semantic-colors: (
47+
"white": $foundation-white,
48+
"light": (
49+
light: $foundation-light-gray,
50+
bg-light: color.scale($foundation-light-gray, $lightness: 30%),
51+
dark: $foundation-light-gray,
52+
bg-dark: color.scale($foundation-light-gray, $lightness: -30%),
53+
),
54+
"muted": (
55+
light: $foundation-muted-gray,
56+
bg-light: color.scale($foundation-muted-gray, $lightness: 30%),
57+
dark: $foundation-light-gray,
58+
bg-dark: color.scale($foundation-muted-gray, $lightness: -30%),
59+
),
60+
"dark": $foundation-dark-gray,
61+
"black": $foundation-black,
62+
);
63+
64+
$all-colors: map-merge($pst-semantic-colors, $extra-semantic-colors);
65+
66+
@mixin create-sd-colors($value, $name) {
67+
// define the pst variables, so that downstream user overrides will work
68+
--pst-color-#{$name}: #{$value};
69+
// we are now using a11y-combination to calculate the text color - this is based
70+
// on the WCAG color contrast guidelines
71+
--pst-color-#{$name}-text: #{a11y-combination($value)};
72+
//TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work
73+
--pst-color-#{$name}-highlight: #{darken($value, 15%)};
74+
// override the sphinx-design variables
75+
--sd-color-#{$name}: var(--pst-color-#{$name});
76+
--sd-color-#{$name}-text: var(--pst-color-#{$name}-text);
77+
//TODO: highlight seems to be used for buttons @trallard to fix on a11y follow-up work
78+
--sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight);
79+
}
80+
81+
// Now we override the --sd-color-* variables.
82+
@each $mode in (light, dark) {
83+
html[data-theme="#{$mode}"] {
84+
// check if this color is defined differently for light/dark
85+
@each $name in $sd-semantic-color-names {
86+
$definition: map-get($all-colors, $name);
87+
@if type-of($definition) == map {
88+
@each $key, $value in $definition {
89+
@if str-index($key, $mode) != null {
90+
// since now we define the bg colours in the semantic colours and not
91+
// by changing opacity, we need to check if the key contains bg and the
92+
// correct mode (light/dark)
93+
@if str-index($key, "bg") != null {
94+
--sd-color-#{$name}-bg: #{$value};
95+
// create local variable
96+
$bg-var: --sd-color-#{$name}-bg;
97+
$value: check-color($value);
98+
--sd-color-#{$name}-bg-text: #{a11y-combination($value)};
99+
} @else {
100+
$value: check-color($value);
101+
@include create-sd-colors($value, $name);
102+
}
103+
}
104+
}
105+
} @else {
106+
$value: map-get($all-colors, $name);
107+
@include create-sd-colors($value, $name);
108+
}
109+
}
110+
}
111+
}
112+
113+
// Make sure the color border variables are set using our variables
114+
@each $mode in (light, dark) {
115+
html[data-theme="#{$mode}"] {
116+
--sd-color-card-border: var(--pst-color-border);
117+
}
118+
}
119+
120+
/*******************************************************************************
121+
* shadows
122+
*/
123+
html[data-theme="light"] {
124+
.sd-shadow-xs,
125+
.sd-shadow-sm,
126+
.sd-shadow-md,
127+
.sd-shadow-lg {
128+
@include box-shadow();
129+
}
130+
}
131+
132+
/*******************************************************************************
133+
* cards
134+
*/
135+
136+
.bd-content .sd-card {
137+
border: 1px solid var(--pst-color-border);
138+
139+
// TODO - --pst-color-panel-background is not defined... where is this coming from?
140+
.sd-card-header {
141+
background-color: var(--pst-color-panel-background);
142+
border-bottom: 1px solid var(--pst-color-border);
143+
}
144+
.sd-card-footer {
145+
background-color: var(--pst-color-panel-background);
146+
border-top: 1px solid var(--pst-color-border);
147+
}
148+
149+
.sd-card-body {
150+
background-color: var(--pst-color-panel-background);
151+
}
152+
}
153+
/*******************************************************************************
154+
* tabs
155+
*/
156+
157+
.bd-content .sd-tab-set {
158+
> input {
159+
// Active tab label
160+
&:checked + label {
161+
border-color: transparent transparent var(--pst-color-primary); // top LR bottom
162+
color: var(--pst-color-primary);
163+
}
164+
165+
// Hover label
166+
&:not(:checked) + label:hover {
167+
border-color: var(--pst-color-secondary);
168+
color: var(--pst-color-secondary);
169+
}
170+
}
171+
172+
// Tab label
173+
> label {
174+
color: var(--pst-color-text-muted);
175+
border-top: 0.125rem solid transparent; // so hover isn't just color change
176+
padding-top: 0.5em; // same as bottom padding, so hover overline looks OK
177+
// Hovered label
178+
html &:hover {
179+
color: var(--pst-color-secondary);
180+
border-color: var(--pst-color-secondary);
181+
}
182+
}
183+
}
184+
185+
/*******************************************************************************
186+
* Dropdowns
187+
*/
188+
189+
details.sd-dropdown {
190+
// Remove all borders to over-ride SD behavior, and we'll add our own later
191+
border: 0px !important;
192+
summary.sd-card-header {
193+
border: 0 !important;
194+
& + div.sd-summary-content {
195+
border: 0;
196+
}
197+
}
198+
// Drop shadow should behave same as admonitions
199+
@include box-shadow();
200+
201+
// Header is where the "clickable" box goes
202+
summary.sd-card-header {
203+
display: flex;
204+
align-items: center;
205+
position: relative; // So background color works
206+
font-weight: 600;
207+
padding-top: 0.5rem;
208+
padding-bottom: 0.5rem;
209+
210+
// Set a variable that we can re-use for colors later
211+
// We must set this in the current and content sibling container
212+
// so that it is defined in both places
213+
--pst-sd-dropdown-color: var(--pst-gray-500);
214+
--pst-sd-dropdown-bg-color: var(--pst-color-surface);
215+
& + div.sd-summary-content {
216+
--pst-sd-dropdown-color: var(--sd-color-card-border);
217+
}
218+
@each $name in $sd-semantic-color-names {
219+
&.sd-bg-#{$name} {
220+
--pst-sd-dropdown-color: var(--sd-color-#{$name});
221+
--pst-sd-dropdown-bg-color: var(--sd-color-#{$name}-bg);
222+
// Otherwise it won't be defined in the sibling element
223+
& + div.sd-summary-content {
224+
--pst-sd-dropdown-color: var(--sd-color-#{$name});
225+
--pst-sd-dropdown-bg-color: var(--sd-color-#{$name}-bg);
226+
}
227+
}
228+
&.sd-bg-text-#{$name} {
229+
// Use the WCAG conformant text color
230+
color: var(--sd-color-#{$name}-bg-text) !important;
231+
}
232+
}
233+
234+
@include legacy-backdrop-placeholder;
235+
background-color: var(--pst-sd-dropdown-bg-color) !important;
236+
237+
// Add a left border with the same structure as our admonitions
238+
border-left: 0.2rem solid var(--pst-sd-dropdown-color) !important;
239+
& + div.sd-summary-content {
240+
border-left: 0.2rem solid var(--pst-sd-dropdown-color) !important;
241+
border-bottom-left-radius: calc(0.25rem - 1px);
242+
background-color: var(--pst-color-on-background);
243+
}
244+
span.sd-summary-icon {
245+
display: inline-flex;
246+
align-items: center;
247+
color: var(--pst-sd-dropdown-color) !important;
248+
svg {
249+
opacity: 1;
250+
}
251+
}
252+
253+
// Positioning of the caret
254+
.sd-summary-up,
255+
.sd-summary-down {
256+
top: 0.7rem;
257+
}
258+
}
259+
}

‎assets/theme-css/pst/pydata-sphinx-theme.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
//@import "./components/versionmodified";
4848
//@import "./components/indices";
4949
//@import "./components/readthedocs-switcher";
50+
@import "./components/badges";
5051

5152
// Content blocks in standard Sphinx
5253
@import "./content/admonitions";
@@ -69,7 +70,7 @@
6970
//@import "./extensions/ethical-ads";
7071
//@import "./extensions/execution";
7172
//@import "./extensions/pydata";
72-
//@import "./extensions/sphinx_design";
73+
@import "./extensions/sphinx_design";
7374
//@import "./extensions/togglebutton";
7475
//@import "./extensions/notebooks";
7576
//@import "./extensions/leaflet";

‎doc/content/user_guide/web-components.md‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,29 @@ Below you can find some examples of the components created with the
2323

2424
Here are some of the available badges:
2525

26-
`primary`{.interpreted-text role="bdg-primary"}
27-
`secondary`{.interpreted-text role="bdg-secondary"}
28-
`success`{.interpreted-text role="bdg-success"}
29-
`primary outline`{.interpreted-text role="bdg-primary-line"}
30-
`secondary outline`{.interpreted-text role="bdg-secondary-line"}
31-
`success outline`{.interpreted-text role="bdg-success-line"}
26+
{{< badge primary >}}
27+
primary
28+
{{< /badge >}}
29+
30+
{{< badge secondary >}}
31+
secondary
32+
{{< /badge >}}
33+
34+
{{< badge success >}}
35+
success
36+
{{< /badge >}}
37+
38+
{{< badge primary outline >}}
39+
primary outline
40+
{{< /badge >}}
41+
42+
{{< badge secondary outline >}}
43+
secondary outline
44+
{{< /badge >}}
45+
46+
{{< badge success outline >}}
47+
success outline
48+
{{< /badge >}}
3249

3350
Here are some of the available button-style links, also using semantic
3451
colors:

0 commit comments

Comments
 (0)