feat: replace dbux-2 base with dbux-3 (#95)

* feat: replace dbux-2 base with dbux-3

Co-authored-by: Maximilian Franzke <[email protected]>

Author: nmerget

package-lock.json

@@ -60,7 +60,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@csstools/normalize.css": "^12.0.0",
-    "@db-ui/base": "^0.18.0"
+    "@db-ui/base": "2.0.0-0-01dc14a"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",

package.json

@@ -20,14 +20,17 @@
 	$margin-top: $width * 0.2,
 	$margin-bottom: $width * 0.35
 ) {
-	background-color: $db-color-red-500;
-	border-bottom: 4px solid $db-color-red-500;
+	background-color: $db-colors-primary-enabled;
+	border-bottom: 4px solid $db-colors-primary-enabled;
 	border-radius: 5px;
+	border-top: 3px solid $db-colors-primary-enabled;
 	border-top: 3px solid $db-color-red-500;
 	content: "";
 	display: block;
 	height: 0;
+	height: 0;
 	margin-bottom: $margin-bottom;
 	margin-top: $margin-top;
 	width: $width;
+	width: $width;
 }

source/_patterns/00-base/_helpers.scss

@@ -29,7 +29,7 @@ input,
 optgroup,
 select,
 textarea {
-	font-family: $db-font-family-base;
+	font-family: $db-font-family-sans;
 }
 
 code,
@@ -39,15 +39,15 @@ pre {
 }
 
 body {
-	color: $db-color-cool-gray-700;
+	color: $db-colors-secondary-enabled;
 	font-size: 1rem;
 	font-weight: 400;
 	line-height: 1.5;
 }
 
 // Inline
 a {
-	color: $db-color-cool-gray-700;
+	color: $db-colors-secondary-enabled;
 
 	strong {
 		color: currentColor;
@@ -60,7 +60,7 @@ a {
 
 code {
 	background-color: #f5f5f5;
-	color: darken($db-color-red, 2%);
+	color: darken($db-colors-primary-enabled, 2%);
 	font-size: 0.875em;
 	font-weight: normal;
 	padding: 0.25em 0.5em;

source/_patterns/00-base/_init.global.scss

@@ -1,64 +1,2 @@
 // DB colors
 @import "../colors.variables";
-
-// EDS semantic colors (TODO: probably leftovers, those would most likely need to get replaced again as soon as the Enterprise extension is finalized)
-
-$DBdarkgray: $db-color-cool-gray-500; // DB Dunkelgrau/DB dark gray
-$DBblue: $db-color-cyan-600; // DB Blau/DB blue
-$DBwhitegray: $db-color-cool-gray-200; // DB Weißgrau/DB white-gray
-$DBlightgray: $db-color-cool-gray-300; // DB light-gray
-$DBgray: $db-color-cool-gray-400; // DB gray
-
-// * General
-$black: $db-color-cool-gray-800;
-$black-bis: $db-color-cool-gray-700;
-$black-ter: $db-color-cool-gray-600;
-
-$gray-darker: $db-color-cool-gray-600;
-$gray-dark: $DBdarkgray;
-$gray: $DBgray;
-$gray-light: $DBlightgray;
-$gray-lighter: $DBwhitegray;
-
-// $white-ter:
-// $white-bis:
-// $white:
-
-$orange: $db-color-yellow-900;
-// $yellow:
-$green: $db-color-green-600;
-// $turquoise:
-// $cyan:
-$blue: $db-color-cyan-600;
-// $purple:
-$red: $db-color-red;
-$red-invert: #fff;
-
-// * Enterprise Design System
-
-// Enterprise Design System Colors
-$Text: $db-color-cool-gray-800; // Text
-$Background: $db-color-cool-gray-700; // Background, buttons
-$Buttons: $db-color-cool-gray-700; // Background, buttons
-$Icons: $db-color-cool-gray-600; // Icons, divider
-$divider01: $db-color-cool-gray-700; // Icons, divider
-$inputfields: $DBdarkgray; // Input fields
-$selected: $db-color-cool-gray-400; // selected -> to be changed
-$divider02: $db-color-cool-gray-200; // Divider
-$hover: $db-color-cool-gray-200; // hover -> to be changed
-$LightBG: #fdfdfd; // Background
-$highlight-color01: $db-color-red; // Highlight color
-$highlight-color02: $blue; // Highlight color
-$hover-buttons: $db-color-red-600; // hover Buttons
-
-// Semantic color codes
-// * light background
-// $db-color-red-500, defined already
-// $db-color-light-green-400, defined already
-// $db-color-cyan-300, defined already
-// * dark background
-// $db-color-yellow-300, defined already
-// $db-color-light-green-300, defined already
-
-// Color set
-$eds-colors: () !default;