oi

[gabsharms]

// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brandMenu: '#09184D', // Azul Escuro Profundo
brandButton: '#7B5BF2', // Roxo / Violeta Vibrante
brandTitle: '#2F2E2E', // Grafite Escuro para Textos
brandInfo: '#808085', // Cinza Neutro para Legendas
brandBg: '#EDF2FA', // Branco Azulado Macio para o Fundo
},
},
},
}

[github-actions]

@gabsharms Hello! Here is an automated response to your question:

Hello! Thank you for sharing your custom color palette from tailwind.config.js. If you’d like to apply these visual styles (colors, backgrounds, etc.) in the AntV G canvas or other display objects, here’s how you can do it:

---

🎨 Using Custom Colors in AntV G

You can directly use your color values (e.g., #09184D, #7B5BF2) in G component styles.

1. Set Canvas Background Color

const canvas = new Canvas({
  container: 'container-id',
  width: 800,
  height: 600,
  renderer: yourRenderer,
  background: '#EDF2FA', // brandBg color
});

---

2. Apply Colors to Shapes

For elements like rectangles, circles, and text, use your custom color values:

import { Rect, Text, Circle } from '@antv/g';

// Rectangle with brandMenu color
const rect = new Rect({
  style: {
    x: 50,
    y: 50,
    width: 200,
    height: 100,
    fill: '#09184D', // brandMenu
  },
});

// Button-style Circle
const button = new Circle({
  style: {
    cx: 150,
    cy: 300,
    r: 40,
    fill: '#7B5BF2', // brandButton
  },
});

// Title text
const title = new Text({
  style: {
    x: 100,
    y: 20,
    text: 'Título',
    fontSize: 24,
    fill: '#2F2E2E', // brandTitle
  },
});

---

3. Legend and Info Text

const infoText = new Text({
  style: {
    x: 100,
    y: 50,
    text: 'Legenda',
    fontSize: 14,
    fill: '#808085', // brandInfo
  },
});

---

💡 Tips

• The G library accepts all CSS color formats (hex, rgb, rgba, color keywords).
• You can dynamically update styles with .setAttribute() or direct assignment.
• For backgrounds, use the background property on Canvas initialization.

---

If you have a specific element or scenario you want to style, please provide more details for tailored guidance!

---

Reference:

• G Canvas Options
• Shape Styling

Let us know if you need further help!

---

This is an automated response generated by AI. If you have any questions, our team will follow up as soon as possible.