diff --git a/design-tokens/src/color.ts b/design-tokens/src/color.ts index 172cadf6b..49f6e5e97 100644 --- a/design-tokens/src/color.ts +++ b/design-tokens/src/color.ts @@ -1,51 +1,54 @@ -import { Color } from './figma_api.js' +import { Color } from './figma_api.js'; /** * Compares two colors for approximate equality since converting between Figma RGBA objects (from 0 -> 1) and * hex colors can result in slight differences. */ export function colorApproximatelyEqual(colorA: Color, colorB: Color) { - return rgbToHex(colorA) === rgbToHex(colorB) + return rgbToHex(colorA) === rgbToHex(colorB); } export function parseColor(color: string): Color { - color = color.trim() - const hexRegex = /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2}){0,1}$/ - const hexShorthandRegex = /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]){0,1}$/ + color = color.trim(); + const hexRegex = /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2}){0,1}$/; + const hexShorthandRegex = /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]){0,1}$/; if (hexRegex.test(color) || hexShorthandRegex.test(color)) { - const hexValue = color.substring(1) + const hexValue = color.substring(1); const expandedHex = hexValue.length === 3 || hexValue.length === 4 ? hexValue .split('') - .map((char) => char + char) + .map(char => char + char) .join('') - : hexValue + : hexValue; - const alphaValue = expandedHex.length === 8 ? expandedHex.slice(6, 8) : undefined + const alphaValue = + expandedHex.length === 8 ? expandedHex.slice(6, 8) : undefined; return { r: parseInt(expandedHex.slice(0, 2), 16) / 255, g: parseInt(expandedHex.slice(2, 4), 16) / 255, b: parseInt(expandedHex.slice(4, 6), 16) / 255, - ...(alphaValue ? { a: parseInt(alphaValue, 16) / 255 } : {}), - } + ...(alphaValue + ? { a: Math.round((parseInt(alphaValue, 16) / 255) * 100) / 100 } + : {}), + }; } else { - throw new Error('Invalid color format') + throw new Error('Invalid color format'); } } export function rgbToHex({ r, g, b, a }: Color) { if (a === undefined) { - a = 1 + a = 1; } const toHex = (value: number) => { - const hex = Math.round(value * 255).toString(16) - return hex.length === 1 ? '0' + hex : hex - } + const hex = Math.round(value * 255).toString(16); + return hex.length === 1 ? '0' + hex : hex; + }; - const hex = [toHex(r), toHex(g), toHex(b)].join('') - return `#${hex}` + (a !== 1 ? toHex(a) : '') + const hex = [toHex(r), toHex(g), toHex(b)].join(''); + return `#${hex}` + (a !== 1 ? toHex(a) : ''); } diff --git a/sandbox/native-web/main.js b/sandbox/native-web/main.js index a5f21c4e5..bf6a58cbc 100644 --- a/sandbox/native-web/main.js +++ b/sandbox/native-web/main.js @@ -1,5 +1,5 @@ -import 'design-tokens/dist/css/colors-dark.css'; import 'design-tokens/dist/css/colors.css'; +import 'design-tokens/dist/css/colors-dark.css'; import 'design-tokens/dist/css/dimensions-large.css'; import 'design-tokens/dist/css/dimensions-small.css'; import './css/components.css';