@kimdw-rtk/ui 0.0.8 → 0.0.11

package/dist/styles/sprinkles.css.cjs

@@ -0,0 +1,141 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _sprinkles = require('@vanilla-extract/sprinkles');
+var _styles = require('#styles');
+var _themes = require('#themes');
+var _tokens = require('#tokens');
+const colors = Object.assign(
+  {},
+  ...[
+    ...Object.entries(_tokens.lightColor).reduce(
+      (prev, [name, scales]) => [
+        ...prev,
+        ...Object.entries(scales).map(
+          ([scale, value]) => ({ [`${name}-${scale}`]: `rgb(${value})` })
+        )
+      ],
+      []
+    ),
+    ...Object.entries(_themes.theme.color).map(
+      ([name, value]) => ({ [name]: `rgb(${value})` })
+    )
+  ]
+);
+const colorProperties = _sprinkles.defineProperties.call(void 0, {
+  "@layer": _styles.sprinklesLayer,
+  properties: {
+    color: colors,
+    borderColor: colors,
+    backgroundColor: colors
+  }
+});
+const size = {
+  auto: "auto",
+  "0": "0",
+  "100%": "100%",
+  "5em": "5em",
+  "10em": "10em",
+  "15em": "15em",
+  "20em": "20em",
+  "25em": "25em"
+};
+const boxProperties = _sprinkles.defineProperties.call(void 0, {
+  "@layer": _styles.sprinklesLayer,
+  conditions: {
+    mobile: {},
+    desktop: { "@media": "screen and (min-width: 1024px)" }
+  },
+  defaultCondition: "mobile",
+  properties: {
+    display: ["flex", "block", "none", "inline", "inline-block", "inline-flex"],
+    flexDirection: ["row", "column", "row-reverse", "column-reverse"],
+    flexWrap: ["nowrap", "wrap", "wrap-reverse", "revert", "revert-layer"],
+    flexShrink: {
+      "0": 0,
+      "1": 1
+    },
+    flexGrow: {
+      "0": 0,
+      "1": 1
+    },
+    flexBasis: size,
+    justifyContent: [
+      "stretch",
+      "flex-start",
+      "center",
+      "flex-end",
+      "space-around",
+      "space-between"
+    ],
+    alignItems: ["stretch", "flex-start", "center", "flex-end"],
+    gap: _tokens.spacing,
+    paddingTop: _tokens.spacing,
+    paddingBottom: _tokens.spacing,
+    paddingLeft: _tokens.spacing,
+    paddingRight: _tokens.spacing,
+    marginTop: _tokens.spacing,
+    marginBottom: _tokens.spacing,
+    marginLeft: _tokens.spacing,
+    marginRight: _tokens.spacing,
+    boxShadow: {
+      "border-sm": `0 0 0.5rem 0.0625rem rgba(${_themes.theme.color.border}, 0.33)`,
+      "border-md": `0 0 1rem 0.1875rem rgba(${_themes.theme.color.border}, 0.33)`,
+      "border-lg": `0 0 1.5rem 0.375rem rgba(${_themes.theme.color.border}, 0.33)`,
+      "accent-sm": `0 0 0.5rem 0.0625rem rgb(${_themes.theme.color.accent})`,
+      "accent-md": `0 0 1rem 0.125rem rgb(${_themes.theme.color.accent})`,
+      "accent-lg": `0 0 1.5rem 0.375rem rgb(${_themes.theme.color.accent})`
+    },
+    borderRadius: {
+      none: "0",
+      sm: `calc(${_themes.theme.borderRadius} * 0.75)`,
+      md: _themes.theme.borderRadius,
+      lg: `calc(${_themes.theme.borderRadius} * 1.5)`
+    },
+    width: size,
+    height: size
+  },
+  shorthands: {
+    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
+    marginX: ["marginLeft", "marginRight"],
+    marginY: ["marginTop", "marginBottom"]
+  }
+});
+const typographyProperties = _sprinkles.defineProperties.call(void 0, {
+  "@layer": _styles.sprinklesLayer,
+  conditions: {
+    mobile: {},
+    desktop: { "@media": `screen and (min-width: ${_tokens.breakpoint.md}px)` }
+  },
+  defaultCondition: "mobile",
+  properties: {
+    lineHeight: _tokens.typography.lineHeight,
+    fontSize: _tokens.typography.size,
+    fontWeight: _tokens.typography.weight,
+    wordBreak: ["break-all", "break-word", "keep-all"]
+  }
+});
+const miscProperties = _sprinkles.defineProperties.call(void 0, {
+  "@layer": _styles.sprinklesLayer,
+  properties: {
+    cursor: {
+      pointer: "pointer",
+      "not-allowed": "not-allowed",
+      default: "default"
+    }
+  }
+});
+const sprinkles = _sprinkles.createSprinkles.call(void 0, 
+  boxProperties,
+  colorProperties,
+  typographyProperties,
+  miscProperties
+);
+
+
+
+
+
+
+exports.boxProperties = boxProperties; exports.colorProperties = colorProperties; exports.miscProperties = miscProperties; exports.sprinkles = sprinkles; exports.typographyProperties = typographyProperties;
+//# sourceMappingURL=sprinkles.css.cjs.map

package/dist/styles/sprinkles.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/sprinkles.css.ts","/home/runner/work/react-kits/react-kits/packages/ui/dist/styles/sprinkles.css.cjs"],"names":[],"mappings":"AAAA,gIAAkD;AAElD,iCAA+B;AAC/B,iCAAsB;AACtB,iCAA4D;AAO5D,MAAM,OAAA,EAAS,MAAA,CAAO,MAAA;AAAA,EACpB,CAAC,CAAA;AAAA,EACD,GAAG;AAAA,IACD,GAAG,MAAA,CAAO,OAAA,CAAQ,kBAAU,CAAA,CAAE,MAAA;AAAA,MAC5B,CAAC,IAAA,EAAM,CAAC,IAAA,EAAM,MAAM,CAAA,EAAA,GAAM;AAAA,QACxB,GAAG,IAAA;AAAA,QACH,GAAG,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA,CAAE,GAAA;AAAA,UACxB,CAAC,CAAC,KAAA,EAAO,KAAK,CAAA,EAAA,GAAA,CACX,EAAE,CAAC,CAAA,EAAA;AACR,QAAA;AACF,MAAA;AACC,MAAA;AACH,IAAA;AAC+B,IAAA;AACF,MAAA;AAC7B,IAAA;AACF,EAAA;AACF;AAE+B;AACnB,EAAA;AACE,EAAA;AACH,IAAA;AACM,IAAA;AACI,IAAA;AACnB,EAAA;AACD;AAEY;AACL,EAAA;AACD,EAAA;AACG,EAAA;AACD,EAAA;AACC,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACV;AAE6B;AACjB,EAAA;AACE,EAAA;AACD,IAAA;AACY,IAAA;AACvB,EAAA;AACkB,EAAA;AACN,EAAA;AACiB,IAAA;AACJ,IAAA;AACM,IAAA;AACjB,IAAA;AACL,MAAA;AACA,MAAA;AACP,IAAA;AACU,IAAA;AACH,MAAA;AACA,MAAA;AACP,IAAA;AACW,IAAA;AACK,IAAA;AACd,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACF,IAAA;AACwB,IAAA;AACnB,IAAA;AACO,IAAA;AACG,IAAA;AACF,IAAA;AACC,IAAA;AACH,IAAA;AACG,IAAA;AACF,IAAA;AACC,IAAA;AACF,IAAA;AACI,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACf,IAAA;AACc,IAAA;AACN,MAAA;AACY,MAAA;AACR,MAAA;AACQ,MAAA;AACpB,IAAA;AACO,IAAA;AACC,IAAA;AACV,EAAA;AACY,EAAA;AACc,IAAA;AACE,IAAA;AACD,IAAA;AACH,IAAA;AACE,IAAA;AACD,IAAA;AACzB,EAAA;AACD;AAEmC;AACxB,EAAA;AACE,EAAA;AACD,IAAA;AACY,IAAA;AACvB,EAAA;AACkB,EAAA;AACN,EAAA;AACa,IAAA;AACF,IAAA;AACE,IAAA;AACE,IAAA;AAC3B,EAAA;AACD;AAE6B;AAClB,EAAA;AACE,EAAA;AACF,IAAA;AACG,MAAA;AACM,MAAA;AACN,MAAA;AACX,IAAA;AACF,EAAA;AACD;AAEwB;AACvB,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACF;ACbmC;AACA;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/styles/sprinkles.css.cjs","sourcesContent":["import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';\n\nimport { sprinklesLayer } from '#styles';\nimport { theme } from '#themes';\nimport { breakpoint, lightColor, spacing, typography } from '#tokens';\n\ntype ColorName = keyof typeof lightColor;\ntype ColorScale<C extends ColorName> = keyof (typeof lightColor)[C];\ntype Color = Record<`${ColorName}-${ColorScale<ColorName>}`, string>;\ntype SemanticColor = Record<keyof typeof theme.color, string>;\n\nconst colors = Object.assign(\n  {},\n  ...[\n    ...Object.entries(lightColor).reduce(\n      (prev, [name, scales]) => [\n        ...prev,\n        ...Object.entries(scales).map(\n          ([scale, value]) =>\n            ({ [`${name}-${scale}`]: `rgb(${value})` }) as Color,\n        ),\n      ],\n      [] as Color[],\n    ),\n    ...Object.entries(theme.color).map(\n      ([name, value]) => ({ [name]: `rgb(${value})` }) as SemanticColor,\n    ),\n  ],\n) as Record<keyof Color | keyof SemanticColor, string>;\n\nexport const colorProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  properties: {\n    color: colors,\n    borderColor: colors,\n    backgroundColor: colors,\n  },\n});\n\nconst size = {\n  auto: 'auto',\n  '0': '0',\n  '100%': '100%',\n  '5em': '5em',\n  '10em': '10em',\n  '15em': '15em',\n  '20em': '20em',\n  '25em': '25em',\n};\n\nexport const boxProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  conditions: {\n    mobile: {},\n    desktop: { '@media': 'screen and (min-width: 1024px)' },\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    display: ['flex', 'block', 'none', 'inline', 'inline-block', 'inline-flex'],\n    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],\n    flexWrap: ['nowrap', 'wrap', 'wrap-reverse', 'revert', 'revert-layer'],\n    flexShrink: {\n      '0': 0,\n      '1': 1,\n    },\n    flexGrow: {\n      '0': 0,\n      '1': 1,\n    },\n    flexBasis: size,\n    justifyContent: [\n      'stretch',\n      'flex-start',\n      'center',\n      'flex-end',\n      'space-around',\n      'space-between',\n    ],\n    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],\n    gap: spacing,\n    paddingTop: spacing,\n    paddingBottom: spacing,\n    paddingLeft: spacing,\n    paddingRight: spacing,\n    marginTop: spacing,\n    marginBottom: spacing,\n    marginLeft: spacing,\n    marginRight: spacing,\n    boxShadow: {\n      'border-sm': `0 0 0.5rem 0.0625rem rgba(${theme.color.border}, 0.33)`,\n      'border-md': `0 0 1rem 0.1875rem rgba(${theme.color.border}, 0.33)`,\n      'border-lg': `0 0 1.5rem 0.375rem rgba(${theme.color.border}, 0.33)`,\n      'accent-sm': `0 0 0.5rem 0.0625rem rgb(${theme.color.accent})`,\n      'accent-md': `0 0 1rem 0.125rem rgb(${theme.color.accent})`,\n      'accent-lg': `0 0 1.5rem 0.375rem rgb(${theme.color.accent})`,\n    },\n    borderRadius: {\n      none: '0',\n      sm: `calc(${theme.borderRadius} * 0.75)`,\n      md: theme.borderRadius,\n      lg: `calc(${theme.borderRadius} * 1.5)`,\n    },\n    width: size,\n    height: size,\n  },\n  shorthands: {\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],\n    marginX: ['marginLeft', 'marginRight'],\n    marginY: ['marginTop', 'marginBottom'],\n  },\n});\n\nexport const typographyProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  conditions: {\n    mobile: {},\n    desktop: { '@media': `screen and (min-width: ${breakpoint.md}px)` },\n  },\n  defaultCondition: 'mobile',\n  properties: {\n    lineHeight: typography.lineHeight,\n    fontSize: typography.size,\n    fontWeight: typography.weight,\n    wordBreak: ['break-all', 'break-word', 'keep-all'],\n  },\n});\n\nexport const miscProperties = defineProperties({\n  '@layer': sprinklesLayer,\n  properties: {\n    cursor: {\n      pointer: 'pointer',\n      'not-allowed': 'not-allowed',\n      default: 'default',\n    },\n  },\n});\n\nexport const sprinkles = createSprinkles(\n  boxProperties,\n  colorProperties,\n  typographyProperties,\n  miscProperties,\n);\n\nexport type SprinklesProps = Parameters<typeof sprinkles>[0];\n",null]}