@techsio/ui-kit 0.0.0

package/src/tokens/components/molecules/_tree-view.css

@@ -0,0 +1,80 @@
+@theme static {
+  /* === BASE TOKEN MAPPING === */
+  --color-tree-bg: var(--color-base);
+  --color-tree-fg: var(--color-fg-primary);
+  --color-tree-border: var(--color-border-primary);
+  --color-tree-icon-hover: var(--color-fg-primary);
+  --color-tree-accent: var(--color-primary);
+
+  /* === STATE VARIATIONS === */
+  --color-tree-node-bg-hover: var(--color-primary-hover);
+  --color-tree-node-bg-selected: transparent;
+  --color-tree-fg-hover: var(--color-fg-reverse);
+  --color-tree-fg-selected: var(--color-tree-accent);
+
+  /* === ROOT === */
+  --color-tree-root-bg: transparent;
+
+  /* === LABEL === */
+  --color-tree-label-fg: var(--color-tree-fg);
+
+  /* === NODE === */
+  --color-tree-ring: var(--color-ring);
+
+  /* === INDENT GUIDE === */
+  --color-tree-indent-bg: var(--color-tree-border);
+  --width-tree-indent: 1px;
+
+  /* === DISABLED STATES === */
+  --opacity-tree-disabled: 60%;
+
+  /* === SPACING === */
+  --tree-indent-per-level: var(--spacing-100);
+  --spacing-tree-icon: var(--spacing-150);
+  --padding-tree-node: var(--spacing-100);
+
+  /* === TYPOGRAPHY === */
+  /* Tree text size */
+  --text-tree-sm: var(--text-sm);
+  --text-tree-md: var(--text-md);
+  --text-tree-lg: var(--text-lg);
+
+  /* Node icon size */
+  --text-tree-icon-sm: var(--text-icon-sm);
+  --text-tree-icon-md: var(--text-icon-md);
+  --text-tree-icon-lg: var(--text-icon-lg);
+
+  --text-tree-indicator-sm: var(--text-icon-md);
+  --text-tree-indicator-md: var(--text-icon-lg);
+  --text-tree-indicator-lg: var(--text-icon-xl);
+
+  /* Tree font weight */
+  --font-weight-tree-label: var(--font-weight-medium);
+
+  /* === BORDERS & RADIUS === */
+  --radius-tree: 0;
+  /* === OPACITY === */
+  --opacity-tree-indent: 100%;
+}
+
+/* Tree Icons - using semantic tokens */
+
+@utility token-icon-tree-node {
+  @apply icon-[mdi--folder];
+}
+
+@utility token-icon-tree-node-open {
+  @apply icon-[mdi--folder-open];
+}
+
+@utility token-icon-tree-item {
+  @apply icon-[mdi--file-document];
+}
+
+@utility token-icon-tree-indicator {
+  @apply icon-[mdi--chevron-right];
+}
+
+@utility token-icon-tree-indicator-open {
+  @apply icon-[mdi--chevron-down];
+}

package/src/tokens/components/molecules/index.css

@@ -0,0 +1,2 @@
+@import "./_pagination.css";
+@import "./_popover.css";

package/src/tokens/components/organisms/_footer.css

@@ -0,0 +1,90 @@
+@theme static {
+  --footer-cols: repeat(auto-fit, minmax(22%, 1fr));
+
+  /* === COLORS === */
+  --color-footer: var(--color-surface);
+
+  /* Background */
+  --color-footer-bg: var(--color-footer);
+  --color-footer-container-bg: var(--color-footer);
+  --color-footer-section-bg: var(--color-footer);
+  --color-footer-list-bg: var(--color-footer);
+  --color-footer-bottom-bg: var(--color-footer);
+
+  /* Foreground */
+  --color-footer-fg-primary: var(--color-fg-primary);
+  --color-footer-fg-secondary: var(--color-fg-secondary);
+
+  --color-footer-title-fg: var(--color-footer-fg-primary);
+  --color-footer-title-fg-hover: var(--color-primary);
+  --color-footer-link-fg: var(--color-footer-fg-secondary);
+  --color-footer-link-fg-hover: var(--color-primary);
+  --color-footer-text-fg: var(--color-footer-fg-secondary);
+
+  /* Divider & Bottom */
+  --color-footer-divider-bg: var(--color-fg-reverse);
+
+  /* === TYPOGRAPHY === */
+  --text-footer-title-sm: var(--text-md);
+  --text-footer-title-md: var(--text-lg);
+  --text-footer-title-lg: var(--text-xl);
+
+  --text-footer-link-sm: var(--text-sm);
+  --text-footer-link-md: var(--text-md);
+  --text-footer-link-lg: var(--text-lg);
+
+  --text-footer-text-sm: var(--text-xs);
+  --text-footer-text-md: var(--text-sm);
+  --text-footer-text-lg: var(--text-md);
+
+  --font-weight-footer-title: var(--font-weight-semibold);
+  --font-weight-footer-link: var(--font-weight-normal);
+
+  /* === SIZES === */
+  --container-footer-sm: var(--container-sm);
+  --container-footer-md: var(--container-md);
+  --container-footer-max: var(--container-max-w);
+
+  /* === SPACING === */
+  /* Root padding */
+  --padding-footer-root-sm: var(--spacing-100);
+  --padding-footer-root-md: var(--spacing-200);
+  --padding-footer-root-lg: var(--spacing-300);
+
+  /* Container spacing */
+  --spacing-footer-container-sm: var(--spacing-300);
+  --spacing-footer-container-md: var(--spacing-400);
+  --spacing-footer-container-lg: var(--spacing-500);
+
+  /* Section spacing */
+  --spacing-footer-section-sm: var(--spacing-50);
+  --spacing-footer-section-md: var(--spacing-100);
+  --spacing-footer-section-lg: var(--spacing-150);
+
+  /* List spacing */
+  --spacing-footer-list-gap: var(--spacing-100);
+  --spacing-footer-list-gap-sm: var(--spacing-50);
+  --spacing-footer-list-gap-md: var(--spacing-100);
+  --spacing-footer-list-gap-lg: var(--spacing-150);
+
+  /* Bottom padding */
+  --padding-footer-bottom: var(--spacing-300);
+  --padding-footer-bottom-sm: var(--spacing-200);
+  --padding-footer-bottom-md: var(--spacing-300);
+  --padding-footer-bottom-lg: var(--spacing-400);
+
+  /* Divider margins */
+  --margin-footer-divider-sm: var(--spacing-200);
+  --margin-footer-divider-md: var(--spacing-300);
+  --margin-footer-divider-lg: var(--spacing-400);
+
+  /* === BORDERS & EFFECTS === */
+  --border-width-footer: var(--border-width-md);
+  --color-footer-border: var(--color-red-600);
+  --height-footer-divider: 2px;
+
+  --radius-footer: 0;
+
+  /* === BREAKPOINTS === */
+  --breakpoint-footer-mobile: 768px;
+}

package/src/tokens/components/organisms/_header.css

@@ -0,0 +1,86 @@
+:root {
+  @media (width < 48rem) {
+    --spacing-header-nav-sm: var(--spacing-50);
+    --spacing-header-nav-md: var(--spacing-100);
+    --spacing-header-nav-lg: var(--spacing-150);
+  }
+}
+
+@theme static {
+  /* === REFERENCE LAYER === */
+  /* These tokens reference semantic tokens from _semantic.css */
+  --color-header: var(--color-surface);
+  --color-header-accent: var(--color-primary);
+
+  /* Reference typhography */
+  --text-header-sm: var(--text-sm);
+  --text-header-md: var(--text-md);
+  --text-header-lg: var(--text-lg);
+
+  /* === DERIVED COLORS === */
+  /* Background colors */
+  --color-header-bg: var(--color-header);
+
+  /* === ITEMS === */
+  --color-header-nav-item-bg: transparent;
+  --color-header-nav-item-bg-hover: transparent;
+
+  --text-header-item-sm: var(--text-header-sm);
+  --text-header-item-md: var(--text-header-md);
+  --text-header-item-lg: var(--text-header-lg);
+
+  /* === ACTIONS === */
+
+  /* Foreground colors */
+  --color-header-fg: var(--color-fg-primary);
+  --color-header-nav-fg: var(--color-fg-secondary);
+  --color-header-nav-fg-hover: var(--color-header-fg);
+  --color-header-nav-fg-active: var(--color-header-accent);
+  --color-header-actions-fg: var(--color-primary);
+  --color-header-actions-fg-hover: var(--color-header-fg);
+
+  /* Border colors */
+
+  /* === SIZE === */
+  /* Width constraints */
+  --width-header-max: 100%;
+
+  /* === SPACING === */
+  /* Section spacing */
+  --spacing-header-container: var(--spacing-100);
+
+  --padding-header-item-sm: var(--spacing-100);
+  --padding-header-item-md: var(--spacing-150);
+  --padding-header-item-lg: var(--spacing-200);
+
+  --spacing-header-nav-sm: var(--spacing-200);
+  --spacing-header-nav-md: var(--spacing-300);
+  --spacing-header-nav-lg: var(--spacing-400);
+
+  --spacing-header-actions-sm: var(--spacing-200);
+  --spacing-header-actions-md: var(--spacing-300);
+  --spacing-header-actions-lg: var(--spacing-400);
+
+  /* === TYPOGRAPHY === */
+  --font-weight-header-nav: var(--font-weight-medium);
+  --font-weight-header-nav-active: var(--font-weight-semibold);
+
+  /* === Z-INDEX === */
+  /* Mobile menu hamburger colors */
+  --color-header-hamburger-fg: var(--color-fg-primary);
+  --color-header-hamburger-fg-hover: var(--color-fg-secondary);
+
+  /* hamburger button */
+  --text-header-hamburger-sm: var(--text-header-sm);
+  --text-header-hamburger-md: var(--text-header-md);
+  --text-header-hamburger-lg: var(--text-header-lg);
+
+  --padding-header-hamburger-sm: var(--spacing-100);
+  --padding-header-hamburger-md: var(--spacing-150);
+  --padding-header-hamburger-lg: var(--spacing-200);
+
+  /* breakpoint */
+  --container-header-desktop: 48rem;
+
+  --duration-header: 300ms;
+}

package/src/tokens/components/organisms/_table.css

@@ -0,0 +1,63 @@
+@theme static {
+  /* === BASE COLOR MAPPING === */
+  --color-table: var(--color-surface);
+  --color-table-border: var(--color-border-primary);
+  --color-table-accent: var(--color-primary);
+
+  /* === DERIVED COLORS === */
+  /* Background colors */
+  --color-table-bg: var(--color-table);
+  --color-table-header-bg: oklch(
+    from var(--color-table-bg) calc(l - var(--surface-increment)) c h
+  );
+  --color-table-footer-bg: var(--color-table-header-bg);
+  --color-table-row-bg: transparent;
+  --color-table-row-bg-hover: oklch(
+    from var(--color-table-bg) calc(l + var(--state-hover)) c h
+  );
+  --color-table-row-bg-selected: --alpha(var(--color-table-accent) / 0.1);
+  --color-table-row-striped-bg-primary: oklch(
+    from var(--color-table-bg) calc(l - var(--surface-increment)) c h
+  );
+  --color-table-row-striped-bg-secondary: var(--color-table-row-bg);
+
+  /* Foreground colors */
+  --color-table-fg: var(--color-fg-primary);
+  --color-table-header-fg: var(--color-fg-primary);
+  --color-table-footer-fg: var(--color-fg-secondary);
+  --color-table-caption-fg: var(--color-fg-secondary);
+
+  /* === SPACING === */
+  /* Cell padding */
+  --padding-table-cell-sm: var(--spacing-100) var(--spacing-150);
+  --padding-table-cell-md: var(--spacing-150) var(--spacing-200);
+  --padding-table-cell-lg: var(--spacing-200) var(--spacing-250);
+
+  /* Caption padding */
+  --padding-table-caption-sm: var(--spacing-100);
+  --padding-table-caption-md: var(--spacing-150);
+  --padding-table-caption-lg: var(--spacing-200);
+
+  /* === TYPOGRAPHY === */
+  /* Font weights */
+  --font-weight-table-header: var(--font-weight-semibold);
+  --font-weight-table-footer: var(--font-weight-medium);
+  --font-weight-table-caption: var(--font-weight-normal);
+
+  /* Text sizes for table content */
+  --text-table-sm: var(--text-sm);
+  --text-table-md: var(--text-md);
+  --text-table-lg: var(--text-lg);
+
+  /* Caption text sizes */
+  --text-table-caption-sm: var(--text-xs);
+  --text-table-caption-md: var(--text-sm);
+  --text-table-caption-lg: var(--text-md);
+
+  /* === BORDERS & RADIUS === */
+  --border-width-table: var(--border-width-sm);
+  --radius-table: var(--radius-sm);
+
+  /* === SHADOWS === */
+  --shadow-table-outline: var(--shadow-sm);
+}

package/src/tokens/index.css

@@ -0,0 +1,67 @@
+@import "tailwindcss";
+@plugin 'tailwindcss-animate';
+
+/* Primitive tokens */
+@import "./_base.css";
+@import "./_colors.css";
+@import "./_spacing.css";
+@import "./_typography.css";
+@import "./_layout.css";
+
+/* Semantic tokens (dependent on primitives) */
+@import "./_semantic.css";
+
+/* Component tokens (dependent on semantic) */
+@import "./components/components.css";
+
+:root {
+  color-scheme: light dark;
+}
+
+.light {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+.always-light {
+  color-scheme: light;
+}
+
+.always-dark {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  .reverse {
+    color-scheme: dark;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .reverse {
+    color-scheme: light;
+  }
+}
+
+.light .reverse {
+  color-scheme: dark;
+}
+
+.dark .reverse {
+  color-scheme: light;
+}
+
+body {
+  background-color: var(--color-base);
+  color: var(--color-fg-primary);
+
+  font-family: system-ui, sans-serif;
+}
+
+.sbdocs-preview {
+  background-color: var(--color-base) !important;
+  color: var(--color-fg-primary) !important;
+}

package/src/tokens/tokens-only.css

@@ -0,0 +1,66 @@
+/* Tokens only - without Tailwind import */
+/* This file is for apps that import Tailwind themselves */
+
+/* Primitive tokens */
+@import "./_base.css";
+@import "./_colors.css";
+@import "./_spacing.css";
+@import "./_typography.css";
+
+/* Semantic tokens (dependent on primitives) */
+@import "./_semantic.css";
+
+/* Component tokens (dependent on semantic) */
+@import "./components/components.css";
+
+/* Base styles */
+:root {
+  color-scheme: light dark;
+}
+
+.light {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+.always-light {
+  color-scheme: light;
+}
+
+.always-dark {
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: light) {
+  .reverse {
+    color-scheme: dark;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .reverse {
+    color-scheme: light;
+  }
+}
+
+.light .reverse {
+  color-scheme: dark;
+}
+
+.dark .reverse {
+  color-scheme: light;
+}
+
+body {
+  background-color: var(--color-base);
+  color: var(--color-fg-primary);
+  font-family: system-ui, sans-serif;
+}
+
+.sbdocs-preview {
+  background-color: var(--color-base) !important;
+  color: var(--color-fg-primary) !important;
+}