@mohamedatia/fly-design-system 2.15.0 → 2.15.1

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 (10) hide show
  1. package/fesm2022/mohamedatia-fly-design-system.mjs +110 -110
  2. package/fesm2022/mohamedatia-fly-design-system.mjs.map +1 -1
  3. package/package.json +4 -1
  4. package/scss/_business-app-buttons.scss +213 -213
  5. package/scss/_fly-theme.scss +8 -8
  6. package/scss/_theme-auto.scss +6 -6
  7. package/scss/_theme-dark-vars.scss +49 -49
  8. package/scss/_theme-dark.scss +142 -142
  9. package/scss/_theme-light.scss +108 -108
  10. package/scss/_tokens.scss +115 -115
package/scss/_tokens.scss CHANGED
@@ -1,115 +1,115 @@
1
- // ─── visionOS System Colors & Design Tokens ─────────────────────────────────
2
- :root {
3
- --system-red: #FF453A;
4
- --system-orange: #FF9F0A;
5
- --system-yellow: #FFD60A;
6
- --system-green: #32D74B;
7
- --system-mint: #66D4CF;
8
- --system-teal: #6AC4DC;
9
- --system-cyan: #5AC8F5;
10
- --system-blue: #0A84FF;
11
- --system-indigo: #5E5CE6;
12
- --system-purple: #BF5AF2;
13
- --system-pink: #FF375F;
14
- --system-brown: #AC8E68;
15
- --system-gray: #98989D;
16
-
17
- // ── Semantic Status Colors ──
18
- --status-success: var(--system-green);
19
- --status-warning: var(--system-orange);
20
- --status-error: var(--system-red);
21
- --status-info: var(--system-blue);
22
- --status-pending: var(--system-yellow);
23
-
24
- // ── visionOS Typography ──
25
- --font-family: 'SF Pro Display', 'SF Pro', 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
26
- --font-xl-title1: 700 48px/56px var(--font-family);
27
- --font-xl-title2: 700 38px/46px var(--font-family);
28
- --font-large-title: 700 29px/38px var(--font-family);
29
- --font-title1: 700 24px/32px var(--font-family);
30
- --font-title2: 700 22px/28px var(--font-family);
31
- --font-title3: 700 19px/24px var(--font-family);
32
- --font-headline: 700 17px/22px var(--font-family);
33
- --font-body: 510 17px/22px var(--font-family);
34
- --font-callout: 590 15px/20px var(--font-family);
35
- --font-subheadline: 400 15px/20px var(--font-family);
36
- --font-footnote: 510 13px/18px var(--font-family);
37
- --font-caption1: 510 12px/16px var(--font-family);
38
- --font-caption2: 510 12px/16px var(--font-family);
39
-
40
- // ── visionOS Label Colors ──
41
- --label-primary: rgb(255 255 255 / 96%);
42
- --label-secondary: rgb(255 255 255 / 56%);
43
- --label-tertiary: rgb(255 255 255 / 36%);
44
-
45
- // ── visionOS Materials ──
46
- --material-glass: rgb(128 128 128 / 30%);
47
- --material-glass-blur: 50px;
48
- --material-glass-stroke: rgb(255 255 255 / 40%);
49
- --material-glass-specular: inset 0px -0.5px 1px rgb(255 255 255 / 30%),
50
- inset 0px -0.5px 1px rgb(255 255 255 / 25%),
51
- inset 1px 1.5px 4px rgb(0 0 0 / 8%),
52
- inset 1px 1.5px 4px rgb(0 0 0 / 10%);
53
- --material-recessed-bg: linear-gradient(rgb(208 208 208 / 50%), rgb(208 208 208 / 50%)),
54
- linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%));
55
- --material-recessed-shadow: inset 1px 1.5px 4px rgb(0 0 0 / 10%),
56
- inset 1px 1.5px 4px rgb(0 0 0 / 8%),
57
- inset 0px -0.5px 1px rgb(255 255 255 / 25%),
58
- inset 0px -0.5px 1px rgb(255 255 255 / 30%);
59
- --material-thin: rgb(255 255 255 / 6%);
60
- --material-regular: rgb(255 255 255 / 12%);
61
- --material-thick: rgb(255 255 255 / 20%);
62
- --control-idle: rgb(255 255 255 / 6%);
63
- --control-hover: rgb(255 255 255 / 12%);
64
- --control-selected: rgb(255 255 255 / 100%);
65
- --control-disabled: rgb(255 255 255 / 4%);
66
- --separator: rgb(255 255 255 / 12%);
67
- --blur-shadow-small: 0 2px 4px rgb(0 0 0 / 10%);
68
-
69
- // ── visionOS Button Tokens ──
70
- --btn-font-weight: 590;
71
- --btn-symbol-font-weight: 510;
72
- --btn-radius-capsule: 500px;
73
- --btn-radius-rect-lg: 16px;
74
- --btn-radius-rect-sm: 8px;
75
- --btn-sm-height: 32px;
76
- --btn-sm-padding: 0 12px;
77
- --btn-sm-font-size: 15px;
78
- --btn-sm-line-height: 20px;
79
- --btn-sm-symbol-size: 17px;
80
- --btn-sm-gap: 2px;
81
- --btn-reg-height: 44px;
82
- --btn-reg-padding: 0 20px;
83
- --btn-reg-font-size: 17px;
84
- --btn-reg-line-height: 22px;
85
- --btn-reg-symbol-size: 19px;
86
- --btn-reg-gap: 6px;
87
- --btn-lg-height: 52px;
88
- --btn-lg-padding: 0 25px;
89
- --btn-lg-font-size: 19px;
90
- --btn-lg-line-height: 24px;
91
- --btn-lg-symbol-size: 22px;
92
- --btn-lg-gap: 6px;
93
- --btn-symbol-mini: 28px;
94
- --btn-symbol-mini-font: 13px;
95
- --btn-symbol-sm: 36px;
96
- --btn-symbol-sm-font: 15px;
97
- --btn-symbol-reg: 44px;
98
- --btn-symbol-reg-font: 19px;
99
- --btn-symbol-lg: 52px;
100
- --btn-symbol-lg-font: 22px;
101
- --btn-symbol-xl: 60px;
102
- --btn-symbol-xl-font: 26px;
103
- --btn-platter-lighten: rgb(255 255 255 / 6%);
104
- --btn-platter-dodge: rgb(94 94 94 / 18%);
105
- --btn-hover-grad-white: rgb(255 255 255 / 7%);
106
- --btn-hover-grad-gray: rgb(94 94 94 / 14%);
107
- --btn-disabled-lighten: rgb(255 255 255 / 4%);
108
- --btn-disabled-dodge: rgb(94 94 94 / 7%);
109
- --btn-disabled-text: rgb(112 112 112 / 50%);
110
- --btn-selected-bg: rgb(255 255 255 / 96%);
111
- --btn-selected-text: #000;
112
- --link-color: #3CD3FE;
113
- --link-height: 26px;
114
- --link-font-size: 13px;
115
- }
1
+ // ─── visionOS System Colors & Design Tokens ─────────────────────────────────
2
+ :root {
3
+ --system-red: #FF453A;
4
+ --system-orange: #FF9F0A;
5
+ --system-yellow: #FFD60A;
6
+ --system-green: #32D74B;
7
+ --system-mint: #66D4CF;
8
+ --system-teal: #6AC4DC;
9
+ --system-cyan: #5AC8F5;
10
+ --system-blue: #0A84FF;
11
+ --system-indigo: #5E5CE6;
12
+ --system-purple: #BF5AF2;
13
+ --system-pink: #FF375F;
14
+ --system-brown: #AC8E68;
15
+ --system-gray: #98989D;
16
+
17
+ // ── Semantic Status Colors ──
18
+ --status-success: var(--system-green);
19
+ --status-warning: var(--system-orange);
20
+ --status-error: var(--system-red);
21
+ --status-info: var(--system-blue);
22
+ --status-pending: var(--system-yellow);
23
+
24
+ // ── visionOS Typography ──
25
+ --font-family: 'SF Pro Display', 'SF Pro', 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
26
+ --font-xl-title1: 700 48px/56px var(--font-family);
27
+ --font-xl-title2: 700 38px/46px var(--font-family);
28
+ --font-large-title: 700 29px/38px var(--font-family);
29
+ --font-title1: 700 24px/32px var(--font-family);
30
+ --font-title2: 700 22px/28px var(--font-family);
31
+ --font-title3: 700 19px/24px var(--font-family);
32
+ --font-headline: 700 17px/22px var(--font-family);
33
+ --font-body: 510 17px/22px var(--font-family);
34
+ --font-callout: 590 15px/20px var(--font-family);
35
+ --font-subheadline: 400 15px/20px var(--font-family);
36
+ --font-footnote: 510 13px/18px var(--font-family);
37
+ --font-caption1: 510 12px/16px var(--font-family);
38
+ --font-caption2: 510 12px/16px var(--font-family);
39
+
40
+ // ── visionOS Label Colors ──
41
+ --label-primary: rgb(255 255 255 / 96%);
42
+ --label-secondary: rgb(255 255 255 / 56%);
43
+ --label-tertiary: rgb(255 255 255 / 36%);
44
+
45
+ // ── visionOS Materials ──
46
+ --material-glass: rgb(128 128 128 / 30%);
47
+ --material-glass-blur: 50px;
48
+ --material-glass-stroke: rgb(255 255 255 / 40%);
49
+ --material-glass-specular: inset 0px -0.5px 1px rgb(255 255 255 / 30%),
50
+ inset 0px -0.5px 1px rgb(255 255 255 / 25%),
51
+ inset 1px 1.5px 4px rgb(0 0 0 / 8%),
52
+ inset 1px 1.5px 4px rgb(0 0 0 / 10%);
53
+ --material-recessed-bg: linear-gradient(rgb(208 208 208 / 50%), rgb(208 208 208 / 50%)),
54
+ linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%));
55
+ --material-recessed-shadow: inset 1px 1.5px 4px rgb(0 0 0 / 10%),
56
+ inset 1px 1.5px 4px rgb(0 0 0 / 8%),
57
+ inset 0px -0.5px 1px rgb(255 255 255 / 25%),
58
+ inset 0px -0.5px 1px rgb(255 255 255 / 30%);
59
+ --material-thin: rgb(255 255 255 / 6%);
60
+ --material-regular: rgb(255 255 255 / 12%);
61
+ --material-thick: rgb(255 255 255 / 20%);
62
+ --control-idle: rgb(255 255 255 / 6%);
63
+ --control-hover: rgb(255 255 255 / 12%);
64
+ --control-selected: rgb(255 255 255 / 100%);
65
+ --control-disabled: rgb(255 255 255 / 4%);
66
+ --separator: rgb(255 255 255 / 12%);
67
+ --blur-shadow-small: 0 2px 4px rgb(0 0 0 / 10%);
68
+
69
+ // ── visionOS Button Tokens ──
70
+ --btn-font-weight: 590;
71
+ --btn-symbol-font-weight: 510;
72
+ --btn-radius-capsule: 500px;
73
+ --btn-radius-rect-lg: 16px;
74
+ --btn-radius-rect-sm: 8px;
75
+ --btn-sm-height: 32px;
76
+ --btn-sm-padding: 0 12px;
77
+ --btn-sm-font-size: 15px;
78
+ --btn-sm-line-height: 20px;
79
+ --btn-sm-symbol-size: 17px;
80
+ --btn-sm-gap: 2px;
81
+ --btn-reg-height: 44px;
82
+ --btn-reg-padding: 0 20px;
83
+ --btn-reg-font-size: 17px;
84
+ --btn-reg-line-height: 22px;
85
+ --btn-reg-symbol-size: 19px;
86
+ --btn-reg-gap: 6px;
87
+ --btn-lg-height: 52px;
88
+ --btn-lg-padding: 0 25px;
89
+ --btn-lg-font-size: 19px;
90
+ --btn-lg-line-height: 24px;
91
+ --btn-lg-symbol-size: 22px;
92
+ --btn-lg-gap: 6px;
93
+ --btn-symbol-mini: 28px;
94
+ --btn-symbol-mini-font: 13px;
95
+ --btn-symbol-sm: 36px;
96
+ --btn-symbol-sm-font: 15px;
97
+ --btn-symbol-reg: 44px;
98
+ --btn-symbol-reg-font: 19px;
99
+ --btn-symbol-lg: 52px;
100
+ --btn-symbol-lg-font: 22px;
101
+ --btn-symbol-xl: 60px;
102
+ --btn-symbol-xl-font: 26px;
103
+ --btn-platter-lighten: rgb(255 255 255 / 6%);
104
+ --btn-platter-dodge: rgb(94 94 94 / 18%);
105
+ --btn-hover-grad-white: rgb(255 255 255 / 7%);
106
+ --btn-hover-grad-gray: rgb(94 94 94 / 14%);
107
+ --btn-disabled-lighten: rgb(255 255 255 / 4%);
108
+ --btn-disabled-dodge: rgb(94 94 94 / 7%);
109
+ --btn-disabled-text: rgb(112 112 112 / 50%);
110
+ --btn-selected-bg: rgb(255 255 255 / 96%);
111
+ --btn-selected-text: #000;
112
+ --link-color: #3CD3FE;
113
+ --link-height: 26px;
114
+ --link-font-size: 13px;
115
+ }