mleku
fe886d2101
- Fix project name from "Plebian" to "Plebeian" throughout codebase
- Replace gooti logo with Plebeian Market logo across all screens
- Update color scheme to match Plebeian Market (pink accent #ff3eb5)
- Add IBM Plex Mono fonts and Reglisse heading font
- Center vault create/import screen content vertically
- Reduce spacing on sync preference screen to prevent scrolling
- Add Enter key support on vault login password field
- Update options page with new logo and color scheme
- Bump version to 0.0.5
Files modified:
- package.json (version bump, name fix)
- projects/*/public/{logo.svg,options.html,manifest.json}
- projects/*/src/app/components/vault-*/*.{html,scss}
- projects/*/src/app/components/welcome/*.html
- projects/common/src/lib/styles/*.scss
- Various component files for branding updates
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
87 lines
2.0 KiB
SCSS
87 lines
2.0 KiB
SCSS
@use "_flex.scss";
|
|
@use "_common.scss";
|
|
@use "_typography.scss";
|
|
@use "_spacing.scss";
|
|
@use "_color.scss";
|
|
@use "_fonts.scss";
|
|
|
|
:root {
|
|
// Sizing
|
|
--size-2: 32px;
|
|
--size: 16px;
|
|
--size-h: 8px;
|
|
--size-hh: 4px;
|
|
|
|
// Fonts
|
|
--font-sans: 'IBM Plex Mono', monospace;
|
|
--font-heading: 'reglisse', sans-serif;
|
|
--font-theylive: 'theylive', sans-serif;
|
|
|
|
// Background colors (dark theme based on market)
|
|
--background: #0a0a0a;
|
|
--background-light: #131313;
|
|
--background-light-hover: #1d1d1d;
|
|
--foreground: #fafafa;
|
|
|
|
// Border colors (adapted from market --border: #dac8d3)
|
|
--border: #3d3d3d;
|
|
--border-light: #4d4d4d;
|
|
|
|
// Primary colors (dark buttons like market, inverted for dark theme)
|
|
--primary: #fafafa;
|
|
--primary-hover: #ff3eb5;
|
|
--primary-foreground: #1d1d1d;
|
|
--primary-foreground-hover: #ff3eb5;
|
|
--primary-border: #fafafa;
|
|
--primary-border-hover: #ff3eb5;
|
|
|
|
// Secondary colors (pink accent - the main brand color from market)
|
|
--secondary: #ff3eb5;
|
|
--secondary-hover: #0a0a0a;
|
|
--secondary-foreground: #0a0a0a;
|
|
--secondary-foreground-hover: #ff3eb5;
|
|
--secondary-border: #ff3eb5;
|
|
--secondary-border-hover: #ff3eb5;
|
|
|
|
// Focus colors (yellow from market)
|
|
--focus: #ffd53d;
|
|
--focus-hover: #0a0a0a;
|
|
--focus-foreground: #0a0a0a;
|
|
--focus-foreground-hover: #ffd53d;
|
|
--focus-border: #ffd53d;
|
|
--focus-border-hover: #ffd53d;
|
|
|
|
// Muted colors
|
|
--muted: #1d1d1d;
|
|
--muted-foreground: #666666;
|
|
|
|
// Accent colors
|
|
--accent: #2a2a2a;
|
|
--accent-foreground: #fafafa;
|
|
|
|
// Destructive colors
|
|
--destructive: #bf4040;
|
|
--destructive-foreground: #fafafa;
|
|
|
|
// Additional brand colors (from market)
|
|
--off-black: #0a0a0a;
|
|
--neo-purple: #ff3eb5;
|
|
--secondary-black: #131313;
|
|
--tertiary-black: #1d1d1d;
|
|
--neo-blue: #18b9fe;
|
|
--neo-yellow: #ffd53d;
|
|
--light-gray: #ebebeb;
|
|
--neo-gray: #f8f8f8;
|
|
|
|
// Ring color for focus states
|
|
--ring: #ff3eb5;
|
|
--input: #996685;
|
|
|
|
// Border radius (from market)
|
|
--radius: 0.25rem;
|
|
--radius-sm: 2px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 24px;
|
|
}
|