diff --git a/assets/partnerbank-test-theme/theme-nested.json b/assets/partnerbank-test-theme/theme-nested.json new file mode 100644 index 00000000..17cd6c8a --- /dev/null +++ b/assets/partnerbank-test-theme/theme-nested.json @@ -0,0 +1,218 @@ +{ + "footer": { + "color": { + "text": "#f8fffd", + "background": "#4d6260" + } + }, + "header": { + "color": { + "text": "#f8fffd", + "background": "#4d6260" + } + }, + "pill": { + "color": { + "background": { + "default": "#e1e5e8", + "hover": "#c7d0d1" + } + }, + "border-radius": "12px" + }, + "search": { + "color": { + "background": "#f5f8fa" + }, + "action": { + "color": { + "background": { + "default": "#f5f8fa", + "hover": "#edf1f2" + } + } + } + }, + "shadow": { + "default": "0 2px 10px 0 rgba(20,20,19,0.20)" + }, + "border": { + "radius": { + "default": "4px", + "large": "8px", + "small": "2px" + } + }, + "color": { + "action": { + "background": { + "hover": "#f5f8fa", + "selected": "#edf1f2", + "selected-hover": "#e1e5e8" + }, + "border": { + "focus": "#4bab94", + "focus-on-dark": "#f8fffd" + }, + "disabled": "#a5b0ae", + "disabled-button": "#b1ada6", + "disabled-toggle": "#b1ada6", + "disabled-text-input": "#b1ada6", + "on-dark": { + "active": "#a5b0ae", + "default": "#dcf5ef", + "hover": "#e1e5e8" + }, + "primary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "secondary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "text": { + "on-dark": "#4d6260", + "on-disabled": "#ffffff", + "on-hover": "#4d6260", + "on-selected": "#4d6260", + "on-selected-hover": "#4d6260" + } + }, + "background": { + "default": "#f8fffd", + "gray-lightest": "#edf1f2", + "01": "#f5f8fa", + "02": "#e1e5e8", + "inverse": "#4d6260" + }, + "border": { + "default": { + "on-dark": "#96c6c1", + "on-light": "#e1e5e8" + } + }, + "brand": { + "on-primary": "#ffffff", + "on-secondary": "#ffffff", + "primary": "#4bab94", + "secondary": "#4bab94" + }, + "feedback": { + "error": "#ff33b4", + "error-light": "#fadef4", + "information": "#ffeb1f", + "information-light": "#fff4d1", + "success": "#008a60", + "success-light": "#dff7df", + "warning": "#f38b00" + }, + "text": { + "default": { + "on-dark": "#ffffff", + "on-light": "#4d6260" + }, + "helper": "#96c6c1", + "inverse": "#f8fffd" + } + }, + "font": { + "body": { + "family": { + "bold": "serif, Arial", + "default": "serif, Arial", + "narrow": "serif, Arial" + }, + "size": { + "default": "0.875rem", + "large": "1rem", + "small": "0.75rem" + }, + "weight": { + "bold": "700", + "default": "400" + } + }, + "family": { + "eyebrow": "serif, Arial", + "heading": "serif, Arial" + }, + "heading": { + "size": { + "display": { + "01": "5rem", + "02": "3rem", + "03": "2rem" + }, + "eyebrow": { + "01": "0.75rem", + "02": "1rem" + }, + "level": { + "01": "2rem", + "02": "1.75rem", + "03": "1.5rem", + "04": "1.25rem", + "05": "1.125rem", + "06": "1rem" + } + } + } + }, + "letter": { + "spacing": { + "default": "normal", + "eyebrow": "1.8px" + } + }, + "line": { + "height": { + "default": "1.5", + "heading": "1.25", + "single": "1" + } + }, + "backdrop": { + "color": { + "background": "rgba(20,20,19,0.7)" + } + }, + "button": { + "border-radius": "2px" + }, + "forms": { + "color": { + "background": { + "default": "#f8fffd" + }, + "border": { + "default": "#96c6c1" + } + } + }, + "grid": { + "gutters": { + "lg": "1rem", + "md": "1rem", + "sm": "0.5rem" + }, + "margin": { + "lg": "1rem", + "md": "1rem", + "sm": "0.5rem" + } + }, + "link": { + "color": { + "default": "#4bab94", + "on-dark": "#dcf5ef" + } + }, + "scrollbar": { + "color": { + "background": "#a5b0ae" + } + } +} \ No newline at end of file diff --git a/assets/partnerbank-test-theme/theme-variables.css b/assets/partnerbank-test-theme/theme-variables.css new file mode 100644 index 00000000..116f6210 --- /dev/null +++ b/assets/partnerbank-test-theme/theme-variables.css @@ -0,0 +1,105 @@ +/** + * Do not edit directly + * Generated on Thu, 11 May 2023 09:28:11 GMT + */ + +:root { + --made-backdrop-color-background: rgba(20,20,19,0.7); /* Background on overlay used with modals */ + --made-line-height-single: 1; /* Line height for single line text elements displayed in components */ + --made-line-height-heading: 1.25; /* Headings line-height */ + --made-line-height-default: 1.5; /* Default line height. */ + --made-letter-spacing-eyebrow: 1.8px; /* Default letter spacing for all text. */ + --made-letter-spacing-default: normal; /* Default letter spacing for all text. */ + --made-color-text-default-on-dark: #ffffff; /* Color of body text on dark background. */ + --made-color-feedback-success: #008a60; /* Color for success or positive state */ + --made-color-feedback-information: #ffeb1f; /* Color for neutral or optional state */ + --made-color-feedback-error: #ff33b4; /* Color for error state */ + --made-color-brand-on-secondary: #ffffff; /* The text color on your secondary brand color */ + --made-color-brand-on-primary: #ffffff; /* The text color on your primary brand color */ + --made-color-action-disabled-text-input: rgba(177, 173, 166, 0.1); /* Disabled state for text inputs. Opacity at 10% */ + --made-color-action-disabled-toggle: rgba(177, 173, 166, 0.25); /* Disabled state for toggles. Opacity at 25% */ + --made-color-action-disabled-button: rgba(177, 173, 166, 0.5); /* Disabled state for buttons. Opacity at 50% */ + --made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); /* Shadow for all content cards, dropdowns, dialogs, datepicker etc. */ + --made-scrollbar-color-background: var(--made-color-gray-03); /* Background color for scrollbar component */ + --made-grid-margin-sm: var(--made-space-2-x); /* Margin size on small breakpoint. */ + --made-grid-margin-md: var(--made-space-4-x); /* Margin size on medium breakpoint. */ + --made-grid-margin-lg: var(--made-space-4-x); /* Margin size on large breakpoint. */ + --made-grid-gutters-sm: var(--made-space-2-x); /* Grid gutter size on small breakpoint. */ + --made-grid-gutters-md: var(--made-space-4-x); /* Gutter size on medium breakpoint. */ + --made-grid-gutters-lg: var(--made-space-4-x); /* Gutter size on large breakpoint. */ + --made-forms-color-border-default: var(--made-color-gray-05); /* Default border color for forms. */ + --made-font-heading-size-level-06: var(--made-font-size-06); /* Font Size for Heading 6 (H6) */ + --made-font-heading-size-level-05: var(--made-font-size-07); /* Font Size for Heading 5 (H5) */ + --made-font-heading-size-level-04: var(--made-font-size-08); /* Font Size for Heading 4 (H4) */ + --made-font-heading-size-level-03: var(--made-font-size-09); /* Font Size for Heading 3 (H3) */ + --made-font-heading-size-level-02: var(--made-font-size-10); /* Font Size for Heading 2 (H2) */ + --made-font-heading-size-level-01: var(--made-font-size-11); /* Font Size for Heading 1 (H1) */ + --made-font-heading-size-display-03: var(--made-font-size-11); /* Font Size for Display 03. */ + --made-font-heading-size-display-02: var(--made-font-size-13); /* Font Size for Display 02. */ + --made-font-heading-size-display-01: var(--made-font-size-15); /* Font Size for Display 01. */ + --made-font-family-heading: var(--made-font-family-light); /* Font family for headings (H1,H2 and display text) */ + --made-font-family-eyebrow: var(--made-font-family-bold); /* Font family for headings (H1,H2 and display text) */ + --made-font-body-weight-default: var(--made-font-weight-default); /* Default font weight for body text. */ + --made-font-body-weight-bold: var(--made-font-weight-bold); /* Bold font weight for body text. */ + --made-font-body-size-small: var(--made-font-size-02); /* Small font size for body text. */ + --made-font-body-size-large: var(--made-font-size-06); /* Large font size for body text. */ + --made-font-body-size-default: var(--made-font-size-04); /* Default font size for body text. */ + --made-font-body-family-narrow: var(--made-font-family-narrow); /* Default font family for narrow/small text. Used on tooltip and notification */ + --made-font-body-family-default: var(--made-font-family-regular); /* Default font family for body text. */ + --made-font-body-family-bold: var(--made-font-family-medium); /* Font family for bold body text. */ + --made-color-text-inverse: var(--made-color-white); /* Inverse text/icon color */ + --made-color-text-helper: var(--made-color-gray-05); /* Text color of helper text on forms, cards etc. */ + --made-color-text-default-on-light: var(--made-color-gray-07); /* Color of body text on light background. */ + --made-color-feedback-warning: var(--made-color-gold-04); /* Color for warning state */ + --made-color-feedback-success-light: var(--made-color-green-success-01); /* Color for light variant of success or positive state */ + --made-color-feedback-information-light: var(--made-color-yellow-01); /* Color for light variant of neutral or optional state */ + --made-color-feedback-error-light: var(--made-color-red-error-01); /* Color for light variant of error state */ + --made-color-brand-secondary: var(--made-color-teal-03); /* The secondary color of your brand */ + --made-color-brand-primary: var(--made-color-teal-03); /* The primary color of your brand */ + --made-color-border-default-on-light: var(--made-color-gray-02); /* Default Border color used for layout elements e.g. accordion, table. */ + --made-color-border-default-on-dark: var(--made-color-gray-05); /* Default Border color used for layout elements on a dark background. */ + --made-color-background-inverse: var(--made-color-gray-07); /* High contrast backgrounds/elements */ + --made-color-background-02: var(--made-color-gray-02); /* Tertiary background color of the application. */ + --made-color-background-01: var(--made-color-gray-01-25); /* Secondary background color of the application. */ + --made-color-background-gray-lightest: var(--made-color-gray-01-5); /* Used on background of breadcrumb and pill components. */ + --made-color-background-default: var(--made-color-white); /* Main background color of the application. */ + --made-color-action-text-on-disabled: var(--made-color-text-default-on-dark); /* Text color on top of disabled state color */ + --made-color-action-text-on-dark: var(--made-color-gray-07); /* Text color on top of interactive color on a dark background */ + --made-color-action-primary-hover: var(--made-color-teal-05); /* Color of primary interactive color on hover e.g. buttons */ + --made-color-action-primary-active: var(--made-color-teal-06); /* Color of primary interactive color on active e.g. buttons */ + --made-color-action-on-dark-hover: var(--made-color-gray-02); /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-on-dark-default: var(--made-color-teal-01); /* Color of interactive color on dark background e.g. buttons */ + --made-color-action-on-dark-active: var(--made-color-gray-03); /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-disabled: var(--made-color-gray-03); /* Global color for disabled state. */ + --made-color-action-border-focus-on-dark: var(--made-color-white); /* Outline color for focus state on dark backgrounds. */ + --made-color-action-background-selected-hover: var(--made-color-gray-02); /* Background color for hover state of on selected UI Elements */ + --made-color-action-background-selected: var(--made-color-gray-01-5); /* Background color for selected state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-hover: var(--made-color-gray-01-25); /* Background color for hover state of UI Elements such as tables, dropdowns... */ + --made-border-radius-small: var(--made-border-radius-01); /* Small border radius for UI components */ + --made-border-radius-large: var(--made-border-radius-04); /* Large border radius for UI components */ + --made-border-radius-default: var(--made-border-radius-02); /* Default border radius for UI components */ + --made-search-action-color-background-hover: var(--made-color-gray-01-5); /* Background color for the hover state of action within the search component */ + --made-pill-border-radius: var(--made-border-radius-05); /* Pill Border Radius */ + --made-pill-color-background-hover: var(--made-color-gray-02-5); /* Background color for pill components hover state for the close icon element. */ + --made-header-color-background: var(--made-color-gray-07); /* Background color for header component */ + --made-header-color-text: var(--made-color-white); /* Text color on header component */ + --made-footer-color-background: var(--made-color-gray-07); /* Background color for footer component */ + --made-footer-color-text: var(--made-color-white); /* Text color on footer component */ + --made-link-color-on-dark: var(--made-color-action-on-dark-default); /* Text color for links on dark backgrounds */ + --made-forms-color-background-default: var(--made-color-background-default); /* Default background color for forms. */ + --made-button-border-radius: var(--made-border-radius-small); /* Button Border Radius */ + --made-font-heading-size-eyebrow-02: var(--made-font-body-size-large); /* Font size for default eyebrow text */ + --made-font-heading-size-eyebrow-01: var(--made-font-body-size-small); /* Font size for small eyebrow text */ + --made-color-action-text-on-selected-hover: var(--made-color-text-default-on-light); /* Text color on top of hover and selected state of UI Elements */ + --made-color-action-text-on-selected: var(--made-color-text-default-on-light); /* Text color on top of selected state of UI Elements */ + --made-color-action-text-on-hover: var(--made-color-text-default-on-light); /* Text color on top of hover state of UI Elements */ + --made-color-action-secondary-hover: var(--made-color-action-primary-hover); /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-secondary-default: var(--made-color-brand-secondary); /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-secondary-active: var(--made-color-action-primary-active); /* Color of secondary interactive color e.g. secondary button */ + --made-color-action-primary-default: var(--made-color-brand-primary); /* Color of primary interactive color e.g. buttons */ + --made-search-color-background: var(--made-color-background-01); /* Background color for search input component */ + --made-pill-color-background-default: var(--made-color-background-02); /* Background color for pill component. */ + --made-link-color-default: var(--made-color-action-primary-default); /* Text color for link */ + --made-color-action-border-focus: var(--made-color-action-primary-default); /* Outline color for focus state. */ + --made-search-action-color-background-default: var(--made-search-color-background); /* Background color for action within the search component */ +} diff --git a/assets/partnerbank-test-theme/theme.css b/assets/partnerbank-test-theme/theme.css new file mode 100644 index 00000000..da258e1c --- /dev/null +++ b/assets/partnerbank-test-theme/theme.css @@ -0,0 +1,105 @@ +/** + * Do not edit directly + * Generated on Thu, 11 May 2023 09:28:11 GMT + */ + +:root { + --made-footer-color-text: #f8fffd; /* Text color on footer component */ + --made-footer-color-background: #4d6260; /* Background color for footer component */ + --made-header-color-text: #f8fffd; /* Text color on header component */ + --made-header-color-background: #4d6260; /* Background color for header component */ + --made-pill-color-background-default: #e1e5e8; /* Background color for pill component. */ + --made-pill-color-background-hover: #c7d0d1; /* Background color for pill components hover state for the close icon element. */ + --made-pill-border-radius: 12px; /* Pill Border Radius */ + --made-search-color-background: #f5f8fa; /* Background color for search input component */ + --made-search-action-color-background-default: #f5f8fa; /* Background color for action within the search component */ + --made-search-action-color-background-hover: #edf1f2; /* Background color for the hover state of action within the search component */ + --made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); /* Shadow for all content cards, dropdowns, dialogs, datepicker etc. */ + --made-border-radius-default: 4px; /* Default border radius for UI components */ + --made-border-radius-large: 8px; /* Large border radius for UI components */ + --made-border-radius-small: 2px; /* Small border radius for UI components */ + --made-color-action-background-hover: #f5f8fa; /* Background color for hover state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-selected: #edf1f2; /* Background color for selected state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-selected-hover: #e1e5e8; /* Background color for hover state of on selected UI Elements */ + --made-color-action-border-focus: #4bab94; /* Outline color for focus state. */ + --made-color-action-border-focus-on-dark: #f8fffd; /* Outline color for focus state on dark backgrounds. */ + --made-color-action-disabled: #a5b0ae; /* Global color for disabled state. */ + --made-color-action-disabled-button: rgba(177, 173, 166, 0.5); /* Disabled state for buttons. Opacity at 50% */ + --made-color-action-disabled-toggle: rgba(177, 173, 166, 0.25); /* Disabled state for toggles. Opacity at 25% */ + --made-color-action-disabled-text-input: rgba(177, 173, 166, 0.1); /* Disabled state for text inputs. Opacity at 10% */ + --made-color-action-on-dark-active: #a5b0ae; /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-on-dark-default: #dcf5ef; /* Color of interactive color on dark background e.g. buttons */ + --made-color-action-on-dark-hover: #e1e5e8; /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-primary-active: #23473d; /* Color of primary interactive color on active e.g. buttons */ + --made-color-action-primary-default: #4bab94; /* Color of primary interactive color e.g. buttons */ + --made-color-action-primary-hover: #266555; /* Color of primary interactive color on hover e.g. buttons */ + --made-color-action-secondary-active: #23473d; /* Color of secondary interactive color e.g. secondary button */ + --made-color-action-secondary-default: #4bab94; /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-secondary-hover: #266555; /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-text-on-dark: #4d6260; /* Text color on top of interactive color on a dark background */ + --made-color-action-text-on-disabled: #ffffff; /* Text color on top of disabled state color */ + --made-color-action-text-on-hover: #4d6260; /* Text color on top of hover state of UI Elements */ + --made-color-action-text-on-selected: #4d6260; /* Text color on top of selected state of UI Elements */ + --made-color-action-text-on-selected-hover: #4d6260; /* Text color on top of hover and selected state of UI Elements */ + --made-color-background-default: #f8fffd; /* Main background color of the application. */ + --made-color-background-gray-lightest: #edf1f2; /* Used on background of breadcrumb and pill components. */ + --made-color-background-01: #f5f8fa; /* Secondary background color of the application. */ + --made-color-background-02: #e1e5e8; /* Tertiary background color of the application. */ + --made-color-background-inverse: #4d6260; /* High contrast backgrounds/elements */ + --made-color-border-default-on-dark: #96c6c1; /* Default Border color used for layout elements on a dark background. */ + --made-color-border-default-on-light: #e1e5e8; /* Default Border color used for layout elements e.g. accordion, table. */ + --made-color-brand-on-primary: #ffffff; /* The text color on your primary brand color */ + --made-color-brand-on-secondary: #ffffff; /* The text color on your secondary brand color */ + --made-color-brand-primary: #4bab94; /* The primary color of your brand */ + --made-color-brand-secondary: #4bab94; /* The secondary color of your brand */ + --made-color-feedback-error: #ff33b4; /* Color for error state */ + --made-color-feedback-error-light: #fadef4; /* Color for light variant of error state */ + --made-color-feedback-information: #ffeb1f; /* Color for neutral or optional state */ + --made-color-feedback-information-light: #fff4d1; /* Color for light variant of neutral or optional state */ + --made-color-feedback-success: #008a60; /* Color for success or positive state */ + --made-color-feedback-success-light: #dff7df; /* Color for light variant of success or positive state */ + --made-color-feedback-warning: #f38b00; /* Color for warning state */ + --made-color-text-default-on-dark: #ffffff; /* Color of body text on dark background. */ + --made-color-text-default-on-light: #4d6260; /* Color of body text on light background. */ + --made-color-text-helper: #96c6c1; /* Text color of helper text on forms, cards etc. */ + --made-color-text-inverse: #f8fffd; /* Inverse text/icon color */ + --made-font-body-family-bold: serif, Arial; /* Font family for bold body text. */ + --made-font-body-family-default: serif, Arial; /* Default font family for body text. */ + --made-font-body-family-narrow: serif, Arial; /* Default font family for narrow/small text. Used on tooltip and notification */ + --made-font-body-size-default: 0.875rem; /* Default font size for body text. */ + --made-font-body-size-large: 1rem; /* Large font size for body text. */ + --made-font-body-size-small: 0.75rem; /* Small font size for body text. */ + --made-font-body-weight-bold: 700; /* Bold font weight for body text. */ + --made-font-body-weight-default: 400; /* Default font weight for body text. */ + --made-font-family-eyebrow: serif, Arial; /* Font family for headings (H1,H2 and display text) */ + --made-font-family-heading: serif, Arial; /* Font family for headings (H1,H2 and display text) */ + --made-font-heading-size-display-01: 5rem; /* Font Size for Display 01. */ + --made-font-heading-size-display-02: 3rem; /* Font Size for Display 02. */ + --made-font-heading-size-display-03: 2rem; /* Font Size for Display 03. */ + --made-font-heading-size-eyebrow-01: 0.75rem; /* Font size for small eyebrow text */ + --made-font-heading-size-eyebrow-02: 1rem; /* Font size for default eyebrow text */ + --made-font-heading-size-level-01: 2rem; /* Font Size for Heading 1 (H1) */ + --made-font-heading-size-level-02: 1.75rem; /* Font Size for Heading 2 (H2) */ + --made-font-heading-size-level-03: 1.5rem; /* Font Size for Heading 3 (H3) */ + --made-font-heading-size-level-04: 1.25rem; /* Font Size for Heading 4 (H4) */ + --made-font-heading-size-level-05: 1.125rem; /* Font Size for Heading 5 (H5) */ + --made-font-heading-size-level-06: 1rem; /* Font Size for Heading 6 (H6) */ + --made-letter-spacing-default: normal; /* Default letter spacing for all text. */ + --made-letter-spacing-eyebrow: 1.8px; /* Default letter spacing for all text. */ + --made-line-height-default: 1.5; /* Default line height. */ + --made-line-height-heading: 1.25; /* Headings line-height */ + --made-line-height-single: 1; /* Line height for single line text elements displayed in components */ + --made-backdrop-color-background: rgba(20,20,19,0.7); /* Background on overlay used with modals */ + --made-button-border-radius: 2px; /* Button Border Radius */ + --made-forms-color-background-default: #f8fffd; /* Default background color for forms. */ + --made-forms-color-border-default: #96c6c1; /* Default border color for forms. */ + --made-grid-gutters-lg: 1rem; /* Gutter size on large breakpoint. */ + --made-grid-gutters-md: 1rem; /* Gutter size on medium breakpoint. */ + --made-grid-gutters-sm: 0.5rem; /* Grid gutter size on small breakpoint. */ + --made-grid-margin-lg: 1rem; /* Margin size on large breakpoint. */ + --made-grid-margin-md: 1rem; /* Margin size on medium breakpoint. */ + --made-grid-margin-sm: 0.5rem; /* Margin size on small breakpoint. */ + --made-link-color-default: #4bab94; /* Text color for link */ + --made-link-color-on-dark: #dcf5ef; /* Text color for links on dark backgrounds */ + --made-scrollbar-color-background: #a5b0ae; /* Background color for scrollbar component */ +} diff --git a/assets/partnerbank-test-theme/theme.json b/assets/partnerbank-test-theme/theme.json new file mode 100644 index 00000000..0bce8e24 --- /dev/null +++ b/assets/partnerbank-test-theme/theme.json @@ -0,0 +1,99 @@ +{ +"MadeFooterColorText": "MadeColorWhite", +"MadeFooterColorBackground": "MadeColorGray07", +"MadeHeaderColorText": "MadeColorWhite", +"MadeHeaderColorBackground": "MadeColorGray07", +"MadePillColorBackgroundDefault": "MadeColorBackground02", +"MadePillColorBackgroundHover": "MadeColorGray025", +"MadePillBorderRadius": "MadeBorderRadius05", +"MadeSearchColorBackground": "MadeColorBackground01", +"MadeSearchActionColorBackgroundDefault": "MadeSearchColorBackground", +"MadeSearchActionColorBackgroundHover": "MadeColorGray015", +"MadeShadowDefault": "0 2px 10px 0 rgba(20,20,19,0.20)", +"MadeBorderRadiusDefault": "MadeBorderRadius02", +"MadeBorderRadiusLarge": "MadeBorderRadius04", +"MadeBorderRadiusSmall": "MadeBorderRadius01", +"MadeColorActionBackgroundHover": "MadeColorGray0125", +"MadeColorActionBackgroundSelected": "MadeColorGray015", +"MadeColorActionBackgroundSelectedHover": "MadeColorGray02", +"MadeColorActionBorderFocus": "MadeColorActionPrimaryDefault", +"MadeColorActionBorderFocusOnDark": "MadeColorWhite", +"MadeColorActionDisabled": "MadeColorGray03", +"MadeColorActionDisabledButton": "#b1ada6", +"MadeColorActionDisabledToggle": "#b1ada6", +"MadeColorActionDisabledTextInput": "#b1ada6", +"MadeColorActionOnDarkActive": "MadeColorGray03", +"MadeColorActionOnDarkDefault": "MadeColorTeal01", +"MadeColorActionOnDarkHover": "MadeColorGray02", +"MadeColorActionPrimaryActive": "MadeColorTeal06", +"MadeColorActionPrimaryDefault": "MadeColorBrandPrimary", +"MadeColorActionPrimaryHover": "MadeColorTeal05", +"MadeColorActionSecondaryActive": "MadeColorActionPrimaryActive", +"MadeColorActionSecondaryDefault": "MadeColorBrandSecondary", +"MadeColorActionSecondaryHover": "MadeColorActionPrimaryHover", +"MadeColorActionTextOnDark": "MadeColorGray07", +"MadeColorActionTextOnDisabled": "MadeColorTextDefaultOnDark", +"MadeColorActionTextOnHover": "MadeColorTextDefaultOnLight", +"MadeColorActionTextOnSelected": "MadeColorTextDefaultOnLight", +"MadeColorActionTextOnSelectedHover": "MadeColorTextDefaultOnLight", +"MadeColorBackgroundDefault": "MadeColorWhite", +"MadeColorBackgroundGrayLightest": "MadeColorGray015", +"MadeColorBackground01": "MadeColorGray0125", +"MadeColorBackground02": "MadeColorGray02", +"MadeColorBackgroundInverse": "MadeColorGray07", +"MadeColorBorderDefaultOnDark": "MadeColorGray05", +"MadeColorBorderDefaultOnLight": "MadeColorGray02", +"MadeColorBrandOnPrimary": "#ffffff", +"MadeColorBrandOnSecondary": "#ffffff", +"MadeColorBrandPrimary": "MadeColorTeal03", +"MadeColorBrandSecondary": "MadeColorTeal03", +"MadeColorFeedbackError": "#ff33b4", +"MadeColorFeedbackErrorLight": "MadeColorRedError01", +"MadeColorFeedbackInformation": "#ffeb1f", +"MadeColorFeedbackInformationLight": "MadeColorYellow01", +"MadeColorFeedbackSuccess": "#008a60", +"MadeColorFeedbackSuccessLight": "MadeColorGreenSuccess01", +"MadeColorFeedbackWarning": "MadeColorGold04", +"MadeColorTextDefaultOnDark": "#ffffff", +"MadeColorTextDefaultOnLight": "MadeColorGray07", +"MadeColorTextHelper": "MadeColorGray05", +"MadeColorTextInverse": "MadeColorWhite", +"MadeFontBodyFamilyBold": "MadeFontFamilyMedium", +"MadeFontBodyFamilyDefault": "MadeFontFamilyRegular", +"MadeFontBodyFamilyNarrow": "MadeFontFamilyNarrow", +"MadeFontBodySizeDefault": "MadeFontSize04", +"MadeFontBodySizeLarge": "MadeFontSize06", +"MadeFontBodySizeSmall": "MadeFontSize02", +"MadeFontBodyWeightBold": "MadeFontWeightBold", +"MadeFontBodyWeightDefault": "MadeFontWeightDefault", +"MadeFontFamilyEyebrow": "MadeFontFamilyBold", +"MadeFontFamilyHeading": "MadeFontFamilyLight", +"MadeFontHeadingSizeDisplay01": "MadeFontSize15", +"MadeFontHeadingSizeDisplay02": "MadeFontSize13", +"MadeFontHeadingSizeDisplay03": "MadeFontSize11", +"MadeFontHeadingSizeEyebrow01": "MadeFontBodySizeSmall", +"MadeFontHeadingSizeEyebrow02": "MadeFontBodySizeLarge", +"MadeFontHeadingSizeLevel01": "MadeFontSize11", +"MadeFontHeadingSizeLevel02": "MadeFontSize10", +"MadeFontHeadingSizeLevel03": "MadeFontSize09", +"MadeFontHeadingSizeLevel04": "MadeFontSize08", +"MadeFontHeadingSizeLevel05": "MadeFontSize07", +"MadeFontHeadingSizeLevel06": "MadeFontSize06", +"MadeLetterSpacingDefault": "normal", +"MadeLetterSpacingEyebrow": "1.8px", +"MadeLineHeightDefault": "1.5", +"MadeLineHeightHeading": "1.25", +"MadeLineHeightSingle": "1", +"MadeBackdropColorBackground": "rgba(20,20,19,0.7)", +"MadeButtonBorderRadius": "MadeBorderRadiusSmall", +"MadeFormsColorBackgroundDefault": "MadeColorBackgroundDefault", +"MadeFormsColorBorderDefault": "MadeColorGray05", +"MadeGridGuttersLg": "MadeSpace4X", +"MadeGridGuttersMd": "MadeSpace4X", +"MadeGridGuttersSm": "MadeSpace2X", +"MadeGridMarginLg": "MadeSpace4X", +"MadeGridMarginMd": "MadeSpace4X", +"MadeGridMarginSm": "MadeSpace2X", +"MadeLinkColorDefault": "MadeColorActionPrimaryDefault", +"MadeLinkColorOnDark": "MadeColorActionOnDarkDefault", +"MadeScrollbarColorBackground": "MadeColorGray03"} \ No newline at end of file diff --git a/assets/partnerbank-test-theme/theme.less b/assets/partnerbank-test-theme/theme.less new file mode 100644 index 00000000..a4dd985f --- /dev/null +++ b/assets/partnerbank-test-theme/theme.less @@ -0,0 +1,102 @@ + +// Do not edit directly +// Generated on Thu, 11 May 2023 09:28:11 GMT + +@made-footer-color-text: #f8fffd; // Text color on footer component +@made-footer-color-background: #4d6260; // Background color for footer component +@made-header-color-text: #f8fffd; // Text color on header component +@made-header-color-background: #4d6260; // Background color for header component +@made-pill-color-background-default: #e1e5e8; // Background color for pill component. +@made-pill-color-background-hover: #c7d0d1; // Background color for pill components hover state for the close icon element. +@made-pill-border-radius: 12px; // Pill Border Radius +@made-search-color-background: #f5f8fa; // Background color for search input component +@made-search-action-color-background-default: #f5f8fa; // Background color for action within the search component +@made-search-action-color-background-hover: #edf1f2; // Background color for the hover state of action within the search component +@made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); // Shadow for all content cards, dropdowns, dialogs, datepicker etc. +@made-border-radius-default: 4px; // Default border radius for UI components +@made-border-radius-large: 8px; // Large border radius for UI components +@made-border-radius-small: 2px; // Small border radius for UI components +@made-color-action-background-hover: #f5f8fa; // Background color for hover state of UI Elements such as tables, dropdowns... +@made-color-action-background-selected: #edf1f2; // Background color for selected state of UI Elements such as tables, dropdowns... +@made-color-action-background-selected-hover: #e1e5e8; // Background color for hover state of on selected UI Elements +@made-color-action-border-focus: #4bab94; // Outline color for focus state. +@made-color-action-border-focus-on-dark: #f8fffd; // Outline color for focus state on dark backgrounds. +@made-color-action-disabled: #a5b0ae; // Global color for disabled state. +@made-color-action-disabled-button: #b1ada6; // Disabled state for buttons. Opacity at 50% +@made-color-action-disabled-toggle: #b1ada6; // Disabled state for toggles. Opacity at 25% +@made-color-action-disabled-text-input: #b1ada6; // Disabled state for text inputs. Opacity at 10% +@made-color-action-on-dark-active: #a5b0ae; // Text color of secondary interactive color on dark background e.g. buttons. +@made-color-action-on-dark-default: #dcf5ef; // Color of interactive color on dark background e.g. buttons +@made-color-action-on-dark-hover: #e1e5e8; // Text color of secondary interactive color on dark background e.g. buttons. +@made-color-action-primary-active: #23473d; // Color of primary interactive color on active e.g. buttons +@made-color-action-primary-default: #4bab94; // Color of primary interactive color e.g. buttons +@made-color-action-primary-hover: #266555; // Color of primary interactive color on hover e.g. buttons +@made-color-action-secondary-active: #23473d; // Color of secondary interactive color e.g. secondary button +@made-color-action-secondary-default: #4bab94; // Color of secondary interactive color e.g. secondary buttons +@made-color-action-secondary-hover: #266555; // Color of secondary interactive color e.g. secondary buttons +@made-color-action-text-on-dark: #4d6260; // Text color on top of interactive color on a dark background +@made-color-action-text-on-disabled: #ffffff; // Text color on top of disabled state color +@made-color-action-text-on-hover: #4d6260; // Text color on top of hover state of UI Elements +@made-color-action-text-on-selected: #4d6260; // Text color on top of selected state of UI Elements +@made-color-action-text-on-selected-hover: #4d6260; // Text color on top of hover and selected state of UI Elements +@made-color-background-default: #f8fffd; // Main background color of the application. +@made-color-background-gray-lightest: #edf1f2; // Used on background of breadcrumb and pill components. +@made-color-background-01: #f5f8fa; // Secondary background color of the application. +@made-color-background-02: #e1e5e8; // Tertiary background color of the application. +@made-color-background-inverse: #4d6260; // High contrast backgrounds/elements +@made-color-border-default-on-dark: #96c6c1; // Default Border color used for layout elements on a dark background. +@made-color-border-default-on-light: #e1e5e8; // Default Border color used for layout elements e.g. accordion, table. +@made-color-brand-on-primary: #ffffff; // The text color on your primary brand color +@made-color-brand-on-secondary: #ffffff; // The text color on your secondary brand color +@made-color-brand-primary: #4bab94; // The primary color of your brand +@made-color-brand-secondary: #4bab94; // The secondary color of your brand +@made-color-feedback-error: #ff33b4; // Color for error state +@made-color-feedback-error-light: #fadef4; // Color for light variant of error state +@made-color-feedback-information: #ffeb1f; // Color for neutral or optional state +@made-color-feedback-information-light: #fff4d1; // Color for light variant of neutral or optional state +@made-color-feedback-success: #008a60; // Color for success or positive state +@made-color-feedback-success-light: #dff7df; // Color for light variant of success or positive state +@made-color-feedback-warning: #f38b00; // Color for warning state +@made-color-text-default-on-dark: #ffffff; // Color of body text on dark background. +@made-color-text-default-on-light: #4d6260; // Color of body text on light background. +@made-color-text-helper: #96c6c1; // Text color of helper text on forms, cards etc. +@made-color-text-inverse: #f8fffd; // Inverse text/icon color +@made-font-body-family-bold: serif, Arial; // Font family for bold body text. +@made-font-body-family-default: serif, Arial; // Default font family for body text. +@made-font-body-family-narrow: serif, Arial; // Default font family for narrow/small text. Used on tooltip and notification +@made-font-body-size-default: 0.875rem; // Default font size for body text. +@made-font-body-size-large: 1rem; // Large font size for body text. +@made-font-body-size-small: 0.75rem; // Small font size for body text. +@made-font-body-weight-bold: 700; // Bold font weight for body text. +@made-font-body-weight-default: 400; // Default font weight for body text. +@made-font-family-eyebrow: serif, Arial; // Font family for headings (H1,H2 and display text) +@made-font-family-heading: serif, Arial; // Font family for headings (H1,H2 and display text) +@made-font-heading-size-display-01: 5rem; // Font Size for Display 01. +@made-font-heading-size-display-02: 3rem; // Font Size for Display 02. +@made-font-heading-size-display-03: 2rem; // Font Size for Display 03. +@made-font-heading-size-eyebrow-01: 0.75rem; // Font size for small eyebrow text +@made-font-heading-size-eyebrow-02: 1rem; // Font size for default eyebrow text +@made-font-heading-size-level-01: 2rem; // Font Size for Heading 1 (H1) +@made-font-heading-size-level-02: 1.75rem; // Font Size for Heading 2 (H2) +@made-font-heading-size-level-03: 1.5rem; // Font Size for Heading 3 (H3) +@made-font-heading-size-level-04: 1.25rem; // Font Size for Heading 4 (H4) +@made-font-heading-size-level-05: 1.125rem; // Font Size for Heading 5 (H5) +@made-font-heading-size-level-06: 1rem; // Font Size for Heading 6 (H6) +@made-letter-spacing-default: normal; // Default letter spacing for all text. +@made-letter-spacing-eyebrow: 1.8px; // Default letter spacing for all text. +@made-line-height-default: 1.5; // Default line height. +@made-line-height-heading: 1.25; // Headings line-height +@made-line-height-single: 1; // Line height for single line text elements displayed in components +@made-backdrop-color-background: rgba(20,20,19,0.7); // Background on overlay used with modals +@made-button-border-radius: 2px; // Button Border Radius +@made-forms-color-background-default: #f8fffd; // Default background color for forms. +@made-forms-color-border-default: #96c6c1; // Default border color for forms. +@made-grid-gutters-lg: 1rem; // Gutter size on large breakpoint. +@made-grid-gutters-md: 1rem; // Gutter size on medium breakpoint. +@made-grid-gutters-sm: 0.5rem; // Grid gutter size on small breakpoint. +@made-grid-margin-lg: 1rem; // Margin size on large breakpoint. +@made-grid-margin-md: 1rem; // Margin size on medium breakpoint. +@made-grid-margin-sm: 0.5rem; // Margin size on small breakpoint. +@made-link-color-default: #4bab94; // Text color for link +@made-link-color-on-dark: #dcf5ef; // Text color for links on dark backgrounds +@made-scrollbar-color-background: #a5b0ae; // Background color for scrollbar component \ No newline at end of file diff --git a/assets/partnerbank-test-theme/theme.scss b/assets/partnerbank-test-theme/theme.scss new file mode 100644 index 00000000..6d507504 --- /dev/null +++ b/assets/partnerbank-test-theme/theme.scss @@ -0,0 +1,102 @@ + +// Do not edit directly +// Generated on Thu, 11 May 2023 09:28:11 GMT + +$made-footer-color-text: #f8fffd; // Text color on footer component +$made-footer-color-background: #4d6260; // Background color for footer component +$made-header-color-text: #f8fffd; // Text color on header component +$made-header-color-background: #4d6260; // Background color for header component +$made-pill-color-background-default: #e1e5e8; // Background color for pill component. +$made-pill-color-background-hover: #c7d0d1; // Background color for pill components hover state for the close icon element. +$made-pill-border-radius: 12px; // Pill Border Radius +$made-search-color-background: #f5f8fa; // Background color for search input component +$made-search-action-color-background-default: #f5f8fa; // Background color for action within the search component +$made-search-action-color-background-hover: #edf1f2; // Background color for the hover state of action within the search component +$made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); // Shadow for all content cards, dropdowns, dialogs, datepicker etc. +$made-border-radius-default: 4px; // Default border radius for UI components +$made-border-radius-large: 8px; // Large border radius for UI components +$made-border-radius-small: 2px; // Small border radius for UI components +$made-color-action-background-hover: #f5f8fa; // Background color for hover state of UI Elements such as tables, dropdowns... +$made-color-action-background-selected: #edf1f2; // Background color for selected state of UI Elements such as tables, dropdowns... +$made-color-action-background-selected-hover: #e1e5e8; // Background color for hover state of on selected UI Elements +$made-color-action-border-focus: #4bab94; // Outline color for focus state. +$made-color-action-border-focus-on-dark: #f8fffd; // Outline color for focus state on dark backgrounds. +$made-color-action-disabled: #a5b0ae; // Global color for disabled state. +$made-color-action-disabled-button: #b1ada6; // Disabled state for buttons. Opacity at 50% +$made-color-action-disabled-toggle: #b1ada6; // Disabled state for toggles. Opacity at 25% +$made-color-action-disabled-text-input: #b1ada6; // Disabled state for text inputs. Opacity at 10% +$made-color-action-on-dark-active: #a5b0ae; // Text color of secondary interactive color on dark background e.g. buttons. +$made-color-action-on-dark-default: #dcf5ef; // Color of interactive color on dark background e.g. buttons +$made-color-action-on-dark-hover: #e1e5e8; // Text color of secondary interactive color on dark background e.g. buttons. +$made-color-action-primary-active: #23473d; // Color of primary interactive color on active e.g. buttons +$made-color-action-primary-default: #4bab94; // Color of primary interactive color e.g. buttons +$made-color-action-primary-hover: #266555; // Color of primary interactive color on hover e.g. buttons +$made-color-action-secondary-active: #23473d; // Color of secondary interactive color e.g. secondary button +$made-color-action-secondary-default: #4bab94; // Color of secondary interactive color e.g. secondary buttons +$made-color-action-secondary-hover: #266555; // Color of secondary interactive color e.g. secondary buttons +$made-color-action-text-on-dark: #4d6260; // Text color on top of interactive color on a dark background +$made-color-action-text-on-disabled: #ffffff; // Text color on top of disabled state color +$made-color-action-text-on-hover: #4d6260; // Text color on top of hover state of UI Elements +$made-color-action-text-on-selected: #4d6260; // Text color on top of selected state of UI Elements +$made-color-action-text-on-selected-hover: #4d6260; // Text color on top of hover and selected state of UI Elements +$made-color-background-default: #f8fffd; // Main background color of the application. +$made-color-background-gray-lightest: #edf1f2; // Used on background of breadcrumb and pill components. +$made-color-background-01: #f5f8fa; // Secondary background color of the application. +$made-color-background-02: #e1e5e8; // Tertiary background color of the application. +$made-color-background-inverse: #4d6260; // High contrast backgrounds/elements +$made-color-border-default-on-dark: #96c6c1; // Default Border color used for layout elements on a dark background. +$made-color-border-default-on-light: #e1e5e8; // Default Border color used for layout elements e.g. accordion, table. +$made-color-brand-on-primary: #ffffff; // The text color on your primary brand color +$made-color-brand-on-secondary: #ffffff; // The text color on your secondary brand color +$made-color-brand-primary: #4bab94; // The primary color of your brand +$made-color-brand-secondary: #4bab94; // The secondary color of your brand +$made-color-feedback-error: #ff33b4; // Color for error state +$made-color-feedback-error-light: #fadef4; // Color for light variant of error state +$made-color-feedback-information: #ffeb1f; // Color for neutral or optional state +$made-color-feedback-information-light: #fff4d1; // Color for light variant of neutral or optional state +$made-color-feedback-success: #008a60; // Color for success or positive state +$made-color-feedback-success-light: #dff7df; // Color for light variant of success or positive state +$made-color-feedback-warning: #f38b00; // Color for warning state +$made-color-text-default-on-dark: #ffffff; // Color of body text on dark background. +$made-color-text-default-on-light: #4d6260; // Color of body text on light background. +$made-color-text-helper: #96c6c1; // Text color of helper text on forms, cards etc. +$made-color-text-inverse: #f8fffd; // Inverse text/icon color +$made-font-body-family-bold: serif, Arial; // Font family for bold body text. +$made-font-body-family-default: serif, Arial; // Default font family for body text. +$made-font-body-family-narrow: serif, Arial; // Default font family for narrow/small text. Used on tooltip and notification +$made-font-body-size-default: 0.875rem; // Default font size for body text. +$made-font-body-size-large: 1rem; // Large font size for body text. +$made-font-body-size-small: 0.75rem; // Small font size for body text. +$made-font-body-weight-bold: 700; // Bold font weight for body text. +$made-font-body-weight-default: 400; // Default font weight for body text. +$made-font-family-eyebrow: serif, Arial; // Font family for headings (H1,H2 and display text) +$made-font-family-heading: serif, Arial; // Font family for headings (H1,H2 and display text) +$made-font-heading-size-display-01: 5rem; // Font Size for Display 01. +$made-font-heading-size-display-02: 3rem; // Font Size for Display 02. +$made-font-heading-size-display-03: 2rem; // Font Size for Display 03. +$made-font-heading-size-eyebrow-01: 0.75rem; // Font size for small eyebrow text +$made-font-heading-size-eyebrow-02: 1rem; // Font size for default eyebrow text +$made-font-heading-size-level-01: 2rem; // Font Size for Heading 1 (H1) +$made-font-heading-size-level-02: 1.75rem; // Font Size for Heading 2 (H2) +$made-font-heading-size-level-03: 1.5rem; // Font Size for Heading 3 (H3) +$made-font-heading-size-level-04: 1.25rem; // Font Size for Heading 4 (H4) +$made-font-heading-size-level-05: 1.125rem; // Font Size for Heading 5 (H5) +$made-font-heading-size-level-06: 1rem; // Font Size for Heading 6 (H6) +$made-letter-spacing-default: normal; // Default letter spacing for all text. +$made-letter-spacing-eyebrow: 1.8px; // Default letter spacing for all text. +$made-line-height-default: 1.5; // Default line height. +$made-line-height-heading: 1.25; // Headings line-height +$made-line-height-single: 1; // Line height for single line text elements displayed in components +$made-backdrop-color-background: rgba(20,20,19,0.7); // Background on overlay used with modals +$made-button-border-radius: 2px; // Button Border Radius +$made-forms-color-background-default: #f8fffd; // Default background color for forms. +$made-forms-color-border-default: #96c6c1; // Default border color for forms. +$made-grid-gutters-lg: 1rem; // Gutter size on large breakpoint. +$made-grid-gutters-md: 1rem; // Gutter size on medium breakpoint. +$made-grid-gutters-sm: 0.5rem; // Grid gutter size on small breakpoint. +$made-grid-margin-lg: 1rem; // Margin size on large breakpoint. +$made-grid-margin-md: 1rem; // Margin size on medium breakpoint. +$made-grid-margin-sm: 0.5rem; // Margin size on small breakpoint. +$made-link-color-default: #4bab94; // Text color for link +$made-link-color-on-dark: #dcf5ef; // Text color for links on dark backgrounds +$made-scrollbar-color-background: #a5b0ae; // Background color for scrollbar component \ No newline at end of file diff --git a/assets/partnerbank-test-theme/tokens-nested.json b/assets/partnerbank-test-theme/tokens-nested.json new file mode 100644 index 00000000..4983254f --- /dev/null +++ b/assets/partnerbank-test-theme/tokens-nested.json @@ -0,0 +1,631 @@ +{ + "footer": { + "color": { + "text": "#f8fffd", + "background": "#4d6260" + } + }, + "header": { + "color": { + "text": "#f8fffd", + "background": "#4d6260" + } + }, + "pill": { + "color": { + "background": { + "default": "#e1e5e8", + "hover": "#c7d0d1" + } + }, + "border-radius": "12px" + }, + "search": { + "color": { + "background": "#f5f8fa" + }, + "action": { + "color": { + "background": { + "default": "#f5f8fa", + "hover": "#edf1f2" + } + } + } + }, + "shadow": { + "toggle": "0 5px 10px 0 rgba(20,20,19,0.15), 0 2px 2px 0 rgba(20,20,19,0.3);", + "default": "0 2px 10px 0 rgba(20,20,19,0.20)" + }, + "z-index": { + "backdrop": "40", + "dropdown": "30", + "modal": "50", + "toast": "50" + }, + "border": { + "radius": { + "01": "2px", + "02": "4px", + "03": "6px", + "04": "8px", + "05": "12px", + "06": "16px", + "07": "20px", + "08": "24px", + "09": "28px", + "circle": "50%", + "default": "4px", + "large": "8px", + "small": "2px" + } + }, + "color": { + "accent": { + "01": { + "dark": "#852d01", + "darker": "#331505", + "default": "#cf4500", + "light": "#d0805b" + }, + "02": "#f37338", + "03": "#f38b00", + "04": "#ffc61e", + "05": "#628020", + "06": "#25836d", + "07": "#d7373c" + }, + "gold": { + "01": "#fce8cc", + "02": "#f9d199", + "03": "#f7ad4c", + "04": "#f38b00", + "05": "#995600", + "06": "#583300", + "07": "#301c00" + }, + "gray": { + "01": "#fafbfc", + "01-25": "#f5f8fa", + "01-5": "#edf1f2", + "02": "#e1e5e8", + "02-5": "#c7d0d1", + "03": "#a5b0ae", + "03-5": "#d2f9f5", + "04": "#afe5e0", + "04-5": "#a4dad5", + "05": "#96c6c1", + "05-5": "#84b0ab", + "06": "#779b96", + "06-5": "#617c79", + "07": "#4d6260" + }, + "green": { + "01": "#e8f1d5", + "02": "#b6cd7e", + "03": "#87a740", + "04": "#628020", + "05": "#496019", + "06": "#324113", + "07": "#1c2509" + }, + "orange": { + "01": "#ffe1d1", + "02": "#ffab82", + "03": "#f37338", + "04": "#cf4500", + "05": "#9a3a0a", + "06": "#662808", + "07": "#331505" + }, + "red": { + "01": "#f7dcf7", + "02": "#f59fdf", + "03": "#dd65e6", + "04": "#b538d6", + "05": "#a82286", + "06": "#7d1970", + "07": "#541113" + }, + "teal": { + "01": "#dcf5ef", + "02": "#88d3bf", + "03": "#4bab94", + "04": "#25836d", + "05": "#266555", + "06": "#23473d", + "07": "#1d2d27" + }, + "white": "#f8fffd", + "yellow": { + "01": "#fff4d1", + "02": "#ffe8a5", + "03": "#ffd863", + "04": "#ffc61e", + "05": "#b28c16", + "06": "#664f0c", + "07": "#332805" + }, + "green-success": { + "01": "#dff7df", + "02": "#7cd87a", + "03": "#35b132", + "04": "#038a00", + "05": "#097007", + "06": "#0b560a", + "07": "#042604" + }, + "red-error": { + "01": "#fadef4", + "02": "#ff99f1", + "03": "#ff57ca", + "04": "#ed009e", + "05": "#b00596", + "06": "#710808", + "07": "#330505" + }, + "action": { + "background": { + "disabled": "#a5b0ae", + "highlight": "#dcf5ef", + "hover": "#f5f8fa", + "off": "#a5b0ae", + "on": "#008a60", + "on-dark": { + "active": "#a5b0ae", + "default": "#dcf5ef", + "hover": "#e1e5e8" + }, + "primary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "secondary": { + "active": "#f8fffd", + "default": "#f8fffd", + "hover": "#f8fffd" + }, + "selected": "#edf1f2", + "selected-hover": "#e1e5e8" + }, + "border": { + "disabled": "#a5b0ae", + "focus": "#4bab94", + "on-dark": { + "active": "#a5b0ae", + "default": "#dcf5ef", + "hover": "#e1e5e8" + }, + "primary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "secondary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "selected": { + "on-dark": "#dcf5ef", + "on-light": "#4bab94" + }, + "focus-on-dark": "#f8fffd" + }, + "disabled": "#a5b0ae", + "disabled-button": "#b1ada6", + "disabled-toggle": "#b1ada6", + "disabled-text-input": "#b1ada6", + "on-dark": { + "active": "#a5b0ae", + "default": "#dcf5ef", + "hover": "#e1e5e8" + }, + "primary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "secondary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "text": { + "disabled": "#a5b0ae", + "on-dark": "#4d6260", + "on-dark-active": "#a5b0ae", + "on-dark-default": "#dcf5ef", + "on-dark-hover": "#e1e5e8", + "on-disabled": "#ffffff", + "on-hover": "#4d6260", + "on-primary": "#ffffff", + "on-secondary": "#ffffff", + "on-selected": "#4d6260", + "on-selected-hover": "#4d6260", + "primary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + }, + "secondary": { + "active": "#23473d", + "default": "#4bab94", + "hover": "#266555" + } + } + }, + "background": { + "default": "#f8fffd", + "gray-lightest": "#edf1f2", + "primary": "#4bab94", + "01": "#f5f8fa", + "02": "#e1e5e8", + "inverse": "#4d6260" + }, + "border": { + "default": { + "on-dark": "#96c6c1", + "on-light": "#e1e5e8" + } + }, + "brand": { + "on-primary": "#ffffff", + "on-secondary": "#ffffff", + "primary": "#4bab94", + "secondary": "#4bab94" + }, + "feedback": { + "background": { + "error": "#ff33b4", + "error-light": "#fadef4", + "information": "#ffeb1f", + "information-light": "#fff4d1", + "success": "#008a60", + "success-light": "#dff7df", + "warning": "#f38b00" + }, + "border": { + "error": "#ff33b4", + "error-light": "#fadef4", + "information": "#ffeb1f", + "information-light": "#fff4d1", + "success": "#008a60", + "success-light": "#dff7df", + "warning": "#f38b00" + }, + "error": "#ff33b4", + "error-light": "#fadef4", + "information": "#ffeb1f", + "information-light": "#fff4d1", + "success": "#008a60", + "success-light": "#dff7df", + "warning": "#f38b00", + "text": { + "error": "#ff33b4", + "information": "#ffeb1f", + "on-error": "#ffffff", + "on-error-light": "#b00596", + "on-information": "#332805", + "on-information-light": "#332805", + "on-success": "#ffffff", + "on-success-light": "#097007", + "on-warning": "#ffffff", + "success": "#008a60", + "warning": "#f38b00" + } + }, + "text": { + "default": { + "on-dark": "#ffffff", + "on-light": "#4d6260" + }, + "helper": "#96c6c1", + "primary": "#4bab94", + "inverse": "#f8fffd" + }, + "visualization": { + "01": "#0023cf", + "02": "#ac00cf", + "03": "#cf008a" + } + }, + "font": { + "body": { + "family": { + "bold": "serif, Arial", + "default": "serif, Arial", + "narrow": "serif, Arial" + }, + "letter.spacing": "normal", + "line-height": "1.5", + "size": { + "default": "0.875rem", + "large": "1rem", + "small": "0.75rem" + }, + "weight": { + "bold": "700", + "default": "400" + } + }, + "family": { + "bold": "serif, Arial", + "extra-light": "serif, Arial", + "eyebrow": "serif, Arial", + "heading": "serif, Arial", + "light": "serif, Arial", + "medium": "serif, Arial", + "narrow": "serif, Arial", + "narrow-bold": "serif, Arial", + "narrow-medium": "serif, Arial", + "regular": "serif, Arial" + }, + "heading": { + "family": { + "display": { + "01": "serif, Arial", + "02": "serif, Arial", + "03": "serif, Arial" + }, + "eyebrow": { + "01": "serif, Arial", + "02": "serif, Arial" + }, + "level": { + "01": "serif, Arial", + "02": "serif, Arial", + "03": "serif, Arial", + "04": "serif, Arial", + "05": "serif, Arial", + "06": "serif, Arial" + } + }, + "letter.spacing": { + "display": { + "01": "normal", + "02": "normal", + "03": "normal" + }, + "eyebrow": { + "01": "1.8px", + "02": "1.8px" + }, + "level": { + "01": "normal", + "02": "normal", + "03": "normal", + "04": "normal", + "05": "normal", + "06": "normal" + } + }, + "line-height": { + "display": { + "01": "1.25", + "02": "1.25", + "03": "1.25" + }, + "eyebrow": { + "01": "1.25", + "02": "1.25" + }, + "level": { + "01": "1.25", + "02": "1.25", + "03": "1.25", + "04": "1.25", + "05": "1.25", + "06": "1.25" + } + }, + "size": { + "display": { + "01": "5rem", + "02": "3rem", + "03": "2rem" + }, + "eyebrow": { + "01": "0.75rem", + "02": "1rem" + }, + "level": { + "01": "2rem", + "02": "1.75rem", + "03": "1.5rem", + "04": "1.25rem", + "05": "1.125rem", + "06": "1rem" + } + }, + "weight": { + "display": { + "01": "400", + "02": "400", + "03": "400" + }, + "eyebrow": { + "01": "700", + "02": "700" + }, + "level": { + "01": "400", + "02": "400", + "03": "400", + "04": "400", + "05": "400", + "06": "400" + } + } + }, + "size": { + "10": "1.75rem", + "11": "2rem", + "12": "2.25rem", + "13": "3rem", + "14": "3.75rem", + "15": "5rem", + "01": "0.5625rem", + "02": "0.75rem", + "03": "0.8125rem", + "04": "0.875rem", + "05": "0.9375rem", + "06": "1rem", + "07": "1.125rem", + "08": "1.25rem", + "09": "1.5rem" + }, + "weight": { + "bold": "700", + "default": "400", + "light": "100", + "medium": "500" + } + }, + "letter": { + "spacing": { + "default": "normal", + "eyebrow": "1.8px" + } + }, + "line": { + "height": { + "1-25-x": "1.25", + "1-5-x": "1.5", + "1-x": "1", + "default": "1.5", + "heading": "1.25", + "single": "1" + } + }, + "opacity": { + "0": "0", + "15": "0.15", + "25": "0.25", + "50": "0.5", + "75": "0.75", + "100": "1" + }, + "size": { + "1-x": "0.25rem", + "2-x": "0.5rem", + "3-x": "0.75rem", + "4-x": "1rem", + "5-x": "1.25rem", + "6-x": "1.5rem", + "7-x": "1.75rem", + "8-x": "2rem", + "9-x": "2.25rem", + "10-x": "2.5rem", + "11-x": "2.75rem", + "12-x": "3rem", + "13-x": "3.25rem", + "14-x": "3.5rem", + "15-x": "3.75rem", + "16-x": "4rem", + "17-x": "4.25rem", + "18-x": "4.5rem", + "19-x": "4.75rem", + "20-x": "5rem" + }, + "space": { + "1-x": "0.25rem", + "2-x": "0.5rem", + "3-x": "0.75rem", + "4-x": "1rem", + "5-x": "1.25rem", + "6-x": "1.5rem", + "7-x": "1.75rem", + "8-x": "2rem", + "9-x": "2.25rem", + "10-x": "2.5rem", + "11-x": "2.75rem", + "12-x": "3rem", + "13-x": "3.25rem", + "14-x": "3.5rem", + "15-x": "3.75rem", + "16-x": "4rem", + "17-x": "4.25rem", + "18-x": "4.5rem", + "19-x": "4.75rem", + "20-x": "5rem" + }, + "time": { + "moderate": { + "01": "150ms", + "02": "240ms", + "fast": { + "01": "70ms", + "02": "110ms" + } + }, + "slow": { + "01": "400ms", + "02": "700ms" + } + }, + "backdrop": { + "color": { + "background": "rgba(20,20,19,0.7)" + } + }, + "button": { + "border-radius": "2px" + }, + "connect": { + "color": { + "background": { + "api": "#ffc61e", + "application": "#25836d", + "collection": "#4d6260", + "document": "#a5b0ae", + "product": "#A82226", + "reference": "#628020", + "report": "#f38b00" + }, + "border": { + "api": "#ffc61e", + "application": "#25836d", + "collection": "#4d6260", + "document": "#a5b0ae", + "product": "#A82226", + "reference": "#628020", + "report": "#9a3a0a" + } + } + }, + "forms": { + "color": { + "background": { + "default": "#f8fffd" + }, + "border": { + "default": "#96c6c1" + } + } + }, + "grid": { + "gutters": { + "lg": "1rem", + "md": "1rem", + "sm": "0.5rem" + }, + "margin": { + "lg": "1rem", + "md": "1rem", + "sm": "0.5rem" + } + }, + "link": { + "color": { + "default": "#4bab94", + "on-dark": "#dcf5ef" + } + }, + "scrollbar": { + "color": { + "background": "#a5b0ae" + } + } +} \ No newline at end of file diff --git a/assets/partnerbank-test-theme/tokens-variables.css b/assets/partnerbank-test-theme/tokens-variables.css new file mode 100644 index 00000000..bd857a5a --- /dev/null +++ b/assets/partnerbank-test-theme/tokens-variables.css @@ -0,0 +1,410 @@ +/** + * Do not edit directly + * Generated on Thu, 11 May 2023 09:28:11 GMT + */ + +:root { + --made-connect-color-border-product: #A82226; /* Border color for items in product category. */ + --made-connect-color-background-product: #A82226; /* Background color for items in product category. */ + --made-backdrop-color-background: rgba(20,20,19,0.7); /* Background on overlay used with modals */ + --made-time-slow-02: 700ms; /* Background dimming. */ + --made-time-slow-01: 400ms; /* Large expansion, important system notifications. */ + --made-time-moderate-fast-02: 110ms; /* Micro-interactions such as fade. */ + --made-time-moderate-fast-01: 70ms; /* Micro-interactions such as button and toggle. */ + --made-time-moderate-02: 240ms; /* Expansion, system communication, toast. */ + --made-time-moderate-01: 150ms; /* Micro-interactions, small expansion, short distance movements. */ + --made-space-20-x: 5rem; /* Space: 80px */ + --made-space-19-x: 4.75rem; /* Space: 76px */ + --made-space-18-x: 4.5rem; /* Space: 72px */ + --made-space-17-x: 4.25rem; /* Space: 68px */ + --made-space-16-x: 4rem; /* Space: 64px */ + --made-space-15-x: 3.75rem; /* Space: 60px */ + --made-space-14-x: 3.5rem; /* Space: 56px */ + --made-space-13-x: 3.25rem; /* Space: 52px */ + --made-space-12-x: 3rem; /* Space: 48px */ + --made-space-11-x: 2.75rem; /* Space: 44px */ + --made-space-10-x: 2.5rem; /* Space: 40px */ + --made-space-9-x: 2.25rem; /* Space: 36px */ + --made-space-8-x: 2rem; /* Space: 32px */ + --made-space-7-x: 1.75rem; /* Space: 28px */ + --made-space-6-x: 1.5rem; /* Space: 24px */ + --made-space-5-x: 1.25rem; /* Space: 20px */ + --made-space-4-x: 1rem; /* Space: 16px */ + --made-space-3-x: 0.75rem; /* Space: 12px */ + --made-space-2-x: 0.5rem; /* Space: 8px */ + --made-space-1-x: 0.25rem; /* Space: 4px */ + --made-size-20-x: 5rem; /* Size: 80px */ + --made-size-19-x: 4.75rem; /* Size: 76px */ + --made-size-18-x: 4.5rem; /* Size: 72px */ + --made-size-17-x: 4.25rem; /* Size: 68px */ + --made-size-16-x: 4rem; /* Size: 64px */ + --made-size-15-x: 3.75rem; /* Size: 60px */ + --made-size-14-x: 3.5rem; /* Size: 56px */ + --made-size-13-x: 3.25rem; /* Size: 52px */ + --made-size-12-x: 3rem; /* Size: 48px */ + --made-size-11-x: 2.75rem; /* Size: 44px */ + --made-size-10-x: 2.5rem; /* Size: 40px */ + --made-size-9-x: 2.25rem; /* Size: 36px */ + --made-size-8-x: 2rem; /* Size: 32px */ + --made-size-7-x: 1.75rem; /* Size: 28px */ + --made-size-6-x: 1.5rem; /* Size: 24px */ + --made-size-5-x: 1.25rem; /* Size: 20px */ + --made-size-4-x: 1rem; /* Size: 16px */ + --made-size-3-x: 0.75rem; /* Size: 12px */ + --made-size-2-x: 0.5rem; /* Size: 8px */ + --made-size-1-x: 0.25rem; /* Size: 4px */ + --made-opacity-100: 1; /* Gives 100% opacity to an element. */ + --made-opacity-75: 0.75; /* Gives 75% opacity to an element. */ + --made-opacity-50: 0.5; /* Gives 50% opacity to an element. */ + --made-opacity-25: 0.25; /* Gives 25% opacity to an element. */ + --made-opacity-15: 0.15; /* Gives 15% opacity to an element. */ + --made-opacity-0: 0; /* Gives 0% opacity to an element (Hides an element). */ + --made-line-height-single: 1; /* Line height for single line text elements displayed in components */ + --made-line-height-heading: 1.25; /* Headings line-height */ + --made-line-height-default: 1.5; /* Default line height. */ + --made-line-height-1-x: 1; /* Line height for single line text elements displayed in components */ + --made-line-height-1-5-x: 1.5; /* To ensure readability, Body uses a 1.5× multiplier */ + --made-line-height-1-25-x: 1.25; /* Headings use a 1.25× multiplier */ + --made-letter-spacing-eyebrow: 1.8px; /* Default letter spacing for all text. */ + --made-letter-spacing-default: normal; /* Default letter spacing for all text. */ + --made-font-weight-medium: 500; /* Semi bold font weight is used for buttons. */ + --made-font-weight-light: 100; /* Light font weight is used for headings. */ + --made-font-weight-default: 400; /* Normal font weight is used for body text and form inputs. */ + --made-font-weight-bold: 700; /* Use bold sparingly for subtitles, eyebrows, emphasis, and dates */ + --made-font-size-09: 1.5rem; /* Font size: 24px */ + --made-font-size-08: 1.25rem; /* Font size: 20px */ + --made-font-size-07: 1.125rem; /* Font size: 18px */ + --made-font-size-06: 1rem; /* Font size: 16px */ + --made-font-size-05: 0.9375rem; /* Font size: 15px */ + --made-font-size-04: 0.875rem; /* Font size: 14px */ + --made-font-size-03: 0.8125rem; /* Font size: 13px */ + --made-font-size-02: 0.75rem; /* Font size: 12px */ + --made-font-size-01: 0.5625rem; /* Font size: 9px */ + --made-font-size-15: 5rem; /* Font size: 80px */ + --made-font-size-14: 3.75rem; /* Font size: 60px */ + --made-font-size-13: 3rem; /* Font size: 48px */ + --made-font-size-12: 2.25rem; /* Font size: 36px */ + --made-font-size-11: 2rem; /* Font size: 32px */ + --made-font-size-10: 1.75rem; /* Font size: 28px */ + --made-font-family-regular: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-family-narrow-medium: serif, Arial; /* Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. */ + --made-font-family-narrow-bold: serif, Arial; /* Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. */ + --made-font-family-narrow: serif, Arial; /* Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. */ + --made-font-family-medium: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-family-light: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-family-extra-light: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-family-bold: serif, Arial; /* Default bold weight font used across application */ + --made-color-visualization-03: #cf008a; /* Data Visualization Color */ + --made-color-visualization-02: #ac00cf; /* Data Visualization Color */ + --made-color-visualization-01: #0023cf; /* Data Visualization Color */ + --made-color-text-default-on-dark: #ffffff; /* Color of body text on dark background. */ + --made-color-feedback-success: #008a60; /* Color for success or positive state */ + --made-color-feedback-information: #ffeb1f; /* Color for neutral or optional state */ + --made-color-feedback-error: #ff33b4; /* Color for error state */ + --made-color-brand-on-secondary: #ffffff; /* The text color on your secondary brand color */ + --made-color-brand-on-primary: #ffffff; /* The text color on your primary brand color */ + --made-color-action-disabled-text-input: rgba(177, 173, 166, 0.1); /* Disabled state for text inputs. Opacity at 10% */ + --made-color-action-disabled-toggle: rgba(177, 173, 166, 0.25); /* Disabled state for toggles. Opacity at 25% */ + --made-color-action-disabled-button: rgba(177, 173, 166, 0.5); /* Disabled state for buttons. Opacity at 50% */ + --made-color-red-error-07: #330505; /* Red error 7 */ + --made-color-red-error-06: #710808; /* Red error 6 */ + --made-color-red-error-05: #b00596; /* Red error 5 */ + --made-color-red-error-04: #ed009e; /* Red error 4 */ + --made-color-red-error-03: #ff57ca; /* Red error 3 */ + --made-color-red-error-02: #ff99f1; /* Red error 2 */ + --made-color-red-error-01: #fadef4; /* Error Red 1 */ + --made-color-green-success-07: #042604; /* Success Green 7 */ + --made-color-green-success-06: #0b560a; /* Success Green 6 */ + --made-color-green-success-05: #097007; /* Success Green 5 */ + --made-color-green-success-04: #038a00; /* Success Green 4 */ + --made-color-green-success-03: #35b132; /* Success Green 3 */ + --made-color-green-success-02: #7cd87a; /* Success Green 2 */ + --made-color-green-success-01: #dff7df; /* Success Green 1 */ + --made-color-yellow-07: #332805; /* Yellow color 7 */ + --made-color-yellow-06: #664f0c; /* Yellow color 6 */ + --made-color-yellow-05: #b28c16; /* Yellow color 5 */ + --made-color-yellow-04: #ffc61e; /* Yellow color 4 */ + --made-color-yellow-03: #ffd863; /* Yellow color 3 */ + --made-color-yellow-02: #ffe8a5; /* Yellow color 2 */ + --made-color-yellow-01: #fff4d1; /* Yellow color 1 */ + --made-color-white: #f8fffd; /* White */ + --made-color-teal-07: #1d2d27; /* Teal color 7 */ + --made-color-teal-06: #23473d; /* Teal color 6 */ + --made-color-teal-05: #266555; /* Teal color 5 */ + --made-color-teal-04: #25836d; /* Teal color 4 */ + --made-color-teal-03: #4bab94; /* Teal color 3 */ + --made-color-teal-02: #88d3bf; /* Teal color 2 */ + --made-color-teal-01: #dcf5ef; /* Teal color 1 */ + --made-color-red-07: #541113; /* Red color 7 */ + --made-color-red-06: #7d1970; /* Red color 6 */ + --made-color-red-05: #a82286; /* Red color 5 */ + --made-color-red-04: #b538d6; /* Red color 4 */ + --made-color-red-03: #dd65e6; /* Red color 3 */ + --made-color-red-02: #f59fdf; /* Red color 2 */ + --made-color-red-01: #f7dcf7; /* Red color 1 */ + --made-color-orange-07: #331505; /* Orange color 7 */ + --made-color-orange-06: #662808; /* Orange color 6 */ + --made-color-orange-05: #9a3a0a; /* Orange color 5 */ + --made-color-orange-04: #cf4500; /* Orange color 4 */ + --made-color-orange-03: #f37338; /* Orange color 3 */ + --made-color-orange-02: #ffab82; /* Orange color 2 */ + --made-color-orange-01: #ffe1d1; /* Orange color 1 */ + --made-color-green-07: #1c2509; /* Green color 7 */ + --made-color-green-06: #324113; /* Green color 6 */ + --made-color-green-05: #496019; /* Green color 5 */ + --made-color-green-04: #628020; /* Green color 4 */ + --made-color-green-03: #87a740; /* Green color 3 */ + --made-color-green-02: #b6cd7e; /* Green color 2 */ + --made-color-green-01: #e8f1d5; /* Green color 1 */ + --made-color-gray-07: #4d6260; /* Canvas color - Gray 7 */ + --made-color-gray-06-5: #617c79; /* Gray tints and shades - Gray 6.5 */ + --made-color-gray-06: #779b96; /* Canvas color - Gray 6 */ + --made-color-gray-05-5: #84b0ab; /* Gray tints and shades - Gray 5.5 */ + --made-color-gray-05: #96c6c1; /* Canvas color - Gray 5 */ + --made-color-gray-04-5: #a4dad5; /* Gray tints and shades - Gray 4.5 */ + --made-color-gray-04: #afe5e0; /* Gray tints and shades - Gray 4 */ + --made-color-gray-03-5: #d2f9f5; /* Gray tints and shades - Gray 3.5 */ + --made-color-gray-03: #a5b0ae; /* Gray tints and shades - Gray 3 */ + --made-color-gray-02-5: #c7d0d1; /* Canvas color - Gray 2.5 */ + --made-color-gray-02: #e1e5e8; /* Canvas color - Gray 2 */ + --made-color-gray-01-5: #edf1f2; /* Canvas color - Gray 1.5 */ + --made-color-gray-01-25: #f5f8fa; /* Canvas color - Gray 1.25 */ + --made-color-gray-01: #fafbfc; /* Canvas color - Gray 1 */ + --made-color-gold-07: #301c00; /* Gold color 7 */ + --made-color-gold-06: #583300; /* Gold color 6 */ + --made-color-gold-05: #995600; /* Gold color 5 */ + --made-color-gold-04: #f38b00; /* Gold color 4 */ + --made-color-gold-03: #f7ad4c; /* Gold color 3 */ + --made-color-gold-02: #f9d199; /* Gold color 2 */ + --made-color-gold-01: #fce8cc; /* Gold color 1 */ + --made-color-accent-07: #d7373c; /* Accent color 7 */ + --made-color-accent-06: #25836d; /* Accent color 6 */ + --made-color-accent-05: #628020; /* Accent color 5 */ + --made-color-accent-04: #ffc61e; /* Accent color 4 */ + --made-color-accent-03: #f38b00; /* Accent color 3 */ + --made-color-accent-02: #f37338; /* Accent color 2 */ + --made-color-accent-01-light: #d0805b; /* Accent color 1- Light */ + --made-color-accent-01-default: #cf4500; /* Accent color 1 */ + --made-color-accent-01-darker: #331505; /* Accent color 1 - Darker */ + --made-color-accent-01-dark: #852d01; /* Accent color 1 - Dark */ + --made-border-radius-circle: 50%; /* Border Radius: 50% */ + --made-border-radius-09: 28px; /* Border Radius: 28px */ + --made-border-radius-08: 24px; /* Border Radius: 24px */ + --made-border-radius-07: 20px; /* Border Radius: 20px */ + --made-border-radius-06: 16px; /* Border Radius: 16px */ + --made-border-radius-05: 12px; /* Border Radius: 12px */ + --made-border-radius-04: 8px; /* Border Radius: 8px */ + --made-border-radius-03: 6px; /* Border Radius: 6px */ + --made-border-radius-02: 4px; /* Border Radius: 4px */ + --made-border-radius-01: 2px; /* Border Radius: 2px */ + --made-z-index-toast: 50; /* Used to set the z order layering of toast. */ + --made-z-index-modal: 50; /* Used to set the z order layering of modal. */ + --made-z-index-dropdown: 30; /* Used to set the z order layering of dropdown elements such as overflow menu, date picker... */ + --made-z-index-backdrop: 40; /* Used to set the z order layering of backdrop. */ + --made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); /* Shadow for all content cards, dropdowns, dialogs, datepicker etc. */ + --made-shadow-toggle: 0 5px 10px 0 rgba(20,20,19,0.15), 0 2px 2px 0 rgba(20,20,19,0.3);; /* Shadow on slider on toggle component. */ + --made-scrollbar-color-background: var(--made-color-gray-03); /* Background color for scrollbar component */ + --made-grid-margin-sm: var(--made-space-2-x); /* Margin size on small breakpoint. */ + --made-grid-margin-md: var(--made-space-4-x); /* Margin size on medium breakpoint. */ + --made-grid-margin-lg: var(--made-space-4-x); /* Margin size on large breakpoint. */ + --made-grid-gutters-sm: var(--made-space-2-x); /* Grid gutter size on small breakpoint. */ + --made-grid-gutters-md: var(--made-space-4-x); /* Gutter size on medium breakpoint. */ + --made-grid-gutters-lg: var(--made-space-4-x); /* Gutter size on large breakpoint. */ + --made-forms-color-border-default: var(--made-color-gray-05); /* Default border color for forms. */ + --made-connect-color-border-report: var(--made-color-orange-05); /* Border color for items in report category. */ + --made-connect-color-border-reference: var(--made-color-green-04); /* Border color for items in reference category. */ + --made-connect-color-border-document: var(--made-color-gray-03); /* Border color for items in document category. */ + --made-connect-color-border-collection: var(--made-color-gray-07); /* Border color for items in collection category. */ + --made-connect-color-border-application: var(--made-color-teal-04); /* Border color for items in application category. */ + --made-connect-color-border-api: var(--made-color-yellow-04); /* Border color for items in API category. */ + --made-connect-color-background-report: var(--made-color-gold-04); /* Border color for items in report category. */ + --made-connect-color-background-reference: var(--made-color-green-04); /* Background color for items in reference category. */ + --made-connect-color-background-document: var(--made-color-gray-03); /* Background color for items in document category. */ + --made-connect-color-background-collection: var(--made-color-gray-07); /* Background color for items in collection category. */ + --made-connect-color-background-application: var(--made-color-teal-04); /* Background color for items in application category. */ + --made-connect-color-background-api: var(--made-color-yellow-04); /* Background color for items in API category. */ + --made-font-heading-weight-level-06: var(--made-font-weight-default); /* Font Family for Heading 6 (H6). */ + --made-font-heading-weight-level-05: var(--made-font-weight-default); /* Font Family for Heading 5 (H5). */ + --made-font-heading-weight-level-04: var(--made-font-weight-default); /* Font Family for Heading 4 (H4). */ + --made-font-heading-weight-level-03: var(--made-font-weight-default); /* Font Family for Heading 3 (H3). */ + --made-font-heading-weight-level-02: var(--made-font-weight-default); /* Font Family for Heading 2 (H2). */ + --made-font-heading-weight-level-01: var(--made-font-weight-default); /* Font Family for Heading 1 (H1). */ + --made-font-heading-weight-eyebrow-02: var(--made-font-weight-bold); /* Font family for large eyebrow text. */ + --made-font-heading-weight-eyebrow-01: var(--made-font-weight-bold); /* Font family for small eyebrow text. */ + --made-font-heading-weight-display-03: var(--made-font-weight-default); /* Font family for Display 03. */ + --made-font-heading-weight-display-02: var(--made-font-weight-default); /* Font family for Display 02. */ + --made-font-heading-weight-display-01: var(--made-font-weight-default); /* Font family for Display 01. */ + --made-font-heading-size-level-06: var(--made-font-size-06); /* Font Size for Heading 6 (H6) */ + --made-font-heading-size-level-05: var(--made-font-size-07); /* Font Size for Heading 5 (H5) */ + --made-font-heading-size-level-04: var(--made-font-size-08); /* Font Size for Heading 4 (H4) */ + --made-font-heading-size-level-03: var(--made-font-size-09); /* Font Size for Heading 3 (H3) */ + --made-font-heading-size-level-02: var(--made-font-size-10); /* Font Size for Heading 2 (H2) */ + --made-font-heading-size-level-01: var(--made-font-size-11); /* Font Size for Heading 1 (H1) */ + --made-font-heading-size-display-03: var(--made-font-size-11); /* Font Size for Display 03. */ + --made-font-heading-size-display-02: var(--made-font-size-13); /* Font Size for Display 02. */ + --made-font-heading-size-display-01: var(--made-font-size-15); /* Font Size for Display 01. */ + --made-font-heading-line-height-level-06: var(--made-line-height-heading); /* Line Height of Heading 6 (H6). */ + --made-font-heading-line-height-level-05: var(--made-line-height-heading); /* Line Height of Heading 5 (H5). */ + --made-font-heading-line-height-level-04: var(--made-line-height-heading); /* Line Height of Heading 4 (H4). */ + --made-font-heading-line-height-level-03: var(--made-line-height-heading); /* Line Height of Heading 3 (H3). */ + --made-font-heading-line-height-level-02: var(--made-line-height-heading); /* Line Height of Heading 2 (H2). */ + --made-font-heading-line-height-level-01: var(--made-line-height-heading); /* Line Height of Heading 1 (H1). */ + --made-font-heading-line-height-eyebrow-02: var(--made-line-height-heading); /* Line Height for large eyebrow text. */ + --made-font-heading-line-height-eyebrow-01: var(--made-line-height-heading); /* Line Height for small eyebrow text. */ + --made-font-heading-line-height-display-03: var(--made-line-height-heading); /* Line height of Display 03. */ + --made-font-heading-line-height-display-02: var(--made-line-height-heading); /* Line height of Display 02. */ + --made-font-heading-line-height-display-01: var(--made-line-height-heading); /* Line height of Display 01. */ + --made-font-heading-letter-spacing-level-06: var(--made-letter-spacing-default); /* Letter spacing of Heading 6 (H6). */ + --made-font-heading-letter-spacing-level-05: var(--made-letter-spacing-default); /* Letter spacing of Heading 5 (H5). */ + --made-font-heading-letter-spacing-level-04: var(--made-letter-spacing-default); /* Letter spacing of Heading 4 (H4). */ + --made-font-heading-letter-spacing-level-03: var(--made-letter-spacing-default); /* Letter spacing of Heading 3 (H3). */ + --made-font-heading-letter-spacing-level-02: var(--made-letter-spacing-default); /* Letter spacing of Heading 2 (H2). */ + --made-font-heading-letter-spacing-level-01: var(--made-letter-spacing-default); /* Letter spacing of Heading 1 (H1). */ + --made-font-heading-letter-spacing-eyebrow-02: var(--made-letter-spacing-eyebrow); /* Letter spacing for small eyebrow text. */ + --made-font-heading-letter-spacing-eyebrow-01: var(--made-letter-spacing-eyebrow); /* Letter spacing for small eyebrow text. */ + --made-font-heading-letter-spacing-display-03: var(--made-letter-spacing-default); /* Letter spacing of Display 03. */ + --made-font-heading-letter-spacing-display-02: var(--made-letter-spacing-default); /* Letter spacing of Display 02. */ + --made-font-heading-letter-spacing-display-01: var(--made-letter-spacing-default); /* Letter spacing of Display 02. */ + --made-font-family-heading: var(--made-font-family-light); /* Font family for headings (H1,H2 and display text) */ + --made-font-family-eyebrow: var(--made-font-family-bold); /* Font family for headings (H1,H2 and display text) */ + --made-font-body-weight-default: var(--made-font-weight-default); /* Default font weight for body text. */ + --made-font-body-weight-bold: var(--made-font-weight-bold); /* Bold font weight for body text. */ + --made-font-body-size-small: var(--made-font-size-02); /* Small font size for body text. */ + --made-font-body-size-large: var(--made-font-size-06); /* Large font size for body text. */ + --made-font-body-size-default: var(--made-font-size-04); /* Default font size for body text. */ + --made-font-body-line-height: var(--made-line-height-default); /* Default line height for body text. */ + --made-font-body-letter-spacing: var(--made-letter-spacing-default); /* Default letter spacing for body text. */ + --made-font-body-family-narrow: var(--made-font-family-narrow); /* Default font family for narrow/small text. Used on tooltip and notification */ + --made-font-body-family-default: var(--made-font-family-regular); /* Default font family for body text. */ + --made-font-body-family-bold: var(--made-font-family-medium); /* Font family for bold body text. */ + --made-color-text-inverse: var(--made-color-white); /* Inverse text/icon color */ + --made-color-text-helper: var(--made-color-gray-05); /* Text color of helper text on forms, cards etc. */ + --made-color-text-default-on-light: var(--made-color-gray-07); /* Color of body text on light background. */ + --made-color-feedback-text-success: var(--made-color-feedback-success); /* Text color for success or positive state */ + --made-color-feedback-text-on-warning: var(--made-color-text-default-on-dark); /* Text color displayed on top of the warning color */ + --made-color-feedback-text-on-success-light: var(--made-color-green-success-05); /* Text color displayed on top of the success color of Light variation of notifications and toasts */ + --made-color-feedback-text-on-success: var(--made-color-text-default-on-dark); /* Text color displayed on top of the error color */ + --made-color-feedback-text-on-information-light: var(--made-color-yellow-07); /* Text color displayed on top of the information color of Light variation of notifications and toasts */ + --made-color-feedback-text-on-information: var(--made-color-yellow-07); /* Text color displayed on top of the error color */ + --made-color-feedback-text-on-error-light: var(--made-color-red-error-05); /* Text color displayed on top of the error color of Light variation of notifications and toasts */ + --made-color-feedback-text-on-error: var(--made-color-text-default-on-dark); /* Text color displayed on top of the error color */ + --made-color-feedback-text-information: var(--made-color-feedback-information); /* Text color for neutral or optional state */ + --made-color-feedback-text-error: var(--made-color-feedback-error); /* Text color for error state */ + --made-color-feedback-warning: var(--made-color-gold-04); /* Color for warning state */ + --made-color-feedback-success-light: var(--made-color-green-success-01); /* Color for light variant of success or positive state */ + --made-color-feedback-information-light: var(--made-color-yellow-01); /* Color for light variant of neutral or optional state */ + --made-color-feedback-error-light: var(--made-color-red-error-01); /* Color for light variant of error state */ + --made-color-feedback-border-success: var(--made-color-feedback-success); /* Border color for success or positive state */ + --made-color-feedback-border-information: var(--made-color-feedback-information); /* Border color for neutral or optional state */ + --made-color-feedback-border-error: var(--made-color-feedback-error); /* Border color for error state */ + --made-color-feedback-background-success: var(--made-color-feedback-success); /* Background color for success or positive state */ + --made-color-feedback-background-information: var(--made-color-feedback-information); /* Background color for neutral or optional state */ + --made-color-feedback-background-error: var(--made-color-feedback-error); /* Background color for error state */ + --made-color-brand-secondary: var(--made-color-teal-03); /* The secondary color of your brand */ + --made-color-brand-primary: var(--made-color-teal-03); /* The primary color of your brand */ + --made-color-border-default-on-light: var(--made-color-gray-02); /* Default Border color used for layout elements e.g. accordion, table. */ + --made-color-border-default-on-dark: var(--made-color-gray-05); /* Default Border color used for layout elements on a dark background. */ + --made-color-background-inverse: var(--made-color-gray-07); /* High contrast backgrounds/elements */ + --made-color-background-02: var(--made-color-gray-02); /* Tertiary background color of the application. */ + --made-color-background-01: var(--made-color-gray-01-25); /* Secondary background color of the application. */ + --made-color-background-gray-lightest: var(--made-color-gray-01-5); /* Used on background of breadcrumb and pill components. */ + --made-color-background-default: var(--made-color-white); /* Main background color of the application. */ + --made-color-action-text-on-secondary: var(--made-color-brand-on-secondary); /* Text color on top of secondary interactive color */ + --made-color-action-text-on-primary: var(--made-color-brand-on-primary); /* Text color on top of primary interactive color */ + --made-color-action-text-on-disabled: var(--made-color-text-default-on-dark); /* Text color on top of disabled state color */ + --made-color-action-text-on-dark: var(--made-color-gray-07); /* Text color on top of interactive color on a dark background */ + --made-color-action-primary-hover: var(--made-color-teal-05); /* Color of primary interactive color on hover e.g. buttons */ + --made-color-action-primary-active: var(--made-color-teal-06); /* Color of primary interactive color on active e.g. buttons */ + --made-color-action-on-dark-hover: var(--made-color-gray-02); /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-on-dark-default: var(--made-color-teal-01); /* Color of interactive color on dark background e.g. buttons */ + --made-color-action-on-dark-active: var(--made-color-gray-03); /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-disabled: var(--made-color-gray-03); /* Global color for disabled state. */ + --made-color-action-border-focus-on-dark: var(--made-color-white); /* Outline color for focus state on dark backgrounds. */ + --made-color-action-background-selected-hover: var(--made-color-gray-02); /* Background color for hover state of on selected UI Elements */ + --made-color-action-background-selected: var(--made-color-gray-01-5); /* Background color for selected state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-primary-hover: var(--made-color-teal-05); /* Background color of primary interactive color e.g primary buttons. */ + --made-color-action-background-on: var(--made-color-feedback-success); /* Background color for on state of UI Elements such as toggle */ + --made-color-action-background-hover: var(--made-color-gray-01-25); /* Background color for hover state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-highlight: var(--made-color-teal-01); /* Background color of highlight interactive color. Used on date range in Calendar */ + --made-border-radius-small: var(--made-border-radius-01); /* Small border radius for UI components */ + --made-border-radius-large: var(--made-border-radius-04); /* Large border radius for UI components */ + --made-border-radius-default: var(--made-border-radius-02); /* Default border radius for UI components */ + --made-search-action-color-background-hover: var(--made-color-gray-01-5); /* Background color for the hover state of action within the search component */ + --made-pill-border-radius: var(--made-border-radius-05); /* Pill Border Radius */ + --made-pill-color-background-hover: var(--made-color-gray-02-5); /* Background color for pill components hover state for the close icon element. */ + --made-header-color-background: var(--made-color-gray-07); /* Background color for header component */ + --made-header-color-text: var(--made-color-white); /* Text color on header component */ + --made-footer-color-background: var(--made-color-gray-07); /* Background color for footer component */ + --made-footer-color-text: var(--made-color-white); /* Text color on footer component */ + --made-link-color-on-dark: var(--made-color-action-on-dark-default); /* Text color for links on dark backgrounds */ + --made-forms-color-background-default: var(--made-color-background-default); /* Default background color for forms. */ + --made-button-border-radius: var(--made-border-radius-small); /* Button Border Radius */ + --made-font-heading-size-eyebrow-02: var(--made-font-body-size-large); /* Font size for default eyebrow text */ + --made-font-heading-size-eyebrow-01: var(--made-font-body-size-small); /* Font size for small eyebrow text */ + --made-font-heading-family-level-06: var(--made-font-body-family-bold); /* Font Family for Heading 6 (H6). */ + --made-font-heading-family-level-05: var(--made-font-body-family-default); /* Font Family for Heading 5 (H5). */ + --made-font-heading-family-level-04: var(--made-font-body-family-default); /* Font Family for Heading 4 (H4). */ + --made-font-heading-family-level-03: var(--made-font-body-family-default); /* Font Family for Heading 3 (H3). */ + --made-font-heading-family-level-02: var(--made-font-family-heading); /* Font Family for Heading 2 (H2). */ + --made-font-heading-family-level-01: var(--made-font-family-heading); /* Font Family for Heading 1 (H1). */ + --made-font-heading-family-eyebrow-02: var(--made-font-family-eyebrow); /* Font family for large eyebrow text. */ + --made-font-heading-family-eyebrow-01: var(--made-font-family-eyebrow); /* Font family for small eyebrow text. */ + --made-font-heading-family-display-03: var(--made-font-family-heading); /* Font family for Display 03. */ + --made-font-heading-family-display-02: var(--made-font-family-heading); /* Font family for Display 02. */ + --made-font-heading-family-display-01: var(--made-font-family-heading); /* Font family for Display 01. */ + --made-color-text-primary: var(--made-color-brand-primary); /* Text color of primary brand color. */ + --made-color-feedback-text-warning: var(--made-color-feedback-warning); /* Text color for warning state */ + --made-color-feedback-border-warning: var(--made-color-feedback-warning); /* Border color or for warning state */ + --made-color-feedback-border-success-light: var(--made-color-feedback-success-light); /* Border color for success or positive state for Light variation of notifications and toasts */ + --made-color-feedback-border-information-light: var(--made-color-feedback-information-light); /* Border color for neutral or optional state of Light variation of notifications and toasts */ + --made-color-feedback-border-error-light: var(--made-color-feedback-error-light); /* Border color for error state of Light variation of notifications and toasts */ + --made-color-feedback-background-warning: var(--made-color-feedback-warning); /* Background color for warning state */ + --made-color-feedback-background-success-light: var(--made-color-feedback-success-light); /* Background color for success or positive state for Light variation of notifications and toasts */ + --made-color-feedback-background-information-light: var(--made-color-feedback-information-light); /* Background color for neutral or optional state of Light variation of notifications and toasts */ + --made-color-feedback-background-error-light: var(--made-color-feedback-error-light); /* Background color for error state of Light variation of notifications and toasts */ + --made-color-background-primary: var(--made-color-brand-primary); /* Background of primary brand color. */ + --made-color-action-text-primary-hover: var(--made-color-action-primary-hover); /* Text color of primary color hover interactive state e.g. secondary buttons */ + --made-color-action-text-primary-active: var(--made-color-action-primary-active); /* Text color of primary color pressed interactive state e.g. ghost button */ + --made-color-action-text-on-selected-hover: var(--made-color-text-default-on-light); /* Text color on top of hover and selected state of UI Elements */ + --made-color-action-text-on-selected: var(--made-color-text-default-on-light); /* Text color on top of selected state of UI Elements */ + --made-color-action-text-on-hover: var(--made-color-text-default-on-light); /* Text color on top of hover state of UI Elements */ + --made-color-action-text-on-dark-hover: var(--made-color-action-on-dark-hover); /* Text color of secondary interactive color e.g. secondary button on a dark background */ + --made-color-action-text-on-dark-default: var(--made-color-action-on-dark-default); /* Text color of secondary interactive color e.g. secondary button on a dark background */ + --made-color-action-text-on-dark-active: var(--made-color-action-on-dark-active); /* Text color of secondary interactive color e.g. secondary button on a dark background */ + --made-color-action-text-disabled: var(--made-color-action-disabled); /* Text color for disabled state of UI Elements */ + --made-color-action-secondary-hover: var(--made-color-action-primary-hover); /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-secondary-default: var(--made-color-brand-secondary); /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-secondary-active: var(--made-color-action-primary-active); /* Color of secondary interactive color e.g. secondary button */ + --made-color-action-primary-default: var(--made-color-brand-primary); /* Color of primary interactive color e.g. buttons */ + --made-color-action-border-selected-on-dark: var(--made-color-action-on-dark-default); /* Border color for selected items on dark background. */ + --made-color-action-border-primary-hover: var(--made-color-action-primary-hover); /* Border color of primary interactive color e.g primary buttons. */ + --made-color-action-border-primary-active: var(--made-color-action-primary-active); /* Border color of primary interactive color e.g primary buttons. */ + --made-color-action-border-on-dark-hover: var(--made-color-action-on-dark-hover); /* Border color of secondary interactive color. */ + --made-color-action-border-on-dark-default: var(--made-color-action-on-dark-default); /* Border color of secondary interactive color */ + --made-color-action-border-on-dark-active: var(--made-color-action-on-dark-active); /* Border color of secondary interactive color. */ + --made-color-action-border-disabled: var(--made-color-action-disabled); /* Border color for disabled state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-secondary-hover: var(--made-color-background-default); /* Background color of secondary interactive color e.g. secondary buttons */ + --made-color-action-background-secondary-default: var(--made-color-background-default); /* Background color of secondary interactive color e.g. secondary buttons */ + --made-color-action-background-secondary-active: var(--made-color-background-default); /* Background color of secondary interactive color e.g. secondary button */ + --made-color-action-background-primary-active: var(--made-color-action-primary-active); /* Background color of primary interactive color e.g primary buttons. */ + --made-color-action-background-on-dark-hover: var(--made-color-action-on-dark-hover); /* Background color of secondary interactive color. */ + --made-color-action-background-on-dark-default: var(--made-color-action-on-dark-default); /* Background color of secondary interactive color */ + --made-color-action-background-on-dark-active: var(--made-color-action-on-dark-active); /* Background color of secondary interactive color. */ + --made-color-action-background-off: var(--made-color-action-disabled); /* Background color for off state of UI Elements such as toggle */ + --made-color-action-background-disabled: var(--made-color-action-disabled); /* Background color for disabled state of UI Elements such as tables, dropdowns... */ + --made-search-color-background: var(--made-color-background-01); /* Background color for search input component */ + --made-pill-color-background-default: var(--made-color-background-02); /* Background color for pill component. */ + --made-link-color-default: var(--made-color-action-primary-default); /* Text color for link */ + --made-color-action-text-secondary-hover: var(--made-color-action-secondary-hover); /* Text color of secondary interactive color e.g. secondary buttons */ + --made-color-action-text-secondary-default: var(--made-color-action-secondary-default); /* Text color of secondary interactive color e.g. secondary buttons */ + --made-color-action-text-secondary-active: var(--made-color-action-secondary-active); /* Text color of secondary interactive color e.g. secondary button */ + --made-color-action-text-primary-default: var(--made-color-action-primary-default); /* Text color of primary interactive color e.g. links */ + --made-color-action-border-selected-on-light: var(--made-color-action-primary-default); /* Border color for selected items. */ + --made-color-action-border-secondary-hover: var(--made-color-action-secondary-hover); /* Border color of secondary interactive color e.g. secondary buttons */ + --made-color-action-border-secondary-default: var(--made-color-action-secondary-default); /* Border color of secondary interactive color e.g. secondary buttons */ + --made-color-action-border-secondary-active: var(--made-color-action-secondary-active); /* Border color of secondary interactive color e.g. secondary button */ + --made-color-action-border-primary-default: var(--made-color-action-primary-default); /* Border color of primary interactive color e.g primary buttons. */ + --made-color-action-border-focus: var(--made-color-action-primary-default); /* Outline color for focus state. */ + --made-color-action-background-primary-default: var(--made-color-action-primary-default); /* Background color of primary interactive color e.g primary buttons. */ + --made-search-action-color-background-default: var(--made-search-color-background); /* Background color for action within the search component */ +} diff --git a/assets/partnerbank-test-theme/tokens.css b/assets/partnerbank-test-theme/tokens.css new file mode 100644 index 00000000..b0d5eef2 --- /dev/null +++ b/assets/partnerbank-test-theme/tokens.css @@ -0,0 +1,410 @@ +/** + * Do not edit directly + * Generated on Thu, 11 May 2023 09:28:11 GMT + */ + +:root { + --made-footer-color-text: #f8fffd; /* Text color on footer component */ + --made-footer-color-background: #4d6260; /* Background color for footer component */ + --made-header-color-text: #f8fffd; /* Text color on header component */ + --made-header-color-background: #4d6260; /* Background color for header component */ + --made-pill-color-background-default: #e1e5e8; /* Background color for pill component. */ + --made-pill-color-background-hover: #c7d0d1; /* Background color for pill components hover state for the close icon element. */ + --made-pill-border-radius: 12px; /* Pill Border Radius */ + --made-search-color-background: #f5f8fa; /* Background color for search input component */ + --made-search-action-color-background-default: #f5f8fa; /* Background color for action within the search component */ + --made-search-action-color-background-hover: #edf1f2; /* Background color for the hover state of action within the search component */ + --made-shadow-toggle: 0 5px 10px 0 rgba(20,20,19,0.15), 0 2px 2px 0 rgba(20,20,19,0.3);; /* Shadow on slider on toggle component. */ + --made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); /* Shadow for all content cards, dropdowns, dialogs, datepicker etc. */ + --made-z-index-backdrop: 40; /* Used to set the z order layering of backdrop. */ + --made-z-index-dropdown: 30; /* Used to set the z order layering of dropdown elements such as overflow menu, date picker... */ + --made-z-index-modal: 50; /* Used to set the z order layering of modal. */ + --made-z-index-toast: 50; /* Used to set the z order layering of toast. */ + --made-border-radius-01: 2px; /* Border Radius: 2px */ + --made-border-radius-02: 4px; /* Border Radius: 4px */ + --made-border-radius-03: 6px; /* Border Radius: 6px */ + --made-border-radius-04: 8px; /* Border Radius: 8px */ + --made-border-radius-05: 12px; /* Border Radius: 12px */ + --made-border-radius-06: 16px; /* Border Radius: 16px */ + --made-border-radius-07: 20px; /* Border Radius: 20px */ + --made-border-radius-08: 24px; /* Border Radius: 24px */ + --made-border-radius-09: 28px; /* Border Radius: 28px */ + --made-border-radius-circle: 50%; /* Border Radius: 50% */ + --made-border-radius-default: 4px; /* Default border radius for UI components */ + --made-border-radius-large: 8px; /* Large border radius for UI components */ + --made-border-radius-small: 2px; /* Small border radius for UI components */ + --made-color-accent-01-dark: #852d01; /* Accent color 1 - Dark */ + --made-color-accent-01-darker: #331505; /* Accent color 1 - Darker */ + --made-color-accent-01-default: #cf4500; /* Accent color 1 */ + --made-color-accent-01-light: #d0805b; /* Accent color 1- Light */ + --made-color-accent-02: #f37338; /* Accent color 2 */ + --made-color-accent-03: #f38b00; /* Accent color 3 */ + --made-color-accent-04: #ffc61e; /* Accent color 4 */ + --made-color-accent-05: #628020; /* Accent color 5 */ + --made-color-accent-06: #25836d; /* Accent color 6 */ + --made-color-accent-07: #d7373c; /* Accent color 7 */ + --made-color-gold-01: #fce8cc; /* Gold color 1 */ + --made-color-gold-02: #f9d199; /* Gold color 2 */ + --made-color-gold-03: #f7ad4c; /* Gold color 3 */ + --made-color-gold-04: #f38b00; /* Gold color 4 */ + --made-color-gold-05: #995600; /* Gold color 5 */ + --made-color-gold-06: #583300; /* Gold color 6 */ + --made-color-gold-07: #301c00; /* Gold color 7 */ + --made-color-gray-01: #fafbfc; /* Canvas color - Gray 1 */ + --made-color-gray-01-25: #f5f8fa; /* Canvas color - Gray 1.25 */ + --made-color-gray-01-5: #edf1f2; /* Canvas color - Gray 1.5 */ + --made-color-gray-02: #e1e5e8; /* Canvas color - Gray 2 */ + --made-color-gray-02-5: #c7d0d1; /* Canvas color - Gray 2.5 */ + --made-color-gray-03: #a5b0ae; /* Gray tints and shades - Gray 3 */ + --made-color-gray-03-5: #d2f9f5; /* Gray tints and shades - Gray 3.5 */ + --made-color-gray-04: #afe5e0; /* Gray tints and shades - Gray 4 */ + --made-color-gray-04-5: #a4dad5; /* Gray tints and shades - Gray 4.5 */ + --made-color-gray-05: #96c6c1; /* Canvas color - Gray 5 */ + --made-color-gray-05-5: #84b0ab; /* Gray tints and shades - Gray 5.5 */ + --made-color-gray-06: #779b96; /* Canvas color - Gray 6 */ + --made-color-gray-06-5: #617c79; /* Gray tints and shades - Gray 6.5 */ + --made-color-gray-07: #4d6260; /* Canvas color - Gray 7 */ + --made-color-green-01: #e8f1d5; /* Green color 1 */ + --made-color-green-02: #b6cd7e; /* Green color 2 */ + --made-color-green-03: #87a740; /* Green color 3 */ + --made-color-green-04: #628020; /* Green color 4 */ + --made-color-green-05: #496019; /* Green color 5 */ + --made-color-green-06: #324113; /* Green color 6 */ + --made-color-green-07: #1c2509; /* Green color 7 */ + --made-color-orange-01: #ffe1d1; /* Orange color 1 */ + --made-color-orange-02: #ffab82; /* Orange color 2 */ + --made-color-orange-03: #f37338; /* Orange color 3 */ + --made-color-orange-04: #cf4500; /* Orange color 4 */ + --made-color-orange-05: #9a3a0a; /* Orange color 5 */ + --made-color-orange-06: #662808; /* Orange color 6 */ + --made-color-orange-07: #331505; /* Orange color 7 */ + --made-color-red-01: #f7dcf7; /* Red color 1 */ + --made-color-red-02: #f59fdf; /* Red color 2 */ + --made-color-red-03: #dd65e6; /* Red color 3 */ + --made-color-red-04: #b538d6; /* Red color 4 */ + --made-color-red-05: #a82286; /* Red color 5 */ + --made-color-red-06: #7d1970; /* Red color 6 */ + --made-color-red-07: #541113; /* Red color 7 */ + --made-color-teal-01: #dcf5ef; /* Teal color 1 */ + --made-color-teal-02: #88d3bf; /* Teal color 2 */ + --made-color-teal-03: #4bab94; /* Teal color 3 */ + --made-color-teal-04: #25836d; /* Teal color 4 */ + --made-color-teal-05: #266555; /* Teal color 5 */ + --made-color-teal-06: #23473d; /* Teal color 6 */ + --made-color-teal-07: #1d2d27; /* Teal color 7 */ + --made-color-white: #f8fffd; /* White */ + --made-color-yellow-01: #fff4d1; /* Yellow color 1 */ + --made-color-yellow-02: #ffe8a5; /* Yellow color 2 */ + --made-color-yellow-03: #ffd863; /* Yellow color 3 */ + --made-color-yellow-04: #ffc61e; /* Yellow color 4 */ + --made-color-yellow-05: #b28c16; /* Yellow color 5 */ + --made-color-yellow-06: #664f0c; /* Yellow color 6 */ + --made-color-yellow-07: #332805; /* Yellow color 7 */ + --made-color-green-success-01: #dff7df; /* Success Green 1 */ + --made-color-green-success-02: #7cd87a; /* Success Green 2 */ + --made-color-green-success-03: #35b132; /* Success Green 3 */ + --made-color-green-success-04: #038a00; /* Success Green 4 */ + --made-color-green-success-05: #097007; /* Success Green 5 */ + --made-color-green-success-06: #0b560a; /* Success Green 6 */ + --made-color-green-success-07: #042604; /* Success Green 7 */ + --made-color-red-error-01: #fadef4; /* Error Red 1 */ + --made-color-red-error-02: #ff99f1; /* Red error 2 */ + --made-color-red-error-03: #ff57ca; /* Red error 3 */ + --made-color-red-error-04: #ed009e; /* Red error 4 */ + --made-color-red-error-05: #b00596; /* Red error 5 */ + --made-color-red-error-06: #710808; /* Red error 6 */ + --made-color-red-error-07: #330505; /* Red error 7 */ + --made-color-action-background-disabled: #a5b0ae; /* Background color for disabled state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-highlight: #dcf5ef; /* Background color of highlight interactive color. Used on date range in Calendar */ + --made-color-action-background-hover: #f5f8fa; /* Background color for hover state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-off: #a5b0ae; /* Background color for off state of UI Elements such as toggle */ + --made-color-action-background-on: #008a60; /* Background color for on state of UI Elements such as toggle */ + --made-color-action-background-on-dark-active: #a5b0ae; /* Background color of secondary interactive color. */ + --made-color-action-background-on-dark-default: #dcf5ef; /* Background color of secondary interactive color */ + --made-color-action-background-on-dark-hover: #e1e5e8; /* Background color of secondary interactive color. */ + --made-color-action-background-primary-active: #23473d; /* Background color of primary interactive color e.g primary buttons. */ + --made-color-action-background-primary-default: #4bab94; /* Background color of primary interactive color e.g primary buttons. */ + --made-color-action-background-primary-hover: #266555; /* Background color of primary interactive color e.g primary buttons. */ + --made-color-action-background-secondary-active: #f8fffd; /* Background color of secondary interactive color e.g. secondary button */ + --made-color-action-background-secondary-default: #f8fffd; /* Background color of secondary interactive color e.g. secondary buttons */ + --made-color-action-background-secondary-hover: #f8fffd; /* Background color of secondary interactive color e.g. secondary buttons */ + --made-color-action-background-selected: #edf1f2; /* Background color for selected state of UI Elements such as tables, dropdowns... */ + --made-color-action-background-selected-hover: #e1e5e8; /* Background color for hover state of on selected UI Elements */ + --made-color-action-border-disabled: #a5b0ae; /* Border color for disabled state of UI Elements such as tables, dropdowns... */ + --made-color-action-border-focus: #4bab94; /* Outline color for focus state. */ + --made-color-action-border-on-dark-active: #a5b0ae; /* Border color of secondary interactive color. */ + --made-color-action-border-on-dark-default: #dcf5ef; /* Border color of secondary interactive color */ + --made-color-action-border-on-dark-hover: #e1e5e8; /* Border color of secondary interactive color. */ + --made-color-action-border-primary-active: #23473d; /* Border color of primary interactive color e.g primary buttons. */ + --made-color-action-border-primary-default: #4bab94; /* Border color of primary interactive color e.g primary buttons. */ + --made-color-action-border-primary-hover: #266555; /* Border color of primary interactive color e.g primary buttons. */ + --made-color-action-border-secondary-active: #23473d; /* Border color of secondary interactive color e.g. secondary button */ + --made-color-action-border-secondary-default: #4bab94; /* Border color of secondary interactive color e.g. secondary buttons */ + --made-color-action-border-secondary-hover: #266555; /* Border color of secondary interactive color e.g. secondary buttons */ + --made-color-action-border-selected-on-dark: #dcf5ef; /* Border color for selected items on dark background. */ + --made-color-action-border-selected-on-light: #4bab94; /* Border color for selected items. */ + --made-color-action-border-focus-on-dark: #f8fffd; /* Outline color for focus state on dark backgrounds. */ + --made-color-action-disabled: #a5b0ae; /* Global color for disabled state. */ + --made-color-action-disabled-button: rgba(177, 173, 166, 0.5); /* Disabled state for buttons. Opacity at 50% */ + --made-color-action-disabled-toggle: rgba(177, 173, 166, 0.25); /* Disabled state for toggles. Opacity at 25% */ + --made-color-action-disabled-text-input: rgba(177, 173, 166, 0.1); /* Disabled state for text inputs. Opacity at 10% */ + --made-color-action-on-dark-active: #a5b0ae; /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-on-dark-default: #dcf5ef; /* Color of interactive color on dark background e.g. buttons */ + --made-color-action-on-dark-hover: #e1e5e8; /* Text color of secondary interactive color on dark background e.g. buttons. */ + --made-color-action-primary-active: #23473d; /* Color of primary interactive color on active e.g. buttons */ + --made-color-action-primary-default: #4bab94; /* Color of primary interactive color e.g. buttons */ + --made-color-action-primary-hover: #266555; /* Color of primary interactive color on hover e.g. buttons */ + --made-color-action-secondary-active: #23473d; /* Color of secondary interactive color e.g. secondary button */ + --made-color-action-secondary-default: #4bab94; /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-secondary-hover: #266555; /* Color of secondary interactive color e.g. secondary buttons */ + --made-color-action-text-disabled: #a5b0ae; /* Text color for disabled state of UI Elements */ + --made-color-action-text-on-dark: #4d6260; /* Text color on top of interactive color on a dark background */ + --made-color-action-text-on-dark-active: #a5b0ae; /* Text color of secondary interactive color e.g. secondary button on a dark background */ + --made-color-action-text-on-dark-default: #dcf5ef; /* Text color of secondary interactive color e.g. secondary button on a dark background */ + --made-color-action-text-on-dark-hover: #e1e5e8; /* Text color of secondary interactive color e.g. secondary button on a dark background */ + --made-color-action-text-on-disabled: #ffffff; /* Text color on top of disabled state color */ + --made-color-action-text-on-hover: #4d6260; /* Text color on top of hover state of UI Elements */ + --made-color-action-text-on-primary: #ffffff; /* Text color on top of primary interactive color */ + --made-color-action-text-on-secondary: #ffffff; /* Text color on top of secondary interactive color */ + --made-color-action-text-on-selected: #4d6260; /* Text color on top of selected state of UI Elements */ + --made-color-action-text-on-selected-hover: #4d6260; /* Text color on top of hover and selected state of UI Elements */ + --made-color-action-text-primary-active: #23473d; /* Text color of primary color pressed interactive state e.g. ghost button */ + --made-color-action-text-primary-default: #4bab94; /* Text color of primary interactive color e.g. links */ + --made-color-action-text-primary-hover: #266555; /* Text color of primary color hover interactive state e.g. secondary buttons */ + --made-color-action-text-secondary-active: #23473d; /* Text color of secondary interactive color e.g. secondary button */ + --made-color-action-text-secondary-default: #4bab94; /* Text color of secondary interactive color e.g. secondary buttons */ + --made-color-action-text-secondary-hover: #266555; /* Text color of secondary interactive color e.g. secondary buttons */ + --made-color-background-default: #f8fffd; /* Main background color of the application. */ + --made-color-background-gray-lightest: #edf1f2; /* Used on background of breadcrumb and pill components. */ + --made-color-background-primary: #4bab94; /* Background of primary brand color. */ + --made-color-background-01: #f5f8fa; /* Secondary background color of the application. */ + --made-color-background-02: #e1e5e8; /* Tertiary background color of the application. */ + --made-color-background-inverse: #4d6260; /* High contrast backgrounds/elements */ + --made-color-border-default-on-dark: #96c6c1; /* Default Border color used for layout elements on a dark background. */ + --made-color-border-default-on-light: #e1e5e8; /* Default Border color used for layout elements e.g. accordion, table. */ + --made-color-brand-on-primary: #ffffff; /* The text color on your primary brand color */ + --made-color-brand-on-secondary: #ffffff; /* The text color on your secondary brand color */ + --made-color-brand-primary: #4bab94; /* The primary color of your brand */ + --made-color-brand-secondary: #4bab94; /* The secondary color of your brand */ + --made-color-feedback-background-error: #ff33b4; /* Background color for error state */ + --made-color-feedback-background-error-light: #fadef4; /* Background color for error state of Light variation of notifications and toasts */ + --made-color-feedback-background-information: #ffeb1f; /* Background color for neutral or optional state */ + --made-color-feedback-background-information-light: #fff4d1; /* Background color for neutral or optional state of Light variation of notifications and toasts */ + --made-color-feedback-background-success: #008a60; /* Background color for success or positive state */ + --made-color-feedback-background-success-light: #dff7df; /* Background color for success or positive state for Light variation of notifications and toasts */ + --made-color-feedback-background-warning: #f38b00; /* Background color for warning state */ + --made-color-feedback-border-error: #ff33b4; /* Border color for error state */ + --made-color-feedback-border-error-light: #fadef4; /* Border color for error state of Light variation of notifications and toasts */ + --made-color-feedback-border-information: #ffeb1f; /* Border color for neutral or optional state */ + --made-color-feedback-border-information-light: #fff4d1; /* Border color for neutral or optional state of Light variation of notifications and toasts */ + --made-color-feedback-border-success: #008a60; /* Border color for success or positive state */ + --made-color-feedback-border-success-light: #dff7df; /* Border color for success or positive state for Light variation of notifications and toasts */ + --made-color-feedback-border-warning: #f38b00; /* Border color or for warning state */ + --made-color-feedback-error: #ff33b4; /* Color for error state */ + --made-color-feedback-error-light: #fadef4; /* Color for light variant of error state */ + --made-color-feedback-information: #ffeb1f; /* Color for neutral or optional state */ + --made-color-feedback-information-light: #fff4d1; /* Color for light variant of neutral or optional state */ + --made-color-feedback-success: #008a60; /* Color for success or positive state */ + --made-color-feedback-success-light: #dff7df; /* Color for light variant of success or positive state */ + --made-color-feedback-warning: #f38b00; /* Color for warning state */ + --made-color-feedback-text-error: #ff33b4; /* Text color for error state */ + --made-color-feedback-text-information: #ffeb1f; /* Text color for neutral or optional state */ + --made-color-feedback-text-on-error: #ffffff; /* Text color displayed on top of the error color */ + --made-color-feedback-text-on-error-light: #b00596; /* Text color displayed on top of the error color of Light variation of notifications and toasts */ + --made-color-feedback-text-on-information: #332805; /* Text color displayed on top of the error color */ + --made-color-feedback-text-on-information-light: #332805; /* Text color displayed on top of the information color of Light variation of notifications and toasts */ + --made-color-feedback-text-on-success: #ffffff; /* Text color displayed on top of the error color */ + --made-color-feedback-text-on-success-light: #097007; /* Text color displayed on top of the success color of Light variation of notifications and toasts */ + --made-color-feedback-text-on-warning: #ffffff; /* Text color displayed on top of the warning color */ + --made-color-feedback-text-success: #008a60; /* Text color for success or positive state */ + --made-color-feedback-text-warning: #f38b00; /* Text color for warning state */ + --made-color-text-default-on-dark: #ffffff; /* Color of body text on dark background. */ + --made-color-text-default-on-light: #4d6260; /* Color of body text on light background. */ + --made-color-text-helper: #96c6c1; /* Text color of helper text on forms, cards etc. */ + --made-color-text-primary: #4bab94; /* Text color of primary brand color. */ + --made-color-text-inverse: #f8fffd; /* Inverse text/icon color */ + --made-color-visualization-01: #0023cf; /* Data Visualization Color */ + --made-color-visualization-02: #ac00cf; /* Data Visualization Color */ + --made-color-visualization-03: #cf008a; /* Data Visualization Color */ + --made-font-body-family-bold: serif, Arial; /* Font family for bold body text. */ + --made-font-body-family-default: serif, Arial; /* Default font family for body text. */ + --made-font-body-family-narrow: serif, Arial; /* Default font family for narrow/small text. Used on tooltip and notification */ + --made-font-body-letter-spacing: normal; /* Default letter spacing for body text. */ + --made-font-body-line-height: 1.5; /* Default line height for body text. */ + --made-font-body-size-default: 0.875rem; /* Default font size for body text. */ + --made-font-body-size-large: 1rem; /* Large font size for body text. */ + --made-font-body-size-small: 0.75rem; /* Small font size for body text. */ + --made-font-body-weight-bold: 700; /* Bold font weight for body text. */ + --made-font-body-weight-default: 400; /* Default font weight for body text. */ + --made-font-family-bold: serif, Arial; /* Default bold weight font used across application */ + --made-font-family-extra-light: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-family-eyebrow: serif, Arial; /* Font family for headings (H1,H2 and display text) */ + --made-font-family-heading: serif, Arial; /* Font family for headings (H1,H2 and display text) */ + --made-font-family-light: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-family-medium: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-family-narrow: serif, Arial; /* Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. */ + --made-font-family-narrow-bold: serif, Arial; /* Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. */ + --made-font-family-narrow-medium: serif, Arial; /* Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. */ + --made-font-family-regular: serif, Arial; /* Use Mark for MC for text slightly larger than 14-pixels in all digital applications. */ + --made-font-heading-family-display-01: serif, Arial; /* Font family for Display 01. */ + --made-font-heading-family-display-02: serif, Arial; /* Font family for Display 02. */ + --made-font-heading-family-display-03: serif, Arial; /* Font family for Display 03. */ + --made-font-heading-family-eyebrow-01: serif, Arial; /* Font family for small eyebrow text. */ + --made-font-heading-family-eyebrow-02: serif, Arial; /* Font family for large eyebrow text. */ + --made-font-heading-family-level-01: serif, Arial; /* Font Family for Heading 1 (H1). */ + --made-font-heading-family-level-02: serif, Arial; /* Font Family for Heading 2 (H2). */ + --made-font-heading-family-level-03: serif, Arial; /* Font Family for Heading 3 (H3). */ + --made-font-heading-family-level-04: serif, Arial; /* Font Family for Heading 4 (H4). */ + --made-font-heading-family-level-05: serif, Arial; /* Font Family for Heading 5 (H5). */ + --made-font-heading-family-level-06: serif, Arial; /* Font Family for Heading 6 (H6). */ + --made-font-heading-letter-spacing-display-01: normal; /* Letter spacing of Display 02. */ + --made-font-heading-letter-spacing-display-02: normal; /* Letter spacing of Display 02. */ + --made-font-heading-letter-spacing-display-03: normal; /* Letter spacing of Display 03. */ + --made-font-heading-letter-spacing-eyebrow-01: 1.8px; /* Letter spacing for small eyebrow text. */ + --made-font-heading-letter-spacing-eyebrow-02: 1.8px; /* Letter spacing for small eyebrow text. */ + --made-font-heading-letter-spacing-level-01: normal; /* Letter spacing of Heading 1 (H1). */ + --made-font-heading-letter-spacing-level-02: normal; /* Letter spacing of Heading 2 (H2). */ + --made-font-heading-letter-spacing-level-03: normal; /* Letter spacing of Heading 3 (H3). */ + --made-font-heading-letter-spacing-level-04: normal; /* Letter spacing of Heading 4 (H4). */ + --made-font-heading-letter-spacing-level-05: normal; /* Letter spacing of Heading 5 (H5). */ + --made-font-heading-letter-spacing-level-06: normal; /* Letter spacing of Heading 6 (H6). */ + --made-font-heading-line-height-display-01: 1.25; /* Line height of Display 01. */ + --made-font-heading-line-height-display-02: 1.25; /* Line height of Display 02. */ + --made-font-heading-line-height-display-03: 1.25; /* Line height of Display 03. */ + --made-font-heading-line-height-eyebrow-01: 1.25; /* Line Height for small eyebrow text. */ + --made-font-heading-line-height-eyebrow-02: 1.25; /* Line Height for large eyebrow text. */ + --made-font-heading-line-height-level-01: 1.25; /* Line Height of Heading 1 (H1). */ + --made-font-heading-line-height-level-02: 1.25; /* Line Height of Heading 2 (H2). */ + --made-font-heading-line-height-level-03: 1.25; /* Line Height of Heading 3 (H3). */ + --made-font-heading-line-height-level-04: 1.25; /* Line Height of Heading 4 (H4). */ + --made-font-heading-line-height-level-05: 1.25; /* Line Height of Heading 5 (H5). */ + --made-font-heading-line-height-level-06: 1.25; /* Line Height of Heading 6 (H6). */ + --made-font-heading-size-display-01: 5rem; /* Font Size for Display 01. */ + --made-font-heading-size-display-02: 3rem; /* Font Size for Display 02. */ + --made-font-heading-size-display-03: 2rem; /* Font Size for Display 03. */ + --made-font-heading-size-eyebrow-01: 0.75rem; /* Font size for small eyebrow text */ + --made-font-heading-size-eyebrow-02: 1rem; /* Font size for default eyebrow text */ + --made-font-heading-size-level-01: 2rem; /* Font Size for Heading 1 (H1) */ + --made-font-heading-size-level-02: 1.75rem; /* Font Size for Heading 2 (H2) */ + --made-font-heading-size-level-03: 1.5rem; /* Font Size for Heading 3 (H3) */ + --made-font-heading-size-level-04: 1.25rem; /* Font Size for Heading 4 (H4) */ + --made-font-heading-size-level-05: 1.125rem; /* Font Size for Heading 5 (H5) */ + --made-font-heading-size-level-06: 1rem; /* Font Size for Heading 6 (H6) */ + --made-font-heading-weight-display-01: 400; /* Font family for Display 01. */ + --made-font-heading-weight-display-02: 400; /* Font family for Display 02. */ + --made-font-heading-weight-display-03: 400; /* Font family for Display 03. */ + --made-font-heading-weight-eyebrow-01: 700; /* Font family for small eyebrow text. */ + --made-font-heading-weight-eyebrow-02: 700; /* Font family for large eyebrow text. */ + --made-font-heading-weight-level-01: 400; /* Font Family for Heading 1 (H1). */ + --made-font-heading-weight-level-02: 400; /* Font Family for Heading 2 (H2). */ + --made-font-heading-weight-level-03: 400; /* Font Family for Heading 3 (H3). */ + --made-font-heading-weight-level-04: 400; /* Font Family for Heading 4 (H4). */ + --made-font-heading-weight-level-05: 400; /* Font Family for Heading 5 (H5). */ + --made-font-heading-weight-level-06: 400; /* Font Family for Heading 6 (H6). */ + --made-font-size-10: 1.75rem; /* Font size: 28px */ + --made-font-size-11: 2rem; /* Font size: 32px */ + --made-font-size-12: 2.25rem; /* Font size: 36px */ + --made-font-size-13: 3rem; /* Font size: 48px */ + --made-font-size-14: 3.75rem; /* Font size: 60px */ + --made-font-size-15: 5rem; /* Font size: 80px */ + --made-font-size-01: 0.5625rem; /* Font size: 9px */ + --made-font-size-02: 0.75rem; /* Font size: 12px */ + --made-font-size-03: 0.8125rem; /* Font size: 13px */ + --made-font-size-04: 0.875rem; /* Font size: 14px */ + --made-font-size-05: 0.9375rem; /* Font size: 15px */ + --made-font-size-06: 1rem; /* Font size: 16px */ + --made-font-size-07: 1.125rem; /* Font size: 18px */ + --made-font-size-08: 1.25rem; /* Font size: 20px */ + --made-font-size-09: 1.5rem; /* Font size: 24px */ + --made-font-weight-bold: 700; /* Use bold sparingly for subtitles, eyebrows, emphasis, and dates */ + --made-font-weight-default: 400; /* Normal font weight is used for body text and form inputs. */ + --made-font-weight-light: 100; /* Light font weight is used for headings. */ + --made-font-weight-medium: 500; /* Semi bold font weight is used for buttons. */ + --made-letter-spacing-default: normal; /* Default letter spacing for all text. */ + --made-letter-spacing-eyebrow: 1.8px; /* Default letter spacing for all text. */ + --made-line-height-1-25-x: 1.25; /* Headings use a 1.25× multiplier */ + --made-line-height-1-5-x: 1.5; /* To ensure readability, Body uses a 1.5× multiplier */ + --made-line-height-1-x: 1; /* Line height for single line text elements displayed in components */ + --made-line-height-default: 1.5; /* Default line height. */ + --made-line-height-heading: 1.25; /* Headings line-height */ + --made-line-height-single: 1; /* Line height for single line text elements displayed in components */ + --made-opacity-0: 0; /* Gives 0% opacity to an element (Hides an element). */ + --made-opacity-15: 0.15; /* Gives 15% opacity to an element. */ + --made-opacity-25: 0.25; /* Gives 25% opacity to an element. */ + --made-opacity-50: 0.5; /* Gives 50% opacity to an element. */ + --made-opacity-75: 0.75; /* Gives 75% opacity to an element. */ + --made-opacity-100: 1; /* Gives 100% opacity to an element. */ + --made-size-1-x: 0.25rem; /* Size: 4px */ + --made-size-2-x: 0.5rem; /* Size: 8px */ + --made-size-3-x: 0.75rem; /* Size: 12px */ + --made-size-4-x: 1rem; /* Size: 16px */ + --made-size-5-x: 1.25rem; /* Size: 20px */ + --made-size-6-x: 1.5rem; /* Size: 24px */ + --made-size-7-x: 1.75rem; /* Size: 28px */ + --made-size-8-x: 2rem; /* Size: 32px */ + --made-size-9-x: 2.25rem; /* Size: 36px */ + --made-size-10-x: 2.5rem; /* Size: 40px */ + --made-size-11-x: 2.75rem; /* Size: 44px */ + --made-size-12-x: 3rem; /* Size: 48px */ + --made-size-13-x: 3.25rem; /* Size: 52px */ + --made-size-14-x: 3.5rem; /* Size: 56px */ + --made-size-15-x: 3.75rem; /* Size: 60px */ + --made-size-16-x: 4rem; /* Size: 64px */ + --made-size-17-x: 4.25rem; /* Size: 68px */ + --made-size-18-x: 4.5rem; /* Size: 72px */ + --made-size-19-x: 4.75rem; /* Size: 76px */ + --made-size-20-x: 5rem; /* Size: 80px */ + --made-space-1-x: 0.25rem; /* Space: 4px */ + --made-space-2-x: 0.5rem; /* Space: 8px */ + --made-space-3-x: 0.75rem; /* Space: 12px */ + --made-space-4-x: 1rem; /* Space: 16px */ + --made-space-5-x: 1.25rem; /* Space: 20px */ + --made-space-6-x: 1.5rem; /* Space: 24px */ + --made-space-7-x: 1.75rem; /* Space: 28px */ + --made-space-8-x: 2rem; /* Space: 32px */ + --made-space-9-x: 2.25rem; /* Space: 36px */ + --made-space-10-x: 2.5rem; /* Space: 40px */ + --made-space-11-x: 2.75rem; /* Space: 44px */ + --made-space-12-x: 3rem; /* Space: 48px */ + --made-space-13-x: 3.25rem; /* Space: 52px */ + --made-space-14-x: 3.5rem; /* Space: 56px */ + --made-space-15-x: 3.75rem; /* Space: 60px */ + --made-space-16-x: 4rem; /* Space: 64px */ + --made-space-17-x: 4.25rem; /* Space: 68px */ + --made-space-18-x: 4.5rem; /* Space: 72px */ + --made-space-19-x: 4.75rem; /* Space: 76px */ + --made-space-20-x: 5rem; /* Space: 80px */ + --made-time-moderate-01: 150ms; /* Micro-interactions, small expansion, short distance movements. */ + --made-time-moderate-02: 240ms; /* Expansion, system communication, toast. */ + --made-time-moderate-fast-01: 70ms; /* Micro-interactions such as button and toggle. */ + --made-time-moderate-fast-02: 110ms; /* Micro-interactions such as fade. */ + --made-time-slow-01: 400ms; /* Large expansion, important system notifications. */ + --made-time-slow-02: 700ms; /* Background dimming. */ + --made-backdrop-color-background: rgba(20,20,19,0.7); /* Background on overlay used with modals */ + --made-button-border-radius: 2px; /* Button Border Radius */ + --made-connect-color-background-api: #ffc61e; /* Background color for items in API category. */ + --made-connect-color-background-application: #25836d; /* Background color for items in application category. */ + --made-connect-color-background-collection: #4d6260; /* Background color for items in collection category. */ + --made-connect-color-background-document: #a5b0ae; /* Background color for items in document category. */ + --made-connect-color-background-product: #A82226; /* Background color for items in product category. */ + --made-connect-color-background-reference: #628020; /* Background color for items in reference category. */ + --made-connect-color-background-report: #f38b00; /* Border color for items in report category. */ + --made-connect-color-border-api: #ffc61e; /* Border color for items in API category. */ + --made-connect-color-border-application: #25836d; /* Border color for items in application category. */ + --made-connect-color-border-collection: #4d6260; /* Border color for items in collection category. */ + --made-connect-color-border-document: #a5b0ae; /* Border color for items in document category. */ + --made-connect-color-border-product: #A82226; /* Border color for items in product category. */ + --made-connect-color-border-reference: #628020; /* Border color for items in reference category. */ + --made-connect-color-border-report: #9a3a0a; /* Border color for items in report category. */ + --made-forms-color-background-default: #f8fffd; /* Default background color for forms. */ + --made-forms-color-border-default: #96c6c1; /* Default border color for forms. */ + --made-grid-gutters-lg: 1rem; /* Gutter size on large breakpoint. */ + --made-grid-gutters-md: 1rem; /* Gutter size on medium breakpoint. */ + --made-grid-gutters-sm: 0.5rem; /* Grid gutter size on small breakpoint. */ + --made-grid-margin-lg: 1rem; /* Margin size on large breakpoint. */ + --made-grid-margin-md: 1rem; /* Margin size on medium breakpoint. */ + --made-grid-margin-sm: 0.5rem; /* Margin size on small breakpoint. */ + --made-link-color-default: #4bab94; /* Text color for link */ + --made-link-color-on-dark: #dcf5ef; /* Text color for links on dark backgrounds */ + --made-scrollbar-color-background: #a5b0ae; /* Background color for scrollbar component */ +} diff --git a/assets/partnerbank-test-theme/tokens.json b/assets/partnerbank-test-theme/tokens.json new file mode 100644 index 00000000..ecb44984 --- /dev/null +++ b/assets/partnerbank-test-theme/tokens.json @@ -0,0 +1,404 @@ +{ +"MadeFooterColorText": "MadeColorWhite", +"MadeFooterColorBackground": "MadeColorGray07", +"MadeHeaderColorText": "MadeColorWhite", +"MadeHeaderColorBackground": "MadeColorGray07", +"MadePillColorBackgroundDefault": "MadeColorBackground02", +"MadePillColorBackgroundHover": "MadeColorGray025", +"MadePillBorderRadius": "MadeBorderRadius05", +"MadeSearchColorBackground": "MadeColorBackground01", +"MadeSearchActionColorBackgroundDefault": "MadeSearchColorBackground", +"MadeSearchActionColorBackgroundHover": "MadeColorGray015", +"MadeShadowToggle": "0 5px 10px 0 rgba(20,20,19,0.15), 0 2px 2px 0 rgba(20,20,19,0.3);", +"MadeShadowDefault": "0 2px 10px 0 rgba(20,20,19,0.20)", +"MadeZIndexBackdrop": "40", +"MadeZIndexDropdown": "30", +"MadeZIndexModal": "50", +"MadeZIndexToast": "50", +"MadeBorderRadius01": "2px", +"MadeBorderRadius02": "4px", +"MadeBorderRadius03": "6px", +"MadeBorderRadius04": "8px", +"MadeBorderRadius05": "12px", +"MadeBorderRadius06": "16px", +"MadeBorderRadius07": "20px", +"MadeBorderRadius08": "24px", +"MadeBorderRadius09": "28px", +"MadeBorderRadiusCircle": "50%", +"MadeBorderRadiusDefault": "MadeBorderRadius02", +"MadeBorderRadiusLarge": "MadeBorderRadius04", +"MadeBorderRadiusSmall": "MadeBorderRadius01", +"MadeColorAccent01Dark": "#852d01", +"MadeColorAccent01Darker": "#331505", +"MadeColorAccent01Default": "#cf4500", +"MadeColorAccent01Light": "#d0805b", +"MadeColorAccent02": "#f37338", +"MadeColorAccent03": "#f38b00", +"MadeColorAccent04": "#ffc61e", +"MadeColorAccent05": "#628020", +"MadeColorAccent06": "#25836d", +"MadeColorAccent07": "#d7373c", +"MadeColorGold01": "#fce8cc", +"MadeColorGold02": "#f9d199", +"MadeColorGold03": "#f7ad4c", +"MadeColorGold04": "#f38b00", +"MadeColorGold05": "#995600", +"MadeColorGold06": "#583300", +"MadeColorGold07": "#301c00", +"MadeColorGray01": "#fafbfc", +"MadeColorGray0125": "#f5f8fa", +"MadeColorGray015": "#edf1f2", +"MadeColorGray02": "#e1e5e8", +"MadeColorGray025": "#c7d0d1", +"MadeColorGray03": "#a5b0ae", +"MadeColorGray035": "#d2f9f5", +"MadeColorGray04": "#afe5e0", +"MadeColorGray045": "#a4dad5", +"MadeColorGray05": "#96c6c1", +"MadeColorGray055": "#84b0ab", +"MadeColorGray06": "#779b96", +"MadeColorGray065": "#617c79", +"MadeColorGray07": "#4d6260", +"MadeColorGreen01": "#e8f1d5", +"MadeColorGreen02": "#b6cd7e", +"MadeColorGreen03": "#87a740", +"MadeColorGreen04": "#628020", +"MadeColorGreen05": "#496019", +"MadeColorGreen06": "#324113", +"MadeColorGreen07": "#1c2509", +"MadeColorOrange01": "#ffe1d1", +"MadeColorOrange02": "#ffab82", +"MadeColorOrange03": "#f37338", +"MadeColorOrange04": "#cf4500", +"MadeColorOrange05": "#9a3a0a", +"MadeColorOrange06": "#662808", +"MadeColorOrange07": "#331505", +"MadeColorRed01": "#f7dcf7", +"MadeColorRed02": "#f59fdf", +"MadeColorRed03": "#dd65e6", +"MadeColorRed04": "#b538d6", +"MadeColorRed05": "#a82286", +"MadeColorRed06": "#7d1970", +"MadeColorRed07": "#541113", +"MadeColorTeal01": "#dcf5ef", +"MadeColorTeal02": "#88d3bf", +"MadeColorTeal03": "#4bab94", +"MadeColorTeal04": "#25836d", +"MadeColorTeal05": "#266555", +"MadeColorTeal06": "#23473d", +"MadeColorTeal07": "#1d2d27", +"MadeColorWhite": "#f8fffd", +"MadeColorYellow01": "#fff4d1", +"MadeColorYellow02": "#ffe8a5", +"MadeColorYellow03": "#ffd863", +"MadeColorYellow04": "#ffc61e", +"MadeColorYellow05": "#b28c16", +"MadeColorYellow06": "#664f0c", +"MadeColorYellow07": "#332805", +"MadeColorGreenSuccess01": "#dff7df", +"MadeColorGreenSuccess02": "#7cd87a", +"MadeColorGreenSuccess03": "#35b132", +"MadeColorGreenSuccess04": "#038a00", +"MadeColorGreenSuccess05": "#097007", +"MadeColorGreenSuccess06": "#0b560a", +"MadeColorGreenSuccess07": "#042604", +"MadeColorRedError01": "#fadef4", +"MadeColorRedError02": "#ff99f1", +"MadeColorRedError03": "#ff57ca", +"MadeColorRedError04": "#ed009e", +"MadeColorRedError05": "#b00596", +"MadeColorRedError06": "#710808", +"MadeColorRedError07": "#330505", +"MadeColorActionBackgroundDisabled": "MadeColorActionDisabled", +"MadeColorActionBackgroundHighlight": "MadeColorTeal01", +"MadeColorActionBackgroundHover": "MadeColorGray0125", +"MadeColorActionBackgroundOff": "MadeColorActionDisabled", +"MadeColorActionBackgroundOn": "MadeColorFeedbackSuccess", +"MadeColorActionBackgroundOnDarkActive": "MadeColorActionOnDarkActive", +"MadeColorActionBackgroundOnDarkDefault": "MadeColorActionOnDarkDefault", +"MadeColorActionBackgroundOnDarkHover": "MadeColorActionOnDarkHover", +"MadeColorActionBackgroundPrimaryActive": "MadeColorActionPrimaryActive", +"MadeColorActionBackgroundPrimaryDefault": "MadeColorActionPrimaryDefault", +"MadeColorActionBackgroundPrimaryHover": "MadeColorTeal05", +"MadeColorActionBackgroundSecondaryActive": "MadeColorBackgroundDefault", +"MadeColorActionBackgroundSecondaryDefault": "MadeColorBackgroundDefault", +"MadeColorActionBackgroundSecondaryHover": "MadeColorBackgroundDefault", +"MadeColorActionBackgroundSelected": "MadeColorGray015", +"MadeColorActionBackgroundSelectedHover": "MadeColorGray02", +"MadeColorActionBorderDisabled": "MadeColorActionDisabled", +"MadeColorActionBorderFocus": "MadeColorActionPrimaryDefault", +"MadeColorActionBorderOnDarkActive": "MadeColorActionOnDarkActive", +"MadeColorActionBorderOnDarkDefault": "MadeColorActionOnDarkDefault", +"MadeColorActionBorderOnDarkHover": "MadeColorActionOnDarkHover", +"MadeColorActionBorderPrimaryActive": "MadeColorActionPrimaryActive", +"MadeColorActionBorderPrimaryDefault": "MadeColorActionPrimaryDefault", +"MadeColorActionBorderPrimaryHover": "MadeColorActionPrimaryHover", +"MadeColorActionBorderSecondaryActive": "MadeColorActionSecondaryActive", +"MadeColorActionBorderSecondaryDefault": "MadeColorActionSecondaryDefault", +"MadeColorActionBorderSecondaryHover": "MadeColorActionSecondaryHover", +"MadeColorActionBorderSelectedOnDark": "MadeColorActionOnDarkDefault", +"MadeColorActionBorderSelectedOnLight": "MadeColorActionPrimaryDefault", +"MadeColorActionBorderFocusOnDark": "MadeColorWhite", +"MadeColorActionDisabled": "MadeColorGray03", +"MadeColorActionDisabledButton": "#b1ada6", +"MadeColorActionDisabledToggle": "#b1ada6", +"MadeColorActionDisabledTextInput": "#b1ada6", +"MadeColorActionOnDarkActive": "MadeColorGray03", +"MadeColorActionOnDarkDefault": "MadeColorTeal01", +"MadeColorActionOnDarkHover": "MadeColorGray02", +"MadeColorActionPrimaryActive": "MadeColorTeal06", +"MadeColorActionPrimaryDefault": "MadeColorBrandPrimary", +"MadeColorActionPrimaryHover": "MadeColorTeal05", +"MadeColorActionSecondaryActive": "MadeColorActionPrimaryActive", +"MadeColorActionSecondaryDefault": "MadeColorBrandSecondary", +"MadeColorActionSecondaryHover": "MadeColorActionPrimaryHover", +"MadeColorActionTextDisabled": "MadeColorActionDisabled", +"MadeColorActionTextOnDark": "MadeColorGray07", +"MadeColorActionTextOnDarkActive": "MadeColorActionOnDarkActive", +"MadeColorActionTextOnDarkDefault": "MadeColorActionOnDarkDefault", +"MadeColorActionTextOnDarkHover": "MadeColorActionOnDarkHover", +"MadeColorActionTextOnDisabled": "MadeColorTextDefaultOnDark", +"MadeColorActionTextOnHover": "MadeColorTextDefaultOnLight", +"MadeColorActionTextOnPrimary": "MadeColorBrandOnPrimary", +"MadeColorActionTextOnSecondary": "MadeColorBrandOnSecondary", +"MadeColorActionTextOnSelected": "MadeColorTextDefaultOnLight", +"MadeColorActionTextOnSelectedHover": "MadeColorTextDefaultOnLight", +"MadeColorActionTextPrimaryActive": "MadeColorActionPrimaryActive", +"MadeColorActionTextPrimaryDefault": "MadeColorActionPrimaryDefault", +"MadeColorActionTextPrimaryHover": "MadeColorActionPrimaryHover", +"MadeColorActionTextSecondaryActive": "MadeColorActionSecondaryActive", +"MadeColorActionTextSecondaryDefault": "MadeColorActionSecondaryDefault", +"MadeColorActionTextSecondaryHover": "MadeColorActionSecondaryHover", +"MadeColorBackgroundDefault": "MadeColorWhite", +"MadeColorBackgroundGrayLightest": "MadeColorGray015", +"MadeColorBackgroundPrimary": "MadeColorBrandPrimary", +"MadeColorBackground01": "MadeColorGray0125", +"MadeColorBackground02": "MadeColorGray02", +"MadeColorBackgroundInverse": "MadeColorGray07", +"MadeColorBorderDefaultOnDark": "MadeColorGray05", +"MadeColorBorderDefaultOnLight": "MadeColorGray02", +"MadeColorBrandOnPrimary": "#ffffff", +"MadeColorBrandOnSecondary": "#ffffff", +"MadeColorBrandPrimary": "MadeColorTeal03", +"MadeColorBrandSecondary": "MadeColorTeal03", +"MadeColorFeedbackBackgroundError": "MadeColorFeedbackError", +"MadeColorFeedbackBackgroundErrorLight": "MadeColorFeedbackErrorLight", +"MadeColorFeedbackBackgroundInformation": "MadeColorFeedbackInformation", +"MadeColorFeedbackBackgroundInformationLight": "MadeColorFeedbackInformationLight", +"MadeColorFeedbackBackgroundSuccess": "MadeColorFeedbackSuccess", +"MadeColorFeedbackBackgroundSuccessLight": "MadeColorFeedbackSuccessLight", +"MadeColorFeedbackBackgroundWarning": "MadeColorFeedbackWarning", +"MadeColorFeedbackBorderError": "MadeColorFeedbackError", +"MadeColorFeedbackBorderErrorLight": "MadeColorFeedbackErrorLight", +"MadeColorFeedbackBorderInformation": "MadeColorFeedbackInformation", +"MadeColorFeedbackBorderInformationLight": "MadeColorFeedbackInformationLight", +"MadeColorFeedbackBorderSuccess": "MadeColorFeedbackSuccess", +"MadeColorFeedbackBorderSuccessLight": "MadeColorFeedbackSuccessLight", +"MadeColorFeedbackBorderWarning": "MadeColorFeedbackWarning", +"MadeColorFeedbackError": "#ff33b4", +"MadeColorFeedbackErrorLight": "MadeColorRedError01", +"MadeColorFeedbackInformation": "#ffeb1f", +"MadeColorFeedbackInformationLight": "MadeColorYellow01", +"MadeColorFeedbackSuccess": "#008a60", +"MadeColorFeedbackSuccessLight": "MadeColorGreenSuccess01", +"MadeColorFeedbackWarning": "MadeColorGold04", +"MadeColorFeedbackTextError": "MadeColorFeedbackError", +"MadeColorFeedbackTextInformation": "MadeColorFeedbackInformation", +"MadeColorFeedbackTextOnError": "MadeColorTextDefaultOnDark", +"MadeColorFeedbackTextOnErrorLight": "MadeColorRedError05", +"MadeColorFeedbackTextOnInformation": "MadeColorYellow07", +"MadeColorFeedbackTextOnInformationLight": "MadeColorYellow07", +"MadeColorFeedbackTextOnSuccess": "MadeColorTextDefaultOnDark", +"MadeColorFeedbackTextOnSuccessLight": "MadeColorGreenSuccess05", +"MadeColorFeedbackTextOnWarning": "MadeColorTextDefaultOnDark", +"MadeColorFeedbackTextSuccess": "MadeColorFeedbackSuccess", +"MadeColorFeedbackTextWarning": "MadeColorFeedbackWarning", +"MadeColorTextDefaultOnDark": "#ffffff", +"MadeColorTextDefaultOnLight": "MadeColorGray07", +"MadeColorTextHelper": "MadeColorGray05", +"MadeColorTextPrimary": "MadeColorBrandPrimary", +"MadeColorTextInverse": "MadeColorWhite", +"MadeColorVisualization01": "#0023cf", +"MadeColorVisualization02": "#ac00cf", +"MadeColorVisualization03": "#cf008a", +"MadeFontBodyFamilyBold": "MadeFontFamilyMedium", +"MadeFontBodyFamilyDefault": "MadeFontFamilyRegular", +"MadeFontBodyFamilyNarrow": "MadeFontFamilyNarrow", +"MadeFontBodyLetterSpacing": "MadeLetterSpacingDefault", +"MadeFontBodyLineHeight": "MadeLineHeightDefault", +"MadeFontBodySizeDefault": "MadeFontSize04", +"MadeFontBodySizeLarge": "MadeFontSize06", +"MadeFontBodySizeSmall": "MadeFontSize02", +"MadeFontBodyWeightBold": "MadeFontWeightBold", +"MadeFontBodyWeightDefault": "MadeFontWeightDefault", +"MadeFontFamilyBold": "serif, Arial", +"MadeFontFamilyExtraLight": "serif, Arial", +"MadeFontFamilyEyebrow": "MadeFontFamilyBold", +"MadeFontFamilyHeading": "MadeFontFamilyLight", +"MadeFontFamilyLight": "serif, Arial", +"MadeFontFamilyMedium": "serif, Arial", +"MadeFontFamilyNarrow": "serif, Arial", +"MadeFontFamilyNarrowBold": "serif, Arial", +"MadeFontFamilyNarrowMedium": "serif, Arial", +"MadeFontFamilyRegular": "serif, Arial", +"MadeFontHeadingFamilyDisplay01": "MadeFontFamilyHeading", +"MadeFontHeadingFamilyDisplay02": "MadeFontFamilyHeading", +"MadeFontHeadingFamilyDisplay03": "MadeFontFamilyHeading", +"MadeFontHeadingFamilyEyebrow01": "MadeFontFamilyEyebrow", +"MadeFontHeadingFamilyEyebrow02": "MadeFontFamilyEyebrow", +"MadeFontHeadingFamilyLevel01": "MadeFontFamilyHeading", +"MadeFontHeadingFamilyLevel02": "MadeFontFamilyHeading", +"MadeFontHeadingFamilyLevel03": "MadeFontBodyFamilyDefault", +"MadeFontHeadingFamilyLevel04": "MadeFontBodyFamilyDefault", +"MadeFontHeadingFamilyLevel05": "MadeFontBodyFamilyDefault", +"MadeFontHeadingFamilyLevel06": "MadeFontBodyFamilyBold", +"MadeFontHeadingLetterSpacingDisplay01": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingDisplay02": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingDisplay03": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingEyebrow01": "MadeLetterSpacingEyebrow", +"MadeFontHeadingLetterSpacingEyebrow02": "MadeLetterSpacingEyebrow", +"MadeFontHeadingLetterSpacingLevel01": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingLevel02": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingLevel03": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingLevel04": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingLevel05": "MadeLetterSpacingDefault", +"MadeFontHeadingLetterSpacingLevel06": "MadeLetterSpacingDefault", +"MadeFontHeadingLineHeightDisplay01": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightDisplay02": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightDisplay03": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightEyebrow01": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightEyebrow02": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightLevel01": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightLevel02": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightLevel03": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightLevel04": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightLevel05": "MadeLineHeightHeading", +"MadeFontHeadingLineHeightLevel06": "MadeLineHeightHeading", +"MadeFontHeadingSizeDisplay01": "MadeFontSize15", +"MadeFontHeadingSizeDisplay02": "MadeFontSize13", +"MadeFontHeadingSizeDisplay03": "MadeFontSize11", +"MadeFontHeadingSizeEyebrow01": "MadeFontBodySizeSmall", +"MadeFontHeadingSizeEyebrow02": "MadeFontBodySizeLarge", +"MadeFontHeadingSizeLevel01": "MadeFontSize11", +"MadeFontHeadingSizeLevel02": "MadeFontSize10", +"MadeFontHeadingSizeLevel03": "MadeFontSize09", +"MadeFontHeadingSizeLevel04": "MadeFontSize08", +"MadeFontHeadingSizeLevel05": "MadeFontSize07", +"MadeFontHeadingSizeLevel06": "MadeFontSize06", +"MadeFontHeadingWeightDisplay01": "MadeFontWeightDefault", +"MadeFontHeadingWeightDisplay02": "MadeFontWeightDefault", +"MadeFontHeadingWeightDisplay03": "MadeFontWeightDefault", +"MadeFontHeadingWeightEyebrow01": "MadeFontWeightBold", +"MadeFontHeadingWeightEyebrow02": "MadeFontWeightBold", +"MadeFontHeadingWeightLevel01": "MadeFontWeightDefault", +"MadeFontHeadingWeightLevel02": "MadeFontWeightDefault", +"MadeFontHeadingWeightLevel03": "MadeFontWeightDefault", +"MadeFontHeadingWeightLevel04": "MadeFontWeightDefault", +"MadeFontHeadingWeightLevel05": "MadeFontWeightDefault", +"MadeFontHeadingWeightLevel06": "MadeFontWeightDefault", +"MadeFontSize10": "1.75rem", +"MadeFontSize11": "2rem", +"MadeFontSize12": "2.25rem", +"MadeFontSize13": "3rem", +"MadeFontSize14": "3.75rem", +"MadeFontSize15": "5rem", +"MadeFontSize01": "0.5625rem", +"MadeFontSize02": "0.75rem", +"MadeFontSize03": "0.8125rem", +"MadeFontSize04": "0.875rem", +"MadeFontSize05": "0.9375rem", +"MadeFontSize06": "1rem", +"MadeFontSize07": "1.125rem", +"MadeFontSize08": "1.25rem", +"MadeFontSize09": "1.5rem", +"MadeFontWeightBold": "700", +"MadeFontWeightDefault": "400", +"MadeFontWeightLight": "100", +"MadeFontWeightMedium": "500", +"MadeLetterSpacingDefault": "normal", +"MadeLetterSpacingEyebrow": "1.8px", +"MadeLineHeight125X": "1.25", +"MadeLineHeight15X": "1.5", +"MadeLineHeight1X": "1", +"MadeLineHeightDefault": "1.5", +"MadeLineHeightHeading": "1.25", +"MadeLineHeightSingle": "1", +"MadeOpacity0": "0", +"MadeOpacity15": "0.15", +"MadeOpacity25": "0.25", +"MadeOpacity50": "0.5", +"MadeOpacity75": "0.75", +"MadeOpacity100": "1", +"MadeSize1X": "0.25rem", +"MadeSize2X": "0.5rem", +"MadeSize3X": "0.75rem", +"MadeSize4X": "1rem", +"MadeSize5X": "1.25rem", +"MadeSize6X": "1.5rem", +"MadeSize7X": "1.75rem", +"MadeSize8X": "2rem", +"MadeSize9X": "2.25rem", +"MadeSize10X": "2.5rem", +"MadeSize11X": "2.75rem", +"MadeSize12X": "3rem", +"MadeSize13X": "3.25rem", +"MadeSize14X": "3.5rem", +"MadeSize15X": "3.75rem", +"MadeSize16X": "4rem", +"MadeSize17X": "4.25rem", +"MadeSize18X": "4.5rem", +"MadeSize19X": "4.75rem", +"MadeSize20X": "5rem", +"MadeSpace1X": "0.25rem", +"MadeSpace2X": "0.5rem", +"MadeSpace3X": "0.75rem", +"MadeSpace4X": "1rem", +"MadeSpace5X": "1.25rem", +"MadeSpace6X": "1.5rem", +"MadeSpace7X": "1.75rem", +"MadeSpace8X": "2rem", +"MadeSpace9X": "2.25rem", +"MadeSpace10X": "2.5rem", +"MadeSpace11X": "2.75rem", +"MadeSpace12X": "3rem", +"MadeSpace13X": "3.25rem", +"MadeSpace14X": "3.5rem", +"MadeSpace15X": "3.75rem", +"MadeSpace16X": "4rem", +"MadeSpace17X": "4.25rem", +"MadeSpace18X": "4.5rem", +"MadeSpace19X": "4.75rem", +"MadeSpace20X": "5rem", +"MadeTimeModerate01": "150ms", +"MadeTimeModerate02": "240ms", +"MadeTimeModerateFast01": "70ms", +"MadeTimeModerateFast02": "110ms", +"MadeTimeSlow01": "400ms", +"MadeTimeSlow02": "700ms", +"MadeBackdropColorBackground": "rgba(20,20,19,0.7)", +"MadeButtonBorderRadius": "MadeBorderRadiusSmall", +"MadeConnectColorBackgroundApi": "MadeColorYellow04", +"MadeConnectColorBackgroundApplication": "MadeColorTeal04", +"MadeConnectColorBackgroundCollection": "MadeColorGray07", +"MadeConnectColorBackgroundDocument": "MadeColorGray03", +"MadeConnectColorBackgroundProduct": "#A82226", +"MadeConnectColorBackgroundReference": "MadeColorGreen04", +"MadeConnectColorBackgroundReport": "MadeColorGold04", +"MadeConnectColorBorderApi": "MadeColorYellow04", +"MadeConnectColorBorderApplication": "MadeColorTeal04", +"MadeConnectColorBorderCollection": "MadeColorGray07", +"MadeConnectColorBorderDocument": "MadeColorGray03", +"MadeConnectColorBorderProduct": "#A82226", +"MadeConnectColorBorderReference": "MadeColorGreen04", +"MadeConnectColorBorderReport": "MadeColorOrange05", +"MadeFormsColorBackgroundDefault": "MadeColorBackgroundDefault", +"MadeFormsColorBorderDefault": "MadeColorGray05", +"MadeGridGuttersLg": "MadeSpace4X", +"MadeGridGuttersMd": "MadeSpace4X", +"MadeGridGuttersSm": "MadeSpace2X", +"MadeGridMarginLg": "MadeSpace4X", +"MadeGridMarginMd": "MadeSpace4X", +"MadeGridMarginSm": "MadeSpace2X", +"MadeLinkColorDefault": "MadeColorActionPrimaryDefault", +"MadeLinkColorOnDark": "MadeColorActionOnDarkDefault", +"MadeScrollbarColorBackground": "MadeColorGray03"} \ No newline at end of file diff --git a/assets/partnerbank-test-theme/tokens.less b/assets/partnerbank-test-theme/tokens.less new file mode 100644 index 00000000..38b49d3b --- /dev/null +++ b/assets/partnerbank-test-theme/tokens.less @@ -0,0 +1,407 @@ + +// Do not edit directly +// Generated on Thu, 11 May 2023 09:28:11 GMT + +@made-connect-color-border-product: #A82226; // Border color for items in product category. +@made-connect-color-background-product: #A82226; // Background color for items in product category. +@made-backdrop-color-background: rgba(20,20,19,0.7); // Background on overlay used with modals +@made-time-slow-02: 700ms; // Background dimming. +@made-time-slow-01: 400ms; // Large expansion, important system notifications. +@made-time-moderate-fast-02: 110ms; // Micro-interactions such as fade. +@made-time-moderate-fast-01: 70ms; // Micro-interactions such as button and toggle. +@made-time-moderate-02: 240ms; // Expansion, system communication, toast. +@made-time-moderate-01: 150ms; // Micro-interactions, small expansion, short distance movements. +@made-space-20-x: 5rem; // Space: 80px +@made-space-19-x: 4.75rem; // Space: 76px +@made-space-18-x: 4.5rem; // Space: 72px +@made-space-17-x: 4.25rem; // Space: 68px +@made-space-16-x: 4rem; // Space: 64px +@made-space-15-x: 3.75rem; // Space: 60px +@made-space-14-x: 3.5rem; // Space: 56px +@made-space-13-x: 3.25rem; // Space: 52px +@made-space-12-x: 3rem; // Space: 48px +@made-space-11-x: 2.75rem; // Space: 44px +@made-space-10-x: 2.5rem; // Space: 40px +@made-space-9-x: 2.25rem; // Space: 36px +@made-space-8-x: 2rem; // Space: 32px +@made-space-7-x: 1.75rem; // Space: 28px +@made-space-6-x: 1.5rem; // Space: 24px +@made-space-5-x: 1.25rem; // Space: 20px +@made-space-4-x: 1rem; // Space: 16px +@made-space-3-x: 0.75rem; // Space: 12px +@made-space-2-x: 0.5rem; // Space: 8px +@made-space-1-x: 0.25rem; // Space: 4px +@made-size-20-x: 5rem; // Size: 80px +@made-size-19-x: 4.75rem; // Size: 76px +@made-size-18-x: 4.5rem; // Size: 72px +@made-size-17-x: 4.25rem; // Size: 68px +@made-size-16-x: 4rem; // Size: 64px +@made-size-15-x: 3.75rem; // Size: 60px +@made-size-14-x: 3.5rem; // Size: 56px +@made-size-13-x: 3.25rem; // Size: 52px +@made-size-12-x: 3rem; // Size: 48px +@made-size-11-x: 2.75rem; // Size: 44px +@made-size-10-x: 2.5rem; // Size: 40px +@made-size-9-x: 2.25rem; // Size: 36px +@made-size-8-x: 2rem; // Size: 32px +@made-size-7-x: 1.75rem; // Size: 28px +@made-size-6-x: 1.5rem; // Size: 24px +@made-size-5-x: 1.25rem; // Size: 20px +@made-size-4-x: 1rem; // Size: 16px +@made-size-3-x: 0.75rem; // Size: 12px +@made-size-2-x: 0.5rem; // Size: 8px +@made-size-1-x: 0.25rem; // Size: 4px +@made-opacity-100: 1; // Gives 100% opacity to an element. +@made-opacity-75: 0.75; // Gives 75% opacity to an element. +@made-opacity-50: 0.5; // Gives 50% opacity to an element. +@made-opacity-25: 0.25; // Gives 25% opacity to an element. +@made-opacity-15: 0.15; // Gives 15% opacity to an element. +@made-opacity-0: 0; // Gives 0% opacity to an element (Hides an element). +@made-line-height-single: 1; // Line height for single line text elements displayed in components +@made-line-height-heading: 1.25; // Headings line-height +@made-line-height-default: 1.5; // Default line height. +@made-line-height-1-x: 1; // Line height for single line text elements displayed in components +@made-line-height-1-5-x: 1.5; // To ensure readability, Body uses a 1.5× multiplier +@made-line-height-1-25-x: 1.25; // Headings use a 1.25× multiplier +@made-letter-spacing-eyebrow: 1.8px; // Default letter spacing for all text. +@made-letter-spacing-default: normal; // Default letter spacing for all text. +@made-font-weight-medium: 500; // Semi bold font weight is used for buttons. +@made-font-weight-light: 100; // Light font weight is used for headings. +@made-font-weight-default: 400; // Normal font weight is used for body text and form inputs. +@made-font-weight-bold: 700; // Use bold sparingly for subtitles, eyebrows, emphasis, and dates +@made-font-size-09: 1.5rem; // Font size: 24px +@made-font-size-08: 1.25rem; // Font size: 20px +@made-font-size-07: 1.125rem; // Font size: 18px +@made-font-size-06: 1rem; // Font size: 16px +@made-font-size-05: 0.9375rem; // Font size: 15px +@made-font-size-04: 0.875rem; // Font size: 14px +@made-font-size-03: 0.8125rem; // Font size: 13px +@made-font-size-02: 0.75rem; // Font size: 12px +@made-font-size-01: 0.5625rem; // Font size: 9px +@made-font-size-15: 5rem; // Font size: 80px +@made-font-size-14: 3.75rem; // Font size: 60px +@made-font-size-13: 3rem; // Font size: 48px +@made-font-size-12: 2.25rem; // Font size: 36px +@made-font-size-11: 2rem; // Font size: 32px +@made-font-size-10: 1.75rem; // Font size: 28px +@made-font-family-regular: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +@made-font-family-narrow-medium: serif, Arial; // Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. +@made-font-family-narrow-bold: serif, Arial; // Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. +@made-font-family-narrow: serif, Arial; // Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. +@made-font-family-medium: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +@made-font-family-light: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +@made-font-family-extra-light: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +@made-font-family-bold: serif, Arial; // Default bold weight font used across application +@made-color-visualization-03: #cf008a; // Data Visualization Color +@made-color-visualization-02: #ac00cf; // Data Visualization Color +@made-color-visualization-01: #0023cf; // Data Visualization Color +@made-color-text-default-on-dark: #ffffff; // Color of body text on dark background. +@made-color-feedback-success: #008a60; // Color for success or positive state +@made-color-feedback-information: #ffeb1f; // Color for neutral or optional state +@made-color-feedback-error: #ff33b4; // Color for error state +@made-color-brand-on-secondary: #ffffff; // The text color on your secondary brand color +@made-color-brand-on-primary: #ffffff; // The text color on your primary brand color +@made-color-action-disabled-text-input: #b1ada6; // Disabled state for text inputs. Opacity at 10% +@made-color-action-disabled-toggle: #b1ada6; // Disabled state for toggles. Opacity at 25% +@made-color-action-disabled-button: #b1ada6; // Disabled state for buttons. Opacity at 50% +@made-color-red-error-07: #330505; // Red error 7 +@made-color-red-error-06: #710808; // Red error 6 +@made-color-red-error-05: #b00596; // Red error 5 +@made-color-red-error-04: #ed009e; // Red error 4 +@made-color-red-error-03: #ff57ca; // Red error 3 +@made-color-red-error-02: #ff99f1; // Red error 2 +@made-color-red-error-01: #fadef4; // Error Red 1 +@made-color-green-success-07: #042604; // Success Green 7 +@made-color-green-success-06: #0b560a; // Success Green 6 +@made-color-green-success-05: #097007; // Success Green 5 +@made-color-green-success-04: #038a00; // Success Green 4 +@made-color-green-success-03: #35b132; // Success Green 3 +@made-color-green-success-02: #7cd87a; // Success Green 2 +@made-color-green-success-01: #dff7df; // Success Green 1 +@made-color-yellow-07: #332805; // Yellow color 7 +@made-color-yellow-06: #664f0c; // Yellow color 6 +@made-color-yellow-05: #b28c16; // Yellow color 5 +@made-color-yellow-04: #ffc61e; // Yellow color 4 +@made-color-yellow-03: #ffd863; // Yellow color 3 +@made-color-yellow-02: #ffe8a5; // Yellow color 2 +@made-color-yellow-01: #fff4d1; // Yellow color 1 +@made-color-white: #f8fffd; // White +@made-color-teal-07: #1d2d27; // Teal color 7 +@made-color-teal-06: #23473d; // Teal color 6 +@made-color-teal-05: #266555; // Teal color 5 +@made-color-teal-04: #25836d; // Teal color 4 +@made-color-teal-03: #4bab94; // Teal color 3 +@made-color-teal-02: #88d3bf; // Teal color 2 +@made-color-teal-01: #dcf5ef; // Teal color 1 +@made-color-red-07: #541113; // Red color 7 +@made-color-red-06: #7d1970; // Red color 6 +@made-color-red-05: #a82286; // Red color 5 +@made-color-red-04: #b538d6; // Red color 4 +@made-color-red-03: #dd65e6; // Red color 3 +@made-color-red-02: #f59fdf; // Red color 2 +@made-color-red-01: #f7dcf7; // Red color 1 +@made-color-orange-07: #331505; // Orange color 7 +@made-color-orange-06: #662808; // Orange color 6 +@made-color-orange-05: #9a3a0a; // Orange color 5 +@made-color-orange-04: #cf4500; // Orange color 4 +@made-color-orange-03: #f37338; // Orange color 3 +@made-color-orange-02: #ffab82; // Orange color 2 +@made-color-orange-01: #ffe1d1; // Orange color 1 +@made-color-green-07: #1c2509; // Green color 7 +@made-color-green-06: #324113; // Green color 6 +@made-color-green-05: #496019; // Green color 5 +@made-color-green-04: #628020; // Green color 4 +@made-color-green-03: #87a740; // Green color 3 +@made-color-green-02: #b6cd7e; // Green color 2 +@made-color-green-01: #e8f1d5; // Green color 1 +@made-color-gray-07: #4d6260; // Canvas color - Gray 7 +@made-color-gray-06-5: #617c79; // Gray tints and shades - Gray 6.5 +@made-color-gray-06: #779b96; // Canvas color - Gray 6 +@made-color-gray-05-5: #84b0ab; // Gray tints and shades - Gray 5.5 +@made-color-gray-05: #96c6c1; // Canvas color - Gray 5 +@made-color-gray-04-5: #a4dad5; // Gray tints and shades - Gray 4.5 +@made-color-gray-04: #afe5e0; // Gray tints and shades - Gray 4 +@made-color-gray-03-5: #d2f9f5; // Gray tints and shades - Gray 3.5 +@made-color-gray-03: #a5b0ae; // Gray tints and shades - Gray 3 +@made-color-gray-02-5: #c7d0d1; // Canvas color - Gray 2.5 +@made-color-gray-02: #e1e5e8; // Canvas color - Gray 2 +@made-color-gray-01-5: #edf1f2; // Canvas color - Gray 1.5 +@made-color-gray-01-25: #f5f8fa; // Canvas color - Gray 1.25 +@made-color-gray-01: #fafbfc; // Canvas color - Gray 1 +@made-color-gold-07: #301c00; // Gold color 7 +@made-color-gold-06: #583300; // Gold color 6 +@made-color-gold-05: #995600; // Gold color 5 +@made-color-gold-04: #f38b00; // Gold color 4 +@made-color-gold-03: #f7ad4c; // Gold color 3 +@made-color-gold-02: #f9d199; // Gold color 2 +@made-color-gold-01: #fce8cc; // Gold color 1 +@made-color-accent-07: #d7373c; // Accent color 7 +@made-color-accent-06: #25836d; // Accent color 6 +@made-color-accent-05: #628020; // Accent color 5 +@made-color-accent-04: #ffc61e; // Accent color 4 +@made-color-accent-03: #f38b00; // Accent color 3 +@made-color-accent-02: #f37338; // Accent color 2 +@made-color-accent-01-light: #d0805b; // Accent color 1- Light +@made-color-accent-01-default: #cf4500; // Accent color 1 +@made-color-accent-01-darker: #331505; // Accent color 1 - Darker +@made-color-accent-01-dark: #852d01; // Accent color 1 - Dark +@made-border-radius-circle: 50%; // Border Radius: 50% +@made-border-radius-09: 28px; // Border Radius: 28px +@made-border-radius-08: 24px; // Border Radius: 24px +@made-border-radius-07: 20px; // Border Radius: 20px +@made-border-radius-06: 16px; // Border Radius: 16px +@made-border-radius-05: 12px; // Border Radius: 12px +@made-border-radius-04: 8px; // Border Radius: 8px +@made-border-radius-03: 6px; // Border Radius: 6px +@made-border-radius-02: 4px; // Border Radius: 4px +@made-border-radius-01: 2px; // Border Radius: 2px +@made-z-index-toast: 50; // Used to set the z order layering of toast. +@made-z-index-modal: 50; // Used to set the z order layering of modal. +@made-z-index-dropdown: 30; // Used to set the z order layering of dropdown elements such as overflow menu, date picker... +@made-z-index-backdrop: 40; // Used to set the z order layering of backdrop. +@made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); // Shadow for all content cards, dropdowns, dialogs, datepicker etc. +@made-shadow-toggle: 0 5px 10px 0 rgba(20,20,19,0.15), 0 2px 2px 0 rgba(20,20,19,0.3);; // Shadow on slider on toggle component. +@made-scrollbar-color-background: @made-color-gray-03; // Background color for scrollbar component +@made-grid-margin-sm: @made-space-2-x; // Margin size on small breakpoint. +@made-grid-margin-md: @made-space-4-x; // Margin size on medium breakpoint. +@made-grid-margin-lg: @made-space-4-x; // Margin size on large breakpoint. +@made-grid-gutters-sm: @made-space-2-x; // Grid gutter size on small breakpoint. +@made-grid-gutters-md: @made-space-4-x; // Gutter size on medium breakpoint. +@made-grid-gutters-lg: @made-space-4-x; // Gutter size on large breakpoint. +@made-forms-color-border-default: @made-color-gray-05; // Default border color for forms. +@made-connect-color-border-report: @made-color-orange-05; // Border color for items in report category. +@made-connect-color-border-reference: @made-color-green-04; // Border color for items in reference category. +@made-connect-color-border-document: @made-color-gray-03; // Border color for items in document category. +@made-connect-color-border-collection: @made-color-gray-07; // Border color for items in collection category. +@made-connect-color-border-application: @made-color-teal-04; // Border color for items in application category. +@made-connect-color-border-api: @made-color-yellow-04; // Border color for items in API category. +@made-connect-color-background-report: @made-color-gold-04; // Border color for items in report category. +@made-connect-color-background-reference: @made-color-green-04; // Background color for items in reference category. +@made-connect-color-background-document: @made-color-gray-03; // Background color for items in document category. +@made-connect-color-background-collection: @made-color-gray-07; // Background color for items in collection category. +@made-connect-color-background-application: @made-color-teal-04; // Background color for items in application category. +@made-connect-color-background-api: @made-color-yellow-04; // Background color for items in API category. +@made-font-heading-weight-level-06: @made-font-weight-default; // Font Family for Heading 6 (H6). +@made-font-heading-weight-level-05: @made-font-weight-default; // Font Family for Heading 5 (H5). +@made-font-heading-weight-level-04: @made-font-weight-default; // Font Family for Heading 4 (H4). +@made-font-heading-weight-level-03: @made-font-weight-default; // Font Family for Heading 3 (H3). +@made-font-heading-weight-level-02: @made-font-weight-default; // Font Family for Heading 2 (H2). +@made-font-heading-weight-level-01: @made-font-weight-default; // Font Family for Heading 1 (H1). +@made-font-heading-weight-eyebrow-02: @made-font-weight-bold; // Font family for large eyebrow text. +@made-font-heading-weight-eyebrow-01: @made-font-weight-bold; // Font family for small eyebrow text. +@made-font-heading-weight-display-03: @made-font-weight-default; // Font family for Display 03. +@made-font-heading-weight-display-02: @made-font-weight-default; // Font family for Display 02. +@made-font-heading-weight-display-01: @made-font-weight-default; // Font family for Display 01. +@made-font-heading-size-level-06: @made-font-size-06; // Font Size for Heading 6 (H6) +@made-font-heading-size-level-05: @made-font-size-07; // Font Size for Heading 5 (H5) +@made-font-heading-size-level-04: @made-font-size-08; // Font Size for Heading 4 (H4) +@made-font-heading-size-level-03: @made-font-size-09; // Font Size for Heading 3 (H3) +@made-font-heading-size-level-02: @made-font-size-10; // Font Size for Heading 2 (H2) +@made-font-heading-size-level-01: @made-font-size-11; // Font Size for Heading 1 (H1) +@made-font-heading-size-display-03: @made-font-size-11; // Font Size for Display 03. +@made-font-heading-size-display-02: @made-font-size-13; // Font Size for Display 02. +@made-font-heading-size-display-01: @made-font-size-15; // Font Size for Display 01. +@made-font-heading-line-height-level-06: @made-line-height-heading; // Line Height of Heading 6 (H6). +@made-font-heading-line-height-level-05: @made-line-height-heading; // Line Height of Heading 5 (H5). +@made-font-heading-line-height-level-04: @made-line-height-heading; // Line Height of Heading 4 (H4). +@made-font-heading-line-height-level-03: @made-line-height-heading; // Line Height of Heading 3 (H3). +@made-font-heading-line-height-level-02: @made-line-height-heading; // Line Height of Heading 2 (H2). +@made-font-heading-line-height-level-01: @made-line-height-heading; // Line Height of Heading 1 (H1). +@made-font-heading-line-height-eyebrow-02: @made-line-height-heading; // Line Height for large eyebrow text. +@made-font-heading-line-height-eyebrow-01: @made-line-height-heading; // Line Height for small eyebrow text. +@made-font-heading-line-height-display-03: @made-line-height-heading; // Line height of Display 03. +@made-font-heading-line-height-display-02: @made-line-height-heading; // Line height of Display 02. +@made-font-heading-line-height-display-01: @made-line-height-heading; // Line height of Display 01. +@made-font-heading-letter-spacing-level-06: @made-letter-spacing-default; // Letter spacing of Heading 6 (H6). +@made-font-heading-letter-spacing-level-05: @made-letter-spacing-default; // Letter spacing of Heading 5 (H5). +@made-font-heading-letter-spacing-level-04: @made-letter-spacing-default; // Letter spacing of Heading 4 (H4). +@made-font-heading-letter-spacing-level-03: @made-letter-spacing-default; // Letter spacing of Heading 3 (H3). +@made-font-heading-letter-spacing-level-02: @made-letter-spacing-default; // Letter spacing of Heading 2 (H2). +@made-font-heading-letter-spacing-level-01: @made-letter-spacing-default; // Letter spacing of Heading 1 (H1). +@made-font-heading-letter-spacing-eyebrow-02: @made-letter-spacing-eyebrow; // Letter spacing for small eyebrow text. +@made-font-heading-letter-spacing-eyebrow-01: @made-letter-spacing-eyebrow; // Letter spacing for small eyebrow text. +@made-font-heading-letter-spacing-display-03: @made-letter-spacing-default; // Letter spacing of Display 03. +@made-font-heading-letter-spacing-display-02: @made-letter-spacing-default; // Letter spacing of Display 02. +@made-font-heading-letter-spacing-display-01: @made-letter-spacing-default; // Letter spacing of Display 02. +@made-font-family-heading: @made-font-family-light; // Font family for headings (H1,H2 and display text) +@made-font-family-eyebrow: @made-font-family-bold; // Font family for headings (H1,H2 and display text) +@made-font-body-weight-default: @made-font-weight-default; // Default font weight for body text. +@made-font-body-weight-bold: @made-font-weight-bold; // Bold font weight for body text. +@made-font-body-size-small: @made-font-size-02; // Small font size for body text. +@made-font-body-size-large: @made-font-size-06; // Large font size for body text. +@made-font-body-size-default: @made-font-size-04; // Default font size for body text. +@made-font-body-line-height: @made-line-height-default; // Default line height for body text. +@made-font-body-letter-spacing: @made-letter-spacing-default; // Default letter spacing for body text. +@made-font-body-family-narrow: @made-font-family-narrow; // Default font family for narrow/small text. Used on tooltip and notification +@made-font-body-family-default: @made-font-family-regular; // Default font family for body text. +@made-font-body-family-bold: @made-font-family-medium; // Font family for bold body text. +@made-color-text-inverse: @made-color-white; // Inverse text/icon color +@made-color-text-helper: @made-color-gray-05; // Text color of helper text on forms, cards etc. +@made-color-text-default-on-light: @made-color-gray-07; // Color of body text on light background. +@made-color-feedback-text-success: @made-color-feedback-success; // Text color for success or positive state +@made-color-feedback-text-on-warning: @made-color-text-default-on-dark; // Text color displayed on top of the warning color +@made-color-feedback-text-on-success-light: @made-color-green-success-05; // Text color displayed on top of the success color of Light variation of notifications and toasts +@made-color-feedback-text-on-success: @made-color-text-default-on-dark; // Text color displayed on top of the error color +@made-color-feedback-text-on-information-light: @made-color-yellow-07; // Text color displayed on top of the information color of Light variation of notifications and toasts +@made-color-feedback-text-on-information: @made-color-yellow-07; // Text color displayed on top of the error color +@made-color-feedback-text-on-error-light: @made-color-red-error-05; // Text color displayed on top of the error color of Light variation of notifications and toasts +@made-color-feedback-text-on-error: @made-color-text-default-on-dark; // Text color displayed on top of the error color +@made-color-feedback-text-information: @made-color-feedback-information; // Text color for neutral or optional state +@made-color-feedback-text-error: @made-color-feedback-error; // Text color for error state +@made-color-feedback-warning: @made-color-gold-04; // Color for warning state +@made-color-feedback-success-light: @made-color-green-success-01; // Color for light variant of success or positive state +@made-color-feedback-information-light: @made-color-yellow-01; // Color for light variant of neutral or optional state +@made-color-feedback-error-light: @made-color-red-error-01; // Color for light variant of error state +@made-color-feedback-border-success: @made-color-feedback-success; // Border color for success or positive state +@made-color-feedback-border-information: @made-color-feedback-information; // Border color for neutral or optional state +@made-color-feedback-border-error: @made-color-feedback-error; // Border color for error state +@made-color-feedback-background-success: @made-color-feedback-success; // Background color for success or positive state +@made-color-feedback-background-information: @made-color-feedback-information; // Background color for neutral or optional state +@made-color-feedback-background-error: @made-color-feedback-error; // Background color for error state +@made-color-brand-secondary: @made-color-teal-03; // The secondary color of your brand +@made-color-brand-primary: @made-color-teal-03; // The primary color of your brand +@made-color-border-default-on-light: @made-color-gray-02; // Default Border color used for layout elements e.g. accordion, table. +@made-color-border-default-on-dark: @made-color-gray-05; // Default Border color used for layout elements on a dark background. +@made-color-background-inverse: @made-color-gray-07; // High contrast backgrounds/elements +@made-color-background-02: @made-color-gray-02; // Tertiary background color of the application. +@made-color-background-01: @made-color-gray-01-25; // Secondary background color of the application. +@made-color-background-gray-lightest: @made-color-gray-01-5; // Used on background of breadcrumb and pill components. +@made-color-background-default: @made-color-white; // Main background color of the application. +@made-color-action-text-on-secondary: @made-color-brand-on-secondary; // Text color on top of secondary interactive color +@made-color-action-text-on-primary: @made-color-brand-on-primary; // Text color on top of primary interactive color +@made-color-action-text-on-disabled: @made-color-text-default-on-dark; // Text color on top of disabled state color +@made-color-action-text-on-dark: @made-color-gray-07; // Text color on top of interactive color on a dark background +@made-color-action-primary-hover: @made-color-teal-05; // Color of primary interactive color on hover e.g. buttons +@made-color-action-primary-active: @made-color-teal-06; // Color of primary interactive color on active e.g. buttons +@made-color-action-on-dark-hover: @made-color-gray-02; // Text color of secondary interactive color on dark background e.g. buttons. +@made-color-action-on-dark-default: @made-color-teal-01; // Color of interactive color on dark background e.g. buttons +@made-color-action-on-dark-active: @made-color-gray-03; // Text color of secondary interactive color on dark background e.g. buttons. +@made-color-action-disabled: @made-color-gray-03; // Global color for disabled state. +@made-color-action-border-focus-on-dark: @made-color-white; // Outline color for focus state on dark backgrounds. +@made-color-action-background-selected-hover: @made-color-gray-02; // Background color for hover state of on selected UI Elements +@made-color-action-background-selected: @made-color-gray-01-5; // Background color for selected state of UI Elements such as tables, dropdowns... +@made-color-action-background-primary-hover: @made-color-teal-05; // Background color of primary interactive color e.g primary buttons. +@made-color-action-background-on: @made-color-feedback-success; // Background color for on state of UI Elements such as toggle +@made-color-action-background-hover: @made-color-gray-01-25; // Background color for hover state of UI Elements such as tables, dropdowns... +@made-color-action-background-highlight: @made-color-teal-01; // Background color of highlight interactive color. Used on date range in Calendar +@made-border-radius-small: @made-border-radius-01; // Small border radius for UI components +@made-border-radius-large: @made-border-radius-04; // Large border radius for UI components +@made-border-radius-default: @made-border-radius-02; // Default border radius for UI components +@made-search-action-color-background-hover: @made-color-gray-01-5; // Background color for the hover state of action within the search component +@made-pill-border-radius: @made-border-radius-05; // Pill Border Radius +@made-pill-color-background-hover: @made-color-gray-02-5; // Background color for pill components hover state for the close icon element. +@made-header-color-background: @made-color-gray-07; // Background color for header component +@made-header-color-text: @made-color-white; // Text color on header component +@made-footer-color-background: @made-color-gray-07; // Background color for footer component +@made-footer-color-text: @made-color-white; // Text color on footer component +@made-link-color-on-dark: @made-color-action-on-dark-default; // Text color for links on dark backgrounds +@made-forms-color-background-default: @made-color-background-default; // Default background color for forms. +@made-button-border-radius: @made-border-radius-small; // Button Border Radius +@made-font-heading-size-eyebrow-02: @made-font-body-size-large; // Font size for default eyebrow text +@made-font-heading-size-eyebrow-01: @made-font-body-size-small; // Font size for small eyebrow text +@made-font-heading-family-level-06: @made-font-body-family-bold; // Font Family for Heading 6 (H6). +@made-font-heading-family-level-05: @made-font-body-family-default; // Font Family for Heading 5 (H5). +@made-font-heading-family-level-04: @made-font-body-family-default; // Font Family for Heading 4 (H4). +@made-font-heading-family-level-03: @made-font-body-family-default; // Font Family for Heading 3 (H3). +@made-font-heading-family-level-02: @made-font-family-heading; // Font Family for Heading 2 (H2). +@made-font-heading-family-level-01: @made-font-family-heading; // Font Family for Heading 1 (H1). +@made-font-heading-family-eyebrow-02: @made-font-family-eyebrow; // Font family for large eyebrow text. +@made-font-heading-family-eyebrow-01: @made-font-family-eyebrow; // Font family for small eyebrow text. +@made-font-heading-family-display-03: @made-font-family-heading; // Font family for Display 03. +@made-font-heading-family-display-02: @made-font-family-heading; // Font family for Display 02. +@made-font-heading-family-display-01: @made-font-family-heading; // Font family for Display 01. +@made-color-text-primary: @made-color-brand-primary; // Text color of primary brand color. +@made-color-feedback-text-warning: @made-color-feedback-warning; // Text color for warning state +@made-color-feedback-border-warning: @made-color-feedback-warning; // Border color or for warning state +@made-color-feedback-border-success-light: @made-color-feedback-success-light; // Border color for success or positive state for Light variation of notifications and toasts +@made-color-feedback-border-information-light: @made-color-feedback-information-light; // Border color for neutral or optional state of Light variation of notifications and toasts +@made-color-feedback-border-error-light: @made-color-feedback-error-light; // Border color for error state of Light variation of notifications and toasts +@made-color-feedback-background-warning: @made-color-feedback-warning; // Background color for warning state +@made-color-feedback-background-success-light: @made-color-feedback-success-light; // Background color for success or positive state for Light variation of notifications and toasts +@made-color-feedback-background-information-light: @made-color-feedback-information-light; // Background color for neutral or optional state of Light variation of notifications and toasts +@made-color-feedback-background-error-light: @made-color-feedback-error-light; // Background color for error state of Light variation of notifications and toasts +@made-color-background-primary: @made-color-brand-primary; // Background of primary brand color. +@made-color-action-text-primary-hover: @made-color-action-primary-hover; // Text color of primary color hover interactive state e.g. secondary buttons +@made-color-action-text-primary-active: @made-color-action-primary-active; // Text color of primary color pressed interactive state e.g. ghost button +@made-color-action-text-on-selected-hover: @made-color-text-default-on-light; // Text color on top of hover and selected state of UI Elements +@made-color-action-text-on-selected: @made-color-text-default-on-light; // Text color on top of selected state of UI Elements +@made-color-action-text-on-hover: @made-color-text-default-on-light; // Text color on top of hover state of UI Elements +@made-color-action-text-on-dark-hover: @made-color-action-on-dark-hover; // Text color of secondary interactive color e.g. secondary button on a dark background +@made-color-action-text-on-dark-default: @made-color-action-on-dark-default; // Text color of secondary interactive color e.g. secondary button on a dark background +@made-color-action-text-on-dark-active: @made-color-action-on-dark-active; // Text color of secondary interactive color e.g. secondary button on a dark background +@made-color-action-text-disabled: @made-color-action-disabled; // Text color for disabled state of UI Elements +@made-color-action-secondary-hover: @made-color-action-primary-hover; // Color of secondary interactive color e.g. secondary buttons +@made-color-action-secondary-default: @made-color-brand-secondary; // Color of secondary interactive color e.g. secondary buttons +@made-color-action-secondary-active: @made-color-action-primary-active; // Color of secondary interactive color e.g. secondary button +@made-color-action-primary-default: @made-color-brand-primary; // Color of primary interactive color e.g. buttons +@made-color-action-border-selected-on-dark: @made-color-action-on-dark-default; // Border color for selected items on dark background. +@made-color-action-border-primary-hover: @made-color-action-primary-hover; // Border color of primary interactive color e.g primary buttons. +@made-color-action-border-primary-active: @made-color-action-primary-active; // Border color of primary interactive color e.g primary buttons. +@made-color-action-border-on-dark-hover: @made-color-action-on-dark-hover; // Border color of secondary interactive color. +@made-color-action-border-on-dark-default: @made-color-action-on-dark-default; // Border color of secondary interactive color +@made-color-action-border-on-dark-active: @made-color-action-on-dark-active; // Border color of secondary interactive color. +@made-color-action-border-disabled: @made-color-action-disabled; // Border color for disabled state of UI Elements such as tables, dropdowns... +@made-color-action-background-secondary-hover: @made-color-background-default; // Background color of secondary interactive color e.g. secondary buttons +@made-color-action-background-secondary-default: @made-color-background-default; // Background color of secondary interactive color e.g. secondary buttons +@made-color-action-background-secondary-active: @made-color-background-default; // Background color of secondary interactive color e.g. secondary button +@made-color-action-background-primary-active: @made-color-action-primary-active; // Background color of primary interactive color e.g primary buttons. +@made-color-action-background-on-dark-hover: @made-color-action-on-dark-hover; // Background color of secondary interactive color. +@made-color-action-background-on-dark-default: @made-color-action-on-dark-default; // Background color of secondary interactive color +@made-color-action-background-on-dark-active: @made-color-action-on-dark-active; // Background color of secondary interactive color. +@made-color-action-background-off: @made-color-action-disabled; // Background color for off state of UI Elements such as toggle +@made-color-action-background-disabled: @made-color-action-disabled; // Background color for disabled state of UI Elements such as tables, dropdowns... +@made-search-color-background: @made-color-background-01; // Background color for search input component +@made-pill-color-background-default: @made-color-background-02; // Background color for pill component. +@made-link-color-default: @made-color-action-primary-default; // Text color for link +@made-color-action-text-secondary-hover: @made-color-action-secondary-hover; // Text color of secondary interactive color e.g. secondary buttons +@made-color-action-text-secondary-default: @made-color-action-secondary-default; // Text color of secondary interactive color e.g. secondary buttons +@made-color-action-text-secondary-active: @made-color-action-secondary-active; // Text color of secondary interactive color e.g. secondary button +@made-color-action-text-primary-default: @made-color-action-primary-default; // Text color of primary interactive color e.g. links +@made-color-action-border-selected-on-light: @made-color-action-primary-default; // Border color for selected items. +@made-color-action-border-secondary-hover: @made-color-action-secondary-hover; // Border color of secondary interactive color e.g. secondary buttons +@made-color-action-border-secondary-default: @made-color-action-secondary-default; // Border color of secondary interactive color e.g. secondary buttons +@made-color-action-border-secondary-active: @made-color-action-secondary-active; // Border color of secondary interactive color e.g. secondary button +@made-color-action-border-primary-default: @made-color-action-primary-default; // Border color of primary interactive color e.g primary buttons. +@made-color-action-border-focus: @made-color-action-primary-default; // Outline color for focus state. +@made-color-action-background-primary-default: @made-color-action-primary-default; // Background color of primary interactive color e.g primary buttons. +@made-search-action-color-background-default: @made-search-color-background; // Background color for action within the search component \ No newline at end of file diff --git a/assets/partnerbank-test-theme/tokens.scss b/assets/partnerbank-test-theme/tokens.scss new file mode 100644 index 00000000..d4baa369 --- /dev/null +++ b/assets/partnerbank-test-theme/tokens.scss @@ -0,0 +1,407 @@ + +// Do not edit directly +// Generated on Thu, 11 May 2023 09:28:11 GMT + +$made-connect-color-border-product: #A82226; // Border color for items in product category. +$made-connect-color-background-product: #A82226; // Background color for items in product category. +$made-backdrop-color-background: rgba(20,20,19,0.7); // Background on overlay used with modals +$made-time-slow-02: 700ms; // Background dimming. +$made-time-slow-01: 400ms; // Large expansion, important system notifications. +$made-time-moderate-fast-02: 110ms; // Micro-interactions such as fade. +$made-time-moderate-fast-01: 70ms; // Micro-interactions such as button and toggle. +$made-time-moderate-02: 240ms; // Expansion, system communication, toast. +$made-time-moderate-01: 150ms; // Micro-interactions, small expansion, short distance movements. +$made-space-20-x: 5rem; // Space: 80px +$made-space-19-x: 4.75rem; // Space: 76px +$made-space-18-x: 4.5rem; // Space: 72px +$made-space-17-x: 4.25rem; // Space: 68px +$made-space-16-x: 4rem; // Space: 64px +$made-space-15-x: 3.75rem; // Space: 60px +$made-space-14-x: 3.5rem; // Space: 56px +$made-space-13-x: 3.25rem; // Space: 52px +$made-space-12-x: 3rem; // Space: 48px +$made-space-11-x: 2.75rem; // Space: 44px +$made-space-10-x: 2.5rem; // Space: 40px +$made-space-9-x: 2.25rem; // Space: 36px +$made-space-8-x: 2rem; // Space: 32px +$made-space-7-x: 1.75rem; // Space: 28px +$made-space-6-x: 1.5rem; // Space: 24px +$made-space-5-x: 1.25rem; // Space: 20px +$made-space-4-x: 1rem; // Space: 16px +$made-space-3-x: 0.75rem; // Space: 12px +$made-space-2-x: 0.5rem; // Space: 8px +$made-space-1-x: 0.25rem; // Space: 4px +$made-size-20-x: 5rem; // Size: 80px +$made-size-19-x: 4.75rem; // Size: 76px +$made-size-18-x: 4.5rem; // Size: 72px +$made-size-17-x: 4.25rem; // Size: 68px +$made-size-16-x: 4rem; // Size: 64px +$made-size-15-x: 3.75rem; // Size: 60px +$made-size-14-x: 3.5rem; // Size: 56px +$made-size-13-x: 3.25rem; // Size: 52px +$made-size-12-x: 3rem; // Size: 48px +$made-size-11-x: 2.75rem; // Size: 44px +$made-size-10-x: 2.5rem; // Size: 40px +$made-size-9-x: 2.25rem; // Size: 36px +$made-size-8-x: 2rem; // Size: 32px +$made-size-7-x: 1.75rem; // Size: 28px +$made-size-6-x: 1.5rem; // Size: 24px +$made-size-5-x: 1.25rem; // Size: 20px +$made-size-4-x: 1rem; // Size: 16px +$made-size-3-x: 0.75rem; // Size: 12px +$made-size-2-x: 0.5rem; // Size: 8px +$made-size-1-x: 0.25rem; // Size: 4px +$made-opacity-100: 1; // Gives 100% opacity to an element. +$made-opacity-75: 0.75; // Gives 75% opacity to an element. +$made-opacity-50: 0.5; // Gives 50% opacity to an element. +$made-opacity-25: 0.25; // Gives 25% opacity to an element. +$made-opacity-15: 0.15; // Gives 15% opacity to an element. +$made-opacity-0: 0; // Gives 0% opacity to an element (Hides an element). +$made-line-height-single: 1; // Line height for single line text elements displayed in components +$made-line-height-heading: 1.25; // Headings line-height +$made-line-height-default: 1.5; // Default line height. +$made-line-height-1-x: 1; // Line height for single line text elements displayed in components +$made-line-height-1-5-x: 1.5; // To ensure readability, Body uses a 1.5× multiplier +$made-line-height-1-25-x: 1.25; // Headings use a 1.25× multiplier +$made-letter-spacing-eyebrow: 1.8px; // Default letter spacing for all text. +$made-letter-spacing-default: normal; // Default letter spacing for all text. +$made-font-weight-medium: 500; // Semi bold font weight is used for buttons. +$made-font-weight-light: 100; // Light font weight is used for headings. +$made-font-weight-default: 400; // Normal font weight is used for body text and form inputs. +$made-font-weight-bold: 700; // Use bold sparingly for subtitles, eyebrows, emphasis, and dates +$made-font-size-09: 1.5rem; // Font size: 24px +$made-font-size-08: 1.25rem; // Font size: 20px +$made-font-size-07: 1.125rem; // Font size: 18px +$made-font-size-06: 1rem; // Font size: 16px +$made-font-size-05: 0.9375rem; // Font size: 15px +$made-font-size-04: 0.875rem; // Font size: 14px +$made-font-size-03: 0.8125rem; // Font size: 13px +$made-font-size-02: 0.75rem; // Font size: 12px +$made-font-size-01: 0.5625rem; // Font size: 9px +$made-font-size-15: 5rem; // Font size: 80px +$made-font-size-14: 3.75rem; // Font size: 60px +$made-font-size-13: 3rem; // Font size: 48px +$made-font-size-12: 2.25rem; // Font size: 36px +$made-font-size-11: 2rem; // Font size: 32px +$made-font-size-10: 1.75rem; // Font size: 28px +$made-font-family-regular: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +$made-font-family-narrow-medium: serif, Arial; // Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. +$made-font-family-narrow-bold: serif, Arial; // Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. +$made-font-family-narrow: serif, Arial; // Use Mark for MC Narrow for text smaller or equal to 14-pixels in all digital applications. It provides greater legibility for body copy, tight columns, or charts. 12-pixels is the minimum size for Narrow. +$made-font-family-medium: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +$made-font-family-light: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +$made-font-family-extra-light: serif, Arial; // Use Mark for MC for text slightly larger than 14-pixels in all digital applications. +$made-font-family-bold: serif, Arial; // Default bold weight font used across application +$made-color-visualization-03: #cf008a; // Data Visualization Color +$made-color-visualization-02: #ac00cf; // Data Visualization Color +$made-color-visualization-01: #0023cf; // Data Visualization Color +$made-color-text-default-on-dark: #ffffff; // Color of body text on dark background. +$made-color-feedback-success: #008a60; // Color for success or positive state +$made-color-feedback-information: #ffeb1f; // Color for neutral or optional state +$made-color-feedback-error: #ff33b4; // Color for error state +$made-color-brand-on-secondary: #ffffff; // The text color on your secondary brand color +$made-color-brand-on-primary: #ffffff; // The text color on your primary brand color +$made-color-action-disabled-text-input: #b1ada6; // Disabled state for text inputs. Opacity at 10% +$made-color-action-disabled-toggle: #b1ada6; // Disabled state for toggles. Opacity at 25% +$made-color-action-disabled-button: #b1ada6; // Disabled state for buttons. Opacity at 50% +$made-color-red-error-07: #330505; // Red error 7 +$made-color-red-error-06: #710808; // Red error 6 +$made-color-red-error-05: #b00596; // Red error 5 +$made-color-red-error-04: #ed009e; // Red error 4 +$made-color-red-error-03: #ff57ca; // Red error 3 +$made-color-red-error-02: #ff99f1; // Red error 2 +$made-color-red-error-01: #fadef4; // Error Red 1 +$made-color-green-success-07: #042604; // Success Green 7 +$made-color-green-success-06: #0b560a; // Success Green 6 +$made-color-green-success-05: #097007; // Success Green 5 +$made-color-green-success-04: #038a00; // Success Green 4 +$made-color-green-success-03: #35b132; // Success Green 3 +$made-color-green-success-02: #7cd87a; // Success Green 2 +$made-color-green-success-01: #dff7df; // Success Green 1 +$made-color-yellow-07: #332805; // Yellow color 7 +$made-color-yellow-06: #664f0c; // Yellow color 6 +$made-color-yellow-05: #b28c16; // Yellow color 5 +$made-color-yellow-04: #ffc61e; // Yellow color 4 +$made-color-yellow-03: #ffd863; // Yellow color 3 +$made-color-yellow-02: #ffe8a5; // Yellow color 2 +$made-color-yellow-01: #fff4d1; // Yellow color 1 +$made-color-white: #f8fffd; // White +$made-color-teal-07: #1d2d27; // Teal color 7 +$made-color-teal-06: #23473d; // Teal color 6 +$made-color-teal-05: #266555; // Teal color 5 +$made-color-teal-04: #25836d; // Teal color 4 +$made-color-teal-03: #4bab94; // Teal color 3 +$made-color-teal-02: #88d3bf; // Teal color 2 +$made-color-teal-01: #dcf5ef; // Teal color 1 +$made-color-red-07: #541113; // Red color 7 +$made-color-red-06: #7d1970; // Red color 6 +$made-color-red-05: #a82286; // Red color 5 +$made-color-red-04: #b538d6; // Red color 4 +$made-color-red-03: #dd65e6; // Red color 3 +$made-color-red-02: #f59fdf; // Red color 2 +$made-color-red-01: #f7dcf7; // Red color 1 +$made-color-orange-07: #331505; // Orange color 7 +$made-color-orange-06: #662808; // Orange color 6 +$made-color-orange-05: #9a3a0a; // Orange color 5 +$made-color-orange-04: #cf4500; // Orange color 4 +$made-color-orange-03: #f37338; // Orange color 3 +$made-color-orange-02: #ffab82; // Orange color 2 +$made-color-orange-01: #ffe1d1; // Orange color 1 +$made-color-green-07: #1c2509; // Green color 7 +$made-color-green-06: #324113; // Green color 6 +$made-color-green-05: #496019; // Green color 5 +$made-color-green-04: #628020; // Green color 4 +$made-color-green-03: #87a740; // Green color 3 +$made-color-green-02: #b6cd7e; // Green color 2 +$made-color-green-01: #e8f1d5; // Green color 1 +$made-color-gray-07: #4d6260; // Canvas color - Gray 7 +$made-color-gray-06-5: #617c79; // Gray tints and shades - Gray 6.5 +$made-color-gray-06: #779b96; // Canvas color - Gray 6 +$made-color-gray-05-5: #84b0ab; // Gray tints and shades - Gray 5.5 +$made-color-gray-05: #96c6c1; // Canvas color - Gray 5 +$made-color-gray-04-5: #a4dad5; // Gray tints and shades - Gray 4.5 +$made-color-gray-04: #afe5e0; // Gray tints and shades - Gray 4 +$made-color-gray-03-5: #d2f9f5; // Gray tints and shades - Gray 3.5 +$made-color-gray-03: #a5b0ae; // Gray tints and shades - Gray 3 +$made-color-gray-02-5: #c7d0d1; // Canvas color - Gray 2.5 +$made-color-gray-02: #e1e5e8; // Canvas color - Gray 2 +$made-color-gray-01-5: #edf1f2; // Canvas color - Gray 1.5 +$made-color-gray-01-25: #f5f8fa; // Canvas color - Gray 1.25 +$made-color-gray-01: #fafbfc; // Canvas color - Gray 1 +$made-color-gold-07: #301c00; // Gold color 7 +$made-color-gold-06: #583300; // Gold color 6 +$made-color-gold-05: #995600; // Gold color 5 +$made-color-gold-04: #f38b00; // Gold color 4 +$made-color-gold-03: #f7ad4c; // Gold color 3 +$made-color-gold-02: #f9d199; // Gold color 2 +$made-color-gold-01: #fce8cc; // Gold color 1 +$made-color-accent-07: #d7373c; // Accent color 7 +$made-color-accent-06: #25836d; // Accent color 6 +$made-color-accent-05: #628020; // Accent color 5 +$made-color-accent-04: #ffc61e; // Accent color 4 +$made-color-accent-03: #f38b00; // Accent color 3 +$made-color-accent-02: #f37338; // Accent color 2 +$made-color-accent-01-light: #d0805b; // Accent color 1- Light +$made-color-accent-01-default: #cf4500; // Accent color 1 +$made-color-accent-01-darker: #331505; // Accent color 1 - Darker +$made-color-accent-01-dark: #852d01; // Accent color 1 - Dark +$made-border-radius-circle: 50%; // Border Radius: 50% +$made-border-radius-09: 28px; // Border Radius: 28px +$made-border-radius-08: 24px; // Border Radius: 24px +$made-border-radius-07: 20px; // Border Radius: 20px +$made-border-radius-06: 16px; // Border Radius: 16px +$made-border-radius-05: 12px; // Border Radius: 12px +$made-border-radius-04: 8px; // Border Radius: 8px +$made-border-radius-03: 6px; // Border Radius: 6px +$made-border-radius-02: 4px; // Border Radius: 4px +$made-border-radius-01: 2px; // Border Radius: 2px +$made-z-index-toast: 50; // Used to set the z order layering of toast. +$made-z-index-modal: 50; // Used to set the z order layering of modal. +$made-z-index-dropdown: 30; // Used to set the z order layering of dropdown elements such as overflow menu, date picker... +$made-z-index-backdrop: 40; // Used to set the z order layering of backdrop. +$made-shadow-default: 0 2px 10px 0 rgba(20,20,19,0.20); // Shadow for all content cards, dropdowns, dialogs, datepicker etc. +$made-shadow-toggle: 0 5px 10px 0 rgba(20,20,19,0.15), 0 2px 2px 0 rgba(20,20,19,0.3);; // Shadow on slider on toggle component. +$made-scrollbar-color-background: $made-color-gray-03; // Background color for scrollbar component +$made-grid-margin-sm: $made-space-2-x; // Margin size on small breakpoint. +$made-grid-margin-md: $made-space-4-x; // Margin size on medium breakpoint. +$made-grid-margin-lg: $made-space-4-x; // Margin size on large breakpoint. +$made-grid-gutters-sm: $made-space-2-x; // Grid gutter size on small breakpoint. +$made-grid-gutters-md: $made-space-4-x; // Gutter size on medium breakpoint. +$made-grid-gutters-lg: $made-space-4-x; // Gutter size on large breakpoint. +$made-forms-color-border-default: $made-color-gray-05; // Default border color for forms. +$made-connect-color-border-report: $made-color-orange-05; // Border color for items in report category. +$made-connect-color-border-reference: $made-color-green-04; // Border color for items in reference category. +$made-connect-color-border-document: $made-color-gray-03; // Border color for items in document category. +$made-connect-color-border-collection: $made-color-gray-07; // Border color for items in collection category. +$made-connect-color-border-application: $made-color-teal-04; // Border color for items in application category. +$made-connect-color-border-api: $made-color-yellow-04; // Border color for items in API category. +$made-connect-color-background-report: $made-color-gold-04; // Border color for items in report category. +$made-connect-color-background-reference: $made-color-green-04; // Background color for items in reference category. +$made-connect-color-background-document: $made-color-gray-03; // Background color for items in document category. +$made-connect-color-background-collection: $made-color-gray-07; // Background color for items in collection category. +$made-connect-color-background-application: $made-color-teal-04; // Background color for items in application category. +$made-connect-color-background-api: $made-color-yellow-04; // Background color for items in API category. +$made-font-heading-weight-level-06: $made-font-weight-default; // Font Family for Heading 6 (H6). +$made-font-heading-weight-level-05: $made-font-weight-default; // Font Family for Heading 5 (H5). +$made-font-heading-weight-level-04: $made-font-weight-default; // Font Family for Heading 4 (H4). +$made-font-heading-weight-level-03: $made-font-weight-default; // Font Family for Heading 3 (H3). +$made-font-heading-weight-level-02: $made-font-weight-default; // Font Family for Heading 2 (H2). +$made-font-heading-weight-level-01: $made-font-weight-default; // Font Family for Heading 1 (H1). +$made-font-heading-weight-eyebrow-02: $made-font-weight-bold; // Font family for large eyebrow text. +$made-font-heading-weight-eyebrow-01: $made-font-weight-bold; // Font family for small eyebrow text. +$made-font-heading-weight-display-03: $made-font-weight-default; // Font family for Display 03. +$made-font-heading-weight-display-02: $made-font-weight-default; // Font family for Display 02. +$made-font-heading-weight-display-01: $made-font-weight-default; // Font family for Display 01. +$made-font-heading-size-level-06: $made-font-size-06; // Font Size for Heading 6 (H6) +$made-font-heading-size-level-05: $made-font-size-07; // Font Size for Heading 5 (H5) +$made-font-heading-size-level-04: $made-font-size-08; // Font Size for Heading 4 (H4) +$made-font-heading-size-level-03: $made-font-size-09; // Font Size for Heading 3 (H3) +$made-font-heading-size-level-02: $made-font-size-10; // Font Size for Heading 2 (H2) +$made-font-heading-size-level-01: $made-font-size-11; // Font Size for Heading 1 (H1) +$made-font-heading-size-display-03: $made-font-size-11; // Font Size for Display 03. +$made-font-heading-size-display-02: $made-font-size-13; // Font Size for Display 02. +$made-font-heading-size-display-01: $made-font-size-15; // Font Size for Display 01. +$made-font-heading-line-height-level-06: $made-line-height-heading; // Line Height of Heading 6 (H6). +$made-font-heading-line-height-level-05: $made-line-height-heading; // Line Height of Heading 5 (H5). +$made-font-heading-line-height-level-04: $made-line-height-heading; // Line Height of Heading 4 (H4). +$made-font-heading-line-height-level-03: $made-line-height-heading; // Line Height of Heading 3 (H3). +$made-font-heading-line-height-level-02: $made-line-height-heading; // Line Height of Heading 2 (H2). +$made-font-heading-line-height-level-01: $made-line-height-heading; // Line Height of Heading 1 (H1). +$made-font-heading-line-height-eyebrow-02: $made-line-height-heading; // Line Height for large eyebrow text. +$made-font-heading-line-height-eyebrow-01: $made-line-height-heading; // Line Height for small eyebrow text. +$made-font-heading-line-height-display-03: $made-line-height-heading; // Line height of Display 03. +$made-font-heading-line-height-display-02: $made-line-height-heading; // Line height of Display 02. +$made-font-heading-line-height-display-01: $made-line-height-heading; // Line height of Display 01. +$made-font-heading-letter-spacing-level-06: $made-letter-spacing-default; // Letter spacing of Heading 6 (H6). +$made-font-heading-letter-spacing-level-05: $made-letter-spacing-default; // Letter spacing of Heading 5 (H5). +$made-font-heading-letter-spacing-level-04: $made-letter-spacing-default; // Letter spacing of Heading 4 (H4). +$made-font-heading-letter-spacing-level-03: $made-letter-spacing-default; // Letter spacing of Heading 3 (H3). +$made-font-heading-letter-spacing-level-02: $made-letter-spacing-default; // Letter spacing of Heading 2 (H2). +$made-font-heading-letter-spacing-level-01: $made-letter-spacing-default; // Letter spacing of Heading 1 (H1). +$made-font-heading-letter-spacing-eyebrow-02: $made-letter-spacing-eyebrow; // Letter spacing for small eyebrow text. +$made-font-heading-letter-spacing-eyebrow-01: $made-letter-spacing-eyebrow; // Letter spacing for small eyebrow text. +$made-font-heading-letter-spacing-display-03: $made-letter-spacing-default; // Letter spacing of Display 03. +$made-font-heading-letter-spacing-display-02: $made-letter-spacing-default; // Letter spacing of Display 02. +$made-font-heading-letter-spacing-display-01: $made-letter-spacing-default; // Letter spacing of Display 02. +$made-font-family-heading: $made-font-family-light; // Font family for headings (H1,H2 and display text) +$made-font-family-eyebrow: $made-font-family-bold; // Font family for headings (H1,H2 and display text) +$made-font-body-weight-default: $made-font-weight-default; // Default font weight for body text. +$made-font-body-weight-bold: $made-font-weight-bold; // Bold font weight for body text. +$made-font-body-size-small: $made-font-size-02; // Small font size for body text. +$made-font-body-size-large: $made-font-size-06; // Large font size for body text. +$made-font-body-size-default: $made-font-size-04; // Default font size for body text. +$made-font-body-line-height: $made-line-height-default; // Default line height for body text. +$made-font-body-letter-spacing: $made-letter-spacing-default; // Default letter spacing for body text. +$made-font-body-family-narrow: $made-font-family-narrow; // Default font family for narrow/small text. Used on tooltip and notification +$made-font-body-family-default: $made-font-family-regular; // Default font family for body text. +$made-font-body-family-bold: $made-font-family-medium; // Font family for bold body text. +$made-color-text-inverse: $made-color-white; // Inverse text/icon color +$made-color-text-helper: $made-color-gray-05; // Text color of helper text on forms, cards etc. +$made-color-text-default-on-light: $made-color-gray-07; // Color of body text on light background. +$made-color-feedback-text-success: $made-color-feedback-success; // Text color for success or positive state +$made-color-feedback-text-on-warning: $made-color-text-default-on-dark; // Text color displayed on top of the warning color +$made-color-feedback-text-on-success-light: $made-color-green-success-05; // Text color displayed on top of the success color of Light variation of notifications and toasts +$made-color-feedback-text-on-success: $made-color-text-default-on-dark; // Text color displayed on top of the error color +$made-color-feedback-text-on-information-light: $made-color-yellow-07; // Text color displayed on top of the information color of Light variation of notifications and toasts +$made-color-feedback-text-on-information: $made-color-yellow-07; // Text color displayed on top of the error color +$made-color-feedback-text-on-error-light: $made-color-red-error-05; // Text color displayed on top of the error color of Light variation of notifications and toasts +$made-color-feedback-text-on-error: $made-color-text-default-on-dark; // Text color displayed on top of the error color +$made-color-feedback-text-information: $made-color-feedback-information; // Text color for neutral or optional state +$made-color-feedback-text-error: $made-color-feedback-error; // Text color for error state +$made-color-feedback-warning: $made-color-gold-04; // Color for warning state +$made-color-feedback-success-light: $made-color-green-success-01; // Color for light variant of success or positive state +$made-color-feedback-information-light: $made-color-yellow-01; // Color for light variant of neutral or optional state +$made-color-feedback-error-light: $made-color-red-error-01; // Color for light variant of error state +$made-color-feedback-border-success: $made-color-feedback-success; // Border color for success or positive state +$made-color-feedback-border-information: $made-color-feedback-information; // Border color for neutral or optional state +$made-color-feedback-border-error: $made-color-feedback-error; // Border color for error state +$made-color-feedback-background-success: $made-color-feedback-success; // Background color for success or positive state +$made-color-feedback-background-information: $made-color-feedback-information; // Background color for neutral or optional state +$made-color-feedback-background-error: $made-color-feedback-error; // Background color for error state +$made-color-brand-secondary: $made-color-teal-03; // The secondary color of your brand +$made-color-brand-primary: $made-color-teal-03; // The primary color of your brand +$made-color-border-default-on-light: $made-color-gray-02; // Default Border color used for layout elements e.g. accordion, table. +$made-color-border-default-on-dark: $made-color-gray-05; // Default Border color used for layout elements on a dark background. +$made-color-background-inverse: $made-color-gray-07; // High contrast backgrounds/elements +$made-color-background-02: $made-color-gray-02; // Tertiary background color of the application. +$made-color-background-01: $made-color-gray-01-25; // Secondary background color of the application. +$made-color-background-gray-lightest: $made-color-gray-01-5; // Used on background of breadcrumb and pill components. +$made-color-background-default: $made-color-white; // Main background color of the application. +$made-color-action-text-on-secondary: $made-color-brand-on-secondary; // Text color on top of secondary interactive color +$made-color-action-text-on-primary: $made-color-brand-on-primary; // Text color on top of primary interactive color +$made-color-action-text-on-disabled: $made-color-text-default-on-dark; // Text color on top of disabled state color +$made-color-action-text-on-dark: $made-color-gray-07; // Text color on top of interactive color on a dark background +$made-color-action-primary-hover: $made-color-teal-05; // Color of primary interactive color on hover e.g. buttons +$made-color-action-primary-active: $made-color-teal-06; // Color of primary interactive color on active e.g. buttons +$made-color-action-on-dark-hover: $made-color-gray-02; // Text color of secondary interactive color on dark background e.g. buttons. +$made-color-action-on-dark-default: $made-color-teal-01; // Color of interactive color on dark background e.g. buttons +$made-color-action-on-dark-active: $made-color-gray-03; // Text color of secondary interactive color on dark background e.g. buttons. +$made-color-action-disabled: $made-color-gray-03; // Global color for disabled state. +$made-color-action-border-focus-on-dark: $made-color-white; // Outline color for focus state on dark backgrounds. +$made-color-action-background-selected-hover: $made-color-gray-02; // Background color for hover state of on selected UI Elements +$made-color-action-background-selected: $made-color-gray-01-5; // Background color for selected state of UI Elements such as tables, dropdowns... +$made-color-action-background-primary-hover: $made-color-teal-05; // Background color of primary interactive color e.g primary buttons. +$made-color-action-background-on: $made-color-feedback-success; // Background color for on state of UI Elements such as toggle +$made-color-action-background-hover: $made-color-gray-01-25; // Background color for hover state of UI Elements such as tables, dropdowns... +$made-color-action-background-highlight: $made-color-teal-01; // Background color of highlight interactive color. Used on date range in Calendar +$made-border-radius-small: $made-border-radius-01; // Small border radius for UI components +$made-border-radius-large: $made-border-radius-04; // Large border radius for UI components +$made-border-radius-default: $made-border-radius-02; // Default border radius for UI components +$made-search-action-color-background-hover: $made-color-gray-01-5; // Background color for the hover state of action within the search component +$made-pill-border-radius: $made-border-radius-05; // Pill Border Radius +$made-pill-color-background-hover: $made-color-gray-02-5; // Background color for pill components hover state for the close icon element. +$made-header-color-background: $made-color-gray-07; // Background color for header component +$made-header-color-text: $made-color-white; // Text color on header component +$made-footer-color-background: $made-color-gray-07; // Background color for footer component +$made-footer-color-text: $made-color-white; // Text color on footer component +$made-link-color-on-dark: $made-color-action-on-dark-default; // Text color for links on dark backgrounds +$made-forms-color-background-default: $made-color-background-default; // Default background color for forms. +$made-button-border-radius: $made-border-radius-small; // Button Border Radius +$made-font-heading-size-eyebrow-02: $made-font-body-size-large; // Font size for default eyebrow text +$made-font-heading-size-eyebrow-01: $made-font-body-size-small; // Font size for small eyebrow text +$made-font-heading-family-level-06: $made-font-body-family-bold; // Font Family for Heading 6 (H6). +$made-font-heading-family-level-05: $made-font-body-family-default; // Font Family for Heading 5 (H5). +$made-font-heading-family-level-04: $made-font-body-family-default; // Font Family for Heading 4 (H4). +$made-font-heading-family-level-03: $made-font-body-family-default; // Font Family for Heading 3 (H3). +$made-font-heading-family-level-02: $made-font-family-heading; // Font Family for Heading 2 (H2). +$made-font-heading-family-level-01: $made-font-family-heading; // Font Family for Heading 1 (H1). +$made-font-heading-family-eyebrow-02: $made-font-family-eyebrow; // Font family for large eyebrow text. +$made-font-heading-family-eyebrow-01: $made-font-family-eyebrow; // Font family for small eyebrow text. +$made-font-heading-family-display-03: $made-font-family-heading; // Font family for Display 03. +$made-font-heading-family-display-02: $made-font-family-heading; // Font family for Display 02. +$made-font-heading-family-display-01: $made-font-family-heading; // Font family for Display 01. +$made-color-text-primary: $made-color-brand-primary; // Text color of primary brand color. +$made-color-feedback-text-warning: $made-color-feedback-warning; // Text color for warning state +$made-color-feedback-border-warning: $made-color-feedback-warning; // Border color or for warning state +$made-color-feedback-border-success-light: $made-color-feedback-success-light; // Border color for success or positive state for Light variation of notifications and toasts +$made-color-feedback-border-information-light: $made-color-feedback-information-light; // Border color for neutral or optional state of Light variation of notifications and toasts +$made-color-feedback-border-error-light: $made-color-feedback-error-light; // Border color for error state of Light variation of notifications and toasts +$made-color-feedback-background-warning: $made-color-feedback-warning; // Background color for warning state +$made-color-feedback-background-success-light: $made-color-feedback-success-light; // Background color for success or positive state for Light variation of notifications and toasts +$made-color-feedback-background-information-light: $made-color-feedback-information-light; // Background color for neutral or optional state of Light variation of notifications and toasts +$made-color-feedback-background-error-light: $made-color-feedback-error-light; // Background color for error state of Light variation of notifications and toasts +$made-color-background-primary: $made-color-brand-primary; // Background of primary brand color. +$made-color-action-text-primary-hover: $made-color-action-primary-hover; // Text color of primary color hover interactive state e.g. secondary buttons +$made-color-action-text-primary-active: $made-color-action-primary-active; // Text color of primary color pressed interactive state e.g. ghost button +$made-color-action-text-on-selected-hover: $made-color-text-default-on-light; // Text color on top of hover and selected state of UI Elements +$made-color-action-text-on-selected: $made-color-text-default-on-light; // Text color on top of selected state of UI Elements +$made-color-action-text-on-hover: $made-color-text-default-on-light; // Text color on top of hover state of UI Elements +$made-color-action-text-on-dark-hover: $made-color-action-on-dark-hover; // Text color of secondary interactive color e.g. secondary button on a dark background +$made-color-action-text-on-dark-default: $made-color-action-on-dark-default; // Text color of secondary interactive color e.g. secondary button on a dark background +$made-color-action-text-on-dark-active: $made-color-action-on-dark-active; // Text color of secondary interactive color e.g. secondary button on a dark background +$made-color-action-text-disabled: $made-color-action-disabled; // Text color for disabled state of UI Elements +$made-color-action-secondary-hover: $made-color-action-primary-hover; // Color of secondary interactive color e.g. secondary buttons +$made-color-action-secondary-default: $made-color-brand-secondary; // Color of secondary interactive color e.g. secondary buttons +$made-color-action-secondary-active: $made-color-action-primary-active; // Color of secondary interactive color e.g. secondary button +$made-color-action-primary-default: $made-color-brand-primary; // Color of primary interactive color e.g. buttons +$made-color-action-border-selected-on-dark: $made-color-action-on-dark-default; // Border color for selected items on dark background. +$made-color-action-border-primary-hover: $made-color-action-primary-hover; // Border color of primary interactive color e.g primary buttons. +$made-color-action-border-primary-active: $made-color-action-primary-active; // Border color of primary interactive color e.g primary buttons. +$made-color-action-border-on-dark-hover: $made-color-action-on-dark-hover; // Border color of secondary interactive color. +$made-color-action-border-on-dark-default: $made-color-action-on-dark-default; // Border color of secondary interactive color +$made-color-action-border-on-dark-active: $made-color-action-on-dark-active; // Border color of secondary interactive color. +$made-color-action-border-disabled: $made-color-action-disabled; // Border color for disabled state of UI Elements such as tables, dropdowns... +$made-color-action-background-secondary-hover: $made-color-background-default; // Background color of secondary interactive color e.g. secondary buttons +$made-color-action-background-secondary-default: $made-color-background-default; // Background color of secondary interactive color e.g. secondary buttons +$made-color-action-background-secondary-active: $made-color-background-default; // Background color of secondary interactive color e.g. secondary button +$made-color-action-background-primary-active: $made-color-action-primary-active; // Background color of primary interactive color e.g primary buttons. +$made-color-action-background-on-dark-hover: $made-color-action-on-dark-hover; // Background color of secondary interactive color. +$made-color-action-background-on-dark-default: $made-color-action-on-dark-default; // Background color of secondary interactive color +$made-color-action-background-on-dark-active: $made-color-action-on-dark-active; // Background color of secondary interactive color. +$made-color-action-background-off: $made-color-action-disabled; // Background color for off state of UI Elements such as toggle +$made-color-action-background-disabled: $made-color-action-disabled; // Background color for disabled state of UI Elements such as tables, dropdowns... +$made-search-color-background: $made-color-background-01; // Background color for search input component +$made-pill-color-background-default: $made-color-background-02; // Background color for pill component. +$made-link-color-default: $made-color-action-primary-default; // Text color for link +$made-color-action-text-secondary-hover: $made-color-action-secondary-hover; // Text color of secondary interactive color e.g. secondary buttons +$made-color-action-text-secondary-default: $made-color-action-secondary-default; // Text color of secondary interactive color e.g. secondary buttons +$made-color-action-text-secondary-active: $made-color-action-secondary-active; // Text color of secondary interactive color e.g. secondary button +$made-color-action-text-primary-default: $made-color-action-primary-default; // Text color of primary interactive color e.g. links +$made-color-action-border-selected-on-light: $made-color-action-primary-default; // Border color for selected items. +$made-color-action-border-secondary-hover: $made-color-action-secondary-hover; // Border color of secondary interactive color e.g. secondary buttons +$made-color-action-border-secondary-default: $made-color-action-secondary-default; // Border color of secondary interactive color e.g. secondary buttons +$made-color-action-border-secondary-active: $made-color-action-secondary-active; // Border color of secondary interactive color e.g. secondary button +$made-color-action-border-primary-default: $made-color-action-primary-default; // Border color of primary interactive color e.g primary buttons. +$made-color-action-border-focus: $made-color-action-primary-default; // Outline color for focus state. +$made-color-action-background-primary-default: $made-color-action-primary-default; // Background color of primary interactive color e.g primary buttons. +$made-search-action-color-background-default: $made-search-color-background; // Background color for action within the search component \ No newline at end of file