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.

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

Add Bootstrap 5 color scales #47

Merged
merged 4 commits into from
Jun 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
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{[email protected]} | <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{[email protected]} | <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{[email protected]} | <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
Loading