@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/styles/_shoelace.scss

@@ -0,0 +1,46 @@
+@import '@propelinc/citrus-ui/src/styles/core';
+
+:root {
+  /**
+   * TYPOGRAPHY
+   */
+  --sl-font-sans: #{$font-family-polymath};
+  --sl-font-weight-semibold: #{$font-weight-semibold};
+
+  /**
+  * MISC. DEFAULTS
+  */
+  --sl-border-radius-medium: #{$border-radius-next};
+
+  /**
+   * BUTTON
+   */
+  --sl-button-font-size-small: #{$font-size-medium};
+  --sl-button-font-size-medium: #{$font-size-medium};
+  --sl-button-font-size-large: #{$font-size-medium};
+
+  /** INPUTS */
+  --sl-input-border-width: 1px;
+  --sl-input-height-medium: 48px;
+  --sl-input-height-large: 64px;
+  --sl-input-focus-ring-color: #{$color-black};
+  --sl-input-border-color-focus: #{$color-black};
+  --sl-input-border-color: #{$color-gray-200};
+  --sl-input-border-color-hover: #{$color-gray-200};
+
+  // NOTE(ej): Hides the default '*' for required inputs
+  --sl-input-required-content: none;
+
+  /**
+   * BOTTOM SHEET + MODAL
+   */
+  --sl-panel-background-color: #{$color-white};
+  --sl-overlay-background-color: #{rgba($color-black, 0.4)};
+  --sl-shadow-x-large: #{0 0 20px 0 rgba($color-black, 0.12)};
+}
+
+.sl-toast-stack {
+  overflow: visible;
+  top: calc(env(safe-area-inset-top) + #{$app-bar-height});
+  width: 100%;
+}

package/src/styles/_typography.scss

@@ -1,22 +1,38 @@
-@import './core.scss';
+@import './core';
+
+:root {
+  --font-family-headline: #{$font-family-serif};
+
+  // Ads have historically had a smaller body size, so we need to a special size
+  // to maintain parity for this experiment.
+  --font-size-ad: 15px;
+  --line-height-ad: 130%;
+}
+
+body {
+  font-feature-settings:
+    'pnum' on,
+    'lnum' on,
+    'cv05' on,
+    'cv14' on,
+    'cv23' on,
+    'cv27' on,
+    'cv28' on,
+    'cv29' on;
+}
 
-// NOTE(mohan): The overline and caption classes are generated by Vuetify.
 .balance {
   @include balance;
 }
 
-.balance-dollar {
-  @include balance-dollar;
+.x-large-headline {
+  @include x-large-headline;
 }
 
 .large-headline {
   @include large-headline;
 }
 
-.large-headline-script {
-  @include large-headline-script;
-}
-
 .headline {
   @include headline;
 }
@@ -33,6 +49,20 @@
   @include statement;
 }
 
-.font-family-blitz {
-  font-family: $font-family-blitz;
+// @deprecated use .eyebrow instead
+.overline {
+  @include eyebrow;
+}
+
+.eyebrow {
+  @include eyebrow;
+}
+
+.caption {
+  @include caption;
+}
+
+b,
+strong {
+  font-weight: $font-weight-emphasized;
 }

package/src/styles/main.scss

@@ -1,3 +1,6 @@
-@import './object-sans.scss';
-@import './blitz.scss';
-@import './typography.scss';
+@import './reset';
+@import '@shoelace-style/shoelace/dist/themes/light';
+@import './animation';
+@import './typography';
+@import './shoelace';
+@import './utils';

package/src/styles/utils/a11y.scss

@@ -0,0 +1,18 @@
+// Only display content to screen readers
+// See: https://a11yproject.com/posts/how-to-hide-content
+@mixin sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// Adds shoelace's focus ring implementation to non-shoelace components
+@mixin focus-ring {
+  outline: var(--sl-focus-ring);
+  outline-offset: var(--sl-focus-ring-offset);
+}

package/src/styles/utils/typography.scss

@@ -0,0 +1,13 @@
+@mixin text-overflow-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin line-clamp($lines) {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  line-clamp: $lines;
+  overflow: hidden;
+}

package/src/styles/utils.scss

@@ -0,0 +1,560 @@
+// These are our homegrown utility classes, largely based on Vuetify's with some Tailwind additions
+// Colors are handled separately in src/colors/util-classes.ts.
+
+@use 'sass:math';
+@import './colors';
+
+// ****************************************************************************
+// DISPLAY
+// ****************************************************************************
+
+$display-options: (
+  'block': block,
+  'flex': flex,
+  'grid': grid,
+  'inline-flex': inline-flex,
+  'inline': inline,
+  'none': none,
+);
+
+@each $option, $d in $display-options {
+  .d-#{$option} {
+    display: $d !important;
+  }
+}
+
+// ****************************************************************************
+// POSITION
+// ****************************************************************************
+
+$position-options: (
+  'absolute': absolute,
+  'fixed': fixed,
+  'relative': relative,
+  'static': static,
+  'sticky': sticky,
+);
+
+@each $option, $d in $position-options {
+  .position-#{$option},
+  .#{$option} {
+    position: $d;
+  }
+}
+
+// NOTE(Camden): This is a limited equivalent to Tailwind position classes that should be replaced
+// with Tailwind when we implement it.
+$position-edges: ('top', 'right', 'bottom', 'left');
+
+@each $edge in $position-edges {
+  .#{$edge}-0 {
+    #{$edge}: 0;
+  }
+}
+
+// NOTE(Camden): This is a limited equivalent to Tailwind inset classes that should be replaced
+// with Tailwind when we implement it.
+.inset-0 {
+  inset: 0;
+}
+
+// ****************************************************************************
+// COMMON SIZES
+// ****************************************************************************
+
+$size-values: (
+  'auto': 'auto',
+  'full': '100%',
+  '0': '0',
+  '25': '25%',
+  '33': '33.3333%',
+  '50': '50%',
+  '66': '66.6666%',
+  '75': '75%',
+  '100': '100%',
+);
+
+$dimensions: (
+  'w': 'width',
+  'h': 'height',
+);
+
+@each $key, $property in $dimensions {
+  @each $value, $size in $size-values {
+    .#{$key}-#{$value} {
+      #{$property}: #{$size};
+    }
+  }
+}
+
+// ****************************************************************************
+// FLEXBOX
+// ****************************************************************************
+
+$flex-directions: (
+  'col': column,
+  'col-reverse': column-reverse,
+  'column': column,
+  'column-reverse': column-reverse,
+  'row': row,
+  'row-reverse': row-reverse,
+);
+
+@each $direction, $d in $flex-directions {
+  .flex-#{$direction} {
+    flex-direction: $d !important;
+  }
+}
+
+$align-options: (
+  'baseline': baseline,
+  'center': center,
+  'end': flex-end,
+  'start': flex-start,
+  'stretch': stretch,
+);
+
+@each $option, $value in $align-options {
+  .align-#{$option} {
+    align-items: $value !important;
+  }
+
+  .align-content-#{$option} {
+    align-content: $value !important;
+  }
+}
+
+$justify-options: (
+  'around': space-around,
+  'between': space-between,
+  'center': center,
+  'end': flex-end,
+  'evenly': space-evenly,
+  'space-around': space-around,
+  'space-between': space-between,
+  'space-evenly': space-evenly,
+  'start': flex-start,
+);
+
+@each $option, $value in $justify-options {
+  .justify-#{$option} {
+    justify-content: $value !important;
+  }
+}
+
+// Shorthand class for flex: 1 1 auto;
+.flex-1 {
+  flex: 1 1 auto;
+}
+
+$flex-grow-directions: grow, shrink;
+
+@each $direction in $flex-grow-directions {
+  .flex-#{$direction},
+  .#{$direction} {
+    flex-#{$direction}: 1;
+  }
+
+  // This is for backwards compatibility
+  .flex-#{$direction}-1,
+  .#{$direction}-1 {
+    flex-#{$direction}: 1;
+  }
+
+  .flex-#{$direction}-0,
+  .#{$direction}-0 {
+    flex-#{$direction}: 0;
+  }
+}
+
+@each $size, $value in $size-values {
+  .basis-#{$size},
+  .flex-basis-#{$size} {
+    flex-basis: #{$value};
+  }
+}
+
+$wrap-options: (
+  'wrap': wrap,
+  'nowrap': nowrap,
+  'wrap-reverse': wrap-reverse,
+);
+
+@each $option, $value in $wrap-options {
+  .flex-#{$option} {
+    flex-wrap: $value;
+  }
+}
+
+@for $i from 0 through 8 {
+  $pixels: #{$i * 4}px;
+
+  .gap-#{$i} {
+    gap: $pixels;
+  }
+
+  .gap-x-#{$i} {
+    column-gap: $pixels;
+  }
+
+  .gap-y-#{$i} {
+    row-gap: $pixels;
+  }
+}
+
+// ****************************************************************************
+// GRID
+// ****************************************************************************
+
+@for $i from 2 through 12 {
+  .grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+
+  .grid-rows-#{$i} {
+    grid-template-rows: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+// ****************************************************************************
+// MARGIN AND PADDING
+// ****************************************************************************
+
+$spacing-directions: (
+  'top': 't',
+  'right': 'r',
+  'bottom': 'b',
+  'left': 'l',
+);
+
+.ma-auto,
+.m-auto {
+  margin: auto !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.my-auto {
+  margin-bottom: auto !important;
+  margin-top: auto !important;
+}
+
+@each $direction, $d in $spacing-directions {
+  .m#{$d}-auto {
+    margin-#{$direction}: auto !important;
+  }
+}
+
+// Margins, positive and negative
+@for $i from -12 through 12 {
+  // For negative margins, add a `-` as a prefix
+  $prefix: if($i < 0, '-', '');
+  $pixels: #{$i * 4}px;
+  $num: math.abs($i);
+
+  .#{$prefix}ma-#{$num},
+  .#{$prefix}m-#{$num} {
+    margin: $pixels !important;
+  }
+
+  .#{$prefix}mx-#{$num} {
+    margin-left: $pixels !important;
+    margin-right: $pixels !important;
+  }
+
+  .#{$prefix}my-#{$num} {
+    margin-bottom: $pixels !important;
+    margin-top: $pixels !important;
+  }
+
+  @each $direction, $d in $spacing-directions {
+    .#{$prefix}m#{$d}-#{$num} {
+      margin-#{$direction}: $pixels !important;
+    }
+  }
+}
+
+// Paddings, positive only
+@for $i from 0 through 12 {
+  $pixels: #{$i * 4}px;
+
+  .pa-#{$i},
+  .p-#{$i} {
+    padding: $pixels !important;
+  }
+
+  .px-#{$i} {
+    padding-left: $pixels !important;
+    padding-right: $pixels !important;
+  }
+
+  .py-#{$i} {
+    padding-bottom: $pixels !important;
+    padding-top: $pixels !important;
+  }
+
+  @each $direction, $d in $spacing-directions {
+    .p#{$d}-#{$i} {
+      padding-#{$direction}: $pixels !important;
+    }
+  }
+}
+
+// ****************************************************************************
+// TEXT
+// ****************************************************************************
+
+$text-colors: (
+  'accent-blue': $color-accent-blue,
+  'accent-blue-shade-1': $color-accent-blue-shade-1,
+  'accent-blue-shade-2': $color-accent-blue-shade-2,
+  'accent-green': $color-accent-green,
+  'accent-green-shade-1': $color-accent-green-shade-1,
+  'accent-green-shade-2': $color-accent-green-shade-2,
+  'accent-orange': $color-accent-orange,
+  'accent-orange-shade-1': $color-accent-orange-shade-1,
+  'accent-orange-shade-2': $color-accent-orange-shade-2,
+  'accent-pink': $color-accent-pink,
+  'accent-pink-shade-1': $color-accent-pink-shade-1,
+  'accent-pink-shade-2': $color-accent-pink-shade-2,
+  'accent-red-shade-1': $color-accent-red-shade-1,
+  'accent-red-shade-2': $color-accent-red-shade-2,
+  'alert-red': $color-alert-red,
+  'background': $color-background,
+  'black': $color-black,
+  'blue-100': $color-blue-100,
+  'blue-200': $color-blue-200,
+  'blue-300': $color-blue-300,
+  'blue-400': $color-blue-400,
+  'blue-500': $color-blue-500,
+  'border': $color-border,
+  'button-background': $color-button-background,
+  'gold-100': $color-gold-100,
+  'gold-200': $color-gold-200,
+  'gold-300': $color-gold-300,
+  'gold-400': $color-gold-400,
+  'gold-500': $color-gold-500,
+  'gray-100': $color-gray-100,
+  'gray-200': $color-gray-200,
+  'gray-300': $color-gray-300,
+  'gray-400': $color-gray-400,
+  'gray-500': $color-gray-500,
+  'green-100': $color-green-100,
+  'green-200': $color-green-200,
+  'green-300': $color-green-300,
+  'green-400': $color-green-400,
+  'green-500': $color-green-500,
+  'orange': $color-orange,
+  'orange-tint-1': $color-orange-tint-1,
+  'orange-tint-2': $color-orange-tint-2,
+  'pink': $color-pink,
+  'pink-tint-1': $color-pink-tint-1,
+  'pink-tint-2': $color-pink-tint-2,
+  'providers-blue': $color-providers-blue,
+  'providers-blue-tint-1': $color-providers-blue-tint-1,
+  'providers-blue-tint-2': $color-providers-blue-tint-2,
+  'providers-green': $color-providers-green,
+  'providers-green-tint-1': $color-providers-green-tint-1,
+  'providers-green-tint-2': $color-providers-green-tint-2,
+  'purple-100': $color-purple-100,
+  'purple-200': $color-purple-200,
+  'purple-300': $color-purple-300,
+  'purple-400': $color-purple-400,
+  'purple-500': $color-purple-500,
+  'red-100': $color-red-100,
+  'red-200': $color-red-200,
+  'red-300': $color-red-300,
+  'red-400': $color-red-400,
+  'red-500': $color-red-500,
+  'status-error': $color-status-error,
+  'status-success': $color-status-success,
+  'status-warning': $color-status-warning,
+  'text-disabled': $color-text-disabled,
+  'text-placeholder': $color-text-placeholder,
+  'text-primary': $color-text-primary,
+  'text-secondary': $color-text-secondary,
+  'white': $color-white,
+  'yellow': $color-yellow,
+  'yellow-tint-1': $color-yellow-tint-1,
+  'yellow-tint-2': $color-yellow-tint-2,
+);
+
+@each $name, $color in $text-colors {
+  .text-#{$name} {
+    color: $color !important;
+  }
+}
+
+$text-directions: (
+  'center': center,
+  'left': left,
+  'right': right,
+);
+
+@each $direction, $d in $text-directions {
+  .text-#{$direction} {
+    text-align: $d !important;
+  }
+}
+
+$font-families: (
+  'grenette': $font-family-grenette,
+  'polymath': $font-family-polymath,
+);
+
+@each $family, $f in $font-families {
+  .font-#{$family} {
+    font-family: $f;
+  }
+}
+
+$font-sizes: (
+  'xs': $font-size-x-small,
+  'sm': $font-size-small,
+  'md': $font-size-medium,
+  'lg': $font-size-large,
+  'xl': $font-size-x-large,
+  '2xl': $font-size-2x-large,
+  '3xl': $font-size-3x-large,
+);
+
+@each $size, $s in $font-sizes {
+  .text-#{$size} {
+    font-size: $s;
+  }
+}
+
+$font-weights: (
+  'light': $font-weight-light,
+  'normal': $font-weight-normal,
+  'regular': $font-weight-normal,
+  'medium': $font-weight-medium,
+  'semibold': $font-weight-semibold,
+  'bold': $font-weight-bold,
+);
+
+@each $weight, $w in $font-weights {
+  .font-#{$weight} {
+    font-weight: $w !important;
+  }
+}
+
+.font-italic {
+  font-style: italic !important;
+}
+
+$text-transforms: (
+  'uppercase': uppercase,
+  'lowercase': lowercase,
+  'capitalize': capitalize,
+);
+
+@each $transform, $t in $text-transforms {
+  .text-#{$transform} {
+    text-transform: $t !important;
+  }
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.line-through {
+  text-decoration: line-through !important;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ****************************************************************************
+// BOX-SHADOW
+// NOTE(slanden): These are the only box-shadow classes that we are using.
+// ****************************************************************************
+
+.elevation-0 {
+  box-shadow:
+    0 0 0 0 rgba(0, 0, 0, 0.2),
+    0 0 0 0 rgba(0, 0, 0, 0.14),
+    0 0 0 0 rgba(0, 0, 0, 0.12) !important;
+}
+
+.elevation-4 {
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12) !important;
+}
+
+// ****************************************************************************
+// MISC
+// ****************************************************************************
+
+// NOTE(Camden): Tailwind-equivalent object-fit classes that should be replaced with Tailwind
+// when we implement it.
+.object-cover {
+  object-fit: cover;
+}
+
+.object-contain {
+  object-fit: contain;
+}
+
+$overflow-options: (
+  'auto': auto,
+  'hidden': hidden,
+  'scroll': scroll,
+  'visible': visible,
+);
+
+@each $option, $value in $overflow-options {
+  .overflow-#{$option} {
+    overflow: $value !important;
+  }
+
+  .overflow-x-#{$option} {
+    overflow-x: $value !important;
+  }
+
+  .overflow-y-#{$option} {
+    overflow-y: $value !important;
+  }
+}
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+$rounded-options: (
+  // @deprecated use 'none' instead
+  '0': 0,
+  'circle': 50%,
+  'none': 0,
+  'pill': 9999px,
+  'sm': 2px,
+  // We're going to skip this key in our loop
+  'md': 4px,
+  'lg': 8px,
+  'xl': 12px,
+  '2xl': 24px,
+  // @deprecated use '2xl' instead
+  'xxl': 24px
+);
+
+@each $key, $value in $rounded-options {
+  // If it's `md` don't add the suffix
+  $suffix: if($key == 'md', '', '-#{$key}');
+
+  .rounded#{$suffix} {
+    border-radius: $value;
+  }
+}