@leafygreen-ui/tokens - npm Package Compare versions

Comparing version 2.5.0 to 2.5.1

CHANGELOG.md

 # @leafygreen-ui/tokens
 
+## 2.5.1
+
+### Patch Changes
+
+- 5ee54143: Provides support for auto-complete by removing explicit type definitions and leveraging `as const`
+- e487fb24: Renames story files from `.story.tsx` to `.stories.tsx`
+
 ## 2.5.0
@@ -4,0 +11,0 @@

dist/color/color.d.ts

@@ -1,4 +0,293 @@
-import { Mode } from '../mode';
-import { MapVariantsToStates, Type } from './color.types';
-export declare const color: Record<Mode, Record<Type, MapVariantsToStates>>;
+export declare const color: {
+    readonly dark: {
+        background: {
+            primary: {
+                default: string;
+                hover: "#3D4F58";
+                focus: "#0C2657";
+            };
+            secondary: {
+                default: "#112733";
+                hover: "#3D4F58";
+                focus: "#0C2657";
+            };
+            inversePrimary: {
+                default: "#E8EDEB";
+                hover: "#F9FBFA";
+                focus: "#C3E7FE";
+            };
+            info: {
+                default: "#0C2657";
+                hover: "#0C2657";
+                focus: "#0C2657";
+            };
+            warning: {
+                default: "#4C2100";
+                hover: "#4C2100";
+                focus: "#4C2100";
+            };
+            success: {
+                default: "#023430";
+                hover: "#023430";
+                focus: "#023430";
+            };
+            error: {
+                default: "#5B0000";
+                hover: "#5B0000";
+                focus: "#5B0000";
+            };
+            disabled: {
+                default: "#3D4F58";
+                hover: "#3D4F58";
+                focus: "#3D4F58";
+            };
+        };
+        border: {
+            primary: {
+                default: "#889397";
+                hover: "#889397";
+                focus: "#0498EC";
+            };
+            secondary: {
+                default: "#3D4F58";
+                hover: "#3D4F58";
+                focus: "#0498EC";
+            };
+            success: {
+                default: "#00A35C";
+                hover: "#00A35C";
+                focus: "#0498EC";
+            };
+            error: {
+                default: "#FF6960";
+                hover: "#FF6960";
+                focus: "#0498EC";
+            };
+            disabled: {
+                default: "#3D4F58";
+                hover: "#3D4F58";
+                focus: "#3D4F58";
+            };
+        };
+        icon: {
+            primary: {
+                default: "#C1C7C6";
+                hover: "#F9FBFA";
+                focus: "#E1F7FF";
+            };
+            secondary: {
+                default: "#889397";
+                hover: "#F9FBFA";
+                focus: "#E1F7FF";
+            };
+            inversePrimary: {
+                default: string;
+                hover: string;
+                focus: "#083C90";
+            };
+            info: {
+                default: "#0498EC";
+                hover: "#0498EC";
+                focus: "#0498EC";
+            };
+            warning: {
+                default: "#FFC010";
+                hover: "#FFC010";
+                focus: "#FFC010";
+            };
+            success: {
+                default: "#00ED64";
+                hover: "#00ED64";
+                focus: "#00ED64";
+            };
+            error: {
+                default: "#FF6960";
+                hover: "#FF6960";
+                focus: "#FF6960";
+            };
+            disabled: {
+                default: "#5C6C75";
+                hover: "#5C6C75";
+                focus: "#5C6C75";
+            };
+        };
+        text: {
+            primary: {
+                default: "#E8EDEB";
+                hover: "#E8EDEB";
+                focus: "#E1F7FF";
+            };
+            secondary: {
+                default: "#C1C7C6";
+                hover: "#E8EDEB";
+                focus: "#E1F7FF";
+            };
+            inversePrimary: {
+                default: string;
+                hover: string;
+                focus: "#083C90";
+            };
+            inverseSecondary: {
+                default: "#3D4F58";
+                hover: string;
+                focus: "#083C90";
+            };
+            error: {
+                default: "#FF6960";
+                hover: "#FF6960";
+                focus: "#FF6960";
+            };
+            disabled: {
+                default: "#5C6C75";
+                hover: "#5C6C75";
+                focus: "#5C6C75";
+            };
+        };
+    };
+    readonly light: {
+        background: {
+            primary: {
+                default: string;
+                hover: "#E8EDEB";
+                focus: "#E1F7FF";
+            };
+            secondary: {
+                default: "#F9FBFA";
+                hover: "#E8EDEB";
+                focus: "#E1F7FF";
+            };
+            inversePrimary: {
+                default: string;
+                hover: "#1C2D38";
+                focus: "#083C90";
+            };
+            info: {
+                default: "#E1F7FF";
+                hover: "#E1F7FF";
+                focus: "#E1F7FF";
+            };
+            warning: {
+                default: "#FEF7DB";
+                hover: "#FEF7DB";
+                focus: "#FEF7DB";
+            };
+            success: {
+                default: "#E3FCF7";
+                hover: "#E3FCF7";
+                focus: "#E3FCF7";
+            };
+            error: {
+                default: "#FFEAE5";
+                hover: "#FFEAE5";
+                focus: "#FFEAE5";
+            };
+            disabled: {
+                default: "#E8EDEB";
+                hover: "#E8EDEB";
+                focus: "#E8EDEB";
+            };
+        };
+        border: {
+            primary: {
+                default: "#889397";
+                hover: "#889397";
+                focus: "#0498EC";
+            };
+            secondary: {
+                default: "#E8EDEB";
+                hover: "#E8EDEB";
+                focus: "#0498EC";
+            };
+            success: {
+                default: "#00A35C";
+                hover: "#00A35C";
+                focus: "#0498EC";
+            };
+            error: {
+                default: "#DB3030";
+                hover: "#DB3030";
+                focus: "#0498EC";
+            };
+            disabled: {
+                default: "#C1C7C6";
+                hover: "#C1C7C6";
+                focus: "#C1C7C6";
+            };
+        };
+        icon: {
+            primary: {
+                default: "#5C6C75";
+                hover: string;
+                focus: "#1254B7";
+            };
+            secondary: {
+                default: "#889397";
+                hover: string;
+                focus: "#1254B7";
+            };
+            inversePrimary: {
+                default: string;
+                hover: string;
+                focus: "#C3E7FE";
+            };
+            info: {
+                default: "#016BF8";
+                hover: "#016BF8";
+                focus: "#016BF8";
+            };
+            warning: {
+                default: "#944F01";
+                hover: "#944F01";
+                focus: "#944F01";
+            };
+            success: {
+                default: "#00A35C";
+                hover: "#00A35C";
+                focus: "#00A35C";
+            };
+            error: {
+                default: "#DB3030";
+                hover: "#DB3030";
+                focus: "#DB3030";
+            };
+            disabled: {
+                default: "#889397";
+                hover: "#889397";
+                focus: "#889397";
+            };
+        };
+        text: {
+            primary: {
+                default: string;
+                hover: string;
+                focus: "#1254B7";
+            };
+            secondary: {
+                default: "#5C6C75";
+                hover: string;
+                focus: "#1254B7";
+            };
+            inversePrimary: {
+                default: string;
+                hover: string;
+                focus: "#C3E7FE";
+            };
+            inverseSecondary: {
+                default: "#C1C7C6";
+                hover: string;
+                focus: "#C3E7FE";
+            };
+            error: {
+                default: "#DB3030";
+                hover: "#DB3030";
+                focus: "#DB3030";
+            };
+            disabled: {
+                default: "#889397";
+                hover: "#889397";
+                focus: "#889397";
+            };
+        };
+    };
+};
 //# sourceMappingURL=color.d.ts.map

dist/color/color.types.d.ts

@@ -27,7 +27,2 @@ declare const State: {
 export { State, Type, Variant };
-export declare type MapVariantsToStates = {
-    [k in Variant]?: {
-        [k in State]: string;
-    };
-};
 //# sourceMappingURL=color.types.d.ts.map

dist/color/darkModeColors.d.ts

@@ -1,4 +0,178 @@
-import { MapVariantsToStates, Type } from './color.types';
-export declare const darkModeTextColors: MapVariantsToStates;
-export declare const darkModeColors: Record<Type, MapVariantsToStates>;
+export declare const darkModeTextColors: {
+    primary: {
+        default: "#E8EDEB";
+        hover: "#E8EDEB";
+        focus: "#E1F7FF";
+    };
+    secondary: {
+        default: "#C1C7C6";
+        hover: "#E8EDEB";
+        focus: "#E1F7FF";
+    };
+    inversePrimary: {
+        default: string;
+        hover: string;
+        focus: "#083C90";
+    };
+    inverseSecondary: {
+        default: "#3D4F58";
+        hover: string;
+        focus: "#083C90";
+    };
+    error: {
+        default: "#FF6960";
+        hover: "#FF6960";
+        focus: "#FF6960";
+    };
+    disabled: {
+        default: "#5C6C75";
+        hover: "#5C6C75";
+        focus: "#5C6C75";
+    };
+};
+export declare const darkModeColors: {
+    background: {
+        primary: {
+            default: string;
+            hover: "#3D4F58";
+            focus: "#0C2657";
+        };
+        secondary: {
+            default: "#112733";
+            hover: "#3D4F58";
+            focus: "#0C2657";
+        };
+        inversePrimary: {
+            default: "#E8EDEB";
+            hover: "#F9FBFA";
+            focus: "#C3E7FE";
+        };
+        info: {
+            default: "#0C2657";
+            hover: "#0C2657";
+            focus: "#0C2657";
+        };
+        warning: {
+            default: "#4C2100";
+            hover: "#4C2100";
+            focus: "#4C2100";
+        };
+        success: {
+            default: "#023430";
+            hover: "#023430";
+            focus: "#023430";
+        };
+        error: {
+            default: "#5B0000";
+            hover: "#5B0000";
+            focus: "#5B0000";
+        };
+        disabled: {
+            default: "#3D4F58";
+            hover: "#3D4F58";
+            focus: "#3D4F58";
+        };
+    };
+    border: {
+        primary: {
+            default: "#889397";
+            hover: "#889397";
+            focus: "#0498EC";
+        };
+        secondary: {
+            default: "#3D4F58";
+            hover: "#3D4F58";
+            focus: "#0498EC";
+        };
+        success: {
+            default: "#00A35C";
+            hover: "#00A35C";
+            focus: "#0498EC";
+        };
+        error: {
+            default: "#FF6960";
+            hover: "#FF6960";
+            focus: "#0498EC";
+        };
+        disabled: {
+            default: "#3D4F58";
+            hover: "#3D4F58";
+            focus: "#3D4F58";
+        };
+    };
+    icon: {
+        primary: {
+            default: "#C1C7C6";
+            hover: "#F9FBFA";
+            focus: "#E1F7FF";
+        };
+        secondary: {
+            default: "#889397";
+            hover: "#F9FBFA";
+            focus: "#E1F7FF";
+        };
+        inversePrimary: {
+            default: string;
+            hover: string;
+            focus: "#083C90";
+        };
+        info: {
+            default: "#0498EC";
+            hover: "#0498EC";
+            focus: "#0498EC";
+        };
+        warning: {
+            default: "#FFC010";
+            hover: "#FFC010";
+            focus: "#FFC010";
+        };
+        success: {
+            default: "#00ED64";
+            hover: "#00ED64";
+            focus: "#00ED64";
+        };
+        error: {
+            default: "#FF6960";
+            hover: "#FF6960";
+            focus: "#FF6960";
+        };
+        disabled: {
+            default: "#5C6C75";
+            hover: "#5C6C75";
+            focus: "#5C6C75";
+        };
+    };
+    text: {
+        primary: {
+            default: "#E8EDEB";
+            hover: "#E8EDEB";
+            focus: "#E1F7FF";
+        };
+        secondary: {
+            default: "#C1C7C6";
+            hover: "#E8EDEB";
+            focus: "#E1F7FF";
+        };
+        inversePrimary: {
+            default: string;
+            hover: string;
+            focus: "#083C90";
+        };
+        inverseSecondary: {
+            default: "#3D4F58";
+            hover: string;
+            focus: "#083C90";
+        };
+        error: {
+            default: "#FF6960";
+            hover: "#FF6960";
+            focus: "#FF6960";
+        };
+        disabled: {
+            default: "#5C6C75";
+            hover: "#5C6C75";
+            focus: "#5C6C75";
+        };
+    };
+};
 //# sourceMappingURL=darkModeColors.d.ts.map

dist/color/lightModeColors.d.ts

@@ -1,4 +0,178 @@
-import { MapVariantsToStates, Type } from './color.types';
-export declare const lightModeTextColors: MapVariantsToStates;
-export declare const lightModeColors: Record<Type, MapVariantsToStates>;
+export declare const lightModeTextColors: {
+    primary: {
+        default: string;
+        hover: string;
+        focus: "#1254B7";
+    };
+    secondary: {
+        default: "#5C6C75";
+        hover: string;
+        focus: "#1254B7";
+    };
+    inversePrimary: {
+        default: string;
+        hover: string;
+        focus: "#C3E7FE";
+    };
+    inverseSecondary: {
+        default: "#C1C7C6";
+        hover: string;
+        focus: "#C3E7FE";
+    };
+    error: {
+        default: "#DB3030";
+        hover: "#DB3030";
+        focus: "#DB3030";
+    };
+    disabled: {
+        default: "#889397";
+        hover: "#889397";
+        focus: "#889397";
+    };
+};
+export declare const lightModeColors: {
+    background: {
+        primary: {
+            default: string;
+            hover: "#E8EDEB";
+            focus: "#E1F7FF";
+        };
+        secondary: {
+            default: "#F9FBFA";
+            hover: "#E8EDEB";
+            focus: "#E1F7FF";
+        };
+        inversePrimary: {
+            default: string;
+            hover: "#1C2D38";
+            focus: "#083C90";
+        };
+        info: {
+            default: "#E1F7FF";
+            hover: "#E1F7FF";
+            focus: "#E1F7FF";
+        };
+        warning: {
+            default: "#FEF7DB";
+            hover: "#FEF7DB";
+            focus: "#FEF7DB";
+        };
+        success: {
+            default: "#E3FCF7";
+            hover: "#E3FCF7";
+            focus: "#E3FCF7";
+        };
+        error: {
+            default: "#FFEAE5";
+            hover: "#FFEAE5";
+            focus: "#FFEAE5";
+        };
+        disabled: {
+            default: "#E8EDEB";
+            hover: "#E8EDEB";
+            focus: "#E8EDEB";
+        };
+    };
+    border: {
+        primary: {
+            default: "#889397";
+            hover: "#889397";
+            focus: "#0498EC";
+        };
+        secondary: {
+            default: "#E8EDEB";
+            hover: "#E8EDEB";
+            focus: "#0498EC";
+        };
+        success: {
+            default: "#00A35C";
+            hover: "#00A35C";
+            focus: "#0498EC";
+        };
+        error: {
+            default: "#DB3030";
+            hover: "#DB3030";
+            focus: "#0498EC";
+        };
+        disabled: {
+            default: "#C1C7C6";
+            hover: "#C1C7C6";
+            focus: "#C1C7C6";
+        };
+    };
+    icon: {
+        primary: {
+            default: "#5C6C75";
+            hover: string;
+            focus: "#1254B7";
+        };
+        secondary: {
+            default: "#889397";
+            hover: string;
+            focus: "#1254B7";
+        };
+        inversePrimary: {
+            default: string;
+            hover: string;
+            focus: "#C3E7FE";
+        };
+        info: {
+            default: "#016BF8";
+            hover: "#016BF8";
+            focus: "#016BF8";
+        };
+        warning: {
+            default: "#944F01";
+            hover: "#944F01";
+            focus: "#944F01";
+        };
+        success: {
+            default: "#00A35C";
+            hover: "#00A35C";
+            focus: "#00A35C";
+        };
+        error: {
+            default: "#DB3030";
+            hover: "#DB3030";
+            focus: "#DB3030";
+        };
+        disabled: {
+            default: "#889397";
+            hover: "#889397";
+            focus: "#889397";
+        };
+    };
+    text: {
+        primary: {
+            default: string;
+            hover: string;
+            focus: "#1254B7";
+        };
+        secondary: {
+            default: "#5C6C75";
+            hover: string;
+            focus: "#1254B7";
+        };
+        inversePrimary: {
+            default: string;
+            hover: string;
+            focus: "#C3E7FE";
+        };
+        inverseSecondary: {
+            default: "#C1C7C6";
+            hover: string;
+            focus: "#C3E7FE";
+        };
+        error: {
+            default: "#DB3030";
+            hover: "#DB3030";
+            focus: "#DB3030";
+        };
+        disabled: {
+            default: "#889397";
+            hover: "#889397";
+            focus: "#889397";
+        };
+    };
+};
 //# sourceMappingURL=lightModeColors.d.ts.map

package.json

 {
   "name": "@leafygreen-ui/tokens",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "leafyGreen UI Kit Tokens",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/color/color.ts

 import { Mode } from '../mode';
 
-import { MapVariantsToStates, Type } from './color.types';
 import { darkModeColors } from './darkModeColors';
 import { lightModeColors } from './lightModeColors';
 
-export const color: Record<Mode, Record<Type, MapVariantsToStates>> = {
+export const color = {
   [Mode.Dark]: darkModeColors,
   [Mode.Light]: lightModeColors,
 } as const;

src/color/color.types.ts

@@ -33,5 +33,1 @@ const State = {
 export { State, Type, Variant };
-
-export type MapVariantsToStates = {
-  [k in Variant]?: { [k in State]: string };
-};

src/color/darkModeColors.ts

 import { palette } from '@leafygreen-ui/palette';
 
-import { MapVariantsToStates, State, Type, Variant } from './color.types';
+import { State, Variant } from './color.types';
 
 const { black, blue, gray, green, red, white, yellow } = palette;
 
-const darkModeBackgroundColors: MapVariantsToStates = {
+const darkModeBackgroundColors = {
   [Variant.Primary]: {
@@ -50,3 +50,3 @@ [State.Default]: black,
 
-const darkModeBorderColors: MapVariantsToStates = {
+const darkModeBorderColors = {
   [Variant.Primary]: {
@@ -79,3 +79,3 @@ [State.Default]: gray.base,
 
-const darkModeIconColors: MapVariantsToStates = {
+const darkModeIconColors = {
   [Variant.Primary]: {
@@ -123,3 +123,3 @@ [State.Default]: gray.light1,
 
-export const darkModeTextColors: MapVariantsToStates = {
+export const darkModeTextColors = {
   [Variant.Primary]: {
@@ -157,3 +157,3 @@ [State.Default]: gray.light2,
 
-export const darkModeColors: Record<Type, MapVariantsToStates> = {
+export const darkModeColors = {
   background: darkModeBackgroundColors,
@@ -160,0 +160,0 @@ border: darkModeBorderColors,

src/color/lightModeColors.ts

 import { palette } from '@leafygreen-ui/palette';
 
-import { MapVariantsToStates, State, Type, Variant } from './color.types';
+import { State, Variant } from './color.types';
 
 const { black, blue, gray, green, red, white, yellow } = palette;
 
-const lightModeBackgroundColors: MapVariantsToStates = {
+const lightModeBackgroundColors = {
   [Variant.Primary]: {
@@ -50,3 +50,3 @@ [State.Default]: white,
 
-const lightModBorderColors: MapVariantsToStates = {
+const lightModBorderColors = {
   [Variant.Primary]: {
@@ -79,3 +79,3 @@ [State.Default]: gray.base,
 
-const lightModeIconColors: MapVariantsToStates = {
+const lightModeIconColors = {
   [Variant.Primary]: {
@@ -123,3 +123,3 @@ [State.Default]: gray.dark1,
 
-export const lightModeTextColors: MapVariantsToStates = {
+export const lightModeTextColors = {
   [Variant.Primary]: {
@@ -157,3 +157,3 @@ [State.Default]: black,
 
-export const lightModeColors: Record<Type, MapVariantsToStates> = {
+export const lightModeColors = {
   background: lightModeBackgroundColors,
@@ -160,0 +160,0 @@ border: lightModBorderColors,

tsconfig.json

@@ -16,3 +16,3 @@ {
   ],
-  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "exclude": ["**/*.spec.*", "**/*.stories.*"],
   "references": [
@@ -19,0 +19,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

125651

increased by12.98%

Lines of code

1658

increased by60.97%

No dependency changes