@vitality-ds/tokens - npm Package Compare versions

Comparing version 3.9.0-alpha.0 to 3.9.0-alpha.1

dist/Color/index.d.ts

@@ -5,3 +5,3 @@ import { ThemeColorPalette } from "./types";
 export declare const DarkThemeColors: ThemeColorPalette;
-export { default as colorUseCases } from "./helpers";
+export { colorUseCases, getColorScaleValueByUseCase, getColorScaleFromThemeObject, getUseCasesByStep, } from "./helpers";
 //# sourceMappingURL=index.d.ts.map

dist/Color/scales/dark/blue.d.ts

 import { ColorScale } from "../../types";
-declare const blue: ColorScale;
+declare const blue: ColorScale<"blue">;
 export default blue;
 //# sourceMappingURL=blue.d.ts.map

dist/Color/scales/dark/cyan.d.ts

 import { ColorScale } from "../../types";
-declare const cyan: ColorScale;
+declare const cyan: ColorScale<"cyan">;
 export default cyan;
 //# sourceMappingURL=cyan.d.ts.map

dist/Color/scales/dark/green.d.ts

 import { ColorScale } from "../../types";
-declare const green: ColorScale;
+declare const green: ColorScale<"green">;
 export default green;
 //# sourceMappingURL=green.d.ts.map

dist/Color/scales/dark/grey.d.ts

 import { ColorScale } from "../../types";
-declare const grey: ColorScale;
+declare const grey: ColorScale<"grey">;
 export default grey;
 //# sourceMappingURL=grey.d.ts.map

dist/Color/scales/dark/greyA.d.ts

 import { ColorScale } from "../../types";
-declare const greyA: ColorScale;
+declare const greyA: ColorScale<"greyA">;
 export default greyA;
 //# sourceMappingURL=greyA.d.ts.map

dist/Color/scales/dark/index.d.ts

@@ -1,10 +0,10 @@
-export { default as blueDark } from "./blue";
-export { default as cyanDark } from "./cyan";
-export { default as greenDark } from "./green";
-export { default as greyDark } from "./grey";
-export { default as greyDarkA } from "./greyA";
-export { default as orangeDark } from "./orange";
-export { default as pinkDark } from "./pink";
-export { default as redDark } from "./red";
-export { default as yellowDark } from "./yellow";
+export { default as blue } from "./blue";
+export { default as cyan } from "./cyan";
+export { default as green } from "./green";
+export { default as grey } from "./grey";
+export { default as greyA } from "./greyA";
+export { default as orange } from "./orange";
+export { default as pink } from "./pink";
+export { default as red } from "./red";
+export { default as yellow } from "./yellow";
 //# sourceMappingURL=index.d.ts.map

dist/Color/scales/dark/orange.d.ts

 import { ColorScale } from "../../types";
-declare const orange: ColorScale;
+declare const orange: ColorScale<"orange">;
 export default orange;
 //# sourceMappingURL=orange.d.ts.map

dist/Color/scales/dark/pink.d.ts

 import { ColorScale } from "../../types";
-declare const pink: ColorScale;
+declare const pink: ColorScale<"pink">;
 export default pink;
 //# sourceMappingURL=pink.d.ts.map

dist/Color/scales/dark/red.d.ts

 import { ColorScale } from "../../types";
-declare const red: ColorScale;
+declare const red: ColorScale<"red">;
 export default red;
 //# sourceMappingURL=red.d.ts.map

dist/Color/scales/dark/yellow.d.ts

 import { ColorScale } from "../../types";
-declare const yellow: ColorScale;
+declare const yellow: ColorScale<"yellow">;
 export default yellow;
 //# sourceMappingURL=yellow.d.ts.map

dist/Color/scales/light/blue.d.ts

 import { ColorScale } from "../../types";
-declare const blue: ColorScale;
+declare const blue: ColorScale<"blue">;
 export default blue;
 //# sourceMappingURL=blue.d.ts.map

dist/Color/scales/light/cyan.d.ts

 import { ColorScale } from "../../types";
-declare const cyan: ColorScale;
+declare const cyan: ColorScale<"cyan">;
 export default cyan;
 //# sourceMappingURL=cyan.d.ts.map

dist/Color/scales/light/green.d.ts

 import { ColorScale } from "../../types";
-declare const green: ColorScale;
+declare const green: ColorScale<"green">;
 export default green;
 //# sourceMappingURL=green.d.ts.map

dist/Color/scales/light/grey.d.ts

 import { ColorScale } from "../../types";
-declare const grey: ColorScale;
+declare const grey: ColorScale<"grey">;
 export default grey;
 //# sourceMappingURL=grey.d.ts.map

dist/Color/scales/light/greyA.d.ts

 import { ColorScale } from "../../types";
-declare const greyA: ColorScale;
+declare const greyA: ColorScale<"greyA">;
 export default greyA;
 //# sourceMappingURL=greyA.d.ts.map

dist/Color/scales/light/orange.d.ts

 import { ColorScale } from "../../types";
-declare const orange: ColorScale;
+declare const orange: ColorScale<"orange">;
 export default orange;
 //# sourceMappingURL=orange.d.ts.map

dist/Color/scales/light/pink.d.ts

 import { ColorScale } from "../../types";
-declare const pink: ColorScale;
+declare const pink: ColorScale<"pink">;
 export default pink;
 //# sourceMappingURL=pink.d.ts.map

dist/Color/scales/light/red.d.ts

 import { ColorScale } from "../../types";
-declare const red: ColorScale;
+declare const red: ColorScale<"red">;
 export default red;
 //# sourceMappingURL=red.d.ts.map

dist/Color/scales/light/yellow.d.ts

 import { ColorScale } from "../../types";
-declare const yellow: ColorScale;
+declare const yellow: ColorScale<"yellow">;
 export default yellow;
 //# sourceMappingURL=yellow.d.ts.map

dist/Color/types.d.ts

 import { HslaColor } from "colord";
 import { BaseToken } from "../types";
+import colorUseCases from "./helpers/constants";
 export declare type ColorValue = {
@@ -10,10 +11,14 @@ codeName: string;
 };
-export interface ColorToken extends BaseToken {
+export declare type ColorSteps = `${"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13"}`;
+export interface ColorToken<C extends BaseColors> extends Omit<BaseToken, "name"> {
+    name: ColorStep<C>;
     data: ColorValue;
 }
-export declare type ColorScale = {
-    [swatchName: string]: ColorToken;
+export declare type ColorModes = "light" | "dark";
+export declare type ColorStep<C extends BaseColors> = `${C}${ColorSteps}`;
+export declare type ColorScale<C extends BaseColors> = {
+    [swatchName in ColorStep<C>]?: ColorToken<C>;
 };
 export declare type Palette = {
-    [K in Scales]?: ColorScale;
+    [K in Scales]: ColorScale<K>;
 };
@@ -25,8 +30,38 @@ export interface ColorScalesType {
 export declare type ThemeColorPalette = {
-    [K in ThemeKeys]?: ColorScale;
+    [K in keyof ThemeColorMap]?: ColorScale<ThemeColorMap[K]>;
 };
-export declare type ThemeKeys = "neutral" | "neutralA" | "primary" | "accent" | "success" | "info" | "warning" | "critical";
-export declare type Scales = "blue" | "blueDark" | "cyan" | "cyanDark" | "green" | "greenDark" | "grey" | "greyDark" | "greyA" | "greyDarkA" | "orange" | "orangeDark" | "pink" | "pinkDark" | "red" | "redDark" | "yellow" | "yellowDark";
-export declare type ThemeColorPaletteKeys = keyof ThemeColorPalette;
-export declare type AllScales = Scales | keyof ThemeColorPalette;
+declare type ThemeColorMap = {
+    neutral: "grey";
+    neutralA: "greyA";
+    primary: "cyan";
+    accent: "pink";
+    success: "green";
+    info: "blue";
+    warning: "orange";
+    critical: "red";
+};
+export declare type ThemeKeys = keyof ThemeColorMap;
+export declare type BaseColors = "blue" | "cyan" | "green" | "grey" | "greyA" | "orange" | "pink" | "red" | "yellow";
+export declare type Scales = BaseColors;
+export declare type AllScales = Scales | ThemeKeys;
+declare type UseCases = {
+    backgrounds: keyof typeof colorUseCases.backgrounds;
+    borders: keyof typeof colorUseCases.borders;
+    text: keyof typeof colorUseCases.text;
+};
+/**
+ * Todo this type is not quite right. It technically resolves to a number, but it is not yet clear what we expect to be type checked here (number or key of available use cases)
+ */
+export declare type UseCaseValues = keyof UseCases["backgrounds" | "borders" | "text"];
+/**
+ * eg. $cyan1: "hsla(a,b,c)"
+ * eg. $cyan2: "hsla(x,y,z)"
+ */
+export declare type StitchesColorScale<C extends AllScales> = {
+    [K in `${C}${ColorSteps}`]?: string;
+};
+export declare type StitchesColorThemeObject = {
+    [K in `${ThemeKeys}${ColorSteps}`]: string;
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

dist/Elevation/index.d.ts

@@ -1,5 +0,3 @@
-import { ElevationToken } from "./types";
-export declare const Elevations: {
-    [x: string]: ElevationToken;
-};
+import { ElevationsType } from "./types";
+export declare const Elevations: ElevationsType;
 //# sourceMappingURL=index.d.ts.map

dist/Elevation/types.d.ts

@@ -21,3 +21,7 @@ /// <reference types="plugin-typings" />
 }
+declare type ElevationsKeys = "sm" | "md" | "lg";
+export declare type ElevationsType = {
+    [size in ElevationsKeys]: ElevationToken;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map

dist/Font/fontStyles.d.ts

@@ -1,2 +0,2 @@
-import { FontStyleToken } from "./types";
+import { FontStylesType } from "./types";
 export declare const CATEGORIES: {
@@ -6,6 +6,4 @@ DISPLAY: string;
 };
-declare const FontStyles: {
-    [styleName: string]: FontStyleToken;
-};
+declare const FontStyles: FontStylesType;
 export default FontStyles;
 //# sourceMappingURL=fontStyles.d.ts.map

dist/Font/types.d.ts

@@ -43,3 +43,7 @@ import { BaseToken } from "../types";
 }
+export declare type FontStyleKeys = "body" | "caption" | "pageTitle" | "sectionTitle" | "sectionSubtitle" | "button" | "textInput" | "display100" | "display200" | "display300" | "display400" | "display500" | "display600" | "display700" | "display800" | "display900";
+export declare type FontStylesType = {
+    [styleName in FontStyleKeys]: FontStyleToken;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map

dist/index.d.ts

 export { FontSizes, FontWeights, FontStyles, FontFamilies } from "./Font";
-export { ColorScales, ThemeColors, DarkThemeColors, colorUseCases, } from "./Color";
+export { ColorScales, ThemeColors, DarkThemeColors, colorUseCases, getColorScaleValueByUseCase, getColorScaleFromThemeObject, getUseCasesByStep, } from "./Color";
 export { Elevations } from "./Elevation";
 export { Radii } from "./Radii";
 export { Space } from "./Space";
+export { default as getTheme } from "./Theme";
 export { CATEGORIES } from "./Font/fontStyles";
@@ -7,0 +8,0 @@ export * from "./types";

dist/Radii/index.d.ts

@@ -1,5 +0,3 @@
-import { RadiusToken } from "./types";
-export declare const Radii: {
-    [x: string]: RadiusToken;
-};
+import { RadiiType } from "./types";
+export declare const Radii: RadiiType;
 //# sourceMappingURL=index.d.ts.map

dist/Radii/types.d.ts

@@ -7,2 +7,5 @@ import { BaseToken } from "../types";
 }
+export declare type RadiiType = {
+    [x in "default" | "large"]: RadiusToken;
+};
 //# sourceMappingURL=types.d.ts.map

dist/Space/index.d.ts

@@ -1,5 +0,3 @@
-import { SpaceKeys, SpaceToken } from "./types";
-export declare const Space: {
-    [K in SpaceKeys]: SpaceToken;
-};
+import { SpaceType } from "./types";
+export declare const Space: SpaceType;
 //# sourceMappingURL=index.d.ts.map

dist/Space/types.d.ts

@@ -8,2 +8,5 @@ import { BaseToken } from "../types";
 }
+export declare type SpaceType = {
+    [K in SpaceKeys]: SpaceToken;
+};
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@vitality-ds/tokens",
-  "version": "3.9.0-alpha.0",
+  "version": "3.9.0-alpha.1",
   "description": "Design Tokens for Vitality",
@@ -16,2 +16,3 @@ "main": "dist/index.js",
     "prepublishOnly": "npm run build",
+    "test": "jest",
     "clean": "rimraf -rf ./dist"
@@ -18,0 +19,0 @@ },

src/Color/index.ts

@@ -9,10 +9,10 @@ import ColorScales from "./scales";
 const {
-  blueDark,
-  greenDark,
-  orangeDark,
-  pinkDark,
-  redDark,
-  greyDark,
-  greyDarkA,
-  cyanDark,
+  blue: blueDark,
+  green: greenDark,
+  orange: orangeDark,
+  pink: pinkDark,
+  red: redDark,
+  grey: greyDark,
+  greyA: greyDarkA,
+  cyan: cyanDark,
 } = dark;
@@ -42,2 +42,7 @@
 
-export { default as colorUseCases } from "./helpers";
+export {
+  colorUseCases,
+  getColorScaleValueByUseCase,
+  getColorScaleFromThemeObject,
+  getUseCasesByStep,
+} from "./helpers";

src/Color/scales/dark/blue.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const blue: ColorScale = {
+const blue: ColorScale<"blue"> = {
   blue1: {
@@ -6,0 +6,0 @@ name: "blue1",

src/Color/scales/dark/cyan.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const cyan: ColorScale = {
+const cyan: ColorScale<"cyan"> = {
   cyan1: {
@@ -6,0 +6,0 @@ name: "cyan1",

src/Color/scales/dark/green.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const green: ColorScale = {
+const green: ColorScale<"green"> = {
   green1: {
@@ -6,0 +6,0 @@ name: "green1",

src/Color/scales/dark/grey.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const grey: ColorScale = {
+const grey: ColorScale<"grey"> = {
   grey1: {
@@ -6,0 +6,0 @@ name: "grey1",

src/Color/scales/dark/greyA.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const greyA: ColorScale = {
+const greyA: ColorScale<"greyA"> = {
   greyA1: {
@@ -6,0 +6,0 @@ name: "greyA1",

src/Color/scales/dark/index.ts

@@ -1,9 +0,9 @@
-export { default as blueDark } from "./blue";
-export { default as cyanDark } from "./cyan";
-export { default as greenDark } from "./green";
-export { default as greyDark } from "./grey";
-export { default as greyDarkA } from "./greyA";
-export { default as orangeDark } from "./orange";
-export { default as pinkDark } from "./pink";
-export { default as redDark } from "./red";
-export { default as yellowDark } from "./yellow";
+export { default as blue } from "./blue";
+export { default as cyan } from "./cyan";
+export { default as green } from "./green";
+export { default as grey } from "./grey";
+export { default as greyA } from "./greyA";
+export { default as orange } from "./orange";
+export { default as pink } from "./pink";
+export { default as red } from "./red";
+export { default as yellow } from "./yellow";

src/Color/scales/dark/orange.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const orange: ColorScale = {
+const orange: ColorScale<"orange"> = {
   orange1: {
@@ -6,0 +6,0 @@ name: "orange1",

src/Color/scales/dark/pink.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const pink: ColorScale = {
+const pink: ColorScale<"pink"> = {
   pink1: {
@@ -6,0 +6,0 @@ name: "pink1",

src/Color/scales/dark/red.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const red: ColorScale = {
+const red: ColorScale<"red"> = {
   red1: {
@@ -6,0 +6,0 @@ name: "red1",

src/Color/scales/dark/yellow.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const yellow: ColorScale = {
+const yellow: ColorScale<"yellow"> = {
   yellow1: {
@@ -6,0 +6,0 @@ name: "yellow1",

src/Color/scales/light/blue.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const blue: ColorScale = {
+const blue: ColorScale<"blue"> = {
   blue1: {
@@ -6,0 +6,0 @@ name: "blue1",

src/Color/scales/light/cyan.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const cyan: ColorScale = {
+const cyan: ColorScale<"cyan"> = {
   cyan1: {
@@ -6,0 +6,0 @@ name: "cyan1",

src/Color/scales/light/green.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const green: ColorScale = {
+const green: ColorScale<"green"> = {
   green1: {
@@ -6,0 +6,0 @@ name: "green1",

src/Color/scales/light/grey.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const grey: ColorScale = {
+const grey: ColorScale<"grey"> = {
   grey1: {
@@ -6,0 +6,0 @@ name: "grey1",

src/Color/scales/light/greyA.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const greyA: ColorScale = {
+const greyA: ColorScale<"greyA"> = {
   greyA1: {
@@ -6,0 +6,0 @@ name: "greyA1",

src/Color/scales/light/orange.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const orange: ColorScale = {
+const orange: ColorScale<"orange"> = {
   orange1: {
@@ -6,0 +6,0 @@ name: "orange1",

src/Color/scales/light/pink.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const pink: ColorScale = {
+const pink: ColorScale<"pink"> = {
   pink1: {
@@ -6,0 +6,0 @@ name: "pink1",

src/Color/scales/light/red.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const red: ColorScale = {
+const red: ColorScale<"red"> = {
   red1: {
@@ -6,0 +6,0 @@ name: "red1",

src/Color/scales/light/yellow.ts

@@ -1,5 +0,5 @@
-import generateColorData from "../../generateColorData";
+import generateColorData from "../../helpers/generateColorData";
 import { ColorScale } from "../../types";
 
-const yellow: ColorScale = {
+const yellow: ColorScale<"yellow"> = {
   yellow1: {
@@ -6,0 +6,0 @@ name: "yellow1",

src/Color/types.ts

 import { HslaColor } from "colord";
 
 import { BaseToken } from "../types";
+import colorUseCases from "./helpers/constants";
 
@@ -13,12 +14,33 @@ export type ColorValue = {
 
-export interface ColorToken extends BaseToken {
+export type ColorSteps = `${
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "10"
+  | "11"
+  | "12"
+  | "13"}`;
+export interface ColorToken<C extends BaseColors>
+  extends Omit<BaseToken, "name"> {
+  name: ColorStep<C>;
   data: ColorValue;
 }
 
-export type ColorScale = {
-  [swatchName: string]: ColorToken;
+// Todo export and replace where we had used it
+export type ColorModes = "light" | "dark";
+
+export type ColorStep<C extends BaseColors> = `${C}${ColorSteps}`;
+
+export type ColorScale<C extends BaseColors> = {
+  [swatchName in ColorStep<C>]?: ColorToken<C>;
 };
 
 export type Palette = {
-  [K in Scales]?: ColorScale;
+  [K in Scales]: ColorScale<K>;
 };
@@ -32,37 +54,55 @@
 export type ThemeColorPalette = {
-  [K in ThemeKeys]?: ColorScale;
+  [K in keyof ThemeColorMap]?: ColorScale<ThemeColorMap[K]>;
 };
 
-export type ThemeKeys =
-  | "neutral"
-  | "neutralA"
-  | "primary"
-  | "accent"
-  | "success"
-  | "info"
-  | "warning"
-  | "critical";
+type ThemeColorMap = {
+  neutral: "grey";
+  neutralA: "greyA";
+  primary: "cyan";
+  accent: "pink";
+  success: "green";
+  info: "blue";
+  warning: "orange";
+  critical: "red";
+};
 
-export type Scales =
+export type ThemeKeys = keyof ThemeColorMap;
+
+export type BaseColors =
   | "blue"
-  | "blueDark"
   | "cyan"
-  | "cyanDark"
   | "green"
-  | "greenDark"
   | "grey"
-  | "greyDark"
   | "greyA"
-  | "greyDarkA"
   | "orange"
-  | "orangeDark"
   | "pink"
-  | "pinkDark"
   | "red"
-  | "redDark"
-  | "yellow"
-  | "yellowDark";
+  | "yellow";
 
-export type ThemeColorPaletteKeys = keyof ThemeColorPalette;
+export type Scales = BaseColors;
 
-export type AllScales = Scales | keyof ThemeColorPalette;
+export type AllScales = Scales | ThemeKeys;
+
+type UseCases = {
+  backgrounds: keyof typeof colorUseCases.backgrounds;
+  borders: keyof typeof colorUseCases.borders;
+  text: keyof typeof colorUseCases.text;
+};
+
+/**
+ * Todo this type is not quite right. It technically resolves to a number, but it is not yet clear what we expect to be type checked here (number or key of available use cases)
+ */
+
+export type UseCaseValues = keyof UseCases["backgrounds" | "borders" | "text"];
+
+/**
+ * eg. $cyan1: "hsla(a,b,c)"
+ * eg. $cyan2: "hsla(x,y,z)"
+ */
+export type StitchesColorScale<C extends AllScales> = {
+  [K in `${C}${ColorSteps}`]?: string;
+};
+
+export type StitchesColorThemeObject = {
+  [K in `${ThemeKeys}${ColorSteps}`]: string;
+};

src/Elevation/index.ts

@@ -1,5 +0,5 @@
-import { ElevationToken } from "./types";
+import { ElevationsType } from "./types";
 
 // eslint-disable-next-line import/prefer-default-export
-export const Elevations: { [x: string]: ElevationToken } = {
+export const Elevations: ElevationsType = {
   sm: {
@@ -47,5 +47,5 @@ name: "Small",
       shadowOffset: { width: 0, height: 1 },
-      shadowRadius: 3,
-      shadowOpacity: 0.1,
-      shadowColor: "#000",
+      shadowRadius: 2,
+      shadowOpacity: 0.3,
+      shadowColor: "#003941",
     },
@@ -93,7 +93,7 @@ },
     dataRN: {
-      elevation: 2,
-      shadowOffset: { width: 0, height: 1 },
-      shadowRadius: 3,
-      shadowOpacity: 0.1,
-      shadowColor: "#000",
+      elevation: 4,
+      shadowOffset: { width: 0, height: 5 },
+      shadowRadius: 8,
+      shadowOpacity: 0.2,
+      shadowColor: "#003941",
     },
@@ -141,9 +141,9 @@ },
     dataRN: {
-      elevation: 2,
-      shadowOffset: { width: 0, height: 1 },
-      shadowRadius: 3,
-      shadowOpacity: 0.1,
-      shadowColor: "#000",
+      elevation: 6,
+      shadowOffset: { width: 0, height: 12 },
+      shadowRadius: 16,
+      shadowOpacity: 0.2,
+      shadowColor: "#003941",
     },
   },
 };

src/Elevation/types.ts

@@ -18,1 +18,3 @@ import { BaseToken } from "../types";
 }
+type ElevationsKeys = "sm" | "md" | "lg";
+export type ElevationsType = { [size in ElevationsKeys]: ElevationToken };

src/Font/fontStyles.ts

 import FontFamilies from "./fontFamilies";
 import FontSizes from "./fontSizes";
 import FontWeights from "./fontWeights";
-import { FontStyleToken } from "./types";
+import { FontStylesType } from "./types";
 
@@ -11,3 +11,3 @@ export const CATEGORIES = {
 
-const FontStyles: { [styleName: string]: FontStyleToken } = {
+const FontStyles: FontStylesType = {
   body: {
@@ -14,0 +14,0 @@ name: "Body",

src/Font/types.ts

@@ -54,1 +54,21 @@ import { BaseToken } from "../types";
 }
+
+export type FontStyleKeys =
+  | "body"
+  | "caption"
+  | "pageTitle"
+  | "sectionTitle"
+  | "sectionSubtitle"
+  | "button"
+  | "textInput"
+  | "display100"
+  | "display200"
+  | "display300"
+  | "display400"
+  | "display500"
+  | "display600"
+  | "display700"
+  | "display800"
+  | "display900";
+
+export type FontStylesType = { [styleName in FontStyleKeys]: FontStyleToken };

src/index.ts

@@ -8,2 +8,5 @@ // data objects
   colorUseCases,
+  getColorScaleValueByUseCase,
+  getColorScaleFromThemeObject,
+  getUseCasesByStep,
 } from "./Color";
@@ -13,2 +16,3 @@ export { Elevations } from "./Elevation";
 export { Space } from "./Space";
+export { default as getTheme } from "./Theme";
 export { CATEGORIES } from "./Font/fontStyles";
@@ -15,0 +19,0 @@

src/Radii/index.ts

@@ -1,5 +0,5 @@
-import { RadiusToken } from "./types";
+import { RadiiType } from "./types";
 
 // eslint-disable-next-line import/prefer-default-export
-export const Radii: { [x: string]: RadiusToken } = {
+export const Radii: RadiiType = {
   default: {
@@ -6,0 +6,0 @@ name: "default",

src/Radii/types.ts

@@ -8,1 +8,3 @@ import { BaseToken } from "../types";
 }
+
+export type RadiiType = { [x in "default" | "large"]: RadiusToken };

src/Space/index.ts

@@ -1,5 +0,5 @@
-import { SpaceKeys, SpaceToken } from "./types";
+import { SpaceType } from "./types";
 
 // eslint-disable-next-line import/prefer-default-export
-export const Space: { [K in SpaceKeys]: SpaceToken } = {
+export const Space: SpaceType = {
   xs: {
@@ -6,0 +6,0 @@ name: "xs",

src/Space/types.ts

@@ -9,1 +9,3 @@ import { BaseToken } from "../types";
 }
+
+export type SpaceType = { [K in SpaceKeys]: SpaceToken };

tsconfig.json

@@ -7,3 +7,3 @@ {
     "module": "commonjs",
-    "noImplicitAny": true,
+    // "noImplicitAny": true,
     "noImplicitReturns": true,
@@ -14,3 +14,3 @@ "noUnusedLocals": true,
     "sourceMap": true,
-    "strict": true,
+    // "strict": true,
     "strictNullChecks": true
@@ -17,0 +17,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

482773

increased by37.05%

Number of package files

225

increased by84.43%

Lines of code

6768

increased by47.32%

No dependency changes