@occmundial/occ-atomic 1.39.1 → 1.40.0-beta.2

package/build/tokens/colors.json

@@ -0,0 +1,567 @@
+{
+  "bright-blue": {
+    "100": "#f7faff",
+    "200": "#e3efff",
+    "300": "#b9d7ff",
+    "400": "#90c0ff",
+    "500": "#64A7FF",
+    "600": "#3089FF",
+    "700": "#006EFF",
+    "800": "#0059CD",
+    "900": "#0047A5",
+    "1000": "#00357B"
+  },
+  "indigo": {
+    "100": "#F8FAFD",
+    "200": "#E9EEF8",
+    "300": "#CAD5EE",
+    "400": "#ABBDE4",
+    "500": "#8DA5DA",
+    "600": "#6B8ACE",
+    "700": "#486EC3",
+    "800": "#2E5ABB",
+    "900": "#083CAE",
+    "1000": "#06308A"
+  },
+  "blue-corp": {
+    "100": "#EDEDF1",
+    "200": "#D3D4DC",
+    "300": "#BBBCC8",
+    "400": "#A2A4B4",
+    "500": "#878A9F",
+    "600": "#6C6F89",
+    "700": "#5A5D7B",
+    "800": "#464A6B",
+    "900": "#31355A",
+    "1000": "#080D39"
+  },
+  "sky": {
+    "100": "#F9FAFD",
+    "200": "#E9EEF8",
+    "300": "#D8E0F2",
+    "400": "#CED8EF",
+    "500": "#C1CBE0",
+    "600": "#9EA5B6",
+    "700": "#858B99",
+    "800": "#6C717C",
+    "900": "#5B5F69",
+    "1000": "#494C53"
+  },
+  "cloud": {
+    "100": "#F8FAFD",
+    "200": "#E9EEF8",
+    "300": "#D0D5DE",
+    "400": "#B9BDC5",
+    "500": "#A2A5AC",
+    "600": "#888B91",
+    "700": "#6F7175",
+    "800": "#5E5F63",
+    "900": "#4B4C4F",
+    "1000": "#37383A"
+  },
+  "pink": {
+    "100": "#FDE9EE",
+    "200": "#FBC7D5",
+    "300": "#F9A5BB",
+    "400": "#F6809E",
+    "500": "#F34D78",
+    "600": "#F13465",
+    "700": "#D32E58",
+    "800": "#A32444",
+    "900": "#821C36",
+    "1000": "#6B172D"
+  },
+  "green": {
+    "100": "#F3FFD2",
+    "200": "#DDFE80",
+    "300": "#C0FE15",
+    "400": "#AAEE2F",
+    "500": "#96D425",
+    "600": "#7FAF27",
+    "700": "#688C25",
+    "800": "#536F1E",
+    "900": "#455D1A",
+    "1000": "#384915"
+  },
+  "alpha": {
+    "white": {
+      "5": "rgba(255,255,255,0.05)",
+      "10": "rgba(255,255,255,0.1)",
+      "20": "rgba(255,255,255,0.2)",
+      "30": "rgba(255,255,255,0.3)",
+      "40": "rgba(255,255,255,0.4)",
+      "50": "rgba(255,255,255,0.5)",
+      "60": "rgba(255,255,255,0.6)",
+      "70": "rgba(255,255,255,0.7)",
+      "80": "rgba(255,255,255,0.8)",
+      "90": "rgba(255,255,255,0.9)",
+      "100": "#fff"
+    },
+    "indigo": {
+      "5": "hsl(221 91.2% 35.7% / 0.05)",
+      "10": "hsl(221 91.2% 35.7% / 0.1)",
+      "20": "hsl(221 91.2% 35.7% / 0.2)",
+      "30": "hsl(221 91.2% 35.7% / 0.3)",
+      "40": "hsl(221 91.2% 35.7% / 0.4)",
+      "50": "hsl(221 91.2% 35.7% / 0.5)",
+      "60": "hsl(221 91.2% 35.7% / 0.6)",
+      "70": "hsl(221 91.2% 35.7% / 0.7)",
+      "80": "hsl(221 91.2% 35.7% / 0.8)",
+      "90": "hsl(221 91.2% 35.7% / 0.9)",
+      "100": "hsl(221 91.2% 35.7%)"
+    },
+    "pink": {
+      "5": "hsl(344 87.1% 57.5% / 0.05)",
+      "10": "hsl(344 87.1% 57.5% / 0.1)",
+      "20": "hsl(344 87.1% 57.5% / 0.2)",
+      "30": "hsl(344 87.1% 57.5% / 0.3)",
+      "40": "hsl(344 87.1% 57.5% / 0.4)",
+      "50": "hsl(344 87.1% 57.5% / 0.5)",
+      "60": "hsl(344 87.1% 57.5% / 0.6)",
+      "70": "hsl(344 87.1% 57.5% / 0.7)",
+      "80": "hsl(344 87.1% 57.5% / 0.8)",
+      "90": "hsl(344 87.1% 57.5% / 0.9)",
+      "100": "hsl(344 87.1% 57.5%)"
+    },
+    "corp": {
+      "5": "hsl(234 75.4% 12.7% / 0.05)",
+      "10": "hsl(234 75.4% 12.7% / 0.1)",
+      "20": "hsl(234 75.4% 12.7% / 0.2)",
+      "30": "hsl(234 75.4% 12.7% / 0.3)",
+      "40": "hsl(234 75.4% 12.7% / 0.4)",
+      "50": "hsl(234 75.4% 12.7% / 0.5)",
+      "60": "hsl(234 75.4% 12.7% / 0.6)",
+      "70": "hsl(234 75.4% 12.7% / 0.7)",
+      "80": "hsl(234 75.4% 12.7% / 0.8)",
+      "90": "hsl(234 75.4% 12.7% / 0.9)",
+      "100": "hsl(234 75.4% 12.7%)"
+    },
+    "black": {
+      "5": "rgba(0,0,0,0.05)",
+      "10": "rgba(0,0,0,0.1)",
+      "20": "rgba(0,0,0,0.2)",
+      "30": "rgba(0,0,0,0.3)",
+      "40": "rgba(0,0,0,0.4)",
+      "50": "rgba(0,0,0,0.5)",
+      "60": "rgba(0,0,0,0.6)",
+      "70": "rgba(0,0,0,0.7)",
+      "80": "rgba(0,0,0,0.8)",
+      "90": "rgba(0,0,0,0.9)",
+      "100": "#000"
+    }
+  },
+  "gold": {
+    "100": "#fff8e9",
+    "200": "#fff1d3",
+    "300": "#ffe3a7",
+    "400": "#ffd67c",
+    "500": "#ffc850",
+    "600": "#ffba24",
+    "700": "#cc951d",
+    "800": "#997016",
+    "900": "#664a0e",
+    "1000": "#332507"
+  },
+  "red": {
+    "100": "#fce8e8",
+    "200": "#FBDFDF",
+    "300": "#f6a6a6",
+    "400": "#f17979",
+    "500": "#ed4d4d",
+    "600": "#e82020",
+    "700": "#a51717",
+    "800": "#8b1313",
+    "900": "#610d0d",
+    "1000": "#2e0606"
+  },
+  "dark-green": {
+    "100": "#ebfbf1",
+    "200": "#d7f6e3",
+    "300": "#afedc7",
+    "400": "#88e5ab",
+    "500": "#60dc8f",
+    "600": "#38d373",
+    "700": "#2da95c",
+    "800": "#227f45",
+    "900": "#16542e",
+    "1000": "#0b2a17"
+  },
+  "button": {
+    "primary": {
+      "bg": {
+        "default": "#D32E58",
+        "hover": "#A32444",
+        "active": "#821C36",
+        "disabled": "#F6809E"
+      },
+      "border": {
+        "default": "rgba(255,255,255,0.2)"
+      }
+    },
+    "secondary": {
+      "bg": {
+        "default": "hsl(221 91.2% 35.7% / 0.05)",
+        "hover": "hsl(221 91.2% 35.7% / 0.1)",
+        "active": "hsl(221 91.2% 35.7% / 0.2)",
+        "disabled": "hsl(221 91.2% 35.7% / 0.1)",
+        "inverse": {
+          "default": "rgba(255,255,255,0.1)",
+          "hover": "rgba(255,255,255,0.2)",
+          "active": "rgba(255,255,255,0.3)",
+          "disabled": "rgba(255,255,255,0.05)"
+        }
+      }
+    },
+    "tertiary": {
+      "bg": {
+        "hover": "hsl(221 91.2% 35.7% / 0.05)",
+        "active": "hsl(221 91.2% 35.7% / 0.1)",
+        "inverse": {
+          "hover": "rgba(255,255,255,0.05)",
+          "active": "rgba(255,255,255,0.1)"
+        }
+      },
+      "border": {
+        "default": "#083CAE",
+        "disabled": "#8DA5DA",
+        "inverse": {
+          "default": "#fff",
+          "disabled": "rgba(255,255,255,0.2)"
+        }
+      }
+    },
+    "ghost": {
+      "bg": {
+        "hover": "hsl(234 75.4% 12.7% / 0.05)",
+        "active": "hsl(234 75.4% 12.7% / 0.1)",
+        "inverse": {
+          "hover": "rgba(255,255,255,0.05)",
+          "active": "rgba(255,255,255,0.1)"
+        }
+      }
+    }
+  },
+  "text-field": {
+    "border": {
+      "default": "#D3D4DC",
+      "hover": "#6C6F89",
+      "focus": "#0059CD",
+      "error": "#e82020"
+    },
+    "bg": {
+      "default": "#fff",
+      "disabled": "#EDEDF1"
+    }
+  },
+  "switch": {
+    "selected": {
+      "bg": {
+        "default": "#0059CD",
+        "hover": "#0047A5"
+      }
+    },
+    "bg": {
+      "disabled": "#EDEDF1",
+      "default": "#fff"
+    },
+    "border": {
+      "default": "rgba(255,255,255,0.2)",
+      "disabled": "#D3D4DC"
+    },
+    "unselected": {
+      "bg": {
+        "default": "#E9EEF8",
+        "hover": "#CAD5EE"
+      }
+    }
+  },
+  "radio": {
+    "selected": {
+      "bg": {
+        "default": "#0059CD",
+        "hover": "#0047A5",
+        "disabled": "#8DA5DA"
+      },
+      "border": {
+        "default": "#0059CD",
+        "hover": "#0047A5",
+        "disabled": "#8DA5DA"
+      }
+    },
+    "bg": {
+      "default": "#fff",
+      "disabled": "#EDEDF1"
+    },
+    "unselected": {
+      "border": {
+        "default": "#D3D4DC",
+        "hover": "#6C6F89"
+      }
+    }
+  },
+  "dropdown": {
+    "bg": {
+      "default": "#fff",
+      "hover": "hsl(221 91.2% 35.7% / 0.05)",
+      "active": "hsl(221 91.2% 35.7% / 0.1)"
+    }
+  },
+  "checkbox": {
+    "selected": {
+      "bg": {
+        "default": "#0059CD",
+        "hover": "#0047A5",
+        "disabled": "hsl(221 91.2% 35.7% / 0.1)"
+      },
+      "border": {
+        "default": "rgba(255,255,255,0.2)"
+      }
+    },
+    "unselected": {
+      "border": {
+        "default": "#D3D4DC",
+        "hover": "#6C6F89"
+      },
+      "bg": {
+        "default": "#fff",
+        "disabled": "#EDEDF1"
+      }
+    }
+  },
+  "alert": {
+    "warning": {
+      "bg": "#fff8e9",
+      "border": "#fff1d3"
+    },
+    "error": {
+      "bg": "#fce8e8",
+      "border": "#FBDFDF"
+    },
+    "success": {
+      "bg": "#ebfbf1",
+      "border": "#d7f6e3"
+    },
+    "info": {
+      "bg": "#f7faff",
+      "border": "#e3efff"
+    },
+    "neutral": {
+      "bg": "#000",
+      "border": "rgba(255,255,255,0.2)"
+    }
+  },
+  "slider": {
+    "track": {
+      "bg": {
+        "default": "#0059CD",
+        "hover": "#0047A5",
+        "disabled": "#8DA5DA"
+      }
+    },
+    "border": {
+      "default": "rgba(255,255,255,0.2)"
+    },
+    "bg": {
+      "disabled": "#EDEDF1"
+    }
+  },
+  "radio-card": {
+    "unselected": {
+      "bg": {
+        "default": "#fff",
+        "disabled": "#EDEDF1"
+      },
+      "border": {
+        "default": "#D3D4DC",
+        "hover": "#6C6F89"
+      }
+    },
+    "selected": {
+      "bg": {
+        "default": "#0059CD",
+        "hover": "#0047A5",
+        "disabled": "#8DA5DA"
+      },
+      "border": {
+        "default": "rgba(255,255,255,0.2)"
+      }
+    }
+  },
+  "tag": {
+    "success": {
+      "bg": "#ebfbf1",
+      "border": "#d7f6e3"
+    },
+    "error": {
+      "bg": "#fce8e8",
+      "border": "#FBDFDF"
+    },
+    "warning": {
+      "bg": "#fff8e9",
+      "border": "#fff1d3"
+    },
+    "info": {
+      "bg": "#f7faff",
+      "border": "#e3efff"
+    },
+    "featured": {
+      "border": "rgba(255,255,255,0.2)",
+      "bg": "#0059CD"
+    },
+    "promo": {
+      "bg": "#080D39",
+      "border": "rgba(255,255,255,0.2)"
+    }
+  },
+  "link": {
+    "warning": {
+      "bg": {
+        "hover": "hsl(41.1 100% 57.1% / 0.1)",
+        "active": "hsl(41.1 100% 57.1% / 0.2)"
+      }
+    },
+    "error": {
+      "bg": {
+        "hover": "hsl(0 81.3% 51.8% / 0.1)",
+        "active": "hsl(0 81.3% 51.8% / 0.2)"
+      }
+    },
+    "success": {
+      "bg": {
+        "hover": "hsl(143 63.8% 52.4% / 0.1)",
+        "active": "hsl(143 63.8% 52.4% / 0.2)"
+      }
+    },
+    "brand": {
+      "bg": {
+        "hover": "hsl(221 91.2% 35.7% / 0.1)",
+        "active": "hsl(221 91.2% 35.7% / 0.2)"
+      }
+    }
+  },
+  "bg": {
+    "action": {
+      "primary": {
+        "default": "#D32E58",
+        "hover": "#A32444",
+        "active": "#821C36",
+        "disabled": "#F6809E"
+      },
+      "secondary": {
+        "default": "hsl(221 91.2% 35.7% / 0.05)",
+        "hover": "hsl(221 91.2% 35.7% / 0.1)",
+        "active": "hsl(221 91.2% 35.7% / 0.2)",
+        "disabled": "hsl(221 91.2% 35.7% / 0.1)",
+        "inverse": {
+          "default": "rgba(255,255,255,0.1)",
+          "hover": "rgba(255,255,255,0.2)",
+          "active": "rgba(255,255,255,0.3)",
+          "disabled": "rgba(255,255,255,0.05)"
+        }
+      },
+      "tertiary": {
+        "hover": "hsl(221 91.2% 35.7% / 0.05)",
+        "active": "hsl(221 91.2% 35.7% / 0.1)",
+        "inverse": {
+          "hover": "rgba(255,255,255,0.05)",
+          "active": "rgba(255,255,255,0.1)"
+        }
+      },
+      "brand": {
+        "default": "#0059CD",
+        "hover": "#0047A5",
+        "disabled": "#8DA5DA",
+        "subtle": {
+          "default": "#E9EEF8",
+          "hover": "#CAD5EE"
+        }
+      },
+      "ghost": {
+        "hover": "hsl(234 75.4% 12.7% / 0.05)",
+        "active": "hsl(234 75.4% 12.7% / 0.1)"
+      }
+    },
+    "default": "#F8FAFD",
+    "surface": {
+      "default": "#fff",
+      "inverse": "#080D39"
+    },
+    "disabled": "#EDEDF1",
+    "warning": "#fff8e9",
+    "error": "#fce8e8",
+    "success": "#ebfbf1",
+    "info": "#f7faff",
+    "overlay": "rgba(0,0,0,0.8)",
+    "neutral": "#000"
+  },
+  "icon": {
+    "brand": {
+      "disabled": "#8DA5DA",
+      "default": "#083CAE",
+      "bold": "#006EFF"
+    },
+    "default": {
+      "bold": "#080D39",
+      "default": "#5A5D7B",
+      "disabled": "#D3D4DC"
+    },
+    "inverse": {
+      "default": "#fff",
+      "disabled": "rgba(255,255,255,0.3)"
+    },
+    "success": "#38d373",
+    "error": "#e82020",
+    "warning": "#ffba24"
+  },
+  "border": {
+    "inverse": {
+      "default": "#fff",
+      "subtle": "rgba(255,255,255,0.2)"
+    },
+    "default": {
+      "subtle": "#EDEDF1",
+      "default": "#D3D4DC",
+      "bold": "#6C6F89"
+    },
+    "brand": {
+      "subtle": "#8DA5DA",
+      "default": "#083CAE",
+      "bold": "#0059CD",
+      "bolder": "#0047A5"
+    },
+    "error": {
+      "default": "#e82020",
+      "subtle": "#FBDFDF"
+    },
+    "warning": {
+      "subtle": "#fff1d3"
+    },
+    "success": {
+      "subtle": "#d7f6e3"
+    },
+    "info": {
+      "subtle": "#e3efff"
+    }
+  },
+  "text": {
+    "corp": {
+      "primary": "#080D39",
+      "secondary": "#5A5D7B",
+      "disabled": "#878A9F"
+    },
+    "indigo": {
+      "primary": "#083CAE",
+      "secondary": "#486EC3"
+    },
+    "white": {
+      "primary": "#fff",
+      "secondary": "rgba(255,255,255,0.7)"
+    },
+    "pink": {
+      "primary": "#D32E58"
+    },
+    "warning": "#664a0e",
+    "error": "#8b1313",
+    "success": "#16542e"
+  }
+}

package/build/tokens/fonts.json

@@ -0,0 +1,30 @@
+{
+  "button-large": "400 18px/1.5 'OCC Text'",
+  "button-medium": "400 16px/1.5 'OCC Text'",
+  "button-small": "400 14px/1.5 'OCC Text'",
+  "text-field-label": "400 14px/1.5 'OCC Text'",
+  "text-field-placeholder": "400 16px/1.5 'OCC Text'",
+  "text-field-assistive-text": "400 14px/1.5 'OCC Text'",
+  "alert-default": "400 14px/1.5 'OCC Text'",
+  "alert-description": "300 14px/1.5 'OCC Text'",
+  "display-display-clean": "400 72px/1.1 'OCC Text'",
+  "heading-h1": "400 48px/1.1 'OCC Text'",
+  "heading-h2": "400 40px/1.1 'OCC Text'",
+  "heading-h3": "400 28px/1.1 'OCC Text'",
+  "heading-h4": "400 24px/1.1 'OCC Text'",
+  "heading-h5": "400 18px/1.1 'OCC Text'",
+  "heading-tag": "400 10px/1.5 'OCC Text'",
+  "body-x-large": "300 20px/1.5 'OCC Text'",
+  "body-large-strong": "400 18px/1.5 'OCC Text'",
+  "body-large": "300 18px/1.5 'OCC Text'",
+  "body-regular-strong": "400 16px/1.5 'OCC Text'",
+  "body-regular": "300 16px/1.5 'OCC Text'",
+  "body-small-strong": "400 14px/1.5 'OCC Text'",
+  "body-small": "300 14px/1.5 'OCC Text'",
+  "body-x-small": "300 12px/1.5 'OCC Text'",
+  "mobile-display-clean-m": "400 48px/1.1 'OCC Text'",
+  "mobile-h1-m": "400 32px/1.1 'OCC Text'",
+  "mobile-h2-m": "400 28px/1.1 'OCC Text'",
+  "mobile-h3-m": "400 24px/1.1 'OCC Text'",
+  "mobile-h4-m": "400 20px/1.1 'OCC Text'"
+}

package/build/tokens/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "colors", {
+  enumerable: true,
+  get: function get() {
+    return _colors["default"];
+  }
+});
+Object.defineProperty(exports, "fonts", {
+  enumerable: true,
+  get: function get() {
+    return _fonts["default"];
+  }
+});
+Object.defineProperty(exports, "borderRadius", {
+  enumerable: true,
+  get: function get() {
+    return _borderRadius["default"];
+  }
+});
+Object.defineProperty(exports, "shadows", {
+  enumerable: true,
+  get: function get() {
+    return _shadows["default"];
+  }
+});
+Object.defineProperty(exports, "spacing", {
+  enumerable: true,
+  get: function get() {
+    return _spacing["default"];
+  }
+});
+
+var _colors = _interopRequireDefault(require("./colors.json"));
+
+var _fonts = _interopRequireDefault(require("./fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("./borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("./shadows.json"));
+
+var _spacing = _interopRequireDefault(require("./spacing.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/build/tokens/shadows.json

@@ -0,0 +1,13 @@
+{
+  "focus-pink": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+  "focus-indigo": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+  "focus-bright-blue": "0 0 0 8px rgba(0,110,255,0.3)",
+  "focus-white": "0 0 0 8px rgba(255,255,255,0.2)",
+  "focus-sky": "0 0 0 8px rgba(206,216,240,0.4)",
+  "focus-corp": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+  "elevation-elevation-1": "0 1px 2px 0 rgba(8,13,57,0.12), 0 1px 6px 0 rgba(9,61,173,0.05)",
+  "elevation-elevation-2": "0 3px 3px -1px rgba(8,13,57,0.12), 0 3px 12px 0 rgba(9,61,173,0.08)",
+  "elevation-elevation-3": "0 4px 5px -3px rgba(8,13,56,0.12), 0 6px 18px 0 rgba(9,61,173,0.08)",
+  "elevation-elevation-4": "0 9px 12px -5px rgba(8,13,56,0.12), 0 10px 32px 0 rgba(9,61,173,0.12)",
+  "elevation-elevation-5": "0 17px 12px -7px rgba(8,13,56,0.12), 0 14px 46px 0 rgba(9,61,173,0.16)"
+}

package/build/tokens/spacing.json

@@ -0,0 +1,16 @@
+{
+  "base-value": "16px",
+  "size-0": "2px",
+  "size-1": "4px",
+  "size-2": "8px",
+  "size-3": "12px",
+  "size-4": "16px",
+  "size-5": "24px",
+  "size-6": "32px",
+  "size-7": "40px",
+  "size-8": "48px",
+  "size-9": "64px",
+  "size-10": "80px",
+  "size-11": "120px",
+  "size-12": "160px"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "1.39.1",
+  "version": "1.40.0-beta.2",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",
@@ -13,8 +13,8 @@
     "gen-docs:watch": "npm run gen-docs -- --watch",
     "test": "jest",
     "test:watch": "jest --watch",
-    "build": "babel lib -d build",
-    "build:watch": "babel lib -w -d build",
+    "build": "babel lib -d build --copy-files",
+    "build:watch": "babel lib -w -d build --copy-files",
     "build:bundle": "babel-node scripts/build.js",
     "lint": "esw webpack.config.* lib src --color",
     "lint:watch": "npm run lint -- --watch",