89 lines
2.7 KiB
SCSS
89 lines
2.7 KiB
SCSS
@use '@lucas-labs/lui-micro' as lui;
|
|
@use './_utils/color-utils' as c;
|
|
@use './theme' as theme;
|
|
|
|
$is-dark: true;
|
|
$brand: #a6c6f7;
|
|
|
|
$colors: (
|
|
primary: c.variants($brand),
|
|
secondary: c.variants(hsl(240, 25%, 14%)), // same as elevation/6
|
|
text: #e6edf3,
|
|
subtle: hsl(240, 10%, 70%), // same as elevation/10
|
|
palette: (
|
|
'red': c.variants(#f38ba8), // red
|
|
'orange': c.variants(#fab387), // peach
|
|
'yellow': c.variants(#f9e2af), // yellow
|
|
'olive': c.variants(#e2f095),
|
|
'green': c.variants(#00E676), // green
|
|
'teal': c.variants(#94e2d5), // teal
|
|
'blue': c.variants(#89b4fa), // blue
|
|
'violet': c.variants(#b4befe), // lavender
|
|
'purple': c.variants(#9b6bf5), // mauve
|
|
'pink': c.variants(#f5c2e7), // pink
|
|
'brown': c.variants(#f2cdcd), // flamingo
|
|
'black': c.variants(#181825), // black
|
|
'white': c.variants(#e6edf3), // white
|
|
),
|
|
elevation: (
|
|
'1': hsl(240, 33%, 01%),
|
|
'2': hsl(240, 33%, 04%),
|
|
'3': hsl(240, 33%, 06%),
|
|
'4': hsl(240, 30%, 08%),
|
|
'5': hsl(240, 28%, 12%),
|
|
'6': hsl(240, 25%, 14%),
|
|
'7': hsl(240, 20%, 30%),
|
|
'8': hsl(240, 20%, 40%),
|
|
'9': hsl(240, 10%, 50%),
|
|
'10': hsl(240, 10%, 70%),
|
|
'11': hsl(240, 10%, 80%),
|
|
'12': hsl(240, 10%, 90%),
|
|
)
|
|
);
|
|
|
|
$variables: (
|
|
'font-size': (
|
|
'xs': .714rem,
|
|
'sm': .857rem,
|
|
'md': 1rem,
|
|
'lg': 1.143rem,
|
|
'xl': 1.286rem,
|
|
),
|
|
'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
|
|
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
|
|
'measure': (
|
|
'.25x': 4px,
|
|
'.375x': 6px,
|
|
'.5x': 8px,
|
|
'.75x': 12px,
|
|
'.875x': 14px,
|
|
'1x': 16px,
|
|
'1.25x': 20px,
|
|
'1.5x': 24px,
|
|
'2x': 32px,
|
|
'2.5x': 40px,
|
|
'3x': 48px,
|
|
'4x': 64px,
|
|
),
|
|
'navbar-logo': (
|
|
'width': 56px,
|
|
'height': 20px,
|
|
),
|
|
'repo-home': (
|
|
'sidebar-width': 296px,
|
|
)
|
|
);
|
|
|
|
// init lui-micro, css-vars only (no reboot, no basic)
|
|
@include lui.init(
|
|
$theme: (colors: $colors, variables: $variables),
|
|
$options: (
|
|
reboot: false,
|
|
basic: false,
|
|
fg-var-name: 'text',
|
|
bg-var-name: 'elevation/1',
|
|
),
|
|
);
|
|
|
|
@include theme.make-theme($is-dark); |