-- import: lib
-- import: conditional-attributes as ca

-- ftd.color yellow: yellow
dark: yellow

-- ftd.color red: red
dark: red

-- ftd.color green: green
dark: green

-- ftd.color blue: blue
dark: blue

-- ftd.color purple: purple
dark: purple

-- ftd.color pink: pink
dark: pink

-- ftd.color orange-color: orange
dark: orange

-- boolean orange: true

-- string name: AmitU

-- boolean dark-mode: true

-- ftd.text m1: Markup

-- ftd.column:
width: fill

-- ftd.text:
background-color: $yellow
margin-bottom: 20

Now {ca.foo: {hello: Hello {underline1: AmitU}} world. {hello} **Greetings** {underline1} {amit} Amit Upadhyay} Outside
{md: {hello:Hello}}
{yet}
{m1}

{hello: Everyone should say **Hi** to each other}

--- ftd.text hello: $lib.amitu.name
color: $red

--- ftd.text underline1:
background-color if $orange: $orange-color
$on-click$: toggle $orange



-- col:



-- ftd.column col:

--- ftd.text: 1

--- yet:




-- ftd.column:

--- ftd.text: 2

--- yet:

--- ftd.text: 3

-- md:

hello world says

hello again

--- ftd.text bar:


-- md yet:

Now {hello: Hello {underline: Amitu}} world. {hello} **Greetings** {underline}

- hello1
- hello2
  - hello3
  - hello4
- hello5

The above is the list printing.
This checks if everything is **alright**.
{purple: Check this purple text for instance}

--- ftd.text purple: Purple
color: $purple


-- md: India

-- ftd.text md:
background-color: $green
caption or body value:
text: $value
color: $blue
color if $dark-mode: $yellow
margin-bottom: 40

--- ftd.text hello: Someone
$on-click$: toggle $dark-mode

--- ftd.text underline:
background-color: $orange-color



-- ftd.text amit: $text
caption text:
background-color: $pink