@kong/design-tokens 3.2.10 → 3.3.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 (18) hide show
  1. package/TOKENS.md +33 -33
  2. package/dist/themes/classic-day.cjs +3 -3
  3. package/dist/themes/classic-day.css +3 -3
  4. package/dist/themes/classic-day.mjs +3 -3
  5. package/dist/tokens/README.md +33 -33
  6. package/dist/tokens/css/custom-properties-list.css +3 -3
  7. package/dist/tokens/css/custom-properties.css +4 -4
  8. package/dist/tokens/js/cjs/index.d.ts +1 -1
  9. package/dist/tokens/js/cjs/index.js +4 -4
  10. package/dist/tokens/js/index.d.ts +7 -7
  11. package/dist/tokens/js/index.mjs +4 -4
  12. package/dist/tokens/js/tokens.json +3 -3
  13. package/dist/tokens/scss/_map.scss +4 -4
  14. package/dist/tokens/scss/_mixins.scss +3 -3
  15. package/dist/tokens/scss/_variables.scss +4 -4
  16. package/dist/tokens/themeable-tokens/index.cjs +6 -6
  17. package/dist/tokens/themeable-tokens/index.mjs +6 -6
  18. package/package.json +2 -2
package/TOKENS.md CHANGED
@@ -59,8 +59,8 @@ $kui-color-background-info-weak: #5f9aff;
59
59
  $kui-color-background-info-weaker: #bee2ff;
60
60
  /* Weakest background color for info elements (blue.10). */
61
61
  $kui-color-background-info-weakest: #eefaff;
62
- /* Inverse background color for containers (blue.100) */
63
- $kui-color-background-inverse: #000933;
62
+ /* Inverse background color for containers (gray.100) */
63
+ $kui-color-background-inverse: #0d0e14;
64
64
  /* Background color for neutral elements (gray.60). */
65
65
  $kui-color-background-neutral: #6c7489;
66
66
  /* Strong background color for neutral elements (gray.70). */
@@ -75,8 +75,8 @@ $kui-color-background-neutral-weak: #afb7c5;
75
75
  $kui-color-background-neutral-weaker: #e0e4ea;
76
76
  /* Weakest background color for neutral elements (gray.10). */
77
77
  $kui-color-background-neutral-weakest: #f9fafb;
78
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
79
- $kui-color-background-overlay: rgba(0, 9, 51, 0.6);
78
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
79
+ $kui-color-background-overlay: rgba(13, 14, 20, 0.6);
80
80
  /* Background color for primary actions or messages (blue.60). */
81
81
  $kui-color-background-primary: #0044f4;
82
82
  /* Strong background color for primary actions or messages (blue.70). */
@@ -177,8 +177,8 @@ $kui-color-border-primary-weakest: #eefaff;
177
177
  $kui-color-border-transparent: rgba(0, 0, 0, 0);
178
178
  /* Default brand color for the theme. */
179
179
  $kui-color-brand: #0044f4;
180
- /* Default text color (blue.100). */
181
- $kui-color-text: #000933;
180
+ /* Default text color (gray.100). */
181
+ $kui-color-text: #0d0e14;
182
182
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
183
183
  $kui-color-text-accent: #0044f4;
184
184
  /* Text color for danger actions or messages (red.60). */
@@ -743,8 +743,8 @@ $tokens-map: (
743
743
  'kui-color-background-info-weaker': #bee2ff,
744
744
  /* Weakest background color for info elements (blue.10). */
745
745
  'kui-color-background-info-weakest': #eefaff,
746
- /* Inverse background color for containers (blue.100) */
747
- 'kui-color-background-inverse': #000933,
746
+ /* Inverse background color for containers (gray.100) */
747
+ 'kui-color-background-inverse': #0d0e14,
748
748
  /* Background color for neutral elements (gray.60). */
749
749
  'kui-color-background-neutral': #6c7489,
750
750
  /* Strong background color for neutral elements (gray.70). */
@@ -759,8 +759,8 @@ $tokens-map: (
759
759
  'kui-color-background-neutral-weaker': #e0e4ea,
760
760
  /* Weakest background color for neutral elements (gray.10). */
761
761
  'kui-color-background-neutral-weakest': #f9fafb,
762
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
763
- 'kui-color-background-overlay': rgba(0, 9, 51, 0.6),
762
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
763
+ 'kui-color-background-overlay': rgba(13, 14, 20, 0.6),
764
764
  /* Background color for primary actions or messages (blue.60). */
765
765
  'kui-color-background-primary': #0044f4,
766
766
  /* Strong background color for primary actions or messages (blue.70). */
@@ -861,8 +861,8 @@ $tokens-map: (
861
861
  'kui-color-border-transparent': rgba(0, 0, 0, 0),
862
862
  /* Default brand color for the theme. */
863
863
  'kui-color-brand': #0044f4,
864
- /* Default text color (blue.100). */
865
- 'kui-color-text': #000933,
864
+ /* Default text color (gray.100). */
865
+ 'kui-color-text': #0d0e14,
866
866
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
867
867
  'kui-color-text-accent': #0044f4,
868
868
  /* Text color for danger actions or messages (red.60). */
@@ -1431,8 +1431,8 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1431
1431
  --kui-color-background-info-weaker: #bee2ff;
1432
1432
  /* Weakest background color for info elements (blue.10). */
1433
1433
  --kui-color-background-info-weakest: #eefaff;
1434
- /* Inverse background color for containers (blue.100) */
1435
- --kui-color-background-inverse: #000933;
1434
+ /* Inverse background color for containers (gray.100) */
1435
+ --kui-color-background-inverse: #0d0e14;
1436
1436
  /* Background color for neutral elements (gray.60). */
1437
1437
  --kui-color-background-neutral: #6c7489;
1438
1438
  /* Strong background color for neutral elements (gray.70). */
@@ -1447,8 +1447,8 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1447
1447
  --kui-color-background-neutral-weaker: #e0e4ea;
1448
1448
  /* Weakest background color for neutral elements (gray.10). */
1449
1449
  --kui-color-background-neutral-weakest: #f9fafb;
1450
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
1451
- --kui-color-background-overlay: rgba(0, 9, 51, 0.6);
1450
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
1451
+ --kui-color-background-overlay: rgba(13, 14, 20, 0.6);
1452
1452
  /* Background color for primary actions or messages (blue.60). */
1453
1453
  --kui-color-background-primary: #0044f4;
1454
1454
  /* Strong background color for primary actions or messages (blue.70). */
@@ -1549,8 +1549,8 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1549
1549
  --kui-color-border-transparent: rgba(0, 0, 0, 0);
1550
1550
  /* Default brand color for the theme. */
1551
1551
  --kui-color-brand: #0044f4;
1552
- /* Default text color (blue.100). */
1553
- --kui-color-text: #000933;
1552
+ /* Default text color (gray.100). */
1553
+ --kui-color-text: #0d0e14;
1554
1554
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
1555
1555
  --kui-color-text-accent: #0044f4;
1556
1556
  /* Text color for danger actions or messages (red.60). */
@@ -3285,8 +3285,8 @@ export const KUI_COLOR_BACKGROUND_INFO_WEAK = "#5f9aff";
3285
3285
  export const KUI_COLOR_BACKGROUND_INFO_WEAKER = "#bee2ff";
3286
3286
  /* Weakest background color for info elements (blue.10). */
3287
3287
  export const KUI_COLOR_BACKGROUND_INFO_WEAKEST = "#eefaff";
3288
- /* Inverse background color for containers (blue.100) */
3289
- export const KUI_COLOR_BACKGROUND_INVERSE = "#000933";
3288
+ /* Inverse background color for containers (gray.100) */
3289
+ export const KUI_COLOR_BACKGROUND_INVERSE = "#0d0e14";
3290
3290
  /* Background color for neutral elements (gray.60). */
3291
3291
  export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489";
3292
3292
  /* Strong background color for neutral elements (gray.70). */
@@ -3301,8 +3301,8 @@ export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK = "#afb7c5";
3301
3301
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER = "#e0e4ea";
3302
3302
  /* Weakest background color for neutral elements (gray.10). */
3303
3303
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST = "#f9fafb";
3304
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
3305
- export const KUI_COLOR_BACKGROUND_OVERLAY = "rgba(0, 9, 51, 0.6)";
3304
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
3305
+ export const KUI_COLOR_BACKGROUND_OVERLAY = "rgba(13, 14, 20, 0.6)";
3306
3306
  /* Background color for primary actions or messages (blue.60). */
3307
3307
  export const KUI_COLOR_BACKGROUND_PRIMARY = "#0044f4";
3308
3308
  /* Strong background color for primary actions or messages (blue.70). */
@@ -3403,8 +3403,8 @@ export const KUI_COLOR_BORDER_PRIMARY_WEAKEST = "#eefaff";
3403
3403
  export const KUI_COLOR_BORDER_TRANSPARENT = "rgba(0, 0, 0, 0)";
3404
3404
  /* Default brand color for the theme. */
3405
3405
  export const KUI_COLOR_BRAND = "#0044f4";
3406
- /* Default text color (blue.100). */
3407
- export const KUI_COLOR_TEXT = "#000933";
3406
+ /* Default text color (gray.100). */
3407
+ export const KUI_COLOR_TEXT = "#0d0e14";
3408
3408
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
3409
3409
  export const KUI_COLOR_TEXT_ACCENT = "#0044f4";
3410
3410
  /* Text color for danger actions or messages (red.60). */
@@ -5217,9 +5217,9 @@ export const KUI_THEMEABLE_TOKENS = [
5217
5217
  },
5218
5218
  {
5219
5219
  name: "--kui-color-background-inverse",
5220
- description: "Inverse background color for containers (blue.100)",
5220
+ description: "Inverse background color for containers (gray.100)",
5221
5221
  category: "color",
5222
- value: "#000933",
5222
+ value: "#0d0e14",
5223
5223
  },
5224
5224
  {
5225
5225
  name: "--kui-color-background-neutral",
@@ -5265,9 +5265,9 @@ export const KUI_THEMEABLE_TOKENS = [
5265
5265
  },
5266
5266
  {
5267
5267
  name: "--kui-color-background-overlay",
5268
- description: "Overlay background color (rgba(0, 9, 51, 0.6))",
5268
+ description: "Overlay background color (rgba(13, 14, 20, 0.6))",
5269
5269
  category: "color",
5270
- value: "rgba(0, 9, 51, 0.6)",
5270
+ value: "rgba(13, 14, 20, 0.6)",
5271
5271
  },
5272
5272
  {
5273
5273
  name: "--kui-color-background-primary",
@@ -5571,9 +5571,9 @@ export const KUI_THEMEABLE_TOKENS = [
5571
5571
  },
5572
5572
  {
5573
5573
  name: "--kui-color-text",
5574
- description: "Default text color (blue.100).",
5574
+ description: "Default text color (gray.100).",
5575
5575
  category: "color",
5576
- value: "#000933",
5576
+ value: "#0d0e14",
5577
5577
  },
5578
5578
  {
5579
5579
  name: "--kui-color-text-accent",
@@ -9478,7 +9478,7 @@ export const KUI_THEMEABLE_TOKENS = [
9478
9478
  "kui_color_background_info_weak": "#5f9aff",
9479
9479
  "kui_color_background_info_weaker": "#bee2ff",
9480
9480
  "kui_color_background_info_weakest": "#eefaff",
9481
- "kui_color_background_inverse": "#000933",
9481
+ "kui_color_background_inverse": "#0d0e14",
9482
9482
  "kui_color_background_neutral": "#6c7489",
9483
9483
  "kui_color_background_neutral_strong": "#52596e",
9484
9484
  "kui_color_background_neutral_stronger": "#3a3f51",
@@ -9486,7 +9486,7 @@ export const KUI_THEMEABLE_TOKENS = [
9486
9486
  "kui_color_background_neutral_weak": "#afb7c5",
9487
9487
  "kui_color_background_neutral_weaker": "#e0e4ea",
9488
9488
  "kui_color_background_neutral_weakest": "#f9fafb",
9489
- "kui_color_background_overlay": "rgba(0, 9, 51, 0.6)",
9489
+ "kui_color_background_overlay": "rgba(13, 14, 20, 0.6)",
9490
9490
  "kui_color_background_primary": "#0044f4",
9491
9491
  "kui_color_background_primary_strong": "#0030cc",
9492
9492
  "kui_color_background_primary_stronger": "#002099",
@@ -9537,7 +9537,7 @@ export const KUI_THEMEABLE_TOKENS = [
9537
9537
  "kui_color_border_primary_weakest": "#eefaff",
9538
9538
  "kui_color_border_transparent": "rgba(0, 0, 0, 0)",
9539
9539
  "kui_color_brand": "#0044f4",
9540
- "kui_color_text": "#000933",
9540
+ "kui_color_text": "#0d0e14",
9541
9541
  "kui_color_text_accent": "#0044f4",
9542
9542
  "kui_color_text_danger": "#d60027",
9543
9543
  "kui_color_text_danger_strong": "#ad000e",
package/dist/themes/classic-day.cjs CHANGED
@@ -37,7 +37,7 @@ const classicDay = {
37
37
  '--kui-color-background-info-weak': "#5F9AFF",
38
38
  '--kui-color-background-info-weaker': "#BEE2FF",
39
39
  '--kui-color-background-info-weakest': "#EEFAFF",
40
- '--kui-color-background-inverse': "#000933",
40
+ '--kui-color-background-inverse': "#0D0E14",
41
41
  '--kui-color-background-neutral': "#6C7489",
42
42
  '--kui-color-background-neutral-strong': "#52596E",
43
43
  '--kui-color-background-neutral-stronger': "#3A3F51",
@@ -45,7 +45,7 @@ const classicDay = {
45
45
  '--kui-color-background-neutral-weak': "#AFB7C5",
46
46
  '--kui-color-background-neutral-weaker': "#E0E4EA",
47
47
  '--kui-color-background-neutral-weakest': "#F9FAFB",
48
- '--kui-color-background-overlay': "rgba(0, 9, 51, 0.6)",
48
+ '--kui-color-background-overlay': "rgba(13, 14, 20, 0.6)",
49
49
  '--kui-color-background-primary': "#0044F4",
50
50
  '--kui-color-background-primary-strong': "#0030CC",
51
51
  '--kui-color-background-primary-stronger': "#002099",
@@ -96,7 +96,7 @@ const classicDay = {
96
96
  '--kui-color-border-primary-weakest': "#EEFAFF",
97
97
  '--kui-color-border-transparent': "transparent",
98
98
  '--kui-color-brand': "#0044F4",
99
- '--kui-color-text': "#000933",
99
+ '--kui-color-text': "#0D0E14",
100
100
  '--kui-color-text-accent': "#0044F4",
101
101
  '--kui-color-text-danger': "#D60027",
102
102
  '--kui-color-text-danger-strong': "#AD000E",
package/dist/themes/classic-day.css CHANGED
@@ -37,7 +37,7 @@
37
37
  --kui-color-background-info-weak: #5F9AFF;
38
38
  --kui-color-background-info-weaker: #BEE2FF;
39
39
  --kui-color-background-info-weakest: #EEFAFF;
40
- --kui-color-background-inverse: #000933;
40
+ --kui-color-background-inverse: #0D0E14;
41
41
  --kui-color-background-neutral: #6C7489;
42
42
  --kui-color-background-neutral-strong: #52596E;
43
43
  --kui-color-background-neutral-stronger: #3A3F51;
@@ -45,7 +45,7 @@
45
45
  --kui-color-background-neutral-weak: #AFB7C5;
46
46
  --kui-color-background-neutral-weaker: #E0E4EA;
47
47
  --kui-color-background-neutral-weakest: #F9FAFB;
48
- --kui-color-background-overlay: rgba(0, 9, 51, 0.6);
48
+ --kui-color-background-overlay: rgba(13, 14, 20, 0.6);
49
49
  --kui-color-background-primary: #0044F4;
50
50
  --kui-color-background-primary-strong: #0030CC;
51
51
  --kui-color-background-primary-stronger: #002099;
@@ -96,7 +96,7 @@
96
96
  --kui-color-border-primary-weakest: #EEFAFF;
97
97
  --kui-color-border-transparent: transparent;
98
98
  --kui-color-brand: #0044F4;
99
- --kui-color-text: #000933;
99
+ --kui-color-text: #0D0E14;
100
100
  --kui-color-text-accent: #0044F4;
101
101
  --kui-color-text-danger: #D60027;
102
102
  --kui-color-text-danger-strong: #AD000E;
package/dist/themes/classic-day.mjs CHANGED
@@ -36,7 +36,7 @@ export const classicDay = {
36
36
  '--kui-color-background-info-weak': "#5F9AFF",
37
37
  '--kui-color-background-info-weaker': "#BEE2FF",
38
38
  '--kui-color-background-info-weakest': "#EEFAFF",
39
- '--kui-color-background-inverse': "#000933",
39
+ '--kui-color-background-inverse': "#0D0E14",
40
40
  '--kui-color-background-neutral': "#6C7489",
41
41
  '--kui-color-background-neutral-strong': "#52596E",
42
42
  '--kui-color-background-neutral-stronger': "#3A3F51",
@@ -44,7 +44,7 @@ export const classicDay = {
44
44
  '--kui-color-background-neutral-weak': "#AFB7C5",
45
45
  '--kui-color-background-neutral-weaker': "#E0E4EA",
46
46
  '--kui-color-background-neutral-weakest': "#F9FAFB",
47
- '--kui-color-background-overlay': "rgba(0, 9, 51, 0.6)",
47
+ '--kui-color-background-overlay': "rgba(13, 14, 20, 0.6)",
48
48
  '--kui-color-background-primary': "#0044F4",
49
49
  '--kui-color-background-primary-strong': "#0030CC",
50
50
  '--kui-color-background-primary-stronger': "#002099",
@@ -95,7 +95,7 @@ export const classicDay = {
95
95
  '--kui-color-border-primary-weakest': "#EEFAFF",
96
96
  '--kui-color-border-transparent': "transparent",
97
97
  '--kui-color-brand': "#0044F4",
98
- '--kui-color-text': "#000933",
98
+ '--kui-color-text': "#0D0E14",
99
99
  '--kui-color-text-accent': "#0044F4",
100
100
  '--kui-color-text-danger': "#D60027",
101
101
  '--kui-color-text-danger-strong': "#AD000E",
package/dist/tokens/README.md CHANGED
@@ -59,8 +59,8 @@ $kui-color-background-info-weak: #5f9aff;
59
59
  $kui-color-background-info-weaker: #bee2ff;
60
60
  /* Weakest background color for info elements (blue.10). */
61
61
  $kui-color-background-info-weakest: #eefaff;
62
- /* Inverse background color for containers (blue.100) */
63
- $kui-color-background-inverse: #000933;
62
+ /* Inverse background color for containers (gray.100) */
63
+ $kui-color-background-inverse: #0d0e14;
64
64
  /* Background color for neutral elements (gray.60). */
65
65
  $kui-color-background-neutral: #6c7489;
66
66
  /* Strong background color for neutral elements (gray.70). */
@@ -75,8 +75,8 @@ $kui-color-background-neutral-weak: #afb7c5;
75
75
  $kui-color-background-neutral-weaker: #e0e4ea;
76
76
  /* Weakest background color for neutral elements (gray.10). */
77
77
  $kui-color-background-neutral-weakest: #f9fafb;
78
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
79
- $kui-color-background-overlay: rgba(0, 9, 51, 0.6);
78
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
79
+ $kui-color-background-overlay: rgba(13, 14, 20, 0.6);
80
80
  /* Background color for primary actions or messages (blue.60). */
81
81
  $kui-color-background-primary: #0044f4;
82
82
  /* Strong background color for primary actions or messages (blue.70). */
@@ -177,8 +177,8 @@ $kui-color-border-primary-weakest: #eefaff;
177
177
  $kui-color-border-transparent: rgba(0, 0, 0, 0);
178
178
  /* Default brand color for the theme. */
179
179
  $kui-color-brand: #0044f4;
180
- /* Default text color (blue.100). */
181
- $kui-color-text: #000933;
180
+ /* Default text color (gray.100). */
181
+ $kui-color-text: #0d0e14;
182
182
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
183
183
  $kui-color-text-accent: #0044f4;
184
184
  /* Text color for danger actions or messages (red.60). */
@@ -743,8 +743,8 @@ $tokens-map: (
743
743
  'kui-color-background-info-weaker': #bee2ff,
744
744
  /* Weakest background color for info elements (blue.10). */
745
745
  'kui-color-background-info-weakest': #eefaff,
746
- /* Inverse background color for containers (blue.100) */
747
- 'kui-color-background-inverse': #000933,
746
+ /* Inverse background color for containers (gray.100) */
747
+ 'kui-color-background-inverse': #0d0e14,
748
748
  /* Background color for neutral elements (gray.60). */
749
749
  'kui-color-background-neutral': #6c7489,
750
750
  /* Strong background color for neutral elements (gray.70). */
@@ -759,8 +759,8 @@ $tokens-map: (
759
759
  'kui-color-background-neutral-weaker': #e0e4ea,
760
760
  /* Weakest background color for neutral elements (gray.10). */
761
761
  'kui-color-background-neutral-weakest': #f9fafb,
762
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
763
- 'kui-color-background-overlay': rgba(0, 9, 51, 0.6),
762
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
763
+ 'kui-color-background-overlay': rgba(13, 14, 20, 0.6),
764
764
  /* Background color for primary actions or messages (blue.60). */
765
765
  'kui-color-background-primary': #0044f4,
766
766
  /* Strong background color for primary actions or messages (blue.70). */
@@ -861,8 +861,8 @@ $tokens-map: (
861
861
  'kui-color-border-transparent': rgba(0, 0, 0, 0),
862
862
  /* Default brand color for the theme. */
863
863
  'kui-color-brand': #0044f4,
864
- /* Default text color (blue.100). */
865
- 'kui-color-text': #000933,
864
+ /* Default text color (gray.100). */
865
+ 'kui-color-text': #0d0e14,
866
866
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
867
867
  'kui-color-text-accent': #0044f4,
868
868
  /* Text color for danger actions or messages (red.60). */
@@ -1431,8 +1431,8 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1431
1431
  --kui-color-background-info-weaker: #bee2ff;
1432
1432
  /* Weakest background color for info elements (blue.10). */
1433
1433
  --kui-color-background-info-weakest: #eefaff;
1434
- /* Inverse background color for containers (blue.100) */
1435
- --kui-color-background-inverse: #000933;
1434
+ /* Inverse background color for containers (gray.100) */
1435
+ --kui-color-background-inverse: #0d0e14;
1436
1436
  /* Background color for neutral elements (gray.60). */
1437
1437
  --kui-color-background-neutral: #6c7489;
1438
1438
  /* Strong background color for neutral elements (gray.70). */
@@ -1447,8 +1447,8 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1447
1447
  --kui-color-background-neutral-weaker: #e0e4ea;
1448
1448
  /* Weakest background color for neutral elements (gray.10). */
1449
1449
  --kui-color-background-neutral-weakest: #f9fafb;
1450
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
1451
- --kui-color-background-overlay: rgba(0, 9, 51, 0.6);
1450
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
1451
+ --kui-color-background-overlay: rgba(13, 14, 20, 0.6);
1452
1452
  /* Background color for primary actions or messages (blue.60). */
1453
1453
  --kui-color-background-primary: #0044f4;
1454
1454
  /* Strong background color for primary actions or messages (blue.70). */
@@ -1549,8 +1549,8 @@ You may scope your CSS custom property overrides inside the `:root` selector as
1549
1549
  --kui-color-border-transparent: rgba(0, 0, 0, 0);
1550
1550
  /* Default brand color for the theme. */
1551
1551
  --kui-color-brand: #0044f4;
1552
- /* Default text color (blue.100). */
1553
- --kui-color-text: #000933;
1552
+ /* Default text color (gray.100). */
1553
+ --kui-color-text: #0d0e14;
1554
1554
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
1555
1555
  --kui-color-text-accent: #0044f4;
1556
1556
  /* Text color for danger actions or messages (red.60). */
@@ -3285,8 +3285,8 @@ export const KUI_COLOR_BACKGROUND_INFO_WEAK = "#5f9aff";
3285
3285
  export const KUI_COLOR_BACKGROUND_INFO_WEAKER = "#bee2ff";
3286
3286
  /* Weakest background color for info elements (blue.10). */
3287
3287
  export const KUI_COLOR_BACKGROUND_INFO_WEAKEST = "#eefaff";
3288
- /* Inverse background color for containers (blue.100) */
3289
- export const KUI_COLOR_BACKGROUND_INVERSE = "#000933";
3288
+ /* Inverse background color for containers (gray.100) */
3289
+ export const KUI_COLOR_BACKGROUND_INVERSE = "#0d0e14";
3290
3290
  /* Background color for neutral elements (gray.60). */
3291
3291
  export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489";
3292
3292
  /* Strong background color for neutral elements (gray.70). */
@@ -3301,8 +3301,8 @@ export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK = "#afb7c5";
3301
3301
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER = "#e0e4ea";
3302
3302
  /* Weakest background color for neutral elements (gray.10). */
3303
3303
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST = "#f9fafb";
3304
- /* Overlay background color (rgba(0, 9, 51, 0.6)) */
3305
- export const KUI_COLOR_BACKGROUND_OVERLAY = "rgba(0, 9, 51, 0.6)";
3304
+ /* Overlay background color (rgba(13, 14, 20, 0.6)) */
3305
+ export const KUI_COLOR_BACKGROUND_OVERLAY = "rgba(13, 14, 20, 0.6)";
3306
3306
  /* Background color for primary actions or messages (blue.60). */
3307
3307
  export const KUI_COLOR_BACKGROUND_PRIMARY = "#0044f4";
3308
3308
  /* Strong background color for primary actions or messages (blue.70). */
@@ -3403,8 +3403,8 @@ export const KUI_COLOR_BORDER_PRIMARY_WEAKEST = "#eefaff";
3403
3403
  export const KUI_COLOR_BORDER_TRANSPARENT = "rgba(0, 0, 0, 0)";
3404
3404
  /* Default brand color for the theme. */
3405
3405
  export const KUI_COLOR_BRAND = "#0044f4";
3406
- /* Default text color (blue.100). */
3407
- export const KUI_COLOR_TEXT = "#000933";
3406
+ /* Default text color (gray.100). */
3407
+ export const KUI_COLOR_TEXT = "#0d0e14";
3408
3408
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
3409
3409
  export const KUI_COLOR_TEXT_ACCENT = "#0044f4";
3410
3410
  /* Text color for danger actions or messages (red.60). */
@@ -5217,9 +5217,9 @@ export const KUI_THEMEABLE_TOKENS = [
5217
5217
  },
5218
5218
  {
5219
5219
  name: "--kui-color-background-inverse",
5220
- description: "Inverse background color for containers (blue.100)",
5220
+ description: "Inverse background color for containers (gray.100)",
5221
5221
  category: "color",
5222
- value: "#000933",
5222
+ value: "#0d0e14",
5223
5223
  },
5224
5224
  {
5225
5225
  name: "--kui-color-background-neutral",
@@ -5265,9 +5265,9 @@ export const KUI_THEMEABLE_TOKENS = [
5265
5265
  },
5266
5266
  {
5267
5267
  name: "--kui-color-background-overlay",
5268
- description: "Overlay background color (rgba(0, 9, 51, 0.6))",
5268
+ description: "Overlay background color (rgba(13, 14, 20, 0.6))",
5269
5269
  category: "color",
5270
- value: "rgba(0, 9, 51, 0.6)",
5270
+ value: "rgba(13, 14, 20, 0.6)",
5271
5271
  },
5272
5272
  {
5273
5273
  name: "--kui-color-background-primary",
@@ -5571,9 +5571,9 @@ export const KUI_THEMEABLE_TOKENS = [
5571
5571
  },
5572
5572
  {
5573
5573
  name: "--kui-color-text",
5574
- description: "Default text color (blue.100).",
5574
+ description: "Default text color (gray.100).",
5575
5575
  category: "color",
5576
- value: "#000933",
5576
+ value: "#0d0e14",
5577
5577
  },
5578
5578
  {
5579
5579
  name: "--kui-color-text-accent",
@@ -9478,7 +9478,7 @@ export const KUI_THEMEABLE_TOKENS = [
9478
9478
  "kui_color_background_info_weak": "#5f9aff",
9479
9479
  "kui_color_background_info_weaker": "#bee2ff",
9480
9480
  "kui_color_background_info_weakest": "#eefaff",
9481
- "kui_color_background_inverse": "#000933",
9481
+ "kui_color_background_inverse": "#0d0e14",
9482
9482
  "kui_color_background_neutral": "#6c7489",
9483
9483
  "kui_color_background_neutral_strong": "#52596e",
9484
9484
  "kui_color_background_neutral_stronger": "#3a3f51",
@@ -9486,7 +9486,7 @@ export const KUI_THEMEABLE_TOKENS = [
9486
9486
  "kui_color_background_neutral_weak": "#afb7c5",
9487
9487
  "kui_color_background_neutral_weaker": "#e0e4ea",
9488
9488
  "kui_color_background_neutral_weakest": "#f9fafb",
9489
- "kui_color_background_overlay": "rgba(0, 9, 51, 0.6)",
9489
+ "kui_color_background_overlay": "rgba(13, 14, 20, 0.6)",
9490
9490
  "kui_color_background_primary": "#0044f4",
9491
9491
  "kui_color_background_primary_strong": "#0030cc",
9492
9492
  "kui_color_background_primary_stronger": "#002099",
@@ -9537,7 +9537,7 @@ export const KUI_THEMEABLE_TOKENS = [
9537
9537
  "kui_color_border_primary_weakest": "#eefaff",
9538
9538
  "kui_color_border_transparent": "rgba(0, 0, 0, 0)",
9539
9539
  "kui_color_brand": "#0044f4",
9540
- "kui_color_text": "#000933",
9540
+ "kui_color_text": "#0d0e14",
9541
9541
  "kui_color_text_accent": "#0044f4",
9542
9542
  "kui_color_text_danger": "#d60027",
9543
9543
  "kui_color_text_danger_strong": "#ad000e",
package/dist/tokens/css/custom-properties-list.css CHANGED
@@ -61,7 +61,7 @@
61
61
  --kui-color-background-info-weaker: initial;
62
62
  /* Weakest background color for info elements (blue.10). Default value: `#eefaff` */
63
63
  --kui-color-background-info-weakest: initial;
64
- /* Inverse background color for containers (blue.100). Default value: `#000933` */
64
+ /* Inverse background color for containers (gray.100). Default value: `#0d0e14` */
65
65
  --kui-color-background-inverse: initial;
66
66
  /* Background color for neutral elements (gray.60). Default value: `#6c7489` */
67
67
  --kui-color-background-neutral: initial;
@@ -77,7 +77,7 @@
77
77
  --kui-color-background-neutral-weaker: initial;
78
78
  /* Weakest background color for neutral elements (gray.10). Default value: `#f9fafb` */
79
79
  --kui-color-background-neutral-weakest: initial;
80
- /* Overlay background color (rgba(0, 9, 51, 0.6)). Default value: `rgba(0, 9, 51, 0.6)` */
80
+ /* Overlay background color (rgba(13, 14, 20, 0.6)). Default value: `rgba(13, 14, 20, 0.6)` */
81
81
  --kui-color-background-overlay: initial;
82
82
  /* Background color for primary actions or messages (blue.60). Default value: `#0044f4` */
83
83
  --kui-color-background-primary: initial;
@@ -179,7 +179,7 @@
179
179
  --kui-color-border-transparent: initial;
180
180
  /* Default brand color for the theme. Default value: `#0044f4` */
181
181
  --kui-color-brand: initial;
182
- /* Default text color (blue.100). Default value: `#000933` */
182
+ /* Default text color (gray.100). Default value: `#0d0e14` */
183
183
  --kui-color-text: initial;
184
184
  /* Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. Default value: `#0044f4` */
185
185
  --kui-color-text-accent: initial;
package/dist/tokens/css/custom-properties.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 11 Aug 2026 13:39:50 GMT
3
+ * Generated on Thu, 20 Aug 2026 17:20:46 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -28,7 +28,7 @@
28
28
  --kui-color-background-info-weak: #5f9aff; /** Weak background color for info elements (blue.40). */
29
29
  --kui-color-background-info-weaker: #bee2ff; /** Weaker background color for info elements (blue.20). */
30
30
  --kui-color-background-info-weakest: #eefaff; /** Weakest background color for info elements (blue.10). */
31
- --kui-color-background-inverse: #000933; /** Inverse background color for containers (blue.100) */
31
+ --kui-color-background-inverse: #0d0e14; /** Inverse background color for containers (gray.100) */
32
32
  --kui-color-background-neutral: #6c7489; /** Background color for neutral elements (gray.60). */
33
33
  --kui-color-background-neutral-strong: #52596e; /** Strong background color for neutral elements (gray.70). */
34
34
  --kui-color-background-neutral-stronger: #3a3f51; /** Stronger background color for neutral elements (gray.80). */
@@ -36,7 +36,7 @@
36
36
  --kui-color-background-neutral-weak: #afb7c5; /** Weak background color for neutral elements (gray.40). */
37
37
  --kui-color-background-neutral-weaker: #e0e4ea; /** Weaker background color for neutral elements (gray.20). */
38
38
  --kui-color-background-neutral-weakest: #f9fafb; /** Weakest background color for neutral elements (gray.10). */
39
- --kui-color-background-overlay: rgba(0, 9, 51, 0.6); /** Overlay background color (rgba(0, 9, 51, 0.6)) */
39
+ --kui-color-background-overlay: rgba(13, 14, 20, 0.6); /** Overlay background color (rgba(13, 14, 20, 0.6)) */
40
40
  --kui-color-background-primary: #0044f4; /** Background color for primary actions or messages (blue.60). */
41
41
  --kui-color-background-primary-strong: #0030cc; /** Strong background color for primary actions or messages (blue.70). */
42
42
  --kui-color-background-primary-stronger: #002099; /** Stronger background color for primary actions or messages (blue.80). */
@@ -87,7 +87,7 @@
87
87
  --kui-color-border-primary-weakest: #eefaff; /** Weakest border color for primary actions or messages (blue.10). */
88
88
  --kui-color-border-transparent: rgba(0, 0, 0, 0); /** Transparent border color (transparent). */
89
89
  --kui-color-brand: #0044f4; /** Default brand color for the theme. */
90
- --kui-color-text: #000933; /** Default text color (blue.100). */
90
+ --kui-color-text: #0d0e14; /** Default text color (gray.100). */
91
91
  --kui-color-text-accent: #0044f4; /** Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
92
92
  --kui-color-text-danger: #d60027; /** Text color for danger actions or messages (red.60). */
93
93
  --kui-color-text-danger-strong: #ad000e; /** Strong text color for danger actions or messages (red.70). */
package/dist/tokens/js/cjs/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 11 Aug 2026 13:39:50 GMT
3
+ * Generated on Thu, 20 Aug 2026 17:20:46 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
package/dist/tokens/js/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 11 Aug 2026 13:39:50 GMT
3
+ * Generated on Thu, 20 Aug 2026 17:20:46 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -28,7 +28,7 @@ module.exports = {
28
28
  KUI_COLOR_BACKGROUND_INFO_WEAK: "#5f9aff",
29
29
  KUI_COLOR_BACKGROUND_INFO_WEAKER: "#bee2ff",
30
30
  KUI_COLOR_BACKGROUND_INFO_WEAKEST: "#eefaff",
31
- KUI_COLOR_BACKGROUND_INVERSE: "#000933",
31
+ KUI_COLOR_BACKGROUND_INVERSE: "#0d0e14",
32
32
  KUI_COLOR_BACKGROUND_NEUTRAL: "#6c7489",
33
33
  KUI_COLOR_BACKGROUND_NEUTRAL_STRONG: "#52596e",
34
34
  KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER: "#3a3f51",
@@ -36,7 +36,7 @@ module.exports = {
36
36
  KUI_COLOR_BACKGROUND_NEUTRAL_WEAK: "#afb7c5",
37
37
  KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER: "#e0e4ea",
38
38
  KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST: "#f9fafb",
39
- KUI_COLOR_BACKGROUND_OVERLAY: "rgba(0, 9, 51, 0.6)",
39
+ KUI_COLOR_BACKGROUND_OVERLAY: "rgba(13, 14, 20, 0.6)",
40
40
  KUI_COLOR_BACKGROUND_PRIMARY: "#0044f4",
41
41
  KUI_COLOR_BACKGROUND_PRIMARY_STRONG: "#0030cc",
42
42
  KUI_COLOR_BACKGROUND_PRIMARY_STRONGER: "#002099",
@@ -87,7 +87,7 @@ module.exports = {
87
87
  KUI_COLOR_BORDER_PRIMARY_WEAKEST: "#eefaff",
88
88
  KUI_COLOR_BORDER_TRANSPARENT: "rgba(0, 0, 0, 0)",
89
89
  KUI_COLOR_BRAND: "#0044f4",
90
- KUI_COLOR_TEXT: "#000933",
90
+ KUI_COLOR_TEXT: "#0d0e14",
91
91
  KUI_COLOR_TEXT_ACCENT: "#0044f4",
92
92
  KUI_COLOR_TEXT_DANGER: "#d60027",
93
93
  KUI_COLOR_TEXT_DANGER_STRONG: "#ad000e",
package/dist/tokens/js/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 11 Aug 2026 13:39:50 GMT
3
+ * Generated on Thu, 20 Aug 2026 17:20:46 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -47,8 +47,8 @@ export const KUI_COLOR_BACKGROUND_INFO_WEAK: "#5f9aff";
47
47
  export const KUI_COLOR_BACKGROUND_INFO_WEAKER: "#bee2ff";
48
48
  /** Weakest background color for info elements (blue.10). */
49
49
  export const KUI_COLOR_BACKGROUND_INFO_WEAKEST: "#eefaff";
50
- /** Inverse background color for containers (blue.100) */
51
- export const KUI_COLOR_BACKGROUND_INVERSE: "#000933";
50
+ /** Inverse background color for containers (gray.100) */
51
+ export const KUI_COLOR_BACKGROUND_INVERSE: "#0d0e14";
52
52
  /** Background color for neutral elements (gray.60). */
53
53
  export const KUI_COLOR_BACKGROUND_NEUTRAL: "#6c7489";
54
54
  /** Strong background color for neutral elements (gray.70). */
@@ -63,8 +63,8 @@ export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK: "#afb7c5";
63
63
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER: "#e0e4ea";
64
64
  /** Weakest background color for neutral elements (gray.10). */
65
65
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST: "#f9fafb";
66
- /** Overlay background color (rgba(0, 9, 51, 0.6)) */
67
- export const KUI_COLOR_BACKGROUND_OVERLAY: "rgba(0, 9, 51, 0.6)";
66
+ /** Overlay background color (rgba(13, 14, 20, 0.6)) */
67
+ export const KUI_COLOR_BACKGROUND_OVERLAY: "rgba(13, 14, 20, 0.6)";
68
68
  /** Background color for primary actions or messages (blue.60). */
69
69
  export const KUI_COLOR_BACKGROUND_PRIMARY: "#0044f4";
70
70
  /** Strong background color for primary actions or messages (blue.70). */
@@ -165,8 +165,8 @@ export const KUI_COLOR_BORDER_PRIMARY_WEAKEST: "#eefaff";
165
165
  export const KUI_COLOR_BORDER_TRANSPARENT: "rgba(0, 0, 0, 0)";
166
166
  /** Default brand color for the theme. */
167
167
  export const KUI_COLOR_BRAND: "#0044f4";
168
- /** Default text color (blue.100). */
169
- export const KUI_COLOR_TEXT: "#000933";
168
+ /** Default text color (gray.100). */
169
+ export const KUI_COLOR_TEXT: "#0d0e14";
170
170
  /** Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
171
171
  export const KUI_COLOR_TEXT_ACCENT: "#0044f4";
172
172
  /** Text color for danger actions or messages (red.60). */
package/dist/tokens/js/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Tue, 11 Aug 2026 13:39:50 GMT
3
+ * Generated on Thu, 20 Aug 2026 17:20:46 GMT
4
4
  *
5
5
  * Kong Konnect Design Tokens
6
6
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -27,7 +27,7 @@ export const KUI_COLOR_BACKGROUND_INFO_STRONGEST = "#001466"; // Strongest backg
27
27
  export const KUI_COLOR_BACKGROUND_INFO_WEAK = "#5f9aff"; // Weak background color for info elements (blue.40).
28
28
  export const KUI_COLOR_BACKGROUND_INFO_WEAKER = "#bee2ff"; // Weaker background color for info elements (blue.20).
29
29
  export const KUI_COLOR_BACKGROUND_INFO_WEAKEST = "#eefaff"; // Weakest background color for info elements (blue.10).
30
- export const KUI_COLOR_BACKGROUND_INVERSE = "#000933"; // Inverse background color for containers (blue.100)
30
+ export const KUI_COLOR_BACKGROUND_INVERSE = "#0d0e14"; // Inverse background color for containers (gray.100)
31
31
  export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489"; // Background color for neutral elements (gray.60).
32
32
  export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG = "#52596e"; // Strong background color for neutral elements (gray.70).
33
33
  export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER = "#3a3f51"; // Stronger background color for neutral elements (gray.80).
@@ -35,7 +35,7 @@ export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST = "#232633"; // Strongest ba
35
35
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK = "#afb7c5"; // Weak background color for neutral elements (gray.40).
36
36
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER = "#e0e4ea"; // Weaker background color for neutral elements (gray.20).
37
37
  export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST = "#f9fafb"; // Weakest background color for neutral elements (gray.10).
38
- export const KUI_COLOR_BACKGROUND_OVERLAY = "rgba(0, 9, 51, 0.6)"; // Overlay background color (rgba(0, 9, 51, 0.6))
38
+ export const KUI_COLOR_BACKGROUND_OVERLAY = "rgba(13, 14, 20, 0.6)"; // Overlay background color (rgba(13, 14, 20, 0.6))
39
39
  export const KUI_COLOR_BACKGROUND_PRIMARY = "#0044f4"; // Background color for primary actions or messages (blue.60).
40
40
  export const KUI_COLOR_BACKGROUND_PRIMARY_STRONG = "#0030cc"; // Strong background color for primary actions or messages (blue.70).
41
41
  export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGER = "#002099"; // Stronger background color for primary actions or messages (blue.80).
@@ -86,7 +86,7 @@ export const KUI_COLOR_BORDER_PRIMARY_WEAKER = "#bee2ff"; // Weaker border color
86
86
  export const KUI_COLOR_BORDER_PRIMARY_WEAKEST = "#eefaff"; // Weakest border color for primary actions or messages (blue.10).
87
87
  export const KUI_COLOR_BORDER_TRANSPARENT = "rgba(0, 0, 0, 0)"; // Transparent border color (transparent).
88
88
  export const KUI_COLOR_BRAND = "#0044f4"; // Default brand color for the theme.
89
- export const KUI_COLOR_TEXT = "#000933"; // Default text color (blue.100).
89
+ export const KUI_COLOR_TEXT = "#0d0e14"; // Default text color (gray.100).
90
90
  export const KUI_COLOR_TEXT_ACCENT = "#0044f4"; // Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes.
91
91
  export const KUI_COLOR_TEXT_DANGER = "#d60027"; // Text color for danger actions or messages (red.60).
92
92
  export const KUI_COLOR_TEXT_DANGER_STRONG = "#ad000e"; // Strong text color for danger actions or messages (red.70).
package/dist/tokens/js/tokens.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "kui_color_background_info_weak": "#5f9aff",
20
20
  "kui_color_background_info_weaker": "#bee2ff",
21
21
  "kui_color_background_info_weakest": "#eefaff",
22
- "kui_color_background_inverse": "#000933",
22
+ "kui_color_background_inverse": "#0d0e14",
23
23
  "kui_color_background_neutral": "#6c7489",
24
24
  "kui_color_background_neutral_strong": "#52596e",
25
25
  "kui_color_background_neutral_stronger": "#3a3f51",
@@ -27,7 +27,7 @@
27
27
  "kui_color_background_neutral_weak": "#afb7c5",
28
28
  "kui_color_background_neutral_weaker": "#e0e4ea",
29
29
  "kui_color_background_neutral_weakest": "#f9fafb",
30
- "kui_color_background_overlay": "rgba(0, 9, 51, 0.6)",
30
+ "kui_color_background_overlay": "rgba(13, 14, 20, 0.6)",
31
31
  "kui_color_background_primary": "#0044f4",
32
32
  "kui_color_background_primary_strong": "#0030cc",
33
33
  "kui_color_background_primary_stronger": "#002099",
@@ -78,7 +78,7 @@
78
78
  "kui_color_border_primary_weakest": "#eefaff",
79
79
  "kui_color_border_transparent": "rgba(0, 0, 0, 0)",
80
80
  "kui_color_brand": "#0044f4",
81
- "kui_color_text": "#000933",
81
+ "kui_color_text": "#0d0e14",
82
82
  "kui_color_text_accent": "#0044f4",
83
83
  "kui_color_text_danger": "#d60027",
84
84
  "kui_color_text_danger_strong": "#ad000e",
package/dist/tokens/scss/_map.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
- * Generated on Tue, 11 Aug 2026 13:39:50 GMT
4
+ * Generated on Thu, 20 Aug 2026 17:20:46 GMT
5
5
  *
6
6
  * Kong Konnect Design Tokens
7
7
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -29,7 +29,7 @@ $kui-tokens-map: (
29
29
  'kui-color-background-info-weak': #5f9aff,
30
30
  'kui-color-background-info-weaker': #bee2ff,
31
31
  'kui-color-background-info-weakest': #eefaff,
32
- 'kui-color-background-inverse': #000933,
32
+ 'kui-color-background-inverse': #0d0e14,
33
33
  'kui-color-background-neutral': #6c7489,
34
34
  'kui-color-background-neutral-strong': #52596e,
35
35
  'kui-color-background-neutral-stronger': #3a3f51,
@@ -37,7 +37,7 @@ $kui-tokens-map: (
37
37
  'kui-color-background-neutral-weak': #afb7c5,
38
38
  'kui-color-background-neutral-weaker': #e0e4ea,
39
39
  'kui-color-background-neutral-weakest': #f9fafb,
40
- 'kui-color-background-overlay': rgba(0, 9, 51, 0.6),
40
+ 'kui-color-background-overlay': rgba(13, 14, 20, 0.6),
41
41
  'kui-color-background-primary': #0044f4,
42
42
  'kui-color-background-primary-strong': #0030cc,
43
43
  'kui-color-background-primary-stronger': #002099,
@@ -88,7 +88,7 @@ $kui-tokens-map: (
88
88
  'kui-color-border-primary-weakest': #eefaff,
89
89
  'kui-color-border-transparent': rgba(0, 0, 0, 0),
90
90
  'kui-color-brand': #0044f4,
91
- 'kui-color-text': #000933,
91
+ 'kui-color-text': #0d0e14,
92
92
  'kui-color-text-accent': #0044f4,
93
93
  'kui-color-text-danger': #d60027,
94
94
  'kui-color-text-danger-strong': #ad000e,
package/dist/tokens/scss/_mixins.scss CHANGED
@@ -39,7 +39,7 @@
39
39
  --kui-color-background-info-weak: undefined; /** Weak background color for info elements (blue.40). */
40
40
  --kui-color-background-info-weaker: undefined; /** Weaker background color for info elements (blue.20). */
41
41
  --kui-color-background-info-weakest: undefined; /** Weakest background color for info elements (blue.10). */
42
- --kui-color-background-inverse: undefined; /** Inverse background color for containers (blue.100) */
42
+ --kui-color-background-inverse: undefined; /** Inverse background color for containers (gray.100) */
43
43
  --kui-color-background-neutral: undefined; /** Background color for neutral elements (gray.60). */
44
44
  --kui-color-background-neutral-strong: undefined; /** Strong background color for neutral elements (gray.70). */
45
45
  --kui-color-background-neutral-stronger: undefined; /** Stronger background color for neutral elements (gray.80). */
@@ -47,7 +47,7 @@
47
47
  --kui-color-background-neutral-weak: undefined; /** Weak background color for neutral elements (gray.40). */
48
48
  --kui-color-background-neutral-weaker: undefined; /** Weaker background color for neutral elements (gray.20). */
49
49
  --kui-color-background-neutral-weakest: undefined; /** Weakest background color for neutral elements (gray.10). */
50
- --kui-color-background-overlay: undefined; /** Overlay background color (rgba(0, 9, 51, 0.6)) */
50
+ --kui-color-background-overlay: undefined; /** Overlay background color (rgba(13, 14, 20, 0.6)) */
51
51
  --kui-color-background-primary: undefined; /** Background color for primary actions or messages (blue.60). */
52
52
  --kui-color-background-primary-strong: undefined; /** Strong background color for primary actions or messages (blue.70). */
53
53
  --kui-color-background-primary-stronger: undefined; /** Stronger background color for primary actions or messages (blue.80). */
@@ -98,7 +98,7 @@
98
98
  --kui-color-border-primary-weakest: undefined; /** Weakest border color for primary actions or messages (blue.10). */
99
99
  --kui-color-border-transparent: undefined; /** Transparent border color (transparent). */
100
100
  --kui-color-brand: undefined; /** Default brand color for the theme. */
101
- --kui-color-text: undefined; /** Default text color (blue.100). */
101
+ --kui-color-text: undefined; /** Default text color (gray.100). */
102
102
  --kui-color-text-accent: undefined; /** Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes. */
103
103
  --kui-color-text-danger: undefined; /** Text color for danger actions or messages (red.60). */
104
104
  --kui-color-text-danger-strong: undefined; /** Strong text color for danger actions or messages (red.70). */
package/dist/tokens/scss/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
- // Generated on Tue, 11 Aug 2026 13:39:50 GMT
3
+ // Generated on Thu, 20 Aug 2026 17:20:46 GMT
4
4
  //
5
5
  // Kong Konnect Design Tokens
6
6
  // GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens
@@ -26,7 +26,7 @@ $kui-color-background-info-strongest: #001466 !default; // Strongest background
26
26
  $kui-color-background-info-weak: #5f9aff !default; // Weak background color for info elements (blue.40).
27
27
  $kui-color-background-info-weaker: #bee2ff !default; // Weaker background color for info elements (blue.20).
28
28
  $kui-color-background-info-weakest: #eefaff !default; // Weakest background color for info elements (blue.10).
29
- $kui-color-background-inverse: #000933 !default; // Inverse background color for containers (blue.100)
29
+ $kui-color-background-inverse: #0d0e14 !default; // Inverse background color for containers (gray.100)
30
30
  $kui-color-background-neutral: #6c7489 !default; // Background color for neutral elements (gray.60).
31
31
  $kui-color-background-neutral-strong: #52596e !default; // Strong background color for neutral elements (gray.70).
32
32
  $kui-color-background-neutral-stronger: #3a3f51 !default; // Stronger background color for neutral elements (gray.80).
@@ -34,7 +34,7 @@ $kui-color-background-neutral-strongest: #232633 !default; // Strongest backgrou
34
34
  $kui-color-background-neutral-weak: #afb7c5 !default; // Weak background color for neutral elements (gray.40).
35
35
  $kui-color-background-neutral-weaker: #e0e4ea !default; // Weaker background color for neutral elements (gray.20).
36
36
  $kui-color-background-neutral-weakest: #f9fafb !default; // Weakest background color for neutral elements (gray.10).
37
- $kui-color-background-overlay: rgba(0, 9, 51, 0.6) !default; // Overlay background color (rgba(0, 9, 51, 0.6))
37
+ $kui-color-background-overlay: rgba(13, 14, 20, 0.6) !default; // Overlay background color (rgba(13, 14, 20, 0.6))
38
38
  $kui-color-background-primary: #0044f4 !default; // Background color for primary actions or messages (blue.60).
39
39
  $kui-color-background-primary-strong: #0030cc !default; // Strong background color for primary actions or messages (blue.70).
40
40
  $kui-color-background-primary-stronger: #002099 !default; // Stronger background color for primary actions or messages (blue.80).
@@ -85,7 +85,7 @@ $kui-color-border-primary-weaker: #bee2ff !default; // Weaker border color for p
85
85
  $kui-color-border-primary-weakest: #eefaff !default; // Weakest border color for primary actions or messages (blue.10).
86
86
  $kui-color-border-transparent: rgba(0, 0, 0, 0) !default; // Transparent border color (transparent).
87
87
  $kui-color-brand: #0044f4 !default; // Default brand color for the theme.
88
- $kui-color-text: #000933 !default; // Default text color (blue.100).
88
+ $kui-color-text: #0d0e14 !default; // Default text color (gray.100).
89
89
  $kui-color-text-accent: #0044f4 !default; // Accent text color for emphasis on non-primary UI. Distinct from the primary action color, used to add touches of the theme accent color across themes.
90
90
  $kui-color-text-danger: #d60027 !default; // Text color for danger actions or messages (red.60).
91
91
  $kui-color-text-danger-strong: #ad000e !default; // Strong text color for danger actions or messages (red.70).
package/dist/tokens/themeable-tokens/index.cjs CHANGED
@@ -1290,9 +1290,9 @@ const KUI_THEMEABLE_TOKENS = [
1290
1290
  },
1291
1291
  {
1292
1292
  name: "--kui-color-background-inverse",
1293
- description: "Inverse background color for containers (blue.100)",
1293
+ description: "Inverse background color for containers (gray.100)",
1294
1294
  category: "color",
1295
- value: "#000933",
1295
+ value: "#0d0e14",
1296
1296
  },
1297
1297
  {
1298
1298
  name: "--kui-color-background-neutral",
@@ -1338,9 +1338,9 @@ const KUI_THEMEABLE_TOKENS = [
1338
1338
  },
1339
1339
  {
1340
1340
  name: "--kui-color-background-overlay",
1341
- description: "Overlay background color (rgba(0, 9, 51, 0.6))",
1341
+ description: "Overlay background color (rgba(13, 14, 20, 0.6))",
1342
1342
  category: "color",
1343
- value: "rgba(0, 9, 51, 0.6)",
1343
+ value: "rgba(13, 14, 20, 0.6)",
1344
1344
  },
1345
1345
  {
1346
1346
  name: "--kui-color-background-primary",
@@ -1644,9 +1644,9 @@ const KUI_THEMEABLE_TOKENS = [
1644
1644
  },
1645
1645
  {
1646
1646
  name: "--kui-color-text",
1647
- description: "Default text color (blue.100).",
1647
+ description: "Default text color (gray.100).",
1648
1648
  category: "color",
1649
- value: "#000933",
1649
+ value: "#0d0e14",
1650
1650
  },
1651
1651
  {
1652
1652
  name: "--kui-color-text-accent",
package/dist/tokens/themeable-tokens/index.mjs CHANGED
@@ -1293,9 +1293,9 @@ export const KUI_THEMEABLE_TOKENS = [
1293
1293
  },
1294
1294
  {
1295
1295
  name: "--kui-color-background-inverse",
1296
- description: "Inverse background color for containers (blue.100)",
1296
+ description: "Inverse background color for containers (gray.100)",
1297
1297
  category: "color",
1298
- value: "#000933",
1298
+ value: "#0d0e14",
1299
1299
  },
1300
1300
  {
1301
1301
  name: "--kui-color-background-neutral",
@@ -1341,9 +1341,9 @@ export const KUI_THEMEABLE_TOKENS = [
1341
1341
  },
1342
1342
  {
1343
1343
  name: "--kui-color-background-overlay",
1344
- description: "Overlay background color (rgba(0, 9, 51, 0.6))",
1344
+ description: "Overlay background color (rgba(13, 14, 20, 0.6))",
1345
1345
  category: "color",
1346
- value: "rgba(0, 9, 51, 0.6)",
1346
+ value: "rgba(13, 14, 20, 0.6)",
1347
1347
  },
1348
1348
  {
1349
1349
  name: "--kui-color-background-primary",
@@ -1647,9 +1647,9 @@ export const KUI_THEMEABLE_TOKENS = [
1647
1647
  },
1648
1648
  {
1649
1649
  name: "--kui-color-text",
1650
- description: "Default text color (blue.100).",
1650
+ description: "Default text color (gray.100).",
1651
1651
  category: "color",
1652
- value: "#000933",
1652
+ value: "#0d0e14",
1653
1653
  },
1654
1654
  {
1655
1655
  name: "--kui-color-text-accent",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kong/design-tokens",
3
- "version": "3.2.10",
3
+ "version": "3.3.0",
4
4
  "description": "Kong Design Tokens and style dictionary",
5
5
  "private": false,
6
6
  "type": "module",
@@ -103,5 +103,5 @@
103
103
  "volta": {
104
104
  "node": "24.13.1"
105
105
  },
106
- "gitHead": "eed0793082573db1f7573f7d6753b549162f602a"
106
+ "gitHead": "17a8bbe41d9173cc1f36cc04327991cf4cb99899"
107
107
  }