kedhar-ui 0.3.0 → 0.3.2

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 (8) hide show
  1. package/dist/kedhar-ui-amber.css +13 -3
  2. package/dist/kedhar-ui-emerald.css +13 -3
  3. package/dist/kedhar-ui-indigo.css +13 -3
  4. package/dist/kedhar-ui-slate.css +13 -3
  5. package/dist/kedhar-ui.css +13 -3
  6. package/package.json +1 -1
  7. package/src/components/ThemeToggle.astro +4 -1
  8. package/src/styles/components.css +13 -3
package/dist/kedhar-ui-amber.css CHANGED
@@ -348,9 +348,11 @@ pre {
348
348
  transition: transform var(--ks-duration-normal) var(--ks-ease-spring);
349
349
  }
350
350
 
351
- .dark .ks-toggle-knob svg {
352
- transform: rotate(90deg);
353
- }
351
+ /* Sun icon visible in light mode, hidden in dark mode */
352
+ .ks-toggle-knob .ks-icon-sun { display: inline; }
353
+ .ks-toggle-knob .ks-icon-moon { display: none; }
354
+ .dark .ks-toggle-knob .ks-icon-sun { display: none; }
355
+ .dark .ks-toggle-knob .ks-icon-moon { display: inline; }
354
356
 
355
357
  /* Track background halves */
356
358
  .ks-toggle-track {
@@ -369,6 +371,14 @@ pre {
369
371
  transition: color var(--ks-duration-fast) var(--ks-ease-out);
370
372
  }
371
373
 
374
+ .ks-toggle-track span svg {
375
+ stroke: currentColor;
376
+ stroke-width: 2;
377
+ stroke-linecap: round;
378
+ stroke-linejoin: round;
379
+ fill: none;
380
+ }
381
+
372
382
  .dark .ks-toggle-track span:first-child {
373
383
  color: transparent;
374
384
  }
package/dist/kedhar-ui-emerald.css CHANGED
@@ -348,9 +348,11 @@ pre {
348
348
  transition: transform var(--ks-duration-normal) var(--ks-ease-spring);
349
349
  }
350
350
 
351
- .dark .ks-toggle-knob svg {
352
- transform: rotate(90deg);
353
- }
351
+ /* Sun icon visible in light mode, hidden in dark mode */
352
+ .ks-toggle-knob .ks-icon-sun { display: inline; }
353
+ .ks-toggle-knob .ks-icon-moon { display: none; }
354
+ .dark .ks-toggle-knob .ks-icon-sun { display: none; }
355
+ .dark .ks-toggle-knob .ks-icon-moon { display: inline; }
354
356
 
355
357
  /* Track background halves */
356
358
  .ks-toggle-track {
@@ -369,6 +371,14 @@ pre {
369
371
  transition: color var(--ks-duration-fast) var(--ks-ease-out);
370
372
  }
371
373
 
374
+ .ks-toggle-track span svg {
375
+ stroke: currentColor;
376
+ stroke-width: 2;
377
+ stroke-linecap: round;
378
+ stroke-linejoin: round;
379
+ fill: none;
380
+ }
381
+
372
382
  .dark .ks-toggle-track span:first-child {
373
383
  color: transparent;
374
384
  }
package/dist/kedhar-ui-indigo.css CHANGED
@@ -348,9 +348,11 @@ pre {
348
348
  transition: transform var(--ks-duration-normal) var(--ks-ease-spring);
349
349
  }
350
350
 
351
- .dark .ks-toggle-knob svg {
352
- transform: rotate(90deg);
353
- }
351
+ /* Sun icon visible in light mode, hidden in dark mode */
352
+ .ks-toggle-knob .ks-icon-sun { display: inline; }
353
+ .ks-toggle-knob .ks-icon-moon { display: none; }
354
+ .dark .ks-toggle-knob .ks-icon-sun { display: none; }
355
+ .dark .ks-toggle-knob .ks-icon-moon { display: inline; }
354
356
 
355
357
  /* Track background halves */
356
358
  .ks-toggle-track {
@@ -369,6 +371,14 @@ pre {
369
371
  transition: color var(--ks-duration-fast) var(--ks-ease-out);
370
372
  }
371
373
 
374
+ .ks-toggle-track span svg {
375
+ stroke: currentColor;
376
+ stroke-width: 2;
377
+ stroke-linecap: round;
378
+ stroke-linejoin: round;
379
+ fill: none;
380
+ }
381
+
372
382
  .dark .ks-toggle-track span:first-child {
373
383
  color: transparent;
374
384
  }
package/dist/kedhar-ui-slate.css CHANGED
@@ -348,9 +348,11 @@ pre {
348
348
  transition: transform var(--ks-duration-normal) var(--ks-ease-spring);
349
349
  }
350
350
 
351
- .dark .ks-toggle-knob svg {
352
- transform: rotate(90deg);
353
- }
351
+ /* Sun icon visible in light mode, hidden in dark mode */
352
+ .ks-toggle-knob .ks-icon-sun { display: inline; }
353
+ .ks-toggle-knob .ks-icon-moon { display: none; }
354
+ .dark .ks-toggle-knob .ks-icon-sun { display: none; }
355
+ .dark .ks-toggle-knob .ks-icon-moon { display: inline; }
354
356
 
355
357
  /* Track background halves */
356
358
  .ks-toggle-track {
@@ -369,6 +371,14 @@ pre {
369
371
  transition: color var(--ks-duration-fast) var(--ks-ease-out);
370
372
  }
371
373
 
374
+ .ks-toggle-track span svg {
375
+ stroke: currentColor;
376
+ stroke-width: 2;
377
+ stroke-linecap: round;
378
+ stroke-linejoin: round;
379
+ fill: none;
380
+ }
381
+
372
382
  .dark .ks-toggle-track span:first-child {
373
383
  color: transparent;
374
384
  }
package/dist/kedhar-ui.css CHANGED
@@ -348,9 +348,11 @@ pre {
348
348
  transition: transform var(--ks-duration-normal) var(--ks-ease-spring);
349
349
  }
350
350
 
351
- .dark .ks-toggle-knob svg {
352
- transform: rotate(90deg);
353
- }
351
+ /* Sun icon visible in light mode, hidden in dark mode */
352
+ .ks-toggle-knob .ks-icon-sun { display: inline; }
353
+ .ks-toggle-knob .ks-icon-moon { display: none; }
354
+ .dark .ks-toggle-knob .ks-icon-sun { display: none; }
355
+ .dark .ks-toggle-knob .ks-icon-moon { display: inline; }
354
356
 
355
357
  /* Track background halves */
356
358
  .ks-toggle-track {
@@ -369,6 +371,14 @@ pre {
369
371
  transition: color var(--ks-duration-fast) var(--ks-ease-out);
370
372
  }
371
373
 
374
+ .ks-toggle-track span svg {
375
+ stroke: currentColor;
376
+ stroke-width: 2;
377
+ stroke-linecap: round;
378
+ stroke-linejoin: round;
379
+ fill: none;
380
+ }
381
+
372
382
  .dark .ks-toggle-track span:first-child {
373
383
  color: transparent;
374
384
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kedhar-ui",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "description": "Shared design system for Kedhar's projects — CSS tokens, components, and themes.",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
package/src/components/ThemeToggle.astro CHANGED
@@ -36,7 +36,7 @@ import '../styles/components.css';
36
36
  </span>
37
37
  </div>
38
38
  <div class="ks-toggle-knob" aria-hidden="true">
39
- <svg viewBox="0 0 24 24" fill="none">
39
+ <svg class="ks-icon-sun" viewBox="0 0 24 24" fill="none">
40
40
  <circle cx="12" cy="12" r="5" />
41
41
  <line x1="12" y1="1" x2="12" y2="3" />
42
42
  <line x1="12" y1="21" x2="12" y2="23" />
@@ -47,6 +47,9 @@ import '../styles/components.css';
47
47
  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
48
48
  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
49
49
  </svg>
50
+ <svg class="ks-icon-moon" viewBox="0 0 24 24" fill="none">
51
+ <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
52
+ </svg>
50
53
  </div>
51
54
  </div>
52
55
 
package/src/styles/components.css CHANGED
@@ -167,9 +167,11 @@
167
167
  transition: transform var(--ks-duration-normal) var(--ks-ease-spring);
168
168
  }
169
169
 
170
- .dark .ks-toggle-knob svg {
171
- transform: rotate(90deg);
172
- }
170
+ /* Sun icon visible in light mode, hidden in dark mode */
171
+ .ks-toggle-knob .ks-icon-sun { display: inline; }
172
+ .ks-toggle-knob .ks-icon-moon { display: none; }
173
+ .dark .ks-toggle-knob .ks-icon-sun { display: none; }
174
+ .dark .ks-toggle-knob .ks-icon-moon { display: inline; }
173
175
 
174
176
  /* Track background halves */
175
177
  .ks-toggle-track {
@@ -188,6 +190,14 @@
188
190
  transition: color var(--ks-duration-fast) var(--ks-ease-out);
189
191
  }
190
192
 
193
+ .ks-toggle-track span svg {
194
+ stroke: currentColor;
195
+ stroke-width: 2;
196
+ stroke-linecap: round;
197
+ stroke-linejoin: round;
198
+ fill: none;
199
+ }
200
+
191
201
  .dark .ks-toggle-track span:first-child {
192
202
  color: transparent;
193
203
  }