Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: convert to whitelabel #3616

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
+520 −533
Draft

feat: convert to whitelabel #3616

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f75981a
feat: convert to whitelabel
nmerget Dec 19, 2024
34b8b7d
Update packages/components/README.md
nmerget Dec 20, 2024
ef7ef58
chore: update old references
nmerget Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions packages/components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,17 @@ If you just need the styling follow this:

Import the styles in `scss` or `css`. Based on your technology the file names could be different.

- Default (db-ui-42): asset path point to `../assets`
- Webpack (db-ui-42-webpack): asset path point to `~@db-ui/foundations/assets`
- Rollup (db-ui-42-rollup): asset path point to `@db-ui/foundations/assets`
- relatve: asset path point to `../assets`
nmerget marked this conversation as resolved.
Show resolved Hide resolved
- webpack: asset path point to `~@db-ui/foundations/assets`
- rollup: asset path point to `@db-ui/foundations/assets`

`db-ui-42` bundles all dependencies from [foundations](https://www.npmjs.com/package/@db-ui/foundations) + all [components](https://github.com/db-ui/mono/blob/main/packages/components/src/styles/db-ui-components.scss) available.
They are bundling all dependencies from [foundations](https://www.npmjs.com/package/@db-ui/foundations) + all [components](https://github.com/db-ui/mono/blob/main/packages/components/src/styles/db-ui-components.scss) available.

**SCSS**

```scss
// index.scss
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
@forward "@db-ui/components/build/styles/rollup";
```

**CSS**
Expand All @@ -49,36 +49,36 @@ Within HTML files directly:

```html
<!-- index.html //-->
<link rel="stylesheet" href="/styles/db-ui-42.css" />
<link rel="stylesheet" href="/styles/rollup.css" />
```

Or within your JavaScript files, with the related bundler as a prefix (in this case rollup and equivalents like Vite):

```js
// main.js
import "@db-ui/components/build/styles/db-ui-42-rollup.css";
import "@db-ui/components/build/styles/rollup.css";
```

### Optimize dependencies

If you only need some of the components or some features from [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations), you shouldn't include `db-ui-42`.
If you only need some of the components or some features from [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations), you shouldn't include the bundled file.
In the case you want to include only some components, and you could do it like this:

```css
/* The theme contains all prop required for components like spacings, colors, ... */
@import "@db-ui/foundations/build/css/default-theme.css";
@import "@db-ui/foundations/build/styles/default-theme.css";
/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
@import "@db-ui/foundations/build/css/fonts/include-rollup.css";
@import "@db-ui/foundations/build/styles/fonts/include-rollup.css";
/* The required styles will normalize css and add focus and default font to body */
@import "@db-ui/foundations/build/css/init/required.css";
@import "@db-ui/foundations/build/styles/init/required.css";
/* The default root adds a default color space (neutral) and a density (regular) */
@import "@db-ui/foundations/build/css/init/default-root.css";
@import "@db-ui/foundations/build/styles/init/default-root.css";

/* Optional: Add animations / transitions for components */
@import "@db-ui/components/build/styles/component-animations.css";

/* Optional: Add data-icon/data-icon-after to global attributes to enable icons for components */
@import "@db-ui/foundations/build/css/icons/include-rollup.css";
@import "@db-ui/foundations/build/styles/icons/include-rollup.css";

/* Optional: Add components */
@import "@db-ui/components/build/components/button/button.css";
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ There are some important files where we include `SCSS mixins` and `SCSS placehol
Main use-case margins, paddings, height, width, ... Example:

```scss
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/styles/variables";

.db-xxx {
padding-inline-start: variables.$db-spacing-fixed-2xs;
Expand All @@ -21,7 +21,7 @@ Main use-case margins, paddings, height, width, ... Example:
Main use-case to set/overwrite an icon inside a component. Example:

```scss
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/styles/icons";

.db-xxx {
@include icons.set-icon("chevron_down", "after");
Expand All @@ -33,7 +33,7 @@ Main use-case to set/overwrite an icon inside a component. Example:
Main use-case to overwrite a default font-size/line-height. Example:

```scss
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/styles/fonts";

.db-xxx {
label {
Expand All @@ -47,8 +47,8 @@ Main use-case to overwrite a default font-size/line-height. Example:
Main use-case to overwrite a color or change colors by `data-variant`. Example:

```scss
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/helpers";

.db-xxx {
@include helpers.hover {
Expand Down Expand Up @@ -87,7 +87,7 @@ Main use-case for adaptive components. Example:
Main use-case for media query. Example:

```scss
@use "@db-ui/foundations/build/scss/screen-sizes";
@use "@db-ui/foundations/build/styles/screen-sizes";

.db-xxx {
display: grid;
Expand All @@ -104,7 +104,7 @@ Main use-case for media query. Example:
Main use-case for converting `px` values or inserting UI styling like e.g. a divider. Example:

```scss
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/helpers";

.db-xxx {
@include helpers.divider("top");
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/accordion-item/accordion-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/animation";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/animation";
@use "../../styles/form-components";
@use "../../styles/component";

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/accordion/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/variables";
@use "../../styles/component";

@mixin accordion-subsequent-item-selector() {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/badge/badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "sass:map";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/fonts";
@use "../../styles/button-components";
@use "../../styles/tag-components";
@use "../../styles/component";
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/brand/brand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/fonts";

.db-brand {
@extend %db-overwrite-font-size-md;
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@charset "utf-8";

@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/helpers";
@use "../../styles/component";
@use "../../styles/button-components";

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/helpers";
@use "../../styles/component";

.db-card {
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/helpers";
@use "../../styles/component";
@use "../../styles/form-components";

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/divider/divider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/helpers";

.db-divider {
&:is(:not([data-margin]), [data-margin="small"]) {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "sass:map";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/scss/animation";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/animation";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/component";
@use "./../../styles/dialog-init";

Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/components/header/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/screen-sizes";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/scss/density";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/density";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/component";

.db-header {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/icon/icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/styles/icons";

.db-icon {
@include icons.is-icon-text-replace();
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/infotext/infotext.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "sass:map";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";

.db-infotext {
--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/helpers";
@use "../../styles/component";
@use "../../styles/form-components";
@use "../../styles/button-components";
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/components/link/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@charset "utf-8";

@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/animation";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/animation";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/link-components";

.db-link {
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/components/navigation-item/navigation-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/scss/screen-sizes";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/scss/animation";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/animation";
@use "@db-ui/foundations/build/styles/icons";
@use "../../styles/icon-passing";
@use "../../styles/component";

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/navigation/navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/screen-sizes";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "../../styles/component";
@use "../../styles/form-components";
@use "../../styles/db-puls";
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/components/notification/notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@use "sass:map";
@use "@db-ui/foundations/build/scss/density";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/screen-sizes";
@use "@db-ui/foundations/build/styles/density";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "../../styles/component";
@use "../../styles/link-components";
@use "./notification-grid-default";
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/page/page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/styles/variables";

.db-page-document {
block-size: 100%;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/popover/popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/styles/variables";
@use "../../styles/popover-component";
@use "../../styles/component";

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/radio/radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/form-components";

.db-radio {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/section/section.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/screen-sizes";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/screen-sizes";
@use "../../styles/component";

$default-section-padding-inline: variables.$db-spacing-fixed-md;
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/select/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "sass:map";
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/fonts";
@use "../../styles/form-components";
@use "../../styles/component";

Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/components/switch/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/fonts";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/icons";
@use "../../styles/form-components";

$switch-fixed-padding: helpers.px-to-rem(2);
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/tab-item/tab-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/colors";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/helpers";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/helpers";
@use "../../styles/component";
@use "../../styles/db-puls";
@use "../../styles/form-components";
Expand Down
Loading
Loading