diff --git a/helpers/flat-colors.js b/helpers/flat-colors.js
index 479a9147e..f0de45ab0 100644
--- a/helpers/flat-colors.js
+++ b/helpers/flat-colors.js
@@ -141,17 +141,20 @@ module.exports = function (Handlebars) {
let resultString = '';
Object.keys(context.data.root.colors).forEach((header) => {
- resultString += `${header}
`;
+ resultString += `${header}
`; // e.g. neutral, primary
const headerObject = context.data.root.colors[header];
if (headerObject) {
const headerObjKeysRest = Object.keys(headerObject).filter(
(k) => k !== 'bg'
);
- resultString += addList(
- header,
- headerObject,
- headerObjKeysRest
- );
+ // neutral has no enabled color
+ if (context.data.root.colors[header].enabled) {
+ resultString += addList(
+ header,
+ headerObject,
+ headerObjKeysRest
+ );
+ }
const onBgObject = headerObject['on'];
const bgObject = headerObject['bg'];
if (bgObject) {
@@ -162,10 +165,28 @@ module.exports = function (Handlebars) {
} else {
// Only happens in neutral colors
bgKeys.forEach((bgKey) => {
- bgObject[bgKey] = {
- ...bgObject[bgKey],
- on: onBgObject['bg']
- };
+ if (
+ Object.keys(bgObject[bgKey]).find(
+ (key) => key === 'enabled'
+ )
+ ) {
+ bgObject[bgKey] = {
+ ...bgObject[bgKey],
+ on: onBgObject['bg']
+ };
+ } else {
+ Object.keys(bgObject[bgKey]).forEach(
+ (bgChildKey) => {
+ bgObject[`${bgKey}-${bgChildKey}`] =
+ {
+ ...bgObject[bgKey][
+ bgChildKey
+ ],
+ on: onBgObject['bg']
+ };
+ }
+ );
+ }
});
}
}
@@ -174,7 +195,7 @@ module.exports = function (Handlebars) {
const otherChildren = bgKeys.filter(
(key) => !isDefaultChild(key)
);
- resultString += `${header} backgrounds light (only)
`;
+ resultString += `${header} backgrounds
`;
resultString += addList(
`${header}-bg`,
bgObject,
diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js
new file mode 100644
index 000000000..e31b076c8
--- /dev/null
+++ b/scripts/color-classes-generator.js
@@ -0,0 +1,100 @@
+/**
+ * Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
+ * according to definitions made by DB UI v3
+ */
+
+const prefix = 'db';
+
+/**
+ * backgrounds have more than one variant with the same color for text (on-color)
+ * e.g. neutral with variants 1-6 or transparent-full and transparent-semi
+ */
+
+const generateBGVariants = (value, index) => {
+ return `
+.${prefix}-bg-${value}-${index} {
+ @extend %${prefix}-bg-${value}-${index};
+
+ &-ia,
+ &[data-variant="ia"] {
+ @extend %${prefix}-bg-${value}-${index}-ia;
+ }
+
+ a {
+ @extend %${prefix}-bg-${value}-${index}-text-ia;
+ }
+
+ .db-weak {
+ @extend %weak;
+
+ &-ia,
+ &[data-variant="ia"],
+ a {
+ @extend %weak-ia;
+ }
+ }
+}
+`;
+};
+
+/**
+ * generates color utility classes and scss placeholders for non-interactive and interactive variants
+ * of color combination (background-color and color) based on definitions made by DB UI v3
+ *
+ * @param {*} colorToken scss transform obj generated by styleDictionary
+ * @returns scss string
+ */
+exports.generateColorUtilitityClasses = (colorToken) => {
+ let output = '';
+
+ Object.keys(colorToken).forEach((value, index) => {
+ output += `/**
+* ${value.toUpperCase()} - Utility Classes
+**/
+`;
+ // text colors with interactive variant, e.g. primary
+ if (colorToken[value].enabled) {
+ output += `
+.${prefix}-text-${value} {
+ @extend %${prefix}-text-${value};
+
+ &-ia,
+ &[data-variant="ia"],
+ a {
+ @extend %${prefix}-text-${value}-ia;
+ }
+}`;
+
+ output += `
+.${prefix}-bg-${value} {
+ @extend %${prefix}-bg-${value};
+
+ &-ia,
+ &[data-variant="ia"] {
+ @extend %${prefix}-bg-${value}-ia;
+ }
+
+ a {
+ @extend %${prefix}-bg-${value}-text-ia;
+ }
+}`;
+ }
+
+ Object.keys(colorToken[value].bg).forEach((variant) => {
+ if (colorToken[value].bg[variant].enabled) {
+ output += generateBGVariants(value, variant);
+ } else {
+ Object.keys(colorToken[value].bg[variant]).forEach(
+ (childVariant) => {
+ output += generateBGVariants(
+ value,
+ variant + '-' + childVariant
+ );
+ }
+ );
+ }
+ });
+ });
+
+ return output;
+};
diff --git a/scripts/color-placeholders-generator.js b/scripts/color-placeholders-generator.js
new file mode 100644
index 000000000..6db106970
--- /dev/null
+++ b/scripts/color-placeholders-generator.js
@@ -0,0 +1,128 @@
+/**
+ * Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
+ * according to definitions made by DB UI v3
+ */
+
+const prefix = 'db';
+
+const generateInteractiveVariants = (currentColorObj, cssProp) => {
+ return `
+ &:hover {
+ ${cssProp}: $${prefix}-${currentColorObj.hover.name};
+ }
+
+ &:active {
+ ${cssProp}: $${prefix}-${currentColorObj.pressed.name};
+ }
+ `;
+};
+
+/**
+ * backgrounds have more than one variant with the same color for text (on-color)
+ * e.g. neutral with variants 1-6 or transparent-full or transparent-semi
+ */
+
+const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
+ return `
+%${prefix}-bg-${value}-${index} {
+ background-color: $${prefix}-${currentColorObj.enabled.name};
+ color: $${prefix}-${baseColorObj.enabled.name};
+
+ &-ia,
+ &[data-variant="ia"] {
+ @extend %${prefix}-bg-${value}-${index};
+ ${generateInteractiveVariants(currentColorObj, 'background-color')}
+ }
+
+ &-text-ia,
+ &[data-variant="text-ia"] {
+ color: $${prefix}-${baseColorObj.enabled.name};
+ ${generateInteractiveVariants(baseColorObj, 'color')}
+ }
+
+ %weak {
+ color: $${prefix}-${baseColorObj.weak.enabled.name};
+
+ &-ia,
+ &[data-variant="ia"] {
+ color: $${prefix}-${baseColorObj.weak.enabled.name};
+ ${generateInteractiveVariants(baseColorObj.weak, 'color')}
+ }
+ }
+}
+`;
+};
+
+/**
+ * generates color utility classes and scss placeholders for non-interactive and interactive variants
+ * of color combination (background-color and color) based on definitions made by DB UI v3
+ *
+ * @param {*} colorToken scss transform obj generated by styleDictionary
+ * @returns scss string
+ */
+exports.generateColorUtilitityPlaceholder = (colorToken) => {
+ let output = '';
+
+ Object.keys(colorToken).forEach((value, index) => {
+ output += `/**
+* ${value.toUpperCase()} - Placeholder Utilities
+**/
+`;
+ // text colors with interactive variant, e.g. primary
+ if (colorToken[value].enabled) {
+ output += `%${prefix}-text-${value} {
+ color: $${prefix}-${colorToken[value].enabled.name};
+
+ &-ia,
+ &[data-variant="ia"] {
+ color: $${prefix}-${colorToken[value].enabled.name};
+ ${generateInteractiveVariants(colorToken[value], 'color')}
+ }
+}
+`;
+
+ // text and background colors
+ output += `
+%${prefix}-bg-${value} {
+ background-color: $${prefix}-${colorToken[value].enabled.name};
+ color: $${prefix}-${colorToken[value].on.enabled.name};
+
+ &-ia,
+ &[data-variant="ia"] {
+ @extend %${prefix}-bg-${value};
+ ${generateInteractiveVariants(colorToken[value], 'background-color')}
+ }
+
+ &-text-ia,
+ &[data-variant="text-ia"] {
+ color: $${prefix}-${colorToken[value].on.enabled.name};
+ ${generateInteractiveVariants(colorToken[value].on, 'color')}
+ }
+}`;
+ }
+
+ Object.keys(colorToken[value].bg).forEach((variant) => {
+ if (colorToken[value].bg[variant].enabled) {
+ output += generateBGVariants(
+ value,
+ variant,
+ colorToken[value].bg[variant],
+ colorToken[value].on.bg
+ );
+ } else {
+ Object.keys(colorToken[value].bg[variant]).forEach(
+ (childVariant) => {
+ output += generateBGVariants(
+ value,
+ variant + '-' + childVariant,
+ colorToken[value].bg[variant][childVariant],
+ colorToken[value].on.bg
+ );
+ }
+ );
+ }
+ });
+ });
+
+ return output;
+};
diff --git a/scripts/zeplin-styleguide.js b/scripts/zeplin-styleguide.js
index 4140c8860..e1d9fa2a9 100644
--- a/scripts/zeplin-styleguide.js
+++ b/scripts/zeplin-styleguide.js
@@ -31,7 +31,7 @@ const correctColor = (key) => {
) {
correctKey = `${correctKey}-enabled`;
}
- return correctKey.replace('backgroundonly', 'bg');
+ return correctKey.replace('background', 'bg');
};
const combineDataRecursive = (data, currentKey, keyArray, value) => {
diff --git a/source/_patterns/logo/_examples.demonstration.scss b/source/_patterns/logo/_examples.demonstration.scss
index f0ffcf038..9da7de03d 100644
--- a/source/_patterns/logo/_examples.demonstration.scss
+++ b/source/_patterns/logo/_examples.demonstration.scss
@@ -21,7 +21,7 @@
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
background-color: $db-colors-primary-enabled;
- --db-logo-color: #{$db-colors-neutral-enabled};
+ --db-logo-color: #{$db-colors-neutral-bg-0-enabled};
}
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-image {
background-image: url(https://marketingportal.extranet.deutschebahn.com/sites/default/files/2021-12-13/Ausn01.png);
@@ -36,7 +36,7 @@
width: 600px;
height: 340px;
- --db-logo-backgroundcolor: #{$db-colors-neutral-enabled};
+ --db-logo-backgroundcolor: #{$db-colors-neutral-bg-0-enabled};
}
}
}
diff --git a/source/_patterns/spacings/_examples.demonstration.scss b/source/_patterns/spacings/_examples.demonstration.scss
index dca24e8af..99fe0f882 100644
--- a/source/_patterns/spacings/_examples.demonstration.scss
+++ b/source/_patterns/spacings/_examples.demonstration.scss
@@ -1,4 +1,4 @@
.DO-NOT-COPY-THIS-CLASS-example-spacing {
height: 8px;
- background-color: $db-colors-primary-bg-enabled;
+ background-color: $db-colors-primary-bg-light-enabled;
}
diff --git a/source/css/db-ui-base.scss b/source/css/db-ui-base.scss
index 7739f6b82..5bb1d0835 100644
--- a/source/css/db-ui-base.scss
+++ b/source/css/db-ui-base.scss
@@ -1,7 +1,12 @@
@import "../../build/scss/variables";
@import "../../build/scss/font-faces";
@import "../../build/scss/typography-classes";
+@import "../../build/scss/color-placeholder";
+@import "../../build/scss/color-classes";
+/* body {
+ font-family: var(--asset-font-db-screensans-regular-name);
+} */
body,
button,
input,
diff --git a/source/css/pattern-scaffolding.css b/source/css/pattern-scaffolding.css
index fecc0d5ce..4f8da59c3 100644
--- a/source/css/pattern-scaffolding.css
+++ b/source/css/pattern-scaffolding.css
@@ -31,9 +31,9 @@
.sg-colors {
display: grid;
grid-gap: var(--pl-grid-gap);
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
list-style: none !important;
- margin: 0 !important;
+ margin: 0.75rem 0 2 rem;
padding: 0 !important;
}
@@ -44,13 +44,15 @@
flex: auto;
flex: auto;
margin: 0 0.5em 0.5em 0;
- max-width: 14em;
+ max-width: 20em;
min-width: 5em;
- padding: 0.3em;
+ padding: 0.75em;
+ font-size: 16px;
+ line-height: 1rem;
}
.sg-swatch {
- border: #000 dashed 1px;
+ border: rgba(0, 0, 0, 0.06) solid 1px;
border-radius: 5px;
display: flex;
margin-bottom: 0.3em;
@@ -59,12 +61,15 @@
}
.sg-label {
- font-size: 90%;
- line-height: 1;
+ font-size: 0.75rem;
+}
+
+.sg-label strong {
+ font-size: 1.2em;
}
.sg-swatch .sg-label {
- font-size: 80%;
+ font-size: 0.7rem;
margin: auto;
}
diff --git a/style-dictionary.config.json b/style-dictionary.config.json
index 52f99de0f..cb0211a2b 100644
--- a/style-dictionary.config.json
+++ b/style-dictionary.config.json
@@ -114,6 +114,26 @@
}
]
},
+ "db-core-color-placeholder": {
+ "transformGroup": "scss",
+ "buildPath": "build/scss/",
+ "files": [
+ {
+ "destination": "_color-placeholder.scss",
+ "format": "db-core-color-placeholder"
+ }
+ ]
+ },
+ "db-core-color-classes": {
+ "transformGroup": "scss",
+ "buildPath": "build/scss/",
+ "files": [
+ {
+ "destination": "_color-classes.scss",
+ "format": "db-core-color-classes"
+ }
+ ]
+ },
"android": {
"transformGroup": "android",
"buildPath": "build/android/src/main/res/values/",
diff --git a/style-dictionary.js b/style-dictionary.js
index f227ea198..649e1516a 100644
--- a/style-dictionary.js
+++ b/style-dictionary.js
@@ -3,7 +3,8 @@ const StyleDictionary = require('style-dictionary').extend(
);
const minifyDictionary = require('style-dictionary/lib/common/formatHelpers/minifyDictionary');
-
+const SCSSPlaceholders = require('./scripts/color-placeholders-generator');
+const SCSSClasses = require('./scripts/color-classes-generator');
const transforms = require('style-dictionary/lib/common/transforms');
const GenerateClasses = require('./scripts/scss-typography-generator');
@@ -44,6 +45,22 @@ StyleDictionary.registerFormat({
}
});
+StyleDictionary.registerFormat({
+ name: 'db-core-color-placeholder',
+ formatter: function ({ dictionary }) {
+ const colors = dictionary.tokens.colors;
+ return SCSSPlaceholders.generateColorUtilitityPlaceholder(colors);
+ }
+});
+
+StyleDictionary.registerFormat({
+ name: 'db-core-color-classes',
+ formatter: function ({ dictionary }) {
+ const colors = dictionary.tokens.colors;
+ return SCSSClasses.generateColorUtilitityClasses(colors);
+ }
+});
+
const getPathTransform = (orgTransform, token, options) => {
return transforms[orgTransform].transformer(
{
diff --git a/tokens/zeplin.json b/tokens/zeplin.json
index 0001c3b23..45c456a21 100644
--- a/tokens/zeplin.json
+++ b/tokens/zeplin.json
@@ -5,105 +5,159 @@
"desktop": {
"lineHeight": {
"value": 144,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "120",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 96,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "80",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 48,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "40",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
},
"medium": {
"desktop": {
"lineHeight": {
"value": 120,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "96",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 80,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "64",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 48,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "40",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
},
"small": {
"desktop": {
"lineHeight": {
"value": 96,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "80",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 64,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "48",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 48,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "40",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
}
},
@@ -112,175 +166,265 @@
"desktop": {
"lineHeight": {
"value": 80,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "64",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 48,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "40",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 40,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "32",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
},
"large": {
"desktop": {
"lineHeight": {
"value": 64,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "48",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 40,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "32",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 32,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "28",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
},
"medium": {
"desktop": {
"lineHeight": {
"value": 40,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "32",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 24,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "24",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 28,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "24",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
},
"small": {
"desktop": {
"lineHeight": {
"value": 28,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "24",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 24,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "20",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 24,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "20",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
},
"xsmall": {
"desktop": {
"lineHeight": {
"value": 20,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "16",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"tablet": {
"lineHeight": {
"value": 20,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "16",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
},
"mobile": {
"lineHeight": {
"value": 20,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "16",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 900 }
+ "fontWeight": {
+ "value": 900
+ }
}
}
},
@@ -289,431 +433,855 @@
"desktop": {
"lineHeight": {
"value": 32,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "24",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
},
"tablet": {
"lineHeight": {
"value": 32,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "24",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
},
"mobile": {
"lineHeight": {
"value": 28,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "20",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
}
},
"medium": {
"lineHeight": {
"value": 24,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "16",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
},
"small": {
"lineHeight": {
"value": 20,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "14",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
},
"xsmall": {
"lineHeight": {
"value": 16,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "12",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
}
},
"link": {
"medium": {
"lineHeight": {
"value": 20,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "16",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
},
"xsmall": {
"lineHeight": {
"value": 16,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "12",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
},
"small": {
"lineHeight": {
"value": 20,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "14",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
}
},
"system": {
"xxsmall": {
"lineHeight": {
"value": 12,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "10",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
},
"large": {
"lineHeight": {
"value": 28,
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
"fontSize": {
"value": "20",
- "attributes": { "category": "size" }
+ "attributes": {
+ "category": "size"
+ }
},
- "fontWeight": { "value": 400 }
+ "fontWeight": {
+ "value": 400
+ }
}
}
},
"spacing": {
- "1": { "value": "8px" },
- "2": { "value": "16px" },
- "3": { "value": "24px" },
- "4": { "value": "32px" },
- "5": { "value": "40px" },
- "6": { "value": "48px" },
- "8": { "value": "64px" },
- "10": { "value": "80px" },
- "12": { "value": "96px" },
- "15": { "value": "120px" },
- "20": { "value": "160px" },
- "30": { "value": "240px" },
- "40": { "value": "320px" },
- "60": { "value": "480px" },
- "80": { "value": "640px" },
- "100": { "value": "800px" },
- "120": { "value": "960px" },
- "0.5": { "value": "4px" },
- "2.5": { "value": "20px" },
- "1.5": { "value": "12px" }
+ "1": {
+ "value": "8px"
+ },
+ "2": {
+ "value": "16px"
+ },
+ "3": {
+ "value": "24px"
+ },
+ "4": {
+ "value": "32px"
+ },
+ "5": {
+ "value": "40px"
+ },
+ "6": {
+ "value": "48px"
+ },
+ "8": {
+ "value": "64px"
+ },
+ "10": {
+ "value": "80px"
+ },
+ "12": {
+ "value": "96px"
+ },
+ "15": {
+ "value": "120px"
+ },
+ "20": {
+ "value": "160px"
+ },
+ "30": {
+ "value": "240px"
+ },
+ "40": {
+ "value": "320px"
+ },
+ "60": {
+ "value": "480px"
+ },
+ "80": {
+ "value": "640px"
+ },
+ "100": {
+ "value": "800px"
+ },
+ "120": {
+ "value": "960px"
+ },
+ "0.5": {
+ "value": "4px"
+ },
+ "2.5": {
+ "value": "20px"
+ },
+ "1.5": {
+ "value": "12px"
+ }
},
"colors": {
"neutral": {
- "enabled": {
- "value": "rgb(255, 255, 255)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgb(235, 235, 235)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgb(214, 214, 214)",
- "attributes": { "category": "color" }
- },
"bg": {
+ "0": {
+ "enabled": {
+ "value": "rgb(255, 255, 255)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgb(224, 224, 224)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(194, 194, 194)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ },
"1": {
"enabled": {
"value": "rgb(248, 249, 249)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(228, 229, 229)",
- "attributes": { "category": "color" }
+ "value": "rgb(217, 218, 218)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(208, 208, 208)",
- "attributes": { "category": "color" }
+ "value": "rgb(188, 189, 189)",
+ "attributes": {
+ "category": "color"
+ }
}
},
"2": {
"enabled": {
"value": "rgb(242, 243, 244)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(223, 223, 224)",
- "attributes": { "category": "color" }
+ "value": "rgb(212, 213, 214)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(203, 203, 204)",
- "attributes": { "category": "color" }
+ "value": "rgb(184, 184, 185)",
+ "attributes": {
+ "category": "color"
+ }
}
},
"3": {
"enabled": {
"value": "rgb(236, 236, 237)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(198, 198, 198)",
- "attributes": { "category": "color" }
+ "value": "rgb(179, 179, 180)",
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(217, 217, 218)",
- "attributes": { "category": "color" }
+ "value": "rgb(207, 207, 208)",
+ "attributes": {
+ "category": "color"
+ }
}
},
"4": {
"enabled": {
"value": "rgb(230, 230, 232)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(211, 211, 213)",
- "attributes": { "category": "color" }
+ "value": "rgb(202, 202, 203)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(193, 193, 194)",
- "attributes": { "category": "color" }
+ "value": "rgb(174, 174, 176)",
+ "attributes": {
+ "category": "color"
+ }
}
},
"5": {
"enabled": {
"value": "rgb(224, 225, 227)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(206, 207, 209)",
- "attributes": { "category": "color" }
+ "value": "rgb(196, 197, 199)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(187, 188, 190)",
- "attributes": { "category": "color" }
+ "value": "rgb(170, 171, 172)",
+ "attributes": {
+ "category": "color"
+ }
}
},
"6": {
"enabled": {
"value": "rgb(217, 219, 221)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(199, 201, 203)",
- "attributes": { "category": "color" }
+ "value": "rgb(190, 192, 194)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(182, 183, 185)",
- "attributes": { "category": "color" }
+ "value": "rgb(165, 166, 168)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ },
+ "transparent": {
+ "full": {
+ "enabled": {
+ "value": "rgba(0, 0, 0, 0.0)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(0, 0, 0, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(0, 0, 0, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ },
+ "semi": {
+ "enabled": {
+ "value": "rgba(0, 0, 0, 0.04)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(0, 0, 0, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(0, 0, 0, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
+ }
}
}
},
"on": {
- "enabled": {
- "value": "rgb(40, 45, 55)",
- "attributes": { "category": "color" }
- },
"bg": {
"enabled": {
"value": "rgb(40, 45, 55)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgba(40, 45, 55, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(40, 45, 55, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(40, 45, 55, 0.5)",
+ "attributes": {
+ "category": "color"
+ }
},
"weak": {
"enabled": {
"value": "rgba(40, 45, 55, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(40, 45, 55, 0.25)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(40, 45, 55, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
}
- },
- "hover": {
- "value": "rgba(40, 45, 55, 0.75)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgba(40, 45, 55, 0.5)",
- "attributes": { "category": "color" }
}
}
},
"primary": {
"enabled": {
"value": "rgb(236, 0, 22)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgb(217, 0, 20)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgb(199, 0, 18)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"bg": {
- "enabled": {
- "value": "rgb(250, 191, 196)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgb(246, 161, 169)",
- "attributes": { "category": "color" }
+ "light": {
+ "enabled": {
+ "value": "rgb(250, 191, 196)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgb(246, 161, 169)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(246, 139, 149)",
+ "attributes": {
+ "category": "color"
+ }
+ }
},
- "pressed": {
- "value": "rgb(246, 139, 149)",
- "attributes": { "category": "color" }
+ "transparent": {
+ "semi": {
+ "enabled": {
+ "value": "rgba(236, 0, 22, 0.04)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(236, 0, 22, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(236, 0, 22, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
}
},
"on": {
"bg": {
"enabled": {
"value": "rgb(85, 0, 7)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(85, 0, 7, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(85, 0, 7, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"weak": {
"enabled": {
"value": "rgba(85, 0, 7, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(85, 0, 7, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(85, 0, 7, 0.25)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
}
},
"enabled": {
"value": "rgb(255, 255, 255)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(255, 255, 255, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(255, 255, 255, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
}
},
- "secondary": {
+ "critical": {
+ "bg": {
+ "transparent": {
+ "semi": {
+ "enabled": {
+ "value": "rgba(236, 0, 22, 0.04)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(236, 0, 22, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(236, 0, 22, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
+ },
+ "light": {
+ "enabled": {
+ "value": "rgb(249, 184, 190)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgb(247, 167, 175)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(246, 139, 149)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
+ },
"enabled": {
- "value": "rgb(40, 45, 55)",
- "attributes": { "category": "color" }
+ "value": "rgb(236, 0, 22)",
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(66, 70, 79)",
- "attributes": { "category": "color" }
+ "value": "rgb(217, 0, 20)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(91, 95, 102)",
- "attributes": { "category": "color" }
+ "value": "rgb(198, 0, 18)",
+ "attributes": {
+ "category": "color"
+ }
},
- "bg": {
+ "on": {
"enabled": {
- "value": "rgb(195, 196, 199)",
- "attributes": { "category": "color" }
+ "value": "rgb(255, 255, 255)",
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgb(176, 177, 181)",
- "attributes": { "category": "color" }
+ "value": "rgba(255, 255, 255, 0.75)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgb(158, 160, 164)",
- "attributes": { "category": "color" }
+ "value": "rgba(255, 255, 255, 0.5)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "bg": {
+ "enabled": {
+ "value": "rgb(85, 0, 7)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(85, 0, 7, 0.5)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(85, 0, 7, 0.75)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "weak": {
+ "enabled": {
+ "value": "rgba(85, 0, 7, 0.75)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(85, 0, 7, 0.5)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(85, 0, 7, 0.25)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
+ }
+ }
+ },
+ "secondary": {
+ "enabled": {
+ "value": "rgb(40, 45, 55)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "bg": {
+ "transparent": {
+ "semi": {
+ "enabled": {
+ "value": "rgba(40, 45, 55, 0.04)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(40, 45, 55, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(40, 45, 55, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
+ },
+ "light": {
+ "enabled": {
+ "value": "rgb(195, 196, 199)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgb(176, 177, 181)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(158, 160, 164)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
+ },
+ "hover": {
+ "value": "rgb(66, 70, 79)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(91, 95, 102)",
+ "attributes": {
+ "category": "color"
}
},
"on": {
"enabled": {
"value": "rgb(255, 255, 255)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(255, 255, 255, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(255, 255, 255, 0.25)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"bg": {
"enabled": {
"value": "rgb(14, 16, 19)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(14, 16, 19, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(14, 16, 19, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"weak": {
"enabled": {
"value": "rgba(14, 16, 19, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(14, 16, 19, 0.25)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(14, 16, 19, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
}
}
@@ -722,209 +1290,247 @@
"success": {
"enabled": {
"value": "rgb(67, 122, 18)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgb(61, 113, 16)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgb(57, 104, 15)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"bg": {
- "enabled": {
- "value": "rgb(206, 222, 191)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgb(190, 212, 170)",
- "attributes": { "category": "color" }
+ "light": {
+ "enabled": {
+ "value": "rgb(206, 222, 191)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgb(190, 212, 170)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(175, 201, 151)",
+ "attributes": {
+ "category": "color"
+ }
+ }
},
- "pressed": {
- "value": "rgb(175, 201, 151)",
- "attributes": { "category": "color" }
+ "transparent": {
+ "semi": {
+ "enabled": {
+ "value": "rgba(67, 122, 18, 0.04)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(67, 122, 18, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(67, 122, 18, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
}
},
"on": {
"enabled": {
"value": "rgb(255, 255, 255)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(255, 255, 255, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(255, 255, 255, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"bg": {
"enabled": {
"value": "rgb(28, 50, 9)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(28, 50, 9, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(28, 50, 9, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"weak": {
"enabled": {
"value": "rgba(28, 50, 9, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(28, 50, 9, 0.25)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(28, 50, 9, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
}
}
}
},
- "critical": {
+ "warning": {
"enabled": {
- "value": "rgb(236, 0, 22)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgb(217, 0, 20)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgb(198, 0, 18)",
- "attributes": { "category": "color" }
- },
- "bg": {
- "enabled": {
- "value": "rgb(249, 184, 190)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgb(247, 167, 175)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgb(246, 139, 149)",
- "attributes": { "category": "color" }
+ "value": "rgb(240, 80, 0)",
+ "attributes": {
+ "category": "color"
}
},
- "on": {
- "enabled": {
- "value": "rgb(255, 255, 255)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgba(255, 255, 255, 0.75)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgba(255, 255, 255, 0.5)",
- "attributes": { "category": "color" }
- },
- "bg": {
- "enabled": {
- "value": "rgb(85, 0, 7)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgba(85, 0, 7, 0.5)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgba(85, 0, 7, 0.75)",
- "attributes": { "category": "color" }
- },
- "weak": {
+ "bg": {
+ "transparent": {
+ "semi": {
"enabled": {
- "value": "rgba(85, 0, 7, 0.75)",
- "attributes": { "category": "color" }
+ "value": "rgba(240, 80, 0, 0.04)",
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
- "value": "rgba(85, 0, 7, 0.5)",
- "attributes": { "category": "color" }
+ "value": "rgba(240, 80, 0, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
- "value": "rgba(85, 0, 7, 0.25)",
- "attributes": { "category": "color" }
+ "value": "rgba(240, 80, 0, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
+ },
+ "light": {
+ "enabled": {
+ "value": "rgb(250, 206, 184)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgb(248, 190, 161)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(248, 175, 139)",
+ "attributes": {
+ "category": "color"
}
}
}
- }
- },
- "warning": {
- "enabled": {
- "value": "rgb(240, 80, 0)",
- "attributes": { "category": "color" }
},
"hover": {
"value": "rgb(221, 73, 0)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgb(201, 67, 0)",
- "attributes": { "category": "color" }
- },
- "bg": {
- "enabled": {
- "value": "rgb(250, 206, 184)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgb(248, 190, 161)",
- "attributes": { "category": "color" }
- },
- "pressed": {
- "value": "rgb(248, 175, 139)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
}
},
"on": {
"enabled": {
"value": "rgb(255, 255, 255)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(255, 255, 255, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(255, 255, 255, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"bg": {
"weak": {
"enabled": {
"value": "rgba(86, 28, 0, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(86, 28, 0, 0.25)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(86, 28, 0, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
},
"enabled": {
"value": "rgb(86, 28, 0)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(86, 28, 0, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(86, 28, 0, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
}
}
@@ -932,68 +1538,122 @@
"information": {
"enabled": {
"value": "rgb(0, 135, 185)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgb(0, 124, 170)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgb(0, 113, 155)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"bg": {
- "enabled": {
- "value": "rgb(184, 221, 235)",
- "attributes": { "category": "color" }
- },
- "hover": {
- "value": "rgb(161, 210, 228)",
- "attributes": { "category": "color" }
+ "light": {
+ "enabled": {
+ "value": "rgb(184, 221, 235)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgb(161, 210, 228)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgb(139, 200, 222)",
+ "attributes": {
+ "category": "color"
+ }
+ }
},
- "pressed": {
- "value": "rgb(139, 200, 222)",
- "attributes": { "category": "color" }
+ "transparent": {
+ "semi": {
+ "enabled": {
+ "value": "rgba(0, 135, 185, 0.04)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "pressed": {
+ "value": "rgba(0, 135, 185, 0.24)",
+ "attributes": {
+ "category": "color"
+ }
+ },
+ "hover": {
+ "value": "rgba(0, 135, 185, 0.12)",
+ "attributes": {
+ "category": "color"
+ }
+ }
+ }
}
},
"on": {
"enabled": {
"value": "rgb(255, 255, 255)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(255, 255, 255, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(255, 255, 255, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"bg": {
"enabled": {
"value": "rgb(0, 48, 66)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"pressed": {
"value": "rgba(0, 48, 66, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(0, 48, 66, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"weak": {
"pressed": {
"value": "rgba(0, 48, 66, 0.25)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"enabled": {
"value": "rgba(0, 48, 66, 0.75)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
},
"hover": {
"value": "rgba(0, 48, 66, 0.5)",
- "attributes": { "category": "color" }
+ "attributes": {
+ "category": "color"
+ }
}
}
}