Skip to content

Add styles/variables for two-column block #60

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.

Sign up for GitHub

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

Merged
xitij2000 merged 1 commit into from
May 21, 2026
Merged

Add styles/variables for two-column block #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions paragon/css/core/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,8 @@
--pgn-typography-alert-line-height: 1.5rem;
--pgn-typography-badge-font-size: 75%;
--pgn-typography-btn-font-size-base: 1rem;
--pgn-typography-btn-font-weight: 700;
--pgn-typography-btn-line-height-base: 1.5;
--pgn-typography-dropdown-item-text-decoration: none;
--pgn-typography-image-figure-caption-font-size: 90%;
--pgn-typography-menu-select-btn-link-text-decoration-line: underline;
Expand Down Expand Up @@ -541,8 +543,6 @@
--pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
--pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
--pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
--pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
--pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
--pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
--pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs);
--pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
Expand Down Expand Up @@ -639,6 +639,8 @@
--pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
--pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
--pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
--pgn-two-column-block-image-size-border-radius-lg: var(--pgn-wgu-size-border-radius-m);
--pgn-two-column-block-image-size-border-radius-sm: var(--pgn-wgu-size-border-radius-xs);
--pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
--pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
--pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
Expand Down
5 changes: 5 additions & 0 deletions tokens/core/two-column-block.toml
View file
Open in desktop

@xitij2000 xitij2000 May 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Putting it in tokens/core will add the prefix "pgn". Instead you should put it in apps/two-column/file.toml to not get a prefix. More here: https://github.com/openedx/paragon/tree/release-23.x/tokens#application-tokens

This is a very recent addition to paragon, just a week or two old!

@samuelallan72 samuelallan72 May 20, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xitij2000 ah cool, good to know thanks 👍

@samuelallan72 samuelallan72 May 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xitij2000 unfortunately it doesn't work - if I move core/two-column-block.toml to apps/two-column-block/main.toml, I get this error:

two.column.block.image.size.border.radius.lg.$value tries to reference wgu.size.border.radius.m, which is not defined.
two.column.block.image.size.border.radius.sm.$value tries to reference wgu.size.border.radius.xs, which is not defined.

@xitij2000 xitij2000 May 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this seems to be a shortcoming of Paragon. I've contributed a fix here: openedx/paragon#4303

The issue is that paragon only looks at its own token set for tokens in the apps directory, so it doesn't see any custom tokens in our theme and considers it an error if we use them.

You can kind of solve this by using the css variable value, i.e.:

[two-column-block.image.size.border.radius]
"$value" = "var(--pgn-wgu-size-border-radius.m)"

Note: While the output variable will be the same, you should use "two-column-block...." rather than "two.column.block..." since "two-column-block" is an entity of its own.

@samuelallan72 samuelallan72 May 20, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xitij2000 ah nice, thanks!

Note: While the output variable will be the same, you should use "two-column-block...." rather than "two.column.block..." since "two-column-block" is an entity of its own.

Ah got it, that makes sense. I'll update that here. :)

Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
[two-column-block.image.size.border.radius.lg]
"$value" = "{wgu.size.border.radius.m}"

[two-column-block.image.size.border.radius.sm]
"$value" = "{wgu.size.border.radius.xs}"
6 changes: 6 additions & 0 deletions tokens/core/typography.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,9 @@

[typography.line-height.display.base]
"$value" = "1.15"

[typography.btn.font.weight]
"$value" = "700"

[typography.btn.line-height.base]
"$value" = "1.5"