@kepler.gl/styles 3.0.0-alpha.0 → 3.0.0-alpha.2

package/dist/base.d.ts

@@ -92,6 +92,8 @@ export declare const selectionBtnBgdHover = "#0F9668";
 export declare const selectionBtnBorder = "1";
 export declare const selectionBtnBorderColor = "#D3D8E0";
 export declare const selectionBtnBorderActColor = "#0F9668";
+export declare const scrollbarThumbColorLT = "#6A7485";
+export declare const scrollbarThumbColorHoverLT = "#000000";
 export declare const inputBoxHeight = "34px";
 export declare const inputBoxHeightSmall = "24px";
 export declare const inputBoxHeightTiny = "18px";
@@ -156,6 +158,7 @@ export declare const dropdownListBorderTopLT = "#D3D8E0";
 export declare const dropdownListLineHeight = 20;
 export declare const dropdownWrapperZ = 100;
 export declare const dropdownWapperMargin = 4;
+export declare const dndOverBackgroundColor = "rgba(128, 128, 128, 0.2)";
 export declare const switchWidth = 24;
 export declare const switchHeight = 12;
 export declare const switchLabelMargin = 12;
@@ -220,7 +223,9 @@ export declare const panelBorderLT: string;
 export declare const mapPanelBackgroundColor = "#242730";
 export declare const mapPanelHeaderBackgroundColor = "#29323C";
 export declare const tooltipBg = "#3A414C";
+export declare const tooltipBgLT = "#1869B5";
 export declare const tooltipColor = "#F0F0F0";
+export declare const tooltipColorLT = "#FFFFFF";
 export declare const tooltipBoxShadow = "0 1px 2px 0 rgba(0,0,0,0.10)";
 export declare const tooltipFontSize = "10px";
 export declare const layerTypeIconSizeL = 50;
@@ -282,6 +287,7 @@ export declare const geocoderWidth = 360;
 export declare const geocoderTop = 20;
 export declare const geocoderRight = 12;
 export declare const geocoderInputHeight = 36;
+export declare const mapControlTop = 52;
 export declare const rangeBrushBgd = "#3A414C";
 export declare const histogramFillInRange = "#1FBAD6";
 export declare const histogramFillOutRange = "#6A7485";
@@ -318,6 +324,8 @@ export declare const notificationPanelItemHeight = 60;
 export declare const actionPanelWidth = 110;
 export declare const actionPanelHeight = 32;
 export declare const fieldTokenRightMargin = 4;
+export declare const fieldTokenHeight = 20;
+export declare const fieldTokenWidth = 40;
 export declare const textTruncate: {
     maxWidth: string;
     overflow: string;
@@ -340,6 +348,27 @@ export declare const breakPoints: {
     palm: number;
     desk: number;
 };
+export declare const effectConfiguratorMargin = "18px 0 18px 0";
+export declare const effectConfiguratorPadding = "0 0 0 18px";
+export declare const effectPanelWidth = 345;
+export declare const effectPanelHeight = 180;
+export declare const effectPanelPaddingSide = 16;
+export declare const effectPanelPaddingTop = 16;
+export declare const effectPanelAddEffectFontFamily = "ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif";
+export declare const effectTypeIconMarginSide = 6;
+export declare const effectTypeIconSizeL = 56;
+export declare const effectTypeIconBgHoverColor = "#262D40";
+export declare const effectPanelTextMain = "#F7F7F7";
+export declare const effectPanelTextSecondary1 = "#A0A7B4";
+export declare const effectPanelTextSecondary2 = "#6A7485";
+export declare const effectPanelTextSecondary3 = "#5A6475";
+export declare const effectPanelElementColor = "#29323C";
+export declare const effectPanelElementColorActive = "#323843";
+export declare const effectPanelElementColorHovered = "#3A414C";
+export declare const effectPanelElementColorSelected = "#454e5d";
+export declare const effectPanelElementColorSun = "#F7B26B";
+export declare const rightPanelMarginTop = 12;
+export declare const rightPanelMarginRight = 12;
 export declare const modalScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
 export declare const theme: {
     input: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<InputProps, any>>;
@@ -365,6 +394,7 @@ export declare const theme: {
     dropdownListShadow: string;
     dropdownWrapperZ: number;
     dropdownWapperMargin: number;
+    dndOverBackgroundColor: string;
     modalScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     scrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     sidePanelScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
@@ -527,6 +557,8 @@ export declare const theme: {
     selectionBtnBorder: string;
     selectionBtnBorderColor: string;
     selectionBtnBorderActColor: string;
+    scrollbarThumbColorLT: string;
+    scrollbarThumbColorHoverLT: string;
     modalTitleColor: string;
     modalTitleFontSize: string;
     modalTitleFontSizeSmaller: string;
@@ -608,7 +640,9 @@ export declare const theme: {
     };
     titleColorLT: string;
     tooltipBg: string;
+    tooltipBgLT: string;
     tooltipColor: string;
+    tooltipColorLT: string;
     tooltipBoxShadow: string;
     tooltipFontSize: string;
     logoColor: string;
@@ -647,6 +681,7 @@ export declare const theme: {
     geocoderTop: number;
     geocoderRight: number;
     geocoderInputHeight: number;
+    mapControlTop: number;
     rangeBrushBgd: string;
     histogramFillInRange: string;
     histogramFillOutRange: string;
@@ -681,6 +716,8 @@ export declare const theme: {
     notificationPanelItemWidth: number;
     notificationPanelItemHeight: number;
     headerRowHeight: number;
+    headerRowWStatsHeight: number;
+    headerStatsControlHeight: number;
     rowHeight: number;
     headerPaddingTop: number;
     headerPaddingBottom: number;
@@ -691,6 +728,8 @@ export declare const theme: {
     optionButtonColor: string;
     headerCellBackground: string;
     headerCellBorderColor: string;
+    headerCellStatsBackground: string;
+    headerCellStatsControlBackground: string;
     headerCellIconColor: string;
     cellBorderColor: string;
     evenRowBackground: string;
@@ -721,6 +760,29 @@ export declare const theme: {
     layerConfiguratorMargin: string;
     layerConfiguratorPadding: string;
     fieldTokenRightMargin: number;
+    fieldTokenHeight: number;
+    fieldTokenWidth: number;
+    effectPanelWidth: number;
+    effectPanelHeight: number;
+    effectPanelPaddingSide: number;
+    effectPanelPaddingTop: number;
+    rightPanelMarginTop: number;
+    rightPanelMarginRight: number;
+    effectPanelAddEffectFontFamily: string;
+    effectTypeIconMarginSide: number;
+    effectTypeIconSizeL: number;
+    effectTypeIconBgHoverColor: string;
+    effectConfiguratorMargin: string;
+    effectConfiguratorPadding: string;
+    effectPanelTextMain: string;
+    effectPanelTextSecondary1: string;
+    effectPanelTextSecondary2: string;
+    effectPanelTextSecondary3: string;
+    effectPanelElementColor: string;
+    effectPanelElementColorActive: string;
+    effectPanelElementColorHovered: string;
+    effectPanelElementColorSun: string;
+    effectPanelElementColorSelected: string;
     sidePanel: {
         width: number;
         margin: {
@@ -832,6 +894,7 @@ export declare const themeLT: {
     dropdownListShadow: string;
     dropdownWrapperZ: number;
     dropdownWapperMargin: number;
+    dndOverBackgroundColor: string;
     modalScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     scrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     sidePanelScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
@@ -958,6 +1021,8 @@ export declare const themeLT: {
     selectionBtnBorder: string;
     selectionBtnBorderColor: string;
     selectionBtnBorderActColor: string;
+    scrollbarThumbColorLT: string;
+    scrollbarThumbColorHoverLT: string;
     modalTitleColor: string;
     modalTitleFontSize: string;
     modalTitleFontSizeSmaller: string;
@@ -1021,6 +1086,8 @@ export declare const themeLT: {
         wordWrap: string;
     };
     titleColorLT: string;
+    tooltipBgLT: string;
+    tooltipColorLT: string;
     tooltipBoxShadow: string;
     tooltipFontSize: string;
     logoColor: string;
@@ -1052,6 +1119,7 @@ export declare const themeLT: {
     geocoderTop: number;
     geocoderRight: number;
     geocoderInputHeight: number;
+    mapControlTop: number;
     axisFontSize: string;
     timeTitleFontSize: string;
     rangePlotMargin: {
@@ -1082,6 +1150,8 @@ export declare const themeLT: {
     notificationPanelItemWidth: number;
     notificationPanelItemHeight: number;
     headerRowHeight: number;
+    headerRowWStatsHeight: number;
+    headerStatsControlHeight: number;
     rowHeight: number;
     headerPaddingTop: number;
     headerPaddingBottom: number;
@@ -1092,6 +1162,8 @@ export declare const themeLT: {
     optionButtonColor: string;
     headerCellBackground: string;
     headerCellBorderColor: string;
+    headerCellStatsBackground: string;
+    headerCellStatsControlBackground: string;
     headerCellIconColor: string;
     cellBorderColor: string;
     evenRowBackground: string;
@@ -1122,6 +1194,29 @@ export declare const themeLT: {
     layerConfiguratorMargin: string;
     layerConfiguratorPadding: string;
     fieldTokenRightMargin: number;
+    fieldTokenHeight: number;
+    fieldTokenWidth: number;
+    effectPanelWidth: number;
+    effectPanelHeight: number;
+    effectPanelPaddingSide: number;
+    effectPanelPaddingTop: number;
+    rightPanelMarginTop: number;
+    rightPanelMarginRight: number;
+    effectPanelAddEffectFontFamily: string;
+    effectTypeIconMarginSide: number;
+    effectTypeIconSizeL: number;
+    effectTypeIconBgHoverColor: string;
+    effectConfiguratorMargin: string;
+    effectConfiguratorPadding: string;
+    effectPanelTextMain: string;
+    effectPanelTextSecondary1: string;
+    effectPanelTextSecondary2: string;
+    effectPanelTextSecondary3: string;
+    effectPanelElementColor: string;
+    effectPanelElementColorActive: string;
+    effectPanelElementColorHovered: string;
+    effectPanelElementColorSun: string;
+    effectPanelElementColorSelected: string;
     sidePanel: {
         width: number;
         margin: {
@@ -1236,6 +1331,7 @@ export declare const themeBS: {
     dropdownListShadow: string;
     dropdownWrapperZ: number;
     dropdownWapperMargin: number;
+    dndOverBackgroundColor: string;
     modalScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     scrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
     sidePanelScrollBar: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
@@ -1359,6 +1455,8 @@ export declare const themeBS: {
     selectionBtnBorder: string;
     selectionBtnBorderColor: string;
     selectionBtnBorderActColor: string;
+    scrollbarThumbColorLT: string;
+    scrollbarThumbColorHoverLT: string;
     modalTitleColor: string;
     modalTitleFontSize: string;
     modalTitleFontSizeSmaller: string;
@@ -1423,7 +1521,9 @@ export declare const themeBS: {
     };
     titleColorLT: string;
     tooltipBg: string;
+    tooltipBgLT: string;
     tooltipColor: string;
+    tooltipColorLT: string;
     tooltipBoxShadow: string;
     tooltipFontSize: string;
     logoColor: string;
@@ -1456,6 +1556,7 @@ export declare const themeBS: {
     geocoderTop: number;
     geocoderRight: number;
     geocoderInputHeight: number;
+    mapControlTop: number;
     axisFontSize: string;
     axisFontColor: string;
     timeTitleFontSize: string;
@@ -1487,6 +1588,8 @@ export declare const themeBS: {
     notificationPanelItemWidth: number;
     notificationPanelItemHeight: number;
     headerRowHeight: number;
+    headerRowWStatsHeight: number;
+    headerStatsControlHeight: number;
     rowHeight: number;
     headerPaddingTop: number;
     headerPaddingBottom: number;
@@ -1497,6 +1600,8 @@ export declare const themeBS: {
     optionButtonColor: string;
     headerCellBackground: string;
     headerCellBorderColor: string;
+    headerCellStatsBackground: string;
+    headerCellStatsControlBackground: string;
     headerCellIconColor: string;
     cellBorderColor: string;
     evenRowBackground: string;
@@ -1527,6 +1632,29 @@ export declare const themeBS: {
     layerConfiguratorMargin: string;
     layerConfiguratorPadding: string;
     fieldTokenRightMargin: number;
+    fieldTokenHeight: number;
+    fieldTokenWidth: number;
+    effectPanelWidth: number;
+    effectPanelHeight: number;
+    effectPanelPaddingSide: number;
+    effectPanelPaddingTop: number;
+    rightPanelMarginTop: number;
+    rightPanelMarginRight: number;
+    effectPanelAddEffectFontFamily: string;
+    effectTypeIconMarginSide: number;
+    effectTypeIconSizeL: number;
+    effectTypeIconBgHoverColor: string;
+    effectConfiguratorMargin: string;
+    effectConfiguratorPadding: string;
+    effectPanelTextMain: string;
+    effectPanelTextSecondary1: string;
+    effectPanelTextSecondary2: string;
+    effectPanelTextSecondary3: string;
+    effectPanelElementColor: string;
+    effectPanelElementColorActive: string;
+    effectPanelElementColorHovered: string;
+    effectPanelElementColorSun: string;
+    effectPanelElementColorSelected: string;
     sidePanel: {
         width: number;
         margin: {