@kong/design-tokens 1.11.12 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/TOKENS.md +133 -1
  2. package/dist/tokens/README.md +133 -1
  3. package/dist/tokens/css/custom-properties-list.css +25 -1
  4. package/dist/tokens/css/custom-properties.css +13 -1
  5. package/dist/tokens/js/cjs/index.d.ts +27 -1
  6. package/dist/tokens/js/cjs/index.js +13 -1
  7. package/dist/tokens/js/index.d.ts +25 -1
  8. package/dist/tokens/js/index.mjs +13 -1
  9. package/dist/tokens/js/tokens.json +12 -0
  10. package/dist/tokens/less/variables.less +13 -1
  11. package/dist/tokens/scss/_map.scss +25 -1
  12. package/dist/tokens/scss/_mixins.scss +13 -1
  13. package/dist/tokens/scss/_variables.scss +13 -1
  14. package/package.json +1 -1
package/TOKENS.md CHANGED
@@ -1,6 +1,6 @@
1
1
  <!--
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -264,6 +264,30 @@ $kui-method-color-text-put-strong: #804400;
264
264
  $kui-method-color-text-trace: #d60067;
265
265
  /* Strong text color for the TRACE method (pink.70). */
266
266
  $kui-method-color-text-trace-strong: #ad0053;
267
+ /* blue.100 */
268
+ $kui-navigation-color-background: #000933;
269
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
274
+ $kui-navigation-color-border-child: #00fabe;
275
+ /* The color of the navigation section divider. */
276
+ $kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
277
+ /* Navigation link and icon color. */
278
+ $kui-navigation-color-text: #bee2ff;
279
+ /* Navigation link and icon focus-visible color. */
280
+ $kui-navigation-color-text-focus: #ffffff;
281
+ /* Navigation link and icon hover color. */
282
+ $kui-navigation-color-text-hover: #eefaff;
283
+ /* Navigation link and icon selected color. */
284
+ $kui-navigation-color-text-selected: #00fabe;
285
+ /* The box-shadow for a focus-visible navigation link. */
286
+ $kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
287
+ /* The left box-shadow for an active child navigation link. */
288
+ $kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
289
+ /* Navigation link focus-visible box-shadow. */
290
+ $kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
267
291
  /* The standard monospace font family. */
268
292
  $kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
269
293
  /* The standard text font family. */
@@ -628,6 +652,30 @@ $tokens-map: (
628
652
  'kui-method-color-text-trace': #d60067;
629
653
  /* Strong text color for the TRACE method (pink.70). */
630
654
  'kui-method-color-text-trace-strong': #ad0053;
655
+ /* blue.100 */
656
+ 'kui-navigation-color-background': #000933;
657
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
662
+ 'kui-navigation-color-border-child': #00fabe;
663
+ /* The color of the navigation section divider. */
664
+ 'kui-navigation-color-border-divider': rgba(255, 255, 255, 0.24);
665
+ /* Navigation link and icon color. */
666
+ 'kui-navigation-color-text': #bee2ff;
667
+ /* Navigation link and icon focus-visible color. */
668
+ 'kui-navigation-color-text-focus': #ffffff;
669
+ /* Navigation link and icon hover color. */
670
+ 'kui-navigation-color-text-hover': #eefaff;
671
+ /* Navigation link and icon selected color. */
672
+ 'kui-navigation-color-text-selected': #00fabe;
673
+ /* The box-shadow for a focus-visible navigation link. */
674
+ 'kui-navigation-shadow-border': 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
675
+ /* The left box-shadow for an active child navigation link. */
676
+ 'kui-navigation-shadow-border-child': 4px 0 0 0 #00fabe inset;
677
+ /* Navigation link focus-visible box-shadow. */
678
+ 'kui-navigation-shadow-focus': 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
631
679
  /* The standard monospace font family. */
632
680
  'kui-font-family-code': 'JetBrains Mono', Consolas, monospace;
633
681
  /* The standard text font family. */
@@ -994,6 +1042,30 @@ $tokens-map: (
994
1042
  @kui-method-color-text-trace: #d60067;
995
1043
  /* Strong text color for the TRACE method (pink.70). */
996
1044
  @kui-method-color-text-trace-strong: #ad0053;
1045
+ /* blue.100 */
1046
+ @kui-navigation-color-background: #000933;
1047
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
1052
+ @kui-navigation-color-border-child: #00fabe;
1053
+ /* The color of the navigation section divider. */
1054
+ @kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
1055
+ /* Navigation link and icon color. */
1056
+ @kui-navigation-color-text: #bee2ff;
1057
+ /* Navigation link and icon focus-visible color. */
1058
+ @kui-navigation-color-text-focus: #ffffff;
1059
+ /* Navigation link and icon hover color. */
1060
+ @kui-navigation-color-text-hover: #eefaff;
1061
+ /* Navigation link and icon selected color. */
1062
+ @kui-navigation-color-text-selected: #00fabe;
1063
+ /* The box-shadow for a focus-visible navigation link. */
1064
+ @kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
1065
+ /* The left box-shadow for an active child navigation link. */
1066
+ @kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
1067
+ /* Navigation link focus-visible box-shadow. */
1068
+ @kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
997
1069
  /* The standard monospace font family. */
998
1070
  @kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
999
1071
  /* The standard text font family. */
@@ -1361,6 +1433,30 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1361
1433
  --kui-method-color-text-trace: #d60067;
1362
1434
  /* Strong text color for the TRACE method (pink.70). */
1363
1435
  --kui-method-color-text-trace-strong: #ad0053;
1436
+ /* blue.100 */
1437
+ --kui-navigation-color-background: #000933;
1438
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
1443
+ --kui-navigation-color-border-child: #00fabe;
1444
+ /* The color of the navigation section divider. */
1445
+ --kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
1446
+ /* Navigation link and icon color. */
1447
+ --kui-navigation-color-text: #bee2ff;
1448
+ /* Navigation link and icon focus-visible color. */
1449
+ --kui-navigation-color-text-focus: #ffffff;
1450
+ /* Navigation link and icon hover color. */
1451
+ --kui-navigation-color-text-hover: #eefaff;
1452
+ /* Navigation link and icon selected color. */
1453
+ --kui-navigation-color-text-selected: #00fabe;
1454
+ /* The box-shadow for a focus-visible navigation link. */
1455
+ --kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
1456
+ /* The left box-shadow for an active child navigation link. */
1457
+ --kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
1458
+ /* Navigation link focus-visible box-shadow. */
1459
+ --kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
1364
1460
  /* The standard monospace font family. */
1365
1461
  --kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
1366
1462
  /* The standard text font family. */
@@ -1726,6 +1822,30 @@ export const KUI_METHOD_COLOR_TEXT_PUT_STRONG = "#804400";
1726
1822
  export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067";
1727
1823
  /* Strong text color for the TRACE method (pink.70). */
1728
1824
  export const KUI_METHOD_COLOR_TEXT_TRACE_STRONG = "#ad0053";
1825
+ /* blue.100 */
1826
+ export const KUI_NAVIGATION_COLOR_BACKGROUND = "#000933";
1827
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
1832
+ export const KUI_NAVIGATION_COLOR_BORDER_CHILD = "#00fabe";
1833
+ /* The color of the navigation section divider. */
1834
+ export const KUI_NAVIGATION_COLOR_BORDER_DIVIDER = "rgba(255, 255, 255, 0.24)";
1835
+ /* Navigation link and icon color. */
1836
+ export const KUI_NAVIGATION_COLOR_TEXT = "#bee2ff";
1837
+ /* Navigation link and icon focus-visible color. */
1838
+ export const KUI_NAVIGATION_COLOR_TEXT_FOCUS = "#ffffff";
1839
+ /* Navigation link and icon hover color. */
1840
+ export const KUI_NAVIGATION_COLOR_TEXT_HOVER = "#eefaff";
1841
+ /* Navigation link and icon selected color. */
1842
+ export const KUI_NAVIGATION_COLOR_TEXT_SELECTED = "#00fabe";
1843
+ /* The box-shadow for a focus-visible navigation link. */
1844
+ export const KUI_NAVIGATION_SHADOW_BORDER = "0 0 0 1px rgba(255, 255, 255, 0.12) inset";
1845
+ /* The left box-shadow for an active child navigation link. */
1846
+ export const KUI_NAVIGATION_SHADOW_BORDER_CHILD = "4px 0 0 0 #00fabe inset";
1847
+ /* Navigation link focus-visible box-shadow. */
1848
+ export const KUI_NAVIGATION_SHADOW_FOCUS = "0 0 0 1px rgba(255, 255, 255, 0.60) inset";
1729
1849
  /* The standard monospace font family. */
1730
1850
  export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace";
1731
1851
  /* The standard text font family. */
@@ -1968,6 +2088,18 @@ export const KUI_SPACE_AUTO = "auto";
1968
2088
  "kui_method_color_text_put_strong": "#804400",
1969
2089
  "kui_method_color_text_trace": "#d60067",
1970
2090
  "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",
1971
2103
  "kui_font_family_code": "'JetBrains Mono', Consolas, monospace",
1972
2104
  "kui_font_family_text": "'Inter', Roboto, Helvetica, sans-serif",
1973
2105
  "kui_font_size_10": "10px",
package/dist/tokens/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  <!--
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -264,6 +264,30 @@ $kui-method-color-text-put-strong: #804400;
264
264
  $kui-method-color-text-trace: #d60067;
265
265
  /* Strong text color for the TRACE method (pink.70). */
266
266
  $kui-method-color-text-trace-strong: #ad0053;
267
+ /* blue.100 */
268
+ $kui-navigation-color-background: #000933;
269
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
274
+ $kui-navigation-color-border-child: #00fabe;
275
+ /* The color of the navigation section divider. */
276
+ $kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
277
+ /* Navigation link and icon color. */
278
+ $kui-navigation-color-text: #bee2ff;
279
+ /* Navigation link and icon focus-visible color. */
280
+ $kui-navigation-color-text-focus: #ffffff;
281
+ /* Navigation link and icon hover color. */
282
+ $kui-navigation-color-text-hover: #eefaff;
283
+ /* Navigation link and icon selected color. */
284
+ $kui-navigation-color-text-selected: #00fabe;
285
+ /* The box-shadow for a focus-visible navigation link. */
286
+ $kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
287
+ /* The left box-shadow for an active child navigation link. */
288
+ $kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
289
+ /* Navigation link focus-visible box-shadow. */
290
+ $kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
267
291
  /* The standard monospace font family. */
268
292
  $kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
269
293
  /* The standard text font family. */
@@ -628,6 +652,30 @@ $tokens-map: (
628
652
  'kui-method-color-text-trace': #d60067;
629
653
  /* Strong text color for the TRACE method (pink.70). */
630
654
  'kui-method-color-text-trace-strong': #ad0053;
655
+ /* blue.100 */
656
+ 'kui-navigation-color-background': #000933;
657
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
662
+ 'kui-navigation-color-border-child': #00fabe;
663
+ /* The color of the navigation section divider. */
664
+ 'kui-navigation-color-border-divider': rgba(255, 255, 255, 0.24);
665
+ /* Navigation link and icon color. */
666
+ 'kui-navigation-color-text': #bee2ff;
667
+ /* Navigation link and icon focus-visible color. */
668
+ 'kui-navigation-color-text-focus': #ffffff;
669
+ /* Navigation link and icon hover color. */
670
+ 'kui-navigation-color-text-hover': #eefaff;
671
+ /* Navigation link and icon selected color. */
672
+ 'kui-navigation-color-text-selected': #00fabe;
673
+ /* The box-shadow for a focus-visible navigation link. */
674
+ 'kui-navigation-shadow-border': 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
675
+ /* The left box-shadow for an active child navigation link. */
676
+ 'kui-navigation-shadow-border-child': 4px 0 0 0 #00fabe inset;
677
+ /* Navigation link focus-visible box-shadow. */
678
+ 'kui-navigation-shadow-focus': 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
631
679
  /* The standard monospace font family. */
632
680
  'kui-font-family-code': 'JetBrains Mono', Consolas, monospace;
633
681
  /* The standard text font family. */
@@ -994,6 +1042,30 @@ $tokens-map: (
994
1042
  @kui-method-color-text-trace: #d60067;
995
1043
  /* Strong text color for the TRACE method (pink.70). */
996
1044
  @kui-method-color-text-trace-strong: #ad0053;
1045
+ /* blue.100 */
1046
+ @kui-navigation-color-background: #000933;
1047
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
1052
+ @kui-navigation-color-border-child: #00fabe;
1053
+ /* The color of the navigation section divider. */
1054
+ @kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
1055
+ /* Navigation link and icon color. */
1056
+ @kui-navigation-color-text: #bee2ff;
1057
+ /* Navigation link and icon focus-visible color. */
1058
+ @kui-navigation-color-text-focus: #ffffff;
1059
+ /* Navigation link and icon hover color. */
1060
+ @kui-navigation-color-text-hover: #eefaff;
1061
+ /* Navigation link and icon selected color. */
1062
+ @kui-navigation-color-text-selected: #00fabe;
1063
+ /* The box-shadow for a focus-visible navigation link. */
1064
+ @kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
1065
+ /* The left box-shadow for an active child navigation link. */
1066
+ @kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
1067
+ /* Navigation link focus-visible box-shadow. */
1068
+ @kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
997
1069
  /* The standard monospace font family. */
998
1070
  @kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
999
1071
  /* The standard text font family. */
@@ -1361,6 +1433,30 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1361
1433
  --kui-method-color-text-trace: #d60067;
1362
1434
  /* Strong text color for the TRACE method (pink.70). */
1363
1435
  --kui-method-color-text-trace-strong: #ad0053;
1436
+ /* blue.100 */
1437
+ --kui-navigation-color-background: #000933;
1438
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
1443
+ --kui-navigation-color-border-child: #00fabe;
1444
+ /* The color of the navigation section divider. */
1445
+ --kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24);
1446
+ /* Navigation link and icon color. */
1447
+ --kui-navigation-color-text: #bee2ff;
1448
+ /* Navigation link and icon focus-visible color. */
1449
+ --kui-navigation-color-text-focus: #ffffff;
1450
+ /* Navigation link and icon hover color. */
1451
+ --kui-navigation-color-text-hover: #eefaff;
1452
+ /* Navigation link and icon selected color. */
1453
+ --kui-navigation-color-text-selected: #00fabe;
1454
+ /* The box-shadow for a focus-visible navigation link. */
1455
+ --kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
1456
+ /* The left box-shadow for an active child navigation link. */
1457
+ --kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset;
1458
+ /* Navigation link focus-visible box-shadow. */
1459
+ --kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset;
1364
1460
  /* The standard monospace font family. */
1365
1461
  --kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
1366
1462
  /* The standard text font family. */
@@ -1726,6 +1822,30 @@ export const KUI_METHOD_COLOR_TEXT_PUT_STRONG = "#804400";
1726
1822
  export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067";
1727
1823
  /* Strong text color for the TRACE method (pink.70). */
1728
1824
  export const KUI_METHOD_COLOR_TEXT_TRACE_STRONG = "#ad0053";
1825
+ /* blue.100 */
1826
+ export const KUI_NAVIGATION_COLOR_BACKGROUND = "#000933";
1827
+ /* The background color of a selected navigation item. */
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
+ /* The border color for a selected child navigation item. */
1832
+ export const KUI_NAVIGATION_COLOR_BORDER_CHILD = "#00fabe";
1833
+ /* The color of the navigation section divider. */
1834
+ export const KUI_NAVIGATION_COLOR_BORDER_DIVIDER = "rgba(255, 255, 255, 0.24)";
1835
+ /* Navigation link and icon color. */
1836
+ export const KUI_NAVIGATION_COLOR_TEXT = "#bee2ff";
1837
+ /* Navigation link and icon focus-visible color. */
1838
+ export const KUI_NAVIGATION_COLOR_TEXT_FOCUS = "#ffffff";
1839
+ /* Navigation link and icon hover color. */
1840
+ export const KUI_NAVIGATION_COLOR_TEXT_HOVER = "#eefaff";
1841
+ /* Navigation link and icon selected color. */
1842
+ export const KUI_NAVIGATION_COLOR_TEXT_SELECTED = "#00fabe";
1843
+ /* The box-shadow for a focus-visible navigation link. */
1844
+ export const KUI_NAVIGATION_SHADOW_BORDER = "0 0 0 1px rgba(255, 255, 255, 0.12) inset";
1845
+ /* The left box-shadow for an active child navigation link. */
1846
+ export const KUI_NAVIGATION_SHADOW_BORDER_CHILD = "4px 0 0 0 #00fabe inset";
1847
+ /* Navigation link focus-visible box-shadow. */
1848
+ export const KUI_NAVIGATION_SHADOW_FOCUS = "0 0 0 1px rgba(255, 255, 255, 0.60) inset";
1729
1849
  /* The standard monospace font family. */
1730
1850
  export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace";
1731
1851
  /* The standard text font family. */
@@ -1968,6 +2088,18 @@ export const KUI_SPACE_AUTO = "auto";
1968
2088
  "kui_method_color_text_put_strong": "#804400",
1969
2089
  "kui_method_color_text_trace": "#d60067",
1970
2090
  "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",
1971
2103
  "kui_font_family_code": "'JetBrains Mono', Consolas, monospace",
1972
2104
  "kui_font_family_text": "'Inter', Roboto, Helvetica, sans-serif",
1973
2105
  "kui_font_size_10": "10px",
package/dist/tokens/css/custom-properties-list.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -266,6 +266,30 @@
266
266
  --kui-method-color-text-trace: initial;
267
267
  /* Strong text color for the TRACE method (pink.70). Default value: `#ad0053` */
268
268
  --kui-method-color-text-trace-strong: initial;
269
+ /* blue.100. Default value: `#000933` */
270
+ --kui-navigation-color-background: initial;
271
+ /* The background color of a selected navigation item. Default value: `rgba(255, 255, 255, 0.12)` */
272
+ --kui-navigation-color-background-selected: initial;
273
+ /* rgba(255, 255, 255, 0.12). Default value: `rgba(255, 255, 255, 0.12)` */
274
+ --kui-navigation-color-border: initial;
275
+ /* The border color for a selected child navigation item. Default value: `#00fabe` */
276
+ --kui-navigation-color-border-child: initial;
277
+ /* The color of the navigation section divider. Default value: `rgba(255, 255, 255, 0.24)` */
278
+ --kui-navigation-color-border-divider: initial;
279
+ /* Navigation link and icon color. Default value: `#bee2ff` */
280
+ --kui-navigation-color-text: initial;
281
+ /* Navigation link and icon focus-visible color. Default value: `#ffffff` */
282
+ --kui-navigation-color-text-focus: initial;
283
+ /* Navigation link and icon hover color. Default value: `#eefaff` */
284
+ --kui-navigation-color-text-hover: initial;
285
+ /* Navigation link and icon selected color. Default value: `#00fabe` */
286
+ --kui-navigation-color-text-selected: initial;
287
+ /* The box-shadow for a focus-visible navigation link. Default value: `0 0 0 1px rgba(255, 255, 255, 0.12) inset` */
288
+ --kui-navigation-shadow-border: initial;
289
+ /* The left box-shadow for an active child navigation link. Default value: `4px 0 0 0 #00fabe inset` */
290
+ --kui-navigation-shadow-border-child: initial;
291
+ /* Navigation link focus-visible box-shadow. Default value: `0 0 0 1px rgba(255, 255, 255, 0.60) inset` */
292
+ --kui-navigation-shadow-focus: initial;
269
293
  /* The standard monospace font family. Default value: `'JetBrains Mono', Consolas, monospace` */
270
294
  --kui-font-family-code: initial;
271
295
  /* The standard text font family. Default value: `'Inter', Roboto, Helvetica, sans-serif` */
package/dist/tokens/css/custom-properties.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -130,6 +130,18 @@
130
130
  --kui-method-color-text-put-strong: #804400; /* Strong text color for the PUT method (yellow.70). */
131
131
  --kui-method-color-text-trace: #d60067; /* Text color for the TRACE method (pink.60). */
132
132
  --kui-method-color-text-trace-strong: #ad0053; /* Strong text color for the TRACE method (pink.70). */
133
+ --kui-navigation-color-background: #000933; /* blue.100 */
134
+ --kui-navigation-color-background-selected: rgba(255, 255, 255, 0.12); /* The background color of a selected navigation item. */
135
+ --kui-navigation-color-border: rgba(255, 255, 255, 0.12); /* rgba(255, 255, 255, 0.12) */
136
+ --kui-navigation-color-border-child: #00fabe; /* The border color for a selected child navigation item. */
137
+ --kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24); /* The color of the navigation section divider. */
138
+ --kui-navigation-color-text: #bee2ff; /* Navigation link and icon color. */
139
+ --kui-navigation-color-text-focus: #ffffff; /* Navigation link and icon focus-visible color. */
140
+ --kui-navigation-color-text-hover: #eefaff; /* Navigation link and icon hover color. */
141
+ --kui-navigation-color-text-selected: #00fabe; /* Navigation link and icon selected color. */
142
+ --kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset; /* The box-shadow for a focus-visible navigation link. */
143
+ --kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset; /* The left box-shadow for an active child navigation link. */
144
+ --kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset; /* Navigation link focus-visible box-shadow. */
133
145
  --kui-font-family-code: 'JetBrains Mono', Consolas, monospace; /* The standard monospace font family. */
134
146
  --kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif; /* The standard text font family. */
135
147
  --kui-font-size-10: 10px;
package/dist/tokens/js/cjs/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -234,6 +234,32 @@ declare const tokens: {
234
234
  }
235
235
  }
236
236
  },
237
+ "navigation": {
238
+ "color": {
239
+ "background": {
240
+ "_": DesignToken,
241
+ "selected": DesignToken
242
+ },
243
+ "border": {
244
+ "_": DesignToken,
245
+ "child": DesignToken,
246
+ "divider": DesignToken
247
+ },
248
+ "text": {
249
+ "_": DesignToken,
250
+ "focus": DesignToken,
251
+ "hover": DesignToken,
252
+ "selected": DesignToken
253
+ }
254
+ },
255
+ "shadow": {
256
+ "border": {
257
+ "_": DesignToken,
258
+ "child": DesignToken
259
+ },
260
+ "focus": DesignToken
261
+ }
262
+ },
237
263
  "font": {
238
264
  "family": {
239
265
  "code": DesignToken,
package/dist/tokens/js/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -130,6 +130,18 @@ module.exports = {
130
130
  "KUI_METHOD_COLOR_TEXT_PUT_STRONG": "#804400",
131
131
  "KUI_METHOD_COLOR_TEXT_TRACE": "#d60067",
132
132
  "KUI_METHOD_COLOR_TEXT_TRACE_STRONG": "#ad0053",
133
+ "KUI_NAVIGATION_COLOR_BACKGROUND": "#000933",
134
+ "KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED": "rgba(255, 255, 255, 0.12)",
135
+ "KUI_NAVIGATION_COLOR_BORDER": "rgba(255, 255, 255, 0.12)",
136
+ "KUI_NAVIGATION_COLOR_BORDER_CHILD": "#00fabe",
137
+ "KUI_NAVIGATION_COLOR_BORDER_DIVIDER": "rgba(255, 255, 255, 0.24)",
138
+ "KUI_NAVIGATION_COLOR_TEXT": "#bee2ff",
139
+ "KUI_NAVIGATION_COLOR_TEXT_FOCUS": "#ffffff",
140
+ "KUI_NAVIGATION_COLOR_TEXT_HOVER": "#eefaff",
141
+ "KUI_NAVIGATION_COLOR_TEXT_SELECTED": "#00fabe",
142
+ "KUI_NAVIGATION_SHADOW_BORDER": "0 0 0 1px rgba(255, 255, 255, 0.12) inset",
143
+ "KUI_NAVIGATION_SHADOW_BORDER_CHILD": "4px 0 0 0 #00fabe inset",
144
+ "KUI_NAVIGATION_SHADOW_FOCUS": "0 0 0 1px rgba(255, 255, 255, 0.60) inset",
133
145
  "KUI_FONT_FAMILY_CODE": "'JetBrains Mono', Consolas, monospace",
134
146
  "KUI_FONT_FAMILY_TEXT": "'Inter', Roboto, Helvetica, sans-serif",
135
147
  "KUI_FONT_SIZE_10": "10px",
package/dist/tokens/js/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -251,6 +251,30 @@ export const KUI_METHOD_COLOR_TEXT_PUT_STRONG : "#804400";
251
251
  export const KUI_METHOD_COLOR_TEXT_TRACE : "#d60067";
252
252
  /** Strong text color for the TRACE method (pink.70). */
253
253
  export const KUI_METHOD_COLOR_TEXT_TRACE_STRONG : "#ad0053";
254
+ /** blue.100 */
255
+ export const KUI_NAVIGATION_COLOR_BACKGROUND : "#000933";
256
+ /** The background color of a selected navigation item. */
257
+ export const KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED : "rgba(255, 255, 255, 0.12)";
258
+ /** rgba(255, 255, 255, 0.12) */
259
+ export const KUI_NAVIGATION_COLOR_BORDER : "rgba(255, 255, 255, 0.12)";
260
+ /** The border color for a selected child navigation item. */
261
+ export const KUI_NAVIGATION_COLOR_BORDER_CHILD : "#00fabe";
262
+ /** The color of the navigation section divider. */
263
+ export const KUI_NAVIGATION_COLOR_BORDER_DIVIDER : "rgba(255, 255, 255, 0.24)";
264
+ /** Navigation link and icon color. */
265
+ export const KUI_NAVIGATION_COLOR_TEXT : "#bee2ff";
266
+ /** Navigation link and icon focus-visible color. */
267
+ export const KUI_NAVIGATION_COLOR_TEXT_FOCUS : "#ffffff";
268
+ /** Navigation link and icon hover color. */
269
+ export const KUI_NAVIGATION_COLOR_TEXT_HOVER : "#eefaff";
270
+ /** Navigation link and icon selected color. */
271
+ export const KUI_NAVIGATION_COLOR_TEXT_SELECTED : "#00fabe";
272
+ /** The box-shadow for a focus-visible navigation link. */
273
+ export const KUI_NAVIGATION_SHADOW_BORDER : "0 0 0 1px rgba(255, 255, 255, 0.12) inset";
274
+ /** The left box-shadow for an active child navigation link. */
275
+ export const KUI_NAVIGATION_SHADOW_BORDER_CHILD : "4px 0 0 0 #00fabe inset";
276
+ /** Navigation link focus-visible box-shadow. */
277
+ export const KUI_NAVIGATION_SHADOW_FOCUS : "0 0 0 1px rgba(255, 255, 255, 0.60) inset";
254
278
  /** The standard monospace font family. */
255
279
  export const KUI_FONT_FAMILY_CODE : "'JetBrains Mono', Consolas, monospace";
256
280
  /** The standard text font family. */
package/dist/tokens/js/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -129,6 +129,18 @@ export const KUI_METHOD_COLOR_TEXT_PUT = "#995c00"; // Text color for the PUT me
129
129
  export const KUI_METHOD_COLOR_TEXT_PUT_STRONG = "#804400"; // Strong text color for the PUT method (yellow.70).
130
130
  export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067"; // Text color for the TRACE method (pink.60).
131
131
  export const KUI_METHOD_COLOR_TEXT_TRACE_STRONG = "#ad0053"; // Strong text color for the TRACE method (pink.70).
132
+ export const KUI_NAVIGATION_COLOR_BACKGROUND = "#000933"; // blue.100
133
+ export const KUI_NAVIGATION_COLOR_BACKGROUND_SELECTED = "rgba(255, 255, 255, 0.12)"; // The background color of a selected navigation item.
134
+ export const KUI_NAVIGATION_COLOR_BORDER = "rgba(255, 255, 255, 0.12)"; // rgba(255, 255, 255, 0.12)
135
+ export const KUI_NAVIGATION_COLOR_BORDER_CHILD = "#00fabe"; // The border color for a selected child navigation item.
136
+ export const KUI_NAVIGATION_COLOR_BORDER_DIVIDER = "rgba(255, 255, 255, 0.24)"; // The color of the navigation section divider.
137
+ export const KUI_NAVIGATION_COLOR_TEXT = "#bee2ff"; // Navigation link and icon color.
138
+ export const KUI_NAVIGATION_COLOR_TEXT_FOCUS = "#ffffff"; // Navigation link and icon focus-visible color.
139
+ export const KUI_NAVIGATION_COLOR_TEXT_HOVER = "#eefaff"; // Navigation link and icon hover color.
140
+ export const KUI_NAVIGATION_COLOR_TEXT_SELECTED = "#00fabe"; // Navigation link and icon selected color.
141
+ export const KUI_NAVIGATION_SHADOW_BORDER = "0 0 0 1px rgba(255, 255, 255, 0.12) inset"; // The box-shadow for a focus-visible navigation link.
142
+ export const KUI_NAVIGATION_SHADOW_BORDER_CHILD = "4px 0 0 0 #00fabe inset"; // The left box-shadow for an active child navigation link.
143
+ export const KUI_NAVIGATION_SHADOW_FOCUS = "0 0 0 1px rgba(255, 255, 255, 0.60) inset"; // Navigation link focus-visible box-shadow.
132
144
  export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace"; // The standard monospace font family.
133
145
  export const KUI_FONT_FAMILY_TEXT = "'Inter', Roboto, Helvetica, sans-serif"; // The standard text font family.
134
146
  export const KUI_FONT_SIZE_10 = "10px";
package/dist/tokens/js/tokens.json CHANGED
@@ -121,6 +121,18 @@
121
121
  "kui_method_color_text_put_strong": "#804400",
122
122
  "kui_method_color_text_trace": "#d60067",
123
123
  "kui_method_color_text_trace_strong": "#ad0053",
124
+ "kui_navigation_color_background": "#000933",
125
+ "kui_navigation_color_background_selected": "rgba(255, 255, 255, 0.12)",
126
+ "kui_navigation_color_border": "rgba(255, 255, 255, 0.12)",
127
+ "kui_navigation_color_border_child": "#00fabe",
128
+ "kui_navigation_color_border_divider": "rgba(255, 255, 255, 0.24)",
129
+ "kui_navigation_color_text": "#bee2ff",
130
+ "kui_navigation_color_text_focus": "#ffffff",
131
+ "kui_navigation_color_text_hover": "#eefaff",
132
+ "kui_navigation_color_text_selected": "#00fabe",
133
+ "kui_navigation_shadow_border": "0 0 0 1px rgba(255, 255, 255, 0.12) inset",
134
+ "kui_navigation_shadow_border_child": "4px 0 0 0 #00fabe inset",
135
+ "kui_navigation_shadow_focus": "0 0 0 1px rgba(255, 255, 255, 0.60) inset",
124
136
  "kui_font_family_code": "'JetBrains Mono', Consolas, monospace",
125
137
  "kui_font_family_text": "'Inter', Roboto, Helvetica, sans-serif",
126
138
  "kui_font_size_10": "10px",
package/dist/tokens/less/variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ // Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  //
5
5
  // Kong Design Tokens
6
6
  // GitHub: https://github.com/Kong/design-tokens
@@ -128,6 +128,18 @@
128
128
  @kui-method-color-text-put-strong: #804400; // Strong text color for the PUT method (yellow.70).
129
129
  @kui-method-color-text-trace: #d60067; // Text color for the TRACE method (pink.60).
130
130
  @kui-method-color-text-trace-strong: #ad0053; // Strong text color for the TRACE method (pink.70).
131
+ @kui-navigation-color-background: #000933; // blue.100
132
+ @kui-navigation-color-background-selected: rgba(255, 255, 255, 0.12); // The background color of a selected navigation item.
133
+ @kui-navigation-color-border: rgba(255, 255, 255, 0.12); // rgba(255, 255, 255, 0.12)
134
+ @kui-navigation-color-border-child: #00fabe; // The border color for a selected child navigation item.
135
+ @kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24); // The color of the navigation section divider.
136
+ @kui-navigation-color-text: #bee2ff; // Navigation link and icon color.
137
+ @kui-navigation-color-text-focus: #ffffff; // Navigation link and icon focus-visible color.
138
+ @kui-navigation-color-text-hover: #eefaff; // Navigation link and icon hover color.
139
+ @kui-navigation-color-text-selected: #00fabe; // Navigation link and icon selected color.
140
+ @kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset; // The box-shadow for a focus-visible navigation link.
141
+ @kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset; // The left box-shadow for an active child navigation link.
142
+ @kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset; // Navigation link focus-visible box-shadow.
131
143
  @kui-font-family-code: 'JetBrains Mono', Consolas, monospace; // The standard monospace font family.
132
144
  @kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif; // The standard text font family.
133
145
  @kui-font-size-10: 10px;
package/dist/tokens/scss/_map.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
4
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
5
5
  *
6
6
  * Kong Design Tokens
7
7
  * GitHub: https://github.com/Kong/design-tokens
@@ -253,6 +253,30 @@ $tokens-map: (
253
253
  'kui-method-color-text-trace': #d60067,
254
254
  // Strong text color for the TRACE method (pink.70).
255
255
  'kui-method-color-text-trace-strong': #ad0053,
256
+ // blue.100
257
+ 'kui-navigation-color-background': #000933,
258
+ // The background color of a selected navigation item.
259
+ 'kui-navigation-color-background-selected': rgba(255, 255, 255, 0.12),
260
+ // rgba(255, 255, 255, 0.12)
261
+ 'kui-navigation-color-border': rgba(255, 255, 255, 0.12),
262
+ // The border color for a selected child navigation item.
263
+ 'kui-navigation-color-border-child': #00fabe,
264
+ // The color of the navigation section divider.
265
+ 'kui-navigation-color-border-divider': rgba(255, 255, 255, 0.24),
266
+ // Navigation link and icon color.
267
+ 'kui-navigation-color-text': #bee2ff,
268
+ // Navigation link and icon focus-visible color.
269
+ 'kui-navigation-color-text-focus': #ffffff,
270
+ // Navigation link and icon hover color.
271
+ 'kui-navigation-color-text-hover': #eefaff,
272
+ // Navigation link and icon selected color.
273
+ 'kui-navigation-color-text-selected': #00fabe,
274
+ // The box-shadow for a focus-visible navigation link.
275
+ 'kui-navigation-shadow-border': 0 0 0 1px rgba(255, 255, 255, 0.12) inset,
276
+ // The left box-shadow for an active child navigation link.
277
+ 'kui-navigation-shadow-border-child': 4px 0 0 0 #00fabe inset,
278
+ // Navigation link focus-visible box-shadow.
279
+ 'kui-navigation-shadow-focus': 0 0 0 1px rgba(255, 255, 255, 0.60) inset,
256
280
  // The standard monospace font family.
257
281
  'kui-font-family-code': 'JetBrains Mono', Consolas, monospace,
258
282
  // The standard text font family.
package/dist/tokens/scss/_mixins.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ * Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  *
5
5
  * Kong Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens
@@ -142,6 +142,18 @@
142
142
  --kui-method-color-text-put-strong: #804400; /* Strong text color for the PUT method (yellow.70). */
143
143
  --kui-method-color-text-trace: #d60067; /* Text color for the TRACE method (pink.60). */
144
144
  --kui-method-color-text-trace-strong: #ad0053; /* Strong text color for the TRACE method (pink.70). */
145
+ --kui-navigation-color-background: #000933; /* blue.100 */
146
+ --kui-navigation-color-background-selected: rgba(255, 255, 255, 0.12); /* The background color of a selected navigation item. */
147
+ --kui-navigation-color-border: rgba(255, 255, 255, 0.12); /* rgba(255, 255, 255, 0.12) */
148
+ --kui-navigation-color-border-child: #00fabe; /* The border color for a selected child navigation item. */
149
+ --kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24); /* The color of the navigation section divider. */
150
+ --kui-navigation-color-text: #bee2ff; /* Navigation link and icon color. */
151
+ --kui-navigation-color-text-focus: #ffffff; /* Navigation link and icon focus-visible color. */
152
+ --kui-navigation-color-text-hover: #eefaff; /* Navigation link and icon hover color. */
153
+ --kui-navigation-color-text-selected: #00fabe; /* Navigation link and icon selected color. */
154
+ --kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset; /* The box-shadow for a focus-visible navigation link. */
155
+ --kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset; /* The left box-shadow for an active child navigation link. */
156
+ --kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset; /* Navigation link focus-visible box-shadow. */
145
157
  --kui-font-family-code: 'JetBrains Mono', Consolas, monospace; /* The standard monospace font family. */
146
158
  --kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif; /* The standard text font family. */
147
159
  --kui-font-size-10: 10px;
package/dist/tokens/scss/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 28 Nov 2023 17:27:08 GMT
3
+ // Generated on Wed, 29 Nov 2023 21:27:51 GMT
4
4
  //
5
5
  // Kong Design Tokens
6
6
  // GitHub: https://github.com/Kong/design-tokens
@@ -128,6 +128,18 @@ $kui-method-color-text-put: #995c00 !default; // Text color for the PUT method (
128
128
  $kui-method-color-text-put-strong: #804400 !default; // Strong text color for the PUT method (yellow.70).
129
129
  $kui-method-color-text-trace: #d60067 !default; // Text color for the TRACE method (pink.60).
130
130
  $kui-method-color-text-trace-strong: #ad0053 !default; // Strong text color for the TRACE method (pink.70).
131
+ $kui-navigation-color-background: #000933 !default; // blue.100
132
+ $kui-navigation-color-background-selected: rgba(255, 255, 255, 0.12) !default; // The background color of a selected navigation item.
133
+ $kui-navigation-color-border: rgba(255, 255, 255, 0.12) !default; // rgba(255, 255, 255, 0.12)
134
+ $kui-navigation-color-border-child: #00fabe !default; // The border color for a selected child navigation item.
135
+ $kui-navigation-color-border-divider: rgba(255, 255, 255, 0.24) !default; // The color of the navigation section divider.
136
+ $kui-navigation-color-text: #bee2ff !default; // Navigation link and icon color.
137
+ $kui-navigation-color-text-focus: #ffffff !default; // Navigation link and icon focus-visible color.
138
+ $kui-navigation-color-text-hover: #eefaff !default; // Navigation link and icon hover color.
139
+ $kui-navigation-color-text-selected: #00fabe !default; // Navigation link and icon selected color.
140
+ $kui-navigation-shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.12) inset !default; // The box-shadow for a focus-visible navigation link.
141
+ $kui-navigation-shadow-border-child: 4px 0 0 0 #00fabe inset !default; // The left box-shadow for an active child navigation link.
142
+ $kui-navigation-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.60) inset !default; // Navigation link focus-visible box-shadow.
131
143
  $kui-font-family-code: 'JetBrains Mono', Consolas, monospace !default; // The standard monospace font family.
132
144
  $kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif !default; // The standard text font family.
133
145
  $kui-font-size-10: 10px !default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kong/design-tokens",
3
- "version": "1.11.12",
3
+ "version": "1.12.0",
4
4
  "description": "Kong UI Design Tokens and style dictionary",
5
5
  "scripts": {
6
6
  "build": "yarn build:clean && style-dictionary build && yarn copy:tokens-doc && yarn copy:stylelint-plugin",