From a0d2fee5023905f6daacd67a320adf987fb1845e Mon Sep 17 00:00:00 2001 From: Lucas Colombo Date: Mon, 20 Jan 2025 04:33:47 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20light=20and=20auto=20themes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/themes/fonts/.gitkeep | 0 src/themes/scss/auto.scss | 2 +- src/themes/scss/light.scss | 169 ++++++++++++++++++------------------- 3 files changed, 85 insertions(+), 86 deletions(-) delete mode 100644 src/themes/fonts/.gitkeep diff --git a/src/themes/fonts/.gitkeep b/src/themes/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/themes/scss/auto.scss b/src/themes/scss/auto.scss index 8f85974..77aaa37 100644 --- a/src/themes/scss/auto.scss +++ b/src/themes/scss/auto.scss @@ -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); \ No newline at end of file diff --git a/src/themes/scss/light.scss b/src/themes/scss/light.scss index 2d98135..d1528ac 100644 --- a/src/themes/scss/light.scss +++ b/src/themes/scss/light.scss @@ -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, -// ); \ No newline at end of file +@include theme.make-theme($is-dark); \ No newline at end of file