@wtasnorg/candi 0.0.22

package/dist/components.css

@@ -0,0 +1,203 @@
+/*
+ * Scandinavian Theme - Component Classes
+ */
+
+/* Cards */
+.candi-card {
+    background-color: var(--candi-surface);
+    border: 1px solid var(--candi-border);
+    border-radius: 1rem;
+    padding: 2.5rem;
+    box-shadow: var(--candi-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.candi-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--candi-shadow-md);
+}
+
+.candi-card-elevated {
+    background-color: var(--candi-elevated);
+    border: none;
+    border-radius: 1.25rem;
+    padding: 3rem;
+    box-shadow: var(--candi-shadow-md);
+}
+
+/* Buttons */
+.candi-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.625rem;
+    padding: 1rem 2rem;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    border-radius: 0.75rem;
+    border: none;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    min-height: 3.25rem;
+}
+
+.candi-btn-primary {
+    background-color: var(--candi-accent);
+    color: white;
+}
+
+.candi-btn-primary:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.candi-btn-secondary {
+    background-color: transparent;
+    color: var(--candi-text);
+    border: 1.5px solid var(--candi-border-strong);
+}
+
+.candi-btn-secondary:hover {
+    background-color: var(--candi-surface);
+}
+
+.candi-btn-warm {
+    background-color: var(--candi-secondary);
+    color: white;
+}
+
+.candi-btn-ghost {
+    background-color: transparent;
+    color: var(--candi-accent);
+}
+
+.candi-btn-ghost:hover {
+    background-color: var(--candi-accent-subtle);
+}
+
+/* Form Inputs */
+.candi-input {
+    width: 100%;
+    padding: 1rem 1.25rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    background-color: var(--candi-elevated);
+    border: 1.5px solid var(--candi-border-strong);
+    border-radius: 0.75rem;
+    color: var(--candi-text);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    min-height: 3.5rem;
+}
+
+.candi-input::placeholder {
+    color: var(--candi-text-muted);
+}
+
+.candi-input:hover {
+    border-color: var(--candi-text-muted);
+}
+
+.candi-input:focus {
+    outline: none;
+    border-color: var(--candi-accent);
+    box-shadow: 0 0 0 4px var(--candi-focus-ring);
+}
+
+.candi-label {
+    display: block;
+    margin-bottom: 0.625rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--candi-text-subtle);
+    letter-spacing: 0.02em;
+}
+
+.candi-input-group {
+    margin-bottom: 1.75rem;
+}
+
+/* Navigation */
+.candi-nav {
+    background-color: var(--candi-elevated);
+    border-bottom: 1px solid var(--candi-border);
+    padding: 1.25rem 2rem;
+}
+
+.candi-nav-link {
+    color: var(--candi-text-subtle);
+    font-size: 0.9375rem;
+    font-weight: 450;
+    padding: 0.75rem 1.25rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+    text-decoration: none;
+}
+
+.candi-nav-link:hover,
+.candi-nav-link.active {
+    color: var(--candi-text);
+    background-color: var(--candi-surface);
+}
+
+/* Badges */
+.candi-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    border-radius: 2rem;
+    background-color: var(--candi-surface);
+    color: var(--candi-text-subtle);
+}
+
+.candi-badge-accent {
+    background-color: var(--candi-accent-subtle);
+    color: var(--candi-accent);
+}
+
+.candi-badge-warm {
+    background-color: var(--candi-secondary-subtle);
+    color: var(--candi-secondary);
+}
+
+/* Divider */
+.candi-divider {
+    height: 1px;
+    background-color: var(--candi-border);
+    border: none;
+    margin: 2.5rem 0;
+}
+
+/* Theme Toggle */
+.candi-theme-toggle {
+    width: 3.5rem;
+    height: 2rem;
+    padding: 0.25rem;
+    background-color: var(--candi-surface);
+    border: 1.5px solid var(--candi-border-strong);
+    border-radius: 2rem;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.candi-theme-toggle::after {
+    content: '';
+    position: absolute;
+    width: 1.375rem;
+    height: 1.375rem;
+    background-color: var(--candi-elevated);
+    border-radius: 50%;
+    top: 50%;
+    left: 0.25rem;
+    transform: translateY(-50%);
+    transition: all 0.3s ease;
+    box-shadow: var(--candi-shadow);
+}
+
+.dark .candi-theme-toggle::after {
+    left: calc(100% - 1.625rem);
+    background-color: var(--candi-accent);
+}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+declare module '@wtasnorg/candi' {
+  export const theme: {
+    colors: { candi: Record<string, string> };
+    spacing: Record<string, string>;
+    fontFamily: Record<string, string[]>;
+    fontSize: Record<string, [string, { lineHeight: string }]>;
+    lineHeight: Record<string, string>;
+    minHeight: Record<string, string>;
+    borderRadius: Record<string, string>;
+    boxShadow: Record<string, string>;
+    transitionDuration: Record<string, string>;
+  };
+  export const plugin: { handler: Function };
+  export default { theme: typeof theme; plugin: typeof plugin };
+}
+
+declare module '@wtasnorg/candi/theme' {
+  const theme: Record<string, any>;
+  export default theme;
+}
+
+declare module '@wtasnorg/candi/plugin' {
+  import { PluginCreator } from 'tailwindcss/types/config';
+  const plugin: PluginCreator;
+  export default plugin;
+}
+
+declare module '@wtasnorg/candi/css' {}
+declare module '@wtasnorg/candi/css/base' {}
+declare module '@wtasnorg/candi/css/components' {}
+declare module '@wtasnorg/candi/css/utilities' {}
+
+// Tailwind CSS v4 support
+declare module '@wtasnorg/candi/v4' {}

package/dist/index.js

@@ -0,0 +1,22 @@
+/**
+ * Scandinavian Theme for Tailwind CSS
+ *
+ * Nordic/Scandinavian design inspired by Hygge & Lagom principles.
+ *
+ * @example
+ * // In tailwind.config.js
+ * const { theme, plugin } = require('@wtasnorg/candi');
+ *
+ * module.exports = {
+ *   theme: { extend: theme },
+ *   plugins: [plugin],
+ * };
+ */
+
+const theme = require('./theme');
+const plugin = require('./plugin');
+
+module.exports = { theme, plugin };
+module.exports.theme = theme;
+module.exports.plugin = plugin;
+module.exports.default = { theme, plugin };

package/dist/index.mjs

@@ -0,0 +1,22 @@
+/**
+ * Scandinavian Theme for Tailwind CSS
+ *
+ * Nordic/Scandinavian design inspired by Hygge & Lagom principles.
+ *
+ * @example
+ * // In tailwind.config.js
+ * const { theme, plugin } = require('@wtasnorg/candi');
+ *
+ * export default {
+ *   theme: { extend: theme },
+ *   plugins: [plugin],
+ * };
+ */
+
+import theme from './theme';
+import plugin from './plugin';
+
+export default { theme, plugin };
+export const theme = theme;
+export const plugin = plugin;
+export const default = { theme, plugin };

package/dist/plugin.js

@@ -0,0 +1,116 @@
+/**
+ * Scandinavian Theme - Tailwind Plugin
+ *
+ * Generates candi-* utility classes for semantic color usage.
+ */
+
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(function ({ addUtilities, addBase, theme, e }) {
+    // Inject CSS custom properties
+    addBase({
+        ':root': {
+            '--candi-bg': 'oklch(98% 0.008 85)',
+            '--candi-surface': 'oklch(95.5% 0.012 85)',
+            '--candi-elevated': 'oklch(100% 0 0)',
+            '--candi-text': 'oklch(28% 0.015 250)',
+            '--candi-text-subtle': 'oklch(50% 0.01 250)',
+            '--candi-text-muted': 'oklch(62% 0.008 250)',
+            '--candi-border': 'oklch(90% 0.008 85)',
+            '--candi-border-strong': 'oklch(82% 0.01 85)',
+            '--candi-divider': 'oklch(88% 0.006 85)',
+            '--candi-accent': 'oklch(52% 0.06 230)',
+            '--candi-accent-subtle': 'oklch(85% 0.03 230)',
+            '--candi-on-accent': 'oklch(100% 0 0)',
+            '--candi-secondary': 'oklch(58% 0.12 55)',
+            '--candi-secondary-subtle': 'oklch(88% 0.04 55)',
+            '--candi-on-secondary': 'oklch(100% 0 0)',
+            '--candi-success': 'oklch(52% 0.08 145)',
+            '--candi-on-success': 'oklch(100% 0 0)',
+            '--candi-warning': 'oklch(68% 0.13 70)',
+            '--candi-on-warning': 'oklch(20% 0.02 70)',
+            '--candi-error': 'oklch(58% 0.12 25)',
+            '--candi-on-error': 'oklch(100% 0 0)',
+            '--candi-info': 'oklch(55% 0.1 240)',
+            '--candi-on-info': 'oklch(100% 0 0)',
+            '--candi-link': 'oklch(50% 0.08 230)',
+            '--candi-disabled': 'oklch(75% 0.005 250)',
+            '--candi-overlay': 'oklch(0% 0 0 / 0.5)',
+            '--candi-scrim': 'oklch(0% 0 0 / 0.32)',
+            '--candi-inverse-surface': 'oklch(25% 0.015 250)',
+            '--candi-inverse-text': 'oklch(92% 0.01 85)',
+            '--candi-focus-ring': 'oklch(52% 0.06 230 / 0.4)',
+            '--candi-shadow': '0 2px 8px rgba(45, 50, 57, 0.06)',
+            '--candi-shadow-md': '0 4px 20px rgba(45, 50, 57, 0.1)',
+            '--candi-shadow-lg': '0 8px 40px rgba(45, 50, 57, 0.15)',
+            '--candi-shadow-color': 'oklch(25% 0.01 250 / 0.15)',
+            '--candi-syntax-keyword': 'oklch(60% 0.15 0)',
+            '--candi-syntax-type': 'oklch(65% 0.12 280)',
+            '--candi-syntax-var': 'oklch(65% 0.1 200)',
+            '--candi-syntax-const': 'oklch(70% 0.14 50)',
+            '--candi-syntax-func': 'oklch(55% 0.12 240)',
+            '--candi-syntax-string': 'oklch(60% 0.12 140)',
+            '--candi-hover': 'oklch(0% 0 0 / 0.05)',
+            '--candi-active': 'oklch(0% 0 0 / 0.1)',
+        },
+        '.dark': {
+            '--candi-bg': 'oklch(18% 0.015 250)',
+            '--candi-surface': 'oklch(22% 0.012 250)',
+            '--candi-elevated': 'oklch(25% 0.015 250)',
+            '--candi-text': 'oklch(92% 0.01 85)',
+            '--candi-text-subtle': 'oklch(72% 0.008 85)',
+            '--candi-text-muted': 'oklch(58% 0.006 85)',
+            '--candi-border': 'oklch(30% 0.01 250)',
+            '--candi-border-strong': 'oklch(40% 0.012 250)',
+            '--candi-divider': 'oklch(28% 0.008 250)',
+            '--candi-accent': 'oklch(62% 0.08 230)',
+            '--candi-accent-subtle': 'oklch(35% 0.04 230)',
+            '--candi-on-accent': 'oklch(15% 0.01 230)',
+            '--candi-secondary': 'oklch(65% 0.12 55)',
+            '--candi-secondary-subtle': 'oklch(30% 0.05 55)',
+            '--candi-on-secondary': 'oklch(15% 0.02 55)',
+            '--candi-success': 'oklch(60% 0.1 145)',
+            '--candi-on-success': 'oklch(15% 0.02 145)',
+            '--candi-warning': 'oklch(72% 0.13 70)',
+            '--candi-on-warning': 'oklch(15% 0.02 70)',
+            '--candi-error': 'oklch(65% 0.12 25)',
+            '--candi-on-error': 'oklch(15% 0.02 25)',
+            '--candi-info': 'oklch(65% 0.1 240)',
+            '--candi-on-info': 'oklch(15% 0.02 240)',
+            '--candi-link': 'oklch(60% 0.08 230)',
+            '--candi-disabled': 'oklch(45% 0.005 250)',
+            '--candi-overlay': 'oklch(0% 0 0 / 0.7)',
+            '--candi-scrim': 'oklch(0% 0 0 / 0.6)',
+            '--candi-inverse-surface': 'oklch(92% 0.008 85)',
+            '--candi-inverse-text': 'oklch(25% 0.015 250)',
+            '--candi-focus-ring': 'oklch(62% 0.08 230 / 0.5)',
+            '--candi-shadow': '0 2px 8px rgba(0, 0, 0, 0.25)',
+            '--candi-shadow-md': '0 4px 20px rgba(0, 0, 0, 0.35)',
+            '--candi-shadow-lg': '0 8px 40px rgba(0, 0, 0, 0.45)',
+            '--candi-shadow-color': 'oklch(0% 0 0 / 0.4)',
+            '--candi-syntax-keyword': 'oklch(70% 0.15 0)',
+            '--candi-syntax-type': 'oklch(75% 0.12 280)',
+            '--candi-syntax-var': 'oklch(75% 0.1 200)',
+            '--candi-syntax-const': 'oklch(80% 0.14 50)',
+            '--candi-syntax-func': 'oklch(65% 0.12 240)',
+            '--candi-syntax-string': 'oklch(70% 0.12 140)',
+            '--candi-hover': 'oklch(100% 0 0 / 0.1)',
+            '--candi-active': 'oklch(100% 0 0 / 0.2)',
+        },
+    });
+
+    // Generate candi-* utilities
+    const colors = theme('colors.candi') || {};
+    const newUtilities = {};
+
+    Object.keys(colors).forEach((key) => {
+        const colorValue = colors[key];
+        newUtilities[`.${e(`bg-candi-${key}`)}`] = { backgroundColor: colorValue };
+        newUtilities[`.${e(`text-candi-${key}`)}`] = { color: colorValue };
+        newUtilities[`.${e(`border-candi-${key}`)}`] = { borderColor: colorValue };
+        newUtilities[`.${e(`fill-candi-${key}`)}`] = { fill: colorValue };
+        newUtilities[`.${e(`stroke-candi-${key}`)}`] = { stroke: colorValue };
+    });
+
+    addUtilities(newUtilities);
+});

package/dist/plugin.mjs

@@ -0,0 +1,116 @@
+/**
+ * Scandinavian Theme - Tailwind Plugin
+ *
+ * Generates candi-* utility classes for semantic color usage.
+ */
+
+import plugin from 'tailwindcss/plugin';
+
+export default plugin(function ({ addUtilities, addBase, theme, e }) {
+    // Inject CSS custom properties
+    addBase({
+        ':root': {
+            '--candi-bg': 'oklch(98% 0.008 85)',
+            '--candi-surface': 'oklch(95.5% 0.012 85)',
+            '--candi-elevated': 'oklch(100% 0 0)',
+            '--candi-text': 'oklch(28% 0.015 250)',
+            '--candi-text-subtle': 'oklch(50% 0.01 250)',
+            '--candi-text-muted': 'oklch(62% 0.008 250)',
+            '--candi-border': 'oklch(90% 0.008 85)',
+            '--candi-border-strong': 'oklch(82% 0.01 85)',
+            '--candi-divider': 'oklch(88% 0.006 85)',
+            '--candi-accent': 'oklch(52% 0.06 230)',
+            '--candi-accent-subtle': 'oklch(85% 0.03 230)',
+            '--candi-on-accent': 'oklch(100% 0 0)',
+            '--candi-secondary': 'oklch(58% 0.12 55)',
+            '--candi-secondary-subtle': 'oklch(88% 0.04 55)',
+            '--candi-on-secondary': 'oklch(100% 0 0)',
+            '--candi-success': 'oklch(52% 0.08 145)',
+            '--candi-on-success': 'oklch(100% 0 0)',
+            '--candi-warning': 'oklch(68% 0.13 70)',
+            '--candi-on-warning': 'oklch(20% 0.02 70)',
+            '--candi-error': 'oklch(58% 0.12 25)',
+            '--candi-on-error': 'oklch(100% 0 0)',
+            '--candi-info': 'oklch(55% 0.1 240)',
+            '--candi-on-info': 'oklch(100% 0 0)',
+            '--candi-link': 'oklch(50% 0.08 230)',
+            '--candi-disabled': 'oklch(75% 0.005 250)',
+            '--candi-overlay': 'oklch(0% 0 0 / 0.5)',
+            '--candi-scrim': 'oklch(0% 0 0 / 0.32)',
+            '--candi-inverse-surface': 'oklch(25% 0.015 250)',
+            '--candi-inverse-text': 'oklch(92% 0.01 85)',
+            '--candi-focus-ring': 'oklch(52% 0.06 230 / 0.4)',
+            '--candi-shadow': '0 2px 8px rgba(45, 50, 57, 0.06)',
+            '--candi-shadow-md': '0 4px 20px rgba(45, 50, 57, 0.1)',
+            '--candi-shadow-lg': '0 8px 40px rgba(45, 50, 57, 0.15)',
+            '--candi-shadow-color': 'oklch(25% 0.01 250 / 0.15)',
+            '--candi-syntax-keyword': 'oklch(60% 0.15 0)',
+            '--candi-syntax-type': 'oklch(65% 0.12 280)',
+            '--candi-syntax-var': 'oklch(65% 0.1 200)',
+            '--candi-syntax-const': 'oklch(70% 0.14 50)',
+            '--candi-syntax-func': 'oklch(55% 0.12 240)',
+            '--candi-syntax-string': 'oklch(60% 0.12 140)',
+            '--candi-hover': 'oklch(0% 0 0 / 0.05)',
+            '--candi-active': 'oklch(0% 0 0 / 0.1)',
+        },
+        '.dark': {
+            '--candi-bg': 'oklch(18% 0.015 250)',
+            '--candi-surface': 'oklch(22% 0.012 250)',
+            '--candi-elevated': 'oklch(25% 0.015 250)',
+            '--candi-text': 'oklch(92% 0.01 85)',
+            '--candi-text-subtle': 'oklch(72% 0.008 85)',
+            '--candi-text-muted': 'oklch(58% 0.006 85)',
+            '--candi-border': 'oklch(30% 0.01 250)',
+            '--candi-border-strong': 'oklch(40% 0.012 250)',
+            '--candi-divider': 'oklch(28% 0.008 250)',
+            '--candi-accent': 'oklch(62% 0.08 230)',
+            '--candi-accent-subtle': 'oklch(35% 0.04 230)',
+            '--candi-on-accent': 'oklch(15% 0.01 230)',
+            '--candi-secondary': 'oklch(65% 0.12 55)',
+            '--candi-secondary-subtle': 'oklch(30% 0.05 55)',
+            '--candi-on-secondary': 'oklch(15% 0.02 55)',
+            '--candi-success': 'oklch(60% 0.1 145)',
+            '--candi-on-success': 'oklch(15% 0.02 145)',
+            '--candi-warning': 'oklch(72% 0.13 70)',
+            '--candi-on-warning': 'oklch(15% 0.02 70)',
+            '--candi-error': 'oklch(65% 0.12 25)',
+            '--candi-on-error': 'oklch(15% 0.02 25)',
+            '--candi-info': 'oklch(65% 0.1 240)',
+            '--candi-on-info': 'oklch(15% 0.02 240)',
+            '--candi-link': 'oklch(60% 0.08 230)',
+            '--candi-disabled': 'oklch(45% 0.005 250)',
+            '--candi-overlay': 'oklch(0% 0 0 / 0.7)',
+            '--candi-scrim': 'oklch(0% 0 0 / 0.6)',
+            '--candi-inverse-surface': 'oklch(92% 0.008 85)',
+            '--candi-inverse-text': 'oklch(25% 0.015 250)',
+            '--candi-focus-ring': 'oklch(62% 0.08 230 / 0.5)',
+            '--candi-shadow': '0 2px 8px rgba(0, 0, 0, 0.25)',
+            '--candi-shadow-md': '0 4px 20px rgba(0, 0, 0, 0.35)',
+            '--candi-shadow-lg': '0 8px 40px rgba(0, 0, 0, 0.45)',
+            '--candi-shadow-color': 'oklch(0% 0 0 / 0.4)',
+            '--candi-syntax-keyword': 'oklch(70% 0.15 0)',
+            '--candi-syntax-type': 'oklch(75% 0.12 280)',
+            '--candi-syntax-var': 'oklch(75% 0.1 200)',
+            '--candi-syntax-const': 'oklch(80% 0.14 50)',
+            '--candi-syntax-func': 'oklch(65% 0.12 240)',
+            '--candi-syntax-string': 'oklch(70% 0.12 140)',
+            '--candi-hover': 'oklch(100% 0 0 / 0.1)',
+            '--candi-active': 'oklch(100% 0 0 / 0.2)',
+        },
+    });
+
+    // Generate candi-* utilities
+    const colors = theme('colors.candi') || {};
+    const newUtilities = {};
+
+    Object.keys(colors).forEach((key) => {
+        const colorValue = colors[key];
+        newUtilities[`.${e(`bg-candi-${key}`)}`] = { backgroundColor: colorValue };
+        newUtilities[`.${e(`text-candi-${key}`)}`] = { color: colorValue };
+        newUtilities[`.${e(`border-candi-${key}`)}`] = { borderColor: colorValue };
+        newUtilities[`.${e(`fill-candi-${key}`)}`] = { fill: colorValue };
+        newUtilities[`.${e(`stroke-candi-${key}`)}`] = { stroke: colorValue };
+    });
+
+    addUtilities(newUtilities);
+});