Main

.github/workflows/build-storybook.yml

@@ -13,9 +13,17 @@ on:
 jobs:
   build-storybook:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
 
       - name: Install and Build
         run: |

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"
+    }
+  }
+}

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 */
+}