@propelinc/citrus-ui 0.6.0 → 1.0.0

package/dist/theme/icons.d.ts

@@ -1,3 +1,36 @@
-import type { VuetifyIcons } from 'vuetify/types/services/icons';
-declare const Icons: Partial<VuetifyIcons>;
+import { DefineComponent } from 'vue';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+import { IconDefinition } from '@fortawesome/pro-light-svg-icons';
+declare const Icons: {
+    readonly citrusCheckboxOn: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusCheckboxOff: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusRadioOn: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusRadioOff: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+    readonly citrusClear: {
+        readonly component: DefineComponent<FontAwesomeIconProps>;
+        readonly props: {
+            readonly icon: IconDefinition;
+        };
+    };
+};
 export default Icons;

package/dist/types/CForm.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+import { default as CForm } from '../components/CForm.vue';
+export interface ValidationState {
+    id: string;
+    validate: () => boolean;
+    valid: Ref<boolean>;
+    field?: Ref<HTMLElement | null>;
+}
+export type CFormRef = typeof CForm & {
+    validate: () => boolean;
+    inputs: ValidationState[];
+};

package/dist/types/font-awesome.d.ts

@@ -0,0 +1,5 @@
+import { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
+import { PropType } from 'vue';
+export type FaIconArray = [IconPrefix, IconName];
+export type FaIcon = IconName | FaIconArray | IconDefinition;
+export type FaPropType = PropType<FaIcon>;

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+export interface SplitInputField {
+    characters: number;
+    placeholder?: string;
+    separator?: string;
+}
+export type SplitInputRule = (v: string) => string | boolean;
+export declare enum InputVariants {
+    DEFAULT = "default",
+    CONTAINED = "contained",
+    SEGMENTED = "segmented"
+}
+export type ToastVariant = 'info' | 'success' | 'error' | 'warning';

package/index.ts

@@ -0,0 +1,2 @@
+export { default } from './src';
+export * from './src';

package/package.json

@@ -1,61 +1,76 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"
   },
   "license": "UNLICENSED",
-  "scripts": {
-    "generate:component": "plop component"
-  },
-  "main": "./dist/citrus-ui.common.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist",
+    "src",
+    "index.ts"
+  ],
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/pro-light-svg-icons": "5.15.3",
-    "@fortawesome/pro-solid-svg-icons": "5.15.3",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "core-js": "^3.6.5",
-    "vue": "^2.6.10",
-    "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^9.1.2",
-    "vuetify": "2.2.26"
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/pro-light-svg-icons": "6.6.0",
+    "@fortawesome/pro-regular-svg-icons": "6.6.0",
+    "@fortawesome/pro-solid-svg-icons": "6.6.0",
+    "@fortawesome/vue-fontawesome": "3.1.2",
+    "@shoelace-style/shoelace": "2.15.0",
+    "core-js": "3.21.0",
+    "dayjs": "1.11.13",
+    "i18next": "19.0.0",
+    "lodash": "4.17.23",
+    "maska": "^2.1.11",
+    "scroll-into-view-if-needed": "^3.1.0",
+    "vue": "3.5.18",
+    "@propelinc/shared-utils": "0.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.17.2",
-    "@storybook/addon-essentials": "^6.0.26",
-    "@storybook/addon-links": "^6.0.26",
-    "@storybook/storybook-deployer": "2.8.7",
-    "@storybook/vue": "^6.0.26",
-    "@types/jest": "^24.0.19",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/test-utils": "^1.1.4",
-    "babel-loader": "8.2.3",
-    "css-loader": "5.2.7",
-    "plop": "2.7.4",
-    "postcss": "8.2.13",
-    "prettier": "^2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "sass": "1.32.0",
-    "sass-loader": "~8.0.2",
-    "tsc-alias": "1.3.7",
-    "typescript": "~4.1.5",
-    "vue-cli-plugin-storybook": "~2.0.0",
-    "vue-cli-plugin-vuetify": "~2.4.0",
-    "vue-loader": "15.7.0",
-    "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.7.0"
+    "@chromatic-com/storybook": "3.2.7",
+    "@storybook/addon-a11y": "8.6.15",
+    "@storybook/addon-essentials": "8.6.15",
+    "@storybook/addon-links": "8.6.15",
+    "@storybook/addon-mdx-gfm": "8.6.15",
+    "@storybook/blocks": "8.6.15",
+    "@storybook/vue3-vite": "8.6.15",
+    "@types/lodash": "4.17.23",
+    "@vitejs/plugin-vue": "6.0.0",
+    "@vue/test-utils": "2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
+    "autoprefixer": "^10.4.21",
+    "react-syntax-highlighter": "15.6.6",
+    "sass": "1.45.0",
+    "storybook": "8.6.15",
+    "storybook-addon-vue-mdx": "1.0.6",
+    "storybook-vue3-router": "5.0.0",
+    "vite": "6.4.1",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "3.1.4",
+    "vue-router": "4.5.1",
+    "vue-tsc": "3.1.0",
+    "@propelinc/test-utils": "0.0.1"
   },
   "lint-staged": {
     "*.{js,ts,vue}": "eslint --fix",
     "*.{scss,vue}": "stylelint --fix",
     "*": "prettier --write --ignore-unknown --ignore-path='../../.prettierignore'"
+  },
+  "scripts": {
+    "build": "vite build && pnpm run build:styles",
+    "build:styles": "node scripts/build-styles.mjs"
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./styles/main.css": "./dist/styles/main.css",
+    "./styles/utils.css": "./dist/styles/utils.css",
+    "./src/*": "./src/*"
   }
-}
+}

package/src/assets/logos/propel/icon.svg

@@ -0,0 +1,15 @@
+<svg width="30" height="37" viewBox="0 0 30 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_911_9050)">
+<path d="M7.39438 0.692966C7.39438 0.692966 6.35052 1.4649 5.56982 2.23683C5.3242 2.44735 5.35052 2.66665 5.36806 2.98244C5.44701 4.04384 5.64876 6.40349 7.25403 8.14033C8.85052 9.87718 10.9119 9.64033 10.9119 9.64033L15.2979 8.67542L7.39438 0.692966Z" fill="black" stroke="black" stroke-width="0.964912" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.482422 22.6316C0.482422 29.6754 6.42979 35.386 13.7719 35.386C21.114 35.386 27.0614 29.6754 27.0614 22.6316C27.0614 15.5877 21.114 9.8772 13.7719 9.8772C6.42979 9.8772 0.482422 15.5877 0.482422 22.6316ZM7.8947 22.6316C7.8947 25.9123 10.6666 28.5702 14.0877 28.5702C17.5087 28.5702 20.2807 25.9123 20.2807 22.6316C20.2807 19.3509 17.5087 16.693 14.0877 16.693C10.6666 16.693 7.8947 19.3509 7.8947 22.6316Z" fill="black" stroke="black" stroke-width="0.964912" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.73633 22.0965C2.73633 29.4912 8.72755 35.4824 16.1223 35.4824C23.517 35.4824 29.5083 29.4912 29.5083 22.0965C29.5083 14.7017 23.517 8.71051 16.1223 8.71051C8.72755 8.71051 2.73633 14.7017 2.73633 22.0965ZM9.88545 22.0965C9.88545 25.5438 12.6749 28.3333 16.1223 28.3333C19.5697 28.3333 22.3591 25.5438 22.3591 22.0965C22.3591 18.6491 19.5697 15.8596 16.1223 15.8596C12.6749 15.8596 9.88545 18.6491 9.88545 22.0965Z" fill="#FFC120" stroke="black" stroke-width="0.978516" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.88672 13.1491C7.41303 10.9912 9.76391 9.74562 13.3078 9.00001" stroke="black" stroke-width="0.973684" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M9.53516 34.7193C12.7808 35.7193 15.7281 35.8597 18.9211 35.193" stroke="black" stroke-width="0.973684" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M15.2988 8.67545C15.4742 8.64036 15.6321 8.54387 15.7286 8.38598C16.4567 7.21054 16.1672 4.71054 14.6146 3.28948C12.869 1.7544 11.5707 2.0965 8.44792 0.614046C7.6409 0.228081 6.99178 0.736853 7.11459 1.71054C7.23739 2.68422 8.04441 6.3772 10.3339 7.91229C11.9655 9.00001 14.4655 8.85966 15.2988 8.68422V8.67545Z" fill="#8BC95A" stroke="black" stroke-width="0.978516" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_911_9050">
+<rect width="30" height="36.0877" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/logos/propel/lockup.svg

@@ -0,0 +1,11 @@
+<svg width="120" height="38" viewBox="0 0 120 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.3101 22.5039H36.5387C36.383 22.5039 36.2563 22.6306 36.2563 22.7863V29.808C36.2563 30.018 36.0862 30.1881 35.8763 30.1881H32.2206C32.0107 30.1881 31.8406 30.018 31.8406 29.808V8.18892C31.8406 7.98261 32.0107 7.8125 32.2206 7.8125H40.3101C44.5847 7.8125 48.0594 10.5488 48.0594 15.1419C48.0594 19.735 44.5847 22.5039 40.3101 22.5039ZM36.2563 18.2764C36.2563 18.432 36.383 18.5587 36.5387 18.5587H40.1364C42.4275 18.5587 43.6437 17.1109 43.6437 15.1383C43.6437 13.1657 42.4275 11.7505 40.1364 11.7505H36.5387C36.383 11.7505 36.2563 11.8772 36.2563 12.0328V18.2728V18.2764Z" fill="black"/>
+<path d="M53.7021 14.5594V15.3919C53.7021 15.533 53.8723 15.5945 53.9664 15.4932C54.7771 14.6064 56.2937 14.0454 57.9116 14.0454H58.9214C59.1313 14.0454 59.3015 14.2155 59.3015 14.4255V17.7119C59.3015 17.9219 59.1313 18.092 58.9214 18.092H57.879C55.1499 18.092 53.7021 19.8438 53.7021 22.4064V29.8118C53.7021 30.0218 53.532 30.1919 53.3221 30.1919H49.8329C49.623 30.1919 49.4529 30.0218 49.4529 29.8118V14.5594C49.4529 14.3495 49.623 14.1793 49.8329 14.1793H53.3221C53.532 14.1793 53.7021 14.3495 53.7021 14.5594Z" fill="black"/>
+<path d="M76.9102 22.1999C76.9102 27.0174 73.1713 30.6224 68.2162 30.6224C63.2611 30.6224 59.5222 27.0174 59.5222 22.1999C59.5222 17.3824 63.2611 13.7412 68.2162 13.7412C73.1713 13.7412 76.9102 17.3462 76.9102 22.1999ZM63.7715 22.1999C63.7715 24.8639 65.6898 26.7134 68.2198 26.7134C70.7498 26.7134 72.6681 24.8602 72.6681 22.1999C72.6681 19.5396 70.7462 17.6502 68.2198 17.6502C65.6934 17.6502 63.7715 19.5034 63.7715 22.1999Z" fill="black"/>
+<path d="M87.5261 30.6224C85.9046 30.6224 84.2505 30.1193 83.1538 29.2181C83.0307 29.1167 82.8425 29.2 82.8425 29.3629V36.6814C82.8425 36.8914 82.6724 37.0615 82.4625 37.0615H78.9733C78.7634 37.0615 78.5933 36.8914 78.5933 36.6814V14.5556C78.5933 14.3457 78.7634 14.1756 78.9733 14.1756H82.4625C82.6724 14.1756 82.8425 14.3457 82.8425 14.5556V15.0478C82.8425 15.1781 82.9909 15.2469 83.0886 15.1637C84.1853 14.2335 85.8684 13.7412 87.5261 13.7412C92.6803 13.7412 95.7134 17.7842 95.7134 22.1637C95.7134 26.5433 92.6803 30.6224 87.5261 30.6224ZM87.1895 17.6502C84.931 17.6502 82.676 19.1342 82.676 22.1637C82.676 25.1932 84.9346 26.7134 87.1895 26.7134C89.7159 26.7134 91.4677 24.625 91.4677 22.1637C91.4677 19.7025 89.7159 17.6502 87.1895 17.6502Z" fill="black"/>
+<path d="M112.989 25.3344C113.264 25.3344 113.449 25.6167 113.337 25.8664C111.983 28.791 108.917 30.6224 105.674 30.6224C100.686 30.6224 97.0127 27.0174 97.0127 22.1637C97.0127 17.31 100.549 13.7412 105.504 13.7412C110.459 13.7412 113.829 17.3824 113.829 22.0986C113.829 22.5184 113.829 22.855 113.796 23.2351C113.778 23.4305 113.615 23.5826 113.42 23.5826H101.801C101.609 23.5826 101.468 23.7708 101.53 23.9518C102.091 25.6601 103.72 26.717 105.674 26.717C106.955 26.717 108.114 26.3515 108.863 25.4755C108.939 25.3887 109.044 25.3344 109.156 25.3344H112.989ZM108.968 20.4119C109.149 20.4119 109.286 20.2418 109.243 20.0644C108.838 18.4103 107.332 17.3788 105.504 17.3788C103.676 17.3788 102.033 18.4393 101.602 20.0608C101.555 20.2382 101.696 20.4119 101.877 20.4119H108.968Z" fill="black"/>
+<path d="M120 8.18912V29.8082C120 30.0182 119.83 30.1883 119.62 30.1883H116.131C115.921 30.1883 115.751 30.0182 115.751 29.8082V8.18912C115.751 7.97919 115.921 7.80908 116.131 7.80908H119.62C119.83 7.80908 120 7.97919 120 8.18912Z" fill="black"/>
+<path d="M13.725 7.37832C14.1268 6.19475 13.7757 4.37054 12.556 3.25212C11.6909 2.49203 10.9561 2.26762 10.0259 1.98531C9.3672 1.78623 8.6252 1.56182 7.61899 1.08405C7.17018 0.8705 6.71774 0.892218 6.37751 1.14196C6.34132 1.1673 6.30512 1.19988 6.27255 1.22884C6.08795 1.37 5.40025 1.89481 4.85009 2.43412C4.50262 2.74539 4.52796 3.1001 4.54606 3.3607V3.3969C4.61483 4.24023 4.77046 6.22008 6.14224 7.7113C6.5802 8.18545 7.05435 8.49312 7.50317 8.69219C6.46438 9.15186 5.49436 9.73821 4.49539 10.4947C4.29993 10.6395 4.10448 10.7915 3.91989 10.9507C3.86922 10.9905 3.81854 11.0304 3.76787 11.0738C3.74615 11.0919 3.72806 11.11 3.71358 11.1281C1.43693 13.1441 0 16.0904 0 19.3696C0 24.3102 3.26476 28.5016 7.74929 29.8987C7.77463 29.9095 7.79634 29.9204 7.8253 29.9276C9.39615 30.3873 10.8946 30.6153 12.3967 30.6153C13.5332 30.6153 14.6697 30.485 15.8352 30.2244C15.8388 30.2244 15.8461 30.2208 15.8497 30.2208C21.0581 29.1024 24.9707 24.4622 24.9707 18.9244C24.9707 12.6555 19.9505 7.53757 13.7214 7.37469L13.725 7.37832ZM12.7333 23.5827C11.738 23.4379 10.815 22.9782 10.0911 22.2544C9.2007 21.364 8.71207 20.184 8.71207 18.9244C8.71207 17.2341 9.60608 15.7502 10.9489 14.9213C11.0539 14.9141 11.1625 14.9068 11.271 14.9068C13.7323 14.9068 15.7338 16.9084 15.7338 19.3696C15.7338 21.3169 14.4779 22.9746 12.7369 23.5827H12.7333Z" fill="black"/>
+<path d="M11.9405 3.93626C11.2347 3.31371 10.6447 3.13636 9.75796 2.86852C9.10284 2.66945 8.28846 2.42332 7.22433 1.91659C7.14832 1.8804 7.07231 1.8623 7.0144 1.8623C6.97459 1.8623 6.94201 1.86954 6.9203 1.88763C6.86238 1.93107 6.80447 2.06499 6.83705 2.30026C6.95649 3.20875 7.60438 5.79666 9.15713 6.83183C10.2502 7.56297 12.0418 7.50506 12.6897 7.36752C12.7151 7.36028 12.7295 7.34942 12.7368 7.33856C13.3449 6.34682 12.6861 4.62034 11.9405 3.93626Z" fill="#8BC95A"/>
+<path d="M13.4209 8.29395C7.55737 8.29395 2.79053 13.0644 2.79053 18.9243C2.79053 21.7656 3.89809 24.4332 5.90327 26.442C7.91208 28.4508 10.5796 29.5547 13.4209 29.5547C19.2845 29.5547 24.0513 24.7843 24.0513 18.9243C24.0513 13.0644 19.2808 8.29395 13.4209 8.29395ZM17.4023 22.9058C16.3382 23.9699 14.9266 24.5526 13.4209 24.5526C11.9188 24.5526 10.5036 23.9663 9.4395 22.9058C8.37537 21.8453 7.79264 20.43 7.79264 18.9243C7.79264 15.8224 10.319 13.2961 13.4209 13.2961C16.5228 13.2961 19.0492 15.8224 19.0492 18.9243C19.0492 20.4264 18.4628 21.8416 17.4023 22.9058Z" fill="#FFC120"/>
+</svg>

package/src/colors/colors.ts

@@ -0,0 +1,173 @@
+// NOTE(ej): This file is a manual copy of /styles/colors.scss
+// These files should be kept in sync.
+// NOTE(cshdllr): The navy colors are still here for backwards compatibility.
+
+export type HexColor = `#${string}`;
+export type RgbaColor = `rgba(${number}, ${number}, ${number}, ${number})`;
+
+/**
+ * CSS color value from the palette (hex or rgba). Use this type when a value
+ * may be either format, e.g. gray colors are rgba, others are hex.
+ */
+export type CssColor = HexColor | RgbaColor;
+
+const BLACK = '#000000';
+const GRAY_100 = 'rgba(0, 0, 0, 0.04)';
+const GRAY_200 = 'rgba(0, 0, 0, 0.1)';
+const GRAY_300 = 'rgba(0, 0, 0, 0.31)';
+const GRAY_400 = 'rgba(0, 0, 0, 0.48)';
+const GRAY_500 = 'rgba(0, 0, 0, 0.69)';
+const GREEN_500 = '#1f7400';
+const GOLD_500 = '#f47500';
+const RED_500 = '#cd000c';
+
+/**
+ * Maps a color name to its corresponding CSS color (hex or rgba).
+ * Gray neutrals use rgba for transparency; other colors use hex.
+ *
+ * NOTE: Please write hex codes in lowercase letters
+ */
+const Colors: Record<string, CssColor> = {
+  ACCENT_BLUE: '#5560cb',
+  ACCENT_BLUE_SHADE_1: '#404898',
+  ACCENT_BLUE_SHADE_2: '#2f3570',
+  ACCENT_GREEN: '#49a24c',
+  ACCENT_GREEN_SHADE_1: '#3a823d',
+  ACCENT_GREEN_SHADE_2: '#17551a',
+  ACCENT_ORANGE: '#ffa895',
+  ACCENT_ORANGE_SHADE_1: '#e15c1b',
+  ACCENT_ORANGE_SHADE_2: '#a9440b',
+  ACCENT_PINK: '#d75fae',
+  ACCENT_PINK_SHADE_1: '#7c3872',
+  ACCENT_PINK_SHADE_2: '#56204e',
+  ACCENT_RED_SHADE_1: '#981d31',
+  ACCENT_RED_SHADE_2: '#701323',
+  ALERT_RED: '#c34459',
+  BACKGROUND: GRAY_100,
+  BLACK,
+  GRAY_100,
+  // NOTE(slanden): the in-app browser cannot handle transparency in rgba colors,
+  // which get rendered as black, so we fall back to the hex color instead.
+  GRAY_100_HEX: '#f5f4f3',
+  GRAY_200,
+  GRAY_300,
+  GRAY_400,
+  GRAY_500,
+  NAVY: BLACK,
+  NAVY_TINT_1: GRAY_500,
+  NAVY_TINT_2: GRAY_400,
+  NAVY_TINT_3: GRAY_300,
+  NAVY_TINT_4: GRAY_200,
+  NAVY_TINT_5: GRAY_100,
+  NEUTRAL: GRAY_100,
+  NEUTRAL_SHADE: GRAY_200,
+  NEUTRAL_SHADE_2: '#707070',
+  ORANGE: '#ffa895',
+  ORANGE_TINT_1: '#fdcab7',
+  ORANGE_TINT_2: '#ffdbce',
+  PINK: '#f6a0d1',
+  PINK_TINT_1: '#fdc3e4',
+  PINK_TINT_2: '#ffdef1',
+  PROVIDERS_BLUE: '#a3b0f9',
+  PROVIDERS_BLUE_TINT_1: '#d1d7fc',
+  PROVIDERS_BLUE_TINT_2: '#e8ebfd',
+  PROVIDERS_GREEN: '#49a24c',
+  PROVIDERS_GREEN_TINT_1: '#b3f6a2',
+  PROVIDERS_GREEN_TINT_2: '#d1fac7',
+  TEXT_PRIMARY: BLACK,
+  TEXT_SECONDARY: GRAY_500,
+  TEXT_PLACEHOLDER: GRAY_400,
+  TEXT_DISABLED: GRAY_300,
+  WHITE: '#ffffff',
+  YELLOW: '#ffc200',
+  YELLOW_100: '#ffdc6b',
+  YELLOW_TINT_1: '#ffdc6b',
+  YELLOW_TINT_2: '#fee69a',
+  BLUE_100: '#e0edff',
+  BLUE_200: '#b2cffa',
+  BLUE_300: '#7a95f8',
+  BLUE_400: '#496ae0',
+  BLUE_500: '#1a43d7',
+  BORDER: GRAY_200,
+  BUTTON_BACKGROUND: BLACK,
+  GOLD_500,
+  GOLD_400: '#f99500',
+  GOLD_300: '#ffc120',
+  GOLD_200: '#fcde74',
+  GOLD_100: '#fff0ba',
+  GREEN_500,
+  GREEN_400: '#3fa41c',
+  GREEN_300: '#8bc95a',
+  GREEN_200: '#b8da96',
+  GREEN_100: '#dcf2cb',
+  PURPLE_500: '#6431d0',
+  PURPLE_400: '#804fe8',
+  PURPLE_300: '#ac8eff',
+  PURPLE_200: '#cdbcff',
+  PURPLE_100: '#ebe4ff',
+  RED_500,
+  RED_400: '#f52323',
+  RED_300: '#ff6969',
+  RED_200: '#ffaaa5',
+  RED_100: '#ffe5dd',
+  STATUS_SUCCESS: GREEN_500,
+  STATUS_WARNING: GOLD_500,
+  STATUS_ERROR: RED_500,
+};
+
+export default Colors;
+
+/**
+ * This is a type predicate that will allow TypeScript to know that the string tested is a
+ * HexColor within the scope of the narrowing.
+ */
+export function isHexColor(color?: string): color is HexColor {
+  if (!color) {
+    return false;
+  }
+
+  return /^#([0-9A-Fa-f]{3}){1,2}$/i.test(color);
+}
+
+export function isRgbaColor(color?: string): color is RgbaColor {
+  if (!color) {
+    return false;
+  }
+
+  // Alpha may be integer 0–255 or decimal 0–1 (e.g. 0.04, 0.69)
+  return /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*[\d.]+\s*\)$/i.test(color);
+}
+
+export function isCssColor(color?: string): color is CssColor {
+  return isHexColor(color) || isRgbaColor(color);
+}
+
+/**
+ * This is a type predicate that will allow TypeScript to know that the string tested is a
+ * key of the Colors object.
+ */
+export function isColorKey(color?: string): color is keyof typeof Colors {
+  if (!color) {
+    return false;
+  }
+
+  return Object.keys(Colors).includes(color);
+}
+
+/**
+ * Validates a string as either a hex color or a color key.
+ */
+export function isValidColor(value: string): boolean {
+  if (value === 'default') {
+    return true;
+  }
+
+  if (isHexColor(value)) {
+    return true;
+  }
+
+  // Normalize any strings to SCREAMING_CASE
+  const normalizedKey = value.toUpperCase().replace(/-/g, '_');
+
+  return isColorKey(normalizedKey);
+}

package/src/colors/theme.ts

@@ -1,20 +1,14 @@
-import type { VuetifyThemeVariant } from 'vuetify/types/services/theme';
+import Colors from '@propelinc/citrus-ui/src/colors/colors';
 
-import Colors from '@/styles/_colors.scss';
+type Theme = Record<string, string>;
 
-const VuetifyConfig = {
-  primary: Colors.ACCENT_BLUE,
-  secondary: Colors.ACCENT_GREEN,
-  info: Colors.PROVIDERS_BLUE,
-  success: Colors.ACCENT_BLUE,
-  warning: Colors.YELLOW,
-  error: Colors.ALERT_RED,
-} as Partial<VuetifyThemeVariant>;
-
-const CitrusTheme = Object.entries(Colors).reduce((theme, [colorName, hex]) => {
+const CitrusTheme = Object.entries(Colors).reduce<Theme>((theme, [colorName, hex]) => {
   const kebabCaseName = colorName.toLowerCase().replace(/_/g, '-');
   theme[kebabCaseName] = hex;
   return theme;
-}, {} as Partial<VuetifyThemeVariant>);
+}, {});
 
-export default { ...CitrusTheme, ...VuetifyConfig };
+// NOTE(mohan): Jest tests don't properly import scss files, leading to
+// undefined values. Clear them since we don't need these things to be defined
+// in unit tests anyways.
+export default process.env.NODE_ENV === 'test' ? {} : CitrusTheme;

package/src/colors/util-classes.ts

@@ -0,0 +1,49 @@
+import Colors from '@propelinc/citrus-ui/src/colors/colors';
+
+const ALIASES = {
+  ERROR: Colors.ALERT_RED,
+  PRIMARY: Colors.BLACK,
+  SECONDARY: Colors.TEXT_SECONDARY,
+  PLACEHOLDER: Colors.TEXT_PLACEHOLDER,
+  DISABLED: Colors.TEXT_DISABLED,
+};
+
+function generateColorUtils(): string {
+  let classes = '';
+
+  Object.entries({ ...Colors, ...ALIASES }).forEach(([colorName, colorValue]) => {
+    const kebabColorName = colorName.toLowerCase().replaceAll('_', '-');
+
+    classes += `
+      .${kebabColorName} {
+        background-color: ${colorValue} !important;
+        border-color: ${colorValue} !important;
+      }
+      .${kebabColorName}--text {
+        color: ${colorValue} !important;
+      }`;
+  });
+
+  return classes;
+}
+
+/**
+ * Generates utility classes for each Citrus color.
+ *
+ * For example, for blue-500 it creates:
+ * - `.blue-500` - sets background and border
+ * - `.blue-500--text` - sets text color
+ *
+ * This matches the syntax of Vuetify's utils:
+ * https://vuetifyjs.com/en/styles/colors/#classes
+ */
+export function addColorUtils(): void {
+  if (document.querySelector('[data-color-utils]')) {
+    return;
+  }
+
+  const styles = document.createElement('style');
+  styles.dataset.colorUtils = 'true';
+  styles.textContent = generateColorUtils();
+  document.head.appendChild(styles);
+}

package/src/componentResolver.js

@@ -0,0 +1,33 @@
+/**
+ * This function is intended to be used in an app's Vite config to resolve
+ * Citrus UI components. We export this so that apps don't need to know about changes
+ * to the internal structure of the Citrus UI library.
+ *
+ * NOTE(kyleshevlin): This is a JS file because our vite configs are JS files.
+ */
+
+const CITRUS_UI_COMPONENT_NAME_REGEX = /^C[A-Z]/;
+
+/**
+ * These components have irregular paths that cannot be handled with the regex match.
+ */
+const CITRUS_UI_COMPONENT_NAME_TO_IRREGULAR_PATH = {
+  CButton: '@propelinc/citrus-ui/src/components/CButton/CButton.vue',
+  CCloseButton: '@propelinc/citrus-ui/src/components/internal/CCloseButton.vue',
+};
+
+function citrusComponentResolver(componentName) {
+  if (CITRUS_UI_COMPONENT_NAME_TO_IRREGULAR_PATH[componentName]) {
+    return { from: CITRUS_UI_COMPONENT_NAME_TO_IRREGULAR_PATH[componentName] };
+  }
+
+  if (CITRUS_UI_COMPONENT_NAME_REGEX.test(componentName)) {
+    return { from: `@propelinc/citrus-ui/src/components/${componentName}.vue` };
+  }
+
+  if (componentName === 'FontAwesomeIcon') {
+    return { name: componentName, from: '@fortawesome/vue-fontawesome' };
+  }
+}
+
+module.exports = { citrusComponentResolver };

package/src/components/CAccordion.vue

@@ -1,14 +1,39 @@
 <template>
-  <v-expansion-panels :data-test="dataTest" accordion multiple flat>
+  <div ref="accordion" data-test="accordion">
     <slot />
-  </v-expansion-panels>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import type SlDetails from '@shoelace-style/shoelace/dist/components/details/details';
+import { defineComponent, nextTick, provide, ref, toRefs } from 'vue';
 
-@Component({ name: 'CAccordion' })
-export default class CAccordion extends Vue {
-  @Prop({ type: String, default: 'accordion' }) dataTest!: string;
-}
+import { FLUID, ON_TOGGLE } from '@propelinc/citrus-ui/src/services/injections/accordions';
+
+export default defineComponent({
+  name: 'CAccordion',
+  props: {
+    /** Removes horizontal padding for all items inside */
+    fluid: { type: Boolean, default: false },
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const { fluid } = toRefs(props);
+    provide(FLUID, fluid);
+
+    const accordion = ref<HTMLDivElement | null>(null);
+    provide(ON_TOGGLE, async () => {
+      await nextTick();
+      const accordionItems: SlDetails[] = Array.from(
+        accordion.value!.querySelectorAll('[data-accordion-item]')
+      );
+      const openItems = accordionItems.reduce<number[]>((acc, item, index) => {
+        return item.hasAttribute('open') ? [...acc, index] : acc;
+      }, []);
+      emit('change', openItems);
+    });
+
+    return { accordion };
+  },
+});
 </script>