This is an automated email from the ASF dual-hosted git repository. wu-sheng pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
commit a06001e21422e96c61784ceb04a05e18b9a88c16 Author: Wu Sheng <[email protected]> AuthorDate: Tue May 12 09:53:12 2026 +0800 tokens: lift design tokens into a shared package --- apps/ui/src/main.ts | 2 +- packages/design-tokens/src/index.ts | 59 +++++++++++++++++++++- .../design-tokens/src}/tokens.css | 0 3 files changed, 58 insertions(+), 3 deletions(-) diff --git a/apps/ui/src/main.ts b/apps/ui/src/main.ts index c18f5f5..adaaf72 100644 --- a/apps/ui/src/main.ts +++ b/apps/ui/src/main.ts @@ -20,7 +20,7 @@ import { createPinia } from 'pinia'; import App from './App.vue'; import router from './router'; -import './assets/styles/tokens.css'; +import '@skywalking-horizon-ui/design-tokens/tokens.css'; import './assets/styles/global.css'; const app = createApp(App); diff --git a/packages/design-tokens/src/index.ts b/packages/design-tokens/src/index.ts index ee94ad6..494d32f 100644 --- a/packages/design-tokens/src/index.ts +++ b/packages/design-tokens/src/index.ts @@ -15,5 +15,60 @@ * limitations under the License. */ -// Stage 1.2 will populate this with TS constants mirroring tokens.css. -export {}; +// TS mirror of the CSS custom properties in `tokens.css`. Useful when JS code +// (charts, D3 layouts, ECharts theme generation) needs the same values without +// reading them off the DOM. + +export const tokens = { + bg: { + 0: '#0a0d12', + 1: '#0f131a', + 2: '#151a23', + 3: '#1c222d', + 4: '#232a37', + }, + line: { + 1: '#232a37', + 2: '#2e3645', + 3: '#3a4456', + }, + fg: { + 0: '#e8ecf3', + 1: '#b6bdcc', + 2: '#818a9c', + 3: '#5b6373', + }, + accent: { + base: '#f97316', + light: '#fb923c', + soft: 'rgba(249,115,22,0.14)', + line: 'rgba(249,115,22,0.4)', + }, + semantic: { + ok: '#22c55e', + warn: '#eab308', + err: '#ef4444', + info: '#38bdf8', + purple: '#a855f7', + pink: '#ec4899', + cyan: '#22d3ee', + }, + font: { + sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif', + mono: 'ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace', + }, +} as const; + +// A color scale suitable for chart series. Ordered so adjacent series stay +// distinguishable. +export const chartPalette = [ + tokens.accent.base, + tokens.semantic.info, + tokens.semantic.ok, + tokens.semantic.purple, + tokens.semantic.warn, + tokens.semantic.pink, + tokens.semantic.cyan, + tokens.semantic.err, + tokens.accent.light, +] as const; diff --git a/apps/ui/src/assets/styles/tokens.css b/packages/design-tokens/src/tokens.css similarity index 100% rename from apps/ui/src/assets/styles/tokens.css rename to packages/design-tokens/src/tokens.css
