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);
|
@import "./theme-dark.css" (prefers-color-scheme: dark);
|
||||||
@ -1,90 +1,89 @@
|
|||||||
// @use '@lucas-labs/lui-micro' as lui;
|
@use '@lucas-labs/lui-micro' as lui;
|
||||||
// @use './utils/color-utils' as c;
|
@use './_utils/color-utils' as c;
|
||||||
// @use './theme' as theme;
|
@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: (
|
$variables: (
|
||||||
// theme: (
|
'font-size': (
|
||||||
// 'rosewater': c.variants(#dc8a78),
|
'xs': .714rem,
|
||||||
// 'flamingo': c.variants(#dd7878),
|
'sm': .857rem,
|
||||||
// 'pink': c.variants(#ea76cb),
|
'md': 1rem,
|
||||||
// 'mauve': c.variants(#8652e7),
|
'lg': 1.143rem,
|
||||||
// 'red': c.variants(#d20f39),
|
'xl': 1.286rem,
|
||||||
// 'maroon': c.variants(#e64553),
|
),
|
||||||
// 'peach': c.variants(#fe640b),
|
'font-family': '-apple-system, "Segoe UI", system-ui, "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||||
// 'yellow': c.variants(#df8e1d),
|
'code-font-family': 'ui-monospace, SFMono-Regular, "Source Code Pro", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji)',
|
||||||
// 'green': c.variants(#11752d),
|
'emoji-font-family': '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"',
|
||||||
// 'teal': c.variants(#179299),
|
'measure': (
|
||||||
// 'sky': c.variants(#04a5e5),
|
'.25x': 4px,
|
||||||
// 'sapphire': c.variants(#209fb5),
|
'.375x': 6px,
|
||||||
// 'blue': c.variants(#1e66f5),
|
'.5x': 8px,
|
||||||
// 'lavender': c.variants(#7287fd),
|
'.75x': 12px,
|
||||||
// 'black': c.variants(#181825),
|
'.875x': 14px,
|
||||||
// 'white': c.variants(#e6edf3),
|
'1x': 16px,
|
||||||
// ),
|
'1.25x': 20px,
|
||||||
// text: #4c4f69,
|
'1.5x': 24px,
|
||||||
// primary: c.variants($brand),
|
'2x': 32px,
|
||||||
// secondary: c.variants(#999cc5),
|
'2.5x': 40px,
|
||||||
// elevation: (
|
'3x': 48px,
|
||||||
// '1': #dce0e8, // crust
|
'4x': 64px,
|
||||||
// '2': #e6e9ef, // mantle
|
),
|
||||||
// '3': #eff1f5, // base
|
'navbar-logo': (
|
||||||
// '4': #dcdfe7, // surface0
|
'width': 56px,
|
||||||
// '5': #bcc0cc, // surface1
|
'height': 20px,
|
||||||
// '6': #acb0be, // surface2
|
),
|
||||||
// '7': #9ca0b0, // overlay0
|
'repo-home': (
|
||||||
// '8': #8c8fa1, // overlay1
|
'sidebar-width': 296px,
|
||||||
// '9': #7c7f93, // overlay2
|
)
|
||||||
// '10': #6c6f85, // subtext0
|
);
|
||||||
// '11': #5c5f77, // subtext1
|
|
||||||
// '12': #4c4f69, //
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
|
|
||||||
// // init lui-micro, css-vars only (no reboot, no basic)
|
// init lui-micro, css-vars only (no reboot, no basic)
|
||||||
// @include lui.init(
|
@include lui.init(
|
||||||
// $theme: (
|
$theme: (colors: $colors, variables: $variables),
|
||||||
// colors: $colors,
|
$options: (
|
||||||
// variables: (
|
reboot: false,
|
||||||
// 'font-size': (
|
basic: false,
|
||||||
// 'xs': .75rem,
|
fg-var-name: 'text',
|
||||||
// 'sm': .875rem,
|
bg-var-name: 'elevation/1',
|
||||||
// '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',
|
|
||||||
// ),
|
|
||||||
// );
|
|
||||||
|
|
||||||
// @include theme.make-theme(
|
@include theme.make-theme($is-dark);
|
||||||
// $is-dark: $is-dark,
|
|
||||||
// );
|
|
||||||
Loading…
Reference in New Issue