@propelinc/citrus-ui 0.5.1 → 1.0.0

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;
+}

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,7 +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;
+}