@db-ux/core-foundations 2.0.0-0-6589a60 → 2.0.0

package/assets/icons/LICENCES.json

@@ -95,6 +95,12 @@
 		"licence": "https://lucide.dev/license#lucide-license",
 		"origin": "x"
 	},
+	{
+		"name": "circular_arrows.svg",
+		"type": "lucide",
+		"licence": "https://lucide.dev/license#lucide-license",
+		"origin": "refresh-cw"
+	},
 	{
 		"name": "check.svg",
 		"type": "lucide",

package/assets/icons/circular_arrows.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>

package/build/all-icons.js

@@ -1,28 +1,2 @@
 /* This file was generated */
-export const ALL_ICONS = [
-    'arrow_down',
-    'arrow_left',
-    'arrow_right',
-    'arrow_up',
-    'arrow_up_right',
-    'brand',
-    'calendar',
-    'check',
-    'check_circle',
-    'chevron_down',
-    'chevron_left',
-    'chevron_right',
-    'chevron_up',
-    'clock',
-    'cross',
-    'cross_circle',
-    'exclamation_mark_circle',
-    'exclamation_mark_triangle',
-    'information_circle',
-    'magnifying_glass',
-    'menu',
-    'minus',
-    'plus',
-    'resize_handle_corner',
-    'x_placeholder'
-];
+export const ALL_ICONS = ["arrow_down", "arrow_left", "arrow_right", "arrow_up", "arrow_up_right", "brand", "calendar", "check-circle", "check", "check_circle", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "circle", "circular_arrows", "clock", "cross", "cross_circle", "exclamation_mark_circle", "exclamation_mark_triangle", "information_circle", "magnifying_glass", "menu", "minus", "plus", "resize_handle_corner", "x_placeholder"];

package/build/base-icon-types.d.ts

@@ -1 +1 @@
-export type BaseIconTypes = 'arrow_down' | 'arrow_left' | 'arrow_right' | 'arrow_up' | 'arrow_up_right' | 'brand' | 'calendar' | 'check' | 'check_circle' | 'chevron_down' | 'chevron_left' | 'chevron_right' | 'chevron_up' | 'clock' | 'cross' | 'cross_circle' | 'exclamation_mark_circle' | 'exclamation_mark_triangle' | 'information_circle' | 'magnifying_glass' | 'menu' | 'minus' | 'plus' | 'resize_handle_corner' | 'x_placeholder';
+export type BaseIconTypes = "arrow_down" | "arrow_left" | "arrow_right" | "arrow_up" | "arrow_up_right" | "brand" | "calendar" | "check-circle" | "check" | "check_circle" | "chevron_down" | "chevron_left" | "chevron_right" | "chevron_up" | "circle" | "circular_arrows" | "clock" | "cross" | "cross_circle" | "exclamation_mark_circle" | "exclamation_mark_triangle" | "information_circle" | "magnifying_glass" | "menu" | "minus" | "plus" | "resize_handle_corner" | "x_placeholder";

package/build/ide/db.ide.css

@@ -42,16 +42,16 @@ head {
 	--db-elevation-md: "Changes elevation of element.";
 	--db-elevation-lg: "Changes elevation of element.";
 
-	/* https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/foundation/border-height */
-	--db-border-height-3xs: "Changes border-height of element";
-	--db-border-height-2xs: "Changes border-height of element";
-	--db-border-height-xs: "Changes border-height of element";
-	--db-border-height-sm: "Changes border-height of element";
-	--db-border-height-md: "Changes border-height of element";
-	--db-border-height-lg: "Changes border-height of element";
-	--db-border-height-xl: "Changes border-height of element";
-	--db-border-height-2xl: "Changes border-height of element";
-	--db-border-height-3xl: "Changes border-height of element";
+	/* https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/foundation/border-width */
+	--db-border-width-3xs: "Changes border-width of element";
+	--db-border-width-2xs: "Changes border-width of element";
+	--db-border-width-xs: "Changes border-width of element";
+	--db-border-width-sm: "Changes border-width of element";
+	--db-border-width-md: "Changes border-width of element";
+	--db-border-width-lg: "Changes border-width of element";
+	--db-border-width-xl: "Changes border-width of element";
+	--db-border-width-2xl: "Changes border-width of element";
+	--db-border-width-3xl: "Changes border-width of element";
 
 	/* https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/foundation/border-radius */
 	--db-border-radius-3xs: "Changes border-radius of element";

package/build/styles/_screen-sizes.scss

@@ -1,10 +1,11 @@
 @use "helpers";
+@use "sass:map";
 
-$db-screen-size-xs: 360;
-$db-screen-size-sm: 720;
-$db-screen-size-md: 1024;
-$db-screen-size-lg: 1440;
-$db-screen-size-xl: 1920;
+$db-screen-size-xs: 360; // mobile
+$db-screen-size-sm: 720; // tablet
+$db-screen-size-md: 1024; // small desktop
+$db-screen-size-lg: 1440; // regular desktop
+$db-screen-size-xl: 1920; // large desktop
 
 $db-breakpoint-xs: helpers.px-to-em($db-screen-size-xs);
 $db-breakpoint-sm: helpers.px-to-em($db-screen-size-sm);
@@ -12,7 +13,33 @@ $db-breakpoint-md: helpers.px-to-em($db-screen-size-md);
 $db-breakpoint-lg: helpers.px-to-em($db-screen-size-lg);
 $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 
-@mixin screen($size: "sm", $width: "min") {
+@mixin get-breakpoint-properties() {
+	@property --db-breakpoint-xs {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-xs};
+	}
+
+	@property --db-breakpoint-sm {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-sm};
+	}
+
+	@property --db-breakpoint-md {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-md};
+	}
+
+	@property --db-breakpoint-xl {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-xl};
+	}
+}
+
+@function get-screen-size($size) {
 	$screen: $db-screen-size-sm;
 
 	/* stylelint-disable at-rule-empty-line-before */
@@ -27,6 +54,12 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 	}
 	/* stylelint-enable at-rule-empty-line-before */
 
+	@return $screen;
+}
+
+@mixin screen($size: "sm", $width: "min") {
+	$screen: get-screen-size($size);
+
 	@if ($width == "min") {
 		/* stylelint-disable-next-line media-query-no-invalid */
 		@media screen and (min-width: #{helpers.px-to-em($screen)}) {
@@ -47,3 +80,26 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 		}
 	}
 }
+
+/**
+ * @mixin screen-min-max
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
+ */
+@mixin screen-min-max($data) {
+	$min: "";
+	$max: "";
+
+	@if (map.get($data, "min") != null) {
+		$min: "#{helpers.px-to-em(get-screen-size(map.get($data, "min")))} < ";
+	}
+
+	@if (map.get($data, "max") != null) {
+		$max: " <= #{helpers.px-to-em(get-screen-size(map.get($data, "max")))}";
+	}
+
+	/* stylelint-disable-next-line media-query-no-invalid */
+	@media screen and (#{$min}width#{$max}) {
+		@content;
+	}
+	/* stylelint-disable-next-line at-rule-empty-line-before */
+}

package/build/styles/_variables.scss

@@ -40,15 +40,15 @@ $db-elevation-lg: var(--db-elevation-lg);
 
 /* Border */
 
-$db-border-height-3xs: var(--db-border-height-3xs);
-$db-border-height-2xs: var(--db-border-height-2xs);
-$db-border-height-xs: var(--db-border-height-xs);
-$db-border-height-sm: var(--db-border-height-sm);
-$db-border-height-md: var(--db-border-height-md);
-$db-border-height-lg: var(--db-border-height-lg);
-$db-border-height-xl: var(--db-border-height-xl);
-$db-border-height-2xl: var(--db-border-height-2xl);
-$db-border-height-3xl: var(--db-border-height-3xl);
+$db-border-width-3xs: var(--db-border-width-3xs);
+$db-border-width-2xs: var(--db-border-width-2xs);
+$db-border-width-xs: var(--db-border-width-xs);
+$db-border-width-sm: var(--db-border-width-sm);
+$db-border-width-md: var(--db-border-width-md);
+$db-border-width-lg: var(--db-border-width-lg);
+$db-border-width-xl: var(--db-border-width-xl);
+$db-border-width-2xl: var(--db-border-width-2xl);
+$db-border-width-3xl: var(--db-border-width-3xl);
 
 $db-border-radius-3xs: var(--db-border-radius-3xs);
 $db-border-radius-2xs: var(--db-border-radius-2xs);