piitaya / lovelace-mushroom-themes

Additional themes for Lovelace Mushroom Cards 🍄
Apache License 2.0
245 stars 19 forks source link

Recent change with chip card? #21

Closed tungmeister closed 2 years ago

tungmeister commented 2 years ago

I've had a custom theme based on the example here with a slight size increase for the chip card however a recent release seems to have changed the config of the card? my theme previously increased the chip card by a few pixels however now it's very large as can be seen from the screenshot below: image here is my theme:

Mushroom-test:
  # HA variables
  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
  ha-card-border-radius: 12px
  # Mushroom layout
  mush-spacing: 12px
  # Title
  mush-title-padding: 24px 12px 16px
  mush-title-spacing: 12px
  mush-title-font-size: 28px
  mush-title-font-weight: normal
  mush-title-line-height: 1.2
  mush-subtitle-font-size: 16px
  mush-subtitle-font-weight: normal
  mush-subtitle-line-height: 1.2
  # Card
  mush-icon-border-radius: 50%
  mush-control-border-radius: 12px
  mush-card-primary-font-size: 14px
  mush-card-secondary-font-size: 12px
  mush-card-primary-font-weight: bold
  mush-card-secondary-font-weight: bolder
  #card-background-color: rgba(2, 58, 162, 0.2)
  # Chips
  mush-chip-spacing: 8px
  mush-chip-padding: 0 12px
  mush-chip-height: 38px
  mush-chip-border-radius: 18px
  mush-chip-font-size: 1em # relative to chip height
  mush-chip-font-weight: bold
  mush-chip-icon-size: 1.5em # relative to chip height
  # Slider
  mush-slider-threshold: 10
  # Colors
  mush-rgb-red: 244, 67, 54
  mush-rgb-pink: 233, 30, 99
  mush-rgb-purple: 156, 39, 176
  mush-rgb-deep-purple: 103, 58, 183
  mush-rgb-indigo: 63, 81, 181
  mush-rgb-blue: 33, 150, 243
  mush-rgb-light-blue: 3, 169, 244
  mush-rgb-cyan: 0, 188, 212
  mush-rgb-teal: 0, 150, 136
  mush-rgb-green: 76, 175, 80
  mush-rgb-light-green: 139, 195, 74
  mush-rgb-lime: 205, 220, 57
  mush-rgb-yellow: 255, 235, 59
  mush-rgb-amber: 255, 193, 7
  mush-rgb-orange: 255, 152, 0
  mush-rgb-deep-orange: 255, 87, 34
  mush-rgb-brown: 121, 85, 72
  mush-rgb-grey: 158, 158, 158
  mush-rgb-blue-grey: 96, 125, 139
  mush-rgb-black: 0, 0, 0
  mush-rgb-white: 255, 255, 255

  mush-rgb-info: var(--rgb-blue)
  mush-rgb-success: var(--rgb-green)
  mush-rgb-warning: var(--rgb-orange)
  mush-rgb-danger: var(--rgb-red)

  mush-rgb-state-cover: var(--rgb-blue)
  mush-rgb-state-fan: var(--rgb-green)
  mush-rgb-state-light: var(--rgb-orange)
  mush-rgb-state-entity: var(--rgb-blue)
  mush-rgb-state-switch: var(--rgb-blue)

  mush-rgb-state-alarm-disarmed: var(--rgb-info)
  mush-rgb-state-alarm-armed: var(--rgb-success)
  mush-rgb-state-alarm-triggered: var(--rgb-danger)

  mush-rgb-state-person-home: var(--rgb-success)
  mush-rgb-state-person-not-home: var(--rgb-danger)
  mush-rgb-state-person-zone: var(--rgb-info)
  mush-rgb-state-person-unknown: var(--rgb-grey)

  # You must keep this to support light/dark theme
  modes:
    light: {}
    dark: {}
piitaya commented 2 years ago

Yep, I fixed the em sizes. You can copy the new sizes from the readme 😉

tungmeister commented 2 years ago

Thanks, working as expected now.