diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc
index 0586a3eb719..cb808559fd1 100644
--- a/docs/getStarted.adoc
+++ b/docs/getStarted.adoc
@@ -113,12 +113,49 @@ Independently you need to add to `angular.json` a new line to assets like this:
It will copy on *npm build* the content of *core/dist* folder to *dist* folder in the angular app, that is deployed on *ng serve* and will give you access to assets like images, icons, etc. exported by DB UI Core. Don't forget to add it to any necessary configuration part included, like e.g. `projects.PROJECTNAME.architect.build.options` as well as `projects.PROJECTNAME.architect.test.options`
-### Use scss files:
+### Use SCSS files:
You can use the overall scss file or pick the relevant parts.
E.g. you can import the overall scss files to your `src/styles.scss` by adding the following imports based on your bundler in use.
-#### Webpack based bundlers (e.g. Angular or Vue CLI)
+#### Rollup based bundlers (e.g. Parcel, Vite)
+
+For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:
+
+##### `@use` syntax
+
+[source,scss]
+----
+@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+ $icons-path: rollupAssetsPaths.$icons-path,
+ $images-path: rollupAssetsPaths.$images-path,
+ $fonts-path: rollupAssetsPaths.$fonts-path
+);
+----
+
+##### deprecated `@import` syntax
+
+[source,scss]
+----
+@import "@db-ui/core/sources/css/rollup.assets-paths";
+@import "@db-ui/core/sources/css/enterprise/db-ui-core";
+----
+
+
+#### Webpack based bundlers (e.g. older Angular or Vue CLI versions)
+
+[source,scss]
+----
+@use "@db-ui/core/sources/css/webpack.assets-paths" as webpackAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+ $icons-path: webpackAssetsPaths.$icons-path,
+ $images-path: webpackAssetsPaths.$images-path,
+ $fonts-path: webpackAssetsPaths.$fonts-path
+);
+----
+
+##### deprecated `@import` syntax
[source,scss]
----
@@ -126,6 +163,8 @@ E.g. you can import the overall scss files to your `src/styles.scss` by adding t
@import "@db-ui/core/sources/css/enterprise/db-ui-core";
----
+#### General
+
Please keep in mind, that you would need to set your include path within the `angular.json` configuration file, like this:
[source,json]
@@ -155,17 +194,6 @@ module.exports = {
};
----
-#### Rollup based bundlers (e.g. Vue with Vite)
-
-For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:
-
-[source,scss]
-----
-@import "@db-ui/core/sources/css/rollup.assets-paths";
-@import "@db-ui/core/sources/css/enterprise/db-ui-core";
-----
-
-
### Use css files:
If you want to use the compiled CSS directly, you can reference the css files in your index.html like this:
diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc
index cdcc192c718..d016c19a36b 100644
--- a/docs/migrationGuide.adoc
+++ b/docs/migrationGuide.adoc
@@ -4,6 +4,54 @@ As with every release you're recommended to do a visual regression testing for y
Especially the following aspects have changed through the various different releases and would need your review and probably adaptions within your code base.
+== DB UI Core 4.0.0 Migration Guide
+
+=== SASS Migration
+
+We'd like to support the SASS feature `@use` and that for replace the deprecated `@import` feature. So you'll have to replace the `@import` declarations by `@use` within our consuming files.
+
+Especially the following general imports would need to get replaced:
+
+==== Webpack
+
+The following `@import` syntax …
+
+```scss
+@import "@db-ui/core/sources/css/webpack.assets-paths";
+@import "@db-ui/core/sources/css/enterprise/db-ui-core";
+```
+
+… would need to replaced by `@use` syntax:
+
+```scss
+@use "@db-ui/core/sources/css/webpack.assets-paths" as webpackAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+ $icons-path: webpackAssetsPaths.$icons-path,
+ $images-path: webpackAssetsPaths.$images-path,
+ $fonts-path: webpackAssetsPaths.$fonts-path
+);
+```
+
+==== Rollup bundler based software
+
+The following `@import` syntax …
+
+```scss
+@import "@db-ui/core/sources/css/rollup.assets-paths";
+@import "@db-ui/core/sources/css/enterprise/db-ui-core";
+```
+
+… would need to replaced by `@use` syntax:
+
+```scss
+@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+ $icons-path: rollupAssetsPaths.$icons-path,
+ $images-path: rollupAssetsPaths.$images-path,
+ $fonts-path: rollupAssetsPaths.$fonts-path
+);
+```
+
== DB UI Core 3.0.0 Migration Guide
=== Chip
diff --git a/source/_patterns/00-base/colors/_colors.scss b/source/_patterns/00-base/colors/_colors.scss
index 0576562c88a..f01432840d3 100644
--- a/source/_patterns/00-base/colors/_colors.scss
+++ b/source/_patterns/00-base/colors/_colors.scss
@@ -1,2 +1,2 @@
// * Attention ! Please expect that these declarations will get moved to DB UI Base sooner than later for easier consumption
-@import "colors.variables";
+@use "colors.variables";
diff --git a/source/_patterns/00-base/colors/_colors.variables.scss b/source/_patterns/00-base/colors/_colors.variables.scss
index b5b29284402..2ea8dce88ab 100644
--- a/source/_patterns/00-base/colors/_colors.variables.scss
+++ b/source/_patterns/00-base/colors/_colors.variables.scss
@@ -1,3 +1,3 @@
// * Marketingportal brand colors
-@import "@db-ui/base/build/scss/variables";
+@use "@db-ui/base/build/scss/variables";
diff --git a/source/_patterns/00-base/colors/enterprise/_colors.variables.scss b/source/_patterns/00-base/colors/enterprise/_colors.variables.scss
index 4c1ceaaf64a..611be5bcc55 100644
--- a/source/_patterns/00-base/colors/enterprise/_colors.variables.scss
+++ b/source/_patterns/00-base/colors/enterprise/_colors.variables.scss
@@ -1,20 +1,21 @@
// DB colors
-@import "../colors.variables";
+@use "../colors.variables";
+@use "@db-ui/base/build/scss/variables";
// EDS semantic colors (TODO: probably leftovers, those would most likely need to get replaced again as soon as the Enterprise extension is finalized)
-$DBdarkgray: $db-color-cool-gray-500; // DB Dunkelgrau/DB dark gray
-$DBblue: $db-color-cyan-600; // DB Blau/DB blue
-$DBwhitegray: $db-color-cool-gray-200; // DB Weißgrau/DB white-gray
-$DBlightgray: $db-color-cool-gray-300; // DB light-gray
-$DBgray: $db-color-cool-gray-400; // DB gray
+$DBdarkgray: variables.$db-color-cool-gray-500; // DB Dunkelgrau/DB dark gray
+$DBblue: variables.$db-color-cyan-600; // DB Blau/DB blue
+$DBwhitegray: variables.$db-color-cool-gray-200; // DB Weißgrau/DB white-gray
+$DBlightgray: variables.$db-color-cool-gray-300; // DB light-gray
+$DBgray: variables.$db-color-cool-gray-400; // DB gray
// * General
-$black: $db-color-cool-gray-800;
-$black-bis: $db-color-cool-gray-700;
-$black-ter: $db-color-cool-gray-600;
+$black: variables.$db-color-cool-gray-800;
+$black-bis: variables.$db-color-cool-gray-700;
+$black-ter: variables.$db-color-cool-gray-600;
-$gray-darker: $db-color-cool-gray-600;
+$gray-darker: variables.$db-color-cool-gray-600;
$gray-dark: $DBdarkgray;
$gray: $DBgray;
$gray-light: $DBlightgray;
@@ -24,32 +25,32 @@ $gray-lighter: $DBwhitegray;
// $white-bis:
// $white:
-$orange: $db-color-yellow-900;
+$orange: variables.$db-color-yellow-900;
// $yellow:
-$green: $db-color-green-600;
+$green: variables.$db-color-green-600;
// $turquoise:
// $cyan:
-$blue: $db-color-cyan-600;
+$blue: variables.$db-color-cyan-600;
// $purple:
-$red: $db-color-red;
+$red: variables.$db-color-red;
$red-invert: #fff;
// * Enterprise Design System
// Enterprise Design System Colors
-$Text: $db-color-cool-gray-800; // Text
-$Background: $db-color-cool-gray-700; // Background, buttons
-$Buttons: $db-color-cool-gray-700; // Background, buttons
-$Icons: $db-color-cool-gray-600; // Icons, divider
-$divider01: $db-color-cool-gray-700; // Icons, divider
+$Text: variables.$db-color-cool-gray-800; // Text
+$Background: variables.$db-color-cool-gray-700; // Background, buttons
+$Buttons: variables.$db-color-cool-gray-700; // Background, buttons
+$Icons: variables.$db-color-cool-gray-600; // Icons, divider
+$divider01: variables.$db-color-cool-gray-700; // Icons, divider
$inputfields: $DBdarkgray; // Input fields
-$selected: $db-color-cool-gray-400; // selected -> to be changed
-$divider02: $db-color-cool-gray-200; // Divider
-$hover: $db-color-cool-gray-200; // hover -> to be changed
+$selected: variables.$db-color-cool-gray-400; // selected -> to be changed
+$divider02: variables.$db-color-cool-gray-200; // Divider
+$hover: variables.$db-color-cool-gray-200; // hover -> to be changed
$LightBG: #fdfdfd; // Background
-$highlight-color01: $db-color-red; // Highlight color
+$highlight-color01: variables.$db-color-red; // Highlight color
$highlight-color02: $blue; // Highlight color
-$hover-buttons: $db-color-red-600; // hover Buttons
+$hover-buttons: variables.$db-color-red-600; // hover Buttons
// Semantic color codes
// * light background
diff --git a/source/_patterns/00-base/colors/enterprise/colors.scss b/source/_patterns/00-base/colors/enterprise/colors.scss
index 6ce2535f681..ebb808752b2 100644
--- a/source/_patterns/00-base/colors/enterprise/colors.scss
+++ b/source/_patterns/00-base/colors/enterprise/colors.scss
@@ -1,2 +1,2 @@
-@import "colors.variables";
-@import "../colors";
+@use "colors.variables";
+@use "../colors" as colors2;
diff --git a/source/_patterns/00-base/icons/_icons.custom-properties.scss b/source/_patterns/00-base/icons/_icons.custom-properties.scss
index 4b58c9c7c09..ba4684ffd6b 100644
--- a/source/_patterns/00-base/icons/_icons.custom-properties.scss
+++ b/source/_patterns/00-base/icons/_icons.custom-properties.scss
@@ -1,4 +1,4 @@
-@import "icons.variables";
+@use "icons.variables";
// TODO: The following construct was especially meant to enable a branch (EDS & FV) specific result - probably we could refactor this the sooner the later
[data-icon]:not([data-icon-variant]),
@@ -15,18 +15,18 @@
}
// DB UX Icons
-@each $icon-style, $icon-sizes in $icon-font-families-personenverkehr {
+@each $icon-style, $icon-sizes in icons.$icon-font-families-personenverkehr {
@each $icon-size, $icon-categories in $icon-sizes {
- [data-icon-variant="#{$icon-size}-#{$icon-style}"],
- [data-icon-variant-before="#{$icon-size}-#{$icon-style}"] {
+ [data-icon-variant="#{icons.$icon-size}-#{icons.$icon-style}"],
+ [data-icon-variant-before="#{icons.$icon-size}-#{icons.$icon-style}"] {
&[data-icon],
&[data-icon-before] {
- @include iconMeta($icon-size, $icon-style);
+ @include iconMeta(icons.$icon-size, icons.$icon-style);
}
}
- [data-icon-variant-after="#{$icon-size}-#{$icon-style}"] {
+ [data-icon-variant-after="#{icons.$icon-size}-#{icons.$icon-style}"] {
&[data-icon-after] {
- @include iconMeta($icon-size, $icon-style, "after");
+ @include iconMeta(icons.$icon-size, icons.$icon-style, "after");
}
}
}
diff --git a/source/_patterns/00-base/icons/_icons.font-faces.scss b/source/_patterns/00-base/icons/_icons.font-faces.scss
index 80f0f2f47b8..31ce0f18c4e 100644
--- a/source/_patterns/00-base/icons/_icons.font-faces.scss
+++ b/source/_patterns/00-base/icons/_icons.font-faces.scss
@@ -1,7 +1,7 @@
@use "sass:string";
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
-@import "icons.variables";
+@use "icons.variables";
// Potential TODO: usage of the standard filenames described by https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Icons/Funktionale-Icons-Architektur-und-Fahrzeuge
@@ -9,18 +9,19 @@
font-display: block;
font-family: "missing-icons";
src:
- url("#{$icons-path}functional/fonts/icons-empty.woff2?4r2098")
+ url("#{db-ui-core.$icons-path}functional/fonts/icons-empty.woff2?4r2098")
format("woff2"),
- url("#{$icons-path}functional/fonts/icons-empty.woff?4r2098")
+ url("#{db-ui-core.$icons-path}functional/fonts/icons-empty.woff?4r2098")
format("woff");
}
// DB UX Icons
-@each $icon-style, $icon-sizes in $icon-font-families-personenverkehr {
+@each $icon-style, $icon-sizes in icons.$icon-font-families-personenverkehr {
@each $icon-size, $icon-categories in $icon-sizes {
@each $icon-category, $icon-font-unicodes in $icon-categories {
@font-face {
- $icon-font-family: "icons-" + $icon-size + "-" + $icon-style;
+ $icon-font-family: "icons-" + icons.$icon-size + "-" +
+ icons.$icon-style;
font-display: block;
@@ -28,9 +29,9 @@
font-style: normal;
font-weight: normal;
src:
- url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff2?4r2098")
+ url("#{db-ui-core.$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff2?4r2098")
format("woff2"),
- url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2098")
+ url("#{db-ui-core.$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2098")
format("woff");
unicode-range: string.unquote($icon-font-unicodes);
diff --git a/source/_patterns/00-base/icons/_icons.variables.scss b/source/_patterns/00-base/icons/_icons.variables.scss
index 0bda992dc8a..c0771129758 100644
--- a/source/_patterns/00-base/icons/_icons.variables.scss
+++ b/source/_patterns/00-base/icons/_icons.variables.scss
@@ -1,10 +1,10 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
// Default parameters
$icon-size: 24 !default;
$icon-style: "outline" !default;
$icons-font-family: '#{"icons-" + $icon-size + "-" + $icon-style}, "missing-icons"' !default;
-$icon-content-space: to-rem(
+$icon-content-space: functions.to-rem(
$pxValue: 6
) !default;
diff --git a/source/_patterns/00-base/icons/enterprise/_icons.variables.scss b/source/_patterns/00-base/icons/enterprise/_icons.variables.scss
index dc870e004e4..9cf9bffe4af 100644
--- a/source/_patterns/00-base/icons/enterprise/_icons.variables.scss
+++ b/source/_patterns/00-base/icons/enterprise/_icons.variables.scss
@@ -1,6 +1,6 @@
@use "sass:map";
-@import "../../../../css/helpers/functions";
-@import "../icons.variables";
+@use "../../../../css/helpers/functions";
+@use "../icons.variables";
// Icon font files
$icon-font-families: (
@@ -82,4 +82,7 @@ $icon-glyphs-enterprise: (
// "upload-cloud": "\e923",
// "watch": "\1f552"
);
-$icon-glyphs: map.merge($icon-glyphs-enterprise, $icon-glyphs-personenverkehr);
+icons.$icon-glyphs: map.merge(
+ $icon-glyphs-enterprise,
+ icons.$icon-glyphs-personenverkehr
+);
\ No newline at end of file
diff --git a/source/_patterns/00-base/icons/enterprise/icons.scss b/source/_patterns/00-base/icons/enterprise/icons.scss
index 90291fa650f..71bb4dc3eb6 100644
--- a/source/_patterns/00-base/icons/enterprise/icons.scss
+++ b/source/_patterns/00-base/icons/enterprise/icons.scss
@@ -1,5 +1,5 @@
-@import "icons.variables";
+@use "icons.variables";
-@import "icons.custom-properties";
-@import "icons.font-faces";
-@import "../icons";
+@use "icons.custom-properties" as icons2;
+@use "icons.font-faces" as icons3;
+@use "../icons" as icons4;
diff --git a/source/_patterns/00-base/icons/icons.scss b/source/_patterns/00-base/icons/icons.scss
index 1db0240ed5d..54fa6239c5c 100644
--- a/source/_patterns/00-base/icons/icons.scss
+++ b/source/_patterns/00-base/icons/icons.scss
@@ -1,21 +1,22 @@
// @import "icons.variables";
-@import "icons.variables";
-@import "icons.attributes-mappings";
-@import "icons.helpers";
-@import "icons.custom-properties";
-@import "icons.font-faces";
-@import "icons.placeholder";
+@use "icons.variables";
+@use "icons.attributes-mappings" as icons3;
+@use "icons.helpers" as icons2;
+@use "icons.custom-properties" as icons4;
+@use "icons.font-faces" as icons5;
+@use "icons.placeholder" as icons6;
+@use "../../../css/helpers/functions";
[data-icon],
[data-icon-before] {
&::before {
@extend %icon;
content: var(--icon-glyph-before);
- margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
+ margin-inline-end: var(--icon-margin-after, #{icons.$icon-content-space});
font-size: var(
--icon-font-size-before,
- var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+ var(--icon-font-size, #{functions.to-rem($pxValue: icons.$icon-size)})
);
}
}
@@ -24,10 +25,10 @@
&::after {
@extend %icon;
content: var(--icon-glyph-after);
- margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
+ margin-inline-start: var(--icon-margin-before, #{icons.$icon-content-space});
font-size: var(
--icon-font-size-after,
- var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+ var(--icon-font-size, #{functions.to-rem($pxValue: icons.$icon-size)})
);
}
}
@@ -36,10 +37,10 @@
.is-icon-text-replace {
&[data-icon],
&[data-icon-before] {
- @include is-icon-text-replace();
+ @include icons2.is-icon-text-replace();
}
&[data-icon-after] {
- @include is-icon-text-replace("after");
+ @include icons2.is-icon-text-replace("after");
}
}
diff --git a/source/_patterns/00-base/type/_fonts.scss b/source/_patterns/00-base/type/_fonts.scss
index ea6e6ed2a0d..b715296462e 100644
--- a/source/_patterns/00-base/type/_fonts.scss
+++ b/source/_patterns/00-base/type/_fonts.scss
@@ -1,8 +1,8 @@
@use "sass:map";
-@import "../../../css/db-ui-core.variables";
-@import "fonts.variables";
+@use "../../../css/db-ui-core.variables";
+@use "fonts.variables";
-@each $font-name, $font-meta in $font-families {
+@each $font-name, $font-meta in fonts.$font-families {
$font-family: map.get($font-meta, "font-family");
$font-filename: map.get($font-meta, "font-filename");
$font-weight: map.get($font-meta, "font-weight");
@@ -19,32 +19,32 @@
local("#{$font-name}"),
local("#{$font-local-name}"),
local("#{$font-local-name-short}"),
- url("#{$fonts-path}#{$font-filename}.woff2?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff2?4r0080")
format("woff2"),
- url("#{$fonts-path}#{$font-filename}.woff?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff?4r0080")
format("woff");
} @else if $font-local-name {
src:
local("#{$font-name}"),
local("#{$font-local-name}"),
- url("#{$fonts-path}#{$font-filename}.woff2?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff2?4r0080")
format("woff2"),
- url("#{$fonts-path}#{$font-filename}.woff?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff?4r0080")
format("woff");
} @else if $font-local-name-short {
src:
local("#{$font-name}"),
local("#{$font-local-name-short}"),
- url("#{$fonts-path}#{$font-filename}.woff2?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff2?4r0080")
format("woff2"),
- url("#{$fonts-path}#{$font-filename}.woff?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff?4r0080")
format("woff");
} @else {
src:
local("#{$font-name}"),
- url("#{$fonts-path}#{$font-filename}.woff2?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff2?4r0080")
format("woff2"),
- url("#{$fonts-path}#{$font-filename}.woff?4r0080")
+ url("#{db-ui-core.$fonts-path}#{$font-filename}.woff?4r0080")
format("woff");
}
}
diff --git a/source/_patterns/00-base/type/enterprise/_fonts.demonstration.scss b/source/_patterns/00-base/type/enterprise/_fonts.demonstration.scss
index f1a7b2910f4..76c82d1bebd 100644
--- a/source/_patterns/00-base/type/enterprise/_fonts.demonstration.scss
+++ b/source/_patterns/00-base/type/enterprise/_fonts.demonstration.scss
@@ -1,42 +1,43 @@
-@import "../../colors/enterprise/colors.variables";
+@use "../../colors/enterprise/colors.variables";
+@use "@db-ui/base/build/scss/variables";
.DO-NOT-COPY-THIS-CLASS-example-fonts-ondarkbackground {
- background-color: $Background;
- color: $LightBG;
+ background-color: colors.$Background;
+ color: colors.$LightBG;
}
.DO-NOT-COPY-THIS-CLASS-example-fonts-light {
- color: $db-color-cool-gray-500;
+ color: variables.$db-color-cool-gray-500;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-1st-priority-light {
- color: $db-color-red-500;
+ color: variables.$db-color-red-500;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-1st-priority-dark {
- color: $db-color-red-400;
+ color: variables.$db-color-red-400;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-2nd-priority-light {
- color: $db-color-yellow-900;
+ color: variables.$db-color-yellow-900;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-2nd-priority-dark {
- color: $db-color-yellow-700;
+ color: variables.$db-color-yellow-700;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-positive-light {
- color: $db-color-green-600;
+ color: variables.$db-color-green-600;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-positive-dark {
- color: $db-color-light-green-400;
+ color: variables.$db-color-light-green-400;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-neutral-light {
- color: $db-color-cyan-600;
+ color: variables.$db-color-cyan-600;
}
.DO-NOT-COPY-THIS-CLASS-example-highlight-colors-neutral-dark {
- color: $db-color-cyan-500;
+ color: variables.$db-color-cyan-500;
}
diff --git a/source/_patterns/00-base/type/enterprise/fonts.scss b/source/_patterns/00-base/type/enterprise/fonts.scss
index 2e29561e528..da7119fc09b 100644
--- a/source/_patterns/00-base/type/enterprise/fonts.scss
+++ b/source/_patterns/00-base/type/enterprise/fonts.scss
@@ -1,2 +1,2 @@
-@import "../../../../css/enterprise/db-ui-core.variables";
-@import "../fonts";
+@use "../../../../css/enterprise/db-ui-core.variables";
+@use "../fonts";
diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss
index 0536f3aaaa0..69aaa4b621d 100644
--- a/source/_patterns/01-elements/_form-elements.scss
+++ b/source/_patterns/01-elements/_form-elements.scss
@@ -1,5 +1,6 @@
-@import "../../css/helpers/functions";
-@import "form-elements.variables";
+@use "../../css/helpers/functions";
+@use "form-elements.variables";
+@use "@db-ui/base/build/scss/variables";
%form-element {
--formElement---borderTopColor: var(
@@ -12,7 +13,7 @@
);
--formElement---borderBottomColor: var(
--formElement---borderColor,
- #{$form-elements-semitransparent-border-bottom-color}
+ #{form-elements.$form-elements-semitransparent-border-bottom-color}
);
--formElement---borderLeftColor: var(
--formElement---borderColor,
@@ -20,73 +21,73 @@
);
border-radius: 4px;
- caret-color: $db-color-red-500;
+ caret-color: variables.$db-color-red-500;
- color: $form-elements-color;
+ color: form-elements.$form-elements-color;
// Description styles
& ~ .description {
- color: $db-color-cool-gray-500;
- font-size: to-rem($pxValue: 14);
+ color: variables.$db-color-cool-gray-500;
+ font-size: functions.to-rem($pxValue: 14);
- padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
+ padding: functions.to-rem($pxValue: 6) functions.to-rem($pxValue: 10);
}
}
%form-label {
&[data-label-hidden="true"] {
- @include a11y-visually-hidden($partial: $partial);
+ @include functions.a11y-visually-hidden($partial: $partial);
}
}
// ### Style variations
// Semitransparent
%form-element-semitransparent {
- --formElement---borderColor: #{$form-elements-semitransparent-border-bottom-color};
- background-color: $form-elements-semitransparent-background-color;
- border-bottom: $form-elements---borderBottom;
- border-left: $form-elements---borderLeft;
+ --formElement---borderColor: #{form-elements.$form-elements-semitransparent-border-bottom-color};
+ background-color: form-elements.$form-elements-semitransparent-background-color;
+ border-bottom: form-elements.$form-elements---borderBottom;
+ border-left: form-elements.$form-elements---borderLeft;
border-left-color: transparent;
- border-right: $form-elements---borderRight;
+ border-right: form-elements.$form-elements---borderRight;
border-right-color: transparent;
- border-top: $form-elements---borderTop;
+ border-top: form-elements.$form-elements---borderTop;
border-top-color: transparent;
}
// White
%form-element-white {
- --formElement---borderColor: #{$form-elements-white-border-bottom-color};
- background-color: $form-elements-white-background-color;
- border-bottom: $form-elements---borderBottom;
- border-left: $form-elements---borderLeft;
+ --formElement---borderColor: #{form-elements.$form-elements-white-border-bottom-color};
+ background-color: form-elements.$form-elements-white-background-color;
+ border-bottom: form-elements.$form-elements---borderBottom;
+ border-left: form-elements.$form-elements---borderLeft;
border-left-color: transparent;
- border-right: $form-elements---borderRight;
+ border-right: form-elements.$form-elements---borderRight;
border-right-color: transparent;
- border-top: $form-elements---borderTop;
+ border-top: form-elements.$form-elements---borderTop;
border-top-color: transparent;
}
// Solid
%form-element-solid {
- --formElement---borderColor: #{$form-elements-solid-border-bottom-color};
- background-color: $form-elements-solid-background-color;
- border-bottom: $form-elements---borderBottom;
- border-left: $form-elements---borderLeft;
+ --formElement---borderColor: #{form-elements.$form-elements-solid-border-bottom-color};
+ background-color: form-elements.$form-elements-solid-background-color;
+ border-bottom: form-elements.$form-elements---borderBottom;
+ border-left: form-elements.$form-elements---borderLeft;
border-left-color: transparent;
- border-right: $form-elements---borderRight;
+ border-right: form-elements.$form-elements---borderRight;
border-right-color: transparent;
- border-top: $form-elements---borderTop;
+ border-top: form-elements.$form-elements---borderTop;
border-top-color: transparent;
}
// Outline
%form-element-outline {
- --formElement---borderColor: #{$form-elements-outline-border-color};
+ --formElement---borderColor: #{form-elements.$form-elements-outline-border-color};
background-color: transparent;
- border-bottom: $form-elements---borderBottom;
- border-left: $form-elements---borderLeft;
- border-right: $form-elements---borderRight;
- border-top: $form-elements---borderTop;
+ border-bottom: form-elements.$form-elements---borderBottom;
+ border-left: form-elements.$form-elements---borderLeft;
+ border-right: form-elements.$form-elements---borderRight;
+ border-top: form-elements.$form-elements---borderTop;
}
// Validation
@@ -95,17 +96,17 @@
%form-element-validation {
&:not([aria-invalid]) {
&:user-valid {
- --formElement---borderColor: #{$db-color-green-600};
+ --formElement---borderColor: #{variables.$db-color-green-600};
}
&:user-invalid {
- --formElement---borderColor: #{$db-color-red-500};
+ --formElement---borderColor: #{variables.$db-color-red-500};
}
}
}
%form-element-validation-programmatic {
&[aria-invalid="true"] {
- --formElement---borderColor: #{$db-color-red-500};
+ --formElement---borderColor: #{variables.$db-color-red-500};
}
}
@@ -127,9 +128,9 @@
// TODO: This probably still needs to get further changed to a general "hint" pattern or similar
&,
& + .description {
- color: $db-color-cool-gray-500;
- font-size: to-rem($pxValue: 14);
- padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
+ color: variables.$db-color-cool-gray-500;
+ font-size: functions.to-rem($pxValue: 14);
+ padding: functions.to-rem($pxValue: 6) functions.to-rem($pxValue: 10);
}
}
@@ -139,10 +140,10 @@
&::after {
content: "";
width: calc(
- var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)}
+ var(--db-form-element-dimensions) + #{functions.to-rem($pxValue: 4)}
);
height: var(--db-form-element-dimensions);
- transform: translateX(#{to-rem($pxValue: 4)});
+ transform: translateX(#{functions.to-rem($pxValue: 4)});
position: absolute;
}
}
diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss
index b59d43f710c..e58bcadf691 100644
--- a/source/_patterns/01-elements/buttons/_button.variables.scss
+++ b/source/_patterns/01-elements/buttons/_button.variables.scss
@@ -1,33 +1,34 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
+@use "@db-ui/base/build/scss/variables";
// We want to set the alpha value and that for need the long form hex code
// stylelint-disable color-hex-length
$button---color: #ffffff !default;
// stylelint-enable color-hex-length
-$button---minHeight: to-rem(
+$button---minHeight: functions.to-rem(
$pxValue: 44
) !default;
// Background colors
-$button-brand-primary--backgroundColor: $db-color-red-500 !default;
+$button-brand-primary--backgroundColor: variables.$db-color-red-500 !default;
$button-brand-primary-hover-backgroundColor: #db0016;
-$button-primary--backgroundColor: $db-color-cool-gray-700 !default;
+$button-primary--backgroundColor: variables.$db-color-cool-gray-700 !default;
$button-primary-hover-backgroundColor: #2f3541;
-$button-secondarySolid--backgroundColor: $db-color-cool-gray-200 !default;
+$button-secondarySolid--backgroundColor: variables.$db-color-cool-gray-200 !default;
$button-secondarySolid-hover-backgroundColor: #cdd4da !default;
$button-secondarySolid-active-backgroundColor: #c5ccd3 !default;
$button-secondaryOutline-hover-backgroundColor: rgba(
- $db-color-cool-gray-700,
+ variables.$db-color-cool-gray-700,
0.03
) !default;
$button-secondaryOutline-active-backgroundColor: rgba(
- $db-color-cool-gray-700,
+ variables.$db-color-cool-gray-700,
0.06
) !default;
diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss
index 87622f89583..95301f5f4e6 100644
--- a/source/_patterns/01-elements/buttons/button.scss
+++ b/source/_patterns/01-elements/buttons/button.scss
@@ -1,29 +1,32 @@
@charset "utf-8";
@use "sass:string";
-@import "button.variables";
+@use "button.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.elm-button {
align-items: center; // Centering the content vertically and horizontally
border: 1px solid transparent;
border-radius: 4px;
display: inline-flex; // Centering the content vertically and horizontally
- font-size: to-rem($pxValue: 16);
+ font-size: functions.to-rem($pxValue: 16);
justify-content: center; // Centering the content vertically and horizontally
- min-height: $button---minHeight;
- padding: to-rem($pxValue: 8) to-rem($pxValue: 16);
+ min-height: button.$button---minHeight;
+ padding: functions.to-rem($pxValue: 8) functions.to-rem($pxValue: 16);
&[data-icon],
&[data-icon-before] {
- padding-left: to-rem($pxValue: 14);
+ padding-left: functions.to-rem($pxValue: 14);
}
&[data-icon-after] {
- padding-right: to-rem($pxValue: 14);
+ padding-right: functions.to-rem($pxValue: 14);
}
// Square icon only buttons
&.is-icon-text-replace {
- width: $button---minHeight;
+ width: button.$button---minHeight;
}
/*&:focus {
@@ -35,7 +38,7 @@
&%variant-brand-primary,
&%variant-primary {
- color: $button---color;
+ color: button.$button---color;
}
&%variant-brand-primary,
@@ -44,18 +47,18 @@
}
&%variant-brand-primary {
- background-color: $button-brand-primary--backgroundColor;
+ background-color: button.$button-brand-primary--backgroundColor;
&:disabled {
background-color: string.unquote(
- $button-brand-primary--backgroundColor + "40"
+ button.$button-brand-primary--backgroundColor + "40"
);
}
&:not(:disabled) {
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
- background-color: $button-brand-primary-hover-backgroundColor;
+ background-color: button.$button-brand-primary-hover-backgroundColor;
}
&:active {
@@ -65,18 +68,18 @@
}
&%variant-primary {
- background-color: $button-primary--backgroundColor;
+ background-color: button.$button-primary--backgroundColor;
&:disabled {
background-color: string.unquote(
- $button-primary--backgroundColor + "40"
+ button.$button-primary--backgroundColor + "40"
);
}
&:not(:disabled) {
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
- background-color: $button-primary-hover-backgroundColor;
+ background-color: button.$button-primary-hover-backgroundColor;
}
&:active {
@@ -89,45 +92,47 @@
// TODO: This might get replaced by another effect
backdrop-filter: blur(4px);
background-color: transparent;
- border-color: $db-color-cool-gray-700;
- color: $db-color-cool-gray-700;
+ border-color: variables.$db-color-cool-gray-700;
+ color: variables.$db-color-cool-gray-700;
&:disabled {
- color: string.unquote($db-color-cool-gray-700 + "80");
- border-color: string.unquote($db-color-cool-gray-700 + "40");
+ color: string.unquote(variables.$db-color-cool-gray-700 + "80");
+ border-color: string.unquote(
+ variables.$db-color-cool-gray-700 + "40"
+ );
}
&:not(:disabled) {
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
- background-color: $button-secondaryOutline-hover-backgroundColor;
+ background-color: button.$button-secondaryOutline-hover-backgroundColor;
}
&:active {
- background-color: $button-secondaryOutline-active-backgroundColor;
+ background-color: button.$button-secondaryOutline-active-backgroundColor;
}
}
}
&%variant-secondarySolid {
- background-color: $button-secondarySolid--backgroundColor;
- color: $db-color-cool-gray-700;
+ background-color: button.$button-secondarySolid--backgroundColor;
+ color: variables.$db-color-cool-gray-700;
&:disabled {
- color: string.unquote($db-color-cool-gray-700 + "80");
+ color: string.unquote(variables.$db-color-cool-gray-700 + "80");
background-color: string.unquote(
- $button-secondarySolid--backgroundColor + "40"
+ button.$button-secondarySolid--backgroundColor + "40"
);
}
&:not(:disabled) {
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
- background-color: $button-secondarySolid-hover-backgroundColor;
+ background-color: button.$button-secondarySolid-hover-backgroundColor;
}
&:active {
- background-color: $button-secondarySolid-active-backgroundColor;
+ background-color: button.$button-secondarySolid-active-backgroundColor;
}
}
}
@@ -135,55 +140,55 @@
&%variant-tertiaryPlain {
background-color: transparent; // shame.css
border: 2px solid transparent;
- color: $db-color-cool-gray-700;
+ color: variables.$db-color-cool-gray-700;
&:disabled {
- color: string.unquote($db-color-cool-gray-700 + "80");
+ color: string.unquote(variables.$db-color-cool-gray-700 + "80");
}
&:not(:disabled) {
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
- background-color: $button-secondaryOutline-hover-backgroundColor;
+ background-color: button.$button-secondaryOutline-hover-backgroundColor;
}
&:active {
- background-color: $button-secondaryOutline-active-backgroundColor;
+ background-color: button.$button-secondaryOutline-active-backgroundColor;
}
}
}
// Sizes
&%size-Small {
- min-height: to-rem($pxValue: 36);
+ min-height: functions.to-rem($pxValue: 36);
&:not(.is-icon-text-replace) {
- font-size: to-rem($pxValue: 14);
+ font-size: functions.to-rem($pxValue: 14);
}
&[data-icon],
&[data-icon-before] {
- @include iconMeta(20);
+ @include icons.iconMeta(20);
}
&[data-icon-after] {
- @include iconMeta($size: 20, $position: "after");
+ @include icons.iconMeta($size: 20, $position: "after");
}
// Square icon only buttons
&.is-icon-text-replace {
- width: to-rem($pxValue: 36);
+ width: functions.to-rem($pxValue: 36);
}
}
&%size-Large {
- min-height: to-rem($pxValue: 52);
+ min-height: functions.to-rem($pxValue: 52);
&:not(.is-icon-text-replace) {
- font-size: to-rem($pxValue: 20);
+ font-size: functions.to-rem($pxValue: 20);
}
// Square icon only buttons
&.is-icon-text-replace {
- width: to-rem($pxValue: 52);
+ width: functions.to-rem($pxValue: 52);
}
}
@@ -217,7 +222,7 @@
}
&:disabled {
- color: string.unquote($button---color + "80");
+ color: string.unquote(button.$button---color + "80");
}
// width
diff --git a/source/_patterns/01-elements/buttons/enterprise/_button.variables.scss b/source/_patterns/01-elements/buttons/enterprise/_button.variables.scss
index f80acea386f..a8a2b5fcabe 100644
--- a/source/_patterns/01-elements/buttons/enterprise/_button.variables.scss
+++ b/source/_patterns/01-elements/buttons/enterprise/_button.variables.scss
@@ -1 +1 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/01-elements/buttons/enterprise/button.scss b/source/_patterns/01-elements/buttons/enterprise/button.scss
index 3bad30ec6c0..99127564643 100644
--- a/source/_patterns/01-elements/buttons/enterprise/button.scss
+++ b/source/_patterns/01-elements/buttons/enterprise/button.scss
@@ -1,2 +1,2 @@
-@import "button.variables";
-@import "../button";
+@use "button.variables";
+@use "../button" as button2;
diff --git a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
index 8f93fe9c52a..7eb5dc21cb5 100644
--- a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
+++ b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
@@ -1,12 +1,13 @@
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
-@import "../../00-base/colors/colors.variables";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
+@use "../../00-base/colors/colors.variables";
+@use "@db-ui/base/build/scss/variables";
$checkbox---backgroundColor: rgba(255, 255, 255, 0.1) !default;
-$checkbox---borderColor: $db-color-cool-gray-700 !default;
-$checkbox---color: $db-color-cool-gray-700 !default;
+$checkbox---borderColor: variables.$db-color-cool-gray-700 !default;
+$checkbox---color: variables.$db-color-cool-gray-700 !default;
-$checkbox--checked-backgroundColor: $db-color-cool-gray-700 !default;
+$checkbox--checked-backgroundColor: variables.$db-color-cool-gray-700 !default;
$checkbox--checked-color: #fff !default;
$checkbox-hover-checked-backgroundColor: #52575f !default;
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index a2367238b5a..1dc7470c747 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -1,22 +1,25 @@
@charset "utf-8";
-@import "../../../css/partials.meta";
-@import "checkbox.variables";
-@import "../form-elements";
+@use "../../../css/partials.meta";
+@use "checkbox.variables";
+@use "../form-elements";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.elm-checkbox {
--db-form-element-dimensions: var(
--db-checkbox-dimensions,
- #{to-rem($pxValue: 24)}
+ #{functions.to-rem($pxValue: 24)}
);
align-content: center;
appearance: none;
- background-color: $checkbox---backgroundColor;
- border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
+ background-color: checkbox.$checkbox---backgroundColor;
+ border: #{functions.to-rem($pxValue: 1)} solid checkbox.$checkbox---borderColor;
border-radius: 4px;
- color: $checkbox---color;
+ color: checkbox.$checkbox---color;
display: inline-flex;
height: var(--db-form-element-dimensions);
@@ -25,7 +28,7 @@
& {
@extend %form-element-enhanced-clickable-area;
- @include icon("\00A0", 24, "outline", $partial: $partial);
+ @include icons.icon("\00A0", 24, "outline", $partial: partials.$partial);
}
&[type="checkbox"] {
@@ -38,11 +41,11 @@
}
&:checked {
- background-color: $checkbox--checked-backgroundColor;
+ background-color: checkbox.$checkbox--checked-backgroundColor;
&::before {
- color: $checkbox--checked-color;
- content: glyph(done);
+ color: checkbox.$checkbox--checked-color;
+ content: icons.glyph(done);
}
}
@@ -51,7 +54,7 @@
background-color: rgba(40, 45, 55, 0.14);
&:checked {
- background-color: $checkbox-hover-checked-backgroundColor;
+ background-color: checkbox.$checkbox-hover-checked-backgroundColor;
}
}
@@ -62,7 +65,7 @@
&:indeterminate {
&::before {
- content: glyph(minus);
+ content: icons.glyph(minus);
}
}
@@ -76,6 +79,6 @@
& + label {
@extend %form-label;
- padding-inline-start: $db-spacing-xs;
+ padding-inline-start: variables.$db-spacing-xs;
}
}
diff --git a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
index 8cb4c8ae2a0..a38d4973a1c 100644
--- a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
+++ b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
@@ -1,18 +1,19 @@
@charset "utf-8";
-@import "checkbox.variables";
-@import "../checkbox.variables";
+@use "checkbox.variables" as checkbox2;
+@use "../checkbox.variables";
+@use "../../../../css/helpers/functions";
.pl-js-pattern-example {
[id^="elements-checkbox-on-dark-background"] & {
background-color: $Background;
color: $LightBG;
- padding: to-rem($pxValue: 16);
+ padding: functions.to-rem($pxValue: 16);
.elm-checkbox {
- background-color: $checkbox-onDarkBackground--backgroundColor;
- border-color: $checkbox-onDarkBackground--borderColor;
- color: $checkbox-onDarkBackground--color;
+ background-color: checkbox.$checkbox-onDarkBackground--backgroundColor;
+ border-color: checkbox.$checkbox-onDarkBackground--borderColor;
+ color: checkbox.$checkbox-onDarkBackground--color;
}
}
}
diff --git a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss
index c1ebecd7a46..acd08d0c3e3 100644
--- a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss
+++ b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/icons.variables";
-@import "../../../00-base/colors/colors.variables";
+@use "../../../00-base/icons/icons.variables";
+@use "../../../00-base/colors/colors.variables";
diff --git a/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss b/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss
index 8609216073f..1001bf97e6c 100644
--- a/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss
@@ -1,2 +1,2 @@
-@import "checkbox.variables";
-@import "../checkbox";
+@use "checkbox.variables";
+@use "../checkbox" as checkbox2;
diff --git a/source/_patterns/01-elements/chips/_chip.variables.scss b/source/_patterns/01-elements/chips/_chip.variables.scss
index f32adb514ca..625acff3898 100644
--- a/source/_patterns/01-elements/chips/_chip.variables.scss
+++ b/source/_patterns/01-elements/chips/_chip.variables.scss
@@ -1,12 +1,13 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
+@use "@db-ui/base/build/scss/variables";
-$chip---radius: to-rem(
+$chip---radius: functions.to-rem(
$pxValue: 4
) !default;
-$chip-hover--backgroundColor: rgba($db-color-cool-gray-700, 0.03) !default;
-$chip-selected--backgroundColor: $db-color-cool-gray-700 !default;
-$chip-checked--color: $db-color-white !default;
+$chip-hover--backgroundColor: rgba(variables.$db-color-cool-gray-700, 0.03) !default;
+$chip-selected--backgroundColor: variables.$db-color-cool-gray-700 !default;
+$chip-checked--color: variables.$db-color-white !default;
// $chip---color: $db-color-white !default;
diff --git a/source/_patterns/01-elements/chips/chip.scss b/source/_patterns/01-elements/chips/chip.scss
index 87a954ba252..440d4a6ae08 100644
--- a/source/_patterns/01-elements/chips/chip.scss
+++ b/source/_patterns/01-elements/chips/chip.scss
@@ -1,22 +1,25 @@
-@import "../../../css/partials.meta";
-@import "chip.variables";
+@use "../../../css/partials.meta";
+@use "chip.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.elm-chip {
& + label {
--db-focus-outline-size: max(2px, 0.08em);
align-items: center;
- border: solid 1px $db-color-cool-gray-400;
- border-radius: $chip---radius;
+ border: solid 1px variables.$db-color-cool-gray-400;
+ border-radius: chip.$chip---radius;
display: inline-flex;
font-weight: 500;
// Link related styles
- font-size: to-rem($pxValue: 14);
- height: to-rem($pxValue: 28);
+ font-size: functions.to-rem($pxValue: 14);
+ height: functions.to-rem($pxValue: 28);
justify-content: center;
- padding-left: to-rem($pxValue: 7);
- padding-right: to-rem($pxValue: 7);
+ padding-left: functions.to-rem($pxValue: 7);
+ padding-right: functions.to-rem($pxValue: 7);
text-decoration: none;
text-transform: capitalize;
white-space: nowrap;
@@ -24,91 +27,91 @@
// Icons
&[data-icon],
&[data-icon-before] {
- @include iconMeta(20);
+ @include icons.iconMeta(20);
}
&[data-icon-after] {
- @include iconMeta($size: 20, $position: "after");
+ @include icons.iconMeta($size: 20, $position: "after");
}
}
&:not(:disabled, :checked) {
// States
& + label:hover {
- background-color: $chip-hover--backgroundColor;
+ background-color: chip.$chip-hover--backgroundColor;
}
}
&:checked {
& + label {
- background-color: $chip-selected--backgroundColor;
+ background-color: chip.$chip-selected--backgroundColor;
border-color: transparent;
- color: $chip-checked--color;
+ color: chip.$chip-checked--color;
//*** Variants ***
&[data-variant="light"] {
- background-color: $db-color-cool-gray-200;
- color: $db-color-cool-gray-700;
- border: 1px solid $db-color-cool-gray-400;
+ background-color: variables.$db-color-cool-gray-200;
+ color: variables.$db-color-cool-gray-700;
+ border: 1px solid variables.$db-color-cool-gray-400;
}
&[data-variant="warning"] {
- background-color: $db-color-warning;
+ background-color: variables.$db-color-warning;
}
&[data-variant="error"] {
- background-color: $db-color-error;
+ background-color: variables.$db-color-error;
}
&[data-variant="informative"] {
- background-color: $db-color-informative;
+ background-color: variables.$db-color-informative;
}
&[data-variant="success"] {
- background-color: $db-color-success;
+ background-color: variables.$db-color-success;
}
// POIs
&[data-variant="poi-essen-trinken"] {
- background-color: $db-color-food-drink;
- color: $db-color-cool-gray-700;
+ background-color: variables.$db-color-food-drink;
+ color: variables.$db-color-cool-gray-700;
}
&[data-variant="poi-einkaufen"] {
- background-color: $db-color-shopping;
+ background-color: variables.$db-color-shopping;
}
&[data-variant="poi-gesundheit"] {
- background-color: $db-color-health;
+ background-color: variables.$db-color-health;
}
&[data-variant="poi-kunst-kultur"] {
- background-color: $db-color-arts-culture;
+ background-color: variables.$db-color-arts-culture;
}
&[data-variant="poi-wissenswertes"] {
- background-color: $db-color-things-to-know;
+ background-color: variables.$db-color-things-to-know;
}
&[data-variant="poi-freizeit"] {
- background-color: $db-color-leisure;
+ background-color: variables.$db-color-leisure;
}
&[data-variant="poi-zivile-rel-einrichtungen"] {
- background-color: $db-color-community-facilities;
+ background-color: variables.$db-color-community-facilities;
}
&[data-variant="poi-dienstleistungen"] {
- background-color: $db-color-services;
- color: $db-color-cool-gray-700;
+ background-color: variables.$db-color-services;
+ color: variables.$db-color-cool-gray-700;
}
&[data-variant="poi-db-services-einrichtung"] {
- background-color: $db-color-db-services-facilities;
+ background-color: variables.$db-color-db-services-facilities;
}
&[data-variant="poi-wegeleitung"] {
- background-color: $db-color-guidance;
+ background-color: variables.$db-color-guidance;
}
}
}
@@ -133,6 +136,6 @@
&[type="checkbox"],
&[type="radio"] {
- @include a11y-visually-hidden($partial: $partial);
+ @include functions.a11y-visually-hidden($partial: partials.$partial);
}
}
diff --git a/source/_patterns/01-elements/chips/enterprise/_chip.demonstration.scss b/source/_patterns/01-elements/chips/enterprise/_chip.demonstration.scss
index ef740bef502..2702104ec27 100644
--- a/source/_patterns/01-elements/chips/enterprise/_chip.demonstration.scss
+++ b/source/_patterns/01-elements/chips/enterprise/_chip.demonstration.scss
@@ -1,5 +1,5 @@
-@import "chip.variables";
-@import "../chip.variables";
+@use "chip.variables";
+@use "../chip.variables" as chip2;
// .elm-chip {
// }
diff --git a/source/_patterns/01-elements/chips/enterprise/_chip.variables.scss b/source/_patterns/01-elements/chips/enterprise/_chip.variables.scss
index 4737cf5fd1c..f30ea8daaa9 100644
--- a/source/_patterns/01-elements/chips/enterprise/_chip.variables.scss
+++ b/source/_patterns/01-elements/chips/enterprise/_chip.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../../css/helpers/functions";
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../../css/helpers/functions";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/01-elements/chips/enterprise/chip.scss b/source/_patterns/01-elements/chips/enterprise/chip.scss
index 98d1f932070..8f5449cf017 100644
--- a/source/_patterns/01-elements/chips/enterprise/chip.scss
+++ b/source/_patterns/01-elements/chips/enterprise/chip.scss
@@ -1,2 +1,2 @@
-@import "chip.variables";
-@import "../chip";
+@use "chip.variables";
+@use "../chip" as chip2;
diff --git a/source/_patterns/01-elements/headline/_headline.variables.scss b/source/_patterns/01-elements/headline/_headline.variables.scss
index a6b9a8ff6ef..51651efa3a5 100644
--- a/source/_patterns/01-elements/headline/_headline.variables.scss
+++ b/source/_patterns/01-elements/headline/_headline.variables.scss
@@ -1,4 +1,4 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
// * TODO: possibly rework variable naming
$rea-main-h1-font-size: 36 !default;
diff --git a/source/_patterns/01-elements/headline/enterprise/_headline.variables.scss b/source/_patterns/01-elements/headline/enterprise/_headline.variables.scss
index b06098d43a4..6322e573c26 100644
--- a/source/_patterns/01-elements/headline/enterprise/_headline.variables.scss
+++ b/source/_patterns/01-elements/headline/enterprise/_headline.variables.scss
@@ -1 +1 @@
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/01-elements/headline/enterprise/headline.scss b/source/_patterns/01-elements/headline/enterprise/headline.scss
index 6afdcbf9b1c..29a62bc4955 100644
--- a/source/_patterns/01-elements/headline/enterprise/headline.scss
+++ b/source/_patterns/01-elements/headline/enterprise/headline.scss
@@ -1,2 +1,2 @@
-@import "headline.variables";
-@import "../headline";
+@use "headline.variables";
+@use "../headline" as headline2;
diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss
index 68824506b16..2d27e31c355 100644
--- a/source/_patterns/01-elements/headline/headline.scss
+++ b/source/_patterns/01-elements/headline/headline.scss
@@ -1,28 +1,31 @@
@use "sass:math";
-@import "headline.variables";
+@use "headline.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
.elm-headline {
text-wrap: balance;
- margin-bottom: to-rem($pxValue: 16);
+ margin-bottom: functions.to-rem($pxValue: 16);
// * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
- margin-top: to-rem($pxValue: 24);
+ margin-top: functions.to-rem($pxValue: 24);
&[data-pulse] {
&::after {
background: var(--db-pulse-background, #ec0016);
border-radius: calc(
- var(--db-logo-height, #{$db-logo-default-height}) / 7 * 0.5
+ var(--db-logo-height, #{db-ui-core.$db-logo-default-height}) / 7 * 0.5
);
content: "";
display: block;
margin-bottom: var(--db-pulse-margin-bottom, 14px);
margin-top: calc(
- var(--db-logo-height, #{$db-logo-default-height}) * 0.5
+ var(--db-logo-height, #{db-ui-core.$db-logo-default-height}) * 0.5
);
- width: var(--db-logo-width, #{$db-logo-default-width});
- height: calc(var(--db-logo-height, #{$db-logo-default-height}) / 7);
+ width: var(--db-logo-width, #{db-ui-core.$db-logo-default-width});
+ height: calc(var(--db-logo-height, #{db-ui-core.$db-logo-default-height}) / 7);
}
}
}
@@ -31,20 +34,20 @@ h1,
h2,
h3 {
&.elm-headline {
- font-family: $db-font-family-headline;
+ font-family: variables.$db-font-family-headline;
font-weight: 900;
}
}
h1 {
&.elm-headline {
- font-size: to-rem(
- $pxValue: $rea-main-h1-font-size
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h1-font-size
); // * TODO: possibly rework variable naming
- line-height: math.div(40, $rea-main-h1-font-size);
+ line-height: math.div(40, headline.$rea-main-h1-font-size);
@media screen and (max-width: 767px) {
- font-size: to-rem(
- $pxValue: $rea-main-h1-font-size-small
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h1-font-size-small
); // * TODO: possibly rework variable naming
line-height: 1.14;
}
@@ -53,13 +56,13 @@ h1 {
h2 {
&.elm-headline {
- font-size: to-rem(
- $pxValue: $rea-main-h2-font-size
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h2-font-size
); // * TODO: possibly rework variable naming
- line-height: math.div(28, $rea-main-h2-font-size);
+ line-height: math.div(28, headline.$rea-main-h2-font-size);
@media screen and (max-width: 767px) {
- font-size: to-rem(
- $pxValue: $rea-main-h2-font-size-small
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h2-font-size-small
); // * TODO: possibly rework variable naming
line-height: 1.2;
}
@@ -68,13 +71,13 @@ h2 {
h3 {
&.elm-headline {
- font-size: to-rem(
- $pxValue: $rea-main-h3-font-size
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h3-font-size
); // * TODO: possibly rework variable naming
- line-height: math.div(24, $rea-main-h3-font-size);
+ line-height: math.div(24, headline.$rea-main-h3-font-size);
@media screen and (max-width: 767px) {
- font-size: to-rem(
- $pxValue: $rea-main-h3-font-size-small
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h3-font-size-small
); // * TODO: possibly rework variable naming
line-height: 1.33;
}
@@ -83,14 +86,14 @@ h3 {
h4 {
&.elm-headline {
- font-size: to-rem(
- $pxValue: $rea-main-h4-font-size
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h4-font-size
); // * TODO: possibly rework variable naming
font-weight: 400;
- line-height: math.div(24, $rea-main-h4-font-size);
+ line-height: math.div(24, headline.$rea-main-h4-font-size);
@media screen and (max-width: 767px) {
- font-size: to-rem(
- $pxValue: $rea-main-h4-font-size-small
+ font-size: functions.to-rem(
+ $pxValue: headline.$rea-main-h4-font-size-small
); // * TODO: possibly rework variable naming
line-height: 1.25;
}
diff --git a/source/_patterns/01-elements/image/_image.variables.scss b/source/_patterns/01-elements/image/_image.variables.scss
index cfb2ecf9862..c45ace36f83 100644
--- a/source/_patterns/01-elements/image/_image.variables.scss
+++ b/source/_patterns/01-elements/image/_image.variables.scss
@@ -1,4 +1,4 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
$brand-image--width: 39px !default;
$image-logo--maxwidth: 200px !default;
diff --git a/source/_patterns/01-elements/image/enterprise/image.scss b/source/_patterns/01-elements/image/enterprise/image.scss
index 2ea2f9e7a59..a666d55acb6 100644
--- a/source/_patterns/01-elements/image/enterprise/image.scss
+++ b/source/_patterns/01-elements/image/enterprise/image.scss
@@ -1,2 +1,2 @@
-@import "image.variables";
-@import "../image";
+@use "image.variables";
+@use "../image" as image2;
diff --git a/source/_patterns/01-elements/image/image.scss b/source/_patterns/01-elements/image/image.scss
index ca89f96d39d..adda4adbcaa 100644
--- a/source/_patterns/01-elements/image/image.scss
+++ b/source/_patterns/01-elements/image/image.scss
@@ -1,4 +1,4 @@
-@import "image.variables";
+@use "image.variables";
.elm-image {
// We removed logo styles here
diff --git a/source/_patterns/01-elements/input/_input.variables.scss b/source/_patterns/01-elements/input/_input.variables.scss
index 21c0a2e8078..60cabfeec2f 100644
--- a/source/_patterns/01-elements/input/_input.variables.scss
+++ b/source/_patterns/01-elements/input/_input.variables.scss
@@ -1,4 +1,5 @@
$icons-path: "../../../icons/" !default;
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
+@use "@db-ui/base/build/scss/variables";
-$input---color: $db-color-cool-gray-700 !default;
+$input---color: variables.$db-color-cool-gray-700 !default;
diff --git a/source/_patterns/01-elements/input/enterprise/_input.variables.scss b/source/_patterns/01-elements/input/enterprise/_input.variables.scss
index 87ca6d035e4..62da29ec61c 100644
--- a/source/_patterns/01-elements/input/enterprise/_input.variables.scss
+++ b/source/_patterns/01-elements/input/enterprise/_input.variables.scss
@@ -1,2 +1,2 @@
$icons-path: "../../../../icons/" !default;
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/01-elements/input/enterprise/input.scss b/source/_patterns/01-elements/input/enterprise/input.scss
index fa14522f788..3a3508708d4 100644
--- a/source/_patterns/01-elements/input/enterprise/input.scss
+++ b/source/_patterns/01-elements/input/enterprise/input.scss
@@ -1,2 +1,2 @@
-@import "input.variables";
-@import "../input";
+@use "input.variables";
+@use "../input" as input2;
diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss
index e88560c4c82..f50718ba9c7 100644
--- a/source/_patterns/01-elements/input/input.scss
+++ b/source/_patterns/01-elements/input/input.scss
@@ -1,25 +1,28 @@
@charset "utf-8";
-@import "../../../css/partials.meta";
-@import "input.variables";
-@import "../form-elements";
+@use "../../../css/partials.meta";
+@use "input.variables";
+@use "../form-elements";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
.elm-input {
@extend %form-element;
- color: $input---color;
+ color: input.$input---color;
- font-size: to-rem($pxValue: 16);
- height: to-rem($pxValue: 44);
- line-height: to-rem($pxValue: 24);
+ font-size: functions.to-rem($pxValue: 16);
+ height: functions.to-rem($pxValue: 44);
+ line-height: functions.to-rem($pxValue: 24);
max-width: 100%;
width: 100%;
- padding-inline: $db-spacing-m;
+ padding-inline: variables.$db-spacing-m;
// No need to reposition the included value on hidden label
&:not(:has(+ label[data-label-hidden="true"])) {
- padding-block: $db-spacing-s;
+ padding-block: variables.$db-spacing-s;
}
&[list] {
@@ -32,7 +35,7 @@
padding-bottom: 0;
// No need to reposition the included value on hidden label
&:not(:has(+ label[data-label-hidden="true"])) {
- padding-top: to-rem($pxValue: 16);
+ padding-top: functions.to-rem($pxValue: 16);
}
}
@@ -46,7 +49,7 @@
&:focus,
&:hover {
&:not(:disabled) {
- --formElement---borderColor: #{$db-color-cool-gray-400};
+ --formElement---borderColor: #{variables.$db-color-cool-gray-400};
}
}
@@ -99,12 +102,12 @@
& + .elm-label {
@extend %form-label;
- color: $db-color-cool-gray-500;
+ color: variables.$db-color-cool-gray-500;
display: block;
- font-size: to-rem($pxValue: 12);
+ font-size: functions.to-rem($pxValue: 12);
- margin-bottom: -#{to-rem($pxValue: 18)};
- transform: translate($db-spacing-m, -#{to-rem($pxValue: 41)});
+ margin-bottom: -#{functions.to-rem($pxValue: 18)};
+ transform: translate(variables.$db-spacing-m, -#{functions.to-rem($pxValue: 41)});
& + output,
& ~ .description {
@@ -121,7 +124,7 @@
}
&::placeholder {
- color: $db-color-cool-gray-500;
+ color: variables.$db-color-cool-gray-500;
}
// ### Style variations
@@ -164,17 +167,17 @@
&[type="search"] {
background: var(
--db-ic-search-24,
- url(#{$icons-path}functional/images/action/db_ic_search_24.svg)
+ url(#{db-ui-core.$icons-path}functional/images/action/db_ic_search_24.svg)
)
- no-repeat to-rem($pxValue: 6) to-rem($pxValue: 12);
- background-size: to-rem($pxValue: 19);
- padding-left: to-rem($pxValue: 32);
+ no-repeat functions.to-rem($pxValue: 6) functions.to-rem($pxValue: 12);
+ background-size: functions.to-rem($pxValue: 19);
+ padding-left: functions.to-rem($pxValue: 32);
:not(.cmp-sitesearch) > & {
@extend %form-element-semitransparent;
& + .elm-label {
- margin-left: to-rem($pxValue: 16);
+ margin-left: functions.to-rem($pxValue: 16);
}
}
}
diff --git a/source/_patterns/01-elements/link/_link.variables.scss b/source/_patterns/01-elements/link/_link.variables.scss
index 4306a8d6e2c..6a5660e759a 100644
--- a/source/_patterns/01-elements/link/_link.variables.scss
+++ b/source/_patterns/01-elements/link/_link.variables.scss
@@ -1,6 +1,7 @@
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/colors/colors.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/colors/colors.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
+@use "@db-ui/base/build/scss/variables";
$link--disabled-opacity: 0.4 !default;
-$link-reaMain--color: $db-color-cyan-600 !default;
+$link-reaMain--color: variables.$db-color-cyan-600 !default;
diff --git a/source/_patterns/01-elements/link/enterprise/_link.variables.scss b/source/_patterns/01-elements/link/enterprise/_link.variables.scss
index da54734ddab..d8d71197611 100644
--- a/source/_patterns/01-elements/link/enterprise/_link.variables.scss
+++ b/source/_patterns/01-elements/link/enterprise/_link.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/01-elements/link/enterprise/link.scss b/source/_patterns/01-elements/link/enterprise/link.scss
index 27a0c2c9bdd..93cfea261a9 100644
--- a/source/_patterns/01-elements/link/enterprise/link.scss
+++ b/source/_patterns/01-elements/link/enterprise/link.scss
@@ -1,2 +1,2 @@
-@import "link.variables";
-@import "../link";
+@use "link.variables";
+@use "../link" as link2;
diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss
index 4abba982672..2f5eafd9b76 100644
--- a/source/_patterns/01-elements/link/link.scss
+++ b/source/_patterns/01-elements/link/link.scss
@@ -1,12 +1,14 @@
-@import "../../../css/partials.meta";
-@import "link.variables";
+@use "../../../css/partials.meta";
+@use "link.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.elm-link {
- border-radius: to-rem($pxValue: 4);
+ border-radius: functions.to-rem($pxValue: 4);
display: inline-block;
// Link underline
- text-underline-offset: to-rem($pxValue: 3);
+ text-underline-offset: functions.to-rem($pxValue: 3);
text-underline-position: under;
@supports (text-underline-offset: 3px) {
text-underline-position: auto;
@@ -18,7 +20,7 @@
// "disabled" links
&[aria-disabled="true"] {
- opacity: $link--disabled-opacity;
+ opacity: link.$link--disabled-opacity;
pointer-events: none;
@@ -30,17 +32,17 @@
// Sizes
&%size-Small {
&:not(.is-icon-text-replace) {
- font-size: to-rem($pxValue: 14);
+ font-size: functions.to-rem($pxValue: 14);
}
&[rel],
&[data-icon],
&[data-icon-before] {
- @include iconMeta(20);
+ @include icons.iconMeta(20);
}
&[data-icon-after]::after {
- @include iconMeta($size: 20, $position: "after");
+ @include icons.iconMeta($size: 20, $position: "after");
}
}
@@ -50,15 +52,15 @@
// Define the available icons
&[rel="configuration"] {
- @include icon(glyph(settings), 24, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(settings), 24, "outline", $partial: partials.$partial);
}
&[rel="messages"] {
- @include icon(glyph(chat), 24, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(chat), 24, "outline", $partial: partials.$partial);
}
&[rel="account"] {
- @include icon(glyph(account), 24, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(account), 24, "outline", $partial: partials.$partial);
}
&[rel="configuration"],
diff --git a/source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss b/source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss
index 3d3389c17a3..141fb2fb864 100644
--- a/source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss
+++ b/source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss
@@ -1,4 +1,4 @@
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
$db-spinner-sizes: (
"xs": 20px,
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
index 58bf95bdc99..e75242f0ef3 100644
--- a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
@@ -2,7 +2,9 @@
@use "sass:map";
@use "sass:math";
-@import "loading-indicator.variables";
+@use "sass:map";
+@use "loading-indicator.variables";
+@use "@db-ui/base/build/scss/variables";
.elm-loadingindicator {
display: block;
@@ -18,19 +20,19 @@
&%size-#{$size} {
--loadingindicator--stroke-width: #{math.div(
44px,
- map.get($db-spinner-sizes, $size)
+ map.get(loading-indicator.$db-spinner-sizes, $size)
) *
$stroke-width};
--loadingindicator--r: 19px;
- height: map.get($db-spinner-sizes, $size);
- width: map.get($db-spinner-sizes, $size);
+ height: map.get(loading-indicator.$db-spinner-sizes, $size);
+ width: map.get(loading-indicator.$db-spinner-sizes, $size);
}
}
}
.elm-loadingindicator {
animation: loadingindicator-rotate 3s linear infinite;
- color: $db-color-red-500;
+ color: variables.$db-color-red-500;
/* stylelint-disable */
@include loadingindicator--sizes("elm-");
@extend %size-m; // default
diff --git a/source/_patterns/01-elements/logo/_logo.variables.scss b/source/_patterns/01-elements/logo/_logo.variables.scss
index a6735e94eba..fa931e69ea2 100644
--- a/source/_patterns/01-elements/logo/_logo.variables.scss
+++ b/source/_patterns/01-elements/logo/_logo.variables.scss
@@ -1 +1 @@
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
diff --git a/source/_patterns/01-elements/logo/enterprise/logo.scss b/source/_patterns/01-elements/logo/enterprise/logo.scss
index c1689c6d4fa..159d593334d 100644
--- a/source/_patterns/01-elements/logo/enterprise/logo.scss
+++ b/source/_patterns/01-elements/logo/enterprise/logo.scss
@@ -1 +1 @@
-@import "../logo";
+@use "../logo";
diff --git a/source/_patterns/01-elements/logo/logo.scss b/source/_patterns/01-elements/logo/logo.scss
index d0f763344dd..9c182c60260 100644
--- a/source/_patterns/01-elements/logo/logo.scss
+++ b/source/_patterns/01-elements/logo/logo.scss
@@ -1,5 +1,6 @@
@use "sass:map";
-@import "logo.variables";
+@use "logo.variables";
+@use "../../../css/db-ui-core.variables";
.elm-logo {
$logo-sizes: (
@@ -26,8 +27,8 @@
);
// aspect-ratio: 10 / 7;
- width: var(--db-logo-width, #{$db-logo-default-width});
- height: var(--db-logo-height, #{$db-logo-default-height});
+ width: var(--db-logo-width, #{db-ui-core.$db-logo-default-width});
+ height: var(--db-logo-height, #{db-ui-core.$db-logo-default-height});
// Logo safe zone
// margin: calc(var(--db-logo-height, #{$db-logo-default-height}) * 0.5);
diff --git a/source/_patterns/01-elements/progress/_progress.variables.scss b/source/_patterns/01-elements/progress/_progress.variables.scss
index f559b9f0d06..3df3646a951 100644
--- a/source/_patterns/01-elements/progress/_progress.variables.scss
+++ b/source/_patterns/01-elements/progress/_progress.variables.scss
@@ -1,4 +1,5 @@
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
+@use "@db-ui/base/build/scss/variables";
$progress---height: to-rem(
$pxValue: 4
@@ -8,13 +9,13 @@ $progress-value--backgroundColor: var(
) !default;
.elm-progress progress {
- --progress-value--backgroundColor: #{$db-color-red};
+ --progress-value--backgroundColor: #{variables.$db-color-red};
}
$progress---backgroundColor: #fcfdfd !default;
// Alternative - on dark background
-$progress-onDarkBackground-value-backgroundColor: $db-color-cool-gray-400 !default;
+$progress-onDarkBackground-value-backgroundColor: variables.$db-color-cool-gray-400 !default;
// Circle alternative
$progress-conic--size: 75 * 0.0625 !default;
@@ -23,7 +24,7 @@ $progress-conic-inner-size: $progress-conic--size - 1.25 !default;
$progress-conic--backgroundColor: #fff !default;
$progress-conic-inner-backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
// Alternative - on dark background
-$progress-onDarkBackground-conic-inner-backgroundColor: $db-color-cool-gray-700 !default;
+$progress-onDarkBackground-conic-inner-backgroundColor: variables.$db-color-cool-gray-700 !default;
$progress-conic--translateX: to-rem(
$pxValue: 10
diff --git a/source/_patterns/01-elements/progress/enterprise/_progress.demonstration.scss b/source/_patterns/01-elements/progress/enterprise/_progress.demonstration.scss
index 0f98e22e837..74296b365c8 100644
--- a/source/_patterns/01-elements/progress/enterprise/_progress.demonstration.scss
+++ b/source/_patterns/01-elements/progress/enterprise/_progress.demonstration.scss
@@ -1,11 +1,13 @@
-@import "progress.variables";
-@import "../progress.variables";
+@use "progress.variables" as progress2;
+@use "../progress.variables";
+@use "../../../../css/helpers/functions";
+@use "../../../00-base/colors/enterprise/colors.variables";
.pl-js-pattern-example {
[id^="elements-progress-"][id*="-dark-background"] & {
- background-color: $Background;
- color: $LightBG;
- padding: to-rem($pxValue: 16);
+ background-color: colors.$Background;
+ color: colors.$LightBG;
+ padding: functions.to-rem($pxValue: 16);
}
}
@@ -15,15 +17,15 @@
& {
progress {
&::-webkit-progress-value {
- --progress-value--backgroundColor: #{$progress-onDarkBackground-value-backgroundColor};
+ --progress-value--backgroundColor: #{progress.$progress-onDarkBackground-value-backgroundColor};
}
&::-moz-progress-bar {
- --progress-value--backgroundColor: #{$progress-onDarkBackground-value-backgroundColor};
+ --progress-value--backgroundColor: #{progress.$progress-onDarkBackground-value-backgroundColor};
}
&::-ms-fill {
- --progress-value--backgroundColor: #{$progress-onDarkBackground-value-backgroundColor};
+ --progress-value--backgroundColor: #{progress.$progress-onDarkBackground-value-backgroundColor};
}
}
}
@@ -33,10 +35,10 @@
& {
@supports (background: conic-gradient(#000, #fff)) {
progress {
- --progress-value--backgroundColor: #{$progress-onDarkBackground-value-backgroundColor};
+ --progress-value--backgroundColor: #{progress.$progress-onDarkBackground-value-backgroundColor};
& + label {
- background-color: $progress-onDarkBackground-conic-inner-backgroundColor; // * TODO: possibly rework variable naming
+ background-color: progress.$progress-onDarkBackground-conic-inner-backgroundColor; // * TODO: possibly rework variable naming
}
}
}
diff --git a/source/_patterns/01-elements/progress/enterprise/_progress.variables.scss b/source/_patterns/01-elements/progress/enterprise/_progress.variables.scss
index b06098d43a4..6322e573c26 100644
--- a/source/_patterns/01-elements/progress/enterprise/_progress.variables.scss
+++ b/source/_patterns/01-elements/progress/enterprise/_progress.variables.scss
@@ -1 +1 @@
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/01-elements/progress/enterprise/progress.scss b/source/_patterns/01-elements/progress/enterprise/progress.scss
index 8cc8908a283..ebadeb9fc2b 100644
--- a/source/_patterns/01-elements/progress/enterprise/progress.scss
+++ b/source/_patterns/01-elements/progress/enterprise/progress.scss
@@ -1,2 +1,2 @@
-@import "progress.variables";
-@import "../progress";
+@use "progress.variables";
+@use "../progress" as progress2;
diff --git a/source/_patterns/01-elements/progress/progress.scss b/source/_patterns/01-elements/progress/progress.scss
index 1e5f87cfe8f..bf893cd2826 100644
--- a/source/_patterns/01-elements/progress/progress.scss
+++ b/source/_patterns/01-elements/progress/progress.scss
@@ -1,29 +1,30 @@
-@import "../../../css/helpers/functions";
-@import "progress.variables";
+@use "../../../css/helpers/functions";
+@use "progress.variables";
+@use "@db-ui/base/build/scss/variables";
.elm-progress {
progress {
appearance: none;
- background-color: $progress---backgroundColor;
+ background-color: progress.$progress---backgroundColor;
border: none;
- height: $progress---height;
+ height: progress.$progress---height;
vertical-align: middle;
// Coloring the progress bar for the regular progress element
&::-webkit-progress-bar {
- background-color: $progress---backgroundColor;
+ background-color: progress.$progress---backgroundColor;
}
&::-webkit-progress-value {
- background-color: $progress-value--backgroundColor; // * TODO: possibly rework variable naming
+ background-color: progress.$progress-value--backgroundColor; // * TODO: possibly rework variable naming
}
&::-moz-progress-bar {
- background-color: $progress-value--backgroundColor; // * TODO: possibly rework variable naming
+ background-color: progress.$progress-value--backgroundColor; // * TODO: possibly rework variable naming
}
&::-ms-fill {
- background-color: $progress-value--backgroundColor; // * TODO: possibly rework variable naming
+ background-color: progress.$progress-value--backgroundColor; // * TODO: possibly rework variable naming
border: none;
}
@@ -48,11 +49,11 @@
animation-name: elmProgressMoveIndeterminate;
animation-timing-function: linear;
animation-timing-function: cubic-bezier(0.65, 0.815, 0.735, 0.395);
- background-color: $progress---backgroundColor;
+ background-color: progress.$progress---backgroundColor;
background-image: linear-gradient(
to right,
- $db-color-red 100%,
- $progress---backgroundColor 100%
+ variables.$db-color-red 100%,
+ progress.$progress---backgroundColor 100%
);
background-position: top left;
background-repeat: no-repeat;
@@ -76,14 +77,14 @@
--fill: calc(var(--progress-conic) * 1%);
background: conic-gradient(
- $progress-value--backgroundColor var(--fill),
- $progress-conic--backgroundColor 0
+ progress.$progress-value--backgroundColor var(--fill),
+ progress.$progress-conic--backgroundColor 0
); // * TODO: possibly rework variable naming
border: 0;
border-radius: 50%;
- height: #{$progress-conic--size}rem; // * TODO: possibly rework variable naming
- width: #{$progress-conic--size}rem; // * TODO: possibly rework variable naming
+ height: #{progress.$progress-conic--size}rem; // * TODO: possibly rework variable naming
+ width: #{progress.$progress-conic--size}rem; // * TODO: possibly rework variable naming
// * hides all pseudo elements on Webkit
&::-webkit-progress-inner-element,
@@ -99,18 +100,18 @@
& + output, // legacy; TODO: remove with the next major release
& + label {
align-items: center;
- background: $progress-conic-inner-backgroundColor; // * TODO: possibly rework variable naming
+ background: progress.$progress-conic-inner-backgroundColor; // * TODO: possibly rework variable naming
border-radius: 50%;
display: block;
display: flex;
- height: #{$progress-conic-inner-size}rem;
+ height: #{progress.$progress-conic-inner-size}rem;
justify-content: center;
position: absolute;
transform: translate(
- $progress-conic--translateX,
- $progress-conic--translateY
+ progress.$progress-conic--translateX,
+ progress.$progress-conic--translateY
);
- width: #{$progress-conic-inner-size}rem;
+ width: #{progress.$progress-conic-inner-size}rem;
}
}
}
diff --git a/source/_patterns/01-elements/radio/_radio.variables.scss b/source/_patterns/01-elements/radio/_radio.variables.scss
index 9d624928e84..783141a91c3 100644
--- a/source/_patterns/01-elements/radio/_radio.variables.scss
+++ b/source/_patterns/01-elements/radio/_radio.variables.scss
@@ -1,3 +1,4 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
+@use "@db-ui/base/build/scss/variables";
-$radio---border: $db-color-cool-gray-700 !default;
+$radio---border: variables.$db-color-cool-gray-700 !default;
diff --git a/source/_patterns/01-elements/radio/enterprise/_radio.demonstration.scss b/source/_patterns/01-elements/radio/enterprise/_radio.demonstration.scss
index c3aa4ad106d..bdcb47167c9 100644
--- a/source/_patterns/01-elements/radio/enterprise/_radio.demonstration.scss
+++ b/source/_patterns/01-elements/radio/enterprise/_radio.demonstration.scss
@@ -1,3 +1,3 @@
@charset "utf-8";
-@import "radio.variables";
+@use "radio.variables";
diff --git a/source/_patterns/01-elements/radio/enterprise/_radio.variables.scss b/source/_patterns/01-elements/radio/enterprise/_radio.variables.scss
index f80acea386f..a8a2b5fcabe 100644
--- a/source/_patterns/01-elements/radio/enterprise/_radio.variables.scss
+++ b/source/_patterns/01-elements/radio/enterprise/_radio.variables.scss
@@ -1 +1 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/01-elements/radio/enterprise/radio.scss b/source/_patterns/01-elements/radio/enterprise/radio.scss
index b9a7c104138..ef0b5cb39e3 100644
--- a/source/_patterns/01-elements/radio/enterprise/radio.scss
+++ b/source/_patterns/01-elements/radio/enterprise/radio.scss
@@ -1,2 +1,2 @@
-@import "radio.variables";
-@import "../radio";
+@use "radio.variables";
+@use "../radio" as radio2;
diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss
index 66f1fe9fd9d..080ee6102ba 100644
--- a/source/_patterns/01-elements/radio/radio.scss
+++ b/source/_patterns/01-elements/radio/radio.scss
@@ -1,13 +1,15 @@
@charset "utf-8";
-@import "../../../css/partials.meta";
-@import "radio.variables";
-@import "../form-elements";
+@use "../../../css/partials.meta";
+@use "radio.variables";
+@use "../form-elements";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
.elm-radio {
--db-form-element-dimensions: var(
--db-radio-dimensions,
- #{to-em($pxValue: 20)}
+ #{functions.to-em($pxValue: 20)}
);
@extend %form-element-enhanced-clickable-area;
@@ -15,13 +17,13 @@
appearance: none;
background-color: rgba(255, 255, 255, 0.1);
- border: to-rem($pxValue: 1) solid $radio---border;
- border-radius: to-em($pxValue: 16);
+ border: functions.to-rem($pxValue: 1) solid radio.$radio---border;
+ border-radius: functions.to-em($pxValue: 16);
// * the basic, unchecked style
display: inline-block;
- font-size: to-rem($pxValue: 16);
+ font-size: functions.to-rem($pxValue: 16);
height: var(--db-form-element-dimensions);
transition: border-width 0.5s ease;
@@ -45,7 +47,7 @@
}
&:checked {
- border-width: to-em($pxValue: 6);
+ border-width: functions.to-em($pxValue: 6);
}
// * the invalid style using the :user-invalid pseudo class (and [aria-invalid="true"] equivalent, see #136 and #141)
&:is(:user-invalid),
@@ -63,7 +65,7 @@
& + label {
@extend %form-label;
- padding-inline-start: $db-spacing-xs;
+ padding-inline-start: variables.$db-spacing-xs;
}
&:disabled {
diff --git a/source/_patterns/01-elements/select/_select.variables.scss b/source/_patterns/01-elements/select/_select.variables.scss
index 8dce7c9e35e..90a578444f6 100644
--- a/source/_patterns/01-elements/select/_select.variables.scss
+++ b/source/_patterns/01-elements/select/_select.variables.scss
@@ -1,4 +1,5 @@
$icons-path: "../../../icons/" !default;
-@import "../../00-base/colors/enterprise/colors.variables";
+@use "../../00-base/colors/enterprise/colors.variables";
+@use "@db-ui/base/build/scss/variables";
-$select-floatingLabel--color: $db-color-cool-gray-500 !default;
+$select-floatingLabel--color: variables.$db-color-cool-gray-500 !default;
diff --git a/source/_patterns/01-elements/select/enterprise/_select.variables.scss b/source/_patterns/01-elements/select/enterprise/_select.variables.scss
index 89c2dd37e78..fdd0b16a979 100644
--- a/source/_patterns/01-elements/select/enterprise/_select.variables.scss
+++ b/source/_patterns/01-elements/select/enterprise/_select.variables.scss
@@ -1,3 +1,3 @@
$icons-path: "../../../../icons/" !default;
-@import "../../../00-base/colors/enterprise/colors.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/01-elements/select/enterprise/select.scss b/source/_patterns/01-elements/select/enterprise/select.scss
index 716d3ee3b9c..f62b3428dc6 100644
--- a/source/_patterns/01-elements/select/enterprise/select.scss
+++ b/source/_patterns/01-elements/select/enterprise/select.scss
@@ -1,2 +1,2 @@
-@import "select.variables";
-@import "../select";
+@use "select.variables";
+@use "../select" as select2;
diff --git a/source/_patterns/01-elements/select/select.scss b/source/_patterns/01-elements/select/select.scss
index 0d57339100d..c014230f00e 100644
--- a/source/_patterns/01-elements/select/select.scss
+++ b/source/_patterns/01-elements/select/select.scss
@@ -1,12 +1,14 @@
-@import "../../../css/partials.meta";
-@import "select.variables";
-@import "../form-elements";
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/partials.meta";
+@use "select.variables";
+@use "../form-elements";
+@use "../../../css/db-ui-core.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
.elm-select {
@extend %form-element;
appearance: none;
- font-size: to-rem($pxValue: 16);
+ font-size: functions.to-rem($pxValue: 16);
// For IE
&::-ms-expand {
@@ -17,12 +19,12 @@
&:not([multiple]) {
background-image: var(
--db-ic-expand-more-20,
- url(#{$icons-path}functional/images/navigation/db_ic_expand_more_20.svg)
+ url(#{db-ui-core.$icons-path}functional/images/navigation/db_ic_expand_more_20.svg)
);
- background-position: right to-rem($pxValue: 11) center;
+ background-position: right functions.to-rem($pxValue: 11) center;
background-repeat: no-repeat;
- height: to-rem($pxValue: 44);
- padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-m;
+ height: functions.to-rem($pxValue: 44);
+ padding: functions.to-rem($pxValue: 20) functions.to-rem($pxValue: 42) 0 variables.$db-spacing-m;
// Semitransparent is the default style
@at-root :where(#{&}) {
@@ -49,9 +51,9 @@
&:has(option:checked:empty) {
& + .elm-label {
- color: $select-floatingLabel--color;
- font-size: to-rem($pxValue: 16);
- transform: translate($db-spacing-m, -#{to-rem($pxValue: 35)});
+ color: select.$select-floatingLabel--color;
+ font-size: functions.to-rem($pxValue: 16);
+ transform: translate(variables.$db-spacing-m, -#{functions.to-rem($pxValue: 35)});
}
}
@@ -63,11 +65,11 @@
&[data-variant] {
&:not([aria-invalid]) {
&:is(:user-valid) {
- --formElement---borderColor: #{$db-color-green-600};
+ --formElement---borderColor: #{variables.$db-color-green-600};
}
&:is(:user-invalid) {
- --formElement---borderColor: #{$db-color-red-500};
+ --formElement---borderColor: #{variables.$db-color-red-500};
}
}
}
@@ -105,9 +107,9 @@
@extend %form-label;
display: block;
- font-size: to-rem($pxValue: 12);
- margin-bottom: -#{to-rem($pxValue: 18)};
- transform: translate($db-spacing-m, -#{to-rem($pxValue: 41)});
+ font-size: functions.to-rem($pxValue: 12);
+ margin-bottom: -#{functions.to-rem($pxValue: 18)};
+ transform: translate(variables.$db-spacing-m, -#{functions.to-rem($pxValue: 41)});
transition:
opacity,
transform 150ms;
@@ -118,10 +120,10 @@
}
&[multiple] {
- margin-top: to-rem($pxValue: 16);
+ margin-top: functions.to-rem($pxValue: 16);
& + .elm-label {
- transform: translate($db-spacing-m, -#{to-rem($pxValue: 100)});
+ transform: translate(variables.$db-spacing-m, -#{functions.to-rem($pxValue: 100)});
}
}
@@ -132,11 +134,11 @@
option {
&:not(:disabled):hover {
- background-color: $db-color-cool-gray-200;
+ background-color: variables.$db-color-cool-gray-200;
}
&:checked {
- background-color: $db-color-cool-gray-200;
+ background-color: variables.$db-color-cool-gray-200;
}
}
}
diff --git a/source/_patterns/01-elements/tags/_tag.variables.scss b/source/_patterns/01-elements/tags/_tag.variables.scss
index 5ffc56c48ab..710b435fe9d 100644
--- a/source/_patterns/01-elements/tags/_tag.variables.scss
+++ b/source/_patterns/01-elements/tags/_tag.variables.scss
@@ -1,10 +1,11 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
+@use "@db-ui/base/build/scss/variables";
-$tag---radius: to-rem(
+$tag---radius: functions.to-rem(
$pxValue: 4
) !default;
-$tag---backgroundColor: $db-color-cool-gray-700 !default;
-$tag---color: $db-color-white !default;
+$tag---backgroundColor: variables.$db-color-cool-gray-700 !default;
+$tag---color: variables.$db-color-white !default;
diff --git a/source/_patterns/01-elements/tags/enterprise/_tag.demonstration.scss b/source/_patterns/01-elements/tags/enterprise/_tag.demonstration.scss
index 24ad869b978..979ee0ff5c6 100644
--- a/source/_patterns/01-elements/tags/enterprise/_tag.demonstration.scss
+++ b/source/_patterns/01-elements/tags/enterprise/_tag.demonstration.scss
@@ -1,5 +1,5 @@
-@import "tag.variables";
-@import "../tag.variables";
+@use "tag.variables";
+@use "../tag.variables" as tag2;
.elm-tag {
// .DO-NOT-COPY-THIS-CLASS-example-tags-on-light & {
diff --git a/source/_patterns/01-elements/tags/enterprise/_tag.variables.scss b/source/_patterns/01-elements/tags/enterprise/_tag.variables.scss
index 4737cf5fd1c..f30ea8daaa9 100644
--- a/source/_patterns/01-elements/tags/enterprise/_tag.variables.scss
+++ b/source/_patterns/01-elements/tags/enterprise/_tag.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../../css/helpers/functions";
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../../css/helpers/functions";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/01-elements/tags/enterprise/tag.scss b/source/_patterns/01-elements/tags/enterprise/tag.scss
index 46656395f39..8454279907c 100644
--- a/source/_patterns/01-elements/tags/enterprise/tag.scss
+++ b/source/_patterns/01-elements/tags/enterprise/tag.scss
@@ -1,2 +1,2 @@
-@import "tag.variables";
-@import "../tag";
+@use "tag.variables";
+@use "../tag" as tag2;
diff --git a/source/_patterns/01-elements/tags/tag.scss b/source/_patterns/01-elements/tags/tag.scss
index 9271b346739..f46826c9c59 100644
--- a/source/_patterns/01-elements/tags/tag.scss
+++ b/source/_patterns/01-elements/tags/tag.scss
@@ -1,25 +1,28 @@
-@import "tag.variables";
+@use "tag.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.elm-tag {
align-items: center;
- background-color: $tag---backgroundColor;
- border-radius: $tag---radius;
- color: $tag---color;
+ background-color: tag.$tag---backgroundColor;
+ border-radius: tag.$tag---radius;
+ color: tag.$tag---color;
display: inline-flex;
font-weight: 500;
// Link related styles
- font-size: to-rem($pxValue: 12);
- height: to-rem($pxValue: 24);
+ font-size: functions.to-rem($pxValue: 12);
+ height: functions.to-rem($pxValue: 24);
justify-content: center;
- padding-left: to-rem($pxValue: 4);
- padding-right: to-rem($pxValue: 4);
+ padding-left: functions.to-rem($pxValue: 4);
+ padding-right: functions.to-rem($pxValue: 4);
text-transform: capitalize;
white-space: nowrap;
// Sizes
&%size-Small {
- height: to-rem($pxValue: 20);
+ height: functions.to-rem($pxValue: 20);
}
&[data-size="small"] {
@@ -28,91 +31,91 @@
//*** Variants ***
&[data-variant="light"] {
- background-color: $db-color-cool-gray-200;
- color: $db-color-cool-gray-700;
- border: 1px solid $db-color-cool-gray-400;
+ background-color: variables.$db-color-cool-gray-200;
+ color: variables.$db-color-cool-gray-700;
+ border: 1px solid variables.$db-color-cool-gray-400;
}
&[data-variant="warning"] {
- background-color: $db-color-warning-small-font;
+ background-color: variables.$db-color-warning-small-font;
}
&[data-variant="error"] {
- background-color: $db-color-error-small-font;
+ background-color: variables.$db-color-error-small-font;
}
&[data-variant="informative"] {
- background-color: $db-color-informative-small-font;
+ background-color: variables.$db-color-informative-small-font;
}
&[data-variant="success"] {
- background-color: $db-color-success-small-font;
+ background-color: variables.$db-color-success-small-font;
}
// The "Gleis" additioally gets a bold font weight
&[data-variant="track"] {
- background-color: $db-color-blue-700;
+ background-color: variables.$db-color-blue-700;
font-weight: 700;
}
// POIs
&[data-variant="poi-essen-trinken"] {
- background-color: $db-color-food-drink;
- color: $db-color-cool-gray-700;
+ background-color: variables.$db-color-food-drink;
+ color: variables.$db-color-cool-gray-700;
}
&[data-variant="poi-einkaufen"] {
- background-color: $db-color-shopping;
+ background-color: variables.$db-color-shopping;
}
&[data-variant="poi-gesundheit"] {
- background-color: $db-color-health;
+ background-color: variables.$db-color-health;
}
&[data-variant="poi-kunst-kultur"] {
- background-color: $db-color-arts-culture;
+ background-color: variables.$db-color-arts-culture;
}
&[data-variant="poi-wissenswertes"] {
- background-color: $db-color-things-to-know;
+ background-color: variables.$db-color-things-to-know;
}
&[data-variant="poi-freizeit"] {
- background-color: $db-color-leisure;
+ background-color: variables.$db-color-leisure;
}
&[data-variant="poi-zivile-rel-einrichtungen"] {
- background-color: $db-color-community-facilities;
+ background-color: variables.$db-color-community-facilities;
}
&[data-variant="poi-dienstleistungen"] {
- background-color: $db-color-services;
- color: $db-color-cool-gray-700;
+ background-color: variables.$db-color-services;
+ color: variables.$db-color-cool-gray-700;
}
&[data-variant="poi-db-services-einrichtung"] {
- background-color: $db-color-db-services-facilities;
+ background-color: variables.$db-color-db-services-facilities;
}
&[data-variant="poi-wegeleitung"] {
- background-color: $db-color-guidance;
+ background-color: variables.$db-color-guidance;
}
// Icons
&[data-icon],
&[data-icon-before] {
- @include iconMeta(20);
+ @include icons.iconMeta(20);
&::before {
- --icon-margin-after: #{to-rem($pxValue: 2)};
+ --icon-margin-after: #{functions.to-rem($pxValue: 2)};
}
}
&[data-icon-after] {
- @include iconMeta($size: 20, $position: "after");
+ @include icons.iconMeta($size: 20, $position: "after");
&::after {
- --icon-margin-before: #{to-rem($pxValue: 2)};
+ --icon-margin-before: #{functions.to-rem($pxValue: 2)};
}
}
}
diff --git a/source/_patterns/01-elements/textarea/_textarea.variables.scss b/source/_patterns/01-elements/textarea/_textarea.variables.scss
index c9a8a1e2921..cc755ed5e29 100644
--- a/source/_patterns/01-elements/textarea/_textarea.variables.scss
+++ b/source/_patterns/01-elements/textarea/_textarea.variables.scss
@@ -1,6 +1,7 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
+@use "@db-ui/base/build/scss/variables";
-$textarea---color: $db-color-cool-gray-600 !default;
+$textarea---color: variables.$db-color-cool-gray-600 !default;
// * Form styling 01
$textarea---backgroundColor: transparent !default;
diff --git a/source/_patterns/01-elements/textarea/enterprise/_textarea.variables.scss b/source/_patterns/01-elements/textarea/enterprise/_textarea.variables.scss
index f80acea386f..a8a2b5fcabe 100644
--- a/source/_patterns/01-elements/textarea/enterprise/_textarea.variables.scss
+++ b/source/_patterns/01-elements/textarea/enterprise/_textarea.variables.scss
@@ -1 +1 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/01-elements/textarea/enterprise/textarea.scss b/source/_patterns/01-elements/textarea/enterprise/textarea.scss
index bdbad2954fb..4f8e3b74216 100644
--- a/source/_patterns/01-elements/textarea/enterprise/textarea.scss
+++ b/source/_patterns/01-elements/textarea/enterprise/textarea.scss
@@ -1,2 +1,2 @@
-@import "textarea.variables";
-@import "../textarea";
+@use "textarea.variables";
+@use "../textarea" as textarea2;
diff --git a/source/_patterns/01-elements/textarea/textarea.scss b/source/_patterns/01-elements/textarea/textarea.scss
index 2b774694482..e2b608473a3 100644
--- a/source/_patterns/01-elements/textarea/textarea.scss
+++ b/source/_patterns/01-elements/textarea/textarea.scss
@@ -1,20 +1,22 @@
@charset "utf-8";
-@import "../../../css/partials.meta";
-@import "textarea.variables";
-@import "../form-elements";
+@use "../../../css/partials.meta";
+@use "textarea.variables";
+@use "../form-elements";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
.elm-textarea {
@extend %form-element;
display: block;
- font-size: to-rem($pxValue: 16);
- height: to-rem($pxValue: 44);
- line-height: to-rem($pxValue: 24);
+ font-size: functions.to-rem($pxValue: 16);
+ height: functions.to-rem($pxValue: 44);
+ line-height: functions.to-rem($pxValue: 24);
max-width: 100%;
- padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
+ padding: functions.to-rem($pxValue: 6) functions.to-rem($pxValue: 10);
resize: vertical;
@@ -35,8 +37,8 @@
}
&:not([rows]) {
- max-height: to-rem($pxValue: 600);
- min-height: to-rem($pxValue: 120);
+ max-height: functions.to-rem($pxValue: 600);
+ min-height: functions.to-rem($pxValue: 120);
}
&[rows] {
@@ -47,7 +49,7 @@
&:focus,
&:hover {
&:not(:disabled) {
- --formElement---borderColor: #{$db-color-cool-gray-400};
+ --formElement---borderColor: #{variables.$db-color-cool-gray-400};
}
}
diff --git a/source/_patterns/01-elements/toggle/_toggle.variables.scss b/source/_patterns/01-elements/toggle/_toggle.variables.scss
index a7ecea4b3b0..3d2bc8b776e 100644
--- a/source/_patterns/01-elements/toggle/_toggle.variables.scss
+++ b/source/_patterns/01-elements/toggle/_toggle.variables.scss
@@ -1,3 +1,4 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
+@use "@db-ui/base/build/scss/variables";
-$toggle--checked-backgroundColor: $db-color-cool-gray-800 !default;
+$toggle--checked-backgroundColor: variables.$db-color-cool-gray-800 !default;
diff --git a/source/_patterns/01-elements/toggle/enterprise/_toggle.variables.scss b/source/_patterns/01-elements/toggle/enterprise/_toggle.variables.scss
index f80acea386f..a8a2b5fcabe 100644
--- a/source/_patterns/01-elements/toggle/enterprise/_toggle.variables.scss
+++ b/source/_patterns/01-elements/toggle/enterprise/_toggle.variables.scss
@@ -1 +1 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/01-elements/toggle/enterprise/toggle.scss b/source/_patterns/01-elements/toggle/enterprise/toggle.scss
index 0549054985f..7427eb1c6fc 100644
--- a/source/_patterns/01-elements/toggle/enterprise/toggle.scss
+++ b/source/_patterns/01-elements/toggle/enterprise/toggle.scss
@@ -1,2 +1,2 @@
-@import "toggle.variables";
-@import "../toggle";
+@use "toggle.variables";
+@use "../toggle" as toggle2;
diff --git a/source/_patterns/01-elements/toggle/toggle.scss b/source/_patterns/01-elements/toggle/toggle.scss
index a325a62982a..9dafe2b460f 100644
--- a/source/_patterns/01-elements/toggle/toggle.scss
+++ b/source/_patterns/01-elements/toggle/toggle.scss
@@ -1,26 +1,28 @@
@charset "utf-8";
-@import "toggle.variables";
+@use "toggle.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
// adapted by https://danklammer.com/articles/simple-css-toggle-switch/
.elm-toggle {
appearance: none;
- background-color: $db-color-cool-gray-500;
+ background-color: variables.$db-color-cool-gray-500;
border: none;
- border-radius: to-rem($pxValue: 12);
+ border-radius: functions.to-rem($pxValue: 12);
display: inline-block;
- height: to-rem($pxValue: 24);
+ height: functions.to-rem($pxValue: 24);
// margin-right: $db-spacing-xs;
position: relative;
transition: background-color 0.3s ease;
- width: to-rem($pxValue: 48);
+ width: functions.to-rem($pxValue: 48);
// Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html
@media (prefers-reduced-motion: reduce) {
transition-duration: 0.01s !important;
@@ -32,9 +34,9 @@
}
&::before {
- background-color: $db-color-white;
+ background-color: variables.$db-color-white;
- border-radius: to-rem($pxValue: 10);
+ border-radius: functions.to-rem($pxValue: 10);
box-shadow:
0 5px 30px 0 rgba(0, 0, 0, 0.05),
@@ -42,17 +44,17 @@
content: ""; // we could even also add toggled textual content for the switch in the future
display: block;
- height: to-rem($pxValue: 20);
- left: #{to-rem($pxValue: 2)};
+ height: functions.to-rem($pxValue: 20);
+ left: #{functions.to-rem($pxValue: 2)};
position: absolute;
- top: #{to-rem($pxValue: 2)};
+ top: #{functions.to-rem($pxValue: 2)};
transition:
border-color,
left 0.3s cubic-bezier(0.3, 1.5, 0.7, 1);
- width: to-rem($pxValue: 20);
+ width: functions.to-rem($pxValue: 20);
// Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html
@media (prefers-reduced-motion: reduce) {
transition-duration: 0.01s !important;
@@ -68,7 +70,7 @@
&:active {
&::before {
transition: width 0.3s cubic-bezier(0.3, 1.5, 0.7, 1);
- width: to-rem($pxValue: 24);
+ width: functions.to-rem($pxValue: 24);
// Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html
@media (prefers-reduced-motion: reduce) {
transition-duration: 0.01s !important;
@@ -77,11 +79,11 @@
}
&:checked {
- background-color: $toggle--checked-backgroundColor;
+ background-color: toggle.$toggle--checked-backgroundColor;
&::before {
left: unset;
- right: to-rem($pxValue: 2);
+ right: functions.to-rem($pxValue: 2);
}
}
diff --git a/source/_patterns/01-elements/video/enterprise/_youtube.scss b/source/_patterns/01-elements/video/enterprise/_youtube.scss
index e117104caf4..4baba6afd5a 100644
--- a/source/_patterns/01-elements/video/enterprise/_youtube.scss
+++ b/source/_patterns/01-elements/video/enterprise/_youtube.scss
@@ -1,2 +1,2 @@
// @import "youtube.variables";
-@import "../youtube";
+@use "../youtube";
diff --git a/source/_patterns/02-components/accordion/_accordion.variables.scss b/source/_patterns/02-components/accordion/_accordion.variables.scss
index 2e0f386a4fc..ccef45c3203 100644
--- a/source/_patterns/02-components/accordion/_accordion.variables.scss
+++ b/source/_patterns/02-components/accordion/_accordion.variables.scss
@@ -1,8 +1,9 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
+@use "@db-ui/base/build/scss/variables";
-$accordion---paddingLeft: $db-spacing-m !default;
-$accordion---paddingRight: to-rem(
+$accordion---paddingLeft: variables.$db-spacing-m !default;
+$accordion---paddingRight: functions.to-rem(
$pxValue: 16
) !default;
diff --git a/source/_patterns/02-components/accordion/accordion.scss b/source/_patterns/02-components/accordion/accordion.scss
index 4b02b27f78e..dc490943841 100644
--- a/source/_patterns/02-components/accordion/accordion.scss
+++ b/source/_patterns/02-components/accordion/accordion.scss
@@ -1,31 +1,34 @@
-@import "../../../css/partials.meta";
-@import "accordion.variables";
+@use "../../../css/partials.meta";
+@use "accordion.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-accordion {
- --db-accordion---paddingLeft: #{$accordion---paddingLeft};
- border-bottom: 1px solid $db-color-cool-gray-200;
+ --db-accordion---paddingLeft: #{accordion.$accordion---paddingLeft};
+ border-bottom: 1px solid variables.$db-color-cool-gray-200;
padding-left: var(--db-accordion---paddingLeft);
- padding-right: $accordion---paddingRight;
+ padding-right: accordion.$accordion---paddingRight;
summary {
align-items: center;
display: flex;
justify-content: space-between;
- padding-block: $db-spacing-sm;
+ padding-block: variables.$db-spacing-sm;
// Negating the padding left for moving the element into that direction with the same measures
transform: translateX(calc(var(--db-accordion---paddingLeft) * -1));
width: calc(
- 100% + var(--db-accordion---paddingLeft) + #{$accordion---paddingRight}
+ 100% + var(--db-accordion---paddingLeft) + #{accordion.$accordion---paddingRight}
);
& {
- @include icon(
- glyph(expand-more),
+ @include icons.icon(
+ icons.glyph(expand-more),
24,
"outline",
"after",
- $partial: $partial
+ $partial: partials.$partial
);
}
@@ -40,8 +43,8 @@
// Icon horizontal space
&::after {
- --icon-margin-before: #{to-rem($pxValue: 8)};
- margin-right: #{to-rem($pxValue: 14)};
+ --icon-margin-before: #{functions.to-rem($pxValue: 8)};
+ margin-right: #{functions.to-rem($pxValue: 14)};
}
& + p {
@@ -51,21 +54,21 @@
// TODO: This might get simplified in the future with @nest
&[open] > summary {
&::after {
- content: glyph(expand-less);
+ content: icons.glyph(expand-less);
}
}
// Emphasis
&%emphasis-High {
// Calculate especially depending on the icons sizes difference
- --db-accordion---paddingLeft: #{$accordion---paddingLeft + 0.5rem};
+ --db-accordion---paddingLeft: #{accordion.$accordion---paddingLeft + 0.5rem};
summary {
font-weight: 700;
- height: to-rem($pxValue: 56);
+ height: functions.to-rem($pxValue: 56);
&::after {
- --icon-font-size: #{to-rem($pxValue: 32)};
+ --icon-font-size: #{functions.to-rem($pxValue: 32)};
}
}
}
@@ -77,31 +80,31 @@
// Sizes
&%size-Small {
// Calculate dependending on the icons sizes and margins difference
- --db-accordion---paddingLeft: #{$accordion---paddingLeft - 0.75rem};
+ --db-accordion---paddingLeft: #{accordion.$accordion---paddingLeft - 0.75rem};
summary {
- font-size: to-rem($pxValue: 14);
+ font-size: functions.to-rem($pxValue: 14);
// ToDo: This needs to get replaced by the correct variable
padding-block: 0.59375rem;
&::after {
- --icon-font-size: #{to-rem($pxValue: 20)};
- --icon-margin-after: #{to-rem($pxValue: 6)};
- margin-left: #{to-rem($pxValue: 6)};
+ --icon-font-size: #{functions.to-rem($pxValue: 20)};
+ --icon-margin-after: #{functions.to-rem($pxValue: 6)};
+ margin-left: #{functions.to-rem($pxValue: 6)};
}
}
}
&%size-Large {
// Calculate especially depending on the icons sizes difference
- --db-accordion---paddingLeft: #{$accordion---paddingLeft + 0.5rem};
+ --db-accordion---paddingLeft: #{accordion.$accordion---paddingLeft + 0.5rem};
summary {
- font-size: to-rem($pxValue: 20);
- padding-block: $db-spacing-m;
+ font-size: functions.to-rem($pxValue: 20);
+ padding-block: variables.$db-spacing-m;
&::after {
- --icon-font-size: #{to-rem($pxValue: 32)};
+ --icon-font-size: #{functions.to-rem($pxValue: 32)};
}
}
}
diff --git a/source/_patterns/02-components/accordion/enterprise/_accordion.variables.scss b/source/_patterns/02-components/accordion/enterprise/_accordion.variables.scss
index 6f0bb4d708c..12adff8cf63 100644
--- a/source/_patterns/02-components/accordion/enterprise/_accordion.variables.scss
+++ b/source/_patterns/02-components/accordion/enterprise/_accordion.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
-@import "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
diff --git a/source/_patterns/02-components/accordion/enterprise/accordion.scss b/source/_patterns/02-components/accordion/enterprise/accordion.scss
index 9610a7f7c1a..423e0b05d0c 100644
--- a/source/_patterns/02-components/accordion/enterprise/accordion.scss
+++ b/source/_patterns/02-components/accordion/enterprise/accordion.scss
@@ -1,2 +1,2 @@
-@import "accordion.variables";
-@import "../accordion";
+@use "accordion.variables";
+@use "../accordion" as accordion2;
diff --git a/source/_patterns/02-components/brand/_brand.variables.scss b/source/_patterns/02-components/brand/_brand.variables.scss
index 825b26d266b..60e3001ea7c 100644
--- a/source/_patterns/02-components/brand/_brand.variables.scss
+++ b/source/_patterns/02-components/brand/_brand.variables.scss
@@ -1,6 +1,6 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
-$rea-header-cmp-brand-padding-top: to-rem(
+$rea-header-cmp-brand-padding-top: functions.to-rem(
$pxValue: 32
) !default;
diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss
index 7478911d24d..c5c850b2086 100644
--- a/source/_patterns/02-components/brand/brand.scss
+++ b/source/_patterns/02-components/brand/brand.scss
@@ -1,4 +1,4 @@
-@import "brand.variables";
+@use "brand.variables";
.cmp-brand {
font-weight: bold;
diff --git a/source/_patterns/02-components/brand/enterprise/brand.scss b/source/_patterns/02-components/brand/enterprise/brand.scss
index ed9697cc248..8c89dae9e5d 100644
--- a/source/_patterns/02-components/brand/enterprise/brand.scss
+++ b/source/_patterns/02-components/brand/enterprise/brand.scss
@@ -1,2 +1,2 @@
-@import "brand.variables";
-@import "../brand";
+@use "brand.variables";
+@use "../brand" as brand2;
diff --git a/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss b/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss
index 4970f7f3b9b..3d38e2c8e9f 100644
--- a/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss
+++ b/source/_patterns/02-components/breadcrumb/_breadcrumb.variables.scss
@@ -1,13 +1,14 @@
-@import "../../00-base/icons/icons.helpers";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/colors/colors.variables";
+@use "../../00-base/icons/icons.helpers";
+@use "../../00-base/icons/icons.variables" as icons2;
+@use "../../00-base/colors/colors.variables";
+@use "@db-ui/base/build/scss/variables";
$breadcrumb-divider--icon: "chevron-right" !default;
$breadcrumb-link-hover-backgroundColor: rgba(
- $db-color-cool-gray-700,
+ variables.$db-color-cool-gray-700,
0.03
) !default;
$breadcrumb-link-active-backgroundColor: rgba(
- $db-color-cool-gray-700,
+ variables.$db-color-cool-gray-700,
0.06
) !default;
diff --git a/source/_patterns/02-components/breadcrumb/breadcrumb.scss b/source/_patterns/02-components/breadcrumb/breadcrumb.scss
index f306ddfde57..a6a99c76bbd 100644
--- a/source/_patterns/02-components/breadcrumb/breadcrumb.scss
+++ b/source/_patterns/02-components/breadcrumb/breadcrumb.scss
@@ -1,9 +1,12 @@
-@import "../../../css/partials.meta";
-@import "breadcrumb.variables";
+@use "../../../css/partials.meta";
+@use "breadcrumb.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-breadcrumb {
- color: $db-color-cool-gray-500;
- font-size: to-rem($pxValue: 12);
+ color: variables.$db-color-cool-gray-500;
+ font-size: functions.to-rem($pxValue: 12);
a {
color: inherit;
@@ -15,49 +18,49 @@
& > li {
align-items: center;
display: inline-flex;
- margin-right: to-rem($pxValue: 3);
+ margin-right: functions.to-rem($pxValue: 3);
[aria-current="location"],
[aria-current="page"] {
- color: $db-color-cool-gray-700;
+ color: variables.$db-color-cool-gray-700;
}
.elm-link {
- border-radius: to-rem($pxValue: 4);
+ border-radius: functions.to-rem($pxValue: 4);
- padding: to-rem($pxValue: 1) to-rem($pxValue: 3)
- to-rem($pxValue: 1) to-rem($pxValue: 4);
+ padding: functions.to-rem($pxValue: 1) functions.to-rem($pxValue: 3)
+ functions.to-rem($pxValue: 1) functions.to-rem($pxValue: 4);
text-decoration: none;
&:hover {
- background-color: $breadcrumb-link-hover-backgroundColor;
+ background-color: breadcrumb.$breadcrumb-link-hover-backgroundColor;
}
&:active {
- background-color: $breadcrumb-link-active-backgroundColor;
+ background-color: breadcrumb.$breadcrumb-link-active-backgroundColor;
}
}
&:first-child {
- @include icon(glyph(home), $size: 20, $partial: $partial);
+ @include icons.icon(icons.glyph(home), $size: 20, $partial: partials.$partial);
&::before {
- --icon-margin-after: #{to-rem($pxValue: 3)};
+ --icon-margin-after: #{functions.to-rem($pxValue: 3)};
}
}
&:not(:first-child) {
- @include icon(
- glyph($breadcrumb-divider--icon),
+ @include icons.icon(
+ icons.glyph(breadcrumb.$breadcrumb-divider--icon),
$size: 20,
- $partial: $partial
+ $partial: partials.$partial
);
&::before {
- --icon-font-size: #{to-rem($pxValue: 14)};
+ --icon-font-size: #{functions.to-rem($pxValue: 14)};
--icon-margin-after: 0;
- color: $db-color-cool-gray-400;
- margin-left: -#{to-rem($pxValue: 2)};
+ color: variables.$db-color-cool-gray-400;
+ margin-left: -#{functions.to-rem($pxValue: 2)};
}
}
}
diff --git a/source/_patterns/02-components/breadcrumb/enterprise/_breadcrumb.variables.scss b/source/_patterns/02-components/breadcrumb/enterprise/_breadcrumb.variables.scss
index da54734ddab..d8d71197611 100644
--- a/source/_patterns/02-components/breadcrumb/enterprise/_breadcrumb.variables.scss
+++ b/source/_patterns/02-components/breadcrumb/enterprise/_breadcrumb.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/02-components/breadcrumb/enterprise/breadcrumb.scss b/source/_patterns/02-components/breadcrumb/enterprise/breadcrumb.scss
index e7f8b22c40d..0375c0b26ee 100644
--- a/source/_patterns/02-components/breadcrumb/enterprise/breadcrumb.scss
+++ b/source/_patterns/02-components/breadcrumb/enterprise/breadcrumb.scss
@@ -1,2 +1,2 @@
-@import "breadcrumb.variables";
-@import "../breadcrumb";
+@use "breadcrumb.variables";
+@use "../breadcrumb" as breadcrumb2;
diff --git a/source/_patterns/02-components/cards/_cards.variables.scss b/source/_patterns/02-components/cards/_cards.variables.scss
index a6735e94eba..fa931e69ea2 100644
--- a/source/_patterns/02-components/cards/_cards.variables.scss
+++ b/source/_patterns/02-components/cards/_cards.variables.scss
@@ -1 +1 @@
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
diff --git a/source/_patterns/02-components/cards/card.scss b/source/_patterns/02-components/cards/card.scss
index e5600ff9a97..3a8f52b0220 100644
--- a/source/_patterns/02-components/cards/card.scss
+++ b/source/_patterns/02-components/cards/card.scss
@@ -1,18 +1,20 @@
-@import "../../../css/helpers/functions";
-@import "cards.variables";
+@use "../../../css/helpers/functions";
+@use "cards.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
.cmp-card {
background-color: #fff;
border-radius: 8px;
- box-shadow: $box-shadow-01, $box-shadow-02;
+ box-shadow: db-ui-core.$box-shadow-01, db-ui-core.$box-shadow-02;
& > a {
text-decoration: none;
}
figure {
- margin: $db-spacing-m $db-spacing-m $db-spacing-m $db-spacing-s;
+ margin: variables.$db-spacing-m variables.$db-spacing-m variables.$db-spacing-m variables.$db-spacing-s;
}
// Banner variant
@@ -30,7 +32,7 @@
h4,
h5,
h6 {
- font-size: to-rem($pxValue: 18);
+ font-size: functions.to-rem($pxValue: 18);
&,
& ~ p {
@@ -39,9 +41,9 @@
}
p {
- font-size: to-rem($pxValue: 14);
+ font-size: functions.to-rem($pxValue: 14);
- max-width: to-rem(
+ max-width: functions.to-rem(
$pxValue: 290
); // TODO: This would need some rework
}
diff --git a/source/_patterns/02-components/cards/cards.scss b/source/_patterns/02-components/cards/cards.scss
index 22fb513a6bb..44df8d01638 100644
--- a/source/_patterns/02-components/cards/cards.scss
+++ b/source/_patterns/02-components/cards/cards.scss
@@ -1,4 +1,4 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
.cmp-cards {
list-style: none;
@@ -8,10 +8,10 @@
@supports (display: grid) {
display: grid;
- grid-gap: to-rem($pxValue: 24);
+ grid-gap: functions.to-rem($pxValue: 24);
grid-template-columns: repeat(
auto-fill,
- minmax(to-rem($pxValue: 340), 1fr)
+ minmax(functions.to-rem($pxValue: 340), 1fr)
);
}
}
diff --git a/source/_patterns/02-components/cards/enterprise/_cards.variables.scss b/source/_patterns/02-components/cards/enterprise/_cards.variables.scss
index b06098d43a4..6322e573c26 100644
--- a/source/_patterns/02-components/cards/enterprise/_cards.variables.scss
+++ b/source/_patterns/02-components/cards/enterprise/_cards.variables.scss
@@ -1 +1 @@
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/cards/enterprise/card.scss b/source/_patterns/02-components/cards/enterprise/card.scss
index ea4c5e4fe0b..21d5417bc43 100644
--- a/source/_patterns/02-components/cards/enterprise/card.scss
+++ b/source/_patterns/02-components/cards/enterprise/card.scss
@@ -1,2 +1,2 @@
-@import "cards.variables";
-@import "../card";
+@use "cards.variables";
+@use "../card";
diff --git a/source/_patterns/02-components/cards/enterprise/cards.scss b/source/_patterns/02-components/cards/enterprise/cards.scss
index 51ab840b37b..4e71e4e4576 100644
--- a/source/_patterns/02-components/cards/enterprise/cards.scss
+++ b/source/_patterns/02-components/cards/enterprise/cards.scss
@@ -1,3 +1,3 @@
-@import "cards.variables";
-@import "../cards";
-@import "../card";
+@use "cards.variables";
+@use "../cards" as cards2;
+@use "../card";
diff --git a/source/_patterns/02-components/dialog/_dialog.variables.scss b/source/_patterns/02-components/dialog/_dialog.variables.scss
index ac2de68d36a..547837768a3 100644
--- a/source/_patterns/02-components/dialog/_dialog.variables.scss
+++ b/source/_patterns/02-components/dialog/_dialog.variables.scss
@@ -1,5 +1,5 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
$dialog-backdrop--backgroundColor: rgba(0, 0, 0, 0.9) !default;
diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss
index 006a72949db..d9f4aa5e409 100644
--- a/source/_patterns/02-components/dialog/dialog.scss
+++ b/source/_patterns/02-components/dialog/dialog.scss
@@ -1,17 +1,20 @@
-@import "../../../css/partials.meta";
-@import "dialog.variables";
+@use "../../../css/partials.meta";
+@use "dialog.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-dialog {
border: 0;
border-radius: 8px;
- color: $db-color-cool-gray-700;
+ color: variables.$db-color-cool-gray-700;
- font-size: to-rem($pxValue: 14);
+ font-size: functions.to-rem($pxValue: 14);
margin-top: 0;
max-width: 90vw;
- padding: to-rem($pxValue: 16); // TODO: replace by general spacing variables
+ padding: functions.to-rem($pxValue: 16); // TODO: replace by general spacing variables
// Display the dialog fixed within the middle of the screen (actually some overwrites for the dialog-polyfill CSS)
position: fixed;
@@ -19,7 +22,7 @@
transform: translate(0, -50%);
@media screen and (min-width: 768px) {
// TODO: replace by correct general breakpoint variables
- padding: to-rem(
+ padding: functions.to-rem(
$pxValue: 24
); // TODO: replace by general spacing variables
}
@@ -27,12 +30,12 @@
// * native
&::backdrop {
- background-color: $dialog-backdrop--backgroundColor;
+ background-color: dialog.$dialog-backdrop--backgroundColor;
}
// * polyfill
& + .backdrop {
- background-color: $dialog-backdrop--backgroundColor;
+ background-color: dialog.$dialog-backdrop--backgroundColor;
}
// Display the modal via CSS as a no-javascript fallback
@@ -43,26 +46,26 @@
}
header {
- color: $db-color-cool-gray-800;
+ color: variables.$db-color-cool-gray-800;
- transform: translateY(-#{to-rem($pxValue: 9)});
+ transform: translateY(-#{functions.to-rem($pxValue: 9)});
.elm-headline {
- font-size: to-rem($pxValue: 18);
+ font-size: functions.to-rem($pxValue: 18);
font-weight: 700;
- line-height: to-rem(
+ line-height: functions.to-rem(
$pxValue: 24
); // TODO: Check whether this is a settting that should be more global
- margin-bottom: to-rem($pxValue: 6);
- margin-right: to-rem($pxValue: 24);
+ margin-bottom: functions.to-rem($pxValue: 6);
+ margin-right: functions.to-rem($pxValue: 24);
// Remove the headlines margin-top, as we're in a dialog that has a padding on it's own
margin-top: 0;
text-align: center;
@media screen and (min-width: 768px) {
// TODO: replace by correct general breakpoint variables
- font-size: to-rem($pxValue: 24);
- line-height: to-rem(
+ font-size: functions.to-rem($pxValue: 24);
+ line-height: functions.to-rem(
$pxValue: 28
); // TODO: Check whether this is a settting that should be more global
}
@@ -78,13 +81,13 @@
border-color: transparent;
& {
- @include icon(
- glyph(close),
+ @include icons.icon(
+ icons.glyph(close),
24,
"outline",
- $partial: $partial
+ $partial: partials.$partial
);
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
}
}
@@ -100,11 +103,11 @@
footer {
display: flex;
- margin-top: to-rem($pxValue: 18);
+ margin-top: functions.to-rem($pxValue: 18);
.elm-button {
& + .elm-button {
- margin-left: to-rem(
+ margin-left: functions.to-rem(
$pxValue: 16
); // TODO: Replace by spacing variable
}
diff --git a/source/_patterns/02-components/dialog/enterprise/_dialog.variables.scss b/source/_patterns/02-components/dialog/enterprise/_dialog.variables.scss
index da54734ddab..d8d71197611 100644
--- a/source/_patterns/02-components/dialog/enterprise/_dialog.variables.scss
+++ b/source/_patterns/02-components/dialog/enterprise/_dialog.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/02-components/dialog/enterprise/dialog.scss b/source/_patterns/02-components/dialog/enterprise/dialog.scss
index a9bd1d5ab75..f632b000fed 100644
--- a/source/_patterns/02-components/dialog/enterprise/dialog.scss
+++ b/source/_patterns/02-components/dialog/enterprise/dialog.scss
@@ -1,2 +1,2 @@
-@import "dialog.variables";
-@import "../dialog";
+@use "dialog.variables";
+@use "../dialog" as dialog2;
diff --git a/source/_patterns/02-components/dropdown/_dropdown.variables.scss b/source/_patterns/02-components/dropdown/_dropdown.variables.scss
index f78f84a3de0..1f9d12593d5 100644
--- a/source/_patterns/02-components/dropdown/_dropdown.variables.scss
+++ b/source/_patterns/02-components/dropdown/_dropdown.variables.scss
@@ -1,3 +1,3 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
diff --git a/source/_patterns/02-components/dropdown/dropdown.scss b/source/_patterns/02-components/dropdown/dropdown.scss
index 1079addd53f..6c68c314cea 100644
--- a/source/_patterns/02-components/dropdown/dropdown.scss
+++ b/source/_patterns/02-components/dropdown/dropdown.scss
@@ -1,6 +1,9 @@
-@import "../../../css/partials.meta";
-@import "../overflow-menu/overflow-menu";
-@import "dropdown.variables";
+@use "../../../css/partials.meta";
+@use "../overflow-menu/overflow-menu" as overflow-menu2;
+@use "dropdown.variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../00-base/icons/icons.helpers";
+@use "../overflow-menu/overflow-menu.variables";
.cmp-dropdown {
@extend .cmp-overflow-menu;
@@ -8,18 +11,18 @@
// Usage within the account menu
&.is-account {
summary {
- @include icon(glyph(account), 24, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(account), 24, "outline", $partial: partials.$partial);
- @media screen and (max-width: $metanavigation-iconOnly--maxWidth) {
+ @media screen and (max-width: db-ui-core.$metanavigation-iconOnly--maxWidth) {
// * TODO: possibly rework variable naming
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
}
}
menu,
ul {
- background-color: $overflowMenu---backgroundColor;
+ background-color: overflow-menu.$overflowMenu---backgroundColor;
margin-block-start: initial;
right: 0;
transform: translateY(0.875rem);
diff --git a/source/_patterns/02-components/dropdown/enterprise/_dropdown.variables.scss b/source/_patterns/02-components/dropdown/enterprise/_dropdown.variables.scss
index 5afd5d07122..739def07c3b 100644
--- a/source/_patterns/02-components/dropdown/enterprise/_dropdown.variables.scss
+++ b/source/_patterns/02-components/dropdown/enterprise/_dropdown.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/dropdown/enterprise/dropdown.scss b/source/_patterns/02-components/dropdown/enterprise/dropdown.scss
index 7420e593d68..10d26453620 100644
--- a/source/_patterns/02-components/dropdown/enterprise/dropdown.scss
+++ b/source/_patterns/02-components/dropdown/enterprise/dropdown.scss
@@ -1,2 +1,2 @@
-@import "dropdown.variables";
-@import "../dropdown";
+@use "dropdown.variables";
+@use "../dropdown" as dropdown2;
diff --git a/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss b/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss
index fd4fa649e48..8159256268c 100644
--- a/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss
+++ b/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss
@@ -1,5 +1,5 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.helpers";
-@import "../../00-base/icons/icons.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
+@use "../../00-base/icons/icons.variables" as icons2;
$db-language-switcher---direction: var(--db-language-switcher---direction, 1);
diff --git a/source/_patterns/02-components/language-switcher/enterprise/_language-switcher.variables.scss b/source/_patterns/02-components/language-switcher/enterprise/_language-switcher.variables.scss
index 2a2b5b07c5d..6474db8b670 100644
--- a/source/_patterns/02-components/language-switcher/enterprise/_language-switcher.variables.scss
+++ b/source/_patterns/02-components/language-switcher/enterprise/_language-switcher.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../../css/enterprise/db-ui-core.variables";
-@import "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
diff --git a/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss b/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
index cad8ce7ee52..d860fa7ce63 100644
--- a/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
+++ b/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss
@@ -1,2 +1,2 @@
-@import "language-switcher.variables";
-@import "../language-switcher";
+@use "language-switcher.variables";
+@use "../language-switcher" as language-switcher2;
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
index 684dcb59ebc..f2741ac320f 100644
--- a/source/_patterns/02-components/language-switcher/language-switcher.scss
+++ b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -1,16 +1,20 @@
-@import "../../../css/partials.meta";
-@import "language-switcher.variables";
+@use "../../../css/partials.meta";
+@use "language-switcher.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
@mixin set-top($step: 1) {
top: calc(
- #{$db-language-switcher---direction} * (100% * #{$step} + 1rem - 2px)
+ #{language-switcher.$db-language-switcher---direction} * (100% * #{$step} + 1rem - 2px)
);
}
.cmp-language-switcher {
list-style: none;
- margin-right: to-rem($pxValue: 16);
+ margin-right: functions.to-rem($pxValue: 16);
position: relative;
&:hover,
@@ -22,7 +26,7 @@
&[aria-current="page"],
&[aria-selected="true"] {
- color: $db-color-red-500;
+ color: variables.$db-color-red-500;
}
}
}
@@ -32,12 +36,12 @@
position: absolute;
- top: to-rem($pxValue: 26);
+ top: functions.to-rem($pxValue: 26);
.rea-header & {
@include set-top(1);
- z-index: $z-index-rea-header-cmp-language-switcher-li; // * TODO: possibly rework variable naming
+ z-index: db-ui-core.$z-index-rea-header-cmp-language-switcher-li; // * TODO: possibly rework variable naming
// TODO: This is an enhancement for more languages, but obviously doesn't scale that nicely and would need some rework
&:not([aria-current="page"], [aria-selected="true"])
@@ -68,7 +72,7 @@
}
}
}
- @media screen and (width > $db-break-the-header-max-width) {
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
top: 100%;
}
}
@@ -85,11 +89,11 @@
.elm-link,
.elm-button {
padding-block: 1rem;
- padding-right: to-rem($pxValue: 34);
+ padding-right: functions.to-rem($pxValue: 34);
&:hover,
&:focus {
- background-color: $db-color-cool-gray-200;
+ background-color: variables.$db-color-cool-gray-200;
}
}
}
@@ -101,23 +105,23 @@
.elm-link,
.elm-button {
& {
- @include icon(
- glyph(expand-more),
+ @include icons.icon(
+ icons.glyph(expand-more),
24,
"outline",
"after",
- $partial: $partial
+ $partial: partials.$partial
);
}
&:hover {
- color: $db-color-red-500;
+ color: variables.$db-color-red-500;
}
&::after {
float: right;
- margin-left: to-rem($pxValue: 5);
+ margin-left: functions.to-rem($pxValue: 5);
}
}
}
@@ -126,7 +130,7 @@
.elm-button {
display: inline-block;
- padding-left: to-rem($pxValue: 18);
+ padding-left: functions.to-rem($pxValue: 18);
&:hover,
&:focus {
@@ -138,7 +142,7 @@
line-height: 1.5;
padding-right: 0;
border-width: 0;
- padding-top: to-rem($pxValue: 9);
+ padding-top: functions.to-rem($pxValue: 9);
}
}
}
diff --git a/source/_patterns/02-components/link-list/_link-list.variables.scss b/source/_patterns/02-components/link-list/_link-list.variables.scss
index f78f84a3de0..1f9d12593d5 100644
--- a/source/_patterns/02-components/link-list/_link-list.variables.scss
+++ b/source/_patterns/02-components/link-list/_link-list.variables.scss
@@ -1,3 +1,3 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
diff --git a/source/_patterns/02-components/link-list/enterprise/_link-list.variables.scss b/source/_patterns/02-components/link-list/enterprise/_link-list.variables.scss
index da54734ddab..d8d71197611 100644
--- a/source/_patterns/02-components/link-list/enterprise/_link-list.variables.scss
+++ b/source/_patterns/02-components/link-list/enterprise/_link-list.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/02-components/link-list/enterprise/link-list.scss b/source/_patterns/02-components/link-list/enterprise/link-list.scss
index 710299d0cfa..29ba30bffc9 100644
--- a/source/_patterns/02-components/link-list/enterprise/link-list.scss
+++ b/source/_patterns/02-components/link-list/enterprise/link-list.scss
@@ -1,2 +1,2 @@
-@import "link-list.variables";
-@import "../link-list";
+@use "link-list.variables";
+@use "../link-list" as link-list2;
diff --git a/source/_patterns/02-components/link-list/link-list.scss b/source/_patterns/02-components/link-list/link-list.scss
index b19dd1eb9fb..c32ad0c5d80 100644
--- a/source/_patterns/02-components/link-list/link-list.scss
+++ b/source/_patterns/02-components/link-list/link-list.scss
@@ -1,5 +1,8 @@
-@import "../../../css/partials.meta";
-@import "link-list.variables";
+@use "../../../css/partials.meta";
+@use "link-list.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-link-list {
list-style: none;
@@ -12,7 +15,7 @@
text-decoration: none;
& {
- @include icon(glyph(chevron-right), $partial: $partial);
+ @include icons.icon(icons.glyph(chevron-right), $partial: partials.$partial);
}
&:hover,
@@ -21,11 +24,11 @@
}
&::before {
- color: $db-color-red;
+ color: variables.$db-color-red;
display: inline-block;
- font-size: to-rem($pxValue: 12);
+ font-size: functions.to-rem($pxValue: 12);
font-weight: 700;
- margin-top: -#{to-rem($pxValue: 2)};
+ margin-top: -#{functions.to-rem($pxValue: 2)};
vertical-align: middle;
}
}
diff --git a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss
index 82e1065876e..3575ce9d791 100644
--- a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss
+++ b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss
@@ -1,13 +1,13 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
$header-big-link-paddingTop: 32 * 0.0625 !default;
$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
// * reduced height
// $header-big-link-paddingTop: 19*0.0625 !default;
-$rea-header-elm-link-padding-bottom-big: to-rem(
+$rea-header-elm-link-padding-bottom-big: functions.to-rem(
$pxValue: 19
) !default;
diff --git a/source/_patterns/02-components/mainnavigation/enterprise/_mainnavigation.variables.scss b/source/_patterns/02-components/mainnavigation/enterprise/_mainnavigation.variables.scss
index 5afd5d07122..739def07c3b 100644
--- a/source/_patterns/02-components/mainnavigation/enterprise/_mainnavigation.variables.scss
+++ b/source/_patterns/02-components/mainnavigation/enterprise/_mainnavigation.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
index b3c1150a7b4..2ccb3744374 100644
--- a/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
+++ b/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss
@@ -1,2 +1,2 @@
-@import "mainnavigation.variables";
-@import "../mainnavigation";
+@use "mainnavigation.variables";
+@use "../mainnavigation" as mainnavigation2;
diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
index 54ae1d54af3..8fc187d88bf 100644
--- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss
+++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss
@@ -1,12 +1,16 @@
-@import "../../../css/partials.meta";
+@use "../../../css/partials.meta";
// TODO: Replace magic numbers e.g. with flexbox implementations and extract variables as well for multi-brand
-@import "mainnavigation.variables";
-@import "../../../css/helpers/dividers";
+@use "mainnavigation.variables";
+@use "../../../css/helpers/dividers";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-mainnavigation {
- top: $mainnavigation---position-top;
+ top: mainnavigation.$mainnavigation---position-top;
padding-inline-start: 1.5rem;
- position: $mainnavigation---position;
+ position: mainnavigation.$mainnavigation---position;
&::before {
@extend %header-divider;
@@ -38,7 +42,7 @@
block-size: 1.5rem;
aspect-ratio: 1 / 1;
- @media screen and (width > $db-break-the-header-max-width) {
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
// Hiding the navigation toggle elements on huger viewports
&,
& + label[for] {
@@ -48,40 +52,40 @@
}
& > label[for] {
- background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
+ background-color: mainnavigation.$header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
- border-bottom: 1px solid $db-color-warm-gray-100;
+ border-bottom: 1px solid variables.$db-color-warm-gray-100;
display: block;
- padding: to-rem($pxValue: 8) to-rem($pxValue: 22) to-rem($pxValue: 10);
+ padding: functions.to-rem($pxValue: 8) functions.to-rem($pxValue: 22) functions.to-rem($pxValue: 10);
& {
- @include icon(glyph(menu), 24, "outline", $partial: $partial);
- @include icon(
- glyph(close),
+ @include icons.icon(icons.glyph(menu), 24, "outline", $partial: partials.$partial);
+ @include icons.icon(
+ icons.glyph(close),
24,
"outline",
"after",
- $partial: $partial
+ $partial: partials.$partial
);
}
&::before {
- margin-right: to-rem($pxValue: 16);
+ margin-right: functions.to-rem($pxValue: 16);
}
&::after {
- margin-right: to-rem($pxValue: 16);
+ margin-right: functions.to-rem($pxValue: 16);
}
}
// Displaying the main navigation as an top to bottom overlay on smaller viewports
- @media screen and (max-width: $db-break-the-header-max-width) {
- z-index: $z-index-cmp-mainnavigation-dropdown; // * TODO: possibly rework variable naming
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
+ z-index: db-ui-core.$z-index-cmp-mainnavigation-dropdown; // * TODO: possibly rework variable naming
& > input[type="checkbox"][id] {
& + label[for] {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
padding: 0;
&::before,
@@ -107,7 +111,7 @@
inset-inline-end: 1.5rem;
inset-block-start: 1rem;
position: absolute;
- z-index: $z-index-cmp-overflow-menu-overlay;
+ z-index: db-ui-core.$z-index-cmp-overflow-menu-overlay;
& + label[for] {
background-color: #fff;
@@ -118,15 +122,15 @@
inset-inline-end: 1rem;
inset-block-start: 0.5rem;
position: absolute;
- z-index: $z-index-cmp-overflow-menu-overlay;
+ z-index: db-ui-core.$z-index-cmp-overflow-menu-overlay;
}
&::before {
content: "";
position: fixed;
inset: 0;
- z-index: $z-index-cmp-mainnavigation-dropdown;
- background-color: $db-color-cool-gray-700;
+ z-index: db-ui-core.$z-index-cmp-mainnavigation-dropdown;
+ background-color: variables.$db-color-cool-gray-700;
opacity: 0.8;
}
}
@@ -155,7 +159,7 @@
background-color: #fff;
inset: 0;
position: absolute;
- z-index: $z-index-cmp-mainnavigation-dropdown;
+ z-index: db-ui-core.$z-index-cmp-mainnavigation-dropdown;
border-bottom: 1px solid rgba(40, 45, 55, 0.2);
border-top-left-radius: 4px;
}
@@ -163,39 +167,39 @@
}
ul {
- background-color: $header---backgroundColor;
+ background-color: mainnavigation.$header---backgroundColor;
}
// Multiple level navigation
ul ul {
- @media screen and (width > $db-break-the-header-max-width) {
- box-shadow: $box-shadow-01, $box-shadow-02;
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
+ box-shadow: db-ui-core.$box-shadow-01, db-ui-core.$box-shadow-02;
position: absolute;
visibility: hidden;
- z-index: $z-index-rea-header-cmp-mainnavigation-submenu;
+ z-index: db-ui-core.$z-index-rea-header-cmp-mainnavigation-submenu;
}
- @media screen and (max-width: $db-break-the-header-max-width) {
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
display: none;
}
}
// First Level
& > ul {
- @media screen and (max-width: $db-break-the-header-max-width) {
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
background-color: #fff;
position: absolute;
inset-inline: 0;
inset-block-end: 0;
inset-block-start: 3.5rem;
- z-index: $z-index-cmp-overflow-menu-overlay;
+ z-index: db-ui-core.$z-index-cmp-overflow-menu-overlay;
padding: 0.75rem;
margin-block-end: 3.5rem;
overflow: auto;
}
- @media screen and (width > $db-break-the-header-max-width) {
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
display: flex;
gap: 0.75rem;
}
@@ -204,14 +208,14 @@
& > * > li {
& > .elm-link,
& > * > .elm-link {
- @media screen and (width > $db-break-the-header-max-width) {
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
height: 2.5rem;
padding: 0.5rem 0.75rem;
border-radius: 4px;
&:hover,
&:focus {
- border-#{$mainnavigation-link--borderPosition}-color: $db-color-cool-gray-200;
+ border-#{mainnavigation.$mainnavigation-link--borderPosition}-color: variables.$db-color-cool-gray-200;
}
&[aria-current="page"] {
@@ -219,7 +223,7 @@
height: 4px;
width: 100%;
content: "";
- background-color: $db-color-red-500;
+ background-color: variables.$db-color-red-500;
border-radius: 2px;
position: absolute;
inset-block-start: calc(100% + 0.25rem);
@@ -231,7 +235,7 @@
// From second level
ul {
- @media screen and (width > $db-break-the-header-max-width) {
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
inset-inline-start: 0;
min-width: 100%;
inset-block-start: calc(100% + 0.5rem);
@@ -255,9 +259,9 @@
align-items: center;
display: flex;
- min-height: to-rem($pxValue: 53);
- padding-left: to-rem($pxValue: 18);
- padding-right: to-rem($pxValue: 18);
+ min-height: functions.to-rem($pxValue: 53);
+ padding-left: functions.to-rem($pxValue: 18);
+ padding-right: functions.to-rem($pxValue: 18);
}
}
@@ -265,8 +269,8 @@
& > * > li {
& > .elm-link,
& > * > .elm-link {
- @media screen and (max-width: $db-break-the-header-max-width) {
- padding-left: to-rem($pxValue: 34);
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
+ padding-left: functions.to-rem($pxValue: 34);
}
}
@@ -276,8 +280,8 @@
& > * > li {
& > .elm-link,
& > * > .elm-link {
- @media screen and (max-width: $db-break-the-header-max-width) {
- padding-left: to-rem($pxValue: 60);
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
+ padding-left: functions.to-rem($pxValue: 60);
}
}
}
@@ -295,18 +299,18 @@
// Icon for menu
// TODO: this could probably get simplified with a media query polyfill and moved back to the previous section
&[aria-haspopup="true"] {
- @include icon(
- glyph(chevron-right),
+ @include icons.icon(
+ icons.glyph(chevron-right),
24,
"outline",
"after",
- $partial: $partial
+ $partial: partials.$partial
);
&::after {
position: absolute;
right: 1rem;
- top: to-rem($pxValue: 9);
+ top: functions.to-rem($pxValue: 9);
}
}
@@ -314,13 +318,13 @@
& > ul,
& > * > ul {
visibility: visible;
- @media screen and (max-width: $db-break-the-header-max-width) {
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
display: initial;
}
}
}
- @media screen and (max-width: $db-break-the-header-max-width) {
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
&:hover {
& > a {
font-weight: 700;
@@ -342,7 +346,7 @@
position: relative;
}
}
- @media screen and (width > $db-break-the-header-max-width) {
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
// Do not show Icon for menu on bigger screens
&[aria-haspopup="true"] {
&::after {
@@ -351,15 +355,15 @@
}
.elm-link {
- background-color: rgba($db-color-cool-gray-700, 0);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0);
&:hover {
- background-color: rgba($db-color-cool-gray-700, 0.08);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0.08);
color: initial;
}
&:active {
- background-color: rgba($db-color-cool-gray-700, 0.16);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0.16);
}
&[aria-current="page"] {
diff --git a/source/_patterns/02-components/metanavigation/_metanavigation.variables.scss b/source/_patterns/02-components/metanavigation/_metanavigation.variables.scss
index f78f84a3de0..1f9d12593d5 100644
--- a/source/_patterns/02-components/metanavigation/_metanavigation.variables.scss
+++ b/source/_patterns/02-components/metanavigation/_metanavigation.variables.scss
@@ -1,3 +1,3 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
diff --git a/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.demonstration.scss b/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.demonstration.scss
index 08f2cd670b4..726e1aa8c5b 100644
--- a/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.demonstration.scss
+++ b/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.demonstration.scss
@@ -1,4 +1,4 @@
-@import "../../../00-base/icons/icons.helpers";
+@use "../../../00-base/icons/icons.helpers";
// We're changing this via a demonstration SCSS file here, but within a real project it's obviously the variable $metanavigation-iconOnly--maxWidth that could get changed for that instead
.cmp-metanavigation {
@@ -6,7 +6,7 @@
.elm-link {
.rea-header & {
@media screen and (max-width: to-rem($pxValue: 1296)) {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
}
}
diff --git a/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.variables.scss b/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.variables.scss
index 5afd5d07122..739def07c3b 100644
--- a/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.variables.scss
+++ b/source/_patterns/02-components/metanavigation/enterprise/_metanavigation.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/metanavigation/enterprise/metanavigation.scss b/source/_patterns/02-components/metanavigation/enterprise/metanavigation.scss
index ace99abffc0..aa89cc378d9 100644
--- a/source/_patterns/02-components/metanavigation/enterprise/metanavigation.scss
+++ b/source/_patterns/02-components/metanavigation/enterprise/metanavigation.scss
@@ -1,2 +1,2 @@
-@import "metanavigation.variables";
-@import "../metanavigation";
+@use "metanavigation.variables";
+@use "../metanavigation" as metanavigation2;
diff --git a/source/_patterns/02-components/metanavigation/metanavigation.scss b/source/_patterns/02-components/metanavigation/metanavigation.scss
index fa13f67ff48..914f193aa72 100644
--- a/source/_patterns/02-components/metanavigation/metanavigation.scss
+++ b/source/_patterns/02-components/metanavigation/metanavigation.scss
@@ -1,4 +1,6 @@
-@import "metanavigation.variables";
+@use "metanavigation.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-metanavigation {
display: flex;
@@ -9,19 +11,19 @@
gap: 0.5rem;
li {
- padding-left: to-rem($pxValue: 8);
- padding-right: to-rem($pxValue: 8);
+ padding-left: functions.to-rem($pxValue: 8);
+ padding-right: functions.to-rem($pxValue: 8);
.rea-footer & {
- padding-left: to-rem($pxValue: 6);
- padding-right: to-rem($pxValue: 6);
+ padding-left: functions.to-rem($pxValue: 6);
+ padding-right: functions.to-rem($pxValue: 6);
}
.elm-link {
text-decoration: none;
.rea-header & {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
}
}
diff --git a/source/_patterns/02-components/notifications/_notification.variables.scss b/source/_patterns/02-components/notifications/_notification.variables.scss
index 9dfdd142146..b94c3f09c3d 100644
--- a/source/_patterns/02-components/notifications/_notification.variables.scss
+++ b/source/_patterns/02-components/notifications/_notification.variables.scss
@@ -1,10 +1,11 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
+@use "@db-ui/base/build/scss/variables";
$notification-alert--color: #fff !default;
-$notification-success--backgroundColor: $db-color-success !default;
-$notification-warning--backgroundColor: $db-color-warning !default;
-$notification-error--backgroundColor: $db-color-error !default;
-$notification-informative--backgroundColor: $db-color-informative !default;
+$notification-success--backgroundColor: variables.$db-color-success !default;
+$notification-warning--backgroundColor: variables.$db-color-warning !default;
+$notification-error--backgroundColor: variables.$db-color-error !default;
+$notification-informative--backgroundColor: variables.$db-color-informative !default;
-$notification---backgroundColor: $db-color-cool-gray-700 !default;
+$notification---backgroundColor: variables.$db-color-cool-gray-700 !default;
diff --git a/source/_patterns/02-components/notifications/enterprise/_notification.variables.scss b/source/_patterns/02-components/notifications/enterprise/_notification.variables.scss
index f80acea386f..a8a2b5fcabe 100644
--- a/source/_patterns/02-components/notifications/enterprise/_notification.variables.scss
+++ b/source/_patterns/02-components/notifications/enterprise/_notification.variables.scss
@@ -1 +1 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/02-components/notifications/enterprise/notification.scss b/source/_patterns/02-components/notifications/enterprise/notification.scss
index c49222667d8..d2ead40c294 100644
--- a/source/_patterns/02-components/notifications/enterprise/notification.scss
+++ b/source/_patterns/02-components/notifications/enterprise/notification.scss
@@ -1,2 +1,2 @@
-@import "notification.variables";
-@import "../notification";
+@use "notification.variables";
+@use "../notification" as notification2;
diff --git a/source/_patterns/02-components/notifications/notification.scss b/source/_patterns/02-components/notifications/notification.scss
index 66d8aacd143..88ed57de03f 100644
--- a/source/_patterns/02-components/notifications/notification.scss
+++ b/source/_patterns/02-components/notifications/notification.scss
@@ -1,63 +1,64 @@
-@import "../../../css/partials.meta";
-@import "notification.variables";
+@use "../../../css/partials.meta";
+@use "notification.variables";
+@use "../../../css/helpers/functions";
.cmp-notification {
// Default style
- background-color: $notification---backgroundColor;
+ background-color: notification.$notification---backgroundColor;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); // Todo: This should most likely get generally setup
- margin-bottom: #{to-rem($pxValue: 16)};
- padding: #{to-rem($pxValue: 16)}; // TODO: replace by spacing-m variable
+ margin-bottom: #{functions.to-rem($pxValue: 16)};
+ padding: #{functions.to-rem($pxValue: 16)}; // TODO: replace by spacing-m variable
section[data-variant="hovering"] & {
background-color: #fff;
}
// Alert variant
section[data-variant="alert"] & {
- color: $notification-alert--color;
+ color: notification.$notification-alert--color;
}
section[data-variant="hovering"] & {
border: 2px solid transparent;
- border-radius: #{to-rem($pxValue: 8)};
- padding: #{to-rem($pxValue: 14)} #{to-rem($pxValue: 16)}; // TODO: replace by spacing-m variable
+ border-radius: #{functions.to-rem($pxValue: 8)};
+ padding: #{functions.to-rem($pxValue: 14)} #{functions.to-rem($pxValue: 16)}; // TODO: replace by spacing-m variable
}
// Hide the textual labels regarding each state
& > em {
- @include a11y-visually-hidden($partial: $partial);
+ @include functions.a11y-visually-hidden($partial: partials.$partial);
}
&[data-type="success"] {
- background-color: $notification-success--backgroundColor;
+ background-color: notification.$notification-success--backgroundColor;
section[data-variant="hovering"] & {
- border-color: $notification-success--backgroundColor;
+ border-color: notification.$notification-success--backgroundColor;
}
}
&[data-type="warning"] {
- background-color: $notification-warning--backgroundColor;
+ background-color: notification.$notification-warning--backgroundColor;
section[data-variant="hovering"] & {
- border-color: $notification-warning--backgroundColor;
+ border-color: notification.$notification-warning--backgroundColor;
}
}
&[data-type="error"] {
- background-color: $notification-error--backgroundColor;
+ background-color: notification.$notification-error--backgroundColor;
section[data-variant="hovering"] & {
- border-color: $notification-error--backgroundColor;
+ border-color: notification.$notification-error--backgroundColor;
}
}
&[data-type="informative"] {
- background-color: $notification-informative--backgroundColor;
+ background-color: notification.$notification-informative--backgroundColor;
section[data-variant="hovering"] & {
- border-color: $notification-informative--backgroundColor;
+ border-color: notification.$notification-informative--backgroundColor;
}
}
@@ -72,7 +73,7 @@
&[data-icon],
&[data-icon-before] {
&::before {
- --icon-margin-after: #{to-rem($pxValue: 10)};
+ --icon-margin-after: #{functions.to-rem($pxValue: 10)};
}
}
@@ -80,7 +81,7 @@
justify-content: space-between;
&::after {
- --icon-margin-before: #{to-rem($pxValue: 10)};
+ --icon-margin-before: #{functions.to-rem($pxValue: 10)};
}
}
}
diff --git a/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss b/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss
index 4e264102e18..e1b2419bf7c 100644
--- a/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss
+++ b/source/_patterns/02-components/overflow-menu/_overflow-menu.variables.scss
@@ -1,13 +1,14 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables" as icons2;
+@use "../../00-base/icons/icons.helpers";
+@use "@db-ui/base/build/scss/variables";
$overflowMenu---borderRadius: 8px !default;
$overflowMenu---backgroundColor: #fff !default;
-$overflowMenu-item-hover-backgroundColor: $db-color-cool-gray-200 !default;
-$cmp-overflow-menu-icon: glyph(
+$overflowMenu-item-hover-backgroundColor: variables.$db-color-cool-gray-200 !default;
+$cmp-overflow-menu-icon: icons.glyph(
more-vertical
) !default; // * TODO: possibly rework variable naming
-$overflowMenu-triangle--borderSize: to-rem(
+$overflowMenu-triangle--borderSize: functions.to-rem(
$pxValue: 13
) !default;
diff --git a/source/_patterns/02-components/overflow-menu/enterprise/_overflow-menu.variables.scss b/source/_patterns/02-components/overflow-menu/enterprise/_overflow-menu.variables.scss
index 5afd5d07122..739def07c3b 100644
--- a/source/_patterns/02-components/overflow-menu/enterprise/_overflow-menu.variables.scss
+++ b/source/_patterns/02-components/overflow-menu/enterprise/_overflow-menu.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/overflow-menu/enterprise/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/enterprise/overflow-menu.scss
index 7ade20bacb2..22b1c76afc0 100644
--- a/source/_patterns/02-components/overflow-menu/enterprise/overflow-menu.scss
+++ b/source/_patterns/02-components/overflow-menu/enterprise/overflow-menu.scss
@@ -1,2 +1,2 @@
-@import "overflow-menu.variables";
-@import "../overflow-menu";
+@use "overflow-menu.variables";
+@use "../overflow-menu" as overflow-menu2;
diff --git a/source/_patterns/02-components/overflow-menu/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
index 775533a4dc8..ef415e8a31f 100644
--- a/source/_patterns/02-components/overflow-menu/overflow-menu.scss
+++ b/source/_patterns/02-components/overflow-menu/overflow-menu.scss
@@ -1,5 +1,9 @@
-@import "../../../css/partials.meta";
-@import "overflow-menu.variables";
+@use "../../../css/partials.meta";
+@use "overflow-menu.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-overflow-menu {
color: #2d333f; // TODO: replace by correct color
@@ -8,7 +12,7 @@
&:not(.is-account) {
summary {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
}
@@ -19,27 +23,27 @@
border-radius: 4px;
cursor: default;
- background-color: rgba($db-color-cool-gray-700, 0);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0);
& {
- @include icon(
- $cmp-overflow-menu-icon,
+ @include icons.icon(
+ overflow-menu.$cmp-overflow-menu-icon,
20,
"outline",
- $partial: $partial
+ $partial: partials.$partial
);
}
&::before {
- transform: translateX(-#{to-rem($pxValue: 2)});
+ transform: translateX(-#{functions.to-rem($pxValue: 2)});
}
&:hover {
- background-color: rgba($db-color-cool-gray-700, 0.08);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0.08);
}
&:active {
- background-color: rgba($db-color-cool-gray-700, 0.16);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0.16);
}
&::-webkit-details-marker {
@@ -54,28 +58,28 @@
// Menu list
menu,
ul {
- background-color: $overflowMenu---backgroundColor;
+ background-color: overflow-menu.$overflowMenu---backgroundColor;
- border-radius: $overflowMenu---borderRadius;
- filter: drop-shadow($box-shadow);
+ border-radius: overflow-menu.$overflowMenu---borderRadius;
+ filter: drop-shadow(db-ui-core.$box-shadow);
margin-block-start: 1rem;
padding-left: 0;
position: absolute;
width: min-content;
- z-index: $z-index-cmp-overflow-menu-menu;
+ z-index: db-ui-core.$z-index-cmp-overflow-menu-menu;
// Little triangle on the overlay
&::before {
- border-bottom: $overflowMenu-triangle--borderSize solid
- $overflowMenu---backgroundColor;
- border-left: $overflowMenu-triangle--borderSize solid transparent;
- border-right: $overflowMenu-triangle--borderSize solid transparent;
+ border-bottom: overflow-menu.$overflowMenu-triangle--borderSize solid
+ overflow-menu.$overflowMenu---backgroundColor;
+ border-left: overflow-menu.$overflowMenu-triangle--borderSize solid transparent;
+ border-right: overflow-menu.$overflowMenu-triangle--borderSize solid transparent;
content: "";
height: 0;
position: absolute;
transform: translate(
- to-rem($pxValue: 12),
- -#{to-rem($pxValue: 13)}
+ functions.to-rem($pxValue: 12),
+ -#{functions.to-rem($pxValue: 13)}
);
width: 0;
}
@@ -83,20 +87,20 @@
li {
button,
a {
- background-color: $overflowMenu---backgroundColor;
+ background-color: overflow-menu.$overflowMenu---backgroundColor;
border-radius: unset;
display: block;
font-weight: 400;
- padding: to-rem($pxValue: 16) to-rem($pxValue: 32)
- to-rem($pxValue: 16) to-rem($pxValue: 16); // TODO: replace by correct spacings
+ padding: functions.to-rem($pxValue: 16) functions.to-rem($pxValue: 32)
+ functions.to-rem($pxValue: 16) functions.to-rem($pxValue: 16); // TODO: replace by correct spacings
text-decoration: none;
&:hover,
&:focus {
- background-color: $overflowMenu-item-hover-backgroundColor;
+ background-color: overflow-menu.$overflowMenu-item-hover-backgroundColor;
color: inherit;
}
}
@@ -104,16 +108,16 @@
&:first-child {
button,
a {
- border-top-left-radius: $overflowMenu---borderRadius;
- border-top-right-radius: $overflowMenu---borderRadius;
+ border-top-left-radius: overflow-menu.$overflowMenu---borderRadius;
+ border-top-right-radius: overflow-menu.$overflowMenu---borderRadius;
}
}
&:last-child {
button,
a {
- border-bottom-left-radius: $overflowMenu---borderRadius;
- border-bottom-right-radius: $overflowMenu---borderRadius;
+ border-bottom-left-radius: overflow-menu.$overflowMenu---borderRadius;
+ border-bottom-right-radius: overflow-menu.$overflowMenu---borderRadius;
}
}
}
@@ -127,8 +131,8 @@
&::before {
right: 0;
transform: translate(
- -#{to-rem($pxValue: 12)},
- -#{to-rem($pxValue: 13)}
+ -#{functions.to-rem($pxValue: 12)},
+ -#{functions.to-rem($pxValue: 13)}
);
}
}
@@ -157,6 +161,6 @@
position: fixed;
top: 0;
width: 100vw;
- z-index: $z-index-cmp-overflow-menu-overlay;
+ z-index: db-ui-core.$z-index-cmp-overflow-menu-overlay;
}
}
diff --git a/source/_patterns/02-components/pagination/_pagination.variables.scss b/source/_patterns/02-components/pagination/_pagination.variables.scss
index f78f84a3de0..1f9d12593d5 100644
--- a/source/_patterns/02-components/pagination/_pagination.variables.scss
+++ b/source/_patterns/02-components/pagination/_pagination.variables.scss
@@ -1,3 +1,3 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
diff --git a/source/_patterns/02-components/pagination/enterprise/_pagination.variables.scss b/source/_patterns/02-components/pagination/enterprise/_pagination.variables.scss
index da54734ddab..d8d71197611 100644
--- a/source/_patterns/02-components/pagination/enterprise/_pagination.variables.scss
+++ b/source/_patterns/02-components/pagination/enterprise/_pagination.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/02-components/pagination/enterprise/pagination.scss b/source/_patterns/02-components/pagination/enterprise/pagination.scss
index e106249eaab..2d08a400cdc 100644
--- a/source/_patterns/02-components/pagination/enterprise/pagination.scss
+++ b/source/_patterns/02-components/pagination/enterprise/pagination.scss
@@ -1,2 +1,2 @@
-@import "pagination.variables";
-@import "../pagination";
+@use "pagination.variables";
+@use "../pagination" as pagination2;
diff --git a/source/_patterns/02-components/pagination/pagination.scss b/source/_patterns/02-components/pagination/pagination.scss
index 2a7447e0b01..0fae55ce369 100644
--- a/source/_patterns/02-components/pagination/pagination.scss
+++ b/source/_patterns/02-components/pagination/pagination.scss
@@ -1,9 +1,12 @@
-@import "../../../css/partials.meta";
-@import "pagination.variables";
+@use "../../../css/partials.meta";
+@use "pagination.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-pagination {
- color: $db-color-cool-gray-700;
- font-size: to-rem($pxValue: 14);
+ color: variables.$db-color-cool-gray-700;
+ font-size: functions.to-rem($pxValue: 14);
user-select: none;
@@ -12,7 +15,7 @@
}
.elm-headline {
- @include a11y-visually-hidden($partial: $partial);
+ @include functions.a11y-visually-hidden($partial: partials.$partial);
}
li,
@@ -23,8 +26,8 @@
}
li {
- height: to-rem($pxValue: 36);
- width: to-rem($pxValue: 36);
+ height: functions.to-rem($pxValue: 36);
+ width: functions.to-rem($pxValue: 36);
}
.elm-link {
@@ -40,21 +43,21 @@
}
&[rel="prev"]::before {
- margin-left: to-rem($pxValue: 11);
+ margin-left: functions.to-rem($pxValue: 11);
}
&[rel="next"]::before {
- margin-right: to-rem($pxValue: 11);
+ margin-right: functions.to-rem($pxValue: 11);
}
&[rel="prev"] {
- @include icon(glyph(chevron-left), $partial: $partial);
- @include is-icon-text-replace();
+ @include icons.icon(icons.glyph(chevron-left), $partial: partials.$partial);
+ @include icons.is-icon-text-replace();
}
&[rel="next"] {
- @include icon(glyph(chevron-right), $partial: $partial);
- @include is-icon-text-replace();
+ @include icons.icon(icons.glyph(chevron-right), $partial: partials.$partial);
+ @include icons.is-icon-text-replace();
}
&[aria-current="page"] {
diff --git a/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss b/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss
index e2b8c7b7322..bea813e1bb9 100644
--- a/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss
+++ b/source/_patterns/02-components/sidenavi/_sidenavi.variables.scss
@@ -1,9 +1,10 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
+@use "@db-ui/base/build/scss/variables";
-$sidenavi-link--color: $db-color-cool-gray-200 !default;
-$sidenavi-linkCurrent-hover-color: $db-color-cool-gray-600 !default;
+$sidenavi-link--color: variables.$db-color-cool-gray-200 !default;
+$sidenavi-linkCurrent-hover-color: variables.$db-color-cool-gray-600 !default;
-$sidenavi-link-hover-backgroundColor: $db-color-cool-gray-300 !default;
-$sidenavi-linkcurrent--backgroundColor: $db-color-cool-gray-200 !default;
+$sidenavi-link-hover-backgroundColor: variables.$db-color-cool-gray-300 !default;
+$sidenavi-linkcurrent--backgroundColor: variables.$db-color-cool-gray-200 !default;
diff --git a/source/_patterns/02-components/sidenavi/enterprise/_sidenavi.variables.scss b/source/_patterns/02-components/sidenavi/enterprise/_sidenavi.variables.scss
index bc030c9f8a8..5dfd354ea9e 100644
--- a/source/_patterns/02-components/sidenavi/enterprise/_sidenavi.variables.scss
+++ b/source/_patterns/02-components/sidenavi/enterprise/_sidenavi.variables.scss
@@ -1,3 +1,3 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../00-base/colors/enterprise/colors.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/sidenavi/enterprise/sidenavi.scss b/source/_patterns/02-components/sidenavi/enterprise/sidenavi.scss
index 1efcd5778be..a994230059d 100644
--- a/source/_patterns/02-components/sidenavi/enterprise/sidenavi.scss
+++ b/source/_patterns/02-components/sidenavi/enterprise/sidenavi.scss
@@ -1,2 +1,2 @@
-@import "sidenavi.variables";
-@import "../sidenavi";
+@use "sidenavi.variables";
+@use "../sidenavi" as sidenavi2;
diff --git a/source/_patterns/02-components/sidenavi/sidenavi.scss b/source/_patterns/02-components/sidenavi/sidenavi.scss
index 357374f6efd..e9827b8a963 100644
--- a/source/_patterns/02-components/sidenavi/sidenavi.scss
+++ b/source/_patterns/02-components/sidenavi/sidenavi.scss
@@ -1,72 +1,76 @@
-@import "../../../css/partials.meta";
-@import "sidenavi.variables";
+@use "../../../css/partials.meta";
+@use "sidenavi.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-sidenavi {
- background-color: $db-color-cool-gray-600;
- box-shadow: $box-shadow-01, $box-shadow-02;
+ background-color: variables.$db-color-cool-gray-600;
+ box-shadow: db-ui-core.$box-shadow-01, db-ui-core.$box-shadow-02;
display: inline-block;
.elm-link {
// We need to reset the general border-radius here
border-radius: initial;
// TODO: check for the correct color code
- color: $sidenavi-link--color; // * TODO: possibly rework variable naming
+ color: sidenavi.$sidenavi-link--color; // * TODO: possibly rework variable naming
display: block;
- padding: to-rem($pxValue: 20) to-rem($pxValue: 16);
+ padding: functions.to-rem($pxValue: 20) functions.to-rem($pxValue: 16);
text-decoration: none;
&:hover,
&:focus,
&[aria-current="page"] {
- color: $sidenavi-linkCurrent-hover-color; // * TODO: possibly rework variable naming
+ color: sidenavi.$sidenavi-linkCurrent-hover-color; // * TODO: possibly rework variable naming
}
&:hover,
&:focus {
- background-color: $sidenavi-link-hover-backgroundColor; // * TODO: possibly rework variable naming
+ background-color: sidenavi.$sidenavi-link-hover-backgroundColor; // * TODO: possibly rework variable naming
}
&[aria-current="page"] {
- background-color: $sidenavi-linkcurrent--backgroundColor; // * TODO: possibly rework variable naming
+ background-color: sidenavi.$sidenavi-linkcurrent--backgroundColor; // * TODO: possibly rework variable naming
font-weight: 700;
}
&[rel] {
- padding-left: to-rem($pxValue: 21);
+ padding-left: functions.to-rem($pxValue: 21);
}
&[rel="index"] {
- @include icon(glyph(home), 32, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(home), 32, "outline", $partial: partials.$partial);
}
&[rel="documents"] {
- @include icon(glyph(document), 32, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(document), 32, "outline", $partial: partials.$partial);
}
// TODO: This needs to get the icon from the new iconset
&[rel="dashboard"] {
- @include icon(
- glyph(dashboard),
+ @include icons.icon(
+ icons.glyph(dashboard),
32,
"enterprise-outline",
- $partial: $partial
+ $partial: partials.$partial
);
}
// TODO: This needs to get the icon from the new iconset
&[rel="cloud"] {
- @include icon(
- glyph(cloud),
+ @include icons.icon(
+ icons.glyph(cloud),
32,
"enterprise-outline",
- $partial: $partial
+ $partial: partials.$partial
);
}
&[rel="calendar"] {
- @include icon(glyph(calendar), 32, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(calendar), 32, "outline", $partial: partials.$partial);
}
&[rel="help"] {
- @include icon(glyph(help), 32, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(help), 32, "outline", $partial: partials.$partial);
}
}
}
diff --git a/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss b/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss
index b221fb2d98b..9bd1458be79 100644
--- a/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss
+++ b/source/_patterns/02-components/sitesearch/_sitesearch.variables.scss
@@ -1,11 +1,11 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
-$sitesearch-form-full-maxWidth: to-rem(
+$sitesearch-form-full-maxWidth: functions.to-rem(
$pxValue: 500
) !default;
$sitesearch-input--backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
-$sitesearch-width--open: to-rem(
+$sitesearch-width--open: functions.to-rem(
$pxValue: 240
);
diff --git a/source/_patterns/02-components/sitesearch/enterprise/_sitesearch.variables.scss b/source/_patterns/02-components/sitesearch/enterprise/_sitesearch.variables.scss
index 5afd5d07122..739def07c3b 100644
--- a/source/_patterns/02-components/sitesearch/enterprise/_sitesearch.variables.scss
+++ b/source/_patterns/02-components/sitesearch/enterprise/_sitesearch.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/icons/enterprise/icons.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/icons/enterprise/icons.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/sitesearch/enterprise/sitesearch.scss b/source/_patterns/02-components/sitesearch/enterprise/sitesearch.scss
index c5c9c797b05..2d49feae02c 100644
--- a/source/_patterns/02-components/sitesearch/enterprise/sitesearch.scss
+++ b/source/_patterns/02-components/sitesearch/enterprise/sitesearch.scss
@@ -1,2 +1,2 @@
-@import "sitesearch.variables";
-@import "../sitesearch";
+@use "sitesearch.variables";
+@use "../sitesearch" as sitesearch2;
diff --git a/source/_patterns/02-components/sitesearch/sitesearch.scss b/source/_patterns/02-components/sitesearch/sitesearch.scss
index b8877d16be0..693d77d5d44 100644
--- a/source/_patterns/02-components/sitesearch/sitesearch.scss
+++ b/source/_patterns/02-components/sitesearch/sitesearch.scss
@@ -1,6 +1,10 @@
-@import "../../../css/partials.meta";
-@import "sitesearch.variables";
-@import "../../01-elements/form-elements";
+@use "../../../css/partials.meta";
+@use "sitesearch.variables";
+@use "../../01-elements/form-elements";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.cmp-sitesearch {
position: relative;
@@ -8,7 +12,7 @@
align-items: center;
padding-inline-end: 0.75rem;
- @media screen and (max-width: $db-break-the-header-max-width) {
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
margin-inline-start: auto;
margin-inline-end: 2.25rem;
@@ -27,7 +31,7 @@
&:focus,
&:not(:placeholder-shown) {
opacity: 1;
- width: calc(#{$sitesearch-width--open} + 1rem);
+ width: calc(#{sitesearch.$sitesearch-width--open} + 1rem);
padding-inline-start: 1rem;
padding-inline-end: 3rem;
padding-top: 0;
@@ -49,7 +53,7 @@
display: inline-block;
& {
- @include icon(glyph(search), 24, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(search), 24, "outline", $partial: partials.$partial);
}
&::before {
@@ -57,12 +61,12 @@
}
.rea-meta & {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
}
.elm-button {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
display: none;
position: absolute;
@@ -71,29 +75,29 @@
border: 0;
& {
- @include icon(glyph(search), 24, "outline", $partial: $partial);
+ @include icons.icon(icons.glyph(search), 24, "outline", $partial: partials.$partial);
}
}
.elm-label,
.elm-button {
- background-color: rgba($db-color-cool-gray-700, 0);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0);
&:hover {
- background-color: rgba($db-color-cool-gray-700, 0.08);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0.08);
}
&:active {
- background-color: rgba($db-color-cool-gray-700, 0.16);
+ background-color: rgba(variables.$db-color-cool-gray-700, 0.16);
}
}
- @media screen and (max-width: #{$sitesearch-form-full-maxWidth}) {
+ @media screen and (max-width: #{sitesearch.$sitesearch-form-full-maxWidth}) {
&:focus-within,
&:has(.elm-input[type="search"]:not(:placeholder-shown)) {
- left: to-rem($pxValue: 16);
+ left: functions.to-rem($pxValue: 16);
position: absolute;
- z-index: $z-index-rea-header-cmp-sitesearch-focus;
+ z-index: db-ui-core.$z-index-rea-header-cmp-sitesearch-focus;
.elm-input[type="search"] {
width: calc(100vw - 5.5rem);
diff --git a/source/_patterns/02-components/tab-bar/_tab-bar.variables.scss b/source/_patterns/02-components/tab-bar/_tab-bar.variables.scss
index 1eb7fb36044..3dbb9bcf263 100644
--- a/source/_patterns/02-components/tab-bar/_tab-bar.variables.scss
+++ b/source/_patterns/02-components/tab-bar/_tab-bar.variables.scss
@@ -1,19 +1,20 @@
-@import "../../../css/helpers/functions";
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/helpers/functions";
+@use "../../../css/db-ui-core.variables";
+@use "@db-ui/base/build/scss/variables";
$tabBar-tabSection--backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
-$tabBar-tab-focus-outline: 1px dotted $db-color-cool-gray-400 !default;
+$tabBar-tab-focus-outline: 1px dotted variables.$db-color-cool-gray-400 !default;
// $db-color-cool-gray-100
-$tabBar-tab-hover-backgroundColor: #{$db-color-cool-gray-700} + "1F" !default;
-$tabBar-tab-pressed-backgroundColor: #{$db-color-cool-gray-700} + "3D" !default;
-$tabBar-tab-active-border: #{to-rem(
+$tabBar-tab-hover-backgroundColor: #{variables.$db-color-cool-gray-700} + "1F" !default;
+$tabBar-tab-pressed-backgroundColor: #{variables.$db-color-cool-gray-700} + "3D" !default;
+$tabBar-tab-active-border: #{functions.to-rem(
$pxValue: 1
- )} solid $db-color-cool-gray-500 !default;
+ )} solid variables.$db-color-cool-gray-500 !default;
-$tabBar-tabpanel--borderTop: to-rem(
+$tabBar-tabpanel--borderTop: functions.to-rem(
$pxValue: 1
)
- solid $db-color-cool-gray-500 !default;
-$tabBar-tabpanel--boxShadow: $box-shadow-01-bottom, $box-shadow-02-bottom !default;
+ solid variables.$db-color-cool-gray-500 !default;
+$tabBar-tabpanel--boxShadow: db-ui-core.$box-shadow-01-bottom, db-ui-core.$box-shadow-02-bottom !default;
diff --git a/source/_patterns/02-components/tab-bar/enterprise/_tab-bar.variables.scss b/source/_patterns/02-components/tab-bar/enterprise/_tab-bar.variables.scss
index 3dfa490e4b4..74e494abf07 100644
--- a/source/_patterns/02-components/tab-bar/enterprise/_tab-bar.variables.scss
+++ b/source/_patterns/02-components/tab-bar/enterprise/_tab-bar.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/tab-bar/enterprise/tab-bar.scss b/source/_patterns/02-components/tab-bar/enterprise/tab-bar.scss
index 174e86e6560..c89f2cb2952 100644
--- a/source/_patterns/02-components/tab-bar/enterprise/tab-bar.scss
+++ b/source/_patterns/02-components/tab-bar/enterprise/tab-bar.scss
@@ -1,2 +1,2 @@
-@import "tab-bar.variables";
-@import "../tab-bar";
+@use "tab-bar.variables";
+@use "../tab-bar" as tab-bar2;
diff --git a/source/_patterns/02-components/tab-bar/tab-bar.scss b/source/_patterns/02-components/tab-bar/tab-bar.scss
index 6aa2942e5c1..51a698b2af5 100644
--- a/source/_patterns/02-components/tab-bar/tab-bar.scss
+++ b/source/_patterns/02-components/tab-bar/tab-bar.scss
@@ -1,6 +1,8 @@
-@import "../../../css/partials.meta";
-@import "tab-bar.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/partials.meta";
+@use "tab-bar.variables";
+@use "../../00-base/icons/icons.helpers";
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/helpers/functions";
@mixin tab() {
& > input[type="radio"],
@@ -16,12 +18,12 @@
gap: 0.25rem;
@include tab() {
- @include a11y-visually-hidden($partial: $partial);
+ @include functions.a11y-visually-hidden($partial: partials.$partial);
& + label[role="tab"] {
cursor: pointer;
display: flex;
- padding: 0.875rem $db-spacing-m;
+ padding: 0.875rem variables.$db-spacing-m;
position: relative;
z-index: 1;
border-radius: 4px;
@@ -33,25 +35,25 @@
}
&:focus + label {
- outline: $tabBar-tab-focus-outline;
+ outline: tab-bar.$tabBar-tab-focus-outline;
}
&:not(:checked) {
& + label[role="tab"] {
&:hover,
&:focus {
- background-color: $tabBar-tab-hover-backgroundColor;
+ background-color: tab-bar.$tabBar-tab-hover-backgroundColor;
}
&:active {
- background-color: $tabBar-tab-pressed-backgroundColor;
+ background-color: tab-bar.$tabBar-tab-pressed-backgroundColor;
}
}
}
&:disabled {
& + label[role="tab"] {
- color: $db-color-cool-gray-400;
+ color: variables.$db-color-cool-gray-400;
&:hover,
&:focus {
@@ -70,7 +72,7 @@
// Puls
&::after {
- background-color: $db-color-red-500;
+ background-color: variables.$db-color-red-500;
border-radius: 5px;
content: "";
display: block;
@@ -85,7 +87,7 @@
label[role="tab"],
section[role="tabpanel"] {
- background-color: $tabBar-tabSection--backgroundColor;
+ background-color: tab-bar.$tabBar-tabSection--backgroundColor;
}
section[role="tabpanel"] {
diff --git a/source/_patterns/02-components/table/_table.variables.scss b/source/_patterns/02-components/table/_table.variables.scss
index db7f28d9e74..29ec0f1fe9b 100644
--- a/source/_patterns/02-components/table/_table.variables.scss
+++ b/source/_patterns/02-components/table/_table.variables.scss
@@ -1,4 +1,5 @@
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
+@use "@db-ui/base/build/scss/variables";
$cmp-table-cell-height-36: to-rem(
$pxValue: 4
@@ -10,10 +11,10 @@ $table-cell-height68-paddingVertical: to-rem(
$pxValue: 22
) !default; // 68px cell height
-$table-line--borderColor: $db-color-cool-gray-200 !default;
+$table-line--borderColor: variables.$db-color-cool-gray-200 !default;
-$table-row-zebra-color: rgba($db-color-cool-gray-700, 0.07) !default;
+$table-row-zebra-color: rgba(variables.$db-color-cool-gray-700, 0.07) !default;
-$table-densitySmall--padding: $db-spacing-s !default;
-$table-densityRegular--padding: $db-spacing-sm !default;
-$table-densityLarge--padding: $db-spacing-m !default;
+$table-densitySmall--padding: variables.$db-spacing-s !default;
+$table-densityRegular--padding: variables.$db-spacing-sm !default;
+$table-densityLarge--padding: variables.$db-spacing-m !default;
diff --git a/source/_patterns/02-components/table/enterprise/_table.demonstration.scss b/source/_patterns/02-components/table/enterprise/_table.demonstration.scss
index 3b790d4303a..6d47d50fb69 100644
--- a/source/_patterns/02-components/table/enterprise/_table.demonstration.scss
+++ b/source/_patterns/02-components/table/enterprise/_table.demonstration.scss
@@ -1,2 +1,2 @@
-@import "table.variables";
-@import "../table.helpers";
+@use "table.variables";
+@use "../table.helpers" as table2;
diff --git a/source/_patterns/02-components/table/enterprise/_table.variables.scss b/source/_patterns/02-components/table/enterprise/_table.variables.scss
index 3dfa490e4b4..74e494abf07 100644
--- a/source/_patterns/02-components/table/enterprise/_table.variables.scss
+++ b/source/_patterns/02-components/table/enterprise/_table.variables.scss
@@ -1,2 +1,2 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/02-components/table/enterprise/table.scss b/source/_patterns/02-components/table/enterprise/table.scss
index 460aaa3fb9a..146cff409ee 100644
--- a/source/_patterns/02-components/table/enterprise/table.scss
+++ b/source/_patterns/02-components/table/enterprise/table.scss
@@ -1,2 +1,2 @@
-@import "table.variables";
-@import "../table";
+@use "table.variables";
+@use "../table" as table2;
diff --git a/source/_patterns/02-components/table/table.scss b/source/_patterns/02-components/table/table.scss
index 82af0d957fc..c2a8fb2f8fd 100644
--- a/source/_patterns/02-components/table/table.scss
+++ b/source/_patterns/02-components/table/table.scss
@@ -1,6 +1,8 @@
-@import "../../../css/helpers/functions";
-@import "table.variables";
-@import "table.helpers";
+@use "../../../css/helpers/functions";
+@use "table.variables";
+@use "table.helpers" as table2;
+@use "@db-ui/base/build/scss/variables";
+@use "../../../css/db-ui-core.variables";
.cmp-table {
border-collapse: collapse;
@@ -12,21 +14,21 @@
// the box-shadow should get displayed including the whole table / the caption as well
&,
& > caption {
- box-shadow: $box-shadow-01, $box-shadow-02;
+ box-shadow: db-ui-core.$box-shadow-01, db-ui-core.$box-shadow-02;
}
caption {
font-weight: 700;
- padding: #{to-rem($pxValue: 16)} #{to-rem($pxValue: 12)};
+ padding: #{functions.to-rem($pxValue: 16)} #{functions.to-rem($pxValue: 12)};
text-align: left;
}
thead {
- border-bottom: to-rem($pxValue: 1) solid $db-color-cool-gray-700;
- border-top: to-rem($pxValue: 1) solid $db-color-cool-gray-700;
+ border-bottom: functions.to-rem($pxValue: 1) solid variables.$db-color-cool-gray-700;
+ border-top: functions.to-rem($pxValue: 1) solid variables.$db-color-cool-gray-700;
th {
- color: $db-color-cool-gray-500;
+ color: variables.$db-color-cool-gray-500;
}
}
@@ -36,7 +38,7 @@
th,
td {
- padding: $table-densityRegular--padding;
+ padding: table.$table-densityRegular--padding;
// Default horizontal and vertical alignment should get inherited
text-align: inherit;
@@ -52,10 +54,10 @@
}
tbody {
- border-bottom: to-rem($pxValue: 1) solid $db-color-cool-gray-700;
+ border-bottom: functions.to-rem($pxValue: 1) solid variables.$db-color-cool-gray-700;
th:first-child {
- border-right: 1px solid $db-color-warm-gray-700;
+ border-right: 1px solid variables.$db-color-warm-gray-700;
}
}
@@ -121,7 +123,7 @@
tr:not(:last-child) {
th,
td {
- border-bottom: 1px solid $table-line--borderColor; // * TODO: possibly rework variable naming
+ border-bottom: 1px solid table.$table-line--borderColor; // * TODO: possibly rework variable naming
}
}
}
@@ -132,7 +134,7 @@
th,
td {
&:not(:first-child) {
- border-left: 1px solid $table-line--borderColor; // * TODO: possibly rework variable naming
+ border-left: 1px solid table.$table-line--borderColor; // * TODO: possibly rework variable naming
}
}
}
@@ -141,8 +143,8 @@
// Zebra cell styling
&[data-rows="zebra"] {
tbody {
- @include cmp-table-zebra(
- $table-row-zebra-color
+ @include table2.cmp-table-zebra(
+ table.$table-row-zebra-color
); // * TODO: possibly rework variable naming
}
}
@@ -151,14 +153,14 @@
&[data-density="small"] {
th,
td {
- padding: $table-densitySmall--padding;
+ padding: table.$table-densitySmall--padding;
}
}
&[data-density="large"] {
th,
td {
- padding: $table-densityLarge--padding;
+ padding: table.$table-densityLarge--padding;
}
}
diff --git a/source/_patterns/03-areas/00-header/_header.variables.scss b/source/_patterns/03-areas/00-header/_header.variables.scss
index 756924f933a..f679e528f0d 100644
--- a/source/_patterns/03-areas/00-header/_header.variables.scss
+++ b/source/_patterns/03-areas/00-header/_header.variables.scss
@@ -1,4 +1,5 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
+@use "@db-ui/base/build/scss/variables";
// offset-x | offset-y | blur-radius | spread-radius | color
$header---boxShadow:
@@ -7,11 +8,11 @@ $header---boxShadow:
$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
-$header---borderBottom: #{to-rem(
+$header---borderBottom: #{functions.to-rem(
$pxValue: 1
- )} solid $db-color-warm-gray-400 !default;
+ )} solid variables.$db-color-warm-gray-400 !default;
-$header---marginBottom: to-rem(
+$header---marginBottom: functions.to-rem(
$pxValue: 16
) !default;
diff --git a/source/_patterns/03-areas/00-header/_meta.variables.scss b/source/_patterns/03-areas/00-header/_meta.variables.scss
index 54226d99e99..1403700e7b6 100644
--- a/source/_patterns/03-areas/00-header/_meta.variables.scss
+++ b/source/_patterns/03-areas/00-header/_meta.variables.scss
@@ -1,6 +1,6 @@
-@import "../../../css/helpers/functions";
-@import "../../00-base/icons/icons.variables";
-@import "../../00-base/icons/icons.helpers";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.variables";
+@use "../../00-base/icons/icons.helpers" as icons2;
$header-big-link-paddingTop: 32 * 0.0625 !default;
diff --git a/source/_patterns/03-areas/00-header/enterprise/_header.variables.scss b/source/_patterns/03-areas/00-header/enterprise/_header.variables.scss
index f80acea386f..a8a2b5fcabe 100644
--- a/source/_patterns/03-areas/00-header/enterprise/_header.variables.scss
+++ b/source/_patterns/03-areas/00-header/enterprise/_header.variables.scss
@@ -1 +1 @@
-@import "../../../00-base/colors/enterprise/colors.variables";
+@use "../../../00-base/colors/enterprise/colors.variables";
diff --git a/source/_patterns/03-areas/00-header/enterprise/header.scss b/source/_patterns/03-areas/00-header/enterprise/header.scss
index d0e26884c28..a4eb432f730 100644
--- a/source/_patterns/03-areas/00-header/enterprise/header.scss
+++ b/source/_patterns/03-areas/00-header/enterprise/header.scss
@@ -1,2 +1,2 @@
-@import "header.variables";
-@import "../header";
+@use "header.variables";
+@use "../header" as header2;
diff --git a/source/_patterns/03-areas/00-header/enterprise/meta.scss b/source/_patterns/03-areas/00-header/enterprise/meta.scss
index 8b6b150291b..48049224fc7 100644
--- a/source/_patterns/03-areas/00-header/enterprise/meta.scss
+++ b/source/_patterns/03-areas/00-header/enterprise/meta.scss
@@ -1,2 +1,2 @@
-@import "meta.variables";
-@import "../meta";
+@use "meta.variables";
+@use "../meta" as meta2;
diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss
index dee30d84360..15e9196ea37 100644
--- a/source/_patterns/03-areas/00-header/header.scss
+++ b/source/_patterns/03-areas/00-header/header.scss
@@ -1,20 +1,21 @@
-@import "../../../css/partials.meta";
-@import "header.variables";
-@import "../../../css/helpers/functions";
-@import "../../../css/helpers/dividers";
+@use "../../../css/partials.meta";
+@use "header.variables";
+@use "../../../css/helpers/functions";
+@use "../../../css/helpers/dividers";
+@use "../../../css/db-ui-core.variables";
.rea-header {
- background-color: $header---backgroundColor;
- box-shadow: $header---boxShadow;
+ background-color: header.$header---backgroundColor;
+ box-shadow: header.$header---boxShadow;
align-items: center;
- margin-bottom: $header---marginBottom;
+ margin-bottom: header.$header---marginBottom;
display: flex;
gap: 1.5rem;
- min-block-size: $header---minHeight;
+ min-block-size: header.$header---minHeight;
padding-inline: 1.5rem;
- @media screen and (width > $db-break-the-header-max-width) {
+ @media screen and (width > db-ui-core.$db-break-the-header-max-width) {
padding-block: 0.875rem;
}
@@ -28,8 +29,8 @@
}
}
- @media screen and (max-width: $db-break-the-header-max-width) {
- border-bottom: $header---borderBottom;
+ @media screen and (max-width: db-ui-core.$db-break-the-header-max-width) {
+ border-bottom: header.$header---borderBottom;
position: relative;
&:has(.cmp-mainnavigation > input[type="checkbox"][id]:not(:checked)) {
@@ -53,7 +54,7 @@
inset-block-start: unset;
inset-block-end: 0;
block-size: 3.5rem;
- z-index: $z-index-cmp-overflow-menu-overlay;
+ z-index: db-ui-core.$z-index-cmp-overflow-menu-overlay;
border-top: 1px solid rgba(40, 45, 55, 0.2);
border-bottom-left-radius: 4px;
padding-inline: 1rem;
diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss
index da6272c4011..91f22b0cf31 100644
--- a/source/_patterns/03-areas/00-header/meta.scss
+++ b/source/_patterns/03-areas/00-header/meta.scss
@@ -1,4 +1,6 @@
-@import "meta.variables";
+@use "meta.variables";
+@use "../../../css/helpers/functions";
+@use "../../00-base/icons/icons.helpers";
.rea-meta {
display: flex;
@@ -20,26 +22,26 @@
order: 2;
.elm-link {
- padding-bottom: to-rem($pxValue: 9);
- padding-top: to-rem($pxValue: 9);
+ padding-bottom: functions.to-rem($pxValue: 9);
+ padding-top: functions.to-rem($pxValue: 9);
}
}
& > .elm-link {
&[rel="account"] {
- margin-left: to-rem($pxValue: 4);
+ margin-left: functions.to-rem($pxValue: 4);
& {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
- @media screen and (min-width: #{($header-srOnly-linkAccount-breakpoint + 1)}rem) {
- margin-left: to-rem($pxValue: 8);
+ @media screen and (min-width: #{(meta.$header-srOnly-linkAccount-breakpoint + 1)}rem) {
+ margin-left: functions.to-rem($pxValue: 8);
}
}
}
.cmp-sitesearch:focus-within ~ .elm-link[rel="account"] {
- @include is-icon-text-replace();
+ @include icons.is-icon-text-replace();
}
}
diff --git a/source/_patterns/03-areas/01-main/_main.scss b/source/_patterns/03-areas/01-main/_main.scss
index 3994f408100..d1b5795da6f 100644
--- a/source/_patterns/03-areas/01-main/_main.scss
+++ b/source/_patterns/03-areas/01-main/_main.scss
@@ -2,14 +2,14 @@
// In case that you're building a web application you might want to have more freedom
// and probably would want to not include it's contents into your SCSS build / references.
-@import "../../../css/helpers/clearfix";
+@use "../../../css/helpers/clearfix";
-@import "main.variables";
+@use "main.variables";
.rea-main {
@include clearfix();
- background-color: $main---backgroundColor;
+ background-color: main.$main---backgroundColor;
// adapted from https://github.com/jgthms/bulma/blob/0.7.5/sass/elements/container.sass
margin: 0 auto;
diff --git a/source/_patterns/03-areas/01-main/enterprise/_main.scss b/source/_patterns/03-areas/01-main/enterprise/_main.scss
index 77827af1f5a..a2fa45bc3ce 100644
--- a/source/_patterns/03-areas/01-main/enterprise/_main.scss
+++ b/source/_patterns/03-areas/01-main/enterprise/_main.scss
@@ -1,2 +1,2 @@
// @import "main.variables";
-@import "../main";
+@use "../main";
diff --git a/source/_patterns/03-areas/02-grid/enterprise/_grid.demonstration.scss b/source/_patterns/03-areas/02-grid/enterprise/_grid.demonstration.scss
index 0d620e1a7b9..007e13bf58c 100644
--- a/source/_patterns/03-areas/02-grid/enterprise/_grid.demonstration.scss
+++ b/source/_patterns/03-areas/02-grid/enterprise/_grid.demonstration.scss
@@ -1,6 +1,6 @@
@charset "utf-8";
-@import "grid";
+@use "grid";
.rea-grid {
// Example
diff --git a/source/_patterns/03-areas/02-grid/enterprise/_grid.scss b/source/_patterns/03-areas/02-grid/enterprise/_grid.scss
index 2b61382de06..c1632e33abb 100644
--- a/source/_patterns/03-areas/02-grid/enterprise/_grid.scss
+++ b/source/_patterns/03-areas/02-grid/enterprise/_grid.scss
@@ -1,2 +1,2 @@
-@import "grid.variables";
-@import "../grid";
+@use "grid.variables";
+@use "../grid" as grid2;
diff --git a/source/_patterns/03-areas/03-footer/_footer.variables.scss b/source/_patterns/03-areas/03-footer/_footer.variables.scss
index e0c6b5de8f3..68615e64b6b 100644
--- a/source/_patterns/03-areas/03-footer/_footer.variables.scss
+++ b/source/_patterns/03-areas/03-footer/_footer.variables.scss
@@ -1,10 +1,11 @@
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
+@use "@db-ui/base/build/scss/variables";
$footer---borderTop: #{to-rem(
$pxValue: 6
- )} solid $db-color-cool-gray-200 !default;
+ )} solid variables.$db-color-cool-gray-200 !default;
-$footer---boxShadow: $box-shadow-01, $box-shadow-02 !default;
+$footer---boxShadow: db-ui-core.$box-shadow-01, db-ui-core.$box-shadow-02 !default;
$footer---marginTop: to-rem(
$pxValue: 16
diff --git a/source/_patterns/03-areas/03-footer/enterprise/_footer.variables.scss b/source/_patterns/03-areas/03-footer/enterprise/_footer.variables.scss
index b06098d43a4..6322e573c26 100644
--- a/source/_patterns/03-areas/03-footer/enterprise/_footer.variables.scss
+++ b/source/_patterns/03-areas/03-footer/enterprise/_footer.variables.scss
@@ -1 +1 @@
-@import "../../../../css/enterprise/db-ui-core.variables";
+@use "../../../../css/enterprise/db-ui-core.variables";
diff --git a/source/_patterns/03-areas/03-footer/enterprise/footer.scss b/source/_patterns/03-areas/03-footer/enterprise/footer.scss
index 6db40470dc8..1d368640122 100644
--- a/source/_patterns/03-areas/03-footer/enterprise/footer.scss
+++ b/source/_patterns/03-areas/03-footer/enterprise/footer.scss
@@ -1,2 +1,2 @@
-@import "footer.variables";
-@import "../footer";
+@use "footer.variables";
+@use "../footer" as footer2;
diff --git a/source/_patterns/03-areas/03-footer/footer.scss b/source/_patterns/03-areas/03-footer/footer.scss
index d23e9ff6793..1906665160c 100644
--- a/source/_patterns/03-areas/03-footer/footer.scss
+++ b/source/_patterns/03-areas/03-footer/footer.scss
@@ -1,23 +1,24 @@
@charset "utf-8";
-@import "../../../css/partials.meta";
-@import "../../../css/helpers/functions";
-@import "footer.variables";
+@use "../../../css/partials.meta";
+@use "../../../css/helpers/functions";
+@use "footer.variables";
+@use "@db-ui/base/build/scss/variables";
.rea-footer {
- background-color: $footer---backgroundColor;
- box-shadow: $footer---boxShadow;
+ background-color: footer.$footer---backgroundColor;
+ box-shadow: footer.$footer---boxShadow;
- color: $db-color-cool-gray-500;
- margin-top: $footer---marginTop;
- padding: #{to-rem($pxValue: 21)} #{to-rem($pxValue: 16)};
+ color: variables.$db-color-cool-gray-500;
+ margin-top: footer.$footer---marginTop;
+ padding: #{functions.to-rem($pxValue: 21)} #{functions.to-rem($pxValue: 16)};
& {
- @include clearfix($partial: $partial);
+ @include functions.clearfix($partial: partials.$partial);
}
&.has-border {
- border-top: $footer---borderTop;
+ border-top: footer.$footer---borderTop;
}
@media screen and (max-width: 767px) {
diff --git a/source/_patterns/03-areas/enterprise/_areas.scss b/source/_patterns/03-areas/enterprise/_areas.scss
index 570da4e135d..30ea0ad9de0 100644
--- a/source/_patterns/03-areas/enterprise/_areas.scss
+++ b/source/_patterns/03-areas/enterprise/_areas.scss
@@ -1,2 +1,2 @@
-@import "areas.variables";
-@import "../areas";
+@use "areas.variables";
+@use "../areas" as areas2;
diff --git a/source/css/_db-ui-core.variables.scss b/source/css/_db-ui-core.variables.scss
index 1c5d09e4180..5c90d17dc50 100644
--- a/source/css/_db-ui-core.variables.scss
+++ b/source/css/_db-ui-core.variables.scss
@@ -7,7 +7,7 @@ $icons-path: "../../icons/" !default;
$images-path: "../../images/" !default;
$fonts-path: "../../fonts/" !default;
-@import "@db-ui/base/build/scss/variables";
+@use "@db-ui/base/build/scss/variables";
// General configurations
$dbBaseFontSize: 16px;
diff --git a/source/css/_fonts.general.scss b/source/css/_fonts.general.scss
index 9ce26185388..6d1ded06ccf 100644
--- a/source/css/_fonts.general.scss
+++ b/source/css/_fonts.general.scss
@@ -2,11 +2,12 @@
SCSS placeholder for general font declarations
***** */
-@import "db-ui-core.variables";
+@use "db-ui-core.variables";
+@use "@db-ui/base/build/scss/variables";
%general-fonts {
- color: $db-color-cool-gray-700;
- font-family: $db-font-family-base;
+ color: variables.$db-color-cool-gray-700;
+ font-family: variables.$db-font-family-base;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
diff --git a/source/css/db-ui-core.general.scss b/source/css/db-ui-core.general.scss
index cc72d3bcbf7..129bdb4cdf1 100644
--- a/source/css/db-ui-core.general.scss
+++ b/source/css/db-ui-core.general.scss
@@ -2,10 +2,10 @@
This is mainly meant to get included within scoped components like e.g. within StencilJS Custom Components / DB UI Elements
***** */
-@import "db-ui-core.variables";
-@import "@csstools/normalize.css/normalize";
-@import "../_patterns/00-base/init";
-@import "fonts.general";
+@use "db-ui-core.variables";
+@use "@csstools/normalize.css/normalize";
+@use "../_patterns/00-base/init";
+@use "fonts.general";
/* TODO: We most likely need to rework this */
body,
diff --git a/source/css/db-ui-core.vars.scss b/source/css/db-ui-core.vars.scss
index 344e3c78333..a44d41dab98 100644
--- a/source/css/db-ui-core.vars.scss
+++ b/source/css/db-ui-core.vars.scss
@@ -10,15 +10,16 @@ $images-path: "../images/" !default;
$fonts-path: "../fonts/" !default;
// General variables by DB UI Base
-@import "@db-ui/base/build/css/variables";
+@use "@db-ui/base/build/css/variables";
-@import "../_patterns/00-base/colors/colors";
-@import "../_patterns/00-base/type/fonts";
-@import "../_patterns/00-base/icons/icons.variables";
-@import "../_patterns/00-base/icons/icons.font-faces";
+@use "../_patterns/00-base/colors/colors";
+@use "../_patterns/00-base/type/fonts";
+@use "../_patterns/00-base/icons/icons.variables";
+@use "../_patterns/00-base/icons/icons.font-faces" as icons2;
+@use "db-ui-core.variables";
:root {
// Overwriting the referenced SVG icons as this is going to get inlined and the path would be relative to the pages URL instead of the CSS, which would break
- --db-ic-search-24: url(#{$icons-path}functional/images/action/db_ic_search_24.svg);
- --db-ic-expand-more-20: url(#{$icons-path}functional/images/navigation/db_ic_expand_more_20.svg);
+ --db-ic-search-24: url(#{db-ui-core.$icons-path}functional/images/action/db_ic_search_24.svg);
+ --db-ic-expand-more-20: url(#{db-ui-core.$icons-path}functional/images/navigation/db_ic_expand_more_20.svg);
}
diff --git a/source/css/enterprise/_db-ui-core.variables.scss b/source/css/enterprise/_db-ui-core.variables.scss
index 6d4680bb121..fe16977b158 100644
--- a/source/css/enterprise/_db-ui-core.variables.scss
+++ b/source/css/enterprise/_db-ui-core.variables.scss
@@ -1,4 +1,4 @@
$domain: "enterprise";
-@import "../helpers/functions";
-@import "../../_patterns/00-base/colors/enterprise/colors.variables";
+@use "../helpers/functions";
+@use "../../_patterns/00-base/colors/enterprise/colors.variables";
diff --git a/source/css/enterprise/db-ui-core-include.scss b/source/css/enterprise/db-ui-core-include.scss
index 8018f87c7e2..e55ba8e51cc 100644
--- a/source/css/enterprise/db-ui-core-include.scss
+++ b/source/css/enterprise/db-ui-core-include.scss
@@ -1,3 +1,3 @@
// Deprecated: This file shouldn't get used / included anymore.
// Either `@import` the file `@db-ui/core/sources/css/rollup.assets-paths` or `@db-ui/core/sources/css/webpack.assets-paths` depending on your bundler, previous to `@import`ing e.g. the file `@db-ui/core/sources/css/enterprise/db-ui-core` directly from now on.
-@import "db-ui-core-webpack";
+@use "db-ui-core-webpack";
diff --git a/source/css/enterprise/db-ui-core-rollup.scss b/source/css/enterprise/db-ui-core-rollup.scss
index 51623c1f6c0..5e6986eef84 100644
--- a/source/css/enterprise/db-ui-core-rollup.scss
+++ b/source/css/enterprise/db-ui-core-rollup.scss
@@ -1,4 +1,4 @@
// Deprecated: This file shouldn't get used / included anymore.
// Either `@import` the file `@db-ui/core/sources/css/rollup.assets-paths`, previous to `@import`ing e.g. the file `@db-ui/core/sources/css/enterprise/db-ui-core` directly from now on.
-@import "../rollup.assets-paths";
-@import "db-ui-core";
+@use "../rollup.assets-paths";
+@use "db-ui-core";
diff --git a/source/css/enterprise/db-ui-core-webpack.scss b/source/css/enterprise/db-ui-core-webpack.scss
index 60e988de324..ecd53fdcb51 100644
--- a/source/css/enterprise/db-ui-core-webpack.scss
+++ b/source/css/enterprise/db-ui-core-webpack.scss
@@ -1,4 +1,4 @@
// Deprecated: This file shouldn't get used / included anymore.
// `@import` the file `@db-ui/core/sources/css/webpack.assets-paths`, previous to `@import`ing e.g. the file `@db-ui/core/sources/css/enterprise/db-ui-core` directly from now on.
-@import "../webpack.assets-paths";
-@import "db-ui-core";
+@use "../webpack.assets-paths";
+@use "db-ui-core";
diff --git a/source/css/enterprise/db-ui-core.demonstration.scss b/source/css/enterprise/db-ui-core.demonstration.scss
index 92bb1253b0d..455ec9b625a 100644
--- a/source/css/enterprise/db-ui-core.demonstration.scss
+++ b/source/css/enterprise/db-ui-core.demonstration.scss
@@ -1,26 +1,26 @@
@charset "utf-8";
-@import "../helpers/functions";
-@import "../../_patterns/00-base/helpers";
+@use "../helpers/functions";
+@use "../../_patterns/00-base/helpers";
-@import "db-ui-core.variables";
+@use "db-ui-core.variables";
-@import "../../_patterns/00-base/init.demonstration";
+@use "../../_patterns/00-base/init.demonstration";
-@import "../../_patterns/00-base/icons/icons.demonstration";
+@use "../../_patterns/00-base/icons/icons.demonstration";
-@import "../../_patterns/01-elements/checkbox/enterprise/checkbox.demonstration";
-@import "../../_patterns/01-elements/progress/enterprise/progress.demonstration";
-@import "../../_patterns/01-elements/input/input.demonstration";
-@import "../../_patterns/01-elements/logo/logo.demonstration";
-@import "../../_patterns/01-elements/textarea/textarea.demonstration";
-@import "../../_patterns/01-elements/radio/enterprise/radio.demonstration";
-@import "../../_patterns/01-elements/select/select.demonstration";
-@import "../../_patterns/01-elements/tags/enterprise/tag.demonstration";
-@import "../../_patterns/00-base/type/enterprise/fonts.demonstration";
-@import "../../_patterns/02-components/dropdown/dropdown.demonstration";
-@import "../../_patterns/02-components/metanavigation/enterprise/metanavigation.demonstration";
-@import "../../_patterns/02-components/overflow-menu/overflow-menu.demonstration";
-@import "../../_patterns/02-components/table/enterprise/table.demonstration";
-@import "../../_patterns/03-areas/02-grid/enterprise/grid.demonstration";
-@import "../../_patterns/04-pages/enterprise/intro.demonstration";
+@use "../../_patterns/01-elements/checkbox/enterprise/checkbox.demonstration";
+@use "../../_patterns/01-elements/progress/enterprise/progress.demonstration";
+@use "../../_patterns/01-elements/input/input.demonstration";
+@use "../../_patterns/01-elements/logo/logo.demonstration";
+@use "../../_patterns/01-elements/textarea/textarea.demonstration";
+@use "../../_patterns/01-elements/radio/enterprise/radio.demonstration";
+@use "../../_patterns/01-elements/select/select.demonstration";
+@use "../../_patterns/01-elements/tags/enterprise/tag.demonstration";
+@use "../../_patterns/00-base/type/enterprise/fonts.demonstration";
+@use "../../_patterns/02-components/dropdown/dropdown.demonstration";
+@use "../../_patterns/02-components/metanavigation/enterprise/metanavigation.demonstration";
+@use "../../_patterns/02-components/overflow-menu/overflow-menu.demonstration";
+@use "../../_patterns/02-components/table/enterprise/table.demonstration";
+@use "../../_patterns/03-areas/02-grid/enterprise/grid.demonstration";
+@use "../../_patterns/04-pages/enterprise/intro.demonstration";
diff --git a/source/css/enterprise/db-ui-core.general.scss b/source/css/enterprise/db-ui-core.general.scss
index 758632ec17d..ab3a87594af 100644
--- a/source/css/enterprise/db-ui-core.general.scss
+++ b/source/css/enterprise/db-ui-core.general.scss
@@ -1,2 +1,2 @@
-@import "db-ui-core.variables";
-@import "../db-ui-core.general";
+@use "db-ui-core.variables";
+@use "../db-ui-core.general" as db-ui-core2;
diff --git a/source/css/enterprise/db-ui-core.scss b/source/css/enterprise/db-ui-core.scss
index ab5aaddb22e..ce2fd52d9b3 100644
--- a/source/css/enterprise/db-ui-core.scss
+++ b/source/css/enterprise/db-ui-core.scss
@@ -6,100 +6,100 @@ $partial: false;
// TODO: Let's include normalize e.g. via postcss-normalize
@use "@csstools/normalize.css/normalize.css";
-@import "../helpers/functions";
-@import "../../_patterns/00-base/helpers";
+@use "../helpers/functions";
+@use "../../_patterns/00-base/helpers";
-@import "db-ui-core.variables";
+@use "db-ui-core.variables";
-@import "../../_patterns/00-base/init.global";
-@import "../../_patterns/00-base/init";
+@use "../../_patterns/00-base/init.global";
+@use "../../_patterns/00-base/init" as init2;
// Importing helpers
-@import "../helpers/a11y";
-@import "../helpers/clearfix";
+@use "../helpers/a11y";
+@use "../helpers/clearfix";
// GENERAL
-@import "../../_patterns/00-base/type/enterprise/fonts";
-@import "../../_patterns/00-base/icons/enterprise/icons";
+@use "../../_patterns/00-base/type/enterprise/fonts";
+@use "../../_patterns/00-base/icons/enterprise/icons";
// @import "../../_patterns/00-base/03-body/background";
// ELEMENTS
/* button */
-@import "../../_patterns/01-elements/buttons/enterprise/button";
+@use "../../_patterns/01-elements/buttons/enterprise/button";
/* headline */
-@import "../../_patterns/01-elements/headline/enterprise/headline";
+@use "../../_patterns/01-elements/headline/enterprise/headline";
/* link */
-@import "../../_patterns/01-elements/link/enterprise/link";
+@use "../../_patterns/01-elements/link/enterprise/link";
/* image */
-@import "../../_patterns/01-elements/image/enterprise/image";
+@use "../../_patterns/01-elements/image/enterprise/image";
/* logo */
-@import "../../_patterns/01-elements/logo/logo"; // /enterprise/logo
+@use "../../_patterns/01-elements/logo/logo"; // /enterprise/logo
/* checkbox */
-@import "../../_patterns/01-elements/checkbox/enterprise/checkbox";
+@use "../../_patterns/01-elements/checkbox/enterprise/checkbox";
/* input */
-@import "../../_patterns/01-elements/input/enterprise/input";
+@use "../../_patterns/01-elements/input/enterprise/input";
/* loading */
-@import "../../_patterns/01-elements/loading-indicator/loading-indicator";
+@use "../../_patterns/01-elements/loading-indicator/loading-indicator";
/* progress */
-@import "../../_patterns/01-elements/progress/enterprise/progress";
+@use "../../_patterns/01-elements/progress/enterprise/progress";
/* radio */
-@import "../../_patterns/01-elements/radio/enterprise/radio";
+@use "../../_patterns/01-elements/radio/enterprise/radio";
/* textarea */
-@import "../../_patterns/01-elements/textarea/enterprise/textarea";
+@use "../../_patterns/01-elements/textarea/enterprise/textarea";
/* select */
-@import "../../_patterns/01-elements/select/enterprise/select";
+@use "../../_patterns/01-elements/select/enterprise/select";
/* chip */
-@import "../../_patterns/01-elements/chips/enterprise/chip";
+@use "../../_patterns/01-elements/chips/enterprise/chip";
/* tag */
-@import "../../_patterns/01-elements/tags/enterprise/tag";
+@use "../../_patterns/01-elements/tags/enterprise/tag";
/* toggle */
-@import "../../_patterns/01-elements/toggle/enterprise/toggle";
+@use "../../_patterns/01-elements/toggle/enterprise/toggle";
/* youtube */
-@import "../../_patterns/01-elements/video/enterprise/youtube";
+@use "../../_patterns/01-elements/video/enterprise/youtube";
// COMPONENTS
/* breadcrumb */
-@import "../../_patterns/02-components/breadcrumb/enterprise/breadcrumb";
+@use "../../_patterns/02-components/breadcrumb/enterprise/breadcrumb";
/* cards */
-@import "../../_patterns/02-components/cards/enterprise/cards";
+@use "../../_patterns/02-components/cards/enterprise/cards";
/* accordion */
-@import "../../_patterns/02-components/accordion/enterprise/accordion";
+@use "../../_patterns/02-components/accordion/enterprise/accordion";
/* overflow-menu */
/* ### this one is already included through the dropdown component that it extends */
// @import "../../_patterns/02-components/overflow-menu/enterprise/overflow-menu";
/* mainnavigation */
-@import "../../_patterns/02-components/mainnavigation/enterprise/mainnavigation";
+@use "../../_patterns/02-components/mainnavigation/enterprise/mainnavigation";
/* metanavigation */
-@import "../../_patterns/02-components/metanavigation/enterprise/metanavigation";
+@use "../../_patterns/02-components/metanavigation/enterprise/metanavigation";
/* brand */
-@import "../../_patterns/02-components/brand/enterprise/brand";
+@use "../../_patterns/02-components/brand/enterprise/brand";
/* sitesearch */
-@import "../../_patterns/02-components/sitesearch/enterprise/sitesearch";
+@use "../../_patterns/02-components/sitesearch/enterprise/sitesearch";
/* notification */
-@import "../../_patterns/02-components/notifications/enterprise/notification";
+@use "../../_patterns/02-components/notifications/enterprise/notification";
/* dialog */
-@import "../../_patterns/02-components/dialog/enterprise/dialog";
+@use "../../_patterns/02-components/dialog/enterprise/dialog";
/* language-switcher */
-@import "../../_patterns/02-components/language-switcher/enterprise/language-switcher";
+@use "../../_patterns/02-components/language-switcher/enterprise/language-switcher";
/* pagination */
-@import "../../_patterns/02-components/pagination/enterprise/pagination";
+@use "../../_patterns/02-components/pagination/enterprise/pagination";
/* sidenavi */
-@import "../../_patterns/02-components/sidenavi/enterprise/sidenavi";
+@use "../../_patterns/02-components/sidenavi/enterprise/sidenavi";
/* tab-bar */
-@import "../../_patterns/02-components/tab-bar/enterprise/tab-bar";
+@use "../../_patterns/02-components/tab-bar/enterprise/tab-bar";
/* table */
-@import "../../_patterns/02-components/table/enterprise/table";
+@use "../../_patterns/02-components/table/enterprise/table";
/* link-list */
-@import "../../_patterns/02-components/link-list/enterprise/link-list";
+@use "../../_patterns/02-components/link-list/enterprise/link-list";
/* dropdown */
-@import "../../_patterns/02-components/dropdown/enterprise/dropdown";
+@use "../../_patterns/02-components/dropdown/enterprise/dropdown";
// AREAS
-@import "../../_patterns/03-areas/enterprise/areas";
-@import "../../_patterns/03-areas/00-header/enterprise/header";
-@import "../../_patterns/03-areas/00-header/enterprise/meta";
-@import "../../_patterns/03-areas/01-main/enterprise/main";
-@import "../../_patterns/03-areas/02-grid/enterprise/grid";
-@import "../../_patterns/03-areas/03-footer/enterprise/footer";
+@use "../../_patterns/03-areas/enterprise/areas";
+@use "../../_patterns/03-areas/00-header/enterprise/header";
+@use "../../_patterns/03-areas/00-header/enterprise/meta";
+@use "../../_patterns/03-areas/01-main/enterprise/main";
+@use "../../_patterns/03-areas/02-grid/enterprise/grid";
+@use "../../_patterns/03-areas/03-footer/enterprise/footer";
diff --git a/source/css/enterprise/db-ui-core.vars.scss b/source/css/enterprise/db-ui-core.vars.scss
index 46b26fd6797..3d9836f5aba 100644
--- a/source/css/enterprise/db-ui-core.vars.scss
+++ b/source/css/enterprise/db-ui-core.vars.scss
@@ -3,10 +3,10 @@ $icons-path: "../../icons/" !default;
$images-path: "../../images/" !default;
$fonts-path: "../../fonts/" !default;
-@import "@db-ui/base/build/scss/variables";
+@use "@db-ui/base/build/scss/variables";
-@import "../../_patterns/00-base/colors/enterprise/colors";
-@import "../../_patterns/00-base/type/enterprise/fonts";
-@import "../../_patterns/00-base/icons/enterprise/icons.variables";
-@import "../../_patterns/00-base/icons/enterprise/icons.font-faces";
-@import "../db-ui-core.vars";
+@use "../../_patterns/00-base/colors/enterprise/colors";
+@use "../../_patterns/00-base/type/enterprise/fonts";
+@use "../../_patterns/00-base/icons/enterprise/icons.variables";
+@use "../../_patterns/00-base/icons/enterprise/icons.font-faces" as icons2;
+@use "../db-ui-core.vars";
diff --git a/source/css/helpers/_functions.scss b/source/css/helpers/_functions.scss
index a1f62422891..b5be394a4eb 100644
--- a/source/css/helpers/_functions.scss
+++ b/source/css/helpers/_functions.scss
@@ -1,10 +1,10 @@
-@import "../db-ui-core.variables";
+@use "../db-ui-core.variables";
@function to-rem($pxValue) {
- @return #{$pxValue * $dbBaseFontSizeSass}rem;
+ @return #{$pxValue * db-ui-core.$dbBaseFontSizeSass}rem;
}
@function to-em($pxValue) {
- @return #{$pxValue * $dbBaseFontSizeSass}em;
+ @return #{$pxValue * db-ui-core.$dbBaseFontSizeSass}em;
}
// Mixin wrappers around the SCSS placeholders
diff --git a/source/css/pattern-scaffolding-project-specific.scss b/source/css/pattern-scaffolding-project-specific.scss
index 598ac9ae0a9..01657ec0b2b 100644
--- a/source/css/pattern-scaffolding-project-specific.scss
+++ b/source/css/pattern-scaffolding-project-specific.scss
@@ -1,18 +1,18 @@
-@import "helpers/functions";
-@import "db-ui-core.variables";
-@import "@db-ui/base/build/scss/variables";
-@import "../_patterns/01-elements/headline/headline";
-$fonts-path: "../fonts/";
-@import "../_patterns/00-base/type/fonts";
+@use "helpers/functions";
+@use "db-ui-core.variables";
+@use "@db-ui/base/build/scss/variables";
+@use "../_patterns/01-elements/headline/headline";
+db-ui-core.$fonts-path: "../fonts/";
+@use "../_patterns/00-base/type/fonts";
/* project specific declarations */
body,
[class|="pl"] {
- font-family: $db-font-family-base;
+ font-family: variables.$db-font-family-base;
}
pl-header {
- font-size: to-rem($pxValue: 15.49191);
+ font-size: functions.to-rem($pxValue: 15.49191);
}
pl-logo {
@@ -21,7 +21,7 @@ pl-logo {
.pl-c-viewport-modal-wrapper,
pl-iframe {
- background-color: $db-color-cool-gray-100 !important; // shame.css
+ background-color: variables.$db-color-cool-gray-100 !important; // shame.css
}
// Intro page
@@ -34,7 +34,7 @@ pl-iframe {
// Splitted Intro Page
&:nth-of-type(2) {
- background-color: $db-color-cool-gray-100;
+ background-color: variables.$db-color-cool-gray-100;
padding-bottom: 2.5rem;
}
}
@@ -49,7 +49,7 @@ pl-iframe {
}
blockquote {
- font-size: to-rem($pxValue: 24);
+ font-size: functions.to-rem($pxValue: 24);
font-weight: 700;
&::before {
@@ -75,8 +75,8 @@ pl-iframe {
.tpl-intro [src^="../../images/db-ui-"] {
float: left;
- margin-right: to-rem($pxValue: 4);
- margin-top: to-rem($pxValue: 21);
+ margin-right: functions.to-rem($pxValue: 4);
+ margin-top: functions.to-rem($pxValue: 21);
}
.pl-c-typeahead__input {
diff --git a/source/pattern-template/_pattern-template.scss b/source/pattern-template/_pattern-template.scss
index 83e0eb461b1..7e09ae81237 100644
--- a/source/pattern-template/_pattern-template.scss
+++ b/source/pattern-template/_pattern-template.scss
@@ -1,4 +1,4 @@
-@import "pattern.variables";
+@use "pattern.variables";
.type-pattern {