db-ui/base

Provides basic tokens and assets based on the DB UX Design System.

base's Issues

Icons: fill-rule="evenodd" is deleted on icon-fonts

All filles/solid icons with fill-rule="evenodd" works as plain svg, but the fill-role is deleted on fonts.

This results in just "black" icons.

Compare to icons check-circle and error starting with size 24.

full list of problematic, filled icons:

size 24

• action: check-circle
• action: help
• action: info
• action: remove
• notification: error
• notification: warning

size 32

• action: add-circle
• action: check-circle
• action: help
• action: info
• action: remove
• notification: error
• notification: warning

Further information on the topic

• https://stackoverflow.com/a/72451714
• https://hinty.io/brucehardywald/how-to-generate-a-webfont-automated-setup/#:~:text=Paths%20are%20filled%20when%20should%20not

Consolidate lintings on pre-commit

We're currently linting and prettifying our files from two to three times (lint-staged and npm run lint afterwards, whereas .js files even also get another prettifying through xo).

Tailwind Tokens: Additional gaps and space

Currently the TailwindCSS tokens are adding custom gaps and space values:

base/tokens/tailwind/spacing.json

Lines 28 to 41 in 1b6bbf4

	"gap": {
	"xs": "8px",
	"sm": "12px",
	"md": "12px",
	"lg": "20px",
	"xl": "20px"
	},
	"space": {
	"xs": "8px",
	"sm": "12px",
	"md": "12px",
	"lg": "20px",
	"xl": "20px"
	}

Why do we set them? Why is there no 16px? Why are they duplicated? Is there any relation to the breakpoints?

Mostly you are using the default gap values (e.g. gap-1 instead of gap-md); see https://tailwindcss.com/docs/gap

Hide Guidelines 2.0 patterns on Guidelines 3.0 branch

Related to db-ui/elements#307 & db-ui/core#71

focus: adding tokens

    these could be tokens as well instead of just defining them here.

Originally posted by @mfranzke in #159 (comment)

Icons update

Updating icons library (functional to 2.23.0 and illustrative 2.18.0).

Illustrative

Changed

• db_ic_il_db_trainstation_with_train.svg renamed to db_ic_il_db_train_station_with_train.svg
• db_ic_il_db_trainstation.svg renamed to db_ic_il_db_train_station.svg

SVG Icon Issues with Fill

I am trying to make a React MUI component lib that contains all icons transpiled into React Components (which can be done at build-time, but is cumbersome).

I noticed that the original icons have been modified to include the following fill rules:
CSS variables (replace fill="#282D37" by fill="#282D37" style="fill: currentColor;fill: var(--db-icon-color, currentColor)")

Theses fill rules cause a problem with svgr:

[...] fill="#EC0016" style={{fill: "#EC0016", fill: "var(--db-icon-pulse-color, #EC0016)"}} 

Typescript will complain about "fill" being defined twice in the object literal.

I am not sure the definition even needs to be like that. The CSS fill always overwrites the fill color defined via attribute, and why is the fallback for browsers not supporting var needed? Do we really support IE11? :P
If so, we could also just write fill="currentColor" style="fill: var(--db-icon-color, currentColor)"

question by Anna

https://github.com/db-ui/base/pull/56/files/a25e32c35115d2a6ca01e5029213c2d1776976e1#diff-e14fb5edf4da8b27c34c9e1f5e1c881e17b8c01583b2fd474516248a983f30b4R40

    should we name this _-type-_ instead of _-typo-_ (sounds german for me ;))

Originally posted by @annsch in #56 (comment)

Replace `pretty-quick` by `lint-staged`

For linting and prettifying staged files we should replace pretty-quick by lint-staged as pretty-quick doesn't work with prettier version 3 and even also doesn't seem to get actively maintained (at the moment).

see also db-ui/mono#1297 and db-ui/core@35e3c6c

SVG Icons: Evaluate possibility for further shrinking

We're currently even already using ImageOptim for optimizations, but we might have either forgotten to do it in the meantime, or might need further optimizations like e.g. through tools like https://jakearchibald.github.io/svgomg/

Add textual descriptions / titles of the icons to their overview page

https://db-ui.github.io/base/?p=viewall-icons-all

Changelogs: Decide on how to handle

Currently we're moving to describe the releases contents within the https://github.com/db-ui/base/releases section. In that case we would want to prevent the redundant information within the CHANGELOG.md files, but we would at least need a hint in that file that mentions and links to that releases section.
Additionally we would need to decide on the amount of information we want to provide with the releases. For the previous ones I've removed the irrelevant information regarding our optimizations, dependency updates, etc., which are mainly related to our dev platforms / under the hood changes and only included aspects that were related to the consumers of the packages, as well as choosing a summarizing title for these changes afterwards. But we need to align on this as well.

Relevant for all three repos.

refactor: rename patternlab.scss to documentation.scss

as discussed here: #113

rename https://github.com/db-ui/base/blob/main/source/css/db-ui-base.scss to https://github.com/db-ui/base/blob/main/source/css/documentation.scss

refactor: cicd install process

adapt from db-ui/mono#1446

Icons: optional meta variables

    I like the idea making this optional, but in that case we could as well define it as a fallback to the CSS Variables reference on the following code lines:

https://github.com/db-ui/base/blob/cf16a3bd1e2078e5bf8209dbcc44884bc112c5b2/scss/icon/_icons.helpers.scss#L38L40

Originally posted by @mfranzke in #168 (comment)

Tailwind Tokens: Breakpoints are inconsistent with guidelines

Currently the breakpoints 640px, 768px, 1024px and 1280px are set as Tailwind tokens:

base/tokens/tailwind/screens.json

Lines 1 to 8 in 1b6bbf4

	{
	"screens": {
	"sm": "640px",
	"md": "768px",
	"lg": "1024px",
	"xl": "1280px"
	}
	}

The guidelines are currently showing breakpoints at 440px, 768px, 1024px and 1440px:

Source: https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/Layout

For reference: the TailwindCSS defaults can be found here: https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js#L781-L787

Update publish process for iOS, Android and Flutter

Android: https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-gradle-registry

Flutter: https://stackoverflow.com/questions/54022704/how-to-add-a-package-from-github-in-flutter

iOS: ???

CI/CD: warnings

There are two warnings regarding the CI/CD scripts:

• codeql / Analyze (javascript)
  1 issue was detected with this workflow: Please specify an on.push hook so that Code Scanning can compare pull requests against the state of the base branch.
• scan-secrets / TruffleHog
  The set-output command is deprecated and will be disabled soon. Please upgrade to using Environment Files. For more information see: https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/

This relates to the other repos as well.

add typography & spacing in patterlab

We don't have showcases for typography and spacings and should add those two as well

Generate typography placeholder and classes

Icons: two transport icons with incorrect artifacts

Two of the 32 size transportation icons are including an unwanted thin visual line, that we need to fix.

To know what to do about it if we might face the problem in the future again, we should also document the solution.

Not setting node version for pipelines

We're actually setting the node version for local development by .nvmrc, but not within the pipelines, which might result in unexpected problems.

This is most likely relevant for each dependent ci/cd helper we're using e.g. for installing dependencies, compare to https://github.com/bahmutov/npm-install#node-version

adapt data-attributes instead of classes for settings

    I would expect `class="db-ui-regular"` to be `data-tonality="regular"` (and in the generator files accordingly), adapted by the other attributes like e.g. size (`data-size`), variant (`data-variant`), etc. This seem to have been overlooked in colors, scaling and typography as well.

Originally posted by @mfranzke in #174 (comment)

DB fonts are not used in tailwind-specific classes

If you use @db-ui/base with Tailwind CSS and you try to use font-bold the DB fonts will not be used.

Issue:
Tailwind will try to use the CSS font-family: 'DB Screen Sans Bold', Helvetica, Arial, sans-serif which contains the wrong font name DB Screen Sans Bold.

Solution:
Tailwind should use the font family DB Screen Sans instead of the wrong name DB Screen Sans Bold.

Make cleanup-gh-pages a schedule job to fix race condition on main

Release Version 1.0.0

Switch from pretty-quick to lint-staged

pretty-quick seems to be unmaintained, so we're switching to lint-staged.

PR merged even though that linting failed

As already mentioned with db-ui/mono#152 some PRs have been merged (automatically) even though that the linting step failed.

Question about adding another transition entry

    is this added entry intended? The title or description of this PR doesn't mention it.

Originally posted by @mfranzke in #159 (comment)

Icon fonts evals

• Evaluate to merge the different icon styles into one font, especially as outline seems the be default and solid only a rare anomaly
  • Evaluate to use font-weight to differentiate in between the different icon styles.

Using a newer Node version

As version 16 is heading its end of life on 2023-09-11 we should update to at least version 18.

generated typography-placeholder contents are incorrect

The generated build/scss/_typography-placeholder.scss files contents seem to be incorrect – where we had some selectors like the following previously:

%db-normal-headline-3xl{

	line-height: $db-typography-normal-mobile-headline-3xlarge-line-height;
	font-size: $db-typography-normal-mobile-headline-3xlarge-font-size;

    &-light,
    &[data-variant="light"] {
        font-weight: 300;
    }
	
	@media only screen and (min-width: $db-screens-md) {
		line-height: $db-typography-normal-tablet-headline-3xlarge-line-height;
		font-size: $db-typography-normal-tablet-headline-3xlarge-font-size;}

	@media only screen and (min-width: $db-screens-lg) {
		line-height: $db-typography-normal-desktop-headline-3xlarge-line-height;
		font-size: $db-typography-normal-desktop-headline-3xlarge-font-size;}
}

We now get:

%db-desktop-3xlarge-lineHeight{

	line-height: $db-typography-desktop-mobile-3xlarge-lineHeight-line-height;
	font-size: $db-typography-desktop-mobile-3xlarge-lineHeight-font-size;

	--db-base-icon-font-size: #{$db-typography-desktop-mobile-3xlarge-lineHeight-font-size};
	--db-base-icon-font-family: #{get-icon-family($db-typography-desktop-mobile-3xlarge-lineHeight-font-size,
	$db-typography-desktop-mobile-3xlarge-lineHeight-line-height)};
	--db-base-icon-font-family-filled: #{get-icon-family($db-typography-desktop-mobile-3xlarge-lineHeight-font-size,
	$db-typography-desktop-mobile-3xlarge-lineHeight-line-height,"filled")};
	--db-type-body-font-size-lineHeight: #{$db-typography-desktop-mobile-3xlarge-lineHeight-font-size};
	--db-type-body-line-height-lineHeight: #{$db-typography-desktop-mobile-3xlarge-lineHeight-line-height};
		
	@media only screen and (min-width: $db-screens-md) {
		line-height: $db-typography-desktop-tablet-3xlarge-lineHeight-line-height;
		font-size: $db-typography-desktop-tablet-3xlarge-lineHeight-font-size;
		--db-base-icon-font-size: #{$db-typography-desktop-tablet-3xlarge-lineHeight-font-size};
		--db-base-icon-font-family: #{get-icon-family($db-typography-desktop-tablet-3xlarge-lineHeight-font-size,
		$db-typography-desktop-tablet-3xlarge-lineHeight-line-height)};
		--db-base-icon-font-family-filled: #{get-icon-family($db-typography-desktop-tablet-3xlarge-lineHeight-font-size,
		$db-typography-desktop-tablet-3xlarge-lineHeight-line-height,"filled")};
		--db-type-body-font-size-lineHeight: #{$db-typography-desktop-tablet-3xlarge-lineHeight-font-size};
		--db-type-body-line-height-lineHeight: #{$db-typography-desktop-tablet-3xlarge-lineHeight-line-height};
		}

	@media only screen and (min-width: $db-screens-lg) {
		line-height: $db-typography-desktop-desktop-3xlarge-lineHeight-line-height;
		font-size: $db-typography-desktop-desktop-3xlarge-lineHeight-font-size;
		--db-base-icon-font-size: #{$db-typography-desktop-desktop-3xlarge-lineHeight-font-size};
		--db-base-icon-font-family: #{get-icon-family($db-typography-desktop-desktop-3xlarge-lineHeight-font-size,
		$db-typography-desktop-desktop-3xlarge-lineHeight-line-height)};
		--db-base-icon-font-family-filled: #{get-icon-family($db-typography-desktop-desktop-3xlarge-lineHeight-font-size,
		$db-typography-desktop-desktop-3xlarge-lineHeight-line-height,"filled")};
		--db-type-body-font-size-lineHeight: #{$db-typography-desktop-desktop-3xlarge-lineHeight-font-size};
		--db-type-body-line-height-lineHeight: #{$db-typography-desktop-desktop-3xlarge-lineHeight-line-height};
		}
}

So this is mainly about the placeholder and variable names within like e.g. $db-typography-desktop-mobile-3xlarge-lineHeight-line-height that seem to be incorrect.

Illustrative icons: incorrect syntax

Some of the included illustrative icons SVG files are corrupt due to redundant g-tag and one redundant fill-attribute.

xo linting problem

/home/runner/work/base/base/scripts/tailwind-config-generator.mjs: line 48, col 1, Error - Prefer top-level await over an async function `run` call. (unicorn/prefer-top-level-await)
/home/runner/work/base/base/scripts/zeplin-styleguide.js: line 191, col 11, Error - Prefer top-level await over an async IIFE. (unicorn/prefer-top-level-await)

https://github.com/db-ui/base/actions/runs/3486903076/jobs/5833920580

Update icon library

• Functional Icon-Library 2.27.0
• Illustrative Icon-Library 2.22.0

Recheck on GDPR issues

https://www.jsdelivr.com/blog/how-the-german-courts-ruling-on-google-fonts-affects-jsdelivr-and-why-it-is-safe-to-use/

Colors: optimize colors documentation

https://db-ui.github.io/base/?p=colors-colors

• Add semantic colors
• Add an intro that describes the usage and the variable pattern $db-color-cool-gray-700 etc.

Automate Icon Creation

          Before you merge this: Should we make this an automated step? (The transform of the original SVG files)

Originally posted by @shartte in #267 (comment)

Provide DB Screen Sans Digital Regular font references

Provide the DB Screen Sans Digital Regular font references within the CSS as @font-face declarations.

add cypress for local & visual testing and for pipeline

Release pipeline problem

Within the release process there's an error most likely related to a missing directory that's either not created by us or programmatically by the 3rd party solutions we're using:
https://github.com/db-ui/base/actions/runs/3149551409/jobs/5121315894

GitHub Actions: Deprecated save-state and set-output commands

https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/

A workflow using save-state or set-output like the following

- name: Save state
run: echo "::save-state name={name}::{value}"

- name: Set output
run: echo "::set-output name={name}::{value}"

should be updated to write to the new GITHUB_STATE and GITHUB_OUTPUT environment files:

- name: Save state
run: echo "{name}={value}" >> $GITHUB_STATE

- name: Set output
run: echo "{name}={value}" >> $GITHUB_OUTPUT

replace nodemon

We might be able to replace nodemon as soon as this lands: nodejs/node#44976

Transfer init declarations

Migrate the init declarations from DB UI Core to DB UI Base.

Probably the following is a good candidate for a general font-declaration as well:
text-underline-position: from-font;

https://github.com/db-ui/core/pull/89/files#diff-2cd00e2b1f36882d2a0b90f79bfd33495ffe07d9f0a8231db379fd3ecc2fdb20R15

DB Yellow 900: which color is correct?

In DB Marketing Portal the color of DB Yellow 900 is #F75F00:
https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/Farben

In DB UI the color of DB Yellow 900 is #f05000:
https://db-ui.github.io/base/?p=colors-colors

Which one is correct?

Release Version 1.0.0

test(markdownlint): doesn't provide correct results

As mentioned by @shartte within #252, while committing some markdownlint errors come up. These weren't shown on MacOS environments, but could get fixed by quoting the globs:
https://github.com/igorshubovych/markdownlint-cli#globbing

add dependabot

Automate sync of v3 and main branches

Resolved by #32

Optimize GitHub CI/CD

Modularize the different steps and cache the artifacts