# Import design tokens
imports:
  - '@ecl/eu-design-tokens/tokens/colors.yml'

# Export properties
props:
  # Primary colors

  - name: BG_COLOR_BLUE
    value: '{!COLOR_BLUE_100}'
    comment: Blue background colour
    type: color
    category: background-color
  - name: BG_COLOR_YELLOW
    value: '{!COLOR_YELLOW_100}'
    comment: Yellow background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY
    value: '{!COLOR_GREY_100}'
    comment: Grey background colour
    type: color
    category: background-color

  # B&W

  - name: BG_COLOR_BLACK
    value: '{!COLOR_BLACK_100}'
    comment: Black background colour
    type: color
    category: background-color
  - name: BG_COLOR_WHITE
    value: '{!COLOR_WHITE_100}'
    comment: White background colour
    type: color
    category: background-color

  # Blues

  - name: BG_COLOR_BLUE_130
    value: '{!COLOR_BLUE_130}'
    comment: Blue 130 background colour
    type: color
    category: background-color
  - name: BG_COLOR_BLUE_120
    value: '{!COLOR_BLUE_120}'
    comment: Blue 120 background colour
    type: color
    category: background-color
  - name: BG_COLOR_BLUE_110
    value: '{!COLOR_BLUE_110}'
    comment: Blue 110 background colour
    type: color
    category: background-color
  - name: BG_COLOR_BLUE_100
    value: '{!COLOR_BLUE_100}'
    comment: Blue 100 background colour
    type: color
    category: background-color
  - name: BG_COLOR_BLUE_75
    value: '{!COLOR_BLUE_75}'
    comment: Blue 75 background colour
    type: color
    category: background-color
  - name: BG_COLOR_BLUE_50
    value: '{!COLOR_BLUE_50}'
    comment: Blue 50 background colour
    type: color
    category: background-color
  - name: BG_COLOR_BLUE_25
    value: '{!COLOR_BLUE_25}'
    comment: Blue 25 background colour
    type: color
    category: background-color
  - name: BG_COLOR_BLUE_5
    value: '{!COLOR_BLUE_5}'
    comment: Blue 5 background colour
    type: color
    category: background-color

  # Yellows

  - name: BG_COLOR_YELLOW_120
    value: '{!COLOR_YELLOW_120}'
    comment: Yellow 120 background colour
    type: color
    category: background-color
  - name: BG_COLOR_YELLOW_110
    value: '{!COLOR_YELLOW_110}'
    comment: Yellow 110 background colour
    type: color
    category: background-color
  - name: BG_COLOR_YELLOW_100
    value: '{!COLOR_YELLOW_100}'
    comment: Yellow 100 background colour
    type: color
    category: background-color
  - name: BG_COLOR_YELLOW_75
    value: '{!COLOR_YELLOW_75}'
    comment: Yellow 75 background colour
    type: color
    category: background-color
  - name: BG_COLOR_YELLOW_50
    value: '{!COLOR_YELLOW_50}'
    comment: Yellow 50 background colour
    type: color
    category: background-color
  - name: BG_COLOR_YELLOW_25
    value: '{!COLOR_YELLOW_25}'
    comment: Yellow 25 background colour
    type: color
    category: background-color

  # Greys

  - name: BG_COLOR_GREY_100
    value: '{!COLOR_GREY_100}'
    comment: Grey 100 background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY_75
    value: '{!COLOR_GREY_75}'
    comment: Grey 75 background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY_50
    value: '{!COLOR_GREY_50}'
    comment: Grey 50 background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY_25
    value: '{!COLOR_GREY_25}'
    comment: Grey 25 background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY_20
    value: '{!COLOR_GREY_20}'
    comment: Grey 20 background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY_15
    value: '{!COLOR_GREY_15}'
    comment: Grey 15 background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY_10
    value: '{!COLOR_GREY_10}'
    comment: Grey 10 background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREY_5
    value: '{!COLOR_GREY_5}'
    comment: Grey 5 background colour
    type: color
    category: background-color

  # Notification colours

  - name: BG_COLOR_BLUE_N
    value: '{!COLOR_BLUE_N}'
    comment: Blue N background colour
    type: color
    category: background-color
  - name: BG_COLOR_ORANGE
    value: '{!COLOR_ORANGE_100}'
    comment: Orange background colour
    type: color
    category: background-color
  - name: BG_COLOR_GREEN
    value: '{!COLOR_GREEN_100}'
    comment: Green background colour
    type: color
    category: background-color
  - name: BG_COLOR_RED
    value: '{!COLOR_RED_100}'
    comment: Red background colour
    type: color
    category: background-color

  # DEPRECATED

  - name: BG_COLOR_DEFAULT
    value: '{!COLOR_WHITE_100}'
    comment: Default background colour
    type: color
    category: background-color
  - name: BG_COLOR_PRIMARY
    value: '{!COLOR_BLUE_100}'
    comment: Primary background colour
    type: color
    category: background-color
  - name: BG_COLOR_SECONDARY
    value: '{!COLOR_YELLOW_100}'
    comment: Secondary background colour
    type: color
    category: background-color
  - name: BG_COLOR_SHADE
    value: '{!COLOR_GREY_100}'
    comment: Shade background colour
    type: color
    category: background-color