From f76ea2b2fa19fcd4f546b197a83a3c20a78c54c5 Mon Sep 17 00:00:00 2001 From: Zoe Hayes Date: Tue, 9 Apr 2024 15:15:08 -0400 Subject: [PATCH] feat: add Action QueryItem --- design/GlobalToken.json | 77 +- design/LightTheme.ts | 27 +- design/MpThemeConfig.d.ts | 25 + .../data-entry/QueryItem/Action.stories.tsx | 44 + .../data-entry/QueryItem/Action.tsx | 24 + ...fier.stories.tsx => Qualifier.stories.tsx} | 10 +- ...{QueryItem.Qualifier.tsx => Qualifier.tsx} | 4 +- .../QueryItem/QueryItem.stories.tsx | 22 + .../data-entry/QueryItem/QueryItem.tsx | 10 +- .../data-entry/QueryItem/query-item.css | 65 +- src/components/index.ts | 1 + src/styles/_variables.css | 807 +++++++++--------- src/styles/style.ts | 27 +- 13 files changed, 733 insertions(+), 410 deletions(-) create mode 100644 src/components/data-entry/QueryItem/Action.stories.tsx create mode 100644 src/components/data-entry/QueryItem/Action.tsx rename src/components/data-entry/QueryItem/{QueryItem.Qualifier.stories.tsx => Qualifier.stories.tsx} (68%) rename src/components/data-entry/QueryItem/{QueryItem.Qualifier.tsx => Qualifier.tsx} (84%) create mode 100644 src/components/data-entry/QueryItem/QueryItem.stories.tsx diff --git a/design/GlobalToken.json b/design/GlobalToken.json index ee95fca28..7cc740d65 100644 --- a/design/GlobalToken.json +++ b/design/GlobalToken.json @@ -183,7 +183,7 @@ "value": "#f8f6fb" }, "colorBgLayout": { - "value": "#fff" + "value": "#ffffff" }, "colorBgSpotlight": { "value": "#2c2d2b" @@ -344,6 +344,81 @@ "mpColorBorderDisabled": { "value": "#dcdcd8" }, + "mpQueryItem_borderWidth": { + "value": "0 0 1px 0" + }, + "mpQueryItem_borderColor": { + "value": "#c3aeff" + }, + "mpQueryItem_borderColor_active": { + "value": "#3600d1" + }, + "mpQueryItem_borderColor_disabled": { + "value": "#dcdcd8" + }, + "mpQueryItem_borderColor_error": { + "value": "#f5222d" + }, + "mpQueryItem_bgColor": { + "value": "#ffffff" + }, + "mpQueryItem_bgColor_hover": { + "value": "#f8f6fb" + }, + "mpQueryItem_bgColor_active": { + "value": "#ebe8f8" + }, + "mpQueryItem_bgColor_disabled": { + "value": "#faf9f8" + }, + "mpQueryItem_borderWidth_active": { + "value": "0 0 2px 0" + }, + "mpQueryItem_shadow_focus": { + "value": "0 0 0 2px rgba(54, 0, 209, 0.1)" + }, + "mpQueryItem_color_disabled": { + "value": "#505249" + }, + "mpQueryItem|valueSelector_fontWeight": { + "value": "600" + }, + "mpQueryItem|valueSelector_color": { + "value": "#20007a" + }, + "mpQueryItem_padding": { + "value": "4px" + }, + "mpQueryItem_gap": { + "value": "4px" + }, + "mpQueryItem_height": { + "value": "32px" + }, + "mpQueryItem_borderRadius": { + "value": "2px" + }, + "mpQueryItem|action|primary_color": { + "value": "#3600d1" + }, + "mpQueryItem|action|secondary_color": { + "value": "#505249" + }, + "mpQueryItem|action_fontWeight": { + "value": "400" + }, + "mpQueryItem_shadow_active": { + "value": "0 0 0 2px rgba(54, 0, 209, 0.1)" + }, + "mpQueryItem_shadow": { + "value": "none" + }, + "mpQueryItem_borderColor_focus": { + "value": "#3600d1" + }, + "mpQueryItem_borderColor_hover": { + "value": "#3600d1" + }, "blue1": { "value": "#e6f4ff" }, diff --git a/design/LightTheme.ts b/design/LightTheme.ts index 4cbe776c7..7812874e8 100644 --- a/design/LightTheme.ts +++ b/design/LightTheme.ts @@ -21,7 +21,7 @@ export const LightTheme: IMpThemeConfig = { colorFillSecondary: '#ebe8f8', colorFillTertiary: '#faf9f8', colorFillQuaternary: '#f8f6fb', - colorBgLayout: '#fff', + colorBgLayout: '#ffffff', colorBgSpotlight: '#2c2d2b', colorBorder: '#c3aeff', colorBorderSecondary: '#eceae9', @@ -82,6 +82,31 @@ export const LightTheme: IMpThemeConfig = { 'mpBrandSecondary.9': '#212020', 'mpBrandSecondary.10': '#0f0e0e', mpColorBorderDisabled: '#dcdcd8', + mpQueryItem_borderWidth: '0 0 1px 0', + mpQueryItem_borderColor: '#c3aeff', + mpQueryItem_borderColor_active: '#3600d1', + mpQueryItem_borderColor_disabled: '#dcdcd8', + mpQueryItem_borderColor_error: '#f5222d', + mpQueryItem_bgColor: '#ffffff', + mpQueryItem_bgColor_hover: '#f8f6fb', + mpQueryItem_bgColor_active: '#ebe8f8', + mpQueryItem_bgColor_disabled: '#faf9f8', + mpQueryItem_borderWidth_active: '0 0 2px 0', + mpQueryItem_shadow_focus: '0 0 0 2px rgba(54, 0, 209, 0.1)', + mpQueryItem_color_disabled: '#505249', + 'mpQueryItem|valueSelector_fontWeight': '600', + 'mpQueryItem|valueSelector_color': '#20007a', + mpQueryItem_padding: 4, + mpQueryItem_gap: 4, + mpQueryItem_height: 32, + mpQueryItem_borderRadius: 2, + 'mpQueryItem|action|primary_color': '#3600d1', + 'mpQueryItem|action|secondary_color': '#505249', + 'mpQueryItem|action_fontWeight': '400', + mpQueryItem_shadow_active: '0 0 0 2px rgba(54, 0, 209, 0.1)', + mpQueryItem_shadow: 'none', + mpQueryItem_borderColor_focus: '#3600d1', + mpQueryItem_borderColor_hover: '#3600d1', }, components: { Steps: { diff --git a/design/MpThemeConfig.d.ts b/design/MpThemeConfig.d.ts index 24cb873ee..aef12ce6f 100644 --- a/design/MpThemeConfig.d.ts +++ b/design/MpThemeConfig.d.ts @@ -23,6 +23,31 @@ export type IMpThemeConfig = ThemeConfig & { ['mpBrandSecondary.9']: string ['mpBrandSecondary.10']: string mpColorBorderDisabled: string + mpQueryItem_borderWidth: '0 0 1px 0' + mpQueryItem_borderColor: '#c3aeff' + mpQueryItem_borderColor_active: '#3600d1' + mpQueryItem_borderColor_disabled: '#dcdcd8' + mpQueryItem_borderColor_error: '#f5222d' + mpQueryItem_bgColor: '#ffffff' + mpQueryItem_bgColor_hover: '#f8f6fb' + mpQueryItem_bgColor_active: '#ebe8f8' + mpQueryItem_bgColor_disabled: '#faf9f8' + mpQueryItem_borderWidth_active: '0 0 2px 0' + mpQueryItem_shadow_focus: '0 0 0 2px rgba(54, 0, 209, 0.1)' + mpQueryItem_color_disabled: '#505249' + 'mpQueryItem|valueSelector_fontWeight': '600' + 'mpQueryItem|valueSelector_color': '#20007a' + mpQueryItem_padding: 4 + mpQueryItem_gap: 4 + mpQueryItem_height: 32 + mpQueryItem_borderRadius: 2 + 'mpQueryItem|action|primary_color': '#3600d1' + 'mpQueryItem|action|secondary_color': '#505249' + 'mpQueryItem|action_fontWeight': '400' + mpQueryItem_shadow_active: '0 0 0 2px rgba(54, 0, 209, 0.1)' + mpQueryItem_shadow: 'none' + mpQueryItem_borderColor_focus: '#3600d1' + mpQueryItem_borderColor_hover: '#3600d1' } components: { Select: { mpColorBorderDisabled: string } diff --git a/src/components/data-entry/QueryItem/Action.stories.tsx b/src/components/data-entry/QueryItem/Action.stories.tsx new file mode 100644 index 000000000..28f535854 --- /dev/null +++ b/src/components/data-entry/QueryItem/Action.stories.tsx @@ -0,0 +1,44 @@ +import { Meta, StoryObj } from '@storybook/react' +import { QueryItem } from 'src/components' + +const meta: Meta = { + title: 'Aquarium/Data Entry/QueryItem/Action', + component: QueryItem.Action, + parameters: { + docs: { + description: { + component: + 'This is the "Action" component of the QueryItem component group. This component is currently meant to trigger a single action, but will eventually support a list of actions via a dropdown list interface.', + }, + }, + }, + + args: {}, +} +export default meta + +type Story = StoryObj + +export const Primary: Story = { + args: { + text: 'Primary Action', + isPrimary: true, + isDisabled: false, + }, +} + +export const Secondary: Story = { + args: { + text: 'Secondary Action', + isPrimary: false, + isDisabled: false, + }, +} + +export const Disabled: Story = { + args: { + text: 'Disabled Action', + isPrimary: true, + isDisabled: true, + }, +} diff --git a/src/components/data-entry/QueryItem/Action.tsx b/src/components/data-entry/QueryItem/Action.tsx new file mode 100644 index 000000000..7ed3a5b2d --- /dev/null +++ b/src/components/data-entry/QueryItem/Action.tsx @@ -0,0 +1,24 @@ +import { AddIcon, Button } from 'src/components' +import './query-item.css' + +export interface IActionProps { + isPrimary?: boolean + isDisabled?: boolean + text?: string +} + +function Action(props: IActionProps) { + const buttonClassNames: string = props.isPrimary + ? 'query-item-action' + : 'query-item-action query-item-action--secondary' + return ( + <> + + + ) +} + +export default Action diff --git a/src/components/data-entry/QueryItem/QueryItem.Qualifier.stories.tsx b/src/components/data-entry/QueryItem/Qualifier.stories.tsx similarity index 68% rename from src/components/data-entry/QueryItem/QueryItem.Qualifier.stories.tsx rename to src/components/data-entry/QueryItem/Qualifier.stories.tsx index f17d9e8ce..f5874fcb4 100644 --- a/src/components/data-entry/QueryItem/QueryItem.Qualifier.stories.tsx +++ b/src/components/data-entry/QueryItem/Qualifier.stories.tsx @@ -1,12 +1,12 @@ -import { QueryItemQualifier } from './QueryItem.Qualifier' +import { QueryItem } from './QueryItem' import { type Meta, type StoryObj } from '@storybook/react' -type Story = StoryObj +type Story = StoryObj // default -const meta: Meta = { - title: 'Aquarium/Data Entry/QueryItem.Qualifier', - component: QueryItemQualifier, +const meta: Meta = { + title: 'Aquarium/Data Entry/QueryItem/Qualifier', + component: QueryItem.Qualifier, args: {}, } export default meta diff --git a/src/components/data-entry/QueryItem/QueryItem.Qualifier.tsx b/src/components/data-entry/QueryItem/Qualifier.tsx similarity index 84% rename from src/components/data-entry/QueryItem/QueryItem.Qualifier.tsx rename to src/components/data-entry/QueryItem/Qualifier.tsx index 756c3add7..5ff0d3d53 100644 --- a/src/components/data-entry/QueryItem/QueryItem.Qualifier.tsx +++ b/src/components/data-entry/QueryItem/Qualifier.tsx @@ -1,7 +1,7 @@ import './query-item.css' import { CheckIcon } from 'src/components/icons' import type { DefaultOptionType } from 'antd/es/select' -import { type ISelectProps, Select } from '../Select/Select' +import { type ISelectProps, Select } from 'src/components' export type IQueryItemQualifierOption = DefaultOptionType @@ -9,7 +9,7 @@ export interface IQueryItemQualifierProps { options: IQueryItemQualifierOption[] } -export const QueryItemQualifier = (props: IQueryItemQualifierProps) => { +export const Qualifier = (props: IQueryItemQualifierProps) => { const selectProps: ISelectProps = { defaultValue: props.options?.length ? props.options[0].value : undefined, options: props.options, diff --git a/src/components/data-entry/QueryItem/QueryItem.stories.tsx b/src/components/data-entry/QueryItem/QueryItem.stories.tsx new file mode 100644 index 000000000..4193c9b89 --- /dev/null +++ b/src/components/data-entry/QueryItem/QueryItem.stories.tsx @@ -0,0 +1,22 @@ +import { Meta, StoryObj } from '@storybook/react' +import { QueryItem } from 'src/components' + +const meta: Meta = { + title: 'Aquarium/Data Entry/QueryItem', + component: QueryItem, + parameters: { + docs: { + description: { + component: + 'DO NOT USE THIS OR YOU WILL BE FIRED! This is a parent component of this component group, and is not supposed to be used on its own.', + }, + }, + }, + + args: {}, +} +export default meta + +type Story = StoryObj + +export const DontUseThisOrYouWillBeFired: Story = {} diff --git a/src/components/data-entry/QueryItem/QueryItem.tsx b/src/components/data-entry/QueryItem/QueryItem.tsx index 02bc37678..f86a1d198 100644 --- a/src/components/data-entry/QueryItem/QueryItem.tsx +++ b/src/components/data-entry/QueryItem/QueryItem.tsx @@ -1,5 +1,9 @@ -import { QueryItemQualifier } from './QueryItem.Qualifier' +import React from 'react' +import Action from './Action' +import { Qualifier } from './Qualifier' -export const QueryItem = { - Qualifier: QueryItemQualifier, +export const QueryItem = () => { + return <>DON'T USE THIS OR YOU WILL BE FIRED! } +QueryItem.Action = Action +QueryItem.Qualifier = Qualifier diff --git a/src/components/data-entry/QueryItem/query-item.css b/src/components/data-entry/QueryItem/query-item.css index b5cf3fe26..f2e8587d5 100644 --- a/src/components/data-entry/QueryItem/query-item.css +++ b/src/components/data-entry/QueryItem/query-item.css @@ -1,7 +1,68 @@ +@import "src/styles/_variables.css"; +/*border-bottom: 3px solid var(--color-primary);*/ +.query-item-action { + border-width: var(--mp-query-item-border-width); + border-color: var(--mp-query-item-border-color) !important; + border-radius: var(--mp-query-item-border-radius); + background: var(--mp-query-item-bg-color) !important; + padding: var(--mp-query-item-padding) !important; + gap: var(--mp-query-item-gap); + color: var(--mp-query-item-action-primary-color) !important; + height: var(--mp-query-item-height) !important; + display: flex; + justify-content: center; + align-items: center; + box-shadow: none; + + + &:hover { + border-color: var(--mp-query-item-border-color-active) !important; + background: var(--mp-query-item-bg-color-hover) !important; + } + + &:focus { + border-color: var(--mp-query-item-border-color-active) !important; + box-shadow: var(--mp-query-item-shadow-focus); + background: var(--mp-query-item-bg-color) !important; + } + + &:active { + border-color: var(--mp-query-item-border-color-active) !important; + border-width: var(--mp-query-item-border-width-active); + background: var(--mp-query-item-bg-color-active) !important; + box-shadow: var(--mp-query-item-shadow-active); + } + + &.query-item-action--secondary { + color: var(--mp-query-item-action-secondary-color) !important; + + &:hover { + background: var(--mp-query-item-bg-color-hover) !important; + } + + &:active { + border-width: var(--mp-query-item-border-width-active); + background: var(--mp-query-item-bg-color-active) !important; + } + } + + &[disabled] { + color: var(--mp-query-item-color-disabled) !important; + border-color: var(--mp-query-item-border-color-disabled) !important; + } +} + +/*This is temporary until the new icon component is available where sizes can be controlled without CSS*/ +.query-item-action__icon { + height: 16px; + width: 16px; +} + + .query-item-qualifier__item-selected-icon { - margin-left: 5px; + margin-left: 5px; } .query-item-qualifier__select .ant-select-selection-item { - border-bottom: 4px solid var(--mp-brand-primary-8); + border-bottom: 4px solid var(--mp-brand-primary-8); } diff --git a/src/components/index.ts b/src/components/index.ts index 5380cb63a..f4b656081 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -18,6 +18,7 @@ export { Upload, type IUploadProps } from './data-entry/Upload/Upload' export { AutoComplete, type IAutoCompleteProps } from './data-entry/AutoComplete/AutoComplete' export { TimePicker, type ITimePickerProps } from './data-entry/TimePicker/TimePicker' export { Transfer, type ITransferProps } from './data-entry/Transfer/Transfer' +export { QueryItem } from './data-entry/QueryItem/QueryItem' export { Collapse, type ICollapseProps } from './data-display/Collapse/Collapse' export { Timeline, type ITimelineProps } from './data-display/Timeline/Timeline' export { Calendar, type ICalendarProps } from './data-display/Calendar/Calendar' diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 895b742bb..1c5ca59bf 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -1,397 +1,414 @@ :root { - --blue: #1677ff; - --purple: #722ed1; - --cyan: #13c2c2; - --green: #52c41a; - --magenta: #eb2f96; - --pink: #eb2f96; - --red: #f5222d; - --orange: #fa8c16; - --yellow: #fadb14; - --volcano: #fa541c; - --geekblue: #2f54eb; - --gold: #faad14; - --lime: #a0d911; - --color-primary: #3600d1; - --color-success: #52c41a; - --color-warning: #faad14; - --color-error: #f5222d; - --color-info: #1677ff; - --color-link: #1677ff; - --color-text-base: #0f0e0e; - --color-bg-base: #fff; - --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-family-code: 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace; - --font-size: 14px; - --line-width: 1px; - --line-type: solid; - --motion-unit: 0.1; - --motion-base: 0; - --motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); - --motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); - --motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); - --motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); - --motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); - --motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); - --motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); - --motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); - --border-radius: 8px; - --size-unit: 4px; - --size-step: 4px; - --size-popup-arrow: 16px; - --control-height: 32px; - --z-index-base: 0; - --z-index-popup-base: 1000; - --opacity-image: 1; - --wireframe: false; - --motion: true; - --color-link-hover: #ab8eff; - --control-outline: rgba(0.21176470816135406, 0, 0.8196078538894653, 0.1); - --color-warning-outline: #fffbe6; - --color-error-outline: #fff1f0; - --control-item-bg-hover: #f8f6fb; - --control-item-bg-active: #ebe8f8; - --control-item-bg-active-hover: #c3aeff; - --color-text: #0f0e0e; - --color-text-secondary: #212020; - --color-text-tertiary: #2c2d2b; - --color-text-quaternary: #505249; - --color-fill: #dcdcd8; - --color-fill-secondary: #ebe8f8; - --color-fill-tertiary: #faf9f8; - --color-fill-quaternary: #f8f6fb; - --color-bg-layout: #fff; - --color-bg-spotlight: #2c2d2b; - --color-border: #c3aeff; - --color-border-secondary: #eceae9; - --color-split: #eceae9; - --color-primary-bg: #f8f6fb; - --color-primary-bg-hover: #ebe8f8; - --color-primary-border: #c3aeff; - --color-primary-border-hover: #ab8eff; - --color-primary-hover: #ab8eff; - --color-primary-active: #8255ff; - --color-primary-text-hover: #5f29f8; - --color-primary-text: #2c00aa; - --color-primary-text-active: #20007a; - --color-success-hover: #73d13d; - --color-success-text-hover: #237804; - --color-success-text: #135200; - --color-success-text-active: #092b00; - --color-warning-hover: #ffc53d; - --color-warning-text-hover: #ad6800; - --color-warning-text: #874d00; - --color-warning-text-active: #613400; - --color-error-bg: #fff1f0; - --color-error-bg-hover: #ffccc7; - --color-error-border: #ffa39e; - --color-error-border-hover: #ff7875; - --color-error-hover: #ff4d4f; - --color-error-active: #cf1322; - --color-error-text-hover: #a8071a; - --color-error-text: #820014; - --color-error-text-active: #5c0011; - --color-bg-mask: #babbb5; - --border-radius-lg: 16px; - --mp-brand-primary-1: #f8f6fb; - --mp-brand-primary-2: #ebe8f8; - --mp-brand-primary-3: #dbceff; - --mp-brand-primary-4: #c3aeff; - --mp-brand-primary-5: #ab8eff; - --mp-brand-primary-6: #8255ff; - --mp-brand-primary-7: #5f29f8; - --mp-brand-primary-8: #3600d1; - --mp-brand-primary-9: #2c00aa; - --mp-brand-primary-10: #20007a; - --mp-brand-secondary-1: #fff; - --mp-brand-secondary-2: #faf9f8; - --mp-brand-secondary-3: #eceae9; - --mp-brand-secondary-4: #dcdcd8; - --mp-brand-secondary-5: #babbb5; - --mp-brand-secondary-6: #717368; - --mp-brand-secondary-7: #505249; - --mp-brand-secondary-8: #2c2d2b; - --mp-brand-secondary-9: #212020; - --mp-brand-secondary-10: #0f0e0e; - --mp-color-border-disabled: #dcdcd8; - --blue1: #e6f4ff; - --blue2: #bae0ff; - --blue3: #91caff; - --blue4: #69b1ff; - --blue5: #4096ff; - --blue6: #1677ff; - --blue7: #0958d9; - --blue8: #003eb3; - --blue9: #002c8c; - --blue10: #001d66; - --purple1: #f9f0ff; - --purple2: #efdbff; - --purple3: #d3adf7; - --purple4: #b37feb; - --purple5: #9254de; - --purple6: #722ed1; - --purple7: #531dab; - --purple8: #391085; - --purple9: #22075e; - --purple10: #120338; - --cyan1: #e6fffb; - --cyan2: #b5f5ec; - --cyan3: #87e8de; - --cyan4: #5cdbd3; - --cyan5: #36cfc9; - --cyan6: #13c2c2; - --cyan7: #08979c; - --cyan8: #006d75; - --cyan9: #00474f; - --cyan10: #002329; - --green1: #f6ffed; - --green2: #d9f7be; - --green3: #b7eb8f; - --green4: #95de64; - --green5: #73d13d; - --green6: #52c41a; - --green7: #389e0d; - --green8: #237804; - --green9: #135200; - --green10: #092b00; - --magenta1: #fff0f6; - --magenta2: #ffd6e7; - --magenta3: #ffadd2; - --magenta4: #ff85c0; - --magenta5: #f759ab; - --magenta6: #eb2f96; - --magenta7: #c41d7f; - --magenta8: #9e1068; - --magenta9: #780650; - --magenta10: #520339; - --pink1: #fff0f6; - --pink2: #ffd6e7; - --pink3: #ffadd2; - --pink4: #ff85c0; - --pink5: #f759ab; - --pink6: #eb2f96; - --pink7: #c41d7f; - --pink8: #9e1068; - --pink9: #780650; - --pink10: #520339; - --red1: #fff1f0; - --red2: #ffccc7; - --red3: #ffa39e; - --red4: #ff7875; - --red5: #ff4d4f; - --red6: #f5222d; - --red7: #cf1322; - --red8: #a8071a; - --red9: #820014; - --red10: #5c0011; - --orange1: #fff7e6; - --orange2: #ffe7ba; - --orange3: #ffd591; - --orange4: #ffc069; - --orange5: #ffa940; - --orange6: #fa8c16; - --orange7: #d46b08; - --orange8: #ad4e00; - --orange9: #873800; - --orange10: #612500; - --yellow1: #feffe6; - --yellow2: #ffffb8; - --yellow3: #fffb8f; - --yellow4: #fff566; - --yellow5: #ffec3d; - --yellow6: #fadb14; - --yellow7: #d4b106; - --yellow8: #ad8b00; - --yellow9: #876800; - --yellow10: #614700; - --volcano1: #fff2e8; - --volcano2: #ffd8bf; - --volcano3: #ffbb96; - --volcano4: #ff9c6e; - --volcano5: #ff7a45; - --volcano6: #fa541c; - --volcano7: #d4380d; - --volcano8: #ad2102; - --volcano9: #871400; - --volcano10: #610b00; - --geekblue1: #f0f5ff; - --geekblue2: #d6e4ff; - --geekblue3: #adc6ff; - --geekblue4: #85a5ff; - --geekblue5: #597ef7; - --geekblue6: #2f54eb; - --geekblue7: #1d39c4; - --geekblue8: #10239e; - --geekblue9: #061178; - --geekblue10: #030852; - --gold1: #fffbe6; - --gold2: #fff1b8; - --gold3: #ffe58f; - --gold4: #ffd666; - --gold5: #ffc53d; - --gold6: #faad14; - --gold7: #d48806; - --gold8: #ad6800; - --gold9: #874d00; - --gold10: #613400; - --lime1: #fcffe6; - --lime2: #f4ffb8; - --lime3: #eaff8f; - --lime4: #d3f261; - --lime5: #bae637; - --lime6: #a0d911; - --lime7: #7cb305; - --lime8: #5b8c00; - --lime9: #3f6600; - --lime10: #254000; - --color-bg-container: #ffffff; - --color-bg-elevated: #ffffff; - --color-bg-blur: transparent; - --color-success-bg: #f6ffed; - --color-success-bg-hover: #d9f7be; - --color-success-border: #b7eb8f; - --color-success-border-hover: #95de64; - --color-success-active: #389e0d; - --color-warning-bg: #fffbe6; - --color-warning-bg-hover: #fff1b8; - --color-warning-border: #ffe58f; - --color-warning-border-hover: #ffd666; - --color-warning-active: #d48806; - --color-info-bg: #e6f4ff; - --color-info-bg-hover: #bae0ff; - --color-info-border: #91caff; - --color-info-border-hover: #69b1ff; - --color-info-hover: #69b1ff; - --color-info-active: #0958d9; - --color-info-text-hover: #4096ff; - --color-info-text: #1677ff; - --color-info-text-active: #0958d9; - --color-link-active: #0958d9; - --color-white: #fff; - --font-size-sm: 12px; - --font-size-lg: 16px; - --font-size-xl: 20px; - --font-size-heading1: 38px; - --font-size-heading2: 30px; - --font-size-heading3: 24px; - --font-size-heading4: 20px; - --font-size-heading5: 16px; - --line-height: 1.5714285714285714; - --line-height-lg: 1.5; - --line-height-sm: 1.6666666666666667; - --font-height: 22px; - --font-height-lg: 24px; - --font-height-sm: 20px; - --line-height-heading1: 1.2105263157894737; - --line-height-heading2: 1.2666666666666666; - --line-height-heading3: 1.3333333333333333; - --line-height-heading4: 1.4; - --line-height-heading5: 1.5; - --size-xxl: 48px; - --size-xl: 32px; - --size-lg: 24px; - --size-md: 20px; - --size-ms: 16px; - --size: 16rem; - --size-sm: 12px; - --size-xs: 8px; - --size-xxs: 4px; - --control-height-sm: 24px; - --control-height-xs: 16px; - --control-height-lg: 40px; - --motion-duration-fast: 0.1s; - --motion-duration-mid: 0.2s; - --motion-duration-slow: 0.3s; - --line-width-bold: 2px; - --border-radius-xs: 2px; - --border-radius-sm: 6px; - --border-radius-outer: 6px; - --color-fill-content: #ebe8f8; - --color-fill-content-hover: #dcdcd8; - --color-fill-alter: #f8f6fb; - --color-bg-container-disabled: #faf9f8; - --color-border-bg: #ffffff; - --color-text-placeholder: #505249; - --color-text-disabled: #505249; - --color-text-heading: #0f0e0e; - --color-text-label: #212020; - --color-text-description: #2c2d2b; - --color-text-light-solid: #fff; - --color-highlight: #f5222d; - --color-bg-text-hover: #ebe8f8; - --color-bg-text-active: #dcdcd8; - --color-icon: #2c2d2b; - --color-icon-hover: #0f0e0e; - --font-size-icon: 12px; - --line-width-focus: 4px; - --control-outline-width: 2px; - --control-interactive-size: 16px; - --control-item-bg-active-disabled: #dcdcd8; - --control-tmp-outline: #f8f6fb; - --font-weight-strong: 600; - --opacity-loading: 0.65; - --link-decoration: none; - --link-hover-decoration: none; - --link-focus-decoration: none; - --control-padding-horizontal: 12px; - --control-padding-horizontal-sm: 8px; - --padding-xxs: 4px; - --padding-xs: 8px; - --padding-sm: 12px; - --padding: 16px; - --padding-md: 20px; - --padding-lg: 24px; - --padding-xl: 32px; - --padding-content-horizontal-lg: 24px; - --padding-content-vertical-lg: 16px; - --padding-content-horizontal: 16px; - --padding-content-vertical: 12px; - --padding-content-horizontal-sm: 16px; - --padding-content-vertical-sm: 8px; - --margin-xxs: 4px; - --margin-xs: 8px; - --margin-sm: 12px; - --margin: 16px; - --margin-md: 20px; - --margin-lg: 24px; - --margin-xl: 32px; - --margin-xxl: 48px; - --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), - 0 2px 4px 0 rgba(0, 0, 0, 0.02); - --screen-xs: 480px; - --screen-xs-min: 480px; - --screen-xs-max: 575px; - --screen-sm: 576px; - --screen-sm-min: 576px; - --screen-sm-max: 767px; - --screen-md: 768px; - --screen-md-min: 768px; - --screen-md-max: 991px; - --screen-lg: 992px; - --screen-lg-min: 992px; - --screen-lg-max: 1199px; - --screen-xl: 1200px; - --screen-xl-min: 1200px; - --screen-xl-max: 1599px; - --screen-xxl: 1600px; - --screen-xxl-min: 1600px; - --box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05); - --box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), - 0 5px 12px 4px rgba(0, 0, 0, 0.09); - --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), - -9px 0 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), - 9px 0 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), - 0 -9px 28px 8px rgba(0, 0, 0, 0.05); - --box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08); - --box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08); - --box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08); - --box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08); + --blue: #1677ff; + --purple: #722ED1; + --cyan: #13C2C2; + --green: #52C41A; + --magenta: #EB2F96; + --pink: #eb2f96; + --red: #F5222D; + --orange: #FA8C16; + --yellow: #FADB14; + --volcano: #FA541C; + --geekblue: #2F54EB; + --gold: #FAAD14; + --lime: #A0D911; + --color-primary: #3600d1; + --color-success: #52c41a; + --color-warning: #faad14; + --color-error: #f5222d; + --color-info: #1677ff; + --color-link: #1677ff; + --color-text-base: #0f0e0e; + --color-bg-base: #fff; + --font-family: 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-family-code: 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + --font-size: 14px; + --line-width: 1px; + --line-type: solid; + --motion-unit: 0.1; + --motion-base: 0; + --motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); + --motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); + --motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); + --motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); + --motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); + --motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); + --motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); + --motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); + --border-radius: 8px; + --size-unit: 4px; + --size-step: 4px; + --size-popup-arrow: 16px; + --control-height: 32px; + --z-index-base: 0; + --z-index-popup-base: 1000; + --opacity-image: 1; + --wireframe: false; + --motion: true; + --color-link-hover: #ab8eff; + --control-outline: rgba(0.21176470816135406, 0, 0.8196078538894653, 0.1); + --color-warning-outline: #fffbe6; + --color-error-outline: #fff1f0; + --control-item-bg-hover: #f8f6fb; + --control-item-bg-active: #ebe8f8; + --control-item-bg-active-hover: #c3aeff; + --color-text: #0f0e0e; + --color-text-secondary: #212020; + --color-text-tertiary: #2c2d2b; + --color-text-quaternary: #505249; + --color-fill: #dcdcd8; + --color-fill-secondary: #ebe8f8; + --color-fill-tertiary: #faf9f8; + --color-fill-quaternary: #f8f6fb; + --color-bg-layout: #ffffff; + --color-bg-spotlight: #2c2d2b; + --color-border: #c3aeff; + --color-border-secondary: #eceae9; + --color-split: #eceae9; + --color-primary-bg: #f8f6fb; + --color-primary-bg-hover: #ebe8f8; + --color-primary-border: #c3aeff; + --color-primary-border-hover: #ab8eff; + --color-primary-hover: #ab8eff; + --color-primary-active: #8255ff; + --color-primary-text-hover: #5f29f8; + --color-primary-text: #2c00aa; + --color-primary-text-active: #20007a; + --color-success-hover: #73d13d; + --color-success-text-hover: #237804; + --color-success-text: #135200; + --color-success-text-active: #092b00; + --color-warning-hover: #ffc53d; + --color-warning-text-hover: #ad6800; + --color-warning-text: #874d00; + --color-warning-text-active: #613400; + --color-error-bg: #fff1f0; + --color-error-bg-hover: #ffccc7; + --color-error-border: #ffa39e; + --color-error-border-hover: #ff7875; + --color-error-hover: #ff4d4f; + --color-error-active: #cf1322; + --color-error-text-hover: #a8071a; + --color-error-text: #820014; + --color-error-text-active: #5c0011; + --color-bg-mask: #babbb5; + --border-radius-lg: 16px; + --mp-brand-primary-1: #f8f6fb; + --mp-brand-primary-2: #ebe8f8; + --mp-brand-primary-3: #dbceff; + --mp-brand-primary-4: #c3aeff; + --mp-brand-primary-5: #ab8eff; + --mp-brand-primary-6: #8255ff; + --mp-brand-primary-7: #5f29f8; + --mp-brand-primary-8: #3600d1; + --mp-brand-primary-9: #2c00aa; + --mp-brand-primary-10: #20007a; + --mp-brand-secondary-1: #fff; + --mp-brand-secondary-2: #faf9f8; + --mp-brand-secondary-3: #eceae9; + --mp-brand-secondary-4: #dcdcd8; + --mp-brand-secondary-5: #babbb5; + --mp-brand-secondary-6: #717368; + --mp-brand-secondary-7: #505249; + --mp-brand-secondary-8: #2c2d2b; + --mp-brand-secondary-9: #212020; + --mp-brand-secondary-10: #0f0e0e; + --mp-color-border-disabled: #dcdcd8; + --mp-query-item-border-width: 0 0 1px 0; + --mp-query-item-border-color: #c3aeff; + --mp-query-item-border-color-active: #3600d1; + --mp-query-item-border-color-disabled: #dcdcd8; + --mp-query-item-border-color-error: #f5222d; + --mp-query-item-bg-color: #ffffff; + --mp-query-item-bg-color-hover: #f8f6fb; + --mp-query-item-bg-color-active: #ebe8f8; + --mp-query-item-bg-color-disabled: #faf9f8; + --mp-query-item-border-width-active: 0 0 2px 0; + --mp-query-item-shadow-focus: 0 0 0 2px rgba(54, 0, 209, 0.1); + --mp-query-item-color-disabled: #505249; + --mp-query-item-value-selector-font-weight: 600; + --mp-query-item-value-selector-color: #20007a; + --mp-query-item-padding: 4px; + --mp-query-item-gap: 4px; + --mp-query-item-height: 32px; + --mp-query-item-border-radius: 2px; + --mp-query-item-action-primary-color: #3600d1; + --mp-query-item-action-secondary-color: #505249; + --mp-query-item-action-font-weight: 400; + --mp-query-item-shadow-active: 0 0 0 2px rgba(54, 0, 209, 0.1); + --mp-query-item-shadow: none; + --mp-query-item-border-color-focus: #3600d1; + --mp-query-item-border-color-hover: #3600d1; + --blue1: #e6f4ff; + --blue2: #bae0ff; + --blue3: #91caff; + --blue4: #69b1ff; + --blue5: #4096ff; + --blue6: #1677ff; + --blue7: #0958d9; + --blue8: #003eb3; + --blue9: #002c8c; + --blue10: #001d66; + --purple1: #f9f0ff; + --purple2: #efdbff; + --purple3: #d3adf7; + --purple4: #b37feb; + --purple5: #9254de; + --purple6: #722ed1; + --purple7: #531dab; + --purple8: #391085; + --purple9: #22075e; + --purple10: #120338; + --cyan1: #e6fffb; + --cyan2: #b5f5ec; + --cyan3: #87e8de; + --cyan4: #5cdbd3; + --cyan5: #36cfc9; + --cyan6: #13c2c2; + --cyan7: #08979c; + --cyan8: #006d75; + --cyan9: #00474f; + --cyan10: #002329; + --green1: #f6ffed; + --green2: #d9f7be; + --green3: #b7eb8f; + --green4: #95de64; + --green5: #73d13d; + --green6: #52c41a; + --green7: #389e0d; + --green8: #237804; + --green9: #135200; + --green10: #092b00; + --magenta1: #fff0f6; + --magenta2: #ffd6e7; + --magenta3: #ffadd2; + --magenta4: #ff85c0; + --magenta5: #f759ab; + --magenta6: #eb2f96; + --magenta7: #c41d7f; + --magenta8: #9e1068; + --magenta9: #780650; + --magenta10: #520339; + --pink1: #fff0f6; + --pink2: #ffd6e7; + --pink3: #ffadd2; + --pink4: #ff85c0; + --pink5: #f759ab; + --pink6: #eb2f96; + --pink7: #c41d7f; + --pink8: #9e1068; + --pink9: #780650; + --pink10: #520339; + --red1: #fff1f0; + --red2: #ffccc7; + --red3: #ffa39e; + --red4: #ff7875; + --red5: #ff4d4f; + --red6: #f5222d; + --red7: #cf1322; + --red8: #a8071a; + --red9: #820014; + --red10: #5c0011; + --orange1: #fff7e6; + --orange2: #ffe7ba; + --orange3: #ffd591; + --orange4: #ffc069; + --orange5: #ffa940; + --orange6: #fa8c16; + --orange7: #d46b08; + --orange8: #ad4e00; + --orange9: #873800; + --orange10: #612500; + --yellow1: #feffe6; + --yellow2: #ffffb8; + --yellow3: #fffb8f; + --yellow4: #fff566; + --yellow5: #ffec3d; + --yellow6: #fadb14; + --yellow7: #d4b106; + --yellow8: #ad8b00; + --yellow9: #876800; + --yellow10: #614700; + --volcano1: #fff2e8; + --volcano2: #ffd8bf; + --volcano3: #ffbb96; + --volcano4: #ff9c6e; + --volcano5: #ff7a45; + --volcano6: #fa541c; + --volcano7: #d4380d; + --volcano8: #ad2102; + --volcano9: #871400; + --volcano10: #610b00; + --geekblue1: #f0f5ff; + --geekblue2: #d6e4ff; + --geekblue3: #adc6ff; + --geekblue4: #85a5ff; + --geekblue5: #597ef7; + --geekblue6: #2f54eb; + --geekblue7: #1d39c4; + --geekblue8: #10239e; + --geekblue9: #061178; + --geekblue10: #030852; + --gold1: #fffbe6; + --gold2: #fff1b8; + --gold3: #ffe58f; + --gold4: #ffd666; + --gold5: #ffc53d; + --gold6: #faad14; + --gold7: #d48806; + --gold8: #ad6800; + --gold9: #874d00; + --gold10: #613400; + --lime1: #fcffe6; + --lime2: #f4ffb8; + --lime3: #eaff8f; + --lime4: #d3f261; + --lime5: #bae637; + --lime6: #a0d911; + --lime7: #7cb305; + --lime8: #5b8c00; + --lime9: #3f6600; + --lime10: #254000; + --color-bg-container: #ffffff; + --color-bg-elevated: #ffffff; + --color-bg-blur: transparent; + --color-success-bg: #f6ffed; + --color-success-bg-hover: #d9f7be; + --color-success-border: #b7eb8f; + --color-success-border-hover: #95de64; + --color-success-active: #389e0d; + --color-warning-bg: #fffbe6; + --color-warning-bg-hover: #fff1b8; + --color-warning-border: #ffe58f; + --color-warning-border-hover: #ffd666; + --color-warning-active: #d48806; + --color-info-bg: #e6f4ff; + --color-info-bg-hover: #bae0ff; + --color-info-border: #91caff; + --color-info-border-hover: #69b1ff; + --color-info-hover: #69b1ff; + --color-info-active: #0958d9; + --color-info-text-hover: #4096ff; + --color-info-text: #1677ff; + --color-info-text-active: #0958d9; + --color-link-active: #0958d9; + --color-white: #fff; + --font-size-sm: 12px; + --font-size-lg: 16px; + --font-size-xl: 20px; + --font-size-heading1: 38px; + --font-size-heading2: 30px; + --font-size-heading3: 24px; + --font-size-heading4: 20px; + --font-size-heading5: 16px; + --line-height: 1.5714285714285714; + --line-height-lg: 1.5; + --line-height-sm: 1.6666666666666667; + --font-height: 22px; + --font-height-lg: 24px; + --font-height-sm: 20px; + --line-height-heading1: 1.2105263157894737; + --line-height-heading2: 1.2666666666666666; + --line-height-heading3: 1.3333333333333333; + --line-height-heading4: 1.4; + --line-height-heading5: 1.5; + --size-xxl: 48px; + --size-xl: 32px; + --size-lg: 24px; + --size-md: 20px; + --size-ms: 16px; + --size: 16rem; + --size-sm: 12px; + --size-xs: 8px; + --size-xxs: 4px; + --control-height-sm: 24px; + --control-height-xs: 16px; + --control-height-lg: 40px; + --motion-duration-fast: 0.1s; + --motion-duration-mid: 0.2s; + --motion-duration-slow: 0.3s; + --line-width-bold: 2px; + --border-radius-xs: 2px; + --border-radius-sm: 6px; + --border-radius-outer: 6px; + --color-fill-content: #ebe8f8; + --color-fill-content-hover: #dcdcd8; + --color-fill-alter: #f8f6fb; + --color-bg-container-disabled: #faf9f8; + --color-border-bg: #ffffff; + --color-text-placeholder: #505249; + --color-text-disabled: #505249; + --color-text-heading: #0f0e0e; + --color-text-label: #212020; + --color-text-description: #2c2d2b; + --color-text-light-solid: #fff; + --color-highlight: #f5222d; + --color-bg-text-hover: #ebe8f8; + --color-bg-text-active: #dcdcd8; + --color-icon: #2c2d2b; + --color-icon-hover: #0f0e0e; + --font-size-icon: 12px; + --line-width-focus: 4px; + --control-outline-width: 2px; + --control-interactive-size: 16px; + --control-item-bg-active-disabled: #dcdcd8; + --control-tmp-outline: #f8f6fb; + --font-weight-strong: 600; + --opacity-loading: 0.65; + --link-decoration: none; + --link-hover-decoration: none; + --link-focus-decoration: none; + --control-padding-horizontal: 12px; + --control-padding-horizontal-sm: 8px; + --padding-xxs: 4px; + --padding-xs: 8px; + --padding-sm: 12px; + --padding: 16px; + --padding-md: 20px; + --padding-lg: 24px; + --padding-xl: 32px; + --padding-content-horizontal-lg: 24px; + --padding-content-vertical-lg: 16px; + --padding-content-horizontal: 16px; + --padding-content-vertical: 12px; + --padding-content-horizontal-sm: 16px; + --padding-content-vertical-sm: 8px; + --margin-xxs: 4px; + --margin-xs: 8px; + --margin-sm: 12px; + --margin: 16px; + --margin-md: 20px; + --margin-lg: 24px; + --margin-xl: 32px; + --margin-xxl: 48px; + --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02); + --screen-xs: 480px; + --screen-xs-min: 480px; + --screen-xs-max: 575px; + --screen-sm: 576px; + --screen-sm-min: 576px; + --screen-sm-max: 767px; + --screen-md: 768px; + --screen-md-min: 768px; + --screen-md-max: 991px; + --screen-lg: 992px; + --screen-lg-min: 992px; + --screen-lg-max: 1199px; + --screen-xl: 1200px; + --screen-xl-min: 1200px; + --screen-xl-max: 1599px; + --screen-xxl: 1600px; + --screen-xxl-min: 1600px; + --box-shadow-popover-arrow: 2px 2px 5px rgba(0, 0, 0, 0.05); + --box-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); + --box-shadow-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05); + --box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08); + --box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08); + --box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08); + --box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08); } diff --git a/src/styles/style.ts b/src/styles/style.ts index 9d793f6e4..754fd2faa 100644 --- a/src/styles/style.ts +++ b/src/styles/style.ts @@ -60,7 +60,7 @@ export const ColorFill = '#dcdcd8' export const ColorFillSecondary = '#ebe8f8' export const ColorFillTertiary = '#faf9f8' export const ColorFillQuaternary = '#f8f6fb' -export const ColorBgLayout = '#fff' +export const ColorBgLayout = '#ffffff' export const ColorBgSpotlight = '#2c2d2b' export const ColorBorder = '#c3aeff' export const ColorBorderSecondary = '#eceae9' @@ -114,6 +114,31 @@ export const MpBrandSecondary8 = '#2c2d2b' export const MpBrandSecondary9 = '#212020' export const MpBrandSecondary10 = '#0f0e0e' export const MpColorBorderDisabled = '#dcdcd8' +export const MpQueryItemBorderWidth = '0 0 1px 0' +export const MpQueryItemBorderColor = '#c3aeff' +export const MpQueryItemBorderColorActive = '#3600d1' +export const MpQueryItemBorderColorDisabled = '#dcdcd8' +export const MpQueryItemBorderColorError = '#f5222d' +export const MpQueryItemBgColor = '#ffffff' +export const MpQueryItemBgColorHover = '#f8f6fb' +export const MpQueryItemBgColorActive = '#ebe8f8' +export const MpQueryItemBgColorDisabled = '#faf9f8' +export const MpQueryItemBorderWidthActive = '0 0 2px 0' +export const MpQueryItemShadowFocus = '0 0 0 2px rgba(54, 0, 209, 0.1)' +export const MpQueryItemColorDisabled = '#505249' +export const MpQueryItemValueSelectorFontWeight = '600' +export const MpQueryItemValueSelectorColor = '#20007a' +export const MpQueryItemPadding = '4px' +export const MpQueryItemGap = '4px' +export const MpQueryItemHeight = '32px' +export const MpQueryItemBorderRadius = '2px' +export const MpQueryItemActionPrimaryColor = '#3600d1' +export const MpQueryItemActionSecondaryColor = '#505249' +export const MpQueryItemActionFontWeight = '400' +export const MpQueryItemShadowActive = '0 0 0 2px rgba(54, 0, 209, 0.1)' +export const MpQueryItemShadow = 'none' +export const MpQueryItemBorderColorFocus = '#3600d1' +export const MpQueryItemBorderColorHover = '#3600d1' export const Blue1 = '#e6f4ff' export const Blue2 = '#bae0ff' export const Blue3 = '#91caff'