@cyberskill/design 1.1.1 → 1.3.8
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/DESIGN.md +28 -5
- package/README.md +23 -22
- package/SKILL.md +7 -7
- package/THIRD-PARTY-NOTICES.md +35 -0
- package/VERSION +1 -1
- package/_ds_bundle.js +1495 -1733
- package/_ds_manifest.json +1 -1
- package/_esm/cs.mjs +18 -4
- package/_esm/react.d.ts +2 -0
- package/_esm/react.mjs +7 -1
- package/_vendor/NOTICE.md +16 -0
- package/_vendor/babel/README.md +7 -0
- package/_vendor/babel/babel.min.js +4 -0
- package/_vendor/react/README.md +3 -0
- package/_vendor/react/react-dom.production.min.js +1 -0
- package/_vendor/react/react.production.min.js +1 -0
- package/assets/aurora-hoa.webp +0 -0
- package/assets/aurora-kim.webp +0 -0
- package/assets/aurora-moc.webp +0 -0
- package/assets/aurora-tho.webp +0 -0
- package/assets/aurora-thuy.webp +0 -0
- package/base/a11y.css +18 -0
- package/base/ai.css +9 -4
- package/base/collections.css +18 -7
- package/base/components.css +16 -4
- package/base/controls.css +116 -66
- package/base/data.css +4 -4
- package/base/feedback.css +14 -2
- package/base/forms.css +10 -4
- package/base/glass.css +7 -1
- package/base/interaction.css +6 -2
- package/base/navigation.css +9 -3
- package/base/reset.css +7 -1
- package/base/responsive.css +38 -12
- package/base/shell.css +15 -3
- package/components/_i18n/i18n.js +41 -4
- package/components/_i18n/strings.js +89 -22
- package/components/ai/ChatMessage.d.ts +2 -0
- package/components/ai/ChatMessage.jsx +8 -4
- package/components/ai/ConfidenceMeter.d.ts +2 -0
- package/components/ai/ConfidenceMeter.jsx +8 -6
- package/components/ai/HumanReviewGate.d.ts +2 -0
- package/components/ai/PromptInput.d.ts +2 -0
- package/components/ai/TypingIndicator.d.ts +2 -0
- package/components/ai/ai-conversation.card.html +3 -3
- package/components/ai/ai-lumi.card.html +3 -3
- package/components/ai/ai.card.html +3 -3
- package/components/brand/brand.card.html +3 -3
- package/components/button/buttons.card.html +3 -3
- package/components/data/Image.jsx +18 -2
- package/components/data/Sortable.d.ts +5 -1
- package/components/data/Sortable.jsx +42 -9
- package/components/data/Sortable.prompt.md +4 -2
- package/components/data/Terminal.jsx +3 -2
- package/components/data/Tooltip.d.ts +2 -0
- package/components/data/Tooltip.jsx +6 -3
- package/components/data/Tree.d.ts +2 -1
- package/components/data/Tree.jsx +137 -16
- package/components/data/Tree.prompt.md +1 -1
- package/components/data/Watermark.jsx +11 -3
- package/components/data/collections.card.html +3 -3
- package/components/data/data.card.html +3 -3
- package/components/datatable/DataGrid.jsx +10 -1
- package/components/datatable/DataTable.d.ts +24 -1
- package/components/datatable/DataTable.jsx +78 -5
- package/components/datatable/DataTable.prompt.md +2 -1
- package/components/datatable/datatable.card.html +20 -16
- package/components/dialog/Dialog.jsx +13 -45
- package/components/dialog/dialog.card.html +3 -3
- package/components/feedback/Alert.d.ts +2 -0
- package/components/feedback/Alert.jsx +8 -2
- package/components/feedback/EmptyState.d.ts +2 -0
- package/components/feedback/EmptyState.jsx +6 -3
- package/components/feedback/ProgressBar.d.ts +2 -0
- package/components/feedback/ProgressBar.jsx +9 -4
- package/components/feedback/Toast.jsx +15 -1
- package/components/feedback/Toast.prompt.md +2 -1
- package/components/feedback/feedback-2.card.html +3 -3
- package/components/feedback/feedback.card.html +3 -3
- package/components/forms/Cascader.jsx +76 -8
- package/components/forms/Editor.jsx +37 -2
- package/components/forms/FileUpload.d.ts +2 -0
- package/components/forms/FileUpload.jsx +22 -8
- package/components/forms/Form.d.ts +3 -1
- package/components/forms/Form.jsx +9 -1
- package/components/forms/Form.prompt.md +1 -1
- package/components/forms/Mentions.d.ts +1 -1
- package/components/forms/Mentions.jsx +59 -7
- package/components/forms/Mentions.prompt.md +3 -1
- package/components/forms/Rating.d.ts +3 -2
- package/components/forms/Rating.jsx +34 -3
- package/components/forms/Rating.prompt.md +1 -1
- package/components/forms/Select.d.ts +2 -0
- package/components/forms/Select.jsx +6 -2
- package/components/forms/Slider.d.ts +2 -0
- package/components/forms/Slider.jsx +5 -2
- package/components/forms/Switch.d.ts +2 -0
- package/components/forms/Switch.jsx +15 -3
- package/components/forms/TimePicker.jsx +3 -1
- package/components/forms/Toggle.d.ts +2 -0
- package/components/forms/Toggle.jsx +14 -2
- package/components/forms/forms-2.card.html +3 -3
- package/components/forms/forms.card.html +3 -3
- package/components/icon/Icon.d.ts +1 -1
- package/components/icon/Icon.jsx +1 -0
- package/components/icon/Icon.prompt.md +1 -1
- package/components/icon/icon.card.html +3 -3
- package/components/logo/logo.card.html +3 -3
- package/components/navigation/CommandPalette.d.ts +2 -0
- package/components/navigation/CommandPalette.jsx +22 -7
- package/components/navigation/Menu.d.ts +2 -0
- package/components/navigation/Menu.jsx +60 -6
- package/components/navigation/Steps.d.ts +2 -0
- package/components/navigation/Steps.jsx +6 -3
- package/components/navigation/Tabs.d.ts +2 -0
- package/components/navigation/Tabs.jsx +6 -3
- package/components/navigation/Toolbar.d.ts +3 -2
- package/components/navigation/Toolbar.jsx +119 -12
- package/components/navigation/Toolbar.prompt.md +1 -1
- package/components/navigation/navigation.card.html +3 -3
- package/components/navigation/shell.card.html +3 -3
- package/components/overlays/AlertDialog.jsx +19 -49
- package/components/overlays/ContextMenu.d.ts +2 -0
- package/components/overlays/ContextMenu.jsx +6 -3
- package/components/overlays/Drawer.d.ts +2 -0
- package/components/overlays/Drawer.jsx +24 -20
- package/components/overlays/OverlayManager.d.ts +40 -0
- package/components/overlays/OverlayManager.jsx +214 -0
- package/components/overlays/OverlayManager.prompt.md +12 -0
- package/components/overlays/Tour.jsx +14 -7
- package/components/overlays/alertdialog.card.html +3 -3
- package/components/overlays/overlays.card.html +3 -3
- package/components/textfield/textfield.card.html +3 -3
- package/dist/styles.min.css +2252 -0
- package/docs/benchmark-rubric.md +1 -1
- package/docs/ci-cd.md +19 -12
- package/docs/consumer-grant.md +3 -0
- package/docs/consuming.md +13 -13
- package/docs/contrast-report.md +79 -1
- package/docs/conventions.md +21 -8
- package/docs/decisions.md +45 -7
- package/docs/deploy.md +17 -6
- package/docs/design-styles.md +2 -2
- package/docs/quality-gates.md +35 -15
- package/docs/release-notes.md +2 -2
- package/docs/release-runbook.md +78 -0
- package/docs/sync.md +2 -2
- package/docs/vi/benchmark-rubric.md +1 -1
- package/docs/vi/ci-cd.md +17 -12
- package/docs/vi/consumer-grant.md +3 -0
- package/docs/vi/consuming.md +13 -13
- package/docs/vi/contrast-report.md +79 -1
- package/docs/vi/conventions.md +20 -7
- package/docs/vi/decisions.md +43 -6
- package/docs/vi/deploy.md +17 -6
- package/docs/vi/quality-gates.md +34 -15
- package/docs/vi/release-notes.md +2 -2
- package/docs/vi/release-runbook.md +78 -0
- package/docs/vi/sync.md +2 -2
- package/docs/viewer.html +2 -2
- package/fonts/OFL.txt +98 -0
- package/guidelines/atomic-view.html +13 -9
- package/guidelines/brand-imagery.html +1 -1
- package/guidelines/elements-variants.html +5 -5
- package/guidelines/spacing-breakpoints.html +2 -1
- package/guidelines/surfaces-glass.html +1 -1
- package/llms.txt +5 -5
- package/package.json +38 -10
- package/templates/_ds-base.canonical.js +55 -0
- package/templates/ai-cluster-demo.html +2 -2
- package/templates/app-shell/AppShell.dc.html +7 -5
- package/templates/app-shell/content-schema.json +7 -0
- package/templates/app-shell/ds-base.js +33 -1
- package/templates/app-shell/support.js +13 -20
- package/templates/article/Article.dc.html +7 -3
- package/templates/article/content-schema.json +7 -0
- package/templates/article/ds-base.js +33 -1
- package/templates/article/support.js +13 -20
- package/templates/auth/Auth.dc.html +33 -12
- package/templates/auth/content-schema.json +37 -0
- package/templates/auth/ds-base.js +33 -1
- package/templates/auth/support.js +13 -20
- package/templates/bod-deck/BodDeck.dc.html +11 -10
- package/templates/bod-deck/ds-base.js +33 -1
- package/templates/bod-deck/support.js +13 -20
- package/templates/bod-investor-update/BodInvestorUpdate.dc.html +4 -3
- package/templates/bod-investor-update/ds-base.js +33 -1
- package/templates/bod-investor-update/support.js +13 -20
- package/templates/bod-memo/BodMemo.dc.html +6 -5
- package/templates/bod-memo/ds-base.js +33 -1
- package/templates/bod-memo/support.js +13 -20
- package/templates/bod-minutes/BodMinutes.dc.html +2 -1
- package/templates/bod-minutes/ds-base.js +33 -1
- package/templates/bod-minutes/support.js +13 -20
- package/templates/bod-report/BodReport.dc.html +3 -2
- package/templates/bod-report/ds-base.js +33 -1
- package/templates/bod-report/support.js +13 -20
- package/templates/bod-resolution/BodResolution.dc.html +5 -4
- package/templates/bod-resolution/ds-base.js +33 -1
- package/templates/bod-resolution/support.js +13 -20
- package/templates/culture-event-invite/CultureEventInvite.dc.html +3 -2
- package/templates/culture-event-invite/ds-base.js +33 -1
- package/templates/culture-event-invite/support.js +13 -20
- package/templates/dashboard/Dashboard.dc.html +10 -6
- package/templates/dashboard/content-schema.json +7 -0
- package/templates/dashboard/ds-base.js +33 -1
- package/templates/dashboard/support.js +13 -20
- package/templates/delivery-change-note/DeliveryChangeNote.dc.html +4 -3
- package/templates/delivery-change-note/ds-base.js +33 -1
- package/templates/delivery-change-note/support.js +13 -20
- package/templates/delivery-kickoff/DeliveryKickoff.dc.html +3 -2
- package/templates/delivery-kickoff/ds-base.js +33 -1
- package/templates/delivery-kickoff/support.js +13 -20
- package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +6 -5
- package/templates/delivery-qbr-deck/ds-base.js +33 -1
- package/templates/delivery-qbr-deck/support.js +13 -20
- package/templates/delivery-runbook/DeliveryRunbook.dc.html +5 -4
- package/templates/delivery-runbook/ds-base.js +33 -1
- package/templates/delivery-runbook/support.js +13 -20
- package/templates/delivery-status-email/DeliveryStatusEmail.dc.html +3 -2
- package/templates/delivery-status-email/ds-base.js +33 -1
- package/templates/delivery-status-email/support.js +13 -20
- package/templates/doc-style-guide/DocStyleGuide.dc.html +67 -64
- package/templates/doc-style-guide/ds-base.js +33 -1
- package/templates/doc-style-guide/support.js +13 -20
- package/templates/doc-suite-index/DocSuiteIndex.dc.html +46 -45
- package/templates/doc-suite-index/ds-base.js +33 -1
- package/templates/doc-suite-index/support.js +13 -20
- package/templates/doc-templates/DocTemplates.dc.html +42 -41
- package/templates/doc-templates/ds-base.js +33 -1
- package/templates/doc-templates/support.js +13 -20
- package/templates/email/Email.dc.html +3 -2
- package/templates/email/ds-base.js +33 -1
- package/templates/email/support.js +13 -20
- package/templates/email-safe/email-announcement.html +2 -2
- package/templates/email-safe/email-dunning.html +2 -2
- package/templates/email-safe/email-investor.html +2 -2
- package/templates/email-safe/email-launch.html +2 -2
- package/templates/email-safe/email-newsletter.html +2 -2
- package/templates/email-safe/email-status.html +2 -2
- package/templates/email-safe/email-transactional.html +2 -2
- package/templates/finance-dunning-email/FinanceDunningEmail.dc.html +6 -5
- package/templates/finance-dunning-email/ds-base.js +33 -1
- package/templates/finance-dunning-email/support.js +13 -20
- package/templates/finance-expense-report/FinanceExpenseReport.dc.html +4 -3
- package/templates/finance-expense-report/ds-base.js +33 -1
- package/templates/finance-expense-report/support.js +13 -20
- package/templates/finance-invoice/FinanceInvoice.dc.html +6 -5
- package/templates/finance-invoice/ds-base.js +33 -1
- package/templates/finance-invoice/support.js +13 -20
- package/templates/finance-quote/FinanceQuote.dc.html +6 -5
- package/templates/finance-quote/ds-base.js +33 -1
- package/templates/finance-quote/support.js +13 -20
- package/templates/hr-announcement/HrAnnouncement.dc.html +5 -4
- package/templates/hr-announcement/ds-base.js +33 -1
- package/templates/hr-announcement/support.js +13 -20
- package/templates/hr-interview-kit/HrInterviewKit.dc.html +5 -4
- package/templates/hr-interview-kit/ds-base.js +33 -1
- package/templates/hr-interview-kit/support.js +13 -20
- package/templates/hr-offboarding/HrOffboarding.dc.html +2 -1
- package/templates/hr-offboarding/ds-base.js +33 -1
- package/templates/hr-offboarding/support.js +13 -20
- package/templates/hr-performance-review/HrPerformanceReview.dc.html +2 -1
- package/templates/hr-performance-review/ds-base.js +33 -1
- package/templates/hr-performance-review/support.js +13 -20
- package/templates/hr-pip/HrPip.dc.html +2 -1
- package/templates/hr-pip/ds-base.js +33 -1
- package/templates/hr-pip/support.js +13 -20
- package/templates/kitchen-sink.html +9 -4
- package/templates/legal-msa/LegalMsa.dc.html +2 -1
- package/templates/legal-msa/ds-base.js +33 -1
- package/templates/legal-msa/support.js +13 -20
- package/templates/legal-sow/LegalSow.dc.html +2 -1
- package/templates/legal-sow/ds-base.js +33 -1
- package/templates/legal-sow/support.js +13 -20
- package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +3 -2
- package/templates/marketing-campaign-brief/ds-base.js +33 -1
- package/templates/marketing-campaign-brief/support.js +13 -20
- package/templates/marketing-case-study/MarketingCaseStudy.dc.html +6 -5
- package/templates/marketing-case-study/ds-base.js +33 -1
- package/templates/marketing-case-study/support.js +13 -20
- package/templates/marketing-launch/MarketingLaunch.dc.html +6 -5
- package/templates/marketing-launch/ds-base.js +33 -1
- package/templates/marketing-launch/support.js +13 -20
- package/templates/marketing-newsletter/MarketingNewsletter.dc.html +13 -12
- package/templates/marketing-newsletter/ds-base.js +33 -1
- package/templates/marketing-newsletter/support.js +13 -20
- package/templates/marketing-page/MarketingPage.dc.html +19 -14
- package/templates/marketing-page/content-schema.json +1 -0
- package/templates/marketing-page/ds-base.js +33 -1
- package/templates/marketing-page/support.js +13 -20
- package/templates/marketing-press-release/MarketingPressRelease.dc.html +2 -1
- package/templates/marketing-press-release/ds-base.js +33 -1
- package/templates/marketing-press-release/support.js +13 -20
- package/templates/marketing-social-kit/MarketingSocialKit.dc.html +5 -4
- package/templates/marketing-social-kit/ds-base.js +33 -1
- package/templates/marketing-social-kit/support.js +13 -20
- package/templates/sales-one-pager/SalesOnePager.dc.html +5 -4
- package/templates/sales-one-pager/ds-base.js +33 -1
- package/templates/sales-one-pager/support.js +13 -20
- package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +7 -6
- package/templates/sales-proposal-deck/ds-base.js +33 -1
- package/templates/sales-proposal-deck/support.js +13 -20
- package/templates/settings/Settings.dc.html +7 -3
- package/templates/settings/content-schema.json +7 -0
- package/templates/settings/ds-base.js +33 -1
- package/templates/settings/support.js +13 -20
- package/templates/slide-deck/SlideDeck.dc.html +5 -4
- package/templates/slide-deck/ds-base.js +33 -1
- package/templates/slide-deck/support.js +13 -20
- package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +2 -1
- package/templates/team-meeting-agenda/ds-base.js +33 -1
- package/templates/team-meeting-agenda/support.js +13 -20
- package/templates/tech-incident-report/TechIncidentReport.dc.html +3 -2
- package/templates/tech-incident-report/ds-base.js +33 -1
- package/templates/tech-incident-report/support.js +13 -20
- package/templates/tech-release-notes/TechReleaseNotes.dc.html +6 -5
- package/templates/tech-release-notes/ds-base.js +33 -1
- package/templates/tech-release-notes/support.js +13 -20
- package/templates/tech-retro/TechRetro.dc.html +4 -3
- package/templates/tech-retro/ds-base.js +33 -1
- package/templates/tech-retro/support.js +13 -20
- package/templates/tech-rfc/TechRfc.dc.html +3 -2
- package/templates/tech-rfc/ds-base.js +33 -1
- package/templates/tech-rfc/support.js +13 -20
- package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +36 -35
- package/templates/vn-appointment-transfer/ds-base.js +33 -1
- package/templates/vn-appointment-transfer/support.js +13 -20
- package/templates/vn-certificate-of-employment/VnCertificateOfEmployment.dc.html +27 -26
- package/templates/vn-certificate-of-employment/ds-base.js +33 -1
- package/templates/vn-certificate-of-employment/support.js +13 -20
- package/templates/vn-code-of-conduct/VnCodeOfConduct.dc.html +44 -43
- package/templates/vn-code-of-conduct/ds-base.js +33 -1
- package/templates/vn-code-of-conduct/support.js +13 -20
- package/templates/vn-compensation-regulation/VnCompensationRegulation.dc.html +53 -52
- package/templates/vn-compensation-regulation/ds-base.js +33 -1
- package/templates/vn-compensation-regulation/support.js +13 -20
- package/templates/vn-contract-amendment/VnContractAmendment.dc.html +41 -40
- package/templates/vn-contract-amendment/ds-base.js +33 -1
- package/templates/vn-contract-amendment/support.js +13 -20
- package/templates/vn-contractor-agreement/VnContractorAgreement.dc.html +50 -49
- package/templates/vn-contractor-agreement/ds-base.js +33 -1
- package/templates/vn-contractor-agreement/support.js +13 -20
- package/templates/vn-data-protection-policy/VnDataProtectionPolicy.dc.html +54 -53
- package/templates/vn-data-protection-policy/ds-base.js +33 -1
- package/templates/vn-data-protection-policy/support.js +13 -20
- package/templates/vn-disciplinary-case-file/VnDisciplinaryCaseFile.dc.html +72 -71
- package/templates/vn-disciplinary-case-file/ds-base.js +33 -1
- package/templates/vn-disciplinary-case-file/support.js +13 -20
- package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +21 -20
- package/templates/vn-disciplinary-schedule/ds-base.js +33 -1
- package/templates/vn-disciplinary-schedule/support.js +13 -20
- package/templates/vn-employee-request/VnEmployeeRequest.dc.html +54 -53
- package/templates/vn-employee-request/ds-base.js +33 -1
- package/templates/vn-employee-request/support.js +13 -20
- package/templates/vn-exit-handover/VnExitHandover.dc.html +122 -121
- package/templates/vn-exit-handover/ds-base.js +33 -1
- package/templates/vn-exit-handover/support.js +13 -20
- package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +31 -30
- package/templates/vn-foreign-employee-pack/ds-base.js +33 -1
- package/templates/vn-foreign-employee-pack/support.js +13 -20
- package/templates/vn-grassroots-democracy/VnGrassrootsDemocracy.dc.html +54 -53
- package/templates/vn-grassroots-democracy/ds-base.js +33 -1
- package/templates/vn-grassroots-democracy/support.js +13 -20
- package/templates/vn-infosec-policy/VnInfosecPolicy.dc.html +50 -49
- package/templates/vn-infosec-policy/ds-base.js +33 -1
- package/templates/vn-infosec-policy/support.js +13 -20
- package/templates/vn-internal-labor-regulations/VnInternalLaborRegulations.dc.html +84 -83
- package/templates/vn-internal-labor-regulations/ds-base.js +33 -1
- package/templates/vn-internal-labor-regulations/support.js +13 -20
- package/templates/vn-internship-agreement/VnInternshipAgreement.dc.html +44 -43
- package/templates/vn-internship-agreement/ds-base.js +33 -1
- package/templates/vn-internship-agreement/support.js +13 -20
- package/templates/vn-job-description/VnJobDescription.dc.html +28 -27
- package/templates/vn-job-description/ds-base.js +33 -1
- package/templates/vn-job-description/support.js +13 -20
- package/templates/vn-labor-contract/VnLaborContract.dc.html +109 -108
- package/templates/vn-labor-contract/ds-base.js +33 -1
- package/templates/vn-labor-contract/support.js +13 -20
- package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +32 -31
- package/templates/vn-labour-management-book/ds-base.js +33 -1
- package/templates/vn-labour-management-book/support.js +13 -20
- package/templates/vn-mutual-nda/VnMutualNda.dc.html +45 -44
- package/templates/vn-mutual-nda/ds-base.js +33 -1
- package/templates/vn-mutual-nda/support.js +13 -20
- package/templates/vn-ndnca-ip/VnNdncaIp.dc.html +73 -72
- package/templates/vn-ndnca-ip/ds-base.js +33 -1
- package/templates/vn-ndnca-ip/support.js +13 -20
- package/templates/vn-offer-letter/VnOfferLetter.dc.html +32 -31
- package/templates/vn-offer-letter/ds-base.js +33 -1
- package/templates/vn-offer-letter/support.js +13 -20
- package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +16 -15
- package/templates/vn-onboarding-checklist/ds-base.js +33 -1
- package/templates/vn-onboarding-checklist/support.js +13 -20
- package/templates/vn-pdpl-consent/VnPdplConsent.dc.html +43 -42
- package/templates/vn-pdpl-consent/ds-base.js +33 -1
- package/templates/vn-pdpl-consent/support.js +13 -20
- package/templates/vn-performance-evaluation-regulation/VnPerformanceEvaluationRegulation.dc.html +65 -64
- package/templates/vn-performance-evaluation-regulation/ds-base.js +33 -1
- package/templates/vn-performance-evaluation-regulation/support.js +13 -20
- package/templates/vn-performance-review-form/VnPerformanceReviewForm.dc.html +49 -48
- package/templates/vn-performance-review-form/ds-base.js +33 -1
- package/templates/vn-performance-review-form/support.js +13 -20
- package/templates/vn-phantom-stock/VnPhantomStock.dc.html +41 -40
- package/templates/vn-phantom-stock/ds-base.js +33 -1
- package/templates/vn-phantom-stock/support.js +13 -20
- package/templates/vn-probation-contract/VnProbationContract.dc.html +56 -55
- package/templates/vn-probation-contract/ds-base.js +33 -1
- package/templates/vn-probation-contract/support.js +13 -20
- package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +28 -27
- package/templates/vn-receipt-acknowledgement/ds-base.js +33 -1
- package/templates/vn-receipt-acknowledgement/support.js +13 -20
- package/templates/vn-remote-work-policy/VnRemoteWorkPolicy.dc.html +44 -43
- package/templates/vn-remote-work-policy/ds-base.js +33 -1
- package/templates/vn-remote-work-policy/support.js +13 -20
- package/templates/vn-resignation-letter/VnResignationLetter.dc.html +20 -19
- package/templates/vn-resignation-letter/ds-base.js +33 -1
- package/templates/vn-resignation-letter/support.js +13 -20
- package/templates/vn-salary-scale/VnSalaryScale.dc.html +39 -38
- package/templates/vn-salary-scale/ds-base.js +33 -1
- package/templates/vn-salary-scale/support.js +13 -20
- package/templates/vn-sow-appendix/VnSowAppendix.dc.html +21 -20
- package/templates/vn-sow-appendix/ds-base.js +33 -1
- package/templates/vn-sow-appendix/support.js +13 -20
- package/templates/vn-termination-decision/VnTerminationDecision.dc.html +25 -24
- package/templates/vn-termination-decision/ds-base.js +33 -1
- package/templates/vn-termination-decision/support.js +13 -20
- package/templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html +63 -62
- package/templates/vn-total-rewards-appendix/ds-base.js +33 -1
- package/templates/vn-total-rewards-appendix/support.js +13 -20
- package/templates/vn-training-commitment/VnTrainingCommitment.dc.html +39 -38
- package/templates/vn-training-commitment/ds-base.js +33 -1
- package/templates/vn-training-commitment/support.js +13 -20
- package/templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html +50 -49
- package/templates/vn-travel-expense-policy/ds-base.js +33 -1
- package/templates/vn-travel-expense-policy/support.js +13 -20
- package/tokens/colors.css +19 -1
- package/tokens/component-tokens.css +1 -0
- package/tokens/element-seeds.json +2 -2
- package/tokens/elements.css +228 -21
- package/tokens/elevation.css +8 -2
- package/tokens/native/CSTokens.kt +37 -2
- package/tokens/native/CSTokens.swift +37 -2
- package/tokens/native/cs_tokens.dart +37 -2
- package/tokens/provenance.json +12 -12
- package/tokens/spacing.css +4 -1
- package/tokens/tokens.dtcg.json +129 -16
- package/tokens/tokens.js +59 -18
- package/tokens/tokens.json +58 -17
- package/tokens/typography.css +2 -0
- package/ui_kits/deck/index.html +4 -0
- package/ui_kits/status-hub/StatusHub.jsx +30 -4
- package/ui_kits/status-hub/index.html +3 -3
- package/ui_kits/status-hub/login.html +55 -9
- package/ui_kits/status-hub/project.html +4 -0
- package/ui_kits/status-hub/settings.html +35 -13
- package/ui_kits/status-hub/status.css +5 -1
- package/ui_kits/website/Website.jsx +25 -3
- package/ui_kits/website/careers.html +5 -1
- package/ui_kits/website/chat.html +5 -3
- package/ui_kits/website/index.html +3 -3
- package/ui_kits/website/site.css +3 -3
- package/ui_kits/website/work.html +5 -1
- package/assets/aurora-hoa.png +0 -0
- package/assets/aurora-kim.png +0 -0
- package/assets/aurora-moc.png +0 -0
- package/assets/aurora-thuy.png +0 -0
- package/docs/status/assets/favicon.svg +0 -5
- package/docs/status/assets/status-legacy.css +0 -399
- package/docs/status/assets/status-legacy.js +0 -505
- package/docs/status/assets/status.css +0 -644
- package/docs/status/assets/status.js +0 -1308
- package/docs/status/data/status-feed.json +0 -1
- package/docs/status/data/task/TASK-REL-001.js +0 -1
- package/docs/status/data/task/TASK-REL-002.js +0 -1
- package/docs/status/index.html +0 -42
- package/docs/status/roadmap.html +0 -4
- package/docs/status/status-legacy.html +0 -117
- package/docs/tasks/BACKLOG.md +0 -26
- package/docs/tasks/release/TASK-REL-001-launch-1-1-0/spec.md +0 -55
- package/docs/tasks/release/TASK-REL-002-republish-1-1-1/spec.md +0 -54
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
2
|
+
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
+
<title>Documents · Style Guide · CyberSkill</title>
|
|
4
5
|
<meta charset="utf-8">
|
|
5
6
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
7
|
<meta name="omelette-owns-print" content="1">
|
|
@@ -13,123 +14,125 @@
|
|
|
13
14
|
<script src="./ds-base.js"></script>
|
|
14
15
|
<style>@page{size:A4;margin:23mm 20mm 20mm 20mm}@media print{html,body{background:#fff!important}.cs-desk{background:#fff!important;padding:0!important;min-height:0!important}.cs-sheet{box-shadow:none!important;border:none!important;max-width:none!important;border-radius:0!important;padding:0!important}.cs-avoid{break-inside:avoid}}</style>
|
|
15
16
|
</helmet>
|
|
16
|
-
<div data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" class="cs-desk" style="background:#efe6d8;min-height:100vh;padding:40px 16px;font-family:var(--cs-font-family-ui);color
|
|
17
|
+
<div data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" class="cs-desk" style="background:#efe6d8;min-height:100vh;padding:40px 16px;font-family:var(--cs-font-family-ui);color:var(--cs-doc-ink)">
|
|
17
18
|
<div class="cs-sheet" style="max-width:794px;margin:0 auto;background:#fff;border:1px solid var(--cs-color-border-default);border-radius:12px;box-shadow:var(--cs-shadow-md);padding:56px 60px;text-align:left">
|
|
18
19
|
<div style="display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--cs-color-text-muted);padding-bottom:6px;border-bottom:1px solid var(--cs-color-border-default);margin-bottom:14px">
|
|
19
20
|
<x-import component-from-global-scope="CyberSkillDS.Logo" size="18" hint-size="18px,18px"></x-import>
|
|
20
21
|
<b style="color:var(--cs-color-brand-umber)">CyberSkill</b><span>· Cẩm nang trình bày tài liệu</span><span style="margin-left:auto;font-family:var(--cs-font-family-mono)">Số/No. 00/2026/CNTB-CYBERSKILL</span>
|
|
21
22
|
</div>
|
|
22
23
|
<div class="cs-avoid" style="display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-bottom:18px">
|
|
23
|
-
<div><div style="font-weight:800;font-size:11.5px;line-height:1.45">CÔNG TY CỔ PHẦN TƯ VẤN VÀ PHÁT TRIỂN GIẢI PHÁP PHẦN MỀM CYBERSKILL</div><div style="font-size:10px;color
|
|
24
|
-
<div style="text-align:center"><div style="font-weight:800;font-size:11.5px;line-height:1.5">CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM</div><div style="font-weight:700;font-size:11px">Độc lập – Tự do – Hạnh phúc</div><div style="letter-spacing:0.1em;font-size:10px;margin:1px 0">———————————</div><div style="font-size:9.5px;color
|
|
24
|
+
<div><div style="font-weight:800;font-size:11.5px;line-height:1.45">CÔNG TY CỔ PHẦN TƯ VẤN VÀ PHÁT TRIỂN GIẢI PHÁP PHẦN MỀM CYBERSKILL</div><div style="font-size:10px;color:var(--cs-doc-slate);font-style:italic;line-height:1.45;margin-top:2px">CYBERSKILL SOFTWARE SOLUTIONS CONSULTANCY AND DEVELOPMENT JOINT STOCK COMPANY</div><div style="font-size:10.5px;margin-top:4px">Hiện Thực Hoá Ý Chí · <span style="color:var(--cs-doc-slate);font-style:italic">Turn Your Will Into Real</span></div></div>
|
|
25
|
+
<div style="text-align:center"><div style="font-weight:800;font-size:11.5px;line-height:1.5">CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM</div><div style="font-weight:700;font-size:11px">Độc lập – Tự do – Hạnh phúc</div><div style="letter-spacing:0.1em;font-size:10px;margin:1px 0">———————————</div><div style="font-size:9.5px;color:var(--cs-doc-slate);font-style:italic;line-height:1.4">The Socialist Republic of Vietnam · Independence – Freedom – Happiness</div></div>
|
|
25
26
|
</div>
|
|
26
27
|
<div class="cs-avoid" style="text-align:center;margin-bottom:20px">
|
|
27
28
|
<h1 style="font-size:26px;font-weight:800;color:var(--cs-color-brand-umber);letter-spacing:-0.01em;margin:0 0 3px;line-height:1.25">CẨM NANG TRÌNH BÀY TÀI LIỆU</h1>
|
|
28
|
-
<div style="font-size:14.5px;color
|
|
29
|
+
<div style="font-size:14.5px;color:var(--cs-doc-slate);font-style:italic">Document Style Guide</div>
|
|
29
30
|
<div style="font-size:12.5px;margin-top:8px">Số / No.: 00/2026/CNTB-CYBERSKILL</div>
|
|
30
|
-
<div style="font-size:12px;margin-top:2px">Phiên bản / Version 2.0 · Hiệu lực từ / Effective from: <span style="background
|
|
31
|
+
<div style="font-size:12px;margin-top:2px">Phiên bản / Version 2.0 · Hiệu lực từ / Effective from: <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">......</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">......</span></div>
|
|
31
32
|
<div style="color:var(--cs-accent);font-size:13px;letter-spacing:0.5em;margin-top:10px">◆ ◆ ◆</div>
|
|
32
33
|
</div>
|
|
33
34
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Bộ quy tắc trình bày thống nhất cho <b>mọi tài liệu CyberSkill</b> — pháp lý, nhân sự, tài chính, bán hàng, tài liệu gửi khách hàng và thư từ giao tiếp — neo theo CyberSkill Global Design System. Mọi mẫu (template) trong hệ thống đều tuân theo đúng bộ token nêu trong Cẩm nang này. Xem thêm <i>Danh mục & Hướng dẫn sử dụng</i> (catalogue + cách dùng) và <i>Mẫu tài liệu</i> (các dạng khung + cách thêm mẫu mới).</p>
|
|
34
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
35
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">One consistent presentation standard for <b>every CyberSkill document</b> — legal, HR, finance, sales, client-facing paperwork and communications — anchored to the CyberSkill Global Design System. Every template in the system follows exactly the tokens set out in this guide. See also the <i>Suite Index & Usage Guide</i> and <i>Document Templates</i> (archetypes + how to add a new one).</p>
|
|
35
36
|
|
|
36
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 1 · BẢNG MÀU <span style="font-weight:400;font-size:12.5px;color
|
|
37
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 1 · BẢNG MÀU <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 1 · Colour palette</span></h2>
|
|
37
38
|
<table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:13px;margin:10px 0 8px">
|
|
38
|
-
<thead><tr style="background:var(--cs-color-brand-umber);color
|
|
39
|
+
<thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:7px 10px;font-size:11px">Token</th><th style="text-align:left;padding:7px 10px;font-size:11px">Mã màu <i style="font-weight:400">Hex</i></th><th style="text-align:left;padding:7px 10px;font-size:11px">Dùng cho <i style="font-weight:400">Use</i></th></tr></thead>
|
|
39
40
|
<tbody>
|
|
40
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:7px 10px"><b>Umber — Thương hiệu</b><div style="font-size:12px;color
|
|
41
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:7px 10px"><b>Ochre — Nhấn</b><div style="font-size:12px;color
|
|
42
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:7px 10px"><b>Ink — Chữ tiếng Việt</b><div style="font-size:12px;color
|
|
43
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:7px 10px"><b>Slate — Chữ tiếng Anh</b><div style="font-size:12px;color
|
|
44
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:7px 10px"><b>Rule — Kẻ mảnh</b><div style="font-size:12px;color
|
|
45
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:7px 10px"><b>Tint — Nền chú thích</b><div style="font-size:12px;color
|
|
46
|
-
<tr><td style="padding:7px 10px"><b>Highlight — Ô cần điền</b><div style="font-size:12px;color
|
|
41
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:7px 10px"><b>Umber — Thương hiệu</b><div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Brand</div></td><td style="padding:7px 10px;font-family:var(--cs-font-family-mono)"><span style="display:inline-block;width:11px;height:11px;background:#45210E;border-radius:2px;margin-right:5px;vertical-align:-1px"></span>#45210E</td><td style="padding:7px 10px">Tiêu đề, header/footer, thanh tiêu đề bảng<div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Headings, header & footer, table title bars</div></td></tr>
|
|
42
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:7px 10px"><b>Ochre — Nhấn</b><div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Accent</div></td><td style="padding:7px 10px;font-family:var(--cs-font-family-mono)"><span style="display:inline-block;width:11px;height:11px;background:#F4BA17;border-radius:2px;margin-right:5px;vertical-align:-1px"></span>#F4BA17</td><td style="padding:7px 10px">Dấu chấm thương hiệu, thanh nhấn<div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Brand dots, accent bars</div></td></tr>
|
|
43
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:7px 10px"><b>Ink — Chữ tiếng Việt</b><div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">VN text</div></td><td style="padding:7px 10px;font-family:var(--cs-font-family-mono)"><span style="display:inline-block;width:11px;height:11px;background:var(--cs-doc-ink);border-radius:2px;margin-right:5px;vertical-align:-1px"></span>var(--cs-doc-ink)</td><td style="padding:7px 10px">Toàn bộ nội dung tiếng Việt<div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">All Vietnamese body text</div></td></tr>
|
|
44
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:7px 10px"><b>Slate — Chữ tiếng Anh</b><div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">EN text</div></td><td style="padding:7px 10px;font-family:var(--cs-font-family-mono)"><span style="display:inline-block;width:11px;height:11px;background:var(--cs-doc-slate);border-radius:2px;margin-right:5px;vertical-align:-1px"></span>var(--cs-doc-slate)</td><td style="padding:7px 10px">Dòng tiếng Anh, luôn in nghiêng<div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">English lines, always italic</div></td></tr>
|
|
45
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:7px 10px"><b>Rule — Kẻ mảnh</b><div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Hairline</div></td><td style="padding:7px 10px;font-family:var(--cs-font-family-mono)"><span style="display:inline-block;width:11px;height:11px;background:#E7D9C6;border-radius:2px;margin-right:5px;vertical-align:-1px"></span>#E7D9C6</td><td style="padding:7px 10px">Đường viền, kẻ header/footer<div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Borders, header & footer rules</div></td></tr>
|
|
46
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:7px 10px"><b>Tint — Nền chú thích</b><div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Callout</div></td><td style="padding:7px 10px;font-family:var(--cs-font-family-mono)"><span style="display:inline-block;width:11px;height:11px;background:#FBF4E9;border:1px solid #E7D9C6;border-radius:2px;margin-right:5px;vertical-align:-1px"></span>#FBF4E9</td><td style="padding:7px 10px">Nền hộp ghi chú<div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Callout background</div></td></tr>
|
|
47
|
+
<tr><td style="padding:7px 10px"><b>Highlight — Ô cần điền</b><div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Fill-in</div></td><td style="padding:7px 10px"><span style="background:var(--cs-doc-fill);padding:0 6px">Vàng / Yellow</span></td><td style="padding:7px 10px">Mọi chỗ trống cần điền<div style="font-size:12px;color:var(--cs-doc-slate);font-style:italic">Every fill-in blank</div></td></tr>
|
|
47
48
|
</tbody>
|
|
48
49
|
</table>
|
|
49
50
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Umber và Ochre là màu bất biến của thương hiệu, không được thay đổi. Chữ nội dung KHÔNG dùng màu Umber — Umber chỉ dành cho bề mặt thương hiệu.</p>
|
|
50
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
51
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">Umber and Ochre are immutable brand anchors. Body text is never Umber — Umber is reserved for brand surfaces.</p>
|
|
51
52
|
|
|
52
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 2 · KIỂU CHỮ <span style="font-weight:400;font-size:12.5px;color
|
|
53
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 2 · KIỂU CHỮ <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 2 · Typography</span></h2>
|
|
53
54
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Phông chữ: Be Vietnam Pro, nhúng sẵn trong mọi tệp.</p>
|
|
54
|
-
<p style="font-size:
|
|
55
|
+
<p style="font-size:14px;line-height:1.55;margin:8px 0 2px">Thứ bậc tiêu đề: mỗi trang chỉ có <b>một</b> <span style="font-family:var(--cs-font-family-mono)">h1</span> (tên tài liệu); điều/mục dùng <span style="font-family:var(--cs-font-family-mono)">h2</span>; tiểu mục <span style="font-family:var(--cs-font-family-mono)">h3</span>. Không nhảy cấp (ví dụ <span style="font-family:var(--cs-font-family-mono)">h1</span> → <span style="font-family:var(--cs-font-family-mono)">h3</span>).</p>
|
|
56
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Heading ladder: one <span style="font-family:var(--cs-font-family-mono)">h1</span> per page (document title); articles/sections use <span style="font-family:var(--cs-font-family-mono)">h2</span>; subsections <span style="font-family:var(--cs-font-family-mono)">h3</span>. Do not skip levels.</p>
|
|
57
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 10px">Typeface: Be Vietnam Pro, embedded in every file.</p>
|
|
55
58
|
<table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:13px;margin:0 0 18px">
|
|
56
|
-
<thead><tr style="background:var(--cs-color-brand-umber);color
|
|
59
|
+
<thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:7px 10px;font-size:11px">Cấp bậc <i style="font-weight:400">Level</i></th><th style="text-align:left;padding:7px 10px;font-size:11px">Cỡ <i style="font-weight:400">Size</i></th><th style="text-align:left;padding:7px 10px;font-size:11px">Kiểu <i style="font-weight:400">Style</i></th></tr></thead>
|
|
57
60
|
<tbody>
|
|
58
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Tiêu đề tài liệu <i style="color
|
|
59
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Phụ đề <i style="color
|
|
60
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">ĐIỀU <i style="color
|
|
61
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Mục con <i style="color
|
|
62
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Tiểu mục <i style="color
|
|
63
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Nội dung tiếng Việt <i style="color
|
|
64
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Dòng tiếng Anh <i style="color
|
|
65
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Bảng — tiếng Việt <i style="color
|
|
66
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Bảng — tiếng Anh <i style="color
|
|
67
|
-
<tr><td style="padding:6px 10px">Chú thích <i style="color
|
|
61
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Tiêu đề tài liệu <i style="color:var(--cs-doc-slate);font-size:12px">Title</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">20 pt</td><td style="padding:6px 10px">Đậm · Umber · canh giữa <i style="color:var(--cs-doc-slate);font-size:12px">Bold · Umber · centred</i></td></tr>
|
|
62
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Phụ đề <i style="color:var(--cs-doc-slate);font-size:12px">Subtitle</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">11 pt</td><td style="padding:6px 10px">Slate · nghiêng · canh giữa <i style="color:var(--cs-doc-slate);font-size:12px">Slate · italic · centred</i></td></tr>
|
|
63
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">ĐIỀU <i style="color:var(--cs-doc-slate);font-size:12px">Heading 1</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">13 pt</td><td style="padding:6px 10px">Đậm · Umber · kẻ mảnh dưới <i style="color:var(--cs-doc-slate);font-size:12px">Bold · Umber · hairline under</i></td></tr>
|
|
64
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Mục con <i style="color:var(--cs-doc-slate);font-size:12px">Heading 2</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">11.5 pt</td><td style="padding:6px 10px">Đậm · Umber <i style="color:var(--cs-doc-slate);font-size:12px">Bold · Umber</i></td></tr>
|
|
65
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Tiểu mục <i style="color:var(--cs-doc-slate);font-size:12px">Heading 3</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">11 pt</td><td style="padding:6px 10px">Đậm · Umber <i style="color:var(--cs-doc-slate);font-size:12px">Bold · Umber</i></td></tr>
|
|
66
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Nội dung tiếng Việt <i style="color:var(--cs-doc-slate);font-size:12px">Body VN</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">10.5 pt</td><td style="padding:6px 10px">Thường · Ink <i style="color:var(--cs-doc-slate);font-size:12px">Regular · Ink</i></td></tr>
|
|
67
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Dòng tiếng Anh <i style="color:var(--cs-doc-slate);font-size:12px">Body EN</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">9.5 pt</td><td style="padding:6px 10px">Slate · nghiêng <i style="color:var(--cs-doc-slate);font-size:12px">Slate · italic</i></td></tr>
|
|
68
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Bảng — tiếng Việt <i style="color:var(--cs-doc-slate);font-size:12px">Table VN</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">10 pt</td><td style="padding:6px 10px">Ink</td></tr>
|
|
69
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Bảng — tiếng Anh <i style="color:var(--cs-doc-slate);font-size:12px">Table EN</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">9 pt</td><td style="padding:6px 10px">Slate · nghiêng <i style="color:var(--cs-doc-slate);font-size:12px">Slate · italic</i></td></tr>
|
|
70
|
+
<tr><td style="padding:6px 10px">Chú thích <i style="color:var(--cs-doc-slate);font-size:12px">Caption</i></td><td style="padding:6px 10px;font-family:var(--cs-font-family-mono)">8.5 pt</td><td style="padding:6px 10px">Slate · nghiêng <i style="color:var(--cs-doc-slate);font-size:12px">Slate · italic</i></td></tr>
|
|
68
71
|
</tbody>
|
|
69
72
|
</table>
|
|
70
73
|
|
|
71
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 3 · GIÃN DÒNG & KHOẢNG CÁCH <span style="font-weight:400;font-size:12.5px;color
|
|
74
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 3 · GIÃN DÒNG & KHOẢNG CÁCH <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 3 · Spacing</span></h2>
|
|
72
75
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Giãn dòng 1,25. Giữa dòng Việt và dòng Anh của cùng một ý: 1 pt. Sau mỗi cặp Việt–Anh: 8 pt. Giữa các ô chọn, gạch đầu dòng và điểm a) b) c): 6 pt.</p>
|
|
73
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
76
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Line spacing 1.25. Between a Vietnamese line and its own English line: 1 pt. After each Vietnamese–English pair: 8 pt. Between tick-boxes, bullets and a) b) c) items: 6 pt.</p>
|
|
74
77
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Tuyệt đối không canh đều hai bên. Canh đều làm giãn chữ tiếng Việt rất xấu — toàn bộ tài liệu canh trái.</p>
|
|
75
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
78
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Never justify. Justification wrecks Vietnamese word spacing — every document is left-aligned.</p>
|
|
76
79
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Khổ A4. Lề: trên 23 mm, dưới 20 mm, trái/phải 20 mm.</p>
|
|
77
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
80
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">A4. Margins: top 23 mm, bottom 20 mm, left/right 20 mm.</p>
|
|
78
81
|
|
|
79
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 4 · QUY TẮC SONG NGỮ <span style="font-weight:400;font-size:12.5px;color
|
|
82
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 4 · QUY TẮC SONG NGỮ <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 4 · Bilingual rule</span></h2>
|
|
80
83
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Tiếng Việt trước, màu Ink. Tiếng Anh ngay bên dưới, màu Slate, in nghiêng, nhỏ hơn một cấp. Đây là cam kết Vietnamese-first của Design System.</p>
|
|
81
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
84
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">Vietnamese first, in Ink. English immediately below, in Slate, italic, one size down. This is the Design System's Vietnamese-first commitment.</p>
|
|
82
85
|
|
|
83
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 5 · BẢNG BIỂU <span style="font-weight:400;font-size:12.5px;color
|
|
86
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 5 · BẢNG BIỂU <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 5 · Tables</span></h2>
|
|
84
87
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Mọi bảng đều có thanh tiêu đề nền Umber, chữ trắng, và tự lặp lại khi bảng sang trang mới.</p>
|
|
85
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
88
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Every table carries an Umber title bar with white text, and repeats it when the table runs onto a new page.</p>
|
|
86
89
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Bảng thông tin các Bên (BÊN A / BÊN B): cột nhãn rộng 2880 dxa, chỉ kẻ ngang, không kẻ dọc — đọc như một danh sách định nghĩa.</p>
|
|
87
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
90
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Party blocks (Party A / Party B): 2880 dxa label column, horizontal hairlines only, no vertical rules — it reads as a definition list.</p>
|
|
88
91
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Bảng dữ liệu: kẻ đủ khung, nền xen kẽ để dễ dò hàng.</p>
|
|
89
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
92
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">Data tables: full grid, with zebra banding so rows are easy to track.</p>
|
|
90
93
|
|
|
91
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 6 · Ô CẦN ĐIỀN <span style="font-weight:400;font-size:12.5px;color
|
|
92
|
-
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Mọi chỗ trống cần điền đều được tô nền vàng, ví dụ: <span style="background
|
|
93
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
94
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 6 · Ô CẦN ĐIỀN <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 6 · Fill-in blanks</span></h2>
|
|
95
|
+
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Mọi chỗ trống cần điền đều được tô nền vàng, ví dụ: <span style="background:var(--cs-doc-fill);padding:0 3px">......................</span></p>
|
|
96
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">Every fill-in blank is highlighted yellow, for example: <span style="background:var(--cs-doc-fill);padding:0 3px">......................</span></p>
|
|
94
97
|
|
|
95
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 7 · DANH SÁCH & Ô CHỌN <span style="font-weight:400;font-size:12.5px;color
|
|
98
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 7 · DANH SÁCH & Ô CHỌN <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 7 · Lists & tick-boxes</span></h2>
|
|
96
99
|
<div style="display:grid;gap:6px;margin:10px 0 18px">
|
|
97
|
-
<div><p style="font-size:14px;line-height:1.55;margin:0">☐ Mỗi ô chọn nằm trên dòng riêng, cách ô kế tiếp 6 pt.</p><p style="font-size:12.5px;line-height:1.5;color
|
|
98
|
-
<div><p style="font-size:14px;line-height:1.55;margin:0">a) Điểm chữ cái cũng áp dụng quy tắc này.</p><p style="font-size:12.5px;line-height:1.5;color
|
|
100
|
+
<div><p style="font-size:14px;line-height:1.55;margin:0">☐ Mỗi ô chọn nằm trên dòng riêng, cách ô kế tiếp 6 pt.</p><p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:2px 0 0">☐ Every tick-box sits on its own line, 6 pt clear of the next.</p></div>
|
|
101
|
+
<div><p style="font-size:14px;line-height:1.55;margin:0">a) Điểm chữ cái cũng áp dụng quy tắc này.</p><p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:2px 0 0">a) Lettered points follow the same rule.</p></div>
|
|
99
102
|
</div>
|
|
100
103
|
|
|
101
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 8 · KHỐI KÝ <span style="font-weight:400;font-size:12.5px;color
|
|
104
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 8 · KHỐI KÝ <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 8 · Signing block</span></h2>
|
|
102
105
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Khối ký luôn chừa khoảng trống khoảng 2,5 cm để ký tay, và không bao giờ bị cắt sang trang.</p>
|
|
103
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
106
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">The signing block always leaves about 2.5 cm of clear space to sign by hand, and never splits across a page.</p>
|
|
104
107
|
|
|
105
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 9 · VỆ SINH DỮ LIỆU <span style="font-weight:400;font-size:12.5px;color
|
|
108
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 9 · VỆ SINH DỮ LIỆU <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 9 · Data hygiene</span></h2>
|
|
106
109
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Tài liệu mẫu không bao giờ chứa dữ liệu cá nhân thật. Thông tin của BÊN B luôn để trống. Đây là yêu cầu của Nghị định bảo vệ dữ liệu cá nhân, không phải là tuỳ chọn trình bày.</p>
|
|
107
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
110
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">A template never contains real personal data. Party B's fields are always blank. This is a personal-data-protection requirement, not a presentation preference.</p>
|
|
108
111
|
|
|
109
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 10 · HEADER & FOOTER <span style="font-weight:400;font-size:12.5px;color
|
|
112
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 10 · HEADER & FOOTER <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 10 · Header & footer</span></h2>
|
|
110
113
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Header: logo nhỏ · CyberSkill · tên tài liệu · số hiệu, kẻ mảnh phía dưới. Không đặt logo trong thân tài liệu — header đã mang dấu hiệu thương hiệu.</p>
|
|
111
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
114
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Header: small logo · CyberSkill · document name · number, with a hairline under. No logo in the body — the header already carries the mark.</p>
|
|
112
115
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Footer: khẩu hiệu, mã số thuế, thư điện tử, điện thoại và số trang.</p>
|
|
113
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
116
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">Footer: slogan, tax code, email, phone and page number.</p>
|
|
114
117
|
|
|
115
|
-
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 11 · PHẠM VI ÁP DỤNG & CÁC DẠNG TÀI LIỆU <span style="font-weight:400;font-size:12.5px;color
|
|
118
|
+
<h2 class="cs-avoid" style="font-size:17px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 2px;padding-bottom:4px;border-bottom:1px solid var(--cs-color-border-default)">ĐIỀU 11 · PHẠM VI ÁP DỤNG & CÁC DẠNG TÀI LIỆU <span style="font-weight:400;font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Article 11 · Scope & document archetypes</span></h2>
|
|
116
119
|
<p style="font-size:14px;line-height:1.55;margin:10px 0 2px">Điều 1–10 là chuẩn cho <b>tài liệu chính thức khổ A4</b> (hợp đồng, quy chế, chính sách, quyết định, biểu mẫu — gồm toàn bộ Bộ Tài liệu Nhân sự, tài liệu pháp lý và tài chính). Các dạng tài liệu số kế thừa <b>bảng màu, kiểu chữ, giọng điệu và quy tắc song ngữ</b>, nhưng dùng hình học riêng thay cho khổ A4/in.</p>
|
|
117
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
120
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 10px">Articles 1–10 are the standard for <b>formal A4 documents</b> (contracts, regulations, policies, decisions, forms — the whole HR Suite, and the legal and finance paperwork). Digital archetypes inherit the <b>palette, type, voice and bilingual rule</b> but use their own geometry in place of A4/print.</p>
|
|
118
121
|
<table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:12.5px;margin:0 0 8px">
|
|
119
|
-
<thead><tr style="background:var(--cs-color-brand-umber);color
|
|
122
|
+
<thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:6px 10px;font-size:10.5px;width:150px">Dạng <i style="font-weight:400">Archetype</i></th><th style="text-align:left;padding:6px 10px;font-size:10.5px">Áp dụng Điều 1–10 <i style="font-weight:400">How the rules apply</i></th></tr></thead>
|
|
120
123
|
<tbody>
|
|
121
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Tài liệu A4 song ngữ<div style="color
|
|
122
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Tài liệu in khổ Letter<div style="color
|
|
123
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Thư điện tử<div style="color
|
|
124
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Màn hình sản phẩm<div style="color
|
|
125
|
-
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Slide 16:9<div style="color
|
|
126
|
-
<tr><td style="padding:6px 10px">Ảnh mạng xã hội<div style="color
|
|
124
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Tài liệu A4 song ngữ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">A4 bilingual instrument</div></td><td style="padding:6px 10px">Áp dụng đầy đủ Điều 1–10.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">All of Articles 1–10 apply in full.</div></td></tr>
|
|
125
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Tài liệu in khổ Letter<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Letter print doc (invoice, quote, one-pager)</div></td><td style="padding:6px 10px">Như A4, đổi khổ Letter, lề 0,6in; song ngữ khi tài liệu có bản EN·VN.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">As A4 but Letter size, 0.6in margins; bilingual where the doc ships EN·VN.</div></td></tr>
|
|
126
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Thư điện tử<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Email (600px)</div></td><td style="padding:6px 10px">Kế thừa màu/kiểu chữ/giọng điệu; không header quốc hiệu, không khối ký; song ngữ qua tweak Language.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Inherits colour/type/voice; no state-motto header, no signing block; bilingual via the Language tweak.</div></td></tr>
|
|
127
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 10px">Màn hình sản phẩm<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Product screen</div></td><td style="padding:6px 10px">Dùng component + token của hệ thống; Điều 1–10 không áp dụng hình học in.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Uses system components + tokens; the print geometry of 1–10 does not apply.</div></td></tr>
|
|
128
|
+
<tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 10px">Slide 16:9<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Deck (16:9)</div></td><td style="padding:6px 10px">Nền umber cho bìa; nhấn theo element; kế thừa màu/kiểu chữ/giọng điệu.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Umber cover; element accent; inherits colour/type/voice.</div></td></tr>
|
|
129
|
+
<tr><td style="padding:6px 10px">Ảnh mạng xã hội<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Social image</div></td><td style="padding:6px 10px">Khổ cố định theo kênh; màu/kiểu chữ/logo theo hệ thống.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Fixed per-channel size; system colour/type/logo.</div></td></tr>
|
|
127
130
|
</tbody>
|
|
128
131
|
</table>
|
|
129
132
|
<p style="font-size:14px;line-height:1.55;margin:0 0 2px">Bốn trục nhận diện — <b>Theme × Element (Ngũ Hành) × Language × Style</b> — áp dụng cho mọi mẫu. Nhấn của một sản phẩm dùng token <span style="font-family:var(--cs-font-family-mono);font-size:12px">--cs-accent-*</span>, không dùng mã màu cứng. Pack Style duy nhất là <b>liquid-glass</b>.</p>
|
|
130
|
-
<p style="font-size:12.5px;line-height:1.5;color
|
|
133
|
+
<p style="font-size:12.5px;line-height:1.5;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">The four identity axes — <b>Theme × Element (Ngũ Hành) × Language × Style</b> — apply to every template. A product's accent consumes the <span style="font-family:var(--cs-font-family-mono);font-size:12px">--cs-accent-*</span> tokens, never a raw hex. Style’s sole pack is <b>liquid-glass</b>.</p>
|
|
131
134
|
|
|
132
|
-
<div style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:8px;display:flex;gap:10px;font-size:10.5px;color:var(--cs-color-text-muted);flex-wrap:wrap">Hiện Thực Hoá Ý Chí · <i style="color
|
|
135
|
+
<div style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:8px;display:flex;gap:10px;font-size:10.5px;color:var(--cs-color-text-muted);flex-wrap:wrap">Hiện Thực Hoá Ý Chí · <i style="color:var(--cs-doc-slate)">Turn Your Will Into Real</i><span>·</span>MST: 0316475200<span>·</span>info@cyberskill.world<span>·</span>(+84) 906 878 091<span style="margin-left:auto">Trang / Page 1</span></div>
|
|
133
136
|
</div>
|
|
134
137
|
</div>
|
|
135
138
|
</x-dc>
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
// Loads this design system into the template. In a consuming project, point
|
|
2
2
|
// base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
|
|
3
3
|
// the project root, '../_ds/<folder>' one level down) — one line to edit.
|
|
4
|
+
// Artifact head standard (UX-002 / B1): ensure <html lang> + <title> from @template.
|
|
4
5
|
(() => {
|
|
5
6
|
const base = '../..';
|
|
6
|
-
for (const p of ['styles.css']) {
|
|
7
|
+
for (const p of ['dist/styles.min.css']) {
|
|
7
8
|
const l = document.createElement('link');
|
|
8
9
|
l.rel = 'stylesheet'; l.href = base + '/' + p;
|
|
9
10
|
document.head.appendChild(l);
|
|
@@ -20,4 +21,35 @@
|
|
|
20
21
|
};
|
|
21
22
|
s.onerror = () => console.error('ds-base.js: failed to load ' + s.src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet');
|
|
22
23
|
document.head.appendChild(s);
|
|
24
|
+
|
|
25
|
+
const syncLang = () => {
|
|
26
|
+
try {
|
|
27
|
+
const a = document.querySelector('[lang]');
|
|
28
|
+
const v = a && a.getAttribute('lang');
|
|
29
|
+
// Ignore unresolved DC holes like {{ langAttr }}
|
|
30
|
+
if (v && v.indexOf('{{') === -1) document.documentElement.setAttribute('lang', v);
|
|
31
|
+
else if (!document.documentElement.getAttribute('lang')) document.documentElement.setAttribute('lang', 'en');
|
|
32
|
+
} catch (e) { /* authoring host may sandbox */ }
|
|
33
|
+
};
|
|
34
|
+
const ensureHead = () => {
|
|
35
|
+
try {
|
|
36
|
+
if (!document.title || !document.title.trim()) {
|
|
37
|
+
const src = document.documentElement.innerHTML;
|
|
38
|
+
const m = src.match(/@template\s+name="([^"]+)"/);
|
|
39
|
+
if (m) document.title = m[1] + ' · CyberSkill';
|
|
40
|
+
}
|
|
41
|
+
syncLang();
|
|
42
|
+
const obs = new MutationObserver(syncLang);
|
|
43
|
+
obs.observe(document.body || document.documentElement, {
|
|
44
|
+
attributes: true,
|
|
45
|
+
attributeFilter: ['lang'],
|
|
46
|
+
subtree: true,
|
|
47
|
+
});
|
|
48
|
+
} catch (e) { /* authoring host may sandbox */ }
|
|
49
|
+
};
|
|
50
|
+
if (document.readyState === 'loading') {
|
|
51
|
+
document.addEventListener('DOMContentLoaded', ensureHead);
|
|
52
|
+
} else {
|
|
53
|
+
ensureHead();
|
|
54
|
+
}
|
|
23
55
|
})();
|
|
@@ -1070,16 +1070,15 @@
|
|
|
1070
1070
|
}
|
|
1071
1071
|
|
|
1072
1072
|
// src/cdn.ts
|
|
1073
|
-
var
|
|
1074
|
-
var
|
|
1075
|
-
var
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
function cdnScriptFor(url, sri) {
|
|
1073
|
+
var REACT_LOCAL = "../../_vendor/react/react.production.min.js";
|
|
1074
|
+
var REACT_DOM_LOCAL = "../../_vendor/react/react-dom.production.min.js";
|
|
1075
|
+
var BABEL_LOCAL = "../../_vendor/babel/babel.min.js";
|
|
1076
|
+
// Product surfaces are offline-first (UX-026 / D4): no third-party script origins.
|
|
1077
|
+
// Host editors may still remap via window.__resources[localPath].
|
|
1078
|
+
function localScriptFor(path) {
|
|
1080
1079
|
const res = window.__resources;
|
|
1081
|
-
const v = res ? res[
|
|
1082
|
-
return typeof v === "string" && v ?
|
|
1080
|
+
const v = res ? res[path] : void 0;
|
|
1081
|
+
return typeof v === "string" && v ? v : path;
|
|
1083
1082
|
}
|
|
1084
1083
|
|
|
1085
1084
|
// src/external.ts
|
|
@@ -1106,16 +1105,12 @@
|
|
|
1106
1105
|
function ensureBabel() {
|
|
1107
1106
|
if (window.Babel) return Promise.resolve();
|
|
1108
1107
|
if (babelLoading) return babelLoading;
|
|
1109
|
-
const
|
|
1108
|
+
const src = localScriptFor(BABEL_LOCAL);
|
|
1110
1109
|
babelLoading = new Promise((res, rej) => {
|
|
1111
1110
|
const s = document.createElement("script");
|
|
1112
|
-
s.src =
|
|
1113
|
-
if (babel.integrity) {
|
|
1114
|
-
s.integrity = babel.integrity;
|
|
1115
|
-
s.crossOrigin = "anonymous";
|
|
1116
|
-
}
|
|
1111
|
+
s.src = src;
|
|
1117
1112
|
s.onload = () => res();
|
|
1118
|
-
s.onerror = rej;
|
|
1113
|
+
s.onerror = () => rej(new Error("failed to load local Babel: " + src));
|
|
1119
1114
|
document.head.appendChild(s);
|
|
1120
1115
|
});
|
|
1121
1116
|
return babelLoading;
|
|
@@ -1768,11 +1763,9 @@
|
|
|
1768
1763
|
function loadReactUmd() {
|
|
1769
1764
|
const w = window;
|
|
1770
1765
|
if (w.React && w.ReactDOM) return Promise.resolve();
|
|
1771
|
-
const react = cdnScriptFor(REACT_URL, REACT_SRI);
|
|
1772
|
-
const reactDom = cdnScriptFor(REACT_DOM_URL, REACT_DOM_SRI);
|
|
1773
1766
|
return Promise.all([
|
|
1774
|
-
loadScript(
|
|
1775
|
-
loadScript(
|
|
1767
|
+
loadScript(localScriptFor(REACT_LOCAL)),
|
|
1768
|
+
loadScript(localScriptFor(REACT_DOM_LOCAL))
|
|
1776
1769
|
]).then(() => void 0);
|
|
1777
1770
|
}
|
|
1778
1771
|
function init() {
|