scu-web-components 0.0.37 → 0.0.38

package/dist/tokens/source/cssPropertiesApi.ts

@@ -1,526 +1,524 @@
 
-/* eslint-disable */
-/**
- * scw
- * Function for dynamically creating and auto-completing
- * scw design system files.
- * @param {DSysProp} dsysStyles
- * @param {Object} otherStyles
- * @return {string}
- */
-export default function scw(
-  dsysStyles: DSysProp,
-  otherStyles: {[prop:string]: string} = {},
-) {
-  return `style="${
-    Object.entries(dsysStyles).map((entry) => {
-      return `--scw-${entry[0]}: var( --scw-${entry[1]} );`;
-    }).join('\n  ')}${
-    Object.entries(otherStyles).map((entry) => {
-      return `${entry[0]}: ${entry[1]};`;
-    }).join('\n  ')
-  }"`;
+// import type * as CSS from 'csstype';
+
+declare module 'csstype' {
+  interface Properties {
+    // Allow CSS Custom Properties
+    [index: `--${string}`]: any;
+  }
 }
 
-export type DSysProp = {
-  backgroundColor? : DSysValue,
-  backgroundColorHover? : DSysValue,
-  color? : DSysValue,
-  colorHover? : DSysValue,
-  borderColor? : DSysValue,
-  borderTop? : DSysValue,
-  borderBottom? : DSysValue,
-  borderLeft? : DSysValue,
-  borderRight? : DSysValue,
-  font? : DSysValue,
-  size? : DSysValue,
-  maxSize? : DSysValue,
-  minSize? : DSysValue,
-  width? : DSysValue,
-  maxWidth? : DSysValue,
-  minWidth? : DSysValue,
-  height? : DSysValue,
-  maxHeight? : DSysValue,
-  minHeight? : DSysValue,
-  left? : DSysValue,
-  right? : DSysValue,
-  top? : DSysValue,
-  bottom? : DSysValue,
-  margin? : DSysValue,
-  marginLeft? : DSysValue,
-  marginRight? : DSysValue,
-  marginTop? : DSysValue,
-  marginBottom? : DSysValue,
-  marginWidth? : DSysValue,
-  marginX? : DSysValue,
-  marginHeight? : DSysValue,
-  marginY? : DSysValue,
-  padding? : DSysValue,
-  paddingLeft? : DSysValue,
-  paddingRight? : DSysValue,
-  paddingTop? : DSysValue,
-  paddingBottom? : DSysValue,
-  paddingWidth? : DSysValue,
-  paddingX? : DSysValue,
-  paddingHeight? : DSysValue,
-  paddingY? : DSysValue,
-  borderRadius? : DSysValue,
-  gap? : DSysValue,
-  fill? : DSysValue,
-  element? : DSysValue,
-  layout? : DSysValue,
-  text? : DSysValue,
-  stack? : DSysValue,
-  flexH? : DSysValue,
-  flexV? : DSysValue,
-  center? : DSysValue,
-  float? : DSysValue,
-  floatLeft? : DSysValue,
-  floatRight? : DSysValue,
-  floatClearLeft? : DSysValue,
-  floatClearRight? : DSysValue,
-  fillChildren? : DSysValue,
-  childrenFill? : DSysValue,
-  hide? : DSysValue,
-  alignmentCenter? : DSysValue,
-  alignmentCenterCenter? : DSysValue,
-  alignmentCenterLeft? : DSysValue,
-  alignmentLeftCenter? : DSysValue,
-  alignmentCenterRight? : DSysValue,
-  alignmentRightCenter? : DSysValue,
-  alignmentTop? : DSysValue,
-  alignmentTopLeft? : DSysValue,
-  alignmentLeftTop? : DSysValue,
-  alignmentLeft? : DSysValue,
-  alignmentTopCenter? : DSysValue,
-  alignmentCenterTop? : DSysValue,
-  alignmentTopRight? : DSysValue,
-  alignmentRightTop? : DSysValue,
-  alignmentRight? : DSysValue,
-  alignmentBottomLeft? : DSysValue,
-  alignmentLeftBottom? : DSysValue,
-  alignmentBottom? : DSysValue,
-  alignmentBottomCenter? : DSysValue,
-  alignmentCenterBottom? : DSysValue,
-  alignmentBottomRight? : DSysValue,
-  alignmentRightBottom? : DSysValue,
-  alignmentStretch? : DSysValue,
-  alignmentStretchLeft? : DSysValue,
-  alignmentLeftStretch? : DSysValue,
-  alignmentStretchTop? : DSysValue,
-  alignmentTopStretch? : DSysValue,
-  alignmentStretchRight? : DSysValue,
-  alignmentRightStretch? : DSysValue,
-  alignmentStretchBottom? : DSysValue,
-  alignmentBottomStretch? : DSysValue,
-  alignmentStretchCenter? : DSysValue,
-  alignmentCenterStretch? : DSysValue,
-  baseline? : DSysValue,
-  alignmentBaselineLeft? : DSysValue,
-  alignmentLeftBaseline? : DSysValue,
-  alignmentBaselineRight? : DSysValue,
-  alignmentRightBaseline? : DSysValue,
-  alignmentBaselineCenter? : DSysValue,
-  alignmentCenterBaseline? : DSysValue,
-  backgroundColorXlg? : DSysValue,
-  backgroundColorHoverXlg? : DSysValue,
-  colorXlg? : DSysValue,
-  colorHoverXlg? : DSysValue,
-  borderColorXlg? : DSysValue,
-  borderTopXlg? : DSysValue,
-  borderBottomXlg? : DSysValue,
-  borderLeftXlg? : DSysValue,
-  borderRightXlg? : DSysValue,
-  fontXlg? : DSysValue,
-  sizeXlg? : DSysValue,
-  maxSizeXlg? : DSysValue,
-  minSizeXlg? : DSysValue,
-  widthXlg? : DSysValue,
-  maxWidthXlg? : DSysValue,
-  minWidthXlg? : DSysValue,
-  heightXlg? : DSysValue,
-  maxHeightXlg? : DSysValue,
-  minHeightXlg? : DSysValue,
-  leftXlg? : DSysValue,
-  rightXlg? : DSysValue,
-  topXlg? : DSysValue,
-  bottomXlg? : DSysValue,
-  marginXlg? : DSysValue,
-  marginLeftXlg? : DSysValue,
-  marginRightXlg? : DSysValue,
-  marginTopXlg? : DSysValue,
-  marginBottomXlg? : DSysValue,
-  marginWidthXlg? : DSysValue,
-  marginXXlg? : DSysValue,
-  marginHeightXlg? : DSysValue,
-  marginYXlg? : DSysValue,
-  paddingXlg? : DSysValue,
-  paddingLeftXlg? : DSysValue,
-  paddingRightXlg? : DSysValue,
-  paddingTopXlg? : DSysValue,
-  paddingBottomXlg? : DSysValue,
-  paddingWidthXlg? : DSysValue,
-  paddingXXlg? : DSysValue,
-  paddingHeightXlg? : DSysValue,
-  paddingYXlg? : DSysValue,
-  borderRadiusXlg? : DSysValue,
-  gapXlg? : DSysValue,
-  fillXlg? : DSysValue,
-  elementXlg? : DSysValue,
-  layoutXlg? : DSysValue,
-  textXlg? : DSysValue,
-  stackXlg? : DSysValue,
-  flexHXlg? : DSysValue,
-  flexVXlg? : DSysValue,
-  centerXlg? : DSysValue,
-  floatXlg? : DSysValue,
-  floatLeftXlg? : DSysValue,
-  floatRightXlg? : DSysValue,
-  floatClearLeftXlg? : DSysValue,
-  floatClearRightXlg? : DSysValue,
-  fillChildrenXlg? : DSysValue,
-  childrenFillXlg? : DSysValue,
-  hideXlg? : DSysValue,
-  alignmentCenterXlg? : DSysValue,
-  alignmentCenterCenterXlg? : DSysValue,
-  alignmentCenterLeftXlg? : DSysValue,
-  alignmentLeftCenterXlg? : DSysValue,
-  alignmentCenterRightXlg? : DSysValue,
-  alignmentRightCenterXlg? : DSysValue,
-  alignmentTopXlg? : DSysValue,
-  alignmentTopLeftXlg? : DSysValue,
-  alignmentLeftTopXlg? : DSysValue,
-  alignmentLeftXlg? : DSysValue,
-  alignmentTopCenterXlg? : DSysValue,
-  alignmentCenterTopXlg? : DSysValue,
-  alignmentTopRightXlg? : DSysValue,
-  alignmentRightTopXlg? : DSysValue,
-  alignmentRightXlg? : DSysValue,
-  alignmentBottomLeftXlg? : DSysValue,
-  alignmentLeftBottomXlg? : DSysValue,
-  alignmentBottomXlg? : DSysValue,
-  alignmentBottomCenterXlg? : DSysValue,
-  alignmentCenterBottomXlg? : DSysValue,
-  alignmentBottomRightXlg? : DSysValue,
-  alignmentRightBottomXlg? : DSysValue,
-  alignmentStretchXlg? : DSysValue,
-  alignmentStretchLeftXlg? : DSysValue,
-  alignmentLeftStretchXlg? : DSysValue,
-  alignmentStretchTopXlg? : DSysValue,
-  alignmentTopStretchXlg? : DSysValue,
-  alignmentStretchRightXlg? : DSysValue,
-  alignmentRightStretchXlg? : DSysValue,
-  alignmentStretchBottomXlg? : DSysValue,
-  alignmentBottomStretchXlg? : DSysValue,
-  alignmentStretchCenterXlg? : DSysValue,
-  alignmentCenterStretchXlg? : DSysValue,
-  baselineXlg? : DSysValue,
-  alignmentBaselineLeftXlg? : DSysValue,
-  alignmentLeftBaselineXlg? : DSysValue,
-  alignmentBaselineRightXlg? : DSysValue,
-  alignmentRightBaselineXlg? : DSysValue,
-  alignmentBaselineCenterXlg? : DSysValue,
-  alignmentCenterBaselineXlg? : DSysValue,
-  backgroundColorLg? : DSysValue,
-  backgroundColorHoverLg? : DSysValue,
-  colorLg? : DSysValue,
-  colorHoverLg? : DSysValue,
-  borderColorLg? : DSysValue,
-  borderTopLg? : DSysValue,
-  borderBottomLg? : DSysValue,
-  borderLeftLg? : DSysValue,
-  borderRightLg? : DSysValue,
-  fontLg? : DSysValue,
-  sizeLg? : DSysValue,
-  maxSizeLg? : DSysValue,
-  minSizeLg? : DSysValue,
-  widthLg? : DSysValue,
-  maxWidthLg? : DSysValue,
-  minWidthLg? : DSysValue,
-  heightLg? : DSysValue,
-  maxHeightLg? : DSysValue,
-  minHeightLg? : DSysValue,
-  leftLg? : DSysValue,
-  rightLg? : DSysValue,
-  topLg? : DSysValue,
-  bottomLg? : DSysValue,
-  marginLg? : DSysValue,
-  marginLeftLg? : DSysValue,
-  marginRightLg? : DSysValue,
-  marginTopLg? : DSysValue,
-  marginBottomLg? : DSysValue,
-  marginWidthLg? : DSysValue,
-  marginXLg? : DSysValue,
-  marginHeightLg? : DSysValue,
-  marginYLg? : DSysValue,
-  paddingLg? : DSysValue,
-  paddingLeftLg? : DSysValue,
-  paddingRightLg? : DSysValue,
-  paddingTopLg? : DSysValue,
-  paddingBottomLg? : DSysValue,
-  paddingWidthLg? : DSysValue,
-  paddingXLg? : DSysValue,
-  paddingHeightLg? : DSysValue,
-  paddingYLg? : DSysValue,
-  borderRadiusLg? : DSysValue,
-  gapLg? : DSysValue,
-  fillLg? : DSysValue,
-  elementLg? : DSysValue,
-  layoutLg? : DSysValue,
-  textLg? : DSysValue,
-  stackLg? : DSysValue,
-  flexHLg? : DSysValue,
-  flexVLg? : DSysValue,
-  centerLg? : DSysValue,
-  floatLg? : DSysValue,
-  floatLeftLg? : DSysValue,
-  floatRightLg? : DSysValue,
-  floatClearLeftLg? : DSysValue,
-  floatClearRightLg? : DSysValue,
-  fillChildrenLg? : DSysValue,
-  childrenFillLg? : DSysValue,
-  hideLg? : DSysValue,
-  alignmentCenterLg? : DSysValue,
-  alignmentCenterCenterLg? : DSysValue,
-  alignmentCenterLeftLg? : DSysValue,
-  alignmentLeftCenterLg? : DSysValue,
-  alignmentCenterRightLg? : DSysValue,
-  alignmentRightCenterLg? : DSysValue,
-  alignmentTopLg? : DSysValue,
-  alignmentTopLeftLg? : DSysValue,
-  alignmentLeftTopLg? : DSysValue,
-  alignmentLeftLg? : DSysValue,
-  alignmentTopCenterLg? : DSysValue,
-  alignmentCenterTopLg? : DSysValue,
-  alignmentTopRightLg? : DSysValue,
-  alignmentRightTopLg? : DSysValue,
-  alignmentRightLg? : DSysValue,
-  alignmentBottomLeftLg? : DSysValue,
-  alignmentLeftBottomLg? : DSysValue,
-  alignmentBottomLg? : DSysValue,
-  alignmentBottomCenterLg? : DSysValue,
-  alignmentCenterBottomLg? : DSysValue,
-  alignmentBottomRightLg? : DSysValue,
-  alignmentRightBottomLg? : DSysValue,
-  alignmentStretchLg? : DSysValue,
-  alignmentStretchLeftLg? : DSysValue,
-  alignmentLeftStretchLg? : DSysValue,
-  alignmentStretchTopLg? : DSysValue,
-  alignmentTopStretchLg? : DSysValue,
-  alignmentStretchRightLg? : DSysValue,
-  alignmentRightStretchLg? : DSysValue,
-  alignmentStretchBottomLg? : DSysValue,
-  alignmentBottomStretchLg? : DSysValue,
-  alignmentStretchCenterLg? : DSysValue,
-  alignmentCenterStretchLg? : DSysValue,
-  baselineLg? : DSysValue,
-  alignmentBaselineLeftLg? : DSysValue,
-  alignmentLeftBaselineLg? : DSysValue,
-  alignmentBaselineRightLg? : DSysValue,
-  alignmentRightBaselineLg? : DSysValue,
-  alignmentBaselineCenterLg? : DSysValue,
-  alignmentCenterBaselineLg? : DSysValue,
-  backgroundColorMd? : DSysValue,
-  backgroundColorHoverMd? : DSysValue,
-  colorMd? : DSysValue,
-  colorHoverMd? : DSysValue,
-  borderColorMd? : DSysValue,
-  borderTopMd? : DSysValue,
-  borderBottomMd? : DSysValue,
-  borderLeftMd? : DSysValue,
-  borderRightMd? : DSysValue,
-  fontMd? : DSysValue,
-  sizeMd? : DSysValue,
-  maxSizeMd? : DSysValue,
-  minSizeMd? : DSysValue,
-  widthMd? : DSysValue,
-  maxWidthMd? : DSysValue,
-  minWidthMd? : DSysValue,
-  heightMd? : DSysValue,
-  maxHeightMd? : DSysValue,
-  minHeightMd? : DSysValue,
-  leftMd? : DSysValue,
-  rightMd? : DSysValue,
-  topMd? : DSysValue,
-  bottomMd? : DSysValue,
-  marginMd? : DSysValue,
-  marginLeftMd? : DSysValue,
-  marginRightMd? : DSysValue,
-  marginTopMd? : DSysValue,
-  marginBottomMd? : DSysValue,
-  marginWidthMd? : DSysValue,
-  marginXMd? : DSysValue,
-  marginHeightMd? : DSysValue,
-  marginYMd? : DSysValue,
-  paddingMd? : DSysValue,
-  paddingLeftMd? : DSysValue,
-  paddingRightMd? : DSysValue,
-  paddingTopMd? : DSysValue,
-  paddingBottomMd? : DSysValue,
-  paddingWidthMd? : DSysValue,
-  paddingXMd? : DSysValue,
-  paddingHeightMd? : DSysValue,
-  paddingYMd? : DSysValue,
-  borderRadiusMd? : DSysValue,
-  gapMd? : DSysValue,
-  fillMd? : DSysValue,
-  elementMd? : DSysValue,
-  layoutMd? : DSysValue,
-  textMd? : DSysValue,
-  stackMd? : DSysValue,
-  flexHMd? : DSysValue,
-  flexVMd? : DSysValue,
-  centerMd? : DSysValue,
-  floatMd? : DSysValue,
-  floatLeftMd? : DSysValue,
-  floatRightMd? : DSysValue,
-  floatClearLeftMd? : DSysValue,
-  floatClearRightMd? : DSysValue,
-  fillChildrenMd? : DSysValue,
-  childrenFillMd? : DSysValue,
-  hideMd? : DSysValue,
-  alignmentCenterMd? : DSysValue,
-  alignmentCenterCenterMd? : DSysValue,
-  alignmentCenterLeftMd? : DSysValue,
-  alignmentLeftCenterMd? : DSysValue,
-  alignmentCenterRightMd? : DSysValue,
-  alignmentRightCenterMd? : DSysValue,
-  alignmentTopMd? : DSysValue,
-  alignmentTopLeftMd? : DSysValue,
-  alignmentLeftTopMd? : DSysValue,
-  alignmentLeftMd? : DSysValue,
-  alignmentTopCenterMd? : DSysValue,
-  alignmentCenterTopMd? : DSysValue,
-  alignmentTopRightMd? : DSysValue,
-  alignmentRightTopMd? : DSysValue,
-  alignmentRightMd? : DSysValue,
-  alignmentBottomLeftMd? : DSysValue,
-  alignmentLeftBottomMd? : DSysValue,
-  alignmentBottomMd? : DSysValue,
-  alignmentBottomCenterMd? : DSysValue,
-  alignmentCenterBottomMd? : DSysValue,
-  alignmentBottomRightMd? : DSysValue,
-  alignmentRightBottomMd? : DSysValue,
-  alignmentStretchMd? : DSysValue,
-  alignmentStretchLeftMd? : DSysValue,
-  alignmentLeftStretchMd? : DSysValue,
-  alignmentStretchTopMd? : DSysValue,
-  alignmentTopStretchMd? : DSysValue,
-  alignmentStretchRightMd? : DSysValue,
-  alignmentRightStretchMd? : DSysValue,
-  alignmentStretchBottomMd? : DSysValue,
-  alignmentBottomStretchMd? : DSysValue,
-  alignmentStretchCenterMd? : DSysValue,
-  alignmentCenterStretchMd? : DSysValue,
-  baselineMd? : DSysValue,
-  alignmentBaselineLeftMd? : DSysValue,
-  alignmentLeftBaselineMd? : DSysValue,
-  alignmentBaselineRightMd? : DSysValue,
-  alignmentRightBaselineMd? : DSysValue,
-  alignmentBaselineCenterMd? : DSysValue,
-  alignmentCenterBaselineMd? : DSysValue,
-  backgroundColorSm? : DSysValue,
-  backgroundColorHoverSm? : DSysValue,
-  colorSm? : DSysValue,
-  colorHoverSm? : DSysValue,
-  borderColorSm? : DSysValue,
-  borderTopSm? : DSysValue,
-  borderBottomSm? : DSysValue,
-  borderLeftSm? : DSysValue,
-  borderRightSm? : DSysValue,
-  fontSm? : DSysValue,
-  sizeSm? : DSysValue,
-  maxSizeSm? : DSysValue,
-  minSizeSm? : DSysValue,
-  widthSm? : DSysValue,
-  maxWidthSm? : DSysValue,
-  minWidthSm? : DSysValue,
-  heightSm? : DSysValue,
-  maxHeightSm? : DSysValue,
-  minHeightSm? : DSysValue,
-  leftSm? : DSysValue,
-  rightSm? : DSysValue,
-  topSm? : DSysValue,
-  bottomSm? : DSysValue,
-  marginSm? : DSysValue,
-  marginLeftSm? : DSysValue,
-  marginRightSm? : DSysValue,
-  marginTopSm? : DSysValue,
-  marginBottomSm? : DSysValue,
-  marginWidthSm? : DSysValue,
-  marginXSm? : DSysValue,
-  marginHeightSm? : DSysValue,
-  marginYSm? : DSysValue,
-  paddingSm? : DSysValue,
-  paddingLeftSm? : DSysValue,
-  paddingRightSm? : DSysValue,
-  paddingTopSm? : DSysValue,
-  paddingBottomSm? : DSysValue,
-  paddingWidthSm? : DSysValue,
-  paddingXSm? : DSysValue,
-  paddingHeightSm? : DSysValue,
-  paddingYSm? : DSysValue,
-  borderRadiusSm? : DSysValue,
-  gapSm? : DSysValue,
-  fillSm? : DSysValue,
-  elementSm? : DSysValue,
-  layoutSm? : DSysValue,
-  textSm? : DSysValue,
-  stackSm? : DSysValue,
-  flexHSm? : DSysValue,
-  flexVSm? : DSysValue,
-  centerSm? : DSysValue,
-  floatSm? : DSysValue,
-  floatLeftSm? : DSysValue,
-  floatRightSm? : DSysValue,
-  floatClearLeftSm? : DSysValue,
-  floatClearRightSm? : DSysValue,
-  fillChildrenSm? : DSysValue,
-  childrenFillSm? : DSysValue,
-  hideSm? : DSysValue,
-  alignmentCenterSm? : DSysValue,
-  alignmentCenterCenterSm? : DSysValue,
-  alignmentCenterLeftSm? : DSysValue,
-  alignmentLeftCenterSm? : DSysValue,
-  alignmentCenterRightSm? : DSysValue,
-  alignmentRightCenterSm? : DSysValue,
-  alignmentTopSm? : DSysValue,
-  alignmentTopLeftSm? : DSysValue,
-  alignmentLeftTopSm? : DSysValue,
-  alignmentLeftSm? : DSysValue,
-  alignmentTopCenterSm? : DSysValue,
-  alignmentCenterTopSm? : DSysValue,
-  alignmentTopRightSm? : DSysValue,
-  alignmentRightTopSm? : DSysValue,
-  alignmentRightSm? : DSysValue,
-  alignmentBottomLeftSm? : DSysValue,
-  alignmentLeftBottomSm? : DSysValue,
-  alignmentBottomSm? : DSysValue,
-  alignmentBottomCenterSm? : DSysValue,
-  alignmentCenterBottomSm? : DSysValue,
-  alignmentBottomRightSm? : DSysValue,
-  alignmentRightBottomSm? : DSysValue,
-  alignmentStretchSm? : DSysValue,
-  alignmentStretchLeftSm? : DSysValue,
-  alignmentLeftStretchSm? : DSysValue,
-  alignmentStretchTopSm? : DSysValue,
-  alignmentTopStretchSm? : DSysValue,
-  alignmentStretchRightSm? : DSysValue,
-  alignmentRightStretchSm? : DSysValue,
-  alignmentStretchBottomSm? : DSysValue,
-  alignmentBottomStretchSm? : DSysValue,
-  alignmentStretchCenterSm? : DSysValue,
-  alignmentCenterStretchSm? : DSysValue,
-  baselineSm? : DSysValue,
-  alignmentBaselineLeftSm? : DSysValue,
-  alignmentLeftBaselineSm? : DSysValue,
-  alignmentBaselineRightSm? : DSysValue,
-  alignmentRightBaselineSm? : DSysValue,
-  alignmentBaselineCenterSm? : DSysValue,
-  alignmentCenterBaselineSm? : DSysValue
+// Properties
+export type SCWProp = {
+  backgroundColor? : SCWColorValue,
+  backgroundColorHover? : SCWColorValue,
+  color? : SCWColorValue,
+  colorHover? : SCWColorValue,
+  borderColor? : SCWColorValue,
+  borderTop? : SCWColorValue,
+  borderBottom? : SCWColorValue,
+  borderLeft? : SCWColorValue,
+  borderRight? : SCWColorValue,
+  font? : SCWTypeValue,
+  size? : SCWSpacingValue,
+  maxSize? : SCWSpacingValue,
+  minSize? : SCWSpacingValue,
+  width? : SCWSpacingValue,
+  maxWidth? : SCWSpacingValue,
+  minWidth? : SCWSpacingValue,
+  height? : SCWSpacingValue,
+  maxHeight? : SCWSpacingValue,
+  minHeight? : SCWSpacingValue,
+  left? : SCWSpacingValue,
+  right? : SCWSpacingValue,
+  top? : SCWSpacingValue,
+  bottom? : SCWSpacingValue,
+  margin? : SCWSpacingValue,
+  marginLeft? : SCWSpacingValue,
+  marginRight? : SCWSpacingValue,
+  marginTop? : SCWSpacingValue,
+  marginBottom? : SCWSpacingValue,
+  marginWidth? : SCWSpacingValue,
+  marginX? : SCWSpacingValue,
+  marginHeight? : SCWSpacingValue,
+  marginY? : SCWSpacingValue,
+  padding? : SCWSpacingValue,
+  paddingLeft? : SCWSpacingValue,
+  paddingRight? : SCWSpacingValue,
+  paddingTop? : SCWSpacingValue,
+  paddingBottom? : SCWSpacingValue,
+  paddingWidth? : SCWSpacingValue,
+  paddingX? : SCWSpacingValue,
+  paddingHeight? : SCWSpacingValue,
+  paddingY? : SCWSpacingValue,
+  borderRadius? : SCWSpacingValue,
+  gap? : SCWSpacingValue,
+  fill? : number,
+  element? : true,
+  layout? : true,
+  text? : true,
+  stack? : true,
+  flexH? : true,
+  flexV? : true,
+  center? : true,
+  float? : true,
+  floatLeft? : true,
+  floatRight? : true,
+  floatClearLeft? : true,
+  floatClearRight? : true,
+  fillChildren? : true,
+  childrenFill? : true,
+  hide? : true,
+  alignmentCenter? : true,
+  alignmentCenterCenter? : true,
+  alignmentCenterLeft? : true,
+  alignmentLeftCenter? : true,
+  alignmentCenterRight? : true,
+  alignmentRightCenter? : true,
+  alignmentTop? : true,
+  alignmentTopLeft? : true,
+  alignmentLeftTop? : true,
+  alignmentLeft? : true,
+  alignmentTopCenter? : true,
+  alignmentCenterTop? : true,
+  alignmentTopRight? : true,
+  alignmentRightTop? : true,
+  alignmentRight? : true,
+  alignmentBottomLeft? : true,
+  alignmentLeftBottom? : true,
+  alignmentBottom? : true,
+  alignmentBottomCenter? : true,
+  alignmentCenterBottom? : true,
+  alignmentBottomRight? : true,
+  alignmentRightBottom? : true,
+  alignmentStretch? : true,
+  alignmentStretchLeft? : true,
+  alignmentLeftStretch? : true,
+  alignmentStretchTop? : true,
+  alignmentTopStretch? : true,
+  alignmentStretchRight? : true,
+  alignmentRightStretch? : true,
+  alignmentStretchBottom? : true,
+  alignmentBottomStretch? : true,
+  alignmentStretchCenter? : true,
+  alignmentCenterStretch? : true,
+  baseline? : true,
+  alignmentBaselineLeft? : true,
+  alignmentLeftBaseline? : true,
+  alignmentBaselineRight? : true,
+  alignmentRightBaseline? : true,
+  alignmentBaselineCenter? : true,
+  alignmentCenterBaseline? : true,
+  backgroundColorXlg? : SCWColorValue,
+  backgroundColorHoverXlg? : SCWColorValue,
+  colorXlg? : SCWColorValue,
+  colorHoverXlg? : SCWColorValue,
+  borderColorXlg? : SCWColorValue,
+  borderTopXlg? : SCWColorValue,
+  borderBottomXlg? : SCWColorValue,
+  borderLeftXlg? : SCWColorValue,
+  borderRightXlg? : SCWColorValue,
+  fontXlg? : SCWTypeValue,
+  sizeXlg? : SCWSpacingValue,
+  maxSizeXlg? : SCWSpacingValue,
+  minSizeXlg? : SCWSpacingValue,
+  widthXlg? : SCWSpacingValue,
+  maxWidthXlg? : SCWSpacingValue,
+  minWidthXlg? : SCWSpacingValue,
+  heightXlg? : SCWSpacingValue,
+  maxHeightXlg? : SCWSpacingValue,
+  minHeightXlg? : SCWSpacingValue,
+  leftXlg? : SCWSpacingValue,
+  rightXlg? : SCWSpacingValue,
+  topXlg? : SCWSpacingValue,
+  bottomXlg? : SCWSpacingValue,
+  marginXlg? : SCWSpacingValue,
+  marginLeftXlg? : SCWSpacingValue,
+  marginRightXlg? : SCWSpacingValue,
+  marginTopXlg? : SCWSpacingValue,
+  marginBottomXlg? : SCWSpacingValue,
+  marginWidthXlg? : SCWSpacingValue,
+  marginXXlg? : SCWSpacingValue,
+  marginHeightXlg? : SCWSpacingValue,
+  marginYXlg? : SCWSpacingValue,
+  paddingXlg? : SCWSpacingValue,
+  paddingLeftXlg? : SCWSpacingValue,
+  paddingRightXlg? : SCWSpacingValue,
+  paddingTopXlg? : SCWSpacingValue,
+  paddingBottomXlg? : SCWSpacingValue,
+  paddingWidthXlg? : SCWSpacingValue,
+  paddingXXlg? : SCWSpacingValue,
+  paddingHeightXlg? : SCWSpacingValue,
+  paddingYXlg? : SCWSpacingValue,
+  borderRadiusXlg? : SCWSpacingValue,
+  gapXlg? : SCWSpacingValue,
+  fillXlg? : number,
+  elementXlg? : true,
+  layoutXlg? : true,
+  textXlg? : true,
+  stackXlg? : true,
+  flexHXlg? : true,
+  flexVXlg? : true,
+  centerXlg? : true,
+  floatXlg? : true,
+  floatLeftXlg? : true,
+  floatRightXlg? : true,
+  floatClearLeftXlg? : true,
+  floatClearRightXlg? : true,
+  fillChildrenXlg? : true,
+  childrenFillXlg? : true,
+  hideXlg? : true,
+  alignmentCenterXlg? : true,
+  alignmentCenterCenterXlg? : true,
+  alignmentCenterLeftXlg? : true,
+  alignmentLeftCenterXlg? : true,
+  alignmentCenterRightXlg? : true,
+  alignmentRightCenterXlg? : true,
+  alignmentTopXlg? : true,
+  alignmentTopLeftXlg? : true,
+  alignmentLeftTopXlg? : true,
+  alignmentLeftXlg? : true,
+  alignmentTopCenterXlg? : true,
+  alignmentCenterTopXlg? : true,
+  alignmentTopRightXlg? : true,
+  alignmentRightTopXlg? : true,
+  alignmentRightXlg? : true,
+  alignmentBottomLeftXlg? : true,
+  alignmentLeftBottomXlg? : true,
+  alignmentBottomXlg? : true,
+  alignmentBottomCenterXlg? : true,
+  alignmentCenterBottomXlg? : true,
+  alignmentBottomRightXlg? : true,
+  alignmentRightBottomXlg? : true,
+  alignmentStretchXlg? : true,
+  alignmentStretchLeftXlg? : true,
+  alignmentLeftStretchXlg? : true,
+  alignmentStretchTopXlg? : true,
+  alignmentTopStretchXlg? : true,
+  alignmentStretchRightXlg? : true,
+  alignmentRightStretchXlg? : true,
+  alignmentStretchBottomXlg? : true,
+  alignmentBottomStretchXlg? : true,
+  alignmentStretchCenterXlg? : true,
+  alignmentCenterStretchXlg? : true,
+  baselineXlg? : true,
+  alignmentBaselineLeftXlg? : true,
+  alignmentLeftBaselineXlg? : true,
+  alignmentBaselineRightXlg? : true,
+  alignmentRightBaselineXlg? : true,
+  alignmentBaselineCenterXlg? : true,
+  alignmentCenterBaselineXlg? : true,
+  backgroundColorLg? : SCWColorValue,
+  backgroundColorHoverLg? : SCWColorValue,
+  colorLg? : SCWColorValue,
+  colorHoverLg? : SCWColorValue,
+  borderColorLg? : SCWColorValue,
+  borderTopLg? : SCWColorValue,
+  borderBottomLg? : SCWColorValue,
+  borderLeftLg? : SCWColorValue,
+  borderRightLg? : SCWColorValue,
+  fontLg? : SCWTypeValue,
+  sizeLg? : SCWSpacingValue,
+  maxSizeLg? : SCWSpacingValue,
+  minSizeLg? : SCWSpacingValue,
+  widthLg? : SCWSpacingValue,
+  maxWidthLg? : SCWSpacingValue,
+  minWidthLg? : SCWSpacingValue,
+  heightLg? : SCWSpacingValue,
+  maxHeightLg? : SCWSpacingValue,
+  minHeightLg? : SCWSpacingValue,
+  leftLg? : SCWSpacingValue,
+  rightLg? : SCWSpacingValue,
+  topLg? : SCWSpacingValue,
+  bottomLg? : SCWSpacingValue,
+  marginLg? : SCWSpacingValue,
+  marginLeftLg? : SCWSpacingValue,
+  marginRightLg? : SCWSpacingValue,
+  marginTopLg? : SCWSpacingValue,
+  marginBottomLg? : SCWSpacingValue,
+  marginWidthLg? : SCWSpacingValue,
+  marginXLg? : SCWSpacingValue,
+  marginHeightLg? : SCWSpacingValue,
+  marginYLg? : SCWSpacingValue,
+  paddingLg? : SCWSpacingValue,
+  paddingLeftLg? : SCWSpacingValue,
+  paddingRightLg? : SCWSpacingValue,
+  paddingTopLg? : SCWSpacingValue,
+  paddingBottomLg? : SCWSpacingValue,
+  paddingWidthLg? : SCWSpacingValue,
+  paddingXLg? : SCWSpacingValue,
+  paddingHeightLg? : SCWSpacingValue,
+  paddingYLg? : SCWSpacingValue,
+  borderRadiusLg? : SCWSpacingValue,
+  gapLg? : SCWSpacingValue,
+  fillLg? : number,
+  elementLg? : true,
+  layoutLg? : true,
+  textLg? : true,
+  stackLg? : true,
+  flexHLg? : true,
+  flexVLg? : true,
+  centerLg? : true,
+  floatLg? : true,
+  floatLeftLg? : true,
+  floatRightLg? : true,
+  floatClearLeftLg? : true,
+  floatClearRightLg? : true,
+  fillChildrenLg? : true,
+  childrenFillLg? : true,
+  hideLg? : true,
+  alignmentCenterLg? : true,
+  alignmentCenterCenterLg? : true,
+  alignmentCenterLeftLg? : true,
+  alignmentLeftCenterLg? : true,
+  alignmentCenterRightLg? : true,
+  alignmentRightCenterLg? : true,
+  alignmentTopLg? : true,
+  alignmentTopLeftLg? : true,
+  alignmentLeftTopLg? : true,
+  alignmentLeftLg? : true,
+  alignmentTopCenterLg? : true,
+  alignmentCenterTopLg? : true,
+  alignmentTopRightLg? : true,
+  alignmentRightTopLg? : true,
+  alignmentRightLg? : true,
+  alignmentBottomLeftLg? : true,
+  alignmentLeftBottomLg? : true,
+  alignmentBottomLg? : true,
+  alignmentBottomCenterLg? : true,
+  alignmentCenterBottomLg? : true,
+  alignmentBottomRightLg? : true,
+  alignmentRightBottomLg? : true,
+  alignmentStretchLg? : true,
+  alignmentStretchLeftLg? : true,
+  alignmentLeftStretchLg? : true,
+  alignmentStretchTopLg? : true,
+  alignmentTopStretchLg? : true,
+  alignmentStretchRightLg? : true,
+  alignmentRightStretchLg? : true,
+  alignmentStretchBottomLg? : true,
+  alignmentBottomStretchLg? : true,
+  alignmentStretchCenterLg? : true,
+  alignmentCenterStretchLg? : true,
+  baselineLg? : true,
+  alignmentBaselineLeftLg? : true,
+  alignmentLeftBaselineLg? : true,
+  alignmentBaselineRightLg? : true,
+  alignmentRightBaselineLg? : true,
+  alignmentBaselineCenterLg? : true,
+  alignmentCenterBaselineLg? : true,
+  backgroundColorMd? : SCWColorValue,
+  backgroundColorHoverMd? : SCWColorValue,
+  colorMd? : SCWColorValue,
+  colorHoverMd? : SCWColorValue,
+  borderColorMd? : SCWColorValue,
+  borderTopMd? : SCWColorValue,
+  borderBottomMd? : SCWColorValue,
+  borderLeftMd? : SCWColorValue,
+  borderRightMd? : SCWColorValue,
+  fontMd? : SCWTypeValue,
+  sizeMd? : SCWSpacingValue,
+  maxSizeMd? : SCWSpacingValue,
+  minSizeMd? : SCWSpacingValue,
+  widthMd? : SCWSpacingValue,
+  maxWidthMd? : SCWSpacingValue,
+  minWidthMd? : SCWSpacingValue,
+  heightMd? : SCWSpacingValue,
+  maxHeightMd? : SCWSpacingValue,
+  minHeightMd? : SCWSpacingValue,
+  leftMd? : SCWSpacingValue,
+  rightMd? : SCWSpacingValue,
+  topMd? : SCWSpacingValue,
+  bottomMd? : SCWSpacingValue,
+  marginMd? : SCWSpacingValue,
+  marginLeftMd? : SCWSpacingValue,
+  marginRightMd? : SCWSpacingValue,
+  marginTopMd? : SCWSpacingValue,
+  marginBottomMd? : SCWSpacingValue,
+  marginWidthMd? : SCWSpacingValue,
+  marginXMd? : SCWSpacingValue,
+  marginHeightMd? : SCWSpacingValue,
+  marginYMd? : SCWSpacingValue,
+  paddingMd? : SCWSpacingValue,
+  paddingLeftMd? : SCWSpacingValue,
+  paddingRightMd? : SCWSpacingValue,
+  paddingTopMd? : SCWSpacingValue,
+  paddingBottomMd? : SCWSpacingValue,
+  paddingWidthMd? : SCWSpacingValue,
+  paddingXMd? : SCWSpacingValue,
+  paddingHeightMd? : SCWSpacingValue,
+  paddingYMd? : SCWSpacingValue,
+  borderRadiusMd? : SCWSpacingValue,
+  gapMd? : SCWSpacingValue,
+  fillMd? : number,
+  elementMd? : true,
+  layoutMd? : true,
+  textMd? : true,
+  stackMd? : true,
+  flexHMd? : true,
+  flexVMd? : true,
+  centerMd? : true,
+  floatMd? : true,
+  floatLeftMd? : true,
+  floatRightMd? : true,
+  floatClearLeftMd? : true,
+  floatClearRightMd? : true,
+  fillChildrenMd? : true,
+  childrenFillMd? : true,
+  hideMd? : true,
+  alignmentCenterMd? : true,
+  alignmentCenterCenterMd? : true,
+  alignmentCenterLeftMd? : true,
+  alignmentLeftCenterMd? : true,
+  alignmentCenterRightMd? : true,
+  alignmentRightCenterMd? : true,
+  alignmentTopMd? : true,
+  alignmentTopLeftMd? : true,
+  alignmentLeftTopMd? : true,
+  alignmentLeftMd? : true,
+  alignmentTopCenterMd? : true,
+  alignmentCenterTopMd? : true,
+  alignmentTopRightMd? : true,
+  alignmentRightTopMd? : true,
+  alignmentRightMd? : true,
+  alignmentBottomLeftMd? : true,
+  alignmentLeftBottomMd? : true,
+  alignmentBottomMd? : true,
+  alignmentBottomCenterMd? : true,
+  alignmentCenterBottomMd? : true,
+  alignmentBottomRightMd? : true,
+  alignmentRightBottomMd? : true,
+  alignmentStretchMd? : true,
+  alignmentStretchLeftMd? : true,
+  alignmentLeftStretchMd? : true,
+  alignmentStretchTopMd? : true,
+  alignmentTopStretchMd? : true,
+  alignmentStretchRightMd? : true,
+  alignmentRightStretchMd? : true,
+  alignmentStretchBottomMd? : true,
+  alignmentBottomStretchMd? : true,
+  alignmentStretchCenterMd? : true,
+  alignmentCenterStretchMd? : true,
+  baselineMd? : true,
+  alignmentBaselineLeftMd? : true,
+  alignmentLeftBaselineMd? : true,
+  alignmentBaselineRightMd? : true,
+  alignmentRightBaselineMd? : true,
+  alignmentBaselineCenterMd? : true,
+  alignmentCenterBaselineMd? : true,
+  backgroundColorSm? : SCWColorValue,
+  backgroundColorHoverSm? : SCWColorValue,
+  colorSm? : SCWColorValue,
+  colorHoverSm? : SCWColorValue,
+  borderColorSm? : SCWColorValue,
+  borderTopSm? : SCWColorValue,
+  borderBottomSm? : SCWColorValue,
+  borderLeftSm? : SCWColorValue,
+  borderRightSm? : SCWColorValue,
+  fontSm? : SCWTypeValue,
+  sizeSm? : SCWSpacingValue,
+  maxSizeSm? : SCWSpacingValue,
+  minSizeSm? : SCWSpacingValue,
+  widthSm? : SCWSpacingValue,
+  maxWidthSm? : SCWSpacingValue,
+  minWidthSm? : SCWSpacingValue,
+  heightSm? : SCWSpacingValue,
+  maxHeightSm? : SCWSpacingValue,
+  minHeightSm? : SCWSpacingValue,
+  leftSm? : SCWSpacingValue,
+  rightSm? : SCWSpacingValue,
+  topSm? : SCWSpacingValue,
+  bottomSm? : SCWSpacingValue,
+  marginSm? : SCWSpacingValue,
+  marginLeftSm? : SCWSpacingValue,
+  marginRightSm? : SCWSpacingValue,
+  marginTopSm? : SCWSpacingValue,
+  marginBottomSm? : SCWSpacingValue,
+  marginWidthSm? : SCWSpacingValue,
+  marginXSm? : SCWSpacingValue,
+  marginHeightSm? : SCWSpacingValue,
+  marginYSm? : SCWSpacingValue,
+  paddingSm? : SCWSpacingValue,
+  paddingLeftSm? : SCWSpacingValue,
+  paddingRightSm? : SCWSpacingValue,
+  paddingTopSm? : SCWSpacingValue,
+  paddingBottomSm? : SCWSpacingValue,
+  paddingWidthSm? : SCWSpacingValue,
+  paddingXSm? : SCWSpacingValue,
+  paddingHeightSm? : SCWSpacingValue,
+  paddingYSm? : SCWSpacingValue,
+  borderRadiusSm? : SCWSpacingValue,
+  gapSm? : SCWSpacingValue,
+  fillSm? : number,
+  elementSm? : true,
+  layoutSm? : true,
+  textSm? : true,
+  stackSm? : true,
+  flexHSm? : true,
+  flexVSm? : true,
+  centerSm? : true,
+  floatSm? : true,
+  floatLeftSm? : true,
+  floatRightSm? : true,
+  floatClearLeftSm? : true,
+  floatClearRightSm? : true,
+  fillChildrenSm? : true,
+  childrenFillSm? : true,
+  hideSm? : true,
+  alignmentCenterSm? : true,
+  alignmentCenterCenterSm? : true,
+  alignmentCenterLeftSm? : true,
+  alignmentLeftCenterSm? : true,
+  alignmentCenterRightSm? : true,
+  alignmentRightCenterSm? : true,
+  alignmentTopSm? : true,
+  alignmentTopLeftSm? : true,
+  alignmentLeftTopSm? : true,
+  alignmentLeftSm? : true,
+  alignmentTopCenterSm? : true,
+  alignmentCenterTopSm? : true,
+  alignmentTopRightSm? : true,
+  alignmentRightTopSm? : true,
+  alignmentRightSm? : true,
+  alignmentBottomLeftSm? : true,
+  alignmentLeftBottomSm? : true,
+  alignmentBottomSm? : true,
+  alignmentBottomCenterSm? : true,
+  alignmentCenterBottomSm? : true,
+  alignmentBottomRightSm? : true,
+  alignmentRightBottomSm? : true,
+  alignmentStretchSm? : true,
+  alignmentStretchLeftSm? : true,
+  alignmentLeftStretchSm? : true,
+  alignmentStretchTopSm? : true,
+  alignmentTopStretchSm? : true,
+  alignmentStretchRightSm? : true,
+  alignmentRightStretchSm? : true,
+  alignmentStretchBottomSm? : true,
+  alignmentBottomStretchSm? : true,
+  alignmentStretchCenterSm? : true,
+  alignmentCenterStretchSm? : true,
+  baselineSm? : true,
+  alignmentBaselineLeftSm? : true,
+  alignmentLeftBaselineSm? : true,
+  alignmentBaselineRightSm? : true,
+  alignmentRightBaselineSm? : true,
+  alignmentBaselineCenterSm? : true,
+  alignmentCenterBaselineSm? : true
 };
 
-type DSysValue =
+// Categorized Types
+type SCWValue =
+  SCWColorValue |
+  SCWTypeValue |
+  SCWEffectValue |
+  SCWIconValue |
+  SCWSpacingValue |
+  SCWBreakpointValue |
+  true |
+  number
+
+type SCWColorValue =
   'color-primary-01' |
   'color-primary-02' |
   'color-primary-03' |
@@ -680,7 +678,8 @@ type DSysValue =
   'color-heloc-08' |
   'color-heloc-09' |
   'color-heloc-092' |
-  'color-heloc-095' |
+  'color-heloc-095'
+type SCWTypeValue =
   'type-text-10-font' |
   'type-text-09-font' |
   'type-text-08-font' |
@@ -713,9 +712,11 @@ type DSysValue =
   'type-text-bold-04-font' |
   'type-text-bold-03-font' |
   'type-text-bold-02-font' |
-  'type-text-bold-01-font' |
+  'type-text-bold-01-font'
+type SCWEffectValue =
   'effect-shadow-shadow' |
-  'effect-focus-shadow' |
+  'effect-focus-shadow'
+type SCWIconValue =
   'graphic-apple-app-store-width' |
   'graphic-apple-app-store-height' |
   'graphic-apple-app-store-background-size' |
@@ -730,7 +731,8 @@ type DSysValue =
   'graphic-ehl-background-size' |
   'graphic-google-play-store-width' |
   'graphic-google-play-store-height' |
-  'graphic-google-play-store-background-size' |
+  'graphic-google-play-store-background-size'
+type SCWSpacingValue =
   'spacing-0' |
   'spacing-0-3' |
   'spacing-0-4' |
@@ -829,7 +831,8 @@ type DSysValue =
   'colvw-9' |
   'colvw-10' |
   'colvw-11' |
-  'colvw-12' |
+  'colvw-12'
+type SCWBreakpointValue =
   'breakpoint-xlg-name' |
   'breakpoint-xlg-max-width' |
   'breakpoint-xlg-min-width' |
@@ -841,6 +844,5 @@ type DSysValue =
   'breakpoint-md-min-width' |
   'breakpoint-sm-name' |
   'breakpoint-sm-max-width' |
-  'breakpoint-sm-min-width' |
-  true
+  'breakpoint-sm-min-width'