@kong/design-tokens 3.0.8-pr.701.52269bc.0 → 3.1.0

package/TOKENS.md

@@ -2392,16 +2392,24 @@ Component tokens are documented here for reference. They ship **with no default
 --kui-code-block-actions-border-width: initial;
 /* Code block actions toolbar bottom border color. */
 --kui-code-block-actions-color-border: initial;
+/* Code block actions toolbar bottom border color in the dark theme. */
+--kui-code-block-actions-color-border-dark: initial;
 /* Code block actions toolbar inner padding. */
 --kui-code-block-actions-padding: initial;
 /* Code block border radius. */
 --kui-code-block-border-radius: initial;
 /* Code block background color. */
 --kui-code-block-color-background: initial;
+/* Code block background color in the dark theme. */
+--kui-code-block-color-background-dark: initial;
 /* Code block code text color. */
 --kui-code-block-color-text: initial;
+/* Code block code text color in the dark theme. */
+--kui-code-block-color-text-dark: initial;
 /* Code block line number text color. */
 --kui-code-block-line-number-color-text: initial;
+/* Code block line number text color in the dark theme. */
+--kui-code-block-line-number-color-text-dark: initial;
 /* Collapse font family. */
 --kui-collapse-font-family: initial;
 /* Collapse title text color. */
@@ -4981,6 +4989,12 @@ export const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-actions-color-border-dark",
+    description: "Code block actions toolbar bottom border color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-actions-padding",
     description: "Code block actions toolbar inner padding.",
@@ -4999,18 +5013,36 @@ export const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-background-dark",
+    description: "Code block background color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-color-text",
     description: "Code block code text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-text-dark",
+    description: "Code block code text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-line-number-color-text",
     description: "Code block line number text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-line-number-color-text-dark",
+    description: "Code block line number text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-collapse-font-family",
     description: "Collapse font family.",

package/dist/themes/electric-lime-day.cjs

@@ -175,11 +175,15 @@ const electricLimeDay = {
   '--kui-checkbox-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
   '--kui-code-block-actions-border-width': "1px",
   '--kui-code-block-actions-color-border': "#E3E8E3",
+  '--kui-code-block-actions-color-border-dark': "rgba(255, 255, 255, 0.2)",
   '--kui-code-block-actions-padding': "4px 8px",
   '--kui-code-block-border-radius': "8px",
   '--kui-code-block-color-background': "#F9FBF9",
+  '--kui-code-block-color-background-dark': "#090D09",
   '--kui-code-block-color-text': "#181B18",
+  '--kui-code-block-color-text-dark': "#E3E8E3",
   '--kui-code-block-line-number-color-text': "#3D443D",
+  '--kui-code-block-line-number-color-text-dark': "#9DA99D",
   '--kui-collapse-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-collapse-title-color-text': "#3D443D",
   '--kui-collapse-title-font-size': "16px",

package/dist/themes/electric-lime-day.css

@@ -175,11 +175,15 @@
     --kui-checkbox-shadow-focus: 0px 0px 0px 4px rgba(24, 27, 24, 0.15);
     --kui-code-block-actions-border-width: 1px;
     --kui-code-block-actions-color-border: #E3E8E3;
+    --kui-code-block-actions-color-border-dark: rgba(255, 255, 255, 0.2);
     --kui-code-block-actions-padding: 4px 8px;
     --kui-code-block-border-radius: 8px;
     --kui-code-block-color-background: #F9FBF9;
+    --kui-code-block-color-background-dark: #090D09;
     --kui-code-block-color-text: #181B18;
+    --kui-code-block-color-text-dark: #E3E8E3;
     --kui-code-block-line-number-color-text: #3D443D;
+    --kui-code-block-line-number-color-text-dark: #9DA99D;
     --kui-collapse-font-family: 'Funnel Sans', Roboto, Helvetica, sans-serif;
     --kui-collapse-title-color-text: #3D443D;
     --kui-collapse-title-font-size: 16px;

package/dist/themes/electric-lime-day.mjs

@@ -174,11 +174,15 @@ export const electricLimeDay = {
   '--kui-checkbox-shadow-focus': "0px 0px 0px 4px rgba(24, 27, 24, 0.15)",
   '--kui-code-block-actions-border-width': "1px",
   '--kui-code-block-actions-color-border': "#E3E8E3",
+  '--kui-code-block-actions-color-border-dark': "rgba(255, 255, 255, 0.2)",
   '--kui-code-block-actions-padding': "4px 8px",
   '--kui-code-block-border-radius': "8px",
   '--kui-code-block-color-background': "#F9FBF9",
+  '--kui-code-block-color-background-dark': "#090D09",
   '--kui-code-block-color-text': "#181B18",
+  '--kui-code-block-color-text-dark': "#E3E8E3",
   '--kui-code-block-line-number-color-text': "#3D443D",
+  '--kui-code-block-line-number-color-text-dark': "#9DA99D",
   '--kui-collapse-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-collapse-title-color-text': "#3D443D",
   '--kui-collapse-title-font-size': "16px",

package/dist/themes/electric-lime-night.cjs

@@ -175,11 +175,15 @@ const electricLimeNight = {
   '--kui-checkbox-shadow-focus': "0px 0px 0px 4px rgba(241, 243, 241, 0.15)",
   '--kui-code-block-actions-border-width': "1px",
   '--kui-code-block-actions-color-border': "#3D443D",
+  '--kui-code-block-actions-color-border-dark': "rgba(255, 255, 255, 0.2)",
   '--kui-code-block-actions-padding': "4px 8px",
   '--kui-code-block-border-radius': "8px",
   '--kui-code-block-color-background': "#070807",
+  '--kui-code-block-color-background-dark': "#F9FBF9",
   '--kui-code-block-color-text': "#F1F3F1",
+  '--kui-code-block-color-text-dark': "#242824",
   '--kui-code-block-line-number-color-text': "#D2D7D2",
+  '--kui-code-block-line-number-color-text-dark': "#697769",
   '--kui-collapse-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-collapse-title-color-text': "#D2D7D2",
   '--kui-collapse-title-font-size': "16px",

package/dist/themes/electric-lime-night.css

@@ -175,11 +175,15 @@
     --kui-checkbox-shadow-focus: 0px 0px 0px 4px rgba(241, 243, 241, 0.15);
     --kui-code-block-actions-border-width: 1px;
     --kui-code-block-actions-color-border: #3D443D;
+    --kui-code-block-actions-color-border-dark: rgba(255, 255, 255, 0.2);
     --kui-code-block-actions-padding: 4px 8px;
     --kui-code-block-border-radius: 8px;
     --kui-code-block-color-background: #070807;
+    --kui-code-block-color-background-dark: #F9FBF9;
     --kui-code-block-color-text: #F1F3F1;
+    --kui-code-block-color-text-dark: #242824;
     --kui-code-block-line-number-color-text: #D2D7D2;
+    --kui-code-block-line-number-color-text-dark: #697769;
     --kui-collapse-font-family: 'Funnel Sans', Roboto, Helvetica, sans-serif;
     --kui-collapse-title-color-text: #D2D7D2;
     --kui-collapse-title-font-size: 16px;

package/dist/themes/electric-lime-night.mjs

@@ -174,11 +174,15 @@ export const electricLimeNight = {
   '--kui-checkbox-shadow-focus': "0px 0px 0px 4px rgba(241, 243, 241, 0.15)",
   '--kui-code-block-actions-border-width': "1px",
   '--kui-code-block-actions-color-border': "#3D443D",
+  '--kui-code-block-actions-color-border-dark': "rgba(255, 255, 255, 0.2)",
   '--kui-code-block-actions-padding': "4px 8px",
   '--kui-code-block-border-radius': "8px",
   '--kui-code-block-color-background': "#070807",
+  '--kui-code-block-color-background-dark': "#F9FBF9",
   '--kui-code-block-color-text': "#F1F3F1",
+  '--kui-code-block-color-text-dark': "#242824",
   '--kui-code-block-line-number-color-text': "#D2D7D2",
+  '--kui-code-block-line-number-color-text-dark': "#697769",
   '--kui-collapse-font-family': "'Funnel Sans', Roboto, Helvetica, sans-serif",
   '--kui-collapse-title-color-text': "#D2D7D2",
   '--kui-collapse-title-font-size': "16px",

package/dist/tokens/README.md

@@ -2392,16 +2392,24 @@ Component tokens are documented here for reference. They ship **with no default
 --kui-code-block-actions-border-width: initial;
 /* Code block actions toolbar bottom border color. */
 --kui-code-block-actions-color-border: initial;
+/* Code block actions toolbar bottom border color in the dark theme. */
+--kui-code-block-actions-color-border-dark: initial;
 /* Code block actions toolbar inner padding. */
 --kui-code-block-actions-padding: initial;
 /* Code block border radius. */
 --kui-code-block-border-radius: initial;
 /* Code block background color. */
 --kui-code-block-color-background: initial;
+/* Code block background color in the dark theme. */
+--kui-code-block-color-background-dark: initial;
 /* Code block code text color. */
 --kui-code-block-color-text: initial;
+/* Code block code text color in the dark theme. */
+--kui-code-block-color-text-dark: initial;
 /* Code block line number text color. */
 --kui-code-block-line-number-color-text: initial;
+/* Code block line number text color in the dark theme. */
+--kui-code-block-line-number-color-text-dark: initial;
 /* Collapse font family. */
 --kui-collapse-font-family: initial;
 /* Collapse title text color. */
@@ -4981,6 +4989,12 @@ export const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-actions-color-border-dark",
+    description: "Code block actions toolbar bottom border color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-actions-padding",
     description: "Code block actions toolbar inner padding.",
@@ -4999,18 +5013,36 @@ export const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-background-dark",
+    description: "Code block background color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-color-text",
     description: "Code block code text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-text-dark",
+    description: "Code block code text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-line-number-color-text",
     description: "Code block line number text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-line-number-color-text-dark",
+    description: "Code block line number text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-collapse-font-family",
     description: "Collapse font family.",

package/dist/tokens/css/custom-properties.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 28 Jul 2026 15:59:29 GMT
+ * Generated on Tue, 28 Jul 2026 16:08:41 GMT
  * 
  * Kong Konnect Design Tokens
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens

package/dist/tokens/js/cjs/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 28 Jul 2026 15:59:29 GMT
+ * Generated on Tue, 28 Jul 2026 16:08:41 GMT
  *
  * Kong Konnect Design Tokens
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens

package/dist/tokens/js/cjs/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 28 Jul 2026 15:59:29 GMT
+ * Generated on Tue, 28 Jul 2026 16:08:41 GMT
  *
  * Kong Konnect Design Tokens
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens

package/dist/tokens/js/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 28 Jul 2026 15:59:29 GMT
+ * Generated on Tue, 28 Jul 2026 16:08:41 GMT
  *
  * Kong Konnect Design Tokens
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens

package/dist/tokens/js/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 28 Jul 2026 15:59:29 GMT
+ * Generated on Tue, 28 Jul 2026 16:08:41 GMT
  *
  * Kong Konnect Design Tokens
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens

package/dist/tokens/scss/_map.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 28 Jul 2026 15:59:29 GMT
+ * Generated on Tue, 28 Jul 2026 16:08:41 GMT
  * 
  * Kong Konnect Design Tokens
  * GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens

package/dist/tokens/scss/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 28 Jul 2026 15:59:29 GMT
+// Generated on Tue, 28 Jul 2026 16:08:41 GMT
 // 
 // Kong Konnect Design Tokens
 // GitHub: https://github.com/Kong/design-tokens/tree/main/packages/design-tokens

package/dist/tokens/themeable-tokens/index.cjs

@@ -1060,6 +1060,12 @@ const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-actions-color-border-dark",
+    description: "Code block actions toolbar bottom border color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-actions-padding",
     description: "Code block actions toolbar inner padding.",
@@ -1078,18 +1084,36 @@ const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-background-dark",
+    description: "Code block background color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-color-text",
     description: "Code block code text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-text-dark",
+    description: "Code block code text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-line-number-color-text",
     description: "Code block line number text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-line-number-color-text-dark",
+    description: "Code block line number text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-collapse-font-family",
     description: "Collapse font family.",

package/dist/tokens/themeable-tokens/index.d.cts

@@ -1069,6 +1069,12 @@ export declare const KUI_THEMEABLE_TOKENS: readonly [
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-actions-color-border-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-code-block-actions-padding";
     readonly description: string;
@@ -1087,18 +1093,36 @@ export declare const KUI_THEMEABLE_TOKENS: readonly [
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-color-background-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-code-block-color-text";
     readonly description: string;
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-color-text-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-code-block-line-number-color-text";
     readonly description: string;
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-line-number-color-text-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-collapse-font-family";
     readonly description: string;

package/dist/tokens/themeable-tokens/index.d.ts

@@ -1069,6 +1069,12 @@ export declare const KUI_THEMEABLE_TOKENS: readonly [
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-actions-color-border-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-code-block-actions-padding";
     readonly description: string;
@@ -1087,18 +1093,36 @@ export declare const KUI_THEMEABLE_TOKENS: readonly [
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-color-background-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-code-block-color-text";
     readonly description: string;
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-color-text-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-code-block-line-number-color-text";
     readonly description: string;
     readonly category: "component";
     readonly value: string | null;
   },
+  {
+    readonly name: "--kui-code-block-line-number-color-text-dark";
+    readonly description: string;
+    readonly category: "component";
+    readonly value: string | null;
+  },
   {
     readonly name: "--kui-collapse-font-family";
     readonly description: string;

package/dist/tokens/themeable-tokens/index.mjs

@@ -1063,6 +1063,12 @@ export const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-actions-color-border-dark",
+    description: "Code block actions toolbar bottom border color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-actions-padding",
     description: "Code block actions toolbar inner padding.",
@@ -1081,18 +1087,36 @@ export const KUI_THEMEABLE_TOKENS = [
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-background-dark",
+    description: "Code block background color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-color-text",
     description: "Code block code text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-color-text-dark",
+    description: "Code block code text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-code-block-line-number-color-text",
     description: "Code block line number text color.",
     category: "component",
     value: null,
   },
+  {
+    name: "--kui-code-block-line-number-color-text-dark",
+    description: "Code block line number text color in the dark theme.",
+    category: "component",
+    value: null,
+  },
   {
     name: "--kui-collapse-font-family",
     description: "Collapse font family.",

package/package.json

@@ -1,9 +1,31 @@
 {
   "name": "@kong/design-tokens",
-  "version": "3.0.8-pr.701.52269bc.0",
+  "version": "3.1.0",
   "description": "Kong Design Tokens and style dictionary",
   "private": false,
   "type": "module",
+  "scripts": {
+    "build": "pnpm build:clean && pnpm build:tokens && pnpm copy:tokens-doc",
+    "build:tokens": "style-dictionary build --config ./config.mjs",
+    "build:clean": "rimraf ./dist",
+    "copy:tokens-doc": "shx cp -f './dist/tokens/README.md' './TOKENS.md'",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "typecheck": "pnpm typecheck:sandbox",
+    "typecheck:sandbox": "vue-tsc --project ./sandbox/tsconfig.json --noEmit",
+    "sandbox": "pnpm build && run-p sandbox:open sandbox:watch",
+    "sandbox:open": "vite sandbox -c ./sandbox/vite.config.ts",
+    "sandbox:watch": "chokidar \"tokens/**/*.json\" \"themes/**/*.json\" -c \"pnpm build\"",
+    "sandbox:build": "BUILD_SANDBOX=true vite build -c ./sandbox/vite.config.ts -m production",
+    "sandbox:preview": "BUILD_SANDBOX=true vite preview -c ./sandbox/vite.config.ts",
+    "watch:tokens": "pnpm build && chokidar \"tokens/**/*.json\" -c \"pnpm build\"",
+    "theme:scaffold": "node scripts/theme-scaffold.mjs",
+    "theme:preview": "node ../skills/theme-creation/scripts/preview.mjs",
+    "themes:sync": "node scripts/themes-sync.mjs",
+    "themes:unfilled": "node scripts/themes-unfilled.mjs",
+    "pretest": "pnpm build:tokens",
+    "test": "vitest run --config vitest.config.mjs"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -79,26 +101,5 @@
   "volta": {
     "node": "24.13.1"
   },
-  "scripts": {
-    "build": "pnpm build:clean && pnpm build:tokens && pnpm copy:tokens-doc",
-    "build:tokens": "style-dictionary build --config ./config.mjs",
-    "build:clean": "rimraf ./dist",
-    "copy:tokens-doc": "shx cp -f './dist/tokens/README.md' './TOKENS.md'",
-    "lint": "eslint",
-    "lint:fix": "eslint --fix",
-    "typecheck": "pnpm typecheck:sandbox",
-    "typecheck:sandbox": "vue-tsc --project ./sandbox/tsconfig.json --noEmit",
-    "sandbox": "pnpm build && run-p sandbox:open sandbox:watch",
-    "sandbox:open": "vite sandbox -c ./sandbox/vite.config.ts",
-    "sandbox:watch": "chokidar \"tokens/**/*.json\" \"themes/**/*.json\" -c \"pnpm build\"",
-    "sandbox:build": "BUILD_SANDBOX=true vite build -c ./sandbox/vite.config.ts -m production",
-    "sandbox:preview": "BUILD_SANDBOX=true vite preview -c ./sandbox/vite.config.ts",
-    "watch:tokens": "pnpm build && chokidar \"tokens/**/*.json\" -c \"pnpm build\"",
-    "theme:scaffold": "node scripts/theme-scaffold.mjs",
-    "theme:preview": "node ../skills/theme-creation/scripts/preview.mjs",
-    "themes:sync": "node scripts/themes-sync.mjs",
-    "themes:unfilled": "node scripts/themes-unfilled.mjs",
-    "pretest": "pnpm build:tokens",
-    "test": "vitest run --config vitest.config.mjs"
-  }
-}
+  "gitHead": "e709dcdd4545e7797b9ec94955c7d129247bb323"
+}