From 5ff746189e6d80550c7a23766c45b72cdedeafe2 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Wed, 21 Sep 2022 14:07:17 +0200 Subject: [PATCH] feat: color generation with Style Dictionary --- package-lock.json | 13 + package.json | 5 +- style-dictionary.config.json | 28 ++- style-dictionary.js | 56 ++++- tokens/color.json | 450 ----------------------------------- tokens/colors.js | 67 ++++++ tokens/colors.json | 434 +++++++++++++++++++++++++++++++++ 7 files changed, 599 insertions(+), 454 deletions(-) delete mode 100644 tokens/color.json create mode 100644 tokens/colors.js create mode 100644 tokens/colors.json diff --git a/package-lock.json b/package-lock.json index 7c74b2110..364c8487f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "@db-ui/base", "version": "0.14.0", "license": "Apache-2.0", + "dependencies": { + "hex-a11y": "^1.0.2" + }, "devDependencies": { "@commitlint/cli": "16.2.1", "@commitlint/config-conventional": "16.2.1", @@ -3254,6 +3257,11 @@ "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", "dev": true }, + "node_modules/hex-a11y": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hex-a11y/-/hex-a11y-1.0.2.tgz", + "integrity": "sha512-M5ez7G+ebutJXr6aYoEzjM5RKbWJJmpxjgvw34Tai9k3robs9B1BfIJBPrAzzPD9eb2bGJ5qNSUcAyVs1T6XzQ==" + }, "node_modules/hosted-git-info": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", @@ -12094,6 +12102,11 @@ } } }, + "hex-a11y": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hex-a11y/-/hex-a11y-1.0.2.tgz", + "integrity": "sha512-M5ez7G+ebutJXr6aYoEzjM5RKbWJJmpxjgvw34Tai9k3robs9B1BfIJBPrAzzPD9eb2bGJ5qNSUcAyVs1T6XzQ==" + }, "hosted-git-info": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", diff --git a/package.json b/package.json index 95729c6eb..e82196c53 100644 --- a/package.json +++ b/package.json @@ -62,5 +62,8 @@ "pl:version": "patternlab --version", "version": "npm run build" }, - "homepage": "https://db-ui.github.io/base/" + "homepage": "https://db-ui.github.io/base/", + "dependencies": { + "hex-a11y": "^1.0.2" + } } diff --git a/style-dictionary.config.json b/style-dictionary.config.json index d1fc8b74d..38e4e90fc 100644 --- a/style-dictionary.config.json +++ b/style-dictionary.config.json @@ -1,5 +1,5 @@ { - "source": ["tokens/**/*.json", "tokens/**/*.jsonc"], + "source": ["tokens/**/*.js"], "platforms": { "css": { "transformGroup": "css", @@ -23,6 +23,32 @@ } ] }, + "sketch": { + "transforms": [ + "attribute/cti", + "color/sketchTransform", + "name/cti/kebab" + ], + "buildPath": "build/sketch/", + "prefix": "db", + "files": [ + { + "destination": "sketch-palette.sketchpalette", + "format": "sketch/sketchpalette" + } + ] + }, + "json": { + "transformGroup": "js", + "buildPath": "build/json/", + "prefix": "db", + "files": [ + { + "destination": "colors.json", + "format": "json" + } + ] + }, "js": { "transformGroup": "js", "buildPath": "build/js/", diff --git a/style-dictionary.js b/style-dictionary.js index b3fa78b62..62ec574b5 100644 --- a/style-dictionary.js +++ b/style-dictionary.js @@ -2,6 +2,8 @@ const StyleDictionary = require('style-dictionary').extend( 'style-dictionary.config.json' ); +const TinyColor2 = require('tinycolor2'); + const minifyDictionary = require('style-dictionary/lib/common/formatHelpers/minifyDictionary'); const flattenColors = (dictionary) => { @@ -18,9 +20,11 @@ const flattenColors = (dictionary) => { Object.keys(colors[colorKey]).forEach((subColorKey) => { // TODO: We should be able to removed this with Amazon Style Dictionary 4, as this might allow parallel "nesting" of a value and subentries if (subColorKey === '_') { - flatColors[`${colorKey}`] = colors[colorKey][subColorKey]; + flatColors[`${colorKey}`] = + colors[colorKey][subColorKey]; } else if (subColorKey.includes('small')) { - flatColors[`${colorKey}-sm`] = colors[colorKey][subColorKey]; + flatColors[`${colorKey}-sm`] = + colors[colorKey][subColorKey]; } else { flatColors[`${colorKey}-${subColorKey}`] = colors[colorKey][subColorKey]; @@ -32,6 +36,9 @@ const flattenColors = (dictionary) => { dictionary['color'] = flatColors; }; +/** + * Custom Tailwind Formatter + */ StyleDictionary.registerFormat({ name: 'tailwind', formatter: function ({ dictionary, platform, options, file }) { @@ -41,4 +48,49 @@ StyleDictionary.registerFormat({ } }); +/** + * Custom Sketch Palette Transform + */ +StyleDictionary.registerTransform({ + type: 'value', + transitive: true, + name: 'color/sketchTransform', + // matcher: (prop) => prop.attributes.category === 'color', + transformer: (prop) => { + let color = TinyColor2(prop.original.value).toRgb(); + console.log('--- transformer current token: ', color); + return { + red: color.r / 255, // .toFixed(2) + green: color.g / 255, + blue: color.b / 255, + alpha: color.a + }; + } +}); + +/** + * Custom Sketch Palette Formatter + */ +StyleDictionary.registerFormat({ + name: 'sketch/sketchpalette', + formatter: ({ dictionary, platform, options, file }) => { + //console.log('sketch formatter ', dictionary); + + var to_ret = { + compatibleVersion: '2.0', + pluginVersion: '2.22', + colors: dictionary.allProperties.map(function (prop) { + // Merging the token's value, which should be an object with r,g,b,a channels + return Object.assign( + { + name: prop.name + }, + prop.value + ); + }) + }; + return JSON.stringify(to_ret, null, 2); + } +}); + StyleDictionary.buildAllPlatforms(); diff --git a/tokens/color.json b/tokens/color.json deleted file mode 100644 index 6c237dbec..000000000 --- a/tokens/color.json +++ /dev/null @@ -1,450 +0,0 @@ -{ - "color": { - "yellow": { - "100": { - "value": "#ffffdc", - "attributes": { "color": "yellow" } - }, - "200": { - "value": "#ffffaf", - "attributes": { "color": "yellow" } - }, - "300": { - "value": "#fff876", - "attributes": { "color": "yellow" } - }, - "400": { - "value": "#fff000", - "attributes": { "color": "yellow" } - }, - "500": { - "value": "#ffd800", - "attributes": { "color": "yellow" } - }, - "600": { - "value": "#ffbb00", - "attributes": { "color": "yellow" } - }, - "700": { - "value": "#ff9b00", - "attributes": { "color": "yellow" } - }, - "800": { - "value": "#ff7a00", - "attributes": { "color": "yellow" } - }, - "900": { - "value": "#f05000", - "attributes": { "color": "yellow" } - } - }, - "orange": { - "100": { - "value": "#fff4d8", - "attributes": { "color": "orange" } - }, - "200": { - "value": "#fce3b4", - "attributes": { "color": "orange" } - }, - "300": { - "value": "#faca7f", - "attributes": { "color": "orange" } - }, - "400": { - "value": "#f8ab37", - "attributes": { "color": "orange" } - }, - "500": { - "value": "#f39200", - "attributes": { "color": "orange" } - }, - "600": { - "value": "#d77b00", - "attributes": { "color": "orange" } - }, - "700": { - "value": "#c05e00", - "attributes": { "color": "orange" } - }, - "800": { - "value": "#a24800", - "attributes": { "color": "orange" } - } - }, - "red": { - "100": { - "value": "#fee6e6", - "attributes": { "color": "red" } - }, - "200": { - "value": "#fcc8c3", - "attributes": { "color": "red" } - }, - "300": { - "value": "#fa9090", - "attributes": { "color": "red" } - }, - "400": { - "value": "#f75056", - "attributes": { "color": "red" } - }, - "500": { - "value": "#ec0016", - "attributes": { "color": "red" } - }, - "600": { - "value": "#c50014", - "attributes": { "color": "red" } - }, - "700": { - "value": "#9b000e", - "attributes": { "color": "red" } - }, - "800": { - "value": "#740009", - "attributes": { "color": "red" } - } - }, - "burgundy": { - "100": { - "value": "#f4e8ed", - "attributes": { "color": "burgundy" } - }, - "200": { - "value": "#edcbd6", - "attributes": { "color": "burgundy" } - }, - "300": { - "value": "#da9aa8", - "attributes": { "color": "burgundy" } - }, - "400": { - "value": "#c0687b", - "attributes": { "color": "burgundy" } - }, - "500": { - "value": "#a9455d", - "attributes": { "color": "burgundy" } - }, - "600": { - "value": "#8c2e46", - "attributes": { "color": "burgundy" } - }, - "700": { - "value": "#641e32", - "attributes": { "color": "burgundy" } - }, - "800": { - "value": "#4d0820", - "attributes": { "color": "burgundy" } - } - }, - "pink": { - "100": { - "value": "#fdeef8", - "attributes": { "color": "pink" } - }, - "200": { - "value": "#f9d2e5", - "attributes": { "color": "pink" } - }, - "300": { - "value": "#f4aece", - "attributes": { "color": "pink" } - }, - "400": { - "value": "#ee7bae", - "attributes": { "color": "pink" } - }, - "500": { - "value": "#e93e8f", - "attributes": { "color": "pink" } - }, - "600": { - "value": "#db0078", - "attributes": { "color": "pink" } - }, - "700": { - "value": "#b80065", - "attributes": { "color": "pink" } - }, - "800": { - "value": "#970052", - "attributes": { "color": "pink" } - } - }, - "violett": { - "100": { - "value": "#f4eefa", - "attributes": { "color": "violett" } - }, - "200": { - "value": "#e0cde4", - "attributes": { "color": "violett" } - }, - "300": { - "value": "#c2a1c7", - "attributes": { "color": "violett" } - }, - "400": { - "value": "#9a6ca6", - "attributes": { "color": "violett" } - }, - "500": { - "value": "#814997", - "attributes": { "color": "violett" } - }, - "600": { - "value": "#6e368c", - "attributes": { "color": "violett" } - }, - "700": { - "value": "#581d70", - "attributes": { "color": "violett" } - }, - "800": { - "value": "#421857", - "attributes": { "color": "violett" } - } - }, - "blue": { - "100": { - "value": "#e0effb", - "attributes": { "color": "blue" } - }, - "200": { - "value": "#b4d5f6", - "attributes": { "color": "blue" } - }, - "300": { - "value": "#73aef4", - "attributes": { "color": "blue" } - }, - "400": { - "value": "#347de0", - "attributes": { "color": "blue" } - }, - "500": { - "value": "#1455c0", - "attributes": { "color": "blue" } - }, - "600": { - "value": "#0c3992", - "attributes": { "color": "blue" } - }, - "700": { - "value": "#0a1e6e", - "attributes": { "color": "blue" } - }, - "800": { - "value": "#061350", - "attributes": { "color": "blue" } - } - }, - "cyan": { - "100": { - "value": "#e5faff", - "attributes": { "color": "cyan" } - }, - "200": { - "value": "#bbe6f8", - "attributes": { "color": "cyan" } - }, - "300": { - "value": "#84cfef", - "attributes": { "color": "cyan" } - }, - "400": { - "value": "#55b9e6", - "attributes": { "color": "cyan" } - }, - "500": { - "value": "#309fd1", - "attributes": { "color": "cyan" } - }, - "600": { - "value": "#0087b9", - "attributes": { "color": "cyan" } - }, - "700": { - "value": "#006a96", - "attributes": { "color": "cyan" } - }, - "800": { - "value": "#004b6d", - "attributes": { "color": "cyan" } - } - }, - "turquoise": { - "100": { - "value": "#e3f5f4", - "attributes": { "color": "turquoise" } - }, - "200": { - "value": "#bee2e5", - "attributes": { "color": "turquoise" } - }, - "300": { - "value": "#83caca", - "attributes": { "color": "turquoise" } - }, - "400": { - "value": "#3cb5ae", - "attributes": { "color": "turquoise" } - }, - "500": { - "value": "#00a099", - "attributes": { "color": "turquoise" } - }, - "600": { - "value": "#008984", - "attributes": { "color": "turquoise" } - }, - "700": { - "value": "#006e6b", - "attributes": { "color": "turquoise" } - }, - "800": { - "value": "#005752", - "attributes": { "color": "turquoise" } - } - }, - "green": { - "100": { - "value": "#e2f3e5", - "attributes": { "color": "green" } - }, - "200": { - "value": "#bddbb9", - "attributes": { "color": "green" } - }, - "300": { - "value": "#8cbc80", - "attributes": { "color": "green" } - }, - "400": { - "value": "#66a558", - "attributes": { "color": "green" } - }, - "500": { - "value": "#408335", - "attributes": { "color": "green" } - }, - "600": { - "value": "#2a7230", - "attributes": { "color": "green" } - }, - "700": { - "value": "#165c27", - "attributes": { "color": "green" } - }, - "800": { - "value": "#154a26", - "attributes": { "color": "green" } - } - }, - "light-green": { - "100": { - "value": "#ebf7dd", - "attributes": { "color": "light-green" } - }, - "200": { - "value": "#c9eb9e", - "attributes": { "color": "light-green" } - }, - "300": { - "value": "#9fd45f", - "attributes": { "color": "light-green" } - }, - "400": { - "value": "#78be14", - "attributes": { "color": "light-green" } - }, - "500": { - "value": "#63a615", - "attributes": { "color": "light-green" } - }, - "600": { - "value": "#508b1b", - "attributes": { "color": "light-green" } - }, - "700": { - "value": "#44741a", - "attributes": { "color": "light-green" } - }, - "800": { - "value": "#375f15", - "attributes": { "color": "light-green" } - } - }, - "warm-gray": { - "100": { - "value": "#f5f4f1", - "attributes": { "color": "warm-gray" } - }, - "200": { - "value": "#ddded6", - "attributes": { "color": "warm-gray" } - }, - "300": { - "value": "#bcbbb2", - "attributes": { "color": "warm-gray" } - }, - "400": { - "value": "#9c9a8e", - "attributes": { "color": "warm-gray" } - }, - "500": { - "value": "#858379", - "attributes": { "color": "warm-gray" } - }, - "600": { - "value": "#747067", - "attributes": { "color": "warm-gray" } - }, - "700": { - "value": "#4f4b41", - "attributes": { "color": "warm-gray" } - }, - "800": { - "value": "#38342f", - "attributes": { "color": "warm-gray" } - } - }, - "cool-gray": { - "100": { - "value": "#f0f3f5", - "attributes": { "color": "cool-gray" } - }, - "200": { - "value": "#d7dce1", - "attributes": { "color": "cool-gray" } - }, - "300": { - "value": "#afb4bb", - "attributes": { "color": "cool-gray" } - }, - "400": { - "value": "#878c96", - "attributes": { "color": "cool-gray" } - }, - "500": { - "value": "#646973", - "attributes": { "color": "cool-gray" } - }, - "600": { - "value": "#3c414b", - "attributes": { "color": "cool-gray" } - }, - "700": { - "value": "#282d37", - "attributes": { "color": "cool-gray" } - }, - "800": { - "value": "#131821", - "attributes": { "color": "cool-gray" } - } - } - } -} diff --git a/tokens/colors.js b/tokens/colors.js new file mode 100644 index 000000000..c775492bf --- /dev/null +++ b/tokens/colors.js @@ -0,0 +1,67 @@ +/** + * Generate color values for each baseColor according to state enabled, hover or pressed. + * + * Depending on color luminance (threshold 0.1), hover and pressed values are generated by lighten or darken baseColor value. + * + * TODO: + * - generate on colors for all values according to sketch definitions + * - StyleDictionary export to JSON file to import in sketch (with indexed naming, e.g. 01--neutral) + * - write sketch plugin for import generated colors in sketch + */ + +const Color = require('tinycolor2'); + +const LUMINANCE_THRESHOLD = 0.1; + +const baseColors = { + neutral: { r: 255, g: 255, b: 255 }, + neutralBackground01: { r: 248, g: 249, b: 249 }, + neutralBackground02: { r: 242, g: 243, b: 244 }, + neutralBackground03: { r: 236, g: 236, b: 237 }, + neutralBackground04: { r: 230, g: 230, b: 232 }, + neutralBackground05: { r: 224, g: 225, b: 227 }, + neutralBackground06: { r: 217, g: 219, b: 221 }, + primary: { r: 236, g: 0, b: 22 }, + primaryBackground: { r: 250, g: 191, b: 196 }, + secondary: { r: 40, g: 45, b: 55 }, + secondaryBackground: { r: 195, g: 196, b: 199 }, + success: { r: 67, g: 122, b: 18 }, + successBackground: { r: 206, g: 222, b: 191 }, + information: { r: 0, g: 135, b: 185 }, + informationBackground: { r: 184, g: 221, b: 235 }, + warning: { r: 240, g: 80, b: 0 }, + warningBackground: { r: 250, g: 206, b: 184 }, + critical: { r: 236, g: 0, b: 22 }, + criticalBackground: { r: 249, g: 184, b: 190 } +}; + +// Use a reduce function to take the array of keys in baseColor +// and map them to an object with the same keys. +module.exports = { + color: Object.keys(baseColors).reduce((ret, color) => { + return Object.assign({}, ret, { + [color]: { + // generate the shades/tints for each color + enabled: { + value: Color(baseColors[color]).toHexString() + }, + hover: { + value: + Color(baseColors[color]).getLuminance() < + LUMINANCE_THRESHOLD + ? Color(baseColors[color]).brighten(8).toHexString() + : Color(baseColors[color]).darken(5.7).toHexString() + }, + pressed: { + value: + Color(baseColors[color]).getLuminance() < + LUMINANCE_THRESHOLD + ? Color(baseColors[color]) + .brighten(20) + .toHexString() + : Color(baseColors[color]).darken(11).toHexString() + } + } + }); + }, {}) +}; diff --git a/tokens/colors.json b/tokens/colors.json new file mode 100644 index 000000000..c7a995018 --- /dev/null +++ b/tokens/colors.json @@ -0,0 +1,434 @@ +{ + "color": { + "01--Neutral": { + "01--Enabled": { + "value": "rgba(255, 255, 255, 1)" + }, + "02--Hover": { + "value": "rgba(235, 235, 235, 1)" + }, + "03--Pressed": { + "value": "rgba(214, 214, 214, 1)" + }, + "BackgroundOnly": { + "1": { + "01--Enabled": { + "value": "rgba(248, 249, 249, 1)" + }, + "02--Hover": { + "value": "rgba(228, 229, 229, 1)" + }, + "03--Pressed": { + "value": "rgba(208, 208, 208, 1)" + } + }, + "2": { + "01--Enabled": { + "value": "rgba(242, 243, 244, 1)" + }, + "02--Hover": { + "value": "rgba(223, 223, 224, 1)" + }, + "03--Pressed": { + "value": "rgba(203, 203, 204, 1)" + } + }, + "3": { + "01--Enabled": { + "value": "rgba(236, 236, 237, 1)" + }, + "02--Hover": { + "value": "rgba(217, 217, 218, 1)" + }, + "03--Pressed": { + "value": "rgba(198, 198, 198, 1)" + } + }, + "4": { + "01--Enabled": { + "value": "rgba(230, 230, 232, 1)" + }, + "02--Hover": { + "value": "rgba(211, 211, 213, 1)" + }, + "03--Pressed": { + "value": "rgba(193, 193, 194, 1)" + } + }, + "5": { + "01--Enabled": { + "value": "rgba(224, 225, 227, 1)" + }, + "02--Hover": { + "value": "rgba(206, 207, 209, 1)" + }, + "03--Pressed": { + "value": "rgba(187, 188, 190, 1)" + } + }, + "6": { + "01--Enabled": { + "value": "rgba(217, 219, 221, 1)" + }, + "02--Hover": { + "value": "rgba(199, 201, 203, 1)" + }, + "03--Pressed": { + "value": "rgba(182, 183, 185, 1)" + } + } + } + }, + "02--Primary": { + "01--Enabled": { + "value": "rgba(236, 0, 22, 1)" + }, + "02--Hover": { + "value": "rgba(217, 0, 20, 1)" + }, + "03--Pressed": { + "value": "rgba(199, 0, 18, 1)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(250, 191, 196, 1)" + }, + "02--Hover": { + "value": "rgba(246, 161, 169, 1)" + }, + "03--Pressed": { + "value": "rgba(246, 139, 149, 1)" + } + } + }, + "03--Secondary": { + "01--Enabled": { + "value": "rgba(40, 45, 55, 1)" + }, + "02--Hover": { + "value": "rgba(66, 70, 79, 1)" + }, + "03--Pressed": { + "value": "rgba(91, 95, 102, 1)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(195, 196, 199, 1)" + }, + "02--Hover": { + "value": "rgba(176, 177, 181, 1)" + }, + "03--Pressed": { + "value": "rgba(158, 160, 164, 1)" + } + } + }, + "04--Success": { + "01--Enabled": { + "value": "rgba(67, 122, 18, 1)" + }, + "02--Hover": { + "value": "rgba(61, 113, 16, 1)" + }, + "03--Pressed": { + "value": "rgba(57, 104, 15, 1)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(206, 222, 191, 1)" + }, + "02--Hover": { + "value": "rgba(190, 212, 170, 1)" + }, + "03--Pressed": { + "value": "rgba(175, 201, 151, 1)" + } + } + }, + "05--Information": { + "01--Enabled": { + "value": "rgba(0, 135, 185, 1)" + }, + "02--Hover": { + "value": "rgba(0, 124, 170, 1)" + }, + "03--Pressed": { + "value": "rgba(0, 113, 155, 1)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(184, 221, 235, 1)" + }, + "02--Hover": { + "value": "rgba(161, 210, 228, 1)" + }, + "03--Pressed": { + "value": "rgba(139, 200, 222, 1)" + } + } + }, + "06--Warning": { + "01--Enabled": { + "value": "rgba(240, 80, 0, 1)" + }, + "02--Hover": { + "value": "rgba(221, 73, 0, 1)" + }, + "03--Pressed": { + "value": "rgba(201, 67, 0, 1)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(250, 206, 184, 1)" + }, + "02--Hover": { + "value": "rgba(248, 190, 161, 1)" + }, + "03--Pressed": { + "value": "rgba(248, 175, 139, 1)" + } + } + }, + "07--Critical": { + "01--Enabled": { + "value": "rgba(236, 0, 22, 1)" + }, + "02--Hover": { + "value": "rgba(217, 0, 20, 1)" + }, + "03--Pressed": { + "value": "rgba(198, 0, 18, 1)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(249, 184, 190, 1)" + }, + "02--Hover": { + "value": "rgba(247, 167, 175, 1)" + }, + "03--Pressed": { + "value": "rgba(246, 139, 149, 1)" + } + } + }, + "On": { + "01--Neutral": { + "01--Enabled": { + "value": "rgba(40, 45, 55, 1)" + }, + "02--Hover": { + "value": "rgba(40, 45, 55, 0.75)" + }, + "03--Pressed": { + "value": "rgba(40, 45, 55, 0.5)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(40, 45, 55, 1)" + }, + "02--Hover": { + "value": "rgba(40, 45, 55, 0.75)" + }, + "03--Pressed": { + "value": "rgba(40, 45, 55, 0.5)" + }, + "Weak--01--Enabled": { + "value": "rgba(40, 45, 55, 0.75)" + }, + "Weak--02--Hover": { + "value": "rgba(40, 45, 55, 0.5)" + }, + "Weak--03--Pressed": { + "value": "rgba(40, 45, 55, 0.25)" + } + } + }, + "02--Primary": { + "01--Enabled": { + "value": "rgba(255, 255, 255, 1)" + }, + "02--Hover": { + "value": "rgba(255, 255, 255, 0.75)" + }, + "03--Pressed": { + "value": "rgba(255, 255, 255, 0.5)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(85, 0, 7, 1)" + }, + "02--Hover": { + "value": "rgba(85, 0, 7, 0.75)" + }, + "03--Pressed": { + "value": "rgba(85, 0, 7, 0.5)" + }, + "Weak--01--Enabled": { + "value": "rgba(85, 0, 7, 0.75)" + }, + "Weak--02--Hover": { + "value": "rgba(85, 0, 7, 0.5)" + }, + "Weak--03--Pressed": { + "value": "rgba(85, 0, 7, 0.25)" + } + } + }, + "03--Secondary": { + "01--Enabled": { + "value": "rgba(255, 255, 255, 1)" + }, + "02--Hover": { + "value": "rgba(255, 255, 255, 0.75)" + }, + "03--Pressed": { + "value": "rgba(255, 255, 255, 0.25)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(14, 16, 19, 1)" + }, + "02--Hover": { + "value": "rgba(14, 16, 19, 0.75)" + }, + "03--Pressed": { + "value": "rgba(14, 16, 19, 0.5)" + }, + "Weak--01--Enabled": { + "value": "rgba(14, 16, 19, 0.75)" + }, + "Weak--02--Hover": { + "value": "rgba(14, 16, 19, 0.5)" + }, + "Weak--03--Pressed": { + "value": "rgba(14, 16, 19, 0.25)" + } + } + }, + "04--Success": { + "01--Enabled": { + "value": "rgba(255, 255, 255, 1)" + }, + "02--Hover": { + "value": "rgba(255, 255, 255, 0.75)" + }, + "03--Pressed": { + "value": "rgba(255, 255, 255, 0.5)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(28, 50, 9, 1)" + }, + "02--Hover": { + "value": "rgba(28, 50, 9, 0.75)" + }, + "03--Pressed": { + "value": "rgba(28, 50, 9, 0.5)" + }, + "Weak--01--Enabled": { + "value": "rgba(28, 50, 9, 0.75)" + }, + "Weak--02--Hover": { + "value": "rgba(28, 50, 9, 0.5)" + }, + "Weak--03--Pressed": { + "value": "rgba(28, 50, 9, 0.25)" + } + } + }, + "05--Information": { + "01--Enabled": { + "value": "rgba(255, 255, 255, 1)" + }, + "02--Hover": { + "value": "rgba(255, 255, 255, 0.75)" + }, + "03--Pressed": { + "value": "rgba(255, 255, 255, 0.5)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(0, 48, 66, 1)" + }, + "02--Hover": { + "value": "rgba(0, 48, 66, 0.75)" + }, + "03--Pressed": { + "value": "rgba(0, 48, 66, 0.5)" + }, + "Weak--01--Enabled": { + "value": "rgba(0, 48, 66, 0.75)" + }, + "Weak--02--Hover": { + "value": "rgba(0, 48, 66, 0.5)" + }, + "Weak--03--Pressed": { + "value": "rgba(0, 48, 66, 0.25)" + } + } + }, + "06--Warning": { + "01--Enabled": { + "value": "rgba(255, 255, 255, 1)" + }, + "02--Hover": { + "value": "rgba(255, 255, 255, 0.75)" + }, + "03--Pressed": { + "value": "rgba(255, 255, 255, 0.5)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(86, 28, 0, 1)" + }, + "02--Hover": { + "value": "rgba(86, 28, 0, 0.75)" + }, + "03--Pressed": { + "value": "rgba(86, 28, 0, 0.5)" + }, + "Weak--01--Enabled": { + "value": "rgba(86, 28, 0, 0.75)" + }, + "Weak--02--Hover": { + "value": "rgba(86, 28, 0, 0.5)" + }, + "Weak--03--Pressed": { + "value": "rgba(86, 28, 0, 0.25)" + } + } + }, + "07--Critical": { + "01--Enabled": { + "value": "rgba(255, 255, 255, 1)" + }, + "02--Hover": { + "value": "rgba(255, 255, 255, 0.75)" + }, + "03--Pressed": { + "value": "rgba(255, 255, 255, 0.5)" + }, + "BackgroundOnly": { + "01--Enabled": { + "value": "rgba(85, 0, 7, 1)" + }, + "02--Hover": { + "value": "rgba(85, 0, 7, 0.75)" + }, + "03--Pressed": { + "value": "rgba(85, 0, 7, 0.5)" + }, + "Weak--01--Enabled": { + "value": "rgba(85, 0, 7, 0.75)" + }, + "Weak--02--Hover": { + "value": "rgba(85, 0, 7, 0.5)" + }, + "Weak--03--Pressed": { + "value": "rgba(85, 0, 7, 0.25)" + } + } + } + } + } +}