orbit-ds-variables 1.0.0

package/dist/css/themes/d-grey/variables.css

@@ -0,0 +1,93 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --shadow-action-menu: rgba(0, 0, 0, 0.15);
+  --shadow-navigation: rgba(0, 0, 0, 0.07);
+  --shadow-card: rgba(0, 0, 0, 0.1);
+  --shadow-popup-message: rgba(0, 0, 0, 0.3);
+  --shadow-submit-section: rgba(0, 0, 0, 0.2);
+  --shadow-chip: rgba(0, 0, 0, 0.3);
+  --chips-neutral-color-neutral-2: #f7f7f7;
+  --chips-neutral-color-hover: #f2f2f2;
+  --chips-neutral-color-checked: #e3e3e3;
+  --chips-attemtion-default: #ffffff;
+  --chips-attemtion-hover: #ffffff;
+  --chips-attemtion-selected: #ffffff;
+  --chips-warning-default: #ffffff;
+  --chips-warning-hover: #ffffff;
+  --chips-warning-selected: #ffffff;
+  --chips-success-default: #ffffff;
+  --chips-success-hover: #ffffff;
+  --chips-success-selected: #ffffff;
+  --chips-critical-default: #ffffff;
+  --chips-critical-hover: #ffffff;
+  --chips-critical-selected: #ffffff;
+  --chips-blue-default: #ffffff;
+  --chips-blue-hover: #ffffff;
+  --chips-blue-selected: #ffffff;
+  --xtra-sergei-variables-bg-darker: var(--black-alpha-2);
+  --xtra-sergei-variables-bg-lighter: var(--white-alpha-60);
+  --xtra-sergei-variables-documet-line-formerly-on-bg-disabled: var(--neutral-alpha-20);
+  --xtra-sergei-variables-bg-accent: var(--black-alpha-2); /** BG dark inverse */
+  --xtra-sergei-variables-always-black: var(--neutral-10000);
+  --xtra-sergei-variables-always-white: var(--neutral-0);
+  --xtra-sergei-variables-bg-2: var(--neutral-100);
+  --xtra-sergei-variables-bg-accent-inverted: var(--white-alpha-65); /** BG light inverse */
+  --xtra-sergei-variables-on-action-hover: var(--neutral-100);
+  --xtra-sergei-variables-on-action-active: var(--neutral-0);
+  --xtra-sergei-variables-bg-accent-2: var(--black-alpha-10); /** BG light inverse */
+  --border-primary: var(--neutral-alpha-25);
+  --border-secondary: var(--neutral-alpha-10);
+  --border-action: var(--blue-200);
+  --border-action-hover: var(--blue-300);
+  --border-attention: var(--orange-500);
+  --border-neutral: var(--blue-50);
+  --text-action: var(--blue-200);
+  --text-action-hover: var(--blue-300);
+  --text-primary: var(--neutral-500);
+  --text-secondary: var(--neutral-alpha-65);
+  --text-on-action: var(--neutral-100);
+  --text-action-active: var(--neutral-10000);
+  --text-disabled: var(--black-alpha-30);
+  --text-on-disabled: var(--neutral-100);
+  --text-attention: var(--orange-500);
+  --text-warning: var(--red-500);
+  --text-critical: var(--magenta-400);
+  --text-on-success-container-variant: var(--green-315);
+  --text-on-attention-container: var(--orange-600);
+  --text-on-success-container: var(--green-325);
+  --text-on-attention-container-variant: var(--orange-600);
+  --text-success: var(--green-320);
+  --text-on-warning-container: var(--red-500);
+  --text-on-warning-container-variant: var(--red-500);
+  --text-on-critical-container: var(--magenta-300);
+  --background-background: var(--neutral-300);
+  --background-inside-surface-2: var(--black-alpha-4);
+  --background-inside-surface-1: var(--white-alpha-65);
+  --background-surface-container-2: var(--neutral-100);
+  --background-surface-container-1: var(--neutral-0);
+  --background-input-fields: var(--black-alpha-4);
+  --background-success-container-variant: var(--green-100);
+  --background-attention-container: var(--orange-100);
+  --background-warning-container-variant: var(--red-100);
+  --background-success-container: var(--green-150);
+  --background-attention-container-variant: var(--orange-200);
+  --background-warning-container: var(--red-100);
+  --background-critical-container: var(--magenta-100);
+  --background-critical-container-variant: var(--magenta-200);
+  --background-action: var(--blue-200);
+  --background-disabled: var(--black-alpha-35);
+  --background-action-hover: var(--blue-300);
+  --background-neutral-container: var(--blue-50);
+  --background-surface-container-3: var(--neutral-200);
+  --chips-neutral-color-neutral: var(--neutral-500);
+  --icon-secondary: var(--neutral-alpha-65);
+  --icon-action: var(--blue-200);
+  --icon-disabled: var(--black-alpha-20);
+  --icon-primary: var(--neutral-500);
+  --icon-on-action: var(--neutral-100);
+  --icon-attention: var(--orange-500);
+  --scrollbar: var(--black-alpha-20);
+}

package/dist/css/themes/n-blue/index.css

@@ -0,0 +1,3 @@
+/* Auto-generated from tokens.json — do not edit directly. */
+@import '../primitives/variables.css';
+@import './variables.css';

package/dist/css/themes/n-blue/variables.css

@@ -0,0 +1,93 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --shadow-action-menu: rgba(0, 0, 0, 0.5);
+  --shadow-navigation: rgba(0, 0, 0, 0.5);
+  --shadow-card: rgba(0, 0, 0, 0.5);
+  --shadow-popup-message: rgba(0, 0, 0, 0.7);
+  --shadow-submit-section: rgba(0, 0, 0, 0.6);
+  --shadow-chip: rgba(0, 0, 0, 0.5);
+  --chips-attemtion-default: #ffffff;
+  --chips-attemtion-hover: #ffffff;
+  --chips-attemtion-selected: #ffffff;
+  --chips-warning-default: #ffffff;
+  --chips-warning-hover: #ffffff;
+  --chips-warning-selected: #ffffff;
+  --chips-success-default: #ffffff;
+  --chips-success-hover: #ffffff;
+  --chips-success-selected: #ffffff;
+  --chips-critical-default: #ffffff;
+  --chips-critical-hover: #ffffff;
+  --chips-critical-selected: #ffffff;
+  --chips-blue-default: #ffffff;
+  --chips-blue-hover: #ffffff;
+  --chips-blue-selected: #ffffff;
+  --xtra-sergei-variables-bg-darker: var(--black-alpha-30);
+  --xtra-sergei-variables-bg-lighter: var(--white-alpha-7);
+  --xtra-sergei-variables-documet-line-formerly-on-bg-disabled: var(--white-alpha-30);
+  --xtra-sergei-variables-bg-accent: var(--white-alpha-7); /** BG dark inverse */
+  --xtra-sergei-variables-always-black: var(--neutral-10000);
+  --xtra-sergei-variables-always-white: var(--neutral-0);
+  --xtra-sergei-variables-bg-2: var(--blue-400);
+  --xtra-sergei-variables-bg-accent-inverted: var(--black-alpha-30); /** BG light inverse */
+  --xtra-sergei-variables-on-action-hover: var(--neutral-0);
+  --xtra-sergei-variables-on-action-active: var(--neutral-10000);
+  --xtra-sergei-variables-bg-accent-2: var(--white-alpha-15); /** BG light inverse */
+  --border-primary: var(--white-alpha-25);
+  --border-secondary: var(--white-alpha-15);
+  --border-action: var(--blue-200);
+  --border-action-hover: var(--blue-100);
+  --border-attention: var(--orange-500);
+  --border-neutral: var(--blue-350);
+  --text-action: var(--blue-200);
+  --text-action-hover: var(--blue-100);
+  --text-primary: var(--neutral-0);
+  --text-secondary: var(--white-alpha-60);
+  --text-on-action: var(--neutral-0);
+  --text-action-active: var(--neutral-0);
+  --text-disabled: var(--white-alpha-30);
+  --text-on-disabled: var(--blue-400);
+  --text-attention: var(--orange-600);
+  --text-warning: var(--red-500);
+  --text-critical: var(--magenta-300);
+  --text-on-success-container-variant: var(--green-350);
+  --text-on-attention-container: var(--orange-600);
+  --text-on-success-container: var(--green-325);
+  --text-on-attention-container-variant: var(--orange-600);
+  --text-success: var(--green-325);
+  --text-on-warning-container: var(--red-500);
+  --text-on-warning-container-variant: var(--red-500);
+  --text-on-critical-container: var(--magenta-300);
+  --background-background: var(--blue-500);
+  --background-inside-surface-2: var(--black-alpha-20);
+  --background-inside-surface-1: var(--white-alpha-5);
+  --background-surface-container-2: var(--blue-425);
+  --background-surface-container-1: var(--blue-450);
+  --background-input-fields: var(--white-alpha-7);
+  --background-success-container-variant: var(--green-550);
+  --background-attention-container: var(--orange-700);
+  --background-warning-container-variant: var(--red-700);
+  --background-success-container: var(--green-600);
+  --background-attention-container-variant: var(--orange-700);
+  --background-warning-container: var(--red-700);
+  --background-critical-container: var(--magenta-600);
+  --background-critical-container-variant: var(--magenta-500);
+  --background-action: var(--blue-200);
+  --background-disabled: var(--white-alpha-30);
+  --background-action-hover: var(--blue-100);
+  --background-neutral-container: var(--blue-350);
+  --background-surface-container-3: var(--blue-450);
+  --chips-neutral-color-neutral: var(--neutral-0);
+  --chips-neutral-color-neutral-2: var(--neutral-0);
+  --chips-neutral-color-hover: var(--neutral-0);
+  --chips-neutral-color-checked: var(--neutral-0);
+  --icon-secondary: var(--white-alpha-65);
+  --icon-action: var(--blue-200);
+  --icon-disabled: var(--white-alpha-30);
+  --icon-primary: var(--neutral-0);
+  --icon-on-action: var(--neutral-0);
+  --icon-attention: var(--orange-600);
+  --scrollbar: var(--white-alpha-30);
+}

package/dist/css/themes/n-green/index.css

@@ -0,0 +1,3 @@
+/* Auto-generated from tokens.json — do not edit directly. */
+@import '../primitives/variables.css';
+@import './variables.css';

package/dist/css/themes/n-green/variables.css

@@ -0,0 +1,93 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --shadow-action-menu: rgba(0, 0, 0, 0.5);
+  --shadow-navigation: rgba(0, 0, 0, 0.5);
+  --shadow-card: rgba(0, 0, 0, 0.5);
+  --shadow-popup-message: rgba(0, 0, 0, 0.7);
+  --shadow-submit-section: rgba(0, 0, 0, 0.6);
+  --shadow-chip: rgba(0, 0, 0, 0.5);
+  --chips-attemtion-default: #ffffff;
+  --chips-attemtion-hover: #ffffff;
+  --chips-attemtion-selected: #ffffff;
+  --chips-warning-default: #ffffff;
+  --chips-warning-hover: #ffffff;
+  --chips-warning-selected: #ffffff;
+  --chips-success-default: #ffffff;
+  --chips-success-hover: #ffffff;
+  --chips-success-selected: #ffffff;
+  --chips-critical-default: #ffffff;
+  --chips-critical-hover: #ffffff;
+  --chips-critical-selected: #ffffff;
+  --chips-blue-default: #ffffff;
+  --chips-blue-hover: #ffffff;
+  --chips-blue-selected: #ffffff;
+  --xtra-sergei-variables-bg-darker: var(--black-alpha-20);
+  --xtra-sergei-variables-bg-lighter: var(--white-alpha-7);
+  --xtra-sergei-variables-documet-line-formerly-on-bg-disabled: var(--white-alpha-50);
+  --xtra-sergei-variables-bg-accent: var(--white-alpha-7); /** BG dark inverse */
+  --xtra-sergei-variables-always-black: var(--neutral-10000);
+  --xtra-sergei-variables-always-white: var(--neutral-0);
+  --xtra-sergei-variables-bg-2: var(--green-500);
+  --xtra-sergei-variables-bg-accent-inverted: var(--black-alpha-30); /** BG light inverse */
+  --xtra-sergei-variables-on-action-hover: var(--green-500);
+  --xtra-sergei-variables-on-action-active: var(--neutral-10000);
+  --xtra-sergei-variables-bg-accent-2: var(--white-alpha-15); /** BG light inverse */
+  --border-primary: var(--white-alpha-25);
+  --border-secondary: var(--white-alpha-15);
+  --border-action: var(--green-200);
+  --border-action-hover: var(--green-50);
+  --border-attention: var(--orange-500);
+  --border-neutral: var(--blue-350);
+  --text-action: var(--green-200);
+  --text-action-hover: var(--green-50);
+  --text-primary: var(--neutral-0);
+  --text-secondary: var(--white-alpha-60);
+  --text-on-action: var(--green-500);
+  --text-action-active: var(--neutral-0);
+  --text-disabled: var(--white-alpha-30);
+  --text-on-disabled: var(--green-500);
+  --text-attention: var(--orange-600);
+  --text-warning: var(--red-500);
+  --text-critical: var(--magenta-300);
+  --text-on-success-container-variant: var(--green-350);
+  --text-on-attention-container: var(--orange-600);
+  --text-on-success-container: var(--green-325);
+  --text-on-attention-container-variant: var(--orange-600);
+  --text-success: var(--green-325);
+  --text-on-warning-container: var(--red-500);
+  --text-on-warning-container-variant: var(--red-500);
+  --text-on-critical-container: var(--magenta-300);
+  --background-background: var(--green-600);
+  --background-inside-surface-2: var(--black-alpha-20);
+  --background-inside-surface-1: var(--white-alpha-7);
+  --background-surface-container-2: var(--white-alpha-7);
+  --background-surface-container-1: var(--white-alpha-5);
+  --background-input-fields: var(--white-alpha-7);
+  --background-success-container-variant: var(--green-550);
+  --background-attention-container: var(--orange-700);
+  --background-warning-container-variant: var(--red-700);
+  --background-success-container: var(--green-600);
+  --background-attention-container-variant: var(--orange-700);
+  --background-warning-container: var(--red-700);
+  --background-critical-container: var(--magenta-600);
+  --background-critical-container-variant: var(--magenta-500);
+  --background-action: var(--green-200);
+  --background-disabled: var(--white-alpha-30);
+  --background-action-hover: var(--green-50);
+  --background-neutral-container: var(--blue-350);
+  --background-surface-container-3: var(--white-alpha-15);
+  --chips-neutral-color-neutral: var(--neutral-0);
+  --chips-neutral-color-neutral-2: var(--neutral-0);
+  --chips-neutral-color-hover: var(--neutral-0);
+  --chips-neutral-color-checked: var(--neutral-0);
+  --icon-secondary: var(--white-alpha-65);
+  --icon-action: var(--green-200);
+  --icon-disabled: var(--white-alpha-30);
+  --icon-primary: var(--neutral-0);
+  --icon-on-action: var(--neutral-0);
+  --icon-attention: var(--orange-600);
+  --scrollbar: var(--white-alpha-30);
+}

package/dist/css/themes/n-grey/index.css

@@ -0,0 +1,3 @@
+/* Auto-generated from tokens.json — do not edit directly. */
+@import '../primitives/variables.css';
+@import './variables.css';

package/dist/css/themes/n-grey/variables.css

@@ -0,0 +1,93 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --shadow-action-menu: rgba(0, 0, 0, 0.5);
+  --shadow-navigation: rgba(0, 0, 0, 0.5);
+  --shadow-card: #000000;
+  --shadow-popup-message: rgba(0, 0, 0, 0.7);
+  --shadow-submit-section: rgba(0, 0, 0, 0.8);
+  --shadow-chip: rgba(0, 0, 0, 0.5);
+  --chips-neutral-color-neutral-2: #474747;
+  --chips-neutral-color-hover: #545454;
+  --chips-neutral-color-checked: #6e6e6e;
+  --chips-attemtion-default: #8a5323;
+  --chips-attemtion-hover: #9d5416;
+  --chips-attemtion-selected: #df781f;
+  --chips-warning-default: #861313;
+  --chips-warning-hover: #b00202;
+  --chips-warning-selected: #e80303;
+  --chips-success-default: #2c5126;
+  --chips-success-hover: #317128;
+  --chips-success-selected: #3f9233;
+  --chips-critical-default: #772d6b;
+  --chips-critical-hover: #9a3289;
+  --chips-critical-selected: #b13a9e;
+  --chips-blue-default: #12597c;
+  --chips-blue-hover: #17709c;
+  --chips-blue-selected: #1a80b2;
+  --xtra-sergei-variables-bg-darker: var(--black-alpha-30);
+  --xtra-sergei-variables-bg-lighter: var(--white-alpha-5);
+  --xtra-sergei-variables-documet-line-formerly-on-bg-disabled: var(--white-alpha-30);
+  --xtra-sergei-variables-bg-accent: var(--white-alpha-5); /** BG dark inverse */
+  --xtra-sergei-variables-always-black: var(--neutral-10000);
+  --xtra-sergei-variables-always-white: var(--neutral-0);
+  --xtra-sergei-variables-bg-2: var(--neutral-400);
+  --xtra-sergei-variables-bg-accent-inverted: var(--black-alpha-30); /** BG light inverse */
+  --xtra-sergei-variables-on-action-hover: var(--neutral-500);
+  --xtra-sergei-variables-on-action-active: var(--neutral-10000);
+  --xtra-sergei-variables-bg-accent-2: var(--white-alpha-15); /** BG light inverse */
+  --border-primary: var(--white-alpha-25);
+  --border-secondary: var(--white-alpha-15);
+  --border-action: var(--blue-200);
+  --border-action-hover: var(--blue-100);
+  --border-attention: var(--orange-600);
+  --border-neutral: var(--blue-350);
+  --text-action: var(--blue-250);
+  --text-action-hover: var(--blue-100);
+  --text-primary: var(--neutral-0);
+  --text-secondary: var(--white-alpha-60);
+  --text-on-action: var(--neutral-100);
+  --text-action-active: var(--neutral-0);
+  --text-disabled: var(--white-alpha-30);
+  --text-on-disabled: var(--neutral-400);
+  --text-attention: var(--orange-600);
+  --text-warning: var(--red-350);
+  --text-critical: var(--magenta-300);
+  --text-on-success-container-variant: var(--green-350);
+  --text-on-attention-container: var(--orange-600);
+  --text-on-success-container: var(--green-325);
+  --text-on-attention-container-variant: var(--orange-600);
+  --text-success: var(--green-325);
+  --text-on-warning-container: var(--red-500);
+  --text-on-warning-container-variant: var(--red-500);
+  --text-on-critical-container: var(--magenta-300);
+  --background-background: var(--neutral-600);
+  --background-inside-surface-2: var(--black-alpha-20);
+  --background-inside-surface-1: var(--white-alpha-5);
+  --background-surface-container-2: var(--neutral-400);
+  --background-surface-container-1: var(--neutral-500);
+  --background-input-fields: var(--white-alpha-5);
+  --background-success-container-variant: var(--green-550);
+  --background-attention-container: var(--orange-700);
+  --background-warning-container-variant: var(--red-700);
+  --background-success-container: var(--green-600);
+  --background-attention-container-variant: var(--orange-700);
+  --background-warning-container: var(--red-700);
+  --background-critical-container: var(--magenta-600);
+  --background-critical-container-variant: var(--magenta-500);
+  --background-action: var(--blue-200);
+  --background-disabled: var(--white-alpha-30);
+  --background-action-hover: var(--blue-100);
+  --background-neutral-container: var(--blue-350);
+  --background-surface-container-3: var(--neutral-350);
+  --chips-neutral-color-neutral: var(--neutral-0);
+  --icon-secondary: var(--white-alpha-65);
+  --icon-action: var(--blue-200);
+  --icon-disabled: var(--white-alpha-30);
+  --icon-primary: var(--neutral-0);
+  --icon-on-action: var(--neutral-100);
+  --icon-attention: var(--orange-600);
+  --scrollbar: var(--white-alpha-30);
+}

package/dist/scss/_index.scss

@@ -0,0 +1,10 @@
+// Auto-generated from tokens.json — do not edit directly.
+@forward 'primitives/variables';
+@forward 'themes/d-green/variables';
+@forward 'themes/n-green/variables';
+@forward 'themes/n-grey/variables';
+@forward 'themes/n-blue/variables';
+@forward 'themes/d-grey/variables';
+@forward 'platforms/web/variables';
+@forward 'platforms/desktop/variables';
+@forward 'platforms/ipad/variables';

package/dist/scss/platforms/desktop/_variables.scss

@@ -0,0 +1,97 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$font-font-weight-body: Medium;
+$font-font-weight-comment: Regular;
+$font-font-weight-body-small: Medium;
+$font-font-weight-title: Bold;
+$font-font-weight-body-input: Medium;
+$font-font-weight-body-big: Medium;
+$font-letter-spacing-title-4: 24;
+$font-font-size-body: 14;
+$font-font-size-body-small: 12;
+$font-font-size-title-3: 22;
+$font-font-size-title-2: 28;
+$font-font-size-title-1: 38;
+$font-font-size-body-input: 14;
+$font-font-size-title-4: 14;
+$font-font-size-comment: 14;
+$font-font-size-title-5: 14;
+$font-font-size-title-6: 14;
+$font-font-size-body-big: 17;
+$font-line-height-title-1: 44;
+$font-line-height-title-2: 32;
+$font-line-height-t-itle-3: 26;
+$font-line-height-body: 20;
+$font-line-height-body-small: 16;
+$font-line-height-body-input: 14;
+$font-line-height-title-4: 20;
+$font-line-height-comment: 22;
+$font-line-height-title-5: 20;
+$font-line-height-title-6: 20;
+$font-line-height-body-big: 17;
+$platform: Web;
+$icon-default: 24;
+$icon-small: 18;
+$icon-big: 36;
+$gap-0: 0;
+$gap-l: 18;
+$gap-m: 12;
+$gap-s: 6;
+$gap-xs: 4;
+$gap-xl: 24;
+$gap-xxl: 36;
+$gap-xxs: 2;
+$gap-ml: 16;
+$components-input-button-select-compact-height: 24;
+$components-input-button-select-default: 36;
+$components-input-button-select-min-height-textarea: 128;
+$components-input-button-select-border-width: 1;
+$components-input-button-select-min-width-hidden: 84;
+$components-input-button-select-min-width-compact-hidden: 66;
+$components-input-button-select-top-offset: 8; // Used to make top offset inside the Input, because input needs to be V align Top
+$components-input-button-select-nested-option-offset: 32; // Used to make top offset inside the Input, because input needs to be V align Top
+$components-input-button-select-compact-min-width: 24;
+$components-titles-and-tabs-header: 36;
+$components-toolbar-toolbar: 40;
+$components-action-menu-item-action-menu: 36;
+$components-e-was-nav-item-height-horizontal: 55;
+$components-e-was-nav-item-height-split-view: 55;
+$components-e-was-nav-item-height-vertical: 55;
+$components-e-was-nav-item-width-horizontal: 72;
+$components-e-was-nav-item-width-split-view: 45;
+$components-e-was-nav-item-width-vertical: 60;
+$components-chip-height-default: 32;
+$components-chip-height-compact: 26;
+$radius-s: 4;
+$radius-m: 8;
+$radius-l: 12;
+$radius-card: 8;
+$radius-input: 4;
+$radius-section: 8;
+$radius-action-menu: 4;
+$radius-popup-message: 8;
+$radius-xl: 24;
+$radius-chip: 24;
+$radius-chip-squared: 4;
+$padding-vertical-0: 0;
+$padding-vertical-xs: 4;
+$padding-vertical-s: 8;
+$padding-vertical-m: 12;
+$padding-vertical-l: 18;
+$padding-vertical-xl: 24;
+$padding-vertical-xxl: 36;
+$padding-vertical-xxs: 2;
+$padding-vertical-ml: 16;
+$padding-horizontal-0: 0;
+$padding-horizontal-xs: 4;
+$padding-horizontal-s: 8;
+$padding-horizontal-m: 12;
+$padding-horizontal-l: 18;
+$padding-horizontal-xl: 24;
+$padding-horizontal-xxl: 36;
+$padding-horizontal-xxs: 2;
+$padding-horizontal-ml: 16;
+$icon-frame-size-small: 18;
+$icon-frame-size-default: 26;
+$icon-frame-size-big: 36;

package/dist/scss/platforms/ipad/_variables.scss

@@ -0,0 +1,97 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$font-font-weight-body: Medium;
+$font-font-weight-comment: Regular;
+$font-font-weight-body-small: Medium;
+$font-font-weight-title: Bold;
+$font-font-weight-body-input: Semi Bold;
+$font-font-weight-body-big: Medium;
+$font-letter-spacing-title-4: 24;
+$font-font-size-body: 13;
+$font-font-size-body-small: 11;
+$font-font-size-title-3: 18;
+$font-font-size-title-2: 24;
+$font-font-size-title-1: 36;
+$font-font-size-body-input: 13;
+$font-font-size-title-4: 13;
+$font-font-size-comment: 13;
+$font-font-size-title-5: 13;
+$font-font-size-title-6: 13;
+$font-font-size-body-big: 17;
+$font-line-height-title-1: 46;
+$font-line-height-title-2: 38;
+$font-line-height-t-itle-3: 28;
+$font-line-height-body: 26;
+$font-line-height-body-small: 20;
+$font-line-height-body-input: 17;
+$font-line-height-title-4: 22;
+$font-line-height-comment: 26;
+$font-line-height-title-5: 22;
+$font-line-height-title-6: 22;
+$font-line-height-body-big: 17;
+$platform: Mobile;
+$icon-default: 24;
+$icon-small: 24;
+$icon-big: 48;
+$gap-0: 0;
+$gap-l: 18;
+$gap-m: 12;
+$gap-s: 8;
+$gap-xs: 4;
+$gap-xl: 24;
+$gap-xxl: 36;
+$gap-xxs: 2;
+$gap-ml: 16;
+$components-input-button-select-compact-height: 32;
+$components-input-button-select-default: 48;
+$components-input-button-select-min-height-textarea: 160;
+$components-input-button-select-border-width: 1;
+$components-input-button-select-min-width-hidden: 112;
+$components-input-button-select-min-width-compact-hidden: 80;
+$components-input-button-select-top-offset: 13; // Used to make top offset inside the Input, because input needs to be V align Top
+$components-input-button-select-nested-option-offset: 40; // Used to make top offset inside the Input, because input needs to be V align Top
+$components-input-button-select-compact-min-width: 32;
+$components-titles-and-tabs-header: 55;
+$components-toolbar-toolbar: 55;
+$components-action-menu-item-action-menu: 44;
+$components-e-was-nav-item-height-horizontal: 55;
+$components-e-was-nav-item-height-split-view: 55;
+$components-e-was-nav-item-height-vertical: 55;
+$components-e-was-nav-item-width-horizontal: 72;
+$components-e-was-nav-item-width-split-view: 45;
+$components-e-was-nav-item-width-vertical: 60;
+$components-chip-height-default: 44;
+$components-chip-height-compact: 30;
+$radius-s: 4;
+$radius-m: 8;
+$radius-l: 12;
+$radius-card: 10;
+$radius-input: 6;
+$radius-section: 10;
+$radius-action-menu: 6;
+$radius-popup-message: 10;
+$radius-xl: 24;
+$radius-chip: 36;
+$radius-chip-squared: 6;
+$padding-vertical-0: 0;
+$padding-vertical-xs: 4;
+$padding-vertical-s: 8;
+$padding-vertical-m: 12;
+$padding-vertical-l: 18;
+$padding-vertical-xl: 24;
+$padding-vertical-xxl: 36;
+$padding-vertical-xxs: 2;
+$padding-vertical-ml: 16;
+$padding-horizontal-0: 0;
+$padding-horizontal-xs: 4;
+$padding-horizontal-s: 8;
+$padding-horizontal-m: 12;
+$padding-horizontal-l: 18;
+$padding-horizontal-xl: 24;
+$padding-horizontal-xxl: 36;
+$padding-horizontal-xxs: 2;
+$padding-horizontal-ml: 16;
+$icon-frame-size-small: 24;
+$icon-frame-size-default: 44;
+$icon-frame-size-big: 48;