npm - @basic-ui/material - Versions diffs - 1.0.0-alpha.32 → 1.0.0-alpha.33 - Mend

@basic-ui/material 1.0.0-alpha.32 → 1.0.0-alpha.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/build/cjs/index.js +9 -7
package/build/cjs/index.js.map +1 -1
package/build/esm/Chip/ButtonChip.d.ts +1 -1
package/build/esm/Combobox/Combobox.d.ts +7 -7
package/build/esm/Select/CustomContainerExample.d.ts +3 -0
package/build/esm/Select/CustomContainerExample.js +59 -0
package/build/esm/Select/CustomContainerExample.js.map +1 -0
package/build/esm/Select/Select.d.ts +4 -2
package/build/esm/Select/Select.js +4 -3
package/build/esm/Select/Select.js.map +1 -1
package/build/esm/Table/TableHead.d.ts +1 -1
package/build/esm/TextField/FilledContainer.d.ts +4 -1
package/build/esm/TextField/FilledContainer.js +5 -5
package/build/esm/TextField/FilledContainer.js.map +1 -1
package/build/esm/TextField/TextField.d.ts +1 -1
package/build/esm/ThemeExplorer/ThemeBuilder.js +13 -2
package/build/esm/ThemeExplorer/ThemeBuilder.js.map +1 -1
package/build/esm/ThemeExplorer/ThemeColors.js +33 -15
package/build/esm/ThemeExplorer/ThemeColors.js.map +1 -1
package/build/esm/ThemeExplorer/components.d.ts +1 -1
package/build/esm/ThemeExplorer/components.js +11 -13
package/build/esm/ThemeExplorer/components.js.map +1 -1
package/build/esm/ThemeExplorer/makeColorScheme.d.ts +32 -4
package/build/esm/ThemeExplorer/makeColorScheme.js +41 -8
package/build/esm/ThemeExplorer/makeColorScheme.js.map +1 -1
package/build/tsconfig-build.tsbuildinfo +1 -1
package/package.json +2 -2
package/src/Select/CustomContainerExample.tsx +59 -0
package/src/Select/Select.story.tsx +22 -1
package/src/Select/Select.tsx +6 -2
package/src/TextField/FilledContainer.tsx +6 -5
package/src/ThemeExplorer/ThemeBuilder.tsx +16 -5
package/src/ThemeExplorer/ThemeColors.tsx +39 -15
package/src/ThemeExplorer/components.tsx +12 -20
package/src/ThemeExplorer/makeColorScheme.tsx +39 -6

package/build/esm/ThemeExplorer/components.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 export var ColorItem = /*#__PURE__*/memo(function (props) {
   var token = props.token,
       style = props.style,
-      width = props.width,
+      flex = props.flex,
       _props$height = props.height,
       height = _props$height === void 0 ? '100%' : _props$height;
@@ -44,7 +44,7 @@ export var ColorItem = /*#__PURE__*/memo(function (props) {
     }),
     children: /*#__PURE__*/_jsx(Text, {
       as: "div",
-      variant: "body-small",
+      variant: "body-medium",
       style: style,
       ref: function ref(_ref) {
         if (_ref) {
@@ -52,12 +52,10 @@ export var ColorItem = /*#__PURE__*/memo(function (props) {
         }
       },
       sx: {
-        width: width,
+        flex: flex,
         height: height,
-        px: '10px',
-        py: '10px',
-        fontSize: '11px',
-        lineHeight: '11px',
+        px: '12px',
+        py: '12px',
         textOverflow: 'ellipsis',
         overflow: 'hidden'
       },
@@ -74,23 +72,23 @@ export var ColorRow = /*#__PURE__*/memo(function (props) {
     display: "flex",
     sx: {
       ':first-of-type': {
-        borderTopLeftRadius: 'extra-large',
-        borderTopRightRadius: 'extra-large',
+        borderTopLeftRadius: 'large',
+        borderTopRightRadius: 'large',
         overflow: 'hidden'
       },
       ':last-of-type': {
-        borderBottomLeftRadius: 'extra-large',
-        borderBottomRightRadius: 'extra-large',
+        borderBottomLeftRadius: 'large',
+        borderBottomRightRadius: 'large',
         overflow: 'hidden'
       },
       height: height
     },
-    children: colors.map(function (_ref2, idx) {
+    children: colors.map(function (_ref2) {
       var token = _ref2.token,
           bg = _ref2.bg,
           color = _ref2.color;
       return /*#__PURE__*/_jsx(ColorItem, {
-        width: colors.length % 2 === 1 ? idx === colors.length - 1 ? '50%' : '25%' : '33.33%',
+        flex: 1,
         token: token,
         style: {
           backgroundColor: bg,

package/build/esm/ThemeExplorer/components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components.js","names":["memo","useState","rgb","parseToHsl","parseToRgb","hexFromArgb","TonalPalette","Box","Tooltip","Text","ColorItem","props","token","style","width","height","computedColor","setComputedColor","hslColor","hue","saturation","lightness","rgbColor","red","green","blue","Math","round","ref","window","getComputedStyle","backgroundColor","px","py","fontSize","lineHeight","textOverflow","overflow","ColorRow","colors","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","map","idx","bg","color","length","TonalColorItem","level","TonalColorsFromToken","position","left","top","colorInt","parseInt","slice","tonal","fromInt","TonalColors","luminanceLevels","palette","tone","makeColorArrayForToken"],"sources":["../../../src/ThemeExplorer/components.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { memo, useState } from 'react';\nimport { rgb, parseToHsl, parseToRgb } from 'polished';\nimport { hexFromArgb, TonalPalette } from '@material/material-color-utilities';\n\nimport { Box, Tooltip, Text } from '../';\n\nexport const ColorItem = memo(\n (props: {\n token: string;\n style: CSSProperties;\n height?: number;\n width: string;\n }) => {\n const { token, style, width, height = '100%' } = props;\n const [computedColor, setComputedColor] = useState<string>();\n const hslColor = computedColor\n ? parseToHsl(computedColor)\n : { hue: 0, saturation: 0, lightness: 0 };\n const rgbColor = computedColor\n ? parseToRgb(computedColor)\n : { red: 0, green: 0, blue: 0 };\n return (\n <Tooltip\n label={\n computedColor ? (\n <>\n <p>{token}</p>\n <p>{rgb(rgbColor)}</p>\n <p>\n rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\n </p>\n <p>\n hsl({Math.round(hslColor.hue)},{' '}\n {Math.round(hslColor.saturation * 100)}%,{' '}\n {Math.round(hslColor.lightness * 100)}%)\n </p>\n </>\n ) : (\n <p>{token}</p>\n )\n }\n >\n <Text\n as=\"div\"\n variant=\"body-small\"\n style={style}\n ref={(ref: HTMLDivElement \| null) => {\n if (ref) {\n setComputedColor(window.getComputedStyle(ref).backgroundColor);\n }\n }}\n sx={{\n width,\n height,\n px: '10px',\n py: '10px',\n fontSize: '11px',\n lineHeight: '11px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }}\n >\n {token}\n </Text>\n </Tooltip>\n );\n }\n);\n\nexport const ColorRow = memo(\n (props: {\n colors: { token: string; bg: string; color: string }[];\n height?: number;\n }) => {\n const { colors, height = 50 } = props;\n return (\n <Box\n width=\"100%\"\n display=\"flex\"\n sx={{\n ':first-of-type': {\n borderTopLeftRadius: 'extra-large',\n borderTopRightRadius: 'extra-large',\n overflow: 'hidden',\n },\n ':last-of-type': {\n borderBottomLeftRadius: 'extra-large',\n borderBottomRightRadius: 'extra-large',\n overflow: 'hidden',\n },\n height,\n }}\n >\n {colors.map(({ token, bg, color }, idx) => (\n <ColorItem\n width={\n colors.length % 2 === 1\n ? idx === colors.length - 1\n ? '50%'\n : '25%'\n : '33.33%'\n }\n key={token}\n token={token}\n style={{ backgroundColor: bg, color: color }}\n />\n ))}\n </Box>\n );\n }\n);\n\nexport const TonalColorItem = memo(\n (props: { color: string; level: number }) => {\n const { level, color } = props;\n const hslColor = parseToHsl(color);\n const rgbColor = parseToRgb(color);\n return (\n <Tooltip\n label={\n <>\n <p>Luminance: {level}</p>\n <p>{rgb(rgbColor)}</p>\n <p>\n rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\n </p>\n <p>\n hsl({Math.round(hslColor.hue)},{' '}\n {Math.round(hslColor.saturation * 100)}%,{' '}\n {Math.round(hslColor.lightness * 100)}%)\n </p>\n </>\n }\n >\n <Text\n key={level}\n as=\"div\"\n variant=\"body-small\"\n flex={1}\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n style={{\n backgroundColor: color,\n color: level <= 50 ? '#fff' : '#000',\n }}\n >\n {level}\n </Text>\n </Tooltip>\n );\n }\n);\n\nexport const TonalColorsFromToken = memo((props: { token: string }) => {\n const [computedColor, setComputedColor] = useState<string>();\n if (!computedColor) {\n return (\n <Box\n ref={(ref: HTMLDivElement \| null) => {\n if (ref) {\n setComputedColor(window.getComputedStyle(ref).backgroundColor);\n }\n }}\n bg={props.token}\n style={{ position: 'fixed', left: -5000, top: -5000 }}\n />\n );\n }\n const colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);\n const tonal = TonalPalette.fromInt(colorInt);\n\n return <TonalColors palette={tonal} />;\n});\n\nexport const TonalColors = memo((props: { palette: TonalPalette }) => {\n const luminanceLevels = [\n 0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,\n ];\n return (\n <Box display=\"flex\" height=\"72px\" width=\"100%\">\n {luminanceLevels.map((level) => (\n <TonalColorItem\n key={level}\n level={level}\n color={hexFromArgb(props.palette.tone(level))}\n />\n ))}\n </Box>\n );\n});\n\nexport function makeColorArrayForToken(\n token: string\n): { token: string; bg: string; color: string }[] {\n return [\n { token, bg: token, color: 'on.' + token },\n { token, bg: 'on.' + token, color: token },\n { token, bg: token + '-container', color: 'on.' + token + '-container' },\n { token, bg: 'on.' + token + '-container', color: token + '-container' },\n ];\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"components.js","names":["memo","useState","rgb","parseToHsl","parseToRgb","hexFromArgb","TonalPalette","Box","Tooltip","Text","ColorItem","props","token","style","flex","height","computedColor","setComputedColor","hslColor","hue","saturation","lightness","rgbColor","red","green","blue","Math","round","ref","window","getComputedStyle","backgroundColor","px","py","textOverflow","overflow","ColorRow","colors","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","map","bg","color","TonalColorItem","level","TonalColorsFromToken","position","left","top","colorInt","parseInt","slice","tonal","fromInt","TonalColors","luminanceLevels","palette","tone","makeColorArrayForToken"],"sources":["../../../src/ThemeExplorer/components.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { memo, useState } from 'react';\nimport { rgb, parseToHsl, parseToRgb } from 'polished';\nimport { hexFromArgb, TonalPalette } from '@material/material-color-utilities';\n\nimport { Box, Tooltip, Text } from '../';\n\nexport const ColorItem = memo(\n (props: {\n token: string;\n style: CSSProperties;\n height?: number;\n flex: number;\n }) => {\n const { token, style, flex, height = '100%' } = props;\n const [computedColor, setComputedColor] = useState<string>();\n const hslColor = computedColor\n ? parseToHsl(computedColor)\n : { hue: 0, saturation: 0, lightness: 0 };\n const rgbColor = computedColor\n ? parseToRgb(computedColor)\n : { red: 0, green: 0, blue: 0 };\n return (\n <Tooltip\n label={\n computedColor ? (\n <>\n <p>{token}</p>\n <p>{rgb(rgbColor)}</p>\n <p>\n rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\n </p>\n <p>\n hsl({Math.round(hslColor.hue)},{' '}\n {Math.round(hslColor.saturation * 100)}%,{' '}\n {Math.round(hslColor.lightness * 100)}%)\n </p>\n </>\n ) : (\n <p>{token}</p>\n )\n }\n >\n <Text\n as=\"div\"\n variant=\"body-medium\"\n style={style}\n ref={(ref: HTMLDivElement \| null) => {\n if (ref) {\n setComputedColor(window.getComputedStyle(ref).backgroundColor);\n }\n }}\n sx={{\n flex,\n height,\n px: '12px',\n py: '12px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }}\n >\n {token}\n </Text>\n </Tooltip>\n );\n }\n);\n\nexport const ColorRow = memo(\n (props: {\n colors: { token: string; bg: string; color: string }[];\n height?: number;\n }) => {\n const { colors, height = 50 } = props;\n return (\n <Box\n width=\"100%\"\n display=\"flex\"\n sx={{\n ':first-of-type': {\n borderTopLeftRadius: 'large',\n borderTopRightRadius: 'large',\n overflow: 'hidden',\n },\n ':last-of-type': {\n borderBottomLeftRadius: 'large',\n borderBottomRightRadius: 'large',\n overflow: 'hidden',\n },\n height,\n }}\n >\n {colors.map(({ token, bg, color }) => (\n <ColorItem\n flex={1}\n key={token}\n token={token}\n style={{ backgroundColor: bg, color: color }}\n />\n ))}\n </Box>\n );\n }\n);\n\nexport const TonalColorItem = memo(\n (props: { color: string; level: number }) => {\n const { level, color } = props;\n const hslColor = parseToHsl(color);\n const rgbColor = parseToRgb(color);\n return (\n <Tooltip\n label={\n <>\n <p>Luminance: {level}</p>\n <p>{rgb(rgbColor)}</p>\n <p>\n rgb({rgbColor.red}, {rgbColor.green}, {rgbColor.blue})\n </p>\n <p>\n hsl({Math.round(hslColor.hue)},{' '}\n {Math.round(hslColor.saturation * 100)}%,{' '}\n {Math.round(hslColor.lightness * 100)}%)\n </p>\n </>\n }\n >\n <Text\n key={level}\n as=\"div\"\n variant=\"body-small\"\n flex={1}\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n style={{\n backgroundColor: color,\n color: level <= 50 ? '#fff' : '#000',\n }}\n >\n {level}\n </Text>\n </Tooltip>\n );\n }\n);\n\nexport const TonalColorsFromToken = memo((props: { token: string }) => {\n const [computedColor, setComputedColor] = useState<string>();\n if (!computedColor) {\n return (\n <Box\n ref={(ref: HTMLDivElement \| null) => {\n if (ref) {\n setComputedColor(window.getComputedStyle(ref).backgroundColor);\n }\n }}\n bg={props.token}\n style={{ position: 'fixed', left: -5000, top: -5000 }}\n />\n );\n }\n const colorInt = parseInt(rgb(parseToRgb(computedColor)).slice(1), 16);\n const tonal = TonalPalette.fromInt(colorInt);\n\n return <TonalColors palette={tonal} />;\n});\n\nexport const TonalColors = memo((props: { palette: TonalPalette }) => {\n const luminanceLevels = [\n 0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,\n ];\n return (\n <Box display=\"flex\" height=\"72px\" width=\"100%\">\n {luminanceLevels.map((level) => (\n <TonalColorItem\n key={level}\n level={level}\n color={hexFromArgb(props.palette.tone(level))}\n />\n ))}\n </Box>\n );\n});\n\nexport function makeColorArrayForToken(\n token: string\n): { token: string; bg: string; color: string }[] {\n return [\n { token, bg: token, color: 'on.' + token },\n { token, bg: 'on.' + token, color: token },\n { token, bg: token + '-container', color: 'on.' + token + '-container' },\n { token, bg: 'on.' + token + '-container', color: token + '-container' },\n ];\n}\n"],"mappings":"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"}

package/build/esm/ThemeExplorer/makeColorScheme.d.ts CHANGED Viewed

@@ -16,10 +16,17 @@ export declare function makeColorScheme(opts: {
     'tertiary-container': string;
     'error-container': string;
     background: string;
-    surface: string;
     'surface-variant': string;
     outline: string;
     'outline-variant': string;
+    'surface-dim': string;
+    surface: string;
+    'surface-bright': string;
+    'surface-container-lowest': string;
+    'surface-container-low': string;
+    'surface-container': string;
+    'surface-container-high': string;
+    'surface-container-highest': string;
     on: {
         primary: string;
         secondary: string;
@@ -30,10 +37,17 @@ export declare function makeColorScheme(opts: {
         'tertiary-container': string;
         'error-container': string;
         background: string;
-        surface: string;
         'surface-variant': string;
         outline: string;
         'outline-variant': string;
+        'surface-dim': string;
+        surface: string;
+        'surface-bright': string;
+        'surface-container-lowest': string;
+        'surface-container-low': string;
+        'surface-container': string;
+        'surface-container-high': string;
+        'surface-container-highest': string;
     };
     modes: {
         dark: {
@@ -46,10 +60,17 @@ export declare function makeColorScheme(opts: {
             'tertiary-container': string;
             'error-container': string;
             background: string;
-            surface: string;
             'surface-variant': string;
             outline: string;
             'outline-variant': string;
+            'surface-dim': string;
+            surface: string;
+            'surface-bright': string;
+            'surface-container-lowest': string;
+            'surface-container-low': string;
+            'surface-container': string;
+            'surface-container-high': string;
+            'surface-container-highest': string;
             on: {
                 primary: string;
                 secondary: string;
@@ -60,10 +81,17 @@ export declare function makeColorScheme(opts: {
                 'tertiary-container': string;
                 'error-container': string;
                 background: string;
-                surface: string;
                 'surface-variant': string;
                 outline: string;
                 'outline-variant': string;
+                'surface-dim': string;
+                surface: string;
+                'surface-bright': string;
+                'surface-container-lowest': string;
+                'surface-container-low': string;
+                'surface-container': string;
+                'surface-container-high': string;
+                'surface-container-highest': string;
             };
         };
     };

package/build/esm/ThemeExplorer/makeColorScheme.js CHANGED Viewed

@@ -13,11 +13,19 @@ export function makeColorScheme(opts) {
     'secondary-container': c(opts.secondary, 90),
     'tertiary-container': c(opts.tertiary, 90),
     'error-container': c(opts.error, 90),
-    background: c(opts.neutral, 99),
-    surface: c(opts.neutral, 99),
+    background: c(opts.neutral, 98),
     'surface-variant': c(opts.neutralVariant, 90),
     outline: c(opts.neutralVariant, 50),
     'outline-variant': c(opts.neutralVariant, 80),
+    // https://material.io/blog/tone-based-surface-color-m3
+    'surface-dim': c(opts.neutral, 87),
+    surface: c(opts.neutral, 98),
+    'surface-bright': c(opts.neutral, 98),
+    'surface-container-lowest': c(opts.neutral, 100),
+    'surface-container-low': c(opts.neutral, 96),
+    'surface-container': c(opts.neutral, 94),
+    'surface-container-high': c(opts.neutral, 92),
+    'surface-container-highest': c(opts.neutral, 90),
     on: {
       primary: c(opts.primary, 100),
       secondary: c(opts.secondary, 100),
@@ -28,10 +36,18 @@ export function makeColorScheme(opts) {
       'tertiary-container': c(opts.tertiary, 10),
       'error-container': c(opts.error, 10),
       background: c(opts.neutral, 10),
-      surface: c(opts.neutral, 10),
       'surface-variant': c(opts.neutralVariant, 30),
       outline: c(opts.neutralVariant, 95),
-      'outline-variant': c(opts.neutralVariant, 10)
+      'outline-variant': c(opts.neutralVariant, 10),
+      // https://material.io/blog/tone-based-surface-color-m3
+      'surface-dim': c(opts.neutral, 10),
+      surface: c(opts.neutral, 10),
+      'surface-bright': c(opts.neutral, 10),
+      'surface-container-lowest': c(opts.neutral, 10),
+      'surface-container-low': c(opts.neutral, 10),
+      'surface-container': c(opts.neutral, 10),
+      'surface-container-high': c(opts.neutral, 10),
+      'surface-container-highest': c(opts.neutral, 10)
     },
     modes: {
       dark: {
@@ -43,11 +59,20 @@ export function makeColorScheme(opts) {
         'secondary-container': c(opts.secondary, 30),
         'tertiary-container': c(opts.tertiary, 30),
         'error-container': c(opts.error, 30),
-        background: c(opts.neutral, 10),
-        surface: c(opts.neutral, 10),
+        background: c(opts.neutral, 6),
         'surface-variant': c(opts.neutralVariant, 30),
         outline: c(opts.neutralVariant, 60),
         'outline-variant': c(opts.neutralVariant, 30),
+        // https://material.io/blog/tone-based-surface-color-m3
+        // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156
+        'surface-dim': c(opts.neutral, 6),
+        surface: c(opts.neutral, 6),
+        'surface-bright': c(opts.neutral, 24),
+        'surface-container-lowest': c(opts.neutral, 4),
+        'surface-container-low': c(opts.neutral, 10),
+        'surface-container': c(opts.neutral, 12),
+        'surface-container-high': c(opts.neutral, 17),
+        'surface-container-highest': c(opts.neutral, 22),
         on: {
           primary: c(opts.primary, 20),
           secondary: c(opts.secondary, 20),
@@ -58,10 +83,18 @@ export function makeColorScheme(opts) {
           'tertiary-container': c(opts.tertiary, 90),
           'error-container': c(opts.error, 90),
           background: c(opts.neutral, 90),
-          surface: c(opts.neutral, 90),
           'surface-variant': c(opts.neutralVariant, 80),
           outline: c(opts.neutralVariant, 10),
-          'outline-variant': c(opts.neutralVariant, 90)
+          'outline-variant': c(opts.neutralVariant, 90),
+          // https://material.io/blog/tone-based-surface-color-m3
+          'surface-dim': c(opts.neutral, 90),
+          surface: c(opts.neutral, 90),
+          'surface-bright': c(opts.neutral, 90),
+          'surface-container-lowest': c(opts.neutral, 90),
+          'surface-container-low': c(opts.neutral, 90),
+          'surface-container': c(opts.neutral, 90),
+          'surface-container-high': c(opts.neutral, 90),
+          'surface-container-highest': c(opts.neutral, 90)
         }
       }
     }

package/build/esm/ThemeExplorer/makeColorScheme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"makeColorScheme.js","names":["hexFromArgb","makeColorScheme","opts","c","palette","tone","primary","secondary","tertiary","error","background","neutral","surface","neutralVariant","outline","on","modes","dark"],"sources":["../../../src/ThemeExplorer/makeColorScheme.tsx"],"sourcesContent":["import type { TonalPalette } from '@material/material-color-utilities';\nimport { hexFromArgb } from '@material/material-color-utilities';\n\nexport function makeColorScheme(opts: {\n primary: TonalPalette;\n secondary: TonalPalette;\n tertiary: TonalPalette;\n error: TonalPalette;\n neutral: TonalPalette;\n neutralVariant: TonalPalette;\n}) {\n function c(palette: TonalPalette, tone: number) {\n return hexFromArgb(palette.tone(tone));\n }\n\n return {\n primary: c(opts.primary, 40),\n secondary: c(opts.secondary, 40),\n tertiary: c(opts.tertiary, 40),\n error: c(opts.error, 40),\n 'primary-container': c(opts.primary, 90),\n 'secondary-container': c(opts.secondary, 90),\n 'tertiary-container': c(opts.tertiary, 90),\n 'error-container': c(opts.error, 90),\n background: c(opts.neutral, 99),\n surface: c(opts.neutral, 99),\n 'surface-variant': c(opts.neutralVariant, 90),\n outline: c(opts.neutralVariant, 50),\n 'outline-variant': c(opts.neutralVariant, 80),\n on: {\n primary: c(opts.primary, 100),\n secondary: c(opts.secondary, 100),\n tertiary: c(opts.tertiary, 100),\n error: c(opts.error, 100),\n 'primary-container': c(opts.primary, 10),\n 'secondary-container': c(opts.secondary, 10),\n 'tertiary-container': c(opts.tertiary, 10),\n 'error-container': c(opts.error, 10),\n background: c(opts.neutral, 10),\n surface: c(opts.neutral, 10),\n 'surface-variant': c(opts.neutralVariant, 30),\n outline: c(opts.neutralVariant, 95),\n 'outline-variant': c(opts.neutralVariant, 10),\n },\n modes: {\n dark: {\n primary: c(opts.primary, 80),\n secondary: c(opts.secondary, 80),\n tertiary: c(opts.tertiary, 80),\n error: c(opts.error, 80),\n 'primary-container': c(opts.primary, 30),\n 'secondary-container': c(opts.secondary, 30),\n 'tertiary-container': c(opts.tertiary, 30),\n 'error-container': c(opts.error, 30),\n background: c(opts.neutral, 10),\n surface: c(opts.neutral, 10),\n 'surface-variant': c(opts.neutralVariant, 30),\n outline: c(opts.neutralVariant, 60),\n 'outline-variant': c(opts.neutralVariant, 30),\n on: {\n primary: c(opts.primary, 20),\n secondary: c(opts.secondary, 20),\n tertiary: c(opts.tertiary, 20),\n error: c(opts.error, 20),\n 'primary-container': c(opts.primary, 90),\n 'secondary-container': c(opts.secondary, 90),\n 'tertiary-container': c(opts.tertiary, 90),\n 'error-container': c(opts.error, 90),\n background: c(opts.neutral, 90),\n surface: c(opts.neutral, 90),\n 'surface-variant': c(opts.neutralVariant, 80),\n outline: c(opts.neutralVariant, 10),\n 'outline-variant': c(opts.neutralVariant, 90),\n },\n },\n },\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"makeColorScheme.js","names":["hexFromArgb","makeColorScheme","opts","c","palette","tone","primary","secondary","tertiary","error","background","neutral","neutralVariant","outline","surface","on","modes","dark"],"sources":["../../../src/ThemeExplorer/makeColorScheme.tsx"],"sourcesContent":["import type { TonalPalette } from '@material/material-color-utilities';\nimport { hexFromArgb } from '@material/material-color-utilities';\n\nexport function makeColorScheme(opts: {\n primary: TonalPalette;\n secondary: TonalPalette;\n tertiary: TonalPalette;\n error: TonalPalette;\n neutral: TonalPalette;\n neutralVariant: TonalPalette;\n}) {\n function c(palette: TonalPalette, tone: number) {\n return hexFromArgb(palette.tone(tone));\n }\n\n return {\n primary: c(opts.primary, 40),\n secondary: c(opts.secondary, 40),\n tertiary: c(opts.tertiary, 40),\n error: c(opts.error, 40),\n 'primary-container': c(opts.primary, 90),\n 'secondary-container': c(opts.secondary, 90),\n 'tertiary-container': c(opts.tertiary, 90),\n 'error-container': c(opts.error, 90),\n background: c(opts.neutral, 98),\n 'surface-variant': c(opts.neutralVariant, 90),\n outline: c(opts.neutralVariant, 50),\n 'outline-variant': c(opts.neutralVariant, 80),\n // https://material.io/blog/tone-based-surface-color-m3\n 'surface-dim': c(opts.neutral, 87),\n surface: c(opts.neutral, 98),\n 'surface-bright': c(opts.neutral, 98),\n 'surface-container-lowest': c(opts.neutral, 100),\n 'surface-container-low': c(opts.neutral, 96),\n 'surface-container': c(opts.neutral, 94),\n 'surface-container-high': c(opts.neutral, 92),\n 'surface-container-highest': c(opts.neutral, 90),\n on: {\n primary: c(opts.primary, 100),\n secondary: c(opts.secondary, 100),\n tertiary: c(opts.tertiary, 100),\n error: c(opts.error, 100),\n 'primary-container': c(opts.primary, 10),\n 'secondary-container': c(opts.secondary, 10),\n 'tertiary-container': c(opts.tertiary, 10),\n 'error-container': c(opts.error, 10),\n background: c(opts.neutral, 10),\n 'surface-variant': c(opts.neutralVariant, 30),\n outline: c(opts.neutralVariant, 95),\n 'outline-variant': c(opts.neutralVariant, 10),\n // https://material.io/blog/tone-based-surface-color-m3\n 'surface-dim': c(opts.neutral, 10),\n surface: c(opts.neutral, 10),\n 'surface-bright': c(opts.neutral, 10),\n 'surface-container-lowest': c(opts.neutral, 10),\n 'surface-container-low': c(opts.neutral, 10),\n 'surface-container': c(opts.neutral, 10),\n 'surface-container-high': c(opts.neutral, 10),\n 'surface-container-highest': c(opts.neutral, 10),\n },\n modes: {\n dark: {\n primary: c(opts.primary, 80),\n secondary: c(opts.secondary, 80),\n tertiary: c(opts.tertiary, 80),\n error: c(opts.error, 80),\n 'primary-container': c(opts.primary, 30),\n 'secondary-container': c(opts.secondary, 30),\n 'tertiary-container': c(opts.tertiary, 30),\n 'error-container': c(opts.error, 30),\n background: c(opts.neutral, 6),\n 'surface-variant': c(opts.neutralVariant, 30),\n outline: c(opts.neutralVariant, 60),\n 'outline-variant': c(opts.neutralVariant, 30),\n // https://material.io/blog/tone-based-surface-color-m3\n // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156\n 'surface-dim': c(opts.neutral, 6),\n surface: c(opts.neutral, 6),\n 'surface-bright': c(opts.neutral, 24),\n 'surface-container-lowest': c(opts.neutral, 4),\n 'surface-container-low': c(opts.neutral, 10),\n 'surface-container': c(opts.neutral, 12),\n 'surface-container-high': c(opts.neutral, 17),\n 'surface-container-highest': c(opts.neutral, 22),\n on: {\n primary: c(opts.primary, 20),\n secondary: c(opts.secondary, 20),\n tertiary: c(opts.tertiary, 20),\n error: c(opts.error, 20),\n 'primary-container': c(opts.primary, 90),\n 'secondary-container': c(opts.secondary, 90),\n 'tertiary-container': c(opts.tertiary, 90),\n 'error-container': c(opts.error, 90),\n background: c(opts.neutral, 90),\n 'surface-variant': c(opts.neutralVariant, 80),\n outline: c(opts.neutralVariant, 10),\n 'outline-variant': c(opts.neutralVariant, 90),\n // https://material.io/blog/tone-based-surface-color-m3\n 'surface-dim': c(opts.neutral, 90),\n surface: c(opts.neutral, 90),\n 'surface-bright': c(opts.neutral, 90),\n 'surface-container-lowest': c(opts.neutral, 90),\n 'surface-container-low': c(opts.neutral, 90),\n 'surface-container': c(opts.neutral, 90),\n 'surface-container-high': c(opts.neutral, 90),\n 'surface-container-highest': c(opts.neutral, 90),\n },\n },\n },\n };\n}\n"],"mappings":"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"}