diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 0586a3eb71..03d16957a8 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -118,12 +118,31 @@ It will copy on *npm build* the content of *core/dist* folder to *dist* folder i 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: [source,scss] ---- -@import "@db-ui/core/sources/css/webpack.assets-paths"; -@import "@db-ui/core/sources/css/enterprise/db-ui-core"; +@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 +); +---- + +#### 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 +); ---- Please keep in mind, that you would need to set your include path within the `angular.json` configuration file, like this: @@ -155,16 +174,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: diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc index cdcc192c71..d016c19a36 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 0576562c88..f01432840d 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 b5b2928440..2ea8dce88a 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 4c1ceaaf64..611be5bcc5 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 6ce2535f68..ebb808752b 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 4b58c9c7c0..ba4684ffd6 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 80f0f2f47b..31ce0f18c4 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 0bda992dc8..c077112975 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 dc870e004e..9cf9bffe4a 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 90291fa650..71bb4dc3eb 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 1db0240ed5..54fa6239c5 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 ea6e6ed2a0..b715296462 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 f1a7b2910f..76c82d1beb 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 2e29561e52..da7119fc09 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 0536f3aaaa..69aaa4b621 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 b59d43f710..e58bcadf69 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 87622f8958..95301f5f4e 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 f80acea386..a8a2b5fcab 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 3bad30ec6c..9912756464 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 8f93fe9c52..7eb5dc21cb 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 a2367238b5..1dc7470c74 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 8cb4c8ae2a..a38d4973a1 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 c1ebecd7a4..acd08d0c3e 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 8609216073..1001bf97e6 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 f32adb514c..625acff389 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 87a954ba25..440d4a6ae0 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 ef740bef50..2702104ec2 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 4737cf5fd1..f30ea8daaa 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 98d1f93207..8f5449cf01 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 a6b9a8ff6e..51651efa3a 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 b06098d43a..6322e573c2 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 6afdcbf9b1..29a62bc495 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 68824506b1..2d27e31c35 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 cfb2ecf986..c45ace36f8 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 2ea2f9e7a5..a666d55acb 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 ca89f96d39..adda4adbca 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 21c0a2e807..60cabfeec2 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 87ca6d035e..62da29ec61 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 fa14522f78..3a3508708d 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 e88560c4c8..f50718ba9c 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 4306a8d6e2..6a5660e759 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 da54734dda..d8d7119761 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 27a0c2c9bd..93cfea261a 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 4abba98267..2f5eafd9b7 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 3d3389c17a..141fb2fb86 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 58bf95bdc9..e75242f0ef 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 a6735e94eb..fa931e69ea 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 c1689c6d4f..159d593334 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 d0f763344d..9c182c6026 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 f559b9f0d0..3df3646a95 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 0f98e22e83..74296b365c 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 b06098d43a..6322e573c2 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 8cc8908a28..ebadeb9fc2 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 1e5f87cfe8..bf893cd282 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 9d624928e8..783141a91c 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 c3aa4ad106..bdcb47167c 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 f80acea386..a8a2b5fcab 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 b9a7c10413..ef0b5cb39e 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 66f1fe9fd9..080ee6102b 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 8dce7c9e35..90a578444f 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 89c2dd37e7..fdd0b16a97 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 716d3ee3b9..f62b3428dc 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 0d57339100..c014230f00 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 5ffc56c48a..710b435fe9 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 24ad869b97..979ee0ff5c 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 4737cf5fd1..f30ea8daaa 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 46656395f3..8454279907 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 9271b34673..f46826c9c5 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 c9a8a1e292..cc755ed5e2 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 f80acea386..a8a2b5fcab 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 bdbad2954f..4f8e3b7421 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 2b77469448..e2b608473a 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 a7ecea4b3b..3d2bc8b776 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 f80acea386..a8a2b5fcab 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 0549054985..7427eb1c6f 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 a325a62982..9dafe2b460 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 e117104caf..4baba6afd5 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 2e0f386a4f..ccef45c320 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 4b02b27f78..dc49094384 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 6f0bb4d708..12adff8cf6 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 9610a7f7c1..423e0b05d0 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 825b26d266..60e3001ea7 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 7478911d24..c5c850b208 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 ed9697cc24..8c89dae9e5 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 4970f7f3b9..3d38e2c8e9 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 f306ddfde5..a6a99c76bb 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 da54734dda..d8d7119761 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 e7f8b22c40..0375c0b26e 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 a6735e94eb..fa931e69ea 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 e5600ff9a9..3a8f52b022 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 22fb513a6b..44df8d0163 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 b06098d43a..6322e573c2 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 ea4c5e4fe0..21d5417bc4 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 51ab840b37..4e71e4e457 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 ac2de68d36..547837768a 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 006a72949d..d9f4aa5e40 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 da54734dda..d8d7119761 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 a9bd1d5ab7..f632b000fe 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 f78f84a3de..1f9d12593d 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 1079addd53..6c68c314ce 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 5afd5d0712..739def07c3 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 7420e593d6..10d2645362 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 fd4fa649e4..8159256268 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 2a2b5b07c5..6474db8b67 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 cad8ce7ee5..d860fa7ce6 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 684dcb59eb..f2741ac320 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 f78f84a3de..1f9d12593d 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 da54734dda..d8d7119761 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 710299d0cf..29ba30bffc 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 b19dd1eb9f..c32ad0c5d8 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 82e1065876..3575ce9d79 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 5afd5d0712..739def07c3 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 b3c1150a7b..2ccb374437 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 54ae1d54af..8fc187d88b 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 f78f84a3de..1f9d12593d 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 08f2cd670b..726e1aa8c5 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 5afd5d0712..739def07c3 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 ace99abffc..aa89cc378d 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 fa13f67ff4..914f193aa7 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 9dfdd14214..b94c3f09c3 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 f80acea386..a8a2b5fcab 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 c49222667d..d2ead40c29 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 66d8aacd14..88ed57de03 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 4e264102e1..e1b2419bf7 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 5afd5d0712..739def07c3 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 7ade20bacb..22b1c76afc 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 775533a4dc..ef415e8a31 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 f78f84a3de..1f9d12593d 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 da54734dda..d8d7119761 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 e106249eaa..2d08a400cd 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 2a7447e0b0..0fae55ce36 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 e2b8c7b732..bea813e1bb 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 bc030c9f8a..5dfd354ea9 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 1efcd5778b..a994230059 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 357374f6ef..e9827b8a96 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 b221fb2d98..9bd1458be7 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 5afd5d0712..739def07c3 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 c5c9c797b0..2d49feae02 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 b8877d16be..693d77d5d4 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 1eb7fb3604..3dbb9bcf26 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 3dfa490e4b..74e494abf0 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 174e86e656..c89f2cb295 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 6aa2942e5c..51a698b2af 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 db7f28d9e7..29ec0f1fe9 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 3b790d4303..6d47d50fb6 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 3dfa490e4b..74e494abf0 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 460aaa3fb9..146cff409e 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 82af0d957f..c2a8fb2f8f 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 756924f933..f679e528f0 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 54226d99e9..1403700e7b 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 f80acea386..a8a2b5fcab 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 d0e26884c2..a4eb432f73 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 8b6b150291..48049224fc 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 dee30d8436..15e9196ea3 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 da6272c401..91f22b0cf3 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 3994f40810..d1b5795da6 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 77827af1f5..a2fa45bc3c 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 0d620e1a7b..007e13bf58 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 2b61382de0..c1632e33ab 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 e0c6b5de8f..68615e64b6 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 b06098d43a..6322e573c2 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 6db40470dc..1d36864012 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 d23e9ff679..1906665160 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 570da4e135..30ea0ad9de 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 1c5d09e418..5c90d17dc5 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 9ce2618538..6d1ded06cc 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 cc72d3bcbf..129bdb4cdf 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 344e3c7833..a44d41dab9 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 6d4680bb12..fe16977b15 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 8018f87c7e..e55ba8e51c 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 51623c1f6c..5e6986eef8 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 60e988de32..ecd53fdcb5 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 92bb1253b0..455ec9b625 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 758632ec17..ab3a87594a 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 ab5aaddb22..ce2fd52d9b 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 46b26fd679..3d9836f5ab 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 a1f6242289..b5be394a4e 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 598ac9ae0a..01657ec0b2 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 83e0eb461b..7e09ae8123 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 {