@strapi/design-system 2.2.0 → 2.2.1

package/dist/index.js

@@ -1003,7 +1003,7 @@
   &:hover svg path {
     fill: ${({theme:i})=>i.colors.neutral900};
   }
-`,Qo=b.forwardRef(({actions:i,children:e,label:t,nextLabel:n,onNext:r,onPrevious:s,previousLabel:o,secondaryLabel:l,selectedSlide:a,...c},h)=>{const u=b.useRef(null),f=b.useRef(null),g=b.Children.map(e,(x,w)=>b.cloneElement(x,{selected:w===a})),p=x=>{switch(x.key){case U.RIGHT:{x.preventDefault(),f!=null&&f.current&&f.current.focus(),r&&r();break}case U.LEFT:{x.preventDefault(),u!=null&&u.current&&u.current.focus(),s&&s();break}}};return d.jsx(A,{ref:h,...c,onKeyDown:p,children:d.jsxs(A,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100",children:[d.jsxs(yd,{tag:"section","aria-roledescription":"carousel","aria-label":t,display:"grid",position:"relative",children:[g&&g.length>1&&d.jsxs(d.Fragment,{children:[d.jsx(os,{tag:"button",onClick:s,$area:"startAction",ref:u,type:"button",children:d.jsx(yt,{label:o,children:d.jsx(z.ChevronLeft,{width:"1.6rem",height:"1.6rem",fill:"neutral600"})})}),d.jsx(os,{tag:"button",onClick:r,$area:"endAction",ref:f,type:"button",children:d.jsx(yt,{label:n,children:d.jsx(z.ChevronRight,{width:"1.6rem",height:"1.6rem",fill:"neutral600"})})})]}),d.jsx(wd,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden",children:g}),i]}),l&&d.jsx(A,{paddingTop:2,paddingLeft:4,paddingRight:4,children:d.jsx(dn,{label:l,children:d.jsx(T,{justifyContent:"center",children:d.jsx(O,{variant:"pi",textColor:"neutral600",ellipsis:!0,children:l})})})})]})})}),vd={accordions:{S:"4.8rem",M:"8.8rem"},button:{S:{initial:"4rem",medium:"3.2rem"},M:{initial:"4.4rem",medium:"3.6rem"},L:{initial:"4.8rem",medium:"4rem"}}},Zo={sizes:vd,zIndices:{navigation:100,overlay:300,modal:310,dialog:320,popover:500,notification:700,tooltip:1e3},spaces:["0px","4px","8px","12px","16px","20px","24px","32px","40px","48px","56px","64px"],borderRadius:"4px",breakpoints:{initial:"@media(min-width: 0px)",small:"@media(min-width: 520px)",medium:"@media(min-width: 768px)",large:"@media(min-width: 1080px)"},fontSizes:["1.1rem","1.2rem","1.4rem","1.6rem","1.8rem","2rem","2.8rem","3.2rem"],lineHeights:[1.14,1.22,1.25,1.33,1.43,1.45,1.5],fontWeights:{regular:400,semiBold:500,bold:600},transitions:oc,motion:{easings:En,timings:In}},Sd={color:{alternative100:"#f6ecfc",alternative200:"#e0c1f4",alternative500:"#ac73e6",alternative600:"#9736e8",alternative700:"#8312d1",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#fcecea",danger200:"#f5c0b8",danger500:"#ee5e52",danger600:"#d02b20",danger700:"#b72b1a",neutral0:"#ffffff",neutral100:"#f6f6f9",neutral1000:"#181826",neutral150:"#eaeaef",neutral200:"#dcdce4",neutral300:"#c0c0cf",neutral400:"#a5a5ba",neutral500:"#8e8ea9",neutral600:"#666687",neutral700:"#4a4a6a",neutral800:"#32324d",neutral900:"#212134",primary100:"#f0f0ff",primary200:"#d9d8ff",primary500:"#7b79ff",primary600:"#4945ff",primary700:"#271fe0",secondary100:"#eaf5ff",secondary200:"#b8e1ff",secondary500:"#66b7f1",secondary600:"#0c75af",secondary700:"#006096",success100:"#eafbe7",success200:"#c6f0c2",success500:"#5cb176",success600:"#328048",success700:"#2f6846",warning100:"#fdf4dc",warning200:"#fae7b9",warning500:"#f29d41",warning600:"#d9822f",warning700:"#be5d01"}},Cd={shadow:{filterShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"0px 2px 15px rgba(33, 33, 52, 0.1)",tableShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)"}},Tr={colors:Sd.color,shadows:Cd.shadow,...Zo},kd={color:{alternative100:"#181826",alternative200:"#4a4a6a",alternative500:"#ac73e6",alternative600:"#ac73e6",alternative700:"#e0c1f4",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#181826",danger200:"#4a4a6a",danger500:"#ee5e52",danger600:"#ee5e52",danger700:"#ee5e52",neutral0:"#212134",neutral100:"#181826",neutral1000:"#ffffff",neutral150:"#32324d",neutral200:"#4a4a6a",neutral300:"#666687",neutral400:"#a5a5ba",neutral500:"#c0c0cf",neutral600:"#a5a5ba",neutral700:"#eaeaef",neutral800:"#ffffff",neutral900:"#ffffff",primary100:"#181826",primary200:"#4a4a6a",primary500:"#4945ff",primary600:"#7b79ff",primary700:"#7b79ff",secondary100:"#181826",secondary200:"#4a4a6a",secondary500:"#66b7f1",secondary600:"#66b7f1",secondary700:"#b8e1ff",success100:"#181826",success200:"#4a4a6a",success500:"#5cb176",success600:"#5cb176",success700:"#c6f0c2",warning100:"#181826",warning200:"#4a4a6a",warning500:"#f29d41",warning600:"#f29d41",warning700:"#fae7b9"}},$d={shadow:{filterShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",tableShadow:"1px 1px 10px rgba(3, 3, 5, 0.2)"}},Td={colors:kd.color,shadows:$d.shadow,...Zo},ls=i=>`
+`,Qo=b.forwardRef(({actions:i,children:e,label:t,nextLabel:n,onNext:r,onPrevious:s,previousLabel:o,secondaryLabel:l,selectedSlide:a,...c},h)=>{const u=b.useRef(null),f=b.useRef(null),g=b.Children.map(e,(x,w)=>b.cloneElement(x,{selected:w===a})),p=x=>{switch(x.key){case U.RIGHT:{x.preventDefault(),f!=null&&f.current&&f.current.focus(),r&&r();break}case U.LEFT:{x.preventDefault(),u!=null&&u.current&&u.current.focus(),s&&s();break}}};return d.jsx(A,{ref:h,...c,onKeyDown:p,children:d.jsxs(A,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100",children:[d.jsxs(yd,{tag:"section","aria-roledescription":"carousel","aria-label":t,display:"grid",position:"relative",children:[g&&g.length>1&&d.jsxs(d.Fragment,{children:[d.jsx(os,{tag:"button",onClick:s,$area:"startAction",ref:u,type:"button",children:d.jsx(yt,{label:o,children:d.jsx(z.ChevronLeft,{width:"1.6rem",height:"1.6rem",fill:"neutral600"})})}),d.jsx(os,{tag:"button",onClick:r,$area:"endAction",ref:f,type:"button",children:d.jsx(yt,{label:n,children:d.jsx(z.ChevronRight,{width:"1.6rem",height:"1.6rem",fill:"neutral600"})})})]}),d.jsx(wd,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden",children:g}),i]}),l&&d.jsx(A,{paddingTop:2,paddingLeft:4,paddingRight:4,children:d.jsx(dn,{label:l,children:d.jsx(T,{justifyContent:"center",children:d.jsx(O,{variant:"pi",textColor:"neutral600",ellipsis:!0,children:l})})})})]})})}),vd={accordions:{S:"4.8rem",M:"8.8rem"},button:{S:{initial:"4rem",medium:"3.2rem"},M:{initial:"4.4rem",medium:"3.6rem"},L:{initial:"4.8rem",medium:"4rem"}}},Zo={sizes:vd,zIndices:{navigation:100,overlay:300,modal:310,dialog:320,popover:500,notification:700,tooltip:1e3},spaces:["0px","4px","8px","12px","16px","20px","24px","32px","40px","48px","56px","64px"],borderRadius:"4px",breakpoints:{initial:"@media(min-width: 0px)",small:"@media(min-width: 520px)",medium:"@media(min-width: 768px)",large:"@media(min-width: 1080px)"},fontSizes:["1.1rem","1.2rem","1.4rem","1.6rem","1.8rem","2rem","2.8rem","3.2rem"],lineHeights:[1.14,1.22,1.25,1.33,1.43,1.45,1.5],fontWeights:{regular:400,semiBold:500,bold:600},transitions:oc,motion:{easings:En,timings:In}},Sd={color:{alternative100:"#f6ecfc",alternative200:"#e0c1f4",alternative500:"#ac73e6",alternative600:"#9736e8",alternative700:"#8312d1",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#fcecea",danger200:"#f5c0b8",danger500:"#ee5e52",danger600:"#d02b20",danger700:"#b72b1a",neutral0:"#ffffff",neutral100:"#f6f6f9",neutral1000:"#181826",neutral150:"#eaeaef",neutral200:"#dcdce4",neutral300:"#c0c0cf",neutral400:"#a5a5ba",neutral500:"#8e8ea9",neutral600:"#666687",neutral700:"#4a4a6a",neutral800:"#32324d",neutral900:"#212134",primary100:"#f0f0ff",primary200:"#d9d8ff",primary500:"#7b79ff",primary600:"#4945ff",primary700:"#271fe0",secondary100:"#eaf5ff",secondary200:"#b8e1ff",secondary500:"#66b7f1",secondary600:"#0c75af",secondary700:"#006096",success100:"#eafbe7",success200:"#c6f0c2",success500:"#5cb176",success600:"#328048",success700:"#2f6846",warning100:"#fdf4dc",warning200:"#fae7b9",warning500:"#f29d41",warning600:"#d9822f",warning700:"#be5d01"}},Cd={shadow:{filterShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"0px 2px 15px rgba(33, 33, 52, 0.1)",tableShadow:"0px 1px 4px rgba(33, 33, 52, 0.1)"}},Tr={colorScheme:"light",colors:Sd.color,shadows:Cd.shadow,...Zo},kd={color:{alternative100:"#181826",alternative200:"#4a4a6a",alternative500:"#ac73e6",alternative600:"#ac73e6",alternative700:"#e0c1f4",buttonNeutral0:"#ffffff",buttonPrimary500:"#7b79ff",buttonPrimary600:"#4945ff",danger100:"#181826",danger200:"#4a4a6a",danger500:"#ee5e52",danger600:"#ee5e52",danger700:"#ee5e52",neutral0:"#212134",neutral100:"#181826",neutral1000:"#ffffff",neutral150:"#32324d",neutral200:"#4a4a6a",neutral300:"#666687",neutral400:"#a5a5ba",neutral500:"#c0c0cf",neutral600:"#a5a5ba",neutral700:"#eaeaef",neutral800:"#ffffff",neutral900:"#ffffff",primary100:"#181826",primary200:"#4a4a6a",primary500:"#4945ff",primary600:"#7b79ff",primary700:"#7b79ff",secondary100:"#181826",secondary200:"#4a4a6a",secondary500:"#66b7f1",secondary600:"#66b7f1",secondary700:"#b8e1ff",success100:"#181826",success200:"#4a4a6a",success500:"#5cb176",success600:"#5cb176",success700:"#c6f0c2",warning100:"#181826",warning200:"#4a4a6a",warning500:"#f29d41",warning600:"#f29d41",warning700:"#fae7b9"}},$d={shadow:{filterShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",focus:"inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)",focusShadow:"0px 0px 6px rgba(76, 191, 255, 0.75)",popupShadow:"1px 1px 10px rgba(3, 3, 5, 0.35)",tableShadow:"1px 1px 10px rgba(3, 3, 5, 0.2)"}},Td={colorScheme:"dark",colors:kd.color,shadows:$d.shadow,...Zo},ls=i=>`
 ${i}
 
 The following is an example:
@@ -1269,7 +1269,7 @@ const myCustomTheme = extendTheme(lightTheme, {
   border-radius: ${({theme:i})=>i.borderRadius};
   width: var(--radix-combobox-trigger-width);
   /* This is from the design-system figma file. */
-  max-height: 15rem;
+  max-height: 35.5rem;
   z-index: ${({theme:i})=>i.zIndices.popover};
 
   &:focus-visible {

package/dist/index.mjs

@@ -2312,6 +2312,7 @@ const Js = m.createContext({ id: "" }), Qs = () => m.useContext(Js), Rm = m.forw
     tableShadow: "0px 1px 4px rgba(33, 33, 52, 0.1)"
   }
 }, el = {
+  colorScheme: "light",
   colors: Td.color,
   shadows: Rd.shadow,
   ...Zs
@@ -2372,6 +2373,7 @@ const Js = m.createContext({ id: "" }), Qs = () => m.useContext(Js), Rm = m.forw
     tableShadow: "1px 1px 10px rgba(3, 3, 5, 0.2)"
   }
 }, Nm = {
+  colorScheme: "dark",
   colors: Md.color,
   shadows: Dd.shadow,
   ...Zs
@@ -3678,7 +3680,7 @@ const nu = Se((i, e) => {
   border-radius: ${({ theme: i }) => i.borderRadius};
   width: var(--radix-combobox-trigger-width);
   /* This is from the design-system figma file. */
-  max-height: 15rem;
+  max-height: 35.5rem;
   z-index: ${({ theme: i }) => i.zIndices.popover};
 
   &:focus-visible {

package/dist/themes/darkTheme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/darkTheme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,eAAO,MAAM,SAAS,EAAE,YAIvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/darkTheme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,eAAO,MAAM,SAAS,EAAE,YAKvB,CAAC"}

package/dist/themes/index.d.ts

@@ -4,8 +4,15 @@ export * from './lightTheme';
 export * from './darkTheme';
 export * from './extendTheme';
 export * from './utils';
+/**
+ * Identifies which built-in color scheme a theme is based on. Read it from a
+ * `styled-components` theme (`theme.colorScheme`) when a style genuinely has to
+ * branch on light vs dark — prefer semantic color tokens whenever one exists.
+ */
+export type ColorScheme = 'light' | 'dark';
 export interface StrapiTheme extends CommonTheme {
     colors: Colors;
     shadows: Shadows;
+    colorScheme: ColorScheme;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AAExB,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AAExB;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B"}

package/dist/themes/lightTheme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/lightTheme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,eAAO,MAAM,UAAU,EAAE,YAIxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/lightTheme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,eAAO,MAAM,UAAU,EAAE,YAKxB,CAAC"}

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@strapi/design-system",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "type": "module",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/strapi/design-system.git",
+    "directory": "packages/design-system"
+  },
   "sideEffects": false,
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -33,13 +38,13 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/react-use-callback-ref": "1.0.1",
-    "@strapi/ui-primitives": "2.2.0",
+    "@strapi/ui-primitives": "2.2.1",
     "@uiw/react-codemirror": "4.22.2",
-    "lodash": "4.17.23",
+    "lodash": "4.18.1",
     "react-remove-scroll": "2.5.10"
   },
   "devDependencies": {
-    "@strapi/icons": "2.2.0",
+    "@strapi/icons": "2.2.1",
     "@types/lodash": "^4.17.23",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "jest": "29.7.0",