@propelinc/citrus-ui 0.2.7 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"

package/src/colors/colors.json

@@ -1,37 +1,34 @@
 {
-  "color-white": "#FFF",
-
-  "color-navy": "#1B2538",
-  "color-navy-tint-1": "#495160",
-  "color-navy-tint-2": "#767C88",
-  "color-navy-tint-3": "#A4A8AF",
-  "color-navy-tint-4": "#D1D3D7",
-
-  "color-provide-green": "#B3F6A2",
-  "color-provide-green-tint-1": "#D1FAC7",
-  "color-provide-green-tint-2": "#ECFDE8",
-
-  "color-accent-green": "#61D866",
+  "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",
 
-  "color-blue": "#A3B0F9",
-  "color-blue-tint-1": "#D1D7FC",
-  "color-blue-tint-2": "#E8EBFD",
+  "color-providers-blue-tint-2": "#E8EBFD",
+  "color-providers-blue-tint-1": "#D1D7FC",
+  "color-providers-blue": "#A3B0F9",
+  "color-accent-blue": "#5560CB",
+  "color-accent-blue-shade-1": "#404898",
+  "color-accent-blue-shade-2": "#2F3570",
 
-  "color-blue-accent": "#5560CB",
-  "color-blue-accent-shade-1": "#404898",
-  "color-blue-accent-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": "#F5F2ED",
+  "color-neutral": "#FAF8F6",
   "color-neutral-shade": "#E9E6E1",
-  "color-neutral-tint": "#FAF8F6",
+  "color-white": "#FFF",
 
-  "color-peach": "#FDCAB7",
-  "color-orange": "#FC8247",
+  "color-purple": "#7C3872",
   "color-pink": "#F6A0D1",
-  "color-purple": "#79386F",
+  "color-orange": "#FC8247",
+  "color-peach": "#FDCAB7",
+  "color-yellow": "#FFC200",
+  "color-lemon": "#FEE69A",
 
-  "color-red": "#C34459",
-  "color-yellow": "#F2C94C"
+  "color-alert-red": "#C34459"
 }

package/src/colors/theme.ts

@@ -1,33 +1,19 @@
 import { VuetifyThemeVariant } from 'vuetify/types/services/theme';
 
-import PROVIDE_COLORS from './colors.json';
+import COLORS from './colors.json';
 
-const Theme = {
-  'primary': PROVIDE_COLORS['color-blue-accent'],
-  'secondary': PROVIDE_COLORS['color-accent-green'],
-
-  'info': PROVIDE_COLORS['color-blue'],
-  'success': PROVIDE_COLORS['color-blue-accent'],
-  'warning': PROVIDE_COLORS['color-yellow'],
-  'error': PROVIDE_COLORS['color-red'],
-
-  'navy': PROVIDE_COLORS['color-navy'],
-  'navy-tint-4': PROVIDE_COLORS['color-navy-tint-4'],
-  'navy-tint-3': PROVIDE_COLORS['color-navy-tint-3'],
-  'navy-tint-2': PROVIDE_COLORS['color-navy-tint-2'],
-  'navy-tint-1': PROVIDE_COLORS['color-navy-tint-1'],
-  'neutral': PROVIDE_COLORS['color-neutral'],
-
-  'provide-green': PROVIDE_COLORS['color-provide-green'],
-  'provide-green-tint-1': PROVIDE_COLORS['color-provide-green-tint-1'],
-  'accent-green': PROVIDE_COLORS['color-accent-green'],
-  'blue': PROVIDE_COLORS['color-blue'],
-  'blue-tint-1': PROVIDE_COLORS['color-blue-tint-1'],
-
-  'peach': PROVIDE_COLORS['color-peach'],
-  'orange': PROVIDE_COLORS['color-orange'],
-  'pink': PROVIDE_COLORS['color-pink'],
-  'purple': PROVIDE_COLORS['color-purple'],
+const VuetifyConfig = {
+  primary: COLORS['color-accent-blue'],
+  secondary: COLORS['color-accent-green'],
+  info: COLORS['color-providers-blue'],
+  success: COLORS['color-accent-blue'],
+  warning: COLORS['color-yellow'],
+  error: COLORS['color-alert-red'],
 } as Partial<VuetifyThemeVariant>;
 
-export default Theme;
+const CitrusTheme = Object.entries(COLORS).reduce((theme, [colorName, hex]) => {
+  theme[colorName.replace('color-', '')] = hex;
+  return theme;
+}, {} as Partial<VuetifyThemeVariant>);
+
+export default { ...CitrusTheme, ...VuetifyConfig };

package/src/components/CAlert.vue

@@ -72,7 +72,7 @@ export default class CAlert extends Vue {
 
 .c-alert--error {
   & /deep/ .v-snack__wrapper {
-    background-color: @color-red;
+    background-color: @color-alert-red;
   }
 }
 

package/src/components/CBanner.vue

@@ -23,7 +23,7 @@ export default class CBanner extends Vue {
       return 'peach';
     }
 
-    return 'blue';
+    return 'providers-blue';
   }
 }
 </script>

package/src/components/CButton.vue

@@ -79,7 +79,7 @@ export default class CButton extends Vue {
 }
 
 .button--primary {
-  .button-theme(@color-white, @color-blue-accent);
+  .button-theme(@color-white, @color-accent-blue);
 }
 
 .button--primary.button--dark {
@@ -91,7 +91,7 @@ export default class CButton extends Vue {
 }
 
 .button--secondary {
-  .button-theme(@color-blue-accent, @color-white);
+  .button-theme(@color-accent-blue, @color-white);
 
   border: @border !important;
 }
@@ -105,7 +105,7 @@ export default class CButton extends Vue {
 }
 
 .button--tertiary {
-  .button-theme(@color-blue-accent, transparent);
+  .button-theme(@color-accent-blue, transparent);
 }
 
 .button--tertiary.button--dark {

package/src/components/CListItem.vue

@@ -77,7 +77,7 @@ export default class CListItem extends Vue {
 }
 
 .list-item__action {
-  color: @color-blue-accent;
+  color: @color-accent-blue;
   flex: none;
   padding-left: 12px;
 }

package/src/components/CModalLoading.vue

@@ -37,7 +37,7 @@ export default class CModalLoading extends Vue {
 @import '~@/styles/variables.less';
 
 .modal-loading__icon {
-  color: @color-blue-accent;
+  color: @color-accent-blue;
   font-size: @font-size-2x-large;
 }
 

package/src/components/CSegmentedButtonOption.vue

@@ -40,6 +40,6 @@ export default class CSegmentedButtonOption extends Vue {
 
 // This class is applied by the CSegmentedButton component.
 .segmented-button__option--active {
-  background-color: @color-blue !important;
+  background-color: @color-providers-blue !important;
 }
 </style>

package/src/styles/core.less

@@ -1,7 +1,7 @@
 @import './object-sans.less';
 @import './blitz.less';
 
-.provide.provide-theme {
+.providers.providers-theme {
   /* stylelint-disable-next-line no-invalid-position-at-import-rule */
   @import './typography.less';
 }

package/storybook-static/css/main.cce46705.css

@@ -0,0 +1 @@
+@-webkit-keyframes skeleton-loader-animation{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation{0%{background-position:150%}to{background-position:-50%}}@font-face{font-family:ObjectSans;font-style:normal;font-weight:100;src:url(../fonts/ObjectSans-Thin.86d44227.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:100;src:url(../fonts/ObjectSans-ThinSlanted.20342160.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:400;src:url(../fonts/ObjectSans-Regular.e4ea0b90.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:400;src:url(../fonts/ObjectSans-Slanted.57a90be9.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:700;src:url(../fonts/ObjectSans-Bold.5492f3d5.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:700;src:url(../fonts/ObjectSans-BoldSlanted.29e2a87e.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:800;src:url(../fonts/ObjectSans-Heavy.d0b2f035.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:800;src:url(../fonts/ObjectSans-HeavySlanted.45e9c063.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:normal;font-weight:900;src:url(../fonts/ObjectSans-Black.314082dd.woff2) format("woff2")}@font-face{font-family:ObjectSans;font-style:italic;font-weight:900;src:url(../fonts/ObjectSans-BlackSlanted.d3163c50.woff2) format("woff2")}.providers.providers-theme{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%}.providers.providers-theme .balance{font-family:ObjectSans!important;font-size:32px!important;font-weight:100;line-height:100%}.providers.providers-theme .large-headline{font-family:ObjectSans!important;font-size:32px!important;font-weight:900;line-height:85%;text-transform:uppercase}.providers.providers-theme .large-headline-script{font-family:Blitz!important;font-size:44px!important;font-weight:400;line-height:85%}.providers.providers-theme .headline{font-family:ObjectSans!important;font-size:23px!important;font-weight:800;line-height:130%}.providers.providers-theme .subheadline{font-family:ObjectSans!important;font-size:18px!important;font-weight:800;line-height:130%}.providers.providers-theme .title{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;font-weight:800}.providers.providers-theme .body,.providers.providers-theme p{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%}.providers.providers-theme .caption{font-weight:400;line-height:150%}.providers.providers-theme .caption,.providers.providers-theme .overline{font-family:ObjectSans!important;font-size:12px!important;letter-spacing:0!important}.providers.providers-theme .overline{font-weight:800;line-height:100%;text-transform:uppercase}.providers.providers-theme .font-family-blitz{font-family:Blitz}.storybook-preview.v-application{background:transparent}.storybook-preview .v-application--wrap{min-height:unset}@-webkit-keyframes skeleton-loader-animation-data-v-cf2d75ac{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-cf2d75ac{0%{background-position:150%}to{background-position:-50%}}.c-alert[data-v-cf2d75ac]{left:16px;margin-top:24px;right:16px}.c-alert[data-v-cf2d75ac] .v-snack__wrapper{border-radius:8px}.c-alert[data-v-cf2d75ac] .v-snack__content{padding:12px 16px}.c-alert--error[data-v-cf2d75ac] .v-snack__wrapper{background-color:#c34459}.c-alert--success[data-v-cf2d75ac] .v-snack__wrapper{background-color:#49a24c}.banner[data-v-24d3d1aa]{align-items:flex-start;display:flex;padding:12px 16px}.banner__icon[data-v-24d3d1aa]{margin-right:12px}.banner__message[data-v-24d3d1aa]{flex:auto;margin:0}@-webkit-keyframes skeleton-loader-animation-data-v-66d795f0{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-66d795f0{0%{background-position:150%}to{background-position:-50%}}.button[data-v-66d795f0]{font-weight:800;letter-spacing:0;text-transform:none}.button[data-v-66d795f0] .v-btn__content{line-height:1}.button--primary[data-v-66d795f0]{background-color:#5560cb!important;color:#fff!important}.button--primary.button--dark[data-v-66d795f0]{background-color:#1b2538!important;color:#fff!important}.button--primary.button--light[data-v-66d795f0]{background-color:#fff!important;color:#1b2538!important}.button--secondary[data-v-66d795f0]{background-color:#fff!important;color:#5560cb!important;border:1px solid #e9e6e1!important}.button--secondary.button--dark[data-v-66d795f0]{background-color:#fff!important;color:#1b2538!important}.button--secondary.button--light[data-v-66d795f0]{background-color:#1b2538!important;color:#fff!important}.button--tertiary[data-v-66d795f0]{background-color:transparent!important;color:#5560cb!important}.button--tertiary.button--dark[data-v-66d795f0]{background-color:transparent!important;color:#1b2538!important}.button--tertiary.button--light[data-v-66d795f0]{background-color:transparent!important;color:#fff!important}.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined).button--primary[data-v-66d795f0]{background-color:#d1d3d7!important;color:#495160!important}.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined).button--secondary[data-v-66d795f0]{background-color:#fff!important;color:#767c88!important}.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined).button--tertiary[data-v-66d795f0]{background-color:transparent!important;color:#767c88!important}.button--large[data-v-66d795f0]{font-size:16px}.button__icon[data-v-66d795f0]{font-size:23px;height:24px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:24px}@-webkit-keyframes skeleton-loader-animation-data-v-4c61df64{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-4c61df64{0%{background-position:150%}to{background-position:-50%}}.card[data-v-4c61df64]{background:#fff;border:1px solid #e9e6e1;border-radius:8px}.card+.card[data-v-4c61df64]{margin-top:12px}.card__title[data-v-4c61df64]{font-family:ObjectSans!important;font-size:12px!important;font-weight:800;letter-spacing:0!important;line-height:100%;text-transform:uppercase;padding:12px 16px 0}.card__body[data-v-4c61df64]{padding:16px 16px 12px}.card__title+.card__body[data-v-4c61df64]{padding-top:8px}.card__body--fluid[data-v-4c61df64]{padding:0}@-webkit-keyframes skeleton-loader-animation-data-v-0b4b1e4f{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-0b4b1e4f{0%{background-position:150%}to{background-position:-50%}}[data-v-0b4b1e4f] label.v-label{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;color:#1b2538;margin-bottom:0}@-webkit-keyframes skeleton-loader-animation-data-v-0bf0ae44{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-0bf0ae44{0%{background-position:150%}to{background-position:-50%}}.list-item[data-v-0bf0ae44]{color:#1b2538;display:flex;padding:16px;text-align:left;text-decoration:none;width:100%}.list-item+.list-item[data-v-0bf0ae44]{border-top:1px solid #e9e6e1}.list-item__icon[data-v-0bf0ae44]{flex:none;padding-right:12px}.list-item__content[data-v-0bf0ae44]{flex:auto}.list-item__action[data-v-0bf0ae44]{color:#5560cb;flex:none;padding-left:12px}@-webkit-keyframes skeleton-loader-animation-data-v-0558ab0a{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-0558ab0a{0%{background-position:150%}to{background-position:-50%}}.modal-loading__icon[data-v-0558ab0a]{color:#5560cb;font-size:32px}.modal-loading__content[data-v-0558ab0a]{border-radius:8px!important;padding:28px 16px 20px;text-align:center}.modal-loading__content__message[data-v-0558ab0a]{font-weight:700;margin:12px 0 0}@-webkit-keyframes skeleton-loader-animation-data-v-dfca0d72{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-dfca0d72{0%{background-position:150%}to{background-position:-50%}}.segmented-button__option[data-v-dfca0d72]{border:1px solid #e9e6e1!important;color:#1b2538;flex:1 1 0;font-weight:800;letter-spacing:0;text-transform:none}.segmented-button__option[data-v-dfca0d72]:before{color:transparent}.segmented-button__option--active[data-v-dfca0d72]{background-color:#a3b0f9!important}@-webkit-keyframes skeleton-loader-animation-data-v-31bb230e{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-31bb230e{0%{background-position:150%}to{background-position:-50%}}.segmented-button[data-v-31bb230e]{width:100%}@-webkit-keyframes skeleton-loader-animation-data-v-1c8ad0b1{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-1c8ad0b1{0%{background-position:150%}to{background-position:-50%}}.form-field__label[data-v-1c8ad0b1]{font-weight:700;margin:0 0 4px 2px}.form-field__label--disabled[data-v-1c8ad0b1]{color:#767c88}@-webkit-keyframes skeleton-loader-animation-data-v-392ad8f0{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-392ad8f0{0%{background-position:150%}to{background-position:-50%}}select[data-v-392ad8f0]{color:#1b2538;cursor:pointer;height:100%;position:absolute;width:100%;z-index:1}select[data-v-392ad8f0]:focus{outline:none}.select-input--placeholder[data-v-392ad8f0]{color:#a4a8af}@-webkit-keyframes skeleton-loader-animation-data-v-e8c6fcdc{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-e8c6fcdc{0%{background-position:150%}to{background-position:-50%}}.select__field[data-v-e8c6fcdc] legend{display:none}.select__field.v-input--has-state[data-v-e8c6fcdc] fieldset,.select__field.v-input--is-focused[data-v-e8c6fcdc] fieldset{border-color:currentColor;border-width:1px}.select__field[data-v-e8c6fcdc] .v-input__slot{min-height:48px;padding:0 16px!important}.select__field[data-v-e8c6fcdc] input,.select__field[data-v-e8c6fcdc] select{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;line-height:20px}.select__field[data-v-e8c6fcdc] fieldset{background:#fff;border-color:#e9e6e1;border-radius:8px;top:0}.select__field--disabled[data-v-e8c6fcdc] fieldset{background:#e9e6e1}.select__field--disabled[data-v-e8c6fcdc] input,.select__field--disabled[data-v-e8c6fcdc] select{color:#767c88}.select__field__icon[data-v-e8c6fcdc]{z-index:1}@-webkit-keyframes skeleton-loader-animation-data-v-059ff40c{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-059ff40c{0%{background-position:150%}to{background-position:-50%}}.skeleton-loader-circle[data-v-059ff40c]{-webkit-animation:skeleton-loader-animation-data-v-059ff40c 3s infinite;animation:skeleton-loader-animation-data-v-059ff40c 3s infinite;background:linear-gradient(75deg,#a4a8af 30%,#d1d3d7 50%,#a4a8af 70%);background-size:200% 150%;border-radius:18px;height:36px;width:36px}@-webkit-keyframes skeleton-loader-animation-data-v-2d331031{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-2d331031{0%{background-position:150%}to{background-position:-50%}}.skeleton-loader-text[data-v-2d331031]{width:100%}.skeleton-loader-text__line[data-v-2d331031]{-webkit-animation:skeleton-loader-animation-data-v-2d331031 3s infinite;animation:skeleton-loader-animation-data-v-2d331031 3s infinite;background:linear-gradient(75deg,#a4a8af 30%,#d1d3d7 50%,#a4a8af 70%);background-size:200% 150%;border-radius:2px;height:14px;width:100%}.skeleton-loader-text__line+.skeleton-loader-text__line[data-v-2d331031]{margin-top:4px}.skeleton-loader-text__line[data-v-2d331031]:last-child{width:calc(100% - 32px)}@-webkit-keyframes skeleton-loader-animation-data-v-19b5e9e8{0%{background-position:150%}to{background-position:-50%}}@keyframes skeleton-loader-animation-data-v-19b5e9e8{0%{background-position:150%}to{background-position:-50%}}.text-field__field[data-v-19b5e9e8] legend{display:none}.text-field__field.v-input--has-state[data-v-19b5e9e8] fieldset,.text-field__field.v-input--is-focused[data-v-19b5e9e8] fieldset{border-color:currentColor;border-width:1px}.text-field__field[data-v-19b5e9e8] .v-input__slot{min-height:48px;padding:0 16px!important}.text-field__field[data-v-19b5e9e8] input,.text-field__field[data-v-19b5e9e8] select{font-family:ObjectSans!important;font-size:14px!important;font-weight:400;line-height:150%;line-height:20px}.text-field__field[data-v-19b5e9e8] fieldset{background:#fff;border-color:#e9e6e1;border-radius:8px;top:0}.text-field__field--disabled[data-v-19b5e9e8] fieldset{background:#e9e6e1}.text-field__field--disabled[data-v-19b5e9e8] input,.text-field__field--disabled[data-v-19b5e9e8] select{color:#767c88}

package/storybook-static/iframe.html

@@ -123,11 +123,11 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link href="css/vendors~main.ec1b1c6e.css" rel="stylesheet"><link href="css/main.918ac2bc.css" rel="stylesheet"><style>#root[hidden],
+  };</script><link href="css/vendors~main.ec1b1c6e.css" rel="stylesheet"><link href="css/main.cce46705.css" rel="stylesheet"><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";
             
         
             
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.b29ddaa7.iframe.bundle.js"></script><script src="vendors~main.4d3a0ad4.iframe.bundle.js"></script><script src="main.4c454d37.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.b29ddaa7.iframe.bundle.js"></script><script src="vendors~main.1d6c6a41.iframe.bundle.js"></script><script src="main.0da2f130.iframe.bundle.js"></script></body></html>