tegwick
319dd00465
Ran authenticated extract against coulomb.social; session metadata matched anonymous Bubble defaults, so treat docs/design-extract as a public shell baseline (PROVENANCE.md). Capture script now refuses to overwrite storage-state.json with thin anonymous sessions.
147 lines
2.6 KiB
JavaScript
147 lines
2.6 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;
|
|
* };
|
|
* fonts: {
|
|
body: string;
|
|
* };
|
|
* fontSizes: {
|
|
'8': string;
|
|
'12': string;
|
|
'14': string;
|
|
'16': string;
|
|
'18': string;
|
|
'32': string;
|
|
'48': string;
|
|
'13.3333': string;
|
|
* };
|
|
* space: {
|
|
'2': string;
|
|
'32': string;
|
|
'68': string;
|
|
* };
|
|
* radii: {
|
|
sm: string;
|
|
md: string;
|
|
* };
|
|
* shadows: {
|
|
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": "#171717",
|
|
"neutral200": "#ffffff",
|
|
"neutral300": "#616161",
|
|
"neutral400": "#e5e5e5"
|
|
},
|
|
"fonts": {
|
|
"body": "'Arial', sans-serif"
|
|
},
|
|
"fontSizes": {
|
|
"8": "8px",
|
|
"12": "12px",
|
|
"14": "14px",
|
|
"16": "16px",
|
|
"18": "18px",
|
|
"32": "32px",
|
|
"48": "48px",
|
|
"13.3333": "13.3333px"
|
|
},
|
|
"space": {
|
|
"2": "2px",
|
|
"32": "32px",
|
|
"68": "68px"
|
|
},
|
|
"radii": {
|
|
"sm": "4px",
|
|
"md": "8px"
|
|
},
|
|
"shadows": {
|
|
"md": "rgb(97, 97, 97) 2px 2px 8px 0px"
|
|
},
|
|
"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": "#616161"
|
|
},
|
|
"text": {
|
|
"primary": "#000000",
|
|
"secondary": "#ffffff"
|
|
}
|
|
},
|
|
"typography": {
|
|
"fontFamily": "'Times New Roman', sans-serif",
|
|
"h1": {
|
|
"fontSize": "32px",
|
|
"fontWeight": "600",
|
|
"lineHeight": "44.8px"
|
|
},
|
|
"body1": {
|
|
"fontSize": "16px",
|
|
"fontWeight": "400",
|
|
"lineHeight": "normal"
|
|
},
|
|
"body2": {
|
|
"fontSize": "13.3333px",
|
|
"fontWeight": "400",
|
|
"lineHeight": "normal"
|
|
}
|
|
},
|
|
"shape": {
|
|
"borderRadius": 8
|
|
},
|
|
"shadows": [
|
|
"rgb(97, 97, 97) 2px 2px 8px 0px"
|
|
]
|
|
};
|
|
|
|
export default theme;
|