@okshaun/components 2.0.0 → 2.0.2

package/dist/types/index.d.ts

@@ -323,7 +323,7 @@ declare interface ButtonVariant {
     /**
      * @default "default"
      */
-    variant: "default" | "primary" | "hollow" | "ghost" | "danger" | "selected" | "selectedBold"
+    variant: "default" | "primary" | "ghost" | "subtle" | "hollow" | "danger" | "selected" | "selectedBold" | "selectedSubtle"
     /**
      * @default "md"
      */
@@ -614,7 +614,7 @@ declare interface Conditions {
     	"_required": string
     	/** `&:is(:valid, [data-valid])` */
     	"_valid": string
-    	/** `&:is(:invalid, [data-invalid], [aria-invalid=true])` */
+    	/** `&:is(:invalid, [data-invalid=true], [aria-invalid=true])` */
     	"_invalid": string
     	/** `&:autofill` */
     	"_autofill": string
@@ -722,7 +722,7 @@ declare interface Conditions {
     	"_collapsed": string
     	/** `&[data-utility=true]` */
     	"_utility": string
-    	/** `&:is([data-error], [data-error=true])` */
+    	/** `&:is([data-error=true])` */
     	"_error": string
     	/** `&:is([data-paused=true])` */
     	"_paused": string
@@ -1458,7 +1458,7 @@ declare interface IconButtonVariant {
     /**
      * @default "default"
      */
-    variant: "default" | "primary" | "hollow" | "ghost" | "danger" | "selected" | "selectedBold"
+    variant: "default" | "primary" | "ghost" | "subtle" | "hollow" | "danger" | "selected" | "selectedBold" | "selectedSubtle"
     /**
      * @default "md"
      */
@@ -2188,6 +2188,9 @@ export declare type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVar
 };
 
 declare interface LinkVariant {
+    /**
+     * @default "inherit"
+     */
     family: "heading" | "body" | "sans" | "serif" | "mono" | "inherit"
     bold: boolean
     italic: boolean
@@ -5767,7 +5770,7 @@ declare type SelectVariantProps = {
     [key in keyof SelectVariant]?: ConditionalValue<SelectVariant[key]> | undefined
 }
 
-declare type ShadowToken = "zeroShadow" | "raisedLight" | "raisedDark" | "elevatedLight" | "elevatedDark" | "overlayLight" | "overlayDark" | "overflowLight" | "overflowDark" | "lowLight" | "lowDark" | "mediumLight" | "mediumDark" | "highLight" | "highDark" | "insetLight" | "insetDark" | "zero" | "raised" | "elevated" | "overlay" | "overflow" | "low" | "medium" | "high" | "inset"
+declare type ShadowToken = "zeroShadow" | "raisedLight" | "raisedLightUp" | "raisedDark" | "raisedDarkUp" | "elevatedLight" | "elevatedLightUp" | "elevatedDark" | "elevatedDarkUp" | "overlayLight" | "overlayLightUp" | "overlayDark" | "overlayDarkUp" | "overflowLight" | "overflowDark" | "zero" | "raised" | "raised.up" | "elevated" | "elevated.up" | "overlay" | "overlay.dark" | "overflow"
 
 declare type SimplePseudos =
 | ":-khtml-any-link"
@@ -19686,6 +19689,9 @@ export declare type TextProps = Omit<BoxProps, keyof TextVariantProps> & TextVar
 export declare type TextStyles = Record<string, SystemStyleObject>;
 
 declare interface TextVariant {
+    /**
+     * @default "inherit"
+     */
     family: "heading" | "body" | "sans" | "serif" | "mono" | "inherit"
     bold: boolean
     italic: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okshaun/components",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "okshaun design system",
   "type": "module",
   "main": "./dist/index.js",

package/src/recipes/button.ts

@@ -1,5 +1,19 @@
 import { defineSlotRecipe } from '@pandacss/dev';
 
+const iconDefaultStyles = {
+  fill: 'icon.decorative',
+  mixBlendMode: { base: 'multiply', _dark: 'screen' },
+  _groupHover: { fill: 'current' },
+  _groupActive: { fill: 'current' },
+};
+
+const iconInverseStyles = {
+  fill: 'icon.decorative.inverse',
+  mixBlendMode: { base: 'screen', _dark: 'multiply' },
+  _groupHover: { fill: 'icon.decorative.inverse' },
+  _groupActive: { fill: 'icon.decorative.inverse' },
+};
+
 const baseButtonStyles = {
   container: {
     position: 'relative',
@@ -40,12 +54,6 @@ const baseButtonStyles = {
     _focusVisible: {
       outlineColor: 'border.focused',
     },
-    _selected: {
-      bg: 'bg.selected',
-      color: 'text.selected',
-      borderColor: 'transparent',
-      icon: { fill: 'icon.selected' },
-    },
   },
   icon: {
     aspectRatio: 'square',
@@ -68,56 +76,61 @@ const buttonVariants = {
           bg: 'bg.neutral.pressed',
         },
       },
-      icon: {
-        fill: 'icon.decorative',
-        mixBlendMode: { base: 'multiply', _dark: 'screen' },
-        _groupHover: { fill: 'current' },
-        _groupActive: { fill: 'current' },
-      },
+      icon: iconDefaultStyles,
     },
     primary: {
       container: {
-        bg: 'bg.neutral.boldest',
+        bg: 'bg.brand.boldest',
         color: 'text.inverse',
         _hover: {
-          bg: 'bg.neutral.bold.hovered',
+          bg: 'bg.brand.boldest.hovered',
         },
         _active: {
-          bg: 'bg.neutral.bold.pressed',
+          bg: 'bg.brand.boldest.pressed',
         },
       },
       icon: {
+        ...iconInverseStyles,
         fill: 'icon.decorative.inverse.subtle',
-        mixBlendMode: { base: 'screen', _dark: 'multiply' },
-        _groupHover: { fill: 'icon.decorative.inverse' },
-        _groupActive: { fill: 'icon.decorative.inverse' },
         _groupDisabled: {
           fill: 'icon.decorative.inverse.subtle',
         },
       },
     },
-    hollow: {
+    ghost: {
       container: {
         bg: 'bg.neutral.subtle',
-        borderColor: 'border',
-        color: 'text',
+        color: 'text.subtle',
         _hover: {
           bg: 'bg.neutral.subtle.hovered',
+          color: 'text',
         },
         _active: {
           bg: 'bg.neutral.subtle.pressed',
+          color: 'text',
         },
       },
-      icon: {
-        fill: 'icon.decorative',
-        mixBlendMode: { base: 'multiply', _dark: 'screen' },
-        _groupHover: { fill: 'current' },
-        _groupActive: { fill: 'current' },
+      icon: iconDefaultStyles,
+    },
+    subtle: {
+      container: {
+        bg: 'bg.neutral.subtle',
+        color: 'text.subtle',
+        _hover: {
+          bg: 'bg.neutral.subtle.hovered',
+          color: 'text',
+        },
+        _active: {
+          bg: 'bg.neutral.subtle.pressed',
+          color: 'text',
+        },
       },
+      icon: iconDefaultStyles,
     },
-    ghost: {
+    hollow: {
       container: {
         bg: 'bg.neutral.subtle',
+        borderColor: 'border',
         color: 'text',
         _hover: {
           bg: 'bg.neutral.subtle.hovered',
@@ -125,13 +138,11 @@ const buttonVariants = {
         _active: {
           bg: 'bg.neutral.subtle.pressed',
         },
+        _disabled: {
+          borderColor: 'border.disabled',
+        },
       },
-      icon: {
-        fill: 'icon.decorative',
-        mixBlendMode: { base: 'multiply', _dark: 'screen' },
-        _groupHover: { fill: 'current' },
-        _groupActive: { fill: 'current' },
-      },
+      icon: iconDefaultStyles,
     },
     danger: {
       container: {
@@ -145,10 +156,7 @@ const buttonVariants = {
         },
       },
       icon: {
-        fill: 'icon.decorative.inverse',
-        mixBlendMode: 'screen',
-        _groupHover: { fill: 'icon.decorative.inverse' },
-        _groupActive: { fill: 'icon.decorative.inverse' },
+        ...iconInverseStyles,
         _groupDisabled: {
           fill: 'icon.decorative.inverse',
         },
@@ -158,16 +166,13 @@ const buttonVariants = {
       container: {
         bg: 'bg.selected',
         color: 'text.selected',
-        icon: { fill: 'icon.selected' },
         _hover: {
           bg: 'bg.selected.hovered',
           color: 'text.selected.hovered',
-          icon: { fill: 'icon.selected' },
         },
         _active: {
           bg: 'bg.selected.pressed',
           color: 'text.selected',
-          icon: { fill: 'icon.selected' },
         },
       },
       icon: {
@@ -201,6 +206,76 @@ const buttonVariants = {
         },
       },
     },
+    selectedSubtle: {
+      container: {
+        bg: 'bg.selected',
+        color: 'text.selected',
+        _hover: {
+          bg: 'bg.selected.hovered',
+          color: 'text.selected.hovered',
+        },
+        _active: {
+          bg: 'bg.selected.pressed',
+          color: 'text.selected',
+        },
+      },
+      icon: {
+        fill: 'icon.selected',
+        mixBlendMode: { base: 'multiply', _dark: 'screen' },
+        _groupHover: { fill: 'icon.selected' },
+        _groupActive: { fill: 'icon.selected' },
+        _groupDisabled: {
+          fill: 'icon.selected',
+        },
+      },
+    },
+  },
+};
+
+const buttonSizes = {
+  sm: {
+    container: {
+      fontSize: '14',
+      py: '1',
+      px: '8',
+    },
+    icon: {
+      w: '22',
+      h: '22',
+    },
+  },
+  md: {
+    container: {
+      fontSize: '16',
+      py: '3',
+      px: '12',
+    },
+    icon: {
+      w: '24',
+      h: '24',
+    },
+  },
+  lg: {
+    container: {
+      fontSize: '16',
+      py: '7',
+      px: '14',
+    },
+    icon: {
+      w: '24',
+      h: '24',
+    },
+  },
+  xl: {
+    container: {
+      fontSize: '20',
+      py: '9',
+      px: '16',
+    },
+    icon: {
+      w: '28',
+      h: '28',
+    },
   },
 };
 
@@ -211,52 +286,7 @@ export const buttonRecipe = defineSlotRecipe({
   base: baseButtonStyles,
   variants: {
     ...buttonVariants,
-    size: {
-      sm: {
-        container: {
-          fontSize: '14',
-          py: '1',
-          px: '8',
-        },
-        icon: {
-          w: '22',
-          h: '22',
-        },
-      },
-      md: {
-        container: {
-          fontSize: '16',
-          py: '3',
-          px: '12',
-        },
-        icon: {
-          w: '24',
-          h: '24',
-        },
-      },
-      lg: {
-        container: {
-          fontSize: '16',
-          py: '7',
-          px: '14',
-        },
-        icon: {
-          w: '24',
-          h: '24',
-        },
-      },
-      xl: {
-        container: {
-          fontSize: '20',
-          py: '9',
-          px: '16',
-        },
-        icon: {
-          w: '28',
-          h: '28',
-        },
-      },
-    },
+    size: buttonSizes,
     iconBefore: {
       true: { container: {} },
     },

package/src/recipes/datePicker.ts

@@ -6,8 +6,6 @@ const datePickerBase = {
     flexDirection: 'column',
     position: 'relative',
   },
-
-  // The segmented input container — visually identical to textinput
   input: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -48,22 +46,25 @@ const datePickerBase = {
       pointerEvents: 'none',
     },
     _error: {
+      bg: 'bg.danger',
       borderColor: 'border.danger',
+      color: 'text.danger',
       _hover: {
+        bg: 'bg.danger.hovered',
         borderColor: 'border.danger',
       },
       _focusWithin: {
+        bg: 'bg.danger',
         borderColor: 'border.danger',
         outlineColor: 'border.danger',
       },
       _open: {
+        bg: 'bg.danger',
         borderColor: 'border.danger',
         outlineColor: 'border.danger',
       },
     },
   },
-
-  // Individual focusable segment span (MM, DD, YYYY)
   segment: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -85,16 +86,12 @@ const datePickerBase = {
       color: 'text.disabled',
     },
   },
-
-  // The "/" or " " literal between date segments
   separator: {
     color: 'text.placeholder',
     userSelect: 'none',
     display: 'inline-flex',
     alignItems: 'center',
   },
-
-  // The floating calendar container
   popover: {
     display: 'flex',
     flexDirection: 'column',
@@ -109,8 +106,6 @@ const datePickerBase = {
     overflow: 'hidden',
     outline: 'none',
   },
-
-  // Month/year navigation row
   calendarHeader: {
     fontFamily: 'mono',
     display: 'flex',
@@ -121,8 +116,6 @@ const datePickerBase = {
     borderBottom: 'default',
     gap: '4',
   },
-
-  // 7-column grid for the days
   calendarGrid: {
     display: 'grid',
     gridTemplateColumns: 'repeat(7, 1fr)',
@@ -131,16 +124,12 @@ const datePickerBase = {
     py: '4',
     pb: '8',
   },
-
-  // Su Mo Tu We Th Fr Sa column headers
   weekdayLabel: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
   },
-
-  // Individual day button in the grid
   day: {
     alignItems: 'center',
     justifyContent: 'center',

package/src/recipes/text.ts

@@ -1,4 +1,5 @@
 import { defineRecipe } from '@pandacss/dev';
+
 import {
   fontSizes as fontSizeTokens,
   fontWeights as fontWeightTokens,
@@ -124,6 +125,9 @@ const linkBase = {
     borderRadius: '{sizes.4}',
     outlineColor: 'border.focused',
   },
+  'p &': {
+    backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
+  },
 };
 
 const linkVariants = {
@@ -131,7 +135,7 @@ const linkVariants = {
   _disabled: {
     true: {
       cursor: 'not-allowed',
-      opacity: '40%',
+      color: 'text.disabled',
       pointerEvents: 'none',
     },
   },
@@ -145,13 +149,12 @@ const labelBase = {
   color: 'text',
 };
 
-//Copied linkvarients, don't have styles defined for this yet
 const labelVariants = {
   ...textVariants,
   _disabled: {
     true: {
       cursor: 'not-allowed',
-      opacity: '70%',
+      color: 'text.disabled',
       pointerEvents: 'none',
     },
   },
@@ -162,6 +165,9 @@ export const textRecipe = defineRecipe({
   jsx: ['Text'],
   base: textBase,
   variants: textVariants,
+  defaultVariants: {
+    family: 'inherit',
+  },
 });
 
 export const headingRecipe = defineRecipe({
@@ -179,6 +185,9 @@ export const linkRecipe = defineRecipe({
   jsx: ['Link'],
   base: linkBase,
   variants: linkVariants,
+  defaultVariants: {
+    family: 'inherit',
+  },
 });
 
 export const labelRecipe = defineRecipe({

package/src/styles/primitives/shadows.ts

@@ -9,26 +9,50 @@ export const shadows = defineTokens.shadows({
     value:
       '{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.light}',
   },
+  raisedLightUp: {
+    value:
+      '{sizes.0} [-1] {sizes.1} {colors.shadow.raised.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.light}',
+  },
   raisedDark: {
     value:
       '{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.dark}',
   },
+  raisedDarkUp: {
+    value:
+      '{sizes.0} [-1] {sizes.1} {colors.shadow.raised.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.dark}',
+  },
   elevatedLight: {
     value:
       '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.light}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.light}',
   },
+  elevatedLightUp: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.light}, {sizes.0} [-4] {sizes.7} {colors.shadow.elevated.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.light}',
+  },
   elevatedDark: {
     value:
       '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.dark}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.dark}',
   },
+  elevatedDarkUp: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.dark}, {sizes.0} [-4] {sizes.7} {colors.shadow.elevated.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.dark}',
+  },
   overlayLight: {
     value:
       '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.light}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.light}',
   },
+  overlayLightUp: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.light}, {sizes.0} [-8] {sizes.12} {colors.shadow.overlay.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.light}',
+  },
   overlayDark: {
     value:
       '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.dark}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.dark}',
   },
+  overlayDarkUp: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.dark}, {sizes.0} [-8] {sizes.12} {colors.shadow.overlay.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.dark}',
+  },
   overflowLight: {
     value:
       '{sizes.0} {sizes.0} {sizes.8} {colors.shadow.overflow.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.light}',
@@ -37,37 +61,4 @@ export const shadows = defineTokens.shadows({
     value:
       '{sizes.0} {sizes.0} {sizes.12} {colors.shadow.overflow.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.dark}',
   },
-  // TODO: delete below once migration is complete
-  lowLight: {
-    value:
-      '{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.1} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.3} rgba(30, 30, 30, 0.2)',
-  },
-  lowDark: {
-    value:
-      '{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.1} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.3} rgba(0, 0, 0, 0.4)',
-  },
-  mediumLight: {
-    value:
-      '{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.4} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.8} {sizes.8} rgba(30, 30, 30, 0.2)',
-  },
-  mediumDark: {
-    value:
-      '{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.4} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.8} {sizes.8} rgba(0, 0, 0, 0.4)',
-  },
-  highLight: {
-    value:
-      '{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(30, 30, 30, 0.2)',
-  },
-  highDark: {
-    value:
-      '{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(0, 0, 0, 0.4)',
-  },
-  insetLight: {
-    value:
-      'inset {sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.2} {sizes.1} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.3} {sizes.2} rgba(30, 30, 30, 0.2)',
-  },
-  insetDark: {
-    value:
-      'inset {sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.2} {sizes.1} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.3} {sizes.2} rgba(0, 0, 0, 0.4)',
-  },
 });

package/src/styles/semantics/shadows.ts

@@ -5,28 +5,39 @@ export const shadows = defineSemanticTokens.shadows({
     value: { base: '{shadows.zeroShadow}', _dark: '{shadows.zeroShadow}' },
   },
   raised: {
-    value: { base: '{shadows.raisedLight}', _dark: '{shadows.raisedDark}' },
+    DEFAULT: {
+      value: { base: '{shadows.raisedLight}', _dark: '{shadows.raisedDark}' },
+    },
+    up: {
+      value: {
+        base: '{shadows.raisedLightUp}',
+        _dark: '{shadows.raisedDarkUp}',
+      },
+    },
   },
   elevated: {
-    value: { base: '{shadows.elevatedLight}', _dark: '{shadows.elevatedDark}' },
+    DEFAULT: {
+      value: {
+        base: '{shadows.elevatedLight}',
+        _dark: '{shadows.elevatedDark}',
+      },
+    },
+    up: {
+      value: {
+        base: '{shadows.elevatedLightUp}',
+        _dark: '{shadows.elevatedDarkUp}',
+      },
+    },
   },
   overlay: {
-    value: { base: '{shadows.overlayLight}', _dark: '{shadows.overlayDark}' },
+    DEFAULT: {
+      value: { base: '{shadows.overlayLight}', _dark: '{shadows.overlayDark}' },
+    },
+    dark: {
+      value: { base: '{shadows.overlayDark}', _dark: '{shadows.overlayLight}' },
+    },
   },
   overflow: {
     value: { base: '{shadows.overflowLight}', _dark: '{shadows.overflowDark}' },
   },
-  // TODO: delete below once migration is complete
-  low: {
-    value: { base: '{shadows.lowLight}', _dark: '{shadows.lowDark}' },
-  },
-  medium: {
-    value: { base: '{shadows.mediumLight}', _dark: '{shadows.mediumDark}' },
-  },
-  high: {
-    value: { base: '{shadows.highLight}', _dark: '{shadows.highDark}' },
-  },
-  inset: {
-    value: { base: '{shadows.insetLight}', _dark: '{shadows.insetDark}' },
-  },
 });

package/src/styles/utilities/conditions.ts

@@ -75,8 +75,8 @@ export const conditions = {
     '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
   required: '&:is(:required, [data-required], [aria-required=true])',
   valid: '&:is(:valid, [data-valid])',
-  invalid: '&:is(:invalid, [data-invalid], [aria-invalid=true])',
-  error: '&:is([data-error], [data-error=true])',
+  invalid: '&:is(:invalid, [data-invalid=true], [aria-invalid=true])',
+  error: '&:is([data-error=true])',
   autofill: '&:autofill',
   inRange: '&:is(:in-range, [data-in-range])',
   outOfRange: '&:is(:out-of-range, [data-outside-range])',