newskit 3.13.0 → 4.2.0

package/esm/theme/component-defaults.js

@@ -1,4 +1,21 @@
 export var componentDefaults = {
+    assistiveText: {
+        small: {
+            stylePreset: 'assistiveText',
+            typographyPreset: 'utilityBody010',
+            minHeight: 'sizing030',
+        },
+        medium: {
+            stylePreset: 'assistiveText',
+            typographyPreset: 'utilityBody020',
+            minHeight: 'sizing030',
+        },
+        large: {
+            stylePreset: 'assistiveText',
+            typographyPreset: 'utilityBody030',
+            minHeight: 'sizing030',
+        },
+    },
     audioPlayer: {
         seekBar: {
             slider: {
@@ -28,22 +45,22 @@ export var componentDefaults = {
         controls: {
             space: 'space030',
             previousButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             replayButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             playPauseButton: {
-                stylePreset: 'audioPlayerPlayPauseButton',
+                stylePreset: 'iconButtonSolidPrimary',
             },
             forwardButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             nextButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             popoutButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
         },
         volumeControl: {
@@ -56,14 +73,14 @@ export var componentDefaults = {
                     stylePreset: 'volumeControlIndicator',
                 },
                 thumb: {
-                    stylePreset: 'audioPlayerVolumeControlThumb',
+                    stylePreset: 'audioPlayerThumb',
                     size: 'sizing040',
                 },
                 thumbLabel: {
                     stylePreset: 'volumeControlLabels',
                 },
                 labels: {
-                    stylePreset: 'volumeControlButtons',
+                    stylePreset: 'iconButtonMinimalPrimary',
                 },
             },
         },
@@ -86,7 +103,7 @@ export var componentDefaults = {
                 },
                 message: {
                     stylePreset: 'inkInverse',
-                    typographyPreset: 'utilityBody010',
+                    typographyPreset: 'utilityBody020',
                 },
             },
             actions: {
@@ -113,7 +130,7 @@ export var componentDefaults = {
                 },
                 message: {
                     stylePreset: 'inkInverse',
-                    typographyPreset: 'utilityBody010',
+                    typographyPreset: 'utilityBody020',
                 },
             },
             actions: {
@@ -124,23 +141,10 @@ export var componentDefaults = {
             },
         },
     },
-    byline: {
-        stylePreset: 'inkSubtle',
-        typographyPreset: 'utilityMeta020',
-        spaceStack: 'space020',
-        link: {
-            stylePreset: 'linkInline',
-            typographyPreset: 'utilityMeta020',
-        },
-        divider: {
-            stylePreset: 'inkNonEssential',
-            spaceInline: 'space020',
-        },
-    },
     button: {
         small: {
             typographyPreset: 'utilityButton010',
-            stylePreset: 'buttonDefault',
+            stylePreset: 'buttonSolidPrimary',
             spaceInset: 'spaceInsetSquish020',
             minWidth: 'sizing090',
             minHeight: 'sizing060',
@@ -152,7 +156,7 @@ export var componentDefaults = {
         },
         medium: {
             typographyPreset: 'utilityButton020',
-            stylePreset: 'buttonDefault',
+            stylePreset: 'buttonSolidPrimary',
             spaceInset: 'spaceInsetSquish030',
             minWidth: 'sizing100',
             minHeight: 'sizing080',
@@ -164,7 +168,7 @@ export var componentDefaults = {
         },
         large: {
             typographyPreset: 'utilityButton030',
-            stylePreset: 'buttonDefault',
+            stylePreset: 'buttonSolidPrimary',
             spaceInset: 'spaceInsetSquish040',
             minWidth: 'sizing110',
             minHeight: 'sizing090',
@@ -175,6 +179,19 @@ export var componentDefaults = {
             },
         },
     },
+    byline: {
+        stylePreset: 'inkSubtle',
+        typographyPreset: 'utilityMeta020',
+        spaceStack: 'space020',
+        link: {
+            stylePreset: 'linkInline',
+            typographyPreset: 'utilityMeta020',
+        },
+        divider: {
+            stylePreset: 'inkNonEssential',
+            spaceInline: 'space020',
+        },
+    },
     caption: {
         typographyPreset: 'editorialCaption010',
         stylePreset: 'inkBase',
@@ -301,11 +318,12 @@ export var componentDefaults = {
         },
     },
     divider: {
-        stylePreset: 'dividerHorizontal',
+        stylePreset: 'divider',
     },
     drawer: {
         overlay: {
             zIndex: 70,
+            transitionPreset: 'fade',
         },
         panel: {
             zIndex: 80,
@@ -319,37 +337,17 @@ export var componentDefaults = {
                 lg: '333px',
                 xl: '354px',
             },
-        },
-        header: {
-            spaceInset: 'spaceInsetSquish040',
-        },
-        content: {
-            spaceInset: 'spaceInset050',
-        },
-        closeButton: {
-            stylePreset: 'iconButtonMinimalSecondary',
-            spaceInset: 'spaceInset020',
-        },
-    },
-    modal: {
-        overlay: {
-            zIndex: 70,
-        },
-        panel: {
-            zIndex: 80,
-            stylePreset: 'modalPanel',
-            topOffset: '20vh',
-            width: {
-                xs: '90vw',
-                sm: '60vw',
-                md: '45vw',
-                lg: '38vw',
-                xl: '31vw',
+            left: {
+                transitionPreset: ['fade', 'slideLeft'],
             },
-            minHeight: '15vh',
-            maxHeight: {
-                xs: '95vh',
-                md: '80vh',
+            right: {
+                transitionPreset: ['fade', 'slideRight'],
+            },
+            top: {
+                transitionPreset: ['fade', 'slideTop'],
+            },
+            bottom: {
+                transitionPreset: ['fade', 'slideBottom'],
             },
         },
         header: {
@@ -366,7 +364,7 @@ export var componentDefaults = {
     flag: {
         small: {
             typographyPreset: 'utilityLabel010',
-            stylePreset: 'flagDefault',
+            stylePreset: 'flagSolidPrimary',
             spaceInset: 'spaceInsetSquish010',
             minHeight: 'sizing050',
             iconSize: 'iconSize010',
@@ -374,7 +372,7 @@ export var componentDefaults = {
         },
         medium: {
             typographyPreset: 'utilityLabel020',
-            stylePreset: 'flagDefault',
+            stylePreset: 'flagSolidPrimary',
             spaceInset: 'spaceInsetSquish020',
             minHeight: 'sizing060',
             iconSize: 'iconSize010',
@@ -382,7 +380,7 @@ export var componentDefaults = {
         },
         large: {
             typographyPreset: 'utilityLabel030',
-            stylePreset: 'flagDefault',
+            stylePreset: 'flagSolidPrimary',
             spaceInset: 'spaceInsetSquish020',
             minHeight: 'sizing070',
             iconSize: 'iconSize010',
@@ -473,7 +471,7 @@ export var componentDefaults = {
     },
     iconButton: {
         small: {
-            stylePreset: 'iconButtonDefault',
+            stylePreset: 'iconButtonSolidPrimary',
             spaceInset: 'spaceInset020',
             width: 'sizing060',
             height: 'sizing060',
@@ -482,7 +480,7 @@ export var componentDefaults = {
             },
         },
         medium: {
-            stylePreset: 'iconButtonDefault',
+            stylePreset: 'iconButtonSolidPrimary',
             spaceInset: 'spaceInset030',
             width: 'sizing080',
             height: 'sizing080',
@@ -491,7 +489,7 @@ export var componentDefaults = {
             },
         },
         large: {
-            stylePreset: 'iconButtonDefault',
+            stylePreset: 'iconButtonSolidPrimary',
             spaceInset: 'spaceInset040',
             width: 'sizing090',
             height: 'sizing090',
@@ -505,24 +503,56 @@ export var componentDefaults = {
     },
     image: {
         stylePreset: 'imageSharp',
-        caption: {
-            typographyPreset: 'editorialCaption010',
-            stylePreset: 'inkBase',
-            spaceStack: 'space040',
-            spaceInset: {
-                xs: 'spaceInset040',
-                md: 'spaceInset050',
-            },
-            credit: {
-                typographyPreset: 'utilityMeta010',
-                stylePreset: 'uppercaseInkSubtle',
-            },
-        },
     },
     indeterminateProgressIndicator: {
         stylePreset: 'iconDefault',
         size: 'iconSize020',
     },
+    inlineDrawer: {
+        __extends: '{{componentDefaults.drawer}}',
+        panel: {
+            __extends: '{{componentDefaults.drawer.panel}}',
+            maxSize: 'auto',
+        },
+    },
+    inlineMessage: {
+        stylePreset: 'inlineMessageInformative',
+        spaceInset: 'spaceInset030',
+        icon: {
+            spaceInline: 'space030',
+        },
+        content: {
+            title: {
+                spaceStack: 'space030',
+                stylePreset: 'inkContrast',
+                typographyPreset: 'utilityHeading010',
+            },
+            message: {
+                stylePreset: 'inkBase',
+                typographyPreset: 'utilityBody020',
+            },
+        },
+    },
+    label: {
+        small: {
+            stylePreset: 'label',
+            typographyPreset: 'utilityLabel010',
+            spaceStack: 'space040',
+            spaceInline: 'space010',
+        },
+        medium: {
+            stylePreset: 'label',
+            typographyPreset: 'utilityLabel020',
+            spaceStack: 'space040',
+            spaceInline: 'space010',
+        },
+        large: {
+            stylePreset: 'label',
+            typographyPreset: 'utilityLabel030',
+            spaceStack: 'space040',
+            spaceInline: 'space010',
+        },
+    },
     link: {
         stylePreset: 'linkInline',
         spaceInline: 'space010',
@@ -537,6 +567,14 @@ export var componentDefaults = {
     menu: {
         spaceInline: 'space020',
     },
+    menuGroup: {
+        spaceInline: 'space050',
+        title: {
+            typographyPreset: 'utilityHeading030',
+            stylePreset: 'inkSubtle',
+            spaceInline: 'space050',
+        },
+    },
     menuItem: {
         horizontal: {
             minHeight: 'sizing080',
@@ -551,12 +589,39 @@ export var componentDefaults = {
             spaceInset: 'spaceInsetSquish030',
         },
     },
-    menuGroup: {
-        spaceInline: 'space050',
-        title: {
-            typographyPreset: 'utilityHeading030',
-            stylePreset: 'inkSubtle',
-            spaceInline: 'space050',
+    modal: {
+        overlay: {
+            zIndex: 70,
+            transitionPreset: 'fade',
+        },
+        panel: {
+            zIndex: 80,
+            stylePreset: 'modalPanel',
+            // transitionPreset: ['fade', 'moveUp', 'grow'], // uncomment this line when working on PPDSC-1809
+            transitionPreset: ['fade'],
+            topOffset: '20vh',
+            width: {
+                xs: '90vw',
+                sm: '60vw',
+                md: '45vw',
+                lg: '38vw',
+                xl: '31vw',
+            },
+            minHeight: '15vh',
+            maxHeight: {
+                xs: '95vh',
+                md: '80vh',
+            },
+        },
+        header: {
+            spaceInset: 'spaceInsetSquish040',
+        },
+        content: {
+            spaceInset: 'spaceInset050',
+        },
+        closeButton: {
+            stylePreset: 'iconButtonMinimalSecondary',
+            spaceInset: 'spaceInset020',
         },
     },
     orderedList: {
@@ -573,6 +638,7 @@ export var componentDefaults = {
     },
     overlay: {
         stylePreset: 'overlay',
+        transitionPreset: 'fade',
     },
     paragraph: {
         stylePreset: 'inkBase',
@@ -657,6 +723,11 @@ export var componentDefaults = {
             },
         },
     },
+    structuredList: {
+        divider: {
+            stylePreset: 'divider',
+        },
+    },
     structuredListItem: {
         stylePreset: 'structuredListItem',
         spaceInset: 'spaceInsetStretch040',
@@ -666,11 +737,6 @@ export var componentDefaults = {
             stylePreset: 'inkContrast',
         },
     },
-    structuredList: {
-        divider: {
-            stylePreset: 'dividerHorizontal',
-        },
-    },
     tab: {
         small: {
             stylePreset: 'tab',
@@ -708,50 +774,39 @@ export var componentDefaults = {
                 stylePreset: 'tabsBarIndicator',
                 weight: 'borderWidth020',
                 motionDuration: 'motionDuration030',
-                motionTiming: 'motionEaseInAndOut',
+                motionTiming: 'motionTimingEaseInAndOut',
             },
         },
     },
-    assistiveText: {
-        small: {
-            stylePreset: 'assistiveText',
-            typographyPreset: 'utilityLabel020',
-            minHeight: 'sizing030',
-        },
-        medium: {
-            stylePreset: 'assistiveText',
-            typographyPreset: 'utilityLabel020',
-            minHeight: 'sizing030',
-        },
-        large: {
-            stylePreset: 'assistiveText',
-            typographyPreset: 'utilityLabel030',
-            minHeight: 'sizing030',
-        },
-    },
-    label: {
+    tag: {
         small: {
-            stylePreset: 'label',
-            typographyPreset: 'utilityLabel030',
-            spaceStack: 'space040',
+            typographyPreset: 'utilityButton010',
+            stylePreset: 'tagPrimary',
+            spaceInset: 'spaceInsetSquish010',
+            minHeight: 'sizing050',
+            iconSize: 'iconSize010',
             spaceInline: 'space010',
         },
         medium: {
-            stylePreset: 'label',
-            typographyPreset: 'utilityLabel030',
-            spaceStack: 'space040',
+            typographyPreset: 'utilityButton020',
+            stylePreset: 'tagPrimary',
+            spaceInset: 'spaceInsetSquish020',
+            minHeight: 'sizing060',
+            iconSize: 'iconSize010',
             spaceInline: 'space010',
         },
         large: {
-            stylePreset: 'label',
-            typographyPreset: 'utilityLabel030',
-            spaceStack: 'space040',
+            typographyPreset: 'utilityButton030',
+            stylePreset: 'tagPrimary',
+            spaceInset: 'spaceInsetSquish020',
+            minHeight: 'sizing070',
+            iconSize: 'iconSize020',
             spaceInline: 'space010',
         },
     },
     textField: {
         small: {
-            stylePreset: 'textField',
+            stylePreset: 'inputField',
             spaceInset: 'spaceInset020',
             minHeight: 'sizing060',
             typographyPreset: 'utilityBody020',
@@ -766,7 +821,7 @@ export var componentDefaults = {
             },
         },
         medium: {
-            stylePreset: 'textField',
+            stylePreset: 'inputField',
             spaceInset: 'spaceInset030',
             minHeight: 'sizing080',
             typographyPreset: 'utilityBody020',
@@ -781,7 +836,7 @@ export var componentDefaults = {
             },
         },
         large: {
-            stylePreset: 'textField',
+            stylePreset: 'inputField',
             spaceInset: 'spaceInset030',
             minHeight: 'sizing090',
             typographyPreset: 'utilityBody030',
@@ -885,32 +940,6 @@ export var componentDefaults = {
             },
         },
     },
-    tag: {
-        small: {
-            typographyPreset: 'utilityLabel010',
-            stylePreset: 'tagDefault',
-            spaceInset: 'spaceInsetSquish010',
-            minHeight: 'sizing050',
-            iconSize: 'iconSize010',
-            spaceInline: 'space010',
-        },
-        medium: {
-            typographyPreset: 'utilityLabel020',
-            stylePreset: 'tagDefault',
-            spaceInset: 'spaceInsetSquish020',
-            minHeight: 'sizing060',
-            iconSize: 'iconSize010',
-            spaceInline: 'space010',
-        },
-        large: {
-            typographyPreset: 'utilityLabel030',
-            stylePreset: 'tagDefault',
-            spaceInset: 'spaceInsetSquish020',
-            minHeight: 'sizing070',
-            iconSize: 'iconSize020',
-            spaceInline: 'space010',
-        },
-    },
     titleBar: {
         stylePreset: 'titleBar',
         spaceInset: {
@@ -938,7 +967,7 @@ export var componentDefaults = {
         content: {
             message: {
                 stylePreset: 'inkInverse',
-                typographyPreset: 'utilityBody010',
+                typographyPreset: 'utilityBody020',
             },
             title: {
                 stylePreset: 'inkInverse',
@@ -956,24 +985,6 @@ export var componentDefaults = {
             spaceInline: 'space030',
         },
     },
-    inlineMessage: {
-        stylePreset: 'inlineMessageInformative',
-        spaceInset: 'spaceInset030',
-        icon: {
-            spaceInline: 'space030',
-        },
-        content: {
-            title: {
-                spaceStack: 'space030',
-                stylePreset: 'inkContrast',
-                typographyPreset: 'utilityHeading010',
-            },
-            message: {
-                stylePreset: 'inkBase',
-                typographyPreset: 'utilityBody010',
-            },
-        },
-    },
     unorderedList: {
         spaceStack: 'space040',
         content: {
@@ -999,10 +1010,57 @@ export var componentDefaults = {
             },
         },
         button: {
-            stylePreset: 'volumeControlButtons',
+            stylePreset: 'iconButtonMinimalPrimary',
             iconSize: 'iconSize020',
             size: 'small',
         },
     },
+    checkbox: {
+        small: {
+            input: {
+                size: 'sizing050',
+                stylePreset: 'checkboxInput',
+                spaceInline: 'space030',
+            },
+            feedback: {
+                size: 'sizing070',
+                stylePreset: 'checkboxFeedback',
+            },
+            label: {
+                stylePreset: 'controlLabel',
+                typographyPreset: 'utilityBody020',
+            },
+        },
+        medium: {
+            input: {
+                size: 'sizing060',
+                stylePreset: 'checkboxInput',
+                spaceInline: 'space030',
+            },
+            feedback: {
+                size: 'sizing080',
+                stylePreset: 'checkboxFeedback',
+            },
+            label: {
+                stylePreset: 'controlLabel',
+                typographyPreset: 'utilityBody020',
+            },
+        },
+        large: {
+            input: {
+                size: 'sizing070',
+                stylePreset: 'checkboxInput',
+                spaceInline: 'space040',
+            },
+            feedback: {
+                size: 'sizing090',
+                stylePreset: 'checkboxFeedback',
+            },
+            label: {
+                stylePreset: 'controlLabel',
+                typographyPreset: 'utilityBody030',
+            },
+        },
+    },
 };
 //# sourceMappingURL=component-defaults.js.map