diff --git a/fastn-core/tests/02-hello/output/index.html b/fastn-core/tests/02-hello/output/index.html
index 53d1cf2f09..de293e99c6 100644
--- a/fastn-core/tests/02-hello/output/index.html
+++ b/fastn-core/tests/02-hello/output/index.html
@@ -1511,425 +1511,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/03-nested-document/output/index.html b/fastn-core/tests/03-nested-document/output/index.html
index c5fae237a5..81ed76f01b 100644
--- a/fastn-core/tests/03-nested-document/output/index.html
+++ b/fastn-core/tests/03-nested-document/output/index.html
@@ -1480,425 +1480,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/03-nested-document/output/nested/document/index.html b/fastn-core/tests/03-nested-document/output/nested/document/index.html
index 4982995761..945539bafe 100644
--- a/fastn-core/tests/03-nested-document/output/nested/document/index.html
+++ b/fastn-core/tests/03-nested-document/output/nested/document/index.html
@@ -1480,425 +1480,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/03-nested-document/output/nested/index.html b/fastn-core/tests/03-nested-document/output/nested/index.html
index c348b13b4b..1cd2df201a 100644
--- a/fastn-core/tests/03-nested-document/output/nested/index.html
+++ b/fastn-core/tests/03-nested-document/output/nested/index.html
@@ -1480,425 +1480,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/04-import-code-block/output/index.html b/fastn-core/tests/04-import-code-block/output/index.html
index e9b9ac70cf..e10784a7b9 100644
--- a/fastn-core/tests/04-import-code-block/output/index.html
+++ b/fastn-core/tests/04-import-code-block/output/index.html
@@ -1487,425 +1487,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/04-import-code-block/output/lib/index.html b/fastn-core/tests/04-import-code-block/output/lib/index.html
index c99ed7a975..4e5a7c89e2 100644
--- a/fastn-core/tests/04-import-code-block/output/lib/index.html
+++ b/fastn-core/tests/04-import-code-block/output/lib/index.html
@@ -1480,425 +1480,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/05-hello-font/output/index.html b/fastn-core/tests/05-hello-font/output/index.html
index 3c74f03147..bdd47c5383 100644
--- a/fastn-core/tests/05-hello-font/output/index.html
+++ b/fastn-core/tests/05-hello-font/output/index.html
@@ -1530,425 +1530,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/08-static-assets/output/index.html b/fastn-core/tests/08-static-assets/output/index.html
index c5fae237a5..81ed76f01b 100644
--- a/fastn-core/tests/08-static-assets/output/index.html
+++ b/fastn-core/tests/08-static-assets/output/index.html
@@ -1480,425 +1480,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/09-markdown-pages/output/index.html b/fastn-core/tests/09-markdown-pages/output/index.html
index c5fae237a5..81ed76f01b 100644
--- a/fastn-core/tests/09-markdown-pages/output/index.html
+++ b/fastn-core/tests/09-markdown-pages/output/index.html
@@ -1480,425 +1480,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/11-readme-with-index/output/index.html b/fastn-core/tests/11-readme-with-index/output/index.html
index 72b831e8de..5c2825fb05 100644
--- a/fastn-core/tests/11-readme-with-index/output/index.html
+++ b/fastn-core/tests/11-readme-with-index/output/index.html
@@ -1480,425 +1480,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/15-fpm-dependency-alias/output/index.html b/fastn-core/tests/15-fpm-dependency-alias/output/index.html
index 2f2b2c0dba..a494905657 100644
--- a/fastn-core/tests/15-fpm-dependency-alias/output/index.html
+++ b/fastn-core/tests/15-fpm-dependency-alias/output/index.html
@@ -1486,425 +1486,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/fastn-core/tests/16-include-processor/output/index.html b/fastn-core/tests/16-include-processor/output/index.html
index bee83ebc9c..684fa0197e 100644
--- a/fastn-core/tests/16-include-processor/output/index.html
+++ b/fastn-core/tests/16-include-processor/output/index.html
@@ -1481,425 +1481,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/build.js b/ftd/build.js
index 18a2f0c333..f9b22c1b89 100644
--- a/ftd/build.js
+++ b/ftd/build.js
@@ -776,425 +776,6 @@ function download_text(filename, text) {
     link.download = filename;
     link.click();
 }
-function get_color_value(cs, category, color_name) {
-    let category_data = cs[category];
-    let color_data = category_data[color_name];
-    let color_value = color_data['value'];
-    return color_value;
-}
-function styled_body(body) {
-    return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-    var section_type_title = line.replace("-- ", "").replace(":", "");
-    var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-    return result;
-}
-function styled_header(line) {
-    var header_splits = line.split(":");
-    var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-    return result;
-}
-function apply_style(s) {
-    var result = new String();
-    const lines = s.split(/\r\n|\r|\n/);
-    for (var line of lines) {
-        if (line.trim().length == 0) {
-            // Empty line
-            result = result.concat(styled_body(" "));
-        }
-        else if (line.startsWith("--")) {
-            // Section top
-            result = result.concat(styled_section(line));
-        }
-        else if (!line.startsWith("--") && line.includes(":")) {
-            // Header
-            result = result.concat(styled_header(line));
-        }
-        else {
-            // Body
-            result = result.concat(styled_body(line));
-        }
-    }
-    return result;
-}
-function figma_json_to_ftd(json) {
-    const cs_data = JSON.parse(json);
-    let cs_light = Object.keys(cs_data)
-        .filter((key) => key.includes("-light"))
-        .reduce((obj, key) => {
-        obj = cs_data[key];
-        return obj;
-    }, {});
-    let cs_dark = Object.keys(cs_data)
-        .filter((key) => key.includes("-dark"))
-        .reduce((obj, key) => {
-        obj = cs_data[key];
-        return obj;
-    }, {});
-    let s = `
-    -- ftd.color base-:
-    light: ${get_color_value(cs_light, "Background Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
-    -- ftd.color step-1-:
-    light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
-    -- ftd.color step-2-:
-    light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
-    -- ftd.color overlay-:
-    light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
-    -- ftd.color code-:
-    light: ${get_color_value(cs_light, "Background Colors", "code")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
-    -- ftd.background-colors background-:
-    base: $base-
-    step-1: $step-1-
-    step-2: $step-2-
-    overlay: $overlay-
-    code: $code-
-
-    -- ftd.color border-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
-    -- ftd.color border-strong-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
-    -- ftd.color text-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
-    -- ftd.color text-strong-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
-    -- ftd.color shadow-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
-    -- ftd.color scrim-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
-    -- ftd.color cta-primary-base-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
-    -- ftd.color cta-primary-hover-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
-    -- ftd.color cta-primary-pressed-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
-    -- ftd.color cta-primary-disabled-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
-    -- ftd.color cta-primary-focused-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
-    -- ftd.color cta-primary-border-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
-    -- ftd.color cta-primary-text-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
-    -- ftd.cta-colors cta-primary-:
-    base: $cta-primary-base-
-    hover: $cta-primary-hover-
-    pressed: $cta-primary-pressed-
-    disabled: $cta-primary-disabled-
-    focused: $cta-primary-focused-
-    border: $cta-primary-border-
-    text: $cta-primary-text-
-
-    -- ftd.color cta-secondary-base-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
-    -- ftd.color cta-secondary-hover-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
-    -- ftd.color cta-secondary-pressed-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
-    -- ftd.color cta-secondary-disabled-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
-    -- ftd.color cta-secondary-focused-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
-    -- ftd.color cta-secondary-border-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
-    -- ftd.color cta-secondary-text-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
-    -- ftd.cta-colors cta-secondary-:
-    base: $cta-secondary-base-
-    hover: $cta-secondary-hover-
-    pressed: $cta-secondary-pressed-
-    disabled: $cta-secondary-disabled-
-    focused: $cta-secondary-focused-
-    border: $cta-secondary-border-
-    text: $cta-secondary-text-
-
-    -- ftd.color cta-tertiary-base-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
-    -- ftd.color cta-tertiary-hover-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
-    -- ftd.color cta-tertiary-pressed-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
-    -- ftd.color cta-tertiary-disabled-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
-    -- ftd.color cta-tertiary-focused-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
-    -- ftd.color cta-tertiary-border-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
-    -- ftd.color cta-tertiary-text-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
-    -- ftd.cta-colors cta-tertiary-:
-    base: $cta-tertiary-base-
-    hover: $cta-tertiary-hover-
-    pressed: $cta-tertiary-pressed-
-    disabled: $cta-tertiary-disabled-
-    focused: $cta-tertiary-focused-
-    border: $cta-tertiary-border-
-    text: $cta-tertiary-text-
-
-    -- ftd.color cta-danger-base-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
-    -- ftd.color cta-danger-hover-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
-    -- ftd.color cta-danger-pressed-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
-    -- ftd.color cta-danger-disabled-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
-    -- ftd.color cta-danger-focused-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
-    -- ftd.color cta-danger-border-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
-    -- ftd.color cta-danger-text-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
-    -- ftd.cta-colors cta-danger-:
-    base: $cta-danger-base-
-    hover: $cta-danger-hover-
-    pressed: $cta-danger-pressed-
-    disabled: $cta-danger-disabled-
-    focused: $cta-danger-focused-
-    border: $cta-danger-border-
-    text: $cta-danger-text-
-
-    -- ftd.color accent-primary-:
-    light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-    dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
-    -- ftd.color accent-secondary-:
-    light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-    dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
-    -- ftd.color accent-tertiary-:
-    light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-    dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
-    -- ftd.pst accent-:
-    primary: $accent-primary-
-    secondary: $accent-secondary-
-    tertiary: $accent-tertiary-
-
-    -- ftd.color error-base-:
-    light: ${get_color_value(cs_light, "Error Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
-    -- ftd.color error-text-:
-    light: ${get_color_value(cs_light, "Error Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
-    -- ftd.color error-border-:
-    light: ${get_color_value(cs_light, "Error Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
-    -- ftd.btb error-btb-:
-    base: $error-base-
-    text: $error-text-
-    border: $error-border-
-
-    -- ftd.color success-base-:
-    light: ${get_color_value(cs_light, "Success Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
-    -- ftd.color success-text-:
-    light: ${get_color_value(cs_light, "Success Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
-    -- ftd.color success-border-:
-    light: ${get_color_value(cs_light, "Success Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
-    -- ftd.btb success-btb-:
-    base: $success-base-
-    text: $success-text-
-    border: $success-border-
-
-    -- ftd.color info-base-:
-    light: ${get_color_value(cs_light, "Info Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
-    -- ftd.color info-text-:
-    light: ${get_color_value(cs_light, "Info Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
-    -- ftd.color info-border-:
-    light: ${get_color_value(cs_light, "Info Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
-    -- ftd.btb info-btb-:
-    base: $info-base-
-    text: $info-text-
-    border: $info-border-
-
-    -- ftd.color warning-base-:
-    light: ${get_color_value(cs_light, "Warning Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
-    -- ftd.color warning-text-:
-    light: ${get_color_value(cs_light, "Warning Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
-    -- ftd.color warning-border-:
-    light: ${get_color_value(cs_light, "Warning Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
-    -- ftd.btb warning-btb-:
-    base: $warning-base-
-    text: $warning-text-
-    border: $warning-border-
-
-    -- ftd.color custom-one-:
-    light: ${get_color_value(cs_light, "Custom Colors", "one")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
-    -- ftd.color custom-two-:
-    light: ${get_color_value(cs_light, "Custom Colors", "two")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
-    -- ftd.color custom-three-:
-    light: ${get_color_value(cs_light, "Custom Colors", "three")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
-    -- ftd.color custom-four-:
-    light: ${get_color_value(cs_light, "Custom Colors", "four")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
-    -- ftd.color custom-five-:
-    light: ${get_color_value(cs_light, "Custom Colors", "five")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
-    -- ftd.color custom-six-:
-    light: ${get_color_value(cs_light, "Custom Colors", "six")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
-    -- ftd.color custom-seven-:
-    light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
-    -- ftd.color custom-eight-:
-    light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
-    -- ftd.color custom-nine-:
-    light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
-    -- ftd.color custom-ten-:
-    light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
-    -- ftd.custom-colors custom-:
-    one: $custom-one-
-    two: $custom-two-
-    three: $custom-three-
-    four: $custom-four-
-    five: $custom-five-
-    six: $custom-six-
-    seven: $custom-seven-
-    eight: $custom-eight-
-    nine: $custom-nine-
-    ten: $custom-ten-
-
-    -- ftd.color-scheme main:
-    background: $background-
-    border: $border-
-    border-strong: $border-strong-
-    text: $text-
-    text-strong: $text-strong-
-    shadow: $shadow-
-    scrim: $scrim-
-    cta-primary: $cta-primary-
-    cta-secondary: $cta-secondary-
-    cta-tertiary: $cta-tertiary-
-    cta-danger: $cta-danger-
-    accent: $accent-
-    error: $error-btb-
-    success: $success-btb-
-    info: $info-btb-
-    warning: $warning-btb-
-    custom: $custom-
-    `;
-    let fs = `<pre>${apply_style(s)}</pre>`;
-    return [s, fs];
-}
 function len(data) {
     return data.length;
 }
diff --git a/ftd/t/html/1-component.html b/ftd/t/html/1-component.html
index 7ade20a9c5..2fffa7fce2 100644
--- a/ftd/t/html/1-component.html
+++ b/ftd/t/html/1-component.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/10-conditional-properties.html b/ftd/t/html/10-conditional-properties.html
index 654ab134fb..cbbd56e99c 100644
--- a/ftd/t/html/10-conditional-properties.html
+++ b/ftd/t/html/10-conditional-properties.html
@@ -1332,425 +1332,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/11-external-children.html b/ftd/t/html/11-external-children.html
index 066a65dee3..908d4b0217 100644
--- a/ftd/t/html/11-external-children.html
+++ b/ftd/t/html/11-external-children.html
@@ -1334,425 +1334,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/12-conditional-component.html b/ftd/t/html/12-conditional-component.html
index 68951d06a4..6b8c95ea34 100644
--- a/ftd/t/html/12-conditional-component.html
+++ b/ftd/t/html/12-conditional-component.html
@@ -1331,425 +1331,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/13-image.html b/ftd/t/html/13-image.html
index cb14852603..c131c12bca 100644
--- a/ftd/t/html/13-image.html
+++ b/ftd/t/html/13-image.html
@@ -1339,425 +1339,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/14-processor.html b/ftd/t/html/14-processor.html
index 073d1a8804..0eac0a27a4 100644
--- a/ftd/t/html/14-processor.html
+++ b/ftd/t/html/14-processor.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/15-foreign-variable.html b/ftd/t/html/15-foreign-variable.html
index 689762ff39..6232b01208 100644
--- a/ftd/t/html/15-foreign-variable.html
+++ b/ftd/t/html/15-foreign-variable.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/16-or-type.html b/ftd/t/html/16-or-type.html
index 8ff4ff399a..e283bf1935 100644
--- a/ftd/t/html/16-or-type.html
+++ b/ftd/t/html/16-or-type.html
@@ -1332,425 +1332,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/17-record.html b/ftd/t/html/17-record.html
index 2e803d9566..312e9fe18d 100644
--- a/ftd/t/html/17-record.html
+++ b/ftd/t/html/17-record.html
@@ -1338,425 +1338,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/18-styles.html b/ftd/t/html/18-styles.html
index 222a39a570..d5880cbe11 100644
--- a/ftd/t/html/18-styles.html
+++ b/ftd/t/html/18-styles.html
@@ -1331,425 +1331,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/19-complex-styles.html b/ftd/t/html/19-complex-styles.html
index 502767a29a..9dcb815694 100644
--- a/ftd/t/html/19-complex-styles.html
+++ b/ftd/t/html/19-complex-styles.html
@@ -1333,425 +1333,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/2-component.html b/ftd/t/html/2-component.html
index af0620aaba..623d6de63f 100644
--- a/ftd/t/html/2-component.html
+++ b/ftd/t/html/2-component.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/20-link.html b/ftd/t/html/20-link.html
index df68128e7f..35032a7f08 100644
--- a/ftd/t/html/20-link.html
+++ b/ftd/t/html/20-link.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/21-color.html b/ftd/t/html/21-color.html
index 9ee8dc1623..940899770e 100644
--- a/ftd/t/html/21-color.html
+++ b/ftd/t/html/21-color.html
@@ -1337,425 +1337,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/22-test.html b/ftd/t/html/22-test.html
index 570f61ec64..0dbcd3015c 100644
--- a/ftd/t/html/22-test.html
+++ b/ftd/t/html/22-test.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/23-alignment.html b/ftd/t/html/23-alignment.html
index 66a5f3541e..600bb81853 100644
--- a/ftd/t/html/23-alignment.html
+++ b/ftd/t/html/23-alignment.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/23-doc-site.html b/ftd/t/html/23-doc-site.html
index 8edd14cbd6..cd3ee32894 100644
--- a/ftd/t/html/23-doc-site.html
+++ b/ftd/t/html/23-doc-site.html
@@ -1451,425 +1451,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/24-margin.html b/ftd/t/html/24-margin.html
index 398f0b26e8..cd133075fd 100644
--- a/ftd/t/html/24-margin.html
+++ b/ftd/t/html/24-margin.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/25-expander.html b/ftd/t/html/25-expander.html
index 2b0d1a1332..060868ab20 100644
--- a/ftd/t/html/25-expander.html
+++ b/ftd/t/html/25-expander.html
@@ -1338,425 +1338,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/25-overflow.html b/ftd/t/html/25-overflow.html
index 21683210f3..84bbc1c4da 100644
--- a/ftd/t/html/25-overflow.html
+++ b/ftd/t/html/25-overflow.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/26-border.html b/ftd/t/html/26-border.html
index a9704074b0..d96fef4968 100644
--- a/ftd/t/html/26-border.html
+++ b/ftd/t/html/26-border.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/27-optional.html b/ftd/t/html/27-optional.html
index 89d78a3f1e..5e01d88140 100644
--- a/ftd/t/html/27-optional.html
+++ b/ftd/t/html/27-optional.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/28-complex.html b/ftd/t/html/28-complex.html
index 178f36e780..5e802b14c7 100644
--- a/ftd/t/html/28-complex.html
+++ b/ftd/t/html/28-complex.html
@@ -1369,425 +1369,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/29-slides.html b/ftd/t/html/29-slides.html
index 694e41d5c9..1b072c002b 100644
--- a/ftd/t/html/29-slides.html
+++ b/ftd/t/html/29-slides.html
@@ -1339,425 +1339,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/3-component.html b/ftd/t/html/3-component.html
index f978c04c2e..e864b0bad6 100644
--- a/ftd/t/html/3-component.html
+++ b/ftd/t/html/3-component.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/30-slides.html b/ftd/t/html/30-slides.html
index 7aaba88075..092c2d887e 100644
--- a/ftd/t/html/30-slides.html
+++ b/ftd/t/html/30-slides.html
@@ -1357,425 +1357,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/31-message.html b/ftd/t/html/31-message.html
index e97102c47b..79b1892633 100644
--- a/ftd/t/html/31-message.html
+++ b/ftd/t/html/31-message.html
@@ -1359,425 +1359,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/32-test.html b/ftd/t/html/32-test.html
index f0d8ac00f1..bd87763c95 100644
--- a/ftd/t/html/32-test.html
+++ b/ftd/t/html/32-test.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/33-component-using-css.html b/ftd/t/html/33-component-using-css.html
index 2a3e6f77c4..d593107351 100644
--- a/ftd/t/html/33-component-using-css.html
+++ b/ftd/t/html/33-component-using-css.html
@@ -1331,425 +1331,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/33-using-css.html b/ftd/t/html/33-using-css.html
index 5d8652f224..673819d6f1 100644
--- a/ftd/t/html/33-using-css.html
+++ b/ftd/t/html/33-using-css.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/34-device.html b/ftd/t/html/34-device.html
index 740bfb7624..fc0dd05ee1 100644
--- a/ftd/t/html/34-device.html
+++ b/ftd/t/html/34-device.html
@@ -1337,425 +1337,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/35-condition-on-color.html b/ftd/t/html/35-condition-on-color.html
index feeed016b3..060d71ba80 100644
--- a/ftd/t/html/35-condition-on-color.html
+++ b/ftd/t/html/35-condition-on-color.html
@@ -1339,425 +1339,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/36-test.html b/ftd/t/html/36-test.html
index a281684886..ab4559c751 100644
--- a/ftd/t/html/36-test.html
+++ b/ftd/t/html/36-test.html
@@ -1384,425 +1384,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/37-cursor.html b/ftd/t/html/37-cursor.html
index d5d4a8a9d6..3bb941b37a 100644
--- a/ftd/t/html/37-cursor.html
+++ b/ftd/t/html/37-cursor.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/38-role.html b/ftd/t/html/38-role.html
index ae4e41998f..e0801091a8 100644
--- a/ftd/t/html/38-role.html
+++ b/ftd/t/html/38-role.html
@@ -1376,425 +1376,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/39-events.html b/ftd/t/html/39-events.html
index 9f2462532a..bb5e8a6d88 100644
--- a/ftd/t/html/39-events.html
+++ b/ftd/t/html/39-events.html
@@ -1375,425 +1375,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/4-component.html b/ftd/t/html/4-component.html
index f55966a1df..20b556353c 100644
--- a/ftd/t/html/4-component.html
+++ b/ftd/t/html/4-component.html
@@ -1331,425 +1331,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/40-anchor.html b/ftd/t/html/40-anchor.html
index 23e49c0b69..7904b28d45 100644
--- a/ftd/t/html/40-anchor.html
+++ b/ftd/t/html/40-anchor.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/41-responsive-type.html b/ftd/t/html/41-responsive-type.html
index 6679f3ac07..8f9c18046e 100644
--- a/ftd/t/html/41-responsive-type.html
+++ b/ftd/t/html/41-responsive-type.html
@@ -1338,425 +1338,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/42-default-function.html b/ftd/t/html/42-default-function.html
index 763044d7b1..caf34d69f9 100644
--- a/ftd/t/html/42-default-function.html
+++ b/ftd/t/html/42-default-function.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/43-default-colors-types.html b/ftd/t/html/43-default-colors-types.html
index c5f41c87ce..d6e3666d99 100644
--- a/ftd/t/html/43-default-colors-types.html
+++ b/ftd/t/html/43-default-colors-types.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/44-region.html b/ftd/t/html/44-region.html
index 3fc48a815f..d95eda2d1b 100644
--- a/ftd/t/html/44-region.html
+++ b/ftd/t/html/44-region.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/45-using-hyphen.html b/ftd/t/html/45-using-hyphen.html
index 883e0ceea1..a831e0e128 100644
--- a/ftd/t/html/45-using-hyphen.html
+++ b/ftd/t/html/45-using-hyphen.html
@@ -1331,425 +1331,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/46-record-in-pscript.html b/ftd/t/html/46-record-in-pscript.html
index 122f36b8bd..b036d0c1fe 100644
--- a/ftd/t/html/46-record-in-pscript.html
+++ b/ftd/t/html/46-record-in-pscript.html
@@ -1334,425 +1334,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/47-white-space.html b/ftd/t/html/47-white-space.html
index c7b9e60b6d..39c08c7408 100644
--- a/ftd/t/html/47-white-space.html
+++ b/ftd/t/html/47-white-space.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/48-basic-functions.html b/ftd/t/html/48-basic-functions.html
index abdd0b4c86..8184fa880d 100644
--- a/ftd/t/html/48-basic-functions.html
+++ b/ftd/t/html/48-basic-functions.html
@@ -1332,425 +1332,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/49-import.html b/ftd/t/html/49-import.html
index 5e2552d35e..d0b96fce16 100644
--- a/ftd/t/html/49-import.html
+++ b/ftd/t/html/49-import.html
@@ -1363,425 +1363,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/5-component-recursion.html b/ftd/t/html/5-component-recursion.html
index 44e37555f8..ceec6ad272 100644
--- a/ftd/t/html/5-component-recursion.html
+++ b/ftd/t/html/5-component-recursion.html
@@ -1347,425 +1347,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/50-using-import.html b/ftd/t/html/50-using-import.html
index 0353e444fd..ee9d6b690c 100644
--- a/ftd/t/html/50-using-import.html
+++ b/ftd/t/html/50-using-import.html
@@ -1363,425 +1363,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/51-text-transform.html b/ftd/t/html/51-text-transform.html
index 452888b433..928e6c0819 100644
--- a/ftd/t/html/51-text-transform.html
+++ b/ftd/t/html/51-text-transform.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/52-code-and-iframe.html b/ftd/t/html/52-code-and-iframe.html
index 82ded641bf..1a86c5a78a 100644
--- a/ftd/t/html/52-code-and-iframe.html
+++ b/ftd/t/html/52-code-and-iframe.html
@@ -1337,425 +1337,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/53-decimal.html b/ftd/t/html/53-decimal.html
index 0e50ae181f..f4592266dc 100644
--- a/ftd/t/html/53-decimal.html
+++ b/ftd/t/html/53-decimal.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/53-font-family.html b/ftd/t/html/53-font-family.html
index 4020df36c8..32e265d558 100644
--- a/ftd/t/html/53-font-family.html
+++ b/ftd/t/html/53-font-family.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/54-input.html b/ftd/t/html/54-input.html
index 8646dc8041..e9f5b0afca 100644
--- a/ftd/t/html/54-input.html
+++ b/ftd/t/html/54-input.html
@@ -1333,425 +1333,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/55-inherited.html b/ftd/t/html/55-inherited.html
index f3e27ba457..66fb736b23 100644
--- a/ftd/t/html/55-inherited.html
+++ b/ftd/t/html/55-inherited.html
@@ -1348,425 +1348,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/55-line-clamp.html b/ftd/t/html/55-line-clamp.html
index b2d26bd5df..4eeac7bfe8 100644
--- a/ftd/t/html/55-line-clamp.html
+++ b/ftd/t/html/55-line-clamp.html
@@ -1335,425 +1335,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/56-passing-events.html b/ftd/t/html/56-passing-events.html
index fe21732225..a69513ecde 100644
--- a/ftd/t/html/56-passing-events.html
+++ b/ftd/t/html/56-passing-events.html
@@ -1356,425 +1356,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/57-border-style.html b/ftd/t/html/57-border-style.html
index 9058c823be..f59ee07b16 100644
--- a/ftd/t/html/57-border-style.html
+++ b/ftd/t/html/57-border-style.html
@@ -1331,425 +1331,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/58-id.html b/ftd/t/html/58-id.html
index 5f90e4b025..a876a5e5ce 100644
--- a/ftd/t/html/58-id.html
+++ b/ftd/t/html/58-id.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/59-sticky.html b/ftd/t/html/59-sticky.html
index 30549de202..73a8711bf3 100644
--- a/ftd/t/html/59-sticky.html
+++ b/ftd/t/html/59-sticky.html
@@ -1334,425 +1334,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/6-function.html b/ftd/t/html/6-function.html
index f6e7d6b97e..79ba38e2e6 100644
--- a/ftd/t/html/6-function.html
+++ b/ftd/t/html/6-function.html
@@ -1332,425 +1332,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/60-region-id-slug.html b/ftd/t/html/60-region-id-slug.html
index 22625e7e47..992ea70642 100644
--- a/ftd/t/html/60-region-id-slug.html
+++ b/ftd/t/html/60-region-id-slug.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/61-loop-variable.html b/ftd/t/html/61-loop-variable.html
index d34d5b4853..49a72f5cfe 100644
--- a/ftd/t/html/61-loop-variable.html
+++ b/ftd/t/html/61-loop-variable.html
@@ -1344,425 +1344,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/62-spacing.html b/ftd/t/html/62-spacing.html
index 0dbf232761..33cab56c26 100644
--- a/ftd/t/html/62-spacing.html
+++ b/ftd/t/html/62-spacing.html
@@ -1334,425 +1334,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/63-checkbox.html b/ftd/t/html/63-checkbox.html
index d247808250..efcb58fe1a 100644
--- a/ftd/t/html/63-checkbox.html
+++ b/ftd/t/html/63-checkbox.html
@@ -1331,425 +1331,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/64-muliple-node-dep.html b/ftd/t/html/64-muliple-node-dep.html
index 19b6058d31..bb3d0a0f2b 100644
--- a/ftd/t/html/64-muliple-node-dep.html
+++ b/ftd/t/html/64-muliple-node-dep.html
@@ -1333,425 +1333,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/64-multiple-node-dep-1.html b/ftd/t/html/64-multiple-node-dep-1.html
index 64b7dc1460..e87c50e399 100644
--- a/ftd/t/html/64-multiple-node-dep-1.html
+++ b/ftd/t/html/64-multiple-node-dep-1.html
@@ -1339,425 +1339,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/65-mut-loop.html b/ftd/t/html/65-mut-loop.html
index 188520ca32..4023f8955e 100644
--- a/ftd/t/html/65-mut-loop.html
+++ b/ftd/t/html/65-mut-loop.html
@@ -1335,425 +1335,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/66-inheritance.html b/ftd/t/html/66-inheritance.html
index 5777ea9978..20ac300474 100644
--- a/ftd/t/html/66-inheritance.html
+++ b/ftd/t/html/66-inheritance.html
@@ -2763,425 +2763,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/67-enabled.html b/ftd/t/html/67-enabled.html
index 93a9009749..d3234ec8f8 100644
--- a/ftd/t/html/67-enabled.html
+++ b/ftd/t/html/67-enabled.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/68-anchor-id.html b/ftd/t/html/68-anchor-id.html
index 633e31e158..94615a2a83 100644
--- a/ftd/t/html/68-anchor-id.html
+++ b/ftd/t/html/68-anchor-id.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/69-inside-loop.html b/ftd/t/html/69-inside-loop.html
index 63925ba7b2..74fd75de6a 100644
--- a/ftd/t/html/69-inside-loop.html
+++ b/ftd/t/html/69-inside-loop.html
@@ -1349,425 +1349,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/7-events.html b/ftd/t/html/7-events.html
index e19261fed7..410c44b20b 100644
--- a/ftd/t/html/7-events.html
+++ b/ftd/t/html/7-events.html
@@ -1332,425 +1332,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/70-figma-json-to-ftd.html b/ftd/t/html/70-figma-json-to-ftd.html
index 1f9255d801..6e9cc458dd 100644
--- a/ftd/t/html/70-figma-json-to-ftd.html
+++ b/ftd/t/html/70-figma-json-to-ftd.html
@@ -1348,425 +1348,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/70-length-check.html b/ftd/t/html/70-length-check.html
index 4f56977318..afb96e90c1 100644
--- a/ftd/t/html/70-length-check.html
+++ b/ftd/t/html/70-length-check.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/71-web-component.html b/ftd/t/html/71-web-component.html
index 3462f582e8..b633326764 100644
--- a/ftd/t/html/71-web-component.html
+++ b/ftd/t/html/71-web-component.html
@@ -1332,425 +1332,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/72-external-js.html b/ftd/t/html/72-external-js.html
index e36a3d1f0e..26ddd555d0 100644
--- a/ftd/t/html/72-external-js.html
+++ b/ftd/t/html/72-external-js.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/73-complex-ftd-ui.html b/ftd/t/html/73-complex-ftd-ui.html
index db44ce9d15..6c5df29ec4 100644
--- a/ftd/t/html/73-complex-ftd-ui.html
+++ b/ftd/t/html/73-complex-ftd-ui.html
@@ -1340,425 +1340,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/74-import-complex-ftd-ui.html b/ftd/t/html/74-import-complex-ftd-ui.html
index e17d4a876f..1309be64e9 100644
--- a/ftd/t/html/74-import-complex-ftd-ui.html
+++ b/ftd/t/html/74-import-complex-ftd-ui.html
@@ -1340,425 +1340,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/75-ui-list-display.html b/ftd/t/html/75-ui-list-display.html
index 42e7788277..1b0c5850d1 100644
--- a/ftd/t/html/75-ui-list-display.html
+++ b/ftd/t/html/75-ui-list-display.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/8-counter.html b/ftd/t/html/8-counter.html
index a72f130f1f..22132fed7a 100644
--- a/ftd/t/html/8-counter.html
+++ b/ftd/t/html/8-counter.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/9-conditional-properties.html b/ftd/t/html/9-conditional-properties.html
index b48b49a799..69938ee608 100644
--- a/ftd/t/html/9-conditional-properties.html
+++ b/ftd/t/html/9-conditional-properties.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/check.html b/ftd/t/html/check.html
index f3b87390d1..9c6993ce2f 100644
--- a/ftd/t/html/check.html
+++ b/ftd/t/html/check.html
@@ -1330,425 +1330,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/function.html b/ftd/t/html/function.html
index 785dfb5210..4c6ea4d051 100644
--- a/ftd/t/html/function.html
+++ b/ftd/t/html/function.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/get.html b/ftd/t/html/get.html
index 4f81f0ad82..93ba63faae 100644
--- a/ftd/t/html/get.html
+++ b/ftd/t/html/get.html
@@ -1334,425 +1334,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/h-100.html b/ftd/t/html/h-100.html
index 2236a13b33..24724e5d9e 100644
--- a/ftd/t/html/h-100.html
+++ b/ftd/t/html/h-100.html
@@ -1329,425 +1329,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/resume.html b/ftd/t/html/resume.html
index 81803bbbda..e70a04aa5d 100644
--- a/ftd/t/html/resume.html
+++ b/ftd/t/html/resume.html
@@ -1356,425 +1356,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/t/html/sd.html b/ftd/t/html/sd.html
index d763feb1af..7b8c634918 100644
--- a/ftd/t/html/sd.html
+++ b/ftd/t/html/sd.html
@@ -1347,425 +1347,6 @@
 link.download = filename;
 link.click();
 }
-function get_color_value(cs, category, color_name) {
-let category_data = cs[category];
-let color_data = category_data[color_name];
-let color_value = color_data['value'];
-return color_value;
-}
-function styled_body(body) {
-return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-function styled_section(line) {
-var section_type_title = line.replace("-- ", "").replace(":", "");
-var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`;
-return result;
-}
-function styled_header(line) {
-var header_splits = line.split(":");
-var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`;
-return result;
-}
-function apply_style(s) {
-var result = new String();
-const lines = s.split(/\r\n|\r|\n/);
-for (var line of lines) {
-if (line.trim().length == 0) {
-// Empty line
-result = result.concat(styled_body(" "));
-}
-else if (line.startsWith("--")) {
-// Section top
-result = result.concat(styled_section(line));
-}
-else if (!line.startsWith("--") && line.includes(":")) {
-// Header
-result = result.concat(styled_header(line));
-}
-else {
-// Body
-result = result.concat(styled_body(line));
-}
-}
-return result;
-}
-function figma_json_to_ftd(json) {
-const cs_data = JSON.parse(json);
-let cs_light = Object.keys(cs_data)
-.filter((key) => key.includes("-light"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let cs_dark = Object.keys(cs_data)
-.filter((key) => key.includes("-dark"))
-.reduce((obj, key) => {
-obj = cs_data[key];
-return obj;
-}, {});
-let s = `
--- ftd.color base-:
-light: ${get_color_value(cs_light, "Background Colors", "base")}
-dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
--- ftd.color step-1-:
-light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
--- ftd.color step-2-:
-light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
--- ftd.color overlay-:
-light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
--- ftd.color code-:
-light: ${get_color_value(cs_light, "Background Colors", "code")}
-dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
--- ftd.background-colors background-:
-base: $base-
-step-1: $step-1-
-step-2: $step-2-
-overlay: $overlay-
-code: $code-
-
--- ftd.color border-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
--- ftd.color border-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
--- ftd.color text-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
--- ftd.color text-strong-:
-light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
--- ftd.color shadow-:
-light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
--- ftd.color scrim-:
-light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
--- ftd.color cta-primary-base-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
--- ftd.color cta-primary-hover-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
--- ftd.color cta-primary-pressed-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
--- ftd.color cta-primary-disabled-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
--- ftd.color cta-primary-focused-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
--- ftd.color cta-primary-border-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
--- ftd.color cta-primary-text-:
-light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
--- ftd.cta-colors cta-primary-:
-base: $cta-primary-base-
-hover: $cta-primary-hover-
-pressed: $cta-primary-pressed-
-disabled: $cta-primary-disabled-
-focused: $cta-primary-focused-
-border: $cta-primary-border-
-text: $cta-primary-text-
-
--- ftd.color cta-secondary-base-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
--- ftd.color cta-secondary-hover-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
--- ftd.color cta-secondary-pressed-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
--- ftd.color cta-secondary-disabled-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
--- ftd.color cta-secondary-focused-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
--- ftd.color cta-secondary-border-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
--- ftd.color cta-secondary-text-:
-light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
--- ftd.cta-colors cta-secondary-:
-base: $cta-secondary-base-
-hover: $cta-secondary-hover-
-pressed: $cta-secondary-pressed-
-disabled: $cta-secondary-disabled-
-focused: $cta-secondary-focused-
-border: $cta-secondary-border-
-text: $cta-secondary-text-
-
--- ftd.color cta-tertiary-base-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
--- ftd.color cta-tertiary-hover-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
--- ftd.color cta-tertiary-pressed-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
--- ftd.color cta-tertiary-disabled-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
--- ftd.color cta-tertiary-focused-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
--- ftd.color cta-tertiary-border-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
--- ftd.color cta-tertiary-text-:
-light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
--- ftd.cta-colors cta-tertiary-:
-base: $cta-tertiary-base-
-hover: $cta-tertiary-hover-
-pressed: $cta-tertiary-pressed-
-disabled: $cta-tertiary-disabled-
-focused: $cta-tertiary-focused-
-border: $cta-tertiary-border-
-text: $cta-tertiary-text-
-
--- ftd.color cta-danger-base-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
--- ftd.color cta-danger-hover-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
--- ftd.color cta-danger-pressed-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
--- ftd.color cta-danger-disabled-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
--- ftd.color cta-danger-focused-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
--- ftd.color cta-danger-border-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
--- ftd.color cta-danger-text-:
-light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
--- ftd.cta-colors cta-danger-:
-base: $cta-danger-base-
-hover: $cta-danger-hover-
-pressed: $cta-danger-pressed-
-disabled: $cta-danger-disabled-
-focused: $cta-danger-focused-
-border: $cta-danger-border-
-text: $cta-danger-text-
-
--- ftd.color accent-primary-:
-light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
--- ftd.color accent-secondary-:
-light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
--- ftd.color accent-tertiary-:
-light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
--- ftd.pst accent-:
-primary: $accent-primary-
-secondary: $accent-secondary-
-tertiary: $accent-tertiary-
-
--- ftd.color error-base-:
-light: ${get_color_value(cs_light, "Error Colors", "base")}
-dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
--- ftd.color error-text-:
-light: ${get_color_value(cs_light, "Error Colors", "text")}
-dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
--- ftd.color error-border-:
-light: ${get_color_value(cs_light, "Error Colors", "border")}
-dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
--- ftd.btb error-btb-:
-base: $error-base-
-text: $error-text-
-border: $error-border-
-
--- ftd.color success-base-:
-light: ${get_color_value(cs_light, "Success Colors", "base")}
-dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
--- ftd.color success-text-:
-light: ${get_color_value(cs_light, "Success Colors", "text")}
-dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
--- ftd.color success-border-:
-light: ${get_color_value(cs_light, "Success Colors", "border")}
-dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
--- ftd.btb success-btb-:
-base: $success-base-
-text: $success-text-
-border: $success-border-
-
--- ftd.color info-base-:
-light: ${get_color_value(cs_light, "Info Colors", "base")}
-dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
--- ftd.color info-text-:
-light: ${get_color_value(cs_light, "Info Colors", "text")}
-dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
--- ftd.color info-border-:
-light: ${get_color_value(cs_light, "Info Colors", "border")}
-dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
--- ftd.btb info-btb-:
-base: $info-base-
-text: $info-text-
-border: $info-border-
-
--- ftd.color warning-base-:
-light: ${get_color_value(cs_light, "Warning Colors", "base")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
--- ftd.color warning-text-:
-light: ${get_color_value(cs_light, "Warning Colors", "text")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
--- ftd.color warning-border-:
-light: ${get_color_value(cs_light, "Warning Colors", "border")}
-dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
--- ftd.btb warning-btb-:
-base: $warning-base-
-text: $warning-text-
-border: $warning-border-
-
--- ftd.color custom-one-:
-light: ${get_color_value(cs_light, "Custom Colors", "one")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
--- ftd.color custom-two-:
-light: ${get_color_value(cs_light, "Custom Colors", "two")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
--- ftd.color custom-three-:
-light: ${get_color_value(cs_light, "Custom Colors", "three")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
--- ftd.color custom-four-:
-light: ${get_color_value(cs_light, "Custom Colors", "four")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
--- ftd.color custom-five-:
-light: ${get_color_value(cs_light, "Custom Colors", "five")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
--- ftd.color custom-six-:
-light: ${get_color_value(cs_light, "Custom Colors", "six")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
--- ftd.color custom-seven-:
-light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
--- ftd.color custom-eight-:
-light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
--- ftd.color custom-nine-:
-light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
--- ftd.color custom-ten-:
-light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
--- ftd.custom-colors custom-:
-one: $custom-one-
-two: $custom-two-
-three: $custom-three-
-four: $custom-four-
-five: $custom-five-
-six: $custom-six-
-seven: $custom-seven-
-eight: $custom-eight-
-nine: $custom-nine-
-ten: $custom-ten-
-
--- ftd.color-scheme main:
-background: $background-
-border: $border-
-border-strong: $border-strong-
-text: $text-
-text-strong: $text-strong-
-shadow: $shadow-
-scrim: $scrim-
-cta-primary: $cta-primary-
-cta-secondary: $cta-secondary-
-cta-tertiary: $cta-tertiary-
-cta-danger: $cta-danger-
-accent: $accent-
-error: $error-btb-
-success: $success-btb-
-info: $info-btb-
-warning: $warning-btb-
-custom: $custom-
-`;
-let fs = `<pre>${apply_style(s)}</pre>`;
-return [s, fs];
-}
 function len(data) {
 return data.length;
 }
diff --git a/ftd/ts/utils.ts b/ftd/ts/utils.ts
index 8ca538313c..a7f22c9424 100644
--- a/ftd/ts/utils.ts
+++ b/ftd/ts/utils.ts
@@ -166,441 +166,6 @@ function download_text(filename: string, text: string){
     link.click();
 }
 
-
-function get_color_value(cs: Object, category: string, color_name: string): any {
-    let category_data: Object = cs[category as keyof typeof cs];
-    let color_data: Object = category_data[color_name as keyof typeof category_data];
-    let color_value = color_data['value' as keyof typeof color_data];
-    return color_value;
-}
-
-function styled_body(body: string): string {
-    return `
-<span style="color:#c0c5ce;">${body}</span>`;
-}
-
-function styled_section(line: string): string {
-    var section_type_title = line.replace("-- ", "").replace(":", "");
-
-    var result = `
-<span style="color:#65737e;">-- </span><span style="color:#ebcb8b;">${section_type_title}</span><span style="color:#65737e;">: </span>`
-
-    return result;
-}
-
-function styled_header(line: string): string {
-    var header_splits = line.split(":");
-
-    var result = `
-<span style="color:#b48ead;">${header_splits[0]}</span><span style="color:#65737e;">: </span><span style="color:#d08770;">${header_splits[1].trim()} </span>`
-
-    return result;
-}
-
-
-function apply_style(s: string): String {
-    var result = new String();
-    const lines = s.split(/\r\n|\r|\n/);
-    for (var line of lines) {
-        if (line.trim().length == 0){
-            // Empty line
-            result = result.concat(styled_body(" "));
-        }
-        else if (line.startsWith("--")){
-            // Section top
-            result = result.concat(styled_section(line));
-        }
-        else if (!line.startsWith("--") && line.includes(":")){
-            // Header
-            result = result.concat(styled_header(line));
-        }
-        else {
-            // Body
-            result = result.concat(styled_body(line));
-        }
-    }
-    return result;
-}
-
-function figma_json_to_ftd(json: string): string[] {
-    const cs_data = JSON.parse(json);
-
-    let cs_light: Object = Object.keys(cs_data)
-            .filter((key) => key.includes("-light"))
-            .reduce((obj, key) => {
-                obj = cs_data[key];
-                return obj;
-          }, {});
-
-    let cs_dark: Object = Object.keys(cs_data)
-            .filter((key) => key.includes("-dark"))
-            .reduce((obj, key) => {
-                obj = cs_data[key];
-                return obj;
-          }, {});
-
-    let s: string = `
-    -- ftd.color base-:
-    light: ${get_color_value(cs_light, "Background Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "base")}
-
-    -- ftd.color step-1-:
-    light: ${get_color_value(cs_light, "Background Colors", "step-1")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "step-1")}
-
-    -- ftd.color step-2-:
-    light: ${get_color_value(cs_light, "Background Colors", "step-2")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "step-2")}
-
-    -- ftd.color overlay-:
-    light: ${get_color_value(cs_light, "Background Colors", "overlay")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "overlay")}
-
-    -- ftd.color code-:
-    light: ${get_color_value(cs_light, "Background Colors", "code")}
-    dark: ${get_color_value(cs_dark, "Background Colors", "code")}
-
-    -- ftd.background-colors background-:
-    base: $base-
-    step-1: $step-1-
-    step-2: $step-2-
-    overlay: $overlay-
-    code: $code-
-
-    -- ftd.color border-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "border")}
-
-    -- ftd.color border-strong-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "border-strong")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "border-strong")}
-
-    -- ftd.color text-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "text")}
-
-    -- ftd.color text-strong-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "text-strong")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "text-strong")}
-
-    -- ftd.color shadow-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "shadow")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "shadow")}
-
-    -- ftd.color scrim-:
-    light: ${get_color_value(cs_light, "Standalone Colors", "scrim")}
-    dark: ${get_color_value(cs_dark, "Standalone Colors", "scrim")}
-
-    -- ftd.color cta-primary-base-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "base")}
-
-    -- ftd.color cta-primary-hover-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "hover")}
-
-    -- ftd.color cta-primary-pressed-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "pressed")}
-
-    -- ftd.color cta-primary-disabled-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "disabled")}
-
-    -- ftd.color cta-primary-focused-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "focused")}
-
-    -- ftd.color cta-primary-border-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "border")}
-
-    -- ftd.color cta-primary-text-:
-    light: ${get_color_value(cs_light, "CTA Primary Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Primary Colors", "text")}
-
-
-    -- ftd.cta-colors cta-primary-:
-    base: $cta-primary-base-
-    hover: $cta-primary-hover-
-    pressed: $cta-primary-pressed-
-    disabled: $cta-primary-disabled-
-    focused: $cta-primary-focused-
-    border: $cta-primary-border-
-    text: $cta-primary-text-
-
-    -- ftd.color cta-secondary-base-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "base")}
-
-    -- ftd.color cta-secondary-hover-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "hover")}
-
-    -- ftd.color cta-secondary-pressed-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "pressed")}
-
-    -- ftd.color cta-secondary-disabled-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "disabled")}
-
-    -- ftd.color cta-secondary-focused-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "focused")}
-
-    -- ftd.color cta-secondary-border-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "border")}
-
-    -- ftd.color cta-secondary-text-:
-    light: ${get_color_value(cs_light, "CTA Secondary Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Secondary Colors", "text")}
-
-    -- ftd.cta-colors cta-secondary-:
-    base: $cta-secondary-base-
-    hover: $cta-secondary-hover-
-    pressed: $cta-secondary-pressed-
-    disabled: $cta-secondary-disabled-
-    focused: $cta-secondary-focused-
-    border: $cta-secondary-border-
-    text: $cta-secondary-text-
-
-    -- ftd.color cta-tertiary-base-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "base")}
-
-    -- ftd.color cta-tertiary-hover-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "hover")}
-
-    -- ftd.color cta-tertiary-pressed-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "pressed")}
-
-    -- ftd.color cta-tertiary-disabled-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "disabled")}
-
-    -- ftd.color cta-tertiary-focused-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "focused")}
-
-    -- ftd.color cta-tertiary-border-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "border")}
-
-    -- ftd.color cta-tertiary-text-:
-    light: ${get_color_value(cs_light, "CTA Tertiary Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Tertiary Colors", "text")}
-
-    -- ftd.cta-colors cta-tertiary-:
-    base: $cta-tertiary-base-
-    hover: $cta-tertiary-hover-
-    pressed: $cta-tertiary-pressed-
-    disabled: $cta-tertiary-disabled-
-    focused: $cta-tertiary-focused-
-    border: $cta-tertiary-border-
-    text: $cta-tertiary-text-
-
-    -- ftd.color cta-danger-base-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "base")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "base")}
-
-    -- ftd.color cta-danger-hover-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "hover")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "hover")}
-
-    -- ftd.color cta-danger-pressed-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "pressed")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "pressed")}
-
-    -- ftd.color cta-danger-disabled-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "disabled")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "disabled")}
-
-    -- ftd.color cta-danger-focused-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "focused")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "focused")}
-
-    -- ftd.color cta-danger-border-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "border")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "border")}
-
-    -- ftd.color cta-danger-text-:
-    light: ${get_color_value(cs_light, "CTA Danger Colors", "text")}
-    dark: ${get_color_value(cs_dark, "CTA Danger Colors", "text")}
-
-    -- ftd.cta-colors cta-danger-:
-    base: $cta-danger-base-
-    hover: $cta-danger-hover-
-    pressed: $cta-danger-pressed-
-    disabled: $cta-danger-disabled-
-    focused: $cta-danger-focused-
-    border: $cta-danger-border-
-    text: $cta-danger-text-
-
-    -- ftd.color accent-primary-:
-    light: ${get_color_value(cs_light, "Accent Colors", "primary")}
-    dark: ${get_color_value(cs_dark, "Accent Colors", "primary")}
-
-    -- ftd.color accent-secondary-:
-    light: ${get_color_value(cs_light, "Accent Colors", "secondary")}
-    dark: ${get_color_value(cs_dark, "Accent Colors", "secondary")}
-
-    -- ftd.color accent-tertiary-:
-    light: ${get_color_value(cs_light, "Accent Colors", "tertiary")}
-    dark: ${get_color_value(cs_dark, "Accent Colors", "tertiary")}
-
-    -- ftd.pst accent-:
-    primary: $accent-primary-
-    secondary: $accent-secondary-
-    tertiary: $accent-tertiary-
-
-    -- ftd.color error-base-:
-    light: ${get_color_value(cs_light, "Error Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Error Colors", "base")}
-
-    -- ftd.color error-text-:
-    light: ${get_color_value(cs_light, "Error Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Error Colors", "text")}
-
-    -- ftd.color error-border-:
-    light: ${get_color_value(cs_light, "Error Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Error Colors", "border")}
-
-    -- ftd.btb error-btb-:
-    base: $error-base-
-    text: $error-text-
-    border: $error-border-
-
-    -- ftd.color success-base-:
-    light: ${get_color_value(cs_light, "Success Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Success Colors", "base")}
-
-    -- ftd.color success-text-:
-    light: ${get_color_value(cs_light, "Success Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Success Colors", "text")}
-
-    -- ftd.color success-border-:
-    light: ${get_color_value(cs_light, "Success Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Success Colors", "border")}
-
-    -- ftd.btb success-btb-:
-    base: $success-base-
-    text: $success-text-
-    border: $success-border-
-
-    -- ftd.color info-base-:
-    light: ${get_color_value(cs_light, "Info Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Info Colors", "base")}
-
-    -- ftd.color info-text-:
-    light: ${get_color_value(cs_light, "Info Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Info Colors", "text")}
-
-    -- ftd.color info-border-:
-    light: ${get_color_value(cs_light, "Info Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Info Colors", "border")}
-
-    -- ftd.btb info-btb-:
-    base: $info-base-
-    text: $info-text-
-    border: $info-border-
-
-    -- ftd.color warning-base-:
-    light: ${get_color_value(cs_light, "Warning Colors", "base")}
-    dark: ${get_color_value(cs_dark, "Warning Colors", "base")}
-
-    -- ftd.color warning-text-:
-    light: ${get_color_value(cs_light, "Warning Colors", "text")}
-    dark: ${get_color_value(cs_dark, "Warning Colors", "text")}
-
-    -- ftd.color warning-border-:
-    light: ${get_color_value(cs_light, "Warning Colors", "border")}
-    dark: ${get_color_value(cs_dark, "Warning Colors", "border")}
-
-    -- ftd.btb warning-btb-:
-    base: $warning-base-
-    text: $warning-text-
-    border: $warning-border-
-
-    -- ftd.color custom-one-:
-    light: ${get_color_value(cs_light, "Custom Colors", "one")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "one")}
-
-    -- ftd.color custom-two-:
-    light: ${get_color_value(cs_light, "Custom Colors", "two")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "two")}
-
-    -- ftd.color custom-three-:
-    light: ${get_color_value(cs_light, "Custom Colors", "three")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "three")}
-
-    -- ftd.color custom-four-:
-    light: ${get_color_value(cs_light, "Custom Colors", "four")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "four")}
-
-    -- ftd.color custom-five-:
-    light: ${get_color_value(cs_light, "Custom Colors", "five")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "five")}
-
-    -- ftd.color custom-six-:
-    light: ${get_color_value(cs_light, "Custom Colors", "six")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "six")}
-
-    -- ftd.color custom-seven-:
-    light: ${get_color_value(cs_light, "Custom Colors", "seven")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "seven")}
-
-    -- ftd.color custom-eight-:
-    light: ${get_color_value(cs_light, "Custom Colors", "eight")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "eight")}
-
-    -- ftd.color custom-nine-:
-    light: ${get_color_value(cs_light, "Custom Colors", "nine")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "nine")}
-
-    -- ftd.color custom-ten-:
-    light: ${get_color_value(cs_light, "Custom Colors", "ten")}
-    dark: ${get_color_value(cs_dark, "Custom Colors", "ten")}
-
-    -- ftd.custom-colors custom-:
-    one: $custom-one-
-    two: $custom-two-
-    three: $custom-three-
-    four: $custom-four-
-    five: $custom-five-
-    six: $custom-six-
-    seven: $custom-seven-
-    eight: $custom-eight-
-    nine: $custom-nine-
-    ten: $custom-ten-
-
-    -- ftd.color-scheme main:
-    background: $background-
-    border: $border-
-    border-strong: $border-strong-
-    text: $text-
-    text-strong: $text-strong-
-    shadow: $shadow-
-    scrim: $scrim-
-    cta-primary: $cta-primary-
-    cta-secondary: $cta-secondary-
-    cta-tertiary: $cta-tertiary-
-    cta-danger: $cta-danger-
-    accent: $accent-
-    error: $error-btb-
-    success: $success-btb-
-    info: $info-btb-
-    warning: $warning-btb-
-    custom: $custom-
-    `;
-
-    let fs = `<pre>${apply_style(s)}</pre>`;
-    return [s,fs];
-}
-
 function len(data: any[]) {
     return data.length;
 }