@velora-cms/design-tokens 0.11.0 → 0.14.0

package/README.md

@@ -23,4 +23,8 @@ console.log(tokens.color.primary[500]);
 @import "@velora-cms/design-tokens/tokens.css";
 ```
 
-Part of [Velora](https://github.com/velora-cms/velora). Apache-2.0.
+## Source & support
+
+Velora's source is not public. Questions and bug reports:
+[velora-devkit](https://github.com/velora-cms/velora-devkit). Docs at
+https://docs.velora-cms.com. Apache-2.0.

package/dist/tailwind-theme.d.ts

@@ -12,6 +12,7 @@ export declare const tailwindTheme: {
         background: Record<"base" | "elevated" | "subtle" | "overlay" | "hover", string>;
         text: Record<"primary" | "secondary" | "tertiary" | "disabled" | "inverse", string>;
         border: Record<"subtle" | "default" | "strong", string>;
+        code: Record<"string" | "keyword" | "tag" | "attr" | "comment" | "punctuation", string>;
     };
     fontFamily: {
         sans: string;

package/dist/tailwind-theme.js

@@ -33,6 +33,7 @@ export const tailwindTheme = {
         background: scaleRefs(tokens.color.background, 'color-background'),
         text: scaleRefs(tokens.color.text, 'color-text'),
         border: scaleRefs(tokens.color.border, 'color-border'),
+        code: scaleRefs(tokens.color.code, 'color-code'),
     },
     fontFamily: {
         sans: 'var(--font-family-sans)',

package/dist/theme-types.d.ts

@@ -18,6 +18,7 @@ export interface ThemeColorOverrides {
     background?: Partial<VeloraDesignTokens['color']['background']>;
     text?: Partial<VeloraDesignTokens['color']['text']>;
     border?: Partial<VeloraDesignTokens['color']['border']>;
+    code?: Partial<VeloraDesignTokens['color']['code']>;
 }
 export interface ThemeTokenOverrides {
     color?: ThemeColorOverrides;

package/dist/themes/dark.js

@@ -48,6 +48,14 @@ export const darkTheme = {
                 success: { '100': '#223A1E', '600': '#7FC46E', '700': '#8FD07F' },
                 warning: { '100': '#3D3016', '600': '#E0AA4B', '800': '#EABB6A' },
                 danger: { '100': '#45201D', '600': '#E8776E', '700': '#F0918A' },
+                code: {
+                    keyword: '#7CC0E8',
+                    tag: '#9A9DE3',
+                    string: '#7FC46E',
+                    attr: '#E0AA4B',
+                    comment: '#A3A8A6',
+                    punctuation: '#C5C9C6',
+                },
                 neutral: {
                     '50': '#1F2221',
                     '100': '#232625',

package/dist/tokens.css

@@ -80,6 +80,12 @@
   --color-border-default: #E1DED5;
   --color-border-subtle: #ECEAE3;
   --color-border-strong: #CFCBC0;
+  --color-code-keyword: #1A5E8F;
+  --color-code-tag: #4B4FB0;
+  --color-code-string: #306626;
+  --color-code-attr: #96631A;
+  --color-code-comment: #6B6659;
+  --color-code-punctuation: #4A463C;
   --spacing-0: 0;
   --spacing-1: 0.25rem;
   --spacing-2: 0.5rem;
@@ -168,6 +174,12 @@
   --color-danger-100: #45201D;
   --color-danger-600: #E8776E;
   --color-danger-700: #F0918A;
+  --color-code-keyword: #7CC0E8;
+  --color-code-tag: #9A9DE3;
+  --color-code-string: #7FC46E;
+  --color-code-attr: #E0AA4B;
+  --color-code-comment: #A3A8A6;
+  --color-code-punctuation: #C5C9C6;
   --color-neutral-50: #1F2221;
   --color-neutral-100: #232625;
   --color-neutral-200: #2C302E;

package/dist/tokens.js

@@ -117,6 +117,19 @@ export const tokens = {
             subtle: '#ECEAE3',
             strong: '#CFCBC0',
         },
+        // Code-syntax roles (S195), approved mockup: reuses existing hues
+        // (primary-700 / secondary-600 / success-700 / warning-700) for
+        // keyword/tag/string/attr so highlighted code stays in the brand
+        // palette; comment/punctuation are quiet warm-stone steps between
+        // neutral-600 and neutral-700 built for this role specifically.
+        code: {
+            keyword: '#1A5E8F',
+            tag: '#4B4FB0',
+            string: '#306626',
+            attr: '#96631A',
+            comment: '#6B6659',
+            punctuation: '#4A463C',
+        },
     },
     typography: {
         fontFamily: {

package/dist/tokens.json

@@ -96,6 +96,14 @@
       "default": "#E1DED5",
       "subtle": "#ECEAE3",
       "strong": "#CFCBC0"
+    },
+    "code": {
+      "keyword": "#1A5E8F",
+      "tag": "#4B4FB0",
+      "string": "#306626",
+      "attr": "#96631A",
+      "comment": "#6B6659",
+      "punctuation": "#4A463C"
     }
   },
   "typography": {

package/dist/types.d.ts

@@ -39,6 +39,14 @@ export interface VeloraDesignTokens {
             subtle: string;
             strong: string;
         };
+        code: {
+            keyword: string;
+            tag: string;
+            string: string;
+            attr: string;
+            comment: string;
+            punctuation: string;
+        };
     };
     typography: {
         fontFamily: {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@velora-cms/design-tokens",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "description": "Velora's design token source, generating the Tailwind config and CSS variables consumed by the UI library, admin UI, and plugin UIs.",
   "engines": {
     "node": ">=22.12"
   },
   "bugs": {
-    "url": "https://github.com/velora-cms/velora/issues"
+    "url": "https://github.com/velora-cms/velora-devkit/issues"
   },
   "type": "module",
   "main": "dist/index.js",
@@ -17,9 +17,9 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/velora-cms/velora.git",
-    "directory": "packages/design-tokens"
+    "url": "git+https://github.com/velora-cms/velora-devkit.git"
   },
+  "homepage": "https://velora-cms.com",
   "publishConfig": {
     "access": "public"
   },