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.

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

Jump to bottom

feat(theming): Provide body-container- variables through theming #46259

Merged
merged 2 commits into from
Jul 7, 2024
Merged

feat(theming): Provide body-container- variables through theming #46259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c9e8cdd
feat(theming): Provide `body-container-` variables through theming
susnux Jul 2, 2024
6ef88de
chore: Compile assets
susnux Jul 2, 2024
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
14 changes: 9 additions & 5 deletions apps/theming/css/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@
--color-border-maxcontrast: #7d7d7d;
--font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--default-font-size: 15px;
/* 1.5 x font-size for accessibility */
--default-line-height: 24px;
--animation-quick: 100ms;
--animation-slow: 300ms;
/** Border width for input elements such as text fields and selects */
Expand All @@ -63,16 +65,18 @@
--default-clickable-area: 34px;
--clickable-area-large: 48px;
--clickable-area-small: 24px;
--default-line-height: 24px;
--default-grid-baseline: 4px;
--header-height: 50px;
--header-menu-item-height: 44px;
--navigation-width: 300px;
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
--list-min-width: 200px;
--list-max-width: 300px;
--header-menu-item-height: 44px;
--header-menu-profile-item-height: 66px;
/* Border radius of the body container */
--body-container-radius: calc(var(--default-grid-baseline) * 3);
/* Margin of the body container */
--body-container-margin: calc(var(--default-grid-baseline) * 2);
/* Height of the body container to fully fill the view port */
--body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
--breakpoint-mobile: 1024px;
--background-invert-if-dark: no;
--background-invert-if-bright: invert(100%);
Expand Down
18 changes: 12 additions & 6 deletions apps/theming/lib/Themes/DefaultTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,8 @@ public function getCSSVariables(): array {

'--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
'--default-font-size' => '15px',
// 1.5 * font-size for accessibility
'--default-line-height' => '24px',

// TODO: support "(prefers-reduced-motion)"
'--animation-quick' => '100ms',
Expand All @@ -179,20 +181,24 @@ public function getCSSVariables(): array {
'--default-clickable-area' => '34px',
'--clickable-area-large' => '48px',
'--clickable-area-small' => '24px',
'--default-line-height' => '24px',

'--default-grid-baseline' => '4px',

// various structure data
'--header-height' => '50px',
'--header-menu-item-height' => '44px',
'--navigation-width' => '300px',
'--sidebar-min-width' => '300px',
'--sidebar-max-width' => '500px',
'--list-min-width' => '200px',
'--list-max-width' => '300px',
'--header-menu-item-height' => '44px',
'--header-menu-profile-item-height' => '66px',

// mobile. Keep in sync with core/js/js.js
// Border radius of the body container
'--body-container-radius' => 'calc(var(--default-grid-baseline) * 3)',
// Margin of the body container
'--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)',
// Height of the body container to fully fill the view port
'--body-height' => 'calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin))',

// mobile. Keep in sync with core/src/init.js
'--breakpoint-mobile' => '1024px',
'--background-invert-if-dark' => 'no',
'--background-invert-if-bright' => 'invert(100%)',
Expand Down
2 changes: 1 addition & 1 deletion core/css/apps.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion core/css/apps.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 3 additions & 12 deletions core/css/apps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,11 @@
@use 'sass:math';
@import 'functions';


:root {
/* - 2px is required for making it look nice */
--border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);

--body-container-radius: calc(var(--default-grid-baseline) * 3);
--body-container-margin: calc(var(--default-grid-baseline) * 2);
--body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin));
}

@media screen and (max-width: variables.$breakpoint-mobile) {
// Make the body full width on mobile
:root {
--body-container-margin: 0px;
--body-container-radius: 0px;
--body-container-margin: 0px !important;
--body-container-radius: 0px !important;
}
}

Expand Down
2 changes: 1 addition & 1 deletion core/css/server.css
View file
Open in desktop

Large diffs are not rendered by default.

Loading
Loading