feat: Add initial DSDL CSS and demo page #534

Scotchester · 2025-12-01T22:51:20Z

ℹ️ PR is to base branch feature/dsdl ℹ️

Closes #528

Adds design tokens, core type styles, and utility classes for the DSDL's color and typography standards
Adds a demo page showing what is currently implemented: http://localhost:4000/dsdl/

jgravois

this is already looking very promising.

we just need to figure out why your text editor auto formatting doesn't match what precommit did in its own follow-up.

src/stylesheets/main.css

src/dsdl.html

Scotchester · 2025-12-02T15:13:02Z

we just need to figure out why your text editor auto formatting doesn't match what precommit did in its own follow-up

Confession time: I committed with --no-verify to avoid those changes (not realizing they would be applied automatically). In my opinion, that particular set of changes makes the color swatch loop harder to follow, and really adds a lot of noise to the core styles table for no benefit. (I don't understand why it is fine with single-line dts but not dds, when their content is also very short.) I might spend a few minutes investigating whether that configuration can be modified to be less aggressive.

jgravois · 2025-12-02T17:11:25Z

Confession time

hah. no worries. i'm not fussed either way. it makes sense to me for you to spend a little time learning what customization hooks are available but i can live with the current behavior if its not configurable.

src/stylesheets/tokens.css

jgravois · 2025-12-02T17:23:54Z

src/stylesheets/tokens.css

+:root {
+  /* Fonts */
+  --calitp-font-stack: 'Space Grotesk', system-ui;
+  --monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;


i confirmed that Menlo is an OSX default, as is Consolas on Windows, but neither 'Cascadia Code' nor 'DejaVu Sans Mono' appear to be preinstalled on any OS that I can see us conceivably targeting.

am i missing something?

Suggested change

--monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

--monospace-font-stack: 'Source Code Pro', Menlo, Consolas, monospace;

I adapted this stack from the Monospace Code stack by Modern Font Stacks.

Cascadia Code is not exactly a Windows default, but it's a little nicer to use if it's available :)

DejaVu Sans Mono is ostensibly a Linux font.

ah, thanks for the additional context.

specifying 5 fallback fonts seems a little overkill, but its also harmless, so i'm fine with it.

jgravois · 2025-12-02T17:28:07Z

i'm 95% sure that we aren't getting a deploy preview branch in this PR because the base isn't main and not because its still in draft.

personally i'm bullish on merging anything entirely additive like this to main early, but regardless, i'll take a poke and see if i can get things wired up to deploy branch previews even when the base branch is not main temporarily.

src/_data/dsdl_colors.yml

thekaveman · 2025-12-02T18:36:08Z

Why is djlint even coming into play here? This isn't a Django site with Django templates...? I don't see it configured in the devcontainer.json file?

Scotchester · 2025-12-02T18:39:14Z

Why is djlint even coming into play here? This isn't a Django site with Django templates...? I don't see it configured in the devcontainer.json file?

It's set up with pre-commit, including configuring their CI service:

calitp.org/.pre-commit-config.yaml

Lines 1 to 2 in 3b01b3c

    
           ci: 
        
             autofix_commit_msg: "chore(pre-commit): autofix run"

It doesn't explicitly support Liquid templates, but running it in Jinja mode seems to mostly work. I'd be interested in finding one more Liquid-oriented, perhaps, if we're going to stick with Jekyll for the foreseeable future.

thekaveman · 2025-12-02T18:45:37Z

It's set up with pre-commit

Ah-ha, I forgot about that!

I'd be interested in finding one more Liquid-oriented

Agreed 👍

netlify · 2025-12-02T18:54:19Z

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	`491f705`
🔍 Latest deploy log	https://app.netlify.com/projects/cal-itp-website/deploys/692f585fdd869e0008dcad30
😎 Deploy Preview	https://deploy-preview-534--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

thekaveman · 2025-12-02T18:55:45Z

src/stylesheets/tokens.css

 :root {
+  {% for color in site.data.dsdl_colors -%}
+  --calitp-{{ color.group }}-{{ color.level }}: {{ color.value }};
+  {% endfor %}


sweeeeeeeeeet!!

Scotchester · 2025-12-02T19:08:45Z

Live demo page, now with brand color swatches, too: https://deploy-preview-534--cal-itp-website.netlify.app/dsdl

Scotchester · 2025-12-02T19:09:15Z

I think we're close to done here? Marking ready for final review!

jgravois · 2025-12-02T19:10:03Z

src/dsdl.html

+        {% comment %} Loop through every color in _data/dsdl_colors.yml {% endcomment %}
+
+        {% if color.group != current_group %} {% comment %} If we have changed groups, start a new list {% endcomment %}
+    </ol>


just to make sure i'm understanding correctly, what you wrote here is equivalent to this, correct?

{% comment %} If we have changed groups, start a new list {% endcomment %} {% if color.group != current_group %} </ol> <ol> {% endif %} {% assign current_group = color.group %}

Not exactly, in that the current code only reassigns current_group when it finds that we have changed groups, but I realize that what you are suggesting would be functionally the same. It doesn't hurt to just reassign current_group on every iteration of the for loop, and it would make the markup a bit more readable so I'll make that change!

jgravois

CIL for one (optional) naming nit. regardless, i'm lovin this 🍔

jgravois · 2025-12-02T20:06:40Z

src/stylesheets/tokens.css

+  --calitp-font-stack: 'Space Grotesk', system-ui;
+  --monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;


now that we've chatted i think it'd make sense to ditch the intermediate declarations we discussed and just prefix the two we're starting with consistently.

Suggested change

--calitp-font-stack: 'Space Grotesk', system-ui;

--monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

--dsdl-font-stack: 'Space Grotesk', system-ui;

--dsdl-monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

Yeah, I think you're right 👍

What about the color variable names? Think we should also change their prefix from calitp- to dsdl-?

What about the color variable names?

great point. they should definitely be consistent.

they say brevity is the soul of wit, but now that you mention i'm actually leaning toward being explicit and including both:

--calitp-dsdl

if that's too much of a mouthful, i'm okay with --dsdl too.

Ehhhhh, that feels a bit much. I'd prefer to keep it to just dsdl.

Pushed in c325726

Scotchester · 2025-12-02T20:46:14Z

Recording a couple of notes on the overall thought process as John and I discussed it:

We are avoiding (at least for now) creating intermediate semantic variables (for example, like Bootstrap's --bs-link-color and --bs-link-hover-color). It seemed like it could be a lot of work to just essentially duplicate that functionality that our sites are already getting from Bootstrap itself.
That said, we think the intention is for the DSDL CSS to (eventually) be able to be imported into a website on its own and be usable, without relying on Bootstrap. Thus, the inclusion of some extremely basic core styling of the body, a, code, and pre elements in core.css. I also set the h1–h6 elements to one of our core text styles, just trying to create a basic hierarchy that made sense to me. (@cmajel you might want to review this?) We can continue expanding the core styles as the DSDL develops and we define things like standard formatting for lists, or tables, etc.

jgravois

🌈🌈

Except for the three Cal-ITP brand color variables.

jgravois reviewed Dec 2, 2025

View reviewed changes

src/stylesheets/main.css Show resolved Hide resolved

src/dsdl.html Outdated Show resolved Hide resolved

jgravois reviewed Dec 2, 2025

View reviewed changes

thekaveman reviewed Dec 2, 2025

View reviewed changes

src/_data/dsdl_colors.yml Show resolved Hide resolved

thekaveman reviewed Dec 2, 2025

View reviewed changes

Scotchester force-pushed the feature/add-initial-dsdl-css branch from fabe7d9 to a087ccd Compare December 2, 2025 19:07

Scotchester marked this pull request as ready for review December 2, 2025 19:09

Scotchester requested review from a team as code owners December 2, 2025 19:09

jgravois reviewed Dec 2, 2025

View reviewed changes

jgravois approved these changes Dec 2, 2025

View reviewed changes

Scotchester added 4 commits December 2, 2025 21:19

feat(dsdl): Add DSDL design tokens, core type styles, and utilites

949d4ec

feat(dsdl): Add DSDL demo page

f30c70a

refactor(dsdl): Generate CSS color variables from YAML data

94de5d3

chore(dsdl): Change variable prefix from calitp to dsdl

491f705

Except for the three Cal-ITP brand color variables.

Scotchester force-pushed the feature/add-initial-dsdl-css branch from c325726 to 491f705 Compare December 2, 2025 21:21

Scotchester merged commit ec8baba into feature/dsdl Dec 2, 2025
5 checks passed

Scotchester deleted the feature/add-initial-dsdl-css branch December 2, 2025 21:22

	--monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	--monospace-font-stack: 'Source Code Pro', Menlo, Consolas, monospace;

		--calitp-font-stack: 'Space Grotesk', system-ui;
		--monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

feat: Add initial DSDL CSS and demo page #534

feat: Add initial DSDL CSS and demo page #534

Uh oh!

Conversation

Scotchester commented Dec 1, 2025

Uh oh!

jgravois left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Scotchester commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jgravois commented Dec 2, 2025

Uh oh!

Uh oh!

jgravois Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jgravois commented Dec 2, 2025

Uh oh!

Uh oh!

thekaveman commented Dec 2, 2025

Uh oh!

Scotchester commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thekaveman commented Dec 2, 2025

Uh oh!

netlify bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cal-itp-website ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Scotchester commented Dec 2, 2025

Uh oh!

Scotchester commented Dec 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Scotchester Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jgravois left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jgravois Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Scotchester commented Dec 2, 2025

Uh oh!

jgravois left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Scotchester commented Dec 2, 2025 •

edited

Loading

jgravois Dec 2, 2025 •

edited

Loading

Scotchester commented Dec 2, 2025 •

edited

Loading

netlify bot commented Dec 2, 2025 •

edited

Loading

Scotchester Dec 2, 2025 •

edited

Loading

jgravois Dec 2, 2025 •

edited

Loading