diff --git a/changelogs/fragments/7757.yml b/changelogs/fragments/7757.yml new file mode 100644 index 00000000000..0466de62dc1 --- /dev/null +++ b/changelogs/fragments/7757.yml @@ -0,0 +1,2 @@ +feat: +- Add v9 theme (preview) ([#7757](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7757)) \ No newline at end of file diff --git a/packages/osd-optimizer/src/__fixtures__/mock_repo/src/core/public/core_app/styles/_globals_v9dark.scss b/packages/osd-optimizer/src/__fixtures__/mock_repo/src/core/public/core_app/styles/_globals_v9dark.scss new file mode 100644 index 00000000000..e5f1ee13149 --- /dev/null +++ b/packages/osd-optimizer/src/__fixtures__/mock_repo/src/core/public/core_app/styles/_globals_v9dark.scss @@ -0,0 +1 @@ +$globalStyleConstant: 14; diff --git a/packages/osd-optimizer/src/__fixtures__/mock_repo/src/core/public/core_app/styles/_globals_v9light.scss b/packages/osd-optimizer/src/__fixtures__/mock_repo/src/core/public/core_app/styles/_globals_v9light.scss new file mode 100644 index 00000000000..45d508715da --- /dev/null +++ b/packages/osd-optimizer/src/__fixtures__/mock_repo/src/core/public/core_app/styles/_globals_v9light.scss @@ -0,0 +1 @@ +$globalStyleConstant: 15; diff --git a/packages/osd-optimizer/src/common/theme_tags.test.ts b/packages/osd-optimizer/src/common/theme_tags.test.ts index 791734e9cfb..ae8775484e7 100644 --- a/packages/osd-optimizer/src/common/theme_tags.test.ts +++ b/packages/osd-optimizer/src/common/theme_tags.test.ts @@ -37,6 +37,8 @@ it('returns default tags when passed undefined', () => { "v7light", "v8dark", "v8light", + "v9dark", + "v9light", ] `); }); @@ -48,6 +50,8 @@ it('returns all tags when passed *', () => { "v7light", "v8dark", "v8light", + "v9dark", + "v9light", ] `); }); @@ -81,13 +85,13 @@ it('returns specific tags when passed an array', () => { it('throws when an invalid tag is in the array', () => { expect(() => parseThemeTags(['v8light', 'v7light', 'bar'])).toThrowErrorMatchingInlineSnapshot( - `"Invalid theme tags [bar], options: [v7dark, v7light, v8dark, v8light]"` + `"Invalid theme tags [bar], options: [v7dark, v7light, v8dark, v8light, v9dark, v9light]"` ); }); it('throws when an invalid tags in comma separated list', () => { expect(() => parseThemeTags('v8light ,v7light,bar,box ')).toThrowErrorMatchingInlineSnapshot( - `"Invalid theme tags [bar, box], options: [v7dark, v7light, v8dark, v8light]"` + `"Invalid theme tags [bar, box], options: [v7dark, v7light, v8dark, v8light, v9dark, v9light]"` ); }); diff --git a/packages/osd-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap b/packages/osd-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap index dbbb5bad9bf..776298aa496 100644 --- a/packages/osd-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap +++ b/packages/osd-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap @@ -71,12 +71,14 @@ OptimizerConfig { "v7light", "v8dark", "v8light", + "v9dark", + "v9light", ], "watch": false, } `; -exports[`prepares assets for distribution: bar bundle 1`] = `"(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!==\\"undefined\\"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:\\"Module\\"})}Object.defineProperty(exports,\\"__esModule\\",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value===\\"object\\"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,\\"default\\",{enumerable:true,value:value});if(mode&2&&typeof value!=\\"string\\")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module[\\"default\\"]}:function getModuleExports(){return module};__webpack_require__.d(getter,\\"a\\",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p=\\"\\";return __webpack_require__(__webpack_require__.s=3)})([function(module,exports,__webpack_require__){\\"use strict\\";module.exports=function(cssWithMappingToString){var list=[];list.toString=function toString(){return this.map((function(item){var content=cssWithMappingToString(item);if(item[2]){return\\"@media \\".concat(item[2],\\" {\\").concat(content,\\"}\\")}return content})).join(\\"\\")};list.i=function(modules,mediaQuery,dedupe){if(typeof modules===\\"string\\"){modules=[[null,modules,\\"\\"]]}var alreadyImportedModules={};if(dedupe){for(var i=0;i { bar.cache.refresh(); expect(bar.cache.getModuleCount()).toBe( // code + styles + style/css-loader runtimes + public path updater - 25 + 33 ); expect(bar.cache.getReferencedFiles()?.map(absolutePathSerializer.serialize).sort()) @@ -195,6 +195,8 @@ it('builds expected bundles, saves bundle counts to metadata', async () => { "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v7light.scss", "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v8dark.scss", "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v8light.scss", + "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v9dark.scss", + "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v9light.scss", "/packages/osd-optimizer/target/worker/entry_point_creator.js", "/packages/osd-ui-shared-deps/public_path_module_creator.js", ] diff --git a/packages/osd-optimizer/src/optimizer/cache_keys.test.ts b/packages/osd-optimizer/src/optimizer/cache_keys.test.ts index 5ca5c76a566..95cd4b4b1d3 100644 --- a/packages/osd-optimizer/src/optimizer/cache_keys.test.ts +++ b/packages/osd-optimizer/src/optimizer/cache_keys.test.ts @@ -103,6 +103,8 @@ describe('getOptimizerCacheKey()', () => { "v7light", "v8dark", "v8light", + "v9dark", + "v9light", ], }, } diff --git a/packages/osd-ui-framework/Gruntfile.js b/packages/osd-ui-framework/Gruntfile.js index a0d8bd0abee..e6c580f91ba 100644 --- a/packages/osd-ui-framework/Gruntfile.js +++ b/packages/osd-ui-framework/Gruntfile.js @@ -97,6 +97,8 @@ module.exports = function (grunt) { uiFrameworkCompile('src/kui_dark.scss', 'dist/kui_dark.css'), uiFrameworkCompile('src/kui_next_light.scss', 'dist/kui_next_light.css'), uiFrameworkCompile('src/kui_next_dark.scss', 'dist/kui_next_dark.css'), + uiFrameworkCompile('src/kui_v9_light.scss', 'dist/kui_v9_light.css'), + uiFrameworkCompile('src/kui_v9_dark.scss', 'dist/kui_v9_dark.css'), ]).then(done); }); }; diff --git a/packages/osd-ui-framework/dist/kui_v9_dark.css b/packages/osd-ui-framework/dist/kui_v9_dark.css new file mode 100644 index 00000000000..656f7facfc8 --- /dev/null +++ b/packages/osd-ui-framework/dist/kui_v9_dark.css @@ -0,0 +1,1635 @@ +/*! + * 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. + */ + +main { + display: block; } + +.kuiBar { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; } + +.kuiBarSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiBarSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiBarSection:first-child { + margin-left: 0; +} +.kuiBarSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiBarSection:only-child { + margin-left: auto; } +.kuiBarSection > * + * { + margin-left: 10px; } + +.kuiButton { + display: inline-block; appearance: none; + cursor: pointer; + padding: 4px 12px 5px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + height: 30px; + text-decoration: none; + border: none; + border-radius: 4px; +} +.kuiButton:disabled { + cursor: not-allowed; + opacity: 0.5; +} +a.kuiButton.kuiButton-isDisabled { + cursor: not-allowed; + opacity: 0.5; +} + +.kuiButton:enabled:active { + transform: translateY(1px); +} +a.kuiButton:not(.kuiButton-isDisabled):active { transform: translateY(1px); +} + +.kuiButton__inner { + display: flex; align-items: center; } + +.kuiButton--small { + font-size: 12px; + padding: 2px 8px 3px; + height: 22px; +} + +.kuiButton--fullWidth { + width: 100%; + text-align: center; +} + +.kuiButton--iconText .kuiButton__icon:first-child:not(:only-child) { + margin-right: 8px; +} +.kuiButton--iconText .kuiButton__icon:last-child:not(:only-child) { + margin-left: 8px; +} +.kuiButton--iconText.kuiButton--small .kuiButton__icon:first-child:not(:only-child) { + margin-right: 4px; +} +.kuiButton--iconText.kuiButton--small .kuiButton__icon:last-child:not(:only-child) { + margin-left: 4px; +} + +.kuiButton--basic { + color: #DFE5EF; + background-color: #101B25; +} +.kuiButton--basic:not(a):enabled:focus { + color: #DFE5EF; +} +a.kuiButton--basic:not(.kuiButton-isDisabled):focus { color: #DFE5EF; +} + +.kuiButton--basic:enabled:hover { + background-color: #010101 !important; } +a.kuiButton--basic:not(.kuiButton-isDisabled):hover { background-color: #010101 !important; } + +.kuiButton--basic:enabled:active { + background-color: #010101 !important; } +a.kuiButton--basic:not(.kuiButton-isDisabled):active { background-color: #010101 !important; } + +.kuiButton--primary { + color: #FCFEFF; + background-color: #FFC0CB; +} +.kuiButton--primary:not(a):enabled:focus { + color: #FCFEFF; +} +a.kuiButton--primary:not(.kuiButton-isDisabled):focus { color: #FCFEFF; +} + +.kuiButton--primary:enabled:hover { + color: #FCFEFF !important; background-color: #ff8da1; +} +a.kuiButton--primary:not(.kuiButton-isDisabled):hover { color: #FCFEFF !important; background-color: #ff8da1; +} + +.kuiButton--primary:enabled:active { + color: #FCFEFF !important; background-color: #ff8da1; +} +a.kuiButton--primary:not(.kuiButton-isDisabled):active { color: #FCFEFF !important; background-color: #ff8da1; +} + +.kuiButton--success { + color: #FCFEFF; + background-color: #FFC0CB; +} +.kuiButton--success:not(a):enabled:focus { + color: #FCFEFF; +} +a.kuiButton--success:not(.kuiButton-isDisabled):focus { color: #FCFEFF; +} + +.kuiButton--success:enabled:hover { + color: #FCFEFF !important; background-color: #ff8da1; +} +a.kuiButton--success:not(.kuiButton-isDisabled):hover { color: #FCFEFF !important; background-color: #ff8da1; +} + +.kuiButton--success:enabled:active { + color: #FCFEFF !important; background-color: #ff8da1; +} +a.kuiButton--success:not(.kuiButton-isDisabled):active { color: #FCFEFF !important; background-color: #ff8da1; +} + +.kuiButton--danger { + color: #FF6666; + border: solid 1px #FF6666; +} +.kuiButton--danger:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #FF6666; color: #FF6666; +} +a.kuiButton--danger:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #FF6666; color: #FF6666; +} + +.kuiButton--danger:enabled:hover { + color: #ff3333 !important; + border: solid 1px #ff3333; + background-color: rgba(255, 102, 102, 0.1); +} +a.kuiButton--danger:not(.kuiButton-isDisabled):hover { color: #ff3333 !important; + border: solid 1px #ff3333; + background-color: rgba(255, 102, 102, 0.1); +} + +.kuiButton--danger:enabled:active { + color: #ff3333 !important; + border: solid 1px #ff3333; + background-color: rgba(255, 102, 102, 0.1); +} +a.kuiButton--danger:not(.kuiButton-isDisabled):active { color: #ff3333 !important; + border: solid 1px #ff3333; + background-color: rgba(255, 102, 102, 0.1); +} + +.kuiButton--warning { + color: #FCFEFF; + background-color: #FFCE7A; +} +.kuiButton--warning:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #FFCE7A; color: #FCFEFF; +} +a.kuiButton--warning:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #FFCE7A; color: #FCFEFF; +} + +.kuiButton--warning:enabled:hover { + color: #FCFEFF !important; background-color: #ffbb47; +} +a.kuiButton--warning:not(.kuiButton-isDisabled):hover { color: #FCFEFF !important; background-color: #ffbb47; +} + +.kuiButton--warning:enabled:active { + color: #FCFEFF !important; background-color: #ffbb47; +} +a.kuiButton--warning:not(.kuiButton-isDisabled):active { color: #FCFEFF !important; background-color: #ffbb47; +} + +.kuiButton--warning:disabled { + background-color: #ffe1ad; +} +a.kuiButton--warning.kuiButton-isDisabled { + background-color: #ffe1ad; +} + +.kuiButton--hollow { + color: #FFC0CB !important; background-color: transparent; +} +.kuiButton--hollow:enabled:hover { + color: #ff8da1 !important; text-decoration: underline; +} +a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { color: #ff8da1 !important; text-decoration: underline; +} + +.kuiButton--hollow:enabled:active { + color: #ff8da1 !important; text-decoration: underline; +} +a.kuiButton--hollow:not(.kuiButton-isDisabled):active { color: #ff8da1 !important; text-decoration: underline; +} + +.kuiButton--secondary { + color: #FFC0CB !important; border: solid 1px #FFC0CB; +} +.kuiButton--secondary:enabled:hover { + color: #ff8da1 !important; border: solid 1px #ff8da1; + background-color: rgba(255, 192, 203, 0.1); + text-decoration: underline; +} +a.kuiButton--secondary:not(.kuiButton-isDisabled):hover { color: #ff8da1 !important; border: solid 1px #ff8da1; + background-color: rgba(255, 192, 203, 0.1); + text-decoration: underline; +} + +.kuiButton--secondary:enabled:active { + color: #ff8da1 !important; border: solid 1px #ff8da1; + background-color: rgba(255, 192, 203, 0.1); + text-decoration: underline; +} +a.kuiButton--secondary:not(.kuiButton-isDisabled):active { color: #ff8da1 !important; border: solid 1px #ff8da1; + background-color: rgba(255, 192, 203, 0.1); + text-decoration: underline; +} + +.kuiButtonGroup { + display: flex; + align-items: center; +} +.kuiButtonGroup .kuiButton + .kuiButton { + margin-left: 4px; +} + +.kuiButtonGroup--united > .kuiButton:not(:first-child):not(:last-child) { + border-radius: 0; +} +.kuiButtonGroup--united > .kuiButton:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.kuiButtonGroup--united > .kuiButton:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.kuiButtonGroup--united > .kuiButton:only-child { + border-radius: 4px 4px 4px 4px; +} +.kuiButtonGroup--united .kuiButton + .kuiButton { + margin-left: 0; +} + +.kuiButtonGroup--fullWidth { + display: flex; +} +.kuiButtonGroup--fullWidth > .kuiButton { + flex: 1 1 auto; + text-align: center; +} + +.eui-textCenter > .kuiButtonGroup, +.text-center > .kuiButtonGroup { + display: inline-block; +} + +.kuiCollapseButton { + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #DFE5EF !important; cursor: pointer; + opacity: 0.35; +} +.kuiCollapseButton:hover { + opacity: 1; +} + +.kuiAssistedInput { + display: inline-block; position: relative; +} + +.kuiAssistedInput__assistance { + position: absolute; + right: 12px; + top: 50%; transform: translateY(-50%); } + +.kuiCheckBox { + appearance: none; background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; + width: 16px; + height: 16px; + font: var(--font-text) !important; line-height: 1.5 !important; margin: 0 !important; font-family: var(--font-text) !important; font-size: 10px !important; transition: background-color 0.1s linear; +} +.kuiCheckBox::before { + position: relative; + left: 0.25em; + font-family: FontAwesome, sans-serif; + content: "\f00c"; + font-size: 1em; + opacity: 0; + color: #FCFEFF; + transition: opacity 0.1s linear; +} +.kuiCheckBox:checked { + border-color: #FFC0CB; + background-color: #FFC0CB; +} +.kuiCheckBox:checked::before { + opacity: 1; +} +.kuiCheckBox:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #0A121A, 0 0 0 2px #FFC0CB; } +.kuiCheckBox:disabled { + background-color: #0d161e !important; + border-color: #0d161e !important; + cursor: not-allowed !important; +} + +.kuiCheckBoxLabel { + display: flex; + align-items: center; + font-weight: normal !important; + line-height: 1.5; +} + +.kuiCheckBoxLabel__text { + font-size: 16px; + margin-left: 8px; +} + +.kuiLabel { + font-size: 16px; + line-height: 1.5; + font-weight: bold; + margin-bottom: 0; } + +.kuiSearchInput { + width: 180px; + display: inline-block; + position: relative; + font-size: 16px; + line-height: 1.5; +} +.kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input { + border-color: #FF6666; +} + +.kuiSearchInput__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #5B6875; +} + +.kuiSearchInput__input { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #DFE5EF; + background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; padding-left: 28px; width: 100%; } +.kuiSearchInput__input:invalid { + border-color: #FF6666; +} +.kuiSearchInput__input:focus { + outline: none; + border-color: #FFC0CB; +} +.kuiSearchInput__input:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.kuiSearchInput--small { + width: 60px; +} + +.kuiSearchInput--large { + width: 400px; +} + +.kuiSelect { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #DFE5EF; + background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; padding-right: 30px; background-image: url('data:image/svg+xml;utf8,'); background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); } +.kuiSelect:invalid { + border-color: #FF6666; +} +.kuiSelect:focus { + outline: none; + border-color: #FFC0CB; +} +.kuiSelect:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiSelect:-moz-focusring { + text-shadow: 0 0 0; } +.kuiSelect.kuiSelect-isInvalid { + border-color: #FF6666; +} +.kuiSelect:focus { + box-shadow: none; + outline: none; + border-color: #FFC0CB; +} + +.kuiSelect--small { + width: 60px; +} + +.kuiSelect--medium { + width: 180px; +} + +.kuiSelect--large { + width: 400px; +} + +.kuiStaticInput { + width: 180px; + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #DFE5EF; + border: 1px solid transparent; background-color: transparent; +} + +.kuiTextArea { + width: 180px; + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #DFE5EF; + background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; } +.kuiTextArea:invalid { + border-color: #FF6666; +} +.kuiTextArea:focus { + outline: none; + border-color: #FFC0CB; +} +.kuiTextArea:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiTextArea:focus { + box-shadow: none; + outline: none; + border-color: #FFC0CB; +} +.kuiTextArea.kuiTextArea-isInvalid { + border-color: #FF6666; +} + +.kuiTextArea--nonResizable { + resize: none; +} + +.kuiTextArea--small { + width: 60px; +} + +.kuiTextArea--large { + width: 400px; +} + +.kuiTextInput { + width: 180px; + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #DFE5EF; + background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; } +.kuiTextInput:invalid { + border-color: #FF6666; +} +.kuiTextInput:focus { + outline: none; + border-color: #FFC0CB; +} +.kuiTextInput:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiTextInput.kuiTextInput-isInvalid { + border-color: #FF6666; +} + +.kuiTextInput--small { + width: 60px; +} + +.kuiTextInput--large { + width: 400px; +} + +.kuiFieldGroup { + display: flex; + align-items: center; } + +.kuiFieldGroup--alignTop { + align-items: flex-start; +} + +.kuiFieldGroupSection { + line-height: 1.5; +} +.kuiFieldGroupSection + .kuiFieldGroupSection { + margin-left: 10px; +} + +.kuiFieldGroupSection--wide { + flex: 1 1 auto; +} +.kuiFieldGroupSection--wide > * { + width: 100%; +} + +.kuiIcon { + display: inline-block; font: normal normal normal 14px/1 FontAwesome, sans-serif; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +.kuiIcon--info { + color: #FFC0CB; +} + +.kuiIcon--success { + color: #FFC0CB; +} + +.kuiIcon--warning { + color: #FFCE7A; +} + +.kuiIcon--error { + color: #FF6666; +} + +.kuiIcon--inactive { + color: #293847; +} + +.kuiIcon--basic { + color: #8D98A3; +} + +.kuiInfoPanel { + padding: 14px 20px 18px; + line-height: 1.5; + border: 2px solid; +} + +.kuiInfoPanel--info { + border-color: rgba(255, 192, 203, 0.25); } + +.kuiInfoPanel--success { + border-color: rgba(255, 192, 203, 0.25); } + +.kuiInfoPanel--warning { + border-color: rgba(255, 206, 122, 0.25); } + +.kuiInfoPanel--error { + border-color: rgba(255, 102, 102, 0.25); } + +.kuiInfoPanelHeader { + display: flex; + align-items: baseline; } + +.kuiInfoPanelHeader__icon { + margin-right: 10px; + font-size: 16px; + line-height: 1.5; +} + +.kuiInfoPanelHeader__title { + font-size: 16px; + line-height: 1.5; + font-weight: 700; +} + +.kuiInfoPanelBody { + margin-top: 8px; +} +.kuiInfoPanelBody > * + * { + margin-top: 8px; +} + +.kuiInfoPanelBody__message { + font-size: 16px; + line-height: 1.5; +} + +.kuiLink { + color: #FFC0CB; + text-decoration: none; + cursor: pointer; appearance: none; background-color: transparent; border: none; font-size: inherit; line-height: inherit; } +.kuiLink:visited, .kuiLink:active { + color: #FFC0CB; +} +.kuiLink:hover { + color: #ff8da1; + text-decoration: underline; +} + +.kuiLocalBreadcrumbs { + display: flex; + align-items: center; + padding: 12px 8px; border-bottom: 1px solid #293847; + flex-grow: 1; + flex-basis: 100%; + background-color: #0A121A; +} + +.kuiLocalBreadcrumb { + font-size: 14px; + margin: 0; + font-weight: normal; +} +.kuiLocalBreadcrumb + .kuiLocalBreadcrumb { + margin-left: 6px; +} +.kuiLocalBreadcrumb + .kuiLocalBreadcrumb::before { + content: "/"; + user-select: none; + margin-right: 4px; + color: #293847; +} + +.kuiLocalBreadcrumb__link { + color: #FFC0CB; + text-decoration: none; + cursor: pointer; appearance: none; background-color: transparent; border: none; font-size: inherit; line-height: inherit; color: #FFC0CB; font-size: 16px; +} +.kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active { + color: #FFC0CB; +} +.kuiLocalBreadcrumb__link:hover { + color: #ff8da1; + text-decoration: underline; +} + +.kuiLocalBreadcrumb__emphasis { + font-weight: 700; +} + +.kuiDatePicker { + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; + line-height: 1.5; +} + +.kuiDatePickerNavigationCell { + padding: 0; +} + +.kuiDatePickerNavigation { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 4px; +} + +.kuiDatePickerNavigationButton { + appearance: none; + background-color: transparent; + border: none; + font-size: 14px; + color: #DFE5EF; + padding: 3px 6px; + border-radius: 4px; +} +.kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active { + cursor: pointer; + color: #101B25; + background-color: #FFC0CB; +} +.kuiDatePickerNavigationButton:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px transparent, 0 0 0 2px #FFC0CB; color: #DFE5EF; } + +.kuiDatePickerHeaderCell { + padding: 9px 0; + color: #DFE5EF; + font-size: 14px; + font-weight: bold; + text-align: center; + line-height: 1.2; +} + +.kuiDatePickerRowCell { + padding: 0; + text-align: center; +} + +.kuiDatePickerRowCellContent { + appearance: none; + background-color: transparent; + width: 100%; + border: 1px solid transparent; + color: #DFE5EF; + font-size: 14px; + padding: 8px; + border-radius: 4px; + line-height: 1.2; +} +.kuiDatePickerRowCellContent:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px transparent, 0 0 0 2px #FFC0CB; color: #DFE5EF; } +.kuiDatePickerRowCellContent:disabled { + pointer-events: none; + opacity: 0.5; +} +.kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isOtherMonth { + visibility: hidden; + pointer-events: none; +} +.kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { + color: #FFC0CB; +} +.kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { + background-color: #8D98A3; + color: #DFE5EF; +} +.kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active { + cursor: pointer; + color: #101B25; + background-color: #FFC0CB; +} + +.kuiLocalDropdown { + position: relative; + padding: 10px 8px 14px; + background-color: transparent; + margin-bottom: 10px; + line-height: 20px; +} + +.kuiLocalDropdownCloseButton { + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #DFE5EF !important; cursor: pointer; + opacity: 0.35; + position: absolute; + top: 1px; + right: 5px; +} +.kuiLocalDropdownCloseButton:hover { + opacity: 1; +} + +.kuiLocalDropdownPanels { + display: flex; +} + +.kuiLocalDropdownPanel { + flex: 1 1 0%; +} + +.kuiLocalDropdownPanel--left { + margin-right: 30px; +} + +.kuiLocalDropdownPanel--right { + margin-left: 30px; +} + +.kuiLocalDropdownTitle { + margin-top: 0; margin-bottom: 12px; + font-size: 18px; + color: #DFE5EF; +} + +.kuiLocalDropdownSection { + margin-bottom: 16px; +} +.kuiLocalDropdownSection:last-child { + margin-bottom: 0; +} + +.kuiLocalDropdownHeader { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 6px; +} + +.kuiLocalDropdownHeader__label { + font-size: 14px; + font-weight: 700; + margin-bottom: 0; color: #DFE5EF; +} + +.kuiLocalDropdownHeader__actions { + display: flex; +} + +.kuiLocalDropdownHeader__action { + color: #FFC0CB; + font-size: 12px; + text-decoration: none; + cursor: pointer; +} +.kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action { + margin-left: 10px; +} +.kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active { + color: #ff8da1; +} + +.kuiLocalDropdownInput { + display: block; + width: 100%; + margin-bottom: 12px; + padding: 5px 15px; + font-size: 14px; + color: #DFE5EF; + background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; +} +.kuiLocalDropdownInput:focus { + border-color: #FFC0CB; +} + +.kuiLocalDropdownFormNote { + font-size: 14px; + color: #8D98A3; +} + +.kuiLocalDropdownWarning { + margin-bottom: 16px; + padding: 6px 10px; + font-size: 14px; + color: #DFE5EF; + background-color: #0A121A; + border-left: solid 2px #FF6666; +} + +.kuiLocalDropdownHelpText { + margin-bottom: 16px; + font-size: 14px; + color: #8D98A3; +} + +.kuiLocalMenu { + display: flex; + align-items: stretch; + padding-top: 8px; + padding-bottom: 8px; +} + +.kuiLocalMenuItem { + display: flex; + align-items: center; + padding: 2px 8px; + font-size: 16px; + background-color: transparent; + color: #DFE5EF; + border: 0; + cursor: pointer; + border-bottom: solid 2px transparent; +} +.kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus { + background-color: rgba(255, 192, 203, 0.15); + text-decoration: underline; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isSelected { + color: #FFC0CB; + background-color: transparent; + border-color: #FFC0CB; + z-index: 2; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus { + text-decoration: none; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { + opacity: 0.5; + cursor: not-allowed; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { + background-color: transparent; + text-decoration: none; +} + +.kuiLocalMenuItem__icon { + margin-right: 5px; + margin-bottom: -1px; +} + +.kuiLocalNav { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 69px; color: #DFE5EF; + background-color: #0A121A; + line-height: 1.5; + border-bottom: solid 1px #293847; +} + +.kuiLocalNavRow { + display: flex; + align-items: stretch; + justify-content: space-between; +} + +.kuiLocalNavRow__section { + display: flex; + align-items: stretch; +} + +.kuiLocalNavRow--secondary { + padding: 0 8px; align-items: flex-start; } + +.kuiLocalSearch { + display: flex; + width: 100%; + margin-bottom: 8px; +} + +.kuiLocalSearchInput { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #DFE5EF; + background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; flex: 1 1 100%; + border-color: #FCFEFF; + border-color: #293847; + border-radius: 4px 0 0 4px; +} +.kuiLocalSearchInput:invalid { + border-color: #FF6666; +} +.kuiLocalSearchInput:focus { + outline: none; + border-color: #FFC0CB; +} +.kuiLocalSearchInput:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiLocalSearchInput:focus { + box-shadow: none; +} +.kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { + border-color: #FF6666; +} + +.kuiLocalSearchInput--secondary { + height: 32px; + flex: 0 0 auto; + border-radius: 0; + border-left-width: 0; +} + +.kuiLocalSearchInput, +.kuiLocalSearchAssistedInput__input { + padding-right: 6em; } + +.kuiLocalSearchAssistedInput__assistance { + position: absolute; + right: 6px; + top: 50%; z-index: 2; + transform: translateY(-50%); } + +.kuiLocalSearchSelect { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #DFE5EF; + background-color: #0e1721; + border: 1px solid rgba(252, 254, 255, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; padding-right: 30px; background-image: url('data:image/svg+xml;utf8,'); background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); border-left-width: 0; + border-radius: 0; +} +.kuiLocalSearchSelect:invalid { + border-color: #FF6666; +} +.kuiLocalSearchSelect:focus { + outline: none; + border-color: #FFC0CB; +} +.kuiLocalSearchSelect:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiLocalSearchSelect:-moz-focusring { + text-shadow: 0 0 0; } + +.kuiLocalSearchButton { + width: 43px; + height: 32px; + font-size: 16px; + line-height: 0; color: #FCFEFF; + background-color: #FFC0CB; + border: 0; + border-radius: 0 4px 4px 0; +} +.kuiLocalSearchButton:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FFC0CB; } + +.kuiLocalTabs { + display: flex; + align-items: flex-end; + height: 100%; +} + +.kuiLocalTab { + padding: 5px 0 6px; + font-size: 18px; + color: #DFE3E8; + border-bottom: 2px solid transparent; + text-decoration: none; + cursor: pointer; + margin-top: 0 !important; margin-bottom: 0 !important; } +.kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { + color: #FFC0CB; +} +.kuiLocalTab.kuiLocalTab-isSelected { + color: #FFC0CB; + border-bottom-color: #FFC0CB; + cursor: default; +} +.kuiLocalTab.kuiLocalTab-isDisabled { + opacity: 0.5; + cursor: default; } +.kuiLocalTab + .kuiLocalTab { + margin-left: 15px; +} + +.kuiLocalTitle { + display: flex; + align-items: center; + padding: 12px 8px; + font-size: 16px; + font-weight: bold; + border-bottom: 1px solid #293847; + flex-grow: 1; + flex-basis: 100%; + background-color: #0A121A; +} +.kuiLocalTitle:empty { + padding: 0; + display: none; +} + +.kuiPager { + display: flex; + align-items: center; +} +.kuiPager > * + * { + margin-left: 10px; } + +.kuiPagerText { + font-size: 16px; + line-height: 1.5; + color: #8D98A3; + white-space: nowrap; } + +.kuiPanel { + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3); + background-color: #0A121A; + border: 1px solid #293847; + border-radius: 4px; +} + +.kuiPanel--prompt { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + min-height: 300px; +} +.kuiPanel--prompt .kuiPanelBody { + padding: 30px; + max-width: 500px; +} + +.kuiPanel--noBorder { + border: none; +} + +.kuiPanel--withToolBar { + border-top: none; + border-radius: 0; +} + +.kuiPanel--centered { + display: flex; + justify-content: center; + align-items: center; +} + +.kuiPanelHeader { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; padding: 10px; + height: 50px; + border-bottom: 1px solid #293847; +} +.kuiPanelHeader .kuiButton:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FFC0CB; } +a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FFC0CB; } + +.kuiPanelHeader .kuiButton--danger:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FF6666; } +a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FF6666; } + +.kuiPanelHeader .kuiSelect { + border-color: #0e1721; +} +.kuiPanelHeader .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #FFC0CB; +} +a.kuiPanelHeader .kuiSelect:not(.kuiButton-isDisabled):focus { outline: none; + border-color: #FFC0CB; +} + +.kuiPanelHeader__title { + font-size: 20px; + line-height: 1.5; + margin: 0; } + +.kuiPanelHeaderSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiPanelHeaderSection:first-child { + margin-left: 0; +} +.kuiPanelHeaderSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiPanelHeaderSection:only-child { + margin-left: auto; } +.kuiPanelHeaderSection > * + * { + margin-left: 10px; } +.kuiPanelHeaderSection:only-child { + margin-left: 0; margin-right: auto; } + +.kuiPanelBody { + padding: 10px; +} + +.kuiEmptyTablePrompt { + display: flex; + flex-direction: column; + align-items: center; + padding: 30px; +} + +.kuiEmptyTablePrompt__message { + font-size: 20px; + color: #8D98A3; + line-height: 1.5; +} + +.kuiEmptyTablePrompt__actions { + margin-top: 10px; +} + +.kuiStatusText { + display: inline-flex; + align-items: baseline; +} + +.kuiStatusText--info { + color: #FFC0CB; +} + +.kuiStatusText--success { + color: #FFC0CB; +} + +.kuiStatusText--warning { + color: #FFCE7A; +} + +.kuiStatusText--error { + color: #FF6666; +} + +.kuiStatusText__icon { + margin-right: 6px; + width: 1.15em; max-height: 1.15em; } + +.kuiControlledTable { + background: #0A121A; +} +.kuiControlledTable .kuiTable { + border-top: none; } +.kuiControlledTable .kuiToolBarFooter { + border-top: none; } +.kuiControlledTable .kuiMenu--contained { + border-top: none; } + +.kuiTable { + width: 100%; + border: 1px solid #293847; + border-collapse: collapse; + background-color: #0A121A; +} + +.kuiTable--fluid { + width: auto; } +.kuiTable--fluid .kuiTableHeaderCell, +.kuiTable--fluid .kuiTableRowCell { + max-width: none; } + +.kuiTableHeaderCell { + font-size: 16px; + font-weight: 400; + text-align: left; + max-width: 20px; line-height: 1.5; + color: #8D98A3; +} + +.kuiTableHeaderCell__liner { + display: inline-block; + padding: 7px 8px 8px; +} + +.kuiTableHeaderCellButton { + user-select: none; cursor: pointer; + width: 100%; + appearance: none; background-color: transparent; border: 0; padding: 0; color: inherit; line-height: inherit; font-size: inherit; text-align: inherit; } +.kuiTableHeaderCellButton:hover .kuiTableSortIcon { + display: block; + opacity: 1; +} +.kuiTableHeaderCellButton .kuiTableHeaderCell__liner { + display: flex; + align-items: center; +} + +.kuiTableHeaderCell--alignRight { + text-align: right; +} + +.kuiTableSortIcon { + display: none; + pointer-events: none; + margin-left: 4px; +} +.kuiTableHeaderCellButton-isSorted .kuiTableSortIcon { + display: block; + opacity: 0.4; +} + +.kuiTableRow:hover .kuiTableRowHoverReveal { + display: inline-block; +} + +.kuiTableRowHoverReveal { + display: none; +} + +.kuiTableRowCell { + font-size: 16px; + font-weight: 400; + text-align: left; + max-width: 20px; color: #DFE5EF; + border-top: 1px solid #293847; + vertical-align: middle; +} + +.kuiTableRowCell__liner { + padding: 7px 8px 8px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.kuiTableRowCell__liner > * { + vertical-align: middle; } + +.kuiTableRowCell--wrap .kuiTableRowCell__liner { + white-space: normal; +} + +.kuiTableRowCell--overflowingContent .kuiTableRowCell__liner { + overflow: visible; + white-space: normal; +} + +.kuiTableRowCell--expanded { + border-top-color: #0A121A; } + +.kuiTableRowCell--alignRight { + text-align: right; +} +.kuiTableRowCell--alignRight .kuiTableRowCell__liner { + text-align: right; +} + +.kuiTableHeaderCell--checkBox, +.kuiTableRowCell--checkBox { + width: 28px; line-height: 1; } +.kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, +.kuiTableRowCell--checkBox .kuiTableRowCell__liner { + overflow: visible; } +.kuiTableHeaderCell--checkBox .kuiTableHeaderCell__liner, +.kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, +.kuiTableRowCell--checkBox .kuiTableHeaderCell__liner, +.kuiTableRowCell--checkBox .kuiTableRowCell__liner { + padding-right: 0; +} + +.kuiTableInfo { + padding: 30px; + font-size: 20px; + color: #8D98A3; + line-height: 1.5; +} + +.kuiTabs { + display: flex; + border-bottom: 1px solid #293847; +} + +.kuiTab { + appearance: none; cursor: pointer; + padding: 10px 30px; + font-size: 16px; + color: #8D98A3; + background-color: transparent; border: 1px solid #293847; + border-radius: 0; margin-bottom: -1px; } +.kuiTab + .kuiTab { + border-left: none; +} +.kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + margin-left: -1px; } +.kuiTab:active { + outline: none !important; box-shadow: none; } +.kuiTab:focus { + outline: none; } +.kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + z-index: 1; + color: #FFC0CB; + border: 1px solid #FFC0CB !important; +} +.kuiTab:hover:not(.kuiTab-isSelected) { + color: #ff8da1; + background-color: #101B25; +} +.kuiTab.kuiTab-isSelected { + cursor: default; + color: #DFE5EF; + background-color: transparent; + border-bottom-color: transparent; +} + +.kuiToolBar { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; padding: 10px; + height: 50px; + background-color: transparent; + border: solid 1px #293847; +} +.kuiToolBar .kuiButton:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FFC0CB; } +a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FFC0CB; } + +.kuiToolBar .kuiButton--danger:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FF6666; } +a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #293847, 0 0 0 2px #FF6666; } + +.kuiToolBar .kuiSelect { + border-color: #0e1721; +} +.kuiToolBar .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #FFC0CB; +} +a.kuiToolBar .kuiSelect:not(.kuiButton-isDisabled):focus { outline: none; + border-color: #FFC0CB; +} + +.kuiToolBarSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiToolBarSection:first-child { + margin-left: 0; +} +.kuiToolBarSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiToolBarSection:only-child { + margin-left: auto; } +.kuiToolBarSection > * + * { + margin-left: 10px; } + +.kuiToolBar--searchOnly .kuiToolBarSearch { + margin-left: 0 !important; } + +.kuiToolBarFooter { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; padding: 10px; + height: 40px; + background-color: #0A121A; +} + +.kuiToolBarFooterSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiToolBarFooterSection:first-child { + margin-left: 0; +} +.kuiToolBarFooterSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiToolBarFooterSection:only-child { + margin-left: auto; } +.kuiToolBarFooterSection > * + * { + margin-left: 10px; } + +.kuiToolBarSearch { + display: flex; + align-items: center; + margin-left: 25px; + margin-right: 25px; + flex: 1 1 auto; + max-width: 100%; line-height: 1.5; +} +.kuiToolBarSearch:first-child { + margin-left: 0; +} +.kuiToolBarSearch:last-child { + margin-right: 0; +} +.kuiToolBarSearch > * + * { + margin-left: 10px; } + +.kuiToolBarSearchBox { + flex: 1 1 auto; + position: relative; + font-size: 16px; + max-width: 800px; +} + +.kuiToolBarSearchBox__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #acacac; +} + +.kuiToolBarSearchBox__input { + width: 100%; + min-width: 200px; + padding: 4px 12px 5px 28px; + font-family: var(--font-text); background-color: #0A121A; + color: #DFE5EF; + border-radius: 4px; + font-size: 1em; + border: 1px solid #293847; + line-height: normal; transition: border-color 0.1s linear; +} +.kuiToolBarSearchBox__input:focus { + outline: none; + border-color: #FFC0CB; +} + +.kuiToolBarText { + font-size: 16px; + line-height: 1.5; + color: #8D98A3; + white-space: nowrap; } + +.kuiTitle { + margin: 0; font-weight: 400; font-size: 24px; +} + +.kuiSubTitle { + margin: 0; font-weight: 400; font-size: 20px; +} + +.kuiTextTitle { + margin: 0; font-weight: 700; line-height: 1.5; + font-size: 16px; +} + +.kuiText { + margin: 0; font-weight: 400; line-height: 1.5; + font-size: 16px; +} + +.kuiSubText { + margin: 0; font-weight: 400; line-height: 1.5; + font-size: 14px; +} + +.kuiSubduedText { + color: #8D98A3 !important; +} + +.kuiVerticalRhythm + .kuiVerticalRhythm { + margin-top: 16px; +} + +.kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall { + margin-top: 8px; +} + +.kuiVerticalRhythmLarge + .kuiVerticalRhythmLarge { + margin-top: 24px; +} + +.kuiVerticalRhythmXLarge + .kuiVerticalRhythmXLarge { + margin-top: 32px; +} + +.kuiView { + background-color: #fff; + flex: 1 1 auto; +} + +.kuiViewContent { + padding-top: 20px; + padding-bottom: 20px; + width: 100%; +} + +.kuiViewContent--constrainedWidth { + width: 100%; + max-width: 1100px; + margin-left: auto; + margin-right: auto; +} + +.kuiViewContentItem { + padding-left: 20px; + padding-right: 20px; +} diff --git a/packages/osd-ui-framework/dist/kui_v9_light.css b/packages/osd-ui-framework/dist/kui_v9_light.css new file mode 100644 index 00000000000..f7efab3e9de --- /dev/null +++ b/packages/osd-ui-framework/dist/kui_v9_light.css @@ -0,0 +1,1635 @@ +/*! + * 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. + */ + +main { + display: block; } + +.kuiBar { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; } + +.kuiBarSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiBarSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiBarSection:first-child { + margin-left: 0; +} +.kuiBarSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiBarSection:only-child { + margin-left: auto; } +.kuiBarSection > * + * { + margin-left: 10px; } + +.kuiButton { + display: inline-block; appearance: none; + cursor: pointer; + padding: 4px 12px 5px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + height: 30px; + text-decoration: none; + border: none; + border-radius: 4px; +} +.kuiButton:disabled { + cursor: not-allowed; + opacity: 0.5; +} +a.kuiButton.kuiButton-isDisabled { + cursor: not-allowed; + opacity: 0.5; +} + +.kuiButton:enabled:active { + transform: translateY(1px); +} +a.kuiButton:not(.kuiButton-isDisabled):active { transform: translateY(1px); +} + +.kuiButton__inner { + display: flex; align-items: center; } + +.kuiButton--small { + font-size: 12px; + padding: 2px 8px 3px; + height: 22px; +} + +.kuiButton--fullWidth { + width: 100%; + text-align: center; +} + +.kuiButton--iconText .kuiButton__icon:first-child:not(:only-child) { + margin-right: 8px; +} +.kuiButton--iconText .kuiButton__icon:last-child:not(:only-child) { + margin-left: 8px; +} +.kuiButton--iconText.kuiButton--small .kuiButton__icon:first-child:not(:only-child) { + margin-right: 4px; +} +.kuiButton--iconText.kuiButton--small .kuiButton__icon:last-child:not(:only-child) { + margin-left: 4px; +} + +.kuiButton--basic { + color: #343741; + background-color: #F5F7FA; +} +.kuiButton--basic:not(a):enabled:focus { + color: #343741; +} +a.kuiButton--basic:not(.kuiButton-isDisabled):focus { color: #343741; +} + +.kuiButton--basic:enabled:hover { + background-color: #d3dce9 !important; } +a.kuiButton--basic:not(.kuiButton-isDisabled):hover { background-color: #d3dce9 !important; } + +.kuiButton--basic:enabled:active { + background-color: #d3dce9 !important; } +a.kuiButton--basic:not(.kuiButton-isDisabled):active { background-color: #d3dce9 !important; } + +.kuiButton--primary { + color: #FFF; + background-color: #006BB4; +} +.kuiButton--primary:not(a):enabled:focus { + color: #FFF; +} +a.kuiButton--primary:not(.kuiButton-isDisabled):focus { color: #FFF; +} + +.kuiButton--primary:enabled:hover { + color: #FFF !important; background-color: #004d81; +} +a.kuiButton--primary:not(.kuiButton-isDisabled):hover { color: #FFF !important; background-color: #004d81; +} + +.kuiButton--primary:enabled:active { + color: #FFF !important; background-color: #004d81; +} +a.kuiButton--primary:not(.kuiButton-isDisabled):active { color: #FFF !important; background-color: #004d81; +} + +.kuiButton--success { + color: #FFF; + background-color: #017D73; +} +.kuiButton--success:not(a):enabled:focus { + color: #FFF; +} +a.kuiButton--success:not(.kuiButton-isDisabled):focus { color: #FFF; +} + +.kuiButton--success:enabled:hover { + color: #FFF !important; background-color: #014a44; +} +a.kuiButton--success:not(.kuiButton-isDisabled):hover { color: #FFF !important; background-color: #014a44; +} + +.kuiButton--success:enabled:active { + color: #FFF !important; background-color: #014a44; +} +a.kuiButton--success:not(.kuiButton-isDisabled):active { color: #FFF !important; background-color: #014a44; +} + +.kuiButton--danger { + color: #BD271E; + border: solid 1px #BD271E; +} +.kuiButton--danger:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; color: #BD271E; +} +a.kuiButton--danger:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E; color: #BD271E; +} + +.kuiButton--danger:enabled:hover { + color: #911e17 !important; + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); +} +a.kuiButton--danger:not(.kuiButton-isDisabled):hover { color: #911e17 !important; + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); +} + +.kuiButton--danger:enabled:active { + color: #911e17 !important; + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); +} +a.kuiButton--danger:not(.kuiButton-isDisabled):active { color: #911e17 !important; + border: solid 1px #911e17; + background-color: rgba(189, 39, 30, 0.1); +} + +.kuiButton--warning { + color: #FFF; + background-color: #F5A700; +} +.kuiButton--warning:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700; color: #FFF; +} +a.kuiButton--warning:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #F5A700; color: #FFF; +} + +.kuiButton--warning:enabled:hover { + color: #FFF !important; background-color: #c28400; +} +a.kuiButton--warning:not(.kuiButton-isDisabled):hover { color: #FFF !important; background-color: #c28400; +} + +.kuiButton--warning:enabled:active { + color: #FFF !important; background-color: #c28400; +} +a.kuiButton--warning:not(.kuiButton-isDisabled):active { color: #FFF !important; background-color: #c28400; +} + +.kuiButton--warning:disabled { + background-color: #ffbb29; +} +a.kuiButton--warning.kuiButton-isDisabled { + background-color: #ffbb29; +} + +.kuiButton--hollow { + color: #006BB4 !important; background-color: transparent; +} +.kuiButton--hollow:enabled:hover { + color: #004d81 !important; text-decoration: underline; +} +a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { color: #004d81 !important; text-decoration: underline; +} + +.kuiButton--hollow:enabled:active { + color: #004d81 !important; text-decoration: underline; +} +a.kuiButton--hollow:not(.kuiButton-isDisabled):active { color: #004d81 !important; text-decoration: underline; +} + +.kuiButton--secondary { + color: #006BB4 !important; border: solid 1px #006BB4; +} +.kuiButton--secondary:enabled:hover { + color: #004d81 !important; border: solid 1px #004d81; + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; +} +a.kuiButton--secondary:not(.kuiButton-isDisabled):hover { color: #004d81 !important; border: solid 1px #004d81; + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; +} + +.kuiButton--secondary:enabled:active { + color: #004d81 !important; border: solid 1px #004d81; + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; +} +a.kuiButton--secondary:not(.kuiButton-isDisabled):active { color: #004d81 !important; border: solid 1px #004d81; + background-color: rgba(0, 107, 180, 0.1); + text-decoration: underline; +} + +.kuiButtonGroup { + display: flex; + align-items: center; +} +.kuiButtonGroup .kuiButton + .kuiButton { + margin-left: 4px; +} + +.kuiButtonGroup--united > .kuiButton:not(:first-child):not(:last-child) { + border-radius: 0; +} +.kuiButtonGroup--united > .kuiButton:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.kuiButtonGroup--united > .kuiButton:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.kuiButtonGroup--united > .kuiButton:only-child { + border-radius: 4px 4px 4px 4px; +} +.kuiButtonGroup--united .kuiButton + .kuiButton { + margin-left: 0; +} + +.kuiButtonGroup--fullWidth { + display: flex; +} +.kuiButtonGroup--fullWidth > .kuiButton { + flex: 1 1 auto; + text-align: center; +} + +.eui-textCenter > .kuiButtonGroup, +.text-center > .kuiButtonGroup { + display: inline-block; +} + +.kuiCollapseButton { + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #343741 !important; cursor: pointer; + opacity: 0.35; +} +.kuiCollapseButton:hover { + opacity: 1; +} + +.kuiAssistedInput { + display: inline-block; position: relative; +} + +.kuiAssistedInput__assistance { + position: absolute; + right: 12px; + top: 50%; transform: translateY(-50%); } + +.kuiCheckBox { + appearance: none; background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; + width: 16px; + height: 16px; + font: var(--font-text) !important; line-height: 1.5 !important; margin: 0 !important; font-family: var(--font-text) !important; font-size: 10px !important; transition: background-color 0.1s linear; +} +.kuiCheckBox::before { + position: relative; + left: 0.25em; + font-family: FontAwesome, sans-serif; + content: "\f00c"; + font-size: 1em; + opacity: 0; + color: #FFF; + transition: opacity 0.1s linear; +} +.kuiCheckBox:checked { + border-color: #006BB4; + background-color: #006BB4; +} +.kuiCheckBox:checked::before { + opacity: 1; +} +.kuiCheckBox:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4; } +.kuiCheckBox:disabled { + background-color: #eef2f7 !important; + border-color: #eef2f7 !important; + cursor: not-allowed !important; +} + +.kuiCheckBoxLabel { + display: flex; + align-items: center; + font-weight: normal !important; + line-height: 1.5; +} + +.kuiCheckBoxLabel__text { + font-size: 16px; + margin-left: 8px; +} + +.kuiLabel { + font-size: 16px; + line-height: 1.5; + font-weight: bold; + margin-bottom: 0; } + +.kuiSearchInput { + width: 180px; + display: inline-block; + position: relative; + font-size: 16px; + line-height: 1.5; +} +.kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input { + border-color: #BD271E; +} + +.kuiSearchInput__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #98A2B3; +} + +.kuiSearchInput__input { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #343741; + background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; padding-left: 28px; width: 100%; } +.kuiSearchInput__input:invalid { + border-color: #BD271E; +} +.kuiSearchInput__input:focus { + outline: none; + border-color: #006BB4; +} +.kuiSearchInput__input:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.kuiSearchInput--small { + width: 60px; +} + +.kuiSearchInput--large { + width: 400px; +} + +.kuiSelect { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #343741; + background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; padding-right: 30px; background-image: url('data:image/svg+xml;utf8,'); background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); } +.kuiSelect:invalid { + border-color: #BD271E; +} +.kuiSelect:focus { + outline: none; + border-color: #006BB4; +} +.kuiSelect:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiSelect:-moz-focusring { + text-shadow: 0 0 0; } +.kuiSelect.kuiSelect-isInvalid { + border-color: #BD271E; +} +.kuiSelect:focus { + box-shadow: none; + outline: none; + border-color: #006BB4; +} + +.kuiSelect--small { + width: 60px; +} + +.kuiSelect--medium { + width: 180px; +} + +.kuiSelect--large { + width: 400px; +} + +.kuiStaticInput { + width: 180px; + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #343741; + border: 1px solid transparent; background-color: transparent; +} + +.kuiTextArea { + width: 180px; + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #343741; + background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; } +.kuiTextArea:invalid { + border-color: #BD271E; +} +.kuiTextArea:focus { + outline: none; + border-color: #006BB4; +} +.kuiTextArea:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiTextArea:focus { + box-shadow: none; + outline: none; + border-color: #006BB4; +} +.kuiTextArea.kuiTextArea-isInvalid { + border-color: #BD271E; +} + +.kuiTextArea--nonResizable { + resize: none; +} + +.kuiTextArea--small { + width: 60px; +} + +.kuiTextArea--large { + width: 400px; +} + +.kuiTextInput { + width: 180px; + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #343741; + background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; } +.kuiTextInput:invalid { + border-color: #BD271E; +} +.kuiTextInput:focus { + outline: none; + border-color: #006BB4; +} +.kuiTextInput:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiTextInput.kuiTextInput-isInvalid { + border-color: #BD271E; +} + +.kuiTextInput--small { + width: 60px; +} + +.kuiTextInput--large { + width: 400px; +} + +.kuiFieldGroup { + display: flex; + align-items: center; } + +.kuiFieldGroup--alignTop { + align-items: flex-start; +} + +.kuiFieldGroupSection { + line-height: 1.5; +} +.kuiFieldGroupSection + .kuiFieldGroupSection { + margin-left: 10px; +} + +.kuiFieldGroupSection--wide { + flex: 1 1 auto; +} +.kuiFieldGroupSection--wide > * { + width: 100%; +} + +.kuiIcon { + display: inline-block; font: normal normal normal 14px/1 FontAwesome, sans-serif; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +.kuiIcon--info { + color: #006BB4; +} + +.kuiIcon--success { + color: #017D73; +} + +.kuiIcon--warning { + color: #F5A700; +} + +.kuiIcon--error { + color: #BD271E; +} + +.kuiIcon--inactive { + color: #D3DAE6; +} + +.kuiIcon--basic { + color: #69707D; +} + +.kuiInfoPanel { + padding: 14px 20px 18px; + line-height: 1.5; + border: 2px solid; +} + +.kuiInfoPanel--info { + border-color: rgba(0, 107, 180, 0.25); } + +.kuiInfoPanel--success { + border-color: rgba(1, 125, 115, 0.25); } + +.kuiInfoPanel--warning { + border-color: rgba(245, 167, 0, 0.25); } + +.kuiInfoPanel--error { + border-color: rgba(189, 39, 30, 0.25); } + +.kuiInfoPanelHeader { + display: flex; + align-items: baseline; } + +.kuiInfoPanelHeader__icon { + margin-right: 10px; + font-size: 16px; + line-height: 1.5; +} + +.kuiInfoPanelHeader__title { + font-size: 16px; + line-height: 1.5; + font-weight: 700; +} + +.kuiInfoPanelBody { + margin-top: 8px; +} +.kuiInfoPanelBody > * + * { + margin-top: 8px; +} + +.kuiInfoPanelBody__message { + font-size: 16px; + line-height: 1.5; +} + +.kuiLink { + color: #006BB4; + text-decoration: none; + cursor: pointer; appearance: none; background-color: transparent; border: none; font-size: inherit; line-height: inherit; } +.kuiLink:visited, .kuiLink:active { + color: #006BB4; +} +.kuiLink:hover { + color: #004d81; + text-decoration: underline; +} + +.kuiLocalBreadcrumbs { + display: flex; + align-items: center; + padding: 12px 8px; border-bottom: 1px solid #D3DAE6; + flex-grow: 1; + flex-basis: 100%; + background-color: #FFF; +} + +.kuiLocalBreadcrumb { + font-size: 14px; + margin: 0; + font-weight: normal; +} +.kuiLocalBreadcrumb + .kuiLocalBreadcrumb { + margin-left: 6px; +} +.kuiLocalBreadcrumb + .kuiLocalBreadcrumb::before { + content: "/"; + user-select: none; + margin-right: 4px; + color: #D3DAE6; +} + +.kuiLocalBreadcrumb__link { + color: #006BB4; + text-decoration: none; + cursor: pointer; appearance: none; background-color: transparent; border: none; font-size: inherit; line-height: inherit; color: #006BB4; font-size: 16px; +} +.kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active { + color: #006BB4; +} +.kuiLocalBreadcrumb__link:hover { + color: #004d81; + text-decoration: underline; +} + +.kuiLocalBreadcrumb__emphasis { + font-weight: 700; +} + +.kuiDatePicker { + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; + line-height: 1.5; +} + +.kuiDatePickerNavigationCell { + padding: 0; +} + +.kuiDatePickerNavigation { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 4px; +} + +.kuiDatePickerNavigationButton { + appearance: none; + background-color: transparent; + border: none; + font-size: 14px; + color: #343741; + padding: 3px 6px; + border-radius: 4px; +} +.kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active { + cursor: pointer; + color: #F5F7FA; + background-color: #006BB4; +} +.kuiDatePickerNavigationButton:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4; color: #343741; } + +.kuiDatePickerHeaderCell { + padding: 9px 0; + color: #343741; + font-size: 14px; + font-weight: bold; + text-align: center; + line-height: 1.2; +} + +.kuiDatePickerRowCell { + padding: 0; + text-align: center; +} + +.kuiDatePickerRowCellContent { + appearance: none; + background-color: transparent; + width: 100%; + border: 1px solid transparent; + color: #343741; + font-size: 14px; + padding: 8px; + border-radius: 4px; + line-height: 1.2; +} +.kuiDatePickerRowCellContent:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px transparent, 0 0 0 2px #006BB4; color: #343741; } +.kuiDatePickerRowCellContent:disabled { + pointer-events: none; + opacity: 0.5; +} +.kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isOtherMonth { + visibility: hidden; + pointer-events: none; +} +.kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { + color: #006BB4; +} +.kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { + background-color: #69707D; + color: #343741; +} +.kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active { + cursor: pointer; + color: #F5F7FA; + background-color: #006BB4; +} + +.kuiLocalDropdown { + position: relative; + padding: 10px 8px 14px; + background-color: transparent; + margin-bottom: 10px; + line-height: 20px; +} + +.kuiLocalDropdownCloseButton { + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #343741 !important; cursor: pointer; + opacity: 0.35; + position: absolute; + top: 1px; + right: 5px; +} +.kuiLocalDropdownCloseButton:hover { + opacity: 1; +} + +.kuiLocalDropdownPanels { + display: flex; +} + +.kuiLocalDropdownPanel { + flex: 1 1 0%; +} + +.kuiLocalDropdownPanel--left { + margin-right: 30px; +} + +.kuiLocalDropdownPanel--right { + margin-left: 30px; +} + +.kuiLocalDropdownTitle { + margin-top: 0; margin-bottom: 12px; + font-size: 18px; + color: #343741; +} + +.kuiLocalDropdownSection { + margin-bottom: 16px; +} +.kuiLocalDropdownSection:last-child { + margin-bottom: 0; +} + +.kuiLocalDropdownHeader { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 6px; +} + +.kuiLocalDropdownHeader__label { + font-size: 14px; + font-weight: 700; + margin-bottom: 0; color: #343741; +} + +.kuiLocalDropdownHeader__actions { + display: flex; +} + +.kuiLocalDropdownHeader__action { + color: #006BB4; + font-size: 12px; + text-decoration: none; + cursor: pointer; +} +.kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action { + margin-left: 10px; +} +.kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active { + color: #004d81; +} + +.kuiLocalDropdownInput { + display: block; + width: 100%; + margin-bottom: 12px; + padding: 5px 15px; + font-size: 14px; + color: #343741; + background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; +} +.kuiLocalDropdownInput:focus { + border-color: #006BB4; +} + +.kuiLocalDropdownFormNote { + font-size: 14px; + color: #69707D; +} + +.kuiLocalDropdownWarning { + margin-bottom: 16px; + padding: 6px 10px; + font-size: 14px; + color: #343741; + background-color: #FFF; + border-left: solid 2px #BD271E; +} + +.kuiLocalDropdownHelpText { + margin-bottom: 16px; + font-size: 14px; + color: #69707D; +} + +.kuiLocalMenu { + display: flex; + align-items: stretch; + padding-top: 8px; + padding-bottom: 8px; +} + +.kuiLocalMenuItem { + display: flex; + align-items: center; + padding: 2px 8px; + font-size: 16px; + background-color: transparent; + color: #343741; + border: 0; + cursor: pointer; + border-bottom: solid 2px transparent; +} +.kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus { + background-color: rgba(0, 107, 180, 0.15); + text-decoration: underline; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isSelected { + color: #006BB4; + background-color: transparent; + border-color: #006BB4; + z-index: 2; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus { + text-decoration: none; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { + opacity: 0.5; + cursor: not-allowed; +} +.kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { + background-color: transparent; + text-decoration: none; +} + +.kuiLocalMenuItem__icon { + margin-right: 5px; + margin-bottom: -1px; +} + +.kuiLocalNav { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 69px; color: #343741; + background-color: #FFF; + line-height: 1.5; + border-bottom: solid 1px #D3DAE6; +} + +.kuiLocalNavRow { + display: flex; + align-items: stretch; + justify-content: space-between; +} + +.kuiLocalNavRow__section { + display: flex; + align-items: stretch; +} + +.kuiLocalNavRow--secondary { + padding: 0 8px; align-items: flex-start; } + +.kuiLocalSearch { + display: flex; + width: 100%; + margin-bottom: 8px; +} + +.kuiLocalSearchInput { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #343741; + background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; flex: 1 1 100%; + border-color: #FFF; + border-color: #D3DAE6; + border-radius: 4px 0 0 4px; +} +.kuiLocalSearchInput:invalid { + border-color: #BD271E; +} +.kuiLocalSearchInput:focus { + outline: none; + border-color: #006BB4; +} +.kuiLocalSearchInput:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiLocalSearchInput:focus { + box-shadow: none; +} +.kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { + border-color: #BD271E; +} + +.kuiLocalSearchInput--secondary { + height: 32px; + flex: 0 0 auto; + border-radius: 0; + border-left-width: 0; +} + +.kuiLocalSearchInput, +.kuiLocalSearchAssistedInput__input { + padding-right: 6em; } + +.kuiLocalSearchAssistedInput__assistance { + position: absolute; + right: 6px; + top: 50%; z-index: 2; + transform: translateY(-50%); } + +.kuiLocalSearchSelect { + appearance: none; + font-family: var(--font-text); + padding: 4px 12px 4px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #343741; + background-color: #fbfcfd; + border: 1px solid rgba(16, 38, 118, 0.1); + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 32px; padding-right: 30px; background-image: url('data:image/svg+xml;utf8,'); background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); border-left-width: 0; + border-radius: 0; +} +.kuiLocalSearchSelect:invalid { + border-color: #BD271E; +} +.kuiLocalSearchSelect:focus { + outline: none; + border-color: #006BB4; +} +.kuiLocalSearchSelect:disabled { + opacity: 0.4; + cursor: not-allowed; +} +.kuiLocalSearchSelect:-moz-focusring { + text-shadow: 0 0 0; } + +.kuiLocalSearchButton { + width: 43px; + height: 32px; + font-size: 16px; + line-height: 0; color: #FFF; + background-color: #006BB4; + border: 0; + border-radius: 0 4px 4px 0; +} +.kuiLocalSearchButton:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; } + +.kuiLocalTabs { + display: flex; + align-items: flex-end; + height: 100%; +} + +.kuiLocalTab { + padding: 5px 0 6px; + font-size: 18px; + color: #343741; + border-bottom: 2px solid transparent; + text-decoration: none; + cursor: pointer; + margin-top: 0 !important; margin-bottom: 0 !important; } +.kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { + color: #006BB4; +} +.kuiLocalTab.kuiLocalTab-isSelected { + color: #006BB4; + border-bottom-color: #006BB4; + cursor: default; +} +.kuiLocalTab.kuiLocalTab-isDisabled { + opacity: 0.5; + cursor: default; } +.kuiLocalTab + .kuiLocalTab { + margin-left: 15px; +} + +.kuiLocalTitle { + display: flex; + align-items: center; + padding: 12px 8px; + font-size: 16px; + font-weight: bold; + border-bottom: 1px solid #D3DAE6; + flex-grow: 1; + flex-basis: 100%; + background-color: #FFF; +} +.kuiLocalTitle:empty { + padding: 0; + display: none; +} + +.kuiPager { + display: flex; + align-items: center; +} +.kuiPager > * + * { + margin-left: 10px; } + +.kuiPagerText { + font-size: 16px; + line-height: 1.5; + color: #69707D; + white-space: nowrap; } + +.kuiPanel { + box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3); + background-color: #FFF; + border: 1px solid #D3DAE6; + border-radius: 4px; +} + +.kuiPanel--prompt { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + min-height: 300px; +} +.kuiPanel--prompt .kuiPanelBody { + padding: 30px; + max-width: 500px; +} + +.kuiPanel--noBorder { + border: none; +} + +.kuiPanel--withToolBar { + border-top: none; + border-radius: 0; +} + +.kuiPanel--centered { + display: flex; + justify-content: center; + align-items: center; +} + +.kuiPanelHeader { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; padding: 10px; + height: 50px; + border-bottom: 1px solid #D3DAE6; +} +.kuiPanelHeader .kuiButton:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; } +a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; } + +.kuiPanelHeader .kuiButton--danger:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; } +a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; } + +.kuiPanelHeader .kuiSelect { + border-color: #fbfcfd; +} +.kuiPanelHeader .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #006BB4; +} +a.kuiPanelHeader .kuiSelect:not(.kuiButton-isDisabled):focus { outline: none; + border-color: #006BB4; +} + +.kuiPanelHeader__title { + font-size: 20px; + line-height: 1.5; + margin: 0; } + +.kuiPanelHeaderSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiPanelHeaderSection:first-child { + margin-left: 0; +} +.kuiPanelHeaderSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiPanelHeaderSection:only-child { + margin-left: auto; } +.kuiPanelHeaderSection > * + * { + margin-left: 10px; } +.kuiPanelHeaderSection:only-child { + margin-left: 0; margin-right: auto; } + +.kuiPanelBody { + padding: 10px; +} + +.kuiEmptyTablePrompt { + display: flex; + flex-direction: column; + align-items: center; + padding: 30px; +} + +.kuiEmptyTablePrompt__message { + font-size: 20px; + color: #69707D; + line-height: 1.5; +} + +.kuiEmptyTablePrompt__actions { + margin-top: 10px; +} + +.kuiStatusText { + display: inline-flex; + align-items: baseline; +} + +.kuiStatusText--info { + color: #006BB4; +} + +.kuiStatusText--success { + color: #017D73; +} + +.kuiStatusText--warning { + color: #F5A700; +} + +.kuiStatusText--error { + color: #BD271E; +} + +.kuiStatusText__icon { + margin-right: 6px; + width: 1.15em; max-height: 1.15em; } + +.kuiControlledTable { + background: #FFF; +} +.kuiControlledTable .kuiTable { + border-top: none; } +.kuiControlledTable .kuiToolBarFooter { + border-top: none; } +.kuiControlledTable .kuiMenu--contained { + border-top: none; } + +.kuiTable { + width: 100%; + border: 1px solid #D3DAE6; + border-collapse: collapse; + background-color: #FFF; +} + +.kuiTable--fluid { + width: auto; } +.kuiTable--fluid .kuiTableHeaderCell, +.kuiTable--fluid .kuiTableRowCell { + max-width: none; } + +.kuiTableHeaderCell { + font-size: 16px; + font-weight: 400; + text-align: left; + max-width: 20px; line-height: 1.5; + color: #69707D; +} + +.kuiTableHeaderCell__liner { + display: inline-block; + padding: 7px 8px 8px; +} + +.kuiTableHeaderCellButton { + user-select: none; cursor: pointer; + width: 100%; + appearance: none; background-color: transparent; border: 0; padding: 0; color: inherit; line-height: inherit; font-size: inherit; text-align: inherit; } +.kuiTableHeaderCellButton:hover .kuiTableSortIcon { + display: block; + opacity: 1; +} +.kuiTableHeaderCellButton .kuiTableHeaderCell__liner { + display: flex; + align-items: center; +} + +.kuiTableHeaderCell--alignRight { + text-align: right; +} + +.kuiTableSortIcon { + display: none; + pointer-events: none; + margin-left: 4px; +} +.kuiTableHeaderCellButton-isSorted .kuiTableSortIcon { + display: block; + opacity: 0.4; +} + +.kuiTableRow:hover .kuiTableRowHoverReveal { + display: inline-block; +} + +.kuiTableRowHoverReveal { + display: none; +} + +.kuiTableRowCell { + font-size: 16px; + font-weight: 400; + text-align: left; + max-width: 20px; color: #343741; + border-top: 1px solid #D3DAE6; + vertical-align: middle; +} + +.kuiTableRowCell__liner { + padding: 7px 8px 8px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.kuiTableRowCell__liner > * { + vertical-align: middle; } + +.kuiTableRowCell--wrap .kuiTableRowCell__liner { + white-space: normal; +} + +.kuiTableRowCell--overflowingContent .kuiTableRowCell__liner { + overflow: visible; + white-space: normal; +} + +.kuiTableRowCell--expanded { + border-top-color: #FFF; } + +.kuiTableRowCell--alignRight { + text-align: right; +} +.kuiTableRowCell--alignRight .kuiTableRowCell__liner { + text-align: right; +} + +.kuiTableHeaderCell--checkBox, +.kuiTableRowCell--checkBox { + width: 28px; line-height: 1; } +.kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, +.kuiTableRowCell--checkBox .kuiTableRowCell__liner { + overflow: visible; } +.kuiTableHeaderCell--checkBox .kuiTableHeaderCell__liner, +.kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, +.kuiTableRowCell--checkBox .kuiTableHeaderCell__liner, +.kuiTableRowCell--checkBox .kuiTableRowCell__liner { + padding-right: 0; +} + +.kuiTableInfo { + padding: 30px; + font-size: 20px; + color: #69707D; + line-height: 1.5; +} + +.kuiTabs { + display: flex; + border-bottom: 1px solid #D3DAE6; +} + +.kuiTab { + appearance: none; cursor: pointer; + padding: 10px 30px; + font-size: 16px; + color: #69707D; + background-color: transparent; border: 1px solid #D3DAE6; + border-radius: 0; margin-bottom: -1px; } +.kuiTab + .kuiTab { + border-left: none; +} +.kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + margin-left: -1px; } +.kuiTab:active { + outline: none !important; box-shadow: none; } +.kuiTab:focus { + outline: none; } +.kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + z-index: 1; + color: #006BB4; + border: 1px solid #006BB4 !important; +} +.kuiTab:hover:not(.kuiTab-isSelected) { + color: #004d81; + background-color: #F5F7FA; +} +.kuiTab.kuiTab-isSelected { + cursor: default; + color: #343741; + background-color: transparent; + border-bottom-color: transparent; +} + +.kuiToolBar { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; padding: 10px; + height: 50px; + background-color: transparent; + border: solid 1px #D3DAE6; +} +.kuiToolBar .kuiButton:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; } +a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #006BB4; } + +.kuiToolBar .kuiButton--danger:not(a):enabled:focus { + z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; } +a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus { z-index: 1; outline: none !important; box-shadow: 0 0 0 1px #D3DAE6, 0 0 0 2px #BD271E; } + +.kuiToolBar .kuiSelect { + border-color: #fbfcfd; +} +.kuiToolBar .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #006BB4; +} +a.kuiToolBar .kuiSelect:not(.kuiButton-isDisabled):focus { outline: none; + border-color: #006BB4; +} + +.kuiToolBarSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiToolBarSection:first-child { + margin-left: 0; +} +.kuiToolBarSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiToolBarSection:only-child { + margin-left: auto; } +.kuiToolBarSection > * + * { + margin-left: 10px; } + +.kuiToolBar--searchOnly .kuiToolBarSearch { + margin-left: 0 !important; } + +.kuiToolBarFooter { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 30px; padding: 10px; + height: 40px; + background-color: #FFF; +} + +.kuiToolBarFooterSection { + display: flex; + align-items: center; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; +} +.kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) { + justify-content: center; } +.kuiToolBarFooterSection:first-child { + margin-left: 0; +} +.kuiToolBarFooterSection:last-child { + margin-right: 0; + flex: 0 1 auto; justify-content: flex-end; } +.kuiToolBarFooterSection:only-child { + margin-left: auto; } +.kuiToolBarFooterSection > * + * { + margin-left: 10px; } + +.kuiToolBarSearch { + display: flex; + align-items: center; + margin-left: 25px; + margin-right: 25px; + flex: 1 1 auto; + max-width: 100%; line-height: 1.5; +} +.kuiToolBarSearch:first-child { + margin-left: 0; +} +.kuiToolBarSearch:last-child { + margin-right: 0; +} +.kuiToolBarSearch > * + * { + margin-left: 10px; } + +.kuiToolBarSearchBox { + flex: 1 1 auto; + position: relative; + font-size: 16px; + max-width: 800px; +} + +.kuiToolBarSearchBox__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #acacac; +} + +.kuiToolBarSearchBox__input { + width: 100%; + min-width: 200px; + padding: 4px 12px 5px 28px; + font-family: var(--font-text); background-color: #FFF; + color: #343741; + border-radius: 4px; + font-size: 1em; + border: 1px solid #D3DAE6; + line-height: normal; transition: border-color 0.1s linear; +} +.kuiToolBarSearchBox__input:focus { + outline: none; + border-color: #006BB4; +} + +.kuiToolBarText { + font-size: 16px; + line-height: 1.5; + color: #69707D; + white-space: nowrap; } + +.kuiTitle { + margin: 0; font-weight: 400; font-size: 24px; +} + +.kuiSubTitle { + margin: 0; font-weight: 400; font-size: 20px; +} + +.kuiTextTitle { + margin: 0; font-weight: 700; line-height: 1.5; + font-size: 16px; +} + +.kuiText { + margin: 0; font-weight: 400; line-height: 1.5; + font-size: 16px; +} + +.kuiSubText { + margin: 0; font-weight: 400; line-height: 1.5; + font-size: 14px; +} + +.kuiSubduedText { + color: #69707D !important; +} + +.kuiVerticalRhythm + .kuiVerticalRhythm { + margin-top: 16px; +} + +.kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall { + margin-top: 8px; +} + +.kuiVerticalRhythmLarge + .kuiVerticalRhythmLarge { + margin-top: 24px; +} + +.kuiVerticalRhythmXLarge + .kuiVerticalRhythmXLarge { + margin-top: 32px; +} + +.kuiView { + background-color: #fff; + flex: 1 1 auto; +} + +.kuiViewContent { + padding-top: 20px; + padding-bottom: 20px; + width: 100%; +} + +.kuiViewContent--constrainedWidth { + width: 100%; + max-width: 1100px; + margin-left: auto; + margin-right: auto; +} + +.kuiViewContentItem { + padding-left: 20px; + padding-right: 20px; +} diff --git a/packages/osd-ui-framework/src/kui_v9_dark.scss b/packages/osd-ui-framework/src/kui_v9_dark.scss new file mode 100644 index 00000000000..fe1338cf9b6 --- /dev/null +++ b/packages/osd-ui-framework/src/kui_v9_dark.scss @@ -0,0 +1,15 @@ +// EUI global scope is used for KUI variables till fully deprecated +@import "../../../node_modules/@elastic/eui/src/themes/v9/v9_colors_dark"; +@import "../../../node_modules/@elastic/eui/src/global_styling/functions/index"; +@import "../../../node_modules/@elastic/eui/src/global_styling/variables/index"; +@import "../../../node_modules/@elastic/eui/src/global_styling/mixins/index"; + +// Configuration +@import "global_styling/variables/index"; + +// Coreß +@import "global_styling/mixins/index"; +@import "global_styling/reset/index"; + +// Components +@import "components/index"; diff --git a/packages/osd-ui-framework/src/kui_v9_light.scss b/packages/osd-ui-framework/src/kui_v9_light.scss new file mode 100644 index 00000000000..535be1bf1bf --- /dev/null +++ b/packages/osd-ui-framework/src/kui_v9_light.scss @@ -0,0 +1,15 @@ +// EUI global scope is used for KUI variables till fully deprecated +@import "../../../node_modules/@elastic/eui/src/themes/v9/v9_colors_light"; +@import "../../../node_modules/@elastic/eui/src/global_styling/functions/index"; +@import "../../../node_modules/@elastic/eui/src/global_styling/variables/index"; +@import "../../../node_modules/@elastic/eui/src/global_styling/mixins/index"; + +// Configuration +@import "global_styling/variables/index"; + +// Core +@import "global_styling/mixins/index"; +@import "global_styling/reset/index"; + +// Components +@import "components/index"; diff --git a/packages/osd-ui-shared-deps/theme.test.ts b/packages/osd-ui-shared-deps/theme.test.ts new file mode 100644 index 00000000000..1786f53af58 --- /dev/null +++ b/packages/osd-ui-shared-deps/theme.test.ts @@ -0,0 +1,17 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +describe('@osd/ui-shared-deps/theme', () => { + it('should return variables for each theme', async () => { + const oldTag = global.__osdThemeTag__; + for (const v of ['v7', 'v8', 'v9']) { + global.__osdThemeTag__ = `${v}light`; + const { euiThemeVars } = await import('./theme'); + expect(euiThemeVars).toBeTruthy(); + jest.resetModules(); + } + global.__osdThemeTag__ = oldTag; + }); +}); diff --git a/packages/osd-ui-shared-deps/theme.ts b/packages/osd-ui-shared-deps/theme.ts index 082f468175e..cf769ab3f94 100644 --- a/packages/osd-ui-shared-deps/theme.ts +++ b/packages/osd-ui-shared-deps/theme.ts @@ -47,6 +47,9 @@ export let euiDarkVars: Theme; if (themeVersion === 'v7') { euiLightVars = require('@elastic/eui/dist/eui_theme_light.json'); euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json'); +} else if (themeVersion === 'v9') { + euiLightVars = require('@elastic/eui/dist/eui_theme_v9_light.json'); + euiDarkVars = require('@elastic/eui/dist/eui_theme_v9_dark.json'); } else { euiLightVars = require('@elastic/eui/dist/eui_theme_next_light.json'); euiDarkVars = require('@elastic/eui/dist/eui_theme_next_dark.json'); diff --git a/packages/osd-ui-shared-deps/theme_config.d.ts b/packages/osd-ui-shared-deps/theme_config.d.ts index 0ca80280434..ff88a4965ac 100644 --- a/packages/osd-ui-shared-deps/theme_config.d.ts +++ b/packages/osd-ui-shared-deps/theme_config.d.ts @@ -7,7 +7,7 @@ * Types for valid theme tags (themeVersion + themeMode) * Note: used by @osd/optimizer */ -export type ThemeTag = 'v7light' | 'v7dark' | 'v8light' | 'v8dark'; +export type ThemeTag = 'v7light' | 'v7dark' | 'v8light' | 'v8dark' | 'v9light' | 'v9dark'; export type ThemeTags = readonly ThemeTag[]; /** diff --git a/packages/osd-ui-shared-deps/theme_config.js b/packages/osd-ui-shared-deps/theme_config.js index f128925bbbc..0ccd422e321 100644 --- a/packages/osd-ui-shared-deps/theme_config.js +++ b/packages/osd-ui-shared-deps/theme_config.js @@ -14,6 +14,7 @@ const THEME_MODES = ['light', 'dark']; const THEME_VERSION_LABEL_MAP = { v7: 'v7', v8: 'Next (preview)', + v9: 'v9 (preview)', }; const THEME_VERSION_VALUE_MAP = { // allow version lookup by label ... @@ -41,4 +42,5 @@ exports.themeCssDistFilenames = THEME_VERSIONS.reduce((map, v) => { exports.kuiCssDistFilenames = { v7: { dark: 'kui_dark.css', light: 'kui_light.css' }, v8: { dark: 'kui_next_dark.css', light: 'kui_next_light.css' }, + v9: { dark: 'kui_v9_dark.css', light: 'kui_v9_light.css' }, }; diff --git a/packages/osd-ui-shared-deps/webpack.config.js b/packages/osd-ui-shared-deps/webpack.config.js index 80e7aeef9c4..91140cb32c7 100644 --- a/packages/osd-ui-shared-deps/webpack.config.js +++ b/packages/osd-ui-shared-deps/webpack.config.js @@ -47,6 +47,8 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({ 'osd-ui-shared-deps.v7.light': ['@elastic/eui/dist/eui_theme_light.css'], 'osd-ui-shared-deps.v8.dark': ['@elastic/eui/dist/eui_theme_next_dark.css'], 'osd-ui-shared-deps.v8.light': ['@elastic/eui/dist/eui_theme_next_light.css'], + 'osd-ui-shared-deps.v9.dark': ['@elastic/eui/dist/eui_theme_v9_dark.css'], + 'osd-ui-shared-deps.v9.light': ['@elastic/eui/dist/eui_theme_v9_light.css'], }, context: __dirname, devtool: dev ? '#cheap-source-map' : false, diff --git a/src/core/public/core_app/styles/_globals_v9dark.scss b/src/core/public/core_app/styles/_globals_v9dark.scss new file mode 100644 index 00000000000..ba3a02ca392 --- /dev/null +++ b/src/core/public/core_app/styles/_globals_v9dark.scss @@ -0,0 +1,7 @@ +// v8dark global scope +// --- +// prepended to all .scss imports (from JS, when v8dark theme selected) + +@import "@elastic/eui/src/themes/v9/v9_colors_dark"; +@import "@elastic/eui/src/themes/v9/v9_globals"; +@import "./mixins"; diff --git a/src/core/public/core_app/styles/_globals_v9light.scss b/src/core/public/core_app/styles/_globals_v9light.scss new file mode 100644 index 00000000000..74c238b5378 --- /dev/null +++ b/src/core/public/core_app/styles/_globals_v9light.scss @@ -0,0 +1,7 @@ +// v8light global scope +// --- +// prepended to all .scss imports (from JS, when v8light theme selected) + +@import "@elastic/eui/src/themes/v9/v9_colors_light"; +@import "@elastic/eui/src/themes/v9/v9_globals"; +@import "./mixins"; diff --git a/src/core/server/core_app/assets/fonts/fira_code/FiraCode-VariableFont_wght.ttf b/src/core/server/core_app/assets/fonts/fira_code/FiraCode-VariableFont_wght.ttf new file mode 100644 index 00000000000..5655ed51458 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/FiraCode-VariableFont_wght.ttf differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/LICENSE.txt b/src/core/server/core_app/assets/fonts/fira_code/LICENSE.txt new file mode 100644 index 00000000000..0e38b887465 --- /dev/null +++ b/src/core/server/core_app/assets/fonts/fira_code/LICENSE.txt @@ -0,0 +1,93 @@ +Copyright 2014-2020 The Fira Code Project Authors (https://github.com/tonsky/FiraCode) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Bold.ttf b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Bold.ttf new file mode 100644 index 00000000000..9a3d65fb992 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Bold.ttf differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Bold.woff2 b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Bold.woff2 new file mode 100644 index 00000000000..756df39b7c2 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Bold.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Light.ttf b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Light.ttf new file mode 100644 index 00000000000..87ff0124b15 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Light.ttf differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Light.woff2 b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Light.woff2 new file mode 100644 index 00000000000..45b13cf711c Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Light.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Medium.ttf b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Medium.ttf new file mode 100644 index 00000000000..7a9c38e0461 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Medium.ttf differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Medium.woff2 b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Medium.woff2 new file mode 100644 index 00000000000..7db136c1862 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Medium.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Regular.ttf b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Regular.ttf new file mode 100644 index 00000000000..b8a44d2db0a Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Regular.ttf differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Regular.woff2 b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Regular.woff2 new file mode 100644 index 00000000000..f28816fbdc4 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-Regular.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-SemiBold.ttf b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-SemiBold.ttf new file mode 100644 index 00000000000..45cfed7168b Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-SemiBold.ttf differ diff --git a/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-SemiBold.woff2 b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-SemiBold.woff2 new file mode 100644 index 00000000000..0ba50b9373a Binary files /dev/null and b/src/core/server/core_app/assets/fonts/fira_code/static/FiraCode-SemiBold.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/readme.md b/src/core/server/core_app/assets/fonts/readme.md index dd77b8b2ce9..c6e246c1037 100644 --- a/src/core/server/core_app/assets/fonts/readme.md +++ b/src/core/server/core_app/assets/fonts/readme.md @@ -1,6 +1,9 @@ ## Font usage -OpenSearch Dashboards packages four fonts: +OpenSearch Dashboards packages these fonts: + +* [Rubik](https://fonts.google.com/specimen/Rubik) was pulled from the Google Fonts website on August 8th, 2024. +* [Fira Code](https://fonts.google.com/specimen/Fira+Code) was pulled from the Google Fonts website on August 8th, 2024. * [Source Sans 3](https://github.com/adobe-fonts/source-sans) v3.052 * [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) upright v2.042 and italic v1.062. @@ -8,4 +11,4 @@ OpenSearch Dashboards packages four fonts: * [Inter UI](https://rsms.me/inter/) fonts were pulled from their site and are at v3.2 * [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) was pulled from the Google Fonts website on January 22, 2019. -Licenses for both can be found in the folders below this root. +Licenses for these can be found in the folders below this root. diff --git a/src/core/server/core_app/assets/fonts/rubik/LICENSE.txt b/src/core/server/core_app/assets/fonts/rubik/LICENSE.txt new file mode 100644 index 00000000000..e9f5f00edb4 --- /dev/null +++ b/src/core/server/core_app/assets/fonts/rubik/LICENSE.txt @@ -0,0 +1,93 @@ +Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/core/server/core_app/assets/fonts/rubik/Rubik-Italic-VariableFont_wght.ttf b/src/core/server/core_app/assets/fonts/rubik/Rubik-Italic-VariableFont_wght.ttf new file mode 100644 index 00000000000..36dbec5fc15 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/Rubik-Italic-VariableFont_wght.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/Rubik-VariableFont_wght.ttf b/src/core/server/core_app/assets/fonts/rubik/Rubik-VariableFont_wght.ttf new file mode 100644 index 00000000000..bbab349a269 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/Rubik-VariableFont_wght.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Black.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Black.ttf new file mode 100644 index 00000000000..055ad2205d2 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Black.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Black.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Black.woff2 new file mode 100644 index 00000000000..bbf03e452f6 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Black.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BlackItalic.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BlackItalic.ttf new file mode 100644 index 00000000000..308529cba2b Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BlackItalic.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BlackItalic.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BlackItalic.woff2 new file mode 100644 index 00000000000..8f798f05f5b Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BlackItalic.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Bold.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Bold.ttf new file mode 100644 index 00000000000..1a9693d97fe Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Bold.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Bold.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Bold.woff2 new file mode 100644 index 00000000000..fa1cebe5708 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Bold.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BoldItalic.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BoldItalic.ttf new file mode 100644 index 00000000000..abf760439be Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BoldItalic.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BoldItalic.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BoldItalic.woff2 new file mode 100644 index 00000000000..bbcffcada2f Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-BoldItalic.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBold.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBold.ttf new file mode 100644 index 00000000000..3b1e1903613 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBold.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBold.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBold.woff2 new file mode 100644 index 00000000000..877fb4d05d3 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBold.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBoldItalic.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBoldItalic.ttf new file mode 100644 index 00000000000..59cd758652c Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBoldItalic.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBoldItalic.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBoldItalic.woff2 new file mode 100644 index 00000000000..8ddb17f0112 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-ExtraBoldItalic.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Italic.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Italic.ttf new file mode 100644 index 00000000000..1683a763ee6 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Italic.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Italic.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Italic.woff2 new file mode 100644 index 00000000000..b946bfec360 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Italic.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Light.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Light.ttf new file mode 100644 index 00000000000..8a5a50ab637 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Light.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Light.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Light.woff2 new file mode 100644 index 00000000000..03520b723f6 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Light.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-LightItalic.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-LightItalic.ttf new file mode 100644 index 00000000000..b028d93c857 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-LightItalic.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-LightItalic.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-LightItalic.woff2 new file mode 100644 index 00000000000..385470225ea Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-LightItalic.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Medium.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Medium.ttf new file mode 100644 index 00000000000..f0bd59588f5 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Medium.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Medium.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Medium.woff2 new file mode 100644 index 00000000000..5a274c43719 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Medium.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-MediumItalic.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-MediumItalic.ttf new file mode 100644 index 00000000000..1a7d7f9f675 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-MediumItalic.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-MediumItalic.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-MediumItalic.woff2 new file mode 100644 index 00000000000..69e661b0265 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-MediumItalic.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Regular.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Regular.ttf new file mode 100644 index 00000000000..8b7b632f9c0 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Regular.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Regular.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Regular.woff2 new file mode 100644 index 00000000000..0c3320c12cb Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-Regular.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBold.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBold.ttf new file mode 100644 index 00000000000..26f657de75a Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBold.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBold.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBold.woff2 new file mode 100644 index 00000000000..bb0c5806283 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBold.woff2 differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBoldItalic.ttf b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBoldItalic.ttf new file mode 100644 index 00000000000..88729833c30 Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBoldItalic.ttf differ diff --git a/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBoldItalic.woff2 b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBoldItalic.woff2 new file mode 100644 index 00000000000..1b2bd0ed5df Binary files /dev/null and b/src/core/server/core_app/assets/fonts/rubik/static/Rubik-SemiBoldItalic.woff2 differ diff --git a/src/core/server/rendering/views/fonts.tsx b/src/core/server/rendering/views/fonts.tsx index 6ff3a4c272e..8fd3dac126d 100644 --- a/src/core/server/rendering/views/fonts.tsx +++ b/src/core/server/rendering/views/fonts.tsx @@ -50,6 +50,113 @@ interface FontFace { } export const Fonts: FunctionComponent = ({ url }) => { + // For v9 theme + const rubik: FontFace = { + family: 'Rubik', + variants: [ + { + weight: 300, + style: 'normal', + sources: [`${url}/fonts/rubik/static/Rubik-Light.woff2`], + }, + { + weight: 300, + style: 'italic', + sources: [`${url}/fonts/rubik/static/Rubik-LightItalic.woff2`], + }, + { + weight: 400, + style: 'normal', + sources: [`${url}/fonts/rubik/static/Rubik-Regular.woff2`], + }, + { + weight: 400, + style: 'italic', + sources: [`${url}/fonts/rubik/static/Rubik-Italic.woff2`], + }, + { + weight: 500, + style: 'normal', + sources: [`${url}/fonts/rubik/static/Rubik-Medium.woff2`], + }, + { + weight: 500, + style: 'italic', + sources: [`${url}/fonts/rubik/static/Rubik-MediumItalic.woff2`], + }, + { + weight: 600, + style: 'normal', + sources: [`${url}/fonts/rubik/static/Rubik-SemiBold.woff2`], + }, + { + weight: 600, + style: 'italic', + sources: [`${url}/fonts/rubik/static/Rubik-SemiBoldItalic.woff2`], + }, + { + weight: 700, + style: 'normal', + sources: [`${url}/fonts/rubik/static/Rubik-Bold.woff2`], + }, + { + weight: 700, + style: 'italic', + sources: [`${url}/fonts/rubik/static/Rubik-BoldItalic.woff2`], + }, + { + weight: 800, + style: 'normal', + sources: [`${url}/fonts/rubik/static/Rubik-ExtraBold.woff2`], + }, + { + weight: 800, + style: 'italic', + sources: [`${url}/fonts/rubik/static/Rubik-ExtraBoldItalic.woff2`], + }, + { + weight: 900, + style: 'normal', + sources: [`${url}/fonts/rubik/static/Rubik-Black.woff2`], + }, + { + weight: 900, + style: 'italic', + sources: [`${url}/fonts/rubik/static/Rubik-BlackItalic.woff2`], + }, + ], + }; + const firaCode: FontFace = { + family: 'Fira Code', + variants: [ + { + weight: 300, + style: 'normal', + sources: [`${url}/fonts/fira_code/static/FiraCode-Light.woff2`], + }, + { + weight: 400, + style: 'normal', + sources: [`${url}/fonts/fira_code/static/FiraCode-Regular.woff2`], + }, + { + weight: 500, + style: 'normal', + sources: [`${url}/fonts/fira_code/static/FiraCode-Medium.woff2`], + }, + { + weight: 600, + style: 'normal', + sources: [`${url}/fonts/fira_code/static/FiraCode-SemiBold.woff2`], + }, + { + weight: 700, + style: 'normal', + sources: [`${url}/fonts/fira_code/static/FiraCode-Bold.woff2`], + }, + ], + }; + // For next theme const sourceSans3: FontFace = { family: 'Source Sans 3', @@ -531,7 +638,7 @@ export const Fonts: FunctionComponent = ({ url }) => { url('${url}/fonts/inter_ui/Inter-UI-italic.var.woff2') format('woff2'); } */ - const fontsDefinitionRules = [interUi, sourceSans3, roboto, sourceCodePro] + const fontsDefinitionRules = [interUi, sourceSans3, roboto, sourceCodePro, rubik, firaCode] .flatMap(({ family, variants }) => variants.map(({ style, weight, format, sources, unicodeRange }) => { const src = sources diff --git a/src/core/server/ui_settings/settings/theme.test.ts b/src/core/server/ui_settings/settings/theme.test.ts index 0f0d8915833..05c07372d1a 100644 --- a/src/core/server/ui_settings/settings/theme.test.ts +++ b/src/core/server/ui_settings/settings/theme.test.ts @@ -59,10 +59,12 @@ describe('theme settings', () => { expect(() => validate('v7')).not.toThrow(); expect(() => validate('Next (preview)')).not.toThrow(); expect(() => validate('v12')).toThrowErrorMatchingInlineSnapshot(` -"types that failed validation: -- [0]: expected value to equal [v7] -- [1]: expected value to equal [Next (preview)]" -`); + "types that failed validation: + - [0]: expected value to equal [v7] + - [1]: expected value to equal [v8] + - [2]: expected value to equal [v9] + - [3]: expected value to equal [Next (preview)]" + `); }); }); }); diff --git a/src/core/server/ui_settings/settings/theme.ts b/src/core/server/ui_settings/settings/theme.ts index 8e379d9454a..3f0af93aa5b 100644 --- a/src/core/server/ui_settings/settings/theme.ts +++ b/src/core/server/ui_settings/settings/theme.ts @@ -35,6 +35,12 @@ import type { Type } from '@osd/config-schema'; import { UiSettingsParams } from '../../../types'; import { DEFAULT_THEME_VERSION } from '../ui_settings_config'; +// Setup theme options to be backwards compatible with the fact that v8 was persisted with its +// label rather than with the correct themeVersion value +const THEME_VERSIONS = Object.keys(themeVersionLabelMap); +const THEME_SCHEMA_VALUES = THEME_VERSIONS.concat(themeVersionLabelMap.v8); +const THEME_OPTIONS = THEME_VERSIONS.map((v) => (v !== 'v8' ? v : themeVersionLabelMap.v8)); + export const getThemeSettings = (): Record => { return { 'theme:enableUserControl': { @@ -68,9 +74,13 @@ export const getThemeSettings = (): Record => { name: i18n.translate('core.ui_settings.params.themeVersionTitle', { defaultMessage: 'Theme version', }), - value: themeVersionLabelMap[DEFAULT_THEME_VERSION], + value: + DEFAULT_THEME_VERSION === 'v8' + ? themeVersionLabelMap[DEFAULT_THEME_VERSION] + : DEFAULT_THEME_VERSION, type: 'select', - options: Object.values(themeVersionLabelMap), + options: THEME_OPTIONS, + optionLabels: themeVersionLabelMap, description: i18n.translate('core.ui_settings.params.themeVersionText', { defaultMessage: `

Switch between the themes used for the current and next versions of OpenSearch Dashboards. A page refresh is required for the setting to be applied.

{linkText}

`, values: { @@ -81,11 +91,7 @@ export const getThemeSettings = (): Record => { requiresPageReload: true, preferBrowserSetting: true, category: ['appearance'], - schema: schema.oneOf( - Object.keys(themeVersionLabelMap).map((v) => schema.literal(themeVersionLabelMap[v])) as [ - Type - ] - ), + schema: schema.oneOf(THEME_SCHEMA_VALUES.map((v) => schema.literal(v)) as [Type]), }, }; }; diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js index 66bbce1f83b..8569acf9f56 100644 --- a/src/legacy/ui/ui_render/ui_render_mixin.js +++ b/src/legacy/ui/ui_render/ui_render_mixin.js @@ -35,6 +35,8 @@ import * as v7light from '@elastic/eui/dist/eui_theme_light.json'; import * as v7dark from '@elastic/eui/dist/eui_theme_dark.json'; import * as v8light from '@elastic/eui/dist/eui_theme_next_light.json'; import * as v8dark from '@elastic/eui/dist/eui_theme_next_dark.json'; +import * as v9light from '@elastic/eui/dist/eui_theme_v9_light.json'; +import * as v9dark from '@elastic/eui/dist/eui_theme_v9_dark.json'; import * as UiSharedDeps from '@osd/ui-shared-deps'; import { OpenSearchDashboardsRequest } from '../../../core/server'; import { AppBootstrap } from './bootstrap'; @@ -239,6 +241,10 @@ export function uiRenderMixin(osdServer, server, config) { light: getLoadingVars(v8light), dark: getLoadingVars(v8dark), }, + v9: { + light: getLoadingVars(v9light), + dark: getLoadingVars(v9dark), + }, }); /* @@ -248,11 +254,13 @@ export function uiRenderMixin(osdServer, server, config) { const fontText = JSON.stringify({ v7: 'Inter UI', v8: 'Source Sans 3', + v9: 'Rubik', }); const fontCode = JSON.stringify({ v7: 'Roboto Mono', v8: 'Source Code Pro', + v9: 'Fira Code', }); const startup = new AppBootstrap(