@codelitdev/design-system 0.1.0-alpha.1 → 0.1.0-alpha.3

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.
Files changed (13) hide show
  1. package/README.md +2 -0
  2. package/package.json +1 -1
  3. package/src/assets/loader-codelit.svg +5 -0
  4. package/src/assets/loader-courselit.svg +6 -0
  5. package/src/assets/loader-frontlit.svg +6 -0
  6. package/src/assets/loader-medialit.svg +6 -0
  7. package/src/assets/loader-sendlit.svg +5 -0
  8. package/src/assets/logo-codelit.svg +1 -1
  9. package/src/assets/logo-courselit.svg +1 -1
  10. package/src/assets/logo-frontlit.svg +1 -1
  11. package/src/assets/logo-medialit.svg +1 -1
  12. package/src/assets/logo-sendlit.svg +1 -1
  13. package/src/tokens/typography.css +7 -2
package/README.md CHANGED
@@ -64,6 +64,8 @@ module.exports = {
64
64
 
65
65
  6. Logos: `@codelitdev/design-system/assets/logo-<product>.svg`.
66
66
 
67
+ 7. Loaders: `@codelitdev/design-system/assets/loader-<product>.svg`.
68
+
67
69
  ## Components (shadcn registry)
68
70
 
69
71
  The design system ships its components as a **shadcn registry** so every product
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codelitdev/design-system",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.3",
4
4
  "description": "Shared CodeLit design tokens, Tailwind preset, and React primitives for CourseLit, MediaLit, SendLit, and FrontLit.",
5
5
  "license": "Apache-2.0",
6
6
  "author": "CodeLit",
package/src/assets/loader-codelit.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g><g fill="none" stroke="oklch(0.62 0.16 60)" stroke-width="2.6">
2
+ <path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
3
+ <path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(120 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
4
+ <path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(240 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
5
+ </g></g></svg>
package/src/assets/loader-courselit.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g><g fill="none" stroke="oklch(0.62 0.16 30)" stroke-width="2.6" stroke-linejoin="round">
2
+ <path d="M32,10 L38,28 L32,34 L26,28 Z" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
3
+ <path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(90 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
4
+ <path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(180 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
5
+ <path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(270 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
6
+ </g></g></svg>
package/src/assets/loader-frontlit.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g><g fill="none" stroke="oklch(0.62 0.16 230)" stroke-width="2.4" stroke-linejoin="round">
2
+ <path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,22.81) rotate(45)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
3
+ <path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,41.19) rotate(135)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
4
+ <path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,41.19) rotate(225)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
5
+ <path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,22.81) rotate(315)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
6
+ </g></g></svg>
package/src/assets/loader-medialit.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g><g fill="none" stroke="oklch(0.62 0.16 300)" stroke-width="2.6" stroke-linejoin="round">
2
+ <path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
3
+ <path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(90 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
4
+ <path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(180 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
5
+ <path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(270 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
6
+ </g></g></svg>
package/src/assets/loader-sendlit.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g><g fill="none" stroke="oklch(0.62 0.16 150)" stroke-width="2.6" stroke-linecap="round" transform="translate(-2,0)">
2
+ <path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
3
+ <path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(120 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
4
+ <path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(240 32 32)" stroke-dasharray="200" style="animation:cl-draw 1.8s ease-in-out infinite"></path>
5
+ </g></g></svg>
package/src/assets/logo-codelit.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.66 0.14 60)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="oklch(0.62 0.16 60)" stroke-width="2.6"><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(120 32 32)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(240 32 32)"></path></g></svg>
package/src/assets/logo-courselit.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 30)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 30 / 0.18)" stroke="oklch(0.62 0.16 30)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,10 L38,28 L32,34 L26,28 Z"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(90 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(180 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(270 32 32)"></path></g></svg>
package/src/assets/logo-frontlit.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 230)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 230 / 0.15)" stroke="oklch(0.62 0.16 230)" stroke-width="2.4" stroke-linejoin="round"><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,22.81) rotate(45)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,41.19) rotate(135)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,41.19) rotate(225)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,22.81) rotate(315)"></path></g></svg>
package/src/assets/logo-medialit.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 300)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 300 / 0.15)" stroke="oklch(0.62 0.16 300)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(90 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(180 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(270 32 32)"></path></g></svg>
package/src/assets/logo-sendlit.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 150)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="oklch(0.62 0.16 150)" stroke-width="2.6" stroke-linecap="round" transform="translate(-2,0)"><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(120 32 32)"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(240 32 32)"></path></g></svg>
package/src/tokens/typography.css CHANGED
@@ -29,7 +29,12 @@ body {
29
29
  -webkit-font-smoothing: antialiased;
30
30
  }
31
31
 
32
- a { color: var(--primary); text-decoration: none; }
33
- a:hover { color: var(--primary-hover); text-decoration: underline; }
32
+ /* No global `a` styling — this stylesheet is imported by full apps where bare
33
+ <a>/<Link> are routinely used for navigation and clickable cards, and a
34
+ blanket hover-underline breaks that UX. Opt in explicitly with .cl-link for
35
+ inline text links (prose, footnotes, etc.); interactive apps should use the
36
+ Button `link` variant / registry Button instead. */
37
+ .cl-link { color: var(--primary); text-decoration: none; }
38
+ .cl-link:hover { color: var(--primary-hover); text-decoration: underline; }
34
39
 
35
40
  code, kbd, pre { font: var(--text-code); }