@airtable/blocks 0.0.0-experimental-20e3506bd-20250428

package/dist/cjs/interface/ui/use_base.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBase = useBase;
+var _use_base = _interopRequireDefault(require("../../shared/ui/use_base"));
+/** @module @airtable/blocks/interface/ui: useBase */ /** */
+
+/**
+ * A hook for connecting a React component to your base's schema. This returns a {@link Base}
+ * instance and will re-render your component whenever the base's schema changes. That means any
+ * change to your base like tables being added or removed, fields getting renamed, etc. It excludes
+ * any change to the actual records in the base.
+ *
+ * `useBase` should meet most of your needs for working with base schema. If you need more granular
+ * control of when your component updates or want to do anything other than re-render, the lower
+ * level {@link useWatchable} hook might help.
+ *
+ * Returns the current base.
+ *
+ * @example
+ * ```js
+ * import {useBase} from '@airtable/blocks/interface/ui';
+ *
+ * // renders a list of tables and automatically updates
+ * function TableList() {
+ *      const base = useBase();
+ *
+ *      const tables = base.tables.map(table => {
+ *          return <li key={table.id}>{table.name}</li>;
+ *      });
+ *
+ *      return <ul>{tables}</ul>;
+ * }
+ * ```
+ * @docsPath UI/hooks/useBase
+ * @hook
+ */
+function useBase() {
+  return (0, _use_base.default)();
+}

package/dist/cjs/interface/ui/use_custom_properties.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCustomProperties = useCustomProperties;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.from-entries.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _airtable_interface = require("../types/airtable_interface");
+var _use_global_config = _interopRequireDefault(require("../../shared/ui/use_global_config"));
+var _error_utils = require("../../shared/error_utils");
+/** @module @airtable/blocks/interface/ui: useCustomProperties */ /** */
+
+// This is the public-facing API for custom properties that blocks will pass.
+// It differs slightly from BlockInstallationPageElementCustomPropertyForAirtableInterface
+// because we don't always want the developer-facing API to be the same as the one
+// consumed by hyperbase. For example, for a 'field' custom property, the developer
+// passes a Table model instance, and then we transform that to be a fieldId custom
+// property with a tableId before we pass it to hyperbase.
+/**
+ * TODO document
+ * @hidden
+ */
+
+/**
+ * TODO document. Make sure to describe that getCustomProperties
+ * should be wrapped in useCallback.
+ * @hidden
+ */
+function useCustomProperties(getCustomProperties) {
+  var sdk = (0, _sdk_context.useSdk)();
+  var _useState = (0, _react.useState)(() => {
+      return getCustomProperties(sdk.base);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    customProperties = _useState2[0],
+    setCustomProperties = _useState2[1];
+  var globalConfig = (0, _use_global_config.default)();
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    errorState = _useState4[0],
+    setErrorState = _useState4[1];
+
+  // Create subscription to update custom properties when schema changes
+  (0, _react.useEffect)(() => {
+    var base = sdk.base;
+    var onSchemaChange = base => {
+      var customProperties = getCustomProperties(base);
+      setCustomProperties(customProperties);
+    };
+    base.watch('schema', onSchemaChange);
+    return () => {
+      base.unwatch('schema', onSchemaChange);
+    };
+  }, [sdk, getCustomProperties]);
+
+  // When custom properties change, send a message to hyperbase to update the properties panel
+  var hasError = errorState !== null;
+  (0, _react.useEffect)(() => {
+    if (hasError) {
+      return;
+    }
+    var customPropertiesForAirtableInterface = customProperties.map(convertBlockPageElementCustomPropertyToBlockInstallationPageElementCustomPropertyForAirtableInterface);
+    sdk.setCustomPropertiesAsync(customPropertiesForAirtableInterface).catch(error => {
+      setErrorState({
+        error
+      });
+    });
+  }, [sdk, customProperties, hasError]);
+  var customPropertyValueByKey = hasError ? {} : Object.fromEntries(customProperties.map(property => [property.key, getCustomPropertyValue(sdk.base, globalConfig, property)]));
+  return {
+    customPropertyValueByKey,
+    errorState
+  };
+}
+
+/** @internal */
+function convertBlockPageElementCustomPropertyToBlockInstallationPageElementCustomPropertyForAirtableInterface(property) {
+  var _property$possibleVal, _property$defaultValu;
+  switch (property.type) {
+    case 'boolean':
+      return {
+        key: property.key,
+        label: property.label,
+        type: _airtable_interface.BlockInstallationPageElementCustomPropertyTypeForAirtableInterface.BOOLEAN,
+        defaultValue: property.defaultValue
+      };
+    case 'string':
+      return {
+        key: property.key,
+        label: property.label,
+        type: _airtable_interface.BlockInstallationPageElementCustomPropertyTypeForAirtableInterface.STRING,
+        defaultValue: property.defaultValue
+      };
+    case 'enum':
+      return {
+        key: property.key,
+        label: property.label,
+        type: _airtable_interface.BlockInstallationPageElementCustomPropertyTypeForAirtableInterface.ENUM,
+        possibleValues: property.possibleValues,
+        defaultValue: property.defaultValue
+      };
+    case 'field':
+      return {
+        key: property.key,
+        label: property.label,
+        type: _airtable_interface.BlockInstallationPageElementCustomPropertyTypeForAirtableInterface.FIELD_ID,
+        tableId: property.table.id,
+        possibleValues: (_property$possibleVal = property.possibleValues) === null || _property$possibleVal === void 0 ? void 0 : _property$possibleVal.map(field => field.id),
+        defaultValue: (_property$defaultValu = property.defaultValue) === null || _property$defaultValu === void 0 ? void 0 : _property$defaultValu.id
+      };
+    default:
+      throw (0, _error_utils.spawnUnknownSwitchCaseError)('property type', property, 'type');
+  }
+}
+
+/** @internal */
+function getCustomPropertyValue(base, globalConfig, property) {
+  var _globalConfig$get;
+  var defaultValue = 'defaultValue' in property ? property.defaultValue : null;
+  var rawValue = (_globalConfig$get = globalConfig.get(property.key)) !== null && _globalConfig$get !== void 0 ? _globalConfig$get : defaultValue;
+  switch (property.type) {
+    case 'boolean':
+      if (typeof rawValue === 'boolean') {
+        return rawValue;
+      }
+      return defaultValue;
+    case 'string':
+      if (typeof rawValue === 'string') {
+        return rawValue;
+      }
+      return defaultValue;
+    case 'enum':
+      if (typeof rawValue === 'string' && property.possibleValues.some(value => value.value === rawValue)) {
+        return rawValue;
+      }
+      return defaultValue;
+    case 'field':
+      if (typeof rawValue === 'string' && property.table === base.getTableById(property.table.id)) {
+        var fieldModel = property.table.fields.find(field => field.id === rawValue);
+        if (fieldModel && (!property.possibleValues || property.possibleValues.includes(fieldModel))) {
+          return fieldModel;
+        }
+      }
+      return defaultValue;
+    default:
+      throw (0, _error_utils.spawnUnknownSwitchCaseError)('property type', property, 'type');
+  }
+}

package/dist/cjs/interface/ui/use_records.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRecords = useRecords;
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+/** @module @airtable/blocks/interface/ui: useRecords */ /** */
+
+/**
+ * A hook for working with all of the records (including cell values) in a
+ * particular table. Automatically handles loading data and updating
+ * your component when the underlying data changes.
+ *
+ * This hook re-renders when data concerning the records changes (specifically, when cell values
+ * change and when records are added or removed).
+ *
+ * Returns a list of records.
+ *
+ * @param table The {@link Table} you want the records from.
+ *
+ * @example
+ * ```js
+ *  import {useBase, useRecords} from '@airtable/blocks/interface/ui';
+ *
+ *  function RecordList() {
+ *      const base = useBase();
+ *      const table = base.tables[0];
+ *
+ *      // grab all the records from that table
+ *      const records = useRecords(table);
+ *
+ *      // render a list of records:
+ *      return (
+ *          <ul>
+ *              {records.map(record => {
+ *                  return <li key={record.id}>{record.name}</li>;
+ *              })}
+ *          </ul>
+ *      );
+ *  }
+ * ```
+ * @docsPath UI/hooks/useRecords
+ * @hook
+ */
+function useRecords(table) {
+  var _useSdk = (0, _sdk_context.useSdk)(),
+    base = _useSdk.base;
+  var recordStore = base.__getRecordStore(table.id);
+  (0, _use_watchable.default)(recordStore, ['records', 'recordIds', 'cellValues', 'recordOrder']);
+  var records = recordStore.records;
+  return records;
+}

package/dist/cjs/interface/ui/use_run_info.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRunInfo = useRunInfo;
+var _sdk_context = require("../../shared/ui/sdk_context");
+/** @module @airtable/blocks/interface/ui: useRunInfo */ /** */
+
+/**
+ * A hook for getting information about the current run context. This can be
+ * useful if you'd like to display some configuration options when the page
+ * element is in edit mode.
+ *
+ * `useRunInfo`
+ *
+ * @example
+ * ```js
+ * import {useRunInfo} from '@airtable/blocks/interface/ui';
+ *
+ * // renders a list of tables and automatically updates
+ * function MyApp() {
+ *      const runInfo = useRunInfo();
+ *      return (
+ *          <div>
+ *              <p>Is development mode: {runInfo.isDevelopmentMode ? 'Yes' : 'No'}</p>
+ *              <p>Is page element in edit mode: {runInfo.isPageElementInEditMode ? 'Yes' : 'No'}</p>
+ *          </div>
+ *      );
+ * }
+ * ```
+ * @docsPath UI/hooks/useRunInfo
+ * @hook
+ */
+function useRunInfo() {
+  var sdk = (0, _sdk_context.useSdk)();
+  var runContext = sdk.getBlockRunContext();
+  return {
+    isDevelopmentMode: sdk.runInfo.isDevelopmentMode,
+    isPageElementInEditMode: runContext.isPageElementInEditMode
+  };
+}

package/dist/cjs/interface/ui/use_session.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSession = useSession;
+var _use_session = _interopRequireDefault(require("../../shared/ui/use_session"));
+/** @module @airtable/blocks/ui: useSession */ /** */
+
+/**
+ * A hook for connecting a React component to the current session. This returns a {@link Session}
+ * instance and will re-render your component whenever the session changes (e.g. when the current user's
+ * permissions change or when the current user's name changes).
+ *
+ * `useSession` should meet most of your needs for working with {@link Session}. If you need more granular
+ * control of when your component updates or want to do anything other than re-render, the lower
+ * level {@link useWatchable} hook might help.
+ *
+ * @example
+ * ```js
+ * import {useSession} from '@airtable/blocks/interface/ui';
+ *
+ * // Says hello to the current user and updates in realtime if the current user's
+ * // name or profile pic changes.
+ * function CurrentUserGreeter() {
+ *     const session = useSession();
+ *     return (
+ *         <React.Fragment>
+ *             Hello {session.currentUser?.name ?? 'stranger'}!
+ *         </React.Fragment>
+ *     );
+ * }
+ * ```
+ * @docsPath UI/hooks/useSession
+ * @hook
+ */
+function useSession() {
+  return (0, _use_session.default)();
+}

package/dist/cjs/sdk_mode.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/shared/color_utils.js

@@ -0,0 +1,65 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.string.ends-with.js");
+require("core-js/modules/es.string.pad-start.js");
+var _private_utils = require("./private_utils");
+var _colors = _interopRequireWildcard(require("./colors"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @module @airtable/blocks/ui: colorUtils */ /** */
+
+/** A red/green/blue color object. Each property is a number from 0 to 255. */
+
+/**
+ * Utilities for working with {@link Color} names from the {@link colors} enum.
+ *
+ * @docsPath UI/utils/colorUtils
+ */
+
+var colorUtils = {
+  getHexForColor: colorString => {
+    var color = (0, _private_utils.getEnumValueIfExists)(_colors.default, colorString);
+    if (!color) {
+      return null;
+    }
+    var rgbTuple = _colors.rgbTuplesByColor[color];
+    var hexNumber = rgbTuple[0] << 16 | rgbTuple[1] << 8 | rgbTuple[2];
+    return "#".concat(hexNumber.toString(16).padStart(6, '0'));
+  },
+  getRgbForColor: colorString => {
+    var color = (0, _private_utils.getEnumValueIfExists)(_colors.default, colorString);
+    if (!color) {
+      return null;
+    }
+    var rgbTuple = _colors.rgbTuplesByColor[color];
+    return {
+      r: rgbTuple[0],
+      g: rgbTuple[1],
+      b: rgbTuple[2]
+    };
+  },
+  shouldUseLightTextOnColor: colorString => {
+    if (!(0, _private_utils.has)(_colors.rgbTuplesByColor, colorString)) {
+      // Don't have a color for this. Let's just return false as a default
+      // instead of throwing.
+      return false;
+    }
+
+    // Light1 and Light2 colors use dark text.
+    // Bright, Dark1 and no suffix colors use light text.
+    // NOTE: use shouldUseDarkText instead of shouldUseLightText just to make
+    // checking the suffix easier, since no suffix uses light text.
+    var shouldUseDarkText = colorString.endsWith('Light1') || colorString.endsWith('Light2');
+    return !shouldUseDarkText;
+  }
+};
+var _default = exports.default = colorUtils;

package/dist/cjs/shared/colors.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rgbTuplesByColor = exports.default = void 0;
+/** @module @airtable/blocks/ui: colors */ /** */
+
+/**
+ * Airtable color names.
+ *
+ * To get the corresponding RGB or HEX values, use
+ * {@link getRgbForColor} or {@link getHexForColor}.
+ *
+ * You can also pass these values into the color props for components:
+ *
+ * @example
+ * ```js
+ * import {Box, colors} from '@airtable/blocks/ui';
+ *
+ * <Box backgroundColor={colors.BLUE} />
+ * ```
+ *
+ * @docsPath UI/utils/colors
+ */
+var Colors = {
+  /** @docsPath UI/utils/Colors */
+  BLUE_BRIGHT: 'blueBright',
+  /** @docsPath UI/utils/Colors */
+  BLUE_DARK_1: 'blueDark1',
+  /** @docsPath UI/utils/Colors */
+  BLUE_LIGHT_1: 'blueLight1',
+  /** @docsPath UI/utils/Colors */
+  BLUE_LIGHT_2: 'blueLight2',
+  /** @docsPath UI/utils/Colors */
+  BLUE: 'blue',
+  /** @docsPath UI/utils/Colors */
+  CYAN_BRIGHT: 'cyanBright',
+  /** @docsPath UI/utils/Colors */
+  CYAN_DARK_1: 'cyanDark1',
+  /** @docsPath UI/utils/Colors */
+  CYAN_LIGHT_1: 'cyanLight1',
+  /** @docsPath UI/utils/Colors */
+  CYAN_LIGHT_2: 'cyanLight2',
+  /** @docsPath UI/utils/Colors */
+  CYAN: 'cyan',
+  /** @docsPath UI/utils/Colors */
+  GRAY_BRIGHT: 'grayBright',
+  /** @docsPath UI/utils/Colors */
+  GRAY_DARK_1: 'grayDark1',
+  /** @docsPath UI/utils/Colors */
+  GRAY_LIGHT_1: 'grayLight1',
+  /** @docsPath UI/utils/Colors */
+  GRAY_LIGHT_2: 'grayLight2',
+  /** @docsPath UI/utils/Colors */
+  GRAY: 'gray',
+  /** @docsPath UI/utils/Colors */
+  GREEN_BRIGHT: 'greenBright',
+  /** @docsPath UI/utils/Colors */
+  GREEN_DARK_1: 'greenDark1',
+  /** @docsPath UI/utils/Colors */
+  GREEN_LIGHT_1: 'greenLight1',
+  /** @docsPath UI/utils/Colors */
+  GREEN_LIGHT_2: 'greenLight2',
+  /** @docsPath UI/utils/Colors */
+  GREEN: 'green',
+  /** @docsPath UI/utils/Colors */
+  ORANGE_BRIGHT: 'orangeBright',
+  /** @docsPath UI/utils/Colors */
+  ORANGE_DARK_1: 'orangeDark1',
+  /** @docsPath UI/utils/Colors */
+  ORANGE_LIGHT_1: 'orangeLight1',
+  /** @docsPath UI/utils/Colors */
+  ORANGE_LIGHT_2: 'orangeLight2',
+  /** @docsPath UI/utils/Colors */
+  ORANGE: 'orange',
+  /** @docsPath UI/utils/Colors */
+  PINK_BRIGHT: 'pinkBright',
+  /** @docsPath UI/utils/Colors */
+  PINK_DARK_1: 'pinkDark1',
+  /** @docsPath UI/utils/Colors */
+  PINK_LIGHT_1: 'pinkLight1',
+  /** @docsPath UI/utils/Colors */
+  PINK_LIGHT_2: 'pinkLight2',
+  /** @docsPath UI/utils/Colors */
+  PINK: 'pink',
+  /** @docsPath UI/utils/Colors */
+  PURPLE_BRIGHT: 'purpleBright',
+  /** @docsPath UI/utils/Colors */
+  PURPLE_DARK_1: 'purpleDark1',
+  /** @docsPath UI/utils/Colors */
+  PURPLE_LIGHT_1: 'purpleLight1',
+  /** @docsPath UI/utils/Colors */
+  PURPLE_LIGHT_2: 'purpleLight2',
+  /** @docsPath UI/utils/Colors */
+  PURPLE: 'purple',
+  /** @docsPath UI/utils/Colors */
+  RED_BRIGHT: 'redBright',
+  /** @docsPath UI/utils/Colors */
+  RED_DARK_1: 'redDark1',
+  /** @docsPath UI/utils/Colors */
+  RED_LIGHT_1: 'redLight1',
+  /** @docsPath UI/utils/Colors */
+  RED_LIGHT_2: 'redLight2',
+  /** @docsPath UI/utils/Colors */
+  RED: 'red',
+  /** @docsPath UI/utils/Colors */
+  TEAL_BRIGHT: 'tealBright',
+  /** @docsPath UI/utils/Colors */
+  TEAL_DARK_1: 'tealDark1',
+  /** @docsPath UI/utils/Colors */
+  TEAL_LIGHT_1: 'tealLight1',
+  /** @docsPath UI/utils/Colors */
+  TEAL_LIGHT_2: 'tealLight2',
+  /** @docsPath UI/utils/Colors */
+  TEAL: 'teal',
+  /** @docsPath UI/utils/Colors */
+  YELLOW_BRIGHT: 'yellowBright',
+  /** @docsPath UI/utils/Colors */
+  YELLOW_DARK_1: 'yellowDark1',
+  /** @docsPath UI/utils/Colors */
+  YELLOW_LIGHT_1: 'yellowLight1',
+  /** @docsPath UI/utils/Colors */
+  YELLOW_LIGHT_2: 'yellowLight2',
+  /** @docsPath UI/utils/Colors */
+  YELLOW: 'yellow'
+};
+var _default = exports.default = Colors;
+/**
+ * A color name from the list of {@link Colors}.
+ */
+/** @hidden */
+var rgbTuplesByColor = exports.rgbTuplesByColor = {
+  [Colors.BLUE_BRIGHT]: [45, 127, 249],
+  [Colors.BLUE_DARK_1]: [39, 80, 174],
+  [Colors.BLUE_LIGHT_1]: [156, 199, 255],
+  [Colors.BLUE_LIGHT_2]: [207, 223, 255],
+  [Colors.BLUE]: [18, 131, 218],
+  [Colors.CYAN_BRIGHT]: [24, 191, 255],
+  [Colors.CYAN_DARK_1]: [11, 118, 183],
+  [Colors.CYAN_LIGHT_1]: [119, 209, 243],
+  [Colors.CYAN_LIGHT_2]: [208, 240, 253],
+  [Colors.CYAN]: [1, 169, 219],
+  [Colors.GRAY_BRIGHT]: [102, 102, 102],
+  [Colors.GRAY_DARK_1]: [68, 68, 68],
+  [Colors.GRAY_LIGHT_1]: [204, 204, 204],
+  [Colors.GRAY_LIGHT_2]: [238, 238, 238],
+  [Colors.GRAY]: [102, 102, 102],
+  [Colors.GREEN_BRIGHT]: [32, 201, 51],
+  [Colors.GREEN_DARK_1]: [51, 138, 23],
+  [Colors.GREEN_LIGHT_1]: [147, 224, 136],
+  [Colors.GREEN_LIGHT_2]: [209, 247, 196],
+  [Colors.GREEN]: [17, 175, 34],
+  [Colors.ORANGE_BRIGHT]: [255, 111, 44],
+  [Colors.ORANGE_DARK_1]: [215, 77, 38],
+  [Colors.ORANGE_LIGHT_1]: [255, 169, 129],
+  [Colors.ORANGE_LIGHT_2]: [254, 226, 213],
+  [Colors.ORANGE]: [247, 101, 59],
+  [Colors.PINK_BRIGHT]: [255, 8, 194],
+  [Colors.PINK_DARK_1]: [178, 21, 139],
+  [Colors.PINK_LIGHT_1]: [249, 157, 226],
+  [Colors.PINK_LIGHT_2]: [255, 218, 246],
+  [Colors.PINK]: [233, 41, 186],
+  [Colors.PURPLE_BRIGHT]: [139, 70, 255],
+  [Colors.PURPLE_DARK_1]: [107, 28, 176],
+  [Colors.PURPLE_LIGHT_1]: [205, 176, 255],
+  [Colors.PURPLE_LIGHT_2]: [237, 226, 254],
+  [Colors.PURPLE]: [124, 57, 237],
+  [Colors.RED_BRIGHT]: [248, 43, 96],
+  [Colors.RED_DARK_1]: [186, 30, 69],
+  [Colors.RED_LIGHT_1]: [255, 158, 183],
+  [Colors.RED_LIGHT_2]: [255, 220, 229],
+  [Colors.RED]: [239, 48, 97],
+  [Colors.TEAL_BRIGHT]: [32, 217, 210],
+  [Colors.TEAL_DARK_1]: [6, 160, 155],
+  [Colors.TEAL_LIGHT_1]: [114, 221, 195],
+  [Colors.TEAL_LIGHT_2]: [194, 245, 233],
+  [Colors.TEAL]: [2, 170, 164],
+  [Colors.YELLOW_BRIGHT]: [252, 180, 0],
+  [Colors.YELLOW_DARK_1]: [184, 117, 3],
+  [Colors.YELLOW_LIGHT_1]: [255, 214, 110],
+  [Colors.YELLOW_LIGHT_2]: [255, 234, 182],
+  [Colors.YELLOW]: [224, 141, 0]
+};