Textbox

Variables

--grn-textbox-height-m
--grn-textbox-paddingX-m
--grn-textbox-radius-m
--grn-textbox-textSize-m

--grn-textbox-height-s
--grn-textbox-paddingX-s
--grn-textbox-radius-s
--grn-textbox-textSize-s

Sizes

    <Arrange gap="s">        
      <Flex
        height="var(--grn-textbox-height-m)"
        paddingX="var(--grn-textbox-paddingX-m)"
        radius="var(--grn-textbox-radius-m)"
        backgroundColor="fade2"
        width="fit-content"
        alignContent="center"
      >
        <Text size="var(--grn-textbox-textSize-m)">
          Textbox
        </Text>
      </Flex>

      <Flex
        height="var(--grn-textbox-height-s)"
        paddingX="var(--grn-textbox-paddingX-s)"
        radius="var(--grn-textbox-radius-s)"
        backgroundColor="fade2"
        width="fit-content"
        alignContent="center"
      >
        <Text size="var(--grn-textbox-textSize-s)">
          Textbox
        </Text>
      </Flex>
    </Arrange>

Nested

When the small textbox is nested inside of the medium textbox, apply left and right padding, same amount that it has on top and bottom.

    <Stack gap="m">
      <Flex
        height="var(--grn-textbox-height-m)"
        paddingX="calc((var(--grn-textbox-height-m) - var(--grn-textbox-height-s)) / 2)"
        radius="var(--grn-textbox-radius-m)"
        backgroundColor="fade1"
        alignContent="center"
        gap="xs"
      >
        {['One', 'Two', 'Three'].map((item) => (
          <Flex
            key={item}
            height="var(--grn-textbox-height-s)"
            paddingX="var(--grn-textbox-paddingX-s)"
            radius="var(--grn-textbox-radius-s)"
            backgroundColor="background"
            width="fit-content"
            alignContent="center"
          >
            <Text size="var(--grn-textbox-textSize-s)">
              {item}
            </Text>
          </Flex>
        ))}
      </Flex>

      <Flex
        minHeight="var(--grn-textbox-height-m)"
        padding="calc((var(--grn-textbox-height-m) - var(--grn-textbox-height-s) - 2px) / 2)"
        radius="var(--grn-textbox-radius-m)"
        alignContent="center"
        gap="xs"
        borderSide="all"
      >
        {numerals.map((item) => (
          <Flex
            key={item}
            height="var(--grn-textbox-height-s)"
            paddingX="var(--grn-textbox-paddingX-s)"
            radius="var(--grn-textbox-radius-s)"
            backgroundColor="fade1"
            width="fit-content"
            alignContent="center"
          >
            <Text size="var(--grn-textbox-textSize-s)">
              {item}
            </Text>
          </Flex>
        ))}
      </Flex>
    </Stack>