@windstream/react-shared-components 0.0.1

package/tailwind.config.cjs

@@ -0,0 +1,524 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  important: true,
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        border: {
+          DEFAULT: "#E6E6E6",
+          brand: "#24A76A",
+          critical: {
+            DEFAULT: "#7E0000",
+            secondary: "#F0A7A7",
+          },
+          disabled: "#F2F2F4",
+          focus: {
+            DEFAULT: "#24A76A",
+            inverse: "#00002D",
+            secondary: "#00002D",
+          },
+          hover: "#CECECE",
+          info: "#CECECE",
+          inverse: "#FFFFFF",
+          secondary: {
+            DEFAULT: "#F2F2F4",
+            "on-bg-fill": "#949494",
+          },
+          success: "#24A76A",
+          tertiary: "#CECECE",
+        },
+
+        icon: {
+          brand: {
+            DEFAULT: "#24A76A",
+            accent: "#F5FF1E",
+          },
+          critical: "#D40000",
+          default: "#00002D",
+          info: "#757575",
+          inverse: {
+            DEFAULT: "#FFFFFF",
+            secondary: "#E6E6E6",
+          },
+          secondary: "#757575",
+          success: "#24A76A",
+        },
+
+        // Specialty
+        checkbox: {
+          bg: {
+            surface: {
+              disabled: "#F7F7F8",
+              selected: {
+                disabled: "#E6E6E6",
+              },
+            },
+          },
+          icon: {
+            disabled: "#FFFFFF",
+          },
+        },
+
+        input: {
+          bg: {
+            surface: {
+              DEFAULT: "#FFFFFF",
+              active: "#F2F2F4",
+              disabled: "#F7F7F8",
+              hover: "#F7F7F8",
+            },
+          },
+          border: {
+            DEFAULT: "#CECECE",
+            critical: "#D40000",
+            hover: "#00002D",
+            selected: "#24A76A",
+          },
+          icon: {
+            placeholder: "#757575",
+          },
+          text: {
+            placeholder: "#5E5E5E",
+          },
+        },
+
+        nav: {
+          bg: {
+            DEFAULT: "#FFFFFF",
+            surface: {
+              DEFAULT: "#FBFBFC",
+              active: "#F2F2F4",
+              hover: "#F7F7F8",
+              selected: "#F2F2F4",
+            },
+          },
+        },
+
+        radio: {
+          button: {
+            bg: {
+              surface: {
+                disabled: "#F7F7F8",
+                selected: {
+                  disabled: "#E6E6E6",
+                },
+              },
+            },
+            icon: {
+              disabled: "#F7F7F8",
+            },
+          },
+        },
+
+        scrim: {
+          bg: {
+            modal: "rgba(0, 0, 0, 0.5)",
+            video: {
+              lightbox: "rgba(0, 0, 0, 0.8)",
+            },
+          },
+        },
+
+        skeleton: {
+          bg: {
+            start: "#CECECE",
+            end: "#E6E6E6",
+          },
+        },
+
+        toggle: {
+          bg: {
+            fill: "#FFFFFF",
+            surface: {
+              active: "#24A76A",
+              disabled: "#949494",
+            },
+          },
+        },
+
+        tooltip: {
+          bg: "#464646",
+        },
+
+        // Surface
+        bg: {
+          DEFAULT: "#FFFFFF",
+          fill: {
+            brand: {
+              DEFAULT: "#24A76A",
+              accent: "#F5FF1E",
+              active: "#209A61",
+              disabled: "#CECECE",
+              hover: "#45C187",
+              selected: "#24A76A",
+              supporting: "#07B2E2",
+              tertiary: "#931D69",
+            },
+            critical: {
+              DEFAULT: "#D40000",
+              secondary: "#FDF5F5",
+            },
+            info: "#F2F2F4",
+            inverse: {
+              DEFAULT: "#00002D",
+              active: "#00002D",
+              disabled: "#CECECE",
+              hover: "#191A54",
+              selected: "#00002D",
+            },
+            secondary: {
+              DEFAULT: "#FFFFFF",
+              active: "#F2F2F4",
+              hover: "#FBFBFC",
+            },
+            success: {
+              DEFAULT: "#24A76A",
+              secondary: "#F4FBF8",
+            },
+          },
+
+          inverse: "#00002D",
+          surface: {
+            DEFAULT: "#FFFFFF",
+            active: "#F2F2F4",
+            brand: "#F4FBF8",
+            disabled: "#F2F2F4",
+            hover: "#F7F7F8",
+            info: "#F7F7F8",
+            inverse: "#191A54",
+            secondary: {
+              DEFAULT: "#FBFBFC",
+              active: "#E6E6E6",
+              hover: "#F2F2F4",
+              selected: "#E6E6E6",
+            },
+            selected: "#F7F7F8",
+            success: "#D3F2E3",
+            tertiary: {
+              DEFAULT: "#F7F7F8",
+              active: "#E6E6E6",
+              hover: "#F2F2F4",
+            },
+            transparent: "rgba(0, 0, 0, 0)",
+          },
+        },
+
+        text: {
+          DEFAULT: "#00002D",
+          brand: {
+            DEFAULT: "#24A76A",
+            accent: {
+              "on-bg-fill": "#00002D",
+            },
+            hover: "#1B8352",
+            "on-bg-fill": "#FFFFFF",
+            supporting: {
+              "on-bg-fill": "#00002D",
+            },
+            tertiary: {
+              "on-bg-fill": "#FFFFFF",
+            },
+          },
+          critical: {
+            DEFAULT: "#D40000",
+            "on-bg-inverse": "#FDF5F5",
+          },
+          disabled: "#757575",
+          info: "#464646",
+          inverse: "#FFFFFF",
+          link: {
+            DEFAULT: "#00002D",
+            active: "#00002D",
+            hover: "#00002D",
+            inverse: "#FFFFFF",
+          },
+          secondary: "#464646",
+          success: "#1B8352",
+        },
+      },
+      fontSize: {
+        heading1: "3rem", // 48px
+        heading2: "2.25rem", // 36px
+        heading3: "1.875rem", // 30px
+        heading4: "1.5rem", // 24px
+        heading5: "1.875rem", // 30px
+        heading6: "1.5rem", // 24px
+        subheading1: "1.5rem", // 24px
+        subheading2: "1.5rem", // 24px
+        subheading3: "1.125rem", // 18px
+        subheading4: "1.125rem", // 18px
+        subheading5: "3.75rem", // 60px
+        subheading6: "3rem", // 48px
+        body1: "1.25rem", // 20px
+        body2: "1.125rem", // 18px
+        body3: "1rem", // 16px
+        footnote: "0.875rem", // 14px
+        micro: "0.75rem", // 12px
+        label1: "1.25rem", // 20px
+        label2: "1.125rem", // 18px
+        label3: "1rem", // 16px
+        label4: "0.875rem", // 14px
+        label5: "1.25rem", // 20px
+        label6: "1.125rem", // 18px
+      },
+      lineHeight: {
+        4: "1rem", // 16px
+        5: "1.25rem", // 20px
+        6: "1.5rem", // 24px
+        7: "1.75rem", // 28px
+        8: "2rem", // 32px
+        9: "2.25rem", // 36px
+        9.2: "2.375rem", // 38px
+        10: "2.5rem", // 40px
+        12: "3rem", // 48px
+        15: "3.75rem", // 60px
+        18: "4.5rem", // 72px
+      },
+      spacing: {
+        7: "1.75rem", // 28px
+        17: "4.25rem", // 68px
+        1.5: "0.375rem", // 6px
+        2: "0.5rem", // 8px
+        3: "0.75rem", // 12px
+        4: "1rem", // 16px
+        4.5: "1.125rem", // 18px
+        6: "1.5rem", // 24px
+        18: "4.5rem", // 72px
+        13: "3.25rem", // 52px
+        15: "3.75rem", // 60px
+        26: "6.5rem", // 104px
+      },
+      borderRadius: {
+        2.5: "10px",
+        3.5: "14px",
+        "2xl": "1rem",
+        "4xl": "2rem",
+        "2.5xl": "1.25rem",
+      },
+      boxShadow: {
+        drop: "0px 4px 24px -3px rgba(23, 24, 24, 0.08), 0px 6px 32px -4px rgba(23, 24, 24, 0.08)",
+        light: "0px 0px 20px 0px #0000000F",
+        cardDrop: "1px 1px 16px 0px #00000033",
+        card: "1px 1px 16px 0px rgba(0, 0, 0, 0.12), -1px -1px 16px 0px #FFF",
+      },
+      transitionTimingFunction: {
+        circ: "cubic-bezier(0.11, 0.77, 0.28, 0.92)",
+      },
+      zIndex: {
+        60: "60",
+        70: "70",
+        80: "80",
+        90: "90",
+      },
+      fontFamily: {
+        sans: ["var(--win-site-font)", ...fontFamily.sans],
+        "material-icons": ["Material Symbols Rounded", "sans-serif"],
+        figtree: ["Figtree", "sans-serif"],
+      },
+      height: {
+        12: "3rem", // 48px
+        14: "3.5rem", // 56px
+        16: "4rem", // 64px
+        22: "5.5rem", // 88px
+      },
+    },
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      max: "1200px",
+    },
+    maxWidth: {
+      none: "none",
+      80: "800px",
+      120: "1200px",
+    },
+    variants: {
+      margin: ["first"],
+    },
+  },
+  plugins: [
+    require("tailwindcss-radix")(),
+    require("@tailwindcss/typography"),
+    function ({ addComponents, theme }) {
+      const typographyComponents = {
+        // Headings
+        ".heading1": {
+          "font-size": theme("fontSize.heading1"),
+          "line-height": theme("lineHeight.12"), // 3rem
+          "font-weight": "400",
+          "font-family": theme("fontFamily.spirit"),
+        },
+        ".heading2": {
+          "font-size": theme("fontSize.heading2"),
+          "line-height": theme("lineHeight.10"), // 2.5rem
+          "font-weight": "400",
+          "font-family": theme("fontFamily.spirit"),
+        },
+        ".heading3": {
+          "font-size": theme("fontSize.heading3"),
+          "line-height": theme("lineHeight[9.2]"), // 2.375rem
+          "font-weight": "400",
+          "font-family": theme("fontFamily.spirit"),
+        },
+        ".heading4": {
+          "font-size": theme("fontSize.heading4"),
+          "line-height": theme("lineHeight.7"), // 1.75rem
+          "font-weight": "400",
+          "font-family": theme("fontFamily.spirit"),
+        },
+        ".heading5": {
+          "font-size": theme("fontSize.heading5"),
+          "line-height": theme("lineHeight.9"),
+          "font-weight": "600",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".heading6": {
+          "font-size": theme("fontSize.heading6"),
+          "line-height": theme("lineHeight.8"),
+          "font-weight": "600",
+          "font-family": theme("fontFamily.figtree"),
+        },
+
+        // Subheadings
+        ".subheading1": {
+          "font-size": theme("fontSize.subheading1"),
+          "line-height": theme("lineHeight.8"),
+          "font-weight": "400",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".subheading2": {
+          "font-size": theme("fontSize.subheading2"),
+          "line-height": theme("lineHeight.8"),
+          "font-weight": "700",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".subheading3": {
+          "font-size": theme("fontSize.subheading3"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "400",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".subheading4": {
+          "font-size": theme("fontSize.subheading4"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "700",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".subheading5": {
+          "font-size": theme("fontSize.subheading5"),
+          "line-height": theme("lineHeight.15"), // 3.75rem
+          "font-weight": "300",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".subheading6": {
+          "font-size": theme("fontSize.subheading6"),
+          "line-height": theme("lineHeight.12"),
+          "font-weight": "300",
+          "font-family": theme("fontFamily.figtree"),
+        },
+
+        // Body text
+        ".body1": {
+          "font-size": theme("fontSize.body1"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "400",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".body2": {
+          "font-size": theme("fontSize.body2"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "400",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".body3": {
+          "font-size": theme("fontSize.body3"),
+          "line-height": theme("lineHeight.6"),
+          "font-weight": "400",
+          "font-family": theme("fontFamily.figtree"),
+        },
+
+        // Footnote & Micro
+        ".footnote": {
+          "font-size": theme("fontSize.footnote"),
+          "line-height": theme("lineHeight.5"),
+          "font-weight": "400",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".micro": {
+          "font-size": theme("fontSize.micro"),
+          "line-height": theme("lineHeight.4"),
+          "font-weight": "400",
+          "font-family": theme("fontFamily.figtree"),
+        },
+
+        // Labels
+        ".label1": {
+          "font-size": theme("fontSize.label1"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "600",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".label2": {
+          "font-size": theme("fontSize.label2"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "600",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".label3": {
+          "font-size": theme("fontSize.label3"),
+          "line-height": theme("lineHeight.6"),
+          "font-weight": "600",
+          "font-family": theme("fontFamily.figtree"),
+        },
+        ".label4": {
+          "font-size": theme("fontSize.label4"),
+          "line-height": theme("lineHeight.5"),
+          "font-weight": "600",
+          "font-family": theme("fontFamily.figtree"),
+        },
+         ".label5": {
+          "font-family": theme("fontFamily.spirit"),
+          "font-size": theme("fontSize.label5"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "700",
+        },
+        ".label6": {
+          "font-family": theme("fontFamily.spirit"),
+          "font-size": theme("fontSize.label6"),
+          "line-height": theme("lineHeight.7"),
+          "font-weight": "700",
+        },
+      };
+
+      const buttonComponents = {
+        ".btn-small": {
+          ...typographyComponents[".label6"],
+          height: theme("height.12"),
+        },
+        ".btn-medium": {
+          ...typographyComponents[".label5"],
+          height: theme("height.14"),
+        },
+        ".btn-large": {
+          ...typographyComponents[".label5"],
+          height: theme("height.16"),
+        },
+        ".btn-x-large": {
+          ...typographyComponents[".heading3"],
+          height: theme("height.22"),
+        },
+      };
+
+      addComponents({ ...typographyComponents, ...buttonComponents }, [
+        "responsive",
+      ]);
+    },
+  ],
+};
+
+