Skip to content

Commit 8ae936b

Browse files
gadenbuiegadenbuie
committed
feat(shiny-scss): Create variable defaults specific to the Bootstrap version
1 parent 6dc3778 commit 8ae936b

File tree

4 files changed

+77
-17
lines changed

4 files changed

+77
-17
lines changed

‎R/shinyui.R‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,11 @@ shinyDependencyCSS <- function(theme) {
133133
))
134134
}
135135

136+
bs_version <- bslib::theme_version(theme)
137+
bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss")
138+
136139
scss_home <- system_file("www/shared/shiny_scss", package = "shiny")
137-
scss_files <- file.path(scss_home, c("bootstrap.scss", "shiny.scss"))
140+
scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss"))
138141
scss_files <- lapply(scss_files, sass::sass_file)
139142

140143
bslib::bs_dependency(

‎inst/www/shared/shiny_scss/bootstrap.scss‎ renamed to ‎inst/www/shared/shiny_scss/shiny.bootstrap3.scss‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
$bg: $body-bg !default;
2+
$fg: $text-color !default; // BS3
3+
$theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
24

3-
$fg: null !default;
4-
$theme-colors: null !default;
5-
@if variable-exists('text-color') {
6-
$fg: $text-color !default; // BS3
7-
$theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
8-
} @else {
9-
$fg: $body-color !default; // BS4
10-
}
115
// No $border-width, $border-color, or $border-radius in BS3
126
$border-width: 1px !default;
137
$border-color: mix($bg, $fg, 70%) !default;
@@ -39,11 +33,3 @@ $notification-close-color: mix($bg, $fg, 20%) !default;
3933
$notification-close-hover-color: $fg !default;
4034
$notification-content-action-color: map-get($theme-colors, "primary") !default;
4135
$datepicker-disabled-color: $dropdown-link-disabled-color !default;
42-
43-
// I don't think BS3 has a file input box shadow setting
44-
@if variable-exists('custom-file-focus-box-shadow') {
45-
$shiny-file-active-shadow: $custom-file-focus-box-shadow !default;
46-
}
47-
48-
// TODO: should this be changed to danger?
49-
//$shiny-error-color: red !default;

‎inst/www/shared/shiny_scss/shiny.bootstrap4.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
$bg: $body-bg !default;
2+
$fg: $body-color !default;
3+
4+
$shiny-disconnected-bg: mix($bg, $fg, 58%) !default;
5+
$shiny-table-na: mix($bg, $fg, 54%) !default;
6+
$shiny-error-validated-color: mix($bg, $fg, 50%) !default;
7+
// TODO: what should this be? mix of primary and bg?
8+
$shiny-progress-text-bg-color: #eef8ff !default;
9+
$shiny-input-panel-bg: mix($bg, $fg, 96%) !default;
10+
$shiny-input-panel-border: $border-width solid $border-color !default;
11+
$shiny-input-panel-border-radius: $border-radius !default;
12+
$shiny-text-output-border-radius: $border-radius !default;
13+
$notification-bg-color: mix($bg, $fg, 90%) !default;
14+
$notification-color: $fg !default;
15+
$notification-border: $border-width solid $border-color !default;
16+
$notification-border-radius: $border-radius !default;
17+
$notification-message-bg: mix($bg, map-get($theme-colors, "info"), 90%) !default;
18+
$notification-message-color: mix($fg, map-get($theme-colors, "info"), 10%) !default;
19+
$notification-message-border: $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
20+
$notification-warning-bg: mix($bg, map-get($theme-colors, "warning"), 90%) !default;
21+
$notification-warning-color: mix($fg, map-get($theme-colors, "warning"), 10%) !default;
22+
$notification-warning-border: $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
23+
$notification-error-bg: mix($bg, map-get($theme-colors, "danger"), 90%) !default;
24+
$notification-error-color: mix($fg, map-get($theme-colors, "danger"), 10%) !default;
25+
$notification-error-border: $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
26+
$notification-close-color: mix($bg, $fg, 20%) !default;
27+
$notification-close-hover-color: $fg !default;
28+
$notification-content-action-color: map-get($theme-colors, "primary") !default;
29+
$datepicker-disabled-color: $dropdown-link-disabled-color !default;
30+
31+
$shiny-file-active-shadow: $custom-file-focus-box-shadow !default;
32+
33+
// TODO: should this be changed to danger?
34+
//$shiny-error-color: red !default;

‎inst/www/shared/shiny_scss/shiny.bootstrap5.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
$shiny-emphasis-color-rgb: var(--#{$prefix}emphasis-color-rgb, 0,0,0) !default;
2+
3+
$shiny-disconnected-bg: RGBA($shiny-emphasis-color-rgb, 0.42) !default;
4+
$shiny-table-na: RGBA($shiny-emphasis-color-rgb, 0.46) !default;
5+
$shiny-error-color: var(--#{$prefix}danger-text-emphasis) !default;
6+
$shiny-error-validated-color: RGBA($shiny-emphasis-color-rgb, 0.5) !default;
7+
$shiny-progress-text-bg-color: RGBA(var(--#{$prefix}primary-rgb, #{to-rgb($primary)}), 0.05) !default;
8+
9+
$shiny-input-panel-bg: RGBA($shiny-emphasis-color-rgb, 0.04) !default;
10+
$shiny-input-panel-border: $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
11+
$shiny-input-panel-border-radius: $border-radius !default;
12+
$shiny-text-output-border-radius: $border-radius !default;
13+
14+
$notification-color: var(--#{$prefix}emphasis-color, #{$body-emphasis-color}) !default;
15+
$notification-bg-color: var(--#{$prefix}body-bg, #{$body-bg}) !default;
16+
$notification-border: $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
17+
$notification-border-radius: $border-radius !default;
18+
19+
$notification-message-color: var(--#{$prefix}info-text-emphasis) !default;
20+
$notification-message-bg: var(--#{$prefix}info-bg-subtle) !default;
21+
$notification-message-border: $border-width solid var(--#{$prefix}info-border-subtle) !default;
22+
23+
$notification-warning-color: var(--#{$prefix}warning-text-emphasis) !default;
24+
$notification-warning-bg: var(--#{$prefix}warning-bg-subtle) !default;
25+
$notification-warning-border: $border-width solid var(--#{$prefix}warning-border-subtle) !default;
26+
27+
$notification-error-color: var(--#{$prefix}danger-text-emphasis) !default;
28+
$notification-error-bg: var(--#{$prefix}danger-bg-subtle) !default;
29+
$notification-error-border: $border-width solid var(--#{$prefix}danger-border-subtle) !default;
30+
31+
$notification-close-color: RGBA($shiny-emphasis-color-rgb, 0.8) !default;
32+
$notification-close-hover-color: RGB($shiny-emphasis-color-rgb) !default;
33+
$notification-content-action-color: RGB(var(--#{$prefix}primary-rgb, #{to-rgb($primary)})) !default;
34+
35+
$datepicker-disabled-color: $dropdown-link-disabled-color !default;
36+
37+
$shiny-file-active-shadow: $input-focus-box-shadow !default;

0 commit comments

Comments
 (0)