mirror of
https://github.com/penpot/penpot-export.git
synced 2025-01-19 21:22:28 -05:00
feat!(core): use 8-digit hexadecimal RGBA colors
The 8-digit hexadecimal RGBA syntax is a more standard way to represent colors than the rgba() color function, which is CSS-specific. The 8-digit hex notation is valid CSS as of the CSS Level 4 spec: https://www.w3.org/TR/css-color-4/#hex-notation Additionally, the CSS rgba() comma-separated color function is considered *legacy color syntax* as per the CSS Level 4 spec: https://www.w3.org/TR/css-color-4/#legacy-color-syntax Sass has built-in support for CSS Level 4 color notations: https://sass-lang.com/documentation/values/colors/ The 8-digit hexadecimal RGBA is a drop-in replacement for rgba() values in both CSS and SCSS, so this is functionally compatible if the file is used directly. BREAKING CHANGE: drops CSS rgba() values in all output formats. It's a soft breaking change for CSS and SCSS outputs, but a hard one for JSON.
This commit is contained in:
Roberto Redradix
parent
f7275f8e30
commit
2b3381fa97
4 changed files with 95 additions and 87 deletions
|
|
@ -1,15 +1,23 @@
|
|||
import { PenpotApiFile } from '../../api'
|
||||
import { CSSCustomPropertyDefinition } from '../../types'
|
||||
|
||||
const toRgbaCssValue = (hex: string, alpha: number = 1) => {
|
||||
const channels = hex.match(/\w{2}/g)
|
||||
if (channels === null || channels.length !== 3)
|
||||
const toHexQuartet = (hexTriplet: string, alpha: number = 1) => {
|
||||
const alphaChannel = Math.trunc(alpha * 0x100) - 1
|
||||
if (alphaChannel < 0 || alphaChannel > 0xff)
|
||||
throw new Error(
|
||||
'Invalid alpha (opacity) number: requires a decimal value between 0 and 1.0',
|
||||
)
|
||||
|
||||
const rgbChannels = hexTriplet.match(/\w{2}/g)
|
||||
if (rgbChannels === null || rgbChannels.length !== 3)
|
||||
throw new Error(
|
||||
'Invalid RGB value provided: requires 8-bit hexadecimal value per channel',
|
||||
)
|
||||
|
||||
const [r, g, b] = channels.map((channelHex) => parseInt(channelHex, 16))
|
||||
return `rgba(${[r, g, b, alpha].join(', ')})`
|
||||
const [RR, GG, BB] = rgbChannels
|
||||
const AA = alphaChannel.toString(16).padStart(2, '0')
|
||||
|
||||
return ('#' + RR + GG + BB + AA).toLowerCase()
|
||||
}
|
||||
|
||||
export const adaptColorsToCssVariables = (
|
||||
|
|
@ -22,7 +30,7 @@ export const adaptColorsToCssVariables = (
|
|||
return {
|
||||
scope: fileName,
|
||||
name: color.name,
|
||||
value: toRgbaCssValue(color.color, color.opacity),
|
||||
value: toHexQuartet(color.color, color.opacity),
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
:root {
|
||||
--Primary_900: rgba(0, 110, 84, 1);
|
||||
--Secondary_500: rgba(191, 152, 254, 1);
|
||||
--Secondary_400: rgba(207, 179, 255, 1);
|
||||
--Neutral_100: rgba(247, 248, 249, 1);
|
||||
--Neutral_500: rgba(133, 144, 162, 1);
|
||||
--Primary_200: rgba(202, 255, 233, 1);
|
||||
--Secondary_800: rgba(105, 31, 209, 1);
|
||||
--Primary_100: rgba(233, 255, 247, 1);
|
||||
--Secondary_200: rgba(240, 232, 255, 1);
|
||||
--Neutral_200: rgba(241, 242, 244, 1);
|
||||
--Neutral_300: rgba(220, 223, 228, 1);
|
||||
--Neutral_700: rgba(98, 111, 134, 1);
|
||||
--Neutral_400: rgba(179, 185, 196, 1);
|
||||
--Neutral_600: rgba(117, 129, 149, 1);
|
||||
--Secondary_600: rgba(148, 83, 249, 1);
|
||||
--Primary_300: rgba(154, 255, 217, 1);
|
||||
--Primary_400: rgba(90, 251, 199, 1);
|
||||
--Secondary_300: rgba(228, 212, 255, 1);
|
||||
--Primary_800: rgba(0, 139, 105, 1);
|
||||
--Neutral_900: rgba(23, 43, 77, 1);
|
||||
--Neutral_800: rgba(68, 84, 111, 1);
|
||||
--Secondary_900: rgba(91, 31, 170, 1);
|
||||
--Primary_700: rgba(0, 174, 127, 1);
|
||||
--Secondary_700: rgba(125, 48, 237, 1);
|
||||
--Primary_500: rgba(49, 239, 184, 1);
|
||||
--Secondary_100: rgba(249, 245, 255, 1);
|
||||
--Primary_600: rgba(0, 213, 154, 1);
|
||||
--Primary_900: #006e54ff;
|
||||
--Secondary_500: #bf98feff;
|
||||
--Secondary_400: #cfb3ffff;
|
||||
--Neutral_100: #f7f8f9ff;
|
||||
--Neutral_500: #8590a2ff;
|
||||
--Primary_200: #caffe9ff;
|
||||
--Secondary_800: #691fd1ff;
|
||||
--Primary_100: #e9fff7ff;
|
||||
--Secondary_200: #f0e8ffff;
|
||||
--Neutral_200: #f1f2f4ff;
|
||||
--Neutral_300: #dcdfe4ff;
|
||||
--Neutral_700: #626f86ff;
|
||||
--Neutral_400: #b3b9c4ff;
|
||||
--Neutral_600: #758195ff;
|
||||
--Secondary_600: #9453f9ff;
|
||||
--Primary_300: #9affd9ff;
|
||||
--Primary_400: #5afbc7ff;
|
||||
--Secondary_300: #e4d4ffff;
|
||||
--Primary_800: #008b69ff;
|
||||
--Neutral_900: #172b4dff;
|
||||
--Neutral_800: #44546fff;
|
||||
--Secondary_900: #5b1faaff;
|
||||
--Primary_700: #00ae7fff;
|
||||
--Secondary_700: #7d30edff;
|
||||
--Primary_500: #31efb8ff;
|
||||
--Secondary_100: #f9f5ffff;
|
||||
--Primary_600: #00d59aff;
|
||||
}
|
||||
|
|
@ -2,136 +2,136 @@
|
|||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 900",
|
||||
"value": "rgba(0, 110, 84, 1)"
|
||||
"value": "#006e54ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 500",
|
||||
"value": "rgba(191, 152, 254, 1)"
|
||||
"value": "#bf98feff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 400",
|
||||
"value": "rgba(207, 179, 255, 1)"
|
||||
"value": "#cfb3ffff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 100",
|
||||
"value": "rgba(247, 248, 249, 1)"
|
||||
"value": "#f7f8f9ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 500",
|
||||
"value": "rgba(133, 144, 162, 1)"
|
||||
"value": "#8590a2ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 200",
|
||||
"value": "rgba(202, 255, 233, 1)"
|
||||
"value": "#caffe9ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 800",
|
||||
"value": "rgba(105, 31, 209, 1)"
|
||||
"value": "#691fd1ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 100",
|
||||
"value": "rgba(233, 255, 247, 1)"
|
||||
"value": "#e9fff7ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 200",
|
||||
"value": "rgba(240, 232, 255, 1)"
|
||||
"value": "#f0e8ffff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 200",
|
||||
"value": "rgba(241, 242, 244, 1)"
|
||||
"value": "#f1f2f4ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 300",
|
||||
"value": "rgba(220, 223, 228, 1)"
|
||||
"value": "#dcdfe4ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 700",
|
||||
"value": "rgba(98, 111, 134, 1)"
|
||||
"value": "#626f86ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 400",
|
||||
"value": "rgba(179, 185, 196, 1)"
|
||||
"value": "#b3b9c4ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 600",
|
||||
"value": "rgba(117, 129, 149, 1)"
|
||||
"value": "#758195ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 600",
|
||||
"value": "rgba(148, 83, 249, 1)"
|
||||
"value": "#9453f9ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 300",
|
||||
"value": "rgba(154, 255, 217, 1)"
|
||||
"value": "#9affd9ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 400",
|
||||
"value": "rgba(90, 251, 199, 1)"
|
||||
"value": "#5afbc7ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 300",
|
||||
"value": "rgba(228, 212, 255, 1)"
|
||||
"value": "#e4d4ffff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 800",
|
||||
"value": "rgba(0, 139, 105, 1)"
|
||||
"value": "#008b69ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 900",
|
||||
"value": "rgba(23, 43, 77, 1)"
|
||||
"value": "#172b4dff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Neutral 800",
|
||||
"value": "rgba(68, 84, 111, 1)"
|
||||
"value": "#44546fff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 900",
|
||||
"value": "rgba(91, 31, 170, 1)"
|
||||
"value": "#5b1faaff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 700",
|
||||
"value": "rgba(0, 174, 127, 1)"
|
||||
"value": "#00ae7fff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 700",
|
||||
"value": "rgba(125, 48, 237, 1)"
|
||||
"value": "#7d30edff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 500",
|
||||
"value": "rgba(49, 239, 184, 1)"
|
||||
"value": "#31efb8ff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Secondary 100",
|
||||
"value": "rgba(249, 245, 255, 1)"
|
||||
"value": "#f9f5ffff"
|
||||
},
|
||||
{
|
||||
"scope": "EasyFest: Design System & Landing page",
|
||||
"name": "Primary 600",
|
||||
"value": "rgba(0, 213, 154, 1)"
|
||||
"value": "#00d59aff"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,27 +1,27 @@
|
|||
$Primary_900: rgba(0, 110, 84, 1);
|
||||
$Secondary_500: rgba(191, 152, 254, 1);
|
||||
$Secondary_400: rgba(207, 179, 255, 1);
|
||||
$Neutral_100: rgba(247, 248, 249, 1);
|
||||
$Neutral_500: rgba(133, 144, 162, 1);
|
||||
$Primary_200: rgba(202, 255, 233, 1);
|
||||
$Secondary_800: rgba(105, 31, 209, 1);
|
||||
$Primary_100: rgba(233, 255, 247, 1);
|
||||
$Secondary_200: rgba(240, 232, 255, 1);
|
||||
$Neutral_200: rgba(241, 242, 244, 1);
|
||||
$Neutral_300: rgba(220, 223, 228, 1);
|
||||
$Neutral_700: rgba(98, 111, 134, 1);
|
||||
$Neutral_400: rgba(179, 185, 196, 1);
|
||||
$Neutral_600: rgba(117, 129, 149, 1);
|
||||
$Secondary_600: rgba(148, 83, 249, 1);
|
||||
$Primary_300: rgba(154, 255, 217, 1);
|
||||
$Primary_400: rgba(90, 251, 199, 1);
|
||||
$Secondary_300: rgba(228, 212, 255, 1);
|
||||
$Primary_800: rgba(0, 139, 105, 1);
|
||||
$Neutral_900: rgba(23, 43, 77, 1);
|
||||
$Neutral_800: rgba(68, 84, 111, 1);
|
||||
$Secondary_900: rgba(91, 31, 170, 1);
|
||||
$Primary_700: rgba(0, 174, 127, 1);
|
||||
$Secondary_700: rgba(125, 48, 237, 1);
|
||||
$Primary_500: rgba(49, 239, 184, 1);
|
||||
$Secondary_100: rgba(249, 245, 255, 1);
|
||||
$Primary_600: rgba(0, 213, 154, 1);
|
||||
$Primary_900: #006e54ff;
|
||||
$Secondary_500: #bf98feff;
|
||||
$Secondary_400: #cfb3ffff;
|
||||
$Neutral_100: #f7f8f9ff;
|
||||
$Neutral_500: #8590a2ff;
|
||||
$Primary_200: #caffe9ff;
|
||||
$Secondary_800: #691fd1ff;
|
||||
$Primary_100: #e9fff7ff;
|
||||
$Secondary_200: #f0e8ffff;
|
||||
$Neutral_200: #f1f2f4ff;
|
||||
$Neutral_300: #dcdfe4ff;
|
||||
$Neutral_700: #626f86ff;
|
||||
$Neutral_400: #b3b9c4ff;
|
||||
$Neutral_600: #758195ff;
|
||||
$Secondary_600: #9453f9ff;
|
||||
$Primary_300: #9affd9ff;
|
||||
$Primary_400: #5afbc7ff;
|
||||
$Secondary_300: #e4d4ffff;
|
||||
$Primary_800: #008b69ff;
|
||||
$Neutral_900: #172b4dff;
|
||||
$Neutral_800: #44546fff;
|
||||
$Secondary_900: #5b1faaff;
|
||||
$Primary_700: #00ae7fff;
|
||||
$Secondary_700: #7d30edff;
|
||||
$Primary_500: #31efb8ff;
|
||||
$Secondary_100: #f9f5ffff;
|
||||
$Primary_600: #00d59aff;
|
||||
Loading…
Add table
Reference in a new issue