@kong/design-tokens
Advanced tools
Comparing version 1.17.3-pr.340.e2b12f7.0 to 1.17.3-pr.372.f404ce6.0
/** | ||
* Do not edit directly, this file was auto-generated. | ||
* Generated on Mon, 30 Sep 2024 21:50:22 GMT | ||
* | ||
* Generated on Thu, 19 Dec 2024 13:58:54 GMT | ||
* | ||
* Kong Design Tokens | ||
@@ -23,411 +23,411 @@ * GitHub: https://github.com/Kong/design-tokens | ||
declare const tokens: { | ||
"color": { | ||
"background": { | ||
"_": DesignToken, | ||
"danger": { | ||
"_": DesignToken, | ||
"strong": DesignToken, | ||
"stronger": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken, | ||
"weaker": DesignToken, | ||
"weakest": DesignToken | ||
}, | ||
"decorative": { | ||
"purple": { | ||
"_": DesignToken, | ||
"weakest": DesignToken | ||
} | ||
}, | ||
"disabled": DesignToken, | ||
"inverse": DesignToken, | ||
"neutral": { | ||
"_": DesignToken, | ||
"strong": DesignToken, | ||
"stronger": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken, | ||
"weaker": DesignToken, | ||
"weakest": DesignToken | ||
}, | ||
"overlay": DesignToken, | ||
"primary": { | ||
"_": DesignToken, | ||
"strong": DesignToken, | ||
"stronger": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken, | ||
"weaker": DesignToken, | ||
"weakest": DesignToken | ||
}, | ||
"success": { | ||
"weak": DesignToken, | ||
"weakest": DesignToken | ||
}, | ||
"transparent": DesignToken, | ||
"warning": { | ||
"weak": DesignToken, | ||
"weakest": DesignToken | ||
} | ||
}, | ||
"border": { | ||
"_": DesignToken, | ||
"danger": { | ||
"_": DesignToken, | ||
"strong": DesignToken, | ||
"stronger": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken, | ||
"weaker": DesignToken, | ||
"weakest": DesignToken | ||
}, | ||
"decorative": { | ||
"purple": DesignToken | ||
}, | ||
"disabled": DesignToken, | ||
"inverse": DesignToken, | ||
"neutral": { | ||
"weak": DesignToken, | ||
"weaker": DesignToken | ||
}, | ||
"primary": { | ||
"_": DesignToken, | ||
"strong": DesignToken, | ||
"stronger": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken, | ||
"weaker": DesignToken, | ||
"weakest": DesignToken | ||
}, | ||
"transparent": DesignToken | ||
}, | ||
"text": { | ||
"_": DesignToken, | ||
"danger": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"decorative": { | ||
"aqua": DesignToken, | ||
"pink": DesignToken, | ||
"purple": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
} | ||
}, | ||
"disabled": DesignToken, | ||
"inverse": DesignToken, | ||
"neutral": { | ||
"_": DesignToken, | ||
"strong": DesignToken, | ||
"stronger": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken, | ||
"weaker": DesignToken | ||
}, | ||
"primary": { | ||
"_": DesignToken, | ||
"strong": DesignToken, | ||
"stronger": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken | ||
}, | ||
"success": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"warning": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
} | ||
} | ||
}, | ||
"animation": { | ||
"duration": { | ||
"20": DesignToken | ||
} | ||
}, | ||
"border": { | ||
"radius": { | ||
"0": DesignToken, | ||
"10": DesignToken, | ||
"20": DesignToken, | ||
"30": DesignToken, | ||
"40": DesignToken, | ||
"50": DesignToken, | ||
"circle": DesignToken, | ||
"round": DesignToken | ||
}, | ||
"width": { | ||
"0": DesignToken, | ||
"10": DesignToken, | ||
"20": DesignToken, | ||
"30": DesignToken | ||
} | ||
}, | ||
"breakpoint": { | ||
"mobile": DesignToken, | ||
"phablet": DesignToken, | ||
"tablet": DesignToken, | ||
"laptop": DesignToken, | ||
"desktop": DesignToken | ||
}, | ||
"icon": { | ||
"color": { | ||
"danger": DesignToken, | ||
"neutral": DesignToken, | ||
"primary": DesignToken, | ||
"success": DesignToken, | ||
"warning": DesignToken | ||
}, | ||
"size": { | ||
"10": DesignToken, | ||
"20": DesignToken, | ||
"30": DesignToken, | ||
"40": DesignToken, | ||
"50": DesignToken, | ||
"60": DesignToken, | ||
"70": DesignToken, | ||
"80": DesignToken | ||
} | ||
}, | ||
"method": { | ||
"color": { | ||
"background": { | ||
"connect": DesignToken, | ||
"delete": DesignToken, | ||
"get": DesignToken, | ||
"head": DesignToken, | ||
"options": DesignToken, | ||
"patch": DesignToken, | ||
"post": DesignToken, | ||
"put": DesignToken, | ||
"trace": DesignToken | ||
}, | ||
"text": { | ||
"connect": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"delete": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"get": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"head": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"options": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"patch": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"post": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"put": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"trace": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
} | ||
} | ||
} | ||
}, | ||
"navigation": { | ||
"color": { | ||
"background": { | ||
"_": DesignToken, | ||
"selected": DesignToken | ||
}, | ||
"border": { | ||
"_": DesignToken, | ||
"child": DesignToken, | ||
"divider": DesignToken | ||
}, | ||
"text": { | ||
"_": DesignToken, | ||
"focus": DesignToken, | ||
"hover": DesignToken, | ||
"selected": DesignToken | ||
} | ||
}, | ||
"shadow": { | ||
"border": { | ||
"_": DesignToken, | ||
"child": DesignToken | ||
}, | ||
"focus": DesignToken | ||
} | ||
}, | ||
"status": { | ||
"color": { | ||
"100": DesignToken, | ||
"101": DesignToken, | ||
"102": DesignToken, | ||
"103": DesignToken, | ||
"200": DesignToken, | ||
"201": DesignToken, | ||
"202": DesignToken, | ||
"203": DesignToken, | ||
"204": DesignToken, | ||
"205": DesignToken, | ||
"206": DesignToken, | ||
"207": DesignToken, | ||
"208": DesignToken, | ||
"226": DesignToken, | ||
"300": DesignToken, | ||
"301": DesignToken, | ||
"302": DesignToken, | ||
"303": DesignToken, | ||
"304": DesignToken, | ||
"305": DesignToken, | ||
"307": DesignToken, | ||
"308": DesignToken, | ||
"400": DesignToken, | ||
"401": DesignToken, | ||
"402": DesignToken, | ||
"403": DesignToken, | ||
"404": DesignToken, | ||
"405": DesignToken, | ||
"406": DesignToken, | ||
"407": DesignToken, | ||
"408": DesignToken, | ||
"409": DesignToken, | ||
"410": DesignToken, | ||
"411": DesignToken, | ||
"412": DesignToken, | ||
"413": DesignToken, | ||
"414": DesignToken, | ||
"415": DesignToken, | ||
"416": DesignToken, | ||
"417": DesignToken, | ||
"418": DesignToken, | ||
"421": DesignToken, | ||
"422": DesignToken, | ||
"423": DesignToken, | ||
"424": DesignToken, | ||
"425": DesignToken, | ||
"426": DesignToken, | ||
"428": DesignToken, | ||
"429": DesignToken, | ||
"431": DesignToken, | ||
"451": DesignToken, | ||
"500": DesignToken, | ||
"501": DesignToken, | ||
"502": DesignToken, | ||
"503": DesignToken, | ||
"504": DesignToken, | ||
"505": DesignToken, | ||
"506": DesignToken, | ||
"507": DesignToken, | ||
"508": DesignToken, | ||
"510": DesignToken, | ||
"511": DesignToken, | ||
"1na": DesignToken, | ||
"2na": DesignToken, | ||
"3na": DesignToken, | ||
"4na": DesignToken, | ||
"5na": DesignToken, | ||
"100s": DesignToken, | ||
"200s": DesignToken, | ||
"300s": DesignToken, | ||
"400s": DesignToken, | ||
"500s": DesignToken | ||
} | ||
}, | ||
"font": { | ||
"family": { | ||
"code": DesignToken, | ||
"heading": DesignToken, | ||
"text": DesignToken | ||
}, | ||
"size": { | ||
"10": DesignToken, | ||
"20": DesignToken, | ||
"30": DesignToken, | ||
"40": DesignToken, | ||
"50": DesignToken, | ||
"60": DesignToken, | ||
"70": DesignToken, | ||
"80": DesignToken, | ||
"90": DesignToken, | ||
"100": DesignToken | ||
}, | ||
"weight": { | ||
"bold": DesignToken, | ||
"medium": DesignToken, | ||
"regular": DesignToken, | ||
"semibold": DesignToken | ||
} | ||
}, | ||
"letter_spacing": { | ||
"0": DesignToken, | ||
"minus": { | ||
"10": DesignToken, | ||
"20": DesignToken, | ||
"30": DesignToken, | ||
"40": DesignToken, | ||
"50": DesignToken | ||
}, | ||
"normal": DesignToken | ||
}, | ||
"line_height": { | ||
"10": DesignToken, | ||
"20": DesignToken, | ||
"30": DesignToken, | ||
"40": DesignToken, | ||
"50": DesignToken, | ||
"60": DesignToken, | ||
"70": DesignToken, | ||
"80": DesignToken, | ||
"90": DesignToken, | ||
"100": DesignToken | ||
}, | ||
"shadow": { | ||
"_": DesignToken, | ||
"border": { | ||
"_": DesignToken, | ||
"danger": { | ||
"_": DesignToken, | ||
"strong": DesignToken | ||
}, | ||
"disabled": DesignToken, | ||
"primary": { | ||
"_": DesignToken, | ||
"strongest": DesignToken, | ||
"weak": DesignToken | ||
} | ||
}, | ||
"focus": DesignToken | ||
}, | ||
"space": { | ||
"0": DesignToken, | ||
"10": DesignToken, | ||
"20": DesignToken, | ||
"30": DesignToken, | ||
"40": DesignToken, | ||
"50": DesignToken, | ||
"60": DesignToken, | ||
"70": DesignToken, | ||
"80": DesignToken, | ||
"90": DesignToken, | ||
"100": DesignToken, | ||
"110": DesignToken, | ||
"120": DesignToken, | ||
"130": DesignToken, | ||
"140": DesignToken, | ||
"150": DesignToken, | ||
"auto": DesignToken | ||
} | ||
} | ||
color: { | ||
background: { | ||
_: DesignToken; | ||
danger: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
stronger: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
weaker: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
decorative: { | ||
purple: { | ||
_: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
}; | ||
disabled: DesignToken; | ||
inverse: DesignToken; | ||
neutral: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
stronger: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
weaker: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
overlay: DesignToken; | ||
primary: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
stronger: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
weaker: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
success: { | ||
weak: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
transparent: DesignToken; | ||
warning: { | ||
weak: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
}; | ||
border: { | ||
_: DesignToken; | ||
danger: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
stronger: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
weaker: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
decorative: { | ||
purple: DesignToken; | ||
}; | ||
disabled: DesignToken; | ||
inverse: DesignToken; | ||
neutral: { | ||
weak: DesignToken; | ||
weaker: DesignToken; | ||
}; | ||
primary: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
stronger: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
weaker: DesignToken; | ||
weakest: DesignToken; | ||
}; | ||
transparent: DesignToken; | ||
}; | ||
text: { | ||
_: DesignToken; | ||
danger: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
decorative: { | ||
aqua: DesignToken; | ||
pink: DesignToken; | ||
purple: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
}; | ||
disabled: DesignToken; | ||
inverse: DesignToken; | ||
neutral: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
stronger: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
weaker: DesignToken; | ||
}; | ||
primary: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
stronger: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
}; | ||
success: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
warning: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
}; | ||
}; | ||
animation: { | ||
duration: { | ||
"20": DesignToken; | ||
}; | ||
}; | ||
border: { | ||
radius: { | ||
"0": DesignToken; | ||
"10": DesignToken; | ||
"20": DesignToken; | ||
"30": DesignToken; | ||
"40": DesignToken; | ||
"50": DesignToken; | ||
circle: DesignToken; | ||
round: DesignToken; | ||
}; | ||
width: { | ||
"0": DesignToken; | ||
"10": DesignToken; | ||
"20": DesignToken; | ||
"30": DesignToken; | ||
}; | ||
}; | ||
breakpoint: { | ||
mobile: DesignToken; | ||
phablet: DesignToken; | ||
tablet: DesignToken; | ||
laptop: DesignToken; | ||
desktop: DesignToken; | ||
}; | ||
icon: { | ||
color: { | ||
danger: DesignToken; | ||
neutral: DesignToken; | ||
primary: DesignToken; | ||
success: DesignToken; | ||
warning: DesignToken; | ||
}; | ||
size: { | ||
"10": DesignToken; | ||
"20": DesignToken; | ||
"30": DesignToken; | ||
"40": DesignToken; | ||
"50": DesignToken; | ||
"60": DesignToken; | ||
"70": DesignToken; | ||
"80": DesignToken; | ||
}; | ||
}; | ||
method: { | ||
color: { | ||
background: { | ||
connect: DesignToken; | ||
delete: DesignToken; | ||
get: DesignToken; | ||
head: DesignToken; | ||
options: DesignToken; | ||
patch: DesignToken; | ||
post: DesignToken; | ||
put: DesignToken; | ||
trace: DesignToken; | ||
}; | ||
text: { | ||
connect: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
delete: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
get: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
head: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
options: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
patch: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
post: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
put: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
trace: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
}; | ||
}; | ||
}; | ||
navigation: { | ||
color: { | ||
background: { | ||
_: DesignToken; | ||
selected: DesignToken; | ||
}; | ||
border: { | ||
_: DesignToken; | ||
child: DesignToken; | ||
divider: DesignToken; | ||
}; | ||
text: { | ||
_: DesignToken; | ||
focus: DesignToken; | ||
hover: DesignToken; | ||
selected: DesignToken; | ||
}; | ||
}; | ||
shadow: { | ||
border: { | ||
_: DesignToken; | ||
child: DesignToken; | ||
}; | ||
focus: DesignToken; | ||
}; | ||
}; | ||
status: { | ||
color: { | ||
"100": DesignToken; | ||
"101": DesignToken; | ||
"102": DesignToken; | ||
"103": DesignToken; | ||
"200": DesignToken; | ||
"201": DesignToken; | ||
"202": DesignToken; | ||
"203": DesignToken; | ||
"204": DesignToken; | ||
"205": DesignToken; | ||
"206": DesignToken; | ||
"207": DesignToken; | ||
"208": DesignToken; | ||
"226": DesignToken; | ||
"300": DesignToken; | ||
"301": DesignToken; | ||
"302": DesignToken; | ||
"303": DesignToken; | ||
"304": DesignToken; | ||
"305": DesignToken; | ||
"307": DesignToken; | ||
"308": DesignToken; | ||
"400": DesignToken; | ||
"401": DesignToken; | ||
"402": DesignToken; | ||
"403": DesignToken; | ||
"404": DesignToken; | ||
"405": DesignToken; | ||
"406": DesignToken; | ||
"407": DesignToken; | ||
"408": DesignToken; | ||
"409": DesignToken; | ||
"410": DesignToken; | ||
"411": DesignToken; | ||
"412": DesignToken; | ||
"413": DesignToken; | ||
"414": DesignToken; | ||
"415": DesignToken; | ||
"416": DesignToken; | ||
"417": DesignToken; | ||
"418": DesignToken; | ||
"421": DesignToken; | ||
"422": DesignToken; | ||
"423": DesignToken; | ||
"424": DesignToken; | ||
"425": DesignToken; | ||
"426": DesignToken; | ||
"428": DesignToken; | ||
"429": DesignToken; | ||
"431": DesignToken; | ||
"451": DesignToken; | ||
"500": DesignToken; | ||
"501": DesignToken; | ||
"502": DesignToken; | ||
"503": DesignToken; | ||
"504": DesignToken; | ||
"505": DesignToken; | ||
"506": DesignToken; | ||
"507": DesignToken; | ||
"508": DesignToken; | ||
"510": DesignToken; | ||
"511": DesignToken; | ||
"1na": DesignToken; | ||
"2na": DesignToken; | ||
"3na": DesignToken; | ||
"4na": DesignToken; | ||
"5na": DesignToken; | ||
"100s": DesignToken; | ||
"200s": DesignToken; | ||
"300s": DesignToken; | ||
"400s": DesignToken; | ||
"500s": DesignToken; | ||
}; | ||
}; | ||
font: { | ||
family: { | ||
code: DesignToken; | ||
heading: DesignToken; | ||
text: DesignToken; | ||
}; | ||
size: { | ||
"10": DesignToken; | ||
"20": DesignToken; | ||
"30": DesignToken; | ||
"40": DesignToken; | ||
"50": DesignToken; | ||
"60": DesignToken; | ||
"70": DesignToken; | ||
"80": DesignToken; | ||
"90": DesignToken; | ||
"100": DesignToken; | ||
}; | ||
weight: { | ||
bold: DesignToken; | ||
medium: DesignToken; | ||
regular: DesignToken; | ||
semibold: DesignToken; | ||
}; | ||
}; | ||
letter_spacing: { | ||
"0": DesignToken; | ||
minus: { | ||
"10": DesignToken; | ||
"20": DesignToken; | ||
"30": DesignToken; | ||
"40": DesignToken; | ||
"50": DesignToken; | ||
}; | ||
normal: DesignToken; | ||
}; | ||
line_height: { | ||
"10": DesignToken; | ||
"20": DesignToken; | ||
"30": DesignToken; | ||
"40": DesignToken; | ||
"50": DesignToken; | ||
"60": DesignToken; | ||
"70": DesignToken; | ||
"80": DesignToken; | ||
"90": DesignToken; | ||
"100": DesignToken; | ||
}; | ||
shadow: { | ||
_: DesignToken; | ||
border: { | ||
_: DesignToken; | ||
danger: { | ||
_: DesignToken; | ||
strong: DesignToken; | ||
}; | ||
disabled: DesignToken; | ||
primary: { | ||
_: DesignToken; | ||
strongest: DesignToken; | ||
weak: DesignToken; | ||
}; | ||
}; | ||
focus: DesignToken; | ||
}; | ||
space: { | ||
"0": DesignToken; | ||
"10": DesignToken; | ||
"20": DesignToken; | ||
"30": DesignToken; | ||
"40": DesignToken; | ||
"50": DesignToken; | ||
"60": DesignToken; | ||
"70": DesignToken; | ||
"80": DesignToken; | ||
"90": DesignToken; | ||
"100": DesignToken; | ||
"110": DesignToken; | ||
"120": DesignToken; | ||
"130": DesignToken; | ||
"140": DesignToken; | ||
"150": DesignToken; | ||
auto: DesignToken; | ||
}; | ||
}; |
/** | ||
* Do not edit directly, this file was auto-generated. | ||
* Generated on Mon, 30 Sep 2024 21:50:22 GMT | ||
* | ||
* Generated on Thu, 19 Dec 2024 13:58:54 GMT | ||
* | ||
* Kong Design Tokens | ||
@@ -11,281 +11,281 @@ * GitHub: https://github.com/Kong/design-tokens | ||
module.exports = { | ||
"KUI_COLOR_BACKGROUND": "#ffffff", | ||
"KUI_COLOR_BACKGROUND_DANGER": "#d60027", | ||
"KUI_COLOR_BACKGROUND_DANGER_STRONG": "#ad000e", | ||
"KUI_COLOR_BACKGROUND_DANGER_STRONGER": "#850000", | ||
"KUI_COLOR_BACKGROUND_DANGER_STRONGEST": "#5c0000", | ||
"KUI_COLOR_BACKGROUND_DANGER_WEAK": "#ff3954", | ||
"KUI_COLOR_BACKGROUND_DANGER_WEAKER": "#ffabab", | ||
"KUI_COLOR_BACKGROUND_DANGER_WEAKEST": "#ffe5e5", | ||
"KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE": "#6f28ff", | ||
"KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST": "#f1f0ff", | ||
"KUI_COLOR_BACKGROUND_DISABLED": "#e0e4ea", | ||
"KUI_COLOR_BACKGROUND_INVERSE": "#000933", | ||
"KUI_COLOR_BACKGROUND_NEUTRAL": "#6c7489", | ||
"KUI_COLOR_BACKGROUND_NEUTRAL_STRONG": "#52596e", | ||
"KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER": "#3a3f51", | ||
"KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST": "#232633", | ||
"KUI_COLOR_BACKGROUND_NEUTRAL_WEAK": "#afb7c5", | ||
"KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER": "#e0e4ea", | ||
"KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST": "#f9fafb", | ||
"KUI_COLOR_BACKGROUND_OVERLAY": "rgba(0, 9, 51, 0.6)", | ||
"KUI_COLOR_BACKGROUND_PRIMARY": "#0044f4", | ||
"KUI_COLOR_BACKGROUND_PRIMARY_STRONG": "#0030cc", | ||
"KUI_COLOR_BACKGROUND_PRIMARY_STRONGER": "#002099", | ||
"KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST": "#001466", | ||
"KUI_COLOR_BACKGROUND_PRIMARY_WEAK": "#5f9aff", | ||
"KUI_COLOR_BACKGROUND_PRIMARY_WEAKER": "#bee2ff", | ||
"KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST": "#eefaff", | ||
"KUI_COLOR_BACKGROUND_SUCCESS_WEAK": "#00d6a4", | ||
"KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST": "#ecfffb", | ||
"KUI_COLOR_BACKGROUND_TRANSPARENT": "transparent", | ||
"KUI_COLOR_BACKGROUND_WARNING_WEAK": "#ffc400", | ||
"KUI_COLOR_BACKGROUND_WARNING_WEAKEST": "#fffce0", | ||
"KUI_COLOR_BORDER": "#e0e4ea", | ||
"KUI_COLOR_BORDER_DANGER": "#d60027", | ||
"KUI_COLOR_BORDER_DANGER_STRONG": "#ad000e", | ||
"KUI_COLOR_BORDER_DANGER_STRONGER": "#850000", | ||
"KUI_COLOR_BORDER_DANGER_STRONGEST": "#5c0000", | ||
"KUI_COLOR_BORDER_DANGER_WEAK": "#ff3954", | ||
"KUI_COLOR_BORDER_DANGER_WEAKER": "#ffabab", | ||
"KUI_COLOR_BORDER_DANGER_WEAKEST": "#ffe5e5", | ||
"KUI_COLOR_BORDER_DECORATIVE_PURPLE": "#6f28ff", | ||
"KUI_COLOR_BORDER_DISABLED": "#e0e4ea", | ||
"KUI_COLOR_BORDER_INVERSE": "rgba(255, 255, 255, 0.2)", | ||
"KUI_COLOR_BORDER_NEUTRAL_WEAK": "#afb7c5", | ||
"KUI_COLOR_BORDER_NEUTRAL_WEAKER": "#e0e4ea", | ||
"KUI_COLOR_BORDER_PRIMARY": "#0044f4", | ||
"KUI_COLOR_BORDER_PRIMARY_STRONG": "#0030cc", | ||
"KUI_COLOR_BORDER_PRIMARY_STRONGER": "#002099", | ||
"KUI_COLOR_BORDER_PRIMARY_STRONGEST": "#001466", | ||
"KUI_COLOR_BORDER_PRIMARY_WEAK": "#5f9aff", | ||
"KUI_COLOR_BORDER_PRIMARY_WEAKER": "#bee2ff", | ||
"KUI_COLOR_BORDER_PRIMARY_WEAKEST": "#eefaff", | ||
"KUI_COLOR_BORDER_TRANSPARENT": "transparent", | ||
"KUI_COLOR_TEXT": "#000933", | ||
"KUI_COLOR_TEXT_DANGER": "#d60027", | ||
"KUI_COLOR_TEXT_DANGER_STRONG": "#ad000e", | ||
"KUI_COLOR_TEXT_DECORATIVE_AQUA": "#00abd2", | ||
"KUI_COLOR_TEXT_DECORATIVE_PINK": "#d60067", | ||
"KUI_COLOR_TEXT_DECORATIVE_PURPLE": "#6f28ff", | ||
"KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG": "#5e00f5", | ||
"KUI_COLOR_TEXT_DISABLED": "#afb7c5", | ||
"KUI_COLOR_TEXT_INVERSE": "#ffffff", | ||
"KUI_COLOR_TEXT_NEUTRAL": "#6c7489", | ||
"KUI_COLOR_TEXT_NEUTRAL_STRONG": "#52596e", | ||
"KUI_COLOR_TEXT_NEUTRAL_STRONGER": "#3a3f51", | ||
"KUI_COLOR_TEXT_NEUTRAL_STRONGEST": "#232633", | ||
"KUI_COLOR_TEXT_NEUTRAL_WEAK": "#afb7c5", | ||
"KUI_COLOR_TEXT_NEUTRAL_WEAKER": "#e0e4ea", | ||
"KUI_COLOR_TEXT_PRIMARY": "#0044f4", | ||
"KUI_COLOR_TEXT_PRIMARY_STRONG": "#0030cc", | ||
"KUI_COLOR_TEXT_PRIMARY_STRONGER": "#002099", | ||
"KUI_COLOR_TEXT_PRIMARY_STRONGEST": "#001466", | ||
"KUI_COLOR_TEXT_PRIMARY_WEAK": "#5f9aff", | ||
"KUI_COLOR_TEXT_SUCCESS": "#007d60", | ||
"KUI_COLOR_TEXT_SUCCESS_STRONG": "#005944", | ||
"KUI_COLOR_TEXT_WARNING": "#995c00", | ||
"KUI_COLOR_TEXT_WARNING_STRONG": "#804400", | ||
"KUI_ANIMATION_DURATION_20": "0.2s", | ||
"KUI_BORDER_RADIUS_0": "0px", | ||
"KUI_BORDER_RADIUS_10": "2px", | ||
"KUI_BORDER_RADIUS_20": "4px", | ||
"KUI_BORDER_RADIUS_30": "6px", | ||
"KUI_BORDER_RADIUS_40": "8px", | ||
"KUI_BORDER_RADIUS_50": "10px", | ||
"KUI_BORDER_RADIUS_CIRCLE": "50%", | ||
"KUI_BORDER_RADIUS_ROUND": "100px", | ||
"KUI_BORDER_WIDTH_0": "0px", | ||
"KUI_BORDER_WIDTH_10": "1px", | ||
"KUI_BORDER_WIDTH_20": "2px", | ||
"KUI_BORDER_WIDTH_30": "4px", | ||
"KUI_BREAKPOINT_MOBILE": "640px", | ||
"KUI_BREAKPOINT_PHABLET": "768px", | ||
"KUI_BREAKPOINT_TABLET": "1024px", | ||
"KUI_BREAKPOINT_LAPTOP": "1280px", | ||
"KUI_BREAKPOINT_DESKTOP": "1536px", | ||
"KUI_ICON_COLOR_DANGER": "#f50045", | ||
"KUI_ICON_COLOR_NEUTRAL": "#828a9e", | ||
"KUI_ICON_COLOR_PRIMARY": "#306fff", | ||
"KUI_ICON_COLOR_SUCCESS": "#00a17b", | ||
"KUI_ICON_COLOR_WARNING": "#ffc400", | ||
"KUI_ICON_SIZE_10": "10px", | ||
"KUI_ICON_SIZE_20": "12px", | ||
"KUI_ICON_SIZE_30": "16px", | ||
"KUI_ICON_SIZE_40": "20px", | ||
"KUI_ICON_SIZE_50": "24px", | ||
"KUI_ICON_SIZE_60": "32px", | ||
"KUI_ICON_SIZE_70": "40px", | ||
"KUI_ICON_SIZE_80": "48px", | ||
"KUI_METHOD_COLOR_BACKGROUND_CONNECT": "#f1f0ff", | ||
"KUI_METHOD_COLOR_BACKGROUND_DELETE": "#ffe5e5", | ||
"KUI_METHOD_COLOR_BACKGROUND_GET": "#eefaff", | ||
"KUI_METHOD_COLOR_BACKGROUND_HEAD": "#52596e", | ||
"KUI_METHOD_COLOR_BACKGROUND_OPTIONS": "#e0e4ea", | ||
"KUI_METHOD_COLOR_BACKGROUND_PATCH": "#ecfcff", | ||
"KUI_METHOD_COLOR_BACKGROUND_POST": "#ecfffb", | ||
"KUI_METHOD_COLOR_BACKGROUND_PUT": "#fffce0", | ||
"KUI_METHOD_COLOR_BACKGROUND_TRACE": "#fff0f7", | ||
"KUI_METHOD_COLOR_TEXT_CONNECT": "#6f28ff", | ||
"KUI_METHOD_COLOR_TEXT_CONNECT_STRONG": "#5e00f5", | ||
"KUI_METHOD_COLOR_TEXT_DELETE": "#d60027", | ||
"KUI_METHOD_COLOR_TEXT_DELETE_STRONG": "#ad000e", | ||
"KUI_METHOD_COLOR_TEXT_GET": "#0044f4", | ||
"KUI_METHOD_COLOR_TEXT_GET_STRONG": "#0030cc", | ||
"KUI_METHOD_COLOR_TEXT_HEAD": "#e0e4ea", | ||
"KUI_METHOD_COLOR_TEXT_HEAD_STRONG": "#afb7c5", | ||
"KUI_METHOD_COLOR_TEXT_OPTIONS": "#52596e", | ||
"KUI_METHOD_COLOR_TEXT_OPTIONS_STRONG": "#3a3f51", | ||
"KUI_METHOD_COLOR_TEXT_PATCH": "#00819d", | ||
"KUI_METHOD_COLOR_TEXT_PATCH_STRONG": "#00647a", | ||
"KUI_METHOD_COLOR_TEXT_POST": "#007d60", | ||
"KUI_METHOD_COLOR_TEXT_POST_STRONG": "#005944", | ||
"KUI_METHOD_COLOR_TEXT_PUT": "#995c00", | ||
"KUI_METHOD_COLOR_TEXT_PUT_STRONG": "#804400", | ||
"KUI_METHOD_COLOR_TEXT_TRACE": "#d60067", | ||
"KUI_METHOD_COLOR_TEXT_TRACE_STRONG": "#ad0053", | ||
"KUI_NAVIGATION_COLOR_BACKGROUND": "#000933", | ||
"KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED": "rgba(255, 255, 255, 0.12)", | ||
"KUI_NAVIGATION_COLOR_BORDER": "rgba(255, 255, 255, 0.12)", | ||
"KUI_NAVIGATION_COLOR_BORDER_CHILD": "#00fabe", | ||
"KUI_NAVIGATION_COLOR_BORDER_DIVIDER": "rgba(255, 255, 255, 0.24)", | ||
"KUI_NAVIGATION_COLOR_TEXT": "#bee2ff", | ||
"KUI_NAVIGATION_COLOR_TEXT_FOCUS": "#ffffff", | ||
"KUI_NAVIGATION_COLOR_TEXT_HOVER": "#eefaff", | ||
"KUI_NAVIGATION_COLOR_TEXT_SELECTED": "#00fabe", | ||
"KUI_NAVIGATION_SHADOW_BORDER": "0 0 0 1px rgba(255, 255, 255, 0.12) inset", | ||
"KUI_NAVIGATION_SHADOW_BORDER_CHILD": "4px 0 0 0 #00fabe inset", | ||
"KUI_NAVIGATION_SHADOW_FOCUS": "0 0 0 1px rgba(255, 255, 255, 0.60) inset", | ||
"KUI_STATUS_COLOR_100": "#bee2ff", | ||
"KUI_STATUS_COLOR_101": "#8fc1ff", | ||
"KUI_STATUS_COLOR_102": "#5f9aff", | ||
"KUI_STATUS_COLOR_103": "#306fff", | ||
"KUI_STATUS_COLOR_200": "#b5ffee", | ||
"KUI_STATUS_COLOR_201": "#00fabe", | ||
"KUI_STATUS_COLOR_202": "#00d6a4", | ||
"KUI_STATUS_COLOR_203": "#00a17b", | ||
"KUI_STATUS_COLOR_204": "#007d60", | ||
"KUI_STATUS_COLOR_205": "#005944", | ||
"KUI_STATUS_COLOR_206": "#b5ffee", | ||
"KUI_STATUS_COLOR_207": "#00fabe", | ||
"KUI_STATUS_COLOR_208": "#b5ffee", | ||
"KUI_STATUS_COLOR_226": "#00a17b", | ||
"KUI_STATUS_COLOR_300": "#fff296", | ||
"KUI_STATUS_COLOR_301": "#ffe04b", | ||
"KUI_STATUS_COLOR_302": "#ffc400", | ||
"KUI_STATUS_COLOR_303": "#b37600", | ||
"KUI_STATUS_COLOR_304": "#995c00", | ||
"KUI_STATUS_COLOR_305": "#804400", | ||
"KUI_STATUS_COLOR_307": "#fff296", | ||
"KUI_STATUS_COLOR_308": "#ffe04b", | ||
"KUI_STATUS_COLOR_400": "#FFC2B3", | ||
"KUI_STATUS_COLOR_401": "#FF9877", | ||
"KUI_STATUS_COLOR_402": "#FF723C", | ||
"KUI_STATUS_COLOR_403": "#F75008", | ||
"KUI_STATUS_COLOR_404": "#D13500", | ||
"KUI_STATUS_COLOR_405": "#A31F00", | ||
"KUI_STATUS_COLOR_406": "#FFC2B3", | ||
"KUI_STATUS_COLOR_407": "#FF9877", | ||
"KUI_STATUS_COLOR_408": "#FF723C", | ||
"KUI_STATUS_COLOR_409": "#F75008", | ||
"KUI_STATUS_COLOR_410": "#D13500", | ||
"KUI_STATUS_COLOR_411": "#A31F00", | ||
"KUI_STATUS_COLOR_412": "#FFC2B3", | ||
"KUI_STATUS_COLOR_413": "#FF9877", | ||
"KUI_STATUS_COLOR_414": "#FF723C", | ||
"KUI_STATUS_COLOR_415": "#F75008", | ||
"KUI_STATUS_COLOR_416": "#D13500", | ||
"KUI_STATUS_COLOR_417": "#A31F00", | ||
"KUI_STATUS_COLOR_418": "#FFC2B3", | ||
"KUI_STATUS_COLOR_421": "#FF9877", | ||
"KUI_STATUS_COLOR_422": "#FF723C", | ||
"KUI_STATUS_COLOR_423": "#F75008", | ||
"KUI_STATUS_COLOR_424": "#D13500", | ||
"KUI_STATUS_COLOR_425": "#A31F00", | ||
"KUI_STATUS_COLOR_426": "#FFC2B3", | ||
"KUI_STATUS_COLOR_428": "#FF9877", | ||
"KUI_STATUS_COLOR_429": "#FF723C", | ||
"KUI_STATUS_COLOR_431": "#F75008", | ||
"KUI_STATUS_COLOR_451": "#D13500", | ||
"KUI_STATUS_COLOR_500": "#ffabab", | ||
"KUI_STATUS_COLOR_501": "#ff7272", | ||
"KUI_STATUS_COLOR_502": "#ff3954", | ||
"KUI_STATUS_COLOR_503": "#f50045", | ||
"KUI_STATUS_COLOR_504": "#d60027", | ||
"KUI_STATUS_COLOR_505": "#ad000e", | ||
"KUI_STATUS_COLOR_506": "#ffabab", | ||
"KUI_STATUS_COLOR_507": "#ff7272", | ||
"KUI_STATUS_COLOR_508": "#ff3954", | ||
"KUI_STATUS_COLOR_510": "#f50045", | ||
"KUI_STATUS_COLOR_511": "#d60027", | ||
"KUI_STATUS_COLOR_1NA": "#eefaff", | ||
"KUI_STATUS_COLOR_2NA": "#ecfffb", | ||
"KUI_STATUS_COLOR_3NA": "#fffce0", | ||
"KUI_STATUS_COLOR_4NA": "#FFF1EF", | ||
"KUI_STATUS_COLOR_5NA": "#ffe5e5", | ||
"KUI_STATUS_COLOR_100S": "#5f9aff", | ||
"KUI_STATUS_COLOR_200S": "#00d6a4", | ||
"KUI_STATUS_COLOR_300S": "#ffc400", | ||
"KUI_STATUS_COLOR_400S": "#FF723C", | ||
"KUI_STATUS_COLOR_500S": "#ff3954", | ||
"KUI_FONT_FAMILY_CODE": "'JetBrains Mono', Consolas, monospace", | ||
"KUI_FONT_FAMILY_HEADING": "'Inter', Roboto, Helvetica, sans-serif", | ||
"KUI_FONT_FAMILY_TEXT": "'Inter', Roboto, Helvetica, sans-serif", | ||
"KUI_FONT_SIZE_10": "10px", | ||
"KUI_FONT_SIZE_20": "12px", | ||
"KUI_FONT_SIZE_30": "14px", | ||
"KUI_FONT_SIZE_40": "16px", | ||
"KUI_FONT_SIZE_50": "18px", | ||
"KUI_FONT_SIZE_60": "20px", | ||
"KUI_FONT_SIZE_70": "24px", | ||
"KUI_FONT_SIZE_80": "32px", | ||
"KUI_FONT_SIZE_90": "40px", | ||
"KUI_FONT_SIZE_100": "48px", | ||
"KUI_FONT_WEIGHT_BOLD": "700", | ||
"KUI_FONT_WEIGHT_MEDIUM": "500", | ||
"KUI_FONT_WEIGHT_REGULAR": "400", | ||
"KUI_FONT_WEIGHT_SEMIBOLD": "600", | ||
"KUI_LETTER_SPACING_0": "normal", | ||
"KUI_LETTER_SPACING_MINUS_10": "-0.12px", | ||
"KUI_LETTER_SPACING_MINUS_20": "-0.24px", | ||
"KUI_LETTER_SPACING_MINUS_30": "-0.32px", | ||
"KUI_LETTER_SPACING_MINUS_40": "-0.4px", | ||
"KUI_LETTER_SPACING_MINUS_50": "-0.48px", | ||
"KUI_LETTER_SPACING_NORMAL": "normal", | ||
"KUI_LINE_HEIGHT_10": "12px", | ||
"KUI_LINE_HEIGHT_20": "16px", | ||
"KUI_LINE_HEIGHT_30": "20px", | ||
"KUI_LINE_HEIGHT_40": "24px", | ||
"KUI_LINE_HEIGHT_50": "28px", | ||
"KUI_LINE_HEIGHT_60": "32px", | ||
"KUI_LINE_HEIGHT_70": "36px", | ||
"KUI_LINE_HEIGHT_80": "40px", | ||
"KUI_LINE_HEIGHT_90": "48px", | ||
"KUI_LINE_HEIGHT_100": "56px", | ||
"KUI_SHADOW": "0px 4px 20px 0px rgba(0, 0, 0, 0.08)", | ||
"KUI_SHADOW_BORDER": "0px 0px 0px 1px #e0e4ea inset", | ||
"KUI_SHADOW_BORDER_DANGER": "0px 0px 0px 1px #d60027 inset", | ||
"KUI_SHADOW_BORDER_DANGER_STRONG": "0px 0px 0px 1px #ad000e inset", | ||
"KUI_SHADOW_BORDER_DISABLED": "0px 0px 0px 1px #e0e4ea inset", | ||
"KUI_SHADOW_BORDER_PRIMARY": "0px 0px 0px 1px #0044f4 inset", | ||
"KUI_SHADOW_BORDER_PRIMARY_STRONGEST": "0px 0px 0px 1px #001466 inset", | ||
"KUI_SHADOW_BORDER_PRIMARY_WEAK": "0px 0px 0px 1px #5f9aff inset", | ||
"KUI_SHADOW_FOCUS": "0px 0px 0px 4px rgba(0, 68, 244, 0.2)", | ||
"KUI_SPACE_0": "0px", | ||
"KUI_SPACE_10": "2px", | ||
"KUI_SPACE_20": "4px", | ||
"KUI_SPACE_30": "6px", | ||
"KUI_SPACE_40": "8px", | ||
"KUI_SPACE_50": "12px", | ||
"KUI_SPACE_60": "16px", | ||
"KUI_SPACE_70": "20px", | ||
"KUI_SPACE_80": "24px", | ||
"KUI_SPACE_90": "32px", | ||
"KUI_SPACE_100": "40px", | ||
"KUI_SPACE_110": "48px", | ||
"KUI_SPACE_120": "56px", | ||
"KUI_SPACE_130": "64px", | ||
"KUI_SPACE_140": "80px", | ||
"KUI_SPACE_150": "96px", | ||
"KUI_SPACE_AUTO": "auto" | ||
KUI_COLOR_BACKGROUND: "#ffffff", | ||
KUI_COLOR_BACKGROUND_DANGER: "#d60027", | ||
KUI_COLOR_BACKGROUND_DANGER_STRONG: "#ad000e", | ||
KUI_COLOR_BACKGROUND_DANGER_STRONGER: "#850000", | ||
KUI_COLOR_BACKGROUND_DANGER_STRONGEST: "#5c0000", | ||
KUI_COLOR_BACKGROUND_DANGER_WEAK: "#ff3954", | ||
KUI_COLOR_BACKGROUND_DANGER_WEAKER: "#ffabab", | ||
KUI_COLOR_BACKGROUND_DANGER_WEAKEST: "#ffe5e5", | ||
KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE: "#6f28ff", | ||
KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST: "#f1f0ff", | ||
KUI_COLOR_BACKGROUND_DISABLED: "#e0e4ea", | ||
KUI_COLOR_BACKGROUND_INVERSE: "#000933", | ||
KUI_COLOR_BACKGROUND_NEUTRAL: "#6c7489", | ||
KUI_COLOR_BACKGROUND_NEUTRAL_STRONG: "#52596e", | ||
KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER: "#3a3f51", | ||
KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST: "#232633", | ||
KUI_COLOR_BACKGROUND_NEUTRAL_WEAK: "#afb7c5", | ||
KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER: "#e0e4ea", | ||
KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST: "#f9fafb", | ||
KUI_COLOR_BACKGROUND_OVERLAY: "rgba(0, 9, 51, 0.6)", | ||
KUI_COLOR_BACKGROUND_PRIMARY: "#0044f4", | ||
KUI_COLOR_BACKGROUND_PRIMARY_STRONG: "#0030cc", | ||
KUI_COLOR_BACKGROUND_PRIMARY_STRONGER: "#002099", | ||
KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST: "#001466", | ||
KUI_COLOR_BACKGROUND_PRIMARY_WEAK: "#5f9aff", | ||
KUI_COLOR_BACKGROUND_PRIMARY_WEAKER: "#bee2ff", | ||
KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST: "#eefaff", | ||
KUI_COLOR_BACKGROUND_SUCCESS_WEAK: "#00d6a4", | ||
KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST: "#ecfffb", | ||
KUI_COLOR_BACKGROUND_TRANSPARENT: "transparent", | ||
KUI_COLOR_BACKGROUND_WARNING_WEAK: "#ffc400", | ||
KUI_COLOR_BACKGROUND_WARNING_WEAKEST: "#fffce0", | ||
KUI_COLOR_BORDER: "#e0e4ea", | ||
KUI_COLOR_BORDER_DANGER: "#d60027", | ||
KUI_COLOR_BORDER_DANGER_STRONG: "#ad000e", | ||
KUI_COLOR_BORDER_DANGER_STRONGER: "#850000", | ||
KUI_COLOR_BORDER_DANGER_STRONGEST: "#5c0000", | ||
KUI_COLOR_BORDER_DANGER_WEAK: "#ff3954", | ||
KUI_COLOR_BORDER_DANGER_WEAKER: "#ffabab", | ||
KUI_COLOR_BORDER_DANGER_WEAKEST: "#ffe5e5", | ||
KUI_COLOR_BORDER_DECORATIVE_PURPLE: "#6f28ff", | ||
KUI_COLOR_BORDER_DISABLED: "#e0e4ea", | ||
KUI_COLOR_BORDER_INVERSE: "rgba(255, 255, 255, 0.2)", | ||
KUI_COLOR_BORDER_NEUTRAL_WEAK: "#afb7c5", | ||
KUI_COLOR_BORDER_NEUTRAL_WEAKER: "#e0e4ea", | ||
KUI_COLOR_BORDER_PRIMARY: "#0044f4", | ||
KUI_COLOR_BORDER_PRIMARY_STRONG: "#0030cc", | ||
KUI_COLOR_BORDER_PRIMARY_STRONGER: "#002099", | ||
KUI_COLOR_BORDER_PRIMARY_STRONGEST: "#001466", | ||
KUI_COLOR_BORDER_PRIMARY_WEAK: "#5f9aff", | ||
KUI_COLOR_BORDER_PRIMARY_WEAKER: "#bee2ff", | ||
KUI_COLOR_BORDER_PRIMARY_WEAKEST: "#eefaff", | ||
KUI_COLOR_BORDER_TRANSPARENT: "transparent", | ||
KUI_COLOR_TEXT: "#000933", | ||
KUI_COLOR_TEXT_DANGER: "#d60027", | ||
KUI_COLOR_TEXT_DANGER_STRONG: "#ad000e", | ||
KUI_COLOR_TEXT_DECORATIVE_AQUA: "#00abd2", | ||
KUI_COLOR_TEXT_DECORATIVE_PINK: "#d60067", | ||
KUI_COLOR_TEXT_DECORATIVE_PURPLE: "#6f28ff", | ||
KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG: "#5e00f5", | ||
KUI_COLOR_TEXT_DISABLED: "#afb7c5", | ||
KUI_COLOR_TEXT_INVERSE: "#ffffff", | ||
KUI_COLOR_TEXT_NEUTRAL: "#6c7489", | ||
KUI_COLOR_TEXT_NEUTRAL_STRONG: "#52596e", | ||
KUI_COLOR_TEXT_NEUTRAL_STRONGER: "#3a3f51", | ||
KUI_COLOR_TEXT_NEUTRAL_STRONGEST: "#232633", | ||
KUI_COLOR_TEXT_NEUTRAL_WEAK: "#afb7c5", | ||
KUI_COLOR_TEXT_NEUTRAL_WEAKER: "#e0e4ea", | ||
KUI_COLOR_TEXT_PRIMARY: "#0044f4", | ||
KUI_COLOR_TEXT_PRIMARY_STRONG: "#0030cc", | ||
KUI_COLOR_TEXT_PRIMARY_STRONGER: "#002099", | ||
KUI_COLOR_TEXT_PRIMARY_STRONGEST: "#001466", | ||
KUI_COLOR_TEXT_PRIMARY_WEAK: "#5f9aff", | ||
KUI_COLOR_TEXT_SUCCESS: "#007d60", | ||
KUI_COLOR_TEXT_SUCCESS_STRONG: "#005944", | ||
KUI_COLOR_TEXT_WARNING: "#995c00", | ||
KUI_COLOR_TEXT_WARNING_STRONG: "#804400", | ||
KUI_ANIMATION_DURATION_20: "0.2s", | ||
KUI_BORDER_RADIUS_0: "0px", | ||
KUI_BORDER_RADIUS_10: "2px", | ||
KUI_BORDER_RADIUS_20: "4px", | ||
KUI_BORDER_RADIUS_30: "6px", | ||
KUI_BORDER_RADIUS_40: "8px", | ||
KUI_BORDER_RADIUS_50: "10px", | ||
KUI_BORDER_RADIUS_CIRCLE: "50%", | ||
KUI_BORDER_RADIUS_ROUND: "100px", | ||
KUI_BORDER_WIDTH_0: "0px", | ||
KUI_BORDER_WIDTH_10: "1px", | ||
KUI_BORDER_WIDTH_20: "2px", | ||
KUI_BORDER_WIDTH_30: "4px", | ||
KUI_BREAKPOINT_MOBILE: "640px", | ||
KUI_BREAKPOINT_PHABLET: "768px", | ||
KUI_BREAKPOINT_TABLET: "1024px", | ||
KUI_BREAKPOINT_LAPTOP: "1280px", | ||
KUI_BREAKPOINT_DESKTOP: "1536px", | ||
KUI_ICON_COLOR_DANGER: "#f50045", | ||
KUI_ICON_COLOR_NEUTRAL: "#828a9e", | ||
KUI_ICON_COLOR_PRIMARY: "#306fff", | ||
KUI_ICON_COLOR_SUCCESS: "#00a17b", | ||
KUI_ICON_COLOR_WARNING: "#ffc400", | ||
KUI_ICON_SIZE_10: "10px", | ||
KUI_ICON_SIZE_20: "12px", | ||
KUI_ICON_SIZE_30: "16px", | ||
KUI_ICON_SIZE_40: "20px", | ||
KUI_ICON_SIZE_50: "24px", | ||
KUI_ICON_SIZE_60: "32px", | ||
KUI_ICON_SIZE_70: "40px", | ||
KUI_ICON_SIZE_80: "48px", | ||
KUI_METHOD_COLOR_BACKGROUND_CONNECT: "#f1f0ff", | ||
KUI_METHOD_COLOR_BACKGROUND_DELETE: "#ffe5e5", | ||
KUI_METHOD_COLOR_BACKGROUND_GET: "#eefaff", | ||
KUI_METHOD_COLOR_BACKGROUND_HEAD: "#52596e", | ||
KUI_METHOD_COLOR_BACKGROUND_OPTIONS: "#e0e4ea", | ||
KUI_METHOD_COLOR_BACKGROUND_PATCH: "#ecfcff", | ||
KUI_METHOD_COLOR_BACKGROUND_POST: "#ecfffb", | ||
KUI_METHOD_COLOR_BACKGROUND_PUT: "#fffce0", | ||
KUI_METHOD_COLOR_BACKGROUND_TRACE: "#fff0f7", | ||
KUI_METHOD_COLOR_TEXT_CONNECT: "#6f28ff", | ||
KUI_METHOD_COLOR_TEXT_CONNECT_STRONG: "#5e00f5", | ||
KUI_METHOD_COLOR_TEXT_DELETE: "#d60027", | ||
KUI_METHOD_COLOR_TEXT_DELETE_STRONG: "#ad000e", | ||
KUI_METHOD_COLOR_TEXT_GET: "#0044f4", | ||
KUI_METHOD_COLOR_TEXT_GET_STRONG: "#0030cc", | ||
KUI_METHOD_COLOR_TEXT_HEAD: "#e0e4ea", | ||
KUI_METHOD_COLOR_TEXT_HEAD_STRONG: "#afb7c5", | ||
KUI_METHOD_COLOR_TEXT_OPTIONS: "#52596e", | ||
KUI_METHOD_COLOR_TEXT_OPTIONS_STRONG: "#3a3f51", | ||
KUI_METHOD_COLOR_TEXT_PATCH: "#00819d", | ||
KUI_METHOD_COLOR_TEXT_PATCH_STRONG: "#00647a", | ||
KUI_METHOD_COLOR_TEXT_POST: "#007d60", | ||
KUI_METHOD_COLOR_TEXT_POST_STRONG: "#005944", | ||
KUI_METHOD_COLOR_TEXT_PUT: "#995c00", | ||
KUI_METHOD_COLOR_TEXT_PUT_STRONG: "#804400", | ||
KUI_METHOD_COLOR_TEXT_TRACE: "#d60067", | ||
KUI_METHOD_COLOR_TEXT_TRACE_STRONG: "#ad0053", | ||
KUI_NAVIGATION_COLOR_BACKGROUND: "#000933", | ||
KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED: "rgba(255, 255, 255, 0.12)", | ||
KUI_NAVIGATION_COLOR_BORDER: "rgba(255, 255, 255, 0.12)", | ||
KUI_NAVIGATION_COLOR_BORDER_CHILD: "#00fabe", | ||
KUI_NAVIGATION_COLOR_BORDER_DIVIDER: "rgba(255, 255, 255, 0.24)", | ||
KUI_NAVIGATION_COLOR_TEXT: "#bee2ff", | ||
KUI_NAVIGATION_COLOR_TEXT_FOCUS: "#ffffff", | ||
KUI_NAVIGATION_COLOR_TEXT_HOVER: "#eefaff", | ||
KUI_NAVIGATION_COLOR_TEXT_SELECTED: "#00fabe", | ||
KUI_NAVIGATION_SHADOW_BORDER: "0 0 0 1px rgba(255, 255, 255, 0.12) inset", | ||
KUI_NAVIGATION_SHADOW_BORDER_CHILD: "4px 0 0 0 #00fabe inset", | ||
KUI_NAVIGATION_SHADOW_FOCUS: "0 0 0 1px rgba(255, 255, 255, 0.60) inset", | ||
KUI_STATUS_COLOR_100: "#bee2ff", | ||
KUI_STATUS_COLOR_101: "#8fc1ff", | ||
KUI_STATUS_COLOR_102: "#5f9aff", | ||
KUI_STATUS_COLOR_103: "#306fff", | ||
KUI_STATUS_COLOR_200: "#b5ffee", | ||
KUI_STATUS_COLOR_201: "#00fabe", | ||
KUI_STATUS_COLOR_202: "#00d6a4", | ||
KUI_STATUS_COLOR_203: "#00a17b", | ||
KUI_STATUS_COLOR_204: "#007d60", | ||
KUI_STATUS_COLOR_205: "#005944", | ||
KUI_STATUS_COLOR_206: "#b5ffee", | ||
KUI_STATUS_COLOR_207: "#00fabe", | ||
KUI_STATUS_COLOR_208: "#b5ffee", | ||
KUI_STATUS_COLOR_226: "#00a17b", | ||
KUI_STATUS_COLOR_300: "#fff296", | ||
KUI_STATUS_COLOR_301: "#ffe04b", | ||
KUI_STATUS_COLOR_302: "#ffc400", | ||
KUI_STATUS_COLOR_303: "#b37600", | ||
KUI_STATUS_COLOR_304: "#995c00", | ||
KUI_STATUS_COLOR_305: "#804400", | ||
KUI_STATUS_COLOR_307: "#fff296", | ||
KUI_STATUS_COLOR_308: "#ffe04b", | ||
KUI_STATUS_COLOR_400: "#FFC2B3", | ||
KUI_STATUS_COLOR_401: "#FF9877", | ||
KUI_STATUS_COLOR_402: "#FF723C", | ||
KUI_STATUS_COLOR_403: "#F75008", | ||
KUI_STATUS_COLOR_404: "#D13500", | ||
KUI_STATUS_COLOR_405: "#A31F00", | ||
KUI_STATUS_COLOR_406: "#FFC2B3", | ||
KUI_STATUS_COLOR_407: "#FF9877", | ||
KUI_STATUS_COLOR_408: "#FF723C", | ||
KUI_STATUS_COLOR_409: "#F75008", | ||
KUI_STATUS_COLOR_410: "#D13500", | ||
KUI_STATUS_COLOR_411: "#A31F00", | ||
KUI_STATUS_COLOR_412: "#FFC2B3", | ||
KUI_STATUS_COLOR_413: "#FF9877", | ||
KUI_STATUS_COLOR_414: "#FF723C", | ||
KUI_STATUS_COLOR_415: "#F75008", | ||
KUI_STATUS_COLOR_416: "#D13500", | ||
KUI_STATUS_COLOR_417: "#A31F00", | ||
KUI_STATUS_COLOR_418: "#FFC2B3", | ||
KUI_STATUS_COLOR_421: "#FF9877", | ||
KUI_STATUS_COLOR_422: "#FF723C", | ||
KUI_STATUS_COLOR_423: "#F75008", | ||
KUI_STATUS_COLOR_424: "#D13500", | ||
KUI_STATUS_COLOR_425: "#A31F00", | ||
KUI_STATUS_COLOR_426: "#FFC2B3", | ||
KUI_STATUS_COLOR_428: "#FF9877", | ||
KUI_STATUS_COLOR_429: "#FF723C", | ||
KUI_STATUS_COLOR_431: "#F75008", | ||
KUI_STATUS_COLOR_451: "#D13500", | ||
KUI_STATUS_COLOR_500: "#ffabab", | ||
KUI_STATUS_COLOR_501: "#ff7272", | ||
KUI_STATUS_COLOR_502: "#ff3954", | ||
KUI_STATUS_COLOR_503: "#f50045", | ||
KUI_STATUS_COLOR_504: "#d60027", | ||
KUI_STATUS_COLOR_505: "#ad000e", | ||
KUI_STATUS_COLOR_506: "#ffabab", | ||
KUI_STATUS_COLOR_507: "#ff7272", | ||
KUI_STATUS_COLOR_508: "#ff3954", | ||
KUI_STATUS_COLOR_510: "#f50045", | ||
KUI_STATUS_COLOR_511: "#d60027", | ||
KUI_STATUS_COLOR_1NA: "#eefaff", | ||
KUI_STATUS_COLOR_2NA: "#ecfffb", | ||
KUI_STATUS_COLOR_3NA: "#fffce0", | ||
KUI_STATUS_COLOR_4NA: "#FFF1EF", | ||
KUI_STATUS_COLOR_5NA: "#ffe5e5", | ||
KUI_STATUS_COLOR_100S: "#5f9aff", | ||
KUI_STATUS_COLOR_200S: "#00d6a4", | ||
KUI_STATUS_COLOR_300S: "#ffc400", | ||
KUI_STATUS_COLOR_400S: "#FF723C", | ||
KUI_STATUS_COLOR_500S: "#ff3954", | ||
KUI_FONT_FAMILY_CODE: "'JetBrains Mono', Consolas, monospace", | ||
KUI_FONT_FAMILY_HEADING: "'Inter', Roboto, Helvetica, sans-serif", | ||
KUI_FONT_FAMILY_TEXT: "'Inter', Roboto, Helvetica, sans-serif", | ||
KUI_FONT_SIZE_10: "10px", | ||
KUI_FONT_SIZE_20: "12px", | ||
KUI_FONT_SIZE_30: "14px", | ||
KUI_FONT_SIZE_40: "16px", | ||
KUI_FONT_SIZE_50: "18px", | ||
KUI_FONT_SIZE_60: "20px", | ||
KUI_FONT_SIZE_70: "24px", | ||
KUI_FONT_SIZE_80: "32px", | ||
KUI_FONT_SIZE_90: "40px", | ||
KUI_FONT_SIZE_100: "48px", | ||
KUI_FONT_WEIGHT_BOLD: "700", | ||
KUI_FONT_WEIGHT_MEDIUM: "500", | ||
KUI_FONT_WEIGHT_REGULAR: "400", | ||
KUI_FONT_WEIGHT_SEMIBOLD: "600", | ||
KUI_LETTER_SPACING_0: "normal", | ||
KUI_LETTER_SPACING_MINUS_10: "-0.12px", | ||
KUI_LETTER_SPACING_MINUS_20: "-0.24px", | ||
KUI_LETTER_SPACING_MINUS_30: "-0.32px", | ||
KUI_LETTER_SPACING_MINUS_40: "-0.4px", | ||
KUI_LETTER_SPACING_MINUS_50: "-0.48px", | ||
KUI_LETTER_SPACING_NORMAL: "normal", | ||
KUI_LINE_HEIGHT_10: "12px", | ||
KUI_LINE_HEIGHT_20: "16px", | ||
KUI_LINE_HEIGHT_30: "20px", | ||
KUI_LINE_HEIGHT_40: "24px", | ||
KUI_LINE_HEIGHT_50: "28px", | ||
KUI_LINE_HEIGHT_60: "32px", | ||
KUI_LINE_HEIGHT_70: "36px", | ||
KUI_LINE_HEIGHT_80: "40px", | ||
KUI_LINE_HEIGHT_90: "48px", | ||
KUI_LINE_HEIGHT_100: "56px", | ||
KUI_SHADOW: "0px 4px 20px 0px rgba(0, 0, 0, 0.08)", | ||
KUI_SHADOW_BORDER: "0px 0px 0px 1px #e0e4ea inset", | ||
KUI_SHADOW_BORDER_DANGER: "0px 0px 0px 1px #d60027 inset", | ||
KUI_SHADOW_BORDER_DANGER_STRONG: "0px 0px 0px 1px #ad000e inset", | ||
KUI_SHADOW_BORDER_DISABLED: "0px 0px 0px 1px #e0e4ea inset", | ||
KUI_SHADOW_BORDER_PRIMARY: "0px 0px 0px 1px #0044f4 inset", | ||
KUI_SHADOW_BORDER_PRIMARY_STRONGEST: "0px 0px 0px 1px #001466 inset", | ||
KUI_SHADOW_BORDER_PRIMARY_WEAK: "0px 0px 0px 1px #5f9aff inset", | ||
KUI_SHADOW_FOCUS: "0px 0px 0px 4px rgba(0, 68, 244, 0.2)", | ||
KUI_SPACE_0: "0px", | ||
KUI_SPACE_10: "2px", | ||
KUI_SPACE_20: "4px", | ||
KUI_SPACE_30: "6px", | ||
KUI_SPACE_40: "8px", | ||
KUI_SPACE_50: "12px", | ||
KUI_SPACE_60: "16px", | ||
KUI_SPACE_70: "20px", | ||
KUI_SPACE_80: "24px", | ||
KUI_SPACE_90: "32px", | ||
KUI_SPACE_100: "40px", | ||
KUI_SPACE_110: "48px", | ||
KUI_SPACE_120: "56px", | ||
KUI_SPACE_130: "64px", | ||
KUI_SPACE_140: "80px", | ||
KUI_SPACE_150: "96px", | ||
KUI_SPACE_AUTO: "auto", | ||
}; |
/** | ||
* Do not edit directly, this file was auto-generated. | ||
* Generated on Mon, 30 Sep 2024 21:50:22 GMT | ||
* | ||
* Generated on Thu, 19 Dec 2024 13:58:54 GMT | ||
* | ||
* Kong Design Tokens | ||
@@ -11,548 +11,280 @@ * GitHub: https://github.com/Kong/design-tokens | ||
/** Default background color for containers (white). */ | ||
export const KUI_COLOR_BACKGROUND : "#ffffff"; | ||
/** Background color for danger actions or messages (red.60). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER : "#d60027"; | ||
/** Strong background color for danger actions or messages (red.70). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_STRONG : "#ad000e"; | ||
/** Stronger background color for danger actions or messages (red.80). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_STRONGER : "#850000"; | ||
/** Strongest background color for danger actions or messages (red.90). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_STRONGEST : "#5c0000"; | ||
/** Weak background color for danger actions or messages (red.40). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_WEAK : "#ff3954"; | ||
/** Weaker background color for danger actions or messages (red.20). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_WEAKER : "#ffabab"; | ||
/** Weakest background color for danger actions or messages (red.10). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_WEAKEST : "#ffe5e5"; | ||
/** Background color for decorative purposes (purple.60). */ | ||
export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE : "#6f28ff"; | ||
/** Weakest background color for decorative purposes (purple.10). */ | ||
export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST : "#f1f0ff"; | ||
/** Background color for disabled elements (gray.20). */ | ||
export const KUI_COLOR_BACKGROUND_DISABLED : "#e0e4ea"; | ||
/** Inverse background color for containers (blue.100) */ | ||
export const KUI_COLOR_BACKGROUND_INVERSE : "#000933"; | ||
/** Background color for neutral elements (gray.60). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL : "#6c7489"; | ||
/** Strong background color for neutral elements (gray.70). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG : "#52596e"; | ||
/** Stronger background color for neutral elements (gray.80). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER : "#3a3f51"; | ||
/** Strongest background color for neutral elements (gray.90). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST : "#232633"; | ||
/** Weak background color for neutral elements (gray.40). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK : "#afb7c5"; | ||
/** Weaker background color for neutral elements (gray.20). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER : "#e0e4ea"; | ||
/** Weakest background color for neutral elements (gray.10). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST : "#f9fafb"; | ||
/** Overlay background color (rgba(blue.100, 0.6)) */ | ||
export const KUI_COLOR_BACKGROUND_OVERLAY : "rgba(0, 9, 51, 0.6)"; | ||
/** Background color for primary actions or messages (blue.60). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY : "#0044f4"; | ||
/** Strong background color for primary actions or messages (blue.70). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONG : "#0030cc"; | ||
/** Stronger background color for primary actions or messages (blue.80). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGER : "#002099"; | ||
/** Strongest background color for primary actions or messages (blue.90). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST : "#001466"; | ||
/** Weak background color for primary actions or messages (blue.40). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK : "#5f9aff"; | ||
/** Weaker background color for primary actions or messages (blue.20). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER : "#bee2ff"; | ||
/** Weakest background color for primary actions or messages (blue.10) */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST : "#eefaff"; | ||
/** Weak background color for success elements (green.40). */ | ||
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAK : "#00d6a4"; | ||
/** Weakest background color for success elements (green.10). */ | ||
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST : "#ecfffb"; | ||
/** Transparent background color (transparent). */ | ||
export const KUI_COLOR_BACKGROUND_TRANSPARENT : "transparent"; | ||
/** Weak background color for warning elements (yellow.40). */ | ||
export const KUI_COLOR_BACKGROUND_WARNING_WEAK : "#ffc400"; | ||
/** Weakest background color for warning elements (yellow.10). */ | ||
export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST : "#fffce0"; | ||
/** Default border color for containers (gray.20). */ | ||
export const KUI_COLOR_BORDER : "#e0e4ea"; | ||
/** Border color for danger actions or messages (red.60). */ | ||
export const KUI_COLOR_BORDER_DANGER : "#d60027"; | ||
/** Strong border color for danger actions or messages (red.70). */ | ||
export const KUI_COLOR_BORDER_DANGER_STRONG : "#ad000e"; | ||
/** Stronger border color for danger actions or messages (red.80). */ | ||
export const KUI_COLOR_BORDER_DANGER_STRONGER : "#850000"; | ||
/** Strongest border color for danger actions or messages (red.90). */ | ||
export const KUI_COLOR_BORDER_DANGER_STRONGEST : "#5c0000"; | ||
/** Weak border color for danger actions or messages (red.40). */ | ||
export const KUI_COLOR_BORDER_DANGER_WEAK : "#ff3954"; | ||
/** Weaker border color for danger actions or messages (red.20). */ | ||
export const KUI_COLOR_BORDER_DANGER_WEAKER : "#ffabab"; | ||
/** Weakest border color for danger actions or messages (red.10). */ | ||
export const KUI_COLOR_BORDER_DANGER_WEAKEST : "#ffe5e5"; | ||
/** Border color for decorative purposes (purple.60). */ | ||
export const KUI_COLOR_BORDER_DECORATIVE_PURPLE : "#6f28ff"; | ||
/** Border color for disabled elements (gray.20). */ | ||
export const KUI_COLOR_BORDER_DISABLED : "#e0e4ea"; | ||
/** Inverse border color (rgba(white, 0.2)). */ | ||
export const KUI_COLOR_BORDER_INVERSE : "rgba(255, 255, 255, 0.2)"; | ||
/** Weak border color for neutral elements (gray.40) */ | ||
export const KUI_COLOR_BORDER_NEUTRAL_WEAK : "#afb7c5"; | ||
/** Weaker border color for neutral elements (gray.20) */ | ||
export const KUI_COLOR_BORDER_NEUTRAL_WEAKER : "#e0e4ea"; | ||
/** Border color for primary actions or messages (blue.60). */ | ||
export const KUI_COLOR_BORDER_PRIMARY : "#0044f4"; | ||
/** Strong border color for primary actions or messages (blue.70). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_STRONG : "#0030cc"; | ||
/** Stronger border color for primary actions or messages (blue.80). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_STRONGER : "#002099"; | ||
/** Strongest border color for primary actions or messages (blue.90). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_STRONGEST : "#001466"; | ||
/** Weak border color for primary actions or messages (blue.40). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_WEAK : "#5f9aff"; | ||
/** Weaker border color for primary actions or messages (blue.20). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_WEAKER : "#bee2ff"; | ||
/** Weakest border color for primary actions or messages (blue.10). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_WEAKEST : "#eefaff"; | ||
/** Transparent border color (transparent). */ | ||
export const KUI_COLOR_BORDER_TRANSPARENT : "transparent"; | ||
/** Default text color (blue.100). */ | ||
export const KUI_COLOR_TEXT : "#000933"; | ||
/** Text color for danger actions or messages (red.60). */ | ||
export const KUI_COLOR_TEXT_DANGER : "#d60027"; | ||
/** Strong text color for danger actions or messages (red.70). */ | ||
export const KUI_COLOR_TEXT_DANGER_STRONG : "#ad000e"; | ||
/** Text color for decorative purposes (aqua.50). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_AQUA : "#00abd2"; | ||
/** Text color for decorative purposes (pink.60). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_PINK : "#d60067"; | ||
/** Text color for decorative purposes (purple.60). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_PURPLE : "#6f28ff"; | ||
/** Strong text color for decorative purposes (purple.70). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG : "#5e00f5"; | ||
/** Text color for disabled elements (gray.40). */ | ||
export const KUI_COLOR_TEXT_DISABLED : "#afb7c5"; | ||
/** Inverse text color (white). */ | ||
export const KUI_COLOR_TEXT_INVERSE : "#ffffff"; | ||
/** Text color for neutral elements (gray.60). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL : "#6c7489"; | ||
/** Strong text color for neutral elements (gray.70). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_STRONG : "#52596e"; | ||
/** Stronger text color for neutral elements (gray.80). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_STRONGER : "#3a3f51"; | ||
/** Strongest text color for neutral elements (gray.90). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST : "#232633"; | ||
/** Weak text color for neutral elements (gray.40). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_WEAK : "#afb7c5"; | ||
/** Weaker text color for neutral elements (gray.20). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_WEAKER : "#e0e4ea"; | ||
/** Text color for primary actions or messages (blue.60). */ | ||
export const KUI_COLOR_TEXT_PRIMARY : "#0044f4"; | ||
/** Strong text color for primary actions or messages (blue.70). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_STRONG : "#0030cc"; | ||
/** Stronger text color for primary actions or messages (blue.80). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_STRONGER : "#002099"; | ||
/** Strongest text color for primary actions or messages (blue.90). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_STRONGEST : "#001466"; | ||
/** Weak text color for primary actions or messages (blue.40). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_WEAK : "#5f9aff"; | ||
/** Text color for success actions or messages (green.60). */ | ||
export const KUI_COLOR_TEXT_SUCCESS : "#007d60"; | ||
/** Strong text color for success actions or messages (green.70). */ | ||
export const KUI_COLOR_TEXT_SUCCESS_STRONG : "#005944"; | ||
/** Text color for warning actions or messages (yellow.60). */ | ||
export const KUI_COLOR_TEXT_WARNING : "#995c00"; | ||
/** Text color for warning actions or messages (yellow.70). */ | ||
export const KUI_COLOR_TEXT_WARNING_STRONG : "#804400"; | ||
/** Default transition timing */ | ||
export const KUI_ANIMATION_DURATION_20 : "0.2s"; | ||
/** 0px border radius. */ | ||
export const KUI_BORDER_RADIUS_0 : "0px"; | ||
/** 2px border radius. */ | ||
export const KUI_BORDER_RADIUS_10 : "2px"; | ||
/** 4px border radius. */ | ||
export const KUI_BORDER_RADIUS_20 : "4px"; | ||
/** 6px border radius. */ | ||
export const KUI_BORDER_RADIUS_30 : "6px"; | ||
/** 8px border radius. */ | ||
export const KUI_BORDER_RADIUS_40 : "8px"; | ||
/** 10px border radius. */ | ||
export const KUI_BORDER_RADIUS_50 : "10px"; | ||
/** 50% border radius used to create circles. */ | ||
export const KUI_BORDER_RADIUS_CIRCLE : "50%"; | ||
/** 100px border radius used to create pill shapes. */ | ||
export const KUI_BORDER_RADIUS_ROUND : "100px"; | ||
/** 0px border width. */ | ||
export const KUI_BORDER_WIDTH_0 : "0px"; | ||
/** 1px border width. */ | ||
export const KUI_BORDER_WIDTH_10 : "1px"; | ||
/** 2px border width. */ | ||
export const KUI_BORDER_WIDTH_20 : "2px"; | ||
/** 4px border width. */ | ||
export const KUI_BORDER_WIDTH_30 : "4px"; | ||
/** Used for larger mobile screens. Any viewport width under this value is considered mobile. */ | ||
export const KUI_BREAKPOINT_MOBILE : "640px"; | ||
/** Used for tablet screens. */ | ||
export const KUI_BREAKPOINT_PHABLET : "768px"; | ||
/** Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */ | ||
export const KUI_BREAKPOINT_TABLET : "1024px"; | ||
/** Used for standard desktop screens. */ | ||
export const KUI_BREAKPOINT_LAPTOP : "1280px"; | ||
/** Used for larger desktop screens. */ | ||
export const KUI_BREAKPOINT_DESKTOP : "1536px"; | ||
/** Danger color for icons. */ | ||
export const KUI_ICON_COLOR_DANGER : "#f50045"; | ||
/** Neutral color for icons. */ | ||
export const KUI_ICON_COLOR_NEUTRAL : "#828a9e"; | ||
/** Primary color for icons. */ | ||
export const KUI_ICON_COLOR_PRIMARY : "#306fff"; | ||
/** Success color for icons. */ | ||
export const KUI_ICON_COLOR_SUCCESS : "#00a17b"; | ||
/** Warning color for icons. */ | ||
export const KUI_ICON_COLOR_WARNING : "#ffc400"; | ||
/** 10px icon size. */ | ||
export const KUI_ICON_SIZE_10 : "10px"; | ||
/** 12px icon size. */ | ||
export const KUI_ICON_SIZE_20 : "12px"; | ||
/** 16px icon size. */ | ||
export const KUI_ICON_SIZE_30 : "16px"; | ||
/** 20px icon size. */ | ||
export const KUI_ICON_SIZE_40 : "20px"; | ||
/** 24px icon size (default). */ | ||
export const KUI_ICON_SIZE_50 : "24px"; | ||
/** 32px icon size. */ | ||
export const KUI_ICON_SIZE_60 : "32px"; | ||
/** 40px icon size. */ | ||
export const KUI_ICON_SIZE_70 : "40px"; | ||
/** 48px icon size. */ | ||
export const KUI_ICON_SIZE_80 : "48px"; | ||
/** Background color for the CONNECT method (purple.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_CONNECT : "#f1f0ff"; | ||
/** Background color for the DELETE method (red.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_DELETE : "#ffe5e5"; | ||
/** Background color for the GET method (blue.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_GET : "#eefaff"; | ||
/** Background color for the HEAD method (gray.70). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_HEAD : "#52596e"; | ||
/** Background color for the OPTIONS method (gray.20). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_OPTIONS : "#e0e4ea"; | ||
/** Background color for the PATCH method (aqua.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_PATCH : "#ecfcff"; | ||
/** Background color for the POST method (green.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_POST : "#ecfffb"; | ||
/** Background color for the PUT method (yellow.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_PUT : "#fffce0"; | ||
/** Background color for the TRACE method (pink.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_TRACE : "#fff0f7"; | ||
/** Text color for the CONNECT method (purple.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_CONNECT : "#6f28ff"; | ||
/** Strong text color for the CONNECT method (purple.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_CONNECT_STRONG : "#5e00f5"; | ||
/** Text color for the DELETE method (red.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_DELETE : "#d60027"; | ||
/** Strong text color for the DELETE method (red.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_DELETE_STRONG : "#ad000e"; | ||
/** Text color for the GET method (blue.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_GET : "#0044f4"; | ||
/** Strong text color for the GET method (blue.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_GET_STRONG : "#0030cc"; | ||
/** Text color for the HEAD method (gray.20). */ | ||
export const KUI_METHOD_COLOR_TEXT_HEAD : "#e0e4ea"; | ||
/** Strong text color for the HEAD method (gray.40). */ | ||
export const KUI_METHOD_COLOR_TEXT_HEAD_STRONG : "#afb7c5"; | ||
/** Text color for the OPTIONS method (gray.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_OPTIONS : "#52596e"; | ||
/** Strong text color for the OPTIONS method (gray.80). */ | ||
export const KUI_METHOD_COLOR_TEXT_OPTIONS_STRONG : "#3a3f51"; | ||
/** Text color for the PATCH method (aqua.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_PATCH : "#00819d"; | ||
/** Strong text color for the PATCH method (aqua.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_PATCH_STRONG : "#00647a"; | ||
/** Text color for the POST method (green.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_POST : "#007d60"; | ||
/** Strong text color for the POST method (green.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_POST_STRONG : "#005944"; | ||
/** Text color for the PUT method (yellow.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_PUT : "#995c00"; | ||
/** Strong text color for the PUT method (yellow.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_PUT_STRONG : "#804400"; | ||
/** Text color for the TRACE method (pink.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_TRACE : "#d60067"; | ||
/** Strong text color for the TRACE method (pink.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_TRACE_STRONG : "#ad0053"; | ||
/** blue.100 */ | ||
export const KUI_NAVIGATION_COLOR_BACKGROUND : "#000933"; | ||
/** The background color of a selected navigation item. */ | ||
export const KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED : "rgba(255, 255, 255, 0.12)"; | ||
/** rgba(white, 0.12) */ | ||
export const KUI_NAVIGATION_COLOR_BORDER : "rgba(255, 255, 255, 0.12)"; | ||
/** The border color for a selected child navigation item. */ | ||
export const KUI_NAVIGATION_COLOR_BORDER_CHILD : "#00fabe"; | ||
/** The color of the navigation section divider. */ | ||
export const KUI_NAVIGATION_COLOR_BORDER_DIVIDER : "rgba(255, 255, 255, 0.24)"; | ||
/** Navigation link and icon color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT : "#bee2ff"; | ||
/** Navigation link and icon focus-visible color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT_FOCUS : "#ffffff"; | ||
/** Navigation link and icon hover color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT_HOVER : "#eefaff"; | ||
/** Navigation link and icon selected color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT_SELECTED : "#00fabe"; | ||
/** The box-shadow for a focus-visible navigation link. */ | ||
export const KUI_NAVIGATION_SHADOW_BORDER : "0 0 0 1px rgba(255, 255, 255, 0.12) inset"; | ||
/** The left box-shadow for an active child navigation link. */ | ||
export const KUI_NAVIGATION_SHADOW_BORDER_CHILD : "4px 0 0 0 #00fabe inset"; | ||
/** Navigation link focus-visible box-shadow. */ | ||
export const KUI_NAVIGATION_SHADOW_FOCUS : "0 0 0 1px rgba(255, 255, 255, 0.60) inset"; | ||
/** Color representing response status code 100 (blue.20). */ | ||
export const KUI_STATUS_COLOR_100 : "#bee2ff"; | ||
/** Color representing response status code 101 (blue.30). */ | ||
export const KUI_STATUS_COLOR_101 : "#8fc1ff"; | ||
/** Color representing response status code 102 (blue.40). */ | ||
export const KUI_STATUS_COLOR_102 : "#5f9aff"; | ||
/** Color representing response status code 103 (blue.50). */ | ||
export const KUI_STATUS_COLOR_103 : "#306fff"; | ||
/** Color representing response status code 200 (green.20). */ | ||
export const KUI_STATUS_COLOR_200 : "#b5ffee"; | ||
/** Color representing response status code 201 (green.30). */ | ||
export const KUI_STATUS_COLOR_201 : "#00fabe"; | ||
/** Color representing response status code 202 (green.40). */ | ||
export const KUI_STATUS_COLOR_202 : "#00d6a4"; | ||
/** Color representing response status code 203 (green.50). */ | ||
export const KUI_STATUS_COLOR_203 : "#00a17b"; | ||
/** Color representing response status code 204 (green.60). */ | ||
export const KUI_STATUS_COLOR_204 : "#007d60"; | ||
/** Color representing response status code 205 (green.70). */ | ||
export const KUI_STATUS_COLOR_205 : "#005944"; | ||
/** Color representing response status code 206 (green.20). */ | ||
export const KUI_STATUS_COLOR_206 : "#b5ffee"; | ||
/** Color representing response status code 207 (green.30). */ | ||
export const KUI_STATUS_COLOR_207 : "#00fabe"; | ||
/** Color representing response status code 208 (green.40). */ | ||
export const KUI_STATUS_COLOR_208 : "#b5ffee"; | ||
/** Color representing response status code 226 (green.50). */ | ||
export const KUI_STATUS_COLOR_226 : "#00a17b"; | ||
/** Color representing response status code 100 (yellow.20). */ | ||
export const KUI_STATUS_COLOR_300 : "#fff296"; | ||
/** Color representing response status code 101 (yellow.30). */ | ||
export const KUI_STATUS_COLOR_301 : "#ffe04b"; | ||
/** Color representing response status code 102 (yellow.40). */ | ||
export const KUI_STATUS_COLOR_302 : "#ffc400"; | ||
/** Color representing response status code 103 (yellow.50). */ | ||
export const KUI_STATUS_COLOR_303 : "#b37600"; | ||
/** Color representing response status code 103 (yellow.60). */ | ||
export const KUI_STATUS_COLOR_304 : "#995c00"; | ||
/** Color representing response status code 103 (yellow.70). */ | ||
export const KUI_STATUS_COLOR_305 : "#804400"; | ||
/** Color representing response status code 103 (yellow.20). */ | ||
export const KUI_STATUS_COLOR_307 : "#fff296"; | ||
/** Color representing response status code 103 (yellow.30). */ | ||
export const KUI_STATUS_COLOR_308 : "#ffe04b"; | ||
/** Color representing response status code 400 (orange.20). */ | ||
export const KUI_STATUS_COLOR_400 : "#FFC2B3"; | ||
/** Color representing response status code 401 (orange.30). */ | ||
export const KUI_STATUS_COLOR_401 : "#FF9877"; | ||
/** Color representing response status code 402 (orange.40). */ | ||
export const KUI_STATUS_COLOR_402 : "#FF723C"; | ||
/** Color representing response status code 403 (orange.50). */ | ||
export const KUI_STATUS_COLOR_403 : "#F75008"; | ||
/** Color representing response status code 404 (orange.60). */ | ||
export const KUI_STATUS_COLOR_404 : "#D13500"; | ||
/** Color representing response status code 405 (orange.70). */ | ||
export const KUI_STATUS_COLOR_405 : "#A31F00"; | ||
/** Color representing response status code 406 (orange.20). */ | ||
export const KUI_STATUS_COLOR_406 : "#FFC2B3"; | ||
/** Color representing response status code 407 (orange.30). */ | ||
export const KUI_STATUS_COLOR_407 : "#FF9877"; | ||
/** Color representing response status code 408 (orange.40). */ | ||
export const KUI_STATUS_COLOR_408 : "#FF723C"; | ||
/** Color representing response status code 409 (orange.50). */ | ||
export const KUI_STATUS_COLOR_409 : "#F75008"; | ||
/** Color representing response status code 410 (orange.60). */ | ||
export const KUI_STATUS_COLOR_410 : "#D13500"; | ||
/** Color representing response status code 411 (orange.70). */ | ||
export const KUI_STATUS_COLOR_411 : "#A31F00"; | ||
/** Color representing response status code 412 (orange.20). */ | ||
export const KUI_STATUS_COLOR_412 : "#FFC2B3"; | ||
/** Color representing response status code 413 (orange.30). */ | ||
export const KUI_STATUS_COLOR_413 : "#FF9877"; | ||
/** Color representing response status code 414 (orange.40). */ | ||
export const KUI_STATUS_COLOR_414 : "#FF723C"; | ||
/** Color representing response status code 415 (orange.50). */ | ||
export const KUI_STATUS_COLOR_415 : "#F75008"; | ||
/** Color representing response status code 416 (orange.60). */ | ||
export const KUI_STATUS_COLOR_416 : "#D13500"; | ||
/** Color representing response status code 417 (orange.70). */ | ||
export const KUI_STATUS_COLOR_417 : "#A31F00"; | ||
/** Color representing response status code 418 (orange.20). */ | ||
export const KUI_STATUS_COLOR_418 : "#FFC2B3"; | ||
/** Color representing response status code 421 (orange.30). */ | ||
export const KUI_STATUS_COLOR_421 : "#FF9877"; | ||
/** Color representing response status code 422 (orange.40). */ | ||
export const KUI_STATUS_COLOR_422 : "#FF723C"; | ||
/** Color representing response status code 423 (orange.50). */ | ||
export const KUI_STATUS_COLOR_423 : "#F75008"; | ||
/** Color representing response status code 424 (orange.60). */ | ||
export const KUI_STATUS_COLOR_424 : "#D13500"; | ||
/** Color representing response status code 425 (orange.70). */ | ||
export const KUI_STATUS_COLOR_425 : "#A31F00"; | ||
/** Color representing response status code 426 (orange.20). */ | ||
export const KUI_STATUS_COLOR_426 : "#FFC2B3"; | ||
/** Color representing response status code 428 (orange.30). */ | ||
export const KUI_STATUS_COLOR_428 : "#FF9877"; | ||
/** Color representing response status code 429 (orange.40). */ | ||
export const KUI_STATUS_COLOR_429 : "#FF723C"; | ||
/** Color representing response status code 431 (orange.50). */ | ||
export const KUI_STATUS_COLOR_431 : "#F75008"; | ||
/** Color representing response status code 451 (orange.60). */ | ||
export const KUI_STATUS_COLOR_451 : "#D13500"; | ||
/** Color representing response status code 500 (red.20). */ | ||
export const KUI_STATUS_COLOR_500 : "#ffabab"; | ||
/** Color representing response status code 501 (red.30). */ | ||
export const KUI_STATUS_COLOR_501 : "#ff7272"; | ||
/** Color representing response status code 502 (red.40). */ | ||
export const KUI_STATUS_COLOR_502 : "#ff3954"; | ||
/** Color representing response status code 503 (red.50). */ | ||
export const KUI_STATUS_COLOR_503 : "#f50045"; | ||
/** Color representing response status code 504 (red.60). */ | ||
export const KUI_STATUS_COLOR_504 : "#d60027"; | ||
/** Color representing response status code 505 (red.70). */ | ||
export const KUI_STATUS_COLOR_505 : "#ad000e"; | ||
/** Color representing response status code 506 (red.20). */ | ||
export const KUI_STATUS_COLOR_506 : "#ffabab"; | ||
/** Color representing response status code 507 (red.30). */ | ||
export const KUI_STATUS_COLOR_507 : "#ff7272"; | ||
/** Color representing response status code 508 (red.40). */ | ||
export const KUI_STATUS_COLOR_508 : "#ff3954"; | ||
/** Color representing response status code 510 (red.50). */ | ||
export const KUI_STATUS_COLOR_510 : "#f50045"; | ||
/** Color representing response status code 511 (red.60). */ | ||
export const KUI_STATUS_COLOR_511 : "#d60027"; | ||
/** Color for unknown response status codes in the 100-199 range (blue.10). */ | ||
export const KUI_STATUS_COLOR_1NA : "#eefaff"; | ||
/** Color for unknown response status codes in the 200-299 range (green.10). */ | ||
export const KUI_STATUS_COLOR_2NA : "#ecfffb"; | ||
/** Color for unknown response status codes in the 300-399 range (yellow.10). */ | ||
export const KUI_STATUS_COLOR_3NA : "#fffce0"; | ||
/** Color for unknown response status codes in the 400-499 range (orange.10). */ | ||
export const KUI_STATUS_COLOR_4NA : "#FFF1EF"; | ||
/** Color for unknown response status codes in the 500-599 range (red.10). */ | ||
export const KUI_STATUS_COLOR_5NA : "#ffe5e5"; | ||
/** Color for a group of response status codes in the 100-199 range (blue.40). */ | ||
export const KUI_STATUS_COLOR_100S : "#5f9aff"; | ||
/** Color for a group of response status codes in the 200-299 range (green.40). */ | ||
export const KUI_STATUS_COLOR_200S : "#00d6a4"; | ||
/** Color for a group of response status codes in the 300-399 range (yellow.40). */ | ||
export const KUI_STATUS_COLOR_300S : "#ffc400"; | ||
/** Color for a group of response status codes in the 400-499 range (orange.40). */ | ||
export const KUI_STATUS_COLOR_400S : "#FF723C"; | ||
/** Color for a group of response status codes in the 500-599 range (red.40). */ | ||
export const KUI_STATUS_COLOR_500S : "#ff3954"; | ||
/** The standard monospace text font family. Typically used for code blocks, inline code, and copyable text. */ | ||
export const KUI_FONT_FAMILY_CODE : "'JetBrains Mono', Consolas, monospace"; | ||
/** The standard heading text font family. */ | ||
export const KUI_FONT_FAMILY_HEADING : "'Inter', Roboto, Helvetica, sans-serif"; | ||
/** The standard text font family. */ | ||
export const KUI_FONT_FAMILY_TEXT : "'Inter', Roboto, Helvetica, sans-serif"; | ||
export const KUI_FONT_SIZE_10 : "10px"; | ||
export const KUI_FONT_SIZE_20 : "12px"; | ||
export const KUI_FONT_SIZE_30 : "14px"; | ||
export const KUI_FONT_SIZE_40 : "16px"; | ||
export const KUI_FONT_SIZE_50 : "18px"; | ||
export const KUI_FONT_SIZE_60 : "20px"; | ||
export const KUI_FONT_SIZE_70 : "24px"; | ||
export const KUI_FONT_SIZE_80 : "32px"; | ||
export const KUI_FONT_SIZE_90 : "40px"; | ||
export const KUI_FONT_SIZE_100 : "48px"; | ||
/** 700 */ | ||
export const KUI_FONT_WEIGHT_BOLD : "700"; | ||
/** 500 */ | ||
export const KUI_FONT_WEIGHT_MEDIUM : "500"; | ||
/** 400: The normal font weight. */ | ||
export const KUI_FONT_WEIGHT_REGULAR : "400"; | ||
/** 600 */ | ||
export const KUI_FONT_WEIGHT_SEMIBOLD : "600"; | ||
/** Alias for letter-spacing-normal */ | ||
export const KUI_LETTER_SPACING_0 : "normal"; | ||
/** -0.12px */ | ||
export const KUI_LETTER_SPACING_MINUS_10 : "-0.12px"; | ||
/** -0.24px */ | ||
export const KUI_LETTER_SPACING_MINUS_20 : "-0.24px"; | ||
/** -0.32px */ | ||
export const KUI_LETTER_SPACING_MINUS_30 : "-0.32px"; | ||
/** -0.4px */ | ||
export const KUI_LETTER_SPACING_MINUS_40 : "-0.4px"; | ||
/** -0.48px */ | ||
export const KUI_LETTER_SPACING_MINUS_50 : "-0.48px"; | ||
/** normal */ | ||
export const KUI_LETTER_SPACING_NORMAL : "normal"; | ||
/** 12px */ | ||
export const KUI_LINE_HEIGHT_10 : "12px"; | ||
/** 16px */ | ||
export const KUI_LINE_HEIGHT_20 : "16px"; | ||
/** 20px */ | ||
export const KUI_LINE_HEIGHT_30 : "20px"; | ||
/** 24px */ | ||
export const KUI_LINE_HEIGHT_40 : "24px"; | ||
/** 28px */ | ||
export const KUI_LINE_HEIGHT_50 : "28px"; | ||
/** 32px */ | ||
export const KUI_LINE_HEIGHT_60 : "32px"; | ||
/** 36px */ | ||
export const KUI_LINE_HEIGHT_70 : "36px"; | ||
/** 40px */ | ||
export const KUI_LINE_HEIGHT_80 : "40px"; | ||
/** 48px */ | ||
export const KUI_LINE_HEIGHT_90 : "48px"; | ||
/** 56px */ | ||
export const KUI_LINE_HEIGHT_100 : "56px"; | ||
/** 0px 4px 20px 0px rgba(0, 0, 0, 0.08) */ | ||
export const KUI_SHADOW : "0px 4px 20px 0px rgba(0, 0, 0, 0.08)"; | ||
/** 0px 0px 0px 1px gray.20 inset */ | ||
export const KUI_SHADOW_BORDER : "0px 0px 0px 1px #e0e4ea inset"; | ||
/** 0px 0px 0px 1px red.60 inset */ | ||
export const KUI_SHADOW_BORDER_DANGER : "0px 0px 0px 1px #d60027 inset"; | ||
/** 0px 0px 0px 1px red.70 inset */ | ||
export const KUI_SHADOW_BORDER_DANGER_STRONG : "0px 0px 0px 1px #ad000e inset"; | ||
/** 0px 0px 0px 1px gray.20 inset */ | ||
export const KUI_SHADOW_BORDER_DISABLED : "0px 0px 0px 1px #e0e4ea inset"; | ||
/** 0px 0px 0px 1px blue.60 inset */ | ||
export const KUI_SHADOW_BORDER_PRIMARY : "0px 0px 0px 1px #0044f4 inset"; | ||
/** 0px 0px 0px 1px blue.90 inset */ | ||
export const KUI_SHADOW_BORDER_PRIMARY_STRONGEST : "0px 0px 0px 1px #001466 inset"; | ||
/** 0px 0px 0px 1px blue.40 inset */ | ||
export const KUI_SHADOW_BORDER_PRIMARY_WEAK : "0px 0px 0px 1px #5f9aff inset"; | ||
/** 0px 0px 0px 4px rgba(0, 68, 244, 0.2) */ | ||
export const KUI_SHADOW_FOCUS : "0px 0px 0px 4px rgba(0, 68, 244, 0.2)"; | ||
/** 0px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_0 : "0px"; | ||
/** 2px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_10 : "2px"; | ||
/** 4px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_20 : "4px"; | ||
/** 6px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_30 : "6px"; | ||
/** 8px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_40 : "8px"; | ||
/** 12px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_50 : "12px"; | ||
/** 16px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_60 : "16px"; | ||
/** 20px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_70 : "20px"; | ||
/** 24px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_80 : "24px"; | ||
/** 32px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_90 : "32px"; | ||
/** 40px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_100 : "40px"; | ||
/** 48px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_110 : "48px"; | ||
/** 56px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_120 : "56px"; | ||
/** 64px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_130 : "64px"; | ||
/** 80px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_140 : "80px"; | ||
/** 96px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_150 : "96px"; | ||
/** auto */ | ||
export const KUI_SPACE_AUTO : "auto"; | ||
export const KUI_COLOR_BACKGROUND: "#ffffff"; /** Background color for danger actions or messages (red.60). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER: "#d60027"; /** Strong background color for danger actions or messages (red.70). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_STRONG: "#ad000e"; /** Stronger background color for danger actions or messages (red.80). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_STRONGER: "#850000"; /** Strongest background color for danger actions or messages (red.90). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_STRONGEST: "#5c0000"; /** Weak background color for danger actions or messages (red.40). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_WEAK: "#ff3954"; /** Weaker background color for danger actions or messages (red.20). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_WEAKER: "#ffabab"; /** Weakest background color for danger actions or messages (red.10). */ | ||
export const KUI_COLOR_BACKGROUND_DANGER_WEAKEST: "#ffe5e5"; /** Background color for decorative purposes (purple.60). */ | ||
export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE: "#6f28ff"; /** Weakest background color for decorative purposes (purple.10). */ | ||
export const KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST: "#f1f0ff"; /** Background color for disabled elements (gray.20). */ | ||
export const KUI_COLOR_BACKGROUND_DISABLED: "#e0e4ea"; /** Inverse background color for containers (blue.100) */ | ||
export const KUI_COLOR_BACKGROUND_INVERSE: "#000933"; /** Background color for neutral elements (gray.60). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL: "#6c7489"; /** Strong background color for neutral elements (gray.70). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG: "#52596e"; /** Stronger background color for neutral elements (gray.80). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER: "#3a3f51"; /** Strongest background color for neutral elements (gray.90). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST: "#232633"; /** Weak background color for neutral elements (gray.40). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK: "#afb7c5"; /** Weaker background color for neutral elements (gray.20). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER: "#e0e4ea"; /** Weakest background color for neutral elements (gray.10). */ | ||
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST: "#f9fafb"; /** Overlay background color (rgba(blue.100, 0.6)) */ | ||
export const KUI_COLOR_BACKGROUND_OVERLAY: "rgba(0, 9, 51, 0.6)"; /** Background color for primary actions or messages (blue.60). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY: "#0044f4"; /** Strong background color for primary actions or messages (blue.70). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONG: "#0030cc"; /** Stronger background color for primary actions or messages (blue.80). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGER: "#002099"; /** Strongest background color for primary actions or messages (blue.90). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST: "#001466"; /** Weak background color for primary actions or messages (blue.40). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK: "#5f9aff"; /** Weaker background color for primary actions or messages (blue.20). */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER: "#bee2ff"; /** Weakest background color for primary actions or messages (blue.10) */ | ||
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST: "#eefaff"; /** Weak background color for success elements (green.40). */ | ||
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAK: "#00d6a4"; /** Weakest background color for success elements (green.10). */ | ||
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST: "#ecfffb"; /** Transparent background color (transparent). */ | ||
export const KUI_COLOR_BACKGROUND_TRANSPARENT: "transparent"; /** Weak background color for warning elements (yellow.40). */ | ||
export const KUI_COLOR_BACKGROUND_WARNING_WEAK: "#ffc400"; /** Weakest background color for warning elements (yellow.10). */ | ||
export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST: "#fffce0"; /** Default border color for containers (gray.20). */ | ||
export const KUI_COLOR_BORDER: "#e0e4ea"; /** Border color for danger actions or messages (red.60). */ | ||
export const KUI_COLOR_BORDER_DANGER: "#d60027"; /** Strong border color for danger actions or messages (red.70). */ | ||
export const KUI_COLOR_BORDER_DANGER_STRONG: "#ad000e"; /** Stronger border color for danger actions or messages (red.80). */ | ||
export const KUI_COLOR_BORDER_DANGER_STRONGER: "#850000"; /** Strongest border color for danger actions or messages (red.90). */ | ||
export const KUI_COLOR_BORDER_DANGER_STRONGEST: "#5c0000"; /** Weak border color for danger actions or messages (red.40). */ | ||
export const KUI_COLOR_BORDER_DANGER_WEAK: "#ff3954"; /** Weaker border color for danger actions or messages (red.20). */ | ||
export const KUI_COLOR_BORDER_DANGER_WEAKER: "#ffabab"; /** Weakest border color for danger actions or messages (red.10). */ | ||
export const KUI_COLOR_BORDER_DANGER_WEAKEST: "#ffe5e5"; /** Border color for decorative purposes (purple.60). */ | ||
export const KUI_COLOR_BORDER_DECORATIVE_PURPLE: "#6f28ff"; /** Border color for disabled elements (gray.20). */ | ||
export const KUI_COLOR_BORDER_DISABLED: "#e0e4ea"; /** Inverse border color (rgba(white, 0.2)). */ | ||
export const KUI_COLOR_BORDER_INVERSE: "rgba(255, 255, 255, 0.2)"; /** Weak border color for neutral elements (gray.40) */ | ||
export const KUI_COLOR_BORDER_NEUTRAL_WEAK: "#afb7c5"; /** Weaker border color for neutral elements (gray.20) */ | ||
export const KUI_COLOR_BORDER_NEUTRAL_WEAKER: "#e0e4ea"; /** Border color for primary actions or messages (blue.60). */ | ||
export const KUI_COLOR_BORDER_PRIMARY: "#0044f4"; /** Strong border color for primary actions or messages (blue.70). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_STRONG: "#0030cc"; /** Stronger border color for primary actions or messages (blue.80). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_STRONGER: "#002099"; /** Strongest border color for primary actions or messages (blue.90). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_STRONGEST: "#001466"; /** Weak border color for primary actions or messages (blue.40). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_WEAK: "#5f9aff"; /** Weaker border color for primary actions or messages (blue.20). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_WEAKER: "#bee2ff"; /** Weakest border color for primary actions or messages (blue.10). */ | ||
export const KUI_COLOR_BORDER_PRIMARY_WEAKEST: "#eefaff"; /** Transparent border color (transparent). */ | ||
export const KUI_COLOR_BORDER_TRANSPARENT: "transparent"; /** Default text color (blue.100). */ | ||
export const KUI_COLOR_TEXT: "#000933"; /** Text color for danger actions or messages (red.60). */ | ||
export const KUI_COLOR_TEXT_DANGER: "#d60027"; /** Strong text color for danger actions or messages (red.70). */ | ||
export const KUI_COLOR_TEXT_DANGER_STRONG: "#ad000e"; /** Text color for decorative purposes (aqua.50). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_AQUA: "#00abd2"; /** Text color for decorative purposes (pink.60). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_PINK: "#d60067"; /** Text color for decorative purposes (purple.60). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_PURPLE: "#6f28ff"; /** Strong text color for decorative purposes (purple.70). */ | ||
export const KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG: "#5e00f5"; /** Text color for disabled elements (gray.40). */ | ||
export const KUI_COLOR_TEXT_DISABLED: "#afb7c5"; /** Inverse text color (white). */ | ||
export const KUI_COLOR_TEXT_INVERSE: "#ffffff"; /** Text color for neutral elements (gray.60). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL: "#6c7489"; /** Strong text color for neutral elements (gray.70). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_STRONG: "#52596e"; /** Stronger text color for neutral elements (gray.80). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_STRONGER: "#3a3f51"; /** Strongest text color for neutral elements (gray.90). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST: "#232633"; /** Weak text color for neutral elements (gray.40). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_WEAK: "#afb7c5"; /** Weaker text color for neutral elements (gray.20). */ | ||
export const KUI_COLOR_TEXT_NEUTRAL_WEAKER: "#e0e4ea"; /** Text color for primary actions or messages (blue.60). */ | ||
export const KUI_COLOR_TEXT_PRIMARY: "#0044f4"; /** Strong text color for primary actions or messages (blue.70). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_STRONG: "#0030cc"; /** Stronger text color for primary actions or messages (blue.80). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_STRONGER: "#002099"; /** Strongest text color for primary actions or messages (blue.90). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_STRONGEST: "#001466"; /** Weak text color for primary actions or messages (blue.40). */ | ||
export const KUI_COLOR_TEXT_PRIMARY_WEAK: "#5f9aff"; /** Text color for success actions or messages (green.60). */ | ||
export const KUI_COLOR_TEXT_SUCCESS: "#007d60"; /** Strong text color for success actions or messages (green.70). */ | ||
export const KUI_COLOR_TEXT_SUCCESS_STRONG: "#005944"; /** Text color for warning actions or messages (yellow.60). */ | ||
export const KUI_COLOR_TEXT_WARNING: "#995c00"; /** Text color for warning actions or messages (yellow.70). */ | ||
export const KUI_COLOR_TEXT_WARNING_STRONG: "#804400"; /** Default transition timing */ | ||
export const KUI_ANIMATION_DURATION_20: "0.2s"; /** 0px border radius. */ | ||
export const KUI_BORDER_RADIUS_0: "0px"; /** 2px border radius. */ | ||
export const KUI_BORDER_RADIUS_10: "2px"; /** 4px border radius. */ | ||
export const KUI_BORDER_RADIUS_20: "4px"; /** 6px border radius. */ | ||
export const KUI_BORDER_RADIUS_30: "6px"; /** 8px border radius. */ | ||
export const KUI_BORDER_RADIUS_40: "8px"; /** 10px border radius. */ | ||
export const KUI_BORDER_RADIUS_50: "10px"; /** 50% border radius used to create circles. */ | ||
export const KUI_BORDER_RADIUS_CIRCLE: "50%"; /** 100px border radius used to create pill shapes. */ | ||
export const KUI_BORDER_RADIUS_ROUND: "100px"; /** 0px border width. */ | ||
export const KUI_BORDER_WIDTH_0: "0px"; /** 1px border width. */ | ||
export const KUI_BORDER_WIDTH_10: "1px"; /** 2px border width. */ | ||
export const KUI_BORDER_WIDTH_20: "2px"; /** 4px border width. */ | ||
export const KUI_BORDER_WIDTH_30: "4px"; /** Used for larger mobile screens. Any viewport width under this value is considered mobile. */ | ||
export const KUI_BREAKPOINT_MOBILE: "640px"; /** Used for tablet screens. */ | ||
export const KUI_BREAKPOINT_PHABLET: "768px"; /** Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */ | ||
export const KUI_BREAKPOINT_TABLET: "1024px"; /** Used for standard desktop screens. */ | ||
export const KUI_BREAKPOINT_LAPTOP: "1280px"; /** Used for larger desktop screens. */ | ||
export const KUI_BREAKPOINT_DESKTOP: "1536px"; /** Danger color for icons. */ | ||
export const KUI_ICON_COLOR_DANGER: "#f50045"; /** Neutral color for icons. */ | ||
export const KUI_ICON_COLOR_NEUTRAL: "#828a9e"; /** Primary color for icons. */ | ||
export const KUI_ICON_COLOR_PRIMARY: "#306fff"; /** Success color for icons. */ | ||
export const KUI_ICON_COLOR_SUCCESS: "#00a17b"; /** Warning color for icons. */ | ||
export const KUI_ICON_COLOR_WARNING: "#ffc400"; /** 10px icon size. */ | ||
export const KUI_ICON_SIZE_10: "10px"; /** 12px icon size. */ | ||
export const KUI_ICON_SIZE_20: "12px"; /** 16px icon size. */ | ||
export const KUI_ICON_SIZE_30: "16px"; /** 20px icon size. */ | ||
export const KUI_ICON_SIZE_40: "20px"; /** 24px icon size (default). */ | ||
export const KUI_ICON_SIZE_50: "24px"; /** 32px icon size. */ | ||
export const KUI_ICON_SIZE_60: "32px"; /** 40px icon size. */ | ||
export const KUI_ICON_SIZE_70: "40px"; /** 48px icon size. */ | ||
export const KUI_ICON_SIZE_80: "48px"; /** Background color for the CONNECT method (purple.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_CONNECT: "#f1f0ff"; /** Background color for the DELETE method (red.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_DELETE: "#ffe5e5"; /** Background color for the GET method (blue.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_GET: "#eefaff"; /** Background color for the HEAD method (gray.70). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_HEAD: "#52596e"; /** Background color for the OPTIONS method (gray.20). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_OPTIONS: "#e0e4ea"; /** Background color for the PATCH method (aqua.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_PATCH: "#ecfcff"; /** Background color for the POST method (green.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_POST: "#ecfffb"; /** Background color for the PUT method (yellow.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_PUT: "#fffce0"; /** Background color for the TRACE method (pink.10). */ | ||
export const KUI_METHOD_COLOR_BACKGROUND_TRACE: "#fff0f7"; /** Text color for the CONNECT method (purple.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_CONNECT: "#6f28ff"; /** Strong text color for the CONNECT method (purple.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_CONNECT_STRONG: "#5e00f5"; /** Text color for the DELETE method (red.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_DELETE: "#d60027"; /** Strong text color for the DELETE method (red.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_DELETE_STRONG: "#ad000e"; /** Text color for the GET method (blue.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_GET: "#0044f4"; /** Strong text color for the GET method (blue.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_GET_STRONG: "#0030cc"; /** Text color for the HEAD method (gray.20). */ | ||
export const KUI_METHOD_COLOR_TEXT_HEAD: "#e0e4ea"; /** Strong text color for the HEAD method (gray.40). */ | ||
export const KUI_METHOD_COLOR_TEXT_HEAD_STRONG: "#afb7c5"; /** Text color for the OPTIONS method (gray.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_OPTIONS: "#52596e"; /** Strong text color for the OPTIONS method (gray.80). */ | ||
export const KUI_METHOD_COLOR_TEXT_OPTIONS_STRONG: "#3a3f51"; /** Text color for the PATCH method (aqua.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_PATCH: "#00819d"; /** Strong text color for the PATCH method (aqua.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_PATCH_STRONG: "#00647a"; /** Text color for the POST method (green.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_POST: "#007d60"; /** Strong text color for the POST method (green.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_POST_STRONG: "#005944"; /** Text color for the PUT method (yellow.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_PUT: "#995c00"; /** Strong text color for the PUT method (yellow.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_PUT_STRONG: "#804400"; /** Text color for the TRACE method (pink.60). */ | ||
export const KUI_METHOD_COLOR_TEXT_TRACE: "#d60067"; /** Strong text color for the TRACE method (pink.70). */ | ||
export const KUI_METHOD_COLOR_TEXT_TRACE_STRONG: "#ad0053"; /** blue.100 */ | ||
export const KUI_NAVIGATION_COLOR_BACKGROUND: "#000933"; /** The background color of a selected navigation item. */ | ||
export const KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED: "rgba(255, 255, 255, 0.12)"; /** rgba(white, 0.12) */ | ||
export const KUI_NAVIGATION_COLOR_BORDER: "rgba(255, 255, 255, 0.12)"; /** The border color for a selected child navigation item. */ | ||
export const KUI_NAVIGATION_COLOR_BORDER_CHILD: "#00fabe"; /** The color of the navigation section divider. */ | ||
export const KUI_NAVIGATION_COLOR_BORDER_DIVIDER: "rgba(255, 255, 255, 0.24)"; /** Navigation link and icon color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT: "#bee2ff"; /** Navigation link and icon focus-visible color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT_FOCUS: "#ffffff"; /** Navigation link and icon hover color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT_HOVER: "#eefaff"; /** Navigation link and icon selected color. */ | ||
export const KUI_NAVIGATION_COLOR_TEXT_SELECTED: "#00fabe"; /** The box-shadow for a focus-visible navigation link. */ | ||
export const KUI_NAVIGATION_SHADOW_BORDER: "0 0 0 1px rgba(255, 255, 255, 0.12) inset"; /** The left box-shadow for an active child navigation link. */ | ||
export const KUI_NAVIGATION_SHADOW_BORDER_CHILD: "4px 0 0 0 #00fabe inset"; /** Navigation link focus-visible box-shadow. */ | ||
export const KUI_NAVIGATION_SHADOW_FOCUS: "0 0 0 1px rgba(255, 255, 255, 0.60) inset"; /** Color representing response status code 100 (blue.20). */ | ||
export const KUI_STATUS_COLOR_100: "#bee2ff"; /** Color representing response status code 101 (blue.30). */ | ||
export const KUI_STATUS_COLOR_101: "#8fc1ff"; /** Color representing response status code 102 (blue.40). */ | ||
export const KUI_STATUS_COLOR_102: "#5f9aff"; /** Color representing response status code 103 (blue.50). */ | ||
export const KUI_STATUS_COLOR_103: "#306fff"; /** Color representing response status code 200 (green.20). */ | ||
export const KUI_STATUS_COLOR_200: "#b5ffee"; /** Color representing response status code 201 (green.30). */ | ||
export const KUI_STATUS_COLOR_201: "#00fabe"; /** Color representing response status code 202 (green.40). */ | ||
export const KUI_STATUS_COLOR_202: "#00d6a4"; /** Color representing response status code 203 (green.50). */ | ||
export const KUI_STATUS_COLOR_203: "#00a17b"; /** Color representing response status code 204 (green.60). */ | ||
export const KUI_STATUS_COLOR_204: "#007d60"; /** Color representing response status code 205 (green.70). */ | ||
export const KUI_STATUS_COLOR_205: "#005944"; /** Color representing response status code 206 (green.20). */ | ||
export const KUI_STATUS_COLOR_206: "#b5ffee"; /** Color representing response status code 207 (green.30). */ | ||
export const KUI_STATUS_COLOR_207: "#00fabe"; /** Color representing response status code 208 (green.40). */ | ||
export const KUI_STATUS_COLOR_208: "#b5ffee"; /** Color representing response status code 226 (green.50). */ | ||
export const KUI_STATUS_COLOR_226: "#00a17b"; /** Color representing response status code 100 (yellow.20). */ | ||
export const KUI_STATUS_COLOR_300: "#fff296"; /** Color representing response status code 101 (yellow.30). */ | ||
export const KUI_STATUS_COLOR_301: "#ffe04b"; /** Color representing response status code 102 (yellow.40). */ | ||
export const KUI_STATUS_COLOR_302: "#ffc400"; /** Color representing response status code 103 (yellow.50). */ | ||
export const KUI_STATUS_COLOR_303: "#b37600"; /** Color representing response status code 103 (yellow.60). */ | ||
export const KUI_STATUS_COLOR_304: "#995c00"; /** Color representing response status code 103 (yellow.70). */ | ||
export const KUI_STATUS_COLOR_305: "#804400"; /** Color representing response status code 103 (yellow.20). */ | ||
export const KUI_STATUS_COLOR_307: "#fff296"; /** Color representing response status code 103 (yellow.30). */ | ||
export const KUI_STATUS_COLOR_308: "#ffe04b"; /** Color representing response status code 400 (orange.20). */ | ||
export const KUI_STATUS_COLOR_400: "#FFC2B3"; /** Color representing response status code 401 (orange.30). */ | ||
export const KUI_STATUS_COLOR_401: "#FF9877"; /** Color representing response status code 402 (orange.40). */ | ||
export const KUI_STATUS_COLOR_402: "#FF723C"; /** Color representing response status code 403 (orange.50). */ | ||
export const KUI_STATUS_COLOR_403: "#F75008"; /** Color representing response status code 404 (orange.60). */ | ||
export const KUI_STATUS_COLOR_404: "#D13500"; /** Color representing response status code 405 (orange.70). */ | ||
export const KUI_STATUS_COLOR_405: "#A31F00"; /** Color representing response status code 406 (orange.20). */ | ||
export const KUI_STATUS_COLOR_406: "#FFC2B3"; /** Color representing response status code 407 (orange.30). */ | ||
export const KUI_STATUS_COLOR_407: "#FF9877"; /** Color representing response status code 408 (orange.40). */ | ||
export const KUI_STATUS_COLOR_408: "#FF723C"; /** Color representing response status code 409 (orange.50). */ | ||
export const KUI_STATUS_COLOR_409: "#F75008"; /** Color representing response status code 410 (orange.60). */ | ||
export const KUI_STATUS_COLOR_410: "#D13500"; /** Color representing response status code 411 (orange.70). */ | ||
export const KUI_STATUS_COLOR_411: "#A31F00"; /** Color representing response status code 412 (orange.20). */ | ||
export const KUI_STATUS_COLOR_412: "#FFC2B3"; /** Color representing response status code 413 (orange.30). */ | ||
export const KUI_STATUS_COLOR_413: "#FF9877"; /** Color representing response status code 414 (orange.40). */ | ||
export const KUI_STATUS_COLOR_414: "#FF723C"; /** Color representing response status code 415 (orange.50). */ | ||
export const KUI_STATUS_COLOR_415: "#F75008"; /** Color representing response status code 416 (orange.60). */ | ||
export const KUI_STATUS_COLOR_416: "#D13500"; /** Color representing response status code 417 (orange.70). */ | ||
export const KUI_STATUS_COLOR_417: "#A31F00"; /** Color representing response status code 418 (orange.20). */ | ||
export const KUI_STATUS_COLOR_418: "#FFC2B3"; /** Color representing response status code 421 (orange.30). */ | ||
export const KUI_STATUS_COLOR_421: "#FF9877"; /** Color representing response status code 422 (orange.40). */ | ||
export const KUI_STATUS_COLOR_422: "#FF723C"; /** Color representing response status code 423 (orange.50). */ | ||
export const KUI_STATUS_COLOR_423: "#F75008"; /** Color representing response status code 424 (orange.60). */ | ||
export const KUI_STATUS_COLOR_424: "#D13500"; /** Color representing response status code 425 (orange.70). */ | ||
export const KUI_STATUS_COLOR_425: "#A31F00"; /** Color representing response status code 426 (orange.20). */ | ||
export const KUI_STATUS_COLOR_426: "#FFC2B3"; /** Color representing response status code 428 (orange.30). */ | ||
export const KUI_STATUS_COLOR_428: "#FF9877"; /** Color representing response status code 429 (orange.40). */ | ||
export const KUI_STATUS_COLOR_429: "#FF723C"; /** Color representing response status code 431 (orange.50). */ | ||
export const KUI_STATUS_COLOR_431: "#F75008"; /** Color representing response status code 451 (orange.60). */ | ||
export const KUI_STATUS_COLOR_451: "#D13500"; /** Color representing response status code 500 (red.20). */ | ||
export const KUI_STATUS_COLOR_500: "#ffabab"; /** Color representing response status code 501 (red.30). */ | ||
export const KUI_STATUS_COLOR_501: "#ff7272"; /** Color representing response status code 502 (red.40). */ | ||
export const KUI_STATUS_COLOR_502: "#ff3954"; /** Color representing response status code 503 (red.50). */ | ||
export const KUI_STATUS_COLOR_503: "#f50045"; /** Color representing response status code 504 (red.60). */ | ||
export const KUI_STATUS_COLOR_504: "#d60027"; /** Color representing response status code 505 (red.70). */ | ||
export const KUI_STATUS_COLOR_505: "#ad000e"; /** Color representing response status code 506 (red.20). */ | ||
export const KUI_STATUS_COLOR_506: "#ffabab"; /** Color representing response status code 507 (red.30). */ | ||
export const KUI_STATUS_COLOR_507: "#ff7272"; /** Color representing response status code 508 (red.40). */ | ||
export const KUI_STATUS_COLOR_508: "#ff3954"; /** Color representing response status code 510 (red.50). */ | ||
export const KUI_STATUS_COLOR_510: "#f50045"; /** Color representing response status code 511 (red.60). */ | ||
export const KUI_STATUS_COLOR_511: "#d60027"; /** Color for unknown response status codes in the 100-199 range (blue.10). */ | ||
export const KUI_STATUS_COLOR_1NA: "#eefaff"; /** Color for unknown response status codes in the 200-299 range (green.10). */ | ||
export const KUI_STATUS_COLOR_2NA: "#ecfffb"; /** Color for unknown response status codes in the 300-399 range (yellow.10). */ | ||
export const KUI_STATUS_COLOR_3NA: "#fffce0"; /** Color for unknown response status codes in the 400-499 range (orange.10). */ | ||
export const KUI_STATUS_COLOR_4NA: "#FFF1EF"; /** Color for unknown response status codes in the 500-599 range (red.10). */ | ||
export const KUI_STATUS_COLOR_5NA: "#ffe5e5"; /** Color for a group of response status codes in the 100-199 range (blue.40). */ | ||
export const KUI_STATUS_COLOR_100S: "#5f9aff"; /** Color for a group of response status codes in the 200-299 range (green.40). */ | ||
export const KUI_STATUS_COLOR_200S: "#00d6a4"; /** Color for a group of response status codes in the 300-399 range (yellow.40). */ | ||
export const KUI_STATUS_COLOR_300S: "#ffc400"; /** Color for a group of response status codes in the 400-499 range (orange.40). */ | ||
export const KUI_STATUS_COLOR_400S: "#FF723C"; /** Color for a group of response status codes in the 500-599 range (red.40). */ | ||
export const KUI_STATUS_COLOR_500S: "#ff3954"; /** The standard monospace text font family. Typically used for code blocks, inline code, and copyable text. */ | ||
export const KUI_FONT_FAMILY_CODE: "'JetBrains Mono', Consolas, monospace"; /** The standard heading text font family. */ | ||
export const KUI_FONT_FAMILY_HEADING: "'Inter', Roboto, Helvetica, sans-serif"; /** The standard text font family. */ | ||
export const KUI_FONT_FAMILY_TEXT: "'Inter', Roboto, Helvetica, sans-serif"; | ||
export const KUI_FONT_SIZE_10: "10px"; | ||
export const KUI_FONT_SIZE_20: "12px"; | ||
export const KUI_FONT_SIZE_30: "14px"; | ||
export const KUI_FONT_SIZE_40: "16px"; | ||
export const KUI_FONT_SIZE_50: "18px"; | ||
export const KUI_FONT_SIZE_60: "20px"; | ||
export const KUI_FONT_SIZE_70: "24px"; | ||
export const KUI_FONT_SIZE_80: "32px"; | ||
export const KUI_FONT_SIZE_90: "40px"; | ||
export const KUI_FONT_SIZE_100: "48px"; /** 700 */ | ||
export const KUI_FONT_WEIGHT_BOLD: "700"; /** 500 */ | ||
export const KUI_FONT_WEIGHT_MEDIUM: "500"; /** 400: The normal font weight. */ | ||
export const KUI_FONT_WEIGHT_REGULAR: "400"; /** 600 */ | ||
export const KUI_FONT_WEIGHT_SEMIBOLD: "600"; /** Alias for letter-spacing-normal */ | ||
export const KUI_LETTER_SPACING_0: "normal"; /** -0.12px */ | ||
export const KUI_LETTER_SPACING_MINUS_10: "-0.12px"; /** -0.24px */ | ||
export const KUI_LETTER_SPACING_MINUS_20: "-0.24px"; /** -0.32px */ | ||
export const KUI_LETTER_SPACING_MINUS_30: "-0.32px"; /** -0.4px */ | ||
export const KUI_LETTER_SPACING_MINUS_40: "-0.4px"; /** -0.48px */ | ||
export const KUI_LETTER_SPACING_MINUS_50: "-0.48px"; /** normal */ | ||
export const KUI_LETTER_SPACING_NORMAL: "normal"; /** 12px */ | ||
export const KUI_LINE_HEIGHT_10: "12px"; /** 16px */ | ||
export const KUI_LINE_HEIGHT_20: "16px"; /** 20px */ | ||
export const KUI_LINE_HEIGHT_30: "20px"; /** 24px */ | ||
export const KUI_LINE_HEIGHT_40: "24px"; /** 28px */ | ||
export const KUI_LINE_HEIGHT_50: "28px"; /** 32px */ | ||
export const KUI_LINE_HEIGHT_60: "32px"; /** 36px */ | ||
export const KUI_LINE_HEIGHT_70: "36px"; /** 40px */ | ||
export const KUI_LINE_HEIGHT_80: "40px"; /** 48px */ | ||
export const KUI_LINE_HEIGHT_90: "48px"; /** 56px */ | ||
export const KUI_LINE_HEIGHT_100: "56px"; /** 0px 4px 20px 0px rgba(0, 0, 0, 0.08) */ | ||
export const KUI_SHADOW: "0px 4px 20px 0px rgba(0, 0, 0, 0.08)"; /** 0px 0px 0px 1px gray.20 inset */ | ||
export const KUI_SHADOW_BORDER: "0px 0px 0px 1px #e0e4ea inset"; /** 0px 0px 0px 1px red.60 inset */ | ||
export const KUI_SHADOW_BORDER_DANGER: "0px 0px 0px 1px #d60027 inset"; /** 0px 0px 0px 1px red.70 inset */ | ||
export const KUI_SHADOW_BORDER_DANGER_STRONG: "0px 0px 0px 1px #ad000e inset"; /** 0px 0px 0px 1px gray.20 inset */ | ||
export const KUI_SHADOW_BORDER_DISABLED: "0px 0px 0px 1px #e0e4ea inset"; /** 0px 0px 0px 1px blue.60 inset */ | ||
export const KUI_SHADOW_BORDER_PRIMARY: "0px 0px 0px 1px #0044f4 inset"; /** 0px 0px 0px 1px blue.90 inset */ | ||
export const KUI_SHADOW_BORDER_PRIMARY_STRONGEST: "0px 0px 0px 1px #001466 inset"; /** 0px 0px 0px 1px blue.40 inset */ | ||
export const KUI_SHADOW_BORDER_PRIMARY_WEAK: "0px 0px 0px 1px #5f9aff inset"; /** 0px 0px 0px 4px rgba(0, 68, 244, 0.2) */ | ||
export const KUI_SHADOW_FOCUS: "0px 0px 0px 4px rgba(0, 68, 244, 0.2)"; /** 0px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_0: "0px"; /** 2px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_10: "2px"; /** 4px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_20: "4px"; /** 6px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_30: "6px"; /** 8px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_40: "8px"; /** 12px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_50: "12px"; /** 16px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_60: "16px"; /** 20px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_70: "20px"; /** 24px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_80: "24px"; /** 32px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_90: "32px"; /** 40px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_100: "40px"; /** 48px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_110: "48px"; /** 56px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_120: "56px"; /** 64px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_130: "64px"; /** 80px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_140: "80px"; /** 96px value for gaps, margin, or padding. */ | ||
export const KUI_SPACE_150: "96px"; /** auto */ | ||
export const KUI_SPACE_AUTO: "auto"; |
{ | ||
"name": "@kong/design-tokens", | ||
"version": "1.17.3-pr.340.e2b12f7.0", | ||
"version": "1.17.3-pr.372.f404ce6.0", | ||
"description": "Kong UI Design Tokens and style dictionary", | ||
@@ -56,26 +56,26 @@ "type": "module", | ||
"devDependencies": { | ||
"@commitlint/cli": "^19.4.1", | ||
"@commitlint/config-conventional": "^19.5.0", | ||
"@commitlint/cli": "^19.6.0", | ||
"@commitlint/config-conventional": "^19.6.0", | ||
"@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1", | ||
"@evilmartians/lefthook": "^1.7.15", | ||
"@kong/eslint-config-kong-ui": "^1.1.1", | ||
"@evilmartians/lefthook": "^1.9.2", | ||
"@kong/eslint-config-kong-ui": "^1.1.2", | ||
"@semantic-release/changelog": "^6.0.3", | ||
"@semantic-release/git": "^10.0.1", | ||
"@vitejs/plugin-vue": "^5.1.4", | ||
"@vitejs/plugin-vue": "^5.2.1", | ||
"chokidar-cli": "^3.0.0", | ||
"commitizen": "^4.3.0", | ||
"commitizen": "^4.3.1", | ||
"cz-conventional-changelog": "^3.3.0", | ||
"eslint": "^9.10.0", | ||
"npm-run-all2": "^6.2.3", | ||
"rimraf": "^5.0.10", | ||
"sass": "^1.79.1", | ||
"semantic-release": "^24.1.1", | ||
"eslint": "^9.16.0", | ||
"npm-run-all2": "^7.0.1", | ||
"rimraf": "^6.0.1", | ||
"sass": "^1.82.0", | ||
"semantic-release": "^24.2.0", | ||
"shx": "^0.3.4", | ||
"style-dictionary": "^4.1.2", | ||
"typescript": "^5.6.2", | ||
"vite": "^5.4.6", | ||
"vite-plugin-restart": "^0.4.1", | ||
"vite-plugin-vue-devtools": "^7.3.9", | ||
"vue": "^3.4.38", | ||
"vue-router": "^4.4.5" | ||
"style-dictionary": "^4.3.0", | ||
"typescript": "^5.7.2", | ||
"vite": "^5.4.11", | ||
"vite-plugin-restart": "^0.4.2", | ||
"vite-plugin-vue-devtools": "^7.6.7", | ||
"vue": "^3.5.13", | ||
"vue-router": "^4.5.0" | ||
}, | ||
@@ -130,10 +130,10 @@ "release": { | ||
}, | ||
"packageManager": "pnpm@9.10.0", | ||
"packageManager": "pnpm@9.15.0", | ||
"engines": { | ||
"node": ">=18.20.4", | ||
"pnpm": ">=9.10.0" | ||
"node": ">=20.18.1", | ||
"pnpm": ">=9.15.0" | ||
}, | ||
"volta": { | ||
"node": "20.17.0" | ||
"node": "22.12.0" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
0
573203
2615