diff --git a/app/src/docs/RichTextEditor.doc.tsx b/app/src/docs/RichTextEditor.doc.tsx index d072d1a462..e3425442dd 100644 --- a/app/src/docs/RichTextEditor.doc.tsx +++ b/app/src/docs/RichTextEditor.doc.tsx @@ -1,16 +1,14 @@ import * as React from 'react'; -import cx from 'classnames'; import { BaseDocsBlock, DocExample } from '../common'; -import css from './styles.module.scss'; export class RichTextEditorDoc extends BaseDocsBlock { title = 'Rich Text Editor'; renderContent() { return ( - + <> - + ); } } diff --git a/app/src/docs/RichTextEditorSerializers.doc.tsx b/app/src/docs/RichTextEditorSerializers.doc.tsx index 7ceebc3c8b..066ff68293 100644 --- a/app/src/docs/RichTextEditorSerializers.doc.tsx +++ b/app/src/docs/RichTextEditorSerializers.doc.tsx @@ -1,16 +1,14 @@ import * as React from 'react'; -import cx from 'classnames'; import { BaseDocsBlock, DocExample } from '../common'; -import css from './styles.module.scss'; export class RichTextEditorSerializersDoc extends BaseDocsBlock { title = 'Rich Text Editor Serializers'; renderContent() { return ( - + <> - + ); } } diff --git a/app/src/docs/SliderRating.doc.tsx b/app/src/docs/SliderRating.doc.tsx index 947fcff6e8..842998d442 100644 --- a/app/src/docs/SliderRating.doc.tsx +++ b/app/src/docs/SliderRating.doc.tsx @@ -3,8 +3,6 @@ import * as loveship from '@epam/loveship'; import * as uui from '@epam/uui'; import { DocBuilder, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs'; import { BaseDocsBlock, DocExample, EditableDocContent } from '../common'; -import cx from 'classnames'; -import css from './styles.module.scss'; export class SliderRatingDoc extends BaseDocsBlock { title = 'SliderRating'; @@ -37,11 +35,11 @@ export class SliderRatingDoc extends BaseDocsBlock { renderContent() { return ( - + <> {this.renderSectionTitle('Examples')} - + ); } } diff --git a/app/src/docs/styles.module.scss b/app/src/docs/styles.module.scss index bc2f8255b1..1fa1c1ac85 100644 --- a/app/src/docs/styles.module.scss +++ b/app/src/docs/styles.module.scss @@ -1,13 +1,3 @@ -@use '~@epam/assets/theme/theme_promo' as *; - -.wrapper { - &.uui-theme-promo { - :global { - @include theme-promo(); - } - } -} - .app-bg { --uui-docs-bg: var(--uui-app-bg); } \ No newline at end of file diff --git a/app/src/sandbox/RTE/rteDemo.module.scss b/app/src/sandbox/RTE/rteDemo.module.scss index 1ba88bf0ae..1da21fe449 100644 --- a/app/src/sandbox/RTE/rteDemo.module.scss +++ b/app/src/sandbox/RTE/rteDemo.module.scss @@ -1,14 +1,6 @@ -@use '~@epam/assets/theme/theme_promo' as *; - .wrapper { flex-grow: 1; margin: 24px; - - &.uui-theme-promo { - :global { - @include theme-promo(); - } - } } .icon-wrapper { diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx index 37a0e73ab0..f47c296fba 100644 --- a/app/src/sandbox/SandboxPage.tsx +++ b/app/src/sandbox/SandboxPage.tsx @@ -8,7 +8,6 @@ import { PersonsTableDemo } from './tables/PersonsTableDemo'; import { DemoTablePaged } from './tablePaged'; import { DraftRTEDemo } from './draft-rte/DraftRTEDemo'; import { ScrollSpyDemo } from './scroll-spy/ScrollSpyDemo'; -import { Responsive } from './responsive/Responsive'; import { ThemeDemo } from './theme/ThemeDemo'; import { ThemeElectricDemo } from './theme-electric-test/ThemeDemo'; import { ProductsTableDemo } from './productsTable/ProductsTableDemo'; @@ -19,7 +18,6 @@ import { Skills } from './skills'; import TableCellsStylesSandbox from './tableCellStyles/TableCellsStylesSandbox'; import { ProjectTasksDemo } from './tasks/ProjectTasksDemo'; import { RichTextEditorDemo } from './RTE/rteDemo'; -import { TableColumnConfigModalTest } from './tableColConfigModal/TableColumnConfigModalTest'; import { PalettePage } from './tokens/palette/palettePage'; import { ReactQueryLocationsTable } from './reactQueryLocationsTable'; import { ProjectTableDemo } from './editableTable'; @@ -37,7 +35,6 @@ export function SandboxPage() { { id: 'reactQueryLocationsTableDemo', name: 'React-query Loactions Demo', component: ReactQueryLocationsTable }, { id: 'Draft', name: 'DRAFT RTE demo', component: DraftRTEDemo }, { id: 'scrollSpy', name: 'Scroll Spy', component: ScrollSpyDemo }, - { id: 'responsive', name: 'Responsive', component: Responsive }, { id: 'uui_theming', name: 'UUI Theming', component: ThemeDemo }, { id: 'theme_electric', name: 'Theme Electric', component: ThemeElectricDemo }, { id: 'DemoTablePaged', name: 'Table with paging', component: DemoTablePaged }, @@ -45,7 +42,6 @@ export function SandboxPage() { { id: 'TableCellsStylesSandbox', name: 'Table Cells/Rows styles', component: TableCellsStylesSandbox }, { id: 'AdaptivePanel', name: 'Adaptive panel', component: AdaptivePanelDemo }, { id: 'RTEDemo', name: 'RTE Demo', component: RichTextEditorDemo }, - { id: 'TableColumnsConfigurationModal', name: 'Table ColumnsConfigModal', component: TableColumnConfigModalTest }, { id: 'tokens', name: 'Tokens' }, { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage }, { id: 'rtl-example', name: 'Rtl-example', component: RtlExample }, diff --git a/app/src/sandbox/db/DbDemo.module.scss b/app/src/sandbox/db/DbDemo.module.scss index ba2feb8b8d..7985bdfc50 100644 --- a/app/src/sandbox/db/DbDemo.module.scss +++ b/app/src/sandbox/db/DbDemo.module.scss @@ -1,14 +1,6 @@ -@use '~@epam/assets/theme/theme_promo' as *; - .container { display: flex; flex-direction: column; flex: 1 1 0; height: calc(100vh - 60px); - - &.uui-theme-promo { - :global { - @include theme-promo(); - } - } } diff --git a/app/src/sandbox/draft-rte/DraftRTEDemo.module.scss b/app/src/sandbox/draft-rte/DraftRTEDemo.module.scss index 000151ded5..58fc900a4d 100644 --- a/app/src/sandbox/draft-rte/DraftRTEDemo.module.scss +++ b/app/src/sandbox/draft-rte/DraftRTEDemo.module.scss @@ -1,15 +1,7 @@ -@use '~@epam/assets/theme/theme_loveship' as *; - .demo-wrapper { display: flex; width: 100%; height: calc(100vh - 60px); - - &.uui-theme-loveship { - :global { - @include theme-loveship(); - } - } } .DraftRTEDemo { diff --git a/app/src/sandbox/productsTable/ProductsTableDemo.module.scss b/app/src/sandbox/productsTable/ProductsTableDemo.module.scss index 7c95757f39..dca4500d1d 100644 --- a/app/src/sandbox/productsTable/ProductsTableDemo.module.scss +++ b/app/src/sandbox/productsTable/ProductsTableDemo.module.scss @@ -1,12 +1,5 @@ -@use '~@epam/assets/theme/theme_loveship' as *; .container { width: 100%; height: calc(100vh - 60px); - - &.uui-theme-loveship { - :global { - @include theme-loveship(); - } - } } diff --git a/app/src/sandbox/responsive/LoveshipPickerInput.tsx b/app/src/sandbox/responsive/LoveshipPickerInput.tsx deleted file mode 100644 index b7bd03d0b9..0000000000 --- a/app/src/sandbox/responsive/LoveshipPickerInput.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useState } from 'react'; -import { PickerInput } from '@epam/loveship'; -import { useArrayDataSource } from '@epam/uui-core'; - -const languageLevels = [ - { id: 2, level: 'A1' }, { id: 3, level: 'A1+' }, { id: 4, level: 'A2' }, { id: 5, level: 'A2+' }, { id: 6, level: 'B1' }, { id: 7, level: 'B1+' }, { id: 8, level: 'B2' }, { id: 9, level: 'B2+' }, { id: 10, level: 'C1' }, { id: 11, level: 'C1+' }, { id: 12, level: 'C2' }, -]; - -interface ILoveshipPickerInputProps { - type: 'single' | 'multi'; -} - -export const LoveshipPickerInput: React.FC = ({ type }) => { - const [value, setValue] = useState(null); - - const dataSource = useArrayDataSource( - { - items: languageLevels, - }, - [], - ); - - return ( - item.level } - entityName="Language level" - selectionMode={ type } - valueType="id" - sorting={ { field: 'level', direction: 'asc' } } - placeholder={ type } - /> - ); -}; diff --git a/app/src/sandbox/responsive/PromoPickerInput.tsx b/app/src/sandbox/responsive/PromoPickerInput.tsx deleted file mode 100644 index 41a95eb449..0000000000 --- a/app/src/sandbox/responsive/PromoPickerInput.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useState } from 'react'; -import { PickerInput } from '@epam/promo'; -import { useArrayDataSource } from '@epam/uui-core'; - -const languageLevels = [ - { id: 2, level: 'A1' }, { id: 3, level: 'A1+' }, { id: 4, level: 'A2' }, { id: 5, level: 'A2+' }, { id: 6, level: 'B1' }, { id: 7, level: 'B1+' }, { id: 8, level: 'B2' }, { id: 9, level: 'B2+' }, { id: 10, level: 'C1' }, { id: 11, level: 'C1+' }, { id: 12, level: 'C2' }, -]; - -interface IPromoPickerInputProps { - type: 'single' | 'multi'; -} - -export const PromoPickerInput: React.FC = ({ type }) => { - const [value, setValue] = useState(null); - - const dataSource = useArrayDataSource( - { - items: languageLevels, - }, - [], - ); - - return ( - item.level } - entityName="Language level" - selectionMode={ type } - valueType="id" - sorting={ { field: 'level', direction: 'asc' } } - placeholder={ type } - /> - ); -}; diff --git a/app/src/sandbox/responsive/Responsive.module.scss b/app/src/sandbox/responsive/Responsive.module.scss deleted file mode 100644 index c86051d3d1..0000000000 --- a/app/src/sandbox/responsive/Responsive.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '~@epam/assets/theme/theme_loveship' as *; -@use '~@epam/assets/theme/theme_promo' as *; - -.wrapper { - display: flex; - flex-direction: column; - width: calc(100vw - 240px); - - &.uui-theme-loveship { - @include theme-loveship(); - } - - &.uui-theme-promo { - @include theme-promo(); - } -} diff --git a/app/src/sandbox/responsive/Responsive.tsx b/app/src/sandbox/responsive/Responsive.tsx deleted file mode 100644 index 3657797f16..0000000000 --- a/app/src/sandbox/responsive/Responsive.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import css from './Responsive.module.scss'; -import { PromoPickerInput } from './PromoPickerInput'; -import { LoveshipPickerInput } from './LoveshipPickerInput'; -import cx from 'classnames'; - -export function Responsive() { - return ( - <> -
- promo: - - -
-
- loveship: - - -
- - ); -} diff --git a/app/src/sandbox/scroll-spy/ScrollSpyDemo.module.scss b/app/src/sandbox/scroll-spy/ScrollSpyDemo.module.scss index 75742cec47..5a2a4c3340 100644 --- a/app/src/sandbox/scroll-spy/ScrollSpyDemo.module.scss +++ b/app/src/sandbox/scroll-spy/ScrollSpyDemo.module.scss @@ -1,12 +1,4 @@ -@use '~@epam/assets/theme/theme_promo' as *; - .panel { display: flex; width: 100%; - - &.uui-theme-promo { - :global { - @include theme-promo(); - } - } } diff --git a/app/src/sandbox/skills/SkillsBatteryPopover.module.scss b/app/src/sandbox/skills/SkillsBatteryPopover.module.scss index badd82742b..3b05d4c96e 100644 --- a/app/src/sandbox/skills/SkillsBatteryPopover.module.scss +++ b/app/src/sandbox/skills/SkillsBatteryPopover.module.scss @@ -1,13 +1,5 @@ -@use '~@epam/assets/theme/theme_promo' as *; - .wrapper { padding: 3rem 1rem 0; - - &.uui-theme-promo { - :global { - @include theme-promo(); - } - } } .target-body-container { @@ -27,12 +19,6 @@ .drop-container { width: 334px; - &.uui-theme-promo { - :global { - @include theme-promo(); - } - } - &:global(.uui-dropdown-body) { min-width: 300px; background-color: var(--gray5); diff --git a/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.module.scss b/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.module.scss deleted file mode 100644 index 43e3231983..0000000000 --- a/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '~@epam/assets/theme/theme_promo' as *; -@use '~@epam/assets/theme/theme_loveship' as *; - -.wrapper { - &.uui-theme-promo { - :global { - @include theme-promo(); - } - } - - &.uui-theme-loveship { - :global { - @include theme-loveship(); - } - } -} \ No newline at end of file diff --git a/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx b/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx index 374e7b3de5..d42def8e4f 100644 --- a/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx +++ b/app/src/sandbox/tableCellStyles/TableCellsStylesSandbox.tsx @@ -17,7 +17,6 @@ import * as loveship from '@epam/loveship'; import * as uui from '@epam/uui'; import { DatePickerProps } from '@epam/uui'; import { PickerInputBaseProps } from '@epam/uui-components'; -import css from './TableCellsStylesSandbox.module.scss'; // Defined interface describe data for each row interface Item { @@ -304,7 +303,7 @@ export default function TableCellsStylesSandbox() { // Render the table, passing the prepared data to it in form of getRows callback, list props (e.g. items counts) return ( - + (); - - const [value, onValueChange] = useState({}); - - const dataSource = useLazyDataSource( - { - api: svc.api.demo.persons, - }, - [], - ); - - const view = dataSource.useView(value, onValueChange, { - getRowOptions: () => ({ checkbox: { isVisible: true } }), - }); - - const productColumns: DataColumnProps[] = useMemo( - () => [ - { - key: 'name', - caption: 'Name', - render: (p) => {p.name}, - width: 200, - fix: 'left', - isSortable: true, - }, { - key: 'profileStatus', - caption: 'Profile Status', - render: (p) => - p.profileStatus && ( - - - - ), - width: 140, - minWidth: 80, - isSortable: true, - alignSelf: 'center', - info: 'Person Status according his work profile', - }, { - key: 'salary', - caption: 'Salary', - render: (p) => {p.salary}, - isSortable: true, - width: 100, - textAlign: 'right', - info: 'Salary sum for the last year', - }, { - key: 'jobTitle', - caption: 'Title', - render: (r) => {r.jobTitle}, - width: 200, - grow: 1, - isSortable: true, - info: 'Job full description', - }, { - key: 'detailed', - render: () => {}, - width: 54, - alignSelf: 'center', - fix: 'right', - info: 'detailed description', - }, - ], - [], - ); - - const columnsConfigurationModal = (props: ColumnsConfigurationModalProps) => { - const { columns, columnsConfig, defaultConfig, ...modalProps } = props; - return ( - [column.caption as string, column.info as string] } - renderItem={ (column) => ( - - {column.caption} - { column.info && { ` / ${column.info}` } } - - ) } - /> - ); - }; - - return ( - - -

Table example with ColumnConfigModal

- - - - - - ); -} diff --git a/app/src/sandbox/tables/PersonsTableDemo.module.scss b/app/src/sandbox/tables/PersonsTableDemo.module.scss index c4a6b4dad3..3c8b38c1b8 100644 --- a/app/src/sandbox/tables/PersonsTableDemo.module.scss +++ b/app/src/sandbox/tables/PersonsTableDemo.module.scss @@ -1,4 +1,3 @@ -@use '~@epam/assets/theme/theme_loveship' as *; .container { display: flex; @@ -7,12 +6,6 @@ height: calc(100vh - 60px); width: 100%; overflow: hidden; - - &.uui-theme-loveship { - :global { - @include theme-loveship(); - } - } } .sticky-footer { diff --git a/epam-assets/package.json b/epam-assets/package.json index 32bb337aac..78390fa09e 100644 --- a/epam-assets/package.json +++ b/epam-assets/package.json @@ -6,7 +6,7 @@ "license": "MIT", "scripts": { "build": "ts-node -T ../uui-build/ts/scripts/buildUuiModule.ts && yarn buildTheme", - "buildTheme": "yarn --cwd ../uui-build compile-theme-scss --dirs=./epam-assets/theme:./epam-assets/build/css/theme", + "buildTheme": "yarn --cwd ../uui-build compile-theme-scss --dirs=./epam-assets/theme:./epam-assets/build/css/theme --recursive", "prepublish": "yarn build" }, "repository": { diff --git a/epam-assets/theme/no-fonts/theme_electric.scss b/epam-assets/theme/no-fonts/theme_electric.scss new file mode 100644 index 0000000000..7d138d7962 --- /dev/null +++ b/epam-assets/theme/no-fonts/theme_electric.scss @@ -0,0 +1,7 @@ +@use '../variables/6px_grid' as *; +@use '../variables/electric' as *; + +.uui-theme-electric { + @include electric-variables(); + @include uui-6px-grid(); +} diff --git a/epam-assets/theme/no-fonts/theme_loveship.scss b/epam-assets/theme/no-fonts/theme_loveship.scss new file mode 100644 index 0000000000..7917a1dd01 --- /dev/null +++ b/epam-assets/theme/no-fonts/theme_loveship.scss @@ -0,0 +1,8 @@ +@use '../variables/6px_grid' as *; +@use '../variables/loveship' as *; + + +.uui-theme-loveship { + @include loveship-variables(); + @include uui-6px-grid(); +} diff --git a/epam-assets/theme/no-fonts/theme_loveship_dark.scss b/epam-assets/theme/no-fonts/theme_loveship_dark.scss new file mode 100644 index 0000000000..7fe988d613 --- /dev/null +++ b/epam-assets/theme/no-fonts/theme_loveship_dark.scss @@ -0,0 +1,8 @@ +@use '../variables/6px_grid' as *; +@use '../variables/loveship_dark' as *; + + +.uui-theme-loveship_dark { + @include loveship_dark_variables(); + @include uui-6px-grid(); +} diff --git a/epam-assets/theme/no-fonts/theme_promo.scss b/epam-assets/theme/no-fonts/theme_promo.scss new file mode 100644 index 0000000000..e1507a5588 --- /dev/null +++ b/epam-assets/theme/no-fonts/theme_promo.scss @@ -0,0 +1,8 @@ +@use '../variables/6px_grid' as *; +@use '../variables/promo' as *; + +.uui-theme-promo { + @include promo_variables(); + @include uui-6px-grid(); +} + diff --git a/epam-assets/theme/theme_electric.scss b/epam-assets/theme/theme_electric.scss index 432646f6a7..4eb718239f 100644 --- a/epam-assets/theme/theme_electric.scss +++ b/epam-assets/theme/theme_electric.scss @@ -1,515 +1,8 @@ -@use './tokens/_theme_electric.scss' as tokens; -@use './theme_6px' as *; -@import '../scss/electric/font-faces'; - -/* Name convention */ -/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ - -@mixin theme-electric { - --uui-font: 'Source Sans Pro', sans-serif; - --uui-font-mono: 'Roboto Mono', monospace; - - // theme specific fonts - --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif; - - --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%); - --gradient-2: linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%); - --gradient-3: linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%); - --gradient-4: linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%); - --gradient-5: linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%); - - /* shadows */ - --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1); - --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05); - --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05); - - @include tokens.theme-tokens; - - & { - --uui-border-radius: 3px; - } - - /* begin color classes */ - .uui-color-fire { - --uui-color-5: var(--uui-critical-5); - --uui-color-10: var(--uui-critical-10); - --uui-color-20: var(--uui-critical-20); - --uui-color-50: var(--uui-critical-50); - --uui-color-60: var(--uui-critical-60); - --uui-color-70: var(--uui-critical-70); - --uui-color-contrast: var(--white); - } - - .uui-color-night100 { - --uui-color-5: var(--white); - --uui-color-10: var(--white); - --uui-color-20: var(--night50); - --uui-color-50: var(--night100); - --uui-color-60: var(--night200); - --uui-color-70: var(--night300); - --uui-color-contrast: var(--uui-neutral-70); - } - - .uui-color-night300 { - --uui-color-5: var(--night50); - --uui-color-10: var(--night100); - --uui-color-20: var(--night200); - --uui-color-50: var(--night300); - --uui-color-60: var(--night400); - --uui-color-70: var(--night500); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-night600 { - --uui-color-5: var(--uui-secondary-5); - --uui-color-10: var(--uui-secondary-10); - --uui-color-20: var(--uui-secondary-20); - --uui-color-50: var(--uui-secondary-50); - --uui-color-60: var(--uui-secondary-60); - --uui-color-70: var(--uui-secondary-70); - --uui-color-contrast: var(--white); - } - - .uui-color-night700 { - --uui-color-5: var(--night400); - --uui-color-10: var(--night500); - --uui-color-20: var(--night600); - --uui-color-50: var(--night700); - --uui-color-60: var(--night800); - --uui-color-70: var(--night900); - --uui-color-contrast: var(--white); - } - - .uui-color-sun { - --uui-color-5: var(--sun-5); - --uui-color-10: var(--sun-10); - --uui-color-20: var(--sun-20); - --uui-color-50: var(--sun-50); - --uui-color-60: var(--sun-60); - --uui-color-70: var(--sun-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-yellow { - --uui-color-5: var(--yellow-5); - --uui-color-10: var(--yellow-10); - --uui-color-20: var(--yellow-20); - --uui-color-50: var(--yellow-50); - --uui-color-60: var(--yellow-60); - --uui-color-70: var(--yellow-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-orange { - --uui-color-5: var(--orange-5); - --uui-color-10: var(--orange-10); - --uui-color-20: var(--orange-20); - --uui-color-50: var(--orange-50); - --uui-color-60: var(--orange-60); - --uui-color-70: var(--orange-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-fuchsia { - --uui-color-5: var(--fuchsia-5); - --uui-color-10: var(--fuchsia-10); - --uui-color-20: var(--fuchsia-20); - --uui-color-50: var(--fuchsia-50); - --uui-color-60: var(--fuchsia-60); - --uui-color-70: var(--fuchsia-70); - --uui-color-contrast: var(--white); - } - - .uui-color-purple { - --uui-color-5: var(--purple-5); - --uui-color-10: var(--purple-10); - --uui-color-20: var(--purple-20); - --uui-color-50: var(--purple-50); - --uui-color-60: var(--purple-60); - --uui-color-70: var(--purple-70); - --uui-color-contrast: var(--white); - } - - .uui-color-violet { - --uui-color-5: var(--violet-5); - --uui-color-10: var(--violet-10); - --uui-color-20: var(--violet-20); - --uui-color-50: var(--violet-50); - --uui-color-60: var(--violet-60); - --uui-color-70: var(--violet-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cobalt { - --uui-color-5: var(--cobalt-5); - --uui-color-10: var(--cobalt-10); - --uui-color-20: var(--cobalt-20); - --uui-color-50: var(--cobalt-50); - --uui-color-60: var(--cobalt-60); - --uui-color-70: var(--cobalt-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cyan { - --uui-color-5: var(--cyan-5); - --uui-color-10: var(--cyan-10); - --uui-color-20: var(--cyan-20); - --uui-color-50: var(--cyan-50); - --uui-color-60: var(--cyan-60); - --uui-color-70: var(--cyan-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-mint { - --uui-color-5: var(--mint-5); - --uui-color-10: var(--mint-10); - --uui-color-20: var(--mint-20); - --uui-color-50: var(--mint-50); - --uui-color-60: var(--mint-60); - --uui-color-70: var(--mint-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - /* Accordion */ - - .uui-accordion-container { - --uui-accordion-border-radius: 6px; - } - - /* FileCard */ - - .uui-file_card { - --uui-file_card-border-radius: 6px; - } - - /* Badge */ - - .uui-badge.uui-color-white { - &.uui-fill-solid { - --uui-badge-bg-hover: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-30); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-0); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-10); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); - } - } - } - - .uui-badge.uui-color-neutral { - --uui-badge-caption: var(--uui-neutral-95); - - &.uui-fill-solid { - --uui-badge-bg: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-40); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-40); - --uui-color-contrast: var(--uui-neutral-80); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - } - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-20); - --uui-badge-border: var(--uui-neutral-40); - --uui-badge-border-hover: var(--uui-neutral-40); - --uui-badge-bg-hover: var(--uui-neutral-30); - --uui-badge-caption-hover: var(--uui-neutral-80); - } - } - - .uui-badge.uui-color-night100 { - &.uui-fill-solid { - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border-hover: var(--uui-neutral-20); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-10); - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); - } - } - } - - .uui-badge.uui-color-night600 { - &.uui-fill-outline { - --uui-badge-border: var(--uui-neutral-60); - --uui-badge-border-hover: var(--uui-neutral-60); - --uui-badge-caption: var(--uui-neutral-95); - --uui-badge-caption-hover: var(--uui-neutral-80); - } - } - - .uui-badge.uui-color-yellow.uui-fill-outline { - --uui-badge-border: var(--yellow-20); - } - - /* Button */ - - .uui-button:is(.uui-color-secondary, .uui-color-neutral):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) { - --uui-btn-caption: var(--uui-neutral-70); - } - - /* IconButton */ - - .uui-icon_button.uui-color-neutral { - --uui-color-5: var(--uui-secondary-5); - --uui-color-10: var(--uui-secondary-10); - --uui-color-20: var(--uui-secondary-20); - --uui-color-50: var(--uui-secondary-50); - --uui-color-60: var(--uui-secondary-60); - --uui-color-70: var(--uui-secondary-70); - --uui-color-contrast: var(--white); - } - - .uui-icon_button.uui-color-white { - --uui-icon_btn-hover: var(--uui-neutral-20); - --uui-icon_btn-active: var(--uui-neutral-30); - } - - /* LinkButton */ - - .uui-link_button.uui-color-contrast { - --uui-link_btn-text: var(--uui-neutral-5); - --uui-link_btn-text-hover: var(--uui-neutral-10); - --uui-link_btn-text-active: var(--uui-neutral-20); - } - - .uui-link_button.uui-color-white { - --uui-link_btn-text: var(--uui-neutral-5); - --uui-link_btn-text-hover: var(--uui-neutral-30); - --uui-link_btn-text-active: var(--uui-neutral-40); - --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); - } - - /* CountIndicator */ - - .uui-count_indicator.uui-color-neutral { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - - .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) { - --uui-count_indicator-caption: var(--uui-neutral-70); - } - - /* Status Indicator */ - - .uui-status_indicator.uui-color-white.uui-fill-outline { - .uui-status_indicator-dot { - background-color: color-mix(in srgb, var(--white) 20%, transparent); - border: 1px solid var(--uui-neutral-40); - } - } - - /* MainMenu */ - - .uui-main_menu { - --uui-main_menu-bg: var(--uui-neutral-95); - --uui-main_menu-hover: var(--uui-neutral-90); - --uui-main_menu-border-active-gradient: var(--gradient-1); - } - - .uui-main_menu-dropdown { - --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-95); - } - - /* BurgerMenu */ - - .uui-burger { - --uui-burger_menu-bg: var(--uui-neutral-95); - --uui-burger_menu-bg-hover: var(--uui-neutral-95); - --uui-burger_menu-item: var(--uui-neutral-95); - } - - /* Tag */ - - .uui-tag { - &.uui-fill-outline { - --uui-tag-fill: var(--uui-neutral-95); - --uui-tag-caption: var(--uui-text-primary); - } - - &.uui-color-white { - &.uui-fill-solid { - --uui-tag-fill: var(--uui-neutral-95); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-0); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border-hover: var(--uui-neutral-30); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-night100 { - &.uui-fill-solid { - --uui-tag-fill: var(--uui-neutral-95); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - --uui-count_indicator-caption: var(--uui-neutral-70); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-5); - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-border-hover: var(--uui-neutral-30); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-night700 { - &.uui-fill-solid { - .uui-count_indicator { - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent); - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-20); - --uui-tag-bg-hover: var(--uui-neutral-30); - --uui-tag-border: var(--uui-neutral-50); - --uui-tag-border-hover: var(--uui-neutral-50); - } - } - - &.uui-color-warning, - &.uui-color-sun { - --uui-tag-fill: var(--uui-neutral-100); - - &.uui-fill-solid { - --uui-tag-caption: var(--uui-neutral-80); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent); - --uui-count_indicator-caption: var(--uui-neutral-80); - } - } - - &.uui-fill-outline { - --uui-tag-caption: var(--uui-neutral-95); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-40); - } - } - } - - &.uui-color-neutral { - &.uui-fill-solid { - --uui-tag-bg: var(--uui-neutral-30); - --uui-tag-bg-hover: var(--uui-neutral-40); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-border-hover: var(--uui-neutral-40); - --uui-tag-caption: var(--uui-text-primary); - --uui-tag-fill: var(--uui-neutral-95); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - --uui-count_indicator-caption: var(--uui-neutral-70); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-20); - --uui-tag-bg-hover: var(--uui-neutral-30); - --uui-tag-fill: var(--uui-neutral-95); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - } - - /* Typography */ - - .uui-typography { - h1 { - font-weight: 400; - } - - h2, h3, h4, h5 { - font-weight: 600; - } - - .promo-header:is(h1, h2, h3, h4, h5, h6) { - font-family: var(--font-museo-sans); - } - - h1.promo-header { - font-size: 72px; - font-weight: 400; - } - - h2.promo-header { - font-size: 44px; - font-weight: 600; - } - - h3.promo-header { - font-size: 36px; - } - - h4.promo-header { - font-size: 30px; - } - - h5.promo-header { - font-size: 24px; - } - - h6.promo-header { - font-size: 18px; - } - } -} +@use 'variables/6px_grid' as *; +@use 'variables/electric' as *; +@use '../scss/electric/font-faces'; .uui-theme-electric { - @include theme-electric(); + @include electric-variables(); @include uui-6px-grid(); } diff --git a/epam-assets/theme/theme_loveship.scss b/epam-assets/theme/theme_loveship.scss index 8b9465e14c..29b1e95d67 100644 --- a/epam-assets/theme/theme_loveship.scss +++ b/epam-assets/theme/theme_loveship.scss @@ -1,593 +1,8 @@ @use '../scss/loveship/font-faces'; -@use './theme_6px' as *; -@use './tokens/_theme_loveship_light.scss' as tokens; -/* Name convention */ -/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ - -@mixin theme-loveship { - --uui-font: 'Source Sans Pro', sans-serif; - --uui-font-mono: 'Roboto Mono', monospace; - - /* Loveship old colors */ - --uui-color-night100-800: #D3D7E9; - --uui-color-night100-900: #B1B9D8; - - --uui-color-night700-800: #30323D; - --uui-color-night700-900: #1A1B20; - - /* end Loveship old colors */ - - /* shadows */ - --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1); - --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05); - --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05); - - @include tokens.theme-tokens; - - - & { - --uui-border-radius: 3px; - } - - /* begin color classes */ - - .uui-color-grass { - --uui-color-5: var(--uui-accent-5); - --uui-color-10: var(--uui-accent-10); - --uui-color-20: var(--uui-accent-20); - --uui-color-50: var(--uui-accent-50); - --uui-color-60: var(--uui-accent-60); - --uui-color-70: var(--uui-accent-70); - --uui-color-contrast: var(--uui-accent-contrast); - } - - .uui-color-sky { - --uui-color-5: var(--uui-primary-5); - --uui-color-10: var(--uui-primary-10); - --uui-color-20: var(--uui-primary-20); - --uui-color-50: var(--uui-primary-50); - --uui-color-60: var(--uui-primary-60); - --uui-color-70: var(--uui-primary-70); - --uui-color-contrast: var(--uui-primary-contrast); - } - - .uui-color-fire { - --uui-color-5: var(--uui-critical-5); - --uui-color-10: var(--uui-critical-10); - --uui-color-20: var(--uui-critical-20); - --uui-color-50: var(--uui-critical-50); - --uui-color-60: var(--uui-critical-60); - --uui-color-70: var(--uui-critical-70); - --uui-color-contrast: var(--uui-critical-contrast); - } - - .uui-color-night100 { - --uui-color-5: var(--white); - --uui-color-10: var(--white); - --uui-color-20: var(--night50); - --uui-color-50: var(--night100); - --uui-color-60: var(--uui-color-night100-800); - --uui-color-70: var(--uui-color-night100-900); - --uui-color-contrast: var(--uui-neutral-70); - } - - .uui-color-night300 { - --uui-color-5: var(--night50); - --uui-color-10: var(--night100); - --uui-color-20: var(--night200); - --uui-color-50: var(--night300); - --uui-color-60: var(--night400); - --uui-color-70: var(--night500); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-night500 { - --uui-color-5: var(--night200); - --uui-color-10: var(--night300); - --uui-color-20: var(--night400); - --uui-color-50: var(--night500); - --uui-color-60: var(--night600); - --uui-color-70: var(--night700); - --uui-color-contrast: var(--white); - } - - .uui-color-night600, - .uui-color-gray { - --uui-color-5: var(--uui-secondary-5); - --uui-color-10: var(--uui-secondary-10); - --uui-color-20: var(--uui-secondary-20); - --uui-color-50: var(--uui-secondary-50); - --uui-color-60: var(--uui-secondary-60); - --uui-color-70: var(--uui-secondary-70); - --uui-color-contrast: var(--uui-secondary-contrast); - } - - .uui-color-night700 { - --uui-color-5: var(--night400); - --uui-color-10: var(--night500); - --uui-color-20: var(--night600); - --uui-color-50: var(--night700); - --uui-color-60: var(--uui-color-night700-800); - --uui-color-70: var(--uui-color-night700-900); - --uui-color-contrast: var(--white); - } - - .uui-color-sun { - --uui-color-5: var(--uui-warning-5); - --uui-color-10: var(--uui-warning-10); - --uui-color-20: var(--uui-warning-20); - --uui-color-50: var(--uui-warning-50); - --uui-color-60: var(--uui-warning-60); - --uui-color-70: var(--uui-warning-70); - --uui-color-contrast: var(--uui-warning-contrast); - } - - .uui-color-yellow { - --uui-color-5: var(--yellow-5); - --uui-color-10: var(--yellow-10); - --uui-color-20: var(--yellow-20); - --uui-color-50: var(--yellow-50); - --uui-color-60: var(--yellow-60); - --uui-color-70: var(--yellow-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-orange { - --uui-color-5: var(--orange-5); - --uui-color-10: var(--orange-10); - --uui-color-20: var(--orange-20); - --uui-color-50: var(--orange-50); - --uui-color-60: var(--orange-60); - --uui-color-70: var(--orange-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-fuchsia { - --uui-color-5: var(--fuchsia-5); - --uui-color-10: var(--fuchsia-10); - --uui-color-20: var(--fuchsia-20); - --uui-color-50: var(--fuchsia-50); - --uui-color-60: var(--fuchsia-60); - --uui-color-70: var(--fuchsia-70); - --uui-color-contrast: var(--white); - } - - .uui-color-purple { - --uui-color-5: var(--purple-5); - --uui-color-10: var(--purple-10); - --uui-color-20: var(--purple-20); - --uui-color-50: var(--purple-50); - --uui-color-60: var(--purple-60); - --uui-color-70: var(--purple-70); - --uui-color-contrast: var(--white); - } - - .uui-color-violet { - --uui-color-5: var(--violet-5); - --uui-color-10: var(--violet-10); - --uui-color-20: var(--violet-20); - --uui-color-50: var(--violet-50); - --uui-color-60: var(--violet-60); - --uui-color-70: var(--violet-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cobalt { - --uui-color-5: var(--cobalt-5); - --uui-color-10: var(--cobalt-10); - --uui-color-20: var(--cobalt-20); - --uui-color-50: var(--cobalt-50); - --uui-color-60: var(--cobalt-60); - --uui-color-70: var(--cobalt-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cyan { - --uui-color-5: var(--cyan-5); - --uui-color-10: var(--cyan-10); - --uui-color-20: var(--cyan-20); - --uui-color-50: var(--cyan-50); - --uui-color-60: var(--cyan-60); - --uui-color-70: var(--cyan-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - .uui-color-mint { - --uui-color-5: var(--mint-5); - --uui-color-10: var(--mint-10); - --uui-color-20: var(--mint-20); - --uui-color-50: var(--mint-50); - --uui-color-60: var(--mint-60); - --uui-color-70: var(--mint-70); - --uui-color-contrast: var(--uui-neutral-80); - } - - /* Accordion */ - - .uui-accordion-container { - --uui-accordion-border-radius: 6px; - } - - /* FileCard */ - - .uui-file_card { - --uui-file_card-border-radius: 6px; - } - - /* Badge */ - - .uui-badge.uui-color-white { - &.uui-fill-solid { - --uui-badge-border-hover: var(--uui-neutral-30); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-0); - --uui-badge-bg-hover: var(--uui-neutral-30); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - } - } - - .uui-badge.uui-color-neutral, - .uui-badge.uui-color-night300 { - &.uui-fill-solid { - --uui-badge-bg: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-40); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-40); - --uui-color-contrast: var(--uui-neutral-80); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - } - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-20); - --uui-badge-bg-hover: var(--uui-neutral-30); - --uui-badge-border: var(--uui-neutral-40); - --uui-badge-caption: var(--uui-neutral-80); - --uui-badge-caption-hover: var(--uui-neutral-80); - } - } - - .uui-badge.uui-color-night100 { - &.uui-fill-solid { - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border-hover: var(--uui-neutral-20); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-10); - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); - } - } - } - - .uui-badge.uui-color-night600 { - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-20); - --uui-badge-border: var(--uui-neutral-60); - --uui-badge-border-hover: var(--uui-neutral-60); - --uui-badge-caption: var(--uui-neutral-80); - --uui-badge-caption-hover: var(--uui-neutral-80); - } - } - - .uui-badge.uui-color-yellow.uui-fill-outline { - --uui-badge-border: var(--yellow-20); - } - - /* Button */ - - .uui-button { - &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) { - --uui-btn-caption: var(--uui-neutral-70); - } - } - - /* IconButton */ - - .uui-icon_button.uui-color-secondary { - --uui-icon_btn: var(--uui-neutral-50); - --uui-icon_btn-hover: var(--uui-neutral-60); - --uui-icon_btn-active: var(--uui-neutral-70); - } - - .uui-icon_button.uui-color-white { - --uui-icon_btn-hover: var(--uui-neutral-20); - --uui-icon_btn-active: var(--uui-neutral-30); - } - - /* LinkButton */ - - .uui-link_button.uui-color-contrast { - --uui-link_btn-text: var(--uui-neutral-5); - --uui-link_btn-text-hover: var(--uui-neutral-10); - --uui-link_btn-text-active: var(--uui-neutral-20); - } - - .uui-link_button.uui-color-white { - --uui-link_btn-text: var(--uui-neutral-5); - --uui-link_btn-text-hover: var(--uui-neutral-30); - --uui-link_btn-text-active: var(--uui-neutral-40); - --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); - } - - /* Tooltip */ - - .uui-tooltip-container.uui-color-white { - --uui-tooltip-bg: var(--uui-neutral-0); - --uui-tooltip-text: var(--uui-neutral-80); - } - - .uui-tooltip-container.uui-color-red { - --uui-tooltip-bg: var(--uui-error-60); - } - - .uui-tooltip-container.uui-color-gray { - --uui-tooltip-bg: var(--uui-neutral-80); - --uui-tooltip-text: var(--uui-neutral-5); - } - - /* CountIndicator */ - - .uui-count_indicator.uui-color-gray, - .uui-count_indicator.uui-color-neutral { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - - .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) { - --uui-count_indicator-caption: var(--uui-neutral-70); - } - - /* Status Indicator */ - - .uui-status_indicator.uui-color-white.uui-fill-outline { - .uui-status_indicator-dot { - background-color: color-mix(in srgb, var(--white) 20%, transparent); - border: 1px solid var(--uui-neutral-40); - } - } - - /* FlexRow */ - - .uui-flex-row.uui-color-none { - --uui-flex-row-bg: transparent; - } - - .uui-flex-row.uui-color-white { - --uui-flex-row-bg: var(--white); - } - - .uui-flex-row.uui-color-night50 { - --uui-flex-row-bg: var(--night50); - } - - .uui-flex-row.uui-color-night100 { - --uui-flex-row-bg: var(--night100); - } - - .uui-panel.uui-color-white { - --uui-panel-bg: var(--white); - } - - .uui-panel.uui-color-night50 { - --uui-panel-bg: var(--night50); - } - - /* Text */ - - .uui-text.uui-color-night50 { - --uui-text: var(--night50); - } - - .uui-text.uui-color-night400 { - --uui-text: var(--night400); - } - - .uui-text.uui-color-night800 { - --uui-text: var(--night800); - } - - .uui-text.uui-color-night900 { - --uui-text: var(--night900); - } - - .uui-text.uui-color-sky { - --uui-text: var(--sky-70); - } - - .uui-text.uui-color-grass { - --uui-text: var(--grass-70); - } - - .uui-text.uui-color-sun { - --uui-text: var(--sun-70); - } - - .uui-text.uui-color-fire { - --uui-text: var(--fire-70); - } - - /* Tag */ - - .uui-tag { - &.uui-color-white { - &.uui-fill-solid { - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border-hover: var(--uui-neutral-10); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-0); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border-hover: var(--uui-neutral-30); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-night100 { - &.uui-fill-solid { - --uui-tag-bg-hover: var(--uui-neutral-20); - --uui-tag-border-hover: var(--uui-neutral-20); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-5); - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-border-hover: var(--uui-neutral-30); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-neutral, - &.uui-color-night300 { - &.uui-fill-solid { - --uui-tag-bg: var(--uui-neutral-30); - --uui-tag-bg-hover: var(--uui-neutral-40); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-border-hover: var(--uui-neutral-40); - --uui-tag-caption: var(--uui-neutral-70); - --uui-tag-fill: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - --uui-count_indicator-caption: var(--uui-neutral-70); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-20); - --uui-tag-bg-hover: var(--uui-neutral-30); - --uui-tag-border: var(--uui-neutral-40); - --uui-tag-border-hover: var(--uui-neutral-40); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-night700 { - &.uui-fill-solid { - --uui-tag-caption: var(--uui-neutral-0); - --uui-tag-fill: var(--uui-neutral-0); - --uui-tag-bg: var(--uui-neutral-70); - --uui-tag-border: var(--uui-neutral-70); - --uui-tag-bg-hover: var(--uui-neutral-80); - --uui-tag-border-hover: var(--uui-neutral-80); - - .uui-count_indicator { - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent); - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-20); - --uui-tag-bg-hover: var(--uui-neutral-30); - --uui-tag-border: var(--uui-neutral-50); - --uui-tag-border-hover: var(--uui-neutral-50); - - } - } - - &.uui-color-warning, - &.uui-color-sun { - &.uui-fill-solid { - --uui-tag-caption: var(--uui-text-primary); - --uui-tag-fill: var(--uui-neutral-90); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent); - } - } - - &.uui-fill-outline .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-40); - } - } - } - - /* fonts */ - - .uui-font-sans { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 400; - } - - .uui-font-sans-semibold { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 600; - } - - .uui-font-sans-light { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 300; - } - - /* Typography */ - - .uui-typography { - h1 { - font-weight: 600; - } - - h2 { - font-weight: 700; - } - - h3 { - font-weight: 600; - } - - .hero-header { - font-size: 72px; - line-height: 72px; - font-weight: 700; - } - } -} +@use 'variables/6px_grid' as *; +@use 'variables/loveship' as *; .uui-theme-loveship { - @include theme-loveship(); + @include loveship-variables(); @include uui-6px-grid(); } diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss index 62736cf0bb..0d23377460 100644 --- a/epam-assets/theme/theme_loveship_dark.scss +++ b/epam-assets/theme/theme_loveship_dark.scss @@ -1,822 +1,8 @@ @use '../scss/loveship/font-faces'; -@use './theme_6px' as *; -@use './tokens/_theme_loveship_dark.scss' as tokens; -/* Name convention */ -/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ - -@mixin theme-loveship_dark { - --uui-font: 'Source Sans Pro', sans-serif; - --uui-font-mono: 'Roboto Mono', monospace; - - /* shadows */ - --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2); - --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26); - --uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56); - - @include tokens.theme-tokens; - - & { - --uui-border-radius: 3px; - } - - /* begin color classes */ - - .uui-color-gray { - --uui-color-5: var(--uui-secondary-5); - --uui-color-10: var(--uui-secondary-10); - --uui-color-20: var(--uui-secondary-20); - --uui-color-50: var(--uui-secondary-50); - --uui-color-60: var(--uui-secondary-60); - --uui-color-70: var(--uui-secondary-70); - --uui-color-contrast: var(--white); - } - - .uui-color-grass { - --uui-color-5: var(--grass-5); - --uui-color-10: var(--grass-10); - --uui-color-20: var(--grass-20); - --uui-color-50: var(--grass-50); - --uui-color-60: var(--grass-60); - --uui-color-70: var(--grass-70); - --uui-color-contrast: var(--white); - } - - .uui-color-sky { - --uui-color-5: var(--sky-5); - --uui-color-10: var(--sky-10); - --uui-color-20: var(--sky-20); - --uui-color-50: var(--sky-50); - --uui-color-60: var(--sky-60); - --uui-color-70: var(--sky-70); - --uui-color-contrast: var(--white); - } - - .uui-color-fire { - --uui-color-5: var(--fire-5); - --uui-color-10: var(--fire-10); - --uui-color-20: var(--fire-20); - --uui-color-50: var(--fire-50); - --uui-color-60: var(--fire-60); - --uui-color-70: var(--fire-70); - --uui-color-contrast: var(--white); - } - - .uui-color-sun { - --uui-color-5: var(--sun-5); - --uui-color-10: var(--sun-10); - --uui-color-20: var(--sun-20); - --uui-color-50: var(--sun-50); - --uui-color-60: var(--sun-60); - --uui-color-70: var(--sun-70); - --uui-color-contrast: var(--night700); - } - - .uui-color-yellow { - --uui-color-5: var(--yellow-5); - --uui-color-10: var(--yellow-10); - --uui-color-20: var(--yellow-20); - --uui-color-50: var(--yellow-50); - --uui-color-60: var(--yellow-60); - --uui-color-70: var(--yellow-70); - --uui-color-contrast: var(--night700); - } - - .uui-color-orange { - --uui-color-5: var(--orange-5); - --uui-color-10: var(--orange-10); - --uui-color-20: var(--orange-20); - --uui-color-50: var(--orange-50); - --uui-color-60: var(--orange-60); - --uui-color-70: var(--orange-70); - --uui-color-contrast: var(--night700); - } - - .uui-color-fuchsia { - --uui-color-5: var(--fuchsia-5); - --uui-color-10: var(--fuchsia-10); - --uui-color-20: var(--fuchsia-20); - --uui-color-50: var(--fuchsia-50); - --uui-color-60: var(--fuchsia-60); - --uui-color-70: var(--fuchsia-70); - --uui-color-contrast: var(--white); - } - - .uui-color-purple { - --uui-color-5: var(--purple-5); - --uui-color-10: var(--purple-10); - --uui-color-20: var(--purple-20); - --uui-color-50: var(--purple-50); - --uui-color-60: var(--purple-60); - --uui-color-70: var(--purple-70); - --uui-color-contrast: var(--white); - } - - .uui-color-violet { - --uui-color-5: var(--violet-5); - --uui-color-10: var(--violet-10); - --uui-color-20: var(--violet-20); - --uui-color-50: var(--violet-50); - --uui-color-60: var(--violet-60); - --uui-color-70: var(--violet-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cobalt { - --uui-color-5: var(--cobalt-5); - --uui-color-10: var(--cobalt-10); - --uui-color-20: var(--cobalt-20); - --uui-color-50: var(--cobalt-50); - --uui-color-60: var(--cobalt-60); - --uui-color-70: var(--cobalt-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cyan { - --uui-color-5: var(--cyan-5); - --uui-color-10: var(--cyan-10); - --uui-color-20: var(--cyan-20); - --uui-color-50: var(--cyan-50); - --uui-color-60: var(--cyan-60); - --uui-color-70: var(--cyan-70); - --uui-color-contrast: var(--night700); - } - - .uui-color-mint { - --uui-color-5: var(--mint-5); - --uui-color-10: var(--mint-10); - --uui-color-20: var(--mint-20); - --uui-color-50: var(--mint-50); - --uui-color-60: var(--mint-60); - --uui-color-70: var(--mint-70); - --uui-color-contrast: var(--night700); - } - - /* override variables */ - - /* isInvalid color */ - - .uui-invalid:is(.uui-input-box, .uui-radio-input-container, .uui-checkbox-container) { - --uui-error-50: var(--uui-error-60); - } - - /* Accordion */ - - .uui-accordion-container { - --uui-accordion-border-radius: 6px; - } - - /* FileCard */ - - .uui-file_card { - --uui-file_card-border-radius: 6px; - } - - /* Button */ - - .uui-button { - --uui-btn-bg-disabled: var(--uui-neutral-50); - --uui-btn-border-disabled: var(--uui-neutral-50); - - &.uui-fill-solid.uui-color-white { - --uui-btn-bg-active: var(--uui-neutral-20); - - &:active { - background-color: var(--uui-neutral-20); - border-color: var(--uui-neutral-20); - } - } - - &.uui-fill-outline { - --uui-btn-border: var(--uui-color-60); - --uui-btn-border-hover: var(--uui-color-60); - --uui-btn-border-active: var(--uui-color-60); - --uui-btn-caption: var(--uui-color-60); - - &.uui-color-neutral, - &.uui-color-secondary { - --uui-btn-bg-hover: var(--uui-neutral-60); - --uui-btn-bg-active: var(--uui-neutral-50); - --uui-btn-border: var(--uui-neutral-30); - --uui-btn-border-hover: var(--uui-neutral-30); - --uui-btn-border-active: var(--uui-neutral-30); - --uui-btn-caption: var(--uui-neutral-10); - } - - &.uui-color-white { - --uui-btn-caption: var(--uui-neutral-0); - --uui-btn-border: var(--uui-neutral-0); - --uui-btn-border-hover: var(--uui-neutral-0); - --uui-btn-border-active: var(--uui-neutral-0); - } - } - - &.uui-fill-none { - --uui-btn-border: var(--uui-color-60); - --uui-btn-border-hover: var(--uui-color-60); - --uui-btn-border-active: var(--uui-color-60); - --uui-btn-caption: var(--uui-color-60); - - &.uui-color-neutral, - &.uui-color-secondary { - --uui-btn-bg-hover: var(--uui-neutral-60); - --uui-btn-bg-active: var(--uui-neutral-50); - --uui-btn-border: var(--uui-neutral-30); - --uui-btn-border-hover: var(--uui-neutral-30); - --uui-btn-border-active: var(--uui-neutral-30); - --uui-btn-caption: var(--uui-neutral-10); - } - - &.uui-color-white { - --uui-btn-caption: var(--uui-neutral-0); - --uui-btn-border: var(--uui-neutral-0); - --uui-btn-border-hover: var(--uui-neutral-0); - --uui-btn-border-active: var(--uui-neutral-0); - } - } - - &.uui-fill-ghost { - --uui-btn-caption: var(--uui-color-60); - - &.uui-color-neutral, - &.uui-color-secondary { - --uui-btn-bg-hover: var(--uui-neutral-60); - --uui-btn-bg-active: var(--uui-neutral-50); - --uui-btn-border-hover: var(--uui-neutral-60); - --uui-btn-border-active: var(--uui-neutral-50); - --uui-btn-caption: var(--uui-neutral-10); - } - - &.uui-color-white { - --uui-btn-caption: var(--uui-neutral-0); - } - } - } - - .uui-blocker-container { - --uui-blocker-bg: var(--uui-surface-main); - --uui-blocker-bg-with-opacity: #303240CC; - } - - /* Badge */ - - .uui-badge { - &.uui-fill-outline { - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-80); - --uui-count_indicator-border: var(--uui-neutral-40); - --uui-count_indicator-caption: var(--uui-neutral-10); - } - } - } - - .uui-badge.uui-color-neutral, - .uui-badge.uui-color-night300 { - &.uui-fill-solid { - --uui-badge-bg: var(--uui-neutral-30); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-40); - --uui-badge-border-hover: var(--uui-neutral-40); - --uui-badge-caption: var(--uui-neutral-5); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - --uui-count_indicator-caption: var(--uui-neutral-80); - } - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-60); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-50); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-0); - --uui-badge-caption-hover: var(--uui-neutral-5); - } - } - - .uui-badge.uui-color-white { - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-0); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-10); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent); - --uui-count_indicator-caption: var(--uui-neutral-70); - } - } - } - - .uui-badge.uui-color-night100 { - &.uui-fill-solid { - --uui-badge-bg: var(--uui-neutral-10); - --uui-badge-border: var(--uui-neutral-10); - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border-hover: var(--uui-neutral-20); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-10); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent); - --uui-count_indicator-caption: var(--uui-neutral-70); - } - } - } - - .uui-badge.uui-color-night600 { - &.uui-fill-solid { - --uui-badge-bg: var(--uui-neutral-60); - --uui-badge-border: var(--uui-neutral-60); - --uui-badge-bg-hover: var(--uui-neutral-50); - --uui-badge-border-hover: var(--uui-neutral-50); - --uui-badge-caption: var(--white); - --uui-badge-caption-hover: var(--white); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-80); - --uui-badge-border: var(--uui-neutral-60); - --uui-badge-bg-hover: var(--uui-neutral-70); - --uui-badge-border-hover: var(--uui-neutral-60); - --uui-badge-caption: var(--uui-neutral-5); - --uui-badge-caption-hover: var(--uui-neutral-5); - } - } - - /* IconButton */ - - .uui-icon_button:is(.uui-color-info, .uui-color-primary, .uui-color-sky, .uui-color-success, .uui-color-accent, .uui-color-grass .uui-color-error, .uui-color-critical, .uui-color-sun, .uui-color-fire) { - --uui-icon_btn: var(--uui-color-60); - --uui-icon_btn-hover: var(--uui-color-70); - --uui-icon_btn-active: var(--uui-color-70); - } - - .uui-icon_button.uui-color-white { - --uui-icon_btn-hover: var(--uui-neutral-20); - --uui-icon_btn-active: var(--uui-neutral-30); - } - - .uui-icon_button.uui-color-secondary { - --uui-icon_btn: var(--uui-neutral-40); - --uui-icon_btn-hover: var(--uui-neutral-30); - --uui-icon_btn-active: var(--uui-neutral-30); - } - - /* LinkButton */ - - .uui-link_button.uui-color-contrast { - --uui-link_btn-text: var(--uui-neutral-0); - --uui-link_btn-text-hover: var(--uui-neutral-5); - --uui-link_btn-text-active: var(--uui-neutral-10); - } - - .uui-link_button:is(.uui-color-primary, .uui-color-sky, .uui-color-secondary, .uui-color-accent, .uui-color-grass, .uui-color-critical, .uui-color-fire) { - --uui-link_btn-text-disabled: var(--uui-neutral-40); - } - - .uui-link_button.uui-color-primary, - .uui-link_button.uui-color-sky { - --uui-link_btn-text: var(--uui-color-60); - --uui-link_btn-text-hover: var(--uui-color-70); - } - - .uui-link_button.uui-color-secondary { - --uui-link_btn-text: var(--uui-neutral-30); - --uui-link_btn-text-hover: var(--uui-neutral-20); - --uui-link_btn-text-active: var(--uui-neutral-10); - } - - .uui-link_button.uui-color-white { - --uui-link_btn-text: var(--uui-neutral-5); - --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); - } - - /* TubButton */ - - .uui-tab-button { - --uui-tab_btn-text-hover: var(--uui-primary-60); - --uui-tab_btn-text-active: var(--uui-primary-60); - } - - /* MainMenu */ - - .uui-main_menu { - --uui-main_menu-text: var(--uui-neutral-0); - --uui-main_menu-text-active: var(--uui-neutral-0); - --uui-main_menu-bg: var(--uui-neutral-70); - - --uui-main_menu-search-bg: var(--uui-neutral-5); - --uui-main_menu-search-border: var(--uui-neutral-40); - --uui-main_menu-search-placeholder: var(--uui-text-tertiary); - --uui-main_menu-search-text: var(--uui-text-primary); - --uui-main_menu-search-icon: var(--uui-neutral-70); - - --uui-main_menu-icon: var(--uui-neutral-5); - --uui-main_menu-icon-hover: var(--uui-neutral-5); - --uui-main_menu-icon-active: var(--uui-neutral-5); - } - - .uui-main_menu-dropdown { - --uui-main_menu-text: var(--uui-neutral-0); - --uui-main_menu-text-active: var(--uui-neutral-0); - --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70); - } - - /* BurgerMenu */ - - .uui-burger { - --uui-burger_menu-bg: var(--uui-app-bg); - --uui-burger_menu-bg-hover: var(--uui-app-bg); - --uui-burger_menu-caption: var(--uui-neutral-90); - --uui-burger_menu-icon: var(--uui-neutral-5); - --uui-burger_menu-item: var(--uui-app-bg); - } - - /* BurgerButton */ - .uui-main_menu-burger-button { - --uui-burger_btn_caption: var(--uui-neutral-0); - --uui-burger_btn_caption-hover: var(--uui-primary-50); - --uui-burger_btn_caption-active: var(--uui-primary-50); - --uui-burger_btn-border: var(--uui-neutral-40); - } - - /* BurgerSearch */ - - .uui-main_menu-burger-search { - --uui-burger_search: var(--uui-neutral-0); - --uui-burger_search-fill: var(--uui-neutral-70); - --uui-burger_search-bg: var(--uui-neutral-40); - --uui-burger_search-placeholder: var(--uui-text-tertiary); - } - - /* Tooltip */ - - .uui-tooltip-container.uui-color-neutral { - --uui-tooltip-border: var(--uui-neutral-50); - } - - .uui-tooltip-container.uui-color-white { - --uui-tooltip-bg: var(--uui-neutral-10); - } - - .uui-tooltip-container.uui-color-critical { - --uui-tooltip-bg: var(--uui-critical-50); - } - - .uui-tooltip-container.uui-color-inverted { - --uui-tooltip-bg: var(--uui-neutral-10); - --uui-tooltip-text: var(--uui-neutral-70); - } - - /* CountIndicator */ - - .uui-count_indicator:is(.uui-color-neutral, .uui-color-gray, .uui-color-info, .uui-color-sky, .uui-color-grass, .uui-color-success, .uui-color-critical, .uui-color-fire, .uui-color-warning, .uui-color-sun) { - --uui-count_indicator-bg: var(--uui-color-60); - --uui-count_indicator-border: var(--uui-color-60); - - &.uui-color-neutral, &.uui-color-gray { - --uui-count_indicator-caption: var(--uui-neutral-10); - } - } - - /* Status Indicator */ - - .uui-status_indicator.uui-color-white.uui-fill-outline { - .uui-status_indicator-dot { - background-color: color-mix(in srgb, var(--white) 20%, transparent); - border: 1px solid var(--white); - } - } - - .uui-status_indicator.uui-color-night600, - .uui-status_indicator.uui-color-neutral { - .uui-status_indicator-dot { - background-color: var(--uui-neutral-30); - } - - &.uui-fill-outline { - .uui-status_indicator-dot { - background-color: color-mix(in srgb, var(--uui-neutral-30) 20%, transparent); - border: 1px solid var(--uui-neutral-30); - } - } - } - - /* Alert */ - - .uui-alert.uui-color-info { - --uui-alert-icon: var(--uui-color-60); - --uui-alert-border: var(--uui-color-60); - } - - .uui-alert.uui-color-success { - --uui-alert-icon: var(--uui-color-60); - --uui-alert-border: var(--uui-color-60); - } - - .uui-alert.uui-color-warning { - --uui-alert-icon: var(--uui-color-60); - --uui-alert-border: var(--uui-color-60); - } - - .uui-alert.uui-color-error { - --uui-alert-icon: var(--uui-color-60); - --uui-alert-border: var(--uui-color-60); - } - - /* Tag */ - - .uui-tag { - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--white) 10%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--white) 50%, transparent); - } - - &.uui-fill-outline { - --uui-tag-caption: var(--uui-neutral-0); - --uui-tag-fill: var(--uui-neutral-0); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-70); - --uui-count_indicator-border: var(--uui-neutral-40); - --uui-count_indicator-caption: var(--uui-neutral-10); - } - } - - &.uui-color-neutral, - &.uui-color-night300 { - &.uui-fill-solid { - --uui-tag-caption: var(--uui-neutral-0); - --uui-tag-fill: var(--uui-neutral-0); - --uui-tag-bg: var(--uui-neutral-50); - --uui-tag-border: var(--uui-neutral-50); - --uui-tag-bg-hover: var(--uui-neutral-60); - --uui-tag-border-hover: var(--uui-neutral-60); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-30); - --uui-tag-border: var(--uui-neutral-20); - --uui-tag-bg-hover: var(--uui-neutral-40); - --uui-tag-border-hover: var(--uui-neutral-20); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-40); - --uui-count_indicator-border: var(--uui-neutral-40); - --uui-count_indicator-caption: var(--uui-neutral-10); - } - } - } - - &.uui-color-white { - &.uui-fill-solid { - --uui-tag-bg-hover: var(--uui-neutral-5); - --uui-tag-border-hover: var(--uui-neutral-5); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-40); - --uui-count_indicator-border: var(--uui-neutral-40); - --uui-count_indicator-caption: var(--uui-neutral-10); - } - } - - &.uui-fill-outline { - --uui-tag-bg: color-mix(in srgb, var(--white) 5%, transparent); - --uui-tag-border: var(--uui-neutral-0); - --uui-tag-bg-hover: color-mix(in srgb, var(--white) 10%, transparent); - --uui-tag-border-hover: var(--uui-neutral-0); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-40); - --uui-count_indicator-border: var(--uui-neutral-40); - } - } - } - - &.uui-color-night100 { - &.uui-fill-solid { - --uui-tag-caption: var(--uui-neutral-80); - --uui-tag-fill: var(--uui-neutral-80); - --uui-tag-bg: var(--uui-neutral-10); - --uui-tag-border: var(--uui-neutral-40); - --uui-tag-bg-hover: var(--uui-neutral-5); - --uui-tag-border-hover: var(--uui-neutral-30); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-40); - --uui-count_indicator-border: var(--uui-neutral-40); - --uui-count_indicator-caption: var(--uui-neutral-10); - } - } - - &.uui-fill-outline { - --uui-tag-bg: color-mix(in srgb, var(--uui-neutral-0) 12%, transparent); - --uui-tag-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 15%, transparent); - --uui-tag-border: var(--uui-neutral-20); - --uui-tag-border-hover: var(--uui-neutral-20); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-40); - --uui-count_indicator-border: var(--uui-neutral-40); - --uui-count_indicator-caption: var(--uui-neutral-10); - } - } - } - - &.uui-color-night700 { - &.uui-fill-solid { - --uui-tag-caption: var(--uui-neutral-0); - --uui-tag-fill: var(--uui-neutral-0); - --uui-tag-bg: var(--uui-neutral-70); - --uui-tag-border: var(--uui-neutral-70); - --uui-tag-bg-hover: var(--uui-neutral-60); - --uui-tag-border-hover: var(--uui-neutral-60); - - .uui-count_indicator { - --uui-count_indicator-caption: var(--uui-neutral-0); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-80); - --uui-tag-border: var(--uui-neutral-40); - --uui-tag-bg-hover: var(--uui-neutral-70); - --uui-tag-border-hover: var(--uui-neutral-40); - - .uui-count_indicator { - --uui-count_indicator-caption: var(--uui-neutral-0); - --uui-count_indicator-bg: var(--uui-neutral-70); - --uui-count_indicator-border: var(--uui-neutral-40); - } - } - } - - &.uui-color-warning, - &.uui-color-sun { - &.uui-fill-solid { - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-5) 5%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-70) 30%, transparent); - } - } - } - } - - .uui-presets-panel-input .uui-icon-cancel { - &:hover { - background-color: var(--uui-neutral-60); - } - - &:active { - background-color: var(--uui-neutral-50); - } - } - - .uui-scroll-bars { - --uui-scroll_bars-bg: var(--uui-neutral-40); - --uui-scroll_bars-bg-active: var(--uui-neutral-30); - } - - .uui-text-placeholder { - --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-30) 0, var(--uui-neutral-50) 150px, var(--uui-neutral-30) 300px); - } - - .uui-dt-vars { - --uui-dt-header-row-bg: var(--uui-surface-sunken); - } - - .uui-filters-panel-item-toggler { - --uui-filters_toggler-bg-hover: var(--uui-neutral-30); - } - - /* DropdownMenu */ - - .uui-dropdownMenu-body { - --uui-dropdown-selected_mark: var(--uui-info-60); - } - - /* PickerInput */ - - .uui-picker_input-body { - --uui-picker_input-selected_mark: var(--uui-info-60); - } - - /* fonts */ - - .uui-font-sans { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 400; - } - - .uui-font-sans-semibold { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 600; - - } - - .uui-font-sans-light { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 300; - } - - /* Text */ - - .uui-text.uui-color-sky { - --uui-text: var(--sky-70); - } - - .uui-text.uui-color-grass { - --uui-text: var(--grass-70); - } - - .uui-text.uui-color-sun { - --uui-text: var(--sun-70); - } - - .uui-text.uui-color-fire { - --uui-text: var(--fire-70); - } - - .uui-text.uui-color-night50 { - --uui-text: var(--night50); - } - - .uui-text.uui-color-night300 { - --uui-text: var(--night300); - } - - .uui-text.uui-color-night400 { - --uui-text: var(--night400); - } - - .uui-text.uui-color-night500 { - --uui-text: var(--night500); - } - - .uui-text.uui-color-night600 { - --uui-text: var(--night600); - } - - .uui-text.uui-color-night700 { - --uui-text: var(--night700); - } - - .uui-text.uui-color-night800 { - --uui-text: var(--night800); - } - - .uui-text.uui-color-night900 { - --uui-text: var(--night900); - } - - /* Typography */ - - .uui-typography { - .uui-highlight { - background-color: var(--uui-warning-20); - } - - h1 { - font-weight: 600; - } - - h2 { - font-weight: 700; - } - - h3 { - font-weight: 600; - } - - .hero-header { - font-size: 72px; - line-height: 72px; - font-weight: 700; - } - } -} +@use 'variables/6px_grid' as *; +@use 'variables/loveship_dark' as *; .uui-theme-loveship_dark { - @include theme-loveship_dark(); + @include loveship_dark_variables(); @include uui-6px-grid(); } diff --git a/epam-assets/theme/theme_promo.scss b/epam-assets/theme/theme_promo.scss index 899f1fa1cc..24979742a1 100644 --- a/epam-assets/theme/theme_promo.scss +++ b/epam-assets/theme/theme_promo.scss @@ -1,606 +1,9 @@ @use '../scss/promo/font-faces'; -@use './theme_6px' as *; -@use './tokens/_theme_promo.scss' as tokens; -/* Name convention */ -/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ - -@mixin theme-promo { - --uui-font: 'Source Sans Pro', sans-serif; - --uui-font-mono: 'Roboto Mono', monospace; - - // theme specific fonts - --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif; - --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif; - - /* shadows */ - --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1); - --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05); - --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05); - - @include tokens.theme-tokens; - - & { - --uui-border-radius: 0; - } - - /* begin color classes */ - - .uui-color-green { - --uui-color-5: var(--uui-accent-5); - --uui-color-10: var(--uui-accent-10); - --uui-color-20: var(--uui-accent-20); - --uui-color-50: var(--uui-accent-50); - --uui-color-60: var(--uui-accent-60); - --uui-color-70: var(--uui-accent-70); - --uui-color-contrast: var(--uui-accent-contrast); - } - - .uui-color-blue { - --uui-color-5: var(--uui-primary-5); - --uui-color-10: var(--uui-primary-10); - --uui-color-20: var(--uui-primary-20); - --uui-color-50: var(--uui-primary-50); - --uui-color-60: var(--uui-primary-60); - --uui-color-70: var(--uui-primary-70); - --uui-color-contrast: var(--uui-primary-contrast); - } - - .uui-color-gray { - --uui-color-5: var(--uui-secondary-5); - --uui-color-10: var(--uui-secondary-10); - --uui-color-20: var(--uui-secondary-20); - --uui-color-50: var(--uui-secondary-50); - --uui-color-60: var(--uui-secondary-60); - --uui-color-70: var(--uui-secondary-70); - --uui-color-contrast: var(--uui-secondary-contrast); - } - - .uui-color-red { - --uui-color-5: var(--uui-critical-5); - --uui-color-10: var(--uui-critical-10); - --uui-color-20: var(--uui-critical-20); - --uui-color-50: var(--uui-critical-50); - --uui-color-60: var(--uui-critical-60); - --uui-color-70: var(--uui-critical-70); - --uui-color-contrast: var(--uui-critical-contrast); - } - - .uui-color-amber { - --uui-color-5: var(--uui-warning-5); - --uui-color-10: var(--uui-warning-10); - --uui-color-20: var(--uui-warning-20); - --uui-color-50: var(--uui-warning-50); - --uui-color-60: var(--uui-warning-60); - --uui-color-70: var(--uui-warning-70); - --uui-color-contrast: var(--uui-warning-contrast); - } - - .uui-link_button.uui-color-contrast, - .uui-color-gray10 { - --uui-color-5: var(--white); - --uui-color-10: var(--white); - --uui-color-20: var(--gray5); - --uui-color-50: var(--gray10); - --uui-color-60: var(--gray20); - --uui-color-70: var(--gray30); - --uui-color-contrast: var(--gray70); - } - - .uui-color-gray30 { - --uui-color-5: var(--gray20); - --uui-color-10: var(--gray30); - --uui-color-20: var(--gray40); - --uui-color-50: var(--gray30); - --uui-color-60: var(--gray40); - --uui-color-70: var(--gray50); - --uui-color-contrast: var(--gray80); - } - - .uui-color-gray50 { - --uui-color-5: var(--gray5); - --uui-color-10: var(--gray10); - --uui-color-20: var(--gray20); - --uui-color-50: var(--gray50); - --uui-color-60: var(--gray60); - --uui-color-70: var(--gray70); - --uui-color-contrast: var(--gray80); - } - - .uui-color-gray60 { - --uui-color-5: var(--gray20); - --uui-color-10: var(--gray60); - --uui-color-20: var(--gray40); - --uui-color-50: var(--gray60); - --uui-color-60: var(--gray70); - --uui-color-70: var(--gray80); - --uui-color-contrast: var(--white); - } - - .uui-color-yellow { - --uui-color-5: var(--yellow-5); - --uui-color-10: var(--yellow-10); - --uui-color-20: var(--yellow-20); - --uui-color-50: var(--yellow-50); - --uui-color-60: var(--yellow-60); - --uui-color-70: var(--yellow-70); - --uui-color-contrast: var(--gray80); - } - - .uui-color-orange { - --uui-color-5: var(--orange-5); - --uui-color-10: var(--orange-10); - --uui-color-20: var(--orange-20); - --uui-color-50: var(--orange-50); - --uui-color-60: var(--orange-60); - --uui-color-70: var(--orange-70); - --uui-color-contrast: var(--gray80); - } - - .uui-color-fuchsia { - --uui-color-5: var(--fuchsia-5); - --uui-color-10: var(--fuchsia-10); - --uui-color-20: var(--fuchsia-20); - --uui-color-50: var(--fuchsia-50); - --uui-color-60: var(--fuchsia-60); - --uui-color-70: var(--fuchsia-70); - --uui-color-contrast: var(--white); - } - - .uui-color-purple { - --uui-color-5: var(--purple-5); - --uui-color-10: var(--purple-10); - --uui-color-20: var(--purple-20); - --uui-color-50: var(--purple-50); - --uui-color-60: var(--purple-60); - --uui-color-70: var(--purple-70); - --uui-color-contrast: var(--white); - } - - .uui-color-violet { - --uui-color-5: var(--violet-5); - --uui-color-10: var(--violet-10); - --uui-color-20: var(--violet-20); - --uui-color-50: var(--violet-50); - --uui-color-60: var(--violet-60); - --uui-color-70: var(--violet-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cobalt { - --uui-color-5: var(--cobalt-5); - --uui-color-10: var(--cobalt-10); - --uui-color-20: var(--cobalt-20); - --uui-color-50: var(--cobalt-50); - --uui-color-60: var(--cobalt-60); - --uui-color-70: var(--cobalt-70); - --uui-color-contrast: var(--white); - } - - .uui-color-cyan { - --uui-color-5: var(--cyan-5); - --uui-color-10: var(--cyan-10); - --uui-color-20: var(--cyan-20); - --uui-color-50: var(--cyan-50); - --uui-color-60: var(--cyan-60); - --uui-color-70: var(--cyan-70); - --uui-color-contrast: var(--gray80); - } - - .uui-color-mint { - --uui-color-5: var(--mint-5); - --uui-color-10: var(--mint-10); - --uui-color-20: var(--mint-20); - --uui-color-50: var(--mint-50); - --uui-color-60: var(--mint-60); - --uui-color-70: var(--mint-70); - --uui-color-contrast: var(--gray80); - } - - /* Badge */ - - .uui-badge.uui-color-white { - &.uui-fill-solid { - --uui-badge-bg-hover: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-30); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-0); - --uui-badge-bg-hover: var(--uui-neutral-10); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-80); - --uui-badge-caption-hover: var(--uui-neutral-80); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); - } - } - } - - .uui-badge.uui-color-neutral, - .uui-badge.uui-color-gray30 { - &.uui-fill-solid { - --uui-badge-bg: var(--uui-neutral-30); - --uui-badge-bg-hover: var(--uui-neutral-40); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-40); - --uui-color-contrast: var(--uui-neutral-80); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - } - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-20); - --uui-badge-border: var(--uui-neutral-40); - --uui-badge-border-hover: var(--uui-neutral-40); - --uui-badge-bg-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-80); - --uui-badge-caption-hover: var(--uui-neutral-80); - } - } - - .uui-badge.uui-color-gray10 { - &.uui-fill-solid { - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border-hover: var(--uui-neutral-20); - } - - &.uui-fill-outline { - --uui-badge-bg: var(--uui-neutral-10); - --uui-badge-bg-hover: var(--uui-neutral-20); - --uui-badge-border: var(--uui-neutral-30); - --uui-badge-border-hover: var(--uui-neutral-30); - --uui-badge-caption: var(--uui-neutral-70); - --uui-badge-caption-hover: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); - } - } - } - - .uui-badge.uui-color-gray60 { - &.uui-fill-outline { - --uui-badge-bg-hover: var(--uui-neutral-30); - --uui-badge-border: var(--uui-neutral-60); - --uui-badge-border-hover: var(--uui-neutral-60); - --uui-badge-caption: var(--uui-neutral-80); - --uui-badge-caption-hover: var(--uui-neutral-80); - } - } - - .uui-badge.uui-color-yellow.uui-fill-outline { - --uui-badge-border: var(--yellow-20); - } - - /* Button */ - - .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) { - --uui-btn-caption: var(--uui-neutral-70); - } - - .uui-button { - &.uui-size-42, &.uui-size-48 { - .uui-caption { - font-family: var(--font-museo-sans); - } - } - } - - /* IconButton */ - - .uui-icon_button.uui-color-neutral, - .uui-icon_button.uui-color-gray60 { - --uui-icon_btn: var(--uui-neutral-60); - --uui-icon_btn-hover: var(--uui-neutral-70); - --uui-icon_btn-active: var(--uui-neutral-80); - } - - .uui-icon_button.uui-color-secondary { - --uui-icon_btn: var(--uui-neutral-50); - --uui-icon_btn-hover: var(--uui-neutral-60); - --uui-icon_btn-active: var(--uui-neutral-70); - } - - .uui-icon_button.uui-color-white { - --uui-icon_btn-hover: var(--uui-neutral-20); - --uui-icon_btn-active: var(--uui-neutral-30); - } - - /* LinkButton */ - - .uui-link_button.uui-color-white { - --uui-link_btn-text-hover: var(--uui-neutral-30); - --uui-link_btn-text-active: var(--uui-neutral-40); - --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); - } - - /* Tooltip */ - - .uui-tooltip-container.uui-color-white { - --uui-tooltip-bg: var(--uui-neutral-0); - --uui-tooltip-text: var(--uui-neutral-80); - } - - .uui-tooltip-container.uui-color-red { - --uui-tooltip-bg: var(--uui-critical-60); - } - - .uui-tooltip-container.uui-color-gray { - --uui-tooltip-bg: var(--uui-neutral-80); - --uui-tooltip-text: var(--uui-neutral-5); - } - - /* CountIndicator */ - - .uui-count_indicator.uui-color-gray, - .uui-count_indicator.uui-color-neutral { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - - .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) { - --uui-count_indicator-caption: var(--uui-neutral-70); - } - - /* Status Indicator */ - - .uui-status_indicator.uui-color-white.uui-fill-outline { - .uui-status_indicator-dot { - background-color: color-mix(in srgb, var(--white) 20%, transparent); - border: 1px solid var(--uui-neutral-40); - } - } - - /* FlexRow */ - - .uui-flex-row.uui-color-none { - --uui-flex-row-bg: transparent; - } - - .uui-flex-row.uui-color-white { - --uui-flex-row-bg: var(--white); - } - - .uui-flex-row.uui-color-gray5 { - --uui-flex-row-bg: var(--gray5); - } - - .uui-panel.uui-color-white { - --uui-panel-bg: var(--white); - } - - .uui-panel.uui-color-gray90 { - --uui-panel-bg: var(--gray90); - } - - /* Text */ - - .uui-text.uui-color-gray5 { - --uui-text: var(--gray5); - } - - .uui-text.uui-color-gray80 { - --uui-text: var(--gray80); - } - - .uui-text.uui-color-gray90 { - --uui-text: var(--gray90); - } - - .uui-text.uui-color-blue { - --uui-text: var(--blue-70); - } - - .uui-text.uui-color-green { - --uui-text: var(--green-70); - } - - .uui-text.uui-color-amber { - --uui-text: var(--amber-70); - } - - .uui-text.uui-color-red { - --uui-text: var(--red-70); - } - - /* Tag */ - - .uui-tag { - --uui-border-radius: 3px; - - &.uui-color-white { - &.uui-fill-solid { - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border-hover: var(--uui-neutral-10); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-0); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border-hover: var(--uui-neutral-30); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-gray10 { - &.uui-fill-solid { - --uui-tag-bg-hover: var(--uui-neutral-20); - --uui-tag-border-hover: var(--uui-neutral-20); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-5); - --uui-tag-bg-hover: var(--uui-neutral-10); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-border-hover: var(--uui-neutral-30); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-neutral, - &.uui-color-gray30 { - &.uui-fill-solid { - --uui-tag-bg: var(--uui-neutral-30); - --uui-tag-bg-hover: var(--uui-neutral-40); - --uui-tag-border: var(--uui-neutral-30); - --uui-tag-border-hover: var(--uui-neutral-40); - --uui-tag-caption: var(--uui-neutral-70); - --uui-tag-fill: var(--uui-neutral-70); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-0); - --uui-count_indicator-caption: var(--uui-neutral-70); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-20); - --uui-tag-bg-hover: var(--uui-neutral-30); - --uui-tag-border: var(--uui-neutral-40); - --uui-tag-border-hover: var(--uui-neutral-40); - - .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-30); - --uui-count_indicator-border: var(--uui-neutral-30); - } - } - } - - &.uui-color-gray70 { - &.uui-fill-solid { - --uui-tag-caption: var(--uui-neutral-0); - --uui-tag-fill: var(--uui-neutral-0); - --uui-tag-bg: var(--uui-neutral-70); - --uui-tag-border: var(--uui-neutral-70); - --uui-tag-bg-hover: var(--uui-neutral-80); - --uui-tag-border-hover: var(--uui-neutral-80); - - .uui-count_indicator { - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent); - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent); - --uui-count_indicator-caption: var(--uui-neutral-0); - } - } - - &.uui-fill-outline { - --uui-tag-bg: var(--uui-neutral-20); - --uui-tag-bg-hover: var(--uui-neutral-30); - --uui-tag-border: var(--uui-neutral-50); - --uui-tag-border-hover: var(--uui-neutral-50); - - } - } - - &.uui-color-warning, - &.uui-color-amber { - &.uui-fill-solid { - --uui-tag-caption: var(--uui-text-primary); - --uui-tag-fill: var(--uui-neutral-90); - - .uui-count_indicator { - --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent); - --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent); - } - } - - &.uui-fill-outline .uui-count_indicator { - --uui-count_indicator-bg: var(--uui-neutral-0); - --uui-count_indicator-border: var(--uui-neutral-40); - } - } - } - - .uui-dropdown-body { - --uui-dropdown_container-border-radius: 0; - } - - .uui-link_button { - &.uui-size-42, &.uui-size-48 { - :global(.uui-caption) { - font-family: var(--font-museo-sans); - text-transform: uppercase; - } - } - } - - /* fonts */ - - .uui-font-sans { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 400; - } - - .uui-font-sans-semibold { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 600; - } - - .uui-font-sans-italic { - --uui-text-font: var(--uui-font); - --uui-text-font-weight: 400; - --uui-text-font-style: italic; - } - - .uui-font-museo-sans { - --uui-text-font: var(--font-museo-sans); - --uui-text-font-weight: normal; - } - - .uui-font-museo-slab { - --uui-text-font: var(--font-museo-slab); - --uui-text-font-weight: normal; - } - - /* Typography */ - - .uui-typography { - h1, h2, h3 { - font-family: var(--font-museo-sans); - } - - h1 { - font-size: 36px; - } - - .hero-header { - font-family: var(--font-museo-slab); - } - - .promo-header:is(h1, h2, h3) { - font-family: var(--font-museo-sans); - } - } -} +@use 'variables/6px_grid' as *; +@use 'variables/promo' as *; .uui-theme-promo { - @include theme-promo(); + @include promo_variables(); @include uui-6px-grid(); } diff --git a/epam-assets/theme/theme_vanilla_thunder.scss b/epam-assets/theme/theme_vanilla_thunder.scss index 511935ad0c..e83b170f82 100644 --- a/epam-assets/theme/theme_vanilla_thunder.scss +++ b/epam-assets/theme/theme_vanilla_thunder.scss @@ -1,4 +1,4 @@ -@use './theme_6px' as *; +@use './variables/6px_grid' as *; /* Name convention */ /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ diff --git a/epam-assets/theme/theme_6px.scss b/epam-assets/theme/variables/6px_grid.scss similarity index 100% rename from epam-assets/theme/theme_6px.scss rename to epam-assets/theme/variables/6px_grid.scss diff --git a/epam-assets/theme/variables/electric.scss b/epam-assets/theme/variables/electric.scss new file mode 100644 index 0000000000..2b968bdc1f --- /dev/null +++ b/epam-assets/theme/variables/electric.scss @@ -0,0 +1,508 @@ +@use 'tokens/_theme_electric.scss' as tokens; + +/* Name convention */ +/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ + +@mixin electric-variables { + --uui-font: 'Source Sans Pro', sans-serif; + --uui-font-mono: 'Roboto Mono', monospace; + + // theme specific fonts + --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif; + + --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%); + --gradient-2: linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%); + --gradient-3: linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%); + --gradient-4: linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%); + --gradient-5: linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%); + + /* shadows */ + --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1); + --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05); + --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05); + + @include tokens.theme-tokens; + + & { + --uui-border-radius: 3px; + } + + /* begin color classes */ + .uui-color-fire { + --uui-color-5: var(--uui-critical-5); + --uui-color-10: var(--uui-critical-10); + --uui-color-20: var(--uui-critical-20); + --uui-color-50: var(--uui-critical-50); + --uui-color-60: var(--uui-critical-60); + --uui-color-70: var(--uui-critical-70); + --uui-color-contrast: var(--white); + } + + .uui-color-night100 { + --uui-color-5: var(--white); + --uui-color-10: var(--white); + --uui-color-20: var(--night50); + --uui-color-50: var(--night100); + --uui-color-60: var(--night200); + --uui-color-70: var(--night300); + --uui-color-contrast: var(--uui-neutral-70); + } + + .uui-color-night300 { + --uui-color-5: var(--night50); + --uui-color-10: var(--night100); + --uui-color-20: var(--night200); + --uui-color-50: var(--night300); + --uui-color-60: var(--night400); + --uui-color-70: var(--night500); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-night600 { + --uui-color-5: var(--uui-secondary-5); + --uui-color-10: var(--uui-secondary-10); + --uui-color-20: var(--uui-secondary-20); + --uui-color-50: var(--uui-secondary-50); + --uui-color-60: var(--uui-secondary-60); + --uui-color-70: var(--uui-secondary-70); + --uui-color-contrast: var(--white); + } + + .uui-color-night700 { + --uui-color-5: var(--night400); + --uui-color-10: var(--night500); + --uui-color-20: var(--night600); + --uui-color-50: var(--night700); + --uui-color-60: var(--night800); + --uui-color-70: var(--night900); + --uui-color-contrast: var(--white); + } + + .uui-color-sun { + --uui-color-5: var(--sun-5); + --uui-color-10: var(--sun-10); + --uui-color-20: var(--sun-20); + --uui-color-50: var(--sun-50); + --uui-color-60: var(--sun-60); + --uui-color-70: var(--sun-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-yellow { + --uui-color-5: var(--yellow-5); + --uui-color-10: var(--yellow-10); + --uui-color-20: var(--yellow-20); + --uui-color-50: var(--yellow-50); + --uui-color-60: var(--yellow-60); + --uui-color-70: var(--yellow-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-orange { + --uui-color-5: var(--orange-5); + --uui-color-10: var(--orange-10); + --uui-color-20: var(--orange-20); + --uui-color-50: var(--orange-50); + --uui-color-60: var(--orange-60); + --uui-color-70: var(--orange-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-fuchsia { + --uui-color-5: var(--fuchsia-5); + --uui-color-10: var(--fuchsia-10); + --uui-color-20: var(--fuchsia-20); + --uui-color-50: var(--fuchsia-50); + --uui-color-60: var(--fuchsia-60); + --uui-color-70: var(--fuchsia-70); + --uui-color-contrast: var(--white); + } + + .uui-color-purple { + --uui-color-5: var(--purple-5); + --uui-color-10: var(--purple-10); + --uui-color-20: var(--purple-20); + --uui-color-50: var(--purple-50); + --uui-color-60: var(--purple-60); + --uui-color-70: var(--purple-70); + --uui-color-contrast: var(--white); + } + + .uui-color-violet { + --uui-color-5: var(--violet-5); + --uui-color-10: var(--violet-10); + --uui-color-20: var(--violet-20); + --uui-color-50: var(--violet-50); + --uui-color-60: var(--violet-60); + --uui-color-70: var(--violet-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cobalt { + --uui-color-5: var(--cobalt-5); + --uui-color-10: var(--cobalt-10); + --uui-color-20: var(--cobalt-20); + --uui-color-50: var(--cobalt-50); + --uui-color-60: var(--cobalt-60); + --uui-color-70: var(--cobalt-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cyan { + --uui-color-5: var(--cyan-5); + --uui-color-10: var(--cyan-10); + --uui-color-20: var(--cyan-20); + --uui-color-50: var(--cyan-50); + --uui-color-60: var(--cyan-60); + --uui-color-70: var(--cyan-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-mint { + --uui-color-5: var(--mint-5); + --uui-color-10: var(--mint-10); + --uui-color-20: var(--mint-20); + --uui-color-50: var(--mint-50); + --uui-color-60: var(--mint-60); + --uui-color-70: var(--mint-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + /* Accordion */ + + .uui-accordion-container { + --uui-accordion-border-radius: 6px; + } + + /* FileCard */ + + .uui-file_card { + --uui-file_card-border-radius: 6px; + } + + /* Badge */ + + .uui-badge.uui-color-white { + &.uui-fill-solid { + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-0); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-10); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); + } + } + } + + .uui-badge.uui-color-neutral { + --uui-badge-caption: var(--uui-neutral-95); + + &.uui-fill-solid { + --uui-badge-bg: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-40); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-40); + --uui-color-contrast: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + } + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-40); + --uui-badge-border-hover: var(--uui-neutral-40); + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-night100 { + &.uui-fill-solid { + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border-hover: var(--uui-neutral-20); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-10); + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); + } + } + } + + .uui-badge.uui-color-night600 { + &.uui-fill-outline { + --uui-badge-border: var(--uui-neutral-60); + --uui-badge-border-hover: var(--uui-neutral-60); + --uui-badge-caption: var(--uui-neutral-95); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-yellow.uui-fill-outline { + --uui-badge-border: var(--yellow-20); + } + + /* Button */ + + .uui-button:is(.uui-color-secondary, .uui-color-neutral):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) { + --uui-btn-caption: var(--uui-neutral-70); + } + + /* IconButton */ + + .uui-icon_button.uui-color-neutral { + --uui-color-5: var(--uui-secondary-5); + --uui-color-10: var(--uui-secondary-10); + --uui-color-20: var(--uui-secondary-20); + --uui-color-50: var(--uui-secondary-50); + --uui-color-60: var(--uui-secondary-60); + --uui-color-70: var(--uui-secondary-70); + --uui-color-contrast: var(--white); + } + + .uui-icon_button.uui-color-white { + --uui-icon_btn-hover: var(--uui-neutral-20); + --uui-icon_btn-active: var(--uui-neutral-30); + } + + /* LinkButton */ + + .uui-link_button.uui-color-contrast { + --uui-link_btn-text: var(--uui-neutral-5); + --uui-link_btn-text-hover: var(--uui-neutral-10); + --uui-link_btn-text-active: var(--uui-neutral-20); + } + + .uui-link_button.uui-color-white { + --uui-link_btn-text: var(--uui-neutral-5); + --uui-link_btn-text-hover: var(--uui-neutral-30); + --uui-link_btn-text-active: var(--uui-neutral-40); + --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); + } + + /* CountIndicator */ + + .uui-count_indicator.uui-color-neutral { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + + .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) { + --uui-count_indicator-caption: var(--uui-neutral-70); + } + + /* Status Indicator */ + + .uui-status_indicator.uui-color-white.uui-fill-outline { + .uui-status_indicator-dot { + background-color: color-mix(in srgb, var(--white) 20%, transparent); + border: 1px solid var(--uui-neutral-40); + } + } + + /* MainMenu */ + + .uui-main_menu { + --uui-main_menu-bg: var(--uui-neutral-95); + --uui-main_menu-hover: var(--uui-neutral-90); + --uui-main_menu-border-active-gradient: var(--gradient-1); + } + + .uui-main_menu-dropdown { + --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-95); + } + + /* BurgerMenu */ + + .uui-burger { + --uui-burger_menu-bg: var(--uui-neutral-95); + --uui-burger_menu-bg-hover: var(--uui-neutral-95); + --uui-burger_menu-item: var(--uui-neutral-95); + } + + /* Tag */ + + .uui-tag { + &.uui-fill-outline { + --uui-tag-fill: var(--uui-neutral-95); + --uui-tag-caption: var(--uui-text-primary); + } + + &.uui-color-white { + &.uui-fill-solid { + --uui-tag-fill: var(--uui-neutral-95); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-0); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-night100 { + &.uui-fill-solid { + --uui-tag-fill: var(--uui-neutral-95); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + --uui-count_indicator-caption: var(--uui-neutral-70); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-5); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-night700 { + &.uui-fill-solid { + .uui-count_indicator { + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent); + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-50); + --uui-tag-border-hover: var(--uui-neutral-50); + } + } + + &.uui-color-warning, + &.uui-color-sun { + --uui-tag-fill: var(--uui-neutral-100); + + &.uui-fill-solid { + --uui-tag-caption: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent); + --uui-count_indicator-caption: var(--uui-neutral-80); + } + } + + &.uui-fill-outline { + --uui-tag-caption: var(--uui-neutral-95); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-40); + } + } + } + + &.uui-color-neutral { + &.uui-fill-solid { + --uui-tag-bg: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-40); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-40); + --uui-tag-caption: var(--uui-text-primary); + --uui-tag-fill: var(--uui-neutral-95); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + --uui-count_indicator-caption: var(--uui-neutral-70); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-fill: var(--uui-neutral-95); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + } + + /* Typography */ + + .uui-typography { + h1 { + font-weight: 400; + } + + h2, h3, h4, h5 { + font-weight: 600; + } + + .promo-header:is(h1, h2, h3, h4, h5, h6) { + font-family: var(--font-museo-sans); + } + + h1.promo-header { + font-size: 72px; + font-weight: 400; + } + + h2.promo-header { + font-size: 44px; + font-weight: 600; + } + + h3.promo-header { + font-size: 36px; + } + + h4.promo-header { + font-size: 30px; + } + + h5.promo-header { + font-size: 24px; + } + + h6.promo-header { + font-size: 18px; + } + } +} \ No newline at end of file diff --git a/epam-assets/theme/variables/loveship.scss b/epam-assets/theme/variables/loveship.scss new file mode 100644 index 0000000000..dbd57e2370 --- /dev/null +++ b/epam-assets/theme/variables/loveship.scss @@ -0,0 +1,586 @@ +@use 'tokens/_theme_loveship_light.scss' as tokens; +/* Name convention */ +/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ + +@mixin loveship-variables { + --uui-font: 'Source Sans Pro', sans-serif; + --uui-font-mono: 'Roboto Mono', monospace; + + /* Loveship old colors */ + --uui-color-night100-800: #D3D7E9; + --uui-color-night100-900: #B1B9D8; + + --uui-color-night700-800: #30323D; + --uui-color-night700-900: #1A1B20; + + /* end Loveship old colors */ + + /* shadows */ + --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1); + --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05); + --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05); + + @include tokens.theme-tokens; + + + & { + --uui-border-radius: 3px; + } + + /* begin color classes */ + + .uui-color-grass { + --uui-color-5: var(--uui-accent-5); + --uui-color-10: var(--uui-accent-10); + --uui-color-20: var(--uui-accent-20); + --uui-color-50: var(--uui-accent-50); + --uui-color-60: var(--uui-accent-60); + --uui-color-70: var(--uui-accent-70); + --uui-color-contrast: var(--uui-accent-contrast); + } + + .uui-color-sky { + --uui-color-5: var(--uui-primary-5); + --uui-color-10: var(--uui-primary-10); + --uui-color-20: var(--uui-primary-20); + --uui-color-50: var(--uui-primary-50); + --uui-color-60: var(--uui-primary-60); + --uui-color-70: var(--uui-primary-70); + --uui-color-contrast: var(--uui-primary-contrast); + } + + .uui-color-fire { + --uui-color-5: var(--uui-critical-5); + --uui-color-10: var(--uui-critical-10); + --uui-color-20: var(--uui-critical-20); + --uui-color-50: var(--uui-critical-50); + --uui-color-60: var(--uui-critical-60); + --uui-color-70: var(--uui-critical-70); + --uui-color-contrast: var(--uui-critical-contrast); + } + + .uui-color-night100 { + --uui-color-5: var(--white); + --uui-color-10: var(--white); + --uui-color-20: var(--night50); + --uui-color-50: var(--night100); + --uui-color-60: var(--uui-color-night100-800); + --uui-color-70: var(--uui-color-night100-900); + --uui-color-contrast: var(--uui-neutral-70); + } + + .uui-color-night300 { + --uui-color-5: var(--night50); + --uui-color-10: var(--night100); + --uui-color-20: var(--night200); + --uui-color-50: var(--night300); + --uui-color-60: var(--night400); + --uui-color-70: var(--night500); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-night500 { + --uui-color-5: var(--night200); + --uui-color-10: var(--night300); + --uui-color-20: var(--night400); + --uui-color-50: var(--night500); + --uui-color-60: var(--night600); + --uui-color-70: var(--night700); + --uui-color-contrast: var(--white); + } + + .uui-color-night600, + .uui-color-gray { + --uui-color-5: var(--uui-secondary-5); + --uui-color-10: var(--uui-secondary-10); + --uui-color-20: var(--uui-secondary-20); + --uui-color-50: var(--uui-secondary-50); + --uui-color-60: var(--uui-secondary-60); + --uui-color-70: var(--uui-secondary-70); + --uui-color-contrast: var(--uui-secondary-contrast); + } + + .uui-color-night700 { + --uui-color-5: var(--night400); + --uui-color-10: var(--night500); + --uui-color-20: var(--night600); + --uui-color-50: var(--night700); + --uui-color-60: var(--uui-color-night700-800); + --uui-color-70: var(--uui-color-night700-900); + --uui-color-contrast: var(--white); + } + + .uui-color-sun { + --uui-color-5: var(--uui-warning-5); + --uui-color-10: var(--uui-warning-10); + --uui-color-20: var(--uui-warning-20); + --uui-color-50: var(--uui-warning-50); + --uui-color-60: var(--uui-warning-60); + --uui-color-70: var(--uui-warning-70); + --uui-color-contrast: var(--uui-warning-contrast); + } + + .uui-color-yellow { + --uui-color-5: var(--yellow-5); + --uui-color-10: var(--yellow-10); + --uui-color-20: var(--yellow-20); + --uui-color-50: var(--yellow-50); + --uui-color-60: var(--yellow-60); + --uui-color-70: var(--yellow-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-orange { + --uui-color-5: var(--orange-5); + --uui-color-10: var(--orange-10); + --uui-color-20: var(--orange-20); + --uui-color-50: var(--orange-50); + --uui-color-60: var(--orange-60); + --uui-color-70: var(--orange-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-fuchsia { + --uui-color-5: var(--fuchsia-5); + --uui-color-10: var(--fuchsia-10); + --uui-color-20: var(--fuchsia-20); + --uui-color-50: var(--fuchsia-50); + --uui-color-60: var(--fuchsia-60); + --uui-color-70: var(--fuchsia-70); + --uui-color-contrast: var(--white); + } + + .uui-color-purple { + --uui-color-5: var(--purple-5); + --uui-color-10: var(--purple-10); + --uui-color-20: var(--purple-20); + --uui-color-50: var(--purple-50); + --uui-color-60: var(--purple-60); + --uui-color-70: var(--purple-70); + --uui-color-contrast: var(--white); + } + + .uui-color-violet { + --uui-color-5: var(--violet-5); + --uui-color-10: var(--violet-10); + --uui-color-20: var(--violet-20); + --uui-color-50: var(--violet-50); + --uui-color-60: var(--violet-60); + --uui-color-70: var(--violet-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cobalt { + --uui-color-5: var(--cobalt-5); + --uui-color-10: var(--cobalt-10); + --uui-color-20: var(--cobalt-20); + --uui-color-50: var(--cobalt-50); + --uui-color-60: var(--cobalt-60); + --uui-color-70: var(--cobalt-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cyan { + --uui-color-5: var(--cyan-5); + --uui-color-10: var(--cyan-10); + --uui-color-20: var(--cyan-20); + --uui-color-50: var(--cyan-50); + --uui-color-60: var(--cyan-60); + --uui-color-70: var(--cyan-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-mint { + --uui-color-5: var(--mint-5); + --uui-color-10: var(--mint-10); + --uui-color-20: var(--mint-20); + --uui-color-50: var(--mint-50); + --uui-color-60: var(--mint-60); + --uui-color-70: var(--mint-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + /* Accordion */ + + .uui-accordion-container { + --uui-accordion-border-radius: 6px; + } + + /* FileCard */ + + .uui-file_card { + --uui-file_card-border-radius: 6px; + } + + /* Badge */ + + .uui-badge.uui-color-white { + &.uui-fill-solid { + --uui-badge-border-hover: var(--uui-neutral-30); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-0); + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + } + } + + .uui-badge.uui-color-neutral, + .uui-badge.uui-color-night300 { + &.uui-fill-solid { + --uui-badge-bg: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-40); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-40); + --uui-color-contrast: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + } + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-20); + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-border: var(--uui-neutral-40); + --uui-badge-caption: var(--uui-neutral-80); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-night100 { + &.uui-fill-solid { + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border-hover: var(--uui-neutral-20); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-10); + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); + } + } + } + + .uui-badge.uui-color-night600 { + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-60); + --uui-badge-border-hover: var(--uui-neutral-60); + --uui-badge-caption: var(--uui-neutral-80); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-yellow.uui-fill-outline { + --uui-badge-border: var(--yellow-20); + } + + /* Button */ + + .uui-button { + &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) { + --uui-btn-caption: var(--uui-neutral-70); + } + } + + /* IconButton */ + + .uui-icon_button.uui-color-secondary { + --uui-icon_btn: var(--uui-neutral-50); + --uui-icon_btn-hover: var(--uui-neutral-60); + --uui-icon_btn-active: var(--uui-neutral-70); + } + + .uui-icon_button.uui-color-white { + --uui-icon_btn-hover: var(--uui-neutral-20); + --uui-icon_btn-active: var(--uui-neutral-30); + } + + /* LinkButton */ + + .uui-link_button.uui-color-contrast { + --uui-link_btn-text: var(--uui-neutral-5); + --uui-link_btn-text-hover: var(--uui-neutral-10); + --uui-link_btn-text-active: var(--uui-neutral-20); + } + + .uui-link_button.uui-color-white { + --uui-link_btn-text: var(--uui-neutral-5); + --uui-link_btn-text-hover: var(--uui-neutral-30); + --uui-link_btn-text-active: var(--uui-neutral-40); + --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); + } + + /* Tooltip */ + + .uui-tooltip-container.uui-color-white { + --uui-tooltip-bg: var(--uui-neutral-0); + --uui-tooltip-text: var(--uui-neutral-80); + } + + .uui-tooltip-container.uui-color-red { + --uui-tooltip-bg: var(--uui-error-60); + } + + .uui-tooltip-container.uui-color-gray { + --uui-tooltip-bg: var(--uui-neutral-80); + --uui-tooltip-text: var(--uui-neutral-5); + } + + /* CountIndicator */ + + .uui-count_indicator.uui-color-gray, + .uui-count_indicator.uui-color-neutral { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + + .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) { + --uui-count_indicator-caption: var(--uui-neutral-70); + } + + /* Status Indicator */ + + .uui-status_indicator.uui-color-white.uui-fill-outline { + .uui-status_indicator-dot { + background-color: color-mix(in srgb, var(--white) 20%, transparent); + border: 1px solid var(--uui-neutral-40); + } + } + + /* FlexRow */ + + .uui-flex-row.uui-color-none { + --uui-flex-row-bg: transparent; + } + + .uui-flex-row.uui-color-white { + --uui-flex-row-bg: var(--white); + } + + .uui-flex-row.uui-color-night50 { + --uui-flex-row-bg: var(--night50); + } + + .uui-flex-row.uui-color-night100 { + --uui-flex-row-bg: var(--night100); + } + + .uui-panel.uui-color-white { + --uui-panel-bg: var(--white); + } + + .uui-panel.uui-color-night50 { + --uui-panel-bg: var(--night50); + } + + /* Text */ + + .uui-text.uui-color-night50 { + --uui-text: var(--night50); + } + + .uui-text.uui-color-night400 { + --uui-text: var(--night400); + } + + .uui-text.uui-color-night800 { + --uui-text: var(--night800); + } + + .uui-text.uui-color-night900 { + --uui-text: var(--night900); + } + + .uui-text.uui-color-sky { + --uui-text: var(--sky-70); + } + + .uui-text.uui-color-grass { + --uui-text: var(--grass-70); + } + + .uui-text.uui-color-sun { + --uui-text: var(--sun-70); + } + + .uui-text.uui-color-fire { + --uui-text: var(--fire-70); + } + + /* Tag */ + + .uui-tag { + &.uui-color-white { + &.uui-fill-solid { + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border-hover: var(--uui-neutral-10); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-0); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-night100 { + &.uui-fill-solid { + --uui-tag-bg-hover: var(--uui-neutral-20); + --uui-tag-border-hover: var(--uui-neutral-20); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-5); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-neutral, + &.uui-color-night300 { + &.uui-fill-solid { + --uui-tag-bg: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-40); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-40); + --uui-tag-caption: var(--uui-neutral-70); + --uui-tag-fill: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + --uui-count_indicator-caption: var(--uui-neutral-70); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-40); + --uui-tag-border-hover: var(--uui-neutral-40); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-night700 { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-neutral-0); + --uui-tag-fill: var(--uui-neutral-0); + --uui-tag-bg: var(--uui-neutral-70); + --uui-tag-border: var(--uui-neutral-70); + --uui-tag-bg-hover: var(--uui-neutral-80); + --uui-tag-border-hover: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent); + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-50); + --uui-tag-border-hover: var(--uui-neutral-50); + + } + } + + &.uui-color-warning, + &.uui-color-sun { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-text-primary); + --uui-tag-fill: var(--uui-neutral-90); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent); + } + } + + &.uui-fill-outline .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-40); + } + } + } + + /* fonts */ + + .uui-font-sans { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 400; + } + + .uui-font-sans-semibold { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 600; + } + + .uui-font-sans-light { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 300; + } + + /* Typography */ + + .uui-typography { + h1 { + font-weight: 600; + } + + h2 { + font-weight: 700; + } + + h3 { + font-weight: 600; + } + + .hero-header { + font-size: 72px; + line-height: 72px; + font-weight: 700; + } + } +} diff --git a/epam-assets/theme/variables/loveship_dark.scss b/epam-assets/theme/variables/loveship_dark.scss new file mode 100644 index 0000000000..b83c663eaa --- /dev/null +++ b/epam-assets/theme/variables/loveship_dark.scss @@ -0,0 +1,815 @@ +@use 'tokens/_theme_loveship_dark.scss' as tokens; +/* Name convention */ +/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ + +@mixin loveship_dark_variables { + --uui-font: 'Source Sans Pro', sans-serif; + --uui-font-mono: 'Roboto Mono', monospace; + + /* shadows */ + --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2); + --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26); + --uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56); + + @include tokens.theme-tokens; + + & { + --uui-border-radius: 3px; + } + + /* begin color classes */ + + .uui-color-gray { + --uui-color-5: var(--uui-secondary-5); + --uui-color-10: var(--uui-secondary-10); + --uui-color-20: var(--uui-secondary-20); + --uui-color-50: var(--uui-secondary-50); + --uui-color-60: var(--uui-secondary-60); + --uui-color-70: var(--uui-secondary-70); + --uui-color-contrast: var(--white); + } + + .uui-color-grass { + --uui-color-5: var(--grass-5); + --uui-color-10: var(--grass-10); + --uui-color-20: var(--grass-20); + --uui-color-50: var(--grass-50); + --uui-color-60: var(--grass-60); + --uui-color-70: var(--grass-70); + --uui-color-contrast: var(--white); + } + + .uui-color-sky { + --uui-color-5: var(--sky-5); + --uui-color-10: var(--sky-10); + --uui-color-20: var(--sky-20); + --uui-color-50: var(--sky-50); + --uui-color-60: var(--sky-60); + --uui-color-70: var(--sky-70); + --uui-color-contrast: var(--white); + } + + .uui-color-fire { + --uui-color-5: var(--fire-5); + --uui-color-10: var(--fire-10); + --uui-color-20: var(--fire-20); + --uui-color-50: var(--fire-50); + --uui-color-60: var(--fire-60); + --uui-color-70: var(--fire-70); + --uui-color-contrast: var(--white); + } + + .uui-color-sun { + --uui-color-5: var(--sun-5); + --uui-color-10: var(--sun-10); + --uui-color-20: var(--sun-20); + --uui-color-50: var(--sun-50); + --uui-color-60: var(--sun-60); + --uui-color-70: var(--sun-70); + --uui-color-contrast: var(--night700); + } + + .uui-color-yellow { + --uui-color-5: var(--yellow-5); + --uui-color-10: var(--yellow-10); + --uui-color-20: var(--yellow-20); + --uui-color-50: var(--yellow-50); + --uui-color-60: var(--yellow-60); + --uui-color-70: var(--yellow-70); + --uui-color-contrast: var(--night700); + } + + .uui-color-orange { + --uui-color-5: var(--orange-5); + --uui-color-10: var(--orange-10); + --uui-color-20: var(--orange-20); + --uui-color-50: var(--orange-50); + --uui-color-60: var(--orange-60); + --uui-color-70: var(--orange-70); + --uui-color-contrast: var(--night700); + } + + .uui-color-fuchsia { + --uui-color-5: var(--fuchsia-5); + --uui-color-10: var(--fuchsia-10); + --uui-color-20: var(--fuchsia-20); + --uui-color-50: var(--fuchsia-50); + --uui-color-60: var(--fuchsia-60); + --uui-color-70: var(--fuchsia-70); + --uui-color-contrast: var(--white); + } + + .uui-color-purple { + --uui-color-5: var(--purple-5); + --uui-color-10: var(--purple-10); + --uui-color-20: var(--purple-20); + --uui-color-50: var(--purple-50); + --uui-color-60: var(--purple-60); + --uui-color-70: var(--purple-70); + --uui-color-contrast: var(--white); + } + + .uui-color-violet { + --uui-color-5: var(--violet-5); + --uui-color-10: var(--violet-10); + --uui-color-20: var(--violet-20); + --uui-color-50: var(--violet-50); + --uui-color-60: var(--violet-60); + --uui-color-70: var(--violet-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cobalt { + --uui-color-5: var(--cobalt-5); + --uui-color-10: var(--cobalt-10); + --uui-color-20: var(--cobalt-20); + --uui-color-50: var(--cobalt-50); + --uui-color-60: var(--cobalt-60); + --uui-color-70: var(--cobalt-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cyan { + --uui-color-5: var(--cyan-5); + --uui-color-10: var(--cyan-10); + --uui-color-20: var(--cyan-20); + --uui-color-50: var(--cyan-50); + --uui-color-60: var(--cyan-60); + --uui-color-70: var(--cyan-70); + --uui-color-contrast: var(--night700); + } + + .uui-color-mint { + --uui-color-5: var(--mint-5); + --uui-color-10: var(--mint-10); + --uui-color-20: var(--mint-20); + --uui-color-50: var(--mint-50); + --uui-color-60: var(--mint-60); + --uui-color-70: var(--mint-70); + --uui-color-contrast: var(--night700); + } + + /* override variables */ + + /* isInvalid color */ + + .uui-invalid:is(.uui-input-box, .uui-radio-input-container, .uui-checkbox-container) { + --uui-error-50: var(--uui-error-60); + } + + /* Accordion */ + + .uui-accordion-container { + --uui-accordion-border-radius: 6px; + } + + /* FileCard */ + + .uui-file_card { + --uui-file_card-border-radius: 6px; + } + + /* Button */ + + .uui-button { + --uui-btn-bg-disabled: var(--uui-neutral-50); + --uui-btn-border-disabled: var(--uui-neutral-50); + + &.uui-fill-solid.uui-color-white { + --uui-btn-bg-active: var(--uui-neutral-20); + + &:active { + background-color: var(--uui-neutral-20); + border-color: var(--uui-neutral-20); + } + } + + &.uui-fill-outline { + --uui-btn-border: var(--uui-color-60); + --uui-btn-border-hover: var(--uui-color-60); + --uui-btn-border-active: var(--uui-color-60); + --uui-btn-caption: var(--uui-color-60); + + &.uui-color-neutral, + &.uui-color-secondary { + --uui-btn-bg-hover: var(--uui-neutral-60); + --uui-btn-bg-active: var(--uui-neutral-50); + --uui-btn-border: var(--uui-neutral-30); + --uui-btn-border-hover: var(--uui-neutral-30); + --uui-btn-border-active: var(--uui-neutral-30); + --uui-btn-caption: var(--uui-neutral-10); + } + + &.uui-color-white { + --uui-btn-caption: var(--uui-neutral-0); + --uui-btn-border: var(--uui-neutral-0); + --uui-btn-border-hover: var(--uui-neutral-0); + --uui-btn-border-active: var(--uui-neutral-0); + } + } + + &.uui-fill-none { + --uui-btn-border: var(--uui-color-60); + --uui-btn-border-hover: var(--uui-color-60); + --uui-btn-border-active: var(--uui-color-60); + --uui-btn-caption: var(--uui-color-60); + + &.uui-color-neutral, + &.uui-color-secondary { + --uui-btn-bg-hover: var(--uui-neutral-60); + --uui-btn-bg-active: var(--uui-neutral-50); + --uui-btn-border: var(--uui-neutral-30); + --uui-btn-border-hover: var(--uui-neutral-30); + --uui-btn-border-active: var(--uui-neutral-30); + --uui-btn-caption: var(--uui-neutral-10); + } + + &.uui-color-white { + --uui-btn-caption: var(--uui-neutral-0); + --uui-btn-border: var(--uui-neutral-0); + --uui-btn-border-hover: var(--uui-neutral-0); + --uui-btn-border-active: var(--uui-neutral-0); + } + } + + &.uui-fill-ghost { + --uui-btn-caption: var(--uui-color-60); + + &.uui-color-neutral, + &.uui-color-secondary { + --uui-btn-bg-hover: var(--uui-neutral-60); + --uui-btn-bg-active: var(--uui-neutral-50); + --uui-btn-border-hover: var(--uui-neutral-60); + --uui-btn-border-active: var(--uui-neutral-50); + --uui-btn-caption: var(--uui-neutral-10); + } + + &.uui-color-white { + --uui-btn-caption: var(--uui-neutral-0); + } + } + } + + .uui-blocker-container { + --uui-blocker-bg: var(--uui-surface-main); + --uui-blocker-bg-with-opacity: #303240CC; + } + + /* Badge */ + + .uui-badge { + &.uui-fill-outline { + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-80); + --uui-count_indicator-border: var(--uui-neutral-40); + --uui-count_indicator-caption: var(--uui-neutral-10); + } + } + } + + .uui-badge.uui-color-neutral, + .uui-badge.uui-color-night300 { + &.uui-fill-solid { + --uui-badge-bg: var(--uui-neutral-30); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-40); + --uui-badge-border-hover: var(--uui-neutral-40); + --uui-badge-caption: var(--uui-neutral-5); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + --uui-count_indicator-caption: var(--uui-neutral-80); + } + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-60); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-50); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-0); + --uui-badge-caption-hover: var(--uui-neutral-5); + } + } + + .uui-badge.uui-color-white { + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-0); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-10); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent); + --uui-count_indicator-caption: var(--uui-neutral-70); + } + } + } + + .uui-badge.uui-color-night100 { + &.uui-fill-solid { + --uui-badge-bg: var(--uui-neutral-10); + --uui-badge-border: var(--uui-neutral-10); + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border-hover: var(--uui-neutral-20); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-10); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent); + --uui-count_indicator-caption: var(--uui-neutral-70); + } + } + } + + .uui-badge.uui-color-night600 { + &.uui-fill-solid { + --uui-badge-bg: var(--uui-neutral-60); + --uui-badge-border: var(--uui-neutral-60); + --uui-badge-bg-hover: var(--uui-neutral-50); + --uui-badge-border-hover: var(--uui-neutral-50); + --uui-badge-caption: var(--white); + --uui-badge-caption-hover: var(--white); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-80); + --uui-badge-border: var(--uui-neutral-60); + --uui-badge-bg-hover: var(--uui-neutral-70); + --uui-badge-border-hover: var(--uui-neutral-60); + --uui-badge-caption: var(--uui-neutral-5); + --uui-badge-caption-hover: var(--uui-neutral-5); + } + } + + /* IconButton */ + + .uui-icon_button:is(.uui-color-info, .uui-color-primary, .uui-color-sky, .uui-color-success, .uui-color-accent, .uui-color-grass .uui-color-error, .uui-color-critical, .uui-color-sun, .uui-color-fire) { + --uui-icon_btn: var(--uui-color-60); + --uui-icon_btn-hover: var(--uui-color-70); + --uui-icon_btn-active: var(--uui-color-70); + } + + .uui-icon_button.uui-color-white { + --uui-icon_btn-hover: var(--uui-neutral-20); + --uui-icon_btn-active: var(--uui-neutral-30); + } + + .uui-icon_button.uui-color-secondary { + --uui-icon_btn: var(--uui-neutral-40); + --uui-icon_btn-hover: var(--uui-neutral-30); + --uui-icon_btn-active: var(--uui-neutral-30); + } + + /* LinkButton */ + + .uui-link_button.uui-color-contrast { + --uui-link_btn-text: var(--uui-neutral-0); + --uui-link_btn-text-hover: var(--uui-neutral-5); + --uui-link_btn-text-active: var(--uui-neutral-10); + } + + .uui-link_button:is(.uui-color-primary, .uui-color-sky, .uui-color-secondary, .uui-color-accent, .uui-color-grass, .uui-color-critical, .uui-color-fire) { + --uui-link_btn-text-disabled: var(--uui-neutral-40); + } + + .uui-link_button.uui-color-primary, + .uui-link_button.uui-color-sky { + --uui-link_btn-text: var(--uui-color-60); + --uui-link_btn-text-hover: var(--uui-color-70); + } + + .uui-link_button.uui-color-secondary { + --uui-link_btn-text: var(--uui-neutral-30); + --uui-link_btn-text-hover: var(--uui-neutral-20); + --uui-link_btn-text-active: var(--uui-neutral-10); + } + + .uui-link_button.uui-color-white { + --uui-link_btn-text: var(--uui-neutral-5); + --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); + } + + /* TubButton */ + + .uui-tab-button { + --uui-tab_btn-text-hover: var(--uui-primary-60); + --uui-tab_btn-text-active: var(--uui-primary-60); + } + + /* MainMenu */ + + .uui-main_menu { + --uui-main_menu-text: var(--uui-neutral-0); + --uui-main_menu-text-active: var(--uui-neutral-0); + --uui-main_menu-bg: var(--uui-neutral-70); + + --uui-main_menu-search-bg: var(--uui-neutral-5); + --uui-main_menu-search-border: var(--uui-neutral-40); + --uui-main_menu-search-placeholder: var(--uui-text-tertiary); + --uui-main_menu-search-text: var(--uui-text-primary); + --uui-main_menu-search-icon: var(--uui-neutral-70); + + --uui-main_menu-icon: var(--uui-neutral-5); + --uui-main_menu-icon-hover: var(--uui-neutral-5); + --uui-main_menu-icon-active: var(--uui-neutral-5); + } + + .uui-main_menu-dropdown { + --uui-main_menu-text: var(--uui-neutral-0); + --uui-main_menu-text-active: var(--uui-neutral-0); + --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70); + } + + /* BurgerMenu */ + + .uui-burger { + --uui-burger_menu-bg: var(--uui-app-bg); + --uui-burger_menu-bg-hover: var(--uui-app-bg); + --uui-burger_menu-caption: var(--uui-neutral-90); + --uui-burger_menu-icon: var(--uui-neutral-5); + --uui-burger_menu-item: var(--uui-app-bg); + } + + /* BurgerButton */ + .uui-main_menu-burger-button { + --uui-burger_btn_caption: var(--uui-neutral-0); + --uui-burger_btn_caption-hover: var(--uui-primary-50); + --uui-burger_btn_caption-active: var(--uui-primary-50); + --uui-burger_btn-border: var(--uui-neutral-40); + } + + /* BurgerSearch */ + + .uui-main_menu-burger-search { + --uui-burger_search: var(--uui-neutral-0); + --uui-burger_search-fill: var(--uui-neutral-70); + --uui-burger_search-bg: var(--uui-neutral-40); + --uui-burger_search-placeholder: var(--uui-text-tertiary); + } + + /* Tooltip */ + + .uui-tooltip-container.uui-color-neutral { + --uui-tooltip-border: var(--uui-neutral-50); + } + + .uui-tooltip-container.uui-color-white { + --uui-tooltip-bg: var(--uui-neutral-10); + } + + .uui-tooltip-container.uui-color-critical { + --uui-tooltip-bg: var(--uui-critical-50); + } + + .uui-tooltip-container.uui-color-inverted { + --uui-tooltip-bg: var(--uui-neutral-10); + --uui-tooltip-text: var(--uui-neutral-70); + } + + /* CountIndicator */ + + .uui-count_indicator:is(.uui-color-neutral, .uui-color-gray, .uui-color-info, .uui-color-sky, .uui-color-grass, .uui-color-success, .uui-color-critical, .uui-color-fire, .uui-color-warning, .uui-color-sun) { + --uui-count_indicator-bg: var(--uui-color-60); + --uui-count_indicator-border: var(--uui-color-60); + + &.uui-color-neutral, &.uui-color-gray { + --uui-count_indicator-caption: var(--uui-neutral-10); + } + } + + /* Status Indicator */ + + .uui-status_indicator.uui-color-white.uui-fill-outline { + .uui-status_indicator-dot { + background-color: color-mix(in srgb, var(--white) 20%, transparent); + border: 1px solid var(--white); + } + } + + .uui-status_indicator.uui-color-night600, + .uui-status_indicator.uui-color-neutral { + .uui-status_indicator-dot { + background-color: var(--uui-neutral-30); + } + + &.uui-fill-outline { + .uui-status_indicator-dot { + background-color: color-mix(in srgb, var(--uui-neutral-30) 20%, transparent); + border: 1px solid var(--uui-neutral-30); + } + } + } + + /* Alert */ + + .uui-alert.uui-color-info { + --uui-alert-icon: var(--uui-color-60); + --uui-alert-border: var(--uui-color-60); + } + + .uui-alert.uui-color-success { + --uui-alert-icon: var(--uui-color-60); + --uui-alert-border: var(--uui-color-60); + } + + .uui-alert.uui-color-warning { + --uui-alert-icon: var(--uui-color-60); + --uui-alert-border: var(--uui-color-60); + } + + .uui-alert.uui-color-error { + --uui-alert-icon: var(--uui-color-60); + --uui-alert-border: var(--uui-color-60); + } + + /* Tag */ + + .uui-tag { + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--white) 10%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--white) 50%, transparent); + } + + &.uui-fill-outline { + --uui-tag-caption: var(--uui-neutral-0); + --uui-tag-fill: var(--uui-neutral-0); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-70); + --uui-count_indicator-border: var(--uui-neutral-40); + --uui-count_indicator-caption: var(--uui-neutral-10); + } + } + + &.uui-color-neutral, + &.uui-color-night300 { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-neutral-0); + --uui-tag-fill: var(--uui-neutral-0); + --uui-tag-bg: var(--uui-neutral-50); + --uui-tag-border: var(--uui-neutral-50); + --uui-tag-bg-hover: var(--uui-neutral-60); + --uui-tag-border-hover: var(--uui-neutral-60); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-40); + --uui-tag-border-hover: var(--uui-neutral-20); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-40); + --uui-count_indicator-border: var(--uui-neutral-40); + --uui-count_indicator-caption: var(--uui-neutral-10); + } + } + } + + &.uui-color-white { + &.uui-fill-solid { + --uui-tag-bg-hover: var(--uui-neutral-5); + --uui-tag-border-hover: var(--uui-neutral-5); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-40); + --uui-count_indicator-border: var(--uui-neutral-40); + --uui-count_indicator-caption: var(--uui-neutral-10); + } + } + + &.uui-fill-outline { + --uui-tag-bg: color-mix(in srgb, var(--white) 5%, transparent); + --uui-tag-border: var(--uui-neutral-0); + --uui-tag-bg-hover: color-mix(in srgb, var(--white) 10%, transparent); + --uui-tag-border-hover: var(--uui-neutral-0); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-40); + --uui-count_indicator-border: var(--uui-neutral-40); + } + } + } + + &.uui-color-night100 { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-neutral-80); + --uui-tag-fill: var(--uui-neutral-80); + --uui-tag-bg: var(--uui-neutral-10); + --uui-tag-border: var(--uui-neutral-40); + --uui-tag-bg-hover: var(--uui-neutral-5); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-40); + --uui-count_indicator-border: var(--uui-neutral-40); + --uui-count_indicator-caption: var(--uui-neutral-10); + } + } + + &.uui-fill-outline { + --uui-tag-bg: color-mix(in srgb, var(--uui-neutral-0) 12%, transparent); + --uui-tag-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 15%, transparent); + --uui-tag-border: var(--uui-neutral-20); + --uui-tag-border-hover: var(--uui-neutral-20); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-40); + --uui-count_indicator-border: var(--uui-neutral-40); + --uui-count_indicator-caption: var(--uui-neutral-10); + } + } + } + + &.uui-color-night700 { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-neutral-0); + --uui-tag-fill: var(--uui-neutral-0); + --uui-tag-bg: var(--uui-neutral-70); + --uui-tag-border: var(--uui-neutral-70); + --uui-tag-bg-hover: var(--uui-neutral-60); + --uui-tag-border-hover: var(--uui-neutral-60); + + .uui-count_indicator { + --uui-count_indicator-caption: var(--uui-neutral-0); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-80); + --uui-tag-border: var(--uui-neutral-40); + --uui-tag-bg-hover: var(--uui-neutral-70); + --uui-tag-border-hover: var(--uui-neutral-40); + + .uui-count_indicator { + --uui-count_indicator-caption: var(--uui-neutral-0); + --uui-count_indicator-bg: var(--uui-neutral-70); + --uui-count_indicator-border: var(--uui-neutral-40); + } + } + } + + &.uui-color-warning, + &.uui-color-sun { + &.uui-fill-solid { + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-5) 5%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-70) 30%, transparent); + } + } + } + } + + .uui-presets-panel-input .uui-icon-cancel { + &:hover { + background-color: var(--uui-neutral-60); + } + + &:active { + background-color: var(--uui-neutral-50); + } + } + + .uui-scroll-bars { + --uui-scroll_bars-bg: var(--uui-neutral-40); + --uui-scroll_bars-bg-active: var(--uui-neutral-30); + } + + .uui-text-placeholder { + --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-30) 0, var(--uui-neutral-50) 150px, var(--uui-neutral-30) 300px); + } + + .uui-dt-vars { + --uui-dt-header-row-bg: var(--uui-surface-sunken); + } + + .uui-filters-panel-item-toggler { + --uui-filters_toggler-bg-hover: var(--uui-neutral-30); + } + + /* DropdownMenu */ + + .uui-dropdownMenu-body { + --uui-dropdown-selected_mark: var(--uui-info-60); + } + + /* PickerInput */ + + .uui-picker_input-body { + --uui-picker_input-selected_mark: var(--uui-info-60); + } + + /* fonts */ + + .uui-font-sans { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 400; + } + + .uui-font-sans-semibold { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 600; + + } + + .uui-font-sans-light { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 300; + } + + /* Text */ + + .uui-text.uui-color-sky { + --uui-text: var(--sky-70); + } + + .uui-text.uui-color-grass { + --uui-text: var(--grass-70); + } + + .uui-text.uui-color-sun { + --uui-text: var(--sun-70); + } + + .uui-text.uui-color-fire { + --uui-text: var(--fire-70); + } + + .uui-text.uui-color-night50 { + --uui-text: var(--night50); + } + + .uui-text.uui-color-night300 { + --uui-text: var(--night300); + } + + .uui-text.uui-color-night400 { + --uui-text: var(--night400); + } + + .uui-text.uui-color-night500 { + --uui-text: var(--night500); + } + + .uui-text.uui-color-night600 { + --uui-text: var(--night600); + } + + .uui-text.uui-color-night700 { + --uui-text: var(--night700); + } + + .uui-text.uui-color-night800 { + --uui-text: var(--night800); + } + + .uui-text.uui-color-night900 { + --uui-text: var(--night900); + } + + /* Typography */ + + .uui-typography { + .uui-highlight { + background-color: var(--uui-warning-20); + } + + h1 { + font-weight: 600; + } + + h2 { + font-weight: 700; + } + + h3 { + font-weight: 600; + } + + .hero-header { + font-size: 72px; + line-height: 72px; + font-weight: 700; + } + } +} diff --git a/epam-assets/theme/variables/promo.scss b/epam-assets/theme/variables/promo.scss new file mode 100644 index 0000000000..f17c683842 --- /dev/null +++ b/epam-assets/theme/variables/promo.scss @@ -0,0 +1,600 @@ +@use 'tokens/_theme_promo.scss' as tokens; +/* Name convention */ +/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ + +@mixin promo_variables { + --uui-font: 'Source Sans Pro', sans-serif; + --uui-font-mono: 'Roboto Mono', monospace; + + // theme specific fonts + --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif; + --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif; + + /* shadows */ + --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1); + --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05); + --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05); + + @include tokens.theme-tokens; + + & { + --uui-border-radius: 0; + } + + /* begin color classes */ + + .uui-color-green { + --uui-color-5: var(--uui-accent-5); + --uui-color-10: var(--uui-accent-10); + --uui-color-20: var(--uui-accent-20); + --uui-color-50: var(--uui-accent-50); + --uui-color-60: var(--uui-accent-60); + --uui-color-70: var(--uui-accent-70); + --uui-color-contrast: var(--uui-accent-contrast); + } + + .uui-color-blue { + --uui-color-5: var(--uui-primary-5); + --uui-color-10: var(--uui-primary-10); + --uui-color-20: var(--uui-primary-20); + --uui-color-50: var(--uui-primary-50); + --uui-color-60: var(--uui-primary-60); + --uui-color-70: var(--uui-primary-70); + --uui-color-contrast: var(--uui-primary-contrast); + } + + .uui-color-gray { + --uui-color-5: var(--uui-secondary-5); + --uui-color-10: var(--uui-secondary-10); + --uui-color-20: var(--uui-secondary-20); + --uui-color-50: var(--uui-secondary-50); + --uui-color-60: var(--uui-secondary-60); + --uui-color-70: var(--uui-secondary-70); + --uui-color-contrast: var(--uui-secondary-contrast); + } + + .uui-color-red { + --uui-color-5: var(--uui-critical-5); + --uui-color-10: var(--uui-critical-10); + --uui-color-20: var(--uui-critical-20); + --uui-color-50: var(--uui-critical-50); + --uui-color-60: var(--uui-critical-60); + --uui-color-70: var(--uui-critical-70); + --uui-color-contrast: var(--uui-critical-contrast); + } + + .uui-color-amber { + --uui-color-5: var(--uui-warning-5); + --uui-color-10: var(--uui-warning-10); + --uui-color-20: var(--uui-warning-20); + --uui-color-50: var(--uui-warning-50); + --uui-color-60: var(--uui-warning-60); + --uui-color-70: var(--uui-warning-70); + --uui-color-contrast: var(--uui-warning-contrast); + } + + .uui-link_button.uui-color-contrast, + .uui-color-gray10 { + --uui-color-5: var(--white); + --uui-color-10: var(--white); + --uui-color-20: var(--gray5); + --uui-color-50: var(--gray10); + --uui-color-60: var(--gray20); + --uui-color-70: var(--gray30); + --uui-color-contrast: var(--gray70); + } + + .uui-color-gray30 { + --uui-color-5: var(--gray20); + --uui-color-10: var(--gray30); + --uui-color-20: var(--gray40); + --uui-color-50: var(--gray30); + --uui-color-60: var(--gray40); + --uui-color-70: var(--gray50); + --uui-color-contrast: var(--gray80); + } + + .uui-color-gray50 { + --uui-color-5: var(--gray5); + --uui-color-10: var(--gray10); + --uui-color-20: var(--gray20); + --uui-color-50: var(--gray50); + --uui-color-60: var(--gray60); + --uui-color-70: var(--gray70); + --uui-color-contrast: var(--gray80); + } + + .uui-color-gray60 { + --uui-color-5: var(--gray20); + --uui-color-10: var(--gray60); + --uui-color-20: var(--gray40); + --uui-color-50: var(--gray60); + --uui-color-60: var(--gray70); + --uui-color-70: var(--gray80); + --uui-color-contrast: var(--white); + } + + .uui-color-yellow { + --uui-color-5: var(--yellow-5); + --uui-color-10: var(--yellow-10); + --uui-color-20: var(--yellow-20); + --uui-color-50: var(--yellow-50); + --uui-color-60: var(--yellow-60); + --uui-color-70: var(--yellow-70); + --uui-color-contrast: var(--gray80); + } + + .uui-color-orange { + --uui-color-5: var(--orange-5); + --uui-color-10: var(--orange-10); + --uui-color-20: var(--orange-20); + --uui-color-50: var(--orange-50); + --uui-color-60: var(--orange-60); + --uui-color-70: var(--orange-70); + --uui-color-contrast: var(--gray80); + } + + .uui-color-fuchsia { + --uui-color-5: var(--fuchsia-5); + --uui-color-10: var(--fuchsia-10); + --uui-color-20: var(--fuchsia-20); + --uui-color-50: var(--fuchsia-50); + --uui-color-60: var(--fuchsia-60); + --uui-color-70: var(--fuchsia-70); + --uui-color-contrast: var(--white); + } + + .uui-color-purple { + --uui-color-5: var(--purple-5); + --uui-color-10: var(--purple-10); + --uui-color-20: var(--purple-20); + --uui-color-50: var(--purple-50); + --uui-color-60: var(--purple-60); + --uui-color-70: var(--purple-70); + --uui-color-contrast: var(--white); + } + + .uui-color-violet { + --uui-color-5: var(--violet-5); + --uui-color-10: var(--violet-10); + --uui-color-20: var(--violet-20); + --uui-color-50: var(--violet-50); + --uui-color-60: var(--violet-60); + --uui-color-70: var(--violet-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cobalt { + --uui-color-5: var(--cobalt-5); + --uui-color-10: var(--cobalt-10); + --uui-color-20: var(--cobalt-20); + --uui-color-50: var(--cobalt-50); + --uui-color-60: var(--cobalt-60); + --uui-color-70: var(--cobalt-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cyan { + --uui-color-5: var(--cyan-5); + --uui-color-10: var(--cyan-10); + --uui-color-20: var(--cyan-20); + --uui-color-50: var(--cyan-50); + --uui-color-60: var(--cyan-60); + --uui-color-70: var(--cyan-70); + --uui-color-contrast: var(--gray80); + } + + .uui-color-mint { + --uui-color-5: var(--mint-5); + --uui-color-10: var(--mint-10); + --uui-color-20: var(--mint-20); + --uui-color-50: var(--mint-50); + --uui-color-60: var(--mint-60); + --uui-color-70: var(--mint-70); + --uui-color-contrast: var(--gray80); + } + + /* Badge */ + + .uui-badge.uui-color-white { + &.uui-fill-solid { + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-0); + --uui-badge-bg-hover: var(--uui-neutral-10); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-80); + --uui-badge-caption-hover: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); + } + } + } + + .uui-badge.uui-color-neutral, + .uui-badge.uui-color-gray30 { + &.uui-fill-solid { + --uui-badge-bg: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-40); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-40); + --uui-color-contrast: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + } + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-40); + --uui-badge-border-hover: var(--uui-neutral-40); + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-80); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-gray10 { + &.uui-fill-solid { + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border-hover: var(--uui-neutral-20); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-10); + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); + } + } + } + + .uui-badge.uui-color-gray60 { + &.uui-fill-outline { + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-border: var(--uui-neutral-60); + --uui-badge-border-hover: var(--uui-neutral-60); + --uui-badge-caption: var(--uui-neutral-80); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-yellow.uui-fill-outline { + --uui-badge-border: var(--yellow-20); + } + + /* Button */ + + .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) { + --uui-btn-caption: var(--uui-neutral-70); + } + + .uui-button { + &.uui-size-42, &.uui-size-48 { + .uui-caption { + font-family: var(--font-museo-sans); + } + } + } + + /* IconButton */ + + .uui-icon_button.uui-color-neutral, + .uui-icon_button.uui-color-gray60 { + --uui-icon_btn: var(--uui-neutral-60); + --uui-icon_btn-hover: var(--uui-neutral-70); + --uui-icon_btn-active: var(--uui-neutral-80); + } + + .uui-icon_button.uui-color-secondary { + --uui-icon_btn: var(--uui-neutral-50); + --uui-icon_btn-hover: var(--uui-neutral-60); + --uui-icon_btn-active: var(--uui-neutral-70); + } + + .uui-icon_button.uui-color-white { + --uui-icon_btn-hover: var(--uui-neutral-20); + --uui-icon_btn-active: var(--uui-neutral-30); + } + + /* LinkButton */ + + .uui-link_button.uui-color-white { + --uui-link_btn-text-hover: var(--uui-neutral-30); + --uui-link_btn-text-active: var(--uui-neutral-40); + --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); + } + + /* Tooltip */ + + .uui-tooltip-container.uui-color-white { + --uui-tooltip-bg: var(--uui-neutral-0); + --uui-tooltip-text: var(--uui-neutral-80); + } + + .uui-tooltip-container.uui-color-red { + --uui-tooltip-bg: var(--uui-critical-60); + } + + .uui-tooltip-container.uui-color-gray { + --uui-tooltip-bg: var(--uui-neutral-80); + --uui-tooltip-text: var(--uui-neutral-5); + } + + /* CountIndicator */ + + .uui-count_indicator.uui-color-gray, + .uui-count_indicator.uui-color-neutral { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + + .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) { + --uui-count_indicator-caption: var(--uui-neutral-70); + } + + /* Status Indicator */ + + .uui-status_indicator.uui-color-white.uui-fill-outline { + .uui-status_indicator-dot { + background-color: color-mix(in srgb, var(--white) 20%, transparent); + border: 1px solid var(--uui-neutral-40); + } + } + + /* FlexRow */ + + .uui-flex-row.uui-color-none { + --uui-flex-row-bg: transparent; + } + + .uui-flex-row.uui-color-white { + --uui-flex-row-bg: var(--white); + } + + .uui-flex-row.uui-color-gray5 { + --uui-flex-row-bg: var(--gray5); + } + + .uui-panel.uui-color-white { + --uui-panel-bg: var(--white); + } + + .uui-panel.uui-color-gray90 { + --uui-panel-bg: var(--gray90); + } + + /* Text */ + + .uui-text.uui-color-gray5 { + --uui-text: var(--gray5); + } + + .uui-text.uui-color-gray80 { + --uui-text: var(--gray80); + } + + .uui-text.uui-color-gray90 { + --uui-text: var(--gray90); + } + + .uui-text.uui-color-blue { + --uui-text: var(--blue-70); + } + + .uui-text.uui-color-green { + --uui-text: var(--green-70); + } + + .uui-text.uui-color-amber { + --uui-text: var(--amber-70); + } + + .uui-text.uui-color-red { + --uui-text: var(--red-70); + } + + /* Tag */ + + .uui-tag { + --uui-border-radius: 3px; + + &.uui-color-white { + &.uui-fill-solid { + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border-hover: var(--uui-neutral-10); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-0); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-gray10 { + &.uui-fill-solid { + --uui-tag-bg-hover: var(--uui-neutral-20); + --uui-tag-border-hover: var(--uui-neutral-20); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-5); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-neutral, + &.uui-color-gray30 { + &.uui-fill-solid { + --uui-tag-bg: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-40); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-40); + --uui-tag-caption: var(--uui-neutral-70); + --uui-tag-fill: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + --uui-count_indicator-caption: var(--uui-neutral-70); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-40); + --uui-tag-border-hover: var(--uui-neutral-40); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-gray70 { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-neutral-0); + --uui-tag-fill: var(--uui-neutral-0); + --uui-tag-bg: var(--uui-neutral-70); + --uui-tag-border: var(--uui-neutral-70); + --uui-tag-bg-hover: var(--uui-neutral-80); + --uui-tag-border-hover: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent); + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent); + --uui-count_indicator-caption: var(--uui-neutral-0); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-50); + --uui-tag-border-hover: var(--uui-neutral-50); + + } + } + + &.uui-color-warning, + &.uui-color-amber { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-text-primary); + --uui-tag-fill: var(--uui-neutral-90); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent); + } + } + + &.uui-fill-outline .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-40); + } + } + } + + .uui-dropdown-body { + --uui-dropdown_container-border-radius: 0; + } + + .uui-link_button { + &.uui-size-42, &.uui-size-48 { + :global(.uui-caption) { + font-family: var(--font-museo-sans); + text-transform: uppercase; + } + } + } + + /* fonts */ + + .uui-font-sans { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 400; + } + + .uui-font-sans-semibold { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 600; + } + + .uui-font-sans-italic { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 400; + --uui-text-font-style: italic; + } + + .uui-font-museo-sans { + --uui-text-font: var(--font-museo-sans); + --uui-text-font-weight: normal; + } + + .uui-font-museo-slab { + --uui-text-font: var(--font-museo-slab); + --uui-text-font-weight: normal; + } + + /* Typography */ + + .uui-typography { + h1, h2, h3 { + font-family: var(--font-museo-sans); + } + + h1 { + font-size: 36px; + } + + .hero-header { + font-family: var(--font-museo-slab); + } + + .promo-header:is(h1, h2, h3) { + font-family: var(--font-museo-sans); + } + } +} + + diff --git a/epam-assets/theme/tokens/_color_classes.scss b/epam-assets/theme/variables/tokens/_color_classes.scss similarity index 100% rename from epam-assets/theme/tokens/_color_classes.scss rename to epam-assets/theme/variables/tokens/_color_classes.scss diff --git a/epam-assets/theme/tokens/_theme_electric.scss b/epam-assets/theme/variables/tokens/_theme_electric.scss similarity index 100% rename from epam-assets/theme/tokens/_theme_electric.scss rename to epam-assets/theme/variables/tokens/_theme_electric.scss diff --git a/epam-assets/theme/tokens/_theme_loveship_dark.scss b/epam-assets/theme/variables/tokens/_theme_loveship_dark.scss similarity index 100% rename from epam-assets/theme/tokens/_theme_loveship_dark.scss rename to epam-assets/theme/variables/tokens/_theme_loveship_dark.scss diff --git a/epam-assets/theme/tokens/_theme_loveship_light.scss b/epam-assets/theme/variables/tokens/_theme_loveship_light.scss similarity index 100% rename from epam-assets/theme/tokens/_theme_loveship_light.scss rename to epam-assets/theme/variables/tokens/_theme_loveship_light.scss diff --git a/epam-assets/theme/tokens/_theme_promo.scss b/epam-assets/theme/variables/tokens/_theme_promo.scss similarity index 100% rename from epam-assets/theme/tokens/_theme_promo.scss rename to epam-assets/theme/variables/tokens/_theme_promo.scss diff --git a/uui-build/config/bundleSizeBaseLine.json b/uui-build/config/bundleSizeBaseLine.json index 9b48c5bda1..aa68d1186e 100644 --- a/uui-build/config/bundleSizeBaseLine.json +++ b/uui-build/config/bundleSizeBaseLine.json @@ -1,62 +1,62 @@ { - "version": "5.8.4", - "timestamp": "2024-07-30", + "version": "5.10.0", + "timestamp": "2024-10-15", "sizes": { "templateApp": { - "css": 292096, - "js": 481419 + "css": 300045, + "js": 478744 }, "@epam/app": { - "css": 1599752, - "js": 5109887 + "css": 678966, + "js": 5033790 }, "@epam/draft-rte": { - "css": 9770, + "css": 9771, "js": 45292 }, "@epam/electric": { "css": 2275, - "js": 2409 + "js": 2408 }, "@epam/promo": { - "css": 46063, - "js": 10936 + "css": 47627, + "js": 10896 }, "@epam/uui-extra": { "css": 0, "js": 213 }, "@epam/loveship": { - "css": 51745, - "js": 42552 + "css": 53440, + "js": 42547 }, "@epam/uui-components": { - "css": 22319, - "js": 244674 + "css": 22530, + "js": 247001 }, "@epam/uui-core": { "css": 0, - "js": 341840 + "js": 345544 }, "@epam/uui-db": { "css": 0, "js": 45769 }, "@epam/uui-docs": { - "css": 2450, - "js": 209262 + "css": 2448, + "js": 209641 }, "@epam/uui-editor": { - "css": 12504, - "js": 173418 + "css": 12733, + "js": 175284 }, "@epam/uui-timeline": { - "css": 2254, - "js": 77573 + "css": 2255, + "js": 79166 }, "@epam/uui": { - "css": 273977, - "js": 341695 + "css": 277776, + "js": 343597 } } } \ No newline at end of file diff --git a/uui-build/linting/stylelintrc.base.js b/uui-build/linting/stylelintrc.base.js index edada0a806..76a4f75c8b 100644 --- a/uui-build/linting/stylelintrc.base.js +++ b/uui-build/linting/stylelintrc.base.js @@ -90,24 +90,5 @@ module.exports = { ...SCSS_COMMON_RULES, }, }, - { - extends: ['stylelint-config-sass-guidelines'], - files: [ - '**/epam-assets/theme/theme_promo.scss', - '**/epam-assets/theme/theme_electric.scss', - '**/epam-assets/theme/theme_loveship.scss', - '**/epam-assets/theme/theme_loveship_dark.scss', - ], - rules: { - ...SCSS_COMMON_RULES, - 'uui-custom-rules/theme-tokens-validation': [ - true, - { - ignoredUnknownVars: ['--font-inter', '--font-museo-sans', '--uui-btn-bg'], - ignoredRedeclaredVars: ['--uui-border-radius'], - }, - ], - }, - }, ], }; diff --git a/uui-build/package.json b/uui-build/package.json index 3a8b370c59..57eecbde2f 100644 --- a/uui-build/package.json +++ b/uui-build/package.json @@ -8,7 +8,7 @@ "build": "yarn build-module", "build-module": "ts-node -T ts/scripts/buildUuiModule.ts", "generate-components-api": "ts-node ts/scripts/docsGen.ts", - "generate-theme-tokens": "ts-node ts/scripts/themeTokensGen.ts --tokens=../public/docs/figmaTokensGen/Theme.json --out-tokens=../public/docs/figmaTokensGen/ThemeOutput.json --out-tokens-data=../public/docs/figmaTokensGen/ThemeTokens.json --out=../epam-assets/theme/tokens", + "generate-theme-tokens": "ts-node ts/scripts/themeTokensGen.ts --tokens=../public/docs/figmaTokensGen/Theme.json --out-tokens=../public/docs/figmaTokensGen/ThemeOutput.json --out-tokens-data=../public/docs/figmaTokensGen/ThemeTokens.json --out=../epam-assets/theme/variables/tokens", "compile-theme-scss": "ts-node ts/scripts/compileThemeScss.ts", "track-bundle-size": "ts-node ts/scripts/trackBundleSize.ts", "prepublish": "yarn build",