@bookklik/senangstart-css 0.1.3 → 0.1.4

package/dist/senangstart-css.js

@@ -80,7 +80,11 @@
         'high':   '100',
         'top':    '9999'
       }
-    }
+    },
+    // Dark mode configuration
+    // 'media' - Uses @media (prefers-color-scheme: dark)
+    // 'selector' - Uses .dark class on html/body
+    darkMode: 'media'
   };
 
   // ============================================
@@ -195,7 +199,7 @@
   // ============================================
   
   const breakpoints = ['mob', 'tab', 'lap', 'desk'];
-  const states = ['hover', 'focus', 'active', 'disabled'];
+  const states = ['hover', 'focus', 'active', 'disabled', 'dark'];
 
   function parseToken(raw) {
     const token = {
@@ -367,7 +371,8 @@
     if (!cssDeclaration) return '';
 
     let selector = `[${attrType}~="${raw}"]`;
-    if (token.state) {
+    // Add pseudo-class for states (but not for 'dark' - handled separately)
+    if (token.state && token.state !== 'dark') {
       selector += `:${token.state}`;
     }
 
@@ -409,6 +414,7 @@
     let css = generateCSSVariables(config);
     
     const baseRules = [];
+    const darkRules = [];
     const mediaRules = {
       mob: [],
       tab: [],
@@ -420,12 +426,18 @@
       for (const raw of values) {
         const rule = generateRule(raw, attrType);
         if (rule) {
+          // Check for dark: prefix
+          if (raw.match(/^(mob:|tab:|lap:|desk:)?dark:/)) {
+            darkRules.push(rule);
+          }
           // Check for breakpoint prefix
-          const bpMatch = raw.match(/^(mob|tab|lap|desk):/);
-          if (bpMatch) {
-            mediaRules[bpMatch[1]].push(rule);
-          } else {
-            baseRules.push(rule);
+          else {
+            const bpMatch = raw.match(/^(mob|tab|lap|desk):/);
+            if (bpMatch) {
+              mediaRules[bpMatch[1]].push(rule);
+            } else {
+              baseRules.push(rule);
+            }
           }
         }
       }
@@ -444,6 +456,24 @@
       }
     }
 
+    // Add dark mode rules
+    if (darkRules.length > 0) {
+      const darkMode = config.darkMode || 'media';
+      
+      if (darkMode === 'media') {
+        css += `\n@media (prefers-color-scheme: dark) {\n`;
+        css += darkRules.map(r => '  ' + r).join('');
+        css += '}\n';
+      } else {
+        // Selector strategy
+        const darkSelector = Array.isArray(darkMode) ? darkMode[1] : '.dark';
+        css += `\n/* Dark Mode */\n`;
+        for (const rule of darkRules) {
+          css += rule.replace(/^(\[[^\]]+\])/, `${darkSelector} $1`);
+        }
+      }
+    }
+
     return css;
   }
 

package/dist/senangstart-css.min.js

@@ -63,7 +63,8 @@ zIndex: {
 'high':   '100',
 'top':    '9999'
 }
-}
+},
+darkMode: 'media'
 };
 function loadInlineConfig() {
 const configEl = document.querySelector('script[type="senangstart/config"]');
@@ -138,7 +139,7 @@ const layoutKeywords = {
 'sticky': 'position: sticky;'
 };
 const breakpoints = ['mob', 'tab', 'lap', 'desk'];
-const states = ['hover', 'focus', 'active', 'disabled'];
+const states = ['hover', 'focus', 'active', 'disabled', 'dark'];
 function parseToken(raw) {
 const token = {
 raw,
@@ -279,7 +280,7 @@ break;
 }
 if (!cssDeclaration) return '';
 let selector = `[${attrType}~="${raw}"]`;
-if (token.state) {
+if (token.state && token.state !== 'dark') {
 selector += `:${token.state}`;
 }
 return `${selector} { ${cssDeclaration} }\n`;
@@ -306,6 +307,7 @@ return tokens;
 function compileCSS(tokens, config) {
 let css = generateCSSVariables(config);
 const baseRules = [];
+const darkRules = [];
 const mediaRules = {
 mob: [],
 tab: [],
@@ -316,6 +318,10 @@ for (const [attrType, values] of Object.entries(tokens)) {
 for (const raw of values) {
 const rule = generateRule(raw, attrType);
 if (rule) {
+if (raw.match(/^(mob:|tab:|lap:|desk:)?dark:/)) {
+darkRules.push(rule);
+}
+else {
 const bpMatch = raw.match(/^(mob|tab|lap|desk):/);
 if (bpMatch) {
 mediaRules[bpMatch[1]].push(rule);
@@ -325,6 +331,7 @@ baseRules.push(rule);
 }
 }
 }
+}
 css += baseRules.join('');
 const { screens } = config.theme;
 for (const [bp, rules] of Object.entries(mediaRules)) {
@@ -334,6 +341,20 @@ css += rules.map(r => '  ' + r).join('');
 css += '}\n';
 }
 }
+if (darkRules.length > 0) {
+const darkMode = config.darkMode || 'media';
+if (darkMode === 'media') {
+css += `\n@media (prefers-color-scheme: dark) {\n`;
+css += darkRules.map(r => '  ' + r).join('');
+css += '}\n';
+} else {
+const darkSelector = Array.isArray(darkMode) ? darkMode[1] : '.dark';
+css += `\n\n`;
+for (const rule of darkRules) {
+css += rule.replace(/^(\[[^\]]+\])/, `${darkSelector} $1`);
+}
+}
+}
 return css;
 }
 function injectStyles(css) {

package/docs/.vitepress/cache/deps/_metadata.json

@@ -1,50 +1,29 @@
 {
-  "hash": "503d8545",
-  "configHash": "7a659af5",
-  "lockfileHash": "148e5d09",
-  "browserHash": "31430ee1",
+  "hash": "d06eb655",
+  "configHash": "d3307f65",
+  "lockfileHash": "50ffd037",
+  "browserHash": "086d8429",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "bb09d08e",
+      "fileHash": "a432d3f8",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "1792716f",
+      "fileHash": "af5a81ac",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "97e57308",
-      "needsInterop": false
-    },
-    "vitepress > @vueuse/integrations/useFocusTrap": {
-      "src": "../../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
-      "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
-      "fileHash": "4a67da49",
-      "needsInterop": false
-    },
-    "vitepress > mark.js/src/vanilla.js": {
-      "src": "../../../../node_modules/mark.js/src/vanilla.js",
-      "file": "vitepress___mark__js_src_vanilla__js.js",
-      "fileHash": "ffe975a7",
-      "needsInterop": false
-    },
-    "vitepress > minisearch": {
-      "src": "../../../../node_modules/minisearch/dist/es/index.js",
-      "file": "vitepress___minisearch.js",
-      "fileHash": "da3112be",
+      "fileHash": "cfba6d4a",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-2CLQ7TTZ": {
-      "file": "chunk-2CLQ7TTZ.js"
-    },
     "chunk-LE5NDSFD": {
       "file": "chunk-LE5NDSFD.js"
     }