style(theme): refresh default color palette and card styling

cli/index.ts

@@ -141,23 +141,23 @@ const defaultSettings: Settings = {
     width: 140,
     height: 65,
   },
-  backgroundColor: "#F5F5F6",
+  backgroundColor: "#F8FAFC",
   color: {
     activity: {
       color: "#FFFFFF",
-      backgroundColor: "#266B9A",
+      backgroundColor: "#3B82F6",
     },
     task: {
       color: "#FFFFFF",
-      backgroundColor: "#3E9BCD",
+      backgroundColor: "#6366F1",
     },
     story: {
-      color: "#000000",
-      backgroundColor: "#FFFFFF",
+      color: "#1E293B",
+      backgroundColor: "#F1F5F9",
     },
-    line: "#434343",
-    label: "#8C9FAE",
-    text: "#111111",
+    line: "#CBD5E1",
+    label: "#64748B",
+    text: "#1E293B",
   },
   diagramType: "UserStoryMap",
 };

extension/lib/src/index.ts

@@ -40,21 +40,21 @@ const defaultConfig: Config = {
   color: {
     activity: {
       color: "#FFFFFF",
-      backgroundColor: "#266B9A",
+      backgroundColor: "#3B82F6",
     },
     task: {
       color: "#FFFFFF",
-      backgroundColor: "#3E9BCD",
+      backgroundColor: "#6366F1",
     },
     story: {
-      color: "#000000",
-      backgroundColor: "#FFFFFF",
+      color: "#1E293B",
+      backgroundColor: "#F1F5F9",
     },
-    line: "#434343",
-    label: "#8C9FAE",
-    text: "#111111",
+    line: "#CBD5E1",
+    label: "#64748B",
+    text: "#1E293B",
   },
-  backgroundColor: "#F5F5F6",
+  backgroundColor: "#F8FAFC",
   zoomControl: false,
   scale: 1.0,
   toolbar: false,

frontend/src/elm/Diagram/Types/Settings.elm

@@ -101,12 +101,12 @@ default =
             , backgroundColor = Color.background2Defalut
             }
         , story =
-            { color = Color.gray
-            , backgroundColor = Color.white
+            { color = Color.fromString "#94A3B8"
+            , backgroundColor = Color.fromString "#1E293B"
             }
         , line = Color.lineDefalut
         , label = Color.labelDefalut
-        , text = Just <| Color.textDefalut
+        , text = Just <| Color.fromString "#F1F5F9"
         }
     , backgroundColor =
         Color.backgroundDarkDefalut

frontend/src/elm/Diagram/Types/Type.elm

@@ -572,6 +572,9 @@ fromTypeString s =
         "ER" ->
             ErDiagram
 
+        "ERDiagram" ->
+            ErDiagram
+
         "Kanban" ->
             Kanban
 

frontend/src/elm/Diagram/UserStoryMap/View.elm

@@ -138,7 +138,8 @@ labelView { settings, property, width, userStoryMap } =
                     , SvgAttr.x2 <| String.fromInt width
                     , SvgAttr.y2 <| String.fromInt (Constants.itemMargin // 2 + (CardSize.toInt settings.size.height + Constants.itemMargin) * 2)
                     , SvgAttr.stroke <| Color.toString <| DiagramSettings.getLineColor settings property
-                    , SvgAttr.strokeWidth "2"
+                    , SvgAttr.strokeWidth "1"
+                    , SvgAttr.strokeDasharray "6,4"
                     ]
                     []
                 )
@@ -184,7 +185,8 @@ labelView { settings, property, width, userStoryMap } =
                                     , SvgAttr.x2 <| String.fromInt width
                                     , SvgAttr.y2 <| String.fromInt releaseY
                                     , SvgAttr.stroke <| Color.toString <| DiagramSettings.getLineColor settings property
-                                    , SvgAttr.strokeWidth "2"
+                                    , SvgAttr.strokeWidth "1"
+                                    , SvgAttr.strokeDasharray "6,4"
                                     ]
                                     []
                                 , labelTextView settings ( posX, releaseY + Constants.itemMargin ) (Property.getReleaseLevel (xx + 1) property |> Maybe.withDefault ("RELEASE " ++ String.fromInt (xx + 1)))
@@ -402,15 +404,17 @@ labelTextView settings ( posX, posY ) t =
     Svg.foreignObject
         [ SvgAttr.x <| String.fromInt posX
         , SvgAttr.y <| String.fromInt posY
-        , SvgAttr.width "100"
+        , SvgAttr.width "120"
         , SvgAttr.height "40"
         , SvgAttr.color <| Color.toString settings.color.label
-        , SvgAttr.fontSize "12"
-        , SvgAttr.fontWeight "bold"
+        , SvgAttr.fontSize "10"
+        , SvgAttr.fontWeight "600"
         ]
         [ Html.div
             [ Attr.style "font-family" (DiagramSettings.fontStyle settings)
             , Attr.style "word-wrap" "break-word"
+            , Attr.style "letter-spacing" "0.6px"
+            , Attr.style "text-transform" "uppercase"
             ]
             [ Html.text t ]
         ]

frontend/src/elm/Diagram/View.elm

@@ -649,11 +649,11 @@ svgView model centerPosition (( svgWidth, svgHeight ) as svgSize) mainSvg =
           else
             Svg.defs [] [ highlightDefs, Svg.style [] [ Svg.text ("@import url('" ++ Font.url model.settings.font ++ "'&display=swap');") ] ]
         , Svg.defs []
-            [ Svg.filter [ SvgAttr.id "shadow", SvgAttr.height "120%" ]
-                [ Svg.feGaussianBlur [ SvgAttr.in_ "SourceAlpha", SvgAttr.stdDeviation "2" ] []
-                , Svg.feOffset [ SvgAttr.dx "3", SvgAttr.dy "3", SvgAttr.result "offsetblur" ] []
+            [ Svg.filter [ SvgAttr.id "shadow", SvgAttr.x "-5%", SvgAttr.y "-5%", SvgAttr.width "115%", SvgAttr.height "115%" ]
+                [ Svg.feGaussianBlur [ SvgAttr.in_ "SourceAlpha", SvgAttr.stdDeviation "4" ] []
+                , Svg.feOffset [ SvgAttr.dx "0", SvgAttr.dy "4", SvgAttr.result "offsetblur" ] []
                 , Svg.feComponentTransfer []
-                    [ Svg.feFuncA [ SvgAttr.type_ "linear", SvgAttr.slope "0.3" ] [] ]
+                    [ Svg.feFuncA [ SvgAttr.type_ "linear", SvgAttr.slope "0.12" ] [] ]
                 , Svg.feMerge []
                     [ Svg.feMergeNode [] []
                     , Svg.feMergeNode [ SvgAttr.in_ "SourceGraphic" ] []

frontend/src/elm/Diagram/View/Card.elm

@@ -126,11 +126,11 @@ view { settings, property, position, selectedItem, item, canMove, defaultColor,
                     , SvgAttr.x <| String.fromInt posX
                     , SvgAttr.y <| String.fromInt posY
                     , SvgAttr.fill <| Color.toString backColor
-                    , SvgAttr.rx "1"
-                    , SvgAttr.ry "1"
+                    , SvgAttr.rx "6"
+                    , SvgAttr.ry "6"
                     , SvgAttr.style "filter:url(#shadow)"
                     , SvgAttr.class "ts-card"
-                    , SvgAttr.stroke "rgba(0, 0, 0, 0.05)"
+                    , SvgAttr.stroke "rgba(255, 255, 255, 0.08)"
                     , css [ Css.hover [ Css.cursor Css.pointer ] ]
                     ]
                     []
@@ -189,10 +189,10 @@ view { settings, property, position, selectedItem, item, canMove, defaultColor,
                             , SvgAttr.height <| String.fromInt <| Size.getHeight selectedItemSize + 16
                             , SvgAttr.x (String.fromInt <| x_ - 8)
                             , SvgAttr.y (String.fromInt <| y_ - 8)
-                            , SvgAttr.rx "1"
-                            , SvgAttr.ry "1"
+                            , SvgAttr.rx "8"
+                            , SvgAttr.ry "8"
                             , SvgAttr.fill "transparent"
-                            , SvgAttr.stroke "rgba(38, 107, 154, 0.6)"
+                            , SvgAttr.stroke "rgba(99, 102, 241, 0.8)"
                             , SvgAttr.strokeWidth "2"
                             ]
                             []
@@ -201,8 +201,8 @@ view { settings, property, position, selectedItem, item, canMove, defaultColor,
                             , SvgAttr.height <| String.fromInt <| Size.getHeight selectedItemSize + 4
                             , SvgAttr.x (String.fromInt <| x_ - 2)
                             , SvgAttr.y (String.fromInt <| y_ - 2)
-                            , SvgAttr.rx "1"
-                            , SvgAttr.ry "1"
+                            , SvgAttr.rx "7"
+                            , SvgAttr.ry "7"
                             , SvgAttr.fill <| Color.toString backColor
                             , SvgAttr.style "filter:url(#shadow)"
                             ]

frontend/src/elm/Types/Color.elm

@@ -46,17 +46,17 @@ type Color
 
 background1Defalut : Color
 background1Defalut =
-    Color "Background1 Defalut" "#266B9A"
+    Color "Background1 Default" "#3B82F6"
 
 
 background2Defalut : Color
 background2Defalut =
-    Color "Background2 Defalut" "#3E9BCD"
+    Color "Background2 Default" "#6366F1"
 
 
 backgroundDarkDefalut : Color
 backgroundDarkDefalut =
-    Color "Background Dark Defalut" "#323d46"
+    Color "Background Dark Default" "#0F172A"
 
 
 backgroundDefalut : Color
@@ -133,28 +133,28 @@ fromString rgb =
         "#258F9B" ->
             green2
 
-        "#266B9A" ->
-            background1Defalut
-
-        "#323D46" ->
+        "#0F172A" ->
             backgroundDarkDefalut
 
+        "#334155" ->
+            lineDefalut
+
         "#333333" ->
             gray
 
-        "#3E9BCD" ->
-            background2Defalut
+        "#3B82F6" ->
+            background1Defalut
 
-        "#434343" ->
-            lineDefalut
+        "#6366F1" ->
+            background2Defalut
 
         "#7C48A5" ->
             purple2
 
         "#808000" ->
             olive
 
-        "#8C9FAE" ->
+        "#64748B" ->
             labelDefalut
 
         "#CD89F7" ->
@@ -230,7 +230,7 @@ iconColor =
 
 labelDefalut : Color
 labelDefalut =
-    Color "Label Defalut" "#8C9FAE"
+    Color "Label Default" "#64748B"
 
 
 lightGray : Color
@@ -245,7 +245,7 @@ lime =
 
 lineDefalut : Color
 lineDefalut =
-    Color "Line Defalut" "#434343"
+    Color "Line Default" "#334155"
 
 
 name : Color -> String

frontend/vite.config.ts

@@ -1,12 +1,32 @@
 import path from 'node:path';
 import elmPlugin from 'vite-plugin-elm';
 import { sentryVitePlugin } from '@sentry/vite-plugin';
-import { defineConfig } from 'vite';
+import { defineConfig, type Plugin } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import { createHtmlPlugin } from 'vite-plugin-html';
 
 const outDirectory = path.join(import.meta.dirname, 'dist');
 const day = 60 * 60 * 24;
+
+// vite-plugin-elm injects `import.meta.hot.accept(["/src/elm/Dep.elm", ...])` for HMR.
+// Vite 7.x warns when it can't resolve these server-relative paths because
+// vite-plugin-elm has no resolveId hook. This plugin intercepts them as virtual modules.
+const elmHmrDepResolver: Plugin = {
+  name: 'elm-hmr-dep-resolver',
+  enforce: 'pre',
+  resolveId(id: string) {
+    if (id.endsWith('.elm') && id.startsWith('/')) {
+      return `\0elm-hmr:${id}`;
+    }
+    return undefined;
+  },
+  load(id: string) {
+    if (id.startsWith('\0elm-hmr:')) {
+      return 'export default null;';
+    }
+    return undefined;
+  },
+};
 const env = [
   'FIREBASE_API_KEY',
   'FIREBASE_AUTH_DOMAIN',
@@ -60,6 +80,7 @@ export default defineConfig(({ mode }) => ({
   },
   define: Object.fromEntries(env.map((key) => [`process.env.${key}`, JSON.stringify(process.env[key])])),
   plugins: [
+    elmHmrDepResolver,
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     elmPlugin({
       optimize: false,