@dcodegroup-au/dsg-vue 1.0.3-next → 1.0.4-next

package/dist/styles/app.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+@import "./font-family.css";
+@import "./colors.css";
+@import "./typography.css";
+@import "./focus-rings.css";

package/dist/styles/colors.css

@@ -0,0 +1,451 @@
+@theme {
+  /*
+   * Primary Palette 
+   */
+  
+  /* Brand/Primary Colours */
+  --color-brand-25: #f0f9f8;
+  --color-brand-50: #def2ef;
+  --color-brand-100: #cfece7;
+  --color-brand-200: #a7ddd3;
+  --color-brand-300: #7ecdbe;
+  --color-brand-400: #04b594;
+  --color-brand-500: #04a385;
+  --color-brand-600: #037f68;
+  --color-brand-700: #026d59;
+  --color-brand-800: #025b4a;
+  --color-brand-900: #02483b;
+  --color-brand-950: #01362c;
+  --color-primary-25: var(--color-brand-25);
+  --color-primary-50: var(--color-brand-50);
+  --color-primary-100: var(--color-brand-100);
+  --color-primary-200: var(--color-brand-200);
+  --color-primary-300: var(--color-brand-300);
+  --color-primary-400: var(--color-brand-400);
+  --color-primary-500: var(--color-brand-500);
+  --color-primary-600: var(--color-brand-600);
+  --color-primary-700: var(--color-brand-700);
+  --color-primary-800: var(--color-brand-800);
+  --color-primary-900: var(--color-brand-900);
+  --color-primary-950: var(--color-brand-950);
+
+  /* Gray */
+  --color-gray-25: #fcfcfd;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f2f4f7;
+  --color-gray-200: #eaecf0;
+  --color-gray-300: #d0d5dd;
+  --color-gray-400: #98a2b3;
+  --color-gray-500: #667085;
+  --color-gray-600: #475467;
+  --color-gray-700: #344054;
+  --color-gray-800: #182230;
+  --color-gray-900: #101828;
+  --color-gray-950: #0c111d;
+
+  /* Success */
+  --color-success-25: #f6fef9;
+  --color-success-50: #ecfdf3;
+  --color-success-100: #dcfae6;
+  --color-success-200: #a9efc5;
+  --color-success-300: #75e0a7;
+  --color-success-400: #47cd89;
+  --color-success-500: #17b26a;
+  --color-success-600: #079455;
+  --color-success-700: #067647;
+  --color-success-800: #085d3a;
+  --color-success-900: #074d31;
+  --color-success-950: #053321;
+
+  /* Warning */
+  --color-warning-25: #fffcf5;
+  --color-warning-50: #fffaeb;
+  --color-warning-100: #fef0c7;
+  --color-warning-200: #fedf89;
+  --color-warning-300: #fec84b;
+  --color-warning-400: #fdb022;
+  --color-warning-500: #f79009;
+  --color-warning-600: #dc6803;
+  --color-warning-700: #b54708;
+  --color-warning-800: #93370d;
+  --color-warning-900: #7a2e0e;
+  --color-warning-950: #4e1d09;
+
+  /* Error */
+  --color-error-25: #fffbfa;
+  --color-error-50: #fef3f2;
+  --color-error-100: #fee4e2;
+  --color-error-200: #fecdca;
+  --color-error-300: #fda29b;
+  --color-error-400: #f97066;
+  --color-error-500: #f04438;
+  --color-error-600: #d92d20;
+  --color-error-700: #b42318;
+  --color-error-800: #912018;
+  --color-error-900: #7a271a;
+  --color-error-950: #55160c;
+  
+  /*
+   * Secondary Palette
+   */
+
+  /* Gray Blue */
+  --color-gray-blue-25: #fcfcfd;
+  --color-gray-blue-50: #f8f9fc;
+  --color-gray-blue-100: #eaecf5;
+  --color-gray-blue-200: #d5d9eb;
+  --color-gray-blue-300: #b3b8db;
+  --color-gray-blue-400: #717bbc;
+  --color-gray-blue-500: #4e5ba6;
+  --color-gray-blue-600: #3e4784;
+  --color-gray-blue-700: #363f72;
+  --color-gray-blue-800: #293056;
+  --color-gray-blue-900: #101323;
+  --color-gray-blue-950: #0d0f1c;
+
+  /* Gray Cool */
+  --color-gray-cool-25: #fcfcfd;
+  --color-gray-cool-50: #f9f9fb;
+  --color-gray-cool-100: #eff1f5;
+  --color-gray-cool-200: #dcdfea;
+  --color-gray-cool-300: #b9c0d4;
+  --color-gray-cool-400: #7d89b0;
+  --color-gray-cool-500: #5d6b98;
+  --color-gray-cool-600: #4a5578;
+  --color-gray-cool-700: #404968;
+  --color-gray-cool-800: #30374f;
+  --color-gray-cool-900: #111322;
+  --color-gray-cool-950: #0e101b;
+
+  /* Gray Modern */
+  --color-gray-modern-25: #fcfcfd;
+  --color-gray-modern-50: #f8fafc;
+  --color-gray-modern-100: #eef2f6;
+  --color-gray-modern-200: #e3e8ef;
+  --color-gray-modern-300: #cdd5df;
+  --color-gray-modern-400: #9aa4b2;
+  --color-gray-modern-500: #697586;
+  --color-gray-modern-600: #4b5565;
+  --color-gray-modern-700: #364152;
+  --color-gray-modern-800: #202939;
+  --color-gray-modern-900: #121926;
+  --color-gray-modern-950: #0d121c;
+
+  /* Gray Neutral */
+  --color-gray-neutral-25: #fcfcfd;
+  --color-gray-neutral-50: #f9fafb;
+  --color-gray-neutral-100: #f3f4f6;
+  --color-gray-neutral-200: #e5e7eb;
+  --color-gray-neutral-300: #d2d6db;
+  --color-gray-neutral-400: #9da4ae;
+  --color-gray-neutral-500: #6c737f;
+  --color-gray-neutral-600: #4d5761;
+  --color-gray-neutral-700: #384250;
+  --color-gray-neutral-800: #1f2a37;
+  --color-gray-neutral-900: #111927;
+  --color-gray-neutral-950: #0d121c;
+
+  /* Gray Iron */
+  --color-gray-iron-25: #fcfcfc;
+  --color-gray-iron-50: #fafafa;
+  --color-gray-iron-100: #f4f4f5;
+  --color-gray-iron-200: #e4e4e7;
+  --color-gray-iron-300: #d1d1d6;
+  --color-gray-iron-400: #a0a0ab;
+  --color-gray-iron-500: #70707b;
+  --color-gray-iron-600: #51525c;
+  --color-gray-iron-700: #3f3f46;
+  --color-gray-iron-800: #26272b;
+  --color-gray-iron-900: #18181b;
+  --color-gray-iron-950: #131316;
+
+  /* Gray True */
+  --color-gray-true-25: #fcfcfc;
+  --color-gray-true-50: #fafafa;
+  --color-gray-true-100: #f5f5f5;
+  --color-gray-true-200: #e5e5e5;
+  --color-gray-true-300: #d6d6d6;
+  --color-gray-true-400: #a3a3a3;
+  --color-gray-true-500: #737373;
+  --color-gray-true-600: #525252;
+  --color-gray-true-700: #424242;
+  --color-gray-true-800: #292929;
+  --color-gray-true-900: #141414;
+  --color-gray-true-950: #0f0f0f;
+
+  /* Gray Warm */
+  --color-gray-warm-25: #fdfdfc;
+  --color-gray-warm-50: #fafaf9;
+  --color-gray-warm-100: #f5f5f4;
+  --color-gray-warm-200: #e7e5e4;
+  --color-gray-warm-300: #d7d3d0;
+  --color-gray-warm-400: #a9a29d;
+  --color-gray-warm-500: #79716b;
+  --color-gray-warm-600: #57534e;
+  --color-gray-warm-700: #44403c;
+  --color-gray-warm-800: #292524;
+  --color-gray-warm-900: #1c1917;
+  --color-gray-warm-950: #171412;
+
+  /* Moss */
+  --color-moss-25: #fafdf7;
+  --color-moss-50: #f5fbee;
+  --color-moss-100: #e6f4d7;
+  --color-moss-200: #ceeab0;
+  --color-moss-300: #acdc79;
+  --color-moss-400: #86cb3c;
+  --color-moss-500: #669f2a;
+  --color-moss-600: #4f7a21;
+  --color-moss-700: #3f621a;
+  --color-moss-800: #335015;
+  --color-moss-900: #2b4212;
+  --color-moss-950: #1a280b;
+
+  /* Green Light */
+  --color-green-light-25: #fafef5;
+  --color-green-light-50: #f3fee7;
+  --color-green-light-100: #e3fbcc;
+  --color-green-light-200: #d0f8ab;
+  --color-green-light-300: #a6ef67;
+  --color-green-light-400: #85e13a;
+  --color-green-light-500: #66c61c;
+  --color-green-light-600: #4ca30d;
+  --color-green-light-700: #3b7c0f;
+  --color-green-light-800: #326212;
+  --color-green-light-900: #2b5314;
+  --color-green-light-950: #15290a;
+
+  /* Green */
+  --color-green-25: #f6fef9;
+  --color-green-50: #edfcf2;
+  --color-green-100: #d3f8df;
+  --color-green-200: #aaf0c4;
+  --color-green-300: #73e2a3;
+  --color-green-400: #3ccb7f;
+  --color-green-500: #16b364;
+  --color-green-600: #099250;
+  --color-green-700: #087443;
+  --color-green-800: #095c37;
+  --color-green-900: #084c2e;
+  --color-green-950: #052e1c;
+
+  /* Teal */
+  --color-teal-25: #f6fefc;
+  --color-teal-50: #f0fdf9;
+  --color-teal-100: #ccfbef;
+  --color-teal-200: #99f6e0;
+  --color-teal-300: #5fe9d0;
+  --color-teal-400: #2ed3b7;
+  --color-teal-500: #15b79e;
+  --color-teal-600: #0e9384;
+  --color-teal-700: #107569;
+  --color-teal-800: #125d56;
+  --color-teal-900: #134e48;
+  --color-teal-950: #0a2926;
+
+  /* Cyan */
+  --color-cyan-25: #f5feff;
+  --color-cyan-50: #ecfdff;
+  --color-cyan-100: #cff9fe;
+  --color-cyan-200: #a5f0fc;
+  --color-cyan-300: #67e3f9;
+  --color-cyan-400: #22ccee;
+  --color-cyan-500: #06aed4;
+  --color-cyan-600: #088ab2;
+  --color-cyan-700: #0e7090;
+  --color-cyan-800: #155b75;
+  --color-cyan-900: #164c63;
+  --color-cyan-950: #0d2d3a;
+
+  /* Blue Light */
+  --color-blue-light-25: #f5fbff;
+  --color-blue-light-50: #f0f9ff;
+  --color-blue-light-100: #e0f2fe;
+  --color-blue-light-200: #b9e6fe;
+  --color-blue-light-300: #7cd4fd;
+  --color-blue-light-400: #36bffa;
+  --color-blue-light-500: #0ba5ec;
+  --color-blue-light-600: #0086c9;
+  --color-blue-light-700: #026aa2;
+  --color-blue-light-800: #065986;
+  --color-blue-light-900: #0b4a6f;
+  --color-blue-light-950: #062c41;
+
+  /* Blue */
+  --color-blue-25: #f5faff;
+  --color-blue-50: #eff8ff;
+  --color-blue-100: #d1e9ff;
+  --color-blue-200: #b2ddff;
+  --color-blue-300: #84caff;
+  --color-blue-400: #53b1fd;
+  --color-blue-500: #2e90fa;
+  --color-blue-600: #1570ef;
+  --color-blue-700: #175cd3;
+  --color-blue-800: #1849a9;
+  --color-blue-900: #194185;
+  --color-blue-950: #102a56;
+
+  /* Blue Dark */
+  --color-blue-dark-25: #f5f8ff;
+  --color-blue-dark-50: #eff4ff;
+  --color-blue-dark-100: #d1e0ff;
+  --color-blue-dark-200: #b2ccff;
+  --color-blue-dark-300: #84adff;
+  --color-blue-dark-400: #528bff;
+  --color-blue-dark-500: #2970ff;
+  --color-blue-dark-600: #155eef;
+  --color-blue-dark-700: #004eeb;
+  --color-blue-dark-800: #0040c1;
+  --color-blue-dark-900: #00359e;
+  --color-blue-dark-950: #002266;
+
+  /* Indigo */
+  --color-indigo-25: #f5f8ff;
+  --color-indigo-50: #eef4ff;
+  --color-indigo-100: #e0eaff;
+  --color-indigo-200: #c7d7fe;
+  --color-indigo-300: #a4bcfd;
+  --color-indigo-400: #8098f9;
+  --color-indigo-500: #6172f3;
+  --color-indigo-600: #444ce7;
+  --color-indigo-700: #3538cd;
+  --color-indigo-800: #2d31a6;
+  --color-indigo-900: #2d3282;
+  --color-indigo-950: #1f235b;
+
+  /* Violet */
+  --color-violet-25: #fbfaff;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ece9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c3b5fd;
+  --color-violet-400: #a48afb;
+  --color-violet-500: #875bf7;
+  --color-violet-600: #7839ee;
+  --color-violet-700: #6927da;
+  --color-violet-800: #5720b7;
+  --color-violet-900: #491c96;
+  --color-violet-950: #2e125e;
+
+  /* Purple */
+  --color-purple-25: #fafaff;
+  --color-purple-50: #f4f3ff;
+  --color-purple-100: #ebe9fe;
+  --color-purple-200: #d9d6fe;
+  --color-purple-300: #bdb4fe;
+  --color-purple-400: #9b8afb;
+  --color-purple-500: #7a5af8;
+  --color-purple-600: #6938ef;
+  --color-purple-700: #5925dc;
+  --color-purple-800: #4a1fb8;
+  --color-purple-900: #3e1c96;
+  --color-purple-950: #27115f;
+
+  /* Fuchsia */
+  --color-fuchsia-25: #fefaff;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fbe8ff;
+  --color-fuchsia-200: #f6d0fe;
+  --color-fuchsia-300: #eeaafd;
+  --color-fuchsia-400: #e478fa;
+  --color-fuchsia-500: #d444f1;
+  --color-fuchsia-600: #ba24d5;
+  --color-fuchsia-700: #9f1ab1;
+  --color-fuchsia-800: #821890;
+  --color-fuchsia-900: #6f1877;
+  --color-fuchsia-950: #47104c;
+
+  /* Pink */
+  --color-pink-25: #fef6fb;
+  --color-pink-50: #fdf2fa;
+  --color-pink-100: #fce7f6;
+  --color-pink-200: #fcceee;
+  --color-pink-300: #faa7e0;
+  --color-pink-400: #f670c7;
+  --color-pink-500: #ee46bc;
+  --color-pink-600: #dd2590;
+  --color-pink-700: #c11574;
+  --color-pink-800: #9e165f;
+  --color-pink-900: #851651;
+  --color-pink-950: #4e0d30;
+
+  /* Rose */
+  --color-rose-25: #fff5f6;
+  --color-rose-50: #fff1f3;
+  --color-rose-100: #ffe4e8;
+  --color-rose-200: #fecdd6;
+  --color-rose-300: #fea3b4;
+  --color-rose-400: #fd6f8e;
+  --color-rose-500: #f63d68;
+  --color-rose-600: #e31b54;
+  --color-rose-700: #c01048;
+  --color-rose-800: #a11043;
+  --color-rose-900: #89123e;
+  --color-rose-950: #510b24;
+
+  /* Orange Dark */
+  --color-orange-dark-25: #fff9f5;
+  --color-orange-dark-50: #fff4ed;
+  --color-orange-dark-100: #ffe6d5;
+  --color-orange-dark-200: #ffd6ae;
+  --color-orange-dark-300: #ff9c66;
+  --color-orange-dark-400: #ff692e;
+  --color-orange-dark-500: #ff4405;
+  --color-orange-dark-600: #e62e05;
+  --color-orange-dark-700: #bc1b06;
+  --color-orange-dark-800: #97180c;
+  --color-orange-dark-900: #771a0d;
+  --color-orange-dark-950: #57130a;
+
+  /* Orange */
+  --color-orange-25: #fefaf5;
+  --color-orange-50: #fef6ee;
+  --color-orange-100: #fdead7;
+  --color-orange-200: #f9dbaf;
+  --color-orange-300: #f7b27a;
+  --color-orange-400: #f38744;
+  --color-orange-500: #ef6820;
+  --color-orange-600: #e04f16;
+  --color-orange-700: #b93815;
+  --color-orange-800: #932f19;
+  --color-orange-900: #772917;
+  --color-orange-950: #511c10;
+
+  /* Yellow */
+  --color-yellow-25: #fefdf0;
+  --color-yellow-50: #fefbe8;
+  --color-yellow-100: #fef7c3;
+  --color-yellow-200: #feee95;
+  --color-yellow-300: #fde272;
+  --color-yellow-400: #fac515;
+  --color-yellow-500: #eaaa08;
+  --color-yellow-600: #ca8504;
+  --color-yellow-700: #a15c07;
+  --color-yellow-800: #854a0e;
+  --color-yellow-900: #713b12;
+  --color-yellow-950: #542c0d;
+  
+  /*
+   * Text/Headings
+   */
+  --color-body: var(--color-gray-700);
+  --color-headings: var(--color-gray-700);
+
+  /* Info */
+  --color-info-25: #fcfcfd;
+  --color-info-50: #f8f9fc;
+  --color-info-100: #eaecf5;
+  --color-info-200: #d5d9eb;
+  --color-info-300: #b3b8db;
+  --color-info-400: #717bbc;
+  --color-info-500: #4e5ba6;
+  --color-info-600: #3e4784;
+  --color-info-700: #363f72;
+  --color-info-800: #293056;
+  --color-info-900: #101323;
+  --color-info-950: #0d0f1c;
+
+  /* Base Colors */
+  --color-white: #ffffff;
+  --color-black: #000000;
+}

package/dist/styles/focus-rings.css

@@ -0,0 +1,39 @@
+@utility ring-brand {
+  box-shadow: 0 0 0 4px color-mix(in srgb, theme(color.brand.500) 24%, transparent);
+}
+
+@utility ring-gray {
+  box-shadow: 0 0 0 4px color-mix(in srgb, theme(color.gray.400) 14%, transparent);
+}
+
+@utility ring-gray-secondary {
+  box-shadow: 0 0 0 4px color-mix(in srgb, theme(color.gray.400) 20%, transparent);
+}
+
+@utility ring-error {
+  box-shadow: 0 0 0 4px color-mix(in srgb, theme(color.error.500) 24%, transparent);
+}
+
+@utility ring-brand-shadow-xs {
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px color-mix(in srgb, theme(color.brand.500) 24%, transparent);
+}
+
+@utility ring-brand-shadow-sm {
+  box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 0 0 4px color-mix(in srgb, theme(color.brand.500) 24%, transparent);
+}
+
+@utility ring-gray-shadow-xs {
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px color-mix(in srgb, theme(color.gray.400) 14%, transparent);
+}
+
+@utility ring-gray-shadow-sm {
+  box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 0 0 4px color-mix(in srgb, theme(color.gray.400) 14%, transparent);
+}
+
+@utility ring-error-shadow-xs {
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px color-mix(in srgb, theme(color.error.500) 24%, transparent);
+}
+
+@utility ring-error-shadow-sm {
+  box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 0 0 4px color-mix(in srgb, theme(color.error.500) 24%, transparent);
+}

package/dist/styles/font-family.css

@@ -0,0 +1,4 @@
+@theme {
+  --font-brand: 'Inter', 'Source Sans Pro', 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
+  --font-inter: 'Inter', 'Source Sans Pro', 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
+}

package/dist/styles/typography.css

@@ -0,0 +1,118 @@
+@theme {
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.125rem;
+
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+
+  --text-md: 1rem;
+  --text-md--line-height: 1.5rem;
+
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+
+  --text-xl: 1.125rem;
+  --text-xl--line-height: 1.75rem;
+
+
+  /* --- Headings --- */
+  --text-heading-2xl: 4.5rem;
+  --text-heading-2xl--line-height: 5.625rem;
+  --text-heading-2xl--letter-spacing: -0.09rem;
+
+  
+  --text-heading-xl: 3.75rem;
+  --text-heading-xl--line-height: 4.5rem;
+  --text-heading-xl--letter-spacing: -0.075rem;
+
+  --text-heading-lg: 3rem;
+  --text-heading-lg--line-height: 3.75rem;
+  --text-heading-lg--letter-spacing: -0.06rem;
+
+  --text-heading-md: 2.25rem;
+  --text-heading-md--line-height: 2.75rem;
+  --text-heading-md--letter-spacing: -0.045rem;
+
+  --text-heading-sm: 1.875rem;
+  --text-heading-sm--line-height: 2.375rem;
+
+  --text-heading-xs: 1.5rem;
+  --text-heading-xs--line-height: 2rem;
+}
+
+.display-2xl,
+.h1,
+.heading-1 {
+  font-size: var(--text-heading-2xl);
+  line-height: var(--text-heading-2xl--line-height);
+  letter-spacing: var(--text-heading-2xl--letter-spacing);
+}
+
+.display-xl,
+.h2,
+.heading-2 {
+  font-size: var(--text-heading-xl);
+  line-height: var(--text-heading-xl--line-height);
+  letter-spacing: var(--text-heading-xl--letter-spacing);
+}
+
+.display-lg,
+.h3,
+.heading-3 {
+  font-size: var(--text-heading-lg);
+  line-height: var(--text-heading-lg--line-height);
+  letter-spacing: var(--text-heading-lg--letter-spacing);
+}
+
+.display-md,
+.h4,
+.heading-4 {
+  font-size: var(--text-heading-md);
+  line-height: var(--text-heading-md--line-height);
+  letter-spacing: var(--text-heading-md--letter-spacing);
+}
+
+.display-sm,
+.h5,
+.heading-5 {
+  font-size: var(--text-heading-sm);
+  line-height: var(--text-heading-sm--line-height);
+}
+
+.display-xs,
+.h6,
+.heading-6 {
+  font-size: var(--text-heading-xs);
+  line-height: var(--text-heading-xs--line-height);
+}
+
+.body-xl,
+.lead-1 {
+  font-size: var(--text-xl);
+  line-height: var(--text-xl--line-height);
+}
+
+.body-lg,
+.lead-2 {
+  font-size: var(--text-lg);
+  line-height: var(--text-lg--line-height);
+}
+
+.body-md,
+.text-base {
+  font-size: var(--text-md);
+  line-height: var(--text-md--line-height);
+}
+
+.body-sm,
+.caption {
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+}
+
+.body-xs,
+.legal,
+.text-legal {
+  font-size: var(--text-xs);
+  line-height: var(--text-xs--line-height);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcodegroup-au/dsg-vue",
   "description": "Front-end Vue/Tailwind DSG for UntitledUI.",
-  "version": "1.0.3-next",
+  "version": "1.0.4-next",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -31,12 +31,6 @@
       "require": "./dist/dsg-vue.cjs",
       "default": "./dist/dsg-vue.esm.js"
     },
-    "./tailwind": {
-      "types": "./dist/tailwind.d.ts",
-      "import": "./dist/dsg-vue.tailwind.esm.js",
-      "require": "./dist/dsg-vue.tailwind.cjs",
-      "default": "./dist/dsg-vue.tailwind.esm.js"
-    },
     "./table": {
       "types": "./dist/table.d.ts",
       "import": "./dist/dsg-vue.table.esm.js",
@@ -67,6 +61,7 @@
       "require": "./dist/dsg-vue.helpers-object.cjs",
       "default": "./dist/dsg-vue.helpers-object.esm.js"
     },
+    "./styles/*.css": "./dist/styles/*.css",
     "./dsg-vue.css": "./dist/dsg-vue.css"
   },
   "homepage": "https://github.com/DCODE-GROUP/dsg-vue#readme",
@@ -143,6 +138,7 @@
     "vditor": "^3.11.2",
     "vite": "^6.4.2",
     "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^4.1.0",
     "vite-svg-loader": "^5.1.1",
     "vitest": "^3.2.4",
     "vue-barcode-reader": "^1.0.3",

package/vite.config.ts

@@ -6,6 +6,7 @@ import path from "node:path";
 import dts from "vite-plugin-dts";
 import tailwindcss from "@tailwindcss/vite";
 import { resolve } from "path";
+import { viteStaticCopy } from "vite-plugin-static-copy";
 
 // # Build/Export: Vite Configuration
 export default defineConfig(({ command, mode }) => {
@@ -63,7 +64,7 @@ export default defineConfig(({ command, mode }) => {
         "@headers": path.resolve(__dirname, "src/components/Headers"),
         "@misc": path.resolve(__dirname, "src/components/Misc"),
         "@navigation": path.resolve(__dirname, "src/components/Navigation"),
-        "@tailwind": resolve(__dirname, "src/tailwind"),
+        "@tailwind": resolve(__dirname, "src/styles"),
         // "vue": "vue/dist/vue.esm-bundler.js",
       },
     },
@@ -77,6 +78,15 @@ export default defineConfig(({ command, mode }) => {
         exclude: ["**/tests/**/*", "demo/**/*.ts", "demo/**/*.vue", "docs/**/*.ts", "docs/**/*.vue", "node_modules", "dist"],
       }),
       svgLoader(),
+      viteStaticCopy({
+        targets: [
+          {
+            src: "src/styles/*.css",
+            dest: "",
+            rename: { stripBase: 1 },
+          },
+        ],
+      }),
     ],
     test: {
       globals: true,

package/dist/tailwind/configuration/ConfigCore.d.ts

@@ -1,3 +0,0 @@
-import { default as ColoursConfig } from './DsgColoursConfig';
-import { default as FontFamilyConfig } from './DsgFontFamilyConfig';
-export { ColoursConfig, FontFamilyConfig };

package/dist/tailwind/configuration/DsgColoursConfig.d.ts

@@ -1,427 +0,0 @@
-declare const _default: {
-    body: string;
-    headings: string;
-    brand: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    primary: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    gray: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    success: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    error: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    warning: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    info: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "gray-blue": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "gray-cool": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "gray-modern": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "gray-neutral": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "gray-iron": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "gray-true": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "gray-warm": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    moss: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "green-light": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    green: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    teal: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    cyan: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "blue-light": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    blue: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "blue-dark": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    violet: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    purple: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    fuchsia: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    pink: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    rose: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    "orange-dark": {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    orange: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    yellow: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    white: string;
-    black: string;
-};
-export default _default;

package/dist/tailwind/configuration/DsgFontFamilyConfig.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    brand: string[];
-    inter: string[];
-};
-export default _default;