@medcore-ua/concrete-css 1.0.0 → 1.1.0

package/scss/components/_table.scss

@@ -0,0 +1,50 @@
+// =============================================================================
+// TABLE
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 0.5rem;
+  border: map.get($border-widths, '1') solid $color-black;
+}
+
+.#{$prefix}data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.#{$prefix}data-table th,
+.#{$prefix}data-table td {
+  border: map.get($border-widths, '1') solid $color-black;
+  padding: 0.35rem 0.4rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.#{$prefix}data-table th {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  background: transparent;
+}
+
+.#{$prefix}data-table td a {
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.#{$prefix}table-category {
+  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;
+}

package/scss/components/_utilities.scss

@@ -0,0 +1,62 @@
+// =============================================================================
+// UTILITY COMPONENTS
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+// Display utilities
+.#{$prefix}open {
+  display: block !important;
+}
+
+// Background utilities
+.#{$prefix}bg-alt {
+  background: $color-white;
+}
+
+.#{$prefix}bg-base {
+  background: $color-gray-100;
+}
+
+// Text utilities
+.#{$prefix}text-center {
+  text-align: center;
+}
+
+.#{$prefix}text-right {
+  text-align: right;
+}
+
+// Width utilities
+.#{$prefix}w-full {
+  width: 100%;
+}
+
+.#{$prefix}max-w-full {
+  max-width: 100%;
+}
+
+// Responsive grid helpers
+@media (min-width: 720px) {
+  .#{$prefix}grid-2-1 {
+    grid-template-columns: 2fr 1fr;
+  }
+  
+  .#{$prefix}grid-3-2 {
+    grid-template-columns: 3fr 2fr;
+  }
+}
+
+@media (min-width: 850px) {
+  .#{$prefix}grid-2-3 {
+    grid-template-columns: 2fr 3fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .#{$prefix}grid-3-1 {
+    grid-template-columns: 3fr 1fr;
+  }
+}

package/scss/main.scss

@@ -1,7 +1,7 @@
 /*!
- * Concrete CSS Framework v1.0.0
+ * Concrete CSS Framework v1.0.1
  * Copyright 2026
- * Licensed under MIT
+ * Licensed under CSSM-ULv2
  */
 
 // =============================================================================
@@ -34,6 +34,4 @@
 // Uncomment to include optional pre-built components
 // =============================================================================
 
-// @use 'components/buttons';
-// @use 'components/forms';
-// @use 'components/cards';
+@use 'components';

package/scss/utilities/_api.scss

@@ -130,7 +130,13 @@ $utilities: (
       '4': repeat(4, minmax(0, 1fr)),
       '6': repeat(6, minmax(0, 1fr)),
       '12': repeat(12, minmax(0, 1fr)),
-      'none': none
+      'none': none,
+      '2-1': 2fr 1fr,
+      '3-2': 3fr 2fr,
+      '3-1': 3fr 1fr,
+      '4-1': 4fr 1fr,
+      'main': minmax(0, 2fr) minmax(260px, 1fr),
+      'main-lg': minmax(0, 4fr) minmax(320px, 2fr)
     ),
     'responsive': true,
     'states': false

package/scss/utilities/_core.scss

@@ -3,6 +3,8 @@
 // The main loop that generates all utility classes
 // =============================================================================
 
+@use 'sass:map';
+@use 'sass:string';
 @use '../abstracts/functions' as *;
 @use '../abstracts/variables' as *;
 @use '../abstracts/tokens' as *;
@@ -42,14 +44,21 @@
     @include responsive-utilities($breakpoint, $utilities);
     
     // Responsive spacing
-    $bp-value: map-get($breakpoints, $breakpoint);
+    $bp-value: map.get($breakpoints, $breakpoint);
     @media (min-width: $bp-value) {
       // Responsive margin
       @each $dir-key, $dir-value in $directions {
         @each $size-key, $size-value in $spacing {
-          $class-name: if($dir-key == '', 'm-#{$size-key}', 'm#{$dir-key}-#{$size-key}');
+          $class-name: 'm#{$dir-key}-#{$size-key}';
+          @if $dir-key == '' {
+            $class-name: 'm-#{$size-key}';
+          }
+          $bp-escaped: $breakpoint;
+          @if string.slice($breakpoint, 1, 1) == '2' {
+            $bp-escaped: '\\32 ';
+          }
           
-          .#{$breakpoint}\:#{$class-name} {
+          .#{$bp-escaped}\:#{$class-name} {
             @if $dir-key == '' {
               margin: $size-value;
             } @else if $dir-key == 'x' {
@@ -68,9 +77,16 @@
       // Responsive padding
       @each $dir-key, $dir-value in $directions {
         @each $size-key, $size-value in $spacing {
-          $class-name: if($dir-key == '', 'p-#{$size-key}', 'p#{$dir-key}-#{$size-key}');
+          $class-name: 'p#{$dir-key}-#{$size-key}';
+          @if $dir-key == '' {
+            $class-name: 'p-#{$size-key}';
+          }
+          $bp-escaped: $breakpoint;
+          @if string.slice($breakpoint, 1, 1) == '2' {
+            $bp-escaped: '\\32 ';
+          }
           
-          .#{$breakpoint}\:#{$class-name} {
+          .#{$bp-escaped}\:#{$class-name} {
             @if $dir-key == '' {
               padding: $size-value;
             } @else if $dir-key == 'x' {