diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72c79fbca4..8c3e2913fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,20 +9,26 @@
### 🛡 Security
### 📈 Features/Enhancements
+
- Rename the aliased theme files ([#863](https://github.com/opensearch-project/oui/pull/863))
- Fix `autofill` text color in dark themes ([#871](https://github.com/opensearch-project/oui/pull/871))
- [Header] Update background color in next theme ([#936](https://github.com/opensearch-project/oui/pull/936))
- Set link to use semi bold font weight ([#961](https://github.com/opensearch-project/oui/pull/961))
- Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973))
- Adds `SchemaItem` as an experimental component ([#974](https://github.com/opensearch-project/oui/pull/974))
-- Make `CollapsibleNavGroup` background colors theme-able ([#968](https://github.com/opensearch-project/oui/pull/968))
+- Make `CollapsibleNav` and `CollapsibleNavGroup` background colors theme-able ([#968](https://github.com/opensearch-project/oui/pull/968), [#1016](https://github.com/opensearch-project/oui/pull/1016))
- Update next light theme primary color to #07827E ([#981](https://github.com/opensearch-project/oui/pull/981))
- Add dismissible prop to OuiCallOut ([#985](https://github.com/opensearch-project/oui/pull/985))
+- Adjust $ouiFormInputGroupLabelBackground color in dark `next` theme ([#1005](https://github.com/opensearch-project/oui/pull/1005))
+- Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004))
+- Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856))
+- Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014))
### 🐛 Bug Fixes
- Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959))
- Remove `calc` usage from SchemaItem styles ([#990](https://github.com/opensearch-project/oui/pull/990))
+- Add support for null types when deriving JSON from Sass variables ([#1019](https://github.com/opensearch-project/oui/pull/1019))
### 🚞 Infrastructure
@@ -33,6 +39,7 @@
### 📝 Documentation
+- Replace Avatar in favor of Icon in OuiFacetButtons example ([#987](https://github.com/opensearch-project/oui/pull/987))
- Add dark prop toggles ([#910](https://github.com/opensearch-project/oui/pull/910))
- Remove language from the form validation documentation that doesn't align with the updated guidelines ([#986](https://github.com/opensearch-project/oui/pull/986))
diff --git a/scripts/derive-sass-variable-types.js b/scripts/derive-sass-variable-types.js
index 266507bfff..90fb71466a 100644
--- a/scripts/derive-sass-variable-types.js
+++ b/scripts/derive-sass-variable-types.js
@@ -61,6 +61,10 @@ async function deriveSassVariableTypes(
function deriveValueType(extractedValue) {
switch (typeof extractedValue) {
case 'object':
+ if (extractedValue === null) {
+ return ts.createKeywordTypeNode(ts.SyntaxKind.NullKeyword);
+ }
+
return ts.createTypeLiteralNode(
Object.keys(extractedValue).map(key =>
ts.createPropertySignature(
diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js
index 2afe71e4df..1cae19f035 100644
--- a/src-docs/src/views/call_out/info.js
+++ b/src-docs/src/views/call_out/info.js
@@ -26,7 +26,7 @@ export default () => {
title="Callouts can be dismissed when dismissible is set to true unless the color is danger or warning. "
iconType="wrench"
dismissible
- onDismissible={closeCallOut}
+ onDismiss={closeCallOut}
/>
);
}
diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js
index 49d07adf7a..cdbf847cfc 100644
--- a/src-docs/src/views/color_palette/color_palette.js
+++ b/src-docs/src/views/color_palette/color_palette.js
@@ -37,6 +37,16 @@ const customPalettes = [
palette: ouiPaletteColorBlind({ rotations: 2 }),
code: 'ouiPaletteColorBlind({rotations: 2})',
},
+ {
+ title: 'Lots of colors, with the extremes last',
+ palette: ouiPaletteColorBlind({
+ rotations: 9,
+ direction: 'both',
+ order: 'middle-out',
+ }),
+ code:
+ "ouiPaletteColorBlind({ rotations: 9, direction: 'both', order: 'middle-out' })",
+ },
{
title:
'Series may have multiple metrics and so the colors must coordinate but be distinguishable',
diff --git a/src-docs/src/views/color_palette/props_info.js b/src-docs/src/views/color_palette/props_info.js
index 456aa26415..fabd10908b 100644
--- a/src-docs/src/views/color_palette/props_info.js
+++ b/src-docs/src/views/color_palette/props_info.js
@@ -21,9 +21,9 @@ export const qualitativePropsInfo = {
},
order: {
description:
- 'Order similar colors as `group`s or just `append` each variation',
+ 'Order similar colors as `group`s, just `append` each variation (from dark to light), or append from the `middle-out`',
required: false,
- type: { name: "'append' | 'group'" },
+ type: { name: "'append' | 'group' | 'middle-out'" },
defaultValue: { value: "'append'" },
},
direction: {
diff --git a/src-docs/src/views/facet/facet.js b/src-docs/src/views/facet/facet.js
index cb8b37773a..e603007746 100644
--- a/src-docs/src/views/facet/facet.js
+++ b/src-docs/src/views/facet/facet.js
@@ -11,7 +11,7 @@
import React from 'react';
-import { OuiFacetButton, OuiIcon, OuiAvatar } from '../../../../src/components';
+import { OuiFacetButton, OuiIcon } from '../../../../src/components';
export default () => (
@@ -29,10 +29,8 @@ export default () => (
Disabled
-
}>
- Avatar as icon
+
}>
+ Facet with Icon example
diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
index 82c4eadda3..e727245082 100644
--- a/src-docs/src/views/icon/icons.js
+++ b/src-docs/src/views/icon/icons.js
@@ -47,7 +47,10 @@ export const iconTypes = [
'bug',
'bullseye',
'calendar',
+ 'chatLeft',
+ 'chatRight',
'check',
+ 'checkInCircleEmpty',
'checkInCircleFilled',
'cheer',
'clock',
@@ -124,6 +127,10 @@ export const iconTypes = [
'indexSettings',
'inputOutput',
'inspect',
+ 'integrationGeneral',
+ 'integrationObservability',
+ 'integrationSearch',
+ 'integrationSecurity',
'invert',
'ip',
'keyboardShortcut',
@@ -186,6 +193,7 @@ export const iconTypes = [
'questionInCircle',
'quote',
'radius',
+ 'redeploy',
'refresh',
'reporter',
'returnKey',
@@ -226,10 +234,13 @@ export const iconTypes = [
'tag',
'tear',
'temperature',
+ 'thumbsDown',
+ 'thumbsUp',
'timeline',
'timeslider',
'training',
'trash',
+ 'undeploy',
'unfold',
'unlink',
'user',
diff --git a/src/components/call_out/__snapshots__/call_out.test.tsx.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap
index 89a412f4ca..6043f67923 100644
--- a/src/components/call_out/__snapshots__/call_out.test.tsx.snap
+++ b/src/components/call_out/__snapshots__/call_out.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`OuiCallOut props color warning is rendered 1`] = `
exports[`OuiCallOut props dismissible close callout after click 1`] = `
{
});
it('close callout after click', () => {
- const onDismissible = jest.fn();
+ const onDismiss = jest.fn();
const component = mount(
);
expect(component).toMatchSnapshot();
findTestSubject(component, 'closeCallOutButton').simulate('click');
- expect(onDismissible).toBeCalled();
+ expect(onDismiss).toBeCalled();
});
});
});
diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
index 24b796e89d..d91e33a783 100644
--- a/src/components/call_out/call_out.tsx
+++ b/src/components/call_out/call_out.tsx
@@ -50,7 +50,7 @@ export type OuiCallOutProps = CommonProps &
size?: Size;
heading?: Heading;
dismissible?: boolean;
- onDismissible?: (
+ onDismiss?: (
event?:
| React.KeyboardEvent
| React.MouseEvent
@@ -83,7 +83,7 @@ export const OuiCallOut = forwardRef(
className,
heading,
dismissible = false,
- onDismissible = () => {},
+ onDismiss = () => {},
...rest
},
ref: Ref
@@ -114,7 +114,7 @@ export const OuiCallOut = forwardRef(
dismissibleIcon = (
`;
+exports[`OuiIcon props type chatLeft is rendered 1`] = `
+
+
+
+`;
+
+exports[`OuiIcon props type chatRight is rendered 1`] = `
+
+
+
+`;
+
exports[`OuiIcon props type check is rendered 1`] = `
`;
+exports[`OuiIcon props type checkInCircleEmpty is rendered 1`] = `
+
+
+
+
+`;
+
exports[`OuiIcon props type checkInCircleFilled is rendered 1`] = `
`;
+exports[`OuiIcon props type integrationGeneral is rendered 1`] = `
+
+
+
+
+
+`;
+
+exports[`OuiIcon props type integrationObservability is rendered 1`] = `
+
+
+
+
+
+`;
+
+exports[`OuiIcon props type integrationSearch is rendered 1`] = `
+
+
+
+
+`;
+
+exports[`OuiIcon props type integrationSecurity is rendered 1`] = `
+
+
+
+
+`;
+
exports[`OuiIcon props type invert is rendered 1`] = `
`;
+exports[`OuiIcon props type redeploy is rendered 1`] = `
+
+
+
+
+`;
+
exports[`OuiIcon props type refresh is rendered 1`] = `
`;
+exports[`OuiIcon props type thumbsDown is rendered 1`] = `
+
+
+
+`;
+
+exports[`OuiIcon props type thumbsUp is rendered 1`] = `
+
+
+
+`;
+
exports[`OuiIcon props type timeline is rendered 1`] = `
`;
+exports[`OuiIcon props type undeploy is rendered 1`] = `
+
+
+
+
+`;
+
exports[`OuiIcon props type unfold is rendered 1`] = `
(
+
+ {title ? {title} : null}
+
+
+);
+export const icon = OuiIconChatLeft;
diff --git a/src/components/icon/assets/chatLeft.svg b/src/components/icon/assets/chatLeft.svg
new file mode 100644
index 0000000000..8983053681
--- /dev/null
+++ b/src/components/icon/assets/chatLeft.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
diff --git a/src/components/icon/assets/chatRight.js b/src/components/icon/assets/chatRight.js
new file mode 100644
index 0000000000..8d3bd1e420
--- /dev/null
+++ b/src/components/icon/assets/chatRight.js
@@ -0,0 +1,27 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconChatRight = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+);
+export const icon = OuiIconChatRight;
diff --git a/src/components/icon/assets/chatRight.svg b/src/components/icon/assets/chatRight.svg
new file mode 100644
index 0000000000..287e26fe85
--- /dev/null
+++ b/src/components/icon/assets/chatRight.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
diff --git a/src/components/icon/assets/checkInCircleEmpty.js b/src/components/icon/assets/checkInCircleEmpty.js
new file mode 100644
index 0000000000..906f441a1a
--- /dev/null
+++ b/src/components/icon/assets/checkInCircleEmpty.js
@@ -0,0 +1,28 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconCheckInCircleEmpty = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+
+);
+export const icon = OuiIconCheckInCircleEmpty;
diff --git a/src/components/icon/assets/checkInCircleEmpty.svg b/src/components/icon/assets/checkInCircleEmpty.svg
new file mode 100644
index 0000000000..42f5bee8d3
--- /dev/null
+++ b/src/components/icon/assets/checkInCircleEmpty.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/components/icon/assets/integrationGeneral.js b/src/components/icon/assets/integrationGeneral.js
new file mode 100644
index 0000000000..dcb6fb7898
--- /dev/null
+++ b/src/components/icon/assets/integrationGeneral.js
@@ -0,0 +1,33 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconIntegrationGeneral = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+
+
+);
+export const icon = OuiIconIntegrationGeneral;
diff --git a/src/components/icon/assets/integrationGeneral.svg b/src/components/icon/assets/integrationGeneral.svg
new file mode 100644
index 0000000000..6328bfadc8
--- /dev/null
+++ b/src/components/icon/assets/integrationGeneral.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
diff --git a/src/components/icon/assets/integrationObservability.js b/src/components/icon/assets/integrationObservability.js
new file mode 100644
index 0000000000..74d4c54569
--- /dev/null
+++ b/src/components/icon/assets/integrationObservability.js
@@ -0,0 +1,33 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconIntegrationObservability = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+
+
+);
+export const icon = OuiIconIntegrationObservability;
diff --git a/src/components/icon/assets/integrationObservability.svg b/src/components/icon/assets/integrationObservability.svg
new file mode 100644
index 0000000000..f0611e86b2
--- /dev/null
+++ b/src/components/icon/assets/integrationObservability.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
diff --git a/src/components/icon/assets/integrationSearch.js b/src/components/icon/assets/integrationSearch.js
new file mode 100644
index 0000000000..529207ee2f
--- /dev/null
+++ b/src/components/icon/assets/integrationSearch.js
@@ -0,0 +1,24 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconIntegrationSearch = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+
+);
+export const icon = OuiIconIntegrationSearch;
diff --git a/src/components/icon/assets/integrationSearch.svg b/src/components/icon/assets/integrationSearch.svg
new file mode 100644
index 0000000000..4f8d566972
--- /dev/null
+++ b/src/components/icon/assets/integrationSearch.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/components/icon/assets/integrationSecurity.js b/src/components/icon/assets/integrationSecurity.js
new file mode 100644
index 0000000000..51bc31cfe5
--- /dev/null
+++ b/src/components/icon/assets/integrationSecurity.js
@@ -0,0 +1,28 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconIntegrationSecurity = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+
+);
+export const icon = OuiIconIntegrationSecurity;
diff --git a/src/components/icon/assets/integrationSecurity.svg b/src/components/icon/assets/integrationSecurity.svg
new file mode 100644
index 0000000000..44ae9859e1
--- /dev/null
+++ b/src/components/icon/assets/integrationSecurity.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/components/icon/assets/redeploy.js b/src/components/icon/assets/redeploy.js
new file mode 100644
index 0000000000..eba79fe8a8
--- /dev/null
+++ b/src/components/icon/assets/redeploy.js
@@ -0,0 +1,24 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconRedeploy = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+
+);
+export const icon = OuiIconRedeploy;
diff --git a/src/components/icon/assets/redeploy.svg b/src/components/icon/assets/redeploy.svg
new file mode 100644
index 0000000000..38f2b181ea
--- /dev/null
+++ b/src/components/icon/assets/redeploy.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/components/icon/assets/thumbsDown.js b/src/components/icon/assets/thumbsDown.js
new file mode 100644
index 0000000000..c5dfd35775
--- /dev/null
+++ b/src/components/icon/assets/thumbsDown.js
@@ -0,0 +1,27 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconThumbsDown = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+);
+export const icon = OuiIconThumbsDown;
diff --git a/src/components/icon/assets/thumbsDown.svg b/src/components/icon/assets/thumbsDown.svg
new file mode 100644
index 0000000000..d83912c8fd
--- /dev/null
+++ b/src/components/icon/assets/thumbsDown.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/components/icon/assets/thumbsUp.js b/src/components/icon/assets/thumbsUp.js
new file mode 100644
index 0000000000..98f5f02696
--- /dev/null
+++ b/src/components/icon/assets/thumbsUp.js
@@ -0,0 +1,27 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconThumbsUp = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+);
+export const icon = OuiIconThumbsUp;
diff --git a/src/components/icon/assets/thumbsUp.svg b/src/components/icon/assets/thumbsUp.svg
new file mode 100644
index 0000000000..652d3dd7d2
--- /dev/null
+++ b/src/components/icon/assets/thumbsUp.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/components/icon/assets/undeploy.js b/src/components/icon/assets/undeploy.js
new file mode 100644
index 0000000000..7bd6ea00a2
--- /dev/null
+++ b/src/components/icon/assets/undeploy.js
@@ -0,0 +1,28 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import * as React from 'react';
+const OuiIconUndeploy = ({ title, titleId, ...props }) => (
+
+ {title ? {title} : null}
+
+
+
+);
+export const icon = OuiIconUndeploy;
diff --git a/src/components/icon/assets/undeploy.svg b/src/components/icon/assets/undeploy.svg
new file mode 100644
index 0000000000..fc68ab4aa0
--- /dev/null
+++ b/src/components/icon/assets/undeploy.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 9354ddfcb7..e70e51f164 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -80,7 +80,10 @@ const typeToPathMap = {
calendar: 'calendar',
canvasApp: 'app_canvas',
codeApp: 'app_code',
+ chatLeft: 'chatLeft',
+ chatRight: 'chatRight',
check: 'check',
+ checkInCircleEmpty: 'checkInCircleEmpty',
checkInCircleFilled: 'checkInCircleFilled',
cheer: 'cheer',
classificationJob: 'ml_classification_job',
@@ -205,6 +208,10 @@ const typeToPathMap = {
indexSettings: 'index_settings',
inputOutput: 'inputOutput',
inspect: 'inspect',
+ integrationGeneral: 'integrationGeneral',
+ integrationObservability: 'integrationObservability',
+ integrationSearch: 'integrationSearch',
+ integrationSecurity: 'integrationSecurity',
invert: 'invert',
ip: 'ip',
keyboardShortcut: 'keyboard_shortcut',
@@ -337,6 +344,7 @@ const typeToPathMap = {
quote: 'quote',
radius: 'radius',
recentlyViewedApp: 'app_recently_viewed',
+ redeploy: 'redeploy',
refresh: 'refresh',
regressionJob: 'ml_regression_job',
reporter: 'reporter',
@@ -386,6 +394,8 @@ const typeToPathMap = {
tag: 'tag',
tear: 'tear',
temperature: 'temperature',
+ thumbsDown: 'thumbsDown',
+ thumbsUp: 'thumbsUp',
timeline: 'timeline',
timelionApp: 'app_timelion',
timeslider: 'timeslider',
@@ -393,6 +403,7 @@ const typeToPathMap = {
trash: 'trash',
upgradeAssistantApp: 'app_upgrade_assistant',
uptimeApp: 'app_uptime',
+ undeploy: 'undeploy',
unfold: 'unfold',
unlink: 'unlink',
user: 'user',
diff --git a/src/global_styling/variables/_collapsible_nav.scss b/src/global_styling/variables/_collapsible_nav.scss
index 4a23de09d7..1c6ffb744d 100644
--- a/src/global_styling/variables/_collapsible_nav.scss
+++ b/src/global_styling/variables/_collapsible_nav.scss
@@ -10,6 +10,8 @@
*/
// Should be same as OuiFlyout background color
+$ouiCollapsibleNavBackgroundColor: null !default;
+
$ouiCollapsibleNavGroupNoneBackgroundColor: inherit !default;
$ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default;
$ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme(
@@ -23,6 +25,8 @@ $ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
/* OUI -> EUI Aliases */
+$euiCollapsibleNavBackgroundColor: $ouiCollapsibleNavBackgroundColor;
+$euiCollapsibleNavGroupNoneBackgroundColor: $ouiCollapsibleNavGroupNoneBackgroundColor;
$euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor;
$euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor;
$euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor;
diff --git a/src/services/color/oui_palettes.ts b/src/services/color/oui_palettes.ts
index 10e12c3174..047df0a769 100644
--- a/src/services/color/oui_palettes.ts
+++ b/src/services/color/oui_palettes.ts
@@ -60,7 +60,7 @@ export interface OuiPaletteColorBlindProps {
/**
* Order similar colors as `group`s or just `append` each variation
*/
- order?: 'append' | 'group';
+ order?: 'append' | 'group' | 'middle-out';
/**
* Specifies if the direction of the color variations
*/
@@ -134,6 +134,24 @@ export const ouiPaletteColorBlind = ({
colors.push(...rotation);
}
}
+
+ // start with the appended order, then pick from both ends
+ if (order === 'middle-out') {
+ const shadePalettes = [];
+ while (colors.length) {
+ shadePalettes.push(colors.splice(0, base.length));
+ }
+ while (shadePalettes.length) {
+ const firstPalette = shadePalettes.shift();
+ if (firstPalette) {
+ colors.unshift(...firstPalette);
+ }
+ const lastPalette = shadePalettes.pop();
+ if (lastPalette) {
+ colors.unshift(...lastPalette);
+ }
+ }
+ }
} else {
colors = base;
}
diff --git a/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss
index 23d267d612..72059f7c8f 100644
--- a/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss
+++ b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss
@@ -9,6 +9,9 @@
* GitHub history for details.
*/
+// Override OuiFlyout background
+$ouiCollapsibleNavBackgroundColor: $ouiPageBackgroundColor !default;
+
// No distinction between none and light backgrounds in this theme
$ouiCollapsibleNavGroupNoneBackgroundColor: $ouiPageBackgroundColor !default;
$ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default;
@@ -23,6 +26,8 @@ $ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
/* OUI -> EUI Aliases */
+$euiCollapsibleNavBackgroundColor: $ouiCollapsibleNavBackgroundColor;
+$euiCollapsibleNavGroupNoneBackgroundColor: $ouiCollapsibleNavGroupNoneBackgroundColor;
$euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor;
$euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor;
$euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor;
diff --git a/src/themes/oui-next/global_styling/variables/_form.scss b/src/themes/oui-next/global_styling/variables/_form.scss
index a4bc505eff..ab7f33f241 100644
--- a/src/themes/oui-next/global_styling/variables/_form.scss
+++ b/src/themes/oui-next/global_styling/variables/_form.scss
@@ -45,7 +45,8 @@ $ouiFormCustomControlBorderColor: shadeOrTint($ouiColorLightestShade, 18%, 30%)
$ouiFormControlDisabledColor: $ouiColorMediumShade !default;
$ouiFormControlBoxShadow: 0 1px 1px -1px transparentize($ouiShadowColor, .8), 0 3px 2px -2px transparentize($ouiShadowColor, .8) !default;
$ouiFormControlPlaceholderText: makeHighContrastColor($ouiTextSubduedColor, $ouiFormBackgroundColor) !default;
-$ouiFormInputGroupLabelBackground: tintOrShade($ouiColorLightShade, 50%, 40%) !default;
+$_ouiFormInputGroupLabelDarkBackgroundColor: #293847 !default;
+$ouiFormInputGroupLabelBackground: lightOrDarkTheme(tint($ouiColorLightShade, 50%), $_ouiFormInputGroupLabelDarkBackgroundColor) !default;
$ouiFormInputGroupBorder: 1px solid shadeOrTint($ouiFormInputGroupLabelBackground, 2%, 4%) !default;
$ouiSwitchOffColor: lightOrDarkTheme(transparentize($ouiColorMediumShade, .8), transparentize($ouiColorMediumShade, .3)) !default;
diff --git a/src/themes/oui-next/global_styling/variables/_tool_tip.scss b/src/themes/oui-next/global_styling/variables/_tool_tip.scss
index 663f062224..f6fb8bc393 100644
--- a/src/themes/oui-next/global_styling/variables/_tool_tip.scss
+++ b/src/themes/oui-next/global_styling/variables/_tool_tip.scss
@@ -9,7 +9,8 @@
* GitHub history for details.
*/
-$ouiTooltipBackgroundColor: tintOrShade($ouiColorFullShade, 25%, 100%) !default;
+$ouiTooltipBackgroundColor: #293847 !default;
+
$ouiTooltipAnimations: (
top: ouiToolTipTop,
left: ouiToolTipBottom,