@youcan/celeste 0.10.2 → 0.10.3

package/ai/tokens.md

@@ -0,0 +1,434 @@
+# Celeste Design Tokens
+
+> Generated from `@youcan/celeste-tokens@0.10.3`. Do not edit.
+
+**347 tokens.** Use them as CSS custom properties: `var(--color-text-sub-600)`.
+
+**70 are semantic** — they change automatically under `[data-theme="dark"]`.
+Always prefer a semantic token over the primitive it resolves to: `--color-text-sub-600`
+adapts to dark mode, `--color-neutral-600` does not.
+
+Dark mode is applied by setting `data-theme="dark"` on an ancestor, or `data-theme="system"`
+to follow the OS. Never hard-code a dark colour.
+
+---
+
+## animation
+
+- `--animation-extra-fast`: 100ms
+- `--animation-extra-slow`: 500ms
+- `--animation-fast`: 200ms
+- `--animation-normal`: 300ms
+- `--animation-slow`: 400ms
+
+---
+
+## color
+
+### Semantic — prefer these
+
+- `--color-bg-soft-200`: #ebebeb → #333333 in dark
+- `--color-bg-strong-950`: #171717 → #ffffff in dark
+- `--color-bg-sub-300`: #d1d1d1 → #5c5c5c in dark
+- `--color-bg-surface-800`: #292929 → #ebebeb in dark
+- `--color-bg-weak-50`: #f7f7f7 → #1c1c1c in dark
+- `--color-bg-white-0`: #ffffff → #171717 in dark
+- `--color-icon-disabled-300`: #d1d1d1 → #5c5c5c in dark
+- `--color-icon-soft-400`: #a3a3a3 → #7b7b7b in dark
+- `--color-icon-strong-950`: #171717 → #ffffff in dark
+- `--color-icon-sub-600`: #5c5c5c → #a3a3a3 in dark
+- `--color-icon-white-0`: #ffffff → #171717 in dark
+- `--color-illustration-soft-200`: #ebebeb → #292929 in dark
+- `--color-illustration-strong-400`: #a3a3a3 → #5c5c5c in dark
+- `--color-illustration-sub-300`: #d1d1d1 → #333333 in dark
+- `--color-illustration-weak-100`: #f5f5f5 → #1c1c1c in dark
+- `--color-illustration-white-0`: #ffffff → #171717 in dark
+- `--color-overlay-overlay`: rgba(2, 13, 23, 0.24) → rgba(82, 88, 102, 0.32) in dark
+- `--color-social-amazon`: #353e47 → #ffffff in dark
+- `--color-social-apple`: #000000 → #ffffff in dark
+- `--color-social-github`: #24292f → #ffffff in dark
+- `--color-social-notion`: #1e2226 → #ffffff in dark
+- `--color-social-tidal`: #000000 → #ffffff in dark
+- `--color-social-twitter`: #010101 → #ffffff in dark
+- `--color-social-zendesk`: #16140d → #ffffff in dark
+- `--color-state-away-base`: #f6b51e → #e6a819 in dark
+- `--color-state-away-dark`: #624c18 → #ffd268 in dark
+- `--color-state-away-light`: #ffecc0 → rgba(251, 198, 75, 0.24) in dark
+- `--color-state-away-lighter`: #fffaeb → rgba(251, 198, 75, 0.16) in dark
+- `--color-state-error-base`: #fb3748 → #e93544 in dark
+- `--color-state-error-dark`: #681219 → #ff6875 in dark
+- `--color-state-error-light`: #ffc0c5 → rgba(251, 55, 72, 0.24) in dark
+- `--color-state-error-lighter`: #ffebec → rgba(251, 55, 72, 0.16) in dark
+- `--color-state-faded-dark`: #292929 → #d1d1d1 in dark
+- `--color-state-faded-light`: #ebebeb → rgba(163, 163, 163, 0.24) in dark
+- `--color-state-faded-lighter`: #f5f5f5 → rgba(163, 163, 163, 0.16) in dark
+- `--color-state-feature-dark`: #351a75 → #8c71f6 in dark
+- `--color-state-feature-light`: #cac0ff → rgba(120, 77, 239, 0.24) in dark
+- `--color-state-feature-lighter`: #efebff → rgba(120, 77, 239, 0.16) in dark
+- `--color-state-highlighted-base`: #fb4ba3 → #e9358f in dark
+- `--color-state-highlighted-dark`: #68123d → #ff68b3 in dark
+- `--color-state-highlighted-light`: #ffc0df → rgba(251, 75, 163, 0.24) in dark
+- `--color-state-highlighted-lighter`: #ffebf4 → rgba(251, 75, 163, 0.16) in dark
+- `--color-state-information-dark`: #122368 → #6895ff in dark
+- `--color-state-information-light`: #c0d5ff → rgba(71, 108, 255, 0.24) in dark
+- `--color-state-information-lighter`: #ebf1ff → rgba(71, 108, 255, 0.16) in dark
+- `--color-state-stable-base`: #22d3bb → #1daf9c in dark
+- `--color-state-stable-dark`: #0b463e → #3fdec9 in dark
+- `--color-state-stable-light`: #c2f5ee → rgba(34, 211, 187, 0.24) in dark
+- `--color-state-stable-lighter`: #e4fbf8 → rgba(34, 211, 187, 0.16) in dark
+- `--color-state-success-base`: #1fc16b → #1daf61 in dark
+- `--color-state-success-dark`: #0b4627 → #3ee089 in dark
+- `--color-state-success-light`: #c2f5da → rgba(31, 193, 107, 0.16) in dark
+- `--color-state-success-lighter`: #e0faec → rgba(31, 193, 107, 0.1) in dark
+- `--color-state-verified-base`: #47c2ff → #35ade9 in dark
+- `--color-state-verified-dark`: #124b68 → #68cdff in dark
+- `--color-state-verified-light`: #c0eaff → rgba(71, 194, 255, 0.24) in dark
+- `--color-state-verified-lighter`: #ebf8ff → rgba(71, 194, 255, 0.16) in dark
+- `--color-state-warning-base`: #ff8447 → #e97135 in dark
+- `--color-state-warning-dark`: #682f12 → #ff9a68 in dark
+- `--color-state-warning-light`: #ffd5c0 → rgba(255, 145, 71, 0.24) in dark
+- `--color-state-warning-lighter`: #fff1eb → rgba(255, 145, 71, 0.16) in dark
+- `--color-stroke-soft-200`: #ebebeb → #333333 in dark
+- `--color-stroke-strong-950`: #171717 → #ffffff in dark
+- `--color-stroke-sub-300`: #d1d1d1 → #5c5c5c in dark
+- `--color-stroke-white-0`: #ffffff → #171717 in dark
+- `--color-text-disabled-300`: #d1d1d1 → #5c5c5c in dark
+- `--color-text-soft-400`: #a3a3a3 → #7b7b7b in dark
+- `--color-text-strong-950`: #171717 → #ffffff in dark
+- `--color-text-sub-600`: #5c5c5c → #a3a3a3 in dark
+- `--color-text-white-0`: #ffffff → #171717 in dark
+
+### Primitive — fixed values
+
+- `--color-black-alpha-10`: rgba(23, 23, 23, 0.1)
+- `--color-black-alpha-16`: rgba(23, 23, 23, 0.16)
+- `--color-black-alpha-24`: rgba(23, 23, 23, 0.24)
+- `--color-blue-100`: #d5e2ff
+- `--color-blue-200`: #c0d5ff
+- `--color-blue-300`: #97baff
+- `--color-blue-400`: #6895ff
+- `--color-blue-50`: #ebf1ff
+- `--color-blue-500`: #335cff
+- `--color-blue-600`: #3559e9
+- `--color-blue-700`: #2547d0
+- `--color-blue-800`: #1f3bad
+- `--color-blue-900`: #182f8b
+- `--color-blue-950`: #122368
+- `--color-blue-alpha-10`: rgba(71, 108, 255, 0.1)
+- `--color-blue-alpha-16`: rgba(71, 108, 255, 0.16)
+- `--color-blue-alpha-24`: rgba(71, 108, 255, 0.24)
+- `--color-brand-100`: #ffd6e9
+- `--color-brand-200`: #ffc2dd
+- `--color-brand-300`: #ff99c7
+- `--color-brand-400`: #ff66ab
+- `--color-brand-50`: #ffebf4
+- `--color-brand-500`: #e1116f
+- `--color-brand-600`: #cb0f64
+- `--color-brand-700`: #b40e59
+- `--color-brand-800`: #9e0c4e
+- `--color-brand-900`: #870a43
+- `--color-brand-950`: #681239
+- `--color-green-100`: #d0fbe9
+- `--color-green-200`: #c2f5da
+- `--color-green-300`: #84ebb4
+- `--color-green-400`: #3ee089
+- `--color-green-50`: #e0faec
+- `--color-green-500`: #1fc16b
+- `--color-green-600`: #1daf61
+- `--color-green-700`: #178c4e
+- `--color-green-800`: #1a7544
+- `--color-green-900`: #16643b
+- `--color-green-950`: #0b4627
+- `--color-green-alpha-10`: rgba(31, 193, 107, 0.1)
+- `--color-green-alpha-16`: rgba(31, 193, 107, 0.16)
+- `--color-green-alpha-24`: rgba(31, 193, 107, 0.24)
+- `--color-neutral-0`: #ffffff
+- `--color-neutral-100`: #f5f5f5
+- `--color-neutral-200`: #ebebeb
+- `--color-neutral-300`: #d1d1d1
+- `--color-neutral-400`: #a3a3a3
+- `--color-neutral-50`: #f7f7f7
+- `--color-neutral-500`: #7b7b7b
+- `--color-neutral-600`: #5c5c5c
+- `--color-neutral-700`: #333333
+- `--color-neutral-800`: #292929
+- `--color-neutral-900`: #1c1c1c
+- `--color-neutral-950`: #171717
+- `--color-neutral-alpha-10`: rgba(163, 163, 163, 0.1)
+- `--color-neutral-alpha-16`: rgba(163, 163, 163, 0.16)
+- `--color-neutral-alpha-24`: rgba(163, 163, 163, 0.24)
+- `--color-orange-100`: #ffe3d5
+- `--color-orange-200`: #ffd5c0
+- `--color-orange-300`: #ffba97
+- `--color-orange-400`: #ff9a68
+- `--color-orange-50`: #fff1eb
+- `--color-orange-500`: #ff8447
+- `--color-orange-600`: #e97135
+- `--color-orange-700`: #d05e25
+- `--color-orange-800`: #ad4e1f
+- `--color-orange-900`: #8b3e18
+- `--color-orange-950`: #682f12
+- `--color-orange-alpha-10`: rgba(255, 145, 71, 0.1)
+- `--color-orange-alpha-16`: rgba(255, 145, 71, 0.16)
+- `--color-orange-alpha-24`: rgba(255, 145, 71, 0.24)
+- `--color-pink-100`: #ffd5ea
+- `--color-pink-200`: #ffc0df
+- `--color-pink-300`: #ff97cb
+- `--color-pink-400`: #ff68b3
+- `--color-pink-50`: #ffebf4
+- `--color-pink-500`: #fb4ba3
+- `--color-pink-600`: #e9358f
+- `--color-pink-700`: #d0257a
+- `--color-pink-800`: #ad1f66
+- `--color-pink-900`: #8b1852
+- `--color-pink-950`: #68123d
+- `--color-pink-alpha-10`: rgba(251, 75, 163, 0.1)
+- `--color-pink-alpha-16`: rgba(251, 75, 163, 0.16)
+- `--color-pink-alpha-24`: rgba(251, 75, 163, 0.24)
+- `--color-primary-alpha-10`: rgba(251, 75, 163, 0.1)
+- `--color-primary-alpha-16`: rgba(251, 75, 163, 0.16)
+- `--color-primary-alpha-24`: rgba(251, 75, 163, 0.24)
+- `--color-primary-base`: #e1116f
+- `--color-primary-dark`: #cb0f64
+- `--color-primary-darker`: #b40e59
+- `--color-purple-100`: #dcd5ff
+- `--color-purple-200`: #cac0ff
+- `--color-purple-300`: #a897ff
+- `--color-purple-400`: #8c71f6
+- `--color-purple-50`: #efebff
+- `--color-purple-500`: #7d52f4
+- `--color-purple-600`: #693ee0
+- `--color-purple-700`: #5b2cc9
+- `--color-purple-800`: #4c25a7
+- `--color-purple-900`: #3d1d86
+- `--color-purple-950`: #351a75
+- `--color-purple-alpha-10`: rgba(120, 77, 239, 0.1)
+- `--color-purple-alpha-16`: rgba(120, 77, 239, 0.16)
+- `--color-purple-alpha-24`: rgba(120, 77, 239, 0.24)
+- `--color-red-100`: #ffd5d8
+- `--color-red-200`: #ffc0c5
+- `--color-red-300`: #ff97a0
+- `--color-red-400`: #ff6875
+- `--color-red-50`: #ffebec
+- `--color-red-500`: #fb3748
+- `--color-red-600`: #e93544
+- `--color-red-700`: #d02533
+- `--color-red-800`: #ad1f2b
+- `--color-red-900`: #8b1822
+- `--color-red-950`: #681219
+- `--color-red-alpha-10`: rgba(251, 55, 72, 0.1)
+- `--color-red-alpha-16`: rgba(251, 55, 72, 0.16)
+- `--color-red-alpha-24`: rgba(251, 55, 72, 0.24)
+- `--color-sky-100`: #d5f1ff
+- `--color-sky-200`: #c0eaff
+- `--color-sky-300`: #97dcff
+- `--color-sky-400`: #68cdff
+- `--color-sky-50`: #ebf8ff
+- `--color-sky-500`: #47c2ff
+- `--color-sky-600`: #35ade9
+- `--color-sky-700`: #2597d0
+- `--color-sky-800`: #1f7ead
+- `--color-sky-900`: #18658b
+- `--color-sky-950`: #124b68
+- `--color-sky-alpha-10`: rgba(71, 194, 255, 0.1)
+- `--color-sky-alpha-16`: rgba(71, 194, 255, 0.16)
+- `--color-sky-alpha-24`: rgba(71, 194, 255, 0.24)
+- `--color-state-faded-base`: #7b7b7b
+- `--color-state-feature-base`: #7d52f4
+- `--color-state-information-base`: #335cff
+- `--color-static-black`: #171717
+- `--color-static-white`: #ffffff
+- `--color-teal-100`: #d0fbf5
+- `--color-teal-200`: #c2f5ee
+- `--color-teal-300`: #84ebdd
+- `--color-teal-400`: #3fdec9
+- `--color-teal-50`: #e4fbf8
+- `--color-teal-500`: #22d3bb
+- `--color-teal-600`: #1daf9c
+- `--color-teal-700`: #178c7d
+- `--color-teal-800`: #1a7569
+- `--color-teal-900`: #16645a
+- `--color-teal-950`: #0b463e
+- `--color-teal-alpha-10`: rgba(34, 211, 187, 0.1)
+- `--color-teal-alpha-16`: rgba(34, 211, 187, 0.16)
+- `--color-teal-alpha-24`: rgba(34, 211, 187, 0.24)
+- `--color-white-alpha-10`: rgba(255, 255, 255, 0.1)
+- `--color-white-alpha-16`: rgba(255, 255, 255, 0.16)
+- `--color-white-alpha-24`: rgba(255, 255, 255, 0.24)
+- `--color-yellow-100`: #ffefcc
+- `--color-yellow-200`: #ffecc0
+- `--color-yellow-300`: #ffe097
+- `--color-yellow-400`: #ffd268
+- `--color-yellow-50`: #fffaeb
+- `--color-yellow-500`: #f6b51e
+- `--color-yellow-600`: #e6a819
+- `--color-yellow-700`: #c99a2c
+- `--color-yellow-800`: #a78025
+- `--color-yellow-900`: #86661d
+- `--color-yellow-950`: #624c18
+- `--color-yellow-alpha-10`: rgba(251, 198, 75, 0.1)
+- `--color-yellow-alpha-16`: rgba(251, 198, 75, 0.16)
+- `--color-yellow-alpha-24`: rgba(251, 198, 75, 0.24)
+
+---
+
+## docs
+
+- `--docs-label`: 500 18px/32px InterVariable, Cairo, sans-serif
+- `--docs-paragraph`: 400 18px/32px InterVariable, Cairo, sans-serif
+
+---
+
+## font
+
+- `--font-families-cairo`: Cairo
+- `--font-families-display`: InterDisplay, Cairo, sans-serif
+- `--font-families-geist-mono`: 'Geist Mono'
+- `--font-families-inter`: InterVariable
+- `--font-families-inter-display`: InterDisplay
+- `--font-families-mono`: 'Geist Mono', monospace
+- `--font-families-sans`: InterVariable, Cairo, sans-serif
+- `--font-size-0`: 11px
+- `--font-size-1`: 12px
+- `--font-size-10`: 56px
+- `--font-size-2`: 14px
+- `--font-size-3`: 16px
+- `--font-size-4`: 18px
+- `--font-size-5`: 20px
+- `--font-size-6`: 24px
+- `--font-size-7`: 32px
+- `--font-size-8`: 40px
+- `--font-size-9`: 48px
+- `--font-weights-display-0`: 500
+- `--font-weights-sans-0`: 400
+- `--font-weights-sans-1`: 500
+
+---
+
+## label
+
+- `--label-lg`: 500 18px/24px InterVariable, Cairo, sans-serif
+- `--label-md`: 500 16px/24px InterVariable, Cairo, sans-serif
+- `--label-sm`: 500 14px/20px InterVariable, Cairo, sans-serif
+- `--label-xl`: 500 24px/32px InterVariable, Cairo, sans-serif
+- `--label-xs`: 500 12px/16px InterVariable, Cairo, sans-serif
+
+---
+
+## letter
+
+- `--letter-spacing-0`: -0.01em
+- `--letter-spacing-1`: -0.005em
+- `--letter-spacing-2`: 0em
+- `--letter-spacing-3`: -0.015em
+- `--letter-spacing-4`: -0.011000000000000001em
+- `--letter-spacing-5`: -0.006em
+- `--letter-spacing-6`: 0.06em
+- `--letter-spacing-7`: 0.04em
+- `--letter-spacing-8`: 0.02em
+
+---
+
+## line
+
+- `--line-heights-0`: 64px
+- `--line-heights-1`: 56px
+- `--line-heights-2`: 48px
+- `--line-heights-3`: 40px
+- `--line-heights-4`: 32px
+- `--line-heights-5`: 28px
+- `--line-heights-6`: 24px
+- `--line-heights-7`: 20px
+- `--line-heights-8`: 16px
+- `--line-heights-9`: 12px
+
+---
+
+## paragraph
+
+- `--paragraph-indent-0`: 0px
+- `--paragraph-lg`: 400 18px/24px InterVariable, Cairo, sans-serif
+- `--paragraph-md`: 400 16px/24px InterVariable, Cairo, sans-serif
+- `--paragraph-sm`: 400 14px/20px InterVariable, Cairo, sans-serif
+- `--paragraph-spacing-0`: 0
+- `--paragraph-xl`: 400 24px/32px InterVariable, Cairo, sans-serif
+- `--paragraph-xs`: 400 12px/16px InterVariable, Cairo, sans-serif
+
+---
+
+## radius
+
+- `--radius-10`: 10px
+- `--radius-12`: 12px
+- `--radius-16`: 16px
+- `--radius-20`: 20px
+- `--radius-24`: 24px
+- `--radius-4`: 4px
+- `--radius-6`: 6px
+- `--radius-8`: 8px
+- `--radius-full`: 999px
+
+---
+
+## shadow
+
+- `--shadow-buttons-error-focus`: 0 0 0 2px #ffffff, 0 0 0 4px #fb37481a
+- `--shadow-buttons-important-focus`: 0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29
+- `--shadow-buttons-primary-focus`: 0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a
+- `--shadow-fancy-buttons-error`: 0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748
+- `--shadow-fancy-buttons-neutral`: 0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628
+- `--shadow-fancy-buttons-primary`: 0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f
+- `--shadow-fancy-buttons-stroke`: 0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea
+- `--shadow-regular-md`: 0 16px 32px -12px #0e121b1a
+- `--shadow-regular-xs`: 0 1px 2px 0 #0a0d1408
+- `--shadow-toggle-switch`: 0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08
+
+---
+
+## spacing
+
+- `--spacing-0`: 0
+- `--spacing-10`: 10px
+- `--spacing-12`: 12px
+- `--spacing-14`: 14px
+- `--spacing-16`: 16px
+- `--spacing-2`: 2px
+- `--spacing-20`: 20px
+- `--spacing-24`: 24px
+- `--spacing-28`: 28px
+- `--spacing-32`: 32px
+- `--spacing-36`: 36px
+- `--spacing-4`: 4px
+- `--spacing-40`: 40px
+- `--spacing-44`: 40px
+- `--spacing-48`: 48px
+- `--spacing-6`: 6px
+- `--spacing-8`: 8px
+
+---
+
+## subheading
+
+- `--subheading-md`: 500 16px/24px InterVariable, Cairo, sans-serif
+- `--subheading-sm`: 500 14px/20px InterVariable, Cairo, sans-serif
+- `--subheading-xs`: 500 12px/16px InterVariable, Cairo, sans-serif
+- `--subheading-xxs`: 500 11px/12px InterVariable, Cairo, sans-serif
+
+---
+
+## text
+
+- `--text-case-none`: none
+- `--text-case-uppercase`: uppercase
+- `--text-decoration-none`: none
+
+---
+
+## title
+
+- `--title-h1-title`: 500 56px/64px InterDisplay, Cairo, sans-serif
+- `--title-h2-title`: 500 48px/56px InterDisplay, Cairo, sans-serif
+- `--title-h3-title`: 500 40px/48px InterDisplay, Cairo, sans-serif
+- `--title-h4-title`: 500 32px/40px InterDisplay, Cairo, sans-serif
+- `--title-h5-title`: 500 24px/32px InterDisplay, Cairo, sans-serif
+- `--title-h6-title`: 500 20px/28px InterDisplay, Cairo, sans-serif

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
   "module": "./dist/es/index.js",
   "types": "./dist/index.d.ts",
   "files": [
+    "ai",
     "dist",
     "src"
   ],
@@ -51,8 +52,8 @@
     "reka-ui": "^2.10.1",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.10.2",
-    "@youcan/celeste-tokens": "0.10.2"
+    "@youcan/celeste-icons": "0.10.3",
+    "@youcan/celeste-tokens": "0.10.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",
@@ -81,15 +82,18 @@
     "rimraf": "^6.1.3",
     "sass": "^1.102.0",
     "storybook": "^10.5.7",
+    "tsx": "^4.23.11",
     "unocss": "^66.7.5",
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
+    "vue-component-meta": "^3.3.11",
     "vue-docgen-api": "^4.79.2",
     "vue-tsc": "^3.3.9"
   },
   "scripts": {
-    "build": "rimraf dist && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json && vite build",
+    "codegen:registry": "tsx scripts/component-registry/index.ts",
+    "build": "rimraf dist && pnpm run codegen:registry && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json && vite build",
     "build-only": "vite build",
     "watch": "vite build --watch",
     "type-check": "vue-tsc -p tsconfig.check.json --noEmit",