@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,OAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,iBAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,kBAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,eAAd;AACA,cAAc,UAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,gBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './AppBar';\nexport * from './Alert';\nexport * from './Badge';\nexport * from './BaseLine';\nexport * from './BottomSheet';\nexport * from './Box';\nexport * from './Button';\nexport * from './Combobox';\nexport * from './CheckBox';\nexport * from './Chip';\nexport * from './ColorMode';\nexport * from './Divider';\nexport * from './Dialog';\nexport * from './FloatingLabel';\nexport * from './LineRipple';\nexport * from './Link';\nexport * from './List';\nexport * from './ListItem';\nexport * from './Menu';\nexport * from './NotchedOutline';\nexport * from './Paper';\nexport * from './ProgressSpinner';\nexport * from './RadioButton';\nexport * from './Ripple';\nexport * from './Select';\nexport * from './SelectItem';\nexport * from './Skeleton';\nexport * from './Snackbar';\nexport * from './Switch';\nexport * from './Tab';\nexport * from './TabIndicator';\nexport * from './Table';\nexport * from './Text';\nexport * from './TextField';\nexport * from './Tooltip';\nexport * from './theme';\nexport * from './color';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './AppBar';\nexport * from './Alert';\nexport * from './Badge';\nexport * from './BaseLine';\nexport * from './BottomSheet';\nexport * from './Box';\nexport * from './Button';\nexport * from './Combobox';\nexport * from './CheckBox';\nexport * from './Chip';\nexport * from './Divider';\nexport * from './Dialog';\nexport * from './FloatingLabel';\nexport * from './LineRipple';\nexport * from './Link';\nexport * from './List';\nexport * from './ListItem';\nexport * from './Menu';\nexport * from './NavRail';\nexport * from './NotchedOutline';\nexport * from './Paper';\nexport * from './Popover';\nexport * from './ProgressSpinner';\nexport * from './RadioButton';\nexport * from './Ripple';\nexport * from './Select';\nexport * from './SelectItem';\nexport * from './Skeleton';\nexport * from './Slider';\nexport * from './Snackbar';\nexport * from './Switch';\nexport * from './Tab';\nexport * from './TabIndicator';\nexport * from './Table';\nexport * from './Text';\nexport * from './TextField';\nexport * from './Tooltip';\nexport * from './motion';\nexport * from './theme';\nexport * from './color';\nexport * from './hooks/useAnimation';\n"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,OAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,iBAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,kBAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,mBAAd;AACA,cAAc,eAAd;AACA,cAAc,UAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,gBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,sBAAd"}

package/build/esm/motion.d.ts

@@ -0,0 +1,7 @@
+export declare const EASING_EMPHASIZED = "cubic-bezier(0.2, 0, 0, 1)";
+export declare const EASING_EMPHASIZED_ACCELERATE = "cubic-bezier(0.3, 0, 0.8, 0.15)";
+export declare const EASING_EMPHASIZED_DECELERATE = "cubic-bezier(0.05, 0.7, 0.1, 1)";
+export declare const EASING_LINEAR = "cubic-bezier(0, 0, 1, 1)";
+export declare const EASING_STANDARD = "cubic-bezier(0.2, 0, 0, 1)";
+export declare const EASING_STANDARD_ACCELERATE = "cubic-bezier(0.3, 0, 1, 1)";
+export declare const EASING_STANDARD_DECELERATE = "cubic-bezier(0, 0, 0, 1)";

package/build/esm/motion.js

@@ -0,0 +1,8 @@
+export var EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export var EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export var EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export var EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export var EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export var EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export var EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';
+//# sourceMappingURL=motion.js.map

package/build/esm/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":["EASING_EMPHASIZED","EASING_EMPHASIZED_ACCELERATE","EASING_EMPHASIZED_DECELERATE","EASING_LINEAR","EASING_STANDARD","EASING_STANDARD_ACCELERATE","EASING_STANDARD_DECELERATE"],"sources":["../../src/motion.ts"],"sourcesContent":["export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';\nexport const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';\nexport const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';\nexport const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';\nexport const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';\nexport const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';\nexport const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';\n"],"mappings":"AAAA,OAAO,IAAMA,iBAAiB,GAAG,4BAA1B;AACP,OAAO,IAAMC,4BAA4B,GAAG,iCAArC;AACP,OAAO,IAAMC,4BAA4B,GAAG,iCAArC;AACP,OAAO,IAAMC,aAAa,GAAG,0BAAtB;AACP,OAAO,IAAMC,eAAe,GAAG,4BAAxB;AACP,OAAO,IAAMC,0BAA0B,GAAG,4BAAnC;AACP,OAAO,IAAMC,0BAA0B,GAAG,0BAAnC"}

package/build/esm/tailwind/extendColors.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '../theme/theme';
+export declare type ColorsObject = {
+    [key: string]: string | ColorsObject;
+};
+export declare function extendColors(theme: Theme): ColorsObject;

package/build/esm/tailwind/extendColors.js

@@ -0,0 +1,59 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+export function extendColors(theme) {
+  var modifiedColors = {};
+
+  function extractColors(colors, arr) {
+    var root = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+
+    function insert(key, value) {
+      var parts = key.split('-');
+      var obj = arr;
+
+      for (var i = 0; i < parts.length; i++) {
+        var part = parts[i];
+        var isLast = i === parts.length - 1;
+
+        if (isLast) {
+          if (_typeof(obj[part]) === 'object') {
+            obj[part].DEFAULT = value;
+          } else {
+            obj[part] = value;
+          }
+        } else {
+          if (typeof obj[part] === 'string') {
+            obj[part] = {
+              DEFAULT: obj[part]
+            };
+          } else if (typeof obj[part] === 'undefined') {
+            obj[part] = {};
+          }
+
+          obj = obj[part];
+        }
+      }
+    }
+
+    for (var _i = 0, _Object$keys = Object.keys(colors); _i < _Object$keys.length; _i++) {
+      var _key = _Object$keys[_i];
+
+      if (_key === 'modes') {
+        continue;
+      }
+
+      var c = colors[_key];
+
+      if (typeof c === 'string') {
+        var varName = "--".concat(root + _key, "--rgb");
+        insert(_key, "rgba(var(".concat(varName, "), <alpha-value>)"));
+      } else if (_typeof(c) === 'object') {
+        var subColors = {};
+        extractColors(c, subColors, root + _key + '-');
+        arr[_key] = subColors;
+      }
+    }
+  }
+
+  extractColors(theme.colors, modifiedColors);
+  return modifiedColors;
+}
+//# sourceMappingURL=extendColors.js.map

package/build/esm/tailwind/extendColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extendColors.js","names":["extendColors","theme","modifiedColors","extractColors","colors","arr","root","insert","key","value","parts","split","obj","i","length","part","isLast","DEFAULT","Object","keys","c","varName","subColors"],"sources":["../../../src/tailwind/extendColors.ts"],"sourcesContent":["import type { Theme } from '../theme/theme';\n\nexport type ColorsObject = { [key: string]: string | ColorsObject };\nexport function extendColors(theme: Theme): ColorsObject {\n  const modifiedColors: ColorsObject = {};\n  function extractColors(colors: ColorsObject, arr: ColorsObject, root = '') {\n    function insert(key: string, value: string) {\n      const parts = key.split('-');\n\n      let obj: any = arr;\n      for (let i = 0; i < parts.length; i++) {\n        const part = parts[i];\n        const isLast = i === parts.length - 1;\n\n        if (isLast) {\n          if (typeof obj[part] === 'object') {\n            obj[part].DEFAULT = value;\n          } else {\n            obj[part] = value;\n          }\n        } else {\n          if (typeof obj[part] === 'string') {\n            obj[part] = { DEFAULT: obj[part] };\n          } else if (typeof obj[part] === 'undefined') {\n            obj[part] = {};\n          }\n          obj = obj[part];\n        }\n      }\n    }\n\n    for (const key of Object.keys(colors)) {\n      if (key === 'modes') {\n        continue;\n      }\n\n      const c = colors[key];\n      if (typeof c === 'string') {\n        const varName = `--${root + key}--rgb`;\n        insert(key, `rgba(var(${varName}), <alpha-value>)`);\n      } else if (typeof c === 'object') {\n        const subColors: ColorsObject = {};\n        extractColors(c, subColors, root + key + '-');\n        arr[key] = subColors;\n      }\n    }\n  }\n\n  extractColors(theme.colors as any, modifiedColors);\n  return modifiedColors;\n}\n"],"mappings":";AAGA,OAAO,SAASA,YAAT,CAAsBC,KAAtB,EAAkD;EACvD,IAAMC,cAA4B,GAAG,EAArC;;EACA,SAASC,aAAT,CAAuBC,MAAvB,EAA6CC,GAA7C,EAA2E;IAAA,IAAXC,IAAW,uEAAJ,EAAI;;IACzE,SAASC,MAAT,CAAgBC,GAAhB,EAA6BC,KAA7B,EAA4C;MAC1C,IAAMC,KAAK,GAAGF,GAAG,CAACG,KAAJ,CAAU,GAAV,CAAd;MAEA,IAAIC,GAAQ,GAAGP,GAAf;;MACA,KAAK,IAAIQ,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;QACrC,IAAME,IAAI,GAAGL,KAAK,CAACG,CAAD,CAAlB;QACA,IAAMG,MAAM,GAAGH,CAAC,KAAKH,KAAK,CAACI,MAAN,GAAe,CAApC;;QAEA,IAAIE,MAAJ,EAAY;UACV,IAAI,QAAOJ,GAAG,CAACG,IAAD,CAAV,MAAqB,QAAzB,EAAmC;YACjCH,GAAG,CAACG,IAAD,CAAH,CAAUE,OAAV,GAAoBR,KAApB;UACD,CAFD,MAEO;YACLG,GAAG,CAACG,IAAD,CAAH,GAAYN,KAAZ;UACD;QACF,CAND,MAMO;UACL,IAAI,OAAOG,GAAG,CAACG,IAAD,CAAV,KAAqB,QAAzB,EAAmC;YACjCH,GAAG,CAACG,IAAD,CAAH,GAAY;cAAEE,OAAO,EAAEL,GAAG,CAACG,IAAD;YAAd,CAAZ;UACD,CAFD,MAEO,IAAI,OAAOH,GAAG,CAACG,IAAD,CAAV,KAAqB,WAAzB,EAAsC;YAC3CH,GAAG,CAACG,IAAD,CAAH,GAAY,EAAZ;UACD;;UACDH,GAAG,GAAGA,GAAG,CAACG,IAAD,CAAT;QACD;MACF;IACF;;IAED,gCAAkBG,MAAM,CAACC,IAAP,CAAYf,MAAZ,CAAlB,kCAAuC;MAAlC,IAAMI,IAAG,mBAAT;;MACH,IAAIA,IAAG,KAAK,OAAZ,EAAqB;QACnB;MACD;;MAED,IAAMY,CAAC,GAAGhB,MAAM,CAACI,IAAD,CAAhB;;MACA,IAAI,OAAOY,CAAP,KAAa,QAAjB,EAA2B;QACzB,IAAMC,OAAO,eAAQf,IAAI,GAAGE,IAAf,UAAb;QACAD,MAAM,CAACC,IAAD,qBAAkBa,OAAlB,uBAAN;MACD,CAHD,MAGO,IAAI,QAAOD,CAAP,MAAa,QAAjB,EAA2B;QAChC,IAAME,SAAuB,GAAG,EAAhC;QACAnB,aAAa,CAACiB,CAAD,EAAIE,SAAJ,EAAehB,IAAI,GAAGE,IAAP,GAAa,GAA5B,CAAb;QACAH,GAAG,CAACG,IAAD,CAAH,GAAWc,SAAX;MACD;IACF;EACF;;EAEDnB,aAAa,CAACF,KAAK,CAACG,MAAP,EAAsBF,cAAtB,CAAb;EACA,OAAOA,cAAP;AACD"}

package/build/esm/tailwind/index.d.ts

@@ -0,0 +1,8 @@
+import type { Config as TailwindConfig } from 'tailwindcss';
+import type { Theme } from '../theme';
+export declare type PluginOptions = {
+    theme?: Theme;
+};
+export default function generatePreset({ theme: basicUiTheme, }: {
+    theme: Theme;
+}): TailwindConfig;

package/build/esm/tailwind/index.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import plugin from 'tailwindcss/plugin';
+import { css } from '@styled-system/css';
+import { extendColors } from './extendColors';
+var textVariants = ['display-large', 'display-medium', 'display-small', 'headline-large', 'headline-medium', 'headline-small', 'title-large', 'title-medium', 'title-small', 'label-large', 'label-medium', 'label-small', 'body-large', 'body-medium', 'body-small'];
+export default function generatePreset(_ref) {
+  var basicUiTheme = _ref.theme;
+  return {
+    content: [],
+    darkMode: 'class',
+    theme: {
+      colors: _extends({}, extendColors(basicUiTheme))
+    },
+    plugins: [plugin(function (_ref2) {
+      var addComponents = _ref2.addComponents;
+
+      var _iterator = _createForOfIteratorHelper(textVariants),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var variant = _step.value;
+          var themeStyle = basicUiTheme.text[variant];
+
+          if (themeStyle) {
+            addComponents(_defineProperty({}, ".text-".concat(variant), css(themeStyle)(basicUiTheme)));
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    })]
+  };
+}
+//# sourceMappingURL=index.js.map

package/build/esm/tailwind/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["plugin","css","extendColors","textVariants","generatePreset","basicUiTheme","theme","content","darkMode","colors","plugins","addComponents","variant","themeStyle","text"],"sources":["../../../src/tailwind/index.ts"],"sourcesContent":["import plugin from 'tailwindcss/plugin';\nimport type { Config as TailwindConfig } from 'tailwindcss';\nimport { css } from '@styled-system/css';\n\nimport type { Theme } from '../theme';\nimport { extendColors } from './extendColors';\n\nexport type PluginOptions = {\n  theme?: Theme;\n};\n\nconst textVariants = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n];\n\nexport default function generatePreset({\n  theme: basicUiTheme,\n}: {\n  theme: Theme;\n}): TailwindConfig {\n  return {\n    content: [],\n    darkMode: 'class',\n    theme: {\n      colors: {\n        ...extendColors(basicUiTheme),\n      },\n    },\n    plugins: [\n      plugin(function ({ addComponents }) {\n        for (const variant of textVariants) {\n          const themeStyle = basicUiTheme.text[variant];\n          if (themeStyle) {\n            addComponents({\n              [`.text-${variant}`]: css(themeStyle)(basicUiTheme) as any,\n            });\n          }\n        }\n      }),\n    ],\n  };\n}\n"],"mappings":";;;;;;;;;AAAA,OAAOA,MAAP,MAAmB,oBAAnB;AAEA,SAASC,GAAT,QAAoB,oBAApB;AAGA,SAASC,YAAT,QAA6B,gBAA7B;AAMA,IAAMC,YAAY,GAAG,CACnB,eADmB,EAEnB,gBAFmB,EAGnB,eAHmB,EAInB,gBAJmB,EAKnB,iBALmB,EAMnB,gBANmB,EAOnB,aAPmB,EAQnB,cARmB,EASnB,aATmB,EAUnB,aAVmB,EAWnB,cAXmB,EAYnB,aAZmB,EAanB,YAbmB,EAcnB,aAdmB,EAenB,YAfmB,CAArB;AAkBA,eAAe,SAASC,cAAT,OAII;EAAA,IAHVC,YAGU,QAHjBC,KAGiB;EACjB,OAAO;IACLC,OAAO,EAAE,EADJ;IAELC,QAAQ,EAAE,OAFL;IAGLF,KAAK,EAAE;MACLG,MAAM,eACDP,YAAY,CAACG,YAAD,CADX;IADD,CAHF;IAQLK,OAAO,EAAE,CACPV,MAAM,CAAC,iBAA6B;MAAA,IAAjBW,aAAiB,SAAjBA,aAAiB;;MAAA,2CACZR,YADY;MAAA;;MAAA;QAClC,oDAAoC;UAAA,IAAzBS,OAAyB;UAClC,IAAMC,UAAU,GAAGR,YAAY,CAACS,IAAb,CAAkBF,OAAlB,CAAnB;;UACA,IAAIC,UAAJ,EAAgB;YACdF,aAAa,qCACDC,OADC,GACWX,GAAG,CAACY,UAAD,CAAH,CAAgBR,YAAhB,CADX,EAAb;UAGD;QACF;MARiC;QAAA;MAAA;QAAA;MAAA;IASnC,CATK,CADC;EARJ,CAAP;AAqBD"}

package/build/esm/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,YAAd","sourcesContent":["export * from './theme';\nexport * from './useTheme';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/theme/index.ts"],"sourcesContent":["export * from './theme';\nexport * from './useTheme';\n"],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,YAAd"}

package/build/esm/theme/theme.d.ts

@@ -13,6 +13,7 @@ export declare const theme: {
         surface: string;
         'surface-variant': string;
         outline: string;
+        'outline-variant': string;
         on: {
             primary: string;
             secondary: string;
@@ -26,6 +27,7 @@ export declare const theme: {
             surface: string;
             'surface-variant': string;
             outline: string;
+            'outline-variant': string;
         };
         modes: {
             dark: {
@@ -41,6 +43,7 @@ export declare const theme: {
                 surface: string;
                 'surface-variant': string;
                 outline: string;
+                'outline-variant': string;
                 on: {
                     primary: string;
                     secondary: string;
@@ -54,6 +57,7 @@ export declare const theme: {
                     surface: string;
                     'surface-variant': string;
                     outline: string;
+                    'outline-variant': string;
                 };
             };
         };
@@ -77,33 +81,6 @@ export declare const theme: {
         full: string;
         circle: string;
     };
-    shadowsOriginal: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-        10: string;
-        11: string;
-        12: string;
-        13: string;
-        14: string;
-        15: string;
-        16: string;
-        17: string;
-        18: string;
-        19: string;
-        20: string;
-        21: string;
-        22: string;
-        23: string;
-        24: string;
-    };
     shadows: {
         0: string;
         1: string;
@@ -115,6 +92,8 @@ export declare const theme: {
     fonts: {
         body: string;
         heading: string;
+        brand: string;
+        plain: string;
         monospace: string;
     };
     fontSizes: {
@@ -164,6 +143,111 @@ export declare const theme: {
             fontFamily: string;
             lineHeight: string;
         };
+        'display-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'display-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'display-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
         h1: {
             variant: string;
             fontWeight: string;
@@ -358,7 +442,7 @@ export declare const theme: {
                 '&:hover': {
                     boxShadow: number;
                 };
-                '&:hover:disabled': {
+                '&:active,&:focus-visible,&:disabled': {
                     boxShadow: number;
                 };
             };
@@ -368,6 +452,9 @@ export declare const theme: {
                 '&:hover': {
                     boxShadow: number;
                 };
+                '&:active,&:focus-visible': {
+                    boxShadow: number;
+                };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
                     boxShadow: number;
                 };
@@ -378,6 +465,9 @@ export declare const theme: {
                 ':hover': {
                     boxShadow: number;
                 };
+                '&:active,&:focus-visible': {
+                    boxShadow: number;
+                };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
                     boxShadow: number;
                 };

package/build/esm/theme/theme.js

@@ -2,7 +2,19 @@
 // work-in-progress
 // references
 // - https://material.io/design/typography/the-type-system.html#type-scale
-import { em } from 'polished';
+import { rem, em } from 'polished';
+import { EASING_STANDARD } from '../motion';
+
+function font(fontFamily, lineHeight, fontSize, letterSpacing, weight) {
+  return {
+    fontFamily: fontFamily,
+    lineHeight: rem(lineHeight),
+    fontSize: rem(fontSize),
+    letterSpacing: rem(letterSpacing),
+    fontWeight: weight
+  };
+}
+
 export var theme = {
   googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
   colors: {
@@ -18,6 +30,7 @@ export var theme = {
     surface: '#fcfcfc',
     'surface-variant': '#efdee5',
     outline: '#81747a',
+    'outline-variant': '#d3c2c9',
     on: {
       primary: '#ffffff',
       secondary: '#ffffff',
@@ -30,7 +43,8 @@ export var theme = {
       background: '#1f1a1c',
       surface: '#1f1a1c',
       'surface-variant': '#4f4349',
-      outline: '#feecf3'
+      outline: '#feecf3',
+      'outline-variant': '#22191e'
     },
     modes: {
       dark: {
@@ -46,6 +60,7 @@ export var theme = {
         surface: '#1f1a1c',
         'surface-variant': '#4f4349',
         outline: '#9b8d93',
+        'outline-variant': '#4f4349',
         on: {
           primary: '#5b0e47',
           secondary: '#402a37',
@@ -58,7 +73,8 @@ export var theme = {
           background: '#eae0e3',
           surface: '#eae0e3',
           'surface-variant': '#d3c2c9',
-          outline: '#22191e'
+          outline: '#22191e',
+          'outline-variant': '#efdee5'
         }
       }
     }
@@ -82,44 +98,19 @@ export var theme = {
     full: "6249.9375rem",
     circle: '100%'
   },
-  shadowsOriginal: {
-    0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
-    1: '0 2px 1px -1px rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 1px 3px 0 rgba(0,0,0,0.12)',
-    2: '0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)',
-    3: '0 3px 3px -2px rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.14),0 1px 8px 0 rgba(0,0,0,0.12)',
-    4: '0 2px 4px -1px rgba(0,0,0,0.2),0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12)',
-    5: '0 3px 5px -1px rgba(0,0,0,0.2),0 5px 8px 0 rgba(0,0,0,0.14),0 1px 14px 0 rgba(0,0,0,0.12)',
-    6: '0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12)',
-    7: '0 4px 5px -2px rgba(0,0,0,0.2),0 7px 10px 1px rgba(0,0,0,0.14),0 2px 16px 1px rgba(0,0,0,0.12)',
-    8: '0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12)',
-    9: '0 5px 6px -3px rgba(0,0,0,0.2),0 9px 12px 1px rgba(0,0,0,0.14),0 3px 16px 2px rgba(0,0,0,0.12)',
-    10: '0 6px 6px -3px rgba(0,0,0,0.2),0 10px 14px 1px rgba(0,0,0,0.14),0 4px 18px 3px rgba(0,0,0,0.12)',
-    11: '0 6px 7px -4px rgba(0,0,0,0.2),0 11px 15px 1px rgba(0,0,0,0.14),0 4px 20px 3px rgba(0,0,0,0.12)',
-    12: '0 7px 8px -4px rgba(0,0,0,0.2),0 12px 17px 2px rgba(0,0,0,0.14),0 5px 22px 4px rgba(0,0,0,0.12)',
-    13: '0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12)',
-    14: '0 7px 9px -4px rgba(0,0,0,0.2),0 14px 21px 2px rgba(0,0,0,0.14),0 5px 26px 4px rgba(0,0,0,0.12)',
-    15: '0 8px 9px -5px rgba(0,0,0,0.2),0 15px 22px 2px rgba(0,0,0,0.14),0 6px 28px 5px rgba(0,0,0,0.12)',
-    16: '0 8px 10px -5px rgba(0,0,0,0.2),0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12)',
-    17: '0 8px 11px -5px rgba(0,0,0,0.2),0 17px 26px 2px rgba(0,0,0,0.14),0 6px 32px 5px rgba(0,0,0,0.12)',
-    18: '0 9px 11px -5px rgba(0,0,0,0.2),0 18px 28px 2px rgba(0,0,0,0.14),0 7px 34px 6px rgba(0,0,0,0.12)',
-    19: '0 9px 12px -6px rgba(0,0,0,0.2),0 19px 29px 2px rgba(0,0,0,0.14),0 7px 36px 6px rgba(0,0,0,0.12)',
-    20: '0 10px 13px -6px rgba(0,0,0,0.2),0 20px 31px 3px rgba(0,0,0,0.14),0 8px 38px 7px rgba(0,0,0,0.12)',
-    21: '0 10px 13px -6px rgba(0,0,0,0.2),0 21px 33px 3px rgba(0,0,0,0.14),0 8px 40px 7px rgba(0,0,0,0.12)',
-    22: '0 10px 14px -6px rgba(0,0,0,0.2),0 22px 35px 3px rgba(0,0,0,0.14),0 8px 42px 7px rgba(0,0,0,0.12)',
-    23: '0 11px 14px -7px rgba(0,0,0,0.2),0 23px 36px 3px rgba(0,0,0,0.14),0 9px 44px 8px rgba(0,0,0,0.12)',
-    24: '0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12)'
-  },
   shadows: {
     0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
     1: '0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15)',
     2: '0 1px 2px rgba(0,0,0,0.3),0 2px 6px 2px rgba(0,0,0,0.15)',
-    3: '0 4px 8px 3px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.3)',
-    4: '0 6px 10px 4px rgba(0,0,0,0.15),0 2px 3px rgba(0,0,0,0.3)',
-    5: '0 8px 12px 6px rgba(0,0,0,0.15),0 4px 4px rgba(0,0,0,0.3)'
+    3: '0 1px 3px rgba(0,0,0,0.3),0 4px 8px 3px rgba(0,0,0,0.15)',
+    4: '0 2px 3px rgba(0,0,0,0.3),0 6px 10px 4px rgba(0,0,0,0.15)',
+    5: '0 4px 4px rgba(0,0,0,0.3),0 8px 12px 6px rgba(0,0,0,0.15)'
   },
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace'
   },
   fontSizes: {
@@ -169,6 +160,21 @@ export var theme = {
       fontFamily: 'body',
       lineHeight: 'body'
     },
+    'display-large': font('brand', 64, 57, -0.25, 400),
+    'display-medium': font('brand', 52, 45, 0, 400),
+    'display-small': font('brand', 44, 36, 0, 400),
+    'headline-large': font('brand', 40, 32, 0, 400),
+    'headline-medium': font('brand', 36, 28, 0, 400),
+    'headline-small': font('brand', 32, 24, 0, 400),
+    'title-large': font('brand', 28, 22, 0, 400),
+    'title-medium': font('plain', 24, 16, 0.15, 500),
+    'title-small': font('plain', 20, 14, 0.1, 500),
+    'label-large': font('plain', 20, 14, 0.1, 500),
+    'label-medium': font('plain', 16, 12, 0.5, 500),
+    'label-small': font('plain', 15, 11, 0.5, 500),
+    'body-large': font('plain', 24, 16, 0.5, 400),
+    'body-medium': font('plain', 20, 14, 0.25, 400),
+    'body-small': font('plain', 16, 12, 0.4, 400),
     h1: {
       variant: 'text.heading',
       fontWeight: 'light',
@@ -294,7 +300,7 @@ export var theme = {
   buttons: {
     variants: {
       base: {
-        variant: 'text.button',
+        variant: 'text.label-large',
         boxShadow: 'none',
         py: 0,
         px: "1.5rem",
@@ -359,30 +365,36 @@ export var theme = {
     elevations: {
       none: {},
       default: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: "box-shadow .28s ".concat(EASING_STANDARD),
         '&:hover': {
           boxShadow: 1
         },
-        '&:hover:disabled': {
+        '&:active,&:focus-visible,&:disabled': {
           boxShadow: 0
         }
       },
       elevated: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: "box-shadow .28s ".concat(EASING_STANDARD),
         boxShadow: 1,
         '&:hover': {
           boxShadow: 2
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 1
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
         }
       },
       floating: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: "box-shadow .28s ".concat(EASING_STANDARD),
         boxShadow: 3,
         ':hover': {
           boxShadow: 4
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 3
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0
         }
@@ -423,7 +435,7 @@ export var theme = {
         height: "2rem",
         borderRadius: 'small',
         outline: 'none',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)'
+        transition: "box-shadow .28s ".concat(EASING_STANDARD)
       },
       filled: {
         variant: 'chips.variants.base',
@@ -443,7 +455,7 @@ export var theme = {
         borderRadius: 'extra-large'
       }
     },
-    backgroundColorOverlay: 0.11
+    backgroundColorOverlay: 3
   },
   paper: {
     overlays: {
@@ -465,8 +477,8 @@ export var theme = {
   styles: {
     root: {
       body: {
-        fontFamily: 'body',
-        fontWeight: 'body',
+        fontFamily: 'plain',
+        fontWeight: 'regular',
         lineHeight: 'body',
         backgroundColor: 'surface',
         color: 'on.surface'