Doormile/Doormilexpress_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the ui changes and frully removed the mui and converted into astryx and color change

Browse Source
This commit is contained in:
dharaneesh-r
2026-08-13 18:24:04 +05:30
parent 498bb7cbc0
commit 8cd8e34b11
122 changed files with 15111 additions and 22411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/themes/astryx.js
View File

@@ -1,15 +1,39 @@
// Astryx brand theme — extends the stock "neutral" theme with Doormile's
// brand red so migrated surfaces match the existing DT token palette
// brand colour so migrated surfaces match the existing DT token palette
// (see themes/dt/tokens.js). Runtime-injected (not `astryx theme build`)
// since this repo doesn't do SSR — see `astryx docs theme`.
import { defineTheme } from '@astryxdesign/core/theme';
import { neutralTheme } from '@astryxdesign/theme-neutral';
import { DT } from 'themes/dt/tokens';
// The brand is pure black. Astryx's `color.accent` generator derives a whole
// ramp from the accent's hue + lightness, and black has NO hue and zero
// lightness — feeding it `#000000` made the generator clamp it into a mid-tone
// and invent a hue, which rendered every primary button magenta (#A23760).
//
// So the accent tokens are pinned explicitly via `tokens` instead, which
// `defineTheme` documents as taking precedence over scale-generated values.
// Each entry is a [light, dark] pair. `--color-accent-muted` has to be listed
// too: the generated value inlines the accent hex inside a color-mix() rather
// than referencing var(--color-accent), so it does not follow automatically.
const BRAND_ON_LIGHT = DT.brand; // #000000
const BRAND_ON_DARK = '#FFFFFF';
export const doormileTheme = defineTheme({
name: 'doormile',
extends: neutralTheme,
color: { accent: DT.brand, neutralStyle: 'cool' },
color: { neutralStyle: 'cool' },
tokens: {
'--color-accent': [BRAND_ON_LIGHT, BRAND_ON_DARK],
'--color-icon-accent': [BRAND_ON_LIGHT, BRAND_ON_DARK],
'--color-text-accent': [BRAND_ON_LIGHT, BRAND_ON_DARK],
// Text/icon colour that sits ON a filled accent surface — inverted.
'--color-on-accent': ['#FFFFFF', '#000000'],
'--color-accent-muted': [
`color-mix(in srgb, ${BRAND_ON_LIGHT} 12%, transparent)`,
`color-mix(in srgb, ${BRAND_ON_DARK} 20%, transparent)`
]
},
components: {
card: { base: { borderRadius: `${DT.radiusCard}px` } },
'text-input': { base: { borderRadius: `${DT.radiusInner}px` } }