@webitel/ui-sdk 24.12.37 → 24.12.38

package/src/css/styleguide/colors/reusable/_text-field.scss

@@ -1,47 +0,0 @@
-// shared text field colors
-
-:root {
-  // TODO: move to separate helper-text component
-  // helper
-  --wt-helper-text-color: var(--text-main-color);
-  --wt-helper-text-disabled-color: var(--text-disabled-color);
-  --wt-helper-text-invalid-color: var(--text-error-color);
-
-  // text
-  --wt-text-field-text-color: var(--black);
-
-  // placeholder
-  --wt-text-field-error-text-color: var(--error-color);
-  --wt-text-field-placeholder-color: var(--grey-lighten-1);
-  --wt-text-field-placeholder-error-color: var(--error-color);
-  --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
-
-  // border
-  --wt-text-field-input-border-color: var(--grey-darken-1);
-  --wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
-  --wt-text-field-input-border-error-color: var(--error-color);
-
-  // input bg
-  --wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);
-
-  // select
-  --wt-text-field-select-option-text-color: var(--text-main-color);
-  --wt-text-field-select-option-text-hover-color: var(--primary-on-color);
-  --wt-text-field-select-option-text-selected-color: var(--primary-on-color);
-
-  --wt-text-field-select-option-wrapper-border-color: var(
-    --dp-22-surface-color
-  );
-  --wt-text-field-select-option-background-color: var(--dp-22-surface-color);
-  --wt-text-field-select-option-background-hover-color: var(
-    --primary-light-color
-  );
-  --wt-text-field-select-option-background-selected-color: var(--primary-color);
-}
-
-:root.theme--dark {
-  // text
-  --wt-text-field-text-color: var(--white);
-
-  --wt-text-field-input-border-color: var(--grey-lighten-1);
-}

package/src/css/styleguide/elevations/_elevations.scss

@@ -1,13 +0,0 @@
-:root {
-  --_elevation-color: hsla(0, 0%, 0%, 0.08);
-  --elevation-1: 0px 0px 2px 1px var(--_elevation-color);
-  --elevation-2: 0px 0px 4px 2px var(--_elevation-color);
-  --elevation-3: 0px 0px 6px 3px var(--_elevation-color);
-  --elevation-4: 0px 0px 8px 4px var(--_elevation-color);
-  --elevation-5: 0px 0px 10px 5px var(--_elevation-color);
-  --elevation-6: 0px 0px 12px 6px var(--_elevation-color);
-  --elevation-7: 0px 0px 14px 7px var(--_elevation-color);
-  --elevation-8: 0px 0px 16px 8px var(--_elevation-color);
-  --elevation-9: 0px 0px 18px 9px var(--_elevation-color);
-  --elevation-10: 0px 0px 20px 10px var(--_elevation-color);
-}

package/src/css/styleguide/fonts/_fonts.scss

@@ -1,143 +0,0 @@
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf')
-    format('truetype');
-  font-weight: 100;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf')
-    format('truetype');
-  font-weight: 100;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf')
-    format('truetype');
-  font-weight: 200;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf')
-    format('truetype');
-  font-weight: 200;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Light.ttf')
-    format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf')
-    format('truetype');
-  font-weight: 300;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Regular.ttf')
-    format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Italic.ttf')
-    format('truetype');
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Medium.ttf')
-    format('truetype');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf')
-    format('truetype');
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf')
-    format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf')
-    format('truetype');
-  font-weight: 600;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Bold.ttf')
-    format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf')
-    format('truetype');
-  font-weight: 700;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf')
-    format('truetype');
-  font-weight: 800;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf')
-    format('truetype');
-  font-weight: 800;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Black.ttf')
-    format('truetype');
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf')
-    format('truetype');
-  font-weight: 900;
-  font-style: italic;
-}

package/src/css/styleguide/scroll.scss

@@ -1,44 +0,0 @@
-:root {
-  --scrollbar-width: 5px;
-  --scrollbar-height: 5px;
-  --scrollbar-thumb-width: 5px;
-  --scrollbar-bg-color: var(--dp-16-surface-color);
-  --scrollbar-thumb-color: var(--primary-color);
-  --scrollbar-border-radius: var(--border-radius);
-}
-
-%wt-scrollbar {
-  // scrollbar itself
-  &::-webkit-scrollbar {
-    width: var(--scrollbar-width);
-    height: var(--scrollbar-height);
-    cursor: pointer;
-    border-radius: var(--scrollbar-border-radius);
-    background-color: var(--scrollbar-bg-color);
-  }
-
-  // scrollable element
-  &::-webkit-scrollbar-thumb {
-    width: var(--scrollbar-thumb-width);
-    height: var(--scrollbar-thumb-height);
-    border-radius: var(--scrollbar-border-radius);
-    background-color: var(--scrollbar-thumb-color);
-  }
-}
-
-%wt-distant-scrollbar {
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 18px;
-    background-color: var(--scrollbar-bg-color);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    height: 2px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    border-radius: var(--scrollbar-border-radius);
-    background-color: var(--scrollbar-thumb-color);
-    background-clip: padding-box;
-    // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
-  }
-}

package/src/css/styleguide/spacings/_spacings.scss

@@ -1,15 +0,0 @@
-:root {
-  // Start point
-  --_spacing-multiplicator: 8px;
-
-  // Spacings
-  --spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
-  --spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
-  --spacing-xs: calc(var(--_spacing-multiplicator) * 1);
-  --spacing-sm: calc(var(--_spacing-multiplicator) * 2);
-  --spacing-md: calc(var(--_spacing-multiplicator) * 3);
-  --spacing-lg: calc(var(--_spacing-multiplicator) * 4);
-  --spacing-xl: calc(var(--_spacing-multiplicator) * 5);
-  --spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
-  --spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
-}

package/src/css/styleguide/typography/_typography.scss

@@ -1,124 +0,0 @@
-/*
-NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
- */
-
-%typo-heading-1 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 32px;
-    weight: 600;
-  }
-  line-height: 48px;
-  text-transform: none;
-  //letter-spacing: 0.28px; // 0.02em
-}
-
-%typo-heading-2 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 24px;
-    weight: 600;
-  }
-  line-height: 40px;
-  text-transform: none;
-  //letter-spacing: 0.28px; // 0.02em
-}
-
-%typo-heading-3 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 20px;
-    weight: 600;
-  }
-  line-height: 32px;
-  text-transform: none;
-  //letter-spacing: 0.28px; // 0.02em
-}
-
-%typo-heading-4 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 16px;
-    weight: 600;
-  }
-  line-height: 24px;
-  text-transform: none;
-  //letter-spacing: 0.28px; // 0.02em
-}
-
-%typo-subtitle-1 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 14px;
-    weight: 500;
-  }
-  line-height: 24px;
-  text-transform: none;
-  //letter-spacing: 0.28px; // 0.02em
-}
-
-%typo-subtitle-2 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 12px;
-    weight: 500;
-  }
-  line-height: 20px;
-  text-transform: none;
-  //letter-spacing: 0.28px; // 0.02em
-}
-
-%typo-body-1 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 14px;
-    weight: 400;
-  }
-  line-height: 24px;
-  text-transform: none;
-  //letter-spacing: 0.56px; // 0.04em
-}
-
-%typo-body-2 {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 12px;
-    weight: 400;
-  }
-  line-height: 16px;
-  text-transform: none;
-  //letter-spacing: 0.16px; // 0.01em
-}
-
-%typo-button {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 12px;
-    weight: 600;
-  }
-  line-height: 24px;
-  text-transform: uppercase;
-  //letter-spacing: 0.96px; // 0.06em
-}
-
-%typo-caption {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 10px;
-    weight: 400;
-  }
-  line-height: 16px;
-  text-transform: none;
-  //letter-spacing: 0.48px; // 0.03em
-}
-
-%typo-overline {
-  font: {
-    family: 'Montserrat', monospace;
-    size: 12px;
-    weight: 500;
-  }
-  line-height: 20px;
-  text-transform: uppercase;
-  //letter-spacing: 2.56px; // 0.16em
-}

package/src/css/styleguide/viewport-breakpoints/_viewport-breakpoints.scss

@@ -1,24 +0,0 @@
-/*
-xl: @media only screen and (min-width: $viewport-xl) {}
-lg: @media only screen and (max-width: $viewport-xl) {}
-md: @media only screen and (max-width: $viewport-lg) {}
-sm: @media only screen and (max-width: $viewport-md) {}
-xs: @media only screen and (max-width: $viewport-sm) {}
- */
-
-// OLD, REMOVE ME
-//$viewport-xl: 1440px;
-//$viewport-lg: 1280px;
-//$viewport-md: 992px;
-//$viewport-sm: 600px;
-
-$viewport-lg: 1904px; // and lower
-$viewport-md: 1264px; // and lower
-$viewport-sm: 960px; // and lower
-$viewport-xs: 600px; // and lower
-
-$media: #{'only screen'};
-$media-width-lg: #{'min-width: '} $viewport-lg;
-$media-width-md: #{'max-width: '} $viewport-md;
-$media-width-sm: #{'max-width: '} $viewport-sm;
-$media-width-xs: #{'max-width: '} $viewport-xs;