@wakastellar/ui 0.1.0

package/src/styles/globals.css

@@ -0,0 +1,84 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import des thèmes TweakCN */
+@import './themes/index.css';
+
+/* Import des styles Prism.js pour la coloration syntaxique - APRÈS TweakCN */
+@import './prism.css';
+
+/* Import des styles de coloration ultra-spécifiques */
+@import './code-highlight.css';
+
+@layer base {
+  /* Thème par défaut */
+  :root,
+  [data-theme="default"] {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(222.2 84% 4.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(222.2 84% 4.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(222.2 84% 4.9%);
+    --primary: hsl(222.2 47.4% 11.2%);
+    --primary-foreground: hsl(210 40% 98%);
+    --secondary: hsl(210 40% 96.1%);
+    --secondary-foreground: hsl(222.2 47.4% 11.2%);
+    --muted: hsl(210 40% 96.1%);
+    --muted-foreground: hsl(215.4 16.3% 46.9%);
+    --accent: hsl(210 40% 96.1%);
+    --accent-foreground: hsl(222.2 47.4% 11.2%);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(210 40% 98%);
+    --border: hsl(214.3 31.8% 91.4%);
+    --input: hsl(214.3 31.8% 91.4%);
+    --ring: hsl(222.2 84% 4.9%);
+    --chart-1: hsl(222.2 47.4% 11.2%);
+    --chart-2: hsl(215 25% 27%);
+    --chart-3: hsl(210 20% 50%);
+    --chart-4: hsl(210 25% 70%);
+    --chart-5: hsl(210 20% 85%);
+    --radius: 0.5rem;
+  }
+
+  .dark,
+  [data-theme="default"].dark {
+    --background: hsl(222.2 84% 4.9%);
+    --foreground: hsl(210 40% 98%);
+    --card: hsl(222.2 84% 4.9%);
+    --card-foreground: hsl(210 40% 98%);
+    --popover: hsl(222.2 84% 4.9%);
+    --popover-foreground: hsl(210 40% 98%);
+    --primary: hsl(210 40% 98%);
+    --primary-foreground: hsl(222.2 47.4% 11.2%);
+    --secondary: hsl(217.2 32.6% 17.5%);
+    --secondary-foreground: hsl(210 40% 98%);
+    --muted: hsl(217.2 32.6% 17.5%);
+    --muted-foreground: hsl(215 20.2% 65.1%);
+    --accent: hsl(217.2 32.6% 17.5%);
+    --accent-foreground: hsl(210 40% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(210 40% 98%);
+    --border: hsl(217.2 32.6% 17.5%);
+    --input: hsl(217.2 32.6% 17.5%);
+    --ring: hsl(212.7 26.8% 83.9%);
+    --chart-1: hsl(210 40% 98%);
+    --chart-2: hsl(215 20% 70%);
+    --chart-3: hsl(210 15% 50%);
+    --chart-4: hsl(210 20% 35%);
+    --chart-5: hsl(217 25% 25%);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+
+

package/src/styles/prism.css

@@ -0,0 +1,261 @@
+/* Styles Prism.js pour le composant Code - Responsive et accessible */
+/* Utilisation de !important pour éviter les conflits avec TweakCN et Tailwind */
+
+/* Thème par défaut (light) */
+code[class*="language-"],
+pre[class*="language-"] {
+  background: none !important;
+  text-shadow: 0 1px white !important;
+  font-size: 1em !important;
+  text-align: left !important;
+  white-space: pre !important;
+  word-spacing: normal !important;
+  word-break: normal !important;
+  word-wrap: normal !important;
+  line-height: 1.5 !important;
+  -moz-tab-size: 4 !important;
+  -o-tab-size: 4 !important;
+  tab-size: 4 !important;
+  -webkit-hyphens: none !important;
+  -moz-hyphens: none !important;
+  -ms-hyphens: none !important;
+  hyphens: none !important;
+}
+
+/* Responsive font sizes */
+@media (max-width: 640px) {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+
+@media (min-width: 1024px) {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.5rem;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  white-space: normal;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #e6e6e6;
+    background: #1a1a1a;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  }
+
+  pre[class*="language-"] {
+    background: #1a1a1a;
+    border-color: #333;
+  }
+
+  :not(pre) > code[class*="language-"] {
+    background: #1a1a1a;
+    border-color: #333;
+  }
+}
+
+/* Syntax highlighting colors - Plus spécifique pour éviter les conflits */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a737d !important;
+}
+
+.token.punctuation {
+  color: #586069 !important;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #005cc5 !important;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #032f62 !important;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #d73a49 !important;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #d73a49 !important;
+}
+
+.token.function,
+.token.class-name {
+  color: #6f42c1 !important;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e36209 !important;
+}
+
+/* Dark theme syntax colors */
+@media (prefers-color-scheme: dark) {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #8b949e !important;
+  }
+
+  .token.punctuation {
+    color: #c9d1d9 !important;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #79c0ff !important;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a5d6ff !important;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #ff7b72 !important;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #ff7b72 !important;
+  }
+
+  .token.function,
+  .token.class-name {
+    color: #d2a8ff !important;
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: #ffa657 !important;
+  }
+}
+
+/* Responsive scrollbars */
+pre[class*="language-"]::-webkit-scrollbar {
+  height: 8px;
+}
+
+pre[class*="language-"]::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+pre[class*="language-"]::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+@media (prefers-color-scheme: dark) {
+  pre[class*="language-"]::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+  pre[class*="language-"] {
+    padding: 0.75rem;
+    margin: 0.25rem 0;
+    border-radius: 0.375rem;
+  }
+
+  pre[class*="language-"]::-webkit-scrollbar {
+    height: 6px;
+  }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  pre[class*="language-"] {
+    transition: none;
+  }
+}
+
+/* Focus styles for keyboard navigation */
+pre[class*="language-"]:focus-within {
+  outline: 2px solid #007acc;
+  outline-offset: 2px;
+}
+
+/* Print styles */
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+    background: white !important;
+    color: black !important;
+  }
+
+  pre[class*="language-"] {
+    border: 1px solid #ccc;
+  }
+}

package/src/styles/themes/forest.css

@@ -0,0 +1,55 @@
+/* TweakCN Theme: Forest - Vert naturel */
+[data-theme="forest"] {
+  --background: #f0f4f0;
+  --foreground: #1a3d1a;
+  --card: #f7faf7;
+  --card-foreground: #1a3d1a;
+  --popover: #f7faf7;
+  --popover-foreground: #1a3d1a;
+  --primary: #2d7a2d;
+  --primary-foreground: #ffffff;
+  --secondary: #d9ead9;
+  --secondary-foreground: #1a3d1a;
+  --muted: #e5f0e5;
+  --muted-foreground: #4a6b4a;
+  --accent: #c4e3c4;
+  --accent-foreground: #1a3d1a;
+  --destructive: #d13838;
+  --destructive-foreground: #ffffff;
+  --border: #cde5cd;
+  --input: #d9ead9;
+  --ring: #2d7a2d;
+  --chart-1: #2d7a2d;
+  --chart-2: #3d8f3d;
+  --chart-3: #4da64d;
+  --chart-4: #6bb86b;
+  --chart-5: #8fcc8f;
+  --radius: 0.5rem;
+}
+
+[data-theme="forest"].dark {
+  --background: #0f1f0f;
+  --foreground: #7fdf7f;
+  --card: #142814;
+  --card-foreground: #7fdf7f;
+  --popover: #142814;
+  --popover-foreground: #7fdf7f;
+  --primary: #5fbf5f;
+  --primary-foreground: #0f1f0f;
+  --secondary: #1f4d1f;
+  --secondary-foreground: #7fdf7f;
+  --muted: #1a3d1a;
+  --muted-foreground: #5fa55f;
+  --accent: #2d5f2d;
+  --accent-foreground: #7fdf7f;
+  --destructive: #e83c3c;
+  --destructive-foreground: #f2f2f2;
+  --border: #2d5f2d;
+  --input: #1f4d1f;
+  --ring: #5fbf5f;
+  --chart-1: #5fbf5f;
+  --chart-2: #4da64d;
+  --chart-3: #3d8f3d;
+  --chart-4: #2d7a2d;
+  --chart-5: #1f5f1f;
+}

package/src/styles/themes/index.css

@@ -0,0 +1,7 @@
+/* TweakCN Themes */
+@import './perpetuity.css';
+@import './forest.css';
+@import './twilight.css';
+@import './sunset.css';
+@import './monochrome.css';
+

package/src/styles/themes/monochrome.css

@@ -0,0 +1,55 @@
+/* TweakCN Theme: Monochrome - Minimaliste noir et blanc */
+[data-theme="monochrome"] {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --card: #fafafa;
+  --card-foreground: #0a0a0a;
+  --popover: #fafafa;
+  --popover-foreground: #0a0a0a;
+  --primary: #171717;
+  --primary-foreground: #fafafa;
+  --secondary: #f5f5f5;
+  --secondary-foreground: #0a0a0a;
+  --muted: #f5f5f5;
+  --muted-foreground: #737373;
+  --accent: #e5e5e5;
+  --accent-foreground: #0a0a0a;
+  --destructive: #d13838;
+  --destructive-foreground: #fafafa;
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --ring: #0a0a0a;
+  --chart-1: #0a0a0a;
+  --chart-2: #404040;
+  --chart-3: #737373;
+  --chart-4: #a3a3a3;
+  --chart-5: #d4d4d4;
+  --radius: 0.375rem;
+}
+
+[data-theme="monochrome"].dark {
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+  --card: #171717;
+  --card-foreground: #fafafa;
+  --popover: #171717;
+  --popover-foreground: #fafafa;
+  --primary: #fafafa;
+  --primary-foreground: #0a0a0a;
+  --secondary: #262626;
+  --secondary-foreground: #fafafa;
+  --muted: #171717;
+  --muted-foreground: #a3a3a3;
+  --accent: #262626;
+  --accent-foreground: #fafafa;
+  --destructive: #e83c3c;
+  --destructive-foreground: #fafafa;
+  --border: #262626;
+  --input: #262626;
+  --ring: #d4d4d4;
+  --chart-1: #fafafa;
+  --chart-2: #d4d4d4;
+  --chart-3: #a3a3a3;
+  --chart-4: #737373;
+  --chart-5: #404040;
+}

package/src/styles/themes/perpetuity.css

@@ -0,0 +1,55 @@
+/* TweakCN Theme: Perpetuity - Cyan et turquoise */
+[data-theme="perpetuity"] {
+  --background: #e8f0f0;
+  --foreground: #0a4a55;
+  --card: #f2f7f7;
+  --card-foreground: #0a4a55;
+  --popover: #f2f7f7;
+  --popover-foreground: #0a4a55;
+  --primary: #06858e;
+  --primary-foreground: #ffffff;
+  --secondary: #d9eaea;
+  --secondary-foreground: #0a4a55;
+  --muted: #e0eaea;
+  --muted-foreground: #427a7e;
+  --accent: #c9e5e7;
+  --accent-foreground: #0a4a55;
+  --destructive: #d13838;
+  --destructive-foreground: #ffffff;
+  --border: #cde0e2;
+  --input: #d9eaea;
+  --ring: #06858e;
+  --chart-1: #06858e;
+  --chart-2: #1e9ea6;
+  --chart-3: #37b6be;
+  --chart-4: #5dc7ce;
+  --chart-5: #8ad8dd;
+  --radius: 0.125rem;
+}
+
+[data-theme="perpetuity"].dark {
+  --background: #0a1a20;
+  --foreground: #4de8e8;
+  --card: #0c2025;
+  --card-foreground: #4de8e8;
+  --popover: #0c2025;
+  --popover-foreground: #4de8e8;
+  --primary: #4de8e8;
+  --primary-foreground: #0a1a20;
+  --secondary: #164955;
+  --secondary-foreground: #4de8e8;
+  --muted: #0f3039;
+  --muted-foreground: #36a5a5;
+  --accent: #164955;
+  --accent-foreground: #4de8e8;
+  --destructive: #e83c3c;
+  --destructive-foreground: #f2f2f2;
+  --border: #164955;
+  --input: #164955;
+  --ring: #4de8e8;
+  --chart-1: #4de8e8;
+  --chart-2: #36a5a5;
+  --chart-3: #2d8a8a;
+  --chart-4: #19595e;
+  --chart-5: #0e383c;
+}

package/src/styles/themes/sunset.css

@@ -0,0 +1,55 @@
+/* TweakCN Theme: Sunset - Orange et doré */
+[data-theme="sunset"] {
+  --background: #faf5f0;
+  --foreground: #4d2d1a;
+  --card: #fcf8f5;
+  --card-foreground: #4d2d1a;
+  --popover: #fcf8f5;
+  --popover-foreground: #4d2d1a;
+  --primary: #ea580c;
+  --primary-foreground: #ffffff;
+  --secondary: #fed7aa;
+  --secondary-foreground: #4d2d1a;
+  --muted: #fef3c7;
+  --muted-foreground: #92400e;
+  --accent: #fcd34d;
+  --accent-foreground: #4d2d1a;
+  --destructive: #d13838;
+  --destructive-foreground: #ffffff;
+  --border: #fed7aa;
+  --input: #fed7aa;
+  --ring: #ea580c;
+  --chart-1: #ea580c;
+  --chart-2: #f59e0b;
+  --chart-3: #fbbf24;
+  --chart-4: #fcd34d;
+  --chart-5: #fde68a;
+  --radius: 0.5rem;
+}
+
+[data-theme="sunset"].dark {
+  --background: #1c0f08;
+  --foreground: #fed7aa;
+  --card: #291508;
+  --card-foreground: #fed7aa;
+  --popover: #291508;
+  --popover-foreground: #fed7aa;
+  --primary: #f59e0b;
+  --primary-foreground: #1c0f08;
+  --secondary: #78350f;
+  --secondary-foreground: #fed7aa;
+  --muted: #451a03;
+  --muted-foreground: #d97706;
+  --accent: #92400e;
+  --accent-foreground: #fed7aa;
+  --destructive: #e83c3c;
+  --destructive-foreground: #f2f2f2;
+  --border: #78350f;
+  --input: #78350f;
+  --ring: #f59e0b;
+  --chart-1: #f59e0b;
+  --chart-2: #ea580c;
+  --chart-3: #d97706;
+  --chart-4: #b45309;
+  --chart-5: #92400e;
+}

package/src/styles/themes/twilight.css

@@ -0,0 +1,55 @@
+/* TweakCN Theme: Twilight - Violet crépusculaire */
+[data-theme="twilight"] {
+  --background: #f5f0f7;
+  --foreground: #3d1a4d;
+  --card: #faf7fc;
+  --card-foreground: #3d1a4d;
+  --popover: #faf7fc;
+  --popover-foreground: #3d1a4d;
+  --primary: #8b5cf6;
+  --primary-foreground: #ffffff;
+  --secondary: #ead9f5;
+  --secondary-foreground: #3d1a4d;
+  --muted: #f0e5f7;
+  --muted-foreground: #6b4a7e;
+  --accent: #e3c4f5;
+  --accent-foreground: #3d1a4d;
+  --destructive: #d13838;
+  --destructive-foreground: #ffffff;
+  --border: #e5cdf0;
+  --input: #ead9f5;
+  --ring: #8b5cf6;
+  --chart-1: #8b5cf6;
+  --chart-2: #a78bfa;
+  --chart-3: #c4b5fd;
+  --chart-4: #ddd6fe;
+  --chart-5: #ede9fe;
+  --radius: 0.75rem;
+}
+
+[data-theme="twilight"].dark {
+  --background: #1a0f28;
+  --foreground: #e9d5ff;
+  --card: #241633;
+  --card-foreground: #e9d5ff;
+  --popover: #241633;
+  --popover-foreground: #e9d5ff;
+  --primary: #a78bfa;
+  --primary-foreground: #1a0f28;
+  --secondary: #3d2859;
+  --secondary-foreground: #e9d5ff;
+  --muted: #2d1f42;
+  --muted-foreground: #9f7aea;
+  --accent: #4c3268;
+  --accent-foreground: #e9d5ff;
+  --destructive: #e83c3c;
+  --destructive-foreground: #f2f2f2;
+  --border: #4c3268;
+  --input: #3d2859;
+  --ring: #a78bfa;
+  --chart-1: #a78bfa;
+  --chart-2: #9f7aea;
+  --chart-3: #8b5cf6;
+  --chart-4: #7c3aed;
+  --chart-5: #6d28d9;
+}