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

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

@@ -0,0 +1,371 @@
+{
+  "card": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-card"
+        }
+      },
+      "appearances": {
+        "default": {
+          "mapping": {
+            "selector": {
+              "web": ".app-card.card-default"
+            }
+          }
+        },
+        "filled": {
+          "mapping": {
+            "selector": {
+              "web": ".app-card.card-filled"
+            }
+          }
+        },
+        "elevated": {
+          "mapping": {
+            "selector": {
+              "web": ".app-card.card-elevated"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "border": {
+        "width": {
+          "value": "{border.width.base.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "border-width",
+            "description": "Controls the border width of cards.<br>CSS variable: --wm-card-border-width"
+          }
+        },
+        "style": {
+          "value": "{border.style.base.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "border-style",
+            "description": "Controls the border style of cards. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-border-style"
+          }
+        },
+        "color": {
+          "value": "{color.outline.variant.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the border color of cards.<br>CSS variable: --wm-card-border-color"
+          }
+        },
+        "radius": {
+          "value": "{radius.md.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the border radius of cards.<br>CSS variable: --wm-card-border-radius"
+          }
+        }
+      },
+      "list": {
+        "gap": {
+          "value": "{space.4.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls spacing between card list items.<br>CSS variable: --wm-card-list-gap"
+          }
+        }
+      },
+      "background": {
+        "value": "{color.surface.@.value}",
+        "type": "color",
+        "attributes": {
+          "subtype": "color",
+          "description": "Sets the background color of cards.<br>CSS variable: --wm-card-background"
+        }
+      },
+      "shadow": {
+        "value": "none",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation",
+          "description": "Controls the box shadow of cards.<br>CSS variable: --wm-card-shadow"
+        }
+      },
+      "state": {
+        "layer": {
+          "color": {
+            "value": "{color.on-surface.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the color of card state layers.<br>CSS variable: --wm-card-state-layer-color"
+            }
+          },
+          "opacity": {
+            "value": "0",
+            "type": "radius",
+            "attributes": {
+              "subtype": "opacity",
+              "description": "Controls the opacity of card state layers.<br>CSS variable: --wm-card-state-layer-opacity"
+            }
+          }
+        }
+      },
+      "body": {
+        "padding": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls padding of card body content.<br>CSS variable: --wm-card-body-padding"
+          }
+        }
+      },
+      "footer": {
+        "padding": {
+          "value": "{space.3.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "excludeFromUI": true,
+            "description": "Controls padding of card footer content.<br>CSS variable: --wm-card-footer-padding"
+          }
+        },
+        "border": {
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space",
+            "attributes": {
+              "excludeFromUI": true,
+              "subtype": "border-width",
+              "description": "Controls the border width of card footers.<br>CSS variable: --wm-card-footer-border-width"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "excludeFromUI": true,
+              "subtype": "border-style",
+              "description": "Controls the border style of card footers. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-card-footer-border-style"
+            }
+          },
+          "color": {
+            "value": "{color.outline.variant.value}",
+            "type": "color",
+            "attributes": {
+              "excludeFromUI": true,
+              "subtype": "color",
+              "description": "Sets the border color of card footers.<br>CSS variable: --wm-card-footer-border-color"
+            }
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "value": "{opacity.hover.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "opacity"
+                }
+              }
+            }
+          },
+          "shadow": {
+            "value": "{elevation.shadow.1.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation"
+            }
+          }
+        },
+        "focus": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "value": "{opacity.focus.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "opacity"
+                }
+              }
+            }
+          },
+          "shadow": {
+            "value": "none",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation"
+            }
+          }
+        },
+        "active": {
+          "state": {
+            "layer": {
+              "opacity": {
+                "value": "{opacity.active.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "opacity"
+                }
+              }
+            }
+          },
+          "shadow": {
+            "value": "none",
+            "type": "radius",
+            "attributes": {
+              "subtype": "elevation"
+            }
+          }
+        }
+      }
+    },
+    "appearances": {
+      "default": {
+        "mapping": {
+          "border": {
+            "width": {
+              "value": "{border.width.base.value}",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            },
+            "style": {
+              "value": "{border.style.base.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "border-style"
+              }
+            },
+            "color": {
+              "value": "{color.outline.variant.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+              }
+            },
+            "radius": {
+              "value": "{radius.md.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "radius"
+              }
+            }
+          }
+        }
+      },
+      "filled": {
+        "mapping": {
+          "border": {
+            "width": {
+              "value": "0",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            }
+          },
+          "background": {
+              "value": "{color.surface.bright.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color"
+            }
+          },
+          "shadow": {
+              "value": "none",
+              "type": "radius",
+              "attributes": {
+                "subtype": "elevation"
+            }
+          },
+          "states": {
+            "hover": {
+              "shadow": {
+                "value": "{elevation.shadow.1.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "elevation"
+                }
+              }
+            },
+            "focus": {
+              "shadow": {
+                "value": "{elevation.shadow.1.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "elevation"
+                }
+              }
+            },
+            "active": {
+              "shadow": {
+                "value": "{elevation.shadow.1.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "elevation"
+                }
+              }
+            }
+          }
+        },
+        "variantGroups": {}
+      },
+      "elevated": {
+        "mapping": {
+          "border": {
+            "width": {
+              "value": "0",
+              "type": "space",
+              "attributes": {
+                "subtype": "border-width"
+              }
+            }
+          },
+          "shadow": {
+              "value": "{elevation.shadow.1.value}",
+              "type": "radius",
+              "attributes": {
+                "subtype": "elevation"
+              }
+          },
+          "states": {
+            "hover": {
+              "shadow": {
+                "value": "{elevation.shadow.2.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "elevation"
+                }
+              }
+            },
+            "focus": {
+              "shadow": {
+                "value": "{elevation.shadow.1.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "elevation"
+                }
+              }
+            },
+            "active": {
+              "shadow": {
+                "value": "{elevation.shadow.1.value}",
+                "type": "radius",
+                "attributes": {
+                  "subtype": "elevation"
+                }
+              }
+            }
+          }
+        },
+        "variantGroups": {}
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| indicators.border.@ | Sets the border color of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel.<br>CSS variable: --wm-carousel-indicators-border |
+| indicators.border.style | Controls the border style of carousel indicators. Acceptable values: solid, dashed, dotted, none. This affects the outline appearance of the navigation dots.<br>CSS variable: --wm-carousel-indicators-border-style |
+| indicators.border.width | Controls the thickness of the border around carousel indicators. This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-indicators-border-width |
+| indicators.radius | Controls the corner rounding of carousel indicators. When set to circle, the indicators appear as perfect round dots. Other values create rounded rectangles.<br>CSS variable: --wm-carousel-indicators-radius |
+| indicators.background | Sets the background color of carousel indicators (the navigation dots). When transparent, only the border is visible. When filled, the dot appears solid.<br>CSS variable: --wm-carousel-indicators-background |
+| indicators.size | Controls the diameter of carousel indicators (the navigation dots). Larger values make the dots more prominent and easier to click. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-indicators-size |
+| indicators.gap | Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-indicators-gap |
+| indicators.margin | Controls the outer margin around each carousel indicator. This creates additional space around each navigation dot, affecting the overall spacing and clickable area.<br>CSS variable: --wm-carousel-indicators-margin |
+| control.icon.font.size | Controls the size of carousel navigation arrow icons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to click. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-control-icon-font-size |
+| caption.padding.top | Controls the top padding (vertical spacing) inside the carousel caption area. This creates breathing room above the caption text that appears as an overlay on carousel slides. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-caption-padding-top |
+| caption.padding.bottom | Controls the bottom padding (vertical spacing) inside the carousel caption area. This creates breathing room below the caption text that appears as an overlay on carousel slides. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-caption-padding-bottom |
+| caption.color | Sets the text color of carousel captions (the text overlay that appears on top of carousel slides). This is typically white or a light color to ensure good contrast against dark slide backgrounds.<br>CSS variable: --wm-carousel-caption-color |

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

@@ -0,0 +1,160 @@
+{
+  "carousel": {
+    "meta": {
+      "mapping": {
+        "selector": {
+          "web": ".app-carousel"
+        },
+        "states": {
+          "active": {
+            "selector": {
+              "web": " .carousel-indicators li.active"
+            }
+          }
+        }
+      }
+    },
+    "mapping": {
+      "indicators": {
+        "border": {
+          "@": {
+            "value": "{color.primary.container.@.value}",
+            "type": "color",
+            "attributes": {
+              "subtype": "color",
+              "description": "Sets the border color of carousel indicators (the small dots at the bottom that show which slide is active). These dots help users navigate between different slides in the carousel.<br>CSS variable: --wm-carousel-indicators-border"
+            }
+          },
+          "style": {
+            "value": "{border.style.base.value}",
+            "type": "radius",
+            "attributes": {
+              "subtype": "border-style",
+              "description": "Controls the border style of carousel indicators. Acceptable values: solid, dashed, dotted, none. This affects the outline appearance of the navigation dots.<br>CSS variable: --wm-carousel-indicators-border-style"
+            }
+          },
+          "width": {
+            "value": "{border.width.base.value}",
+            "type": "space",
+            "attributes": {
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around carousel indicators. This creates the outline effect around each navigation dot.<br>CSS variable: --wm-carousel-indicators-border-width"
+            }
+          }
+        },
+        "radius": {
+          "value": "{radius.circle.value}",
+          "type": "radius",
+          "attributes": {
+            "subtype": "radius",
+            "description": "Controls the corner rounding of carousel indicators. When set to circle, the indicators appear as perfect round dots. Other values create rounded rectangles.<br>CSS variable: --wm-carousel-indicators-radius"
+          }
+        },
+        "background": {
+          "value": "{color.transparent.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the background color of carousel indicators (the navigation dots). When transparent, only the border is visible. When filled, the dot appears solid.<br>CSS variable: --wm-carousel-indicators-background"
+          }
+        },
+        "size": {
+          "value": "10px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the diameter of carousel indicators (the navigation dots). Larger values make the dots more prominent and easier to click. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-indicators-size"
+          }
+        },
+        "gap": {
+          "value": "{space.2.value}",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the horizontal spacing between individual carousel indicators (navigation dots). This creates visual separation between each dot so users can easily distinguish between them.<br>CSS variable: --wm-carousel-indicators-gap"
+          }
+        },
+        "margin": {
+          "value": "1px",
+          "type": "space",
+          "attributes": {
+            "subtype": "space",
+            "description": "Controls the outer margin around each carousel indicator. This creates additional space around each navigation dot, affecting the overall spacing and clickable area.<br>CSS variable: --wm-carousel-indicators-margin"
+          }
+        }
+      },
+      "control": {
+        "icon": {
+          "font": {
+            "size": {
+              "value": "48px",
+              "type": "space",
+              "attributes": {
+                "subtype": "icon-size",
+                "description": "Controls the size of carousel navigation arrow icons (left/right arrows that allow users to manually navigate between slides). Larger values make the arrows more prominent and easier to click. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-control-icon-font-size"
+              }
+            }
+          }
+        }
+      },
+      "caption": {
+        "padding": {
+          "top": {
+            "value": "20px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the top padding (vertical spacing) inside the carousel caption area. This creates breathing room above the caption text that appears as an overlay on carousel slides. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-caption-padding-top"
+            }
+          },
+          "bottom": {
+            "value": "30px",
+            "type": "space",
+            "attributes": {
+              "subtype": "space",
+              "description": "Controls the bottom padding (vertical spacing) inside the carousel caption area. This creates breathing room below the caption text that appears as an overlay on carousel slides. Acceptable units: px, em, rem.<br>CSS variable: --wm-carousel-caption-padding-bottom"
+            }
+          }
+        },
+        "color": {
+          "value": "{color.white.@.value}",
+          "type": "color",
+          "attributes": {
+            "subtype": "color",
+            "description": "Sets the text color of carousel captions (the text overlay that appears on top of carousel slides). This is typically white or a light color to ensure good contrast against dark slide backgrounds.<br>CSS variable: --wm-carousel-caption-color"
+          }
+        }
+      },
+      "states": {
+        "active": {
+          "indicators": {
+            "background": {
+              "value": "{color.primary.container.@.value}",
+              "type": "color",
+              "attributes": {
+                "subtype": "color",
+                "description": "Sets the background color of the currently active carousel indicator (the dot representing the slide that is currently being displayed). This creates visual feedback to show users which slide they are viewing.<br>CSS variable: --wm-carousel-indicators-background (active state)"
+              }
+            },
+            "size": {
+              "value": "~\"calc(10px * 1.2)\"",
+              "type": "space",
+              "attributes": {
+                "subtype": "space",
+                "description": "Controls the size of the active carousel indicator. The active dot is typically larger than inactive dots to emphasize which slide is currently being displayed. This creates a visual hierarchy that helps users understand their current position.<br>CSS variable: --wm-carousel-indicators-size (active state)"
+              }
+            },
+            "margin": {
+              "value": "0px",
+              "type": "space",
+              "attributes": {
+                "subtype": "margin",
+                "description": "Controls the outer margin around the active carousel indicator. When set to 0px, the active dot appears flush with other indicators. This affects the overall spacing and visual alignment of the navigation dots.<br>CSS variable: --wm-carousel-indicators-margin (active state)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| gap | Controls the horizontal spacing between the checkbox box (the square input element) and the label text. This creates visual separation so users can easily distinguish between the clickable checkbox and its descriptive text.<br>CSS variable: --wm-checkbox-gap |
+| caption.color | Controls the color of the checkbox label text.<br>CSS variable: --wm-checkbox-caption-color |
+| caption.font-size | Controls the size of the checkbox label text (the descriptive text that appears next to the checkbox). This text explains what the checkbox option represents, such as 'I agree to terms' or 'Subscribe to newsletter'.<br>CSS variable: --wm-checkbox-caption-font-size |
+| caption.font-family | Sets the font family (typeface) for the checkbox label text. This determines the visual style of the text that describes what the checkbox option represents.<br>CSS variable: --wm-checkbox-caption-font-family |
+| caption.font-weight | Controls the thickness/boldness of the checkbox label text. Acceptable values: normal, bold, 100-900. This affects how prominent the descriptive text appears next to the checkbox.<br>CSS variable: --wm-checkbox-caption-font-weight |
+| caption.line-height | Controls the vertical spacing between lines of text in the checkbox label. This is important when the label text wraps to multiple lines, ensuring proper readability.<br>CSS variable: --wm-checkbox-caption-line-height |
+| caption.letter-spacing | Controls the horizontal spacing between individual characters in the checkbox label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-checkbox-caption-letter-spacing |
+| size | Controls the width and height of the checkbox box (the square input element that users click to check/uncheck). This determines how large the actual checkbox appears visually. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-size |
+| icon.size | Controls the size of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it's checked. This icon is typically smaller than the checkbox box itself to fit nicely inside. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-icon-size |
+| icon.color | Sets the color of the checkmark icon (the ✓ symbol) that appears inside the checkbox when it's checked. This is typically a contrasting color to ensure the checkmark is clearly visible against the checkbox background.<br>CSS variable: --wm-checkbox-icon-color |
+| background | Sets the background color of the checkbox box (the square input element). When transparent, only the border is visible. When filled with a color, the checkbox appears solid. This affects the visual appearance of the unchecked state.<br>CSS variable: --wm-checkbox-background |
+| border.width | Controls the thickness of the border around the checkbox box (the square input element). This creates the outline that defines the checkbox shape and makes it visible to users.<br>CSS variable: --wm-checkbox-border-width |
+| border.color | Sets the color of the border around the checkbox box (the square input element). This determines the color of the outline that defines the checkbox shape in its default/unchecked state.<br>CSS variable: --wm-checkbox-border-color |
+| border.radius | Controls the corner rounding of the checkbox box (the square input element). Small values create slightly rounded corners, while larger values make the checkbox more rounded or even circular.<br>CSS variable: --wm-checkbox-border-radius |
+| state.layer.size | Controls the size of the invisible clickable area around the checkbox (the state layer). This area is larger than the visible checkbox box, making it easier for users to click and interact with the checkbox. Acceptable units: px, em, rem.<br>CSS variable: --wm-checkbox-state-layer-size |
+| state.layer.color | Sets the color of the state layer that appears when users hover, focus, or interact with the checkbox. This creates visual feedback to show that the checkbox is interactive and responsive to user actions.<br>CSS variable: --wm-checkbox-state-layer-color |
+| state.layer.opacity | Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-checkbox-state-layer-opacity |