tegwick
6fe263444a
Session probe lands on /vw_pages (Research). Use main designlang extract with --cookie-file — pack ignores auth. 39 artifacts under docs/design-extract; tolerate designlang late summary crash when cores exist.
171 lines
3.2 KiB
JavaScript
171 lines
3.2 KiB
JavaScript
// React Theme — extracted from https://coulomb.social
|
|
// Compatible with: Chakra UI, Stitches, Vanilla Extract, or any CSS-in-JS
|
|
|
|
/**
|
|
* TypeScript type definition for this theme:
|
|
*
|
|
* interface Theme {
|
|
* colors: {
|
|
primary: string;
|
|
background: string;
|
|
foreground: string;
|
|
neutral50: string;
|
|
neutral100: string;
|
|
neutral200: string;
|
|
neutral300: string;
|
|
neutral400: string;
|
|
neutral500: string;
|
|
neutral600: string;
|
|
* };
|
|
* fonts: {
|
|
body: string;
|
|
* };
|
|
* fontSizes: {
|
|
'14': string;
|
|
'16': string;
|
|
'18': string;
|
|
'24': string;
|
|
'42': string;
|
|
'50': string;
|
|
'13.3333': string;
|
|
* };
|
|
* space: {
|
|
'1': string;
|
|
'24': string;
|
|
'32': string;
|
|
'40': string;
|
|
'60': string;
|
|
'80': string;
|
|
'96': string;
|
|
'320': string;
|
|
* };
|
|
* radii: {
|
|
sm: string;
|
|
md: string;
|
|
lg: string;
|
|
xl: string;
|
|
* };
|
|
* shadows: {
|
|
sm: string;
|
|
md: string;
|
|
* };
|
|
* states: {
|
|
* hover: { opacity: number };
|
|
* focus: { opacity: number };
|
|
* active: { opacity: number };
|
|
* disabled: { opacity: number };
|
|
* };
|
|
* }
|
|
*/
|
|
|
|
export const theme = {
|
|
"colors": {
|
|
"primary": "#d08728",
|
|
"background": "#ffffff",
|
|
"foreground": "#000000",
|
|
"neutral50": "#000000",
|
|
"neutral100": "#efefef",
|
|
"neutral200": "#616161",
|
|
"neutral300": "#373737",
|
|
"neutral400": "#171717",
|
|
"neutral500": "#ffffff",
|
|
"neutral600": "#e5e5e5"
|
|
},
|
|
"fonts": {
|
|
"body": "'Inter', sans-serif"
|
|
},
|
|
"fontSizes": {
|
|
"14": "14px",
|
|
"16": "16px",
|
|
"18": "18px",
|
|
"24": "24px",
|
|
"42": "42px",
|
|
"50": "50px",
|
|
"13.3333": "13.3333px"
|
|
},
|
|
"space": {
|
|
"1": "1px",
|
|
"24": "24px",
|
|
"32": "32px",
|
|
"40": "40px",
|
|
"60": "60px",
|
|
"80": "80px",
|
|
"96": "96px",
|
|
"320": "320px"
|
|
},
|
|
"radii": {
|
|
"sm": "4px",
|
|
"md": "8px",
|
|
"lg": "15px",
|
|
"xl": "20px"
|
|
},
|
|
"shadows": {
|
|
"sm": "rgb(170, 170, 170) 2px 2px 4px 0px",
|
|
"md": "rgba(23, 23, 23, 0.1) 2px 2px 8px 2px"
|
|
},
|
|
"states": {
|
|
"hover": {
|
|
"opacity": 0.08
|
|
},
|
|
"focus": {
|
|
"opacity": 0.12
|
|
},
|
|
"active": {
|
|
"opacity": 0.16
|
|
},
|
|
"disabled": {
|
|
"opacity": 0.38
|
|
}
|
|
}
|
|
};
|
|
|
|
// MUI v5 theme
|
|
export const muiTheme = {
|
|
"palette": {
|
|
"primary": {
|
|
"main": "#d08728",
|
|
"light": "hsl(34, 68%, 64%)",
|
|
"dark": "hsl(34, 68%, 34%)"
|
|
},
|
|
"background": {
|
|
"default": "#ffffff",
|
|
"paper": "#e5e5e5"
|
|
},
|
|
"text": {
|
|
"primary": "#000000",
|
|
"secondary": "#171717"
|
|
}
|
|
},
|
|
"typography": {
|
|
"fontFamily": "'Helvetica', sans-serif",
|
|
"h1": {
|
|
"fontSize": "42px",
|
|
"fontWeight": "700",
|
|
"lineHeight": "normal"
|
|
},
|
|
"h2": {
|
|
"fontSize": "24px",
|
|
"fontWeight": "600",
|
|
"lineHeight": "36px"
|
|
},
|
|
"body1": {
|
|
"fontSize": "16px",
|
|
"fontWeight": "400",
|
|
"lineHeight": "normal"
|
|
},
|
|
"body2": {
|
|
"fontSize": "14px",
|
|
"fontWeight": "500",
|
|
"lineHeight": "19.6px"
|
|
}
|
|
},
|
|
"shape": {
|
|
"borderRadius": 8
|
|
},
|
|
"shadows": [
|
|
"rgb(170, 170, 170) 2px 2px 4px 0px",
|
|
"rgba(23, 23, 23, 0.1) 2px 2px 8px 2px"
|
|
]
|
|
};
|
|
|
|
export default theme;
|