diff --git a/packages/foundations/docs/Colors.md b/packages/foundations/docs/Colors.md index 06a509ff423..fe36197316e 100644 --- a/packages/foundations/docs/Colors.md +++ b/packages/foundations/docs/Colors.md @@ -19,7 +19,7 @@ Or if you only want a single variant e.g. **informational** you can import `@imp In case that you're either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly. -For **SCSS** you need to use the import `@use @db-ui/foundations/build/scss/color/placeholder` in your `.scss` file, where you need to reference the specific variable. +For **SCSS** you need to use the import `@use "@db-ui/foundations/build/scss/color/placeholder"` in your `.scss` file, where you need to reference the specific variable. Then you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`. ## Dark- & Light-Mode diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md index cf2d58254b7..d159ee08745 100644 --- a/packages/foundations/docs/FontsSizes.md +++ b/packages/foundations/docs/FontsSizes.md @@ -33,7 +33,7 @@ All sizes of both sets are automatically adjusted by the selected [density](./.. For **CSS** and **Tailwind** you need to use the import `@import "@db-ui/foundations/build/css/fonts/classes/all.css";` in your root `.css` file. -For **SCSS** you can use the `.css` file, or you can use a placeholder by importing `@use @db-ui/foundations/build/scss/fonts` in your `.scss` file, where you need to reference the specific font size. +For **SCSS** you can use the `.css` file, or you can use a placeholder by importing `@use "@db-ui/foundations/build/scss/fonts"` in your `.scss` file, where you need to reference the specific font size. Then you can use e.g. `sm` font-size by extending our SCSS placeholders like this: `@extend %db-overwrite-font-size-sm`. > **_NOTE:_** Make sure that you import the file after all other **foundation** css files, otherwise you should overwrite a specific `font-size` with the global selector diff --git a/packages/foundations/docs/Variables.md b/packages/foundations/docs/Variables.md index d2d1d5bd4f6..fc41e8781a0 100644 --- a/packages/foundations/docs/Variables.md +++ b/packages/foundations/docs/Variables.md @@ -9,7 +9,7 @@ For **CSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../../foundations/readme). -For **SCSS** you need to `@use` the import `@use @db-ui/foundations/build/scss/variables` in your `.scss` file, where you want to reference the specific variable. +For **SCSS** you need to use the import `@use "@db-ui/foundations/build/scss/variables"` in your `.scss` file, where you want to reference the specific variable. ## Simple overview for advanced diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss index faef0a099c8..ae1da44bba0 100644 --- a/showcases/patternhub/styles/globals.scss +++ b/showcases/patternhub/styles/globals.scss @@ -489,15 +489,13 @@ h6 { } .link-containers { - & > div { - display: grid; - grid-template-areas: "previous next"; - gap: variables.$db-spacing-fixed-md; - justify-content: space-between; + display: grid; + grid-template-areas: "previous next"; + gap: variables.$db-spacing-fixed-md; + justify-content: space-between; - a { - text-decoration: none; - } + a { + text-decoration: none; } .previous-link-container,