search

microsoft / fluentui-token-pipeline

The Fluent UI token pipeline generates source code for Fluent UI libraries.
https://microsoft.github.io/fluentui-token-pipeline/
Other
41 stars 18 forks source link

Add global alpha tokens #55

Closed miroslavstastny closed 2 years ago

miroslavstastny commented 2 years ago

Adds global alpha color tokens: image

Example pipeline output (React):

export const whiteAlpha: Record<AlphaColors, string> = {
  "5": "rgba(255, 255, 255, 0.05)",
  "10": "rgba(255, 255, 255, 0.1)",
  "20": "rgba(255, 255, 255, 0.2)",
  "30": "rgba(255, 255, 255, 0.3)",
  "40": "rgba(255, 255, 255, 0.4)",
  "50": "rgba(255, 255, 255, 0.5)",
  "60": "rgba(255, 255, 255, 0.6)",
  "70": "rgba(255, 255, 255, 0.7)",
  "80": "rgba(255, 255, 255, 0.8)",
  "90": "rgba(255, 255, 255, 0.9)"
}

export const blackAlpha: Record<AlphaColors, string> = {
  "5": "rgba(0, 0, 0, 0.05)",
  "10": "rgba(0, 0, 0, 0.1)",
  "20": "rgba(0, 0, 0, 0.2)",
  "30": "rgba(0, 0, 0, 0.3)",
  "40": "rgba(0, 0, 0, 0.4)",
  "50": "rgba(0, 0, 0, 0.5)",
  "60": "rgba(0, 0, 0, 0.6)",
  "70": "rgba(0, 0, 0, 0.7)",
  "80": "rgba(0, 0, 0, 0.8)",
  "90": "rgba(0, 0, 0, 0.9)"
}