react-chrono
Version:
A Modern Timeline component for React
102 lines • 3.51 kB
TypeScript
/**
* @deprecated This file is deprecated. Use `tokens` from '@/styles/tokens/index.css' instead.
*
* This legacy token contract is maintained for backward compatibility only.
* It will be removed in a future major version.
*
* Migration guide:
* - Old: `import { vars } from '@/styles/tokens.css'`
* - New: `import { tokens } from '@/styles/tokens/index.css'`
*
* Token mapping:
* - `vars.color` → `tokens.semantic.color`
* - `vars.space` → `tokens.semantic.spacing`
* - `vars.radius` → `tokens.semantic.borderRadius`
* - `vars.font` → `tokens.semantic.typography`
* - `vars.zIndex` → `tokens.semantic.zIndex`
* - `vars.shadow` → `tokens.semantic.shadow`
* - `vars.transition` → `tokens.semantic.motion`
*/
export declare const vars: {
color: {
text: `var(--${string})`;
background: `var(--${string})`;
primary: `var(--${string})`;
secondary: `var(--${string})`;
muted: `var(--${string})`;
cardBg: `var(--${string})`;
cardTitle: `var(--${string})`;
cardSubtitle: `var(--${string})`;
cardDetails: `var(--${string})`;
cardDetailsBackground: `var(--${string})`;
cardMediaBg: `var(--${string})`;
nestedCardBg: `var(--${string})`;
nestedCardTitle: `var(--${string})`;
nestedCardSubtitle: `var(--${string})`;
nestedCardDetails: `var(--${string})`;
nestedCardDetailsBackground: `var(--${string})`;
icon: `var(--${string})`;
iconBackground: `var(--${string})`;
titleActive: `var(--${string})`;
details: `var(--${string})`;
toolbarBg: `var(--${string})`;
toolbarBtnBg: `var(--${string})`;
toolbarText: `var(--${string})`;
buttonBorder: `var(--${string})`;
buttonHoverBorder: `var(--${string})`;
buttonHoverBg: `var(--${string})`;
buttonActiveBg: `var(--${string})`;
buttonActiveIcon: `var(--${string})`;
buttonActiveBorder: `var(--${string})`;
searchHighlight: `var(--${string})`;
darkToggleActiveBg: `var(--${string})`;
darkToggleActiveIcon: `var(--${string})`;
darkToggleActiveBorder: `var(--${string})`;
darkToggleGlow: `var(--${string})`;
shadow: `var(--${string})`;
glow: `var(--${string})`;
};
space: {
xs: `var(--${string})`;
sm: `var(--${string})`;
md: `var(--${string})`;
lg: `var(--${string})`;
xl: `var(--${string})`;
};
radius: {
sm: `var(--${string})`;
md: `var(--${string})`;
lg: `var(--${string})`;
};
font: {
body: `var(--${string})`;
mono: `var(--${string})`;
};
zIndex: {
base: `var(--${string})`;
timelineCard: `var(--${string})`;
controls: `var(--${string})`;
popover: `var(--${string})`;
outlinePane: `var(--${string})`;
verticalItem: `var(--${string})`;
};
shadow: {
elevationSm: `var(--${string})`;
elevationMd: `var(--${string})`;
elevationLg: `var(--${string})`;
insetSm: `var(--${string})`;
focusRing: `var(--${string})`;
};
transition: {
duration: {
fast: `var(--${string})`;
normal: `var(--${string})`;
slow: `var(--${string})`;
};
easing: {
standard: `var(--${string})`;
emphasized: `var(--${string})`;
};
};
};
//# sourceMappingURL=tokens.css.d.ts.map