@propelinc/citrus-ui 1.0.0 → 1.0.2

package/dist/styles/main.css

@@ -1,99 +1,113 @@
-/* 1. Use a more-intuitive box-sizing model */
-*,
+/**
+ * NOTE about `@layer reset`:
+ *
+ * By using a CSS Layer, we can specify the order of styles without relying on the order of imports.
+ * For example, in freshebt-vue, we can have:
+ *
+ * ```css
+ * @layer reset, base, components, utilities;
+ * ```
+ *
+ * This will ensure reset styles are applied first, and then the Tailwind layers of `base`,
+ * `components`, and `utilities` are applied after, regardless of import order.
+ */
+@layer reset {
+  /* 1. Use a more-intuitive box-sizing model */
+  *,
 *::before,
 *::after {
-  box-sizing: border-box;
-}
+    box-sizing: border-box;
+  }
 
-/* 2. Remove default padding and margin */
-* {
-  margin: 0;
-  padding: 0;
-}
+  /* 2. Remove default padding and margin */
+  * {
+    margin: 0;
+    padding: 0;
+  }
 
-/* 3. Enable keyword animations */
-@media (prefers-reduced-motion: no-preference) {
-  html {
-    interpolate-size: allow-keywords;
+  /* 3. Enable keyword animations */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      interpolate-size: allow-keywords;
+    }
+  }
+  body {
+    /* 5. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+    /* 4. Add accessible line-height */
+    line-height: 1.5;
   }
-}
-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,
+  /* 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%;
-}
+    display: block;
+    max-width: 100%;
+  }
 
-/* 7. Inherit fonts for form controls */
-input,
+  /* 7. Inherit fonts for form controls */
+  input,
 button,
 textarea,
 select {
-  background: transparent;
-  border-style: none;
-  color: inherit;
-  font: inherit;
-}
+    background: transparent;
+    border-style: none;
+    color: inherit;
+    font: inherit;
+  }
 
-/* 8. Avoid text overflows */
-p,
+  /* 8. Avoid text overflows */
+  p,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  overflow-wrap: break-word;
-}
+    overflow-wrap: break-word;
+  }
 
-p {
-  margin-bottom: 16px;
-  /* 9. Improve line wrapping */
-  text-wrap: pretty;
-}
+  p {
+    margin-bottom: 16px;
+    /* 9. Improve line wrapping */
+    text-wrap: pretty;
+  }
 
-h1,
+  h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  text-wrap: balance;
-}
+    text-wrap: balance;
+  }
 
-/* 10. Remove default tap highlight */
-button,
+  /* 10. Remove default tap highlight */
+  button,
 a {
-  -webkit-tap-highlight-color: transparent;
-}
+    -webkit-tap-highlight-color: transparent;
+  }
 
-/* 11. Add default padding to lists */
-ol,
+  /* 11. Add default padding to lists */
+  ol,
 ul {
-  padding-left: 24px;
-}
+    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,
+  /* 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;
+    text-decoration: none !important;
+  }
 }
-
 :root,
 :host,
 .sl-theme-light {
@@ -931,42 +945,102 @@ strong {
   align-items: baseline !important;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .align-content-baseline {
   align-content: baseline !important;
 }
 
+.content-baseline {
+  align-content: baseline;
+}
+
+.self-baseline {
+  align-self: baseline;
+}
+
 .align-center {
   align-items: center !important;
 }
 
+.items-center {
+  align-items: center;
+}
+
 .align-content-center {
   align-content: center !important;
 }
 
+.content-center {
+  align-content: center;
+}
+
+.self-center {
+  align-self: center;
+}
+
 .align-end {
   align-items: flex-end !important;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .align-content-end {
   align-content: flex-end !important;
 }
 
+.content-end {
+  align-content: flex-end;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
 .align-start {
   align-items: flex-start !important;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .align-content-start {
   align-content: flex-start !important;
 }
 
+.content-start {
+  align-content: flex-start;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
 .align-stretch {
   align-items: stretch !important;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .align-content-stretch {
   align-content: stretch !important;
 }
 
+.content-stretch {
+  align-content: stretch;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
 .justify-around {
   justify-content: space-around !important;
 }
@@ -2499,290 +2573,578 @@ strong {
   padding-left: 48px !important;
 }
 
+.bg-accent-blue {
+  background-color: #5560cb !important;
+}
+
 .text-accent-blue {
   color: #5560cb !important;
 }
 
+.bg-accent-blue-shade-1 {
+  background-color: #404898 !important;
+}
+
 .text-accent-blue-shade-1 {
   color: #404898 !important;
 }
 
+.bg-accent-blue-shade-2 {
+  background-color: #2f3570 !important;
+}
+
 .text-accent-blue-shade-2 {
   color: #2f3570 !important;
 }
 
+.bg-accent-green {
+  background-color: #49a24c !important;
+}
+
 .text-accent-green {
   color: #49a24c !important;
 }
 
+.bg-accent-green-shade-1 {
+  background-color: #3a823d !important;
+}
+
 .text-accent-green-shade-1 {
   color: #3a823d !important;
 }
 
+.bg-accent-green-shade-2 {
+  background-color: #17551a !important;
+}
+
 .text-accent-green-shade-2 {
   color: #17551a !important;
 }
 
+.bg-accent-orange {
+  background-color: #fc8247 !important;
+}
+
 .text-accent-orange {
   color: #fc8247 !important;
 }
 
+.bg-accent-orange-shade-1 {
+  background-color: #e15c1b !important;
+}
+
 .text-accent-orange-shade-1 {
   color: #e15c1b !important;
 }
 
+.bg-accent-orange-shade-2 {
+  background-color: #a9440b !important;
+}
+
 .text-accent-orange-shade-2 {
   color: #a9440b !important;
 }
 
+.bg-accent-pink {
+  background-color: #d75fae !important;
+}
+
 .text-accent-pink {
   color: #d75fae !important;
 }
 
+.bg-accent-pink-shade-1 {
+  background-color: #7c3872 !important;
+}
+
 .text-accent-pink-shade-1 {
   color: #7c3872 !important;
 }
 
+.bg-accent-pink-shade-2 {
+  background-color: #56204e !important;
+}
+
 .text-accent-pink-shade-2 {
   color: #56204e !important;
 }
 
+.bg-accent-red-shade-1 {
+  background-color: #981d31 !important;
+}
+
 .text-accent-red-shade-1 {
   color: #981d31 !important;
 }
 
+.bg-accent-red-shade-2 {
+  background-color: #701323 !important;
+}
+
 .text-accent-red-shade-2 {
   color: #701323 !important;
 }
 
+.bg-alert-red {
+  background-color: #c34459 !important;
+}
+
 .text-alert-red {
   color: #c34459 !important;
 }
 
+.bg-background {
+  background-color: #fff !important;
+}
+
 .text-background {
   color: #fff !important;
 }
 
+.bg-black {
+  background-color: #000 !important;
+}
+
 .text-black {
   color: #000 !important;
 }
 
+.bg-blue-100 {
+  background-color: #e0edff !important;
+}
+
 .text-blue-100 {
   color: #e0edff !important;
 }
 
+.bg-blue-200 {
+  background-color: #b2cffa !important;
+}
+
 .text-blue-200 {
   color: #b2cffa !important;
 }
 
+.bg-blue-300 {
+  background-color: #7a95f8 !important;
+}
+
 .text-blue-300 {
   color: #7a95f8 !important;
 }
 
+.bg-blue-400 {
+  background-color: #496ae0 !important;
+}
+
 .text-blue-400 {
   color: #496ae0 !important;
 }
 
+.bg-blue-500 {
+  background-color: #1a43d7 !important;
+}
+
 .text-blue-500 {
   color: #1a43d7 !important;
 }
 
+.bg-border {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
 .text-border {
   color: rgba(0, 0, 0, 0.1) !important;
 }
 
+.bg-button-background {
+  background-color: #000 !important;
+}
+
 .text-button-background {
   color: #000 !important;
 }
 
+.bg-gold-100 {
+  background-color: #fff0ba !important;
+}
+
 .text-gold-100 {
   color: #fff0ba !important;
 }
 
+.bg-gold-200 {
+  background-color: #fcde74 !important;
+}
+
 .text-gold-200 {
   color: #fcde74 !important;
 }
 
+.bg-gold-300 {
+  background-color: #ffc120 !important;
+}
+
 .text-gold-300 {
   color: #ffc120 !important;
 }
 
+.bg-gold-400 {
+  background-color: #f99500 !important;
+}
+
 .text-gold-400 {
   color: #f99500 !important;
 }
 
+.bg-gold-500 {
+  background-color: #f47500 !important;
+}
+
 .text-gold-500 {
   color: #f47500 !important;
 }
 
+.bg-gray-100 {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
 .text-gray-100 {
   color: rgba(0, 0, 0, 0.04) !important;
 }
 
+.bg-gray-200 {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
 .text-gray-200 {
   color: rgba(0, 0, 0, 0.1) !important;
 }
 
+.bg-gray-300 {
+  background-color: rgba(0, 0, 0, 0.31) !important;
+}
+
 .text-gray-300 {
   color: rgba(0, 0, 0, 0.31) !important;
 }
 
+.bg-gray-400 {
+  background-color: rgba(0, 0, 0, 0.48) !important;
+}
+
 .text-gray-400 {
   color: rgba(0, 0, 0, 0.48) !important;
 }
 
+.bg-gray-500 {
+  background-color: rgba(0, 0, 0, 0.69) !important;
+}
+
 .text-gray-500 {
   color: rgba(0, 0, 0, 0.69) !important;
 }
 
+.bg-green-100 {
+  background-color: #dcf2cb !important;
+}
+
 .text-green-100 {
   color: #dcf2cb !important;
 }
 
+.bg-green-200 {
+  background-color: #b8da96 !important;
+}
+
 .text-green-200 {
   color: #b8da96 !important;
 }
 
+.bg-green-300 {
+  background-color: #8bc95a !important;
+}
+
 .text-green-300 {
   color: #8bc95a !important;
 }
 
+.bg-green-400 {
+  background-color: #3fa41c !important;
+}
+
 .text-green-400 {
   color: #3fa41c !important;
 }
 
+.bg-green-500 {
+  background-color: #1f7400 !important;
+}
+
 .text-green-500 {
   color: #1f7400 !important;
 }
 
+.bg-orange {
+  background-color: #ffa895 !important;
+}
+
 .text-orange {
   color: #ffa895 !important;
 }
 
+.bg-orange-tint-1 {
+  background-color: #fdcab7 !important;
+}
+
 .text-orange-tint-1 {
   color: #fdcab7 !important;
 }
 
+.bg-orange-tint-2 {
+  background-color: #ffdbce !important;
+}
+
 .text-orange-tint-2 {
   color: #ffdbce !important;
 }
 
+.bg-pink {
+  background-color: #f6a0d1 !important;
+}
+
 .text-pink {
   color: #f6a0d1 !important;
 }
 
+.bg-pink-tint-1 {
+  background-color: #fdc3e4 !important;
+}
+
 .text-pink-tint-1 {
   color: #fdc3e4 !important;
 }
 
+.bg-pink-tint-2 {
+  background-color: #ffdef1 !important;
+}
+
 .text-pink-tint-2 {
   color: #ffdef1 !important;
 }
 
+.bg-providers-blue {
+  background-color: black !important;
+}
+
 .text-providers-blue {
   color: black !important;
 }
 
+.bg-providers-blue-tint-1 {
+  background-color: #d1d7fc !important;
+}
+
 .text-providers-blue-tint-1 {
   color: #d1d7fc !important;
 }
 
+.bg-providers-blue-tint-2 {
+  background-color: #e8ebfd !important;
+}
+
 .text-providers-blue-tint-2 {
   color: #e8ebfd !important;
 }
 
+.bg-providers-green {
+  background-color: #51d156 !important;
+}
+
 .text-providers-green {
   color: #51d156 !important;
 }
 
+.bg-providers-green-tint-1 {
+  background-color: #b3f6a2 !important;
+}
+
 .text-providers-green-tint-1 {
   color: #b3f6a2 !important;
 }
 
+.bg-providers-green-tint-2 {
+  background-color: #d1fac7 !important;
+}
+
 .text-providers-green-tint-2 {
   color: #d1fac7 !important;
 }
 
+.bg-purple-100 {
+  background-color: #ebe4ff !important;
+}
+
 .text-purple-100 {
   color: #ebe4ff !important;
 }
 
+.bg-purple-200 {
+  background-color: #cdbcff !important;
+}
+
 .text-purple-200 {
   color: #cdbcff !important;
 }
 
+.bg-purple-300 {
+  background-color: #ac8eff !important;
+}
+
 .text-purple-300 {
   color: #ac8eff !important;
 }
 
+.bg-purple-400 {
+  background-color: #804fe8 !important;
+}
+
 .text-purple-400 {
   color: #804fe8 !important;
 }
 
+.bg-purple-500 {
+  background-color: #6431d0 !important;
+}
+
 .text-purple-500 {
   color: #6431d0 !important;
 }
 
+.bg-red-100 {
+  background-color: #ffe5dd !important;
+}
+
 .text-red-100 {
   color: #ffe5dd !important;
 }
 
+.bg-red-200 {
+  background-color: #ffaaa5 !important;
+}
+
 .text-red-200 {
   color: #ffaaa5 !important;
 }
 
+.bg-red-300 {
+  background-color: #ff6969 !important;
+}
+
 .text-red-300 {
   color: #ff6969 !important;
 }
 
+.bg-red-400 {
+  background-color: #f52323 !important;
+}
+
 .text-red-400 {
   color: #f52323 !important;
 }
 
+.bg-red-500 {
+  background-color: #cd000c !important;
+}
+
 .text-red-500 {
   color: #cd000c !important;
 }
 
+.bg-status-error {
+  background-color: #cd000c !important;
+}
+
 .text-status-error {
   color: #cd000c !important;
 }
 
+.bg-status-success {
+  background-color: #1f7400 !important;
+}
+
 .text-status-success {
   color: #1f7400 !important;
 }
 
+.bg-status-warning {
+  background-color: #f47500 !important;
+}
+
 .text-status-warning {
   color: #f47500 !important;
 }
 
+.bg-text-disabled {
+  background-color: rgba(0, 0, 0, 0.31) !important;
+}
+
 .text-text-disabled {
   color: rgba(0, 0, 0, 0.31) !important;
 }
 
+.bg-text-placeholder {
+  background-color: rgba(0, 0, 0, 0.48) !important;
+}
+
 .text-text-placeholder {
   color: rgba(0, 0, 0, 0.48) !important;
 }
 
+.bg-text-primary {
+  background-color: #000 !important;
+}
+
 .text-text-primary {
   color: #000 !important;
 }
 
+.bg-text-secondary {
+  background-color: rgba(0, 0, 0, 0.69) !important;
+}
+
 .text-text-secondary {
   color: rgba(0, 0, 0, 0.69) !important;
 }
 
+.bg-white {
+  background-color: #fff !important;
+}
+
 .text-white {
   color: #fff !important;
 }
 
+.bg-yellow {
+  background-color: #ffc200 !important;
+}
+
 .text-yellow {
   color: #ffc200 !important;
 }
 
+.bg-yellow-tint-1 {
+  background-color: #ffdc6b !important;
+}
+
 .text-yellow-tint-1 {
   color: #ffdc6b !important;
 }
 
+.bg-yellow-tint-2 {
+  background-color: #fee69a !important;
+}
+
 .text-yellow-tint-2 {
   color: #fee69a !important;
 }
@@ -2819,6 +3181,10 @@ strong {
   font-size: 16px;
 }
 
+.text-ml {
+  font-size: 18px;
+}
+
 .text-lg {
   font-size: 20px;
 }
@@ -2863,6 +3229,44 @@ strong {
   font-style: italic !important;
 }
 
+/* Using the same naming convention as Tailwind */
+.tracking-tighter {
+  letter-spacing: -0.5px;
+}
+
+.tracking-tight {
+  letter-spacing: -0.25px;
+}
+
+.tracking-normal {
+  letter-spacing: normal;
+}
+
+.tracking-wide {
+  letter-spacing: 0.25px;
+}
+
+.tracking-wider {
+  letter-spacing: 0.5px;
+}
+
+/* This does not use the same naming convention as Tailwind, but we can make ours match it when implemented */
+.leading-none {
+  line-height: 1;
+}
+
+.leading-small {
+  line-height: 120%;
+}
+
+.leading-medium {
+  line-height: 125%;
+}
+
+.leading-large {
+  line-height: 140%;
+}
+
 .text-uppercase {
   text-transform: uppercase !important;
 }