@mekari/pixel3-styled-system 0.0.0

package/recipes/textarea-recipe.mjs

@@ -0,0 +1,26 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const textareaRecipeFn = /* @__PURE__ */ createRecipe('textarea', {}, [])
+
+const textareaRecipeVariantMap = {
+  "isFullWidth": [
+    "true"
+  ]
+}
+
+const textareaRecipeVariantKeys = Object.keys(textareaRecipeVariantMap)
+
+export const textareaRecipe = /* @__PURE__ */ Object.assign(textareaRecipeFn, {
+  __recipe__: true,
+  __name__: 'textareaRecipe',
+  raw: (props) => props,
+  variantKeys: textareaRecipeVariantKeys,
+  variantMap: textareaRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, textareaRecipeVariantKeys)
+  },
+})

package/recipes/toggle-slot-recipe.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ToggleSlotRecipeVariant {
+  
+}
+
+type ToggleSlotRecipeVariantMap = {
+  [key in keyof ToggleSlotRecipeVariant]: Array<ToggleSlotRecipeVariant[key]>
+}
+
+export type ToggleSlotRecipeVariantProps = {
+  [key in keyof ToggleSlotRecipeVariant]?: ConditionalValue<ToggleSlotRecipeVariant[key]> | undefined
+}
+
+export interface ToggleSlotRecipeRecipe {
+  __type: ToggleSlotRecipeVariantProps
+  (props?: ToggleSlotRecipeVariantProps): Pretty<Record<"root" | "control" | "label", string>>
+  raw: (props?: ToggleSlotRecipeVariantProps) => ToggleSlotRecipeVariantProps
+  variantMap: ToggleSlotRecipeVariantMap
+  variantKeys: Array<keyof ToggleSlotRecipeVariant>
+  splitVariantProps<Props extends ToggleSlotRecipeVariantProps>(props: Props): [ToggleSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof ToggleSlotRecipeVariantProps>>]
+}
+
+
+export declare const toggleSlotRecipe: ToggleSlotRecipeRecipe

package/recipes/toggle-slot-recipe.mjs

@@ -0,0 +1,38 @@
+import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const toggleSlotRecipeDefaultVariants = {}
+const toggleSlotRecipeCompoundVariants = []
+
+const toggleSlotRecipeSlotNames = [
+  [
+    "root",
+    "toggle__root"
+  ],
+  [
+    "control",
+    "toggle__control"
+  ],
+  [
+    "label",
+    "toggle__label"
+  ]
+]
+const toggleSlotRecipeSlotFns = /* @__PURE__ */ toggleSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, toggleSlotRecipeDefaultVariants, getSlotCompoundVariant(toggleSlotRecipeCompoundVariants, slotName))])
+
+const toggleSlotRecipeFn = (props = {}) => {
+  return Object.fromEntries(toggleSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+}
+
+const toggleSlotRecipeVariantKeys = []
+
+export const toggleSlotRecipe = /* @__PURE__ */ Object.assign(toggleSlotRecipeFn, {
+  __recipe__: false,
+  __name__: 'toggleSlotRecipe',
+  raw: (props) => props,
+  variantKeys: toggleSlotRecipeVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, toggleSlotRecipeVariantKeys)
+  },
+})

package/recipes/tooltip-recipe.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TooltipRecipeVariant {
+  
+}
+
+type TooltipRecipeVariantMap = {
+  [key in keyof TooltipRecipeVariant]: Array<TooltipRecipeVariant[key]>
+}
+
+export type TooltipRecipeVariantProps = {
+  [key in keyof TooltipRecipeVariant]?: ConditionalValue<TooltipRecipeVariant[key]> | undefined
+}
+
+export interface TooltipRecipeRecipe {
+  __type: TooltipRecipeVariantProps
+  (props?: TooltipRecipeVariantProps): string
+  raw: (props?: TooltipRecipeVariantProps) => TooltipRecipeVariantProps
+  variantMap: TooltipRecipeVariantMap
+  variantKeys: Array<keyof TooltipRecipeVariant>
+  splitVariantProps<Props extends TooltipRecipeVariantProps>(props: Props): [TooltipRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof TooltipRecipeVariantProps>>]
+}
+
+
+export declare const tooltipRecipe: TooltipRecipeRecipe

package/recipes/tooltip-recipe.mjs

@@ -0,0 +1,22 @@
+import { splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const tooltipRecipeFn = /* @__PURE__ */ createRecipe('tooltip', {}, [])
+
+const tooltipRecipeVariantMap = {}
+
+const tooltipRecipeVariantKeys = Object.keys(tooltipRecipeVariantMap)
+
+export const tooltipRecipe = /* @__PURE__ */ Object.assign(tooltipRecipeFn, {
+  __recipe__: true,
+  __name__: 'tooltipRecipe',
+  raw: (props) => props,
+  variantKeys: tooltipRecipeVariantKeys,
+  variantMap: tooltipRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, tooltipRecipeVariantKeys)
+  },
+})

package/reset.css

@@ -0,0 +1,214 @@
+@layer pixel_reset {
+  * {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--global-color-border, currentColor);
+  }
+
+  html {
+    line-height: 1.5;
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--global-font-body, var(--font-fallback));
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  body {
+    height: 100%;
+    line-height: inherit;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-size: 1em;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    color: inherit;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1;
+    color: var(--global-color-placeholder, #9ca3af);
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  dialog {
+    padding: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-size: 1em;
+    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
+    font-family: var(--global-font-mono, var(--font-mono-fallback));
+  }
+
+
+  input[type="text"],
+  input[type="email"],
+  input[type="search"],
+  input[type="password"] {
+    -webkit-appearance: none;
+    -moz-appearance: none; 
+  }
+
+  input[type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  ::-webkit-search-decoration,
+  ::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  input[type='number']{
+    -moz-appearance: textfield;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+}

package/styles.css

@@ -0,0 +1,246 @@
+@layer reset, base, tokens, recipes, utilities;
+
+@import './reset.css';
+
+@import './global.css';
+
+@import './tokens/index.css';
+
+@import './tokens/keyframes.css';
+
+@layer utilities {
+  .pixel-fs_xl {
+    font-size: var(--pixel-font-sizes-xl)
+    }
+
+  .pixel-font_bold {
+    font-weight: var(--pixel-font-weights-bold)
+    }
+
+  .pixel-color-palette_green {
+    --pixel-colors-color-palette-50: var(--pixel-colors-green-50);
+    --pixel-colors-color-palette-100: var(--pixel-colors-green-100);
+    --pixel-colors-color-palette-200: var(--pixel-colors-green-200);
+    --pixel-colors-color-palette-300: var(--pixel-colors-green-300);
+    --pixel-colors-color-palette-400: var(--pixel-colors-green-400);
+    --pixel-colors-color-palette-500: var(--pixel-colors-green-500);
+    --pixel-colors-color-palette-600: var(--pixel-colors-green-600);
+    --pixel-colors-color-palette-700: var(--pixel-colors-green-700);
+    --pixel-colors-color-palette-800: var(--pixel-colors-green-800);
+    --pixel-colors-color-palette-900: var(--pixel-colors-green-900);
+    --pixel-colors-color-palette-950: var(--pixel-colors-green-950)
+    }
+
+  .pixel-bg_red\.200 {
+    background: var(--pixel-colors-red-200)
+    }
+
+  .pixel-border-width_1px {
+    border-width: 1px
+    }
+
+  .pixel-border_red\.200 {
+    border-color: var(--pixel-colors-red-200)
+    }
+
+  .pixel-p_4 {
+    padding: var(--pixel-spacing-4)
+    }
+
+  .pixel-fs_12px {
+    font-size: 12px
+    }
+
+  .pixel-p_8 {
+    padding: var(--pixel-spacing-8)
+    }
+
+  .pixel-fs_24px {
+    font-size: 24px
+    }
+
+  .pixel-leading_xs {
+    line-height: xs
+    }
+
+  .pixel-leading_sm {
+    line-height: sm
+    }
+
+  .pixel-leading_lg {
+    line-height: lg
+    }
+
+  .pixel-leading_xl {
+    line-height: xl
+    }
+
+  .pixel-text_white {
+    color: var(--pixel-colors-white)
+    }
+
+  .pixel-text_uppercase {
+    text-transform: uppercase
+    }
+
+  .pixel-select_none {
+    -webkit-user-select: none;
+    user-select: none
+    }
+
+  .pixel-bg_gray\.400 {
+    background-color: var(--pixel-colors-gray-400)
+    }
+
+  .pixel-d_inline-flex {
+    display: inline-flex
+    }
+
+  .pixel-items_center {
+    align-items: center
+    }
+
+  .pixel-shrink_0 {
+    flex-shrink: 0
+    }
+
+  .pixel-justify_center {
+    justify-content: center
+    }
+
+  .pixel-pos_relative {
+    position: relative
+    }
+
+  .pixel-font_semibold {
+    font-weight: var(--pixel-font-weights-semibold)
+    }
+
+  .pixel-align_top {
+    vertical-align: top
+    }
+
+  .pixel-bg_teal\.50 {
+    background-color: var(--pixel-colors-teal-50)
+    }
+
+  .pixel-border-width_0\.5 {
+    border-width: 0.5px
+    }
+
+  .pixel-border_pink\.400 {
+    border-color: var(--pixel-colors-pink-400)
+    }
+
+  .pixel-rounded_full {
+    border-radius: var(--pixel-radii-full)
+    }
+
+  .pixel-bg_gray\.50 {
+    background-color: var(--pixel-colors-gray-50)
+    }
+
+  .pixel-bg_sky\.400 {
+    background-color: var(--pixel-colors-sky-400)
+    }
+
+  .pixel-bg_teal\.400 {
+    background-color: var(--pixel-colors-teal-400)
+    }
+
+  .pixel-bg_violet\.400 {
+    background-color: var(--pixel-colors-violet-400)
+    }
+
+  .pixel-bg_amber\.400 {
+    background-color: var(--pixel-colors-amber-400)
+    }
+
+  .pixel-bg_rose\.400 {
+    background-color: var(--pixel-colors-rose-400)
+    }
+
+  .pixel-bg_stone\.400 {
+    background-color: var(--pixel-colors-stone-400)
+    }
+
+  .pixel-bg_lime\.400 {
+    background-color: var(--pixel-colors-lime-400)
+    }
+
+  .pixel-bg_pink\.400 {
+    background-color: var(--pixel-colors-pink-400)
+    }
+
+  .pixel-w_6 {
+    width: var(--pixel-sizes-6)
+    }
+
+  .pixel-h_6 {
+    height: var(--pixel-sizes-6)
+    }
+
+  .pixel-fs_xs {
+    font-size: var(--pixel-font-sizes-xs)
+    }
+
+  .pixel-w_8 {
+    width: var(--pixel-sizes-8)
+    }
+
+  .pixel-h_8 {
+    height: var(--pixel-sizes-8)
+    }
+
+  .pixel-fs_sm {
+    font-size: var(--pixel-font-sizes-sm)
+    }
+
+  .pixel-w_12 {
+    width: var(--pixel-sizes-12)
+    }
+
+  .pixel-h_12 {
+    height: var(--pixel-sizes-12)
+    }
+
+  .pixel-fs_lg {
+    font-size: var(--pixel-font-sizes-lg)
+    }
+
+  .pixel-w_20 {
+    width: var(--pixel-sizes-20)
+    }
+
+  .pixel-h_20 {
+    height: var(--pixel-sizes-20)
+    }
+
+  .pixel-fs_2xl {
+    font-size: var(--pixel-font-sizes-2xl)
+    }
+
+  .pixel-border-width_0\.125rem {
+    border-width: 0.125rem
+    }
+
+  .pixel-rounded_sm {
+    border-radius: var(--pixel-radii-sm)
+    }
+
+  .pixel-rounded_md {
+    border-radius: var(--pixel-radii-md)
+    }
+
+  .pixel-rounded_lg {
+    border-radius: var(--pixel-radii-lg)
+    }
+
+  .pixel-rounded_xl {
+    border-radius: var(--pixel-radii-xl)
+    }
+
+  .pixel-text_gray\.600 {
+    color: var(--pixel-colors-gray-600)
+    }
+}