@pexip/components 19.2.0 → 20.0.0

package/design-tokens/generated/icons/waiting-24.svg

@@ -1,21 +0,0 @@
-<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
-
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    data-token-name="IconWaiting_24"
-    viewBox="0 0 24 24"
-    aria-hidden="true"
->
-    <circle cx="17.6" cy="7.6" r="3.6" fill="currentColor" />
-    <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M4.84 6.546h9.07q-.091.44-.092.909a4.546 4.546 0 0 0 6.364 4.167v5.719a2.844 2.844 0 0 1-2.841 2.84H4.84A2.844 2.844 0 0 1 2 17.342V9.386a2.844 2.844 0 0 1 2.84-2.84m5.946 7.26a2.724 2.724 0 0 0 2.72-2.721c0-1.5-1.22-2.721-2.72-2.721s-2.723 1.22-2.723 2.72a2.725 2.725 0 0 0 2.723 2.723m4.456 2.487c-.71-.76-2.048-1.323-4.457-1.323-2.428 0-3.77.574-4.474 1.343l-.018.02c-.191.207-.5.543-.629 1.37a.743.743 0 0 0 .734.85h8.775a.743.743 0 0 0 .734-.851c-.13-.837-.447-1.176-.652-1.396z"
-        clip-rule="evenodd"
-    />
-    <path
-        fill="currentColor"
-        d="M18.364 3.818a3.636 3.636 0 1 0 0 7.273 3.636 3.636 0 0 0 0-7.273m1.932 4.697a.39.39 0 0 1-.53.154l-1.59-.873a.39.39 0 0 1-.202-.341V4.857a.39.39 0 0 1 .78 0v2.367l1.387.763a.39.39 0 0 1 .155.528"
-    />
-</svg>

package/design-tokens/generated/icons/waiting-24.svg.d.ts

@@ -1,5 +0,0 @@
-// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
-
-import type React from 'react';
-const icon: React.FC<React.ComponentProps<'svg'>>;
-export default icon;

package/design-tokens/generated/icons/warning-16.json

@@ -1,7 +0,0 @@
-{
-  "iconName": "warning-16",
-  "name": "16px-warning",
-  "pascalName": "IconWarning_16",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dd1d0bbb-28f4-4963-9d38-abc9bd593a8f",
-  "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.278 12.8667C9.278 13.4926 8.77059 14 8.14467 14L8.13333 14C7.50741 14 7 13.4926 7 12.8667C7 12.2407 7.50741 11.7333 8.13333 11.7333L8.14467 11.7333C8.77059 11.7333 9.278 12.2407 9.278 12.8667ZM8.14467 9.46667C7.51874 9.46667 7.01133 8.95926 7.01133 8.33333V3.13333C7.01133 2.50741 7.51874 2 8.14467 2C8.77059 2 9.278 2.50741 9.278 3.13333V8.33333C9.278 8.95926 8.77059 9.46667 8.14467 9.46667Z\" fill=\"white\"/>\n</svg>\n"
-}

package/design-tokens/generated/icons/warning-16.svg

@@ -1,16 +0,0 @@
-<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
-
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    data-token-name="IconWarning_16"
-    viewBox="0 0 16 16"
-    aria-hidden="true"
->
-    <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M9.278 12.867c0 .626-.507 1.133-1.133 1.133h-.012a1.133 1.133 0 1 1 0-2.267h.012c.626 0 1.133.508 1.133 1.134m-1.133-3.4A1.133 1.133 0 0 1 7.01 8.333v-5.2a1.133 1.133 0 0 1 2.267 0v5.2c0 .626-.507 1.134-1.133 1.134"
-        clip-rule="evenodd"
-    />
-</svg>

package/design-tokens/generated/icons/warning-16.svg.d.ts

@@ -1,5 +0,0 @@
-// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
-
-import type React from 'react';
-const icon: React.FC<React.ComponentProps<'svg'>>;
-export default icon;

package/design-tokens/generated/icons/warning-24.json

@@ -1,7 +0,0 @@
-{
-  "iconName": "warning-24",
-  "name": "24px-warning",
-  "pascalName": "IconWarning_24",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7b88b335-acbf-4bcb-9255-e21ec831f1e6",
-  "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.417 19.3C13.417 20.2389 12.6559 21 11.717 21L11.7 21C10.7611 21 10 20.2389 10 19.3C10 18.3611 10.7611 17.6 11.7 17.6L11.717 17.6C12.6559 17.6 13.417 18.3611 13.417 19.3ZM11.717 14.2C10.7781 14.2 10.017 13.4389 10.017 12.5V4.7C10.017 3.76112 10.7781 3 11.717 3C12.6559 3 13.417 3.76112 13.417 4.7V12.5C13.417 13.4389 12.6559 14.2 11.717 14.2Z\" fill=\"white\"/>\n</svg>\n"
-}

package/design-tokens/generated/icons/warning-24.svg

@@ -1,16 +0,0 @@
-<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
-
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    data-token-name="IconWarning_24"
-    viewBox="0 0 24 24"
-    aria-hidden="true"
->
-    <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M13.417 19.3a1.7 1.7 0 0 1-1.7 1.7H11.7a1.7 1.7 0 1 1 0-3.4h.017a1.7 1.7 0 0 1 1.7 1.7m-1.7-5.1a1.7 1.7 0 0 1-1.7-1.7V4.7a1.7 1.7 0 1 1 3.4 0v7.8a1.7 1.7 0 0 1-1.7 1.7"
-        clip-rule="evenodd"
-    />
-</svg>

package/design-tokens/generated/icons/warning-24.svg.d.ts

@@ -1,5 +0,0 @@
-// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
-
-import type React from 'react';
-const icon: React.FC<React.ComponentProps<'svg'>>;
-export default icon;

package/design-tokens/generated/icons/warning-round-16.json

@@ -1,7 +0,0 @@
-{
-  "iconName": "warning-round-16",
-  "name": "16px-warning-round",
-  "pascalName": "IconWarningRound_16",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f5f5fda9-12bb-45b5-b060-e141108cf615",
-  "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 0.999999 11.866 1 8ZM8.7 10.8C8.7 11.1866 8.3866 11.5 8 11.5L7.993 11.5C7.6064 11.5 7.293 11.1866 7.293 10.8C7.293 10.4134 7.6064 10.1 7.993 10.1L8 10.1C8.3866 10.1 8.7 10.4134 8.7 10.8ZM8 8.7C7.6134 8.7 7.3 8.3866 7.3 8L7.3 5.2C7.3 4.8134 7.6134 4.5 8 4.5C8.3866 4.5 8.7 4.8134 8.7 5.2L8.7 8C8.7 8.3866 8.3866 8.7 8 8.7Z\" fill=\"white\"/>\n</svg>\n"
-}

package/design-tokens/generated/icons/warning-round-16.svg

@@ -1,16 +0,0 @@
-<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
-
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    data-token-name="IconWarningRound_16"
-    viewBox="0 0 16 16"
-    aria-hidden="true"
->
-    <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m7.7 2.8a.7.7 0 0 1-.7.7h-.007a.7.7 0 1 1 0-1.4H8a.7.7 0 0 1 .7.7M8 8.7a.7.7 0 0 1-.7-.7V5.2a.7.7 0 1 1 1.4 0V8a.7.7 0 0 1-.7.7"
-        clip-rule="evenodd"
-    />
-</svg>

package/design-tokens/generated/icons/warning-round-16.svg.d.ts

@@ -1,5 +0,0 @@
-// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
-
-import type React from 'react';
-const icon: React.FC<React.ComponentProps<'svg'>>;
-export default icon;

package/design-tokens/generated/icons/warning-round-24.json

@@ -1,7 +0,0 @@
-{
-  "iconName": "warning-round-24",
-  "name": "24px-warning-round",
-  "pascalName": "IconWarningRound_24",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/424828cb-0385-4370-a7e0-98b2f8df0172",
-  "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM13 16C13 16.5523 12.5523 17 12 17L11.99 17C11.4377 17 10.99 16.5523 10.99 16C10.99 15.4477 11.4377 15 11.99 15L12 15C12.5523 15 13 15.4477 13 16ZM12 13C11.4477 13 11 12.5523 11 12V8C11 7.44771 11.4477 7 12 7C12.5523 7 13 7.44771 13 8V12C13 12.5523 12.5523 13 12 13Z\" fill=\"white\"/>\n</svg>\n"
-}

package/design-tokens/generated/icons/warning-round-24.svg

@@ -1,16 +0,0 @@
-<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
-
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    data-token-name="IconWarningRound_24"
-    viewBox="0 0 24 24"
-    aria-hidden="true"
->
-    <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m11 4a1 1 0 0 1-1 1h-.01a1 1 0 1 1 0-2H12a1 1 0 0 1 1 1m-1-3a1 1 0 0 1-1-1V8a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1"
-        clip-rule="evenodd"
-    />
-</svg>

package/design-tokens/generated/icons/warning-round-24.svg.d.ts

@@ -1,5 +0,0 @@
-// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
-
-import type React from 'react';
-const icon: React.FC<React.ComponentProps<'svg'>>;
-export default icon;

package/design-tokens/generated/variables.css

@@ -1,321 +0,0 @@
-/* FILE GENERATED BY packages/components/design-tokens/build-scripts/variables.css DO NOT CHANGE */
-
-.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;
-}