@visual-framework/vf-design-tokens/src/maps/vf-themes.yml

A collection of design tokens for consumption across projects and products

imports:
  - "../core.palette.alias.yml"

props:

  # EMBL Primary, Secondary, Tertiary Colours
  # -----------------------------------------
  - name: vf-theme--primary
    value: '{!vf-color--blue}'
    meta:
      friendlyName: EMBL Primary
      sassVariable: vf-theme--primary
      CSSCustomProperty: --vf-theme--primary
      Deprecated: true
      DeprecatedText: Please use the <code>vf-color__brand</code> token.

  - name: vf-theme--primary--dark
    value: '{!vf-color--blue--dark}'
    meta:
      friendlyName: EMBL Primary Dark
      sassVariable: vf-theme--primary--dark
      CSSCustomProperty: --vf-theme--primary--dark
      Deprecated: true
      DeprecatedText: Please use the <code>vf-color__brand-dark</code> token.

  - name: vf-theme--secondary
    value: '{!vf-color--green}'
    meta:
      friendlyName: EMBL Secondary
      sassVariable: vf-theme--secondary
      CSSCustomProperty: --vf-theme--secondary
      Deprecated: true
      DeprecatedText: Please use the <code>vf-color__brand</code> token.
  - name: vf-theme--secondary--dark
    value: '{!vf-color--green--dark}'
    meta:
      friendlyName: EMBL Secondary Dark
      sassVariable: vf-theme--secondary--dark
      CSSCustomProperty: --vf-theme--secondary--dark
      Deprecated: true
      DeprecatedText: Please use the <code>vf-color__brand-dark</code> token.

  - name: vf-theme--tertiary
    value: '{!vf-color--grey--dark}'
    meta:
      friendlyName: EMBL Tertiary
      sassVariable: vf-theme--tertiary
      CSSCustomProperty: --vf-theme--tertiary
      Deprecated: true
      DeprecatedText: Please use the <code>vf-color__brand</code> token.

  - name: vf-theme--quaternary
    value: '{!vf-color--yellow}'
    meta:
      friendlyName: EMBL Quaternary
      sassVariable: vf-theme--quaternary
      CSSCustomProperty: --vf-theme--quaternary
      Deprecated: true
      DeprecatedText: Please use the <code>vf-color__brand</code> token.

  - name: vf-theme--quinary
    value: '{!vf-color--grey--lightest}'
    meta:
      friendlyName: EMBL Quinary
      sassVariable: vf-theme--quinary
      CSSCustomProperty: --vf-theme--quinary
      Deprecated: true
      DeprecatedText: Please use the <code>vf-color__brand</code> token.

global:
  type: color
  category: color