@propelinc/citrus-ui 1.0.0 → 1.0.2

package/dist/styles/utils.css

@@ -248,42 +248,102 @@
   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;
 }
@@ -1816,290 +1876,578 @@
   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;
 }
@@ -2136,6 +2484,10 @@
   font-size: 16px;
 }
 
+.text-ml {
+  font-size: 18px;
+}
+
 .text-lg {
   font-size: 20px;
 }
@@ -2180,6 +2532,44 @@
   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;
 }