Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ENH - Scalable colour system for theme #1174

Merged
merged 77 commits into from Jun 20, 2023
Merged
Show file tree
Hide file tree
Changes from 68 commits
Commits
Show all changes
77 commits
Select commit Hold shift + click to select a range
2063ff5
Merge remote-tracking branch 'upstream/main' into main
Feb 8, 2023
2ae812e
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Feb 9, 2023
af45d7e
:memo: Update file names in documentation
trallard Feb 9, 2023
63af297
:art: Update mixins to match new colour system
trallard Feb 10, 2023
06ad737
:wheelchair: Update colours
trallard Feb 10, 2023
74c2eea
:wheelchair: Update foundation and text colours
trallard Feb 10, 2023
722f4d5
Add more colours - shadows and neutrals
trallard Feb 13, 2023
fbe4f35
:wheelchair: Replace text colour function w/WCAG one
trallard Feb 13, 2023
0d4dfe7
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Feb 13, 2023
4e71156
:recycle: Add full color system to root
trallard Feb 13, 2023
e072eb1
:wheelchair: Update variables - use color names
trallard Feb 13, 2023
884b822
:wheelchair: Ensure all the colours are evaluated correctly
trallard Feb 14, 2023
d520b72
Update mixins - move to separate file
trallard Feb 14, 2023
38c6dc7
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Feb 16, 2023
c4f9894
Update contrast ratios - add comments
trallard Feb 19, 2023
fe6fe76
♿️ Add luminance formula and ignore text col for now
trallard Feb 19, 2023
244772a
Update variables and remove debugs
trallard Feb 19, 2023
66bc02d
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Feb 19, 2023
7ef23d8
:zap: Improve colours parsing
trallard Feb 23, 2023
ef43e09
:wheelchair: Update admonition bg colours
trallard Feb 23, 2023
16678ea
Update headings colours
trallard Feb 23, 2023
0c9a6b5
:wheelchair: Change topic text colour and replace mixins
trallard Feb 24, 2023
f89e262
:wheelchair: Minor tweaks to secondary colour
trallard Feb 24, 2023
055f7c0
:wheelchair: Update code and announcement colours
trallard Feb 24, 2023
7930b5d
Update text-muted in dark theme
trallard Feb 24, 2023
a663273
♿️ Buttons are now WCAG AA conformant
trallard Feb 24, 2023
f1b3787
:lipstick: Update tabs hover
trallard Feb 24, 2023
5a6ae4c
♿️ Tweaks to colours in small components
trallard Mar 20, 2023
cb5b81b
♿️ Move WCAG contrast to mixin file
trallard Mar 20, 2023
9ed2d8c
Update theming docs
trallard Mar 20, 2023
8d55e7d
:memo: Update a11y docs
trallard Mar 20, 2023
7b94982
Update accessibility docs
trallard Mar 20, 2023
d21b3ed
Fix search button text contrast
trallard Mar 21, 2023
33484dd
Fix colours in admonitions
trallard Mar 21, 2023
655826c
Ensure we use WCAG compliant text color
trallard Mar 21, 2023
6943a46
Update docs - web components
trallard Mar 21, 2023
bcce67e
Fix quotes text colour
trallard Mar 21, 2023
19f789c
Add more details re accessibility
trallard Mar 21, 2023
16cb353
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Mar 21, 2023
daf994d
📝 Add accessibility notes to docs
trallard Mar 22, 2023
aafb573
:lipstick: Ensure we are generating background colours too
trallard Mar 22, 2023
59b265e
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Mar 27, 2023
1a883d1
:bug: Fix attention bg colour
trallard Mar 27, 2023
d62eb87
:bug: Fix bg colour issues
trallard Mar 27, 2023
d460b67
🎨 Improve sd colours
trallard Mar 27, 2023
5d7ebf4
Update styling
trallard Mar 27, 2023
6a710b0
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Mar 27, 2023
5aed77c
Lint files
trallard Mar 27, 2023
7d350f9
:heavy_minus_sign: Remove unused mixin
trallard Mar 27, 2023
a3395c3
Fix issues introduced by merging main
trallard Mar 28, 2023
2deceac
Add dropdowns background
trallard Apr 7, 2023
e3724a8
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Apr 7, 2023
cd3d67a
:memo: Update docs
trallard Apr 7, 2023
a855f97
:pencil2: Fix grammar and spelling
trallard Apr 13, 2023
fb789ab
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Apr 14, 2023
58aceaf
Minor edits to docs
trallard Apr 16, 2023
c11e0c3
Fix colour in code blocks
trallard Apr 16, 2023
6702fc2
:zap: Use math.pow - we use dart sass now
trallard Apr 17, 2023
17b0e35
:zap: Use math.pow
trallard Apr 17, 2023
d439d79
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Apr 17, 2023
f5f3795
:zap: Update mixins
trallard Apr 18, 2023
940a6b1
Merge remote-tracking branch 'upstream/main' into trallard/color-system
trallard Jun 13, 2023
659ecca
:heavy_plus_sign: Add math import in mixins
trallard Jun 13, 2023
85c1464
Fix highlight colour - pygments
trallard Jun 13, 2023
1330c74
Fix inline code links contrast
trallard Jun 13, 2023
8566578
Add selector to print - a11y tests
trallard Jun 13, 2023
181ed57
Fix line numbers contrast
trallard Jun 13, 2023
6dedf8e
Fix announcement link colours
trallard Jun 13, 2023
71ead9e
Merge branch 'main' into trallard/color-system
trallard Jun 14, 2023
0f1ffb9
Adjust background colours - light theme
trallard Jun 15, 2023
4c17a23
Update search highlight colours
trallard Jun 16, 2023
4687c7d
:wheelchair: Change hover colour to improve contrast
trallard Jun 16, 2023
9405a85
Update docs to align with system
trallard Jun 16, 2023
c0e54db
:see_no_evil: Update gitignore file
trallard Jun 19, 2023
e5830a2
Apply suggestions from code review
trallard Jun 19, 2023
559b1f7
:bug: Use correct variable names
trallard Jun 19, 2023
d3cdc27
Fix title colour in custom admonitions
trallard Jun 19, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/_static/custom.css
Expand Up @@ -25,13 +25,13 @@
/* begin-custom-color/* <your static path>/custom.css */

div.admonition.admonition-olive {
border-color: olive;
border-color: hsl(60, 100%, 25%);
}
div.admonition.admonition-olive > .admonition-title:before {
background-color: olive;
background-color: hsl(60, 100%, 14%);
}
div.admonition.admonition-olive > .admonition-title:after {
color: olive;
color: hsl(60, 100%, 25%);
}
/* end-custom-color */

Expand All @@ -45,13 +45,13 @@ div.admonition.admonition-icon > .admonition-title:after {
/* begin-custom-youtube/* <your static path>/custom.css */

div.admonition.admonition-youtube {
border-color: #ff0000; /* YouTube red */
border-color: hsl(0, 100%, 50%); /* YouTube red */
}
div.admonition.admonition-youtube > .admonition-title:before {
background-color: #ff0000;
background-color: hsl(0, 99%, 18%);
}
div.admonition.admonition-youtube > .admonition-title:after {
color: #ff0000;
color: hsl(0, 100%, 50%);
content: "\f26c"; /* fa-solid fa-tv */
}
/* end-custom-youtube */
2 changes: 1 addition & 1 deletion docs/_templates/custom-template.html
@@ -1,6 +1,6 @@
<div class="sidebar-message">
This is a community-supported theme.
If you'd like to contribute,
<a href="https://github.com/pydata/pydata-sphinx-theme">check out our GitHub repository</a>
<a href="https://github.com/pydata/pydata-sphinx-theme">check out our GitHub repository.</a>
Your contributions are welcome!
</div>
2 changes: 1 addition & 1 deletion docs/community/contributors.md
Expand Up @@ -17,4 +17,4 @@ Support and development for this theme has been funded by one [NumFocus Small De

## Theme logo

Thanks to [@drammock](https://github.com/drammock) for initial design of the theme logo.
Thanks to [@drammock](https://github.com/drammock) for the initial design of the theme logo.
14 changes: 7 additions & 7 deletions docs/community/practices/merge.md
@@ -1,20 +1,20 @@
# Merge and review policy

Our policy for merging and reviewing describes how we review one another's work, and when we allow others to merge changes into our main codebase.
It tries to balance between a few goals:
It tries to balance a few goals:

- Iterate on PRs and merge them relatively quickly, so that we reduce the debt associated with long-lasting PRs.
- Give enough time for others to provide their input and guide the PR itself, and to ensure that we aren't creating a problem with the PR.
- Value iterative improvement over creating the perfect Pull Request, so that we do not burden contributors with cumbersome discussion and minor revision requests.
- Recognize that we all have limited time and resources, and so cannot guarantee a full quality assurance process each time.
- Give general preference to the opinions from maintainers of projects in the PyData ecosystem, as a key stakeholder community of this theme.
- Give general preference to the opinions of maintainers of projects in the PyData ecosystem, as a key stakeholder community of this theme.

We follow these guidelines in order to achieve these goals:
We follow these guidelines to achieve these goals:

- Assume that all maintainers are acting in good faith and will use their best judgment to make decisions in the best interests of the repository.
- We can and will make mistakes, and so encourage best practices in testing and documentation to guard against this.
- It's important to share information, so give a best effort at telling others about work that you're doing.
- It's best to discuss and agree on important decisions at a high level before implementation, so give a best effort at providing time and invitation for others to provide feedback.
- We can and will make mistakes, so encourage best practices in testing and documentation to guard against this.
- It's important to share information, so give your best effort at telling others about the work that you're doing.
- It's best to discuss and agree on important decisions at a high level before implementation, so give the best effort at providing time and invitation for others to provide feedback.

## Policy for moderate changes

Expand All @@ -35,7 +35,7 @@ They can be merged when the above conditions are met, and one of these things ha

These are changes that significantly alter the experience of the user, or that add significant complexity to the codebase.

All of the above, but PRs **must** have approval from at least one other core maintainer before merging.
All the above, but PRs **must** have approval from at least one other core maintainer before merging.
In addition, the PR author should put extra effort into ensuring that the relevant stakeholders are notified about a change, so they can gauge its impact and provide feedback.

## Policy For minor changes and bugfixes
Expand Down
2 changes: 1 addition & 1 deletion docs/community/practices/release.md
Expand Up @@ -5,7 +5,7 @@
## Our goals

Our release policy describes how we decide when to make a new public release of the theme so that other projects may use new features and improvements.
It tries to balance between these goals:
It tries to balance these goals:

- Release relatively frequently, so that we provide a continuous stream of improvement to projects that use the theme, and minimize the effort needed to upgrade.
- Do not surprise people (especially with negative surprises) and provide time for projects to provide feedback about upcoming features.
Expand Down
10 changes: 5 additions & 5 deletions docs/community/practices/versions.md
@@ -1,24 +1,24 @@
# Supported Python and Sphinx versions

Python and Sphinx are the two primary dependencies of this theme.
We have special practices for deciding which versions of these we support (especially Sphinx, which tends to release breaking changes).
We have particular practices for deciding which versions of these we support (especially Sphinx, which tends to release breaking changes).

## Supported Python versions

For releases of Python, we aim to follow this approach[^1]:

> For a new major/minor release of this theme, we support any minor Python versions released in the last 3.5 years (42 months), as defined in [the EOL schedule for Python](https://endoflife.date/python)[^2].

We define "support" as testing against each of these versions, so that users can be assured they will not trigger any bugs.
We define "support" as testing against each of these versions so that users can be assured they will not trigger any bugs.

For example, if we made a minor release tomorrow, we'd [look at the EOL schedule for Python](https://endoflife.date/python) and support all of the versions that fall within a 3.5 year window.
For example, if we made a minor release tomorrow, we'd [look at the EOL schedule for Python](https://endoflife.date/python) and support all the versions that fall within a 3.5-year window.

[^1]: Our support for Python versions is inspired by [NEP 029](https://numpy.org/neps/nep-0029-deprecation_policy.html).
[^2]: These policies are goals, but not promises. We are a volunteer-led community with limited time. Consider these sections to be our intention, but we recognize that we may not always be able to meet these criteria if we do not have capacity to do so. We welcome contributions from others to help us more sustainably meet these goals!
[^2]: These policies are goals, but no promises. We are a volunteer-led community with limited time. Consider these sections to be our intention, but we recognize that we may not always be able to meet these criteria if we cannot do so. We welcome contributions from others to help us more sustainably meet these goals!
trallard marked this conversation as resolved.
Show resolved Hide resolved

## Supported Sphinx versions

For supporting versions of Sphinx, we aim to follow this approach:
For supported versions of Sphinx, we aim to follow this approach:

> We support the latest released version of Sphinx that is **older than 6 months**.
> We unofficially support earlier released versions of Sphinx, but may increase the lower-bound in our dependency pin without warning if needed[^2].
Expand Down
2 changes: 1 addition & 1 deletion docs/community/setup.md
Expand Up @@ -18,7 +18,7 @@ of:
For each pull request, the documentation is built and deployed to make it easier to review the changes in the PR.
To access this, click on the {{ rtd }} preview in the CI/CD jobs.

The sections below cover the steps to do this in more detail.
The sections below cover the steps to take in more detail.

## Clone the repository

Expand Down
6 changes: 3 additions & 3 deletions docs/community/structure.md
Expand Up @@ -9,14 +9,14 @@ The content is written in a combination of reStructuredText and MyST Markdown.
## Location and structure of CSS/JS assets

The CSS and JS for this theme are built for the browser from `src/pydata_sphinx_theme/assets/*` with
[webpack](https://webpack.js.org/). The main entrypoints are:
[webpack](https://webpack.js.org/). The main entry points are:

- CSS: `src/pydata_sphinx_theme/assets/styles/index.scss`
- CSS: `src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss`

- the main part of the theme assets
- customizes [Bootstrap](https://getbootstrap.com/) with [Sass](https://sass-lang.com)

- JS: `src/pydata_sphinx_theme/assets/scripts/index.js`
- JS: `src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js`

- provides add-on Bootstrap features, as well as some custom navigation behavior

Expand Down
8 changes: 4 additions & 4 deletions docs/community/topics/assets.md
Expand Up @@ -38,7 +38,7 @@ This is configured in the `webpack.config.js` file, and imported in the respecti
## FontAwesome icons

Three "styles" of the [FontAwesome 6 Free](https://fontawesome.com/icons?m=free)
icon font are used for {ref}`icon links <icon-links>` and admonitions, and is
icon font are used for {ref}`icon links <icon-links>` and admonitions and is
the only `vendored` font.

- It is managed as a dependency in `package.json`
Expand All @@ -50,7 +50,7 @@ the only `vendored` font.

Our Webpack build generates a collection of [Jinja macros](https://jinja.palletsprojects.com/en/3.0.x/templates/#macros) in the `static/webpack-macros.html` file.

These macros are imported in the main `layout.html` file, and then inserted at various places in the page to link the static assets.
These macros are imported in the main `layout.html` file, and then inserted at various places on the page to link the static assets.

Some of the assets [are "preloaded"](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload), meaning that the browser begins requesting these resources before they're actually needed.
In particular, our JavaScript assets are preloaded in `<head>`, and the scripts are actually loaded at the end of `<body>`.
Some assets [are "preloaded"](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload), meaning that the browser begins requesting these resources before they're needed.
In particular, our JavaScript assets are preloaded in `<head>`, and the scripts are loaded at the end of `<body>`.
8 changes: 4 additions & 4 deletions docs/community/topics/bootstrap.rst
Expand Up @@ -10,16 +10,16 @@ Dropping **JQuery**
Bootstrap Dropped its **JQuery** dependency and rewrote plugins to be in regular JavaScript.
Sphinx *v6* will do the same (https://github.com/sphinx-doc/sphinx/issues/10070).
As a consequence, we also rewrote all our javascript to only use vanilla **JavaScript**.
Any documentation relying on **JQuery** in their ``custom.js`` files will need to rewrite it or specifically import **JQuery**.
Any documentation relying on **JQuery** in their ``custom.js`` files will need to rewrite or specifically import **JQuery**.

Breaking changes
----------------

‼️ Relevant for those using a ``custom.css`` and/or a ``custom.js`` file!

Bootstrap changed a number of CSS classes, so if you wrote custom rules of JS logic that depended on them, it may have changed.
Bootstrap changed several CSS classes, so if you wrote custom rules of JS logic that depended on them, it may have changed.

All of the changes from *v4* to *v5* are `listed in their documentation <https://getbootstrap.com/docs/5.0/migration/>`_.
All the changes from *v4* to *v5* are `listed in their documentation <https://getbootstrap.com/docs/5.0/migration/>`_.
Below list the ones that had consequences on ``pydata-sphinx-theme`` components.

Sass
Expand Down Expand Up @@ -57,4 +57,4 @@ Utilities
JavaScript
^^^^^^^^^^

- Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use ``data-bs-toggle`` instead of ``data-toggle``.
- Data attributes for all JavaScript plugins are now name spaced to help distinguish Bootstrap functionality from third parties and your code. For example, we use ``data-bs-toggle`` instead of ``data-toggle``.
trallard marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 1 addition & 1 deletion docs/community/topics/config.md
Expand Up @@ -8,7 +8,7 @@ Here are some tips to do this the "right" way in Sphinx.
## Update config: use `app.config`

For example, `app.config.foo = "bar"`.
For some reason, when Sphinx sets things it directly uses `__dict__` but this doesn't seem to be different from the pattern described here.
For some reason, when Sphinx sets things it directly uses `__dict__`, but this doesn't seem to be different from the pattern described here.

## Update theme options: use `app.builder.theme_options`

Expand Down
4 changes: 2 additions & 2 deletions docs/community/topics/manual-dev.md
Expand Up @@ -51,15 +51,15 @@ $ sphinx-build docs docs/_build/html

## Compile web assets (JS/CSS)

To compile the javascript and CSS assets for the theme, run the following command:
To compile the JavaScript and CSS assets for the theme, run the following command:

```console
$ stb compile
```

This will compile everything in the `src/pydata_sphinx_theme/assets` folder and place them in the appropriate places in our theme's folder structure.

## Start a live-server to build and serve your documentation
## Start a live server to build and serve your documentation

To manually open a server to watch your documentation for changes, build them, and display them locally in a browser, run this command:

Expand Down
4 changes: 2 additions & 2 deletions docs/user_guide/ablog.md
@@ -1,13 +1,13 @@
# Blogs with `ABlog`

The [ABlog extension](https://ablog.readthedocs.io/) allows you to tag pages as **blog posts** and additionally include them in landing pages for your blog.
It also has a number of sidebar templates to show off collections of your posts.
It also has several sidebar templates to show off collections of your posts.

:::{admonition} Minimum version ABlog v0.11.0
Make sure you have `ABlog>=0.11.0rc2` in your dependencies.
:::

This theme has styling support for ABlog, and demonstrates some of its functionality here.
This theme has styling support for ABlog and demonstrates some of its functionality here.

## Example blog

Expand Down