@okshaun/components 0.4.2 → 0.4.4

package/dist/panda.buildinfo.json

@@ -62,8 +62,8 @@
       "maxWidth]___[value:5xl",
       "marginInline]___[value:auto",
       "paddingInline]___[value:24",
-      "paddingInline]___[value:20]___[cond:md",
-      "paddingInline]___[value:16]___[cond:sm",
+      "paddingInline]___[value:32]___[cond:md",
+      "paddingInline]___[value:48]___[cond:lg",
       "color]___[value:gold.40",
       "gridColumn]___[value:1 / -1",
       "marginTop]___[value:32",
@@ -201,35 +201,6 @@
       "color]___[value:gray.90",
       "color]___[value:gold.50",
       "color]___[value:blue.50",
-      "borderWidth]___[value:2",
-      "color]___[value:transparent",
-      "margin]___[value:8",
-      "borderRadius]___[value:100",
-      "lineHeight]___[value:none",
-      "width]___[value:14",
-      "height]___[value:14",
-      "minWidth]___[value:14",
-      "minHeight]___[value:14",
-      "aspectRatio]___[value:square",
-      "transition]___[value:all",
-      "content]___[value:\"\"]___[cond:&:before",
-      "position]___[value:absolute]___[cond:&:before",
-      "inset]___[value:0]___[cond:&:before",
-      "opacity]___[value:0]___[cond:&:before",
-      "display]___[value:block]___[cond:&:before",
-      "borderRadius]___[value:100]___[cond:&:before",
-      "background]___[value:bg.neutral.bold]___[cond:&:before",
-      "transition]___[value:all]___[cond:&:before",
-      "transitionTimingFunction]___[value:default]___[cond:&:before",
-      "transitionDuration]___[value:normal]___[cond:&:before",
-      "cursor]___[value:pointer]___[cond:_hover",
-      "background]___[value:darkNeutral.0]___[cond:_hover",
-      "background]___[value:neutral.0]___[cond:_hover<___>_dark",
-      "borderColor]___[value:bg.neutral.bold]___[cond:_hover",
-      "inset]___[value:-8]___[cond:_hover<___>&:before",
-      "background]___[value:darkNeutral.0]___[cond:_hover<___>&:before",
-      "background]___[value:neutral.0]___[cond:_hover<___>&:before<___>_dark",
-      "opacity]___[value:0.25]___[cond:_hover<___>&:before",
       "color]___[value:gray.10]___[cond:_dark",
       "textStyle]___[value:body-md",
       "color]___[value:gray.90]___[cond:_dark",
@@ -263,6 +234,7 @@
         "size]___[value:small]___[recipe:button",
         "size]___[value:large]___[recipe:button"
       ],
+      "themeSwitcher": [],
       "heading": [
         "level]___[value:h2]___[recipe:heading",
         "level]___[value:h3]___[recipe:heading",
@@ -324,7 +296,7 @@
         "direction]___[value:vertical]___[recipe:divider"
       ],
       "label": [
-        "family]___[value:inherit]___[recipe:label"
+        "family]___[value:sans]___[recipe:label"
       ],
       "textinput": [
         "size]___[value:medium]___[recipe:textinput",

package/dist/preset.js

@@ -3659,6 +3659,12 @@ const colors = defineSemanticTokens.colors({
         }
       },
       inverse: {
+        bold: {
+          value: {
+            base: "{colors.darkNeutral.0}",
+            _dark: "{colors.neutral.0}"
+          }
+        },
         subtle: {
           DEFAULT: { value: { base: "#00000029", _dark: "#ffffff29" } },
           hovered: { value: { base: "#0000003d", _dark: "#ffffff3d" } }
@@ -4186,6 +4192,9 @@ const colors = defineSemanticTokens.colors({
     subtlest: {
       value: { base: "{colors.neutral.70}", _dark: "{colors.darkNeutral.70}" }
     },
+    placeholder: {
+      value: { base: "{colors.neutral.50}", _dark: "{colors.darkNeutral.60}" }
+    },
     bold: {
       value: {
         base: "{colors.neutral.100}",
@@ -4467,7 +4476,7 @@ const conditions = {
   hover: "&:is(:hover, [data-hover=true])",
   focus: "&:is(:focus, [data-focus=true])",
   focusWithin: "&:focus-within",
-  focusVisible: "&:is(:focus-visible, [data-focus-visible]=true)",
+  focusVisible: "&:is(:focus-visible, [data-focus-visible=true])",
   disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
   active: "&:is(:active, [data-active=true])",
   visited: "&:visited",
@@ -4478,6 +4487,7 @@ const conditions = {
   checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
   enabled: "&:enabled",
   expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
+  collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
   highlighted: "&[data-highlighted]",
   complete: "&[data-complete]",
   incomplete: "&[data-incomplete]",
@@ -4543,7 +4553,7 @@ const conditions = {
   current: "&:is([aria-current=true], [data-current])",
   currentPage: "&[aria-current=page]",
   currentStep: "&[aria-current=step]",
-  today: "&[data-today]",
+  today: "&:is([data-today])",
   unavailable: "&[data-unavailable]",
   rangeStart: "&[data-range-start]",
   rangeEnd: "&[data-range-end]",
@@ -4551,6 +4561,7 @@ const conditions = {
   topmost: "&[data-topmost]",
   motionReduce: "@media (prefers-reduced-motion: reduce)",
   motionSafe: "@media (prefers-reduced-motion: no-preference)",
+  paused: "&:is([data-paused=true])",
   print: "@media print",
   landscape: "@media (orientation: landscape)",
   portrait: "@media (orientation: portrait)",
@@ -4830,11 +4841,11 @@ const textareaBase = {
   transitionProperty: "background, border-color, color, outline-color",
   transitionTimingFunction: "default",
   _placeholder: {
-    color: "text.subtlest"
-  },
-  _hover: {
-    bg: "bg.input.hovered"
+    color: "text.placeholder"
   },
+  // _hover: {
+  //   bg: 'bg.input.hovered',
+  // },
   _focus: {
     bg: "bg.input.pressed",
     borderColor: "border.focused",
@@ -4850,6 +4861,9 @@ const textareaBase = {
     bg: "bg.danger",
     borderColor: "border.danger",
     color: "text.danger",
+    _placeholder: {
+      color: "text.danger/60"
+    },
     _hover: {
       bg: "bg.danger.hovered",
       borderColor: "border.danger"
@@ -4946,7 +4960,7 @@ const linkVariants = {
   _disabled: {
     true: {
       cursor: "not-allowed",
-      opacity: 0.7,
+      color: "text.disabled",
       pointerEvents: "none"
     }
   }
@@ -4954,7 +4968,7 @@ const linkVariants = {
 const labelBase = {
   fontSize: "14",
   fontWeight: "normal",
-  lineHeight: "normal",
+  lineHeight: "tight",
   cursor: "default"
 };
 const labelVariants = {
@@ -4962,7 +4976,7 @@ const labelVariants = {
   _disabled: {
     true: {
       cursor: "not-allowed",
-      opacity: 0.7,
+      color: "text.disabled",
       pointerEvents: "none"
     }
   }
@@ -5000,7 +5014,7 @@ const labelRecipe = defineRecipe({
   base: labelBase,
   variants: labelVariants,
   defaultVariants: {
-    family: "inherit"
+    family: "sans"
   }
 });
 const checkboxInputBase = {
@@ -5303,11 +5317,11 @@ const textInputBase = {
   transitionProperty: "background, border-color, color, outline-color",
   transitionTimingFunction: "default",
   _placeholder: {
-    color: "text.subtlest"
-  },
-  _hover: {
-    bg: "bg.input.hovered"
+    color: "text.placeholder"
   },
+  // _hover: {
+  // bg: 'bg.input.hovered',
+  // },
   _focus: {
     bg: "bg.input.pressed",
     borderColor: "border.focused",
@@ -5323,6 +5337,9 @@ const textInputBase = {
     bg: "bg.danger",
     borderColor: "border.danger",
     color: "text.danger",
+    _placeholder: {
+      color: "text.danger/60"
+    },
     _hover: {
       bg: "bg.danger.hovered",
       borderColor: "border.danger"
@@ -5707,6 +5724,52 @@ const tagRecipe = defineRecipe({
     }
   ]
 });
+const themeSwitcherRecipe = defineRecipe({
+  className: "themeSwitcher",
+  jsx: ["ThemeSwitcher"],
+  base: {
+    position: "relative",
+    borderWidth: "2",
+    borderStyle: "solid",
+    borderColor: "border",
+    bg: "transparent",
+    color: "transparent",
+    margin: "8",
+    borderRadius: "100",
+    cursor: "pointer",
+    display: "grid",
+    lineHeight: "none",
+    width: "14",
+    height: "14",
+    minWidth: "14",
+    minHeight: "14",
+    flexShrink: 0,
+    aspectRatio: "square",
+    transition: "all",
+    "&:before": {
+      content: '""',
+      position: "absolute",
+      inset: "0",
+      opacity: 0,
+      display: "block",
+      borderRadius: "100",
+      bg: "bg.neutral.inverse.bold",
+      transition: "all",
+      transitionTimingFunction: "default",
+      transitionDuration: "normal"
+    },
+    _hover: {
+      cursor: "pointer",
+      bg: "bg.neutral.inverse.bold",
+      borderColor: "bg.neutral.bold",
+      "&:before": {
+        inset: "-8",
+        bg: "bg.neutral.inverse.bold",
+        opacity: 0.25
+      }
+    }
+  }
+});
 const baseButtonStyles = {
   container: {
     position: "relative",
@@ -6691,6 +6754,7 @@ const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   textRecipe,
   textareaRecipe,
   textinputRecipe,
+  themeSwitcherRecipe,
   toggleInputRecipe,
   toggleRecipe: toggleRecipe$1,
   tooltipRecipe: tooltipRecipe$1
@@ -6785,7 +6849,7 @@ const okshaunPreset = definePreset$1({
               width: "100%",
               maxWidth: "8xl",
               mx: "auto",
-              px: { base: "24", md: "20", sm: "16" }
+              px: { base: "24", md: "32", lg: "48" }
             },
             props
           );
@@ -6816,8 +6880,7 @@ const okshaunPreset = definePreset$1({
   // Conditions for responsive and state-based styling
   conditions: {
     ...pandaBasePresetConditions,
-    ...conditions,
-    collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])'
+    ...conditions
   }
 });
 export {