From 9597ae73788287a4b3974bf8a92025058f028570 Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 15 Nov 2022 11:07:24 +0100 Subject: [PATCH 1/5] feat: add icons.scss from core and fixed issues with import --- package-lock.json | 13 + package.json | 3 + scripts/color-classes-generator.js | 2 +- scripts/color-placeholders-generator.js | 2 +- scripts/scss-scaling-generator.js | 4 +- scripts/scss-typography-generator.js | 4 +- scss/_default.assets-paths.scss | 3 + scss/_font-faces.scss | 19 +- scss/_typescale.scss | 7 +- scss/db-ui-base.scss | 10 +- scss/helpers/_a11y.scss | 8 + scss/helpers/_clearfix.scss | 5 + scss/helpers/_functions.scss | 36 ++ scss/{ => icon}/_icon-family-calc.scss | 0 scss/icon/_icons.attributes-mappings.scss | 14 + scss/icon/_icons.custom-properties.scss | 35 ++ scss/icon/_icons.font-faces.scss | 36 ++ scss/icon/_icons.helpers.scss | 100 +++++ scss/icon/_icons.placeholder.scss | 47 +++ scss/icon/_icons.variables.scss | 442 ++++++++++++++++++++++ scss/icon/icons.scss | 35 ++ tokens/font.jsonc | 16 +- 22 files changed, 812 insertions(+), 29 deletions(-) create mode 100644 scss/_default.assets-paths.scss create mode 100644 scss/helpers/_a11y.scss create mode 100644 scss/helpers/_clearfix.scss create mode 100644 scss/helpers/_functions.scss rename scss/{ => icon}/_icon-family-calc.scss (100%) create mode 100644 scss/icon/_icons.attributes-mappings.scss create mode 100644 scss/icon/_icons.custom-properties.scss create mode 100644 scss/icon/_icons.font-faces.scss create mode 100644 scss/icon/_icons.helpers.scss create mode 100644 scss/icon/_icons.placeholder.scss create mode 100644 scss/icon/_icons.variables.scss create mode 100644 scss/icon/icons.scss diff --git a/package-lock.json b/package-lock.json index 2cd0b73c9..92fabf6ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "@db-ui/base", "version": "0.0.0", "license": "Apache-2.0", + "dependencies": { + "@csstools/normalize.css": "^12.0.0" + }, "devDependencies": { "@commitlint/cli": "17.2.0", "@commitlint/config-conventional": "17.2.0", @@ -407,6 +410,11 @@ "node": ">=12" } }, + "node_modules/@csstools/normalize.css": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz", + "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==" + }, "node_modules/@csstools/selector-specificity": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", @@ -12029,6 +12037,11 @@ "@jridgewell/trace-mapping": "0.3.9" } }, + "@csstools/normalize.css": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz", + "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==" + }, "@csstools/selector-specificity": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", diff --git a/package.json b/package.json index 54f0377e3..07a8259e8 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,9 @@ "zeplin:tokens": "node scripts/zeplin-styleguide.js" }, "license": "Apache-2.0", + "dependencies": { + "@csstools/normalize.css": "^12.0.0" + }, "devDependencies": { "@commitlint/cli": "17.2.0", "@commitlint/config-conventional": "17.2.0", diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js index d7cf58b9a..d46240758 100644 --- a/scripts/color-classes-generator.js +++ b/scripts/color-classes-generator.js @@ -35,7 +35,7 @@ const generateBGVariants = (value, index) => { * @returns scss string */ exports.generateColorUtilitityClasses = (colorToken) => { - let output = '@import "variables";\n@import "color-placeholder";\n'; + let output = '@use "variables" as *;\n@use "color-placeholder" as *;\n'; for (const [, value] of Object.keys(colorToken).entries()) { output += `/** diff --git a/scripts/color-placeholders-generator.js b/scripts/color-placeholders-generator.js index 46caf5000..eb444a0cd 100644 --- a/scripts/color-placeholders-generator.js +++ b/scripts/color-placeholders-generator.js @@ -86,7 +86,7 @@ const generateBGVariants = ( * @returns scss string */ exports.generateColorUtilitityPlaceholder = (colorToken) => { - let output = ''; + let output = '@use "variables" as *;\n'; for (const [, value] of Object.keys(colorToken).entries()) { output += `/** diff --git a/scripts/scss-scaling-generator.js b/scripts/scss-scaling-generator.js index de186a056..1438bc097 100644 --- a/scripts/scss-scaling-generator.js +++ b/scripts/scss-scaling-generator.js @@ -1,5 +1,5 @@ const fileHeader = - '\n' + + '@use "variables" as *;\n' + '// Do not edit directly\n' + '// Generated on ' + new Date().toString() + @@ -9,7 +9,7 @@ const generateSpacings = (utility) => { let allClasses = fileHeader; if (utility) { - allClasses += `@import "variables";\n@import "scaling-placeholder";\n`; + allClasses += `@use "scaling-placeholder" as *;\n`; } const scaleTypeKey = ['normal', 'functional', 'expressive']; diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js index 12a4f670c..c9bf96b63 100644 --- a/scripts/scss-typography-generator.js +++ b/scripts/scss-typography-generator.js @@ -1,7 +1,7 @@ const prefix = 'db'; const fileHeader = - '@import "icon-family-calc";\n' + + '@use "variables" as *;\n@use "icon/icon-family-calc" as *;\n' + '// Do not edit directly\n' + '// Generated on ' + new Date().toString() + @@ -112,7 +112,7 @@ const generateClasses = (typography, utility) => { let allClasses = fileHeader; if (utility) { - allClasses += `@import "variables";\n@import "typography-placeholder";\n`; + allClasses += `@use "variables" as *;\n@use "typography-placeholder" as *;\n`; } // ScaleTypeKey = [normal, functional, expressive] diff --git a/scss/_default.assets-paths.scss b/scss/_default.assets-paths.scss new file mode 100644 index 000000000..83869cdfd --- /dev/null +++ b/scss/_default.assets-paths.scss @@ -0,0 +1,3 @@ +$icons-path: "assets/icons/"; +$images-path: "assets/images/"; +$fonts-path: "assets/fonts/"; diff --git a/scss/_font-faces.scss b/scss/_font-faces.scss index aff35cf78..dac60fe63 100644 --- a/scss/_font-faces.scss +++ b/scss/_font-faces.scss @@ -1,10 +1,13 @@ +@use "variables" as *; +@use "default.assets-paths" as *; + @font-face { font-family: $db-font-db-screenhead-light-font-family; font-style: normal; font-weight: $db-font-db-screenhead-light-font-weight; src: local($db-font-db-screenhead-light-name), - url($db-font-db-screenhead-light-woff2) format("woff2"), - url($db-font-db-screenhead-light-woff) format("woff"); + url($fonts-path + $db-font-db-screenhead-light-woff2) format("woff2"), + url($fonts-path + $db-font-db-screenhead-light-woff) format("woff"); } @font-face { @@ -12,8 +15,8 @@ font-style: normal; font-weight: $db-font-db-screenhead-black-font-weight; src: local($db-font-db-screenhead-black-name), - url($db-font-db-screenhead-black-woff2) format("woff2"), - url($db-font-db-screenhead-black-woff) format("woff"); + url($fonts-path + $db-font-db-screenhead-black-woff2) format("woff2"), + url($fonts-path + $db-font-db-screenhead-black-woff) format("woff"); } @font-face { @@ -21,8 +24,8 @@ font-style: normal; font-weight: $db-font-db-screensans-regular-font-weight; src: local($db-font-db-screensans-regular-name), - url($db-font-db-screensans-regular-woff2) format("woff2"), - url($db-font-db-screensans-regular-woff) format("woff"); + url($fonts-path + $db-font-db-screensans-regular-woff2) format("woff2"), + url($fonts-path + $db-font-db-screensans-regular-woff) format("woff"); } @font-face { @@ -30,6 +33,6 @@ font-style: normal; font-weight: $db-font-db-screensans-bold-font-weight; src: local($db-font-db-screensans-bold-name), - url($db-font-db-screensans-bold-woff2) format("woff2"), - url($db-font-db-screensans-bold-woff) format("woff"); + url($fonts-path + $db-font-db-screensans-bold-woff2) format("woff2"), + url($fonts-path + $db-font-db-screensans-bold-woff) format("woff"); } diff --git a/scss/_typescale.scss b/scss/_typescale.scss index 3dadb7d45..fc0fb36da 100644 --- a/scss/_typescale.scss +++ b/scss/_typescale.scss @@ -1,6 +1,7 @@ -@import "font-faces"; -@import "typography-placeholder"; -@import "scaling-placeholder"; +@use "variables" as *; +@use "font-faces" as *; +@use "typography-placeholder" as *; +@use "scaling-placeholder" as *; :root { font-family: $db-font-family-sans; diff --git a/scss/db-ui-base.scss b/scss/db-ui-base.scss index b4fca29e0..ba31e49c0 100644 --- a/scss/db-ui-base.scss +++ b/scss/db-ui-base.scss @@ -1,7 +1,9 @@ -@import "variables"; -@import "variables.global"; -@import "color-placeholder"; -@import "typescale"; +@use "@csstools/normalize.css/normalize.css"; + +@use "variables" as *; +@use "variables.global" as *; +@use "color-placeholder" as *; +@use "typescale" as *; :root { @extend %db-ui-normal; diff --git a/scss/helpers/_a11y.scss b/scss/helpers/_a11y.scss new file mode 100644 index 000000000..821df040f --- /dev/null +++ b/scss/helpers/_a11y.scss @@ -0,0 +1,8 @@ +%a11y-visually-hidden { + clip: rect(0, 0, 0, 0); + height: 1px; + overflow: hidden; + position: absolute !important; + white-space: nowrap; + width: 1px; +} diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss new file mode 100644 index 000000000..e64c6843f --- /dev/null +++ b/scss/helpers/_clearfix.scss @@ -0,0 +1,5 @@ +%clearfix::after { + clear: both; + content: " "; + display: table; +} diff --git a/scss/helpers/_functions.scss b/scss/helpers/_functions.scss new file mode 100644 index 000000000..909731005 --- /dev/null +++ b/scss/helpers/_functions.scss @@ -0,0 +1,36 @@ +@use "sass:math"; +@use "a11y" as *; +@use "clearfix" as *; + +@function to-rem($pxValue) { + @return #{$pxValue * 0.0625}rem; +} + +@function to-em($pxValue) { + @return #{$pxValue * 0.0625}em; +} + +// Mixin wrappers around the SCSS placeholders +@mixin a11y-visually-hidden($partial: false) { + @if $partial { + clip: rect(0, 0, 0, 0); + height: 1px; + overflow: hidden; + position: absolute !important; + white-space: nowrap; + width: 1px; + } @else { + @extend %a11y-visually-hidden; + } +} +@mixin clearfix($partial: false) { + @if $partial { + &::after { + clear: both; + content: " "; + display: table; + } + } @else { + @extend %clearfix; + } +} diff --git a/scss/_icon-family-calc.scss b/scss/icon/_icon-family-calc.scss similarity index 100% rename from scss/_icon-family-calc.scss rename to scss/icon/_icon-family-calc.scss diff --git a/scss/icon/_icons.attributes-mappings.scss b/scss/icon/_icons.attributes-mappings.scss new file mode 100644 index 000000000..2a0f5d15e --- /dev/null +++ b/scss/icon/_icons.attributes-mappings.scss @@ -0,0 +1,14 @@ +@use "icons.variables" as *; + +// *** Attribute based method *** +@each $icon-name, $icon-glyph in $icon-glyphs { + [data-icon="#{$icon-name}"], + [data-icon-before="#{$icon-name}"] { + &::before { + --icon-glyph: "#{$icon-glyph}"; + } + } + [data-icon-after="#{$icon-name}"]::after { + --icon-glyph: "#{$icon-glyph}"; + } +} diff --git a/scss/icon/_icons.custom-properties.scss b/scss/icon/_icons.custom-properties.scss new file mode 100644 index 000000000..d5bd589a4 --- /dev/null +++ b/scss/icon/_icons.custom-properties.scss @@ -0,0 +1,35 @@ +@use "icons.variables" as *; +@use "icons.helpers" as *; +@use "icons.placeholder" as *; + +// 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]), +[data-icon-before]:not([data-icon-variant-before]) { + &::before { + @extend %default-icon-custom-properties !optional; + } +} + +[data-icon-after]:not([data-icon-variant-after]) { + &::after { + @extend %default-icon-custom-properties !optional; + } +} + +// DB UX Icons +@each $icon-style, $icon-sizes in $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], + &[data-icon-before] { + @include icon-meta($icon-size, $icon-style); + } + } + [data-icon-variant-after="#{$icon-size}-#{$icon-style}"] { + &[data-icon-after] { + @include icon-meta($icon-size, $icon-style, "after"); + } + } + } +} diff --git a/scss/icon/_icons.font-faces.scss b/scss/icon/_icons.font-faces.scss new file mode 100644 index 000000000..9a6eb24f6 --- /dev/null +++ b/scss/icon/_icons.font-faces.scss @@ -0,0 +1,36 @@ +@use "icons.variables" as *; +@use "../default.assets-paths" as *; + +// Potential TODO: usage of the standard filenames described by https://marketingportal.extranet.deutschebahn.com/de/icons-2 + +@font-face { + font-display: block; + font-family: "missing-icons"; + src: url("#{$icons-path}functional/fonts/icons-empty.woff2?4r2095") + format("woff2"), + url("#{$icons-path}functional/fonts/icons-empty.woff?4r2095") + format("woff"); +} + +// DB UX Icons +@each $icon-style, $icon-sizes in $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; + + font-display: block; + + font-family: $icon-font-family; + font-style: normal; + font-weight: normal; + src: url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff2?4r2095") + format("woff2"), + url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2095") + format("woff"); + + unicode-range: unquote($icon-font-unicodes); + } + } + } +} diff --git a/scss/icon/_icons.helpers.scss b/scss/icon/_icons.helpers.scss new file mode 100644 index 000000000..e38b3d59d --- /dev/null +++ b/scss/icon/_icons.helpers.scss @@ -0,0 +1,100 @@ +@use "../helpers/functions" as *; +@use "icons.variables" as *; + +// Icon SCSS mixin +@mixin icon( + $glyph: "", + $size: $icon-size, + $style: $icon-style, + $position: "before", + $partial: false +) { + &::#{$position} { + --icon-font-family: "#{"icons-" + $size + "-" + $style}", + "missing-icons"; + --icon-font-size: #{to-rem($pxValue: $size)}; + + @if $position == "before" { + margin-inline-end: var(--icon-margin-after, #{$icon-content-space}); + } + @if $position == "after" { + margin-inline-start: var( + --icon-margin-before, + #{$icon-content-space} + ); + } + + @if $glyph != "" { + --icon-glyph: "#{$glyph}"; + } + @if $partial { + content: var(--icon-glyph); + display: inline-block; + /*** icon - partial ***/ + // * use !important to prevent issues with browser extensions that change fonts + font-family: var(--icon-font-family) !important; + + font-size: var(--icon-font-size); + font-style: normal; + font-variant: normal; + + font-weight: var(--icon-font-weight, normal); + line-height: 1; + text-transform: none; + vertical-align: middle; + + /* stylelint-disable */ + // * Better Font Rendering =========== + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + /* stylelint-enable */ + + // Hiding icon from screenreaders + @supports (content: ""/"") { + content: var(--icon-glyph) / ""; // https://www.w3.org/TR/css-content-3/#alt + } + /* stylelint-disable */ + -webkit-alt: ""; + /* stylelint-enable */ + alt: ""; + speak: none; + @media aural { + content: none; + } + @media speech { + content: none; + } + } @else { + @extend %icon !optional; + } + } +} + +// SCSS mixin for elements that text should get hidden in favour of only displaying the included icon +@mixin is-icon-text-replace($position: "before") { + font-size: 0 !important; + + @if $position == "before" { + &::before { + --icon-margin-after: 0; + } + } @else { + &::after { + --icon-margin-before: 0; + } + } +} + +// Icon glyph mixin +@function glyph($glyph) { + @return map-get($icon-glyphs, $glyph); +} + +// Icon meta data mixin +@mixin icon-meta($size: $icon-size, $style: $icon-style, $position: "before") { + &::#{$position} { + --icon-font-family: "#{"icons-" + $size + "-" + $style}", + "missing-icons"; + --icon-font-size: #{to-rem($pxValue: $size)}; + } +} diff --git a/scss/icon/_icons.placeholder.scss b/scss/icon/_icons.placeholder.scss new file mode 100644 index 000000000..8e5cd0057 --- /dev/null +++ b/scss/icon/_icons.placeholder.scss @@ -0,0 +1,47 @@ +@use "icons.variables" as *; +@use "../helpers/functions" as *; + +%icon { + // Hiding icon from screenreaders + -webkit-alt: ""; + alt: ""; + + content: var(--icon-glyph); + + display: inline-block; + /*** icon - placeholder ***/ + // * use !important to prevent issues with browser extensions that change fonts + font-family: var(--icon-font-family) !important; + + font-size: var(--icon-font-size); + + // * Better Font Rendering =========== + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + font-style: normal; + font-variant: normal; + font-weight: var(--icon-font-weight, normal); + line-height: 1; + speak: none; // Hiding icon from screenreaders + text-transform: none; + + vertical-align: middle; + + // Hiding icon from screenreaders + @supports (content: ""/"") { + content: var(--icon-glyph) / ""; // https://www.w3.org/TR/css-content-3/#alt + } + @media aural { + content: none; + } + @media speech { + content: none; + } +} + +// TODO: The following construct was especially meant to enable a branch (EDS & FV) specific result - probably we could refactor this the sooner the later +%default-icon-custom-properties { + --icon-font-family: #{$icons-font-family}; + --icon-font-size: #{to-rem($pxValue: $icon-size)}; +} diff --git a/scss/icon/_icons.variables.scss b/scss/icon/_icons.variables.scss new file mode 100644 index 000000000..8b346dcdf --- /dev/null +++ b/scss/icon/_icons.variables.scss @@ -0,0 +1,442 @@ +@use "../helpers/functions" as *; + +// 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( + $pxValue: 6 +) !default; + +$icon-glyphs-personenverkehr: ( + "account": "\1f642", + "add": "\002B", + "add-circle": "\2295", + "air-condition": "\2744", + "alarm": "\23F0", + "alarm-add": "\e1062", + "alert": "\1F514", + "alert-off": "\1F515", + "calendar": "\1F4C6", + "check-circle": "\2705", + "credit-card": "\1F4B3", + "delete": "\1F5D1", + "discount": "\e1066", + "document": "\1F5B9", + "done": "\2713", + "download": "\2B73", + "edit": "\270F", + "filter": "\e1069", + "generic-card": "\e1070", + "giftcard": "\1F381", + "heart": "\2661", + "help": "\003F", + "info": "\1F6C8", + "legal": "\00A7", + "log-out": "\21A6", + "minus": "\2212", + "print": "\1F5A8", + "remove": "\229D", + "schedule": "\1F553", + "search": "\1F50D", + "send": "\25F9", + "settings": "\2699", + "share": "\e1077", + "shopping-bag": "\1F6CD", + "shopping-basket": "\e1079", + "shopping-cart": "\1F6D2", + "star": "\2606", + "swap-horizontal": "\21C6", + "swap-vertical": "\21F5", + "upload": "\e1081", + "visibility": "\1F441", + "visibility-off": "\e1082", + "website": "\1F310", + "zoom-in": "\e1083", + "zoom-out": "\e1084", + "fast-backward-10": "\e1085", + "fast-backward-30": "\e1086", + "fast-backward-empty": "\293A", + "fast-forward-10": "\e1087", + "fast-forward-30": "\e1088", + "fast-forward-empty": "\293B", + "pause": "\23F8", + "play": "\25B7", + "skip-backward": "\23EE", + "skip-forward": "\23ED", + "stop": "\25A1", + "subtitles": "\e1091", + "volume-down": "\1F509", + "volume-mute": "\1F508", + "volume-off": "\1F507", + "volume-up": "\1F50A", + "call": "\1F4DE", + "chat": "\1F4AC", + "conversation": "\e1095", + "fax": "\1F5B7", + "feedback": "\2370", + "mail": "\2709", + "mobile-off": "\1F4F4", + "mobile-phone": "\1F4F1", + "wifi": "\e1098", + "wifi-off": "\e1149", + "mask": "\1F637", + "wc": "\1F6BB", + "wc-men": "\1F6B9", + "wc-sign": "\1F6BE", + "wc-woman": "\1F6BA", + "entry-aid": "\e1150", + "luggage-rack": "\1F9F3", + "medical": "\271A", + "power-outlet": "\1F50C", + "coffee-cup": "\2615", + "drink": "\e1101", + "restaurant": "\1F37D", + "1st-class": "\2488", + "2nd-class": "\2489", + "alternative-connection": "\e1102", + "booking": "\e1103", + "capacity-indicator": "\e1104", + "capacity-indicator-fully-booked": "\e1106", + "capacity-indicator-high": "\e1108", + "capacity-indicator-low": "\e1110", + "destination": "\1F4CD", + "intermediary-stop": "\e1113", + "round-trip": "\2B94", + "single-trip": "\291E", + "start": "\29BF", + "home": "\2302", + "map": "\1F5FA", + "map-stop": "\e1115", + "place": "\e1116", + "set-position": "\1F78B", + "trainstation": "\1F689", + "arrow-back": "\2190", + "arrow-down": "\2193", + "arrow-forward": "\2192", + "arrow-up": "\2191", + "cancel": "\2BBE", + "chevron-left": "\003C", + "chevron-right": "\003E", + "close": "\2A2F", + "expand-less": "\2303", + "expand-more": "\2304", + "fullscreen": "\e1119", + "fullscreen-exit": "\e1120", + "grid-view": "\1030E", + "link": "\1F862", + "link-external": "\1F865", + "list": "\e1121", + "menu": "\e1122", + "more-horizontal": "\22EF", + "more-vertical": "\22EE", + "refresh": "\1F5D8", + "error": "\e1123", + "error-triangle": "\26A0", + "notify": "\e1126", + "notify-cutoff": "\e1127", + "aisle": "\1F4BA", + "elderly": "\e1128", + "handicapped": "\267F", + "table": "\e1129", + "window": "\e1130", + "bahnbonus": "\e1131", + "bahnbonus-card": "\e1132", + "bahncard": "\e1134", + "commuter-ticket": "\e1136", + "komfort-check-in": "\e1137", + "komfort-check-in-check": "\2714", + "komfort-check-in-circle": "\1F907", + "my-travel": "\e1138", + "outward-journey": "\e1139", + "qr-code": "\e1140", + "return-journey": "\e1141", + "ticket": "\1F3AB", + "ticket-discount": "\e1142", + "ticket-multiple": "\e1143", + "time-outward-journey": "\e1144", + "time-return-journey": "\e1145", + "timetable": "\e1146", + "bicycle": "\1F6B2", + "car": "\e1151", + "car-sequence": "\e1147", + "ice-side-view": "\1F684", + "sprinter": "\e1148", + "walking": "\1F6B6", + "logo": "\e1152", + "buggy": "\e1153", + "childrens-compartment": "\1F37C", + "parent-child-compartment": "\1F46A", + "quiet-zone": "\1F92B", + "duplicate": "\e1154", + "image": "\1F5BC", + "lock-close": "\1F512", + "lock-open": "\1F513", + "restricted-mobility-toilet": "\e1163", + "shopping-basket-disabled": "\e1155", + "shopping-cart-disabled": "\e1156", + "gps": "\e1157", + "gps-north": "\e1158", + "local-train": "\1F688", + "rail-and-fly": "\e1159", + "seat-priority": "\e1162", + "standing-room": "\e1160", + "mixed-class": "\e1161", + "transportation-train-ec": "\e900", + "transportation-train-ic": "\e901", + "transportation-train-ice": "\e902", + "transportation-train-rb": "\e903", + "transportation-train-re": "\e904", + "transportation-bikesharing": "\e905", + "transportation-bus-local": "\e906", + "transportation-carsharing": "\e907", + "transportation-bus-long-distance": "\e908", + "transportation-airplane": "\e909", + "transportation-s-bahn": "\e90a", + "transportation-ship": "\e90b", + "transportation-taxi": "\e90c", + "transportation-train-tram": "\e90d", + "transportation-underground": "\e90e", + "transportation-walking": "\e90f" +) !default; + +$icon-font-families-personenverkehr: ( + "outline": ( + 16: ( + "action": ( + "U+002B,U+2713,U+2212" + ), + "navigation": ( + "U+003C,U+003E,U+2A2F,U+2303,U+2304" + ) + ), + 20: ( + "action": ( + "U+1f642,U+e1062,U+e1066,U+e1069-e1070,U+e1077,U+e1079,U+e1081-e1084,U+002B,U+2295,U+23F0,U+1F514-1F515,U+1F4C6,U+2705,U+1F4B3,U+1F5D1,U+1F5B9,U+2713,U+2B73,U+270F,U+1F381,U+2661,U+003F,U+1F6C8,U+00A7,U+21A6,U+2212,U+1F5A8,U+229D,U+1F553,U+1F50D,U+25F9,U+2699,U+1F6CD,U+1F6D2,U+2606,U+21C6,U+21F5,U+1F441,U+1F310,U+e1154,U+1F5BC,U+1F512,U+1F513,U+e1155,U+e1156" + ), + "av": ( + "U+e1085-e1088,U+e1091,U+293A,U+293B,U+23F8,U+25B7,U+23EE,U+23ED,U+25A1,U+1F507-1F509,U+1F50A" + ), + "brand": ( + "U+e1152" + ), + "communication": ( + "U+1F4DE,U+e1095,U+e1098,U+e1149,U+1F4AC,U+1F5B7,U+2370,U+2709,U+1F4F4,U+1F4F1" + ), + "covid-19": ( + "U+1F637" + ), + "facilities": ( + "U+1F6BB,U+1F6B9,U+1F6BE,U+1F6BA,U+e1163" + ), + "feature": ( + "U+1F9F3,U+271A,U+1F50C,U+e1150,U+e1153,U+e1160,U+2744" + ), + "food": ( + "U+2615,U+e1101,U+1F37D" + ), + "journey": ( + "U+2488,U+2489,U+e1102-e1104,U+e1106,U+e1108,U+e1110,U+e1113,U+1F4CD,U+2B94,U+291E,U+29BF,U+e1161" + ), + "maps": ( + "U+2302,U+e1115-e1116,U+1F5FA,U+1F78B,U+1F689,U+e1157" + ), + "navigation": ( + "U+2190-2193,U+2BBE,U+e1119-e1122,U+003C,U+003E,U+2A2F,U+2303,U+2304,U+1030E,U+1F862,U+1F865,U+22EF,U+22EE,U+1F5D8" + ), + "notification": ( + "U+e1123,U+26A0,U+e1126,U+e1127" + ), + "seat": ( + "U+e1128-e1130,U+1F4BA,U+267F,U+1F37C,U+1F46A,U+1F92B,U+e1162" + ), + "ticket": ( + "U+e1131-e1132,U+e1134,U+e1136-e1146,U+2714,U+1F907,U+1F3AB" + ), + "transportation": ( + "U+1F6B2,U+e1147,U+e1151,U+1F684,U+e1148,U+1F6B6,U+1F688,U+e1159" + ) + ), + 24: ( + "action": ( + "U+1f642,U+002B,U+2295,U+23F0,U+e1062,U+1F514-1F515,U+1F4C6,U+2705,U+1F4B3,U+1F5D1,U+e1066,U+1F5B9,U+2713,U+2B73,U+270F,U+e1069,U+e1070,U+1F381,U+2661,U+003F,U+1F6C8,U+00A7,U+21A6,U+2212,U+1F5A8,U+229D,U+1F553,U+1F50D,U+25F9,U+2699,U+e1077,U+1F6CD,U+e1079,U+1F6D2,U+2606,U+21C6,U+21F5,U+e1081,U+1F441,U+e1082,U+1F310,U+e1083,U+e1084,U+e1154,U+1F512,U+1F513,U+e1155,U+e1156" + ), + "av": ( + "U+e1085,U+e1086,U+293A,U+e1087,U+e1088,U+293B,U+23F8,U+25B7,U+23EE,U+23ED,U+25A1,U+e1091,U+1F509,U+1F508,U+1F507,U+1F50A" + ), + "brand": ( + "U+e1152" + ), + "communication": ( + "U+1F4DE,U+1F4AC,U+e1095,U+1F5B7,U+2370,U+2709,U+1F4F4,U+1F4F1,U+e1098,U+e1149" + ), + "covid-19": ( + "U+1F637" + ), + "facilities": ( + "U+1F6BB,U+1F6B9,U+1F6BE,U+1F6BA,U+e1163" + ), + "feature": ( + "U+1F9F3,U+271A,U+1F50C,U+e1150,U+e1153,U+e1160,U+2744" + ), + "food": ( + "U+2615,U+e1101,U+1F37D" + ), + "journey": ( + "U+2488-2489,U+e1102-e1104,U+e1106,U+e1108,U+e1110,U+1F4CD,U+e1113,U+2B94,U+291E,U+29BF,U+e1161" + ), + "maps": ( + "U+2302,U+1F5FA,U+e1115,U+e1116,U+1F78B,U+1F689,U+e1157" + ), + "navigation": ( + "U+2190-2193,U+2BBE,U+003C,U+003E,U+2A2F,U+2303,U+2304,U+e1119,U+e1120,U+1030E,U+1F862,U+1F865,U+e1121,U+e1122,U+22EF,U+22EE,U+1F5D8" + ), + "notification": ( + "U+e1123-e1127,U+26A0" + ), + "seat": ( + "U+1F4BA,U+e1128-e1130,U+267F,U+1F37C,U+1F46A,U+1F92B,U+e1162" + ), + "ticket": ( + "U+e1131-e1146,U+2714,U+1F907,U+1F3AB" + ), + "transportation": ( + "U+1F6B2,U+e1147,U+e1151,U+1F684,U+e1148,U+1F6B6,U+1F688,U+e1159" + ) + ), + 32: ( + "action": ( + "U+1f642,U+2295,U+002B,U+e1062,U+e1064-e1084,U+23F0,U+1F514-1F515,U+1F4C6,U+2705,U+1F4B3,U+1F5D1,U+1F5B9,U+2713,U+2B73,U+270F,U+1F381,U+2661,U+003F,U+1F6C8,U+00A7,U+21A6,U+2212,U+1F5A8,U+229D,U+1F553,U+1F50D,U+25F9,U+2699,U+1F6CD,U+1F6D2,U+2606,U+21C6,U+21F5,U+1F441,U+1F310,U+e1154,U+1F512,U+1F513,U+e1155,U+e1156" + ), + "av": ( + "U+e1085-e1088,U+e1091,U+293A,U+293B,U+23F8,U+25B7,U+23EE,U+23ED,U+25A1,U+1F509,U+1F508,U+1F507,U+1F50A" + ), + "brand": ( + "U+e1152" + ), + "communication": ( + "U+1F4DE,U+1F4AC,U+e1095,U+1F5B7,U+2370,U+2709,U+1F4F4,U+1F4F1,U+e1098,U+e1149" + ), + "covid-19": ( + "U+1F637" + ), + "facilities": ( + "U+1F6B9,U+1F6BE,U+1F6BA,U+1F6BB,U+e1163" + ), + "feature": ( + "U+1F9F3,U+271A,U+1F50C,U+e1150,U+e1153,U+e1160,U+2744" + ), + "food": ( + "U+2615,U+e1101,U+1F37D" + ), + "journey": ( + "U+2488,U+2489,U+e1102-e1110,U+1F4CD,U+e1113,U+2B94,U+291E,U+29BF,U+e1161" + ), + "maps": ( + "U+2302,U+1F5FA,U+e1116,U+1F78B,U+e1115,U+1F689,U+e1157" + ), + "navigation": ( + "U+2190-2193,U+e1119-e1122,U+2BBE,U+003C,U+003E,U+2A2F,U+2303,U+2304,U+1030E,U+1F865,U+1F862,U+22EF,U+22EE,U+1F5D8" + ), + "notification": ( + "U+26A0,U+e1123-e1127" + ), + "seat": ( + "U+1F4BA,U+e1128-e1130,U+267F,U+1F37C,U+1F46A,U+1F92B,U+e1162" + ), + "ticket": ( + "U+e1131-e1146,U+2714,U+1F907,U+1F3AB" + ), + "transportation": ( + "U+1F6B2,U+e1147,U+e1151,U+1F684,U+e1148,U+1F6B6,U+1F688,U+e1159" + ) + ), + 48: ( + "av": ( + "U+23F8,U+25B7" + ) + ), + 64: ( + "av": ( + "U+23F8,U+25B7" + ) + ) + ), + "filled": ( + 20: ( + "action": ( + "U+1f642,U+2295,U+1F514,U+2705,U+1F4B3,U+e1066,U+270F,U+e1070,U+003F,U+1F6C8,U+1F5A8,U+229D,U+1F553,U+1F6CD,U+e1079,U+2661,U+2606,U+e1154,U+1F5BC,U+1F512,U+1F513,U+e1155" + ), + "av": ( + "U+25B7,U+23EE,U+23ED,U+25A1,U+e1091" + ), + "communication": ( + "U+1F4DE,U+1F4AC,U+e1095,U+2370" + ), + "feature": ( + "U+271A" + ), + "food": ( + "U+2615" + ), + "journey": ( + "U+e1104,U+e1106,U+e1108,U+e1110,U+1F4CD" + ), + "maps": ( + "U+2302,U+e1116,U+e1157,U+e1158" + ), + "navigation": ( + "U+2BBE" + ), + "notification": ( + "U+e1123,U+26A0" + ), + "ticket": ( + "U+e1132,U+e1134" + ) + ), + 24: ( + "action": ( + "U+1F514,U+2661,U+2606" + ), + "av": ( + "U+25B7,U+25A1,U+23EE,U+23ED" + ), + "journey": ( + "U+e1104,U+e1106,U+e1108,U+e1110,U+1F4CD" + ), + "maps": ( + "U+e1157,U+e1158" + ), + "navigation": ( + "U+2BBE" + ) + ), + 32: ( + "action": ( + "U+1F514,U+2661,U+2606" + ), + "av": ( + "U+25B7,U+23EE,U+23ED,U+25A1" + ), + "maps": ( + "U+e1157,U+e1158" + ), + "navigation": ( + "U+2BBE" + ) + ), + 48: ( + "av": ( + "U+25B7" + ) + ), + 64: ( + "av": ( + "U+25B7" + ) + ) + ) +) !default; + +$icon-glyphs: $icon-glyphs-personenverkehr !default; diff --git a/scss/icon/icons.scss b/scss/icon/icons.scss new file mode 100644 index 000000000..f62140d27 --- /dev/null +++ b/scss/icon/icons.scss @@ -0,0 +1,35 @@ +// @import "icons.variables"; + +@use "icons.variables" as *; +@use "icons.attributes-mappings" as *; +@use "icons.helpers" as *; +@use "icons.custom-properties" as *; +@use "icons.font-faces" as *; +@use "icons.placeholder" as *; + +[data-icon], +[data-icon-before] { + &::before { + @extend %icon !optional; + margin-inline-end: var(--icon-margin-after, #{$icon-content-space}); + } +} + +[data-icon-after] { + &::after { + @extend %icon !optional; + margin-inline-start: var(--icon-margin-before, #{$icon-content-space}); + } +} + +// Providing a mechanism for text replacements +.is-icon-text-replace { + &[data-icon], + &[data-icon-before] { + @include is-icon-text-replace(); + } + + &[data-icon-after] { + @include is-icon-text-replace("after"); + } +} diff --git a/tokens/font.jsonc b/tokens/font.jsonc index a13e8dd21..6cd093aa0 100644 --- a/tokens/font.jsonc +++ b/tokens/font.jsonc @@ -4,29 +4,29 @@ "name": { "value": "'DB Screen Sans Regular'" }, "font-family": { "value": "'DB Screen Sans'" }, "font-weight": { "value": "400" }, - "woff": { "value": "'assets/fonts/dbscreensans-regular.woff'" }, - "woff2": { "value": "'assets/fonts/dbscreensans-regular.woff2'" } + "woff": { "value": "'dbscreensans-regular.woff'" }, + "woff2": { "value": "'dbscreensans-regular.woff2'" } }, "db-screensans-bold": { "name": { "value": "'DB Screen Sans Bold'" }, "font-family": { "value": "'DB Screen Sans'" }, "font-weight": { "value": "700" }, - "woff": { "value": "'assets/fonts/dbscreensans-bold.woff'" }, - "woff2": { "value": "'assets/fonts/dbscreensans-bold.woff2'" } + "woff": { "value": "'dbscreensans-bold.woff'" }, + "woff2": { "value": "'dbscreensans-bold.woff2'" } }, "db-screenhead-light": { "name": { "value": "'DB Screen Head Light'" }, "font-family": { "value": "'DB Screen Head'" }, "font-weight": { "value": "300" }, - "woff": { "value": "'assets/fonts/dbscreenhead-light.woff'" }, - "woff2": { "value": "'assets/fonts/dbscreenhead-light.woff2'" } + "woff": { "value": "'dbscreenhead-light.woff'" }, + "woff2": { "value": "'dbscreenhead-light.woff2'" } }, "db-screenhead-black": { "name": { "value": "'DB Screen Head Black'" }, "font-family": { "value": "'DB Screen Head'" }, "font-weight": { "value": "900" }, - "woff": { "value": "'assets/fonts/dbscreenhead-black.woff'" }, - "woff2": { "value": "'assets/fonts/dbscreenhead-black.woff2'" } + "woff": { "value": "'dbscreenhead-black.woff'" }, + "woff2": { "value": "'dbscreenhead-black.woff2'" } }, "family": { "sans": { From 9fbcfec73c23352fabf7e02e37190cf4e2026cc3 Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 15 Nov 2022 11:23:10 +0100 Subject: [PATCH 2/5] feat: add other assets-paths --- scss/_rollup.assets-paths.scss | 4 ++++ scss/_webpack.assets-paths.scss | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 scss/_rollup.assets-paths.scss create mode 100644 scss/_webpack.assets-paths.scss diff --git a/scss/_rollup.assets-paths.scss b/scss/_rollup.assets-paths.scss new file mode 100644 index 000000000..ea144bb65 --- /dev/null +++ b/scss/_rollup.assets-paths.scss @@ -0,0 +1,4 @@ +// If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths. +$icons-path: "@db-ui/core/dist/icons/"; +$images-path: "@db-ui/core/dist/images/"; +$fonts-path: "@db-ui/core/dist/fonts/"; diff --git a/scss/_webpack.assets-paths.scss b/scss/_webpack.assets-paths.scss new file mode 100644 index 000000000..02e7de82f --- /dev/null +++ b/scss/_webpack.assets-paths.scss @@ -0,0 +1,4 @@ +// If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths. +$icons-path: "~@db-ui/core/dist/icons/"; +$images-path: "~@db-ui/core/dist/images/"; +$fonts-path: "~@db-ui/core/dist/fonts/"; From bfe6fc049c9eca32f2a08f6b208b7e1dab1972d9 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 15 Nov 2022 11:39:22 +0100 Subject: [PATCH 3/5] Update _functions.scss --- scss/helpers/_functions.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/helpers/_functions.scss b/scss/helpers/_functions.scss index 909731005..feccb2b9d 100644 --- a/scss/helpers/_functions.scss +++ b/scss/helpers/_functions.scss @@ -10,6 +10,7 @@ @return #{$pxValue * 0.0625}em; } +// TODO: We might be able to simplify the following placeholder/mixins afterwards by partial construct out of DB UI Core // Mixin wrappers around the SCSS placeholders @mixin a11y-visually-hidden($partial: false) { @if $partial { From daf1890c6edff2bb2eda59a2e50f365b4d0d113b Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 15 Nov 2022 12:23:13 +0100 Subject: [PATCH 4/5] fix: issues from PR --- scripts/color-classes-generator.js | 5 ++++- scripts/scss-typography-generator.js | 13 +++++++------ scss/_default.assets-paths.scss | 6 +++--- scss/_tonality.scss | 10 +++++----- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js index d46240758..5f5e7d47c 100644 --- a/scripts/color-classes-generator.js +++ b/scripts/color-classes-generator.js @@ -35,7 +35,10 @@ const generateBGVariants = (value, index) => { * @returns scss string */ exports.generateColorUtilitityClasses = (colorToken) => { - let output = '@use "variables" as *;\n@use "color-placeholder" as *;\n'; + let output = ` + @use "variables" as *; + @use "color-placeholder" as *; + `; for (const [, value] of Object.keys(colorToken).entries()) { output += `/** diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js index c9bf96b63..6cc34a1c8 100644 --- a/scripts/scss-typography-generator.js +++ b/scripts/scss-typography-generator.js @@ -1,11 +1,12 @@ const prefix = 'db'; -const fileHeader = - '@use "variables" as *;\n@use "icon/icon-family-calc" as *;\n' + - '// Do not edit directly\n' + - '// Generated on ' + - new Date().toString() + - '\n'; +const fileHeader = ` + @use "variables" as *; + @use "icon/icon-family-calc" as *; + // Do not edit directly + // Generated on + ${new Date().toString()} + `; const getShortSize = (size) => { if (size === '3xlarge') { diff --git a/scss/_default.assets-paths.scss b/scss/_default.assets-paths.scss index 83869cdfd..b035cdb58 100644 --- a/scss/_default.assets-paths.scss +++ b/scss/_default.assets-paths.scss @@ -1,3 +1,3 @@ -$icons-path: "assets/icons/"; -$images-path: "assets/images/"; -$fonts-path: "assets/fonts/"; +$icons-path: "assets/icons/" !default; +$images-path: "assets/images/" !default; +$fonts-path: "assets/fonts/" !default; diff --git a/scss/_tonality.scss b/scss/_tonality.scss index eb03c0897..ca3e9ef4e 100644 --- a/scss/_tonality.scss +++ b/scss/_tonality.scss @@ -22,15 +22,15 @@ .db-ui-#{nth($styles, $i + 1)} { @extend %db-scaling-#{nth($styles, $i + 1)}; - [data-size="large"] { - @extend %db-#{nth($styles, $i + 1)}-body-lg; - } - - :not(small), + *, [data-size="medium"] { @extend %db-#{nth($styles, $i + 1)}-body-md; } + [data-size="large"] { + @extend %db-#{nth($styles, $i + 1)}-body-lg; + } + small, [data-size="small"] { @extend %db-#{nth($styles, $i + 1)}-body-sm; From c47aea20a6c866f72a16a3762ce1ce23c64bb8e1 Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 15 Nov 2022 13:00:53 +0100 Subject: [PATCH 5/5] fix: issues for building on gh-pages --- scripts/scss-typography-generator.js | 2 +- source/_patterns/icons/_icons.demonstration.scss | 2 ++ source/_patterns/logo/_examples.demonstration.scss | 1 + source/_patterns/spacings/_examples.demonstration.scss | 2 ++ source/css/patternlab.scss | 7 ++++--- 5 files changed, 10 insertions(+), 4 deletions(-) diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js index 6cc34a1c8..6d6639747 100644 --- a/scripts/scss-typography-generator.js +++ b/scripts/scss-typography-generator.js @@ -5,7 +5,7 @@ const fileHeader = ` @use "icon/icon-family-calc" as *; // Do not edit directly // Generated on - ${new Date().toString()} + // ${new Date().toString()} `; const getShortSize = (size) => { diff --git a/source/_patterns/icons/_icons.demonstration.scss b/source/_patterns/icons/_icons.demonstration.scss index 4cf9451a8..f4a302ef0 100644 --- a/source/_patterns/icons/_icons.demonstration.scss +++ b/source/_patterns/icons/_icons.demonstration.scss @@ -1,3 +1,5 @@ +@use "../../../build/scss/variables" as *; + .DO-NOT-COPY-THIS-CLASS-example-icon-list { &, ul { diff --git a/source/_patterns/logo/_examples.demonstration.scss b/source/_patterns/logo/_examples.demonstration.scss index 9da7de03d..38cb94a7c 100644 --- a/source/_patterns/logo/_examples.demonstration.scss +++ b/source/_patterns/logo/_examples.demonstration.scss @@ -1,3 +1,4 @@ +@use "../../../build/scss/variables" as *; .DO-NOT-COPY-THIS-CLASS-example-logo-list { list-style: none; diff --git a/source/_patterns/spacings/_examples.demonstration.scss b/source/_patterns/spacings/_examples.demonstration.scss index 99fe0f882..158657a60 100644 --- a/source/_patterns/spacings/_examples.demonstration.scss +++ b/source/_patterns/spacings/_examples.demonstration.scss @@ -1,3 +1,5 @@ +@use "../../../build/scss/variables" as *; + .DO-NOT-COPY-THIS-CLASS-example-spacing { height: 8px; background-color: $db-colors-primary-bg-light-enabled; diff --git a/source/css/patternlab.scss b/source/css/patternlab.scss index 04e5e9ab3..47a12c69d 100644 --- a/source/css/patternlab.scss +++ b/source/css/patternlab.scss @@ -1,6 +1,7 @@ -@import "../../build/scss/db-ui-base"; -@import "../../build/scss/typography-classes"; -@import "../../build/scss/color-classes"; +@use "../../build/scss/variables" as *; +@use "../../build/scss/db-ui-base" as *; +@use "../../build/scss/typography-classes" as *; +@use "../../build/scss/color-classes" as *; body { @extend %db-ui-functional;