@box/blueprint-web 16.20.6 → 16.20.7

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.
@@ -1,3 +1,8 @@
1
+ /**
2
+ * Copied from https://github.com/box/box-ui-elements/blob/c7e1560c69bfe770945e30f359a42e9206f34a10/src/utils/createTheme.js
3
+ *
4
+ * TODO: Replace with Blueprint tokens
5
+ */
1
6
  export declare const THEME_VERY_DARK = "vDark";
2
7
  export declare const THEME_DARK = "dark";
3
8
  export declare const THEME_MID_DARK = "midDark";
@@ -4,9 +4,11 @@ import { mapValues } from '../../utils/mapValues.js';
4
4
  import theme from './theme.js';
5
5
  import { white, black, bdlGray65, bdlGray80, bdlGray, bdlGray10, bdlGray50 } from './variables.js';
6
6
 
7
- // This is a CUSTOM BLUEPRINT copy of https://github.com/box/box-ui-elements/blob/master/src/utils/createTheme.js
8
- // Copied on Mar 5 2023
9
- // Latest commit c7e1560 on Mar 20, 2020
7
+ /**
8
+ * Copied from https://github.com/box/box-ui-elements/blob/c7e1560c69bfe770945e30f359a42e9206f34a10/src/utils/createTheme.js
9
+ *
10
+ * TODO: Replace with Blueprint tokens
11
+ */
10
12
  /* ----------------- Theme ---------------------------*/
11
13
  const THEME_VERY_DARK = 'vDark';
12
14
  const THEME_DARK = 'dark';
@@ -107,7 +109,6 @@ function createTheme(colorKey) {
107
109
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
108
110
  const modifiedColors = {};
109
111
  for (const [key, value] of Object.entries(colorRangeConfig.modifiers)) {
110
- // $FlowFixMe
111
112
  modifiedColors[key] = adjustLightness(colorKeyObj, value);
112
113
  }
113
114
  // If the color is too extreme on either end of the spectrum we need to change our rules.
@@ -148,11 +149,11 @@ function createTheme(colorKey) {
148
149
  buttonBorder: exceedsLightThreshold ? bdlGray : colorKeyHex,
149
150
  buttonBorderHover: exceedsLightThreshold ? bdlGray80 : hoverHex,
150
151
  buttonBorderActive: exceedsLightThreshold ? bdlGray65 : activeHex,
151
- // ProgressBar overrides - CUSTOM BLUEPRINT value
152
+ // ProgressBar overrides
152
153
  progressBarBackground: null,
153
154
  // Scroll effect overrides for scrollable themed elements
154
155
  scrollShadowRgba,
155
- // Divider - CUSTOM BLUEPRINT value
156
+ // Divider overrides
156
157
  dividerBackground: exceedsLightThreshold ? 'rgba(0, 0, 0, 0.1)' : 'rgba(232, 232, 232, 0.1)'
157
158
  };
158
159
  const isDefaultTheme = colorKeyHex === Color(theme.primary.background).hex();
@@ -1,3 +1,8 @@
1
+ /**
2
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
3
+ *
4
+ * TODO: Replace with Blueprint tokens
5
+ */
1
6
  declare const theme: {
2
7
  base: {
3
8
  background: string;
@@ -1,6 +1,10 @@
1
1
  import { bdlBoxBlue, bdlBoxBlue80, white, bdlGray40, bdlGray30, bdlGray10, bdlGray05, black, bdlGray, bdlGridUnitPx } from './variables.js';
2
2
 
3
- // Copy of https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
3
+ /**
4
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
5
+ *
6
+ * TODO: Replace with Blueprint tokens
7
+ */
4
8
  const theme = {
5
9
  base: {
6
10
  background: white,
@@ -1,6 +1,10 @@
1
+ /**
2
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/variables.ts
3
+ *
4
+ * TODO: Replace with Blueprint tokens
5
+ */
1
6
  export declare const white = "#fff";
2
7
  export declare const black = "#000";
3
- export declare const countBadgeBackground = "#e9163c";
4
8
  export declare const bdlBoxBlue = "#0061d5";
5
9
  export declare const bdlBoxBlue80 = "#3381dd";
6
10
  export declare const bdlBoxBlue50 = "#7fb0ea";
@@ -75,43 +79,5 @@ export declare const bdlWatermelonRed20 = "#fbd7dd";
75
79
  export declare const bdlWatermelonRed10 = "#fdebee";
76
80
  export declare const bdlWatermelonRed05 = "#fef5f6";
77
81
  export declare const bdlWatermelonRed02 = "#fffbfc";
78
- export declare const bdlLineHeight = "20px";
79
- export declare const bdlFontSize = "13px";
80
- export declare const bdlFontSizeMinimum = "11px";
81
- export declare const bdlFontSizeDejaBlue = "14px";
82
- export declare const avatarColors: string[];
83
- export declare const modalDialogZIndex = "160";
84
- export declare const menuZIndex = "170";
85
- export declare const submenuZIndex = "171";
86
- export declare const overlayZIndex = "190";
87
- export declare const tooltipZIndex = "190";
88
- export declare const notificationsWrapperZIndex = "200";
89
- export declare const bdlBorderRadiusSize = "4px";
90
- export declare const bdlBorderRadiusSizeMed = "6px";
91
- export declare const bdlBorderRadiusSizeLarge = "8px";
92
- export declare const bdlBorderRadiusSizeXlarge = "12px";
93
- export declare const bdlHeaderBoxShadow: string[];
94
82
  export declare const bdlGridUnit = "4px";
95
83
  export declare const bdlGridUnitPx = "4";
96
- export declare const bdlHeaderHeight = "64px";
97
- export declare const bdlBtnBorderWidth = "1px";
98
- export declare const bdlBtnHeight = "32px";
99
- export declare const bdlBtnHeightLarge = "40px";
100
- export declare const bdlBtnIconSize = "20px";
101
- export declare const bdlBtnTextIconSize = "16px";
102
- export declare const bdlBtnPaddingHorizontal = "16px";
103
- export declare const bdlTransitionDurationBase = "0.15s";
104
- export declare const bdlTimingFunction: string[];
105
- export declare const sizeSmallMediumMin = "375px";
106
- export declare const sizeMediumMin = "461px";
107
- export declare const sizeLargeMin = "768px";
108
- export declare const sizeSmallMax = "374px";
109
- export declare const sizeSmallMediumMax = "460px";
110
- export declare const sizeMediumMax = "767px";
111
- export declare const sizeLargeMax = "1023px";
112
- export declare const sizeXlargeMax = "1219px";
113
- export declare const smallScreen = "(max-width: 374px)";
114
- export declare const smallMediumScreen = "(max-width: 460px)";
115
- export declare const mediumScreen = "(max-width: 767px)";
116
- export declare const largeScreen = "(max-width: 1023px)";
117
- export declare const xlargeScreen = "(max-width: 1219px)";
@@ -1,5 +1,8 @@
1
- // Copy of https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/variables.ts
2
- /* File auto-generated */
1
+ /**
2
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/variables.ts
3
+ *
4
+ * TODO: Replace with Blueprint tokens
5
+ */
3
6
  const white = '#fff'; // white
4
7
  const black = '#000'; // black
5
8
  const bdlBoxBlue = '#0061d5'; // bdl-box-blue
@@ -13,6 +16,5 @@ const bdlGray30 = '#bcbcbc'; // bdl-gray-30
13
16
  const bdlGray10 = '#e8e8e8'; // bdl-gray-10
14
17
  const bdlGray05 = '#f4f4f4'; // bdl-gray-05
15
18
  const bdlGridUnitPx = '4'; // bdl-grid-unit-px
16
- // xlarge-screen
17
19
 
18
20
  export { bdlBoxBlue, bdlBoxBlue80, bdlGray, bdlGray05, bdlGray10, bdlGray30, bdlGray40, bdlGray50, bdlGray65, bdlGray80, bdlGridUnitPx, black, white };