@mekari/pixel3-styled-system 0.0.5-dev.1 → 0.0.5-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/jsx/cq.d.ts +10 -0
- package/jsx/cq.mjs +18 -0
- package/package.json +1 -1
- package/patterns/cq.d.ts +22 -0
- package/patterns/cq.mjs +21 -0
- package/tokens/index.mjs +0 -20
- package/tokens/tokens.d.ts +3 -3
package/CHANGELOG.md
CHANGED
package/jsx/cq.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { FunctionalComponent } from 'vue'
|
|
3
|
+
import type { CqProperties } from '../patterns/cq';
|
|
4
|
+
import type { HTMLPixelProps } from '../types/jsx';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
|
|
7
|
+
export interface CqProps extends CqProperties, DistributiveOmit<HTMLPixelProps<'div'>, keyof CqProperties > {}
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
export declare const Cq: FunctionalComponent<CqProps>
|
package/jsx/cq.mjs
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { defineComponent, h, computed } from 'vue'
|
|
2
|
+
import { mergeCss } from '../css/css.mjs';
|
|
3
|
+
import { getCqStyle } from '../patterns/cq.mjs';
|
|
4
|
+
import { Pixel } from './factory.mjs';
|
|
5
|
+
|
|
6
|
+
export const Cq = /* @__PURE__ */ defineComponent({
|
|
7
|
+
name: 'Cq',
|
|
8
|
+
inheritAttrs: false,
|
|
9
|
+
props: ["name","type"],
|
|
10
|
+
setup(props, { attrs, slots }) {
|
|
11
|
+
const styleProps = computed(() => getCqStyle(props))
|
|
12
|
+
|
|
13
|
+
return () => {
|
|
14
|
+
const mergedProps = { ...styleProps.value, ...attrs }
|
|
15
|
+
return h(Pixel.div, mergedProps, slots)
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
})
|
package/package.json
CHANGED
package/patterns/cq.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { PropertyValue } from '../types/prop-type';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CqProperties {
|
|
9
|
+
name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>
|
|
10
|
+
type?: PropertyValue<'containerType'>
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties > {}
|
|
15
|
+
|
|
16
|
+
interface CqPatternFn {
|
|
17
|
+
(styles?: CqStyles): string
|
|
18
|
+
raw: (styles?: CqStyles) => SystemStyleObject
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
export declare const cq: CqPatternFn;
|
package/patterns/cq.mjs
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const cqConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { name, type, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
containerType: type,
|
|
9
|
+
containerName: name,
|
|
10
|
+
...rest
|
|
11
|
+
};
|
|
12
|
+
},
|
|
13
|
+
defaultValues:{type:'inline-size'}}
|
|
14
|
+
|
|
15
|
+
export const getCqStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(cqConfig, styles)
|
|
17
|
+
return cqConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const cq = (styles) => css(getCqStyle(styles))
|
|
21
|
+
cq.raw = getCqStyle
|
package/tokens/index.mjs
CHANGED
|
@@ -631,10 +631,6 @@ const tokens = {
|
|
|
631
631
|
"value": "0.125rem",
|
|
632
632
|
"variable": "var(--mp-sizes-0\\.5)"
|
|
633
633
|
},
|
|
634
|
-
"sizes.1.5": {
|
|
635
|
-
"value": "0.375rem",
|
|
636
|
-
"variable": "var(--mp-sizes-1\\.5)"
|
|
637
|
-
},
|
|
638
634
|
"sizes.2.5": {
|
|
639
635
|
"value": "0.625rem",
|
|
640
636
|
"variable": "var(--mp-sizes-2\\.5)"
|
|
@@ -731,10 +727,6 @@ const tokens = {
|
|
|
731
727
|
"value": "16rem",
|
|
732
728
|
"variable": "var(--mp-spacing-64)"
|
|
733
729
|
},
|
|
734
|
-
"spacing.0.25": {
|
|
735
|
-
"value": "0.0625rem",
|
|
736
|
-
"variable": "var(--mp-spacing-0\\.25)"
|
|
737
|
-
},
|
|
738
730
|
"spacing.0.5": {
|
|
739
731
|
"value": "0.125rem",
|
|
740
732
|
"variable": "var(--mp-spacing-0\\.5)"
|
|
@@ -743,10 +735,6 @@ const tokens = {
|
|
|
743
735
|
"value": "0.375rem",
|
|
744
736
|
"variable": "var(--mp-spacing-1\\.5)"
|
|
745
737
|
},
|
|
746
|
-
"spacing.2.5": {
|
|
747
|
-
"value": "0.625rem",
|
|
748
|
-
"variable": "var(--mp-spacing-2\\.5)"
|
|
749
|
-
},
|
|
750
738
|
"zIndex.hide": {
|
|
751
739
|
"value": -1,
|
|
752
740
|
"variable": "var(--mp-z-index-hide)"
|
|
@@ -855,10 +843,6 @@ const tokens = {
|
|
|
855
843
|
"value": "calc(var(--mp-spacing-64) * -1)",
|
|
856
844
|
"variable": "var(--mp-spacing-64)"
|
|
857
845
|
},
|
|
858
|
-
"spacing.-0.25": {
|
|
859
|
-
"value": "calc(var(--mp-spacing-0\\.25) * -1)",
|
|
860
|
-
"variable": "var(--mp-spacing-0\\.25)"
|
|
861
|
-
},
|
|
862
846
|
"spacing.-0.5": {
|
|
863
847
|
"value": "calc(var(--mp-spacing-0\\.5) * -1)",
|
|
864
848
|
"variable": "var(--mp-spacing-0\\.5)"
|
|
@@ -867,10 +851,6 @@ const tokens = {
|
|
|
867
851
|
"value": "calc(var(--mp-spacing-1\\.5) * -1)",
|
|
868
852
|
"variable": "var(--mp-spacing-1\\.5)"
|
|
869
853
|
},
|
|
870
|
-
"spacing.-2.5": {
|
|
871
|
-
"value": "calc(var(--mp-spacing-2\\.5) * -1)",
|
|
872
|
-
"variable": "var(--mp-spacing-2\\.5)"
|
|
873
|
-
},
|
|
874
854
|
"colors.colorPalette": {
|
|
875
855
|
"value": "var(--mp-colors-color-palette)",
|
|
876
856
|
"variable": "var(--mp-colors-color-palette)"
|
package/tokens/tokens.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
|
-
export type Token = "borders.none" | "borders.sm" | "borders.md" | "borders.lg" | "colors.currentcolor" | "colors.dark" | "colors.white" | "colors.background" | "colors.overlay" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.
|
|
2
|
+
export type Token = "borders.none" | "borders.sm" | "borders.md" | "borders.lg" | "colors.currentcolor" | "colors.dark" | "colors.white" | "colors.background" | "colors.overlay" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "sizes.sm" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.8" | "spacing.12" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.32" | "spacing.40" | "spacing.64" | "spacing.0.5" | "spacing.1.5" | "zIndex.hide" | "zIndex.base" | "zIndex.docked" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.tooltip" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-8" | "spacing.-12" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-32" | "spacing.-40" | "spacing.-64" | "spacing.-0.5" | "spacing.-1.5" | "colors.colorPalette" | "colors.colorPalette.capital" | "colors.colorPalette.esign" | "colors.colorPalette.expense" | "colors.colorPalette.flex" | "colors.colorPalette.jurnal" | "colors.colorPalette.klikpajak" | "colors.colorPalette.mekari" | "colors.colorPalette.qontak" | "colors.colorPalette.talenta" | "colors.colorPalette.university" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.25"
|
|
3
3
|
|
|
4
4
|
export type ColorPalette = "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash"
|
|
5
5
|
|
|
@@ -25,9 +25,9 @@ export type RadiusToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full"
|
|
|
25
25
|
|
|
26
26
|
export type ShadowToken = "xs" | "sm" | "md" | "lg" | "focus" | "xl" | "2xl" | "outline" | "outline-tab" | "outer" | "inner" | "none"
|
|
27
27
|
|
|
28
|
-
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16" | "20" | "22" | "56" | "65" | "0.25" | "0.5" | "
|
|
28
|
+
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16" | "20" | "22" | "56" | "65" | "0.25" | "0.5" | "2.5" | "7.5" | "9.5" | "full" | "sm" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl"
|
|
29
29
|
|
|
30
|
-
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.
|
|
30
|
+
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.5" | "1.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-12" | "-16" | "-20" | "-24" | "-32" | "-40" | "-64" | "-0.5" | "-1.5"
|
|
31
31
|
|
|
32
32
|
export type ZIndexToken = "hide" | "base" | "docked" | "sticky" | "overlay" | "modal" | "popover" | "tooltip"
|
|
33
33
|
|