danhollick

var containerStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  margin: 24,
  height: '100vh',
}

var divStyle = {
  margin: 24,

danhollick

var express = require('express')
var app = express()

app.listen(3001, console.log("Holy shit, I'm a server and I am listening on port 3001"))

danhollick

var express = require('express')
var app = express()

const FigmaAPIKey = 'XXXX–XXXXXXXX–XXXX–XXXX-XXXX–XXXXXXXXXXXX'
const FigmaFileID = `SoMEGIbBeriSHHerE`

app.listen(3001, console.log("Holy shit, I'm a server and I am listening on port 3001"))

danhollick

figma.showUI(__html__)

figma.on('selectionchange', () => {
  if (figma.currentPage.selection.length > 1) {
    // find nodes with fills that are of type SOLID
    const selection = figma.currentPage.selection.filter(
      node => node.fills.length > 0 && node.fills[0].type === 'SOLID'
    )
    console.log(selection[0].fills)
  } else {

danhollick

function calculateLuminance(color) {
  //just return 1 for now
  return 1
}

function calculateContrast(foreground, background) {
  console.log(foreground, background)
  const foregroundLuminance = calculateLuminance(foreground)
  const backgroundLuminance = calculateLuminance(background)
  return foregroundLuminance / backgroundLuminance

danhollick

figma.on('selectionchange', () => {
  if (figma.currentPage.selection.length > 1) {
    const selection = figma.currentPage.selection.filter(
      node => node.fills.length > 0 && node.fills[0].type === 'SOLID'
    )
    // filter out the first fills of each layer
    const fills = selection.map(node => node.fills[0])
    const contrast = calculateContrast(fills[0].color, fills[1].color)
    console.log(contrast)
  }

danhollick

function sendContrastInfo(contrast, foreground, backgound) {
  figma.ui.postMessage({
    type: 'selectionChange',
    foreground,
    background,
    contrast,
  })
}

danhollick

figma.on('selectionchange', () => {
  if (figma.currentPage.selection.length > 1) {
    const selection = figma.currentPage.selection.filter(
      node => node.fills.length > 0 && node.fills[0].type === 'SOLID'
    )
    const fills = selection.map(node => node.fills[0])
    const contrast = calculateContrast(fills[0].color, fills[1].color)
    sendContrastInfo(contrast, fills[0].color, fills[1].color)
  }
}

danhollick

<script>
window.onmessage = async event => {
  const message = event.data.pluginMessage
  console.log(message)
}
</script>

danhollick

function calculateLuminance(color) {
  const normalizedColor = color.map(channel => channel / 255)
  const gammaCorrectedRGB = normalizedColor.map(channel =>
    channel <= 0.03928
      ? channel / 12.92
      : Math.pow((channel + 0.055) / 1.055, 2.4)
  )
  const luminance =
    gammaCorrectedRGB[0] * 0.2126 +
    gammaCorrectedRGB[1] * 0.7152 +