@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/styles/_core.scss

@@ -1,120 +1,220 @@
 // ****************************************************************************
 // This file contains our Citrus-specific Sass variables. These are intended to
-// be used to style Citrus and imported into stylesheets in freshcard-app
-// and freshebt-vue.
+// be used to style Citrus and imported into stylesheets in freshebt-vue
+// and microfrontends.
+//
+// VARIABLES AND MIXINS ONLY.
+//
+// NOTE(slanden): Be sure to update the colors.ts file when updating this file.
 // ****************************************************************************
 
 // COLORS
-$color-providers-green-tint-2: #ecfde8;
-$color-providers-green-tint-1: #d1fac7;
-$color-providers-green: #b3f6a2;
-$color-accent-green: #51d156;
-$color-accent-green-shade-1: #49a24c;
-$color-accent-green-shade-2: #3a823d;
+
+// Neutrals
+$color-black: #000;
+$color-gray-500: rgba(0, 0, 0, 0.69);
+$color-gray-400: rgba(0, 0, 0, 0.48);
+$color-gray-300: rgba(0, 0, 0, 0.31);
+$color-gray-200: rgba(0, 0, 0, 0.1);
+$color-gray-100: rgba(0, 0, 0, 0.04);
+$color-white: #fff;
+
+// Blues
+$color-blue-500: #1a43d7;
+$color-blue-400: #496ae0;
+$color-blue-300: #7a95f8;
+$color-blue-200: #b2cffa;
+$color-blue-100: #e0edff;
+
+// Purples
+$color-purple-500: #6431d0;
+$color-purple-400: #804fe8;
+$color-purple-300: #ac8eff;
+$color-purple-200: #cdbcff;
+$color-purple-100: #ebe4ff;
+
+// Greens
+$color-green-500: #1f7400;
+$color-green-400: #3fa41c;
+$color-green-300: #8bc95a;
+$color-green-200: #b8da96;
+$color-green-100: #dcf2cb;
+
+// Golds
+$color-gold-500: #f47500;
+$color-gold-400: #f99500;
+$color-gold-300: #ffc120;
+$color-gold-200: #fcde74;
+$color-gold-100: #fff0ba;
+
+// Reds
+$color-red-500: #cd000c;
+$color-red-400: #f52323;
+$color-red-300: #ff6969;
+$color-red-200: #ffaaa5;
+$color-red-100: #ffe5dd;
+
+$color-providers-green-tint-2: #d1fac7;
+$color-providers-green-tint-1: #b3f6a2;
+$color-providers-green: #51d156;
+$color-accent-green: #49a24c;
+$color-accent-green-shade-1: #3a823d;
+$color-accent-green-shade-2: #17551a;
 
 $color-providers-blue-tint-2: #e8ebfd;
 $color-providers-blue-tint-1: #d1d7fc;
-$color-providers-blue: #a3b0f9;
+$color-providers-blue: black;
 $color-accent-blue: #5560cb;
 $color-accent-blue-shade-1: #404898;
 $color-accent-blue-shade-2: #2f3570;
 
-$color-navy-tint-4: #d1d3d7;
-$color-navy-tint-3: #a4a8af;
-$color-navy-tint-2: #767c88;
-$color-navy-tint-1: #495160;
-$color-navy: #1b2538;
-
-$color-neutral: #faf8f6;
-$color-neutral-shade: #e9e6e1;
-$color-white: #fff;
-
-$color-purple: #7c3872;
+$color-pink-tint-2: #ffdef1;
+$color-pink-tint-1: #fdc3e4;
 $color-pink: #f6a0d1;
-$color-orange: #fc8247;
-$color-peach: #fdcab7;
+$color-accent-pink: #d75fae;
+$color-accent-pink-shade-1: #7c3872;
+$color-accent-pink-shade-2: #56204e;
+
+$color-orange-tint-2: #ffdbce;
+$color-orange-tint-1: #fdcab7;
+$color-orange: #ffa895;
+$color-accent-orange: #fc8247;
+$color-accent-orange-shade-1: #e15c1b;
+$color-accent-orange-shade-2: #a9440b;
+
+$color-yellow-tint-2: #fee69a;
+$color-yellow-tint-1: #ffdc6b;
 $color-yellow: #ffc200;
-$color-lemon: #fee69a;
 
 $color-alert-red: #c34459;
+$color-accent-red-shade-1: #981d31;
+$color-accent-red-shade-2: #701323;
+
+// BACKGROUND
+$color-background: $color-white;
+$color-button-background: $color-black;
 
 // BORDERS
-$color-border: $color-neutral-shade;
+$color-border: $color-gray-200;
 $border-width: 1px;
 $border: $border-width solid $color-border;
 
 $border-radius: 8px;
+$border-radius-next: 12px;
 
-// TYPOGRAPHY
-$font-family-object-sans: objectsans;
-$font-family-blitz: blitz;
+// STATUS
+$color-status-success: $color-green-500;
+$color-status-warning: $color-gold-500;
+$color-status-error: $color-red-500;
+
+// SHADOWS
+$box-shadow-neutral: 0 1px 4px $color-gray-200;
+$box-shadow-toast: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
+$box-shadow-page-footer: 0 -1px 4px rgba($color-black, 0.25);
 
-$font-family-base: $font-family-object-sans, sans-serif;
-$font-family-script: $font-family-blitz, script;
+// TYPOGRAPHY
+$font-family-polymath: 'Polymath';
+$font-family-grenette: 'Grenette';
+
+// stylelint-disable-next-line scss/dollar-variable-colon-space-after
+$font-family-base:
+  $font-family-polymath,
+  -apple-system,
+  blinkmacsystemfont,
+  'Segoe UI',
+  roboto,
+  'Helvetica Neue',
+  arial,
+  sans-serif;
+$font-family-serif: $font-family-grenette, serif;
+
+$color-text-primary: $color-black;
+$color-text-secondary: $color-gray-500;
+$color-text-placeholder: $color-gray-400;
+$color-text-disabled: $color-gray-300;
 
 $font-weight-thin: 100;
 $font-weight-light: 300;
 $font-weight-normal: 400;
 $font-weight-medium: 500; // Currently unused, but holding its place in case we add it.
+$font-weight-semibold: 650;
+$font-weight-emphasized: $font-weight-semibold;
 $font-weight-bold: 700;
 $font-weight-heavy: 800;
 $font-weight-black: 900; // Currently unused, but holding its place in case we add it.
 
-$font-size-3x-large: 48px;
-$font-size-2x-large: 35px;
-$font-size-x-large: 26px;
-$font-size-large: 21px;
-$font-size-medium: 15px;
-$font-size-small: 12px;
+$font-size-3x-large: 32px;
+$font-size-2x-large: 26px;
+$font-size-x-large: 24px;
+$font-size-large: 20px;
+$font-size-medium: 16px;
+$font-size-small: 14px;
+$font-size-x-small: 12px;
+$font-size-wallet-caption: 13px; // Only to be used in the wallet on Home.
+
+$line-height-small: 120%;
+$line-height-medium: 125%;
+$line-height-large: 140%;
+
+$letter-spacing-tighten-medium: -0.5px;
+$letter-spacing-tighten-small: -0.25px;
+$letter-spacing-normal: normal;
+$letter-spacing-extend-small: 0.25px;
+$letter-spacing-extend-medium: 0.5px;
 
 $balance: (
   'size': $font-size-2x-large,
-  'weight': $font-weight-thin,
+  'weight': $font-weight-bold,
   'line-height': 100%,
-  'letter-spacing': normal,
+  'letter-spacing': $letter-spacing-extend-small,
 );
 
-$balance-dollar: (
-  'size': $font-size-x-large,
-  'weight': $font-weight-light,
-  'line-height': 100%,
-  'letter-spacing': normal,
+// NOTE(slanden): These typography definitions don't correctly line up with
+// the definitions in the design system - e.g., x-large-headline here is actually
+// the same as Headline Large in the design system, etc.
+$x-large-headline: (
+  'font-family': var(--font-family-headline, #{$font-family-base}),
+  'size': $font-size-3x-large,
+  'weight': $font-weight-semibold,
+  'line-height': $line-height-small,
+  'letter-spacing': $letter-spacing-tighten-medium,
 );
 
 $large-headline: (
-  'size': $font-size-x-large,
-  'weight': $font-weight-bold,
-  'line-height': 130%,
-  'letter-spacing': normal,
-);
-
-$large-headline-script: (
+  'font-family': var(--font-family-headline, #{$font-family-base}),
   'size': $font-size-2x-large,
-  'weight': $font-weight-normal,
-  'line-height': 85%,
-  'letter-spacing': normal,
-  'font-family': $font-family-script,
+  'weight': $font-weight-semibold,
+  'line-height': $line-height-small,
+  'letter-spacing': $letter-spacing-tighten-medium,
 );
 
 $headline: (
+  'font-family': var(--font-family-headline, #{$font-family-base}),
   'size': $font-size-large,
-  'weight': $font-weight-bold,
-  'line-height': 130%,
-  'letter-spacing': normal,
+  'weight': $font-weight-semibold,
+  'line-height': $line-height-medium,
+  'letter-spacing': $letter-spacing-tighten-small,
 );
 
 $subheadline: (
   'size': $font-size-medium,
-  'weight': $font-weight-bold,
-  'line-height': 150%,
-  'letter-spacing': normal,
+  'weight': $font-weight-semibold,
+  'line-height': $line-height-large,
+  'letter-spacing': $letter-spacing-extend-small,
 );
 
 $body: (
   'size': $font-size-medium,
   'weight': $font-weight-normal,
-  'line-height': 150%,
-  'letter-spacing': normal,
+  'line-height': $line-height-large,
+  'letter-spacing': $letter-spacing-extend-small,
+);
+
+$body-emphasized: map-merge(
+  $body,
+  (
+    'weight': $font-weight-emphasized,
+  )
 );
 
 $statement: map-merge(
@@ -127,15 +227,29 @@ $statement: map-merge(
 $caption: (
   'size': $font-size-small,
   'weight': $font-weight-normal,
-  'line-height': 130%,
-  'letter-spacing': normal,
+  'line-height': $line-height-large,
+  'letter-spacing': $letter-spacing-extend-small,
 );
 
-$overline: (
-  'size': $font-size-small,
-  'weight': $font-weight-heavy,
-  'line-height': 100%,
-  'letter-spacing': 0.5px,
+$caption-emphasized: map-merge(
+  $caption,
+  (
+    'weight': $font-weight-emphasized,
+  )
+);
+
+$wallet-caption: (
+  'size': $font-size-wallet-caption,
+  'weight': $font-weight-normal,
+  'line-height': $line-height-large,
+  'letter-spacing': $letter-spacing-extend-small,
+);
+
+$eyebrow: (
+  'size': $font-size-x-small,
+  'weight': $font-weight-bold,
+  'line-height': $line-height-small,
+  'letter-spacing': $letter-spacing-extend-medium,
   'text-transform': uppercase,
 );
 
@@ -152,18 +266,14 @@ $overline: (
   @include create-type-mixin($balance);
 }
 
-@mixin balance-dollar {
-  @include create-type-mixin($balance-dollar);
+@mixin x-large-headline {
+  @include create-type-mixin($x-large-headline);
 }
 
 @mixin large-headline {
   @include create-type-mixin($large-headline);
 }
 
-@mixin large-headline-script {
-  @include create-type-mixin($large-headline-script);
-}
-
 @mixin headline {
   @include create-type-mixin($headline);
 }
@@ -176,6 +286,10 @@ $overline: (
   @include create-type-mixin($body);
 }
 
+@mixin body-emphasized {
+  @include create-type-mixin($body-emphasized);
+}
+
 @mixin statement {
   @include create-type-mixin($statement);
 }
@@ -184,10 +298,39 @@ $overline: (
   @include create-type-mixin($caption);
 }
 
-@mixin overline {
-  @include create-type-mixin($overline);
+@mixin caption-emphasized {
+  @include create-type-mixin($caption-emphasized);
+}
+
+@mixin wallet-caption {
+  @include create-type-mixin($wallet-caption);
 }
 
+@mixin eyebrow {
+  @include create-type-mixin($eyebrow);
+}
+
+@mixin link-underline {
+  // TODO(mohan): Remove important when we remove the v-application a tag styling
+  text-decoration: underline !important;
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+/** NOTE(ej): These styles address an issue with 'ghost' hover states caused
+* by Vuetify's default hover styles compatible with browser-based apps that
+* support hovering. If an additional component is reported displaying a 'ghost'
+* hover use this mixin in that component's scoped styles.
+* Original bug ticket: https://join-propel.atlassian.net/browse/EUFL-15
+*/
+@mixin no-web-effect {
+  opacity: 0 !important;
+}
+
+// BUTTONS
+$button-size-medium: 40px;
+$button-size-large: 48px;
+
 // ICONS
 $font-size-icon-medium: 16px;
 $font-size-icon-large: 20px;
@@ -200,24 +343,42 @@ $card-v-spacing: 12px;
 $skeleton-loader-animation-duration: 3s;
 $skeleton-loader-animation: skeleton-loader-animation $skeleton-loader-animation-duration infinite;
 
-@keyframes skeleton-loader-animation {
-  0% {
-    background-position: 150%;
-  }
-  100% {
-    background-position: -50%;
-  }
-}
-
-@mixin skeleton-loader($color-base: $color-navy-tint-3, $color-highlight: $color-navy-tint-4) {
+@mixin skeleton-loader($color-base: $color-gray-300, $color-highlight: $color-gray-200) {
   animation: $skeleton-loader-animation;
   background: linear-gradient(75deg, $color-base 30%, $color-highlight 50%, $color-base 70%);
   background-size: 200% 150%;
 }
 
-@mixin skeleton-loader-text($color-font: $color-navy, $color-highlight: $color-navy-tint-2) {
+@mixin skeleton-loader-text($color-font: $color-black, $color-highlight: $color-gray-400) {
   @include skeleton-loader($color-font, $color-highlight);
 
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+// LOADING SPINNER
+$loader-spin-animation-duration: 3.5s;
+$loader-spin-animation: loader-spin-fast-slow $loader-spin-animation-duration infinite
+  cubic-bezier(0.35, 0.16, 0.65, 0.84);
+
+@mixin contained-input {
+  background: $color-white;
+  border: 1px solid $color-gray-200;
+  border-radius: $border-radius;
+  padding: 16px 12px;
+}
+
+@mixin override-input-label {
+  //NOTE(ej) Checkboxes and Radios are constructed using the HTML label element
+  // This requires us to override the heavier default label styles
+  // for this component
+  font-weight: $font-weight-normal !important;
+  margin-bottom: 0;
+}
+
+// APP BAR
+$app-bar-height: 42px;
+
+// MAX LAYOUT WIDTH
+// Used for responsive breakpoints in web layouts
+$max-layout-width: 480px;

package/src/styles/_form-fields.scss

@@ -1,26 +1,79 @@
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/a11y';
 
-$color-disabled-text: $color-navy-tint-2;
+$color-disabled-text: $color-gray-400;
+$color-placeholder-text: $color-gray-400;
 
-@mixin form-field() {
-  &.v-input--is-focused::v-deep .v-input__slot,
-  &.v-input--has-state::v-deep .v-input__slot {
-    border-color: currentColor;
+$sl-field-transition-duration: 0.2s;
+$citrus-field-transition-duration: 0.2s;
+
+@mixin sl-field($input-part: '', $input-text-part: '') {
+  // NOTE(ej): This removes the default focus ring from the input
+  // Focus state is still indicated by a change in border color
+  --sl-focus-ring-width: 0;
+
+  &::part(form-control-label) {
+    @include body-emphasized;
+
+    transition: color $sl-field-transition-duration ease;
+  }
+
+  &::part(form-control-help-text) {
+    @include caption;
+
+    color: $color-text-secondary;
+    margin-top: 4px;
+  }
+
+  @if $input-part != '' {
+    &::part(#{$input-part}) {
+      border-width: $border-width;
+      transition: border-color $sl-field-transition-duration ease;
+    }
+  }
+
+  @if $input-text-part != '' {
+    &::part(#{$input-text-part}) {
+      @include body;
+
+      color: $color-text-primary;
+      transition: color $sl-field-transition-duration ease;
+    }
   }
+}
+
+@mixin sl-field-disabled() {
+  &::part(form-control-label) {
+    color: $color-text-disabled;
+  }
+}
 
-  &::v-deep .v-input__slot {
-    border: 1px solid $color-neutral-shade;
-    transition: border-color ease-in-out 0.3s;
+@mixin sl-field-focused($input-part: 'base') {
+  &::part(#{$input-part}) {
+    border-color: $color-black;
   }
 }
 
-@mixin form-field-disabled() {
-  &::v-deep .v-input__slot {
-    background: $color-neutral-shade !important;
+@mixin sl-field-invalid($input-part: '', $input-text-part: '') {
+  @if $input-part != '' {
+    &::part(#{$input-part}) {
+      border-color: $color-status-error;
+    }
   }
 
-  &::v-deep input,
-  &::v-deep select {
-    color: $color-disabled-text;
+  @if $input-text-part != '' {
+    &::part(#{$input-text-part}) {
+      color: $color-status-error;
+    }
+  }
+
+  &::part(form-control-label) {
+    color: $color-status-error;
+  }
+}
+
+@mixin sl-field-hide-label() {
+  &::part(form-control-label) {
+    @include sr-only;
   }
 }

package/src/styles/_grenette.scss

@@ -0,0 +1,13 @@
+@import './core';
+
+@mixin grenette($font-weight, $file-name) {
+  @font-face {
+    font-family: $font-family-grenette;
+    font-style: normal;
+    font-weight: $font-weight;
+    src: url('@propelinc/citrus-ui/src/assets/fonts/#{$file-name}.woff2') format('woff2');
+  }
+}
+
+@include grenette($font-weight-normal, 'grenette-regular');
+@include grenette($font-weight-semibold, 'grenette-semibold');

package/src/styles/_polymath.scss

@@ -0,0 +1,14 @@
+@import './core';
+
+$font-styles: normal, italic;
+
+// NOTE(mohan): We don't want polymath to show up in italics, so we're defining
+// both italic and normal to be the normal style.
+@each $font-style in $font-styles {
+  @font-face {
+    font-family: $font-family-polymath;
+    font-style: $font-style;
+    font-weight: 100 900;
+    src: url('@propelinc/citrus-ui/src/assets/fonts/polymath.woff2') format('woff2');
+  }
+}

package/src/styles/_reset.scss

@@ -0,0 +1,105 @@
+// ****************************************************************************
+// This file contains the reset styles.
+//
+// They are taken from https://www.joshwcomeau.com/css/custom-css-reset/
+// ****************************************************************************
+
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default padding and margin */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    // stylelint-disable-next-line property-no-unknown
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+}
+
+/* 6. Improve media defaults
+ * `svg` and `img` were in this list, but we've had to remove them. On device, this was
+ * causing issues with giant sized icons.
+*/
+picture,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+  background: transparent; // This was in the old reset
+  border-style: none; // This was in the old reset
+  color: inherit; // This was in the old reset
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  margin-bottom: 16px; // matches old defaults
+
+  /* 9. Improve line wrapping */
+  text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/* 10. Remove default tap highlight */
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 11. Add default padding to lists */
+ol,
+ul {
+  padding-left: 24px;
+}
+
+/* 12. Remove default link styles
+ * This was moved from the `_providers.scss` file to citrus-ui so that link styles are consistent
+ * when CMS content is used in MFEs.
+*/
+a,
+a:active,
+a:hover {
+  text-decoration: none !important;
+}