@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

package/src/tokens/web/components/popover/Token.Readme.md

@@ -6,8 +6,6 @@ This table lists all tokens for this component:
 
 | Token | Description |
 |-------|------------|
-| min-width | Controls the minimum width of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always wide enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-width |
-| min-height | Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height |
 | z-index | Controls the stacking order of popover components (small overlay windows that appear when users hover or click on elements). Higher values make the popover appear above other elements, ensuring it's visible on top of all other content.<br>CSS variable: --wm-popover-z-index |
 | gap | Controls the spacing between popover components and their trigger elements (the elements that cause the popover to appear). This creates visual separation between the popover and the element that triggered it.<br>CSS variable: --wm-popover-gap |
 | margin | Controls the margin around popover components (small overlay windows that appear when users hover or click on elements). This creates space between the popover and the edges of the screen or other elements.<br>CSS variable: --wm-popover-margin |
@@ -16,6 +14,9 @@ This table lists all tokens for this component:
 | color | Sets the text color of popover components (small overlay windows that appear when users hover or click on elements). This determines what color the popover text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-color |
 | shadow | Controls the drop shadow effect around popover components (small overlay windows that appear when users hover or click on elements). This creates a subtle shadow that makes the popover appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-popover-shadow |
 | radius | Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius |
+| border.color | Sets the border color.<br>CSS variable: --wm-popover-border-color |
+| border.width | Controls the border thickness.<br>CSS variable: --wm-popover-border-width |
+| border.style | Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-popover-border-style |
 | header.padding | Controls the internal spacing inside popover headers (the top section of popover windows that contains the title). This creates breathing room around the popover header content.<br>CSS variable: --wm-popover-header-padding |
 | header.color | Sets the text color of popover headers (the top section of popover windows that contains the title). This determines what color the header text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-popover-header-color |
 | header.font-family | Sets the typeface (font style) for popover headers (the top section of popover windows that contains the title). This determines whether the header text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-popover-header-font-family |

package/src/tokens/web/components/popover/popover.json

@@ -1,22 +1,6 @@
 {
   "popover": {
     "mapping": {
-      "min-width": {
-        "value": "50px",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the minimum width of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always wide enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-width"
-        }
-      },
-      "min-height": {
-        "value": "50px",
-        "type": "space",
-        "attributes": {
-          "subtype": "space",
-          "description": "Controls the minimum height of popover components (small overlay windows that appear when users hover or click on elements). This ensures the popover is always tall enough to be visible and properly displayed.<br>CSS variable: --wm-popover-min-height"
-        }
-      },
       "z-index": {
         "value": "1060",
         "type": "radius",
@@ -81,6 +65,32 @@
           "description": "Controls the corner rounding of popover components (small overlay windows that appear when users hover or click on elements). This makes the popover appear with rounded corners for a softer appearance.<br>CSS variable: --wm-popover-radius"
         }
       },
+      "border": {
+        "color": {
+          "value": "{color.transparent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color.<br>CSS variable: --wm-popover-border-color"
+          }
+        },
+        "width": {
+          "value": "{border.width.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border thickness.<br>CSS variable: --wm-popover-border-width"
+          }
+        },
+        "style": {
+          "value": "none",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Sets the border style. Acceptable values: solid, dashed, dotted, double, groove, ridge, inset, outset, none.<br>CSS variable: --wm-popover-border-style"
+          }
+        }
+      },
       "header": {
         "padding": {
           "value": "{space.4.value}",

package/src/tokens/web/components/progress-circle/Token.Readme.md

@@ -8,4 +8,9 @@ This table lists all tokens for this component:
 |-------|------------|
 | stroke.inactive | Sets the background color of circular progress indicators (the unfilled portion of the circle that shows remaining progress). This is the color of the circle track that shows how much progress is left.<br>CSS variable: --wm-progress-circle-stroke-inactive |
 | stroke.active | Sets the fill color of circular progress indicators (the filled portion of the circle that shows completed progress). This is the color that shows how much progress has been made.<br>CSS variable: --wm-progress-circle-stroke-active |
-| label.color | Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color |
+| label.color | Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color |
+| label.font-size | Controls how large the label text appears.<br>CSS variable: --wm-progress-circle-label-font-size |
+| label.font-family | Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-progress-circle-label-font-family |
+| label.font-weight | Controls how thick or bold the label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-progress-circle-label-font-weight |
+| label.line-height | Controls the vertical spacing between lines when label text wraps to multiple lines.<br>CSS variable: --wm-progress-circle-label-line-height |
+| label.letter-spacing | Controls the horizontal spacing between individual characters in label text.<br>CSS variable: --wm-progress-circle-label-letter-spacing |

package/src/tokens/web/components/progress-circle/progress-circle.json

@@ -67,6 +67,46 @@
             "subtype": "color",
             "description": "Sets the text color of circular progress indicator labels (the percentage or text that appears in the center of the circle). This should contrast well with the progress circle colors for readability.<br>CSS variable: --wm-progress-circle-label-color"
           }
+        },
+        "font-size": {
+          "value": "{h4.font-size.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-size",
+            "description": "Controls how large the label text appears.<br>CSS variable: --wm-progress-circle-label-font-size"
+          }
+        },
+        "font-family": {
+          "value": "{body.medium.font-family.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-progress-circle-label-font-family"
+          }
+        },
+        "font-weight": {
+          "value": "{body.medium.font-weight.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-progress-circle-label-font-weight"
+          }
+        },
+        "line-height": {
+          "value": "{body.medium.line-height.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when label text wraps to multiple lines.<br>CSS variable: --wm-progress-circle-label-line-height"
+          }
+        },
+        "letter-spacing": {
+          "value": "{body.medium.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in label text.<br>CSS variable: --wm-progress-circle-label-letter-spacing"
+          }
         }
       }
     },

package/src/tokens/web/components/rating/rating.json

@@ -3,12 +3,12 @@
     "meta": {
       "mapping": {
         "selector": {
-          "web": ".app-ratings .ratings-wrapper .rating-style"
+          "web": ".app-ratings"
         },
         "states": {
           "active": {
             "selector": {
-              "web": " label:hover, label:hover ~ label,  label.active"
+              "web": " label:hover, label:hover ~ label, label.active"
             }
           },
           "disabled": {

package/src/tokens/web/components/slider/Token.Readme.md

@@ -0,0 +1,24 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| height | Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height |
+| border-radius | Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius |
+| track.filled.background | Sets the background color of slider filled tracks (the portion of the track from the start to the current value). This determines what color the filled track appears in.<br>CSS variable: --wm-slider-track-filled-background |
+| track.unfilled.background | Sets the background color of slider unfilled tracks (the portion of the track from the current value to the end). This determines what color the unfilled track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-track-unfilled-background |
+| handle.background | Sets the background color of slider handle (the draggable handle that users interact with to set values). This determines what color the handle appears in.<br>CSS variable: --wm-slider-handle-background |
+| handle.height | Controls the height of slider handles. This determines the vertical size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-height |
+| handle.width | Controls the width of slider handles. This determines the horizontal size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-width |
+| handle.border-radius | Controls the border radius (rounded corners) of slider handles. This determines how rounded the corners of the handle appear. Acceptable units: px.<br>CSS variable: --wm-slider-handle-border-radius |
+| handle.gap | Controls the visual spacing between slider handles and the filled/unfilled track segments. Acceptable units: px.<br>CSS variable: --wm-slider-handle-gap |
+| range.label.color | Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-slider-range-label-color |
+| range.label.padding | Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-slider-range-label-padding |
+| range.label.font-size | Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-slider-range-label-font-size |
+| range.label.font-weight | Controls how thick or bold label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-slider-range-label-font-weight |
+| range.label.font-family | Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-slider-range-label-font-family |
+| range.label.background-color | Sets the background color of labels (the area behind the label text). When set to 'none', labels have no background color, making them transparent.<br>CSS variable: --wm-slider-range-label-background-color |
+| range.label.gap | Controls the visual spacing between slider and the label segments. Acceptable units: px.<br>CSS variable: --wm-slider-range-label-gap |

package/src/tokens/web/components/slider/slider.json

@@ -0,0 +1,153 @@
+{
+    "slider": {
+        "meta": {
+            "mapping": {
+                "selector": {
+                    "web": ".app-slider"
+                }
+            },
+            "appearances": {}
+        },
+        "mapping": {
+            "height": {
+                "value": "{space.4.value}",
+                "type": "space",
+                "attributes": {
+                    "subtype": "space",
+                    "description": "Controls the height of slider tracks (the horizontal bar that represents the slider range). This determines the vertical size of the track. Acceptable units: px.<br>CSS variable: --wm-slider-track-height"
+                }
+            },
+            "border-radius": {
+                "value": "{radius.lg.value}",
+                "type": "radius",
+                "attributes": {
+                    "subtype": "radius",
+                    "description": "Controls the border radius (rounded corners) of slider tracks. This determines how rounded the corners of the track appear. Acceptable units: px.<br>CSS variable: --wm-slider-track-border-radius"
+                }
+            },
+            "track": {
+                "filled": {
+                    "background": {
+                        "value": "{color.surface.tint.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of slider filled tracks (the portion of the track from the start to the current value). This determines what color the filled track appears in.<br>CSS variable: --wm-slider-track-filled-background"
+                        }
+                    }
+                },
+                "unfilled": {
+                    "background": {
+                        "value": "{color.primary.container.@.value}",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of slider unfilled tracks (the portion of the track from the current value to the end). This determines what color the unfilled track appears in, typically matching the primary container theme color.<br>CSS variable: --wm-slider-track-unfilled-background"
+                        }
+                    }
+                }
+            },
+            "handle": {
+                "background": {
+                    "value": "{color.surface.tint.@.value}",
+                    "type": "color",
+                    "attributes": {
+                        "subtype": "color",
+                        "description": "Sets the background color of slider handle (the draggable handle that users interact with to set values). This determines what color the handle appears in.<br>CSS variable: --wm-slider-handle-background"
+                    }
+                },
+                "height": {
+                    "value": "{space.10.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the height of slider handles. This determines the vertical size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-height"
+                    }
+                },
+                "width": {
+                    "value": "{space.1.value}",
+                    "type": "space",
+                    "attributes": {
+                        "subtype": "space",
+                        "description": "Controls the width of slider handles. This determines the horizontal size of the handle. Acceptable units: px.<br>CSS variable: --wm-slider-handle-width"
+                    }
+                },
+                "border-radius": {
+                    "value": "{radius.xs.value}",
+                    "type": "radius",
+                    "attributes": {
+                        "subtype": "radius",
+                        "description": "Controls the border radius (rounded corners) of slider handles. This determines how rounded the corners of the handle appear. Acceptable units: px.<br>CSS variable: --wm-slider-handle-border-radius"
+                    }
+                },
+                "gap": {
+                    "value": "{space.2.value}",
+                    "type": "space",
+                    "attributes": {
+                        "description": "Controls the visual spacing between slider handles and the filled/unfilled track segments. Acceptable units: px.<br>CSS variable: --wm-slider-handle-gap"
+                    }
+                }
+            },
+            "range": {
+                "label": {
+                    "color": {
+                        "value": "inherit",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-slider-range-label-color"
+                        }
+                    },
+                    "padding": {
+                        "value": "{space.0.value}",
+                        "type": "space",
+                        "attributes": {
+                            "subtype": "space",
+                            "description": "Controls the internal spacing inside labels (the space between the label text and its border). This creates breathing room around the label content.<br>CSS variable: --wm-slider-range-label-padding"
+                        }
+                    },
+                    "font-size": {
+                        "value": "{body.medium.font-size.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-size",
+                            "description": "Controls how large label text appears (text that describes or identifies other content). Larger values make labels more prominent, smaller values make them more subtle.<br>CSS variable: --wm-slider-range-label-font-size"
+                        }
+                    },
+                    "font-weight": {
+                        "value": "{body.medium.font-weight.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-weight",
+                            "description": "Controls how thick or bold label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-slider-range-label-font-weight"
+                        }
+                    },
+                    "font-family": {
+                        "value": "{body.medium.font-family.value}",
+                        "type": "font",
+                        "attributes": {
+                            "subtype": "font-family",
+                            "description": "Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-slider-range-label-font-family"
+                        }
+                    },
+                    "background-color": {
+                        "value": "none",
+                        "type": "color",
+                        "attributes": {
+                            "subtype": "color",
+                            "description": "Sets the background color of labels (the area behind the label text). When set to 'none', labels have no background color, making them transparent.<br>CSS variable: --wm-slider-range-label-background-color"
+                        }
+                    },
+                    "gap": {
+                        "value": "{space.2.value}",
+                        "type": "space",
+                        "attributes": {
+                            "description": "Controls the visual spacing between slider and the label segments. Acceptable units: px.<br>CSS variable: --wm-slider-range-label-gap"
+                        }
+                    }
+                }
+            }
+        },
+        "appearances": {}
+    }
+}

package/src/tokens/web/components/switch/switch.json

@@ -23,7 +23,7 @@
           },
           "active": {
             "selector": {
-              "web": " > .btn-group > .btn::active"
+              "web": " > .btn-group > .btn:active"
             }
           }
         }

package/src/tokens/web/components/tabs/Token.Readme.md

@@ -10,6 +10,8 @@ This table lists all tokens for this component:
 | nav.border.width | Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width |
 | nav.border.style | Controls the style of the border around tab navigation (the section containing the tab headers). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-tabs-nav-border-style |
 | nav.border.color | Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color |
+| nav.alignment | Controls the alignment of tab navigation (the section containing the tab headers). 'flex-start' aligns tabs to the left, 'center' centers them, and 'flex-end' aligns them to the right.<br>CSS variable: --wm-tabs-nav-alignment |
+| nav.gap | Controls the spacing between individual tab headers within the tab navigation (the section containing the tab headers). This creates visual separation between each tab header.<br>CSS variable: --wm-tabs-nav-gap |
 | item.heading.height | Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height |
 | item.heading.padding | Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding |
 | item.heading.font-size | Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size |
@@ -18,9 +20,11 @@ This table lists all tokens for this component:
 | item.heading.line-height | Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height |
 | item.heading.letter-spacing | Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing |
 | item.heading.color.@ | Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color |
+| item.heading.background | Sets the background color of tab item headings (the clickable tab labels that users click to switch between different content sections). This is the color that appears behind the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-background |
 | item.heading.border.width | Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width |
 | item.heading.border.style | Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style |
 | item.heading.border.color | Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color |
+| item.heading.border.radius | Controls the border radius of tab item headings, determining how rounded the corners appear.<br>CSS variable: --wm-tabs-item-heading-border-radius |
 | item.heading.state.layer.color | Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color |
 | item.heading.state.layer.opacity | Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity |
 | item.heading.indicator.height | Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height |

package/src/tokens/web/components/tabs/tabs.json

@@ -36,7 +36,7 @@
       "nav": {
         "border": {
           "width": {
-            "value": "{border.width.base.value}",
+            "value": "{border.width.0.value} {border.width.0.value} {border.width.base.value} {border.width.0.value}",
             "type": "space",
             "attributes": {
               "subtype": "border-width",
@@ -59,6 +59,22 @@
               "description": "Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color"
             }
           }
+        },
+        "alignment": {
+          "value": "flex-start",
+          "type": "string",
+          "attributes": {
+            "subtype": "string",
+            "description": "Controls the alignment of tab navigation (the section containing the tab headers). 'flex-start' aligns tabs to the left, 'center' centers them, and 'flex-end' aligns them to the right.<br>CSS variable: --wm-tabs-nav-alignment"
+          }
+        },
+        "gap": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the spacing between individual tab headers within the tab navigation (the section containing the tab headers). This creates visual separation between each tab header.<br>CSS variable: --wm-tabs-nav-gap"
+          }
         }
       },
       "item": {
@@ -129,6 +145,14 @@
               }
             }
           },
+          "background": {
+            "value": "{color.transparent.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of tab item headings (the clickable tab labels that users click to switch between different content sections). This is the color that appears behind the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-background"
+            }
+          },
           "border": {
             "width": {
               "value": "0px",
@@ -153,6 +177,14 @@
                 "subtype": "color",
                 "description": "Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color"
               }
+            },
+            "radius": {
+              "value": "{radius.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the border radius of tab item headings, determining how rounded the corners appear.<br>CSS variable: --wm-tabs-item-heading-border-radius"
+              }
             }
           },
           "state": {

package/src/tokens/web/global/elevation/elevation.json

@@ -2,35 +2,35 @@
   "elevation": {
     "shadow": {
       "1": {
-        "value": "0px 4px 11px 0px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 20%)\"",
+        "value": "0px 4px 11px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 20%)",
         "type": "radius",
         "attributes": {
           "subtype": "elevation"
         }
       },
       "2": {
-        "value": "0px 1px 2px 0px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 70%)\",0px 2px 6px 2px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 85%)\"",
+        "value": "0px 1px 2px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%),0px 2px 6px 2px color-mix(in srgb, {color.shadow.@.value}, transparent 85%)",
         "type": "radius",
         "attributes": {
           "subtype": "elevation"
         }
       },
       "3": {
-        "value": "0px 4px 8px 3px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 85%)\",0px 1px 3px 0px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 70%)\"",
+        "value": "0px 4px 8px 3px color-mix(in srgb, {color.shadow.@.value}, transparent 85%),0px 1px 3px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%)",
         "type": "radius",
         "attributes": {
           "subtype": "elevation"
         }
       },
       "4": {
-        "value": "0px 6px 10px 4px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 85%)\",0px 2px 3px 0px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 70%)\"",
+        "value": "0px 6px 10px 4px color-mix(in srgb, {color.shadow.@.value}, transparent 85%),0px 2px 3px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%)",
         "type": "radius",
         "attributes": {
           "subtype": "elevation"
         }
       },
       "5": {
-        "value": "0px 8px 12px 6px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 85%)\",0px 4px 4px 0px ~\"color-mix(in srgb, {color.shadow.@.value}, transparent 70%)\"",
+        "value": "0px 8px 12px 6px color-mix(in srgb, {color.shadow.@.value}, transparent 85%),0px 4px 4px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%)",
         "type": "radius",
         "attributes": {
           "subtype": "elevation"