asksuite-citrus 0.0.1

package/styles/colors.scss

@@ -0,0 +1,109 @@
+/*
+ * IMPORTANT: All colors defined here must be also defined in colors-list.component.ts for proper documentation
+ */
+
+// brand
+$asksuite-orange: #FF5724;
+
+// backgrounds
+$primary-background: #EFF3F8;
+
+// neutral
+$white: #FFF;
+
+// grey
+$grey-50: #F5F7FA;
+$grey-100: #E4E7EB;
+$grey-200: #CBD2D9;
+$grey-300: #9AA5B1;
+$grey-400: #7B8794;
+$grey-500: #616E7C;
+$grey-600: #52606D;
+$grey-700: #3E4C59;
+$grey-800: #2A3042;
+$grey-900: #1F2933;
+
+// yellow
+$yellow-50: #FFF8E2;
+$yellow-200: #FFECB3;
+
+// semantic
+$success-green: #4BAF50;
+$warning-yellow: #FFC107;
+$error-red: #E8453E;
+
+// shadow
+$shadow: #2A304229;
+
+// livechat tags
+$lightblue-tag: #CDF9F3;
+$lavender-tag: #D4DAF3;
+$green-tag: #CEEEAA;
+$pink-tag: #FBC5FF;
+$orange-tag: #FED5C9;
+$purple-tag: #DDBFE5;
+$yellow-tag: #FFE0B2;
+$blue-tag: #B2E5FD;
+$brown-tag: #EFC89C;
+
+// communication channels
+$whatsapp-green: #68B35D;
+$facebook-blue: #0084FF;
+$instagram-pink: #D53E91;
+$google-blue: #345DC8;
+$telegram-blue: #34AADF;
+$telephone-yellow: #FECB00;
+
+:root {
+  // brand
+  --asksuite-orange: #{$asksuite-orange};
+
+  // backgrounds
+  --primary-background: #{$primary-background};
+
+  // neutral
+  --white: #{$white};
+
+  // grey
+  --grey-50: #{$grey-50};
+  --grey-100: #{$grey-100};
+  --grey-200: #{$grey-200};
+  --grey-300: #{$grey-300};
+  --grey-400: #{$grey-400};
+  --grey-500: #{$grey-500};
+  --grey-600: #{$grey-600};
+  --grey-700: #{$grey-700};
+  --grey-800: #{$grey-800};
+  --grey-900: #{$grey-900};
+
+  // yellow
+  --yellow-50: #{$yellow-50};
+  --yellow-200: #{$yellow-200};
+
+  // semantic
+  --success-green: #{$success-green};
+  --warning-yellow: #{$warning-yellow};
+  --error-red: #{$error-red};
+
+  // shadow
+  --shadow: #{$shadow};
+
+  // livechat tags
+  --lightblue-tag: #{$lightblue-tag};
+  --lavender-tag: #{$lavender-tag};
+  --green-tag: #{$green-tag};
+  --pink-tag: #{$pink-tag};
+  --orange-tag: #{$orange-tag};
+  --purple-tag: #{$purple-tag};
+  --yellow-tag: #{$yellow-tag};
+  --blue-tag: #{$blue-tag};
+  --brown-tag: #{$brown-tag};
+
+  // communication channels
+  --whatsapp-green: #{$whatsapp-green};
+  --facebook-blue: #{$facebook-blue};
+  --instagram-pink: #{$instagram-pink};
+  --google-blue: #{$google-blue};
+  --telegram-blue: #{$telegram-blue};
+  --telephone-yellow: #{$telephone-yellow};
+}

package/styles/font-families.scss

@@ -0,0 +1,7 @@
+$font-default: Inter, sans-serif;
+$font-code: monospace;
+
+:root {
+  --font-default: $font-default;
+  --font-code: $font-code;
+}

package/styles/font-sizes.scss

@@ -0,0 +1,15 @@
+$font-xs: 0.75rem;   // 12px
+$font-sm: 0.875rem;  // 14px
+$font-md: 1rem;      // 16px
+$font-lg: 1.125rem;  // 18px
+$font-xl: 1.25rem;   // 20px
+$font-xxl: 1.5rem;   // 24px
+
+:root {
+  --font-xs: $font-xs;
+  --font-sm: $font-sm;
+  --font-md: $font-md;
+  --font-lg: $font-lg;
+  --font-xl: $font-xl;
+  --font-xxl: $font-xxl;
+}

package/styles/font-weights.scss

@@ -0,0 +1,7 @@
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+
+:root {
+  --font-weight-regular: $font-weight-regular;
+  --font-weight-medium: $font-weight-medium;
+}

package/styles/radii.scss

@@ -0,0 +1,15 @@
+$radii-px: 1px;
+$radii-xs: 4px;
+$radii-sm: 6px;
+$radii-md: 8px;
+$radii-lg: 16px;
+$radii-full: 99999px;
+
+:root {
+  --radii-px: $radii-px;
+  --radii-xs: $radii-xs;
+  --radii-sm: $radii-sm;
+  --radii-md: $radii-md;
+  --radii-lg: $radii-lg;
+  --radii-full: $radii-full;
+}

package/styles/styles.scss

@@ -0,0 +1,70 @@
+/*
+ * Tokens
+ */
+@import './colors';
+@import './font-families';
+@import './font-sizes';
+@import './font-weights';
+@import './radii';
+
+/*
+ * Mixins
+ */
+@mixin default-input() {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: $radii-xs;
+  border: 1px solid $grey-200;
+  padding: 16px;
+  outline: none;
+  gap: 8px;
+  line-height: 14px;
+  color: $grey-700;
+  height: 48px;
+  font-size: $font-sm;
+  font-weight: $font-weight-regular;
+  transition: border .2s;
+
+  &:focus {
+    border-color: $asksuite-orange;
+  }
+
+  .material-icons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 14px;
+  }
+}
+
+/*
+ * Material Icons
+ */
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+/*
+ * Global Styles
+ */
+* {
+  box-sizing: border-box;
+}
+
+*, button, select, textarea {
+  font-family: $font-default;
+  font-weight: $font-weight-regular;
+}