@bookklik/senangstart-css 0.1.4 → 0.1.7

package/src/compiler/generators/preflight.js

@@ -0,0 +1,379 @@
+/**
+ * SenangStart CSS - Preflight Generator
+ * An opinionated set of base styles similar to Tailwind's Preflight
+ * Built on top of modern-normalize with additional sensible defaults
+ */
+
+/**
+ * Generate Preflight CSS - opinionated base reset styles
+ * @param {Object} config - Configuration object
+ * @returns {string} - Preflight CSS string
+ */
+export function generatePreflight(config) {
+  return `/* 
+ * SenangStart Preflight v1.0
+ * An opinionated set of base styles for SenangStart CSS projects
+ * Based on modern-normalize and Tailwind CSS Preflight
+ */
+
+/*
+ * 1. Prevent padding and border from affecting element width
+ * 2. Allow adding a border to an element by just adding a border-width
+ */
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+/*
+ * 1. Use a consistent sensible line-height in all browsers
+ * 2. Prevent adjustments of font size after orientation changes in iOS
+ * 3. Use a more readable tab size
+ * 4. Use the user's configured sans font-family by default
+ * 5. Use the user's configured sans font-feature-settings by default
+ * 6. Use the user's configured sans font-variation-settings by default
+ * 7. Disable tap highlights on iOS
+ */
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+ * 1. Remove the margin in all browsers
+ * 2. Inherit line-height from html so users can set them as a class directly on the html element
+ */
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+ * 1. Add the correct height in Firefox
+ * 2. Correct the inheritance of border color in Firefox
+ * 3. Ensure horizontal rules are visible by default
+ */
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+ * Add the correct text decoration in Chrome, Edge, and Safari
+ */
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+ * Remove the default font size and weight for headings
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+ * Reset links to optimize for opt-in styling instead of opt-out
+ */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+ * Add the correct font weight in Edge and Safari
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+ * 1. Use the user's configured mono font-family by default
+ * 2. Use the user's configured mono font-feature-settings by default
+ * 3. Use the user's configured mono font-variation-settings by default
+ * 4. Correct the odd em font sizing in all browsers
+ */
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+ * Add the correct font size in all browsers
+ */
+small {
+  font-size: 80%;
+}
+
+/*
+ * Prevent sub and sup elements from affecting the line height in all browsers
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+ * 1. Remove text indentation from table contents in Chrome and Safari
+ * 2. Correct table border color inheritance in all Chrome and Safari
+ * 3. Remove gaps between table borders by default
+ */
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+ * 1. Change the font styles in all browsers
+ * 2. Remove the margin in Firefox and Safari
+ * 3. Remove default padding in all browsers
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+ * Remove the inheritance of text transform in Edge and Firefox
+ */
+button,
+select {
+  text-transform: none;
+}
+
+/*
+ * 1. Correct the inability to style clickable types in iOS and Safari
+ * 2. Remove default button styles
+ */
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+ * Use the modern Firefox focus style for all focusable elements
+ */
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+ * Remove the additional :invalid styles in Firefox
+ */
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+ * Add the correct vertical alignment in Chrome and Firefox
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Safari
+ */
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+ * 1. Correct the odd appearance in Chrome and Safari
+ * 2. Correct the outline style in Safari
+ */
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+ * Remove the inner padding in Chrome and Safari on macOS
+ */
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * 1. Correct the inability to style clickable types in iOS and Safari
+ * 2. Change font properties to inherit in Safari
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+ * Add the correct display in Chrome and Safari
+ */
+summary {
+  display: list-item;
+}
+
+/*
+ * Removes the default spacing and border for appropriate elements
+ */
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+/*
+ * Remove default list styles
+ */
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Reset default styling for dialogs
+ */
+dialog {
+  padding: 0;
+}
+
+/*
+ * Prevent resizing textareas horizontally by default
+ */
+textarea {
+  resize: vertical;
+}
+
+/*
+ * 1. Reset the default placeholder opacity in Firefox
+ * 2. Set the default placeholder color to a semi-transparent gray
+ */
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+ * Set the default cursor for buttons
+ */
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+ * Make sure disabled buttons don't get the pointer cursor
+ */
+:disabled {
+  cursor: default;
+}
+
+/*
+ * 1. Make replaced elements display: block by default
+ * 2. Add vertical-align: middle to align replaced elements more sensibly by default
+ */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+ * Constrain images and videos to the parent width and preserve their intrinsic aspect ratio
+ */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+ * Make elements with the HTML hidden attribute stay hidden by default
+ */
+[hidden] {
+  display: none;
+}
+
+`;
+}
+
+export default { generatePreflight };

package/src/config/defaults.js

@@ -26,12 +26,20 @@ export const defaultConfig = {
   // ['selector', '.custom-dark'] - Uses custom selector
   darkMode: 'media',
 
+  // Preflight: Include opinionated base reset styles
+  // true - Include all preflight styles (default)
+  // false - Disable preflight completely
+  preflight: true,
+
   theme: {
     // 1. SPACING: The "Natural Object" Scale
     // Logic: How big is the object/gap physically?
     spacing: {
       'none':   '0px',      // No space
-      'tiny':   '4px',      // Pebble (Borders, offsets)
+      'thin':   '1px',      // Hairline (for borders)
+      'regular': '2px',     // Standard border
+      'thick':  '3px',      // Bold border
+      'tiny':   '4px',      // Pebble (Small offsets)
       'small':  '8px',      // Matchbox (Grouping inside components)
       'medium': '16px',     // Smartphone (Standard default)
       'big':    '32px',     // Laptop (Separation between groups)
@@ -413,6 +421,16 @@ export function mergeConfig(userConfig = {}) {
     merged.output = { ...merged.output, ...userConfig.output };
   }
   
+  // Handle darkMode setting
+  if (userConfig.darkMode !== undefined) {
+    merged.darkMode = userConfig.darkMode;
+  }
+  
+  // Handle preflight setting
+  if (userConfig.preflight !== undefined) {
+    merged.preflight = userConfig.preflight;
+  }
+  
   if (userConfig.theme) {
     merged.theme = {
       spacing: { ...merged.theme.spacing, ...userConfig.theme?.spacing },

package/src/definitions/index.js

@@ -0,0 +1,153 @@
+/**
+ * SenangStart CSS - Utility Definitions Index
+ * Central export for all utility definitions - the Single Source of Truth
+ */
+
+import layoutDefinitions, { buildLayoutMap } from './layout.js';
+import spaceDefinitions, { buildSpacePropertyMap } from './space.js';
+import visualDefinitions, { buildTypographyKeywordsMap } from './visual.js';
+import backgroundDefinitions from './visual-backgrounds.js';
+import interactivityDefinitions from './visual-interactivity.js';
+import typographyDefinitions from './visual-typography.js';
+import transform3dDefinitions from './visual-transform3d.js';
+import filterDefinitions from './visual-filters.js';
+import transitionDefinitions from './visual-transitions.js';
+import transformDefinitions from './visual-transforms.js';
+import borderDefinitions from './visual-borders.js';
+import svgDefinitions from './visual-svg.js';
+
+// Import split layout definitions
+import flexDefinitions from './layout-flex.js';
+import alignmentDefinitions from './layout-alignment.js';
+import gridDefinitions from './layout-grid.js';
+import positioningDefinitions from './layout-positioning.js';
+import utilitiesDefinitions from './layout-utilities.js';
+import tableDefinitions from './layout-table.js';
+
+// Merge visual definitions
+const allVisualDefinitions = {
+  ...visualDefinitions,
+  ...backgroundDefinitions,
+  ...interactivityDefinitions,
+  ...typographyDefinitions,
+  ...transform3dDefinitions,
+  ...filterDefinitions,
+  ...transitionDefinitions,
+  ...transformDefinitions,
+  ...borderDefinitions,
+  ...svgDefinitions
+};
+
+// Re-export all definitions
+export { layoutDefinitions } from './layout.js';
+export { spaceDefinitions } from './space.js';
+export { visualDefinitions } from './visual.js';
+export { backgroundDefinitions } from './visual-backgrounds.js';
+export { interactivityDefinitions } from './visual-interactivity.js';
+export { typographyDefinitions } from './visual-typography.js';
+export { transform3dDefinitions } from './visual-transform3d.js';
+export { filterDefinitions } from './visual-filters.js';
+export { transitionDefinitions } from './visual-transitions.js';
+export { transformDefinitions } from './visual-transforms.js';
+export { borderDefinitions } from './visual-borders.js';
+export { svgDefinitions } from './visual-svg.js';
+
+// Re-export split layout definitions
+export { flexDefinitions } from './layout-flex.js';
+export { alignmentDefinitions } from './layout-alignment.js';
+export { gridDefinitions } from './layout-grid.js';
+export { positioningDefinitions } from './layout-positioning.js';
+export { utilitiesDefinitions } from './layout-utilities.js';
+export { tableDefinitions } from './layout-table.js';
+
+// Export builder functions
+export { buildLayoutMap } from './layout.js';
+export { buildSpacePropertyMap } from './space.js';
+export { buildTypographyKeywordsMap } from './visual.js';
+
+/**
+ * Get all definitions as a flat array for documentation generation
+ */
+export function getAllDefinitions() {
+  return [
+    ...Object.values(layoutDefinitions),
+    ...Object.values(spaceDefinitions),
+    ...Object.values(allVisualDefinitions)
+  ];
+}
+
+/**
+ * Get definitions grouped by category
+ */
+export function getDefinitionsByCategory() {
+  return {
+    layout: Object.values(layoutDefinitions),
+    space: Object.values(spaceDefinitions),
+    visual: Object.values(allVisualDefinitions)
+  };
+}
+
+/**
+ * Get a specific definition by name
+ * @param {string} name - Definition name (e.g., 'display', 'padding')
+ * @returns {Object|null} - Definition object or null
+ */
+export function getDefinition(name) {
+  const allDefs = {
+    ...layoutDefinitions,
+    ...spaceDefinitions,
+    ...allVisualDefinitions
+  };
+  
+  return allDefs[name] || null;
+}
+
+/**
+ * Validate that all definitions have required fields
+ * Used by tests to ensure definitions are complete
+ */
+export function validateDefinitions() {
+  const requiredFields = ['name', 'property', 'description', 'descriptionMs', 'category'];
+  const errors = [];
+  
+  for (const def of getAllDefinitions()) {
+    for (const field of requiredFields) {
+      if (!def[field]) {
+        errors.push(`Missing '${field}' in definition '${def.name || 'unknown'}'`);
+      }
+    }
+    
+    // Check that examples exist for documentation
+    if (!def.examples || def.examples.length === 0) {
+      errors.push(`Missing examples in definition '${def.name}'`);
+    }
+  }
+  
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+
+/**
+ * Build all CSS generator maps from definitions
+ * Returns maps that can be used by css.js
+ */
+export function buildAllMaps() {
+  return {
+    layoutMap: buildLayoutMap(),
+    spacePropertyMap: buildSpacePropertyMap(),
+    typographyKeywords: buildTypographyKeywordsMap()
+  };
+}
+
+export default {
+  layout: layoutDefinitions,
+  space: spaceDefinitions,
+  visual: allVisualDefinitions,
+  getAllDefinitions,
+  getDefinitionsByCategory,
+  getDefinition,
+  validateDefinitions,
+  buildAllMaps
+};