feat: add a touch variant

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - next
       - beta
 jobs:
   release:

.storybook/nds-theme/index.tsx

@@ -3,7 +3,7 @@ import addons from "@storybook/addons";
 import { select } from "@storybook/addon-knobs";
 import { NDSProvider } from "../../src";
 import { ALL_NDS_LOCALES } from "../../src/locales.const";
-import { desktopTheme as NDSTheme } from "../../src/theme";
+import { desktop as NDSTheme } from "../../src/theme";
 import { ComponentSize } from "../../src/NDSProvider/ComponentSizeContext";
 import { EVENTS } from "./register";
 

.storybook/nds-theme/register.js

@@ -6,7 +6,7 @@ import { AddonPanel } from "@storybook/components";
 import { useChannel, useAddonState } from "@storybook/api";
 import { STORY_CHANGED } from "@storybook/core-events";
 import { Box, Flex, NDSProvider, Heading3, Heading2 } from "../../src";
-import { desktopTheme as NDSTheme } from "../../src/theme";
+import { desktop as NDSTheme } from "../../src/theme";
 import ThemeKey from "./ThemeKey";
 import { ThemeInput, ThemeOption, ThemeSelect } from "./ThemeInput";
 import ThemeColorInput from "./ThemeColorInput";

.storybook/preview.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { create } from "@storybook/theming";
-import { desktopTheme as theme } from "../src/theme";
+import { desktop as theme } from "../src/theme";
 import StorybookNDSProvider from "./nds-theme";
 
 const newViewports = {

src/BrandedNavBar/NavBar.story.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
 import { Heading1 } from "../Type";
 import { Icon } from "../Icon";
 import { DropdownButton, DropdownLink } from "../DropdownMenu";
-import { desktopTheme as theme } from "../theme";
+import { desktop as theme } from "../theme";
 import { Button } from "../Button";
 import { Text } from "../Type";
 import { BrandedNavBar as NDSBrandedNavBar } from "./index";

src/BrandedNavBar/SmallNavBar.story.tsx

@@ -7,7 +7,7 @@ import { Link } from "../Link";
 import { Button, SmallNavBarProps } from "../index";
 import BrandLogoContainer from "./BrandLogoContainer";
 import { SmallNavBar } from "./index";
-import { desktopTheme as theme } from "../theme";
+import { desktop as theme } from "../theme";
 
 const ResetStorybookView = styled.div({
   position: "absolute",

src/Layout/Header.story.tsx

@@ -17,7 +17,7 @@ import SummaryItem from "../Summary/SummaryItem";
 import SummaryDivider from "../Summary/SummaryDivider";
 import DropdownMenu from "../DropdownMenu/DropdownMenu";
 import numberFromDimension from "../utils/numberFromDimension";
-import { desktopTheme as theme } from "../theme";
+import { desktop as theme } from "../theme";
 
 export const Default = () => (
   <Header

src/NDSProvider/NDSProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { ThemeProvider } from "styled-components";
 import { I18nextProvider } from "react-i18next";
-import { desktopTheme } from "../theme";
+import { desktop } from "../theme";
 import i18n from "../i18n";
 import { ThemeType, DefaultNDSThemeType, Breakpoints } from "../theme.type";
 import { LocaleContext } from "./LocaleContext";
@@ -59,7 +59,7 @@ const NDSProvider: React.FC<React.PropsWithChildren<NDSProviderProps>> = ({
     i18n.changeLanguage(locale);
   }, [locale]);
 
-  const mergedTheme = mergeThemes(desktopTheme, theme);
+  const mergedTheme = mergeThemes(desktop, theme);
   const themeWithBreakpoints = { ...mergedTheme, breakpoints: buildBreakPoints(mergedTheme.breakpoints) };
 
   return (

src/NDSProvider/mergeThemes.spec.tsx

@@ -1,5 +1,5 @@
 import { mergeThemes } from "./mergeThemes.util";
-import { desktopTheme as NDSTheme } from "../theme";
+import { desktop as NDSTheme } from "../theme";
 
 describe("mergedThemes", () => {
   it("returns the default nds theme if custom theme is undefined", () => {

src/NavBar/SmallNavBar.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { Branding } from "../Branding";
 import { Flex } from "../Flex";
-import { desktopTheme as theme } from "../theme";
+import { desktop as theme } from "../theme";
 import NavBarSearch from "../NavBarSearch/NavBarSearch";
 import { PreventBodyElementScrolling, withMenuState } from "../utils";
 import MobileMenu from "./MobileMenu";

src/Select/customReactSelectStyles.spec.tsx

@@ -1,4 +1,4 @@
-import { desktopTheme as theme } from "../theme";
+import { desktop as theme } from "../theme";
 import { getControlBorderRadius, getMenuBorderRadius, showIndicatorSeparator } from "./customReactSelectStyles";
 
 describe("custom react-select styles", () => {

src/Tokens/Tokens.story.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Text, Box, Flex, Heading3, DefaultNDSThemeType } from "..";
+import { Text, Box, Flex, Heading3 } from "..";
 import { useTheme } from "styled-components";
 
 export default {
@@ -151,13 +151,16 @@ export const Radii = () => {
 
 export const Breakpoints = () => {
   const theme = useTheme();
+
   return (
     <Box>
-      {Object.keys(theme.breakpoints).map((breakpoint) => (
-        <Text mb="x2">
-          {breakpoint}: {theme.breakpoints[breakpoint]}
-        </Text>
-      ))}
+      {Object.keys(theme.breakpoints)
+        .filter((bp) => bp !== "map")
+        .map((breakpoint) => (
+          <Text mb="x2">
+            {breakpoint}: {theme.breakpoints[breakpoint]}
+          </Text>
+        ))}
     </Box>
   );
 };

src/theme.ts

@@ -1,7 +1,9 @@
 import * as tokens from "@nulogy/tokens";
 import type { DefaultNDSThemeType } from "./theme.type";
 
-const desktopTheme: DefaultNDSThemeType = {
+type ThemeKey = "desktop" | "touch";
+
+const BASE_THEME = {
   colors: {
     black: tokens.color_base_black,
     blackBlue: tokens.color_base_black_blue,
@@ -41,6 +43,7 @@ const desktopTheme: DefaultNDSThemeType = {
   },
   lineHeights: {
     base: tokens.line_height_base,
+    relaxed: "1.66666667",
     smallTextBase: tokens.line_height_small_text_base,
     smallTextCompressed: tokens.line_height_small_text_compressed,
     smallerText: tokens.line_height_smaller_text,
@@ -97,6 +100,7 @@ const desktopTheme: DefaultNDSThemeType = {
     small: tokens.radius_border_small,
     medium: tokens.radius_border_medium,
     circle: tokens.radius_border_circle,
+    rounded: "9999px",
   },
   breakpoints: {
     extraSmall: tokens.size_breakpoint_extra_small,
@@ -119,67 +123,68 @@ const desktopTheme: DefaultNDSThemeType = {
   },
 };
 
-const touchTheme: DefaultNDSThemeType = {
-  ...desktopTheme,
-  fontSizes: {
-    smaller: "18px",
-    small: "21px",
-    medium: "24px",
-    large: "27px",
-    larger: "30px",
-    largest: "42px",
-    heading1: "30px",
-    heading2: "24px",
-    heading3: "21px",
-    heading4: "18px",
-  },
-  lineHeights: {
-    base: "1.33333333",
-    // relaxed: "1.66666667",
-    smallTextBase: "1.33333333",
-    smallTextCompressed: "1.33333333",
-    smallerText: "1.33333333",
-    heading1: "1.33333333",
-    heading2: "1.33333333",
-    heading3: "1.33333333",
-    heading4: "1.33333333",
-    title: "1.33333333",
-    sectionTitle: "1.33333333",
-    subsectionTitle: "1.33333333",
-  },
-  space: {
-    none: "0px",
-    half: "5.4px",
-    x1: "10.8px",
-    x2: "21.6px",
-    x3: "32.4px",
-    x4: "43.2px",
-    x5: "54px",
-    x6: "64.8px",
-    x8: "75.6px",
+const themes: Record<ThemeKey, DefaultNDSThemeType> = {
+  desktop: {
+    ...BASE_THEME,
+  },
+  touch: {
+    ...BASE_THEME,
+    fontSizes: {
+      smaller: "18px",
+      small: "21px",
+      medium: "24px",
+      large: "27px",
+      larger: "30px",
+      largest: "42px",
+      heading1: "30px",
+      heading2: "24px",
+      heading3: "21px",
+      heading4: "18px",
+    },
+    lineHeights: {
+      base: "1.33333333",
+      relaxed: "1.66666667",
+      smallTextBase: "1.33333333",
+      smallTextCompressed: "1.33333333",
+      smallerText: "1.33333333",
+      heading1: "1.33333333",
+      heading2: "1.33333333",
+      heading3: "1.33333333",
+      heading4: "1.33333333",
+      title: "1.33333333",
+      sectionTitle: "1.33333333",
+      subsectionTitle: "1.33333333",
+    },
+    space: {
+      none: "0px",
+      half: "5.4px",
+      x1: "10.8px",
+      x2: "21.6px",
+      x3: "32.4px",
+      x4: "43.2px",
+      x5: "54px",
+      x6: "64.8px",
+      x8: "75.6px",
+    },
+    sizes: {
+      none: "0px",
+      half: "5.4px",
+      x1: "10.8px",
+      x2: "21.6px",
+      x3: "32.4px",
+      x4: "43.2px",
+      x5: "54px",
+      x6: "64.8px",
+      x8: "75.6px",
+    },
+    radii: {
+      small: "2.7px",
+      medium: "5.4px",
+      circle: "50%",
+      rounded: "9999px",
+    },
   },
-  sizes: {
-    none: "0px",
-    half: "5.4px",
-    x1: "10.8px",
-    x2: "21.6px",
-    x3: "32.4px",
-    x4: "43.2px",
-    x5: "54px",
-    x6: "64.8px",
-    x8: "75.6px",
-  },
-  radii: {
-    small: "2.7px",
-    medium: "5.4px",
-    circle: "50%",
-    // rounded: "99999px",
-  },
-};
-
-const themePerSize = {
-  medium: desktopTheme,
-  large: touchTheme,
 };
 
-export { touchTheme, desktopTheme, themePerSize };
+export { themes };
+export const { desktop, touch } = themes;

src/theme.type.ts

@@ -1,3 +1,5 @@
+import { RecursivePartial } from "./utils/ts/recursivePartial";
+
 interface Colors {
   black: string;
   blackBlue: string;
@@ -41,6 +43,7 @@ interface LineHeights {
   base: string;
   smallTextBase: string;
   smallTextCompressed: string;
+  relaxed: string;
   smallerText: string;
   heading1: string;
   heading2: string;
@@ -90,6 +93,7 @@ interface Radii {
   small: string;
   medium: string;
   circle: string;
+  rounded: string;
 }
 
 export interface Breakpoints {
@@ -128,8 +132,4 @@ export interface DefaultNDSThemeType {
   zIndices: ZIndices;
 }
 
-type RecursivePartial<T> = {
-  [P in keyof T]?: RecursivePartial<T[P]>;
-};
-
 export type ThemeType = RecursivePartial<DefaultNDSThemeType>;