fix: remaining issues for build

Author: nmerget

CODE-OF-CONDUCT.md

@@ -6,7 +6,7 @@ We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
 identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, caste, color, religion, or sexual
+nationality, plusal appearance, race, caste, color, religion, or sexual
 identity and orientation.
 
 We pledge to act and interact in ways that contribute to an open, welcoming,
@@ -29,7 +29,7 @@ Examples of unacceptable behavior include:
 
 - The use of sexualized language or imagery, and sexual attention or advances of
   any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
+- Trolling, insulting or derogatory comments, and plusal or political attacks
 - Public or private harassment
 - Publishing others' private information, such as a physical or email address,
   without their explicit permission

angular17-example/README.md

@@ -43,9 +43,9 @@
 13. `expressive`
 14. Goto browser; All texts should have different sizes
 15. Goto `src/app/app.component.html` and add `class` with those classes for each `<div>`:
-    1. `db-informational-bg-basic-level-1`
-    2. `db-successful-bg-basic-level-1`
-    3. `db-successful-bg-basic-level-2`
+    1. `db-color-informational`
+    2. `db-color-successful`
+    3. `db-color-successful db-bg-color-basic-level-2`
 19. Goto browser; All containers should have different background and foreground colors
 20. Goto `src/styles.scss` and append a new class:
 
@@ -75,5 +75,5 @@ export class AppComponent {
 }
 ```
 
-18. Goto `src/app/app.component.html` and add `<db-button icon="user">Test</db-button>` inside each div
+18. Goto `src/app/app.component.html` and add `<db-button icon="plus">Test</db-button>` inside each div
 19. Goto browser; Button should be visible with different paddings

angular17-example/src/app/app.component.html

@@ -1,26 +1,26 @@
 <main>
   <div
     data-density="functional"
-    class="db-informational-bg-basic-level-1 container-with-padding"
+    class="db-color-informational container-with-padding"
   >
     <h1>db-ux-functional</h1>
     <p>Use this as default for enterprise apps</p>
-    <db-button icon="person">Test</db-button>
+    <db-button icon="plus">Test</db-button>
   </div>
   <div
     data-density="regular"
-    class="db-successful-bg-basic-level-1 container-with-padding"
+    class="db-color-successful container-with-padding"
   >
     <h1>db-ux-regular</h1>
     <p>Use this as default for consumer apps</p>
-    <db-button icon="person">Test</db-button>
+    <db-button icon="plus">Test</db-button>
   </div>
   <div
     data-density="expressive"
-    class="db-successful-bg-basic-level-2 container-with-padding"
+    class="db-color-successful db-bg-color-basic-level-2 container-with-padding"
   >
     <h1>db-ux-expressive</h1>
     <p>Use this as default for marketing apps</p>
-    <db-button icon="person">Test</db-button>
+    <db-button icon="plus">Test</db-button>
   </div>
 </main>

react-example/README.md

@@ -12,7 +12,7 @@
 
 ```scss
 // Combined dependencies like variables, colors and tonality and all components
-@forward "@db-ux/core-components/build/styles/db-ux-42-rollup";
+@forward "@db-ux/core-components/build/styles/rollup";
 ```
 
 7. Goto `src/main.tsx` and rename `import './index.css'` to `import './index.scss'`
@@ -49,9 +49,9 @@ export default App;
     3. `expressive`
 12. Goto browser; All texts should have different sizes
 13. Goto `src/App.tsx` and add `className` with those classes for each `<div>`:
-    1. `db-informational-bg-basic-level-1`
-    2. `db-successful-bg-basic-level-1`
-    3. `db-successful-bg-basic-level-2`
+    1. `db-color-informational`
+    2. `db-color-successful`
+    3. `db-color-successful db-bg-color-basic-level-2`
 14. Goto browser; All containers should have different background and foreground colors
 15. Goto `src/index.scss` and append a new class:
 

react-example/src/App.tsx

@@ -5,27 +5,27 @@ const App = () => {
     <main>
       <div
         data-density="functional"
-        className="db-informational-bg-basic-level-1 container-with-padding"
+        className="db-color-informational container-with-padding"
       >
         <h1>db-ux-functional</h1>
         <p>Use this as default for enterprise apps</p>
-        <DBButton icon="person">Test</DBButton>
+        <DBButton icon="plus">Test</DBButton>
       </div>
       <div
         data-density="regular"
-        className="db-successful-bg-basic-level-1 container-with-padding"
+        className="db-color-successful container-with-padding"
       >
         <h1>db-ux-regular</h1>
         <p>Use this as default for consumer apps</p>
-        <DBButton icon="person">Test</DBButton>
+        <DBButton icon="plus">Test</DBButton>
       </div>
       <div
         data-density="expressive"
-        className="db-successful-bg-basic-level-2 container-with-padding"
+        className="db-color-successful db-bg-color-basic-level-2 container-with-padding"
       >
         <h1>db-ux-expressive</h1>
         <p>Use this as default for marketing apps</p>
-        <DBButton icon="person">Test</DBButton>
+        <DBButton icon="plus">Test</DBButton>
       </div>
     </main>
   );

react-example/src/index.scss

@@ -2,8 +2,6 @@
 @forward "@db-ux/core-components/build/styles/rollup";
 // We use $db-spacing-fixed-md variable so we need to import the file where the variable is defined
 @use "@db-ux/core-foundations/build/styles/variables";
-// Color-classes are optional, we use them in the example to have easy access to colors
-@forward "@db-ux/core-foundations/build/css/colors/classes/all";
 
 // Example styles
 .container-with-padding {

react-tailwind-template/src/pages/Page1.tsx

@@ -14,7 +14,7 @@ const Page1 = () => {
         <p data-font-size="sm">Smaller font-size</p>
         <div className="flex gap-fix-md flex-wrap">
           {/* TODO: Change my icon; https://db-ux-design-system.github.io/core-web/review/main/foundations/icons/overview */}
-          <DBButton icon="person">Button 1</DBButton>
+          <DBButton icon="plus">Button 1</DBButton>
           <DBButton>Button 2</DBButton>
           <DBButton>Button 3</DBButton>
         </div>

vue-example/README.md

@@ -47,9 +47,9 @@
     3. `expressive`
 12. Goto browser; All texts should have different sizes
 13. Goto `src/App.vue` and add `class` with those classes for each `<div>`:
-    1. `db-informational-bg-basic-level-1`
-    2. `db-successful-bg-basic-level-1`
-    3. `db-successful-bg-basic-level-2`
+    1. `db-color-informational`
+    2. `db-color-successful`
+    3. `db-color-successful db-bg-color-basic-level-2`
 14. Goto browser; All containers should have different background and foreground colors
 15. Goto `src/style.scss` and append a new class:
 
@@ -61,5 +61,5 @@
 
 16. Goto `src/App.vue` and add `container-with-padding` class for each `<div>`
 17. Goto browser; All containers should have different paddings
-18. Goto `src/App.vue` and add `import { DBButton } from "@db-ux/v-core-components";` inside the `<script>` tags and add `<DBButton icon="person">Test</DBButton>` inside each div
+18. Goto `src/App.vue` and add `import { DBButton } from "@db-ux/v-core-components";` inside the `<script>` tags and add `<DBButton icon="plus">Test</DBButton>` inside each div
 19. Goto browser; Button should be visible with different paddings

vue-example/src/App.vue

@@ -6,27 +6,27 @@ import { DBButton } from "@db-ux/v-core-components";
   <main>
     <div
       data-density="functional"
-      class="db-informational-bg-basic-level-1 container-with-padding"
+      class="db-color-informational container-with-padding"
     >
       <h1>db-ux-functional</h1>
       <p>Use this as default for enterprise apps</p>
-      <DBButton icon="person">Test</DBButton>
+      <DBButton icon="plus">Test</DBButton>
     </div>
     <div
       data-density="regular"
-      class="db-successful-bg-basic-level-1 container-with-padding"
+      class="db-color-successful container-with-padding"
     >
       <h1>db-ux-regular</h1>
       <p>Use this as default for consumer apps</p>
-      <DBButton icon="person">Test</DBButton>
+      <DBButton icon="plus">Test</DBButton>
     </div>
     <div
       data-density="expressive"
-      class="db-successful-bg-basic-level-2 container-with-padding"
+      class="db-color-successful db-bg-color-basic-level-2 container-with-padding"
     >
       <h1>db-ux-expressive</h1>
       <p>Use this as default for marketing apps</p>
-      <DBButton icon="person">Test</DBButton>
+      <DBButton icon="plus">Test</DBButton>
     </div>
   </main>
 </template>

vue-example/src/style.scss

@@ -1,9 +1,7 @@
 // Combined dependencies like variables, colors and tonality and all components
-@forward "@db-ux/core-components/build/styles/db-ux-42-rollup";
+@forward "@db-ux/core-components/build/styles/rollup";
 // We use $db-spacing-fixed-md variable so we need to import the file where the variable is defined
 @use "@db-ux/core-foundations/build/styles/variables";
-// Color-classes are optional, we use them in the example to have easy access to colors
-@forward "@db-ux/core-foundations/build/css/colors/classes/all";
 
 // Example styles
 .container-with-padding {