@flipdish/portal-library 8.6.3 → 8.6.5
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.
- package/dist/components/atoms/Badge/index.cjs.js +1 -1
- package/dist/components/atoms/Badge/index.cjs.js.map +1 -1
- package/dist/components/atoms/Badge/index.d.ts +1 -1
- package/dist/components/atoms/Badge/index.js +1 -1
- package/dist/components/atoms/Badge/index.js.map +1 -1
- package/dist/components/atoms/IconContainer/index.cjs.js +1 -1
- package/dist/components/atoms/IconContainer/index.cjs.js.map +1 -1
- package/dist/components/atoms/IconContainer/index.d.ts +1 -1
- package/dist/components/atoms/IconContainer/index.js +1 -1
- package/dist/components/atoms/IconContainer/index.js.map +1 -1
- package/dist/themes/theme.d.ts +6 -12
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.d.ts +5 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.js +2 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.js.map +1 -0
- package/dist/themes/tokens/colours/colours-stories-utils.cjs.js +1 -1
- package/dist/themes/tokens/colours/colours-stories-utils.cjs.js.map +1 -1
- package/dist/themes/tokens/colours/colours-stories-utils.d.ts +19 -1
- package/dist/themes/tokens/colours/colours-stories-utils.js +1 -1
- package/dist/themes/tokens/colours/colours-stories-utils.js.map +1 -1
- package/dist/themes/tokens/colours/semantic.cjs.js +1 -1
- package/dist/themes/tokens/colours/semantic.cjs.js.map +1 -1
- package/dist/themes/tokens/colours/semantic.d.ts +6 -12
- package/dist/themes/tokens/colours/semantic.js +1 -1
- package/dist/themes/tokens/colours/semantic.js.map +1 -1
- package/dist/themes/tokens/radius/RadiusVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.d.ts +5 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.js +2 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.js.map +1 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.d.ts +5 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.js +2 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.js.map +1 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.d.ts +6 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.js +2 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.js.map +1 -0
- package/package.json +18 -11
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Chip"),a=require("@mui/material/styles");const r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Chip"),a=require("@mui/material/styles");const r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},ai:{backgroundColor:t.palette.semantic.fill["fill-ai-weak"],borderColor:t.palette.semantic.stroke["stroke-ai-weak"],color:t.palette.semantic.text["text-ai"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-ai"]}},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-primary"]}}}[e]),o=a.styled(t,{shouldForwardProp:e=>"tone"!==e})(({theme:e,tone:t})=>({...r(t,e)})),i=({className:t,fdKey:a,icon:r,label:i,size:l="medium",tone:n="neutral"})=>e.jsx(o,{className:t,clickable:!1,"data-fd":a,"data-fd-variant":"badge",icon:r,label:i,size:l,tone:n});i.displayName="Badge",exports.BADGE_TONES=["neutral","error","warning","success","ai","brand"],exports.Badge=i,exports.default=i;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', '
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'ai', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-strong'],\n },\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-error'],\n },\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-warning'],\n },\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-success'],\n },\n },\n ai: {\n backgroundColor: theme.palette.semantic.fill['fill-ai-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-ai-weak'],\n color: theme.palette.semantic.text['text-ai'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-ai'],\n },\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-primary'],\n },\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","error","warning","success","ai","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","label","size","_jsx","clickable","displayName"],"mappings":"yKAIO,MAuBDA,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,iBAGvCC,MAAO,CACLT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,cACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,gBAGvCE,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCG,QAAS,CACPX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCI,GAAI,CACFZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,gBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,kBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,WACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,aAGvCK,MAAO,CACLb,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,mBAKzBX,IAGZiB,EAAcC,EAAAA,OAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,CAEC,EAAGjB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,MAQZqB,EAAQ,EACnBC,YACAC,QACAb,OACAc,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAAAA,IAACV,EAAW,CACVM,UAAWA,EACXK,WAAW,EAAK,UACPJ,EAAK,kBACE,QAChBb,KAAMA,EACNc,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVsB,EAAMO,YAAc,4BApHO,CAAC,UAAW,QAAS,UAAW,UAAW,KAAM"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ChipProps } from '@mui/material/Chip';
|
|
2
2
|
|
|
3
3
|
/** Available visual tones for the Badge component */
|
|
4
|
-
declare const BADGE_TONES: readonly ["neutral", "error", "warning", "success", "
|
|
4
|
+
declare const BADGE_TONES: readonly ["neutral", "error", "warning", "success", "ai", "brand"];
|
|
5
5
|
type BadgeTone = (typeof BADGE_TONES)[number];
|
|
6
6
|
/** Props for the Badge component */
|
|
7
7
|
interface BadgeProps {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Chip";import{styled as a}from"@mui/material/styles";const o=["neutral","error","warning","success","
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Chip";import{styled as a}from"@mui/material/styles";const o=["neutral","error","warning","success","ai","brand"],r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},ai:{backgroundColor:t.palette.semantic.fill["fill-ai-weak"],borderColor:t.palette.semantic.stroke["stroke-ai-weak"],color:t.palette.semantic.text["text-ai"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-ai"]}},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-primary"]}}}[e]),i=a(t,{shouldForwardProp:e=>"tone"!==e})(({theme:e,tone:t})=>({...r(t,e)})),l=({className:t,fdKey:a,icon:o,label:r,size:l="medium",tone:n="neutral"})=>e(i,{className:t,clickable:!1,"data-fd":a,"data-fd-variant":"badge",icon:o,label:r,size:l,tone:n});l.displayName="Badge";export{o as BADGE_TONES,l as Badge,l as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', '
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'ai', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-strong'],\n },\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-error'],\n },\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-warning'],\n },\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-success'],\n },\n },\n ai: {\n backgroundColor: theme.palette.semantic.fill['fill-ai-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-ai-weak'],\n color: theme.palette.semantic.text['text-ai'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-ai'],\n },\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-primary'],\n },\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["BADGE_TONES","getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","error","warning","success","ai","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","label","size","_jsx","clickable","displayName"],"mappings":"wHAIO,MAAMA,EAAc,CAAC,UAAW,QAAS,UAAW,UAAW,KAAM,SAuBtEC,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,iBAGvCC,MAAO,CACLT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,cACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,gBAGvCE,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCG,QAAS,CACPX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCI,GAAI,CACFZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,gBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,kBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,WACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,aAGvCK,MAAO,CACLb,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,mBAKzBX,IAGZiB,EAAcC,EAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,CAEC,EAAGjB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,MAQZqB,EAAQ,EACnBC,YACAC,QACAb,OACAc,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAACV,EAAW,CACVM,UAAWA,EACXK,WAAW,EAAK,UACPJ,EAAK,kBACE,QAChBb,KAAMA,EACNc,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVsB,EAAMO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],ai:e=>e.palette.semantic.fill["fill-ai-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],ai:e=>e.palette.semantic.stroke["stroke-ai-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],ai:e=>e.palette.semantic.icon["icon-ai"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},l=(e,t,r)=>s.background[r][t](e),c=(e,t,r)=>s.border[r][t](e),o=(e,t)=>s.icon[t](e),u=a.styled(r,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})(({theme:e,tone:t,containerStyle:r})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:l(e,t,r),border:"stroked"===r?"1px solid":"none",borderColor:c(e,t,r),boxSizing:"border-box",color:o(e,t)})),d=i.memo(({ariaLabel:t,className:r,fdKey:a,icon:n,style:i="filled",tone:s="neutral"})=>{const l=t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0};return e.jsx(u,{className:r,containerStyle:i,"data-fd":a,tone:s,...l,children:n})});d.displayName="IconContainer",module.exports=d;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = '
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'ai' | 'brand' | 'destructive' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n /** Accessible description of the icon (for screen readers) */\n ariaLabel?: string;\n /** Additional class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Icon element to display in the container */\n icon: React.ReactNode;\n /** Visual style of the container */\n style?: IconContainerStyle;\n /** Visual tone of the container */\n tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n background: {\n filled: {\n brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.fill['fill-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n },\n stroked: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n },\n border: {\n filled: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n stroked: {\n brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.stroke['stroke-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n },\n },\n icon: {\n brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n ai: (theme: Theme) => theme.palette.semantic.icon['icon-ai'],\n neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n tone: IconContainerTones;\n containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '48px',\n height: '48px',\n borderRadius: '50%',\n backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n border: containerStyle === 'stroked' ? '1px solid' : 'none',\n borderColor: getBorderColor(theme, tone, containerStyle),\n boxSizing: 'border-box',\n color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n // Only set aria-hidden if no ariaLabel is provided\n const ariaProps = ariaLabel\n ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n : { 'aria-hidden': true };\n\n return (\n <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n {icon}\n </StyledBox>\n );\n },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","ai","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","ariaProps","role","_jsx","children","displayName"],"mappings":"gZAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,GAAKP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,gBAClDK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,GAAKP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,kBACpDH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,GAAKP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,WAClDJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAAA,OAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,CAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,MAWvBqB,EAAgBC,EAAMC,KAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,cAE7D,MAAM2B,EAAYH,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAErB,OACEC,EAAAA,IAACzB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAAU2B,EAASG,SAC9FhC,MAMTuB,EAAcU,YAAc"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
|
|
4
|
-
type IconContainerTones = '
|
|
4
|
+
type IconContainerTones = 'ai' | 'brand' | 'destructive' | 'neutral' | 'success' | 'warning';
|
|
5
5
|
type IconContainerStyle = 'filled' | 'stroked';
|
|
6
6
|
interface IconContainerProps {
|
|
7
7
|
/** Accessible description of the icon (for screen readers) */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],ai:e=>e.palette.semantic.fill["fill-ai-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],ai:e=>e.palette.semantic.stroke["stroke-ai-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],ai:e=>e.palette.semantic.icon["icon-ai"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},i=(e,t,a)=>n.background[a][t](e),s=(e,t,a)=>n.border[a][t](e),l=(e,t)=>n.icon[t](e),o=r(a,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})(({theme:e,tone:t,containerStyle:a})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:i(e,t,a),border:"stroked"===a?"1px solid":"none",borderColor:s(e,t,a),boxSizing:"border-box",color:l(e,t)})),c=t.memo(({ariaLabel:t,className:a,fdKey:r,icon:n,style:i="filled",tone:s="neutral"})=>e(o,{className:a,containerStyle:i,"data-fd":r,tone:s,...t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0},children:n}));c.displayName="IconContainer";export{c as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = '
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'ai' | 'brand' | 'destructive' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n /** Accessible description of the icon (for screen readers) */\n ariaLabel?: string;\n /** Additional class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Icon element to display in the container */\n icon: React.ReactNode;\n /** Visual style of the container */\n style?: IconContainerStyle;\n /** Visual tone of the container */\n tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n background: {\n filled: {\n brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.fill['fill-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n },\n stroked: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n },\n border: {\n filled: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n stroked: {\n brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.stroke['stroke-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n },\n },\n icon: {\n brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n ai: (theme: Theme) => theme.palette.semantic.icon['icon-ai'],\n neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n tone: IconContainerTones;\n containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '48px',\n height: '48px',\n borderRadius: '50%',\n backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n border: containerStyle === 'stroked' ? '1px solid' : 'none',\n borderColor: getBorderColor(theme, tone, containerStyle),\n boxSizing: 'border-box',\n color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n // Only set aria-hidden if no ariaLabel is provided\n const ariaProps = ariaLabel\n ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n : { 'aria-hidden': true };\n\n return (\n <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n {icon}\n </StyledBox>\n );\n },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","ai","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","_jsx","role","children","displayName"],"mappings":"+IAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,GAAKP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,gBAClDK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,GAAKP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,kBACpDH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,GAAKP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,WAClDJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,CAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,MAWvBqB,EAAgBC,EAAMC,KAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,aAO3D2B,EAACvB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAL9DwB,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAG8EC,SAC9F/B,KAMTuB,EAAcS,YAAc"}
|
package/dist/themes/theme.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ declare module '@mui/material/styles' {
|
|
|
12
12
|
'text-error': string;
|
|
13
13
|
'text-warning': string;
|
|
14
14
|
'text-success': string;
|
|
15
|
-
'text-
|
|
15
|
+
'text-ai': string;
|
|
16
16
|
'text-inverse-strong': string;
|
|
17
17
|
'text-inverse-weak': string;
|
|
18
18
|
'text-inverse-disabled': string;
|
|
@@ -33,8 +33,7 @@ declare module '@mui/material/styles' {
|
|
|
33
33
|
'stroke-warning-weak': string;
|
|
34
34
|
'stroke-success-strong': string;
|
|
35
35
|
'stroke-success-weak': string;
|
|
36
|
-
'stroke-
|
|
37
|
-
'stroke-information-weak': string;
|
|
36
|
+
'stroke-ai-strong': string;
|
|
38
37
|
'stroke-ai-weak': string;
|
|
39
38
|
'stroke-inverse-strong': string;
|
|
40
39
|
'stroke-inverse-weak': string;
|
|
@@ -47,7 +46,6 @@ declare module '@mui/material/styles' {
|
|
|
47
46
|
'icon-error': string;
|
|
48
47
|
'icon-warning': string;
|
|
49
48
|
'icon-success': string;
|
|
50
|
-
'icon-information': string;
|
|
51
49
|
'icon-inverse': string;
|
|
52
50
|
'icon-inverse-strong': string;
|
|
53
51
|
'icon-inverse-disabled': string;
|
|
@@ -72,8 +70,7 @@ declare module '@mui/material/styles' {
|
|
|
72
70
|
'fill-warning-weak': string;
|
|
73
71
|
'fill-success-strong': string;
|
|
74
72
|
'fill-success-weak': string;
|
|
75
|
-
'fill-
|
|
76
|
-
'fill-information-weak': string;
|
|
73
|
+
'fill-ai-strong': string;
|
|
77
74
|
'fill-ai-weak': string;
|
|
78
75
|
'fill-inverse-strong': string;
|
|
79
76
|
'fill-inverse-weak': string;
|
|
@@ -115,7 +112,7 @@ declare module '@mui/material/styles' {
|
|
|
115
112
|
'text-error'?: string;
|
|
116
113
|
'text-warning'?: string;
|
|
117
114
|
'text-success'?: string;
|
|
118
|
-
'text-
|
|
115
|
+
'text-ai'?: string;
|
|
119
116
|
'text-inverse-strong'?: string;
|
|
120
117
|
'text-inverse-weak'?: string;
|
|
121
118
|
'text-inverse-disabled'?: string;
|
|
@@ -136,8 +133,7 @@ declare module '@mui/material/styles' {
|
|
|
136
133
|
'stroke-warning-weak'?: string;
|
|
137
134
|
'stroke-success-strong'?: string;
|
|
138
135
|
'stroke-success-weak'?: string;
|
|
139
|
-
'stroke-
|
|
140
|
-
'stroke-information-weak'?: string;
|
|
136
|
+
'stroke-ai-strong'?: string;
|
|
141
137
|
'stroke-ai-weak'?: string;
|
|
142
138
|
'stroke-inverse-strong'?: string;
|
|
143
139
|
'stroke-inverse-weak'?: string;
|
|
@@ -150,7 +146,6 @@ declare module '@mui/material/styles' {
|
|
|
150
146
|
'icon-error'?: string;
|
|
151
147
|
'icon-warning'?: string;
|
|
152
148
|
'icon-success'?: string;
|
|
153
|
-
'icon-information'?: string;
|
|
154
149
|
'icon-inverse': string;
|
|
155
150
|
'icon-inverse-strong'?: string;
|
|
156
151
|
'icon-inverse-disabled'?: string;
|
|
@@ -175,8 +170,7 @@ declare module '@mui/material/styles' {
|
|
|
175
170
|
'fill-warning-weak'?: string;
|
|
176
171
|
'fill-success-strong'?: string;
|
|
177
172
|
'fill-success-weak'?: string;
|
|
178
|
-
'fill-
|
|
179
|
-
'fill-information-weak'?: string;
|
|
173
|
+
'fill-ai-strong'?: string;
|
|
180
174
|
'fill-ai-weak'?: string;
|
|
181
175
|
'fill-inverse-strong'?: string;
|
|
182
176
|
'fill-inverse-weak'?: string;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");var i=require("@mui/material/Box"),t=require("@mui/material/Stack"),r=require("@mui/material/styles"),s=require("@mui/material/Typography"),a=require("./breakpoints.cjs.js");const n=r.styled(i)(({theme:e})=>({backgroundColor:e.palette.primary.main,borderRadius:"4px",height:"80px"})),l=r.styled(s)(({theme:e})=>({fontFamily:"monospace",overflow:"hidden",padding:e.spacing(1,2),textOverflow:"ellipsis",whiteSpace:"nowrap"})),o=r.styled(i)(({theme:e})=>({alignItems:"center",display:"grid",gap:e.spacing(.5),gridTemplateColumns:"280px 180px 100px 1fr",maxWidth:"1200px",width:"100%"})),p=r.styled(s)(({theme:e})=>({fontSize:"0.875rem",fontWeight:600,padding:e.spacing(1,2)})),d=({token:i,value:t,muiValue:r})=>{const s=parseInt(t);return e.jsxs(o,{children:[e.jsx(l,{title:r,children:r}),e.jsx(l,{title:i,children:i}),e.jsx(l,{title:t,children:t}),e.jsx(n,{sx:{width:.3*s}})]})};exports.BreakpointsVisualizer=()=>{const r=Object.entries(a.breakpoints).map(([e,i])=>{const t=Object.entries(a.breakpointValues).find(([e,t])=>t===parseInt(i))?.[0];return{muiValue:`theme.breakpoints.${t}`,token:e,value:i}});return e.jsxs(t,{spacing:4,sx:{maxWidth:"1200px",width:"100%"},children:[e.jsx(t,{spacing:1,children:e.jsx(s,{color:"text.secondary",variant:"body2",children:"Breakpoints define the responsive layout grid points. Use these values with theme.breakpoints.up() or theme.breakpoints.down() in your styles."})}),e.jsxs(i,{children:[e.jsxs(o,{sx:{mb:2},children:[e.jsx(p,{children:"Design token"}),e.jsx(p,{children:"Figma token"}),e.jsx(p,{children:"Size"}),e.jsx(p,{children:"Visual Scale"})]}),r.map(({token:i,value:t,muiValue:r})=>e.jsx(d,{muiValue:r,token:i,value:t},i))]})]})};
|
|
2
|
+
//# sourceMappingURL=BreakpointsVisualizer.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreakpointsVisualizer.cjs.js","sources":["../../../../src/themes/tokens/breakpoints/BreakpointsVisualizer.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport { breakpoints, breakpointValues } from './breakpoints';\n\nconst BreakpointBar = styled(Box)(({ theme }) => ({\n backgroundColor: theme.palette.primary.main,\n borderRadius: '4px',\n height: '80px',\n}));\n\nconst Cell = styled(Typography)(({ theme }) => ({\n fontFamily: 'monospace',\n overflow: 'hidden',\n padding: theme.spacing(1, 2),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}));\n\nconst GridContainer = styled(Box)(({ theme }) => ({\n alignItems: 'center',\n display: 'grid',\n gap: theme.spacing(0.5),\n gridTemplateColumns: '280px 180px 100px 1fr',\n maxWidth: '1200px',\n width: '100%',\n}));\n\nconst ColumnHeader = styled(Typography)(({ theme }) => ({\n fontSize: '0.875rem',\n fontWeight: 600,\n padding: theme.spacing(1, 2),\n}));\n\ninterface BreakpointRowProps {\n muiValue: string;\n token: string;\n value: string;\n}\n\nconst BreakpointRow = ({ token, value, muiValue }: BreakpointRowProps): React.ReactElement => {\n const numericValue = parseInt(value);\n const scale = 0.3;\n\n return (\n <GridContainer>\n <Cell title={muiValue}>{muiValue}</Cell>\n <Cell title={token}>{token}</Cell>\n <Cell title={value}>{value}</Cell>\n <BreakpointBar sx={{ width: numericValue * scale }} />\n </GridContainer>\n );\n};\n\nexport const BreakpointsVisualizer = (): React.ReactElement => {\n const breakpointData = Object.entries(breakpoints).map(([token, value]) => {\n const muiKey = Object.entries(breakpointValues).find(([_, size]) => size === parseInt(value))?.[0];\n return { muiValue: `theme.breakpoints.${muiKey}`, token, value };\n });\n\n return (\n <Stack spacing={4} sx={{ maxWidth: '1200px', width: '100%' }}>\n <Stack spacing={1}>\n <Typography color=\"text.secondary\" variant=\"body2\">\n Breakpoints define the responsive layout grid points. Use these values with theme.breakpoints.up()\n or theme.breakpoints.down() in your styles.\n </Typography>\n </Stack>\n <Box>\n <GridContainer sx={{ mb: 2 }}>\n <ColumnHeader>Design token</ColumnHeader>\n <ColumnHeader>Figma token</ColumnHeader>\n <ColumnHeader>Size</ColumnHeader>\n <ColumnHeader>Visual Scale</ColumnHeader>\n </GridContainer>\n {breakpointData.map(({ token, value, muiValue }) => (\n <BreakpointRow key={token} muiValue={muiValue} token={token} value={value} />\n ))}\n </Box>\n </Stack>\n );\n};\n"],"names":["BreakpointBar","styled","Box","theme","backgroundColor","palette","primary","main","borderRadius","height","Cell","Typography","fontFamily","overflow","padding","spacing","textOverflow","whiteSpace","GridContainer","alignItems","display","gap","gridTemplateColumns","maxWidth","width","ColumnHeader","fontSize","fontWeight","BreakpointRow","token","value","muiValue","numericValue","parseInt","_jsxs","children","_jsx","title","sx","breakpointData","Object","entries","breakpoints","map","muiKey","breakpointValues","find","_","size","Stack","color","variant","mb"],"mappings":"+OASA,MAAMA,EAAgBC,EAAAA,OAAOC,EAAPD,CAAY,EAAGE,YAAO,CAC1CC,gBAAiBD,EAAME,QAAQC,QAAQC,KACvCC,aAAc,MACdC,OAAQ,UAGJC,EAAOT,EAAAA,OAAOU,EAAPV,CAAmB,EAAGE,YAAO,CACxCS,WAAY,YACZC,SAAU,SACVC,QAASX,EAAMY,QAAQ,EAAG,GAC1BC,aAAc,WACdC,WAAY,YAGRC,EAAgBjB,EAAAA,OAAOC,EAAPD,CAAY,EAAGE,YAAO,CAC1CgB,WAAY,SACZC,QAAS,OACTC,IAAKlB,EAAMY,QAAQ,IACnBO,oBAAqB,wBACrBC,SAAU,SACVC,MAAO,UAGHC,EAAexB,EAAAA,OAAOU,EAAPV,CAAmB,EAAGE,YAAO,CAChDuB,SAAU,WACVC,WAAY,IACZb,QAASX,EAAMY,QAAQ,EAAG,MAStBa,EAAgB,EAAGC,QAAOC,QAAOC,eACrC,MAAMC,EAAeC,SAASH,GAG9B,OACEI,EAAAA,KAAChB,EAAa,CAAAiB,SAAA,CACZC,MAAC1B,EAAI,CAAC2B,MAAON,EAAQI,SAAGJ,IACxBK,EAAAA,IAAC1B,EAAI,CAAC2B,MAAOR,EAAKM,SAAGN,IACrBO,EAAAA,IAAC1B,EAAI,CAAC2B,MAAOP,WAAQA,IACrBM,EAAAA,IAACpC,EAAa,CAACsC,GAAI,CAAEd,MAPX,GAOkBQ,uCAKG,KACnC,MAAMO,EAAiBC,OAAOC,QAAQC,EAAAA,aAAaC,IAAI,EAAEd,EAAOC,MAC9D,MAAMc,EAASJ,OAAOC,QAAQI,EAAAA,kBAAkBC,KAAK,EAAEC,EAAGC,KAAUA,IAASf,SAASH,MAAU,GAChG,MAAO,CAAEC,SAAU,qBAAqBa,IAAUf,QAAOC,WAG3D,OACEI,EAAAA,KAACe,EAAK,CAAClC,QAAS,EAAGuB,GAAI,CAAEf,SAAU,SAAUC,MAAO,kBAClDY,EAAAA,IAACa,EAAK,CAAClC,QAAS,WACdqB,EAAAA,IAACzB,EAAU,CAACuC,MAAM,iBAAiBC,QAAQ,QAAOhB,SAAA,qJAKpDD,EAAAA,KAAChC,EAAG,CAAAiC,SAAA,CACFD,EAAAA,KAAChB,EAAa,CAACoB,GAAI,CAAEc,GAAI,GAAGjB,SAAA,CAC1BC,MAACX,EAAY,CAAAU,SAAA,iBACbC,EAAAA,IAACX,EAAY,CAAAU,SAAA,gBACbC,EAAAA,IAACX,EAAY,CAAAU,SAAA,SACbC,EAAAA,IAACX,gCAEFc,EAAeI,IAAI,EAAGd,QAAOC,QAAOC,cACnCK,EAAAA,IAACR,GAA0BG,SAAUA,EAAUF,MAAOA,EAAOC,MAAOA,GAAhDD"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import"react";import t from"@mui/material/Box";import r from"@mui/material/Stack";import{styled as n}from"@mui/material/styles";import a from"@mui/material/Typography";import{breakpoints as o,breakpointValues as m}from"./breakpoints.js";const l=n(t)(({theme:e})=>({backgroundColor:e.palette.primary.main,borderRadius:"4px",height:"80px"})),p=n(a)(({theme:e})=>({fontFamily:"monospace",overflow:"hidden",padding:e.spacing(1,2),textOverflow:"ellipsis",whiteSpace:"nowrap"})),s=n(t)(({theme:e})=>({alignItems:"center",display:"grid",gap:e.spacing(.5),gridTemplateColumns:"280px 180px 100px 1fr",maxWidth:"1200px",width:"100%"})),d=n(a)(({theme:e})=>({fontSize:"0.875rem",fontWeight:600,padding:e.spacing(1,2)})),c=({token:t,value:r,muiValue:n})=>{const a=parseInt(r);return e(s,{children:[i(p,{title:n,children:n}),i(p,{title:t,children:t}),i(p,{title:r,children:r}),i(l,{sx:{width:.3*a}})]})},h=()=>{const n=Object.entries(o).map(([e,i])=>{const t=Object.entries(m).find(([e,t])=>t===parseInt(i))?.[0];return{muiValue:`theme.breakpoints.${t}`,token:e,value:i}});return e(r,{spacing:4,sx:{maxWidth:"1200px",width:"100%"},children:[i(r,{spacing:1,children:i(a,{color:"text.secondary",variant:"body2",children:"Breakpoints define the responsive layout grid points. Use these values with theme.breakpoints.up() or theme.breakpoints.down() in your styles."})}),e(t,{children:[e(s,{sx:{mb:2},children:[i(d,{children:"Design token"}),i(d,{children:"Figma token"}),i(d,{children:"Size"}),i(d,{children:"Visual Scale"})]}),n.map(({token:e,value:t,muiValue:r})=>i(c,{muiValue:r,token:e,value:t},e))]})]})};export{h as BreakpointsVisualizer};
|
|
2
|
+
//# sourceMappingURL=BreakpointsVisualizer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreakpointsVisualizer.js","sources":["../../../../src/themes/tokens/breakpoints/BreakpointsVisualizer.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport { breakpoints, breakpointValues } from './breakpoints';\n\nconst BreakpointBar = styled(Box)(({ theme }) => ({\n backgroundColor: theme.palette.primary.main,\n borderRadius: '4px',\n height: '80px',\n}));\n\nconst Cell = styled(Typography)(({ theme }) => ({\n fontFamily: 'monospace',\n overflow: 'hidden',\n padding: theme.spacing(1, 2),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}));\n\nconst GridContainer = styled(Box)(({ theme }) => ({\n alignItems: 'center',\n display: 'grid',\n gap: theme.spacing(0.5),\n gridTemplateColumns: '280px 180px 100px 1fr',\n maxWidth: '1200px',\n width: '100%',\n}));\n\nconst ColumnHeader = styled(Typography)(({ theme }) => ({\n fontSize: '0.875rem',\n fontWeight: 600,\n padding: theme.spacing(1, 2),\n}));\n\ninterface BreakpointRowProps {\n muiValue: string;\n token: string;\n value: string;\n}\n\nconst BreakpointRow = ({ token, value, muiValue }: BreakpointRowProps): React.ReactElement => {\n const numericValue = parseInt(value);\n const scale = 0.3;\n\n return (\n <GridContainer>\n <Cell title={muiValue}>{muiValue}</Cell>\n <Cell title={token}>{token}</Cell>\n <Cell title={value}>{value}</Cell>\n <BreakpointBar sx={{ width: numericValue * scale }} />\n </GridContainer>\n );\n};\n\nexport const BreakpointsVisualizer = (): React.ReactElement => {\n const breakpointData = Object.entries(breakpoints).map(([token, value]) => {\n const muiKey = Object.entries(breakpointValues).find(([_, size]) => size === parseInt(value))?.[0];\n return { muiValue: `theme.breakpoints.${muiKey}`, token, value };\n });\n\n return (\n <Stack spacing={4} sx={{ maxWidth: '1200px', width: '100%' }}>\n <Stack spacing={1}>\n <Typography color=\"text.secondary\" variant=\"body2\">\n Breakpoints define the responsive layout grid points. Use these values with theme.breakpoints.up()\n or theme.breakpoints.down() in your styles.\n </Typography>\n </Stack>\n <Box>\n <GridContainer sx={{ mb: 2 }}>\n <ColumnHeader>Design token</ColumnHeader>\n <ColumnHeader>Figma token</ColumnHeader>\n <ColumnHeader>Size</ColumnHeader>\n <ColumnHeader>Visual Scale</ColumnHeader>\n </GridContainer>\n {breakpointData.map(({ token, value, muiValue }) => (\n <BreakpointRow key={token} muiValue={muiValue} token={token} value={value} />\n ))}\n </Box>\n </Stack>\n );\n};\n"],"names":["BreakpointBar","styled","Box","theme","backgroundColor","palette","primary","main","borderRadius","height","Cell","Typography","fontFamily","overflow","padding","spacing","textOverflow","whiteSpace","GridContainer","alignItems","display","gap","gridTemplateColumns","maxWidth","width","ColumnHeader","fontSize","fontWeight","BreakpointRow","token","value","muiValue","numericValue","parseInt","_jsxs","children","_jsx","title","sx","BreakpointsVisualizer","breakpointData","Object","entries","breakpoints","map","muiKey","breakpointValues","find","_","size","Stack","color","variant","mb"],"mappings":"+RASA,MAAMA,EAAgBC,EAAOC,EAAPD,CAAY,EAAGE,YAAO,CAC1CC,gBAAiBD,EAAME,QAAQC,QAAQC,KACvCC,aAAc,MACdC,OAAQ,UAGJC,EAAOT,EAAOU,EAAPV,CAAmB,EAAGE,YAAO,CACxCS,WAAY,YACZC,SAAU,SACVC,QAASX,EAAMY,QAAQ,EAAG,GAC1BC,aAAc,WACdC,WAAY,YAGRC,EAAgBjB,EAAOC,EAAPD,CAAY,EAAGE,YAAO,CAC1CgB,WAAY,SACZC,QAAS,OACTC,IAAKlB,EAAMY,QAAQ,IACnBO,oBAAqB,wBACrBC,SAAU,SACVC,MAAO,UAGHC,EAAexB,EAAOU,EAAPV,CAAmB,EAAGE,YAAO,CAChDuB,SAAU,WACVC,WAAY,IACZb,QAASX,EAAMY,QAAQ,EAAG,MAStBa,EAAgB,EAAGC,QAAOC,QAAOC,eACrC,MAAMC,EAAeC,SAASH,GAG9B,OACEI,EAAChB,EAAa,CAAAiB,SAAA,CACZC,EAAC1B,EAAI,CAAC2B,MAAON,EAAQI,SAAGJ,IACxBK,EAAC1B,EAAI,CAAC2B,MAAOR,EAAKM,SAAGN,IACrBO,EAAC1B,EAAI,CAAC2B,MAAOP,WAAQA,IACrBM,EAACpC,EAAa,CAACsC,GAAI,CAAEd,MAPX,GAOkBQ,SAKrBO,EAAwB,KACnC,MAAMC,EAAiBC,OAAOC,QAAQC,GAAaC,IAAI,EAAEf,EAAOC,MAC9D,MAAMe,EAASJ,OAAOC,QAAQI,GAAkBC,KAAK,EAAEC,EAAGC,KAAUA,IAAShB,SAASH,MAAU,GAChG,MAAO,CAAEC,SAAU,qBAAqBc,IAAUhB,QAAOC,WAG3D,OACEI,EAACgB,EAAK,CAACnC,QAAS,EAAGuB,GAAI,CAAEf,SAAU,SAAUC,MAAO,kBAClDY,EAACc,EAAK,CAACnC,QAAS,WACdqB,EAACzB,EAAU,CAACwC,MAAM,iBAAiBC,QAAQ,QAAOjB,SAAA,qJAKpDD,EAAChC,EAAG,CAAAiC,SAAA,CACFD,EAAChB,EAAa,CAACoB,GAAI,CAAEe,GAAI,GAAGlB,SAAA,CAC1BC,EAACX,EAAY,CAAAU,SAAA,iBACbC,EAACX,EAAY,CAAAU,SAAA,gBACbC,EAACX,EAAY,CAAAU,SAAA,SACbC,EAACX,gCAEFe,EAAeI,IAAI,EAAGf,QAAOC,QAAOC,cACnCK,EAACR,GAA0BG,SAAUA,EAAUF,MAAOA,EAAOC,MAAOA,GAAhDD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),o=require("@mui/material/Grid2"),t=require("@mui/material/Stack"),i=require("@mui/material/styles"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),o=require("@mui/material/Grid2"),t=require("@mui/material/Stack"),i=require("@mui/material/styles"),s=require("@mui/material/Typography");const a=i.styled(r)(({theme:e,colour:r})=>({width:"100%",height:100,backgroundColor:r,borderRadius:e.shape.borderRadius,border:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"],marginBottom:e.spacing(2)})),n=({name:o,colour:t})=>e.jsxs(r,{sx:{textAlign:"center"},children:[e.jsx(a,{colour:t}),e.jsx(s,{display:"block",variant:"caption",children:o}),e.jsx(s,{color:"text.secondary",display:"block",variant:"caption",children:t})]}),l=i.styled(o)(()=>({width:800,overflowX:"auto"})),d=i.styled(t,{shouldForwardProp:e=>"inverse"!==e})(({theme:e,inverse:r})=>({alignItems:"center",border:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"],borderRadius:"100px",padding:"6px",marginBottom:"10px",...r&&{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"]}})),c=i.styled(r)(({theme:e,colour:r})=>({width:24,height:24,backgroundColor:r,borderRadius:"50%",marginRight:e.spacing(2),border:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"]})),x=i.styled(s)(({theme:e})=>({marginBottom:e.spacing(2),paddingBottom:e.spacing(1),borderBottom:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"]})),p=i.styled(r)({display:"flex",flexDirection:"column"}),m=({name:r,colour:o})=>e.jsxs(d,{direction:"row",inverse:r.includes("inverse"),spacing:2,children:[e.jsx(c,{colour:o}),e.jsx(s,{variant:"body2",children:r})]});exports.PrimitiveColourSection=({title:o,description:t,codePattern:i,colours:a})=>e.jsxs(r,{sx:{mb:5},children:[e.jsx(s,{color:"text.secondary",sx:{mb:.5,fontWeight:600},variant:"h6",children:o}),t&&e.jsx(s,{color:"text.secondary",sx:{mb:1,maxWidth:600},variant:"body2",children:t}),i&&e.jsx(s,{component:"code",sx:{display:"inline-block",mb:2,px:.75,py:.25,borderRadius:.5,bgcolor:"semantic.fill.fill-weak",fontFamily:"monospace"},variant:"caption",children:i}),e.jsx(r,{sx:{display:"flex",flexWrap:"wrap",gap:2},children:Object.entries(a).map(([o,t])=>e.jsxs(r,{sx:{width:120},children:[e.jsx(r,{sx:{height:80,backgroundColor:t,borderRadius:1,border:"1px solid",borderColor:"semantic.stroke.stroke-weak",mb:1}}),e.jsx(s,{display:"block",fontWeight:600,variant:"caption",children:o}),e.jsx(s,{color:"text.secondary",display:"block",variant:"caption",children:t})]},o))})]}),exports.PrimitiveColourSwatch=n,exports.SemanticColourTable=({title:o,description:t,tokens:i})=>e.jsxs(r,{sx:{mb:6},children:[e.jsx(s,{color:"text.secondary",sx:{mb:.5,fontWeight:600},variant:"h5",children:o}),e.jsx(s,{color:"text.secondary",sx:{mb:3},variant:"body2",children:t}),e.jsxs(r,{sx:{display:"flex",pb:1.5,borderBottom:"1px solid",borderColor:"semantic.stroke.stroke-weak"},children:[e.jsx(s,{fontWeight:600,sx:{width:220,flexShrink:0},variant:"caption",children:"Design token"}),e.jsx(s,{fontWeight:600,sx:{flex:1},variant:"caption",children:"Usage"}),e.jsx(s,{fontWeight:600,sx:{width:220,flexShrink:0},variant:"caption",children:"Colour token"})]}),i.map(({token:o,usage:t,colour:i,primitive:a})=>e.jsxs(r,{sx:{display:"flex",alignItems:"center",py:2,borderBottom:"1px solid",borderColor:"semantic.stroke.stroke-weak"},children:[e.jsx(r,{sx:{width:220,flexShrink:0},children:e.jsx(s,{component:"code",sx:{px:1.5,py:.5,borderRadius:"100px",border:"1px solid",borderColor:"semantic.stroke.stroke-weak",fontFamily:"monospace"},variant:"caption",children:o})}),e.jsx(s,{color:"text.secondary",sx:{flex:1,pr:3},variant:"body2",children:t}),e.jsxs(r,{sx:{width:220,flexShrink:0,display:"flex",alignItems:"center",gap:1,...o.includes("inverse")&&{bgcolor:"semantic.background.background-inverse",px:1,py:.5,borderRadius:"100px"}},children:[e.jsx(r,{sx:{width:24,height:24,borderRadius:"50%",backgroundColor:i,border:"1px solid",borderColor:"semantic.stroke.stroke-weak",flexShrink:0}}),e.jsx(s,{component:"code",sx:{fontFamily:"monospace",...o.includes("inverse")&&{color:"semantic.text.text-inverse-strong"}},variant:"caption",children:a})]})]},o))]}),exports.StyledColourSwatch=a,exports.StyledGrid=l,exports.createColourPrimitiveStory=(t,i)=>({render:()=>i?e.jsx(l,{container:!0,spacing:3,children:Object.entries(i).sort(([e],[r])=>parseInt(r)-parseInt(e)).map(([r,i])=>e.jsx(o,{size:2,children:e.jsx(n,{colour:i,name:`${t}-${r}`.toLowerCase()})},r))}):e.jsx(r,{children:"No colors available"})}),exports.createSemanticColourStory=(o,t)=>({render:()=>t?e.jsxs(e.Fragment,{children:[e.jsx(x,{variant:"h6",children:o.toUpperCase()}),e.jsx(p,{children:Object.entries(t).map(([r,o])=>e.jsx(m,{colour:o,name:r},r))})]}):e.jsx(r,{children:"No colors available"})});
|
|
2
2
|
//# sourceMappingURL=colours-stories-utils.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colours-stories-utils.cjs.js","sources":["../../../../src/themes/tokens/colours/colours-stories-utils.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid2';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nexport const StyledColourSwatch = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: '100%',\n height: 100,\n backgroundColor: colour,\n borderRadius: theme.shape.borderRadius,\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n marginBottom: theme.spacing(2),\n}));\n\nexport const PrimitiveColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <Box sx={{ textAlign: 'center' }}>\n <StyledColourSwatch colour={colour} />\n <Typography display=\"block\" variant=\"caption\">\n {name}\n </Typography>\n <Typography color=\"text.secondary\" display=\"block\" variant=\"caption\">\n {colour}\n </Typography>\n </Box>\n);\n\nexport const StyledGrid = styled(Grid)(() => ({\n width: 800,\n}));\n\n// Helper function to create colour primitive stories\nexport const createColourPrimitiveStory = (colourGroup: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <StyledGrid container spacing={3}>\n {Object.entries(colourObject)\n .sort(([a], [b]) => parseInt(b) - parseInt(a))\n .map(([shade, colour]) => (\n <Grid key={shade} size={2}>\n <PrimitiveColourSwatch colour={colour} name={`${colourGroup}-${shade}`.toLowerCase()} />\n </Grid>\n ))}\n </StyledGrid>\n );\n },\n };\n};\n\nconst StyledStack = styled(Stack, {\n shouldForwardProp: (prop) => prop !== 'inverse',\n})<{ inverse: boolean }>(({ theme, inverse }) => ({\n alignItems: 'center',\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n borderRadius: '100px',\n padding: '6px',\n marginBottom: '10px',\n ...(inverse && {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n }),\n}));\n\nconst StyledColourBox = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: 24,\n height: 24,\n backgroundColor: colour,\n borderRadius: '50%',\n marginRight: theme.spacing(2),\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledCategoryTitle = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n paddingBottom: theme.spacing(1),\n borderBottom: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledColourContainer = styled(Box)({\n display: 'flex',\n flexDirection: 'column',\n});\n\nconst SemanticColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <StyledStack direction=\"row\" inverse={name.includes('inverse')} spacing={2}>\n <StyledColourBox colour={colour} />\n <Typography variant=\"body2\">{name}</Typography>\n </StyledStack>\n);\n\n// Helper function to create semantic colour stories\nexport const createSemanticColourStory = (category: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <>\n <StyledCategoryTitle variant=\"h6\">{category.toUpperCase()}</StyledCategoryTitle>\n <StyledColourContainer>\n {Object.entries(colourObject).map(([name, colour]) => (\n <SemanticColourSwatch key={name} colour={colour} name={name} />\n ))}\n </StyledColourContainer>\n </>\n );\n },\n };\n};\n"],"names":["StyledColourSwatch","styled","Box","theme","colour","width","height","backgroundColor","borderRadius","shape","border","borderColor","palette","semantic","stroke","marginBottom","spacing","PrimitiveColourSwatch","name","_jsxs","sx","textAlign","children","_jsx","Typography","display","variant","color","StyledGrid","Grid","StyledStack","Stack","shouldForwardProp","prop","inverse","alignItems","padding","background","text","StyledColourBox","marginRight","StyledCategoryTitle","paddingBottom","borderBottom","StyledColourContainer","flexDirection","SemanticColourSwatch","direction","includes","colourGroup","colourObject","render","container","Object","entries","sort","a","b","parseInt","map","shade","size","toLowerCase","category","_Fragment","toUpperCase"],"mappings":"yNAMO,MAAMA,EAAqBC,EAAAA,OAAOC,EAAPD,CAAgC,EAAGE,QAAOC,aAAQ,CAClFC,MAAO,OACPC,OAAQ,IACRC,gBAAiBH,EACjBI,aAAcL,EAAMM,MAAMD,aAC1BE,OAAQ,YACRC,YAAaR,EAAMS,QAAQC,SAASC,OAAO,eAC3CC,aAAcZ,EAAMa,QAAQ,MAGjBC,EAAwB,EAAGC,OAAMd,YAC5Ce,EAAAA,KAACjB,EAAG,CAACkB,GAAI,CAAEC,UAAW,UAAUC,SAAA,CAC9BC,MAACvB,EAAkB,CAACI,OAAQA,IAC5BmB,MAACC,EAAU,CAACC,QAAQ,QAAQC,QAAQ,UAASJ,SAC1CJ,IAEHK,EAAAA,IAACC,EAAU,CAACG,MAAM,iBAAiBF,QAAQ,QAAQC,QAAQ,UAASJ,SACjElB,OAKMwB,EAAa3B,EAAAA,OAAO4B,EAAP5B,CAAa,KAAA,CACrCI,MAAO,OAwBHyB,EAAc7B,EAAAA,OAAO8B,EAAO,CAChCC,kBAAoBC,GAAkB,YAATA,GADXhC,CAEK,EAAGE,QAAO+B,cAAS,CAC1CC,WAAY,SACZzB,OAAQ,YACRC,YAAaR,EAAMS,QAAQC,SAASC,OAAO,eAC3CN,aAAc,QACd4B,QAAS,MACTrB,aAAc,UACVmB,GAAW,CACb3B,gBAAiBJ,EAAMS,QAAQC,SAASwB,WAAW,sBACnDV,MAAOxB,EAAMS,QAAQC,SAASyB,KAAK,2BAIjCC,EAAkBtC,EAAAA,OAAOC,EAAPD,CAAgC,EAAGE,QAAOC,aAAQ,CACxEC,MAAO,GACPC,OAAQ,GACRC,gBAAiBH,EACjBI,aAAc,MACdgC,YAAarC,EAAMa,QAAQ,GAC3BN,OAAQ,YACRC,YAAaR,EAAMS,QAAQC,SAASC,OAAO,kBAGvC2B,EAAsBxC,EAAAA,OAAOuB,EAAPvB,CAAmB,EAAGE,YAAO,CACvDY,aAAcZ,EAAMa,QAAQ,GAC5B0B,cAAevC,EAAMa,QAAQ,GAC7B2B,aAAc,YACdhC,YAAaR,EAAMS,QAAQC,SAASC,OAAO,kBAGvC8B,EAAwB3C,EAAAA,OAAOC,EAAPD,CAAY,CACxCwB,QAAS,OACToB,cAAe,WAGXC,EAAuB,EAAG5B,OAAMd,YACpCe,EAAAA,KAACW,EAAW,CAACiB,UAAU,MAAMb,QAAShB,EAAK8B,SAAS,WAAYhC,QAAS,EAACM,SAAA,CACxEC,EAAAA,IAACgB,EAAe,CAACnC,OAAQA,IACzBmB,EAAAA,IAACC,EAAU,CAACE,QAAQ,iBAASR,4HA5DS,CAAC+B,EAAqBC,KACvD,CACLC,OAAQ,IACDD,EAGH3B,MAACK,EAAU,CAACwB,WAAS,EAACpC,QAAS,WAC5BqC,OAAOC,QAAQJ,GACbK,KAAK,EAAEC,IAAKC,KAAOC,SAASD,GAAKC,SAASF,IAC1CG,IAAI,EAAEC,EAAOxD,KACZmB,EAAAA,IAACM,EAAI,CAAagC,KAAM,EAACvC,SACvBC,EAAAA,IAACN,EAAqB,CAACb,OAAQA,EAAQc,KAAM,GAAG+B,KAAeW,IAAQE,iBAD9DF,MAPOrC,EAAAA,IAACrB,EAAG,CAAAoB,SAAA,4DA8DK,CAACyC,EAAkBb,KACnD,CACLC,OAAQ,IACDD,EAGH/B,EAAAA,KAAA6C,EAAAA,SAAA,CAAA1C,SAAA,CACEC,MAACkB,EAAmB,CAACf,QAAQ,KAAIJ,SAAEyC,EAASE,gBAC5C1C,EAAAA,IAACqB,EAAqB,CAAAtB,SACnB+B,OAAOC,QAAQJ,GAAcS,IAAI,EAAEzC,EAAMd,KACxCmB,EAAAA,IAACuB,EAAoB,CAAY1C,OAAQA,EAAQc,KAAMA,GAA5BA,SAPTK,EAAAA,IAACrB,EAAG,CAAAoB,SAAA"}
|
|
1
|
+
{"version":3,"file":"colours-stories-utils.cjs.js","sources":["../../../../src/themes/tokens/colours/colours-stories-utils.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid2';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nexport const StyledColourSwatch = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: '100%',\n height: 100,\n backgroundColor: colour,\n borderRadius: theme.shape.borderRadius,\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n marginBottom: theme.spacing(2),\n}));\n\nexport const PrimitiveColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <Box sx={{ textAlign: 'center' }}>\n <StyledColourSwatch colour={colour} />\n <Typography display=\"block\" variant=\"caption\">\n {name}\n </Typography>\n <Typography color=\"text.secondary\" display=\"block\" variant=\"caption\">\n {colour}\n </Typography>\n </Box>\n);\n\nexport interface SemanticTokenEntry {\n token: string;\n usage: string;\n colour: string;\n primitive: string;\n}\n\nexport const SemanticColourTable = ({\n title,\n description,\n tokens,\n}: {\n title: string;\n description: string;\n tokens: SemanticTokenEntry[];\n}) => (\n <Box sx={{ mb: 6 }}>\n <Typography color=\"text.secondary\" sx={{ mb: 0.5, fontWeight: 600 }} variant=\"h5\">\n {title}\n </Typography>\n <Typography color=\"text.secondary\" sx={{ mb: 3 }} variant=\"body2\">\n {description}\n </Typography>\n <Box\n sx={{\n display: 'flex',\n pb: 1.5,\n borderBottom: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n }}\n >\n <Typography fontWeight={600} sx={{ width: 220, flexShrink: 0 }} variant=\"caption\">\n Design token\n </Typography>\n <Typography fontWeight={600} sx={{ flex: 1 }} variant=\"caption\">\n Usage\n </Typography>\n <Typography fontWeight={600} sx={{ width: 220, flexShrink: 0 }} variant=\"caption\">\n Colour token\n </Typography>\n </Box>\n {tokens.map(({ token, usage, colour, primitive }) => (\n <Box\n key={token}\n sx={{\n display: 'flex',\n alignItems: 'center',\n py: 2,\n borderBottom: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n }}\n >\n <Box sx={{ width: 220, flexShrink: 0 }}>\n <Typography\n component=\"code\"\n sx={{\n px: 1.5,\n py: 0.5,\n borderRadius: '100px',\n border: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n fontFamily: 'monospace',\n }}\n variant=\"caption\"\n >\n {token}\n </Typography>\n </Box>\n <Typography color=\"text.secondary\" sx={{ flex: 1, pr: 3 }} variant=\"body2\">\n {usage}\n </Typography>\n <Box\n sx={{\n width: 220,\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n ...(token.includes('inverse') && {\n bgcolor: 'semantic.background.background-inverse',\n px: 1,\n py: 0.5,\n borderRadius: '100px',\n }),\n }}\n >\n <Box\n sx={{\n width: 24,\n height: 24,\n borderRadius: '50%',\n backgroundColor: colour,\n border: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n flexShrink: 0,\n }}\n />\n <Typography\n component=\"code\"\n sx={{\n fontFamily: 'monospace',\n ...(token.includes('inverse') && { color: 'semantic.text.text-inverse-strong' }),\n }}\n variant=\"caption\"\n >\n {primitive}\n </Typography>\n </Box>\n </Box>\n ))}\n </Box>\n);\n\nexport const PrimitiveColourSection = ({\n title,\n description,\n codePattern,\n colours,\n}: {\n title: string;\n description?: string;\n codePattern?: string;\n colours: Record<string, string>;\n}) => (\n <Box sx={{ mb: 5 }}>\n <Typography color=\"text.secondary\" sx={{ mb: 0.5, fontWeight: 600 }} variant=\"h6\">\n {title}\n </Typography>\n {description && (\n <Typography color=\"text.secondary\" sx={{ mb: 1, maxWidth: 600 }} variant=\"body2\">\n {description}\n </Typography>\n )}\n {codePattern && (\n <Typography\n component=\"code\"\n sx={{\n display: 'inline-block',\n mb: 2,\n px: 0.75,\n py: 0.25,\n borderRadius: 0.5,\n bgcolor: 'semantic.fill.fill-weak',\n fontFamily: 'monospace',\n }}\n variant=\"caption\"\n >\n {codePattern}\n </Typography>\n )}\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>\n {Object.entries(colours).map(([shade, colour]) => (\n <Box key={shade} sx={{ width: 120 }}>\n <Box\n sx={{\n height: 80,\n backgroundColor: colour,\n borderRadius: 1,\n border: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n mb: 1,\n }}\n />\n <Typography display=\"block\" fontWeight={600} variant=\"caption\">\n {shade}\n </Typography>\n <Typography color=\"text.secondary\" display=\"block\" variant=\"caption\">\n {colour}\n </Typography>\n </Box>\n ))}\n </Box>\n </Box>\n);\n\nexport const StyledGrid = styled(Grid)(() => ({\n width: 800,\n overflowX: 'auto',\n}));\n\n// Helper function to create colour primitive stories\nexport const createColourPrimitiveStory = (colourGroup: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <StyledGrid container spacing={3}>\n {Object.entries(colourObject)\n .sort(([a], [b]) => parseInt(b) - parseInt(a))\n .map(([shade, colour]) => (\n <Grid key={shade} size={2}>\n <PrimitiveColourSwatch colour={colour} name={`${colourGroup}-${shade}`.toLowerCase()} />\n </Grid>\n ))}\n </StyledGrid>\n );\n },\n };\n};\n\nconst StyledStack = styled(Stack, {\n shouldForwardProp: (prop) => prop !== 'inverse',\n})<{ inverse: boolean }>(({ theme, inverse }) => ({\n alignItems: 'center',\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n borderRadius: '100px',\n padding: '6px',\n marginBottom: '10px',\n ...(inverse && {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n }),\n}));\n\nconst StyledColourBox = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: 24,\n height: 24,\n backgroundColor: colour,\n borderRadius: '50%',\n marginRight: theme.spacing(2),\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledCategoryTitle = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n paddingBottom: theme.spacing(1),\n borderBottom: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledColourContainer = styled(Box)({\n display: 'flex',\n flexDirection: 'column',\n});\n\nconst SemanticColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <StyledStack direction=\"row\" inverse={name.includes('inverse')} spacing={2}>\n <StyledColourBox colour={colour} />\n <Typography variant=\"body2\">{name}</Typography>\n </StyledStack>\n);\n\n// Helper function to create semantic colour stories\nexport const createSemanticColourStory = (category: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <>\n <StyledCategoryTitle variant=\"h6\">{category.toUpperCase()}</StyledCategoryTitle>\n <StyledColourContainer>\n {Object.entries(colourObject).map(([name, colour]) => (\n <SemanticColourSwatch key={name} colour={colour} name={name} />\n ))}\n </StyledColourContainer>\n </>\n );\n },\n };\n};\n"],"names":["StyledColourSwatch","styled","Box","theme","colour","width","height","backgroundColor","borderRadius","shape","border","borderColor","palette","semantic","stroke","marginBottom","spacing","PrimitiveColourSwatch","name","_jsxs","sx","textAlign","children","_jsx","Typography","display","variant","color","StyledGrid","Grid","overflowX","StyledStack","Stack","shouldForwardProp","prop","inverse","alignItems","padding","background","text","StyledColourBox","marginRight","StyledCategoryTitle","paddingBottom","borderBottom","StyledColourContainer","flexDirection","SemanticColourSwatch","direction","includes","title","description","codePattern","colours","mb","fontWeight","maxWidth","component","px","py","bgcolor","fontFamily","flexWrap","gap","Object","entries","map","shade","tokens","pb","flexShrink","flex","token","usage","primitive","pr","colourGroup","colourObject","render","container","sort","a","b","parseInt","size","toLowerCase","category","_Fragment","toUpperCase"],"mappings":"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"}
|
|
@@ -5,6 +5,23 @@ declare const PrimitiveColourSwatch: ({ name, colour }: {
|
|
|
5
5
|
name: string;
|
|
6
6
|
colour: string;
|
|
7
7
|
}) => react_jsx_runtime.JSX.Element;
|
|
8
|
+
interface SemanticTokenEntry {
|
|
9
|
+
token: string;
|
|
10
|
+
usage: string;
|
|
11
|
+
colour: string;
|
|
12
|
+
primitive: string;
|
|
13
|
+
}
|
|
14
|
+
declare const SemanticColourTable: ({ title, description, tokens, }: {
|
|
15
|
+
title: string;
|
|
16
|
+
description: string;
|
|
17
|
+
tokens: SemanticTokenEntry[];
|
|
18
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
declare const PrimitiveColourSection: ({ title, description, codePattern, colours, }: {
|
|
20
|
+
title: string;
|
|
21
|
+
description?: string;
|
|
22
|
+
codePattern?: string;
|
|
23
|
+
colours: Record<string, string>;
|
|
24
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
8
25
|
declare const StyledGrid: any;
|
|
9
26
|
declare const createColourPrimitiveStory: (colourGroup: string, colourObject: Record<string, string>) => {
|
|
10
27
|
render: () => react_jsx_runtime.JSX.Element;
|
|
@@ -13,4 +30,5 @@ declare const createSemanticColourStory: (category: string, colourObject: Record
|
|
|
13
30
|
render: () => react_jsx_runtime.JSX.Element;
|
|
14
31
|
};
|
|
15
32
|
|
|
16
|
-
export { PrimitiveColourSwatch, StyledColourSwatch, StyledGrid, createColourPrimitiveStory, createSemanticColourStory };
|
|
33
|
+
export { PrimitiveColourSection, PrimitiveColourSwatch, SemanticColourTable, StyledColourSwatch, StyledGrid, createColourPrimitiveStory, createSemanticColourStory };
|
|
34
|
+
export type { SemanticTokenEntry };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as e,jsx as r,Fragment as o}from"react/jsx-runtime";import i from"@mui/material/Box";import t from"@mui/material/Grid2";import n from"@mui/material/Stack";import{styled as a}from"@mui/material/styles";import l from"@mui/material/Typography";const s=a(i)(({theme:e,colour:r})=>({width:"100%",height:100,backgroundColor:r,borderRadius:e.shape.borderRadius,border:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"],marginBottom:e.spacing(2)})),d=({name:o,colour:t})=>e(i,{sx:{textAlign:"center"},children:[r(s,{colour:t}),r(l,{display:"block",variant:"caption",children:o}),r(l,{color:"text.secondary",display:"block",variant:"caption",children:t})]}),c=({title:o,description:t,tokens:n})=>e(i,{sx:{mb:6},children:[r(l,{color:"text.secondary",sx:{mb:.5,fontWeight:600},variant:"h5",children:o}),r(l,{color:"text.secondary",sx:{mb:3},variant:"body2",children:t}),e(i,{sx:{display:"flex",pb:1.5,borderBottom:"1px solid",borderColor:"semantic.stroke.stroke-weak"},children:[r(l,{fontWeight:600,sx:{width:220,flexShrink:0},variant:"caption",children:"Design token"}),r(l,{fontWeight:600,sx:{flex:1},variant:"caption",children:"Usage"}),r(l,{fontWeight:600,sx:{width:220,flexShrink:0},variant:"caption",children:"Colour token"})]}),n.map(({token:o,usage:t,colour:n,primitive:a})=>e(i,{sx:{display:"flex",alignItems:"center",py:2,borderBottom:"1px solid",borderColor:"semantic.stroke.stroke-weak"},children:[r(i,{sx:{width:220,flexShrink:0},children:r(l,{component:"code",sx:{px:1.5,py:.5,borderRadius:"100px",border:"1px solid",borderColor:"semantic.stroke.stroke-weak",fontFamily:"monospace"},variant:"caption",children:o})}),r(l,{color:"text.secondary",sx:{flex:1,pr:3},variant:"body2",children:t}),e(i,{sx:{width:220,flexShrink:0,display:"flex",alignItems:"center",gap:1,...o.includes("inverse")&&{bgcolor:"semantic.background.background-inverse",px:1,py:.5,borderRadius:"100px"}},children:[r(i,{sx:{width:24,height:24,borderRadius:"50%",backgroundColor:n,border:"1px solid",borderColor:"semantic.stroke.stroke-weak",flexShrink:0}}),r(l,{component:"code",sx:{fontFamily:"monospace",...o.includes("inverse")&&{color:"semantic.text.text-inverse-strong"}},variant:"caption",children:a})]})]},o))]}),p=({title:o,description:t,codePattern:n,colours:a})=>e(i,{sx:{mb:5},children:[r(l,{color:"text.secondary",sx:{mb:.5,fontWeight:600},variant:"h6",children:o}),t&&r(l,{color:"text.secondary",sx:{mb:1,maxWidth:600},variant:"body2",children:t}),n&&r(l,{component:"code",sx:{display:"inline-block",mb:2,px:.75,py:.25,borderRadius:.5,bgcolor:"semantic.fill.fill-weak",fontFamily:"monospace"},variant:"caption",children:n}),r(i,{sx:{display:"flex",flexWrap:"wrap",gap:2},children:Object.entries(a).map(([o,t])=>e(i,{sx:{width:120},children:[r(i,{sx:{height:80,backgroundColor:t,borderRadius:1,border:"1px solid",borderColor:"semantic.stroke.stroke-weak",mb:1}}),r(l,{display:"block",fontWeight:600,variant:"caption",children:o}),r(l,{color:"text.secondary",display:"block",variant:"caption",children:t})]},o))})]}),m=a(t)(()=>({width:800,overflowX:"auto"})),h=(e,o)=>({render:()=>o?r(m,{container:!0,spacing:3,children:Object.entries(o).sort(([e],[r])=>parseInt(r)-parseInt(e)).map(([o,i])=>r(t,{size:2,children:r(d,{colour:i,name:`${e}-${o}`.toLowerCase()})},o))}):r(i,{children:"No colors available"})}),x=a(n,{shouldForwardProp:e=>"inverse"!==e})(({theme:e,inverse:r})=>({alignItems:"center",border:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"],borderRadius:"100px",padding:"6px",marginBottom:"10px",...r&&{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"]}})),b=a(i)(({theme:e,colour:r})=>({width:24,height:24,backgroundColor:r,borderRadius:"50%",marginRight:e.spacing(2),border:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"]})),k=a(l)(({theme:e})=>({marginBottom:e.spacing(2),paddingBottom:e.spacing(1),borderBottom:"1px solid",borderColor:e.palette.semantic.stroke["stroke-weak"]})),g=a(i)({display:"flex",flexDirection:"column"}),u=({name:o,colour:i})=>e(x,{direction:"row",inverse:o.includes("inverse"),spacing:2,children:[r(b,{colour:i}),r(l,{variant:"body2",children:o})]}),f=(t,n)=>({render:()=>n?e(o,{children:[r(k,{variant:"h6",children:t.toUpperCase()}),r(g,{children:Object.entries(n).map(([e,o])=>r(u,{colour:o,name:e},e))})]}):r(i,{children:"No colors available"})});export{p as PrimitiveColourSection,d as PrimitiveColourSwatch,c as SemanticColourTable,s as StyledColourSwatch,m as StyledGrid,h as createColourPrimitiveStory,f as createSemanticColourStory};
|
|
2
2
|
//# sourceMappingURL=colours-stories-utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colours-stories-utils.js","sources":["../../../../src/themes/tokens/colours/colours-stories-utils.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid2';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nexport const StyledColourSwatch = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: '100%',\n height: 100,\n backgroundColor: colour,\n borderRadius: theme.shape.borderRadius,\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n marginBottom: theme.spacing(2),\n}));\n\nexport const PrimitiveColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <Box sx={{ textAlign: 'center' }}>\n <StyledColourSwatch colour={colour} />\n <Typography display=\"block\" variant=\"caption\">\n {name}\n </Typography>\n <Typography color=\"text.secondary\" display=\"block\" variant=\"caption\">\n {colour}\n </Typography>\n </Box>\n);\n\nexport const StyledGrid = styled(Grid)(() => ({\n width: 800,\n}));\n\n// Helper function to create colour primitive stories\nexport const createColourPrimitiveStory = (colourGroup: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <StyledGrid container spacing={3}>\n {Object.entries(colourObject)\n .sort(([a], [b]) => parseInt(b) - parseInt(a))\n .map(([shade, colour]) => (\n <Grid key={shade} size={2}>\n <PrimitiveColourSwatch colour={colour} name={`${colourGroup}-${shade}`.toLowerCase()} />\n </Grid>\n ))}\n </StyledGrid>\n );\n },\n };\n};\n\nconst StyledStack = styled(Stack, {\n shouldForwardProp: (prop) => prop !== 'inverse',\n})<{ inverse: boolean }>(({ theme, inverse }) => ({\n alignItems: 'center',\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n borderRadius: '100px',\n padding: '6px',\n marginBottom: '10px',\n ...(inverse && {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n }),\n}));\n\nconst StyledColourBox = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: 24,\n height: 24,\n backgroundColor: colour,\n borderRadius: '50%',\n marginRight: theme.spacing(2),\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledCategoryTitle = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n paddingBottom: theme.spacing(1),\n borderBottom: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledColourContainer = styled(Box)({\n display: 'flex',\n flexDirection: 'column',\n});\n\nconst SemanticColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <StyledStack direction=\"row\" inverse={name.includes('inverse')} spacing={2}>\n <StyledColourBox colour={colour} />\n <Typography variant=\"body2\">{name}</Typography>\n </StyledStack>\n);\n\n// Helper function to create semantic colour stories\nexport const createSemanticColourStory = (category: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <>\n <StyledCategoryTitle variant=\"h6\">{category.toUpperCase()}</StyledCategoryTitle>\n <StyledColourContainer>\n {Object.entries(colourObject).map(([name, colour]) => (\n <SemanticColourSwatch key={name} colour={colour} name={name} />\n ))}\n </StyledColourContainer>\n </>\n );\n },\n };\n};\n"],"names":["StyledColourSwatch","styled","Box","theme","colour","width","height","backgroundColor","borderRadius","shape","border","borderColor","palette","semantic","stroke","marginBottom","spacing","PrimitiveColourSwatch","name","_jsxs","sx","textAlign","children","_jsx","Typography","display","variant","color","StyledGrid","Grid","createColourPrimitiveStory","colourGroup","colourObject","render","container","Object","entries","sort","a","b","parseInt","map","shade","size","toLowerCase","StyledStack","Stack","shouldForwardProp","prop","inverse","alignItems","padding","background","text","StyledColourBox","marginRight","StyledCategoryTitle","paddingBottom","borderBottom","StyledColourContainer","flexDirection","SemanticColourSwatch","direction","includes","createSemanticColourStory","category","_Fragment","toUpperCase"],"mappings":"6PAMO,MAAMA,EAAqBC,EAAOC,EAAPD,CAAgC,EAAGE,QAAOC,aAAQ,CAClFC,MAAO,OACPC,OAAQ,IACRC,gBAAiBH,EACjBI,aAAcL,EAAMM,MAAMD,aAC1BE,OAAQ,YACRC,YAAaR,EAAMS,QAAQC,SAASC,OAAO,eAC3CC,aAAcZ,EAAMa,QAAQ,MAGjBC,EAAwB,EAAGC,OAAMd,YAC5Ce,EAACjB,EAAG,CAACkB,GAAI,CAAEC,UAAW,UAAUC,SAAA,CAC9BC,EAACvB,EAAkB,CAACI,OAAQA,IAC5BmB,EAACC,EAAU,CAACC,QAAQ,QAAQC,QAAQ,UAASJ,SAC1CJ,IAEHK,EAACC,EAAU,CAACG,MAAM,iBAAiBF,QAAQ,QAAQC,QAAQ,UAASJ,SACjElB,OAKMwB,EAAa3B,EAAO4B,EAAP5B,CAAa,KAAA,CACrCI,MAAO,OAIIyB,EAA6B,CAACC,EAAqBC,KACvD,CACLC,OAAQ,IACDD,EAGHT,EAACK,EAAU,CAACM,WAAS,EAAClB,QAAS,WAC5BmB,OAAOC,QAAQJ,GACbK,KAAK,EAAEC,IAAKC,KAAOC,SAASD,GAAKC,SAASF,IAC1CG,IAAI,EAAEC,EAAOtC,KACZmB,EAACM,EAAI,CAAac,KAAM,EAACrB,SACvBC,EAACN,EAAqB,CAACb,OAAQA,EAAQc,KAAM,GAAGa,KAAeW,IAAQE,iBAD9DF,MAPOnB,EAACrB,EAAG,CAAAoB,SAAA,0BAiB9BuB,EAAc5C,EAAO6C,EAAO,CAChCC,kBAAoBC,GAAkB,YAATA,GADX/C,CAEK,EAAGE,QAAO8C,cAAS,CAC1CC,WAAY,SACZxC,OAAQ,YACRC,YAAaR,EAAMS,QAAQC,SAASC,OAAO,eAC3CN,aAAc,QACd2C,QAAS,MACTpC,aAAc,UACVkC,GAAW,CACb1C,gBAAiBJ,EAAMS,QAAQC,SAASuC,WAAW,sBACnDzB,MAAOxB,EAAMS,QAAQC,SAASwC,KAAK,2BAIjCC,EAAkBrD,EAAOC,EAAPD,CAAgC,EAAGE,QAAOC,aAAQ,CACxEC,MAAO,GACPC,OAAQ,GACRC,gBAAiBH,EACjBI,aAAc,MACd+C,YAAapD,EAAMa,QAAQ,GAC3BN,OAAQ,YACRC,YAAaR,EAAMS,QAAQC,SAASC,OAAO,kBAGvC0C,EAAsBvD,EAAOuB,EAAPvB,CAAmB,EAAGE,YAAO,CACvDY,aAAcZ,EAAMa,QAAQ,GAC5ByC,cAAetD,EAAMa,QAAQ,GAC7B0C,aAAc,YACd/C,YAAaR,EAAMS,QAAQC,SAASC,OAAO,kBAGvC6C,EAAwB1D,EAAOC,EAAPD,CAAY,CACxCwB,QAAS,OACTmC,cAAe,WAGXC,EAAuB,EAAG3C,OAAMd,YACpCe,EAAC0B,EAAW,CAACiB,UAAU,MAAMb,QAAS/B,EAAK6C,SAAS,WAAY/C,QAAS,EAACM,SAAA,CACxEC,EAAC+B,EAAe,CAAClD,OAAQA,IACzBmB,EAACC,EAAU,CAACE,QAAQ,iBAASR,OAKpB8C,EAA4B,CAACC,EAAkBjC,KACnD,CACLC,OAAQ,IACDD,EAGHb,EAAA+C,EAAA,CAAA5C,SAAA,CACEC,EAACiC,EAAmB,CAAC9B,QAAQ,KAAIJ,SAAE2C,EAASE,gBAC5C5C,EAACoC,EAAqB,CAAArC,SACnBa,OAAOC,QAAQJ,GAAcS,IAAI,EAAEvB,EAAMd,KACxCmB,EAACsC,EAAoB,CAAYzD,OAAQA,EAAQc,KAAMA,GAA5BA,SAPTK,EAACrB,EAAG,CAAAoB,SAAA"}
|
|
1
|
+
{"version":3,"file":"colours-stories-utils.js","sources":["../../../../src/themes/tokens/colours/colours-stories-utils.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid2';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nexport const StyledColourSwatch = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: '100%',\n height: 100,\n backgroundColor: colour,\n borderRadius: theme.shape.borderRadius,\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n marginBottom: theme.spacing(2),\n}));\n\nexport const PrimitiveColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <Box sx={{ textAlign: 'center' }}>\n <StyledColourSwatch colour={colour} />\n <Typography display=\"block\" variant=\"caption\">\n {name}\n </Typography>\n <Typography color=\"text.secondary\" display=\"block\" variant=\"caption\">\n {colour}\n </Typography>\n </Box>\n);\n\nexport interface SemanticTokenEntry {\n token: string;\n usage: string;\n colour: string;\n primitive: string;\n}\n\nexport const SemanticColourTable = ({\n title,\n description,\n tokens,\n}: {\n title: string;\n description: string;\n tokens: SemanticTokenEntry[];\n}) => (\n <Box sx={{ mb: 6 }}>\n <Typography color=\"text.secondary\" sx={{ mb: 0.5, fontWeight: 600 }} variant=\"h5\">\n {title}\n </Typography>\n <Typography color=\"text.secondary\" sx={{ mb: 3 }} variant=\"body2\">\n {description}\n </Typography>\n <Box\n sx={{\n display: 'flex',\n pb: 1.5,\n borderBottom: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n }}\n >\n <Typography fontWeight={600} sx={{ width: 220, flexShrink: 0 }} variant=\"caption\">\n Design token\n </Typography>\n <Typography fontWeight={600} sx={{ flex: 1 }} variant=\"caption\">\n Usage\n </Typography>\n <Typography fontWeight={600} sx={{ width: 220, flexShrink: 0 }} variant=\"caption\">\n Colour token\n </Typography>\n </Box>\n {tokens.map(({ token, usage, colour, primitive }) => (\n <Box\n key={token}\n sx={{\n display: 'flex',\n alignItems: 'center',\n py: 2,\n borderBottom: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n }}\n >\n <Box sx={{ width: 220, flexShrink: 0 }}>\n <Typography\n component=\"code\"\n sx={{\n px: 1.5,\n py: 0.5,\n borderRadius: '100px',\n border: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n fontFamily: 'monospace',\n }}\n variant=\"caption\"\n >\n {token}\n </Typography>\n </Box>\n <Typography color=\"text.secondary\" sx={{ flex: 1, pr: 3 }} variant=\"body2\">\n {usage}\n </Typography>\n <Box\n sx={{\n width: 220,\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n ...(token.includes('inverse') && {\n bgcolor: 'semantic.background.background-inverse',\n px: 1,\n py: 0.5,\n borderRadius: '100px',\n }),\n }}\n >\n <Box\n sx={{\n width: 24,\n height: 24,\n borderRadius: '50%',\n backgroundColor: colour,\n border: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n flexShrink: 0,\n }}\n />\n <Typography\n component=\"code\"\n sx={{\n fontFamily: 'monospace',\n ...(token.includes('inverse') && { color: 'semantic.text.text-inverse-strong' }),\n }}\n variant=\"caption\"\n >\n {primitive}\n </Typography>\n </Box>\n </Box>\n ))}\n </Box>\n);\n\nexport const PrimitiveColourSection = ({\n title,\n description,\n codePattern,\n colours,\n}: {\n title: string;\n description?: string;\n codePattern?: string;\n colours: Record<string, string>;\n}) => (\n <Box sx={{ mb: 5 }}>\n <Typography color=\"text.secondary\" sx={{ mb: 0.5, fontWeight: 600 }} variant=\"h6\">\n {title}\n </Typography>\n {description && (\n <Typography color=\"text.secondary\" sx={{ mb: 1, maxWidth: 600 }} variant=\"body2\">\n {description}\n </Typography>\n )}\n {codePattern && (\n <Typography\n component=\"code\"\n sx={{\n display: 'inline-block',\n mb: 2,\n px: 0.75,\n py: 0.25,\n borderRadius: 0.5,\n bgcolor: 'semantic.fill.fill-weak',\n fontFamily: 'monospace',\n }}\n variant=\"caption\"\n >\n {codePattern}\n </Typography>\n )}\n <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>\n {Object.entries(colours).map(([shade, colour]) => (\n <Box key={shade} sx={{ width: 120 }}>\n <Box\n sx={{\n height: 80,\n backgroundColor: colour,\n borderRadius: 1,\n border: '1px solid',\n borderColor: 'semantic.stroke.stroke-weak',\n mb: 1,\n }}\n />\n <Typography display=\"block\" fontWeight={600} variant=\"caption\">\n {shade}\n </Typography>\n <Typography color=\"text.secondary\" display=\"block\" variant=\"caption\">\n {colour}\n </Typography>\n </Box>\n ))}\n </Box>\n </Box>\n);\n\nexport const StyledGrid = styled(Grid)(() => ({\n width: 800,\n overflowX: 'auto',\n}));\n\n// Helper function to create colour primitive stories\nexport const createColourPrimitiveStory = (colourGroup: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <StyledGrid container spacing={3}>\n {Object.entries(colourObject)\n .sort(([a], [b]) => parseInt(b) - parseInt(a))\n .map(([shade, colour]) => (\n <Grid key={shade} size={2}>\n <PrimitiveColourSwatch colour={colour} name={`${colourGroup}-${shade}`.toLowerCase()} />\n </Grid>\n ))}\n </StyledGrid>\n );\n },\n };\n};\n\nconst StyledStack = styled(Stack, {\n shouldForwardProp: (prop) => prop !== 'inverse',\n})<{ inverse: boolean }>(({ theme, inverse }) => ({\n alignItems: 'center',\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n borderRadius: '100px',\n padding: '6px',\n marginBottom: '10px',\n ...(inverse && {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n }),\n}));\n\nconst StyledColourBox = styled(Box)<{ colour: string }>(({ theme, colour }) => ({\n width: 24,\n height: 24,\n backgroundColor: colour,\n borderRadius: '50%',\n marginRight: theme.spacing(2),\n border: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledCategoryTitle = styled(Typography)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n paddingBottom: theme.spacing(1),\n borderBottom: '1px solid',\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n}));\n\nconst StyledColourContainer = styled(Box)({\n display: 'flex',\n flexDirection: 'column',\n});\n\nconst SemanticColourSwatch = ({ name, colour }: { name: string; colour: string }) => (\n <StyledStack direction=\"row\" inverse={name.includes('inverse')} spacing={2}>\n <StyledColourBox colour={colour} />\n <Typography variant=\"body2\">{name}</Typography>\n </StyledStack>\n);\n\n// Helper function to create semantic colour stories\nexport const createSemanticColourStory = (category: string, colourObject: Record<string, string>) => {\n return {\n render: () => {\n if (!colourObject) return <Box>No colors available</Box>;\n\n return (\n <>\n <StyledCategoryTitle variant=\"h6\">{category.toUpperCase()}</StyledCategoryTitle>\n <StyledColourContainer>\n {Object.entries(colourObject).map(([name, colour]) => (\n <SemanticColourSwatch key={name} colour={colour} name={name} />\n ))}\n </StyledColourContainer>\n </>\n );\n },\n };\n};\n"],"names":["StyledColourSwatch","styled","Box","theme","colour","width","height","backgroundColor","borderRadius","shape","border","borderColor","palette","semantic","stroke","marginBottom","spacing","PrimitiveColourSwatch","name","_jsxs","sx","textAlign","children","_jsx","Typography","display","variant","color","SemanticColourTable","title","description","tokens","mb","fontWeight","pb","borderBottom","flexShrink","flex","map","token","usage","primitive","alignItems","py","component","px","fontFamily","pr","gap","includes","bgcolor","PrimitiveColourSection","codePattern","colours","maxWidth","flexWrap","Object","entries","shade","StyledGrid","Grid","overflowX","createColourPrimitiveStory","colourGroup","colourObject","render","container","sort","a","b","parseInt","size","toLowerCase","StyledStack","Stack","shouldForwardProp","prop","inverse","padding","background","text","StyledColourBox","marginRight","StyledCategoryTitle","paddingBottom","StyledColourContainer","flexDirection","SemanticColourSwatch","direction","createSemanticColourStory","category","_Fragment","toUpperCase"],"mappings":"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"}
|