Skip to content

Commit

Permalink
feat: convert to whitelabel
Browse files Browse the repository at this point in the history
  • Loading branch information
@nmerget
nmerget committed Dec 19, 2024
1 parent 92fb768 commit f75981a
Show file tree
Hide file tree
Showing 62 changed files with 233 additions and 232 deletions.
26 changes: 13 additions & 13 deletions packages/components/README.md
View file
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`
- 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit f75981a

Please sign in to comment.