@aws-amplify/ui 5.8.0 → 6.0.0

package/dist/esm/machines/authenticator/utils.mjs

@@ -0,0 +1,71 @@
+import pickBy from 'lodash/pickBy.js';
+import '@aws-amplify/core/internals/utils';
+import '../../utils/setUserAgent/constants.mjs';
+import { isString } from '../../utils/utils.mjs';
+
+// default `autoSignIn` flag is `true`
+const DEFAULT_AUTO_SIGN_IN = true;
+const sanitizePhoneNumber = (dialCode, phoneNumber) => `${dialCode}${phoneNumber}`.replace(/[^A-Z0-9+]/gi, '');
+const selectUserAttributes = (_, key) => {
+    // Allowlist of Cognito User Pool Attributes (from OpenID Connect specification)
+    // See: https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html
+    switch (key) {
+        case 'address':
+        case 'birthdate':
+        case 'email':
+        case 'family_name':
+        case 'gender':
+        case 'given_name':
+        case 'locale':
+        case 'middle_name':
+        case 'name':
+        case 'nickname':
+        case 'phone_number':
+        case 'picture':
+        case 'preferred_username':
+        case 'profile':
+        case 'updated_at':
+        case 'website':
+        case 'zoneinfo':
+            return true;
+        // Otherwise, it's a custom attribute
+        default:
+            return key.startsWith('custom:');
+    }
+};
+const getUserAttributes = (formValues) => {
+    const { phone_number, ...userAttributes } = pickBy(formValues, selectUserAttributes);
+    // only include `phone_number` attribute in `userAttributes` if it has a value
+    if (isString(phone_number)) {
+        const { country_code } = formValues;
+        return {
+            ...userAttributes,
+            phone_number: sanitizePhoneNumber(country_code, phone_number),
+        };
+    }
+    return userAttributes;
+};
+const getSignUpInput = (username, formValues, loginMechanism) => {
+    const { password, ...values } = formValues;
+    const attributes = getUserAttributes(values);
+    const options = {
+        autoSignIn: DEFAULT_AUTO_SIGN_IN,
+        userAttributes: {
+            // use `username` value for `phone_number`
+            ...(loginMechanism === 'phone_number'
+                ? { ...attributes, phone_number: username }
+                : attributes),
+        },
+    };
+    return { username, password, options };
+};
+const getUsernameSignUp = ({ formValues, loginMechanisms, }) => {
+    const loginMechanism = loginMechanisms[0];
+    if (loginMechanism === 'phone_number') {
+        const { country_code, phone_number } = formValues;
+        return sanitizePhoneNumber(country_code, phone_number);
+    }
+    return formValues[loginMechanism];
+};
+
+export { getSignUpInput, getUserAttributes, getUsernameSignUp, sanitizePhoneNumber };

package/dist/esm/theme/breakpoints.mjs

@@ -1 +1,14 @@
-const e={values:{base:0,small:480,medium:768,large:992,xl:1280,xxl:1536},defaultBreakpoint:"base"};export{e as breakpoints};
+// Breakpoint unit is in pixels
+const breakpoints = {
+    values: {
+        base: 0,
+        small: 480,
+        medium: 768,
+        large: 992,
+        xl: 1280,
+        xxl: 1536,
+    },
+    defaultBreakpoint: 'base',
+};
+
+export { breakpoints };

package/dist/esm/theme/createTheme.mjs

@@ -1 +1,156 @@
-import e from"style-dictionary/lib/utils/deepExtend.js";import n from"style-dictionary/lib/utils/flattenProperties.js";import{defaultTheme as o}from"./defaultTheme.mjs";import{setupTokens as t,cssNameTransform as a,cssValue as i}from"./utils.mjs";const r=({token:e,path:n})=>{const o=`--${a({path:n})}`,{value:t}=e,r=i(e);return{name:o,original:t,path:n,value:r,toString:()=>`var(${o})`}};function s(a,i=o){const s=e([{},i,a]),m=t({tokens:s.tokens,setupToken:r}),{breakpoints:l,name:p}=s;let d=`[data-amplify-theme="${p}"] {\n`+n(m).map((e=>`${e.name}: ${e.value};`)).join("\n")+"\n}\n",c=[];return s.overrides&&(c=s.overrides.map((e=>{const o=t({tokens:e.tokens,setupToken:r}),a=n(o).map((e=>`${e.name}: ${e.value};`)).join("\n");if("selector"in e&&(d+=`\n${e.selector} {\n${a}\n}\n`),"mediaQuery"in e&&(d+=`\n@media (${e.mediaQuery}) {\n  [data-amplify-theme="${p}"] {\n    ${a}\n  }\n}\n`),"breakpoint"in e){const n=s.breakpoints.values[e.breakpoint];d+=`\n@media (min-width: ${n}px) {\n  [data-amplify-theme="${p}"] {\n    ${a}\n  }\n}\n`}return"colorMode"in e&&(d+=`\n@media (prefers-color-scheme: ${e.colorMode}) {\n          [data-amplify-theme="${p}"][data-amplify-color-mode="system"] {\n            ${a}\n            color-scheme: ${e.colorMode};\n          }\n        }\n`,d+=`\n[data-amplify-theme="${p}"][data-amplify-color-mode="${e.colorMode}"] {\n          ${a}\n          color-scheme: ${e.colorMode};\n        }\n`),Object.assign(Object.assign({},e),{tokens:o})}))),{tokens:m,breakpoints:l,name:p,cssText:d,overrides:c}}export{s as createTheme};
+import deepExtend from 'style-dictionary/lib/utils/deepExtend.js';
+import flattenProperties from 'style-dictionary/lib/utils/flattenProperties.js';
+import { defaultTheme } from './defaultTheme.mjs';
+import { setupTokens, cssNameTransform, cssValue } from './utils.mjs';
+import '@aws-amplify/core/internals/utils';
+import '../utils/setUserAgent/constants.mjs';
+import { isString } from '../utils/utils.mjs';
+
+// Internal Style Dictionary methods
+/**
+ * This will take a design token and add some data to it for it
+ * to be used in JS/CSS. It will create its CSS var name and update
+ * the value to use a CSS var if it is a reference. It will also
+ * add a `.toString()` method to make it easier to use in JS.
+ *
+ * We should see if there is a way to share this logic with style dictionary...
+ */
+const setupToken = ({ token, path }) => {
+    const name = `--${cssNameTransform({ path })}`;
+    const { value: original } = token;
+    const value = cssValue(token);
+    return { name, original, path, value, toString: () => `var(${name})` };
+};
+/**
+ * Takes a set of keys and a color name and returns an object of design tokens,
+ * used for applying a primary color at the theme level to our tokens.
+ *
+ * createColorPalette({keys: ['10','20',...], value: 'red'})
+ * returns {
+ *   10: { value: '{colors.red.10.value}' },
+ *   20: { value: '{colors.red.20.value}' },
+ *   ...
+ * }
+ */
+function createColorPalette({ keys, value }) {
+    return keys.reduce((acc, key) => {
+        return {
+            ...acc,
+            [key]: { value: `{colors.${value}.${key}.value}` },
+        };
+    }, {});
+}
+/**
+ * This will be used like `const myTheme = createTheme({})`
+ * `myTheme` can then be passed to a Provider or the generated CSS
+ * can be passed to a stylesheet at build-time or run-time.
+ * const myTheme = createTheme({})
+ * const myOtherTheme = createTheme({}, myTheme);
+ */
+function createTheme(theme, DefaultTheme = defaultTheme) {
+    // merge theme and DefaultTheme to get a complete theme
+    // deepExtend is an internal Style Dictionary method
+    // that performs a deep merge on n objects. We could change
+    // this to another 3p deep merge solution too.
+    const mergedTheme = deepExtend([{}, DefaultTheme, theme]);
+    const { primaryColor, secondaryColor } = mergedTheme;
+    // apply primaryColor and secondaryColor if present
+    if (isString(primaryColor)) {
+        mergedTheme.tokens.colors.primary = createColorPalette({
+            keys: Object.keys(mergedTheme.tokens.colors[primaryColor]),
+            value: primaryColor,
+        });
+    }
+    if (isString(secondaryColor)) {
+        mergedTheme.tokens.colors.secondary = createColorPalette({
+            keys: Object.keys(mergedTheme.tokens.colors[secondaryColor]),
+            value: secondaryColor,
+        });
+    }
+    // Setting up the tokens. This is similar to what Style Dictionary
+    // does. At the end of this, each token should have:
+    // - CSS variable name of itself
+    // - its value (reference to another CSS variable or raw value)
+    const tokens = setupTokens({
+        tokens: mergedTheme.tokens,
+        setupToken,
+    }); // Setting the type here because setupTokens is recursive
+    const { breakpoints, name } = mergedTheme;
+    // flattenProperties is another internal Style Dictionary function
+    // that creates an array of all tokens.
+    let cssText = `[data-amplify-theme="${name}"] {\n` +
+        flattenProperties(tokens)
+            .map((token) => `${token.name}: ${token.value};`)
+            .join('\n') +
+        `\n}\n`;
+    let overrides = [];
+    /**
+     * For each override, we setup the tokens and then generate the CSS.
+     * This allows us to have one single CSS string for all possible overrides
+     * and avoid re-renders in React, but also support other frameworks as well.
+     */
+    if (mergedTheme.overrides) {
+        overrides = mergedTheme.overrides.map((override) => {
+            const tokens = setupTokens({
+                tokens: override.tokens,
+                setupToken,
+            });
+            const customProperties = flattenProperties(tokens)
+                .map((token) => `${token.name}: ${token.value};`)
+                .join('\n');
+            // Overrides can have a selector, media query, breakpoint, or color mode
+            // for creating the selector
+            if ('selector' in override) {
+                cssText += `\n${override.selector} {\n${customProperties}\n}\n`;
+            }
+            if ('mediaQuery' in override) {
+                cssText += `\n@media (${override.mediaQuery}) {
+  [data-amplify-theme="${name}"] {
+    ${customProperties}
+  }
+}\n`;
+            }
+            if ('breakpoint' in override) {
+                const breakpoint = mergedTheme.breakpoints.values[override.breakpoint];
+                cssText += `\n@media (min-width: ${breakpoint}px) {
+  [data-amplify-theme="${name}"] {
+    ${customProperties}
+  }
+}\n`;
+            }
+            if ('colorMode' in override) {
+                cssText += `\n@media (prefers-color-scheme: ${override.colorMode}) {
+          [data-amplify-theme="${name}"][data-amplify-color-mode="system"] {
+            ${customProperties}
+            color-scheme: ${override.colorMode};
+          }
+        }\n`;
+                cssText += `\n[data-amplify-theme="${name}"][data-amplify-color-mode="${override.colorMode}"] {
+          ${customProperties}
+          color-scheme: ${override.colorMode};
+        }\n`;
+            }
+            return {
+                ...override,
+                tokens,
+            };
+        });
+    }
+    return {
+        tokens,
+        breakpoints,
+        name,
+        cssText,
+        // keep overrides separate from base theme
+        // this allows web platforms to use plain CSS scoped to a
+        // selector and only override the CSS vars needed. This
+        // means we could generate CSS at build-time in a postcss
+        // plugin, or do it at runtime and inject the CSS into a
+        // style tag.
+        // This also allows RN to dynamically switch themes in a
+        // provider.
+        overrides,
+    };
+}
+
+export { createTheme };

package/dist/esm/theme/defaultDarkModeOverride.mjs

@@ -1 +1,128 @@
-import{tokens as o}from"./tokens/index.mjs";const r={colors:{red:{10:o.colors.red[100],20:o.colors.red[90],40:o.colors.red[80],80:o.colors.red[40],90:o.colors.red[20],100:o.colors.red[10]},orange:{10:o.colors.orange[100],20:o.colors.orange[90],40:o.colors.orange[80],80:o.colors.orange[40],90:o.colors.orange[20],100:o.colors.orange[10]},yellow:{10:o.colors.yellow[100],20:o.colors.yellow[90],40:o.colors.yellow[80],80:o.colors.yellow[40],90:o.colors.yellow[20],100:o.colors.yellow[10]},green:{10:o.colors.green[100],20:o.colors.green[90],40:o.colors.green[80],80:o.colors.green[40],90:o.colors.green[20],100:o.colors.green[10]},teal:{10:o.colors.teal[100],20:o.colors.teal[90],40:o.colors.teal[80],80:o.colors.teal[40],90:o.colors.teal[20],100:o.colors.teal[10]},blue:{10:o.colors.blue[100],20:o.colors.blue[90],40:o.colors.blue[80],80:o.colors.blue[40],90:o.colors.blue[20],100:o.colors.blue[10]},purple:{10:o.colors.purple[100],20:o.colors.purple[90],40:o.colors.purple[80],80:o.colors.purple[40],90:o.colors.purple[20],100:o.colors.purple[10]},pink:{10:o.colors.pink[100],20:o.colors.pink[90],40:o.colors.pink[80],80:o.colors.pink[40],90:o.colors.pink[20],100:o.colors.pink[10]},neutral:{10:o.colors.neutral[100],20:o.colors.neutral[90],40:o.colors.neutral[80],80:o.colors.neutral[40],90:o.colors.neutral[20],100:o.colors.neutral[10]},font:{primary:"{colors.white}",secondary:"{colors.neutral.100}",tertiary:"{colors.neutral.90}",inverse:"{colors.neutral.10}"},background:{primary:"{colors.neutral.10}",secondary:"{colors.neutral.20}",tertiary:"{colors.neutral.40}"},border:{primary:"{colors.neutral.60}",secondary:"{colors.neutral.40}",tertiary:"{colors.neutral.20}"},overlay:{5:"hsla(0, 0%, 100%, 0.05)",10:"hsla(0, 0%, 100%, 0.1)",20:"hsla(0, 0%, 100%, 0.2)",30:"hsla(0, 0%, 100%, 0.3)",40:"hsla(0, 0%, 100%, 0.4)",50:"hsla(0, 0%, 100%, 0.5)",60:"hsla(0, 0%, 100%, 0.6)",70:"hsla(0, 0%, 100%, 0.7)",80:"hsla(0, 0%, 100%, 0.8)",90:"hsla(0, 0%, 100%, 0.9)"}}},l={colorMode:"dark",tokens:r},e=Object.assign({},r);export{l as defaultDarkModeOverride,e as reactNativeDarkTokens};
+import { tokens } from './tokens/index.mjs';
+
+const darkModeTokens = {
+    colors: {
+        red: {
+            10: tokens.colors.red[100],
+            20: tokens.colors.red[90],
+            40: tokens.colors.red[80],
+            // 60 doesn't change
+            80: tokens.colors.red[40],
+            90: tokens.colors.red[20],
+            100: tokens.colors.red[10],
+        },
+        orange: {
+            10: tokens.colors.orange[100],
+            20: tokens.colors.orange[90],
+            40: tokens.colors.orange[80],
+            // 60 doesn't change
+            80: tokens.colors.orange[40],
+            90: tokens.colors.orange[20],
+            100: tokens.colors.orange[10],
+        },
+        yellow: {
+            10: tokens.colors.yellow[100],
+            20: tokens.colors.yellow[90],
+            40: tokens.colors.yellow[80],
+            // 60 doesn't change
+            80: tokens.colors.yellow[40],
+            90: tokens.colors.yellow[20],
+            100: tokens.colors.yellow[10],
+        },
+        green: {
+            10: tokens.colors.green[100],
+            20: tokens.colors.green[90],
+            40: tokens.colors.green[80],
+            // 60 doesn't change
+            80: tokens.colors.green[40],
+            90: tokens.colors.green[20],
+            100: tokens.colors.green[10],
+        },
+        teal: {
+            10: tokens.colors.teal[100],
+            20: tokens.colors.teal[90],
+            40: tokens.colors.teal[80],
+            // 60 doesn't change
+            80: tokens.colors.teal[40],
+            90: tokens.colors.teal[20],
+            100: tokens.colors.teal[10],
+        },
+        blue: {
+            10: tokens.colors.blue[100],
+            20: tokens.colors.blue[90],
+            40: tokens.colors.blue[80],
+            // 60 doesn't change
+            80: tokens.colors.blue[40],
+            90: tokens.colors.blue[20],
+            100: tokens.colors.blue[10],
+        },
+        purple: {
+            10: tokens.colors.purple[100],
+            20: tokens.colors.purple[90],
+            40: tokens.colors.purple[80],
+            // 60 doesn't change
+            80: tokens.colors.purple[40],
+            90: tokens.colors.purple[20],
+            100: tokens.colors.purple[10],
+        },
+        pink: {
+            10: tokens.colors.pink[100],
+            20: tokens.colors.pink[90],
+            40: tokens.colors.pink[80],
+            // 60 doesn't change
+            80: tokens.colors.pink[40],
+            90: tokens.colors.pink[20],
+            100: tokens.colors.pink[10],
+        },
+        neutral: {
+            10: tokens.colors.neutral[100],
+            20: tokens.colors.neutral[90],
+            40: tokens.colors.neutral[80],
+            // 60 doesn't change
+            80: tokens.colors.neutral[40],
+            90: tokens.colors.neutral[20],
+            100: tokens.colors.neutral[10],
+        },
+        font: {
+            primary: '{colors.white}',
+            secondary: '{colors.neutral.100}',
+            tertiary: '{colors.neutral.90}',
+            inverse: '{colors.neutral.10}',
+        },
+        background: {
+            primary: '{colors.neutral.10}',
+            secondary: '{colors.neutral.20}',
+            tertiary: '{colors.neutral.40}',
+        },
+        border: {
+            primary: '{colors.neutral.60}',
+            secondary: '{colors.neutral.40}',
+            tertiary: '{colors.neutral.20}',
+        },
+        overlay: {
+            5: 'hsla(0, 0%, 100%, 0.05)',
+            10: 'hsla(0, 0%, 100%, 0.1)',
+            20: 'hsla(0, 0%, 100%, 0.2)',
+            30: 'hsla(0, 0%, 100%, 0.3)',
+            40: 'hsla(0, 0%, 100%, 0.4)',
+            50: 'hsla(0, 0%, 100%, 0.5)',
+            60: 'hsla(0, 0%, 100%, 0.6)',
+            70: 'hsla(0, 0%, 100%, 0.7)',
+            80: 'hsla(0, 0%, 100%, 0.8)',
+            90: 'hsla(0, 0%, 100%, 0.9)',
+        },
+    },
+};
+/**
+ * A basic dark mode that just flips the base color
+ * palette.
+ */
+const defaultDarkModeOverride = {
+    colorMode: 'dark',
+    tokens: darkModeTokens,
+};
+const reactNativeDarkTokens = {
+    ...darkModeTokens,
+};
+
+export { defaultDarkModeOverride, reactNativeDarkTokens };

package/dist/esm/theme/defaultTheme.mjs

@@ -1 +1,10 @@
-import{tokens as e}from"./tokens/index.mjs";import{breakpoints as o}from"./breakpoints.mjs";const t={tokens:e,breakpoints:o,name:"default-theme"};export{t as defaultTheme};
+import { tokens } from './tokens/index.mjs';
+import { breakpoints } from './breakpoints.mjs';
+
+const defaultTheme = {
+    tokens,
+    breakpoints,
+    name: 'default-theme',
+};
+
+export { defaultTheme };

package/dist/esm/theme/tokens/borderWidths.mjs

@@ -1 +1,7 @@
-const e={small:{value:"1px"},medium:{value:"2px"},large:{value:"3px"}};export{e as borderWidths};
+const borderWidths = {
+    small: { value: '1px' },
+    medium: { value: '2px' },
+    large: { value: '3px' },
+};
+
+export { borderWidths };

package/dist/esm/theme/tokens/colors.mjs

@@ -1 +1,166 @@
-const l={red:{10:{value:"hsl(0, 75%, 95%)"},20:{value:"hsl(0, 75%, 85%)"},40:{value:"hsl(0, 75%, 75%)"},60:{value:"hsl(0, 50%, 50%)"},80:{value:"hsl(0, 95%, 30%)"},90:{value:"hsl(0, 100%, 20%)"},100:{value:"hsl(0, 100%, 15%)"}},orange:{10:{value:"hsl(30, 75%, 95%)"},20:{value:"hsl(30, 75%, 85%)"},40:{value:"hsl(30, 75%, 75%)"},60:{value:"hsl(30, 50%, 50%)"},80:{value:"hsl(30, 95%, 30%)"},90:{value:"hsl(30, 100%, 20%)"},100:{value:"hsl(30, 100%, 15%)"}},yellow:{10:{value:"hsl(60, 75%, 95%)"},20:{value:"hsl(60, 75%, 85%)"},40:{value:"hsl(60, 75%, 75%)"},60:{value:"hsl(60, 50%, 50%)"},80:{value:"hsl(60, 95%, 30%)"},90:{value:"hsl(60, 100%, 20%)"},100:{value:"hsl(60, 100%, 15%)"}},green:{10:{value:"hsl(130, 60%, 95%)"},20:{value:"hsl(130, 60%, 90%)"},40:{value:"hsl(130, 44%, 63%)"},60:{value:"hsl(130, 43%, 46%)"},80:{value:"hsl(130, 33%, 37%)"},90:{value:"hsl(130, 27%, 29%)"},100:{value:"hsl(130, 22%, 23%)"}},teal:{10:{value:"hsl(190, 75%, 95%)"},20:{value:"hsl(190, 75%, 85%)"},40:{value:"hsl(190, 70%, 70%)"},60:{value:"hsl(190, 50%, 50%)"},80:{value:"hsl(190, 95%, 30%)"},90:{value:"hsl(190, 100%, 20%)"},100:{value:"hsl(190, 100%, 15%)"}},blue:{10:{value:"hsl(220, 95%, 95%)"},20:{value:"hsl(220, 85%, 85%)"},40:{value:"hsl(220, 70%, 70%)"},60:{value:"hsl(220, 50%, 50%)"},80:{value:"hsl(220, 95%, 30%)"},90:{value:"hsl(220, 100%, 20%)"},100:{value:"hsl(220, 100%, 15%)"}},purple:{10:{value:"hsl(300, 95%, 95%)"},20:{value:"hsl(300, 85%, 85%)"},40:{value:"hsl(300, 70%, 70%)"},60:{value:"hsl(300, 50%, 50%)"},80:{value:"hsl(300, 95%, 30%)"},90:{value:"hsl(300, 100%, 20%)"},100:{value:"hsl(300, 100%, 15%)"}},pink:{10:{value:"hsl(340, 95%, 95%)"},20:{value:"hsl(340, 90%, 85%)"},40:{value:"hsl(340, 70%, 70%)"},60:{value:"hsl(340, 50%, 50%)"},80:{value:"hsl(340, 95%, 30%)"},90:{value:"hsl(340, 100%, 20%)"},100:{value:"hsl(340, 100%, 15%)"}},neutral:{10:{value:"hsl(210, 5%, 98%)"},20:{value:"hsl(210, 5%, 94%)"},40:{value:"hsl(210, 5%, 87%)"},60:{value:"hsl(210, 10%, 58%)"},80:{value:"hsl(210, 10%, 40%)"},90:{value:"hsl(210, 25%, 25%)"},100:{value:"hsl(210, 50%, 10%)"}},brand:{primary:{10:{value:"{colors.teal.10.value}"},20:{value:"{colors.teal.20.value}"},40:{value:"{colors.teal.40.value}"},60:{value:"{colors.teal.60.value}"},80:{value:"{colors.teal.80.value}"},90:{value:"{colors.teal.90.value}"},100:{value:"{colors.teal.100.value}"}},secondary:{10:{value:"{colors.purple.10.value}"},20:{value:"{colors.purple.20.value}"},40:{value:"{colors.purple.40.value}"},60:{value:"{colors.purple.60.value}"},80:{value:"{colors.purple.80.value}"},90:{value:"{colors.purple.90.value}"},100:{value:"{colors.purple.100.value}"}}},font:{primary:{value:"{colors.neutral.100.value}"},secondary:{value:"{colors.neutral.90.value}"},tertiary:{value:"{colors.neutral.80.value}"},disabled:{value:"{colors.neutral.60.value}"},inverse:{value:"{colors.white.value}"},interactive:{value:"{colors.brand.primary.80.value}"},hover:{value:"{colors.brand.primary.90.value}"},focus:{value:"{colors.brand.primary.100.value}"},active:{value:"{colors.brand.primary.100.value}"},info:{value:"{colors.blue.90.value}"},warning:{value:"{colors.orange.90.value}"},error:{value:"{colors.red.90.value}"},success:{value:"{colors.green.90.value}"}},background:{primary:{value:"{colors.white.value}"},secondary:{value:"{colors.neutral.10.value}"},tertiary:{value:"{colors.neutral.20.value}"},quaternary:{value:"{colors.neutral.60.value}"},disabled:{value:"{colors.background.tertiary.value}"},info:{value:"{colors.blue.10.value}"},warning:{value:"{colors.orange.10.value}"},error:{value:"{colors.red.10.value}"},success:{value:"{colors.green.10.value}"}},border:{primary:{value:"{colors.neutral.60.value}"},secondary:{value:"{colors.neutral.40.value}"},tertiary:{value:"{colors.neutral.20.value}"},disabled:{value:"{colors.border.tertiary.value}"},pressed:{value:"{colors.brand.primary.100.value}"},focus:{value:"{colors.brand.primary.100.value}"},error:{value:"{colors.red.80.value}"},info:{value:"{colors.blue.80.value}"},success:{value:"{colors.green.80.value}"},warning:{value:"{colors.orange.80.value}"}},shadow:{primary:{value:"hsla(210, 50%, 10%, 0.25)"},secondary:{value:"hsla(210, 50%, 10%, 0.15)"},tertiary:{value:"hsla(210, 50%, 10%, 0.05)"}},overlay:{5:{value:"hsla(0, 0%, 0%, 0.05)"},10:{value:"hsla(0, 0%, 0%, 0.1)"},20:{value:"hsla(0, 0%, 0%, 0.2)"},30:{value:"hsla(0, 0%, 0%, 0.3)"},40:{value:"hsla(0, 0%, 0%, 0.4)"},50:{value:"hsla(0, 0%, 0%, 0.5)"},60:{value:"hsla(0, 0%, 0%, 0.6)"},70:{value:"hsla(0, 0%, 0%, 0.7)"},80:{value:"hsla(0, 0%, 0%, 0.8)"},90:{value:"hsla(0, 0%, 0%, 0.9)"}},black:{value:"hsl(0, 0%, 0%)"},white:{value:"hsl(0, 0%, 100%)"},transparent:{value:"transparent"}};export{l as colors};
+const colors = {
+    red: {
+        10: { value: 'hsl(0, 75%, 95%)' },
+        20: { value: 'hsl(0, 75%, 85%)' },
+        40: { value: 'hsl(0, 75%, 75%)' },
+        60: { value: 'hsl(0, 50%, 50%)' },
+        80: { value: 'hsl(0, 95%, 30%)' },
+        90: { value: 'hsl(0, 100%, 20%)' },
+        100: { value: 'hsl(0, 100%, 15%)' },
+    },
+    orange: {
+        10: { value: 'hsl(30, 75%, 95%)' },
+        20: { value: 'hsl(30, 75%, 85%)' },
+        40: { value: 'hsl(30, 75%, 75%)' },
+        60: { value: 'hsl(30, 50%, 50%)' },
+        80: { value: 'hsl(30, 95%, 30%)' },
+        90: { value: 'hsl(30, 100%, 20%)' },
+        100: { value: 'hsl(30, 100%, 15%)' },
+    },
+    yellow: {
+        10: { value: 'hsl(60, 75%, 95%)' },
+        20: { value: 'hsl(60, 75%, 85%)' },
+        40: { value: 'hsl(60, 75%, 75%)' },
+        60: { value: 'hsl(60, 50%, 50%)' },
+        80: { value: 'hsl(60, 95%, 30%)' },
+        90: { value: 'hsl(60, 100%, 20%)' },
+        100: { value: 'hsl(60, 100%, 15%)' },
+    },
+    green: {
+        10: { value: 'hsl(130, 60%, 95%)' },
+        20: { value: 'hsl(130, 60%, 90%)' },
+        40: { value: 'hsl(130, 44%, 63%)' },
+        60: { value: 'hsl(130, 43%, 46%)' },
+        80: { value: 'hsl(130, 33%, 37%)' },
+        90: { value: 'hsl(130, 27%, 29%)' },
+        100: { value: 'hsl(130, 22%, 23%)' },
+    },
+    teal: {
+        10: { value: 'hsl(190, 75%, 95%)' },
+        20: { value: 'hsl(190, 75%, 85%)' },
+        40: { value: 'hsl(190, 70%, 70%)' },
+        60: { value: 'hsl(190, 50%, 50%)' },
+        80: { value: 'hsl(190, 95%, 30%)' },
+        90: { value: 'hsl(190, 100%, 20%)' },
+        100: { value: 'hsl(190, 100%, 15%)' },
+    },
+    blue: {
+        10: { value: 'hsl(220, 95%, 95%)' },
+        20: { value: 'hsl(220, 85%, 85%)' },
+        40: { value: 'hsl(220, 70%, 70%)' },
+        60: { value: 'hsl(220, 50%, 50%)' },
+        80: { value: 'hsl(220, 95%, 30%)' },
+        90: { value: 'hsl(220, 100%, 20%)' },
+        100: { value: 'hsl(220, 100%, 15%)' },
+    },
+    purple: {
+        10: { value: 'hsl(300, 95%, 95%)' },
+        20: { value: 'hsl(300, 85%, 85%)' },
+        40: { value: 'hsl(300, 70%, 70%)' },
+        60: { value: 'hsl(300, 50%, 50%)' },
+        80: { value: 'hsl(300, 95%, 30%)' },
+        90: { value: 'hsl(300, 100%, 20%)' },
+        100: { value: 'hsl(300, 100%, 15%)' },
+    },
+    pink: {
+        10: { value: 'hsl(340, 95%, 95%)' },
+        20: { value: 'hsl(340, 90%, 85%)' },
+        40: { value: 'hsl(340, 70%, 70%)' },
+        60: { value: 'hsl(340, 50%, 50%)' },
+        80: { value: 'hsl(340, 95%, 30%)' },
+        90: { value: 'hsl(340, 100%, 20%)' },
+        100: { value: 'hsl(340, 100%, 15%)' },
+    },
+    neutral: {
+        10: { value: 'hsl(210, 5%, 98%)' },
+        20: { value: 'hsl(210, 5%, 94%)' },
+        40: { value: 'hsl(210, 5%, 87%)' },
+        60: { value: 'hsl(210, 10%, 58%)' },
+        80: { value: 'hsl(210, 10%, 40%)' },
+        90: { value: 'hsl(210, 25%, 25%)' },
+        100: { value: 'hsl(210, 50%, 10%)' },
+    },
+    primary: {
+        10: { value: '{colors.teal.10.value}' },
+        20: { value: '{colors.teal.20.value}' },
+        40: { value: '{colors.teal.40.value}' },
+        60: { value: '{colors.teal.60.value}' },
+        80: { value: '{colors.teal.80.value}' },
+        90: { value: '{colors.teal.90.value}' },
+        100: { value: '{colors.teal.100.value}' },
+    },
+    secondary: {
+        10: { value: '{colors.purple.10.value}' },
+        20: { value: '{colors.purple.20.value}' },
+        40: { value: '{colors.purple.40.value}' },
+        60: { value: '{colors.purple.60.value}' },
+        80: { value: '{colors.purple.80.value}' },
+        90: { value: '{colors.purple.90.value}' },
+        100: { value: '{colors.purple.100.value}' },
+    },
+    font: {
+        primary: { value: '{colors.neutral.100.value}' },
+        secondary: { value: '{colors.neutral.90.value}' },
+        tertiary: { value: '{colors.neutral.80.value}' },
+        disabled: { value: '{colors.neutral.60.value}' },
+        inverse: { value: '{colors.white.value}' },
+        interactive: { value: '{colors.primary.80.value}' },
+        // Hover and Focus colors are intentionally different colors.
+        // This allows users to distinguish between the current keyboard focus
+        // and the location of their pointer
+        hover: { value: '{colors.primary.90.value}' },
+        // Focus color is set to 100 to ensure enough contrast for accessibility
+        focus: { value: '{colors.primary.100.value}' },
+        active: { value: '{colors.primary.100.value}' },
+        info: { value: '{colors.blue.90.value}' },
+        warning: { value: '{colors.orange.90.value}' },
+        error: { value: '{colors.red.90.value}' },
+        success: { value: '{colors.green.90.value}' },
+    },
+    background: {
+        primary: { value: '{colors.white.value}' },
+        secondary: { value: '{colors.neutral.10.value}' },
+        tertiary: { value: '{colors.neutral.20.value}' },
+        quaternary: { value: '{colors.neutral.60.value}' },
+        disabled: { value: '{colors.background.tertiary.value}' },
+        info: { value: '{colors.blue.10.value}' },
+        warning: { value: '{colors.orange.10.value}' },
+        error: { value: '{colors.red.10.value}' },
+        success: { value: '{colors.green.10.value}' },
+    },
+    border: {
+        primary: { value: '{colors.neutral.60.value}' },
+        secondary: { value: '{colors.neutral.40.value}' },
+        tertiary: { value: '{colors.neutral.20.value}' },
+        disabled: { value: '{colors.border.tertiary.value}' },
+        pressed: { value: '{colors.primary.100.value}' },
+        // Focus color is set to 100 to ensure enough contrast for accessibility
+        focus: { value: '{colors.primary.100.value}' },
+        error: { value: '{colors.red.80.value}' },
+        info: { value: '{colors.blue.80.value}' },
+        success: { value: '{colors.green.80.value}' },
+        warning: { value: '{colors.orange.80.value}' },
+    },
+    shadow: {
+        primary: { value: 'hsla(210, 50%, 10%, 0.25)' },
+        secondary: { value: 'hsla(210, 50%, 10%, 0.15)' },
+        tertiary: { value: 'hsla(210, 50%, 10%, 0.05)' },
+    },
+    overlay: {
+        5: { value: 'hsla(0, 0%, 0%, 0.05)' },
+        10: { value: 'hsla(0, 0%, 0%, 0.1)' },
+        20: { value: 'hsla(0, 0%, 0%, 0.2)' },
+        30: { value: 'hsla(0, 0%, 0%, 0.3)' },
+        40: { value: 'hsla(0, 0%, 0%, 0.4)' },
+        50: { value: 'hsla(0, 0%, 0%, 0.5)' },
+        60: { value: 'hsla(0, 0%, 0%, 0.6)' },
+        70: { value: 'hsla(0, 0%, 0%, 0.7)' },
+        80: { value: 'hsla(0, 0%, 0%, 0.8)' },
+        90: { value: 'hsla(0, 0%, 0%, 0.9)' },
+    },
+    black: { value: 'hsl(0, 0%, 0%)' },
+    white: { value: 'hsl(0, 0%, 100%)' },
+    transparent: { value: 'transparent' },
+};
+
+export { colors };

package/dist/esm/theme/tokens/components/accordion.mjs

@@ -0,0 +1,47 @@
+const accordion = {
+    backgroundColor: { value: '{colors.background.primary.value}' },
+    item: {
+        borderColor: { value: '{colors.border.secondary.value}' },
+        borderWidth: { value: '{borderWidths.small.value}' },
+        borderStyle: { value: 'solid' },
+        borderRadius: { value: '{radii.small.value}' },
+        trigger: {
+            alignItems: { value: 'center' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            color: { value: 'inherit' },
+            gap: { value: '{space.small.value}' },
+            justifyContent: { value: 'space-between' },
+            paddingBlock: { value: '{space.xs.value}' },
+            paddingInline: { value: '{space.small.value}' },
+            _hover: {
+                color: { value: 'inherit' },
+                backgroundColor: { value: '{colors.overlay.5.value}' },
+            },
+            _focus: {
+                borderColor: { value: '{colors.border.focus.value}' },
+                boxShadow: {
+                    value: {
+                        offsetX: '0',
+                        offsetY: '0',
+                        blurRadius: '0',
+                        spreadRadius: '2px',
+                        color: '{colors.border.focus.value}',
+                    },
+                },
+            },
+        },
+        content: {
+            color: { value: 'inherit' },
+            paddingInline: { value: '{space.small.value}' },
+            paddingBlockEnd: { value: '{space.small.value}' },
+            paddingBlockStart: { value: '{space.xxxs.value}' },
+        },
+        icon: {
+            color: { value: '{colors.font.tertiary.value}' },
+            transitionDuration: { value: '{time.medium.value}' },
+            transitionTimingFunction: { value: 'cubic-bezier(0.87, 0, 0.13, 1)' },
+        },
+    },
+};
+
+export { accordion };

package/dist/esm/theme/tokens/components/alert.mjs

@@ -1 +1,35 @@
-const o={alignItems:{value:"center"},justifyContent:{value:"space-between"},color:{value:"{colors.font.primary.value}"},backgroundColor:{value:"{colors.background.tertiary.value}"},paddingBlock:{value:"{space.small.value}"},paddingInline:{value:"{space.medium.value}"},icon:{size:{value:"{fontSizes.xl.value}"}},heading:{fontSize:{value:"{fontSizes.medium.value}"},fontWeight:{value:"{fontWeights.bold.value}"}},info:{color:{value:"{colors.font.info.value}"},backgroundColor:{value:"{colors.background.info.value}"}},error:{color:{value:"{colors.font.error.value}"},backgroundColor:{value:"{colors.background.error.value}"}},warning:{color:{value:"{colors.font.warning.value}"},backgroundColor:{value:"{colors.background.warning.value}"}},success:{color:{value:"{colors.font.success.value}"},backgroundColor:{value:"{colors.background.success.value}"}}};export{o as alert};
+const alert = {
+    // Default styles
+    alignItems: { value: 'center' },
+    justifyContent: { value: 'space-between' },
+    color: { value: '{colors.font.primary.value}' },
+    backgroundColor: { value: '{colors.background.tertiary.value}' },
+    paddingBlock: { value: '{space.small.value}' },
+    paddingInline: { value: '{space.medium.value}' },
+    icon: {
+        size: { value: '{fontSizes.xl.value}' },
+    },
+    heading: {
+        fontSize: { value: '{fontSizes.medium.value}' },
+        fontWeight: { value: '{fontWeights.bold.value}' },
+    },
+    // Variations
+    info: {
+        color: { value: '{colors.font.info.value}' },
+        backgroundColor: { value: '{colors.background.info.value}' },
+    },
+    error: {
+        color: { value: '{colors.font.error.value}' },
+        backgroundColor: { value: '{colors.background.error.value}' },
+    },
+    warning: {
+        color: { value: '{colors.font.warning.value}' },
+        backgroundColor: { value: '{colors.background.warning.value}' },
+    },
+    success: {
+        color: { value: '{colors.font.success.value}' },
+        backgroundColor: { value: '{colors.background.success.value}' },
+    },
+};
+
+export { alert };