@slexkit/theme-shadcn 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Simgor001
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @slexkit/theme-shadcn
+
+Official default SlexKit theme CSS built from the same source as `slexkit/dist/style.css`.
+
+```js
+import "@slexkit/theme-shadcn/style.css";
+```
+
+For smaller bundles, import the fallback tokens/base styles and only the component styles you render:
+
+```js
+import "@slexkit/theme-shadcn/base.css";
+import "@slexkit/theme-shadcn/components/button.css";
+import "@slexkit/theme-shadcn/components/select.css";
+```

package/base.css

@@ -0,0 +1,621 @@
+:root {
+color-scheme: light;
+}
+
+:root:where(.dark, [data-theme="dark"]) {
+color-scheme: dark;
+}
+
+.slexkit-theme-uno,
+.slexkit-theme-flowbite,
+body.slexkit-theme-uno {
+color-scheme: light;
+--background: #fff;
+--foreground: oklch(14.1% 0.005 285.823);
+--card: #fff;
+--card-foreground: oklch(14.1% 0.005 285.823);
+--popover: #fff;
+--popover-foreground: oklch(14.1% 0.005 285.823);
+--primary: oklch(21% 0.006 285.885);
+--primary-foreground: oklch(98.5% 0 0);
+--secondary: oklch(96.7% 0.001 286.375);
+--secondary-foreground: oklch(21% 0.006 285.885);
+--muted: oklch(96.7% 0.001 286.375);
+--muted-foreground: oklch(55.2% 0.016 285.938);
+--accent: oklch(96.7% 0.001 286.375);
+--accent-foreground: oklch(21% 0.006 285.885);
+--info: oklch(48.8% 0.243 264.376);
+--info-foreground: #fff;
+--success: oklch(59.6% 0.145 163.225);
+--success-foreground: #fff;
+--warning: oklch(66.6% 0.179 58.318);
+--warning-foreground: oklch(14.1% 0.005 285.823);
+--destructive: oklch(57.7% 0.245 27.325);
+--destructive-foreground: oklch(98.5% 0 0);
+--border: oklch(92% 0.004 286.32);
+--input: oklch(92% 0.004 286.32);
+--ring: oklch(14.1% 0.005 285.823);
+--radius: 0.5rem;
+--slex-control-height: 2.25rem;
+--slex-primary-50: oklch(98.5% 0 0);
+--slex-primary-100: oklch(96.7% 0.001 286.375);
+--slex-primary-200: oklch(92% 0.004 286.32);
+--slex-primary-300: oklch(87.1% 0.006 286.286);
+--slex-primary-400: oklch(70.5% 0.015 286.067);
+--slex-primary-500: oklch(55.2% 0.016 285.938);
+--slex-primary-600: oklch(44.2% 0.017 285.786);
+--slex-primary-700: oklch(37% 0.013 285.805);
+--slex-primary-800: oklch(27.4% 0.006 286.033);
+--slex-primary-900: oklch(21% 0.006 285.885);
+--slex-primary-950: oklch(14.1% 0.005 285.823);
+}
+
+:where(.dark, [data-theme="dark"]) .slexkit-theme-uno,
+.slexkit-theme-uno:where(.dark, [data-theme="dark"]),
+:where(.dark, [data-theme="dark"]) .slexkit-theme-flowbite,
+.slexkit-theme-flowbite:where(.dark, [data-theme="dark"]),
+:where(.dark, [data-theme="dark"]) body.slexkit-theme-uno,
+body.slexkit-theme-uno:where(.dark, [data-theme="dark"]) {
+color-scheme: dark;
+--background: oklch(14.1% 0.005 285.823);
+--foreground: oklch(98.5% 0 0);
+--card: oklch(21% 0.006 285.885);
+--card-foreground: oklch(98.5% 0 0);
+--popover: oklch(21% 0.006 285.885);
+--popover-foreground: oklch(98.5% 0 0);
+--primary: oklch(98.5% 0 0);
+--primary-foreground: oklch(14.1% 0.005 285.823);
+--secondary: oklch(27.4% 0.006 286.033);
+--secondary-foreground: oklch(98.5% 0 0);
+--muted: oklch(27.4% 0.006 286.033);
+--muted-foreground: oklch(70.5% 0.015 286.067);
+--accent: oklch(27.4% 0.006 286.033);
+--accent-foreground: oklch(98.5% 0 0);
+--info: oklch(62.3% 0.214 259.815);
+--info-foreground: oklch(14.1% 0.005 285.823);
+--success: oklch(76.5% 0.177 163.223);
+--success-foreground: oklch(14.1% 0.005 285.823);
+--warning: oklch(82.8% 0.189 84.429);
+--warning-foreground: oklch(14.1% 0.005 285.823);
+--destructive: oklch(70.4% 0.191 22.216);
+--destructive-foreground: oklch(14.1% 0.005 285.823);
+--border: oklch(27.4% 0.006 286.033);
+--input: oklch(37% 0.013 285.805);
+--ring: oklch(87.1% 0.006 286.286);
+--radius: 0.5rem;
+--slex-control-height: 2.25rem;
+--slex-primary-50: oklch(98.5% 0 0);
+--slex-primary-100: oklch(96.7% 0.001 286.375);
+--slex-primary-200: oklch(92% 0.004 286.32);
+--slex-primary-300: oklch(87.1% 0.006 286.286);
+--slex-primary-400: oklch(70.5% 0.015 286.067);
+--slex-primary-500: oklch(55.2% 0.016 285.938);
+--slex-primary-600: oklch(44.2% 0.017 285.786);
+--slex-primary-700: oklch(37% 0.013 285.805);
+--slex-primary-800: oklch(27.4% 0.006 286.033);
+--slex-primary-900: oklch(21% 0.006 285.885);
+--slex-primary-950: oklch(14.1% 0.005 285.823);
+}
+
+/* layout.css */
+
+.slexkit-root {
+  --font-sans:
+    "Geist", "Geist Sans", "Noto Sans SC", "Noto Sans", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono:
+    "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code",
+    Consolas, monospace;
+  font-family: var(
+    --font-sans,
+    "Geist",
+    "Geist Sans",
+    "Noto Sans SC",
+    "Noto Sans",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif
+  );
+  color: var(--foreground);
+  background: transparent;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.slexkit-root,
+.slexkit-root *,
+.slexkit-root *::before,
+.slexkit-root *::after {
+  box-sizing: border-box;
+}
+
+body[data-mobile-nav-open] {
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+#mobileNav {
+  --mobile-nav-backdrop-opacity: 0;
+  --mobile-nav-panel-translate: -100%;
+  pointer-events: none;
+}
+
+#mobileNav[data-open="true"] {
+  --mobile-nav-backdrop-opacity: 1;
+  --mobile-nav-panel-translate: 0px;
+  pointer-events: auto;
+}
+
+#mobileNav [data-mobile-nav-backdrop] {
+  opacity: var(--mobile-nav-backdrop-opacity);
+  touch-action: pan-y;
+  transition: opacity 180ms ease;
+}
+
+#mobileNav [data-mobile-nav-panel] {
+  transform: translateX(var(--mobile-nav-panel-translate));
+  touch-action: pan-y;
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
+#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #mobileNav [data-mobile-nav-backdrop],
+  #mobileNav [data-mobile-nav-panel] {
+    transition: none;
+  }
+}
+
+.slexkit-for-wrapper {
+  display: contents;
+}
+
+.slexkit-source-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.slexkit-source-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 0.625rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
+}
+
+.slexkit-source-button:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+  border-color: var(--border);
+}
+
+.slexkit-source-button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.slexkit-preview {
+  width: 100%;
+}
+
+.slex-layout {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.slex-layout > .slex-row {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.slex-layout .slex-text {
+  color: var(--foreground);
+}
+
+.slex-layout .slex-text--muted {
+  color: var(--muted-foreground);
+}
+
+.slex-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+  background: var(--card);
+  color: var(--card-foreground);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) + 4px);
+  padding: 1.25rem;
+  box-shadow: var(--shadow-sm);
+  transition:
+    box-shadow 150ms ease,
+    border-color 150ms ease;
+}
+
+.slex-card:hover {
+  border-color: var(--border);
+  box-shadow: var(--shadow-md);
+}
+
+.slex-card-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--card-foreground);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.slex-card-body {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.slex-column {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.slex-row {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.slex-row > * {
+  min-width: 0;
+}
+
+.slex-row--balanced-tiles {
+  --slex-balanced-tile-width: 136px;
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(var(--slex-balanced-tracks, var(--slex-balanced-cols)), minmax(0, 1fr));
+  justify-content: stretch;
+  align-items: stretch;
+}
+
+.slex-row--balanced-tiles > :is(.slex-stat, .slex-card) {
+  width: 100%;
+}
+
+.slex-grid {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.slex-grid {
+  grid-template-columns: 1fr;
+}
+.slex-grid[data-cols="1"] {
+  grid-template-columns: 1fr;
+}
+.slex-grid[data-cols="2"] {
+  grid-template-columns: repeat(2, 1fr);
+}
+.slex-grid[data-cols="3"] {
+  grid-template-columns: repeat(3, 1fr);
+}
+.slex-grid[data-cols="4"] {
+  grid-template-columns: repeat(4, 1fr);
+}
+.slex-grid[data-cols="5"] {
+  grid-template-columns: repeat(5, 1fr);
+}
+.slex-grid[data-cols="6"] {
+  grid-template-columns: repeat(6, 1fr);
+}
+.slex-grid[data-cols="12"] {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+@media (min-width: 640px) {
+  .slex-grid[data-cols-sm="1"] {
+    grid-template-columns: 1fr;
+  }
+  .slex-grid[data-cols-sm="2"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .slex-grid[data-cols-sm="3"] {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .slex-grid[data-cols-sm="4"] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .slex-grid[data-cols-sm="5"] {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .slex-grid[data-cols-sm="6"] {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .slex-grid[data-cols-sm="12"] {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .slex-grid[data-cols-md="1"] {
+    grid-template-columns: 1fr;
+  }
+  .slex-grid[data-cols-md="2"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .slex-grid[data-cols-md="3"] {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .slex-grid[data-cols-md="4"] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .slex-grid[data-cols-md="5"] {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .slex-grid[data-cols-md="6"] {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .slex-grid[data-cols-md="12"] {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .slex-grid[data-cols-lg="1"] {
+    grid-template-columns: 1fr;
+  }
+  .slex-grid[data-cols-lg="2"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .slex-grid[data-cols-lg="3"] {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .slex-grid[data-cols-lg="4"] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .slex-grid[data-cols-lg="5"] {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .slex-grid[data-cols-lg="6"] {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .slex-grid[data-cols-lg="12"] {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@media (min-width: 1280px) {
+  .slex-grid[data-cols-xl="1"] {
+    grid-template-columns: 1fr;
+  }
+  .slex-grid[data-cols-xl="2"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .slex-grid[data-cols-xl="3"] {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .slex-grid[data-cols-xl="4"] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .slex-grid[data-cols-xl="5"] {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .slex-grid[data-cols-xl="6"] {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .slex-grid[data-cols-xl="12"] {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@media (max-width: 639px) {
+  .slex-card {
+    padding: 1rem;
+  }
+
+  .slex-row {
+    align-items: stretch;
+  }
+
+  .slex-grid[data-cols],
+  .slex-grid[data-cols="2"],
+  .slex-grid[data-cols="3"],
+  .slex-grid[data-cols="4"],
+  .slex-grid[data-cols="5"],
+  .slex-grid[data-cols="6"],
+  .slex-grid[data-cols="12"] {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* theme.css */
+
+.slexkit-root {
+  color: var(--foreground, #111827);
+  background: transparent;
+  font-family: var(
+    --font-sans,
+    "Geist",
+    "Geist Sans",
+    "Noto Sans SC",
+    "Noto Sans",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif
+  );
+}
+
+.slexkit-theme-host-shadcn {
+  --slex-primary-50: color-mix(in srgb, var(--primary, #4A90E2) 8%, white);
+  --slex-primary-100: color-mix(in srgb, var(--primary, #4A90E2) 14%, white);
+  --slex-primary-200: color-mix(in srgb, var(--primary, #4A90E2) 25%, white);
+  --slex-primary-300: color-mix(in srgb, var(--primary, #4A90E2) 38%, white);
+  --slex-primary-400: color-mix(in srgb, var(--primary, #4A90E2) 62%, white);
+  --slex-primary-500: var(--primary, #4A90E2);
+  --slex-primary-600: color-mix(in srgb, var(--primary, #4A90E2) 82%, black);
+  --slex-primary-700: color-mix(in srgb, var(--primary, #4A90E2) 74%, black);
+  --slex-primary-800: color-mix(in srgb, var(--primary, #4A90E2) 65%, black);
+  --slex-primary-900: color-mix(in srgb, var(--primary, #4A90E2) 56%, black);
+  --slex-primary-950: color-mix(in srgb, var(--primary, #4A90E2) 44%, black);
+}
+
+/* animation.css */
+
+@keyframes slex-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slex-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@keyframes slex-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slex-slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+}
+
+@keyframes slex-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.slex-fade-in {
+  animation: slex-fade-in 0.3s ease-out;
+}
+
+.slex-fade-out {
+  animation: slex-fade-out 0.3s ease-out;
+}
+
+.slex-slide-in {
+  animation: slex-slide-in 0.3s ease-out;
+}
+
+.slex-slide-out {
+  animation: slex-slide-out 0.3s ease-out;
+}
+
+.slex-pulse {
+  animation: slex-pulse 2s ease-in-out infinite;
+}
+
+.slex-enter {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+@keyframes slex-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.slex-scale-in {
+  animation-name: slex-scale-in;
+}
+
+@media (max-width: 640px) {
+  .slex-card {
+    padding: 1rem;
+  }
+
+  .slex-stat-value {
+    font-size: 1.25rem;
+  }
+}
+
+/* entry.css */
+
+.slex-icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.slex-icon svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}