@mytechtoday/augment-extensions 1.3.0 → 1.3.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.
- package/LICENSE +22 -22
- package/augment-extensions/domain-rules/software-architecture/README.md +143 -143
- package/augment-extensions/domain-rules/software-architecture/examples/banking-layered.md +961 -961
- package/augment-extensions/domain-rules/software-architecture/examples/ecommerce-microservices.md +990 -990
- package/augment-extensions/domain-rules/software-architecture/examples/iot-eventdriven.md +882 -882
- package/augment-extensions/domain-rules/software-architecture/examples/monolith-to-microservices-migration.md +703 -703
- package/augment-extensions/domain-rules/software-architecture/examples/serverless-imageprocessing.md +957 -957
- package/augment-extensions/domain-rules/software-architecture/examples/trading-eventdriven.md +747 -747
- package/augment-extensions/domain-rules/software-architecture/module.json +119 -119
- package/augment-extensions/domain-rules/software-architecture/rules/challenges-solutions.md +763 -763
- package/augment-extensions/domain-rules/software-architecture/rules/definitions-terminology.md +409 -409
- package/augment-extensions/domain-rules/software-architecture/rules/design-principles.md +684 -684
- package/augment-extensions/domain-rules/software-architecture/rules/evaluation-testing.md +1381 -1381
- package/augment-extensions/domain-rules/software-architecture/rules/event-driven-architecture.md +616 -616
- package/augment-extensions/domain-rules/software-architecture/rules/fundamentals.md +306 -306
- package/augment-extensions/domain-rules/software-architecture/rules/industry-architectures.md +554 -554
- package/augment-extensions/domain-rules/software-architecture/rules/layered-architecture.md +776 -776
- package/augment-extensions/domain-rules/software-architecture/rules/microservices-architecture.md +503 -503
- package/augment-extensions/domain-rules/software-architecture/rules/modeling-documentation.md +1199 -1199
- package/augment-extensions/domain-rules/software-architecture/rules/monolithic-architecture.md +351 -351
- package/augment-extensions/domain-rules/software-architecture/rules/principles.md +556 -556
- package/augment-extensions/domain-rules/software-architecture/rules/quality-attributes.md +797 -797
- package/augment-extensions/domain-rules/software-architecture/rules/scalability-performance.md +1345 -1345
- package/augment-extensions/domain-rules/software-architecture/rules/security-architecture.md +1039 -1039
- package/augment-extensions/domain-rules/software-architecture/rules/serverless-architecture.md +711 -711
- package/augment-extensions/domain-rules/software-architecture/rules/skills-development.md +568 -568
- package/augment-extensions/domain-rules/software-architecture/rules/tools-methodologies.md +961 -961
- package/augment-extensions/visual-design/CHANGELOG.md +132 -132
- package/augment-extensions/visual-design/README.md +255 -255
- package/augment-extensions/visual-design/__tests__/README.md +119 -119
- package/augment-extensions/visual-design/__tests__/style-selector.test.ts +172 -172
- package/augment-extensions/visual-design/__tests__/vendor-styles.test.ts +214 -214
- package/augment-extensions/visual-design/domains/other/ai-prompt-helper.ts +157 -157
- package/augment-extensions/visual-design/domains/other/dotnet-application.ts +156 -156
- package/augment-extensions/visual-design/domains/other/linux-platform.ts +156 -156
- package/augment-extensions/visual-design/domains/other/mobile-application.ts +157 -157
- package/augment-extensions/visual-design/domains/other/motion-picture.ts +156 -156
- package/augment-extensions/visual-design/domains/other/os-application.ts +156 -156
- package/augment-extensions/visual-design/domains/other/print-campaigns.ts +158 -158
- package/augment-extensions/visual-design/domains/other/web-app.ts +157 -157
- package/augment-extensions/visual-design/domains/other/website.ts +161 -161
- package/augment-extensions/visual-design/domains/other/windows-platform.ts +156 -156
- package/augment-extensions/visual-design/domains/web-page-styles/amazon-cloudscape.ts +506 -506
- package/augment-extensions/visual-design/domains/web-page-styles/google-modern.ts +615 -615
- package/augment-extensions/visual-design/domains/web-page-styles/microsoft-fluent.ts +531 -531
- package/augment-extensions/visual-design/examples/README.md +97 -97
- package/augment-extensions/visual-design/examples/ai-prompt-generation.md +233 -233
- package/augment-extensions/visual-design/examples/basic-usage.md +216 -216
- package/augment-extensions/visual-design/examples/domain-workflows.md +257 -257
- package/augment-extensions/visual-design/examples/vendor-comparison.md +247 -247
- package/augment-extensions/visual-design/module.json +78 -78
- package/augment-extensions/visual-design/style-selector.ts +177 -177
- package/augment-extensions/visual-design/types.ts +302 -302
- package/augment-extensions/visual-design/visual-design-core.ts +469 -469
- package/augment-extensions/workflows/adr-support/README.md +227 -227
- package/augment-extensions/workflows/adr-support/__tests__/adr-validator.test.ts +203 -203
- package/augment-extensions/workflows/adr-support/adr-validator.ts +162 -162
- package/augment-extensions/workflows/adr-support/examples/complete-lifecycle-example.md +449 -449
- package/augment-extensions/workflows/adr-support/examples/integration-example.md +580 -580
- package/augment-extensions/workflows/adr-support/examples/superseding-example.md +436 -436
- package/augment-extensions/workflows/adr-support/module.json +112 -112
- package/augment-extensions/workflows/adr-support/rules/adr-creation.md +372 -372
- package/augment-extensions/workflows/adr-support/rules/beads-integration.md +443 -443
- package/augment-extensions/workflows/adr-support/rules/conflict-detection.md +486 -486
- package/augment-extensions/workflows/adr-support/rules/decision-detection.md +362 -362
- package/augment-extensions/workflows/adr-support/rules/lifecycle-management.md +427 -427
- package/augment-extensions/workflows/adr-support/rules/openspec-integration.md +465 -465
- package/augment-extensions/workflows/adr-support/rules/template-selection.md +405 -405
- package/augment-extensions/workflows/adr-support/rules/validation-rules.md +543 -543
- package/augment-extensions/workflows/adr-support/schemas/adr-config.json +191 -191
- package/augment-extensions/workflows/adr-support/schemas/adr-metadata.json +172 -172
- package/augment-extensions/workflows/adr-support/templates/business-case.md +235 -235
- package/augment-extensions/workflows/adr-support/templates/madr-elaborate.md +197 -197
- package/augment-extensions/workflows/adr-support/templates/madr-simple.md +68 -68
- package/augment-extensions/workflows/adr-support/templates/nygard.md +84 -84
- package/augment-extensions/writing-standards/screenplay/rules/file-organization.md +213 -213
- package/augment-extensions/writing-standards/screenplay/utils/__tests__/file-organization.test.ts +169 -169
- package/augment-extensions/writing-standards/screenplay/utils/file-organization.ts +165 -165
- package/cli/dist/utils/auto-sync.js +19 -19
- package/package.json +5 -3
- package/augment-extensions/workflows/openspec/README.md +0 -96
- package/augment-extensions/workflows/openspec/examples/complete-change-example.md +0 -244
- package/augment-extensions/workflows/openspec/module.json +0 -54
- package/augment-extensions/workflows/openspec/rules/best-practices.md +0 -272
- package/augment-extensions/workflows/openspec/rules/manual-setup.md +0 -231
- package/augment-extensions/workflows/openspec/rules/spec-format.md +0 -236
- package/augment-extensions/workflows/openspec/rules/workflow.md +0 -214
- package/cli/dist/utils/__tests__/adr-validator.example.d.ts +0 -6
- package/cli/dist/utils/__tests__/adr-validator.example.d.ts.map +0 -1
- package/cli/dist/utils/__tests__/adr-validator.example.js +0 -148
- package/cli/dist/utils/__tests__/adr-validator.example.js.map +0 -1
- package/cli/dist/utils/adr-validator.d.ts +0 -65
- package/cli/dist/utils/adr-validator.d.ts.map +0 -1
- package/cli/dist/utils/adr-validator.js +0 -203
- package/cli/dist/utils/adr-validator.js.map +0 -1
|
@@ -1,161 +1,161 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Website Domain Module
|
|
3
|
-
*
|
|
4
|
-
* Holistic multi-page site design patterns for traditional websites
|
|
5
|
-
* with navigation, content hierarchy, and information architecture.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
-
|
|
10
|
-
// ============================================================================
|
|
11
|
-
// Website Color Palette
|
|
12
|
-
// ============================================================================
|
|
13
|
-
|
|
14
|
-
const WEBSITE_COLORS: ColorPalette = {
|
|
15
|
-
primary: {
|
|
16
|
-
name: 'Brand Primary',
|
|
17
|
-
hex: '#2563EB',
|
|
18
|
-
rgb: { r: 37, g: 99, b: 235 },
|
|
19
|
-
hsl: { h: 221, s: 83, l: 53 },
|
|
20
|
-
variants: [
|
|
21
|
-
{ name: 'Primary Light', hex: '#60A5FA', usage: 'Hover states, accents' },
|
|
22
|
-
{ name: 'Primary Dark', hex: '#1E40AF', usage: 'Active states, emphasis' }
|
|
23
|
-
]
|
|
24
|
-
},
|
|
25
|
-
neutral: [
|
|
26
|
-
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
-
{ name: 'Gray 50', hex: '#F9FAFB', rgb: { r: 249, g: 250, b: 251 }, hsl: { h: 210, s: 20, l: 98 } },
|
|
28
|
-
{ name: 'Gray 100', hex: '#F3F4F6', rgb: { r: 243, g: 244, b: 246 }, hsl: { h: 220, s: 14, l: 96 } },
|
|
29
|
-
{ name: 'Gray 200', hex: '#E5E7EB', rgb: { r: 229, g: 231, b: 235 }, hsl: { h: 220, s: 13, l: 91 } },
|
|
30
|
-
{ name: 'Gray 800', hex: '#1F2937', rgb: { r: 31, g: 41, b: 55 }, hsl: { h: 215, s: 28, l: 17 } },
|
|
31
|
-
{ name: 'Gray 900', hex: '#111827', rgb: { r: 17, g: 24, b: 39 }, hsl: { h: 221, s: 39, l: 11 } }
|
|
32
|
-
],
|
|
33
|
-
semantic: {
|
|
34
|
-
success: { hex: '#10B981', usage: 'Success messages, confirmations' },
|
|
35
|
-
warning: { hex: '#F59E0B', usage: 'Warnings, cautions' },
|
|
36
|
-
error: { hex: '#EF4444', usage: 'Errors, destructive actions' },
|
|
37
|
-
info: { hex: '#3B82F6', usage: 'Information, tips' }
|
|
38
|
-
},
|
|
39
|
-
accessibility: {
|
|
40
|
-
minimumContrast: 4.5,
|
|
41
|
-
targetContrast: 7,
|
|
42
|
-
colorBlindSafe: true,
|
|
43
|
-
guidelines: [
|
|
44
|
-
'Ensure 4.5:1 contrast for body text',
|
|
45
|
-
'Ensure 3:1 contrast for large text (18pt+)',
|
|
46
|
-
'Never rely on color alone to convey information',
|
|
47
|
-
'Test with color blindness simulators'
|
|
48
|
-
]
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
// ============================================================================
|
|
53
|
-
// Website Typography
|
|
54
|
-
// ============================================================================
|
|
55
|
-
|
|
56
|
-
const WEBSITE_TYPOGRAPHY: TypographyRules = {
|
|
57
|
-
fontFamilies: {
|
|
58
|
-
primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
59
|
-
secondary: 'Georgia, "Times New Roman", serif',
|
|
60
|
-
monospace: '"Fira Code", "Courier New", monospace'
|
|
61
|
-
},
|
|
62
|
-
hierarchy: {
|
|
63
|
-
h1: { fontSize: '48px', fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.02em' },
|
|
64
|
-
h2: { fontSize: '36px', fontWeight: 700, lineHeight: 1.3, letterSpacing: '-0.01em' },
|
|
65
|
-
h3: { fontSize: '28px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
66
|
-
h4: { fontSize: '24px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
67
|
-
h5: { fontSize: '20px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
-
h6: { fontSize: '18px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
69
|
-
body: { fontSize: '16px', fontWeight: 400, lineHeight: 1.6, letterSpacing: '0' },
|
|
70
|
-
small: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
71
|
-
caption: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0.01em' }
|
|
72
|
-
},
|
|
73
|
-
scale: {
|
|
74
|
-
base: 16,
|
|
75
|
-
ratio: 1.25,
|
|
76
|
-
sizes: [12, 14, 16, 18, 20, 24, 28, 36, 48, 64]
|
|
77
|
-
},
|
|
78
|
-
guidelines: [
|
|
79
|
-
'Use system font stack for fast loading',
|
|
80
|
-
'Limit to 2-3 font families maximum',
|
|
81
|
-
'Maintain consistent line height (1.5-1.6 for body)',
|
|
82
|
-
'Use font-weight variations for hierarchy',
|
|
83
|
-
'Ensure minimum 16px for body text',
|
|
84
|
-
'Apply responsive typography with clamp()'
|
|
85
|
-
]
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// ============================================================================
|
|
89
|
-
// Website Layout System
|
|
90
|
-
// ============================================================================
|
|
91
|
-
|
|
92
|
-
const WEBSITE_LAYOUT: LayoutSystem = {
|
|
93
|
-
grid: {
|
|
94
|
-
columns: 12,
|
|
95
|
-
gutter: '24px',
|
|
96
|
-
margin: '24px',
|
|
97
|
-
breakpoints: {
|
|
98
|
-
mobile: '0-639px',
|
|
99
|
-
tablet: '640-1023px',
|
|
100
|
-
desktop: '1024-1279px',
|
|
101
|
-
wide: '1280px+'
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
spacing: {
|
|
105
|
-
unit: 8,
|
|
106
|
-
scale: [0, 8, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160],
|
|
107
|
-
guidelines: [
|
|
108
|
-
'Use 8px base unit for all spacing',
|
|
109
|
-
'Apply consistent spacing scale',
|
|
110
|
-
'Increase spacing for visual hierarchy',
|
|
111
|
-
'Maintain breathing room around sections'
|
|
112
|
-
]
|
|
113
|
-
},
|
|
114
|
-
containerWidths: {
|
|
115
|
-
mobile: '100%',
|
|
116
|
-
tablet: '768px',
|
|
117
|
-
desktop: '1024px',
|
|
118
|
-
wide: '1280px',
|
|
119
|
-
max: '1440px'
|
|
120
|
-
},
|
|
121
|
-
guidelines: [
|
|
122
|
-
'Use semantic HTML5 elements (header, nav, main, aside, footer)',
|
|
123
|
-
'Implement sticky navigation for easy access',
|
|
124
|
-
'Create clear visual hierarchy with spacing',
|
|
125
|
-
'Use grid for complex layouts, flexbox for components',
|
|
126
|
-
'Ensure mobile-first responsive design',
|
|
127
|
-
'Maintain consistent page structure across site'
|
|
128
|
-
]
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
// ============================================================================
|
|
132
|
-
// Website Domain Export
|
|
133
|
-
// ============================================================================
|
|
134
|
-
|
|
135
|
-
export const WEBSITE_DOMAIN: DomainStyle = {
|
|
136
|
-
domain: 'website',
|
|
137
|
-
characteristics: [
|
|
138
|
-
'Multi-page navigation structure',
|
|
139
|
-
'Clear information architecture',
|
|
140
|
-
'Consistent header and footer across pages',
|
|
141
|
-
'Breadcrumb navigation for deep content',
|
|
142
|
-
'Search functionality for content discovery',
|
|
143
|
-
'Responsive design for all devices',
|
|
144
|
-
'SEO-optimized structure and metadata',
|
|
145
|
-
'Accessible navigation and content',
|
|
146
|
-
'Fast page load times',
|
|
147
|
-
'Clear call-to-action placement'
|
|
148
|
-
],
|
|
149
|
-
colorScheme: WEBSITE_COLORS,
|
|
150
|
-
typography: WEBSITE_TYPOGRAPHY,
|
|
151
|
-
layout: WEBSITE_LAYOUT,
|
|
152
|
-
examples: [
|
|
153
|
-
'Corporate website with About, Services, Contact pages',
|
|
154
|
-
'Blog with article listing and individual post pages',
|
|
155
|
-
'Portfolio site with project gallery and case studies',
|
|
156
|
-
'E-commerce site with product catalog and checkout',
|
|
157
|
-
'Documentation site with sidebar navigation',
|
|
158
|
-
'Landing page with hero section and feature sections'
|
|
159
|
-
]
|
|
160
|
-
};
|
|
161
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Website Domain Module
|
|
3
|
+
*
|
|
4
|
+
* Holistic multi-page site design patterns for traditional websites
|
|
5
|
+
* with navigation, content hierarchy, and information architecture.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
+
|
|
10
|
+
// ============================================================================
|
|
11
|
+
// Website Color Palette
|
|
12
|
+
// ============================================================================
|
|
13
|
+
|
|
14
|
+
const WEBSITE_COLORS: ColorPalette = {
|
|
15
|
+
primary: {
|
|
16
|
+
name: 'Brand Primary',
|
|
17
|
+
hex: '#2563EB',
|
|
18
|
+
rgb: { r: 37, g: 99, b: 235 },
|
|
19
|
+
hsl: { h: 221, s: 83, l: 53 },
|
|
20
|
+
variants: [
|
|
21
|
+
{ name: 'Primary Light', hex: '#60A5FA', usage: 'Hover states, accents' },
|
|
22
|
+
{ name: 'Primary Dark', hex: '#1E40AF', usage: 'Active states, emphasis' }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
neutral: [
|
|
26
|
+
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
+
{ name: 'Gray 50', hex: '#F9FAFB', rgb: { r: 249, g: 250, b: 251 }, hsl: { h: 210, s: 20, l: 98 } },
|
|
28
|
+
{ name: 'Gray 100', hex: '#F3F4F6', rgb: { r: 243, g: 244, b: 246 }, hsl: { h: 220, s: 14, l: 96 } },
|
|
29
|
+
{ name: 'Gray 200', hex: '#E5E7EB', rgb: { r: 229, g: 231, b: 235 }, hsl: { h: 220, s: 13, l: 91 } },
|
|
30
|
+
{ name: 'Gray 800', hex: '#1F2937', rgb: { r: 31, g: 41, b: 55 }, hsl: { h: 215, s: 28, l: 17 } },
|
|
31
|
+
{ name: 'Gray 900', hex: '#111827', rgb: { r: 17, g: 24, b: 39 }, hsl: { h: 221, s: 39, l: 11 } }
|
|
32
|
+
],
|
|
33
|
+
semantic: {
|
|
34
|
+
success: { hex: '#10B981', usage: 'Success messages, confirmations' },
|
|
35
|
+
warning: { hex: '#F59E0B', usage: 'Warnings, cautions' },
|
|
36
|
+
error: { hex: '#EF4444', usage: 'Errors, destructive actions' },
|
|
37
|
+
info: { hex: '#3B82F6', usage: 'Information, tips' }
|
|
38
|
+
},
|
|
39
|
+
accessibility: {
|
|
40
|
+
minimumContrast: 4.5,
|
|
41
|
+
targetContrast: 7,
|
|
42
|
+
colorBlindSafe: true,
|
|
43
|
+
guidelines: [
|
|
44
|
+
'Ensure 4.5:1 contrast for body text',
|
|
45
|
+
'Ensure 3:1 contrast for large text (18pt+)',
|
|
46
|
+
'Never rely on color alone to convey information',
|
|
47
|
+
'Test with color blindness simulators'
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// ============================================================================
|
|
53
|
+
// Website Typography
|
|
54
|
+
// ============================================================================
|
|
55
|
+
|
|
56
|
+
const WEBSITE_TYPOGRAPHY: TypographyRules = {
|
|
57
|
+
fontFamilies: {
|
|
58
|
+
primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
59
|
+
secondary: 'Georgia, "Times New Roman", serif',
|
|
60
|
+
monospace: '"Fira Code", "Courier New", monospace'
|
|
61
|
+
},
|
|
62
|
+
hierarchy: {
|
|
63
|
+
h1: { fontSize: '48px', fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.02em' },
|
|
64
|
+
h2: { fontSize: '36px', fontWeight: 700, lineHeight: 1.3, letterSpacing: '-0.01em' },
|
|
65
|
+
h3: { fontSize: '28px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
66
|
+
h4: { fontSize: '24px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
67
|
+
h5: { fontSize: '20px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
+
h6: { fontSize: '18px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
69
|
+
body: { fontSize: '16px', fontWeight: 400, lineHeight: 1.6, letterSpacing: '0' },
|
|
70
|
+
small: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
71
|
+
caption: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0.01em' }
|
|
72
|
+
},
|
|
73
|
+
scale: {
|
|
74
|
+
base: 16,
|
|
75
|
+
ratio: 1.25,
|
|
76
|
+
sizes: [12, 14, 16, 18, 20, 24, 28, 36, 48, 64]
|
|
77
|
+
},
|
|
78
|
+
guidelines: [
|
|
79
|
+
'Use system font stack for fast loading',
|
|
80
|
+
'Limit to 2-3 font families maximum',
|
|
81
|
+
'Maintain consistent line height (1.5-1.6 for body)',
|
|
82
|
+
'Use font-weight variations for hierarchy',
|
|
83
|
+
'Ensure minimum 16px for body text',
|
|
84
|
+
'Apply responsive typography with clamp()'
|
|
85
|
+
]
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
// ============================================================================
|
|
89
|
+
// Website Layout System
|
|
90
|
+
// ============================================================================
|
|
91
|
+
|
|
92
|
+
const WEBSITE_LAYOUT: LayoutSystem = {
|
|
93
|
+
grid: {
|
|
94
|
+
columns: 12,
|
|
95
|
+
gutter: '24px',
|
|
96
|
+
margin: '24px',
|
|
97
|
+
breakpoints: {
|
|
98
|
+
mobile: '0-639px',
|
|
99
|
+
tablet: '640-1023px',
|
|
100
|
+
desktop: '1024-1279px',
|
|
101
|
+
wide: '1280px+'
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
spacing: {
|
|
105
|
+
unit: 8,
|
|
106
|
+
scale: [0, 8, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160],
|
|
107
|
+
guidelines: [
|
|
108
|
+
'Use 8px base unit for all spacing',
|
|
109
|
+
'Apply consistent spacing scale',
|
|
110
|
+
'Increase spacing for visual hierarchy',
|
|
111
|
+
'Maintain breathing room around sections'
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
containerWidths: {
|
|
115
|
+
mobile: '100%',
|
|
116
|
+
tablet: '768px',
|
|
117
|
+
desktop: '1024px',
|
|
118
|
+
wide: '1280px',
|
|
119
|
+
max: '1440px'
|
|
120
|
+
},
|
|
121
|
+
guidelines: [
|
|
122
|
+
'Use semantic HTML5 elements (header, nav, main, aside, footer)',
|
|
123
|
+
'Implement sticky navigation for easy access',
|
|
124
|
+
'Create clear visual hierarchy with spacing',
|
|
125
|
+
'Use grid for complex layouts, flexbox for components',
|
|
126
|
+
'Ensure mobile-first responsive design',
|
|
127
|
+
'Maintain consistent page structure across site'
|
|
128
|
+
]
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
// ============================================================================
|
|
132
|
+
// Website Domain Export
|
|
133
|
+
// ============================================================================
|
|
134
|
+
|
|
135
|
+
export const WEBSITE_DOMAIN: DomainStyle = {
|
|
136
|
+
domain: 'website',
|
|
137
|
+
characteristics: [
|
|
138
|
+
'Multi-page navigation structure',
|
|
139
|
+
'Clear information architecture',
|
|
140
|
+
'Consistent header and footer across pages',
|
|
141
|
+
'Breadcrumb navigation for deep content',
|
|
142
|
+
'Search functionality for content discovery',
|
|
143
|
+
'Responsive design for all devices',
|
|
144
|
+
'SEO-optimized structure and metadata',
|
|
145
|
+
'Accessible navigation and content',
|
|
146
|
+
'Fast page load times',
|
|
147
|
+
'Clear call-to-action placement'
|
|
148
|
+
],
|
|
149
|
+
colorScheme: WEBSITE_COLORS,
|
|
150
|
+
typography: WEBSITE_TYPOGRAPHY,
|
|
151
|
+
layout: WEBSITE_LAYOUT,
|
|
152
|
+
examples: [
|
|
153
|
+
'Corporate website with About, Services, Contact pages',
|
|
154
|
+
'Blog with article listing and individual post pages',
|
|
155
|
+
'Portfolio site with project gallery and case studies',
|
|
156
|
+
'E-commerce site with product catalog and checkout',
|
|
157
|
+
'Documentation site with sidebar navigation',
|
|
158
|
+
'Landing page with hero section and feature sections'
|
|
159
|
+
]
|
|
160
|
+
};
|
|
161
|
+
|
|
@@ -1,156 +1,156 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Windows Platform Domain Module
|
|
3
|
-
*
|
|
4
|
-
* Windows-specific application design patterns following
|
|
5
|
-
* Windows 11 design principles and WinUI 3 guidelines.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
-
|
|
10
|
-
// ============================================================================
|
|
11
|
-
// Windows Platform Color Palette
|
|
12
|
-
// ============================================================================
|
|
13
|
-
|
|
14
|
-
const WINDOWS_COLORS: ColorPalette = {
|
|
15
|
-
primary: {
|
|
16
|
-
name: 'System Accent',
|
|
17
|
-
hex: '#0078D4',
|
|
18
|
-
rgb: { r: 0, g: 120, b: 212 },
|
|
19
|
-
hsl: { h: 206, s: 100, l: 42 },
|
|
20
|
-
variants: [
|
|
21
|
-
{ name: 'Accent Light 1', hex: '#4A9EFF', usage: 'Hover states' },
|
|
22
|
-
{ name: 'Accent Dark 1', hex: '#005A9E', usage: 'Pressed states' }
|
|
23
|
-
]
|
|
24
|
-
},
|
|
25
|
-
neutral: [
|
|
26
|
-
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
-
{ name: 'Card Background', hex: '#F3F3F3', rgb: { r: 243, g: 243, b: 243 }, hsl: { h: 0, s: 0, l: 95 } },
|
|
28
|
-
{ name: 'Layer', hex: '#EBEBEB', rgb: { r: 235, g: 235, b: 235 }, hsl: { h: 0, s: 0, l: 92 } },
|
|
29
|
-
{ name: 'Text Primary', hex: '#000000', rgb: { r: 0, g: 0, b: 0 }, hsl: { h: 0, s: 0, l: 0 } },
|
|
30
|
-
{ name: 'Text Secondary', hex: '#605E5C', rgb: { r: 96, g: 94, b: 92 }, hsl: { h: 30, s: 2, l: 37 } }
|
|
31
|
-
],
|
|
32
|
-
semantic: {
|
|
33
|
-
success: { hex: '#107C10', usage: 'Success states' },
|
|
34
|
-
warning: { hex: '#FFB900', usage: 'Warnings, cautions' },
|
|
35
|
-
error: { hex: '#D13438', usage: 'Errors, critical actions' },
|
|
36
|
-
info: { hex: '#0078D4', usage: 'Information, tips' }
|
|
37
|
-
},
|
|
38
|
-
accessibility: {
|
|
39
|
-
minimumContrast: 4.5,
|
|
40
|
-
targetContrast: 7,
|
|
41
|
-
colorBlindSafe: true,
|
|
42
|
-
guidelines: [
|
|
43
|
-
'Use system accent color from Windows settings',
|
|
44
|
-
'Support Windows high contrast themes',
|
|
45
|
-
'Respect dark/light mode preference',
|
|
46
|
-
'Test with Windows Narrator'
|
|
47
|
-
]
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
// ============================================================================
|
|
52
|
-
// Windows Platform Typography
|
|
53
|
-
// ============================================================================
|
|
54
|
-
|
|
55
|
-
const WINDOWS_TYPOGRAPHY: TypographyRules = {
|
|
56
|
-
fontFamilies: {
|
|
57
|
-
primary: '"Segoe UI Variable", "Segoe UI", sans-serif',
|
|
58
|
-
secondary: 'system-ui, sans-serif',
|
|
59
|
-
monospace: '"Cascadia Code", "Consolas", monospace'
|
|
60
|
-
},
|
|
61
|
-
hierarchy: {
|
|
62
|
-
h1: { fontSize: '28px', fontWeight: 600, lineHeight: 1.3, letterSpacing: '0' },
|
|
63
|
-
h2: { fontSize: '20px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
64
|
-
h3: { fontSize: '16px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
65
|
-
h4: { fontSize: '14px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
66
|
-
h5: { fontSize: '12px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
67
|
-
h6: { fontSize: '11px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
-
body: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
69
|
-
small: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' },
|
|
70
|
-
caption: { fontSize: '11px', fontWeight: 400, lineHeight: 1.3, letterSpacing: '0' }
|
|
71
|
-
},
|
|
72
|
-
scale: {
|
|
73
|
-
base: 14,
|
|
74
|
-
ratio: 1.15,
|
|
75
|
-
sizes: [11, 12, 14, 16, 20, 28, 40]
|
|
76
|
-
},
|
|
77
|
-
guidelines: [
|
|
78
|
-
'Use Segoe UI Variable for Windows 11',
|
|
79
|
-
'Use Segoe UI for Windows 10',
|
|
80
|
-
'Follow Windows typography ramp',
|
|
81
|
-
'Support variable font weights',
|
|
82
|
-
'Ensure ClearType rendering'
|
|
83
|
-
]
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
// ============================================================================
|
|
87
|
-
// Windows Platform Layout System
|
|
88
|
-
// ============================================================================
|
|
89
|
-
|
|
90
|
-
const WINDOWS_LAYOUT: LayoutSystem = {
|
|
91
|
-
grid: {
|
|
92
|
-
columns: 12,
|
|
93
|
-
gutter: '12px',
|
|
94
|
-
margin: '12px',
|
|
95
|
-
breakpoints: {
|
|
96
|
-
compact: '0-639px',
|
|
97
|
-
medium: '640-1023px',
|
|
98
|
-
expanded: '1024px+'
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
spacing: {
|
|
102
|
-
unit: 4,
|
|
103
|
-
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
|
|
104
|
-
guidelines: [
|
|
105
|
-
'Use 4px base unit for spacing',
|
|
106
|
-
'Follow WinUI 3 spacing guidelines',
|
|
107
|
-
'Maintain 44x44px touch targets',
|
|
108
|
-
'Use consistent padding in controls'
|
|
109
|
-
]
|
|
110
|
-
},
|
|
111
|
-
containerWidths: {
|
|
112
|
-
compact: '100%',
|
|
113
|
-
medium: '100%',
|
|
114
|
-
expanded: '100%'
|
|
115
|
-
},
|
|
116
|
-
guidelines: [
|
|
117
|
-
'Use WinUI 3 controls and patterns',
|
|
118
|
-
'Implement title bar with window controls',
|
|
119
|
-
'Support Acrylic and Mica materials',
|
|
120
|
-
'Follow Windows 11 rounded corners (8px)',
|
|
121
|
-
'Implement proper focus visuals',
|
|
122
|
-
'Support snap layouts and window management'
|
|
123
|
-
]
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
// ============================================================================
|
|
127
|
-
// Windows Platform Domain Export
|
|
128
|
-
// ============================================================================
|
|
129
|
-
|
|
130
|
-
export const WINDOWS_PLATFORM_DOMAIN: DomainStyle = {
|
|
131
|
-
domain: 'windows-platform',
|
|
132
|
-
characteristics: [
|
|
133
|
-
'WinUI 3 controls and components',
|
|
134
|
-
'Acrylic and Mica background materials',
|
|
135
|
-
'Rounded corners (8px radius)',
|
|
136
|
-
'System accent color integration',
|
|
137
|
-
'Title bar with window controls',
|
|
138
|
-
'Fluent Design System principles',
|
|
139
|
-
'Reveal highlight on hover',
|
|
140
|
-
'Smooth animations and transitions',
|
|
141
|
-
'High DPI and touch support',
|
|
142
|
-
'Windows 11 snap layouts integration'
|
|
143
|
-
],
|
|
144
|
-
colorScheme: WINDOWS_COLORS,
|
|
145
|
-
typography: WINDOWS_TYPOGRAPHY,
|
|
146
|
-
layout: WINDOWS_LAYOUT,
|
|
147
|
-
examples: [
|
|
148
|
-
'Settings app with navigation view',
|
|
149
|
-
'File Explorer with ribbon interface',
|
|
150
|
-
'Calculator with number pad layout',
|
|
151
|
-
'Photos app with gallery view',
|
|
152
|
-
'Mail app with reading pane',
|
|
153
|
-
'Store app with product listings'
|
|
154
|
-
]
|
|
155
|
-
};
|
|
156
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Windows Platform Domain Module
|
|
3
|
+
*
|
|
4
|
+
* Windows-specific application design patterns following
|
|
5
|
+
* Windows 11 design principles and WinUI 3 guidelines.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { DomainStyle, ColorPalette, TypographyRules, LayoutSystem } from '../../types';
|
|
9
|
+
|
|
10
|
+
// ============================================================================
|
|
11
|
+
// Windows Platform Color Palette
|
|
12
|
+
// ============================================================================
|
|
13
|
+
|
|
14
|
+
const WINDOWS_COLORS: ColorPalette = {
|
|
15
|
+
primary: {
|
|
16
|
+
name: 'System Accent',
|
|
17
|
+
hex: '#0078D4',
|
|
18
|
+
rgb: { r: 0, g: 120, b: 212 },
|
|
19
|
+
hsl: { h: 206, s: 100, l: 42 },
|
|
20
|
+
variants: [
|
|
21
|
+
{ name: 'Accent Light 1', hex: '#4A9EFF', usage: 'Hover states' },
|
|
22
|
+
{ name: 'Accent Dark 1', hex: '#005A9E', usage: 'Pressed states' }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
neutral: [
|
|
26
|
+
{ name: 'White', hex: '#FFFFFF', rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 } },
|
|
27
|
+
{ name: 'Card Background', hex: '#F3F3F3', rgb: { r: 243, g: 243, b: 243 }, hsl: { h: 0, s: 0, l: 95 } },
|
|
28
|
+
{ name: 'Layer', hex: '#EBEBEB', rgb: { r: 235, g: 235, b: 235 }, hsl: { h: 0, s: 0, l: 92 } },
|
|
29
|
+
{ name: 'Text Primary', hex: '#000000', rgb: { r: 0, g: 0, b: 0 }, hsl: { h: 0, s: 0, l: 0 } },
|
|
30
|
+
{ name: 'Text Secondary', hex: '#605E5C', rgb: { r: 96, g: 94, b: 92 }, hsl: { h: 30, s: 2, l: 37 } }
|
|
31
|
+
],
|
|
32
|
+
semantic: {
|
|
33
|
+
success: { hex: '#107C10', usage: 'Success states' },
|
|
34
|
+
warning: { hex: '#FFB900', usage: 'Warnings, cautions' },
|
|
35
|
+
error: { hex: '#D13438', usage: 'Errors, critical actions' },
|
|
36
|
+
info: { hex: '#0078D4', usage: 'Information, tips' }
|
|
37
|
+
},
|
|
38
|
+
accessibility: {
|
|
39
|
+
minimumContrast: 4.5,
|
|
40
|
+
targetContrast: 7,
|
|
41
|
+
colorBlindSafe: true,
|
|
42
|
+
guidelines: [
|
|
43
|
+
'Use system accent color from Windows settings',
|
|
44
|
+
'Support Windows high contrast themes',
|
|
45
|
+
'Respect dark/light mode preference',
|
|
46
|
+
'Test with Windows Narrator'
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// ============================================================================
|
|
52
|
+
// Windows Platform Typography
|
|
53
|
+
// ============================================================================
|
|
54
|
+
|
|
55
|
+
const WINDOWS_TYPOGRAPHY: TypographyRules = {
|
|
56
|
+
fontFamilies: {
|
|
57
|
+
primary: '"Segoe UI Variable", "Segoe UI", sans-serif',
|
|
58
|
+
secondary: 'system-ui, sans-serif',
|
|
59
|
+
monospace: '"Cascadia Code", "Consolas", monospace'
|
|
60
|
+
},
|
|
61
|
+
hierarchy: {
|
|
62
|
+
h1: { fontSize: '28px', fontWeight: 600, lineHeight: 1.3, letterSpacing: '0' },
|
|
63
|
+
h2: { fontSize: '20px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
64
|
+
h3: { fontSize: '16px', fontWeight: 600, lineHeight: 1.4, letterSpacing: '0' },
|
|
65
|
+
h4: { fontSize: '14px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
66
|
+
h5: { fontSize: '12px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
67
|
+
h6: { fontSize: '11px', fontWeight: 600, lineHeight: 1.5, letterSpacing: '0' },
|
|
68
|
+
body: { fontSize: '14px', fontWeight: 400, lineHeight: 1.5, letterSpacing: '0' },
|
|
69
|
+
small: { fontSize: '12px', fontWeight: 400, lineHeight: 1.4, letterSpacing: '0' },
|
|
70
|
+
caption: { fontSize: '11px', fontWeight: 400, lineHeight: 1.3, letterSpacing: '0' }
|
|
71
|
+
},
|
|
72
|
+
scale: {
|
|
73
|
+
base: 14,
|
|
74
|
+
ratio: 1.15,
|
|
75
|
+
sizes: [11, 12, 14, 16, 20, 28, 40]
|
|
76
|
+
},
|
|
77
|
+
guidelines: [
|
|
78
|
+
'Use Segoe UI Variable for Windows 11',
|
|
79
|
+
'Use Segoe UI for Windows 10',
|
|
80
|
+
'Follow Windows typography ramp',
|
|
81
|
+
'Support variable font weights',
|
|
82
|
+
'Ensure ClearType rendering'
|
|
83
|
+
]
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// ============================================================================
|
|
87
|
+
// Windows Platform Layout System
|
|
88
|
+
// ============================================================================
|
|
89
|
+
|
|
90
|
+
const WINDOWS_LAYOUT: LayoutSystem = {
|
|
91
|
+
grid: {
|
|
92
|
+
columns: 12,
|
|
93
|
+
gutter: '12px',
|
|
94
|
+
margin: '12px',
|
|
95
|
+
breakpoints: {
|
|
96
|
+
compact: '0-639px',
|
|
97
|
+
medium: '640-1023px',
|
|
98
|
+
expanded: '1024px+'
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
spacing: {
|
|
102
|
+
unit: 4,
|
|
103
|
+
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
|
|
104
|
+
guidelines: [
|
|
105
|
+
'Use 4px base unit for spacing',
|
|
106
|
+
'Follow WinUI 3 spacing guidelines',
|
|
107
|
+
'Maintain 44x44px touch targets',
|
|
108
|
+
'Use consistent padding in controls'
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
containerWidths: {
|
|
112
|
+
compact: '100%',
|
|
113
|
+
medium: '100%',
|
|
114
|
+
expanded: '100%'
|
|
115
|
+
},
|
|
116
|
+
guidelines: [
|
|
117
|
+
'Use WinUI 3 controls and patterns',
|
|
118
|
+
'Implement title bar with window controls',
|
|
119
|
+
'Support Acrylic and Mica materials',
|
|
120
|
+
'Follow Windows 11 rounded corners (8px)',
|
|
121
|
+
'Implement proper focus visuals',
|
|
122
|
+
'Support snap layouts and window management'
|
|
123
|
+
]
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
// ============================================================================
|
|
127
|
+
// Windows Platform Domain Export
|
|
128
|
+
// ============================================================================
|
|
129
|
+
|
|
130
|
+
export const WINDOWS_PLATFORM_DOMAIN: DomainStyle = {
|
|
131
|
+
domain: 'windows-platform',
|
|
132
|
+
characteristics: [
|
|
133
|
+
'WinUI 3 controls and components',
|
|
134
|
+
'Acrylic and Mica background materials',
|
|
135
|
+
'Rounded corners (8px radius)',
|
|
136
|
+
'System accent color integration',
|
|
137
|
+
'Title bar with window controls',
|
|
138
|
+
'Fluent Design System principles',
|
|
139
|
+
'Reveal highlight on hover',
|
|
140
|
+
'Smooth animations and transitions',
|
|
141
|
+
'High DPI and touch support',
|
|
142
|
+
'Windows 11 snap layouts integration'
|
|
143
|
+
],
|
|
144
|
+
colorScheme: WINDOWS_COLORS,
|
|
145
|
+
typography: WINDOWS_TYPOGRAPHY,
|
|
146
|
+
layout: WINDOWS_LAYOUT,
|
|
147
|
+
examples: [
|
|
148
|
+
'Settings app with navigation view',
|
|
149
|
+
'File Explorer with ribbon interface',
|
|
150
|
+
'Calculator with number pad layout',
|
|
151
|
+
'Photos app with gallery view',
|
|
152
|
+
'Mail app with reading pane',
|
|
153
|
+
'Store app with product listings'
|
|
154
|
+
]
|
|
155
|
+
};
|
|
156
|
+
|