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

# Export properties
props:
  # Primary colors

  - name: COLOR_BLUE
    value: '{!COLOR_BLUE_100}'
    comment: Primary Blue
    type: color
    category: color
    docs:
      title: EU Blue
      ui: light
  - name: COLOR_YELLOW
    value: '{!COLOR_YELLOW_100}'
    comment: Primary Yellow
    type: color
    category: color
    docs:
      title: EU Yellow
      ui: dark
  - name: COLOR_GREY
    value: '{!COLOR_GREY_100}'
    comment: Primary Grey
    type: color
    category: color
    docs:
      title: EU Grey
      ui: light

  # B&W

  - name: COLOR_BLACK
    value: '{!COLOR_BLACK_100}'
    comment: Black
    type: color
    category: color
    docs:
      title: Black
      ui: light
  - name: COLOR_WHITE
    value: '{!COLOR_WHITE_100}'
    comment: White
    type: color
    category: color
    docs:
      title: White
      ui: dark
      border: true

  # Blues

  - name: COLOR_BLUE_130
    value: '{!COLOR_BLUE_130}'
    comment: Blue 130
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 130
      ui: light
  - name: COLOR_BLUE_120
    value: '{!COLOR_BLUE_120}'
    comment: Blue 120
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 120
      ui: light
  - name: COLOR_BLUE_110
    value: '{!COLOR_BLUE_110}'
    comment: Blue 110
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 110
      ui: light
  - name: COLOR_BLUE_100
    value: '{!COLOR_BLUE_100}'
    comment: Blue 100
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 100
      ui: light
  - name: COLOR_BLUE_75
    value: '{!COLOR_BLUE_75}'
    comment: Blue 75
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 75
      ui: light
  - name: COLOR_BLUE_50
    value: '{!COLOR_BLUE_50}'
    comment: Blue 50
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 50
      ui: light
  - name: COLOR_BLUE_25
    value: '{!COLOR_BLUE_25}'
    comment: Blue 25
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 25
      ui: dark
  - name: COLOR_BLUE_5
    value: '{!COLOR_BLUE_5}'
    comment: Blue 5
    type: color
    category: color.variations.1
    docs:
      title: EU Blue 5
      ui: dark

  # Yellows

  - name: COLOR_YELLOW_120
    value: '{!COLOR_YELLOW_120}'
    comment: Yellow 120
    type: color
    category: color.variations.2
    docs:
      title: EU Yellow 120
      ui: dark
  - name: COLOR_YELLOW_110
    value: '{!COLOR_YELLOW_110}'
    comment: Yellow 110
    type: color
    category: color.variations.2
    docs:
      title: EU Yellow 110
      ui: dark
  - name: COLOR_YELLOW_100
    value: '{!COLOR_YELLOW_100}'
    comment: Yellow 100
    type: color
    category: color.variations.2
    docs:
      title: EU Yellow 100
      ui: dark
  - name: COLOR_YELLOW_75
    value: '{!COLOR_YELLOW_75}'
    comment: Yellow 75
    type: color
    category: color.variations.2
    docs:
      title: EU Yellow 75
      ui: dark
  - name: COLOR_YELLOW_50
    value: '{!COLOR_YELLOW_50}'
    comment: Yellow 50
    type: color
    category: color.variations.2
    docs:
      title: EU Yellow 50
      ui: dark
  - name: COLOR_YELLOW_25
    value: '{!COLOR_YELLOW_25}'
    comment: Yellow 25
    type: color
    category: color.variations.2
    docs:
      title: EU Yellow 25
      ui: dark

  # Greys

  - name: COLOR_GREY_100
    value: '{!COLOR_GREY_100}'
    comment: Grey 100
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 100
      ui: light
  - name: COLOR_GREY_75
    value: '{!COLOR_GREY_75}'
    comment: Grey 75
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 75
      ui: light
  - name: COLOR_GREY_50
    value: '{!COLOR_GREY_50}'
    comment: Grey 50
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 50
      ui: light
  - name: COLOR_GREY_25
    value: '{!COLOR_GREY_25}'
    comment: Grey 25
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 25
      ui: dark
  - name: COLOR_GREY_20
    value: '{!COLOR_GREY_20}'
    comment: Grey 20
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 20
      ui: dark
  - name: COLOR_GREY_15
    value: '{!COLOR_GREY_15}'
    comment: Grey 15
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 15
      ui: dark
  - name: COLOR_GREY_10
    value: '{!COLOR_GREY_10}'
    comment: Grey 10
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 10
      ui: dark
  - name: COLOR_GREY_5
    value: '{!COLOR_GREY_5}'
    comment: Grey 5
    type: color
    category: color.variations.3
    docs:
      title: EU Grey 5
      ui: dark

  # Notification colours

  - name: COLOR_BLUE_N
    value: '{!COLOR_BLUE_N}'
    comment: Blue N
    type: color
    category: color
    docs:
      title: EU Blue N
      ui: light
  - name: COLOR_ORANGE
    value: '{!COLOR_ORANGE_100}'
    comment: Orange
    type: color
    category: color
    docs:
      title: EU Orange
      ui: dark
  - name: COLOR_GREEN
    value: '{!COLOR_GREEN_100}'
    comment: Green
    type: color
    category: color
    docs:
      title: EU Green
      ui: light
  - name: COLOR_RED_130
    value: '{!COLOR_RED_130}'
    type: color
    category: color
  - name: COLOR_RED
    value: '{!COLOR_RED_100}'
    comment: Red
    type: color
    category: color
    docs:
      title: EU Red
      ui: light

  # DEPRECATED

  - name: COLOR_PRIMARY
    value: '{!COLOR_BLUE_100}'
    comment: Primary colour
    type: color
    category: color
    docs:
      title: EU Blue
      description: Blue is commonly...
      ui: light
  - name: COLOR_SECONDARY
    value: '{!COLOR_YELLOW_100}'
    comment: Secondary colour
    type: color
    category: color
    docs:
      title: EU Yellow
      description: Yellow is commonly...
      ui: dark
  - name: COLOR_TERTIARY
    value: '{!COLOR_GREY_15}'
    comment: Tertiary colour
    type: color
    category: color
  - name: COLOR_TEXT
    value: '{!COLOR_GREY_100}'
    comment: Text colour
    type: color
    category: color
    docs:
      title: EU Grey
      description: Grey (just as black)...
      ui: light
  - name: COLOR_WHITE_100
    value: '{!COLOR_WHITE_100}'
    comment: White colour
    type: color
    category: color
    docs:
      title: EU White
      ui: dark
      border: true
  - name: COLOR_BLACK_100
    value: '{!COLOR_BLACK_100}'
    comment: Black colour
    type: color
    category: color
    docs:
      title: EU Black
      ui: light
  - name: COLOR_ERROR
    value: '{!COLOR_RED_100}'
    comment: Error color
    type: color
    category: color
    docs:
      title: EU Red
      description: Red for error messages
      ui: light
  - name: COLOR_INFO
    value: '{!COLOR_BLUE_70}'
    comment: Info color
    type: color
    category: color
    docs:
      title: EU Blue N
      description: Blue for informative messages
      ui: light
  - name: COLOR_SUCCESS
    value: '{!COLOR_GREEN_100}'
    comment: Success color
    type: color
    category: color
    docs:
      title: EU Green
      description: Green for success messages
      ui: light
  - name: COLOR_WARNING
    value: '{!COLOR_ORANGE_100}'
    comment: Warning color
    type: color
    category: color
    docs:
      title: EU Orange
      description: Orange for warnings
      ui: dark
  - name: COLOR_ORANGE_100
    value: '{!COLOR_ORANGE_100}'
    comment: Orange 100
    type: color
    category: color
    docs:
      title: EU Orange 100
      ui: dark
  - name: COLOR_GREEN_100
    value: '{!COLOR_GREEN_100}'
    comment: Green 100
    type: color
    category: color
    docs:
      title: EU Green 100
      ui: light
  - name: COLOR_RED_100
    value: '{!COLOR_RED_100}'
    comment: Red 100
    type: color
    category: color
    docs:
      title: EU Red 100
      ui: light