starred/openobserve
1
0
Fork 0
mirror of https://github.com/openobserve/openobserve.git synced 2026-11-04 16:09:05 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
4e805038fee978c8e86ea29965f14c467f8f1dc3
openobserve/web/package.json
T
ktx-kirtanktx-vaidehiAbhay Padamaniktx-abhayktx-vaidehiBhargav
 1c849a9c71 refactor(web): migrate templates + shadows to tokens, delete the debt baseline (#13769) 
## What

Deletes `web/scripts/design-debt-baseline.json` — **not by relaxing the
rules, by fixing the debt**. Every design-token category is now
zero-tolerance, SCSS is gone from the app, and 144 hand-written shadow
values collapse into one scale.

## The guard was under-reporting (three separate holes)

1. **Comment contamination.** `check-design-consistency.mjs` fed comment
text into its exemption checks, so a `keep()` comment that merely
*named* `:deep(` / `::after` / `@keyframes` silenced the rule after it —
and a `;` or `{` inside a comment corrupted the offsets, so stripping
comments afterwards couldn't help. Comments are now blanked
(offset-preserving) before the scan. **Uncovered 9 occurrences in 6
files.** Real debt was 110, not 101.
2. **`arbShadow` only scanned the template.** `box-shadow:` in a
`<style>` block and `boxShadow:` in a JS/`:style` object were invisible
— 40 literals sat there while the guard reported zero. It now scans all
three syntaxes across `.vue` and `.ts`.
3. **`rawVarInTemplate` missed the fallback form.**
`border-(--color-x,rgba(…))` and `bg-[var(--color-x,#fff)]` slipped
through. The token is always defined, so the fallback can never fire —
it only hid the read.

## stylelint had never run on 14 files

`postcss-scss` isn't installed, so `postcss-html` **silently skipped**
every `<style lang="scss">` block. The CI step named *"Lint styles
(stylelint — bans legacy --o2-* tokens)"* was a no-op for those files —
including `color-no-hex` and the `.body--dark` selector ban. All 14 are
plain CSS now and `vue/block-lang` errors on `scss`/`sass`/`less`, so it
cannot silently recur.

## What moved

| | before | after |
|---|---|---|
| `rawVarInComponent` (in `<style>`) | 110 | **0** |
| template `x-[var(--color-*)]`, utility exists | 225 | **0** |
| template reads, no utility | 27 | **0** |
| `style` / `:style` colour literals | 29 | **0** |
| `color-mix(token N%, transparent)` | 160 | **0** |
| hand-written shadows | 233 (144 distinct) | **0** |
| SFCs using SCSS | 14 | **0** |

Guard categories: 22 → 24. `rawVarInTemplate` and `arbShadow` are new;
`arbPx` was deleted because main's `local/no-hardcoded-px` ESLint rule
(#13541) now owns px across every file type.

## Shadows are a system now

Stripped of colour, the 144 values were the same handful of geometries
rewritten in px vs rem, with and without an explicit `0` spread.

```
--shadow-xs / sm / md / lg              elevation
--shadow-sticky-left / -right           directional (sticky columns)
--shadow-rail                           inset status rail
--shadow-glow-sm / -md / -lg            coloured, 3 intensities
--shadow-scroll-top / -bottom / -both   scroll affordance
--shadow-ring-hairline                  1px ring where a utility can't reach
--shadow-ai-focus                       AI composer focus glow (flips in dark)
```

Colour is a **separate axis**. Tailwind rewrites a `--shadow-*` token as
`<geometry> var(--tw-shadow-color, <default>)` — verified by compiling a
probe, and it holds for multi-layer tokens — so a template writes
`shadow-md shadow-ai-accent/35`. A plain stylesheet can't add a utility,
so the role and glow tokens read `--glow-color`; that keeps the pipeline
canvas colour-coding nodes by type from CSS and lets the status rail be
painted per row from JS.

Also reclassified: `0 0 0 2px <colour>` is a **ring**, not a shadow, and
`0 1px 0 0 <colour>` is a **border**.

## color-mix, analysed by intent

All 331 occurrences were classified rather than treated as one problem:

- **160** mixed a token with `transparent` — only an alpha change, so
it's Tailwind's `/N` modifier written the long way (verified: `/N`
compiles to `color-mix(in oklab, <token> N%, transparent)`, and mixing
with `transparent` is premultiplied, so the interpolation space doesn't
matter)
- **81** blended two colours — a derived colour, so it's a token now
(~50 minted)
- **75** were shadow/ring geometry, handled by the scale
- **8 gradients + 1 `calc()`-driven percentage** genuinely have no
utility form and remain; the guard exempts gradient/mask/filter
contexts, matching what the style-block counter already exempts

## Merge with main

Main was running the same migration in parallel (**#13541 "px to rem"**
removed all SCSS, added `no-hardcoded-px`, and built its own shadow
scale), so the merge collided in 68 files / 155 hunks. Resolved by
taking main's source files and re-applying this branch on top, with the
guards driving convergence (429 → 0) rather than hand-resolving hunks.

On shadows, **main's structure wins** — geometry in `semantic.css`
`@theme`, colours as `--shadow-*-c*` sub-tokens, wrapped in its px
disable; its `--shadow-sm/md/lg`, `--shadow-scroll-*` and
`--shadow-glow` keep their definitions. This branch adds what main
didn't have: `xs`, the directional/inset roles, and the
elevation-matched coloured glows.

## New tokens

No new *colours* — each names a value a component already hardcoded,
because a registered palette utility (`text-orange-500`) is banned by
`rawPalette`, so "just register the ramp" was never available.

`--color-splitter-hover`, `--color-status-flaky` (+`-text`),
`--color-chat-bubble-user-border`, `--color-thread-avatar-bg`,
`--color-thread-accent-strong`, `--color-menu-badge-ring`,
`--color-progress-track-fill`, `--color-ingest-accent-*` (5), ~50
derived blend tokens, plus `--color-border-strong` /
`--color-border-subtle` / `--color-warning-300` registered for utility
use.

## Visual deltas to review

Everything else is value-preserving. These are not:

- **4 hover accents** move from a fixed `primary-600` to `accent` — 600
→ 400 **in dark only** (2 chevrons, an empty-state icon fill, one link)
- **sticky table header** in `TraceDetailsSidebar` was a fixed light
grey that never flipped; now `border-default`, so it themes
- **shadow canonicalization** snaps near-identical geometries together
and moves ~40 hardcoded `rgba(0,0,0,x)` onto the scale's token colour

Highest-surface single file: `AlertSettingsHelpDrawer.vue` — a whole
style block deleted with ~44 class names moved into template utilities.

## Verification

`lint:design` · `lint:tokens` · `lint:token-purity` · `lint:styles` ·
`format:check` · `lint:ci` · `vue-tsc` — all clean.
**94 spec files covering every file this branch touches: 4395 passing, 0
failing.**

Not run: the full 1236-file unit suite, Playwright/E2E, and any browser
visual check.

---------

Co-authored-by: ktx-vaidehi <vaidehi.akhani@kiara.tech>
Co-authored-by: Abhay Padamani <141122205+ktx-abhay@users.noreply.github.com>
Co-authored-by: ktx-abhay <abhay.padamani@kiara.tech>
Co-authored-by: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Co-authored-by: Bhargav <BJP232004@GMAIL.COM>
2026-08-17 11:46:07 +00:00

177 lines
6.3 KiB
JSON
Raw Blame History

{
"name": "zinc-observe-web",
"version": "0.1.0",
"license": "AGPL-3.0",
"private": true,
"type": "module",
"engines": {
"node": ">=20"
},
"scripts": {
"dev": "vite --base /web/",
"devcloud": "NODE_ENV=devcloud vite --mode=devcloud",
"build-alpha1": "run-p type-check build-only-alpha1",
"build-cloud-prod": "run-p type-check build-only-cloud-prod",
"build": "run-p type-check build-only",
"postbuild": "run-p copy",
"preview": "vite preview",
"copy": "cd dist && mkdir src && cd src && mkdir assets && cd .. && cd .. && cp -r src/assets/* dist/src/assets/",
"test:unit": "vitest --environment jsdom --root src/",
"test:unit:coverage": "vitest --coverage --run",
"test:coverage:check": "./coverage.sh check",
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
"build-only": "vite build",
"build-only-alpha1": "vite build --mode=alpha1",
"build-only-cloud-prod": "vite build --mode=production",
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
"type-check:app": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
"type-check:composite-alerts": "vue-tsc --noEmit -p tsconfig.composite-alerts-tests.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
"lint:ci": "eslint \"src/**/*.{vue,ts,js,css}\" --no-fix",
"lint:styles": "stylelint \"src/**/*.{css,vue}\"",
"lint:tokens": "node scripts/check-css-tokens.mjs",
"lint:token-purity": "node scripts/check-token-purity.mjs",
"lint:design": "node scripts/check-design-consistency.mjs",
"lint:design:strict": "node scripts/check-design-consistency.mjs",
"format": "prettier --write \"src/**/*.{ts,tsx,vue,js,json,scss,css,md}\"",
"format:check": "prettier --check \"src/**/*.{ts,tsx,vue,js,json,scss,css,md}\"",
"verify": "npm run type-check:app && npm run lint:ci && npm run lint:styles && npm run lint:tokens && npm run lint:token-purity && npm run lint:design:strict",
"verify:all": "npm run verify && npm run test:coverage:check"
},
"dependencies": {
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@joakimono/echarts-extension-leaflet": "^1.1.0",
"@openobserve/browser-logs": "0.4.2-beta.2",
"@openobserve/browser-rum": "0.4.2-beta.2",
"@openobserve/node-sql-parser": "^0.1.5",
"@openobserve/rrweb-player": "^0.2.1",
"@rudderstack/analytics-js": "3.6.0",
"@tanstack/vue-form": "^1.33.3",
"@tanstack/vue-table": "^8.21.3",
"@tanstack/vue-virtual": "^3.13.35",
"@types/js-yaml": "^4.0.9",
"@vue-flow/background": "^1.3.2",
"@vue-flow/controls": "^1.1.3",
"@vue-flow/core": "^1.48.2",
"acorn": "^8.18.0",
"acorn-walk": "^8.3.5",
"cron-parser": "^5.7.0",
"d3-force": "^3.0.0",
"d3-scale": "^4.0.2",
"date-fns": "^4.4.0",
"date-fns-tz": "^3.2.0",
"dompurify": "^3.4.13",
"echarts": "^6.1.0",
"echarts-gl": "^2.1.0",
"escodegen": "^2.1.0",
"flag-icons": "^7.5.0",
"gridstack": "^12.4.2",
"highlight.js": "^11.11.1",
"js-beautify": "^1.15.4",
"js-cookie": "^3.0.8",
"js-yaml": "^4.3.1",
"json-2-csv": "^5.5.11",
"jszip": "^3.10.1",
"leaflet": "^1.9.4",
"lodash-es": "^4.18.1",
"lucide-vue-next": "^0.562.0",
"luxon": "^3.7.2",
"marked": "^17.0.1",
"moment": "^2.30.1",
"moment-timezone": "^0.6.3",
"monaco-editor": "^0.52.2",
"reka-ui": "^2.10.1",
"reodotdev": "^1.1.0",
"rollup-plugin-node-polyfills": "^0.2.1",
"rollup-plugin-polyfill-node": "^0.13.0",
"sql-formatter": "^15.8.2",
"tw-animate-css": "^1.4.0",
"uuid": "^14.0.1",
"vue": "^3.5.41",
"vue-drag-resize": "^1.5.4",
"vue-draggable-next": "^2.3.0",
"vue-i18n": "^11.4.8",
"vue-router": "^4.6.4",
"vuex": "^4.1.0",
"zod": "^4.4.3"
},
"devDependencies": {
"@cypress/vue": "^6.0.3",
"@cypress/webpack-dev-server": "^5.6.2",
"@eslint/css": "^1.4.0",
"@eslint/css-tree": "^4.0.5",
"@iconify-json/majesticons": "^1.2.5",
"@iconify-json/material-symbols": "^1.2.88",
"@iconify-json/mdi": "^1.2.3",
"@iconify-json/octicon": "^1.2.31",
"@iconify-json/si": "^1.2.17",
"@intlify/core-base": "^11.4.8",
"@intlify/eslint-plugin-vue-i18n": "^4.5.1",
"@rushstack/eslint-patch": "^1.16.1",
"@tailwindcss/postcss": "^4.3.3",
"@tailwindcss/typography": "^0.5.20",
"@tailwindcss/vite": "^4.3.3",
"@types/d3-force": "^3.0.10",
"@types/d3-scale": "^4.0.9",
"@types/fs-extra": "^11.0.4",
"@types/js-cookie": "^3.0.6",
"@types/jsdom": "^27.0.0",
"@types/leaflet": "^1.9.22",
"@types/lodash-es": "^4.17.12",
"@types/luxon": "^3.7.3",
"@types/node": "^25.0.3",
"@types/uuid": "^11.0.0",
"@typescript-eslint/eslint-plugin": "^8.66.0",
"@typescript-eslint/parser": "^8.66.0",
"@vitejs/plugin-vue": "^6.0.8",
"@vitejs/plugin-vue-jsx": "^5.1.6",
"@vitest/coverage-v8": "^4.1.10",
"@vitest/ui": "^4.1.10",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.9.0",
"@vue/test-utils": "^2.4.11",
"@vue/tsconfig": "^0.8.1",
"autoprefixer": "^10.5.4",
"c8": "^10.1.3",
"cypress": "^15.20.0",
"cypress-localstorage-commands": "^2.3.0",
"dotenv": "^17.4.2",
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
"eslint-formatter-unix": "^9.0.1",
"eslint-plugin-cypress": "^5.2.0",
"eslint-plugin-vue": "^10.10.0",
"fs-extra": "^11.4.0",
"happy-dom": "^20.11.1",
"jsdom": "^27.4.0",
"msw": "^2.15.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.5.26",
"postcss-html": "^1.8.1",
"prettier": "^3.9.6",
"prettier-plugin-tailwindcss": "^0.8.1",
"rollup-plugin-analyzer": "^4.0.0",
"rollup-plugin-visualizer": "^6.0.5",
"sass": "^1.102.0",
"sass-loader": "^16.0.6",
"start-server-and-test": "^2.1.3",
"stylelint": "^17.14.1",
"tailwindcss": "^4.1.18",
"typescript": "~5.9.3",
"unplugin-icons": "^23.0.1",
"vite": "^7.3.2",
"vite-plugin-istanbul": "^7.2.1",
"vite-plugin-monaco-editor": "^1.1.0",
"vitest": "^4.1.10",
"vitest-canvas-mock": "^1.1.4",
"vue-tsc": "^3.3.9"
},
"overrides": {
"axios": "1.18.0",
"sockjs": {
"uuid": "11.1.1"
}
}
}
Reference in New Issue View Git Blame Copy Permalink