-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #37 from Mastercard/develop
Uploading testing theme files
- Loading branch information
Showing
12 changed files
with
3,400 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 */ | ||
| } |
Oops, something went wrong.