@nightfall-ui/theme - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

dist/src/provider/Provider.d.ts

 import { FC } from "react";
-declare const ThemeProvider: FC;
+declare type Schema = "dark" | "light";
+declare const ThemeProvider: FC<{
+    schema?: Schema;
+}>;
 export { ThemeProvider };
 //# sourceMappingURL=Provider.d.ts.map

dist/src/provider/Provider.js

@@ -17,11 +17,12 @@ var __assign = (this && this.__assign) || function () {
 import { GlobalCss, ResetCss } from "../reset-css";
-import { darkTheme } from "../themes/dark.theme";
+import { darkTheme, lightTheme } from "../themes";
 var ThemeProvider = function (_a) {
-    var children = _a.children;
+    var children = _a.children, schema = _a.schema;
     var colorSchema = usePrefersColorScheme();
-    var t = useMemo(
-    // TODO: add light theme values
-    function () { return (colorSchema === "dark" ? darkTheme : darkTheme); }, [colorSchema]);
-    return (_jsxs(CssProvider, __assign({ theme: t }, { children: [_jsx(ResetCss, {}, void 0), _jsx(GlobalCss, {}, void 0), children] }), void 0));
+    var _schema = schema || colorSchema;
+    var theme = useMemo(function () {
+        return _schema === "dark" ? darkTheme : lightTheme;
+    }, [_schema]);
+    return (_jsxs(CssProvider, __assign({ theme: theme }, { children: [_jsx(ResetCss, {}, void 0), _jsx(GlobalCss, {}, void 0), children] }), void 0));
 };
 export { ThemeProvider };

dist/src/themes/dark.theme.d.ts

@@ -1,36 +0,4 @@
-export interface DarkTheme {
-    textColor: {
-        DEFAULT: string;
-    };
-    lineHeight: {
-        body: string;
-        callout: string;
-        footnote: string;
-        caption1: string;
-        caption2: string;
-        headline: string;
-        largeTitle: string;
-        title1: string;
-        title2: string;
-        title3: string;
-        subHeadline: string;
-    };
-    fontSize: {
-        body: string;
-        callout: string;
-        footnote: string;
-        caption1: string;
-        caption2: string;
-        headline: string;
-        largeTitle: string;
-        title1: string;
-        title2: string;
-        title3: string;
-        subHeadline: string;
-    };
-    fontWeight: {};
-    colors: any;
-}
-declare const darkTheme: DarkTheme;
-export { darkTheme };
+import { ThemeType } from "./Theme.type";
+declare const darkTheme: ThemeType;
+export default darkTheme;
 //# sourceMappingURL=dark.theme.d.ts.map

dist/src/themes/dark.theme.js

@@ -124,2 +124,7 @@ var darkTheme = {
         },
+        groupedBackground: {
+            primary: "#000000ff",
+            secondary: "#1c1c1eff",
+            tertiary: "#2c2c2eff",
+        },
         materials: {
@@ -133,7 +138,2 @@ background: {
         },
-        groupedBackground: {
-            primary: "#000000ff",
-            secondary: "#1c1c1eff",
-            tertiary: "#2c2c2eff",
-        },
         placeholderText: "#ebebf54c",
@@ -191,2 +191,2 @@ separator: "#54545899",
 };
-export { darkTheme };
+export default darkTheme;

dist/src/themes/light.theme.d.ts

@@ -1,89 +0,4 @@
-declare const lightTheme: {
-    textColor: {
-        DEFAULT: string;
-    };
-    colors: {
-        label: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            quaternary: string;
-        };
-        fill: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            quaternary: string;
-        };
-        background: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-        };
-        groupedBackground: {
-            grouped: string;
-            secondary: string;
-            tertiary: string;
-        };
-        materials: {
-            background: {
-                regular: string;
-                thin: string;
-                ultraThin: string;
-                thick: string;
-            };
-        };
-        placeholderText: string;
-        separator: string;
-        opaqueSeparator: string;
-        link: string;
-        darkText: string;
-        lightText: string;
-        gray: {
-            1: string;
-            2: string;
-            3: string;
-            4: string;
-            5: string;
-            6: string;
-        };
-        red: {
-            1: string;
-        };
-        orange: {
-            1: string;
-        };
-        yellow: {
-            1: string;
-        };
-        green: {
-            1: string;
-        };
-        mint: {
-            1: string;
-        };
-        teal: {
-            1: string;
-        };
-        cyan: {
-            1: string;
-        };
-        blue: {
-            1: string;
-        };
-        indigo: {
-            1: string;
-        };
-        purple: {
-            1: string;
-        };
-        pink: {
-            1: string;
-        };
-        brown: {
-            1: string;
-        };
-    };
-};
-export { lightTheme };
+import { ThemeType } from "./Theme.type";
+declare const lightTheme: ThemeType;
+export default lightTheme;
 //# sourceMappingURL=light.theme.d.ts.map

dist/src/themes/light.theme.js

 var lightTheme = {
-    // https://noahgilmore.com/blog/dark-mode-uicolor-compatibility/
     textColor: {
-        DEFAULT: "black",
+        DEFAULT: "rgb(16,16,16)",
     },
+    lineHeight: {
+        body: "1.375",
+        callout: "1.375",
+        footnote: "1.125",
+        caption1: "1",
+        caption2: "1.1818",
+        headline: "1.2941",
+        largeTitle: "1.2058",
+        title1: "1.2142",
+        title2: "1.2727",
+        title3: "1.2",
+        subHeadline: "1.3333",
+    },
+    fontWeight: {},
+    fontSize: {
+        body: "1.0625rem",
+        callout: "1rem",
+        footnote: "0.8125rem",
+        caption1: "0.75rem",
+        caption2: "0.6875rem",
+        headline: "1.0625rem",
+        largeTitle: "2.125rem",
+        title1: "1.75rem",
+        title2: "1.375rem",
+        title3: "1.25rem",
+        subHeadline: "0.9375rem",
+    },
     colors: {
+        body: {
+            primary: "rgb(0, 0, 0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        callout: {
+            primary: "rgb(0, 0, 0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        footnote: {
+            primary: "rgb(0, 0, 0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        caption1: {
+            primary: "rgb(0, 0, 0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        caption2: {
+            primary: "rgb(0, 0, 0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        headline: {
+            primary: "rgb(0, 0, 0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        largeTitle: {
+            primary: "rgb(0, 0, 0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        title1: {
+            primary: "rgb(0,0,0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        title2: {
+            primary: "rgb(0,0,0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        title3: {
+            primary: "rgb(0,0,0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
+        subHeadline: {
+            primary: "rgb(0,0,0)",
+            secondary: "rgba(46, 46, 49, 60%)",
+            tertiary: "rgb(46, 46, 49, 30%)",
+            quaternary: "rgb(46, 46, 49, 16%)",
+        },
         label: {
-            primary: "#000000ff",
-            secondary: "#3c3c4399",
-            tertiary: "#3c3c434c",
-            quaternary: "#3c3c432d",
+            primary: "#ffffffff",
+            secondary: "#ebebf599",
+            tertiary: "#ebebf54c",
+            quaternary: "#ebebf52d",
         },
         fill: {
-            primary: "#78788033",
-            secondary: "#78788028",
-            tertiary: "#7676801e",
-            quaternary: "#74748014",
+            primary: "rgb(120, 120, 128, 36%)",
+            secondary: "rgb(120, 120, 128, 32%)",
+            tertiary: "rgb(118, 118, 128, 24%)",
+            quaternary: "rgb(116, 116, 128, 18%)",
         },
         background: {
-            primary: "#ffffffff",
-            secondary: "#f2f2f7ff",
-            tertiary: "#ffffffff",
+            base: {
+                primary: "rgb(251, 251, 253)",
+                secondary: "#dbdbea",
+                tertiary: "#d0d0d9",
+            },
+            elevated: {
+                primary: "rgb(251,251,252)",
+                secondary: "rgb(211,211,220)",
+                tertiary: "rgb(199,199,208)",
+            },
         },
         groupedBackground: {
-            grouped: "#f2f2f7ff",
-            secondary: "#ffffffff",
-            tertiary: "#f2f2f7ff",
+            primary: "#000000ff",
+            secondary: "#1c1c1eff",
+            tertiary: "#2c2c2eff",
         },
         materials: {
             background: {
-                regular: "rgba(255, 255, 255, 0.5)",
-                thin: "rgba(255, 255, 255, 0.45)",
-                ultraThin: "rgba(255, 255, 255, 0.15)",
-                thick: "rgba(255, 255, 255, 0.85)",
+                regular: "rgb(0, 0, 0, 41%)",
+                thin: "rgb(0, 0, 0, 26%)",
+                ultraThin: "rgb(0, 0, 0, 10%)",
+                thick: "rgb(0, 0, 0, 60%)",
             },
         },
-        placeholderText: "#3c3c434c",
-        separator: "#3c3c4349",
-        opaqueSeparator: "#c6c6c8ff",
-        link: "#007affff",
+        placeholderText: "#ebebf54c",
+        separator: "#54545899",
+        opaqueSeparator: "#38383aff",
+        link: "#0984ffff",
         darkText: "#000000ff",
@@ -45,46 +144,46 @@ lightText: "#ffffff99",
             1: "#8e8e93ff",
-            2: "#aeaeb2ff",
-            3: "#c7c7ccff",
-            4: "#d1d1d6ff",
-            5: "#e5e5eaff",
-            6: "#f2f2f7ff",
+            2: "#636366ff",
+            3: "#48484aff",
+            4: "#3a3a3cff",
+            5: "#2c2c2eff",
+            6: "#1c1c1eff",
         },
         red: {
-            1: "rgb(255, 59, 48)",
+            1: "rgb(255, 69,58)",
         },
         orange: {
-            1: "rgb(255, 149, 10)",
+            1: "rgb(255, 159, 10)",
         },
         yellow: {
-            1: "rgb(255, 204, 10)",
+            1: "rgb(255, 214, 10)",
         },
         green: {
-            1: "rgb(52, 199, 89)",
+            1: "rgb(48, 209, 88)",
         },
         mint: {
-            1: "rgb(0, 199, 190)",
+            1: "rgb(102, 212, 207)",
         },
         teal: {
-            1: "rgb(48, 176, 199)",
+            1: "rgb(64, 200, 224)",
         },
         cyan: {
-            1: "rgb(50, 173, 230)",
+            1: "rgb(100, 210, 255)",
         },
         blue: {
-            1: "rgb(0, 122, 255)",
+            1: "rgb(10, 132, 255)",
         },
         indigo: {
-            1: "rgb(88, 86, 214)",
+            1: "rgb(94, 92, 230)",
         },
         purple: {
-            1: "rgb(175, 82, 222)",
+            1: "rgb(191, 90, 242)",
         },
         pink: {
-            1: "rgb(255, 45, 85)",
+            1: "rgb(255, 55, 95)",
         },
         brown: {
-            1: "rgb(162, 132, 94)",
+            1: "rgb(172, 142, 104)",
         },
     },
 };
-export { lightTheme };
+export default lightTheme;

package.json

 {
   "name": "@nightfall-ui/theme",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "license": "MIT",
@@ -10,2 +10,3 @@ "description": "Theme for the Nightfall UI component library.",
     "tsc:watch": "tsc --watch",
+    "dev": "tsc --watch",
     "build": "tsc --project ./tsconfig.json",
@@ -15,3 +16,3 @@ "start": "npm run tsc:watch"
   "devDependencies": {
-    "@nightfall-ui/css": "^1.0.11",
+    "@nightfall-ui/css": "^1.0.12",
     "@nightfall-ui/hooks": "^1.1.0",
@@ -47,3 +48,3 @@ "@types/react-dom": "^17.0.11",
   },
-  "gitHead": "85f52671a7aad72443c049e8170473f6e8eccb4c",
+  "gitHead": "060d54709d583a48bfaa02613ae301bb11fc1299",
   "publishConfig": {
@@ -50,0 +51,0 @@ "access": "public"

src/themes/dark.theme.ts

@@ -1,36 +0,4 @@
-export interface DarkTheme {
-  textColor: {
-    DEFAULT: string;
-  };
-  lineHeight: {
-    body: string;
-    callout: string;
-    footnote: string;
-    caption1: string;
-    caption2: string;
-    headline: string;
-    largeTitle: string;
-    title1: string;
-    title2: string;
-    title3: string;
-    subHeadline: string;
-  };
-  fontSize: {
-    body: string;
-    callout: string;
-    footnote: string;
-    caption1: string;
-    caption2: string;
-    headline: string;
-    largeTitle: string;
-    title1: string;
-    title2: string;
-    title3: string;
-    subHeadline: string;
-  };
-  fontWeight: {};
-  colors: any;
-}
+import { ThemeType } from "./Theme.type";
 
-const darkTheme: DarkTheme = {
+const darkTheme: ThemeType = {
   // https://noahgilmore.com/blog/dark-mode-uicolor-compatibility/
@@ -158,2 +126,7 @@ textColor: {
     },
+    groupedBackground: {
+      primary: "#000000ff",
+      secondary: "#1c1c1eff",
+      tertiary: "#2c2c2eff",
+    },
     materials: {
@@ -167,7 +140,2 @@ background: {
     },
-    groupedBackground: {
-      primary: "#000000ff",
-      secondary: "#1c1c1eff",
-      tertiary: "#2c2c2eff",
-    },
     placeholderText: "#ebebf54c",
@@ -226,2 +194,2 @@ separator: "#54545899",
 
-export { darkTheme };
+export default darkTheme;

src/themes/light.theme.ts

@@ -1,42 +0,142 @@
-const lightTheme = {
-  // https://noahgilmore.com/blog/dark-mode-uicolor-compatibility/
+import { ThemeType } from "./Theme.type";
+
+const lightTheme: ThemeType = {
   textColor: {
-    DEFAULT: "black",
+    DEFAULT: "rgb(16,16,16)",
   },
-
+  lineHeight: {
+    body: "1.375",
+    callout: "1.375",
+    footnote: "1.125",
+    caption1: "1",
+    caption2: "1.1818",
+    headline: "1.2941",
+    largeTitle: "1.2058",
+    title1: "1.2142",
+    title2: "1.2727",
+    title3: "1.2",
+    subHeadline: "1.3333",
+  },
+  fontWeight: {},
+  fontSize: {
+    body: "1.0625rem",
+    callout: "1rem",
+    footnote: "0.8125rem",
+    caption1: "0.75rem",
+    caption2: "0.6875rem",
+    headline: "1.0625rem",
+    largeTitle: "2.125rem",
+    title1: "1.75rem",
+    title2: "1.375rem",
+    title3: "1.25rem",
+    subHeadline: "0.9375rem",
+  },
   colors: {
+    body: {
+      primary: "rgb(0, 0, 0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    callout: {
+      primary: "rgb(0, 0, 0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    footnote: {
+      primary: "rgb(0, 0, 0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    caption1: {
+      primary: "rgb(0, 0, 0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    caption2: {
+      primary: "rgb(0, 0, 0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    headline: {
+      primary: "rgb(0, 0, 0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    largeTitle: {
+      primary: "rgb(0, 0, 0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    title1: {
+      primary: "rgb(0,0,0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    title2: {
+      primary: "rgb(0,0,0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    title3: {
+      primary: "rgb(0,0,0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
+    subHeadline: {
+      primary: "rgb(0,0,0)",
+      secondary: "rgba(46, 46, 49, 60%)",
+      tertiary: "rgb(46, 46, 49, 30%)",
+      quaternary: "rgb(46, 46, 49, 16%)",
+    },
     label: {
-      primary: "#000000ff",
-      secondary: "#3c3c4399",
-      tertiary: "#3c3c434c",
-      quaternary: "#3c3c432d",
+      primary: "#ffffffff",
+      secondary: "#ebebf599",
+      tertiary: "#ebebf54c",
+      quaternary: "#ebebf52d",
     },
     fill: {
-      primary: "#78788033",
-      secondary: "#78788028",
-      tertiary: "#7676801e",
-      quaternary: "#74748014",
+      primary: "rgb(120, 120, 128, 36%)",
+      secondary: "rgb(120, 120, 128, 32%)",
+      tertiary: "rgb(118, 118, 128, 24%)",
+      quaternary: "rgb(116, 116, 128, 18%)",
     },
     background: {
-      primary: "#ffffffff",
-      secondary: "#f2f2f7ff",
-      tertiary: "#ffffffff",
+      base: {
+        primary: "rgb(251, 251, 253)",
+        secondary: "#dbdbea",
+        tertiary: "#d0d0d9",
+      },
+      elevated: {
+        primary: "rgb(251,251,252)",
+        secondary: "rgb(211,211,220)",
+        tertiary: "rgb(199,199,208)",
+      },
     },
     groupedBackground: {
-      grouped: "#f2f2f7ff",
-      secondary: "#ffffffff",
-      tertiary: "#f2f2f7ff",
+      primary: "#000000ff",
+      secondary: "#1c1c1eff",
+      tertiary: "#2c2c2eff",
     },
     materials: {
       background: {
-        regular: "rgba(255, 255, 255, 0.5)",
-        thin: "rgba(255, 255, 255, 0.45)",
-        ultraThin: "rgba(255, 255, 255, 0.15)",
-        thick: "rgba(255, 255, 255, 0.85)",
+        regular: "rgb(0, 0, 0, 41%)",
+        thin: "rgb(0, 0, 0, 26%)",
+        ultraThin: "rgb(0, 0, 0, 10%)",
+        thick: "rgb(0, 0, 0, 60%)",
       },
     },
-    placeholderText: "#3c3c434c",
-    separator: "#3c3c4349",
-    opaqueSeparator: "#c6c6c8ff",
-    link: "#007affff",
+    placeholderText: "#ebebf54c",
+    separator: "#54545899",
+    opaqueSeparator: "#38383aff",
+    link: "#0984ffff",
     darkText: "#000000ff",
@@ -46,43 +146,43 @@ lightText: "#ffffff99",
       1: "#8e8e93ff",
-      2: "#aeaeb2ff",
-      3: "#c7c7ccff",
-      4: "#d1d1d6ff",
-      5: "#e5e5eaff",
-      6: "#f2f2f7ff",
+      2: "#636366ff",
+      3: "#48484aff",
+      4: "#3a3a3cff",
+      5: "#2c2c2eff",
+      6: "#1c1c1eff",
     },
     red: {
-      1: `rgb(255, 59, 48)`,
+      1: `rgb(255, 69,58)`,
     },
     orange: {
-      1: `rgb(255, 149, 10)`,
+      1: `rgb(255, 159, 10)`,
     },
     yellow: {
-      1: `rgb(255, 204, 10)`,
+      1: `rgb(255, 214, 10)`,
     },
     green: {
-      1: `rgb(52, 199, 89)`,
+      1: `rgb(48, 209, 88)`,
     },
     mint: {
-      1: `rgb(0, 199, 190)`,
+      1: `rgb(102, 212, 207)`,
     },
     teal: {
-      1: `rgb(48, 176, 199)`,
+      1: `rgb(64, 200, 224)`,
     },
     cyan: {
-      1: `rgb(50, 173, 230)`,
+      1: `rgb(100, 210, 255)`,
     },
     blue: {
-      1: `rgb(0, 122, 255)`,
+      1: `rgb(10, 132, 255)`,
     },
     indigo: {
-      1: `rgb(88, 86, 214)`,
+      1: `rgb(94, 92, 230)`,
     },
     purple: {
-      1: `rgb(175, 82, 222)`,
+      1: `rgb(191, 90, 242)`,
     },
     pink: {
-      1: `rgb(255, 45, 85)`,
+      1: `rgb(255, 55, 95)`,
     },
     brown: {
-      1: `rgb(162, 132, 94)`,
+      1: `rgb(172, 142, 104)`,
     },
@@ -92,2 +192,2 @@ },
 
-export { lightTheme };
+export default lightTheme;

src/typography/body/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  font-size: ${fontSize<DarkTheme>("body")};
-  line-height: ${lineHeight<DarkTheme>("body")};
+  font-size: ${fontSize<ThemeType>("body")};
+  line-height: ${lineHeight<ThemeType>("body")};
 `;
@@ -22,3 +22,3 @@
 const bold = css`
-  font-weight: ${fontWeight<DarkTheme>("semiBold")};
+  font-weight: ${fontWeight<ThemeType>("semiBold")};
 `;
@@ -25,0 +25,0 @@

src/typography/callout/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  font-size: ${fontSize<DarkTheme>("callout")};
-  line-height: ${lineHeight<DarkTheme>("callout")};
+  font-size: ${fontSize<ThemeType>("callout")};
+  line-height: ${lineHeight<ThemeType>("callout")};
 `;
@@ -22,3 +22,3 @@
 const bold = css`
-  font-weight: ${fontWeight<DarkTheme>("semiBold")};
+  font-weight: ${fontWeight<ThemeType>("semiBold")};
 `;
@@ -25,0 +25,0 @@

src/typography/caption1/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  font-size: ${fontSize<DarkTheme>("caption1")};
-  line-height: ${lineHeight<DarkTheme>("caption1")};
+  font-size: ${fontSize<ThemeType>("caption1")};
+  line-height: ${lineHeight<ThemeType>("caption1")};
 `;
@@ -22,3 +22,3 @@
 const bold = css`
-  font-weight: ${fontWeight<DarkTheme>("medium")};
+  font-weight: ${fontWeight<ThemeType>("medium")};
 `;
@@ -25,0 +25,0 @@

src/typography/caption2/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  font-size: ${fontSize<DarkTheme>("caption2")};
-  line-height: ${lineHeight<DarkTheme>("caption2")};
+  font-size: ${fontSize<ThemeType>("caption2")};
+  line-height: ${lineHeight<ThemeType>("caption2")};
 `;
@@ -16,0 +16,0 @@

src/typography/footnote/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  font-size: ${fontSize<DarkTheme>("footnote")};
-  line-height: ${lineHeight<DarkTheme>("footnote")};
+  font-size: ${fontSize<ThemeType>("footnote")};
+  line-height: ${lineHeight<ThemeType>("footnote")};
 `;
@@ -22,3 +22,3 @@
 const bold = css`
-  font-weight: ${fontWeight<DarkTheme>("semiBold")};
+  font-weight: ${fontWeight<ThemeType>("semiBold")};
 `;
@@ -25,0 +25,0 @@

src/typography/headline/index.ts

@@ -8,7 +8,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  font-size: ${fontSize<DarkTheme>("headline")};
-  line-height: ${lineHeight<DarkTheme>("headline")};
+  font-size: ${fontSize<ThemeType>("headline")};
+  line-height: ${lineHeight<ThemeType>("headline")};
 `;
@@ -15,0 +15,0 @@

src/typography/subHeadline/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  font-size: ${fontSize<DarkTheme>("subHeadline")};
-  line-height: ${lineHeight<DarkTheme>("largeTitle")};
+  font-size: ${fontSize<ThemeType>("subHeadline")};
+  line-height: ${lineHeight<ThemeType>("largeTitle")};
 `;
@@ -16,0 +16,0 @@

src/typography/title1/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  line-height: ${lineHeight<DarkTheme>("title1")};
-  font-size: ${fontSize<DarkTheme>("title1")};
+  line-height: ${lineHeight<ThemeType>("title1")};
+  font-size: ${fontSize<ThemeType>("title1")};
 `;
@@ -16,0 +16,0 @@

src/typography/title2/index.ts

@@ -9,7 +9,7 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
 const font = css`
-  line-height: ${lineHeight<DarkTheme>("title2")};
-  font-size: ${fontSize<DarkTheme>("title2")};
+  line-height: ${lineHeight<ThemeType>("title2")};
+  font-size: ${fontSize<ThemeType>("title2")};
 `;
@@ -16,0 +16,0 @@

src/typography/title3/index.ts

@@ -10,3 +10,3 @@ import { css } from "styled-components";
 } from "@nightfall-ui/css";
-import { DarkTheme } from "../../themes/dark.theme";
+import { ThemeType } from "../../themes/Theme.type";
 
@@ -19,4 +19,4 @@ const title3RegularPrimaryCss = css`
 const font = css`
-  line-height: ${lineHeight<DarkTheme>("title3")};
-  font-size: ${fontSize<DarkTheme>("title3")};
+  line-height: ${lineHeight<ThemeType>("title3")};
+  font-size: ${fontSize<ThemeType>("title3")};
 `;
@@ -23,0 +23,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

183448

increased by7.95%

Number of package files

141

increased by6.02%

Lines of code

2761

increased by18.8%

No dependency changes