@create-figma-plugin/ui/lib/css/theme.css

Production-grade Preact components that replicate the Figma UI design

/* From https://figma.com/plugin-docs/css-variables/#list-of-all-available-color-tokens */

:root .figma-light {
  --figma-color-bg: rgba(255, 255, 255, 1);
  --figma-color-bg-brand: #0d99ff;
  --figma-color-bg-brand-hover: #007be5;
  --figma-color-bg-brand-pressed: #007be5;
  --figma-color-bg-brand-secondary: #0768cf;
  --figma-color-bg-brand-tertiary: #e5f4ff;
  --figma-color-bg-component: #9747ff;
  --figma-color-bg-component-hover: #8638e5;
  --figma-color-bg-component-pressed: #8638e5;
  --figma-color-bg-component-secondary: #7c2bda;
  --figma-color-bg-component-tertiary: #f1e5ff;
  --figma-color-bg-danger: #f24822;
  --figma-color-bg-danger-hover: #dc3412;
  --figma-color-bg-danger-pressed: #dc3412;
  --figma-color-bg-danger-secondary: #bd2915;
  --figma-color-bg-danger-tertiary: #ffe2e0;
  --figma-color-bg-disabled: #d9d9d9;
  --figma-color-bg-disabled-secondary: #b3b3b3;
  --figma-color-bg-hover: #f5f5f5;
  --figma-color-bg-inverse: #2c2c2c;
  --figma-color-bg-onselected: #bde3ff;
  --figma-color-bg-onselected-hover: #bde3ff;
  --figma-color-bg-onselected-pressed: #bde3ff;
  --figma-color-bg-pressed: #f5f5f5;
  --figma-color-bg-secondary: #f5f5f5;
  --figma-color-bg-selected: #e5f4ff;
  --figma-color-bg-selected-hover: #bde3ff;
  --figma-color-bg-selected-pressed: #bde3ff;
  --figma-color-bg-selected-secondary: #f2f9ff;
  --figma-color-bg-selected-strong: #0d99ff;
  --figma-color-bg-selected-tertiary: #f2f9ff;
  --figma-color-bg-success: #14ae5c;
  --figma-color-bg-success-hover: #009951;
  --figma-color-bg-success-pressed: #009951;
  --figma-color-bg-success-secondary: #008043;
  --figma-color-bg-success-tertiary: #cff7d3;
  --figma-color-bg-tertiary: #e6e6e6;
  --figma-color-bg-warning: #ffcd29;
  --figma-color-bg-warning-hover: #ffc21a;
  --figma-color-bg-warning-pressed: #ffc21a;
  --figma-color-bg-warning-secondary: #fab815;
  --figma-color-bg-warning-tertiary: #fff1c2;
  --figma-color-border: #e6e6e6;
  --figma-color-border-brand: #bde3ff;
  --figma-color-border-brand-strong: #007be5;
  --figma-color-border-component: #e4ccff;
  --figma-color-border-component-hover: #9747ff;
  --figma-color-border-component-strong: #8638e5;
  --figma-color-border-danger: #ffc7c2;
  --figma-color-border-danger-strong: #dc3412;
  --figma-color-border-disabled: #e6e6e6;
  --figma-color-border-disabled-strong: rgba(0, 0, 0, 0.3);
  --figma-color-border-onbrand: #007be5;
  --figma-color-border-onbrand-strong: rgba(255, 255, 255, 1);
  --figma-color-border-oncomponent: #8638e5;
  --figma-color-border-oncomponent-strong: rgba(255, 255, 255, 1);
  --figma-color-border-ondanger: #dc3412;
  --figma-color-border-ondanger-strong: rgba(255, 255, 255, 1);
  --figma-color-border-onselected: #bde3ff;
  --figma-color-border-onselected-strong: rgba(0, 0, 0, 0.9);
  --figma-color-border-onsuccess: #009951;
  --figma-color-border-onsuccess-strong: rgba(255, 255, 255, 1);
  --figma-color-border-onwarning: #fab815;
  --figma-color-border-onwarning-strong: rgba(0, 0, 0, 0.9);
  --figma-color-border-selected: #0d99ff;
  --figma-color-border-selected-strong: #007be5;
  --figma-color-border-strong: #2c2c2c;
  --figma-color-border-success: #aff4c6;
  --figma-color-border-success-strong: #009951;
  --figma-color-border-warning: #ffe8a3;
  --figma-color-border-warning-strong: #b86200;
  --figma-color-icon: rgba(0, 0, 0, 0.9);
  --figma-color-icon-brand: #007be5;
  --figma-color-icon-brand-pressed: #0768cf;
  --figma-color-icon-brand-secondary: #80caff;
  --figma-color-icon-brand-tertiary: #bde3ff;
  --figma-color-icon-component: #8638e5;
  --figma-color-icon-component-pressed: #7c2bda;
  --figma-color-icon-component-secondary: #c5b2dc;
  --figma-color-icon-component-tertiary: #c5b2dc;
  --figma-color-icon-danger: #f24822;
  --figma-color-icon-danger-hover: #bd2915;
  --figma-color-icon-danger-pressed: #bd2915;
  --figma-color-icon-danger-secondary: #f24822;
  --figma-color-icon-danger-secondary-hover: #f24822;
  --figma-color-icon-danger-tertiary: #f24822;
  --figma-color-icon-disabled: rgba(0, 0, 0, 0.3);
  --figma-color-icon-hover: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onbrand: rgba(255, 255, 255, 1);
  --figma-color-icon-onbrand-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-onbrand-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-oncomponent: rgba(255, 255, 255, 1);
  --figma-color-icon-oncomponent-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-oncomponent-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-ondanger: rgba(255, 255, 255, 1);
  --figma-color-icon-ondanger-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-ondanger-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-ondisabled: rgba(255, 255, 255, 1);
  --figma-color-icon-oninverse: rgba(255, 255, 255, 0.9);
  --figma-color-icon-onselected: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onselected-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-icon-onselected-strong: rgba(255, 255, 255, 1);
  --figma-color-icon-onselected-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-icon-onsuccess: rgba(255, 255, 255, 1);
  --figma-color-icon-onsuccess-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-onsuccess-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-onwarning: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onwarning-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-icon-onwarning-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-icon-pressed: #007be5;
  --figma-color-icon-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-icon-secondary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-icon-selected: #007be5;
  --figma-color-icon-selected-secondary: #007be5;
  --figma-color-icon-selected-tertiary: #007be5;
  --figma-color-icon-success: #14ae5c;
  --figma-color-icon-success-pressed: #008043;
  --figma-color-icon-success-secondary: #14ae5c;
  --figma-color-icon-success-tertiary: #14ae5c;
  --figma-color-icon-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-icon-tertiary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-icon-warning: #ffcd29;
  --figma-color-icon-warning-pressed: #b86200;
  --figma-color-icon-warning-secondary: #ffcd29;
  --figma-color-icon-warning-tertiary: #ffcd29;
  --figma-color-text: rgba(0, 0, 0, 0.9);
  --figma-color-text-brand: #007be5;
  --figma-color-text-brand-secondary: #007be5;
  --figma-color-text-brand-tertiary: #007be5;
  --figma-color-text-component: #8638e5;
  --figma-color-text-component-pressed: #7c2bda;
  --figma-color-text-component-secondary: #c5b2dc;
  --figma-color-text-component-tertiary: #c5b2dc;
  --figma-color-text-danger: #dc3412;
  --figma-color-text-danger-secondary: #dc3412;
  --figma-color-text-danger-tertiary: #dc3412;
  --figma-color-text-disabled: rgba(0, 0, 0, 0.3);
  --figma-color-text-hover: rgba(0, 0, 0, 0.9);
  --figma-color-text-onbrand: rgba(255, 255, 255, 1);
  --figma-color-text-onbrand-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-onbrand-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-oncomponent: rgba(255, 255, 255, 1);
  --figma-color-text-oncomponent-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-oncomponent-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-ondanger: rgba(255, 255, 255, 1);
  --figma-color-text-ondanger-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-ondanger-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-ondisabled: rgba(255, 255, 255, 1);
  --figma-color-text-oninverse: rgba(255, 255, 255, 0.9);
  --figma-color-text-onselected: rgba(0, 0, 0, 0.9);
  --figma-color-text-onselected-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-text-onselected-strong: rgba(255, 255, 255, 1);
  --figma-color-text-onselected-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-text-onsuccess: rgba(255, 255, 255, 1);
  --figma-color-text-onsuccess-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-onsuccess-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-onwarning: rgba(0, 0, 0, 0.9);
  --figma-color-text-onwarning-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-text-onwarning-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-text-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-text-secondary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-text-selected: #007be5;
  --figma-color-text-selected-secondary: #007be5;
  --figma-color-text-selected-tertiary: #007be5;
  --figma-color-text-success: #009951;
  --figma-color-text-success-secondary: #009951;
  --figma-color-text-success-tertiary: #009951;
  --figma-color-text-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-text-tertiary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-text-warning: #b86200;
  --figma-color-text-warning-secondary: #b86200;
  --figma-color-text-warning-tertiary: #b86200;
}

:root .figma-dark {
  --figma-color-bg: #2c2c2c;
  --figma-color-bg-brand: #0c8ce9;
  --figma-color-bg-brand-hover: #0a6dc2;
  --figma-color-bg-brand-pressed: #0a6dc2;
  --figma-color-bg-brand-secondary: #105cad;
  --figma-color-bg-brand-tertiary: #394360;
  --figma-color-bg-component: #8a38f5;
  --figma-color-bg-component-hover: #7a2ed6;
  --figma-color-bg-component-pressed: #7a2ed6;
  --figma-color-bg-component-secondary: #652ca8;
  --figma-color-bg-component-tertiary: #473956;
  --figma-color-bg-danger: #e03e1a;
  --figma-color-bg-danger-hover: #c4381c;
  --figma-color-bg-danger-pressed: #c4381c;
  --figma-color-bg-danger-secondary: #963323;
  --figma-color-bg-danger-tertiary: #7c2622;
  --figma-color-bg-disabled: #757575;
  --figma-color-bg-disabled-secondary: #b3b3b3;
  --figma-color-bg-hover: #383838;
  --figma-color-bg-inverse: rgba(255, 255, 255, 1);
  --figma-color-bg-onselected: #667799;
  --figma-color-bg-onselected-hover: #667799;
  --figma-color-bg-onselected-pressed: #667799;
  --figma-color-bg-pressed: #383838;
  --figma-color-bg-secondary: #383838;
  --figma-color-bg-selected: #4a5878;
  --figma-color-bg-selected-hover: #536383;
  --figma-color-bg-selected-pressed: #536383;
  --figma-color-bg-selected-secondary: #394360;
  --figma-color-bg-selected-strong: #0c8ce9;
  --figma-color-bg-selected-tertiary: #394360;
  --figma-color-bg-success: #198f51;
  --figma-color-bg-success-hover: #078348;
  --figma-color-bg-success-pressed: #078348;
  --figma-color-bg-success-secondary: #0a5c35;
  --figma-color-bg-success-tertiary: #0a4c2d;
  --figma-color-bg-tertiary: #444444;
  --figma-color-bg-warning: #f3c11b;
  --figma-color-bg-warning-hover: #f2b50d;
  --figma-color-bg-warning-pressed: #f2b50d;
  --figma-color-bg-warning-secondary: #e4a711;
  --figma-color-bg-warning-tertiary: #c58011;
  --figma-color-border: #444444;
  --figma-color-border-brand: #105cad;
  --figma-color-border-brand-strong: #7cc4f8;
  --figma-color-border-component: #652ca8;
  --figma-color-border-component-hover: #8a38f5;
  --figma-color-border-component-strong: #d6b6fb;
  --figma-color-border-danger: #963323;
  --figma-color-border-danger-strong: #fca397;
  --figma-color-border-disabled: #444444;
  --figma-color-border-disabled-strong: rgba(255, 255, 255, 0.4);
  --figma-color-border-onbrand: #0a6dc2;
  --figma-color-border-onbrand-strong: rgba(255, 255, 255, 1);
  --figma-color-border-oncomponent: #7a2ed6;
  --figma-color-border-oncomponent-strong: rgba(255, 255, 255, 1);
  --figma-color-border-ondanger: #c4381c;
  --figma-color-border-ondanger-strong: rgba(255, 255, 255, 1);
  --figma-color-border-onselected: #667799;
  --figma-color-border-onselected-strong: rgba(255, 255, 255, 0.9);
  --figma-color-border-onsuccess: #078348;
  --figma-color-border-onsuccess-strong: rgba(255, 255, 255, 1);
  --figma-color-border-onwarning: #e4a711;
  --figma-color-border-onwarning-strong: rgba(0, 0, 0, 0.9);
  --figma-color-border-selected: #0c8ce9;
  --figma-color-border-selected-strong: #7cc4f8;
  --figma-color-border-strong: rgba(255, 255, 255, 0.9);
  --figma-color-border-success: #0a5c35;
  --figma-color-border-success-strong: #79d297;
  --figma-color-border-warning: #925711;
  --figma-color-border-warning-strong: #f7d15f;
  --figma-color-icon: rgba(255, 255, 255, 1);
  --figma-color-icon-brand: #7cc4f8;
  --figma-color-icon-brand-pressed: #0c8ce9;
  --figma-color-icon-brand-secondary: #536383;
  --figma-color-icon-brand-tertiary: #394360;
  --figma-color-icon-component: #d1a8ff;
  --figma-color-icon-component-pressed: #d6b6fb;
  --figma-color-icon-component-secondary: #6b5884;
  --figma-color-icon-component-tertiary: #6b5884;
  --figma-color-icon-danger: #e03e1a;
  --figma-color-icon-danger-hover: #fbbcb6;
  --figma-color-icon-danger-pressed: #fbbcb6;
  --figma-color-icon-danger-secondary: #e03e1a;
  --figma-color-icon-danger-secondary-hover: #e03e1a;
  --figma-color-icon-danger-tertiary: #e03e1a;
  --figma-color-icon-disabled: rgba(255, 255, 255, 0.4);
  --figma-color-icon-hover: rgba(255, 255, 255, 1);
  --figma-color-icon-onbrand: rgba(255, 255, 255, 1);
  --figma-color-icon-onbrand-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-onbrand-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-oncomponent: rgba(255, 255, 255, 1);
  --figma-color-icon-oncomponent-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-oncomponent-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-ondanger: rgba(255, 255, 255, 1);
  --figma-color-icon-ondanger-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-ondanger-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-ondisabled: #2c2c2c;
  --figma-color-icon-oninverse: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onselected: rgba(255, 255, 255, 1);
  --figma-color-icon-onselected-secondary: rgba(255, 255, 255, 0.7);
  --figma-color-icon-onselected-strong: rgba(255, 255, 255, 1);
  --figma-color-icon-onselected-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-onsuccess: rgba(255, 255, 255, 1);
  --figma-color-icon-onsuccess-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-onsuccess-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-onwarning: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onwarning-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-icon-onwarning-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-icon-pressed: #0a6dc2;
  --figma-color-icon-secondary: rgba(255, 255, 255, 0.7);
  --figma-color-icon-secondary-hover: rgba(255, 255, 255, 1);
  --figma-color-icon-selected: #7cc4f8;
  --figma-color-icon-selected-secondary: #7cc4f8;
  --figma-color-icon-selected-tertiary: #7cc4f8;
  --figma-color-icon-success: #198f51;
  --figma-color-icon-success-pressed: #a1e8b9;
  --figma-color-icon-success-secondary: #198f51;
  --figma-color-icon-success-tertiary: #198f51;
  --figma-color-icon-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-tertiary-hover: rgba(255, 255, 255, 1);
  --figma-color-icon-warning: #f3c11b;
  --figma-color-icon-warning-pressed: #f7d15f;
  --figma-color-icon-warning-secondary: #f3c11b;
  --figma-color-icon-warning-tertiary: #f3c11b;
  --figma-color-text: rgba(255, 255, 255, 1);
  --figma-color-text-brand: #7cc4f8;
  --figma-color-text-brand-secondary: #7cc4f8;
  --figma-color-text-brand-tertiary: #7cc4f8;
  --figma-color-text-component: #d1a8ff;
  --figma-color-text-component-pressed: #d6b6fb;
  --figma-color-text-component-secondary: #6b5884;
  --figma-color-text-component-tertiary: #6b5884;
  --figma-color-text-danger: #fca397;
  --figma-color-text-danger-secondary: #fca397;
  --figma-color-text-danger-tertiary: #fca397;
  --figma-color-text-disabled: rgba(255, 255, 255, 0.4);
  --figma-color-text-hover: rgba(255, 255, 255, 1);
  --figma-color-text-onbrand: rgba(255, 255, 255, 1);
  --figma-color-text-onbrand-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-onbrand-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-oncomponent: rgba(255, 255, 255, 1);
  --figma-color-text-oncomponent-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-oncomponent-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-ondanger: rgba(255, 255, 255, 1);
  --figma-color-text-ondanger-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-ondanger-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-ondisabled: #2c2c2c;
  --figma-color-text-oninverse: rgba(0, 0, 0, 0.9);
  --figma-color-text-onselected: rgba(255, 255, 255, 0.9);
  --figma-color-text-onselected-secondary: rgba(255, 255, 255, 0.7);
  --figma-color-text-onselected-strong: rgba(255, 255, 255, 1);
  --figma-color-text-onselected-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-onsuccess: rgba(255, 255, 255, 1);
  --figma-color-text-onsuccess-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-onsuccess-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-onwarning: rgba(0, 0, 0, 0.9);
  --figma-color-text-onwarning-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-text-onwarning-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-text-secondary: rgba(255, 255, 255, 0.7);
  --figma-color-text-secondary-hover: rgba(255, 255, 255, 1);
  --figma-color-text-selected: #7cc4f8;
  --figma-color-text-selected-secondary: #7cc4f8;
  --figma-color-text-selected-tertiary: #7cc4f8;
  --figma-color-text-success: #79d297;
  --figma-color-text-success-secondary: #79d297;
  --figma-color-text-success-tertiary: #79d297;
  --figma-color-text-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-tertiary-hover: rgba(255, 255, 255, 1);
  --figma-color-text-warning: #f7d15f;
  --figma-color-text-warning-secondary: #f7d15f;
  --figma-color-text-warning-tertiary: #f7d15f;
}

:root .figjam {
  --figma-color-bg: rgba(255, 255, 255, 1);
  --figma-color-bg-brand: #9747ff;
  --figma-color-bg-brand-hover: #8638e5;
  --figma-color-bg-brand-pressed: #8638e5;
  --figma-color-bg-brand-secondary: #7c2bda;
  --figma-color-bg-brand-tertiary: #f1e5ff;
  --figma-color-bg-component: #9747ff;
  --figma-color-bg-component-hover: #8638e5;
  --figma-color-bg-component-pressed: #8638e5;
  --figma-color-bg-component-secondary: #7c2bda;
  --figma-color-bg-component-tertiary: #f1e5ff;
  --figma-color-bg-danger: #f24822;
  --figma-color-bg-danger-hover: #dc3412;
  --figma-color-bg-danger-pressed: #dc3412;
  --figma-color-bg-danger-secondary: #bd2915;
  --figma-color-bg-danger-tertiary: #ffe2e0;
  --figma-color-bg-disabled: #d9d9d9;
  --figma-color-bg-disabled-secondary: #b3b3b3;
  --figma-color-bg-hover: #f5f5f5;
  --figma-color-bg-inverse: #2c2c2c;
  --figma-color-bg-onselected: #e4ccff;
  --figma-color-bg-onselected-hover: #e4ccff;
  --figma-color-bg-onselected-pressed: #e4ccff;
  --figma-color-bg-pressed: #f5f5f5;
  --figma-color-bg-secondary: #f5f5f5;
  --figma-color-bg-selected: #f1e5ff;
  --figma-color-bg-selected-hover: #e4ccff;
  --figma-color-bg-selected-pressed: #e4ccff;
  --figma-color-bg-selected-secondary: #f9f5ff;
  --figma-color-bg-selected-strong: #9747ff;
  --figma-color-bg-selected-tertiary: #f9f5ff;
  --figma-color-bg-success: #14ae5c;
  --figma-color-bg-success-hover: #009951;
  --figma-color-bg-success-pressed: #009951;
  --figma-color-bg-success-secondary: #008043;
  --figma-color-bg-success-tertiary: #cff7d3;
  --figma-color-bg-tertiary: #e6e6e6;
  --figma-color-bg-warning: #ffcd29;
  --figma-color-bg-warning-hover: #ffc21a;
  --figma-color-bg-warning-pressed: #ffc21a;
  --figma-color-bg-warning-secondary: #fab815;
  --figma-color-bg-warning-tertiary: #fff1c2;
  --figma-color-border: #e6e6e6;
  --figma-color-border-brand: #e4ccff;
  --figma-color-border-brand-strong: #8638e5;
  --figma-color-border-component: #e4ccff;
  --figma-color-border-component-hover: #9747ff;
  --figma-color-border-component-strong: #8638e5;
  --figma-color-border-danger: #ffc7c2;
  --figma-color-border-danger-strong: #dc3412;
  --figma-color-border-disabled: #e6e6e6;
  --figma-color-border-disabled-strong: rgba(0, 0, 0, 0.3);
  --figma-color-border-onbrand: #8638e5;
  --figma-color-border-onbrand-strong: rgba(255, 255, 255, 1);
  --figma-color-border-oncomponent: #8638e5;
  --figma-color-border-oncomponent-strong: rgba(255, 255, 255, 1);
  --figma-color-border-ondanger: #dc3412;
  --figma-color-border-ondanger-strong: rgba(255, 255, 255, 1);
  --figma-color-border-onselected: #e4ccff;
  --figma-color-border-onselected-strong: rgba(0, 0, 0, 0.9);
  --figma-color-border-onsuccess: #009951;
  --figma-color-border-onsuccess-strong: rgba(255, 255, 255, 1);
  --figma-color-border-onwarning: #fab815;
  --figma-color-border-onwarning-strong: rgba(0, 0, 0, 0.9);
  --figma-color-border-selected: #9747ff;
  --figma-color-border-selected-strong: #8638e5;
  --figma-color-border-strong: #2c2c2c;
  --figma-color-border-success: #aff4c6;
  --figma-color-border-success-strong: #009951;
  --figma-color-border-warning: #ffe8a3;
  --figma-color-border-warning-strong: #b86200;
  --figma-color-icon: rgba(0, 0, 0, 0.9);
  --figma-color-icon-brand: #8638e5;
  --figma-color-icon-brand-pressed: #7c2bda;
  --figma-color-icon-brand-secondary: #d9b8ff;
  --figma-color-icon-brand-tertiary: #e4ccff;
  --figma-color-icon-component: #8638e5;
  --figma-color-icon-component-pressed: #7c2bda;
  --figma-color-icon-component-secondary: #c5b2dc;
  --figma-color-icon-component-tertiary: #c5b2dc;
  --figma-color-icon-danger: #f24822;
  --figma-color-icon-danger-hover: #bd2915;
  --figma-color-icon-danger-pressed: #bd2915;
  --figma-color-icon-danger-secondary: #f24822;
  --figma-color-icon-danger-secondary-hover: #f24822;
  --figma-color-icon-danger-tertiary: #f24822;
  --figma-color-icon-disabled: rgba(0, 0, 0, 0.3);
  --figma-color-icon-hover: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onbrand: rgba(255, 255, 255, 1);
  --figma-color-icon-onbrand-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-onbrand-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-oncomponent: rgba(255, 255, 255, 1);
  --figma-color-icon-oncomponent-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-oncomponent-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-ondanger: rgba(255, 255, 255, 1);
  --figma-color-icon-ondanger-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-ondanger-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-ondisabled: rgba(255, 255, 255, 1);
  --figma-color-icon-oninverse: rgba(255, 255, 255, 0.9);
  --figma-color-icon-onselected: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onselected-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-icon-onselected-strong: rgba(255, 255, 255, 1);
  --figma-color-icon-onselected-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-icon-onsuccess: rgba(255, 255, 255, 1);
  --figma-color-icon-onsuccess-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-icon-onsuccess-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-icon-onwarning: rgba(0, 0, 0, 0.9);
  --figma-color-icon-onwarning-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-icon-onwarning-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-icon-pressed: #8638e5;
  --figma-color-icon-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-icon-secondary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-icon-selected: #8638e5;
  --figma-color-icon-selected-secondary: #8638e5;
  --figma-color-icon-selected-tertiary: #8638e5;
  --figma-color-icon-success: #14ae5c;
  --figma-color-icon-success-pressed: #008043;
  --figma-color-icon-success-secondary: #14ae5c;
  --figma-color-icon-success-tertiary: #14ae5c;
  --figma-color-icon-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-icon-tertiary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-icon-warning: #ffcd29;
  --figma-color-icon-warning-pressed: #b86200;
  --figma-color-icon-warning-secondary: #ffcd29;
  --figma-color-icon-warning-tertiary: #ffcd29;
  --figma-color-text: rgba(0, 0, 0, 0.9);
  --figma-color-text-brand: #8638e5;
  --figma-color-text-brand-secondary: #8638e5;
  --figma-color-text-brand-tertiary: #8638e5;
  --figma-color-text-component: #8638e5;
  --figma-color-text-component-pressed: #7c2bda;
  --figma-color-text-component-secondary: #c5b2dc;
  --figma-color-text-component-tertiary: #c5b2dc;
  --figma-color-text-danger: #dc3412;
  --figma-color-text-danger-secondary: #dc3412;
  --figma-color-text-danger-tertiary: #dc3412;
  --figma-color-text-disabled: rgba(0, 0, 0, 0.3);
  --figma-color-text-hover: rgba(0, 0, 0, 0.9);
  --figma-color-text-onbrand: rgba(255, 255, 255, 1);
  --figma-color-text-onbrand-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-onbrand-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-oncomponent: rgba(255, 255, 255, 1);
  --figma-color-text-oncomponent-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-oncomponent-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-ondanger: rgba(255, 255, 255, 1);
  --figma-color-text-ondanger-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-ondanger-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-ondisabled: rgba(255, 255, 255, 1);
  --figma-color-text-oninverse: rgba(255, 255, 255, 0.9);
  --figma-color-text-onselected: rgba(0, 0, 0, 0.9);
  --figma-color-text-onselected-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-text-onselected-strong: rgba(255, 255, 255, 1);
  --figma-color-text-onselected-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-text-onsuccess: rgba(255, 255, 255, 1);
  --figma-color-text-onsuccess-secondary: rgba(255, 255, 255, 0.8);
  --figma-color-text-onsuccess-tertiary: rgba(255, 255, 255, 0.4);
  --figma-color-text-onwarning: rgba(0, 0, 0, 0.9);
  --figma-color-text-onwarning-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-text-onwarning-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-text-secondary: rgba(0, 0, 0, 0.5);
  --figma-color-text-secondary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-text-selected: #8638e5;
  --figma-color-text-selected-secondary: #8638e5;
  --figma-color-text-selected-tertiary: #8638e5;
  --figma-color-text-success: #009951;
  --figma-color-text-success-secondary: #009951;
  --figma-color-text-success-tertiary: #009951;
  --figma-color-text-tertiary: rgba(0, 0, 0, 0.3);
  --figma-color-text-tertiary-hover: rgba(0, 0, 0, 0.9);
  --figma-color-text-warning: #b86200;
  --figma-color-text-warning-secondary: #b86200;
  --figma-color-text-warning-tertiary: #b86200;
}