[Transforms]: Some rgba() values not converted yet
six7 opened this issue · comments
Noticed some rgba() values with references aren't getting converted yet
Ran with
{
"dimension": {
"0": {
"value": "0",
"type": "dimension"
},
"2": {
"value": "2px",
"type": "dimension"
},
"4": {
"value": "4px",
"type": "dimension"
},
"6": {
"value": "6px",
"type": "dimension"
},
"8": {
"value": "8px",
"type": "dimension"
},
"12": {
"value": "12px",
"type": "dimension"
},
"16": {
"value": "16px",
"type": "dimension"
},
"24": {
"value": "24px",
"type": "dimension"
},
"32": {
"value": "32px",
"type": "dimension"
},
"48": {
"value": "48px",
"type": "dimension"
},
"64": {
"value": "64px",
"type": "dimension"
},
"96": {
"value": "96px",
"type": "dimension"
}
},
"colors": {
"black": {
"value": "#000000",
"type": "color"
},
"white": {
"value": "#ffffff",
"type": "color"
},
"gray": {
"50": {
"value": "#FDFDFE",
"type": "color"
},
"100": {
"value": "#F7FAFB",
"type": "color"
},
"200": {
"value": "#e8eff3",
"type": "color"
},
"300": {
"value": "#BED1DC",
"type": "color"
},
"400": {
"value": "#92B2C4",
"type": "color"
},
"500": {
"value": "#6A8EA2",
"type": "color"
},
"600": {
"value": "#4F6978",
"type": "color"
},
"700": {
"value": "#354752",
"type": "color"
},
"800": {
"value": "#161d22",
"type": "color"
},
"900": {
"value": "#141719",
"type": "color"
},
"950": {
"value": "#0b0d0e",
"type": "color"
}
},
"red": {
"100": {
"value": "#fff5f5",
"type": "color"
},
"200": {
"value": "#fed7d7",
"type": "color"
},
"300": {
"value": "#feb2b2",
"type": "color"
},
"400": {
"value": "#fc8181",
"type": "color"
},
"500": {
"value": "#f56565",
"type": "color"
},
"600": {
"value": "#e53e3e",
"type": "color"
},
"700": {
"value": "#c53030",
"type": "color"
},
"800": {
"value": "#9b2c2c",
"type": "color"
},
"900": {
"value": "#742a2a",
"type": "color"
}
},
"orange": {
"100": {
"value": "#fffaf0",
"type": "color"
},
"200": {
"value": "#feebc8",
"type": "color"
},
"300": {
"value": "#fbd38d",
"type": "color"
},
"400": {
"value": "#f6ad55",
"type": "color"
},
"500": {
"value": "#ed8936",
"type": "color"
},
"600": {
"value": "#dd6b20",
"type": "color"
},
"700": {
"value": "#c05621",
"type": "color"
},
"800": {
"value": "#9c4221",
"type": "color"
},
"900": {
"value": "#7b341e",
"type": "color"
}
},
"yellow": {
"100": {
"value": "#fffff0",
"type": "color"
},
"200": {
"value": "#fefcbf",
"type": "color"
},
"300": {
"value": "#faf089",
"type": "color"
},
"400": {
"value": "#f6e05e",
"type": "color"
},
"500": {
"value": "#ecc94b",
"type": "color"
},
"600": {
"value": "#d69e2e",
"type": "color"
},
"700": {
"value": "#b7791f",
"type": "color"
},
"800": {
"value": "#975a16",
"type": "color"
},
"900": {
"value": "#744210",
"type": "color"
}
},
"green": {
"100": {
"value": "#f0fff4",
"type": "color"
},
"200": {
"value": "#c6f6d5",
"type": "color"
},
"300": {
"value": "#9ae6b4",
"type": "color"
},
"400": {
"value": "#68d391",
"type": "color"
},
"500": {
"value": "#48bb78",
"type": "color"
},
"600": {
"value": "#38a169",
"type": "color"
},
"700": {
"value": "#2f855a",
"type": "color"
},
"800": {
"value": "#276749",
"type": "color"
},
"900": {
"value": "#22543d",
"type": "color"
}
},
"teal": {
"100": {
"value": "#e6fffa",
"type": "color"
},
"200": {
"value": "#b2f5ea",
"type": "color"
},
"300": {
"value": "#81e6d9",
"type": "color"
},
"400": {
"value": "#4fd1c5",
"type": "color"
},
"500": {
"value": "#38b2ac",
"type": "color"
},
"600": {
"value": "#319795",
"type": "color"
},
"700": {
"value": "#2c7a7b",
"type": "color"
},
"800": {
"value": "#285e61",
"type": "color"
},
"900": {
"value": "#234e52",
"type": "color"
}
},
"blue": {
"50": {
"value": "#FCFDFF",
"type": "color"
},
"100": {
"value": "#eaf4fa",
"type": "color"
},
"200": {
"value": "#DAEBF8",
"type": "color"
},
"300": {
"value": "#AED2F1",
"type": "color"
},
"400": {
"value": "#75B3E7",
"type": "color"
},
"500": {
"value": "#408ECF",
"type": "color"
},
"600": {
"value": "#306999",
"type": "color"
},
"700": {
"value": "#204868",
"type": "color"
},
"800": {
"value": "#142D41",
"type": "color"
},
"900": {
"value": "#0B1924",
"type": "color"
},
"950": {
"value": "#04080C",
"type": "color"
}
},
"indigo": {
"100": {
"value": "#ebf4ff",
"type": "color"
},
"200": {
"value": "#c3dafe",
"type": "color"
},
"300": {
"value": "#a3bffa",
"type": "color"
},
"400": {
"value": "#7f9cf5",
"type": "color"
},
"500": {
"value": "#667eea",
"type": "color"
},
"600": {
"value": "#5a67d8",
"type": "color"
},
"700": {
"value": "#4c51bf",
"type": "color"
},
"800": {
"value": "#434190",
"type": "color"
},
"900": {
"value": "#3c366b",
"type": "color"
}
},
"purple": {
"100": {
"value": "#faf5ff",
"type": "color"
},
"200": {
"value": "#e9d8fd",
"type": "color"
},
"300": {
"value": "#d6bcfa",
"type": "color"
},
"400": {
"value": "#b794f4",
"type": "color"
},
"500": {
"value": "#9f7aea",
"type": "color"
},
"600": {
"value": "#805ad5",
"type": "color"
},
"700": {
"value": "#6b46c1",
"type": "color"
},
"800": {
"value": "#553c9a",
"type": "color"
},
"900": {
"value": "#44337a",
"type": "color"
}
},
"pink": {
"100": {
"value": "#fff5f7",
"type": "color"
},
"200": {
"value": "#fed7e2",
"type": "color"
},
"300": {
"value": "#fbb6ce",
"type": "color"
},
"400": {
"value": "#f687b3",
"type": "color"
},
"500": {
"value": "#ed64a6",
"type": "color"
},
"600": {
"value": "#d53f8c",
"type": "color"
},
"700": {
"value": "#b83280",
"type": "color"
},
"800": {
"value": "#97266d",
"type": "color"
},
"900": {
"value": "#702459",
"type": "color"
}
}
},
"fg": {
"default": {
"value": "{colors.gray.900}",
"type": "color",
"description": "Default color for text or icons in any given interface. Should be used for text content that is considered primary."
},
"muted": {
"value": "{colors.gray.700}",
"type": "color",
"description": "Color for text or icon content that is secondary, which is not considered critical."
},
"subtle": {
"value": "{colors.gray.600}",
"type": "color",
"description": "Color used for placeholder text or decorative elements."
}
},
"bg": {
"default": {
"value": "{colors.gray.50}",
"type": "color",
"description": "Primary background color."
},
"subtle": {
"value": "{colors.gray.200}",
"type": "color",
"description": "Secondary background color to subdue against default background color."
},
"surface": {
"value": "{colors.white}",
"type": "color",
"description": "TO BE DEPRECATED (use bg.default) Can be used to provide further contrast of elements compared to the page backgroud."
},
"canvas": {
"value": "{colors.gray.100}",
"type": "color",
"description": "Background color of the page background, not to be used for anything else."
},
"emphasis": {
"value": "{colors.gray.900}",
"type": "color",
"description": "Background color for elements that need to be placed on top of the page, such as context menus or tooltips."
}
},
"border": {
"default": {
"value": "{colors.gray.400}",
"type": "color",
"description": "Border color to be used on most elements, use border colors to visually group content."
},
"muted": {
"value": "{colors.gray.300}",
"type": "color",
"description": "Secondary border color used for divider elements that need to be further distinguished."
},
"subtle": {
"value": "{colors.gray.200}",
"type": "color",
"description": "Tertiary border color, use sparingly. Used for elements that need a slight visual separation."
}
},
"accent": {
"default": {
"value": "{colors.blue.600}",
"type": "color",
"description": "Default accent color, used for foreground elements such as text or icons."
},
"emphasis": {
"value": "{colors.blue.500}",
"type": "color",
"description": "Default accent color for background elements, such as button backgrounds."
},
"bg": {
"value": "{colors.blue.100}",
"type": "color",
"description": "Subdued accent background color, used for e.g. label backgrounds."
},
"muted": {
"value": "{colors.blue.300}",
"type": "color",
"description": "Muted accent color, used for text that might need to be distinguished from the primary."
},
"onAccent": {
"value": "{colors.white}",
"type": "color",
"description": "When used with accent.emphasis, provides high contrast and legibility."
},
"border": {
"value": "{colors.blue.400}",
"type": "color",
"description": "Use to style borders in combination with the accent color, e.g. for important elements that need to be visually prominent."
}
},
"success": {
"fg": {
"value": "{colors.green.600}",
"type": "color",
"description": "Use for text or icons, to communicate a positive message."
},
"bg": {
"value": "{colors.green.100}",
"type": "color",
"description": "Use for subtle backgrounds, to communicate a positive message."
},
"border": {
"value": "{colors.green.300}",
"type": "color",
"description": "Use for borders, to communicate a positive message."
}
},
"danger": {
"fg": {
"value": "{colors.red.600}",
"type": "color",
"description": "Use for text or icons, to communicate a negative or critical message."
},
"bg": {
"value": "{colors.red.100}",
"type": "color",
"description": "Use for subtle backgrounds, to communicate a negative or critical message."
},
"border": {
"value": "{colors.red.300}",
"type": "color",
"description": "Use for borders, to communicate a negative or critical message."
}
},
"shadow": {
"default": {
"value": "rgba({fg.default}, 0.05)",
"type": "color",
"description": "The default shadow color, used for most shadows."
}
},
"interaction": {
"handle": {
"value": "{accent.onAccent}",
"type": "color",
"description": "The color of handles in a slider or other interactive controls."
},
"handleInactive": {
"value": "{bg.default}",
"type": "color",
"description": "The inactive color of handles in a slider or other interactive controls."
},
"bg": {
"value": "{colors.gray.100}",
"type": "color"
}
},
"modal": {
"backdrop": {
"value": "rgba({colors.gray.300}, 0.5)",
"type": "color",
"description": "Backdrop color behind a modal."
}
},
"title": {
"border-bottom": {
"value": "linear-gradient(90deg, {border.muted} 0%, {bg.canvas} 100%)",
"type": "color"
}
},
"input": {
"bg": {
"value": "{bg.default}",
"type": "color"
},
"border": {
"rest": {
"value": "{border.muted}",
"type": "color"
},
"focus": {
"value": "{accent.emphasis}",
"type": "color"
}
}
},
"spinner": {
"onAccent": {
"active": {
"value": "{accent.onAccent}",
"type": "color"
},
"muted": {
"value": "rgba({accent.onAccent}, 0.5)",
"type": "color"
}
},
"default": {
"active": {
"value": "{fg.default}",
"type": "color"
},
"muted": {
"value": "{border.muted}",
"type": "color"
}
}
},
"button": {
"primary": {
"bg": {
"rest": {
"value": "{accent.emphasis}",
"type": "color"
},
"hover": {
"value": "{accent.emphasis}",
"type": "color"
}
},
"fg": {
"value": "{accent.onAccent}",
"type": "color"
}
},
"secondary": {
"bg": {
"rest": {
"value": "{interaction.bg}",
"type": "color"
},
"hover": {
"value": "{bg.default}",
"type": "color"
}
},
"fg": {
"value": "{fg.default}",
"type": "color"
},
"border": {
"rest": {
"value": "{border.muted}",
"type": "color"
}
}
},
"focus": {
"value": "{accent.emphasis}",
"type": "color"
}
},
"contextMenu": {
"bg": {
"value": "{bg.emphasis}",
"type": "color"
},
"bgHover": {
"value": "{colors.gray.700}",
"type": "color"
},
"fg": {
"value": "{colors.white}",
"type": "color"
},
"fgMuted": {
"value": "{colors.gray.300}",
"type": "color"
},
"fgDisabled": {
"value": "{colors.gray.400}",
"type": "color"
},
"separator": {
"value": "{colors.gray.700}",
"type": "color"
},
"border": {
"value": "{colors.gray.700}",
"type": "color"
}
},
"fonts": {
"sans": {
"value": "Inter, sans-serif",
"type": "fontFamilies"
},
"mono": {
"value": "IBM Plex Sans, monospace",
"type": "fontFamilies"
}
},
"lineHeights": {
"loose": {
"value": "140%",
"type": "lineHeights"
},
"tight": {
"value": "120%",
"type": "lineHeights"
}
},
"fontWeights": {
"sans": {
"light": {
"value": "300",
"type": "fontWeights"
},
"regular": {
"value": "400",
"type": "fontWeights"
},
"medium": {
"value": "500",
"type": "fontWeights"
},
"semibold": {
"value": "600",
"type": "fontWeights"
},
"bold": {
"value": "600",
"type": "fontWeights"
}
}
},
"fontSizes": {
"xxsmall": {
"value": "11px",
"type": "fontSizes"
},
"xsmall": {
"value": "12px",
"type": "fontSizes"
},
"small": {
"value": "14px",
"type": "fontSizes"
},
"base": {
"value": "16px",
"type": "fontSizes"
},
"large": {
"value": "20px",
"type": "fontSizes"
},
"xlarge": {
"value": "24px",
"type": "fontSizes"
},
"xxlarge": {
"value": "32px",
"type": "fontSizes"
}
},
"letterSpacings": {
"0": {
"value": "0%",
"type": "letterSpacing"
}
},
"paragraphSpacing": {
"0": {
"value": "0",
"type": "paragraphSpacing"
}
},
"radii": {
"small": {
"value": "{dimension.4}",
"type": "dimension"
},
"medium": {
"value": "{dimension.6}",
"type": "dimension"
}
},
"space": {
"1": {
"value": "{dimension.2}",
"type": "dimension"
},
"2": {
"value": "{dimension.4}",
"type": "dimension"
},
"3": {
"value": "{dimension.8}",
"type": "dimension"
},
"4": {
"value": "{dimension.12}",
"type": "dimension"
},
"5": {
"value": "{dimension.16}",
"type": "dimension"
},
"6": {
"value": "{dimension.24}",
"type": "dimension"
},
"7": {
"value": "{dimension.32}",
"type": "dimension"
},
"8": {
"value": "{dimension.48}",
"type": "dimension"
},
"9": {
"value": "{dimension.64}",
"type": "dimension"
},
"10": {
"value": "38px",
"type": "dimension",
"description": "We should remove this."
}
},
"size": {
"1": {
"value": "{dimension.2}",
"type": "dimension"
},
"2": {
"value": "{dimension.4}",
"type": "dimension"
},
"3": {
"value": "{dimension.8}",
"type": "dimension"
},
"4": {
"value": "{dimension.12}",
"type": "dimension"
},
"5": {
"value": "{dimension.16}",
"type": "dimension"
},
"6": {
"value": "{dimension.24}",
"type": "dimension"
},
"7": {
"value": "{dimension.32}",
"type": "dimension"
},
"8": {
"value": "{dimension.48}",
"type": "dimension"
},
"9": {
"value": "{dimension.64}",
"type": "dimension"
}
},
"type": {
"h1": {
"normal": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.regular}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xxlarge}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
},
"bold": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.medium}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xxlarge}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
}
},
"h2": {
"normal": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.regular}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xlarge}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
},
"bold": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.medium}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xlarge}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
}
},
"text-large": {
"normal": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.regular}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.large}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
},
"bold": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.medium}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.large}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
}
},
"text": {
"normal": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.regular}",
"lineHeight": "{lineHeights.loose}",
"fontSize": "{fontSizes.base}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
},
"bold": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.medium}",
"lineHeight": "{lineHeights.loose}",
"fontSize": "{fontSizes.base}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
}
},
"text-small": {
"normal": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.regular}",
"lineHeight": "{lineHeights.loose}",
"fontSize": "{fontSizes.small}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
},
"bold": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.medium}",
"lineHeight": "{lineHeights.loose}",
"fontSize": "{fontSizes.small}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
}
},
"text-xsmall": {
"normal": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.regular}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xsmall}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
},
"bold": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.medium}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xsmall}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
}
},
"text-xxsmall": {
"normal": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.regular}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xxsmall}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
},
"bold": {
"value": {
"fontFamily": "{fonts.sans}",
"fontWeight": "{fontWeights.sans.medium}",
"lineHeight": "{lineHeights.tight}",
"fontSize": "{fontSizes.xxsmall}",
"letterSpacing": "{letterSpacings.0}",
"paragraphSpacing": "{paragraphSpacing.0}"
},
"type": "typography"
}
}
},
"shadows": {
"small": {
"value": {
"x": "0",
"y": "2px",
"blur": "1px",
"spread": "0",
"color": "{shadow.default}",
"type": "dropShadow"
},
"type": "boxShadow"
},
"focus": {
"value": {
"x": "0",
"y": "0",
"blur": "0",
"spread": "2px",
"color": "{accent.default}",
"type": "dropShadow"
},
"type": "boxShadow"
},
"contextMenu": {
"value": [
{
"x": "0",
"y": "10px",
"blur": "38px",
"spread": "-10px",
"color": "rgba(22, 23, 24, 0.35)",
"type": "dropShadow"
},
{
"x": "0",
"y": "10px",
"blur": "20px",
"spread": "-15px",
"color": "rgba(22, 23, 24, 0.2)",
"type": "dropShadow"
}
],
"type": "boxShadow"
}
}
}