Skip to content

Compile using Paragon 23 with the dark theme included in the light #43

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
merged 15 commits into from
Oct 24, 2025
Merged

Compile using Paragon 23 with the dark theme included in the light #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4114989
feat: Add Paragon 23 and fix scripts.
obscherler Oct 22, 2025
b029105
fix: Remove unused imports from core.scss.
obscherler Oct 22, 2025
06773e6
feat: Replace colours with design token variables.
obscherler Oct 22, 2025
a2d325e
feat: Add light and dark themes, disable dark SCSS for now.
obscherler Oct 22, 2025
1262218
feat: Replace SCSS variables by CSS variables in dark theme.
obscherler Oct 23, 2025
bc16d6a
feat: Replace mixins with Paragon 23 versions.
obscherler Oct 23, 2025
962337e
feat: Unwrap SCSS loops, to match what is done in Paragon 23.
obscherler Oct 23, 2025
4335a8e
feat: Remove dark theme and integrate it hackily in the light theme.
obscherler Oct 23, 2025
694fe00
fix: Add lost code.
obscherler Oct 23, 2025
c0072c4
fix: Remove unused core JSON.
obscherler Oct 23, 2025
7bfa48d
feat: Update dist.
obscherler Oct 23, 2025
3218633
fix: Include abstraction-variables.css from Paragon for missing box-s…
obscherler Oct 24, 2025
f0e9839
fix: Import Bootstrap button mixins instead of whole Paragon core. Ad…
obscherler Oct 24, 2025
b0ff9fe
fix: Fix dark section of color.json: remove source and actions, updat…
obscherler Oct 24, 2025
fa4e172
feat: Import ./build/core/index.css and Paragon button mixins, don’t …
obscherler Oct 24, 2025
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
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.DS_Store
.vscode
node_modules
/node_modules
3,554 changes: 2,804 additions & 750 deletions dist/core.css
View file
Open in desktop

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

82 changes: 50 additions & 32 deletions dist/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,10 @@
--pgn-other-search-field-disabled-opacity: .3;
--pgn-other-tooltip-opacity: 1;
--pgn-other-link-emphasized-hover-darken-percentage: 15%;
--pgn-color-text-base: #111827FF;
--pgn-color-text-light: #515661FF;
--pgn-color-text-footer: #374151FF;
--pgn-color-text-primary: #515661FF;
--pgn-color-btn-bg-outline-brand: inherit;
--pgn-color-btn-bg-inverse-outline-brand: #00000000;
--pgn-color-btn-bg-outline-danger: inherit;
Expand Down Expand Up @@ -650,10 +654,24 @@
--pgn-color-gray-800: #333333FF;
--pgn-color-gray-900: #212529FF;
--pgn-color-gray-base: #707070FF;
--pgn-color-primary-base: #0A3055FF;
--pgn-color-primary-base: #15376DFF;
--pgn-color-primary-light: #F2F7F8FF;
--pgn-color-brand-base: #9D0054FF;
--pgn-color-light-base: #E1DDDBFF;
--pgn-color-dark-base: #273F2FFF;
--pgn-color-dark-primary-base: #AEC7F6FF;
--pgn-color-dark-primary-light: #292A2CFF;
--pgn-color-dark-primary-border: #777792FF;
--pgn-color-dark-brand-base: #CE80AAFF;
--pgn-color-dark-text-base: #F8F8F8FF;
--pgn-color-dark-text-footer: #374151FF;
--pgn-color-dark-text-primary: #DDDFE2FF;
--pgn-color-dark-text-button: #112F6BFF;
--pgn-color-dark-bg-light-overlay: #36383BFF;
--pgn-color-dark-bg-hover: #383938FF;
--pgn-color-dark-body-bg: #0D0D0EFF;
--pgn-color-dark-success-base: #54CF5EFF;
--pgn-color-dark-danger-base: #FFA07AFF;
--pgn-border-color-nav-tabs-link-border-hover-top: transparent;
--pgn-border-color-nav-tabs-link-border-hover-right: transparent;
--pgn-border-color-nav-tabs-link-border-hover-left: transparent;
Expand Down Expand Up @@ -807,7 +825,7 @@
--pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
--pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
--pgn-color-form-control-indicator-border: var(--pgn-color-gray-700);
--pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
--pgn-color-form-control-indicator-checked-bg-disabled: #15376D80;
--pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100);
--pgn-color-form-control-select-bg-size: var(--pgn-color-gray-100);
--pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300);
Expand Down Expand Up @@ -954,15 +972,15 @@
--pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
--pgn-color-yiq-light: var(--pgn-color-white);
--pgn-color-gray-500: var(--pgn-color-gray-base);
--pgn-color-primary-100: #F0F3F5FF;
--pgn-color-primary-200: #C2CBD5FF;
--pgn-color-primary-300: #8598AAFF;
--pgn-color-primary-400: #476480FF;
--pgn-color-primary-100: #F1F3F6FF;
--pgn-color-primary-200: #C5CDDBFF;
--pgn-color-primary-300: #8A9BB6FF;
--pgn-color-primary-400: #506992FF;
--pgn-color-primary-500: var(--pgn-color-primary-base);
--pgn-color-primary-600: #092B4DFF;
--pgn-color-primary-700: #082644FF;
--pgn-color-primary-800: #082440FF;
--pgn-color-primary-900: #07223CFF;
--pgn-color-primary-600: #133262FF;
--pgn-color-primary-700: #112C57FF;
--pgn-color-primary-800: #102952FF;
--pgn-color-primary-900: #0F274CFF;
--pgn-color-secondary-base: var(--pgn-color-gray-700);
--pgn-color-brand-100: #F9F0F5FF;
--pgn-color-brand-200: #E7BFD4FF;
Expand Down Expand Up @@ -1004,7 +1022,7 @@
--pgn-color-action-default-gray-800: #1A1A1AFF;
--pgn-color-action-default-gray-900: #0A0C0DFF;
--pgn-color-action-default-gray-base: #575757FF;
--pgn-color-action-default-primary-base: #051627FF;
--pgn-color-action-default-primary-base: #0D2142FF;
--pgn-color-action-default-brand-base: #6A0039FF;
--pgn-color-action-default-light-base: #CAC3BFFF;
--pgn-color-action-default-dark-base: #142018FF;
Expand Down Expand Up @@ -1075,10 +1093,10 @@
--pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary);
--pgn-color-badge-focus-light: var(--pgn-color-badge-text-light);
--pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark);
--pgn-color-badge-focus-bg-primary: #051627FF;
--pgn-color-badge-focus-bg-primary: #0D2142FF;
--pgn-color-badge-focus-bg-light: #CAC3BFFF;
--pgn-color-badge-focus-bg-dark: #142018FF;
--pgn-color-badge-focus-box-shadow-primary: #0A30550D;
--pgn-color-badge-focus-box-shadow-primary: #15376D0D;
--pgn-color-badge-focus-box-shadow-light: #E1DDDB0D;
--pgn-color-badge-focus-box-shadow-dark: #273F2F0D;
--pgn-color-breadcrumb-base: var(--pgn-color-primary-500);
Expand Down Expand Up @@ -1123,7 +1141,7 @@
--pgn-color-btn-hover-text-inverse-brand: #770040FF;
--pgn-color-btn-hover-text-inverse-dark: #18271DFF;
--pgn-color-btn-hover-text-inverse-light: #D0C9C6FF;
--pgn-color-btn-hover-text-inverse-primary: #061D33FF;
--pgn-color-btn-hover-text-inverse-primary: #0F274DFF;
--pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-100);
--pgn-color-btn-hover-bg-inverse-outline-brand: var(--pgn-color-brand-100);
--pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-100);
Expand All @@ -1140,7 +1158,7 @@
--pgn-color-btn-active-text-inverse-brand: #6A0039FF;
--pgn-color-btn-active-text-inverse-dark: #142018FF;
--pgn-color-btn-active-text-inverse-light: #CAC3BFFF;
--pgn-color-btn-active-text-inverse-primary: #051627FF;
--pgn-color-btn-active-text-inverse-primary: #0D2142FF;
--pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500);
--pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary);
--pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand);
Expand Down Expand Up @@ -1505,15 +1523,15 @@
--pgn-color-danger-800: #92222CFF;
--pgn-color-danger-900: #892029FF;
--pgn-color-action-default-gray-500: #575757FF;
--pgn-color-action-default-primary-100: #D1DBE1FF;
--pgn-color-action-default-primary-200: #A4B1C0FF;
--pgn-color-action-default-primary-300: #677F95FF;
--pgn-color-action-default-primary-400: #354A5FFF;
--pgn-color-action-default-primary-500: #051627FF;
--pgn-color-action-default-primary-600: #04111FFF;
--pgn-color-action-default-primary-700: #030C16FF;
--pgn-color-action-default-primary-800: #020A13FF;
--pgn-color-action-default-primary-900: #02080EFF;
--pgn-color-action-default-primary-100: #D2D8E2FF;
--pgn-color-action-default-primary-200: #A6B2C7FF;
--pgn-color-action-default-primary-300: #6B80A2FF;
--pgn-color-action-default-primary-400: #3E5171FF;
--pgn-color-action-default-primary-500: #0D2142FF;
--pgn-color-action-default-primary-600: #0B1C37FF;
--pgn-color-action-default-primary-700: #09162CFF;
--pgn-color-action-default-primary-800: #081427FF;
--pgn-color-action-default-primary-900: #071121FF;
--pgn-color-action-default-secondary-base: #2B2B2BFF;
--pgn-color-action-default-brand-100: #EACCDDFF;
--pgn-color-action-default-brand-200: #D99ABBFF;
Expand Down Expand Up @@ -1840,9 +1858,9 @@
--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus);
--pgn-color-link-base: var(--pgn-color-info-500);
--pgn-color-link-inline-base: var(--pgn-color-info-500);
--pgn-color-link-muted-hover: #020911FF;
--pgn-color-link-muted-inline-decoration: #0A30554D;
--pgn-color-link-muted-inline-hover-base: #020911FF;
--pgn-color-link-muted-hover: #09172DFF;
--pgn-color-link-muted-inline-decoration: #15376D4D;
--pgn-color-link-muted-inline-hover-base: #09172DFF;
--pgn-color-link-brand-hover: #51002BFF;
--pgn-color-link-brand-inline-decoration: #9D00544D;
--pgn-color-link-brand-inline-hover-base: #51002BFF;
Expand Down Expand Up @@ -1897,9 +1915,9 @@
--pgn-elevation-form-control-select-border-focus-color: var(--pgn-color-input-btn-focus);
--pgn-elevation-pagination-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
--pgn-elevation-input-btn-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
--pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%230A3055FF'/></svg>");
--pgn-other-content-form-control-radio-indicator-icon-checked-base: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%2315376DFF'/></svg>");
--pgn-other-content-form-control-radio-indicator-icon-checked-base: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2315376DFF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2315376DFF'/%3e%3c/svg%3e");
--pgn-other-content-form-control-select-bg-color: var(--pgn-color-form-control-select-bg-base);
--pgn-other-content-form-control-select-bg-image: var(--pgn-other-content-form-control-select-indicator-icon);
--pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
Expand Down Expand Up @@ -2033,10 +2051,10 @@
--pgn-color-link-hover: #003C5EFF;
--pgn-color-link-inline-decoration: #006DAA4D;
--pgn-color-link-inline-hover-base: #003C5EFF;
--pgn-color-link-muted-inline-hover-decoration: #020911FF;
--pgn-color-link-muted-inline-hover-decoration: #09172DFF;
--pgn-color-link-brand-inline-hover-decoration: #51002BFF;
--pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg);
--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='%230A3055FF'/></svg>");
--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='%2315376DFF'/></svg>");
--pgn-color-btn-hover-text-danger: #FFFFFFFF;
--pgn-color-btn-hover-text-info: #FFFFFFFF;
--pgn-color-btn-hover-text-secondary: #FFFFFFFF;
Expand Down
2 changes: 1 addition & 1 deletion dist/light.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/light.min.css
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions dist/theme-urls.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
{
"themeUrls": {
"core": {
"paths": {
"default": "./core.css",
"minified": "./core.min.css"
}
},
"defaults": {
"light": "light"
},
Expand All @@ -16,6 +10,12 @@
"minified": "./light.min.css"
}
}
},
"core": {
"paths": {
"default": "./core.css",
"minified": "./core.min.css"
}
}
}
}
Loading