@pexip/components 16.17.0 → 17.1.0

package/design-tokens/variables.legacy.scss

@@ -0,0 +1,722 @@
+/* TEMPORARY SOLUTION UNTIL WE MOVE TO FIGMA VARIABLES */
+@import './variables.scss';
+@import '../src/components/elements/Button/Button.utils.scss';
+@import '../src/components/elements/Button/Button.variables.scss';
+@import '../src/components/elements/Input/Input.utils.scss';
+@import '../src/components/elements/TextArea/TextArea.utils.scss';
+@import '../src/components/elements/ToggleSwitch/ToggleSwitch.utils.scss';
+@import '../src/components/modules/Select/Select.utils.scss';
+
+.theme-legacy {
+    /* SELECT */
+    $select-variants: (
+        /*Variant 1 - Dark*/
+            (
+                'color': $primary-color-900,
+                'background': $primary-color-300,
+                'border': $primary-color-300,
+                'background-compact': $primary-color-200,
+                'border-compact': $primary-color-300,
+                'color-danger': $signal-red,
+                'color-message-danger': $red-500,
+                'background-danger': $red-400,
+                'border-danger': $red-400,
+                'background-hover': $primary-color-200,
+                'border-hover': $primary-color-200,
+                'background-compact-hover': $primary-color-300,
+                'border-compact-hover': $primary-color-300,
+                'background-danger-hover': $red-400,
+                'border-danger-hover': $red-400,
+                'background-focus': $primary-color-300,
+                'border-focus': $primary-color-400,
+                'box-shadow-focus': rgba($primary-color-300, 0.4),
+                'color-disabled': $primary-color-400,
+                'color-label-disabled': $primary-color-400,
+                'background-disabled': $primary-color-200,
+                'border-disabled': $primary-color-200,
+            ),
+        /*Variant 2 - Light*/
+            (
+                'color': $secondary-color-800,
+                'background': $secondary-color-200,
+                'border': $secondary-color-400,
+                'background-compact': $secondary-color-200,
+                'border-compact': $secondary-color-400,
+                'color-danger': $signal-red,
+                'color-message-danger': $signal-red,
+                'background-danger': $red-400,
+                'border-danger': $red-400,
+                'background-hover': $secondary-color-500,
+                'border-hover': $secondary-color-500,
+                'background-compact-hover': $secondary-color-500,
+                'border-compact-hover': $secondary-color-400,
+                'background-danger-hover': $red-500,
+                'border-danger-hover': $red-500,
+                'background-focus': $secondary-color-200,
+                'border-focus': $secondary-color-700,
+                'box-shadow-focus': rgba($secondary-color-200, 0.4),
+                'color-disabled': $secondary-color-600,
+                'color-label-disabled': $secondary-color-600,
+                'background-disabled': $secondary-color-300,
+                'border-disabled': $secondary-color-300,
+            )
+    );
+
+    $modes: ('dark', 'light');
+
+    @each $select-variant in $select-variants {
+        $i: index($select-variants, $select-variant);
+        $mode: nth($modes, $i);
+        .#{$mode} {
+            @each $key, $value in $select-variant {
+                @include create-select-token(
+                    #{#{nth($base-select-variants, $i)}-#{$key}},
+                    $value
+                );
+            }
+        }
+    }
+
+    /* TOGGLE SWITCH */
+    $toggle-switch-variants: (
+        /*Variant 1 - Dark*/
+            (
+                'color': color('white'),
+                'background': color('deep-blue-100'),
+                'box-shadow': color('deep-blue-80'),
+                'indicator': color('deep-blue-80'),
+                'background-hover': color('deep-blue-90'),
+                'box-shadow-hover': color('deep-blue-90'),
+                'indicator-hover': color('deep-blue-50'),
+                'background-focus': color('deep-blue-90'),
+                'box-shadow-focus': color('green-100'),
+                'background-checked': color('deep-blue-80'),
+                'box-shadow-checked': color('deep-blue-50'),
+                'indicator-checked': color('deep-blue-10'),
+                'background-checked-hover': color('deep-blue-90'),
+                'box-shadow-checked-hover': color('deep-blue-50'),
+                'indicator-checked-hover': color('deep-blue-10'),
+            ),
+        /*Variant 2 - Light*/
+            (
+                'color': color('deep-blue-90'),
+                'background': color('white'),
+                'box-shadow': color('deep-blue-30'),
+                'indicator': color('deep-blue-40'),
+                'background-hover': color('deep-blue-20'),
+                'box-shadow-hover': color('deep-blue-40'),
+                'indicator-hover': color('deep-blue-50'),
+                'background-focus': color('deep-blue-20'),
+                'box-shadow-focus': color('green-100'),
+                'background-checked': color('deep-blue-40'),
+                'box-shadow-checked': color('deep-blue-50'),
+                'indicator-checked': color('deep-blue-90'),
+                'background-checked-hover': color('deep-blue-20'),
+                'box-shadow-checked-hover': color('deep-blue-50'),
+                'indicator-checked-hover': color('deep-blue-90'),
+            )
+    );
+
+    @each $toggle-switch-variant in $toggle-switch-variants {
+        $i: index($toggle-switch-variants, $toggle-switch-variant);
+        $mode: nth($modes, $i);
+        .#{$mode} {
+            @each $key, $value in $toggle-switch-variant {
+                @include create-toggle-switch-token(
+                    #{#{nth($base-toggle-switch-variants, $i)}-#{$key}},
+                    $value
+                );
+            }
+        }
+    }
+
+    /* TEXT */
+    @include create-token(text-color-dark-tinted, color('deep-blue-30'));
+    @include create-token(text-color-dark-subtle, color('deep-blue-40'));
+    @include create-token(text-color-dark-disabled, color('deep-blue-60'));
+
+    @include create-token(text-color-light-standard, color('deep-blue-90'));
+    @include create-token(text-color-light-tinted, color('deep-blue-80'));
+    @include create-token(text-color-light-subtle, color('deep-blue-70'));
+    @include create-token(text-color-light-disabled, color('deep-blue-50'));
+
+    /* TEXTAREA */
+    @include create-textarea-variant-tokens(
+        'dark',
+        (
+            'color': $primary-color-900,
+            'background': $primary-color-300,
+            'border': $primary-color-300,
+            'color-inline-label': $primary-color-500,
+            'color-message-danger': $red-400,
+            'color-placeholder': $primary-color-500,
+            'color-danger': $signal-red,
+            'background-danger': $red-400,
+            'border-danger': $red-400,
+            'color-placeholder-danger': $red-100,
+            'background-hover': $primary-color-200,
+            'border-hover': $primary-color-200,
+            'background-focus': $primary-color-300,
+            'border-focus': $primary-color-500,
+            'color-disabled': $primary-color-400,
+            'color-label-disabled': $primary-color-500,
+            'background-disabled': $primary-color-200,
+            'border-disabled': $primary-color-200,
+        )
+    );
+
+    @include create-textarea-variant-tokens(
+        'light',
+        (
+            'color': $secondary-color-800,
+            'background': $secondary-color-200,
+            'border': $secondary-color-400,
+            'color-inline-label': $secondary-color-800,
+            'color-placeholder': $secondary-color-700,
+            'color-danger': $signal-red,
+            'color-message-danger': $signal-red,
+            'background-danger': $red-400,
+            'border-danger': $red-400,
+            'color-placeholder-danger': $red-100,
+            'background-hover': $secondary-color-300,
+            'border-hover': $secondary-color-500,
+            'background-focus': $secondary-color-200,
+            'border-focus': $secondary-color-800,
+            'color-disabled': $secondary-color-700,
+            'color-label-disabled': $secondary-color-600,
+            'background-disabled': $secondary-color-300,
+            'border-disabled': $secondary-color-600,
+        )
+    );
+
+    /* KEBAB MENU BUTTON */
+    @include create-token(icon-color, color('deep-blue-60'));
+    @include create-token(icon-color-hover, color('deep-blue-80'));
+    @include create-token(icon-color-active, color('deep-blue-90'));
+    @include create-token(icon-color-disabled, color('deep-blue-30'));
+    @include create-token(button-color-active, color('deep-blue-40'));
+
+    /* INPUT */
+    .dark {
+        @include create-input-variant-tokens(
+            'dark-standard',
+            (
+                'color': $primary-color-1000,
+                'background': $primary-color-300,
+                'border': $primary-color-300,
+                'color-inline-label': $primary-color-600,
+                'color-message-danger': $red-400,
+                'color-placeholder': $primary-color-500,
+                'color-danger': $signal-red,
+                'background-danger': $red-400,
+                'border-danger': $red-400,
+                'color-placeholder-danger': $red-100,
+                'background-hover': $primary-color-200,
+                'border-hover': $primary-color-200,
+                'background-focus': $primary-color-300,
+                'border-focus': $primary-color-500,
+                'color-disabled': $primary-color-400,
+                'color-label-disabled': $primary-color-400,
+                'background-disabled': $primary-color-200,
+                'border-disabled': $primary-color-200,
+            )
+        );
+
+        @include create-input-variant-tokens(
+            'dark-transparent',
+            (
+                'color': $primary-color-1000,
+                'border': transparent,
+                'color-inline-label': $primary-color-500,
+                'color-placeholder': $primary-color-500,
+                'color-danger': $signal-red,
+                'color-message-danger': $red-400,
+                'background-danger': $red-400,
+                'border-danger': $red-400,
+                'color-placeholder-danger': $red-100,
+                'background-hover': $primary-color-300,
+                'border-hover': $primary-color-500,
+                'background-focus': $primary-color-300,
+                'border-focus': $primary-color-500,
+                'color-disabled': $primary-color-400,
+                'color-label-disabled': $primary-color-400,
+                'background-disabled': transparent,
+                'border-disabled': $primary-color-200,
+            )
+        );
+    }
+
+    .light {
+        @include create-input-variant-tokens(
+            'light-standard',
+            (
+                'color': $secondary-color-900,
+                'background': $secondary-color-200,
+                'border': $secondary-color-400,
+                'color-inline-label': $secondary-color-800,
+                'color-placeholder': $secondary-color-800,
+                'color-danger': $signal-red,
+                'color-message-danger': $signal-red,
+                'background-danger': $red-400,
+                'border-danger': $red-400,
+                'color-placeholder-danger': $red-100,
+                'background-hover': $secondary-color-300,
+                'border-hover': $secondary-color-500,
+                'background-focus': $secondary-color-200,
+                'border-focus': $secondary-color-800,
+                'color-disabled': $secondary-color-600,
+                'color-label-disabled': $secondary-color-600,
+                'background-disabled': $secondary-color-300,
+                'border-disabled': $secondary-color-600,
+            )
+        );
+
+        @include create-input-variant-tokens(
+            'light-transparent',
+            (
+                'color': $secondary-color-900,
+                'border': transparent,
+                'color-inline-label': $secondary-color-800,
+                'color-placeholder': $secondary-color-600,
+                'color-danger': $signal-red,
+                'color-message-danger': $signal-red,
+                'background-danger': $red-400,
+                'border-danger': $red-400,
+                'color-placeholder-danger': $red-100,
+                'background-hover': $secondary-color-200,
+                'border-hover': $secondary-color-800,
+                'background-focus': $secondary-color-200,
+                'border-focus': $secondary-color-800,
+                'color-disabled': $secondary-color-600,
+                'color-label-disabled': $secondary-color-600,
+                'background-disabled': transparent,
+                'border-disabled': $secondary-color-600,
+            )
+        );
+    }
+
+    /*BUTTON*/
+    // Primary - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-primary',
+            (
+                'background': $primary-color-1000,
+                'color': $primary-color-200,
+                'background-hover': $primary-color-300,
+                'color-hover': $primary-color-900,
+                'background-active': $primary-color-300,
+                'color-active': $primary-color-900,
+                'background-disabled': $primary-color-200,
+                'color-disabled': $primary-color-300,
+            )
+        );
+    }
+
+    // Primary - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-primary',
+            (
+                'background': var(--color-brand-700, $secondary-color-1000),
+                'color': var(--color-brand-50, $secondary-color-200),
+                'background-hover': var(--color-brand-600, $secondary-color-900),
+                'color-hover': var(--color-brand-50, $secondary-color-100),
+                'background-active': $secondary-color-500,
+                'color-active': $secondary-color-900,
+                'background-disabled': $secondary-color-400,
+                'color-disabled': $secondary-color-600,
+            )
+        );
+    }
+
+    // Secondary - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-secondary',
+            (
+                'background': $primary-color-100,
+                'color': $primary-color-1000,
+                'border': $primary-color-300,
+                'background-hover': $primary-color-300,
+                'color-hover': $primary-color-900,
+                'border-hover': $primary-color-300,
+                'background-active': $primary-color-300,
+                'color-active': $primary-color-900,
+                'background-disabled': transparent,
+                'color-disabled': $primary-color-300,
+                'border-disabled': $primary-color-300,
+            )
+        );
+    }
+
+    // Secondary - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-secondary',
+            (
+                'background': $secondary-color-100,
+                'color': var(--color-brand-700, $secondary-color-800),
+                'border': var(--color-brand-200, $secondary-color-500),
+                'background-hover': var(--color-brand-200, $secondary-color-500),
+                'color-hover': var(--color-brand-800, $secondary-color-900),
+                'background-active': $secondary-color-600,
+                'color-active': $secondary-color-900,
+                'background-disabled': transparent,
+                'color-disabled': $secondary-color-600,
+                'border-disabled': $secondary-color-500,
+            )
+        );
+    }
+
+    // Tertiary - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-tertiary',
+            (
+                'background': $primary-color-200,
+                'color': $primary-color-1000,
+                'background-hover': $primary-color-300,
+                'color-hover': $primary-color-900,
+                'background-active': $primary-color-300,
+                'color-active': $primary-color-900,
+                'background-disabled': $primary-color-200,
+                'color-disabled': $primary-color-300,
+            )
+        );
+    }
+
+    // Tertiary - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-tertiary',
+            (
+                'background': var(--color-brand-50, $secondary-color-400),
+                'color': var(--color-brand-700, $secondary-color-900),
+                'background-hover': var(--color-brand-200, $secondary-color-500),
+                'color-hover': var(--color-brand-700, $secondary-color-900),
+                'background-active': $secondary-color-600,
+                'color-active': $secondary-color-900,
+                'background-disabled': $secondary-color-400,
+                'color-disabled': $secondary-color-600,
+            )
+        );
+    }
+
+    // Neutral - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-neutral',
+            (
+                'background': $primary-color-100,
+                'color': $primary-color-1000,
+                'border': transparent,
+                'background-hover': $primary-color-800,
+                'color-hover': $primary-color-100,
+                'border-hover': transparent,
+                'background-active': $primary-color-1000,
+                'color-active': $primary-color-100,
+                'border-active': transparent,
+                'background-disabled': rgba($primary-color-100, 0.2),
+                'color-disabled': $primary-color-300,
+                'border-disabled': transparent,
+            )
+        );
+    }
+
+    // Neutral - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-neutral',
+            (
+                'background': $secondary-color-100,
+                'color': $secondary-color-800,
+                'border': transparent,
+                'background-hover': $secondary-color-500,
+                'color-hover': $secondary-color-800,
+                'border-hover': transparent,
+                'background-active': $secondary-color-1000,
+                'color-active': $secondary-color-100,
+                'border-active': transparent,
+                'background-disabled': rgba($secondary-color-100, 0.2),
+                'color-disabled': $secondary-color-600,
+                'border-disabled': transparent,
+            )
+        );
+    }
+
+    // Translucent - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-translucent',
+            (
+                'background': rgba(color-hex('black'), 0.65),
+                'color': color('white'),
+                'border': transparent,
+                'background-hover': rgba(color-hex('white'), 0.8),
+                'color-hover': color('black'),
+                'border-hover': transparent,
+                'background-active': color('white'),
+                'color-active': color('black'),
+                'border-active': transparent,
+                'background-disabled': rgba(color-hex('black'), 0.2),
+                'color-disabled': rgba(color-hex('white'), 0.5),
+                'border-disabled': transparent,
+            )
+        );
+    }
+
+    // Translucent - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-translucent',
+            (
+                'background': rgba(color-hex('white'), 0.65),
+                'color': color('black'),
+                'border': transparent,
+                'background-hover': rgba(color-hex('black'), 0.8),
+                'color-hover': color('white'),
+                'border-hover': transparent,
+                'background-active': color('black'),
+                'color-active': color('white'),
+                'border-active': transparent,
+                'background-disabled': rgba(color-hex('white'), 0.2),
+                'color-disabled': rgba(color-hex('black'), 0.5),
+                'border-disabled': transparent,
+            )
+        );
+    }
+
+    // Transparent - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-transparent',
+            (
+                'background': transparent,
+                'color': $primary-color-1000,
+                'background-hover': $primary-color-300,
+                'color-hover': $primary-color-900,
+                'background-active': $primary-color-300,
+                'color-active': $primary-color-900,
+                'background-disabled': transparent,
+                'color-disabled': $primary-color-300,
+            )
+        );
+    }
+
+    // Transparent - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-transparent',
+            (
+                'background': transparent,
+                'color': $secondary-color-800,
+                'background-hover': $secondary-color-500,
+                'color-hover': $secondary-color-900,
+                'background-active': $secondary-color-500,
+                'color-active': $secondary-color-900,
+                'background-disabled': transparent,
+                'color-disabled': $secondary-color-600,
+            )
+        );
+    }
+
+    // Transparent Alternative - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-transparentAlternative',
+            (
+                'background': transparent,
+                'color': color('grey'),
+                'background-hover': color('neutral-90'),
+                'color-hover': color('grey'),
+                'background-active': color('white'),
+                'color-active': color('neutral-90'),
+                'background-disabled': transparent,
+                'color-disabled': $primary-color-300,
+            )
+        );
+    }
+
+    // Transparent Alternative - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-transparentAlternative',
+            (
+                'background': transparent,
+                'color': color('neutral-90'),
+                'background-hover': color('neutral-90'),
+                'color-hover': color('grey'),
+                'background-active': color('white'),
+                'color-active': color('neutral-90'),
+                'background-disabled': transparent,
+                'color-disabled': $secondary-color-600,
+            )
+        );
+    }
+
+    // Text - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-text',
+            (
+                'background': transparent,
+                'color': $primary-color-1000,
+                'background-hover': transparent,
+                'color-hover': $primary-color-1000,
+                'background-active': $primary-color-300,
+                'color-active': $primary-color-1000,
+                'background-disabled': transparent,
+                'color-disabled': $primary-color-300,
+            )
+        );
+    }
+
+    // Text - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-text',
+            (
+                'background': transparent,
+                'color': $secondary-color-800,
+                'background-hover': transparent,
+                'color-hover': $secondary-color-800,
+                'background-active': $secondary-color-300,
+                'color-active': $secondary-color-800,
+                'background-disabled': transparent,
+                'color-disabled': $secondary-color-600,
+            )
+        );
+    }
+
+    // Danger - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-danger',
+            (
+                'background': $error-bg-color,
+                'color': $error-text-color,
+                'background-hover': $error-bg-color-hover,
+                'color-hover': $error-text-color,
+                'background-active': $error-bg-color,
+                'color-active': $error-text-color,
+                'background-disabled': $error-bg-color,
+                'color-disabled': $error-text-color,
+            )
+        );
+    }
+
+    // Danger - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-danger',
+            (
+                'background': $error-bg-color,
+                'color': $error-text-color,
+                'background-hover': $error-bg-color-hover,
+                'color-hover': $error-text-color,
+                'background-active': $error-bg-color,
+                'color-active': $error-text-color,
+                'background-disabled': $error-bg-color,
+                'color-disabled': $error-text-color,
+            )
+        );
+    }
+
+    // Danger Bordered - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-dangerBordered',
+            (
+                'background': $error-text-color,
+                'color': $error-bg-color,
+                'border': $error-bg-color,
+                'background-hover': $error-bg-color,
+                'color-hover': $error-text-color,
+                'border-hover': transparent,
+                'background-active': $error-bg-color,
+                'color-active': $error-text-color,
+                'border-active': transparent,
+                'background-disabled': $error-text-color,
+                'color-disabled': rgba($error-bg-color, 0.5),
+                'border-disabled': rgba($error-bg-color, 0.2),
+            )
+        );
+    }
+
+    // Danger Bordered - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-dangerBordered',
+            (
+                'background': $error-text-color,
+                'color': $error-bg-color,
+                'border': $error-bg-color,
+                'background-hover': $error-bg-color,
+                'color-hover': $error-text-color,
+                'border-hover': transparent,
+                'background-active': $error-bg-color,
+                'color-active': $error-text-color,
+                'border-active': transparent,
+                'background-disabled': rgba($error-text-color, 0.2),
+                'color-disabled': rgba($error-bg-color, 0.5),
+                'border-disabled': rgba($error-bg-color, 0.2),
+            )
+        );
+    }
+
+    // Success - Dark
+    .dark {
+        @include create-button-variant-tokens(
+            'dark-success',
+            (
+                'background': $success-bg-color,
+                'color': $success-text-color,
+                'background-hover': $success-hover-color,
+                'color-hover': $success-hover-color,
+                'background-active': $success-bg-color,
+                'color-active': $success-text-color,
+                'background-disabled': rgba($success-bg-color, 0.2),
+                'border-disabled': transparent,
+                'color-disabled': rgba($success-text-color, 0.5),
+            )
+        );
+    }
+
+    // Success - Light
+    .light {
+        @include create-button-variant-tokens(
+            'light-success',
+            (
+                'background': $success-bg-color,
+                'color': $success-text-color,
+                'background-hover': $success-hover-color,
+                'color-hover': $success-text-color,
+                'background-active': $success-bg-color,
+                'color-active': $success-text-color,
+                'background-disabled': rgba($success-bg-color, 0.2),
+                'border-disabled': transparent,
+                'color-disabled': rgba($success-text-color, 0.5),
+            )
+        );
+    }
+
+    /* ROUND INDICATOR */
+    .dark {
+        @include create-token(
+            round-indicator-icon-dark-background-color,
+            var(--color-brand-900, $secondary-color-900)
+        );
+        @include create-token(
+            round-indicator-dark-border,
+            var(--color-brand-1000, $secondary-color-1000)
+        );
+    }
+
+    .light {
+        @include create-token(
+            round-indicator-icon-light-background-color,
+            var(--color-brand-300, $secondary-color-300)
+        );
+    }
+}