create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/styles/strings.ts

@@ -0,0 +1,492 @@
+import en from '../../locales/en.json'
+import th from '../../locales/th.json'
+import ar from '../../locales/ar.json'
+/**
+ * System strings — the words Nova itself says (control labels, accessible
+ * names, editor setup copy). Never merchant content: menus, messages and
+ * headings arrive as props. A storefront passes its locale file through
+ * <NovaProvider strings>; these are the lab's built-in en / th / ar sets.
+ */
+export interface NovaStrings {
+  skipToContent: string
+  menu: string
+  openMenu: string
+  closeMenu: string
+  back: string
+  shopAll: string // "{title}" placeholder
+  search: string
+  searchPlaceholder: string
+  account: string
+  signIn: string
+  myAccount: string
+  cart: string
+  cartCount: string // "{count}" placeholder
+  primaryNav: string
+  mobileNav: string
+  region: string
+  announcements: string
+  previous: string
+  next: string
+  pause: string
+  play: string
+  dismiss: string
+  learnMore: string
+  breadcrumb: string
+  home: string
+  backTo: string // "{title}"
+  footer: string
+  followUs: string
+  paymentMethods: string
+  copyright: string // "{year}", "{name}"
+  cookiePreferences: string
+  newsletterSubscribe: string
+  close: string
+  loading: string
+  // Editor setup frames (Nova 14 · Editor states)
+  editorAddMessage: string
+  editorAddFooterBlocks: string
+  editorAddFooterBlocksAction: string
+  editorAddBlocks: string
+  editorAddBlocksHint: string
+  editorImage: string
+  editorImageHint: string
+  editorChip: string // "{section}"
+  // Region & language dialog (MarketSelector · 12A + Nova 13)
+  regionLanguage: string
+  countryRegion: string
+  language: string
+  searchCountries: string
+  searchLanguages: string
+  noMatches: string
+  pricesInRegionCurrency: string
+  update: string
+  updating: string
+  regionSwitchFailed: string
+  languageUnavailable: string // "{language}", "{country}"
+  slideshow: string
+  slideOf: string // "{index}", "{count}"
+  goToSlide: string // "{index}"
+  pauseSlideshow: string
+  playSlideshow: string
+  pauseVideo: string
+  playVideo: string
+  pauseMarquee: string
+  playMarquee: string
+  watchTheFilm: string
+  readMore: string
+  readLess: string
+  countdownDays: string
+  countdownHours: string
+  countdownMinutes: string
+  countdownSeconds: string
+  countdownLabel: string // "{time}"
+  countdownDaysLong: string // "{n}"
+  countdownHoursLong: string // "{n}"
+  countdownMinutesLong: string // "{n}"
+  editorHeroImage: string
+  editorHeroImageHint: string
+  editorImageUnavailable: string
+  editorAddSlides: string
+  editorAddSlidesHint: string
+  editorAddVideo: string
+  editorAddVideoHint: string
+  editorCountdownInvalid: string
+  editorCountdownInvalidHint: string // "{example}"
+  editorPromoEnded: string
+  editorAddMarquee: string
+  editorAddFeatures: string
+  editorAddFeaturesHint: string
+  editorChooseCollection: string
+  editorChooseCollectionHint: string
+  editorCollectionUnavailable: string
+  editorCollectionUnavailableHint: string
+  salePrice: string
+  regularPrice: string
+  priceFrom: string // "{price}"
+  free: string
+  save: string // "{amount}"
+  soldOut: string
+  newBadge: string
+  discountBadge: string // "{percent}"
+  colourCount: string // "{count}"
+  noImage: string
+  quickAdd: string // "{title}"
+  chooseOptions: string // "{title}"
+  addToCart: string
+  adding: string
+  added: string
+  addFailed: string
+  unavailable: string
+  combinationUnavailable: string // "{choice}"
+  quantity: string
+  decreaseQuantity: string
+  increaseQuantity: string
+  onlyLeft: string // "{count}"
+  onlyLeftIn: string // "{count}", "{variant}"
+  viewAll: string
+  viewAllCount: string // "{count}"
+  viewDetails: string
+  productsCount: string // "{count}"
+  showingOf: string // "{shown}", "{total}"
+  loadMore: string
+  filters: string
+  filter: string
+  sortBy: string
+  sortLabel: string // "{label}"
+  clearAll: string
+  clearAllFilters: string
+  showProducts: string // "{count}"
+  showCount: string // "{count}"
+  removeFilter: string // "{label}"
+  priceMin: string
+  priceMax: string
+  noMatches12c: string
+  noMatchesHint: string // "{filters}"
+  emptyCollection: string
+  noCollectionsYet: string
+  shopAllProducts: string
+  loadFailed: string
+  loadFailedHint: string
+  tryAgain: string
+  productImages: string
+  imageOf: string // "{index}", "{count}"
+  zoomImage: string
+  closeZoom: string
+  clearHistory: string
+  clear: string
+  recentlyViewed: string
+  youMayAlsoLike: string
+  goesWellWith: string
+  description: string
+  sizeGuide: string
+  editorSampleProducts: string
+  editorChooseProduct: string
+  editorChooseProductHint: string
+  editorProductUnavailable: string
+  editorNoProducts: string
+  editorNoProductsHint: string
+  editorAddCollections: string
+  editorAddCollectionsHint: string
+  editorSetUpFilters: string
+  editorRecentlyViewed: string
+  editorRecentlyViewedHint: string
+  showAllLinks: string // "{count}"
+  minRead: string // "{n}"
+  share: string
+  copyLink: string
+  linkCopied: string
+  shareArticle: string
+  contents: string
+  tags: string
+  allTag: string
+  noStories: string
+  readStory: string
+  allStories: string
+  filterStories: string
+  compareSlider: string // "{label}"
+  beforeValue: string // "{n}", "{before}"
+  comparisonOf: string // "{index}", "{count}"
+  editorSampleArticle: string
+  editorAddPeople: string
+  editorAddPeopleHint: string
+  editorAddComparison: string
+  editorChooseBlog: string
+  ratingOutOf: string
+  testimonials: string
+  pauseRotation: string
+  playRotation: string
+  playVideoFrom: string
+  editorAddQuotes: string
+  editorAddQuotesHint: string
+  logos: string
+  editorAddLogos: string
+  editorAddLogosHint: string
+  editorAddBadges: string
+  editorAddBadgesHint: string
+  reviews: string
+  reviewsCount: string
+  outOfFive: string
+  writeReview: string
+  allReviews: string
+  withPhotos: string
+  sortRecent: string
+  sortHighest: string
+  sortLowest: string
+  sortReviews: string
+  filterReviews: string
+  showMoreReviews: string
+  verifiedBuyer: string
+  verified: string
+  noReviewsYet: string
+  starsFilter: string
+  starsShort: string
+  showingReviews: string
+  reviewPhotos: string
+  editorReviewsTitle: string
+  editorReviewsHint: string
+  shopChip: string
+  shopThis: string
+  customerPhotos: string
+  photoBy: string
+  editorAddPhotos: string
+  editorAddPhotosHint: string
+  editorFeedTitle: string
+  editorFeedHint: string
+  addAllToCart: string
+  lookSummary: string
+  lookAdded: string
+  lookAllAdded: string
+  addNamed: string
+  hotspot: string
+  productsInLook: string
+  editorLookTitle: string
+  editorLookHint: string
+  recommended: string
+  showDifferences: string
+  yes: string
+  no: string
+  feature: string
+  showingRows: string
+  showAllFeatures: string
+  swipeCompare: string
+  editorCompareTitle: string
+  editorCompareHint: string
+  editorMissingValues: string
+  editorStarterText: string
+  product: string
+  total: string
+  remove: string
+  removeNamed: string
+  removedNamed: string
+  undo: string
+  summary: string
+  subtotal: string
+  youSave: string
+  shipping: string
+  atCheckout: string
+  estimatedTotal: string
+  orderNote: string
+  continueShopping: string
+  cartEmpty: string
+  cartEmptyHint: string
+  cartLinkEmptyHint: string
+  lineAddFriend: string
+  lineAddFriendLabel: string
+  editorAddLineUrl: string
+  editorAddLineUrlHint: string
+  noLongerAvailable: string
+  onlyAvailable: string
+  checkoutFailed: string
+  cartItems: string
+  quantityOf: string
+  searchResultsFor: string
+  resultTypesLabel: string
+  products: string
+  articles: string
+  pages: string
+  tabCount: string
+  noResultsFor: string
+  spellingTip: string
+  searchTheShop: string
+  suggestedLinks: string
+  email: string
+  continue: string
+  greeting: string
+  signOut: string
+  orders: string
+  noOrders: string
+  startShopping: string
+  itemsOne: string
+  itemsMany: string
+  orderNumber: string
+  emailInvalid: string
+  editorOrdersBlocked: string
+  onThisPage: string
+  lastUpdated: string
+  policyUnpublished: string
+  contactUs: string
+  editorChoosePolicy: string
+  editorChoosePolicyHint: string
+  storesOne: string
+  storesMany: string
+  searchStores: string
+  noStoresMatch: string
+  getDirections: string
+  directions: string
+  call: string
+  callNamed: string
+  directionsTo: string
+  editorAddLocations: string
+  editorAddLocationsHint: string
+  subscribing: string
+  subscribed: string
+  subscribeFailed: string
+  /** The platform refused the sign-up for too many attempts (rate limited). */
+  subscribeTooMany: string
+  /** A native form post the platform could not verify (origin / CSRF): submit again. */
+  formExpired: string
+  consentLabel: string
+  consentRequired: string
+  editorNewsletterSetup: string
+  editorNewsletterSetupHint: string
+  name: string
+  phone: string
+  message: string
+  optional: string
+  fieldRequired: string
+  fixFields: string
+  sending: string
+  sendFailedEmail: string
+  sendFailed: string
+  /** The platform refused the message for too many attempts (rate limited). */
+  sendTooMany: string
+  emailUs: string
+  editorContactSetup: string
+  editorContactSetupHint: string
+  checkout: string
+  closeNamed: string
+  notifications: string
+  dismissNamed: string
+  cancel: string
+  viewCart: string
+  addedCount: string
+  quantityUpdateFailed: string
+  cartLimitReached: string // "{max}": the merchant's maximum quantity per product
+  cartLimitReachedAny: string // the same refusal when the limit is not known
+  cartDrawerNote: string
+  /** Prices include tax (Settings › Taxes): under a price. */
+  taxIncluded: string
+  /** The cart's checkout note when prices include tax. */
+  taxIncludedShippingAtCheckout: string
+  /** Policy link titles, when the platform sent its own English default title. */
+  policyRefund: string
+  policyTerms: string
+  policyShipping: string
+  policyContact: string
+  policyLegal: string
+  discountCode: string
+  freeShippingAway: string
+  freeShippingReached: string
+  searchEverything: string
+  recentSearches: string
+  removeRecent: string
+  browse: string
+  collections: string
+  searchKeysHint: string
+  seeAllResults: string
+  searching: string
+  resultsCount: string
+  yourAccount: string
+  accountPitch: string
+  addresses: string
+  accountDetails: string
+  quickView: string
+  viewFullDetails: string
+  productLoadFailed: string
+  viewFullPage: string
+  units: string
+  selectedSizeNote: string
+  weUseCookies: string
+  cookiesNeeded: string
+  privacyPolicy: string
+  manage: string
+  rejectNonEssential: string
+  acceptAll: string
+  strictlyNecessary: string
+  strictlyNecessaryHint: string
+  analytics: string
+  analyticsHint: string
+  marketing: string
+  marketingHint: string
+  preferencesCookies: string
+  preferencesHint: string
+  notAvailableYet: string
+  saveChoices: string
+  promotion: string
+  fileTypeUnsupported: string
+  fileTypeHint: string
+  replaceFile: string
+  chooseImage: string
+  imageRecommendation: string
+  videoUnavailable: string
+  offlineSync: string
+  retry: string
+  priceAtCheckout: string
+  loadingNamed: string
+  rewards: string
+  openRewards: string
+  rewardsGuestIntro: string
+  rewardsJoin: string
+  rewardsSignIn: string
+  rewardsPoints: string
+  rewardsPending: string
+  rewardsTier: string
+  rewardsNextTier: string
+  rewardsNextTierSpend: string
+  rewardsRedeemHeading: string
+  rewardsGetCode: string
+  rewardsPointsNeeded: string
+  rewardsTierLocked: string
+  rewardsLimitReached: string
+  rewardsCodeReady: string
+  rewardsRedeemFailed: string
+  rewardsRedeemInsufficient: string
+  rewardsYourCodes: string
+  rewardsCopy: string
+  rewardsCopyNamed: string
+  rewardsCopied: string
+  rewardsApply: string
+  rewardsWaysToEarn: string
+  rewardsDone: string
+  rewardsOrderRate: string
+  rewardsViewAll: string
+  rewardsJoinFailed: string
+  earnWithItem: string
+  earnWithOrder: string
+  earnSignIn: string
+  referral: string
+  openReferral: string
+  referralFriendOffer: string
+  referralAdvocateReward: string
+  referralRewardPercentCode: string
+  referralRewardAmountCode: string
+  referralRewardStoreCredit: string
+  referralRewardPoints: string
+  referralLink: string
+  referralShareTitle: string
+  referralShareLine: string
+  referralShareWhatsapp: string
+  referralShareMessenger: string
+  referralShareX: string
+  referralShareEmail: string
+  referralShareText: string
+  referralInviteLabel: string
+  referralInviteSend: string
+  referralInviteSent: string
+  referralInviteFailed: string
+  referralStats: string
+  referralStatClicks: string
+  referralStatOrders: string
+  referralStatPending: string
+  referralStatRewarded: string
+  referralOfferTitle: string
+  referralOfferFrom: string
+  referralOfferAnon: string
+  referralOfferMinimum: string
+  referralClaim: string
+  referralClaimed: string
+  referralClaimFailed: string
+  referralClaimSelf: string
+}
+
+// The words themselves live in locales/<code>.json — translate there.
+export const STRINGS_EN: NovaStrings = en
+export const STRINGS_TH: NovaStrings = th
+export const STRINGS_AR: NovaStrings = ar
+
+export const BUILTIN_STRINGS: Record<string, NovaStrings> = { en: STRINGS_EN, th: STRINGS_TH, ar: STRINGS_AR }
+
+/** "{name}" placeholders → values. */
+export function fmt(template: string, values: Record<string, string | number>): string {
+  return template.replace(/\{(\w+)\}/g, (m, k: string) => (k in values ? String(values[k]) : m))
+}

package/templates/nova/src/styles/text.ts

@@ -0,0 +1,4 @@
+/** Up to two initials for a name, script-safe ("Mali Srisuk" → "MS"). No photo → initials, never a stock face. */
+export function initials(name: string): string {
+  return name.trim().split(/\s+/).slice(0, 2).map((w) => [...w][0]?.toUpperCase() ?? '').join('')
+}

package/templates/nova/src/styles/theme.ts

@@ -0,0 +1,171 @@
+/**
+ * Global theme settings (Level 1) → CSS custom properties + root data flags.
+ *
+ * PURE: no DOM. <NovaProvider theme> applies the result to its root element,
+ * so a lab page (or an editor frame) can render several themed scopes at once.
+ * Option IDs are the persisted theme-setting IDs (themes/nova design/spec/
+ * global.json) — `buttonRadius: none · small · medium · pill`, never labels.
+ *
+ * The design default of every rung writes nothing: an untouched store gets the
+ * values tokens.css already holds.
+ */
+
+export const THEME_OPTIONS = {
+  typeScale: ['compact', 'default', 'large'],
+  headingWeight: ['regular', 'medium', 'semibold'],
+  buttonTextStyle: ['default', 'uppercase'],
+  colorScheme: ['light', 'dark'],
+  pageWidth: ['standard', 'wide'],
+  sectionSpacing: ['small', 'large', 'xlarge'],
+  buttonRadius: ['none', 'small', 'medium', 'pill'],
+  buttonBorder: ['default', 'strong'],
+  inputRadius: ['none', 'small', 'medium', 'pill'],
+  cardRadius: ['none', 'small', 'medium', 'soft'],
+  badgeStyle: ['filled', 'outline'],
+  badgeShape: ['square', 'rounded', 'pill'],
+  iconStyle: ['outline', 'filled'],
+  motion: ['standard', 'reduced'],
+} as const
+
+type Options = typeof THEME_OPTIONS
+export type ThemeEnum = { [K in keyof Options]: Options[K][number] }
+
+export interface NovaThemeSettings extends Partial<ThemeEnum> {
+  /** Brand colour (hex). '' = not set → the token default (#111111). */
+  colorPrimary?: string
+}
+
+export const THEME_DEFAULTS: Required<NovaThemeSettings> = {
+  typeScale: 'default',
+  headingWeight: 'medium',
+  buttonTextStyle: 'default',
+  colorScheme: 'light',
+  pageWidth: 'standard',
+  sectionSpacing: 'large',
+  buttonRadius: 'medium',
+  buttonBorder: 'default',
+  inputRadius: 'medium',
+  cardRadius: 'medium',
+  badgeStyle: 'filled',
+  badgeShape: 'rounded',
+  iconStyle: 'outline',
+  motion: 'standard',
+  colorPrimary: '',
+}
+
+/** Saved values that are no longer options (Nova 11 · G8) → what they render as. */
+export const THEME_LEGACY: Partial<Record<keyof ThemeEnum, Record<string, string>>> = {
+  sectionSpacing: { medium: 'large' },
+}
+
+const RUNGS: Partial<Record<keyof ThemeEnum, { prop: string; values: Record<string, string> }>> = {
+  pageWidth: { prop: '--container-standard', values: { standard: '1280px', wide: '1536px' } },
+  sectionSpacing: {
+    prop: '--nv-section-scale',
+    values: { small: '0.7', large: '1', xlarge: '1.3' },
+  },
+  buttonRadius: { prop: '--btn-radius', values: { none: 'var(--radius-none)', small: 'var(--radius-sm)', medium: 'var(--radius-md)', pill: 'var(--radius-pill)' } },
+  inputRadius: { prop: '--input-radius', values: { none: 'var(--radius-none)', small: 'var(--radius-sm)', medium: 'var(--radius-md)', pill: 'var(--radius-pill)' } },
+  cardRadius: { prop: '--card-radius', values: { none: 'var(--radius-none)', small: 'var(--radius-sm)', medium: 'var(--radius-md)', soft: 'var(--radius-lg)' } },
+  headingWeight: { prop: '--weight-heading', values: { regular: '400', medium: '500', semibold: '600' } },
+  badgeShape: { prop: '--radius-badge', values: { square: 'var(--radius-none)', rounded: 'var(--radius-sm)', pill: 'var(--radius-pill)' } },
+}
+
+/** Settings that switch behaviour → `data-*` on the provider root. */
+const FLAGS: Partial<Record<keyof ThemeEnum, string>> = {
+  colorScheme: 'data-scheme',
+  typeScale: 'data-type-scale',
+  buttonTextStyle: 'data-button-text',
+  buttonBorder: 'data-button-border',
+  badgeStyle: 'data-badge-style',
+  iconStyle: 'data-icon-style',
+  motion: 'data-motion',
+}
+
+// ── Brand derivation (Nova 01 · brandDerive) ─────────────────────────────────
+
+function parseHex(hex: string): [number, number, number] | null {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim())
+  if (!m) return null
+  const h = m[1].length === 3 ? m[1].split('').map((c) => c + c).join('') : m[1]
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)) as [number, number, number]
+}
+const toHex = (rgb: readonly number[]) => '#' + rgb.map((c) => Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, '0')).join('')
+
+/** mix(colour, black, amount) — the design's hover (12%) / active (22%) rule. */
+export function darken(hex: string, amount: number): string {
+  const rgb = parseHex(hex)
+  return rgb ? toHex(rgb.map((c) => c * (1 - amount))) : hex
+}
+
+export function luminance(hex: string): number {
+  const rgb = parseHex(hex)
+  if (!rgb) return 0
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4
+  })
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+export function contrastRatio(a: string, b: string): number {
+  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m)
+  return (x + 0.05) / (y + 0.05)
+}
+
+/** Label on a fill: the better of #FFFFFF / #111111 (Nova 01 · brand-contrast). */
+export function bestLabel(fill: string): '#FFFFFF' | '#111111' {
+  return contrastRatio(fill, '#FFFFFF') >= contrastRatio(fill, '#111111') ? '#FFFFFF' : '#111111'
+}
+
+/** mix(colour, white, amount). */
+export function lighten(hex: string, amount: number): string {
+  const rgb = parseHex(hex)
+  return rgb ? toHex(rgb.map((c) => c + (255 - c) * amount)) : hex
+}
+
+/**
+ * Brand hover / active (Nova 01 · brandDerive). The stated rule is "mix with
+ * black 12% / 22%", and the SATURATED and PALE rows follow it; the DEFAULT row
+ * (#111111 → hover #2E2E2E, active #000000) cannot — black-on-near-black would
+ * be an invisible hover — so a near-black brand lightens on hover and goes to
+ * pure black when pressed, exactly as the table prints.
+ */
+export function brandStates(brand: string): { hover: string; active: string } {
+  if (luminance(brand) < 0.02) return { hover: lighten(brand, 0.12), active: '#000000' }
+  return { hover: darken(brand, 0.12), active: darken(brand, 0.22) }
+}
+
+export interface ResolvedTheme {
+  /** CSS custom properties for the provider root's style. */
+  readonly vars: Readonly<Record<string, string>>
+  /** data-* attributes for the provider root. */
+  readonly attrs: Readonly<Record<string, string>>
+}
+
+export function resolveTheme(settings: NovaThemeSettings = {}): ResolvedTheme {
+  const vars: Record<string, string> = {}
+  const attrs: Record<string, string> = {}
+  for (const key of Object.keys(THEME_OPTIONS) as (keyof ThemeEnum)[]) {
+    let value = settings[key] as string | undefined
+    if (value && THEME_LEGACY[key]?.[value]) value = THEME_LEGACY[key]![value]
+    if (!value || !(THEME_OPTIONS[key] as readonly string[]).includes(value)) value = THEME_DEFAULTS[key]
+    const flag = FLAGS[key]
+    if (flag && value !== THEME_DEFAULTS[key]) attrs[flag] = value
+    const rung = RUNGS[key]
+    if (rung && value !== THEME_DEFAULTS[key]) vars[rung.prop] = rung.values[value]
+  }
+  // cardCorners also moves the media radius (Nova 01 radiusMap: square→none, rounded→md, soft→lg).
+  if (settings.cardRadius && settings.cardRadius !== THEME_DEFAULTS.cardRadius && RUNGS.cardRadius!.values[settings.cardRadius]) {
+    vars['--radius-media'] = RUNGS.cardRadius!.values[settings.cardRadius]
+  }
+  const brand = settings.colorPrimary?.trim()
+  if (brand && parseHex(brand)) {
+    const { hover, active } = brandStates(brand)
+    vars['--color-brand'] = brand
+    vars['--color-brand-hover'] = hover
+    vars['--color-brand-active'] = active
+    vars['--color-brand-contrast'] = bestLabel(brand)
+  }
+  return { vars, attrs }
+}