@db-ux/core-foundations 2.4.4 → 3.0.1

package/README.md

@@ -32,7 +32,7 @@ First of all you need to import a theme which contains all tokens (css-propertie
 Afterward, you may import helper classes / placeholders to easily consume the tokens from your theme. There are some categories:
 
 - **init**: Global styles which apply to all or a large group of selectors. Make sure to import `inits/required.css` to normalize tags like `body` etc. Furthermore, we provide some default styles.
-- **icons**: Icons classes to load **woff2** files and adds `[data-icon]` and `[data-icon-after]` to enable icons for all tags and components.
+- **icons**: Icons classes to load **woff2** files and adds `[data-icon]` and `[data-icon-trailing]` to enable icons for all tags and components.
 - **helpers**: Use dividers or focus border
 - **fonts**: Overwrite default `font-size`, `line-height` and `icon-size`
 - **density**: Overwrite default density to scale adaptive components inside container using density

package/build/styles/_screen-sizes.scss

@@ -1,8 +1,8 @@
 @use "helpers";
 @use "sass:map";
 
-$db-screen-size-xs: 360; // mobile
-$db-screen-size-sm: 720; // tablet
+$db-screen-size-xs: 320; // mobile
+$db-screen-size-sm: 768; // tablet
 $db-screen-size-md: 1024; // small desktop
 $db-screen-size-lg: 1440; // regular desktop
 $db-screen-size-xl: 1920; // large desktop
@@ -14,25 +14,25 @@ $db-breakpoint-lg: helpers.px-to-em($db-screen-size-lg);
 $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 
 @mixin get-breakpoint-properties() {
-	@property --db-breakpoint-xs {
+	@property --db-screen-xs {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-xs};
 	}
 
-	@property --db-breakpoint-sm {
+	@property --db-screen-sm {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-sm};
 	}
 
-	@property --db-breakpoint-md {
+	@property --db-screen-md {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-md};
 	}
 
-	@property --db-breakpoint-xl {
+	@property --db-screen-xl {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-xl};

package/build/styles/_variables.scss

@@ -91,3 +91,23 @@ $db-transition-straight-emotional: var(--db-transition-straight-emotional);
 $db-transition-straight-functional: var(--db-transition-straight-functional);
 $db-transition-straight-show: var(--db-transition-straight-show);
 $db-transition-straight-hide: var(--db-transition-straight-hide);
+
+/* Screen sizes */
+
+$db-screen-xs: var(--db-screen-xs);
+$db-screen-sm: var(--db-screen-sm);
+$db-screen-md: var(--db-screen-md);
+$db-screen-lg: var(--db-screen-lg);
+$db-screen-xl: var(--db-screen-xl);
+
+/* Container sizes */
+
+$db-container-3xs: var(--db-container-3xs);
+$db-container-2xs: var(--db-container-2xs);
+$db-container-xs: var(--db-container-xs);
+$db-container-sm: var(--db-container-sm);
+$db-container-md: var(--db-container-md);
+$db-container-lg: var(--db-container-lg);
+$db-container-xl: var(--db-container-xl);
+$db-container-2xl: var(--db-container-2xl);
+$db-container-3xl: var(--db-container-3xl);