@pexip/components 16.17.0 → 17.1.0

package/design-tokens/generated/variables.ts

@@ -0,0 +1,322 @@
+/* FILE GENERATED BY packages/components/design-tokens/build-scripts/variables.ts DO NOT CHANGE */
+
+export const variables = {
+    light: {
+        'border/accent': '#0068f4',
+        'border/button/danger': '#bb2526',
+        'border/button/disabled': '#d2d2d2',
+        'border/button/focus': '#71b4ff',
+        'border/button/form': '#777777',
+        'border/button/secondary': '#323232',
+        'border/button/success': '#2c7806',
+        'border/button/tertiary': '#c3c4c5',
+        'border/checkbo-disabled': '#c3c4c5',
+        'border/checkbox-main': '#777777',
+        'border/divider-primary': '#dcdcdc',
+        'border/divider-secondary': '#e6e6e6',
+        'border/divider-ultra': '#989898',
+        'border/none': 0,
+        'border/primary': '1px',
+        'border/secondary': '2px',
+        'font/button/accent': '#0068f4',
+        'font/button/call-active': '#212121',
+        'font/button/call-disabled': '#989898',
+        'font/button/call-error': '#ffffff',
+        'font/button/call-hover': '#ffffff',
+        'font/button/call-main': '#ffffff',
+        'font/button/danger-primary': '#ffffff',
+        'font/button/danger-tertiary': '#ae191a',
+        'font/button/danger-tertiary-hover': '#ffffff',
+        'font/button/primary': '#ffffff',
+        'font/button/secondary': '#323232',
+        'font/button/success-primary': '#ffffff',
+        'font/button/success-tertiary': '#256505',
+        'font/button/success-tertiary-hover': '#ffffff',
+        'font/button/tertiary': '#323232',
+        'font/button/tertiary-hover': '#ffffff',
+        'font/button/text': '#0156c9',
+        'font/button/trans': '#323232',
+        'font/button/trans-ultra': '#ffffff',
+        'font/charts/line-1': '#0156c9',
+        'font/charts/line-10': '#4e9f0d',
+        'font/charts/line-11': '#c9e2b5',
+        'font/charts/line-12': '#cc6228',
+        'font/charts/line-13': '#ffc198',
+        'font/charts/line-14': '#f89654',
+        'font/charts/line-15': '#ffedd5',
+        'font/charts/line-2': '#71b4ff',
+        'font/charts/line-3': '#d2d2d2',
+        'font/charts/line-4': '#989898',
+        'font/charts/line-5': '#494949',
+        'font/charts/line-6': '#0068f4',
+        'font/charts/line-7': '#cee3ff',
+        'font/charts/line-8': '#256505',
+        'font/charts/line-9': '#9ad36b',
+        'font/icons/clickable-active': '#323232',
+        'font/icons/clickable-hover': '#323232',
+        'font/icons/clickable-main': '#777777',
+        'font/icons/nonclickable-main': '#323232',
+        'font/icons/nonclickable-secondary': '#777777',
+        'font/text/accent': '#0068f4',
+        'font/text/body': '#323232',
+        'font/text/danger': '#ae191a',
+        'font/text/danger-tertiary': '#d73332',
+        'font/text/disabled': '#c3c4c5',
+        'font/text/label': '#323232',
+        'font/text/link': '#0068f4',
+        'font/text/link-active': '#0156c9',
+        'font/text/news': '#4338ca',
+        'font/text/quaternary': '#989898',
+        'font/text/secondary': '#494949',
+        'font/text/success': '#2c7806',
+        'font/text/success-ultra': '#4e9f0d',
+        'font/text/tertiary': '#777777',
+        'font/text/title': '#212121',
+        'font/text/warning': '#cc6228',
+        'font/toggle/off-disabled': '#ffffff',
+        'font/toggle/off-hover': '#ffffff',
+        'font/toggle/off-main': '#ffffff',
+        'font/toggle/on-disabled': '#ffffff',
+        'font/toggle/on-hover': '#ffffff',
+        'font/toggle/on-main': '#ffffff',
+        'radius/md': '16px',
+        'radius/none': 0,
+        'radius/sm': '8px',
+        'radius/xs': '4px',
+        'size/button-md': '40px',
+        'size/button-sm': '36px',
+        'size/button-sx': '30px',
+        'size/button-xl': '56px',
+        'surface/bcg/accent': '#0068f4',
+        'surface/bcg/custom': '#ffffff',
+        'surface/bcg/danger-10': '#ffe5e5',
+        'surface/bcg/danger-20': '#fecaca',
+        'surface/bcg/form': '#f2f2f2',
+        'surface/bcg/form-hover': '#e6e6e6',
+        'surface/bcg/highlight': '#cee3ff',
+        'surface/bcg/highlight-subtle': '#eff6ff',
+        'surface/bcg/info': '#e0e7ff',
+        'surface/bcg/light': '#d2d2d2',
+        'surface/bcg/menu-active': '#dcdcdc',
+        'surface/bcg/menu-hover': '#e6e6e6',
+        'surface/bcg/menu-main': '#ffffff',
+        'surface/bcg/mildwarning': '#fef9c3',
+        'surface/bcg/primary': '#ffffff',
+        'surface/bcg/secondary': '#f2f2f2',
+        'surface/bcg/success': '#e8f7e0',
+        'surface/bcg/tertiar-hover': '#f2f2f2',
+        'surface/bcg/tertiary': '#f7f7f7',
+        'surface/bcg/transparent': '#32323226',
+        'surface/bcg/ultralight': '#e6e6e6',
+        'surface/bcg/warning': '#ffedd5',
+        'surface/button/call/active': '#ffffff',
+        'surface/button/call/disabled': '#212121',
+        'surface/button/call/enabled-hover': '#d2d2d2',
+        'surface/button/call/error': '#d73332',
+        'surface/button/call/error-hover': '#bb2526',
+        'surface/button/call/hover': '#494949',
+        'surface/button/call/main': '#212121',
+        'surface/button/danger/primary-active': '#ae191a',
+        'surface/button/danger/primary-disabled': '#e6e6e6',
+        'surface/button/danger/primary-hover': '#bb2526',
+        'surface/button/danger/primary-main': '#d73332',
+        'surface/button/danger/tertiary-active': '#bb2526',
+        'surface/button/danger/tertiary-disabled': '#ffffff',
+        'surface/button/danger/tertiary-hover': '#d73332',
+        'surface/button/danger/tertiary-main': '#ffffff',
+        'surface/button/primary/active': '#1e40af',
+        'surface/button/primary/disabled': '#e6e6e6',
+        'surface/button/primary/hover': '#0156c9',
+        'surface/button/primary/main': '#0068f4',
+        'surface/button/secondary/active': '#dcdcdc',
+        'surface/button/secondary/disabled': '#ffffff',
+        'surface/button/secondary/hover': '#e6e6e6',
+        'surface/button/secondary/main': '#ffffff',
+        'surface/button/success/primary-active': '#256505',
+        'surface/button/success/primary-disabled': '#e6e6e6',
+        'surface/button/success/primary-hover': '#2c7806',
+        'surface/button/success/primary-main': '#2c8500',
+        'surface/button/success/tertiary-active': '#2c7806',
+        'surface/button/success/tertiary-disabled': '#ffffff',
+        'surface/button/success/tertiary-hover': '#2c8500',
+        'surface/button/success/tertiary-main': '#ffffff',
+        'surface/button/tertiary/active': '#0156c9',
+        'surface/button/tertiary/disabled': '#ffffff',
+        'surface/button/tertiary/hover': '#0068f4',
+        'surface/button/tertiary/main': '#ffffff',
+        'surface/button/text/active': '#dcdcdc',
+        'surface/button/text/disabled': '#ffffff',
+        'surface/button/text/hover': '#e6e6e6',
+        'surface/button/text/main': '#ffffff',
+        'surface/button/trans/active': '#dcdcdc',
+        'surface/button/trans/active-ultra': '#323232',
+        'surface/button/trans/disabled': '#e6e6e6',
+        'surface/button/trans/hover': '#e6e6e6',
+        'surface/button/trans/main': '#ffffff99',
+        'surface/toggle/off-disabled': '#d2d2d2',
+        'surface/toggle/off-hover': '#494949',
+        'surface/toggle/off-main': '#777777',
+        'surface/toggle/on-disabled': '#4490f6',
+        'surface/toggle/on-hover': '#0156c9',
+        'surface/toggle/on-main': '#0068f4',
+    },
+    dark: {
+        'border/accent': '#4490f6',
+        'border/button/danger': '#d73332',
+        'border/button/disabled': '#494949',
+        'border/button/focus': '#71b4ff',
+        'border/button/form': '#777777',
+        'border/button/secondary': '#ffffff',
+        'border/button/success': '#2c8500',
+        'border/button/tertiary': '#777777',
+        'border/checkbo-disabled': '#777777',
+        'border/checkbox-main': '#c3c4c5',
+        'border/divider-primary': '#494949',
+        'border/divider-secondary': '#323232',
+        'border/divider-ultra': '#777777',
+        'border/none': 0,
+        'border/primary': '1px',
+        'border/secondary': '2px',
+        'font/button/accent': '#4490f6',
+        'font/button/call-active': '#212121',
+        'font/button/call-disabled': '#989898',
+        'font/button/call-error': '#ffffff',
+        'font/button/call-hover': '#ffffff',
+        'font/button/call-main': '#ffffff',
+        'font/button/danger-primary': '#ffffff',
+        'font/button/danger-tertiary': '#d73332',
+        'font/button/danger-tertiary-hover': '#ffffff',
+        'font/button/primary': '#ffffff',
+        'font/button/secondary': '#ffffff',
+        'font/button/success-primary': '#ffffff',
+        'font/button/success-tertiary': '#2c8500',
+        'font/button/success-tertiary-hover': '#ffffff',
+        'font/button/tertiary': '#ffffff',
+        'font/button/tertiary-hover': '#ffffff',
+        'font/button/text': '#4490f6',
+        'font/button/trans': '#ffffff',
+        'font/button/trans-ultra': '#323232',
+        'font/charts/line-1': '#ffffff',
+        'font/charts/line-10': '#ffffff',
+        'font/charts/line-11': '#ffffff',
+        'font/charts/line-12': '#ffffff',
+        'font/charts/line-13': '#ffffff',
+        'font/charts/line-14': '#ffffff',
+        'font/charts/line-15': '#ffffff',
+        'font/charts/line-2': '#ffffff',
+        'font/charts/line-3': '#ffffff',
+        'font/charts/line-4': '#ffffff',
+        'font/charts/line-5': '#ffffff',
+        'font/charts/line-6': '#ffffff',
+        'font/charts/line-7': '#ffffff',
+        'font/charts/line-8': '#ffffff',
+        'font/charts/line-9': '#ffffff',
+        'font/icons/clickable-active': '#ffffff',
+        'font/icons/clickable-hover': '#ffffff',
+        'font/icons/clickable-main': '#c3c4c5',
+        'font/icons/nonclickable-main': '#ffffff',
+        'font/icons/nonclickable-secondary': '#989898',
+        'font/text/accent': '#4490f6',
+        'font/text/body': '#f7f7f7',
+        'font/text/danger': '#d73332',
+        'font/text/danger-tertiary': '#ae191a',
+        'font/text/disabled': '#777777',
+        'font/text/label': '#f7f7f7',
+        'font/text/link': '#4490f6',
+        'font/text/link-active': '#0068f4',
+        'font/text/news': '#4f46e5',
+        'font/text/quaternary': '#989898',
+        'font/text/secondary': '#dcdcdc',
+        'font/text/success': '#2c8500',
+        'font/text/success-ultra': '#4e9f0d',
+        'font/text/tertiary': '#d2d2d2',
+        'font/text/title': '#ffffff',
+        'font/text/warning': '#cc6228',
+        'font/toggle/off-disabled': '#ffffff',
+        'font/toggle/off-hover': '#ffffff',
+        'font/toggle/off-main': '#ffffff',
+        'font/toggle/on-disabled': '#ffffff',
+        'font/toggle/on-hover': '#ffffff',
+        'font/toggle/on-main': '#ffffff',
+        'radius/md': 0,
+        'radius/none': 0,
+        'radius/sm': 0,
+        'radius/xs': 0,
+        'size/button-md': '40px',
+        'size/button-sm': '36px',
+        'size/button-sx': '30px',
+        'size/button-xl': '56px',
+        'surface/bcg/accent': '#4490f6',
+        'surface/bcg/custom': '#212121',
+        'surface/bcg/danger-10': '#ffe5e5',
+        'surface/bcg/danger-20': '#fecaca',
+        'surface/bcg/form': '#494949',
+        'surface/bcg/form-hover': '#494949',
+        'surface/bcg/highlight': '#cee3ff',
+        'surface/bcg/highlight-subtle': '#eff6ff',
+        'surface/bcg/info': '#e0e7ff',
+        'surface/bcg/light': '#989898',
+        'surface/bcg/menu-active': '#494949',
+        'surface/bcg/menu-hover': '#494949',
+        'surface/bcg/menu-main': '#323232',
+        'surface/bcg/mildwarning': '#fef9c3',
+        'surface/bcg/primary': '#212121',
+        'surface/bcg/secondary': '#323232',
+        'surface/bcg/success': '#e8f7e0',
+        'surface/bcg/tertiar-hover': '#494949',
+        'surface/bcg/tertiary': '#323232',
+        'surface/bcg/transparent': '#ffffff99',
+        'surface/bcg/ultralight': '#494949',
+        'surface/bcg/warning': '#ffedd5',
+        'surface/button/call/active': '#ffffff',
+        'surface/button/call/disabled': '#212121',
+        'surface/button/call/enabled-hover': '#d2d2d2',
+        'surface/button/call/error': '#d73332',
+        'surface/button/call/error-hover': '#bb2526',
+        'surface/button/call/hover': '#494949',
+        'surface/button/call/main': '#212121',
+        'surface/button/danger/primary-active': '#bb2526',
+        'surface/button/danger/primary-disabled': '#323232',
+        'surface/button/danger/primary-hover': '#d73332',
+        'surface/button/danger/primary-main': '#212121',
+        'surface/button/danger/tertiary-active': '#bb2526',
+        'surface/button/danger/tertiary-disabled': '#323232',
+        'surface/button/danger/tertiary-hover': '#d73332',
+        'surface/button/danger/tertiary-main': '#212121',
+        'surface/button/primary/active': '#0068f4',
+        'surface/button/primary/disabled': '#323232',
+        'surface/button/primary/hover': '#1c76f0',
+        'surface/button/primary/main': '#0068f4',
+        'surface/button/secondary/active': '#777777',
+        'surface/button/secondary/disabled': '#212121',
+        'surface/button/secondary/hover': '#494949',
+        'surface/button/secondary/main': '#212121',
+        'surface/button/success/primary-active': '#256505',
+        'surface/button/success/primary-disabled': '#323232',
+        'surface/button/success/primary-hover': '#2c7806',
+        'surface/button/success/primary-main': '#2c8500',
+        'surface/button/success/tertiary-active': '#2c7806',
+        'surface/button/success/tertiary-disabled': '#323232',
+        'surface/button/success/tertiary-hover': '#2c8500',
+        'surface/button/success/tertiary-main': '#212121',
+        'surface/button/tertiary/active': '#0068f4',
+        'surface/button/tertiary/disabled': '#212121',
+        'surface/button/tertiary/hover': '#1c76f0',
+        'surface/button/tertiary/main': '#212121',
+        'surface/button/text/active': '#494949',
+        'surface/button/text/disabled': '#323232',
+        'surface/button/text/hover': '#323232',
+        'surface/button/text/main': '#212121',
+        'surface/button/trans/active': '#494949',
+        'surface/button/trans/active-ultra': '#ffffff',
+        'surface/button/trans/disabled': '#323232',
+        'surface/button/trans/hover': '#494949',
+        'surface/button/trans/main': '#32323226',
+        'surface/toggle/off-disabled': '#d2d2d2',
+        'surface/toggle/off-hover': '#494949',
+        'surface/toggle/off-main': '#0068f4',
+        'surface/toggle/on-disabled': '#4490f6',
+        'surface/toggle/on-hover': '#0156c9',
+        'surface/toggle/on-main': '#0068f4',
+    },
+};

package/design-tokens/mixins/_ellipsis.scss

@@ -4,3 +4,14 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+@mixin ellipsis-multiline($lines: 2) {
+    -webkit-box-orient: vertical;
+    /* stylelint-disable value-no-vendor-prefix -- need this value for display prop otherwise it does not work, tested and works well in all major browsers */
+    display: -webkit-box;
+    -webkit-line-clamp: #{$lines};
+    line-clamp: #{$lines};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+}

package/design-tokens/mixins/media-queries.scss

@@ -210,17 +210,35 @@
     }
 }
 
-/**
- * Used to detect mobile devices in portrait mode
-**/
-@mixin mobile() {
-    @include md-down {
-        @include touch {
-            @content;
+@mixin mobile-portrait() {
+    @include portrait {
+        @include md-down {
+            @include touch {
+                @content;
+            }
+        }
+    }
+}
+
+@mixin mobile-landscape {
+    @include landscape {
+        @include lg-down {
+            @include touch {
+                @content;
+            }
         }
     }
 }
 
+@mixin mobile() {
+    @include mobile-portrait() {
+        @content;
+    }
+    @include mobile-landscape() {
+        @content;
+    }
+}
+
 /**
  * Used to detect tablet devices in portrait and landscape mode
 **/

package/design-tokens/overflow.scss

@@ -0,0 +1,30 @@
+// overflow-auto overflow-x-hidden etc.
+.overflow {
+    @each $prop in (auto hidden inherit scroll visible) {
+        &-#{$prop} {
+            overflow: $prop;
+        }
+
+        @each $axis in (x y) {
+            &-#{$axis}-#{$prop} {
+                overflow: $prop;
+            }
+        }
+    }
+}
+
+.text-overflow {
+    @each $prop in (clip ellipsis) {
+        &-#{$prop} {
+            text-overflow: $prop;
+        }
+    }
+}
+
+.overflow-wrap {
+    @each $prop in normal, anywhere, break-word {
+        &-#{$prop} {
+            overflow-wrap: $prop;
+        }
+    }
+}

package/design-tokens/tokens/zIndex.tokens.scss

@@ -16,6 +16,7 @@
     @include create-token(components-z-index-badge-counter, 500);
     @include create-token(components-z-index-drop-content, 99);
     @include create-token(components-z-index-table-sticky-pagination, 98);
+    @include create-token(components-z-index-checkbox-input, 1);
     @include create-token(components-z-index-tooltip, 1);
     @include create-token(components-z-index-line-heading-text, 1);
     @include create-token(components-z-index-line-heading-visual-line, 0);

package/design-tokens/user-select.scss

@@ -0,0 +1,7 @@
+.user-select {
+    @each $prop in all, none, text, auto {
+        &-#{$prop} {
+            user-select: $prop;
+        }
+    }
+}