Summary

Set an Ink theme and prepare for defining and overriding styles.

Review Request #13687 — Created April 1, 2024 and submitted April 4, 2024, 2:32 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

We now set the data-theme= on the page, using light by default. This

can be overridden using settings.DEFAULT_INK_THEME. Later, we'll

default this to "system" or to a user-specified default.
By setting the theme, we now have access to light and dark mode

variations of Ink design tokens and conditional values. We're also in a

position to begin overriding them.
We provide a couple of overrides. First, we override the default font to

use our long-standing font family (which we're not going to be changing

for this release). Second, we use a smaller font size, which is

equivalent to 11px instead of the 13px Ink currently uses by default.

These both match the existing UI, which the rest of our CSS expects.
The page class is now set on <html>, which is necessary for performing

some overrides. For compatibility, we also set it on <body> as before.

Testing Done

Tested that the UI looked and acted as it did before across all pages,

but that changing DEFAULT_INK_THEME in settings_local.py let me

opt in to dark mode or system-theme mode.
Made use of this along with several in-progress Ink changes, which make

use of this foundation.

Commits

Summary	ID
Set an Ink theme and prepare for defining and overriding styles. We now set the `data-theme=` on the page, using `light` by default. This can be overridden using `settings.DEFAULT_INK_THEME`. Later, we'll default this to "system" or to a user-specified default. By setting the theme, we now have access to light and dark mode variations of Ink design tokens and conditional values. We're also in a position to begin overriding them. We provide a couple of overrides. First, we override the default font to use our long-standing font family (which we're not going to be changing for this release). Second, we use a smaller font size, which is equivalent to 11px instead of the 13px Ink currently uses by default. These both match the existing UI, which the rest of our CSS expects. The page class is now set on `<html>`, which is necessary for performing some overrides. For compatibility, we also set it on `<body>` as before.	57b213593421ef27394a13ac9772c94803333108

Summary

Set an Ink theme and prepare for defining and overriding styles.

We now set the `data-theme=` on the page, using `light` by default. This can be overridden using `settings.DEFAULT_INK_THEME`. Later, we'll default this to "system" or to a user-specified default. By setting the theme, we now have access to light and dark mode variations of Ink design tokens and conditional values. We're also in a position to begin overriding them. We provide a couple of overrides. First, we override the default font to use our long-standing font family (which we're not going to be changing for this release). Second, we use a smaller font size, which is equivalent to 11px instead of the 13px Ink currently uses by default. These both match the existing UI, which the rest of our CSS expects. The page class is now set on `<html>`, which is necessary for performing some overrides. For compatibility, we also set it on `<body>` as before.

57b213593421ef27394a13ac9772c94803333108

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status: Closed (submitted)

Change Summary:

Pushed to release-7.x (e479c21)