@porsche-design-system/utilities - npm Package Compare versions

Comparing version 5.4.0 to 5.4.1

CHANGELOG.md

 # Changelog
 
-## Porsche Design System - Utilities
+## Porsche Design System - Utilities **DEPRECATED**
 
@@ -12,2 +12,692 @@ All notable changes to this project will be documented in this file.
 
+### [5.4.1] - 2023-03-03
+
+This package is **deprecated** and will no longer be maintained. All `Porsche Design System` utilities are now provided
+via the `@porsche-design-system/components-{js|angular|react|vue}/styles` sub-package. To make the migration easier, we
+offer an overview of the old deprecated values in reference to the new styles. Further documentation about the new
+styles can be found [here](https://designsystem.porsche.com/latest/styles/introduction).
+
+#### Changed
+
+##### JS
+
+**Functions**
+
+- `focus()` is now `getFocusStyle()`.
+
+```diff
+- import { focus } from '@porsche-design-system/utilities';
++ import { getFocusStyle } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.a`
+-  ${focus()}
++  ${getFocusStyle()}
+`;
+
+const Component2 = styled.a`
+-  ${focus({ color: color.state.focus, offset: '1px', pseudo: '::before' })}
++  ${getFocusStyle({ offset: 'small', borderRadius: 'small', theme: 'light' })}
+`;
+```
+
+- `breakpoint` `xxs` is now `base`.
+
+```diff
+- import { breakpoint } from '@porsche-design-system/utilities';
++ import { breakpoint } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+
+- if (window.matchMedia(`(min-width: ${breakpoint.xxs}px)`).matches) {
++ if (window.matchMedia(`(min-width: ${breakpoint.base}px)`).matches) {
+  /* The viewport is greater than, or equal to the breakpointValue wide */
+}
+```
+
+- instead of `mediaQuery()` we provide now `getMediaQueryMin()`, `getMediaQueryMax()` and `getMediaQueryMinMax()`.
+  Furthermore, the functions accept only the predefined breakpoints from `base` to `xxl` and no custom breakpoints
+  anymore.
+
+```diff
+- import { breakpoint, mediaQuery } from '@porsche-design-system/utilities';
++ import { breakpoint, getMediaQueryMin, getMediaQueryMax, getMediaQueryMinMax } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.div({
+  color: 'royalblue',
+
+  // up to predefined breakpoint xs apply color black
++  [getMediaQueryMax(breakpoint.xs)]: {
+    color: 'black'
+  }
+
+  // from predefined breakpoint xs to m apply color aqua
+-  [mediaQuery(breakpoint.xs, breakpoint.m)]: {
++  [getMediaQueryMinMax(breakpoint.xs, breakpoint.m)]: {
+    color: 'aqua'
+  },
+
+  // from predefined breakpoint m apply color deeppink
+-  [mediaQuery(breakpoint.m)]: {
++  [getMediaQueryMin(breakpoint.m)]: {
+    color: 'deeppink'
+  }
+}`;
+```
+
+- `titleLarge` got renamed to `displayLargeStyle`.
+
+```diff
+- import { titleLarge } from '@porsche-design-system/utilities';
++ import { displayMediumStyle, displayLargeStyle } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.h1`
+-  ${titleLarge}
++  ${displayLargeStyle}
+`;
+
+const component2 = styled.h2`
++  ${displayMediumStyle}
+`;
+```
+
+- `headline{1|2|3|4|5}` got renamed to `heading{Small|Medium|Large|XLarge|XXLarge|XXXLarge}Style`.
+
+```diff
+- import { headline } from '@porsche-design-system/utilities';
++ import { headingXXLargeStyle } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.h1`
+-  ${headline['1']}
++  ${headingXXLargeStyle}
+`;
+```
+
+- `text` got renamed to `text{XSmall|Small|Medium|Large|XLarge}Style`.
+
+```diff
+- import { text } from '@porsche-design-system/utilities';
++ import { textSmallStyle } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.p`
+-  ${text.small}
++  ${textSmallStyle}
+`;
+```
+
+**Colors**
+
+As of v3 of the Porsche Design System the color theme got reworked completely to achieve a monochrome look. To get an
+overview of the new colors have a look [here](https://designsystem.porsche.com/latest/styles/theme).
+
+- `color.lightTheme` and `color.darkTheme` got renamed to `theme.light` and `theme.dark`. In addition, you can also
+  single import a theme, e.g. if you only need `themeLight`.
+
+```diff
+- import { color } from '@porsche-design-system/utilities';
++ import { theme, themeLight, themeDark } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+```
+
+Since the styles for `themeLight` and `themeDark` are synchronized, the name changes mentioned below affect both themes,
+even if only the light theme is displayed in the diff.
+
+- `brand` got renamed to `primary`.
+
+```diff
+- import { color } from '@porsche-design-system/utilities';
++ import { theme } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.div({
+-  background: color.lightTheme.brand
++  background: theme.light.primary
+});
+```
+
+- `default` is removed, use `primary` instead.
+
+```diff
+- import { color } from '@porsche-design-system/utilities';
++ import { theme } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.div({
+-  background: color.lightTheme.default
++  background: theme.light.primary
+});
+```
+
+- `backgound.default` is renamed to `background.base`.
+
+```diff
+- import { color } from '@porsche-design-system/utilities';
++ import { theme } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.div({
+-  background: color.lightTheme.background.default
++  background: theme.light.background.base
+});
+```
+
+- `neutralContrast` is renamed to `contrast`.
+
+```diff
+- import { color } from '@porsche-design-system/utilities';
++ import { theme } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.div({
+-  background: color.lightTheme.neutralContrast.medium
++  background: theme.light.contrast.medium
+});
+```
+
+- `notification.neutral` and `notification.neutralSoft` are renamed to `notification.info` and `notification.infoSoft`.
+
+```diff
+- import { color } from '@porsche-design-system/utilities';
++ import { theme } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const component1 = styled.div({
+-  background: color.lightTheme.notification.neutral
++  background: theme.light.notification.info
+});
+
+const component2 = styled.div({
+-  background: color.lightTheme.notification.neutralSoft
++  background: theme.light.notification.infoSoft
+});
+```
+
+- `state.focus` is changed from `currentColor` to a fixed color, depending on the theme.
+
+**Font**
+
+- `fontFamily` is provided the same way, only the import has changed.
+
+```diff
+- import { fontFamily } from '@porsche-design-system/utilities';
++ import { fontFamily } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+```
+
+- `fontWeight` is provided the same way, only the import has changed.
+
+```diff
+- import { fontWeight } from '@porsche-design-system/utilities';
++ import { fontWeight } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+```
+
+**Spacings**
+
+With the upcoming v3 release, we will introduce fluid spacers in addition to our static spacers. These spacers will
+adjust in size based on a min and max value, providing a fluid response to changes in browser width.
+
+```diff
++ import { spacing, spacingFluid } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+```
+
+Additionally, we've switched from using _rem_ to _px_ for our spacers to ensure they don't unnecessarily expand when the
+root font size is adjusted.
+
+```diff
+- import { layout } from '@porsche-design-system/utilities';
++ import { spacingStatic } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
+import styled from 'styled-components';
+
+const Component1 = styled.div({
+-  margin: layout.medium
++  margin: spacingStatic.medium
+});
+```
+
+To get an overview of the new spacings have a look [here](https://designsystem.porsche.com/latest/styles/spacing).
+
+##### SCSS
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+```
+
+**Mixins**
+
+- `p-focus` is now `pds-focus`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+a {
+-  @include p-focus;
++  @include pds-focus;
+}
+
+button {
+-  @include p-focus($p-color-state-focus, 1px, '::before');
++  @include pds-focus('small', 'small', 'light');
+}
+```
+
+- `breakpoint` `xxs` is now `base`.
+- instead of `p-media-query` we provide now `pds-media-query-min`, `pds-media-query-max` and `pds-media-query-min-max`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+div {
+  color: inherit;
+
+   // up to predefined breakpoint xs apply color black
++  @include pds-media-query-max('xs') {
+    color: black;
+  }
+
+  // from predefined breakpoint xs to m apply color aqua
+-  @include p-media-query('xs', 'm') {
++  @include pds-media-query-min-max('xs', 'm')
+    color: aqua;
+  }
+
+  // from predefined breakpoint m apply color deeppink
+-  @include p-media-query('m') {
++  @include pds-media-query-min('m')
+    color: deeppink;
+  }
+}
+```
+
+- `p-title-large` mixin is now renamed to `pds-display-large` and in addition we provide `pds-display-medium`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+h1 {
+-  @include p-title-large;
++  @include pds-display-large;
+}
+
+h2 {
++  @include pds-display-medium;
+}
+```
+
+- `p-headline-{1|2|3|4|5}` got renamed/extended to `pds-heading-{small|medium|large|x-large|xx-large|xxx-large}`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+h1 {
+-  @include p-headline-1;
++  @include pds-heading-xx-large;
+}
+
+h2 {
+-  @include p-headline-2;
++  @include pds-heading-x-large;
+}
+```
+
+- `p-text-{x-small|small|medium|large|x-large}` got renamed to `pds-text-{x-small|small|medium|large|x-large}`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+p {
+-  @include p-text-small;
++  @include pds-text-small;
+}
+```
+
+**Colors**
+
+As of v3 of the Porsche Design System the color theme got reworked completely to achieve a monochrome look. To get an
+overview ot the new colors have a look [here](https://designsystem.porsche.com/latest/styles/theme).
+
+- `brand` got renamed to `primary`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+div {
+-  background: {$p-color-brand|$p-color-theme-light-brand};
++  background: $pds-theme-light-primary;
+}
+```
+
+- `default` is removed, use `primary` instead.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+div {
+-  color: {$p-color-default|$p-color-theme-light-default};
++  color: $pds-theme-light-primary;
+}
+```
+
+- `$p-color-theme-light-background` is renamed to `$pds-theme-light-background-base`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+div {
+-  background: {$p-color-background-default|$p-color-theme-light-background};
++  background: $pds-theme-light-background-base;
+}
+```
+
+- for the sake of clarity, only the old color variables are mentioned below in relation to their new names:
+
+```diff
+- $p-color-background-surface
+- $p-color-theme-light-surface
++ $pds-theme-light-background-surface
+
+- $p-color-background-shading
+- $p-color-theme-light-background-shading
++ $pds-theme-light-background-shading
+```
+
+```diff
+- $p-color-neutral-contrast-low
+- $p-color-theme-light-neutral-contrast-low
++ $pds-theme-light-contrast-low
+
+- $p-color-neutral-contrast-medium
+- $p-color-theme-light-neutral-contrast-medium
++ $pds-theme-light-contrast-medium
+
+- $p-color-neutral-contrast-high
+- $p-color-theme-light-neutral-contrast-high
++ $pds-theme-light-contrast-high
+```
+
+- `$p-color-notification-neutral` and `$p-color-notification-neutral-soft` are renamed to
+  `$pds-theme-light-notification-info` and `$pds-theme-light-notification-info-soft`.
+
+```diff
+- $p-color-notification-success
+- $p-color-theme-light-notification-success
++ $pds-theme-light-notification-success
+
+- $p-color-notification-success-soft
+- $p-color-theme-light-notification-success-soft
++ $pds-theme-light-notification-success-soft
+
+- $p-color-notification-warning
+- $p-color-theme-light-notification-warning
++ $pds-theme-light-notification-warning
+
+- $p-color-notification-warning-soft
+- $p-color-theme-light-notification-warning-soft
++ $pds-theme-light-notification-warning-soft
+
+- $p-color-notification-error
+- $p-color-theme-light-notification-error
++ $pds-theme-light-notification-error
+
+- $p-color-notification-error-soft
+- $p-color-theme-light-notification-error-soft
++ $pds-theme-light-notification-error-soft
+
+- $p-color-notification-neutral
+- $p-color-theme-light-notification-neutral
++ $pds-theme-light-notification-info
+
+- $p-color-notification-neutral-soft
+- $p-color-theme-light-notification-neutral-soft
++ $pds-theme-light-notification-info-soft
+```
+
+- `$pds-theme-light-state-focus` is now a fixed color depending on theme instead of `currentColor`.
+
+```diff
+- $p-color-state-hover
+- $p-color-theme-light-state-hover
++ $pds-theme-light-state-hover
+
+- $p-color-state-active
+- $p-color-theme-light-state-active
++ $pds-theme-light-state-active
+
+- $p-color-state-focus
+- $p-color-theme-light-state-focus
++ $pds-theme-light-state-focus
+
+- $p-color-state-disabled
+- $p-color-theme-light-state-disabled
++ $pds-theme-light-state-disabled
+```
+
+- all name changes that happened in theme light also apply to theme dark:
+
+```diff
+- $p-color-theme-dark-brand
++ $pds-theme-dark-primary
+
+- $p-color-theme-dark-default
++ $pds-theme-dark-background-base
+
+- $p-color-theme-dark-background-default
++ $pds-theme-dark-primary
+
+- $p-color-theme-dark-background-surface
++ $pds-theme-dark-background-surface
+
+- $p-color-theme-dark-background-shading
++ $pds-theme-dark-background-shading
+
+- $p-color-theme-dark-neutral-contrast-high
++ $pds-theme-dark-contrast-high
+
+- $p-color-theme-dark-neutral-contrast-medium
++ $pds-theme-dark-contrast-medium
+
+- $p-color-theme-dark-neutral-contrast-low
++ $pds-theme-dark-contrast-low
+
+- $p-color-theme-dark-notification-success
++ $pds-theme-dark-notification-success
+
+- $p-color-theme-dark-notification-success-soft
++ $pds-theme-dark-notification-success-soft
+
+- $p-color-theme-dark-notification-warning
++ $pds-theme-dark-notification-warning
+
+- $p-color-theme-dark-notification-warning-soft
++ $pds-theme-dark-notification-warning-soft
+
+- $p-color-theme-dark-notification-error
++ $pds-theme-dark-notification-error
+
+- $p-color-theme-dark-notification-error-soft
++ $pds-theme-dark-notification-error-soft
+
+- $p-color-theme-dark-notification-neutral
++ $pds-theme-dark-notification-info
+
+- $p-color-theme-dark-notification-neutral-soft
++ $pds-theme-dark-notification-info-soft
+
+- $p-color-theme-dark-state-hover
++ $pds-theme-dark-state-hover
+
+- $p-color-theme-dark-state-active
++ $pds-theme-dark-state-active
+
+- $p-color-theme-dark-state-focus
++ $pds-theme-dark-state-focus
+
+- $p-color-theme-dark-state-disabled
++ $pds-theme-dark-state-disabled
+```
+
+**Font**
+
+- `$p-font-family` got renamed to `$pds-font-family`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+p {
+-  font-family: $p-font-family;
++  font-family: $pds-font-family;
+}
+```
+
+- `$p-font-weight-{regular|semi-bold|bold}` got renamed to `$pds-font-weight-{regular|semi-bold|bold}`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+button {
+-  font-weight: $p-font-weight-bold;
++  font-weight: $pds-font-weight-bold;
+}
+```
+
+- `$p-font-size-{x-small|small|medium|large|x-large}` got renamed to
+  `$pds-font-size-{x-small|small|medium|large|x-large}`.
+
+```diff
+- @import '~@porsche-design-system/utilities/scss';
++ @import '~@porsche-design-system/components-{js|angular|react|vue}/styles/scss';
+
+button {
+-  font-size: $p-font-size-medium;
++  font-size: $pds-font-size-medium;
+}
+```
+
+**Spacings**
+
+With the upcoming v3 release, we will introduce fluid spacers in addition to our static spacers. These spacers will
+adjust in size based on a min and max value, providing a fluid response to changes in browser width.
+
+```diff
++ $pds-spacing-fluid-x-small
++ $pds-spacing-fluid-small
++ $pds-spacing-fluid-medium
++ $pds-spacing-fluid-large
++ $pds-spacing-fluid-x-large
++ $pds-spacing-fluid-xx-large
+```
+
+Additionally, we've switched from using _rem_ to _px_ for our spacers to ensure they don't unnecessarily expand when the
+root font size is adjusted.
+
+```diff
+- $p-layout-x-small
++ $pds-spacing-static-x-small
+
+- $p-layout-small
++ $pds-spacing-static-small
+
+- $p-layout-medium
++ $pds-spacing-static-medium
+
+- $p-layout-large
++ $pds-spacing-static-large
+
+- $p-layout-x-large
++ $pds-spacing-static-x-large
+
+- $p-layout-xx-large
++ $pds-spacing-static-xx-large
+```
+
+To get an overview of the new spacings have a look [here](https://designsystem.porsche.com/latest/styles/spacing).
+
+#### Deprecated
+
+##### JS
+
+**Functions**
+
+- `pxToRem()` will be removed in v3 without replacement.
+- `remToPx()` will be removed in v3 without replacement.
+- `calculateLineHeight()` will be removed in v3. To set the `line-height`, use the `fontLineHeight` style provided.
+- `generateTypeScale()` will be removed in v3. Since the font sizes are now fluid, the `fontLineHeight` style and one of
+  the provided font sizes should be used.
+- `generateFontDefinition()` will be removed in v3. We provide `fontFamily`, `fontWeight`, `fontLineHeight` and multiple
+  font sizes, which should be used instead.
+
+**Colors**
+
+- all `external` colors are no longer available in v3.
+
+**Font**
+
+- `fontWeight.thin` is removed as of v3. Please use `fontWeight.regular` instead.
+- the static `font.size` object is no longer provided in v3. Please use one of the predefined fluid font sizes or the
+  `fontLineHeight` style and on of the provided font sizes to recreate it.
+
+**Spacings**
+
+- the static `spacing` object with `rem` spacings is no longer provided in v3. Please use one of the provided static
+  `spacingStatic.{XSmall|Small|Medium|Large|XLarge|XXLarge}` or fluid
+  `spacingFluid.{XSmall|Small|Medium|Large|XLarge|XXLarge}` spacings instead.
+
+```diff
+- spacing[{4|8|16|24|32|40|48|56|64|72|80}]
+```
+
+##### SCSS
+
+**Mixins**
+
+- `p-px-to-rem` will be removed in v3 without replacement.
+- `p-rem-to-px` will be removed in v3 without replacement.
+- `p-calculate-line-height` will be removed in v3. To set the `line-height`, use the `$pds-font-line-height` variable.
+- `p-generate-type-scale` will be removed in v3 since the font sizes are now fluid. The `$pds-font-line-height` style
+  and one of the provided font sizes should be used.
+- `p-generate-font-definition` will be removed in v3. We provide `$pds-font-family`, `$pds-font-weight`,
+  `$pds-font-line-height` and multiple font sizes, which should be used instead.
+
+**Colors**
+
+- theme `light-electric` and `dark-electric` are no longer available in v3.
+- all `external` colors are no longer available in v3.
+
+**Font**
+
+- `$p-font-weight-thin` is removed as of v3. Please use `$pds-font-weight-regular` instead.
+- static font sizes `$p-font-size-{12]16|18|20|22|24|28|30|32|36|42|44|48|52|60|62|72|84}` will be removed in v3. Please
+  use one of the predefined fluid font sizes or the `$pds-font-line-height` style and on of the provided font sizes, to
+  recreate it.
+
+**Spacings**
+
+- static spacings with _rem_ values are no longer provided in v3. Please use one of the provided static
+  `$pds-spacing-static-{x-small|small|medium|large|x-large|xx-large}` or fluid
+  `$pds-spacing-fluid-{x-small|small|medium|large|x-large|xx-large}` spacing instead.
+
+```diff
+- $p-spacing-4
+- $p-spacing-8
+- $p-spacing-16
+- $p-spacing-24
+- $p-spacing-32
+- $p-spacing-40
+- $p-spacing-48
+- $p-spacing-56
+- $p-spacing-64
+- $p-spacing-72
+- $p-spacing-80
+```
+
 ### [5.4.0] - 2022-12-15
@@ -14,0 +704,0 @@

dist/js/esm/index.js

@@ -75,22 +75,2 @@ const breakpoint = {
 };
-const lightElectricTheme = {
-    ...lightTheme,
-    brand: '#00b0f4',
-    state: {
-        hover: '#00b0f4',
-        active: '#00b0f4',
-        focus: lightTheme.state.focus,
-        disabled: lightTheme.state.disabled,
-    },
-};
-const darkElectricTheme = {
-    ...darkTheme,
-    brand: '#00b0f4',
-    state: {
-        hover: '#00b0f4',
-        active: '#00b0f4',
-        focus: darkTheme.state.focus,
-        disabled: darkTheme.state.disabled,
-    },
-};
 const color = {
@@ -106,10 +86,2 @@ /**
     /**
-     * Theme light electric as optional
-     */
-    lightElectricTheme,
-    /**
-     * Theme dark electric as optional
-     */
-    darkElectricTheme,
-    /**
      * External brand colors
@@ -386,4 +358,3 @@ */
 const pxToRem = (px) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = px === null || px === void 0 ? void 0 : px.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (px === null || px === void 0 ? void 0 : px.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit !== 'px' || fontSizeValue === '0') {
@@ -397,4 +368,3 @@ throw new Error('function only accepts value in rem and not 0, e.g. 16px');
 const remToPx = (rem) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = rem === null || rem === void 0 ? void 0 : rem.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (rem === null || rem === void 0 ? void 0 : rem.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit !== 'rem' || fontSizeValue === '0') {
@@ -415,4 +385,3 @@ throw new Error('function only accepts value in rem and not 0, e.g. 1.5rem');
 const generateTypeScale = (fontSize) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit === undefined) {
@@ -432,4 +401,3 @@ throw new Error('getFontSizeRem() only accepts rem or px as parameter');
 const calculateLineHeight = (fontSize) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit === undefined || fontSizeValue === undefined || fontSizeValue === '0') {
@@ -456,3 +424,3 @@ throw new Error(`font size needs to be value + px or rem and not 0, e.g. 15rem or 16px, received: '${fontSize}'`);
 const isCdnCn = typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn';
-const FONT_FACE_CDN_URL = (isCdnCn ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/styles/' + (isCdnCn ? 'font-face.min.cn.ab128226e97d77abe80c8c491374b9b3.css' : 'font-face.min.6fdc3844907953937260ca9bdb49bf8d.css');
+const FONT_FACE_CDN_URL = (isCdnCn ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/styles/' + (isCdnCn ? 'font-face.min.cn.dbb9b1f73aba20c5fad38212405e1a68.css' : 'font-face.min.955063f599f3c828248b49f258753ba8.css');
 /**
@@ -459,0 +427,0 @@ * @deprecated since v1.1.0.

dist/js/index.js

@@ -77,22 +77,2 @@ 'use strict';
 };
-const lightElectricTheme = {
-    ...lightTheme,
-    brand: '#00b0f4',
-    state: {
-        hover: '#00b0f4',
-        active: '#00b0f4',
-        focus: lightTheme.state.focus,
-        disabled: lightTheme.state.disabled,
-    },
-};
-const darkElectricTheme = {
-    ...darkTheme,
-    brand: '#00b0f4',
-    state: {
-        hover: '#00b0f4',
-        active: '#00b0f4',
-        focus: darkTheme.state.focus,
-        disabled: darkTheme.state.disabled,
-    },
-};
 const color = {
@@ -108,10 +88,2 @@ /**
     /**
-     * Theme light electric as optional
-     */
-    lightElectricTheme,
-    /**
-     * Theme dark electric as optional
-     */
-    darkElectricTheme,
-    /**
      * External brand colors
@@ -388,4 +360,3 @@ */
 const pxToRem = (px) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = px === null || px === void 0 ? void 0 : px.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (px === null || px === void 0 ? void 0 : px.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit !== 'px' || fontSizeValue === '0') {
@@ -399,4 +370,3 @@ throw new Error('function only accepts value in rem and not 0, e.g. 16px');
 const remToPx = (rem) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = rem === null || rem === void 0 ? void 0 : rem.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (rem === null || rem === void 0 ? void 0 : rem.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit !== 'rem' || fontSizeValue === '0') {
@@ -417,4 +387,3 @@ throw new Error('function only accepts value in rem and not 0, e.g. 1.5rem');
 const generateTypeScale = (fontSize) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit === undefined) {
@@ -434,4 +403,3 @@ throw new Error('getFontSizeRem() only accepts rem or px as parameter');
 const calculateLineHeight = (fontSize) => {
-    var _a;
-    const [, fontSizeValue, fontSizeUnit] = (_a = fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) !== null && _a !== void 0 ? _a : [];
+    const [, fontSizeValue, fontSizeUnit] = (fontSize === null || fontSize === void 0 ? void 0 : fontSize.match(FONT_SIZE_REGEX)) || [];
     if (fontSizeUnit === undefined || fontSizeValue === undefined || fontSizeValue === '0') {
@@ -458,3 +426,3 @@ throw new Error(`font size needs to be value + px or rem and not 0, e.g. 15rem or 16px, received: '${fontSize}'`);
 const isCdnCn = typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn';
-const FONT_FACE_CDN_URL = (isCdnCn ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/styles/' + (isCdnCn ? 'font-face.min.cn.ab128226e97d77abe80c8c491374b9b3.css' : 'font-face.min.6fdc3844907953937260ca9bdb49bf8d.css');
+const FONT_FACE_CDN_URL = (isCdnCn ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/styles/' + (isCdnCn ? 'font-face.min.cn.dbb9b1f73aba20c5fad38212405e1a68.css' : 'font-face.min.955063f599f3c828248b49f258753ba8.css');
 /**
@@ -461,0 +429,0 @@ * @deprecated since v1.1.0.

dist/js/types/variables/color.d.ts

 export type Theme = 'light' | 'dark';
-export type ThemeExtendedElectric = Theme | 'light-electric';
-export type ThemeExtendedElectricDark = ThemeExtendedElectric | 'dark-electric';
 export type ColorTheme = {
@@ -52,6 +50,4 @@ brand: string;
     darkTheme: ColorTheme;
-    lightElectricTheme: ColorTheme;
-    darkElectricTheme: ColorTheme;
     external: ColorExternal;
 };
 export declare const color: Color;

package.json

 {
   "name": "@porsche-design-system/utilities",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "This package contains helpful SCSS functions, mixins and variables. Additionally, JavaScript variables, functions and helpers are provided.",
@@ -34,7 +34,6 @@ "keywords": [
   "scripts": {
-    "build": "yarn clean:build && yarn build:buildTypography && yarn build:bundleLib && yarn build:copyScss && yarn build:createGlobalCSS && yarn build:meta",
+    "build": "yarn clean:build && yarn build:buildTypography && yarn build:bundleLib && yarn build:copyScss && yarn build:meta",
     "build:buildTypography": "ts-node scripts/buildTypography.ts",
     "build:bundleLib": "rollup -c rollup.config.js --bundleConfigAsCjs",
     "build:copyScss": "echo '@import \"dist/scss/index\";' > scss.scss && cp -r './src/scss/.' './dist/scss'",
-    "build:createGlobalCSS": "ts-node scripts/createGlobalCSS.ts",
     "build:meta": "cp ../../../../LICENSE ./LICENSE && cp ../../../../OSS_NOTICE ./OSS_NOTICE",
@@ -48,6 +47,6 @@ "clean": "yarn clean:node_modules && yarn clean:build",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^10.0.0",
-    "rollup": "^3.5.0",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "rollup": "^3.10.0",
     "tslib": "^2.4.1",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.4"
   },
@@ -54,0 +53,0 @@ "dependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4120370

increased by278.01%

Worsened metrics

Lines of code

1266

decreased by-5.1%

Number of medium maintenance alerts

1

increased byInfinity%

No dependency changes