Skip to content

Commit

Permalink
Merge pull request #47 from nanxstats/bs5
Browse files Browse the repository at this point in the history
Add Bootstrap 5 color scales
  • Loading branch information
nanxstats committed Jun 16, 2024
2 parents 3bb5ac4 + 9a629e2 commit 0d4a833
Show file tree
Hide file tree
Showing 15 changed files with 509 additions and 44 deletions.
5 changes: 5 additions & 0 deletions NAMESPACE
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

export(pal_aaas)
export(pal_bmj)
export(pal_bs5)
export(pal_cosmic)
export(pal_d3)
export(pal_flatui)
Expand All @@ -23,10 +24,12 @@ export(pal_startrek)
export(pal_tron)
export(pal_uchicago)
export(pal_ucscgb)
export(rgb_bs5)
export(rgb_gsea)
export(rgb_material)
export(scale_color_aaas)
export(scale_color_bmj)
export(scale_color_bs5)
export(scale_color_cosmic)
export(scale_color_d3)
export(scale_color_flatui)
Expand All @@ -50,6 +53,7 @@ export(scale_color_uchicago)
export(scale_color_ucscgb)
export(scale_colour_aaas)
export(scale_colour_bmj)
export(scale_colour_bs5)
export(scale_colour_cosmic)
export(scale_colour_d3)
export(scale_colour_flatui)
Expand All @@ -73,6 +77,7 @@ export(scale_colour_uchicago)
export(scale_colour_ucscgb)
export(scale_fill_aaas)
export(scale_fill_bmj)
export(scale_fill_bs5)
export(scale_fill_cosmic)
export(scale_fill_d3)
export(scale_fill_flatui)
Expand Down
153 changes: 153 additions & 0 deletions R/continuous-bs5.R
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
#' Bootstrap 5 color palettes
#'
#' Bootstrap 5 color palettes.
#'
#' @param palette Palette type. There are 11 available options:
#' - `"blue"`
#' - `"indigo"`
#' - `"purple"`
#' - `"pink"`
#' - `"red"`
#' - `"orange"`
#' - `"yellow"`
#' - `"green"`
#' - `"teal"`
#' - `"cyan"`
#' - `"gray"`
#' @param n Number of individual colors to be generated.
#' @param alpha Transparency level, a real number in (0, 1].
#' See `alpha` in [grDevices::rgb()] for details.
#' @param reverse Logical. Should the order of the colors be reversed?
#'
#' @export rgb_bs5
#'
#' @importFrom grDevices colorRamp rgb
#' @importFrom scales manual_pal
#'
#' @author Nan Xiao | \email{me@nanx.me} | <https://nanx.me>
#'
#' @references
#' <https://getbootstrap.com/docs/5.3/customize/color/#all-colors>
#'
#' @examples
#' library("scales")
#' show_col(pal_bs5("indigo")(10))
#' show_col(pal_bs5("indigo", n = 30, alpha = 0.6, reverse = TRUE)(30))
rgb_bs5 <- function(
palette = c(
"blue", "indigo", "purple", "pink", "red", "orange", "yellow",
"green", "teal", "cyan", "gray"
), n = 10, alpha = 1, reverse = FALSE) {
palette <- match.arg(palette)

if (alpha > 1L || alpha <= 0L) stop("alpha must be in (0, 1]")

raw_cols <- ggsci_db$"bs5"[[palette]]
func_cols <- colorRamp(raw_cols, space = "Lab", interpolate = "spline")
mat_cols <- func_cols(seq(0L, 1L, length.out = n))
alpha_cols <- rgb(
mat_cols[, 1L], mat_cols[, 2L], mat_cols[, 3L],
alpha = alpha * 255L, maxColorValue = 255L
)

if (reverse) alpha_cols <- rev(alpha_cols)

alpha_cols
}

#' Bootstrap 5 color palettes
#'
#' Bootstrap 5 color palettes.
#'
#' @inheritParams rgb_bs5
#'
#' @export pal_bs5
#'
#' @importFrom scales manual_pal
#'
#' @author Nan Xiao | \email{me@nanx.me} | <https://nanx.me>
#'
#' @examples
#' library("scales")
#' show_col(pal_bs5("indigo")(10))
#' show_col(pal_bs5("indigo", n = 30, alpha = 0.6, reverse = TRUE)(30))
pal_bs5 <- function(
palette = c(
"blue", "indigo", "purple", "pink", "red", "orange", "yellow",
"green", "teal", "cyan", "gray"
), n = 10, alpha = 1, reverse = FALSE) {
palette <- match.arg(palette)

alpha_cols <- rgb_bs5(palette, n, alpha, reverse)
manual_pal(unname(alpha_cols))
}

#' Bootstrap 5 color scales
#'
#' See [pal_bs5()] for details.
#'
#' @inheritParams pal_bs5
#' @param ... Additional parameters for [ggplot2::discrete_scale()].
#'
#' @export scale_color_bs5
#'
#' @importFrom ggplot2 scale_color_gradientn
#'
#' @author Nan Xiao | \email{me@nanx.me} | <https://nanx.me>
#'
#' @rdname scale_bs5
#'
#' @examples
#' library("ggplot2")
#'
#' data("mtcars")
#' cor <- abs(cor(mtcars))
#' cor_melt <- data.frame(
#' Var1 = rep(seq_len(nrow(cor)), times = ncol(cor)),
#' Var2 = rep(seq_len(ncol(cor)), each = nrow(cor)),
#' value = as.vector(cor)
#' )
#'
#' ggplot(
#' cor_melt,
#' aes(x = Var1, y = Var2, fill = value)
#' ) +
#' geom_tile(colour = "black", size = 0.3) +
#' theme_bw() +
#' scale_fill_bs5("teal")
scale_color_bs5 <- function(
palette = c(
"blue", "indigo", "purple", "pink", "red", "orange", "yellow",
"green", "teal", "cyan", "gray"
), alpha = 1, reverse = FALSE, ...) {
palette <- match.arg(palette)
scale_color_gradientn(
colours = rgb_bs5(
palette,
n = 512, alpha = alpha, reverse = reverse
),
...
)
}

#' @export scale_colour_bs5
#' @rdname scale_bs5
scale_colour_bs5 <- scale_color_bs5

#' @export scale_fill_bs5
#' @importFrom ggplot2 scale_fill_gradientn
#' @rdname scale_bs5
scale_fill_bs5 <- function(
palette = c(
"blue", "indigo", "purple", "pink", "red", "orange", "yellow",
"green", "teal", "cyan", "gray"
), alpha = 1, reverse = FALSE, ...) {
palette <- match.arg(palette)
scale_fill_gradientn(
colours = rgb_bs5(
palette,
n = 512, alpha = alpha, reverse = reverse
),
...
)
}
12 changes: 4 additions & 8 deletions R/continuous-material.R
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
#' Material Design color palettes
#'
#' The Material Design 2 color palettes.
#' Material Design 2 color palettes.
#'
#' @param palette Palette type. There are 19 available options:
#' - `"red"`
Expand All @@ -17,15 +17,11 @@
#' - `"lime"`
#' - `"yellow"`
#' - `"amber"`
#' - `"orange"`,
#' - `"orange"`
#' - `"deep-orange"`
#' - `"brown"`
#' - `"grey"`
#' - `"blue-grey"`
#'
#' For details, see [Material Design color
#' system](https://m2.material.io/design/color/the-color-system.html).
#'
#' @param n Number of individual colors to be generated.
#' @param alpha Transparency level, a real number in (0, 1].
#' See `alpha` in [grDevices::rgb()] for details.
Expand Down Expand Up @@ -70,7 +66,7 @@ rgb_material <- function(

#' Material Design color palettes
#'
#' The Material Design 2 color palettes.
#' Material Design 2 color palettes.
#'
#' @inheritParams rgb_material
#'
Expand All @@ -96,7 +92,7 @@ pal_material <- function(
manual_pal(unname(alpha_cols))
}

#' Material Design color palettes
#' Material Design color scales
#'
#' See [pal_material()] for details.
#'
Expand Down
89 changes: 89 additions & 0 deletions R/palettes.R
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,95 @@ ggsci_db$"gsea"$"default" <- c(
"Flamingo" = "#EF4040", "GuardsmanRed" = "#D60C00"
)

# Bootstrap 5 color palettes
ggsci_db$"bs5"$"blue" <- c(
"blue-100" = "#cfe2ff", "blue-200" = "#9ec5fe",
"blue-300" = "#6ea8fe", "blue-400" = "#3d8bfd",
"blue-500" = "#0d6efd", "blue-600" = "#0a58ca",
"blue-700" = "#084298", "blue-800" = "#052c65",
"blue-900" = "#031633"
)

ggsci_db$"bs5"$"indigo" <- c(
"indigo-100" = "#e0cffc", "indigo-200" = "#c29ffa",
"indigo-300" = "#a370f7", "indigo-400" = "#8540f5",
"indigo-500" = "#6610f2", "indigo-600" = "#520dc2",
"indigo-700" = "#3d0a91", "indigo-800" = "#290661",
"indigo-900" = "#140330"
)

ggsci_db$"bs5"$"purple" <- c(
"purple-100" = "#e2d9f3", "purple-200" = "#c5b3e6",
"purple-300" = "#a98eda", "purple-400" = "#8c68cd",
"purple-500" = "#6f42c1", "purple-600" = "#59359a",
"purple-700" = "#432874", "purple-800" = "#2c1a4d",
"purple-900" = "#160d27"
)

ggsci_db$"bs5"$"pink" <- c(
"pink-100" = "#f7d6e6", "pink-200" = "#efadce",
"pink-300" = "#e685b5", "pink-400" = "#de5c9d",
"pink-500" = "#d63384", "pink-600" = "#ab296a",
"pink-700" = "#801f4f", "pink-800" = "#561435",
"pink-900" = "#2b0a1a"
)

ggsci_db$"bs5"$"red" <- c(
"red-100" = "#f8d7da", "red-200" = "#f1aeb5",
"red-300" = "#ea868f", "red-400" = "#e35d6a",
"red-500" = "#dc3545", "red-600" = "#b02a37",
"red-700" = "#842029", "red-800" = "#58151c",
"red-900" = "#2c0b0e"
)

ggsci_db$"bs5"$"orange" <- c(
"orange-100" = "#ffe5d0", "orange-200" = "#fecba1",
"orange-300" = "#feb272", "orange-400" = "#fd9843",
"orange-500" = "#fd7e14", "orange-600" = "#ca6510",
"orange-700" = "#984c0c", "orange-800" = "#653208",
"orange-900" = "#331904"
)

ggsci_db$"bs5"$"yellow" <- c(
"yellow-100" = "#fff3cd", "yellow-200" = "#ffe69c",
"yellow-300" = "#ffda6a", "yellow-400" = "#ffcd39",
"yellow-500" = "#ffc107", "yellow-600" = "#cc9a06",
"yellow-700" = "#997404", "yellow-800" = "#664d03",
"yellow-900" = "#332701"
)

ggsci_db$"bs5"$"green" <- c(
"green-100" = "#d1e7dd", "green-200" = "#a3cfbb",
"green-300" = "#75b798", "green-400" = "#479f76",
"green-500" = "#198754", "green-600" = "#146c43",
"green-700" = "#0f5132", "green-800" = "#0a3622",
"green-900" = "#051b11"
)

ggsci_db$"bs5"$"teal" <- c(
"teal-100" = "#d2f4ea", "teal-200" = "#a6e9d5",
"teal-300" = "#79dfc1", "teal-400" = "#4dd4ac",
"teal-500" = "#20c997", "teal-600" = "#1aa179",
"teal-700" = "#13795b", "teal-800" = "#0d503c",
"teal-900" = "#06281e"
)

ggsci_db$"bs5"$"cyan" <- c(
"cyan-100" = "#cff4fc", "cyan-200" = "#9eeaf9",
"cyan-300" = "#6edff6", "cyan-400" = "#3dd5f3",
"cyan-500" = "#0dcaf0", "cyan-600" = "#0aa2c0",
"cyan-700" = "#087990", "cyan-800" = "#055160",
"cyan-900" = "#032830"
)

ggsci_db$"bs5"$"gray" <- c(
"gray-100" = "#f8f9fa", "gray-200" = "#e9ecef",
"gray-300" = "#dee2e6", "gray-400" = "#ced4da",
"gray-500" = "#adb5bd", "gray-600" = "#6c757d",
"gray-700" = "#495057", "gray-800" = "#343a40",
"gray-900" = "#212529"
)

# Material Design color palettes
ggsci_db$"material"$"red" <- c(
"Red50" = "#FFEBEE", "Red100" = "#FFCDD2",
Expand Down
20 changes: 18 additions & 2 deletions README.Rmd
Original file line number Diff line number Diff line change
Expand Up @@ -299,9 +299,9 @@ p3_gsea_inv <- p3 + scale_fill_gsea(reverse = TRUE)
grid.arrange(p3_gsea, p3_gsea_inv, ncol = 2)
```

### Material Design
### Bootstrap 5

```{r, ggsci-material, fig.height=3.8}
```{r}
set.seed(42)
k <- 6
x <- diag(k)
Expand All @@ -325,7 +325,23 @@ p4 <- ggplot(x_melt, aes(x = Var1, y = Var2, fill = value)) +
panel.background = element_blank(), panel.border = element_blank(),
panel.grid.major = element_blank(), panel.grid.minor = element_blank()
)
```

```{r, ggsci-bs5, fig.height=2.6}
grid.arrange(
p4 + scale_fill_bs5("blue"), p4 + scale_fill_bs5("indigo"),
p4 + scale_fill_bs5("purple"), p4 + scale_fill_bs5("pink"),
p4 + scale_fill_bs5("red"), p4 + scale_fill_bs5("orange"),
p4 + scale_fill_bs5("yellow"), p4 + scale_fill_bs5("green"),
p4 + scale_fill_bs5("teal"), p4 + scale_fill_bs5("cyan"),
p4 + scale_fill_bs5("gray"),
ncol = 8
)
```

### Material Design

```{r, ggsci-material, fig.height=3.8}
grid.arrange(
p4 + scale_fill_material("red"), p4 + scale_fill_material("pink"),
p4 + scale_fill_material("purple"), p4 + scale_fill_material("deep-purple"),
Expand Down
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@ open with `vignette("ggsci")` in R) for a quick-start guide.

<img src="man/figures/README-ggsci-gsea-1.png" width="100%" style="display: block; margin: auto;" />

### Bootstrap 5

<img src="man/figures/README-ggsci-bs5-1.png" width="100%" style="display: block; margin: auto;" />

### Material Design

<img src="man/figures/README-ggsci-material-1.png" width="100%" style="display: block; margin: auto;" />
Expand Down
7 changes: 7 additions & 0 deletions _pkgdown.yml
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,13 @@ reference:
- scale_color_gsea
- scale_colour_gsea
- scale_fill_gsea
- title: "Bootstrap 5"
contents:
- rgb_bs5
- pal_bs5
- scale_color_bs5
- scale_colour_bs5
- scale_fill_bs5
- title: "Material Design"
contents:
- rgb_material
Expand Down
Binary file added man/figures/README-ggsci-bs5-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 0d4a833

Please sign in to comment.