@webitel/styleguide 1.0.14 → 1.0.18

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

@@ -1,43 +1,43 @@
-// 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);
-}
+// 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/lib/styleguide/elevations/_elevations.scss

@@ -1,13 +1,13 @@
-: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);
-}
+: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/lib/styleguide/fonts/_fonts.scss

@@ -1,125 +1,125 @@
-@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;
-}
+@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/lib/styleguide/scroll.scss

@@ -1,44 +1,44 @@
-: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);
-  }
-}
+: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/lib/styleguide/spacings/_spacings.scss

@@ -1,15 +1,15 @@
-: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);
+: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);
 }