From 28c79f30a23aea95f6f548f8ffbf64d0dad146ea Mon Sep 17 00:00:00 2001 From: mark Date: Wed, 6 Sep 2023 07:15:03 +0200 Subject: [PATCH] Address Dart Sass warnings and variable handling --- assets/scss/app-dart.scss | 56 ++++++++++++++++++++++++ assets/scss/common/_variables-dart.scss | 45 +++++++++++++++++++ assets/scss/components/_syntax-dart.scss | 49 +++++++++++++++++++++ 3 files changed, 150 insertions(+) create mode 100644 assets/scss/app-dart.scss create mode 100644 assets/scss/common/_variables-dart.scss create mode 100644 assets/scss/components/_syntax-dart.scss diff --git a/assets/scss/app-dart.scss b/assets/scss/app-dart.scss new file mode 100644 index 00000000..7c707105 --- /dev/null +++ b/assets/scss/app-dart.scss @@ -0,0 +1,56 @@ +@use "sass:meta"; + +// Define template variables +@use "hugo:vars" as h; // note: modified for dart-sass + +// Include default variable overrides +@import "common/variables-dart.scss"; // note: modified for dart-sass +@import "common/icons.scss"; + +// Import Bootstrap configuration (mounted by core Bootstrap module) +@import "bootstrap-dart.scss"; // note: modified for dart-sass + +// Include dark mode overrides +@import "common/variables-dark.scss"; + +// Import Hinode theme styles +@import "components/alert.scss"; +@import "components/blockquote.scss"; +@import "components/breadcrumb.scss"; +@import "components/buttons.scss"; +@import "components/card.scss"; +@import "components/carousel.scss"; +@import "components/clipboard.scss"; +@import "components/command.scss"; +@import "components/comments.scss"; +@import "components/feature.scss"; +@import "components/footer.scss"; +@import "components/navbar.scss"; +@import "components/img.scss"; +@import "components/pagination.scss"; +@import "components/persona.scss"; +@import "components/popover.scss"; +@import "components/sidebar.scss"; +@import "components/syntax-dart.scss"; // note: modified for dart-sass +@import "components/table.scss"; +@import "components/timeline.scss"; +@import "components/toc.scss"; +@import "components/vimeo.scss"; +@import "common/animation.scss"; +@import "common/styles.scss"; +@import "layouts/reboot.scss"; +@import "layouts/type.scss"; +@import "common/export.scss"; +@import "helpers/colored-links.scss"; +@import "helpers/display.scss"; + +// note: modified for dart-sass +@if h.$import-fonts { + @include meta.load-css(theme/fonts); +} + +// Import theme placeholder +@import "theme/theme.scss"; + +// Import Bootstrap utilities API (mounted by core Bootstrap module) +@import "modules/bootstrap/utilities/api"; diff --git a/assets/scss/common/_variables-dart.scss b/assets/scss/common/_variables-dart.scss new file mode 100644 index 00000000..ab40e799 --- /dev/null +++ b/assets/scss/common/_variables-dart.scss @@ -0,0 +1,45 @@ +// Bootstrap variables overrides for theme +$enable-negative-margins: true; +$enable-important-utilities: true !default; + +// Remove the border from the focused navigation toggler +$navbar-toggler-focus-width: 0 !default; + +// scss-docs-start font +$font-family-sans-serif: h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$headings-font-weight: 600 !default; +$font-weight-lighter: lighter !default; +$font-weight-light: 200 !default; +$font-weight-normal: 300 !default; +$font-weight-bold: 600 !default; +$font-weight-bolder: bolder !default; + +strong { + font-weight: 600 if($enable-important-utilities, !important, null); +} +// scss-docs-end font + +$navbar-offset: h.$navbar-offset; +$primary: h.$primary; +$secondary: h.$secondary; +$success: h.$success; +$info: h.$info; +$warning: h.$warning; +$danger: h.$danger; +$light: h.$light; +$dark: h.$dark; + +$black: #000 !default; +$btn-toggle-color: $black !default; + +$carousel-dark-indicator-active-bg: #ffffff !default; +$carousel-dark-caption-color: #ffffff !default; +$carousel-dark-control-icon-filter: invert(0) grayscale(100) !default; + +// scss-docs-start color-mode +$primary-text-emphasis-dark: mix(white, h.$primary, h.$dark-mode-tint) !default; +$secondary-text-emphasis-dark: mix(white, h.$secondary, h.$dark-mode-tint) !default; +$link-color-dark: mix(white, h.$primary, h.$dark-mode-tint) !default; +$primary-bg-subtle-dark: mix(black, h.$primary, h.$dark-mode-shade) !default; +$primary-border-subtle-dark: mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default; +// scss-docs-end color-mode \ No newline at end of file diff --git a/assets/scss/components/_syntax-dart.scss b/assets/scss/components/_syntax-dart.scss new file mode 100644 index 00000000..14f55f7e --- /dev/null +++ b/assets/scss/components/_syntax-dart.scss @@ -0,0 +1,49 @@ +// stylelint-disable annotation-no-unknown +@import "syntax-light"; + +.bg, +.chroma, +.chroma .err { + // set to transparent background to avoid rendering issues with example shortcode + background-color: transparent if($enable-important-utilities, !important, null); +} + +.chroma { + display: flex; +} + +.chroma code { + flex: 1; +} + +.syntax-highlight { + background-color: var(--bs-light) if($enable-important-utilities, !important, null); + overflow-x: auto; +} + +@if $enable-dark-mode { + [data-bs-theme="dark"] { + @include meta.load-css(syntax-dark); + + .bg, + .chroma, + .chroma .err { + // set to transparent background to avoid rendering issues with example shortcode + background-color: transparent if($enable-important-utilities, !important, null); + } + + .syntax-highlight { + background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null); + overflow-x: auto; + } + + .bg, + .chroma, + .chroma .ge, + .chroma .gl, + .chroma .gs { + color: #c9d1d9 if($enable-important-utilities, !important, null); + } + } +} +// stylelint-enable annotation-no-unknown