feat: ✨ light and auto themes
Lucas Colombo
1 month ago
parent
701e67c177
commit
a0d2fee502
@ -1,2 +1,2 @@
|
||||
// @import "./theme-light.css" (prefers-color-scheme: light);
|
||||
@import "./theme-light.css" (prefers-color-scheme: light);
|
||||
@import "./theme-dark.css" (prefers-color-scheme: dark);
|
||||
@ -1,90 +1,89 @@
|
||||
// @use '@lucas-labs/lui-micro' as lui;
|
||||
// @use './utils/color-utils' as c;
|
||||
// @use './theme' as theme;
|
||||
@use '@lucas-labs/lui-micro' as lui;
|
||||
@use './_utils/color-utils' as c;
|
||||
@use './theme' as theme;
|
||||
|
||||
// $is-dark: false;
|
||||
$is-dark: false;
|
||||
$brand: #6296e2;
|
||||
|
||||
// $brand: #6296e2;
|
||||
$colors: (
|
||||
primary: c.variants($brand),
|
||||
secondary: c.variants(#999cc5),
|
||||
text: #4c4f69,
|
||||
subtle: #6c6f85, // same as elevation/10
|
||||
palette: (
|
||||
'red': c.variants(#d20f39), // red
|
||||
'orange': c.variants(#fe640b), // peach
|
||||
'yellow': c.variants(#df8e1d), // yellow
|
||||
'olive': c.variants(#e2f095),
|
||||
'green': c.variants(#11752d), // green
|
||||
'teal': c.variants(#179299), // teal
|
||||
'blue': c.variants(#1e66f5), // blue
|
||||
'violet': c.variants(#7287fd), // lavender
|
||||
'purple': c.variants(#8652e7), // mauve
|
||||
'pink': c.variants(#ea76cb), // pink
|
||||
'brown': c.variants(#dd7878), // flamingo
|
||||
'black': c.variants(#181825), // black
|
||||
'white': c.variants(#e6edf3), // white
|
||||
),
|
||||
elevation: (
|
||||
'1': #dce0e8, // elevation/1
|
||||
'2': #e6e9ef, // elevation/2
|
||||
'3': #eff1f5, // elevation/3
|
||||
'4': #dcdfe7, // elevation/4
|
||||
'5': #bcc0cc, // elevation/5
|
||||
'6': #acb0be, // elevation/6
|
||||
'7': #9ca0b0, // elevation/7
|
||||
'8': #8c8fa1, // elevation/8
|
||||
'9': #7c7f93, // elevation/9
|
||||
'10': #6c6f85, // elevation/10
|
||||
'11': #5c5f77, // elevation/11
|
||||
'12': #4c4f69, // elevation/12
|
||||
)
|
||||
);
|
||||
|
||||
// $colors: (
|
||||
// theme: (
|
||||
// 'rosewater': c.variants(#dc8a78),
|
||||
// 'flamingo': c.variants(#dd7878),
|
||||
// 'pink': c.variants(#ea76cb),
|
||||
// 'mauve': c.variants(#8652e7),
|
||||
// 'red': c.variants(#d20f39),
|
||||
// 'maroon': c.variants(#e64553),
|
||||
// 'peach': c.variants(#fe640b),
|
||||
// 'yellow': c.variants(#df8e1d),
|
||||
// 'green': c.variants(#11752d),
|
||||
// 'teal': c.variants(#179299),
|
||||
// 'sky': c.variants(#04a5e5),
|
||||
// 'sapphire': c.variants(#209fb5),
|
||||
// 'blue': c.variants(#1e66f5),
|
||||
// 'lavender': c.variants(#7287fd),
|
||||
// 'black': c.variants(#181825),
|
||||
// 'white': c.variants(#e6edf3),
|
||||
// ),
|
||||
// text: #4c4f69,
|
||||
// primary: c.variants($brand),
|
||||
// secondary: c.variants(#999cc5),
|
||||
// elevation: (
|
||||
// '1': #dce0e8, // crust
|
||||
// '2': #e6e9ef, // mantle
|
||||
// '3': #eff1f5, // base
|
||||
// '4': #dcdfe7, // surface0
|
||||
// '5': #bcc0cc, // surface1
|
||||
// '6': #acb0be, // surface2
|
||||
// '7': #9ca0b0, // overlay0
|
||||
// '8': #8c8fa1, // overlay1
|
||||
// '9': #7c7f93, // overlay2
|
||||
// '10': #6c6f85, // subtext0
|
||||
// '11': #5c5f77, // subtext1
|
||||
// '12': #4c4f69, //
|
||||
// )
|
||||
// );
|
||||
$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: (
|
||||
// 'font-size': (
|
||||
// 'xs': .75rem,
|
||||
// 'sm': .875rem,
|
||||
// 'md': 1rem,
|
||||
// 'lg': 1.125rem,
|
||||
// 'xl': 1.25rem,
|
||||
// ),
|
||||
// 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
|
||||
// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
|
||||
// 'measure': (
|
||||
// '.25x': 4px,
|
||||
// '.375x': 6px,
|
||||
// '.5x': 8px,
|
||||
// '.75x': 12px,
|
||||
// '1x': 16px,
|
||||
// '1.25x': 20px,
|
||||
// '1.5x': 24px,
|
||||
// '2x': 32px,
|
||||
// '2.5x': 40px,
|
||||
// '3x': 48px,
|
||||
// '4x': 64px,
|
||||
// ),
|
||||
// 'repo-home': (
|
||||
// 'sidebar-width': 296px,
|
||||
// )
|
||||
// ),
|
||||
// ),
|
||||
|
||||
// $options: (
|
||||
// reboot: false,
|
||||
// basic: false,
|
||||
// fg-var-name: 'text',
|
||||
// bg-var-name: 'elevation/1',
|
||||
// ),
|
||||
// );
|
||||
// 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: $is-dark,
|
||||
// );
|
||||
@include theme.make-theme($is-dark);
|
||||
Loading…
Reference in New Issue