@operational/theme - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

lib/constants.d.ts

@@ -22,66 +22,79 @@ /**
 export declare type Grey = 96 | 93 | 91 | 75 | 56 | 45 | 40 | 33 | 24 | 20;
-export declare type HslValue = string;
-export interface OperationalBackgroundColors {
-    readonly dark: HslValue;
-    readonly light: HslValue;
-    readonly lighter: HslValue;
-}
-export interface OperationalSeparatorColors {
-    readonly default: HslValue;
-    readonly light: HslValue;
-}
-export interface OperationalTextColors {
-    readonly dark: HslValue;
-    readonly default: HslValue;
-    readonly light: HslValue;
-    readonly lighter: HslValue;
-    readonly lightest: HslValue;
-    readonly action: HslValue;
-}
-export interface OperationalBorderColors {
-    readonly default: HslValue;
-    readonly disabled: HslValue;
-}
-export interface OperationalColors {
-    readonly primary: HslValue;
-    readonly disabled: HslValue;
-    readonly success: HslValue;
-    readonly error: HslValue;
-    readonly basic: HslValue;
-    readonly ghost: HslValue;
-    readonly white: HslValue;
-    readonly black: HslValue;
-    readonly background: OperationalBackgroundColors;
-    readonly separators: OperationalSeparatorColors;
-    readonly text: OperationalTextColors;
-    readonly border: OperationalBorderColors;
-    readonly grey: (grey: Grey) => HslValue;
-}
-export interface OperationalFontFamily {
-    readonly main: string;
-    readonly code: string;
-}
-export interface OperationalFontSize {
-    readonly title: number;
-    readonly body: number;
-    readonly small: number;
-    readonly fineprint: number;
-}
-export interface OperationalFont {
-    readonly family: OperationalFontFamily;
-    readonly size: OperationalFontSize;
-}
-export interface OperationalSpace {
-    readonly base: number;
-    readonly small: number;
-    readonly content: number;
-    readonly element: number;
-    readonly big: number;
-}
-export interface OperationalStyleConstants {
-    readonly color: OperationalColors;
-    readonly font: OperationalFont;
-    readonly space: OperationalSpace;
-}
-declare const _default: OperationalStyleConstants;
-export default _default;
+declare const constants: {
+    font: {
+        family: {
+            main: string;
+            code: string;
+        };
+        size: {
+            /** 18px */
+            title: number;
+            /** 14px */
+            body: number;
+            /** 13px */
+            small: number;
+            /** 12px */
+            fineprint: number;
+        };
+    };
+    space: {
+        /** Base space is `4px` */
+        base: number;
+        /** Small space is `8px` */
+        small: number;
+        /** Content space is `16px` */
+        content: number;
+        /** Element space is `20px` */
+        element: number;
+        /** Big space is `28px` */
+        big: number;
+    };
+    zIndex: {
+        default: number;
+        selectOptions: number;
+        formFieldError: number;
+    };
+    color: {
+        /**
+         * Greys exist on a spectrum of 0-100.
+         *
+         * Current _official_ greys are:
+         * 96, 93, 56, 45, 40, 33, 24, 20
+         */
+        grey: (lightness: Grey) => string;
+        primary: string;
+        disabled: string;
+        success: string;
+        error: string;
+        basic: string;
+        ghost: string;
+        white: string;
+        black: string;
+        background: {
+            dark: string;
+            light: string;
+            lighter: string;
+        };
+        separators: {
+            default: string;
+            light: string;
+        };
+        text: {
+            dark: string;
+            default: string;
+            light: string;
+            lighter: string;
+            lightest: string;
+            action: string;
+            white: string;
+        };
+        border: {
+            default: string;
+            disabled: string;
+        };
+    };
+    borderRadius: number;
+    sidebarWidth: number;
+};
+export declare type OperationalStyleConstants = Readonly<typeof constants>;
+export default constants;

lib/constants.js

@@ -18,40 +18,13 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const makeConstants = () => ({
-    font,
-    space,
-    color: Object.assign({}, colors, { background: backgroundColors, separators: separatorColors, text: textColors, border: borderColors }),
-});
+// These constants are shared across many object definitions.
+const grey = (lightness) => `hsl(0, 0%, ${lightness}%)`;
+const primaryColor = "hsl(197, 82%, 44%)";
+const whiteColor = "hsl(0, 0%, 100%)";
 /**
- * A collection of colors used throughout the library.
- * We've chosen HSL syntax for color descriptions because they
- * allow for fine tuning and allow a more transparent way to
- * observe color variation, verbosely describing the hue,
- * saturation, and lightness of a color.
- *
- * hsla is used where alpha blending is involved.
- */
-const colors = {
-    primary: "hsl(197, 82%, 44%)",
-    disabled: "hsl(0, 0%, 96%)",
-    success: "hsl(127, 86%, 36%)",
-    error: "hsl(0, 100%, 30%)",
-    basic: "hsl(0, 0%, 39%)",
-    ghost: "hsla(0, 0%, 100%, 0.2)",
-    white: "hsl(0, 0%, 100%)",
-    black: "hsl(0, 0%, 0%)",
-    /**
-     * Greys exist on a spectrum of 0-100.
-     *
-     * Current _official_ greys are:
-     * 96, 93, 56, 45, 40, 33, 24, 20
-     */
-    grey: (lightness) => `hsl(0, 0%, ${lightness}%)`,
-};
-/**
  * A specialized color palette for backgrounds.
  */
 const backgroundColors = {
-    dark: colors.grey(24),
-    light: colors.grey(93),
-    lighter: colors.grey(96),
+    dark: grey(24),
+    light: grey(93),
+    lighter: grey(96),
 };
@@ -62,4 +35,4 @@ /**
 const separatorColors = {
-    default: colors.grey(91),
-    light: colors.grey(93),
+    default: grey(91),
+    light: grey(93),
 };
@@ -70,8 +43,9 @@ /**
 const textColors = {
-    dark: colors.grey(20),
-    default: colors.grey(33),
-    light: colors.grey(40),
-    lighter: colors.grey(45),
-    lightest: colors.grey(56),
-    action: colors.primary,
+    dark: grey(20),
+    default: grey(33),
+    light: grey(40),
+    lighter: grey(45),
+    lightest: grey(56),
+    action: primaryColor,
+    white: whiteColor,
 };
@@ -82,6 +56,36 @@ /**
 const borderColors = {
-    default: colors.grey(75),
-    disabled: colors.grey(91),
+    default: grey(75),
+    disabled: grey(91),
 };
 /**
+ * A collection of colors used throughout the library.
+ * We've chosen HSL syntax for color descriptions because they
+ * allow for fine tuning and allow a more transparent way to
+ * observe color variation, verbosely describing the hue,
+ * saturation, and lightness of a color.
+ *
+ * hsla is used where alpha blending is involved.
+ */
+const color = {
+    /**
+     * Greys exist on a spectrum of 0-100.
+     *
+     * Current _official_ greys are:
+     * 96, 93, 56, 45, 40, 33, 24, 20
+     */
+    grey,
+    primary: primaryColor,
+    disabled: "hsl(0, 0%, 96%)",
+    success: "hsl(127, 86%, 36%)",
+    error: "hsl(0, 100%, 30%)",
+    basic: "hsl(0, 0%, 39%)",
+    ghost: "hsla(0, 0%, 100%, 0.2)",
+    white: whiteColor,
+    black: "hsl(0, 0%, 0%)",
+    background: backgroundColors,
+    separators: separatorColors,
+    text: textColors,
+    border: borderColors,
+};
+/**
  * Font definitions and sizes available for use
@@ -96,5 +100,9 @@ * throughout Operational UI.
     size: {
+        /** 18px */
         title: 18,
+        /** 14px */
         body: 14,
+        /** 13px */
         small: 13,
+        /** 12px */
         fineprint: 12,
@@ -108,9 +116,30 @@ },
 const space = {
+    /** Base space is `4px` */
     base: 4,
+    /** Small space is `8px` */
     small: 8,
+    /** Content space is `16px` */
     content: 16,
+    /** Element space is `20px` */
     element: 20,
+    /** Big space is `28px` */
     big: 28,
 };
-exports.default = makeConstants();
+/**
+ * One zIndex to rule them all
+ */
+const zIndex = {
+    default: 0,
+    selectOptions: 300,
+    formFieldError: 299,
+};
+const constants = {
+    font,
+    space,
+    zIndex,
+    color,
+    borderRadius: 2,
+    sidebarWidth: 256,
+};
+exports.default = constants;
 //# sourceMappingURL=constants.js.map

lib/utils.js

@@ -7,2 +7,6 @@ "use strict";
  */
+/*
+ * This version is for use with the old theme, and is deprecated in favour of the version
+ * in @operational/utils which can be used for components that use OperationalStyleConstants rather than Theme
+ */
 exports.expandColor = (theme, color) => {
@@ -9,0 +13,0 @@ if (!color) {

package.json

 {
   "name": "@operational/theme",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Customization theme for the Operational UI packages.",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

src/constants.ts

@@ -34,88 +34,45 @@ /**
 
-export type HslValue = string
+// These constants are shared across many object definitions.
+const grey = (lightness: Grey) => `hsl(0, 0%, ${lightness}%)`
+const primaryColor = "hsl(197, 82%, 44%)"
+const whiteColor = "hsl(0, 0%, 100%)"
 
-export interface OperationalBackgroundColors {
-  readonly dark: HslValue
-  readonly light: HslValue
-  readonly lighter: HslValue
+/**
+ * A specialized color palette for backgrounds.
+ */
+const backgroundColors = {
+  dark: grey(24),
+  light: grey(93),
+  lighter: grey(96),
 }
 
-export interface OperationalSeparatorColors {
-  readonly default: HslValue
-  readonly light: HslValue
+/**
+ * A specialized color palette for separators.
+ */
+const separatorColors = {
+  default: grey(91),
+  light: grey(93),
 }
 
-export interface OperationalTextColors {
-  readonly dark: HslValue
-  readonly default: HslValue
-  readonly light: HslValue
-  readonly lighter: HslValue
-  readonly lightest: HslValue
-  readonly action: HslValue
+/**
+ * A specialized color palette for typography.
+ */
+const textColors = {
+  dark: grey(20),
+  default: grey(33),
+  light: grey(40),
+  lighter: grey(45),
+  lightest: grey(56),
+  action: primaryColor,
+  white: whiteColor,
 }
 
-export interface OperationalBorderColors {
-  readonly default: HslValue
-  readonly disabled: HslValue
+/**
+ * A specialized color palette for borders.
+ */
+const borderColors = {
+  default: grey(75),
+  disabled: grey(91),
 }
 
-export interface OperationalColors {
-  readonly primary: HslValue
-  readonly disabled: HslValue
-  readonly success: HslValue
-  readonly error: HslValue
-  readonly basic: HslValue
-  readonly ghost: HslValue
-  readonly white: HslValue
-  readonly black: HslValue
-  readonly background: OperationalBackgroundColors
-  readonly separators: OperationalSeparatorColors
-  readonly text: OperationalTextColors
-  readonly border: OperationalBorderColors
-  readonly grey: (grey: Grey) => HslValue
-}
-
-export interface OperationalFontFamily {
-  readonly main: string
-  readonly code: string
-}
-
-export interface OperationalFontSize {
-  readonly title: number
-  readonly body: number
-  readonly small: number
-  readonly fineprint: number
-}
-
-export interface OperationalFont {
-  readonly family: OperationalFontFamily
-  readonly size: OperationalFontSize
-}
-
-export interface OperationalSpace {
-  readonly base: number
-  readonly small: number
-  readonly content: number
-  readonly element: number
-  readonly big: number
-}
-
-export interface OperationalStyleConstants {
-  readonly color: OperationalColors
-  readonly font: OperationalFont
-  readonly space: OperationalSpace
-}
-
-const makeConstants = (): OperationalStyleConstants => ({
-  font,
-  space,
-  color: {
-    ...colors,
-    background: backgroundColors,
-    separators: separatorColors,
-    text: textColors,
-    border: borderColors,
-  },
-})
-
 /**
@@ -130,4 +87,11 @@ * A collection of colors used throughout the library.
  */
-const colors = {
-  primary: "hsl(197, 82%, 44%)",
+const color = {
+  /**
+   * Greys exist on a spectrum of 0-100.
+   *
+   * Current _official_ greys are:
+   * 96, 93, 56, 45, 40, 33, 24, 20
+   */
+  grey,
+  primary: primaryColor,
   disabled: "hsl(0, 0%, 96%)",
@@ -138,55 +102,15 @@ success: "hsl(127, 86%, 36%)",
   ghost: "hsla(0, 0%, 100%, 0.2)",
-  white: "hsl(0, 0%, 100%)",
+  white: whiteColor,
   black: "hsl(0, 0%, 0%)",
-  /**
-   * Greys exist on a spectrum of 0-100.
-   *
-   * Current _official_ greys are:
-   * 96, 93, 56, 45, 40, 33, 24, 20
-   */
-  grey: (lightness: Grey) => `hsl(0, 0%, ${lightness}%)`,
+  background: backgroundColors,
+  separators: separatorColors,
+  text: textColors,
+  border: borderColors,
 }
 
 /**
- * A specialized color palette for backgrounds.
- */
-const backgroundColors: OperationalBackgroundColors = {
-  dark: colors.grey(24),
-  light: colors.grey(93),
-  lighter: colors.grey(96),
-}
-
-/**
- * A specialized color palette for separators.
- */
-const separatorColors: OperationalSeparatorColors = {
-  default: colors.grey(91),
-  light: colors.grey(93),
-}
-
-/**
- * A specialized color palette for typography.
- */
-const textColors: OperationalTextColors = {
-  dark: colors.grey(20),
-  default: colors.grey(33),
-  light: colors.grey(40),
-  lighter: colors.grey(45),
-  lightest: colors.grey(56),
-  action: colors.primary,
-}
-
-/**
- * A specialized color palette for borders.
- */
-const borderColors: OperationalBorderColors = {
-  default: colors.grey(75),
-  disabled: colors.grey(91),
-}
-
-/**
  * Font definitions and sizes available for use
  * throughout Operational UI.
  */
-const font: OperationalFont = {
+const font = {
   family: {
@@ -197,5 +121,12 @@ main: "'Helvetica Neue', Helvetica, Arial, sans-serif",
   size: {
+    /** 18px */
     title: 18,
+
+    /** 14px */
     body: 14,
+
+    /** 13px */
     small: 13,
+
+    /** 12px */
     fineprint: 12,
@@ -209,10 +140,39 @@ },
  */
-const space: OperationalSpace = {
+const space = {
+  /** Base space is `4px` */
   base: 4,
+
+  /** Small space is `8px` */
   small: 8,
+
+  /** Content space is `16px` */
   content: 16,
+
+  /** Element space is `20px` */
   element: 20,
+
+  /** Big space is `28px` */
   big: 28,
 }
 
-export default makeConstants()
+/**
+ * One zIndex to rule them all
+ */
+const zIndex = {
+  default: 0,
+  selectOptions: 300,
+  formFieldError: 299,
+}
+
+const constants = {
+  font,
+  space,
+  zIndex,
+  color,
+  borderRadius: 2,
+  sidebarWidth: 256,
+}
+
+export type OperationalStyleConstants = Readonly<typeof constants>
+
+export default constants

src/utils.ts

@@ -7,2 +7,6 @@ import { Theme } from "./index"
  */
+/*
+ * This version is for use with the old theme, and is deprecated in favour of the version
+ * in @operational/utils which can be used for components that use OperationalStyleConstants rather than Theme
+ */
 export const expandColor = (theme: Theme, color?: string): string | null => {
@@ -9,0 +13,0 @@ if (!color) {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

794

increased by1.4%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

27970

decreased by-1.43%

No dependency changes