diff --git a/R/bs-theme-preset-builtin.R b/R/bs-theme-preset-builtin.R index 69b0bd855..dc2cda74b 100644 --- a/R/bs-theme-preset-builtin.R +++ b/R/bs-theme-preset-builtin.R @@ -12,16 +12,28 @@ builtin_themes <- function(version = version_default(), full_path = FALSE) { } builtin_bundle <- function(name = "shiny", version = version_default()) { - theme <- validate_builtin_preset_name(name, version = version) + name <- validate_builtin_preset_name(name, version = version) - switch_version( - version, - five = switch( - theme, - shiny = sass_bundle( - "builtin" = sass_layer( - defaults = sass_file(path_builtin_theme("shiny", "shiny.scss", version = version)) - ) + font_css <- path_builtin_theme(name, "font.css", version = version) + attachments <- if (file.exists(font_css)) { + c( + "font.css" = font_css, + fonts = system_file("fonts", package = "bslib") + ) + } + + path_variables <- path_builtin_theme(name, "_variables.scss", version = version) + path_rules <- path_builtin_theme(name, "_rules.scss", version = version) + + sass_bundle( + "builtin" = sass_layer( + file_attachments = attachments, + defaults = list( + '$web-font-path: "font.css" !default;', + sass_file(path_variables) + ), + rules = list( + if (file.exists(path_rules)) sass_file(path_rules) ) ) ) diff --git a/R/bs-theme-preset.R b/R/bs-theme-preset.R index 8432c3ffb..a6a5f4d35 100644 --- a/R/bs-theme-preset.R +++ b/R/bs-theme-preset.R @@ -108,7 +108,7 @@ assert_preset_only_one_name_arg <- function(name, bootswatch, .frame = rlang::ca abort_preset_unknown_name <- function(name, version, .frame = rlang::caller_env()) { msg <- c( - sprintf("'%s' is not a known preset theme name", name), + sprintf("'%s' is not a known preset theme name for Bootstrap version %s.", name, version), "i" = "You can list available preset themes:", "*" = sprintf("Built-in: `builtin_themes(%s)`", version), "*" = sprintf("Bootswatch: `bootswatch_themes(%s)`.", version) diff --git a/inst/builtin/bs5/shiny/_rules.scss b/inst/builtin/bs5/shiny/_rules.scss new file mode 100644 index 000000000..7d34f4ee9 --- /dev/null +++ b/inst/builtin/bs5/shiny/_rules.scss @@ -0,0 +1,31 @@ +/*-- scss:rules --*/ +$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" !default; +@if $web-font-path { + @import url($web-font-path); +} + +// move checkbox and radio text slightly to the right +.checkbox input, +.radio input { + margin-right: 0.35em; +} + +// make selected item more accessible +.selectize-dropdown-content .option.selected.active, +.selectize-dropdown-content .option:hover, +.selectize-dropdown-content .option:active { + background-color: $blue; + color: $white; +} + +// make non-selected items slightly different visually (but still 3:1 contrast) +// TODO: Restore this if we fix https://github.com/rstudio/shiny/issues/3839 +// .selectize-dropdown-content .option.active { +// background-color: tint-color($blue, 25%); +// color: $white; +// } + +// fix "to" width in the middle of the date picker +.shiny-date-range-input .input-daterange .input-group-addon { + margin-right: -1px; +} diff --git a/inst/builtin/bs5/shiny/shiny.scss b/inst/builtin/bs5/shiny/_variables.scss similarity index 72% rename from inst/builtin/bs5/shiny/shiny.scss rename to inst/builtin/bs5/shiny/_variables.scss index 6bba73fcc..b8da7bfd1 100644 --- a/inst/builtin/bs5/shiny/shiny.scss +++ b/inst/builtin/bs5/shiny/_variables.scss @@ -10,6 +10,7 @@ $green: #00891a !default; $teal: #00bf7f !default; $cyan: #03c7e8 !default; $white: #ffffff !default; + $gray: #606060 !default; $gray-dark: #303030 !default; $gray-100: #f8f8f8 !default; @@ -21,6 +22,7 @@ $gray-600: #707782 !default; $gray-700: #48505f !default; $gray-800: #343a46 !default; $gray-900: #1d1f21 !default; + $default: #dee2e6 !default; $primary: #007bc2 !default; $secondary: #404040 !default; @@ -30,6 +32,7 @@ $warning: #f9b928 !default; $danger: #c10000 !default; $light: #f8f8f8 !default; $dark: #202020 !default; + $default-rgb: 222, 226, 230 !default; $primary-rgb: 0, 123, 194 !default; $secondary-rgb: 64, 64, 64 !default; @@ -43,53 +46,42 @@ $white-rgb: 255, 255, 255 !default; $black-rgb: 0, 0, 0 !default; $body-color-rgb: 52, 58, 70 !default; $body-bg-rgb: 255, 255, 255 !default; + $gradient: linear-gradient( 180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) ) !default; + +$base-font: "Open Sans" !default; +$font-family-sans-serif: $base-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-monospace: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$headings-font-family: $font-family-sans-serif !default; + $root-font-size: 18px !default; $body-font-size: 1rem !default; +$h1-font-size: 2.1rem !default; + $body-font-weight: 400 !default; +$headings-font-weight: 400 !default; + $body-color: $gray-900 !default; $body-bg: #ffffff !default; + $hr-margin-y: 2rem !default; + $input-btn-font-size: 15px !default; + $btn-font-weight: 500 !default; $btn-padding-y: 0.75em !default; $btn-padding-x: 2em !default; -$h1-font-size: 2.1rem !default; + + $form-check-input-width: 1.2em !default; $form-check-input-border-radius: 2px !default; $form-check-margin-bottom: 0.25rem !default; -$input-border-color: $gray-500 !default; $form-text-color: $red !default; -$border-radius: 3px !default; -/*-- scss:rules --*/ - -// move checkbox and radio text slightly to the right -.checkbox input, -.radio input { - margin-right: 0.35em; -} - -// make selected item more accessible -.selectize-dropdown-content .option.selected.active, -.selectize-dropdown-content .option:hover, -.selectize-dropdown-content .option:active { - background-color: $blue; - color: $white; -} - -// make non-selected items slightly different visually (but still 3:1 contrast) -// TODO: Restore this if we fix https://github.com/rstudio/shiny/issues/3839 -// .selectize-dropdown-content .option.active { -// background-color: tint-color($blue, 25%); -// color: $white; -// } +$input-border-color: $gray-500 !default; -// fix "to" width in the middle of the date picker -.shiny-date-range-input .input-daterange .input-group-addon { - margin-right: -1px; -} +$border-radius: 3px !default; diff --git a/inst/builtin/bs5/shiny/font.css b/inst/builtin/bs5/shiny/font.css new file mode 100644 index 000000000..b74f3e139 --- /dev/null +++ b/inst/builtin/bs5/shiny/font.css @@ -0,0 +1,124 @@ +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk5hkaVQ.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVQ.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVQ.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVQ.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjaVQ.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 800; + font-stretch: normal; + font-display: swap; + src: url(fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVQ.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4k.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4k.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4k.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4k.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4k.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 800; + font-stretch: normal; + font-display: swap; + src: url(fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4k.woff) format('woff'); +} +@font-face { + font-family: 'Source Code Pro'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url(fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTbI1rSg.woff) format('woff'); +} +@font-face { + font-family: 'Source Code Pro'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url(fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTsoprSg.woff) format('woff'); +} +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQhM0.woff) format('woff'); +} +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DBKXhM0.woff) format('woff'); +} diff --git a/inst/fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DBKXhM0.woff b/inst/fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DBKXhM0.woff new file mode 100644 index 000000000..d992182e2 Binary files /dev/null and b/inst/fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DBKXhM0.woff differ diff --git a/inst/fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQhM0.woff b/inst/fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQhM0.woff new file mode 100644 index 000000000..913496c95 Binary files /dev/null and b/inst/fonts/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQhM0.woff differ diff --git a/inst/fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTbI1rSg.woff b/inst/fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTbI1rSg.woff new file mode 100644 index 000000000..5c95d895b Binary files /dev/null and b/inst/fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTbI1rSg.woff differ diff --git a/inst/fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTsoprSg.woff b/inst/fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTsoprSg.woff new file mode 100644 index 000000000..3fce06f47 Binary files /dev/null and b/inst/fonts/HI_jiYsKILxRpg3hIP6sJ7fM7PqlOPHYvDP_W9O7GQTTsoprSg.woff differ diff --git a/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVQ.woff b/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVQ.woff new file mode 100644 index 000000000..0755bfa52 Binary files /dev/null and b/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVQ.woff differ diff --git a/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVQ.woff b/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVQ.woff new file mode 100644 index 000000000..f418ca539 Binary files /dev/null and b/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVQ.woff differ diff --git a/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVQ.woff b/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVQ.woff new file mode 100644 index 000000000..e6eb87247 Binary files /dev/null and b/inst/fonts/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVQ.woff differ diff --git a/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4k.woff b/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4k.woff new file mode 100644 index 000000000..8c67c0f84 Binary files /dev/null and b/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4k.woff differ diff --git a/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4k.woff b/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4k.woff new file mode 100644 index 000000000..4e728bc02 Binary files /dev/null and b/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4k.woff differ diff --git a/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4k.woff b/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4k.woff new file mode 100644 index 000000000..94227eeee Binary files /dev/null and b/inst/fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4k.woff differ diff --git a/tests/testthat/_snaps/bs-theme-preset.md b/tests/testthat/_snaps/bs-theme-preset.md index 167aee042..822438f15 100644 --- a/tests/testthat/_snaps/bs-theme-preset.md +++ b/tests/testthat/_snaps/bs-theme-preset.md @@ -32,7 +32,7 @@ Code resolve_bs_preset(name = "not_a_preset", version = 4) Error - 'not_a_preset' is not a known preset theme name + 'not_a_preset' is not a known preset theme name for Bootstrap version 4. i You can list available preset themes: * Built-in: `builtin_themes(4)` * Bootswatch: `bootswatch_themes(4)`. @@ -42,7 +42,7 @@ Code resolve_bs_preset(bootswatch = "not_a_preset", version = 4) Error - 'not_a_preset' is not a known preset theme name + 'not_a_preset' is not a known preset theme name for Bootstrap version 4. i You can list available preset themes: * Built-in: `builtin_themes(4)` * Bootswatch: `bootswatch_themes(4)`. diff --git a/tools/download_bootswatch_fonts.R b/tools/download_preset_fonts.R similarity index 81% rename from tools/download_bootswatch_fonts.R rename to tools/download_preset_fonts.R index fc66faf7a..a67863240 100644 --- a/tools/download_bootswatch_fonts.R +++ b/tools/download_preset_fonts.R @@ -1,7 +1,7 @@ library(stringr) # if (Sys.getenv("RSTUDIO") == "1") { -# stop("Please run this script from the command line: `Rscript tools/fonts.R`") +# stop("Please run this script from the command line: `Rscript tools/download_preset_fonts.R`") # } # TODO: make sure this isn't drastically different from 2.1 Mb @@ -14,8 +14,15 @@ extract_first_group <- function(x, pattern) { na.omit(sapply(matches, "[", 2)) } -download_and_copy_fonts <- function(theme) { - theme_scss <- readLines(file.path(theme, "_bootswatch.scss")) +download_and_copy_fonts <- function(theme, rule_file = "_bootswatch.scss") { + theme_file <- file.path(theme, rule_file) + + if (!file.exists(theme_file)) { + stop("Couldn't find '", rule_file, "' in ", theme) + } + + theme_scss <- readLines(theme_file) + web_font_path <- grep("$web-font-path:", theme_scss, value = TRUE, fixed = TRUE) if (!length(web_font_path)) { return() @@ -65,7 +72,14 @@ themes3 <- list.dirs( recursive = FALSE, full.names = TRUE ) +builtin5 <- list.dirs( + "inst/builtin/bs5", + recursive = FALSE, + full.names = TRUE +) lapply(themes5, download_and_copy_fonts) lapply(themes4, download_and_copy_fonts) lapply(themes3, download_and_copy_fonts) + +lapply(builtin5, download_and_copy_fonts, rule_file = "_rules.scss") diff --git a/tools/main.R b/tools/main.R index 77a1128c4..0b38c877e 100644 --- a/tools/main.R +++ b/tools/main.R @@ -6,7 +6,7 @@ pkgload::load_all() lapply(c( "yarn_install.R", - "download_bootswatch_fonts.R", + "download_preset_fonts.R", "update_gfont_info.R", "expand_variables_article_template.R" ), function(file) {