@sbc-connect/nuxt-base 0.1.4 → 0.1.6

package/modules/{assets/runtime/assets/core-tw.css → base-assets/runtime/assets/connect-base-tw.css}

@@ -12,23 +12,23 @@
   --ui-success: var(--color-green-600);
   --ui-warning: #F8661A;
   /* Custom themes */
-  --ui-brandDark: var(--color-midnightBlue-900);
-  --ui-brandLight: var(--color-yellow-400);
-  --ui-lineDark: #6F7780;
-  --ui-lineLight: var(--color-gray-300);
-  --ui-lineSpecial: #899EB2;
-  --ui-markBlue: #1A5A96;
-  --ui-markBlueHover: #0000EE;
+  --ui-brand: var(--color-midnightBlue-900);
+  --ui-brand-inverted: var(--color-yellow-400);
+  --ui-line: #6F7780;
+  --ui-line-muted: var(--color-gray-300);
+  --ui-line-highlighted: #899EB2;
+  --ui-mark: #1A5A96;
+  --ui-mark-highlighted: #0000EE;
   --ui-neutral: var(--color-gray-700);
-  --ui-neutralDark: var(--color-gray-900);
-  --ui-neutralLight: #757575;
-  --ui-shadeCaution: #FFF7E3;
-  --ui-shadeLight: white;
-  --ui-shadeNew: #E8F5E9;
-  --ui-shadePrimary: var(--color-gray-100);
-  --ui-shadeSecondary: #E2E8EE;
-  --ui-shadeSpecial: var(--color-blue-50);
-  --ui-shadeWarning: #FAE9E9;
+  --ui-neutral-highlighted: var(--color-gray-900);
+  --ui-neutral-toned: #757575;
+  --ui-shade-caution: #FFF7E3;
+  --ui-shade-inverted: white;
+  --ui-shade-new: #E8F5E9;
+  --ui-shade: var(--color-gray-100);
+  --ui-shade-secondary: #E2E8EE;
+  --ui-shade-highlighted: var(--color-blue-50);
+  --ui-shade-warning: #FAE9E9;
   --ui-radius: 0.1667rem;
 }
 
@@ -40,23 +40,23 @@
   --ui-success: var(--color-green-600);
   --ui-warning: #F8661A;
   /* Custom themes */
-  --ui-brandDark: var(--color-midnightBlue-900);
-  --ui-brandLight: var(--color-yellow-400);
-  --ui-lineDark: #6F7780;
-  --ui-lineLight: var(--color-gray-300);
-  --ui-lineSpecial: #899EB2;
-  --ui-markBlue: #1A5A96;
-  --ui-markBlueHover: #0000EE;
+  --ui-brand: var(--color-midnightBlue-900);
+  --ui-brand-inverted: var(--color-yellow-400);
+  --ui-line: #6F7780;
+  --ui-line-muted: var(--color-gray-300);
+  --ui-line-highlighted: #899EB2;
+  --ui-mark: #1A5A96;
+  --ui-mark-highlighted: #0000EE;
   --ui-neutral: var(--color-gray-700);
-  --ui-neutralDark: var(--color-gray-900);
-  --ui-neutralLight: #757575;
-  --ui-shadeCaution: #FFF7E3;
-  --ui-shadeLight: white;
-  --ui-shadeNew: #E8F5E9;
-  --ui-shadePrimary: var(--color-gray-100);
-  --ui-shadeSecondary: #E2E8EE;
-  --ui-shadeSpecial: var(--color-blue-50);
-  --ui-shadeWarning: #FAE9E9;
+  --ui-neutral-highlighted: var(--color-gray-900);
+  --ui-neutral-toned: #757575;
+  --ui-shade-caution: #FFF7E3;
+  --ui-shade-inverted: white;
+  --ui-shade-new: #E8F5E9;
+  --ui-shade: var(--color-gray-100);
+  --ui-shade-secondary: #E2E8EE;
+  --ui-shade-highlighted: var(--color-blue-50);
+  --ui-shade-warning: #FAE9E9;
   --ui-radius: 0.1667rem;
 }
 
@@ -67,14 +67,16 @@
   /* widths */
   --container-bcGovMd: 1020px;
   --container-bcGovLg: 1360px;
-  --container-bcGovInput: 600px;
+  --container-input: 600px;
 
   /* list style types */
   --marker-alpha: lower-alpha;
   --marker-upper-alpha: upper-alpha;
 
   /* box shadow */
-  --shadow-bcGovInput: inset 0 -2px 0 0px #1669bb;
+  --shadow-input: inset 0 -1px 0 0px var(--ui-neutral);
+  --shadow-input-focus: inset 0 -2px 0 0px var(--ui-primary);
+  --shadow-input-error: inset 0 -2px 0 0px var(--ui-error);
 
   /* GRAY */
   --color-gray-50: #f8f9fa;
@@ -161,8 +163,8 @@
   font-family: "BCSans";
   font-style: normal;
   font-weight: 400;
-  src: url("BCGovFonts/BCSans-Regular.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-Regular.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -170,15 +172,15 @@
   font-family: "BCSans";
   font-style: italic;
   font-weight: 400;
-  src: url("BCGovFonts/BCSans-Italic.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-Italic.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-Italic.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-Italic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 @font-face {
   font-family: "BCSans";
   font-weight: 700;
-  src: url("BCGovFonts/BCSans-Bold.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-Bold.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -186,8 +188,8 @@
   font-family: "BCSans";
   font-style: italic;
   font-weight: 700;
-  src: url("BCGovFonts/BCSans-BoldItalic.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-BoldItalic.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -213,7 +215,7 @@ body {
   h2,
   h3,
   h4 {
-    @apply text-neutralDark;
+    @apply text-neutral-highlighted;
   }
 
   h1,
@@ -245,15 +247,15 @@ body {
 
   td,
   th {
-    @apply text-neutralDark text-sm;
+    @apply text-neutral-highlighted text-sm;
   }
 
   /* floating labels */
   .floating-label-input {
-    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-none peer-focus:text-primary;
+    @apply pointer-events-none absolute left-0 top-3 text-neutral-highlighted transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary;
   }
   
   .floating-label-textarea {
-    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
+    @apply pointer-events-none absolute left-0 top-1 text-neutral-highlighted text-xs font-medium px-2.5 transition-all duration-200 peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
   }
 }

package/nuxt.config.ts

@@ -8,7 +8,6 @@ export default defineNuxtConfig({
   devtools: { enabled: false },
 
   alias: {
-    'BCGovFonts': resolve('./public/fonts/BCSans'),
     'BCGovLogoSmEn': resolve('./public/BCGovLogo/gov_bc_logo_vert_en.png'),
     'BCGovLogoSmFr': resolve('./public/BCGovLogo/gov_bc_logo_vert_fr.png'),
     'BCGovLogoLgEn': resolve('./public/BCGovLogo/gov_bc_logo_horiz_en.png'),
@@ -19,7 +18,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-10',
 
   imports: {
-    dirs: ['interfaces']
+    dirs: ['interfaces', 'types', 'enums']
   },
 
   modules: [
@@ -62,21 +61,23 @@ export default defineNuxtConfig({
         'info',
         'warning',
         'error',
-        'brandDark',
-        'brandLight',
-        'lineDark',
-        'lineLight',
-        'lineSpecial',
+        'brand',
+        'brand-inverted',
+        'line',
+        'line-muted',
+        'line-highlighted',
+        'mark',
+        'mark-highlighted',
         'neutral',
-        'neutralDark',
-        'neutralLight',
-        'shadeCaution',
-        'shadeLight',
-        'shadeNew',
-        'shadePrimary',
-        'shadeSecondary',
-        'shadeSpecial',
-        'shadeWarning'
+        'neutral-highlighted',
+        'neutral-toned',
+        'shade-caution',
+        'shade-inverted',
+        'shade-new',
+        'shade',
+        'shade-secondary',
+        'shade-highlighted',
+        'shade-warning'
       ]
     }
   },
@@ -85,10 +86,35 @@ export default defineNuxtConfig({
     clientBundle: {
       icons: [
         'mdi:arrow-left',
+        'mdi:arrow-right',
         'mdi:info-outline',
         'mdi:information',
         'mdi:web',
-        'mdi:check'
+        'mdi:check',
+        'mdi:chevron-double-left',
+        'mdi:chevron-double-right',
+        'mdi:chevron-left',
+        'mdi:chevron-right',
+        'mdi:menu-down',
+        'mdi:menu-left',
+        'mdi:menu-right',
+        'mdi:menu-up',
+        'mdi:close',
+        'mdi:dots-horizontal',
+        'mdi:open-in-new',
+        'mdi:file',
+        'mdi:folder',
+        'mdi:folder-open',
+        'mdi:loading',
+        'mdi:minus',
+        'mdi:plus',
+        'mdi:magnify',
+        'mdi:upload',
+        'mdi:caret-down',
+        'mdi:menu',
+        'mdi:file-document-outline',
+        'mdi:home',
+        'mdi:web'
       ]
     }
   },

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@iconify-json/mdi": "^1.2.3",
     "@nuxt/ui": "^3.3.0",
-    "@nuxtjs/i18n": "^10.0.2",
+    "@nuxtjs/i18n": "^10.0.3",
+    "@vueuse/core": "^13.6.0",
+    "@vueuse/nuxt": "^13.6.0",
     "dompurify": "^3.2.6",
+    "es-toolkit": "^1.39.8",
     "launchdarkly-vue-client-sdk": "^2.4.1",
-    "@vueuse/nuxt": "^13.5.0",
-    "@vueuse/core": "^13.5.0",
-    "lodash-es": "^4.17.21"
+    "maska": "^3.2.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
     "@vitest/coverage-v8": "^3.2.4",
-    "dotenv": "^17.2.0",
-    "nuxt": "4.0.0",
+    "dotenv": "^17.2.1",
+    "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
-    "vue-tsc": "^3.0.3",
-    "@types/lodash-es": "^4.17.12",
+    "vue-tsc": "^3.0.4",
     "@sbc-connect/eslint-config": "0.0.5",
     "@sbc-connect/playwright-config": "0.0.4",
     "@sbc-connect/vitest-config": "0.0.5"

package/app/plugins/launchdarkly.client.ts

@@ -1,9 +0,0 @@
-// import { LDPlugin } from 'launchdarkly-vue-client-sdk'
-
-// export default defineNuxtPlugin({
-//   name: 'connect-launchdarkly-plugin',
-//   parallel: true,
-//   setup(nuxtApp) {
-//     nuxtApp.vueApp.use(LDPlugin, { deferInitialization: true })
-//   }
-// })

package/modules/assets/index.ts

@@ -1,24 +0,0 @@
-import { defineNuxtModule, createResolver, installModule } from 'nuxt/kit'
-
-// Module options TypeScript interface definition
-export interface ModuleOptions {
-  someconfig: boolean
-}
-
-export default defineNuxtModule<ModuleOptions>({
-  meta: {
-    name: 'assets',
-    configKey: 'assets'
-  },
-  // Default configuration options of the Nuxt module
-  defaults: {},
-  async setup(_options, _nuxt) {
-    console.info('Setting up assets module')
-    const resolver = createResolver(import.meta.url)
-
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-tw.css'))
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-layout.css'))
-    // _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-main.css'))
-    await installModule('@nuxt/ui')
-  }
-})

package/modules/assets/runtime/assets/core-main.css

@@ -1,6 +0,0 @@
-@import "tailwindcss";
-@import "@nuxt/ui";
-@import "./core-tw.css";
-@import "./core-layout.css";
-
-@source "../../../../app/";