Skip to content

Commit cb1f550

Browse files
adamdehavenadamdehaven
authored
feat(navigation): add tokens [KHCP-9385] (#172)
* feat(navigation): add tokens [KHCP-9385] * chore: add comments
1 parent 001c317 commit cb1f550

File tree

2 files changed

+197
-1
lines changed

2 files changed

+197
-1
lines changed

‎TOKENS.md

+133-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
* Do not edit directly
3-
* Generated on Tue, 28 Nov 2023 17:26:56 GMT
3+
* Generated on Wed, 29 Nov 2023 19:34:43 GMT
44
*
55
* Kong Design Tokens
66
* GitHub: https://github.com/Kong/design-tokens
@@ -264,6 +264,30 @@ $kui-method-color-text-put-strong: #804400;
264264
$kui-method-color-text-trace: #d60067;
265265
/* Strong text color for the TRACE method (pink.70). */
266266
$kui-method-color-text-trace-strong: #ad0053;
267+
/* blue.100 */
268+
$kui-navigation-color-background: #000933;
269+
/* rgba(255, 255, 255, 0.12) */
270+
$kui-navigation-color-background-selected: rgba(255, 255, 255, 0.12);
271+
/* rgba(255, 255, 255, 0.12) */
272+
$kui-navigation-color-border: rgba(255, 255, 255, 0.12);
273+
/* green.30 */
274+
$kui-navigation-color-border-child: #00fabe;
275+
/* rgba(255, 255, 255, 0.24) */
276+
$kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
277+
/* blue.20 */
278+
$kui-navigation-color-text: #bee2ff;
279+
/* white */
280+
$kui-navigation-color-text-focus: #ffffff;
281+
/* blue.10 */
282+
$kui-navigation-color-text-hover: #eefaff;
283+
/* green.30 */
284+
$kui-navigation-color-text-selected: #00fabe;
285+
/* 0 0 0 1px rgba(255, 255, 255, 0.12) inset */
286+
$kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
287+
/* 4px 0 0 0 #00fabe inset */
288+
$kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
289+
/* 0 0 0 1px rgba(255, 255, 255, 0.60) inset */
290+
$kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
267291
/* The standard monospace font family. */
268292
$kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
269293
/* The standard text font family. */
@@ -628,6 +652,30 @@ $tokens-map: (
628652
'kui-method-color-text-trace': #d60067;
629653
/* Strong text color for the TRACE method (pink.70). */
630654
'kui-method-color-text-trace-strong': #ad0053;
655+
/* blue.100 */
656+
'kui-navigation-color-background': #000933;
657+
/* rgba(255, 255, 255, 0.12) */
658+
'kui-navigation-color-background-selected': rgba(255, 255, 255, 0.12);
659+
/* rgba(255, 255, 255, 0.12) */
660+
'kui-navigation-color-border': rgba(255, 255, 255, 0.12);
661+
/* green.30 */
662+
'kui-navigation-color-border-child': #00fabe;
663+
/* rgba(255, 255, 255, 0.24) */
664+
'kui-navigation-color-border-divider': rgba(255, 255, 255, 0.24);
665+
/* blue.20 */
666+
'kui-navigation-color-text': #bee2ff;
667+
/* white */
668+
'kui-navigation-color-text-focus': #ffffff;
669+
/* blue.10 */
670+
'kui-navigation-color-text-hover': #eefaff;
671+
/* green.30 */
672+
'kui-navigation-color-text-selected': #00fabe;
673+
/* 0 0 0 1px rgba(255, 255, 255, 0.12) inset */
674+
'kui-navigation-shadow-border': 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
675+
/* 4px 0 0 0 #00fabe inset */
676+
'kui-navigation-shadow-border-child': 4px 0 0 0 #00fabe inset;
677+
/* 0 0 0 1px rgba(255, 255, 255, 0.60) inset */
678+
'kui-navigation-shadow-focus': 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
631679
/* The standard monospace font family. */
632680
'kui-font-family-code': 'JetBrains Mono', Consolas, monospace;
633681
/* The standard text font family. */
@@ -994,6 +1042,30 @@ $tokens-map: (
9941042
@kui-method-color-text-trace: #d60067;
9951043
/* Strong text color for the TRACE method (pink.70). */
9961044
@kui-method-color-text-trace-strong: #ad0053;
1045+
/* blue.100 */
1046+
@kui-navigation-color-background: #000933;
1047+
/* rgba(255, 255, 255, 0.12) */
1048+
@kui-navigation-color-background-selected: rgba(255, 255, 255, 0.12);
1049+
/* rgba(255, 255, 255, 0.12) */
1050+
@kui-navigation-color-border: rgba(255, 255, 255, 0.12);
1051+
/* green.30 */
1052+
@kui-navigation-color-border-child: #00fabe;
1053+
/* rgba(255, 255, 255, 0.24) */
1054+
@kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
1055+
/* blue.20 */
1056+
@kui-navigation-color-text: #bee2ff;
1057+
/* white */
1058+
@kui-navigation-color-text-focus: #ffffff;
1059+
/* blue.10 */
1060+
@kui-navigation-color-text-hover: #eefaff;
1061+
/* green.30 */
1062+
@kui-navigation-color-text-selected: #00fabe;
1063+
/* 0 0 0 1px rgba(255, 255, 255, 0.12) inset */
1064+
@kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
1065+
/* 4px 0 0 0 #00fabe inset */
1066+
@kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
1067+
/* 0 0 0 1px rgba(255, 255, 255, 0.60) inset */
1068+
@kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
9971069
/* The standard monospace font family. */
9981070
@kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
9991071
/* The standard text font family. */
@@ -1361,6 +1433,30 @@ You may scope your CSS custom property overrides inside the `:root` selector as
13611433
--kui-method-color-text-trace: #d60067;
13621434
/* Strong text color for the TRACE method (pink.70). */
13631435
--kui-method-color-text-trace-strong: #ad0053;
1436+
/* blue.100 */
1437+
--kui-navigation-color-background: #000933;
1438+
/* rgba(255, 255, 255, 0.12) */
1439+
--kui-navigation-color-background-selected: rgba(255, 255, 255, 0.12);
1440+
/* rgba(255, 255, 255, 0.12) */
1441+
--kui-navigation-color-border: rgba(255, 255, 255, 0.12);
1442+
/* green.30 */
1443+
--kui-navigation-color-border-child: #00fabe;
1444+
/* rgba(255, 255, 255, 0.24) */
1445+
--kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
1446+
/* blue.20 */
1447+
--kui-navigation-color-text: #bee2ff;
1448+
/* white */
1449+
--kui-navigation-color-text-focus: #ffffff;
1450+
/* blue.10 */
1451+
--kui-navigation-color-text-hover: #eefaff;
1452+
/* green.30 */
1453+
--kui-navigation-color-text-selected: #00fabe;
1454+
/* 0 0 0 1px rgba(255, 255, 255, 0.12) inset */
1455+
--kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
1456+
/* 4px 0 0 0 #00fabe inset */
1457+
--kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
1458+
/* 0 0 0 1px rgba(255, 255, 255, 0.60) inset */
1459+
--kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
13641460
/* The standard monospace font family. */
13651461
--kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
13661462
/* The standard text font family. */
@@ -1726,6 +1822,30 @@ export const KUI_METHOD_COLOR_TEXT_PUT_STRONG = "#804400";
17261822
export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067";
17271823
/* Strong text color for the TRACE method (pink.70). */
17281824
export const KUI_METHOD_COLOR_TEXT_TRACE_STRONG = "#ad0053";
1825+
/* blue.100 */
1826+
export const KUI_NAVIGATION_COLOR_BACKGROUND = "#000933";
1827+
/* rgba(255, 255, 255, 0.12) */
1828+
export const KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED = "rgba(255, 255, 255, 0.12)";
1829+
/* rgba(255, 255, 255, 0.12) */
1830+
export const KUI_NAVIGATION_COLOR_BORDER = "rgba(255, 255, 255, 0.12)";
1831+
/* green.30 */
1832+
export const KUI_NAVIGATION_COLOR_BORDER_CHILD = "#00fabe";
1833+
/* rgba(255, 255, 255, 0.24) */
1834+
export const KUI_NAVIGATION_COLOR_BORDER_DIVIDER = "rgba(255, 255, 255, 0.24)";
1835+
/* blue.20 */
1836+
export const KUI_NAVIGATION_COLOR_TEXT = "#bee2ff";
1837+
/* white */
1838+
export const KUI_NAVIGATION_COLOR_TEXT_FOCUS = "#ffffff";
1839+
/* blue.10 */
1840+
export const KUI_NAVIGATION_COLOR_TEXT_HOVER = "#eefaff";
1841+
/* green.30 */
1842+
export const KUI_NAVIGATION_COLOR_TEXT_SELECTED = "#00fabe";
1843+
/* 0 0 0 1px rgba(255, 255, 255, 0.12) inset */
1844+
export const KUI_NAVIGATION_SHADOW_BORDER = "0 0 0 1px rgba(255, 255, 255, 0.12) inset";
1845+
/* 4px 0 0 0 #00fabe inset */
1846+
export const KUI_NAVIGATION_SHADOW_BORDER_CHILD = "4px 0 0 0 #00fabe inset";
1847+
/* 0 0 0 1px rgba(255, 255, 255, 0.60) inset */
1848+
export const KUI_NAVIGATION_SHADOW_FOCUS = "0 0 0 1px rgba(255, 255, 255, 0.60) inset";
17291849
/* The standard monospace font family. */
17301850
export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace";
17311851
/* The standard text font family. */
@@ -1968,6 +2088,18 @@ export const KUI_SPACE_AUTO = "auto";
19682088
"kui_method_color_text_put_strong": "#804400",
19692089
"kui_method_color_text_trace": "#d60067",
19702090
"kui_method_color_text_trace_strong": "#ad0053",
2091+
"kui_navigation_color_background": "#000933",
2092+
"kui_navigation_color_background_selected": "rgba(255, 255, 255, 0.12)",
2093+
"kui_navigation_color_border": "rgba(255, 255, 255, 0.12)",
2094+
"kui_navigation_color_border_child": "#00fabe",
2095+
"kui_navigation_color_border_divider": "rgba(255, 255, 255, 0.24)",
2096+
"kui_navigation_color_text": "#bee2ff",
2097+
"kui_navigation_color_text_focus": "#ffffff",
2098+
"kui_navigation_color_text_hover": "#eefaff",
2099+
"kui_navigation_color_text_selected": "#00fabe",
2100+
"kui_navigation_shadow_border": "0 0 0 1px rgba(255, 255, 255, 0.12) inset",
2101+
"kui_navigation_shadow_border_child": "4px 0 0 0 #00fabe inset",
2102+
"kui_navigation_shadow_focus": "0 0 0 1px rgba(255, 255, 255, 0.60) inset",
19712103
"kui_font_family_code": "'JetBrains Mono', Consolas, monospace",
19722104
"kui_font_family_text": "'Inter', Roboto, Helvetica, sans-serif",
19732105
"kui_font_size_10": "10px",

‎tokens/source/components/navigation.json

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"navigation": {
3+
"color": {
4+
"background": {
5+
"_": {
6+
"comment": "blue.100",
7+
"value": "{color.alias.blue.100}"
8+
},
9+
"selected": {
10+
"comment": "The background color of a selected navigation item.",
11+
"value": "rgba(255, 255, 255, 0.12)"
12+
}
13+
},
14+
"border": {
15+
"_": {
16+
"comment": "rgba(255, 255, 255, 0.12)",
17+
"value": "rgba(255, 255, 255, 0.12)"
18+
},
19+
"child": {
20+
"comment": "The border color for a selected child navigation item.",
21+
"value": "{color.alias.green.30}"
22+
},
23+
"divider": {
24+
"comment": "The color of the navigation section divider.",
25+
"value": "rgba(255, 255, 255, 0.24)"
26+
}
27+
},
28+
"text": {
29+
"_": {
30+
"comment": "Navigation link and icon color.",
31+
"value": "{color.alias.blue.20}"
32+
},
33+
"focus": {
34+
"comment": "Navigation link and icon focus-visible color.",
35+
"value": "{color.alias.white}"
36+
},
37+
"hover": {
38+
"comment": "Navigation link and icon hover color.",
39+
"value": "{color.alias.blue.10}"
40+
},
41+
"selected": {
42+
"comment": "Navigation link and icon selected color.",
43+
"value": "{color.alias.green.30}"
44+
}
45+
}
46+
},
47+
"shadow": {
48+
"border": {
49+
"_": {
50+
"comment": "The box-shadow for a focus-visible navigation link.",
51+
"value": "0 0 0 1px rgba(255, 255, 255, 0.12) inset"
52+
},
53+
"child": {
54+
"comment": "The left box-shadow for an active child navigation link.",
55+
"value": "4px 0 0 0 {color.alias.green.30} inset"
56+
}
57+
},
58+
"focus": {
59+
"comment": "Navigation link focus-visible box-shadow.",
60+
"value": "0 0 0 1px rgba(255, 255, 255, 0.60) inset"
61+
}
62+
}
63+
}
64+
}

0 commit comments

Comments
 (0)