@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/src/tokens/web/components/page-left-nav/page-left-nav.json

@@ -0,0 +1,961 @@
+{
+  "aside-left": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-left-panel"
+        },
+        "states": {
+          "hover": {
+            "selector": {
+              "web": " .app-nav-item:has(:hover)"
+            }
+          },
+          "active": {
+            "selector": {
+              "web": " .app-nav-item:has(:active), .app-nav-item:has(.active), .app-nav-item.active"
+            }
+          },
+          "focus": {
+            "selector": {
+              "web": " .app-nav-item:has(:focus)"
+            }
+          }
+        }
+      },
+      "appearances": {
+        "full": {
+          "mapping": {
+            "selector": {
+              "web": ".wm-app"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "nav-drawer": {
+                "selector": {
+                  "web": ":has(.app-left-panel.app-nav-drawer.app-nav-full)"
+                }
+              },
+              "nav-rail": {
+                "selector": {
+                  "web": ":has(.app-left-panel.app-nav-rail.app-nav-full)"
+                }
+              }
+            }
+          }
+        },
+        "clipped": {
+          "mapping": {
+            "selector": {
+              "web": ".wm-app"
+            }
+          },
+          "variantGroups": {
+            "status": {
+              "nav-drawer": {
+                "selector": {
+                  "web": ":has(.app-left-panel.app-nav-drawer.app-nav-clipped)"
+                }
+              },
+              "nav-rail": {
+                "selector": {
+                  "web": ":has(.app-left-panel.app-nav-rail.app-nav-clipped)"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "nav": {
+        "width": {
+          "value": "220px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the width of the left navigation panel (the vertical sidebar that contains navigation menu items). This determines how wide the navigation area appears on the left side of the screen.<br>CSS variable: --wm-aside-left-width"
+          }
+        },
+        "border": {
+          "color": {
+            "value": "{color.outline.variant.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of the left navigation panel border (the vertical sidebar that contains navigation menu items). This determines what color the border line appears in that separates the navigation from the main content.<br>CSS variable: --wm-aside-left-border-color"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Sets the visual style of the left navigation panel border. 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes the border completely.<br>CSS variable: --wm-aside-left-border-style"
+            }
+          },
+          "radius": {
+            "value": "{radius.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "radius",
+              "description": "Controls the corner rounding of the left navigation panel. This makes the navigation panel corners slightly rounded for a softer appearance, or keeps them square with 'none'.<br>CSS variable: --wm-aside-left-border-radius"
+            }
+          },
+          "width": {
+            "value": "{border.width.0.value} {border.width.1.value} {border.width.0.value} {border.width.0.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the left navigation panel border. The format is 'top right bottom left' - this setting creates a right border only to separate the navigation from the main content.<br>CSS variable: --wm-aside-left-border-width"
+            }
+          }
+        },
+        "shadow": {
+          "value": "{elevation.shadow.none.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "elevation",
+            "description": "Controls the drop shadow effect around the left navigation panel (the vertical sidebar that contains navigation menu items). This creates a subtle shadow that makes the navigation appear to float above the background, giving it depth and elevation.<br>CSS variable: --wm-aside-left-shadow"
+          }
+        },
+        "letter-spacing": {
+          "value": "{label.medium.letter-spacing.value}",
+          "type": "font",
+          "attributes": {
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual characters in the left navigation panel text. This can help make the navigation text more readable and properly spaced.<br>CSS variable: --wm-aside-left-letter-spacing"
+          }
+        },
+        "padding": {
+          "value": "{space.0.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the internal spacing inside the left navigation panel (the space between the navigation content and its borders). This creates breathing room around the navigation menu items.<br>CSS variable: --wm-aside-left-padding"
+          }
+        },
+        "background": {
+          "value": "{color.transparent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of the left navigation panel (the vertical sidebar that contains navigation menu items). This is the main background color that appears behind the navigation content.<br>CSS variable: --wm-aside-left-background"
+          }
+        },
+        "color": {
+          "value": "{color.on-surface.variant.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of the left navigation panel (the vertical sidebar that contains navigation menu items). This determines what color the navigation text appears in.<br>CSS variable: --wm-aside-left-color"
+          }
+        },
+        "gap": {
+          "value": "{space.1.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the spacing between navigation items in the left navigation panel (the vertical sidebar that contains navigation menu items). This creates visual separation between different menu options.<br>CSS variable: --wm-aside-left-nav-gap"
+          }
+        },
+        "item": {
+          "color": {
+            "value": "none",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the text color of navigation items in the left navigation panel (individual menu options like 'Home', 'Settings', 'Profile'). This determines what color the menu item text appears in.<br>CSS variable: --wm-aside-left-nav-item-color"
+            }
+          },
+          "background": {
+            "value": "{color.transparent.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of navigation items in the left navigation panel (individual menu options like 'Home', 'Settings', 'Profile'). This creates the background color behind each menu item.<br>CSS variable: --wm-aside-left-nav-item-background"
+            }
+          },
+          "min": {
+            "height": {
+              "value": "44px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the minimum height of navigation items in the left navigation panel (individual menu options like 'Home', 'Settings', 'Profile'). This ensures each menu item is tall enough to be easily clickable.<br>CSS variable: --wm-aside-left-nav-item-min-height"
+              }
+            }
+          },
+          "padding": {
+            "value": "{space.2.value} {space.6.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the internal spacing inside navigation items in the left navigation panel (the space between the menu item content and its borders). This creates breathing room around the menu item text and icons.<br>CSS variable: --wm-aside-left-nav-item-padding"
+            }
+          },
+          "font": {
+            "family": {
+              "value": "{label.large.font-family.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-family",
+                "description": "Sets the typeface (font style) for navigation item text in the left navigation panel (individual menu options like 'Home', 'Settings', 'Profile'). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-aside-left-nav-item-font-family"
+              }
+            },
+            "size": {
+              "value": "{label.large.font-size.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-size",
+                "description": "Controls how large the navigation item text appears in the left navigation panel (individual menu options like 'Home', 'Settings', 'Profile'). This affects the size of the text that users see in each menu option.<br>CSS variable: --wm-aside-left-nav-item-font-size"
+              }
+            },
+            "weight": {
+              "value": "{label.large.font-weight.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "font-weight",
+                "description": "Controls how thick or bold the navigation item text appears in the left navigation panel (individual menu options like 'Home', 'Settings', 'Profile'). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-aside-left-nav-item-font-weight"
+              }
+            }
+          },
+          "line-height": {
+            "value": "{label.medium.line-height.value}",
+            "type": "font",
+            "attributes": {
+              "subtype": "line-height",
+              "description": "Controls the vertical spacing between lines when navigation item text wraps to multiple lines in the left navigation panel. This ensures proper spacing for the menu item text displayed in the navigation.<br>CSS variable: --wm-aside-left-nav-item-line-height"
+            }
+          },
+          "border": {
+            "radius": {
+              "value": "{radius.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the border radius of navigation items.<br>CSS variable: --wm-aside-left-nav-item-border-radius"
+              }
+            }
+          },
+          "gap": {
+            "value": "{space.1.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls spacing between elements within navigation items.<br>CSS variable: --wm-aside-left-nav-item-gap"
+            }
+          },
+          "icon": {
+            "size": {
+              "value": "24px",
+              "type": "space",
+              "attributes": {
+                "subtype": "icon-size",
+                "description": "Controls the size of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-size"
+              }
+            },
+            "width": {
+              "value": "40px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the width of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-width"
+              }
+            },
+            "height": {
+              "value": "40px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-height"
+              }
+            },
+            "border": {
+              "radius": {
+                "value": "{radius.none.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Controls the border radius of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-border-radius"
+                }
+              }
+            },
+            "background": {
+              "value": "{color.inherit.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-background"
+              }
+            },
+            "color": {
+              "value": "{color.inherit.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of navigation item icons.<br>CSS variable: --wm-aside-left-nav-item-icon-color"
+              }
+            }
+          },
+          "indicator": {
+            "color": {
+              "value": "none",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the color of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-color"
+              }
+            },
+            "width": {
+              "value": "1px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the width of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-width"
+              }
+            },
+            "height": {
+              "value": "100%",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-height"
+              }
+            },
+            "position": {
+              "value": " 0 0 0 auto",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the positioning of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-position"
+              }
+            },
+            "border": {
+              "radius": {
+                "value": "{radius.none.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Controls the border radius of navigation item indicators.<br>CSS variable: --wm-aside-left-nav-item-indicator-border-radius"
+                }
+              }
+            }
+          },
+          "caret": {
+            "size": {
+              "value": "{icon.size.sm.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "icon-size",
+                "description": "Controls the size of navigation item caret icons.<br>CSS variable: --wm-aside-left-nav-item-caret-size"
+              }
+            }
+          }
+        },
+        "submenu": {
+          "padding": {
+            "value": "{space.0.value} {space.0.value} {space.0.value} {space.3.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Sets internal spacing within submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-padding"
+            }
+          },
+          "background": {
+            "value": "{color.transparent.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the background color of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-background"
+            }
+          },
+          "border": {
+            "radius": {
+              "value": "{radius.none.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius",
+                "description": "Controls the border radius of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-border-radius"
+              }
+            }
+          },
+          "box-shadow": {
+            "value": "{elevation.shadow.none.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation",
+              "description": "Controls the drop shadow effect of submenu containers.<br>CSS variable: --wm-aside-left-nav-submenu-box-shadow"
+            }
+          },
+          "item": {
+            "color": {
+              "value": "none",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the text color of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-color"
+              }
+            },
+            "background": {
+              "value": "{color.transparent.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-background"
+              }
+            },
+            "height": {
+              "value": "44px",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the height of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-height"
+              }
+            },
+            "padding": {
+              "value": "{space.2.value} {space.6.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Sets internal spacing within submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-padding"
+              }
+            },
+            "font": {
+              "size": {
+                "value": "{label.large.font-size.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-size",
+                  "description": "Controls the size of submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-size"
+                }
+              },
+              "family": {
+                "value": "{label.large.font-family.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-family",
+                  "description": "Sets the font family for submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-family"
+                }
+              },
+              "weight": {
+                "value": "{label.large.font-weight.value}",
+                "type": "font",
+                "attributes": {
+                  "subtype": "font-weight",
+                  "description": "Controls the weight of submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-font-weight"
+                }
+              }
+            },
+            "line-height": {
+              "value": "{label.large.line-height.value}",
+              "type": "font",
+              "attributes": {
+                "subtype": "line-height",
+                "description": "Sets the line height for submenu item text.<br>CSS variable: --wm-aside-left-nav-submenu-item-line-height"
+              }
+            },
+            "border": {
+              "radius": {
+                "value": "{radius.none.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "radius",
+                  "description": "Controls the border radius of submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-border-radius"
+                }
+              }
+            },
+            "gap": {
+              "value": "{space.2.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls spacing between elements within submenu items.<br>CSS variable: --wm-aside-left-nav-submenu-item-gap"
+              }
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "nav": {
+            "item": {
+              "background": {
+                "value": "{color.inherit.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "color": {
+                "value": "{color.inherit.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "indicator": {
+                "color": {
+                  "value": "{color.secondary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "icon": {
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "background": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "width": {
+                    "value": "none",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "radius"
+                    }
+                  },
+                  "style": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  },
+                  "color": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "anchor": {
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "background": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "state": {
+                "layer": {
+                  "color": {
+                    "value": "{color.on-surface.@.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  },
+                  "opacity": {
+                    "value": "{opacity.hover.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "opacity"
+                    }
+                  }
+                }
+              }
+            },
+            "submenu": {
+              "item": {
+                "background": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "opacity": {
+                  "value": "{opacity.hover.value}",
+                  "type": "radius",
+                  "attributes": {
+                    "subtype": "opacity"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "active": {
+          "nav": {
+            "item": {
+              "background": {
+                "value": "{color.transparent.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "indicator": {
+                "color": {
+                  "value": "{color.secondary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "icon": {
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "background": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "width": {
+                    "value": "none",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "radius"
+                    }
+                  },
+                  "style": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  },
+                  "color": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "anchor": {
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "background": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "state": {
+                "layer": {
+                  "color": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  },
+                  "opacity": {
+                    "value": "{opacity.active.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "opacity"
+                    }
+                  }
+                }
+              }
+            },
+            "submenu": {
+              "item": {
+                "background": {
+                  "value": "{color.transparent.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "focus": {
+          "nav": {
+            "item": {
+              "background": {
+                "value": "{color.transparent.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "color": {
+                "value": "{color.secondary.@.value}",
+                "type": "color",
+                "attributes": {
+                  "subtype": "color"
+                }
+              },
+              "indicator": {
+                "color": {
+                  "value": "{color.secondary.@.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "icon": {
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "background": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "border": {
+                  "width": {
+                    "value": "none",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "radius"
+                    }
+                  },
+                  "style": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  },
+                  "color": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  }
+                }
+              },
+              "anchor": {
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "background": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              },
+              "state": {
+                "layer": {
+                  "color": {
+                    "value": "{color.inherit.value}",
+                    "type": "color",
+                    "attributes": {
+                      "subtype": "color"
+                    }
+                  },
+                  "opacity": {
+                    "value": "{opacity.active.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "opacity"
+                    }
+                  }
+                }
+              }
+            },
+            "submenu": {
+              "item": {
+                "background": {
+                  "value": "{color.transparent.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                },
+                "color": {
+                  "value": "{color.inherit.value}",
+                  "type": "color",
+                  "attributes": {
+                    "subtype": "color"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "appearances": {
+      "full": {
+        "mapping": {},
+        "variantGroups": {
+          "status": {
+            "nav-drawer": {
+              "nav": {
+                "width": {
+                  "value": "220px",
+                  "type": "space",
+                  "attributes": {
+                    "subtype": "space"
+                  }
+                }
+              }
+            },
+            "nav-rail": {
+              "nav": {
+                "width": {
+                  "value": "120px",
+                  "type": "space",
+                  "attributes": {
+                    "subtype": "space"
+                  }
+                },
+                "submenu": {
+                  "box-shadow": {
+                    "value": "{elevation.shadow.1.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "elevation"
+                    }
+                  },
+                  "radius": {
+                    "value": "{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "radius"
+                    }
+                  }
+                },
+                "item": {
+                  "anchor-display": {
+                    "value": "block",
+                    "type": "font",
+                    "attributes": {
+                      "subtype": "font-family"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      "clipped": {
+        "mapping": {},
+        "variantGroups": {
+          "status": {
+            "nav-drawer": {
+              "nav": {
+                "width": {
+                  "value": "220px",
+                  "type": "space",
+                  "attributes": {
+                    "subtype": "space"
+                  }
+                }
+              }
+            },
+            "nav-rail": {
+              "nav": {
+                "width": {
+                  "value": "102px",
+                  "type": "space",
+                  "attributes": {
+                    "subtype": "space"
+                  }
+                },
+                "submenu": {
+                  "box-shadow": {
+                    "value": "{elevation.shadow.1.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "elevation"
+                    }
+                  },
+                  "radius": {
+                    "value": "{radius.none.value} {radius.sm.value} {radius.sm.value} {radius.none.value}",
+                    "type": "radius",
+                    "attributes": {
+                      "subtype": "radius"
+                    }
+                  }
+                },
+                "item": {
+                  "anchor-display": {
+                    "value": "block",
+                    "type": "font",
+                    "attributes": {
+                      "subtype": "font-family"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}