@mohamedatia/fly-design-system 2.4.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohamedatia/fly-design-system",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "FlyOS design system — shared components, directives, pipes, services, and models for Business App developers.",
   "keywords": [
     "flyos",

package/scss/_business-app-buttons.scss

@@ -1,208 +1,209 @@
-@use 'vos-button-mixins' as *;
-
-// ─── visionOS Button Utility Classes (shared with FlyOS desktop shell) ────────
-// Requires @use 'fly-theme' (or equivalent tokens) before this partial.
-
-.vos-btn {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--label-primary);
-  font-family: var(--font-family);
-  font-weight: var(--btn-font-weight);
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: clip;
-  padding: 0;
-  transition: background 0.15s ease, color 0.15s ease;
-
-  &.sm {
-    height: var(--btn-sm-height);
-    padding: var(--btn-sm-padding);
-    font-size: var(--btn-sm-font-size);
-    line-height: var(--btn-sm-line-height);
-    gap: var(--btn-sm-gap);
-    border-radius: var(--btn-radius-capsule);
-
-    i, .btn-symbol { font-size: var(--btn-sm-symbol-size); }
-  }
-
-  &.reg {
-    height: var(--btn-reg-height);
-    padding: var(--btn-reg-padding);
-    font-size: var(--btn-reg-font-size);
-    line-height: var(--btn-reg-line-height);
-    gap: var(--btn-reg-gap);
-    border-radius: var(--btn-radius-capsule);
-
-    i, .btn-symbol { font-size: var(--btn-reg-symbol-size); }
-  }
-
-  &.lg {
-    height: var(--btn-lg-height);
-    padding: var(--btn-lg-padding);
-    font-size: var(--btn-lg-font-size);
-    line-height: var(--btn-lg-line-height);
-    gap: var(--btn-lg-gap);
-    border-radius: var(--btn-radius-capsule);
-
-    i, .btn-symbol { font-size: var(--btn-lg-symbol-size); }
-  }
-
-  &.rect {
-    &.sm { border-radius: var(--btn-radius-rect-sm); }
-    &.reg { border-radius: var(--btn-radius-rect-sm); }
-    &.lg { border-radius: var(--btn-radius-rect-lg); }
-  }
-
-  &.platter::before {
-    @include vos-platter-layers(inherit);
-  }
-
-  &:hover:not(:disabled):not(.selected):not(.active)::before {
-    @include vos-platter-layers(inherit);
-  }
-
-  &.selected,
-  &.active {
-    background: var(--btn-selected-bg);
-    color: var(--btn-selected-text);
-
-    &::before { display: none; }
-  }
-
-  &:disabled, &.disabled {
-    cursor: default;
-    color: var(--btn-disabled-text);
-    pointer-events: none;
-
-    &::before {
-      @include vos-disabled-layers(inherit);
-    }
-  }
-
-  &.danger {
-    color: var(--system-red);
-  }
-
-  &.primary {
-    &.platter::before, &:hover:not(:disabled)::before {
-      background: linear-gradient(var(--primary-color), var(--primary-color));
-      mix-blend-mode: normal;
-      opacity: 0.15;
-    }
-    &.selected,
-    &.active {
-      background: var(--primary-color);
-      color: #fff;
-    }
-  }
-}
-
-.vos-btn-symbol {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--label-primary);
-  font-family: var(--font-family);
-  font-weight: var(--btn-symbol-font-weight);
-  cursor: pointer;
-  overflow: clip;
-  border-radius: 500px;
-  padding: 0;
-  transition: background 0.15s ease, color 0.15s ease;
-
-  &.mini {
-    width: var(--btn-symbol-mini);
-    height: var(--btn-symbol-mini);
-    font-size: var(--btn-symbol-mini-font);
-    font-weight: var(--btn-font-weight);
-  }
-
-  &.sm {
-    width: var(--btn-symbol-sm);
-    height: var(--btn-symbol-sm);
-    font-size: var(--btn-symbol-sm-font);
-  }
-
-  &.reg {
-    width: var(--btn-symbol-reg);
-    height: var(--btn-symbol-reg);
-    font-size: var(--btn-symbol-reg-font);
-  }
-
-  &.lg {
-    width: var(--btn-symbol-lg);
-    height: var(--btn-symbol-lg);
-    font-size: var(--btn-symbol-lg-font);
-  }
-
-  &.xl {
-    width: var(--btn-symbol-xl);
-    height: var(--btn-symbol-xl);
-    font-size: var(--btn-symbol-xl-font);
-  }
-
-  &.platter::before {
-    @include vos-platter-layers(500px);
-  }
-
-  &:hover:not(:disabled):not(.selected):not(.active)::before {
-    @include vos-platter-layers(500px);
-  }
-
-  &.selected,
-  &.active {
-    background: var(--btn-selected-bg);
-    color: var(--btn-selected-text);
-
-    &::before { display: none; }
-  }
-
-  &:disabled, &.disabled {
-    cursor: default;
-    color: var(--btn-disabled-text);
-    pointer-events: none;
-
-    &::before {
-      @include vos-disabled-layers(500px);
-    }
-  }
-
-  &.danger {
-    &:hover:not(:disabled) {
-      background: rgba(255, 69, 58, 0.15);
-      color: var(--system-red);
-    }
-  }
-}
-
-.vos-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--link-height);
-  padding: 0 3px;
-  border: none;
-  background: transparent;
-  color: var(--link-color);
-  font-family: var(--font-family);
-  font-weight: var(--btn-font-weight);
-  font-size: var(--link-font-size);
-  cursor: pointer;
-  white-space: nowrap;
-  text-decoration: none;
-  border-radius: var(--btn-radius-capsule);
-  transition: background 0.15s ease;
-
-  &:hover {
-    background: rgba(60, 211, 254, 0.1);
-    border-radius: var(--btn-radius-rect-sm);
-  }
-}
+@use 'vos-button-mixins' as *;
+
+// ─── visionOS Button Utility Classes (shared with FlyOS desktop shell) ────────
+// Requires @use 'fly-theme' (or equivalent tokens) before this partial.
+
+.vos-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--label-primary);
+  font-family: var(--font-family);
+  font-weight: var(--btn-font-weight);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: clip;
+  padding: 0;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &.sm {
+    height: var(--btn-sm-height);
+    padding: var(--btn-sm-padding);
+    font-size: var(--btn-sm-font-size);
+    line-height: var(--btn-sm-line-height);
+    gap: var(--btn-sm-gap);
+    border-radius: var(--btn-radius-capsule);
+
+    i, .btn-symbol { font-size: var(--btn-sm-symbol-size); }
+  }
+
+  &.reg {
+    height: var(--btn-reg-height);
+    padding: var(--btn-reg-padding);
+    font-size: var(--btn-reg-font-size);
+    line-height: var(--btn-reg-line-height);
+    gap: var(--btn-reg-gap);
+    border-radius: var(--btn-radius-capsule);
+
+    i, .btn-symbol { font-size: var(--btn-reg-symbol-size); }
+  }
+
+  &.lg {
+    height: var(--btn-lg-height);
+    padding: var(--btn-lg-padding);
+    font-size: var(--btn-lg-font-size);
+    line-height: var(--btn-lg-line-height);
+    gap: var(--btn-lg-gap);
+    border-radius: var(--btn-radius-capsule);
+
+    i, .btn-symbol { font-size: var(--btn-lg-symbol-size); }
+  }
+
+  &.rect {
+    &.sm { border-radius: var(--btn-radius-rect-sm); }
+    &.reg { border-radius: var(--btn-radius-rect-sm); }
+    &.lg { border-radius: var(--btn-radius-rect-lg); }
+  }
+
+  &.platter::before {
+    @include vos-platter-layers(inherit);
+  }
+
+  &:hover:not(:disabled, .selected, .active)::before {
+    @include vos-platter-layers(inherit);
+  }
+
+  &.selected,
+  &.active {
+    background: var(--btn-selected-bg);
+    color: var(--btn-selected-text);
+
+    &::before { display: none; }
+  }
+
+  &:disabled, &.disabled {
+    cursor: default;
+    color: var(--btn-disabled-text);
+    pointer-events: none;
+
+    &::before {
+      @include vos-disabled-layers(inherit);
+    }
+  }
+
+  &.danger {
+    color: var(--system-red);
+  }
+
+  &.primary {
+    &.platter::before, &:hover:not(:disabled)::before {
+      background: linear-gradient(var(--primary-color), var(--primary-color));
+      mix-blend-mode: normal;
+      opacity: 0.15;
+    }
+
+    &.selected,
+    &.active {
+      background: var(--primary-color);
+      color: #fff;
+    }
+  }
+}
+
+.vos-btn-symbol {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--label-primary);
+  font-family: var(--font-family);
+  font-weight: var(--btn-symbol-font-weight);
+  cursor: pointer;
+  overflow: clip;
+  border-radius: 500px;
+  padding: 0;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &.mini {
+    width: var(--btn-symbol-mini);
+    height: var(--btn-symbol-mini);
+    font-size: var(--btn-symbol-mini-font);
+    font-weight: var(--btn-font-weight);
+  }
+
+  &.sm {
+    width: var(--btn-symbol-sm);
+    height: var(--btn-symbol-sm);
+    font-size: var(--btn-symbol-sm-font);
+  }
+
+  &.reg {
+    width: var(--btn-symbol-reg);
+    height: var(--btn-symbol-reg);
+    font-size: var(--btn-symbol-reg-font);
+  }
+
+  &.lg {
+    width: var(--btn-symbol-lg);
+    height: var(--btn-symbol-lg);
+    font-size: var(--btn-symbol-lg-font);
+  }
+
+  &.xl {
+    width: var(--btn-symbol-xl);
+    height: var(--btn-symbol-xl);
+    font-size: var(--btn-symbol-xl-font);
+  }
+
+  &.platter::before {
+    @include vos-platter-layers(500px);
+  }
+
+  &:hover:not(:disabled, .selected, .active)::before {
+    @include vos-platter-layers(500px);
+  }
+
+  &.selected,
+  &.active {
+    background: var(--btn-selected-bg);
+    color: var(--btn-selected-text);
+
+    &::before { display: none; }
+  }
+
+  &:disabled, &.disabled {
+    cursor: default;
+    color: var(--btn-disabled-text);
+    pointer-events: none;
+
+    &::before {
+      @include vos-disabled-layers(500px);
+    }
+  }
+
+  &.danger {
+    &:hover:not(:disabled) {
+      background: rgb(255 69 58 / 15%);
+      color: var(--system-red);
+    }
+  }
+}
+
+.vos-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--link-height);
+  padding: 0 3px;
+  border: none;
+  background: transparent;
+  color: var(--link-color);
+  font-family: var(--font-family);
+  font-weight: var(--btn-font-weight);
+  font-size: var(--link-font-size);
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  border-radius: var(--btn-radius-capsule);
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: rgb(60 211 254 / 10%);
+    border-radius: var(--btn-radius-rect-sm);
+  }
+}

package/scss/_theme-auto.scss

@@ -1,9 +1,10 @@
-@use 'theme-spatial-vars' as *;
-
-// ─── Automatic dark mode via OS preference (when user hasn't chosen) ─────────
-@media (prefers-color-scheme: dark) {
-  html:not(.light-theme):not(.spatial-theme):not(.dark-theme) {
-    color-scheme: dark;
-    @include spatial-theme-vars;
-  }
-}
+@use 'theme-spatial-vars' as *;
+
+// ─── Automatic dark mode via OS preference (when user hasn't chosen) ─────────
+@media (prefers-color-scheme: dark) {
+  html:not(.light-theme, .spatial-theme, .dark-theme) {
+    color-scheme: dark;
+
+    @include spatial-theme-vars;
+  }
+}

package/scss/_theme-dark-vars.scss

@@ -0,0 +1,50 @@
+// ─── Dark Theme Variables (shared mixin to avoid duplication) ────────────────
+@mixin dark-theme-vars {
+  --primary-light: rgb(232 115 42 / 18%);
+  --surface-ground: #0e0e10;
+  --surface-section: rgb(28 28 30 / 85%);
+  --surface-card: rgb(28 28 30 / 70%);
+  --surface-border: rgb(255 255 255 / 10%);
+  --surface-hover: rgb(255 255 255 / 8%);
+  --text-color: #f2f2f7;
+  --text-color-secondary: rgb(242 242 247 / 65%);
+  --glass-bg: rgb(25 25 28 / 72%);
+  --glass-bg-elevated: rgb(38 38 42 / 82%);
+  --glass-border: rgb(255 255 255 / 12%);
+  --glass-shadow: 0 8px 40px rgb(0 0 0 / 35%);
+  --glass-inner-glow: inset 0 1px 0 rgb(255 255 255 / 8%);
+  --window-bg: rgb(22 22 24 / 55%);
+  --window-radius: 46px;
+  --window-shadow: 0 24px 80px rgb(0 0 0 / 40%);
+  --window-border: rgb(255 255 255 / 12%);
+  --titlebar-bg: transparent;
+  --dock-bg: rgb(20 20 20 / 24%);
+  --dock-border: 1px solid rgb(255 255 255 / 8%);
+  --dock-blur: 40px;
+  --dock-shadow: 0 8px 32px rgb(0 0 0 / 60%),
+    inset 0 1px 0 rgb(255 255 255 / 5%);
+  --menubar-bg: rgb(14 14 16 / 60%);
+  --menubar-border: rgb(255 255 255 / 6%);
+  --menubar-text: rgb(242 242 247 / 100%);
+  --sidebar-bg: rgb(20 20 22 / 60%);
+  --sidebar-border: rgb(255 255 255 / 8%);
+  --focus-ring: rgb(232 115 42 / 60%);
+
+  // Opaque Business App surfaces (mirror light-theme semantic set for embeds).
+  --label-primary: var(--text-color);
+  --label-secondary: var(--text-color-secondary);
+  --label-tertiary: rgb(242 242 247 / 42%);
+  --separator-primary: rgb(255 255 255 / 14%);
+  --separator: var(--separator-primary);
+  --fill-secondary: rgb(255 255 255 / 10%);
+  --fill-tertiary: rgb(255 255 255 / 6%);
+  --material-glass: rgb(28 28 30 / 92%);
+  --fly-color-surface: rgb(28 28 30 / 95%);
+  --fly-color-surface-alt: rgb(38 38 42 / 90%);
+  --fly-color-border: rgb(255 255 255 / 12%);
+  --fly-color-text-muted: var(--text-color-secondary);
+  --fly-color-primary: var(--primary-color);
+  --fly-color-primary-hover: var(--primary-hover);
+  --fly-color-danger: var(--system-red);
+  --fly-shadow-md: 0 4px 16px rgb(0 0 0 / 35%);
+}