ui.html

<link rel="stylesheet" href="https://static.figma.com/api/figma-extension-api-0.0.1.css">
<style>
  :root {
    --pink: hsl(330, 100%, 60%);
    --blue: hsl(192, 100%, 60%);
    --grey: hsl(240, 28%, 77%);
    --green: hsl(148, 100%, 41%);
    --purple: hsl(280, 100%, 70%);
    --yellow: hsl(40, 100%, 70%);
    --turquoise: hsl(181, 100%, 41%);
    --midnight-sky: hsl(240, 13%, 13%);
    --overcast-sky: hsl(240, 13%, 81%);
    --tangerine: hsl(40, 100%, 50%);
    --red: hsl(336, 89%, 50%);

    --black: rgb(0, 0, 0);
    --grey_50: rgb(11, 11, 15);
    --grey_100: rgb(22, 22, 29);
    --grey_200: rgb(44, 44, 58);
    --grey_300: rgb(66, 66, 87);
    --grey_400: rgb(88, 88, 116);
    --grey_500: rgb(110, 110, 145);
    --grey_600: rgb(139, 139, 167);
    --grey_700: rgb(168, 168, 189);
    --grey_800: rgb(197, 197, 211);
    --grey_900: rgb(226, 226, 233);
    --grey_950: rgb(241, 241, 244);
    --white: rgb(255, 255, 255);
  }

  body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    line-height: 1.6;
  }

  /* extending Figma UI */

  input[type="number"] {
    font-family: 'Roboto', sans-serif;
    color: #444;
    height: 24px;
    padding: 0 2px 0 4px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
  }

  button.danger {
    color: #fff;
    background-color: var(--red);
    border-color: var(--red);
  }

  button.white {
    color: var(--grey_50);
    background-color: #fff;
    border-color: #fff;
  }

  button.small {
    height: 20px;
    line-height: 1.6;
    max-width: 180px;
    padding: 0 8px;
  }

  .tabs {
    display: flex;
    gap: 1em;
    margin-bottom: 16px;
  }

  .tab {
    border-top: 3px solid transparent;
    padding: 6px 10px;
    color: var(--pink);
    text-decoration: none;
  }

  .spacer {
    flex-grow: 1;
  }

  .tab:hover:not(.tab--active) {
    background: var(--grey_950);
  }

  .tab--active {
    color: white;
    background: var(--pink);
    font-weight: 700;
    cursor: default;
  }

  .columns {
    display: flex;
    justify-content: space-between;
  }

  .col-half {
    width: 45%;
  }

  .col-third {
    width: 30%;
  }

  .flex {
    display: flex;
  }

  .text-link {
    color: var(--pink);
    cursor: pointer;
  }

  .text-center {
    text-align: center;
  }

  .form-section {
    margin: 14px 0;
  }

  .button-layout {
    display: flex;
    gap: 0.5em;
  }

  .add-color-form {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  .swatches {
    display: flex;
    flex-wrap: wrap;
  }

  .swatch {
    width: 20%;
    width: 16.666667%;
    height: 80px;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: start;
  }

  .swatch__label {
    background: var(--grey_50);
    color: var(--white);
    padding: 0.25em 0.5em;
    display: inline-block;
    font-size: 0.7rem;
  }

  .code-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
  }

  .code-layout__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .code-layout__item {
    width: 48%;
    flex-grow: 1;
  }

  .code-wrapper {
    overflow: hidden;
    border-radius: 8px;
  }

  .code-block {
    background: var(--grey_950);
    padding: 10px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: scroll;
    margin: 0;
    scrollbar-width: thin;
  }

  .shades {
  }

  .shade {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
</style>

<script type="module">
  import Color from "https://colorjs.io/dist/color.js"
  import { createApp, reactive } from 'https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module'

  const store = reactive({
    colours: [],
    codeBlocks: [],
    setCodeBlocks(data) {
      this.codeBlocks = data
    },
    setColours(colours) {
      this.colours = colours
    }
  })

  window.addEventListener('message', ({ data }) => {
    switch (data.pluginMessage.type) {
      case 'local-styles':
        store.setColours(data.pluginMessage.data)
        store.setCodeBlocks(
          getGeneratedCodeForColours(data.pluginMessage.data)
        )
        return
      default:
      // nothing
    }
  }, false)

  const getDefaultColour = () => getColourScheme() === 'dark' ? '#000000' : '#FFFFFF'

  createApp({
    store,

    activeTab: 'palettes',

    paletteName: '',

    currentColorName: '',
    currentColorHex: getDefaultColour(),

    shadesColorHex: '#ff3399',
    shadesPrefix: 'grey',
    shadesCount: 12,
    shadesPalette: '',

    shades: [],

    colors: [
      // test colour palette
      // { name: "pink", hex: "#ff3399" },
      // { name: "blue", hex: "#33d5ff" },
      // { name: "grey", hex: "#b3b3d4" },
      // { name: "green", hex: "#00d364" },
      // { name: "purple", hex: "#cc66ff" },
      // { name: "yellow", hex: "#ffcc66" },
      // { name: "turquoise", hex: "#00ced1" },
      // { name: "midnight-sky", hex: "#1d1d26" },
      // { name: "overcast-sky", hex: "#c8c8d5" },
      // { name: "tangerine", hex: "#ffaa00" },
      // { name: "red", hex: "#f10f69" }
    ],

    get storeColoursWithoutShades() {
      return this.store.colours.filter((color) => !color.name.includes('shade'))
    },

    addColor() {
      if (!this.currentColorName) {
        alert('colour name required')
        return
      }

      this.colors.push({
        name: this.currentColorName,
        hex: this.currentColorHex,
      })

      this.currentColorName = ''
      this.currentColorHex = getDefaultColour()
    },

    removeColor(hex) {
      this.colors = this.colors.filter((color) => color.hex !== hex)
    },

    resetPalette() {
      this.colors = []
    },

    generateShades() {
      this.shades = shadesFromColour(
        this.shadesColorHex,
        this.shadesPrefix,
        this.shadesCount,
      )
    },

    copyCodeToClipboard(codeBlock) {
      copyTextToClipboard(codeBlock.comment + '\n' + codeBlock.code, (success) => {
        const alertMessage = success ?
          `successfully copied "${codeBlock.name}" code to clipboard` :
          `failed to copy "${codeBlock.name}" code to clipboard`

        alert(alertMessage)
      })
    },

    refreshLocalStyles() {
      parent.postMessage({
        pluginMessage: {
          type: 'refresh-local-styles',
          data: {},
        }
      }, '*')
    },

    createShadesPalette() {
      if (!this.shades.length) {
        alert('must have shades to generate a palette')
        return
      }

      if (!this.shadesPalette) {
        alert('shades palette must have a name. this is usually the same name as the colour palette it belongs to.')
        return
      }

      const colourScheme = getColourScheme()

      const paletteName = this.shadesPalette + '/shades-' + this.shadesPrefix
      const colours = this.shades.map((shade) => ({
        name: shade.name,
        hex: shade.hex,
      }))

      parent.postMessage({
        pluginMessage: {
          type: 'create-palette',
          data: {
            paletteName,
            colourScheme,
            colours,
          },
        }
      }, '*')
    },

    /**
     * Create a colour palette from the picked colours
     */
    createColorPalette() {
      if (!this.colors.length) {
        alert('must add at least 1 colour to generate a palette')
        return
      }

      const colourScheme = getColourScheme()

      const paletteName = this.paletteName.toString()
      if (!paletteName) {
        alert('must name the colour palette')
        return
      }

      const colours = this.colors.map((color) => ({
        name: color.name,
        hex: color.hex,
      }))

      parent.postMessage({
        pluginMessage: {
          type: 'create-palette',
          data: {
            paletteName,
            colourScheme,
            colours,
          },
        }
      }, '*')
    },
  }).mount()


  /**
   * Gets the user's preferred colour scheme. We can use this to generate a dynamic background colour, if necessary
   * @returns 'light' | 'dark'
   */
  function getColourScheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

  function dataFromForm(formElement) {
    const formData = new FormData(formElement)
    return formData.entries()
  }

  function getGeneratedCodeForColours(colours, topComment) {
    const copiedComment = `Colours generated with: https://tinaciousdesign.com/portfolio/figma-plugin-colour-tools`
    const codeBlocks = []

    // Generate code for Android (XML)
    const androidXmlCode = []
    colours.forEach((swatch) => {
      androidXmlCode.push(`<color name="${swatch.name}">${swatch.hex}</color>`)
    })
    codeBlocks.push({
      name: 'Android (XML)',
      comment: `<!-- ${copiedComment} -->`,
      code: androidXmlCode.join('\n'),
    })

    // Generate code for Android (Jetpack Compose)
    const androidComposeCode = [
      'object BrandColors {'
    ]
    colours.forEach((swatch) => {
      androidComposeCode.push(`    val ${swatch.name.replaceAll('-', '_')} = ${hexToAndroidCompose(swatch.hex)}`)
    })
    androidComposeCode.push('}')
    codeBlocks.push({
      name: 'Android (Jetpack Compose)',
      comment: `// ${copiedComment}`,
      code: androidComposeCode.join('\n'),
    })

    // Generate Tailwind config
    const tailwindCode = []
    // const tailwindCode = ['colors: {']
    colours.forEach((swatch) => {
      tailwindCode.push(`  ${swatch.name.replaceAll('-', '_')}: '${swatch.hex}',`)
    })
    // tailwindCode.push('}')

    codeBlocks.push({
      name: 'Tailwind "colors" configuration',
      comment: `// ${copiedComment}`,
      code: tailwindCode.join('\n'),
    })

    // Generate CSS code (hex)
    const cssCodeHex = [':root {']
    colours.forEach((swatch) => {
      cssCodeHex.push(`  --${swatch.name}: ${swatch.hex};`)
    })
    cssCodeHex.push('}')

    codeBlocks.push({
      name: 'CSS (hex)',
      comment: `/* ${copiedComment} */`,
      code: cssCodeHex.join('\n'),
    })

    // Generate CSS code (hsl)
    const cssCodeHsl = [':root {']
    colours.forEach((swatch) => {
      const hslCss = hslToHslCss(hexToHsl(swatch.hex))
      cssCodeHsl.push(`  --${swatch.name}: ${hslCss};`)
    })
    cssCodeHsl.push('}')

    codeBlocks.push({
      name: 'CSS (HSL)',
      comment: `/* ${copiedComment} */`,
      code: cssCodeHsl.join('\n'),
    })

    // Generate CSS code (rgb)
    const cssCodeRgb = [':root {']
    colours.forEach((swatch) => {
      const { r, g, b } = hexToWebRGB(swatch.hex)
      const rgbCss = `rgb(${(r).toFixed(0)}, ${(g).toFixed(0)}, ${(b).toFixed(0)})`

      cssCodeRgb.push(`  --${swatch.name}: ${rgbCss};`)
    })
    cssCodeRgb.push('}')

    codeBlocks.push({
      name: 'CSS (RGB)',
      comment: `/* ${copiedComment} */`,
      code: cssCodeRgb.join('\n'),
    })

    // Generate CSS code for SASS (SCSS)
    const scssCode = []
    colours.forEach((swatch) => {
      scssCode.push('$' + swatch.name + `: ${swatch.hex};`)
    })
    codeBlocks.push({
      name: 'Sass (SCSS)',
      comment: `// ${copiedComment}`,
      code: scssCode.join('\n'),
    })

    // Generate CSS code for Stylus
    const stylusCssCode = []
    colours.forEach((swatch) => {
      stylusCssCode.push(`${swatch.name} = ${swatch.hex}`)
    })
    codeBlocks.push({
      name: 'Sass (Stylus)',
      comment: `// ${copiedComment}`,
      code: stylusCssCode.join('\n'),
    })

    // const wpCode = ['"palette": [']
    const wpCode = colours.map((swatch) => {
      return JSON.stringify({
        slug: swatch.name,
        color: swatch.hex,
        name: swatch.name,
      }, null, 2)
    }).join(',\n')
    // wpCode.push(']')

    codeBlocks.push({
      name: 'WordPress theme',
      comment: `// ${copiedComment}`,
      code: '"palette": [\n' + wpCode + '\n]',
    })

    return codeBlocks
  }

  function toObject(proxy) {
    return JSON.parse(JSON.stringify(proxy))
  }

  function copyTextToClipboard(text, callback) {
    if (!navigator.clipboard) {
      fallbackCopyTextToClipboard(text, callback);
      return;
    }
    navigator.clipboard.writeText(text).then(function () {
      callback(true)
    }, function (err) {
      console.error('async: failed to copy', err);
      callback(false)
    });
  }

  function fallbackCopyTextToClipboard(text, callback) {
    var textArea = document.createElement("textarea");
    textArea.value = text;

    // Avoid scrolling to bottom
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";

    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
      document.execCommand('copy');
      callback(true)
    } catch (err) {
      console.error('fallback: failed to copy', err);
      callback(false)
    }

    document.body.removeChild(textArea);
  }

  /**
   * source: https://stackoverflow.com/a/3732187
   */
  function hexToWebRGB(hex) {
    const r = parseInt(hex.substr(1, 2), 16)
    const g = parseInt(hex.substr(3, 2), 16)
    const b = parseInt(hex.substr(5, 2), 16)

    return { r, g, b }
  }

  /**
   * source: https://stackoverflow.com/a/3732187
   */
  function hexToHsl(hex) {
    const { h, s, l } = new Color(hex).to('hsl')

    return { h, s, l }
  }

  function shadesFromColour(colour, prefix, count) {
    const darkest = 0
    const lightest = 100
    const diff = (lightest - darkest) / (count + 1)

    let currentLightness = darkest

    const base = hexToHsl(colour)
    const swatches = []

    swatches.push({
      ...base,
      l: 0,
    })

    for (let i = darkest; i <= Math.ceil(count); i++) {
      currentLightness += diff

      swatches.push({
        ...base,
        l: currentLightness,
      })
    }

    const transformedSwatches = swatches.map((swatch, idx) => {
      const name = swatch.l === 0 ? 'black' :
        Math.ceil(swatch.l) >= 100 ? 'white' :
          `${prefix}_${Math.floor((idx) * 100)}`;

      const asHex = hslToHex(swatch);

      return {
        name,
        androidCompose: hexToAndroidCompose(asHex),
        hex: asHex,
        hsl: hslToHslCss(swatch),
        rgb: hexToRgbCss(asHex),
      }
    })

    // Add a 95% lightness swatch if it doesn't exist
    if (_requiresTargetSwatch(swatches, 95, [95, 100])) {
      const lastIndex = swatches.length - 1
      const secondLastIndex = lastIndex - 1
      const secondLastItem = swatches[secondLastIndex]

      if (secondLastItem) {
        const newSwatch = {
          ...base,
          l: 95,
        }

        const asHex = hslToHex(newSwatch);

        transformedSwatches.splice(-1, 0, {
          name: `${prefix}_${(secondLastIndex * 100) + 50}`,
          androidCompose: hexToAndroidCompose(asHex),
          hex: asHex,
          hsl: hslToHslCss(newSwatch),
          rgb: hexToRgbCss(asHex),
        })
      }
    }


    // Add a 5% lightness swatch if it doesn't exist
    if (_requiresTargetSwatch(swatches, 5, [5, 10])) {
      const secondItem = swatches[1]

      if (secondItem) {
        const newSwatch = {
          ...base,
          l: 5,
        }

        const asHex = hslToHex(newSwatch)

        transformedSwatches.splice(1, 0, {
          name: `${prefix}_50`,
          androidCompose: hexToAndroidCompose(asHex),
          hex: asHex,
          hsl: hslToHslCss(newSwatch),
          rgb: hexToRgbCss(asHex),
        })
      }
    }

    return transformedSwatches
  }

  function _requiresTargetSwatch(swatches, target, range) {
    const [start, end] = range

    const targetSwatch = swatches.find((swatch) => {
      const lightness = Math.ceil(swatch.l)

      if (lightness === target) return true

      if (!lightness || lightness >= 100) return false

      // For the light end
      if (lightness > target && lightness < end) {
        return true
      }

      // For the dark end
      if (lightness < target && lightness > start) {
        return true
      }

      return false
    })

    return !(!!targetSwatch)
  }

  function hslToHex({ h, s, l }) {
    const hsl = new Color('hsl', [h, s, l])
    const rgb = hsl.to('srgb')

    return rgb.toString({ format: 'hex' })
  }

  function hslToHslCss({ h, s, l }) {
    const hsl = new Color('hsl', [h, s, l])
    return hsl.toString({ precision: 0 })
  }

  function hexToRgbCss(hex) {
    const rgb = new Color(hex)

    const r = rgb.r * 255
    const g = rgb.g * 255
    const b = rgb.b * 255

    return 'rgb(' + [r, g, b].join(', ') + ')'
  }

  function rgbToRgbCss({ r, g, b }) {
    const rgb = new Color('srgb', [r, g, b])
    return rgb.toString({ format: 'rgb' })
  }

  function hexToAndroidCompose(hex) {
    return `Color(0xFF${hex.toUpperCase().replace('#', '')})`
  }
</script>

<div v-scope>
  <div class="tabs">
    <a href="#" class="tab" @click="activeTab = 'palettes'" :class="{ 'tab--active': activeTab === 'palettes'}">
      Colour Palettes
    </a>
    <a href="#" class="tab" @click="activeTab = 'shades'" :class="{ 'tab--active': activeTab === 'shades'}">
      Shades
    </a>
    <a href="#" class="tab" @click="activeTab = 'code'" :class="{ 'tab--active': activeTab === 'code'}">
      Styles Code
    </a>

    <div class="spacer"></div>

    <a href="#" class="tab" @click="activeTab = 'help'" :class="{ 'tab--active': activeTab === 'help'}">
      ℹ️ Help!
    </a>
  </div>

  <div v-if="activeTab === 'palettes'">
    <h2>Colour Palettes</h2>

    <h3>Palette Name</h3>
    <div class="form-section">
      <input type="text" v-model="paletteName" placeholder="Palette name" autofocus>
    </div>

    <h3>Add colour</h3>
    <form id="add-color-form" class="add-color-form" @submit.prevent="">
      <input type="text" placeholder="Colour name" name="color_name" v-model="currentColorName">
      <input type="color" name="picked_color" v-model="currentColorHex">
      <input type="text" name="picked_color" v-model="currentColorHex">
      <button type="submit" @click="addColor">Add Colour</button>
    </form>

    <div v-if="colors.length" class="swatches form-section">
      <div v-for="color in colors" class="swatch" :style="{ background: color.hex }">
        <span class="swatch__label">{{color.name}}</span>

        <button @click="removeColor(color.hex)" title="Delete colour" class="small white">
          🗑️
        </button>
      </div>
    </div>

    <p v-if="colors.length">
      Creating styles will generate <strong>Local Styles</strong> for the provided colour palette and create sample swatches.
    </p>
    <div v-if="colors.length" class="form-section button-layout">
      <button class="primary" @click="createColorPalette">Create Styles</button>
      <button @click="resetPalette">Reset</button>
    </div>

    <div v-if="!colors.length">
      <p class="text-center form-section">No colours yet</p>
    </div>
  </div>

  <div v-if="activeTab === 'shades'">
    <h2>Shades Generator</h2>
    <p>
      Pick a colour and generate shades for it. <br/>
      You can use the eye dropper to pick from any element or choose from all your styles.
    </p>

    <div class="columns">
      <div class="col-third">
        <h3>Palette Name</h3>
        <input type="text" v-model="shadesPalette" @input="generateShades()">
      </div>

      <div class="col-third">
        <h3>Prefix</h3>
        <input type="text" v-model="shadesPrefix" @input="generateShades()">
      </div>

      <div class="col-third">
        <h3>Minimum number of shades</h3>
        <input type="number" v-model="shadesCount" @input="generateShades()">
      </div>
    </div>

    <h3>Pick colour</h3>
    <form class="add-color-form button-layout" @submit.prevent="">
      <input type="color" name="picked_color" v-model="shadesColorHex" @change="generateShades">
      <input type="text" name="picked_color" v-model="shadesColorHex" @change="generateShades">
      <button type="submit" @click="generateShades">Generate</button>
    </form>

    <div v-if="storeColoursWithoutShades.length" class="swatches form-section">
      <div v-for="color in storeColoursWithoutShades" class="swatch" :style="{ background: color.hex }"
        @click="shadesColorHex = color.hex; generateShades();">
        <span class="swatch__label">{{color.name.split('__')[1]}}</span>
      </div>
    </div>

    <div v-if="!shades.length">
      <p class="text-center form-section">Click generate after configuring the shades you want</p>
    </div>

    <div class="shades" v-if="shades.length">
      <div v-for="shade in shades" class="shade" :style="{ background: shade.hex }">
        <div>
          <span class="swatch__label">
            {{shade.name}}
          </span>
        </div>

        <div>
          <span class="swatch__label">
            {{shade.hex}}
          </span>
          <span class="swatch__label">
            {{shade.hsl}}
          </span>
        </div>
      </div>

      <div class="form-section">
        <p>
          Creating styles will generate <strong>Local Styles</strong> for the provided colour palette and create sample swatches.
        </p>
        <button class="primary" @click="createShadesPalette">
          Create Styles
        </button>
      </div>

      <div class="form-section">
        <p>
          If you manually add or remove styles, click <strong>Refresh</strong>.
        </p>
        <button @click="refreshLocalStyles">Refresh</button>
      </div>
    </div>
  </div>

  <div v-if="activeTab === 'code'">
    <h2>Local Styles</h2>
    <p>
      All of your colours from <strong>Local Styles</strong> will be generated here.
    </p>
    <p>
      If you manually add or remove styles, click <strong>Refresh</strong>.
    </p>
    <button @click="refreshLocalStyles">Refresh</button>

    <div v-if="store.codeBlocks.length" class="form-section code-layout">
      <div class="code-layout__item" v-for="codeBlock in store.codeBlocks">
        <div class="code-layout__title">
          <h3>{{codeBlock.name}}</h3>

          <button class="small" @click="copyCodeToClipboard(codeBlock)">
            Copy
          </button>
        </div>

        <div class="code-wrapper">
          <pre class="code-block">{{codeBlock.code}}</pre>
        </div>
      </div>
    </div>
  </div>

  <div v-if="activeTab === 'help'">
    <h2>Instructions</h2>
    <p>
      The <strong class="text-link" @click="activeTab = 'palettes'">Colour Palettes</strong> tab has a tool that allows you to manually pick colours and generate <strong>Local Styles</strong> for them so they can be easily reused while creating in Figma. After you're happy with your colours, click <strong>Create Styles</strong> to create local styles.
    </p>
    <p>
      The <strong class="text-link" @click="activeTab = 'shades'">Shades</strong> tab has a tool that generates shades for you based off of any colour. You can choose one ad-hoc or from your existing styles. After generating some shades, you can turn them into <strong>Local Styles</strong> styles by clicking <strong>Create Styles</strong> under the generated shades.
    </p>
    <p>
      Any colours under <strong>Local Styles</strong> will be available as code snippets under the <strong class="text-link" @click="activeTab = 'code'">Styles Code</strong> tab. This tab contains code snippets for web and mobile development (CSS, Android).
    </p>
    <p>
      If at any time you decide you no longer like the styles you've created, you can manually delete them in Figma. After doing so, click the <strong>Refresh</strong> button available on one of the tabs to see this reflected. Refresh also works if you manually create styles in Figma and don't see them available.
    </p>

    <h2>Example workflow</h2>
    <ol>
      <li>
        Go to <strong class="text-link" @click="activeTab = 'palettes'">Colour Palettes</strong> and choose some brand colours, or copy and paste existing hex values.
      </li>

      <li>
        Once colours are picked, click the <strong>Create Styles</strong> button to see them generated as local styles in Figma. These colours are now available for designing with.
      </li>

      <li>
        Go to <strong class="text-link" @click="activeTab = 'shades'">Shades</strong> and pick a grey you like. Choose the number of greys you'd like to generate.
      </li>

      <li>
        Once you're happy with the generated shades, the <strong>Create Styles</strong> button to see them generated as local styles in Figma. These shades are now available for designing with.
      </li>

      <li>
        Go to <strong class="text-link" @click="activeTab = 'code'">Styles Code</strong> and copy any relevant snippets and paste them into your project.
      </li>
    </ol>
  </div>
</div>