@mekari/pixel3-styled-system 0.0.0

package/tokens/keyframes.css

@@ -0,0 +1,23 @@
+@layer tokens {
+    @keyframes fade-in {
+        from {
+            opacity: 0
+        }
+        to {
+            opacity: 1
+        }
+    }
+    @keyframes fade-out {
+        from {
+            opacity: 1
+        }
+        to {
+            opacity: 0
+        }
+    }
+    @keyframes spin {
+        100% {
+            transform: rotate(1turn)
+        }
+    }
+}

package/tokens/tokens.d.ts

@@ -0,0 +1,57 @@
+/* eslint-disable */
+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.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.65" | "sizes.0.25" | "sizes.0.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "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.25" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.400" | "colors.colorPalette.600" | "colors.colorPalette.500" | "colors.colorPalette.700"
+
+export type ColorPalette = "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash"
+
+export type BorderToken = "none" | "sm" | "md" | "lg"
+
+export type ColorToken = "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand.capital" | "brand.esign" | "brand.expense" | "brand.flex" | "brand.jurnal" | "brand.klikpajak" | "brand.mekari" | "brand.qontak" | "brand.talenta" | "brand.university" | "gray.25" | "gray.50" | "gray.100" | "gray.400" | "gray.600" | "blue.50" | "blue.100" | "blue.400" | "blue.500" | "blue.700" | "red.50" | "red.400" | "red.500" | "red.700" | "green.50" | "green.400" | "green.500" | "green.700" | "orange.50" | "orange.400" | "orange.500" | "orange.700" | "sky.100" | "sky.400" | "teal.100" | "teal.400" | "violet.100" | "violet.400" | "amber.100" | "amber.400" | "rose.100" | "rose.400" | "stone.100" | "stone.400" | "lime.100" | "lime.400" | "pink.100" | "pink.400" | "apricot.100" | "apricot.400" | "aqua.100" | "aqua.400" | "leaf.100" | "leaf.400" | "fuchsia.100" | "fuchsia.400" | "ice.50" | "ice.100" | "ash.100" | "colorPalette" | "colorPalette.capital" | "colorPalette.esign" | "colorPalette.expense" | "colorPalette.flex" | "colorPalette.jurnal" | "colorPalette.klikpajak" | "colorPalette.mekari" | "colorPalette.qontak" | "colorPalette.talenta" | "colorPalette.university" | "colorPalette.25" | "colorPalette.50" | "colorPalette.100" | "colorPalette.400" | "colorPalette.600" | "colorPalette.500" | "colorPalette.700"
+
+export type DurationToken = "slow" | "normal" | "fast"
+
+export type FontToken = "body" | "mono"
+
+export type FontSizeToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+
+export type FontWeightToken = "regular" | "semiBold" | "bold"
+
+export type LineHeightToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+
+export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest"
+
+export type OpacityToken = "0" | "40" | "60" | "100"
+
+export type RadiusToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full"
+
+export type ShadowToken = "xs" | "sm" | "md" | "lg" | "focus" | "xl" | "2xl" | "outline" | "outline-tab" | "outer" | "inner" | "none"
+
+export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16" | "20" | "22" | "65" | "0.25" | "0.5" | "2.5" | "7.5" | "9.5" | "full" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl"
+
+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"
+
+export type ZIndexToken = "hide" | "base" | "docked" | "sticky" | "overlay" | "modal" | "popover" | "tooltip"
+
+export type BreakpointToken = "sm" | "md" | "lg" | "xl"
+
+export type AnimationName = "fade-in" | "fade-out" | "spin"
+
+export type Tokens = {
+		borders: BorderToken
+		colors: ColorToken
+		durations: DurationToken
+		fonts: FontToken
+		fontSizes: FontSizeToken
+		fontWeights: FontWeightToken
+		lineHeights: LineHeightToken
+		letterSpacings: LetterSpacingToken
+		opacity: OpacityToken
+		radii: RadiusToken
+		shadows: ShadowToken
+		sizes: SizeToken
+		spacing: SpacingToken
+		zIndex: ZIndexToken
+		breakpoints: BreakpointToken
+		animationName: AnimationName
+} & { [token: string]: never }
+
+export type TokenCategory = "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

package/types/composition.d.ts

@@ -0,0 +1,111 @@
+/* eslint-disable */
+import type {  CompositionStyleObject  } from './system-types';
+
+interface Token<T> {
+  value: T
+  description?: string
+}
+
+interface Recursive<T> {
+  [key: string]: Recursive<T> | T
+}
+
+/* -----------------------------------------------------------------------------
+ * Text styles
+ * -----------------------------------------------------------------------------*/
+
+type TextStyleProperty =
+  | 'fontSize'
+  | 'fontSizeAdjust'
+  | 'fontVariationSettings'
+  | 'fontVariantPosition'
+  | 'fontVariantCaps'
+  | 'fontVariantNumeric'
+  | 'fontVariantAlternates'
+  | 'fontVariantLigatures'
+  | 'fontFamily'
+  | 'fontWeight'
+  | 'fontSynthesis'
+  | 'fontStyle'
+  | 'fontVariant'
+  | 'lineHeight'
+  | 'letterSpacing'
+  | 'textDecoration'
+  | 'textTransform'
+  | 'textIndent'
+  | 'textDecorationColor'
+  | 'textDecorationLine'
+  | 'textDecorationStyle'
+  | 'textEmphasisColor'
+  | 'textEmphasisPosition'
+  | 'textEmphasisStyle'
+  | 'hyphenateCharacter'
+  | 'textOrientation'
+  | 'textOverflow'
+  | 'textRendering'
+
+export type TextStyle = CompositionStyleObject<TextStyleProperty>
+
+export type TextStyles = Recursive<Token<TextStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Layer styles
+ * -----------------------------------------------------------------------------*/
+
+type Placement =
+  | 'Top'
+  | 'Right'
+  | 'Bottom'
+  | 'Left'
+  | 'Inline'
+  | 'Block'
+  | 'InlineStart'
+  | 'InlineEnd'
+  | 'BlockStart'
+  | 'BlockEnd'
+
+type Radius =
+  | `Top${'Right' | 'Left'}`
+  | `Bottom${'Right' | 'Left'}`
+  | `Start${'Start' | 'End'}`
+  | `End${'Start' | 'End'}`
+
+type LayerStyleProperty =
+  | 'background'
+  | 'backgroundColor'
+  | 'backgroundImage'
+  | 'borderRadius'
+  | 'border'
+  | 'borderWidth'
+  | 'borderColor'
+  | 'borderStyle'
+  | 'boxShadow'
+  | 'filter'
+  | 'backdropFilter'
+  | 'transform'
+  | 'color'
+  | 'opacity'
+  | 'backgroundBlendMode'
+  | 'backgroundAttachment'
+  | 'backgroundClip'
+  | 'backgroundOrigin'
+  | 'backgroundPosition'
+  | 'backgroundRepeat'
+  | 'backgroundSize'
+  | `border${Placement}`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | 'padding'
+  | `padding${Placement}`
+
+export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
+
+export type LayerStyles = Recursive<Token<LayerStyle>>
+
+export interface CompositionStyles {
+  textStyles: TextStyles
+  layerStyles: LayerStyles
+}

package/types/conditions.d.ts

@@ -0,0 +1,256 @@
+/* eslint-disable */
+import type { AnySelector, Selectors } from './selectors';
+
+export interface Conditions {
+	/** `&:is(:hover, [data-hover])` */
+	"_hover": string
+	/** `&:is(:focus, [data-focus])` */
+	"_focus": string
+	/** `&:focus-within` */
+	"_focusWithin": string
+	/** `&:is(:focus-visible, [data-focus-visible])` */
+	"_focusVisible": string
+	/** `&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])` */
+	"_disabled": string
+	/** `&[data-active=true], [data-active]` */
+	"_active": string
+	/** `&:visited` */
+	"_visited": string
+	/** `&:target` */
+	"_target": string
+	/** `&:is(:read-only, [data-read-only])` */
+	"_readOnly": string
+	/** `&:read-write` */
+	"_readWrite": string
+	/** `&:is(:empty, [data-empty])` */
+	"_empty": string
+	/** `&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])` */
+	"_checked": string
+	/** `&:enabled` */
+	"_enabled": string
+	/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */
+	"_expanded": string
+	/** `&[data-highlighted]` */
+	"_highlighted": string
+	/** `&::before` */
+	"_before": string
+	/** `&::after` */
+	"_after": string
+	/** `&::first-letter` */
+	"_firstLetter": string
+	/** `&::first-line` */
+	"_firstLine": string
+	/** `&::marker` */
+	"_marker": string
+	/** `&::selection` */
+	"_selection": string
+	/** `&::file-selector-button` */
+	"_file": string
+	/** `&::backdrop` */
+	"_backdrop": string
+	/** `&:first-child` */
+	"_first": string
+	/** `&:last-child` */
+	"_last": string
+	/** `&:only-child` */
+	"_only": string
+	/** `&:nth-child(even)` */
+	"_even": string
+	/** `&:nth-child(odd)` */
+	"_odd": string
+	/** `&:first-of-type` */
+	"_firstOfType": string
+	/** `&:last-of-type` */
+	"_lastOfType": string
+	/** `&:only-of-type` */
+	"_onlyOfType": string
+	/** `.peer:is(:focus, [data-focus]) ~ &` */
+	"_peerFocus": string
+	/** `.peer:is(:hover, [data-hover]) ~ &` */
+	"_peerHover": string
+	/** `.peer:is(:active, [data-active]) ~ &` */
+	"_peerActive": string
+	/** `.peer:focus-within ~ &` */
+	"_peerFocusWithin": string
+	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
+	"_peerFocusVisible": string
+	/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */
+	"_peerDisabled": string
+	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
+	"_peerChecked": string
+	/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */
+	"_peerInvalid": string
+	/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */
+	"_peerExpanded": string
+	/** `.peer:placeholder-shown ~ &` */
+	"_peerPlaceholderShown": string
+	/** `.group:is(:focus, [data-focus]) &` */
+	"_groupFocus": string
+	/** `.group:is(:hover, [data-hover]) &` */
+	"_groupHover": string
+	/** `.group:is(:active, [data-active]) &` */
+	"_groupActive": string
+	/** `.group:focus-within &` */
+	"_groupFocusWithin": string
+	/** `.group:is(:focus-visible, [data-focus-visible]) &` */
+	"_groupFocusVisible": string
+	/** `.group:is(:disabled, [disabled], [data-disabled]) &` */
+	"_groupDisabled": string
+	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
+	"_groupChecked": string
+	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
+	"_groupExpanded": string
+	/** `.group:invalid &` */
+	"_groupInvalid": string
+	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])` */
+	"_indeterminate": string
+	/** `&:is(:required, [data-required], [aria-required=true])` */
+	"_required": string
+	/** `&:is(:valid, [data-valid])` */
+	"_valid": string
+	/** `&:is(:invalid, [aria-invalid=true], [data-invalid])` */
+	"_invalid": string
+	/** `&:autofill` */
+	"_autofill": string
+	/** `&:in-range` */
+	"_inRange": string
+	/** `&:out-of-range` */
+	"_outOfRange": string
+	/** `&::placeholder` */
+	"_placeholder": string
+	/** `&:placeholder-shown` */
+	"_placeholderShown": string
+	/** `&:is([aria-pressed=true], [data-pressed])` */
+	"_pressed": string
+	/** `&:is([aria-selected=true], [data-selected])` */
+	"_selected": string
+	/** `&:default` */
+	"_default": string
+	/** `&:optional` */
+	"_optional": string
+	/** `&:is([open], [data-state=open])` */
+	"_open": string
+	/** `&:is([data-state=closed])` */
+	"_closed": string
+	/** `&:fullscreen` */
+	"_fullscreen": string
+	/** `& > [data-loading=true], &:is([data-loading], [aria-busy=true])` */
+	"_loading": string
+	/** `&[aria-current=page]` */
+	"_currentPage": string
+	/** `&[aria-current=step]` */
+	"_currentStep": string
+	/** `@media (prefers-reduced-motion: reduce)` */
+	"_motionReduce": string
+	/** `@media (prefers-reduced-motion: no-preference)` */
+	"_motionSafe": string
+	/** `@media print` */
+	"_print": string
+	/** `@media (orientation: landscape)` */
+	"_landscape": string
+	/** `@media (orientation: portrait)` */
+	"_portrait": string
+	/** ` &.dark, .dark &` */
+	"_dark": string
+	/** ` &.light, .light &` */
+	"_light": string
+	/** `@media (prefers-color-scheme: dark)` */
+	"_osDark": string
+	/** `@media (prefers-color-scheme: light)` */
+	"_osLight": string
+	/** `@media (forced-colors: active)` */
+	"_highContrast": string
+	/** `@media (prefers-contrast: less)` */
+	"_lessContrast": string
+	/** `@media (prefers-contrast: more)` */
+	"_moreContrast": string
+	/** `[dir=ltr] &` */
+	"_ltr": string
+	/** `[dir=rtl] &` */
+	"_rtl": string
+	/** `&::-webkit-scrollbar` */
+	"_scrollbar": string
+	/** `&::-webkit-scrollbar-thumb` */
+	"_scrollbarThumb": string
+	/** `&::-webkit-scrollbar-track` */
+	"_scrollbarTrack": string
+	/** `&[data-orientation=horizontal]` */
+	"_horizontal": string
+	/** `&[data-orientation=vertical]` */
+	"_vertical": string
+	/** `&:is([hidden])` */
+	"_hidden": string
+	/** `&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])` */
+	"_collapsed": string
+	/** `&[data-button-icon=true]` */
+	"_hasIcon": string
+	/** `&[data-highlight=true], [data-highlight]` */
+	"_highlight": string
+	/** `&[data-has-border=true]` */
+	"_hasBorder": string
+	/** `&[data-has-background=true]` */
+	"_hasBackground": string
+	/** `&[data-is-full-width=true]` */
+	"_isFullWidth": string
+	/** `&[data-placement=left]` */
+	"_placementLeft": string
+	/** `&[data-placement=right]` */
+	"_placementRight": string
+	/** `@media screen and (min-width: 22.5em)` */
+	"sm": string
+	/** `@media screen and (min-width: 22.5em) and (max-width: 47.9975em)` */
+	"smOnly": string
+	/** `@media screen and (max-width: 22.4975em)` */
+	"smDown": string
+	/** `@media screen and (min-width: 48em)` */
+	"md": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */
+	"mdOnly": string
+	/** `@media screen and (max-width: 47.9975em)` */
+	"mdDown": string
+	/** `@media screen and (min-width: 64em)` */
+	"lg": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */
+	"lgOnly": string
+	/** `@media screen and (max-width: 63.9975em)` */
+	"lgDown": string
+	/** `@media screen and (min-width: 80em)` */
+	"xl": string
+	/** `@media screen and (min-width: 80em)` */
+	"xlOnly": string
+	/** `@media screen and (max-width: 79.9975em)` */
+	"xlDown": string
+	/** `@media screen and (min-width: 22.5em) and (max-width: 47.9975em)` */
+	"smToMd": string
+	/** `@media screen and (min-width: 22.5em) and (max-width: 63.9975em)` */
+	"smToLg": string
+	/** `@media screen and (min-width: 22.5em) and (max-width: 79.9975em)` */
+	"smToXl": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */
+	"mdToLg": string
+	/** `@media screen and (min-width: 48em) and (max-width: 79.9975em)` */
+	"mdToXl": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */
+	"lgToXl": string
+	/** The base (=no conditions) styles to apply  */
+	"base": string
+}
+
+export type Condition = keyof Conditions
+
+export type Conditional<V> =
+  | V
+  | Array<V | null>
+  | {
+      [K in keyof Conditions]?: Conditional<V>
+    }
+
+export type ConditionalValue<T> = Conditional<T>
+
+export type Nested<P> = P & {
+  [K in Selectors]?: Nested<P>
+} & {
+  [K in AnySelector]?: Nested<P>
+} & {
+  [K in keyof Conditions]?: Nested<P>
+}