danhollick

// Update globs depending on your framework
---
name: tailwind_v4
description: Guide for using Tailwind CSS v4 instead of v3.x
globs: ["**/*.{js,ts,jsx,tsx,mdx,css}"]
tags:
  - tailwind
  - css
---

danhollick

figma.on('selectionchange', () => {
  const fills = findFills(figma.currentPage.selection)
  if (fills.length > 1) {
  // ...
  }
  if (fills.length === 1) {
    const fills = findFills(figma.currentPage.selection)
    foregroundColor = getRGB(fills[0].color)
    foregroundAlpha = fills[0].opacity
    calculateAndSendContrast(foregroundColor, foregroundAlpha, backgoundColor)

danhollick

function findFills(nodes) {
  const nodesWithFills = nodes.filter(
    node =>
      node.fills && node.fills.length > 0 && node.fills[0].type === 'SOLID'
  )
  if (nodesWithFills.length <= 0) {
    return figma.notify('Please select a layer that has a solid fill', {
      timeout: 1000,
    })
  }

danhollick

let foregroundColor = [0, 0, 0] // black
let backgoundColor = [255, 255, 255] // white
let foregroundAlpha = 1
let backgroundAlpha = 1
// call on plugin start
figma.showUI(__html__, { width: 340, height: 405 })
calculateAndSendContrast(foregroundColor, foregroundAlpha, backgoundColor)

danhollick

function updateScores(id, score) {
  const element = document.getElementById(id)
  element.className = score
  element.textContent = score
  return element
}
//... 
updateScores('normalTextScore', message.scores.normalText)
updateScores('largeTextScore', message.scores.largeText)

danhollick

function updateScores(id, score) {
  const element = document.getElementById(id)
  element.className = score
  element.textContent = score
  return element
}

danhollick

<style>
  .FAIL { color: #F34242; }
  .AA { color: #6BBE96; }
  .AAA { color: #00DA71; }
</style>
<!-- ... -->
<h4 >Normal text:<span id="largeTextScore" ></span> </h4>
<h3 >Normal text:<span id="normalTextScore" ></span> </h3>

danhollick

<div id="background" class="background-color">
  <h3 class="foreground-color">The quick brown fox</h3>
  <h2 class="foreground-color">The quick brown fox</h2>
</div>
<script>
// ...
    changeColor('background-color', message.background)
    changeColor('foreground-color', message.foreground)

danhollick

function changeColor(classname, color) {
  const elements = document.getElementsByClassName(classname)
  for (let i = 0; i < elements.length; i++) {
    if (elements[i].localName === 'div') {
      elements[i].style = `background-color: ${color};`
    } else {
      elements[i].style = `color: ${color};`
    }
  }
}

danhollick

window.onmessage = async event => {
  const message = event.data.pluginMessage
  if (message.type === 'selectionChange') {
    // this 👇
    const contrast = document.getElementById('contrast')
    contrast.textContent = message.contrast
    // becomes this 👇 
    changeText('contrast', message.contrast)
  }
}