@atlaskit/tokens 0.13.5 → 1.1.0

package/dist/cjs/tokens/default/spacing/spacing.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /**
  * The spacing attribute schema governs the non-value specific metadata to apply to the
  * spacing theme. This governs the name, description and state
@@ -147,626 +146,6 @@ var spacing = {
         description: 'Use for larger layout-specific spacing.'
       }
     }
-  },
-  spacing: {
-    scale: {
-      '0': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          introduced: '0.10.16',
-          description: 'Equates to `0`. Can be used for resetting default spacing styles.'
-        }
-      },
-      '025': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['1px', '3px'],
-          introduced: '0.10.16',
-          description: 'Use for spacing in compact scenarios. The smallest value in our scale.'
-        }
-      },
-      '050': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['3px', '5px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '075': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['5px', '7px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '100': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['7px', '9px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '150': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['10px', '11px', '13px', '14px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '200': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['14px', '15px', '17px', '18px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '250': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['19px', '21px', '22px', '23px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '300': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['23px', '25px', '26px', '27px', '28px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '400': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['28px', '29px', '30px', '31px', '33px', '34px', '35px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '500': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          suggest: ['28px', '29px', '30px', '31px', '33px', '34px', '35px'],
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '600': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          introduced: '0.10.16',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '800': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          introduced: '0.12.0',
-          pixelValue: '',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '1000': {
-        attributes: {
-          group: 'spacing',
-          state: 'active',
-          introduced: '0.12.0',
-          pixelValue: '80px',
-          description: 'Helpful guidance goes here'
-        }
-      }
-    },
-    scaleLinear: {
-      '0': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '0',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '100': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '2px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '200': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '4px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '300': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '6px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '400': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '8px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '500': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '12px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '600': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '16px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '700': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '20px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '800': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '24px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '900': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '32px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '1000': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '40px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '1100': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '48px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      }
-    },
-    size: {
-      none: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '0',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xxxxSmall: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '2px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xxxSmall: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '4px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xxSmall: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '6px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xsmall: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '8px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      small: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '12px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      medium: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '16px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      large: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '20px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xlarge: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '24px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xxlarge: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '32px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xxxlarge: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '40px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      xxxxlarge: {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '48px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      }
-    },
-    ecl: {
-      element: {
-        '2': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '2px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '4': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '4px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '6': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '6px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '8': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '8px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        }
-      },
-      container: {
-        '12': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '12px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '16': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '16px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '20': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '20px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '24': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '24px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        }
-      },
-      layout: {
-        '32': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '32px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '40': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '40px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '64': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '64px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        }
-      }
-    },
-    ccc: {
-      component: {
-        '2': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '2px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '4': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '4px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '6': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '6px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '8': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '8px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        }
-      },
-      content: {
-        '12': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '12px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '16': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '16px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '20': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '20px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '24': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '24px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        }
-      },
-      container: {
-        '32': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '32px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '40': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '40px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        },
-        '48': {
-          attributes: {
-            group: 'spacing',
-            state: 'experimental',
-            replacement: '48px',
-            introduced: '0.10.28',
-            description: 'Helpful guidance goes here'
-          }
-        }
-      }
-    },
-    gap: {
-      '100': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '8px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '200': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '16px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '300': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '24px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      }
-    },
-    inset: {
-      '100': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '8px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '200': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '16px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      },
-      '300': {
-        attributes: {
-          group: 'spacing',
-          state: 'experimental',
-          replacement: '24px',
-          introduced: '0.10.28',
-          description: 'Helpful guidance goes here'
-        }
-      }
-    }
   }
 };
 var _default = spacing;

package/dist/cjs/tokens/default/utility/utility.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var utility = {
-  UNSAFE_util: {
+  UNSAFE: {
     transparent: {
       attributes: {
         group: 'raw',
@@ -13,14 +13,6 @@ var utility = {
         introduced: '0.1.1',
         description: 'Transparent token used for backwards compatibility between new and old theming solutions'
       }
-    },
-    MISSING_TOKEN: {
-      attributes: {
-        group: 'raw',
-        state: 'active',
-        introduced: '0.4.0',
-        description: 'Used as a placeholder when a suitable token does not exist'
-      }
     }
   }
 };

package/dist/cjs/use-theme-observer.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeObserver = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _getGlobalTheme = require("./get-global-theme");
+var _themeMutationObserver = require("./theme-mutation-observer");
+/**
+ * A React hook which returns the current themes and color-mode set on `<html>`.
+ *
+ * @example
+ * ```
+ * const { colorMode, dark, light, spacing, typography } = useThemeObserver();
+ *
+ * // Performing side effects when it changes
+ * useEffect(() => {
+ *   console.log(`The color mode has changed to ${theme.colorMode}`);
+ * }, [theme.colorMode]);
+ * ```
+ */
+var useThemeObserver = function useThemeObserver() {
+  var _useState = (0, _react.useState)((0, _getGlobalTheme.getGlobalTheme)()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    theme = _useState2[0],
+    setTheme = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var observer = new _themeMutationObserver.ThemeMutationObserver(function (theme) {
+      return setTheme(theme);
+    });
+    observer.observe();
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  return theme;
+};
+exports.useThemeObserver = useThemeObserver;