@medcore-ua/concrete-css 1.0.0

package/scss/abstracts/_tokens.scss

@@ -0,0 +1,249 @@
+// =============================================================================
+// DESIGN TOKENS
+// The single source of truth for all framework values
+// =============================================================================
+
+@use 'sass:map';
+@use 'functions' as *;
+
+// =============================================================================
+// PRIMITIVE TOKENS (The Palette)
+// Raw values that describe WHAT they are, not WHERE they're used
+// =============================================================================
+
+// Spacing unit (4px = 0.25rem)
+$spacing-unit: 0.25rem !default;
+
+// Color palette
+$color-white: #ffffff !default;
+$color-black: #000000 !default;
+
+// Grays (0-900 scale)
+$color-gray-50:  #fafafa !default;
+$color-gray-100: #f5f5f5 !default;
+$color-gray-200: #e5e5e5 !default;
+$color-gray-300: #d4d4d4 !default;
+$color-gray-400: #a3a3a3 !default;
+$color-gray-500: #737373 !default;
+$color-gray-600: #525252 !default;
+$color-gray-700: #404040 !default;
+$color-gray-800: #262626 !default;
+$color-gray-900: #171717 !default;
+
+// Primary color scale (customizable)
+$color-primary-50:  #f0f9ff !default;
+$color-primary-100: #e0f2fe !default;
+$color-primary-500: #0ea5e9 !default;
+$color-primary-600: #0284c7 !default;
+$color-primary-900: #0c4a6e !default;
+
+// Semantic colors
+$color-success: #0a7f2e !default;
+$color-warning: #f59e0b !default;
+$color-error: #b00020 !default;
+$color-info: #0ea5e9 !default;
+
+// Typography
+$font-family-mono: 'Roboto Mono', 'Courier New', monospace !default;
+$font-family-sans: system-ui, -apple-system, sans-serif !default;
+$font-family-serif: 'Georgia', serif !default;
+
+// =============================================================================
+// SPACING SCALE
+// Based on 4px/0.25rem unit
+// =============================================================================
+
+$spacing: (
+  '0': 0,
+  '1': $spacing-unit,           // 4px
+  '2': $spacing-unit * 2,        // 8px
+  '3': $spacing-unit * 3,        // 12px
+  '4': $spacing-unit * 4,        // 16px
+  '5': $spacing-unit * 5,        // 20px
+  '6': $spacing-unit * 6,        // 24px
+  '8': $spacing-unit * 8,        // 32px
+  '10': $spacing-unit * 10,      // 40px
+  '12': $spacing-unit * 12,      // 48px
+  '16': $spacing-unit * 16,      // 64px
+  '20': $spacing-unit * 20,      // 80px
+  '24': $spacing-unit * 24,      // 96px
+  '32': $spacing-unit * 32,      // 128px
+  'auto': auto
+) !default;
+
+// =============================================================================
+// BREAKPOINTS
+// Mobile-first responsive system
+// =============================================================================
+
+$breakpoints: (
+  'sm': 640px,    // Small devices
+  'md': 768px,    // Medium devices
+  'lg': 1024px,   // Large devices
+  'xl': 1280px,   // Extra large
+  '2xl': 1536px   // 2X Extra large
+) !default;
+
+// =============================================================================
+// COLORS MAP
+// All available colors for utility generation
+// =============================================================================
+
+$colors: (
+  // Special values
+  'inherit': inherit,
+  'current': currentColor,
+  'transparent': transparent,
+  
+  // Base colors
+  'white': $color-white,
+  'black': $color-black,
+  
+  // Gray scale
+  'gray-50': $color-gray-50,
+  'gray-100': $color-gray-100,
+  'gray-200': $color-gray-200,
+  'gray-300': $color-gray-300,
+  'gray-400': $color-gray-400,
+  'gray-500': $color-gray-500,
+  'gray-600': $color-gray-600,
+  'gray-700': $color-gray-700,
+  'gray-800': $color-gray-800,
+  'gray-900': $color-gray-900,
+  
+  // Primary colors
+  'primary-50': $color-primary-50,
+  'primary-100': $color-primary-100,
+  'primary-500': $color-primary-500,
+  'primary-600': $color-primary-600,
+  'primary-900': $color-primary-900,
+  
+  // Semantic colors
+  'success': $color-success,
+  'warning': $color-warning,
+  'error': $color-error,
+  'info': $color-info
+) !default;
+
+// =============================================================================
+// BORDER WIDTHS
+// =============================================================================
+
+$border-widths: (
+  '0': 0,
+  '1': 1px,
+  '2': 2px,
+  '4': 4px,
+  '8': 8px
+) !default;
+
+// =============================================================================
+// BORDER RADIUS
+// =============================================================================
+
+$border-radius: (
+  'none': 0,
+  'sm': 0.125rem,    // 2px
+  'base': 0.25rem,   // 4px
+  'md': 0.375rem,    // 6px
+  'lg': 0.5rem,      // 8px
+  'xl': 0.75rem,     // 12px
+  '2xl': 1rem,       // 16px
+  'full': 9999px
+) !default;
+
+// =============================================================================
+// OPACITY
+// =============================================================================
+
+$opacity: (
+  '0': 0,
+  '25': 0.25,
+  '50': 0.5,
+  '75': 0.75,
+  '100': 1
+) !default;
+
+// =============================================================================
+// FONT SIZES
+// =============================================================================
+
+$font-sizes: (
+  'xs': 0.75rem,      // 12px
+  'sm': 0.875rem,     // 14px
+  'base': 1rem,       // 16px
+  'lg': 1.125rem,     // 18px
+  'xl': 1.25rem,      // 20px
+  '2xl': 1.5rem,      // 24px
+  '3xl': 1.875rem,    // 30px
+  '4xl': 2.25rem,     // 36px
+  '5xl': 3rem,        // 48px
+  '6xl': 3.75rem      // 60px
+) !default;
+
+// =============================================================================
+// FONT WEIGHTS
+// =============================================================================
+
+$font-weights: (
+  'normal': 400,
+  'medium': 500,
+  'bold': 700,
+  'black': 900
+) !default;
+
+// =============================================================================
+// LINE HEIGHTS
+// =============================================================================
+
+$line-heights: (
+  'none': 1,
+  'tight': 1.25,
+  'snug': 1.375,
+  'normal': 1.5,
+  'relaxed': 1.625,
+  'loose': 2
+) !default;
+
+// =============================================================================
+// LETTER SPACING
+// =============================================================================
+
+$letter-spacing: (
+  'tighter': -0.05em,
+  'tight': -0.025em,
+  'normal': 0,
+  'wide': 0.025em,
+  'wider': 0.05em,
+  'widest': 0.1em
+) !default;
+
+// =============================================================================
+// SHADOWS (Brutalist = minimal)
+// =============================================================================
+
+$shadows: (
+  'none': none,
+  'sm': 2px 2px 0 rgba(0, 0, 0, 1),
+  'base': 4px 4px 0 rgba(0, 0, 0, 1),
+  'lg': 6px 6px 0 rgba(0, 0, 0, 1)
+) !default;
+
+// =============================================================================
+// MAX WIDTHS (Container sizes)
+// =============================================================================
+
+$max-widths: (
+  'xs': 20rem,     // 320px
+  'sm': 24rem,     // 384px
+  'md': 28rem,     // 448px
+  'lg': 32rem,     // 512px
+  'xl': 36rem,     // 576px
+  '2xl': 42rem,    // 672px
+  '3xl': 48rem,    // 768px
+  '4xl': 56rem,    // 896px
+  '5xl': 64rem,    // 1024px
+  '6xl': 72rem,    // 1152px
+  'full': 100%,
+  'screen': 100vw
+) !default;

package/scss/abstracts/_variables.scss

@@ -0,0 +1,53 @@
+// =============================================================================
+// GLOBAL CONFIGURATION VARIABLES
+// Control framework behavior and features
+// =============================================================================
+
+// Framework prefix (empty by default, but can be set to namespace classes)
+$prefix: '' !default;
+
+// Enable/disable features
+$enable-responsive: true !default;
+$enable-hover-states: true !default;
+$enable-focus-states: true !default;
+$enable-negative-margins: true !default;
+$enable-important: false !default;
+
+// Responsive breakpoint names (must match keys in $breakpoints map)
+$breakpoint-names: ('sm', 'md', 'lg', 'xl', '2xl') !default;
+
+// State modifiers to generate
+$state-modifiers: (
+  'hover',
+  'focus',
+  'active',
+  'disabled'
+) !default;
+
+// Direction maps for spacing utilities
+$directions: (
+  '': '',           // all sides
+  't': '-top',      // top
+  'r': '-right',    // right
+  'b': '-bottom',   // bottom
+  'l': '-left',     // left
+  'x': '-inline',   // horizontal (left + right)
+  'y': '-block'     // vertical (top + bottom)
+) !default;
+
+// CSS custom properties mode (experimental)
+$use-css-variables: false !default;
+
+// Z-index management
+$z-index-levels: (
+  'behind': -1,
+  'base': 0,
+  'dropdown': 1000,
+  'sticky': 1020,
+  'fixed': 1030,
+  'modal-backdrop': 1040,
+  'modal': 1050,
+  'popover': 1060,
+  'tooltip': 1070,
+  'notification': 1080
+) !default;

package/scss/base/_reset.scss

@@ -0,0 +1,100 @@
+// =============================================================================
+// CSS RESET
+// Modern, minimal reset for consistent cross-browser rendering
+// =============================================================================
+
+// Box sizing
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// Remove default margins and padding
+* {
+  margin: 0;
+  padding: 0;
+}
+
+// Root element
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  line-height: 1.5;
+  scroll-behavior: smooth;
+}
+
+// Body
+body {
+  min-height: 100vh;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Media elements
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+// Form elements
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+// Remove button styling
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+// Typography
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+// Lists
+ol,
+ul {
+  list-style: none;
+}
+
+// Tables
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+// Links
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+// Accessibility
+[disabled] {
+  cursor: not-allowed;
+}
+
+// Hidden
+[hidden] {
+  display: none !important;
+}

package/scss/base/_typography.scss

@@ -0,0 +1,71 @@
+// =============================================================================
+// TYPOGRAPHY
+// Base typographic styles (minimal, can be overridden with utilities)
+// =============================================================================
+
+@use '../abstracts/tokens' as *;
+
+body {
+  font-family: $font-family-mono;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: $color-black;
+}
+
+// Headings (minimal styling, use utilities for full control)
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+// Code elements
+code,
+kbd,
+samp,
+pre {
+  font-family: $font-family-mono;
+  font-size: 0.875em;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+// Inline code
+code {
+  padding: 0.125rem 0.25rem;
+  border: 1px solid currentColor;
+}
+
+// Strong and emphasis
+strong,
+b {
+  font-weight: 700;
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+// Small text
+small {
+  font-size: 0.875em;
+}
+
+// Subscript and superscript
+sub,
+sup {
+  font-size: 0.75em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}

package/scss/main.scss

@@ -0,0 +1,39 @@
+/*!
+ * Concrete CSS Framework v1.0.0
+ * Copyright 2026
+ * Licensed under MIT
+ */
+
+// =============================================================================
+// CONFIGURATION LAYER
+// Import all configuration, tokens, and variables first
+// =============================================================================
+
+@use 'abstracts/functions' as *;
+@use 'abstracts/variables' as *;
+@use 'abstracts/tokens' as *;
+@use 'abstracts/mixins' as *;
+
+// =============================================================================
+// BASE LAYER
+// Reset and foundational styles
+// =============================================================================
+
+@use 'base/reset';
+@use 'base/typography';
+
+// =============================================================================
+// UTILITIES LAYER
+// The core utility class generator
+// =============================================================================
+
+@use 'utilities/core';
+
+// =============================================================================
+// COMPONENTS (OPTIONAL)
+// Uncomment to include optional pre-built components
+// =============================================================================
+
+// @use 'components/buttons';
+// @use 'components/forms';
+// @use 'components/cards';