@local-logic/maps 0.0.4 → 0.0.5

package/.storybook/globals.css

@@ -4,29 +4,37 @@
 
 html {
   height: 100%;
-}
 
-body {
-  font-family: 'Inter', sans-serif;
-}
+  /* Override base font size */
+  font-size: var(--ll-base-unit);
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
-@layer utilities {
-  /* Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
+@layer base {
+  :root {
+    --ll-base-unit: 16px;
+
+    /* FONT FAMILY */
+    --ll-font-family: Inter, sans-serif;
+    --ll-font-family-mono: Consolas, Andale Mono WT, Andale Mono, Lucida Console,
+      Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono,
+      Nimbus Mono L, Monaco, Courier New, Courier, monospace;
   }
 
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+  html {
+    @apply scroll-smooth;
   }
 }
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  text-rendering: optimizeLegibility;
+  margin: 0;
+}

package/.storybook/preview.tsx

@@ -1,16 +1,15 @@
-import "@local-logic/core/style.css";
 import "./globals.css";
-import { Preview } from '@storybook/react';
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { Preview } from "@storybook/react";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
 
 const preview: Preview = {
   decorators: [
     withThemeByDataAttribute({
       themes: {
-        light: 'day',
-        dark: 'night',
+        light: "day",
+        dark: "night",
       },
-      defaultTheme: 'light',
+      defaultTheme: "light",
       attributeName: "data-theme",
     }),
   ],
@@ -22,7 +21,7 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
-  }
+  },
 };
 
 export default preview;

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @local-logic/maps
 
+## 0.0.5
+
+### Patch Changes
+
+- 2488bec: LL22-8172: Remove core dependency from maps
+
 ## 0.0.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@local-logic/maps",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "This is a maps implementation allowing for the display of Local Logic data on a map.",
   "author": "Local Logic",
   "license": "ISC",
@@ -64,7 +64,6 @@
     "vitest": "^3.0.9"
   },
   "dependencies": {
-    "@local-logic/core": "*",
     "@local-logic/design-system": "*",
     "@phosphor-icons/react": "^2.1.7",
     "@turf/turf": "^7.2.0",

package/src/components/Map/Root/Layers/Mapbox/index.tsx

@@ -11,7 +11,7 @@ function getLayerPaint(type: LayerType["type"], color: string) {
     case "fill":
       return {
         "fill-color": color,
-        "fill-opacity": 0.15,
+        "fill-opacity": 0.25,
       };
     case "line":
       return {

package/src/components/Map/Root/Markers/styles.ts

@@ -23,7 +23,7 @@ export const background = `
 
 export const iconWrapper = `
   absolute top-1 left-1/2 transform -translate-x-1/2
-  align-center rounded-full overflow-hidden
+  flex justify-center items-center rounded-full overflow-hidden
   transition-all w-3.5 h-3.5
 
   group-hover:bg-base-white
@@ -31,7 +31,9 @@ export const iconWrapper = `
 
 export const icon = `
   m-auto transition-all w-full h-full
+  max-w-3.5 max-h-3.5
 
   group-hover:text-primary-100
-  group-hover:p-0.5
+  group-hover:max-w-2.5
+  group-hover:max-h-2.5
 `;

package/src/components/Map/index.stories.tsx

@@ -51,7 +51,8 @@ const Template: StoryFn<RootProps> = (args) => {
     if (activeMarker.markers.length === 1) {
       return (
         <>
-          {activeMarker.markers[0].icon && React.createElement(activeMarker.markers[0].icon)}
+          {activeMarker.markers[0].icon &&
+            React.createElement(activeMarker.markers[0].icon, { className: "block" })}
           <strong>{activeMarker.markers[0]?.name}</strong>
           <p>
             {activeMarker?.latitude}, {activeMarker?.longitude}
@@ -74,7 +75,7 @@ const Template: StoryFn<RootProps> = (args) => {
               })
             }
           >
-            {marker.icon && React.createElement(marker.icon, { className: "inline mr-5" })}
+            {marker.icon && React.createElement(marker.icon, { className: "inline mr-1" })}
             <strong>{marker.name}</strong>
           </button>
         </div>