@pexip/components 16.8.0

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

@@ -0,0 +1,239 @@
+@import './_breakpoints.scss';
+
+/*
+* media-breakpoint-only
+*
+* xs    sm    md    lg    xl
+* |-----|-----|-----|-----|-----∞
+*
+* |-xs--|
+*       |-sm--|
+*             |-md--|
+*                   |-lg--|
+*                         |-xl-----∞
+*
+* The xl mixin targets sizes from xl and upwards,
+* if an xxl breakpoint would be added in the future
+* then the xl breakpoint would stop just before the xxl breakpoint.
+*/
+
+@mixin xs {
+    @include media-breakpoint-only('xs') {
+        @content;
+    }
+}
+
+@mixin sm {
+    @include media-breakpoint-only('sm') {
+        @content;
+    }
+}
+
+@mixin md {
+    @include media-breakpoint-only('md') {
+        @content;
+    }
+}
+
+@mixin lg {
+    @include media-breakpoint-only('lg') {
+        @content;
+    }
+}
+
+@mixin xl {
+    @include media-breakpoint-only('xl') {
+        @content;
+    }
+}
+
+/*
+* media-breakpoint-up
+*
+* xs    sm    md    lg    xl
+* |-----|-----|-----|-----|-----∞
+*
+*       |-- sm-up -----------------------∞
+*             |-- md-up -----------------∞
+*                   |-- lg-up -----------∞
+*                         |-- xl-up -----∞
+*
+* There's no need to add xs-up, that's the same as not applying
+* any media query at all.
+*
+* The xl-up mixin produces the same result as the xl mixin as of
+* the current implementation because xl is the highest named breakpoint,
+* that would change however if say an xxl breakpoint was added to the breakpoints,
+* then the xl and xl-up mixins would differ, xl would only target sizes up to xxl
+* so keep that in mind when using these, if you want to future proof that you always
+* want to target sizes from xl and upwards use xl-up.
+*/
+
+@mixin sm-up {
+    @include media-breakpoint-up('sm') {
+        @content;
+    }
+}
+
+@mixin md-up {
+    @include media-breakpoint-up('md') {
+        @content;
+    }
+}
+
+@mixin lg-up {
+    @include media-breakpoint-up('lg') {
+        @content;
+    }
+}
+
+@mixin xl-up {
+    @include media-breakpoint-up('xl') {
+        @content;
+    }
+}
+
+/*
+* media-breakpoint-down
+*
+* xs    sm    md    lg    xl
+* |-----|-----|-----|-----|-----∞
+*
+* sm-down
+* |-----|
+* |-- md-down-|
+* |-------- lg-down-|
+* |-------------- xl-down-|
+*
+* There's no need to add xs-down, that's the same as not applying
+* any media query at all.
+*
+* As of the current implementation, the xs mixin and the sm-down
+* mixin produces the same result, if in the future a breakpoint
+* were to be added between the xs and sm breakpoints then the xs
+* and sm-down mixins would differ in their result.
+* If you want to make sure that you target screen sizes from
+* the sm breakpoint and downwards, use the sm-down mixin, if you just
+* want to target from xs and up to the next breakpoint, use the xs mixin.
+*/
+
+@mixin sm-down {
+    @include media-breakpoint-down('sm') {
+        @content;
+    }
+}
+
+@mixin md-down {
+    @include media-breakpoint-down('md') {
+        @content;
+    }
+}
+
+@mixin lg-down {
+    @include media-breakpoint-down('lg') {
+        @content;
+    }
+}
+
+@mixin xl-down {
+    @include media-breakpoint-down('xl') {
+        @content;
+    }
+}
+
+/*
+* media-breakpoint-between
+*
+* xs    sm    md    lg    xl
+* |-----|-----|-----|-----|-----∞
+*
+*       |-- sm-lg --|
+*       |----- sm-xl -----|
+*             |-- md-xl --|
+*
+* There's no need to add a 'between' mixin between 2 consecutive breakpoints
+* e.g. md-lg, in this case that would result in the same media query that
+* the 'md' mixin (media-breakpoint-only('md')) produces.
+*
+* There's no need to add a 'between' mixin from xs to any breakpoint, you get the same
+* result when using one of the 'down' mixins
+*/
+
+@mixin sm-lg {
+    @include media-breakpoint-between('sm', 'lg') {
+        @content;
+    }
+}
+
+@mixin sm-xl {
+    @include media-breakpoint-between('sm', 'xl') {
+        @content;
+    }
+}
+
+@mixin md-xl {
+    @include media-breakpoint-between('md', 'xl') {
+        @content;
+    }
+}
+
+/**
+ * Used to detect devices where touch is the main input
+**/
+@mixin touch() {
+    @media (pointer: coarse) {
+        @content;
+    }
+}
+
+/**
+ * Used to detect devices where some fine control is available
+**/
+@mixin any-pointer-fine() {
+    @media (any-pointer: fine) {
+        @content;
+    }
+}
+
+/**
+ * Used to detect devices where no fine control is available
+**/
+@mixin no-pointer-fine() {
+    @media not (any-pointer: fine) {
+        @content;
+    }
+}
+
+/**
+ * Used to detect mobile devices in portrait mode
+**/
+@mixin mobile() {
+    @include md-down {
+        @include touch {
+            @content;
+        }
+    }
+}
+
+/**
+ * Used to detect tablet devices in portrait and landscape mode
+**/
+@mixin tablet() {
+    @include md-up {
+        @include touch {
+            @content;
+        }
+    }
+}
+
+@mixin portrait {
+    @media (orientation: portrait) {
+        @content;
+    }
+}
+
+@mixin landscape {
+    @media (orientation: landscape) {
+        @content;
+    }
+}

package/design-tokens/mixins/utils.scss

@@ -0,0 +1,21 @@
+@use 'sass:math';
+@import '../variables.scss';
+
+/**
+ * Function to convert pixels to rem based on the base size.
+ * Using this, the value should have the `px` unit.
+ *
+ * @example
+ * ```
+ * $rem-value: px-to-rem(12px);
+ * ```
+ **/
+@function px-to-rem($value, $variant: 'desktop') {
+    $base-size-px: if(
+        $variant == 'mobile',
+        $base-size-mobile,
+        $base-size-desktop
+    );
+
+    @return calc(math.div($value, $base-size-px) * 1rem);
+}

package/design-tokens/position.scss

@@ -0,0 +1,21 @@
+.p {
+    &-absolute {
+        position: absolute !important;
+    }
+
+    &-fixed {
+        position: fixed !important;
+    }
+
+    &-relative {
+        position: relative !important;
+    }
+
+    &-static {
+        position: static !important;
+    }
+
+    &-sticky {
+        position: sticky !important;
+    }
+}

package/design-tokens/screen-utility.scss

@@ -0,0 +1,14 @@
+@import './variables.scss';
+@import '../src/components/foundation/Grid/Grid.tokens.scss';
+
+.hideOnMobile {
+    // We'll only hide on mobile phone devices, but not on tablet
+    @include mobile {
+        display: none;
+    }
+}
+
+.disable-animation {
+    opacity: 1 !important;
+    animation: none !important;
+}

package/design-tokens/spacing.scss

@@ -0,0 +1,100 @@
+@import './variables.scss';
+@import './mixins/_negative-margin.scss';
+
+$spacing-properties: (
+    'p': 'padding',
+    'm': 'margin',
+);
+
+$spacing-axes: (
+    'x': (
+        'left',
+        'right',
+    ),
+    'y': (
+        'top',
+        'bottom',
+    ),
+);
+
+$spacing-directions: (
+    'b': 'bottom',
+    't': 'top',
+    'r': 'right',
+    'l': 'left',
+);
+
+@each $property-key, $property-name in $spacing-properties {
+    .#{$property-key} {
+        @each $direction-key, $direction-name in $spacing-directions {
+            &#{$direction-key} {
+                // Direction and number spacing, like "mt-0", "pr-1", "mb-2", "pl-3"
+                @each $size-name, $size-value in $all-sizes {
+                    $i: index($all-sizes, $size-name $size-value) - 1;
+                    &-#{$i} {
+                        #{$property-name}-#{$direction-name}: all-size(
+                            $i
+                        ) !important;
+                    }
+                }
+            }
+        }
+
+        @each $spacing-axis, $spacing-axis-directions in $spacing-axes {
+            // Axis and number based spacing, like "mx-*", "px-*", "my-*", "py-*"
+            @each $size-name, $size-value in $all-sizes {
+                $i: index($all-sizes, $size-name $size-value) - 1;
+                &#{$spacing-axis}-#{$i} {
+                    @each $spacing-axis-direction in $spacing-axis-directions {
+                        #{$property-name}-#{$spacing-axis-direction}: all-size(
+                            $i
+                        ) !important;
+                    }
+                }
+            }
+        }
+
+        // Number based spacings, like "m-*" and "p-*"
+        @each $size-name, $size-value in $all-sizes {
+            $i: index($all-sizes, $size-name $size-value) - 1;
+            &-#{$i} {
+                #{$property-name}: all-size($i) !important;
+            }
+        }
+    }
+}
+
+.m {
+    @each $direction-key, $direction-name in $spacing-directions {
+        &#{$direction-key} {
+            // Direction based spacing, like "mt-auto", mb-auto"
+            &-auto {
+                margin-#{$direction-name}: auto !important;
+            }
+        }
+    }
+
+    @each $spacing-axis, $spacing-axis-directions in $spacing-axes {
+        // Axis and auto spacing, like "mx-auto", "my-auto",
+        &#{$spacing-axis}-auto {
+            @each $spacing-axis-direction in $spacing-axis-directions {
+                margin-#{$spacing-axis-direction}: auto !important;
+            }
+        }
+    }
+
+    // Auto spacing, "m-auto"
+    &-auto {
+        margin: auto !important;
+    }
+
+    // Negative margin eg. mn-1
+    &n {
+        @each $size-name, $size-value in $all-sizes {
+            $i: index($all-sizes, $size-name $size-value) - 1;
+            &-#{$i} {
+                @include negative-margin(all-size($i));
+            }
+        }
+    }
+}

package/design-tokens/tokens/all-sizes.tokens.scss

@@ -0,0 +1,11 @@
+@import '../base/all-sizes.variables.scss';
+
+/**
+ * @tokens Spacing
+ * @presenter Spacing
+ */
+:root {
+    @each $name, $size in $all-sizes {
+        --#{$name}: #{$size};
+    }
+}

package/design-tokens/tokens/border-radius.tokens.scss

@@ -0,0 +1,11 @@
+@import '../base/border-radius.variables.scss';
+
+/**
+ * @tokens Border Radius
+ * @presenter BorderRadius
+ */
+:root {
+    @each $name, $radius in $border-radius {
+        --border-radius-#{$name}: #{$radius};
+    }
+}

package/design-tokens/tokens/circle-sizes.tokens.scss

@@ -0,0 +1,11 @@
+@import '../base/circle-sizes.variables.scss';
+
+/**
+ * @tokens Circle size
+ * @presenter Circle size
+ */
+:root {
+    @each $name, $size in $circle-sizes {
+        --#{$name}: #{$size};
+    }
+}

package/design-tokens/tokens/colors.tokens.scss

@@ -0,0 +1,10 @@
+@import '../generated/colors.variables.scss';
+/**
+ * @tokens Colors
+ * @presenter Color
+ */
+:root {
+    @each $name, $color in $colors {
+        --color-#{$name}: #{$color};
+    }
+}

package/design-tokens/tokens/fonts.tokens.scss

@@ -0,0 +1,41 @@
+@import '../generated/fonts.desktop.variables.scss';
+@import '../generated/fonts.mobile.variables.scss';
+
+/**
+ * @tokens Font Size
+ * @presenter FontSize
+ */
+:root {
+    @each $name, $size in $font-size-desktop {
+        --#{$name}-size-desktop: #{$size};
+    }
+    @each $name, $size in $font-size-mobile {
+        --#{$name}-size-mobile: #{$size};
+    }
+}
+
+/**
+ * @tokens Font Line Height
+ * @presenter LineHeight
+ */
+:root {
+    @each $name, $line in $font-line-height-desktop {
+        --#{$name}-line-desktop: #{$line};
+    }
+    @each $name, $line in $font-line-height-mobile {
+        --#{$name}-line-mobile: #{$line};
+    }
+}
+
+/**
+ * @tokens Font Weight
+ * @presenter FontWeight
+ */
+:root {
+    @each $name, $weight in $font-weight-desktop {
+        --#{$name}-weight-desktop: #{$weight};
+    }
+    @each $name, $weight in $font-weight-mobile {
+        --#{$name}-weight-mobile: #{$weight};
+    }
+}

package/design-tokens/tokens/grid.tokens.scss

@@ -0,0 +1 @@
+@import '../../src/components/foundation/Grid/Grid.tokens.scss';

package/design-tokens/tokens.scss

@@ -0,0 +1,43 @@
+/*BASE*/
+@import './tokens/colors.tokens.scss';
+@import './tokens/fonts.tokens.scss';
+@import './tokens/all-sizes.tokens.scss';
+@import './tokens/circle-sizes.tokens.scss';
+@import './tokens/border-radius.tokens.scss';
+
+/*FOUNDATION*/
+@import '../src/components/foundation/FullSizeWindow/FullSizeWindow.tokens.scss';
+@import '../src/components/foundation/Grid/Grid.tokens.scss';
+
+/*ELEMENTS*/
+@import '../src/components/elements/Box/Box.tokens.scss';
+@import '../src/components/elements/Button/Button.tokens.scss';
+@import '../src/components/elements/CallToAction/CallToAction.tokens.scss';
+@import '../src/components/elements/Checkbox/Checkbox.tokens.scss';
+@import '../src/components/elements/Heading/Heading.tokens.scss';
+@import '../src/components/elements/Icon/Icon.tokens.scss';
+@import '../src/components/elements/Input/Input.tokens.scss';
+@import '../src/components/elements/PexipLogo/PexipLogo.tokens.scss';
+@import '../src/components/elements/Pill/Pill.tokens.scss';
+@import '../src/components/elements/RadioButton/RadioButton.tokens.scss';
+@import '../src/components/elements/Text/Text.tokens.scss';
+@import '../src/components/elements/ToggleSwitch/ToggleSwitch.tokens.scss';
+@import '../src/components/elements/Tooltip/Tooltip.tokens.scss';
+@import '../src/components/elements/Divider/Divider.tokens.scss';
+@import '../src/components/elements/Scrollbars/Scrollbars.tokens.scss';
+@import '../src/components/elements/BadgeCounter/BadgeCounter.tokens.scss';
+@import '../src/components/elements/LineHeading/LineHeading.tokens.scss';
+
+/*MODULES*/
+@import '../src/components/modules/Accordion/Accordion.tokens.scss';
+@import '../src/components/modules/DropContent/DropContent.tokens.scss';
+@import '../src/components/modules/Group/Group.tokens.scss';
+@import '../src/components/modules/List/List.tokens.scss';
+@import '../src/components/modules/List/Row.tokens.scss';
+@import '../src/components/modules/Modal/Modal.tokens.scss';
+@import '../src/components/modules/Select/Select.tokens.scss';
+@import '../src/components/modules/Tabs/Tabs.tokens.scss';
+@import '../src/components/modules/User/User.tokens.scss';
+@import '../src/components/modules/RoundIndicator/RoundIndicator.tokens.scss';
+@import '../src/components/modules/VideoWrapper/VideoWrapper.tokens.scss';
+@import '../src/components/modules/Sheet/Sheet.tokens.scss';

package/design-tokens/variables.scss

@@ -0,0 +1,105 @@
+@import './generated/fonts.mobile.variables.scss';
+@import './generated/fonts.desktop.variables.scss';
+@import './generated/colors.variables.scss';
+@import './base/palette.variables.scss';
+@import './base/variants.variables.scss';
+@import './base/sizes.variables.scss';
+@import './base/alphas.variables.scss';
+@import './base/border-radius.variables.scss';
+@import './base/all-sizes.variables.scss';
+@import './base/circle-sizes.variables.scss';
+@import './base/transitions.variables.scss';
+
+@function get-token($name) {
+    @return var(--#{$name});
+}
+
+@mixin create-token($name, $value) {
+    --#{$name}: #{$value};
+}
+
+@function color($name) {
+    @if map-has-key($colors, $name) {
+        @return get-token(color-#{$name});
+    } @else {
+        @error 'No color with key #{$name}';
+    }
+}
+
+@function color-hex($name) {
+    @if map-has-key($colors, $name) {
+        @return map-get($colors, $name);
+    } @else {
+        @error 'No color with key #{$name}';
+    }
+}
+
+@function duration($name) {
+    @if map-has-key($durations, $name) {
+        @return map-get($durations, $name);
+    } @else {
+        @error 'No transition duration with key #{$name}';
+    }
+}
+
+@mixin font($name, $variant: 'desktop') {
+    $map: if($variant == 'mobile', $font-size-mobile, $font-size-desktop);
+    @if map-has-key($map, $name) {
+        font-size: get-token(#{$name}-size-#{$variant});
+        font-weight: get-token(#{$name}-weight-#{$variant});
+        line-height: get-token(#{$name}-line-#{$variant});
+    } @else {
+        @error 'No font with key #{$name}';
+    }
+}
+
+@function font-size($name, $variant: 'desktop') {
+    $map: if($variant == 'mobile', $font-size-mobile, $font-size-desktop);
+    @if map-has-key($map, $name) {
+        @return get-token(#{$name}-size-#{$variant});
+    } @else {
+        @error 'No font-size with key #{$name}';
+    }
+}
+
+@function line-height($name, $variant: 'desktop') {
+    $map: if($variant == 'mobile', $font-size-mobile, $font-size-desktop);
+    @if map-has-key($map, $name) {
+        @return get-token(#{$name}-line-#{$variant});
+    } @else {
+        @error 'No line-height with key #{$name}';
+    }
+}
+
+@function font-weight($name, $variant: 'desktop') {
+    $map: if($variant == 'mobile', $font-size-mobile, $font-size-desktop);
+    @if map-has-key($map, $name) {
+        @return get-token(#{$name}-weight-#{$variant});
+    } @else {
+        @error 'No font-weight with key #{$name}';
+    }
+}
+
+@function border-radius($name) {
+    @if map-has-key($border-radius, $name) {
+        @return get-token(border-radius-#{$name});
+    } @else {
+        @error 'No border-radius with key #{$name}';
+    }
+}
+
+@function all-size($name) {
+    @if map-has-key($all-sizes, size-#{$name}) {
+        @return get-token(size-#{$name});
+    } @else {
+        @error 'No size with key #{$name}';
+    }
+}
+
+@function circle-size($name) {
+    @if map-has-key($circle-sizes, circle-#{$name}) {
+        @return get-token(circle-#{$name});
+    } @else {
+        @error 'No circle size with key #{$name}';
+    }
+}