@medcore-ua/concrete-css 1.0.0 → 1.1.0

package/scss/abstracts/_mixins.scss

@@ -5,6 +5,7 @@
 
 @use 'sass:map';
 @use 'sass:string';
+@use 'sass:meta';
 @use 'functions' as *;
 @use 'variables' as *;
 @use 'tokens' as *;
@@ -28,10 +29,16 @@
       $responsive: true;
     }
     
-    $important-flag: if($is-important or $enable-important, !important, null);
+    $important-flag: null;
+    @if $is-important or $enable-important {
+      $important-flag: !important;
+    }
     
     @each $key, $value in $values {
-      $class-name: if($key == 'default', $prefix, '#{$prefix}-#{$key}');
+      $class-name: $prefix;
+      @if $key != 'default' {
+        $class-name: '#{$prefix}-#{$key}';
+      }
       
       .#{$class-name} {
         #{$property}: $value $important-flag;
@@ -61,13 +68,23 @@
         $prefix: map.get($config, 'prefix');
         $values: map.get($config, 'values');
         $is-important: map.get($config, 'important');
-        $important-flag: if($is-important or $enable-important, !important, null);
+        $important-flag: null;
+        @if $is-important or $enable-important {
+          $important-flag: !important;
+        }
         
         @each $key, $value in $values {
-          $class-name: if($key == 'default', $prefix, '#{$prefix}-#{$key}');
+          $class-name: $prefix;
+          @if $key != 'default' {
+            $class-name: '#{$prefix}-#{$key}';
+          }
           
-          // Escape the colon for CSS validity
-          .#{$breakpoint}\:#{$class-name} {
+          // Handle numeric prefix (2xl) - escape properly
+          $bp-escaped: $breakpoint;
+          @if string.slice($breakpoint, 1, 1) == '2' {
+            $bp-escaped: '\\32 ';
+          }
+          .#{$bp-escaped}\:#{$class-name} {
             #{$property}: $value $important-flag;
           }
         }
@@ -93,10 +110,16 @@
       $prefix: map.get($config, 'prefix');
       $values: map.get($config, 'values');
       $is-important: map.get($config, 'important');
-      $important-flag: if($is-important or $enable-important, !important, null);
+      $important-flag: null;
+      @if $is-important or $enable-important {
+        $important-flag: !important;
+      }
       
       @each $key, $value in $values {
-        $class-name: if($key == 'default', $prefix, '#{$prefix}-#{$key}');
+        $class-name: $prefix;
+        @if $key != 'default' {
+          $class-name: '#{$prefix}-#{$key}';
+        }
         
         // Escape the colon for CSS validity
         .#{$state}\:#{$class-name}:#{$state} {
@@ -119,7 +142,10 @@
 @mixin generate-directional($prefix, $property, $values) {
   @each $dir-key, $dir-value in $directions {
     @each $size-key, $size-value in $values {
-      $class-name: if($dir-key == '', '#{$prefix}-#{$size-key}', '#{$prefix}#{$dir-key}-#{$size-key}');
+      $class-name: '#{$prefix}#{$dir-key}-#{$size-key}';
+      @if $dir-key == '' {
+        $class-name: '#{$prefix}-#{$size-key}';
+      }
       
       .#{$class-name} {
         @if $dir-key == '' {
@@ -148,8 +174,11 @@
 @mixin generate-negative-margins($values) {
   @each $dir-key, $dir-value in $directions {
     @each $size-key, $size-value in $values {
-      @if type-of($size-value) == 'number' and $size-value != 0 and $size-value != auto {
-        $class-name: if($dir-key == '', '-m-#{$size-key}', '-m#{$dir-key}-#{$size-key}');
+      @if meta.type-of($size-value) == 'number' and $size-value != 0 and $size-value != auto {
+        $class-name: '-m#{$dir-key}-#{$size-key}';
+        @if $dir-key == '' {
+          $class-name: '-m-#{$size-key}';
+        }
         
         .#{$class-name} {
           @if $dir-key == '' {

package/scss/abstracts/_tokens.scss

@@ -42,6 +42,8 @@ $color-success: #0a7f2e !default;
 $color-warning: #f59e0b !default;
 $color-error: #b00020 !default;
 $color-info: #0ea5e9 !default;
+$color-ok: #0a7f2e !default;
+$color-alert: #b00020 !default;
 
 // Typography
 $font-family-mono: 'Roboto Mono', 'Courier New', monospace !default;
@@ -71,6 +73,14 @@ $spacing: (
   'auto': auto
 ) !default;
 
+// Responsive page gutter (for container padding)
+$page-gutter: (
+  'xs': 0.75rem,
+  'sm': 1rem,
+  'md': 1.5rem,
+  'lg': 2rem
+) !default;
+
 // =============================================================================
 // BREAKPOINTS
 // Mobile-first responsive system
@@ -122,7 +132,9 @@ $colors: (
   'success': $color-success,
   'warning': $color-warning,
   'error': $color-error,
-  'info': $color-info
+  'info': $color-info,
+  'ok': $color-ok,
+  'alert': $color-alert
 ) !default;
 
 // =============================================================================
@@ -243,7 +255,7 @@ $max-widths: (
   '3xl': 48rem,    // 768px
   '4xl': 56rem,    // 896px
   '5xl': 64rem,    // 1024px
-  '6xl': 72rem,    // 1152px
+  '6xl': 70rem,    // 1120px (common max-width)
   'full': 100%,
   'screen': 100vw
 ) !default;

package/scss/components/_accordion.scss

@@ -0,0 +1,44 @@
+// =============================================================================
+// ACCORDION
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}accordion-item {
+  border-bottom: map.get($border-widths, '1') solid $color-black;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.#{$prefix}accordion__question {
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  padding: 0.6rem 0.7rem;
+  font-family: inherit;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  align-items: center;
+}
+
+.#{$prefix}accordion__answer {
+  font-size: 0.8rem;
+  padding: 0 0.7rem;
+  display: block;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, padding-bottom 0.3s ease-out;
+
+  &.open {
+    max-height: 500px;
+    padding-bottom: 0.6rem;
+  }
+}

package/scss/components/_article.scss

@@ -0,0 +1,57 @@
+// =============================================================================
+// ARTICLE
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}article {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 0.9rem;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.#{$prefix}article__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+.#{$prefix}article__title {
+  text-transform: uppercase;
+  font-weight: 900;
+  font-size: 1rem;
+}
+
+.#{$prefix}article__date {
+  font-size: 0.7rem;
+  opacity: 0.8;
+  text-transform: uppercase;
+}
+
+.#{$prefix}article__meta {
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.#{$prefix}article__content {
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.#{$prefix}article-detail {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.#{$prefix}article-detail__content {
+  font-size: 0.9rem;
+  line-height: 1.6;
+}

package/scss/components/_aside.scss

@@ -0,0 +1,33 @@
+// =============================================================================
+// ASIDE
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}aside-panel {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 0.9rem;
+  min-width: 0;
+}
+
+.#{$prefix}aside-panel__title {
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  margin-bottom: 0.45rem;
+  font-weight: 700;
+}
+
+.#{$prefix}aside-panel__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.#{$prefix}aside-panel__list li {
+  border-top: map.get($border-widths, '1') solid $color-black;
+  padding: 0.25rem 0;
+  line-height: 1.4;
+}

package/scss/components/_badge.scss

@@ -0,0 +1,52 @@
+// =============================================================================
+// BADGE
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}badge {
+  display: inline-block;
+  padding: 0.1rem 0.4rem;
+  border: map.get($border-widths, '1') solid $color-black;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+}
+
+.#{$prefix}badge--ok {
+  border-color: $color-ok;
+  color: inherit;
+  font-weight: normal;
+}
+
+.#{$prefix}badge--alert {
+  border-color: $color-alert;
+  color: $color-alert;
+  font-weight: normal;
+}
+
+.#{$prefix}badge--success {
+  border-color: $color-success;
+  color: $color-success;
+}
+
+.#{$prefix}badge--warning {
+  border-color: $color-warning;
+  color: $color-warning;
+}
+
+.#{$prefix}badge--error {
+  border-color: $color-error;
+  color: $color-error;
+}
+
+.#{$prefix}badge--sm {
+  font-size: 0.6rem;
+  padding: 0.05rem 0.25rem;
+}
+
+.#{$prefix}badge--lg {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.5rem;
+}

package/scss/components/_buttons.scss

@@ -0,0 +1,54 @@
+// =============================================================================
+// BUTTONS
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}btn {
+  border: map.get($border-widths, '4') solid $color-black;
+  background: $color-white;
+  padding: 0.55rem 0.9rem;
+  font-family: inherit;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  text-align: center;
+  width: 100%;
+  white-space: normal;
+  line-height: 1.2;
+
+  @media (min-width: 480px) {
+    width: auto;
+  }
+
+  &:active {
+    transform: translate(2px, 2px);
+    box-shadow: -2px -2px 0 $color-black;
+  }
+}
+
+.#{$prefix}btn--primary {
+  background: $color-black;
+  color: $color-white;
+}
+
+.#{$prefix}btn--ghost {
+  background: transparent;
+}
+
+.#{$prefix}btn--success {
+  border-color: $color-success;
+  color: $color-success;
+}
+
+.#{$prefix}btn--error {
+  border-color: $color-error;
+  color: $color-error;
+}

package/scss/components/_card.scss

@@ -0,0 +1,54 @@
+// =============================================================================
+// CARD
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}card {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 0.9rem;
+}
+
+.#{$prefix}card--thick {
+  border-width: map.get($border-widths, '4');
+}
+
+.#{$prefix}card--thin {
+  border-width: map.get($border-widths, '1');
+}
+
+.#{$prefix}card__header {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  border-bottom: map.get($border-widths, '1') solid $color-black;
+  padding-bottom: 0.35rem;
+  margin-bottom: 0.5rem;
+}
+
+.#{$prefix}card__title {
+  text-transform: uppercase;
+  font-weight: 900;
+  font-size: 1rem;
+  margin-bottom: 0.1rem;
+}
+
+.#{$prefix}card__subtitle {
+  font-size: 0.75rem;
+  margin-bottom: 0.4rem;
+  font-weight: 700;
+}
+
+.#{$prefix}card__content {
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.#{$prefix}card__meta {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  margin-bottom: 0.5rem;
+}

package/scss/components/_category.scss

@@ -0,0 +1,22 @@
+// =============================================================================
+// CATEGORY LABEL
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}category-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  border-bottom: map.get($border-widths, '2') solid $color-black;
+  padding: 0.4rem 0.7rem;
+  background: $color-gray-200;
+}
+
+.#{$prefix}category-label--light {
+  background: transparent;
+  border-bottom-width: map.get($border-widths, '1');
+}

package/scss/components/_feature.scss

@@ -0,0 +1,26 @@
+// =============================================================================
+// FEATURE
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}feature {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 1.2rem;
+}
+
+.#{$prefix}feature__title {
+  font-size: 1rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.#{$prefix}feature__text {
+  font-size: 0.8rem;
+  line-height: 1.5;
+  opacity: 0.8;
+}

package/scss/components/_footer.scss

@@ -0,0 +1,35 @@
+// =============================================================================
+// FOOTER
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}footer {
+  border-top: map.get($border-widths, '4') solid $color-black;
+  background: $color-white;
+  margin-top: auto;
+  z-index: 2;
+  padding: 1.5rem map.get($page-gutter, 'sm');
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media (min-width: 768px) {
+    padding: 1.5rem map.get($page-gutter, 'md');
+  }
+
+  @media (min-width: 1200px) {
+    padding: 1.5rem map.get($page-gutter, 'lg');
+  }
+}
+
+.#{$prefix}footer-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+}

package/scss/components/_forms.scss

@@ -0,0 +1,45 @@
+// =============================================================================
+// FORMS
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}input,
+.#{$prefix}select,
+.#{$prefix}textarea {
+  width: 100%;
+  border: map.get($border-widths, '2') solid $color-black;
+  background: transparent;
+  padding: 0.45rem 0.5rem;
+  font-family: inherit;
+  font-size: 0.8rem;
+  border-radius: 0;
+  appearance: none;
+  margin-top: 0.3rem;
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px $color-black;
+  }
+}
+
+.#{$prefix}label {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: normal;
+  letter-spacing: 0.1em;
+  display: block;
+}
+
+.#{$prefix}form-group {
+  margin-bottom: 0.8rem;
+}
+
+.#{$prefix}form-help {
+  font-size: 0.7rem;
+  opacity: 0.7;
+  margin-top: 0.3rem;
+}

package/scss/components/_grid.scss

@@ -0,0 +1,48 @@
+// =============================================================================
+// GRID HELPERS
+// Additional grid patterns not covered by utilities
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+// Split layouts - use with utilities like .grid.grid-cols-2
+// Example: <div class="grid md:split-main gap-4">
+
+// Grid container defaults
+.#{$prefix}grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (min-width: 720px) {
+  .#{$prefix}grid-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  
+  .#{$prefix}grid-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  
+  .#{$prefix}grid-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 992px) {
+  .#{$prefix}grid-3-lg {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  
+  .#{$prefix}grid-4-lg {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1200px) {
+  .#{$prefix}grid-4-xl {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

package/scss/components/_header.scss

@@ -0,0 +1,78 @@
+// =============================================================================
+// HEADER
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}header {
+  border-bottom: map.get($border-widths, '4') solid $color-black;
+  background: $color-white;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  width: 100%;
+}
+
+.#{$prefix}header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem map.get($page-gutter, 'sm');
+  max-width: map.get($max-widths, '6xl');
+  margin: 0 auto;
+  gap: 1rem;
+  flex-wrap: nowrap;
+
+  @media (min-width: 768px) {
+    padding: 0.75rem map.get($page-gutter, 'md');
+  }
+
+  @media (min-width: 1200px) {
+    padding: 0.75rem map.get($page-gutter, 'lg');
+  }
+}
+
+.#{$prefix}logo-block {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 0 0 auto;
+  margin-right: auto;
+  min-width: 0;
+}
+
+.#{$prefix}logo-mark {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  border: map.get($border-widths, '4') solid $color-black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 900;
+  font-size: 1rem;
+  background: $color-gray-100;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+
+.#{$prefix}logo-text {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  line-height: 1.3;
+  white-space: normal;
+  overflow: hidden;
+  max-width: 220px;
+
+  @media (max-width: 380px) {
+    .#{$prefix}logo-text__subtitle {
+      display: none;
+    }
+  }
+}
+
+.#{$prefix}logo-text__title {
+  font-weight: 900;
+}