@okshaun/components 0.4.3 → 0.4.5

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",
@@ -158,6 +158,7 @@
       "color]___[value:tan.90]___[cond:_dark",
       "background]___[value:tan.60",
       "background]___[value:tan.40]___[cond:_dark",
+      "color]___[value:yellow.60",
       "marginBottom]___[value:12",
       "marginBottom]___[value:8",
       "marginTop]___[value:12",
@@ -293,10 +294,13 @@
       "divider": [
         "direction]___[value:horizontal]___[recipe:divider",
         "weight]___[value:thin]___[recipe:divider",
+        "weight]___[value:medium]___[recipe:divider",
+        "weight]___[value:thick]___[recipe:divider",
+        "weight]___[value:thicker]___[recipe:divider",
         "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 = {
@@ -5181,7 +5195,6 @@ const spinnerRecipe = defineRecipe({
 });
 const dividerBase = {
   "--divider-weight": "sizes.1",
-  borderStyle: "solid",
   color: { base: "gray.20", _dark: "gray.80" },
   borderColor: "current",
   minWidth: "1",
@@ -5191,10 +5204,12 @@ const dividerVariants = {
   direction: {
     horizontal: {
       width: "full",
+      borderTopStyle: "solid",
       borderTopWidth: "var(--divider-weight)"
     },
     vertical: {
       height: "full",
+      borderLeftStyle: "solid",
       borderLeftWidth: "var(--divider-weight)"
     }
   },
@@ -5303,11 +5318,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 +5338,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"
@@ -5715,6 +5733,7 @@ const themeSwitcherRecipe = defineRecipe({
     borderWidth: "2",
     borderStyle: "solid",
     borderColor: "border",
+    bg: "transparent",
     color: "transparent",
     margin: "8",
     borderRadius: "100",
@@ -5735,18 +5754,18 @@ const themeSwitcherRecipe = defineRecipe({
       opacity: 0,
       display: "block",
       borderRadius: "100",
-      bg: "bg.neutral.bold",
+      bg: "bg.neutral.inverse.bold",
       transition: "all",
       transitionTimingFunction: "default",
       transitionDuration: "normal"
     },
     _hover: {
       cursor: "pointer",
-      bg: { base: "darkNeutral.0", _dark: "neutral.0" },
+      bg: "bg.neutral.inverse.bold",
       borderColor: "bg.neutral.bold",
       "&:before": {
         inset: "-8",
-        bg: { base: "darkNeutral.0", _dark: "neutral.0" },
+        bg: "bg.neutral.inverse.bold",
         opacity: 0.25
       }
     }
@@ -6831,7 +6850,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
           );
@@ -6862,8 +6881,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 {