scu-web-components 0.0.39 → 0.0.41

package/dist/tokens/source/cssPropertiesApi.ts

@@ -19,6 +19,7 @@ export type SCWProp = {
   borderBottom? : SCWColorValue,
   borderLeft? : SCWColorValue,
   borderRight? : SCWColorValue,
+  border? : SCWColorValue,
   font? : SCWTypeValue,
   size? : SCWSpacingValue,
   maxSize? : SCWSpacingValue,
@@ -118,6 +119,7 @@ export type SCWProp = {
   borderBottomXlg? : SCWColorValue,
   borderLeftXlg? : SCWColorValue,
   borderRightXlg? : SCWColorValue,
+  borderXlg? : SCWColorValue,
   fontXlg? : SCWTypeValue,
   sizeXlg? : SCWSpacingValue,
   maxSizeXlg? : SCWSpacingValue,
@@ -217,6 +219,7 @@ export type SCWProp = {
   borderBottomLg? : SCWColorValue,
   borderLeftLg? : SCWColorValue,
   borderRightLg? : SCWColorValue,
+  borderLg? : SCWColorValue,
   fontLg? : SCWTypeValue,
   sizeLg? : SCWSpacingValue,
   maxSizeLg? : SCWSpacingValue,
@@ -316,6 +319,7 @@ export type SCWProp = {
   borderBottomMd? : SCWColorValue,
   borderLeftMd? : SCWColorValue,
   borderRightMd? : SCWColorValue,
+  borderMd? : SCWColorValue,
   fontMd? : SCWTypeValue,
   sizeMd? : SCWSpacingValue,
   maxSizeMd? : SCWSpacingValue,
@@ -415,6 +419,7 @@ export type SCWProp = {
   borderBottomSm? : SCWColorValue,
   borderLeftSm? : SCWColorValue,
   borderRightSm? : SCWColorValue,
+  borderSm? : SCWColorValue,
   fontSm? : SCWTypeValue,
   sizeSm? : SCWSpacingValue,
   maxSizeSm? : SCWSpacingValue,

package/dist/tokens/source/cssPropertiesApiTypedStyles.ts

@@ -10,20 +10,30 @@ import type * as CSS from 'csstype';
  * @param {CSS.Properties} otherStyles
  * @return {string}
  */
-export function scw(
+export default function style(
   dsysStyles: SCWProp,
   otherStyles: CSS.Properties = {},
 ) : string {
+
+  const toKebab = (str) => str.replace(/([a-z0–9])([A-Z])/g, "$1-$2").toLowerCase();
+
   return `style="${
     Object.entries(dsysStyles).map((entry) => {
-      if (entry[1] === true) {
-        return `--scw-${entry[0]}: 1;`;
+      if (!entry[0]) return '';
+      const name = toKebab(entry[0]);
+      const value = entry[1];
+      if (value === true) {
+        return `--scw-${name}: 1;`;
+      }else if (!isNaN(value as any)) {
+        return `--scw-${name}: ${value};`;
       }else{
-        return `--scw-${entry[0]}: var( --scw-${entry[1]} );`;
+        return `--scw-${name}: var( --scw-${value} );`;
       }
     }).join('\n  ')}${
     Object.entries(otherStyles).map((entry) => {
-      return `${entry[0]}: ${entry[1]};`;
+      if (!entry[0]) return '';
+      const name = toKebab(entry[0]);
+      return `${name}: ${entry[1]};`;
     }).join('\n  ')
   }"`;
 }

package/dist/tokens/source/cssPropertiesApiTypedStylesCssType.ts

@@ -3,7 +3,7 @@ import { SCWProp } from "./cssPropertiesApi";
 import type * as CSS from 'csstype';
 
 /**
- * scw
+ * style
  * Function for dynamically creating and auto-completing
  * scw design system files.
  * @param {DSysProp} dsysStyles
@@ -14,12 +14,20 @@ export function scw(
   dsysStyles: SCWProp,
   otherStyles: CSS.Properties = {},
 ) : CSS.Properties {
+
+  const toKebab = (str) => str.replace(/([a-z0–9])([A-Z])/g, "$1-$2").toLowerCase();
+
   const dsysStylesObj: {[key:`--scw-${string}`]: string} = {};
   Object.entries(dsysStyles).map((entry) => {
-    if (entry[1] === true) {
-      dsysStylesObj[`--scw-${entry[0]}`] = '1';
+    if (!entry[0]) return '';
+    const name = toKebab(entry[0]);
+    const value = entry[1];
+    if (value === true) {
+      dsysStylesObj[`--scw-${name}`] = '1';
+    }else if (!isNaN(value as any)) {
+      return `--scw-${name}: ${value};`;
     }else{
-      dsysStylesObj[`--scw-${entry[0]}`] = `var( --ex-${entry[1]} )`;
+      dsysStylesObj[`--scw-${name}`] = `var( --scw-${value} )`;
     }
   });
   return {

package/dist/tokens/source/cssVariables/breakpoints-lg-.json

@@ -5,12 +5,12 @@
     "category": "Breakpoint"
   },
   "max-width": {
-    "output": "--scw-breakpoint-lg-max-width: 992px;",
+    "output": "--scw-breakpoint-lg-max-width: 0px;",
     "property": "--scw-breakpoint-lg-max-width",
     "category": "Breakpoint"
   },
   "min-width": {
-    "output": "--scw-breakpoint-lg-min-width: 0px;",
+    "output": "--scw-breakpoint-lg-min-width: 992px;",
     "property": "--scw-breakpoint-lg-min-width",
     "category": "Breakpoint"
   }

package/dist/tokens/source/cssVariables/breakpoints-md-.json

@@ -5,12 +5,12 @@
     "category": "Breakpoint"
   },
   "max-width": {
-    "output": "--scw-breakpoint-md-max-width: 768px;",
+    "output": "--scw-breakpoint-md-max-width: 0px;",
     "property": "--scw-breakpoint-md-max-width",
     "category": "Breakpoint"
   },
   "min-width": {
-    "output": "--scw-breakpoint-md-min-width: 0px;",
+    "output": "--scw-breakpoint-md-min-width: 768px;",
     "property": "--scw-breakpoint-md-min-width",
     "category": "Breakpoint"
   }

package/dist/tokens/source/cssVariables/breakpoints-sm-.json

@@ -5,12 +5,12 @@
     "category": "Breakpoint"
   },
   "max-width": {
-    "output": "--scw-breakpoint-sm-max-width: 576px;",
+    "output": "--scw-breakpoint-sm-max-width: 0px;",
     "property": "--scw-breakpoint-sm-max-width",
     "category": "Breakpoint"
   },
   "min-width": {
-    "output": "--scw-breakpoint-sm-min-width: 0px;",
+    "output": "--scw-breakpoint-sm-min-width: 576px;",
     "property": "--scw-breakpoint-sm-min-width",
     "category": "Breakpoint"
   }

package/dist/tokens/source/cssVariables/breakpoints-xlg-.json

@@ -5,12 +5,12 @@
     "category": "Breakpoint"
   },
   "max-width": {
-    "output": "--scw-breakpoint-xlg-max-width: 1200px;",
+    "output": "--scw-breakpoint-xlg-max-width: 0px;",
     "property": "--scw-breakpoint-xlg-max-width",
     "category": "Breakpoint"
   },
   "min-width": {
-    "output": "--scw-breakpoint-xlg-min-width: 0px;",
+    "output": "--scw-breakpoint-xlg-min-width: 1200px;",
     "property": "--scw-breakpoint-xlg-min-width",
     "category": "Breakpoint"
   }

package/dist/tokens/source/cssVariables.css

@@ -309,15 +309,15 @@
 --scw-colvw-11: 91.6667vw;
 --scw-colvw-12: 100vw;
 --scw-breakpoint-xlg-name: xlg;
---scw-breakpoint-xlg-max-width: 1200px;
---scw-breakpoint-xlg-min-width: 0px;
+--scw-breakpoint-xlg-max-width: 0px;
+--scw-breakpoint-xlg-min-width: 1200px;
 --scw-breakpoint-lg-name: lg;
---scw-breakpoint-lg-max-width: 992px;
---scw-breakpoint-lg-min-width: 0px;
+--scw-breakpoint-lg-max-width: 0px;
+--scw-breakpoint-lg-min-width: 992px;
 --scw-breakpoint-md-name: md;
---scw-breakpoint-md-max-width: 768px;
---scw-breakpoint-md-min-width: 0px;
+--scw-breakpoint-md-max-width: 0px;
+--scw-breakpoint-md-min-width: 768px;
 --scw-breakpoint-sm-name: sm;
---scw-breakpoint-sm-max-width: 576px;
---scw-breakpoint-sm-min-width: 0px;
+--scw-breakpoint-sm-max-width: 0px;
+--scw-breakpoint-sm-min-width: 576px;
 }

package/dist/tokens/source/cssVariables.json

@@ -2152,12 +2152,12 @@
       "category": "Breakpoint"
     },
     "max-width": {
-      "output": "--scw-breakpoint-xlg-max-width: 1200px;",
+      "output": "--scw-breakpoint-xlg-max-width: 0px;",
       "property": "--scw-breakpoint-xlg-max-width",
       "category": "Breakpoint"
     },
     "min-width": {
-      "output": "--scw-breakpoint-xlg-min-width: 0px;",
+      "output": "--scw-breakpoint-xlg-min-width: 1200px;",
       "property": "--scw-breakpoint-xlg-min-width",
       "category": "Breakpoint"
     }
@@ -2169,12 +2169,12 @@
       "category": "Breakpoint"
     },
     "max-width": {
-      "output": "--scw-breakpoint-lg-max-width: 992px;",
+      "output": "--scw-breakpoint-lg-max-width: 0px;",
       "property": "--scw-breakpoint-lg-max-width",
       "category": "Breakpoint"
     },
     "min-width": {
-      "output": "--scw-breakpoint-lg-min-width: 0px;",
+      "output": "--scw-breakpoint-lg-min-width: 992px;",
       "property": "--scw-breakpoint-lg-min-width",
       "category": "Breakpoint"
     }
@@ -2186,12 +2186,12 @@
       "category": "Breakpoint"
     },
     "max-width": {
-      "output": "--scw-breakpoint-md-max-width: 768px;",
+      "output": "--scw-breakpoint-md-max-width: 0px;",
       "property": "--scw-breakpoint-md-max-width",
       "category": "Breakpoint"
     },
     "min-width": {
-      "output": "--scw-breakpoint-md-min-width: 0px;",
+      "output": "--scw-breakpoint-md-min-width: 768px;",
       "property": "--scw-breakpoint-md-min-width",
       "category": "Breakpoint"
     }
@@ -2203,12 +2203,12 @@
       "category": "Breakpoint"
     },
     "max-width": {
-      "output": "--scw-breakpoint-sm-max-width: 576px;",
+      "output": "--scw-breakpoint-sm-max-width: 0px;",
       "property": "--scw-breakpoint-sm-max-width",
       "category": "Breakpoint"
     },
     "min-width": {
-      "output": "--scw-breakpoint-sm-min-width: 0px;",
+      "output": "--scw-breakpoint-sm-min-width: 576px;",
       "property": "--scw-breakpoint-sm-min-width",
       "category": "Breakpoint"
     }

package/dist/tokens/source/jsCss.js

@@ -3,7 +3,7 @@
   
     constructor (config) {// version, extraCssPromise, config ) {
       this.prefix = 'scw';// dynamic
-      this.buildUUID = '3c965607-2439-4c64-8793-14cfd107c300';// dynamic
+      this.buildUUID = '1d7ca81d-9e0b-457a-aec7-0826a63d2aa0';// dynamic
 
       this.generator = false;
       this.initialized = false;