sprintify-ui 0.0.151 → 0.0.152

package/dist/types/src/components/BaseBadge.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     contrast: 'low' | 'high';
-    color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
-    size: 'sm' | 'base' | 'lg';
+    color: string;
+    size?: "base" | "sm" | "lg" | undefined;
     icon?: string | undefined;
 }>, {
     contrast: string;
@@ -10,8 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     icon: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     contrast: 'low' | 'high';
-    color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
-    size: 'sm' | 'base' | 'lg';
+    color: string;
+    size?: "base" | "sm" | "lg" | undefined;
     icon?: string | undefined;
 }>, {
     contrast: string;
@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     icon: undefined;
 }>>>, {
-    color: 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | string;
+    color: string;
     icon: string;
     size: 'sm' | 'base' | 'lg';
     contrast: 'low' | 'high';

package/dist/types/src/components/BaseShortcut.vue.d.ts

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+        type: PropType<string>;
     };
     icon: {
         required: true;
@@ -48,7 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: {
         default: string;
-        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+        type: PropType<string>;
     };
     icon: {
         required: true;
@@ -59,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"high" | "low">;
     };
 }>>, {
-    color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+    color: string;
     description: string;
     contrast: "high" | "low";
     linkText: string;

package/dist/types/src/utils/colors.d.ts

@@ -0,0 +1,13 @@
+declare const colors: import("tailwindcss/types/generated/colors").DefaultColors;
+export { colors };
+interface ColorConfig {
+    backgroundColor: string;
+    textColor: string;
+    borderColor: string;
+}
+interface ColorPalette {
+    low: ColorConfig;
+    high: ColorConfig;
+}
+export declare const palette: Record<string, ColorPalette>;
+export declare function getColorConfig(color: string, contrast?: boolean): ColorConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.4",
+    "color2k": "^2.0.1",
     "storybook": "^6.5.15"
   },
   "devDependencies": {

package/src/components/BaseBadge.stories.js

@@ -1,18 +1,8 @@
 import BaseBadge from './BaseBadge.vue';
 
-const colors = [
-  'gray',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'indigo',
-  'purple',
-  'pink',
-  '#ff0000',
-  '#dbeafe',
-];
+import { palette } from '@/utils/colors';
+
+const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
 const sizes = ['sm', 'base', 'lg'];
 

package/src/components/BaseBadge.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     class="inline-flex items-center rounded-full font-medium"
-    :class="[colorClasses, sizeClasses]"
+    :class="[sizeClasses]"
     :style="colorStyle"
   >
     <BaseIcon v-if="icon" :icon="icon" :class="iconSizeClasses"> </BaseIcon>
@@ -10,23 +10,14 @@
 </template>
 
 <script lang="ts" setup>
+import { getColorConfig } from '@/utils/colors';
 import { BaseIcon } from '.';
 
 const props = withDefaults(
   defineProps<{
     contrast: 'low' | 'high';
-    color:
-      | 'gray'
-      | 'red'
-      | 'orange'
-      | 'yellow'
-      | 'green'
-      | 'blue'
-      | 'indigo'
-      | 'purple'
-      | 'pink'
-      | string;
-    size: 'sm' | 'base' | 'lg';
+    color: string;
+    size?: 'sm' | 'base' | 'lg';
     icon?: string;
   }>(),
   {
@@ -37,84 +28,13 @@ const props = withDefaults(
   }
 );
 
-const colorClasses = computed(() => {
-  if (props.color == 'gray') {
-    if (props.contrast == 'high') {
-      return 'bg-slate-600 text-white';
-    }
-    return 'bg-slate-100 text-slate-800';
-  }
-  if (props.color == 'red') {
-    if (props.contrast == 'high') {
-      return 'bg-red-600 text-white';
-    }
-    return 'bg-red-100 text-red-900';
-  }
-  if (props.color == 'orange') {
-    if (props.contrast == 'high') {
-      return 'bg-orange-500 text-white';
-    }
-    return 'bg-orange-100 text-yellow-900';
-  }
-  if (props.color == 'yellow') {
-    if (props.contrast == 'high') {
-      return 'bg-yellow-500 text-white';
-    }
-    return 'bg-yellow-100 text-yellow-900';
-  }
-  if (props.color == 'green') {
-    if (props.contrast == 'high') {
-      return 'bg-green-600 text-white';
-    }
-    return 'bg-green-100 text-green-900';
-  }
-  if (props.color == 'blue') {
-    if (props.contrast == 'high') {
-      return 'bg-blue-600 text-white';
-    }
-    return 'bg-blue-100 text-blue-900';
-  }
-  if (props.color == 'indigo') {
-    if (props.contrast == 'high') {
-      return 'bg-indigo-600 text-white';
-    }
-    return 'bg-indigo-100 text-indigo-900';
-  }
-  if (props.color == 'purple') {
-    if (props.contrast == 'high') {
-      return 'bg-purple-600 text-white';
-    }
-    return 'bg-purple-100 text-purple-900';
-  }
-  if (props.color == 'pink') {
-    if (props.contrast == 'high') {
-      return 'bg-pink-600 text-white';
-    }
-    return 'bg-pink-100 text-pink-900';
-  }
-  if (!props.color) {
-    return 'bg-slate-100 text-slate-900';
-  }
-  return '';
-});
-
 const colorStyle = computed((): Record<string, string> => {
-  if (
-    props.color &&
-    (props.color.startsWith('#') || props.color.startsWith('rgb'))
-  ) {
-    let textColor = 'white';
-
-    if (props.contrast == 'low') {
-      textColor = 'rgba(0,0,0,0.8)';
-    }
+  const config = getColorConfig(props.color, props.contrast == 'high');
 
-    return {
-      backgroundColor: props.color,
-      color: textColor,
-    };
-  }
-  return {};
+  return {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+  };
 });
 
 const sizeClasses = computed(() => {

package/src/components/BaseColor.stories.js

@@ -1,14 +1,10 @@
-import { createFieldStory, colors } from '../../.storybook/utils';
+import { createFieldStory } from '../../.storybook/utils';
 import BaseColor from './BaseColor.vue';
 import ShowValue from '../../.storybook/components/ShowValue.vue';
 
 export default {
   title: 'Form/BaseColor',
   component: BaseColor,
-  argTypes: {},
-  args: {
-    colors: colors,
-  },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 

package/src/components/BaseColor.vue

@@ -17,10 +17,17 @@
       <template #option="option">
         <div
           :style="{ backgroundColor: option.option.value + '' }"
-          class="rounded-md border-none p-3"
+          class="box-border rounded-md border p-3"
           :class="[
-            option.selected.value ? 'text-white' : 'text-transparent',
+            option.selected.value
+              ? option.option.option.hasLowContrast
+                ? 'text-slate-700'
+                : 'text-white'
+              : 'text-transparent',
             disabled ? ' cursor-not-allowed opacity-50' : '',
+            option.option.option.hasLowContrast
+              ? 'border-slate-400'
+              : 'border-transparent',
           ]"
         >
           <BaseIcon icon="heroicons-solid:check-circle" class="h-5 w-5" />
@@ -36,6 +43,8 @@ import { BaseButtonGroup } from '.';
 import { isArray } from 'lodash';
 import { useField } from '@/composables/field';
 import { Option } from '@/types';
+import { palette } from '@/utils/colors';
+import { getContrast } from 'color2k';
 
 const props = defineProps({
   modelValue: {
@@ -59,19 +68,7 @@ const props = defineProps({
   colors: {
     type: [Array] as PropType<string[]>,
     default() {
-      return [
-        '#0f172a',
-        '#dc2626',
-        '#ea580c',
-        '#eab308',
-        '#16a34a',
-        '#0d9488',
-        '#0891b2',
-        '#2563eb',
-        '#4f46e5',
-        '#9333ea',
-        '#db2777',
-      ];
+      return Object.values(palette).map((p) => p.high.backgroundColor);
     },
   },
   multiple: {
@@ -95,10 +92,15 @@ const colorOptions = computed(() => {
     return {
       label: c,
       value: c,
+      hasLowContrast: hasLowContrast(c),
     };
   });
 });
 
+function hasLowContrast(color: string): boolean {
+  return getContrast(color, '#fff') < 1.38;
+}
+
 const normalizeModelValue = computed(() => {
   return isArray(props.modelValue)
     ? props.modelValue?.map((m) => {

package/src/components/BaseShortcut.stories.js

@@ -1,16 +1,7 @@
 import BaseShortcut from './BaseShortcut.vue';
+import { palette } from '@/utils/colors';
 
-const colors = [
-  'gray',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'indigo',
-  'purple',
-  'pink',
-];
+const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
 const sizes = ['base', 'lg'];
 

package/src/components/BaseShortcut.vue

@@ -5,7 +5,7 @@
         <!-- Icon -->
         <div
           class="mb-2.5 inline-flex items-center rounded p-2"
-          :class="[colorClasses]"
+          :style="colorStyle"
         >
           <BaseIcon
             v-if="icon"
@@ -47,6 +47,7 @@ import { PropType } from 'vue';
 import { BaseIcon } from '.';
 import BaseCard from './BaseCard.vue';
 import { RouteLocationRaw } from 'vue-router';
+import { getColorConfig } from '@/utils/colors';
 
 const props = defineProps({
   to: {
@@ -67,17 +68,7 @@ const props = defineProps({
   },
   color: {
     default: 'gray',
-    type: String as PropType<
-      | 'gray'
-      | 'red'
-      | 'orange'
-      | 'yellow'
-      | 'green'
-      | 'blue'
-      | 'indigo'
-      | 'purple'
-      | 'pink'
-    >,
+    type: String as PropType<string>,
   },
   icon: {
     required: true,
@@ -89,62 +80,14 @@ const props = defineProps({
   },
 });
 
-const colorClasses = computed(() => {
-  if (props.color == 'gray') {
-    if (props.contrast == 'high') {
-      return 'bg-slate-600 text-white';
-    }
-    return 'bg-slate-100 text-slate-800 border border-slate-300';
-  }
-  if (props.color == 'red') {
-    if (props.contrast == 'high') {
-      return 'bg-red-600 text-white';
-    }
-    return 'bg-red-100 text-red-700 border border-red-300';
-  }
-  if (props.color == 'orange') {
-    if (props.contrast == 'high') {
-      return 'bg-orange-500 text-white';
-    }
-    return 'bg-orange-100 text-yellow-700 border border-orange-300';
-  }
-  if (props.color == 'yellow') {
-    if (props.contrast == 'high') {
-      return 'bg-yellow-500 text-white';
-    }
-    return 'bg-yellow-100 text-yellow-700 border border-yellow-300';
-  }
-  if (props.color == 'green') {
-    if (props.contrast == 'high') {
-      return 'bg-green-600 text-white';
-    }
-    return 'bg-green-100 text-green-700 border border-green-300';
-  }
-  if (props.color == 'blue') {
-    if (props.contrast == 'high') {
-      return 'bg-blue-600 text-white';
-    }
-    return 'bg-blue-100 text-blue-700 border border-blue-300';
-  }
-  if (props.color == 'indigo') {
-    if (props.contrast == 'high') {
-      return 'bg-indigo-600 text-white';
-    }
-    return 'bg-indigo-100 text-indigo-700 border border-indigo-300';
-  }
-  if (props.color == 'purple') {
-    if (props.contrast == 'high') {
-      return 'bg-purple-600 text-white';
-    }
-    return 'bg-purple-100 text-purple-700 border border-purple-300';
-  }
-  if (props.color == 'pink') {
-    if (props.contrast == 'high') {
-      return 'bg-pink-600 text-white';
-    }
-    return 'bg-pink-100 text-pink-700 border border-pink-300';
-  }
-  return 'bg-slate-100 text-slate-700 border border-slate-300';
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.color, props.contrast == 'high');
+
+  return {
+    backgroundColor: config.backgroundColor,
+    border: `1px solid ${config.borderColor}`,
+    color: config.textColor,
+  };
 });
 
 const iconSizeClasses = computed(() => {

package/src/utils/colors.ts

@@ -0,0 +1,200 @@
+import { darken, getContrast } from 'color2k';
+import defaultColors from 'tailwindcss/colors';
+
+const colors = defaultColors;
+
+export { colors };
+
+interface ColorConfig {
+  backgroundColor: string;
+  textColor: string;
+  borderColor: string;
+}
+
+interface ColorPalette {
+  low: ColorConfig;
+  high: ColorConfig;
+}
+
+export const palette: Record<string, ColorPalette> = {
+  black: {
+    low: {
+      backgroundColor: colors.slate[200],
+      textColor: colors.slate[900],
+      borderColor: 'transparent',
+    },
+    high: {
+      backgroundColor: colors.black,
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  gray: {
+    low: {
+      backgroundColor: colors.slate[100],
+      textColor: colors.slate[800],
+      borderColor: colors.slate[300],
+    },
+    high: {
+      backgroundColor: colors.slate[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  red: {
+    low: {
+      backgroundColor: colors.red[100],
+      textColor: colors.red[700],
+      borderColor: colors.red[300],
+    },
+    high: {
+      backgroundColor: colors.red[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  orange: {
+    low: {
+      backgroundColor: colors.orange[100],
+      textColor: colors.orange[700],
+      borderColor: colors.orange[300],
+    },
+    high: {
+      backgroundColor: colors.orange[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  yellow: {
+    low: {
+      backgroundColor: colors.yellow[100],
+      textColor: colors.yellow[700],
+      borderColor: colors.yellow[300],
+    },
+    high: {
+      backgroundColor: colors.yellow[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  green: {
+    low: {
+      backgroundColor: colors.green[100],
+      textColor: colors.green[700],
+      borderColor: colors.green[300],
+    },
+    high: {
+      backgroundColor: colors.green[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  teal: {
+    low: {
+      backgroundColor: colors.teal[100],
+      textColor: colors.teal[700],
+      borderColor: colors.teal[300],
+    },
+    high: {
+      backgroundColor: colors.teal[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  cyan: {
+    low: {
+      backgroundColor: colors.cyan[100],
+      textColor: colors.cyan[700],
+      borderColor: colors.cyan[300],
+    },
+    high: {
+      backgroundColor: colors.cyan[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  blue: {
+    low: {
+      backgroundColor: colors.blue[100],
+      textColor: colors.blue[700],
+      borderColor: colors.blue[300],
+    },
+    high: {
+      backgroundColor: colors.blue[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  indigo: {
+    low: {
+      backgroundColor: colors.indigo[100],
+      textColor: colors.indigo[700],
+      borderColor: colors.indigo[300],
+    },
+    high: {
+      backgroundColor: colors.indigo[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  purple: {
+    low: {
+      backgroundColor: colors.purple[100],
+      textColor: colors.purple[700],
+      borderColor: colors.purple[300],
+    },
+    high: {
+      backgroundColor: colors.purple[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  pink: {
+    low: {
+      backgroundColor: colors.pink[100],
+      textColor: colors.pink[700],
+      borderColor: colors.pink[300],
+    },
+    high: {
+      backgroundColor: colors.pink[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  white: {
+    low: {
+      backgroundColor: colors.white,
+      textColor: colors.slate[600],
+      borderColor: 'transparent',
+    },
+    high: {
+      backgroundColor: colors.white,
+      textColor: colors.black,
+      borderColor: 'transparent',
+    },
+  },
+};
+
+export function getColorConfig(color: string, contrast = false): ColorConfig {
+  const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
+
+  if (colorConfig) {
+    return colorConfig;
+  }
+
+  const c = getContrast(color, 'white');
+
+  let borderColor = 'transparent';
+  let textColor = 'white';
+
+  if (c < 2) {
+    textColor = darken(color, 0.5);
+    borderColor = darken(color, 0.1);
+  }
+
+  return {
+    backgroundColor: color,
+    textColor: textColor,
+    borderColor: borderColor,
+  };
+}