@mohamedatia/fly-design-system 2.8.1 → 2.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/scss/_theme-dark.scss +6 -1
  3. package/scss/_theme-light.scss +12 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mohamedatia/fly-design-system",
3
- "version": "2.8.1",
3
+ "version": "2.8.2",
4
4
  "description": "FlyOS design system — shared components, directives, pipes, services, and models for Business App developers.",
5
5
  "keywords": [
6
6
  "flyos",
package/scss/_theme-dark.scss CHANGED
@@ -87,7 +87,12 @@ html.dark-theme {
87
87
  --window-content-scrim: transparent;
88
88
 
89
89
  // ── Titlebar ────────────────────────────────────────────────────────────────
90
- --titlebar-bg: transparent;
90
+ // Own backdrop-filter + tinted plate so wallpaper does not bleed through the
91
+ // strip above the app content. Tuned to read close to the dark app surface.
92
+ --titlebar-bg: rgb(20 20 24 / 72%);
93
+ --titlebar-blur: 40px;
94
+ --titlebar-saturate: 160%;
95
+ --titlebar-border: rgb(255 255 255 / 8%);
91
96
  --titlebar-height: 44px;
92
97
  --titlebar-padding: 0 14px;
93
98
 
package/scss/_theme-light.scss CHANGED
@@ -46,22 +46,25 @@ html.light-theme {
46
46
  --launcher-card-title: #ffffff;
47
47
  --launcher-card-desc: rgb(255, 255, 255 , 0.8);
48
48
 
49
- // Window chrome — light frosted glass. Held to a high opacity (88%) so the
50
- // window plate reads as a solid light surface regardless of the wallpaper
51
- // behind it. (Before v2.8 the legacy spatial theme provided the high-opacity
52
- // option; with spatial removed, light theme must be solid enough on dark
53
- // wallpapers too.) `backdrop-filter` on .window still picks up wallpaper tint.
54
- --window-bg: rgb(248 249 250 / 88%);
49
+ // Window chrome — light frosted glass similar to Figma spec (soft white plate,
50
+ // strong background blur, subtle luminous border).
51
+ --window-bg: rgb(255 255 255 / 6%);
55
52
  --window-radius: 24px;
56
53
  --window-blur: 64px;
57
54
  --window-backdrop-saturate: 175%;
58
55
  --window-shadow: 0 28px 96px rgb(0 0 0 / 18%);
59
56
  --window-border: rgb(255 255 255 / 50%);
60
- --window-specular: inset 0 1px 0 rgb(255 255 255 / 60%),
61
- inset 0 -1px 0 rgb(0 0 0 / 4%);
57
+ --window-specular: inset 0 1px 0 rgb(255 255 255 / 30%),
58
+ inset 0 -1px 0 rgb(255 255 255 / 16%);
62
59
  --window-content-scrim: transparent;
63
60
  --app-content-plate: transparent;
64
- --titlebar-bg: transparent;
61
+ // Titlebar — own backdrop-filter + tinted plate so wallpaper does not bleed
62
+ // through the strip above the app content. Tuned to read close to Circles'
63
+ // light surface (--circles-bg ≈ oklch(0.985 0.003 100)).
64
+ --titlebar-bg: rgb(250 250 252 / 78%);
65
+ --titlebar-blur: 40px;
66
+ --titlebar-saturate: 180%;
67
+ --titlebar-border: rgb(0 0 0 / 6%);
65
68
  --titlebar-height: 44px;
66
69
  --titlebar-padding: 0 14px;
67
70
  --dock-bg: rgb(255 255 255 / 15%);