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

Using brands on cards and/or buttons #50

Open
pipaber opened this issue Nov 12, 2024 · 3 comments
Open

Using brands on cards and/or buttons #50

pipaber opened this issue Nov 12, 2024 · 3 comments

Comments

@pipaber
Copy link

pipaber commented Nov 12, 2024

For shiny Python apps, if I want to set different 3 colours for 3 cards. This is easy to do with a _brand.yml file?

@gadenbuie
Copy link
Collaborator

Sort of? For example, if you set theme colors in color, then those values are used automatically by Shiny.

For example, if you've set color.primary, color.secondary and color.info,

color:
  palette:
    cyan: "#17A2B8"
    purple: "#6F42C1"
    white: "#F8F8F8"
  primary: purple
  secondary: black
  info: cyan

then you can use those values for value box themes

ui.layout_columns(
    ui.value_box("Metric 1", "100", theme="primary"),
    ui.value_box("Metric 2", "200", theme="secondary"),
    ui.value_box("Metric 3", "300", theme="info"),
),

and you could also apply the classes text-bg-primary, text-bg-secondary, text-bg-info to a card – with ui.card(..., class_="text-bg-primary") to get themed cards.

@pipaber
Copy link
Author

pipaber commented Nov 12, 2024

Oh I understand! Many thanks!. Also, I was using something like this in a .css file:

.card-header {
   background: linear-gradient(15deg,#f37921, #e27256ea); 
   color: black;
   padding: 10px; 
}

.card {
   background-color: rgba(255, 255, 255, 0.9);
}

It's possible to set a color gradient or use rgba colors from a _brand-yml file?

@gadenbuie
Copy link
Collaborator

brand.yml will be somewhat orthogonal to this kind of CSS. In other words, the goal of the brand yml data is to set up a good baseline of defaults. There is a place where you can store extra CSS rules just for Shiny though:

defaults:
  shiny:
    theme:
      rules: |
        .card-header {
           background: linear-gradient(15deg,#f37921, #e27256ea); 
           color: black;
           padding: 10px; 
        }
        
        .card {
           background-color: rgba(255, 255, 255, 0.9);
        }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants