beta.12 changes

cli/make.js

@@ -5,7 +5,7 @@ const replace = require('replace-in-file');
 module.exports = {
   makeTheme(name = 'starter', dist = 'scss') {
 
-    const sourceFolder = 'stubs/theme-starter/';
+    const sourceFolder = 'node_modules/@webpixels/css/stubs/theme-starter/';
     const destinationFolder = dist+'/themes/';
     const replaceString = 'THEME_STARTER';
     const themeName = name;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpixels/css",
   "description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "version_short": "2.0",
   "license": "MIT",
   "style": "dist/index.css",

script/sass-to-json.js

@@ -0,0 +1,51 @@
+// Import the sass library
+const sass = require('sass');
+const fs = require('fs');
+
+// Define the SCSS content
+const scssContent = `
+$utilities: (
+  "align": (
+    property: vertical-align,
+    class: align,
+    values: baseline top middle bottom text-bottom text-top,
+  ),
+  "float": (
+    responsive: true,
+    property: float,
+    values: (
+      start: left,
+      end: right,
+      none: none,
+    ),
+  )
+);
+`;
+
+function convertToJSON() {
+    let scssInput
+    let jsonOutput = {};
+
+    // Remove leading/trailing spaces and trailing comma
+    scssInput = scssContent.trim().replace(/,\s*$/, '');
+
+    // Wrap the SCSS content in a JSON object
+    const jsonString = `{ "utilities": { ${scssInput} } }`;
+
+    try {
+        jsonOutput = JSON.parse(jsonString);
+    } catch (error) {
+        jsonOutput = { error: "Invalid SCSS format." };
+    }
+
+    // fs.writeFileSync('utilities.json', JSON.stringify(jsonOutput, null, 2););
+
+    return JSON.stringify(jsonOutput, null, 2);
+}
+
+// Write the JSON to a file
+const output = convertToJSON()
+
+fs.writeFileSync('utilities.json', output);
+
+console.log('SCSS to JSON conversion complete. JSON data saved to utilities.json.');

scss/core/_root.scss

@@ -5,11 +5,31 @@
     --#{$prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $all-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
   // Fonts
   --#{$prefix}font-display: #{inspect($font-display-bundle)};
   --#{$prefix}font-serif: #{inspect($font-serif-bundle)};
   --#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};
 
+  // Shadows
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-1: #{$box-shadow-1};
+  --#{$prefix}box-shadow-2: #{$box-shadow-2};
+  --#{$prefix}box-shadow-3: #{$box-shadow-3};
+  --#{$prefix}box-shadow-4: #{$box-shadow-4};
+  --#{$prefix}box-shadow-5: #{$box-shadow-5};
+  --#{$prefix}box-shadow-6: #{$box-shadow-6};
+
+  --#{$prefix}box-soft-shadow-1: #{$box-soft-shadow-1};
+  --#{$prefix}box-soft-shadow-2: #{$box-soft-shadow-2};
+  --#{$prefix}box-soft-shadow-3: #{$box-soft-shadow-3};
+  --#{$prefix}box-soft-shadow-4: #{$box-soft-shadow-4};
+  --#{$prefix}box-soft-shadow-5: #{$box-soft-shadow-5};
+  --#{$prefix}box-soft-shadow-6: #{$box-soft-shadow-6};
+
   // Logo
   .logo-light {
     display: none;

scss/extra.scss

@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.15 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.16 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */

scss/extras/_article.scss

@@ -21,7 +21,7 @@
 		@include font-size(1.5em);
 		font-weight: $font-weight-bolder;
     margin-top: 2em;
-    margin-bottom: 1em;
+    margin-bottom: .5em;
     line-height: 1.3333333;
     letter-spacing: -.025em;
     white-space: pre-wrap;

scss/index.scss

@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.15 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.16 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
@@ -19,7 +19,6 @@
 @import "./maps";
 
 // Include remainder of required parts
-@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/root";
 

scss/main.scss

@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.15 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.16 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
@@ -19,7 +19,6 @@
 @import "./maps";
 
 // Include remainder of required parts
-@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/root";
 

scss/maps/_maps.scss

@@ -18,7 +18,11 @@ $gray-colors: (
   "gray-950": $gray-950
 ) !default;
 
-$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+$all-colors: map-merge-multiple($gray-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+$all-colors-rgb: map-loop($all-colors, to-rgb, "$value") !default;
+
+$utilities-all-bg-colors: map-loop($all-colors, rgba-css-var, "$key", "bg") !default;
+$utilities-all-border-colors: map-loop($all-colors, rgba-css-var, "$key", "border") !default;
 
 // Typography
 $utilities-font-family-values: (
@@ -61,38 +65,34 @@ $utilities-letter-spacing-values: (
 // Shadows
 $utilities-shadows: (
   null: $box-shadow,
-  1: $box-shadow-sm,
-  2: $box-shadow-lg,
-  3: $box-shadow-xl,
-  4: $box-shadow-2xl,
-  5: $box-shadow-3xl,
-  6: $box-shadow-4xl,
+  1: $box-shadow-1,
+  2: $box-shadow-2,
+  3: $box-shadow-3,
+  4: $box-shadow-4,
+  5: $box-shadow-5,
+  6: $box-shadow-6,
   inset: $box-shadow-inset,
-  outline: $box-shadow-outline,
-  focus: $box-shadow-focus,
   none: none
 ) !default;
 
 $utilities-soft-shadows: (
-  1: $box-soft-shadow-sm,
-  2: $box-soft-shadow-lg,
-  3: $box-soft-shadow-xl,
-  4: $box-soft-shadow-2xl,
-  5: $box-soft-shadow-3xl,
-  6: $box-soft-shadow-4xl,
-  none: none
+  1: $box-soft-shadow-1,
+  2: $box-soft-shadow-2,
+  3: $box-soft-shadow-3,
+  4: $box-soft-shadow-4,
+  5: $box-soft-shadow-5,
+  6: $box-soft-shadow-6,
 ) !default;
 
 // Border radius
 $utilities-border-radius: (
   null: $border-radius,
   0: 0,
   1: $border-radius-sm,
-  2: $border-radius-lg,
-  3: $border-radius-xl,
-  4: $border-radius-2xl,
-  5: $border-radius-3xl,
-  6: $border-radius-4xl,
+  2: $border-radius,
+  3: $border-radius-lg,
+  4: $border-radius-xl,
+  5: $border-radius-xxl,
   pill: $border-radius-pill,
   circle: $border-radius-circle,
   card: $card-border-radius

scss/utilities/_animation.scss

@@ -3,45 +3,45 @@
 //
 
 @keyframes ping {
-    75%, 100% {
-        transform: scale(2);
-        opacity: 0;
-    }
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
 }
 
 @keyframes pulse {
-    50% {
-        opacity: .5;
-    }
+  50% {
+    opacity: .5;
+  }
 }
 
 @keyframes bounce {
-    0%, 100% {
-        transform: translateY(-25%);
-        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-    }
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
 
-    50% {
-        transform: none;
-        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
 }
 
 @keyframes slideLeft {
-    0% {
-        transform:translateX(0);
-    }
-    to {
-        transform:translateX(-100%);
-    }
+  0% {
+    transform:translateX(0);
+  }
+  to {
+    transform:translateX(-100%);
+  }
 }
 
 @keyframes slideRight {
-    0% {
-        transform:translateX(-100%);
-    }
+  0% {
+    transform:translateX(-100%);
+  }
 
-    to {
-        transform:translateX(0);
-    }
+  to {
+    transform:translateX(0);
+  }
 }

scss/utilities/_filter.scss

@@ -1,8 +1,8 @@
 .filter {
-    --#{$variable-prefix}blur: 0;
-    --#{$variable-prefix}contrast: 0;
-    --#{$variable-prefix}grayscale: 0;
-    --#{$variable-prefix}hue-rotate: 0;
-    --#{$variable-prefix}drop-shadow: 0;
-    filter: blur(var(--#{$variable-prefix}blur));
+  --#{$prefix}blur: 0;
+  --#{$prefix}contrast: 0;
+  --#{$prefix}grayscale: 0;
+  --#{$prefix}hue-rotate: 0;
+  --#{$prefix}drop-shadow: 0;
+  filter: blur(var(--#{$prefix}blur));
 }

scss/utilities/_height-calc.scss

@@ -4,18 +4,17 @@
 
 // Dynamic height calculation
 @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-        .h#{$infix}-calc {
-            --#{$prefix}h#{$infix}: 0px;
-            height: calc(100vh - var(--#{$prefix}h#{$infix}));
-        }
-
-        .w#{$infix}-calc {
-            --#{$prefix}w#{$infix}: 0px;
-            width: calc(100vw - var(--#{$prefix}w#{$infix}));
-        }
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
+    .h#{$infix}-calc {
+      --#{$prefix}h#{$infix}: 0px;
+      height: calc(100vh - var(--#{$prefix}h#{$infix}));
+    }
+
+    .w#{$infix}-calc {
+      --#{$prefix}w#{$infix}: 0px;
+      width: calc(100vw - var(--#{$prefix}w#{$infix}));
     }
+  }
 }

scss/utilities/_helpers.scss

@@ -2,18 +2,6 @@
 // Helpers
 //
 
-// Clearfix
-.floatfix {
-  &:before,
-  &:after {
-    content: '';
-    display: table;
-  }
-  &:after {
-      clear: both;
-  }
-}
-
 // Scrollable areas
 .scrollable-x {
   white-space: nowrap;

scss/utilities/_transform.scss

@@ -1,14 +1,14 @@
 .transform {
-    --#{$prefix}translate-x: 0;
-    --#{$prefix}translate-y: 0;
-    --#{$prefix}translate-z: 0;
-    --#{$prefix}perspective: 0;
-    --#{$prefix}rotate: 0;
-    --#{$prefix}rotate-x: 0;
-    --#{$prefix}rotate-y: 0;
-    --#{$prefix}skew-x: 0;
-    --#{$prefix}skew-y: 0;
-    --#{$prefix}scale-x: 1;
-    --#{$prefix}scale-y: 1;
-    transform: translateX(var(--#{$prefix}translate-x)) translateY(var(--#{$prefix}translate-y)) perspective(var(--#{$prefix}perspective)) rotate(var(--#{$prefix}rotate)) rotateX(var(--#{$prefix}rotate-x)) rotateY(var(--#{$prefix}rotate-y)) skewX(var(--#{$prefix}skew-x)) skewY(var(--#{$prefix}skew-y)) scaleX(var(--#{$prefix}scale-x)) scaleY(var(--#{$prefix}scale-y));
+  --#{$prefix}translate-x: 0;
+  --#{$prefix}translate-y: 0;
+  --#{$prefix}translate-z: 0;
+  --#{$prefix}perspective: 0;
+  --#{$prefix}rotate: 0;
+  --#{$prefix}rotate-x: 0;
+  --#{$prefix}rotate-y: 0;
+  --#{$prefix}skew-x: 0;
+  --#{$prefix}skew-y: 0;
+  --#{$prefix}scale-x: 1;
+  --#{$prefix}scale-y: 1;
+  transform: translateX(var(--#{$prefix}translate-x)) translateY(var(--#{$prefix}translate-y)) perspective(var(--#{$prefix}perspective)) rotate(var(--#{$prefix}rotate)) rotateX(var(--#{$prefix}rotate-x)) rotateY(var(--#{$prefix}rotate-y)) skewX(var(--#{$prefix}skew-x)) skewY(var(--#{$prefix}skew-y)) scaleX(var(--#{$prefix}scale-x)) scaleY(var(--#{$prefix}scale-y));
 }