kedhar-ui 0.1.0 → 0.2.1

package/README.md

@@ -3,7 +3,7 @@
 Shared design system for Kedhar's projects. CSS design tokens, base styles, component styles, per-site theme files, and reusable Astro components.
 
 ```
-npm install @kedharsairam/kedhar-ui
+npm install kedhar-ui
 ```
 
 ## What's included
@@ -19,13 +19,13 @@ npm install @kedharsairam/kedhar-ui
 ```astro
 ---
 // Layout frontmatter
-import '@kedharsairam/kedhar-ui/src/styles/tokens.css';
-import '@kedharsairam/kedhar-ui/src/styles/base.css';
-import '@kedharsairam/kedhar-ui/src/styles/components.css';
-import '@kedharsairam/kedhar-ui/src/styles/themes/indigo.css';
+import 'kedhar-ui/src/styles/tokens.css';
+import 'kedhar-ui/src/styles/base.css';
+import 'kedhar-ui/src/styles/components.css';
+import 'kedhar-ui/src/styles/themes/indigo.css';
 
-import ThemeToggle from '@kedharsairam/kedhar-ui/src/components/ThemeToggle.astro';
-import ScrollToTop from '@kedharsairam/kedhar-ui/src/components/ScrollToTop.astro';
+import ThemeToggle from 'kedhar-ui/src/components/ThemeToggle.astro';
+import ScrollToTop from 'kedhar-ui/src/components/ScrollToTop.astro';
 ---
 
 <ThemeToggle />
@@ -35,7 +35,7 @@ import ScrollToTop from '@kedharsairam/kedhar-ui/src/components/ScrollToTop.astr
 ## Usage in plain HTML
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@kedharsairam/kedhar-ui/dist/kedhar-ui-slate.css">
+<link rel="stylesheet" href="https://unpkg.com/kedhar-ui/dist/kedhar-ui-slate.css">
 ```
 
 ## Development

package/dist/kedhar-ui-amber.css

@@ -387,7 +387,7 @@ pre {
     transform var(--ks-duration-normal) var(--ks-ease-out);
 }
 
-.ks-card:hover {
+.ks-card-hover:hover {
   border-color: var(--ks-color-primary-alpha);
   box-shadow: var(--ks-shadow-md);
   transform: translateY(-2px);
@@ -436,7 +436,291 @@ pre {
 
 
 /* ══════════════════════════════════════════════════════════════
-   7. Utility Classes
+   7. NavBar (Header)
+   ══════════════════════════════════════════════════════════════
+   Fixed top navigation bar with logo, links, and theme toggle.
+   ══════════════════════════════════════════════════════════════ */
+.ks-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--ks-z-sticky);
+  background: var(--ks-color-bg);
+  border-bottom: 1px solid var(--ks-color-border);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
+}
+
+.dark .ks-nav {
+  background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
+}
+
+.ks-nav-inner {
+  max-width: var(--ks-max-width);
+  margin: 0 auto;
+  padding: 0 var(--ks-space-4);
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ks-space-4);
+}
+
+@media (min-width: 640px) {
+  .ks-nav-inner {
+    padding: 0 var(--ks-space-6);
+  }
+}
+
+@media (min-width: 1024px) {
+  .ks-nav-inner {
+    padding: 0 var(--ks-space-8);
+  }
+}
+
+.ks-nav-logo {
+  font-size: var(--ks-text-lg);
+  font-weight: var(--ks-weight-bold);
+  color: var(--ks-color-text);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ks-nav-logo:hover {
+  color: var(--ks-color-primary);
+}
+
+.ks-nav-logo-accent {
+  color: var(--ks-color-primary);
+}
+
+.ks-nav-links {
+  display: none;
+  align-items: center;
+  gap: var(--ks-space-8);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@media (min-width: 640px) {
+  .ks-nav-links {
+    display: flex;
+  }
+}
+
+.ks-nav-links a {
+  font-size: var(--ks-text-sm);
+  font-weight: var(--ks-weight-medium);
+  color: var(--ks-color-text-muted);
+  text-decoration: none;
+  transition: color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-nav-links a:hover {
+  color: var(--ks-color-text);
+}
+
+.ks-nav-right {
+  display: flex;
+  align-items: center;
+  gap: var(--ks-space-3);
+  flex-shrink: 0;
+}
+
+/* Mobile menu button */
+.ks-nav-hamburger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-sm);
+  background: var(--ks-color-surface);
+  color: var(--ks-color-text-muted);
+  cursor: pointer;
+  transition: border-color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+@media (min-width: 640px) {
+  .ks-nav-hamburger {
+    display: none;
+  }
+}
+
+.ks-nav-hamburger:hover {
+  border-color: var(--ks-color-primary);
+}
+
+.ks-nav-hamburger svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Mobile dropdown menu */
+.ks-nav-mobile {
+  display: none;
+  border-top: 1px solid var(--ks-color-border);
+  background: var(--ks-color-bg);
+  padding: var(--ks-space-2);
+}
+
+.ks-nav-mobile.open {
+  display: block;
+}
+
+.ks-nav-mobile a {
+  display: block;
+  padding: var(--ks-space-3) var(--ks-space-4);
+  border-radius: var(--ks-radius-sm);
+  font-size: var(--ks-text-sm);
+  font-weight: var(--ks-weight-medium);
+  color: var(--ks-color-text-muted);
+  text-decoration: none;
+  transition: background var(--ks-duration-fast) var(--ks-ease-out),
+              color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-nav-mobile a:hover {
+  background: var(--ks-color-surface-hover);
+  color: var(--ks-color-text);
+}
+
+/* Spacer to offset fixed navbar height */
+.ks-nav-spacer {
+  height: 64px;
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   8. Footer
+   ══════════════════════════════════════════════════════════════ */
+.ks-footer {
+  border-top: 1px solid var(--ks-color-border);
+  padding: var(--ks-space-8) var(--ks-space-4);
+  text-align: center;
+}
+
+.ks-footer-inner {
+  max-width: var(--ks-max-width);
+  margin: 0 auto;
+}
+
+.ks-footer-links {
+  display: flex;
+  gap: var(--ks-space-4);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: var(--ks-space-3);
+}
+
+.ks-footer-links a {
+  font-size: var(--ks-text-sm);
+  color: var(--ks-color-text-muted);
+  text-decoration: none;
+  transition: color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-footer-links a:hover {
+  color: var(--ks-color-primary);
+}
+
+.ks-footer-copy {
+  font-size: var(--ks-text-sm);
+  color: var(--ks-color-text-muted);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.ks-footer-copy a {
+  color: var(--ks-color-primary);
+  text-decoration: none;
+}
+
+.ks-footer-copy a:hover {
+  text-decoration: underline;
+}
+
+.ks-footer-built {
+  font-size: var(--ks-text-xs);
+  color: var(--ks-color-text-muted);
+  opacity: 0.7;
+  margin-top: var(--ks-space-1);
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   9. Button
+   ══════════════════════════════════════════════════════════════
+   Reusable button styles.
+   ══════════════════════════════════════════════════════════════ */
+.ks-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ks-space-2);
+  padding: var(--ks-space-2) var(--ks-space-4);
+  border-radius: var(--ks-radius-md);
+  font-size: var(--ks-text-sm);
+  font-weight: var(--ks-weight-medium);
+  line-height: 1.4;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    background var(--ks-duration-fast) var(--ks-ease-out),
+    color var(--ks-duration-fast) var(--ks-ease-out),
+    border-color var(--ks-duration-fast) var(--ks-ease-out),
+    box-shadow var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-btn-primary {
+  background: var(--ks-color-primary);
+  color: var(--ks-color-text-inverse);
+  border-color: var(--ks-color-primary);
+}
+
+.ks-btn-primary:hover {
+  background: var(--ks-color-primary-hover);
+  border-color: var(--ks-color-primary-hover);
+}
+
+.ks-btn-secondary {
+  background: transparent;
+  color: var(--ks-color-text);
+  border-color: var(--ks-color-border);
+}
+
+.ks-btn-secondary:hover {
+  border-color: var(--ks-color-primary);
+  color: var(--ks-color-primary);
+}
+
+.ks-btn-ghost {
+  background: transparent;
+  color: var(--ks-color-text-muted);
+  border-color: transparent;
+}
+
+.ks-btn-ghost:hover {
+  background: var(--ks-color-surface-hover);
+  color: var(--ks-color-text);
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   10. Utility Classes
    ══════════════════════════════════════════════════════════════ */
 .ks-sr-only {
   position: absolute;

package/dist/kedhar-ui-emerald.css

@@ -387,7 +387,7 @@ pre {
     transform var(--ks-duration-normal) var(--ks-ease-out);
 }
 
-.ks-card:hover {
+.ks-card-hover:hover {
   border-color: var(--ks-color-primary-alpha);
   box-shadow: var(--ks-shadow-md);
   transform: translateY(-2px);
@@ -436,7 +436,291 @@ pre {
 
 
 /* ══════════════════════════════════════════════════════════════
-   7. Utility Classes
+   7. NavBar (Header)
+   ══════════════════════════════════════════════════════════════
+   Fixed top navigation bar with logo, links, and theme toggle.
+   ══════════════════════════════════════════════════════════════ */
+.ks-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--ks-z-sticky);
+  background: var(--ks-color-bg);
+  border-bottom: 1px solid var(--ks-color-border);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
+}
+
+.dark .ks-nav {
+  background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
+}
+
+.ks-nav-inner {
+  max-width: var(--ks-max-width);
+  margin: 0 auto;
+  padding: 0 var(--ks-space-4);
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ks-space-4);
+}
+
+@media (min-width: 640px) {
+  .ks-nav-inner {
+    padding: 0 var(--ks-space-6);
+  }
+}
+
+@media (min-width: 1024px) {
+  .ks-nav-inner {
+    padding: 0 var(--ks-space-8);
+  }
+}
+
+.ks-nav-logo {
+  font-size: var(--ks-text-lg);
+  font-weight: var(--ks-weight-bold);
+  color: var(--ks-color-text);
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ks-nav-logo:hover {
+  color: var(--ks-color-primary);
+}
+
+.ks-nav-logo-accent {
+  color: var(--ks-color-primary);
+}
+
+.ks-nav-links {
+  display: none;
+  align-items: center;
+  gap: var(--ks-space-8);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@media (min-width: 640px) {
+  .ks-nav-links {
+    display: flex;
+  }
+}
+
+.ks-nav-links a {
+  font-size: var(--ks-text-sm);
+  font-weight: var(--ks-weight-medium);
+  color: var(--ks-color-text-muted);
+  text-decoration: none;
+  transition: color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-nav-links a:hover {
+  color: var(--ks-color-text);
+}
+
+.ks-nav-right {
+  display: flex;
+  align-items: center;
+  gap: var(--ks-space-3);
+  flex-shrink: 0;
+}
+
+/* Mobile menu button */
+.ks-nav-hamburger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-sm);
+  background: var(--ks-color-surface);
+  color: var(--ks-color-text-muted);
+  cursor: pointer;
+  transition: border-color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+@media (min-width: 640px) {
+  .ks-nav-hamburger {
+    display: none;
+  }
+}
+
+.ks-nav-hamburger:hover {
+  border-color: var(--ks-color-primary);
+}
+
+.ks-nav-hamburger svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Mobile dropdown menu */
+.ks-nav-mobile {
+  display: none;
+  border-top: 1px solid var(--ks-color-border);
+  background: var(--ks-color-bg);
+  padding: var(--ks-space-2);
+}
+
+.ks-nav-mobile.open {
+  display: block;
+}
+
+.ks-nav-mobile a {
+  display: block;
+  padding: var(--ks-space-3) var(--ks-space-4);
+  border-radius: var(--ks-radius-sm);
+  font-size: var(--ks-text-sm);
+  font-weight: var(--ks-weight-medium);
+  color: var(--ks-color-text-muted);
+  text-decoration: none;
+  transition: background var(--ks-duration-fast) var(--ks-ease-out),
+              color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-nav-mobile a:hover {
+  background: var(--ks-color-surface-hover);
+  color: var(--ks-color-text);
+}
+
+/* Spacer to offset fixed navbar height */
+.ks-nav-spacer {
+  height: 64px;
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   8. Footer
+   ══════════════════════════════════════════════════════════════ */
+.ks-footer {
+  border-top: 1px solid var(--ks-color-border);
+  padding: var(--ks-space-8) var(--ks-space-4);
+  text-align: center;
+}
+
+.ks-footer-inner {
+  max-width: var(--ks-max-width);
+  margin: 0 auto;
+}
+
+.ks-footer-links {
+  display: flex;
+  gap: var(--ks-space-4);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: var(--ks-space-3);
+}
+
+.ks-footer-links a {
+  font-size: var(--ks-text-sm);
+  color: var(--ks-color-text-muted);
+  text-decoration: none;
+  transition: color var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-footer-links a:hover {
+  color: var(--ks-color-primary);
+}
+
+.ks-footer-copy {
+  font-size: var(--ks-text-sm);
+  color: var(--ks-color-text-muted);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.ks-footer-copy a {
+  color: var(--ks-color-primary);
+  text-decoration: none;
+}
+
+.ks-footer-copy a:hover {
+  text-decoration: underline;
+}
+
+.ks-footer-built {
+  font-size: var(--ks-text-xs);
+  color: var(--ks-color-text-muted);
+  opacity: 0.7;
+  margin-top: var(--ks-space-1);
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   9. Button
+   ══════════════════════════════════════════════════════════════
+   Reusable button styles.
+   ══════════════════════════════════════════════════════════════ */
+.ks-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ks-space-2);
+  padding: var(--ks-space-2) var(--ks-space-4);
+  border-radius: var(--ks-radius-md);
+  font-size: var(--ks-text-sm);
+  font-weight: var(--ks-weight-medium);
+  line-height: 1.4;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    background var(--ks-duration-fast) var(--ks-ease-out),
+    color var(--ks-duration-fast) var(--ks-ease-out),
+    border-color var(--ks-duration-fast) var(--ks-ease-out),
+    box-shadow var(--ks-duration-fast) var(--ks-ease-out);
+}
+
+.ks-btn-primary {
+  background: var(--ks-color-primary);
+  color: var(--ks-color-text-inverse);
+  border-color: var(--ks-color-primary);
+}
+
+.ks-btn-primary:hover {
+  background: var(--ks-color-primary-hover);
+  border-color: var(--ks-color-primary-hover);
+}
+
+.ks-btn-secondary {
+  background: transparent;
+  color: var(--ks-color-text);
+  border-color: var(--ks-color-border);
+}
+
+.ks-btn-secondary:hover {
+  border-color: var(--ks-color-primary);
+  color: var(--ks-color-primary);
+}
+
+.ks-btn-ghost {
+  background: transparent;
+  color: var(--ks-color-text-muted);
+  border-color: transparent;
+}
+
+.ks-btn-ghost:hover {
+  background: var(--ks-color-surface-hover);
+  color: var(--ks-color-text);
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   10. Utility Classes
    ══════════════════════════════════════════════════════════════ */
 .ks-sr-only {
   position: absolute;