@sbc-connect/nuxt-base 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.14
+
+### Patch Changes
+
+- [#54](https://github.com/bcgov/connect-nuxt/pull/54) [`5d66b92`](https://github.com/bcgov/connect-nuxt/commit/5d66b927121d6144ee7eedb8ed86b64c76e26c7e) Thanks [@deetz99](https://github.com/deetz99)! - Update layout padding, fix text-highlighted css var reference.
+
 ## 0.1.13
 
 ### Patch Changes

package/app/components/Connect/Breadcrumb.vue

@@ -39,11 +39,11 @@ function resolveBackHref() {
   <div
     v-if="$route.meta.hideBreadcrumbs !== true"
     data-testid="connect-breadcrumb-wrapper"
-    class="bg-blue-350"
+    class="bg-blue-350 p-2 sm:px-4 py-2"
   >
     <nav
       :aria-label="$t('connect.breadcrumb.arialabel')"
-      class="app-inner-container flex items-center p-2 sm:px-4 py-2 gap-3"
+      class="app-inner-container flex items-center gap-3"
     >
       <UButton
         class="size-[28px] rounded-full px-1 bg-secondary hover:bg-secondary/75"

package/app/components/Connect/Footer.vue

@@ -54,9 +54,9 @@ const appVersions = computed<string[]>(() => {
   <footer
     id="connect-main-footer"
     data-testid="connect-main-footer"
-    class="border-t-2 border-brand-inverted bg-brand"
+    class="border-t-2 border-brand-inverted bg-brand p-2 sm:px-4"
   >
-    <div class="app-inner-container flex items-center justify-between p-2">
+    <div class="app-inner-container flex items-center justify-between">
       <nav :aria-label="$t('connect.footer.navLabel')" class="flex grow">
         <ul class="list-none flex-col gap-1 p-0 sm:-ml-2 sm:flex-row sm:flex-wrap">
           <li

package/app/components/Connect/Layout/Index.vue

@@ -9,12 +9,14 @@
     <slot name="breadcrumb">
       <ConnectBreadcrumb />
     </slot>
-    <main class="app-inner-container app-body">
-      <slot name="body">
-        <div class="grow max-w-full flex flex-col overflow-hidden">
-          <slot />
-        </div>
-      </slot>
+    <main class="app-body px-2 sm:px-4">
+      <div class="app-inner-container ">
+        <slot name="body">
+          <div class="grow max-w-full flex flex-col overflow-hidden">
+            <slot />
+          </div>
+        </slot>
+      </div>
     </main>
     <slot name="footer">
       <ConnectFooter />

package/app/components/Connect/SystemBanner.vue

@@ -18,7 +18,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="connect-system-banner" class="bg-brand-inverted">
+  <div id="connect-system-banner" class="bg-brand-inverted px-2 sm:px-4">
     <UAlert
       v-show="!!message && !close"
       class="py-0"
@@ -26,7 +26,7 @@ onMounted(async () => {
       :close="dismissible"
       close-icon="i-mdi-close"
       :ui="{
-        root: 'rounded-none bg-brand-inverted p-2 sm:px-4 app-inner-container',
+        root: 'rounded-none bg-brand-inverted px-0 sm:px-0 app-inner-container',
         wrapper: 'bg-brand-inverted',
         close: 'mt-2 text-neutral-highlighted',
       }"

package/modules/base-assets/runtime/assets/connect-base-layout.css

@@ -9,5 +9,5 @@
 }
 
 .app-body {
-  @apply grow relative flex flex-col px-4;
+  @apply grow relative flex flex-col;
 }

package/modules/base-assets/runtime/assets/connect-base-tw.css

@@ -6,12 +6,12 @@
 /* Customize Nuxt UI default tokens */
 /* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {
-  /* Default Text Colours */
-  --ui-text-dimmed: var(--ui-color-gray-400);
-  --ui-text-muted: var(--ui-color-gray-500);
-  --ui-text-toned: var(--ui-color-gray-600);
-  --ui-text: var(--ui-color-neutral);
-  --ui-text-highlighted: var(--ui-color-neutral-highlighted);
+  /* Nuxt UI Default Text Colours */
+  --ui-text-dimmed: var(--color-gray-400);
+  --ui-text-muted: var(--color-gray-500);
+  --ui-text-toned: var(--color-gray-600);
+  --ui-text: var(--ui-neutral);
+  --ui-text-highlighted: var(--ui-neutral-highlighted);
   --ui-text-inverted: var(--color-white);
   /* Variant Colours */
   --ui-error: var(--color-red-600);
@@ -42,12 +42,12 @@
 
 /* FUTURE: add dark themed colours (currently set to be the same) */
 .dark {
-  /* Default Text Colours */
+  /* Nuxt UI Default Text Colours */
   --ui-text-dimmed: var(--ui-color-gray-400);
   --ui-text-muted: var(--ui-color-gray-500);
   --ui-text-toned: var(--ui-color-gray-600);
-  --ui-text: var(--ui-color-neutral);
-  --ui-text-highlighted: var(--ui-color-neutral-highlighted);
+  --ui-text: var(--ui-neutral);
+  --ui-text-highlighted: var(--ui-neutral-highlighted);
   --ui-text-inverted: var(--color-white);
   /* Variant Colours */
   --ui-error: var(--color-red-600);
@@ -76,6 +76,7 @@
   --ui-radius: 0.1667rem;
 }
 
+/* Main Theme */
 @theme static {
   /* font */
   --font-sans: 'BCSans', 'Verdana', 'Arial', 'sans-serif';
@@ -275,3 +276,14 @@ body {
     @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 peer-aria-invalid:text-error;
   }
 }
+
+/* TODO: maybe delete this */
+/* Extra Utilities */
+/* This should be working out-of-the-box from Nuxt UI but isnt for some reason */
+/* https://ui.nuxt.com/getting-started/theme#neutral */
+/* .text-highlighted {
+  color: var(--color-gray-900);
+  @variant dark {
+    color: var(--color-gray-900);
+  }
+} */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",