tina4ruby 0.4.0

data/lib/tina4/scss/tina4css/_variables.scss

@@ -0,0 +1,117 @@
+// Tina4 CSS Framework - Design Tokens
+// ------------------------------------
+
+// Colors
+$primary:   #4a90d9 !default;
+$secondary: #6c757d !default;
+$success:   #28a745 !default;
+$danger:    #dc3545 !default;
+$warning:   #ffc107 !default;
+$info:      #17a2b8 !default;
+$light:     #f8f9fa !default;
+$dark:      #212529 !default;
+$white:     #fff !default;
+$black:     #000 !default;
+$body-bg:   $white !default;
+$body-color: $dark !default;
+$muted:     #6c757d !default;
+
+$theme-colors: (
+  "primary":   $primary,
+  "secondary": $secondary,
+  "success":   $success,
+  "danger":    $danger,
+  "warning":   $warning,
+  "info":      $info,
+  "light":     $light,
+  "dark":      $dark
+) !default;
+
+// Spacing
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3
+) !default;
+
+// Border radius
+$border-radius:    0.25rem !default;
+$border-radius-sm: 0.25rem !default;
+$border-radius-lg: 0.5rem !default;
+$border-radius-xl: 1rem !default;
+$border-radius-pill: 50rem !default;
+
+// Typography
+$font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+
+$font-size-sm:   0.875rem !default;
+$font-size-base: 1rem !default;
+$font-size-lg:   1.125rem !default;
+$font-size-xl:   1.25rem !default;
+$font-size-2xl:  1.5rem !default;
+$font-size-3xl:  1.875rem !default;
+$font-size-4xl:  2.25rem !default;
+
+$font-sizes: (
+  1: $font-size-4xl,
+  2: $font-size-3xl,
+  3: $font-size-2xl,
+  4: $font-size-xl,
+  5: $font-size-base,
+  6: $font-size-sm
+) !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm:   1.25 !default;
+$line-height-lg:   2 !default;
+
+$font-weight-light:  300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold:   700 !default;
+
+// Breakpoints
+$breakpoints: (
+  sm:  576px,
+  md:  768px,
+  lg:  992px,
+  xl:  1200px,
+  xxl: 1400px
+) !default;
+
+// Container max-widths
+$container-max-widths: (
+  sm:  540px,
+  md:  720px,
+  lg:  960px,
+  xl:  1140px,
+  xxl: 1320px
+) !default;
+
+// Grid
+$grid-columns: 12 !default;
+$grid-gutter:  1.5rem !default;
+
+// Shadows
+$shadow-sm:   0 0.125rem 0.25rem rgba($black, 0.075) !default;
+$shadow:      0 0.5rem 1rem rgba($black, 0.15) !default;
+$shadow-lg:   0 1rem 3rem rgba($black, 0.175) !default;
+
+// Transitions
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
+
+// Z-index
+$zindex-dropdown:  1000 !default;
+$zindex-sticky:    1020 !default;
+$zindex-fixed:     1030 !default;
+$zindex-backdrop:  1040 !default;
+$zindex-modal:     1050 !default;
+
+// Links
+$link-color: $primary !default;
+$link-hover-color: darken($primary, 15%) !default;

data/lib/tina4/scss/tina4css/base.scss

@@ -0,0 +1 @@
+@import 'tina4';

data/lib/tina4/scss/tina4css/colors.scss

@@ -0,0 +1,48 @@
+// Tina4 CSS Framework - CSS Custom Properties
+// Exposes the design tokens as CSS custom properties for runtime use
+
+@import 'variables';
+
+:root {
+  // Theme colors
+  --t4-primary: #{$primary};
+  --t4-secondary: #{$secondary};
+  --t4-success: #{$success};
+  --t4-danger: #{$danger};
+  --t4-warning: #{$warning};
+  --t4-info: #{$info};
+  --t4-light: #{$light};
+  --t4-dark: #{$dark};
+  --t4-white: #{$white};
+  --t4-black: #{$black};
+  --t4-muted: #{$muted};
+
+  // Body
+  --t4-body-bg: #{$body-bg};
+  --t4-body-color: #{$body-color};
+
+  // Typography
+  --t4-font-family: #{$font-family-base};
+  --t4-font-family-mono: #{$font-family-mono};
+  --t4-font-size-base: #{$font-size-base};
+  --t4-line-height-base: #{$line-height-base};
+
+  // Spacing
+  --t4-spacer: #{$spacer};
+
+  // Border radius
+  --t4-border-radius: #{$border-radius};
+  --t4-border-radius-lg: #{$border-radius-lg};
+  --t4-border-radius-xl: #{$border-radius-xl};
+
+  // Shadows
+  --t4-shadow-sm: #{$shadow-sm};
+  --t4-shadow: #{$shadow};
+  --t4-shadow-lg: #{$shadow-lg};
+
+  // Transitions
+  --t4-transition: #{$transition-base};
+
+  // Link
+  --t4-link-color: #{$link-color};
+}

data/lib/tina4/scss/tina4css/tina4.scss

@@ -0,0 +1,17 @@
+// Tina4 CSS Framework
+// A lightweight, modern, responsive CSS framework
+// ================================================
+
+@import 'variables';
+@import 'reset';
+@import 'typography';
+@import 'grid';
+@import 'buttons';
+@import 'forms';
+@import 'cards';
+@import 'nav';
+@import 'modals';
+@import 'alerts';
+@import 'tables';
+@import 'badges';
+@import 'utilities';

data/lib/tina4/scss_compiler.rb

@@ -0,0 +1,131 @@
+# frozen_string_literal: true
+require "fileutils"
+
+module Tina4
+  module ScssCompiler
+    SCSS_DIRS = %w[src/scss scss src/styles styles].freeze
+    CSS_OUTPUT = "public/css"
+
+    class << self
+      def compile_all(root_dir = Dir.pwd)
+        output_dir = File.join(root_dir, CSS_OUTPUT)
+        FileUtils.mkdir_p(output_dir)
+
+        SCSS_DIRS.each do |dir|
+          scss_dir = File.join(root_dir, dir)
+          next unless Dir.exist?(scss_dir)
+
+          Dir.glob(File.join(scss_dir, "**/*.scss")).each do |scss_file|
+            next if File.basename(scss_file).start_with?("_") # Skip partials
+            compile_file(scss_file, output_dir, scss_dir)
+          end
+        end
+      end
+
+      def compile_file(scss_file, output_dir, base_dir)
+        relative = scss_file.sub(base_dir, "").sub(/\.scss$/, ".css")
+        css_file = File.join(output_dir, relative)
+        FileUtils.mkdir_p(File.dirname(css_file))
+
+        scss_content = File.read(scss_file)
+        css_content = compile_scss(scss_content, File.dirname(scss_file))
+        File.write(css_file, css_content)
+
+        Tina4::Debug.debug("Compiled SCSS: #{scss_file} -> #{css_file}")
+      rescue => e
+        Tina4::Debug.error("SCSS compilation failed: #{scss_file} - #{e.message}")
+      end
+
+      def compile_scss(content, base_dir)
+        # Try sassc gem first
+        begin
+          require "sassc"
+          return SassC::Engine.new(content, style: :expanded, load_paths: [base_dir]).render
+        rescue LoadError
+          # Fall through to basic compiler
+        end
+
+        # Basic SCSS to CSS conversion (handles common patterns)
+        basic_compile(content, base_dir)
+      end
+
+      private
+
+      def basic_compile(content, base_dir)
+        # Handle @import
+        content = process_imports(content, base_dir)
+
+        # Handle variables
+        variables = {}
+        content = content.gsub(/\$([a-zA-Z_][\w-]*)\s*:\s*(.+?);/) do
+          variables[Regexp.last_match(1)] = Regexp.last_match(2).strip
+          ""
+        end
+
+        # Replace variable references
+        variables.each do |name, value|
+          content = content.gsub("$#{name}", value)
+        end
+
+        # Handle nesting (basic single-level)
+        content = flatten_nesting(content)
+
+        # Handle & parent selector
+        content = content.gsub(/&/, "")
+
+        content
+      end
+
+      def process_imports(content, base_dir)
+        content.gsub(/@import\s+["'](.+?)["']\s*;/) do
+          import_path = Regexp.last_match(1)
+          candidates = [
+            File.join(base_dir, "#{import_path}.scss"),
+            File.join(base_dir, "_#{import_path}.scss"),
+            File.join(base_dir, import_path)
+          ]
+          found = candidates.find { |c| File.exist?(c) }
+          if found
+            imported = File.read(found)
+            process_imports(imported, File.dirname(found))
+          else
+            "/* import not found: #{import_path} */"
+          end
+        end
+      end
+
+      def flatten_nesting(content)
+        # Very basic nesting flattener - handles single level
+        result = ""
+        content.scan(/([^{]+)\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}/m) do |selector, body|
+          selector = selector.strip
+          # Check for nested rules
+          if body =~ /\{/
+            # Has nested content
+            props = ""
+            nested = ""
+            body.scan(/([^{;]+(?:\{[^}]*\}|;))/m) do |part_arr|
+              part = part_arr[0].strip
+              if part.include?("{")
+                # Nested rule
+                if part =~ /\A(.+?)\s*\{(.*?)\}\s*\z/m
+                  nested_sel = Regexp.last_match(1).strip
+                  nested_body = Regexp.last_match(2).strip
+                  full_sel = "#{selector} #{nested_sel}"
+                  nested += "#{full_sel} { #{nested_body} }\n"
+                end
+              else
+                props += "  #{part}\n" unless part.empty?
+              end
+            end
+            result += "#{selector} {\n#{props}}\n" unless props.strip.empty?
+            result += nested
+          else
+            result += "#{selector} {\n#{body}\n}\n"
+          end
+        end
+        result.empty? ? content : result
+      end
+    end
+  end
+end