melabidi/Rental-operations-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init project

Browse Source
This commit is contained in:
root
2026-06-25 19:06:59 -04:00
parent c5dfee6efb
commit 5d017f533a
349 changed files with 31330 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contracts/phase9/tokens/TOKEN_USAGE_RULES_v1.0.md
+12
View File
@@ -0,0 +1,12 @@
# Token Usage Rules
1. Components consume semantic tokens such as `--color-text`, `--color-surface`, and `--color-action-conversion`. Raw palette values are allowed only in token declaration files, approved asset files, and documented data visualizations.
2. Orange is reserved for demo conversion and tightly related emphasis. Routine primary actions use the primary-action token.
3. White normal text may not use orange-600. Light conversion uses orange-700 with white; dark conversion uses orange-400 with dark text.
4. Spacing uses the 4 px scale. Optical exceptions require a comment and design approval.
5. Interactive targets are 44 × 44 px minimum unless the target is an inline text link with sufficient surrounding line height.
6. Use logical properties: `margin-inline`, `padding-block`, `inset-inline-start`, `border-inline-end`. Physical left/right properties fail review unless they describe an intrinsically physical asset.
7. Shadows are neutral. Colored glow is prohibited.
8. No global transition is applied during theme changes.
9. Text and surfaces must meet WCAG 2.2 AA in both themes. Focus indicators must remain visible in forced-colors mode.
10. Product screenshots are not recolored by tokens.
contracts/phase9/tokens/design-tokens_v1.0.json
+150
View File
@@ -0,0 +1,150 @@
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"version": "1.0",
"raw": {
"color": {
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bfdbfe",
"500": "#2874e8",
"600": "#1b5dd8",
"700": "#174bb5",
"800": "#183d88"
},
"orange": {
"100": "#ffedd5",
"400": "#fb923c",
"600": "#ea580c",
"700": "#c2410c"
},
"navy": {
"950": "#081426",
"900": "#0d1b2e",
"850": "#11233b",
"800": "#162b46"
},
"gray": {
"25": "#fbfdff",
"50": "#f7f9fc",
"100": "#eef2f7",
"200": "#dbe3ed",
"300": "#c6d0dc",
"500": "#64748b",
"600": "#475569",
"700": "#334155",
"800": "#1e293b",
"900": "#0f172a"
},
"green": {
"100": "#dcfce7",
"700": "#15803d"
},
"amber": {
"100": "#fef3c7",
"800": "#92400e"
},
"red": {
"100": "#fee2e2",
"700": "#b91c1c"
}
},
"space": {
"0": "0px",
"1": "4px",
"2": "8px",
"3": "12px",
"4": "16px",
"5": "20px",
"6": "24px",
"7": "28px",
"8": "32px",
"9": "36px",
"10": "40px",
"11": "44px",
"12": "48px",
"13": "52px",
"14": "56px",
"15": "60px",
"16": "64px",
"17": "68px",
"18": "72px",
"19": "76px",
"20": "80px",
"21": "84px",
"22": "88px",
"23": "92px",
"24": "96px"
},
"radius": {
"sm": "10px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"pill": "999px"
},
"size": {
"touch-min": "44px",
"container-max": "1280px"
},
"duration": {
"fast": "120ms",
"standard": "160ms",
"overlay": "220ms"
},
"easing": {
"standard": "ease",
"productive": "cubic-bezier(.2,0,0,1)"
},
"font": {
"latin": "Inter Variable, Inter, Arial, sans-serif",
"arabic": "Noto Sans Arabic, Arial, sans-serif"
},
"breakpoint": {
"medium": "768px",
"wide": "1120px"
}
},
"semantic": {
"light": {
"color.canvas": "{color.gray.25}",
"color.surface": "#ffffff",
"color.surface.raised": "#ffffff",
"color.surface.muted": "#f2f6fb",
"color.surface.strong": "#e8f0fa",
"color.text": "#102035",
"color.text.muted": "#52647a",
"color.border": "#d8e2ee",
"color.border.strong": "#bdcad9",
"color.action.primary": "{color.blue.700}",
"color.action.primary.hover": "{color.blue.800}",
"color.action.conversion": "{color.orange.700}",
"color.action.conversion.hover": "#9a3412",
"color.focus": "#f97316",
"color.on.inverse": "#f8fafc",
"color.soft.blue": "#eef5ff",
"color.soft.orange": "#fff7ed",
"shadow.color": "rgba(8,20,38,.12)"
},
"dark": {
"color.canvas": "{color.navy.950}",
"color.surface": "{color.navy.900}",
"color.surface.raised": "{color.navy.850}",
"color.surface.muted": "#0b1a2d",
"color.surface.strong": "#172d48",
"color.text": "#eef5ff",
"color.text.muted": "#adbed2",
"color.border": "#263c56",
"color.border.strong": "#3a536e",
"color.action.primary": "#76a9ff",
"color.action.primary.hover": "#9bc2ff",
"color.action.conversion": "{color.orange.400}",
"color.action.conversion.hover": "#fdba74",
"color.focus": "{color.orange.400}",
"color.on.inverse": "{color.navy.950}",
"color.soft.blue": "#10284a",
"color.soft.orange": "#3a2015",
"shadow.color": "rgba(0,0,0,.36)"
}
}
}
contracts/phase9/tokens/semantic-tokens_v1.0.css
+122
View File
@@ -0,0 +1,122 @@
:root {
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-200: #bfdbfe;
--color-blue-500: #2874e8;
--color-blue-600: #1b5dd8;
--color-blue-700: #174bb5;
--color-blue-800: #183d88;
--color-orange-100: #ffedd5;
--color-orange-400: #fb923c;
--color-orange-600: #ea580c;
--color-orange-700: #c2410c;
--color-navy-950: #081426;
--color-navy-900: #0d1b2e;
--color-navy-850: #11233b;
--color-navy-800: #162b46;
--color-gray-25: #fbfdff;
--color-gray-50: #f7f9fc;
--color-gray-100: #eef2f7;
--color-gray-200: #dbe3ed;
--color-gray-300: #c6d0dc;
--color-gray-500: #64748b;
--color-gray-600: #475569;
--color-gray-700: #334155;
--color-gray-800: #1e293b;
--color-gray-900: #0f172a;
--color-green-100: #dcfce7;
--color-green-700: #15803d;
--color-amber-100: #fef3c7;
--color-amber-800: #92400e;
--color-red-100: #fee2e2;
--color-red-700: #b91c1c;
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-13: 52px;
--space-14: 56px;
--space-15: 60px;
--space-16: 64px;
--space-17: 68px;
--space-18: 72px;
--space-19: 76px;
--space-20: 80px;
--space-21: 84px;
--space-22: 88px;
--space-23: 92px;
--space-24: 96px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-pill: 999px;
--size-touch-min: 44px;
--size-container-max: 1280px;
--duration-fast: 120ms;
--duration-standard: 160ms;
--duration-overlay: 220ms;
--easing-standard: ease;
--easing-productive: cubic-bezier(.2,0,0,1);
--font-latin: Inter Variable, Inter, Arial, sans-serif;
--font-arabic: Noto Sans Arabic, Arial, sans-serif;
--breakpoint-medium: 768px;
--breakpoint-wide: 1120px;
}
html[data-theme="light"] {
--color-canvas: var(--color-gray-25);
--color-surface: #ffffff;
--color-surface-raised: #ffffff;
--color-surface-muted: #f2f6fb;
--color-surface-strong: #e8f0fa;
--color-text: #102035;
--color-text-muted: #52647a;
--color-border: #d8e2ee;
--color-border-strong: #bdcad9;
--color-action-primary: var(--color-blue-700);
--color-action-primary-hover: var(--color-blue-800);
--color-action-conversion: var(--color-orange-700);
--color-action-conversion-hover: #9a3412;
--color-focus: #f97316;
--color-on-inverse: #f8fafc;
--color-soft-blue: #eef5ff;
--color-soft-orange: #fff7ed;
--shadow-color: rgba(8,20,38,.12);
color-scheme: light;
}
html[data-theme="dark"] {
--color-canvas: var(--color-navy-950);
--color-surface: var(--color-navy-900);
--color-surface-raised: var(--color-navy-850);
--color-surface-muted: #0b1a2d;
--color-surface-strong: #172d48;
--color-text: #eef5ff;
--color-text-muted: #adbed2;
--color-border: #263c56;
--color-border-strong: #3a536e;
--color-action-primary: #76a9ff;
--color-action-primary-hover: #9bc2ff;
--color-action-conversion: var(--color-orange-400);
--color-action-conversion-hover: #fdba74;
--color-focus: var(--color-orange-400);
--color-on-inverse: var(--color-navy-950);
--color-soft-blue: #10284a;
--color-soft-orange: #3a2015;
--shadow-color: rgba(0,0,0,.36);
color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
contracts/phase9/tokens/tokens_v1.0.ts
+6
View File
@@ -0,0 +1,6 @@
export const breakpoints = { medium: 768, wide: 1120 } as const;
export const themePreferences = ["light", "dark", "system"] as const;
export type ThemePreference = (typeof themePreferences)[number];
export type ResolvedTheme = Exclude<ThemePreference, "system">;
export const layout = { containerMaxPx: 1280, touchTargetMinPx: 44, spacingBasePx: 4 } as const;
export const motion = { fastMs: 120, standardMs: 160, overlayMs: 220 } as const;