db-ui / base Goto Github PK
View Code? Open in Web Editor NEWProvides basic tokens and assets based on the DB UX Design System.
Home Page: https://db-ui.github.io/base/
License: Apache License 2.0
Provides basic tokens and assets based on the DB UX Design System.
Home Page: https://db-ui.github.io/base/
License: Apache License 2.0
Currently the breakpoints 640px, 768px, 1024px and 1280px are set as Tailwind tokens:
base/tokens/tailwind/screens.json
Lines 1 to 8 in 1b6bbf4
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
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/
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
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
.
pretty-quick
seems to be unmaintained, so we're switching to lint-staged
.
Modularize the different steps and cache the artifacts
adapt from db-ui/mono#1446
/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
should we name this _-type-_ instead of _-typo-_ (sounds german for me ;))
Originally posted by @annsch in #56 (comment)
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;
Related to db-ui/elements#307 & db-ui/core#71
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
.
24
action
: check-circle
action
: help
action
: info
action
: remove
notification
: error
notification
: warning
32
action
: add-circle
action
: check-circle
action
: help
action
: info
action
: remove
notification
: error
notification
: warning
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)"
https://db-ui.github.io/base/?p=colors-colors
$db-color-cool-gray-700
etc.Provide the DB Screen Sans Digital Regular font references within the CSS as @font-face
declarations.
font-weight
to differentiate in between the different icon styles.Updating icons library (functional to 2.23.0 and illustrative 2.18.0).
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
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)
As version 16 is heading its end of life on 2023-09-11 we should update to at least version 18.
There are two warnings regarding the CI/CD scripts:
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.
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:
Originally posted by @mfranzke in #168 (comment)
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
Currently the TailwindCSS tokens are adding custom gaps and space values:
base/tokens/tailwind/spacing.json
Lines 28 to 41 in 1b6bbf4
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
As already mentioned with db-ui/mono#152 some PRs have been merged (automatically) even though that the linting step failed.
Resolved by #32
We might be able to replace nodemon
as soon as this lands: nodejs/node#44976
these could be tokens as well instead of just defining them here.
Originally posted by @mfranzke in #159 (comment)
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?
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.
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
).
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
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)
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
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.
Some of the included illustrative icons SVG files are corrupt due to redundant g
-tag and one redundant fill
-attribute.
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
We don't have showcases for typography and spacings and should add those two as well
is this added entry intended? The title or description of this PR doesn't mention it.
Originally posted by @mfranzke in #159 (comment)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.