@altruist03/ui 0.0.0-stage → 0.2.0

package/src/tokens/semantic/size.json

@@ -0,0 +1,722 @@
+{
+  "size": {
+    "xs": {
+      "mobile": {
+        "height": "{size.28}",
+        "width": "{size.28}",
+        "paddingX": "{spacing.1}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}"
+      },
+      "tablet": {
+        "height": "{size.28}",
+        "width": "{size.28}",
+        "paddingX": "{spacing.1}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}"
+      },
+      "desktop": {
+        "height": "{size.28}",
+        "width": "{size.28}",
+        "paddingX": "{spacing.1}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}"
+      },
+      "wide": {
+        "height": "{size.28}",
+        "width": "{size.28}",
+        "paddingX": "{spacing.1}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}"
+      }
+    },
+
+    "sm": {
+      "mobile": {
+        "height": "{size.28}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}",
+        "otpWidth": "{size.32}"
+      },
+      "tablet": {
+        "height": "{size.30}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}",
+        "otpWidth": "{size.32}"
+      },
+      "desktop": {
+        "height": "{size.32}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}",
+        "otpWidth": "{size.32}"
+      },
+      "wide": {
+        "height": "{size.32}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}",
+        "otpWidth": "{size.32}"
+      }
+    },
+
+    "md": {
+      "mobile": {
+        "height": "{size.34}",
+        "paddingX": "{spacing.3}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.medium.fontSize}",
+        "radius": "{radius.md}",
+        "otpWidth": "{size.40}"
+      },
+      "tablet": {
+        "height": "{size.36}",
+        "paddingX": "{spacing.3}",
+        "paddingY": "{spacing.1}",
+        "fontSize": "{typography.body.medium.fontSize}",
+        "radius": "{radius.md}",
+        "otpWidth": "{size.40}"
+      },
+      "desktop": {
+        "height": "{size.40}",
+        "paddingX": "{spacing.4}",
+        "paddingY": "{spacing.2}",
+        "fontSize": "{typography.body.medium.fontSize}",
+        "radius": "{radius.md}",
+        "otpWidth": "{size.40}"
+      },
+      "wide": {
+        "height": "{size.40}",
+        "paddingX": "{spacing.4}",
+        "paddingY": "{spacing.2}",
+        "fontSize": "{typography.body.medium.fontSize}",
+        "radius": "{radius.md}",
+        "otpWidth": "{size.40}"
+      }
+    },
+
+    "lg": {
+      "mobile": {
+        "height": "{spacing.8}",
+        "paddingX": "{spacing.3}",
+        "paddingY": "{spacing.2}",
+        "fontSize": "{typography.body.large.fontSize}",
+        "radius": "{radius.lg}",
+        "otpWidth": "{spacing.9}"
+      },
+      "tablet": {
+        "height": "{spacing.9}",
+        "paddingX": "{spacing.4}",
+        "paddingY": "{spacing.2}",
+        "fontSize": "{typography.body.large.fontSize}",
+        "radius": "{radius.lg}",
+        "otpWidth": "{spacing.9}"
+      },
+      "desktop": {
+        "height": "{spacing.9}",
+        "paddingX": "{spacing.4}",
+        "paddingY": "{spacing.2}",
+        "fontSize": "{typography.body.large.fontSize}",
+        "radius": "{radius.lg}",
+        "otpWidth": "{spacing.9}"
+      },
+      "wide": {
+        "height": "{spacing.9}",
+        "paddingX": "{spacing.4}",
+        "paddingY": "{spacing.3}",
+        "fontSize": "{typography.body.large.fontSize}",
+        "radius": "{radius.lg}",
+        "otpWidth": "{spacing.9}"
+      }
+    },
+
+    "control": {
+      "radius": "{radius.control}"
+    },
+
+    "menu": {
+      "mobile": {
+        "minWidth": "{size.180}",
+        "listMaxHeight": "{size.320}"
+      },
+      "tablet": {
+        "minWidth": "{size.180}",
+        "listMaxHeight": "{size.320}"
+      },
+      "desktop": {
+        "minWidth": "{size.180}",
+        "listMaxHeight": "{size.320}"
+      },
+      "wide": {
+        "minWidth": "{size.180}",
+        "listMaxHeight": "{size.320}"
+      }
+    },
+
+    "radio": {
+      "sm": {
+        "mobile": {
+          "radioSize": "{size.16}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.small.fontSize}",
+          "headingFontSize": "{typography.label.small.fontSize}"
+        },
+        "tablet": {
+          "radioSize": "{size.16}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.small.fontSize}",
+          "headingFontSize": "{typography.label.small.fontSize}"
+        },
+        "desktop": {
+          "radioSize": "{size.16}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.small.fontSize}",
+          "headingFontSize": "{typography.label.small.fontSize}"
+        },
+        "wide": {
+          "radioSize": "{size.16}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.small.fontSize}",
+          "headingFontSize": "{typography.label.small.fontSize}"
+        }
+      },
+      "md": {
+        "mobile": {
+          "radioSize": "{size.20}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.medium.fontSize}",
+          "headingFontSize": "{typography.label.medium.fontSize}"
+        },
+        "tablet": {
+          "radioSize": "{size.20}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.medium.fontSize}",
+          "headingFontSize": "{typography.label.medium.fontSize}"
+        },
+        "desktop": {
+          "radioSize": "{size.20}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.medium.fontSize}",
+          "headingFontSize": "{typography.label.medium.fontSize}"
+        },
+        "wide": {
+          "radioSize": "{size.20}",
+          "dotSize": "{size.8}",
+          "labelFontSize": "{typography.body.medium.fontSize}",
+          "headingFontSize": "{typography.label.medium.fontSize}"
+        }
+      },
+      "lg": {
+        "mobile": {
+          "radioSize": "{size.24}",
+          "dotSize": "{size.15}",
+          "labelFontSize": "{typography.body.large.fontSize}",
+          "headingFontSize": "{typography.label.large.fontSize}",
+          "descriptionFontSize": "{typography.body.sm.fontSize}"
+        },
+        "tablet": {
+          "radioSize": "{size.24}",
+          "dotSize": "{size.15}",
+          "labelFontSize": "{typography.body.large.fontSize}",
+          "headingFontSize": "{typography.label.large.fontSize}",
+          "descriptionFontSize": "{typography.body.sm.fontSize}"
+        },
+        "desktop": {
+          "radioSize": "{size.24}",
+          "dotSize": "{size.15}",
+          "labelFontSize": "{typography.body.large.fontSize}",
+          "headingFontSize": "{typography.label.large.fontSize}",
+          "descriptionFontSize": "{typography.body.medium.fontSize}"
+        },
+        "wide": {
+          "radioSize": "{size.24}",
+          "dotSize": "{size.15}",
+          "labelFontSize": "{typography.body.large.fontSize}",
+          "headingFontSize": "{typography.label.large.fontSize}",
+          "descriptionFontSize": "{typography.body.medium.fontSize}"
+        }
+      }
+    },
+
+    "closebutton": {
+      "xs": {
+        "mobile": {
+          "size": "{size.20}",
+          "padding": "{spacing.1}",
+          "iconSize": "{typography.fontSize.xs}",
+          "borderRadius": "{radius.full}"
+        },
+        "tablet": {
+          "size": "{size.20}",
+          "padding": "{spacing.1}",
+          "iconSize": "{typography.fontSize.xs}",
+          "borderRadius": "{radius.full}"
+        },
+        "desktop": {
+          "size": "{size.20}",
+          "padding": "{spacing.1}",
+          "iconSize": "{typography.fontSize.xs}",
+          "borderRadius": "{radius.full}"
+        },
+        "wide": {
+          "size": "{size.20}",
+          "padding": "{spacing.1}",
+          "iconSize": "{typography.fontSize.xs}",
+          "borderRadius": "{radius.full}"
+        }
+      },
+      "sm": {
+        "mobile": {
+          "size": "{size.24}",
+          "padding": "{spacing.1_25}",
+          "iconSize": "{typography.fontSize.sm}",
+          "borderRadius": "{radius.full}"
+        },
+        "tablet": {
+          "size": "{size.24}",
+          "padding": "{spacing.1_25}",
+          "iconSize": "{typography.fontSize.sm}",
+          "borderRadius": "{radius.full}"
+        },
+        "desktop": {
+          "size": "{size.24}",
+          "padding": "{spacing.1_25}",
+          "iconSize": "{typography.fontSize.sm}",
+          "borderRadius": "{radius.full}"
+        },
+        "wide": {
+          "size": "{size.24}",
+          "padding": "{spacing.1_25}",
+          "iconSize": "{typography.fontSize.sm}",
+          "borderRadius": "{radius.full}"
+        }
+      },
+      "md": {
+        "mobile": {
+          "size": "{size.28}",
+          "padding": "{spacing.1_5}",
+          "iconSize": "{typography.fontSize.md}",
+          "borderRadius": "{radius.full}"
+        },
+        "tablet": {
+          "size": "{size.28}",
+          "padding": "{spacing.1_5}",
+          "iconSize": "{typography.fontSize.md}",
+          "borderRadius": "{radius.full}"
+        },
+        "desktop": {
+          "size": "{size.28}",
+          "padding": "{spacing.1_5}",
+          "iconSize": "{typography.fontSize.md}",
+          "borderRadius": "{radius.full}"
+        },
+        "wide": {
+          "size": "{size.28}",
+          "padding": "{spacing.1_5}",
+          "iconSize": "{typography.fontSize.md}",
+          "borderRadius": "{radius.full}"
+        }
+      },
+      "lg": {
+        "mobile": {
+          "size": "{size.32}",
+          "padding": "{spacing.1_75}",
+          "iconSize": "{typography.fontSize.lg}",
+          "borderRadius": "{radius.full}"
+        },
+        "tablet": {
+          "size": "{size.32}",
+          "padding": "{spacing.1_75}",
+          "iconSize": "{typography.fontSize.lg}",
+          "borderRadius": "{radius.full}"
+        },
+        "desktop": {
+          "size": "{size.32}",
+          "padding": "{spacing.1_75}",
+          "iconSize": "{typography.fontSize.lg}",
+          "borderRadius": "{radius.full}"
+        },
+        "wide": {
+          "size": "{size.32}",
+          "padding": "{spacing.1_75}",
+          "iconSize": "{typography.fontSize.lg}",
+          "borderRadius": "{radius.full}"
+        }
+      }
+    },
+
+    "avatar": {
+      "xs": {
+        "mobile": {
+          "size": "{size.20}",
+          "fontSize": "{typography.body.xsmall.fontSize}",
+          "iconSize": "{typography.body.xsmall.fontSize}"
+        },
+        "tablet": {
+          "size": "{size.20}",
+          "fontSize": "{typography.body.xsmall.fontSize}",
+          "iconSize": "{typography.body.xsmall.fontSize}"
+        },
+        "desktop": {
+          "size": "{size.20}",
+          "fontSize": "{typography.body.xsmall.fontSize}",
+          "iconSize": "{typography.body.xsmall.fontSize}"
+        },
+        "wide": {
+          "size": "{size.20}",
+          "fontSize": "{typography.body.xsmall.fontSize}",
+          "iconSize": "{typography.body.xsmall.fontSize}"
+        }
+      },
+      "sm": {
+        "mobile": {
+          "size": "{size.28}",
+          "fontSize": "{typography.body.small.fontSize}",
+          "iconSize": "{typography.body.small.fontSize}"
+        },
+        "tablet": {
+          "size": "{size.28}",
+          "fontSize": "{typography.body.small.fontSize}",
+          "iconSize": "{typography.body.small.fontSize}"
+        },
+        "desktop": {
+          "size": "{size.28}",
+          "fontSize": "{typography.body.small.fontSize}",
+          "iconSize": "{typography.body.small.fontSize}"
+        },
+        "wide": {
+          "size": "{size.28}",
+          "fontSize": "{typography.body.small.fontSize}",
+          "iconSize": "{typography.body.small.fontSize}"
+        }
+      },
+      "md": {
+        "mobile": {
+          "size": "{size.36}",
+          "fontSize": "{typography.body.medium.fontSize}",
+          "iconSize": "{typography.body.medium.fontSize}"
+        },
+        "tablet": {
+          "size": "{size.36}",
+          "fontSize": "{typography.body.medium.fontSize}",
+          "iconSize": "{typography.body.medium.fontSize}"
+        },
+        "desktop": {
+          "size": "{size.36}",
+          "fontSize": "{typography.body.medium.fontSize}",
+          "iconSize": "{typography.body.medium.fontSize}"
+        },
+        "wide": {
+          "size": "{size.36}",
+          "fontSize": "{typography.body.medium.fontSize}",
+          "iconSize": "{typography.body.medium.fontSize}"
+        }
+      },
+      "lg": {
+        "mobile": {
+          "size": "{size.44}",
+          "fontSize": "{typography.body.large.fontSize}",
+          "iconSize": "{typography.body.large.fontSize}"
+        },
+        "tablet": {
+          "size": "{size.44}",
+          "fontSize": "{typography.body.large.fontSize}",
+          "iconSize": "{typography.body.large.fontSize}"
+        },
+        "desktop": {
+          "size": "{size.44}",
+          "fontSize": "{typography.body.large.fontSize}",
+          "iconSize": "{typography.body.large.fontSize}"
+        },
+        "wide": {
+          "size": "{size.44}",
+          "fontSize": "{typography.body.large.fontSize}",
+          "iconSize": "{typography.body.large.fontSize}"
+        }
+      },
+      "xl": {
+        "mobile": {
+          "size": "{size.60}",
+          "fontSize": "{typography.heading.h4.fontSize}",
+          "iconSize": "{typography.heading.h4.fontSize}"
+        },
+        "tablet": {
+          "size": "{size.60}",
+          "fontSize": "{typography.heading.h4.fontSize}",
+          "iconSize": "{typography.heading.h4.fontSize}"
+        },
+        "desktop": {
+          "size": "{size.60}",
+          "fontSize": "{typography.heading.h4.fontSize}",
+          "iconSize": "{typography.heading.h4.fontSize}"
+        },
+        "wide": {
+          "size": "{size.60}",
+          "fontSize": "{typography.heading.h4.fontSize}",
+          "iconSize": "{typography.heading.h4.fontSize}"
+        }
+      },
+      "xxl": {
+        "mobile": {
+          "size": "{size.76}",
+          "fontSize": "{typography.heading.h3.fontSize}",
+          "iconSize": "{typography.heading.h3.fontSize}"
+        },
+        "tablet": {
+          "size": "{size.76}",
+          "fontSize": "{typography.heading.h3.fontSize}",
+          "iconSize": "{typography.heading.h3.fontSize}"
+        },
+        "desktop": {
+          "size": "{size.76}",
+          "fontSize": "{typography.heading.h3.fontSize}",
+          "iconSize": "{typography.heading.h3.fontSize}"
+        },
+        "wide": {
+          "size": "{size.76}",
+          "fontSize": "{typography.heading.h3.fontSize}",
+          "iconSize": "{typography.heading.h3.fontSize}"
+        }
+      },
+      "xxxl": {
+        "mobile": {
+          "size": "{size.116}",
+          "fontSize": "{typography.heading.h2.fontSize}",
+          "iconSize": "{typography.heading.h2.fontSize}"
+        },
+        "tablet": {
+          "size": "{size.116}",
+          "fontSize": "{typography.heading.h2.fontSize}",
+          "iconSize": "{typography.heading.h2.fontSize}"
+        },
+        "desktop": {
+          "size": "{size.116}",
+          "fontSize": "{typography.heading.h2.fontSize}",
+          "iconSize": "{typography.heading.h2.fontSize}"
+        },
+        "wide": {
+          "size": "{size.116}",
+          "fontSize": "{typography.heading.h2.fontSize}",
+          "iconSize": "{typography.heading.h2.fontSize}"
+        }
+      }
+    },
+
+    "toggleButton": {
+      "mobile": {
+        "height": "{size.32}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.2}",
+        "radius": "{radius.lg}",
+        "borderWidth": "{size.1}"
+      },
+      "tablet": {
+        "height": "{size.32}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.2}",
+        "radius": "{radius.lg}",
+        "borderWidth": "{size.1}"
+      },
+      "desktop": {
+        "height": "{size.32}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.2}",
+        "radius": "{radius.lg}",
+        "borderWidth": "{size.1}"
+      },
+      "wide": {
+        "height": "{size.32}",
+        "paddingX": "{spacing.2}",
+        "paddingY": "{spacing.2}",
+        "radius": "{radius.lg}",
+        "borderWidth": "{size.1}"
+      }
+    },
+
+    "switch": {
+      "sm": {
+        "mobile": {
+          "width": "{size.44}",
+          "height": "{size.28}",
+          "thumbSize": "{size.24}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "tablet": {
+          "width": "{size.44}",
+          "height": "{size.28}",
+          "thumbSize": "{size.24}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "desktop": {
+          "width": "{size.44}",
+          "height": "{size.28}",
+          "thumbSize": "{size.24}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "wide": {
+          "width": "{size.44}",
+          "height": "{size.28}",
+          "thumbSize": "{size.24}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        }
+      },
+      "md": {
+        "mobile": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "tablet": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "desktop": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "wide": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        }
+      },
+      "lg": {
+        "mobile": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "tablet": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "desktop": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        },
+        "wide": {
+          "width": "{size.52}",
+          "height": "{size.32}",
+          "thumbSize": "{size.28}",
+          "trackPadding": "{spacing.xxs}",
+          "radius": "{radius.full}",
+          "borderWidth": "{size.1}"
+        }
+      }
+    },
+
+    "tabs": {
+      "sm": {
+        "height": "{size.28}",
+        "padding": "{spacing.2} {spacing.1}",
+        "fontSize": "{typography.body.small.fontSize}",
+        "radius": "{radius.sm}"
+      },
+      "md": {
+        "height": "{size.36}",
+        "padding": "{spacing.3} {spacing.1}",
+        "fontSize": "{typography.body.medium.fontSize}",
+        "radius": "{radius.md}"
+      },
+      "lg": {
+        "height": "{size.44}",
+        "padding": "{spacing.3} {spacing.6}",
+        "fontSize": "{typography.body.large.fontSize}",
+        "radius": "{radius.lg}"
+      }
+    },
+
+    "filterpopover": {
+      "mobile": {
+        "minWidth": "{size.320}",
+        "minHeight": "{size.1}",
+        "maxHeight": "{size.60vh}",
+        "padding": "{spacing.3}",
+        "borderRadius": "{radius.xl}",
+        "innerBorderRadius": "{radius.xl} {radius.xl} {radius.none} {radius.none}"
+      },
+      "tablet": {
+        "minWidth": "{size.380}",
+        "minHeight": "{size.1}",
+        "maxHeight": "{size.60vh}",
+        "padding": "{spacing.4}",
+        "borderRadius": "{radius.2xl}",
+        "innerBorderRadius": "{radius.2xl} {radius.2xl} {radius.none} {radius.none}"
+      },
+      "desktop": {
+        "minWidth": "{size.380}",
+        "minHeight": "{size.1}",
+        "maxHeight": "{size.60vh}",
+        "padding": "{spacing.4}",
+        "borderRadius": "{radius.2xl}",
+        "innerBorderRadius": "{radius.2xl} {radius.2xl} {radius.none} {radius.none}"
+      },
+      "wide": {
+        "minWidth": "{size.380}",
+        "minHeight": "{size.1}",
+        "maxHeight": "{size.60vh}",
+        "padding": "{spacing.4}",
+        "borderRadius": "{radius.2xl}",
+        "innerBorderRadius": "{radius.2xl} {radius.2xl} {radius.none} {radius.none}"
+      }
+    },
+
+    "modal": {
+      "sm": {
+        "mobile": { "width": "100%" },
+        "tablet": { "width": "100%" },
+        "desktop": { "width": "{size.550}" },
+        "wide": { "width": "{size.550}" }
+      },
+      "lg": {
+        "mobile": { "width": "100%" },
+        "tablet": { "width": "100%" },
+        "desktop": { "width": "{size.1200}" },
+        "wide": { "width": "{size.1200}" }
+      }
+    }
+  }
+}