@planningcenter/tapestry-react 2.9.1 → 2.9.2

package/dist/cjs/TimeField/TimeField.js

@@ -188,8 +188,13 @@ var TimeField = function TimeField(_ref) {
         setHours(updatedHoursValue);
         setHoursDisplay(updatedHoursValue);
       } else {
-        setHours(updatedHoursValue + 12);
-        setHoursDisplay(updatedHoursValue);
+        if (updatedHoursValue === 12) {
+          setHours(12);
+          setHoursDisplay(12);
+        } else {
+          setHours(updatedHoursValue + 12);
+          setHoursDisplay(updatedHoursValue);
+        }
       }
     } else {
       setHours(updatedHoursValue);

package/dist/cjs/system/button-themes.js

@@ -191,63 +191,63 @@ var buttonThemes = {
   },
   error: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'red-5',
+      color: 'white',
+      backgroundColor: 'error',
       hover: {
-        backgroundColor: 'red-4'
+        backgroundColor: 'error-dark'
       },
       active: {
-        backgroundColor: 'red-3'
+        backgroundColor: 'error-darker'
       }
     },
     outline: {
-      stroke: 'red-5',
-      color: 'red-5',
+      stroke: 'error',
+      color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     },
     naked: {
       color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     }
   },
   success: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'green-5',
+      color: 'white',
+      backgroundColor: 'success',
       hover: {
-        backgroundColor: 'green-4'
+        backgroundColor: 'success-dark'
       },
       active: {
-        backgroundColor: 'green-3'
+        backgroundColor: 'success-darker'
       }
     },
     outline: {
-      stroke: 'green-5',
-      color: 'green-5',
+      stroke: 'success',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     },
     naked: {
-      color: 'green',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     }
   },

package/dist/cjs/system/colors/utils.js

@@ -19,6 +19,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _polished = require("polished");
 
+var _utils = require("../../utils");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -101,7 +103,7 @@ function flattenPalette(palette) {
 
     var value = parsedPalette[key];
     var aliasValue = parsedPalette[value];
-    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? "var(--colors-" + value + ")" : value, _objectSpread5));
+    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? (0, _utils.getCSSProperty)('colors', value) : value, _objectSpread5));
   }, {});
 } // ported from ChromaJS
 // https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee

package/dist/esm/TimeField/TimeField.js

@@ -177,8 +177,13 @@ var TimeField = function TimeField(_ref) {
         setHours(updatedHoursValue);
         setHoursDisplay(updatedHoursValue);
       } else {
-        setHours(updatedHoursValue + 12);
-        setHoursDisplay(updatedHoursValue);
+        if (updatedHoursValue === 12) {
+          setHours(12);
+          setHoursDisplay(12);
+        } else {
+          setHours(updatedHoursValue + 12);
+          setHoursDisplay(updatedHoursValue);
+        }
       }
     } else {
       setHours(updatedHoursValue);

package/dist/esm/system/button-themes.js

@@ -187,63 +187,63 @@ export var buttonThemes = {
   },
   error: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'red-5',
+      color: 'white',
+      backgroundColor: 'error',
       hover: {
-        backgroundColor: 'red-4'
+        backgroundColor: 'error-dark'
       },
       active: {
-        backgroundColor: 'red-3'
+        backgroundColor: 'error-darker'
       }
     },
     outline: {
-      stroke: 'red-5',
-      color: 'red-5',
+      stroke: 'error',
+      color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     },
     naked: {
       color: 'error',
       hover: {
-        backgroundColor: 'red-0'
+        backgroundColor: 'error-lightest'
       },
       active: {
-        backgroundColor: 'red-1'
+        backgroundColor: 'error-lighter'
       }
     }
   },
   success: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'green-5',
+      color: 'white',
+      backgroundColor: 'success',
       hover: {
-        backgroundColor: 'green-4'
+        backgroundColor: 'success-dark'
       },
       active: {
-        backgroundColor: 'green-3'
+        backgroundColor: 'success-darker'
       }
     },
     outline: {
-      stroke: 'green-5',
-      color: 'green-5',
+      stroke: 'success',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     },
     naked: {
-      color: 'green',
+      color: 'success',
       hover: {
-        backgroundColor: 'green-0'
+        backgroundColor: 'success-lightest'
       },
       active: {
-        backgroundColor: 'green-1'
+        backgroundColor: 'success-lighter'
       }
     }
   },

package/dist/esm/system/colors/utils.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { darken, setLightness, parseToRgb, parseToHsl, rgba, mix, getLuminance, toColorString } from 'polished';
+import { getCSSProperty } from '../../utils';
 
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -81,7 +82,7 @@ export function flattenPalette(palette) {
 
     var value = parsedPalette[key];
     var aliasValue = parsedPalette[value];
-    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? "var(--colors-" + value + ")" : value, _objectSpread5));
+    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? getCSSProperty('colors', value) : value, _objectSpread5));
   }, {});
 } // ported from ChromaJS
 // https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Button/Button.mdx

@@ -10,6 +10,7 @@ isParent: true
 const themes = [
   { title: 'Default' },
   { title: 'Primary', theme: 'primary' },
+  { title: 'Success', theme: 'success' },
   { title: 'Warning', theme: 'warning' },
   { title: 'Error', theme: 'error' },
   { title: 'Info', theme: 'info' },

package/src/TimeField/TimeField.tsx

@@ -198,8 +198,13 @@ const TimeField = ({
         setHours(updatedHoursValue)
         setHoursDisplay(updatedHoursValue)
       } else {
-        setHours(updatedHoursValue + 12)
-        setHoursDisplay(updatedHoursValue)
+        if (updatedHoursValue === 12) {
+          setHours(12)
+          setHoursDisplay(12)
+        } else {
+          setHours(updatedHoursValue + 12)
+          setHoursDisplay(updatedHoursValue)
+        }
       }
     } else {
       setHours(updatedHoursValue)

package/src/system/button-themes.js

@@ -115,40 +115,40 @@ export const buttonThemes = {
   },
   error: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'red-5',
-      hover: { backgroundColor: 'red-4' },
-      active: { backgroundColor: 'red-3' },
+      color: 'white',
+      backgroundColor: 'error',
+      hover: { backgroundColor: 'error-dark' },
+      active: { backgroundColor: 'error-darker' },
     },
     outline: {
-      stroke: 'red-5',
-      color: 'red-5',
-      hover: { backgroundColor: 'red-0' },
-      active: { backgroundColor: 'red-1' },
+      stroke: 'error',
+      color: 'error',
+      hover: { backgroundColor: 'error-lightest' },
+      active: { backgroundColor: 'error-lighter' },
     },
     naked: {
       color: 'error',
-      hover: { backgroundColor: 'red-0' },
-      active: { backgroundColor: 'red-1' },
+      hover: { backgroundColor: 'error-lightest' },
+      active: { backgroundColor: 'error-lighter' },
     },
   },
   success: {
     fill: {
-      color: 'light-9',
-      backgroundColor: 'green-5',
-      hover: { backgroundColor: 'green-4' },
-      active: { backgroundColor: 'green-3' },
+      color: 'white',
+      backgroundColor: 'success',
+      hover: { backgroundColor: 'success-dark' },
+      active: { backgroundColor: 'success-darker' },
     },
     outline: {
-      stroke: 'green-5',
-      color: 'green-5',
-      hover: { backgroundColor: 'green-0' },
-      active: { backgroundColor: 'green-1' },
+      stroke: 'success',
+      color: 'success',
+      hover: { backgroundColor: 'success-lightest' },
+      active: { backgroundColor: 'success-lighter' },
     },
     naked: {
-      color: 'green',
-      hover: { backgroundColor: 'green-0' },
-      active: { backgroundColor: 'green-1' },
+      color: 'success',
+      hover: { backgroundColor: 'success-lightest' },
+      active: { backgroundColor: 'success-lighter' },
     },
   },
   info: {

package/src/system/colors/utils.js

@@ -8,6 +8,7 @@ import {
   getLuminance,
   toColorString,
 } from 'polished'
+import { getCSSProperty } from '../../utils'
 
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
@@ -91,7 +92,7 @@ export function flattenPalette(palette) {
     const aliasValue = parsedPalette[value]
     return {
       ...collection,
-      [key]: aliasValue ? `var(--colors-${value})` : value,
+      [key]: aliasValue ? getCSSProperty('colors', value) : value,
     }
   }, {})
 }