@octoguide/mui-ui-toolkit 0.2.0 → 0.3.1

package/README.md

@@ -145,87 +145,3 @@ Peer dependencies (install in your consuming app):
 ```bash
 yarn add @mui/material @emotion/react @emotion/styled react react-dom
 ```
-
-## command used to create the foundational components
-
-nder the src/components/foundation folder i want to add  
-wrapper objects for each of the following. these objects will  
-live in their own component file. not 1 big file  
-each component will extend the base typography component in the  
-mui-design library  
-H1
-
-<div class="css-1pjc7v5"><h1 class="MuiTypography-root           
-MuiTypography-h1 css-p6re0n">How can you choose a                
-typeface?</h1><pre class="MuiBox-root css-6cymt6">{              
-  "fontWeight": 800,                                             
-  "fontSize": "2.5rem (40px)",                                   
-  "lineHeight": 1.25,                                            
-  "@media (min-width:600px)": {                                  
-    "fontSize": "3.25rem (52px)"                                 
-  },                                                             
-  "@media (min-width:900px)": {                                  
-    "fontSize": "3.625rem (58px)"                                
-  },                                                             
-  "@media (min-width:1200px)": {                                 
-    "fontSize": "4rem (64px)"                                    
-  }                                                              
-}</pre></div>                                                    
-  ⎿  Interrupted · What should Claude do instead?
-
-[Image #2] (↑ to select)
-─────────────────────────────────────────────────────────── ▪▪▪ ─
-❯ under the src/components/foundation folder i want to add
-wrapper objects for each of the following. these objects will
-live in their own component file. not 1 big file
-each component will extend the base typography component in
-the mui-design library
-for each component i will give 2 lines for the name of the
-component and what to export it as, the div element that
-contains the component itself as it is used on a web page and
-the pre object that contains the styles for the component
-rules for each component
-always use the theme values rather than hardcoding values
-i.e fontweight:800, the 800 should come from the theme
-definition
-also create the storybook entry from the component entry i
-have provided above showing the component name, example text,
-and the styles from the pre section to show the styles that
-make up the component all on a card like this
-
-all the theme elements can be found in docs/theme.json which
-is a json object showing all the current default theme values
-H1
-[Pasted text #1 +13 lines]
-H2
-[Pasted text #3 +13 lines]  
- H3  
- [Pasted text #4 +13 lines]  
- H4  
- [Pasted text #5 +7 lines]  
- H5  
- [Pasted text #6 +7 lines]  
- H6  
- [Pasted text #7 +7 lines]  
- Subtitle1  
- [Pasted text #8 +4 lines]  
- Subtitle2  
- [Pasted text #9 +4 lines]  
- Body1  
- [Pasted text #10 +4 lines]  
- Body2  
- [Pasted text #11 +4 lines]  
- Caption  
- [Pasted text #12 +4 lines]  
- Overline  
- [Pasted text #13 +4 lines]  
- Button  
- [Pasted text #14 +4 lines]  
- use the text.primary values from the theme palette object as  
- the text colour and use the theme entry from the typeography  
- object for each component  
- for example H1 fontweight should come from the them value  
- typography.h1.fontWeight  
- at the end if you can add tests for each component  
- build and check for completness  
- i can use storybook to see if the components creation worked

package/dist/index.d.mts

@@ -60,6 +60,16 @@ interface ColorTokens {
     borderFocus: string;
     overlayLight: string;
     overlayDark: string;
+    overlayLight60: string;
+    overlayLight70: string;
+    overlayLight75: string;
+    overlayLight85: string;
+    colorRed: string;
+    colorAmber: string;
+    colorOrange: string;
+    colorGreen: string;
+    colorBlue: string;
+    colorGrey: string;
 }
 interface TypographyTokens {
     fontFamilyBase: string;
@@ -71,6 +81,7 @@ interface TypographyTokens {
     fontSizeXl: string;
     fontSize2xl: string;
     fontSize3xl: string;
+    fontSize4xl: string;
     fontWeightLight: number;
     fontWeightRegular: number;
     fontWeightMedium: number;
@@ -128,7 +139,33 @@ interface ZIndexTokens {
     toast: number;
     tooltip: number;
 }
+interface FooterTokens {
+    background: string;
+    textColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+}
+interface IconTokens {
+    /** 12px — tiny inline icons (e.g. back arrows) */
+    xs: string;
+    /** 16px — small inline icons */
+    sm: string;
+    /** 20px — standard small icons (e.g. nav, button icons) */
+    md: string;
+    /** 24px — standard icons */
+    lg: string;
+    /** 28px — medium feature icons */
+    xl: string;
+    /** 32px — large feature icons */
+    xxl: string;
+    /** 36px — hero / confirmation icons */
+    xxxl: string;
+    /** 56px — decorative / background icons */
+    display: string;
+}
 interface ComponentTokens {
+    footer: FooterTokens;
+    icon: IconTokens;
     button: {
         paddingX: string;
         paddingY: string;

package/dist/index.d.ts

@@ -60,6 +60,16 @@ interface ColorTokens {
     borderFocus: string;
     overlayLight: string;
     overlayDark: string;
+    overlayLight60: string;
+    overlayLight70: string;
+    overlayLight75: string;
+    overlayLight85: string;
+    colorRed: string;
+    colorAmber: string;
+    colorOrange: string;
+    colorGreen: string;
+    colorBlue: string;
+    colorGrey: string;
 }
 interface TypographyTokens {
     fontFamilyBase: string;
@@ -71,6 +81,7 @@ interface TypographyTokens {
     fontSizeXl: string;
     fontSize2xl: string;
     fontSize3xl: string;
+    fontSize4xl: string;
     fontWeightLight: number;
     fontWeightRegular: number;
     fontWeightMedium: number;
@@ -128,7 +139,33 @@ interface ZIndexTokens {
     toast: number;
     tooltip: number;
 }
+interface FooterTokens {
+    background: string;
+    textColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+}
+interface IconTokens {
+    /** 12px — tiny inline icons (e.g. back arrows) */
+    xs: string;
+    /** 16px — small inline icons */
+    sm: string;
+    /** 20px — standard small icons (e.g. nav, button icons) */
+    md: string;
+    /** 24px — standard icons */
+    lg: string;
+    /** 28px — medium feature icons */
+    xl: string;
+    /** 32px — large feature icons */
+    xxl: string;
+    /** 36px — hero / confirmation icons */
+    xxxl: string;
+    /** 56px — decorative / background icons */
+    display: string;
+}
 interface ComponentTokens {
+    footer: FooterTokens;
+    icon: IconTokens;
     button: {
         paddingX: string;
         paddingY: string;

package/dist/index.js

@@ -116,7 +116,17 @@ var defaultTheme = {
     border: "#C5CFE0",
     borderFocus: "#1565C0",
     overlayLight: "rgba(255, 255, 255, 0.8)",
-    overlayDark: "rgba(0, 0, 0, 0.12)"
+    overlayDark: "rgba(0, 0, 0, 0.12)",
+    overlayLight60: "rgba(255, 255, 255, 0.6)",
+    overlayLight70: "rgba(255, 255, 255, 0.7)",
+    overlayLight75: "rgba(255, 255, 255, 0.75)",
+    overlayLight85: "rgba(255, 255, 255, 0.85)",
+    colorRed: "#FF5630",
+    colorAmber: "#FFAB00",
+    colorOrange: "#FF8B00",
+    colorGreen: "#36B37E",
+    colorBlue: "#0065FF",
+    colorGrey: "#6B778C"
   },
   typography: {
     fontFamilyBase: '"Source Sans Pro", sans-serif',
@@ -136,6 +146,8 @@ var defaultTheme = {
     // 22px
     fontSize3xl: "1.75rem",
     // 28px
+    fontSize4xl: "2.25rem",
+    // 36px
     // ── Weights (identical across all themes) ─────────────────────────────
     fontWeightLight: 300,
     fontWeightRegular: 400,
@@ -196,6 +208,22 @@ var defaultTheme = {
     tooltip: 700
   },
   components: {
+    footer: {
+      background: "#003c8f",
+      textColor: "rgba(255, 255, 255, 0.7)",
+      linkColor: "rgba(255, 255, 255, 0.7)",
+      linkHoverColor: "#ffffff"
+    },
+    icon: {
+      xs: "12px",
+      sm: "16px",
+      md: "20px",
+      lg: "24px",
+      xl: "28px",
+      xxl: "32px",
+      xxxl: "36px",
+      display: "56px"
+    },
     button: {
       // Sizes & paddings (identical across themes)
       paddingX: "12px",